/* ============================================================
   LOCAL FONTS
   ============================================================ */
@import url('../fonts/stylesheet.css?v=2');

/* ============================================================
   GLOBAL TYPOGRAPHY
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ============================================================
   LAYOUT-TOKENS — eine Quelle für den horizontalen Seitenrhythmus.
   Vorher deklarierten 33 Blöcke ihr eigenes max-width:1400px mit
   Paddings von 0, 20px, 24px und 40px; zwischen 1024px und 1400px
   Viewport hatten die Sections gar keinen Seitenabstand.

   --page-max    Inhaltsbreite (die 1400px von vorher)
   --page-gutter seitlicher Mindestabstand, pro Breakpoint überschrieben
   --page-box    Aussenbreite; da border-box gilt, muss der Gutter
                 aufaddiert werden, damit der Inhalt exakt --page-max
                 breit bleibt (hält die bisherige Desktop-Optik)

   Randlose Blöcke (Hero, Showroom-CTA) sind keine Container, sollen sich
   aber am selben Raster ausrichten. Sie berechnen ihren Einzug lokal als
       max(var(--page-gutter), (100% - var(--page-max)) / 2)
   Bewusst mit 100% statt 100vw: Prozent bezieht sich auf den Elternblock
   und ignoriert damit die Scrollbar-Breite, 100vw nicht — sonst driften
   sie um die Scrollbarbreite gegen die Container-Sections.
   ============================================================ */
:root {
    --page-max: 1400px;
    --page-gutter: 20px;
    --page-box: calc(var(--page-max) + 2 * var(--page-gutter));

    /* Markenfarbe. Bisher nur als --wc-primary im WooCommerce-Teil und
       74x als #B8825D hart im File - neue Regeln nehmen dieses Token. */
    --brand: #B8825D;
    /* Hover-Ton fuer gefuellte Marken-Buttons. Vorher vier verschiedene
       Abdunklungen (#a0714f, #b36a2a, #B58962, #9C6F4F) fuer denselben
       Button-Hintergrund. Weiss darauf: 4.37:1. */
    --brand-hover: #9C6F4F;
    /* Hover-Fuellung fuer Outline-Buttons (Rand bleibt, Text bleibt dunkel). */
    --brand-tint: #FDF8F4;

    /* Hero-Groesse — EINE Quelle fuer beide Hero-Varianten: die
       .hero-section aus dem Flexible-Content-Builder (Seiten, und
       Kategorien die einen gebaut haben) und den .shop-hero-Fallback der
       Kategorie-Archive. Beide Bausteine bleiben getrennt — der Fallback
       erzeugt ohne Redaktionsarbeit einen Hero aus Term-Name/-Text — aber
       die Masse kommen ab hier aus denselben zwei Werten. Vorher stand die
       Formel dreimal im File und wurde von Hand synchron gehalten, was sie
       auseinanderlaufen liess (713px Shop gegen 604px Seite). */
    /* TEST: feste 750px statt min(clamp(480px, (100vw - 650px) / 1.6, 950px), 70vh)
       — soll pruefen, ob alle Heros auf einer Hoehe besser wirken als
       inhaltsabhaengig. Achtung: ohne den 70vh-Deckel fuellt der Hero auf
       flachen Fenstern (<~830px hoch) mehr als die erste Ansicht. */
    --hero-min-height: 750px;
    /* Breite der Textspalte, als Anteil der Zeile — die Bildspalte nimmt
       den Rest (45/55). Vorher 556px + Inset: das hielt die Textbreite auf
       jedem Bildschirm konstant, liess den Anteil aber wandern (40% bei
       1440, gegen 50% auf sehr breiten Screens, 56% knapp ueber dem
       Umbruchpunkt). Der Prozentwert haelt stattdessen die Aufteilung
       fest; die Textbreite variiert dafuer mit dem Viewport. */
    --hero-content-basis: 45%;

    /* Hero-Form: zwei feste Anschnitte, eine mitwachsende Diagonale.
       Aus der Figma-Vorlage gemessen (Node 297:4015, 1440er Frame, Bildbox
       898x695): der Anschnitt oben ist 87.3px hoch (36.8 Grad), der Fuss
       unten 86.2px (26.0 Grad) - beide also gleich hoch. Nur die Diagonale
       dazwischen (13.6 Grad) ueberbrueckt die restliche Hoehe. Damit sehen
       die beiden Ecken auf jeder Seite identisch aus, unabhaengig davon wie
       hoch der Hero geraet; nur das Mittelstueck wird laenger oder kuerzer.
       Umgesetzt als Overlay in Seitenfarbe (siehe .hero-section__image-wrap
       ::before), weil weder clip-path noch mask x-Werte in Abhaengigkeit von
       der Hoehe UND feste px-Anschnitte zugleich ausdruecken koennen. */
    --hero-cap-height: 87px;      /* Hoehe von Anschnitt oben und Fuss unten */
    --hero-cap-top-run: 65.3px;   /* 87px * tan(36.8deg) */
    --hero-cap-foot-run: 42.1px;  /* 87px * tan(26.0deg) */
    --hero-diagonal-slope: 0.242; /* tan(13.6deg): x pro px Hoehe */

    /* Optischer Ausgleich der linken Seitenlage von WeezerFont.
       Die Glyphen haben links Luft innerhalb ihrer Box: bei den
       Versalien B/D/F/U gemessen konstant ~0.088em (z.B. "F" bei 72px
       = 6.29px). Dadurch startet eine grosse Überschrift sichtbar
       weiter rechts als das Eyebrow (Instrument Sans, 0.8px) und der
       Fliesstext (1.55px) darüber/darunter, obwohl alle Boxen exakt
       auf der Rasterkante sitzen.
       In em, damit der Ausgleich mit der Schriftgrösse mitskaliert. */
    --heading-optical-inset: 0.088em;

    /* Zeilenhöhe für mehrzeilige Display-Überschriften. Vorher streuten
       die Werte von 0.97 bis 1.2: die CTA-Überschrift stand auf 34px bei
       35px Schriftgrad, lief also über ihre eigene Box hinaus, und einige
       Überschriften hatten line-height:100%.
       1.15 ist knapp und deckt sich mit denen, die schon 1.15/1.2 hatten. */
    --heading-line-height: 1.15;

    /* Aktionspreise: der alte Preis soll zurücktreten statt gleichwertig
       neben dem neuen zu stehen (vorher beide 18px/700/#1A1A1A, nur durch
       den Durchstreich unterschieden). Grösse relativ in em, damit derselbe
       Wert in allen drei Kontexten sitzt: Karten 18px, Produktdetail 48px,
       Related-Products 18px. */
    --price-old-scale: 0.72em;
    --price-old-color: #8A8A8A;
    --price-gap: 8px;

    /* Ueberlappung der Features-Bar in die Hero-Unterkante. Ein Token,
       damit der negative margin-top der Bar und der Freiraum, den die
       Textspalte dafuer vorhalten muss, nicht auseinanderdriften. */
    --hero-bar-overlap: 70px;

    /* Produktdetailseite: Titel und Preis waren mit 72px bzw. 48px sehr
       gross (Kundenwunsch: kleiner). Als Token, damit sich beides an einer
       Stelle nachjustieren laesst. */
    --pdp-title-size: 44px;
    --pdp-price-size: 32px;
}

/* ============================================================
   LINKS IN REDAKTIONELLEM TEXT: Standardfarbe
   Jeder Link, der ueber den Editor in einen Text kommt (Blog-Artikel,
   Text-Section, FAQ, Booking, Event-Details), ist ohne weitere Klasse in
   Markenfarbe und unterstrichen; Hover eine Stufe dunkler. Buttons in
   diesen Bereichen sind ausgenommen.
   ============================================================ */
.single-blog__content a:not([class*="btn"]):not(.button),
.blog-content-block__text a:not([class*="btn"]):not(.button),
.text-section__content a:not([class*="btn"]):not(.button),
.booking-section__content a:not([class*="btn"]):not(.button),
.faq-section a:not([class*="btn"]):not(.button),
.faq2-section a:not([class*="btn"]):not(.button),
.event-details-section a:not([class*="btn"]):not(.button) {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s;
}

.single-blog__content a:not([class*="btn"]):not(.button):hover,
.blog-content-block__text a:not([class*="btn"]):not(.button):hover,
.text-section__content a:not([class*="btn"]):not(.button):hover,
.booking-section__content a:not([class*="btn"]):not(.button):hover,
.faq-section a:not([class*="btn"]):not(.button):hover,
.faq2-section a:not([class*="btn"]):not(.button):hover,
.event-details-section a:not([class*="btn"]):not(.button):hover {
    color: var(--brand-hover);
}

/* Links, die bereits in Markenfarbe stehen: Hover eine Stufe dunkler */
.blog-card__link:hover,
.single-blog__view-all:hover,
.leistungen-card__btn:hover,
.modelle-card__link:hover,
.event-card__link:hover,
.hero-section__breadcrumb a:hover,
.shop-hero__breadcrumb a:hover,
.single-blog__breadcrumb a:hover,
.kontakt-section__form .wpcf7-acceptance a:hover,
.map-consent__text a:hover {
    color: var(--brand-hover);
}

/* ============================================================
   TEXT-LINKS: Hover in Markenfarbe
   Gilt fuer Links, deren Text dunkel oder grau ist. Vorher hatte jede
   Komponente ihren eigenen Hover - mal #111, mal drei verschiedene
   Orangetoene (#C97D3A, #C47A3A, #a86828), einmal ein Opacity-Fade.
   Buttons und Links, die bereits in Markenfarbe stehen (Breadcrumbs,
   "Alle anzeigen", Artikel-Links), sind bewusst nicht dabei.
   ============================================================ */
.header-nav .nav-menu > li > a,
.mega-panel .mega-col__links a,
.footer-menu a,
.footer-contact__line a,
.legal-menu a,
.footer-social a,
.blog-card__title a,
.related-card__title,
.bi-card__name a,
.team-card__social-link,
.kontakt-detail__text--link,
.map-revoke,
.shop-consult__link,
.shop-filter-form__reset,
.woocommerce-loop-product__title {
    transition: color 0.2s;
}

.header-nav .nav-menu > li > a:hover,
.mega-panel .mega-col__links a:hover,
.footer-menu a:hover,
.footer-contact__line a:hover,
.legal-menu a:hover,
.footer-social a:hover,
.blog-card__title a:hover,
.related-card:hover .related-card__title,
.bi-card__name a:hover,
.team-card__social-link:hover,
.kontakt-detail__text--link:hover,
.map-revoke:hover,
.shop-consult__link:hover,
.shop-filter-form__reset:hover,
.woocommerce-loop-product__title:hover {
    color: var(--brand);
}

html{
    scroll-behavior: smooth;
    scroll-padding-top: 75.5px;
    overflow-x: hidden;
    max-width: 100%;
}

body.nav-open {
    overflow: hidden;
}
a.mega-featured__card {
    height: 290px !important;
}
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

body {
    /* clip statt hidden: overflow-x: hidden macht body zum Scroll-Container
       (overflow-y wird dadurch auto), sobald html ebenfalls overflow-x:
       hidden traegt - dann klebt position: sticky an body statt am
       Viewport und greift nie (Blog-Sidebar). clip schneidet horizontal
       genauso ab, erzeugt aber keinen Scroll-Container. */
    overflow-x: clip;
    max-width: 100%;
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 500;
    color: #1A1009;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-weight: 400;
}

/* ============================================================
   SHARED CONTAINER
   ============================================================ */
.container {
    max-width: var(--page-box);
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding-inline: var(--page-gutter);
}

.single-blog__related-heading {
    font-size: 24px;
    font-weight: 400;
    color: #1A1A1A;
    margin: 0 0 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #EDE0D9;
}
/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section {
    background-color: #FEFEFD;
    overflow: hidden;
    padding-bottom: 50px;
}

.hero-section:not(:has(.hero-section__features-bar)) .hero-section__inner {
    border-bottom: 1px solid #EDE0D9;
}

.hero-section__inner {
    display: flex;
    align-items: stretch;
    /* Vorher fix 780px. Der Hero fuellte damit auf 1920x920 die komplette
       erste Ansicht (gemessen 964px hoch, weil der Innenabstand der
       Textspalte die 780 ohnehin uebersteigt) — die vier Punkte der
       Features-Bar lagen vollstaendig unter der Kante.
       Jetzt viewport-bezogen mit Deckel, damit auf flachen Fenstern die
       Features-Bar und ein Stueck der Folgesection sichtbar bleiben.

       min(620px, 70vh) allein war unabhaengig von der Breite: die
       Bildspalte laeuft randlos bis zur Viewport-Kante (flex:1), wird auf
       sehr breiten/grossen Monitoren (2560px+, 4K) also immer breiter,
       waehrend die Hoehe bei 620px gedeckelt blieb — das Foto wirkte dort
       extrem breit/"gestreckt" (panoramaartig). Divisor 2.2 war zu
       schwach, Divisor 2 (~2:1) immer noch spuerbar breiter als die
       hochgeladenen Fotos selbst (uebliche 3:2-Fotos, ~1.5:1) - cover
       musste oben/unten kraeftig wegschneiden, was trotz unverzerrter
       Pixel "gestreckt" wirkte. Divisor 1.6 (~1.6:1, dieselbe Ziel-Ratio
       wie beim Shop-Hero, siehe .shop-hero--with-image) liegt naeher am
       Quellformat - deutlich weniger Beschnitt. Gedeckelt bei 950px (sehr
       breite Screens), 480px als Boden (schmalere Fenster). */
    min-height: var(--hero-min-height);
}

/* Content col
   Der Hero bleibt rechts absichtlich randlos (Bildspalte läuft bis zur
   Viewport-Kante). Damit die Textspalte trotzdem auf derselben Linie
   startet wie alle Section-Container, wird ihr linkes Padding auf den
   Rasterabstand gesetzt. Prozentwerte beziehen sich hier auf
   .hero-section__inner (= Viewport-Breite), anders als bei 100vw ist
   damit die Scrollbar korrekt berücksichtigt.
   Die Spaltenbreite selbst kommt aus --hero-content-basis (Anteil der
   Zeile); das Raster-Padding bleibt davon unberührt, der Text startet also
   weiterhin auf derselben Linie wie in jeder anderen Section. */
.hero-section__content {
    --hero-inset: max(var(--page-gutter), (100% - var(--page-max)) / 2);
    flex: 0 0 var(--hero-content-basis);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: clamp(28px, 3.5vh, 64px);
    padding-inline: 64px;
    padding-left: var(--hero-inset);
}

/* Image col */
.hero-section__image-wrap {
    flex: 1; /* Fill all remaining space to the right viewport edge */
    min-height: var(--hero-min-height);
    min-width: 0;
    position: relative;
    overflow: hidden;
}

.hero-section__media {
    /* object-fit: cover skaliert das Bild/Video selbst IMMER gleichmaessig
       (kein Verzerren), unabhaengig vom Seitenverhaeltnis des Wrappers.
       Die dekorative Form liegt als Overlay darueber, siehe
       .hero-section__image-wrap::before. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Die Form. Ein Overlay in Seitenfarbe, das den linken Rand des Fotos
   abdeckt - optisch identisch mit einer Maske, solange der Hero-Hintergrund
   einfarbig ist (ist er: #FEFEFD auf beiden Hero-Varianten).

   Der Trick ist aspect-ratio: die Breite des Overlays ist damit ein fester
   Bruchteil seiner Hoehe (0.242 = die maximale Ausdehnung der Form nach
   rechts, am unteren Ende). Innerhalb des Polygons sind Prozentwerte der
   x-Achse dadurch Bruchteile der HOEHE, waehrend px-Werte px bleiben - das
   ist die einzige Kombination, die feste Anschnitte plus eine proportional
   mitwachsende Diagonale erlaubt. Weder clip-path direkt auf dem Bild
   (kennt die Hoehe nicht) noch mask-size: auto 100% (skaliert alles mit,
   auch die Anschnitte) kann das.

   Warum die Form frueher gestreckt hat: sie war als objectBoundingBox-
   clipPath definiert, jede Koordinate ein Prozent der Bildbox. Bei breiter
   Bildspalte lief die Hauptdiagonale von 15.4 Grad (1280x1200) bis 27.3
   Grad (2560x760) auseinander. Davor: SVG mit preserveAspectRatio="none"
   (Foto mitverzerrt), dann "xMidYMid slice" (Ecken abgeschnitten), dann
   ein <clipPath> im Markup, das der Browser auf Shop-Kategorien nicht
   aufloeste. */
.hero-section__image-wrap::before {
    /* --box: Breite des Overlays als Bruchteil seiner Hoehe. Etwas groesser
       als die Form selbst (0.242), damit Platz fuer den Bleed bleibt.
       --reach: die maximale Ausdehnung der Form (0.242H) in Prozent der
       Overlay-Breite umgerechnet. --bleed: das Overlay beginnt 2px LINKS vom
       Wrapper. Grund: mit clip-path bekommt es eine eigene Compositing-
       Ebene, und deren linker Rand liegt bei 45%-Spaltenbreite fast immer
       auf einem Subpixel - er wurde weich gezeichnet, waehrend overflow:
       hidden das Foto pixelgenau schneidet. Ergebnis: eine 1px-Naht Foto
       ueber die gesamte Hero-Hoehe. Beginnt das Overlay ausserhalb, schneidet
       der Wrapper beide an derselben gerasterten Kante. Alle x-Werte des
       Polygons sind um den Bleed verschoben, die sichtbare Form liegt also
       exakt wo vorher. */
    --box: 0.3;
    --bleed: 2px;
    --reach: calc(var(--hero-diagonal-slope) / var(--box) * 100%);
    content: "";
    position: absolute;
    top: 0;
    left: calc(-1 * var(--bleed));
    height: 100%;
    aspect-ratio: var(--box) / 1;
    background: var(--wc-page-bg);
    z-index: 1;
    pointer-events: none;
    clip-path: polygon(
        0 0,
        calc(var(--hero-cap-top-run) + var(--bleed)) 0,
        var(--bleed) var(--hero-cap-height),
        calc(var(--reach) - var(--hero-cap-foot-run) + var(--bleed)) calc(100% - var(--hero-cap-height)),
        calc(var(--reach) + var(--bleed)) 100%,
        0 100%
    );
}

/* Eyebrow */
.hero-section__eyebrow {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #B8825D;
    margin: 0;
}

.hero-section__breadcrumb a {
    color: #B8825D;
    text-decoration: none;
    transition: opacity 0.2s;
}

.hero-section__breadcrumb a:hover {
    color: var(--brand-hover);
    text-decoration: underline;
}

.hero-section__breadcrumb span[aria-current="page"] {
    color: #B8825D;
}

.hero-section__breadcrumb .breadcrumb-sep {
    color: #B8825D;
    opacity: 0.5;
    margin: 0 2px;
}

/* Title */
.hero-section__title {
    font-size: clamp(36px, 4.5vw, 72px);
    font-weight: 400;
    line-height: 1.1;
    font-size:72px;
    letter-spacing: 0px;
    color: #1A1A1A;
    margin: 12px 0 0;
}

.hero-section__title-highlight {
    color: #C47A3A;
    display: inline;
}

/* Description */
.hero-section__description {
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0px;
    color: #4A5565;
        margin: 30px 0 0;

    max-width: 480px;
}

.hero-section__payment-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 0;
}

/* Buttons */
.hero-section__buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.hero-section__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    transition: opacity 0.2s, background-color 0.2s;
    white-space: nowrap;
    /* Gleiche Masse wie die Buttons auf der Produktseite: feste 52px,
       Inhalt zentriert, gleicher Innenabstand auf beiden Seiten. Vorher
       14/16px oben/unten und 36/19px links/rechts - der schmale rechte Rand
       war fuer den Pfeil des Primary gedacht; der Secondary hat auf den
       Unterseiten keinen Pfeil und stand damit 16px aus der Mitte. Der Rand
       des Outline-Buttons machte ihn ausserdem 2px hoeher. */
    box-sizing: border-box;
    height: 52px;
    padding: 0 24px;
    justify-content: center;
}

.hero-section__btn-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

.hero-section__btn--secondary {
    /* Rand in Markenfarbe (3.29:1 auf dem Hero-Hintergrund). Vorher
       #E5E7EB mit 1.23:1 - die Kante war praktisch unsichtbar. */
    background-color: var(--btn-bg, transparent);
    color: #3D2B1F;
    border: 1px solid var(--brand);
}
.hero-section__btn--primary:hover {
    background-color: var(--brand-hover);
    /* Aus der tatsaechlichen Buttonfarbe abgeleitet - fuer die Markenfarbe
       ergibt 15% Schwarz exakt --brand-hover (#9C6F4F), fuer eine im
       Editor abweichend gewaehlte Farbe eine passende Abdunklung. */
    background-color: color-mix(in srgb, var(--btn-bg, var(--brand)), #000 15%);
}

.hero-section__btn--secondary:hover {
    background-color: #FDF8F4;
}

/* Reviews */
.hero-section__reviews {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

.hero-section__review-avatars {
    display: flex;
}

.hero-section__review-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #FDFBF8;
    object-fit: cover;
    margin-left: -8px;
}

.hero-section__review-avatars .hero-section__review-avatar:first-child {
    margin-left: 0;
}

.hero-section__review-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero-section__review-stars {
    font-size: 13px;
    color: #C47A3A;
    letter-spacing: 1px;
}

.hero-section__review-text {
    font-size: 14px;
    color: #5C4E43;
}

/* Features bar */
.hero-section__features-bar {
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--hero-bar-overlap));
    padding: 0 102px;
}

.hero-section__features-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 77px;
    min-height: 128px;
    padding: 40px;
    background-color: #fff;
    border-radius: 14px;
    box-shadow: 0px 10px 40px -10px rgba(0, 0, 0, 0.08);
}

.hero-section__feature {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}
.hero-section__feature img{
  width:48px;
  height:48px;
}
.modelle-card__desc {
    font-size: 14px;
    color: #6A7282;
    padding-bottom: 5px;
    line-height: 1.5;
    font-weight: 400;
    margin: 0;
}
.hero-section__feature:not(:first-child)::before {
    content: '';
    position: absolute;
    left: -38.5px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 32px;
    background: #EDE0D9;
}

.hero-section__feature-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
}

.hero-section__feature-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hero-section__feature-text strong {
    font-size: 16px;
    font-weight: 700;
    color: #101828;
    line-height: 20px;
    letter-spacing: 0px;
}

.hero-section__feature-text span {
    font-size: 16px;
    font-weight: 400;
    color: #6A7282;
    line-height: 20px;
    letter-spacing: 0px;
}

/* ============================================================
   BELIEBTE INSTRUMENTE SECTION
   ============================================================ */
.bi-section {
    background-color: #FEFEFD;
    padding-top: 50px;
    padding-bottom: 50px;

}

.bi-section__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
}

