/* ===========================================================================
   SEITE: STARTSEITE (S01) — Design-v5-Fassung (E3, NACHTRAG-EIN-KATALOG §9).
   Destilliert aus uebergabe-claude-design-4/EXTRAS/prototyp/css/seite-start.css
   (Abgabe-Stand 2026-07-28, Quell-md5 b79869a080615b33c43f157566649743) — unveraendert uebernommen;
   OP-Ergaenzungen stehen, falls noetig, in einem markierten Block am Ende.
   =========================================================================== */
/* ===========================================================================
   ONLINE-PREDIGT · SCHICHT 4/4 — SEITE: START
   Nur Seiten-Spezifisches. Alles Wiederverwendbare gehört in komponenten.css.
   =========================================================================== */

@layer seite {

  .held {
    padding-block: var(--raum-7) var(--raum-6);
    background:
      radial-gradient(44rem 13rem at 50% 0%,
        color-mix(in oklab, var(--marke) 12%, transparent),
        color-mix(in oklab, var(--marke) 5%, transparent) 45%,
        transparent 78%);
    text-align: center;
  }

  /* «minmax(0, …)» ist zwingend: die Kinder tragen ch- und rem-Deckel, deren
     max-content-Breite (46ch = 368 px) sonst die implizite Spalte über den
     Behälter hinaus aufzieht. Bei 360 px ergab das 26 px Überlauf. */
  .held__innen {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: var(--raum-4);
  }

  .held__titel { max-inline-size: min(24ch, 100%); }

  .held__text {
    max-inline-size: min(46ch, 100%);
    color: var(--text-2);
    font-size: var(--txt-gross);
  }

  .held__suche {
    inline-size: 100%;
    max-inline-size: min(42rem, 100%);
    margin-block-start: var(--raum-3);
    text-align: start;
  }

  /* Rechts an der Suchleiste ausgerichtet, dicht darunter */
  .held__erweitert {
    inline-size: 100%;
    max-inline-size: min(42rem, 100%);
    margin-block-start: calc(var(--raum-3) * -1);
    text-align: end;
    /* PO 2026-07-30: der ganze Link (Text + Pfeil) minimal nach links —
       kleines End-Polster statt bündig mit der Suchleisten-Kante. */
    padding-inline-end: var(--raum-2);
  }
  .held__erweitert a {
    display: inline-flex;
    align-items: center;
    /* PO 2026-07-30: Pfeil näher ans Wort «Suche» — raum-1 statt raum-2. */
    gap: var(--raum-1);
    min-block-size: var(--tastfeld);
    color: var(--text-2);
    font-size: var(--txt-klein);
    font-weight: var(--gewicht-halb);
    text-decoration: none;
  }
  .held__erweitert a:hover { color: var(--marke); text-decoration: underline; }
  .held__erweitert svg {
    inline-size: 1.1em;
    block-size: 1.1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
  }

  .held__oft {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--raum-2) var(--raum-3);
  }

  /* ===== Empfehlung ======================================================
     Ein einzelner, redaktionell gesetzter Beitrag. Das Bild ist breiter als
     16:9 angelegt (Spalte ~7:5 der Textspalte), damit der Abschnitt sich von
     der Kachelreihe darunter unterscheidet und nicht wie deren erste Karte
     gelesen wird. Die Rotation läuft serverseitig über ?empfehlung=n — die
     Punkte zeigen nur den Stand an.
     =================================================================== */

  /* GANZFLÄCHIG KLICKBAR (PO 2026-08-01): `position: relative` ist der Anker für das
     Titel-Overlay weiter unten. Ohne ihn spannte sich das `::after` bis zum nächsten
     positionierten Vorfahr auf — im Zweifel über die halbe Seite. */
  .empfehlung {
    position: relative;
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: var(--raum-6);
    align-items: center;
    padding: var(--raum-5);
    background: var(--flaeche-2);
    border: var(--linie-breit) solid var(--linie);
    border-radius: var(--radius-l);
  }
  .empfehlung:hover { border-color: var(--marke); }
  /* Der Fokusring gehört um die KARTE, nicht um den Titeltext: die Klickfläche ist die
     Karte, und ein Ring um drei Wörter beschriebe eine andere Fläche als die, die reagiert.
     Der Link selbst gibt seinen eigenen Ring deshalb ab. */
  .empfehlung:has(.empfehlung__titel a:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 2px; }
  .empfehlung .empfehlung__titel a:focus-visible { outline: none; }

  .empfehlung__bild {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1fr);
    place-items: center;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-m);
    overflow: hidden;
  }
  /* A27-Cover füllt die 16:9-Bühne (video-buehne-Muster) — ohne cover würde ein
     grosses Bild vom overflow:hidden mittig beschnitten, ein kleines schwämme
     mit Rand. Sichtbar erst, seit der Pool einen Cover-Eintrag trägt (die Klasse
     rendert NUR bei cover_url — Gegenproben-Fund 2026-07-30). */
  .empfehlung__cover { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .empfehlung__bild .werkkachel__platz svg {
    inline-size: 3rem;
    block-size: 3rem;
    opacity: 0.35;
  }

  /* Auf dem Verlauf gilt das bildfeste Paar --auf-tief / --flaeche-tief, nicht
     die Markenfarbe: der Verlauf ist in beiden Themes gleich, --marke nicht.
     In hell läge #5c6b3c bei 1,03:1 auf dem mittleren Halt #5f6d3f — der Kreis
     verschwände. So sind es mindestens 4,87:1 (WCAG 1.4.11). */
  .empfehlung__spielen {
    position: absolute;
    display: grid; grid-template-columns: minmax(0, 1fr);
    place-items: center;
    inline-size: 4.5rem;
    block-size: 4.5rem;
    border-radius: var(--radius-voll);
    background: var(--auf-tief);
    color: var(--flaeche-tief);
  }
  .empfehlung__spielen svg { inline-size: 1.6rem; block-size: 1.6rem; fill: currentColor; stroke: none; }
  /* Hover-Anker ist seit der ganzflächigen Kachel die KARTE, nicht mehr die Bildfläche:
     `.empfehlung__bild` ist kein Link mehr, und der Play-Kreis soll auch dann aufleuchten,
     wenn die Maus über dem Text steht — dort ist die Karte genauso klickbar. */
  .empfehlung:hover .empfehlung__spielen { background: #ffffff; }

  .empfehlung__text { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-3); }
  .empfehlung__titel { font-size: var(--txt-t3); letter-spacing: var(--sperrung-titel); }
  .empfehlung__titel a {
    display: flex;
    align-items: center;
    min-block-size: var(--tastfeld);
    color: inherit;
    text-decoration: none;
  }
  /* DAS OVERLAY (PO 2026-08-01): der Titel-Link — der EINZIGE Link der Kachel — legt sich
     unsichtbar über die ganze Karte. Der zugängliche Linkname bleibt dabei der Titel; ein
     <a> um die Karte hätte den kompletten Inhalt inklusive Ausschnitt vorgelesen.
     ⚠ Preis, bewusst getragen: Text INNERHALB der Kachel lässt sich nicht mehr markieren.
     ⚠ Jedes weitere interaktive Element in der Kachel braucht `position: relative; z-index: 1`
     — sonst liegt es darunter und reagiert nicht (der E6-«Merken»-Knopf ist der nächste Fall). */
  .empfehlung__titel a::after { content: ""; position: absolute; inset: 0; }
  /* Der Unterstrich hängt am Karten-Hover, weil die ganze Karte die Fläche ist. */
  .empfehlung:hover .empfehlung__titel a { text-decoration: underline; }
  .empfehlung__wer { color: var(--text-3); font-size: var(--txt-klein); }
  .empfehlung__warum { color: var(--text-2); max-inline-size: min(46ch, 100%); }

  /* Stand der Rotation */
  .empfehlung__lauf { display: flex; align-items: center; gap: var(--raum-2); }
  .empfehlung__lauf a {
    display: grid;
    place-items: center;
    inline-size: var(--tastfeld);
    block-size: var(--tastfeld);
    border-radius: var(--radius-voll);
    color: var(--text-2);
  }
  .empfehlung__lauf a:hover { background: var(--flaeche-3); color: var(--text); }
  .empfehlung__lauf svg { inline-size: 1.15rem; block-size: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
  .empfehlung__punkte { display: flex; align-items: center; gap: var(--raum-1); }
  .empfehlung__punkte span {
    inline-size: 6px;
    block-size: 6px;
    border-radius: var(--radius-voll);
    background: var(--linie-stark);
  }
  .empfehlung__punkte .ist-hier { inline-size: 18px; background: var(--marke); }

  .einstiege {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--raum-4);
  }

  .einstieg {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: var(--raum-2);
    padding: var(--raum-5);
    background: var(--flaeche-2);
    border: var(--linie-breit) solid var(--linie);
    border-radius: var(--radius-m);
    color: var(--text);
    text-decoration: none;
  }
  .einstieg:hover { border-color: var(--marke); background: var(--flaeche-3); color: var(--text); }

  /* Icon-Chip (PO 2026-08-03): dasselbe Muster wie .zufallskachel__ikon — getönte 3rem-Fläche,
     Icon 1.625rem in Markenfarbe. Die Familie «Einstieg» trägt damit EINE Icon-Sprache
     (der Zufallskachel-Kommentar nennt sie ausdrücklich denselben Baustein-Typ).
     ⚠ background NIE --gruen-tint (lebt nur im .admin-modus-Scope — fiele öffentlich STILL weg).
     ⚠ Die svg-Grösse MUSS hier gesetzt werden: op_symbol schreibt width/height als ATTRIBUTE
       (20 px) — nur die Hülle zu vergrössern ist ein No-op, das Icon bliebe klein (gemessen:
       Variante «2rem-Span» änderte im Screenshot NICHTS). */
  .einstieg__ikon {
    display: inline-flex;
    inline-size: 3rem;
    block-size: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-m);
    background: var(--flaeche-4);
    color: var(--marke);
    margin-block-end: var(--raum-2);
  }
  .einstieg__ikon svg { inline-size: 1.625rem; block-size: 1.625rem; }
  /* Kopfzeile der Kachel (PO 2026-08-03): Icon links, «Alle →» rechts — beides IM einen
     Kachel-Link (kein zweiter <a>, Kommentar im Template). Das Label ist die Link-Affordanz
     der Kachel; beim Kachel-Hover unterstreicht es mit. */
  .einstieg__kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--raum-3);
  }
  .einstieg__alle {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    color: var(--marke);
    font-size: var(--txt-klein);
    font-weight: var(--gewicht-halb);
    white-space: nowrap;
  }
  .einstieg:hover .einstieg__alle { text-decoration: underline; }
  .einstieg__titel { font-size: var(--txt-gross); font-weight: var(--gewicht-fett); }
  .einstieg__text { color: var(--text-3); font-size: var(--txt-klein); }

  /* ZEILEN-KACHELN (PO 2026-08-31, Vorschlag A — löst die gestapelte Fassung vom 2026-08-04
     ab): beide Zweispalt-Karten sind LIEGENDE Zeilen — Chip links, Titel + einzeiliger Text
     in der Mitte, Aktion rechts (Pfeil bzw. kompakte Spenden-Pille). Grund: das Grid streckte
     die halbleer gestapelte Zufalls-Kachel auf die Höhe der Spenden-Karte (266 px gemessen).
     Ruhe-Hierarchie unverändert: Zufall = stilles --flaeche-3, die Marken-Tönung --flaeche-4
     bleibt EXKLUSIV der Spenden-Karte daneben. EINHEITLICHER HOVER (PO-Auftrag — die Spende
     hatte vorher GAR KEINEN): beide Karten tönen ihre Fläche eine Stufe nach und das
     Aktions-Element reagiert (Pfeil rückt nach / Spenden-Pille hellt auf). */
  .zufallskachel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--raum-4);
    padding: var(--raum-4) var(--raum-5);
    background: var(--flaeche-3);
    border: var(--linie-breit) solid var(--linie);
    border-radius: var(--radius-m);
    color: var(--text);
    text-decoration: none;
  }
  .zufallskachel:hover { border-color: var(--marke); background: var(--flaeche-4); color: var(--text); }

  .zufallskachel__ikon {
    display: inline-flex;
    inline-size: 3rem;
    block-size: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-m);
    /* ⚠ NICHT --gruen-tint: das Token lebt ausschliesslich im `.admin-modus`-Scope (tokens.css,
       E7-Altbestand für die Admin-Masken-CSS). Im öffentlichen Kontext wäre es undefiniert und
       die Deklaration fiele STILL weg — der Chip bliebe transparent, ohne Fehlermeldung.
       --flaeche-4 ist in allen VIER Farbsätzen gesetzt und dort als «markiger Chip» angelegt. */
    background: var(--flaeche-4);
    color: var(--marke);
  }
  .zufallskachel__ikon svg { inline-size: 1.625rem; block-size: 1.625rem; }
  .zufallskachel__text { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-1); }
  .zufallskachel__titel { font-size: var(--txt-gross); font-weight: var(--gewicht-fett); }
  /* Text EINZEILIG mit Ellipsis — die Kachel ist eine Zeile; der volle Satz gehört auf die
     Zielseite bzw. in die A19-Redaktion (kürzere Fassung jederzeit dort). */
  .zufallskachel__unter { color: var(--text-3); font-size: var(--txt-klein);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Der Pfeil rückt beim Hover nach — dieselbe Geste wie in der Fusszeile. */
  .zufallskachel__pfeil { justify-self: end; color: var(--marke); transition: transform var(--dauer-normal) var(--kurve); }
  .zufallskachel:hover .zufallskachel__pfeil { transform: translateX(3px); }
  @media (prefers-reduced-motion: reduce) {
    .zufallskachel__pfeil { transition: none; }
    .zufallskachel:hover .zufallskachel__pfeil { transform: none; }
  }

  /* PO 2026-08-04: BEIDE Karten gleich breit UND gleich hoch — 1fr/1fr statt der alten
     Breit/Schmal-Aufteilung, und BEWUSST ohne `align-items: start` (der Grid-Default
     `stretch` IST die Höhen-Parität; wer hier wieder start setzt, macht die Karten
     ungleich hoch, ohne dass ein Check-freier Blick es sofort sieht — Wächter z11). */
  /* Zitate-Streifen (Z-3): nur der Untertitel ist seitenlokal — Streifen + Kachel wohnen in komponenten. */
  .start__zitate-text { color: var(--text-2); max-inline-size: 70ch; margin-block: 0 var(--raum-3); }

  .start__zweispalt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--raum-7);
  }
  /* A19-Schalter (PO 2026-08-04): EINE Kachel aus ⇒ die andere spannt die volle Zeile. */
  .start__zweispalt--solo { grid-template-columns: minmax(0, 1fr); }

  /* Spenden-Karte als ZEILE (PO 2026-08-31): dieselbe Bauform wie die Zufalls-Kachel —
     Chip · Titel+Text · kompakte Pille rechts. GANZFLÄCHIG KLICKBAR über das
     Empfehlungs-Kachel-Muster (GF61): der EINE Knopf-Link streckt seine Klickfläche per
     ::after über die Karte — es bleibt genau EIN Link (F3; Wächter z11 spendeLinks === 1).
     ⚠ Wer hier je ein weiteres interaktives Element ergänzt, braucht position:relative +
     z-index:1, sonst liegt es unter dem Overlay (GF61-Regel, Kommentar auch im Template).
     ⚠ Die Pille darf NIE ein transform tragen: ein Transform machte sie zum Containing
     Block ihres ::after — das Overlay schrumpfte still auf die Knopf-Fläche. */
  .spende {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--raum-4);
    padding: var(--raum-4) var(--raum-5);
  }
  /* Einheitlicher Hover-Schritt: Ruhe --flaeche-4 (karte--marke) tönt eine Stufe Richtung
     Marke nach — das Pendant zum flaeche-3→flaeche-4-Schritt der Zufalls-Kachel. Die Pille
     hellt zusätzlich auf (ihr eigenes knopf--marke:hover greift, weil das Overlay Teil des
     Link-Elements ist — jeder Punkt der Karte IST der Link). */
  .spende:hover { background: color-mix(in srgb, var(--flaeche-4) 88%, var(--marke)); }
  .spende__mitte { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-1); }
  .spende__titel { font-size: var(--txt-gross); margin: 0; }
  .spende__text { color: var(--text-2); font-size: var(--txt-klein); margin: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .spende__knopf::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-m); }
  /* Herz-Chip (PO 2026-08-04): Bauform == .zufallskachel__ikon (3rem, radius-m), aber
     VOLL-GRÜN (--marke/--marke-auf) — bindet Chip und Spenden-Pille zusammen und ist der
     historische PO-Entscheid des alten Spenden-Chips («voll-grün», 2026-07-18). Der stille
     Chip-Ton --flaeche-4 der Nachbar-Kachel schiede aus: er IST der Kartengrund hier. */
  .spende__ikon {
    display: inline-flex;
    inline-size: 3rem;
    block-size: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-m);
    background: var(--marke);
    color: var(--marke-auf);
  }
  .spende__ikon svg { inline-size: 1.625rem; block-size: 1.625rem; }

  @media (max-width: 40rem) {
    /* Schmale Breiten: neben Chip + Text bekäme die Pille zu wenig Platz — sie rückt als
       eigene Zeile unter den Text; die Karte bleibt zweizeilig kompakt. */
    .spende { grid-template-columns: auto minmax(0, 1fr); }
    .spende .knopf { grid-column: 1 / -1; justify-self: start; }
  }

  @media (max-width: 60rem) {
    .start__zweispalt { grid-template-columns: 1fr; gap: var(--raum-6); }
    .empfehlung { grid-template-columns: 1fr; gap: var(--raum-5); align-items: start; }
    .empfehlung__titel { font-size: var(--txt-t4); }
  }

  @media (max-width: 34rem) {
    .empfehlung { padding: var(--raum-4); }
    .empfehlung__spielen { inline-size: 3.5rem; block-size: 3.5rem; }
    .empfehlung__spielen svg { inline-size: 1.25rem; block-size: 1.25rem; }
  }
}