@import url("schriften.css");

/* ==========================================================================
   Einbeingang - Ausgabe
   Die Seite ist ein Heft: Titelseite in Flaschengruen, eine Doppelseite auf
   Papier, dahinter das Verzeichnis. Didone fuer alles Gesetzte, Grotesk fuer
   alles Funktionale, Gold nur dort, wo im Druck Folie liegen wuerde.
   ========================================================================== */

:root{
  /* Druckfarben */
  --tinte:#07120D;
  --flasche:#0B2A1D;
  --flasche-2:#0E3524;
  --gruen:#00A465;
  --gruen-hell:#5FE0AB;
  --gold:#C9A44C;
  --gold-hell:#E8CE8A;
  --papier:#EDE7DA;
  --papier-2:#DED5C2;
  --papier-tinte:#151F19;
  --papier-tinte-2:#414C43;
  --rot:#E8455F;

  /* Auf dunklem Grund */
  --auf-dunkel:#F2EFE7;
  --auf-dunkel-2:#B9C6BE;
  --auf-dunkel-3:#95A69B;
  --linie:rgba(242,239,231,.16);
  --linie-fein:rgba(242,239,231,.09);

  --satz:'Bodoni Moda','Didot','Bodoni MT',Georgia,serif;
  --grotesk:'Archivo',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --spalte:74rem;
  --ease:cubic-bezier(.22,1,.36,1);
  --papier-korn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}

*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  background:var(--tinte);
  color:var(--auf-dunkel);
  font-family:var(--grotesk);
  font-size:1rem;
  line-height:1.62;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}

/* --- Oberflaechen, die der Browser sonst selbst faerbt --- */
::selection{background:var(--gold);color:var(--tinte);}
:focus-visible{outline:2px solid var(--gold-hell);outline-offset:3px;border-radius:2px;}
html{scrollbar-color:var(--gold) var(--tinte);scrollbar-width:thin;caret-color:var(--gold);}
::-webkit-scrollbar{width:11px;}
::-webkit-scrollbar-track{background:var(--tinte);}
::-webkit-scrollbar-thumb{background:#2C4A3B;border:3px solid var(--tinte);border-radius:999px;}
::-webkit-scrollbar-thumb:hover{background:var(--gold);}

.blatt{max-width:var(--spalte);margin:0 auto;padding-inline:clamp(1.15rem,4.5vw,3rem);}
.nur-fuer-screenreader{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ==========================================================================
   1. Titelseite
   ========================================================================== */

.titelseite{
  position:relative;
  background:
    radial-gradient(120% 85% at 78% 8%, rgba(0,164,101,.20), transparent 58%),
    linear-gradient(178deg,var(--flasche-2) 0%,var(--flasche) 46%,var(--tinte) 100%);
  padding-bottom:clamp(1.4rem,2.8vw,2rem);
  overflow:hidden;
}
.titelseite::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--papier-korn);opacity:.055;mix-blend-mode:overlay;
}

/* Heftkopf: als SVG gesetzt, damit er auf jedem Schirm exakt randbuendig steht */
.heftkopf{padding-top:clamp(1.15rem,2.4vw,1.8rem);position:relative;z-index:3;}
.heftkopf-name{
  display:block;width:100%;max-width:min(100%,54rem);height:auto;
  overflow:visible;
}
.heftkopf-name text{
  font-family:var(--satz);
  font-variation-settings:'opsz' 40;
  font-weight:800;
  font-size:159px;
  fill:var(--auf-dunkel);
}
.heftkopf-zeile{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:clamp(.1rem,.4vw,.3rem);padding-top:.6rem;
  border-top:1px solid var(--linie);
  font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--auf-dunkel-3);
}
.heftkopf-zeile span{white-space:nowrap;}

/* Live-Stoerer: liegt schraeg auf dem Heft wie ein Aufkleber */
.stoerer{
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--rot);color:#fff;
  font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  padding:.4rem .8rem;border-radius:999px;
  box-shadow:0 6px 20px rgba(232,69,95,.34);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.stoerer:hover{transform:translateY(-2px) rotate(-1.5deg);box-shadow:0 10px 26px rgba(232,69,95,.45);}
