.sprung{ position:absolute; left:-9999px; top:0; z-index:20;
  background:var(--ink); color:var(--kreide); font-weight:700; font-size:15px;
  padding:10px 16px; border-radius:0 0 6px 0; text-decoration:none; }
.sprung:focus{ left:0; outline:3px solid var(--cyan); outline-offset:2px; }
/* ==========================================================================
   (c) 2026 Volker Haigis, Hamburg. Alle Rechte vorbehalten.
   Teil des Entwurfs "Pauli Vibe" fuer Vibe Coding Hamburg e. V. Offen
   einsehbar, nicht frei verwendbar: Vervielfaeltigung, Bearbeitung und
   Weiterverwendung nur mit schriftlicher Zustimmung. happyharry.art/impressum
   ========================================================================== */
/* ============================================================
   FOLGESEITE, gemeinsames Stylesheet fuer die drei Seiten hinter
   den Karten (geld-her, checkst-du, was-geht).
   Bis 28.08. stand dieses CSS dreifach kopiert in den Seiten und
   jede Aenderung musste dreimal gemacht werden. Jetzt: EINMAL hier.
   Jede Seite setzt vor dem Einbinden nur ihre eigenen Werte:
     --seitenfarbe / --seitenfarbe-hell  (Farbe der Seite)
     --nebel                             (RGB-Triple fuer die Schleier)
   Die SVGs der Wand bleiben in den Seiten selbst: Safari kann Masken
   und Filter nicht ueber SVG-Grenzen referenzieren, und inline ist
   die einzige Form ohne Netz-Zugriff pro Bild.
   ============================================================ */
:root{ --seitenfarbe:var(--gelb); --seitenfarbe-hell:var(--gelb-hell);
  --nebel:255,209,102; }
/* =========================================================================
   ST.-PAULI-VORSCHLAG (Volker, 27.08.) — eigenständige Landing-Skizze.
   Idee: EINE besprühte Hafenmauer als Bühne. Die drei Karten sind
   quadratische Ausschnitte derselben Wand: das Motiv läuft durch.
   Publikum: KI-Interessierte, keine Profis — ein Satz, drei Türen.
   ========================================================================= */
*{ box-sizing:border-box; margin:0; }
:root{
  --pink:#F0588F; --mint:#55C9AC; --gelb:#FFD166; --cyan:#4CC9F0;
  --ink:#17130F; --kreide:#F7F2E9;
  --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --spray:"Sedgwick Ave Display","Marker Felt",cursive;
  --marker:"Permanent Marker",cursive;
  --body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
}
html,body{ height:100%; }
body{
  font-family:var(--body); color:var(--kreide);
  background:#8E9296; /* Beton-Grundton, falls das SVG noch lädt */
  min-height:100vh;
}

/* ---------- Die Wand: fixiert, füllt alles, läuft durch die Karten ---------- */
.wand{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.wand svg{ width:100%; height:100%; display:block; }

/* ---------- Inhalt ---------- */
.buehne{ position:relative; z-index:1; min-height:100vh;
  display:flex; flex-direction:column;
  padding:clamp(16px,3vw,34px) clamp(16px,4vw,48px) clamp(26px,4vh,44px); }

header{ display:flex; align-items:center; gap:12px; }
.mark{ width:clamp(34px,4vw,44px); height:auto; display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
.mark path{ fill:none; stroke:var(--pink); stroke-width:4.5; stroke-linecap:round; }
/* Die Wortmarke laeuft IMMER im Rosa der Locke, nie in Kreide: weiss auf
   Beton hat zu wenig Halt und die Marke soll dieselbe Farbe haben wie die
   Spirale, aus der sie kommt. Dunkle Kontur, damit sie auf jedem Grauwert
   der Wand steht. */
.wort{ font-family:var(--display); font-weight:800; line-height:.95;
  font-size:clamp(15px,1.6vw,19px); color:var(--pink);
  -webkit-text-stroke:1.4px rgba(23,19,15,.92); paint-order:stroke fill;
  text-shadow:0 2px 8px rgba(0,0,0,.55); }
.wort small{ display:block; font-weight:500; opacity:.92; font-size:.82em;
  -webkit-text-stroke:.9px rgba(23,19,15,.92); }

.held{ margin:clamp(26px,6vh,64px) 0 clamp(22px,5vh,48px); max-width:820px; }
.hook{ font-family:var(--display); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(40px,7.2vw,86px); line-height:1.02;
  text-shadow:0 3px 14px rgba(0,0,0,.6), 0 1px 0 rgba(0,0,0,.35); }
.hook em{ font-style:normal; font-family:var(--spray); font-weight:400;
  color:var(--pink); letter-spacing:.01em;
  text-shadow:0 0 26px rgba(240,88,143,.55), 0 3px 12px rgba(0,0,0,.6); }
.hook-sub{ margin-top:14px; max-width:52ch; font-size:clamp(15px,1.7vw,19px);
  line-height:1.55; text-shadow:0 2px 10px rgba(0,0,0,.75); }
.hook-sub b{ color:var(--gelb); }

/* ---------- Drei quadratische Karten: Fensterausschnitte der Wand ---------- */
.karten{ display:grid; gap:clamp(14px,2.4vw,26px);
  grid-template-columns:repeat(3,minmax(0,1fr)); max-width:1080px; }

/* Die Bande steht mit den Fuessen auf den Karten */
:root{ --kai-h: clamp(110px, 18vh, 190px);
  --bande-b: clamp(300px,34vw,480px); --bande-rand: clamp(10px,2.5vw,36px); }
.kai-mauer{ position:fixed; left:0; right:0; bottom:0; height:var(--kai-h);
  z-index:0; pointer-events:none; }
.kai-mauer svg{ width:100%; height:100%; display:block; }
/* Auf den Folgeseiten ist die Bande kleiner als im Schaufenster und haelt
   sich rechts, das Infofeld bekommt dafuer eine eigene Spalte. Unter 1000px
   ist kein Platz mehr fuer beides, dann hat der Text Vorrang. */
.bande{ position:fixed; right:var(--bande-rand);
  bottom:calc(var(--kai-h) - 10px);
  width:var(--bande-b); z-index:1; pointer-events:none;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.4)); }
