/* ============================================================
   cd_preisstufen — Preisstufen
   ============================================================
   Zwei bis vier Stufen nebeneinander. Sie sitzen ohne eigenen
   Rahmen auf einer getoenten Flaeche und lassen 2 px Fuge — die
   Trennlinien SIND diese Fuge. Ein Rahmen je Stufe haette
   zwischen zwei Stufen eine doppelte Linie ergeben.

   Farben, Abstaende und Radien ausschliesslich aus tokens.css.
   Kein Hex-Wert, kein !important, kein blankes 1fr.
   ============================================================ */

.cd-preise {
  --preise-linie: var(--cd-linie-2);
  --preise-feld: var(--cd-weiss);
  --preise-text: var(--cd-text-2);
  --preise-mager: var(--cd-text-3);
}


/* ------------------------------------------------------------
   Kopf
   ------------------------------------------------------------
   Links die Einleitung, rechts entweder der Knopf der ganzen
   Bahn oder die Illustration. Unten ausgerichtet: die Grundlinie
   des Beitextes und die des Knopfes liegen damit auf einer Kante.
   ------------------------------------------------------------ */
.cd-preise__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cd-a6);
  align-items: end;
  margin-block-end: var(--cd-a7);
}

@media (min-width: 900px) {
  .cd-preise__kopf {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    column-gap: var(--cd-a8);
  }
}

.cd-preise__einleitung { min-inline-size: 0; }

.cd-preise__titel {
  margin-block-end: var(--cd-a4);
  max-inline-size: 20ch;
}
.cd-preise__unterzeile {
  margin-block-end: var(--cd-a4);
  font-size: var(--cd-gr-gross);
  color: var(--preise-mager);
}
.cd-preise__fliess {
  color: var(--preise-text);
  font-size: var(--cd-gr-gross);
  max-inline-size: 60ch;
}
.cd-preise__fliess > * + * { margin-block-start: var(--cd-a4); }

.cd-preise__kopfknopf { display: flex; }
@media (min-width: 900px) {
  .cd-preise__kopfknopf { justify-content: flex-end; }
}

.cd-preise__bild { margin: 0; min-inline-size: 0; }
.cd-preise__bildDatei {
  display: block;
  inline-size: 100%;
  max-inline-size: 390px;
  block-size: auto;
  margin-inline-start: auto;
}


/* ------------------------------------------------------------
   Raster der Stufen
   ------------------------------------------------------------
   auto-fit statt einer festen Spaltenzahl: leere Spuren fallen
   damit in sich zusammen. Bei drei Stufen in einem zweispaltigen
   Raster bliebe sonst eine leere Zelle stehen — und die zeigt
   nicht nichts, sondern den Grund der Huelle als grauen Block.

   minmax(min(100%, 17rem), 1fr) statt minmax(17rem, 1fr): auf
   einem 320-px-Geraet waere die feste Untergrenze breiter als der
   Bildschirm und schoebe die Seite waagerecht ueber den Rand
   (1.4.10). min(100%, …) nimmt ihr genau diese Moeglichkeit.
   ------------------------------------------------------------ */
.cd-preise__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 2px;
  background: var(--preise-linie);
  border: 1px solid var(--preise-linie);
}

.cd-preise__stufe {
  display: flex;
  flex-direction: column;
  padding: var(--cd-a6) var(--cd-a6) var(--cd-a5);
  background: var(--preise-feld);
  /* Die Akzentkante steht bei jeder Stufe im Fluss und ist nur
     bei der Empfehlung sichtbar. Waere sie nur dort gesetzt,
     saesse deren Inhalt 3 px tiefer als der der Nachbarn. */
  border-block-start: 3px solid transparent;
}
.cd-preise__stufe.cd-auf-dunkel { background: var(--cd-tinte); }
.cd-preise__stufe--empfohlen { border-block-start-color: var(--cd-rot); }
.cd-preise__stufe--empfohlen.cd-auf-dunkel { border-block-start-color: var(--cd-rot-auf-dunkel); }

