/* Porcospino, Gestaltungsentwurf. ERZEUGT von tools/porcospino/build.py. */
@font-face{font-family:'Instrument';src:url('/schrift/instrument-serif.woff2')format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Spectral';src:url('/schrift/spectral.woff2')format('woff2');
  font-weight:200 600;font-style:normal;font-display:swap}

/* ⚠️ FARBEN AUS DEM LOGO, GEMESSEN statt geschätzt: Schwarz 91 %, Tomatenrot 5,8 %,
   Blattgrün 1,0 %. Kontraste nachgerechnet: Rot 5,41:1 auf Creme, Grün 5,27:1,
   Tinte 16,63:1. Auf Schwarz fallen Rot (3,07) und Grün (3,15) durch, deshalb
   gibt es hier KEINE dunkle Fläche mit farbigem Text. */
:root{
  --tinte:#181818; --rot:#CC0C18; --rot-d:#A80C0C; --gruen:#007830;
  --creme:#FBF7F0; --sand:#F3EDE2; --linie:#E2D9C9; --mut:#655C51;
  --disp:'Instrument',Georgia,serif;
  --text:'Spectral','Iowan Old Style',Georgia,serif;
  --aus:cubic-bezier(.16,1,.3,1);
  --rand:clamp(1.25rem,5vw,4.5rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:6.5rem}
body{margin:0;background:var(--creme);color:var(--tinte);
  font:400 clamp(1rem,.55vw + .88rem,1.16rem)/1.68 var(--text);
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:76rem;margin:0 auto;padding-inline:var(--rand)}
.eng{max-width:46rem}

/* ── Kopf ─────────────────────────────────────────────────────────── */
.kopf{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--creme) 92%,transparent);
  border-bottom:1px solid var(--linie)}
@supports not (background:color-mix(in srgb,red 50%,transparent)){.kopf{background:var(--creme)}}
.kopfin{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:5rem}
.marke{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;
  padding-block:.5rem}
.marke img{width:3.1rem}
.marke b{font:400 1.5rem/1 var(--disp);letter-spacing:.01em}
.marke span{display:block;font:400 .6rem/1.3 var(--text);letter-spacing:.24em;
  text-transform:uppercase;color:var(--mut);margin-top:.18rem}
nav.haupt{display:flex;gap:1.9rem;align-items:center}
nav.haupt a{text-decoration:none;font:400 1rem/1 var(--text);letter-spacing:.01em;
  padding-block:1.2rem;position:relative}
nav.haupt a::after{content:'';position:absolute;left:0;right:100%;bottom:.88rem;
  height:1px;background:var(--rot);transition:right .38s var(--aus)}
nav.haupt a:hover::after,nav.haupt a[aria-current]::after{right:0}
.telknopf{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  background:var(--rot);color:#fff;border-radius:999px;
  padding:.98rem 1.5rem;font:400 .95rem/1 var(--text);letter-spacing:.02em;
  transition:background .25s var(--aus),transform .18s var(--aus)}
.telknopf:hover{background:var(--rot-d)}
.telknopf:active{transform:scale(.97)}
.burger{display:none;background:none;border:1px solid var(--linie);border-radius:.5rem;
  width:2.9rem;height:2.9rem;cursor:pointer;align-items:center;justify-content:center}
.burger i{display:block;width:1.1rem;height:1px;background:var(--tinte);position:relative}
.burger i::before,.burger i::after{content:'';position:absolute;left:0;width:1.1rem;
  height:1px;background:var(--tinte)}
.burger i::before{top:-.32rem} .burger i::after{top:.32rem}

/* ── Fläche und Kopfzeile einer Sektion ───────────────────────────── */
/* 🔴 ABSTAENDE GEMESSEN, NICHT GESCHAETZT (10.08.2026, Henri: „Leerraeume").
   Vorher clamp(4rem,8vw,7.5rem), bei 1280 px also 102 px oben UND unten je
   Sektion. Gemessen kam dabei heraus: das gruene Band hatte 207 px Polster
   bei 205 px Inhalt, das Polster war groesser als das, was drinsteht.
   Jetzt 68 px bei 1280. Das ist immer noch grosszuegig gesetzt (die Seite
   lebt von Luft), aber es sind rund 240 px weniger Leere ueber die Seite. */
section{padding-block:clamp(3rem,5.4vw,5.4rem)}
/* Das Band traegt nur einen Satz und einen Knopf: dort reicht deutlich
   weniger, sonst schwimmt der Inhalt in seiner eigenen Flaeche. */
.band{padding-block:clamp(2.4rem,4vw,3.8rem)}
.sand{background:var(--sand)}
.ey{font:400 .7rem/1 var(--text);letter-spacing:.26em;text-transform:uppercase;
  color:var(--rot);margin:0 0 1.1rem}