/* Header */
.bi-section__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 48px;
}

.bi-section__eyebrow {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #B8825D;
    margin: 0 0 12px;
}

.bi-section__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: 48px;
    font-weight: 400;
    color: #1A1A1A;
    margin: 0;
    line-height: 1.15;
}

/* Arrows */
.bi-section__arrows {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.bi-section__arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #EDE0D9;
    background: #fff;
    color: #3D2B1F;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.bi-section__arrow:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.bi-section__arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Slider */
.bi-section__slider-wrap {
    overflow: visible;
}

.bi-section__slider {
    display: flex;
    gap: 9px;
    /* Native Scroll-Reihe statt translateX (siehe initSnapScroller in
       script.js): wischbar auf Touch, Pfeile scrollen um eine Karte. */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.bi-section__slider::-webkit-scrollbar {
    display: none;
}

/* Ziehen mit der Maus (JS setzt .is-dragging) - dabei kein Snap, sonst
   springt die Reihe unter dem Zeiger. Gilt fuer beide Scroll-Reihen. */
@media (hover: hover) {
    .bi-section__slider,
    .related.products ul.products {
        cursor: grab;
    }
}

.bi-section__slider.is-dragging,
.related.products ul.products.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
    user-select: none;
}

/* Product card */
.bi-card {
    flex: 0 0 calc(25% - 15px);
    min-width: 0;
    scroll-snap-align: start;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #E3E4E7;
    display: flex;
    flex-direction: column;
}

.bi-card__image-link {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.bi-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.bi-card:hover .bi-card__image {
    transform: scale(1.04);
}

.bi-card__image-placeholder {
    width: 100%;
    height: 100%;
    background: #F5EDE6;
}

.bi-card__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.bi-card__category {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #99A1AF;
}

.bi-card__name {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #1A1A1A;
    margin: 0;
    line-height: 28px;
    letter-spacing: 0px;
}

.bi-card__name a {
    text-decoration: none;
    color: inherit;
}


.bi-card__excerpt {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #6A7282;
    line-height: 20px;
    letter-spacing: 0px;
    margin: 0;
}

.bi-card__price {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0px;
    color: #1A1A1A;
    margin-top: auto;
}

.bi-card__price .woocommerce-Price-amount {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.bi-card__price del {
    text-decoration: line-through;
}

.bi-card__price ins {
    text-decoration: none;
}

.bi-card__btn {
    display: block;
    text-align: center;
    padding: 10px 16px;
    border: 1px solid var(--brand);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #2D2A26;
    text-decoration: none;
    margin-top: 4px;
    transition: background 0.2s, color 0.2s;
}

.bi-card__btn:hover {
    background: var(--brand-tint);
    color: #2D2A26;
    border-color: var(--brand-hover);
}

/* ============================================================
   SHOWROOM CTA (above footer)
   ============================================================ */
.showroom-cta {
    /* Auf der Section deklariert, damit Text- und Bildspalte denselben
       Wert nutzen. Prozent bezieht sich beim Verwenden jeweils auf diese
       Section (Textspalte: Elternbreite, Bildspalte: Containing Block,
       da die Section position:relative ist) — in beiden Faellen also
       die Sectionbreite. */
    --cta-inset: max(var(--page-gutter), (100% - var(--page-max)) / 2);
    position: relative;
    display: flex;
    align-items: stretch;
    /* Vorher 300px: bei breiten Screens wurde die Bildspalte (Breite bis
       zu ~1300px+) auf ein extrem breites Seitenverhaeltnis (~3.8:1)
       zusammengequetscht. object-fit:cover verzerrt das Foto zwar nicht
       pixelweise, aber der Ausschnitt wirkte dadurch stark "gestreckt"/
       panoramaartig. Etwas groesserer Mindestwert als vorher (300px) =
       weniger aggressiver Crop, aber deutlich kleiner als der erste
       Versuch (480px), der zu hoch war. */
    min-height: min(360px, 44vh);
    overflow: hidden;
}

/* Gleiche Bauart wie der Hero: Textspalte links, Bild randlos bis zur
   Viewport-Kante. Linkes Padding auf den Rasterabstand, flex-basis wächst
   um die Differenz mit, damit die Textbreite (und damit die Umbrüche)
   unverändert bleibt. Vorher startete der Text fix bei 25px, während der
   Rest der Seite auf breiten Screens bei --page-inset einrückt. */
.showroom-cta__content {
    flex: 0 0 calc(38.9% + var(--cta-inset) - 25px);
    background-color: #F8F4F0;
    color: #1A1009;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 24px 40px var(--cta-inset);
    gap: 16px;
}

.showroom-cta__eyebrow,
.showroom-cta__title,
.showroom-cta__address {
    max-width: 380px;
}

.showroom-cta__eyebrow {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #B8825D;
    margin: 0;
}

.showroom-cta__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: 35px;
    font-weight: 400;
    line-height: var(--heading-line-height);
    letter-spacing: 0px;
    color: #1A1A1A;
    margin: 0;
}

.showroom-cta__address {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: 'Instrument Sans', sans-serif;
    font-style: normal;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0px;
    color: #101828;
    line-height: 24px;
    margin: 0;
}

.showroom-cta__address svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: #C47A3A;
}

.showroom-cta__image-wrap {
    position: absolute;
    top: 0;
    /* Vorher fix 24.8%. Da der Text mit --cta-inset am Seitenraster haengt,
       wandert er auf breiten Screens nach rechts, die Diagonale aber nicht:
       bei 1920px endete der Text bei 640px, die Diagonale lag bei 634px —
       6px Ueberdeckung. Jetzt mindestens Textkante + 16px Luft, damit es
       bei jeder Breite passt. 380px ist die max-width von Eyebrow, Titel
       und Adresse. */
    left: max(24.8%, calc(var(--cta-inset) + 380px + 16px));
    right: 0;
    height: 100%;
    overflow: hidden;
    background-color: #F8F4F0;
}

.showroom-cta__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 21.9% 100%);
}

/* ============================================================
   MODELLE SECTION
   ============================================================ */
.modelle-section {
    background-color: #FDFDFD;
    border-top: 1px solid #EDE0D9;
    border-bottom: 1px solid #EDE0D9;
    padding-bottom:34px;
    padding-top: 64px;
}

.modelle-section__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 64px;
}

/* Left text */
.modelle-section__left {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modelle-section__eyebrow {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #B8825D;
    margin: 0;
}

.modelle-section__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: 48px;
    font-weight: 400;
    color: #1A1A1A;
    margin: 0;
    line-height: var(--heading-line-height);
    letter-spacing: 0px;
}

.modelle-section__count {
    display: block;
}

/* Grid */
.modelle-section__grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 13px;
}

/* Card */
.modelle-card {
background: #FCFAF9;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #EDE0D9;
    display: flex;
    flex-direction: column;
}

.modelle-card__image-wrap {
    position: relative;
    aspect-ratio: 1;
    overflow: visible;
}

.modelle-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
    transition: transform 0.4s ease;
}

.modelle-card:hover .modelle-card__image {
    transform: scale(1.08);
}
.modelle-card__title {
    font-size: 20px;
    font-weight: 400;
    padding-bottom: 7px;
    color: #1A1A1A;
    margin: 0;
}
.modelle-card__icon-wrap {
    position: absolute;
    bottom: -38px;
    left:30%;
    transform: translateX(-50%);
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    z-index: 1;
}

.modelle-card__icon {
    width: 76px;
    height: 76px;
    object-fit: contain;
}

.modelle-card__body {
    padding-top: 40px;
    padding-left: 40px;
    padding-right: 20px;
    padding-bottom: 20px;
}
.kontakt-detail__text {
    font-size: 18px;
    color: #232323;
    font-weight: 500;
    line-height: 1.6;
}
.modelle-card__body a{
  
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    gap: 6px;
    flex: 1;
    background-color: #FCFAF9;
    border-radius: 0 0 12px 12px;
}
.testi-section__rating-count {
    display: block;
    font-size: 14px;
    color: #6A7282;
    /* color: #5C4E43; */
    font-weight: 400;
}
.modelle-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--brand);
    text-decoration: none;
    /* margin-top: auto; */
    padding-top: 8px;
    transition: gap 0.2s, color 0.2s;
}

.modelle-card__link:hover {
    gap: 10px;
}

.vorteile-section__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Top text */
.vorteile-section__left {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vorteile-section__eyebrow {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #B8825D;
    margin: 0;
    white-space: nowrap;
}

.vorteile-section__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: 48px;
    font-weight: 400;
    line-height: var(--heading-line-height);
    letter-spacing: 0px;
    color: #1A1A1A;
    margin: 0;
}

/* Grid */
.vorteile-section__grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* Card */
.vorteile-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding: 4px 0;
}

.vorteile-card__icon-wrap {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vorteile-card__icon {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.vorteile-card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vorteile-card__title {
    font-size: 18px;
    font-weight: 400;
    color: #1A1A1A;
    margin: 0;
    line-height: 1.3;
}

.vorteile-card__desc {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    color: #6A7282;
    line-height: 22.75px;
    margin: 0;
}

/* ============================================================
   TESTIMONIALS SECTION
   ============================================================ */
.testi-section {
    background-color: #FCFAF9;
    padding: 50px 0;
}

.testi-section__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: 64px;
}

.testi-section__left {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.testi-section__eyebrow {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #B8825D;
    margin: 0;
}

.testi-section__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: 48px;
    font-weight: 400;
    color: #1A1A1A;
    margin: 0;
    line-height: 1.2;
}

.testi-section__rating {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 220px;
    border-radius: 14px;
    border: 1px solid #EEEEEE;
    background-color: #F8F4F1;
    padding: 21px 25px;
}

.testi-section__rating-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.testi-section__stars {
    display: flex;
    align-items: center;
    gap: 2px;
}

.testi-section__star {
    display: block;
    width: 17px;
    height: 16px;
}

.testi-section__rating-score {
    font-size: 16px;
    font-weight: 700;
    color: #1A1009;
}

.testi-section__google svg {
    display: block;
    margin-top: 4px;
}

.testi-section__right {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
}

.testi-slider-wrap {
    overflow: hidden;
}

.testi-slider {
    display: flex;
    gap: 16px;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.testi-card {
    flex: 0 0 calc(33.333% - 11px);
    height: 289px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #F3F4F6;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
}

.testi-card__quote-icon {
    display: block;
    width: 34px;
    height: 30px;
    color: #DBC1AE;
}
.testi-card__author-info strong {
    font-size: 14px;
    font-weight: 700;
    color: #1A1A1A;
}
.testi-card__text {
    font-size: 14px;
    color: #4A5565;
    font-weight: 400;
    line-height: 1.65;
    margin: 0;
    flex: 1;
}

.testi-card__author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

.testi-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.testi-card__author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.testi-card__author-info span {
    font-size: 12px;
    color: #8C7B6E;
}

.testi-section__nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.testi-section__dots {
    display: flex;
    gap: 8px;
}

.testi-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: #D5C5BB;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
}

.testi-dot.is-active {
    background: #C47A3A;
    transform: scale(1.25);
}

.testi-section__arrow {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid #F3F4F6;
    background: #fff;
    color: #4A5565;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    transition: background 0.2s, border-color 0.2s;
}

.testi-section__arrow:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.team-section {
    background-color: #FEFEFD;
    padding-bottom: 51px;
    border-bottom: 1px solid #EDE0D9;
}
.gesch-section {
    background-color: #FDFDFC;
    padding: 50px 0;
}
.single-product .woocommerce-breadcrumb a {
    color: #B8825D;
    text-decoration: none;
    /* color: var(--wc-text); */
}
.team-section__inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.team-section__header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 600px;
}

.team-section__eyebrow {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #B8825D;
    margin: 0;
}

.team-section__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: 48px;
    font-weight: 400;
    color: #1A1A1A;
    margin: 0;
    line-height: 1.15;
}

.team-section__desc {
    font-size: 16px;
    line-height: 1.6;
        color: #6A7282;
    margin: 0;
}

.team-section__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}

.team-card {
    display: flex;
    flex-direction: column;
    border:1px solid #E3E4E7;
    border-radius: 14px;
    gap: 0;
}

.team-card__photo-wrap {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    background: #EDE0D9;
    margin-bottom: 14px;
}

.team-card__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.team-card:hover .team-card__photo {
    transform: scale(1.03);
}

.team-card__body {
    display: flex;
    flex-direction: column;
    padding: 24px;
}

.team-card__name {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: 20px;
    font-weight: 400;
    padding-bottom:10px;
    line-height: 28px;
    letter-spacing: 0px;
    color: #1A1A1A;
    margin: 0;
}

.team-card__role {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    padding-bottom: 10px;
    letter-spacing: 0.6px;
    color: #B8825D;
    margin-bottom: 4px;
}

.team-card__bio {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0px;
    color: #6A7282;
    margin: 0;
}

.team-card__socials {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

.team-card__social-link {
    
    background: transparent;
    color: #6A7282;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    text-decoration: none;
}
.team-card__social-link  a{
    width:13px;
    height:12.33px;
}


.gesch-section__inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

.gesch-section__left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.gesch-section__eyebrow {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #B8825D;
    margin: 0;
}

.gesch-section__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: 48px;
    font-weight: 400;
    line-height: 50px;
    letter-spacing: 0px;
    color: #1A1A1A;
    margin: 0;
}

.gesch-section__intro {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #6A7282;
    line-height: 24px;
    letter-spacing: 0px;
    margin: 0;
}

.gesch-section__right {
    display: flex;
    align-items: center;
    max-width: 860px;
}

.gesch-steps {
    display: flex;
    align-items: flex-start;
    gap: 0;
    width: 100%;
}

.gesch-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}
    section.related.products h2
 {
        font-size: 48px;
        font-weight: 400;
        color: #1a1a1a;
    }

  .related.products ul.products li.product .related-product__excerpt
{
    font-family: 'Instrument Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    color: #6A7282;
    margin: 0 20px 16px;
}
.gesch-step__icon-wrap {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 1.5px solid #C47A3A;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gesch-step__icon {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.gesch-step__icon-placeholder {
    font-size: 20px;
    color: #C47A3A;
}

.gesch-step__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0px;
    text-align: center;
    color: #1A1A1A;
    display: block;
}

.gesch-step__desc {
    font-size: 14px;
    color: #6A7282;
    line-height: 1.5;
    margin: 0;
    font-weight: 400;
}

.gesch-step__arrow {
    flex-shrink: 0;
    color: #B8825D;
    display: flex;
    align-items: center;
    margin-top: 24px;
    padding: 0 4px;
}

/* ============================================================
   SHOWROOM SECTION
   ============================================================ */
.showroom-section {
    padding: 50px 0;
}

.showroom-section__inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.showroom-section__header {
    display: flex;
    flex-direction: column;
    gap: 10px;

}
.showroom-section__desc {
    color: #6A7282;
    font-size: 16px;
    font-weight: 400;
    /* color: #5C4E43; */
    line-height: 1.65;
    margin: 0;
    max-width: 520px;
}

.showroom-section__eyebrow {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #B8825D;
    margin: 0;
}

.showroom-section__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: 48px;
    font-weight: 400;
    line-height: 48px;
    letter-spacing: 0px;
    color: #1A1A1A;
    margin: 0;
}

.showroom-section__image-wrap {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 1440 / 640;
}

.showroom-section__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.showroom-section__iframe-wrap {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 1440 / 640;
    position: relative;
}

.showroom-section__iframe-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ============================================================
   WERTE SECTION (Wofür wir stehen)
   ============================================================ */
.werte-section {
    background-color: #fff;
    padding: 64px 0;
    border:  1px solid #EDE0D9;
}

.werte-section__inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.werte-section__header {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.werte-section__eyebrow {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #B8825D;
    margin: 0;
}

.werte-section__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: clamp(26px, 2.8vw, 38px);
    font-weight: 400;
    color: #1A1A1A;
    margin: 0;
    line-height: 1.2;
}

.werte-section__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.werte-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 32px 28px;
    border: 1px solid #EDE0D9;
    border-radius: 16px;
}

.werte-card__icon-wrap {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.werte-card__title {
    font-size: 24px;
    font-weight: 400;
    color: #1A1A1A;
    margin: 0;
}
.werte-card__icon {
    width: 69.74px;
height: 61.97px;

opacity: 1;
}

.werte-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.werte-card__desc {
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 22.75px;
    letter-spacing: 0px;
    
}

.vorteile-section {
    background-color: #FDFDFC;
    border-bottom: 1px solid #EDE0D9;
    padding: 74px 0px;
}
.werte-card__desc {
    font-size: 14px;
    color: #6A7282;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
}

/* ============================================================
   RÄUME & FORMATE SECTION
   ============================================================ */
.raeume-section {
    background-color: #FEFEFD;
}

/* ---- Highlights bar ---- */
.raeume-section__highlights-bar {
    background: #fff;
    border-bottom: 1px solid #EDE0D9;
    padding: 0;
}

.raeume-section__highlights-inner {
    display: flex;
    align-items: stretch;
}

.raeume-hl {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px 20px 0;
    border-right: 1px solid #EDE0D9;
}

.raeume-hl:first-child { padding-left: 0; }
.raeume-hl:last-child  { border-right: none; }

.raeume-hl__icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #F3EBE4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.raeume-hl__icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.raeume-hl__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.raeume-hl__title {
    font-size: 14px;
    font-weight: 700;
    color: #1A1009;
    display: block;
}

.raeume-hl__desc {
    font-size: 12px;
    color: #8C7B6E;
    line-height: 1.4;
}

/* ---- Main content ---- */
.raeume-section__inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding-bottom: 50px;
    gap: 48px;
}
.fw-card__title {
    font-size: 16px;
    font-weight: 400;
    color: #1A1A1A;
    display: block;
}
.raeume-section__header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 640px;
}

.raeume-section__eyebrow {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #B8825D;
    margin: 0;
}
.raum-card__title {
    font-size: 28px;
    font-weight: 400;
    color: #1A1A1A;
    margin: 0;
}
.raeume-section__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: 48px;
    font-weight: 400;
    color: #1A1A1A;
    margin: 0;
    line-height: 1.15;
}

.raeume-section__desc {
    font-size: 16px;
    color: #5C4E43;
    line-height: 1.65;
    margin: 0;
}

/* ---- 2-column grid ---- */
.raeume-section__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.raum-card {
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #EDE0D9;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.25s;
}

.raum-card:hover {
    box-shadow: 0 8px 32px rgba(60, 30, 10, 0.10);
}

.raum-card__image-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.raum-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.raum-card:hover .raum-card__image {
    transform: scale(1.04);
}

.raum-card__body {
    padding: 24px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.raum-card__desc {
    font-family: Instrument Sans;
    font-weight: 400;
    font-style: Regular;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0px;
    color: #6A7282;
    
}

.raum-card__btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 13px 20px;
    margin-top: 8px;
    border: 1px solid var(--brand);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    color: #2D2A26;
    text-decoration: none;
    background: transparent;
    transition: background 0.2s, border-color 0.2s, color 0.2s;}

.raum-card__btn:hover {
    background: var(--brand-tint);
    border-color: var(--brand-hover);
    color: #2D2A26;
}

/* ============================================================
   FÜR WEN SECTION
   ============================================================ */
.fuer-wen-section {
    background-color: #fff;
    padding: 30px 0;
    border-top: 1px solid #EDE0D9;
    border-bottom: 1px solid #EDE0D9;
}

.fuer-wen-section__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.fuer-wen-section__header {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.fuer-wen-section__eyebrow {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #B8825D;
    margin: 0;
}

.fuer-wen-section__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
font-size: 48px;
    font-weight: 400;
    color: #1A1A1A;
    margin: 0;
    line-height: 1.2;
}

.fuer-wen-section__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 25px;
    padding: 24px;
    border-radius: 20px;
    border: 1px solid rgba(184, 130, 93, 0.5);
    background: #FCFAF9;
}

.fw-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    position: relative;
}

.fw-card:not(:first-child)::before {
    content: '';
    position: absolute;
    left: calc(-12.5px - 1px);
    top: 0;
    bottom: 0;
    width: 1px;
    background: #EDE0D9;
}

.fw-card__icon-wrap {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.warum-section__header {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: left;
    gap: 10px;
}
.fw-card__icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
}
p.blog-content-block__date {
color:#B8825D !important;
}

.fw-card__desc {
    font-size: 14px;
    color: #6A7282;
    line-height: 1.5;
    font-weight: 400;
    margin: 0;
}

/* ============================================================
   EVENTS / VERANSTALTUNGEN SECTION
   ============================================================ */
.events-section {
    background-color: #FDFBF8;
    padding: 50px 0;
}

.events-section__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.events-section__header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 640px;
}

.events-section__eyebrow {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #B8825D;
    margin: 0;
}

.events-section__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: 48px;
    font-weight: 400;
    color: #1A1A1A;
    margin: 0;
    line-height: 1.15;
}

.events-section__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.event-card {
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #EDE0D9;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.25s, transform 0.25s;
}

.event-card:hover {
    box-shadow: 0 8px 32px rgba(60, 30, 10, 0.10);
    transform: translateY(-2px);
}

.event-card__image-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
}

.event-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.event-card:hover .event-card__image {
    transform: scale(1.04);
}

.event-card__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

.event-card__date-badge {
    background: #fff;
 color: #B8825D;
     border-radius: 6px;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    min-width: 36px;
    text-align: center;
    flex-shrink: 0;
}

.event-card__badge-day {
    font-size: 18px;
    font-weight: 700;
    display: block;
}

.event-card__badge-month {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
    display: block;
    margin-top: 2px;
}

.event-card__body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.event-card__category {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #C47A3A;
}

.event-card__desc {
    font-size: 13px;
    color: #5C4E43;
    text-decoration: none;
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

.event-card__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.event-card__date-text {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #fff;
    text-decoration: none;
}

.event-card__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid #EDE0D9;
    transition: gap 0.2s, color 0.2s;
}

.event-card__link:hover { gap: 9px; }

/* ============================================================
   FAQ SECTION
   ============================================================ */
.faq-section {
    background-color: #fff;
    padding: 50px 0;
}

.faq-section__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.faq-section__header {
    display: flex;
    flex-direction: column;
    max-width: 820px;
}

.faq-section__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: clamp(18px, 3vw, 35px);
    font-weight: 400;
    margin: 0 0 20px;
    color: #1A1A1A;
}

.faq-section__descriptions {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faq-section__description {
    font-family: 'Actor', sans-serif;
    font-weight: 400;
    font-size: clamp(14px,3vw,16px);
    line-height: 26px;
    letter-spacing: 0;
    color: #101828;
    margin: 0;
}

.faq-section__description--secondary {
    font-family: 'Actor', sans-serif;
    font-weight: 400;
    font-size: clamp(14px,3vw,15px);
    line-height: 26px;
    letter-spacing: 0;
    color: #6A7282;
}

.faq-section__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid #EDE0D9;
}

