/* =========================================================
   CEVI March — Design
   Hell, weich, modern. Schreibmaschinen-Mono für Titel und
   Beschriftungen, geometrische Sans für Fliesstext.
   Alles rund: keine harten Ecken, nirgends.
   ========================================================= */
:root{
  --paper:#f3e8d2;      /* Buchseite, warmes Beige */
  --paper-2:#eaddc2;
  --ink:#15161a;
  --ink-2:#4a4b52;
  --ink-3:#87888f;
  --rule:#ddcfb2;
  --rule-strong:#c9b893;

  --red:#d21a37;
  --red-soft:#fdeef0;
  --blue:#1d4f9e;

  --r-xs:10px;
  --r-sm:14px;
  --r:20px;
  --r-lg:28px;
  --r-xl:36px;
  --pill:999px;

  --pad:clamp(20px,5vw,64px);
  --maxw:1080px;      /* schmaler, wie ein Buchsatzspiegel */
  --measure:62ch;

  --font-mono:"JetBrains Mono",ui-monospace,"Courier New",monospace;
  --font-body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-hand:"Caveat","Segoe Script",cursive;
  --tape:rgba(226,214,180,.62);

  --ease:cubic-bezier(.2,.75,.25,1);
  --shadow:0 18px 50px -24px rgba(21,22,26,.28);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
[id]{scroll-margin-top:92px}
body{
  margin:0;color:var(--ink);
  /* Ruhige Buchseite: nur die Papierfaser auf beigem Grund. Die früheren
     Flecken und das Punktraster sind weg - und mit ihnen die festgepinnten
     Verläufe, die beim Scrollen jedes Mal neu gezeichnet werden mussten. */
  background:url("../img/papier.jpg") repeat 0 0/520px 520px var(--paper);
  background-blend-mode:multiply;
  font-family:var(--font-body);font-size:17px;line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ink);color:var(--paper)}

h1,h2,h3{
  font-family:var(--font-mono);font-weight:700;
  letter-spacing:-.045em;line-height:1.02;margin:0;text-wrap:balance;
}
h1{font-size:clamp(2.3rem,5.6vw,4.6rem);line-height:1}
h2{font-size:clamp(1.7rem,3.2vw,2.7rem)}
h3{font-size:clamp(1.15rem,1.7vw,1.45rem);letter-spacing:-.035em;line-height:1.2}
h4{
  margin:0;font-family:var(--font-mono);font-size:.7rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);
}
p{margin:0 0 1.15em}

.skip{position:fixed;left:-999px;top:10px;z-index:200;background:var(--ink);
  color:var(--paper);padding:10px 18px;border-radius:var(--pill)}
.skip:focus{left:10px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:var(--r-xs)}

/* Layout ---------------------------------------------------------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(54px,7vw,110px);position:relative}
.section--tight{padding-block:clamp(36px,4.5vw,72px)}

.eyebrow,.crumb{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 20px;
}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--red);flex:0 0 auto}
.crumb{display:block}
.lead{font-size:clamp(1.1rem,1.8vw,1.4rem);line-height:1.5;color:var(--ink-2);max-width:44ch}
.muted{color:var(--ink-2)}

/* Kopfleiste ------------------------------------------------------ */
/* Der Hintergrund der Leiste liegt als eigene Schicht darueber, damit
   die Reiter dahinter stecken koennen - genau wie die Lesezeichen
   hinter der Buchseite. Sichtbar ist von ihnen nur, was unten
   herausschaut. */
.nav{position:sticky;top:0;z-index:100;background:transparent}
.nav::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:var(--paper);border-bottom:1px solid var(--rule)
}
.nav__inner{max-width:var(--maxw);margin-inline:auto;padding:10px var(--pad);
  display:flex;align-items:center;gap:22px;min-height:64px;
  /* Ueber dem Fortschrittsbalken: der Strich laeuft hinter den Bannern
     durch, nicht darueber. */
  position:relative;z-index:4}
.nav__progress{position:relative;z-index:3;
  height:2px;border-radius:var(--pill);background:var(--ink);width:0%;transition:width .1s linear}

.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
/* Das Zeichen im Kopf ist dasselbe wie auf dem Deckel - dort allerdings
   ohne Lederstruktur, es liegt ja auf Papier. */
.brand__zeichen{
  display:block;width:32px;height:32px;flex:0 0 auto;
  background:url("../img/logo-farbe.png") no-repeat center/contain
}
.foot .brand__zeichen{width:40px;height:40px}
.brand__txt{font-family:var(--font-mono);font-size:1.02rem;font-weight:700;letter-spacing:-.05em}
.brand__txt em{font-style:normal;font-weight:400;color:var(--ink-3)}

/* Die Kapitel oben sind dieselben Reiter wie die Lesezeichen im Buch:
   gleiche Farben, gleiche Form. Sie stecken hinter der Leiste und
   schauen unten heraus. Das ausgewaehlte faehrt weiter heraus. */
/* Die Banner beginnen an der Oberkante der Leiste, gleich neben dem
   Zeichen, und ragen unten heraus. Damit sie die Leiste nicht hoeher
   machen, sind die Aussenabstaende negativ. */
