/* ============================================================
   Möbel Waeber – Fundament (Design-Tokens + Reset + Grid)
   1:1 aus dem Figma-Redesign. Komponenten kommen separat dazu.
   ============================================================ */

@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Flächen / Neutrale (warm) */
    --c-bg:        #ffffff;
    --c-surface:   #ffffff;
    --c-warm:      #ebe4de;
    --c-ink:       #2a1614;   /* Espresso – Text & dunkle Flächen */
    --c-muted:     #6b5d57;
    --c-text-2:    #3c3c3c;   /* Sekundärtext (Leads, Beschreibungen, Telefon …) */
    --c-line:      #dfd1c8;   /* Trennlinien (Figma-Token „lines") */
    --c-line-input: #ab8076;  /* Rahmen von Formularfeldern/Checkbox (Figma: lines---input-fields) */
    --c-cards:     #eceae7;   /* Karten-/Banner-/Sektionsflächen (Figma-Token „Cards-BG-1") */
    --c-bg-alt:    #faf8f5;   /* helle Kartenfläche (Figma-Token „bg-backup") – Werte-Karten Über uns */

    /* Marke / Aktion */
    --c-accent:    #e3000f;   /* Markenrot */
    --c-accent-dk: #921410;   /* dunkles Aktionsrot (Figma-Token „red-txt") – Hover des Primär-Buttons */
    --c-accent-sec: #c0000a;  /* Figma-Token „red-secondary" – Icons + Titel der Werte-Karten (Über uns) */
    --c-sales-badge: #B12C23;
    --c-sale:      #e3000f;
    --c-sale-bg:   #fee9e7;

    /* Akzente */
    --c-success:   #077f57;
    --c-warn:      #e08a1e;   /* Orange – z. B. „Geringer Bestand" */
    --c-gold:      #e9c46a;
    --c-slate:     #2f4f4f;
    --c-hyperlink: #462f2c;   /* Figma-Token „hyperlinks" – Footer-Links + Icon-Braunton (Chevrons, Socials) */

    /* Form */
    --radius:      12px;
    --radius-sm:   6px;
    --shadow-1:    0 1px 2px rgba(42,22,20,.12), 0 0 4px rgba(42,22,20,.05);
    --shadow-2:    0 3px 6px rgba(42,22,20,.14), 0 0 4px rgba(42,22,20,.06);

    /* Spacing-Skala (Name = Wert in px) */
    --space-4:   4px;
    --space-8:   8px;
    --space-12:  12px;
    --space-16:  16px;
    --space-24:  24px;
    --space-32:  32px;
    --space-48:  48px;
    --space-64:  64px;

    /* Layout – Standard = Mobile (bis 768px) */
    --container:        1200px;  /* Inhaltsbreite; Padding wird außen via calc() addiert, nicht abgezogen */
    --container-narrow:  792px;  /* schmale Lesespalte (Artikel) */
    --gutter:        16px;   /* Spalten-/Reihen-Abstand im Grid */
    --container-pad: 16px;   /* Innenabstand des Containers links/rechts */

    --font: 'Inter', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

/* Breakpoint Tablet (769–1024px) */
@media (min-width: 769px) {
    :root { --gutter: 24px; --container-pad: 36px; }
}
/* Breakpoint Desktop (ab 1025px) */
@media (min-width: 1025px) {
    :root { --gutter: 24px; --container-pad: 24px; }
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--c-ink);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* Überschriften tragen KEINE Typo per Tag – Stile kommen ausschließlich über .text-* Klassen */
h1, h2, h3, h4, h5, h6 { font: inherit; margin: 0; }
/* Typografie liegt in typography.css (generiert 1:1 aus Figma, .text-* Klassen) */

/* ---------- Container ---------- */
.container {
    max-width: calc(var(--container) + 2 * var(--container-pad));
    margin-left: auto; margin-right: auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

/* ---------- Grid-System (12 Spalten) ----------
   Gutter folgt dem Breakpoint: 16px mobil, 24px ab Tablet.
   Spalten bleiben 12; Spannen via .col-N (Basis, mobil aufwärts),
   .col-md-N (ab 769) und .col-lg-N (ab 1025). Spätere Klasse gewinnt. */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--gutter); }
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }
@media (min-width: 769px) {
    .col-md-1  { grid-column: span 1; }  .col-md-2  { grid-column: span 2; }
    .col-md-3  { grid-column: span 3; }  .col-md-4  { grid-column: span 4; }
    .col-md-5  { grid-column: span 5; }  .col-md-6  { grid-column: span 6; }
    .col-md-7  { grid-column: span 7; }  .col-md-8  { grid-column: span 8; }
    .col-md-9  { grid-column: span 9; }  .col-md-10 { grid-column: span 10; }
    .col-md-11 { grid-column: span 11; } .col-md-12 { grid-column: span 12; }
}
@media (min-width: 1025px) {
    .col-lg-1  { grid-column: span 1; }  .col-lg-2  { grid-column: span 2; }
    .col-lg-3  { grid-column: span 3; }  .col-lg-4  { grid-column: span 4; }
    .col-lg-5  { grid-column: span 5; }  .col-lg-6  { grid-column: span 6; }
    .col-lg-7  { grid-column: span 7; }  .col-lg-8  { grid-column: span 8; }
    .col-lg-9  { grid-column: span 9; }  .col-lg-10 { grid-column: span 10; }
    .col-lg-11 { grid-column: span 11; } .col-lg-12 { grid-column: span 12; }
}

/* ---------- Layout-Hilfen ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Vertikaler Section-Abstand – EINE Skala statt Padding pro Section.
   Padding statt Margin → kein margin-collapsing (zwei Sections ergeben die Summe,
   unter dem Header bleibt genau ein Abstand). Jede <section> trägt genau EINE dieser Klassen. */
.section      { padding-top: 32px; padding-bottom: 32px; }   /* Standard */
.section--lg  { padding-top: 40px; padding-bottom: 40px; }   /* Banner mit mehr Luft (Feelgood) */
.section--xl  { padding-top: 40px; padding-bottom: 40px; }   /* farbiges Band (Testimonials) */
@media (min-width: 1025px) {
    .section--xl { padding-top: 64px; padding-bottom: 64px; }
}

/* Text-Modul – reiner Fließtext (Large Body), Farbe Sekundärtext */
.text-block__text { color: var(--c-text-2); margin: 0; max-width: 792px; }  /* linksbündig, Lesebreite wie Artikel */

/* ============================================================
   Artikel-/Blog-Detailseite (1:1 Figma 628:4617, ohne Breadcrumb)
   Inhaltsbreite 792, zentriert; Body-Text #2a1614 (--c-ink)
   ============================================================ */
.article { max-width: calc(var(--container-narrow) + 2 * var(--container-pad)); margin: 0 auto; padding: var(--space-32) var(--container-pad) var(--space-64); display: flex; flex-direction: column; gap: var(--space-32); }
/* KI-Hinweis auf Bildern (nur Inspirations-Beiträge, siehe Page::marksAiImages()).
   Klein „KI"; beim Überfahren des Bildes klappt der lange Text auf. Der lange Text
   steht immer im Markup – so lesen ihn Screenreader auch ohne Hover. */
.ai-marked { position: relative; display: block; }
.ai-mark {
    position: absolute; right: 8px; bottom: 8px; z-index: 1;
    display: inline-flex; align-items: center; gap: 4px;   /* wirkt nur aufgeklappt (ein Wortabstand) */
    max-width: calc(100% - 16px); overflow: hidden;
    padding: 4px 8px; border-radius: var(--radius-sm);
    background: rgba(42, 22, 20, .72); color: #fff;
    font-family: var(--font); font-size: 11px; line-height: 16px; letter-spacing: .04em;
    pointer-events: none;   /* nie einen Klick auf das Bild/den Link abfangen */
}
/* Bewusst display statt einer Breiten-Animation: der Text ist einzeilig und kurz,
   und ein Umschalten ist verlässlich – eine Breiten-Animation auf einem Flex-Item
   verhält sich je nach Umgebung unterschiedlich. */
.ai-mark__long { display: none; white-space: nowrap; }
/* Einblenden beim Überfahren des Bildes (Container), nicht nur des Hinweises selbst */
.ai-marked:hover .ai-mark__long,
.ai-marked:focus-within .ai-mark__long { display: inline; }

.article__hero { margin: 0; }
.article__hero img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.article__body { color: var(--c-ink); }
.draft-note { margin-top: var(--space-16); padding: var(--space-8) var(--space-16); border: 1px solid var(--c-accent); border-radius: var(--radius-sm); background: var(--c-sale-bg); color: var(--c-accent); }
/* Artikel-Modus (post): nur der Titel-Kopf (page-header) auf Artikelbreite (792); .article
   ist schon 792. Die Breadcrumb bleibt volle Breite / ganz links wie auf allen Seiten,
   Related bleibt breit. */
.plisting--article > .container { max-width: calc(var(--container-narrow) + 2 * var(--container-pad)); }

/* Markdown-Body: nur Layout/Abstände + Link-Farbe.
   Typografie kommt aus typography.css (.prose p/li = Large Body, .prose h2 = Info Box Titles) –
   Markdown-Tags tragen keine Utility-Klasse, daher sind die .prose-Selektoren dort an die Stile gebunden. */
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0; }
.prose p + p { margin-top: var(--space-16); }
.prose h2 { margin: var(--space-32) 0 0; }
.prose h2 + p { margin-top: var(--space-16); }
.prose img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; margin: var(--space-32) 0 0; }
.prose a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 2px; }

/* Wohnwelt-Übersicht: Subkategorie-Header (Titel + „Alle … →" rechts, wie deals/inspiration) */
.cat-group__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-32); margin: 0 0 var(--space-24); }
.cat-group__title { margin: 0; color: var(--c-ink); text-transform: uppercase; }

/* ============================================================
   Formular-Overlay (natives <dialog>) – Beratungstermin & Newsletter
   ============================================================ */