.faq-item {
    border-bottom: 1px solid #EDE0D9;
}

.faq-item__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.faq-item__question {
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    color: #101828;
    line-height: 1.4;
    font-family: 'Actor';
}

.faq-item__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1A1009;
    transition: transform 0.3s;
}

.faq-item__trigger[aria-expanded="true"] .faq-item__icon {
    transform: rotate(180deg);
}

.faq-item__answer {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.faq-item__answer:not([hidden]) {
    max-height: 600px;
}

.faq-item__answer[hidden] {
    display: block !important;
    max-height: 0;
}

.faq-item__answer-inner {
    padding: 0 0 24px;
    font-size: 16px;
    color: #6A7282;
    line-height: 1.7;
}

.faq-item__answer-inner p { margin: 0 0 12px; }
.faq-item__answer-inner p:last-child { margin-bottom: 0; }

/* ============================================================
   WARUM SECTION (USP 4-Spalten)
   ============================================================ */

.warum-section {
    background: #FEFEFD;
    padding: 30px 0;
    border-bottom: 1px solid #EDE0D9;
}

.warum-section__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.warum-section__eyebrow {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #B8825D;
    margin: 0;
}

.warum-section__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size:48px;
    font-weight: 400;
    color: #1A1A1A;
    margin: 0;
    line-height: 1.2;
}
.warum-card__title {
    font-size: 18px;
    font-weight: 400;
    color: #1A1A1A;
    margin: 0;
}
.warum-section__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.warum-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
}

.warum-card__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.warum-card__icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.warum-card__body {
    display: flex;
    flex-direction: column;
}

.warum-card__desc {
    font-family: Instrument Sans;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 22.75px;
    letter-spacing: 0px;
    margin: 0px;
    margin-top:8px;
    
}

.events-section {
    background-color: #FEFEFD;
    padding: 30px 0;
        border-bottom: 1px solid #EDE0D9;
}
.event-card__title {
    font-size: 20px;
    font-weight: 400;
    color: #111111;
    text-decoration: none;
    margin: 0;
    line-height: 1.3;
}

/* ============================================================
   KONTAKT SECTION (Info + Formular)
   ============================================================ */

.kontakt-section {
    position: relative;
    background: #FEFEFD;
    border-bottom: 1px solid #EDE0D9;
    overflow: hidden;
    padding-bottom:59px;
}

.kontakt-section__watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    transform: translate(-50%, -50%);
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
}

.kontakt-section__inner {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: start;
}

/* --- Info column --- */

.kontakt-section__eyebrow {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #B8825D;
    margin: 0 0 12px;
}

.kontakt-section__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-weight: 400;
    font-size: 48px;
    color: #1A1A1A;
    margin: 0 0 20px;
    line-height: 1.15;
}
.kontakt-section__desc {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    margin: 0 0 40px;
    color: #4A5565;
}

.kontakt-section__form-title {
    font-size: 46px;
    font-weight: 400;
    color: #1A2332;
    margin: 0 0 28px;
}
.kontakt-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.kontakt-detail {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.kontakt-detail__icon {
    color: var(--brand);
    flex-shrink: 0;
    margin-top: 3px;
}

.kontakt-detail__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

section.related.products h2 {
    font-weight: 500 !important;
}

.kontakt-detail__text--link {
    text-decoration: none;
    color: #232323;
    transition: color 0.2s;
}
.kontakt-detail__label {
    font-size: 18px;
    font-weight: 400;
    color: #565656;
}
span.wpcf7-list-item-label {
    font-size: 14px;
}

.kontakt-detail__label--name {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: 0;
}

.kontakt-detail__text--address {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: 0;
}

.kontakt-detail__icon svg{
width: 22px;
height: 22px;
}


/* --- Form column --- */

.kontakt-section__form-wrap {
    background: transparent;
    border: 1px solid #EDE0D9;
    border-radius: 20px;
    padding: 40px;
}
.kontakt-details__heading {
    font-size: 24px;
    font-weight: 4400;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: #2E2E2E;
    /* text-transform: uppercase; */
    /* color: #8C7B6E; */
    margin: 0 0 16px;
}

/* Generic form field styling (CF7, WPForms, Gravity Forms) */
.kontakt-section__form input[type="text"],
.kontakt-section__form input[type="email"],
.kontakt-section__form input[type="tel"],
.kontakt-section__form textarea {
    width: 100%;
    padding: 14px 16px;
    font-size: 14px;
    color: #1A1009;
    background: transparent;
    border: 1px solid #EDE0D9;
    border-radius: 10px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
    font-family: inherit;
}

.kontakt-section__form input[type="text"]:focus,
.kontakt-section__form input[type="email"]:focus,
.kontakt-section__form input[type="tel"]:focus,
.kontakt-section__form textarea:focus {
    border-color: #C97D3A;
}

.kontakt-section__form textarea {
    min-height: 130px;
    resize: vertical;
}

.kontakt-section__form input[type="submit"],
.kontakt-section__form button[type="submit"],
.kontakt-section__form .wpcf7-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: #B8825D;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
    width: 100%;
    justify-content: center;
}

.kontakt-section__form input[type="submit"]:hover,
.kontakt-section__form button[type="submit"]:hover,
.kontakt-section__form .wpcf7-submit:hover {
    background: var(--brand-hover);
}

/* CF7 — remove default margins/borders on form wrapper */
.kontakt-section__form .wpcf7 { margin: 0; }
.kontakt-section__form .wpcf7-form p { margin: 0 0 16px; }
.kontakt-section__form .wpcf7-form p:last-child { margin-bottom: 0; }
.kontakt-section__form .wpcf7-form br { display: none; }
.kontakt-section__form span.wpcf7-form-control-wrap { display: block; }

/* Acceptance checkbox */
.kontakt-section__form .wpcf7-acceptance { font-size: 13px; color: #5C4E43; line-height: 1.5; }
.kontakt-section__form .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.kontakt-section__form .wpcf7-acceptance input[type="checkbox"] { width: auto; margin-right: 8px; accent-color: #C97D3A; }
.kontakt-section__form .wpcf7-acceptance a { color: var(--brand); text-decoration: underline; }
.kontakt-section__form .kontakt-accept { margin: 0 0 20px; }

/* ============================================================
   STANDORT SECTION (Karte)
   ============================================================ */

.standort-section {
    background: #FEFEFD;
    padding: 50px 0;
}

.standort-section__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
}

.standort-section__header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 48px;
}

.standort-section__eyebrow {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #B8825D;
    margin: 0;
}

.standort-section__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: 48px;
    font-weight: 400;
    color: #1A1A1A;
    margin: 0;
    line-height: 48px;
    letter-spacing: 0px;
}

.standort-section__map {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #EDE0D9;
}

.standort-section__map iframe {
    display: block;
    width: 100%;
    height: 450px;
    border: none;
}

/* --- Map consent gate (DSGVO: nothing loads from Google until opt-in) --- */

.map-consent {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 450px;
    padding: 40px 24px;
    background: #FAF7F5;
    background-image:
        linear-gradient(#F1E6DE 1px, transparent 1px),
        linear-gradient(90deg, #F1E6DE 1px, transparent 1px);
    background-size: 48px 48px, 48px 48px;
}

.map-consent[hidden] {
    display: none;
}

.map-consent__panel {
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 28px;
    text-align: center;
    background: #FEFEFD;
    border: 1px solid #EDE0D9;
    border-radius: 16px;
}

.map-consent__icon {
    display: flex;
    color: #C97D3A;
}

.map-consent__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.3;
    color: #1A1A1A;
    margin: 0;
}

.map-consent__text {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: #565656;
    margin: 0;
}

.map-consent__text a {
    color: var(--brand);
    text-decoration: underline;
}

.map-consent__btn {
    margin-top: 8px;
    padding: 13px 28px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #FFFFFF;
    background: var(--brand);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s;
}

.map-consent__btn:hover {
    background: var(--brand-hover);
}

.map-consent__remember {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    gap: 8px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 13px;
    line-height: 1.4;
    color: #8C7B6E;
    cursor: pointer;
}

.map-consent__remember input {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    accent-color: #C97D3A;
    cursor: pointer;
}

.standort-section__map--loaded {
    position: relative;
}

.map-revoke {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 8px 14px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #565656;
    background: rgba(254, 254, 253, 0.94);
    border: 1px solid #EDE0D9;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.2s;
}


/* ============================================================
   BLOGS SECTION
   ============================================================ */

.blogs-section {
    background: #FEFEFD;
    overflow: hidden;
    /* Oben denselben Abstand wie unten: der Kopf, der frueher den Raum
       zum Hero darueber gab, ist weg (nicht im Figma). */
    padding-block: 50px;
}

/* ── Grid wrapper ──
   Sitzt im Seitenraster wie .container: Vorher nur 20px Innenabstand ohne
   max-width - auf Bildschirmen breiter als 1440px lief das Karten-Raster
   bis an den Rand, waehrend Hero und Footer zentriert blieben. */
.blogs-section__grid-wrap {
    width: 100%;
    max-width: var(--page-box);
    margin-inline: auto;
    padding-inline: var(--page-gutter);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.blog-card__title {
    font-size: 20px;
    font-weight: 400;
    color: #000000;
    margin: 0;
    line-height: 1.3;
}
.blog-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 400;
    color: #B8825D;
    text-decoration: none;
    margin-top: 6px;
    transition: color 0.2s;
}
/* Grid */
.blogs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* Card */
.blog-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.25s, transform 0.25s;
    border: 1px solid #E3E4E7 ;
}

.blog-card:hover {
    box-shadow: 0 10px 36px rgba(30, 20, 10, 0.13);
    transform: translateY(-3px);
}

.blog-card__image-link {
    display: block;
}

.blog-card__image-wrap {
    aspect-ratio: 430 / 220;
    overflow: hidden;
}

.blog-card__image-wrap img,
.blog-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.blog-card:hover .blog-card__image-wrap img,
.blog-card:hover .blog-card__image {
    transform: scale(1.05);
}

.blog-card__content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.blog-card__category {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #C97D3A;
    margin: 0;
}

.blog-card__title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}


.blog-card__excerpt {
    font-size: 15px;
    line-height: 1.65;
    color: #4A5565;
    margin: 0;
    flex: 1;
}

.blog-card__link:hover {
    color: var(--brand-hover);
}

/* Pagination */
.blogs-section__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.blogs-section__pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--brand);
    font-size: 14px;
    font-weight: 600;
    color: #3D2B1F;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.blogs-section__pagination .page-numbers:hover {
    background: var(--brand-tint);
    border-color: var(--brand-hover);
    color: #3D2B1F;
}

.blogs-section__pagination .page-numbers.current {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.blogs-section__pagination .page-numbers.dots {
    border-color: transparent;
    background: none;
    cursor: default;
}

/* ============================================================
   SINGLE BLOG
   ============================================================ */

/* ── Hero ── */
.single-blog__hero,
.single-blog__hero--right,
.single-blog__hero--left {
    background-color: #FDFBF8;
    display: flex;
    align-items: stretch;
    min-height: 540px;
    overflow: hidden;
}

.single-blog__hero--left {
    flex-direction: row-reverse;
}

.single-blog__hero--bottom {
    background-color: #FDFBF8;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.single-blog__hero-content {
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 64px 80px 80px;
    gap: 20px;
}

.single-blog__hero--bottom .single-blog__hero-content {
    flex: none;
    padding: 64px 80px 40px;
}

.single-blog__hero-image-wrap {
    flex: 0 0 55%;
    position: relative;
    overflow: hidden;
}

.single-blog__hero--bottom .single-blog__hero-image-wrap {
    flex: none;
    width: calc(100% - 160px);
    height: 480px;
    margin: 0 80px 64px;
}

.single-blog__hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 20px 0 0 20px;
}

.single-blog__hero--left .single-blog__hero-image {
    border-radius: 0 20px 20px 0;
}

.single-blog__hero--bottom .single-blog__hero-image {
    border-radius: 20px;
}

.single-blog__breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #B8825D;
}

.single-blog__breadcrumb a {
    color: #B8825D;
    text-decoration: none;
    transition: opacity 0.2s;
}

.single-blog__breadcrumb a:hover {
    color: var(--brand-hover);
    text-decoration: underline;
}

.single-blog__breadcrumb span {
    color: #B8825D;
    font-size: 12px;
}

.single-blog__breadcrumb span[aria-hidden="true"] {
    opacity: 0.5;
}

.single-blog__date-eyebrow {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #B8825D;
    margin: 0;
}

.single-blog__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 400;
    line-height: 1.1;
    color: #1A1A1A;
    margin: 0;
}

.single-blog__intro {
    font-size: 16px;
    line-height: 1.65;
    color: #5C4E43;
    margin: 0;
    max-width: 480px;
}

/* ── Body: content + sidebar ── */
.single-blog__body {
    background: #FEFEFD;
    padding: 30px 0;
    border-bottom: 1px solid #EDE0D9;
}

.blog-content-block__date {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #B8825D;
    margin: 0 0 0.6em;
}


.single-blog__body-inner {
    padding: 0 20px;
    display: grid;
    font-weight: 400;
    grid-template-columns: 1fr 360px;
    gap: 64px;
    align-items: start;
}

/* ── Article content typography ── */
.single-blog__content {
    background: #fff;
    border-radius: 20px;
    font-size: 17px;
    line-height: 1.75;
    color: #4A5565;
}

.single-blog__content h2 {
    font-size: 24px;
    font-weight: 700;
    color: #1A1009;
    margin: 2em 0 0.6em;
    line-height: 1.2;
}

/* Intro block acts as the article's main title (full width, no sidebar) */
.single-blog__content h3 {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 700;
    color: #1A1009;
    margin: 1.75em 0 0.5em;
    line-height: 1.25;
}

.single-blog__content h4 {
    font-size: 18px;
    font-weight: 600;
    color: #1A1009;
    margin: 1.5em 0 0.4em;
}

.single-blog__content p {
    margin: 0 0 1.4em;
}

.single-blog__content p:last-child {
    margin-bottom: 0;
}

.single-blog__content a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.single-blog__content a:hover {
    color: var(--brand-hover);
}

.single-blog__content ul,
.single-blog__content ol {
    margin: 0 0 1.4em 1.5em;
    padding: 0;
}

.single-blog__content li {
    margin-bottom: 0.4em;
}

.single-blog__content-image {
    display: block;
    width: 100%;
    max-height: 652px;
    max-width: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.single-blog__content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 1.5em 0;
    display: block;
}

.single-blog__content blockquote {
    border-left: 4px solid #C97D3A;
    padding: 12px 24px;
    margin: 2em 0;
    background: #FDF8F4;
    border-radius: 0 12px 12px 0;
    font-size: 18px;
    font-style: italic;
    color: #5C4E43;
}

.single-blog__content blockquote p {
    margin: 0;
}

.single-blog__content > *:first-child {
    margin-top: 0;
}

/* ── Sidebar ── */
.single-blog__sidebar {
    position: sticky;
    top: 100px;
}

.single-blog__related {
    background: #fff;
    border-radius: 20px;
    padding: 32px;
}

.single-blog__view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 400;
    color: #B8825D;
    text-decoration: none;
    margin-top: 20px;
    transition: color 0.2s;
}

.single-blog__view-all:hover {
    color: var(--brand-hover);
}
.single-blog__related-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Related post card ── */
.related-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid #EDE0D9;
    text-decoration: none;
    transition: opacity 0.2s;
}

.related-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.related-card:first-child {
    padding-top: 0;
}


.related-card__image-wrap {
    flex: 0 0 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
}

.related-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.related-card__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.related-card__title {
    font-size: 14px;
    font-weight: 600;
    color: #1A1009;
    margin: 0;
    line-height: 1.35;
}

.related-card__excerpt {
    font-size: 13px;
    color: #8C7B6E;
    margin: 0;
    line-height: 1.5;
}

/* ============================================================
   SPLIT SECTION (Image + Text)
   ============================================================ */
.split-section {
    background-color: #FEFEFD;
    border-bottom: 1px solid #EDE0D9;
}

.split-section--cream {
    background-color: #F5F0EB;
}

.split-section__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding-bottom:50px;
    padding-top:0px !important;
    display: flex;
    align-items: center;
    gap: 110px;
}

.split-section--image-right .split-section__inner {
    flex-direction: row-reverse;
}

/* Image column */
.split-section__image-col {
    flex: 0 0 50%;
    max-width: min(50%, 600px);
    aspect-ratio: 1 / 1;
}

.split-section__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 14px;
}

/* Content column */
.split-section__content {
    flex: 1;
    max-width: 690px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.split-section__eyebrow {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #B8825D;
    margin: 0;
}

.split-section__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: 48px;
    font-weight: 400;
    color: #1A1A1A;
    margin: 0;
    line-height: 48px;
    letter-spacing: 0px;
}

.split-section__description {
    font-size: 16px;
    font-weight: 400;
    color: #4A5565;
    line-height: 24px;
    letter-spacing: 0px;
    margin: 0;
}

.split-section__bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.split-section__bullets li {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
    padding-left: 20px;
    position: relative;
}

.split-section__bullets li::before {
    content: '·';
    position: absolute;
    left: 0;
    color: #B8825D;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
}

.split-section__btn {
    display: inline-block;
    background-color: #B8825D;
    color: #fff;
    padding: 12px 24px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: background-color 0.15s;
    align-self: flex-start;
}

.split-section__btn:hover {
    background-color: var(--brand-hover);
    color: #fff;
}

/* ============================================================
   SINGLE EVENT — HERO + INFO BAR
   ============================================================ */
.single-event-hero {
    background-color: #FDFDFC;
    overflow: hidden;
}

.single-event-hero__inner {
    display: flex;
    align-items: stretch;
    min-height: 560px;
}

.single-event-hero__content {
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 64px 80px 20px;
    gap: 20px;
}

.single-event-hero__eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8C7B6E;
    margin: 0;
}

.single-event-hero__title {
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 700;
    line-height: 1.1;
    color: #1A1009;
    margin: 0;
}

.single-event-hero__title-highlight {
    color: #C47A3A;
    display: block;
}

.single-event-hero__description {
    font-size: 16px;
    line-height: 1.65;
    color: #5C4E43;
    margin: 0;
    max-width: 480px;
}

.single-event-hero__image-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
    overflow: hidden;
}

.single-event-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.single-event-info-bar__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.single-event-info-bar__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px;
    border-right: 1px solid #EDE0D9;
}

.single-event-info-bar__item:last-child {
    border-right: none;
}

.single-event-info-bar__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    color: #B8825D;
}
.single-event-info-bar__text strong {
    font-size: 16px;
    font-weight: 700;
    color: #101828;
}
.single-event-info-bar__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.single-event-info-bar__text span {
    font-size: 14px;
    color: #6A7282;
    font-weight: 400;
}
.single-event-info-bar {
    display: none;
}

/* ============================================================
   EVENT DETAILS SECTION (Beschreibung + Details)
   ============================================================ */
.event-details-section {
    background-color: #FEFEFD;
    margin:0px 20px;
    border-bottom: 1px solid #EDE0D9;
    padding-bottom: 70px;
}

.event-details-section--cream {
    background-color: #F5F0EB;
}

.event-details-section__inner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 80px;
    align-items: start;
}

.event-details-section__col-title {
    font-size: 22px;
    font-weight: 400;
    color: #1A1009;
    margin: 0 0 20px;
}

.event-details-section__content {
    color: #444;
    font-size: 15px;
    line-height: 1.7;
}

.event-details-section__content h3,
.event-details-section__content h4 {
    font-size: 18px;
    color: #1A1009;
    margin: 24px 0 8px;
}
.event-details-section__description {
    padding-right: 30px;
    border-right: 1px solid #EDE0D9;
}

.event-details-section__details {
    position: relative;
}

.event-details-section__col-title,
.event-details-section__list {
    position: relative;
    z-index: 1;
}

.event-details-section__content p {
    margin: 0 0 16px;
    font-family: Instrument Sans;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
}

.event-details-section__row {
    font-size: 16px;
    font-weight: 400;
    color: #4A5565;
    line-height: 1.7;
    margin: 0 0 12px;
}

.event-details-section__row strong {
    color: #1A1009;
    font-weight: 600;
}

/* ============================================================
   RECHNER SECTION (Calculator Embed)
   ============================================================ */
.rechner-section {
    background-color: #FCFAF9;
    border-top: 1px solid #EDE0D9;
}

.rechner-section__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 50px 20px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.rechner-section__eyebrow {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #B8825D;
    margin: 0 0 12px;
}

.rechner-section__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 400;
    color: #1A1A1A;
    margin: 0;
    line-height: 1.2;
}

.rechner-section__embed {
    width: 100%;
    min-height: 500px;
    border-radius: 8px;
    overflow: hidden;
}

.rechner-section__embed iframe {
    width: 100%;
    min-height: 500px;
    border: none;
    display: block;
}

/* ============================================================
   Mega Menu
   ============================================================ */

/* Hide native WP sub-menu for mega items */
/* Echte WP-Unterpunkte unter einem Mega-Eintrag nie als Dropdown zeigen -
   das Panel uebernimmt. Die Inline-Kopie fuer die Mobilnavigation
   (.sub-menu--mega) ist davon ausgenommen. */
.nav-menu > li.has-mega-menu > .sub-menu:not(.sub-menu--mega) {
    display: none !important;
}

/* Backdrop */
.mega-backdrop {
    display: none;
    position: fixed;
    top: 75.5px;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 997;
    cursor: default;
}
.mega-backdrop.is-active {
    display: block;
}

/* Panel */
.mega-panel {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #FEFDFC;
    border-top: 1px solid #EDE0D9;
    border-bottom: 1px solid #EDE0D9;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
    z-index: 998;
}
.mega-panel[hidden] {
    display: none;
}

/* Open animation — fade + slide-up, staggered reveal
   (panel -> column titles -> links -> featured cards),
   inspired by klavierhaus-langer.at. Replays every time a
   panel loses its [hidden] attribute; no JS changes needed. */
@keyframes mega-panel-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes mega-item-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mega-panel:not([hidden]) {
    animation: mega-panel-in 240ms ease both;
}

.mega-panel:not([hidden]) .mega-col__title {
    animation: mega-item-in 220ms ease both;
    animation-delay: 70ms;
}

.mega-panel:not([hidden]) .mega-col__links > li {
    animation: mega-item-in 220ms ease both;
}

.mega-panel:not([hidden]) .mega-featured__card {
    animation: mega-item-in 220ms ease both;
}

