/* Erzeugt von hole_schriften.py - nicht von Hand aendern. */
@font-face{font-family:"ABeeZee";src:url("/assets/fonts/abeezee-1.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"ABeeZee";src:url("/assets/fonts/abeezee-2.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"ABeeZee";src:url("/assets/fonts/abeezee-it-1.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"ABeeZee";src:url("/assets/fonts/abeezee-it-2.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Edu AU VIC WA NT Pre";src:url("/assets/fonts/edupre-1.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Edu AU VIC WA NT Pre";src:url("/assets/fonts/edupre-2.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ==========================================================================
   nimmermued.com
   Eine Fläche, ein Blatt, eine Tinte, fünf Marken.
   ========================================================================== */

/* Die @font-face-Bloecke stehen in src/fonts.css und werden beim Bauen
   vorangestellt (erzeugt von hole_schriften.py). */

/* ------------------------------------------------------------------ Token */
:root{
  --ground:#94A1BC; --ground-2:#8B98B4;
  --sheet:#F0ECE3;  --sheet-2:#E7E2D6;
  --ink:#171C2A;    --ink-soft:#4C5468;
  --on-ground:#171C2A; --on-ground-soft:#2E3648;
  --edge:rgba(23,28,42,.16); --rule:#CFC8B8;
  --korall:#E8433A; --tuerkis:#0E8478; --violett:#6A70B0; --gelb:#D9AE3C;
  --akzent:var(--korall);
  --shadow:0 1px 0 rgba(23,28,42,.10), 0 14px 34px -22px rgba(23,28,42,.55);
  /* Edu AU VIC WA NT Pre steht in --lesen hinten drin, weil ABeeZee das
     ė in "Monė Cepelinai" nicht hat. */
  --titel:"Edu AU VIC WA NT Pre","ABeeZee",system-ui,sans-serif;
  --lesen:"ABeeZee","Edu AU VIC WA NT Pre",Verdana,sans-serif;
  --sans:"ABeeZee","Edu AU VIC WA NT Pre",Verdana,sans-serif;
  --t-xs:.75rem; --t-sm:.8125rem; --t-md:.9375rem; --t-base:1.0625rem;
  --t-lg:1.1875rem; --t-xl:1.375rem;
  --t-2xl:clamp(1.5rem,2.4vw,2rem);
  --t-3xl:clamp(1.9rem,4vw,3rem);
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#222839; --ground-2:#1D2231; --sheet:#2C3346; --sheet-2:#333B50;
    --ink:#E9E5DB; --ink-soft:#AEB5C5;
    --on-ground:#E4E7EF; --on-ground-soft:#AFB7C8;
    --edge:rgba(233,229,219,.16); --rule:#454E66;
    --korall:#FF6355; --tuerkis:#37BCAD; --violett:#9DA3E0; --gelb:#EBC96C;
    --shadow:0 1px 0 rgba(0,0,0,.35), 0 16px 38px -24px rgba(0,0,0,.9);
  }
}

/* ------------------------------------------------------------- Grundlagen */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--on-ground);
  font-family:var(--lesen);font-size:var(--t-base);line-height:1.62;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
h1,h2,h3{font-family:var(--titel);font-weight:400;line-height:1.15;margin:0;text-wrap:balance}
p{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2.5px solid var(--korall);outline-offset:4px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--sheet);color:var(--ink);padding:.6rem 1rem;z-index:99}
.skip:focus{left:.5rem;top:.5rem}
main{flex:1}

