/* Textildruck-Demo · Look nach Brand Book 3.0 („Big Tech“, Maßstab: globals.css der Website).
   Hell ist Standard; Dunkel nur über den Umschalter (data-theme="dark" auf <html>).
   Alle Farben über Tokens; Raster 8 px; keine externen Ressourcen. */

/* ---------- Schriften (lokal, variabel) ---------- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  /* Markenwerte (fest) */
  --ink: #070707;
  --violet: #7E3BED;
  --violet-hell: #B899F9;
  --violet-dunkel: #5A22B8;
  --paper: #F4F3F8;
  --creme: #FBF7EC;
  --lime: #C6FF34;
  --weiss: #FFFFFF;

  /* Rollen (Hell) */
  --grund: var(--weiss);
  --grund-2: var(--paper);
  --karte: var(--weiss);
  --text: var(--ink);
  --text-leise: #4B4853;
  --linie: rgba(7, 7, 7, 0.10);
  --linie-2: rgba(7, 7, 7, 0.18);
  --akzent-text: var(--violet-dunkel);
  --akzent-tint: #F0E9FC;
  --aktion: var(--violet);
  --aktion-text: var(--weiss);
  --aktion-hover: #6A2BD9;
  --fokus: var(--violet-dunkel);
  --schatten: 0 24px 48px -32px rgba(60, 20, 140, 0.28), 0 2px 8px rgba(7, 7, 7, 0.04);

  /* Meldungen: ruhige Flächen, Text immer in Ink, Farbe nur als Randbalken */
  --ok-grund: #F0E9FC;    --ok-balken: var(--violet);
  --fehler-grund: var(--creme); --fehler-balken: #B42318; --fehler-text: #B42318;
  --hinweis-grund: var(--paper); --hinweis-balken: #4B4853;

  /* Violett-Fläche (Abschluss): Hell-Variante */
  --flaeche: linear-gradient(160deg, #EFE8FC 0%, #E4D9FA 100%);
  --flaeche-text: var(--ink);
  --flaeche-leise: #4B4853;
  --flaeche-punkt: var(--violet);
  --flaeche-fokus: var(--violet-dunkel);

  --fuss-grund: #DFD2F8;
  --fuss-text: #3A1688;

  /* Schrift */
  --schrift-titel: "Bricolage Grotesque", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --schrift-text: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Raster 8 px */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s8: 64px; --s10: 80px; --s12: 96px;
  --rand: clamp(16px, 4vw, 48px);
  --breite: 1200px;
  --radius-s: 12px; --radius-m: 16px; --radius-l: 24px; --radius-xl: 32px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --grund: var(--ink);
  --grund-2: #0E0E10;
  --karte: #151518;
  --text: #FAFAFA;
  --text-leise: #B0B0B8;
  --linie: rgba(255, 255, 255, 0.10);
  --linie-2: rgba(255, 255, 255, 0.20);
  --akzent-text: var(--violet-hell);
  --akzent-tint: #1C1030;
  --aktion: var(--lime);
  --aktion-text: var(--ink);
  --aktion-hover: #D4FF66;
  --fokus: var(--violet-hell);
  --schatten: 0 24px 60px -32px rgba(0, 0, 0, 0.8);

  --ok-grund: #1C1030;   --ok-balken: var(--violet-hell);
  --fehler-grund: #22180F; --fehler-balken: #F97066; --fehler-text: #F97066;
  --hinweis-grund: #151518; --hinweis-balken: #B0B0B8;

  --flaeche: linear-gradient(105deg, #5B25C4 0%, #3A1384 100%);
  --flaeche-text: var(--weiss);
  --flaeche-leise: #F3EEFF;
  --flaeche-punkt: var(--lime);
  --flaeche-fokus: var(--weiss);

  --fuss-grund: #1B1752;
  --fuss-text: #D2C2FC;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: clamp(16px, 0.95rem + 0.25vw, 18px);
  line-height: 1.6;
  font-feature-settings: "tnum" 0;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; }
h1, h2, h3 {
  font-family: var(--schrift-titel);
  margin: 0;
  text-wrap: balance;
}
h1 { font-weight: 800; font-size: clamp(40px, 2rem + 4.5vw, 96px); line-height: 0.95; letter-spacing: -0.04em; }
h2 { font-weight: 700; font-size: clamp(24px, 1.2rem + 1.4vw, 36px); line-height: 1.1; letter-spacing: -0.02em; }
h3 { font-weight: 700; font-size: clamp(18px, 1rem + 0.5vw, 22px); line-height: 1.2; letter-spacing: -0.01em; }
p { margin: 0; }
ul { margin: 0; padding: 0; }
a { color: var(--akzent-text); text-underline-offset: 0.18em; }

:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
}
/* Nur programmatische Fokusziele (Ergebnis-/Angebotsüberschrift, Sprungziel #demo) – nicht die Reiter mit tabindex="-1". */
h2[tabindex="-1"]:focus, section[tabindex="-1"]:focus { outline: none; }
h2[tabindex="-1"]:focus-visible { outline: 3px solid var(--fokus); outline-offset: 4px; border-radius: 6px; }
section[tabindex="-1"]:focus-visible { outline: 3px solid var(--fokus); outline-offset: -3px; }

