/* ============================================================
   cd_spaltensatz — Inhalte in Spalten nebeneinander
   ============================================================
   DREI EBENEN, drei Aufgaben:

     .cd-spaltensatz          die Bahn (Grundfarbe, Luft)
     .cd-spaltensatz__satz    DER SATZ — Breite und Lage
     .cd-spaltensatz__raster  die Spuren

   Warum Satz und Raster getrennt sind: Der Satz richtet sich mit
   margin-inline aus. Dasselbe margin-inline zentriert an einem
   Raster nichts, aber es hebt eine Ausrichtung auf, sobald beides
   an einem Element steht. Beim Kundenmenue ist genau das
   passiert — der Kasten sprengte die Spalte.

   ALLE WERTE KOMMEN ALS EIGENSCHAFTEN aus dem BahnstilViewHelper:
     --cd-satz-m/-t/-d          die Spuren (minmax(0,2fr) …)
     --cd-satzbreite-m/-t/-d    die Breite des Satzes
     --cd-satzlage-m/-t/-d      die beiden Aussenraender
     --cd-satz-fuge             die Fuge
     --cd-satz-ausrichtung      senkrechte Ausrichtung

   DIE ERBKETTE ist Absicht: Jede Stufe faellt auf die kleinere
   zurueck, wenn sie selbst nichts gesetzt hat. Wer nur „Tablet"
   pflegt, bekommt am Rechner dasselbe — und muss nicht dreimal
   dasselbe waehlen. Zurueckgenommen wird mit einem AUSDRUECKLICHEN
   Wert (etwa Lage „mittig"), nicht mit „wie im Entwurf".
   ============================================================ */

.cd-spaltensatz__kopf {
  max-inline-size: 46rem;
  margin-block-end: var(--cd-a6);
}
.cd-spaltensatz__ueberschrift {
  margin: 0 0 var(--cd-a3);
}
.cd-spaltensatz__beitext {
  color: var(--cd-text-2);
  line-height: var(--cd-zeile-text);
}
.cd-spaltensatz__beitext > :last-child { margin-block-end: 0; }

/* ---- Der Satz: Breite und Lage ---------------------------- */
/* Vorgabe ohne jede Wahl: volle Breite, mittig. Beides steht als
   Rueckfallwert in var() — eine Marke ohne Rueckfall liefert einen
   LEEREN Wert und nicht etwa den Anfangswert. */
.cd-spaltensatz__satz {
  inline-size: var(--cd-satzbreite-m, 100%);
  margin-inline: var(--cd-satzlage-m, auto auto);
}

/* ---- Das Raster: die Spuren ------------------------------- */
/* Ohne Wahl: so viele Spalten wie hineinpassen, mindestens 22 rem
   breit. auto-fit statt einer festen Zahl, damit ein Satz ohne
   jede Pflege trotzdem vernuenftig aussieht.

   min(100%, 22rem) und nicht blosse 22rem: Auf einem 320-px-Gerät
   waere 22 rem (352 px) breiter als der Bildschirm und schoebe die
   Seite auf. */
.cd-spaltensatz__raster {
  display: grid;
  grid-template-columns: var(--cd-satz-m, repeat(auto-fit, minmax(min(100%, 22rem), 1fr)));
  gap: var(--cd-satz-fuge, clamp(20px, 2.6vw, 40px));
  align-items: var(--cd-satz-ausrichtung, start);
}

/* Die Umkehr am Handy. NUR sichtbar — der Quelltext bleibt, wie er
   ist, und damit auch der Tastaturweg. Das ist der dokumentierte
   Preis und steht so auch im Zusatztext des Feldes. */
@media (max-width: 600px) {
  [data-satztausch="1"] .cd-spaltensatz__raster { direction: rtl; }
  [data-satztausch="1"] .cd-spaltensatz__feld { direction: ltr; }
}

@media (min-width: 601px) {
  .cd-spaltensatz__satz {
    inline-size: var(--cd-satzbreite-t, var(--cd-satzbreite-m, 100%));
    margin-inline: var(--cd-satzlage-t, var(--cd-satzlage-m, auto auto));
  }
  .cd-spaltensatz__raster {
    grid-template-columns: var(--cd-satz-t, var(--cd-satz-m, repeat(auto-fit, minmax(min(100%, 22rem), 1fr))));
  }
}

@media (min-width: 1101px) {
  .cd-spaltensatz__satz {
    inline-size: var(--cd-satzbreite-d, var(--cd-satzbreite-t, var(--cd-satzbreite-m, 100%)));
    margin-inline: var(--cd-satzlage-d, var(--cd-satzlage-t, var(--cd-satzlage-m, auto auto)));
  }
  .cd-spaltensatz__raster {
    grid-template-columns: var(--cd-satz-d, var(--cd-satz-t, var(--cd-satz-m, repeat(auto-fit, minmax(min(100%, 22rem), 1fr)))));
  }
}

/* ---- Spannweite ------------------------------------------- */
/* Erst ab Tablet: Am Handy steht ohnehin alles untereinander, und
   eine Spannweite ueber eine einzige Spur waere ein Nichts. */
@media (min-width: 601px) {
  .cd-spaltensatz__feld[data-spanne="2"]    { grid-column: span 2; }
  .cd-spaltensatz__feld[data-spanne="3"]    { grid-column: span 3; }
  .cd-spaltensatz__feld[data-spanne="alle"] { grid-column: 1 / -1; }
}

/* ---- Das einzelne Feld ------------------------------------ */
/* RAHMENLOS UND OHNE FLAECHE — das ist die Abgrenzung zu
   cd_karten. Wer hier einen Rahmen ergaenzt, hat zwei Elemente fuer
   dieselbe Aufgabe gebaut. */
.cd-spaltensatz__feld {
  min-inline-size: 0; /* sonst sprengt ein langes Wort die Spur */
}

.cd-spaltensatz__bild {
  inline-size: 100%;
  block-size: auto;
  margin-block-end: var(--cd-a4);
  border-radius: var(--cd-r-karte);
}

.cd-spaltensatz__symbol {
  display: inline-flex;
  margin-block-end: var(--cd-a3);
  color: var(--cd-rot);
}
.cd-spaltensatz__symbol .cd-symbol {
  inline-size: 28px;
  block-size: 28px;
}

.cd-spaltensatz__kicker { display: block; margin-block-end: var(--cd-a2); }

.cd-spaltensatz__titel {
  margin: 0 0 var(--cd-a3);
  font-family: var(--cd-schrift-display);
  font-size: var(--cd-gr-gross);
  line-height: 1.3;
}

.cd-spaltensatz__text {
  color: var(--cd-text-2);
  line-height: var(--cd-zeile-text);
  overflow-wrap: anywhere;
}

.cd-spaltensatz__knopf { margin-block-start: var(--cd-a4); }

.cd-spaltensatz__verweis {
  display: inline-flex;
  align-items: center;
  gap: .4ch;
  margin-block-start: var(--cd-a3);
  color: var(--cd-rot);
  font-weight: 600;
}
.cd-spaltensatz__verweis:hover .cd-spaltensatz__pfeil {
  transform: translateX(3px);
}
.cd-spaltensatz__pfeil {
  transition: transform var(--cd-zeit) ease;
}

/* Wer Bewegung abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  .cd-spaltensatz__pfeil { transition: none; }
  .cd-spaltensatz__verweis:hover .cd-spaltensatz__pfeil { transform: none; }
}