.cd-preise__etikett {
  margin-block-end: var(--cd-a4);
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cd-rot);
}
.cd-preise__stufe.cd-auf-dunkel .cd-preise__etikett { color: var(--cd-rot-auf-dunkel); }

.cd-preise__stufeTitel {
  margin-block-end: var(--cd-a3);
  font-size: var(--cd-gr-h3);
  letter-spacing: -.022em;
}

/* Der Preis ist die Zahl, auf die der Blick faellt — er laeuft in
   der Anzeigeschrift und eine Stufe groesser als der Titel. */
.cd-preise__preis {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: var(--cd-a2);

  /* Zeilenfuge enger als die Spaltenfuge: Vorsatz und Betrag
     gehoeren zusammen. 8 px liessen die Beschriftung schweben,
     4 px binden sie an die Zahl darunter — dasselbe Verhaeltnis
     wie zwischen Etikett und Stufentitel. */
  row-gap: var(--cd-a1);

  margin-block-end: var(--cd-a5);
  max-inline-size: none;
}
.cd-preise__preisWert {
  font-family: var(--cd-schrift-display);
  font-weight: 700;
  font-size: var(--cd-gr-h2);
  line-height: 1.1;
  letter-spacing: -.03em;
}
/* Vorsatz und Zusatz ordnen den Betrag nur ein — "Budget bis",
   "im Monat". Sie laufen in der Schreibmaschinenschrift zwei Grade
   kleiner und liegen mit dem Betrag auf EINER Grundlinie (die
   Zeile darueber steht auf align-items: baseline).

   Warum ueberhaupt zwei eigene Felder: Steht das Beiwerk im
   Preisfeld selbst, laeuft es im Grad des Betrages mit. "Budget
   bis 2.500 €" macht aus zehn Zeichen Vorrede eine Schlagzeile
   und schiebt in einer Reihe aus drei Stufen den einen Betrag aus
   der Flucht der beiden anderen. */
.cd-preise__preisVorsatz,
.cd-preise__preisZusatz {
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--preise-mager);
}

/* DER VORSATZ NIMMT EINE GANZE ZEILE — der Betrag steht darunter.
   flex-basis: 100% fuellt die erste Zeile des Umbruchs allein aus
   und schiebt den Betrag in die naechste.

   Warum nicht mit einem <br> im Feld: Ein Zeilenumbruch am ENDE
   eines Blocks erzeugt keine zweite Zeile — das ist keine Eigenart
   dieser Vorlage, sondern CSS. Der Redakteur tippt <br />, sieht
   keine Wirkung und sucht den Fehler bei sich. Der Umbruch gehoert
   deshalb in die Gestaltung und nicht in den Inhalt.

   Warum nicht einfach inline lassen: Vor einem Betrag im h2-Grad
   wirkt eine Beschriftung auf derselben Zeile wie ein angehaengtes
   Wort. Darueber ist sie das, was sie ist — eine Beschriftung. Und
   die Betraege aller Stufen beginnen wieder an derselben Kante,
   auch wenn eine Stufe eine laengere Beschriftung traegt.

   Der ZUSATZ bleibt bewusst inline: "ab 79 € IM MONAT" ist ein
   Satz, keine Beschriftung. */
.cd-preise__preisVorsatz { flex-basis: 100%; }
.cd-preise__stufe.cd-auf-dunkel .cd-preise__preisVorsatz,
.cd-preise__stufe.cd-auf-dunkel .cd-preise__preisZusatz { color: var(--cd-text-auf-dunkel-2); }

