/*
  Shirtfreunde, Grundgerüst für alle öffentlichen Seiten. Die Werte im :root-Block sind
  nur der Rückfall – Design::styleTag() überschreibt sie auf jeder Seite mit der unter
  /admin/design gewählten und rechnerisch auf Kontrast gezogenen Palette. Seit E125 ist
  der Stil „Frisch" (public/assets/css/frisch.css, Creme/Koralle/Fraunces) Standard;
  „Werkstatt" (warmer Papierton, Himbeere, Steppnähte, dunkle Fußzeile) bleibt wählbar.

  Farbpaare und Kontraste (WCAG AA, geprüft mit bin/kontrast.php):
    Werkstatt:  Text #1c2430 auf #faf6ef 14,6:1 · Tinte #b8215a auf #faf6ef 5,7:1 ·
                Knopftext #faf6ef auf #b8215a 5,7:1 · Etikett #1c2430 auf #f7b733 8,6:1 ·
                Fußlink #f7b733 auf #1c2430 8,6:1
    Frisch:     eigener Block in bin/kontrast.php (Text/Tinte auf den Pastellflächen,
                Überschriften 3:1, Knopf-Tinte gegen Papier und Karte)
*/
:root {
  --papier: #fffdf2;
  --papier-dunkel: #f5f3e8;
  --text: #1c2430;
  --gedaempft: #55606b;
  --tinte: #a2423b;
  --tinte-rgb: 162, 66, 58;
  --tinte-dunkel: #7f342e;
  --tinte-gross: #d0554b;   /* Tinte für große fette Überschriften (3:1 genügt), Stil „Frisch" */
  --tinte-knopf: #c35047;   /* Tinte für Knöpfe (nur gegen Papier/Karte geprüft), Stil „Frisch" */
  --pastell-gruen: #d5ebd0; /* Abschnittsflächen im Stil „Frisch" (frisch.css) */
  --pastell-blau: #cfe3f0;
  --pastell-rosa: #fcede2;
  --sonne: #f0b858;
  --faden: #a2a7a8;
  --linie: #cfd1cc;
  --karte: #ffffff;   /* Karten, Felder, Tabellen – Design::berechnePalette() leitet sie vom Papier ab */
  --hinweis: #fff8e6; /* Hinweiskästen */
  --breite: 68rem;
  --rund: 1.25rem;
  --schrift-titel: "Fraunces", "Karla", system-ui, sans-serif;
  --schrift-text: "Karla", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { font-size: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--schrift-titel);
  font-optical-sizing: auto;
  line-height: 1.05;
  margin: 0 0 0.5em;
  font-weight: 800;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); font-stretch: 92%; letter-spacing: -0.03em; margin-bottom: 0.5em; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: 0; }
p { margin: 0 0 1em; }

/* Zweizeilige Überschrift: Zeile 1 in Textfarbe, Zeile 2 (em) in Tinte */
h1 em, h2 em { font-style: normal; color: var(--tinte); }

a { color: var(--tinte); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--tinte-dunkel); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--tinte);
  outline-offset: 3px;
}

.sprung { position: absolute; left: -999px; top: 0; background: var(--papier); padding: 0.5rem 1rem; }
.sprung:focus { left: 1rem; z-index: 10; }

.ic { width: 1.25em; height: 1.25em; vertical-align: -0.25em; }

/* Etikett-Knopf: Pille mit Steppnaht innen, wie ein aufgenähtes Label */
.knopf {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--tinte); color: var(--papier);
  padding: 0.9rem 1.6rem; border-radius: 999px;
  font-weight: 650; font-size: 1.05rem; text-decoration: none; border: 0; cursor: pointer;
  outline: 2px dashed rgba(250, 246, 239, 0.65); outline-offset: -7px;
  box-shadow: 0 6px 18px rgba(var(--tinte-rgb), 0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.knopf:hover { background: var(--tinte-dunkel); color: var(--papier); transform: translateY(-1px); box-shadow: 0 9px 22px rgba(var(--tinte-rgb), 0.28); }
.knopf:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.knopf-leise {
  background: transparent; color: var(--text); box-shadow: none;
  outline: 2px dashed var(--faden); outline-offset: -2px;
}
.knopf-leise:hover { background: var(--papier-dunkel); color: var(--text); box-shadow: none; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 5; background: rgba(250, 246, 239, 0.92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--linie); }
.kopf-innen, .inhalt, .fuss-innen { max-width: var(--breite); margin: 0 auto; padding: 0 1.25rem; }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }
.marke { display: inline-flex; align-items: center; text-decoration: none; }
.marke-logo { height: 2.1rem; width: auto; }
.navi { display: flex; align-items: center; gap: 1.5rem; }
.navi a { text-decoration: none; color: var(--text); font-weight: 500; padding: 0.25rem 0; }
.navi a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--tinte); }
.navi .knopf { padding: 0.55rem 1.1rem; font-size: 0.95rem; box-shadow: none; color: var(--papier); }
.navi .knopf:not(:focus-visible) { outline: none; }
.navi-status { font-size: 0.95rem; color: var(--gedaempft); }
.navi-status a { color: var(--tinte); font-weight: 500; }

.inhalt { padding-top: 0; padding-bottom: 0; }