h1,h2,h3{font-family:var(--disp);font-weight:400;letter-spacing:-.005em;
  text-wrap:balance;margin:0}
/* Wortpaare, die nicht auseinanderbrechen dürfen („ein / Bogen", „als / es").
   ⚠️ NICHT  : SplitText trennt die Zeilen auch an geschützten Leerzeichen,
   gemessen „Zwei Räume, ein / Bogen". Ein nowrap-Span hält es zusammen. */
.fest{white-space:nowrap}
h1{font-size:clamp(2.7rem,7.4vw,5.6rem);line-height:1.02}
h2{font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.08}
h3{font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.18}
p{margin:0 0 1.15em}
/* ⚠️ Der Innenabstand nach oben ist nicht Kosmetik: Absätze haben global
   keinen Außenabstand, und wo .vor direkt auf ein h2 folgt (Karte, Haus),
   klebte der Vorspann mit GEMESSEN 0 px an der Überschrift. Im Bildschirmfoto
   sofort zu sehen, in keiner Prüfzahl. Der Hero überschreibt das unten.
   ⚠️ Und die Klammern eines CSS-Blocks NIE unverdoppelt in einen Kommentar
   innerhalb dieses f-Strings schreiben — Python liest sie als Ausdruck. */
.vor{font-size:clamp(1.06rem,.5vw + .95rem,1.32rem);color:var(--mut);max-width:38rem;
  margin-top:clamp(.9rem,1.6vw,1.4rem)}

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero{padding-block:clamp(2.6rem,5.6vw,5.6rem) clamp(2.4rem,4.6vw,4.6rem);position:relative;
  overflow:hidden}
.hero h1 em{font-style:italic;color:var(--rot)}
.offen{display:inline-flex;align-items:center;gap:.6rem;border:1px solid var(--linie);
  background:var(--creme);border-radius:999px;padding:.5rem 1rem;
  font:400 .82rem/1 var(--text);letter-spacing:.04em;color:var(--mut);margin-bottom:1.6rem}
.punkt{width:.5rem;height:.5rem;border-radius:50%;background:var(--gruen);flex:none}
.herozeile{display:flex;flex-wrap:wrap;gap:1rem 2.4rem;align-items:center;
  margin-top:2.4rem}
/* ⚠️ DER IGEL LIEGT HINTER ALLEM UND SOLL NUR GEAHNT WERDEN.
   6 % Deckkraft auf Creme ergibt rechnerisch einen Ton wie #EFEBE4, also etwa
   die Tiefe der Sandfläche: sichtbar, aber nichts, worüber man stolpert.
   Er bleibt bewusst still, ohne Bewegung. */
/* ⚠️ GRÖSSE UND LAGE SIND FÜR DIE BEWEGUNG ANDERE ALS FÜRS STEHEN.
   Als stehendes Wasserzeichen war er 62 % breit und unten angeschnitten — man sah
   eine Ecke, und die las sich als Textur. Sobald er WANDERT, liest sich dieselbe
   Form als grauer Klecks, der durchs Bild zieht (im Bildschirmfoto sofort zu sehen,
   in keiner Zahl). Ein Tier, das krabbelt, muss man als Tier erkennen: also klein
   genug für die ganze Silhouette und vollständig im Bild. */
.igel{position:absolute;right:-5%;bottom:6%;width:clamp(9rem,21%,20rem);
  opacity:.06;pointer-events:none;z-index:0;line-height:0}
/* ⚠️ DIE KRABBEL-LAGE GILT NUR MIT SKRIPT. Ohne JavaScript und bei reduzierter
   Bewegung bleibt der Igel dort stehen, wo er vorher stand: rechts unten, still.
   Erst `data-bewegt` schaltet ihn nach links, und von da läuft er los. */
html[data-bewegt] .igel{right:auto;left:0;will-change:transform}
.igel img{width:100%;height:auto;display:block}
.hero .wrap{position:relative;z-index:1}

}

}
@media (max-width:56rem){ .igel{width:clamp(8rem,34%,13rem);right:-8%;bottom:5%;opacity:.07} }
/* Die Tomate aus dem Logo als eigenes Zeichen der Seite. */
/* 🔴 DIE GEZEICHNETE TOMATE IST RAUS (10.08.2026, von Henri: „wirkt komisch").
   Sie war der einzige illustrative Moment auf einer sonst rein typografisch
   gesetzten Seite und las sich dadurch als Clipart. Gemessen war sie sichtbar
   (opacity 1), nicht etwa vom 3D-Objekt verdeckt.
   ⚠️ ERSATZLOS, nicht durch ein anderes Bild ersetzt: die Seite traegt ueber
   ihre Typografie, und ein zweites erfundenes Motiv waere derselbe Fehler
   noch einmal. Der Absatz bekommt stattdessen eine LESBARE Breite - ohne
   Deckel liefe er ueber die ganze frei gewordene Flaeche, und 120 Zeichen
   pro Zeile liest niemand. */
