/* tokens.css */
/* Design-Tokens: einzige Stelle für Farbwerte, Schriften, Abstände und Schatten. Gilt für alle Seiten. */
:root {
  /* Text und Marke */
  --color-ink: #2b4a7c;
  --color-ink-strong: #1d3b6c;
  --color-ink-soft: #6c7a8d;
  --color-accent: #a9bd27;
  --color-accent-dark: #849616;
  --color-accent-soft: #f4f7e1;  /* helle grüne Fläche: gewählte Option, „Auf der Anfrageliste“, Hinweise */
  --color-focus: #1d6f91;
  --color-error: #9b2c2c;

  /* Flächen */
  --color-canvas: #ffffff;
  --color-surface: #ffffff;
  --color-band: #f6f7f8;         /* abgesetzte Abschnitte (.section--band) */
  --color-image-bg: #f2f3f3;     /* Hintergrund hinter Produktfotos */
  --color-line: #e2e6ea;
  --color-input-line: #c5ccd4;
  --color-dot: #c9d0d8;

  /* Grüne Hervorhebungsfläche (Kontaktkarte im Impressum), Grün wie die Buttons.
     Schrift darauf dunkelblau wie auf den Buttons – Weiß wäre auf dem hellen Grün nicht lesbar. */
  --color-highlight: #a9bd27;
  --color-highlight-end: #9fb321;
  --color-on-highlight: #1d3b6c;
  --color-on-highlight-soft: #2b4a7c;
  --color-on-highlight-deco: rgba(255, 255, 255, .16);

  /* Studio-Hintergrund (Seitenkopf der Unterseiten, Platzhalter des Startseiten-Hero) */
  --color-studio-sky: #f3f3f2;
  --color-studio-mid: #fafaf9;
  --color-studio-floor: #ebebe9;
  --color-studio-light: #ffffff;

  /* Schrift */
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: Arial, Helvetica, sans-serif;

  /* Raster und Abstände */
  --container: 1320px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --radius-sm: 2px;

  /* Schatten und Bewegung */
  --shadow-card: 0 6px 22px rgba(29, 59, 108, .07);
  --shadow-card-hover: 0 14px 34px rgba(29, 59, 108, .13);
  --shadow-soft: 0 18px 60px rgba(29, 59, 108, .08);
  --shadow-overlay: 0 -12px 40px rgba(29, 59, 108, .16);   /* Einwilligungsbanner, Dialog */
  --transition: 180ms ease;
}

/* Fläche hinter dem Einstellungsdialog (components/consent.css). Eigene Regel, weil ::backdrop
   in älteren Browsern keine Variablen von :root erbt. */
::backdrop { --color-backdrop: rgba(29, 59, 108, .45); }

/* base.css */
/* Basis: Reset, Typografie und kleine, überall genutzte Bausteine. Farben aus tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--color-ink); background: var(--color-canvas); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

/* Eingabefelder (Katalogsuche, Kontaktformular) */
input, textarea { width: 100%; padding: .8rem .9rem; color: var(--color-ink); background: var(--color-surface); border: 1px solid var(--color-input-line); border-radius: var(--radius-sm); }
textarea { resize: vertical; }
input:focus, textarea:focus { border-color: var(--color-ink); outline: 3px solid var(--color-line); }

/* Überschriften: Serifenschrift, normale Stärke */
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--color-ink-strong); font-family: var(--font-display); font-weight: 400; }
h1, h2 { letter-spacing: -.02em; line-height: 1.1; }
h1 { font-size: clamp(2.2rem, 4.2vw, 3.5rem); }
h2 { font-size: clamp(1.85rem, 3.3vw, 3rem); }
h3 { line-height: 1.25; }

.container { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; }

/* Dachzeile über Überschriften */
.eyebrow { margin: 0 0 .7rem; color: var(--color-ink-soft); font-size: .7rem; font-weight: 700; letter-spacing: .3em; line-height: 1.4; text-transform: uppercase; }

