/* ============================================================
   INDEX — nur was diese Seite allein braucht

   Herausgelöst aus dem <style>-Block der Seite. Was hier steht und auch
   anderswo gebraucht wird, gehört nach bausteine.css; was Farbe, Abstand
   oder Dauer festlegt, gehört an ein Token in stil.css.
   ============================================================ */


/* ---------- Beweisband ---------- */
.beweis{border-bottom:1px solid var(--linie);padding:0}
.beweis-innen{display:grid;grid-template-columns:repeat(3,1fr);max-width:var(--w);margin:0 auto}
.beweis-innen > div{padding:38px 0 42px;border-left:1px solid var(--linie);padding-left:30px}
.beweis-innen > div:first-child{border-left:0;padding-left:28px}
.beweis h3{font-size:19px;margin-bottom:9px}
.beweis p{margin:0;font-size:15px;color:var(--text-mute);max-width:34ch}
.beweis-etikett{
  font-family:var(--ff-mono);font-size:11px;color:var(--peage);
  letter-spacing:.14em;display:block;margin-bottom:14px;
}
@media(max-width:860px){
  .beweis-innen{grid-template-columns:1fr}
  .beweis-innen > div{border-left:0;padding-left:28px;padding-right:28px;border-top:1px solid var(--linie)}
  .beweis-innen > div:first-child{border-top:0}
}

/* ---------- Abschnitte ---------- */
.kap{padding:96px 0 0}
.kap h2{font-size:clamp(30px,5vw,52px);letter-spacing:-.025em;font-variation-settings:'wdth' 86;margin:10px 0 16px}
.kap .fuehrung{color:var(--text-mute);max-width:60ch;margin:0 0 42px;font-size:17.5px}

/* ---------- Abschnittskopf mit Bedienung rechts ----------
   Ueberschrift links, Bedienung rechts, unten aneinander ausgerichtet.
   `align-items:end` und nicht `center`: Die Bedienung soll auf derselben
   Grundlinie sitzen wie die Ueberschrift, nicht in der Mitte eines
   Blocks schweben, der zwei Zeilen hoch ist. */
.kap-kopf{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--a6);margin-bottom:var(--a4);flex-wrap:wrap;
}
.kap-kopf-text{min-width:0}
.kap-kopf-text h2{margin-bottom:0}

/* ---------- Jahreszeiten-Blätterer ----------
   Vorher: eine Pille ueber die volle Breite, vier beschriftete Knoepfe
   mit je 120 Pixeln Mindestbreite — bei 1240 Pixeln Spalte standen
   zwischen den Woertern Luecken von ueber hundert Pixeln.

   Jetzt: zwei Pfeile, der Name dazwischen, vier Punkte darunter. Die
   Punkte sind die eigentlichen Schalter und tragen die Namen als
   zugaengliche Beschriftung; sichtbar sind sie Punkte, weil vier Woerter
   an dieser Stelle wieder eine Zeile kosten wuerden. */
.saison-schalter{
  display:flex;flex-direction:column;align-items:flex-end;gap:var(--a2);
  flex:none;
}
.sb-zeile{display:flex;align-items:center;gap:var(--a3)}

.sb-pfeil{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;flex:none;cursor:pointer;
  background:transparent;border:1px solid var(--linie);border-radius:var(--r-pille);
  color:var(--text-leise);
  transition:border-color var(--d-tupf) var(--k-beides),
             color        var(--d-tupf) var(--k-beides),
             transform    var(--d-tupf) var(--k-beides);
}
.sb-pfeil svg{width:15px;height:15px}
.sb-pfeil:hover{border-color:var(--linie-hell);color:var(--text)}
.sb-pfeil:active{transform:scale(.9)}
.sb-pfeil:focus-visible{outline:2px solid var(--schild);outline-offset:2px}

.sb-name{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--ff-display);font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text);
  /* Feste Breite, sonst wandern die Pfeile bei jedem Wechsel: „Frühling"
     ist zwei Zeichen laenger als „Herbst". Bei einem Selbstlauf alle paar
     Sekunden waere das ein Zucken im Augenwinkel, das nie aufhoert. */
  min-width:11ch;
}
.sb-zeichen{font-size:15px;line-height:1}