.mega-panel:not([hidden]) .mega-col__links > li:nth-child(1)  { animation-delay: 110ms; }
.mega-panel:not([hidden]) .mega-col__links > li:nth-child(2)  { animation-delay: 135ms; }
.mega-panel:not([hidden]) .mega-col__links > li:nth-child(3)  { animation-delay: 160ms; }
.mega-panel:not([hidden]) .mega-col__links > li:nth-child(4)  { animation-delay: 185ms; }
.mega-panel:not([hidden]) .mega-col__links > li:nth-child(5)  { animation-delay: 210ms; }
.mega-panel:not([hidden]) .mega-col__links > li:nth-child(6)  { animation-delay: 235ms; }
.mega-panel:not([hidden]) .mega-col__links > li:nth-child(7)  { animation-delay: 260ms; }
.mega-panel:not([hidden]) .mega-col__links > li:nth-child(8)  { animation-delay: 285ms; }
.mega-panel:not([hidden]) .mega-col__links > li:nth-child(9)  { animation-delay: 310ms; }
.mega-panel:not([hidden]) .mega-col__links > li:nth-child(10) { animation-delay: 335ms; }
.mega-panel:not([hidden]) .mega-col__links > li:nth-child(n+11) { animation-delay: 335ms; }

.mega-panel:not([hidden]) .mega-featured__card:nth-child(1) { animation-delay: 160ms; }
.mega-panel:not([hidden]) .mega-featured__card:nth-child(2) { animation-delay: 200ms; }

@media (prefers-reduced-motion: reduce) {
    .mega-panel:not([hidden]),
    .mega-panel:not([hidden]) .mega-col__title,
    .mega-panel:not([hidden]) .mega-col__links > li,
    .mega-panel:not([hidden]) .mega-featured__card {
        animation: none !important;
    }
}

.mega-panel__inner {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px 20px;
}

/* Columns */
.mega-col {
    flex: 1;
    min-width: 0;
}

.mega-col__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 22.75px;
    letter-spacing: 0px;
    color: #B8825D !important;
    margin: 0 0 10px;
}

.mega-col__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    color: #000;
    gap: 6px;
}

.mega-panel .mega-col__links a {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 22.75px;
    letter-spacing: 0px;
    color: #000000;
    text-decoration: none;
    transition: color 0.12s;
    display: block;
}
.mega-panel .mega-col__links a:hover {
    color: #B8825D;
}

/* Featured product cards */
.mega-featured {
    flex: 0 0 auto;
    display: flex;
    gap: 14px;
}

.mega-featured__card {
    display: block;
    position: relative;
    width: 222px;
    text-decoration: none;
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow 0.15s;
}
.mega-featured__card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.mega-featured__img-wrap {
    width: 100%;
    height: 290px;
    overflow: hidden;
    background: #F5F0EB;
}
.mega-featured__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mega-featured__name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    padding: 30px 14px 14px;
    margin: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
    background-color: #FEFDFC;
    border-bottom: 1px solid #EDE0D9;
    height: 75.5px;
    position: sticky;
    top: 0;
    z-index: 999;
    width: 100%;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 100%;
}

.header-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.header-logo img {
    height: 47px;
    width: auto;
}

.header-logo .site-title {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
    color: #111;
    letter-spacing: -0.01em;
}

.header-logo .site-title svg {
    flex-shrink: 0;
}

/* Nav */
.header-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.header-nav .nav-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-nav .nav-menu > li > a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #0B0B0B;
    font-size: 15px;
    font-weight: 400;
    padding: 6px 14px;
    border-radius: 4px;
    outline: none;
    transition: background-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.header-nav .nav-menu > li > a:hover {
    color: #B8825D;
}

.header-nav .nav-menu > li > a[aria-expanded="true"] {
    color: #B8825D;
}

.header-nav .nav-menu > li.current-menu-item > a,
.header-nav .nav-menu > li.current-menu-ancestor > a {
    color: #B8825D;
}

/* Dropdown chevron on items with children */
.header-nav .nav-menu > li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    margin-left: 2px;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    flex-shrink: 0;
    transition: background-color 0.15s, transform 0.2s ease;
}

/* Sub-menu dropdown */
.header-nav .nav-menu li {
    position: relative;
}

.header-nav .nav-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid #EDE0D9;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    list-style: none;
    margin: 0;
    padding: 6px;
    z-index: 100;
}

/* Dropdowns open on click (same as the mega menus) — the JS toggles
   .is-open / aria-expanded; no :hover so they cannot fight an open panel. */
.header-nav .nav-menu li > .sub-menu.is-open {
    display: block;
}

/* Desktop: stretch the nav and its top-level items to the full header
   height so a dropdown's top:100% lands on the header's bottom edge —
   the same line the mega panel (top:100% of .site-header) starts on.
   Without this the <li> is only as tall as its link, so the dropdown
   opened ~20px higher than the mega menu. */
@media (min-width: 1025px) {
    /* Die Inline-Kopie der Mega-Links ist nur fuer die Mobilnavigation da. */
    .header-nav .nav-menu .sub-menu--mega {
        display: none !important;
    }

    .header-nav {
        align-self: stretch;
    }

    .header-nav .nav-menu {
        align-items: stretch;
    }

    .header-nav .nav-menu > li {
        display: flex;
        align-items: center;
    }
}

.header-nav .nav-menu > li.menu-item-has-children:not(.has-mega-menu) > a[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.header-nav .nav-menu .sub-menu a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    border-radius: 4px;
    transition: background-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.header-nav .nav-menu .sub-menu a:hover {
    background-color: transparent;
    color: #B8825D;
}

/* CTA */
.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.header-cta {
    flex-shrink: 0;
}

/* Warenkorb-Icon mit Badge (siehe klavier_loft_header_cart) */
.header-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    color: #0B0B0B;
    text-decoration: none;
    transition: color 0.2s;
}

.header-cart:hover {
    color: var(--brand);
}

.header-cart__count {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    box-sizing: border-box;
}

.header-cart__count--empty {
    display: none;
}

.btn-kontakt {
    display: inline-block;
    background-color: #B8825D;
    color: #fff !important;
    padding: 8px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: background-color 0.15s;
    white-space: nowrap;
}

.btn-kontakt:hover {
    background-color: var(--brand-hover);
    color: #fff;
}

/* Mobile nav toggle (hamburger) */
.mobile-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

.mobile-nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #1A1009;
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}

.mobile-nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.header-nav__mobile-cta {
    display: none;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    background-color: #FBFAFA;
    border-top: 1px solid #F3F4F6;
}

.footer-inner {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1.6fr;
    gap: 31px;
    padding: 50px 20px 48px;
}

/* Brand col */
.footer-brand .footer-logo {
    margin-bottom: 14px;
}

.footer-brand .footer-logo img {
    width:150px;
    height: 47px;
}

.footer-brand .footer-site-name {
    font-size: 17px;
    font-weight: 600;
    color: #111;
    font-family: 'Instrument Sans', sans-serif;
}

.footer-brand .footer-desc {
    font-size: 16px;
    color: #6A7282;
    font-weight: 400;
    line-height: 1.65;
    margin: 0 0 16px;
    font-family: 'Instrument Sans', sans-serif;
}

.footer-social {
    display: flex;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: #99A1AF;
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.footer-social a:hover {
    color: #B8825D;
}

/* Footer columns */
.footer-col h4 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #101828;
    margin: 0 0 18px;
    font-family: 'Instrument Sans', sans-serif;
}

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul#menu-footer-service li a ,ul#menu-footer-unternehmen{
    font-weight: 400;
    font-size: 16px;
}

.footer-menu li {
    margin-bottom: 10px;
}

.footer-menu a {
   
    font-weight: 400;
    font-size: 16px;
    color: #6A7282;
    text-decoration: none;
    transition: color 0.15s;
    font-family: 'Instrument Sans', sans-serif;
}

.footer-col.footer-newsletter{
    font-size: 16px;
    font-weight: 400;
    color:#6A7282;
}
/* Contact col */
.footer-contact__address {
    display: block;
    font-size: 16px;
    color: #6A7282;
    font-weight: 400;
    line-height: 1.65;
    margin: 0 0 16px;
    font-family: 'Instrument Sans', sans-serif;
}

.footer-contact__line {
    font-size: 16px;
    color: #6A7282;
    font-weight: 400;
    line-height: 1.65;
    margin: 0 0 12px;
    font-family: 'Instrument Sans', sans-serif;
}

.footer-contact__line a {
    color: #6A7282;
    text-decoration: none;
    transition: color 0.15s;
    font-family: 'Instrument Sans', sans-serif;
}


/* Newsletter col */
.footer-newsletter p {
     font-size: 16px;
    color: #6A7282;
    line-height: 1.65;
    font-weight: 400;
    margin: 0 0 16px;
}

.newsletter-form {
    display: flex;
    align-items: center;
    gap: 8px;
}
address.showroom-cta__address svg{
    width:24px !important;
    height:24px !important;
}
section#geschichte {
    border-bottom: 1px solid #EDE0D9;
}

.gesch-section__right 
{
    padding-top:60px;
}
.newsletter-form input {
    flex: 1;
    height: 40px;
    padding: 0 16px;
    border: 1px solid #DDD5CE;
    border-radius: 8px;
    font-size: 14px;
    color: #2D2A26;
    background: transparent;
    outline: none;
    min-width: 0;
    font-family: 'Instrument Sans', sans-serif;
}

.newsletter-form input::placeholder {
    color: #aaa;
}

.newsletter-form button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 38px;
    border-radius: 4px;
    flex-shrink: 0;
    background: #B8825D;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s;
}

.newsletter-form button:hover {
    background: var(--brand-hover);
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid #EDE0D9;
}

.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
}

.footer-bottom-right {
    display: flex;
    align-items: center;
    gap: 32px;
}

.footer-copy {
    font-size: 12px;
    color: #999;
    white-space: nowrap;
}

.legal-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
}

.legal-menu a {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0px;
    color: #6A7282;
    text-decoration: none;
    transition: color 0.15s;
}

.legal-menu a:hover {
    color: #B8825D;
}

/* Payment icons */
.footer-payment {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.payment-icon {
    display: inline-flex;
  width: 46;
height: 32;

    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.payment-icon svg {
    width: 100%;
    height: 100%;
}

section.split-section.split-section--image-right {
    padding-top:50px;
}

/* Leistungen Section (Services Grid) */
.leistungen-section {
    background-color: #fff;
}

.leistungen-section__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding-top:30px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.leistungen-section__header {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.leistungen-section__eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #B8825D;
    margin: 0;
    line-height: 16px;
}

.leistungen-section__title {
    font-size: 48px;
    font-weight: 400;
    color: #1A1A1A;
    margin: 0;
    line-height: 48px;
}

.leistungen-section__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px;
    padding: 0 26px;
}

.leistungen-card {
    background-color: #FDFDFD;
    border: 1px solid #E3E4E7;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.leistungen-card__image-wrap {
    height: 230px;
    overflow: hidden;
}

.leistungen-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.leistungen-card:hover .leistungen-card__image {
    transform: scale(1.08);
}

.leistungen-card__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px;
}

.leistungen-card__title {
    font-size: 20px;
    font-weight: 400;
    color: #1A1A1A;
    line-height: 28px;
    margin: 0;
}

.leistungen-card__desc {
    font-size: 14px;
    color: #6A7282;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
}

.leistungen-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 500;
    color: var(--brand);
    text-decoration: none;
    margin-top: 4px;
    transition: color 0.2s;
}

.leistungen-card__btn:hover {
    color: var(--brand-hover);
}

/* ============================================================
   WOOCOMMERCE — SHARED (page container, notices, buttons)
   ============================================================ */
:root {
    --wc-primary: #B8825D;
    --wc-primary-hover: var(--brand-hover);
    --wc-title: #1A1A1A;
    --wc-text: #5C4E43;
    --wc-border: #EDE0D9;
    --wc-input-bg: #FDF8F4;
    --wc-input-border: #D5C5BB;
    --wc-surface: #FFFFFF;
    --wc-page-bg: #FEFEFD;
}

/* Full-width page background behind Cart/Checkout/My Account (woocommerce-page body class) */
body.woocommerce-page .site-main {
    background-color: var(--wc-page-bg);
}

.site-main .woocommerce,
.site-main .wp-block-woocommerce-cart,
.site-main .wp-block-woocommerce-checkout {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 20px;
    color: var(--wc-text);
    font-size: 15px;
    line-height: 1.6;
}

.woocommerce a,
.wc-block-cart a,
.wc-block-checkout a {
    color: inherit;
}

.woocommerce h1, .woocommerce h2, .woocommerce h3,
.wc-block-cart h1, .wc-block-cart h2, .wc-block-cart h3,
.wc-block-checkout h1, .wc-block-checkout h2, .wc-block-checkout h3,
.wc-block-components-checkout-step__title,
.wc-block-cart__totals-title,
.wc-block-components-totals-item__label {
    color: var(--wc-title);
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-weight: 400;
}

/* Generic WC buttons (used across My Account: pay, cancel order, download, save changes...) */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button,
.wp-block-woocommerce-cart .wc-block-components-button,
.wp-block-woocommerce-checkout .wc-block-components-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--wc-primary) !important;
    color: #fff !important;
    border: none;
    border-radius: 10px;
    padding: 13px 28px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    cursor: pointer;
    transition: background-color 0.2s, opacity 0.2s;
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wc-block-components-button:hover {
    background-color: var(--wc-primary-hover) !important;
    color: #fff !important;
}

.woocommerce .button.alt,
.woocommerce a.button.alt {
    background-color: var(--wc-primary) !important;
}

/* Secondary / outline buttons (e.g. "Return to shop", "Cancel") */
.woocommerce a.button.wc-forward,
.wc-block-components-button.wc-block-components-button--outlined,
.wc-block-cart__submit-container .wc-block-components-button.is-style-outline,
.wp-block-button__link.is-style-outline {
    background-color: transparent !important;
    color: var(--wc-primary) !important;
    border: 1px solid var(--wc-primary);
}

/* Notices (classic) */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-NoticeGroup ul {
    list-style: none;
    margin: 24px 0 24px;
    padding: 16px 20px;
    border-radius: 10px;
    background-color: #fff;
    border: 1px solid var(--wc-border);
    border-left: 4px solid var(--wc-primary);
    color: var(--wc-title);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.woocommerce-error { border-left-color: #B3453D; }
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button { margin: 0; }

/* Notices (blocks) */
.wc-block-components-notice-banner {
    border-radius: 10px !important;
    border: 1px solid var(--wc-border) !important;
    background-color: #fff !important;
}

.wc-block-components-notice-banner.is-error { border-color: #B3453D !important; }

/* Base form fields shared by classic forms and select2 */
.woocommerce form .form-row label,
.woocommerce-EditAccountForm label,
.woocommerce-address-fields label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--wc-title);
    margin-bottom: 6px;
}

.woocommerce form .input-text,
.woocommerce form select,
.woocommerce form textarea,
.woocommerce-EditAccountForm input[type="text"],
.woocommerce-EditAccountForm input[type="email"],
.woocommerce-EditAccountForm input[type="password"] {
    width: 100%;
    padding: 13px 16px;
    font-size: 14px;
    color: var(--wc-title);
    background: var(--wc-input-bg);
    border: 1px solid var(--wc-input-border);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
    font-family: inherit;
}

.woocommerce form .input-text:focus,
.woocommerce form select:focus,
.woocommerce form textarea:focus {
    border-color: var(--wc-primary);
}

/* Show/hide password toggle (injected by WooCommerce's woocommerce.js) */
.woocommerce form .password-input {
    display: flex;
    position: relative;
}

.woocommerce form .password-input input[type="password"],
.woocommerce form .password-input input[type="text"] {
    padding-right: 44px;
}

.woocommerce form .show-password-input {
    background-color: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    line-height: 0;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.woocommerce form .show-password-input:hover {
    opacity: 1;
}

.woocommerce form .show-password-input::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2437 5.3079 11.1267 5.1048 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z" fill="%231A1A1A"/></svg>');
}

.woocommerce form .show-password-input.display-password::before {
    background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.3 9.49999C15 4.89999 8.50002 3.79999 3.90002 7.19999C2.70002 8.09999 1.70002 9.29999 0.900024 10.6C1.10002 11 1.40002 11.4 1.70002 11.8C5.00002 16.4 11.3 17.4 15.9 14.2C16.8 13.5 17.6 12.8 18.3 11.8C18.6 11.4 18.8 11 19.1 10.6C18.8 10.2 18.6 9.79999 18.3 9.49999ZM10.1 7.19999C10.6 6.69999 11.4 6.69999 11.9 7.19999C12.4 7.69999 12.4 8.49999 11.9 8.99999C11.4 9.49999 10.6 9.49999 10.1 8.99999C9.60003 8.49999 9.60003 7.69999 10.1 7.19999ZM10 14.9C6.90002 14.9 4.00002 13.3 2.30002 10.7C3.50002 8.99999 5.10002 7.79999 7.00002 7.19999C6.30002 7.99999 6.00002 8.89999 6.00002 9.89999C6.00002 12.1 7.70002 14 10 14C12.2 14 14.1 12.3 14.1 9.99999V9.89999C14.1 8.89999 13.7 7.89999 13 7.19999C14.9 7.79999 16.5 8.99999 17.7 10.7C16 13.3 13.1 14.9 10 14.9Z" fill="%231A1A1A"/></svg>');
}

.select2-container--default .select2-selection--single {
    height: auto !important;
    padding: 13px 16px !important;
    background: var(--wc-input-bg) !important;
    border: 1px solid var(--wc-input-border) !important;
    border-radius: 10px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 !important;
    line-height: 1.4 !important;
    color: var(--wc-title) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
}

/* ============================================================
   WOOCOMMERCE — CART & CHECKOUT (Blocks)
   ============================================================ */
.wc-block-cart,
.wc-block-checkout {
    display: flex;
    flex-wrap: wrap;
}

.wc-block-cart__title,
.wc-block-checkout__title {
    font-size: clamp(28px, 3vw, 38px);
    margin: 0 0 32px;
}

/* Cart line items */
.wc-block-cart-items__header,
.wc-block-cart-item {
    border-bottom: 1px solid var(--wc-border) !important;
}

/* Produktbild der Warenkorb-Zeile. WooCommerce liefert das <img> mit
   width="80" height="80" und setzt per CSS nur die Breite auf 100% der
   Zelle (64px); die Hoehe blieb beim Attributwert 80px, weil das Theme
   kein globales img { height: auto } hat - ein 3:2-Produktfoto wurde so
   auf 64x80 gestaucht. Hier: Hoehe frei, Format 4:3 wie die Produktkarten
   (.bi-card__image-link), Foto fuellt per cover. */
.wc-block-cart-item__image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
}

/* Breite Zeile (WooCommerce-Klasse is-large, Tabellenlayout): Bildspalte
   auf 120px Bild + 16px Abstand. Die schmalen Varianten (is-medium/-small/
   -mobile) legen die Zeile als Grid mit fester 80px-Spalte an - dort
   bleibt die Spalte, das Bild ist dann 64x48. */
.wc-block-cart.is-large .wc-block-cart-items .wc-block-cart-item__image {
    width: 136px;
    min-width: 136px;
}

.wc-block-components-product-name {
    color: var(--wc-title) !important;
    font-weight: 700;
}

.wc-block-components-product-metadata,
.wc-block-components-product-price,
.wc-block-cart-item__prices {
    color: var(--wc-text);
}

.wc-block-cart-item__remove-link {
    color: var(--wc-primary) !important;
}

/* Quantity selector */
.wc-block-components-quantity-selector {
    border: 1px solid var(--wc-input-border) !important;
    border-radius: 10px !important;
    overflow: hidden;
}

.wc-block-components-quantity-selector__input {
    color: var(--wc-title) !important;
}

.wc-block-components-quantity-selector__button {
    color: var(--wc-primary) !important;
}

/* Totals / sidebar (shared by cart + checkout order summary) */
.wc-block-components-totals-item,
.wc-block-components-totals-footer-item {
    color: var(--wc-text);
}

.wc-block-components-totals-footer-item,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    color: var(--wc-title) !important;
    font-weight: 700;
}

.wc-block-components-totals-coupon-link,
.wc-block-components-panel__button {
    color: var(--wc-primary) !important;
}

.wc-block-components-panel {
    border-color: var(--wc-border) !important;
    border-radius: 10px;
}

/* Checkout steps */
.wc-block-components-checkout-step {
    border-top: 1px solid var(--wc-border);
    padding-top: 28px;
    margin-top: 28px;
}

.wc-block-components-checkout-step:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.wc-block-components-checkout-step__title {
    font-size: 20px;
}

.wc-block-components-checkout-step__description {
    color: var(--wc-text);
}

/* Text inputs (floating label) */
.wc-block-components-text-input input {
    background: var(--wc-input-bg) !important;
    border: 1px solid var(--wc-input-border) !important;
    border-radius: 10px !important;
    color: var(--wc-title) !important;
}

.wc-block-components-text-input input:focus {
    border-color: var(--wc-primary) !important;
}

.wc-block-components-text-input label {
    color: var(--wc-text) !important;
}

/* Radio controls (shipping methods, payment methods) */
.wc-block-components-radio-control__option {
    border: 1px solid var(--wc-input-border) !important;
    border-radius: 10px !important;
    background: var(--wc-surface);
}

.wc-block-components-radio-control__input:checked {
    border-color: var(--wc-primary) !important;
    background-color: var(--wc-primary) !important;
}

.wc-block-components-radio-control__option--checked {
    border-color: var(--wc-primary) !important;
}

.wc-block-checkout__payment-method {
    border-color: var(--wc-border) !important;
}

/* Place order / checkout actions */
.wc-block-components-checkout-place-order-button {
    width: 100%;
    justify-content: center;
}

.wc-block-checkout__terms {
    color: var(--wc-text);
    font-size: 13px;
}

/* ============================================================
   WOOCOMMERCE — MY ACCOUNT (Classic)
   ============================================================ */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
}

/* Login / Register screen (shown when logged out — no MyAccount nav present) */
.woocommerce-account .woocommerce > h2 {
    font-size: 22px;
    color: var(--wc-title);
    margin: 0 0 20px;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--wc-input-bg) inset;
    -webkit-text-fill-color: var(--wc-title);
}

.woocommerce-MyAccount-navigation {
    flex: 0 0 220px;
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.woocommerce-MyAccount-navigation-link a {
    display: block;
    padding: 12px 16px;
    border-radius: 10px;
    color: var(--wc-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: background-color 0.2s, color 0.2s;
}

.woocommerce-MyAccount-navigation-link a:hover {
    background-color: #fff;
    color: var(--wc-title);
}

.woocommerce-MyAccount-navigation-link.is-active a {
    background-color: var(--wc-primary);
    color: #fff;
}

.woocommerce-MyAccount-content {
    flex: 1;
    min-width: 0;
    background-color: var(--wc-surface);
    border: 1px solid var(--wc-border);
    border-radius: 14px;
    padding: 32px;
}

.woocommerce-MyAccount-content > p:first-child { margin-top: 0; }
.woocommerce-MyAccount-content a { font-weight: 600; }

/* Tables (orders, downloads) */
.woocommerce-orders-table,
.woocommerce-table,
table.shop_table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 24px;
}

.woocommerce-orders-table th,
.woocommerce-table th,
table.shop_table th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wc-text);
    padding: 12px 16px;
    border-bottom: 1px solid var(--wc-border);
}

