/* Scalable navigation bar, logo, and brand name */
.nav--scalable {
	height: 130px;
	transition: height 0.35s cubic-bezier(.4,0,.2,1);
}
.nav--scalable.nav--shrink {
	height: 64px;
}
.brand__logo--scalable {
	width: 72px;
	height: 72px;
	transition: width 0.35s cubic-bezier(.4,0,.2,1), height 0.35s cubic-bezier(.4,0,.2,1), transform 0.35s cubic-bezier(.4,0,.2,1);
	transform: scale(1.3);
}
.nav--shrink .brand__logo--scalable {
	width: 48px;
	height: 48px;
	transform: scale(1);
}
.brand__name--scalable {
	font-size: 2.2rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--txt);
	line-height: 1;
	margin-left: 0.2em;
	transition: font-size 0.35s cubic-bezier(.4,0,.2,1), margin-left 0.35s cubic-bezier(.4,0,.2,1);
}
.nav--shrink .brand__name--scalable {
	font-size: 1.6rem;
	margin-left: 0.4em;
}
/* Full global.css restored from backup to fix missing styles */

.hero .btn--primary:hover,
.hero .btn--primary:focus-visible {
	background: #047857;
	color: #fff;
	border-color: #fff;
}
.hero .btn--ghost {
	background: rgba(255,255,255,0.96);
	color: #059669;
	border: 2px solid #059669;
	font-weight: 700;
	box-shadow: 0 2px 12px rgba(0,0,0,.10);
}
.hero .btn--ghost:hover,
.hero .btn--ghost:focus-visible {
	background: #fff;
	color: #047857;
	border-color: #047857;
}

/* Section CTA button styles for dark background */
.section--cta .btn--ghost {
	background: rgba(255,255,255,0.96);
	color: #059669;
	border: 2px solid #059669;
	font-weight: 700;
	box-shadow: 0 2px 12px rgba(0,0,0,.10);
}
.section--cta .btn--ghost:hover,
.section--cta .btn--ghost:focus-visible {
	background: #fff;
	color: #047857;
	border-color: #047857;
}
:root {
	--bg: #0b1020;
	--bg-elev: #0f172a;
	/* === BRAND (emerald) === */
	--brand: #059669; /* Hauptfarbe */
	--brand-700: #047857; /* Hover/aktive Nuance */
	--brand-50: #ecfdf5; /* sehr hell f�r Fl�chen/Banner */
	--ring: #a7f3d0; /* Fokusring (emerald-200) */
	/* Text & UI */
	--txt: #0f172a;
	--muted: #475569;
	--ok: #059669;
	--surface: #ffffff;
	--maxw: 1200px;
	--radius: 14px;
	--shadow: 0 8px 30px rgba(2,6,23,.1);
	/* Hero Background */
	--hero-bg-image: url('../images/headerbackground.svg');
}

/* Linksbuendigkeit fuer .lead */
.lead { text-align: left; }

.hero-bg-overlay { position: absolute; inset: 0; z-index: 0; background: var(--hero-bg-image) center/cover no-repeat; }
.hero-bg-overlay--white { background: rgba(255,255,255,0.7); z-index: 1; }
.hero > .container { position: relative; z-index: 2; }

