/* ===== Display-Serif als eigene Dateien daneben (OFL, vendor/fonts/) ===== */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(cormorant-400.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(cormorant-600.woff2) format("woff2")}
 
 
:root{--zier-staerke:.22}
@media (prefers-color-scheme:dark){:root{--zier-staerke:.28}}
 

.sprungmarke{
  position:absolute; left:.5rem; top:-3rem; z-index:9999;
  display:inline-block; padding:.6rem 1rem;
  background:#1b6e45; color:#fff; text-decoration:none;
  border-radius:.35rem; font:600 .95rem/1.2 system-ui,-apple-system,sans-serif;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  transition:top .12s ease-out;
}
.sprungmarke:focus-visible{ top:.5rem; outline:3px solid #fff; outline-offset:2px; }

@media (prefers-color-scheme:dark){
  .sprungmarke{ background:#5fb98a; color:#10140f; box-shadow:0 2px 10px rgba(0,0,0,.6); }
  .sprungmarke:focus-visible{ outline-color:#10140f; }
}

 
@media (prefers-reduced-motion:reduce){
  .sprungmarke{ transition:none; }
}
 

 
.wegmarke{
  display:flex; align-items:center; gap:.5rem;
  margin:0 0 1rem; padding:0;
  font-size:.78rem; letter-spacing:.08em;
  color:var(--muted); text-transform:none;
}
.wegmarke-punkt{
  width:.5rem; height:.5rem; border-radius:50%;
  background:var(--accent); flex:0 0 auto;
}
.wegmarke-wort{ font-weight:600; }

 
.wegmarke-entdecken   .wegmarke-punkt{ background:var(--info,var(--accent)); }
.wegmarke-ueben  .wegmarke-punkt{ background:var(--accent); }
.wegmarke-wiederholen .wegmarke-punkt{ background:var(--ok,var(--accent)); }

 
.dreiwege{
  display:flex; flex-direction:column; gap:.9rem;
  margin:1.25rem 0 .5rem;
}
.dreiwege-zeile{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  padding:.85rem 1rem;
  border:1px solid var(--line); border-radius:var(--r-md,12px);
  background:var(--surface,transparent);
}
.dreiwege-zeile.erst{
  border-color:var(--accent);
   
}
.dreiwege-satz{
  margin:0; flex:1 1 12rem;
  color:var(--fg); font-size:.95rem; line-height:1.4;
}
.dreiwege-zeile.erst .dreiwege-satz{ font-weight:600; }
.dreiwege-zeile .btn{ flex:0 0 auto; letter-spacing:.06em; }

 
.dreiwege-rechnung{
  margin:.25rem 0 0; color:var(--muted); font-size:.9rem;
}
.dreiwege-warum{
  margin:.15rem 0 1rem; color:var(--muted); font-size:.85rem;
}

 
@media (max-width:420px){
  .dreiwege-zeile{ flex-direction:column; align-items:stretch; }
  .dreiwege-zeile .btn{ width:100%; }
   
  .dreiwege-satz{ flex:0 0 auto; }
}

 
.wegbruecke{
  margin:2rem 0 1rem; padding-top:1rem;
  border-top:1px solid var(--line);
}
.wegbruecke-titel{
  margin:0 0 .6rem; color:var(--muted);
  font-size:.8rem; letter-spacing:.06em;
}
.wegbruecke-reihe{ display:flex; flex-wrap:wrap; gap:.6rem; }
.wegbruecke-reihe .btn{ flex:1 1 12rem; }

 
.brand .brandheute{
  font-family:var(--font-ui,inherit);
  font-size:.68rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
  padding:.15rem .45rem; border:1px solid var(--line); border-radius:999px;
  margin-left:.15rem;
}
.brand:hover .brandheute,
.brand:focus-visible .brandheute{ color:var(--ink); border-color:var(--ink); }
 
body.auf-heute .brand .brandheute{
  color:var(--accent); border-color:var(--accent);
}
 

 
.dreiwege-satz.tippbar{ cursor:pointer; }
.dreiwege-satz.tippbar:hover,
.dreiwege-satz.tippbar:focus-visible{ text-decoration:underline; }

 
@media (max-width:480px){
   
  .bibkachel{ padding:13px; }
  .bibkachel-satz{ margin-top:7px; line-height:1.42; }
  .bibkachel-kopf{ gap:9px; }

   
  .card{ padding:12px; }
  .card h3{ margin:.22em 0 .26em; }
  .card .meta{ margin-top:6px; gap:10px; }
  .card .bar,
  .bar{ margin-top:9px; }

   
  .dreiwege{ gap:.6rem; }
  .dreiwege-zeile{ padding:.6rem .75rem; }

   
  .bereiche{ gap:6px; margin:14px 0 20px; }
  .bibgitter{ gap:10px; }
}
 

 
 
:root{
   
  --bg:#faf6f0;           
  --bg-2:#f3ece1;         
  --panel:#fffdfa;        
  --ink:#241f1b;          
  --muted:#6e6257;        
  --line:#e6dccd;         
  --chip:#f2eae0;         

   
  --mk-dot:#0088b0;       

   
  --it:#1b6e45;           
  --it-bright:#1f8a55;    
  --de:#a8501f;           

   
  --flag-verde:#008c45;
  --flag-bianco:#f4f5f0;
  --flag-rosso:#cd212a;

   
  --nav-verwalten:var(--de);

   
  --accent:#5f6e31;       
  --accent2:#48551f;      
  --on-accent:#fffdfa;    
  --ring:#7c8f3f;         

   
  --good:#2c7a50;
  --warn:#9a6b12;
  --bad:#b3352c;

   
   
   
  --k-display:1; --k-hero:1; --k-h2:1; --k-read:1; --k-h3:1;
  --k-body:1; --k-ui:1; --k-meta:1; --k-micro:1; --k-num:1;

  --fs-display: calc(clamp(34px, 4.4vw + 15px, 60px) * var(--k-display));   
  --fs-hero: calc(clamp(31px, 2.6vw + 23px, 44px) * var(--k-hero));      
  --fs-h2:   calc(clamp(23px, 1.2vw + 19px, 28px) * var(--k-h2));
   
  --fs-read: calc(clamp(18px, .35vw + 16px, 20px) * var(--k-read));
  --fs-h3:   calc(19px * var(--k-h3));
  --fs-body: calc(18px * var(--k-body));     
  --fs-ui:   calc(15px * var(--k-ui));       
  --fs-meta: calc(13px * var(--k-meta));     
  --fs-micro:calc(11.5px * var(--k-micro));  
   
  --disp-adjust:.52;
   
  --fs-num:  calc(24px * var(--k-num));

   
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;

   
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:20px;
   
  --shadow:0 1px 2px rgba(74,52,30,.07),0 10px 28px rgba(74,52,30,.07);
  --shadow-lg:0 2px 6px rgba(74,52,30,.09),0 22px 50px rgba(74,52,30,.12);

   
  --t-fast:120ms;
  --t:160ms;
  --t-slow:200ms;
  --t-page:140ms;                           
  --ease:cubic-bezier(.22,.61,.36,1);       
  --ease-soft:cubic-bezier(.34,.9,.34,1);   

   
  --flagge-gruen:#008C45;
  --flagge-weiss:#f2f0e9;
  --flagge-rot:#CD212A;

   
   
  --font-display:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Palatino,
                 "Palatino LT STD","Hoefler Text","Baskerville","Book Antiqua",Georgia,
                 "Times New Roman",serif;
  --font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,
            "Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

   
  --topbar-h:59px;    
  --maxw:1060px;
   
  --satzspiegel:54rem;
   
  --ecke:44px;
}

 
@media (prefers-color-scheme: dark){
  :root{
    --bg:#16130f; --bg-2:#1c1813; --panel:#1e1a15; --ink:#efe7da; --muted:#a89a89;
    --line:#332c24; --chip:#282219;
    --it:#5fc98b; --it-bright:#79d9a0; --de:#e8a06a;
    --accent:#b7c77e; --accent2:#cddb99; --on-accent:#17140f; --ring:#cddb99;
    --good:#5fc98b; --warn:#d9ae57; --bad:#f0837a;
     
    --mk-dot:#2ba6cc;
     
    --nav-wiederholen:#d095c0;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.38);
    --shadow-lg:0 2px 8px rgba(0,0,0,.45),0 24px 56px rgba(0,0,0,.5);
  }
}

 
*{box-sizing:border-box}
 
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--topbar-h) + var(--s4));
  overflow-x:clip;overscroll-behavior-x:none}
html,body{margin:0;padding:0}
body{
  overflow-x:clip;overscroll-behavior-x:none;
  background:var(--bg);color:var(--ink);
  font:16px/1.55 var(--font-ui);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent);text-underline-offset:2px}
img,svg{max-width:100%}
::selection{background:color-mix(in srgb,var(--it) 26%,transparent)}

 
:focus{outline:none}
:focus-visible,
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--ring);outline-offset:2px;border-radius:8px;
}

 
 
h1,h2,h3{font-family:var(--font-display);font-weight:600;text-wrap:balance;letter-spacing:-.005em}
h1{font-size:var(--fs-hero);line-height:1.08;margin:.2em 0 .1em}
h2{font-size:var(--fs-h2);line-height:1.2;margin:1.5em 0 .5em}
h3{font-size:var(--fs-h3);line-height:1.3;margin:1.2em 0 .4em}
 
@supports (font-size-adjust: ex-height .5){
   
  .itlang,.item .it,.face .txt,.cloze,.gtable .itcell,.oggi-big,h1,h2,h3,
  .lt-it,.lt-abs{
    font-size-adjust:ex-height var(--disp-adjust);
  }
}
h1.itlang,h2.itlang,h3.itlang{color:var(--it)}    
p{margin:.7em 0}
b,strong{font-weight:650}
small,.hint{font-size:var(--fs-meta)}
.sub{color:var(--muted);font-size:var(--fs-ui);margin:.2em 0 1.5em;max-width:64ch;text-wrap:pretty}
.hint{color:var(--muted);line-height:1.5}

 
.itlang,.empty .it,.cloze,.sol.itlang,.q-prompt.itlang{
  font-family:var(--font-display);
}
 
.sol.de-line,.rp-de,.item .de,.prose .ex .r,.face .txt.de-txt{font-family:var(--font-ui)}
.sol.de-line{color:var(--de);font-size:var(--fs-h3)}
 
.stat-tile b,.counter,.oggi-big,.fc-label,.gtable td,.gtable th,
.rp-score,.meta,.pill{
  font-variant-numeric:tabular-nums;
}

 
.wrap{
  max-width:var(--maxw);margin:0 auto;
  padding:0 var(--s5) calc(80px + env(safe-area-inset-bottom,0px));
   
   
  padding-left:max(calc(var(--bindung-breite) + var(--s5)),
                   env(safe-area-inset-left,0px));
  padding-right:max(var(--s5),env(safe-area-inset-right,0px));
}
 
#app.page-in{animation:page-in var(--t-page) var(--ease) both}

 
header.top{
  position:sticky;top:0;z-index:20;
  padding-top:env(safe-area-inset-top,0px);
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
}
.top .row{
  max-width:var(--maxw);margin:0 auto;
  padding:10px max(var(--s5),env(safe-area-inset-left,0px));
  display:flex;align-items:center;gap:var(--s3);min-height:38px;
}
 
.brand{
  flex:0 0 auto;
  font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:.01em;
  display:flex;align-items:center;gap:9px;white-space:nowrap;
  border:none;background:none;color:var(--ink);padding:0;
}
.brand .mk{
   
   
  height:1.5em;width:auto;flex:0 0 auto;color:var(--ink);
}
.brand .mk-dot{fill:var(--mk-dot)}
 
.spacer{flex:1}

 
 
 
.search{flex:0 0 auto;min-width:0;max-width:420px;display:flex;align-items:center}
.searchfield{flex:1;min-width:0;position:relative;display:flex;align-items:center}
 
.searchfield input{
   
  --q-zeichen:12ch;    
  --q-lupe:34px;       
  --q-kreuz:34px;      
  width:calc(var(--q-zeichen) + var(--q-lupe) + var(--q-kreuz) + 2px);
  height:38px;padding:0 var(--q-kreuz) 0 var(--q-lupe);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--panel);color:var(--ink);font-size:var(--fs-ui);
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.searchfield input::placeholder{color:var(--muted);opacity:.85}
.searchfield input:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.searchfield input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
.searchfield > svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);opacity:.5;pointer-events:none}
 
.searchfield input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}

 
.pwfeld{position:relative;display:flex;align-items:center;min-width:0}
.pwfeld .answer-in{width:100%;padding-right:40px}
.pwzeigen{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;border:0;border-radius:999px;
  background:transparent;color:var(--muted);cursor:pointer;
  transition:color var(--t) var(--ease),background var(--t) var(--ease);
}
.pwzeigen:hover{color:var(--ink);background:var(--chip)}
.pwzeigen[aria-pressed="true"]{color:var(--accent)}
.pwzeigen:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
 
.qclear{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  display:none;align-items:center;justify-content:center;
  width:28px;height:28px;padding:0;border:0;border-radius:999px;
  background:transparent;color:var(--muted);cursor:pointer;
  transition:color var(--t) var(--ease),background var(--t) var(--ease);
}
.searchfield.has-text .qclear{display:flex}
.qclear:hover{color:var(--ink);background:var(--chip)}
.qclear:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
 
.iconbtn.searchopen,.iconbtn.searchclose,.searchhint{display:none}

 
 
.topnav{display:flex;align-items:center;gap:var(--s2);flex:0 0 auto}
.topnav .iconbtn{white-space:nowrap}

 
 
 
 
.kontopille{
  display:inline-flex;flex-direction:row;align-items:center;
  justify-content:center;gap:var(--s2);flex:0 1 auto;min-width:0;
  max-width:18rem;min-height:36px;line-height:1.15;
  padding:3px 12px;border-radius:99px;
  background:var(--chip);border:1px solid transparent;color:var(--muted);
  font:inherit;font-size:var(--fs-meta);cursor:pointer;
  transition:background var(--t-fast),border-color var(--t-fast);
}
.kontopille:hover{background:var(--panel);border-color:var(--line)}
.kontopille:focus-visible{outline:var(--ring);outline-offset:2px}
 
 
.kp-wer{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
        flex:0 1 auto;min-width:0;color:var(--ink)}
 
.kp-wer:not(:empty) + .kp-abo::before{content:'·';margin-right:var(--s2);
   color:var(--muted);font-weight:400}
.kp-abo{
   
  flex:0 0 auto;
  white-space:nowrap;font-weight:600;color:var(--it);
   
  font-size:var(--fs-meta);
   
  max-width:100%;
}
.kp-abo:empty{display:none}
 
.kontopille.offen{color:var(--de)}
 
@media (min-width:720px) and (max-width:1040px){
  .topnav .iconbtn .btn-text{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
}
 
@media (max-width:719px){
  .kontopille .kp-abo{display:none}
}

 
.satzpanel{
  position:fixed;left:0;right:0;top:var(--topbar-h,56px);bottom:0;
  z-index:60;pointer-events:none;
}
 
.satzpanel-innen{
  pointer-events:auto;
  margin:0 auto;max-width:44rem;width:calc(100% - 2 * var(--s4));
  max-height:calc(100vh - var(--topbar-h,56px) - var(--s5));
  max-height:calc(100dvh - var(--topbar-h,56px) - var(--s5));
  overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg,var(--shadow));
  padding:var(--s4) var(--s5) var(--s5);
}
.satzpanel-kopf{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);margin-bottom:var(--s3);
}
.satzpanel-marke{
  font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);
}
@media (max-width:719px){
   
  .satzpanel{top:0}
  .satzpanel-innen{
    width:100%;max-width:none;height:100%;max-height:none;
    border:0;border-radius:0;box-shadow:none;
    padding:var(--s4) var(--s4) var(--s6);
    background:var(--bg);
  }
}

