/* seo-nest · Landingpage
   Wie ein limitierter Sneaker: Sail (das warme Weiß der Seite), Schwarz (Schrift und der
   Schluss), Bone eine Stufe tiefer (das Spielfeld, die Kundenstimmen), das Foto randlos, Weiß
   für Kanten (Kasten, Porträtränder) und der grüne Tag (Ball, Knopf, Drehung, Urteil, Pointe) —
   das Grün der Fersenlasche am weißen Tennisschuh; Pong ist Tennis. Auf Schwarz dieselbe Farbe
   eine Stufe heller. Flächen Kante an Kante, eine Haarlinie, ein Radius, kein Schatten.
   Überschriften in Jost (freie Futura, selbst gehostet, OFL) — nur groß, nie
   klein. Leerraum nur, wo er trägt. */

/* Jost: eine freie Futura (OFL), selbst gehostet — die Schrift der alten Nike-Anzeigen, schräg die
   des Supreme-Logos. Nur 700, aufrecht und kursiv; kursiv ist allein die grüne Drehung. */
@font-face {
  font-family: "Jost"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/jost-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost"; font-style: italic; font-weight: 700; font-display: swap;
  src: url("fonts/jost-700-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --blau: #1C497A;
  --tinte: #17181a;     /* Schwarz, einen Hauch warm */
  --grau: #6b6862;
  --linie: #dcd5c8;
  --sail: #f4f0e8;      /* das warme Weiß der Seite */
  --bone: #e9e3d6;      /* eine Stufe tiefer: die Kundenstimmen */
  --weiss: #ffffff;
  --fehler: #b3261e;
  --buehne: #163b63;    /* Navy: nur noch Fokus und Zahlen auf der Danke-Seite */
  --schluss: #151618;   /* Schwarz: der Schluss */
  --hell: #efe3c9;      /* Creme auf Dunkel */
  --pop: #0f7a4a;       /* Grün: der Tag — Ball, Knopf, Drehung, Sterne, Urteil. 4,7 : 1 auf Sail, Weiß darauf 5,4 : 1 */
  --pop-tief: #0b6139;  /* der Knopf unter dem Finger */
  --pop-hell: #4cbf86;  /* dasselbe Grün auf Schwarz: die Pointe des Spruchs */
  --pop-saum: rgba(15, 122, 74, .16);
  --weich: rgba(255, 255, 255, .72);   /* Fließtext auf Dunkel */
  --kante: rgba(255, 255, 255, .16);   /* Haarlinie auf Dunkel */
  --r: 10px;            /* der eine Radius: Kasten, Feld, Felder, Knopf */
  /* Körnung: weiße Sprenkel mit höchstens 12 % Deckung, als Kachel über der Bühnenfarbe */
  --korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Filmfarbe: eine Bildsprache für alle Porträts (Team und Kunden) — warm, Schwarz leicht offen,
     etwas weniger Sättigung, wie eine Sportkampagne der Siebziger */
  --film: sepia(.2) saturate(.82) contrast(.95) brightness(1.03);
  /* Der Bund: zwei grüne Streifen wie an einer Tennissocke von 1978 — nur dort, wo der Besucher
     selbst handelt: am Spielfeld und am Formular */
  --streifen: linear-gradient(to bottom, transparent 5px, var(--pop) 5px 7px, transparent 7px 10px, var(--pop) 10px 12px, transparent 12px);
  --breite: 1200px;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --titel: "Jost", "Futura", "Avenir Next", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Die Seite ist Sail; das Spielfeld und der Schluss sind dunkle Panels darauf */
body {
  margin: 0; font-family: var(--schrift); font-size: 18px; line-height: 1.55;
  color: var(--tinte); background: var(--sail); -webkit-font-smoothing: antialiased;
}
h1, h2 { font-family: var(--titel); font-weight: 700; margin: 0; }
/* Untergrenze 10,9vw: auf 320 px passt »Gefunden werden,« noch in eine Zeile */
/* Am Handy bestimmt die längste Phrase die Größe: »Gefunden werden,« ist in Jost 8,45 em breit,
   die Spalte 100vw − 40 px → höchstens 11,84vw − 4,7 px */
h1 { font-size: clamp(min(2.4rem, 11.8vw - 5px), 1.2rem + 3.2vw, 4.4rem); line-height: 1.04; letter-spacing: -0.02em; }
h1 em { font-style: italic; color: var(--pop); display: block; }   /* die Drehung beginnt immer eine eigene Zeile, grün und schräg: in Bewegung */
/* Gesetzte Umbrüche: .z ist eine Phrase, die nur als Ganzes umbricht (und nur dann in sich, wenn
   sie allein breiter ist als die Zeile); .zl ist ein Satz, der eine eigene Zeile bekommt.
   Fließtext bricht »pretty«: kein Wort allein in der letzten Zeile. */
.z { display: inline-block; max-width: 100%; }
.zl { display: block; }
p, li { text-wrap: pretty; }
h2 { font-size: 2rem; line-height: 1.15; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--blau); text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Der Tag über der Überschrift: klein, gesperrt, Versalien — wie das Etikett am Schuh */
.marke { font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--grau); margin: 0 0 16px; }
/* Unter 410 px passt das Etikett der Karte nicht in eine Zeile (»September · limitiert auf 30 Stück«
   misst 315 px, Platz ist Breite − 86 px): dann zwei Zeilen wie auf einem Schuhkarton, ohne den Punkt
   dazwischen — ein Punkt am Zeilenende sähe nach Versehen aus */
@media (max-width: 409px) { .karte .marke .trenn { display: none; } .karte .marke .z { display: block; } }
img { display: block; max-width: 100%; height: auto; }
.rahmen { max-width: var(--breite); margin: 0 auto; padding: 0 20px; }
@media (min-width: 720px) { .rahmen { padding: 0 40px; } }

/* Kopf */
.kopf .rahmen { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.logo img { width: 150px; height: 41px; }
.telefon { font-weight: 600; text-decoration: none; color: var(--tinte); white-space: nowrap; }
/* Unter 360 px berührten sich Logo (150) und Nummer (138) in 280 px: beide eine Stufe kleiner */
@media (max-width: 359px) { .logo img { width: 124px; height: auto; } .telefon { font-size: 1rem; } }

/* Die Bühne: links Zeile, Spiel und die drei Punkte, rechts der weiße Kasten — das eine
   helle Ding. Die Punkte schließen unten bündig mit dem Kasten ab. */
.buehne { padding: 8px 0 64px; }
.buehne .rahmen { display: grid; gap: 40px; }
@media (min-width: 1040px) {
  .buehne { padding: 24px 0 80px; }
  .buehne .rahmen { grid-template-columns: minmax(0, 7fr) minmax(400px, 5fr); gap: 64px; align-items: stretch; }
  .karte { align-self: start; }
}
.wort { display: flex; flex-direction: column; }
.unter { font-size: 1.25rem; line-height: 1.45; color: var(--grau); margin: 24px 0 0; max-width: 30em; }
/* Die drei Punkte: nebeneinander, bündig mit der Unterkante des Kastens */
.punkte { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 20px; }
@media (min-width: 720px) { .punkte { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
@media (min-width: 1040px) { .punkte { margin-top: auto; padding-top: 36px; } }
.punkte li { color: var(--grau); font-size: .95rem; line-height: 1.5; }
.punkte strong { display: block; color: var(--tinte); font-weight: 700; font-size: 1.05rem; margin-bottom: 3px; }
/* Sterne: fünf Umrisse in Haarlinienfarbe, darüber der orange Anteil in Breite des Werts */
.sterne { position: relative; display: inline-block; width: 80px; height: 16px; vertical-align: -2px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 18'%3E%3Cpath fill='%23e6e1d9' d='M9 1.2l2.4 5 5.4.7-4 3.8 1 5.4L9 13.5l-4.8 2.6 1-5.4-4-3.8 5.4-.7zM27 1.2l2.4 5 5.4.7-4 3.8 1 5.4-4.8-2.6-4.8 2.6 1-5.4-4-3.8 5.4-.7zM45 1.2l2.4 5 5.4.7-4 3.8 1 5.4-4.8-2.6-4.8 2.6 1-5.4-4-3.8 5.4-.7zM63 1.2l2.4 5 5.4.7-4 3.8 1 5.4-4.8-2.6-4.8 2.6 1-5.4-4-3.8 5.4-.7zM81 1.2l2.4 5 5.4.7-4 3.8 1 5.4-4.8-2.6-4.8 2.6 1-5.4-4-3.8 5.4-.7z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%; }
.sterne > span { position: absolute; inset: 0 auto 0 0; overflow: hidden;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 18'%3E%3Cpath fill='%230f7a4a' d='M9 1.2l2.4 5 5.4.7-4 3.8 1 5.4L9 13.5l-4.8 2.6 1-5.4-4-3.8 5.4-.7zM27 1.2l2.4 5 5.4.7-4 3.8 1 5.4-4.8-2.6-4.8 2.6 1-5.4-4-3.8 5.4-.7zM45 1.2l2.4 5 5.4.7-4 3.8 1 5.4-4.8-2.6-4.8 2.6 1-5.4-4-3.8 5.4-.7zM63 1.2l2.4 5 5.4.7-4 3.8 1 5.4-4.8-2.6-4.8 2.6 1-5.4-4-3.8 5.4-.7zM81 1.2l2.4 5 5.4.7-4 3.8 1 5.4-4.8-2.6-4.8 2.6 1-5.4-4-3.8 5.4-.7z'/%3E%3C/svg%3E") no-repeat 0 0 / 80px 16px; }
.karte-siegel .sterne { width: 70px; height: 14px; }
.karte-siegel .sterne > span { background-size: 70px 14px; }

/* Knopf: das warme Detail — dorthin fliegt der Ball */
.knopf {
  display: inline-block; width: 100%; text-align: center; background: var(--pop); color: #fff;
  text-decoration: none; font-weight: 700; font-size: 1.05rem; padding: 16px 24px; border: 0;
  border-radius: var(--r); cursor: pointer; transition: background .2s, transform .12s;
}
.knopf:hover { background: var(--pop-tief); }
.knopf:active { transform: scale(.985); }
.knopf:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; }
.nur-mobil { margin-top: 32px; }
@media (min-width: 1040px) { .nur-mobil { display: none; } }

/* Der Kasten: weiß auf Sail, eine Haarlinie */
.karte { position: relative; background: var(--weiss); color: var(--tinte); border: 1px solid var(--linie); border-radius: var(--r);
  padding: 30px 22px 28px; transition: box-shadow .7s, border-color .7s, transform .7s; }
.karte::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; pointer-events: none;
  background: var(--streifen); border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0; }
/* Alle fünfzehn im Bild, der Impuls ist angekommen: ein Saum in der Farbe des Balls, der Kasten rückt einen Hauch vor */
body.fertig .karte { border-color: var(--pop); box-shadow: 0 0 0 3px var(--pop-saum); transform: translateY(-2px); }
@media (min-width: 720px) { .karte { padding: 38px 32px 36px; } }
.karte h2 { font-size: 1.6rem; }
.karte-unter { color: var(--grau); margin: 6px 0 14px; }   /* Abstand nach unten: siehe .spur */
/* Die Spur: eine senkrechte Haarlinie im linken Rand des Kastens, so hoch wie Felder und Frage.
   Sie füllt sich in sechs Schritten (fünf Pflichtfelder, die Frage) von oben in Grün, an ihrer
   Spitze rollt der Ball — dieselbe Kugel wie im Spiel. Sie steht neben dem Feld, das man gerade
   ausfüllt, statt oben aus dem Bild zu rutschen; bei sechs von sechs liegt der Ball über dem
   Knopf, und der Knopf antwortet mit seinem Ring. */
.karte-unter { margin-bottom: 22px; }
.spur-feld { position: relative; }
.spur { position: absolute; left: -13px; top: 6px; bottom: -54px; width: 2px; border-radius: 1px; background: var(--linie); }   /* unten: bis Knopfmitte, das Skript misst nach */
@media (min-width: 720px) { .spur { left: -18px; } }
.spur > span { position: absolute; left: 0; top: 0; width: 100%; height: 0; border-radius: 1px; background: var(--pop);
  transition: height .7s cubic-bezier(.2, .8, .2, 1); }
.spur > span::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px;
  border-radius: 50%; background: var(--pop); box-shadow: 0 0 0 3px var(--weiss); }
@keyframes angekommen { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }
.spur.voll > span::after { animation: angekommen .5s ease-out 1; }
@media (prefers-reduced-motion: reduce) { .spur > span { transition: none; } .spur.voll > span::after { animation: none; } }
.hinweis { color: var(--fehler); font-weight: 600; margin: 0 0 16px; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.felder { display: grid; gap: 16px; }
@media (min-width: 480px) { .felder { grid-template-columns: 1fr 1fr; } .felder .feld:nth-child(n+3) { grid-column: 1 / -1; } }
.feld { position: relative; display: block; }
.feld span { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 6px; }
.feld small { font-weight: 400; color: var(--grau); }
.feld input {
  width: 100%; height: 50px; font: inherit; color: var(--tinte); padding: 0 14px;
  border: 1px solid #c9c3ba; border-radius: var(--r); background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.feld input::placeholder { color: #a9a39b; }
.feld input:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px rgba(28, 73, 122, .14); }
/* Der Haken: erscheint, wenn ein Feld stimmt — ein Strich, kein Abzeichen */
.haken { position: absolute; right: 18px; bottom: 19px; width: 7px; height: 13px; border: solid var(--pop); border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(.6); opacity: 0; pointer-events: none; transition: opacity .15s, transform .25s ease-out; }
.feld.gut .haken { opacity: 1; transform: rotate(45deg) scale(1); }
.feld.gut input { border-color: rgba(15, 122, 74, .38); }
.feld.fehlt input { border-color: var(--fehler); }
.absicht { border: 0; padding: 0; margin: 24px 0; }
.absicht legend { font-size: .9rem; font-weight: 600; padding: 0; margin-bottom: 6px; }
/* Die Wahl: drei gleich breite Felder in einem Rahmen wie die Eingabefelder, die gewählte Größe
   füllt sich grün — wie die Größenwahl im Sneaker-Shop. Das Optionsfeld selbst ist unsichtbar,
   bleibt aber per Tastatur erreichbar (Pfeiltasten wechseln, Fokus als Innenkante). Zwei Wörter,
   zwei Zeilen — auf jeder Breite dieselbe Form; das längste Wort (»Machen«, 58 px) passt auch in
   die 77 px bei 320. */
.wahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #c9c3ba; border-radius: var(--r); overflow: hidden; background: var(--weiss); }
.wahl label { position: relative; display: flex; align-items: center; justify-content: center; height: 56px; padding: 0 4px;
  font-size: .98rem; line-height: 1.2; font-weight: 500; color: var(--tinte); text-align: center; cursor: pointer; transition: background .2s, color .2s; }
.wahl label + label { border-left: 1px solid #c9c3ba; }
.wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.wahl label:hover { background: var(--sail); }
.wahl label:has(input:checked) { background: var(--pop); color: var(--weiss); font-weight: 600; }
.wahl label:has(input:focus-visible) { box-shadow: inset 0 0 0 2px var(--blau); }
/* Jeder Satz darunter passt ab 360 px in eine Zeile; darunter sind zwei Zeilen reserviert,
   damit beim Wählen nichts springt. */
.wahl-hinweis { font-size: .85rem; color: var(--grau); margin: 8px 0 0; min-height: 1.55em; transition: opacity .15s; text-wrap: balance; }
@media (max-width: 359px) { .wahl-hinweis { min-height: 3.1em; } }    /* 2 × Zeilenhöhe 1,55 */
.wahl-hinweis.wechsel { opacity: 0; }
.klein { font-size: .85rem; color: var(--grau); margin: 14px 0 0; }
/* Die Siegel: einmal auf der Seite, unter dem Knopf */
.karte-siegel { display: flex; gap: 16px; align-items: center; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--linie);
  font-size: .85rem; line-height: 1.45; color: var(--grau); }
.karte-siegel a { flex: none; line-height: 0; }
.karte-siegel img { width: 64px; height: auto; border-radius: 3px; }
.karte-siegel a + a img { width: 48px; height: 48px; }
.karte-siegel p { margin: 0; }
.karte-siegel strong { color: var(--tinte); font-weight: 600; }

/* Bone: Kundenstimmen in drei Spalten. Das Siegel ist kein Bild mehr, sondern die Überschrift:
   »Kunden sagen: sehr gut.« in derselben Form wie der Spruch am Ende (Feld: Wert, der Wert in
   Grün). Darunter in einer Zeile die Quelle — Sterne, Wert, Anzahl, ProvenExpert —, verlinkt auf
   das Profil. Das offizielle Siegelbild steht einmal auf der Seite: im Kasten unter dem Knopf. */
.kunden { background: var(--bone); color: var(--tinte); padding: 56px 0 64px; }
@media (min-width: 900px) { .kunden { padding: 64px 0 76px; } }
.kunden-kopf { margin: 0 0 32px; }
@media (min-width: 900px) { .kunden-kopf { margin-bottom: 40px; } }
.kunden-kopf h2 { font-size: clamp(2rem, 1.3rem + 1.6vw, 2.75rem); line-height: 1.1; }
.kunden-kopf h2 em { font-style: italic; color: var(--pop); }
.urteil { display: block; margin: 10px 0 0; color: var(--grau); font-size: .95rem; line-height: 1.5; text-decoration: none; }
.urteil > .z:first-child { margin-right: 14px; }         /* Abstand statt Trennpunkt: bricht die Zeile, hängt kein Zeichen am Ende */
.urteil .sterne { margin-right: 8px; }
.urteil strong { color: var(--tinte); font-weight: 600; }
.urteil u { text-decoration: underline; text-decoration-color: var(--linie); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color .2s; }
.urteil:hover { color: var(--tinte); }
.urteil:hover u { text-decoration-color: currentColor; }
.stimmen { display: grid; gap: 40px; }
@media (min-width: 900px) { .stimmen { grid-template-columns: repeat(3, 1fr); gap: 48px; align-items: stretch; } }
blockquote { margin: 0; display: flex; flex-direction: column; }
/* Das öffnende Anführungszeichen hängt vor der Kante: die Buchstaben stehen bündig mit
   Überschrift und Porträt darunter, nicht das Zeichen. */
blockquote p { font-size: 1.05rem; line-height: 1.5; margin: 0 0 20px; text-indent: -.42em; }
blockquote footer { margin-top: auto; }
blockquote footer { display: flex; gap: 14px; align-items: center; font-size: .92rem; color: var(--grau); line-height: 1.35; }
blockquote footer img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; filter: var(--film); }
blockquote strong { color: var(--tinte); font-weight: 600; }

/* Das Büro: das Foto über die ganze Breite, ohne Rand, ohne Radius */
.buero { line-height: 0; }
.buero img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 720px) { .buero img { aspect-ratio: 16 / 5; max-height: 560px; } }

/* Der Schluss: der Spruch auf Schwarz mit Körnung, drei Zeilen, jede für sich mittig — unter dem
   randlosen Foto ist das der Abspann, keine Tabelle. (Vorher: Doppelpunkt-Achse, dann links
   bündig; Alex: zentriert stimmiger.) Das letzte Wort ist die Pointe und trägt das Grün. Der
   Fuß steht mit darauf, ebenfalls mittig. */
.ende { background: var(--korn), var(--schluss); color: var(--sail); padding: 32px 0 0; }
@media (min-width: 900px) { .ende { padding: 44px 0 0; } }
/* Schriftgröße: die längste Zeile (»Ergebnisse werden: abgeliefert.«) muss auf jedem Handy eine
   Zeile bleiben — 7vw − 3px hält sie bis 320 px. */
/* »Ergebnisse werden: abgeliefert.« ist in Jost 14,67 em breit: in 100vw − 40 px passen 6,82vw − 2,7 px */
.spruch { font-size: clamp(1.1rem, min(1.2rem + 2.6vw, 6.7vw - 3px), 3.4rem); line-height: 1.12; letter-spacing: -0.01em; text-align: center; }
.spruch .zeile { display: block; white-space: nowrap; }
.spruch .zeile:last-child .wert { color: var(--pop-hell); font-style: italic; }
.spruch.bereit .zeile { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.spruch.bereit .zeile:nth-child(2) { transition-delay: .28s; }
.spruch.bereit .zeile:nth-child(3) { transition-delay: .56s; }
.spruch.bereit.sichtbar .zeile { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .spruch.bereit .zeile { opacity: 1; transform: none; transition: none; } }

/* Das Spiel im Kopf der Seite: Pong mit fünfzehn Köpfen, im Look einer Sportkampagne der
   Siebziger — Retro wie beim Sneaker, nicht wie beim Automaten: Filmfarbe auf den Fotos (warm,
   Schwarz leicht offen, weniger Sättigung), zwei Streifen am Bund des Feldes wie an einer
   Tennissocke, ein runder Ball. Der Ball ist die Website des Besuchers, der Schläger eine Linie,
   die Maus, Finger oder Pfeiltasten folgt. Wen der Ball trifft, der ist im Bild und lehnt sich
   zurück. Ohne JavaScript oder ohne Bewegungswunsch: eine ruhige Reihe. */
.spiel { margin: 28px 0 0; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.platz { position: relative; outline: none; }
.team { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.team li { margin: 0; position: relative; }
.team button { display: block; position: relative; padding: 3px; border: 0; background: #fff; border-radius: 50%; cursor: default;
  -webkit-tap-highlight-color: transparent; }
/* Die Porträts tragen einen hellen Rand (am Knopf, nicht am Bild — sonst färbte ihn der Film gelb):
   ohne Kante laufen Fotos in die Fläche aus */
.team img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; display: block; filter: var(--film); }
@media (min-width: 720px) { .team img { width: 54px; height: 54px; } }
.ball, .schlaeger, .anstoss, .schild { display: none; }

/* Sobald das Spiel bereit ist: das Feld ist Bone, eine Stufe tiefer als die Seite — ein Panel
   aus demselben Material, kein Fremdkörper. Neben dem Kasten wird es nicht so hoch wie der
   Kasten, sondern so hoch, dass Schläger und Köpfe zusammen auf den Bildschirm passen. */
.platz.bereit { flex: 1; min-height: 430px; background: var(--bone); color: var(--tinte); border-radius: var(--r); touch-action: pan-y;
  user-select: none; -webkit-user-select: none; cursor: pointer; }
.platz.bereit::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; pointer-events: none;
  background: var(--streifen); }                         /* der Bund, derselbe wie am Formular */
@media (min-width: 560px) { .platz.bereit { min-height: 320px; } }
/* Was im Feld spielt, bleibt im Feld: die unsichtbaren Namensschilder der Köpfe am rechten Rand
   machten die Seite am Handy 402 statt 375 px breit — der Browser zoomte heraus, rechts stand
   ein heller Streifen. clip statt hidden: kein Scrollbereich, nur eine Kante. */
.platz.bereit { overflow: clip; }
@media (min-width: 1040px) { .platz.bereit { max-height: clamp(360px, 100vh - 440px, 520px); } }
.platz.bereit.spielt { touch-action: none; }             /* nur während der Ball fliegt gehört der Finger dem Spiel */
/* Solange der Ball fliegt, ist der Schläger der Zeiger — die Maus steuert ihn dann auf der ganzen
   Seite (seite.js), wer über den Rand hinausfährt, verliert ihn nicht */
.platz.bereit.spielt { cursor: none; }
.platz.bereit .team button { cursor: inherit; }
.platz.bereit:focus-visible { box-shadow: 0 0 0 2px var(--sail), 0 0 0 4px var(--tinte); }
.platz.bereit.maus:focus-visible { box-shadow: none; }
.platz.bereit .team { position: absolute; inset: 0; display: block; }
.platz.bereit .team li { position: absolute; left: 0; top: 0; z-index: 1; will-change: transform; }
.platz.bereit .team li.gesehen { z-index: 0; }          /* hat geschaut, lehnt sich zurück, wird grau — der Ball läuft vor ihm vorbei */
.platz.bereit .team li.spricht { z-index: 3; }         /* der Name darunter liegt über den Nachbarn; der Ball liegt über allem */
.platz.bereit .team button { background: var(--sail); transition: opacity .5s; }
.platz.bereit .team img { width: 100%; height: 100%; transition: filter .5s; }
.platz.bereit .team li.gesehen button { opacity: .45; }
.platz.bereit .team li.gesehen img { filter: grayscale(1) sepia(.15); }
/* Treffer: Name und Rolle stehen kurz unter dem Kopf — Schrift auf dem Feld, kein Schild */
.platz.bereit .schild { display: block; position: absolute; left: 50%; top: calc(100% + 5px); transform: translateX(-50%);
  white-space: nowrap; font-size: .74rem; line-height: 1.2; color: var(--grau); opacity: 0; pointer-events: none; transition: opacity .3s; }
.platz.bereit .schild strong { color: var(--tinte); font-weight: 600; }
.platz.bereit li.schild-an .schild { opacity: 1; transition-duration: .1s; }
.platz.bereit.finale .schild { display: none; }
/* Treffer: ein Ring läuft vom Aufprall weg */
.platz.bereit .ring { position: absolute; left: 0; top: 0; z-index: 4; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border: 1.5px solid var(--pop); border-radius: 50%; pointer-events: none; animation: ring .5s ease-out forwards; }
@keyframes ring { from { transform: scale(.5); opacity: .7; } to { transform: scale(2.6); opacity: 0; } }
.platz.bereit .ball { display: block; position: absolute; left: 0; top: 0; z-index: 5; width: 20px; height: 20px; border-radius: 50%;
  background: var(--pop); will-change: transform; }
.platz.bereit .schlaeger { display: block; position: absolute; left: 0; top: 0; z-index: 2; width: 200px; height: 4px; border-radius: 2px;
  background: var(--tinte); will-change: transform; transition: background .12s; }
.platz.bereit .schlaeger.prall { background: var(--pop); }
.platz.bereit.finale .ball, .platz.bereit.finale .schlaeger { opacity: 0; transition: opacity .4s; }
/* Der Anstoß: eine Zeile im Feld, solange der Ball noch liegt — in der Luft zwischen Köpfen und
   Schläger, nicht am Ball. Darunter die Anleitung als Etikett, gesetzt wie die Marke über der H1. */
.platz.bereit .anstoss { display: block; position: absolute; left: 16px; right: 16px; bottom: 74px; z-index: 3; text-align: center;
  pointer-events: none; font-family: var(--titel); font-weight: 700; font-size: 1.6rem; line-height: 1.2; color: var(--tinte);
  transition: opacity .3s; }
.platz.bereit .anstoss .wie { display: block; font-family: var(--schrift); font-weight: 700; font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--grau); margin-top: 10px; }
.platz.bereit.los .anstoss { opacity: 0; }
@media (max-width: 559px) { .platz.bereit .anstoss { bottom: 66px; font-size: 1.45rem; } }   /* am Handy vier Reihen: die Zeile darunter, nicht darüber */
.mit-finger { display: none; }
@media (hover: none) { .mit-maus { display: none; } .mit-finger { display: inline; } }
/* Die Zeile unter dem Feld: Stand des Spiels, im Finale die Sätze der fünfzehn, einer nach dem anderen */
.team-zeile { color: var(--grau); max-width: 40em; min-height: 3.2em; margin: 16px 0 0; transition: opacity .18s; }
.team-zeile.wechsel { opacity: 0; }
.team-zeile strong { color: var(--tinte); font-weight: 600; }
/* Der Impuls kommt an: ein leiser Ring um den Knopf, einmal, in dessen Farbe */
@keyframes dran { from { box-shadow: 0 0 0 0 rgba(15, 122, 74, .45); } to { box-shadow: 0 0 0 12px rgba(15, 122, 74, 0); } }
.dran { animation: dran 1s ease-out 1; }
@media (prefers-reduced-motion: reduce) { .team-zeile, .platz.bereit .team img, .platz.bereit .anstoss { transition: none; } }

/* Fuß: auf dem Schluss, hinter einer Haarlinie */
.fuss { background: var(--korn), var(--schluss); padding: 40px 0 36px; font-size: .9rem; line-height: 1.6; color: rgba(255, 255, 255, .55); }
.fuss .rahmen { text-align: center; }
.fuss .rahmen > :first-child { border-top: 1px solid var(--kante); padding-top: 28px; }
.fuss p { margin: 0 0 6px; }
/* Firma und Kontakt sind zwei Gruppen: bricht die Zeile, bricht sie zwischen ihnen — kein Punkt bleibt am Zeilenende hängen */
.fuss .zeile { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 20px; }
.fuss .zeile span { white-space: nowrap; }
.fuss a { color: #fff; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Danke-Seite: der Kasten, in dem das Formular stand, sagt jetzt, wie es weitergeht. Die Nummern
   wie auf einem Trikot — Jost kursiv in Grün, kein Kreis —, die Zeilen auf ihrer Grundlinie. */
.danke .buehne { padding-bottom: 96px; }
@media (min-width: 1040px) { .danke .buehne .rahmen { align-items: center; } }   /* die Zeile steht auf der Höhe des Kastens */
.schritte { list-style: none; margin: 14px 0 0; padding: 0; }
/* Raster je Schritt: Nummer · Titel · (Gesicht), darunter der Satz über die volle Breite —
   das Gesicht steht neben der Titelzeile und nimmt dem Satz keinen Platz */
.schritte li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "nr titel bild" ". text text";
  gap: 2px 14px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--linie); }
