/* ==========================================================================
   Claude Community Hannover — Splash
   Eigene Palette: kühles Tiefschwarz gegen warmes Leinen, Ton "Ross-Terracotta".
   Typografie: Geist / Geist Mono (Vercel).
   ========================================================================== */

:root{
  --paper:      #f4f3ee;
  --paper-2:    #e7e4d9;
  --paper-3:    #dcd8ca;
  --void:       #0b0b0f;

  --ink:        #15151a;
  --ink-2:      #3a3a42;
  /* Haelt >= 4,5:1 auf Leinen UND auf dem dunkleren Panel-Ton. */
  --muted:      #616168;

  /* Alpha-Tinte statt Grau: toent sich auf jedem warmen Grund mit,
     wie in der Referenz (rgba(20,20,19,.1) / .2). */
  --line:       rgba(21,21,26,.11);
  --line-2:     rgba(21,21,26,.22);

  --clay:       #d0705a;
  --clay-deep:  #a5432c;

  --on-void:    #f4f3ee;
  --on-void-2:  #9d9da8;
  --line-void:  rgba(244,243,238,.13);

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  /* TEST: Geist Pixel (Variante Square) fuer die Headlines. Fallback ist
     bewusst Geist, damit beim Ladefehler nicht auf eine Systemschrift
     gesprungen wird. */
  --pixel: "Geist Pixel", "Geist", ui-sans-serif, system-ui, sans-serif;

  --wrap: 1400px;

  /* Eine "Container-Nummer" ist ein Schritt auf dieser Skala. Alles weiter
     unten rechnet in --step, damit Verschiebungen nicht geraten werden.
     Content, Kopfzeile und Fusszeile stehen eine Nummer enger als die
     Basisbreite; die Hero-Box steht zwei Nummern weiter als der Content. */
  --step: clamp(12px, 3.2vw, 60px);
  --gut-base: clamp(20px, 4.4vw, 64px);
  --gut: calc(var(--gut-base) + var(--step));
  --gut-l: max(var(--gut), env(safe-area-inset-left, 0px));
  --gut-r: max(var(--gut), env(safe-area-inset-right, 0px));

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .62s;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:88px;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.55;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

::selection{ background:var(--clay); color:#fff; }

.wrap{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  /* Querformat auf Geraeten mit Notch: Seitenraender respektieren */
  padding-left:var(--gut-l); padding-right:var(--gut-r);
}

.skip{
  position:fixed; top:8px; left:8px; z-index:200;
  transform:translateY(-200%);
  background:var(--ink); color:var(--paper);
  padding:10px 14px; border-radius:8px; font-size:14px; text-decoration:none;
  transition:transform .2s var(--ease);
}
.skip:focus-visible{ transform:none; }

:where(a,button,input):focus-visible{
  outline:2px solid var(--clay-deep);
  outline-offset:3px;
  border-radius:4px;
}
.hero :where(a,button,input):focus-visible{ outline-color:var(--clay); }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* ---------- Icons ---------- */
/* 20er-Raster, Haarlinien, currentColor. Die Strichbreite wird beim Skalieren
   nicht mitskaliert (non-scaling-stroke), damit sie bei 16 und 20 px gleich
   fein bleibt. */
.i{
  width:18px; height:18px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1;
  stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

/* ---------- Pixel-Ross ---------- */
/* Zweifarbig: Terracotta-Koerper, Maehne und Ohren eine Nuance dunkler,
   schwarzes Auge. Keine dritte Farbe, keine helle Schnauze. Kein Logo —
   das Ross steht ausschliesslich hinter dem CTA-Button. */
.ross{
  --r-body: #d0705a;
  /* Maehne, Schweif und Hufe. Die Vorlage setzt hier klaren Kontrast
     (#de8562 Koerper gegen #743c2b) — eine reine Nuance verschwindet. */
  --r-mane: #8a4330;
  --r-eye:  #0b0b0f;
  display:inline-block; line-height:0;
  /* Optischer Ausgleich: das Sprite belegt ueber alle Frames die Rasterspalten
     1..18 von 20 — links eine Spalte frei, rechts zwei. Beim mittigen Stand
     faellt diese halbe Zelle als Linksversatz auf (7 px bei 288 px Breite).
     0,5 von 20 = 2,5 %. Bewusst die eigenstaendige translate-Eigenschaft und
     nicht transform, weil app.js am transform des <svg> haengt (Sprung). */
  translate:2.5% 0;
}
.ross svg{ display:block; width:100%; height:auto; shape-rendering:crispEdges; }
.r-body{ fill:var(--r-body); }
.r-mane{ fill:var(--r-mane); }
.r-eye{ fill:var(--r-eye); }

/* Trefferflaeche: echter Button, damit auch die Tastatur ihn erreicht.
   Liegt hinter der CTA-Pille; anklickbar ist die freie obere Haelfte. */
.ross-hit{
  position:relative; z-index:0;
  /* Mobil steht das Ross im Fluss und mittig — so bestimmt seine Hoehe die
     Hoehe der Box. Bewusst breiter als die CTA-Pille (226 px), damit es
     links und rechts darunter hervorschaut statt dahinter zu verschwinden. */
  display:block; margin-inline:auto;
  width:min(100%, 288px);
  max-width:100%;
  padding:0; border:0; background:none;
  cursor:pointer; line-height:0;
  -webkit-tap-highlight-color:transparent;
}
.ross-hit:focus-visible{ outline:2px solid var(--clay-deep); outline-offset:6px; border-radius:6px; }
.ross--detail{ display:block; width:100%; }
.ross--detail svg{ transition:transform .09s linear; }
.ross-hit:hover .ross--detail{ --r-body:#d87b64; --r-mane:#964b36; }
@media (prefers-reduced-motion: no-preference){
  .ross--detail{ transition:none; }
}

/* Zwinkern: alle 8 s verschwindet das Auge zweimal kurz hintereinander
   (je ~150 ms, ~165 ms Pause). Getauscht wird die FUELLFARBE gegen den
   Koerperton — nicht die Deckkraft. Das Auge ist eine Luecke im Koerperpfad;
   mit opacity:0 schien die Seite durch und es blitzte hell auf.
   Die Plateaus liegen dicht beieinander, damit nichts sichtbar ueberblendet. */
.js .rd-eye{ animation:wink 8s linear infinite; }
@keyframes wink{
  0%    { fill:var(--r-eye) }
  82.4% { fill:var(--r-eye) }
  82.5% { fill:var(--r-body) }
  84.4% { fill:var(--r-body) }
  84.5% { fill:var(--r-eye) }
  86.4% { fill:var(--r-eye) }
  86.5% { fill:var(--r-body) }
  88.4% { fill:var(--r-body) }
  88.5% { fill:var(--r-eye) }
  100%  { fill:var(--r-eye) }
}

/* ---------- Scroll-Progress ---------- */
.progress{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:120;
  pointer-events:none;
}
.progress span{
  display:block; height:100%; width:100%;
  background:var(--clay);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .12s linear;
}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:100;
  /* viewport-fit=cover ist gesetzt, also muessen die Safe-Area-Insets hier
     auch beruecksichtigt werden — sonst rutscht die Kopfzeile auf Geraeten
     mit Notch darunter. */
  padding-top:calc(16px + env(safe-area-inset-top, 0px));
  padding-bottom:16px;
  background:color-mix(in srgb, var(--paper) 80%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
  transition:padding-block .32s var(--ease), border-color .32s var(--ease);
}
.topbar.is-stuck{
  padding-top:calc(10px + env(safe-area-inset-top, 0px));
  padding-bottom:10px;
  /* Die 12 px, die das Padding abgibt, kommen als Aussenabstand zurueck:
     Die Kopfzeile ist sticky und liegt im Fluss. Schrumpfte sie wirklich,
     wuerde das Dokument waehrend des Uebergangs kuerzer — Safari/WebKit
     (kein Scroll Anchoring) bricht dann das sanfte Scrollen zu Ankern ab,
     z. B. beim Tippen auf "Auf dem Laufenden bleiben" (gemessen 2026-10-10).
     Gleiche Dauer und Kurve wie das Padding: Summe in jedem Frame 32 px. */
  margin-bottom:12px;
  border-bottom-color:var(--line);
}

/* Ueber der schwarzen Hero-Sektion dreht die Kopfzeile ins Dunkle. Ohne das
   mischt sich der helle Milchglas-Grund mit Schwarz zu einem grauen Balken mit
   dunkler Schrift darauf — das sieht wie ein Renderfehler aus. Faellt erst auf,
   seit die Sektion auf volle Breite bis unter die Kopfzeile laeuft. */
.topbar,
.topbar .brand,
.topbar .brand-sep,
.topbar .nav a{
  transition:background-color .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), padding-top .32s var(--ease),
             padding-bottom .32s var(--ease), margin-bottom .32s var(--ease);
}
.topbar.is-on-dark{
  background:color-mix(in srgb, var(--void) 74%, transparent);
  border-bottom-color:rgba(244,243,238,.12);
}
.topbar.is-on-dark .brand{ color:var(--on-void); }
.topbar.is-on-dark .brand-sep{ color:rgba(244,243,238,.34); }
.topbar.is-on-dark .nav a{ color:var(--on-void-2); }
.topbar.is-on-dark .nav a:hover,
.topbar.is-on-dark .nav a.is-active{ color:var(--on-void); }
.topbar-in{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-left:var(--gut-l); padding-right:var(--gut-r);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{
  display:inline-flex; align-items:center; gap:11px; min-width:0;
  padding-block:11px;         /* Tap-Ziele: 44 px, WCAG 2.5.5 */
  text-decoration:none; color:var(--ink);
}
.brand-text{
  font-size:14.5px; letter-spacing:-.012em; white-space:nowrap;
  display:inline-flex; align-items:baseline; gap:7px;
}
.brand-text b{ font-weight:560; }
.brand-sep{ color:var(--line-2); }

.nav{ display:flex; gap:2px; flex:0 0 auto; }
.nav a{
  position:relative; display:inline-block; padding:12px 12px;
  font-size:13.5px; color:var(--muted); text-decoration:none;
  transition:color .22s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:2px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:0 50%;
  transition:transform .34s var(--ease-out);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ transform:scaleX(1); }
.nav a.is-active{ color:var(--ink); }
.nav a.is-active::after{ transform:scaleX(1); background:var(--clay); }

/* ---------- Typo-Bausteine ---------- */
.eyebrow{
  margin:0 0 clamp(16px,2.4vw,26px);
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--clay-deep);
}
.eyebrow--dark{ color:var(--clay); }

.lede{
  margin:0;
  /* 59 px ab ~1055 px. Drei Zeilen sind gewollt (luftiger), und der Umbruch
     soll an der Satzgrenze liegen: "... bauen." schliesst Zeile 2 ab,
     "In Hannover." steht allein auf Zeile 3.
     3,7rem ist der groesste Deckel, bei dem Satz 1 von 1200 bis 2560 px in
     ZWEI Zeilen passt; bei 3,9rem braucht er ab 1200 px drei.
     Der Faktor 5,0vw haelt dieselbe Bedingung auch im Bereich 860-1199 px:
     bei 5,2vw kippt es bei 1100 px auf vier Zeilen. Beides ermittelt, nicht
     geschaetzt.
     text-wrap:balance bleibt: gemessen der beste Flattersatz ueber alle
     Breiten (kuerzeste/laengste Zeile 0,82 bei 320 px gegen 0,35 ohne). */
  font-family:var(--pixel);
  font-size:clamp(2.1rem, 4.7vw, 3.7rem);
  line-height:1.04;
  /* Pixelraster vertraegt keine negative Laufweite — die Kaesten wuerden
     ineinanderlaufen. */
  letter-spacing:0;
  /* Geist Pixel hat NUR die Formachse ELSH und genau ein Gewicht
     (usWeightClass 400) — einen Fettschnitt gibt es nicht. "Dicker" kommt
     daher aus einer Kontur in Textfarbe, die mit der Schriftgroesse
     mitskaliert (0,018em = 1,4 px bei 77 px). Bewusst nicht font-weight:700:
     das waere synthetischer Fettdruck, und den rechnet jede Engine anders. */
  font-weight:400;
  -webkit-text-stroke:0.018em currentColor;
  paint-order:stroke fill;
}
.h2{
  margin:0;
  font-family:var(--pixel);
  font-size:clamp(1.42rem, 2.5vw, 2.05rem);
  line-height:1.17; letter-spacing:0; font-weight:400;
  max-width:24ch; text-wrap:balance;
}
.body{ margin:13px 0 0; color:var(--ink-2); max-width:48ch; }
/* Subheadline unter der H1 — traegt die Aussage mit, ist kein Kleingedrucktes */
.note{
  margin:0;
  font-size:clamp(16.5px, 1.25vw, 19px);
  line-height:1.55; color:var(--ink-2); max-width:46ch;
}

/* ---------- 1 Intro ---------- */
.intro{ padding-block:clamp(42px,7vh,84px) clamp(42px,6.5vh,78px); }
.intro-grid{
  display:grid; gap:26px 40px;
  grid-template-columns:minmax(0,1fr);
  align-items:center;
}
@media (min-width:860px){
  /* Exakt 2/3 zu 1/3 — Spaltenteiler UND Rinne sind identisch zu .sched-grid,
     damit die Headline-Spalte hier genau so breit ist wie die Ablaufplan-
     Spalte weiter unten. Beide Werte muessen zusammen geaendert werden. */
  .intro-grid{
    grid-template-columns:minmax(0,2fr) minmax(0,1fr);
    column-gap:clamp(32px,4.5vw,72px);
  }
}
/* Im Intro ist .note der Lead unter der H1: groesser und in voller Tinte,
   damit er sich klar vom Hinweis darunter absetzt. */
.intro-copy .note{
  margin-top:clamp(18px,2.2vw,24px);
  font-size:clamp(1.2rem, 1.75vw, 1.5rem);
  line-height:1.4; letter-spacing:-.012em;
  color:var(--ink); max-width:34ch;
}
.intro-cta{
  position:relative; isolation:isolate;
  /* Mobil spannt das Ross selbst die Hoehe auf und der Button liegt
     zentriert darueber — eine feste min-height wuerde nicht mitwachsen und
     das Ross ragte nach oben in die Subheadline.
     Ab 860 px steht beides rechts in der schmalen Spalte. */
  display:block;
}
/* Nur das rechtsbuendige Ross im Intro braucht den Ausgleich nicht — dort
   ist der Anschnitt an der rechten Kante ueber right:-10px eingestellt.
   Das mittige Ross im Abschluss behaelt ihn auf jeder Breite. */
@media (min-width:860px){
  .intro-cta .ross{ translate:none; }
  .intro-cta{
    display:flex; align-items:flex-end; justify-content:flex-end;
    min-height:clamp(168px, 16vw, 232px);
    padding-bottom:clamp(12px, 2vw, 26px);
  }
  .cta-ghost{
    position:relative; inset:auto; margin-inline:0; width:auto;
  }
  .ross-hit{
    position:absolute; right:-10px; bottom:2px;
    margin-inline:0;
    width:clamp(152px, 42vw, 288px);
    max-width:calc(100% + 18px);
  }
}
.cta-ghost{
  /* Mobil unten mittig ueber dem Ross. Zentriert ueber inset + auto-Margin
     und nicht per translateX, weil :active ein translateY setzt und den
     Button sonst aus der Mitte reissen wuerde. */
  position:absolute; z-index:1;
  left:0; right:0; bottom:18px; margin-inline:auto; width:fit-content;
  display:inline-flex; align-items:center; gap:10px;
  font-size:15px; font-weight:500; letter-spacing:-.008em;
  color:var(--paper); text-decoration:none;
  padding:13px 20px 13px 22px;
  background:var(--ink); border:1px solid var(--ink); border-radius:999px;
  white-space:nowrap;
  transition:background-color .26s var(--ease), transform .2s var(--ease);
}
.cta-ghost svg{ width:15px; height:15px; transition:transform .34s var(--ease-out); }
.cta-ghost:hover{ background:#000; }
.cta-ghost:hover svg{ transform:translateX(3px); }
.cta-ghost:active{ transform:translateY(1px); }

/* ---------- 2 Hero (schwarz) ---------- */
/* --hero-p laeuft von 0 (boxed) bis 1 (volle Breite) und wird beim Scrollen
   in app.js gesetzt. Die schwarze Flaeche steckt in .hero-box; der Inhalt
   liegt daneben im normalen .wrap und bewegt sich deshalb gar nicht. */
/* Startbreite der schwarzen Box: ZWEI Nummern weiter als der Content-
   Container. Basis ist der Einzug von .wrap (halbe Restbreite bis --wrap plus
   Gutter); davon gehen zwei Schritte ab, damit links und rechts des Textes
   reichlich schwarzer Rand bleibt. Der Mindestrand haelt die Box auch auf
   kleinen Schirmen als Box erkennbar.
   Nur der Hero benutzt das noch: die Ortssektion steht von Anfang an auf
   voller Breite. */
.hero{
  --box-min:clamp(10px, 2.4vw, 24px);
  --box-h:max(
    calc(max((100% - var(--wrap)) / 2, 0px) + var(--gut) - 2 * var(--step)),
    var(--box-min)
  );
  --box-r:clamp(10px, 1.2vw, 18px);
}

.hero{
  --hero-p:0;
  position:relative; isolation:isolate;
  color:var(--on-void);
  min-height:clamp(500px, 78svh, 820px);
  display:grid; align-items:center;
  padding-block:clamp(56px,7vw,96px);
}
.hero-box{
  position:absolute; z-index:-1; overflow:hidden;
  background:var(--void);
  top:0; bottom:0;
  left:calc((1 - var(--hero-p)) * var(--box-h));
  right:calc((1 - var(--hero-p)) * var(--box-h));
  border-radius:calc((1 - var(--hero-p)) * var(--box-r));
}
/* Das Canvas ist immer so breit wie die SEKTION, nicht wie die Box. Breite,
   Hoehe und die Verschiebung setzt JS. Die Box klippt es nur (overflow:hidden)
   — dadurch wird beim Aufziehen kein Bitmap neu alloziert und die Kugel
   veraendert weder Groesse noch Lage. */
.globe{
  position:absolute; top:0; left:0; height:100%;
  opacity:0;
  transition:opacity 1.2s var(--ease);
  will-change:transform;
}
.globe.is-ready{ opacity:1; }
.hero-veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(100deg, var(--void) 4%, rgba(11,11,15,.80) 26%, rgba(11,11,15,.14) 48%, transparent 62%),
    radial-gradient(140% 105% at 62% 50%, transparent 62%, rgba(11,11,15,.30) 90%, rgba(11,11,15,.55) 100%);
}
.hero-edge{
  position:absolute; inset:auto 0 0 0; height:1px;
  background:linear-gradient(90deg, transparent, var(--line-void) 18%, var(--line-void) 82%, transparent);
}
.hero-in{ position:relative; }
.hero-date{
  margin:0;
  font-family:var(--pixel);
  font-size:clamp(2.9rem, 9.6vw, 7.6rem);
  /* Pixelraster: Laufweite auf 0, sonst laufen die Ziffern ineinander. */
  line-height:.93; letter-spacing:0; font-weight:400;
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1;
}
.hero-meta,
.ort-meta{
  margin:clamp(30px,4.4vw,52px) 0 0;
  display:flex; flex-wrap:wrap; gap:0;
  border-top:1px solid var(--line-void);
  /* Die Linie endet vor dem Globus, statt quer durch ihn zu laufen.
     Fester Wert statt Prozent: der Prozentdeckel liess die Zeile im
     Querformat umbrechen, und die umgebrochene Zelle erbte den linken
     Innenabstand der Folgezellen. */
  max-width:620px;
}
.hero-meta > div,
.ort-meta > div{
  padding:17px 26px 17px 0; min-width:148px;
  border-right:1px solid var(--line-void);
}
.hero-meta > div + div,
.ort-meta > div + div{ padding-left:26px; }
/* Im Hero vier Zellen (Tag, Stadt, Location, Plaetze): schmalere Zellen,
   damit die Zeile vor dem Globus endet und nicht umbricht. */
.hero-meta{ max-width:660px; }
.hero-meta > div{ min-width:118px; }
.hero-meta > div:last-child,
.ort-meta > div:last-child{ border-right:0; }
.hero-meta dt,
.ort-meta dt{
  margin:0 0 4px;
  display:flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--on-void-2);
}
.hero-meta dt .i,
.ort-meta dt .i{ width:15px; height:15px; }
.hero-meta dd,
.ort-meta dd{ margin:0; font-size:19px; letter-spacing:-.014em; }
/* Location im Hero springt zur Ort-Sektion: Akzentfarbe mit Unterstreichung
   (Wunsch Holger). #d0705a auf --void: 5,6:1. */
.hero-meta dd a{
  color:var(--clay); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:4px;
  transition:color .24s var(--ease);
}
.hero-meta dd a:hover{ color:#e08a74; }
.tba{
  display:inline-block;
  font-family:var(--mono); font-size:13px; letter-spacing:.08em;
  padding:3px 9px 4px; border-radius:5px;
  color:var(--on-void);
  background:rgba(208,112,90,.16);
  border:1px solid rgba(208,112,90,.42);
}
/* Kalender-Link und Koordinaten teilen sich eine Zeile unter der Leiste. */
.hero-foot{
  margin:clamp(22px,3vw,32px) 0 0;
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px;
}
.cal-link{
  display:inline-flex; align-items:center; gap:9px;
  min-height:44px;            /* Tap-Ziel, WCAG 2.5.5 */
  padding:0 18px 0 15px;
  font-size:14.5px; font-weight:500; letter-spacing:-.008em;
  color:var(--on-void); text-decoration:none;
  border:1px solid rgba(244,243,238,.28); border-radius:999px;
  transition:background-color .24s var(--ease), border-color .24s var(--ease);
}
.cal-link .i{ width:16px; height:16px; color:var(--clay); }
.cal-link:hover{ background:rgba(244,243,238,.08); border-color:rgba(244,243,238,.5); }
.hero-coords{
  margin:0;
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--on-void-2);
}
.hero-coords .dot{
  width:6px; height:6px; border-radius:50%; background:var(--clay);
}

/* ---------- 3 Ablauf ---------- */
.sched{ padding-block:clamp(56px,8.5vw,104px); }
/* Auf grossen Schirmen sitzt der Ablauf in den rechten 2/3 der Spalte. Setzt
   einen bewussten Gegenakzent zum Intro, das links 2/3 belegt. */
.sched-note{ margin-top:clamp(14px,2vw,20px); }
/* Untereinander braucht die Notiz Luft zur Liste; nebeneinander (>=1200)
   setzt die Spalte den Abstand. */
@media (max-width:1199px){ .sched-side{ margin-bottom:clamp(26px,4vw,40px); } }
@media (min-width:1200px){
  /* Links der komplette Text (Label, Ueberschrift, Notiz), rechts der Plan. */
  .sched-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,2fr);
    column-gap:clamp(32px,4.5vw,72px);
    align-items:start;
  }
  .sched-side{ grid-column:1; }
  .sched-list{ grid-column:2; }
  .sched-head{ margin-bottom:clamp(20px,2.4vw,28px); }
  .sched-note{ max-width:32ch; margin-top:0; }
}
.sched-head{ margin-bottom:clamp(30px,4.2vw,46px); }
.sched-list{
  list-style:none; margin:0; padding:0;
  max-width:1080px;
  border-top:1px solid var(--line-2);
  counter-reset:s;
}
.sched-list li{
  display:grid;
  grid-template-columns:34px 18px minmax(0,1fr) auto;
  align-items:center; gap:16px;
  padding:23px 2px;
  border-bottom:1px solid var(--line);
  transition:background-color .3s var(--ease), padding-left .34s var(--ease-out);
}
.sched-list li:hover{ background:var(--paper-2); padding-left:14px; }
.sched-no{
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.1em; color:#62625d;
}
.sched-title{ font-size:17.5px; letter-spacing:-.014em; }
/* Sprecher unter dem Titel; offene Slots blasser */
.sched-who{ display:block; margin-top:3px; font-size:14px; letter-spacing:-.006em; color:var(--ink-2); }
.sched-who--offen{ color:var(--muted); }
.sched-time{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.11em; color:var(--clay-deep); white-space:nowrap;
}
.sched-i{ color:var(--muted); transition:color .26s var(--ease); }
.sched-list li:hover .sched-i{ color:var(--clay-deep); }