.kontopille.offen .kp-abo{color:var(--de)}

 
 

.iconbtn{
  border:1px solid var(--line);background:var(--panel);color:var(--ink);
  border-radius:var(--radius-sm);padding:0 var(--s3);min-height:38px;font-size:var(--fs-meta);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);white-space:nowrap;
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease),
             transform var(--t-fast) var(--ease);
}
.iconbtn:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--panel))}
.iconbtn:active{transform:translateY(1px)}
.iconbtn.icon-only{padding:0;width:38px}
 
.iconbtn.active{
  color:var(--it);
  border-color:color-mix(in srgb,var(--it) 45%,var(--line));
  box-shadow:inset 0 -2px 0 0 var(--it);
}
.iconbtn.active:hover{border-color:var(--it);background:color-mix(in srgb,var(--it) 7%,var(--panel))}
 
 
.audiobtn.an{color:var(--good)}
.audiobtn.aus{color:var(--bad)}

 
.crumb{display:flex;align-items:center;gap:var(--s2);color:var(--muted);font-size:var(--fs-ui);margin:var(--s5) 0 var(--s2);flex-wrap:wrap}
.crumb button{
  background:none;border:none;color:var(--accent);padding:2px 0;font-size:var(--fs-ui);font-weight:600;
  display:inline-flex;align-items:center;gap:var(--s1);
}
.crumb button:hover{text-decoration:underline}
.crumb .crumb-sep{opacity:.55}
.crumb .crumb-now{color:var(--muted)}

 
.tabs{
  display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--line);
  margin:var(--s4) 0 var(--s5);position:sticky;
  top:calc(var(--topbar-h) + env(safe-area-inset-top,0px));z-index:10;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding-top:var(--s1);
}
.tab{
  border:none;background:none;color:var(--muted);padding:10px 14px;
  font-size:var(--fs-ui);font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px;
  border-radius:8px 8px 0 0;
  transition:color var(--t) var(--ease),border-color var(--t) var(--ease),
             background var(--t) var(--ease);
}
.tab:hover{color:var(--ink);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.tab.active{color:var(--ink);border-bottom-color:var(--it)}

 
.tab-mehr{display:none}

 
.tabs.tabs-gruppen{flex-direction:column;gap:var(--s2);align-items:stretch;
  padding-bottom:var(--s2)}
.tabgruppe{display:flex;flex-direction:column;gap:2px}
.tabgruppe-titel{font-size:var(--fs-micro);letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);font-weight:600;padding-left:14px}
.tabreihe{display:flex;gap:2px;flex-wrap:wrap}
 
.tabgruppe + .tabgruppe{border-top:1px solid var(--line);padding-top:var(--s2)}
 
@media (max-width:719px){
  .tabs.tabs-gruppen{
    flex-direction:row;align-items:center;gap:var(--s3);
    overflow-x:auto;flex-wrap:nowrap;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .tabs.tabs-gruppen::-webkit-scrollbar{display:none}
  .tabgruppe{flex-direction:row;align-items:center;gap:2px;flex:0 0 auto}
  .tabgruppe-titel{display:none}
  .tabreihe{flex-wrap:nowrap}
  .tabgruppe + .tabgruppe{
    border-top:0;padding-top:0;
    border-left:1px solid var(--line);padding-left:var(--s3);
  }

   
  .tabs.tabs-gruppen[data-mehr~="rechts"] .tab-mehr.rechts,
  .tabs.tabs-gruppen[data-mehr~="links"]  .tab-mehr.links{
    display:inline-flex;align-items:center;justify-content:center;
    position:sticky;flex:0 0 auto;width:40px;min-height:44px;padding:0;
    border:0;color:var(--accent);z-index:2;
  }
  .tabs.tabs-gruppen .tab-mehr.rechts{
    right:0;background:linear-gradient(to right,transparent,var(--bg) 42%);
  }
  .tabs.tabs-gruppen .tab-mehr.links{
    left:0;background:linear-gradient(to left,transparent,var(--bg) 42%);
  }
   
  .tabs.tabs-gruppen .tab-mehr.links svg{transform:scaleX(-1)}
}

 

 

 
.mt-0{margin-top:0}
.mt-1{margin-top:var(--s1)}
.mt-2{margin-top:var(--s2)}
.mt-3{margin-top:var(--s3)}
.mt-4{margin-top:var(--s4)}
.mt-5{margin-top:var(--s5)}
.mb-2{margin-bottom:var(--s2)}
.center{text-align:center}
.tight{margin-top:var(--s1);margin-bottom:var(--s1)}
.grow{flex:1}
.ico{flex:0 0 auto}
.tap{cursor:pointer}
.anchor{height:0;overflow:hidden}
.t-it{color:var(--it)}
.t-muted{color:var(--muted)}
 
.t-bad{color:var(--bad)}

 
.pill.funk{background:var(--chip);color:var(--muted)}
 
.pill.variante{background:color-mix(in srgb,var(--it) 10%,var(--panel));color:var(--it)}
.item.is-funk .it{color:var(--muted)}

 
.lt-titel{font-family:var(--font-display);font-size:var(--fs-h2);margin:0}
.lt-text{margin-top:var(--s4)}
 
.lt-teil{font-family:var(--font-display);font-size:var(--fs-h3);
  margin:var(--s5) 0 var(--s2);padding-top:var(--s3)}
.lt-teil:first-child{margin-top:0;padding-top:0}
.lt-zeile{padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.lt-zeile:last-child{border-bottom:0}
.lt-kopf{display:flex;align-items:baseline;gap:var(--s3)}
.lt-n{
  flex:0 0 auto;min-width:2.2ch;text-align:right;
  color:var(--muted);font-size:var(--fs-micro);letter-spacing:.06em;
}
 
.lt-it{
  flex:1 1 auto;margin:0;
  font-family:var(--font-display);font-size:var(--fs-read);line-height:1.25;
}
 
.lt-de{margin:0 0 0 calc(2.2ch + var(--s3));color:var(--muted);font-size:var(--fs-read);line-height:1.3}
.lt-kopf .iconbtn{flex:0 0 auto;align-self:center}

 
.lt-spalten{display:grid;gap:var(--s5)}
@media(min-width:720px){
  .lt-spalten{grid-template-columns:1fr 1fr;gap:var(--s6)}
}
 
.lt-spalte{min-width:0}
 
@media(min-width:720px){
  .lt-spalten{grid-auto-flow:row dense;row-gap:var(--s4);align-items:start}
  .lt-spalte{display:contents}
  .lt-spalte-it > *{grid-column:1}
  .lt-spalte-de > *{grid-column:2}
   
  .lt-spalten .lt-abs,.lt-spalten .lt-abs-de{margin-bottom:0}
}
 
.lt-marke{
  display:flex;align-items:center;gap:var(--s2);
   
  position:relative;min-height:var(--s7);
  margin-bottom:var(--s3);padding-bottom:var(--s2);
  border-bottom:1px solid var(--line);
}
.lt-marke-name{font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lt-marke .iconbtn{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
}
.lt-abs{
  margin:0 0 var(--s4);
  font-family:var(--font-display);font-size:var(--fs-read);line-height:1.5;
}
.lt-abs-de{margin:0 0 var(--s4);color:var(--muted);font-size:var(--fs-read);line-height:1.5}
.lt-abs:last-child,.lt-abs-de:last-child{margin-bottom:0}

 
.lt-text{position:relative}
.lt-w{cursor:pointer;border-radius:4px}
@media (hover:hover){
  .lt-w:hover{background:var(--chip)}
}
.lt-w.on{background:color-mix(in srgb,var(--it) 16%,transparent);color:var(--it)}
.wortfenster{
  position:absolute;z-index:8;width:min(24rem,100%);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:var(--s3) var(--s4);
  font-family:var(--font-ui);font-size:var(--fs-ui);line-height:1.5;color:var(--ink);
  display:flex;flex-direction:column;gap:var(--s3);
}
.wf-zeile{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.wf-kopf{display:flex;align-items:center;gap:var(--s2)}
.wf-wort{flex:1 1 auto;min-width:0;font-family:var(--font-display);font-size:var(--fs-h3);
  font-weight:600;color:var(--it);overflow-wrap:anywhere}
.wf-karte{border-top:1px solid var(--line);padding-top:var(--s3);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3)}
.wf-karte-text{margin:0;flex:1 1 12rem;min-width:0}
.wf-karte-text .t-it{font-family:var(--font-display);font-size:var(--fs-body);color:var(--it)}
.wf-karte-de{color:var(--muted)}
.wf-karte-de::before{content:" — "}
.wf-karte .hint{margin:0}
.wf-fuss{border-top:1px solid var(--line);padding-top:var(--s3)}
.wf-fuss .analyse{margin:0;max-height:50vh;overflow:auto}
 
 
.wegdreieck{position:relative;margin:var(--s5) 0;padding:var(--s3) 0}
.wegdreieck-linien{
  position:absolute;inset:0;width:100%;height:100%;
  color:var(--line);pointer-events:none;
}
.wegdreieck-punkte{
  position:relative;display:grid;gap:var(--s4);
  grid-template-columns:1fr 1fr;justify-items:center;
}
 
.wd-entdecken{grid-column:1 / -1}
.wegdreieck-punkt{
  display:flex;flex-direction:column;gap:var(--s1);align-items:center;
  max-width:15rem;text-align:center;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--s3) var(--s4);
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.wegdreieck-punkt:hover{border-color:var(--accent);box-shadow:var(--sh-1)}
.wegdreieck-punkt:focus-visible{outline:var(--ring);outline-offset:2px}
.wd-verb{font-family:var(--font-display);font-size:var(--fs-h3);color:var(--it)}
.wd-satz{font-size:var(--fs-meta);color:var(--muted)}
@media(max-width:520px){
   
  .wegdreieck-linien{display:none}
  .wegdreieck-punkte{grid-template-columns:1fr}
  .wd-entdecken{grid-column:auto}
  .wegdreieck-punkt{max-width:none;width:100%}
}

 
.klapp{border-bottom:1px solid var(--line)}
.klapp-kopf{
  display:flex;align-items:baseline;gap:var(--s3);cursor:pointer;
  padding:var(--s4) 0;list-style:none;
}
.klapp-kopf::-webkit-details-marker{display:none}
.klapp-kopf::before{
  content:'\203A';color:var(--muted);font-size:var(--fs-h3);line-height:1;
  transition:transform var(--t-fast) var(--ease);
}
.klapp[open] > .klapp-kopf::before{transform:rotate(90deg)}
.klapp-kopf:focus-visible{outline:var(--ring);outline-offset:2px}
.klapp-titel{font-family:var(--font-display);font-size:var(--fs-h2)}
.klapp-zusatz{color:var(--muted);font-size:var(--fs-meta);margin-left:auto}
@media(max-width:719px){
   
  .klapp > :not(summary) > h2:first-child,
  .klapp > :not(summary) > h3:first-child{display:none}
}
@media(min-width:720px){
  .klapp{border-bottom:0}
  .klapp > .klapp-kopf{display:none}
   
  .klapp.klapp-immer{border-bottom:1px solid var(--line)}
  .klapp.klapp-immer > .klapp-kopf{display:flex}
}
 
.klapp.klapp-immer > :not(summary) > h2:first-child,
.klapp.klapp-immer > :not(summary) > h3:first-child{display:none}

.switch.dreifach{flex-wrap:wrap}
@media(max-width:420px){
  .switch.dreifach button{padding:var(--s2)}
}
 
.setrow .answer-in{margin-top:0;flex:1 1 220px}
 
.tafel-it{margin:calc(-1 * var(--s2)) 0 var(--s4);font-style:italic;font-size:var(--fs-meta);color:var(--it)}
 
 
.gtable caption .gh-it,.gsvg-title .gh-it,
.prose .h .gh-it{display:block;margin:var(--s1) 0 0;font-style:italic;font-weight:400;
  font-size:var(--fs-meta);color:var(--it)}
 
.claim-de{margin:var(--s1) 0 0;font-size:var(--fs-meta);color:var(--muted)}
 
.tempo{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);
  padding:var(--s3) var(--s4);margin:var(--s3) 0;border-left:3px solid var(--line)}
.tempo.open{border-left-color:var(--it)}
.tempo-head{display:flex;align-items:baseline;gap:var(--s3);width:100%;
  border:none;background:none;padding:0;cursor:pointer;text-align:left;color:var(--ink)}
.tempo-namen{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;flex:1}
.tempo-it{font-family:var(--font-display);font-size:var(--fs-h3);color:var(--it)}
.tempo-de{color:var(--muted);font-size:var(--fs-meta)}
.tempo-wann{margin:var(--s2) 0 0;line-height:1.6}
.tempo-mehr{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
.tempo-bsp{margin:0 0 var(--s3);display:flex;flex-direction:column;gap:var(--s1)}
.tempo-bsp .itlang{font-family:var(--font-display);font-size:var(--fs-h3);color:var(--it)}
.tempo-bsp-de{color:var(--muted)}
.tempo-hinweis{margin:var(--s3) 0 0;padding-left:var(--s3);
  border-left:2px solid var(--it);color:var(--muted);font-size:var(--fs-meta);line-height:1.6}
 
.reqbox{margin:var(--s3) 0}
.reqbox summary{cursor:pointer}
.reqlist{margin:var(--s2) 0 0;padding-left:1.2em;font-size:var(--fs-meta);color:var(--muted)}
.reqlist li{margin:.35em 0}
.befund{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);max-height:52vh;overflow:auto}
 
.mddoc{max-width:74ch}
.mddoc .mdh{font-family:var(--font-display);margin:var(--s5) 0 var(--s2);line-height:1.2}
.mddoc h2.mdh{font-size:var(--fs-h2)}
.mddoc h3.mdh{font-size:var(--fs-h3)}
.mddoc h4.mdh{font-size:var(--fs-body);letter-spacing:.02em;text-transform:none}
.mddoc .mdp{margin:var(--s3) 0;line-height:1.65}
.mddoc .mdlist{margin:var(--s3) 0;padding-left:1.4em;line-height:1.6}
.mddoc .mdlist li{margin:.4em 0}
.mddoc .mdquote{margin:var(--s3) 0;padding-left:var(--s3);border-left:3px solid var(--line);color:var(--muted)}
.mddoc .mdcode{margin:var(--s3) 0;padding:var(--s3);background:var(--bg-2);border:1px solid var(--line);border-radius:8px;overflow:auto;font-family:var(--font-mono);font-size:var(--fs-meta);line-height:1.5;white-space:pre}
.mddoc code{font-family:var(--font-mono);font-size:.92em}
.mddoc table{margin:var(--s3) 0}
.mddoc hr{border:0;border-top:1px solid var(--line);margin:var(--s5) 0}
 
.w-miss{color:var(--it);font-weight:650}
.w-extra{color:var(--bad);font-weight:650;text-decoration:line-through}
 
.blurred{filter:blur(5px);cursor:pointer}

 
.pagehead{position:relative;display:flex;align-items:flex-start;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
.pagehead-txt{flex:1 1 300px;min-width:0}
.pagehead-txt h1{margin-top:0}
 
.pagehead-emblem{display:inline-block;vertical-align:-.06em;margin-right:var(--s2);color:var(--it);line-height:0}
.pagehead-emblem svg{width:.78em;height:.78em}
.pagehead-txt .sub{margin-bottom:0}
.pagehead-tools{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;padding-top:var(--s2)}
 
@media (min-width:900px){
  .pagehead-tools{
    position:absolute;right:0;top:-67px;
    padding-top:0;z-index:3;
    justify-content:flex-end;
    max-width:calc(100% - 18rem);
  }
}

 
.zier{
  position:absolute;top:0;right:0;z-index:-1;
  width:clamp(120px,28vw,268px);height:clamp(96px,19vw,172px);
  background-color:var(--ink);
  opacity:var(--zier-staerke);
  pointer-events:none;
  -webkit-mask:var(--zeichnung) top right/contain no-repeat;
  mask:var(--zeichnung) top right/contain no-repeat;
}
 
.pagehead>.zier{top:calc(var(--s5) * -1)}
 
/* __ZIER_MOTIVE__ */
.zier[data-zier="cafe-tisch-sonnenschirm"]{--zeichnung:url(/bilder/cafe-tisch-sonnenschirm-maske.webp)}
.zier[data-zier="espressotasse"]{--zeichnung:url(/bilder/espressotasse-maske.webp)}
.zier[data-zier="gasse-balkon-laterne"]{--zeichnung:url(/bilder/gasse-balkon-laterne-maske.webp)}
.zier[data-zier="gondel-campanile"]{--zeichnung:url(/bilder/gondel-campanile-maske.webp)}
.zier[data-zier="kolosseum"]{--zeichnung:url(/bilder/kolosseum-maske.webp)}
.zier[data-zier="kueste-segelboot"]{--zeichnung:url(/bilder/kueste-segelboot-maske.webp)}
.zier[data-zier="kuestenhuegel-voegel"]{--zeichnung:url(/bilder/kuestenhuegel-voegel-maske.webp)}
.zier[data-zier="kuppel-dom"]{--zeichnung:url(/bilder/kuppel-dom-maske.webp)}
.zier[data-zier="landschaft-5"]{--zeichnung:url(/bilder/landschaft-5-maske.webp)}
.zier[data-zier="olivenzweig"]{--zeichnung:url(/bilder/olivenzweig-maske.webp)}
.zier[data-zier="seeufer-dorf"]{--zeichnung:url(/bilder/seeufer-dorf-maske.webp)}
.zier[data-zier="strandschirm-liegestuehle"]{--zeichnung:url(/bilder/strandschirm-liegestuehle-maske.webp)}
.zier[data-zier="vespa-roller"]{--zeichnung:url(/bilder/vespa-roller-maske.webp)}
.zier[data-zier="weinglas-olivenzweig"]{--zeichnung:url(/bilder/weinglas-olivenzweig-maske.webp)}
.zier[data-zier="weingut-zypressen"]{--zeichnung:url(/bilder/weingut-zypressen-maske.webp)}
.zier[data-zier="zitronenzweig"]{--zeichnung:url(/bilder/zitronenzweig-maske.webp)}
/* __ZIER_MOTIVE_ENDE__ */

 
@media print{.zier{display:none}}

 
.btn{
  border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);
  border-radius:11px;padding:var(--s2) var(--s5);font-weight:600;font-size:var(--fs-ui);
  min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease),
             transform var(--t-fast) var(--ease),box-shadow var(--t) var(--ease),
             color var(--t) var(--ease);
}
.btn:hover{background:var(--accent2);border-color:var(--accent2);box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 30%,transparent)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:var(--panel);color:var(--accent);box-shadow:none}
.btn.ghost:hover{background:color-mix(in srgb,var(--accent) 10%,var(--panel));color:var(--accent);box-shadow:none}
.btn.danger{background:var(--panel);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 55%,var(--line))}
.btn.danger:hover{background:color-mix(in srgb,var(--bad) 10%,var(--panel));border-color:var(--bad);color:var(--bad);box-shadow:none}
.btn.sm{min-height:36px;padding:var(--s1) var(--s3);font-size:var(--fs-meta)}
.btn.lg{min-height:52px;padding:var(--s3) var(--s5);font-size:var(--fs-body)}
.btn[disabled],.iconbtn[disabled],.play[disabled]{opacity:.5;pointer-events:none}

 
.tilerow{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:var(--s3);margin:var(--s4) 0 var(--s1)}
 