.formdialog { border: 0; padding: 0; border-radius: var(--space-16); max-width: 600px; width: calc(100% - 32px); background: var(--c-surface); color: var(--c-ink); box-shadow: var(--shadow-2); }
.formdialog::backdrop { background: rgba(42, 22, 20, .45); }
.formdialog__inner { padding: var(--space-24); }
/* Container-Abschnitte mit durchgehend 24px Abstand (Figma) */
.formdialog__form, .formdialog__success { display: flex; flex-direction: column; gap: var(--space-24); }
/* [hidden] muss die display:flex-Regel überstimmen (sonst bleibt das Erfolgs-/Formular-Panel sichtbar) */
.formdialog__form[hidden], .formdialog__success[hidden] { display: none; }
.formdialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); }
.formdialog__title { margin: 0; color: var(--c-ink); }
.formdialog__close { flex: none; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: #fff; color: var(--c-hyperlink); cursor: pointer; border-radius: 50%; }
.formdialog__close svg { width: 24px; height: 24px; }
.formdialog__close:hover { background: var(--c-cards); }
.formdialog__lead { margin: 0; color: var(--c-text-2); font-family: var(--font); font-weight: 400; font-size: 1.125rem; line-height: 1.75rem; }
.formdialog__product { margin: 0; padding: var(--space-16); background: var(--c-cards); color: var(--c-ink); }
.formdialog__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
.formdialog__field { display: flex; flex-direction: column; gap: var(--space-4); font-family: var(--font); font-size: 16px; line-height: 24px; color: var(--c-ink); }
.formdialog__field--full { grid-column: 1 / -1; }
/* [hidden] muss die display:flex-Regel überstimmen (Terminfelder im Produkt-Modus) */
.formdialog__field[hidden] { display: none; }
.formdialog__field input, .formdialog__field select, .formdialog__field textarea { font-family: var(--font); font-size: 16px; line-height: 24px; height: 48px; padding: 0 var(--space-16); border: 1px solid var(--c-line-input); border-radius: 12px; background: #fff; color: var(--c-ink); width: 100%; }
.formdialog__field textarea { height: 144px; padding: var(--space-16); resize: vertical; }
.formdialog__field input:focus, .formdialog__field select:focus, .formdialog__field textarea:focus { outline: 2px solid var(--c-ink); outline-offset: 1px; }
.formdialog__consent { display: flex; gap: var(--space-8); align-items: flex-start; color: var(--c-ink); }
/* Geteilte Checkbox (Overlays + Cookie-Banner) – EIN Stil, keine Kopien. */
.formdialog__consent input[type="checkbox"],
.consent__opt input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 3px 0 0; border: 1px solid var(--c-line-input); border-radius: 4px; background: #fff; cursor: pointer; position: relative; }
.formdialog__consent input[type="checkbox"]:checked,
.consent__opt input[type="checkbox"]:checked { background: var(--c-ink); border-color: var(--c-ink); }
.formdialog__consent input[type="checkbox"]:checked::after,
.consent__opt input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.formdialog__consent input[type="checkbox"]:focus-visible,
.consent__opt input[type="checkbox"]:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.formdialog__consent a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 2px; }   /* rechtlich relevant: Links klar erkennbar, nicht nur farblich */
.formdialog__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formdialog__error { margin: 0; color: var(--c-accent); font-size: 14px; }
.formdialog__actions { display: flex; justify-content: flex-end; gap: var(--space-8); flex-wrap: wrap; }
/* Hintergrund-Scroll sperren, solange ein Overlay offen ist (greift auf jedem Schliesspfad inkl. ESC). */
body:has(dialog[data-overlay][open]) { overflow: hidden; }
@media (max-width: 768px) { .formdialog__grid { grid-template-columns: 1fr; } }

/* „Passend zum Artikel" – Trennlinie (Inhaltsbreite) + Header + 4er-Grid */
.related .container { border-top: 1px solid var(--c-line); padding-top: var(--space-64); padding-bottom: var(--space-64); }
.related__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); margin-bottom: var(--space-24); }
.related__title { margin: 0; color: var(--c-ink); text-transform: uppercase; }
.related__all { flex: none; }

/* ============================================================
   Inspiration: 2 Spalten (Karten-Liste + Kategorien-Sidebar)
   (1:1 Figma 1194:7555 – Desktop ab 1025px, darunter gestapelt)
   ============================================================ */
.inspo-layout { display: flex; flex-direction: column; gap: var(--space-32); }
@media (min-width: 1025px) {
    /* Aufs 12-Spalten-Raster: Karten Spalte 1–8, Sidebar Spalte 9–12 */
    .inspo-layout { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--space-32); align-items: start; }
    .inspo-layout__main { grid-column: 1 / 9; }
}
.inspo-layout__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-24); }

/* Inspirations-Karte: quadratisches Bild + Text, Zickzack ab 769px.
   Aufs 12-Spalten-Raster: 8-Spalten-Innengrid (im col-8-Container = äußere Spalten),
   also Bild = col-4 · Gutter (--gutter) · Text = col-4. */
.ipost-card { display: flex; flex-direction: column; }
@media (min-width: 769px) {
    .ipost-card { display: grid; grid-template-columns: repeat(8, 1fr); column-gap: var(--gutter); align-items: center; }
    /* grid-row:1 fix beide Kinder in dieselbe Zeile – sonst springt bei --reverse
       (Bild Spalte 5–8 vor Text Spalte 1–4) der Text durch „sparse" Auto-Placement
       in die nächste Zeile und stapelt statt nebeneinander zu stehen. */
    .ipost-card__media { grid-column: 1 / span 4; grid-row: 1; }
    .ipost-card__body  { grid-column: 5 / span 4; grid-row: 1; padding-left: 0; padding-right: 0; }
    .ipost-card--reverse .ipost-card__media { grid-column: 5 / span 4; }
    .ipost-card--reverse .ipost-card__body  { grid-column: 1 / span 4; }
}
.ipost-card__media { display: block; width: 100%; aspect-ratio: 1 / 1; }
.ipost-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ipost-card__body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-16) var(--space-24); }
.ipost-card__category { margin: 0 0 var(--space-12); }
.ipost-card__title { margin: 0 0 var(--space-4); color: var(--c-ink); }
.ipost-card__title a { color: inherit; text-decoration: none; }
.ipost-card__title a:hover { text-decoration: underline; }
.ipost-card__text { margin: 0; color: var(--c-text-2); }
.ipost-card__btn { align-self: flex-start; margin-top: var(--space-8); }

/* Kategorien-Sidebar */
.cat-sidebar { flex: none; background: var(--c-cards); border-radius: var(--radius); padding: var(--space-24); display: flex; flex-direction: column; gap: var(--space-16); }
@media (min-width: 1025px) {
    /* Spalte 9–12; zusätzlich 40px Abstand links zu den Karten (Gutter 24 + 40 ≈ 64) */
    .cat-sidebar { grid-column: 9 / 13; margin-left: 40px; width: auto; }
}
.cat-sidebar__title { margin: 0; color: var(--c-ink); text-transform: uppercase; }
.cat-sidebar__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.cat-sidebar__item { border-bottom: 1px solid var(--c-line); padding: var(--space-16) 0; }
.cat-sidebar__item:last-child { border-bottom: 0; }
.cat-sidebar__item a { display: block; color: var(--c-ink); text-decoration: none; font-size: 1rem; line-height: 1.5rem; }
.cat-sidebar__item a:hover { text-decoration: underline; }
.cat-sidebar__item a.is-active { font-weight: 600; }

/* ============================================================
   Buttons (1:1 Figma „btn": Pill h48 / radius40 / pad 0-24 / Inter16/400)
   ============================================================ */
/* Höhe als min-height statt fix, dazu max-width und umbrechender Text (#311):
   mit `height: 48px` + `white-space: nowrap` konnte ein langes Label nicht umbrechen
   und schob den Button aus seinem Container – auf Mobil um bis zu 150px. Kurze Labels
   bleiben pixelgleich (24px Zeile + 2×8 Padding + 2×1 Rahmen = 42 < 48, min-height
   gewinnt), lange gehen jetzt auf zwei Zeilen. */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; max-width: 100%; padding: 8px 24px; border-radius: 40px;
    font-family: var(--font); font-size: 16px; font-weight: 400; line-height: 24px;
    border: 1px solid transparent; cursor: pointer; text-align: center;
    transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { text-decoration: none; }