@media (prefers-color-scheme: dark) {
	:root { --surface:#0b1020; --txt:#e2e8f0; --muted:#94a3b8; --bg:#0b1020; --bg-elev:#0f172a; --shadow:0 8px 30px rgba(0,0,0,.45); }
}
html[data-theme="light"] { --surface:#ffffff; --txt:#0f172a; --muted:#475569; --bg:#0b1020; --bg-elev:#0f172a; --shadow:0 8px 30px rgba(2,6,23,.1); }
html[data-theme="dark"] { --surface:#0b1020; --txt:#e2e8f0; --muted:#94a3b8; --bg:#0b1020; --bg-elev:#0f172a; --shadow:0 8px 30px rgba(0,0,0,.45); }

* { box-sizing: border-box }
html:focus-within { scroll-behavior: smooth; }
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji"; color:var(--txt); background:var(--surface); line-height:1.6; }
a { color:inherit; text-decoration:none; }
h1 { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 700; color: var(--txt); margin: 0 0 1rem 0; line-height: 1.2; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 600; color: var(--txt); margin: 0 0 1rem 0; line-height: 1.3; letter-spacing: -0.015em; }
h3 { font-size: 1.2rem; font-weight: 600; color: var(--txt); margin: 0 0 0.75rem 0; line-height: 1.3; }
.container { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(16px,4vw,32px); }

/* Skip link */
.skip-link { position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { position:static; width:auto; height:auto; margin:8px; padding:.5rem .75rem; background:#fff; color:#000; border-radius:8px; }

/* Header / Nav */
header { position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(10px); background: color-mix(in srgb, var(--surface) 82%, transparent); border-bottom:1px solid color-mix(in srgb, var(--muted) 20%, transparent); }
.nav { display:flex; align-items:center; justify-content:space-between; height:64px; gap:.6rem; }
.brand { display:flex; align-items:center; gap:.8rem; font-weight:700; font-size:1.25rem; }
.brand__logo { width:48px; height:48px; display:block; object-fit:contain; }
.menu { display:flex; gap:1.2rem; align-items:center; }
.menu a { color:var(--muted); font-weight:500; }
.menu a:hover, .menu a[aria-current="page"] { color:var(--brand-700); border-bottom:2px solid var(--brand-700); background: color-mix(in srgb, var(--brand-50) 60%, transparent); }
.cta { padding:.4rem .9rem; border-radius:10px; background:var(--brand); color:#fff; font-weight:500; font-size:1.08rem; letter-spacing:0.01em; box-shadow:var(--shadow); border:none; transition:background .18s, color .18s; outline:none; }
.cta:hover, .cta:focus { background:var(--brand-700); color:#fff; outline:2px solid var(--ring); outline-offset:2px; }
.menu .cta { color:white !important; }
.menu .cta:hover, .menu .cta:focus { color:white !important; }
.menu a.cta { background:var(--brand); border:none; }
.menu a.cta:hover, .menu a.cta:focus-visible { background:var(--brand-700)!important; color:#fff!important; border-bottom:none!important; box-shadow:0 0 0 2px color-mix(in srgb, var(--brand) 35%, transparent); }
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.45rem .6rem; border-radius:10px; background:transparent; border:1px solid color-mix(in srgb, var(--muted) 22%, transparent); color:var(--txt); cursor:pointer; }
.theme-toggle:hover { border-color: color-mix(in srgb, var(--muted) 40%, transparent); }
.theme-toggle:focus-visible { outline:3px solid var(--ring); outline-offset:2px; }
.theme-toggle svg { width:18px; height:18px; }
.icon-moon { display:none; }
html[data-theme="dark"] .icon-sun { display:none; }
html[data-theme="dark"] .icon-moon { display:inline; }
.burger { display:none; background:none; border:0; color:var(--txt); }
.burger:focus-visible { outline:3px solid var(--ring); border-radius:8px; }
@media (min-width:901px){ .menu[hidden] { display:flex !important; } }
@media (max-width:900px){ .menu { display:none; position:absolute; top:64px; left:0; right:0; padding:16px; background:var(--surface); border-bottom:1px solid color-mix(in srgb, var(--muted) 15%, transparent);} .menu.open { display:grid; gap:.8rem;} .burger{display:inline-flex; align-items:center; justify-content:center; padding:.4rem;} }

/* Hero */
.hero { 
	position: relative; 
	overflow: hidden;
	background: radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--brand) 28%, var(--bg)) 0%, var(--bg) 60%), var(--bg); 
	color:#0f172a; 
	padding-block:clamp(48px,10vw,120px); 
	border-bottom:1px solid color-mix(in srgb, var(--muted) 15%, transparent); 
	min-height:420px; 
	max-height:520px; 
	height:100%; 
	box-sizing:border-box; 
	background-size:cover!important; 
	background-position:center!important; 
}
.hero h1 { font-size:clamp(2rem,6vw,3.5rem); color:#0f172a; -webkit-text-stroke:0.3px rgba(255,255,255,0.35); text-shadow:0 1px 2px rgba(255,255,255,0.18); }
.hero p { color:#1f2937; max-width:65ch; margin:0 0 1.5rem; font-size:clamp(16px,2.4vw,20px); text-shadow:0 1px 1px rgba(255,255,255,0.15); background:rgba(255,255,255,0.85); border-radius:10px; padding:.7em 1.2em; display:inline-block; }
.hero-cta { display:flex; gap:.8rem; flex-wrap:wrap; }
.btn { padding:.85rem 1.1rem; border-radius:12px; font-weight:700; border:1px solid transparent; cursor:pointer; }
.btn--primary { background:var(--brand); color:white; }
.btn--primary:hover { background:var(--brand-700); }
.btn--ghost { background:transparent; border:2px solid var(--brand-50); color:var(--brand); font-weight:700; box-shadow:none; }
html[data-theme="dark"] .btn--ghost { color:#e2e8f0; border-color:var(--muted); }
.btn--ghost:hover { border-color:var(--brand-700); color:var(--brand-700); }
html[data-theme="dark"] .btn--ghost:hover { color:#fff; border-color:#fff; }

/* Sections */
section { padding-block:clamp(30px,6vw,60px); }
.section-title { font-size:clamp(1.75rem,3.5vw,2.5rem); margin:0 0 1.2rem; }
.section--alt { background: linear-gradient(180deg, rgba(236, 253, 245, 0.65), transparent 80%); }
.section--cta { background: linear-gradient(135deg, var(--brand), var(--brand-700)); color: white; }
.section--cta .section-title, .section--cta p { color: white; }
.section--cta .cta { background: white; color: var(--brand); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.section--cta .cta:hover, .section--cta .cta:focus { background: var(--brand-50); color: var(--brand-700); outline-color: rgba(255,255,255,0.5); }

/* Grid cards */
.grid { display:grid; gap:clamp(14px,2vw,24px); grid-template-columns:repeat(12,1fr); }
.cards > article { grid-column:span 4; display:flex; flex-direction:column; gap:.35rem; padding:1.1rem; background:var(--surface); border:1px solid color-mix(in srgb, var(--muted) 14%, transparent); border-radius:var(--radius); box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease; }
.cards > article:hover { transform:translateY(-2px); }
.cards h3 { margin:.2rem 0 .5rem; font-size:1.1rem; font-weight:600; }
.cards p { color:var(--muted); margin:0; }
@media (max-width:1000px){ .cards > article { grid-column:span 6; } }
@media (max-width:640px){ .cards > article { grid-column:span 12; } }

/* Pricing */
.pricing { background:linear-gradient(180deg, color-mix(in srgb, var(--brand-50) 70%, transparent), transparent 50%); border-top:1px solid color-mix(in srgb, var(--muted) 12%, transparent); }
.price-cards article { grid-column:span 4; padding:1.2rem; border-radius:var(--radius); border:1px solid color-mix(in srgb, var(--muted) 16%, transparent); background:var(--surface); box-shadow:var(--shadow); }
.price-cards h3 { margin:.2rem 0 .5rem; font-weight:600; }
.price { font-size:clamp(22px,3.2vw,28px); font-weight:800; }
.features { list-style:none; padding:0; margin:.6rem 0 1rem; }
.features li { display:flex; gap:.5rem; align-items:flex-start; color:var(--muted); }
.features svg { flex:0 0 18px; margin-top:.2rem; color:var(--ok); }
.price-cards .cta { display:inline-block; margin-top:.4rem; }

/* Utilities */
.badge { display:inline-flex; gap:.4rem; align-items:center; font-weight:700; background:color-mix(in srgb, var(--brand) 18%, transparent); color:var(--brand-700); padding:.25rem .55rem; border-radius:999px; border:1px solid color-mix(in srgb, var(--brand) 35%, transparent); }
.muted { color:var(--muted); }
.center { text-align:center; }

/* Floating Cards / Misc */
.ss { background:var(--surface); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; border:1px solid color-mix(in srgb, var(--muted) 18%, transparent); }
.ss > img { display:block; width:100%; height:auto; }
.glow { box-shadow:0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent), 0 10px 30px color-mix(in srgb, var(--brand) 16%, transparent), var(--shadow); }
figure { margin:0; }
figcaption { color:var(--muted); font-size:.95rem; margin-top:.6rem; text-align:center; }
.ar-16x10 { aspect-ratio:16/10; }
.ar-4x3 { aspect-ratio:4/3; }
#screens-cards .cards { grid-auto-rows:1fr; }
#screens-cards .card { grid-column:span 6; transform:rotate(var(--tilt,0deg)) translateZ(0); transition:transform .18s ease, box-shadow .18s ease; }
#screens-cards .card:hover { transform:rotate(0deg) translateY(-4px); box-shadow:0 0 0 1px color-mix(in srgb, var(--brand) 24%, transparent), 0 16px 40px color-mix(in srgb, var(--brand) 18%, transparent), var(--shadow); }
#screens-cards .t--2 { --tilt:-2.2deg; }
#screens-cards .t--1 { --tilt:-1.2deg; }
#screens-cards .t-1 { --tilt:1.2deg; }
#screens-cards .t-2 { --tilt:2.4deg; }
@media (max-width:900px){ #screens-cards .card { grid-column:span 12; } }

/* Modal / Branche Modal */
.modal { position:fixed; inset:0; background:rgba(0,0,0,0.35); display:flex; align-items:center; justify-content:center; z-index:9999; }
.modal[hidden] { display:none; }
.modal-content { background:var(--surface); color:var(--txt); border-radius:16px; box-shadow:var(--shadow); padding:2rem; width:500px; max-width:90vw; max-height:80vh; overflow-y:auto; position:relative; }
.branche-modal { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:9999; display:flex; align-items:center; justify-content:center; }
.branche-modal[hidden] { display:none; }
.branche-modal-content { position:relative; background:#fff; border-radius:16px; box-shadow:0 8px 32px rgba(0,0,0,0.18); padding:2rem 2.5rem; width:500px; max-width:90vw; max-height:90vh; overflow-y:auto; }
.branche-modal-bg { position:absolute; inset:0; z-index:0; background:url('../images/headerbackground.svg') center/cover no-repeat; opacity:0.15; border-radius:16px; pointer-events:none; }
.branche-modal-close { position:absolute; top:1rem; right:1rem; background:#fff; border:none; font-size:2rem; color:#333; cursor:pointer; border-radius:50%; width:2.5rem; height:2.5rem; box-shadow:0 2px 8px rgba(0,0,0,0.10); transition:background .2s; z-index:1; }
.branche-modal-close:hover { background:#f3f4f6; }
.branche-modal h3, .branche-modal ul, .branche-modal p { position:relative; z-index:1; }

/* Footer */
.footer-grid { background:#222; color:#f3f3f3; font-family:'Segoe UI', Arial, sans-serif; width:100%; }
.footer-row { display:grid; grid-template-columns:1fr 1fr 1fr; max-width:1200px; margin:0 auto; padding:32px 24px 0 24px; gap:32px; }
.footer-row--bottom { border-top:1px solid #333; padding:16px 24px; margin-top:24px; font-size:.95rem; align-items:center; }
.footer-col { display:flex; flex-direction:column; justify-content:flex-start; gap:8px; }
.footer-col--brand { flex-direction:row; align-items:center; gap:16px; }
.footer-title { font-size:1.2rem; font-weight:600; color:#fff; }
.footer-desc { font-size:.95rem; color:#bbb; }
.footer-col--links nav { display:grid; grid-template-columns:1fr 1fr; gap:8px 32px; justify-content:center; }
.footer-col--links a { color:#f3f3f3; text-decoration:none; font-size:1rem; transition:color .2s; }
.footer-col--links a:hover { color:#059669; }
.footer-col--contact { display:flex; flex-direction:column; gap:8px; justify-content:flex-start; }
.footer-col--contact a { color:#059669; text-decoration:none; }
.footer-col--contact a:hover { text-decoration:underline; }
.footer-col--legal { display:flex; flex-direction:row; gap:24px; justify-content:center; align-items:center; }
.footer-col--legal a { color:#bbb; text-decoration:none; transition:color .2s; }
.footer-col--legal a:hover { color:#059669; }
.footer-col--social { display:flex; flex-direction:row; gap:16px; justify-content:flex-end; align-items:center; }
.footer-col--social a img { filter:invert(1) brightness(2) grayscale(1); transition:filter .2s; }
.footer-col--social a:hover img { filter:invert(36%) sepia(100%) saturate(841%) hue-rotate(118deg) brightness(96%) contrast(96%); }
.footer-col--copyright { justify-content:flex-start; color:#bbb; }
@media (max-width:900px){ .footer-row { grid-template-columns:1fr; gap:16px; padding:24px 12px 0 12px; } .footer-row--main { gap:16px; } .footer-row--bottom { grid-template-columns:1fr; gap:8px; text-align:center; padding:12px 8px; } .footer-col--links nav { justify-content:center; } .footer-col--legal, .footer-col--social { justify-content:center; } }

/* Form status */
.form-status { display:block; grid-column:1 / -1; width:100%; white-space:normal; overflow:visible; font-size:.95rem; line-height:1.35; margin-top:10px; padding:8px 14px; border-radius:10px; background:color-mix(in srgb, var(--muted) 10%, transparent); color:var(--txt); border:1px solid color-mix(in srgb, var(--muted) 28%, transparent); box-shadow:0 2px 6px rgba(0,0,0,0.05) inset; }
.form-status--pending { background:#fef9c3; border-color:#facc15; color:#854d0e; }
.form-status--success { background:#dcfce7; border-color:#16a34a; color:#166534; }
.form-status--error { background:#fee2e2; border-color:#dc2626; color:#991b1b; }

/* Branchenlösungen Karten (global für mehrere Seiten) */
#loesungen .cards > article,
[data-loesungen] .cards > article { cursor:pointer; position:relative; }
#loesungen .cards > article:hover,
[data-loesungen] .cards > article:hover { box-shadow:0 6px 26px rgba(0,0,0,0.12); transform:translateY(-2px); }
#loesungen .cards > article:focus-visible,
[data-loesungen] .cards > article:focus-visible { outline:3px solid var(--ring); outline-offset:3px; }
.card-hint { display:block; margin-top:.35rem; font-size:.8rem; letter-spacing:.03em; text-transform:uppercase; color:var(--brand-700); font-weight:600; }

/* Legal pages styles */
.hero--simple { padding: 80px 0 60px; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-700) 100%); color: #fff; }
.hero--simple h1 { color: #fff; }
.hero--simple p { font-size: 1.1rem; opacity: 0.9; }

.legal-content { max-width: 800px; margin: 0 auto; }
.legal-content h2 { color: var(--brand-700); margin: 48px 0 20px 0; }
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content h3 { font-size: 1.2rem; font-weight: 600; color: var(--txt); margin: 32px 0 16px 0; }
.legal-content p { margin-bottom: 16px; line-height: 1.7; }
.legal-content ul { margin: 16px 0; padding-left: 24px; }
.legal-content li { margin-bottom: 8px; line-height: 1.6; }
.legal-content a { color: var(--brand); text-decoration: none; }
.legal-content a:hover { text-decoration: underline; }

.contact-info { margin-top: 48px; padding: 24px; background: var(--brand-50); border-radius: var(--radius); border-left: 4px solid var(--brand); }
.contact-info h3 { color: var(--brand-700); margin-top: 0; margin-bottom: 16px; }

/* Cookie Banner Styles */
.cookie-banner { 
	position: fixed; 
	bottom: 0; 
	left: 0; 
	right: 0; 
	background: #fff; 
	border-top: 1px solid #e5e7eb; 
	box-shadow: 0 -4px 20px rgba(0,0,0,0.15); 
	z-index: 1000; 
	padding: 20px; 
	animation: slideUp 0.3s ease-out;
}
.cookie-banner[hidden] { display: none; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.cookie-banner__content { 
	max-width: 1200px; 
	margin: 0 auto; 
	display: flex; 
	align-items: center; 
	gap: 24px; 
}

.cookie-banner__text { flex: 1; }
.cookie-banner__text h3 { 
	margin: 0 0 8px 0; 
	font-size: 1.1rem; 
	font-weight: 600; 
	color: #111827; 
}
.cookie-banner__text p { 
	margin: 0 0 8px 0; 
	font-size: 0.9rem; 
	line-height: 1.4; 
	color: #4b5563; 
}
.cookie-banner__link { 
	color: var(--brand); 
	text-decoration: none; 
	font-size: 0.9rem; 
	font-weight: 500; 
}
.cookie-banner__link:hover { text-decoration: underline; }

.cookie-banner__actions { 
	display: flex; 
	gap: 12px; 
	flex-shrink: 0; 
}

.cookie-btn { 
	padding: 10px 20px; 
	border-radius: 8px; 
	font-size: 0.9rem; 
	font-weight: 500; 
	cursor: pointer; 
	transition: all 0.2s; 
	border: none; 
	white-space: nowrap;
}
.cookie-btn--primary { 
	background: var(--brand); 
	color: #fff; 
}
.cookie-btn--primary:hover { background: var(--brand-700); }
.cookie-btn--secondary { 
	background: #f3f4f6; 
	color: #1f2937; 
	border: 1px solid #d1d5db; 
}
.cookie-btn--secondary:hover { background: #e5e7eb; }
.cookie-btn--ghost { 
	background: transparent; 
	color: #4b5563; 
	border: 1px solid #d1d5db; 
}
.cookie-btn--ghost:hover { background: #f9fafb; color: #1f2937; }

/* Cookie Modal */
.cookie-modal { 
	position: fixed; 
	inset: 0; 
	z-index: 1100; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	padding: 20px; 
}
.cookie-modal[hidden] { display: none; }

.cookie-modal__overlay { 
	position: absolute; 
	inset: 0; 
	background: rgba(0,0,0,0.6); 
	backdrop-filter: blur(4px); 
}

.cookie-modal__content { 
	position: relative; 
	background: #fff; 
	border-radius: 12px; 
	max-width: 600px; 
	width: 100%; 
	max-height: 80vh; 
	overflow-y: auto; 
	box-shadow: 0 20px 40px rgba(0,0,0,0.2); 
}

.cookie-modal__header { 
	padding: 24px 24px 0 24px; 
	display: flex; 
	align-items: center; 
	justify-content: space-between; 
}
.cookie-modal__header h2 { 
	margin: 0; 
	font-size: 1.5rem; 
}
.cookie-modal__close { 
	background: none; 
	border: none; 
	font-size: 1.5rem; 
	cursor: pointer; 
	color: var(--muted); 
	padding: 4px; 
	line-height: 1; 
}
.cookie-modal__close:hover { color: var(--txt); }

.cookie-modal__body { 
	padding: 24px; 
}
.cookie-modal__body > p { 
	margin: 0 0 24px 0; 
	color: var(--muted); 
	line-height: 1.5; 
}

.cookie-category { 
	margin-bottom: 24px; 
	border: 1px solid #e5e7eb; 
	border-radius: 8px; 
	overflow: hidden; 
}

.cookie-category__header { 
	padding: 16px; 
	background: #f9fafb; 
}

.cookie-toggle { 
	display: flex; 
	align-items: center; 
	cursor: pointer; 
	gap: 12px; 
}
.cookie-toggle input { 
	position: absolute; 
	opacity: 0; 
	pointer-events: none; 
}

.cookie-toggle__slider { 
	width: 44px; 
	height: 24px; 
	background: #d1d5db; 
	border-radius: 12px; 
	position: relative; 
	transition: background-color 0.2s; 
}
.cookie-toggle__slider::after { 
	content: ''; 
	position: absolute; 
	width: 20px; 
	height: 20px; 
	background: #fff; 
	border-radius: 50%; 
	top: 2px; 
	left: 2px; 
	transition: transform 0.2s; 
	box-shadow: 0 2px 4px rgba(0,0,0,0.2); 
}
.cookie-toggle input:checked + .cookie-toggle__slider { background: var(--brand); }
.cookie-toggle input:checked + .cookie-toggle__slider::after { transform: translateX(20px); }
.cookie-toggle input:disabled + .cookie-toggle__slider { opacity: 0.6; cursor: not-allowed; }

.cookie-toggle__label { flex: 1; }
.cookie-category__status { 
	display: block; 
	font-size: 0.8rem; 
	color: var(--muted); 
	font-weight: normal; 
}

.cookie-category__description { 
	padding: 16px; 
	font-size: 0.9rem; 
	color: var(--muted); 
	line-height: 1.4; 
	border-top: 1px solid #e5e7eb; 
}

.cookie-modal__footer { 
	padding: 0 24px 24px 24px; 
	display: flex; 
	gap: 12px; 
	justify-content: flex-end; 
}

/* Responsive */
@media (max-width: 768px) {
	.cookie-banner__content { flex-direction: column; align-items: stretch; gap: 16px; }
	.cookie-banner__actions { justify-content: space-between; }
	.cookie-btn { flex: 1; padding: 12px 16px; font-size: 0.85rem; }
	.cookie-modal { padding: 10px; }
	.cookie-modal__content { max-height: 90vh; }
	.cookie-modal__footer { flex-direction: column; }
}