.woocommerce-orders-table td,
.woocommerce-table td,
table.shop_table td {
    padding: 16px;
    border-bottom: 1px solid var(--wc-border);
    color: var(--wc-title);
    font-size: 14px;
}

.woocommerce-orders-table__cell-order-status mark {
    background: none;
    color: var(--wc-primary);
    font-weight: 600;
}

.woocommerce-orders-table__cell-order-actions .button,
table.shop_table .button {
    padding: 8px 16px;
    font-size: 13px;
}

.woocommerce-pagination {
    display: flex;
    gap: 8px;
}

.woocommerce-pagination .button {
    padding: 8px 16px;
}

/* Addresses */
.woocommerce-Addresses {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.woocommerce-Address {
    flex: 1 1 260px;
    background: var(--wc-input-bg);
    border: 1px solid var(--wc-border);
    border-radius: 12px;
    padding: 20px;
}

.woocommerce-Address-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.woocommerce-Address-title h3 {
    margin: 0;
    font-size: 16px;
    color: var(--wc-title);
}

.woocommerce-Address-title .edit {
    color: var(--wc-primary);
    font-weight: 600;
    font-size: 13px;
}

.woocommerce-Address address {
    font-style: normal;
    color: var(--wc-text);
    line-height: 1.7;
}

/* Forms: edit account, edit address, login, register */
.woocommerce-EditAccountForm .form-row,
.woocommerce-address-fields .form-row,
.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row {
    margin-bottom: 18px;
}

.woocommerce-EditAccountForm fieldset,
.woocommerce-address-fields fieldset {
    border: 1px solid var(--wc-border);
    border-radius: 12px;
    padding: 20px;
    margin: 24px 0;
}

.woocommerce-EditAccountForm fieldset legend,
.woocommerce-address-fields fieldset legend {
    padding: 0 8px;
    font-weight: 700;
    color: var(--wc-title);
}

.woocommerce-form-login,
.woocommerce-form-register {
    background: var(--wc-input-bg);
    border: 1px solid var(--wc-border);
    border-radius: 14px;
    padding: 28px;
    max-width: 420px;
}

.woocommerce-form-login .form-row .required,
.woocommerce-EditAccountForm .form-row .required,
.woocommerce-address-fields .form-row .required {
    color: var(--wc-primary);
    text-decoration: none;
}

.woocommerce-form-login__rememberme {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--wc-text);
    font-weight: 400;
}

.woocommerce-LostPassword {
    font-size: 13px;
    margin-top: 12px;
}

/* ============================================================
   WOOCOMMERCE — SINGLE PRODUCT
   ============================================================ */
body.single-product .site-main {
    background-color: #fff;
}

body.single-product #primary {
    max-width: 1400px;
    margin: 0 auto;
    padding:50px 0px;
}

.single-product .woocommerce-breadcrumb {
    display: block;
    padding: 0px;
    padding-bottom: 10px !important;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wc-primary);
}

.single-product div.product {
    display: grid;
    /* minmax(0, 1fr) statt 1fr: "1fr" bedeutet minmax(auto, 1fr), und das
       auto-Minimum verhindert, dass die Spalte kleiner wird als der breiteste
       Inhalt. Die WooCommerce-FlexSlider-Bildreihe hat eine min-content-Breite
       von 840px — dadurch wuchs die Spalte am Handy auf 611px in einem 375px
       Viewport, und rechts wurden ~200px unsichtbar abgeschnitten (body hat
       overflow-x:hidden, es fiel also nicht als Scrollbalken auf). */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 60px;
    align-items: start;
    padding-top: 28px;
}

.single-product .product > .pdp-features,
.single-product .product > .pdp-details,
.single-product .product > .pdp-specs,
.single-product .product > .related.products {
    grid-column: 1 / -1;
}

/* Gallery */
.pdp-gallery-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
}

.woocommerce-product-gallery__wrapper.flexslider .flex-viewport {
    overflow: hidden;
    position: relative;
}

.woocommerce-product-gallery__wrapper ul.slides {
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce-product-gallery__wrapper ul.slides > li {
    margin: 0;
    padding: 0;
}

.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image--placeholder {
    margin: 0;
}

.woocommerce-product-gallery__image img,
.woocommerce-product-gallery__image--placeholder img {
    width: 740px;
    height: 640px;
    aspect-ratio: 740 / 640;
    border-radius: 20px;
    object-fit: cover;
    background-color: var(--wc-input-bg);
}

.woocommerce-product-gallery__trigger {
    display: none;
}

.flex-control-thumbs {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    margin: 16px 0 0;
    padding: 0 0 8px;
    max-width: calc(130px * 5 + 12px * 4);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    list-style: none;
}

ol.flex-control-nav.flex-control-thumbs li {
    flex: 0 0 auto;
}

.flex-control-thumbs img {
    width: 130px;
    height: 130px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 14px;
    border: 2px solid var(--wc-border);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.flex-control-thumbs img.flex-active {
    opacity: 1;
    border-color: #DBBFAC;
}

.pdp-gallery-nav {
    position: absolute;
    top: calc(50% - 20px);
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background-color: #fff;
    color: var(--wc-title);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: background-color 0.15s;
}

.pdp-gallery-nav:hover {
    background-color: var(--wc-input-bg);
}

.pdp-gallery-nav--prev {
    left: 16px;
}

.pdp-gallery-nav--next {
    right: 16px;
}

.pdp-condition-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    background-color: #fff;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #4A5565;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Summary */
.summary.entry-summary {
    display: flex;
    flex-direction: column;
}

.pdp-brand {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wc-primary);
    margin: 0 0 6px;
}

.product_title.entry-title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: var(--pdp-title-size);
    font-weight: 400;
    /* line-height war fix 100px zu 72px Schrift (1.39). Bei kleinerer
       Schrift waere der Abstand sonst unveraendert stehen geblieben. */
    line-height: var(--heading-line-height);
    color: var(--wc-title);
    margin: 0 0 12px;
}

.summary .price {
    font-size: var(--pdp-price-size);
    font-weight: 400;
    color: var(--wc-primary);
    margin: 0 0 16px;
}

.summary .price del {
    font-size: 32px;
    font-weight: 400;
    color: var(--wc-title);
    opacity: 1;
    margin-right: 8px;
    text-decoration: line-through;
}

.summary .price ins {
    text-decoration: none;
    color: var(--wc-primary);
}
.product p.wc-gzd-additional-info {
    clear: left;
    font-size: .9em;
    margin-bottom: 20px !important;
}
.pdp-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: #1A1A1A;
    border: 1px solid var(--brand);
    border-radius: 8px;
    height: 52px;
    padding: 0 24px !important;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.woocommerce-product-details__short-description {
    color:#4A5565;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    margin-bottom: 20px;
}

.woocommerce-product-details__short-description p {
    margin: 0;
}

form.cart {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    max-width: 478px;
    margin: 0 0 24px;
}

form.cart .quantity {
    margin: 0;
}

form.cart .quantity .qty {
    width: 70px;
    padding: 13px 14px;
    font-size: 14px;
    color: var(--wc-title);
    background: var(--wc-input-bg);
    border: 1px solid var(--wc-input-border);
    border-radius: 5px;
    font-family: inherit;
}
.woocommerce .button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .wc-block-components-button, .wp-block-woocommerce-cart .wc-block-components-button, .wp-block-woocommerce-checkout .wc-block-components-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--wc-primary) !important;
    color: #fff !important;
    border: none;
    border-radius: 5px;
    padding: 13px 28px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    cursor: pointer;
    transition: background-color 0.2s, opacity 0.2s;
}

.single_add_to_cart_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--wc-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    height: 52px;
    padding: 0 24px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.single_add_to_cart_button:hover {
    background-color: var(--wc-primary-hover);
}


.pdp-btn-secondary:hover {
    background-color: var(--brand-tint);
    color: #1A1A1A;
    border-color: var(--brand-hover);
}

/* Payment row */
.pdp-payment {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    margin-bottom: 20px;
    border: 1px solid var(--wc-border);
    border-radius: 12px;
}

.pdp-payment__label {
    font-size: 18px;
    font-weight: 600;
    color: var(--wc-title);
}

.pdp-payment__icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}


/* ============================================================
   PRODUKTSEITE — Abgleich mit Figma 1366:1910
   ============================================================ */
/* Breadcrumb kommt von Yoast (.woo-breadcrumbs), nicht von WooCommerce -
   die Regel fuer .woocommerce-breadcrumb griff deshalb nie. Eyebrow-Stil
   wie auf den Seiten-Heros. */
.single-product .woo-breadcrumbs .breadcrumb-trail {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--brand);
}

.single-product .woo-breadcrumbs .breadcrumb-trail a {
    color: var(--brand);
    text-decoration: none;
}

.single-product .woo-breadcrumbs .breadcrumb-trail a:hover {
    color: var(--brand-hover);
}

.single-product .woo-breadcrumbs .breadcrumb_last {
    color: var(--wc-title);
}

/* Variante: Label ueber dem Feld, Feld in voller Breite, kein Reset-Link */
.summary .variations,
.summary .variations tbody,
.summary .variations tr,
.summary .variations th,
.summary .variations td {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    text-align: left;
}

.summary .variations {
    /* form.cart ist flex mit gap: 16px - der Abstand zum Button kommt also
       schon daher; 4px obendrauf ergeben die ~20px der Vorlage. */
    margin: 0 0 4px;
}

.summary .variations th.label label {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--wc-title);
    margin-bottom: 8px;
}

.summary .variations select {
    display: block;
    width: 100%;
    height: 52px;
    padding: 0 48px 0 20px;
    border: 1px solid var(--wc-input-border);
    border-radius: 8px;
    /* appearance: none nimmt dem Browser den eigenen Innenabstand und den
       schmalen System-Pfeil; Text steht dann wie im Button 20px vom Rand,
       der Pfeil aus der Vorlage 20px von rechts. */
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 16px 16px;
    font-size: 16px;
    color: var(--wc-title);
    cursor: pointer;
}

.summary .variations select:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.summary .variations .reset_variations {
    display: none !important;
}

/* Der Button traegt auch .button.alt und faellt damit unter die generische
   WooCommerce-Buttonregel (.woocommerce button.button, spezifischer als eine
   Klasse). Deshalb hier mit passender Spezifitaet. */
.woocommerce .summary form.cart .single_add_to_cart_button {
    height: 52px;
    padding: 0 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
}

/* Bei variablen Produkten sitzen die Buttons in .single_variation_wrap,
   selbst ein Flex-Kind von form.cart und damit nur so breit wie sein
   Inhalt (462px). Auf volle Breite, sonst hat der zweite Button nichts,
   worin er sich dehnen kann. */
.summary form.cart .single_variation_wrap {
    flex: 1 1 100%;
    width: 100%;
}

/* Ohne Mengenauswahl (alle Produkte werden einzeln verkauft) enthaelt
   .quantity nur noch ein verstecktes Feld, belegt im Flex-Formular aber
   weiterhin einen Platz - der 16px-gap rutschte damit vor den ersten
   Button und die Reihe stand 16px rechts vom Text. Kommt die Menge fuer
   eine Kategorie zurueck, muss diese Regel dafuer aufgehoben werden. */
.summary form.cart .quantity {
    display: none;
}

/* Warenkorb-Button und "Weitere Zahlungsmoeglichkeiten" in einer Reihe */
.summary .woocommerce-variation-add-to-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    width: 100%;
}

/* Die beiden Buttons fuellen zusammen exakt die Breite des Auswahlfelds
   (478px): der Warenkorb-Button behaelt seine Textbreite, der zweite
   dehnt sich auf den Rest. */
.summary form.cart .pdp-btn-secondary {
    flex: 1 1 auto;
    min-width: 0;
    /* jetzt ein <button>: Browser-Defaults neutralisieren */
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
}

/* Variantenbeschreibung: Text ja, Bilder nein. Bei einzelnen Produkten
   (z.B. GEWA Klavierbank) wurde pro Variante eine Bildreihe in das
   Beschreibungsfeld eingefuegt, die dann direkt ueber den Warenkorb-Buttons
   auftauchte. Die Produktgalerie zeigt die Bilder bereits. */
.summary .woocommerce-variation-description img,
.summary .woocommerce-variation-description a:has(> img) {
    /* !important: die eingefuegten Bilder tragen inline style="display:block" */
    display: none !important;
}

.summary .woocommerce-variation-description > *:last-child {
    margin-bottom: 0;
}

.summary .woocommerce-variation.single_variation {
    margin-bottom: 16px;
}

/* Karten unter den Buttons: gleiche Breite wie Auswahlfeld und Buttonreihe
   (478px). Die Vorlage zeichnet sie mit 390px schmaler - Kundenwunsch ist
   eine durchgehende Kante. */
.pdp-payment {
    max-width: 478px;
}

/* Financing banner */
.pdp-financing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px;
    margin-bottom: 20px;
    border: 1px solid var(--wc-border);
    border-radius: 12px;
    background-color: #fff;
    max-width: 478px;
    text-decoration: none;
    color: var(--wc-title);
    transition: border-color 0.2s;
}

.pdp-financing:hover {
    border-color: var(--wc-primary);
}

.pdp-financing__logo {
   width: 64;
    height: 57.87633514404297;
    flex-shrink: 0;
    object-fit: contain;
}
.pdp-feature em {
    font-size: 16px;
    font-style: normal;
    color: #6A7282;
}
.pdp-financing__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.pdp-financing__text strong {
    font-size: 18px;
    font-weight: 600;
    color: var(--wc-title);
}

.pdp-financing__text span {
    font-size: 14px;
    color: var(--wc-text);
}

.pdp-financing svg {
    flex-shrink: 0;
    color: var(--wc-primary);
}

/* Feature row */
.pdp-features {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 128px;
    box-sizing: border-box;
    background-color: #F9F8F6;
    border: 1px solid #DBBFAC;
    border-radius: 14px;
    padding: 40px;
    margin-top: 32px;
}

.pdp-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    position: relative;
    padding-left: 20px;
}

.pdp-feature:first-child {
    padding-left: 0;
}

.pdp-feature:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 32px;
    background: var(--wc-border);
}

.pdp-feature svg {
    flex-shrink: 0;
    width: 48px;
    height:48px;
    color:#B8825D;
}

.pdp-feature__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.pdp-feature span {
    display: flex;
    flex-direction: column;

    color: #6A7282;
    font-size: 16px;
    font-weight: 400;

    gap: 2px;
}

.pdp-feature strong {
    font-size: 16px;
    font-weight: 600;
    color: #101828;
    line-height: 1.3;
}

/* Produkt Beschreibung + Specs */
.pdp-details {
    background-color: #FEFEFD;
    padding: 50px 0;
    padding-bottom: 0px !important;
}

.pdp-specs {
    background-color: #FEFEFD;
    padding: 20px 0 50px;
}

.pdp-details__inner {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.pdp-details__left {
    flex: 0 0 40%;
}
.pdp-details__bullets li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #4A5565;
}
.pdp-details__eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wc-primary);
    margin: 0 0 8px;
}

.pdp-details__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: 48px;
    font-weight: 400;
    line-height: 60.9px;
    color: var(--wc-title);
    margin: 0 0 20px;
}

.pdp-details__bullets {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pdp-details__text {
    flex: 1;
    color: #4A5565;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
}

.pdp-details__bullets svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--wc-primary);
}

.pdp-details__text p {
    margin: 0 0 12px;
}

/* Figma 347:5832 (ProductDescription): zwei Boxen à 680px, Abstand 37px */
.pdp-boxes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 37px;
}

/* Box: #F9F8F6 auf 1px #DBC0AD, Radius 20, Padding 36/20, 15px bis zur Liste */
.pdp-box {
    background-color: #F9F8F6;
    border: 1px solid #DBC0AD;
    border-radius: 20px;
    padding: 36px 20px;
}

.pdp-box h3 {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 30px;
    color: #1A1A1A;
    color: var(--wc-title);
    margin: 0 0 15px;
}

.pdp-box dl {
    margin: 0;
}

/* Zeile = 28px Text, 5px Luft, 1px Linie #E3E4E7, 5px Luft — auch nach der
   letzten Zeile steht im Figma eine Linie. Gilt fuer Specs UND Checkliste. */
.pdp-box__row,
.pdp-box__checklist li {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    gap: 5px;
    padding: 5px 0;
    border-bottom: 1px solid #E3E4E7;
    font-size: 16px;
    line-height: 28px;
    color: #4A5565;
}

.pdp-box__row dt {
    color: var(--wc-primary);
    font-weight: 700;
}

.pdp-box__row dd {
    margin: 0;
    color: #4A5565;
    font-weight: 400;
    text-align: left;
}
a.bi-card__btn {
    color: #2D2A26;
}

select#shop-sort-select {
    background: #FFFFFF;
    padding: 15px;
}
.pdp-box__checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    font-weight: 400;
}

.pdp-box__checklist li {
    align-items: center;
    gap: 10px;
}

/* Haken: 28px Rahmen (= Zeilenhoehe), Glyphe ca. 14x10px in Markenfarbe */
.pdp-box__checklist svg {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    color: var(--wc-primary);
}

.related.products h2 {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: 48px;
    font-weight: 400;
    color: var(--wc-title);
    margin: 0 0 24px;
}

.related.products > h2::before {
    content: 'Unsere Empfehlungen';
    display: block;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wc-primary);
    margin-bottom: 8px;
}

.related.products ul.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.related.products ul.products li.product {
    background-color: #fff;
    border: 1px solid #E3E4E7 !important;
    border-radius: 14px;
    overflow: hidden;
    padding: 0 0 20px;
    text-align: left;
    position: relative;
    display: flex;
    flex-direction: column;
}

.related.products ul.products li.product > a.woocommerce-loop-product__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.related.products ul.products li.product img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin: 0 0 16px;
    display: block;
}

.related.products ul.products li.product .woocommerce-loop-product__category {
    display: block;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #99A1AF;
    margin: 16px 20px 4px;
}
.showroom-cta__badge {
    position: absolute;
    bottom: 48px;
    right: 40px;
    width: 160px;
    height: 160px;
    object-fit: contain;
    border-radius: 50%;
}

.related.products ul.products li.product .woocommerce-loop-product__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: var(--wc-title);
    margin: 0 20px 0;
}

.related.products ul.products li.product .related-product__excerpt {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    color: #6A7282;
    margin: 0 20px 16px
}

.related.products ul.products li.product .price {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: var(--wc-primary);
    margin: 0 20px 20px;
    text-decoration: none;
}

.related.products ul.products li.product .price del,
.related.products ul.products li.product .price ins {
    text-decoration: none;
}

.related.products ul.products li.product .price del {
    color: var(--wc-primary);
    text-decoration: line-through;
}

.related.products ul.products li.product .price ins {
    color: var(--wc-title);
}

.related.products ul.products li.product .wc-gzd-additional-info {
    display: block;
    font-size: 12px;
    line-height: 16px;
    color: #99A1AF;
    margin: 0 20px 4px;
}

.related.products ul.products li.product .wc-gzd-additional-info a {
    color: inherit;
}

.related.products ul.products li.product .wc-gzd-additional-info.shipping-costs-info {
    margin-bottom: 12px;
}

.related.products ul.products li.product .wc-gzd-additional-info.tax-info,
.related.products ul.products li.product .wc-gzd-additional-info.shipping-costs-info {
    display: none;
}

.related.products ul.products li.product a.add_to_cart_button {
    display: flex;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    margin: 0 20px;
    margin-top: auto;
    white-space: nowrap;
    background-color: transparent !important;
    color: #2D2A26 !important;
    border-radius: 8px;
    padding: 14px 16px !important;
    font-size: 14px;
    border: 1px solid #B8825D;
    font-weight: 500;
    text-decoration: none;
}

.related.products ul.products li.product a.add_to_cart_button:hover {
    background-color: var(--wc-primary-hover);
}

.related.products ul.products li.product a.added_to_cart {
    display: block;
    margin: 10px 20px 0;
    font-size: 13px;
    font-weight: 600;
}

.rv-section {
    background-color: #fff;
    padding: 50px 0px;
    padding-top: 0px !important;
}

.rv-section__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding:50px 0px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.rv-section__header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rv-section__eyebrow {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #B8825D;
    margin: 0;
}

.rv-section__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: 48px;
    font-weight: 400;
    color: #1A1A1A;
    margin: 0;
    overflow-wrap: break-word;
}

.rv-section__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.rv-section__grid--single {
    grid-template-columns: 1fr;
}

.rv-section__grid--single .rv-card__features {
    display: block;
    columns: 2;
    column-gap: 40px;
}

.rv-section__grid--single .rv-card__features li {
    margin-bottom: 10px;
    break-inside: avoid;
}

.rv-card {
    display: flex;
    background-color: #FDFDFC;
    border: 1px solid #EDE0D9;
    border-radius: 14px;
    overflow: hidden;
}

.rv-card__image-wrap {
    flex: 0 0 45%;
}

.rv-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rv-card__body {
    flex: 1;
    min-width: 0;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rv-card__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: #1A1A1A;
    margin: 0;
    overflow-wrap: break-word;
}

.rv-card__desc {
    min-width: 0;
    font-size: 15px;
    color: #6A7282;
    font-weight: 400;
    line-height: 1.7;
    margin: 0;
    overflow-wrap: break-word;
}
.gs-section__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: 48px;
    font-weight: 400;
    color: #1A1A1A;
    margin: 0;
}

.rv-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    align-self: flex-start;
    background-color: #B8825D;
    color: #fff;
    border-radius: 10px;
    padding: 13px 24px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    margin-top: 4px;
    transition: background-color 0.2s;
}

.rv-card__btn:hover {
    background-color: var(--brand-hover);
}

.rv-card__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rv-card__features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 400px;
    padding-bottom: 10px;
    font-size: 14px;
    color: #6A7282;
}

.rv-card__features svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: #B8825D;
}

.rv-section__info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    background-color: #FFFFFF;
    border-radius: 14px;
    padding: 40px;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
}

.rv-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.rv-info__icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

.rv-info__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rv-info__text strong {
    font-size: 14px;
    font-weight: 600;
    color: #1A1A1A;
    line-height: 1.3;
}

.rv-info__text span {
    font-size: 13px;
    color: #6A7282;
}

/* ============================================================
   BOOKING SECTION (Verfügbarkeit prüfen & buchen)
   ============================================================ */
.booking-section {
    background-color: #FEFEFD;
}

.booking-section__inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    padding-bottom: 50px;
    flex-direction: column;
    gap: 48px;
}

.booking-section__header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.booking-section__eyebrow {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #B8825D;
    margin: 0;
}