/* Auszeichnung INNERHALB des Betrages.
   Das Preisfeld laesst <small> <sup> <sub> zu (der Bereiniger in
   der Vorlage haelt alles Ausfuehrbare heraus). Gebraucht wird das
   fuer Feinheiten, fuer die ein eigenes Feld zu grob waere — ein
   Sternchen an der Zahl, ein zurueckgenommenes Wort mitten im
   Betrag.

   Ohne eigene Regel bekaeme <small> die Browservorgabe von 80 %.
   Bei einem Betrag im h2-Grad ist das immer noch zu laut, deshalb
   der eigene Wert. Er ist relativ (em) und haelt damit auch dann,
   wenn der Betrag ueber die Stufen hinweg mitwaechst. */
.cd-preise__preisWert small {
  font-size: .5em;
  font-weight: 500;
  letter-spacing: 0;
}
.cd-preise__preisWert sup,
.cd-preise__preisWert sub {
  font-size: .45em;
  letter-spacing: 0;
}

.cd-preise__stufeText {
  margin-block-end: var(--cd-a5);
  font-size: var(--cd-gr-text);
  line-height: 1.62;
  color: var(--preise-text);
}
.cd-preise__stufe.cd-auf-dunkel .cd-preise__stufeText { color: var(--cd-text-auf-dunkel); }

/* Die Merkmalliste dehnt sich und schiebt den Knopf nach unten —
   so stehen die Knoepfe aller Stufen auf einer Kante, auch wenn
   eine Stufe zwei Merkmale mehr hat. */
.cd-preise__merkmale {
  display: grid;
  align-content: start;
  gap: var(--cd-a3);
  flex: 1;
  margin-block-end: var(--cd-a5);
}
.cd-preise__merkmal {
  display: flex;
  align-items: flex-start;
  gap: var(--cd-a3);
  font-size: var(--cd-gr-text);
  line-height: 1.5;
}
.cd-preise__haken {
  flex: 0 0 auto;
  font-family: var(--cd-schrift-mono);
  line-height: 1.5;
  color: var(--cd-rot);
}
.cd-preise__stufe.cd-auf-dunkel .cd-preise__haken { color: var(--cd-rot-auf-dunkel); }
.cd-preise__merkmalText { min-inline-size: 0; }

.cd-preise__stufeKnopfzeile { margin-block-start: auto; }

/* Der Knopf fuellt die Breite der Stufe. Die Unterstreichung aus
   basis.css gilt Links im Fliesstext — hier ist es ein
   Bedienelement mit eigener Flaeche. Zwei Klassen sind noetig:
   "li a[href]" waere sonst spezifischer. */
.cd-preise__stufe .cd-preise__stufeKnopf {
  text-decoration: none;
  inline-size: 100%;
  justify-content: space-between;
}
.cd-preise__stufe .cd-preise__stufeKnopf:hover {
  background: var(--cd-rot);
  border-color: var(--cd-rot);
  color: var(--cd-weiss);
}
.cd-preise__stufe .cd-preise__stufeKnopf:hover .cd-knopf__pfeil { color: var(--cd-weiss); }


/* ------------------------------------------------------------
   Fussnote
   ------------------------------------------------------------
   Pflichtangabe zu Netto und Unverbindlichkeit. Sie steht unter
   den Stufen und wird NICHT kleiner gesetzt als der Fliesstext:
   eine Pflichtangabe in Kleinstschrift ist zwar vorhanden und
   trotzdem nicht gelesen. Der Ton ist der ruhigste der Palette
   mit noch 5,5:1 gegen Weiss (1.4.3).
   ------------------------------------------------------------ */
.cd-preise__fussnote {
  margin-block-start: var(--cd-a5);
  font-size: var(--cd-gr-text);
  line-height: 1.6;
  color: var(--cd-text-3);
  max-inline-size: 90ch;
}


/* ------------------------------------------------------------
   Schmale Geraete
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .cd-preise__kopf { margin-block-end: var(--cd-a6); }
  .cd-preise__stufe { padding: var(--cd-a5); }
  .cd-preise__bildDatei { margin-inline: auto; }
}