.nur-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.sprunglink {
  position: absolute;
  left: var(--rand);
  top: -100px;
  z-index: 10;
  padding: var(--s1) var(--s2);
  border-radius: 999px;
  background: var(--text);
  color: var(--grund);
  font-weight: 600;
  text-decoration: none;
}
.sprunglink:focus { top: var(--s1); }

.innen {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* Leere Platzhalter-Abschnitte (Inhalt kommt in Aufgabe 8b) klappen unsichtbar zusammen. */
.slot:empty { display: none; }

/* ---------- Kopf ---------- */
.seitenkopf {
  border-bottom: 1px solid var(--linie);
  background: var(--grund);
}
.seitenkopf .innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  min-height: 72px;
  padding-block: var(--s2);
}
.logo-verweis { display: inline-flex; align-items: center; border-radius: 6px; }
.logo { display: block; height: clamp(22px, 1rem + 0.8vw, 30px); width: auto; }
.logo-dunkel { display: none; }
:root[data-theme="dark"] .logo-hell { display: none; }
:root[data-theme="dark"] .logo-dunkel { display: block; }

.theme-knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: 44px;
  padding: 0 var(--s2);
  border: 1px solid var(--linie-2);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: 600 15px/1 var(--schrift-text);
  cursor: pointer;
}
.theme-knopf:hover { border-color: var(--text); }
.theme-symbol {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: clamp(48px, 2rem + 5vw, 112px); }

#hero { padding-block: clamp(48px, 2rem + 6vw, 128px) clamp(32px, 1rem + 3vw, 64px); }
#hero h1 { max-width: 14ch; }

#demo {
  background: var(--grund-2);
  padding-block: clamp(32px, 1rem + 4vw, 80px) clamp(48px, 2rem + 5vw, 112px);
}

/* ---------- Reiter: Pillen-Segmentschalter ---------- */
.reiter { margin-bottom: clamp(24px, 1rem + 2vw, 48px); }
.reiter [role="tablist"] {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--karte);
  max-width: 100%;
}
.reiter-knopf {
  min-height: 44px;
  padding: 0 clamp(14px, 0.5rem + 1vw, 24px);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-leise);
  font: 600 clamp(15px, 0.85rem + 0.2vw, 16px)/1.1 var(--schrift-text);
  white-space: nowrap;
  cursor: pointer;
}
.reiter-knopf:hover { color: var(--text); }
.reiter-knopf:focus-visible { outline-offset: 2px; border-radius: 999px; }
.reiter-knopf[aria-selected="true"] {
  background: var(--text);
  color: var(--grund);
}

/* Pflichthinweis direkt unter den Reitern (zusätzlich zum Fuß) */
.demo-hinweis {
  margin-top: var(--s2);
  color: var(--text-leise);
  font-size: 14px;
  line-height: 1.45;
}

/* ---------- Ansichten (Panels) ---------- */
.ansicht > * + * { margin-top: var(--s4); }
.ansicht:focus-visible { outline-offset: 8px; border-radius: var(--radius-l); }