/* Bühne: Text links, Shirt rechts, dezentes Punktraster wie ein Schneidetisch */
.buehne {
  display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 2.5rem; align-items: center;
  padding: 4rem 0 3rem;
  background-image: radial-gradient(var(--linie) 1.1px, transparent 1.1px);
  background-size: 22px 22px;
}
.buehne-text { max-width: 40rem; }
.buehne-einspaltig { grid-template-columns: 1fr; padding-bottom: 2.5rem; }
.buehne-einspaltig .buehne-text { max-width: 44rem; }
.buehne .vorzeile { display: inline-block; font-weight: 600; color: var(--tinte); letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.85rem; margin-bottom: 0.75rem; }
.buehne .einleitung { font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.5; }
.buehne p { color: var(--gedaempft); }
.buehne .handlung { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; margin-top: 1.5rem; }
.shirt-buehne { display: flex; justify-content: center; }
.shirt-buehne svg { width: min(100%, 30rem); height: auto; transform: rotate(-4deg); }
.shirt-buehne img { width: min(100%, 30rem); height: auto; border-radius: var(--rund); box-shadow: 0 18px 40px rgba(28, 36, 48, 0.18); transform: rotate(-2deg); }
/* Artikelseite: Produktfoto aus dem Medienpool, darunter weitere Bilder als Galerie.
   Kein Verkippen und kein schwerer Schatten wie auf der Startseite (dort passt es zum
   Schneidetisch-Punktraster) – hier steht das Foto allein auf hellem Papierton, ein
   schräg hingeworfenes Bild mit hartem Schatten hätte da wie ein loser Zettel gewirkt.
   Ein dünner Rand grenzt den (meist weißen) Fotohintergrund sauber vom Papierton ab. */
.artikel-bilder { flex-direction: column; align-items: center; }
.artikel-bilder > img, .artikel-bilder > svg { transform: none; }
.artikel-bilder > img {
  box-shadow: 0 1px 3px rgba(28, 36, 48, 0.08);
  border: 1px solid var(--linie);
}
.artikel-galerie { list-style: none; margin: 1.5rem 0 0; padding: 0; width: min(100%, 30rem); }
.artikel-galerie img { box-shadow: none; transform: none; border: 1px solid var(--linie); }

/* Wäscheleine als Trenner */
.leine { display: block; width: 100%; height: auto; margin: 0.5rem 0 0; }

/* Abschnitte */
.abschnitt { padding: 3.5rem 0; }
.abschnitt-kopf { max-width: 38rem; margin-bottom: 2rem; }
.abschnitt-kopf p { color: var(--gedaempft); font-size: 1.1rem; }

/* Drei Schritte, verbunden durch einen Faden */
.schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; position: relative; list-style: none; margin: 0; padding: 0; }
.schritte::before {
  content: ""; position: absolute; left: 2rem; right: 2rem; top: 1.6rem;
  border-top: 2px dashed var(--faden); z-index: 0;
}
.schritt { position: relative; z-index: 1; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); padding: 1.5rem; box-shadow: 0 1px 0 rgba(28, 36, 48, 0.03); }
.schritt-nr {
  display: inline-grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%;
  background: var(--tinte); color: var(--papier); font-family: var(--schrift-titel); font-weight: 800; font-size: 1.3rem;
  outline: 2px dashed rgba(250, 246, 239, 0.7); outline-offset: -6px; margin-bottom: 1rem;
}
.schritt h3 { display: flex; align-items: center; gap: 0.5rem; }
.schritt h3 .ic { color: var(--tinte); }
.schritt p { margin: 0; color: var(--gedaempft); }

/* Zielgruppen als Wäscheetiketten */
.etiketten { display: flex; flex-wrap: wrap; gap: 0.75rem; list-style: none; margin: 0; padding: 0; }
.etikett {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--karte); border: 1.5px dashed var(--faden); border-radius: 0.6rem;
  padding: 0.55rem 0.9rem 0.55rem 0.7rem; font-weight: 500; color: var(--text); text-decoration: none;
}
a.etikett:hover { border-color: var(--tinte); color: var(--tinte); }
.etikett i { width: 0.95rem; height: 0.95rem; border-radius: 3px; display: inline-block; border: 1px solid rgba(28, 36, 48, 0.15); }

/* Farb-Varianten eines Artikels (E92): Farbpunkt oder eigenes Foto je Farbe, plus optionale Verfügbarkeit */
.farb-varianten { display: flex; flex-wrap: wrap; gap: 0.75rem; list-style: none; margin: 0; padding: 0; }
.farb-variante {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--karte); border: 1.5px dashed var(--faden); border-radius: 0.6rem;
  padding: 0.4rem 0.9rem 0.4rem 0.4rem; font-weight: 500; color: var(--text);
}
/* Farben mit eigenem Foto sind klickbare Knöpfe, die das große Artikelbild tauschen (E102) */
button.farb-variante { font: inherit; cursor: pointer; text-align: left; }
button.farb-variante:hover, button.farb-variante:focus-visible { border-color: var(--tinte); }
.farb-variante i { width: 0.95rem; height: 0.95rem; border-radius: 3px; display: inline-block; border: 1px solid rgba(28, 36, 48, 0.15); margin-left: 0.3rem; }
.farb-variante img { width: 2.4rem; height: 2.4rem; border-radius: 0.4rem; object-fit: cover; }
.farb-variante small { display: block; color: var(--gedaempft); font-weight: 400; }