/* ---------- 4 Ort (schwarz, volle Breite, sticky) ---------- */
/* Die Spur gibt die Scrolllaenge, die Buehne bleibt darin stehen. Aus dem
   Verhaeltnis der beiden kommt spaeter der Fortschritt fuer den Zoom auf den
   Eingang — dieselbe Mechanik wie --hero-p oben, nur mit eigener Quelle. */
/* Volle Breite von Anfang an. Die Box-Geste bleibt dem Hero vorbehalten:
   sie hier zu wiederholen hiess zwei bewegte Ebenen gleichzeitig, und die
   vom CSS bewegte Kante liess sich nicht ruckelfrei mit dem Canvas
   zusammenhalten — die JS-Kompensation hinkt prinzipbedingt ein Bild
   hinterher. Jetzt bewegt sich in dieser Sektion genau eine Sache:
   die Kamerafahrt. */
.ort{ background:var(--void); color:var(--on-void); }
.ort-box{ position:absolute; inset:0; overflow:hidden; }
/* Die Laenge ueber die Buehne hinaus ist der Weg der Zoomfahrt. */
.ort-track{ position:relative; height:250vh; }
.ort-stage{
  position:sticky; top:0;
  /* Feste Hoehe plus overflow:hidden schnitt bei 320x568 px Text ab (595 px
     Inhalt in 568 px Buehne). Die Buehne waechst jetzt mit; sticky funktioniert
     auch, wenn sie hoeher als der Viewport ist. */
  min-height:100svh;
  overflow:hidden;
  display:flex;
  /* "safe" ist hier entscheidend: bei zentrierter Ausrichtung schneidet ein
     ueberlaufendes Kind oben ab, und abgeschnittener Text ist nicht
     scrollbar. safe center faellt in dem Fall auf flex-start zurueck. */
  align-items:safe center;
  padding-block:clamp(20px,4vh,40px);
}
.bau{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* Legt den Text vor das Modell, damit er auf jeder Zeichnung lesbar bleibt. */
.ort-veil{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,
    var(--void) 0%,
    color-mix(in srgb, var(--void) 78%, transparent) 40%,
    transparent 72%);
}
.ort-in{ position:relative; width:100%; }
.ort .eyebrow{ color:var(--clay); }
.h2--dark{ color:var(--on-void); }
.ort .body{ color:var(--on-void-2); }
.ort-meta{
  margin-top:clamp(26px,3.6vw,40px);
  /* Weiter als im Hero (620 px): drei Zellen mit laengeren Werten brachen
     dort um, und die umgebrochene Zelle verlor die Trennlinie. */
  max-width:880px;
}
.ort-note{ max-width:44ch; }
.ort-quelle{
  margin:clamp(18px,2.4vw,26px) 0 0;
  max-width:52ch;
  font-size:13px; line-height:1.55; color:var(--on-void-2);
}
.ort-quelle span{ white-space:nowrap; }