.schritte li:first-child { border-top: 0; }
/* ab 560 px ist Platz: das Gesicht reicht über beide Zeilen und bläht die Titelzeile nicht auf */
@media (min-width: 560px) { .schritte li { grid-template-areas: "nr titel bild" ". text bild"; } }
.schritte .nr { grid-area: nr; font: italic 700 2.1rem/1 var(--titel); color: var(--pop); }
.schritte strong { grid-area: titel; color: var(--tinte); font-weight: 600; }
.schritte p { grid-area: text; margin: 0; color: var(--grau); line-height: 1.5; text-wrap: pretty; }
.schritte img { grid-area: bild; align-self: center; width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  filter: var(--film); box-shadow: 0 0 0 3px var(--sail); }
.danke-kontakt { margin: 6px 0 0; padding-top: 16px; border-top: 1px solid var(--linie); font-size: .9rem; color: var(--grau); }
.danke-kontakt a { white-space: nowrap; }                /* Adresse und Nummer brechen nie in sich */

/* Projektstart (/analyse/start/): dieselbe Bühne, drei Teile statt zwei. Am Rechner links oben die
   Zeile, links unten die drei Punkte (bündig mit dem Kasten, wie auf der Landingpage), rechts der
   Kasten über beide Reihen. Am Handy das Formular vor den Punkten — wer ein Angebot annehmen will,
   soll nicht erst scrollen. Drei Felder untereinander, jedes über die volle Breite. */