/* Ansichten-Umschaltung (vorne/seite1/seite2/ruecken) unter dem Artikelbild (E104) */
.artikel-ansichten { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 0; }
.artikel-ansichten button {
  font: inherit; cursor: pointer; background: var(--karte); border: 1.5px solid var(--faden);
  border-radius: 0.5rem; padding: 0.35rem 0.8rem; color: var(--text);
}
.artikel-ansichten button:hover, .artikel-ansichten button:focus-visible { border-color: var(--tinte); }
.artikel-ansichten button[aria-pressed="true"] { border-color: var(--tinte); background: var(--tinte); color: #fff; }

/* Abschluss-Streifen vor dem Fuß: Aufruf zum Loslegen, Stoffoptik */
.streifen {
  background: var(--text); color: var(--papier); border-radius: var(--rund);
  padding: 2.25rem 2rem; display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 1.5rem; align-items: center;
  position: relative; overflow: hidden;
}
.streifen::after { content: ""; position: absolute; inset: 10px; border: 2px dashed rgba(250, 246, 239, 0.28); border-radius: calc(var(--rund) - 6px); pointer-events: none; }
.streifen h2 { color: var(--papier); font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 0.4em; }
.streifen h2 em { color: var(--sonne); }
.streifen p { margin: 0; color: #e9e4da; }
.streifen .handlung { text-align: right; }
.streifen .knopf { background: var(--sonne); color: var(--text); outline-color: rgba(28, 36, 48, 0.45); box-shadow: none; }
.streifen .knopf:hover { background: #e9a91f; color: var(--text); }


/* Formulare im Organisator- und Admin-Bereich */
.formular { max-width: 34rem; }
.formular-breit { max-width: 44rem; }
.formular-abschnitt { margin-bottom: 2.25rem; }
.formular-abschnitt h2 { font-size: 1.3rem; margin-bottom: 0.35rem; }
.formular-abschnitt > p:first-of-type { color: var(--gedaempft); margin-bottom: 1.25rem; }
.feld { margin-bottom: 1.25rem; }
.feld label, .feld legend { display: block; font-weight: 650; margin-bottom: 0.4rem; padding: 0; }
.feld .pflicht { color: var(--gedaempft); font-weight: 500; }
.feld-hinweis { display: block; color: var(--gedaempft); font-size: 0.9rem; margin-top: 0.4rem; }
.feld-warnung { color: #92400e; font-weight: 600; }
.feld fieldset { border: 0; padding: 0; margin: 0; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="number"], input[type="tel"],
select, textarea {
  width: 100%; padding: 0.7rem 0.9rem; border: 1.5px solid var(--linie); border-radius: 0.6rem;
  font: inherit; color: var(--text); background: var(--karte);
}
textarea { resize: vertical; min-height: 5rem; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--tinte); outline-offset: 1px; border-color: var(--tinte);
}
.kontrollen { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.kontrolle {
  display: inline-flex; align-items: center; gap: 0.55rem;
  border: 1.5px solid var(--linie); border-radius: 0.6rem; padding: 0.55rem 0.85rem;
  cursor: pointer; background: var(--karte); font-weight: 500;
}
.kontrolle:has(input:checked) { border-color: var(--tinte); background: #eef2fd; }
.kontrolle input { margin: 0; width: 1.1rem; height: 1.1rem; accent-color: var(--tinte); }
.datei-eingabe {
  display: block; border: 1.5px dashed var(--faden); border-radius: var(--rund);
  padding: 1.5rem; text-align: center; background: var(--karte); cursor: pointer;
}
.fehler {
  background: #fdecec; border: 1.5px dashed #b3261e; border-radius: var(--rund);
  padding: 1rem 1.25rem; margin: 0 0 1.5rem; color: #7a1710;
}
.fehler p { margin: 0 0 0.4rem; font-weight: 650; }
.fehler ul { margin: 0; padding-left: 1.2rem; }
.fehler li { margin-bottom: 0.2rem; }
.formular .knopf { margin-top: 0.5rem; }

/* Fortschritt im Assistenten (Aktion anlegen) */
.assistent-fortschritt { display: flex; align-items: flex-start; list-style: none; margin: 0 0 2.25rem; padding: 0; max-width: 34rem; }
.assistent-fortschritt li { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--gedaempft); flex: 1; text-align: center; position: relative; }
.assistent-fortschritt li:not(:last-child)::after {
  content: ""; position: absolute; top: 0.95rem; left: calc(50% + 1.4rem); right: calc(-50% + 1.4rem);
  height: 2px; background: var(--linie);
}
.assistent-fortschritt li.erledigt:not(:last-child)::after { background: var(--tinte); }
.assistent-fortschritt .badge {
  display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--karte); border: 1.5px solid var(--linie); font-family: var(--schrift-titel); font-weight: 800;
  position: relative; z-index: 1;
}
.assistent-fortschritt .badge .ic { width: 1rem; height: 1rem; }
.assistent-fortschritt li.aktuell, .assistent-fortschritt li.erledigt { color: var(--text); }
.assistent-fortschritt li.aktuell .badge, .assistent-fortschritt li.erledigt .badge { background: var(--tinte); border-color: var(--tinte); color: var(--papier); }
.assistent-fortschritt .label { display: none; }
@media (min-width: 30rem) { .assistent-fortschritt .label { display: block; } }

.assistent-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.assistent-nav .knopf { margin-top: 0; }

/* Verlauf: Nachrichten und Mockup-Freigabe je Aktion */
.verlauf { max-width: 40rem; }
.verlauf h3 { margin-top: 2rem; }
.verlauf-freigabe { background: var(--karte); border: 1.5px solid var(--tinte); border-radius: var(--rund); padding: 1.5rem; margin-bottom: 1.5rem; }
.verlauf-freigabe h3 { margin-top: 0; }
.verlauf-mockup-bild { max-width: 100%; border-radius: 0.6rem; border: 1px solid var(--linie); margin-bottom: 1rem; display: block; }
.verlauf-liste { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.verlauf-eintrag { background: var(--karte); border: 1px solid var(--linie); border-radius: 0.7rem; padding: 0.9rem 1.1rem; }
.verlauf-eintrag.verlauf-organisator { border-left: 3px solid var(--tinte); }
.verlauf-eintrag.verlauf-admin { border-left: 3px solid var(--sonne); }
.verlauf-eintrag.verlauf-system { border-left: 3px solid var(--faden); background: var(--papier-dunkel); }
.verlauf-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.35rem; font-size: 0.9rem; }
.verlauf-kopf time { color: var(--gedaempft); }
.verlauf-eintrag p { margin: 0; color: var(--text); }
.verlauf-eintrag p + p { margin-top: 0.5em; }

/* Öffentliche Abstimmung über Farbe oder Motiv (E19) */
.abstimmung-karte { max-width: 34rem; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); padding: 1.5rem; }
.abstimmung-karte h2 { margin-top: 0; }
.abstimmung-optionen { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.abstimmung-option {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  border: 1.5px solid var(--linie); border-radius: 0.7rem; padding: 0.75rem;
  cursor: pointer; width: 7.5rem; text-align: center;
}
.abstimmung-option:has(input:checked) { border-color: var(--tinte); background: #eef2fd; }
.abstimmung-option input { margin: 0; }
.abstimmung-option i { display: block; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid rgba(28, 36, 48, 0.15); }
.abstimmung-farb-shirt { display: block; width: 2.6rem; height: 2.6rem; }
.abstimmung-option img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0.5rem; }
.abstimmung-ergebnis { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.abstimmung-ergebnis li { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 0.75rem; align-items: center; }
.abstimmung-ergebnis .abstimmung-balken { grid-column: 1 / -1; height: 0.6rem; background: var(--papier-dunkel); border-radius: 999px; overflow: hidden; }
.abstimmung-balken div { height: 100%; background: var(--tinte); }
.abstimmung-sieger span:first-child { font-weight: 700; color: var(--tinte); }
.abstimmung-empfehlung { display: block; font-size: 0.75rem; font-weight: 700; color: var(--tinte); }

/* Fließtext-Seiten */
.prosa { max-width: 44rem; }
.prosa h2 { margin-top: 2.25rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.prosa h3 { margin-top: 1.5rem; }
.prosa ul, .prosa ol { padding-left: 1.4rem; }
.prosa li { margin-bottom: 0.35rem; }
.gedaempft { color: var(--gedaempft); }

/* Bestellseite: Warenkorb-Zeilen und Motiv-Vorschau */
.bestellseite-mockup { max-width: 24rem; width: 100%; border-radius: var(--rund); border: 1px solid var(--linie); margin-bottom: 1.5rem; }
.bestellzeile {
  display: grid; grid-template-columns: 2fr 1.2fr 1.2fr 0.8fr auto; gap: 0.75rem; align-items: end;
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); padding: 1rem; margin-bottom: 0.75rem;
}
.bestellzeile .feld { margin-bottom: 0; }
@media (max-width: 640px) { .bestellzeile { grid-template-columns: 1fr 1fr; } }
/* Bild und Verfügbarkeit der gewählten Farbe (E92) – ergänzt das Farbe-Auswahlfeld */
.farb-vorschau { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.farb-vorschau img { width: 2.4rem; height: 2.4rem; border-radius: 0.4rem; object-fit: cover; flex-shrink: 0; }
.farb-vorschau span { font-size: 0.85rem; color: var(--gedaempft); }

/* Karten in einem Raster */
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); padding: 1.5rem; box-shadow: 0 1px 0 rgba(28, 36, 48, 0.03); }
.karte h3 { display: flex; align-items: center; gap: 0.5rem; margin-top: 0; }
.karte h3 .ic { color: var(--tinte); flex: none; }
.karte p { margin: 0; color: var(--gedaempft); }
.karte p + p { margin-top: 0.75em; }

/* Frei anlegbare CMS-Module (Bloecke::rendern) */
.cms-block { margin: 2.5rem auto 0; max-width: 38rem; text-align: center; }
.cms-block-kopf p { color: var(--gedaempft); }
.cms-foto img { width: 100%; border-radius: var(--rund); }
.cms-galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; }
.cms-galerie img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--rund); aspect-ratio: 1; }

