/* =============================================================================
   DIE STARTSEITE — das Layout dieses einen Blattes.

   Diese Datei ist die Marketing-Fassung von dem, was in
   design-system/traveto/startseite.html im <style>-Block steht: die Baender,
   der Hero, die Dreierreihe, die Zweispalter, die Portalkachel, die
   Merkmalsliste, der Schluss und der Fuss. Die Regeln dazu stehen in
   design-system/traveto/STARTSEITE.md.

   WAS HIER NICHT STEHT: Knopf, Tafel, Pille, Wert, Etikett, Avatarstapel,
   Kartenflaeche, Marke, Marginalie und das Satzmass .page. Das sind Bauteile
   des Systems und stehen EINMAL in base.css, gespiegelt von
   deploy/sync-design-system.sh.

   Die Vorfassung dieser Datei hatte 531 Zeilen und beschrieb eine andere
   Seite: Schrittfolge, Bauteilraster, Preistafel mit Umschalter, FAQ,
   Manifestzeile. Nichts davon steht im Styleguide — es war die Struktur der
   alten WordPress-Seite in neuen Klassennamen. Sie ist weg.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Baender
   Vollbreite Farbbaender, --band-polster oben und unten, KEINE Linie
   dazwischen — nur der Farbwechsel (bar.md M4). Die Folge der Gruende steht
   einmal, in STARTSEITE.md §2:
   Kopf --bg · Hero --bg · Reisearten --bg-band · Zusammen planen --bg-raised ·
   Karte --bg · Schluss --bg-inverse · Fuss --bg-band.
   Sechs Flaechen, fuenf Wechsel; kein Paar gleicher Gruende stoesst aneinander
   ausser Kopf und Hero, die eine Flaeche bilden.
   -------------------------------------------------------------------------- */
.b          { padding: var(--band-polster) 0; }
.b--grund   { background: var(--bg); }
.b--band    { background: var(--bg-band); }
.b--gehoben { background: var(--bg-raised); }
.b--tinte   { background: var(--bg-inverse); color: var(--text-inverse); }
.b--fuss    { background: var(--bg-band); }

/* Der Kopf ist eine Navigationsleiste, kein Sektionsband: er traegt denselben
   Grund wie der Hero, hat also keine Kante zu ihm, und faellt nicht unter M4. */
.b--kopf { background: var(--bg); padding: var(--tv-space-4) 0 0; }

/* Die Sperrung traegt links eine Vorbreite; der negative Rand holt ihre TINTE
   an die Satzkante. Optischer Ausgleich, keine Raumstufe. */
.kopf .sperrung,
.fuss .sperrung { margin-left: -10px; }

/* -----------------------------------------------------------------------------
   Kopf
   -------------------------------------------------------------------------- */
.kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--tv-space-3); }
.nav  { display: flex; align-items: center; gap: 32px; }

/* WER EINEN VERWEIS UMSTYLT, BRINGT SEINE STUFEN MIT.
   Diese Regeln (0,1,1) schlagen a:hover aus base.css (0,1,0). Ohne die beiden
   Zustandszeilen haetten die Verweise des Kopfes GAR KEINEN Zustand — Ruhe,
   Hover und Gedrueckt bitgleich, in derselben Farbe wie der Fliesstext.
   BEDIENZIEL: inline-flex mit fester Hoehe statt margin — das vergroessert die
   Flaeche auf die 44 px, die bar.md verlangt, ohne die Zeile zu verschieben. */
.nav a { color: var(--text); text-decoration: none; font-size: 16px;
         display: inline-flex; align-items: center; min-height: 44px; }
.nav a:hover  { color: var(--action-text);  text-decoration: underline; }
.nav a:active { color: var(--action-press); text-decoration: underline; }

/* -----------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
/* 64 px ist M4s Untergrenze und bewusst gewaehlt: enger als der Rest des
   Blattes, sonst beginnt das Bild unter der Falz. */
.hero { padding-top: 64px; }
/* Der Eroeffnungsgrad ist der DISPLAY-Rang und steht als Klasse am h1, nicht
   als Groesse hier — sonst liefe er im Schnitt des H1-Rangs. */
