/*
  Shirtfreunde, Gestaltung „Druckwerkstatt": warmer Papierton, Himbeere als Akzent,
  Sonne für Etiketten, Steppnähte an Knöpfen und Kanten, dunkle Fußzeile.

  Farbpaare und Kontraste (WCAG AA, geprüft mit bin/kontrast.php):
    Text        #1c2430 auf #faf6ef  14,6:1
    Gedämpft    #55606b auf #faf6ef   5,9:1
    Tinte       #b8215a auf #faf6ef   5,7:1
    Knopftext   #faf6ef auf #b8215a   5,7:1
    Etikett     #1c2430 auf #f7b733   8,6:1
    Fußtext     #e9e4da auf #1c2430  12,5:1
    Fußlink     #f7b733 auf #1c2430   8,6:1
    Tinte/Karte #b8215a auf #ffffff   6,2:1
*/
:root {
  --papier: #faf6ef;
  --papier-dunkel: #f1ebe0;
  --text: #1c2430;
  --gedaempft: #55606b;
  --tinte: #b8215a;
  --tinte-rgb: 184, 33, 90;
  --tinte-dunkel: #8f1946;
  --sonne: #f7b733;
  --faden: #b8aea0;
  --linie: #e2dbcf;
  --karte: #ffffff;   /* Karten, Felder, Tabellen – Design::berechnePalette() leitet sie vom Papier ab */
  --hinweis: #fff8e6; /* Hinweiskästen */
  --breite: 68rem;
  --rund: 1.25rem;
  --schrift-titel: "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; }
.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 */
.artikel-bilder { flex-direction: column; align-items: center; }
.artikel-galerie { list-style: none; margin: 1.5rem 0 0; padding: 0; width: min(100%, 30rem); }
.artikel-galerie img { box-shadow: none; transform: none; }

/* 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-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); }

/* 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 */
.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; }
.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; }
}
@media (max-width: 40rem) {
  .navi a:not(.knopf) { display: none; }
}

/* 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; }