.herozeile .vor{max-width:34rem;margin:0}

/* ── Haltung, drei Sätze ──────────────────────────────────────────── */
.drei{display:grid;gap:clamp(1.6rem,3vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));margin-top:3rem}
.drei h3{margin-bottom:.5rem}
.drei p{color:var(--mut);margin:0}
.drei>div{border-top:1px solid var(--linie);padding-top:1.15rem}

/* ── Die Karte ────────────────────────────────────────────────────── */
.gang{margin-top:clamp(2.2rem,4vw,3.4rem)}
.gang>h3{color:var(--rot);font-family:var(--text);font-size:.74rem;letter-spacing:.28em;
  text-transform:uppercase;margin-bottom:1.2rem}
.gericht{display:grid;grid-template-columns:1fr auto;gap:.2rem 1.4rem;
  padding:1.05rem 0;border-bottom:1px solid var(--linie);align-items:baseline}
.gericht b{font:400 1.22rem/1.3 var(--disp);grid-column:1}
/* ⚠️ Der Preis steht in Spalte 2 und rastet an der Grundlinie des Gerichts ein.
   Bei zweizeiligen Namen („Wechselnde Auswahl an Desserts und
   Käsespezialitäten nach Tagesangebot") bleibt er dadurch oben statt in der
   Mitte zu schweben — so ist es auf der gedruckten Karte des Hauses auch. */
.gericht .pr{grid-column:2;grid-row:1;font:400 1.12rem/1.3 var(--disp);
  color:var(--tinte);white-space:nowrap;font-variant-numeric:lining-nums}
.fussnote{margin-top:clamp(1.8rem,3.5vw,2.6rem);color:var(--mut);
  font-style:italic;font-size:.98rem}
/* Der Allergenhinweis steht bewusst klein und am Schluss: er ist Pflichttext,
   kein Verkaufstext. Kontrast trotzdem geprüft (--mut auf Creme = 6,14:1). */
.allergene{margin-top:clamp(2rem,4vw,3rem);color:var(--mut);font-size:.88rem;
  line-height:1.7;max-width:44rem}
.hinweis{background:var(--sand);border-left:2px solid var(--rot);
  padding:1.1rem 1.35rem;margin:2.2rem 0 0;color:var(--mut);font-size:.95rem}
.hinweis b{color:var(--tinte);font-weight:600}

/* ── Die zwei Menüs ───────────────────────────────────────────────────
   ⚠️ Sie stehen NICHT in einer Karte mit Schatten und Radius: das Haus ist
   von 1981 und die Seite ist typografisch gebaut. Was sie trennt, ist eine
   Haarlinie und Luft — dieselbe Sprache wie .gericht und .zeit.
   ⚠️ minmax(min(100%,...)) statt blankem 1fr: ein blankes fr nimmt die
   Inhaltsbreite als Minimum und erzeugt am Handy Querlauf. Dieser Fehler
   ist auf der Firmenseite schon zweimal passiert. */