/* Ablauf als nummerierte Liste mit Faden */
.ablauf { list-style: none; margin: 0; padding: 0; counter-reset: schritt; position: relative; }
.ablauf li { position: relative; padding-left: 4rem; padding-bottom: 1.75rem; counter-increment: schritt; }
.ablauf li::before {
  content: counter(schritt); position: absolute; left: 0; top: -0.2rem;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--tinte); color: var(--papier); font-family: var(--schrift-titel); font-weight: 800; font-size: 1.15rem;
  outline: 2px dashed rgba(250, 246, 239, 0.7); outline-offset: -5px;
}
.ablauf li:not(:last-child)::after { content: ""; position: absolute; left: 1.3rem; top: 2.7rem; bottom: 0.2rem; border-left: 2px dashed var(--faden); }
.ablauf h3 { margin: 0 0 0.25rem; }
.ablauf p { margin: 0; color: var(--gedaempft); }

/* Größen als Stoffetiketten */
.groessen { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 1.5rem; padding: 0; }
.groessen li { background: var(--karte); border: 1.5px dashed var(--faden); border-radius: 0.5rem; padding: 0.35rem 0.75rem; font-weight: 600; font-family: var(--schrift-titel); }

/* Tabellen, z. B. Maßtabelle */
.tabelle { overflow-x: auto; margin: 0 0 1.5rem; }
.tabelle table { border-collapse: collapse; width: 100%; min-width: 22rem; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); }
.tabelle th, .tabelle td { text-align: left; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--linie); }
.tabelle th { font-family: var(--schrift-titel); font-weight: 700; background: var(--papier-dunkel); }
.tabelle tr:last-child td { border-bottom: 0; }