.bereich {
  padding: clamp(24px, 1rem + 1.5vw, 40px);
  border: 1px solid var(--linie);
  border-radius: var(--radius-l);
  background: var(--karte);
  box-shadow: var(--schatten);
}
.bereich > * + * { margin-top: var(--s3); }
.bereich > h2 + * { margin-top: var(--s3); }

@media (min-width: 1024px) {
  #ansicht-shop {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s4);
    align-items: start;
  }
  #ansicht-shop > * + * { margin-top: 0; }
  #ansicht-shop .bereich-auswahl { grid-column: 1; grid-row: 1; }
  #ansicht-shop .bereich-mengen { grid-column: 1; grid-row: 2; }
  #ansicht-shop .bereich-ergebnis { grid-column: 2; grid-row: 1 / span 2; }
}

/* Brennpunkt der Shop-Ansicht: das Ergebnis */
.bereich-ergebnis {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--violet), var(--schatten);
}

/* ---------- Formularfelder ---------- */
.feldgruppe { display: grid; gap: var(--s1); }
.feldgruppe label, .menge-feld label {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
}
.feld {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--linie-2);
  border-radius: var(--radius-s);
  background: var(--grund);
  color: var(--text);
  font: 500 17px/1.2 var(--schrift-text);
  font-variant-numeric: tabular-nums;
}
.feld:hover { border-color: var(--text-leise); }
.feld:focus-visible { outline-offset: 2px; border-color: var(--fokus); }
.feld:disabled {
  background: var(--grund-2);
  color: var(--text-leise);
  border-style: dashed;
  cursor: not-allowed;
}
select.feld {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
  max-width: 360px;
}
.hinweis {
  display: block;
  color: var(--text-leise);
  font-size: 14px;
  line-height: 1.45;
}

/* ---------- Shop: Marke und Produktart ---------- */
.auswahl-filter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--s2);
  margin-bottom: var(--s2);
}

/* Quelle führt die Marke des Artikels nicht (Betrieb, Matrix) */
.matrix .nicht-gefuehrt { color: var(--text-leise); font-size: 15px; }

/* ---------- Shop: Artikelkarten ---------- */
.artikel-liste {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr));
  gap: var(--s2);
}
.artikel-karte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  height: 100%;
  min-height: 96px;
  padding: var(--s2) var(--s3) var(--s3);
  border: 1px solid var(--linie-2);
  border-radius: var(--radius-m);
  background: var(--karte);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.artikel-karte:hover { border-color: var(--text); }
.artikel-modell { font-family: var(--schrift-titel); font-weight: 700; font-size: 19px; line-height: 1.2; letter-spacing: -0.01em; }
.artikel-farbe { color: var(--text-leise); font-size: 15px; }
.artikel-grund {
  margin-top: var(--s1);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fehler-text);
}
.artikel-karte.ist-gewaehlt {
  border-color: var(--violet);
  box-shadow: inset 0 0 0 1px var(--violet);
  background: var(--akzent-tint);
}
.artikel-karte.ist-nicht-bestellbar {
  background: var(--grund-2);
  border-style: dashed;
}
.artikel-karte.ist-nicht-bestellbar .artikel-modell,
.artikel-karte.ist-nicht-bestellbar .artikel-farbe { color: var(--text-leise); }
.artikel-karte.ist-nicht-bestellbar.ist-gewaehlt { border-style: solid; }

/* ---------- Shop: Mengen ---------- */
.mengen-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr));
  gap: var(--s2);
}
.menge-feld { display: grid; gap: 6px; align-content: start; }
.menge-feld label { font-family: var(--schrift-titel); font-size: 20px; font-weight: 700; }
.menge-feld.ist-deaktiviert label { color: var(--text-leise); }
.gesamtmenge {
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: clamp(20px, 1rem + 0.6vw, 24px);
  font-variant-numeric: tabular-nums;
}
#f-farben { max-width: 160px; }

.logo-platzhalter {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-inline: 0;
  margin-bottom: 0;
  padding: var(--s2) var(--s3);
  border-radius: var(--radius-m);
  background: var(--grund-2);
  color: var(--text-leise);
}
.logo-grafik { flex: none; width: 96px; height: 64px; }
.logo-platzhalter figcaption { display: grid; gap: 2px; font-size: 15px; line-height: 1.4; }
.druckposition { color: var(--text); font-weight: 600; }