.bande svg{ width:100%; height:auto; display:block; }
.karten{ position:relative; z-index:2; margin-top:auto; }
.karte{
  aspect-ratio:1/1; position:relative; display:flex; flex-direction:column;
  justify-content:flex-end; gap:6px;
  padding:clamp(14px,1.8vw,22px);
  color:var(--kreide); text-decoration:none;
  /* vollflaechig besprueht, aber halbtransparent: die Wand scheint durch */
  background:
    radial-gradient(90% 70% at 30% 25%, rgba(var(--nebel),.34), rgba(var(--nebel),.16) 70%),
    radial-gradient(80% 60% at 75% 80%, rgba(var(--nebel),.3), transparent 75%),
    linear-gradient(180deg, rgba(var(--nebel),.22) 0%, rgba(var(--nebel),.14) 55%, rgba(23,19,15,.55) 100%);
  border:3px solid rgba(247,242,233,.92); border-radius:6px;
  box-shadow:0 3px 0 rgba(0,0,0,.35), 0 18px 44px -18px rgba(0,0,0,.65),
             inset 0 0 0 1px rgba(0,0,0,.35);
  transition:transform .18s ease, box-shadow .18s ease;
}
/* gesprühte Rahmenkante: eine zweite, versetzte "Handlinie" */
.karte::before{ content:""; position:absolute; inset:5px; border-radius:3px;
  border:2px solid rgba(247,242,233,.35); pointer-events:none;
  transform:rotate(-.35deg); }
.karte:nth-child(2){ transform:rotate(.5deg); }
.karte:nth-child(3){ transform:rotate(-.4deg); }
/* Anheben nur bei echter Maus: auf Touch bliebe der Zustand sonst kleben */
@media (hover:hover) and (pointer:fine){
  .karte:hover{ transform:translateY(-6px) rotate(0deg);
    box-shadow:0 6px 0 rgba(0,0,0,.3), 0 30px 60px -20px rgba(0,0,0,.75),
               inset 0 0 0 1px rgba(0,0,0,.35); }
}

.kachel{ position:absolute; top:clamp(12px,1.6vw,18px); left:clamp(12px,1.6vw,18px);
  width:clamp(38px,4vw,48px); height:clamp(38px,4vw,48px);
  display:grid; place-items:center; border-radius:12px;
  background:rgba(23,19,15,.6); backdrop-filter:blur(2px);
  border:1.5px solid rgba(247,242,233,.5); }
.karte--film   .kachel{ color:var(--pink); }
.karte--sprind .kachel{ color:var(--mint); }
.karte--termin .kachel{ color:var(--gelb); }

.datum{ text-align:center; line-height:1; font-family:var(--display); }
.datum .dow{ display:block; font-size:11px; letter-spacing:.14em; opacity:.8; }
.datum .day{ display:block; font-size:22px; font-weight:800; margin:2px 0; }
.datum .mon{ display:block; font-size:11px; letter-spacing:.1em; opacity:.8; }

.zeile{ font-family:var(--marker); font-size:clamp(11px,1.15vw,13px);
  letter-spacing:.04em; color:var(--gelb);
  text-shadow:0 2px 6px rgba(0,0,0,.8); }

/* Die Parole: EIN grosses Graffiti pro Karte, gut lesbar */
.parole{ position:absolute; inset:0; display:grid; place-items:center;
  padding:8%; pointer-events:none; }
.parole b{ font-family:var(--spray); font-weight:400; text-align:center;
  font-size:clamp(44px,5.6vw,74px); line-height:.98; letter-spacing:.01em;
  transform:rotate(var(--kipp,-4deg));
  color:var(--farbe); -webkit-text-stroke:0;
  paint-order:stroke; text-shadow:
    0 0 34px rgba(var(--nebel), .65),
    0 0 10px rgba(var(--nebel), .5),
    3px 3px 0 rgba(23,19,15,.9),
    -2px 2px 0 rgba(23,19,15,.75),
    2px -2px 0 rgba(23,19,15,.75),
    -2px -2px 0 rgba(23,19,15,.7); }
/* Spruehwolke hinter der Parole */
.parole::before{ content:""; position:absolute; inset:12%;
  background:radial-gradient(52% 46% at 50% 50%, rgba(var(--nebel),.28), transparent 72%);
  filter:blur(4px); }
.karte--film   { --farbe:var(--pink); --nebel:240,88,143;  --kipp:-5deg; }
.karte--sprind { --farbe:var(--gelb); --nebel:255,209,102; --kipp:3deg; }
.karte--termin { --farbe:var(--mint); --nebel:85,201,172;  --kipp:-3deg; }

.karte h2{ font-family:var(--display); font-weight:800; letter-spacing:-.01em;
  font-size:clamp(14px,1.35vw,17px); line-height:1.15;
  text-shadow:0 2px 10px rgba(0,0,0,.8); }