/* Preiszeile auf Artikel- und Preisseite */
.preiszeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; margin: 0 0 1.5rem; }
.preiszeile strong { font-family: var(--schrift-titel); font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; color: var(--tinte); }
.preiszeile span { color: var(--gedaempft); }
.hinweis-preis { color: var(--gedaempft); font-size: 0.95rem; margin: 0 0 1.5rem; padding-top: 0.25rem; border-top: 1px dashed var(--linie); }

/* Vorher/Nachher: was eine Sammelbestellung sonst bedeutet, und was wir übernehmen */
.vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.vergleich > div { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); padding: 1.5rem 1.5rem 0.5rem; }
.vergleich h3 { margin-top: 0; }
.vergleich ul { list-style: none; margin: 0; padding: 0; }
.vergleich li { display: flex; gap: 0.65rem; align-items: flex-start; margin-bottom: 1rem; color: var(--gedaempft); }
.vergleich li .ic { flex: none; margin-top: 0.15rem; width: 1.15em; height: 1.15em; }
.vergleich .ohne { border-style: dashed; }
.vergleich .ohne h3 { color: var(--gedaempft); }
.vergleich .ohne li .ic { color: var(--faden); }
.vergleich .mit { border: 1.5px solid var(--tinte); background: var(--karte); }
.vergleich .mit li .ic { color: var(--tinte); }
.vergleich .mit li { color: var(--text); }

