/*
  Stil „Frisch" (E125) – wählbar unter /admin/design, wird nach basis.css eingebunden und
  überlagert dessen Regeln. Vorbild eatfreda.com: cremiges Papier, eine kräftige Akzentfarbe
  für alle Überschriften und die Navigation, weiche schwere Serifen (Fraunces mit SOFT-Achse),
  Pastellflächen für einzelne Abschnitte, helle Fußzeile. Keine Steppnähte, keine
  gestrichelten Kanten, kein Punktraster.

  Farben kommen weiter aus Design::berechnePalette(): --tinte-gross ist die Tinte auf 3:1
  gegen alle Flächen gezogen (nur für große fette Schrift), --pastell-* sind die
  Abschnittsflächen, gegen die Text, gedämpfter Text und Tinte im Stil „Frisch" zusätzlich
  auf 4,5:1 geprüft werden. Die festen Paare stehen in bin/kontrast.php (Block „Frisch").
*/
:root { --rund: 1.5rem; }
body { font-size: 1.1rem; line-height: 1.65; }

/* Überschriften: schwer, weich, komplett in Tinte – auch die zweite Zeile */
h1, h2, h3 {
  font-weight: 900; letter-spacing: 0; font-stretch: normal;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  color: var(--tinte-gross);
}
h1 { font-size: clamp(2.4rem, 5vw, 3.5rem); line-height: 1; letter-spacing: -0.01em; }
h2 { font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.05; }
h3 { font-size: 1.3rem; }
h1 em, h2 em { color: inherit; }
.buehne p, .abschnitt-kopf p, .schritt p, .karte p, .ablauf p, .vergleich li, .cms-block-kopf p { color: var(--text); }

/* Kopf: ruhig, ohne Trennlinie, Navigation in Tinte */
.kopf { background: var(--papier); border-bottom: 0; backdrop-filter: none; }
.kopf-innen { min-height: 5rem; }
.navi a { color: var(--tinte); font-weight: 700; }
.navi.navi-offen a:not(.knopf) { border-top-color: var(--pastell-rosa); }

/* Knöpfe: satte Pille ohne Naht und Schatten, in der Knopf-Tinte (näher am gewählten Ton) */
.knopf { outline: none; box-shadow: none; padding: 1rem 1.6rem; font-weight: 700; background: var(--tinte-knopf); }
.knopf:hover { box-shadow: none; transform: none; background: var(--tinte-dunkel); }
.schritt-nr, .ablauf li::before { background: var(--tinte-knopf); }
.knopf:not(:focus-visible) { outline: none; }
.knopf-leise { background: transparent; color: var(--tinte); border: 2px solid var(--tinte); padding: calc(1rem - 2px) calc(1.6rem - 2px); }
.knopf-leise:hover { background: var(--pastell-rosa); color: var(--tinte-dunkel); }
.navi .knopf { padding: 0.65rem 1.2rem; }
/* Pfeil im Kreis am Hauptknopf der Bühne und des Schlussstreifens: ein Kreis in der
   Textfarbe des Knopfs, der Pfeil ist als Loch ausgespart (fill-rule evenodd) und lässt die
   Knopffarbe durch – keine Bilddatei, keine feste Farbe. */