.analyse-titel{font-size:var(--fs-micro);font-weight:700;color:var(--accent);
  letter-spacing:.12em;text-transform:uppercase;margin:0 0 var(--s3)}

 
.sol-de{margin-top:var(--s1);font-size:var(--fs-meta);color:var(--muted)}

.niveau-tafel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s3) var(--s4);margin-bottom:var(--s4);
}
.niveau-kopf{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.niveau-label{font-size:var(--fs-micro);font-weight:700;color:var(--accent);
  letter-spacing:.12em;text-transform:uppercase}
.niveau-wert{font-family:var(--font-display);font-size:var(--fs-num);
  line-height:1.1;color:var(--ink)}
.niveau-satz{margin:var(--s2) 0 0;font-size:var(--fs-meta);color:var(--muted)}
.niveau-satz.leise{font-size:var(--fs-micro)}

.stat-tile{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:var(--s3) var(--s4);text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s1);
  transition:border-color var(--t-fast) var(--ease),background var(--t) var(--ease),
             color var(--t) var(--ease);
}
.stat-tile b{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-family:var(--font-display);font-size:var(--fs-num);font-weight:600;
  line-height:1.1;color:var(--ink);
}
.stat-tile span{
  color:var(--muted);font-size:var(--fs-micro);letter-spacing:.06em;
  text-transform:uppercase;line-height:1.3;
}
.stat-tile .track{width:100%;height:6px;border-radius:99px;background:var(--chip);overflow:hidden}
.stat-tile .track > i{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--it),var(--it-bright));
  transition:width var(--t-slow) var(--ease-soft);
}
 
.stat-tile.is-streak .ico{width:20px;height:20px}
.stat-tile.is-streak.on{
  background:color-mix(in srgb,var(--warn) 12%,var(--panel));
  border-color:color-mix(in srgb,var(--warn) 34%,var(--line));
}
.stat-tile.is-streak.on b{color:var(--warn)}
 
.stat-tile.is-goal .ring{
  --p:0;position:relative;width:62px;height:62px;border-radius:50%;
  display:grid;place-items:center;
  background:conic-gradient(var(--it) calc(var(--p) * 1%),var(--chip) 0);
  transition:background var(--t-slow) var(--ease);
}
.stat-tile.is-goal .ring::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--panel)}
.stat-tile.is-goal .ring b{
  position:relative;z-index:1;font-family:var(--font-ui);
  font-size:var(--fs-meta);font-weight:700;
}
 
.stat-tile.is-cefr b{color:var(--it)}

 
.toasts{
  position:fixed;left:0;right:0;bottom:0;z-index:70;pointer-events:none;
  display:flex;justify-content:center;
  padding:0 var(--s4) calc(var(--s5) + env(safe-area-inset-bottom,0px));
}
.toast{
  background:var(--ink);color:var(--bg);border-radius:99px;
  padding:var(--s2) var(--s4);font-size:var(--fs-ui);font-weight:600;
  box-shadow:var(--shadow-lg);max-width:min(92vw,460px);
  display:inline-flex;align-items:center;gap:var(--s2);text-align:center;
  animation:toast-in var(--t) var(--ease) both;
}
.toast.out{animation:toast-out var(--t) var(--ease) both}

 
.list{
  display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
}
.item{
  display:flex;align-items:center;gap:var(--s3);background:var(--panel);
  padding:var(--s3) var(--s4);transition:background var(--t-fast) var(--ease);
}
.item:hover{background:color-mix(in srgb,var(--accent) 7%,var(--panel))}
.item .it{color:var(--it);font-weight:600;flex:1;min-width:0;font-family:var(--font-display);font-size:var(--fs-body)}
.item .de{color:var(--muted);flex:1;min-width:0}
.item.sent .it,.item.sent .de{flex:1}
 
.item.fp-zeile{
  display:grid;grid-template-columns:3ch minmax(0,1fr) auto;
  gap:var(--s3);align-items:center;
}
.fp-nr,.fp-lekt{color:var(--muted);font-size:var(--fs-meta)}
.fp-nr{font-variant-numeric:tabular-nums;text-align:right}
.fp-txt{min-width:0}
.fp-thema,.fp-lekt{display:block}
.fp-thema{font-weight:600;font-size:var(--fs-ui)}
.fp-pillen{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:flex-end}
 
@media (max-width:520px){
  .item.fp-zeile{grid-template-columns:3ch minmax(0,1fr)}
  .fp-pillen{grid-column:2/-1;justify-content:flex-start}
}

 
.item.vrow{display:grid;
  grid-template-columns:auto minmax(150px,230px) 1fr minmax(84px,auto) auto;
  gap:var(--s3);align-items:center}
.item.vrow .it,.item.vrow .de{flex:none;text-align:left}
.item.vrow .fverb{justify-content:flex-end}
 
.item .funk-erklaerung{grid-column:1/-1}

 
.item.vrow .vhaeuf{
  text-align:right;font-variant-numeric:tabular-nums;line-height:1.25;
}
.item.vrow .vhaeuf b{display:block;font-weight:600;font-size:var(--fs-ui)}
.item.vrow .vhaeuf span{display:block;color:var(--muted);font-size:var(--fs-meta)}
 
.item.vrow .vhaeuf b.ausserhalb{
  font-weight:400;font-size:var(--fs-meta);color:var(--muted);
}

 
@supports (grid-template-columns:subgrid){
   
  .list.vlist{
    display:grid;
    grid-template-columns:
      auto minmax(150px,230px) minmax(0,1fr) max-content minmax(0,max-content);
    column-gap:var(--s3);row-gap:1px;
  }
   
  .list.wlist{
    display:grid;
    grid-template-columns:auto minmax(150px,230px) minmax(0,1fr) max-content;
    column-gap:var(--s3);row-gap:1px;
  }
  .list.vlist>*,.list.wlist>*{grid-column:1/-1}
  .list.vlist>.item.vrow,.list.wlist>.item.vrow{
    display:grid;grid-template-columns:subgrid;align-items:center;
  }
}
 
.item.vrow .wextra{
  display:flex;gap:var(--s2);align-items:center;justify-content:flex-end;
  flex-wrap:wrap;
}
.item.sent .it{line-height:1.45}

 
.stattable{width:100%;border-collapse:collapse;font-size:var(--fs-ui)}
.stattable td{padding:var(--s1) 0}
.stattable td + td{text-align:right}
.stattable thead td{color:var(--muted);font-size:var(--fs-meta)}
.stattable .v-bad{color:var(--bad)}
.stattable .v-good{color:var(--good)}
 
 
.lekt-stand{display:flex;flex-direction:column;gap:var(--s2);margin:var(--s3) 0 var(--s4)}
.lekt-stand-txt{font-size:var(--fs-meta);color:var(--muted);
  font-variant-numeric:tabular-nums}
.lekt-weiter{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);
  margin:0 0 var(--s5)}

.stattable tbody td{font-variant-numeric:tabular-nums}
.stattable tbody tr.st-summe td{
  border-top:1px solid var(--ink);padding-top:var(--s2);font-weight:600;
}
 
.stattable .st-noch{color:var(--muted)}
.lvlbar{display:flex;align-items:center;gap:var(--s3);margin:var(--s1) 0}
.lvlbar .lab{width:118px;font-size:var(--fs-meta);color:var(--muted)}
.lvlbar .track{flex:1;background:var(--chip);border-radius:6px;overflow:hidden;height:14px}
.lvlbar .track > i{display:block;height:100%;width:0;background:var(--accent);border-radius:6px}
.lvlbar.top .track > i{background:var(--good)}
.lvlbar .num{width:44px;text-align:right;font-size:var(--fs-meta)}
 
.topfzeile{display:flex;align-items:baseline;gap:var(--s3);
  padding:var(--s2) 0 var(--s3);margin-bottom:var(--s2);
  border-bottom:1px solid var(--line)}
.topfzeile .lab{flex:1;font-size:var(--fs-meta);color:var(--muted)}
.topfzeile .num{font-size:var(--fs-num);font-weight:600;
  font-variant-numeric:tabular-nums}

 

 
 
.tempo-zeile{display:flex;align-items:center;gap:var(--s2);flex-wrap:nowrap}
.tempo-zeile .tempo-zahl{
   
  width:4.5rem;flex:0 0 auto;text-align:center;margin-top:0;
  font-size:var(--fs-num);font-variant-numeric:tabular-nums;
}
.tempo-zeile .iconbtn{flex:0 0 auto}
.tempo-einheit{white-space:nowrap}
 
.tempo-zahl::-webkit-outer-spin-button,
.tempo-zahl::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}
.tempo-zahl{-moz-appearance:textfield;appearance:textfield}
.tempo-einheit{font-size:var(--fs-ui);color:var(--muted)}
.tempo-folge{margin-top:var(--s2)}

 
.oggi-warum{margin-top:var(--s2);font-size:var(--fs-meta);color:var(--muted)}

 
.tilerow.weg{align-items:center}
.weg-pfeil{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  color:var(--muted);opacity:.6;
}
.weg-pfeil svg{width:20px;height:20px}
@media (max-width:719px){
   
  .weg-pfeil{transform:rotate(90deg)}
}

 
.prognose{display:flex;align-items:flex-end;gap:var(--s1);margin-top:var(--s3)}
 
.pg-tag{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
        align-items:center;gap:var(--s1)}
.pg-zahl{font-size:var(--fs-micro);color:var(--muted);font-variant-numeric:tabular-nums}
.pg-saeule{width:100%;height:64px;display:flex;align-items:flex-end;
           background:var(--chip);border-radius:var(--radius-sm);overflow:hidden}
 
.pg-saeule .pg-fuellung{width:100%;display:flex;align-items:flex-end;height:100%}
.pg-saeule .pg-fuellung > i{width:100%;align-self:flex-end;background:var(--accent);
                            border-radius:var(--radius-sm)}
.pg-tag.leer .pg-saeule{opacity:.45}
.pg-wt{font-size:var(--fs-micro);color:var(--muted);letter-spacing:.04em}

 
.engine{margin-top:var(--s3);border-top:1px solid var(--line);padding-top:var(--s3)}
.engine > summary{
  cursor:pointer;font-size:var(--fs-ui);color:var(--accent);
  list-style:none;display:inline-flex;align-items:center;gap:var(--s2);
}
.engine > summary::-webkit-details-marker{display:none}
.engine > summary::before{content:'›';transition:transform var(--t-fast) var(--ease)}
.engine[open] > summary::before{transform:rotate(90deg)}
.engine > summary:focus-visible{outline:var(--ring);outline-offset:2px}
.engine .prose{margin-top:var(--s3)}

 
.legende{display:grid;grid-template-columns:auto 1fr;gap:var(--s3) var(--s4);
         margin:var(--s4) 0 0;align-items:baseline}
.legende dt{margin:0}
.legende dd{margin:0;color:var(--muted);font-size:var(--fs-ui);line-height:1.5}
@media (max-width:560px){
  .legende{grid-template-columns:1fr;gap:var(--s1) 0}
  .legende dd{margin:0 0 var(--s3)}
}

