/* CaptainForge-Schicht — cf-layer.css · v20260912cf1 · gehört zu assets/cf-layer.js
   Bedienhilfen · Vorlesen (KI-Stimme) · KI-Siegel-Badge. Nutzt die FPC-Tokens mit Fallbacks.
   Z-Index: Header 90 < Knopf/Badge 260 < Vorlese-Leiste 300 < Backdrop 320 < Dialoge 330. */

:root{--cf-cyan:var(--cyan,#3fe0d0);--cf-gold:var(--gold,#ffc861);--cf-paper:var(--paper,#eef5fa);
 --cf-muted:var(--muted,#9db0c2);--cf-line:var(--line,rgba(255,255,255,.14));
 --cf-fd:var(--fd,'Bricolage Grotesque',system-ui,sans-serif);--cf-fb:var(--fb,'Figtree',system-ui,sans-serif);
 --cf-panel-bg:rgba(7,12,22,.975);--cf-panel-flaeche:#1b2738;--cf-panel-rand:rgba(255,255,255,.45)}

/* g) Fokus sichtbar — heller Ring global, dunkler Ring auf hellen Flächen */
:focus-visible{outline:3px solid var(--cf-cyan);outline-offset:3px;border-radius:4px}
.btn:focus-visible,.cta:focus-visible,.skip:focus-visible,.skip:focus,.btn.gold:focus-visible,
.langsw button.on:focus-visible{outline:3px solid #04121a;outline-offset:3px}
main:focus,main:focus-visible,[tabindex="-1"]:focus{outline:none}

/* c) Schriftgrößen — die Seiten setzen body{font-size:17px}, rem hängt an html{font-size} */
html.cf-f125{font-size:125%}
html.cf-f150{font-size:150%}
html.cf-f200{font-size:200%}
html.cf-f125 body{font-size:21.25px}
html.cf-f150 body{font-size:25.5px}
html.cf-f200 body{font-size:34px}
/* Header/Nav/Burger bleiben unskaliert (feste px statt rem) */
html[class*="cf-f1"] header,html[class*="cf-f2"] header{font-size:initial}
html[class*="cf-f1"] header .brand,html[class*="cf-f2"] header .brand{font-size:14.7px}
html[class*="cf-f1"] header nav.main a.lnk,html[class*="cf-f2"] header nav.main a.lnk{font-size:15px}
html[class*="cf-f1"] header .langsw button,html[class*="cf-f2"] header .langsw button{font-size:11.5px}
html[class*="cf-f1"] header .cta,html[class*="cf-f2"] header .cta,
html[class*="cf-f1"] #fpcMnav,html[class*="cf-f2"] #fpcMnav{font-size:14.6px}
html[class*="cf-f1"] #fpcMnav a.lnk,html[class*="cf-f2"] #fpcMnav a.lnk{font-size:16px}
html[class*="cf-f1"] .skip,html[class*="cf-f2"] .skip{font-size:16px}

/* Zeilenabstand */
html.cf-zeilen body{line-height:1.9}
html.cf-zeilen main :where(p,li,dd,dt,figcaption,blockquote,.lede,.lead,.prose){line-height:2!important;letter-spacing:.012em}
html.cf-zeilen main :where(h1,h2,h3,h4,h5,h6){line-height:1.35!important}
html.cf-zeilen main :where(p,li){margin-bottom:1em}

/* Gut lesbare Schrift */
html.cf-schrift body,html.cf-schrift main :where(p,li,dd,dt,span,a,strong,em,figcaption,blockquote,td,th,summary,h1,h2,h3,h4,h5,h6,.lede,.lead){
 font-family:Verdana,Tahoma,'DejaVu Sans',Arial,system-ui,sans-serif!important;letter-spacing:.02em;word-spacing:.09em;font-weight:500}
html.cf-schrift main :where(h1,h2,h3,h4,h5,h6){font-weight:700;letter-spacing:0}

/* Links unterstreichen */
html.cf-links main a,html.cf-links footer a,html.cf-links header a.lnk{text-decoration:underline!important;text-underline-offset:3px;text-decoration-thickness:2px}
html.cf-links main a:focus-visible{text-decoration-thickness:3px}

/* Bewegung anhalten (Videos pausiert zusätzlich cf-layer.js) */
html.cf-ruhe *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;scroll-behavior:auto!important}
html.cf-ruhe .reveal,html.cf-ruhe .js .reveal{opacity:1!important;transform:none!important}
html.cf-ruhe #cf-muenze{animation:none!important;transform:none!important}
@media(prefers-reduced-motion:reduce){#cf-muenze{animation:none!important}}

/* Hoher Kontrast — Flächen schwarz, Text #fff (21:1), Akzent #9ff5eb (15,9:1) */
html.cf-kontrast{--ink:#000;--ink2:#000;--surf:#000;--surf2:#000;--paper:#fff;--muted:#fff;--line:#fff;
 --cyan:#9ff5eb;--cyan-deep:#9ff5eb;--gold:#ffd98a;--gold-deep:#ffd98a;
 --cf-cyan:#9ff5eb;--cf-paper:#fff;--cf-muted:#fff;--cf-line:#fff;
 --cf-panel-bg:#000;--cf-panel-flaeche:#000;--cf-panel-rand:#fff;background:#000}
html.cf-kontrast body{background:#000!important;color:#fff!important}
html.cf-kontrast :where(header,footer,main,section,.band,.band.alt,.page-hero,.card,.cc .c,.legal details,.wrap,article,aside,details,summary,.grid,.prose){
 background:#000!important;background-image:none!important;box-shadow:none!important}
html.cf-kontrast main :where(p,li,dd,dt,span,div,td,th,figcaption,blockquote,small,strong,em,b,i,h1,h2,h3,h4,h5,h6,.lede,.lead,.prose),
html.cf-kontrast :where(footer,footer *){color:#fff!important;-webkit-text-fill-color:#fff!important}
html.cf-kontrast main .kick,html.cf-kontrast main .eyebrow,html.cf-kontrast main .accent,
html.cf-kontrast main .card .n,html.cf-kontrast main .cc .c .t,html.cf-kontrast main .ico,
html.cf-kontrast header .brand span,html.cf-kontrast main a,html.cf-kontrast footer a{
 color:#9ff5eb!important;-webkit-text-fill-color:#9ff5eb!important;background-image:none!important;background-clip:border-box!important}
html.cf-kontrast :where(.card,.cc .c,.legal details,header,footer,.ico,.ck,.btn.ghost,input,select,textarea){border:1px solid #fff!important}
html.cf-kontrast .btn,html.cf-kontrast .cta{background:#9ff5eb!important;background-image:none!important;color:#000!important;
 -webkit-text-fill-color:#000!important;border:2px solid #fff!important;box-shadow:none!important}
html.cf-kontrast .btn.ghost{background:#000!important;color:#9ff5eb!important;-webkit-text-fill-color:#9ff5eb!important}
html.cf-kontrast .btn.gold{background:#ffd98a!important;color:#000!important;-webkit-text-fill-color:#000!important}
html.cf-kontrast header{background:#000!important;backdrop-filter:none!important;border-bottom:2px solid #fff!important}
html.cf-kontrast nav.main a.lnk,html.cf-kontrast .langsw button{color:#fff!important}
html.cf-kontrast .langsw button.on{background:#9ff5eb!important;color:#000!important}
html.cf-kontrast video,html.cf-kontrast canvas,html.cf-kontrast iframe{opacity:.14!important;filter:grayscale(1) contrast(.5)!important}
html.cf-kontrast img:not(#cf-siegel-bild):not(#cf-muenze){filter:contrast(1.15) saturate(.75)}
html.cf-kontrast main a{text-decoration:underline!important;text-underline-offset:3px}

/* ======================= Schicht-Bausteine (skalieren nie mit) ========== */
#cf-a11y-knopf,#cf-badge,#cf-a11y-panel,#cf-info,#cf-vorlesen-leiste,#cf-backdrop{font-size:initial;line-height:1.45;box-sizing:border-box}

/* b) Bedienhilfen-Knopf unten links */
#cf-a11y-knopf{position:fixed;left:18px;bottom:18px;z-index:260;display:flex;align-items:center;justify-content:center;
 width:52px;height:52px;padding:0;border:1px solid rgba(63,224,208,.55);border-radius:50%;background:rgba(10,20,34,.92);
 backdrop-filter:blur(10px) saturate(140%);box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 22px rgba(63,224,208,.25);
 cursor:pointer;color:var(--cf-cyan);transition:transform .25s,box-shadow .25s,border-color .2s}
#cf-a11y-knopf:hover{transform:translateY(-2px);border-color:var(--cf-cyan)}
#cf-a11y-knopf svg{width:27px;height:27px;display:block}
html.cf-kontrast #cf-a11y-knopf{background:#000;border:2px solid #fff;color:#9ff5eb}

/* e) KI-Siegel-Badge unten rechts */
#cf-badge{position:fixed;right:18px;bottom:18px;z-index:260;display:flex;align-items:center;gap:9px;padding:7px 14px 7px 8px;
 border:1px solid rgba(255,200,97,.45);border-radius:999px;background:rgba(10,20,34,.92);backdrop-filter:blur(10px) saturate(140%);
 box-shadow:0 12px 30px rgba(0,0,0,.45);cursor:pointer;color:var(--cf-paper);font-family:var(--cf-fb);font-size:13px;
 font-weight:700;letter-spacing:.02em;transition:transform .25s,border-color .2s}
#cf-badge:hover{transform:translateY(-2px);border-color:var(--cf-gold)}
#cf-badge img{width:34px;height:34px;display:block;border-radius:50%}
#cf-badge .cf-badge-text{white-space:nowrap}
html.cf-kontrast #cf-badge{background:#000;border:2px solid #fff;color:#fff}
@media(max-width:560px){#cf-badge .cf-badge-text{display:none}#cf-badge{padding:7px}}

/* Backdrop für beide Dialoge */
#cf-backdrop{position:fixed;inset:0;z-index:320;display:none;margin:0;padding:0;border:0;cursor:pointer;
 background:rgba(2,5,10,.62);backdrop-filter:blur(2px)}
#cf-backdrop.offen{display:block}

/* c) Panel „Darstellung anpassen" */
#cf-a11y-panel{position:fixed;left:18px;bottom:82px;z-index:330;width:min(360px,calc(100vw - 36px));
 max-height:calc(100vh - 110px);overflow-y:auto;display:none;flex-direction:column;gap:12px;padding:20px 18px 18px;
 background:var(--cf-panel-bg);border:1px solid var(--cf-panel-rand);border-radius:20px;box-shadow:0 28px 70px rgba(0,0,0,.65);
 color:var(--cf-paper);font-family:var(--cf-fb);font-size:15px}
#cf-a11y-panel.offen{display:flex}
#cf-a11y-panel h2{font-family:var(--cf-fd);font-size:17px;font-weight:700;line-height:1.25;letter-spacing:0;margin:0;
 padding-inline-end:34px;color:var(--cf-paper)}
#cf-a11y-panel .cf-sub{font-size:13px;color:var(--cf-muted);margin:-8px 0 0}
#cf-a11y-panel .cf-grp{display:flex;flex-direction:column;gap:7px}
#cf-a11y-panel .cf-label{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--cf-cyan);font-weight:800}
#cf-a11y-panel .cf-row{display:flex;gap:8px;flex-wrap:wrap}
#cf-a11y-panel .cf-fs{white-space:nowrap;flex-basis:0}
.cf-btn{flex:1 1 0;min-width:64px;min-height:44px;display:flex;align-items:center;justify-content:center;gap:7px;
 padding:9px 12px;font-family:var(--cf-fb);font-weight:600;font-size:14px;color:var(--cf-paper);text-align:center;
 background:var(--cf-panel-flaeche);border:1px solid var(--cf-panel-rand);border-radius:11px;cursor:pointer;
 transition:background .15s,border-color .15s}
.cf-btn:hover{border-color:var(--cf-cyan)}
.cf-btn[aria-pressed="true"]{background:#123f3c;border-color:var(--cf-cyan);color:#fff}
.cf-btn.cf-breit{flex:1 1 100%;justify-content:space-between;text-align:start}
.cf-btn .cf-zustand{font-weight:800;color:var(--cf-cyan);font-size:13px}
html.cf-kontrast .cf-btn{background:#000;border:2px solid #fff;color:#fff}
html.cf-kontrast .cf-btn[aria-pressed="true"]{background:#9ff5eb;color:#000}
html.cf-kontrast .cf-btn .cf-zustand{color:inherit}
#cf-a11y-panel .cf-speak{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:46px;padding:12px;
 font-family:var(--cf-fd);font-weight:700;font-size:14.5px;color:#04140f;background:var(--cf-cyan);
 border:1px solid var(--cf-cyan);border-radius:12px;cursor:pointer}
#cf-a11y-panel .cf-speak[aria-pressed="true"]{background:var(--cf-gold);border-color:var(--cf-gold);color:#1a1205}
#cf-a11y-panel .cf-speak[disabled]{opacity:.55;cursor:not-allowed}
html.cf-kontrast #cf-a11y-panel .cf-speak{background:#9ff5eb;border:2px solid #fff;color:#000}
#cf-a11y-panel .cf-ki-zeile{font-size:12.5px;color:var(--cf-muted);margin:-6px 0 0}
#cf-a11y-panel .cf-hinweis{font-size:12px;line-height:1.6;color:var(--cf-muted);border-top:1px solid var(--cf-line);padding-top:10px;margin:0}
#cf-a11y-panel a.cf-link{color:var(--cf-cyan);text-decoration:underline;text-underline-offset:3px;font-size:13.5px;font-weight:600}
html.cf-kontrast #cf-a11y-panel a.cf-link,html.cf-kontrast #cf-info a.cf-link{color:#9ff5eb}
.cf-x{position:absolute;top:12px;inset-inline-end:14px;width:34px;height:34px;padding:0;display:flex;align-items:center;
 justify-content:center;border-radius:50%;border:1px solid var(--cf-panel-rand);background:transparent;color:var(--cf-paper);
 font-size:19px;line-height:1;cursor:pointer}
.cf-x:hover{border-color:var(--cf-cyan)}
html.cf-kontrast .cf-x{border:2px solid #fff;color:#fff}

/* e) Badge-Dialog */
#cf-info{position:fixed;z-index:330;inset-inline-start:50%;top:50%;transform:translate(-50%,-50%);
 width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow-y:auto;display:none;flex-direction:column;gap:14px;
 padding:26px 24px 22px;background:var(--cf-panel-bg);border:1px solid var(--cf-panel-rand);border-radius:22px;
 box-shadow:0 30px 80px rgba(0,0,0,.7);color:var(--cf-paper);font-family:var(--cf-fb);font-size:15px}
html[dir="rtl"] #cf-info{transform:translate(50%,-50%)}
#cf-info.offen{display:flex}
#cf-info h2{font-family:var(--cf-fd);font-size:20px;font-weight:700;line-height:1.2;letter-spacing:0;margin:0;
 padding-inline-end:34px;color:var(--cf-paper)}
#cf-info p{font-size:14.5px;line-height:1.62;color:var(--cf-paper);margin:0}
html.cf-kontrast #cf-info p{color:#fff}
#cf-info .cf-muenze-wrap{display:flex;justify-content:center}
#cf-muenze{width:128px;height:128px;border-radius:50%;display:block;animation:cf-dreh 14s linear infinite;
 filter:drop-shadow(0 0 22px rgba(255,200,97,.35))}
@keyframes cf-dreh{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
#cf-info .cf-links-zeile{display:flex;gap:18px;flex-wrap:wrap;border-top:1px solid var(--cf-line);padding-top:14px}
#cf-info a.cf-link{color:var(--cf-cyan);text-decoration:underline;text-underline-offset:3px;font-weight:600;font-size:14px}

/* d) Vorlese-Leiste */
#cf-vorlesen-leiste{position:fixed;z-index:300;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));
 width:min(440px,calc(100vw - 150px));display:none;flex-direction:column;gap:9px;padding:12px 16px;
 background:rgba(7,12,22,.97);border:1px solid var(--cf-panel-rand);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.6);
 color:var(--cf-paper);font-family:var(--cf-fb);font-size:13.5px}
#cf-vorlesen-leiste.offen{display:flex}
#cf-vorlesen-leiste .cf-vl-kopf{display:flex;align-items:center;gap:9px}
#cf-vorlesen-leiste .cf-vl-punkt{width:10px;height:10px;border-radius:50%;background:var(--cf-cyan);flex:0 0 auto;animation:cf-puls 1.4s ease-in-out infinite}
@keyframes cf-puls{0%,100%{opacity:1}50%{opacity:.25}}
#cf-vorlesen-leiste .cf-vl-text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#cf-vorlesen-leiste .cf-vl-zahl{font-variant-numeric:tabular-nums;color:var(--cf-muted);font-size:12px;flex:0 0 auto}
#cf-vorlesen-leiste .cf-vl-knoepfe{display:flex;gap:8px}
#cf-vorlesen-leiste button{flex:1 1 0;min-height:40px;padding:8px 10px;font-family:var(--cf-fb);font-weight:700;font-size:13.5px;
 color:var(--cf-paper);background:var(--cf-panel-flaeche);border:1px solid var(--cf-panel-rand);border-radius:10px;cursor:pointer}
#cf-vorlesen-leiste button:hover{border-color:var(--cf-cyan)}
html.cf-kontrast #cf-vorlesen-leiste{background:#000;border:2px solid #fff}
html.cf-kontrast #cf-vorlesen-leiste button{background:#000;border:2px solid #fff;color:#fff}
@media(max-width:560px){#cf-vorlesen-leiste{width:calc(100vw - 32px);bottom:calc(80px + env(safe-area-inset-bottom,0px))}}

/* Aktuell vorgelesener Abschnitt */
.cf-liest{outline:3px solid var(--cf-cyan);outline-offset:4px;border-radius:6px;background:rgba(63,224,208,.10)}
html.cf-kontrast .cf-liest{outline:3px solid #ffd98a;background:#111!important}

/* Nur für Screenreader */
.cf-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* RTL (Arabisch) */
html[dir="rtl"] #cf-a11y-knopf{left:auto;right:18px}
html[dir="rtl"] #cf-badge{right:auto;left:18px}
html[dir="rtl"] #cf-a11y-panel{left:auto;right:18px}
html[dir="rtl"] .cf-btn.cf-breit{text-align:right}

/* Mobil + Safe-Area */
@media(max-width:900px){
 #cf-a11y-knopf{width:46px;height:46px;left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
 #cf-a11y-knopf svg{width:24px;height:24px}
 html[dir="rtl"] #cf-a11y-knopf{left:auto;right:12px}
 #cf-badge{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
 html[dir="rtl"] #cf-badge{right:auto;left:12px}
 #cf-a11y-panel{left:12px;right:12px;width:auto;bottom:calc(70px + env(safe-area-inset-bottom,0px));max-height:calc(100vh - 140px)}
 html[dir="rtl"] #cf-a11y-panel{left:12px;right:12px}
 footer{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))!important}
}
@media(prefers-reduced-motion:reduce){
 #cf-a11y-knopf,#cf-badge{transition:none}
 #cf-vorlesen-leiste .cf-vl-punkt{animation:none}
}