.hero h1 { margin: 0 0 var(--tv-space-3); max-width: 20ch; }
/* Unterzeile und Knopf in EINER Reihe: der Nutzensatz steht neben seiner
   Handlung, nicht darueber, und das Bild rueckt ueber die Falz. */
.hero__unter { display: flex; align-items: center; justify-content: space-between;
               gap: var(--tv-space-4); flex-wrap: wrap; margin-bottom: var(--band-luft); }
/* 44ch sind zwei Zeilen. Ein max-width, das die Zeilenzahl nicht sichert,
   sichert die Reihe nicht: bei drei Zeilen steht der Knopf neben keiner. */
.hero__unter p { max-width: 44ch; }
.hero p { font-size: 25px; line-height: 1.44; color: var(--text-muted); margin: 0; }

.bild     { border-radius: var(--radius-surface); overflow: hidden; }
.bild img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }

/* -----------------------------------------------------------------------------
   Bandtypografie
   Groesse und Durchschuss kommen aus base.css. Ein Grad, der hier deklariert
   wird, laeuft im Schnitt seines Elements statt in dem seines Rangs.
   56 px ist die h1-Stufe und bleibt dem Schlusssatz vorbehalten.
   -------------------------------------------------------------------------- */
h2 { margin: 0 0 var(--tv-space-2); max-width: 22ch; }
.b p.ein { font-size: 25px; line-height: 1.44; color: var(--text-muted);
           max-width: 50ch; margin: 0 0 var(--band-luft); }
.b--tinte h2    { color: var(--text-inverse); }
.b--tinte p.ein { color: var(--text-inverse-muted); }

/* -----------------------------------------------------------------------------
   Die drei Reisearten
   Subgrid: Bild, Ueberschrift und Text liegen spaltenuebergreifend auf
   denselben Zeilen. DIE FUGEN TRAGEN EINEN RANG: 56 zwischen zwei Bauteilen,
   32 zwischen Geschwistern eines Bauteils, 16 innerhalb eines Textblocks.
   -------------------------------------------------------------------------- */
.drei { display: grid; grid-template-columns: repeat(3, 1fr);
        column-gap: var(--tv-space-4); row-gap: 0;
        grid-template-rows: auto auto auto; }
.schritt { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
.schritt .bild { margin-bottom: var(--tv-space-3); align-self: start; }
/* Ein Grad, EIN Abstand zu seinem Text — dieselbe Zahl in Kachel, Tafel und
   Merkmalsliste. Die Zeilenluecke des Rasters ist dafuer 0. */
.schritt h3 { margin: 0 0 var(--titel-luft); }
.schritt p  { font-size: 16px; color: var(--text-muted); margin: 0; }

/* -----------------------------------------------------------------------------
   Zweispalter
   Wer in einer zweispaltigen Zeile die Spalte fuellt, ist eine Eigenschaft des
   BAUTEILS, nicht des Bandes: ein Foto fuellt (es hat nur einen Ausschnitt),
   eine Flaeche mit eigener Geometrie fuellt nicht.
   -------------------------------------------------------------------------- */
.zwei { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--tv-space-7); align-items: stretch; }
/* Echte Spiegelung, ALS KLASSE. Das Band "Zusammen planen" trug seine Spalten
   im Design-System einmal als style-Attribut — und ein Inline-Attribut schlaegt
   jede Media Query: bei 320 px war der Portalkasten 48 px breit und die Pillen
   ragten 122 px hinaus. */
.zwei--links { grid-template-columns: 0.85fr 1.15fr; }
.zwei > * { min-width: 0; }
/* Die spaltenfuellende Form fuellt in beide Richtungen.
   OHNE aspect-ratio 3/2 AN DIESER STELLE WAERE DAS BILD DER TAKTGEBER.
   Ich hatte hier "aspect-ratio: auto" ergaenzt, in der Annahme, height:100%
   wuerde die Form ohnehin ueberschreiben. Tut es nicht: was das Raster fuer
   die Zeilenhoehe heranzieht, ist der EIGENBEDARF des Bildes, und der ist
   ohne gesetzte Form seine natuerliche Hoehe — 589 x 1600/900 = 1047 px.
   Die Spalte wurde also 107 px hoeher als die Textspalte daneben, und das
   Bild bestimmte das Band, statt sich ihm zu fuegen. Die Form aus .bild
   bleibt deshalb stehen; height und object-fit schneiden darin zu. */