@media (max-width:719px){
   
  .prognose .pg-tag:nth-child(n+8){display:none}
}

 
.optlist{display:grid;gap:var(--s3);margin-top:var(--s4)}
.optlist .grade{text-align:left;justify-content:flex-start}
.revlabel{font-size:var(--fs-meta);color:var(--muted);margin-bottom:var(--s1)}

 

 
 
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:var(--s4);margin-top:10px}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s4);cursor:pointer;position:relative;overflow:hidden;
  transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),
             box-shadow var(--t) var(--ease);
}
.card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:var(--shadow-lg)}
.card:active{transform:translateY(0)}
.card.book{border-left:4px solid var(--it)}
.card.book .n{color:var(--it)}
.card.book.kk{border-left-color:var(--accent)}
.card.book.kk .n{color:var(--accent)}
.card .n{font-size:var(--fs-micro);font-weight:700;color:var(--accent);letter-spacing:.12em;text-transform:uppercase}
.card h3{font-family:var(--font-display);margin:.4em 0 .45em;font-size:var(--fs-h3);line-height:1.3}
.card .meta{display:flex;gap:14px;color:var(--muted);font-size:var(--fs-meta);margin-top:10px;flex-wrap:wrap}
.bar{height:6px;border-radius:99px;background:var(--chip);margin-top:14px;overflow:hidden}
.bar > i{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--it),var(--it-bright));
  transition:width var(--t-slow) var(--ease);
}
.pill{
  display:inline-flex;align-items:center;gap:var(--s1);
  font-size:11px;font-weight:600;letter-spacing:.02em;
  padding:2px 9px;border-radius:99px;background:var(--chip);color:var(--muted);
}
.pill .ico{width:13px;height:13px}
 
.pill.rang{background:none;padding-left:0;padding-right:var(--s1);
  font-variant-numeric:tabular-nums;opacity:.75}
 
.pill-warte{background:none;border:1px dashed var(--line);color:var(--muted)}

 
.card.ist-gesperrt,.item.ist-gesperrt,.gsection.ist-gesperrt,
.gnav a.ist-gesperrt{
  background:var(--bg-2);cursor:default;box-shadow:none;
}
.card.ist-gesperrt:hover,.item.ist-gesperrt:hover,.gnav a.ist-gesperrt:hover{
  transform:none;border-color:var(--line);box-shadow:none;
}
.card.ist-gesperrt:active{transform:none}
.card.ist-gesperrt h3,.card.ist-gesperrt .n,.card.ist-gesperrt .meta,
.item.ist-gesperrt .it,.item.ist-gesperrt .de,
.gsection.ist-gesperrt h2,.gsection.ist-gesperrt .pill,
.gnav a.ist-gesperrt{color:var(--muted)}
 
.card.ist-gesperrt.book{border-left-color:var(--line)}
.card.ist-gesperrt.book .n{color:var(--muted)}

 
.funk-erklaerung{
  flex-basis:100%;border-top:1px solid var(--line);
  margin-top:var(--s2);padding-top:var(--s2);
}
.pill.funk.is-open{border-color:var(--accent);color:var(--accent)}

 

 
body.ohne-menue #topnav,
body.ohne-menue #tabbar,
body.ohne-menue .search,
body.ohne-menue .searchopen{display:none}
 
body.ohne-menue .wrap{padding-bottom:var(--s5)}

 
.fachleiste{display:flex;gap:2px;height:10px;border-radius:99px;overflow:hidden}
.fachleiste i{display:block;min-width:3px;background:var(--chip)}
.fachleiste .fl-0{background:color-mix(in srgb,var(--muted) 45%,var(--chip))}
.fachleiste .fl-1{background:color-mix(in srgb,var(--accent) 30%,var(--chip))}
.fachleiste .fl-2{background:color-mix(in srgb,var(--accent) 45%,var(--chip))}
.fachleiste .fl-3{background:color-mix(in srgb,var(--accent) 60%,var(--chip))}
.fachleiste .fl-4{background:color-mix(in srgb,var(--accent) 75%,var(--chip))}
.fachleiste .fl-5{background:color-mix(in srgb,var(--it) 55%,var(--accent))}
.fachleiste .fl-6{background:color-mix(in srgb,var(--it) 70%,var(--accent))}
.fachleiste .fl-7{background:color-mix(in srgb,var(--it) 85%,var(--accent))}
.fachleiste .fl-8{background:var(--it)}

 
.stufenwahl{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s2)}
@media (max-width:719px){.stufenwahl{grid-template-columns:repeat(3,1fr)}}
.sw{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:var(--s3) var(--s2);border-radius:var(--radius-sm);
  border:1px solid transparent;cursor:pointer;
  font-family:var(--font-display);font-size:var(--fs-h3);line-height:1.1;
  transition:transform var(--t-fast),box-shadow var(--t-fast);
}
.sw:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.sw:focus-visible{outline:var(--ring) solid 2px;outline-offset:2px}
.sw .sw-note{
  font-family:var(--font-ui);font-size:var(--fs-micro);letter-spacing:.06em;
  text-transform:uppercase;opacity:.85;
}
.sw-1{background:color-mix(in srgb,var(--it) 12%,var(--chip));color:var(--ink)}
.sw-2{background:color-mix(in srgb,var(--it) 28%,var(--chip));color:var(--ink)}
.sw-3{background:color-mix(in srgb,var(--it) 45%,var(--chip));color:var(--ink)}
.sw-4{background:color-mix(in srgb,var(--it) 65%,var(--chip));color:var(--on-accent)}
.sw-5{background:color-mix(in srgb,var(--it) 82%,var(--chip));color:var(--on-accent)}
.sw-6{background:var(--it);color:var(--on-accent)}
 
.sw.ist-vorschlag{border-color:var(--ink);box-shadow:var(--shadow);font-weight:600}
 
.sw.ist-jetzt{border-color:var(--ink);border-style:dashed}

 
 
 
.laufband{
  position:fixed;left:50%;top:calc(var(--s3) + 56px);transform:translateX(-50%) translateY(-8px);
  z-index:60;display:flex;align-items:center;gap:var(--s2);
  padding:var(--s2) var(--s4);border-radius:999px;
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-lg);
  font-size:var(--fs-meta);color:var(--ink);
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity var(--t-page),transform var(--t-page);
}
.laufband.an{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.laufband.fertig{border-color:var(--it)}
.laufband-haken{display:inline-flex;color:var(--it)}
.laufband-haken svg{width:16px;height:16px}
 
.laufband-kreisel{
  width:14px;height:14px;flex:none;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--accent);
  animation:laufband-dreh .8s linear infinite;
}
@keyframes laufband-dreh{to{transform:rotate(360deg)}}
 
@media (prefers-reduced-motion: reduce){
  .laufband-kreisel{animation:none}
  .laufband{transition:none}
}
@media (max-width:719px){
  .laufband{top:calc(var(--s2) + 52px);max-width:calc(100vw - var(--s5))}
}

.testband{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2);
  border:1px solid var(--warn);border-radius:var(--radius-sm);
  padding:var(--s2) var(--s3);margin-bottom:var(--s4);
  background:var(--bg-2);
}
.testband-marke{
  font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;
  font-weight:600;color:var(--warn);
}
.testband-text{font-size:var(--fs-meta);color:var(--muted)}

.abogitter{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s3);align-items:stretch;
}
.abokachel{display:flex;flex-direction:column}
.ak-name{
  font-family:var(--font-display);font-size:var(--fs-h2);color:var(--it);
  margin:0;line-height:1.2;
}
.ak-umfang{font-size:var(--fs-meta);color:var(--muted);margin:var(--s2) 0 0}
.ak-merk{margin-top:var(--s3)}
 
.ak-zwbox{
  margin-top:var(--s4);display:flex;flex-direction:column;
  gap:var(--s3);flex:1;
}
.ak-zw{border-top:1px solid var(--line);padding-top:var(--s3)}
.ak-zw-name{
  font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);
}
.ak-zw.ist-jetzige .n{color:var(--it)}
 
