/* Basis aller Seiten — Farben und Typografie woertlich aus dem Design. */
:root{
  --bg:#f4efe4; --bg2:#ece5d6; --surf:#fbf8f1; --ink:#181510; --ink2:#4a4338; --mut:#6e6558;
  --line:#d8cfbc; --good:#2c7a51; --warm:#a8552a; --cool:#2f6f84; --glow:#a8552a; --fs:1;
  --navh:57px;
  /* Helligkeit der Sprach-Akzentfarben; applyTheme() kippt sie auf dunklen Themen. */
  --accL:50%;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Newsreader,Georgia,serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--warm);text-decoration:none}
a:hover{color:var(--ink)}
::selection{background:var(--warm);color:var(--bg)}

#fw-header{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:blur(16px);background:color-mix(in oklab,var(--bg) 84%,transparent);border-bottom:1px solid var(--line)}
#fw-scene{position:fixed;inset:0;z-index:0;pointer-events:none}
#fw-footer{border-top:1px solid var(--line);margin-top:60px;padding:26px 24px 150px;position:relative;z-index:2}
#fw-header a:hover,#fw-header button:hover{border-color:var(--warm)!important}
#fw-header ::-webkit-scrollbar{display:none}

.fw-card:hover{transform:translateY(-4px);border-color:var(--warm)!important;box-shadow:0 26px 50px -34px rgba(0,0,0,.55)}
.fw-cta:hover{background:var(--warm)!important;color:var(--bg)!important;transform:translateY(-2px)}
.fw-ghost:hover{border-color:var(--warm)!important;color:var(--warm)!important}
.fw-input:focus{border-color:var(--warm)!important}

/* Cover-Platzhalter: die Bilder liegen auf dem Server, offline bleibt der Kasten ruhig. */
.fw-cover{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .5s ease}
.fw-cover[data-failed="1"]{opacity:0}

@keyframes fwPulse{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes fwCard{from{opacity:0}to{opacity:1}}
@keyframes fwIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes fwDim{from{opacity:0}to{opacity:1}}
@keyframes fwSlideUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fwFloat{0%{opacity:1;transform:translate3d(0,0,0) scale(1)}100%{opacity:0;transform:translate3d(var(--dx,0px),-190px,220px) scale(2.1)}}
@keyframes fwCaret{0%,49%{opacity:1}50%,100%{opacity:0}}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* Untere Leiste — nur auf dem Handy. Desktop bleibt unveraendert. */
#fw-bottom{display:none}
@media (max-width: 760px){
  /* Die vier Ziele wandern nach unten, damit die Kopfzeile bei 375px nicht
     mehr seitlich scrollen muss (Jay 31.7.). */
  #fw-header .fw-topdest{display:none!important}
  #fw-bottom{display:block;position:fixed;left:0;right:0;bottom:0;z-index:48;
    border-top:1px solid var(--line);backdrop-filter:blur(16px);
    background:color-mix(in oklab,var(--bg) 92%,transparent);
    padding-bottom:env(safe-area-inset-bottom)}
  /* Jede Seite hat schon eine eigene Leiste unten (Kategorien, Werkzeuge,
     Dialog, 3D-Regler). Die behalten ihre Aufgabe und ruecken eine Etage
     hoch, statt sich mit der Navigation zu ueberdecken. */
  #catbar,#toolbar,#dialogbar,#bar{bottom:calc(53px + env(safe-area-inset-bottom))!important}
  /* Platz fuer beide Leisten, damit nichts verdeckt bleibt (Homebar eingerechnet). */
  #fw-footer{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
}

/* Handy: Tippflaechen auf mindestens 44px, damit in der dichten Kopfzeile
   nichts danebengeht (Jay 31.7. „fuers Handy optimieren"). Die Regeln muessen
   die Inline-Stile der erzeugten Elemente ueberstimmen. */
@media (max-width: 760px){
  /* Enger setzen, damit die verbliebenen Elemente ohne Seitwaerts-Scrollen passen. */
  #fw-header > div{padding-left:10px!important;padding-right:10px!important;gap:4px!important}
  #fw-header a,#fw-header button{min-height:44px!important}
  #fw-header button[data-menu]{width:44px!important}
  /* Der Fortschritts-Zaehler weicht auf dem Handy — er steht auch auf der
     Uebersicht und wuerde hier die Einstellungs-Knoepfe hinausdruecken. */
  #fw-header .fw-prog{display:none!important}
  #langbar button{min-height:44px!important}
  #player summary{min-height:52px}
}

/* Mobile-Weiche (Jay 31.7.): 3Dsicht auf kleinen Touch-Geräten aus der Navigation nehmen — die Seite selbst zeigt dort nur noch den Hinweis mit Weg zur Übersicht. */
@media (max-width: 760px){
  a[href="serie-3d.html"]{display:none!important}
}

/* Mobile-Weiche (Jay 1.8.): Ansichts-Modus auf dem Handy nur Blog+Scroll —
   Schreiben/Kino/Bilder/Video bleiben Grossbildschirm vorbehalten (pages/folge.js
   faellt bei gesperrtem Modus zusaetzlich sauber auf Blog zurueck). */
@media (max-width: 760px){
  #toolbar .fw-mode-adv{display:none!important}
}

/* Wortmarke: helle Fassung auf hellem Grund, dunkle auf dunklem.
   data-dark setzt applyTheme() in support.js. */
:root[data-dark="1"] .fw-marke-hell{display:none!important}
:root[data-dark="1"] .fw-marke-dunkel{display:block!important}