.btn svg { width: 22px; height: 22px; flex: none; }
.btn--primary    { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
/* Hover nach Figma btn „red hover" (1481:10493): dunkleres Rot, Text bleibt weiss – kein Invert. */
.btn--primary:hover { background: var(--c-accent-dk); border-color: var(--c-accent-dk); color: #fff; }
.btn--tertiary   { background: var(--c-warm); border-color: var(--c-warm); color: var(--c-ink); }
/* Dunkler Button nach Figma btn „dark" (42:1004): Fläche dark-buttons #462f2c (= --c-hyperlink),
   Hover „dark hover" (1481:12182): schwarz — Text bleibt weiss, kein Invert. */
.btn--secondary     { background: var(--c-hyperlink); border-color: var(--c-hyperlink); color: #fff; }
.btn--secondary:hover { background: #000; border-color: #000; color: #fff; }
.btn--outline-filled   { background: #fff; border-color: var(--c-ink); color: var(--c-ink); }
.btn--outline-filled:hover { background: var(--c-ink); border-color: #fff; color: #fff; }
/* Outline-Button nach Figma btn „outlined" (613:3511): Rahmen + Text dark-buttons #462f2c;
   Hover „outlined hover" (1481:12188): gefüllte #462f2c-Fläche mit weissem Text. */
.btn--outline-unfilled { background: transparent; border-color: var(--c-hyperlink); color: var(--c-hyperlink); }
.btn--outline-unfilled:hover { background: var(--c-hyperlink); border-color: var(--c-hyperlink); color: #fff; }
/* Text-Btn-Link „CTA with Arrow" (Figma btn „link" 871:6419 / „link hover" 1481:12206):
   Label 16/500 unterstrichen (from-font) in dark-buttons #462f2c, Pfeil als 24er-Icon;
   Hover: schwarz und OHNE Unterstreichung. Gilt für .btn-link, .viewall,
   .space-card__link, .review-card__link, .svc-card__btn. */
.btn-link { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font); font-size: 16px; font-weight: 500; line-height: 24px; color: var(--c-hyperlink); text-decoration: underline; text-underline-position: from-font; }
.btn-link:hover { color: #000; text-decoration: none; }
.btn-link svg { width: 24px; height: 24px; flex: none; }
.btn-link--sm { gap: var(--space-4); font-size: 15px; line-height: 23px; color: var(--c-text-2); }

/* Section-Header „Alle … →" – ein Stil für deals/reviews/inspiration (mobil aus, ab Tablet inline) */
.viewall { display: none; align-items: center; gap: 10px; flex: none; color: var(--c-hyperlink); }   /* Typo via .text-body-medium (500 16/24, identisch) */
.viewall span { text-decoration: underline; text-underline-position: from-font; }   /* „Text Btn Links" (Figma): Label unterstrichen, Pfeil nicht */
.viewall:hover { color: #000; }
.viewall:hover span { text-decoration: none; }
.viewall svg { width: 24px; height: 24px; flex: none; }
@media (min-width: 769px) { .viewall { display: inline-flex; } }

/* ============================================================
   Header (Layout-Komponente, 1:1 Figma 913:3691 / 456:3366 / 379:1573)
   Mobile-first: Basis = Mobile, @769 Tablet, @1025 Desktop
   ============================================================ */
.site-header { background: var(--c-surface); border-bottom: 1px solid var(--c-line); position: sticky; top: 0; z-index: 50; }
.site-header__inner { position: relative; }
.site-header__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding: 16px 0; }
.brand { display: block; line-height: 0; flex: none; }
.brand__logo { display: block; width: 180px; height: auto; }

.site-header__right { display: flex; align-items: center; gap: var(--space-8); }

/* Telefon (nur Desktop) */
.site-header__phone { display: none; align-items: center; gap: var(--space-4); color: var(--c-text-2); font-size: 15px; line-height: 22px; white-space: nowrap; }
.site-header__phone .ico { width: 18px; height: 18px; color: var(--c-accent); flex: none; }

/* Such-Pille (Desktop + Tablet) */
.searchbar { display: none; align-items: center; gap: var(--space-16); background: #fff; border: 1px solid var(--c-line-input); border-radius: 40px; height: 48px; padding: 0 16px; width: 282px; }
.searchbar input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--c-ink); }
.searchbar input::placeholder { color: var(--c-text-2); }
.searchbar input:focus { outline: none; }
.searchbar__btn { flex: none; border: 0; background: none; color: var(--c-text-2); cursor: pointer; display: flex; padding: 0; }
.searchbar__btn svg { width: 20px; height: 20px; }

/* Mobile Such-Zeile: per Such-Icon eingeblendet, liegt im Fluss → schiebt Content nach unten. */
.site-header__search { padding-bottom: 16px; }
.site-header__search .searchbar { display: flex; width: 100%; }
@media (min-width: 769px) { .site-header__search { display: none; } }

/* CTA (nur Desktop) */
.site-header__cta { display: none; }

/* Icon-Buttons (Such-Icon mobil, Burger tablet+mobil) */
.icon-btn { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: #000; cursor: pointer; padding: 0; }
.icon-btn svg { width: 28px; height: 28px; }

/* Navigation */
.mainnav { position: absolute; left: 0; right: 0; top: 100%; background: var(--c-surface); border-bottom: 1px solid var(--c-line); box-shadow: var(--shadow-2); display: none; z-index: 40; }
.mainnav__list { list-style: none; margin: 0; padding: 8px 0; display: flex; flex-direction: column; }
.mainnav__link { display: block; position: relative; padding: 12px 0; color: #000; font-size: 16px; line-height: 24px; }
.mainnav__link:hover { text-decoration: none; }
.mainnav__link:hover::after,
.mainnav__link.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; background: var(--c-accent); }

/* ===== Mobile Drill-down-Navigation (Vollbild-Overlay, nur unter Desktop) ===== */
.mnav { position: fixed; inset: 0; z-index: 100; display: flex; }
.mnav[hidden] { display: none; }
body.mnav-open { overflow: hidden; }
.mnav__panel { display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--c-surface); }
.mnav__bar { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--c-line); }
.mnav__logo { display: block; line-height: 0; }
.mnav__logo img { display: block; width: 180px; height: auto; }
.mnav__actions { display: flex; align-items: center; }
.mnav__viewport { position: relative; flex: 1; overflow: hidden; }
/* Immer nur EINE Ebene sichtbar (visibility) – so kann es nie ein Nebeneinander
   geben. Die aktive Ebene schiebt sich herein; die verlassene wird sofort
   ausgeblendet (kein sichtbares Mitwandern). Drill: von rechts, Zurück: von links. */
.mnav__level { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; background: var(--c-surface); visibility: hidden; transform: translateX(100%); }
.mnav__level.is-active { visibility: visible; transform: translateX(0); transition: transform .25s ease; }
.mnav__level.is-past { transform: translateX(-100%); }
@media (prefers-reduced-motion: reduce) { .mnav__level.is-active { transition: none; } }
.mnav__list { list-style: none; margin: 0; padding: 0; }
.mnav__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 8px 0; border: 0; background: none; color: var(--c-ink); font-size: 17px; line-height: 27px; text-align: left; cursor: pointer; }
a.mnav__item, .mnav__item:hover { text-decoration: none; }
.mnav__chev { width: 24px; height: 24px; flex: none; color: var(--c-ink); }
.mnav__back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 8px 0; border: 0; background: none; color: var(--c-muted); font-size: 15px; cursor: pointer; }
.mnav__back svg { width: 20px; height: 20px; }
.mnav__heading { margin: 4px 0 12px; }
/* Tablet: links verankert, max 340px breit, sichtbarer Content abgedunkelt (Backdrop). Mobile bleibt 100%. */
@media (min-width: 769px) {
    .mnav { background: rgba(0, 0, 0, .5); }
    .mnav__panel { width: 340px; max-width: 340px; box-shadow: 8px 0 24px rgba(0, 0, 0, .18); }
}
@media (min-width: 1025px) { .mnav { display: none; } }

/* ===== Suchergebnisse (clientseitige Produktsuche) ===== */
.search__count { margin: 0 0 var(--space-24); }
.search__results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-24); }
/* Tablet/Mobile: Kacheln volle Breite; erst ab Desktop auf Lesebreite begrenzen. */
@media (min-width: 1025px) { .search__count, .search__results { max-width: 792px; } }
.search-card { display: block; padding: var(--space-24); border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-surface); }
.search-card:hover { text-decoration: none; border-color: var(--c-line); }
.search-card__title { display: block; color: var(--c-ink); margin-bottom: var(--space-8); }
.search-card__excerpt { display: block; color: var(--c-muted); }

/* ----- Tablet (ab 769px) ----- */
@media (min-width: 769px) {
    .site-header__top { padding: 24px 0; }
    .brand__logo { width: 222px; }
    .searchbar { display: flex; }
    .site-header__searchicon { display: none; }
    .site-header__right { gap: var(--space-24); }
}

/* ----- Desktop (ab 1025px) ----- */
@media (min-width: 1025px) {
    .site-header__top { padding: 16px 0 0; }
    .site-header__right { gap: var(--space-8); }
    .site-header__phone { display: flex; }
    .site-header__cta { display: inline-flex; }
    .site-header__burger { display: none; }
    .mainnav { position: static; display: block; box-shadow: none; border: 0; background: none; margin-top: 24px; }
    .mainnav__list { flex-direction: row; justify-content: space-between; gap: var(--space-16); padding: 0; min-height: 48px; align-items: stretch; }
    .mainnav__item { display: flex; }
    .mainnav__link { display: flex; align-items: center; justify-content: center; padding: 0; text-align: center; }
}

/* ============================================================
   Sticky Bottom Bar (Mobile/Tablet, 1:1 Figma 628:4458)
   ============================================================ */
.bottombar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--c-surface); border-top: 1px solid var(--c-line); padding: 16px 0; }
.bottombar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); }
.bottombar__actions { display: flex; gap: var(--space-4); }
.floating-btn { width: 48px; height: 48px; border-radius: var(--radius); background: var(--c-surface); display: flex; align-items: center; justify-content: center; color: var(--c-accent); flex: none; }
.floating-btn svg { width: 24px; height: 24px; }
.bottombar__cta { display: flex; align-items: center; gap: var(--space-16); }
.bottombar__phone { display: none; align-items: center; gap: var(--space-4); color: var(--c-text-2); font-size: 15px; line-height: 22px; white-space: nowrap; }
.bottombar__phone svg { width: 18px; height: 18px; }

@media (max-width: 1024px) {
    .bottombar { display: block; }
    body { padding-bottom: 80px; }
}

/* ============================================================
   Mega-Flyout (Desktop, 1:1 Figma 882:6867) – datengetrieben je Nav-Item
   ============================================================ */
.flyout { display: none; position: absolute; top: 100%; left: 50%; width: 100vw; margin-left: -50vw; background: var(--c-surface); border-top: 1px solid var(--c-line); box-shadow: var(--shadow-2); z-index: 45; }
.flyout__inner { max-width: calc(var(--container) + 2 * var(--container-pad)); margin: 0 auto; padding: 48px var(--container-pad); display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-8); }
.flyout__col { display: flex; flex-direction: column; gap: var(--space-16); padding-right: 24px; }
.flyout__title { font: 600 20px/28px var(--font); color: var(--c-ink); }
a.flyout__title--link { text-decoration: none; }
a.flyout__title--link:hover { text-decoration: underline; }
.flyout__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.flyout__link { font: 400 16px/24px var(--font); color: var(--c-ink); padding: 12px 0; display: block; }
.flyout__link:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (min-width: 1025px) {
    .mainnav__item--has-flyout:hover > .flyout,
    .mainnav__item--has-flyout:focus-within > .flyout { display: block; }
}


/* ============================================================
   Hero-Slider (Modul, 1:1 Figma 5:1083)
   ============================================================ */
.hero__slider { position: relative; height: 600px; overflow: hidden; }
.hero__track { position: absolute; inset: 0; }
.hero__slide { position: absolute; inset: 0; background-color: #d9d9d9; opacity: 0; visibility: hidden; transition: opacity .5s ease; }
.hero__slide.is-active { opacity: 1; visibility: visible; }
/* Hero-Bild als <img> (responsiv/LCP) hinter der Inhaltsbox. */
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-focus, 50% 50%); display: block; }