.ak-preis-alt{
  font-size:var(--fs-meta);color:var(--muted);text-decoration:line-through;
  margin-top:var(--s1);
}
.pill.pill-geschenk,
.pill.pill-gutschein,
.pill.pill-frei{border-color:var(--accent);color:var(--accent)}
@media (max-width:1023px){
  .abogitter{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:719px){
  .abogitter{grid-template-columns:1fr}
}

 
.card.ist-jetzige{border-color:var(--it)}
.pill.pill-jetzige{border-color:var(--it);color:var(--it)}

 
.gsection-titel{
  font-size:var(--fs-h3);font-weight:600;color:var(--muted);
  padding:var(--s2) 0;
}
 
.pill-gesperrt{background:var(--chip);color:var(--ink);border:1px solid var(--line)}
.pill-tuer{color:var(--accent)}
.gesperrt{align-items:center}
 
 
.cell.zelle-teil{opacity:.55}
.pill.rang::before{content:'#';opacity:.6}

 
 
.pill.wk-jetzt{background:color-mix(in srgb,var(--mk-dot) 14%,var(--panel));
  border:2px solid var(--mk-dot);color:var(--mk-dot);font-weight:600}
.pill.wk-offen{background:none;border:1px solid var(--accent);color:var(--accent)}
.pill.wk-durch{background:color-mix(in srgb,var(--it) 12%,var(--panel));color:var(--it)}
.pill.wk-ueber{background:none;border:1px dashed var(--line);color:var(--muted)}
.pill.wk-umfang{background:var(--chip);color:var(--ink);border:1px solid var(--line)}
.pill.wk-abo{background:var(--chip);color:var(--muted);border:1px solid var(--line);opacity:.7}

 
.wk-riegel{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:var(--s4);margin-top:var(--s4)}
.wk-card{cursor:default}
.wk-card:hover{transform:none;box-shadow:none;border-color:var(--line);background:var(--panel)}
.wk-stand{margin-top:var(--s2);font-size:var(--fs-ui);line-height:1.5}
 
.wk-tafel td .pill{font-variant-numeric:tabular-nums;white-space:nowrap}
.wk-legende{margin-top:var(--s3);display:grid;gap:var(--s2)}
.wk-leg{display:flex;gap:var(--s3);align-items:baseline;flex-wrap:wrap}
.wk-schluss{margin-top:var(--s6);cursor:default}
.wk-schluss:hover{transform:none;box-shadow:none;border-color:var(--line);background:var(--panel)}

 
.tfocus{margin-top:var(--s5)}
.tfocus-head{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.tfocus-head h2{margin:0}
.tf-n{font-variant-numeric:tabular-nums;opacity:.6;margin-left:.35em;font-size:.9em}
 
.gnav a.tf-fern{opacity:.45}
.gnav a.active .tf-n{opacity:.85}

 
.tfocus-zeile{margin-top:var(--s5)}
.tfocus-zeile-innen{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.tfocus-label{font-size:var(--fs-ui);color:var(--muted)}
.tfocus-zeile .hint{display:block;margin-top:var(--s2)}

 
.themenreg{padding:var(--s3) 0}
.themenreg-liste{display:flex;flex-direction:column;gap:0;margin-top:var(--s3)}
.themenreg-zeile{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.themenreg-zeile:last-child{border-bottom:0}
 
.themenreg-zeile:has(+ .themenreg-kapitel){border-bottom:0}
.themenreg-kapitel{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.3rem;padding:0 0 .5rem;border-bottom:1px solid var(--line)}
.themenreg-kapitel:last-child{border-bottom:0}
.themenreg-kaplabel{font-size:var(--fs-meta);color:var(--muted);
  margin-right:.15rem}
.themenreg-kap{background:transparent;border:0;padding:.1rem .25rem;font:inherit;
  font-size:var(--fs-meta);color:var(--it);cursor:pointer;
  text-decoration:underline;text-underline-offset:.15em;border-radius:.2rem}
.themenreg-kap:hover{background:var(--sink)}
.themenreg-name{font-size:var(--fs-ui)}
.themenreg-zahl{font-size:var(--fs-meta);color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
 
.themenreg-zeile.tf-fern{opacity:.72}
.themenreg-zeile.tf-fern .themenreg-zahl{opacity:1}

 
.card.vdg{cursor:default}
.card.vdg:hover{transform:none;border-color:var(--line);box-shadow:none}
.vdg-kopf{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  margin-bottom:var(--s3)}
.vdg-kopf .fverb{margin-left:auto}
.vdg-inf{font-family:var(--font-display);font-size:var(--fs-h3);color:var(--it);
  font-weight:600;line-height:1.15}
.vdg-de{color:var(--muted);font-size:var(--fs-meta)}
.vdg-satz{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
.vdg-satz .it{font-family:var(--font-display);color:var(--it)}
.vdg-satz .de{color:var(--muted);font-size:var(--fs-meta)}
@media (max-width:560px){
  .vdg-kopf .fverb{margin-left:0;width:100%}
}
.pill.herkunft{background:color-mix(in srgb,var(--de) 14%,var(--panel));color:var(--de)}
 
.pill.tap{
  background:transparent;border:1px solid currentColor;cursor:pointer;
  transition:background var(--t-fast) var(--ease);
}
.pill.tap:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
 
.pill.cell{color:var(--it);display:flex;width:100%;justify-content:center}

 
 
.pill.cell.z-durch{color:var(--it);border-color:color-mix(in srgb,var(--it) 55%,transparent);
  background:color-mix(in srgb,var(--it) 24%,transparent);font-weight:600}
.pill.cell.z-offen{color:var(--muted);border-color:var(--line);background:transparent}
 
.pill.cell.z-ueber{color:var(--muted);
  border-color:color-mix(in srgb,var(--muted) 45%,transparent);
  background:color-mix(in srgb,var(--muted) 14%,transparent)}
 
 
.pill.cell.z-gesperrt{color:var(--ink);
  border-color:transparent;background:var(--chip)}
 
.pill.cell.z-gesperrt svg{width:.9em;height:.9em;flex:none}
 
.wegleg-schloss{display:inline-flex;align-items:center;color:var(--muted)}
.wegleg-schloss svg{width:13px;height:13px}
 
.pill.cell.z-jetzt{color:var(--mk-dot);border-color:var(--mk-dot);
  border-width:2px;font-weight:600;
  outline:2px solid var(--accent);outline-offset:2px}

 
.pillenreihe{display:flex;gap:var(--s1);flex-wrap:wrap;
  align-items:center;justify-content:center}
.pillenreihe > button.pill{width:auto;min-width:5ch}

 
.pillenreihe > button.pill{padding:2px 6px;gap:3px}
.pillenreihe > button.pill svg{width:11px;height:11px}
.pillenreihe .spanne{font-size:.9em}

 
.gtable-wrap thead th{position:sticky;top:0;z-index:2;background:var(--bg-2)}

 
tr.wk-zeile{cursor:pointer}
tr.wk-zeile:hover .rowhead{color:var(--accent)}
tr.wk-zeile:focus-visible{outline:var(--ring);outline-offset:-2px}

 
.wk-tafel{
  position:fixed;right:var(--s5);transform:translateY(-50%);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:var(--s3) var(--s4);
  opacity:0;visibility:hidden;transition:opacity var(--t-fast) var(--ease);
  pointer-events:none;z-index:5;max-width:min(420px,80vw);
}
.wk-tafel.an{opacity:1;visibility:visible}
.wk-tafel-titel{font-family:var(--font-display);font-size:var(--fs-h3);
  color:var(--ink);margin-bottom:var(--s2)}
.wk-tafel-zahlen{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  font-size:var(--fs-meta);color:var(--muted)}
.wk-tafel-zahlen b{color:var(--ink);font-size:var(--fs-ui);margin-right:.25em}
@media (max-width:760px){ .wk-tafel{display:none} }
@media (prefers-reduced-motion:reduce){ .wk-tafel{transition:none} }

 

 
 
.wegleg{display:flex;flex-wrap:wrap;gap:var(--s4);margin:var(--s5) 0 var(--s4)}
.wegleg-x{display:inline-flex;align-items:center;gap:var(--s2);
  font-size:var(--fs-meta);color:var(--muted)}
 
.wegleg-p{width:44px;height:20px;border-radius:99px;border:1px solid currentColor;
  display:inline-block;flex:none}
 
.wegleg-x.z-jetzt .wegleg-p{color:var(--mk-dot);border-width:2px;background:transparent;
  outline:2px solid var(--accent);outline-offset:2px}
.wegleg-x.z-durch .wegleg-p{color:color-mix(in srgb,var(--it) 55%,transparent);
  background:color-mix(in srgb,var(--it) 24%,transparent)}
.wegleg-x.z-offen .wegleg-p{color:var(--line);background:transparent}
.wegleg-x.z-ueber .wegleg-p{color:color-mix(in srgb,var(--muted) 45%,transparent);
  background:color-mix(in srgb,var(--muted) 14%,transparent)}
.wegleg-x.z-gesperrt .wegleg-p{color:transparent;background:var(--chip)}
 
.pill.cell .spanne{opacity:.7;font-weight:500}
.pill.cell .lekt{opacity:.7;font-weight:500}
.pill.act{color:var(--accent)}

 
.play{
  border:1px solid var(--line);background:var(--panel);color:var(--accent);
  border-radius:9px;width:34px;height:34px;display:inline-flex;align-items:center;
  justify-content:center;flex:0 0 auto;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.play:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.play:active{transform:scale(.94)}
.play.inline{vertical-align:middle}

.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.toolbar.center{justify-content:center;text-align:left}
.toolbar.top{align-items:flex-start}
.toolbar.flat{margin-bottom:0}
 
.reset-weg{display:flex;flex-direction:column;gap:var(--s2);max-width:22rem}
.reset-weg .hint{margin:0}
.toolbar .grow{flex:1}
 
.toolbar .uebung-aus{flex:0 0 auto;margin-left:auto}
.switch{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:var(--panel)}
.switch button{
  border:none;background:transparent;color:var(--muted);padding:var(--s2) 13px;
  font-size:var(--fs-meta);font-weight:600;transition:background var(--t) var(--ease),color var(--t) var(--ease);
}
.switch button:hover{color:var(--ink)}
.switch button.on{background:var(--accent);color:var(--on-accent)}
.selin{padding:6px var(--s2)}

 
.prose{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:var(--s5);
}
.prose p{margin:.65em 0;max-width:70ch;text-wrap:pretty}
.prose .h{font-family:var(--font-display);font-weight:600;margin:1.2em 0 .35em;font-size:var(--fs-body)}
.prose .exline{padding:2px 0}
.prose .ex{display:flex;gap:14px;padding:7px 10px;border-radius:8px;align-items:flex-start}
.prose .ex:nth-child(odd){background:var(--bg-2)}
.prose .ex.playing{background:color-mix(in srgb,var(--accent) 14%,var(--panel))}
 
.prose .ex .l{color:var(--it);font-weight:600;flex:0 0 45%;display:flex;align-items:baseline;gap:var(--s2);font-family:var(--font-display);font-size:var(--fs-h3)}
.prose .ex .r{color:var(--muted);flex:1}
.prose .ex .exsay{
  border:none;background:none;color:var(--accent);width:22px;height:22px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;opacity:.5;flex:0 0 auto;
  transition:opacity var(--t-fast) var(--ease);
}
.prose .ex:hover .exsay,.exsay:focus-visible{opacity:1}
.prose .ex .exsay svg{width:14px;height:14px}
 
 
.sp{
  color:var(--muted);font-weight:700;
  display:inline-block;box-sizing:content-box;
  width:7ch;text-align:right;flex:0 0 auto;
  padding-right:var(--s3);margin-right:var(--s3);
  border-right:2px solid color-mix(in srgb,var(--it) 35%,transparent);
  vertical-align:top;
}
 
.sp:empty{display:none}

 
.stage{display:flex;flex-direction:column;align-items:center;gap:var(--s5);padding:10px 0 var(--s6)}
.flip{width:100%;max-width:560px;height:280px;perspective:1400px}
.flip .inner{
  position:relative;width:100%;height:100%;transform-style:preserve-3d;cursor:pointer;
  transition:transform .5s var(--ease-soft);
}
.flip.flipped .inner{transform:rotateY(180deg)}
.face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--s4);padding:var(--s5);text-align:center;
  transition:box-shadow var(--t) var(--ease);
}
.face .txt{font-size:clamp(23px,3.4vw + 12px,30px);font-weight:600;line-height:1.25;text-wrap:balance}
 
.face .txt.itlang{color:var(--it)}
.face .txt.de-txt{color:var(--ink)}
.face.back{transform:rotateY(180deg);background:linear-gradient(160deg,var(--panel),color-mix(in srgb,var(--it) 6%,var(--panel)))}
.flip.flash-ok .face.back{box-shadow:0 0 0 3px var(--good) inset,var(--shadow)}
.flip.flash-no .face.back{box-shadow:0 0 0 3px var(--bad) inset,var(--shadow)}
.face .tag{
  position:absolute;top:14px;left:var(--s4);font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-family:var(--font-ui);
}
.face .say{position:absolute;top:var(--s3);right:14px}

 
.grades{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:center}
.grade{
  border:1px solid var(--line);background:var(--panel);color:var(--ink);
  border-radius:11px;padding:10px var(--s3);font-weight:600;font-size:14px;min-height:44px;
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transition:transform var(--t-fast) var(--ease),background var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
 
.grade .ivl{font-size:var(--fs-micro);font-weight:500;opacity:.75;letter-spacing:0}
 
.grade .ivl.st-noch{opacity:.45}
.grade.again{border-color:var(--bad);color:var(--bad)}
.grade.hard{border-color:var(--warn);color:var(--warn)}
.grade.good{border-color:var(--good);color:var(--good)}
.grade.easy{border-color:var(--it);color:var(--it)}
.grade:hover{transform:translateY(-1px);background:color-mix(in srgb,currentColor 8%,var(--panel))}
.grade:active{transform:translateY(0)}
.counter{color:var(--muted);font-size:14px}
.big-say{
  border:1px solid var(--line);background:var(--panel);color:var(--accent);
  border-radius:12px;padding:10px var(--s4);font-weight:600;min-height:44px;
  display:inline-flex;gap:var(--s2);align-items:center;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease);
}
.big-say:hover{background:color-mix(in srgb,var(--accent) 10%,var(--panel));border-color:var(--accent)}

 
.card-q{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:var(--s5);max-width:640px;margin:0 auto;
}
.q-prompt{font-size:clamp(19px,1.6vw + 14px,23px);font-weight:600;margin-bottom:var(--s2);line-height:1.3;text-wrap:balance}
.q-prompt.itlang{color:var(--it);font-weight:600}
.answer-in,.cloze-in{
  width:100%;padding:var(--s3) 14px;border:1px solid var(--line);border-radius:11px;
  background:var(--bg);color:var(--ink);font-size:var(--fs-body);margin-top:14px;min-height:46px;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.answer-in:focus,.cloze-in:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
.reveal{margin-top:var(--s4);padding:14px var(--s4);border-radius:11px;background:var(--chip);animation:slide-up var(--t-slow) var(--ease) both}
 
.reveal .sol{font-size:20px;color:var(--it);font-weight:600;line-height:1.35}
.reveal .sol.de-line{color:var(--de);font-family:var(--font-ui)}
.reveal.ok{background:color-mix(in srgb,var(--good) 15%,var(--panel))}
.reveal.no{background:color-mix(in srgb,var(--bad) 12%,var(--panel))}

 
.oggi{
  position:relative;overflow:hidden;
   
  isolation:isolate;
  background:linear-gradient(150deg,
      color-mix(in srgb,var(--it) 9%,var(--panel)) 0%,
      var(--panel) 46%,
      color-mix(in srgb,var(--de) 8%,var(--panel)) 100%);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--s5);box-shadow:var(--shadow);margin-top:14px;
}
.oggi::before{  
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--flag-verde) 0 33.3%,var(--flag-bianco) 33.3% 66.6%,var(--flag-rosso) 66.6% 100%);
}
.oggi-head{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
 
 
.oggi-stage{
  font-family:var(--font-display);font-size:var(--fs-display);
  font-weight:600;line-height:1.02;letter-spacing:-.015em;
  margin:.06em 0 .12em;color:var(--it);text-wrap:balance;
}
 
.oggi-plan{
  font-size:var(--fs-h2);line-height:1.2;color:var(--ink);
  margin:0 0 var(--s2);font-variant-numeric:tabular-nums;
}
.oggi-plan b{font-weight:650}
.oggi-big{
  font-family:var(--font-display);font-size:var(--fs-hero);
  font-weight:600;line-height:1.12;margin:.18em 0 .1em;text-wrap:balance;color:var(--ink);
}
.oggi-sub{color:var(--muted);font-size:var(--fs-ui);margin:0 0 var(--s5);text-wrap:pretty}
.oggi-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

 

 
.forecast{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--s2);align-items:end;margin:var(--s2) 0 var(--s1)}
.forecast .fc{display:grid;grid-template-rows:72px auto;justify-items:center;align-items:end;gap:var(--s2);text-align:center}
.forecast .fc i{
  display:block;width:100%;max-width:34px;min-height:3px;height:4%;
  border-radius:6px 6px 3px 3px;
  background:linear-gradient(180deg,var(--it-bright),color-mix(in srgb,var(--it) 55%,var(--panel)));
  transition:height var(--t-slow) var(--ease-soft),filter var(--t-fast) var(--ease);
}
.forecast .fc.today i{background:var(--it)}
.forecast .fc.today .fc-label{color:var(--it);font-weight:700}
.forecast .fc:hover i{filter:brightness(1.08)}
.fc-label{font-size:11px;color:var(--muted);letter-spacing:.03em;white-space:nowrap}

 
.session{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:var(--s4)}
.sessbar{
  height:6px;border-radius:99px;background:var(--chip);overflow:hidden;
  position:sticky;top:calc(var(--topbar-h) + env(safe-area-inset-top,0px) + 6px);z-index:9;
}
.sessbar i{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--it),var(--it-bright));
  transition:width var(--t-slow) var(--ease-soft);
}
.sessblock{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s5);position:relative;
  animation:slide-up var(--t-slow) var(--ease) both;
}
 
.sessdone{
  text-align:center;padding:var(--s6) var(--s5);border-radius:var(--radius-lg);
  background:linear-gradient(160deg,color-mix(in srgb,var(--it) 10%,var(--panel)),var(--panel));
  border:1px solid var(--line);
  animation:pop var(--t-slow) var(--ease-soft) both;
}
.sessdone .it{
  display:block;font-family:var(--font-display);color:var(--it);font-weight:600;
  font-size:clamp(24px,2.4vw + 17px,32px);line-height:1.2;
}
.sessdone .de{color:var(--muted);font-size:var(--fs-ui)}

 
.bibgitter{display:grid;gap:var(--s4);grid-template-columns:1fr;}
@media(min-width:640px){.bibgitter{grid-template-columns:1fr 1fr;gap:var(--s5);}}
.bibkachel{
  padding:var(--s5);border-radius:var(--radius-lg);
  background:var(--panel);border:1px solid var(--line);
  box-shadow:var(--shadow-1);cursor:pointer;
  transition:box-shadow var(--t-fast) var(--ease-soft),
             transform var(--t-fast) var(--ease-soft);
}
.bibkachel:hover{box-shadow:var(--shadow-2);transform:translateY(-2px);}
.bibkachel:focus-visible{outline:2px solid var(--ring);outline-offset:2px;}
.bibkachel-kopf{display:flex;align-items:center;gap:var(--s3);}
.bibkachel-icon{display:inline-flex;color:var(--it);}
.bibkachel-icon svg{width:24px;height:24px;}
.bibkachel-titel{
  font-family:var(--font-display);font-size:var(--fs-h2);
  color:var(--it);font-weight:600;line-height:1.2;
}
.bibkachel-satz{margin:var(--s3) 0 0;color:var(--muted);font-size:var(--fs-ui);
  line-height:1.5;}

 
.bereiche{display:grid;gap:var(--s2);margin:var(--s5) 0 var(--s6);}
.bibkachel.bereich{
  padding:var(--s3) var(--s4);border-radius:var(--radius-sm);
  box-shadow:none;
  display:flex;align-items:center;gap:var(--s3);
}
.bibkachel.bereich:hover{box-shadow:none;transform:none;
  background:color-mix(in srgb,var(--accent) 7%,var(--panel));}
.bereich-txt{flex:1;min-width:0;}
.bibkachel.bereich .bibkachel-titel{font-size:var(--fs-h3);}
.bibkachel.bereich .bibkachel-satz{margin:2px 0 0;font-size:var(--fs-meta);}
.bereich-warum{margin:2px 0 0;color:var(--muted);font-size:var(--fs-meta);
  line-height:1.45;}
 