.karte p{ font-size:clamp(12px,1.15vw,13.5px); line-height:1.4; opacity:.92;
  text-shadow:0 2px 8px rgba(0,0,0,.85); }
.chev{ position:absolute; right:clamp(12px,1.6vw,18px); top:clamp(12px,1.6vw,18px);
  opacity:.75; }

.fuss{ margin-top:clamp(18px,3vh,30px); font-size:12.5px; opacity:.85;
  text-shadow:0 2px 8px rgba(0,0,0,.8); }
.fuss b{ color:var(--mint); }
.zurueck{ position:absolute; top:clamp(16px,3vw,34px); right:clamp(16px,4vw,48px);
  color:var(--kreide); text-decoration:none; font-size:13px; opacity:.85;
  padding:8px 14px; border:1.5px solid rgba(247,242,233,.55); border-radius:999px;
  background:rgba(23,19,15,.35); backdrop-filter:blur(3px);
  text-shadow:0 1px 6px rgba(0,0,0,.7); }
.zurueck:hover{ opacity:1; background:rgba(23,19,15,.55); }

/* Pacman zieht neongruen quer durchs Bild, auf Hoehe des Spray-Tags.
   Der Lauf selbst ist SMIL (animateTransform), damit er mit der
   Fress-Maske dieselbe SVG-Zeitleiste teilt; nur der Kiefer ist CSS. */
.kieferOben{ transform-box:fill-box; transform-origin:center bottom;
  animation:kieferOben .26s linear infinite alternate; }
.kieferUnten{ transform-box:fill-box; transform-origin:center top;
  animation:kieferUnten .26s linear infinite alternate; }
@keyframes kieferOben{ from{ transform:rotate(0deg); } to{ transform:rotate(-26deg); } }
@keyframes kieferUnten{ from{ transform:rotate(0deg); } to{ transform:rotate(26deg); } }

/* Die grosse Spirale dreht sich gemaechlich um sich selbst */
.spiraleDreh{ transform-box:fill-box; transform-origin:center;
  animation:spiraleDreh 46s linear infinite; }
@keyframes spiraleDreh{ to{ transform:rotate(-360deg); } }

/* Die Katze kommt aus dem Loch und trippelt zu Finn */
.katzeLauf{ animation:katzeLauf 9s linear .8s forwards; }
@keyframes katzeLauf{
  0%,20%{ transform:translate(0,0); }
  26%{ transform:translate(-35px,-5px); } 32%{ transform:translate(-70px,0); }
  38%{ transform:translate(-105px,-5px); } 44%{ transform:translate(-140px,0); }
  50%{ transform:translate(-175px,-5px); } 56%{ transform:translate(-210px,0); }
  62%{ transform:translate(-245px,-5px); } 68%{ transform:translate(-278px,0); }
  72%,100%{ transform:translate(-293px,0); }
}
/* Miau, wenn die Katze bei Finn ankommt (Lauf endet bei .8s + 72% von 9s),
   danach miaut sie alle 14s wieder */
.miau{ opacity:0; transform-box:fill-box; transform-origin:bottom left;
  animation:miauPop 14s ease 7.3s infinite; }
@keyframes miauPop{
  0%{ opacity:0; transform:scale(.2) rotate(-12deg); }
  2.5%{ opacity:1; transform:scale(1.15) rotate(-7deg); }
  4.5%{ transform:scale(1) rotate(-9deg); }
  18%{ opacity:1; }
  23%{ opacity:0; transform:scale(1) rotate(-9deg); }
  100%{ opacity:0; transform:scale(.2) rotate(-12deg); }
}

@media (prefers-reduced-motion: reduce){
  .spiraleDreh{ animation:none; }
  .katzeLauf{ animation:none; transform:translate(-293px,0); }
  .miau{ animation:none; }
  .kieferOben, .kieferUnten{ animation:none; }
}


/* ---------- Film-Overlay: Klick auf die erste Karte oeffnet den Clip.
   Er verschwindet sofort, wenn man woanders hintippt oder die Maus
   die Flaeche verlaesst. ---------- */
.film-overlay{ position:fixed; inset:0; z-index:50; display:none;
  place-items:center; background:rgba(10,8,6,.55); backdrop-filter:blur(3px); }
.film-overlay.offen{ display:grid; }
.film-buehne{ width:min(86vw,900px); aspect-ratio:16/9; position:relative;
  background:#0E1116; overflow:hidden; transform:rotate(-.5deg);
  border:3px solid rgba(247,242,233,.92); border-radius:8px;
  box-shadow:0 4px 0 rgba(0,0,0,.35), 0 30px 80px -20px rgba(0,0,0,.8); }
.film-buehne video{ width:100%; height:100%; object-fit:cover; display:block; }
.film-platzhalter{ position:absolute; inset:0; display:grid; place-items:center;
  text-align:center; padding:8%; background-size:cover; background-position:center; }
.film-platzhalter.mit-bild div{ background:rgba(23,19,15,.55); padding:16px 26px;
  border-radius:8px; }
.film-platzhalter.mit-bild span{ font-size:clamp(15px,1.6vw,19px); opacity:1; }
.film-platzhalter b{ font-family:var(--spray); font-weight:400; color:var(--pink);
  font-size:clamp(30px,4.5vw,56px); line-height:1.05; display:block;
  text-shadow:0 0 30px rgba(240,88,143,.5), 3px 3px 0 rgba(23,19,15,.9); }