/* Grüner, unterstrichener Textlink, meist mit {{icon:arrow}} */
.text-link { display: inline-flex; align-items: center; gap: .55rem; color: var(--color-accent-dark); font-size: .92rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em; transition: color var(--transition), gap var(--transition); }
.text-link:hover { color: var(--color-ink-strong); gap: .8rem; }

/* Inline-SVG-Icons (src/assets/icons/, im Build per {{icon:name}} eingesetzt).
   Größe über font-size des Elternelements, Farbe über color, Strichstärke über --icon-stroke. */
.icon { display: inline-block; flex: none; width: 1em; height: 1em; stroke-width: var(--icon-stroke, 2.5); }
.icon--arrow { width: 1.35em; --icon-stroke: 3.5; }

/* Das HTML-Attribut hidden gewinnt immer, auch gegen display-Regeln von Bausteinen (z. B. .button) */
[hidden] { display: none !important; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 999; top: .75rem; left: .75rem; padding: .75rem 1rem; background: var(--color-surface); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* layout.css */
/* Seitenübergreifende Layout-Bausteine: Abschnitte, Abschnittskopf, Brotkrümel, Seitenkopf der Unterseiten. */

/* Abschnitt; --band = hellgrau abgesetzt */
.section { padding-block: clamp(2.25rem, 4.5vw, 3rem); }
.section--band { background: var(--color-band); }

/* Abschnittskopf: Dachzeile + Titel links, optionaler Link rechts */
.section-heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 2rem; margin-bottom: clamp(1.1rem, 2vw, 1.5rem); }
.section-heading h2 { margin: 0; }

/* Brotkrümel (Produkt- und Kategorieseiten); auf schmalen Bildschirmen wird das Ende abgeschnitten */
.breadcrumbs { display: flex; gap: .5rem; overflow: hidden; padding-block: 1rem; color: var(--color-ink-soft); font-size: .82rem; white-space: nowrap; }
.breadcrumbs a { text-decoration: underline; text-underline-offset: .25em; }
.breadcrumbs a:hover { color: var(--color-ink-strong); }

/* Seitenkopf der Unterseiten: gleicher Studio-Hintergrund wie der Startseiten-Hero */
.page-hero {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3.5rem);
  background:
    radial-gradient(ellipse 60% 90% at 50% 0%, var(--color-studio-light) 0%, transparent 70%),
    linear-gradient(180deg, var(--color-studio-sky) 0%, var(--color-studio-mid) 65%, var(--color-studio-floor) 100%);
  border-bottom: 1px solid var(--color-line);
}
.page-hero h1 { max-width: 900px; margin-bottom: 0; }
.page-hero p:not(.eyebrow) { max-width: 720px; margin: 1rem 0 0; color: var(--color-ink-soft); font-size: clamp(1rem, 1.4vw, 1.1rem); }

/* components/header.css */
/* Kopf- und Fußbereich aller Seiten: Infoleiste, Kopfzeile mit Navigation, Footer.
   Templates: partials/header.html, partials/footer.html · Mobile Navigation: js/mobile-nav.js
   · Zähler der Anfrageliste: js/inquiry-list/list-controls.js */

/* Infoleiste (erst ab 900 px sichtbar) */
.utility-bar { display: none; min-height: 40px; border-bottom: 1px solid var(--color-line); background: var(--color-canvas); font-size: .78rem; }
.utility-bar__inner { display: flex; align-items: center; gap: 2rem; min-height: 40px; }
.utility-bar a, .utility-bar span { display: inline-flex; align-items: center; gap: .5rem; }
.utility-bar .icon { color: var(--color-ink); font-size: 1.05em; }
.utility-bar__claim { margin-left: auto; font-size: .64rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; }

/* Kopfzeile */
.site-header { position: sticky; z-index: 100; top: 0; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--color-line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 76px; }
.site-logo img { width: clamp(170px, 23vw, 270px); height: auto; }

/* Anruf-Button: nur solange die Infoleiste (mit Telefonnummer) ausgeblendet ist; Beschriftung ab 520 px */
.header-call { display: inline-flex; align-items: center; gap: .5rem; margin: 0 .4rem 0 auto; padding: .75rem; color: var(--color-ink); border: 1px solid var(--color-line); }
.header-call .icon { font-size: 1.25rem; }
.header-call__label { display: none; }
@media (min-width: 520px) { .header-call__label { display: inline; } }