.bereich-pfeil{display:inline-flex;color:var(--muted);flex:none;}
.bereich-pfeil svg{width:18px;height:18px;}

 
.sessstand{
  padding:var(--s4) var(--s5);border-radius:var(--radius);
  background:var(--panel);border:1px solid var(--line);
}
.sessstand .it{
  display:block;font-family:var(--font-display);color:var(--it);font-weight:600;
  font-size:var(--fs-h3);line-height:1.25;margin-bottom:var(--s1);
}
.sessstand .de{display:block;color:var(--ink);font-size:var(--fs-ui);line-height:1.5}
.sessstand .hint{margin-top:var(--s2)}
.sessstand .bar,.sessstand .track{margin-top:var(--s3)}

 
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:60}
.confetti span{
  position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;opacity:0;
  background:var(--it);
  animation:confetti-piece 1.4s var(--ease) forwards;
}
.confetti span:nth-child(3n){background:var(--de)}
.confetti span:nth-child(3n+1){background:var(--accent)}
.confetti span:nth-child(5n){background:var(--warn);border-radius:50%}

 
.accentbar{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.accentbar button{
  border:1px solid var(--line);background:var(--panel);color:var(--ink);
  border-radius:9px;min-width:40px;min-height:40px;padding:0 10px;
  font-family:var(--font-display);font-size:18px;line-height:1;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.accentbar button:hover{background:color-mix(in srgb,var(--it) 10%,var(--panel));border-color:var(--it)}
.accentbar button:active{transform:scale(.94)}

.cloze{
  font-family:var(--font-display);font-size:clamp(19px,1.6vw + 14px,23px);
  line-height:1.55;color:var(--ink);text-wrap:pretty;
}
.cloze .gap{
  display:inline-block;min-width:5.5ch;text-align:center;
  color:var(--it);border-bottom:2px solid var(--it);
  background:color-mix(in srgb,var(--it) 10%,transparent);
  border-radius:4px 4px 0 0;padding:0 .3em;letter-spacing:.05em;
}
.hintline{
  margin-top:10px;color:var(--muted);font-size:var(--fs-meta);display:flex;gap:var(--s2);
  align-items:center;flex-wrap:wrap;
}
.hintline b{color:var(--de);font-weight:600}

 
.gsection{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:var(--s4);margin-bottom:var(--s4);scroll-margin-top:calc(var(--topbar-h) + 70px);
}
.gsection > h3{margin-top:0}
.gnav{display:flex;gap:var(--s2);flex-wrap:wrap;margin:0 0 var(--s4)}
.gnav a{
  display:inline-flex;align-items:center;min-height:34px;padding:0 var(--s3);
  border:1px solid var(--line);border-radius:99px;background:var(--panel);
  color:var(--muted);font-size:var(--fs-meta);font-weight:600;text-decoration:none;
  transition:color var(--t) var(--ease),border-color var(--t) var(--ease),background var(--t) var(--ease);
}
.gnav a[tabindex]{cursor:pointer}
.gnav a:hover,.gnav a.active{color:var(--it);border-color:var(--it);background:color-mix(in srgb,var(--it) 8%,var(--panel))}
 
.chev{transition:transform var(--t) var(--ease)}
.is-open .chev{transform:rotate(90deg)}

.gtable-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:12px;background:var(--panel);
  margin:var(--s3) 0;overscroll-behavior-x:contain;
}
.gtable caption{caption-side:top;text-align:left}
.gtable{border-collapse:collapse;width:100%;min-width:340px;font-size:var(--fs-ui)}
.gtable th,.gtable td{padding:9px 14px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.gtable th{
  background:var(--bg-2);color:var(--muted);font-size:var(--fs-micro);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;position:sticky;top:0;
}
.gtable tr:last-child td{border-bottom:none}
.gtable tbody tr:hover td{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.gtable td.itcell{
  font-family:var(--font-display);color:var(--it);font-weight:600;font-size:16.5px;
  cursor:pointer;transition:background var(--t-fast) var(--ease);
}
.gtable td.itcell:hover{background:color-mix(in srgb,var(--it) 10%,transparent)}
 
.gtable .form-hinweis{
  display:inline-flex;align-items:center;vertical-align:-.15em;
  margin-left:var(--s2);color:var(--muted);
}
.gtable .form-hinweis .ico{width:14px;height:14px}

 
.unpers{
  display:flex;gap:var(--s3);align-items:flex-start;
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:var(--s3) var(--s4);
}
.unpers .pill{flex:none}
.unpers-text{margin:0;font-size:var(--fs-ui);line-height:1.5;color:var(--ink)}
@media (max-width:520px){.unpers{flex-direction:column;gap:var(--s2)}}

 
 
.freq{display:flex;align-items:center;gap:8px;margin-top:6px}
.freq-track{flex:0 0 96px;height:4px;border-radius:2px;background:var(--chip);overflow:hidden}
.freq-fill{height:100%;background:var(--accent);border-radius:2px}
.freq-fill.unsicher{opacity:.45}
.freq-num{font-size:var(--fs-micro);color:var(--muted);letter-spacing:.02em;white-space:nowrap}
@media (max-width:640px){.freq-track{flex:0 0 64px}}

.gtable td.wrap{white-space:normal;min-width:14ch;max-width:34ch;line-height:1.45}
@media (max-width:640px){.gtable td.wrap{max-width:22ch}}
 
.gtable th.c,.gtable td.c{text-align:center}
.gtable td.rowhead{font-weight:600;white-space:nowrap}
.gtable tr.sum td{font-weight:700;border-top:1px solid var(--line)}

.gsvg{
  display:block;margin:var(--s3) auto;max-width:100%;height:auto;
  background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:10px;
}
.gsvg-title{
  text-align:center;color:var(--muted);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;margin:var(--s1) 0 var(--s3);
}
 
 
.kb-fig{overflow-x:auto;-webkit-overflow-scrolling:touch}
.kb{display:block;width:100%;min-width:560px;height:auto}
.kb text{font-family:var(--font-ui)}
@media (max-width:640px){
  .kb-lab{font-size:13.5px}
  .kb-num{font-size:19px}
  .kb-num.klein{font-size:15px}
  .kb-ach{font-size:12.5px}
  .kb-mark{font-size:14px}
}
 
.kb-fach{fill:var(--chip);stroke:var(--line);stroke-width:1}
.kb-fach.top{fill:color-mix(in srgb,var(--it) 10%,var(--chip));
             stroke:color-mix(in srgb,var(--it) 45%,var(--line))}
.kb-karte{fill:var(--panel);stroke:var(--line);stroke-width:1}
.kb-karte.top{fill:color-mix(in srgb,var(--it) 14%,var(--panel));
              stroke:color-mix(in srgb,var(--it) 55%,var(--line))}
.kb-boden{stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.kb-num{fill:var(--ink);font-size:16px;font-weight:600}
.kb-num.top{fill:var(--it)}
.kb-num.klein{font-size:13px}
.kb-num.leer{fill:var(--muted);font-weight:400}
.kb-lab{fill:var(--muted);font-size:11.5px}
.kb-ach{fill:var(--muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
 
.kb-grid{stroke:var(--line);stroke-width:1}
.kb-grid.top{stroke:color-mix(in srgb,var(--it) 45%,var(--line))}
.kb-grid.senk{stroke-dasharray:2 4}
.kb-ideal{fill:none;stroke:var(--muted);stroke-width:2;stroke-dasharray:5 4;
          stroke-linejoin:round}
.kb-weg{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round}
.kb-pkt{fill:var(--accent);stroke:var(--panel);stroke-width:1.5}
.kb-pkt.bad{fill:var(--bad)}
.kb-mark{fill:var(--bad);font-size:12px;font-weight:600}
 
.kb-fuell{fill:color-mix(in srgb,var(--accent) 55%,var(--panel))}
.kb-fuell.top{fill:color-mix(in srgb,var(--it) 60%,var(--panel))}
 
.kb-bu{color:var(--muted);font-size:var(--fs-meta);line-height:1.5;
       margin-top:var(--s2);text-align:center}
.kb-stufe{font-weight:600}
.kb-stufe.again{color:var(--bad)}
.kb-stufe.hard{color:var(--warn)}
.kb-stufe.good{color:var(--good)}
.kb-stufe.easy{color:var(--it)}

.gtip{
  border-left:3px solid var(--de);
  background:color-mix(in srgb,var(--de) 8%,var(--panel));
  border-radius:0 10px 10px 0;padding:var(--s3) var(--s4);margin:14px 0;
  color:var(--ink);font-size:14.5px;
}
.gtip b{color:var(--de)}
.gdrill{
  border:1px dashed color-mix(in srgb,var(--accent) 50%,var(--line));
  border-radius:12px;padding:var(--s4);margin:14px 0;
  background:color-mix(in srgb,var(--accent) 5%,var(--panel));
}

 
.roleplay{display:flex;flex-direction:column;gap:10px;max-width:680px}
.rp-turn{
  border:1px solid var(--line);border-radius:14px;padding:11px var(--s4);
  max-width:86%;background:var(--panel);
  animation:slide-up var(--t-slow) var(--ease) both;
}
.rp-turn.other{align-self:flex-start;border-bottom-left-radius:5px}
.rp-turn.me{
  align-self:flex-end;border-bottom-right-radius:5px;
  background:color-mix(in srgb,var(--it) 10%,var(--panel));
  border-color:color-mix(in srgb,var(--it) 32%,var(--line));
}
.rp-turn.pending{
  border-style:dashed;background:var(--bg-2);
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
}
 
.rp-line{font-family:var(--font-display);font-size:var(--fs-h3);line-height:1.4;color:var(--ink)}
.rp-turn.other .rp-line{color:var(--it)}
 
.rp-line.ask{font-family:var(--font-ui);font-weight:600}
.rp-de{margin-top:var(--s1);color:var(--muted);font-size:13.5px;font-family:var(--font-ui)}

.mic{
  width:56px;height:56px;border-radius:50%;flex:0 0 auto;
  border:1px solid var(--accent);background:var(--panel);color:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--t) var(--ease),color var(--t) var(--ease),transform var(--t-fast) var(--ease);
}
.mic .ico{width:24px;height:24px}
.mic:hover{background:color-mix(in srgb,var(--accent) 12%,var(--panel))}
.mic:active{transform:scale(.94)}
.mic.rec{
  background:var(--bad);border-color:var(--bad);color:var(--on-accent);
  animation:glow 1.4s var(--ease) infinite;
}
.rp-score{
  display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;
  font-size:12px;font-weight:700;letter-spacing:.03em;
  background:var(--chip);color:var(--muted);
}
.rp-score[data-band="top"]{background:color-mix(in srgb,var(--good) 18%,var(--panel));color:var(--good)}
.rp-score[data-band="good"]{background:color-mix(in srgb,var(--it) 16%,var(--panel));color:var(--it)}
.rp-score[data-band="ok"]{background:color-mix(in srgb,var(--warn) 20%,var(--panel));color:var(--warn)}
.rp-score[data-band="no"]{background:color-mix(in srgb,var(--bad) 15%,var(--panel));color:var(--bad)}

 
 
.fsearch{
  position:sticky;top:calc(var(--topbar-h) + env(safe-area-inset-top,0px));z-index:9;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:10px 0 6px;margin-bottom:6px;
}
.fsearch input{margin-top:0}
.tabs.fstatic{position:static;backdrop-filter:none;-webkit-backdrop-filter:none}
.fverb{flex:0 0 auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
 
.pill.konj,.pill.zerlegen{
  background:color-mix(in srgb,var(--accent) 10%,var(--panel));color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line));
  padding:3px 10px;cursor:pointer;white-space:nowrap;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.pill.konj:hover,.pill.zerlegen:hover{background:color-mix(in srgb,var(--accent) 20%,var(--panel));border-color:var(--accent)}
.pill.zerlegen.active{background:var(--accent);color:var(--panel);border-color:var(--accent)}
 
.pill.kasten{
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));
  background:var(--panel);color:var(--accent);cursor:pointer;font-family:var(--font-ui);
}
.pill.kasten:hover{background:color-mix(in srgb,var(--accent) 20%,var(--panel));border-color:var(--accent)}
.pill.kasten.drin{border-color:var(--it);color:var(--it);
  background:color-mix(in srgb,var(--it) 10%,var(--panel))}
.pill.kasten:disabled{opacity:.55;cursor:default}

 
.analyse{
  background:color-mix(in srgb,var(--accent) 5%,var(--panel));
  border:1px solid var(--line);border-left:3px solid var(--it);
  border-radius:0 10px 10px 0;padding:var(--s3) var(--s4);margin:0 0 var(--s2) 0;
}
.analyse-wort{display:flex;gap:var(--s3);align-items:baseline;padding:var(--s2) 0;border-top:1px solid var(--line)}
.analyse-wort:first-of-type{border-top:0}
.analyse-wort > .it{flex:0 0 130px;color:var(--it);font-family:var(--font-display);font-weight:600}
.analyse-lesarten{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.analyse-lesart{display:flex;gap:var(--s2);align-items:baseline;flex-wrap:wrap;font-size:var(--fs-ui);line-height:1.5}
 
.analyse-mehrdeutig{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.analyse-lesart-eine{display:block}
.analyse-befund{
  margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line);
  font-size:var(--fs-ui);line-height:1.55;display:flex;gap:var(--s2);align-items:baseline;flex-wrap:wrap;
}
.btn.small{padding:2px 10px;font-size:var(--fs-meta);min-height:0}
 
.cloze-de{color:var(--de);font-size:var(--fs-ui);line-height:1.5;margin:6px 0 12px}
 
.item.marked{
  background:color-mix(in srgb,var(--warn) 22%,var(--panel));
  box-shadow:inset 3px 0 0 0 var(--warn);
}
@media (max-width:560px){
  .analyse-wort{flex-direction:column;gap:4px}
  .analyse-wort > .it{flex:none}
}

 
.searchres{margin-top:var(--s2)}
.searchres .item{border-radius:10px;border:1px solid var(--line);margin-bottom:var(--s2)}
.hl{background:color-mix(in srgb,var(--warn) 34%,transparent);border-radius:3px;padding:0 1px}
.footer{color:var(--muted);font-size:12.5px;text-align:center;margin-top:var(--s7);line-height:1.7}

 
.modal{
  position:fixed;inset:0;background:rgba(30,20,10,.5);display:none;
  align-items:center;justify-content:center;z-index:50;padding:var(--s5);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.modal.show{display:flex;animation:slide-up var(--t-slow) var(--ease) both}
.modal .box{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  max-width:520px;width:100%;padding:var(--s5);box-shadow:var(--shadow-lg);
  max-height:calc(100vh - 40px);
  max-height:calc(100dvh - 40px);
  overflow-y:auto;
}
.modal h3{margin-top:0}
 
#auffModal{z-index:49}
.modal .sect{border-top:1px solid var(--line);margin:var(--s4) 0 10px;padding-top:var(--s3)}
.modal .btnrow{display:flex;gap:10px;flex-wrap:wrap}
.modal .btnrow.split{justify-content:space-between;align-items:center}
.fieldlabel{display:block;margin:6px 0 var(--s1)}
.fieldlabel .opt{opacity:.7}
.drop{
  border:2px dashed var(--line);border-radius:12px;padding:var(--s5);text-align:center;
  color:var(--muted);margin:14px 0;cursor:pointer;
  transition:border-color var(--t) var(--ease),color var(--t) var(--ease),background var(--t) var(--ease);
}
.drop:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.drop.drag{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.hidden{display:none!important}
 
.pill.studiobadge{border:1px solid var(--de);color:var(--de);background:transparent;margin-left:6px}
.bkrow{display:flex;gap:10px;align-items:center;margin:var(--s1) 0}

 
.importstatus{white-space:pre-wrap;color:var(--accent);margin:-6px 0 var(--s3)}
.importstatus.is-error{color:var(--bad)}
kbd{
  background:var(--chip);border:1px solid var(--line);border-bottom-width:2px;
  border-radius:6px;padding:1px 6px;font-size:12px;font-family:var(--font-mono);
}
 
.kbdhint{display:none}
@media (min-width:720px){.kbdhint{display:block}}

 
.storewarn{
  background:var(--bad);color:var(--on-accent);
  padding:9px var(--s4);font-size:var(--fs-meta);line-height:1.4;text-align:center;
}

 
.tabbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--panel);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
 
.tabbar-item{
  flex:1 1 0;min-width:40px;height:56px;padding:0 2px;
  border:none;background:none;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:10px;font-weight:600;letter-spacing:.02em;line-height:1.1;
  transition:color var(--t) var(--ease);
}
.tabbar-item .ico{width:22px;height:22px}
.tabbar-item.active{color:var(--it)}
.tabbar-item:hover{color:var(--ink)}
.tabbar-item.active:hover{color:var(--it)}

 
body.focus header.top{display:none}
body.focus .tabbar{display:none!important}
.sesshead{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--s3);
  padding:calc(env(safe-area-inset-top,0px) + 10px) 0 10px;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.sesshead .sessbar{flex:1;position:static;top:auto}
.sesshead .sessblockpill{white-space:nowrap;flex:0 0 auto}
.sesshead .sessexit{flex:0 0 auto}

 
.mcard{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s4);margin-bottom:var(--s4);
}
.mcard > h3{margin-top:0}
.mcard.is-danger{border-color:color-mix(in srgb,var(--bad) 55%,var(--line))}
.mcard.is-danger > h3{color:var(--bad)}
.setrow{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin:10px 0}
.setrow > .lab{flex:1 1 200px;min-width:0}
.aboutname{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:600}

 
.onb{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:var(--s4)}
.onb-dots{display:flex;justify-content:center;gap:var(--s2);padding-top:var(--s4)}
.onb-dots i{
  width:7px;height:7px;border-radius:50%;background:var(--chip);
  border:1px solid var(--line);
  transition:background var(--t) var(--ease),transform var(--t) var(--ease),
             border-color var(--t) var(--ease);
}
.onb-dots i.done{background:color-mix(in srgb,var(--it) 45%,var(--panel));border-color:var(--it)}
.onb-dots i.on{background:var(--it);border-color:var(--it);transform:scale(1.4)}
.onb-body{text-align:center}
.onb-big{
  font-family:var(--font-display);color:var(--it);font-weight:600;
  font-size:clamp(28px,3.2vw + 19px,40px);line-height:1.14;
  margin:var(--s3) 0 var(--s2);text-wrap:balance;
}
.onb-de{color:var(--ink);font-size:var(--fs-h3);line-height:1.45;margin:0;text-wrap:pretty}
.onb-de b{color:var(--ink);font-weight:700}
.onb-body > .hint{margin-top:var(--s3)}
.onb-acts{display:flex;gap:var(--s3);flex-wrap:wrap;justify-content:center;align-items:center}
.onb-body .card-q{text-align:left}
.onb-goals{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s3)}
.onb-goal{text-align:center}
.onb-goal h3{margin:var(--s1) 0}
.onb-goal.sel{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,var(--panel));
}

 
 
.empty{color:var(--muted);text-align:center;padding:var(--s7) var(--s5);text-wrap:balance}
.empty .it{
  display:block;font-family:var(--font-display);
  font-size:clamp(22px,2.4vw + 16px,29px);font-weight:600;line-height:1.2;
  color:var(--it);margin-bottom:6px;
}
.empty .de{display:block;font-size:14px;color:var(--muted);opacity:.9}

 
@keyframes pop{
  0%{transform:scale(.9);opacity:0}
  60%{transform:scale(1.03);opacity:1}
  100%{transform:scale(1);opacity:1}
}
@keyframes glow{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 34%,transparent)}
  50%{box-shadow:0 0 0 7px color-mix(in srgb,currentColor 0%,transparent)}
}
@keyframes slide-up{
  from{transform:translateY(8px);opacity:0}
  to{transform:translateY(0);opacity:1}
}
 