.film-platzhalter span{ display:block; margin-top:12px; color:var(--kreide);
  font-size:clamp(13px,1.4vw,16px); opacity:.85; }

/* ---------- Mobiler Kopf: die Locke gross, der Spruch drin, Pacman frisst ihn.
   Auf dem Telefon gibt es keine Buehne fuer die ganze Bande, also wird die
   Spirale zum Bild und die drei Figuren ziehen als Schattenriss in die Karten.
   Bewusst OHNE Weichzeichner: auf dem Telefon zaehlt jedes Bild. ---------- */
.mobil-kopf{ display:none; }
.mobil-kopf svg{ display:block; width:100%; height:auto; }
.mobil-ruf{ margin:0; position:relative; z-index:1; text-align:center; font-family:var(--marker);
  font-size:clamp(19px,5.6vw,26px); color:var(--gelb); letter-spacing:.01em; }
.mobil-ruf b{ font-weight:400; }
/* Die Bande steht mobil als EIN Schattenriss hinter dem ganzen Kartenstapel,
   nicht in jeder Karte einzeln. Die Karten sind halbtransparent, sie scheint
   also durch, und der Stapel bleibt so hoch, dass alle drei aufs Display passen. */
.mobil-zeile{ display:none; }
.bande-mobil{ display:none; position:absolute; left:0; right:0;
  /* Eine Karte hoeher als der Stapelboden: so stehen die Figuren hinter der
     pinken und der gelben Karte, wo sie durch die Transparenz am besten
     durchkommen. 165 Kartenhoehe plus 10 Abstand. */
  bottom:160px;
  pointer-events:none; z-index:0; }
.bande-mobil svg{ display:block; width:100%; height:auto; }
.karten{ position:relative; }
.karten > .karte{ position:relative; z-index:1; }

/* Nur echte Telefone bekommen die Handy-Fassung: schmal im Hochformat ODER
   flach im Querformat. Das iPad faellt bewusst NICHT darunter, dort gilt
   die Desktop-Buehne, auch im Hochformat (834 Punkte). */
@media (max-width:500px), (max-width:950px) and (max-height:520px){
  .bande{ display:none; }   /* die grosse Buehne ist Desktop-Sache */
  .held{ display:none; }    /* Schlagzeile und Vorspann uebernimmt der mobile Kopf */
  /* Die Locke darf bis an die obere Kante. Sie zieht hinter die Kopfzeile,
     die als eigene Ebene darueber stehen bleibt und anklickbar ist. */
  .mobil-kopf{ display:block; margin:-146px -16px 0; }
  /* Die Locke laeuft hinter der gelben Zeile weiter: statt die Zeile unter das
     Bildfenster zu setzen, legt sie sich darueber. */
  .mobil-ruf{ margin-top:-86px; }
  /* Der Stapel haengt am Desktop unten an der Kaimauer. Mobil soll er direkt
     unter dem Ruf stehen, sonst klafft in der Mitte ein Loch. */
  .karten{ margin-top:6px; }
  .buehne{ min-height:0; }
  header{ position:relative; z-index:2; }
  .buehne{ padding-top:14px; }
  .bande-mobil{ display:block; }
  .karten{ grid-template-columns:1fr; max-width:440px; gap:10px; }
  /* Die Karten duerfen bis an die Ruf-Zeile hochwachsen, der Platz gehoert
     ihnen. Drei mal 152 plus Abstand passt genau aufs Display. */
  .karte{ aspect-ratio:auto; min-height:150px; justify-content:flex-end;
    padding:56px 16px 12px; }
  .karte h2{ font-size:15px; }
  .karte p{ font-size:12.5px; line-height:1.35; }
  /* Die Parole steht wieder gross in der Mitte, darunter nur noch eine Zeile.
     Kicker, Titel und Beschreibung sind mobil zu viel Text fuer die Flaeche. */
  /* Klein wird der Schatten-Umriss zu duenn. Mobil bekommt die Parole deshalb
     eine echte dunkle Kontur, sonst verschwimmt sie auf der hellen Karte. */
  .parole b{ font-size:34px; -webkit-text-stroke:2.4px rgba(23,19,15,.95);
    paint-order:stroke fill;
    text-shadow:0 0 24px rgba(var(--nebel),.6), 2px 2px 0 rgba(23,19,15,.9); }
  .karte .zeile, .karte h2, .karte p{ display:none; }
  .mobil-zeile{ display:block; text-align:center; font-size:13px; line-height:1.3; font-weight:600;
    color:var(--farbe);            /* dieselbe Farbe wie die Parole der Karte */
    text-shadow:0 1px 2px rgba(23,19,15,.95), 0 2px 10px rgba(23,19,15,.8); }
  /* Chrome auf dem iPhone legt seine Adressleiste ueber den unteren Rand.
     Der Fuss braucht deshalb Luft, sonst verschwindet die dritte Karte darunter. */
  .buehne{ padding-bottom:78px; }
  /* Mobil laeuft der Kopf oben; die Wand soll nicht mit eigener Spirale,
     eigenem Spruch und eigenem Pacman dagegenhalten. */
  .nur-desktop{ display:none; }
}


/* ===================== FOLGESEITE =====================
   Die Wand bleibt der Grund, davor steht EIN grosses Feld, das fast den
   ganzen Schirm fuellt: halbtransparent besprueht wie die Karten, damit der
   Beton durchscheint. Zwei Navigationsvarianten zum Ausprobieren, umschaltbar
   ueber ?nav=leiste (Standard) oder ?nav=wand.
   ==================================================== */
