/* ============================================================================
   seiten-start.css — Anordnung der öffentlichen Startseite `index.html`
   Brandpool 2.1 · angelegt 12.08.2026 beim Verdrahten der Attrappen 01–03
   ----------------------------------------------------------------------------
   HERKUNFT
   Jede Regel steht so in `entwuerfe/entwurf.css` (Vorsatz `e-`, Session B) oder
   im `<style>`-Block von `entwuerfe/01-start-und-registrieren.dc.html`. Beide
   Attrappen sind von HP abgenommen. UMGEZOGEN, NICHT UMGEBAUT: keine Zahl ist
   angefasst, keine Regel ist neu erfunden.

   Nur zweierlei ist anders, und beides mit Absicht:
     · Der Vorsatz heißt `sr-` (Start und Registrieren) statt `e-`. `e-` bedeutet
       „Entwurf" und verschwindet mit den Attrappen.
     · Wo in `entwurf.css` eine harte Farbe stand (`#aab0b8` am Lupensymbol),
       steht hier das Token `var(--aus-text)`. `ui.css` sagt ausdrücklich: neue
       Stellen nehmen die Variablen, nicht die Zahlen. Der Unterschied ist
       #aab0b8 → #9aa0a8, also eine Nuance am Symbolgrau.

   WAS BEWUSST NICHT HIER STEHT
   Alles, was `ui.css` schon kann: Kopfleiste, Warenkorb-Knopf, Fortschritts-
   balken, Auswahlkachel, Chip, Knopf, Karte, Eingabefeld, Hinweiskasten, Badge.
   Diese Datei enthält ausschließlich ANORDNUNG — wo etwas steht, nicht wie es
   aussieht. Was im Baukasten fehlte, steht im Bericht, nicht hier als Erfindung.

   Reihenfolge im Kopf der Seite: ui.css → seiten.css → seiten-start.css.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   0 · `hidden` muss stärker sein als die Anordnung
   Die Seite schaltet ihre vier Ansichten und die Funnel-Schritte über das
   Attribut `hidden` um — so machen es die Attrappen. Das Attribut kommt aber
   nur aus dem Browser-Stylesheet und verliert gegen jede Klasse mit `display`
   (`.sr-funnel{display:flex}`). Ohne diese Zeile stünden alle vier Ansichten
   gleichzeitig auf dem Bildschirm.
   ---------------------------------------------------------------------------- */
[hidden]{ display:none !important }

/* ----------------------------------------------------------------------------
   1 · Schmale Spalte — Anmelden und Rollenauswahl
   `.sp-seite` aus dem Baukasten gibt Breite und Rand vor; hier wird sie nur
   verengt. Entwurf 1 B: `e-seite--schmal` = 880 px.
   ---------------------------------------------------------------------------- */
.sr-schmal{ max-width:880px }
.sr-mitte{ max-width:480px; margin:0 auto }
.sr-h1{ font-size:var(--fs-h1); letter-spacing:-.025em; font-weight:800 }
.sr-lede{ color:var(--muted); font-size:var(--fs-text); max-width:680px; margin-top:var(--sp-2) }
.sr-mager{ color:var(--muted); font-size:var(--fs-klein) }
.sr-zentriert{ text-align:center }
.sr-abstand{ margin-top:var(--sp-5) }

/* Zurück-Verweis über der Überschrift — `e-fzurueck` aus entwurf.css, Zeile 99 */
.sr-zurueck{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:var(--sp-5);
  font-size:var(--fs-text); font-weight:600; color:var(--muted);
  background:none; border:0; cursor:pointer; text-decoration:none;
}
.sr-zurueck:hover{ color:var(--text) }

/* ----------------------------------------------------------------------------
   2 · Rollenauswahl „Laden oder Marke?"
   Wörtlich aus dem `<style>`-Block von 01-start-und-registrieren.dc.html.
   ---------------------------------------------------------------------------- */
.sr-rolle{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4) }
@media(max-width:700px){ .sr-rolle{ grid-template-columns:1fr } }
.sr-rollenkarte{
  display:flex; flex-direction:column; gap:var(--sp-2); text-align:left;
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:var(--sp-5); cursor:pointer; transition:.14s; box-shadow:var(--sh-1);
  color:var(--text); text-decoration:none;
}
.sr-rollenkarte:hover{
  border-color:var(--accent); box-shadow:var(--sh-2); transform:translateY(-2px); color:var(--text);
}
.sr-rollenkarte .ic{
  width:44px; height:44px; border-radius:var(--r-lg); background:var(--accent-soft);
  color:var(--accent-dk); display:grid; place-items:center; font-size:22px; margin-bottom:var(--sp-2);
}
.sr-rollenkarte b{ font-size:var(--fs-h2); letter-spacing:-.02em }
.sr-rollenkarte p{ font-size:var(--fs-text); color:var(--muted); line-height:1.55 }
.sr-rollenkarte ul{
  margin:var(--sp-2) 0 0; padding-left:18px; display:grid; gap:5px;
  font-size:var(--fs-klein); color:var(--muted);
}
.sr-rollenkarte .go{ margin-top:var(--sp-4); font-size:var(--fs-text); font-weight:700; color:var(--accent-dk) }