.stoerer .puls{width:7px;height:7px;border-radius:50%;background:#fff;animation:puls 1.7s infinite;}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(255,255,255,.75);}70%{box-shadow:0 0 0 8px rgba(255,255,255,0);}100%{box-shadow:0 0 0 0 rgba(255,255,255,0);}}

/* Aufmacher: Portraet klein links, Name rechts daneben */
.aufmacher{
  position:relative;z-index:2;
  margin-top:clamp(1.1rem,2.6vw,1.9rem);
  display:grid;
  grid-template-columns:minmax(0,12.5rem) minmax(0,1fr);
  gap:clamp(1.3rem,3.4vw,2.9rem);
  align-items:center;
}
.portraet{
  position:relative;
  aspect-ratio:4 / 5;
  background:linear-gradient(200deg,#17593D 0%,#0A2418 58%,#050D09 100%);
  overflow:hidden;
  border-radius:2px;
  box-shadow:0 26px 60px -24px rgba(0,0,0,.9);
}
.portraet img{
  width:100%;height:100%;object-fit:cover;object-position:50% 18%;
  filter:grayscale(1) contrast(1.3) brightness(.86);
  mix-blend-mode:luminosity;opacity:.95;
}
.portraet::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(201,164,76,.16) 0%,transparent 46%),
             linear-gradient(0deg,rgba(5,13,9,.72) 0%,transparent 46%);
}
.coverzeile{position:relative;z-index:2;}
.coverzeile h1{
  font-family:var(--satz);
  font-variation-settings:'opsz' 28;
  font-weight:800;
  font-size:clamp(2.1rem,6.4vw,4.9rem);
  line-height:.93;
  letter-spacing:-.03em;
  text-wrap:balance;
}
.coverzeile h1 .nach{
  display:block;font-style:italic;font-weight:500;
  color:var(--gold-hell);
  padding-left:.09em;
}
.coverzeile .rolle{
  display:block;
  margin-top:clamp(.7rem,1.6vw,1.1rem);
  font-family:var(--satz);font-style:italic;
  font-variation-settings:'opsz' 12;
  font-weight:500;
  font-size:clamp(1.02rem,2.1vw,1.42rem);
  color:var(--auf-dunkel-2);
}
.coverzeile .rolle::before{
  content:"";display:block;width:3.4rem;height:2px;margin-bottom:.85rem;
  background:linear-gradient(90deg,var(--gold),transparent);
}
.coverzeile .anriss{
  max-width:44ch;margin-top:clamp(.7rem,1.6vw,1rem);
  font-size:clamp(.9rem,1.25vw,.98rem);line-height:1.62;font-weight:350;
  color:var(--auf-dunkel-2);
}

/* ==========================================================================
   2. Papierseite: die Geschichte
   ========================================================================== */

.papierseite{
  position:relative;
  background:var(--papier);
  color:var(--papier-tinte);
  padding-block:clamp(2.3rem,5vw,3.6rem);
}
.papierseite::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--papier-korn);opacity:.34;mix-blend-mode:multiply;
}
.papierseite > *{position:relative;}
.papierseite .satzspiegel{
  display:grid;
  grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  gap:clamp(1.4rem,4vw,3.4rem);
  align-items:start;
}
.marginalie{
  font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--papier-tinte-2);
  padding-top:.6rem;
  border-top:2px solid var(--papier-tinte);
}
.marginalie small{
  display:block;margin-top:.5rem;
  font-size:.74rem;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.55;
}
.fliesstext{max-width:66ch;}
.fliesstext h2{
  font-family:var(--satz);
  font-variation-settings:'opsz' 18;
  font-weight:800;
  font-size:clamp(1.9rem,4.4vw,3.1rem);
  line-height:1.04;letter-spacing:-.025em;
  margin-bottom:clamp(1.1rem,2.4vw,1.7rem);
  text-wrap:balance;
}
.fliesstext h2 em{font-style:italic;font-weight:500;color:#1F6B4A;}
.fliesstext p{
  font-size:clamp(1rem,1.35vw,1.1rem);
  line-height:1.78;font-weight:380;
  color:#26302A;
}
.fliesstext p + p{margin-top:1.05em;}
.fliesstext .initial::first-letter{
  float:left;
  font-family:var(--satz);
  font-variation-settings:'opsz' 36;
  font-weight:800;
  font-size:4.1em;
  line-height:.82;
  padding:.06em .1em 0 0;
  color:#1F6B4A;
}
.zitat{
  margin-top:clamp(1.3rem,2.8vw,1.9rem);
  padding-left:clamp(1rem,2.5vw,1.6rem);
  border-left:1px solid rgba(21,31,25,.28);
  font-family:var(--satz);font-style:italic;
  font-variation-settings:'opsz' 14;
  font-weight:500;
  font-size:clamp(1.5rem,3.6vw,2.4rem);
  line-height:1.2;letter-spacing:-.02em;
  color:var(--papier-tinte);
  text-wrap:balance;
}
.signatur{
  display:block;margin-top:1rem;
  font-family:var(--grotesk);font-style:normal;
  font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--papier-tinte-2);
}