.booking-section__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: 48px;
    font-weight: 400;
    color: #1A1A1A;
    margin: 0;
}

.booking-section__box {
    border: 1px solid #B8825D;
    border-radius: 16px;
    overflow: hidden;
    min-height: 400px;
}

.booking-section__box iframe {
    width: 100%;
    height: 700px;
    border: none;
    display: block;
}

.booking-section__content {
    padding: 40px;
    color: #5C4E43;
    font-size: 15px;
    line-height: 1.7;
}

/* ============================================================
   FAQ SECTION (2 Column)
   ============================================================ */
.faq2-section {
    background-color: #fff;
    padding: 40px  0;
}

.faq2-section__inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    gap: 60px;
}

.faq2-section__left {
    flex: 0 0 340px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    padding-right: 60px;
}

.faq2-section__left::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: #EDE0D9;
}

.faq2-section__eyebrow {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #B8825D;
    margin: 0;
}

.faq2-section__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: 48px;
    font-weight: 400;
    color: #1A1A1A;
    margin: 0;
    line-height: 1.2;
}

.faq2-section__list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid #EDE0D9;
}

.faq2-item {
    border-bottom: 1px solid #EDE0D9;
}

.faq2-item__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.faq2-item__question {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #101828;
    line-height: 1.4;
}

.faq2-item__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #B8825D;
}

.faq2-item__icon-v {
    transition: opacity 0.2s;
}

.faq2-item__trigger[aria-expanded="true"] .faq2-item__icon-v {
    opacity: 0;
}

.faq2-item__answer {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.faq2-item__answer:not([hidden]) {
    max-height: 600px;
}

.faq2-item__answer[hidden] {
    display: block !important;
    max-height: 0;
}

.faq2-item__answer-inner {
    padding: 0 0 24px;
    font-size: 14px;
    color: #6A7282;
    line-height: 1.7;
}

.faq2-item__answer-inner p { margin: 0 0 12px; }
.faq2-item__answer-inner p:last-child { margin-bottom: 0; }

.gs-section {
    background-color: #fff;
    padding-top: 50px;
    padding-bottom: 70px;
}

.gs-section__inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.gs-section__header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gs-section__eyebrow {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #B8825D;
    margin: 0;
}

.gs-slider-wrap {
    /* overflow/border/radius live here (the element that stays put) rather than on
       .gs-track (the element that gets translated). Having them together on .gs-track
       meant its own clipping "window" moved along with the slide every time it slid,
       so from the 2nd slide onward the window had already scrolled past the slide it
       was supposed to reveal — leaving just a sliver of the previous slide's edge and
       an empty gap where the new slide should have been. */
    position: relative;
    overflow: hidden;
    border: 1px solid #B8825D;
    border-radius: 8px;
}

.gs-track {
    display: flex;
    width: 100%;
    transition: transform 0.4s ease;
}

.gs-slide {
    flex: none;
    width: 100%;
    aspect-ratio: 1400 / 650;
}

.gs-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gs-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1A1A1A;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transition: opacity 0.2s;
}

.gs-arrow:disabled {
    opacity: 0.4;
    cursor: default;
}

.gs-arrow--prev {
    left: 20px;
}

.gs-arrow--next {
    right: 20px;
}

/* ============================================================
   TEXT SECTION (Rechtstexte / einfacher Inhalt)
   ============================================================ */
.text-section {
    background-color: #FEFEFD;
    padding: 60px 0;
    border-top:1px solid #EBE5DC;
}

.text-section__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: left;
}

.text-section__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: 48px;
    font-weight: 400;
    color: #1A1A1A;
    margin: 0 0 32px;
    line-height: var(--heading-line-height);
    letter-spacing: 0px;
}

.text-section__content h2,
.text-section__content h3,
.text-section__content h4 {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-weight: 400;
    color: #1A1A1A;
    margin: 32px 0 12px;
}

.text-section__content h2 { font-size: 24px; }
.text-section__content h3 { font-size: 20px; }
.text-section__content h4 { font-size: 17px; }

.text-section__content p {
    margin: 0 0 16px;
}

.text-section__content ul,
.text-section__content ol {
    margin: 0 0 16px;
    padding-left: 20px;
}

.text-section__content li {
    margin-bottom: 6px;
}

.text-section__content a {
    color: var(--brand);
    text-decoration: underline;
}

.text-section__content a:hover {
    color: var(--brand-hover);
}

.text-section__content strong {
    color: #1A1A1A;
}

/* ============================================================
   SHOP ARCHIVE
   ============================================================ */
.shop-hero {
    background-color: var(--wc-page-bg);
    border-bottom: 1px solid var(--wc-border);
    padding: 32px 0;
}

.shop-hero__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.shop-hero__breadcrumb {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 13px;
    color: var(--wc-text);
    margin: 0 0 12px;
}

.shop-hero__breadcrumb a {
    color: var(--wc-primary);
    text-decoration: none;
}

.shop-hero__breadcrumb a:hover {
    color: var(--brand-hover);
    text-decoration: underline;
}

.shop-hero__breadcrumb .breadcrumb-sep {
    color: var(--wc-primary);
    opacity: 0.5;
    margin: 0 4px;
}

.shop-hero__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 400;
    color: var(--wc-title);
    margin: 0;
    line-height: 1.15;
}

.shop-hero__description {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 16px;
    color: var(--wc-text);
    line-height: 1.6;
    margin: 12px 0 0;
    max-width: 560px;
}

.shop-hero--with-image {
    padding: 0;
    overflow: hidden;
}

.shop-hero--with-image .shop-hero__inner {
    display: flex;
    align-items: stretch;
    max-width: none;
    padding: 0;
    min-height: var(--hero-min-height);
}

.shop-hero--with-image .shop-hero__content {
    --hero-inset: max(var(--page-gutter), (100% - var(--page-max)) / 2);
    flex: 0 0 var(--hero-content-basis);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: clamp(28px, 3.5vh, 64px);
    padding-inline: 64px;
    padding-left: var(--hero-inset);
}

.shop-layout {
    max-width: 1400px;
    margin: 0 auto;
    padding: 15px 0 0;
    display: flex;
    padding-bottom:60px;
    align-items: flex-start;
    gap: 32px;
}

/* Sidebar */
.shop-sidebar {
    flex: 0 0 272px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.shop-filter-toggle {
    display: none;
    position: relative;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    background: var(--wc-surface);
    border: 1px solid var(--wc-border);
    border-radius: 10px;
    padding: 12px 20px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--wc-title);
    cursor: pointer;
}

.shop-filter-toggle__badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wc-primary);
}

.shop-filter-form {
    border: 1px solid var(--wc-border);
    border-radius: 14px;
    background: var(--wc-surface);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.shop-filter-groups {
    display: contents;
}

.shop-filter-group__title {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--wc-title);
    margin: 0 0 12px;
}

.shop-filter-group__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 190px;
    overflow-y: auto;
    /* Keep the scrollbar off the term counts: reserve room on the right
       and slim the bar down instead of letting it overlay the row. */
    padding-right: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--wc-border) transparent;
}

.shop-filter-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 14px;
    color: var(--wc-text);
    cursor: pointer;
}

.shop-filter-checkbox input {
    width: 16px;
    height: 16px;
    accent-color: var(--wc-primary);
    flex-shrink: 0;
    cursor: pointer;
}

.shop-filter-checkbox span {
    flex: 1;
}

.shop-filter-checkbox em {
    font-style: normal;
    color: #99A1AF;
    font-size: 13px;
}

/* Price slider */
.shop-price-slider {
    position: relative;
    height: 20px;
    margin-top: 4px;
}

.shop-price-slider__track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 2px;
    background: var(--wc-border);
    transform: translateY(-50%);
}

.shop-price-slider__range {
    position: absolute;
    height: 100%;
    background: var(--wc-primary);
    border-radius: 2px;
}

.shop-price-slider__input {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    margin: 0;
    transform: translateY(-50%);
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
}

.shop-price-slider__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--wc-primary);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--wc-primary);
    cursor: pointer;
    pointer-events: auto;
}

.shop-price-slider__input::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--wc-primary);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--wc-primary);
    cursor: pointer;
    pointer-events: auto;
}

.shop-price-slider__values {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--wc-title);
}

.shop-filter-form__submit {
    width: 100%;
    padding: 11px 16px;
    background: var(--wc-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s;
}

.shop-filter-form__submit:hover {
    background: var(--wc-primary-hover);
}

.shop-filter-form__reset {
    text-align: center;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 13px;
    color: var(--wc-text);
    text-decoration: underline;
}


/* Consult box */
.shop-consult {
    border: none;
    border:1px solid #EBE5DC;
    border-radius: 0;
    background: #FEFEFD;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shop-consult__title {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: var(--heading-line-height);
    letter-spacing: 0%;
    color: #0B0B0B;
    margin: 0 0 4px;
}

.shop-consult__text {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0%;
    color: #7A7A7A;
    margin: 0 0 12px;
}

.shop-consult__link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0%;
    color: #0B0B0B;
    text-decoration: none;
    padding: 8px 0;
}

.shop-consult__link svg {
    color: var(--wc-primary);
    flex-shrink: 0;
}

.shop-consult__link:hover {
    color: var(--wc-primary);
}

/* Main column */
.shop-main {
    flex: 1;
    min-width: 0;
}

.shop-main--loading .shop-grid,
.shop-main--loading .shop-empty {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.shop-guarantees {
    display: flex;
    align-items: stretch;
    border: 1px solid rgba(184, 130, 93, 0.5);
    border-radius: 20px;
    padding: 24px;
    gap: 25px;
    margin-top: 32px;
}

.shop-guarantee {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 0 12px;
    position: relative;
}

.shop-guarantee:not(:first-child)::before {
    content: '';
    position: absolute;
    left: -12.5px;
    top: 0;
    width: 1px;
    height: 100%;
    background: rgba(184, 130, 93, 0.3);
}
.text-section__content {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0px;
    color: #4A5565;
}

.shop-guarantee__text strong {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #1A1A1A;
    padding-bottom: 10px;
    line-height: 1.3;
}
.shop-guarantee svg {
    color: #B8825D;
    flex-shrink: 0;
    width: 55px;
    height: 55px;
}
.shop-guarantee__text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.shop-guarantee__text span {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--wc-text);
    line-height: 1.5;
}

.shop-toolbar__count {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 14px;
    color: var(--wc-text);
    margin: 0;
}

.shop-toolbar__select {
    padding: 10px 36px 10px 14px;
    border: 1px solid var(--wc-border);
    border-radius: 8px;
    background-color: #fff;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 14px;
    color: var(--wc-title);
    cursor: pointer;
}

.shop-empty {
    font-family: 'Instrument Sans', sans-serif;
    color: var(--wc-text);
}

/* Grid */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.shop-grid .bi-card {
    flex: none;
    width: 100%;
    position: relative;
}

.bi-card__sale-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--wc-primary);
    color: #fff;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    z-index: 1;
}

/* Pagination (reuses the same look as .blogs-section__pagination) */
.shop-main .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.shop-main .pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--brand);
    font-size: 14px;
    font-weight: 600;
    color: var(--wc-title);
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.shop-main .pagination .page-numbers:hover {
    background: var(--brand-tint);
    border-color: var(--brand-hover);
    color: var(--wc-title);
}

.shop-main .pagination .page-numbers.current {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.shop-main .pagination .page-numbers.dots {
    border-color: transparent;
    background: none;
    cursor: default;
}

.shop-main .pagination .page-numbers.next,
.shop-main .pagination .page-numbers.prev {
    color: var(--brand);
}

.shop-main .pagination .page-numbers.next:hover,
.shop-main .pagination .page-numbers.prev:hover {
    color: #fff;
}

/* ============================================================
   TWO COLUMN LIST + CALLOUT BOX
   ============================================================ */
.tcl-section {
    background-color: #FEFEFD;
    padding: 50px 0;
    border-bottom: 1px solid #EBE5DC;
}

.tcl-section__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: left;
}

.tcl-section__header {
    max-width: 820px;
    margin: 0 0 40px;
}

.tcl-section__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: clamp(18px, 3vw, 35px);
    font-weight: 400;
    margin: 0 0 16px;
    color: #1A1A1A;
}

.tcl-section__description {
    font-family: 'Actor', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 3vw, 16px);
    line-height: 26px;
    letter-spacing: 0;
    color: #101828;
    margin: 0;
}

.tcl-section__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-bottom: 32px;
}

.tcl-column__title {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #1A1A1A;
    margin: 0 0 20px;
}

.tcl-column__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tcl-column__list li {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #444;
    line-height: 1.6;
    padding-left: 20px;
    position: relative;
}

.tcl-column__list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #B8825D;
}

.tcl-column__list li strong {
    color: #1A1A1A;
    font-weight: 400;
}
 
.tcl-callout {
    background-color: #F8F4F0;
    border: 1px solid #EBE5DC;
    border-radius: 12px;
    padding: 32px 24px;
}

.tcl-callout__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: 22px;
    font-weight: 400;
    color: #1A1A1A;
    margin: 0 0 12px;
}

.tcl-callout__text {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0px;
    color: #444;
}

.tcl-callout__text p {
    margin: 0 0 12px;
}
.hero-section__btn--primary {
    /* Gefuellter Marken-Button wie Header-Kontakt, Newsletter, Shop.
       Die Farbe aus dem Editor kommt als --btn-bg ueber das style-Attribut
       (siehe hero_section.php) - als Variable statt festem
       background-color, damit der Hover nicht mehr vom Inline-Style
       ueberschrieben wird. Ohne Auswahl: Markenfarbe. */
    background-color: var(--btn-bg, var(--brand));
    color: #fff;
}

.tcl-callout__text p:last-child {
    margin-bottom: 0;
}
.wpcf7 form.sent .wpcf7-response-output {
    color: #B8825D;
}

a.blog-card__link {
    text-decoration: underline;
}
/* ============================================================
   RESPONSIVE (consolidated)
   ============================================================ */

/* ============================================================
   RESPONSIVE (2 breakpoints: tablet 1024px, mobile 768px)
   ============================================================ */
span.woocommerce-loop-product__category {
    padding-bottom: 16px !important;
}
h2.woocommerce-loop-product__title {
    padding-bottom: 16px;
}
section.related.products {
    margin-right: 20px;
    margin-left: 20px;
}

/* ============================================================
   SEITENRASTER — vereinheitlicht den horizontalen Rhythmus aller
   Section-Container. Steht absichtlich hier am Ende der Basisregeln:
   alle Selektoren haben dieselbe Spezifität (eine Klasse), also
   gewinnt die Quellreihenfolge und diese Regel setzt die einzeln
   verstreuten max-width/padding-Werte weiter oben ausser Kraft.

   Nur `padding-inline` — vertikale Paddings der Sections bleiben
   dadurch unangetastet.
   ============================================================ */
.header-inner,
.bi-section__inner,
.modelle-section__inner,
.vorteile-section__inner,
.testi-section__inner,
.team-section__inner,
.gesch-section__inner,
.showroom-section__inner,
.werte-section__inner,
.raeume-section__inner,
.fuer-wen-section__inner,
.events-section__inner,
.faq-section__inner,
.faq2-section__inner,
.warum-section__inner,
.kontakt-section__inner,
.standort-section__inner,
.split-section__inner,
.event-details-section__inner,
.rechner-section__inner,
.leistungen-section__inner,
.rv-section__inner,
.booking-section__inner,
.gs-section__inner,
.text-section__inner,
.tcl-section__inner,
.shop-hero__inner,
.footer-inner,
.footer-bottom-inner {
    width: 100%;
    max-width: var(--page-box);
    margin-inline: auto;
    padding-inline: var(--page-gutter);
}

/* Optische Ausrichtung der grossen Display-Überschriften auf die Rasterkante.
   Nur diese: hier ist der Versatz mit 3–6px sichtbar, und alle beginnen mit
   einem Versal (~0.088em Seitenlage).

   Bewusst NICHT dabei:
   - .modelle-section__title — beginnt mit einer Ziffer ("200+"), deren
     Seitenlage nur 1.43px beträgt. Der Ausgleich würde sie 2.8px nach
     LINKS aus dem Raster ziehen.
   - Kartentitel (.bi-card__name, .modelle-card__title, .vorteile-card__title,
     .mega-col__title) — bei 18–22px liegt der Versatz unter 2px und ist nicht
     wahrnehmbar; ihre Anfangsbuchstaben streuen zudem stark (S=0.26px,
     Y=0.62px, K=1.75px), ein einheitlicher Wert würde dort mehr schaden.

   Achtung: der Wert passt zu Versalien. Fängt eine dieser Überschriften
   inhaltlich mal mit einer Ziffer oder einem S/Y an, ist er zu gross. */
.hero-section__title,
.bi-section__title,
.vorteile-section__title,
.testi-section__title,
.showroom-cta__title {
    margin-left: calc(-1 * var(--heading-optical-inset));
}