/* Die Werte sind laenger als im Hero (706 px gegen 651 px Inhaltsbreite bei
   768 px Schirm), deshalb stapelt die Ortsleiste schon unter 1024 px statt
   erst unter 720 px wie die Hero-Leiste. */
@media (max-width:1023px){
  .ort-meta{ flex-direction:column; }
  .ort-meta > div{
    width:100%; border-right:0;
    border-bottom:1px solid var(--line-void);
    padding:15px 0;
  }
  .ort-meta > div + div{ padding-left:0; }
}


/* Das Badge im Hero verweist jetzt nach unten auf die Ortssektion. */
.tba--link{
  text-decoration:none;
  transition:background-color .24s var(--ease), border-color .24s var(--ease);
}
.tba--link:hover{
  background:rgba(208,112,90,.26);
  border-color:rgba(208,112,90,.7);
}

/* ---------- 4 Newsletter ---------- */
.news{ padding-block:clamp(8px,1.4vw,20px) clamp(56px,8vw,96px); }
.news-panel{
  display:grid; gap:clamp(30px,4vw,56px);
  grid-template-columns:minmax(0,1fr);
  align-items:end;
  padding:clamp(26px,3vw,40px) clamp(24px,2.6vw,36px);
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:18px;
}
@media (min-width:880px){
  .news-panel{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center;
    padding:clamp(34px,3.4vw,46px) clamp(28px,2.8vw,40px);
  }
}
.news-form{ margin:clamp(24px,3vw,32px) 0 0; }
@media (min-width:880px){ .news-form{ margin:0; } }
.field label{
  display:block; margin-bottom:9px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
}
.field-row{ display:flex; gap:10px; flex-wrap:wrap; max-width:520px; }
input[type=email]{
  flex:1 1 220px; min-width:0;
  height:52px; padding:0 16px;
  font-family:inherit; font-size:16.5px; color:var(--ink);
  background:#fdfdfb;
  /* Eigener Rahmenton statt --line-2: als Begrenzung eines Bedienelements
     braucht er 3:1 (WCAG 1.4.11). --line-2 lag als Alpha-Tinte ueber dem
     Panel bei 1,99:1 gegen die Feldfuellung. #807c72 = 4,09:1. */
  border:1px solid #807c72; border-radius:10px;
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease);
}
input[type=email]::placeholder{ color:#767269; }
input[type=email]:hover{ border-color:#5f5c54; }
input[type=email]:focus{
  outline:none; border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(21,21,26,.09);
}
.news-form.is-invalid input[type=email]{
  border-color:var(--clay-deep);
  box-shadow:0 0 0 3px rgba(165,67,44,.12);
}
.btn{
  position:relative;
  height:52px; padding:0 22px;
  font-family:inherit; font-size:15.5px; font-weight:500; letter-spacing:-.008em;
  color:var(--paper); background:var(--ink);
  border:1px solid var(--ink); border-radius:10px; cursor:pointer;
  transition:background-color .24s var(--ease), transform .18s var(--ease), opacity .2s var(--ease);
}
.btn:hover{ background:#000; }
.btn:active{ transform:translateY(1px); }
.btn[disabled]{ cursor:default; opacity:.72; }
.btn-spin{
  position:absolute; inset:0; margin:auto;
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(244,243,238,.3); border-top-color:var(--paper);
  opacity:0;
}
.news-form.is-busy .btn-label{ opacity:0; }
.news-form.is-busy .btn-spin{ opacity:1; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }
.hint{ margin:11px 0 0; font-size:13px; color:var(--muted); max-width:46ch; }
.news-form.is-invalid .hint{ color:var(--clay-deep); }
.news-form.is-note .hint{ color:var(--ink-2); }
.news-form.is-done .hint{ color:#1f6b45; }

/* noscript-Hinweis */
.noscript-note{
  margin:0; padding:12px var(--gut);
  background:var(--paper-2); border-bottom:1px solid var(--line);
  font-size:14px; color:var(--ink-2); text-align:center;
}

/* ---------- 5 Footer ---------- */
.foot{
  padding:30px 0 calc(38px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--line);
}
.foot-in{ display:flex; flex-direction:column; gap:16px; }
.foot-row{
  display:flex; flex-wrap:wrap; gap:14px 36px;
  align-items:center; justify-content:space-between;
}
.foot-brand{
  font-size:14px; letter-spacing:-.01em;
}
.foot-links{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 22px; margin:0; font-size:13.5px; }
.foot-links a{
  display:inline-block;
  padding-block:11px;         /* Tap-Ziele: 44 px, WCAG 2.5.5 */
  font-size:13.5px; color:var(--muted); text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .22s var(--ease), border-color .22s var(--ease);
}
.foot-links a:hover{ color:var(--ink); border-bottom-color:var(--line-2); }
.foot-legal{
  margin:0; font-size:13px; line-height:1.6; color:#62625d; max-width:66ch;
}

/* ---------- Reveal ---------- */
.js .reveal{
  opacity:0; transform:translate3d(0,14px,0);
  transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  transition-delay:calc(var(--d,0) * 70ms);
}
.js .reveal.is-in{ opacity:1; transform:none; }

/* ---------- Mobile ---------- */
@media (max-width:719px){
  body{ font-size:16.5px; }
  /* Der Globus sitzt hier oben in der Sektion. Inhalt deshalb nach unten
     ausrichten, sonst laeuft die Kugel in die Typo. */
  .hero{ align-items:end; padding-block:0 clamp(30px,6vw,52px); }
  .nav a{ padding:10px 9px; }   /* Tap-Ziele */
  .hero-veil{
    background:
      linear-gradient(180deg, transparent 0%, rgba(11,11,15,.22) 16%, rgba(11,11,15,.86) 34%, var(--void) 52%),
      radial-gradient(120% 55% at 60% 18%, transparent 52%, rgba(11,11,15,.45) 100%);
  }
  /* Die Kopfzeile bricht hier zweizeilig um (96 px angeheftet, 108 px am
     Seitenanfang). Mit 72 px landeten Sprungziele unter ihr. */
  html{ scroll-padding-top:112px; }
  .nav{ margin-right:-9px; }
  .nav a{ padding:7px 9px; font-size:12.5px; }
  .nav a::after{ left:9px; right:9px; }
  .brand-text{ font-size:13px; }
  .hero-meta,
  .ort-meta{ flex-direction:column; }
  .hero-meta > div,
  .ort-meta > div{ width:100%; border-right:0; border-bottom:1px solid var(--line-void); padding:15px 0; }
  .hero-meta > div + div{ padding-left:0; }
  .hero-meta > div:last-child{ border-bottom:0; }
  /* Der Text laeuft hier ueber die volle Breite, der seitliche Schleier
     deckt ihn nicht mehr ab — das Modell lief quer durch die Schrift.
     Flaechig abdunkeln, das Modell bleibt als Textur sichtbar. */
  .ort-veil{
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--void) 62%, transparent) 0%,
        color-mix(in srgb, var(--void) 80%, transparent) 60%,
        color-mix(in srgb, var(--void) 62%, transparent) 100%);
  }
  .sched-list li{ grid-template-columns:26px 17px minmax(0,1fr) auto; gap:11px; }
  .sched-i{ width:17px; height:17px; }
  .sched-title{ font-size:16.5px; }
  .btn{ width:100%; }
}
/* Marke auf den Kern kuerzen, sobald Marke + Navigation nicht mehr nebeneinander passen */
@media (max-width:620px){
  .brand-sep,.brand-city{ display:none; }
}
@media (max-width:420px){
  .brand-text{ font-size:12.5px; }
  .nav a{ padding:7px 6px; font-size:11.5px; }
  .nav a::after{ left:6px; right:6px; }
}
@media (max-width:340px){
  /* Kein Kuerzel: die Marke bleibt lesbar, stattdessen wird die Navigation
     straffer gesetzt. */
  .brand-text{ font-size:11.5px; }
  .nav a{ padding:10px 5px; font-size:11px; }
  .nav a::after{ left:5px; right:5px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .globe{ opacity:1; }
}

/* ---------- 6 Veranstalter ---------- */
/* Zentrierter Aufbau: Ueberschrift mittig, darunter zwei Spalten, die zur
   Mitte hin ausgerichtet sind — Holger von links nach rechts, Bjoern
   umgekehrt. Name und Rolle stehen unter dem Bild und sind auf dessen
   Breite zentriert, nicht auf die Spalte. */
.team{ padding-block:clamp(56px,8vh,104px); }
.team-head{
  text-align:center;
  margin:0 auto clamp(34px,4.6vw,54px);
  max-width:36ch;
}
.team-head .h2{ margin-inline:auto; }
.team-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(30px,4vw,48px);
  grid-template-columns:1fr;
}
.team-list li{ display:flex; justify-content:center; }
@media (min-width:640px){
  .team-list{ grid-template-columns:1fr 1fr; }
  .team-list li:first-child{ justify-content:flex-end; }
  .team-list li:last-child { justify-content:flex-start; }
}
.team-karte{ text-align:center; max-width:min(100%, 240px); }
/* Die beiden Bilder haben sehr verschiedene Hintergruende, hell und dunkel.
   Ein gemeinsamer Rahmen in gleicher Groesse fasst sie zusammen, statt sie
   per Filter anzugleichen — das wuerde die Portraets veraendern. */
.team-bild{
  display:block; margin-inline:auto;
  width:clamp(128px, 15vw, 200px); height:auto;
  aspect-ratio:1 / 1; object-fit:cover;
  border-radius:10px;
  border:1px solid var(--line-2);
  background:var(--paper-2);
}
.team-name{
  margin:clamp(14px,1.8vw,20px) 0 0;
  font-size:clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight:500; letter-spacing:-.012em;
}
.team-rolle{
  margin:6px 0 0;
  font-family:var(--mono); font-size:12px;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted);
}
.team-job{ margin:6px 0 0; font-size:14.5px; line-height:1.45; color:var(--ink-2); }
/* Sponsor unter den Portraets, mittig. Das Logo ist einfarbig Anthrazit
   (ink-2) direkt in der SVG-Datei, weil <img> kein currentColor erbt. */
