/* Street Boccia — die öffentliche Seite. * * Bis zum 24.9.2026 war das «Nachtsprint»: Fast-Schwarz, leuchtendes Gelb, * Monospace. Wagi: «Es riecht mir alles nach KI und Claude.» Der Befund hat * einen Namen — im Anti-Muster-Katalog der Design-Kaskade ist das KI-Look * Nummer 2, «Dark Tech»: die Ästhetik, die Modelle ohne Vorgabe wählen. * * Neu, nach Richtung B «Die Ansage» (DESIGN.md): Beton und Schwarz, echte * Fotos gross — und EINE dominante Akzentfarbe, die dem TURNIER gehört, nicht * der Marke. Turnier I war Gelb, Turnier II trägt seine eigene; sie kommt aus * der Route und über /api/naechstes auf die Seite. * * Bindende Regel: Schrift auf der Akzentfarbe ist immer Schwarz, und eine neue * Akzentfarbe ist nur zulässig, wenn Schwarz darauf 4,5:1 erreicht. * * Die Tokennamen bleiben, obwohl sie jetzt andere Werte tragen: Sie heissen * wie in der App, und der Design Guide liest beide Dateien. Ein Umbenennen * hätte den Guide zerschlagen, ohne etwas zu verbessern. */ :root{ /* ── Die Farbwelt der Seite (hell) ───────────────────────────────────── */ --asphalt:#E9E7E3; /* Fläche eine Stufe unter dem Grund */ --flaeche:#FFFFFF; /* Karten */ --flaeche-2:#E4E1DB; --linie:#CFCDC7; /* Trennstriche, kein Bedienelement */ --kante:#7E7B75; /* Feldränder, Marken: 3,4 bis 4,2:1 */ /* Schrift. Sie gehört seit dem 24.9.2026 zum Farbpaar des Turniers (Wagi: «Textfarbe blau, wie im Hero») und wird zur Laufzeit gesetzt. Schwarz ist die Voreinstellung: 16,9:1 auf Beton. Dunkelblau #312783 hält 10,6:1. */ --kreide:#101010; /* Nebensache. Gemessen auf ALLEN Flächen, nicht nur auf dem Grund: Der erste Wert (#6E6C67) hielt auf Beton, fiel aber auf den Karten und im Fuss auf 4,0 — zehn Stellen unter der Grenze. Jetzt 4,97 bis 6,5. */ --stumm:#605E58; /* Der Akzent kommt zur Laufzeit aus dem Turnier; bis dahin das Gelb von Turnier I, damit die Seite nie farblos dasteht. */ --akzent:#F5B912; /* Fläche des Turniers */ --auf-akzent:#101010; /* Schrift darauf — gehört zum Paar */ --gelb:var(--akzent); /* Fläche, nie Schrift */ --gelb-schrift:#101010; /* auf hellem Grund ist Gelb als Schrift blind */ --auf-gelb:var(--auf-akzent); /* Schrift auf der Akzentfläche */ /* Seit dem 24.9.2026 trägt die GANZE Seite die Farbe des Turniers (Wagi: «auch in Rosa machen wie das ganze Turnier II»), nicht mehr nur Hero und Anmeldung. Damit kann die Turnierfarbe nichts mehr hervorheben — auf sich selbst hebt sich nichts ab. Diese Aufgabe übernimmt das Signal: die Gegenfarbe des Paares, also das Dunkelblau zum Rosa. Knöpfe, Bälle, der Laufweg und die Sprungmarke tragen sie. */ --signal:var(--auf-akzent); /* die kleine Fläche, die knallt */ --auf-signal:#FFFFFF; /* Schrift darauf — Weiss auf Blau 12,0:1 */ --kraft:#B8340C; /* Kartenschichten hell — der Plan ist gedruckt, nicht beleuchtet. */ --k-see:#CBD8E0; --k-fluss:#B9CCD8; --k-gruen:#DDE3D5; --k-haus:#E2DFD9; --k-gleis:#D3CFC7; --k-strasse:#DAD7D0; --k-hauptstrasse:#C5C1B8; --radius:4px; /* ── Schriftstufen. Eine Leiter, keine willkürlichen Werte: Meret misst hier nach, und 13 verschiedene Grössen waren keine Leiter. Unter 12 px kommt nichts vor. ─────────────────────────────────────────────────── */ --s-12:12px; --s-14:14px; --s-16:16px; --s-18:18px; --s-20:20px; --s-24:24px; --s-32:32px; --s-40:40px; --s-52:52px; --s-64:64px; --s-76:76px; /* ── Abstände. Vielfache von vier, sonst wirkt nichts ausgerichtet. ──── */ --a-4:4px; --a-8:8px; --a-12:12px; --a-16:16px; --a-24:24px; --a-32:32px; --a-48:48px; --a-64:64px; /* ── Nur für die Seite: sie ist länger und breiter als ein App-Schirm ── */ --tiefe:#F2F1EE; /* der Grund — zur Laufzeit die Turnierfarbe */ --breite:760px; --rand:var(--a-24); --luft:clamp(var(--a-48),9vw,88px); /* ── Bewegung. Eigene Kurven: die Standard-Easings sind zu schwach. ──── */ --aus:cubic-bezier(.23,1,.32,1); /* etwas tritt ein oder aus */ --einaus:cubic-bezier(.77,0,.175,1); /* etwas bewegt sich im Bild */ --kurz:160ms; /* Druckantwort */ --mittel:240ms; /* Zustandswechsel */ --erzaehlt:2200ms; /* der Weg zeichnet sich */ } *{box-sizing:border-box;margin:0;padding:0} /* Regeln aus lenis.css 1.3.26 — dieselbe Einbindung wie auf der Pitchseite. */ html.lenis,html.lenis body{height:auto} .lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip} .lenis.lenis-smooth iframe{pointer-events:none} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%; /* Ein Sprung auf einen Anker soll gleiten, nicht springen — und unter der festen Kopfzeile nicht kleben bleiben (Wagi: «Scrolling smoother und weicher»). */ scroll-padding-top:var(--a-24);scroll-padding-bottom:var(--a-24)} /* Wer Bewegung abbestellt hat, bekommt auch keinen Gleitflug (Meret, 2.3.3). */ @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* Der Anmeldeblock bricht mit 100vw aus der Spalte aus. Ist eine Scrollleiste sichtbar, ist 100vw breiter als der Inhalt — dann entstünde ein waagrechter Balken. «clip» statt «hidden»: Es schneidet, ohne Sticky zu zerschlagen. */ body{overflow-x:clip} body{background:var(--tiefe);color:var(--kreide); font-family:'Archivo',system-ui,-apple-system,sans-serif; font-size:var(--s-18);line-height:1.6;-webkit-font-smoothing:antialiased} img,svg{max-width:100%;display:block;height:auto} /* Ein sichtbarer Fokus ist keine Zierde. Er ist der einzige Weg für alle, die mit der Tastatur unterwegs sind — und er fehlte in der App bei Verweisen. */ :where(a,button,input,select,textarea):focus-visible{ outline:3px solid var(--kreide);outline-offset:3px;border-radius:2px} .springen{position:absolute;left:-9999px;top:0;background:var(--signal); color:var(--auf-signal);padding:12px 18px;z-index:99;text-decoration:none} .springen:focus{left:8px;top:8px} /* ── Aufbau ───────────────────────────────────────────────────────────── */ section,footer{padding:var(--luft) 0} .innen{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)} /* Zeilenmass: rund 54 Zeichen bei voller Breite. Die Lehre verlangt 65 bis 75 — das gilt für Fliesstext, den man minutenlang liest. Hier sind die längsten Absätze drei Zeilen lang, und ein schmales Mass passt zur plakativen Anlage. Bewusst so, nicht vergessen. */ p{max-width:34em;text-wrap:pretty} p + p{margin-top:var(--a-16)} /* ── Typografie ───────────────────────────────────────────────────────── */ h1,h2,h3{font-family:'Big Shoulders Display',Impact,sans-serif;font-weight:700; line-height:.92;text-transform:uppercase;text-wrap:balance} h1{font-size:clamp(var(--s-52),13vw,104px);letter-spacing:.004em} /* Deutlich grösser als vorher (Wagi, 24.9.2026): Die Kapitel tragen die Seite, seit Nummern und Trennlinien weg sind. */ h2{font-size:clamp(var(--s-40),9vw,var(--s-76));margin-bottom:var(--a-24); line-height:.92} h3{font-size:clamp(var(--s-32),6vw,var(--s-52));line-height:.96; color:var(--gelb-schrift)} .spitzmarke,.tat-notiz,.klein,.datum,.zahlen span,.karte figcaption{ font-family:'Archivo',system-ui,sans-serif;font-size:var(--s-12); letter-spacing:.18em;text-transform:uppercase;color:var(--stumm)} .spitzmarke{margin-bottom:var(--a-16);color:var(--gelb-schrift)} .anspruch{font-family:'Big Shoulders Display',Impact,sans-serif;font-weight:700; font-size:clamp(var(--s-24),5.8vw,var(--s-40));line-height:1.04; text-transform:uppercase;color:var(--gelb-schrift);margin-top:var(--a-16); max-width:16em} /* Eine Grösse für den Lauftext, kein grösserer Lead (Wagi, 24.9.2026). Der Absatz nach der Überschrift hiess «gross» und war es auch — jetzt ist er ein Absatz wie die anderen, er steht nur zuerst. */ .vorspann{margin-top:var(--a-24)} .gross{font-size:inherit;line-height:inherit} .pointe{font-family:'Big Shoulders Display',Impact,sans-serif;font-weight:700; font-size:clamp(var(--s-24),5vw,var(--s-32));line-height:1.04; text-transform:uppercase;color:var(--gelb-schrift);margin-top:var(--a-24); max-width:20em} /* ── Hero ─────────────────────────────────────────────────────────────── */ /* Richtung B «Die Ansage» (24.9.2026): links ein echtes Foto vom Turnier, rechts die Ansage auf der Farbe des Turniers. Auf dem Handy untereinander, Bild zuerst — so wird die Seite gelesen. Die Diagonale von früher ist weg: Sie war die Handschrift von «Nachtsprint». Die Kante zwischen Bild und Farbfläche ist jetzt die Form. */ .hero{background:var(--akzent);display:grid;grid-template-columns:1fr; align-items:stretch;padding:0} .heldbild{position:relative;margin:0;background:var(--asphalt); min-height:min(62vh,420px);overflow:hidden} .heldbild img{width:100%;height:100%;object-fit:cover;object-position:50% 38%} .hero .platte{background:var(--akzent);color:var(--auf-gelb); padding:clamp(var(--a-32),7vw,var(--a-64)) var(--rand) clamp(var(--a-48),8vw,var(--a-64)); display:flex;flex-direction:column;justify-content:flex-end} .hero .platte .spitzmarke,.hero .platte .vorspann,.hero .platte h1, .hero .platte .anspruch{color:var(--auf-gelb)} .hero .platte .tat{background:var(--signal);color:var(--auf-signal)} @media(min-width:860px){ .hero{grid-template-columns:minmax(300px,42%) 1fr} .heldbild{min-height:min(78vh,620px)} .hero .platte{padding-left:clamp(var(--a-32),4vw,56px); padding-right:clamp(var(--a-32),4vw,56px)} } /* Eine kurze Seite soll den Schirm trotzdem füllen: Sonst sitzt der Fuss mitten im Bild und darunter steht eine leere Fläche (31.8.2026). */ main.knapp{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column} main.knapp > .hero{flex:1} /* ── Die Tür auf «Nächstes Turnier» (31.8.2026) ─────────────────────────── */ /* Das Passwortfeld steht auf der öffentlichen Seite, nicht erst in der App: Wer den Code hat, ist einen Schritt vom Abend entfernt, nicht zwei. */ .tuer{display:flex;flex-wrap:wrap;gap:var(--a-12);align-items:flex-end; margin-top:var(--a-32)} .tuer .feld{display:block;flex:1 1 200px;min-width:0} /* Die Tür steht mittig im hellen Balken und hat Luft (Wagi, 24.9.2026: «Feld einmitten in den Balken, mehr Space»). Nur die Tür: Das Formular der Anmeldung trägt dieselbe Klasse, und dort gehören die Beschriftungen nach links (im Browser gesehen, sie standen plötzlich mittig). */ #tuer{justify-content:center;max-width:520px; margin:var(--a-64) auto var(--a-48)} #tuer .feld{flex:1 1 240px;text-align:center} .tuer .feldname{display:block;margin-bottom:var(--a-8); /* 14 statt 12: Beschriftungen in Versalien und gesperrt sind bei 12 px nicht mehr zumutbar (Meret, 24.9.2026). */ font-family:'Archivo',system-ui,sans-serif;font-size:var(--s-14); letter-spacing:.18em;text-transform:uppercase;color:var(--gelb-schrift)} .tuer input{width:100%;min-height:48px;padding:0 var(--a-16); background:var(--flaeche);color:var(--kreide); /* Zwei Bildpunkte in der Signalfarbe statt einem in --kante: Auf dem rosa Grund kam der alte Rand auf 2,84:1, das Feld hatte praktisch keine Kante mehr (Meret, 24.9.2026). Jetzt wie die Anmeldung, 8,81:1. */ border:2px solid var(--signal);border-radius:var(--radius); font:inherit;font-size:var(--s-18)} .tuer input::placeholder{color:var(--stumm);opacity:1} .tuer input:focus-visible{outline:3px solid var(--kreide);outline-offset:3px} .tuer .tat{flex:0 0 auto;border:none;cursor:pointer;font:inherit; font-family:'Big Shoulders Display',Impact,sans-serif;font-weight:700; font-size:var(--s-24);text-transform:uppercase; background:var(--signal);color:var(--auf-signal);min-height:48px;padding:0 28px} .tuer .tat:disabled{opacity:.6;cursor:wait} /* Die Platzreservation (Wagi, 22.9.2026). Sie nutzt die Felder der Tür, steht aber untereinander und über die ganze Breite — Wagis Formularregel vom 19.8.2026: «Felder füllen den Container», keine Stapel ungleich breiter Kästchen. */ /* Die Anmeldung ist die zweite Stelle, an der die Turnierfarbe gross auftritt (Richtung B). Sie läuft über die ganze Breite, damit sie nicht wie ein Kasten im Text steht, sondern wie ein Halt auf der Seite. */ .reservation{margin:var(--a-48) calc(50% - 50vw) 0;width:100vw; /* Die volle Turnierfarbe, wie der Hero: Auf dem hellen Grund ist sie wieder ein Halt auf der Seite (Wagi, 24.9.2026). */ background:var(--akzent);color:var(--kreide); /* Plus --rand: «.innen» polstert selbst noch einmal, darum stand der Block ab 760 px Fensterbreite 24 px links aus der Flucht (Silvan, 24.9.2026). */ padding:clamp(var(--a-32),6vw,var(--a-48)) max(var(--rand),calc(50vw - var(--breite) / 2 + var(--rand)))} .reservation .untertitel,.reservation p,.reservation .feldname, .reservation .plaetze,.reservation .antwort{color:var(--kreide)} .reservation .tat{background:var(--signal);color:var(--auf-signal)} .reservation input{background:var(--flaeche);color:var(--kreide); border:2px solid var(--signal)} .reservation .untertitel{margin:0 0 var(--a-8); font-family:'Big Shoulders Display',Impact,sans-serif;font-weight:700; font-size:var(--s-24);text-transform:uppercase;letter-spacing:.01em} .anmeldung{display:grid;grid-template-columns:1fr;gap:var(--a-12); margin-top:var(--a-16)} /* Ein eigenes display schlaegt das Attribut hidden — ohne diese Zeile blieb das Formular nach dem Abschicken stehen (gesehen, 22.9.2026). */ .anmeldung[hidden]{display:none} .anmeldung .feld{flex:none;width:100%} .anmeldung .tat{width:100%;justify-content:center} .plaetze{margin:var(--a-12) 0 0;font-size:var(--s-16);font-weight:600; color:var(--auf-gelb)} /* Die Zeile wird bei ausgebuchtem Turnier ausgeblendet, nicht gedimmt: Eine Deckkraft von .75 drückte ausgerechnet die wichtigste Zeile von 7,34:1 auf 4,34 (Meret, 24.9.2026). */ /* Für Menschen unsichtbar, für Maschinen da. Kein display:none — manche Maschinen füllen nur, was im Dokument steht und nicht abgeschaltet ist. */ .fangfrage{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* Fusszeile: Impressum · Datenschutz · Admin (Wagis Standard). Eine Zeile, keine Knöpfe — der frühere Admin-Knopf mit Rahmen stand allein da und wirkte wichtiger als er ist. */ .fusslinks{margin-top:var(--a-24);font-family:'Archivo',system-ui,sans-serif; font-size:var(--s-12);letter-spacing:.14em;text-transform:uppercase;color:var(--stumm)} /* 44 Punkte hoch, wie jedes andere Ziel — vorher 27 (Meret, 24.9.2026). */ .fusslinks a{display:inline-flex;align-items:center;min-height:44px; padding:4px var(--a-8); color:var(--kreide);text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px} .fusslinks a{text-decoration-color:var(--stumm); transition:text-decoration-color var(--kurz) var(--aus)} @media (hover:hover) and (pointer:fine){ .fusslinks a:hover{text-decoration-color:var(--kreide)}} /* Impressum und Datenschutz (24.9.2026). Reiner Lesetext: eine Spalte, in der Breite, die man ohne Kopfdrehen liest. Keine Kästen, keine Farbflächen — die Seiten sollen nüchtern wirken, nicht gestaltet. */ .rechtstext{max-width:66ch;margin:0 auto;padding:var(--a-48) var(--a-24) var(--a-64)} .rechtstext h1{font-size:clamp(var(--s-32),8vw,var(--s-52));margin:var(--a-8) 0 var(--a-24)} .rechtstext h2{font-size:var(--s-24);margin:var(--a-32) 0 var(--a-8)} .rechtstext p,.rechtstext li{line-height:1.6} .rechtstext p{margin:0 0 var(--a-12)} .rechtstext .gross{margin-bottom:var(--a-24)} .rechtstext ul{margin:0 0 var(--a-12);padding-left:1.2em} .rechtstext li{margin-bottom:var(--a-8)} .rechtstext a{color:var(--kreide);text-decoration:underline;text-underline-offset:3px} .rechtstext a:hover{color:var(--gelb-schrift)} .rechtstext .spitzmarke a{text-decoration:none;color:var(--gelb-schrift)} .rechtstext .klein{margin-top:var(--a-32);color:var(--stumm)} /* Eine Fehlermeldung ist keine Fussnote: 16 px, gemischte Schrift, in der Farbe der Schrift (Meret, 24.9.2026 — vorher erbte sie .klein mit 12 px, Versalien und .18 em Sperrung). */ .fehlerzeile{margin:var(--a-8) 0 0;font-size:var(--s-16);font-weight:600; color:var(--auf-gelb)} .fehlerzeile:empty{display:none} .antwort{margin-top:var(--a-16)} #tuerHinweis{margin-top:var(--a-12)} #tuerHinweis:empty{display:none} /* Eine Absage ist keine Katastrophe — sie soll auffallen, ohne zu schreien. Kein farbiger Rand links, nur die Schrift. */ #tuerHinweis.schlecht{color:var(--kreide)} /* ── Die Platzhalter auf «Nächstes Turnier» (31.8.2026) ─────────────────── */ /* Vier Zeilen, die stehen bleiben können, solange nichts feststeht — und die Zeile für Zeile durch Echtes ersetzt werden, sobald Wagi es weiss. Kein «offen», kein leerer Kasten: Was hier steht, ist eine Antwort, nur noch keine genaue. */ /* Unten Abstand, nicht nur oben: Ohne ihn klebte «im Sitzen» am Schlusssatz, und die vier Zeilen liefen in den Fliesstext hinein (31.8.2026, im Bild gesehen). */ .platzhalter{display:grid;grid-template-columns:auto 1fr; gap:var(--a-12) var(--a-24);margin:var(--a-32) 0;align-items:baseline} .platzhalter dt{font-family:'Archivo',system-ui,sans-serif; font-size:var(--s-12);letter-spacing:.16em;text-transform:uppercase; color:var(--gelb-schrift)} .platzhalter dd{margin:0;font-size:var(--s-18);line-height:1.45} /* Auf sehr schmalen Geräten untereinander statt nebeneinander: Zwei Spalten liessen für «zwölf bis achtzehn, du hoffentlich dabei» drei Zeilen übrig. */ @media (max-width:400px){ .platzhalter{grid-template-columns:1fr;gap:var(--a-4)} .platzhalter dd{margin-bottom:var(--a-16)} .platzhalter dd:last-of-type{margin-bottom:0} } /* ── Die Tat ──────────────────────────────────────────────────────────── */ .tatzeile{margin-top:var(--a-32);max-width:none} /* Beim Überfahren füllt sich der Knopf von unten mit der Gegenfarbe — eine Bewegung, die aus dem Knopf selbst kommt, statt ihn anzuheben oder einzufärben. Der Farbwechsel der Schrift läuft mit; beides über dieselbe kurze Dauer, damit es wie eine Geste wirkt (Wagi, 24.9.2026: «smarter Effekt»). Ohne Zeigergerät und bei reduzierter Bewegung passiert nichts. */ .tat{position:relative;overflow:hidden;isolation:isolate; display:inline-flex;align-items:center;min-height:48px;padding:0 28px; background:var(--signal);color:var(--auf-signal);text-decoration:none; box-shadow:inset 0 0 0 2px var(--signal); font-family:'Big Shoulders Display',Impact,sans-serif;font-weight:700; font-size:var(--s-24);text-transform:uppercase;letter-spacing:.01em; border-radius:var(--radius); transition:transform var(--kurz) var(--aus),color var(--mittel) var(--aus)} /* Die Füllung liegt hinter der Schrift und wächst von unten heran. */ .tat::before{content:"";position:absolute;inset:0;z-index:-1; background:var(--auf-signal);transform:scaleY(0);transform-origin:bottom; transition:transform var(--mittel) var(--aus)} .tat:not(.aus):not(:disabled):active{transform:scale(.97)} /* Abgeschaltet: Der Knopf zeigt, dass es ihn geben wird, lädt aber nicht zum Antippen ein. Gedämpft statt ausgegraut — auf dunklem Grund verschwindet Grau, und lesbar muss er bleiben. */ /* Gemessen: Stumm auf --flaeche-2 kommt nur auf 4,14 — verlangt sind 4,5. Die dunklere Fläche bringt 4,8 und lässt den Knopf trotzdem gedämpft wirken; sie hebt sich vom Abschnittsgrund noch ab. */ .tat.aus{background:var(--flaeche);color:var(--stumm);cursor:default} .tat.aus:active{transform:none} @media (hover:hover) and (pointer:fine){ .tat:not(.aus):not(:disabled):hover{transform:translateY(-1px)} .tat:not(.aus):not(:disabled):hover::before{transform:scaleY(1)} /* Der Knopf ist dunkel und füllt sich weiss — nicht mit der Turnierfarbe. Die trägt jetzt der Grund, und Rosa auf Rosa ist kein Effekt, sondern ein verschwundener Knopf (Wagi, 24.9.2026). */ .tat:not(.aus):not(:disabled):hover{color:var(--signal)} } .tat-notiz{display:block;margin-top:var(--a-12)} /* ── Der Anwurf ───────────────────────────────────────────────────────── */ /* Dieselbe Animation wie auf dem Anmeldeschirm der App: Der gelbe Ball rollt herein und bleibt vor dem Marker liegen — zwei Sekunden Ruhe — dann fliegt ein dritter herein und schubst ihn weg. Das ganze Spiel in fünf Sekunden, ohne ein Wort. Ein Unterschied zur App: Dort läuft sie beim Laden. Hier startet sie erst, wenn der Hero eingetreten ist — sonst hätte man sie halb verpasst, während die Seite noch einblendet. Der Tagmodus ist raus, die Seite kennt keinen. Wer weniger Bewegung eingestellt hat, sieht die Endlage: der dritte Ball vorne, der gelbe angeschnitten am Rand. Die Geschichte, ohne sie zu erzählen. */ .anwurf-buehne{height:190px;margin:var(--a-32) calc(var(--rand) * -1) 0; overflow:hidden;display:flex;justify-content:center} .anwurf-buehne svg{width:380px;height:190px;flex:none;display:block} .aw-marker{fill:#EFEDE7;stroke:#8E8B82;stroke-width:1.5} .aw-ball{fill:var(--signal)} .aw-ball-zwei{fill:var(--kreide)} .aw-glanz{fill:#fff;opacity:.34} /* Schatten skalieren um sich selbst, nicht um die Mitte der Zeichenfläche. Ohne transform-box wandern sie beim Kleinerwerden schräg davon — gemessen am 30.8.: 26 Bildpunkte nach oben und 18 nach links, mitten im Aufprall. */ .aw-schatten{fill:#000;opacity:.22;transform-box:fill-box;transform-origin:50% 50%} /* Der ganze Ablauf: 0,0–1,9 s der gelbe Ball rollt herein und kommt vor dem Marker zur Ruhe 1,9–3,9 s Ruhe — zwei Sekunden, damit das Bild steht 3,9–4,5 s ein dritter Ball fliegt von links oben herein 4,4–5,2 s der Treffer schiebt den gelben nach rechts aus dem Bild Schatten gehorchen dem Boden, nicht dem Ball: Der rollende Schatten fährt waagrecht mit und dreht nicht; der fliegende Ball hat gar keinen, bis er aufsetzt. */ @media(prefers-reduced-motion:no-preference){ .hero.da .aw-rollt{animation:aw-rollen 1.9s cubic-bezier(.12,.62,.2,1) both; transform-origin:224px 112px} .hero.da .aw-rollschatten{ animation:aw-schatten-rein 1.9s cubic-bezier(.12,.62,.2,1) both, aw-schatten-weg .8s cubic-bezier(.22,.7,.3,1) 4.4s both} .hero.da .aw-marker-auf{animation:aw-auf .5s ease-out .2s both; transform-origin:296px 132px} .hero.da .aw-weg{animation:aw-wegschubsen .8s cubic-bezier(.22,.7,.3,1) 4.4s both; transform-origin:224px 112px} .hero.da .aw-fliegt{animation:aw-anflug .6s cubic-bezier(.4,.05,.6,1) 3.9s both; transform-origin:224px 112px} .hero.da .aw-schatten-flug{animation:aw-flugschatten .6s cubic-bezier(.4,.05,.6,1) 3.9s both} } /* Ohne Bewegung: Der dritte Ball liegt vorne, der gelbe angeschnitten am Rand — die Endlage der Geschichte, ohne sie zu erzählen. */ @media(prefers-reduced-motion:reduce){ .aw-weg{transform:translateX(158px)} .aw-rollschatten{opacity:0} } /* Der Ball kommt von links, wird langsamer und bleibt kurz vor dem Marker liegen — er nähert sich, er stösst nicht an. */ @keyframes aw-rollen{ from{transform:translateX(-300px) rotate(-620deg)} to{transform:translateX(0) rotate(0)}} @keyframes aw-auf{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}} /* Der Schatten fährt denselben Weg — aber nur waagrecht. Ein Schatten dreht sich nicht mit dem Ball, er liegt auf dem Boden. */ @keyframes aw-schatten-rein{ from{transform:translateX(-300px)} to{transform:translateX(0)}} /* Der Treffer: kurzer Rückstoss, dann rutscht der gelbe über den Marker hinweg nach rechts und bleibt angeschnitten am Rand liegen. */ @keyframes aw-wegschubsen{ 0%{transform:translate(0,0) rotate(0)} 18%{transform:translate(26px,-14px) rotate(58deg)} 100%{transform:translate(158px,0) rotate(300deg)}} /* Sein Schatten geht mit — aber am Boden. Wo der Ball kurz abhebt, wird der Schatten kleiner und blasser, statt mitzufliegen. */ @keyframes aw-schatten-weg{ 0%{transform:translateX(0) scale(1);opacity:.22} 18%{transform:translateX(26px) scale(.78);opacity:.12} 100%{transform:translateX(158px) scale(1);opacity:.22}} /* Der dritte Ball fliegt — er rollt nicht. Von links oben, mit kurzem Aufsetzer am Ende. */ @keyframes aw-anflug{ 0%{transform:translate(-330px,-170px) rotate(-120deg);opacity:0} 12%{opacity:1} 82%{transform:translate(4px,6px) rotate(14deg)} 100%{transform:translate(0,0) rotate(0)}} /* Solange er fliegt: kein Schatten. Er entsteht erst mit dem Aufsetzen — kurz breiter vom Aufprall, dann in Ruhe. */ @keyframes aw-flugschatten{ 0%{opacity:0;transform:scale(.55)} 74%{opacity:0;transform:scale(.55)} 86%{opacity:.26;transform:scale(1.08)} 100%{opacity:.22;transform:scale(1)}} /* ── Punktegrafik ─────────────────────────────────────────────────────── */ .punktebild{background:var(--flaeche);border-radius:8px;padding:16px;margin:var(--a-24) 0} .punktebild svg{width:100%} /* Die Punktegrafik ist ein Artefakt aus dem Reglement der App und bringt zehn eigene Klassen mit. Ich hatte zuerst nur Boden und Linien gefärbt — die Bälle blieben schwarz auf dunklem Grund und waren nicht zu sehen (Wagi, 30.8.2026). Der ganze Satz gehört hierher, sonst reist die Grafik ohne ihre Kleider. Ein Unterschied zur App: Dort sitzt sie auf --asphalt, hier auf der Karte (--flaeche). Der Ring um jeden Ball trennt ihn vom Grund — er muss also die Kartenfarbe tragen, nicht die des Asphalts. */ .pb-boden{fill:transparent} .pb-linie line{stroke:var(--stumm);stroke-width:1.5;stroke-dasharray:4 4} /* Der Marker ist der kleine Weisse — also weiss, mit schwarzem Rand, damit er auf hellem Grund überhaupt einer ist (Wagi, 24.9.2026). */ .pb-marker{fill:#FFFFFF;stroke:var(--kreide);stroke-width:2; transition:transform var(--kurz) var(--aus)} /* Das Fingerziel: unsichtbar, aber 48 Bildpunkte breit — Merets Mass. Es trägt die Bewegung nicht, es fängt nur den Griff. */ .pb-markerziel{fill:transparent} /* Die ganze Gruppe rollt, Beschriftung inbegriffen. Kein Zeiger-Cursor: Ein Easteregg, das sich ankündigt, ist keines. Der Marker wächst beim Überfahren eine Spur — mehr Hinweis braucht es nicht. */ .pb-markergruppe{transition:transform 520ms var(--einaus)} @media (hover:hover) and (pointer:fine){ .pb-markergruppe:hover .pb-marker{transform:scale(1.12);transform-box:fill-box; transform-origin:center} } @media (prefers-reduced-motion:reduce){ .pb-markergruppe,.pb-marker{transition:none} } /* Rollt der Marker an einen Ball, deckt der Ball die Beschriftung zu. Sie geht darum weg, solange er unterwegs ist (im Browser gesehen, 24.9.2026). */ .pb-markergruppe.gerollt .pb-markertext{opacity:0} /* 14 SVG-Einheiten: Das Bild ist am Handy schmaler als sein Koordinatennetz, darum kamen 10 Einheiten dort als 7,5 px an (Meret, 24.9.2026). */ .pb-markertext{transition:opacity var(--mittel) var(--aus);fill:var(--stumm);font-family:'Archivo',system-ui,sans-serif;font-size:14px; letter-spacing:.12em;text-transform:uppercase} /* Die Abstufung läuft über die Deckkraft derselben Farbe, nicht über vier Grautöne — so bleibt der Abstand zum Grund überall gleich. Gemessen am 24.9. in der Rosa-Welt: Die «1» liegt bei 3,5 und die «0» bei 6,44 (die Ziffer trägt die volle Schriftfarbe). Verlangt sind 4,5 für kleine Schrift; die «1» ist gross genug, solange das Bild über 342 px breit liegt. Die Abstufung trägt die Bedeutung (der vierte Ball ist zu weit weg und zählt nichts) und bleibt darum bestehen — heller wird nur so viel wie nötig, und die Ziffer selbst bekommt die volle Schriftfarbe. Dass der Ball dunkler ist als die anderen, sagt genug. */ .pb-ball{stroke:var(--flaeche);stroke-width:2} .pb-drei,.pb-sechs{fill:var(--signal)} .pb-zwei{fill:var(--kreide)} .pb-eins{fill:var(--kreide);opacity:.62} /* Der vierte Ball bleibt dunkel — das trägt die Bedeutung «zu weit weg, zählt nichts». Seine Fläche allein käme damit nur auf 1,7 zum Grund; sichtbar wird er über eine Kontur, nicht über mehr Helligkeit. */ .pb-null{fill:var(--kreide);opacity:.18;stroke:var(--stumm);stroke-width:1.5} .pb-zahl{font-family:'Big Shoulders Display',Impact,sans-serif;font-weight:700; font-size:var(--s-24);fill:var(--kreide)} /* Auf dem Signalball die Gegenfarbe, auf dem hellen Ball die Grundfarbe der Karte. Vorher stand hier --auf-gelb: seit der Ball die Signalfarbe trägt, war das Blau auf Blau — unsichtbar (im Browser gesehen, 24.9.2026). */ .pb-auf-gelb{fill:var(--auf-signal)} .pb-auf-hell{fill:var(--flaeche)} /* Der Ball, der den Marker berührt: heller Ring um die Fläche. Ohne ihn sähe die Sechs aus wie eine Drei mit anderer Ziffer — der Ring sagt, dass hier etwas Besonderes passiert ist. */ .pb-sechs{stroke:var(--auf-signal);stroke-width:3;stroke-dasharray:none} .pb-funke line{stroke:var(--signal);stroke-width:2.5;stroke-linecap:round} .pb-hinweis{fill:var(--signal);font-family:'Archivo',system-ui,sans-serif;font-size:11px; letter-spacing:.1em;text-transform:uppercase} /* Die Ziffernspalte hat eine feste Breite und die Ziffer steht mittig darin. Vorher richtete sie sich nach der breitesten Ziffer — und weil die «1» in der Schablonenschrift schmal ist, sprang sie aus der Reihe. Tabular-nums half nicht: Diese Schrift bringt keine Tabellenziffern mit. Ausgerichtet wird an der Grundlinie, nicht an der Mitte: So sitzt die Ziffer auf derselben Linie wie die erste Textzeile, auch wenn der Text zweizeilig wird. */ /* Die Punkte (Wagi, 24.9.2026: «schön machen und leserlich»). Jede Zeile ist ein Block mit EINER durchgehenden Linie — vorher trugen Zahl und Text je eine eigene, und dazwischen klaffte die Spaltenlücke. Die Zahl steht in einer festen Spalte, jeder Satz beginnt an derselben Stelle. */ .punkteliste{margin:var(--a-32) 0} .punkteliste > div{display:grid;grid-template-columns:4.2em 1fr; align-items:center;column-gap:var(--a-24);padding:var(--a-16) 0; border-top:1px solid var(--linie)} .punkteliste > div:first-child{border-top:none;padding-top:0} .punkteliste dt{display:flex;align-items:baseline;gap:5px;color:var(--kreide)} .punkteliste dt b{font-family:'Big Shoulders Display',Impact,sans-serif; font-weight:700;font-size:var(--s-52);line-height:.85; font-variant-numeric:tabular-nums} .punkteliste dt span{font-size:var(--s-14);letter-spacing:.04em} .punkteliste dd{margin:0;font-size:var(--s-20);line-height:1.35; color:var(--kreide)} /* ── Karte ────────────────────────────────────────────────────────────── */ /* Ein gedruckter Plan: heller Grund, der Weg in der Farbe seines Turniers. Aussenradius der Karte = Innenradius plus Polsterung (8 = 4 + 4). */ .karte{background:var(--flaeche);border-radius:8px;padding:12px;margin-top:var(--a-24)} .karte svg{width:100%;border-radius:var(--radius)} .karte figcaption{margin-top:var(--a-12)} .k-gruen path{fill:var(--k-gruen)} .k-seeflaeche path{fill:var(--k-see)} .k-haus path{fill:var(--k-haus)} .k-fluss path{stroke:var(--k-fluss);stroke-width:2;fill:none} .k-gleis path{stroke:var(--k-gleis);stroke-width:1.5;fill:none} .k-strasse_klein path{stroke:var(--k-strasse);stroke-width:1.6;fill:none} .k-strasse_gross path{stroke:var(--k-hauptstrasse);stroke-width:3;fill:none} #route{fill:none;stroke:var(--signal);stroke-width:7; stroke-linecap:round;stroke-linejoin:round} .marke circle{fill:var(--signal);stroke:var(--kreide);stroke-width:2} .marke.ziel circle{fill:var(--kreide)} .mnr{font-family:'Archivo',system-ui,sans-serif;font-size:15px;font-weight:600;fill:var(--auf-gelb)} .mname{font-family:'Archivo',system-ui,sans-serif;font-size:var(--s-14);fill:var(--kreide)} /* ── Ein Bild vom Abend ───────────────────────────────────────────────── */ /* Die Bilder sind hochkant, wie sie am Abend entstehen. Auf dem Handy ist das richtig; auf dem Desktop wird das Bild sonst turmhoch, deshalb eine Grenze in der Höhe statt in der Breite. */ .abendbild{margin-top:var(--a-24)} .abendbild img{width:100%;max-height:70vh;object-fit:cover;border-radius:8px; background:var(--flaeche); /* Feine Kante: Ohne sie verschwimmt ein helles Bild mit dem Grund. Auf hellem Grund muss sie dunkel sein — weiss war der Rest der Nacht. */ outline:1px solid var(--linie);outline-offset:-1px} .abendbild figcaption{margin-top:var(--a-12); font-family:'Archivo',system-ui,sans-serif;font-size:var(--s-12); letter-spacing:.18em;text-transform:uppercase;color:var(--stumm)} /* ── Ein Abend ────────────────────────────────────────────────────────── */ /* Jedes Turnier trägt seine Farbe — auch im Archiv. Hottingen war Gelb, und das bleibt es, während die Seite drumherum in der Farbe des nächsten Turniers steht. Das ist der Kern des Systems (Wagi, 23.9.2026). */ /* --gelb steht in :root als Alias auf --akzent. Aliasse lösen sich dort auf, wo sie deklariert sind — ein neues --akzent hier unten ändert den Alias nicht mehr. Also beide setzen (im Browser gesehen: die Karte von Hottingen war pink). */ #turniere{--akzent:#F5B912;--gelb:#F5B912} .abend{background:var(--flaeche);border-radius:8px;padding:var(--a-24)} /* Der Laufweg steht seit dem 24.9.2026 in diesem Kapitel und nicht mehr davor. Als Block braucht er die Luft, die ihm als eigener Abschnitt der Rahmen gab. */ .abende .weg{margin-top:var(--a-48)} .abende .weg h3{margin:0 0 var(--a-8)} .abend header{margin-bottom:var(--a-16)} .datum{margin-top:var(--a-8)} .zahlen{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--a-12)} @media (min-width:520px){ .zahlen{grid-template-columns:repeat(4,1fr)} } .zahlen li{background:var(--flaeche-2);border-radius:var(--radius);padding:var(--a-16) var(--a-12)} .zahlen b{display:block;font-family:'Big Shoulders Display',Impact,sans-serif; font-weight:700;font-size:var(--s-40);line-height:.88;color:var(--gelb-schrift); font-variant-numeric:tabular-nums} .zahlen span{display:block;margin-top:var(--a-4)} .dauer{font-family:'Archivo',system-ui,sans-serif;font-size:var(--s-14);margin-top:var(--a-16); font-variant-numeric:tabular-nums;color:var(--stumm)} /* ── Bilderwand ───────────────────────────────────────────────────────── */ /* Parallaxe nach Wagis Vorlage (24.9.2026): Spalten, die beim Scrollen verschieden schnell wandern. Bewegt wird nur «transform», sonst nichts. */ .galerie .innen{margin-bottom:var(--a-16)} .wand{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--a-12); padding:var(--a-24) var(--rand) var(--a-32);align-items:start;overflow:clip; /* Die Spalten fliegen über den Rand hinaus — «clip» schneidet sie ab, ohne dass die Seite breiter wird. Der negative Rand unten holt das Loch zurück, das der Flug nach oben hinterlässt (gemessen, nicht geschätzt). */ margin-bottom:calc(var(--a-48) * -1)} .spalte{display:grid;gap:var(--a-12);will-change:transform} /* Die mittlere Spalte läuft gegen die äusseren — darum beginnt sie tiefer, sonst entstünde oben eine Lücke, sobald sie nach unten wandert. */ .wand .spalte:nth-child(2){margin-top:var(--a-48)} .kachel{margin:0;overflow:hidden;background:var(--asphalt); border-radius:var(--radius);transform:rotate(var(--schief,0deg))} @media (prefers-reduced-motion:reduce){.kachel{transform:none} .tat::before{transition:none}} .kachel img{width:100%;height:auto;display:block;aspect-ratio:3 / 4; object-fit:cover} /* Jede dritte Kachel etwas höher: gleich hohe Bilder in drei Spalten sehen aus wie eine Tabelle, nicht wie eine Wand. */ .kachel:nth-child(3n) img{aspect-ratio:4 / 5} .kachel:nth-child(4n) img{aspect-ratio:1 / 1} @media (max-width:760px){ .wand{grid-template-columns:repeat(2,1fr);gap:var(--a-8)} .wand .spalte:nth-child(2){margin-top:var(--a-24)} } @media (prefers-reduced-motion:reduce){ .spalte{transform:none !important;will-change:auto} } #galerielegende{margin-top:var(--a-16)} /* ── Fuss ─────────────────────────────────────────────────────────────── */ /* Der Fuss bekommt dieselbe Schräge wie der Hero, aber spiegelverkehrt: Dort steigt die Kante nach rechts, hier fällt sie (Wagi, 30.8.2026). Die Seite öffnet und schliesst damit mit derselben Geste, einmal hin und einmal her. Keine Linie mehr obendrauf: Die Schräge IST die Grenze. Mit beidem sähe es aus, als hätte jemand die Linie schief angeschnitten — derselbe Fehler, den der Hero heute schon einmal hatte. Und oben mehr Luft, damit der Inhalt nicht unter die Kante gerät. */ /* Die Fusszeile, aufgeräumt (Wagi, 24.9.2026): links der Sponsor, rechts die drei Verweise, darunter quer der Vermerk. Vorher stand alles in einer Spalte untereinander und wirkte wie ein Anhang, der nicht fertig wurde. */ footer{background:var(--asphalt);border-top:1px solid var(--linie); padding-top:var(--luft);padding-bottom:var(--a-32)} /* Zentriert (Wagi, 24.9.2026): der Sponsor in der Mitte, darunter als Abschluss die drei Verweise. Der Vermerk «Made by Wagi» steht nur noch in der App — draussen gehört die Seite dem Spiel und dem Sponsor. */ .fussmitte{display:flex;flex-direction:column;align-items:center; text-align:center;gap:var(--a-8)} .fussmitte .sponsorweg{margin:var(--a-4) 0 var(--a-8)} .fussmitte .klein{max-width:34ch} footer .fusslinks{display:flex;flex-wrap:wrap;justify-content:center; gap:var(--a-8) var(--a-24);margin-top:var(--a-32);padding-top:var(--a-24); border-top:1px solid var(--linie);width:100%} footer a{color:var(--kreide)} /* Das Logo führt zur Website des Sponsors. Als Verweis braucht es eine Trefferfläche und einen sichtbaren Fokus — beides bekommt es hier, nicht das Bild. */ .sponsorweg{display:inline-block;margin:var(--a-8) 0 var(--a-16); border-radius:var(--radius); transition:opacity var(--mittel) var(--aus)} @media (hover:hover) and (pointer:fine){ .sponsorweg:hover{opacity:.8} } .sponsor{width:180px;height:auto;display:block} .klein + .klein{margin-top:var(--a-8)} /* Die eigene Zeile gehört nicht mehr zum Sponsorblock — sie braucht Abstand, sonst liest sie sich wie eine dritte Zeile über Kraft. */ /* «MADE BY W♥GI» — wie in der Smovie App und der Kraft App (Wagi, 22.9.2026): zentriert, leise, das Herz steht für das A und ist Zeichnung, nicht Text. Vorgelesen wird «Made by Wagi, danielwagner.ch». Ein einziger Link. */ .fuss-vermerk{text-align:center;margin:var(--a-32) 0 0} .madeby{display:inline-flex;flex-direction:column;align-items:center;gap:2px; min-height:48px;padding:4px 16px;font-family:'Archivo',system-ui,sans-serif;font-size:11px; line-height:1.5;color:var(--stumm);text-decoration:none} .madeby-zeile{letter-spacing:.12em;font-weight:600} .madeby-domain{border-bottom:1px solid var(--linie)} .madeby:hover .madeby-domain,.madeby:focus-visible .madeby-domain{color:var(--kreide);border-color:var(--kreide)} .madeby .herz{display:inline-block;width:1.05em;height:1.05em;margin:0 .09em 0 -.1em; vertical-align:-.12em;transform:translate(.03em,.04em);fill:#E2574C} .madeby .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .admin{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--a-24); padding:0 var(--a-24);font-family:'Archivo',system-ui,sans-serif;font-size:var(--s-12); letter-spacing:.18em;text-transform:uppercase;color:var(--stumm); text-decoration:none;border:1px solid var(--linie);border-radius:var(--radius); transition:color var(--mittel) var(--aus),border-color var(--mittel) var(--aus)} @media (hover:hover) and (pointer:fine){ .admin:hover{color:var(--kreide);border-color:var(--stumm)} } /* ── Bewegung ─────────────────────────────────────────────────────────── */ /* Nur transform und opacity — beide laufen auf der Grafikkarte und lösen weder Layout noch Neuzeichnen aus. */ @media (prefers-reduced-motion:no-preference){ /* Weicher als vorher (Wagi, 24.9.2026: «Scrolling smoother und weicher»): kürzerer Weg, längere Zeit. 20 px in 520 ms sprangen ins Bild; 10 px in 820 ms kommen an, ohne dass man sie anschaut. */ [data-auf]{opacity:0;transform:translateY(10px); transition:opacity 820ms var(--aus),transform 820ms var(--aus)} [data-auf].da{opacity:1;transform:none} /* Der Weg zeichnet sich, sobald die Karte im Bild ist. Einmal. Er erzählt den Abend — deshalb darf er länger dauern als jede Bedien-Animation. */ #route{stroke-dasharray:4000;stroke-dashoffset:4000} .weg.da #route{transition:stroke-dashoffset var(--erzaehlt) var(--einaus); stroke-dashoffset:0} .marke{opacity:0;transition:opacity 400ms var(--aus)} .weg.da .marke{opacity:1} /* Gestaffelt, damit die Stationen der Reihe nach auftauchen wie unterwegs. */ .weg.da .marke:nth-child(1){transition-delay:600ms} .weg.da .marke:nth-child(2){transition-delay:960ms} .weg.da .marke:nth-child(3){transition-delay:1320ms} .weg.da .marke:nth-child(4){transition-delay:1680ms} .weg.da .marke:nth-child(5){transition-delay:2040ms} } /* Wer weniger Bewegung eingestellt hat, bekommt die Seite sofort und vollständig — nicht bloss langsamer. */