/* ----------------------------------------------------------------------------
   3 · Funnel — eine Frage je Bildschirm
   entwurf.css Zeilen 90–114. Der dünne Fortschrittsbalken selbst ist
   `.sp-fortschritt` aus dem Baukasten und steht hier nicht.
   ---------------------------------------------------------------------------- */
.sr-funnel{ min-height:100vh; background:var(--card); display:flex; flex-direction:column }
.sr-fkopf{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--border);
}
.sr-fkopf-rechts{ margin-left:auto; display:flex; align-items:center; gap:var(--sp-4) }
.sr-flink{
  font-size:var(--fs-text); font-weight:600; color:var(--muted);
  background:none; border:0; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
}
.sr-flink:hover{ color:var(--text) }
.sr-fbuehne{ flex:1; display:flex; justify-content:center; padding:56px 22px 96px }
.sr-fbox{ width:100%; max-width:480px }
.sr-ffrage{
  font-size:var(--fs-h1); line-height:1.25; letter-spacing:-.03em;
  font-weight:800; margin-bottom:var(--sp-3);
}
.sr-fhilfe{ font-size:var(--fs-text); color:var(--muted); margin-bottom:var(--sp-6) }
.sr-ffeld{ margin-bottom:var(--sp-4) }
.sr-ffeld .sp-input{ width:100%; padding:12px 13px; font-size:var(--fs-basis) }
.sr-fpaar{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); margin-bottom:var(--sp-4) }
.sr-fpaar .sp-input{ width:100%; padding:12px 13px; font-size:var(--fs-basis) }
@media(max-width:520px){ .sr-fpaar{ grid-template-columns:1fr } }

/* Zweitrangiger Knopf unter dem dunklen Hauptknopf — `e-fzweit` */
.sr-fzweit{
  width:100%; margin-top:var(--sp-3); padding:13px;
  border:1px solid var(--border); border-radius:var(--r-md); background:var(--card);
  color:var(--text); font-family:inherit; font-size:var(--fs-basis); font-weight:600;
  cursor:pointer; display:grid; place-items:center; text-decoration:none;
}
.sr-fzweit:hover{ background:var(--bg); color:var(--text) }
.sr-ffuss{ margin-top:var(--sp-4); font-size:var(--fs-meta); color:var(--muted); text-align:center }

/* Ein `.sp-btn` auf einem `<a>`: der Baukasten kennt nur die Knopf-Fassung, und
   `a:hover{color:var(--text)}` aus `ui.css` gewinnt sonst gegen `.sp-btn--dunkel`
   — weißer Text würde beim Überfahren dunkel auf Schwarz. Dieselbe Sorte Lücke
   wie `.sp-reiter a` (LUECKEN-UI.md 4c); sie steht im Bericht. */