.menues{display:grid;gap:clamp(1.2rem,3vw,2.4rem);margin-top:clamp(2rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.menue{border-top:1px solid var(--rot);padding-top:1.4rem}
.gaenge{font:400 .72rem/1 var(--text);letter-spacing:.24em;text-transform:uppercase;
  color:var(--rot);margin:0 0 1rem}
.preis{font:400 clamp(2.6rem,6vw,3.8rem)/1 var(--disp);margin:0;
  color:var(--tinte);font-variant-numeric:lining-nums}
.proper{margin:.5rem 0 0;color:var(--mut);font-size:.9rem}
/* text-wrap:pretty verhindert das einzelne Wort in der letzten Zeile. Bei
   1280 px passt der Satz ohnehin auf eine Zeile — die Regel greift für alle
   Breiten dazwischen, in denen er umbricht. Browser ohne Unterstützung
   ignorieren sie folgenlos. */
.nachsatz{margin-top:clamp(2.4rem,5vw,3.4rem);color:var(--mut);text-wrap:pretty}
/* ⚠️ Berührfläche über INNENABSTAND, und dafür ist inline-block Pflicht:
   an einem reinen Inline-Element verändert padding den Fluss nicht, der Link
   ragt unter seine Zeile und der Absatz darunter fängt die Tippfläche ab.
   Gemessen und behoben im Delmenhorster Handbuch. */
/* ⚠️ Die Nummer steht als EIGENES Element unter dem Satz, nicht in ihm.
   Im Fließtext brach der Satz auf „rufen Sie kurz / an. 0421 …" um — das
   Waisenwort und die Nummer landeten in derselben Zeile. Eine Formulierung
   zu suchen, die zufällig passt, wäre vom Textlängen-Glück abhängig; ein
   eigener Block kann gar nicht falsch umbrechen. */
.telzeile{display:inline-block;padding-block:.72rem;margin-top:.2rem;
  color:var(--rot);font-weight:600;white-space:nowrap;font-size:1.12rem}

/* ── Der Weg: eine durchgehende Fahrt, ans Scrollen gebunden ──────── */
/* ⚠️ DIE BAHN GIBT DEN SCROLLWEG, DIE BÜHNE KLEBT DARIN.
   700vh sind gerechnet, nicht geraten: 24,3 s Video auf 6 Fensterhöhen
   Scrollweg (700vh minus die eine sichtbare) ergeben bei 900 px Fenster
   rund 4,5 s Video je 1000 px Scroll. Kürzer wird die Fahrt hektisch,
   länger liest sie sich als Stillstand. */
.weg__bahn{position:relative;height:700vh;background:var(--tinte)}
.weg__buehne{position:sticky;top:0;height:100svh;overflow:hidden;
  background:var(--tinte)}
/* 🔴 contain, NICHT cover. Henri zweimal: „es ist sehr gezoomt … zoome nicht."
   `cover` füllt die Bühne, indem es das Bild vergrößert und beschneidet —
   bei 1280x860 waren das 16 % Beschnitt, bei einem hohen Fenster deutlich
   mehr. Das ist der Zoom, und er ist hier falsch: die Aufnahme IST der Weg,
   sie darf nicht angeschnitten werden.
   ⚠️ Preis dieser Entscheidung: bei Fenstern, die nicht 16:9 sind, bleiben
   Ränder in der Weltfarbe. Das ist ehrlicher als ein Ausschnitt. */
.weg__vid,.weg__seq{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;display:block;background:var(--tinte)}
/* Am Schreibtisch läuft das Video, am Handy die Bildfolge. Umgeschaltet wird
   per Attribut auf <html>, das weg.js setzt — nicht per Medienabfrage:
   entscheidend ist die GERÄTEklasse, nicht die Fensterbreite. */
.weg__seq{display:none}
html[data-weg="folge"] .weg__vid{display:none}
html[data-weg="folge"] .weg__seq{display:block}

/* ⚠️ SCHLEIER GERECHNET, nicht geschätzt. Die Fahrt geht durch pralle Sonne
   (helles Pflaster) und durch den dunklen Innenraum — ein fester Wert kann
   nicht für beides stimmen. Bei 92 % Deckung auf #181818 liegt der Untergrund
   selbst über weissem Bild bei rgb(40,40,40); Creme darauf ergibt 14,6:1.
   Im oberen, schwächeren Bereich (75 %) sind es noch 7,3:1. */
.weg__schleier{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,
    rgba(24,24,24,.92) 0%, rgba(24,24,24,.75) 30%,
    rgba(24,24,24,.18) 62%, rgba(24,24,24,.34) 100%)}
.weg__texte{position:absolute;left:0;right:0;bottom:0;
  padding:0 var(--rand) clamp(2.4rem,7vh,5rem)}
/* ⚠️ Der Abstand nach unten ist um 2,6rem groesser als es aussieht: darunter
   liegt das feste Entwurfsband. Ohne den Zuschlag steht der letzte Satz
   dahinter — im Bildschirmfoto sofort zu sehen, in keiner Pruefzahl. */
.weg__st{max-width:34rem;opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--aus),transform .5s var(--aus);
  position:absolute;bottom:calc(clamp(2.4rem,7vh,5rem) + 2.6rem);
  left:var(--rand);right:var(--rand);pointer-events:none}
.weg__st[data-an="1"]{opacity:1;transform:none}
.weg__st h2{color:var(--creme);font-size:clamp(1.8rem,4vw,3rem)}
.weg__st p{color:#E8E0D4;margin:.7rem 0 0;max-width:32rem;
  font-size:clamp(1rem,.5vw + .92rem,1.16rem)}
/* ⚠️ Ohne Skript trägt die erste Station allein — sonst stünde über der
   ganzen Fahrt kein einziges Wort. */
html:not([data-weg]) .weg__st:first-child{opacity:1;transform:none}