/* ---------- FARBCODE, gilt kuenftig durch alles ----------
   Jede Farbe hat eine Aufgabe, wie bei Carolin, nur in unserer Palette:
     PINK   Die Frage, der Einstieg, alles Erzaehlte   (Checkst du?)
     GELB   Geld, Foerderung, Antraege                 (Geld her!)
     MINT   Termine, was als Naechstes ansteht         (Was geht?)
     CYAN   Verein, Struktur, Dokumente, Login
   Jede Farbe kommt zweimal vor: kraeftig fuer Schrift und Linien, pastell
   fuer Flaechen. Auf Pastell steht immer die dunkle Tinte, nie Weiss.
   So tragen es die Elemente:
     - die drei Fragen oben tragen dauerhaft die Farbe ihrer Karte von der
       Startseite (pink/gelb/mint), die Seite, auf der man steht, gefuellt
     - Hauptknopf: gefuellt in der Farbe DIESER Seite
     - Nebenknopf: nur Kontur und Schrift in derselben Farbe, damit die
       Rangfolge ohne eine zusaetzliche Farbe auskommt
     - alles, was zum Verein fuehrt, ist cyan, auf jeder Seite gleich
     - die Wortmarke oben links ist IMMER rosa wie die Locke, nie kreideweiss:
       weiss auf Beton hat zu wenig Halt
   Kleine Schrift laeuft NIE im Marker: die kippt klein ins Comichafte.
   Marker und Spray bleiben den grossen Auftritten vorbehalten. */
:root{
  /* Die Pastelltoene mussten kraeftiger werden: zu blass gemischt lesen sie
     sich auf der dunklen Wand alle als Weiss, dann traegt der Farbcode nichts.
     Hell genug fuer dunkle Tinte, trotzdem als Farbe erkennbar. */
  --pink-hell:#F58AAF; --gelb-hell:#FFD98A; --mint-hell:#8FDCC5; --cyan-hell:#93D9F2;
  --label:var(--body);
}
.seite{ position:relative; z-index:1; min-height:100vh; display:flex;
  flex-direction:column; padding:clamp(14px,2.4vw,26px) clamp(16px,4vw,48px)
  calc(var(--kai-h) - 30px); }

/* --- Kopfzeile: Wortmarke links, die drei Fragen als Sprungleiste --- */
.kopfzeile{ display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  max-width:min(100%, 780px); }
/* Die drei Fragen stehen rechtsbuendig mit dem Textfeld, nicht am Fensterrand:
   dort haengen sie sonst ueber der Bande. Dafuer bekommt die Kopfzeile
   dieselbe Breitenbegrenzung wie das Feld, siehe unten. */
.fragen{ display:flex; gap:8px; margin-left:auto; flex-wrap:wrap; }
.frage{ font-family:var(--spray); font-size:clamp(17px,2vw,24px); line-height:1;
  /* Seitliches Polster von 15 auf 10 Punkt: mit dem vierten Reiter und dem
     Sprachteller braucht die Kopfzeile 788 von 780 verfuegbaren Punkten und
     bricht um. Vier Reiter mal zehn Punkt geben 40 Punkt Luft, das traegt
     auch, wenn spaeter noch ein Wort dazukommt. */
  text-decoration:none; padding:9px 10px 11px; border-radius:6px;
  border:2px solid rgba(247,242,233,.55); color:var(--kreide);
  background:rgba(23,19,15,.34); backdrop-filter:blur(3px);
  -webkit-text-stroke:1.6px rgba(23,19,15,.9); paint-order:stroke fill; }
.frage{ border-color:color-mix(in srgb, var(--farbe) 55%, transparent);
  color:var(--farbe); }
/* Die Seite, auf der man steht, steht gefuellt da: Farbe als Flaeche schlaegt
   jede Unterstreichung. */
.frage.hier{ background:var(--farbe-hell); color:var(--ink);
  border-color:rgba(23,19,15,.85); -webkit-text-stroke:0;
  box-shadow:0 3px 0 rgba(23,19,15,.5); }
.frage--film  { --farbe:var(--pink); --farbe-hell:var(--pink-hell); }
.frage--sprind{ --farbe:var(--gelb); --farbe-hell:var(--gelb-hell); }
.frage--termin{ --farbe:var(--mint); --farbe-hell:var(--mint-hell); }
@media (hover:hover) and (pointer:fine){
  .frage:hover{ background:rgba(23,19,15,.6); }
  .frage.hier:hover{ background:var(--farbe-hell); }
}


/* ---------- Schleier unter der Kopfzeile ----------
   Die Wortmarke steht in Rosa, und auf dem Telefon dreht die rosa Locke
   direkt dahinter: Rosa auf Rosa liest sich nicht. Der Kopf bekommt darum
   eine dunkle Flaeche, die nach unten ausläuft. Kein Balken mit Kante,
   sondern eine Abdunklung, die von selbst aufhoert. Kein backdrop-filter,
   der wuerde die drehende Locke wieder ins Ruckeln bringen. */
.kopfzeile{ position:relative; }
.kopfzeile::before{ content:""; position:fixed; z-index:-1; pointer-events:none;
  top:0; left:0; right:0; height:clamp(92px,13vh,140px);
  /* FIXIERT, nicht absolut mit -100vw ins Nichts gezogen: so ein Rand
     verbreitert das Dokument und die Seite laesst sich seitlich schieben. */
  background:linear-gradient(180deg,
    rgba(23,19,15,.62) 0%, rgba(23,19,15,.44) 52%, rgba(23,19,15,0) 100%); }