/* Hinweiskasten, z. B. Platzhalter auf Rechtsseiten */
.fahrplan-karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); padding: 1.25rem 1.25rem 1.25rem; margin: 0 0 1.5rem; max-width: 34rem; }
.fahrplan-karte h2 { margin: 0 0 0.9rem; font-size: 1.15rem; }
.fahrplan { list-style: none; margin: 0; padding: 0; }
.fahrplan li { display: grid; grid-template-columns: 1.9rem 1fr auto; gap: 0.75rem; align-items: center; padding: 0.45rem 0; border-top: 1px dashed var(--linie); }
.fahrplan-haken { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: #1f8a4c; color: #fff; }
.fahrplan-haken .ic { width: 1.3rem; height: 1.3rem; }
.fahrplan li:first-child { border-top: 0; padding-top: 0; }
.fahrplan li i { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; font-style: normal; font-weight: 700; font-size: 0.85rem; border: 2px solid var(--linie); color: var(--gedaempft); background: var(--papier); }
.fahrplan li i .ic { width: 1rem; height: 1rem; }
.fahrplan li strong { display: block; font-size: 0.98rem; }
.fahrplan li span { display: block; color: var(--gedaempft); font-size: 0.92rem; line-height: 1.45; }
.fahrplan-erledigt i { border-color: #1f8a4c; color: #1f8a4c; }
.fahrplan-erledigt strong { color: var(--gedaempft); }
.fahrplan-aktuell i { border-color: var(--tinte); color: var(--tinte); }
.fahrplan-aktuell strong { color: var(--tinte); }
.fahrplan-aktuell span { color: var(--text); }
.hinweis { background: var(--hinweis); border: 1.5px dashed #c98f0d; border-radius: var(--rund); padding: 1rem 1.25rem; margin: 0 0 1.5rem; color: var(--text); }
.hinweis p { margin: 0; }
.hinweis p + p { margin-top: 0.5em; }

/* Fragen und Antworten */
.faq { max-width: 44rem; }
.recht-sprung { font-size: 0.95rem; color: var(--gedaempft); }
.recht-klapp { background: var(--karte); border: 1px solid var(--linie); border-radius: 0.9rem; margin: 0 0 1rem; padding: 0 1.25rem; }
.recht-klapp summary { cursor: pointer; padding: 1rem 0; font-weight: 600; font-family: var(--schrift-titel); font-size: 1.1rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.recht-klapp summary::-webkit-details-marker { display: none; }
.recht-klapp summary::after { content: "+"; font-weight: 400; color: var(--tinte); font-size: 1.4rem; line-height: 1; }
.recht-klapp[open] summary::after { content: "–"; }
.recht-klapp[open] summary { border-bottom: 1px solid var(--linie); margin-bottom: 1rem; }
.recht-klapp h3:first-of-type { margin-top: 0; }
.faq details { background: var(--karte); border: 1px solid var(--linie); border-radius: 0.9rem; margin-bottom: 0.75rem; padding: 0 1.25rem; }
.faq summary { cursor: pointer; padding: 1rem 0; font-weight: 600; font-family: var(--schrift-titel); font-size: 1.1rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; color: var(--tinte); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 1rem; color: var(--gedaempft); }

/* Zwei Spalten Text und Shirt auf Artikelseiten */
.zweispaltig { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2.5rem; align-items: start; }

/* Fuß */
.fuss { background: var(--text); color: #e9e4da; margin-top: 3.5rem; font-size: 0.95rem; }
.fuss-innen { padding-top: 2.5rem; padding-bottom: 2rem; }
.fuss-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 2rem 1.5rem; padding-bottom: 2rem; border-bottom: 1px dashed rgba(250, 246, 239, 0.28); }
.fuss h3 { font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--papier); margin: 0 0 0.75rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 0.4rem; }
.fuss a { color: var(--sonne); text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; }
.fuss p { margin: 0; }

@media (max-width: 56rem) {
  .buehne { grid-template-columns: 1fr; padding-top: 2.5rem; }
  .shirt-buehne { order: -1; }
  .shirt-buehne svg { width: min(100%, 20rem); }
  .schritte { grid-template-columns: 1fr; }
  .schritte::before { left: 2.85rem; right: auto; top: 2rem; bottom: 2rem; border-top: 0; border-left: 2px dashed var(--faden); }
  .streifen { grid-template-columns: 1fr; }
  .streifen .handlung { text-align: left; }
  .zweispaltig { grid-template-columns: 1fr; }
  .vergleich { grid-template-columns: 1fr; }
}
/* Menü-Schalter auf dem Smartphone: runder Icon-Knopf ohne Rahmen in Tinte, der beim
   Öffnen zum Schließen-Kreuz wird; die Navigation klappt als weiße Karte darunter auf. */
.navi-schalter { display: none; }
@media (max-width: 40rem) {
  .kopf-innen { flex-wrap: wrap; }
  .navi-schalter {
    display: inline-flex; align-items: center; justify-content: center; margin-left: auto;
    width: 2.75rem; height: 2.75rem; padding: 0; background: none; border: 0; border-radius: 50%;
    color: var(--tinte); cursor: pointer;
  }
  .navi-schalter:hover, .navi-schalter[aria-expanded="true"] { background: var(--papier-dunkel); }
  .navi-schalter .ic { width: 1.7rem; height: 1.7rem; vertical-align: 0; }
  .navi-schalter .ic-zu, .navi-schalter[aria-expanded="true"] .ic-auf { display: none; }
  .navi-schalter[aria-expanded="true"] .ic-zu { display: block; }
  .navi { order: 3; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; }
  .navi:not(.navi-offen) a:not(.knopf) { display: none; }
  .navi.navi-offen { background: var(--karte); border-radius: var(--rund); padding: 0.35rem 1.25rem; margin: 0.25rem 0 0.75rem; box-shadow: 0 10px 30px rgba(28, 36, 48, 0.10); }
  .navi.navi-offen a:not(.knopf) { padding: 0.85rem 0; border-top: 1px solid var(--linie); font-size: 1.1rem; font-weight: 600; }
  .navi.navi-offen a:not(.knopf):first-child { border-top: 0; }
  .navi.navi-offen .knopf { margin: 0.75rem 0 0.6rem; justify-content: center; }
  .navi:not(.navi-offen) .knopf { position: absolute; right: 4rem; top: 0.95rem; }
  .kopf { position: relative; }
}
h1, h2 { overflow-wrap: anywhere; hyphens: auto; }
.fakten { color: var(--gedaempft); font-size: 0.95rem; margin: 0.9rem 0 0; }
.ausfuellen { display: inline-block; width: 12rem; max-width: 100%; border-bottom: 1px solid currentColor; vertical-align: baseline; }

/* Wizard neu (Plan Bestellablauf): Auswahlkarten für Bestell-/Zahlungsmodus und
   Abstimmung, Felder nebeneinander (PLZ/Ort), Schneller-Anfrage, längere Fortschrittsleiste */
.auswahl-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.85rem; margin-bottom: 1.25rem; }
.auswahl-karte {
  display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: start;
  border: 1.5px solid var(--linie); border-radius: var(--rund); padding: 1rem 1.1rem;
  background: var(--karte); cursor: pointer;
}
.auswahl-karte:has(input:checked) { border-color: var(--tinte); background: #eef2fd; }
.auswahl-karte input { margin: 0.3rem 0 0; width: 1.1rem; height: 1.1rem; accent-color: var(--tinte); grid-row: span 2; }
.auswahl-titel { font-weight: 700; font-family: var(--schrift-titel); }
.auswahl-text { color: var(--gedaempft); font-size: 0.95rem; }
.feld-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.feld-zeile .feld-kurz { max-width: 9rem; }
@media (max-width: 30rem) { .feld-zeile { grid-template-columns: 1fr; } }
.knopf-klein { padding: 0.45rem 0.95rem; font-size: 0.9rem; }
.schneller { max-width: 44rem; background: var(--karte); border: 1.5px dashed var(--faden); border-radius: var(--rund); padding: 0 1.25rem; margin: 1.5rem 0; }
.schneller summary { cursor: pointer; padding: 1rem 0; font-weight: 700; font-family: var(--schrift-titel); }
.schneller > p { color: var(--gedaempft); }
.schneller form { padding-bottom: 1rem; }
.assistent-fortschritt-lang { max-width: 44rem; }
.assistent-fortschritt-lang li { font-size: 0.72rem; }
.assistent-fortschritt-lang li:not(:last-child)::after { left: calc(50% + 1.1rem); right: calc(-50% + 1.1rem); }
@media (max-width: 40rem) { .assistent-fortschritt-lang .badge { width: 1.6rem; height: 1.6rem; font-size: 0.85rem; } .assistent-fortschritt-lang li:not(:last-child)::after { top: 0.8rem; } }

/* Bestellliste (Modus B): Matrix Größe × Farbe je Artikel, Namensliste */
.matrix { overflow-x: auto; margin: 0 0 1.5rem; }
.matrix table { border-collapse: collapse; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); }
.matrix th, .matrix td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--linie); text-align: center; }
.matrix th { font-family: var(--schrift-titel); font-weight: 700; background: var(--papier-dunkel); white-space: nowrap; }
.matrix th:first-child, .matrix td:first-child { text-align: left; }
.matrix input { width: 4rem; padding: 0.4rem 0.5rem; text-align: center; }
.matrix tfoot td { font-weight: 700; border-bottom: 0; }
.namensliste { display: grid; grid-template-columns: 1.4fr 1.6fr 1.2fr 1fr 1fr auto; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.namensliste.ohne-email { grid-template-columns: 1.6fr 1.4fr 1fr 1fr auto; }
.namensliste input, .namensliste select { padding: 0.5rem 0.6rem; }
.namensliste-kopf { font-size: 0.85rem; font-weight: 650; color: var(--gedaempft); }
@media (max-width: 48rem) { .namensliste, .namensliste.ohne-email { grid-template-columns: 1fr 1fr; padding-bottom: 0.75rem; border-bottom: 1px dashed var(--linie); } .namensliste-kopf { display: none; } }
.dankeschoen-artikel { background: var(--karte); border: 1.5px solid var(--linie); border-radius: var(--rund); padding: 1.25rem; margin-bottom: 1rem; }
.dankeschoen-artikel:has(input[type="checkbox"]:checked) { border-color: var(--tinte); }
.dankeschoen-preis { font-family: var(--schrift-titel); font-weight: 800; color: var(--tinte); font-size: 1.3rem; }
.dankeschoen-preis s { color: var(--gedaempft); font-weight: 500; font-size: 1rem; margin-right: 0.4rem; }

/* Backstage: Beitragsübersicht als Karten mit Bild, Kicker, Titel und Anriss */
.backstage-karten { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.backstage-karte { padding: 0; overflow: hidden; display: flex; max-width: 36rem; }
.backstage-karte-link { display: flex; flex-direction: column; width: 100%; text-decoration: none; color: var(--text); }
.backstage-karte-link:hover .backstage-karte-titel { color: var(--tinte); }
.backstage-karte-bild { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-bottom: 1px solid var(--linie); }
.backstage-karte-text { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.25rem 1.5rem 1.5rem; }
.backstage-karte-text .vorzeile { font-weight: 600; color: var(--tinte); letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.8rem; }
.backstage-karte-titel { font-family: var(--schrift-titel); font-weight: 700; font-size: 1.3rem; line-height: 1.15; letter-spacing: -0.01em; }
.backstage-karte-anriss { color: var(--gedaempft); }
.backstage-datum { color: var(--gedaempft); font-size: 0.9rem; }

/* Backstage: einzelner Beitrag */
.backstage-zurueck { margin-bottom: 1.25rem; font-size: 0.95rem; }
.backstage-zurueck a { text-decoration: none; font-weight: 500; }
.backstage-zurueck a:hover { text-decoration: underline; }
.backstage-kopf .vorzeile { display: inline-block; font-weight: 600; color: var(--tinte); letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.85rem; margin-bottom: 0.75rem; }
.backstage-kopf .backstage-datum { margin: -0.25rem 0 1rem; }
.backstage-einleitung p { font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.5; color: var(--gedaempft); }
.backstage-einleitung p:last-child { margin-bottom: 0; }
.backstage-bild { max-width: 44rem; margin: 0 0 1rem; }
.backstage-bild img { display: block; width: 100%; max-height: 32rem; object-fit: cover; border-radius: var(--rund); border: 1px solid var(--linie); }
.backstage-bild figcaption { color: var(--gedaempft); font-size: 0.9rem; margin-top: 0.5rem; }
.backstage-text { padding-top: 2rem; }
.backstage-abschnitt + .backstage-abschnitt { margin-top: 2.25rem; }
.backstage-abschnitt h2 { margin-top: 0; }
.backstage-faq { padding-top: 1rem; }
.backstage-faq .faq details p:last-child { margin-bottom: 1rem; }
.backstage-cta { padding-top: 0; }
.backstage-cta p { margin: 0; }

/* Cookie-Banner (E52): unten fixierte Karte im Werkstatt-Stil. Erscheint nur, solange
   einwilligungspflichtige Dienste hinterlegt sind und noch keine Wahl getroffen wurde.
   Kontraste: Text #1c2430 und Tinte #b8215a auf Karte #ffffff, beide geprüft (kontrast.php). */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 0 1rem 1rem; }
.cookie-banner-innen {
  max-width: 44rem; margin: 0 auto;
  background: var(--karte); color: var(--text);
  border: 1.5px dashed var(--faden); border-radius: var(--rund);
  padding: 1.25rem 1.5rem; box-shadow: 0 12px 36px rgba(28, 36, 48, 0.22);
}
.cookie-banner-titel { font-family: var(--schrift-titel); font-weight: 800; font-size: 1.15rem; margin-bottom: 0.35rem; }
.cookie-banner p { margin-bottom: 0.75rem; font-size: 0.98rem; }
.cookie-banner a { color: var(--tinte); }
.cookie-banner-knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-end; }
.cookie-banner-knoepfe .knopf { padding: 0.7rem 1.3rem; font-size: 1rem; }
@media (max-width: 40rem) {
  .cookie-banner { padding: 0 0.5rem 0.5rem; }
  .cookie-banner-innen { padding: 1rem 1.1rem; }
  .cookie-banner-knoepfe .knopf { flex: 1 1 100%; justify-content: center; }
}