/* ---------- Shop: Ergebnis ---------- */
.lieferzeit-gesamt {
  font-family: var(--schrift-titel);
  font-weight: 800;
  font-size: clamp(24px, 1.1rem + 0.9vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
}
.hinweis-teillieferung, .keine-alternativen { color: var(--text-leise); }
.max-lieferbar > * + *, .alternativen > * + * { margin-top: var(--s2); }
.max-lieferbar ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}
.max-lieferbar li {
  padding: 4px 12px;
  border: 1px solid var(--linie-2);
  border-radius: 999px;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.alternativen-liste { list-style: none; display: grid; gap: var(--s2); }
.alternative {
  display: grid;
  gap: 4px;
  padding: var(--s2) var(--s3) var(--s3);
  border: 1px solid var(--linie-2);
  border-radius: var(--radius-m);
}
.alt-name { font-family: var(--schrift-titel); font-weight: 700; font-size: 18px; line-height: 1.25; }
.alt-preis, .alt-zeit { color: var(--text-leise); font-size: 15px; font-variant-numeric: tabular-nums; }
.alternative .knopf { justify-self: start; margin-top: var(--s1); }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--s3);
  border: 1px solid var(--text);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: 600 16px/1.2 var(--schrift-text);
  text-align: center;
  cursor: pointer;
}
.knopf:hover { background: var(--text); color: var(--grund); }
/* Freigeben: kräftig, aber Ink statt Violett – die einzige Hauptaktion der Seite ist „Erstgespräch buchen“. */
.knopf-primaer { background: var(--text); color: var(--grund); }
.knopf-primaer:hover { background: var(--akzent-text); border-color: var(--akzent-text); color: var(--grund); }
.knopf:disabled, .knopf:disabled:hover {
  background: transparent;
  border-style: dashed;
  border-color: var(--linie-2);
  color: var(--text-leise);
  cursor: not-allowed;
}

/* Hauptaktion: Violett-Pille (Hell) bzw. Lime-Pille (Dunkel) */
.pille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  min-height: 56px;
  padding: 0 var(--s4);
  border-radius: 999px;
  background: var(--aktion);
  color: var(--aktion-text);
  font: 700 clamp(17px, 1rem + 0.2vw, 19px)/1.2 var(--schrift-text);
  text-decoration: none;
}
.pille:hover { background: var(--aktion-hover); }

/* ---------- Meldungen ---------- */
.meldung {
  padding: var(--s2) var(--s3);
  border-left: 4px solid var(--hinweis-balken);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background: var(--hinweis-grund);
  color: var(--text);
  font-weight: 500;
  line-height: 1.5;
}
.meldung-ok { background: var(--ok-grund); border-left-color: var(--ok-balken); font-weight: 600; }
.meldung-fehler { background: var(--fehler-grund); border-left-color: var(--fehler-balken); }
.meldung-hinweis { background: var(--hinweis-grund); border-left-color: var(--hinweis-balken); }
.meldung-fehler p { margin: 0; font-weight: 600; }
.angebot-hinweise { list-style: none; display: grid; gap: var(--s1); }
.meldungsbereich:empty { margin-top: 0; }
.meldungsbereich > * + * { margin-top: var(--s1); }