/* Fortschritt der Fahrt. --f setzt weg.js, derselbe Wert, der das Video
   treibt. Ruhezustand ist 0, also eine unauffällige Linie. */
.weg__leiste{position:absolute;left:var(--rand);right:var(--rand);bottom:3.2rem;
  height:2px;background:rgba(251,247,240,.22);overflow:hidden}
.weg__leiste i{display:block;height:100%;background:var(--creme);
  transform:scaleX(var(--f,0));transform-origin:left}
@media (max-width:46rem){
  .weg__leiste{bottom:6.6rem;background:var(--linie)}
  .weg__leiste i{background:var(--rot)}
}
.weg__hinweis{position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);
  color:#CFC6B8;font:400 .7rem/1 var(--text);letter-spacing:.24em;
  text-transform:uppercase;display:flex;align-items:center;gap:.6rem;
  transition:opacity .4s var(--aus)}
.weg__hinweis span{display:block;width:1px;height:1.6rem;
  background:linear-gradient(to bottom,transparent,#CFC6B8)}
html[data-weg-los] .weg__hinweis{opacity:0}

.wegkopf h1{font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.04}

/* ── Die Stationen als Liste. Am Schreibtisch versteckt, am Handy DIE
   Darstellung des Wegs. Die Linie läuft links durch, jede Station sitzt
   mit einem Punkt darauf. */
.wegliste{display:none}
.stationen{list-style:none;margin:0;padding:0;position:relative}
/* Die durchgehende Linie. ⚠️ Sie endet am letzten Punkt, nicht am
   Listenende — sonst läuft sie unter der letzten Station ins Leere.
   Dieselbe Falle wie beim Fahrplan in Beitrag 59. */
.stationen::before{content:"";position:absolute;left:.36rem;top:.7rem;
  bottom:0;width:1px;background:var(--linie)}
.stationen li{position:relative;padding:0 0 clamp(2rem,6vw,3rem) 2.1rem}
.stationen li:last-child{padding-bottom:0}
.stationen li::before{content:"";position:absolute;left:0;top:.5rem;
  width:.78rem;height:.78rem;border-radius:50%;background:var(--creme);
  border:1px solid var(--rot)}
.stationen li:last-child::before{background:var(--rot)}
/* ⚠️ Die Linie endet AM LETZTEN PUNKT, nicht am Listenende. Sonst läuft sie
   unter der letzten Station ins Leere und liest sich, als fehle eine —
   genau der Fehler aus dem Fahrplan in Beitrag 59. Gelöst durch Überdecken
   statt durch eine gerechnete Höhe: was in CSS geht, braucht kein Skript. */
.stationen li:last-child::after{content:"";position:absolute;left:.24rem;
  top:1.35rem;bottom:0;width:3px;background:var(--creme)}
.stationen img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  display:block;margin-bottom:.9rem}
.stationen h3{font-size:clamp(1.25rem,5vw,1.5rem);margin:0}
.stationen p{color:var(--mut);margin:.5rem 0 0;
  font-size:clamp(.98rem,.4vw + .9rem,1.06rem)}

/* 🔴 AM HANDY IST DAS BILD EIN BAND, KEINE FORMATFUELLENDE BUEHNE.
   Gerechnet: die Aufnahme ist 16:9, ein Handy ist 9:19. Mit object-fit:cover
   ueber die volle Fensterhoehe ist die Skalierung max(390/1440, 844/810)
   = 1,042 — sichtbar bleiben **26 % der Bildbreite**. Im Bildschirmfoto war
   vom Schild nur eine leere blaue Flaeche zu sehen und vom Olivenbaum ein
   brauner Fleck. Henri: „video ist scheiße eingebunden, komplett verzogen".
   ⚠️ Die ROHAUFNAHME haette daran nichts geaendert — sie ist dasselbe 16:9.
   Der Fehler lag in der Buehne, nicht im Material.
   ➜ Band im Originalverhaeltnis: 100 % der Bildbreite sichtbar, nichts
   beschnitten. Bei einem WEG ist der Beschnitt das Schlimmste, was man tun
   kann: man will ja sehen, wohin man geht.
   ⚠️ Der Text wandert dabei UNTER das Bild auf die Seitenfarbe. Dort steht
   Tinte auf Creme mit 16,63:1 statt heller Schrift auf wechselndem Bild. */
@media (max-width:46rem){
  /* Die Fahrt entfällt vollständig — samt ihrer 700vh Scrollweg. */
  .weg__bahn{display:none}
  .wegliste{display:block}
  .weg__buehne{display:flex;flex-direction:column;justify-content:center;
    gap:clamp(1.2rem,3vh,2rem);background:var(--creme);
    padding:1rem var(--rand) 5.5rem}
  .weg__vid,.weg__seq{position:static;width:100%;height:auto;
    aspect-ratio:16/9;object-fit:contain;background:var(--tinte)}
  .weg__schleier{display:none}
  /* ⚠️ Der Textcontainer bekommt eine Mindesthoehe und die Stationen liegen
     DARIN uebereinander. Ohne das stapeln sie sich untereinander und die
     Buehne waechst auf ein Vielfaches der Fensterhoehe. */
  .weg__texte{position:relative;padding:0;min-height:12rem;left:auto;right:auto;
    bottom:auto}
  .weg__st{position:absolute;inset:0;left:0;right:0;bottom:auto;max-width:none}
  .weg__st h2{color:var(--tinte);font-size:clamp(1.6rem,6vw,2.2rem)}
  .weg__st p{color:var(--mut)}
  /* Das feste Entwurfsband liegt sonst auf dem letzten Satz — gemessen im
     Bildschirmfoto, in keiner Pruefzahl. */
  .weg__hinweis{bottom:4.4rem;color:var(--mut)}
  .weg__hinweis span{background:linear-gradient(to bottom,transparent,var(--mut))}
}

@media (prefers-reduced-motion: reduce){
  /* Keine Fahrt: die Bahn schrumpft auf eine Bildhöhe, das Poster steht,
     und die Stationen stehen als Liste darunter. */
  .weg__bahn{height:auto}
  .weg__buehne{position:static;height:auto;aspect-ratio:16/9}
  .weg__texte{position:static;padding-top:2rem}
  .weg__st{position:static;opacity:1;transform:none;margin-bottom:1.8rem;
    left:auto;right:auto;bottom:auto}
  .weg__schleier,.weg__hinweis{display:none}
  .weg__st h2{color:var(--tinte)} .weg__st p{color:var(--mut)}
  .weg__texte{background:var(--creme)}
}

/* ── Fotos vom Shooting ───────────────────────────────────────────── */
.foto{width:100%;height:auto;display:block}
/* Ein Bild über die volle Breite, mit Luft darüber und darunter. */
.bildband{margin-block:clamp(2.4rem,5vw,4rem)}
.bildband img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
/* Zweier- und Dreierraster. minmax(min(100%,…)) statt blankem 1fr: ein
   blankes fr nimmt die Inhaltsbreite als Minimum und erzeugt Querlauf. */
.bilder2,.bilder3{display:grid;gap:clamp(.7rem,1.6vw,1.2rem);
  margin-top:clamp(2rem,4vw,3rem)}
.bilder2{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.bilder3{grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.bilder2 img,.bilder3 img{width:100%;height:100%;object-fit:cover;
  aspect-ratio:4/3}
.bilder3 img{aspect-ratio:3/4}
/* ⚠️ Bildunterschrift in --mut auf Creme = 6,14:1, nachgerechnet. */
.bildtext{color:var(--mut);font-size:.9rem;margin-top:.7rem}
/* ⚠️ HENRI, 14.08.: „bild immernoch zu groß. mache es nur auf eine seite."
   Ein Bild über die volle Breite ist auf einer typografischen Seite ein
   Fremdkörper: es drängt den Text weg und lässt den Abschnitt leer wirken.
   Jetzt Text links, Bild rechts — das Bild ist Beleg zum Satz daneben,
   nicht die Sektion selbst.
   ⚠️ 1fr 1.08fr, nicht 1:1: die Textspalte trägt Überschrift und zwei
   Absätze, die Bildspalte ein 16:9-Foto. Gleiche Breite ließe den Text
   gedrängt und das Bild überdimensioniert aussehen. */
.zweier{display:grid;gap:clamp(1.6rem,4vw,3.4rem);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr))}
@media (min-width:58rem){ .zweier{grid-template-columns:1fr 1.08fr} }
.zweier__text p:not(.ey){color:var(--mut);
  font-size:clamp(1rem,.4vw + .94rem,1.1rem);margin:1rem 0 0;max-width:32rem}
.zweier__text h2{margin-top:.2rem}
/* Kleines Bild neben einem Satz, unten auf der Seite. Feste Breite, damit
   ein hochkantes Foto die Zeile nicht sprengt. */
.klein{display:flex;gap:clamp(1rem,2.4vw,1.8rem);align-items:flex-start;
  margin-top:clamp(2.4rem,5vw,3.4rem)}
.klein .fig{flex:0 0 auto;width:clamp(7rem,16vw,10rem)}
.klein .fig img{aspect-ratio:3/4;object-fit:cover;width:100%;height:auto}
.klein p{color:var(--mut);font-size:.94rem;line-height:1.65;margin:0;
  max-width:30rem}
.fig{margin:0}
.fig img{display:block}
/* ⚠️ Die Bildunterschrift traegt --mut auf Creme = 6,14:1, nachgerechnet.
   Sie steht nah am Bild und in derselben Serife wie der Fliesstext — eine
   eigene Schriftart daneben waere eine zweite Stimme fuer eine Nebensache. */
.fig figcaption{color:var(--mut);font-size:.92rem;line-height:1.5;
  margin-top:.6rem;max-width:34rem}
.bilder2 .fig,.bilder3 .fig{display:flex;flex-direction:column}
.bilder2 .fig img,.bilder3 .fig img{flex:0 0 auto}

/* ── Zeitstrahl der Geschichte ────────────────────────────────────── */
.strahl{margin-top:clamp(2.4rem,5vw,4rem);position:relative}
.strahl::before{content:'';position:absolute;left:.36rem;top:.6rem;bottom:.6rem;
  width:1px;background:var(--linie);transform:scaleY(var(--zug,1));transform-origin:top}
.halt{position:relative;padding:0 0 2.4rem 2.6rem}
.halt::before{content:'';position:absolute;left:0;top:.42rem;width:.78rem;height:.78rem;
  border-radius:50%;background:var(--creme);border:1px solid var(--rot)}
.halt.jetzt::before{background:var(--rot)}
.halt b{display:block;font:400 .72rem/1 var(--text);letter-spacing:.22em;
  text-transform:uppercase;color:var(--rot);margin-bottom:.5rem}
.halt p{margin:0;color:var(--mut)}
.sand .halt::before{background:var(--sand)}
.sand .halt.jetzt::before{background:var(--rot)}

.aktionlink{display:inline-block;padding-block:.72rem;line-height:1.35}

/* ── Google-Note ──────────────────────────────────────────────────── */
.notenpaar{display:grid;gap:clamp(2rem,4vw,3.6rem);align-items:start}
@media (min-width:52rem){ .notenpaar{grid-template-columns:1fr .92fr} }
.balken{list-style:none;margin:0;padding:0}
.balken li{display:grid;grid-template-columns:2.4rem 1fr 3.1rem;align-items:center;
  gap:.7rem;padding:.34rem 0}
.balken b{font-weight:400;color:var(--mut);font-size:.9rem;white-space:nowrap}
.balken u{display:block;height:.42rem;border-radius:.21rem;text-decoration:none;
  background:var(--rot);opacity:.45}
.balken li:first-child u{opacity:1}
.balken span{color:var(--mut);font-size:.9rem;text-align:right;
  font-variant-numeric:tabular-nums}
/* ⚠️ Die Sterne sind aria-hidden, weil ein Screenreader sonst fünfmal
   „Stern" vorliest. Die Note steht als Satz daneben. */
.note{display:flex;align-items:center;gap:clamp(1.2rem,3vw,2.2rem);
  margin:clamp(2rem,4vw,3rem) 0 clamp(1.6rem,3vw,2.4rem);flex-wrap:wrap}
.note__zahl{margin:0;font:400 clamp(3.2rem,9vw,5rem)/.86 var(--disp);
  color:var(--rot);letter-spacing:-.02em}
.sterne{margin:0 0 .45rem;position:relative;display:inline-block;
  font-size:clamp(1.05rem,2.4vw,1.3rem);letter-spacing:.16em;line-height:1;
  color:var(--rot);opacity:1;white-space:nowrap}
.sterne span{opacity:.2}
.sterne i{position:absolute;top:0;left:0;overflow:hidden;font-style:normal;
  white-space:nowrap;width:var(--fuell)}
.note__meta{margin:0;color:var(--mut);font-size:.94rem;line-height:1.5}

/* ── Kontakt ──────────────────────────────────────────────────────── */
.paar{display:grid;gap:clamp(2rem,4vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));margin-top:2.6rem}
.zeit{display:flex;justify-content:space-between;gap:1.5rem;padding:.85rem 0;
  border-bottom:1px solid var(--linie)}