/* Anfrageliste: Symbol mit grünem Zähler (js/inquiry-list/list-controls.js). Beschriftung sichtbar erst ab 1320 px,
   darunter nur für Screenreader (Platz in der Kopfzeile). */
.header-list { position: relative; display: inline-flex; align-items: center; gap: .5rem; margin-right: .4rem; padding: .75rem; color: var(--color-ink); border: 1px solid var(--color-line); transition: border-color var(--transition); }
.header-list:hover { border-color: var(--color-ink); }
.header-list .icon { font-size: 1.25rem; }
.header-list__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.header-list__count { position: absolute; top: -.55rem; right: -.55rem; display: grid; min-width: 1.4rem; height: 1.4rem; place-items: center; padding: 0 .3rem; color: var(--color-ink-strong); background: var(--color-accent); border: 2px solid var(--color-surface); border-radius: 999px; font-size: .7rem; font-weight: 700; line-height: 1; }

/* Mobile Navigation; Beschriftung „Menü“ ab 420 px (darunter nur für Screenreader) */
.nav-toggle { display: inline-flex; align-items: center; gap: .6rem; padding: .75rem; color: var(--color-ink); background: none; border: 1px solid var(--color-line); cursor: pointer; }
@media (max-width: 419px) { .nav-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } }
.nav-toggle .icon { font-size: 1.25rem; --icon-stroke: 4; }
.main-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; padding: 1.25rem var(--gutter) 1.5rem; background: var(--color-surface); border-bottom: 1px solid var(--color-line); box-shadow: var(--shadow-soft); }
.main-nav.is-open { display: grid; gap: 1rem; }
.main-nav > a:not(.button) { padding-block: .5rem; font-weight: 600; }
.main-nav__cta { margin-top: .25rem; }

/* Footer */
.site-footer { padding-block: var(--space-5); background: var(--color-surface); border-top: 1px solid var(--color-line); }
.site-footer__inner { display: grid; gap: var(--space-4); align-items: center; }
.site-footer__logo img { width: 185px; height: auto; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: .9rem 1.35rem; font-size: .85rem; }
.site-footer nav a:hover { color: var(--color-accent-dark); }
.site-footer p { margin: 0; font-size: .68rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }

@media (min-width: 900px) {
  .utility-bar { display: block; }
  .header-call { display: none; }
  .header-list { margin-left: auto; }
  .site-header__inner { min-height: 94px; }
  .site-footer__inner { grid-template-columns: auto 1fr auto; }
  .site-footer nav { justify-content: center; }
}

/* Desktop-Navigation erst ab 1200 px, damit alle Punkte einzeilig Platz haben.
   Gleicher Wert wie DESKTOP_NAV in js/mobile-nav.js. */
@media (min-width: 1200px) {
  .nav-toggle { display: none; }
  .main-nav { position: static; display: flex; align-items: center; gap: clamp(1.2rem, 2vw, 2.4rem); padding: 0; background: none; border: 0; box-shadow: none; }
  .main-nav > a { white-space: nowrap; }
  .main-nav > a:not(.button) { position: relative; padding-block: 1rem; font-weight: 500; }
  .main-nav > a:not(.button)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: .55rem; height: 2px; background: var(--color-accent); transition: right var(--transition); }
  .main-nav > a:not(.button):hover::after { right: 0; }
  .main-nav__cta { margin: 0; }
  /* Anfrageliste rechts neben „Anfrage senden“ */
  .main-nav { margin-left: auto; }
  .header-list { order: 1; margin: 0 0 0 clamp(1rem, 1.6vw, 1.75rem); }
}
@media (min-width: 1320px) {
  .header-list__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* components/button.css */
/* Buttons: --primary = grün (Hauptaktion), --secondary = Umriss. Pfeil per {{icon:arrow}}. */
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: .75rem; padding: .8rem 1.35rem; border: 1px solid transparent; border-radius: var(--radius-sm); font-weight: 400; line-height: 1.2; cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition); }
.button:hover { transform: translateY(-1px); }
.button--primary { color: var(--color-ink-strong); background: var(--color-accent); border-color: var(--color-accent); }
.button--primary:hover { color: var(--color-surface); background: var(--color-accent-dark); border-color: var(--color-accent-dark); }
.button--secondary { color: var(--color-ink); background: transparent; border-color: var(--color-ink); }
.button--secondary:hover { color: var(--color-surface); background: var(--color-ink); }