.felder.einzeln { grid-template-columns: 1fr; }
.felder.einzeln .feld { grid-column: auto; }
.start .punkte { margin: 0; }
@media (min-width: 1040px) {    /* nur das Formular; die Bestätigung ist eine Danke-Seite (Zeile mittig neben dem Kasten) */
  .start:not(.danke) .buehne .rahmen { grid-template-areas: "wort karte" "mannschaft karte" "punkte karte";
    grid-template-rows: auto auto 1fr; row-gap: 0; }
  .start:not(.danke) .wort { grid-area: wort; }
  .start .mannschaft { grid-area: mannschaft; padding-top: 32px; }
  .start:not(.danke) .karte { grid-area: karte; }
  .start .punkte { grid-area: punkte; align-self: end; padding-top: 28px; }
  /* Der Kasten reicht so weit wie die linke Spalte: ist sie höher, rücken die Siegel nach unten —
     die Unterkanten schließen bündig, bei jeder Schrift */
  .start:not(.danke) .karte { align-self: stretch; display: flex; flex-direction: column; }
  .start:not(.danke) .karte .knopf { margin-bottom: 20px; }
  .start:not(.danke) .karte-siegel { margin-top: auto; }
}
/* Der Beleg nach dem Absenden: Feld und Wert wie auf einem Kassenzettel, hinter einer Haarlinie */
.beleg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; margin: 6px 0 0; padding-top: 16px;
  border-top: 1px solid var(--linie); font-size: .9rem; line-height: 1.5; color: var(--grau); }
.beleg dd { margin: 0; color: var(--tinte); overflow-wrap: anywhere; }
.beleg + .danke-kontakt { margin-top: 16px; }
/* Das Team auf dem Projektstart: die Reihe der Landingpage ohne Spiel, Gesichter statt Knöpfe */
.team-ruhig { margin: 0; }
.team .gesicht { display: block; padding: 3px; background: var(--weiss); border-radius: 50%; }
.start .team-zeile { min-height: 0; }
/* Drei Felder, dann der Knopf: derselbe Abstand wie auf der Landingpage nach der Frage */
.felder.einzeln { margin-bottom: 24px; }
/* Projektstart: ohne Zeile unter der Überschrift (Alex 09.10.) hält die Überschrift selbst den Abstand zu den Feldern */
.start .karte h2 + .hinweis, .start .karte h2 { margin-bottom: 22px; }