/* Motivseite (E49): Motivliste mit Position, Positionskarten im Upload, Tipp-Blase,
   Hilfe-Wege. Kontraste: Text #1c2430 und Gedämpft #55606b auf Karte #ffffff und auf
   der gewählten Karte #eef2fd, Warnung #92400e auf Karte #ffffff (7,1:1) – alle geprüft. */
.motiv-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; list-style: none; margin: 0 0 1.25rem; padding: 0; }
.motiv-karte { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; background: var(--karte); border: 1.5px solid var(--linie); border-radius: var(--rund); padding: 1rem; }
.motiv-karte-neu { border-color: var(--tinte); }
.motiv-vorschau { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; background: var(--papier); border: 1px solid var(--linie); border-radius: 0.75rem; overflow: hidden; text-decoration: none; }
.motiv-vorschau img { width: 100%; height: 100%; object-fit: contain; display: block; }
.motiv-pdf { font-family: var(--schrift-titel); font-weight: 800; color: var(--gedaempft); letter-spacing: 0.08em; }
.motiv-text p { margin: 0 0 0.35rem; font-size: 0.95rem; }
.motiv-position { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; }
.motiv-position .ic-position { flex: none; color: var(--tinte); width: 1.75rem; height: 1.75rem; vertical-align: 0; }
.motiv-preis { font-weight: 650; }
.motiv-inklusive { color: var(--tinte); }
.motiv-entfernen { margin-top: 0.5rem; }
.motiv-entfernen .knopf { margin-top: 0; }
.motiv-preishinweis { max-width: 44rem; margin-bottom: 2rem; }