.zeit b{font-weight:400}
.zeit span{color:var(--mut)}
.adr{font-style:normal;line-height:1.9}
.adr a{color:inherit;text-decoration-color:var(--linie);text-underline-offset:.25em;
  display:inline-block;padding-block:.72rem}
.adr a:hover{text-decoration-color:var(--rot)}
/* ⚠️ Gleiches Muster wie .adr a: die Berührfläche wächst über INNENABSTAND,
   und display:inline-block ist dabei Pflicht — an einem reinen Inline-Element
   verändert padding den Fluss nicht, der Link ragt dann unter seine Zeile und
   der Absatz darunter fängt die Tippfläche ab. */
.iglink,.tippbar{display:inline-block;padding-block:.72rem}

/* ── Band mit dem Aufruf ──────────────────────────────────────────── */
.band{background:var(--sand);border-block:1px solid var(--linie);text-align:center}
.band h2{margin-bottom:1.2rem}
.band .telknopf{margin-top:.6rem}

/* ── Fuß ──────────────────────────────────────────────────────────── */
/* ⚠️ DER FUSS BRAUCHT SEINEN EIGENEN GEDÄMPFTEN TON. `--mut` (#655C51) ist für
   helle Flächen gerechnet und liegt auf dem dunklen Fuß bei 2,71:1. Gemessen:
   #A79D91 kommt dort auf 6,66:1. Die Variable wird deshalb im Fuß überschrieben,
   dann erben alle Bausteine darin automatisch den richtigen Wert. */