/* ------------------------------------------------------------ Kopf / Fuss */
.kopf{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;padding:1rem clamp(1rem,4vw,2.5rem) .8rem}
.wortmarke{font-family:var(--sans);font-size:var(--t-md);letter-spacing:.02em;color:var(--on-ground)}
.wortmarke b{font-weight:500}
.wortmarke i{font-style:normal;color:var(--korall)}
a.wortmarke:hover b{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.kopf .bereich{font-family:var(--sans);font-size:var(--t-sm);color:var(--on-ground-soft);letter-spacing:.06em;text-transform:uppercase}

.fuss{padding:2.5rem clamp(1rem,4vw,2.5rem) 2rem;border-top:1px solid var(--edge);margin-top:3rem}
.fuss-bereiche{display:flex;gap:clamp(1.2rem,4vw,3rem);flex-wrap:wrap;align-items:flex-end;list-style:none;margin:0 0 1.8rem;padding:0}
.fuss-bereiche a,.fuss-bereiche span.aktuell{display:flex;flex-direction:column;gap:.45rem;max-width:11rem}
.fuss-bereiche img{width:2.9rem;height:auto;object-fit:contain}
.fuss-bereiche li.hoch img{width:2.1rem}
.fuss-bereiche em{font-style:normal;font-family:var(--sans);font-size:var(--t-xs);line-height:1.35;color:var(--on-ground-soft)}
.fuss-bereiche a:hover em,.fuss-bereiche a:focus-visible em{color:var(--on-ground)}
.fuss-bereiche span.aktuell{opacity:.45}
.fuss-recht{font-family:var(--sans);font-size:var(--t-xs);color:var(--on-ground-soft);letter-spacing:.03em}
.fuss-recht a{border-bottom:1px solid var(--edge)}
.fuss-recht a:hover{border-bottom-color:currentColor}

/* -------------------------------------------------------------- Startseite */
.buehne{position:relative;min-height:clamp(30rem,82vh,54rem);padding:0 clamp(1rem,4vw,2.5rem);width:100%;max-width:82rem;margin:0 auto}
.zeichen{display:block;position:absolute;text-align:left;max-width:15rem}
.zeichen img{margin:0 auto 0 0;filter:drop-shadow(0 8px 18px rgba(23,28,42,.18))}
.zeichen .titel{display:block;margin-top:.7rem;font-family:var(--titel);font-size:var(--t-md);line-height:1.3;color:var(--on-ground)}
.zeichen .autor{display:block;margin-top:.15rem;font-family:var(--sans);font-size:var(--t-xs);letter-spacing:.05em;color:var(--on-ground-soft)}
.zeichen .strich{display:block;height:5px;width:0;margin-top:.5rem;background:var(--akzent);border-radius:60% 40% 55% 45%/60% 55% 45% 40%;transition:width .18s ease-out}
.zeichen:hover .strich,.zeichen:focus-visible .strich{width:3.4rem}
.zeichen:active img{transform:translateY(1px)}
@media (prefers-reduced-motion:reduce){.zeichen .strich{transition:none}}

@media (min-width:900px){
  /* Nimmermüd steht in der Mitte, die drei anderen liegen darum herum. */
  .z-nimmer {left:50%; top:50%; transform:translate(-50%,-50%); --akzent:var(--gelb)}
  .z-drbear {left:4%;  top:6%;    --akzent:var(--tuerkis)}
  .z-ip     {right:4%; top:26%;   --akzent:var(--violett)}
  .z-manzoni{left:12%; bottom:8%; --akzent:var(--korall)}
  .z-drbear  img{width:clamp(7.5rem,14vw,12rem)}
  .z-nimmer  img{width:clamp(9rem,16vw,14rem)}
  .z-ip      img{width:clamp(7rem,12vw,11rem)}
  .z-manzoni img{width:clamp(5.5rem,8vw,7.5rem)}
}
@media (max-width:899.98px){
  .buehne{display:flex;flex-direction:column;gap:clamp(2rem,7vw,3.5rem);padding-top:1rem;padding-bottom:2rem;min-height:0}
  .zeichen{position:static;max-width:min(20rem,86%)}
  .z-drbear {--akzent:var(--tuerkis);align-self:flex-start}
  .z-nimmer {--akzent:var(--gelb);align-self:flex-end}
  .z-ip     {--akzent:var(--violett);align-self:flex-start;margin-left:8%}
  .z-manzoni{--akzent:var(--korall);align-self:flex-end;margin-right:6%}
  .z-drbear  img{width:min(13rem,58vw)}
  .z-nimmer  img{width:min(9rem,40vw)}
  .z-ip      img{width:min(8.5rem,38vw)}
  .z-manzoni img{width:min(7rem,32vw)}
}

/* --------------------------------------------------------------- Buchseite */
.seite{padding:0 clamp(1rem,4vw,2.5rem);max-width:70rem;margin:0 auto;width:100%}
.anschlag{display:flex;flex-direction:column;gap:1.1rem;padding:clamp(1.5rem,5vh,3.5rem) 0 clamp(1.5rem,4vh,2.5rem)}
.anschlag img{width:clamp(6rem,14vw,11rem)}
.anschlag img.hoch{width:clamp(8rem,20vw,15rem)}
.anschlag h1{font-size:var(--t-3xl);letter-spacing:-.01em;max-width:18ch}
.anschlag .unter{font-size:var(--t-lg);color:var(--on-ground-soft);max-width:40ch}
.anschlag .autor{font-family:var(--sans);font-size:var(--t-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--on-ground-soft)}
.auftakt{font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.5;max-width:34ch;margin:0 0 clamp(1.8rem,5vh,3rem)}

.tafel{margin:0 0 clamp(1.8rem,5vh,3rem)}
.tafel img{width:100%;max-width:52rem;filter:drop-shadow(0 14px 30px rgba(23,28,42,.22))}
.tafel.schmal img{max-width:22rem;box-shadow:0 1px 0 rgba(23,28,42,.15)}
.tafel figcaption{font-family:var(--sans);font-size:var(--t-xs);color:var(--on-ground-soft);margin-top:.7rem;letter-spacing:.03em}

.bogen{background:var(--sheet);color:var(--ink);padding:clamp(1.3rem,3.4vw,2.4rem);box-shadow:var(--shadow);border:1px solid var(--edge);margin-bottom:1.2rem}
.bogen h2{font-size:var(--t-xl);margin-bottom:.8rem}
.bogen p{max-width:62ch}
.bogen p + p{margin-top:.8rem}
.marke{font-family:var(--sans);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:.8rem}
dl.steck{margin:0;display:grid;grid-template-columns:1fr;gap:.1rem .9rem}
@media (min-width:600px){dl.steck{grid-template-columns:10rem 1fr}}
dl.steck dt{font-family:var(--sans);font-size:var(--t-sm);color:var(--ink-soft);padding-top:.2em}
dl.steck dd{margin:0 0 .5rem}
.hinweis{font-family:var(--sans);font-size:var(--t-sm);line-height:1.55;color:var(--ink-soft);border-left:3px solid var(--gelb);padding-left:.85rem;max-width:60ch}
.platzhalter{color:var(--korall);font-family:var(--sans);font-size:var(--t-sm)}
.recht{max-width:44rem}
.recht h1{font-size:var(--t-2xl);margin-bottom:1.2rem}

/* --------------------------------------------------------- Werkverzeichnis */
.werk-summe{font-family:var(--sans);font-size:var(--t-sm);color:var(--ink-soft);margin-bottom:.2rem}
.werk-jahrzehnt{font-family:var(--sans);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);padding:1.5rem 0 .3rem}
.werk-zeile{display:grid;grid-template-columns:4.2rem minmax(0,1fr) auto;gap:.3rem 1rem;align-items:baseline;padding:.75rem 0;border-top:1px solid var(--rule)}
.werk-zeile .jahr{font-family:var(--sans);font-size:var(--t-sm);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.werk-zeile .it{display:block;font-family:var(--sans);font-style:italic;font-size:var(--t-lg);line-height:1.3}
.werk-zeile .de{display:block;font-size:var(--t-md);color:var(--ink-soft);margin-top:.2rem}
.werk-zeile .ohne{display:block;font-family:var(--sans);font-size:var(--t-sm);color:var(--ink-soft);opacity:.7;margin-top:.2rem}
.werk-zeile .marken{display:flex;gap:.35rem;align-items:center}
.tag{display:inline-block;font-family:var(--sans);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:.22rem .5rem;border:1px solid currentColor;color:var(--ink-soft);white-space:nowrap}
@media (max-width:620px){
  .werk-zeile{grid-template-columns:1fr;gap:.1rem}
  .werk-zeile .marken{margin-top:.45rem}
}

/* ----------------------------------------------------------------- Lesen */
.leseraum{margin:0 0 1.2rem}
.leseraum h2{font-size:var(--t-xl);margin-bottom:.3rem}
.leseraum .unterzeile{font-family:var(--sans);font-size:var(--t-sm);color:var(--on-ground-soft);margin-bottom:1rem;max-width:60ch}

.baende{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1rem;padding:0;list-style:none}
.baende a,.baende button{
  display:inline-block;font-family:var(--sans);font-size:var(--t-sm);
  padding:.4rem .8rem;border:1px solid var(--edge);color:var(--on-ground-soft);
}
.baende a:hover,.baende button:hover{color:var(--on-ground)}
.baende [aria-pressed="true"],.baende [aria-current="true"]{background:var(--sheet);color:var(--ink);border-color:var(--sheet)}

.reader{background:var(--ground-2);border:1px solid var(--edge);padding:clamp(.8rem,2.5vw,1.6rem)}
.reader-buehne{display:flex;justify-content:center;align-items:flex-start;overflow:auto;max-height:min(78vh,52rem);min-height:14rem}
.reader-blatt{position:relative;background:var(--sheet);box-shadow:var(--shadow);flex:none;line-height:0}
.reader-blatt canvas{display:block;background:#fff}

/* Textebene von PDF.js: unsichtbarer, aber markierbarer und vorlesbarer Text */
.textLayer{
  position:absolute;inset:0;overflow:hidden;line-height:1;
  text-size-adjust:none;forced-color-adjust:none;transform-origin:0 0;
  opacity:1;caret-color:CanvasText;
}
.textLayer span,.textLayer br{color:transparent;position:absolute;white-space:pre;cursor:text;transform-origin:0 0}
.textLayer span.markedContent{top:0;height:0}
.textLayer ::selection{background:rgba(232,67,58,.32)}
.textLayer br::selection{background:transparent}
.textLayer .endOfContent{position:absolute;inset:100% 0 0;display:block;cursor:default;user-select:none}
.textLayer.aktiv .endOfContent{top:0}

.reader-leiste{display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;margin-top:.9rem;font-family:var(--sans);font-size:var(--t-sm);color:var(--on-ground)}
.reader-leiste button{border:1px solid var(--edge);padding:.32rem .6rem;min-width:2.2rem;line-height:1.4}
.reader-leiste button:hover:not(:disabled){border-color:currentColor}
.reader-leiste button:disabled{opacity:.35;cursor:default}
.reader-leiste .stand{font-variant-numeric:tabular-nums;min-width:8.5rem;text-align:center}
.reader-leiste .trenner{opacity:.4}
.reader-leiste a.pdf{font-size:var(--t-xs);color:var(--on-ground-soft);border-bottom:1px solid var(--edge)}
.reader-leiste a.pdf:hover{color:var(--on-ground)}
.reader-meldung{font-family:var(--sans);font-size:var(--t-sm);color:var(--on-ground-soft);text-align:center;padding:3rem 1rem;max-width:44ch;margin:0 auto}
.reader-meldung a{border-bottom:1px solid currentColor}

.reader.vollbild{position:fixed;inset:0;z-index:60;background:var(--ground);display:flex;flex-direction:column;justify-content:center;padding:clamp(.6rem,2vw,1.5rem);border:0}
.reader.vollbild .reader-buehne{max-height:calc(100vh - 6.5rem)}
body.gesperrt{overflow:hidden}

@media (max-width:640px){
  .reader-leiste{gap:.4rem}
  .reader-leiste .stand{min-width:7rem}
  .reader-leiste .weg-mobil{display:none}
}

/* Ohne JavaScript bleibt die Leseprobe erreichbar. */
.ohne-js{margin-top:1rem}

/* ------------------------------------------------- Abstandsklassen
   Statt style-Attributen, damit die Content-Security-Policy ohne
   'unsafe-inline' bei style-src auskommt. */
.mt-0{margin-top:0}
.mt-s{margin-top:.8rem}
.mt-m{margin-top:1.2rem}
.mt-l{margin-top:1.4rem}
.mt-xl{margin-top:1.6rem}
.oben{margin-top:2rem}
.link-akzent{border-bottom:2px solid var(--korall)}
.werk-zeile .notiz{display:block;font-family:var(--sans);font-size:var(--t-sm);color:var(--ink-soft);margin-top:.35rem;max-width:56ch;line-height:1.45}

/* ==========================================================================
   bearitales.com — nur die Abweichungen von der gemeinsamen site.css.
   Die Grundfläche, die Schriften und das Blatt sind dieselben wie bei
   nimmermued.com. Hier stehen ausschliesslich die Stellen, an denen sich
   diese Seite unterscheidet: ein einziges Zeichen statt vier, und Türkis
   als durchgehende Akzentfarbe.
   ========================================================================== */

:root{ --akzent:var(--tuerkis) }

/* Der Punkt in der Wortmarke traegt die Akzentfarbe der Seite. */
.wortmarke i{ color:var(--tuerkis) }

/* ------------------------------------------------- Startseite, ein Zeichen */
/* .buehne verteilt vier Marken auf der Flaeche. Hier steht nur eine, und die
   gehoert in die Mitte - senkrecht wie waagerecht, auf jeder Breite. */
.buehne-eins{
  display:flex;align-items:center;justify-content:center;
  min-height:clamp(26rem,74vh,46rem);
  padding:clamp(1.5rem,5vh,3rem) clamp(1rem,4vw,2.5rem);
  width:100%;max-width:82rem;margin:0 auto;
}
.buehne-eins .zeichen{
  position:static;max-width:26rem;text-align:center;
}
.buehne-eins .zeichen img{
  width:clamp(11rem,26vw,20rem);margin:0 auto;
}
.buehne-eins .zeichen .titel{ margin-top:1.1rem }
/* Der Strich waechst beim Ueberfahren aus der Mitte heraus. */
.buehne-eins .zeichen .strich{ margin-left:auto;margin-right:auto }