@keyframes page-in{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:none}
}
@keyframes toast-in{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
@keyframes toast-out{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(6px)}
}
@keyframes confetti-piece{
  0%{transform:translate3d(0,0,0) rotate(0deg);opacity:1}
  100%{transform:translate3d(var(--dx,0px),102vh,0) rotate(720deg);opacity:0}
}

 

 
@media (max-width:860px){
  .flip{height:250px}
  .oggi{padding:var(--s4)}
}

 
@media (max-width:720px){
   
  .wrap{
     
    padding-left:max(var(--bindung-breite),
                     env(safe-area-inset-left,0px));
    padding-right:max(14px,env(safe-area-inset-right,0px));
    padding-bottom:calc(56px + var(--s5) + env(safe-area-inset-bottom,0px));
  }
  .top .row{gap:var(--s2);padding:var(--s2) 14px}
  .brand{font-size:17px}

   
  .topnav{display:none}
  .tabbar{display:flex}
  .toasts{padding-bottom:calc(56px + var(--s4) + env(safe-area-inset-bottom,0px))}

   
  .search{display:none}
  .iconbtn.searchopen{display:inline-flex}
  body.searching .search{
    display:flex;flex-direction:column;align-items:stretch;gap:var(--s3);
    position:fixed;inset:0;z-index:60;max-width:none;
    background:var(--bg);
    padding:calc(env(safe-area-inset-top,0px) + 14px) 14px 14px;
  }
   
  body.searching .searchfield{flex:0 0 auto}
  body.searching .search input{width:100%}
  body.searching .searchfield input{height:48px;font-size:var(--fs-body);padding-right:52px}
   
  body.searching .qclear{width:44px;height:44px}
  body.searching .iconbtn.searchclose{
    display:inline-flex;position:absolute;right:var(--s1);top:50%;transform:translateY(-50%);
  }
  body.searching .searchhint{display:block;margin:0}

  .tabs{position:static;top:auto;margin:14px 0 var(--s4);backdrop-filter:none;-webkit-backdrop-filter:none}
  .tab{padding:11px var(--s3);min-height:44px}
  .iconbtn{min-height:44px;padding:0 13px}
  .iconbtn.icon-only{width:44px;padding:0}
  .btn.sm{min-height:44px}
  .play{width:44px;height:44px}
  .accentbar button{min-width:44px;min-height:44px}
  .sessbar{position:static;top:auto}

  .grid{grid-template-columns:1fr;gap:var(--s3)}
  .flip{height:230px}
  .card-q,.sessblock,.oggi{padding:var(--s4)}
  .prose{padding:var(--s4)}
  .prose .ex{flex-direction:column;gap:2px}
  .prose .ex .l{flex:1 1 auto}
  .item{padding:var(--s3);flex-wrap:wrap}
  .item .it,.item .de{flex:1 1 100%}
   
  .item.vrow{grid-template-columns:auto 1fr auto}
  .item.vrow .de{grid-column:2}
  .item.vrow .fverb{grid-column:2;justify-content:flex-start}
   
  .item.vrow .vhaeuf{grid-column:3;grid-row:1}
   
  .list.vlist,.list.wlist{
    display:flex;flex-direction:column;gap:1px;
  }
  .list.vlist>.item.vrow,.list.wlist>.item.vrow{
    grid-template-columns:auto 1fr auto;
  }
  .item.vrow .wextra{grid-column:2;justify-content:flex-start}
  .rp-turn{max-width:94%}
  .forecast .fc{grid-template-rows:58px auto}
  .tilerow{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
  .grades{gap:var(--s2)}
  .grade{flex:1 1 42%;padding:10px var(--s3);min-height:52px}

   
  body.focus .wrap{padding-bottom:calc(140px + env(safe-area-inset-bottom,0px))}
  body.focus .grades{
    position:fixed;left:0;right:0;bottom:0;z-index:30;margin:0;gap:var(--s2);
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    background:var(--panel);border-top:1px solid var(--line);
  }
  body.focus .grades .grade{flex:1 1 calc(50% - var(--s2));min-height:54px}

   
  .modal{padding:0;align-items:flex-end}
  .modal .box{
    max-height:88vh;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    padding-bottom:calc(var(--s5) + env(safe-area-inset-bottom,0px));
  }
}

 
@media (max-width:380px){
  body{font-size:15.5px}
  .brand{font-size:16px}
  .iconbtn{font-size:12px;padding:0 10px}
  .stat-tile{padding:10px var(--s3)}
  .oggi-actions{flex-direction:column;align-items:stretch}
  .oggi-actions .btn{width:100%}
   
  .oggi-actions .oggi-ort{align-self:flex-start;width:auto}
  .onb-acts{flex-direction:column;align-items:stretch}
  .onb-acts .btn{width:100%}
}

 
@media print{
  header.top,.tabs,.tabbar,.toolbar,.confetti,.toasts{display:none!important}
  .card,.prose,.gsection{box-shadow:none;break-inside:avoid}
  body{background:#fff;color:#000}
}

 
 
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:1ms!important;
    animation-delay:0ms!important;
    animation-iteration-count:1!important;
    transition-duration:1ms!important;
    transition-delay:0ms!important;
    scroll-behavior:auto!important;
  }
   
  .flip{perspective:none}
  .flip .inner{transform:none!important;transition:none!important}
  .flip.flipped .inner{transform:none!important}
  .face{
    backface-visibility:visible;-webkit-backface-visibility:visible;
    transition:opacity 1ms linear!important;
  }
  .face.back{transform:none!important;opacity:0;pointer-events:none}
  .flip.flipped .face.front{opacity:0;pointer-events:none}
  .flip.flipped .face.back{opacity:1;pointer-events:auto}
   
  .confetti{display:none!important}
  .stat-tile.is-streak.on,.mic.rec{animation:none!important}
  #app.page-in{animation:none!important}
  .card:hover,.grade:hover,.stat-tile:hover,.iconbtn:active,.btn:active,
  .play:active,.mic:active,.accentbar button:active{transform:none!important}
}

 
@media (max-width:720px){
  .item.sent .it,.item.sent .de{flex:1 1 100%}
}

 


 
.setrow > .inp-lang{
  flex:1 1 320px;min-width:220px;max-width:none;text-align:left;
}
.inp-lang.inp-it{
  font-family:var(--font-display);font-size:var(--fs-body);color:var(--it);
}

 
.card.card-jetzt{
  border-color:var(--mk-dot);border-width:2px;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent);
}
 
.list .item.fp-jetzt{
  border:2px solid var(--mk-dot);border-radius:var(--radius-sm);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent);
}
.card .pill.pill-jetzt{
  align-self:flex-start;margin:var(--s2) 0 0;
  color:var(--mk-dot);border-color:var(--mk-dot);background:transparent;
  font-weight:600;
}

 
.setrow > .feldkreuz{
  position:relative;display:flex;align-items:center;
  flex:1 1 320px;min-width:220px;
}
.setrow > .feldkreuz > .inp-lang{
  flex:1 1 auto;width:100%;min-width:0;text-align:left;
   
  padding-right:48px;
   
  min-height:44px;box-sizing:border-box;
}
 
.feldkreuz.has-text > .feldkreuz-x{
  display:flex;width:44px;height:44px;right:2px;
}

 
.setrow.wortzeile > .lab{flex:1 1 120px}
.setrow.wortzeile > .feldkreuz{flex:1 1 170px;min-width:150px}
.setrow.wortzeile > .selin{min-height:44px}

 
.satzbau-rahmen{
  display:block;width:100%;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--panel);
  height:min(78vh,900px);
}

 
.logbox{
  max-height:22rem; overflow:auto;
  background:var(--bg-2);
  border:1px solid var(--line); border-radius:.5rem;
  padding:.75rem .9rem; margin:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.78rem; line-height:1.5;
  white-space:pre; tab-size:2;
}


 
.hilfe-fuss{
  margin-top:var(--s7); padding-top:var(--s3);
  border-top:1px solid var(--line);
  color:var(--muted); font-size:.9rem;
  display:flex; gap:1.1em; flex-wrap:wrap;
}
.hilfe-fuss a{ color:var(--muted); }
.hilfe-fuss a:hover{ color:var(--accent); }


 
.face .frageoben{
  font-size:clamp(.95rem,2.4vw,1.25rem);
  line-height:1.3; color:var(--muted);
  margin:0 0 var(--s2); max-width:90%;
  text-align:center;
}
 
.face .frageoben.de-txt{ font-family:var(--font-ui); }

 
.buchteil{
  display:flex;align-items:baseline;gap:var(--s3);
  margin:var(--s6) 0 var(--s3);padding-bottom:var(--s2);
  border-bottom:2px solid var(--ink);
}
.buchteil:first-child{margin-top:var(--s4)}
.buchteil-nr{
  font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--muted);flex:none;
}
.buchteil-name{font-family:var(--font-display);font-size:var(--fs-h3);color:var(--ink)}

.buchliste{display:flex;flex-direction:column}

 
.deckel{ isolation:auto; }
.deckel-band{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  overflow:hidden;border-radius:inherit;
   
  left:0;
}
.deckel-band svg{
   
  position:absolute;left:0;top:0;bottom:0;height:100%;
   
  width:min(42%, 400px);
}

 
.sg-zeile{
  padding:var(--s3) 0;border-bottom:1px solid var(--line);
}
.sg-zeile:last-of-type{border-bottom:0}
.sg-kopf{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap}
.sg-wert{font-variant-numeric:tabular-nums;white-space:nowrap}
.sg-regler{width:100%;max-width:420px;margin:var(--s2) 0 0;accent-color:var(--accent)}
.sg-regler:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
 
.sg-probe{
  margin-top:var(--s2);color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;
}
.sg-probe .itlang{color:var(--it)}
.sg-probe-display{font-family:var(--font-display);font-size:var(--fs-display)}
.sg-probe-hero{font-family:var(--font-display);font-size:var(--fs-hero)}
.sg-probe-h2{font-family:var(--font-display);font-size:var(--fs-h2)}
.sg-probe-read{font-family:var(--font-display);font-size:var(--fs-read)}
.sg-probe-h3{font-family:var(--font-display);font-size:var(--fs-h3)}
.sg-probe-body{font-family:var(--font-display);font-size:var(--fs-body)}
.sg-probe-ui{font-size:var(--fs-ui)}
.sg-probe-meta{font-size:var(--fs-meta);color:var(--muted)}
.sg-probe-micro{font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sg-probe-num{font-family:var(--font-display);font-size:var(--fs-num);font-variant-numeric:tabular-nums}

 
.buchkacheln{
  display:grid;gap:var(--s3);
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  margin:0 0 var(--s5);
}
.buchkachel{
  display:flex;flex-direction:column;gap:2px;
  min-height:112px;padding:var(--s3);
  background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  cursor:pointer;
  transition:border-color var(--t-page,140ms), box-shadow var(--t-page,140ms);
}
.buchkachel:hover{border-color:var(--accent);box-shadow:var(--shadow-1)}
.buchkachel:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
 
.buchkachel-nr{
  font-size:var(--fs-micro);letter-spacing:.08em;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
 
.buchkachel-titel{
  font-family:var(--font-display);font-size:var(--fs-h3);line-height:1.2;
  color:var(--it);
}
.buchkachel-titel-de{
  font-size:var(--fs-ui);font-weight:600;line-height:1.25;color:var(--ink);
}
.buchkachel-de{font-size:var(--fs-meta);color:var(--muted);line-height:1.3}
.buchkachel-inhalt{
  margin-top:auto;padding-top:var(--s2);
  font-size:var(--fs-meta);color:var(--muted);line-height:1.35;
}
.buchkachel-thema{
  font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);
}
 
.buchkachel-sonder{background:var(--bg-2)}
.buchkachel-deckel{border-color:var(--accent)}

.buchzeile{
  display:grid;grid-template-columns:2.5rem 1fr auto;
  gap:var(--s3);align-items:baseline;
  padding:var(--s3) var(--s2);border-bottom:1px solid var(--line);
  border-radius:var(--radius-sm);
}
.buchzeile:last-child{border-bottom:0}
.buchzeile:hover{background:var(--chip)}
.buchzeile-nr{
  font-family:var(--font-display);font-size:var(--fs-h3);
  color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;
}
.buchzeile-mitte{min-width:0}
.buchzeile-titel{
  font-family:var(--font-display);font-size:var(--fs-body);color:var(--it);
  line-height:1.25;
}
.buchzeile-de{font-size:var(--fs-ui);color:var(--ink);margin-top:1px}
.buchzeile-inhalt{font-size:var(--fs-meta);color:var(--muted);margin-top:2px}
.buchzeile-rechts{display:flex;align-items:center;gap:var(--s2);flex:none}
.buchzeile-stand{font-size:var(--fs-meta);color:var(--muted)}

 
@media (max-width:520px){
  .buchzeile{grid-template-columns:2rem 1fr;row-gap:var(--s1)}
  .buchzeile-rechts{grid-column:2;justify-content:flex-start}
}

 

 
.vw-motto{
  margin:var(--s4) 0 var(--s5);padding-left:var(--s4);
  border-left:2px solid var(--it);
}
.vw-motto-it{
  font-family:var(--font-display);font-size:var(--fs-h2);color:var(--it);
  line-height:1.25;
}
.vw-motto-de{
  font-family:var(--font-ui);font-size:var(--fs-ui);color:var(--muted);
  margin-top:var(--s1);
}

 
.item>.vw-sym{
  flex:0 0 24px;display:flex;align-items:center;justify-content:center;
  color:var(--muted);align-self:flex-start;margin-top:2px;
}
.item>.vw-txt{flex:1;min-width:0}
.vw-name{font-size:var(--fs-ui);font-weight:600;color:var(--ink)}
.vw-was{font-size:var(--fs-meta);color:var(--muted);line-height:1.45;margin-top:2px}

 
.vw-stufen{display:flex;flex-wrap:wrap;gap:var(--s3);margin:var(--s3) 0}
.vw-stufe{display:flex;align-items:baseline;gap:var(--s2)}
.vw-stufe-n{font-size:var(--fs-meta);color:var(--muted);white-space:nowrap}

 
.buchseite{
  position:relative;
  max-width:var(--satzspiegel);margin:0 auto;
  padding:var(--s6) var(--s6) var(--s5);
   
  background:none;
   
  border:1px solid var(--line);border-radius:0;
}
.buchseite::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:var(--panel);border-radius:inherit;
}
 
 
 