@media (max-width: 1024px) {
    :root { --page-gutter: 40px; }

    .bi-card {
        flex: 0 0 calc(33.333% - 14px);
    }
    .modelle-section__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .vorteile-section__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .team-section__grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .single-blog__body-inner {
        grid-template-columns: 1fr 300px;
        gap: 40px;
        padding: 0 40px;
    }
    .single-blog__content { padding: 40px; }
    .gesch-section__inner {
        flex-direction: column;
        padding: 0 40px;
        gap: 48px;
    }
    .gesch-section__right { flex: none; width: 100%; }
    .warum-section__grid { grid-template-columns: repeat(2, 1fr); }
    .leistungen-section__grid { grid-template-columns: repeat(2, 1fr); }
    .related.products ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
    .hero-section__inner {
        min-height: 600px;
    }
    .footer-brand .footer-logo img{
        width: 150px;
        height: 47px;
    }

    .hero-section__content {
        padding: 60px 40px 60px 40px;
    }

    .hero-section__image-wrap {
        min-height: 600px;
    }

    .hero-section__features-bar {
        padding: 0 40px;
    }

    .hero-section__features-inner {
        gap: 32px;
        padding: 28px 32px;
    }
    .bi-section__inner {
        padding: 0 var(--page-gutter);
    }
    .modelle-section__inner {
        padding: 0 var(--page-gutter);
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }

    .modelle-section__left {
        flex: none;
    }

    .modelle-section__grid {
        width: 100%;
        grid-template-columns: repeat(4, 1fr);
    }
    .vorteile-section__inner {
        padding: 0 var(--page-gutter);
    }

    .vorteile-section__grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .testi-section__inner {
        padding: 0 var(--page-gutter);
        flex-direction: column;
        align-items: flex-start;
    }

    .testi-section__left { flex: none; }
    .testi-section__right { width: 100%; }
    .testi-card { flex: 0 0 calc(50% - 8px); }
    .fuer-wen-section__grid { grid-template-columns: repeat(3, 1fr); }
    .events-section__grid { grid-template-columns: repeat(2, 1fr); }
    .kontakt-section__inner {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 0 var(--page-gutter);
    }
    .blogs-section__grid-wrap { padding: 60px 20px; }
    .blogs-grid { gap: 20px; }
    .single-blog__hero-content { padding: 60px 40px 60px 40px; }
    .single-event-info-bar__inner {
        grid-template-columns: repeat(2, 1fr);
    }
    .single-event-info-bar__item:nth-child(2) {
        border-right: none;
    }
    .single-event-info-bar__item:nth-child(1),
    .single-event-info-bar__item:nth-child(2) {
        border-bottom: 1px solid #EDE0D9;
    }
    .site-header {
        height: auto;
    }

    .header-inner {
        height: 75.5px;
    }

    .header-logo {
        position: relative;
        z-index: 1000;
    }

    .mobile-nav-toggle {
        display: flex;
        position: relative;
        z-index: 1000;
    }

    .header-cart {
        position: relative;
        z-index: 1000;
    }

    .header-actions {
        gap: 4px;
    }

    .header-cta {
        display: none;
    }

    .header-nav {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        background: #fff;
        padding: 91.5px 24px 32px;
        overflow-y: auto;
        z-index: 998;
    }

    .header-nav.is-open {
        display: block;
    }

    .header-nav .nav-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        min-height: 100%;
        justify-content: center;
    }

    .header-nav .nav-menu > li > a {
        padding: 20px 4px;
        border-radius: 0;
        border-bottom: 1px solid #F2ECE6;
        justify-content: space-between;
        font-size: 24px;
        font-weight: 500;
    }

    .header-nav .nav-menu > li > a:hover,
    .header-nav .nav-menu > li > a[aria-expanded="true"] {
        background: none;
    }

    .header-nav__mobile-cta {
        display: block;
        text-align: center;
        margin-top: 32px;
        padding: 16px 20px;
        font-size: 17px;
    }

    /* Regular submenus (non-mega) stack inline, toggled via JS tap instead of :hover */
    .header-nav .nav-menu li:hover > .sub-menu {
        display: none;
    }

    .header-nav .nav-menu .sub-menu {
        position: static;
        display: none;
        width: 100%;
        min-width: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: #FAF6F2;
        padding: 4px 0 4px 16px;
    }

    .header-nav .nav-menu li > .sub-menu.is-open {
        display: block;
    }

    .header-nav .nav-menu > li.menu-item-has-children > a[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }

    /* Inline-Untermenue der Mega-Eintraege (nur mobil, siehe inc/mega-menu.php):
       Spaltentitel als kleine Zwischenueberschrift, darunter die Links. */
    .header-nav .nav-menu .sub-menu--mega {
        padding: 4px 0 12px 4px;
    }

    .header-nav .nav-menu .sub-menu--mega .sub-menu__group {
        list-style: none;
        padding: 0;
    }

    .header-nav .nav-menu .sub-menu--mega .sub-menu__group-title {
        display: block;
        padding: 16px 0 4px;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 2.4px;
        text-transform: uppercase;
        color: var(--brand);
    }

    .header-nav .nav-menu .sub-menu--mega .sub-menu__group-links {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .header-nav .nav-menu .sub-menu--mega .sub-menu__group-links a {
        display: block;
        padding: 10px 0;
        font-size: 17px;
        font-weight: 400;
        color: #1A1A1A;
        text-decoration: none;
        border-bottom: 1px solid #F2ECE6;
    }

    .header-nav .nav-menu .sub-menu--mega .sub-menu__group-links li:last-child a {
        border-bottom: none;
    }

    /* Mega panels open as their own full-page layer above the mobile nav list */
    .mega-panel {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        transform: none;
        background: #fff;
        border-top: none;
        box-shadow: none;
        padding: 91.5px 0 32px;
        overflow-y: auto;
        z-index: 999;
    }

    /* The panel is a full-screen fixed layer here (transform: none above),
       so replay the open animation without the desktop translateX(-50%) */
    @keyframes mega-panel-in-mobile {
        from { opacity: 0; transform: translateY(-12px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .mega-panel:not([hidden]) {
        animation-name: mega-panel-in-mobile;
    }

    .mega-panel__inner {
        flex-direction: column;
        gap: 24px;
        padding: 16px 20px 24px;
    }

    .mega-featured {
        flex-direction: column;
    }

    .mega-featured__card {
        width: 100%;
    }

    .mega-featured__img-wrap {
        height: 200px;
    }
    .shop-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .team-section__inner { padding: 0 40px; }
    .team-section__grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .showroom-section__inner { padding: 0 12px; }
    .showroom-section__header { padding: 0 20px; }
    .showroom-section__image-wrap,
    .showroom-section__iframe-wrap { aspect-ratio: 4 / 3; }
    .werte-section__inner { padding: 0 40px; }
    .werte-section__grid { grid-template-columns: 1fr; gap: 16px; }
    .raeume-section__highlights-bar { padding: 0 40px; }
    .raeume-section__inner { padding: 48px 40px; }
    .raeume-hl { padding: 16px 16px 16px 0; }
    .warum-section__inner { padding: 0 var(--page-gutter); }
    .warum-section__grid { gap: 20px; }
    .standort-section__inner { padding: 0 var(--page-gutter); }
    .standort-section__map iframe { height: 320px; }
    .map-consent { min-height: 320px; padding: 24px 16px; }
    .single-blog__body-inner {
        grid-template-columns: 1fr;
        padding: 0 var(--page-gutter);
    }
    .single-blog__sidebar {
        position: static;
    }
    .footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 32px 24px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
    .site-main .woocommerce,
    .site-main .wp-block-woocommerce-cart,
    .site-main .wp-block-woocommerce-checkout {
        padding: 40px 24px;
    }
    .single-product div.product {
        /* siehe Kommentar an der Basisregel — ohne minmax(0, …) sprengt die
           FlexSlider-Bildreihe die Spalte über die Viewportbreite hinaus */
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .pdp-boxes {
        grid-template-columns: 1fr;
    }

    .pdp-details__inner {
        flex-direction: column;
        gap: 24px;
    }

    .pdp-details__left {
        flex: 1 1 auto;
    }

    .pdp-features {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        padding: 8px 20px;
    }

    .pdp-feature {
        flex: 1 1 auto;
        width: 100%;
        text-align: left;
        padding: 16px 0;
        border-bottom: 1px solid var(--wc-border);
    }

    .pdp-feature:last-child {
        border-bottom: none;
    }

    .pdp-feature::before {
        display: none;
    }
    .rv-section__grid {
        grid-template-columns: 1fr;
    }

    .rv-card {
        flex-direction: column;
    }

    .rv-card__image-wrap {
        flex: none;
        aspect-ratio: 16 / 9;
    }

    .rv-section__grid--single .rv-card__features {
        columns: 1;
    }

    .rv-section__info-bar {
        flex-wrap: wrap;
    }

    .rv-info {
        flex: 1 1 45%;
    }
    .faq2-section__inner {
        flex-direction: column;
        gap: 24px;
    }

    .faq2-section__left {
        flex: none;
        padding-right: 0;
    }

    .faq2-section__left::after {
        display: none;
    }
    .shop-hero--with-image .shop-hero__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        /* Der Desktop-Boden (--hero-min-height) gilt gestapelt nicht mehr -
           Bild und Text bestimmen die Hoehe, wie beim Seiten-Hero. Vorher
           blieben ~200px Leerraum unter dem Text. */
        min-height: 0;
    }

    .shop-hero--with-image .shop-hero__content {
        flex: none;
        padding: 32px 40px 24px;
    }

    .shop-hero--with-image .hero-section__image-wrap {
        height: 260px;
    }
    .shop-layout {
        flex-direction: column;
        padding: 32px 24px;
    }

    .shop-sidebar {
        flex: none;
        width: 100%;
        display: none;
    }

    .shop-sidebar.is-open {
        display: flex;
        margin-bottom: 40px;
    }

    .shop-filter-toggle {
        display: inline-flex;
    }
    .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
        flex-direction: column;
        gap: 24px;
    }

    .woocommerce-MyAccount-navigation {
        flex: 1 1 auto;
    }

    .woocommerce-MyAccount-content {
        padding: 24px;
    }
}
.pdp-details {
    margin-left: 20px;
    margin-right: 20px !important;
}

@media (max-width: 768px) {
    :root { --page-gutter: 20px; } 
        .leistungen-section__inner
{

    gap:38px;
    /* No extra margin here: .leistungen-section__inner already gets
       width:100% + padding-inline: var(--page-gutter) from the shared
       "...__inner" rule above, and --page-gutter is already 20px at this
       breakpoint. Adding margin: 0 20px on top of width:100% made the box
       20px wider than the viewport on each side, pushing its right edge
       (and the card content near it) off-screen — that's why it looked
       flush against the right edge with no space. */
}
a.mega-featured__card{
    height: 200px !important;
}
.rv-section {
    background-color: #fff;
    padding: 50px 0px;
    padding-top: 0px !important;
    margin-right: 20px;
    margin-left: 20px;
}
.shop-guarantee__text span {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #6A7282 !important;
    line-height: 1.5;
}
@media (max-width: 1024px) {
    .header-nav .nav-menu li > .sub-menu.is-open {
        display: block;
        background: none !important;
    }
}
.wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax {
    align-items: center;
    font-size: 14px !important;
    display: flex;
    flex-direction: row;
    font-weight: 500;
    margin-bottom: 0;
    margin-top: 0;
    white-space: pre;
}
.wc-block-components-panel__button {
    font-size: 18px !important;
}
.wc-block-components-product-metadata__description p {
    font-size: 15px !important;
}
span.price.wc-block-components-product-price {
    padding-top: 5px;
    font-size: 15px !important;
}
.wc-block-cart-item__wrap a {
    font-size: 18px !important;
}
.woocommerce-message {
    margin-left: 20px;
    margin-right: 20px;
}
.pdp-box h3{
    font-size: 18px;
}
    p.hero-section__description {
        margin: 0px;
        line-height: 25px;
    }
.tcl-callout__text {
    font-size: 13px;
}
.pdp-details__text {
    flex: 1;
    color: #4A5565;
    font-size: 15px;
    font-weight: 400;
    line-height: 28px;
}
.pdp-details {
    margin-left: 20px;
    margin-right: 20px !important;
}
body.single-product #primary {
    max-width: 1400px;
    margin: 0 auto;
    margin-bottom: 0px;
}
.footer-social a svg
 {
    color: #99A1AF;
}
h2.pdp-details__title {
    font-family: WeezerFont;
    font-weight: 400;
    font-style: Regular;
    font-size: 32px;
    line-height: var(--heading-line-height);
    letter-spacing: 0px;
}
ul.pdp-details__bullets li span {
    font-family: Instrument Sans;
    font-weight: 400;
    font-style: Regular;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 0px;
}

section.related.products h2 {
    font-size: 32px;
}
.product_title.entry-title {
    font-size: 32px;
}
.text-section__title{
    font-size: 32px;
    margin-bottom: 15px;
}
.text-section__content {
    font-size: 15px;
}
.split-section__title {
    font-size: 32px;
}
button#shopFilterToggle svg {
    color: #B8825D !important;
}
.split-section__description {
    font-size: 14px;
}
    .blogs-section__grid-wrap {
        padding: 40px 16px;
        margin-top: 40px;
    }
    .split-section__btn {
font-size: 14px;
    }
.raum-card__desc{
    font-family: Instrument Sans;
font-weight: 400;
font-style: Regular;
font-size: 14px;
line-height: 100%;
letter-spacing: 0px;
color: #6A7282;
}
img.warum-card__icon {
    width: 22px;
    height: 32px;}
.events-section__title{
    font-size: 32px;
}
.warum-section__title {
    font-size: 32px;
}
.fuer-wen-section__title{
    font-family: WeezerFont;
font-weight: 400;
font-style: Regular;
font-size: 32px;
line-height: var(--heading-line-height);
letter-spacing: 0px;
color: #1A1A1A;
}
.footer-copy {
    color: #6A7282 !important;
    font-size: 12px;
    /* color: #999; */
    white-space: nowrap;
}

body.tax-product_cat.term-fluegel .text-section {
    padding: 0px !important;
    margin: 0px !important;
}
.raum-card__btn{
    font-family: Instrument Sans;
font-weight: 500;
font-style: Medium;
font-size: 14px;
line-height: 20px;
letter-spacing: 0px;
text-align: center;
color: #2D2A26;
}
.gs-section__inner {
    margin-left: 20px;
    margin-right: 20px;
}
.footer-col.footer-newsletter {
    font-size: 16px;
    font-weight: 400;
    color: #6A7282;
    padding-right: 100px;
}
.raum-card__title{
    font-family: WeezerFont;
font-weight: 400;
font-style: Regular;
font-size: 20px;
line-height: var(--heading-line-height);
letter-spacing: 0px;
color: #1A1A1A;
}
.raeume-section__title{
    font-family: WeezerFont;
font-weight: 400;
font-style: Regular;
font-size: 32px;
line-height: var(--heading-line-height);
letter-spacing: 0px;
color: #1A1A1A;
}
.leistungen-card__btn {
    font-size: 12px;
}
.leistungen-card__desc {
    font-size: 12px;
}
.shop-consult {
    display: none;
}
.leistungen-section__title {
    font-size: 32px;
    font-weight: 400;
    color: #1A1A1A;
    margin: 0;
    line-height: 48px;
}
    .kontakt-detail__label{
        font-family: Instrument Sans;
font-weight: 400;
font-style: Regular;
font-size: 15px;
line-height: 1.5;
letter-spacing: 0%;
color: #565656;
    }
   h3.kontakt-section__form-title {
    font-family: WeezerFont;
    font-weight: 400;
    font-style: Regular;
    font-size: 32px;
    line-height: var(--heading-line-height);
    letter-spacing: 0.35px;
}
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required{
    font-family: Instrument Sans;
font-weight: 400;
font-style: Regular;
font-size: 14px;
line-height: 18px;
letter-spacing: -0.15px;
color: #A0A0A0;
}
input.wpcf7-form-control.wpcf7-submit.has-spinner {
    font-size: 15px !important;
}
    .kontakt-detail__text--address,.kontakt-detail__text{
        font-family: Instrument Sans;
font-weight: 500;
font-style: Medium;
font-size: 15px;
line-height: 1.5;
letter-spacing: 0%;
color: #232323;
    }
    .kontakt-detail__content a{
          font-family: Instrument Sans;
font-weight: 500;
font-style: Medium;
font-size: 15px;
line-height: 1.5;
letter-spacing: 0%;
color: #232323;
    }
    .kontakt-details__heading {
        font-family: WeezerFont;
font-weight: 400;
font-style: Regular;
font-size: 18px;
line-height: 24px;
letter-spacing: -0.31px;
color: #2E2E2E;
    }
    .standort-section__title {
        font-family: WeezerFont;
font-weight: 400;
font-style: Regular;
font-size: 32px;
line-height: var(--heading-line-height);
letter-spacing: 0px;
color: #1A1A1A;
padding-bottom: 30px;
    }
    .kontakt-section__title {
        font-family: WeezerFont;
font-weight: 400;
font-style: Regular;
font-size: 32px;
line-height: var(--heading-line-height);
letter-spacing: 0px;
color:#1A1A1A;
    }
    .kontakt-section__desc{
        font-family: Instrument Sans;
font-weight: 400;
font-style: Regular;
font-size: 15px;
line-height: 22.75px;
letter-spacing: 0px;
color: #6A7282;
    }
    .kontakt-section__eyebrow{
        padding-top: 32px;
    }
    .werte-section{
        padding:32px 0px;
    }
    .modelle-card__icon-wrap {
    display: none;

}
p.hero-section__description {
    margin: 0px;
}
    .team-section__inner { padding: 0 20px !important; }

.showroom-section__desc {
    font-family: Instrument Sans;
font-weight: 400;
font-style: Regular;
font-size: 15px;
line-height: 20px;
letter-spacing: 0px;
color: #6A7282;
}
.showroom-section__title{
    font-family: WeezerFont;
font-weight: 400;
font-style: Regular;
font-size: 32px;
line-height: var(--heading-line-height);
letter-spacing: 0px;
color:#1A1A1A;

}
.gesch-section__right {
    
    padding-top: 38px;
}
p.gesch-section__intro {
    font-family: Instrument Sans;
    font-weight: 400;
    font-style: Regular;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0px;
}
.hero-section__feature {
    display: flex;
    align-items: top;
    gap: 8px;
    position: relative;
}
.testi-section__arrow:hover {
    background: var(--brand);
    width: 38px;
    height: 38px;
    border-color: var(--brand);
    color: #fff;
}
.gesch-section__title {
    font-family: WeezerFont;
font-weight: 400;
font-style: Regular;
font-size: 32px;
line-height: var(--heading-line-height);
letter-spacing: 0px;
color: #1A1A1A;
}
.team-section__desc{
    font-family: Instrument Sans;
font-weight: 400;
font-style: Regular;
font-size: 15px;
line-height: 22.75px;
letter-spacing: 0px;
color:#6A7282;
}
.team-section__title{
   font-family: WeezerFont;
font-weight: 400;
font-style: Regular;
font-size: 32px;
line-height: var(--heading-line-height);
letter-spacing: 0px;

}
.werte-section__grid {
    grid-template-columns: 1fr;
    gap: 20px;
}

.werte-card {
    flex-direction: row;
    align-items: center;
    text-align: left;
    border: 1px solid rgba(184, 130, 93, 0.5);
    border-radius: 20px;
    padding: 24px;
    gap: 20px;
}

.werte-card__icon-wrap {
    width: 48px;
    height: 48px;
    align-self: flex-start;
}

.team-section__grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding-bottom: 8px;
}

.team-card {
    flex: 0 0 78%;
    scroll-snap-align: start;
}
h1.hero-section__title {
    padding-bottom: 16px;
}
.hero-section__content{
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 32px;
    padding-bottom: 38px;
}
.single-blog__content h2 {
    font-size: 24px;
    font-weight: 500;
    color: #1A1009;
    margin: 2em 0 0.6em;
    line-height: 1.2;
}

.testi-section__rating-score{
    font-family: Inter;
font-weight: 700;
font-style: Bold;
font-size: 14px;
line-height: 24px;
letter-spacing: 0px;
color: #101828;
}
.vorteile-section__title{
    font-size: 32px;
    color: #1A1A1A;
}
.vorteile-card__icon{
    width: 32px;
    height: 32px;
}
.testi-section__title{
    font-size: 32px;
    color: #1A1A1A;
    font-weight: 400;
    color: #1A1A1A;
}
    .shop-filter-toggle {
        display: inline-flex;
        margin-bottom: 20px;
    }
p.modelle-card__desc{

    padding: 0px;
}
.standort-section__header
 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 20px;
}
a.modelle-card__link {
padding-top: 5px;    margin: 0px !important;
}
    .modelle-card {
        flex-direction: row;
        align-items: stretch;
        border:0px !important;
    }

    .modelle-card__image-wrap {
        flex: 0 0 120px;
        aspect-ratio: 1;
    }

    .modelle-card__image {
        border-radius: 12px 0 0 12px;
    }

  

    .modelle-card__body {
 padding-top: 51px;
    padding-bottom: 41px !important;
    padding-left: 13.5px;
    padding-right: 13.5px;        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
        min-width: 0;
    }

    .modelle-card__title {
        font-size: 17px;
        padding-bottom: 4px;
    }

    .modelle-card__desc {
        font-size: 13px;
    }
    .footer-inner {
        padding:32px var(--page-gutter);
    }

    h2.modelle-section__title{
        font-family: WeezerFont;
font-weight: 400;
font-style: Regular;
font-size: 32px;
line-height: var(--heading-line-height);
letter-spacing: 0px;

    }
    .modelle-section__eyebrow{
        font-family: Instrument Sans;
font-weight: 500;
font-style: Medium;
font-size: 12px;
line-height: 16px;
letter-spacing: 2.4px;
text-transform: uppercase;

    }
    span.woocommerce-Price-amount.amount{
        font-family: Instrument Sans;
font-weight: 700;
font-style: Bold;
font-size: 18px;
line-height: 28px;
letter-spacing: 0px;

    }
        .header-nav .nav-menu > li > a {
font-size: 20px;
        }
    p.bi-card__excerpt {
    font-family: Instrument Sans;
    font-weight: 400 !important;
    font-style: Regular;
    font-size: 14px  !important;
    line-height: 20px;
    letter-spacing: 0px;
}
.werte-card__title {
    font-size: 18px;
}
.werte-card__icon {
    width: 34px;
    height: 30px;
}
    h3.bi-card__name{
       font-family: WeezerFont;
font-weight: 400;
font-style: Regular;
font-size: 20px;
line-height: 28px;
letter-spacing: 0px;
color:#1A1A1A; 
    }
    span.bi-card__category{
        font-family: Instrument Sans;
font-weight: 700 !important; 
font-style: Bold;
font-size: 12px !important;
line-height: 16px !important ;
letter-spacing: 0.6px;
text-transform: uppercase;

    }
    .bi-section__arrows {
        display: none !important;
    }
    .bi-section__title{
        font-family: WeezerFont;
font-weight: 400;
font-style: Regular;
font-size: 32px !important;
line-height: var(--heading-line-height);
letter-spacing: 0px;
color:#1A1A1A;

    }
    p.bi-section__eyebrow {
    font-family: Instrument Sans;
    font-weight: 500;
    font-style: Medium;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}
    .hero-section {
        padding-bottom: 0;
    }
    .hero-section__btn--secondary {
        padding: 14px 10px;
    }
    .hero-section__inner {
        flex-direction: column;
        min-height: auto;
    }

    .hero-section__content {
        flex: none;
    }

    .hero-section__buttons {
        flex-wrap: nowrap;
        align-items: stretch;
    }

    .hero-section__btn {
        flex: 1 1 0;
        justify-content: center;
        padding: 14px 10px;
        white-space: normal;
    }
.hero-section__review-text{
   font-family: Instrument Sans;
font-weight: 500;
font-style: Medium;
font-size: 12px;
line-height: 20px;
letter-spacing: 0px;
color:#4A5565;

}
.hero-section__features-inner {
    border:0px !important;
    box-shadow: 0px 10px 40px -10px #00000014;
}
.hero-section__feature-text span {
font-family: Instrument Sans;
font-weight: 400;
font-style: Regular;
font-size: 16px;
line-height: 20px;
letter-spacing: 0px;
color:#6A7282;
}
.hero-section__feature img {
width: 44px;
height: 44px;
}

    .hero-section__image-wrap {
        flex: none;
        min-height: 320px;
        order: -1;
    }

    .hero-section__image-wrap::before {
        display: none;
    }
   

.hero-section__feature-text strong {
    font-family: Instrument Sans;
font-weight: 700;
color:#101828;
font-style: Bold;
font-size: 16px;
line-height: 20px;
letter-spacing: 0px;

}

 
    .hero-section__feature img {
        width: 32px;
        height: 32px;
    }
    .hero-section__features-bar {
        position: static;
        margin-top: 0;
        padding: 0 20px;
    }

    .hero-section__features-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
        padding: 30px;
        margin-bottom: 32px;
        background-color: #fff;
        border-radius: 14px;
        box-shadow: 0px 10px 40px -10px rgba(0, 0, 0, 0.08);
    }

    .hero-section__feature {
        flex: none;
    }

    .hero-section__feature:not(:first-child) {
        border-left: none;
        padding-left: 0;
    }

    .hero-section__feature:not(:first-child)::before {
        display: none;
    }
    .bi-section {
        padding: 60px 0 40px;
    }

    .bi-section__inner {
        padding: 0 var(--page-gutter);
    }

    .bi-card {
        flex: 0 0 calc(50% - 10px);
    }
    .showroom-cta {
        flex-direction: column;
    }

    .showroom-cta__content {
        flex: none;
        padding: 50px 20px;
    }

    .showroom-cta__image-wrap {
        position: static;
        flex: none;
        height: 240px;
        order: -1;
    }

    /* Das runde "Zentral Wien"-Badge ist absolut zur Section positioniert
       (bottom:48px/right:40px). Im gestapelten Layout liegt das Bild oben
       und der Text darunter — das Badge landet dadurch ausserhalb des
       Bildbereichs und ueberdeckt Titel und Adresse (bei 375px gemessen:
       Badge bei top 4761, Bild endet bei 4652). Im gestapelten Layout
       daher ausgeblendet. */
    .showroom-cta__badge {
        display: none;
    }

    .showroom-cta__image {
        position: static;
        clip-path: none;
        width: 100%;
        height: 100%;
    }
    .modelle-card__image{
        width: 195px;
        height: 192px;
    }
    
.modelle-card__body{
    width: 195px;
    height: 192px;
}
    .modelle-section__inner {
        padding: 0 var(--page-gutter);
    }

    .modelle-section__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .vorteile-section__inner {
        padding: 0 var(--page-gutter);
    }

    .vorteile-section__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .testi-section__inner { padding: 0 var(--page-gutter); }
    .testi-card { flex: 0 0 100%; }
    .fuer-wen-section__inner { padding: 0 var(--page-gutter); }
    .fuer-wen-section__grid { grid-template-columns: repeat(2, 1fr); }
    .events-section__inner { padding: 0 var(--page-gutter); }
    .faq-section__inner { padding: 0 var(--page-gutter); }
    .blogs-section__grid-wrap { padding: 48px 24px; gap: 32px; }
    .blogs-grid { grid-template-columns: repeat(2, 1fr); }
    .single-blog__hero,
    .single-blog__hero--right,
    .single-blog__hero--left,
    .single-blog__hero--bottom {
        flex-direction: column;
        min-height: auto;
    }
    .single-blog__hero-content,
    .single-blog__hero--bottom .single-blog__hero-content {
        flex: none;
        padding: 48px 24px 40px;
    }
    .single-blog__hero-image-wrap,
    .single-blog__hero--bottom .single-blog__hero-image-wrap {
        flex: none;
        width: auto;
        height: 280px;
        margin: 0;
        padding: 0;
        position: relative;
    }
    .single-blog__hero-image,
    .single-blog__hero--left .single-blog__hero-image,
    .single-blog__hero--bottom .single-blog__hero-image {
        border-radius: 0;
    }
    .single-blog__content {  padding:0px !important;font-size:  16px; }
    .split-section__inner {
        flex-direction: column;
        padding: 40px 20px;
    }
    .split-section--image-right .split-section__inner {
        flex-direction: column;
    }
    .split-section__image-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .single-event-hero__inner {
        flex-direction: column;
        min-height: 0;
    }
    .single-event-hero__content {
        flex: 0 0 auto;
        padding: 40px 20px;
    }
    .single-event-hero__image-wrap {
        min-height: 320px;
    }
    .single-event-info-bar {
        margin: -24px 16px 0;
    }
    .single-event-info-bar__inner {
        grid-template-columns: 1fr;
    }
    .single-event-info-bar__item {
        border-right: none !important;
        border-bottom: 1px solid #EDE0D9;
    }
    .single-event-info-bar__item:last-child {
        border-bottom: none;
    }
    .event-details-section__inner {
        grid-template-columns: 1fr;
        padding: 50px 20px;
        gap: 40px;
    }