.sb-punkte{display:flex;gap:var(--a1)}
.sb-punkte button{
  /* Der Knopf ist gross genug zum Treffen, der sichtbare Punkt klein —
     die Flaeche steht im Polster, nicht im Punkt. */
  width:18px;height:18px;padding:0;flex:none;cursor:pointer;
  background:none;border:0;border-radius:var(--r-pille);
  display:inline-flex;align-items:center;justify-content:center;
}
.sb-punkte button::before{
  content:"";width:6px;height:6px;border-radius:var(--r-pille);
  background:var(--linie-hell);
  transition:background var(--d-kurz) var(--k-beides),
             transform  var(--d-kurz) var(--k-feder);
}
.sb-punkte button:hover::before{background:var(--text-mute)}
.sb-punkte button[aria-pressed="true"]::before{background:var(--peage);transform:scale(1.5)}
.sb-punkte button:focus-visible{outline:2px solid var(--schild);outline-offset:1px}
/* Die Namen sind fuer Vorlesewerkzeuge da, nicht fuers Auge. `hidden`
   waere falsch — dann verschwaenden sie auch dort. */
.sb-punkte button span{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* Der Satz zur Jahreszeit. Er wechselt mit ihr und ist damit der einzige
   Fliesstext der Seite, der sich bewegt — deshalb steht er fuer sich und
   nicht am Ende der Fuehrung. */
.saison-text{
  color:var(--text-leise);font-style:italic;font-size:15px;
  margin:calc(-1 * var(--a5)) 0 var(--a6);min-height:1.6em;
}

@media (pointer:coarse){
  .sb-pfeil{width:44px;height:44px}
  .sb-punkte{gap:var(--a2)}
  .sb-punkte button{width:44px;height:44px}
}

@media (max-width:640px){
  /* Am Telefon steht der Blaetterer unter der Ueberschrift und nimmt die
     volle Breite: rechts oben waere er dort ein Gedraenge neben einer
     Ueberschrift, die ohnehin schon umbricht. */
  .kap-kopf{gap:var(--a4);margin-bottom:var(--a4)}
  .saison-schalter{align-items:stretch;width:100%}
  .sb-zeile{justify-content:space-between}
  .sb-punkte{justify-content:center}
}

.vorschau{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;
  transition:opacity var(--d-kurz) var(--k-aus);
}
/* Der Abgang. Nur die Deckkraft faellt, die Hoehe bleibt — sonst zuckt
   alles darunter bei jedem Wechsel nach oben und wieder zurueck. */
.vorschau.wechselt{opacity:0}
.vor-karte{
  border:1px solid var(--linie);border-radius:var(--r-mittel);overflow:hidden;background:var(--flaeche);
  opacity:0;transform:translateY(10px);animation:einblenden .5s ease forwards;
}
@keyframes einblenden{to{opacity:1;transform:none}}
.vor-bild{aspect-ratio:32/15;position:relative}
.vor-marke{
  position:absolute;left:10px;top:10px;background:rgba(14,19,25,.78);
  border:1px solid rgba(237,241,245,.2);border-radius:var(--r-pille);padding:3px 11px;
  font-family:var(--ff-display);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
}
.vor-text{padding:15px 18px 19px}
.vor-text h4{font-size:16px;margin-bottom:5px}
.vor-text p{margin:0;font-size:14px;color:var(--text-mute)}

/* Merkmalskarten und Laenderband sind mit den beiden Kapiteln entfallen,
   fuer die sie da waren. */
/* Das Partnerband ist entfallen. Der Abschnitt stand als eigenes Kapitel
   auf der Startseite und wiederholte Wort für Wort, was auf
   /partner.html steht — dieselben vier Zielgruppen, dieselbe
   Aufforderung. Der Verweis im Fuß genügt.

   Die vierzehn Regeln dafür gehen mit: Eine Regel ohne Element ist tote
   Masse, und tote Masse ist der Anfang der Unordnung, gegen die das
   Gestaltungssystem angetreten ist. */

/* ---------- Schluss ---------- */
.schluss{
  margin-top:104px;border:1px solid var(--linie);border-radius:var(--r-mittel);
  padding:64px 40px;text-align:center;position:relative;overflow:hidden;background:var(--flaeche);
}
.schluss::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(80% 120% at 50% 0%, rgba(242,169,80,.13), transparent 65%);
}
.schluss > *{position:relative}
.schluss h2{font-size:clamp(26px,4vw,42px);margin-bottom:16px;letter-spacing:-.02em}
.schluss p{color:var(--text-mute);max-width:50ch;margin:0 auto 30px;font-size:17px}

/* Hier stand `.buehne-eyebrow` — die gedämpfte Zeile über der Schlagzeile
   des Intro-Films. Sie ist mit dem Textblock der Bühne entfallen. */

/* Die Knopfreihe am Seitenschluss. Stand als style-Attribut im HTML —
   drei Layoutangaben, die niemand findet, der nach dem Abstand sucht. */
.schluss-tat{
  display:flex;justify-content:center;flex-wrap:wrap;gap:var(--a3);
}


/* Der Leitspruch ist die Ueberschrift der Seite geworden — seine Regel
   steht jetzt bei den uebrigen Buehnenmassen in intro.css. Zwei Orte fuer
   eine Schrift waren einer zu viel. */