.hero__box { position: absolute; left: 80px; top: 50%; transform: translateY(-50%); width: 484px; max-width: calc(100% - 160px); z-index: 2; }
.hero__box-main { background: var(--c-cards); padding: 32px 24px; display: flex; flex-direction: column; gap: var(--space-48); }
.hero__intro { display: flex; flex-direction: column; gap: var(--space-16); }
.hero__headline, .hero__text, .hero__quote { color: var(--c-ink); margin: 0; }
.hero__buttons { display: flex; gap: var(--space-8); flex-wrap: wrap; padding-top: 8px; }
.hero__quote-author { color: var(--c-muted); }
.hero__hours { background: #fff; padding: 32px 24px; display: flex; align-items: center; gap: var(--space-8); color: var(--c-ink); }
.hero__hours svg { width: 24px; height: 24px; flex: none; color: var(--c-hyperlink); }   /* Figma 1743:13721: dark-buttons, nicht rot */

/* Textbild über dem Herobild (PNG mit Transparenz), oben links.
   Der Abstand sitzt am Container, die Höhenbegrenzung am Bild: `* { box-sizing:
   border-box }` würde sonst das Padding von max-height abziehen (aus 164 würden
   sichtbare 116). pointer-events: none, damit es Klicks auf den Slider nicht abfängt. */
.hero__overlay { position: absolute; top: 0; left: 0; z-index: 1; padding: 24px 0 0 24px; pointer-events: none; }
/* Eigene Regel gegen `.hero__media img { width:100%; height:100%; object-fit:cover }` –
   das Textbild behält sein Seitenverhältnis und wird nur in der Höhe begrenzt. */
.hero__overlay img { display: block; width: auto; height: auto; max-width: 100%; max-height: 111px; object-fit: contain; }

/* Werbebadge im Bild (Figma 4015:10573 ff.): roter Kreis, bis zu drei Zeilen.
   Durchmesser und Zeilengrössen kommen als CSS-Variablen aus dem Panel (je Breakpoint
   ein fester Wert, Tabelle in hero_badge_scale()); hier wird nur ausgewählt. */
.hero__badge {
    /* Aktive Stufe je Breakpoint – nur diese Variablen wechseln unten, nicht die Regeln */
    --badge: var(--badge-m); --l1: var(--line1-m); --l2: var(--line2-m); --l3: var(--line3-m);
    --badge-inset: 24px;
    position: absolute; z-index: 1;
    width: var(--badge); height: var(--badge);
    border-radius: 50%; background: var(--c-sales-badge); color: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    /* 8% des KREISES – nicht `padding: 8%`: Prozent-Padding rechnet gegen den
       Container (.hero__media, 1200 breit) und ergab 96px statt ~21. Die Innenbreite
       lag dadurch bei 76px; mit nowrap fiel das nie auf, beim Umbrechen bricht dort
       jede Zeile auseinander. */
    text-align: center; padding: calc(var(--badge) * 0.08); overflow: hidden;
    /* Zeilenabstand wie in Figma (4 bei Kreis 168) – wächst mit dem Durchmesser mit */
    gap: calc(var(--badge) * 0.0238);
}
/* Eine Schriftregel für alle Zeilen; die Grösse kommt je Zeile als Variable (Panel-Stufe). */
/* Zeilen dürfen an Leerzeichen umbrechen (Standard `normal`) – vorher stand hier
   `nowrap`, und eine zu lange Zeile wurde am Kreisrand einfach abgeschnitten.
   Bewusst NICHT overflow-wrap: anywhere ergänzen: das zwingt die Zeile auf
   Minimalbreite, aus „-25%" würde „-2 / 5 / %". Zusammenhängende Wörter ohne
   Leerzeichen bleiben deshalb weiterhin am Stück und werden bei Überlänge
   beschnitten (der Kreis hat overflow: hidden) – die Redaktion sieht dann, dass
   die Schriftstufe zu gross gewählt ist. */
.hero__badge-line { font-family: var(--font); font-weight: 600; font-size: var(--line-size); line-height: 1.1; white-space: normal; }
.hero__badge-line--1 { --line-size: var(--l1); }
.hero__badge-line--2 { --line-size: var(--l2); font-weight: 700; line-height: .92; }
.hero__badge-line--3 { --line-size: var(--l3); }
/* Ecken – Abstand zur Bildkante wie in Figma (24) */
.hero__badge--tl { top: var(--badge-inset); left: var(--badge-inset); }
.hero__badge--tr { top: var(--badge-inset); right: var(--badge-inset); }
.hero__badge--bl { bottom: var(--badge-inset); left: var(--badge-inset); }
.hero__badge--br { bottom: var(--badge-inset); right: var(--badge-inset); }
/* Ab Tablet steht die Inhalts-Box immer links: links gewählte Badges spiegeln nach rechts,
   sonst lägen sie hinter der Box (Absprache „Weg A"). */
@media (min-width: 769px) {
    .hero__badge--tl, .hero__badge--bl { left: auto; right: var(--badge-inset); }
}

/* Slider-Arrows – wiederverwendbare Slider-Steuerung (Hero, Produktgalerie …).
   Figma: 48×56, weiss, Chevron 10×20 (runde Linienenden, --c-hyperlink);
   Hover: Fläche --c-cards, Chevron schwarz. */
.slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 56px; display: flex; align-items: center; justify-content: center; background: #fff; border: 0; color: var(--c-hyperlink); cursor: pointer; z-index: 3; }
.slider-arrow svg { width: 13px; height: 22px; }   /* viewBox 12.41×22 = 10×20-Strich + runde Kappen */
.slider-arrow:hover { background: var(--c-cards); color: #000; }
.slider-arrow--prev { left: 0; border-radius: 0 var(--radius) var(--radius) 0; }
.slider-arrow--next { right: 0; border-radius: var(--radius) 0 0 var(--radius); }
/* Variante Produktgalerie (PDP): mit Rahmenlinie, offene Kante zum angedockten Rand. */
.slider-arrow--framed.slider-arrow--prev { border: 1px solid var(--c-line); border-left: 0; }
.slider-arrow--framed.slider-arrow--next { border: 1px solid var(--c-line); border-right: 0; }

/* Slider-Dots (Figma scroller_dot): 44×44-Klickfläche je Dot, sichtbarer Punkt 12×12
   zentriert, kein gap — der Abstand entsteht durch die 44er-Boxen (Mitte-zu-Mitte 44px). */
.hero__dots { display: flex; justify-content: center; gap: 0; }
.hero__dot { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: none; cursor: pointer; padding: 0; }
.hero__dot::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c-line); transition: background .15s; }
.hero__dot:hover::before,
.hero__dot.is-active::before { background: var(--c-accent); }

@media (min-width: 1025px) {
    .hero__badge { --badge: var(--badge-d); --l1: var(--line1-d); --l2: var(--line2-d); --l3: var(--line3-d); --badge-inset: 40px; }
    .hero__overlay { padding: 48px 0 0 48px; }
    .hero__overlay img { max-height: 164px; }
}

.hero__rule { height: 1px; background: var(--c-line); max-width: var(--container); margin: 24px auto 0; }

/* Tablet (769–1024): 50/50-Split – die Inhaltsbox deckt die linke Hälfte,
   das Bild füllt die rechte Hälfte. Pfeile entfallen (gewischt wird), Punkte bleiben. */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero__slider { height: auto; aspect-ratio: 2 / 1; }
    .hero__slide { display: flex; }
    .hero__media img { object-position: var(--hero-focus, 100% 50%); }
    .hero__box {
        position: relative; left: auto; top: auto; transform: none;
        width: 50%; max-width: none; z-index: 2;
        display: flex; flex-direction: column;
    }
    .hero__box-main { flex: 1; justify-content: center; gap: var(--space-24); }
    .hero .slider-arrow { display: none; }
    .hero__quote, .hero__hours { display: none; }
    .hero__badge { --badge: var(--badge-t); --l1: var(--line1-t); --l2: var(--line2-t); --l3: var(--line3-t); --badge-inset: 32px; }
    .hero__overlay { padding: 36px 0 0 36px; }
    .hero__overlay img { max-height: 120px; }
}
@media (max-width: 768px) {
    .hero__slider { height: 584px; }
    /* Mobil nur Titel + CTA: Fliesstext und Zitat entfallen – ausser der Slide
       schaltet sie im Panel ausdrücklich frei („Text/Zitat auch mobil anzeigen").
       Gleiche Spezifität wie die Regel darüber, gewinnt also über die Reihenfolge. */
    .hero__text, .hero__quote { display: none; }
    .hero__text--mobil, .hero__quote--mobil { display: block; }
    /* Das Zitat liegt ausserhalb von .hero__intro, und .hero__box-main hat mobil
       gap: 0 – ohne diesen Abstand klebte es an den Buttons. */
    .hero__quote--mobil { margin-top: var(--space-16); }
    /* Zwei Zeilen statt Überlagerung: Bild oben (nimmt die Resthöhe), Box darunter. */
    .hero__slide { display: flex; flex-direction: column; }
    .hero__media { position: relative; flex: 1; min-height: 0; }
    .hero__box { position: relative; left: auto; right: auto; top: auto; bottom: auto; transform: none; width: auto; max-width: none; flex: none; }
    /* Box wahlweise über dem Bild (Panel: „Position der Inhalts-Box") */
    .hero__slide--boxtop .hero__box { order: -1; }
    .hero__box-main { padding: var(--space-24); gap: 0; }
    /* Buttons über die volle Breite, untereinander */
    .hero__buttons { flex-direction: column; }
    .hero__buttons .btn { width: 100%; }
    .hero__hours { padding: var(--space-24); }
    /* Umgekehrte Logik zu Text und Zitat: die Öffnungszeiten stehen mobil normal da,
       der Panel-Schalter nimmt sie je Slide raus. */
    .hero__hours--mobil-aus { display: none; }
    /* Mobil wird gewischt statt geklickt – die Punkte bleiben als Anzeige/Sprungziel */
    .hero .slider-arrow { display: none; }
}

/* ============================================================
   Footer (Layout-Komponente, 1:1 Figma Node 771:9211)
   – 5 gleichbreite Spalten (Adresse · Öffnungszeiten · Rechtliches · Waeber · Socials),
     Socials rechtsbündig mit Copyright unten; keine Bottom-Zeile mehr.
   ============================================================ */
.site-footer { border-top: 1px solid var(--c-line); padding: 40px 0 64px; background: var(--c-surface); }
.footer-cols { display: flex; flex-wrap: wrap; gap: var(--space-32) var(--space-24); }
.footer-col { display: flex; flex-direction: column; gap: var(--space-16); flex: 1 1 100%; min-width: 0; }
.footer-col--links { gap: var(--space-8); }   /* Figma: Titel→Linkliste 8px */
.footer-col .text-footer-title { color: var(--c-ink); }
.footer-text { color: var(--c-text-2); }

.footer-links { display: flex; flex-direction: column; align-items: flex-start; }
.footer-links a { display: block; padding: 6px 0; color: var(--c-hyperlink); }   /* 24px Zeile + 2×6 = 36px Item wie Figma */
.footer-links a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Socials: 48×48-Klickfläche mit 28×28-Glyphe (Figma social media icon), kein Kreis-Hintergrund. */
.footer-col--socials { justify-content: space-between; gap: var(--space-24); }
.footer-socials { display: flex; gap: var(--space-4); }
.social-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: var(--c-hyperlink); }
.social-icon svg { width: 28px; height: 28px; }

.footer-copyright { margin: 0; color: #000; }

@media (min-width: 769px) {
    .footer-col { flex: 1 1 calc(50% - var(--space-24)); }
}
@media (min-width: 1025px) {
    .footer-cols { flex-wrap: nowrap; }
    .footer-col { flex: 1 1 0; }
    .footer-col--socials { align-items: flex-end; }   /* Icons + Copyright rechtsbündig */
}


/* ============================================================
   Service-Cards „Unser Service für Sie"
   1:1 Figma  Desktop 1137:5246 · Tablet 851:4724 · Mobile 863:7186
   Mobile-first: Basis = Mobile (Karte vertikal, Text-Button)
   @769  Tablet  (Karte als Zeile, runder Icon-Button, kein Bild)
   @1025 Desktop (Karte vertikal mit Bild unten, Outline-Pill-Button)
   ============================================================ */
.svc { /* Außenabstand via .section-Klasse */ }
.svc__title { color: var(--c-ink); margin: 0 0 16px; text-transform: uppercase; }
/* .svc__cards nutzt .grid (col-12 mobil/Tablet, col-lg-4 Desktop) */

.svc-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--c-line);
    overflow: hidden;
}
.svc-card__top { display: flex; flex-direction: column; gap: var(--space-8); padding: 24px; }

.svc-card__icon {
    flex: none; width: 80px; height: 80px;
    display: flex; align-items: center; justify-content: center;
    color: var(--c-accent);
}
.svc-card__icon svg { width: 100%; height: 100%; }
.svc-card__icon img { width: 100%; height: 100%; }