.zwei > .bild     { align-self: stretch; }
.zwei > .bild img { width: 100%; height: 100%; object-fit: cover; }
/* Die Kartenspalte wird MITTIG gesetzt: sie kann ihre Spalte nicht fuellen
   (ihr 4:3 ist der Ausschnitt, gegen den der Zug gerechnet ist), also traegt
   sie den Hoehenunterschied auf beiden Seiten statt nur unten. */
.zwei > .kartenspalte { display: flex; flex-direction: column; align-self: center; }

/* -----------------------------------------------------------------------------
   Kartenflaeche
   Die Flaeche selbst steht in base.css. Hier nur die Geometrie.
   -------------------------------------------------------------------------- */
.kartenblock { position: relative; }
.mapcard { aspect-ratio: 4/3; }
/* SCHMAL WIRD DIE FLAECHE HOCH. Das Querformat ergibt bei 375 px Breite 180 px
   Hoehe, und die aufliegende Tafel misst rund 200 — sie deckte die Karte ganz
   zu, und jede Marke lag rechnerisch hinter ihr. Eine Kachelkarte ist nicht an
   ein Bildformat gebunden: sie zeigt denselben Ausschnitt hoch statt breit. */
@media (max-width: 900px) { .mapcard { aspect-ratio: 3 / 4; } }
/* Die ROLLE des Etiketts kommt aus base.css; seine PLATZIERUNG in diesem
   Bauteil steht hier — nicht was es ist, sondern wo es sitzt. */
.t-tafel .t-over { display: block; margin-bottom: var(--tv-space-0); }
.ttl { margin: 0 0 var(--titel-luft); }
/* Wer die Etappe eingetragen hat. Im Design-System stand das als
   style-Attribut in der Zeile; hier steht es als Klasse. 10 px ist die Fuge
   zum Absatz darueber, keine Raumstufe — sie stammt aus dem Blatt. */
.tafel__wer { margin: 10px 0 0; display: flex; align-items: center; gap: 8px;
              font-size: 12px; color: var(--text-muted); }

/* -----------------------------------------------------------------------------
   Merkmalsliste
   -------------------------------------------------------------------------- */
.merk { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--tv-space-3); }
.merk li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.65; }
/* top 12 und padding-left 30 sind KEINE Raumstufen, sondern die Geometrie des
   Statuspunkts: 12 px seine optische Lage auf der ersten Textzeile, 30 px
   seine Breite plus Fuge. Gefuellter Punkt, kein Ring: bar.md M3 schliesst den
   Akzent als RAHMEN aus, und ein Aufzaehlungspunkt ist kein Zustand. */
.merk li::before { content: ""; position: absolute; left: 0; top: 12px; width: 12px; height: 12px;
                   border-radius: var(--radius-circle); background: var(--text-muted); }
.merk b { display: block; margin-bottom: var(--titel-luft); }

/* -----------------------------------------------------------------------------
   Portalkachel — die Produktflaeche des Bandes "Zusammen planen"
   -------------------------------------------------------------------------- */
.portal { background: var(--bg-float); border-radius: var(--radius-surface); padding: var(--tv-space-3);
          box-shadow: var(--shadow-whisper); max-width: 460px; }
.portal__t { display: block; margin-bottom: var(--tv-space-2); }
/* Gesichter auf eigener Zeile unter dem Titel, dann der Satz. Inline gesetzt
   reissen sie eine Kerbe in den Absatz. */