.nav__links{
  display:flex;align-items:flex-start;
  gap:clamp(5px,.7vw,10px);
  margin-left:clamp(10px,2vw,28px);min-width:0;overflow:visible;
  /* Feste Hoehe: die Banner duerfen daraus herausragen, ohne dass die
     Leiste mitwaechst. Sonst ruckelt beim Ausfahren die ganze Seite. */
  height:44px
}
.nav__links a{
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;height:var(--reiter-h,48px);margin-top:-10px;
  box-sizing:border-box;
  color:#fdf6e6;background:var(--ink);
  border-radius:0 0 7px 7px;
  padding:0 16px;line-height:1;
  font-family:var(--font-mono);font-size:.68rem;
  font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 6px 12px -4px rgba(0,0,0,.4);
  transition:height .3s var(--ease),filter .3s
}
.nav__links a:hover{color:#fdf6e6;--reiter-h:54px;filter:brightness(1.12)}
.nav__links a:nth-child(2){background:linear-gradient(180deg,#e0254a,#b3122f)}
.nav__links a:nth-child(3){background:linear-gradient(180deg,#2a62b8,#164384)}
.nav__links a:nth-child(4){background:linear-gradient(180deg,#c9a961,#9a7d3c)}
.nav__links a:nth-child(5){background:linear-gradient(180deg,#6f7a41,#4e562c)}
.nav__links a:nth-child(6){background:linear-gradient(180deg,#a85a2c,#7d3f1c)}
.nav__links a:nth-child(7){background:linear-gradient(180deg,#3a3630,#22201c)}
.nav__links a.is-active,
.nav__links a.is-active:hover{
  /* Ausgezogen, nicht verschoben: oben bleibt der Banner an der
     Leistenkante, unten faehrt er weiter heraus. */
  color:#fff;--reiter-h:72px;
  box-shadow:0 9px 16px -5px rgba(0,0,0,.45)
}

/* Startseite: solange das Buch zu ist, braucht es die Kapitel oben nicht
   - sie stecken ja als Lesezeichen im Buch. Erst beim Hineinzoomen
   wandern sie nach oben. Zeichen und "Schnuppern" bleiben immer da.
   Versteckt wird nur, wenn das Buch wirklich laeuft (Klasse von
   site.js) - ohne Skript bleiben die Kapitel normal erreichbar. */
.startseite.kapitel-im-buch .nav__links{
  opacity:0;translate:0 -10px;pointer-events:none;
  transition:opacity .35s var(--ease),translate .35s var(--ease)
}
.startseite.kapitel-im-buch.ist-gezoomt .nav__links{opacity:1;translate:0 0;pointer-events:auto}

.nav__actions{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-left:auto}
.nav__cta{
  display:inline-flex;align-items:center;padding:11px 20px;border-radius:var(--pill);
  background:var(--ink);color:var(--paper);font-family:var(--font-mono);
  font-size:.68rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;transition:transform .25s var(--ease)
}
.nav__cta:hover{transform:translateY(-1px)}
@media(max-width:520px){.nav__cta{padding:10px 14px;font-size:.62rem}}
.burger{display:none;width:42px;height:42px;border-radius:var(--pill);
  border:1px solid var(--rule-strong);align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{display:block;width:15px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .3s var(--ease)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.drawer{position:fixed;inset:65px 0 0;z-index:99;background:var(--paper);
  padding:18px var(--pad) 40px;overflow:auto;animation:fade .2s var(--ease)}
.drawer__nav{display:flex;flex-direction:column;gap:6px;max-width:var(--maxw);margin-inline:auto}
.drawer__nav a{
  padding:15px 20px;border-radius:var(--r);background:var(--paper-2);
  font-family:var(--font-mono);font-size:1.05rem;font-weight:500;letter-spacing:-.03em;color:var(--ink)
}
.drawer__nav a.is-active{background:var(--ink);color:var(--paper)}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* Schaltflächen --------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:var(--pill);
  font-family:var(--font-mono);font-size:.74rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  transition:transform .25s var(--ease),background .2s,color .2s,border-color .2s
}
.btn:hover{transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--sm{padding:10px 18px;font-size:.68rem}
.btn--lg{padding:17px 32px;font-size:.78rem}
.btn--block{width:100%;justify-content:center}
.btn--primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--light{background:var(--paper);color:var(--ink);border-color:var(--paper)}

.arrow{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);
  font-size:.74rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  padding:9px 16px;border-radius:var(--pill);background:var(--paper-2);transition:.25s var(--ease)
}
.arrow::after{content:"→";transition:transform .3s var(--ease)}
.arrow:hover{background:var(--ink);color:var(--paper)}
.arrow:hover::after{transform:translateX(4px)}

/* Startseite: das Tagebuch ----------------------------------------- */
/*  Drei Phasen, jede mit eigener Zahl von 0 bis 1:
      --p  der Deckel klappt auf
      --q  Seite 1 (Stufen) wird umgeblättert
      --z  die Kamera zoomt auf Seite 2, bis sie den Bildschirm füllt
    site.js schreibt die Werte beim Scrollen, die Bewegung steht hier.
    Ohne JavaScript ist der Deckel weg, Seite 1 liegt offen da und
    Seite 2 folgt ganz normal darunter.  */
.buch{--p:1;--q:0;--z:0;position:relative}
/* Viel Scrollweg: so folgt das Aufklappen gemächlich dem Finger */
.buch--aktiv{--p:0;height:560svh}

.buch__buehne{
  position:relative;height:calc(100svh - var(--navh,64px));overflow:hidden
}
.buch--aktiv .buch__buehne{position:sticky;top:var(--navh,64px)}

/* Die Holzplatte (Hirnholz-Foto). Sie füllt die Bühne immer ganz aus
   und steht still: kein Kacheln, kein Mitscrollen. */
.buch__holz{
  position:absolute;inset:0;z-index:0;
  background:image-set(url("../img/holz-hintergrund.webp") type("image/webp"),
                       url("../img/holz-hintergrund.jpg") type("image/jpeg"))
             no-repeat center center/cover #6b5233;
  /* Beim Zoomen fährt die Kamera vor. Das Holz liegt am weitesten weg
     und wächst darum langsamer als das Buch - erst dieser Unterschied
     lässt es aussehen, als führe man hinein, statt dass einem das Buch
     entgegenfliegt. */
  transform:scale(calc(1 + var(--z) * (var(--zoomfaktor,3) - 1) * .62));
  transform-origin:center center
}
/* Licht von schräg oben, dadurch wirkt die Platte nicht wie Tapete */
.buch__holz::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(70% 55% at 28% 0%,rgba(255,228,180,.16),transparent 62%),
    radial-gradient(120% 110% at 50% 46%,transparent 38%,rgba(0,0,0,.55) 100%)
}

/* Die Szene trägt Deckel und Blatt. Sie liegt über Seite 2, lässt
   Klicks aber durch - nur Deckel und Blatt fangen selbst welche ab.
   Der Fluchtpunkt sitzt bewusst nicht auf dem Scharnier: so verkürzt
   sich der Deckel beim Drehen sichtbar. */
.buch__szene{
  position:absolute;inset:0;z-index:2;perspective:1600px;perspective-origin:34% 46%;
  overflow:hidden;pointer-events:none;
  /* Hier wird bewusst nicht skaliert: .buch__objekt wächst beim Zoomen
     schon über Breite und Höhe mit, genau wie die Seite. Eine Skalierung
     obendrauf käme doppelt und das Buch triebe sichtbar auseinander.
     Die Kamerafahrt entsteht allein dadurch, dass das Holz dahinter
     langsamer wächst. */
  /* Erst ganz am Schluss ausblenden. Vorher verschwand der aufgeklappte
     Deckel schon bei knapp halbem Zoom - links lag dann nacktes Holz
     statt der linken Buchhälfte, das Buch war also nicht mehr ganz. */
  opacity:clamp(0,calc((1 - var(--z)) * 9),1)
}

/* Das Buch selbst: ein Gegenstand mit Rand ringsum */
.buch__objekt{
  position:absolute;left:50%;top:50%;
  /* Das Buch bleibt beim Aufklappen in der Mitte liegen. */
  translate:-50% -50%;
  /* Buchformat statt Bildschirmformat: so bleibt ringsum Tisch sichtbar.
     Die Höhe führt, die Breite folgt über das Seitenverhältnis - sonst
     deckelt die Höhenbegrenzung das Format wieder auf Breitformat. */
  height:min(84%,calc(84vw / 1.34));
  aspect-ratio:1.34;max-width:84vw;
  transform-style:preserve-3d
}
/* Buchrücken links - bleibt stehen, wenn der Deckel aufgeht */
.buch__objekt::before{
  content:"";position:absolute;top:-2px;bottom:-2px;left:clamp(-18px,-1.1vw,-11px);
  width:clamp(12px,1.2vw,18px);border-radius:7px 0 0 7px;
  background:linear-gradient(90deg,#140e07 0%,#3b2c1d 55%,#1d150d 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)
}
/* Schnitt rechts: der Stapel Seiten */
.buch__objekt::after{
  content:"";position:absolute;top:7px;bottom:7px;right:clamp(-11px,-.7vw,-6px);
  width:clamp(7px,.8vw,12px);border-radius:0 4px 4px 0;
  background:repeating-linear-gradient(180deg,
    #efe4cb 0 2px,#cbbb97 2px 3px,#e3d6b8 3px 5px);
  box-shadow:0 2px 6px rgba(0,0,0,.45)
}
/* Unsichtbares Mass: hat immer die Grösse des geschlossenen Buchs.
   site.js liest daraus --bw/--bh, von dort aus wird gezoomt. */
.buch__schatten{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  height:min(84%,calc(84vw / 1.34));
  aspect-ratio:1.34;max-width:84vw;
  visibility:hidden;pointer-events:none
}

/* Beim Zoomen wächst das Buch vom Buchformat auf die ganze Bühne. */
.buch--aktiv .buch__objekt,
.buch--aktiv .buch__seite2{
  aspect-ratio:auto;max-width:none;
  width:calc(var(--bw,84vw) + (100% - var(--bw,84vw)) * var(--z));
  height:calc(var(--bh,84%) + (100% - var(--bh,84%)) * var(--z))
}

/* Das Blatt: Seite 1 vorne, leeres Papier hinten. Es dreht sich nach
   dem Deckel um den Bund und legt sich auf den offenen Deckel. */
.buch__blatt{
  position:absolute;inset:0;transform-style:preserve-3d;
  transform-origin:left center;
  transform:rotateY(calc(var(--q) * -166deg))
}
.buch--blaettert .buch__blatt{will-change:transform}
.buch__blatt,.buch__deckel{pointer-events:auto}
.buch--umgeblaettert .buch__blatt{pointer-events:none}
.buch__seite,.buch__rueckseite{backface-visibility:hidden}
.buch__rueckseite{
  position:absolute;inset:0;transform:rotateY(180deg);border-radius:6px 3px 3px 6px;
  background:
    linear-gradient(270deg,rgba(74,56,24,.30) 0%,transparent 14%),
    url("../img/papier.jpg") repeat 0 0/520px 520px var(--paper);
  background-blend-mode:normal,multiply
}

/* Seite 2: liegt zuunterst. Ist sie ganz gezoomt, schliesst sie nahtlos
   an das Papier der übrigen Seite an. */
.buch__seite2{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:1;
  height:min(84%,calc(84vw / 1.34));aspect-ratio:1.34;max-width:84vw;
  overflow:hidden;border-radius:calc((1 - var(--z)) * 6px);
  background:url("../img/papier.jpg") repeat 0 0/520px 520px var(--paper);
  background-blend-mode:multiply;
  display:grid;place-items:safe center;text-align:center;
  box-shadow:0 34px 70px -22px rgba(0,0,0,calc(.78 * (1 - var(--z)))),
             0 10px 26px -10px rgba(0,0,0,calc(.6 * (1 - var(--z))))
}
/* Feste Breite, damit der Text beim Zoomen nicht ständig neu umbricht */
.buch__seite2-inhalt{
  width:min(40rem,100%);padding:clamp(22px,4vw,56px) clamp(18px,3.4vw,54px)
}
.buch__seite2 h2{font-size:clamp(1.4rem,2.6vw,2.2rem);max-width:20ch;margin:10px auto 0}
.buch__seite2 .lead{margin:clamp(14px,1.8vw,22px) auto 12px}
.buch__seite2 .hero__cta{justify-content:center;margin-top:clamp(16px,2vw,26px)}

/* Seitenzahl unten */
.buch__seitenzahl{
  position:absolute;bottom:clamp(10px,1.6vw,20px);right:clamp(14px,2vw,26px);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;color:var(--ink-3)
}
.buch__seite2 .buch__seitenzahl{left:50%;right:auto;translate:-50% 0}

/* Ohne Animation (kein JavaScript, "Bewegung reduzieren"): Seite 2
   steht einfach als nächste Seite unter dem offenen Buch. */
.buch:not(.buch--aktiv) .buch__buehne{
  height:auto;overflow:visible;padding-top:calc(100svh - var(--navh,64px))
}
.buch:not(.buch--aktiv) .buch__holz,
.buch:not(.buch--aktiv) .buch__szene{bottom:auto;height:calc(100svh - var(--navh,64px))}
.buch:not(.buch--aktiv) .buch__seite2{
  position:relative;left:auto;top:auto;translate:none;
  width:auto;height:auto;aspect-ratio:auto;max-width:none;
  border-radius:0;box-shadow:none;background:none;padding-bottom:40px
}

/* Blattwechsel zwischen den weiteren Buchseiten */
.blattwechsel{
  max-width:var(--maxw);margin:clamp(20px,3vw,40px) auto clamp(30px,4vw,56px);
  padding-inline:var(--pad);display:flex;align-items:center;gap:16px;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  color:var(--ink-3)
}
.blattwechsel::before,.blattwechsel::after{
  content:"";flex:1;height:1px;background:var(--rule-strong,rgba(0,0,0,.18));
  box-shadow:0 3px 6px -2px rgba(74,56,24,.25)
}

/* Die erste Seite ------------------------------------------------- */
.buch__seite{
  position:absolute;inset:0;overflow:hidden;border-radius:3px 6px 6px 3px;
  background:url("../img/papier.jpg") repeat 0 0/520px 520px var(--paper);
  background-blend-mode:multiply;
  display:grid;align-items:center
}
/* Der Satzspiegel richtet sich nach der Buchseite, nicht nach dem
   Bildschirm - sonst laufen die Karten über den Buchrand hinaus. */
/* minmax(0,1fr) und min-width:0 sind nötig, sonst wächst die Rasterspalte
   auf die Mindestbreite der Kartenreihe - und die Seite wird breiter als
   das Buch, das sie abschneidet. */
.buch__seite{grid-template-columns:minmax(0,1fr)}
.buch__seiteninhalt{
  width:100%;max-width:none;min-width:0;text-align:center;
  padding-inline:clamp(18px,3.4vw,54px);
  opacity:clamp(0,calc(var(--p) * 2.6 - 1.3),1)
}
.buch__seiteninhalt h2{font-size:clamp(1.4rem,2.6vw,2.2rem)}
.buch__lead{font-size:clamp(.94rem,1.3vw,1.08rem)}
.buch__seiteninhalt .eyebrow{margin-bottom:12px}
.buch__seiteninhalt h2{max-width:22ch;margin:0 auto}
.buch__lead{margin:clamp(14px,1.8vw,22px) auto clamp(24px,3vw,38px);max-width:48ch}
.buch__seiteninhalt .stufe{text-align:left}
/* Die Karten müssen in den aufgeschlagenen Bildschirm passen, darum
   hier etwas knapper als auf den übrigen Seiten. */
/* Drei feste Spalten: auto-fit würde bei schmalem Buch umbrechen */
.buch__seiteninhalt .buch__stufen{
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.5vw,22px)
}
.buch__stufen .stufe__media{aspect-ratio:3/2}
.buch__stufen h3{font-size:clamp(1rem,1.5vw,1.3rem)}
.buch__stufen .stufe__age{font-size:.62rem}
.buch__stufen .stufe p{display:none}
.buch__stufen .stufe{padding-bottom:18px}
/* Schatten aus dem Bund, verschwindet mit dem Öffnen */
.buch__falz{
  position:absolute;inset:0;pointer-events:none;border-radius:3px 6px 6px 3px;
  background:linear-gradient(90deg,rgba(74,56,24,.40) 0%,rgba(74,56,24,.16) 8%,transparent 24%);
  opacity:calc((1 - var(--p) * .55) * (1 - var(--z)))
}

/* Der Deckel ------------------------------------------------------- */
.buch__deckel{
  position:absolute;inset:0;transform-style:preserve-3d;
  transform-origin:left center;
  transform:rotateY(calc(var(--p) * -172deg));
  filter:drop-shadow(calc(var(--p) * -18px) 14px 26px rgba(0,0,0,.5))
}
.buch--laeuft .buch__deckel{will-change:transform}
/* Ist das Buch offen, darf der Deckel keine Klicks mehr abfangen */
.buch__deckel{pointer-events:auto}
/* Offen bleibt der Deckel natürlich liegen - er klappt nach links auf
   den Waldboden. Nur anklickbar ist er dann nicht mehr. */
.buch--offen .buch__deckel{pointer-events:none}

.buch__aussen,.buch__innenseite{position:absolute;inset:0;backface-visibility:hidden;
  border-radius:3px 7px 7px 3px}

/* Aussenseite: echtes Leder aus assets/img/leder.jpg.
   Das Bild wird auf 125 Prozent Höhe gezogen und mittig beschnitten. So
   bleibt die Narbung unverzerrt - egal ob der Deckel quer oder hochkant
   steht - und die aufgedruckte Zierlinie des Bildes fällt weg. Den Rahmen
   zeichnet das CSS, der sitzt dann auf jedem Format richtig.
   Darüber nur noch ein wenig Licht von oben und dunklere Ränder. */
.buch__aussen{
  background:
    radial-gradient(90% 58% at 50% 0%,rgba(255,232,182,.11),transparent 60%),
    linear-gradient(90deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.22) 2.4%,transparent 8%),
    radial-gradient(132% 114% at 50% 44%,transparent 40%,rgba(0,0,0,.42) 100%),
    url("../img/leder.jpg") center/auto 125% no-repeat,
    #4a3522;
  display:grid;place-items:center;overflow:hidden
}

/* Blindprägung als Rahmenlinie */
/* Rahmen: zwei eingepresste Linien, wie auf einem Einband */
.buch__aussen::after{
  content:"";position:absolute;inset:clamp(16px,2.4vw,34px);
  border:1px solid rgba(206,172,110,.22);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.45),
    inset 0 0 0 7px transparent,
    inset 0 0 0 8px rgba(206,172,110,.14),
    inset 0 0 0 9px rgba(0,0,0,.35),
    0 1px 0 rgba(255,232,180,.07);
  border-radius:2px;pointer-events:none
}

.buch__praegung{
  position:relative;z-index:1;width:100%;max-width:34rem;
  padding:0 clamp(24px,6vw,48px);text-align:center;
  display:flex;flex-direction:column;align-items:center;
  transform:translateX(calc(var(--p) * 16px));opacity:calc(1 - var(--p) * 1.7)
}

/* Das Zeichen auf dem Deckel: das farbige Logo, freigestellt aus
   logo.jpg. Damit es nicht wie ein Aufkleber wirkt, sondern wie ins
   Leder eingelassen:
     - etwas entsättigt und abgedunkelt, damit es zum Ton des Einbands passt
     - heller Grat unten, dunkle Kante oben: das ergibt die Prägung
     - die Lederstruktur liegt über dem Zeichen (::after), begrenzt auf
       dessen Form - dadurch nimmt es die Narbung des Einbands an */
.buch__brand{
  position:relative;display:block;
  width:clamp(104px,11vw,152px);aspect-ratio:1/1;
  margin-bottom:clamp(22px,2.6vw,34px);
  background:url("../img/logo-farbe.png") no-repeat center/contain;
  filter:saturate(.84) brightness(.93) contrast(1.04)
         drop-shadow(0 1.5px 0 rgba(255,232,182,.24))
         drop-shadow(0 -1px 1px rgba(0,0,0,.55))
}
.buch__brand::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("../img/leder.jpg") center/auto 125% no-repeat;
  mix-blend-mode:overlay;opacity:.42;
  -webkit-mask:url("../img/logo-farbe.png") no-repeat center/contain;
          mask:url("../img/logo-farbe.png") no-repeat center/contain
}

/* Der Titel als Goldprägung: ein Verlauf durch die Buchstaben, dazu eine
   dunkle Kante oben und ein heller Grat unten. */
.buch__praegung h1{
  max-width:16ch;font-size:clamp(2rem,5.4vw,3.8rem);line-height:1.06;
  background:linear-gradient(168deg,#f7e8c2 0%,#d8b878 42%,#b89550 70%,#eeddaf 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1.5px 0 rgba(0,0,0,.6))
         drop-shadow(0 -1px 0 rgba(255,236,196,.16))
}

/* Zierlinie zwischen Titel und Signatur */
.buch__linie{
  display:block;width:clamp(70px,9vw,120px);height:2px;
  margin:clamp(20px,2.6vw,32px) 0 clamp(14px,1.8vw,22px);
  background:linear-gradient(90deg,transparent,rgba(206,172,110,.5),transparent);
  box-shadow:0 1px 0 rgba(0,0,0,.5)
}

.buch__jahr{
  font-family:var(--font-mono);font-size:.68rem;font-weight:500;letter-spacing:.32em;
  text-transform:uppercase;color:rgba(214,183,124,.62);
  text-shadow:0 1px 0 rgba(0,0,0,.6)
}

/* Der Knopf ist kein aufgeklebtes Schild, sondern eine eingepresste
   Fläche mit Goldlinie. */
.buch__knopf{
  display:inline-flex;align-items:center;margin-top:clamp(26px,3.4vw,40px);
  padding:14px 28px;border-radius:var(--pill);
  border:1px solid rgba(206,172,110,.5);background:rgba(0,0,0,.18);
  font-family:var(--font-mono);font-size:.74rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:#dcbf84;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.5),0 1px 0 rgba(255,232,180,.1);
  text-shadow:0 1px 0 rgba(0,0,0,.6);
  transition:color .25s,border-color .25s,background .25s
}
.buch__knopf:hover{
  color:#f4e2b4;border-color:rgba(226,195,134,.85);background:rgba(206,172,110,.12)
}

/* Instagram unter dem Knopf: dieselbe eingepraegte Sprache, nur kleiner.
   Das Zeichen ist eine eigene Zeichnung - es wird nichts bei Meta
   nachgeladen. */
.buch__insta{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:clamp(12px,1.4vw,18px);padding:8px 16px;border-radius:var(--pill);
  border:1px solid rgba(206,172,110,.3);
  font-family:var(--font-mono);font-size:.64rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(220,191,132,.78);
  text-shadow:0 1px 0 rgba(0,0,0,.6);
  transition:color .25s,border-color .25s,background .25s
}
.buch__insta svg{width:17px;height:17px;flex:0 0 auto}
.buch__insta:hover{
  color:#f4e2b4;border-color:rgba(226,195,134,.7);background:rgba(206,172,110,.1)
}

/* Lichtkante, die beim Aufklappen über das Leder wandert */
.buch__glanz{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,238,200,.15) 48%,transparent 62%);
  transform:translateX(calc(var(--p) * 120% - 40%));
  opacity:calc(var(--p) * (1 - var(--p)) * 3.2)
}

/* Innenseite des Deckels: helles Vorsatzpapier */
.buch__innenseite{
  transform:rotateY(180deg);
  background:
    radial-gradient(90% 70% at 30% 20%,rgba(190,160,110,.20),transparent 62%),
    linear-gradient(160deg,#efe4cd,#dccfb0)
}
.buch__innenseite::before{
  content:"";position:absolute;inset:0;
  background:url("../img/papier.jpg") repeat 0 0/340px 340px;
  mix-blend-mode:multiply;opacity:.5
}

/* Lesezeichen -------------------------------------------------------
   Die Kapitel schauen als Stoffreiter rechts aus dem Buch. Sie stecken
   ein Stueck unter dem Schnitt und fahren bei Beruehrung heraus.
   Farben aus dem Vereinszeichen (Rot, Blau) und aus dem Material der
   Seite: Messing, Oliv, Rost und Tinte. */
/* Der Traeger hat genau die Groesse des Buchs, liegt aber zwischen Holz
   und Seite - also hinter dem Buch und ausserhalb der 3D-Szene. Dadurch
   stecken die Reiter wirklich zwischen den Seiten, und ihre Schrift
   bleibt scharf (in der perspektivischen Szene wird alles gerastert). */
.buch__reiter{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:0;
  height:min(84%,calc(84vw / 1.34));
  aspect-ratio:1.34;max-width:84vw;
  pointer-events:none;
  opacity:clamp(0,calc((1 - var(--z)) * 6),1)
}
.buch--aktiv .buch__reiter{
  aspect-ratio:auto;max-width:none;
  width:calc(var(--bw,84vw) + (100% - var(--bw,84vw)) * var(--z));
  height:calc(var(--bh,84%) + (100% - var(--bh,84%)) * var(--z))
}
.buch__lesezeichen{
  position:absolute;bottom:100%;left:clamp(8px,1.6%,20px);right:clamp(8px,1.6%,20px);
  margin-bottom:-26px;
  display:flex;flex-direction:row;flex-wrap:nowrap;
  gap:clamp(3px,.6vw,9px);
  pointer-events:auto
}
/* Ein leerer Platz am Schluss, so breit wie ein Reiter: rechts bleibt
   das Buch frei, die Reiter sitzen nicht bis an die Kante. */
.buch__lesezeichen::after{content:"";flex:1 1 0;min-width:0}
.lz{
  /* Die Reiter teilen sich die ganze Breite des Buchs */
  flex:1 1 0;text-align:center;
  display:block;min-width:0;padding:8px 10px 30px;
  border-radius:4px 4px 0 0;
  font-family:var(--font-mono);font-size:clamp(.58rem,.74vw,.7rem);
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#fdf6e6;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
  box-shadow:0 -2px 7px rgba(0,0,0,.35);
  transition:transform .28s var(--ease),filter .28s
}
.lz:hover,.lz:focus-visible{transform:translateY(-8px);filter:brightness(1.12)}
.lz--1{background:linear-gradient(180deg,#e0254a,#b3122f)}
.lz--2{background:linear-gradient(180deg,#2a62b8,#164384)}
.lz--3{background:linear-gradient(180deg,#c9a961,#9a7d3c)}
.lz--4{background:linear-gradient(180deg,#6f7a41,#4e562c)}
.lz--5{background:linear-gradient(180deg,#a85a2c,#7d3f1c)}
.lz--6{background:linear-gradient(180deg,#3a3630,#22201c)}

/* Hinweis unten --------------------------------------------------- */
.buch__hinweis{
  position:absolute;left:50%;bottom:clamp(2px,.6vw,8px);transform:translateX(-50%);
  z-index:3;display:flex;align-items:center;gap:10px;padding:12px 20px;
  border-radius:var(--pill);font-family:var(--font-mono);font-size:.7rem;
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(240,226,196,.85);text-shadow:0 1px 3px rgba(0,0,0,.8);
  transition:color .25s,opacity .3s;
  opacity:calc(1 - var(--p) * 2.4)
}
.buch__hinweis:hover{color:#fff}
.buch--offen .buch__hinweis{pointer-events:none}
.buch__pfeil{display:inline-block;transition:transform .5s var(--ease)}
.buch__hinweis:hover .buch__pfeil{transform:translateY(4px)}


@media(max-width:760px){
  .buch--aktiv{height:520svh}
  .buch__objekt,.buch__schatten,.buch__seite2{height:86%;aspect-ratio:.82;max-width:90vw}
  .buch__reiter{height:86%;aspect-ratio:.82;max-width:90vw}
  .buch__lesezeichen{left:3px;right:3px;gap:2px;margin-bottom:-20px}
  .lz{padding:5px 3px 24px;font-size:.52rem;letter-spacing:.01em}
  .buch__szene{perspective:1000px}
  .buch__praegung h1{font-size:clamp(2rem,9vw,2.8rem)}
  /* Hochkant passen drei Karten nicht untereinander auf eine Seite.
     Sie stehen deshalb nebeneinander und lassen sich schieben. */
  /* .grid steht weiter unten im Stylesheet, darum hier zwei Klassen,
     sonst gewinnt dessen display:grid. */
  /* Hochkant standen die drei Stufen nebeneinander zum Schieben - man
     sah also nur eine und musste raten, dass da noch zwei kommen. Jetzt
     liegen sie als flache Zeilen untereinander: Bild links, Name rechts.
     So sind alle drei auf einen Blick da und passen trotzdem auf die
     Buchseite. */
  .buch__seiteninhalt .buch__stufen{
    display:grid;grid-template-columns:minmax(0,1fr);gap:10px
  }
  .buch__seiteninhalt .stufe{
    display:grid;grid-template-columns:74px minmax(0,1fr);
    grid-template-rows:auto auto;column-gap:14px;
    align-items:center;text-align:left;padding:10px 14px 10px 10px
  }
  .buch__seiteninhalt .stufe__media{
    grid-column:1;grid-row:1 / 3;aspect-ratio:1;margin:0;border-radius:var(--r-sm)
  }
  .buch__seiteninhalt .stufe__age{
    grid-column:2;grid-row:1;align-self:end;padding:0;margin:0
  }
  .buch__seiteninhalt .stufe h3{
    grid-column:2;grid-row:2;align-self:start;padding:0;margin:0;
    font-size:clamp(1.05rem,4.6vw,1.3rem)
  }
  .buch__seiteninhalt .stufe__more{display:none}
  .buch__seiteninhalt h2{font-size:clamp(1.5rem,6.4vw,2rem)}
}

/* Wer wenig Bewegung will, bekommt gleich die erste Seite */
@media (prefers-reduced-motion:reduce){
  .buch--aktiv{--p:1;height:auto}
  .buch--aktiv .buch__buehne{position:relative}
  .buch__deckel{display:none}
}


.uebergang{height:0}
.auf-weiss{background:transparent}
.auf-weiss + .auf-weiss{margin-top:-1px}

/* Klebeband und geklebte Fotos ------------------------------------- */
.tape{
  position:absolute;width:96px;height:26px;background:var(--tape);
  box-shadow:0 1px 2px rgba(21,22,26,.14);z-index:2;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6px,#000 calc(100% - 6px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 6px,#000 calc(100% - 6px),transparent 100%)
}
.tape--tl{top:-13px;left:-20px;transform:rotate(-24deg)}
.tape--tr{top:-13px;right:-20px;transform:rotate(21deg)}
@media(max-width:640px){.tape{width:66px;height:20px}}

.photo{position:relative;margin:0;background:#fff;padding:12px 12px 0;
  box-shadow:0 18px 40px -26px rgba(21,22,26,.55)}
.photo img{width:100%;height:auto;display:block}
.photo figcaption{font-family:var(--font-hand);font-size:1.32rem;line-height:1.2;
  color:var(--ink-2);padding:10px 4px 14px;text-align:center}
.photo--tilt,.photo--tilt0{transform:rotate(-1.1deg)}
.photo--tilt1{transform:rotate(1.3deg)}
.photo::after{
  content:"";position:absolute;top:-11px;left:50%;width:104px;height:24px;
  transform:translateX(-50%) rotate(-2deg);background:var(--tape);
  box-shadow:0 1px 2px rgba(21,22,26,.12)
}

/* Randnotiz von Hand ----------------------------------------------- */
.note{font-family:var(--font-hand);font-size:1.4rem;line-height:1.25;color:var(--ink-2);
  transform:rotate(-.6deg);margin:14px 0 0}

/* Auftauchen beim Scrollen ---------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none}
}

/* Raster ---------------------------------------------------------- */
.grid{display:grid;gap:clamp(16px,2vw,26px)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

/* Stufenkarten ---------------------------------------------------- */
.stufe{
  display:flex;flex-direction:column;background:var(--paper-2);border-radius:var(--r-lg);padding:14px 14px 26px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)
}
.stufe:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.stufe__media{display:block;overflow:hidden;aspect-ratio:4/3;border-radius:var(--r);
  background:var(--rule);margin-bottom:20px}
.stufe__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.stufe:hover .stufe__media img{transform:scale(1.05)}
.stufe__age{display:block;padding:0 8px;font-family:var(--font-mono);font-size:.66rem;
  font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.stufe h3{padding:0 8px;margin-bottom:8px}
.stufe p{padding:0 8px;color:var(--ink-2);font-size:.96rem;margin:0 0 20px}
.stufe__more{align-self:flex-start;margin:auto 0 0 8px;padding:7px 15px;border-radius:var(--pill);
  background:var(--paper);font-family:var(--font-mono);font-size:.66rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);transition:.25s}
.stufe:hover .stufe__more{background:var(--ink);color:var(--paper)}

/* Zweispalter ----------------------------------------------------- */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(26px,4vw,64px);align-items:start}
.split__media{overflow:hidden;border-radius:var(--r-lg);background:var(--paper-2);aspect-ratio:4/5}
.split__media img{width:100%;height:100%;object-fit:cover}

/* Fliesstext ------------------------------------------------------ */
.prose{max-width:var(--measure);font-size:1.05rem;color:var(--ink-2);line-height:1.72}
.prose h2,.prose h3{color:var(--ink);margin:1.9em 0 .55em}
.prose h2{font-size:clamp(1.35rem,2.2vw,1.85rem)}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose strong{color:var(--ink);font-weight:500}
.prose a{color:var(--ink);border-bottom:1.5px solid var(--red);padding-bottom:1px}
.prose a:hover{color:var(--red)}
.prose img{border-radius:var(--r);margin:1.8em 0}
.prose figure{margin:1.8em 0}
.prose figcaption{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-3);margin-top:.7em}
.prose ul{padding-left:1.15em}
.prose li{margin-bottom:.45em}
.prose li::marker{color:var(--red)}
.prose blockquote{
  margin:1.8em 0;padding:22px 26px;border-radius:var(--r);background:var(--paper-2);
  font-family:var(--font-hand);font-size:1.62rem;line-height:1.3;color:var(--ink);
  transform:rotate(-.4deg)
}

/* Seitenkopf ------------------------------------------------------ */
.phead{padding-block:clamp(48px,6.5vw,104px) clamp(20px,2.5vw,36px)}
.phead__inner{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.phead h1{font-size:clamp(2.1rem,5vw,3.9rem)}
.phead .lead{margin-top:22px}

/* Datenplan ------------------------------------------------------- */
.plan{display:grid;gap:8px}
.plan__row{
  display:grid;grid-template-columns:180px 1fr auto;gap:18px;align-items:center;
  padding:16px 22px;border-radius:var(--r);background:var(--paper-2);
  transition:transform .25s var(--ease),background .25s
}
.plan__row:hover{transform:translateX(4px)}
.plan__date{font-family:var(--font-mono);font-size:.95rem;font-weight:500;letter-spacing:-.02em}
.plan__what{color:var(--ink-2)}
.plan__tag{justify-self:end;width:max-content;font-family:var(--font-mono);font-size:.64rem;
  font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--red);
  background:var(--paper);padding:5px 12px;border-radius:var(--pill)}
.plan__row.is-highlight{background:var(--red-soft)}
.plan__row.is-highlight .plan__date{color:var(--red)}
@media(max-width:640px){
  .plan__row{grid-template-columns:1fr auto;gap:6px 14px;padding:14px 18px}
  .plan__what{grid-column:1/-1}
}

/* Dokumente ------------------------------------------------------- */
.doclist{display:grid;gap:8px}
.doc{display:flex;align-items:center;gap:16px;padding:15px 22px;border-radius:var(--r);
  background:var(--paper-2);transition:transform .25s var(--ease)}
.doc:hover{transform:translateX(4px)}
.doc__ico{font-family:var(--font-mono);font-size:.62rem;font-weight:700;letter-spacing:.1em;
  color:var(--red);background:var(--paper);padding:6px 10px;border-radius:var(--pill);flex:0 0 auto}
.doc__n{flex:1;font-size:.97rem}
.doc__m{font-family:var(--font-mono);color:var(--ink-3);font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase}
.doc:hover .doc__m{color:var(--ink)}

/* Kontakt --------------------------------------------------------- */
/* Wie Karteikarten, die auf der Buchseite liegen: heller als das
   Papier, mit feiner Kante und Schatten - auf dem beigen Grund waren
   sie vorher kaum zu sehen. */
.person{display:block;padding:26px 28px;border-radius:var(--r-lg);
  background:#fdfaf3;border:1px solid var(--rule-strong);
  box-shadow:0 12px 24px -18px rgba(21,22,26,.65);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
a.person:hover{transform:translateY(-4px);
  box-shadow:0 18px 32px -18px rgba(21,22,26,.7)}
.person b{display:block;font-family:var(--font-mono);font-size:1.1rem;font-weight:700;letter-spacing:-.04em}
.person span{display:block;font-family:var(--font-mono);font-size:.66rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:7px}
.person a{border-bottom:1.5px solid var(--rule-strong);padding-bottom:1px}
.person a:hover{border-color:var(--red)}
.iban{font-family:var(--font-mono);font-size:.92rem}

/* Schlussaufruf --------------------------------------------------- */
.cta{padding:0 var(--pad) clamp(40px,6vw,80px)}
.cta__inner{max-width:var(--maxw);margin-inline:auto;background:var(--ink);color:var(--paper);
  border-radius:var(--r-xl);padding:clamp(40px,6vw,80px) clamp(28px,5vw,64px);
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(22px,4vw,56px);align-items:end}
.cta h2{color:var(--paper);max-width:15ch}
.cta p{color:rgba(255,255,255,.7);max-width:44ch;margin:0}
.cta .btn{background:var(--paper);color:var(--ink);border-color:var(--paper);margin-top:22px}
@media(max-width:820px){.cta__inner{grid-template-columns:1fr}}

/* Sprungmarken (Stufenseite) --------------------------------------- */
.albumbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}
.chip{padding:10px 18px;border-radius:var(--pill);background:var(--paper-2);
  font-family:var(--font-mono);font-size:.68rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);transition:.2s}
.chip:hover{color:var(--ink)}
.chip.is-active{background:var(--ink);color:var(--paper)}

/* Fusszeile ------------------------------------------------------- */
/* Die Fusszeile ist kein abgesetzter Kasten, sondern der Schlussabsatz
   der Seite: dasselbe Papier, darüber eine klare Linie über den ganzen
   Satzspiegel - so wie die Fussnotenlinie in einem gedruckten Buch. */
.foot{background:transparent;border-radius:0;margin-top:clamp(40px,6vw,88px)}
.foot__grid{max-width:var(--maxw);margin-inline:auto;
  padding:clamp(36px,4.4vw,58px) var(--pad) clamp(30px,4vw,52px);
  border-top:1.5px solid var(--ink);
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:36px}
.foot__grid h4{margin-bottom:14px}
.foot__grid a{display:block;color:var(--ink-2);font-size:.94rem;padding:5px 0;transition:color .2s}
.foot__grid a:hover{color:var(--red)}
.foot__claim{margin-top:18px;font-family:var(--font-hand);font-size:1.55rem;letter-spacing:0;
  line-height:1.35;color:var(--ink);max-width:24ch}
.foot__bar{max-width:var(--maxw);margin-inline:auto;border-top:1px solid var(--rule);padding:18px var(--pad);
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;font-family:var(--font-mono);
  font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.foot__bar a{border-bottom:1px solid transparent;transition:.2s}
.foot__bar a:hover{color:var(--ink);border-bottom-color:var(--ink)}
@media(max-width:860px){.foot__grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot__grid{grid-template-columns:1fr;gap:26px}}

/* Umbrüche -------------------------------------------------------- */
@media(max-width:1180px){
  /* Zu eng fuer die Reiterreihe: dort fuehrt die Schublade durch die
     Seiten, die Leiste bleibt schmal. */
  .burger{display:flex}
  .nav__links{display:none}
  .nav__actions{margin-left:auto}
  .drawer{inset:64px 0 0}
}
@media(max-width:400px){.brand__txt{display:none}}
@media(max-width:640px){ body{font-size:16px} }

.center{display:grid;place-items:center;padding:60px 0}

/* Stufen nacheinander (Tagebuch-Doppelseite) ----------------------- */
.stufeblock{padding-block:clamp(40px,5.5vw,84px)}
.stufeblock + .stufeblock{border-top:1.5px dashed var(--rule-strong)}
.stufeblock__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,5vw,72px);align-items:start}
.stufe--links .stufeblock__grid > .photo{order:2}
.stufeblock__nr{display:inline-block;font-family:var(--font-mono);font-size:.68rem;
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  padding:6px 13px;border-radius:var(--pill);background:var(--paper-2);margin-bottom:16px}
.stufeblock .prose{max-width:58ch}
.stufeblock .photo{position:sticky;top:96px}
@media(max-width:860px){
  .stufeblock__grid{grid-template-columns:1fr;gap:26px}
  .stufe--links .stufeblock__grid > .photo{order:0}
  .stufeblock .photo{position:static}
}


/* Tagebuch: Textseiten ---------------------------------------------- */
.split--text{grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr)}
@media(max-width:860px){.split--text{grid-template-columns:1fr}}
.photo--sticky{position:sticky;top:96px}
@media(max-width:860px){.photo--sticky{position:static}}
.note--rand{margin-top:28px;padding-left:18px;border-left:2px solid var(--red);
  transform:rotate(-.4deg)}

/* Eingeklebtes Blatt (Datenplan) ------------------------------------ */
.blatt{position:relative;background:#fff;padding:clamp(22px,3vw,40px);
  box-shadow:0 20px 44px -28px rgba(21,22,26,.55);transform:rotate(-.35deg)}
.blatt .plan{
  gap:0;
  background-image:repeating-linear-gradient(180deg,transparent 0,transparent 51px,var(--rule) 51px,var(--rule) 52px)
}
.blatt .plan__row{background:transparent;border-radius:0;padding:0 10px;height:52px;align-items:center}
.blatt .plan__row:hover{background:rgba(21,22,26,.04);transform:none}
.blatt .plan__row.is-highlight{background:var(--red-soft)}
@media(max-width:640px){
  .blatt{transform:none;padding:18px 14px}
  .blatt .plan{background-image:none}
  .blatt .plan__row{height:auto;padding:12px 6px}
}

/* Kontaktkarten wie angeheftete Zettel ------------------------------ */
.person--kipp0{transform:rotate(-.7deg)}
.person--kipp1{transform:rotate(.5deg)}
.person--kipp2{transform:rotate(-.3deg)}
.person{transition:transform .3s var(--ease)}
a.person:hover,.person--kipp0:hover,.person--kipp1:hover,.person--kipp2:hover{transform:rotate(0) translateY(-3px);
  box-shadow:0 18px 32px -18px rgba(21,22,26,.7)}

/* Beilagen: Büroklammer statt Kachel -------------------------------- */
.doc{background:#fff;box-shadow:0 10px 26px -20px rgba(21,22,26,.5)}

/* Kartenauszug im Fotorahmen --------------------------------------- */
.photo--karte iframe{width:100%;aspect-ratio:4/3;border:0;display:block;background:var(--paper-2)}
.karte{aspect-ratio:4/3;background:var(--paper-2);display:grid;place-items:stretch}
.karte--geladen{display:block}
.karte__laden{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  width:100%;height:100%;padding:24px;text-align:center;color:var(--ink-2);
  border:1px dashed var(--rule-strong);transition:background .25s
}
.karte__laden:hover{background:var(--paper)}
.karte__laden svg{color:var(--red)}
.karte__laden strong{font-family:var(--font-mono);font-size:.82rem;font-weight:500;
  letter-spacing:.04em;color:var(--ink)}
.karte__laden > span{font-size:.82rem;line-height:1.45;max-width:34ch;color:var(--ink-3)}
.karte__knopf{
  margin-top:6px;padding:10px 20px;border-radius:var(--pill);
  background:var(--ink);color:var(--paper);font-family:var(--font-mono);
  font-size:.68rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase
}
.karte__laden:hover .karte__knopf{background:var(--red)}
@media(max-width:640px){.photo--karte iframe{aspect-ratio:1/1}}

/* Datenplan als Bild ------------------------------------------------ */
.photo--plan{display:block;max-width:720px;margin-inline:auto;text-align:center;cursor:zoom-in}
.photo--plan + .photo--plan{margin-top:clamp(28px,4vw,56px)}
.photo--plan img{width:100%;height:auto}
.photo__text{display:block;font-family:var(--font-hand);font-size:1.32rem;line-height:1.2;
  color:var(--ink-2);padding:10px 4px 14px}
.photo__lupe{
  position:absolute;right:16px;bottom:54px;padding:8px 16px;border-radius:var(--pill);
  background:var(--ink);color:var(--paper);font-family:var(--font-mono);font-size:.64rem;
  font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  opacity:0;transform:translateY(6px);transition:.3s var(--ease)
}
.photo--plan:hover .photo__lupe{opacity:1;transform:none}
@media(max-width:640px){
  .photo__lupe{opacity:1;transform:none;right:10px;bottom:48px;padding:7px 12px}
}

/* Datenplan als PDF eingebettet ------------------------------------- */
.blatt--pdf{max-width:760px;margin-inline:auto;padding:14px}
.blatt--pdf object{width:100%;aspect-ratio:1/1.414;display:block;border:0;background:var(--paper-2)}
@media(max-width:640px){.blatt--pdf object{aspect-ratio:3/4}}