/* components/card.css */
/* Produktkarte und Produktraster – eine Karte für Startseite, Katalog und „Passend dazu“.
   Template: partials/product-card.html · Rendering: renderProductCard() in build/build.mjs */

/* Raster: --featured = Startseite (4er-Reihe), --catalog = Katalog, --related = Detailseite */
.product-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 560px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px) { .product-grid--catalog, .product-grid--related { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 980px) { .product-grid--featured, .product-grid--catalog { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.product-card { display: flex; flex-direction: column; min-width: 0; background: var(--color-surface); box-shadow: var(--shadow-card); transition: box-shadow var(--transition), transform var(--transition); }
.product-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.product-card[hidden] { display: none; }

/* Bildfläche mit festem Seitenverhältnis. Das Bild liegt absolut darin und wird per contain
   vollständig eingepasst (nie beschnitten). Hinweis „Bild folgt“ bleibt zentriert. */
.product-card__image { position: relative; display: grid; aspect-ratio: 202 / 130; place-items: center; overflow: hidden; background: var(--color-image-bg); }
.product-card__image img { position: absolute; inset: .75rem; width: calc(100% - 1.5rem); height: calc(100% - 1.5rem); object-fit: contain; }
/* Hinweis „Symbolfoto“ (produkte.json `symbolfoto`), unten links im Bild */
.product-card__badge { position: absolute; bottom: .5rem; left: .5rem; padding: .15rem .45rem; border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); font-size: .72rem; line-height: 1.3; }
.product-card__empty { color: var(--color-ink-soft); font-size: .85rem; }

.product-card__body { display: flex; flex: 1; flex-direction: column; padding: 1rem 1.25rem 1.25rem; }
.product-card__title { margin: 0 0 .35rem; font-size: 1.2rem; }
/* Zusatzzeile (Maße bzw. Beschreibung) einzeilig, vollständiger Text im title-Attribut */
.product-card__meta { margin: 0; overflow: hidden; color: var(--color-ink-soft); font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.product-card__link { align-self: flex-start; margin-top: auto; padding-top: .85rem; }

/* Anfrageliste (js/inquiry-list/list-controls.js): Umriss-Button „Auf die Anfrageliste“, danach grün hinterlegter
   Link „Auf der Anfrageliste“ zur Anfrageseite. Gleiche Größe, damit die Karte beim Wechsel nicht springt. */
.product-card__add, .product-card__added { display: flex; min-height: 44px; align-items: center; justify-content: center; gap: .5rem; margin-top: .85rem; padding: .5rem .9rem; border: 1px solid; border-radius: var(--radius-sm); font-size: .88rem; line-height: 1.2; text-align: center; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.product-card__add { color: var(--color-ink); background: transparent; border-color: var(--color-ink); cursor: pointer; }
.product-card__add:hover { color: var(--color-surface); background: var(--color-ink); }
.product-card__added { color: var(--color-ink-strong); background: var(--color-accent-soft); border-color: var(--color-accent-dark); }
.product-card__added:hover { text-decoration: underline; }
.product-card__add .icon, .product-card__added .icon { font-size: 1.05rem; --icon-stroke: 4; }

/* components/inquiry-list.css */
/* Bausteine der Anfrageliste, die auf mehreren Seiten vorkommen: Mengenwähler und kurze Bestätigung.
   Templates: pages/product.html, pages/inquiry.html (Mengenwähler), partials/header.html (Bestätigung)
   · Logik: js/quantity-input.js, js/inquiry-list/list-controls.js
   Button und Zähler sitzen in card.css bzw. header.css, die Anfrageseite selbst in inquiry.css. */

/* Mengenwähler: − [Zahl] + ; ohne JavaScript nur das Zahlenfeld */
.quantity { display: inline-flex; align-items: stretch; background: var(--color-surface); border: 1px solid var(--color-input-line); border-radius: var(--radius-sm); }
.quantity__step { display: grid; width: 44px; place-items: center; padding: 0; color: var(--color-ink); background: none; border: 0; cursor: pointer; font-size: 1rem; transition: background var(--transition); }
.quantity__step:hover { background: var(--color-band); }
.quantity__step .icon { --icon-stroke: 4; }
.quantity__input { width: 4.25rem; padding: .6rem .25rem; text-align: center; border: 0; border-inline: 1px solid var(--color-line); border-radius: 0; -moz-appearance: textfield; appearance: textfield; }
.quantity__input::-webkit-outer-spin-button, .quantity__input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.quantity__input:focus { border-color: var(--color-line); outline: 3px solid var(--color-focus); outline-offset: -1px; }
.quantity--small .quantity__step { width: 38px; }
.quantity--small .quantity__input { width: 3.5rem; padding-block: .45rem; }

/* Bestätigung nach „Auf die Anfrageliste“ unten in der Mitte. Unsichtbar (auch für Tastatur und Screenreader),
   bis list-controls.js .is-visible setzt. */
.list-toast { position: fixed; z-index: 150; bottom: 1rem; left: 50%; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; width: min(100% - 2rem, 34rem); padding: .95rem 1.25rem; color: var(--color-surface); background: var(--color-ink-strong); box-shadow: var(--shadow-overlay); font-size: .92rem; opacity: 0; visibility: hidden; transform: translate(-50%, 1rem); transition: opacity var(--transition), transform var(--transition), visibility var(--transition); }
.list-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.list-toast__link { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; color: var(--color-accent); font-weight: 700; text-decoration: underline; text-underline-offset: .3em; }
.list-toast__link:hover { color: var(--color-surface); }

/* components/consent.css */
/* Einwilligung (Consent): Banner, Einstellungsdialog, Einbettungs-Platzhalter, Abschnitt in der Datenschutzerklärung.
   Template: partials/consent.html (+ Markup aus build/consent.mjs) · Skript: js/consent/ · Daten: data/consent.json
   Alle Wahlmöglichkeiten nutzen bewusst dieselbe Button-Variante (.button--secondary): keine optische Bevorzugung. */

/* ── Banner: unten fixiert, nicht modal – die Seite bleibt lesbar und bedienbar ── */
.consent-banner { position: fixed; z-index: 500; left: 0; right: 0; bottom: 0; max-height: 85vh; overflow-y: auto; padding-block: 1.25rem; background: var(--color-surface); border-top: 1px solid var(--color-line); box-shadow: var(--shadow-overlay); }
.consent-banner__inner { display: grid; gap: 1rem; }
.consent-banner__title { margin: 0 0 .4rem; color: var(--color-ink-strong); font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; }
.consent-banner__text p:not(.consent-banner__title) { max-width: 75ch; margin: 0 0 .5rem; font-size: .92rem; }
.consent-banner__links, .consent-dialog__links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .85rem; }
.consent-banner__links a, .consent-dialog__links a { text-decoration: underline; text-underline-offset: .25em; }
.consent-banner__actions { display: grid; gap: .6rem; }

/* Handy: „Alle ablehnen“ und „Alle akzeptieren“ nebeneinander, „Einstellungen“ darunter */
@media (min-width: 360px) and (max-width: 559px) {
  .consent-banner__actions { grid-template-columns: 1fr 1fr; }
  .consent-banner__actions .button { padding-inline: .75rem; }
  .consent-banner__actions [data-consent-action="settings"] { grid-column: 1 / -1; }
}
@media (min-width: 560px) {
  .consent-banner__actions { display: flex; }
  .consent-banner__actions .button { flex: 1 1 0; }
}
@media (min-width: 1000px) {
  .consent-banner__inner { grid-template-columns: 1fr auto; align-items: center; gap: 2rem; }
  .consent-banner__actions .button { flex: none; white-space: nowrap; }
}

/* ── Einstellungsdialog (natives <dialog>: Fokusfalle, Esc schließt ohne Speichern) ── */
.consent-dialog { width: min(100% - 2rem, 720px); max-height: min(90vh, 900px); padding: 0; color: var(--color-ink); background: var(--color-surface); border: 0; border-radius: var(--radius-sm); box-shadow: var(--shadow-overlay); }
.consent-dialog[open] { display: flex; flex-direction: column; }
.consent-dialog::backdrop { background: var(--color-backdrop); }
.consent-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--color-line); }
.consent-dialog__title { margin: 0; font-size: 1.5rem; }
.consent-dialog__close { display: inline-flex; flex: none; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; color: var(--color-ink); background: none; border: 1px solid var(--color-line); cursor: pointer; }
.consent-dialog__close .icon { font-size: 1.25rem; --icon-stroke: 4; }
.consent-dialog__body { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; }
.consent-dialog__body > p:first-child { margin-bottom: 1rem; font-size: .95rem; }
.consent-dialog__links { margin: 1.25rem 0 0; }
.consent-dialog__actions { display: grid; gap: .6rem; padding: 1rem 1.5rem; border-top: 1px solid var(--color-line); }
@media (min-width: 600px) {
  .consent-dialog__actions { display: flex; justify-content: flex-end; }
  .consent-dialog__actions .button { flex: 1 1 0; }
}

/* Kategorie mit Schalter */
.consent-category { padding: 1rem; border: 1px solid var(--color-line); }
.consent-category + .consent-category { margin-top: .75rem; }
.consent-category__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.consent-category__title { font-weight: 700; }
.consent-category__badge { color: var(--color-ink-soft); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.consent-category__text { margin: .5rem 0; color: var(--color-ink-soft); font-size: .9rem; }
.consent-category__services summary { color: var(--color-accent-dark); font-size: .85rem; text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }

/* Schalter: Checkbox mit role="switch"; aus = graublau, ein = dunkelblau (Kontrast ≥ 3:1 zu Weiß) */
.consent-switch { display: inline-flex; align-items: center; gap: .75rem; cursor: pointer; }
.consent-switch input { position: relative; flex: none; width: 2.75rem; height: 1.5rem; margin: 0; padding: 0; background: var(--color-ink-soft); border: 0; border-radius: 999px; appearance: none; cursor: pointer; transition: background var(--transition); }
.consent-switch input::before { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1.1rem; height: 1.1rem; background: var(--color-surface); border-radius: 50%; transition: transform var(--transition); }
.consent-switch input:checked { background: var(--color-ink); }
.consent-switch input:checked::before { transform: translateX(1.25rem); }
.consent-switch input:disabled { cursor: not-allowed; }
.consent-switch input:checked:disabled { background: var(--color-ink-soft); }
.consent-switch input:focus { outline: none; }
.consent-switch input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

/* Angaben zu einem Dienst (Dialog und Datenschutzerklärung) */
.consent-service { display: grid; gap: .2rem 1rem; margin: .75rem 0 0; padding-top: .75rem; border-top: 1px solid var(--color-line); font-size: .85rem; }
.consent-service dt { font-weight: 700; }
.consent-service dd { margin: 0 0 .35rem; overflow-wrap: anywhere; }
.consent-service a { color: var(--color-accent-dark); text-decoration: underline; text-underline-offset: .25em; }
@media (min-width: 480px) {
  .consent-service { grid-template-columns: 8.5rem 1fr; }
  .consent-service dd { margin-bottom: 0; }
}

/* ── Öffner „Cookie-Einstellungen“ im Footer: sieht aus wie die Links daneben ── */
.consent-link { padding: 0; color: inherit; background: none; border: 0; cursor: pointer; }
.consent-link:hover { color: var(--color-accent-dark); }

/* ── Abschnitt in der Datenschutzerklärung ({{consent-tabelle}}) ── */
.consent-privacy__category { margin: var(--space-4) 0 .5rem; color: var(--color-ink-strong); font-size: 1.05rem; }

/* ── Einbettungs-Platzhalter ({{embed:…}}): lädt den iframe erst nach Klick bzw. Einwilligung ── */
.consent-embed { display: grid; min-height: 260px; aspect-ratio: 16 / 9; background: var(--color-band); border: 1px solid var(--color-line); }
.consent-embed__notice { max-width: 36rem; margin: auto; padding: 1.5rem; font-size: .92rem; text-align: center; }
.consent-embed__title { margin-bottom: .5rem; color: var(--color-ink-strong); font-weight: 700; }
.consent-embed__notice a { text-decoration: underline; text-underline-offset: .25em; }
.consent-embed__actions { display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.consent-embed__remember { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; cursor: pointer; }
.consent-embed__remember input { width: auto; margin: 0; }
.consent-embed.is-loaded { background: none; border: 0; }
.consent-embed__frame { width: 100%; height: 100%; border: 0; }

/* components/faq.css */
/* FAQ-Seite: Einleitung links (ab 960 px mitlaufend), Fragen rechts als aufklappbare <details> mit Plus/Minus.
   Template: pages/faq.html · Inhalt: content/faq.md */

.faq { background: var(--color-band); padding-block: clamp(2.5rem, 6vw, 5rem); }
.faq__inner { display: grid; gap: var(--space-6); }

/* Einleitung */
.faq__eyebrow { display: flex; align-items: center; gap: .9rem; }
.faq__eyebrow::before { content: ""; width: 2.2rem; height: 2px; background: var(--color-accent); }
.faq__intro h1 { max-width: 12ch; margin-bottom: var(--space-4); font-size: clamp(2.4rem, 5vw, 4.2rem); }
.faq__intro-text p { max-width: 30rem; color: var(--color-ink-soft); }
.faq__phone { display: inline-flex; align-items: center; gap: .6rem; margin: .5rem 0 1rem; color: var(--color-ink-strong); font-size: 1.05rem; font-weight: 700; transition: gap var(--transition); }
.faq__phone .icon--phone { color: var(--color-accent-dark); }
.faq__phone:hover { gap: .85rem; }
.faq__intro .text-link { display: flex; width: fit-content; }

/* Gruppen */
.faq__group + .faq__group { margin-top: var(--space-6); }
.faq__group-title { margin: 0 0 .5rem; color: var(--color-ink-soft); font-family: var(--font-body); font-size: .7rem; font-weight: 700; letter-spacing: .3em; line-height: 1.4; text-transform: uppercase; }

/* Frage: ganze Zeile klickbar, Plus rechts; geöffnet wird der senkrechte Strich ausgeblendet (= Minus) */
.faq__item { border-bottom: 1px solid var(--color-input-line); }
.faq__question { position: relative; display: block; padding: 1.3rem 3rem 1.3rem 0; color: var(--color-ink-strong); font-size: 1.05rem; font-weight: 700; line-height: 1.4; list-style: none; cursor: pointer; }
.faq__question::-webkit-details-marker { display: none; }
.faq__question::before, .faq__question::after { content: ""; position: absolute; top: 50%; right: .4rem; width: 1rem; height: 2px; background: var(--color-ink-strong); transition: transform var(--transition), background var(--transition); }
.faq__question::after { transform: rotate(90deg); }
.faq__item[open] > .faq__question::after { transform: rotate(0deg); }
.faq__question:hover { color: var(--color-ink); }
.faq__question:hover::before, .faq__question:hover::after { background: var(--color-accent-dark); }

.faq__answer { padding: 0 0 1.5rem; }
.faq__answer p { max-width: 44rem; margin-bottom: .8rem; color: var(--color-ink-soft); line-height: 1.7; }
.faq__answer p:last-child { margin-bottom: 0; }
.faq__answer a { color: var(--color-accent-dark); text-decoration: underline; text-underline-offset: .25em; }

@media (min-width: 960px) {
  .faq__inner { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-7); align-items: start; }
  .faq__intro { position: sticky; top: 130px; }
  .faq__answer { padding-right: 3rem; }
}