.sponsor{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  max-width:560px; margin:clamp(52px,6.5vw,80px) auto 0;
  padding-top:clamp(30px,3.6vw,44px);
  border-top:1px solid var(--line-2);
}
.sponsor-label{
  margin:0;
  font-family:var(--mono); font-size:12px;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted);
}
.sponsor-logo{ display:inline-block; margin-top:16px; padding:6px; border-radius:6px; }
.sponsor-logo img{ display:block; width:clamp(150px,15vw,190px); height:auto; }

/* ---------- 404 ---------- */
/* Das Ross sieht sich um und findet nichts: links, rechts, links, dann ein
   Fragezeichen. 9-s-Schleife, Wechsel hart (Pixel-Look, kein Drehen).
   Reines CSS — die 404-Seite laedt kein JavaScript. */
.nf{ padding-block:clamp(48px,9vh,110px) clamp(64px,11vh,130px); text-align:center; }
.nf-in{ display:flex; flex-direction:column; align-items:center; }
.nf-ross{ display:block; width:clamp(150px, 26vw, 220px); height:auto; margin-bottom:clamp(26px,4vw,40px); overflow:visible; }
.nf-ross .r-body{ fill:#d0705a; }
.nf-ross .r-mane{ fill:#8a4330; }
.nf-ross .r-eye{ fill:#0b0b0f; }
.nf-horse{ transform-box:fill-box; transform-origin:50% 50%; }
.nf-q{ fill:var(--clay-deep); }
.nf-title{ margin:12px auto 0; }
.nf-text{ margin:14px auto 0; max-width:34ch; }
.nf-cta{
  display:inline-flex; align-items:center; gap:10px; margin-top:clamp(26px,3.4vw,34px);
  font-size:15px; font-weight:500; letter-spacing:-.008em;
  color:var(--paper); text-decoration:none;
  padding:13px 20px 13px 22px;
  background:var(--ink); border:1px solid var(--ink); border-radius:999px;
  transition:background-color .26s var(--ease);
}
.nf-cta svg{ width:15px; height:15px; transition:transform .34s var(--ease-out); }
.nf-cta:hover{ background:#000; }
.nf-cta:hover svg{ transform:translateX(3px); }
.nf-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:0 18px; margin-top:18px; }
.nf-links a{
  display:inline-block; padding:12px 2px; font-size:14px;
  color:var(--muted); text-decoration:underline; text-underline-offset:4px;
  text-decoration-color:var(--line-2);
}
.nf-links a:hover{ color:var(--ink); text-decoration-color:currentColor; }
@media (prefers-reduced-motion: no-preference){
  .nf-horse{ animation:nf-look 9s infinite; }
  .nf-q{ animation:nf-q 9s infinite; }
  .nf-eye{ animation:wink 8s linear infinite; }
}
@media (prefers-reduced-motion: reduce){
  .nf-q{ opacity:1; }
}
@keyframes nf-look{
  0%, 15.9%   { transform:none; }
  16%, 35.9%  { transform:scaleX(-1); }
  36%, 51.9%  { transform:none; }
  52%, 59.9%  { transform:scaleX(-1); }
  60%, 100%   { transform:none; }
}
@keyframes nf-q{
  0%, 66.9%   { opacity:0; }
  67%, 93.9%  { opacity:1; }
  94%, 100%   { opacity:0; }
}

/* ---------- Rechtsseiten ---------- */
.legal{ padding-block:clamp(40px,6vh,72px) clamp(56px,9vh,110px); }
.legal-kopf{ margin-bottom:clamp(30px,4.4vw,48px); }
.legal h1{
  margin:0;
  font-family:var(--pixel);
  font-size:clamp(1.9rem, 4vw, 3rem);
  line-height:1.06; letter-spacing:0; font-weight:400;
  -webkit-text-stroke:0.016em currentColor; paint-order:stroke fill;
}
.legal-datum{
  margin:clamp(14px,1.8vw,20px) 0 0;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
}
.legal-text{ max-width:70ch; }
.legal-text h2{
  margin:clamp(34px,4.4vw,52px) 0 0;
  font-size:clamp(1.05rem,1.6vw,1.25rem); font-weight:500; letter-spacing:-.012em;
}
.legal-text h3{
  margin:clamp(20px,2.4vw,28px) 0 0;
  font-size:1rem; font-weight:500; letter-spacing:-.008em;
}
.legal-text p, .legal-text ul{
  margin:12px 0 0; font-size:16px; line-height:1.62; color:var(--ink-2);
}
.legal-text ul{ padding-left:1.1em; }
.legal-text li{ margin-top:5px; }
.legal-text a{ color:var(--clay-deep); text-decoration:underline; text-underline-offset:3px; }
.legal-text address{ font-style:normal; margin-top:12px; line-height:1.62; color:var(--ink-2); }
.zurueck{
  display:inline-block; margin-top:clamp(36px,5vw,60px);
  font-family:var(--mono); font-size:12px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); text-decoration:none;
  padding-block:11px;
}
.zurueck:hover{ color:var(--clay-deep); }

/* ---------- 7 Abschluss ---------- */
/* Derselbe Ruf wie im Intro, aber mittig und mit viel Luft. Das Ross steht
   mittig HINTER dem Button, beide auf derselben Achse. Zentriert wird ueber
   inset + auto-Margin, nicht per translateX: .cta-ghost:active setzt ein
   translateY und wuerde den Button sonst aus der Mitte reissen. */
/* Eigener, leicht dunklerer Grund statt Trennlinien — der Block setzt sich
   dadurch ab, ohne die Seite in Streifen zu zerlegen. */
.schluss{
  padding-block:clamp(90px,16vh,190px);
  background:var(--paper-2);
  /* Weisse Kanten statt grauer Trennlinien: sie heben den dunkleren Block
     gegen das Papier ab, ohne wie ein Rahmen zu wirken. */
  border-top:1px solid #fff;
  border-bottom:1px solid #fff;
}
.schluss-h2{
  margin-inline:auto; text-align:center;
  max-width:22ch;
}
/* Zentriert per Klasse, NICHT per style-Attribut: die CSP erlaubt
   style-src 'self' ohne 'unsafe-inline', ein Inline-Style wird live
   blockiert. Lokal faellt das nicht auf, weil der Dev-Server keine CSP
   sendet — genau deshalb gehoert dieser Test gegen die Produktion. */
.schluss .eyebrow{ margin-bottom:clamp(14px,1.8vw,20px); text-align:center; }
/* Wie im Intro auf schmalen Schirmen: das Ross steht im Fluss und spannt die
   Hoehe auf, der Button liegt im unteren Drittel darueber. Nicht senkrecht
   mittig — dort verdeckte er den Ruecken statt der Beine. */
.schluss-cta{
  position:relative; isolation:isolate;
  margin-top:clamp(40px,6vw,74px);
  display:block;
}
.ross-hit--mitte{
  position:relative; z-index:0;
  display:block; margin-inline:auto;
  width:min(100%, 288px); max-width:100%;
  inset:auto; transform:none;
}
/* Zentriert ueber inset + auto-Margin, nicht per translateX: .cta-ghost:active
   setzt ein translateY und wuerde den Button sonst aus der Mitte reissen. */
.schluss-cta .cta-ghost{
  position:absolute; z-index:1;
  left:0; right:0; bottom:18px;
  margin-inline:auto; width:fit-content;
}

/* Signaturzeile: steht zentriert unter allem anderen im Footer. */
.foot-signatur{
  margin:clamp(22px,3vw,34px) 0 0;
  text-align:center;
  font-size:13px; color:var(--muted);
}
.foot-signatur a{
  color:var(--muted); text-decoration:none;
  border-bottom:1px solid var(--line-2);
  padding-block:12px;              /* Tap-Ziel 44 px, WCAG 2.5.5 */
  display:inline-block;
  transition:color .22s var(--ease), border-color .22s var(--ease);
}
.foot-signatur a:hover{ color:var(--ink); border-color:var(--ink); }
/* Die Emoji sitzen sonst auf der Grundlinie zu tief und wirken zu gross. */
.foot-signatur .emoji{ font-size:1.05em; line-height:1; vertical-align:-.08em; }

/* Unter 360 px passen fuenf Navigationspunkte nicht mehr neben die Marke:
   sie wurde auf 10 px zusammengequetscht. Statt Schrift zu verkleinern
   bricht die Leiste dort um. Gemessen: mit fuenf Punkten wird die Marke bis
   hinauf zu 430 px zusammengequetscht (auf 52 px), erst ab etwa 640 px
   passt beides nebeneinander. */
@media (max-width:639px){
  .topbar-in{ flex-wrap:wrap; gap:0 12px; }
  .brand{ flex:1 0 auto; }
  .nav{ width:100%; justify-content:space-between; margin-top:-4px; }
  /* Tap-Ziele mind. 44 px breit (WCAG 2.5.5) — "Ort" war 24 px. Die
     Unterstreichung wandert dafuer auf das <span>, sonst liefe sie unter
     kurzen Woertern weit ueber den Text hinaus. */
  .nav a{ padding:10px 4px; min-width:44px; text-align:center; }
  .nav a::after{ content:none; }
  .nav a > span{ position:relative; display:inline-block; }
  .nav a > span::after{
    content:""; position:absolute; left:0; right:0; bottom:-8px; height:1px;
    background:currentColor; transform:scaleX(0); transform-origin:0 50%;
    transition:transform .34s var(--ease-out);
  }
  .nav a:hover > span::after,
  .nav a.is-active > span::after{ transform:scaleX(1); }
  .nav a.is-active > span::after{ background:var(--clay); }
}

/* Der Rahmenwechsel allein ist ein gueltiger Fokusindikator (4,16:1 -> 18,20:1),
   aber schwaecher als ein Outline und greift auch bei Mausklick. Fuer die
   Tastatur kommt ein echter Ring dazu. */
input[type="email"]:focus-visible{
  outline:2px solid var(--clay-deep);
  outline-offset:2px;
}