/* --- Das Informationsfeld --- */
/* Das Feld ist eine Spalte, keine Abdeckung: die Wand mit ST. PAULI, Kronkorken
   und Tags bleibt rechts und rundherum sichtbar, sonst ist es nicht mehr diese
   Seite. Darum begrenzte Breite und ein deutlich duennerer Schleier. */
.feld{ margin:clamp(14px,2.2vh,26px) 0 0; flex:1;
  max-width:min(100%, 780px);
  border:3px solid rgba(247,242,233,.92); border-radius:8px;
  padding:clamp(20px,3vw,40px) clamp(20px,3.4vw,48px);
  /* Dichter als die Startkarten: hier steht Text, der gelesen werden muss.
     Die Wand scheint noch durch, aber sie liest nicht mehr mit. */
  background:
    radial-gradient(90% 70% at 25% 15%, rgba(var(--nebel),.20), transparent 70%),
    linear-gradient(180deg, rgba(23,19,15,.58) 0%, rgba(23,19,15,.76) 100%);
  backdrop-filter:blur(3px);
  box-shadow:0 4px 0 rgba(0,0,0,.35), 0 26px 60px -26px rgba(0,0,0,.8),
             inset 0 0 0 1px rgba(0,0,0,.35);
  overflow:auto; }
.feld .parole-gross{ font-family:var(--spray); font-size:clamp(40px,6vw,86px);
  line-height:.95; color:var(--seitenfarbe); transform:rotate(-2deg);
  -webkit-text-stroke:3px rgba(23,19,15,.95); paint-order:stroke fill;
  /* Der Schein nimmt die Seitenfarbe ueber --nebel auf, damit die Ueberschrift
     nicht auf jeder Seite gelb glueht. */
  text-shadow:0 0 34px rgba(var(--nebel),.5); }
.feld .stand{ font-family:var(--label); font-weight:700; font-size:clamp(11.5px,1.05vw,13px);
  color:var(--seitenfarbe); letter-spacing:.16em; text-transform:uppercase; margin:0 0 10px; }
.feld h2{ font-family:var(--display); font-weight:800; font-size:clamp(20px,2.4vw,30px);
  letter-spacing:-.015em; margin:26px 0 8px; }
.feld p{ font-size:clamp(14px,1.25vw,17px); line-height:1.6; max-width:70ch;
  color:rgba(247,242,233,.92); margin:0 0 12px; }
.feld b{ color:var(--kreide); }
.zahlen{ display:flex; gap:clamp(14px,2.4vw,34px); flex-wrap:wrap; margin:18px 0 6px; }
.zahl{ border-left:4px solid var(--seitenfarbe); padding-left:14px; }
.zahl .k{ font-family:var(--label); font-weight:700; font-size:11px; letter-spacing:.15em;
  text-transform:uppercase; color:rgba(247,242,233,.7); display:block; margin-bottom:2px; }
.zahl .w{ font-family:var(--display); font-weight:800; font-size:clamp(17px,1.9vw,24px); }
.leiter{ list-style:none; margin:14px 0 0; padding:0; }
.leiter li{ position:relative; padding:0 0 16px 30px; font-size:clamp(13.5px,1.2vw,16px);
  border-left:2px solid rgba(247,242,233,.28); margin-left:7px; }
.leiter li::before{ content:""; position:absolute; left:-9px; top:4px; width:16px; height:16px;
  border-radius:50%; background:rgba(23,19,15,.85); border:3px solid rgba(247,242,233,.5); }
.leiter li.fertig::before{ background:var(--gelb); border-color:var(--gelb); }
.leiter li.jetzt::before{ background:var(--pink); border-color:var(--pink);
  box-shadow:0 0 0 6px rgba(240,88,143,.25); }
.leiter .wann{ display:block; font-family:var(--label); font-size:12.5px;
  letter-spacing:.03em; color:rgba(247,242,233,.68); margin-top:2px; }
/* Gestapelte Eintraege: Projekte, Termine, alles, was eine Liste mit Rang ist.
   Der Balken links traegt die Seitenfarbe, damit die Liste zur Seite gehoert. */
.stapel{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:13px; }
.stapel li{ border-left:4px solid var(--seitenfarbe); padding:1px 0 1px 14px; }
.stapel .wann{ display:block; font-family:var(--label); font-weight:700; font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--seitenfarbe); margin-bottom:3px; }
.stapel .t{ display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(15px,1.6vw,19px); line-height:1.2; }
.stapel .u{ font-size:clamp(13px,1.2vw,15.5px); line-height:1.5;
  color:rgba(247,242,233,.86); margin-top:2px; }

.raus{ display:flex; gap:10px; flex-wrap:wrap; margin:22px 0 0; }
/* Gefuellt in Pastell = der Hauptweg dieser Seite, Schrift in dunkler Tinte.
   Nur Kontur in derselben Farbe = Nebenweg. Die Rangfolge kommt aus der
   Fuellung, nicht aus einer zweiten Farbe. */
.raus a{ font-family:var(--label); font-weight:700; font-size:14.5px; text-decoration:none;
  color:var(--ink); background:var(--seitenfarbe-hell); padding:11px 18px; border-radius:8px;
  border:2px solid rgba(23,19,15,.85); box-shadow:0 3px 0 rgba(23,19,15,.55); }
.raus a.stiller{ background:rgba(23,19,15,.32); color:var(--seitenfarbe);
  border-color:var(--seitenfarbe); box-shadow:none; }