/* ==========================================================================
   3. Verzeichnis
   ========================================================================== */

.verzeichnis{
  background:var(--tinte);
  padding-block:clamp(1.6rem,3vw,2.4rem);
}
.verzeichnis-kopf{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  padding-bottom:1rem;margin-bottom:.4rem;
  border-bottom:1px solid var(--linie);
}
.verzeichnis-kopf h2{
  font-family:var(--satz);
  font-variation-settings:'opsz' 18;
  font-weight:800;
  font-size:clamp(1.7rem,4vw,2.7rem);
  line-height:1.02;letter-spacing:-.025em;
}
.verzeichnis-kopf h2 em{font-style:italic;font-weight:500;color:var(--gold-hell);}
.verzeichnis-kopf p{
  font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--auf-dunkel-3);
}

.eintrag{
  display:grid;
  grid-template-columns:auto minmax(0,auto) minmax(1.5rem,1fr) auto;
  align-items:center;
  gap:clamp(.85rem,1.8vw,1.4rem);
  padding-block:clamp(.85rem,1.7vw,1.15rem);
  border-bottom:1px solid var(--linie-fein);
  position:relative;
  transition:background .35s var(--ease);
}
/* Punktfuehrung wie im Inhaltsverzeichnis */
.eintrag .fuehrung{
  height:0;align-self:center;margin-top:.35rem;
  border-bottom:1px dotted rgba(242,239,231,.2);
  transition:border-color .35s var(--ease);
}
.eintrag:hover .fuehrung{border-color:rgba(201,164,76,.45);}
.eintrag::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:linear-gradient(90deg,var(--gold),rgba(201,164,76,0));
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.eintrag:hover::after,.eintrag:focus-visible::after{transform:scaleX(1);}
.eintrag:hover{background:linear-gradient(90deg,rgba(242,239,231,.045),transparent 62%);}

.eintrag .zeichen{
  width:2.6rem;height:2.6rem;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--auf-dunkel-2);
  border:1px solid var(--linie);
  border-radius:50%;
  transition:color .35s var(--ease),border-color .35s var(--ease),transform .45s var(--ease);
}
.eintrag:hover .zeichen{color:var(--gold-hell);border-color:rgba(201,164,76,.55);transform:rotate(-6deg);}
.eintrag .benennung{min-width:0;}
.eintrag .benennung b{
  display:block;
  font-family:var(--grotesk);
  font-weight:600;
  font-size:clamp(1.06rem,2.1vw,1.28rem);
  line-height:1.2;letter-spacing:-.005em;
  transition:transform .45s var(--ease),color .35s var(--ease);
}
.eintrag:hover .benennung b{transform:translateX(6px);}
.eintrag .benennung span{
  display:block;margin-top:.16rem;
  font-size:.8rem;font-weight:400;letter-spacing:.02em;
  color:var(--auf-dunkel-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:transform .45s var(--ease) .03s,color .35s var(--ease);
}
.eintrag:hover .benennung span{transform:translateX(6px);color:var(--auf-dunkel-2);}
.eintrag .weiter{
  display:flex;align-items:center;gap:.75rem;
  font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--auf-dunkel-3);
  transition:color .35s var(--ease);
}
.eintrag:hover .weiter{color:var(--gold-hell);}
.eintrag .weiter svg{transition:transform .45s var(--ease);}
.eintrag:hover .weiter svg{transform:translateX(5px);}