:root{
  --bindung:34px;--bindung-breite:18px;--bindung-kasten:39px;
   
  --bindung-innen:17px;
}
.buchseite > .bindung{
  position:absolute;left:calc(-1 * var(--bindung-breite));top:0;bottom:0;
  width:var(--bindung-kasten);z-index:-1;pointer-events:none;
  color:var(--muted);
}
.buchseite > .bindung svg{display:block;width:100%;height:100%}
@media print{.buchseite > .bindung{display:none}}

 
 
.sc-feld{
  width:100%;box-sizing:border-box;
  padding:var(--s3) var(--s4);
  font-family:var(--font-display);
  font-size:calc(var(--fs-read) + 2px);
  line-height:1.45;
  color:var(--ink);background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);
  resize:vertical;
}
.sc-feld:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
 
.sc-korr{flex-direction:column;align-items:stretch;gap:var(--s2)}
 
.item:has(> .sc-korr-zeile){
  flex-direction:column;align-items:stretch;gap:var(--s2);
}
.sc-korr-marke{
  font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);
}
.sc-korr-zeile{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
 
 
.sc-korr-was{
  flex:0 0 11ch;
  font-size:var(--fs-meta);color:var(--muted);
}
.sc-korr-satz{flex:1 1 12ch;min-width:0}
 
.sc-neu{
  background:color-mix(in srgb,var(--good) 18%,transparent);
  border-radius:var(--radius-sm);padding:0 .2em;font-weight:600;
}
.sc-alt{text-decoration:line-through;text-decoration-thickness:1px;color:var(--muted)}
@media (max-width:719px){
  .sc-korr-was{flex:0 0 100%;min-width:0}
}
 
.sw-zeile{display:flex;align-items:flex-start;gap:var(--s3);cursor:pointer}
.sw-zeile input{margin-top:3px;flex:0 0 auto}
 
.buchseite{padding-left:calc(var(--s6) + var(--bindung))}
 
 
 
.buchseite > .blattecke-zurueck{left:var(--bindung)}
 
.buchseite-zahl{
  margin-top:var(--s6);padding-top:var(--s4);
  border-top:1px solid var(--line);
  text-align:center;
  font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-variant-numeric:tabular-nums;
}
 
@media (max-width:719px){
  .buchseite{
    max-width:none;
     
     
    padding:0 var(--s4) 0 calc(var(--bindung-innen) + var(--s3));
    background:transparent;border:0;border-radius:0;
  }
}

 
.buchseite.stapel{
  box-shadow:
    3px 3px 0 -1px var(--panel),
    3px 3px 0 0 var(--line),
    5.8px 5.8px 0 -1px var(--panel),
    5.8px 5.8px 0 0 var(--line),
    8.4px 8.4px 0 -1px var(--panel),
    8.4px 8.4px 0 0 var(--line),
    10.8px 10.8px 0 -1px var(--panel),
    10.8px 10.8px 0 0 var(--line),
    13px 13px 0 -1px var(--panel),
    13px 13px 0 0 var(--line),
    15px 15px 0 -1px var(--panel),
    15px 15px 0 0 var(--line),
    16.8px 16.8px 0 -1px var(--panel),
    16.8px 16.8px 0 0 var(--line),
    18.4px 18.4px 0 -1px var(--panel),
    18.4px 18.4px 0 0 var(--line),
    19.8px 19.8px 0 -1px var(--panel),
    19.8px 19.8px 0 0 var(--line),
    21px 21px 0 -1px var(--panel),
    21px 21px 0 0 var(--line);
}
@media (max-width:719px){
   
  .buchseite.stapel{box-shadow:none}
}

 
.buchseite.hat-ecken{padding-top:var(--s7)}
.buchseite.hat-ohr{border-top-right-radius:0}

.blattecke{
  position:absolute;top:-1px;
  width:var(--ecke);height:var(--ecke);
  padding:0;border:0;background:none;
}
 
.blattecke-weiter{
  right:-1px;
  clip-path:polygon(0 0,100% 0,100% 100%);
   
  background:var(--chip);
  border-top:1px solid var(--line);
  border-right:1px solid var(--line);
  cursor:pointer;
}
 
.blattecke-weiter{position:absolute}
.blattecke-pfeil{
  position:absolute;top:7px;right:7px;
  width:14px;height:14px;color:var(--muted);
  pointer-events:none;
}
.blattecke-pfeil svg{width:100%;height:100%;display:block}
.blattecke-weiter:hover .blattecke-pfeil{color:var(--accent)}
 
.blattecke-knick{
  right:-1px;pointer-events:none;
  clip-path:polygon(0 0,100% 100%,0 100%);
  background:linear-gradient(to bottom left,
    transparent 50%, var(--line) 50%, var(--line) calc(50% + 1px),
    var(--bg) calc(50% + 1px));
   
  border-left:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
 
.blattecke-weiter:hover{background:var(--panel)}
.blattecke-weiter:focus-visible{outline:2px solid var(--ring);outline-offset:-6px}

 
 
 
.blattecke-zurueck{
  left:-1px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;
  color:var(--muted);cursor:pointer;
}
.blattecke-zurueck svg{width:20px;height:20px}
.blattecke-zurueck:hover{color:var(--accent)}
.blattecke-zurueck:focus-visible{outline:2px solid var(--ring);outline-offset:-4px}

@media (max-width:719px){
  .blattecke{display:none}
  .buchseite.hat-ecken{padding-top:0}
}

 
.buchseite.startseite{
   
  padding-top:0;
   
}
.buchseite.startseite > .oggi{
  margin:0 calc(-1 * var(--s6)) var(--s5);
  border:0;border-radius:0;box-shadow:none;
}
 
.buchseite.startseite > .blattecke{top:0;z-index:2}
.buchseite.startseite > .blattecke-weiter,
.buchseite.startseite > .blattecke-knick{right:0}
.buchseite.startseite > .blattecke-zurueck{left:0}
 
.buchseite.startseite.hat-ecken > .oggi > .oggi-head{
  padding-left:var(--ecke);padding-right:var(--ecke);
}
@media (max-width:719px){
   
  .buchseite.startseite > .oggi{
    margin:14px 0 var(--s5);border-radius:var(--radius-lg);
  }
   
  .buchseite.startseite > .oggi{
    display:flex;flex-direction:column;justify-content:center;
  }
   
  .buchseite.startseite > .oggi > :last-child{margin-bottom:0}
}

 
.lesezeichen{
  margin:0 0 var(--s6);
  padding-left:var(--s4);
  border-left:4px solid var(--it);
}
.lesezeichen-marke{
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
 
.lesezeichen .buchzeile{border-bottom:0;padding-left:0}
.lesezeichen .buchzeile-titel{font-size:var(--fs-h2)}
 
.lesezeichen-stand,
.lesezeichen-danach{
  margin:var(--s2) 0 0;font-size:var(--fs-meta);color:var(--muted);
}
 
.lesezeichen-danach .itlang{font-size:var(--fs-meta);color:var(--it)}

 
.blaettern{
  display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s4);
  align-items:center;margin-top:var(--s7);padding-top:var(--s5);
  border-top:1px solid var(--line);
}
.blaettern-seite{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3);border-radius:var(--radius-sm);min-width:0;
}
.blaettern-seite.weiter{justify-content:flex-end;text-align:right;
  flex-direction:row-reverse}
.blaettern-seite:not(.leer):hover{background:var(--chip)}
.blaettern-seite.leer{visibility:hidden}
.blaettern-pfeil{font-size:var(--fs-h3);color:var(--muted);flex:none;line-height:1}
.blaettern-text{min-width:0}
.blaettern-nr{font-size:var(--fs-micro);letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.blaettern-titel{
  font-family:var(--font-display);font-size:var(--fs-body);color:var(--it);
  line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.blaettern-stand{
  font-size:var(--fs-meta);color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
 
@media (max-width:560px){
  .blaettern{grid-template-columns:1fr;gap:var(--s2);text-align:center}
  .blaettern-seite.weiter{justify-content:center;flex-direction:row}
  .blaettern-seite{justify-content:center}
  .blaettern-stand{order:-1}
}

 
.deckel{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:var(--s3);
  min-height:calc(100vh + 72px);
  min-height:calc(100dvh + 72px);
  margin-bottom:var(--s7);
}
 
 
.deckel-marke{
  width:min(78%, 420px);color:var(--ink);margin:0 auto;
}
.deckel-marke svg{width:100%;height:auto;display:block}
.deckel-claim{
  font-family:var(--font-display);font-style:italic;
  font-size:var(--fs-h2);color:var(--it);line-height:1.2;
}
.deckel-claim-de{font-size:var(--fs-ui);color:var(--muted)}
.deckel-was{
  font-size:var(--fs-ui);color:var(--ink);max-width:26rem;
  margin-top:var(--s4);text-wrap:pretty;
}
 
 
.deckel-stoerer{
  position:absolute;left:3.5rem;top:var(--s4);z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;gap:.15em;
  max-width:16rem;text-align:left;
  padding:.55rem .85rem;
  background:var(--flagge-rot);color:var(--panel);
  border-radius:10px;
  box-shadow:0 3px 10px rgba(0,0,0,.28);
  transform:rotate(-4deg);
  transform-origin:left top;
}
.deckel-stoerer-gross{
  font-size:var(--fs-lg,1.2rem);font-weight:700;line-height:1.1;
}
.deckel-stoerer-klein{
  font-size:var(--fs-meta);line-height:1.3;text-wrap:pretty;
}
 
.deckel-stoerer .t-it{
   
  color:inherit;font-family:var(--font-display);
  font-size:1.15em;font-weight:600;
}
 
@media (max-width:719px){
  .deckel-stoerer{
    left:var(--s4);max-width:11.5rem;transform:rotate(-3deg);
    padding:var(--s1) var(--s2);
  }
  .deckel-stoerer-gross{font-size:var(--fs-ui)}
}
.deckel-zahlen{
  display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;
  justify-content:center;margin-top:var(--s2);
}
.deckel-zahl{font-size:var(--fs-meta);color:var(--muted);
  font-variant-numeric:tabular-nums}
.deckel-punkt{color:var(--line)}
.deckel-tat{margin-top:var(--s5)}
.deckel-fuss{
  font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-top:var(--s5);
}

 
.glossar-leiste{margin:.9rem 0 .5rem}
.glossar-suche{width:100%;max-width:22rem;padding:.5rem .7rem;
  border:1px solid var(--line);border-radius:.4rem;font:inherit;
  background:var(--panel);color:var(--ink)}
.glossar-abc{display:flex;flex-wrap:wrap;gap:.25rem;margin:.2rem 0 .9rem}
.glossar-abc .abc{border:1px solid var(--line);background:transparent;
  color:var(--ink);font:inherit;font-size:var(--fs-meta);line-height:1;
  padding:.32rem .5rem;border-radius:.3rem;cursor:pointer}
.glossar-abc .abc.an{background:var(--it);color:var(--panel);
  border-color:var(--it)}
.glossar-liste{display:flex;flex-direction:column}
.glossar-zeile{display:grid;grid-template-columns:1fr 1fr auto;gap:.8rem;
  align-items:baseline;padding:.45rem 0;
  border-bottom:1px solid var(--line)}
@media (max-width:719px){
  .glossar-zeile{grid-template-columns:1fr auto;gap:.2rem .6rem}
  .glossar-de{grid-column:1;font-size:.9rem}
}
.glossar-it{font-style:italic;color:var(--it)}
.glossar-de{color:var(--ink)}
 
.glossar-zeile.gesperrt .glossar-de{color:var(--muted)}
.glossar-kap{background:transparent;border:0;padding:0;font:inherit;
  font-size:var(--fs-meta);color:var(--muted);cursor:pointer;
  text-decoration:underline;text-underline-offset:.15em}
.glossar-kap.leer{text-decoration:none;cursor:default}

 
.sc-zeile{
  display:grid;
  grid-template-columns:7.5rem 1fr auto;
  align-items:start;
  gap:var(--s3);
  margin-top:var(--s3);
}
.sc-zeile:first-child{margin-top:0}
.sc-label{
  font-size:var(--fs-ui);color:var(--muted);
  padding-top:.55rem;                
  white-space:nowrap;
}
 
.sc-sprache{margin-top:.35rem;white-space:nowrap}
 
.sc-ueb:empty::before{
  content:'—';color:var(--muted);
}
 
.sc-knopfzeile{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
}
 
label.sc-mehr{
  display:inline-flex;align-items:center;gap:.4em;
  font-size:var(--fs-ui);color:var(--muted);cursor:pointer;white-space:nowrap;
}
 
.sc-mehr-hinweis{grid-column:2 / -1;margin-top:var(--s1)}
 
.sc-neben{display:block;margin-bottom:var(--s2)}
.sc-neben:last-child{margin-bottom:0}
.sc-neben-notiz{display:block;font-size:var(--fs-meta);color:var(--muted)}

 
.sc-stand{
  font-size:var(--fs-meta);color:var(--muted);white-space:nowrap;
}
.sc-stand.knapp{color:var(--warn);font-weight:600}

 
.sc-preis{
  grid-column:2 / -1;
  font-size:var(--fs-meta);color:var(--muted);
  margin-top:var(--s2);
}
@media (max-width:719px){
  .sc-zeile{grid-template-columns:1fr;gap:var(--s2)}
  .sc-label{padding-top:0}
  .sc-sprache{margin-top:0;justify-self:start}
  .sc-preis{grid-column:1}
}

 
.sw-befehl{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--fs-meta);line-height:1.6;
  background:var(--sink);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s3);margin:var(--s2) 0 0;
  overflow-x:auto;white-space:pre;
  -webkit-user-select:all;user-select:all;
}

 
.item.gesucht{border-left:3px solid var(--accent)}
.gesucht-hinweis{
  font-size:var(--fs-meta);color:var(--muted);line-height:1.4;
  padding:var(--s2) var(--s3) var(--s3);
  border-left:3px solid var(--accent);
}


 
.tokengitter{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:var(--s3);
}
.tokenpaket{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--s1);
}
.tokenpaket-menge{font-weight:600}
 
.tokenpaket-preis{
  font-size:var(--fs-lg,1.15rem);
  color:var(--ink);
}