.svc-card__text { display: flex; flex-direction: column; gap: var(--space-8); }
.svc-card__title { font-family: var(--font); font-weight: 600; font-size: 1.375rem; line-height: 2rem; color: var(--c-ink); }
.svc-card__desc  { font-family: var(--font); font-weight: 400; font-size: 1rem; line-height: 1.625rem; color: var(--c-text-2); margin: 0; }

/* Mobile-Button: Text + Pfeil, randlos */
.svc-card__btn {
    display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
    min-width: max-content;   /* gegen Flex-Item-Shrink unter die Inhaltsbreite */
    height: 44px; color: var(--c-hyperlink); white-space: nowrap;
    font-family: var(--font); font-size: 16px; font-weight: 500; line-height: 24px;
    transition: background .15s, color .15s, border-color .15s;
}
.svc-card__btn:hover { color: #000; }
.svc-card__btn:hover .svc-card__btn-label { text-decoration: none; }
.svc-card__btn-label { text-decoration: underline; text-underline-position: from-font; }
.svc-card__btn-arrow { display: inline-flex; flex: none; }
.svc-card__btn-arrow svg { width: 24px; height: 24px; }

.svc-card__media { display: none; }

/* ---- Tablet (1:1 Figma „card/ ups", Variante Property 1=tablet, 1877:11858) ----
   Karte quer: links der Inhalt (Icon 56, Titel, Text, Outline-Pill), rechts das Foto
   mit fester Breite 397 über die volle Kartenhöhe 264. */
@media (min-width: 769px) and (max-width: 1024px) {
    .svc-card { flex-direction: row; align-items: stretch; }
    .svc-card__top { flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-8); padding: var(--space-16); }
    .svc-card__icon { width: 56px; height: 56px; margin-bottom: var(--space-16); }
    .svc-card__btn {
        margin-top: var(--space-4); width: auto; min-width: max-content; height: 48px; padding: 0 24px; gap: 10px;
        border-radius: 40px; border: 1px solid var(--c-hyperlink); font-weight: 400;
    }
    .svc-card__btn-label { display: inline; text-decoration: none; }
    .svc-card__btn:hover { background: var(--c-hyperlink); color: #fff; }
    /* Hälfte/Hälfte statt Figmas fester 397er-Breite: bleibt über den ganzen
       Breakpoint ausgewogen (Figma zeichnet die Karte nur bei einer Breite). */
    .svc-card__media { display: block; flex: 0 0 50%; height: 264px; }
    .svc-card__media img { width: 100%; height: 100%; object-fit: cover; }
}

/* ---- Desktop ---- */
@media (min-width: 1025px) {
    .svc__title { margin-bottom: 24px; }
    .svc-card__top { flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: 16px 16px 32px; flex: 1; }
    .svc-card__text { flex: 1; }   /* unverändert vom früheren 769+-Block (Button sitzt unten) */
    .svc-card__icon { width: 56px; height: 56px; }
    .svc-card__btn {
        margin-top: 16px; width: auto; min-width: max-content; height: 48px; padding: 0 24px; gap: 10px;
        border-radius: 40px; border: 1px solid var(--c-ink); font-weight: 400;
    }
    .svc-card__btn-label { display: inline; text-decoration: none; }
    .svc-card__btn:hover { background: var(--c-ink); color: #fff; }
    .svc-card__media { display: block; height: 256px; }
    .svc-card__media img { width: 100%; height: 100%; object-fit: cover; }
}

/* ============================================================
   Aktuelle Angebote / Recent Offers
   1:1 Figma  Desktop 1155:10006 · Tablet 871:5913 · Mobile 871:6341
   Mobile-first: Basis = Mobile (Banner gestapelt, weiß + Rahmen)
   @769  Tablet  (2 Spalten, weiß + Rahmen)
   @1025 Desktop (2 Spalten, Fläche #F4F2EF, kein Rahmen)
   Bild-Höhe folgt dem Bild-Seitenverhältnis (quadratisch / quer), Text mittig.
   ============================================================ */
.offers__title { color: var(--c-ink); margin: 0 0 16px; text-transform: uppercase; }
/* .offers__list nutzt .grid (jede offer-banner = col-12) */

.offer-banner {
    display: grid; grid-template-columns: 1fr;
    background: #fff; border: 1px solid var(--c-line); overflow: hidden;
}
.offer-banner__media img { width: 100%; height: auto; display: block; }
.offer-banner__body {
    display: flex; flex-direction: column; gap: var(--space-16);
    padding: 24px; justify-content: center;
}
.offer-banner__title { color: var(--c-ink); }
.offer-banner__text  { color: var(--c-text-2); margin: 0; }
.offer-banner__btn   { align-self: flex-start; }

/* ---- Tablet ---- */
@media (min-width: 769px) {
    .offer-banner { grid-template-columns: 373fr 397fr; }
    .offer-banner--right { grid-template-columns: 397fr 373fr; }
    .offer-banner--right .offer-banner__media { order: 2; }
    .offer-banner__body { padding: 8px 24px; gap: var(--space-8); }
}

/* ---- Desktop ---- */
@media (min-width: 1025px) {
    .offers__title { margin-bottom: 24px; }
    .offer-banner { grid-template-columns: 588fr 612fr; background: var(--c-cards); border: 0; }
    .offer-banner--right { grid-template-columns: 612fr 588fr; }
    .offer-banner__body { padding: 24px; gap: var(--space-16); }
}

/* ============================================================
   Unsere Wohnwelten / Spaces
   1:1 Figma  Desktop 771:9248 · Tablet 851:5058 · Mobile 863:7942
   Mobile-first: 1 Spalte → @769 2 Spalten → @1025 3 Spalten.
   Karte: quadratisches Bild oben + Body (#F4F2EF, r12).
   Body Mobile/Tablet vertikal (Titel · Untertitel · "Jetzt entdecken →"),
   Desktop als Zeile (Text + Pfeil-Icon unten rechts, ohne Label).
   ============================================================ */
.spaces__title { color: var(--c-ink); margin: 0 0 16px; text-transform: uppercase; }
/* .spaces__grid nutzt .grid; space-card = col-12 / col-md-6 / col-lg-4 */

.space-card { display: flex; flex-direction: column; background: var(--c-cards); border: 1px solid transparent; border-radius: var(--radius); overflow: hidden; }
/* Hover (Figma card_wohnwelten „hover"): Rahmen in Dunkelbraun — Figma-Token dark-buttons #462f2c (wertgleich mit hyperlinks). */
.space-card:hover { border-color: var(--c-hyperlink); }
.space-card__media { aspect-ratio: 1 / 1; }
.space-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.space-card__body { display: flex; flex-direction: column; gap: var(--space-8); padding: 16px; }
.space-card__text { display: flex; flex-direction: column; gap: var(--space-8); }
.space-card__title { color: var(--c-ink); }
.space-card__sub { color: var(--c-ink); font-family: var(--font); font-weight: 400; font-size: 0.875rem; line-height: 1.375rem; margin: 0; }
.space-card__link { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; color: var(--c-hyperlink); font-family: var(--font); font-weight: 500; font-size: 16px; line-height: 24px; }
.space-card__link-label { text-decoration: underline; text-underline-position: from-font; }
.space-card__link:hover { color: #000; }
.space-card__link:hover .space-card__link-label { text-decoration: none; }
.space-card__link-arrow { display: inline-flex; flex: none; }
.space-card__link-arrow svg { width: 24px; height: 24px; }

/* ---- Desktop ---- */
@media (min-width: 1025px) {
    .spaces__title { margin-bottom: 24px; }
    .space-card__body { flex-direction: row; align-items: flex-end; gap: var(--space-24); }
    .space-card__text { flex: 1; gap: var(--space-4); }
    .space-card__link { align-self: auto; }
    .space-card__link-label { display: none; }
}

/* ============================================================
   Aktionsprodukte / Offers (Produktkarten)
   1:1 Figma  Desktop 771:9258 · Tablet 851:5618 · Mobile 863:8332
   Mobile-first: 1 Spalte → @769 2 Spalten (+ „Alle"-Link) → @1025 4 Spalten.
   Karte: quadratisches Bild (+ Sale-Sticker), Name, Aktionspreis (rot) + alter Preis (durchgestrichen).
   ============================================================ */
.deals__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-32); margin: 0 0 16px; }
.deals__title { color: var(--c-ink); text-transform: uppercase; }
/* .product-grid nutzt .grid; product-card = col-12 / col-md-6 / col-lg-3 */

.product-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; color: inherit; }
/* Hover (Figma card_product „hover"): Rahmen in Dunkelbraun statt --c-line. */
.product-card:hover { border-color: var(--c-hyperlink); }
.product-card__media { position: relative; aspect-ratio: 1 / 1; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-card__badge {
    position: absolute; top: 16px; right: 16px; width: 64px; height: 64px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--c-sales-badge); color: #fff;
    font-family: var(--font); font-weight: 600; font-size: 20px; line-height: 1;
}
.product-card__body { display: flex; flex-direction: column; gap: var(--space-4); padding: 8px 16px 16px; }
.product-card__name { color: var(--c-ink); }
.product-card__prices { display: flex; align-items: center; gap: var(--space-16); }
.product-card__price { color: var(--c-ink); }
.product-card__price--sale { color: var(--c-accent); }
.product-card__price-old { color: var(--c-ink); text-decoration: line-through; }

/* ---- Desktop ---- */
@media (min-width: 1025px) {
    .deals__head { margin-bottom: 24px; }
    .product-card__body { padding: 24px 16px 32px; }
}

/* ============================================================
   Breadcrumb (Modul, Figma 469:3108) – nur unterhalb „wohnwelten"
   ============================================================ */
.breadcrumb { padding-block: var(--space-16); }
.breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
.breadcrumb__item, .breadcrumb__sep { display: inline-flex; align-items: center; }
.breadcrumb__link { color: var(--c-ink); text-decoration: none; }
.breadcrumb__link:hover { text-decoration: underline; }
.breadcrumb__current { color: var(--c-text-2); }
.breadcrumb__sep { color: var(--c-text-2); }
.breadcrumb__sep svg { width: 18px; height: 18px; display: block; }

/* ============================================================
   Kontakt-Seite (Figma 1603:7730) – Hero, Info-Spalte, Karte, Formular
   ============================================================ */
.contact__hero { margin: 0; }
.contact__hero img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 600; object-fit: cover; }

.contact__cols { row-gap: var(--space-48); align-items: start; }
.contact__col { display: flex; flex-direction: column; gap: var(--space-24); }
.contact__title { color: var(--c-ink); text-transform: uppercase; margin: 0; }
.contact__intro { color: var(--c-text-2); margin: 0; }