@media (hover:hover) and (pointer:fine){
  .raus a.stiller:hover{ background:var(--seitenfarbe-hell); color:var(--ink);
    border-color:rgba(23,19,15,.85); }
}

/* --- Variante 1: Vereins-Navigation als schmale Leiste unten --- */
.verein-leiste{ display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  margin:14px 0 0; }
/* Der Verein hat im Farbcode Cyan. Seine Leiste laeuft deshalb pastellcyan. */
.verein-leiste a{ font-family:var(--label); font-weight:700; font-size:13.5px;
  text-decoration:none; color:var(--ink); padding:9px 14px; border-radius:8px;
  border:2px solid rgba(23,19,15,.8); background:var(--cyan-hell);
  box-shadow:0 3px 0 rgba(23,19,15,.45); }
.verein-leiste .marke{ font-family:var(--label); font-weight:700; font-size:11px;
  letter-spacing:.15em; text-transform:uppercase;
  color:rgba(247,242,233,.62); margin-right:6px; }

/* --- Variante 2: Vereins-Navigation als Tag-Wand hinter einem Knopf --- */
/* Alles, was zum Verein fuehrt, ist cyan: dieser Knopf wie die Leiste unten. */
.tagwand-knopf{ font-family:var(--label); font-weight:700; font-size:14px; cursor:pointer;
  color:var(--cyan); padding:9px 15px; border-radius:6px;
  border:2px solid color-mix(in srgb, var(--cyan) 55%, transparent);
  background:rgba(23,19,15,.42); }
@media (hover:hover) and (pointer:fine){
  .tagwand-knopf:hover{ background:var(--cyan-hell); color:var(--ink);
    border-color:rgba(23,19,15,.85); }
}
.tagwand{ position:fixed; inset:0; z-index:40; display:none;
  background:rgba(10,8,6,.72); backdrop-filter:blur(2px); }
.tagwand.offen{ display:block; }
.tagwand a{ position:absolute; font-family:var(--spray); text-decoration:none;
  -webkit-text-stroke:3px rgba(23,19,15,.9); paint-order:stroke fill; }
html[data-nav="wand"] .verein-leiste{ display:none; }

/* Platz fuer die Feierabend-Bande: das Feld endet vor ihr, statt sie zuzudecken. */
@media (min-width:1000px){
  .feld, .kopfzeile{ margin-right:calc(var(--bande-b) + var(--bande-rand) - clamp(16px,4vw,48px) + 14px); }
  .verein-leiste{ margin-right:calc(var(--bande-b) + var(--bande-rand) - clamp(16px,4vw,48px) + 14px); }
}
/* ---------- Die Bande auf schmalen Schirmen ----------
   Sie war hier lange ganz ausgeblendet, dadurch stand der Besucher auf den
   Folgeseiten ploetzlich allein an einer leeren Wand: der Ort war weg, sobald
   man eine Karte angetippt hatte. Statt sie zu loeschen, wandert sie in den
   Hintergrund: mittig, kleiner, fest auf der Kaimauer, hinter dem Textfeld
   (z-index 0 gegen .seite mit z-index 1). Unter dem Feld steht sie frei, durch
   das Feld scheint sie durch, so wie auf der Startseite hinter den Karten.
   ZWISCHENGROESSEN (641 bis 999px): dort ist rechts kein Platz fuer die eigene
   Spalte, also ebenfalls mittig in den Hintergrund. */
@media (max-width:999px){
  .bande{ display:block; z-index:0; opacity:1;
    left:50%; right:auto;
    width:min(96vw, 520px);
    bottom:calc(var(--kai-h) - 6px);
    /* Vergroessert um die eigene Standflaeche: die Figuren bleiben mit den
       Fuessen auf der Kaimauer und werden trotzdem gross genug, um durch das
       Textfeld hindurch als Schatten gelesen zu werden. Kleiner sieht man
       durch den Schleier nichts mehr. */
    transform:translateX(-50%) scale(1.45);
    transform-origin:50% 100%; }
}
@media (max-width:640px){
  .bande{ width:min(98vw, 430px); bottom:calc(var(--kai-h) - 4px);
    transform:translateX(-50%) scale(1.55); }
}

/* ---------- Folgeseite auf dem Telefon ----------
   Hier gibt es keine Bande und keine zweite Spalte: das Feld nimmt die ganze
   Breite, die drei Fragen ruecken in eine eigene Zeile und teilen sie sich zu
   dritt. Die Wand bleibt Hintergrund, sie hat auf dem kleinen Schirm ohnehin
   nur noch den Beton und die Kaimauer zu zeigen. */