.sr-knopflink, .sr-knopflink:hover{ color:#fff; text-decoration:none }

/* ----------------------------------------------------------------------------
   4 · Chip-Wolke mit Suche — Branche (max 2) und Wunschkanäle (max 3)
   entwurf.css Zeilen 119–127. LUECKEN-UI.md führt sie als offenes Bauteil.
   ---------------------------------------------------------------------------- */
.sr-chips{ display:flex; flex-wrap:wrap; gap:7px }
.sr-chipbox{
  max-height:270px; overflow-y:auto; padding:var(--sp-3);
  border:1px solid var(--border); border-radius:var(--r-md); background:var(--card);
}
.sr-suchfeld{ position:relative; margin-bottom:var(--sp-2) }
.sr-suchfeld i{
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  color:var(--aus-text); font-size:var(--ic-md);
}
.sr-suchfeld .sp-input{ width:100%; padding-left:32px }
.sr-zaehlzeile{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:6px; font-size:var(--fs-mikro); color:var(--muted);
}
.sr-zaehlzeile b.voll{ color:var(--accent-dk) }
.sr-nix{ color:var(--muted); font-size:var(--fs-mikro); line-height:1.35 }

/* ----------------------------------------------------------------------------
   5 · Zwei Wege für die weiteren Standorte
   Spec 2.1: „Ab dem zweiten Standort stehen genau zwei Möglichkeiten
   gleichrangig nebeneinander." Gleichrangig heißt hier: dieselbe Kachel,
   dieselbe Breite, dieselbe Reihe. Die Kachel ist `.sp-kachel` aus dem
   Baukasten — sie ist das einzige Bauteil mit einem echten Auswahlzustand.
   ---------------------------------------------------------------------------- */
.sr-wege{ margin-bottom:var(--sp-4) }
.sr-wege .sp-kacheln{ grid-template-columns:1fr 1fr }
@media(max-width:520px){ .sr-wege .sp-kacheln{ grid-template-columns:1fr } }
.sr-labelzeile{ display:flex; align-items:center; gap:var(--sp-2); margin-bottom:5px }
.sr-labelzeile .sp-label{ margin-bottom:0 }
.sr-itext{ margin-top:var(--sp-3) }

/* ----------------------------------------------------------------------------
   6 · Fehlerzeile am Formular
   Rot gibt es im Baukasten nur als `--pflicht` (Stern am Pflichtfeld); eine
   Zustandsfarbe für Fehler fehlt (LUECKEN-UI.md 4b). Deshalb `--pflicht` statt
   einer neuen Zahl.
   ---------------------------------------------------------------------------- */
.sr-fehler{
  display:flex; align-items:flex-start; gap:var(--sp-2);
  margin-bottom:var(--sp-3); font-size:var(--fs-text); font-weight:600; color:var(--pflicht);
}

/* ----------------------------------------------------------------------------
   7 · Abschlussbildschirme
   Aus 02-…dc.html (Willkommen) und 03-…dc.html (Dankeseite), dort inline
   notiert — hier als Klasse, weil die Seite keinen `<style>`-Block hat und
   keine Inline-Stile.
   ---------------------------------------------------------------------------- */
.sr-ok{
  width:64px; height:64px; border-radius:var(--r-pill);
  background:var(--accent-soft); color:var(--accent-dk);
  display:grid; place-items:center; font-size:32px; margin:0 auto var(--sp-4);
}
.sr-kartenkopf{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3) }
.sr-kartenkopf span:first-child{ font-size:var(--fs-text); font-weight:700 }
.sr-statusliste{ display:grid; gap:var(--sp-3); font-size:var(--fs-klein); color:var(--muted) }
.sr-statusliste div{ display:flex; align-items:center; gap:var(--sp-2) }
.sr-statusliste i.fertig{ color:var(--accent) }

/* ----------------------------------------------------------------------------
   8 · Klein
   ---------------------------------------------------------------------------- */
@media(max-width:760px){
  .sr-fbuehne{ padding:var(--sp-5) 18px 72px }
  .sr-fkopf{ padding:var(--sp-3) 16px }
}

/* ============================================================================
   NACHTRAG 14.08.2026 — Funnel-Umbau (HP)
   Neue Bauteile: „freiwillig"-Marke, Zahlenfeld, Adress-Vorschlagsliste,
   die drei Adressfelder und der Hinweis bei „Standorte eintragen lassen".
   ============================================================================ */

/* --- „freiwillig" statt Sternchen -----------------------------------------
   Das rote `*` sagt „Pflicht". Für das Gegenteil brauchte es ein eigenes
   Zeichen — sonst liest man ein Feld ohne Stern als vergessenes Pflichtfeld. */
.sp-freiwillig{
  margin-left:6px; padding:1px 7px; border-radius:var(--r-pill);
  background:var(--bg); color:var(--muted);
  font-size:var(--fs-mikro); font-weight:600; letter-spacing:0;
  text-transform:none; vertical-align:1px;
}

/* --- Zahlenfeld „genau wie viele?" ---------------------------------------- */
.sr-genau{ margin-top:var(--sp-3) }
.sr-zahlfeld{ max-width:150px; font-variant-numeric:tabular-nums }

/* --- Adress-Vorschlagsliste ----------------------------------------------- */
.sr-adrsuche{ position:relative }
.sr-adrliste{
  position:absolute; left:0; right:0; top:calc(100% + 5px); z-index:80;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--sh-2); padding:var(--sp-1); max-height:290px; overflow-y:auto;
}
.sr-adrtreffer{
  display:flex; align-items:flex-start; gap:10px; width:100%;
  padding:10px 11px; border:0; border-radius:var(--r-sm); background:none;
  font:inherit; font-size:var(--fs-klein); color:var(--text);
  text-align:left; cursor:pointer; line-height:1.45;
}
/* [14.08.2026] Die Stecknadel klebte im ersten Buchstaben — sie ist ein
   Schrift-Zeichen und hat ohne feste Breite keinen eigenen Platz beansprucht.
   `flex:0 0 18px` gibt ihr eine Spalte, `line-height` setzt sie auf dieselbe
   Grundlinie wie die erste Textzeile. */