/* Info-Liste (Icon + Label + Wert) */
.contact-info { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-16); }
.contact-info__item { display: flex; flex-direction: column; gap: var(--space-4); }
.contact-info__head { display: flex; align-items: center; gap: var(--space-8); }
.contact-info__icon { flex: none; width: 24px; height: 24px; color: var(--c-accent); }
.contact-info__icon svg { width: 100%; height: 100%; display: block; }
.contact-info__label { color: var(--c-text-2); }
.contact-info__value { color: var(--c-text-2); padding-left: var(--space-32); }
.contact-info__value a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Karte (statisches Bild, Klick öffnet Maps) */
.contact__map { display: block; margin: 0; border: 1px solid transparent; border-radius: var(--radius); overflow: hidden; }
/* Hover wie bei den Produktkacheln (brauner Rahmen) – nur wenn die Karte klickbar ist. */
a.contact__map:hover { border-color: var(--c-hyperlink); }
.contact__map img { display: block; width: 100%; height: auto; }

/* Formular: Feld-Styles kommen aus .formdialog__* – hier nur Aktionsleiste + Erfolg */
.contact-form__actions { display: flex; justify-content: flex-end; gap: var(--space-8); flex-wrap: wrap; margin-top: var(--space-8); }
/* Bestätigung 1:1 Figma 2016:14713: grüne Box #BEF1D1, Padding 24, Gap 16, Text body-txt-light, kein Radius */
.contact-form__success { background: #bef1d1; padding: var(--space-24); margin-top: var(--space-24); }
.contact-form__success h2 { color: var(--c-text-2); margin: 0 0 var(--space-16); }
.contact-form__success p { color: var(--c-text-2); margin: 0; }

.contact__divider { border: 0; border-top: 1px solid var(--c-line); max-width: var(--container); margin: 0 auto; }

/* ============================================================
   Produkt-Listing (Outlet 1250:5195, Marke …) – Kopf + Filter + Grid
   ============================================================ */
.plisting__head { padding-top: var(--space-32); }
.plisting__grid-title { color: var(--c-ink); text-transform: uppercase; margin: 0 0 var(--space-24); }
.plisting__empty { color: var(--c-text-2); }

/* Filter-Leiste – Pillen-Dropdowns (transparent + 1px Border --c-warm, radius 40 – Figma) */
.plisting__filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-16); }
/* Direkt nach dem Titel (Outlet, kein 32er-Vorgänger) bringt der Filter den vollen Abstand selbst mit. */
.plisting__head + .plisting__filters { margin-top: var(--space-48); }
.filter-select { position: relative; display: inline-flex; max-width: 100%; }
.filter-select select {
    appearance: none; -webkit-appearance: none;
    width: 282px; max-width: 100%; height: 48px; padding: 0 48px 0 16px;
    background: transparent; border: 1px solid var(--c-line); border-radius: 40px;
    font-family: var(--font); font-size: 16px; line-height: 24px; color: var(--c-ink); cursor: pointer;
}
/* ============================================================
   Dropdowns (alle <select> im Frontend) – Chevron + Options-Liste.
   Die Feldform bleibt beim jeweiligen Feld: Filter = Pille (radius 40),
   Formularfelder = 12px aus dem Overlay-System. Panel hat eigenes CSS.
   ============================================================ */
/* Chevron aus dem Snippet icon-chevron-down (Figma 1284:5806):
   24er-Icon-Rahmen 12px vom Feldrand, Strich in „dark-buttons". */
.select-wrap { position: relative; display: block; }
.select-chev { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; pointer-events: none; color: var(--c-hyperlink); }
/* Platz für den eigenen Chevron; native Pfeilspitze abschalten */
.formdialog__field select { appearance: none; -webkit-appearance: none; padding-right: 48px; }

/* Options-Liste im Stil des Feldes (anpassbares <select>, Chrome 135+).
   Progressive Enhancement: Browser ohne Unterstützung behalten die native Liste. */
@supports (appearance: base-select) {
    .filter-select select, .formdialog__field select,
    .filter-select select::picker(select), .formdialog__field select::picker(select) { appearance: base-select; }
    /* Das anpassbare <select> ist ein Flex-Container – ohne align-items sitzt
       der gewählte Wert oben statt mittig im 48px hohen Feld. */
    .filter-select select, .formdialog__field select { align-items: center; }
    /* Eigener Chevron bleibt – das eingebaute Icon würde ihn verdoppeln */
    .filter-select select::picker-icon,
    .formdialog__field select::picker-icon { display: none; }
    .filter-select select::picker(select),
    .formdialog__field select::picker(select) {
        background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 12px;
        padding: var(--space-8); margin-top: var(--space-4);
    }
    /* Der eingebaute Haken reserviert in jeder Zeile Platz und schiebt die Labels
       von der Textkante des Feldes weg – die Auswahl zeigt die Hintergrundfläche. */
    .filter-select option::checkmark,
    .formdialog__field option::checkmark { display: none; }
    .filter-select option, .formdialog__field option {
        padding: var(--space-8); border-radius: var(--radius-sm);
        background: transparent; color: var(--c-ink);
        font-family: var(--font); font-size: 16px; line-height: 24px;
    }
    .filter-select option:hover, .formdialog__field option:hover,
    .filter-select option:focus, .formdialog__field option:focus,
    .filter-select option:checked, .formdialog__field option:checked { background: var(--c-cards); color: var(--c-ink); }
}

/* Text-Bild-Banner – mobil + Tablet gestapelt, erst ab Desktop 50/50 (Bild + Soft-Textkarte).
   Bild immer 3/2 (alle Breakpoints). */
.ti-banner__inner { display: grid; grid-template-columns: 1fr; }
.ti-banner__media { aspect-ratio: 3 / 2; background: var(--c-cards); }
.ti-banner__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ti-banner__text { background: var(--c-cards); padding: var(--space-24); display: flex; flex-direction: column; gap: var(--space-24); justify-content: center; }
.ti-banner__title { color: var(--c-ink); }
.ti-banner__body { color: var(--c-ink); margin: 0; }
.ti-banner__btn { align-self: flex-start; }

/* Service-Reihen (Figma 3009:7356) = ipost-card in voller Breite + Icon.
   Überschrift + 24px gestapelte Reihen; Bild 3:2 (588×392) statt 1:1; Icon rot. */
.svc-rows__title { color: var(--c-ink); margin: 0 0 var(--space-24); }
.svc-rows__list { display: flex; flex-direction: column; gap: var(--space-24); }
.ipost-card--service .ipost-card__media { aspect-ratio: 3 / 2; }
/* Karte ohne Bild: kein leeres Media-Feld, Text über volle Breite.
   Höhere Spezifität (2 Klassen) als die Desktop-Regel .ipost-card{display:grid}. */
.ipost-card--service.ipost-card--noimg { display: block; }
.ipost-card--service.ipost-card--noimg .ipost-card__body { padding: 0; }
.ipost-card__icon { width: 64px; height: 64px; color: var(--c-accent); }
.ipost-card__icon svg { width: 100%; height: 100%; display: block; }
@media (min-width: 1025px) {
    .ti-banner__inner { grid-template-columns: 1fr 1fr; }
    .ti-banner__inner--noimg { grid-template-columns: 1fr; }   /* ohne Bild: Text volle Breite */
    .ti-banner__inner--right .ti-banner__media { order: 2; }
    .ti-banner__text { padding: 40px; }   /* Figma-Wert (off-scale) */
}

/* ============================================================
   Feelgood – „icon and text"-Banner
   1:1 Figma  Desktop 1162:7381 · Tablet 851:5383 · Mobile 851:6068
   Mobile: vertikal (Siegel oben mittig, Text darunter linksbündig)
   @769  Tablet/Desktop: Zeile (Siegel links, Text rechts).
   40px Innenabstand (überschreibt den 32px-Section-Rhythmus).
   ============================================================ */
.feelgood__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-24); }
.feelgood__icon { flex: none; width: 163px; height: 163px; color: var(--c-ink); }
.feelgood__icon svg { width: 100%; height: 100%; display: block; }
.feelgood__text { display: flex; flex-direction: column; gap: var(--space-24); width: 100%; }
.feelgood__title { color: var(--c-ink); }
.feelgood__lead  { color: var(--c-text-2); margin: 0; }

/* ---- Tablet ---- */
@media (min-width: 769px) {
    .feelgood__inner { flex-direction: row; align-items: center; gap: var(--space-24); max-width: 770px; margin: 0 auto; }
    .feelgood__icon { width: 174px; height: 174px; }
    .feelgood__text { width: auto; flex: 1; }
}

/* ---- Desktop ---- */
@media (min-width: 1025px) {
    .feelgood__inner { max-width: 792px; }
    .feelgood__icon { width: 180px; height: 180px; }
}

/* ============================================================
   Testimonials / „Das sagen unsere Kunden"
   1:1 Figma  Desktop 1162:7380 (keine Tablet/Mobile-Vorlage → Cards slidebar).
   Fläche #F4F2EF (vollbreit), Header (Titel + „Alle Bewertungen →"),
   weiße Review-Cards in horizontalem Scroll-Slider (scroll-snap, kein JS).
   Desktop ≥1025: 3 Cards à 384 passen in 1200 (kein Scroll nötig).
   ============================================================ */
.reviews { background: var(--c-cards); }
.reviews__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-32); margin: 0; }
.reviews__title { color: var(--c-ink); text-transform: uppercase; }