@media (max-width:640px){
  :root{ --kai-h: clamp(70px, 11vh, 110px); }
  .seite{ padding:12px 13px calc(var(--kai-h) + 6px); }
  .kopfzeile{ max-width:100%; margin-right:0; gap:10px; }
  .fragen{ margin-left:0; width:100%; gap:6px; }
  .frage{ flex:1; text-align:center; font-size:16px; padding:8px 6px 10px;
    border-width:1.5px; }
  .feld{ max-width:100%; margin-right:0; margin-top:12px;
    padding:16px 15px 20px; border-width:2px; border-radius:6px;
    /* Auf dem Telefon fuellt das Feld die ganze Hoehe, die Bande steht also
       IMMER dahinter und nie daneben. Damit sie ueberhaupt zu sehen ist,
       laeuft der Schleier hier duenner als am Desktop. Die Schrift ist
       Kreide auf Dunkel, das traegt das aus. */
    background:
      radial-gradient(90% 60% at 25% 12%, rgba(var(--nebel),.20), transparent 70%),
      linear-gradient(180deg, rgba(23,19,15,.46) 0%, rgba(23,19,15,.66) 100%); }
  .feld .stand{ font-size:10.5px; letter-spacing:.13em; }
  .feld .parole-gross{ font-size:46px; }
  .feld h2{ font-size:20px; margin:22px 0 6px; }
  .feld p{ font-size:15px; }
  .zahlen{ display:grid; grid-template-columns:1fr 1fr; gap:14px 12px; }
  .zahl .w{ font-size:16px; }
  .stapel .t{ font-size:16px; }
  .stapel .u{ font-size:14px; }
  .raus{ gap:8px; }
  .raus a{ flex:1 1 46%; text-align:center; font-size:14px; padding:11px 8px; }
  .verein-leiste{ margin-right:0; gap:7px; }
  .verein-leiste a{ font-size:13px; padding:8px 11px; }
  .verein-leiste .marke{ width:100%; margin:0 0 2px; }
}
html[data-nav="leiste"] .tagwand-knopf{ display:none; }

/* ============================================================
   ANALYSEN (29.08.2026)
   Bausteine fuer /vch/analysen/. Sie stehen hier und nicht in den
   Einzelseiten, weil gemeinsames Aussehen laut BAUANLEITUNG in die
   gemeinsame Datei gehoert.
   ============================================================ */

/* Vierter Reiter in der Fragenleiste. Cyan, weil Analysen nach dem
   Farbcode zu Struktur und Dokumenten gehoeren. */
.frage--analysen{ --farbe:var(--cyan); --farbe-hell:var(--cyan-hell); }

/* Ein Block, der einem der beiden Autoren gehoert. Die Farben kommen
   immer von dem, ueber den gerade gesprochen wird. */
.autor{ margin:34px 0 0; padding:22px 0 0; border-top:1px solid rgba(247,242,233,.16); }
.autor--caro  { --autor:#FF2D78; --autor-2:#25F4EE; --autor-3:#C6FF4A; --autor-4:#7A5CFF; }
.autor--volker{ --autor:#F0588F; --autor-2:#FFD166; --autor-3:#55C9AC; --autor-4:#4CC9F0; }
.autor > h2{ color:var(--autor); }
.autor .wer{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--marker); font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--autor); margin-bottom:6px; }
.autor .streifen{ display:inline-flex; gap:4px; }
.autor .streifen i{ display:block; width:16px; height:16px; border-radius:3px; }
.autor .streifen i:nth-child(1){ background:var(--autor); }
.autor .streifen i:nth-child(2){ background:var(--autor-2); }
.autor .streifen i:nth-child(3){ background:var(--autor-3); }
.autor .streifen i:nth-child(4){ background:var(--autor-4); }
.autor blockquote{ margin:16px 0; padding:12px 0 12px 16px;
  border-left:3px solid var(--autor); font-size:1.02em; }

/* Folien. Volle Breite des Feldes, Bildunterschrift in der Autorenfarbe.
   loading=lazy und feste Masse stehen im Markup, damit beim Wischen
   nichts springt. */
.folien{ display:flex; flex-direction:column; gap:26px; margin:22px 0 0; }
/* Hochkantes Blatt neben seinen Text, sonst schiebt eine Telefonaufnahme den
   Abschnitt auf anderthalb Bildschirme. Umbruch auf echte Telefonbreite. */
.neben{ display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr);
  gap:22px; align-items:start; margin-top:22px; max-width:70ch; }
.neben > .folien{ margin:0; }
@media (max-width:720px){ .neben{ grid-template-columns:1fr; } }
.folie{ margin:0; }
.folie img{ display:block; width:100%; height:auto; border-radius:4px;
  border:1px solid rgba(247,242,233,.18); background:rgba(0,0,0,.25); }
.folie figcaption{ margin-top:9px; font-size:14px; line-height:1.5;
  color:rgba(247,242,233,.82); }
.folie figcaption b{ color:var(--autor,var(--seitenfarbe)); font-weight:700; }

/* Hinweis auf ein Dokument, das anderswo liegt. */
.ablage{ margin:20px 0 0; padding:14px 16px; border:1px dashed rgba(247,242,233,.3);
  border-radius:4px; font-size:14px; color:rgba(247,242,233,.8); }
.ablage b{ color:var(--seitenfarbe); }

/* Verweise im Textfeld. Ohne diese Regel kommen sie im Browser-Blau mit
   Unterstreichung an, das passt auf die Wand wie ein Aktenordner. Sie
   tragen die Seitenfarbe und eine duenne Linie, die beim Zeigen kraeftiger
   wird. Knoepfe in .raus sind ausgenommen, die haben ihr eigenes Aussehen. */
.feld a:not(.raus a){
  color:var(--seitenfarbe-hell); text-decoration:none;
  border-bottom:1px solid rgba(var(--nebel,247,242,233),.5);
  transition:border-color .15s, color .15s;
}
.feld a:not(.raus a):hover,
.feld a:not(.raus a):focus-visible{
  color:var(--seitenfarbe); border-bottom-color:var(--seitenfarbe);
}
.feld a:focus-visible{ outline:2px solid var(--seitenfarbe); outline-offset:3px; }
/* In einem Autorenblock nimmt der Verweis die Farbe des Autors. */
.autor a:not(.raus a){ color:var(--autor); border-bottom-color:rgba(255,255,255,.28); }
.autor a:not(.raus a):hover{ border-bottom-color:var(--autor); }