.portal__f { display: flex; margin: 0 0 var(--tv-space-1); }
.portal__m { margin: 0 0 var(--tv-space-1); font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.zeile { display: flex; align-items: flex-start; gap: var(--tv-space-1); padding: var(--tv-space-1) 0;
         border-top: 1px solid var(--line); font-size: 16px; }
/* Im Design-System standen diese drei als style-Attribute in der Zeile. Ein
   Inline-Attribut schlaegt jede Media Query — genau der Fehler, der dem
   Zweispalter daneben die schmale Fassung gekostet hat. */
.zeile__haupt { flex: 1; }
.zeile__wer   { font-size: 12px; color: var(--text-muted); }
.portal__tun  { margin-top: 20px; width: 100%; }
.legende { margin: var(--tv-space-2) 0 0; max-width: 460px;
           font-size: var(--text-detail-size); line-height: var(--text-detail-lh); color: var(--text-muted); }

/* -----------------------------------------------------------------------------
   Schluss
   -------------------------------------------------------------------------- */
.schluss       { text-align: center; }
.schluss h2    { margin-inline: auto; max-width: none; }
.schluss p.ein { margin-inline: auto; }

/* -----------------------------------------------------------------------------
   Fuss
   -------------------------------------------------------------------------- */
.fuss { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--tv-space-3); }
.fuss__satz { margin-top: 28px; font-size: 16px; color: var(--text-muted); max-width: 28ch; }
.fuss__h { font-size: var(--text-caption-size); line-height: var(--text-caption-lh);
           letter-spacing: var(--text-over-ls); font-variation-settings: "wdth" 110;
           text-transform: uppercase; color: var(--text-muted); margin: 0 0 16px;
           font-family: var(--font-text); font-weight: 600; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--tv-space-1); }
/* BEDIENZIEL, wie im Kopf. */
.fuss a { color: var(--text); text-decoration: none; font-size: 16px;
          display: inline-flex; align-items: center; min-height: 44px; }
.fuss a:hover  { color: var(--action-text);  text-decoration: underline; }
.fuss a:active { color: var(--action-press); text-decoration: underline; }
.fuss__klein { margin-top: 48px; font-size: 14px; color: var(--text-muted); }
/* ANKUENDIGUNG STATT HANDLUNG (is_live: false).
   Solange der App-Host nicht aufloest, sind die CTAs keine Links, sondern
   <span aria-disabled="true"> — ein Knopf, der ins Leere fuehrt, verbraucht
   genau das Vertrauen, das er einwerben soll. Kein eigener Modifier: das ist
   ein ZUSTAND, und Zustaende haengen am Attribut, nicht an einer zweiten
   Fassung des Bauteils (CLAUDE.md, "Bauteile stehen einmal, in base.css").
   Deshalb auch keine Aktionsfarbe — die traegt hier nichts mehr aus. */
.t-knopf[aria-disabled="true"] {
  background: var(--bg-sunken); color: var(--text-muted);
  box-shadow: inset 0 0 0 1px var(--line); cursor: default;
}
.t-knopf[aria-disabled="true"]:hover { background: var(--bg-sunken); }
.fuss__aus { color: var(--text-muted); font-size: 16px;
             display: inline-flex; align-items: center; min-height: 44px; }

/* =============================================================================
   SCHMAL — die Startseite unter 700 px.
   Verursacher des Ueberstands waren die Kopfzeile (die Navigation ist ein
   flex-Streifen, der nie umbrach) und die drei Kacheln (feste
   Dreispaltigkeit mit subgrid).
   ============================================================================= */
@media (max-width: 700px) {
  .kopf { flex-wrap: wrap; row-gap: var(--tv-space-2); }
  .nav  { flex-wrap: wrap; gap: var(--tv-space-2) var(--tv-space-3); }
  /* Das subgrid der Kacheln haengt an den drei Rasterzeilen des Elternteils
     und wird mit ihnen zurueckgenommen. */
  .drei    { grid-template-columns: 1fr; grid-template-rows: none; row-gap: var(--tv-space-4); }
  .schritt { grid-row: auto; grid-template-rows: none; }
  .zwei    { grid-template-columns: 1fr; }
  .fuss    { grid-template-columns: repeat(2, 1fr); row-gap: var(--tv-space-4); }
  .fuss > * { min-width: 0; }
}