.reviews__track {
    display: flex; gap: var(--space-24); align-items: stretch;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.reviews__track::-webkit-scrollbar { display: none; }

.review-card {
    flex: 0 0 384px; max-width: 85%; scroll-snap-align: start;
    display: flex; flex-direction: column; gap: var(--space-8);
    background: #fff; padding: 16px 16px 24px;
}
.review-card__stars { margin-bottom: 8px; }
.review-card__text { color: var(--c-text-2); margin: 0; }
.review-card__author { color: var(--c-text-2); font-family: var(--font); font-weight: 600; font-size: 1rem; line-height: 1.5rem; }
.review-card__link { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin-top: auto; padding-top: 8px; color: var(--c-hyperlink); font-family: var(--font); font-weight: 500; font-size: 16px; line-height: 24px; }
.review-card__link span { text-decoration: underline; text-underline-position: from-font; }
.review-card__link:hover { color: #000; }
.review-card__link:hover span { text-decoration: none; }
.review-card__link svg { width: 24px; height: 24px; flex: none; }

/* Sterne-Rating (Gold-Overlay über grauer Reihe, Breite = Rating) */
.stars { position: relative; display: inline-flex; width: max-content; }
.stars__row { display: flex; gap: var(--space-8); }
.stars__empty { color: #dcd3c8; }
.stars__full { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: var(--c-gold); }
.stars svg { width: 24px; height: 24px; display: block; flex: none; }
@media (min-width: 1025px) {
    /* Desktop: 3 Cards füllen den Container exakt (Figma: 3 + „Alle Bewertungen"-Link);
       weitere bleiben per Slider erreichbar (Scrollbar ausgeblendet) statt versteckt. */
    .reviews__track { overflow-x: auto; }
    .review-card { flex-basis: calc((100% - 48px) / 3); max-width: none; }
}

/* ============================================================
   Inspiration / „Lassen Sie sich inspirieren"
   1:1 Figma  Desktop 1162:7408 (keine Tablet/Mobile-Vorlage → Cards slidebar wie Testimonials).
   Card: quadratisches Bild + Titel (20/600) + Outline-Pill „Jetzt lesen →".
   Desktop ≥1025: 3 Cards à 384 in 1200; sonst horizontaler Slider (scroll-snap).
   ============================================================ */
.inspiration__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-32); margin: 0; }
.inspiration__title { color: var(--c-ink); text-transform: uppercase; }

.inspiration__track {
    display: flex; gap: var(--space-24); align-items: stretch;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.inspiration__track::-webkit-scrollbar { display: none; }

.inspo-card { flex: 0 0 384px; max-width: 85%; scroll-snap-align: start; display: flex; flex-direction: column; }
.inspo-card__media { aspect-ratio: 1 / 1; }
.inspo-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inspo-card__body { display: flex; flex-direction: column; gap: var(--space-8); padding: 16px 0; flex: 1; }
.inspo-card__title { color: var(--c-ink); margin-bottom: 8px; }
.inspo-card__btn { align-self: flex-start; margin-top: auto; }

@media (min-width: 1025px) {
    /* Desktop: 3 Cards füllen den Container exakt (Inspiration ist auf 3 gedeckelt);
       sollte doch mehr kommen, per Slider erreichbar statt versteckt. */
    .inspiration__track { overflow-x: auto; }
    .inspo-card { flex-basis: calc((100% - 48px) / 3); max-width: none; }
}

/* ============================================================
   Newsletter-Teaser – „icon and text"-Banner (wie Feelgood, + Liste + CTA)
   1:1 Figma  Desktop 871:5440 · Tablet 828:4928 · Mobile 851:6072
   Mobile vertikal (Emblem oben mittig), @769 Zeile (Emblem links).
   ============================================================ */
.newsletter__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-24); }
.newsletter__icon { flex: none; width: 163px; height: 163px; color: var(--c-ink); }
.newsletter__icon svg { width: 100%; height: 100%; display: block; }
.newsletter__text { display: flex; flex-direction: column; gap: var(--space-24); width: 100%; }
.newsletter__title { color: var(--c-ink); }
.newsletter__body { display: flex; flex-direction: column; gap: var(--space-16); color: var(--c-text-2); }
.newsletter__body p { margin: 0; }
.newsletter__body ul { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: var(--space-4); }
.newsletter__btn { align-self: flex-start; }

@media (min-width: 769px) {
    .newsletter__inner { flex-direction: row; align-items: center; gap: var(--space-24); max-width: 770px; margin: 0 auto; }
    .newsletter__icon { width: 174px; height: 174px; }
    .newsletter__text { width: auto; flex: 1; }
}
@media (min-width: 1025px) {
    .newsletter__inner { max-width: 792px; }
    .newsletter__icon { width: 180px; height: 180px; }
}

/* ============================================================
   FAQ – „Häufige Fragen" (Accordion via <details>, kein JS)
   1:1 Figma  Desktop 784:4541 · Tablet 851:5403 · Mobile 863:8672
   Karten #F4F2EF, r12, 2px Abstand; Frage + Chevron, ausgeklappt mit Antwort.
   Block max 792px zentriert (Desktop), sonst volle Container-Breite.
   ============================================================ */
.faq__inner { max-width: 792px; margin: 0 auto; }
.faq__title { color: var(--c-ink); text-transform: uppercase; margin: 0 0 16px; }
.faq__list { display: flex; flex-direction: column; gap: 2px; }