footer{background:var(--tinte);color:var(--creme);padding-block:clamp(3rem,5vw,4.5rem);
  --mut:#A79D91;--linie:rgba(251,247,240,.18)}
footer a{color:var(--creme);text-decoration-color:rgba(251,247,240,.35);
  text-underline-offset:.25em;display:inline-block;padding-block:.64rem}
footer a:hover{text-decoration-color:var(--creme)}
.fussgitter{display:grid;gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.fussgitter h4{font:400 .7rem/1 var(--text);letter-spacing:.24em;text-transform:uppercase;
  color:rgba(251,247,240,.6);margin:0 0 1rem}
.fusslinie{margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid rgba(251,247,240,.16);
  font-size:.86rem;color:rgba(251,247,240,.66);display:flex;flex-wrap:wrap;
  gap:.6rem 1.6rem;justify-content:space-between}

/* ── Entwurfsband ─────────────────────────────────────────────────── */
.entwurf{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--tinte);
  color:var(--creme);font-size:.78rem;line-height:1.5;padding:.7rem var(--rand);
  text-align:center}
body{padding-bottom:4.4rem}

/* ── Rechtstexte ──────────────────────────────────────────────────── */
.recht h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:2.6rem 0 .9rem}
.recht p,.recht li{color:var(--mut)}
.recht a:not(.telknopf){color:var(--rot)}
/* Die weiterführenden Zeilen („Die ganze Karte ansehen") sind Fließtextlinks und
   waren 25 px hoch. Innenabstand statt display, damit die Zeile einzeilig bleibt. */