/* ---------- Tabellen ---------- */
.tabellen-rahmen {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Luft, damit Fokusrahmen der Felder am Rand nicht abgeschnitten werden */
  padding: 6px;
  margin-inline: -6px;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
caption {
  caption-side: top;
  text-align: left;
  padding-bottom: var(--s1);
  color: var(--text-leise);
  font-size: 14px;
}
th, td {
  padding: 12px var(--s2) 12px 0;
  border-bottom: 1px solid var(--linie);
  text-align: left;
  vertical-align: middle;
}
thead th {
  padding-top: 0;
  border-bottom: 1px solid var(--linie-2);
  color: var(--text-leise);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}
tbody th { font-weight: 600; }
tbody tr:last-child > * { border-bottom: 0; }
th:last-child, td:last-child { padding-right: 0; }
.matrix .feld { min-width: 88px; max-width: 120px; }
/* Zahlenspalten rechtsbündig (Menge, Preise, Summen) */
.positionen td, .positionen thead th:not(:first-child),
.uebersicht td, .uebersicht thead th:not(:first-child),
.zuteilung td:nth-child(n+3), .zuteilung thead th:nth-child(n+3) { text-align: right; }
.zuteilung th, .zuteilung td { padding-right: 12px; }
/* Übersicht je Bezugsquelle: kompakt, damit sie die Ansicht nicht dominiert */
.uebersicht th, .uebersicht td { padding-block: 8px; }
.uebersicht tbody th, .uebersicht td { font-size: 15px; }
.uebersicht tbody th { font-weight: 500; }

/* ---------- Betrieb ---------- */
.ansicht-einleitung {
  max-width: 62ch;
  color: var(--text-leise);
  font-size: clamp(17px, 1rem + 0.3vw, 20px);
  line-height: 1.5;
}
.aktionen { display: flex; flex-wrap: wrap; gap: var(--s2); }
.abgleich {
  color: var(--text-leise);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.ansicht .aktionen + .abgleich { margin-top: var(--s2); }
.bereich-uebersicht > h2 + * { margin-top: var(--s3); }
.quelle-uebersicht + .quelle-uebersicht { margin-top: var(--s4); }
.quelle-uebersicht { max-width: 820px; }
.quelle-uebersicht > h3 + * { margin-top: var(--s2); }
/* Aufklappbare Übersicht je Quelle */
.aufklapper > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  min-height: 48px;
  padding: 10px var(--s2);
  border: 1px solid var(--linie-2);
  border-radius: var(--radius-s);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.aufklapper > summary::-webkit-details-marker { display: none; }
.aufklapper > summary::after {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  margin-right: 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.aufklapper[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.aufklapper > summary:hover { border-color: var(--text); }
.aufklapper > summary:focus-visible { outline-offset: 2px; }
.aufklapper > .tabellen-rahmen { margin-top: var(--s2); }
.feld-preis { max-width: 140px; }

/* ---------- Angebot ---------- */
.zeitstempel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) 12px;
}
/* Zeitstempel-Pille exakt nach Brand Book: links Ink mit Lime-Punkt, rechts Weiß; in jedem Theme gleich. */
.zeitstempel-pille {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  overflow: hidden;
  border-radius: 999px;
  font-family: var(--schrift-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.zeitstempel-zeit {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 10px 14px;
  background: #070707;
  color: #FFFFFF;
  white-space: nowrap;
}
.zeitstempel-punkt {
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #C6FF34;
}
.zeitstempel-text {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  background: #FFFFFF;
  color: #070707;
  border: 1px solid rgba(7, 7, 7, 0.14);
  border-left: 0;
  border-radius: 0 999px 999px 0;
  white-space: nowrap;
}
.zeitstempel-beispiel {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--linie-2);
  border-radius: 999px;
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.bereich-angebot { box-shadow: 0 0 0 2px var(--violet), var(--schatten); border-color: transparent; }
.einrichtung { color: var(--text-leise); font-variant-numeric: tabular-nums; }
.bereich-angebot > .einrichtung { margin-top: var(--s3); }
.bereich-angebot > .angebot-druck { margin-top: var(--s1); color: var(--text-leise); }
.summe-netto {
  font-family: var(--schrift-titel);
  font-weight: 800;
  font-size: clamp(28px, 1.1rem + 2.2vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
}
.bereich-angebot > .summe-netto { margin-top: var(--s1); }
.bereich-angebot > .lieferzeit-gesamt { margin-top: var(--s2); font-size: clamp(20px, 1rem + 0.6vw, 24px); font-weight: 700; }
.bereich-angebot > .hinweis-teillieferung { margin-top: var(--s1); }

.freigabe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
}
.freigabe .hinweis { flex: 1 1 260px; }

/* ---------- Hero ---------- */
#hero h1 { max-width: 17ch; }
.titel-punkt { color: var(--akzent-text); }
.hero-raster {
  display: grid;
  gap: var(--s6);
  margin-top: clamp(32px, 1rem + 3vw, 64px);
}
.hero-text { max-width: 56ch; }
.hero-text > * + * { margin-top: var(--s2); }
.hero-einleitung {
  font-size: clamp(19px, 1rem + 0.5vw, 22px);
  line-height: 1.5;
  font-weight: 500;
}
.hero-text > .hero-aktion { margin-top: var(--s4); }
@media (min-width: 960px) {
  .hero-raster {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s8);
    align-items: center;
  }
}

/* ---------- Bilder mit KI-Kennzeichnung ---------- */
.bild { position: relative; margin: 0; }
.bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-l);
  background: var(--grund-2);
}
/* Pflichtlabel nach Brand Book: als HTML-Text über dem Bild, nicht eingebrannt; in jedem Theme Ink/Weiß. */
.ki-label {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(7, 7, 7, 0.86);
  color: #FFFFFF;
  font: 700 11px/1 var(--schrift-text);
  letter-spacing: 0.08em;
  pointer-events: none;
}

/* ---------- Erklärtext ---------- */
.erklaer-block + .erklaer-block { margin-top: clamp(64px, 2rem + 6vw, 128px); }
.erklaer-block { display: grid; gap: var(--s4); }
.erklaer-text { max-width: 62ch; }
.erklaer-text > * + * { margin-top: var(--s2); }
.erklaer-text > h2 + * { margin-top: var(--s3); }
.erklaer-kern {
  font-size: clamp(18px, 1rem + 0.35vw, 21px);
  line-height: 1.5;
  font-weight: 500;
}
.schritte { list-style: none; padding: 0; counter-reset: schritt; }
.schritte li {
  position: relative;
  padding-left: 48px;
  counter-increment: schritt;
}
.schritte li + li { margin-top: var(--s2); }
.schritte li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--akzent-tint);
  color: var(--akzent-text);
  font: 700 16px/1 var(--schrift-titel);
}
.liste { padding-left: 1.25em; }
.liste li + li { margin-top: 4px; }
.erklaer-tabelle { margin-top: var(--s2); }
.erklaer-tabelle:focus-visible { outline-offset: 0; border-radius: var(--radius-s); }
.verfahren { min-width: 760px; font-size: 15px; line-height: 1.45; }
.verfahren th, .verfahren td { vertical-align: top; padding-block: var(--s2); }
.verfahren tbody th { font-family: var(--schrift-titel); font-size: 18px; font-weight: 700; }
.verfahren thead th:first-child, .verfahren tbody th { width: 120px; }
@media (min-width: 960px) {
  .erklaer-block {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s4) var(--s8);
    align-items: center;
  }
  .erklaer-block:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .erklaer-block:nth-child(even) > .bild { order: -1; }
  .erklaer-breit .erklaer-tabelle { grid-column: 1 / -1; }
  .erklaer-person { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- FAQ ---------- */
#faq { background: var(--grund-2); }
.faq-raster { display: grid; gap: var(--s4); }
.faq-kopf > p { margin-top: var(--s2); max-width: 40ch; color: var(--text-leise); }
.faq-eintrag { padding-block: var(--s4); border-top: 1px solid var(--linie-2); }
.faq-eintrag:last-child { border-bottom: 1px solid var(--linie-2); }
.faq-antwort { margin-top: var(--s2); max-width: 68ch; }
.faq-antwort > * + * { margin-top: var(--s2); }
.faq-antwort ul, .faq-antwort ol { padding-left: 1.25em; }
.faq-antwort li + li { margin-top: 4px; }
@media (min-width: 960px) {
  .faq-raster { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s8); align-items: start; }
  .faq-kopf { position: sticky; top: var(--s4); }
  .faq-eintrag:first-child { padding-top: 0; border-top: 0; }
}