.buehne .handlung .knopf:not(.knopf-leise)::after, .streifen .knopf::after {
  content: ""; width: 1.6rem; height: 1.6rem; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 0a12 12 0 1 0 0 24a12 12 0 1 0 0-24zM5.5 10.6h8.2V7l6.3 5-6.3 5v-3.6H5.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 0a12 12 0 1 0 0 24a12 12 0 1 0 0-24zM5.5 10.6h8.2V7l6.3 5-6.3 5v-3.6H5.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Bühne: kein Punktraster, mehr Luft, Foto ohne Kippen */
.buehne { background-image: none; padding: 3.5rem 0 3rem; }
.buehne-text { max-width: 44rem; }
.buehne .einleitung { font-size: clamp(1.2rem, 2vw, 1.4rem); }
.shirt-buehne img { transform: none; box-shadow: none; }
.leine path:first-of-type { stroke: var(--linie); }

/* Karten: weiche Rosé-Flächen statt Rahmen, Fäden und Nähte */
.schritt, .karte, .vergleich > div, .fahrplan-karte, .abstimmung-karte, .recht-klapp, .bestellzeile,
.verlauf-eintrag, .verlauf-freigabe, .schneller, .auswahl-karte, .cms-block .karte {
  border: 0; box-shadow: none; background: var(--pastell-rosa);
}
.schritte::before { display: none; }
.schritt-nr, .ablauf li::before { outline: none; }
.ablauf li:not(:last-child)::after { border-left-style: solid; border-color: var(--linie); }
.vergleich .ohne { background: var(--papier-dunkel); }
.vergleich .ohne h3 { color: var(--gedaempft); }
.vergleich .mit { background: var(--pastell-gruen); border: 0; }
.etikett, .groessen li, .farb-variante, .kontrolle { border: 1.5px solid transparent; background: var(--pastell-rosa); border-radius: 999px; }
a.etikett:hover { background: var(--karte); color: var(--tinte); border-color: transparent; }
.kontrolle:has(input:checked), .auswahl-karte:has(input:checked), .abstimmung-option:has(input:checked) { background: var(--pastell-blau); border-color: var(--tinte); }
.hinweis { border: 0; background: var(--pastell-blau); }
.hinweis-preis { border-top-style: solid; }
.datei-eingabe { border-style: solid; }
.fahrplan li { border-top: 1px solid rgba(28, 36, 48, 0.12); }
.fahrplan li:first-child { border-top: 0; }
.fahrplan li i { background: var(--karte); border-color: var(--karte); }
.fahrplan-erledigt i { border-color: #1f8a4c; }
.fahrplan-aktuell i { border-color: var(--tinte); }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="number"], input[type="tel"],
select, textarea { border-radius: 0.8rem; }
.tabelle table { border: 0; }
.tabelle th { background: var(--pastell-rosa); }

/* Abschnitte auf Pastellflächen, über die volle Breite (Schatten-Trick, ohne Umbau des Gerüsts) */
#fuer-wen, #dankeschoen {
  background: var(--pastell-gruen);
  box-shadow: 0 0 0 100vmax var(--pastell-gruen);
  clip-path: inset(0 -100vmax);
  padding: 4rem 0;
}
#dankeschoen { background: var(--pastell-blau); box-shadow: 0 0 0 100vmax var(--pastell-blau); }
#fuer-wen .etikett { background: var(--karte); }
#fuer-wen a.etikett:hover { background: var(--pastell-rosa); }

/* Schlussstreifen: Tinte statt Nachtblau, Knopf in Papier */
.streifen { background: var(--tinte-knopf); color: var(--papier); }
.streifen::after { display: none; }
.streifen h2, .streifen h2 em, .streifen p { color: var(--papier); }
.streifen .knopf { background: var(--papier); color: var(--tinte); outline: none; }
.streifen .knopf:hover { background: var(--karte); color: var(--tinte-dunkel); }

/* Fußzeile hell auf Grün, Links in Tinte */
.fuss { background: var(--pastell-gruen); color: var(--text); margin-top: 4rem; }
.fuss h3 { color: var(--tinte); text-transform: none; letter-spacing: 0; font-size: 1.2rem; font-weight: 900; }
.fuss a { color: var(--tinte); font-weight: 600; }
.fuss a:hover { color: var(--tinte-dunkel); text-decoration: underline; }
.fuss-spalten { border-bottom: 1px solid rgba(28, 36, 48, 0.15); }

@media (max-width: 56rem) {
  .schritte::before { display: none; }
}
@media (max-width: 40rem) {
  /* Knopf neben dem Menü-Schalter: im Stil „Frisch" ist er etwas breiter, Platz lassen */
  .navi:not(.navi-offen) .knopf { right: 4rem; top: 1.25rem; padding: 0.55rem 1rem; font-size: 0.9rem; }
  .navi-schalter:hover, .navi-schalter[aria-expanded="true"] { background: var(--pastell-rosa); }
}