.position-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.75rem; }
/* .feld label setzt display:block – deshalb hier mit .feld davor, damit das Raster gewinnt */
.feld .position-karte {
  display: grid; justify-items: center; text-align: center; gap: 0.25rem; margin: 0;
  border: 1.5px solid var(--linie); border-radius: var(--rund); padding: 0.9rem 0.6rem 0.8rem;
  background: var(--karte); cursor: pointer; font-weight: 500;
}
.position-karte:has(input:checked) { border-color: var(--tinte); background: #eef2fd; }
.position-karte:has(input:focus-visible) { outline: 3px solid var(--tinte); outline-offset: 3px; }
.position-karte input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.position-karte .ic-position { color: var(--text); width: 2.75rem; height: 2.75rem; vertical-align: 0; }
.position-karte:has(input:checked) .ic-position { color: var(--tinte); }
.position-name { font-weight: 700; font-family: var(--schrift-titel); }
.position-text { color: var(--gedaempft); font-size: 0.85rem; }

.tipp { max-width: 44rem; background: var(--karte); border: 1.5px dashed var(--faden); border-radius: var(--rund); padding: 1.1rem 1.35rem; margin: 2rem 0 1.5rem; position: relative; }
.tipp::before { content: ""; position: absolute; left: 2rem; top: -0.7rem; width: 1.2rem; height: 1.2rem; background: var(--karte); border-left: 1.5px dashed var(--faden); border-top: 1.5px dashed var(--faden); transform: rotate(45deg); }
.tipp p { margin: 0; }
.tipp-titel { display: flex; align-items: center; gap: 0.45rem; font-weight: 700; font-family: var(--schrift-titel); margin-bottom: 0.35rem !important; }
.tipp-titel .ic { color: var(--tinte); flex: none; }
.motiv-hinweise { max-width: 44rem; }
.motiv-hinweise p { margin-bottom: 0.6rem; }
.motiv-wege { max-width: 44rem; }
.motiv-wege > p { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.motiv-wege > p .knopf { margin-top: 0; }
.motiv-weg { background: var(--karte); border: 1.5px solid var(--linie); border-radius: var(--rund); padding: 0 1.25rem; margin: 0.75rem 0; }
.motiv-weg summary { cursor: pointer; padding: 0.9rem 0; font-weight: 700; font-family: var(--schrift-titel); }
.motiv-weg .formular { padding-bottom: 1rem; }
@media (max-width: 30rem) { .motiv-karte { grid-template-columns: 1fr; } .motiv-vorschau { max-width: 10rem; } }

/* Motive mit Position an der Mockup-Freigabe (templates/verlauf.php) */
.verlauf-motive { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.verlauf-motive li { display: flex; align-items: center; gap: 0.4rem; }
.verlauf-motive .ic-position { color: var(--tinte); flex: none; width: 1.5rem; height: 1.5rem; vertical-align: 0; }

/* Preisübersicht auf der Bestellseite: Grundpreis + Aufpreise je weiterem Motiv (E49) */
.preisuebersicht { max-width: 44rem; margin-bottom: 2rem; }
.preisuebersicht h2 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.preisliste { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.preisliste li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding: 0.6rem 0; border-bottom: 1px dashed var(--linie); }
.preisliste-name { font-weight: 650; }
.preisliste-rechnung { text-align: right; }
.preisliste-rechnung .gedaempft { display: block; font-size: 0.85rem; }