/* Aufmacher-Eintrag: erste Zeile bekommt das Gewicht eines Titelthemas */
.eintrag--erster{
  padding-block:clamp(1.1rem,2.3vw,1.6rem);
  border-bottom:1px solid var(--linie);
}
.eintrag--erster .zeichen{width:3.1rem;height:3.1rem;border-color:rgba(201,164,76,.4);color:var(--gold-hell);}
.eintrag--erster .benennung b{font-size:clamp(1.3rem,2.9vw,1.72rem);font-weight:700;}
.eintrag--erster .benennung span{font-size:.84rem;color:var(--auf-dunkel-2);}

.eintrag .live-punkt{
  display:inline-flex;align-items:center;gap:.4rem;
  color:var(--rot);font-weight:800;
}
.eintrag .live-punkt i{width:7px;height:7px;border-radius:50%;background:var(--rot);animation:puls 1.7s infinite;font-style:normal;}

/* ==========================================================================
   4. Kolophon
   ========================================================================== */

.kolophon{
  background:var(--tinte);
  border-top:1px solid var(--linie);
  padding-block:clamp(2.4rem,5vw,3.6rem);
}
.kolophon-satz{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:clamp(1.4rem,3vw,2.6rem);
  align-items:start;
}
.kolophon h3{
  font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--auf-dunkel-3);margin-bottom:.7rem;
}
.kolophon p,.kolophon a{font-size:.88rem;color:var(--auf-dunkel-2);line-height:1.75;}
.kolophon a{
  display:inline-block;
  border-bottom:1px solid rgba(242,239,231,.22);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.kolophon a:hover{color:var(--gold-hell);border-color:var(--gold);}
.kolophon .rechte{
  grid-column:1/-1;
  padding-top:1.4rem;margin-top:.4rem;
  border-top:1px solid var(--linie-fein);
  font-size:.72rem;color:var(--auf-dunkel-3);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.kolophon .rechte b{font-weight:500;}

/* ==========================================================================
   5. Rechtstexte
   ========================================================================== */

.dokument{background:var(--papier);color:var(--papier-tinte);min-height:100vh;position:relative;}
.dokument::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--papier-korn);opacity:.32;mix-blend-mode:multiply;
}
.dokument > *{position:relative;}
.dokument-kopf{
  padding-block:clamp(1.4rem,3vw,2.2rem);
  border-bottom:2px solid var(--papier-tinte);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.dokument-kopf .zurueck{
  font-family:var(--satz);font-weight:800;
  font-variation-settings:'opsz' 14;
  font-size:clamp(1.1rem,2.6vw,1.5rem);letter-spacing:-.02em;
  transition:color .3s var(--ease);
}
.dokument-kopf .zurueck:hover{color:#1F6B4A;}
.dokument-kopf nav{display:flex;gap:1.2rem;font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--papier-tinte-2);}
.dokument-kopf nav a{border-bottom:1px solid transparent;padding-bottom:2px;transition:.3s var(--ease);}
.dokument-kopf nav a:hover,.dokument-kopf nav a[aria-current]{color:var(--papier-tinte);border-color:var(--papier-tinte);}

.dokument-titel{
  font-family:var(--satz);
  font-variation-settings:'opsz' 26;
  font-weight:800;
  font-size:clamp(2.4rem,7vw,4.4rem);
  line-height:.98;letter-spacing:-.03em;
  margin-top:clamp(2rem,5vw,3.4rem);
}
.dokument-stand{
  font-family:var(--satz);font-style:italic;
  font-size:1rem;color:var(--papier-tinte-2);margin-top:.7rem;
  padding-bottom:clamp(1.6rem,3.5vw,2.4rem);
  border-bottom:1px solid rgba(21,31,25,.2);
}
.dokument-satz{
  display:grid;
  grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  gap:clamp(.6rem,3vw,3.4rem);
  padding-block:clamp(1.5rem,3vw,2.1rem);
  border-bottom:1px solid rgba(21,31,25,.14);
}
.dokument-satz:last-of-type{border-bottom:0;}
.dokument-satz > h2{
  font-family:var(--grotesk);
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--papier-tinte-2);
  padding-top:.35rem;
}
.dokument-satz .inhalt{max-width:68ch;}
.dokument-satz p{font-size:1rem;line-height:1.78;font-weight:380;color:#26302A;}
.dokument-satz p + p{margin-top:.8em;}
.dokument-satz ul{margin-top:.7rem;padding-left:1.1rem;}
.dokument-satz li{font-size:.98rem;line-height:1.8;font-weight:380;color:#26302A;}
.dokument-satz li::marker{color:#1F6B4A;}
.dokument-satz b{font-weight:600;}
.anschrift{
  font-family:var(--satz);
  font-variation-settings:'opsz' 8;
  font-size:1.1rem;line-height:1.7;
  padding:1rem 1.2rem;
  background:rgba(21,31,25,.045);
  border-left:1px solid #1F6B4A;
  margin-top:.3rem;
}
.dokument-fuss{
  padding-block:clamp(2rem,4vw,3rem);
  margin-top:clamp(1.5rem,3vw,2.4rem);
  border-top:2px solid var(--papier-tinte);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.78rem;color:var(--papier-tinte-2);
}
.dokument-fuss a{border-bottom:1px solid rgba(21,31,25,.3);transition:.3s var(--ease);}
.dokument-fuss a:hover{color:var(--papier-tinte);border-color:var(--papier-tinte);}

/* ==========================================================================
   6. Auftritt: einmal inszeniert, beim Laden der Titelseite
   ========================================================================== */

@media (prefers-reduced-motion:no-preference){
  .auftritt > *{
    opacity:0;
    transform:translateY(1.1rem);
    animation:heben .95s var(--ease) forwards;
  }
  .auftritt > *:nth-child(1){animation-delay:.05s;}
  .auftritt > *:nth-child(2){animation-delay:.13s;}
  .auftritt > *:nth-child(3){animation-delay:.21s;}
  .auftritt > *:nth-child(4){animation-delay:.29s;}
  .heftkopf-name{
    clip-path:inset(0 0 105% 0);
    animation:druck 1.05s var(--ease) .04s forwards;
  }
  .portraet{
    clip-path:inset(0 0 100% 0);
    animation:druck 1.25s var(--ease) .16s forwards;
  }
  .portraet img{transform:scale(1.09);animation:beruhigen 1.9s var(--ease) .16s forwards;}
  @keyframes heben{to{opacity:1;transform:none;}}
  @keyframes druck{to{clip-path:inset(0 0 0 0);}}
  @keyframes beruhigen{to{transform:scale(1);}}

  /* Verzeichniszeilen kommen einmal beim Erreichen, gestaffelt.
     Nur wenn das Skript laeuft: ohne JS bleiben die Links sichtbar. */
  .js-motion .eintrag{opacity:0;transform:translateY(.8rem);}
  .js-motion .eintrag.sichtbar{animation:heben .8s var(--ease) forwards;}
}

/* ==========================================================================
   7. Kleinere Schirme
   ========================================================================== */

@media (max-width:880px){
  .aufmacher{grid-template-columns:minmax(0,8.5rem) minmax(0,1fr);}
  .papierseite .satzspiegel,.dokument-satz{grid-template-columns:1fr;}
  .marginalie{border-top:0;padding-top:0;display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:baseline;}
  .marginalie small{margin-top:0;}
  .dokument-satz > h2{padding-top:0;}
}
@media (max-width:560px){
  .heftkopf-zeile{font-size:.6rem;letter-spacing:.14em;}
  .aufmacher{grid-template-columns:minmax(0,6.6rem) minmax(0,1fr);gap:.95rem;}
  .coverzeile .anriss{display:none;}
  .eintrag{grid-template-columns:auto minmax(0,1fr) auto;gap:.8rem;}
  .eintrag .fuehrung{display:none;}
  .eintrag .weiter span:not(.live-punkt){display:none;}
  .eintrag--erster .zeichen{width:2.7rem;height:2.7rem;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .blaettern .pfeil,.stoerer .puls,.live-punkt i{animation:none;}
}