.faq-item { background: var(--c-cards); border-radius: var(--radius); }
.faq-item > summary {
    display: flex; align-items: center; gap: var(--space-24); padding: 24px; cursor: pointer;
    list-style: none; color: var(--c-ink);
    font-family: var(--font); font-weight: 500; font-size: 1.125rem; line-height: 1.75rem;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item__q { flex: 1; }
.faq-item__chev { flex: none; width: 24px; height: 24px; color: var(--c-text-2); transition: transform .2s; }
.faq-item[open] .faq-item__chev { transform: rotate(180deg); }
.faq-item__a { padding: 0 24px 24px; color: var(--c-ink); }
.faq-item__a p { margin: 0; }

@media (min-width: 769px) { .faq__title { margin-bottom: 24px; } }

/* ============================================================
   Marken-Seite (1:1 Figma 415:2041)
   Markenliste nach Anfangsbuchstabe + A–Z-Sprungnavigation.
   Desktop: horizontale A–Z-Leiste (sticky). Tablet/Mobile: vertikale
   Scrubber-Leiste rechts (iOS-Kontakte-Stil), nur belegte Buchstaben.
   ============================================================ */
/* Seitenkopf via page-header-Snippet (plisting__head). Der frühere .brands__title-
   Abstand nach unten (24px) liegt jetzt am Folgeinhalt (brands-az / brands__sections). */
/* Brand-Grid */
.brands__sections { display: flex; flex-direction: column; gap: var(--space-48); padding-top: var(--space-24); padding-bottom: 64px; }
.brands__group { scroll-margin-top: 80px; }
.brands__letter { font-family: var(--font); font-weight: 500; font-size: 1.75rem; line-height: 2.25rem; color: var(--c-ink); text-transform: uppercase; margin: 0 0 8px; }
/* .brands__grid nutzt .grid; brand-tile = col-6 / col-md-4 / col-lg-3 */
.brand-tile { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; padding: 16px; background: #fff; border: 1px solid var(--c-line); color: var(--c-ink); }
.brand-tile img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-tile__name { font-family: var(--font); font-weight: 600; text-align: center; }

/* Desktop: horizontale A–Z-Leiste */
.brands-az { display: none; }

/* Tablet/Mobile: vertikale Scrubber-Leiste */
.brands-rail {
    position: fixed; top: 50%; right: 4px; transform: translateY(-50%); z-index: 40;
    max-height: calc(100% - 24px);
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 4px; background: rgba(255,255,255,.75); border-radius: 999px;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    touch-action: none; user-select: none;
}
.brands-rail__letter {
    display: flex; align-items: center; justify-content: center;
    min-width: var(--rh, 32px); height: var(--rh, 32px);
    font-family: var(--font); font-weight: 600; font-size: var(--rf, 15px); line-height: 1;
    color: var(--c-ink); text-decoration: none; border-radius: 999px;
}
.brands-rail__letter.is-active { color: #fff; background: var(--c-accent); }

/* Lupe-Blase beim Wischen (zeigt den aktuellen Buchstaben groß neben dem Finger) */
.brands-rail__bubble {
    position: fixed; z-index: 60; transform: translate(-100%, -50%); margin-left: -8px;
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--c-ink); color: #fff;
    font-family: var(--font); font-weight: 700; font-size: 24px; line-height: 1;
    opacity: 0; pointer-events: none; transition: opacity .12s;
}
.brands-rail__bubble.is-visible { opacity: 1; }

@media (min-width: 1025px) {
    .brands-rail { display: none; }
    .brands-az {
        display: block; position: sticky; top: var(--header-h, 0px); z-index: 30;
        background: var(--c-bg); margin-top: var(--space-24);
    }
    .brands-az__inner {
        display: flex; flex-wrap: wrap; gap: calc((100% - (520px)) / 25);
        padding-top: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--c-line);
    }
    .brands-az__letter {
        font-family: var(--font); font-weight: 500; font-size: 1.5rem; line-height: 2rem;
        color: var(--c-ink); text-decoration: none; text-transform: uppercase;
        border-bottom: 4px solid transparent; margin-bottom: -16px; padding-bottom: 12px;
        transition: color .15s; width: 20px; text-align: center;
    }
    .brands-az__letter:hover { text-decoration: underline; text-underline-offset: 4px; }
    .brands-az__letter.is-empty { color: #cbc4bc; pointer-events: none; }
    .brands-az__letter.is-active { border-bottom-color: var(--c-accent); }
    .brands__group { scroll-margin-top: calc(var(--header-h, 0px) + 72px); }
    .brands__letter { font-size: 2.25rem; line-height: 2.875rem; }
    .brands__sections { gap: var(--space-64); padding-top: 24px; }
}

/* ============================================================
   Produktdetailseite (Desktop 1:1 Figma 528:3263;
   Tablet 1838:15281 / Mobile 1838:16159)
   Mobile-first: alles gestapelt. @769–1024 (Tablet) Galerie voll oben,
   Info darunter als 6-Spalten-Sub-Grid (Beschreibung col-4 · Service col-2).
   @1025 (Desktop) rutscht die Info neben die Galerie (col-lg-6 | col-lg-6),
   das Sub-Grid bleibt identisch.
   ============================================================ */
.pdp__top { padding-top: var(--space-32); }   /* Layout via .grid: <1025 gestapelt, ab 1025 Galerie col-6 | Info col-6 */

/* Galerie (Figma 598:2749) – Stage 1:1 mit 1px-Rahmen #EBE4DE, keine Rundung;
   Thumbnails als scrollbare Reihe (quadratisch, gap 24); runde Pfeil-Buttons. */
.pdp__gallery { display: flex; flex-direction: column; gap: var(--space-24); }
.pdp__stage { position: relative; aspect-ratio: 1 / 1; background: var(--c-cards); border: 1px solid var(--c-line); overflow: hidden; }
.pdp__main-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
/* Tablet + Mobile (<1025): keine Thumbnail-Leiste – Galerie voll, Navigation über Slider-Pfeile */
@media (max-width: 1024px) { .pdp__thumbs { display: none; } }
.pdp__thumb { padding: 0; border: 1px solid var(--c-line); background: #fff; cursor: pointer; aspect-ratio: 1 / 1; overflow: hidden; }
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp__thumb.is-active { border-color: var(--c-ink); }

/* Info */
.pdp__info { display: flex; flex-direction: column; gap: var(--space-24); }
.pdp__header { display: flex; flex-direction: column; gap: var(--space-16); }
.pdp__head { display: flex; flex-direction: column; gap: var(--space-8); }
.pdp__name { color: var(--c-ink); overflow-wrap: break-word; }   /* Typo via .text-page-title */
.pdp__avail { display: inline-flex; align-items: center; gap: var(--space-8); }   /* Typo via .text-body-medium */
.pdp__avail-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: currentColor; }
/* Alle drei Verfügbarkeiten sind grün (product_availability()); grau nur, wenn das
   Produkt nicht mehr im Sortiment ist. `--orange` erzeugt heute niemand mehr – die
   Regel bleibt bewusst weg, damit im Styleguide kein Zustand steht, den es nicht gibt. */
.pdp__avail--green { color: var(--c-success); }
.pdp__avail--muted { color: var(--c-text-2); }
.pdp__inactive { color: var(--c-text-2); margin: 0; }   /* Typo via .text-body-medium */
.pdp__buy { display: flex; flex-direction: column; gap: var(--space-16); align-items: flex-start; }
.pdp__price { display: flex; flex-direction: column; gap: var(--space-4); }
.pdp__price-old { font-family: var(--font); font-weight: 400; font-size: 1.125rem; line-height: 1.5rem; color: var(--c-ink); text-decoration: line-through; }
.pdp__price-now { font-family: var(--font); font-weight: 600; font-size: 1.5rem; line-height: 1.875rem; color: var(--c-ink); white-space: nowrap; }
.pdp__price-now--sale { color: var(--c-accent); }
.pdp__detail { display: flex; flex-direction: column; gap: var(--space-24); }
.pdp__desc { color: #000; }
.pdp__desc p { margin: 0 0 .75rem; }
.pdp__desc ul { margin: 0 0 .75rem; padding-left: 1.25rem; }

/* Detail-Tabelle */
.pdp__specs { margin: 0; display: flex; flex-direction: column; }
.pdp__spec { display: flex; gap: var(--space-24); padding: 8px 0; border-bottom: 1px solid var(--c-line); }
.pdp__spec-k { flex: 0 0 38%; font-family: var(--font); font-weight: 500; font-size: 1rem; line-height: 1.5rem; color: var(--c-ink); margin: 0; }
.pdp__spec-v { color: var(--c-ink); margin: 0; }

/* Globaler Hinweis unter den Eigenschaften – Typo über .text-copyright-footer
   (400, 14/22: die kleinste Stufe des Figma-Sets), fett per <strong> aus note_html(). */
.pdp__note { color: var(--c-text-2); }

.pdp__divider { border: 0; border-top: 1px solid var(--c-line); margin: 64px 0 0; }

/* (Der Service-Balken der Produktseite wurde ersatzlos entfernt.) */

/* ---- Tablet + Desktop (ab 769px) ----
   Ab hier Header als Zeile und Info als 6-Spalten-Sub-Grid. Beim Tablet liegt die
   Galerie voll oben (col-lg-6 greift erst ab 1025), am Desktop daneben – das
   Info-Sub-Grid ist in beiden Fällen gleich, daher gemeinsam ab 769. */
@media (min-width: 769px) {
    /* Header als Zeile: Name/Status links, Preis/CTA rechts */
    .pdp__header { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: var(--space-24); }
    .pdp__buy { align-items: flex-end; }
    .pdp__price { align-items: flex-end; text-align: right; }
    /* Info-Sub-Grid: Header und Beschreibung über die volle Breite (der Service-Balken
       rechts ist entfallen – ohne ihn bliebe sonst ein Drittel der Spalte leer). */
    /* align-content: start ist wichtig: die Infospalte wird auf die Höhe der Galerie
       gestreckt, und automatische Zeilen würden die freie Höhe unter sich aufteilen –
       das riss nach dem Entfernen des Service-Balkens eine Lücke unter den Kopf. */
    .pdp__info { display: grid; grid-template-columns: repeat(6, 1fr); column-gap: var(--gutter); row-gap: var(--space-64); align-items: start; align-content: start; }
    .pdp__header { grid-column: 1 / -1; }
    .pdp__detail { grid-column: 1 / -1; }
}

/* Cookie-Consent-Banner (Consent Mode v2) */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; background: var(--c-surface); border-top: 1px solid var(--c-line); box-shadow: 0 -8px 24px rgba(0,0,0,.08); }
.consent[hidden] { display: none; }
.consent__inner { max-width: 1200px; margin: 0 auto; padding: 20px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.consent__text { flex: 1 1 360px; }
.consent__text strong { display: block; margin-bottom: 4px; }
.consent__text p { margin: 0; }
.consent__text a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 2px; }   /* wie .formdialog__consent a – ink + unterstrichen (rechtlich relevant) */
.consent__settings { display: none; flex-direction: column; gap: 14px; flex: 1 1 100%; order: 3; }
.consent.is-settings .consent__settings { display: flex; }
.consent__opt { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--c-ink); }
.consent__cat { display: flex; flex-direction: column; gap: 8px; background: var(--c-cards); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 12px var(--space-16); }
.consent__cat-head { display: inline-flex; align-items: baseline; gap: 8px; color: var(--c-ink); }
.consent__opt { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.consent__opt input[type="checkbox"] { margin: 0; }   /* zentriert neben dem Label (Overlay-Variante sitzt an erster Textzeile) */
.consent__always { font-size: .75rem; color: var(--c-text-2); }
.consent__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.consent__chip { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--c-line); font-family: monospace; font-size: .78rem; color: var(--c-text-2); }
.consent__more { margin: 2px 0 0; }
.consent__more a { color: var(--c-ink); }
.consent__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.consent__save { display: none; }
.consent.is-settings .consent__save { display: inline-flex; }
.consent.is-settings [data-consent="settings"] { display: none; }
@media (max-width: 768px) { .consent__actions { flex: 1 1 100%; } .consent__actions .consent__btn { flex: 1 1 auto; } }

/* Neuheiten im Sortiment – Highlight-Cards (Figma 1484:13151) */
.newarrivals__title { margin: 0 0 var(--space-24); color: var(--c-ink); }
.na-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; }
.na-card__media { aspect-ratio: 1 / 1; background: var(--c-cards); }
.na-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.na-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); padding: 24px 32px; }
.na-card__brand { height: 56px; }
.na-card__brand img { height: 100%; width: auto; max-width: 160px; object-fit: contain; display: block; }
.na-card__name { color: var(--c-ink); margin: 0; }
.na-card__text { color: var(--c-ink); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.na-card__btn { margin-top: var(--space-8); }

/* Seitenkopf-Extras (page-header-Snippet: optionaler Lead/CTA, z. B. Landing) */
.plisting__lead { margin: var(--space-16) 0 0; max-width: 720px; color: var(--c-text-2); }
/* Optionaler Markdown-Abschnitt zwischen Lead und Button (page-header, $intro).
   Innenabstände kommen aus .prose – hier nur der Abstand nach oben. */
.plisting__intro { margin: var(--space-24) 0 0; }
.plisting__cta { margin-top: var(--space-24); }
/* Landing Page: der Button steht mittig unter dem Kopf. Titel, Lead und Einleitung
   bleiben linksbündig – der Lesefluss soll an der Kante stehen, nur der eine
   Handlungsaufruf tritt heraus. Auto-Margins statt text-align, damit sich der
   Button auf seine Inhaltsbreite legt und nicht die Texte darüber mitzentriert. */
.landing .plisting__cta { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }
/* Landing Page (rudimentär) – Inhaltsspalte wie beim Inspirations-Beitrag:
   Kopf (Titel/Lead/CTA) und Text auf Lesebreite 792, zentriert. Der Direktkind-
   Selektor trifft nur die eigenen Container; Produkte und Newsletter liegen in
   eigenen <section>-Blöcken und bleiben breit – genau wie „Passend zum Artikel". */
.landing > .container { max-width: calc(var(--container-narrow) + 2 * var(--container-pad)); }
.landing .plisting__lead { max-width: none; }   /* füllt die Spalte; sonst stünde er schmaler als der Titel */
.landing__text { margin: var(--space-32) 0; }   /* Breite kommt jetzt vom Container */

/* Cookie-Deklaration (Datenschutzseite) – vorhandene Typo-Größen + Tokens, kein eigenes Design */
.cookie-decl__title { color: var(--c-ink); margin: 0; }
.cookie-decl__intro { color: var(--c-ink); margin: var(--space-16) 0 0; max-width: 70ch; }
.cookie-cat { margin-top: var(--space-32); }
.cookie-cat__title { color: var(--c-ink); margin: 0 0 var(--space-4); }
.cookie-cat__desc { color: var(--c-ink); margin: 0 0 var(--space-16); }
.cookie-table { width: 100%; border-collapse: collapse; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; }
.cookie-table th, .cookie-table td { text-align: left; padding: var(--space-12) var(--space-16); font-size: 0.9375rem; line-height: 1.4375rem; vertical-align: top; }
.cookie-table thead th { background: var(--c-cards); color: var(--c-ink); font-weight: 600; }
.cookie-table tbody tr + tr td { border-top: 1px solid var(--c-line); }
.cookie-table td { color: var(--c-ink); }
.cookie-table__name { font-family: monospace; white-space: nowrap; }
@media (max-width: 768px) {
    .cookie-table, .cookie-table thead, .cookie-table tbody, .cookie-table tr, .cookie-table td { display: block; width: 100%; }
    .cookie-table thead { display: none; }
    .cookie-table tr { padding: var(--space-12) 0; }
    .cookie-table tr + tr { border-top: 1px solid var(--c-line); }
    .cookie-table td { border: 0; padding: 2px var(--space-16); }
    .cookie-table td::before { content: attr(data-label) ": "; font-weight: 600; color: var(--c-ink); }
    .cookie-table__name { white-space: normal; }
}

/* ============================================================
   Über uns – Werte-Karten, Team-Grid, Kontakt-CTA (1:1 Figma 1640:9344).
   Typografie ausschließlich über .text-*-Klassen; hier nur Layout/Farbe.
   ============================================================ */
.valuecards__title, .team-group__title { text-transform: uppercase; }
.valuecards__title { margin: 0 0 var(--space-24); }
.valuecard { background: var(--c-bg-alt); padding: 40px; display: flex; flex-direction: column; gap: var(--space-16); }
.valuecard__icon { width: 80px; height: 80px; color: var(--c-accent-sec); }
.valuecard__icon svg { width: 100%; height: 100%; display: block; }
.valuecard__body { display: flex; flex-direction: column; gap: var(--space-8); }
.valuecard__title { color: var(--c-accent-sec); margin: 0; }
.valuecard__text { color: var(--c-text-2); margin: 0; }

.team-group + .team-group { margin-top: var(--space-64); }
.team-group__title { margin: 0 0 var(--space-24); }
.team-card { border: 1px solid var(--c-line); display: flex; flex-direction: column; background: var(--c-surface); }
.team-card__media { aspect-ratio: 1 / 1; background: var(--c-cards); overflow: hidden; }
.team-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-card__body { padding: var(--space-24); display: flex; flex-direction: column; gap: 28px; }
.team-card__head { display: flex; flex-direction: column; gap: var(--space-4); color: var(--c-ink); }
.team-card__name, .team-card__role { margin: 0; }
.team-card__text { color: var(--c-text-2); margin: 0; }

.about-cta__inner { display: flex; gap: var(--space-24); align-items: flex-start; max-width: 792px; margin: 0 auto; padding: 40px 0; }
.about-cta__icon { flex: none; width: 180px; height: 180px; color: var(--c-accent); }
.about-cta__icon svg { width: 100%; height: 100%; display: block; }
.about-cta__text { display: flex; flex-direction: column; gap: var(--space-24); align-items: flex-start; }
.about-cta__title, .about-cta__body { margin: 0; }
.about-cta__title { color: var(--c-ink); }
.about-cta__body { color: var(--c-text-2); }
@media (max-width: 768px) {
    .about-cta__inner { flex-direction: column; align-items: center; text-align: center; }
    .about-cta__text { align-items: center; }
    .about-cta__icon { width: 120px; height: 120px; }
}