/* `position:static` ist der eigentliche Fix, nicht die Breite. Die
   Vorschlagsliste liegt INNERHALB von `.sr-suchfeld`, und dort gilt
   `.sr-suchfeld i{position:absolute; left:10px; top:50%}` — gedacht für die
   Lupe im Feld, angewendet aber auf jedes Symbol darin. Die Stecknadel wurde
   dadurch aus dem Textfluss genommen und landete auf dem ersten Buchstaben.
   Der erste Reparaturversuch gab ihr nur eine Breite; ohne `static` half das
   nichts, weil ein absolut gesetztes Element keine Spalte belegt. */
.sr-adrtreffer i{
  position:static; transform:none;
  color:var(--muted); font-size:16px;
  flex:0 0 18px; width:18px; line-height:1.45; text-align:center;
}
.sr-adrtreffer span{ flex:1 1 auto; min-width:0 }
.sr-adrtreffer:hover, .sr-adrtreffer.an{ background:var(--accent-soft) }
.sr-adrtreffer.an i{ color:#163300 }

/* Straße breit, PLZ und Ort daneben — die PLZ braucht nie mehr als fünf Ziffern. */
.sr-adrfelder{
  display:grid; grid-template-columns:1fr 110px; gap:var(--sp-2);
  margin-top:var(--sp-3);
}
.sr-adrfelder-breit{ grid-column:1 / -1 }
@media(max-width:520px){ .sr-adrfelder{ grid-template-columns:1fr } }

/* --- Hinweis: „eintragen lassen" ohne Website ----------------------------- */
.sr-wegwarnung{ margin-top:var(--sp-3) }

/* --- Rollenkarten beim Anmelden -------------------------------------------
   Dieselben Karten wie beim Registrieren, nur ohne Vorteilsliste: beim
   Anmelden ist nichts zu vergleichen, da soll die Wahl schnell gehen. */
.sr-rollenkarte--schmal{ padding-bottom:var(--sp-4) }
.sr-rollenkarte--schmal p{ margin-bottom:var(--sp-3) }

/* --- Vorteile auf den Rollenkarten [14.08.2026, HP] -----------------------
   Vorher vier nackte Halbsätze, jetzt die drei Punkte aus dem FAQ: fette
   Überschrift, danach der Beleg. Weniger Zeilen, mehr Aussage — und beide
   Seiten sagen dasselbe wie ihre eigene FAQ, statt es zweimal zu erfinden. */
.sr-vorteile{ list-style:none; margin:0 0 var(--sp-4); padding:0; display:grid; gap:11px }
.sr-vorteile li{
  position:relative; padding-left:19px;
  font-size:var(--fs-klein); line-height:1.5; color:var(--muted);
}
.sr-vorteile li::before{
  content:""; position:absolute; left:0; top:7px;
  width:7px; height:7px; border-radius:50%; background:#9FE870;
}
/* `font-size:inherit` ist Pflicht, nicht Kosmetik: der Kartentitel („Ich habe
   einen Laden") ist selbst ein `<b>`, und `.sr-rollenkarte b` setzt ihn auf
   Überschriftengröße. Ohne diese Zeile erben die Vorteile dieselbe Größe und
   die Karte wird dreimal so hoch. */
.sr-vorteile b{ color:var(--text); font-weight:700; font-size:inherit; line-height:inherit }

/* --- Zwei Knöpfe am Ende des Funnels -------------------------------------- */
.sr-knopfpaar{ display:grid; gap:var(--sp-2) }

/* --- Fokusring in Hausfarben ---------------------------------------------
   [14.08.2026] Der Browser zeichnet ihn blau — der einzige blaue Fleck im
   ganzen Produkt, gut sichtbar am zweiten Einwilligungs-Haken. Er wird nicht
   entfernt, nur eingefärbt: ohne ihn findet sich niemand zurecht, der mit der
   Tastatur arbeitet. */
:focus-visible{ outline:2px solid #163300; outline-offset:2px; border-radius:4px }
.sp-haken input:focus-visible{ outline-offset:3px }

/* --- Website-Feld unter „Standorte eintragen lassen" ---------------------- */
.sr-webfeld{ margin-top:var(--sp-3) }

/* --- „Adresse von Hand eintragen" ----------------------------------------
   Sieht aus wie ein Verweis, ist aber ein Knopf: er ändert die Ansicht, er
   führt nirgendwohin. */
.sr-vonhand{
  display:inline; margin-left:5px; padding:0; border:0; background:none;
  font:inherit; font-size:inherit; color:var(--muted); cursor:pointer;
  text-decoration:underline; text-underline-offset:2px;
}
.sr-vonhand:hover{ color:#163300 }

/* --- Schritt ③: Bedarf, No-Gos, Bedingungen [14.08.2026, HP] --------------- */
.sr-vorschlaege{
  margin-top:9px; font-size:var(--fs-meta); color:var(--muted);
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
}
.sr-vorschlag-titel{ margin-right:2px }
.sr-vorschlag{
  border:1px dashed var(--border); background:none; border-radius:var(--r-pill);
  padding:4px 11px; font:inherit; font-size:var(--fs-meta); color:var(--muted);
  cursor:pointer;
}
.sr-vorschlag:hover{ border-color:#9FE870; border-style:solid; color:#163300; background:var(--accent-soft) }
/* Der Chip trägt hier ein Kreuz — anders als in der Branchenwolke, wo ein Chip
   nur an- und ausgeht. Hier ist jeder Chip eine eigene Eingabe, die man wieder
   loswerden können muss. */
.sr-chips .sp-chip i{ font-size:12px; margin-left:5px; opacity:.55 }
.sr-chips .sp-chip:hover i{ opacity:1 }
.sr-flaeche{ min-height:78px; resize:vertical; line-height:1.5; padding:11px 12px; font:inherit }

/* --- Weniger Luft im Funnel [14.08.2026, HP] ------------------------------
   HP: „Aktuell gibt es ganz schön viel Platz zwischen dem Header und dem Text
   darunter. Macht das weniger."

   56 px oben plus 96 px unten waren zusammen mehr als ein Formularfeld hoch.
   Zusammen mit dem Abstand unter der Hilfszeile (32 px) schob das den
   Weiter-Knopf regelmäßig unter die Bildschirmkante — und ein Knopf, den man
   erst suchen muss, wird nicht gedrückt.

   Neu: 30 px oben, 56 px unten, und die Hilfszeile rückt näher an die Felder.
   Der untere Abstand bleibt bewusst größer als der obere; er ist die Luft, die
   der Knopf zum Atmen braucht, nicht verschenkter Platz. */
.sr-fbuehne{ padding:30px 22px 56px }
.sr-ffrage{ margin-bottom:9px }
.sr-fhilfe{ margin-bottom:var(--sp-4) }
@media(max-width:560px){
  .sr-fbuehne{ padding:20px 16px 44px }
}

/* Leere Chip-Leiste einklappen. `.sr-chipbox` hat Rand und Mindesthöhe, damit
   die Branchenwolke einen Rahmen zum Hineinlegen hat — in Schritt ③ steht sie
   dagegen leer da, bis jemand etwas einträgt, und sah dort wie ein zweites,
   kaputtes Eingabefeld aus. `:empty` greift nur, solange kein Chip drinsteht. */
#ldBedarfListe:empty, #ldNogoListe:empty{
  display:none;
}

/* --- Nachbesserungen 14.08.2026, Abend (HP) ------------------------------- */

/* Der zweite Knopf am Funnel-Ende war unlesbar: `.sr-knopflink` setzt die
   Schrift auf Weiß — richtig für den dunklen Hauptknopf, falsch für den
   hellen daneben. Er bekommt jetzt seine eigene Farbe. */
.sr-knopfpaar .sp-btn:not(.sp-btn--dunkel),
.sr-knopfpaar .sp-btn:not(.sp-btn--dunkel):hover{
  color:#163300; background:var(--card); border-color:var(--border);
}
.sr-knopfpaar .sp-btn:not(.sp-btn--dunkel):hover{ background:var(--accent-soft); border-color:#CDE9AF }

/* Die Textfläche war das einzige Feld im Funnel, das man an der Ecke ziehen
   konnte — ein Bedienelement, das sonst nirgends vorkommt.
   `textarea.` davor ist nötig, nicht schön: `ui-wise.css` setzt
   `textarea.sp-input{resize:vertical}`, und ein Selektor aus Element plus
   Klasse schlägt eine Klasse allein — unabhängig davon, welche Datei später
   geladen wird. Mit derselben Bauart gewinnt hier wieder die Reihenfolge. */
textarea.sr-flaeche{ resize:none }

/* Die beiden Einwilligungs-Haken sind Pflicht; ohne sie geht es nicht weiter.
   Das Sternchen sagt das, wie an jedem anderen Pflichtfeld auch. */
.sp-haken .rq{ color:var(--pflicht); font-weight:700 }