.header-logo img
{
        height: 36px;
    width: auto;

}
a.hero-section__btn.hero-section__btn--primary{
    font-family: Instrument Sans;
font-weight: 500;
font-style: Medium;
font-size: 15px;
line-height: 100%;
letter-spacing: 0px;
text-align: center;

}
.hero-section__description{
    font-family: Instrument Sans;
font-weight: 400;
font-style: Regular;
font-size: 15px;
line-height: 100%;
letter-spacing: 0px;
color: #4A5565;
}
.hero-section__title{
    font-family: WeezerFont;
font-weight: 400;
font-style: Regular;
font-size: 44px;
line-height: var(--heading-line-height);
letter-spacing: 0px;

}
    .shop-guarantees {
        flex-direction: column;
    }

    .shop-guarantee:not(:first-child)::before {
        left: 0;
        top: -12.5px;
        width: 100%;
        height: 1px;
    }
    .tcl-section__columns {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .tcl-section__inner {
        padding: 0 var(--page-gutter);
    }
    .gesch-section__inner { padding: 0 24px; }
    .gesch-steps {
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }
    .gesch-step { flex: 0 0 100%; }
    .gesch-step__arrow { display: none; }
    .raeume-section__highlights-bar { overflow-x: auto; padding: 0 24px; }
    .raeume-section__highlights-inner { min-width: max-content; }
    .raeume-section__inner { padding: 40px 24px; }
    .raeume-section__grid { grid-template-columns: 1fr; }
    .leistungen-section__grid { grid-template-columns: 1fr;padding: 0px;gap:15px}
    .leistungen-card__body{gap: 12px;padding: 20px;}
    .showroom-section__image-wrap,
    .showroom-section__iframe-wrap { aspect-ratio: 1; }
    .werte-section__inner { padding: 0 20px; }
    .events-section__inner { padding: 0 var(--page-gutter); }
    .events-section__grid { grid-template-columns: 1fr; }
    .faq-section{padding: 32px 0}
    .faq-section__inner { padding: 0 var(--page-gutter);gap: 10px; }
    .faq-item__question { font-size: 14px; }
    .faq-item__trigger{padding: 10px 0;}
    .faq-section__title{margin:  0 0 12px;}
    .faq-section__descriptions{gap: 10px;}
    .warum-section__inner { padding: 0 var(--page-gutter); }
    .warum-section__grid { grid-template-columns: 1fr; }
    .kontakt-section__inner { padding: 0 var(--page-gutter); }
    .kontakt-section__form-wrap { padding: 28px 20px; }
    .standort-section__inner { padding: 0 var(--page-gutter); }
    .standort-section__map iframe { height: 260px; }
    .map-consent { min-height: 260px; padding: 20px 14px; }
    .map-consent__panel { padding: 24px 20px; gap: 10px; }
    .map-consent__title { font-size: 20px; }
    .map-consent__text { font-size: 14px; }
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 32px var(--page-gutter);
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .footer-copy {
        order: 1;
    }

    .footer-bottom-right {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .legal-menu {
        justify-content: flex-start;
        order: 1;
    }

    .footer-payment {
        flex-wrap: wrap;
        order: 0;
    }
    .site-main .woocommerce,
    .site-main .wp-block-woocommerce-cart,
    .site-main .wp-block-woocommerce-checkout {
        padding: 32px 20px;
    }
    .pdp-gallery-wrap {
        margin: 0 20px;
    }
    .woocommerce-product-gallery__image img,
    .woocommerce-product-gallery__image--placeholder img {
        width: 100%;
        height: auto;
    }
    .flex-control-thumbs {
        max-width: 100%;
    }
    .related.products ul.products {
        display: flex;
        grid-template-columns: unset;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 0 0 4px;
        scrollbar-width: none;
    }
    .related.products ul.products::-webkit-scrollbar {
        display: none;
    }
    .related.products ul.products li.product {
        flex: 0 0 78%;
        max-width: 300px;
        scroll-snap-align: start;
    }
    .booking-section {
        padding: 40px 16px;
    }

    .booking-section__box iframe {
        height: 500px;
    }
    .faq2-section { padding: 32px 0; }
    .faq2-section__inner { padding: 0 24px; }
    .gs-slide {
        aspect-ratio: 4 / 3;
    }

    .gs-arrow {
        width: 36px;
        height: 36px;
    }
    .text-section__inner {
        padding: 0 var(--page-gutter);
    }
    .shop-grid {
        grid-template-columns: 1fr;
    }

    .shop-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .shop-toolbar__select {
        width: 100%;
    }
    .fuer-wen-section__inner { padding: 0 var(--page-gutter); }
    .fuer-wen-section__grid { grid-template-columns: 1fr; }
    .fw-card:not(:first-child)::before {
        content: none;
    }
    .fw-card:not(:last-child) {
        padding-bottom: 24px;
        border-bottom: 1px solid #EDE0D9;
    }
    .hero-section__feature {
        flex: 0 0 100%;
    }
    .bi-card {
        /* eine Karte plus Anschnitt der naechsten - so ist erkennbar,
           dass die Reihe weitergeht */
        flex: 0 0 84%;
    }
    .modelle-section__grid {
        grid-template-columns: 1fr;
    }
    .vorteile-section__grid {
        grid-template-columns: 1fr;
    }
    /* Mobil: EIN Seitenabstand fuer die ganze Produktspalte statt 20px
       Rand an jedem einzelnen Kind. Preis, Steuerhinweis, Serien-Eyebrow
       und Kurzbeschreibung hatten keinen und standen am Viewport-Rand.
       Der Breadcrumb kommt von Yoast (.woo-breadcrumbs) - die alte Regel
       fuer nav.woocommerce-breadcrumb traf nichts. */
    .single-product .summary,
    .single-product .woo-breadcrumbs {
        padding-inline: 20px;
    }

    /* Mobil stehen die beiden Buttons untereinander - dann beide in voller
       Breite, nicht nur der zweite. */
    .summary form.cart .single_add_to_cart_button,
    .summary form.cart .pdp-btn-secondary {
        flex: 1 1 100%;
        width: 100%;
    }

    /* Die 390px der Desktop-Vorlage gelten nur dort - gestapelt fuellen
       die Karten die Spalte wie Feld und Buttons darueber. */
    .pdp-payment,
    .pdp-financing {
        max-width: none;
    }
span.pdp-condition-badge {
    padding-left: 6px !important;
    padding-right: 6px !important;
}
.pdp-condition-badge {
    font-size: 12px;

}
    .product_title.entry-title {
        font-size: 44px;
        line-height: var(--heading-line-height);
    }

.woocommerce-product-details__short-description p {
    color: #4A5565;
    font-size: 15px;
    font-weight: 400;
}
form.cart {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.pdp-payment {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    margin-bottom: 20px;
    border: 1px solid var(--wc-border);
    border-radius: 12px;
}
.pdp-details__eyebrow {
    font-size: 12px;
    padding-bottom: 13px !important;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wc-primary);
    margin: 0 0 8px;
}
.pdp-financing__text span {
    font-size: 12px;
    color: var(--wc-text);
}
.pdp-payment__label {
    font-size: 14px;
    font-weight: 500;
    color: var(--wc-title);
}
.pdp-box {
    margin-left: 20px;
    margin-right: 20px;
}
.pdp-features {
    margin-right: 20px;
    margin-left: 20px;
}
.pdp-feature__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    object-fit: contain;
}
.pdp-financing__text strong {
    font-size: 14px;
    font-weight: 500;
    color: var(--wc-title);
}
.pdp-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: #1A1A1A;
    border: 1px solid var(--brand);
    border-radius: 5px;
    padding: 16px 24px;
    font-size: 15px;
    font-weight: 500 !important;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
    .blogs-section__grid-wrap { padding: 40px 16px; }
    .blogs-grid { grid-template-columns: 1fr; }
    .blog-card__title { font-size: 17px; }
}

/* ============================================================
   AKTIONSPREISE
   ============================================================
   WooCommerce liefert <del>alt</del> … <ins>neu</ins>, beide mit
   aria-hidden, plus zwei .screen-reader-text-Spans mit dem Klartext.
   Das visuelle Umsortieren per order ist deshalb unbedenklich —
   Screenreader lesen die sr-Spans in DOM-Reihenfolge ("Ursprünglicher
   Preis war …", "Aktueller Preis ist …").

   Neuer Preis führt, alter Preis folgt kleiner und grau.
   ============================================================ */
.bi-card__price,
.summary .price,
.related.products ul.products li.product .price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--price-gap);
}

.bi-card__price ins,
.summary .price ins,
.related.products ul.products li.product .price ins {
    order: 0;
    text-decoration: none;
}

.bi-card__price del,
.summary .price del,
.related.products ul.products li.product .price del {
    order: 1;
    font-size: var(--price-old-scale);
    font-weight: 500;
    color: var(--price-old-color);
    text-decoration: line-through;
    opacity: 1;
    margin-right: 0;
}

/* ============================================================
   RHYTHMUS-VARIATION STARTSEITE
   ============================================================
   Alle Sections hatten Titel links / Inhalt darunter oder rechts.
   Zwei bewusste Brüche, ohne das Raster zu verlassen.

   Steht am Dateiende, damit es die Basisregeln überschreibt.
   ============================================================ */

/* 1) "200+ Modelle" gespiegelt: Kartenraster links, Textblock rechts.
      Nur oberhalb 1024px relevant — darunter setzt die Media-Query
      flex-direction:column, das gewinnt per Quellreihenfolge nicht,
      deshalb hier explizit zurücknehmen. */
.modelle-section__inner {
    flex-direction: row-reverse;
}

/* Textblock sitzt jetzt am rechten Containerrand — rechtsbündig, damit
   seine Kante am Raster liegt statt frei im Raum zu enden. */
.modelle-section__left {
    text-align: right;
    align-items: flex-end;
}

@media (max-width: 1024px) {
    /* gestapelt: wieder linksbündig und normale Reihenfolge */
    .modelle-section__inner {
        flex-direction: column;
    }
    .modelle-section__left {
        text-align: left;
        align-items: flex-start;
    }
}

/* 2) "Unsere Vorteile": Eyebrow + Titel zentriert über den vier Karten. */
.vorteile-section__inner {
    align-items: center;
}

.vorteile-section__left {
    text-align: center;
    align-items: center;
}

/* Der optische Seitenlagen-Ausgleich gilt nur für linksbündige
   Überschriften. Bei zentriertem Text würde der negative linke Rand
   die Zeile aus der Mitte ziehen. */
.vorteile-section__title {
    margin-left: 0;
}

/* ============================================================
   HERO — Freiraum fuer die Features-Bar
   ============================================================
   Die Features-Bar ragt per negativem margin-top in die Hero-Unterkante.
   Vorher war dort Platz, weil die Textspalte 144.5px Innenabstand unten
   hatte. Mit dem schlankeren Hero (clamp(28px, 3.5vh, 64px)) reichte das
   nicht mehr: die Bar legte sich auf der Startseite ueber die Reviews
   (622-662 bei Bar ab 626) und auf /service/ ueber die Buttons (Ende 630).

   Nur oberhalb 768px — darunter steht die Bar statisch unter dem Hero
   (margin-top: 0), dort ist kein Freiraum noetig.
   ============================================================ */
@media (min-width: 769px) {
    .hero-section:has(.hero-section__features-bar) .hero-section__content {
        padding-bottom: calc(var(--hero-bar-overlap) + clamp(16px, 2vh, 32px));
    }
}

/* ============================================================
   SINGLE POST — Hero + zweispaltiger Body (Figma 200:936)
   Masse aus dem 1440er Frame: Titel 72px, Intro bis 835px, Bild 1400x652
   mit 20px Radius, darunter Artikel 840px + Sidebar 485px, Luecke 75px.
   Karten in "Aehnliche Artikel": Bild 200x120, nur Titel, Trennlinien.
   ============================================================ */
.single-blog__hero--post {
    background: #FEFEFD;
    border-bottom: 1px solid #EDE0D9;
    padding-bottom: 32px;
}

.single-blog__hero--post .single-blog__hero-inner {
    width: 100%;
    max-width: var(--page-box);
    margin-inline: auto;
    padding: 88px var(--page-gutter) 0;
}

.single-blog__hero--post .single-blog__date-eyebrow {
    margin-bottom: 20px;
}

.single-blog__hero--post .single-blog__title {
    font-size: clamp(40px, 5vw, 72px);
    line-height: 1.1;
    max-width: 840px;
}

.single-blog__hero--post .single-blog__intro {
    margin-top: 28px;
    max-width: 835px;
    font-size: 17px;
    line-height: 1.65;
    color: #5C4E43;
}

.single-blog__hero--post .single-blog__hero-image-wrap {
    position: relative;
    margin-top: 40px;
    width: 100%;
    aspect-ratio: 1400 / 652;
    border-radius: 20px;
    overflow: hidden;
}

.single-blog__hero--post .single-blog__hero-image {
    border-radius: 20px;
}

.single-blog--post .single-blog__body {
    padding: 64px 0 96px;
    border-bottom: none;
}

.single-blog--post .single-blog__body-inner {
    width: 100%;
    max-width: var(--page-box);
    margin-inline: auto;
    padding: 0 var(--page-gutter);
    grid-template-columns: minmax(0, 1fr) 485px;
    gap: 75px;
}

.single-blog--post .single-blog__content {
    background: transparent;
    border-radius: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #5C4E43;
}

/* Bloecke, die Titel/Datum enthielten, kommen jetzt als normaler Artikeltext */
.single-blog--post .single-blog__content .blog-content-block__text h2,
.single-blog--post .single-blog__content h2 {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.2;
    color: #1A1A1A;
    margin: 2em 0 0.6em;
}

.single-blog--post .single-blog__content .blog-content-block__text h3,
.single-blog--post .single-blog__content h3 {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.25;
    color: #1A1A1A;
    margin: 1.75em 0 0.5em;
}

.single-blog--post .single-blog__content .blog-content-block__text > :first-child,
.single-blog--post .single-blog__content > :first-child {
    margin-top: 0;
}

.single-blog--post .single-blog__content .single-blog__content-image {
    max-height: none;
    aspect-ratio: 840 / 460;
    border-radius: 12px;
    margin: 2em 0;
}

.single-blog--post .single-blog__related {
    background: transparent;
    border-radius: 0;
    padding: 0;
}

.single-blog--post .single-blog__related-heading {
    border-bottom: none;
    padding-bottom: 0;
    margin: 0 0 8px;
}

.single-blog--post .related-card {
    gap: 12px;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid #EDE0D9;
}

.single-blog--post .related-card:first-child {
    padding-top: 24px;
}

.single-blog--post .related-card:last-child {
    border-bottom: none;
}

.single-blog--post .related-card__image-wrap {
    flex: 0 0 200px;
    height: 120px;
    border-radius: 8px;
}

.single-blog--post .related-card__title {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #1A1A1A;
}

.single-blog--post .single-blog__view-all {
    margin-top: 24px;
}

/* Schutz gegen eingefuegtes Inline-Styling im Artikel-HTML. Der bestehende
   Beitrag kam mit style-Attributen an jeder Ueberschrift (32px, #a78028,
   !important), einem Wrapper-DIV (max-width: 900px, zentriert, #414141)
   und figure-Elementen (max-width: 780px, object-fit: contain). Solche
   Angaben schlagen jedes Stylesheet; nur !important an derselben Stelle
   holt die Vorlage zurueck. Bewusst eng gefasst: Ueberschriften, der
   Wrapper, Bilder. Farbige Hinweisboxen im Text bleiben unangetastet. */
.single-blog--post .single-blog__content .blog-content-block__text > div {
    max-width: none !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #5C4E43 !important;
}

.single-blog--post .single-blog__content h2 {
    font-size: 28px !important;
    line-height: 1.2 !important;
    color: #1A1A1A !important;
    margin: 2em 0 0.6em !important;
    letter-spacing: normal !important;
}

.single-blog--post .single-blog__content h3 {
    font-size: 22px !important;
    line-height: 1.25 !important;
    color: #1A1A1A !important;
    margin: 1.75em 0 0.5em !important;
}

.single-blog--post .single-blog__content figure {
    max-width: none !important;
    margin: 2em 0 !important;
}

/* Links im eingefuegten HTML tragen ebenfalls inline color (#926b21 u.a.).
   Damit ein Link im Artikel ohne Klasse immer die Standardfarbe hat, hier
   mit !important; Buttons bleiben ausgenommen. */
.single-blog--post .single-blog__content a:not([class*="btn"]):not(.button) {
    color: var(--brand) !important;
    text-decoration: underline !important;
}

.single-blog--post .single-blog__content a:not([class*="btn"]):not(.button):hover {
    color: var(--brand-hover) !important;
}

.single-blog--post .single-blog__content figure img,
.single-blog--post .single-blog__content > img,
.single-blog--post .single-blog__content .blog-content-block__text > div > img {
    width: 100% !important;
    max-height: none !important;
    height: auto !important;
    /* Feste Landschaftsproportion wie in der Vorlage (840x560): ohne sie
       laeuft ein Hochformat-Foto in voller Hoehe ueber die Spalte. */
    aspect-ratio: 3 / 2 !important;
    object-fit: cover !important;
    border-radius: 12px !important;
}

@media (max-width: 1024px) {
    .single-blog--post .single-blog__body-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .single-blog--post .related-card__image-wrap {
        flex-basis: 160px;
        height: 96px;
    }
}

@media (max-width: 768px) {
    .single-blog__hero--post .single-blog__hero-inner {
        padding-top: 48px;
    }
    .single-blog__hero--post .single-blog__hero-image-wrap {
        aspect-ratio: 4 / 3;
        border-radius: 12px;
        margin-top: 28px;
    }
    .single-blog__hero--post .single-blog__hero-image {
        border-radius: 12px;
    }
    .single-blog--post .related-card__image-wrap {
        flex-basis: 120px;
        height: 80px;
    }
}

/* ============================================================
   404 — SEITE NICHT GEFUNDEN
   Masse aus Figma (Node 1375:3893, 1440er Frame): Main Content
   80px oben/unten, alles zentriert. Eyebrow 12/16 mit 2.4px Laufweite
   wie im Hero, "404" 160px mit der Null in Markenfarbe, Klaviatur
   532x96 mit je 32px Luft, Ueberschrift 32/38.4 (max. 448px), Text 16/28
   (max. 480px, 40px bis zu den Buttons), Buttons 52px hoch mit 16px Gap.
   Die Buttons nutzen die Hero-Klassen, damit sie mit den uebrigen
   Seiten-Buttons zusammen gepflegt werden.
   Die Vorlage setzt die "404" in Inter; die Schrift ist im Theme nicht
   geladen, deshalb WeezerFont wie alle Display-Ueberschriften.
   ============================================================ */
.error-404 {
    background-color: #FDFDFC;
    padding: 80px var(--page-gutter);
    text-align: center;
}

.error-404__inner {
    max-width: var(--page-max);
    margin: 0 auto;
}

.error-404__eyebrow {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--brand);
    margin: 0 0 20px;
}

.error-404__code {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: clamp(104px, 14vw, 160px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    color: #1A1A1A;
    margin: 0;
}

.error-404__code-accent {
    color: var(--brand);
}

.error-404__keys {
    display: block;
    width: 100%;
    max-width: 532px;
    height: auto;
    margin: 32px auto;
}

.error-404__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    color: #1A1A1A;
    max-width: 448px;
    margin: 0 auto 16px;
}

.error-404__text {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0;
    color: #4A5565;
    max-width: 480px;
    margin: 0 auto 40px;
}

.error-404__actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

@media (max-width: 768px) {
    .error-404 {
        padding-block: 56px;
    }
    .error-404__title {
        font-size: 28px;
    }
    .error-404__actions {
        flex-direction: column;
        align-items: stretch;
        max-width: 360px;
        margin: 0 auto;
    }
}

/* ============================================================
   LEERER WARENKORB (siehe inc/cart-empty.php)
   Masse aus Figma (Node 1375:4333): Main Content 80px oben/unten,
   Logo-Mark 80px in Markenfarbe, Eyebrow 12/16 mit 2.4px Laufweite,
   Ueberschrift WeezerFont 40/46 (max. 384px) mit "Toene" in Markenfarbe,
   Text 16/28 (max. 420px, 40px bis zu den Buttons), Buttons wie im Hero.
   Der Cart-Block-Wrapper traegt sonst 60px Innenabstand; im leeren
   Zustand uebernimmt .cart-empty den kompletten Abstand.
   ============================================================ */
.site-main .wp-block-woocommerce-cart:has(.cart-empty) {
    padding-block: 0;
}

/* .wc-block-cart ist ein Flex-Container (Zeilen + Summen-Spalte); der
   leere Zustand soll die ganze Zeile einnehmen, sonst steht er links. */
.wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block {
    flex: 1 1 100%;
    width: 100%;
}

.cart-empty {
    padding: 80px 0;
    text-align: center;
}

/* Das Logo-Mark ist als SVG mit fester Farbe im Theme hinterlegt
   (kontakt-watermark.svg). Als Maske eingesetzt kann es die Markenfarbe
   tragen, ohne eine zweite Datei anzulegen. */
.cart-empty__mark {
    display: block;
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background-color: var(--brand);
    -webkit-mask: var(--mark) center / contain no-repeat;
    mask: var(--mark) center / contain no-repeat;
}

.cart-empty__eyebrow {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--brand);
    margin: 0 0 20px;
}

.wc-block-cart .cart-empty__title,
.cart-empty__title {
    font-family: 'WeezerFont', 'Actor', sans-serif;
    font-size: 40px;
    font-weight: 400;
    line-height: 46px;
    letter-spacing: 0;
    color: #1A1A1A;
    max-width: 384px;
    margin: 0 auto 16px;
}

.cart-empty__title-accent {
    color: var(--brand);
}

.cart-empty__text {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0;
    color: #4A5565;
    max-width: 420px;
    margin: 0 auto 40px;
}

.cart-empty__actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

/* Der Cart-Block setzt Links auf color: inherit — der weisse Text des
   gefuellten Buttons darf davon nicht ueberschrieben werden. */
.wc-block-cart .cart-empty__actions .hero-section__btn--primary {
    color: #fff;
}

@media (max-width: 768px) {
    .cart-empty {
        padding-block: 56px;
    }
    .wc-block-cart .cart-empty__title,
    .cart-empty__title {
        font-size: 32px;
        line-height: 38px;
    }
    .cart-empty__actions {
        flex-direction: column;
        align-items: stretch;
        max-width: 360px;
        margin: 0 auto;
    }
}