/* ---------- Abschluss ---------- */
#abschluss {
  padding-block: clamp(48px, 2rem + 4vw, 96px);
}
.abschluss-flaeche {
  padding: clamp(40px, 1.5rem + 5vw, 104px) clamp(24px, 1rem + 4vw, 88px);
  border-radius: var(--radius-xl);
  background: var(--flaeche);
  color: var(--flaeche-text);
  --fokus: var(--flaeche-fokus);
}
.claim {
  font-family: var(--schrift-titel);
  font-weight: 800;
  font-size: clamp(48px, 1.5rem + 7vw, 132px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--flaeche-text);
}
.claim-punkt { color: var(--flaeche-punkt); }
.abschluss-zeile {
  margin-top: var(--s3);
  max-width: 40ch;
  color: var(--flaeche-leise);
  font-size: clamp(18px, 1rem + 0.5vw, 22px);
  line-height: 1.45;
}
.abschluss-flaeche .pille { margin-top: var(--s5); }

/* ---------- Fuß ---------- */
.seitenfuss {
  background: var(--fuss-grund);
  color: var(--fuss-text);
  font-size: 15px;
}
.seitenfuss .innen { padding-block: var(--s4); }
.fuss-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s3); }
.fuss-links a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Schmal: Tabellen als gestapelte Karten ---------- */
@media (max-width: 599px) {
  .bereich { border-radius: var(--radius-m); }
  .reiter [role="tablist"] { display: flex; width: 100%; }
  .reiter-knopf { flex: 1 1 auto; padding: 0 10px; }

  .tabellen-rahmen:has(.matrix, .positionen) { overflow-x: visible; }
  .matrix, .positionen, .matrix tbody, .positionen tbody,
  .matrix tr, .positionen tr, .matrix td, .positionen td,
  .matrix tbody th, .positionen tbody th { display: block; width: 100%; }
  .matrix caption, .positionen caption { display: block; }
  .matrix thead, .positionen thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .matrix tr, .positionen tr {
    padding: var(--s2);
    border: 1px solid var(--linie);
    border-radius: var(--radius-s);
    background: var(--grund);
  }
  .matrix tr + tr, .positionen tr + tr { margin-top: 12px; }
  .matrix tbody th, .positionen tbody th {
    padding: 0 0 var(--s1);
    border-bottom: 0;
    font-family: var(--schrift-titel);
    font-size: 17px;
    font-weight: 700;
  }
  .matrix td, .positionen td {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s2);
    padding: 6px 0;
    border-bottom: 0;
    text-align: right;
  }
  .matrix td::before, .positionen td::before {
    content: attr(data-label);
    color: var(--text-leise);
    font-size: 14px;
    text-align: left;
  }
  /* Kleine Tabellen (Zuteilung, Übersicht) bleiben Tabellen, nur enger gesetzt */
  .zuteilung th, .zuteilung td, .uebersicht th, .uebersicht td { padding: 8px 8px 8px 0; }
  .zuteilung tbody th, .zuteilung td, .uebersicht tbody th, .uebersicht td { font-size: 14px; }
  .zuteilung thead th, .uebersicht thead th { font-size: 11px; letter-spacing: 0.06em; }
  .zuteilung th:last-child, .zuteilung td:last-child, .uebersicht th:last-child, .uebersicht td:last-child { padding-right: 0; }
  /* Matrix kompakt: Größen im Dreier-Raster, Beschriftung über dem Feld */
  .matrix tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .matrix tbody th { grid-column: 1 / -1; padding-bottom: 0; }
  .matrix td { grid-template-columns: 1fr; gap: 4px; padding: 0; text-align: left; }
  .matrix td:last-child { grid-column: 1 / -1; }
  .matrix td.nicht-gefuehrt { grid-column: 1 / -1; }
  .matrix td.nicht-gefuehrt::before { content: none; }
  .matrix td::before { font-size: 13px; }
  .matrix .feld { width: 100%; min-width: 0; max-width: none; }
  .matrix td:last-child .feld { max-width: 160px; }

  /* Verfahrenstabelle im Erklärtext: je Verfahren eine Karte */
  .erklaer-tabelle { overflow-x: visible; }
  .verfahren, .verfahren tbody, .verfahren tr, .verfahren td, .verfahren tbody th { display: block; width: 100%; min-width: 0; }
  .verfahren caption { display: block; }
  .verfahren thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .verfahren tr { padding: var(--s2); border: 1px solid var(--linie); border-radius: var(--radius-s); background: var(--grund); }
  .verfahren tr + tr { margin-top: 12px; }
  .verfahren tbody th { width: 100%; padding: 0 0 var(--s1); border-bottom: 0; }
  .verfahren td { padding: 6px 0; border-bottom: 0; }
  .verfahren td::before { content: attr(data-label); display: block; color: var(--text-leise); font-size: 13px; font-weight: 600; }
}

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reiter-knopf, .knopf, .pille, .artikel-karte, .feld, .theme-knopf, .aufklapper > summary {
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  }
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}