.weiter{display:inline-block;padding-block:.62rem;text-decoration-color:var(--linie);
  text-underline-offset:.28em}
.weiter:hover{text-decoration-color:var(--rot)}

/* ── Bewegung ─────────────────────────────────────────────────────── */
/* ⚠️ RUHEZUSTAND IST SICHTBAR. Ohne Skript, bei reduzierter Bewegung und wenn die
   Choreografie stirbt, steht alles da. Genau der Fehler, den die Firmenseite bei
   `.reveal{opacity:0}` schon einmal hatte. */
[data-auf] .zl{display:block}
html[data-bewegt] [data-auf="warten"] .zl{opacity:0;transform:translateY(105%)}
html[data-bewegt] [data-auf="warten"] .stufe{opacity:0;transform:translateY(1.4rem)}
.maske{display:block;overflow:clip;padding:.1em .2em .16em;margin:-.1em -.2em -.16em}

@media (max-width:56rem){
  nav.haupt,.kopf .telknopf{display:none}
  .burger{display:inline-flex}
  nav.fach{position:fixed;inset:5rem 0 auto 0;height:calc(100svh - 5rem);
    background:var(--creme);border-top:1px solid var(--linie);
    display:flex;flex-direction:column;gap:.4rem;padding:2rem var(--rand);
    transform:translateX(100%);visibility:hidden;
    transition:transform .34s var(--aus),visibility 0s linear .34s;z-index:55}
  html[data-fach] nav.fach{transform:none;visibility:visible;transition-delay:0s}
  html[data-fach]{overflow:hidden}
  nav.fach a{font:400 1.6rem/1 var(--disp);text-decoration:none;padding:.85rem 0;
    border-bottom:1px solid var(--linie)}
  nav.fach .telknopf{margin-top:1.6rem;align-self:flex-start;font-size:1.05rem}
}
@media (min-width:56.0625rem){ nav.fach{display:none} }

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
.sprung{position:absolute;left:-9999px;top:0;z-index:99;background:var(--rot);
  color:#fff;text-decoration:none;padding:1rem 1.4rem;border-radius:0 0 .5rem 0}
.sprung:focus{left:0}
:focus-visible{outline:2px solid var(--rot);outline-offset:3px;border-radius:2px}