@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");
/* ===== AllesKlaro – EINHEITLICHER HEADER (eine Quelle) ===== */
/* Namespaced unter .akhead, damit nichts mit Seiten-CSS kollidiert. */
.akhead{--ah-ink:#1a1c1e;--ah-mag:#d01060;--ah-line:#E7E8EE;--ah-line2:#BCC1C7;--ah-muted:#747889;font-family:"Open Sans",system-ui,sans-serif;flex:0 0 auto}
.akhead *{box-sizing:border-box}
.akhead a{text-decoration:none}
.akhead__wrap{max-width:1180px;margin:0 auto;padding:0 24px}
/* Topbar */
.akhead__topbar{background:var(--ah-ink);color:#dfe2e6;font-size:.83rem}
.akhead__topbar .akhead__wrap{display:flex;gap:1.1rem;justify-content:center;flex-wrap:wrap;padding:8px 24px}
.akhead__topbar b{color:#fff}
.akhead__dot{opacity:.5}
/* Bar */
.akhead__bar{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--ah-line)}
.akhead__nav{display:flex;align-items:center;gap:1.4rem;padding:14px 24px}
.akhead__brand{display:inline-flex;align-items:center}
.akhead__brand img{height:60px;width:auto;display:block}
.akhead__links{display:flex;gap:1.4rem;margin-left:1rem}
.akhead__links a{font-family:"Roboto Slab",Georgia,serif;font-weight:600;text-transform:uppercase;font-size:.95rem;color:var(--ah-ink);letter-spacing:.01em}
.akhead__links a:hover,.akhead__links a.is-active{color:var(--ah-mag)}
.akhead__sp{flex:1}
/* Konto-Bereich */
.akhead__acct{display:inline-flex;align-items:center;gap:16px}
.akhead__acct a{font-family:"Roboto Slab",Georgia,serif;font-weight:600;font-size:.92rem;color:var(--ah-ink);white-space:nowrap}
.akhead__acct a:hover{color:var(--ah-mag)}
.akhead__reg{border:1.5px solid var(--ah-mag);color:var(--ah-mag)!important;border-radius:8px;padding:8px 13px;line-height:1}
.akhead__reg:hover{background:var(--ah-mag);color:#fff!important}
/* CTA */
.akhead__cta{font-family:"Roboto Slab",Georgia,serif;font-weight:700;text-transform:uppercase;letter-spacing:.03em;background:var(--ah-mag);color:#fff;border-radius:10px;padding:12px 20px;white-space:nowrap}
.akhead__cta:hover{background:#b00d52}
/* Suche */
.akhead__searchwrap{background:#fff;border-bottom:1px solid var(--ah-line);padding:10px 24px;display:flex;justify-content:center}
.akhead__search{position:relative;width:100%;max-width:680px}
.akhead__search form{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--ah-line);border-radius:12px;padding:6px 6px 6px 14px}
.akhead__search form:focus-within{border-color:var(--ah-mag);box-shadow:0 0 0 3px rgba(208,16,96,.12)}
.akhead__search svg{color:#9aa3ad;flex:none}
.akhead__search input{flex:1;border:0;outline:0;font:15px/1.4 "Open Sans",system-ui,sans-serif;background:transparent;color:var(--ah-ink)}
.akhead__search button{border:0;background:var(--ah-mag);color:#fff;border-radius:9px;padding:9px 16px;font:600 14px "Open Sans",sans-serif;cursor:pointer}
.akhead__sug{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--ah-line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.12);overflow:hidden;z-index:60}
.akhead__sug a{display:flex;align-items:center;gap:12px;padding:10px 14px;color:var(--ah-ink);border-bottom:1px solid #f0f1f4}
.akhead__sug a:last-child{border-bottom:0}
.akhead__sug a:hover,.akhead__sug a.on{background:#fff2f8}
.akhead__sug img,.akhead__sug .ph{width:40px;height:40px;border-radius:8px;object-fit:cover;background:#eef0f3;flex:none}
.akhead__sug .t{flex:1;font-size:14px;line-height:1.3}
.akhead__sug .p{font-family:"Roboto Slab",serif;font-weight:700;font-size:14px;white-space:nowrap}
.akhead__sug .all{display:block;text-align:center;padding:11px;font-weight:600;color:var(--ah-mag);background:#fafbfc}
/* Prism */
.akhead__prism{height:6px;background:linear-gradient(90deg,#e52427,#f59e0b,#16a34a,#2563eb,#7c3aed,#d01060)}
/* Responsive */
@media(max-width:900px){.akhead__links{display:none}}
@media(max-width:560px){.akhead__reg{display:none}}

/* ===== AK-THEME-B "Signalblau" (09.10.2026) – eine Quelle fuer alle Seiten ===== */
html:root{--mag:#1a5c9a;--ink:#1f262e;--text:#333c46;--surf:#f3f5f7;--bg:#f3f5f7;--line:#d7dce2;--line2:#b9c1ca;--muted:#47515c}
html .akhead{--ah-ink:#1f262e;--ah-mag:#1a5c9a;--ah-line:#d7dce2;--ah-line2:#b9c1ca;--ah-muted:#47515c}
/* Schrift: ueberall ausser in der Konfigurator-App (dort bleiben die Schild-Schriften unberuehrt) */
html body:not(.cfgpage),html body:not(.cfgpage) *:not(svg):not(svg *),html .akhead,html .akhead *:not(svg):not(svg *),html .akftr,html .akftr *,html [class^="akcd"],html [class^="akcd"] *:not(svg):not(svg *){font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif!important}
html body:not(.cfgpage) .eyebrow:not(svg):not(svg *),html body:not(.cfgpage) .catnav-title:not(svg):not(svg *){font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace!important;font-weight:500;letter-spacing:.06em;color:#1a5c9a}
html body.cfgpage{--ak-magenta:#1a5c9a;--ak-magenta-tint:#e8f0f8;--fg-link:#1a5c9a;--fg-link-hover:#123f6b;--border-focus:#1a5c9a;--focus-ring:0 0 0 3px rgba(26,92,154,.22);--font-display:"IBM Plex Sans",system-ui,sans-serif;--font-body:"IBM Plex Sans",system-ui,sans-serif;--bg-canvas:#f3f5f7;--radius-md:10px;--radius-lg:16px}
/* Regenbogen-Linien entfernen */
html .akhead__prism,html .bar,html .prism,html .akr__prism,html .akftr .bar{display:none!important}
/* Kopf */
html .akhead__topbar{background:#f3f5f7;color:#47515c;border-bottom:1px solid #d7dce2}
html .akhead__topbar b{color:#1f262e;font-weight:600}
html .akhead__brand img{height:48px}
html .akhead__links a{text-transform:none;font-weight:500;font-size:.97rem;letter-spacing:0}
html .akhead__acct a{font-weight:500}
html .akhead__reg{border-width:1px;border-radius:10px;padding:10px 14px}
html .akhead__cta{text-transform:none;letter-spacing:0;font-weight:600;border-radius:10px}
html .akhead__cta:hover{background:#123f6b}
html .akhead__search form{background:#f3f5f7;border-color:#b9c1ca;border-radius:10px}
html .akhead__search form:focus-within{border-color:#1a5c9a;box-shadow:0 0 0 3px rgba(26,92,154,.18)}
html .akhead__search button{border-radius:8px}
html .akhead__sug a:hover,html .akhead__sug a.on{background:#e8f0f8}
/* Flaechen, Typo, Buttons */
html body:not(.cfgpage){background:#f3f5f7;color:#333c46}
html body:not(.cfgpage) h1,html body:not(.cfgpage) h2,html body:not(.cfgpage) h3{font-weight:700;letter-spacing:-.015em;line-height:1.12}
html .hero h1 span{color:inherit}
html .section.alt{background:#ffffff}
html .btn{text-transform:none;letter-spacing:0;font-weight:600;border-radius:10px;border-width:1px}
html .btn-mag:hover{background:#123f6b}
html .card,html .step,html .panel,html .sz,html .auth-card,html .konto-nav,html .konto-main,html .catnav-box,html .ctaband,html .pay{border-radius:16px;border-color:#d7dce2}
html .card:hover{box-shadow:0 6px 18px rgba(31,38,46,.10)}
html .sz{border-width:1px}html .sz.feat{border-color:#1a5c9a;box-shadow:0 0 0 1px #1a5c9a}
html .field input,html .field select,html .field textarea,html .auth-card input{border-radius:10px}
html .trust b{font-weight:600}
/* Uebersicht, Seitenzahlen, FAQ */
html .catnav a.active{background:#e8f0f8;color:#123f6b}
html .ak-pg-item a:hover{border-color:#1a5c9a;color:#1a5c9a}
html .ak-pg-item.active span{background:#1a5c9a;border-color:#1a5c9a;color:#fff}
html .faq__item summary::after{color:#1a5c9a}
html .faq__item[open] summary{color:#1a5c9a}
/* Fusszeile */
html .akftr{background:#1f262e}
html .akftr .wm b{color:#fff}
html .akftr h4{text-transform:none;letter-spacing:0;font-weight:600}
/* Aufklapp-Menue, Produktseite */
html .aknav__trg{text-transform:none;letter-spacing:0;font-weight:500;font-size:.97rem}
html .aknav__trg.is-active{color:#1a5c9a}
html .aknav__pl:hover{background:#e8f0f8;color:#123f6b}
html .size.on,html .thumb.on{box-shadow:0 0 0 2px rgba(26,92,154,.18)}
html .primary{border-radius:10px;font-weight:600}
html .pcat{letter-spacing:.04em}
/* ===== AK-KOMPAKT: Konfigurator platzsparend ===== */
html body.cfgpage .akhead__topbar,html body.cfgpage .akhead__searchwrap{display:none}
html body.cfgpage .akhead__nav{padding:7px 20px}
html body.cfgpage .akhead__brand img{height:36px}
html body.cfgpage .akhead__cta{padding:9px 16px}
html body.cfgpage .akhead__reg{padding:8px 12px}
html body.cfgpage .cfg-shell{grid-template-columns:minmax(272px,304px) minmax(0,1fr) minmax(264px,292px);gap:12px;padding:12px 16px}
html body.cfgpage .akhead__bar{height:auto!important;min-height:0!important}
html body.cfgpage .akhead__bar::before,html body.cfgpage .akhead__bar::after{display:none!important}
/* ===== AK-BUEHNE: Konfigurator als eine Buehne ===== */
@media(min-width:1101px){html body.cfgpage #root{min-height:calc(100vh - 57px)}}
.cfgpop{position:absolute;right:12px;top:12px;width:340px;max-height:calc(100% - 24px)}
@media(max-width:1100px){.cfgpop{left:10px;right:10px;top:auto;bottom:10px;width:auto;max-height:62%}}
/* AK-STIL: Optionsfeld unter der Vorschau-Leiste, damit "Alles loeschen" frei bleibt */
@media(min-width:1101px){.cfgpop{top:58px;max-height:calc(100% - 70px)}}

/* ===== AK-NURVORLAGEN: Katalog-Suche ausgeblendet ===== */
html body .akhead__searchwrap{display:none}
html body .akhead__bar{height:auto!important;min-height:0!important}
html body .akhead__bar::before,html body .akhead__bar::after{display:none!important}

/* ===== AK-KOPFBREIT: Kopf so breit wie der Inhalt, groesseres Logo, ohne Infoleiste ===== */
html body .akhead__topbar{display:none}
@media(min-width:1000px){
html body .akhead__nav{max-width:min(1560px,94vw)}
html body:not(.cfgpage) .akhead__brand img{height:64px}
}

/* ===== AK-KOPFGLEICH: Kopf auf allen Seiten gleich und oben fixiert ===== */
html body .akhead{position:sticky;top:0;z-index:60}
html body.cfgpage .akhead__nav{padding:14px 24px}
html body.cfgpage .akhead__brand img{height:48px}
html body.cfgpage .akhead__cta{padding:12px 20px}
html body.cfgpage .akhead__reg{padding:10px 14px}
@media(min-width:1000px){html body.cfgpage .akhead__brand img{height:64px}}
@media(min-width:1101px){html body.cfgpage #root{min-height:calc(100vh - 93px)}}

/* ===== AK-FUSSBLAU: Footer in Signalblau mit Original-Logo ===== */
html body .akftr{background:#1a5c9a;color:#dbe7f3}
html body .akftr p{color:#dbe7f3}
html body .akftr a{color:#dbe7f3}
html body .akftr a:hover{color:#fff;text-decoration:underline}
html body .akftr .fbot{border-top-color:rgba(255,255,255,.24);color:#c9dbec}
html body .akftr .brandrow img{width:auto;height:52px;background:#fff;border-radius:10px;padding:8px 14px;box-sizing:content-box}

/* ===== AK-KOPFMOBIL: Kopf auf schmalen Bildschirmen ohne Ueberlauf, Menue als zweite Zeile ===== */
@media(max-width:900px){
html body .akhead__nav{flex-wrap:wrap;gap:6px 10px;padding:10px 14px}
html body .akhead__brand img,html body.cfgpage .akhead__brand img{height:40px}
html body .akhead__sp{flex:1 1 0;min-width:0}
html body .akhead__cta{display:none}
html body .akhead__links{order:9;flex:1 0 100%;display:flex;margin-left:0;gap:4px;border-top:1px solid #d7dce2;padding-top:6px;min-width:0;flex-wrap:wrap}
}

/* ===== AK-KOPFOHNEMENUE: keine Menuepunkte, hoeherer Kopf, groesseres Logo ===== */
html body .akhead__links{display:none!important}
html body .akhead__nav,html body.cfgpage .akhead__nav{padding:18px 24px}
@media(min-width:1000px){html body:not(.cfgpage) .akhead__brand img,html body.cfgpage .akhead__brand img{height:86px}}
@media(min-width:1101px){html body.cfgpage #root{min-height:calc(100vh - 123px)}}
@media(max-width:900px){
html body .akhead__nav,html body.cfgpage .akhead__nav{padding:12px 14px}
html body .akhead__brand img,html body.cfgpage .akhead__brand img{height:52px}
html body .akhead__cta{display:block;padding:10px 14px}
}