/* ============================================================
   Brautstube zweite Liebe — Design-Tokens
   Extrahiert aus der Live-Seite (Elementor-Kit 227).
   Single source of truth für Farben, Typo, Abstände, Radien.
   ============================================================ */
:root {
  /* — Farben — */
  --bzl-ink:        #383E42;   /* Primär: dunkles Anthrazit (Flächen + Text)      */
  --bzl-ink-soft:   #40474c;   /* leicht aufgehellt (Karten/Hover auf Dunkel)     */
  --bzl-sand:       #CDC0B0;   /* Beige (Panels, zweite Fläche)                   */
  --bzl-sand-soft:  #d7ccbe;   /* helleres Beige (Formular-Panel)                 */
  --bzl-sage:       #65746A;   /* Akzent Salbei (Schrift „zweite Liebe“, Rahmen)  */
  --bzl-sage-band:  #6f7d71;   /* CTA-Band (etwas kühleres Salbei)                */
  --bzl-cream:      #FFEDDD;   /* warmes Creme (dezente Flächen)                  */
  --bzl-line:       #E0E0E0;   /* helle Trennlinie                               */
  --bzl-white:      #ffffff;

  /* Text */
  --bzl-text:            #383E42;              /* Fließtext auf Hell               */
  --bzl-text-on-dark:    rgba(255,255,255,.82);/* Fließtext auf Dunkel             */
  --bzl-text-on-dark-mut:rgba(255,255,255,.62);/* gedämpft auf Dunkel             */
  --bzl-text-on-sand:    #4a4640;              /* Text auf Beige                   */
  --bzl-eyebrow:         #8a8378;              /* Kicker/Eyebrow gedämpft          */

  /* — Typografie — */
  --bzl-serif:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --bzl-sans:   'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bzl-script: 'Great Vibes', 'Segoe Script', cursive;

  --bzl-fw-body: 400;
  --bzl-fw-med:  500;
  --bzl-fw-semi: 600;
  --bzl-fw-bold: 700;

  /* Fluid-Typoskala (clamp: mobile → desktop) */
  --bzl-fs-eyebrow:  clamp(.82rem, .78rem + .3vw, .95rem);   /* Kicker, letterspaced */
  --bzl-fs-body:     clamp(1rem, .96rem + .25vw, 1.125rem);  /* 16 → 18 */
  --bzl-fs-nav:      1.0625rem;
  --bzl-fs-btn:      1rem;
  --bzl-fs-h4:       clamp(1.15rem, 1.05rem + .5vw, 1.35rem);
  --bzl-fs-h3:       clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
  --bzl-fs-h2:       clamp(2.4rem, 1.7rem + 3vw, 4rem);      /* Sektionstitel 38 → 64 */
  --bzl-fs-quote:    clamp(1.5rem, 1.1rem + 1.8vw, 2.15rem); /* Rezensions-Zitat */
  --bzl-fs-hero:     clamp(3.4rem, 1.6rem + 7.4vw, 7rem);    /* „Brautstube“ 54 → 112 */
  --bzl-fs-script:   clamp(2.6rem, 1.2rem + 6vw, 5.6rem);    /* „zweite Liebe“ */

  --bzl-lh-tight: 1.08;
  --bzl-lh-snug:  1.28;
  --bzl-lh-body:  1.62;
  --bzl-ls-wide:  .16em;   /* Nav / Eyebrow letter-spacing */
  --bzl-ls-mid:   .08em;

  /* — Layout — */
  --bzl-container: 1240px;
  --bzl-gutter:    clamp(1.25rem, .5rem + 3vw, 3.25rem);
  --bzl-section-y: clamp(4rem, 2.5rem + 6vw, 7.5rem);
  --bzl-header-h:  96px;

  /* — Form/Radius/Schatten — */
  --bzl-radius:    2px;
  --bzl-radius-pill: 999px;
  --bzl-shadow-soft: 0 18px 50px rgba(20,22,24,.16);
  --bzl-ring: 0 0 0 3px rgba(101,116,106,.35);

  /* — Motion — */
  --bzl-ease: cubic-bezier(.22,.61,.36,1);
  --bzl-dur:  .6s;
}
/* ============================================================
   Brautstube zweite Liebe — MODERN (dark-dominant)
   Grundton Anthrazit, Schrift Beige, gezielte Beige-Inversionen.
   Reuse: tokens.css (Farb-/Font-Variablen) + fonts.css.
   Hand-coded, kein Build-Step. Anti-Slop kalibriert.
   ============================================================ */

:root {
  --m-ink:        #383e42;   /* Grundton Anthrazit (Basis-BG)         */
  --m-ink-2:      #30363a;   /* etwas tiefer (elevierte Flächen)      */
  --m-ink-3:      #414850;   /* aufgehellt (Karten auf Dunkel)        */
  --m-sand:       #cdc0b0;   /* Beige (Inversionsflächen)             */
  --m-sand-deep:  #bfb09c;
  --m-cream:      #ffeddd;   /* warmes Creme (Überschriften auf Dunkel)*/
  --m-sage:       #65746a;   /* Salbei als Flaeche/Akzent             */
  --m-sage-text:  #47524b;   /* Salbei als SCHRIFT auf Beige, 4.57:1  */
  --m-sage-light: #9fae9d;   /* helleres Salbei für Akzente auf Dunkel */

  /* Text auf Dunkel */
  --m-heading:    #f2e8d9;   /* warme Creme-Überschrift               */
  --m-text:       rgba(247,240,230,.80);
  --m-text-mut:   rgba(247,240,230,.60);   /* .56 ergab nur 4.23:1, jetzt 4.51:1 */
  --m-line:       rgba(247,240,230,.16);

  /* Text auf Beige (Inversion) */
  --m-on-sand:        #3a3730;
  --m-on-sand-head:   #383e42;
  --m-on-sand-mut:    #534f44;             /* #6a6456 ergab nur 3.29:1, jetzt 4.58:1 */
  --m-line-sand:      rgba(56,62,66,.22);

  --m-serif:  var(--bzl-serif);   /* Playfair Display */
  --m-sans:   var(--bzl-sans);    /* Nunito */
  --m-script: var(--bzl-script);  /* Great Vibes */

  /* Typoskala — Major Third (Verhältnis 1.25), Basis 18px */
  --m-fs-eyebrow: clamp(.875rem, .84rem + .18vw, .95rem);   /* mobil 14 px statt 13.1 */
  --m-fs-mini:    .78rem;   /* Versal-Beschriftungen        */
  --m-fs-small:   .9rem;    /* Kleingedrucktes, Bildunterschriften */
  --m-fs-body:    clamp(1.0625rem, 1rem + .3vw, 1.125rem);   /* 17 → 18 */
  --m-fs-lead:    clamp(1.2rem, 1.05rem + .55vw, 1.406rem);  /* ×1.25 */
  --m-fs-h3:      clamp(1.4rem, 1.2rem + .85vw, 1.758rem);   /* ×1.25 */
  --m-fs-h2:      clamp(2.05rem, 1.5rem + 2.3vw, 2.746rem);  /* ×1.25 (Sektionstitel) */
  --m-fs-display: clamp(3.05rem, 1.4rem + 7vw, 5.96rem);     /* Hero */
  --m-fs-script:  clamp(2.2rem, 1rem + 5.2vw, 4.3rem);

  --m-maxw:    1400px;   /* wie die alte Seite; 1200 wirkte auf breiten Schirmen zu schmal */
  --m-grad-brand: linear-gradient(110deg,#9ccf92,#6ab775,#4fb373,#21874a,#6ab775,#9ccf92);   /* laeuft rund, fuer die Hover-Wanderung */
  --m-gutter:  clamp(1.25rem, .6rem + 3.4vw, 3rem);
  --m-section: clamp(5rem, 3rem + 8vw, 12rem);   /* war 9rem; auf breiten Schirmen 144 -> 192 px */
  --m-ease: cubic-bezier(.22,.61,.36,1);
  --m-radius: 3px;   /* EIN Radius fuer Flaechen, Karten, Felder, Bilder */
}

/* — Reset & Base — */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--m-sans);
  font-size: var(--m-fs-body);
  line-height: 1.7;
  color: var(--m-text);
  background: var(--m-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
h1,h2,h3 { font-family: var(--m-serif); font-weight: 600; line-height: 1.06; letter-spacing: .004em; color: var(--m-heading); }
::selection { background: var(--m-sand); color: var(--m-ink); }
:focus-visible { outline: 2px solid var(--m-sand); outline-offset: 3px; border-radius: var(--m-radius); }

/* — Layout — */
.m-wrap { width: 100%; max-width: var(--m-maxw); margin-inline: auto; padding-inline: var(--m-gutter); }
.m-section { padding-block: var(--m-section); }
.m-eyebrow { font-family: var(--m-sans); font-size: var(--m-fs-eyebrow); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--m-sand); }
.m-h2 { font-size: var(--m-fs-h2); color: var(--m-heading); }
.m-lead { font-size: var(--m-fs-lead); line-height: 1.5; color: var(--m-text); }
.m-muted { color: var(--m-text-mut); }
.m-script { font-family: var(--m-script); font-weight: 400; color: var(--m-sand); line-height: .9; }
/* Grünes Schrift-Eyebrow (wie „Lass Dich verzaubern") — page-weit einsetzbar */
.m-seyebrow { display: block; font-family: var(--m-script); font-weight: 400; line-height: .9; color: var(--m-sage-light); font-size: clamp(1.7rem, 1.1rem + 1.6vw, 2.3rem); margin-bottom: .4rem; }
.m-invert .m-seyebrow, .m-split--sand .m-seyebrow, .m-quote .m-seyebrow { color: var(--m-sage-text); }
/* FWN-Grünverlauf-Text (Footer) */
/* Wie auf koenigsklassenfussball.de: der Verlauf wandert beim Darueberfahren. */
.m-fwn { background: var(--m-grad-brand); background-size: 220% auto; background-position: 0 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 700; transition: background-position .5s ease; }
.m-fwn:hover { background-position: -110% 0; }
@media (prefers-reduced-motion: reduce) { .m-fwn { transition: none; } }

/* — Inversion: Beige-Fläche mit dunklem Text — */
.m-invert { background: var(--m-sand); color: var(--m-on-sand); }
.m-invert h1,.m-invert h2,.m-invert h3,.m-invert .m-h2 { color: var(--m-on-sand-head); }
.m-invert .m-eyebrow { color: var(--m-sage-text); }
.m-invert .m-muted { color: var(--m-on-sand-mut); }
.m-invert .m-script { color: var(--m-sage-text); }

/* — Buttons — */
.m-btn {
  --bg: var(--m-cream); --fg: var(--m-ink); --bd: var(--m-cream);
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--m-sans); font-weight: 600; font-size: 1rem; letter-spacing: .02em;
  color: var(--fg); background: var(--bg); border: 1px solid var(--bd);
  padding: .95rem 1.7rem; border-radius: 999px;
  transition: transform .35s var(--m-ease), background .35s var(--m-ease), color .35s var(--m-ease), border-color .35s var(--m-ease);
}
.m-btn svg { width: 1.05em; height: 1.05em; transition: transform .35s var(--m-ease); }
.m-btn:hover { transform: translateY(-2px); }
.m-btn:hover svg { transform: translateX(3px); }
.m-btn:active { transform: translateY(0); }
.m-btn--ghost { --bg: transparent; --fg: var(--m-heading); --bd: rgba(247,240,230,.4); }
.m-btn--ghost:hover { --bg: var(--m-cream); --fg: var(--m-ink); --bd: var(--m-cream); }
/* auf Beige-Inversion */
.m-invert .m-btn { --bg: var(--m-ink); --fg: #fff; --bd: var(--m-ink); }
.m-invert .m-btn--ghost { --bg: transparent; --fg: var(--m-ink); --bd: rgba(56,62,66,.4); }
.m-invert .m-btn--ghost:hover { --bg: var(--m-ink); --fg: #fff; --bd: var(--m-ink); }

/* Textlink mit Unterstrich-Reveal */
.m-link { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--m-sand); padding-bottom: 3px; background-image: linear-gradient(var(--m-sand),var(--m-sand)); background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .4s var(--m-ease), color .3s var(--m-ease); }
.m-link svg { width: 1em; height: 1em; transition: transform .35s var(--m-ease); }
.m-link:hover { background-size: 100% 1.5px; color: var(--m-cream); }
.m-link:hover svg { transform: translateX(3px); }
.m-invert .m-link { color: var(--m-sage-text); background-image: linear-gradient(var(--m-sage-text),var(--m-sage-text)); }
.m-invert .m-link:hover { color: var(--m-ink); }

/* — Reveal — */
/* Inhalt ist IMMER sichtbar. Erst wenn das Inline-Skript im <head> bestaetigt hat,
   dass JavaScript laeuft, wird ueberhaupt versteckt und eingeblendet. Ohne JavaScript,
   bei einem Skriptfehler oder bei blockierten Dateien steht die Seite trotzdem da. */
.reveal { opacity: 1; transform: none; }
html.bzl-anim .reveal { opacity: 0; transform: translateY(24px); transition: opacity .85s var(--m-ease), transform .85s var(--m-ease); }
html.bzl-anim .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.bzl-anim .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ============ Header ============ */
.m-header { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; height: 92px; color: var(--m-heading); transition: background .4s var(--m-ease), height .4s var(--m-ease), box-shadow .4s var(--m-ease); }
.m-header.is-scrolled { background: rgba(48,54,58,.94); height: 76px; box-shadow: 0 1px 0 var(--m-line), 0 12px 30px rgba(0,0,0,.28); backdrop-filter: none; }
.m-header__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.m-header__logo { display: inline-flex; align-items: center; }
.m-header__logo img { height: 78px; width: auto; object-fit: contain; transition: height .4s var(--m-ease); }
.m-header.is-scrolled .m-header__logo img { height: 62px; }
.m-nav { display: flex; align-items: center; gap: clamp(1.4rem,.5rem + 2vw,2.8rem); }
.m-nav a { font-family: var(--m-sans); font-weight: 600; font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; position: relative; opacity: .9; }
.m-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1.5px; background: var(--m-sand); transition: right .4s var(--m-ease); }
.m-nav a:hover { opacity: 1; }
.m-nav a:hover::after,.m-nav a[aria-current="page"]::after { right: 0; }
.m-nav__cta { margin-left: .6rem; }
.m-nav__cta .m-btn { padding: .6rem 1.15rem; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; --bg: transparent; --fg: var(--m-heading); --bd: rgba(247,240,230,.5); }
.m-nav__cta .m-btn:hover { --bg: var(--m-cream); --fg: var(--m-ink); --bd: var(--m-cream); }

.m-burger { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; gap: 6px; }
.m-burger span { display: block; width: 26px; height: 2px; margin-inline: auto; background: currentColor; transition: transform .35s var(--m-ease), opacity .25s; }
.m-burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.m-burger.is-open span:nth-child(2) { opacity: 0; }
.m-burger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.m-mobilenav { position: fixed; inset: 0; z-index: 99; background: var(--m-ink); color: var(--m-heading); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; opacity: 0; visibility: hidden; transition: opacity .4s var(--m-ease), visibility .4s; }
.m-mobilenav.is-open { opacity: 1; visibility: visible; }
.m-mobilenav a { font-family: var(--m-serif); font-size: clamp(1.6rem,1.2rem + 1.6vw,2rem); color: var(--m-heading); max-width: 100%; text-align: center; padding-inline: 1.25rem; }
/* Schreibschrift muss die Serife des Nachbarn ueberschreiben (sonst gewinnt `.m-mobilenav a`). */
.m-mobilenav a.m-script { font-family: var(--m-script); font-size: clamp(1.9rem,1.1rem + 3.6vw,2.4rem); line-height: 1.15; color: var(--m-sand); }

/* ============ Hero ============ */
.m-hero { position: relative; min-height: var(--vph, 100svh); display: flex; align-items: center; overflow: hidden; color: #fff; }
.m-hero__media { position: absolute; inset: 0; z-index: 0; }
.m-hero__media video { width: 100%; height: 100%; object-fit: cover; }
.m-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40,45,48,.42) 0%, rgba(40,45,48,.08) 30%, rgba(40,45,48,.34) 66%, rgba(40,45,48,.72) 100%); }
.m-hero__inner { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(3.5rem, 2rem + 6vw, 7rem); }
.m-hero__content { max-width: 600px; margin-left: auto; }
.m-hero__eyebrow { color: rgba(255,255,255,.9); letter-spacing: .28em; margin-bottom: 1.1rem; }
.m-hero__title { font-size: var(--m-fs-display); font-weight: 600; line-height: .92; color: #fff; text-shadow: 0 2px 40px rgba(0,0,0,.28); }
.m-hero__title .m-script { display: block; font-size: var(--m-fs-script); color: var(--m-cream); margin-top: -.12em; margin-left: .04em; }
.m-hero__cta { margin-top: 2.2rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.m-hero__cta .m-btn--ghost { --fg: #fff; --bd: rgba(255,255,255,.55); }
.m-hero__cta .m-btn--ghost:hover { --bg: #fff; --fg: var(--m-ink); --bd: #fff; }

/* ============ Intro (dunkel, Beige-Akzentblock) ============ */
.m-intro { background: var(--m-ink); }
.m-intro__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem,0rem + 6vw,5.5rem); align-items: center; }
.m-intro__figure { position: relative; width: min(100%,440px); justify-self: center; }   /* Datei nur 700 px breit */
.m-intro__figure img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--m-radius); }
.m-intro__title { font-size: var(--m-fs-h2); color: var(--m-heading); margin-bottom: 1.4rem; }
.m-intro__body { display: flex; flex-direction: column; gap: 1.1rem; max-width: 60ch; }
.m-intro__body .m-lead { color: var(--m-heading); }
.m-intro__body em { font-style: italic; color: var(--m-sand); }
.m-intro__body .m-link { margin-top: 1rem; align-self: flex-start; }

/* ============ Unser Angebot (dunkel, editorial) ============ */
.m-offer { background: var(--m-ink); }
.m-offer__head { max-width: 60ch; margin-bottom: clamp(3.5rem,2rem + 5vw,7rem); }
.m-offer__list { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.5rem,0rem + 4vw,3.5rem); align-items: stretch; }
.m-offer__item { display: flex; flex-direction: column; gap: 1.1rem; padding-top: 2.2rem; border-top: 1px solid var(--m-line); height: 100%; }
.m-offer__item h3 { font-size: var(--m-fs-h3); color: var(--m-heading); }
.m-offer__item p { color: var(--m-text-mut); font-size: 1.02rem; line-height: 1.65; }
.m-offer__item .m-link { margin-top: auto; }

/* ============ Split-Teaser ============ */
.m-split { position: relative; background: var(--m-ink); --m-fade-rgb: 56,62,66; --m-fade-w: clamp(160px,18vw,260px); }
/* Gleiche Inhaltsbreite wie jede andere Sektion: 1200 minus Gutter.
   Vorher lief dieses Raster auf 1400 und flog damit als einziges aus der Flucht. */
.m-split__grid { display: grid; grid-template-columns: .68fr 1fr; align-items: stretch; min-height: clamp(420px, calc(var(--vph, 100svh) * .6), 680px); max-width: var(--m-maxw); margin-inline: auto; padding-inline: var(--m-gutter); }
/* Wie beim Kommissionsband: das Bild laeuft zum Text hin in den Sektionsgrund aus,
   statt mit einer harten Kante daneben zu stehen. */
.m-split__media { position: relative; overflow: hidden; }
/* Exakt dieselben Stufen wie .m-feature__media::after, nur von der anderen Kante aus.
   270deg startet an der rechten Bildkante, 90deg an der linken. */
.m-split__media::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(270deg, rgba(var(--m-fade-rgb),1) 0, rgba(var(--m-fade-rgb),.55) calc(var(--m-fade-w) * .33), rgba(var(--m-fade-rgb),0) var(--m-fade-w)); }
.m-split--reverse .m-split__media::after {
  background: linear-gradient(90deg, rgba(var(--m-fade-rgb),1) 0, rgba(var(--m-fade-rgb),.55) calc(var(--m-fade-w) * .33), rgba(var(--m-fade-rgb),0) var(--m-fade-w)); }
.m-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--m-ease); }
.m-split:hover .m-split__media img { transform: scale(1.04); }
.m-split__panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(2.5rem,1.5rem + 5vw,6rem); }
.m-split__panel h2 { font-size: var(--m-fs-h2); margin: .3rem 0 1.2rem; }
.m-split__panel p { max-width: 52ch; margin-bottom: 1.8rem; }
.m-split__panel .m-btn { align-self: flex-start; }
.m-split--reverse .m-split__media { order: 2; }
/* Beige-Inversion für einen Teaser (gezielt, nicht überall) */
.m-split--sand { background: var(--m-sand); --m-fade-rgb: 205,192,176; }
.m-split--sand .m-split__panel { color: var(--m-on-sand); }
.m-split--sand .m-split__panel h2 { color: var(--m-on-sand-head); }
.m-split--sand .m-split__panel .m-script { color: var(--m-sage-text); }
.m-split--sand .m-btn { --bg: var(--m-ink); --fg: #fff; --bd: var(--m-ink); }
.m-split--sand .m-btn--ghost { --bg: transparent; --fg: var(--m-ink); --bd: rgba(56,62,66,.4); }
.m-split--sand .m-btn--ghost:hover { --bg: var(--m-ink); --fg: #fff; --bd: var(--m-ink); }

/* ============ Feature (Vollbild-Overlay) ============ */
/* Das Band bleibt vollbreit wie jede andere Sektion, damit die Flucht stimmt.
   Das FOTO fuellt aber nicht mehr die ganze Breite: unser groesstes passendes Bild
   hat 1920 px, auf 2545 px gezogen war es sichtbar weich. Es sitzt jetzt rechts,
   hoechstens 1200 px breit, links laeuft der Bandgrund weiter. Optisch fast gleich,
   weil der Verlauf die linke Haelfte ohnehin fast deckend gemacht hat. */
.m-feature { position: relative; min-height: clamp(520px, calc(var(--vph, 100svh) * .8), 760px); display: flex; align-items: center; overflow: hidden; color: #fff; background: var(--m-ink); --m-fade-rgb: 56,62,66; --m-fade-w: clamp(160px,18vw,260px); }
/* Das Bild endet an der rechten Rasterkante statt am Bildschirmrand, damit es naeher
   am Text steht. Der Verlauf blendet nur noch das linke Drittel ab, so bleibt mehr Bild sichtbar. */
.m-feature__media { position: absolute; top: 0; bottom: 0; left: auto; right: max(0px, calc(50% - var(--m-maxw) / 2)); width: min(46%, 860px); z-index: 0; }   /* Datei nur 1000 px breit */
.m-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.m-feature__media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(var(--m-fade-rgb),1) 0, rgba(var(--m-fade-rgb),.55) calc(var(--m-fade-w) * .33), rgba(var(--m-fade-rgb),0) var(--m-fade-w)); }
.m-feature__inner { position: relative; z-index: 2; }
.m-feature__body { max-width: 560px; }
.m-feature__body h2 { font-size: var(--m-fs-h2); color: var(--m-cream); margin: .4rem 0 1.2rem; }
.m-feature__body p { color: rgba(255,255,255,.82); margin-bottom: 1.8rem; max-width: 48ch; }

/* ============ Dein Moment (dunkel, Beige-Kreis) ============ */
/* Bildkante sitzt buendig auf der Kante des naechsten Abschnitts. */
.m-moment { background: var(--m-ink); padding-bottom: 0; }
.m-moment__figure { align-self: end; }
.m-moment__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,0rem + 5vw,5rem); align-items: center; }
.m-moment__figure { position: relative; justify-self: center; width: min(100%,520px); aspect-ratio: 1; }
.m-moment__figure img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.m-moment__body { display: flex; flex-direction: column; gap: 1.1rem; }
.m-moment__body h2 { font-size: var(--m-fs-h2); }
.m-moment__body .m-rule { width: 64px; height: 2px; background: var(--m-sand); margin-bottom: .4rem; }
.m-moment__body p { color: var(--m-text); max-width: 46ch; }
.m-moment__body .m-btn { align-self: flex-start; margin-top: .6rem; }

/* ============ Instagram (dunkel) ============ */
.m-insta { background: var(--m-ink-2); color: #fff; }
.m-insta__head { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.m-insta__id { display: flex; align-items: center; gap: 1rem; }
.m-insta__id img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.m-insta__handle { font-family: var(--m-serif); font-size: 1.4rem; color: var(--m-heading); }
.m-insta__sub { color: var(--m-text-mut); font-size: 1rem; }
.m-insta__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.m-insta__tile { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--m-radius); }
.m-insta__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--m-ease); }
.m-insta__tile::after { content: ""; position: absolute; inset: 0; background: rgba(56,62,66,0); transition: background .4s var(--m-ease); }
.m-insta__tile:hover img { transform: scale(1.06); }
.m-insta__tile:hover::after { background: rgba(56,62,66,.16); }

/* ============ Rezension (Beige-Inversion) ============ */
.m-quote { background: var(--m-sand); }
.m-quote__inner { max-width: 900px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
/* Karussell: natives Wischen ueber Scroll-Snap, JS nur fuer Pfeile und Punkte. */
.m-quote__viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
.m-quote__viewport::-webkit-scrollbar { display: none; }
.m-quote__viewport:focus-visible { outline: 2px solid var(--m-sage-text); outline-offset: 6px; border-radius: var(--m-radius); }
.m-quote__track { display: flex; }
.m-quote__slide { flex: 0 0 100%; scroll-snap-align: center; margin: 0; padding-inline: clamp(.5rem,2vw,2rem); }
.m-quote__nav { display: flex; align-items: center; justify-content: center; gap: 1.4rem; margin-top: clamp(1.8rem,1.2rem + 2vw,2.8rem); }
.m-quote__arrow { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--m-line-sand); border-radius: 50%; color: var(--m-on-sand-head); background: transparent; cursor: pointer; transition: background .3s var(--m-ease), border-color .3s var(--m-ease); }
.m-quote__arrow svg { width: 20px; height: 20px; }
.m-quote__arrow:hover { background: rgba(56,62,66,.08); border-color: var(--m-sage); }
.m-quote__arrow:focus-visible { outline: 2px solid var(--m-sage-text); outline-offset: 3px; }
.m-quote__dots { display: flex; align-items: center; gap: .1rem; }
.m-quote__dot { width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.m-quote__dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: rgba(56,62,66,.26); transition: background .3s var(--m-ease), transform .3s var(--m-ease); }
.m-quote__dot.is-active::before { background: var(--m-sage-text); transform: scale(1.25); }
.m-quote__dot:focus-visible { outline: 2px solid var(--m-sage-text); outline-offset: 3px; }
.m-quote__more { margin-top: 1.6rem; text-align: center; }
.m-quote__mark { font-family: var(--m-serif); font-size: 4rem; line-height: .5; color: var(--m-sage-text); height: .6em; }
.m-quote blockquote { font-family: var(--m-serif); font-size: clamp(1.5rem,1.1rem + 1.8vw,2.3rem); line-height: 1.4; color: var(--m-on-sand-head); }
.m-quote__cite { font-style: normal; font-weight: 600; letter-spacing: .06em; color: var(--m-sage-text); }
.m-quote__cite span { display: block; font-weight: 400; font-size: var(--m-fs-small); color: var(--m-on-sand-mut); letter-spacing: 0; margin-top: .2rem; }

/* ============ CTA-Band (Salbei, zentriert) ============ */
.m-cta { position: relative; background: #606c61; color: #fff; overflow: hidden; }   /* war #6f7d71, weisser Text lag bei 3.63:1 */
.m-cta__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: clamp(3.2rem,2.2rem + 3vw,5.2rem); }
.m-cta .m-seyebrow { color: rgba(255,255,255,.92); }
.m-cta__text h2 { font-family: var(--m-serif); font-weight: 500; font-size: var(--m-fs-h2); line-height: 1.1; color: #fff; max-width: 20ch; }
.m-cta__text p { color: rgba(255,255,255,.85); margin-top: .8rem; max-width: 46ch; margin-inline: auto; }
.m-cta .m-btn { margin-top: clamp(1.6rem,1.2rem + 1vw,2.2rem); min-width: 300px; justify-content: center; --bg: var(--m-cream); --fg: var(--m-ink); --bd: var(--m-cream); }
.m-cta .m-btn:hover { --bg: #fff; --bd: #fff; }

/* ============ Formular (dunkel + Beige-Panel) ============ */
.m-contact { background: var(--m-ink); }
.m-contact__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2.5rem,1rem + 6vw,6rem); align-items: center; }
.m-contact__intro h2 { font-size: var(--m-fs-h2); color: var(--m-heading); margin: .6rem 0 1.2rem; }
.m-contact__intro p { color: var(--m-text-mut); max-width: 40ch; }
.m-form-panel { background: var(--m-sand); border-radius: var(--m-radius); padding: clamp(2rem,1.2rem + 3vw,3.4rem); }
.m-form { display: grid; gap: 1.4rem; }
.m-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.m-field { display: flex; flex-direction: column; gap: .45rem; }
.m-field label { font-size: var(--m-fs-mini); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--m-sage-text); }
.m-field input,.m-field textarea { width: 100%; font-family: var(--m-sans); font-size: 1rem; color: var(--m-ink); background: transparent; border: 1px solid rgba(56,62,66,.32); border-radius: var(--m-radius); padding: .8rem 1rem; transition: border-color .3s var(--m-ease), box-shadow .3s var(--m-ease); }
.m-field textarea { resize: vertical; min-height: 120px; }
.m-field input::placeholder,.m-field textarea::placeholder { color: rgba(58,55,48,.5); }
.m-field input:focus,.m-field textarea:focus { outline: none; border-color: var(--m-sage); box-shadow: 0 0 0 3px rgba(101,116,106,.16); }
/* Auswahl-Chips (Anliegen) */
.m-choices { display: grid; gap: .7rem; }
.m-choice { position: relative; display: flex; align-items: center; gap: .8rem; padding: .95rem 1.1rem; border: 1px solid rgba(56,62,66,.3); border-radius: var(--m-radius); cursor: pointer; transition: border-color .25s var(--m-ease), background .25s var(--m-ease); color: var(--m-on-sand-head); font-weight: 600; }
.m-choice input { position: absolute; opacity: 0; pointer-events: none; }
.m-choice::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(56,62,66,.4); flex: 0 0 auto; transition: border-color .25s, box-shadow .25s; }
.m-choice:hover { border-color: var(--m-sage); }
.m-choice:has(input:checked) { border-color: var(--m-sage); background: rgba(101,116,106,.08); }
.m-choice:has(input:checked)::before { border-color: var(--m-sage); box-shadow: inset 0 0 0 4px var(--m-sage); }
.m-choice:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(101,116,106,.2); }
.m-consent { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--m-fs-small); color: var(--m-on-sand-mut); line-height: 1.5; }
.m-consent input { margin-top: .3rem; width: 18px; height: 18px; accent-color: var(--m-sage); flex: 0 0 auto; }
.m-form__submit { justify-self: start; }
.m-form__submit .m-btn { --bg: var(--m-ink); --fg: #fff; --bd: var(--m-ink); }

/* Multistep-Formular */
.m-form__progress { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.6rem; }
.m-form__bars { display: flex; gap: .4rem; flex: 1; }
.m-form__bar { flex: 1; height: 4px; border-radius: var(--m-radius); background: rgba(56,62,66,.16); transition: background .35s var(--m-ease); }
.m-form__bar.is-done { background: var(--m-sage); }
.m-form__count { font-size: .8rem; font-weight: 600; letter-spacing: .08em; color: var(--m-on-sand-mut); white-space: nowrap; }
.m-form__step { display: none; }
.m-form__step.is-active { display: grid; gap: 1.4rem; animation: m-fade .4s var(--m-ease); }
@keyframes m-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.m-form__steptitle { font-family: var(--m-serif); font-size: 1.35rem; color: var(--m-on-sand-head); }
.m-form__nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .4rem; }
.m-form__nav .m-btn { --bg: var(--m-ink); --fg: #fff; --bd: var(--m-ink); }
.m-form__back { background: none; border: none; color: var(--m-sage-text); font-weight: 600; cursor: pointer; padding: .5rem 0; display: inline-flex; align-items: center; gap: .4rem; }
.m-form__back[hidden] { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .m-form__step.is-active { animation: none; } }

/* ============ Entscheidungsmatrix (geführtes Kontaktformular) ============ */
.m-matrix { display: block; }
.m-matrix__screen { display: none; }
.m-matrix__screen.is-active { display: grid; gap: 1.3rem; animation: m-fade .4s var(--m-ease); }
.m-matrix__back { justify-self: start; background: none; border: none; color: var(--m-sage-text); font-weight: 600; cursor: pointer; padding: .2rem 0; font: inherit; font-size: var(--m-fs-small); display: inline-flex; align-items: center; gap: .5rem; }
.m-matrix__back::before { content: ""; width: .5rem; height: .5rem; border-left: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); }
.m-matrix__back:focus-visible { outline: none; text-decoration: underline; }
.m-matrix__q { font-family: var(--m-serif); font-size: clamp(1.35rem,1.1rem + .8vw,1.7rem); line-height: 1.25; color: var(--m-on-sand-head); }
.m-matrix__q:focus { outline: none; }
.m-matrix__lead { color: var(--m-on-sand-mut); line-height: 1.6; margin-top: -.5rem; max-width: 48ch; }
.m-matrix__cards { display: grid; gap: .8rem; }
.m-matrix__card { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 1rem; row-gap: .15rem; text-align: left; text-decoration: none; font: inherit; cursor: pointer; padding: 1.1rem 1.25rem; border: 1px solid rgba(56,62,66,.26); border-radius: var(--m-radius); background: rgba(255,255,255,.35); color: var(--m-on-sand-head); transition: border-color .25s var(--m-ease), background .25s var(--m-ease), transform .25s var(--m-ease); }
.m-matrix__card:hover { border-color: var(--m-sage); background: rgba(255,255,255,.62); transform: translateY(-1px); }
.m-matrix__card:focus-visible { outline: none; border-color: var(--m-sage); box-shadow: 0 0 0 3px rgba(101,116,106,.22); }
.m-matrix__cardtitle { grid-column: 1; font-weight: 700; font-size: var(--m-fs-body); }
.m-matrix__cardhint { grid-column: 1; font-size: var(--m-fs-small); font-weight: 400; color: var(--m-on-sand-mut); }
.m-matrix__card .m-arrow { grid-column: 2; grid-row: 1 / span 2; width: 22px; height: 22px; color: var(--m-sage-text); transition: transform .25s var(--m-ease); }
.m-matrix__card:hover .m-arrow { transform: translateX(3px); }
.m-matrix__chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.m-matrix__chip { font: inherit; font-weight: 600; color: var(--m-on-sand-head); background: rgba(255,255,255,.4); border: 1px solid rgba(56,62,66,.26); border-radius: 999px; padding: .6rem 1.15rem; cursor: pointer; transition: border-color .2s var(--m-ease), background .2s var(--m-ease); }
.m-matrix__chip:hover { border-color: var(--m-sage); }
.m-matrix__chip.is-active { border-color: var(--m-sage); background: rgba(101,116,106,.14); }
.m-matrix__chip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(101,116,106,.22); }
.m-matrix__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: .3rem; }
.m-matrix__actions .m-btn { --bg: var(--m-ink); --fg: #fff; --bd: var(--m-ink); }
.m-matrix__textlink { background: none; border: none; color: var(--m-sage-text); font-weight: 600; cursor: pointer; font: inherit; padding: .4rem 0; }
.m-matrix__textlink:hover { text-decoration: underline; }
.m-matrix__textlink:focus-visible { outline: none; text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .m-matrix__screen.is-active { animation: none; } }

/* ============ Entscheidungsmatrix, minimal ============
   Der beige Kasten faellt weg. Die Auswahl steht als schlichte Zeilenliste direkt auf dem
   Sektionsgrund, getrennt durch dieselben Haarlinien wie im Rest der Seite. Die Ziffern
   kommen aus einem CSS-Zaehler, das Markup bleibt unveraendert. */
.m-form-panel { background: none; border-radius: 0; padding: 0; }

.m-matrix__screen.is-active { gap: 1.8rem; }
.m-matrix__q { font-family: var(--m-sans); font-weight: 700; letter-spacing: -.005em; color: var(--m-heading); font-size: clamp(1.45rem,1.15rem + 1.2vw,2.1rem); line-height: 1.2; }
.m-matrix__lead { color: var(--m-text-mut); }
.m-matrix__back { color: var(--m-text-mut); font-size: var(--m-fs-mini); letter-spacing: .16em; text-transform: uppercase; }
.m-matrix__back:hover { color: var(--m-heading); }

/* Zeilen statt Karten */
.m-matrix__cards { gap: 0; counter-reset: mrow; border-top: 1px solid var(--m-line); }
.m-matrix__card {
  grid-template-columns: auto 1fr auto;
  column-gap: clamp(1rem,.6rem + 1.2vw,1.8rem);
  padding: clamp(1.15rem,.9rem + .8vw,1.6rem) 0;
  border: 0; border-bottom: 1px solid var(--m-line); border-radius: 0;
  background: none; color: var(--m-heading); position: relative;
  transition: color .3s var(--m-ease);
}
.m-matrix__card::after {
  content: ""; position: absolute; inset: 0 calc(var(--m-gutter) * -0.5);
  background: rgba(247,240,230,.05); opacity: 0; transition: opacity .3s var(--m-ease); z-index: -1;
}
.m-matrix__card:hover { transform: none; background: none; border-color: var(--m-line); }
.m-matrix__card:hover::after,.m-matrix__card:focus-visible::after { opacity: 1; }
.m-matrix__card:focus-visible { outline: none; box-shadow: none; border-color: var(--m-sand); }
.m-matrix__card::before {
  counter-increment: mrow; content: counter(mrow, decimal-leading-zero);
  grid-column: 1; grid-row: 1 / span 2; align-self: center;
  font-family: var(--m-sans); font-size: var(--m-fs-small); font-weight: 700; letter-spacing: .08em; color: var(--m-sage-light); min-width: 2.4ch;
}
.m-matrix__cardtitle { grid-column: 2; font-family: var(--m-sans); font-weight: 700; font-size: 1.15rem; letter-spacing: .01em; line-height: 1.3; }
.m-matrix__cardhint { grid-column: 2; color: var(--m-text-mut); margin-top: .25rem; }
.m-matrix__card .m-arrow { grid-column: 3; color: var(--m-sand); }
.m-matrix__card:hover .m-arrow { transform: translateX(6px); }

/* Auswahlknoepfe schlicht umrandet statt gefuellt */
.m-matrix__chips { gap: .55rem; }
.m-matrix__chip { background: none; color: var(--m-text); border: 1px solid var(--m-line); border-radius: 999px; font-weight: 600; }
.m-matrix__chip:hover { border-color: var(--m-sand); color: var(--m-heading); }
.m-matrix__chip.is-active { background: var(--m-sand); border-color: var(--m-sand); color: var(--m-ink); }
.m-matrix__textlink { color: var(--m-sand); }

/* Eingabefelder auf dunklem Grund */
.m-form-panel .m-field label { color: var(--m-text-mut); }
.m-form-panel .m-field input,.m-form-panel .m-field textarea { color: var(--m-heading); border-color: var(--m-line); border-radius: 0; }
.m-form-panel .m-field input::placeholder,.m-form-panel .m-field textarea::placeholder { color: var(--m-text-mut); }
.m-form-panel .m-field input:focus,.m-form-panel .m-field textarea:focus { border-color: var(--m-sand); box-shadow: none; }
.m-form-panel .m-consent { color: var(--m-text-mut); }
.m-form-panel .m-consent input { accent-color: var(--m-sand); }
.m-form-panel .m-form-notice--ok { background: rgba(159,174,157,.14); border-color: var(--m-sage-light); color: var(--m-heading); }
.m-form-panel .m-form-notice--error { background: rgba(180,110,110,.14); border-color: #b47070; color: var(--m-heading); }
.m-matrix__actions .m-btn { --bg: var(--m-sand); --fg: var(--m-ink); --bd: var(--m-sand); }
.m-matrix__actions .m-btn:hover { background: transparent; color: var(--m-sand); }

/* ============ Hero-Ticker (Laufband) ============ */
.m-hero--ticker .m-hero__inner { padding-bottom: calc(clamp(3.5rem, 2rem + 6vw, 7rem) + 3.2rem); }
.m-ticker { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; overflow: hidden; background: rgba(48,54,58,.72); border-top: 1px solid rgba(247,240,230,.18); }
.m-ticker__track { display: flex; width: max-content; animation: m-tickerscroll 42s linear infinite; }
.m-ticker__row { display: flex; align-items: center; }
.m-ticker__row span { font-family: var(--m-serif); font-size: clamp(.92rem,.86rem + .2vw,1.05rem); letter-spacing: .05em; color: var(--m-cream); white-space: nowrap; padding: .8rem 0; }
.m-ticker__row i { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--m-sage-light); margin: 0 clamp(1.4rem,.8rem + 1.6vw,2.6rem); flex: 0 0 auto; }
@keyframes m-tickerscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.m-ticker:hover .m-ticker__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .m-ticker__track { animation: none; } }

/* ============ Marken (Auswahl + Galerie) ============ */
.m-marken__intro { margin-top: 1rem; color: var(--m-text-mut); }
.m-marken__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin: clamp(1.6rem,1rem + 2vw,2.6rem) 0 clamp(1.8rem,1.2rem + 2vw,2.8rem); }
/* Gleiche Anmutung wie die Buttons der Website: Ghost-Button, aktiv = gefuellter Button. */
.m-marken__tab { font-family: var(--m-sans); font-weight: 600; font-size: 1rem; letter-spacing: .02em; color: var(--m-heading); background: transparent; border: 1px solid rgba(247,240,230,.4); border-radius: 999px; padding: .95rem 1.7rem; cursor: pointer; transition: color .35s var(--m-ease), border-color .35s var(--m-ease), background .35s var(--m-ease), transform .35s var(--m-ease); }
.m-marken__tab:hover { background: var(--m-cream); border-color: var(--m-cream); color: var(--m-ink); transform: translateY(-2px); }
.m-marken__tab.is-active { background: var(--m-cream); border-color: var(--m-cream); color: var(--m-ink); }
.m-marken__tab:focus-visible { outline: 2px solid var(--m-sand); outline-offset: 3px; }
.m-marken__panel[hidden] { display: none; }
.m-marken__text { text-align: center; max-width: 60ch; margin: 0 auto clamp(1.6rem,1rem + 2vw,2.4rem); color: var(--m-text-mut); }
.m-marken__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(.7rem,.4rem + 1vw,1.3rem); }
/* Sichtbar als Grundzustand: faellt JS aus, bleibt die Galerie trotzdem lesbar.
   Erst wenn das Skript uebernimmt (.is-js), wird ein- und ausgeblendet. */
.m-marken__item { margin: 0; transition: opacity .7s var(--m-ease), transform .7s var(--m-ease); }
.m-marken.is-js .m-marken__item { opacity: 0; transform: translateY(18px); }
.m-marken.is-js .m-marken__item.is-in { opacity: 1; transform: none; }
.m-marken__item img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--m-radius); background: rgba(247,240,230,.06); }
.m-marken__grid--square img { aspect-ratio: 1; }
@media (max-width: 900px) { .m-marken__grid { grid-template-columns: repeat(3,1fr); } }
/* Mobil: Marken-Leiste laeuft in einer Zeile und wird gewischt, statt in mehrere
   zerfranste Zeilen umzubrechen (bei sieben Marken sonst sehr unruhig). */
@media (max-width: 700px) {
  .m-marken__tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding-inline: var(--m-gutter); margin-inline: calc(var(--m-gutter) * -1); }
  .m-marken__tabs::-webkit-scrollbar { display: none; }
  /* Andeutung, dass die Reihe weitergeht */
  .m-marken__tabs { -webkit-mask-image: linear-gradient(90deg,#000 0,#000 calc(100% - 46px),transparent 100%); mask-image: linear-gradient(90deg,#000 0,#000 calc(100% - 46px),transparent 100%); }
  .m-marken__tab { flex: 0 0 auto; scroll-snap-align: center; }
}
@media (max-width: 560px) { .m-marken__grid { grid-template-columns: repeat(2,1fr); } }
@media (prefers-reduced-motion: reduce) { .m-marken__item { transition: none; opacity: 1; transform: none; } }

/* ============ Lightbox (Marken-Galerie in Vollbild) ============ */
.m-marken__zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--m-radius); }
.m-marken__zoom:focus-visible { outline: 2px solid var(--m-sand); outline-offset: 3px; }
.m-lightbox[hidden] { display: none; }
.m-lightbox { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(.5rem,2vw,2rem); padding: clamp(1rem,4vw,3rem); background: rgba(24,27,30,.94); opacity: 0; transition: opacity .3s var(--m-ease); }
.m-lightbox.is-open { opacity: 1; }
.m-lightbox__figure { grid-column: 2; margin: 0; display: flex; flex-direction: column; align-items: center; gap: .9rem; min-width: 0; }
.m-lightbox__figure img { max-width: 100%; max-height: 78vh; width: auto; height: auto; object-fit: contain; border-radius: var(--m-radius); }
.m-lightbox__caption { color: var(--m-text-mut); font-size: var(--m-fs-small); text-align: center; max-width: 60ch; }
.m-lightbox__nav, .m-lightbox__close { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(247,240,230,.35); background: rgba(247,240,230,.06); color: var(--m-heading); cursor: pointer; transition: background .3s var(--m-ease), border-color .3s var(--m-ease); }
.m-lightbox__nav:hover, .m-lightbox__close:hover { background: rgba(247,240,230,.16); border-color: var(--m-sand); }
.m-lightbox__nav svg, .m-lightbox__close svg { width: 22px; height: 22px; }
.m-lightbox__nav--prev { grid-column: 1; }
.m-lightbox__nav--next { grid-column: 3; }
.m-lightbox__close { position: absolute; top: clamp(.75rem,2vw,1.5rem); right: clamp(.75rem,2vw,1.5rem); }
.m-lightbox__zaehler { position: absolute; bottom: clamp(.75rem,2vw,1.5rem); left: 50%; transform: translateX(-50%); color: var(--m-text-mut); font-size: var(--m-fs-small); letter-spacing: .06em; }
@media (max-width: 600px) {
  .m-lightbox { grid-template-columns: 1fr; }
  .m-lightbox__figure { grid-column: 1; }
  .m-lightbox__nav { position: absolute; bottom: clamp(3rem,12vw,4.5rem); }
  .m-lightbox__nav--prev { left: clamp(1rem,6vw,2rem); }
  .m-lightbox__nav--next { right: clamp(1rem,6vw,2rem); }
}
@media (prefers-reduced-motion: reduce) { .m-lightbox { transition: none; } }

/* ============ Footer ============ */
.m-footer { background: var(--m-ink-2); color: var(--m-text); }
.m-footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(1.5rem,1rem + 3vw,3rem); padding-block: clamp(3.5rem,2.5rem + 3vw,5rem); }
.m-footer__brand .m-script { font-size: 2.6rem; color: var(--m-sand); }
.m-footer__brand p { margin-top: .8rem; max-width: 34ch; color: var(--m-text-mut); }
.m-footer h3 { font-family: var(--m-sans); font-size: var(--m-fs-mini); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--m-heading); margin-bottom: 1.1rem; }
.m-footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.m-footer a:hover { color: var(--m-cream); }
.m-footer__socials { display: flex; gap: .6rem; margin-top: 1.2rem; }
.m-footer__socials a { width: 42px; height: 42px; border: 1px solid var(--m-line); border-radius: 50%; display: grid; place-items: center; transition: background .35s var(--m-ease), color .35s var(--m-ease), border-color .35s; }
.m-footer__socials a:hover { background: var(--m-sand); color: var(--m-ink); border-color: var(--m-sand); }
.m-footer__socials svg { width: 18px; height: 18px; }
.m-footer__bottom { border-top: 1px solid var(--m-line); padding-block: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .88rem; color: var(--m-text-mut); }

/* ============ Back-to-top ============ */
.m-totop { position: fixed; right: clamp(1rem,.5rem + 1.5vw,2rem); bottom: clamp(1rem,.5rem + 1.5vw,2rem); z-index: 80; width: 56px; height: 56px; border-radius: 50%; background: var(--m-sand); color: var(--m-ink); box-shadow: 0 14px 34px rgba(0,0,0,.35); display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .4s var(--m-ease), transform .4s var(--m-ease), visibility .4s, background .3s; }
.m-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.m-totop:hover { background: var(--m-cream); }
.m-totop svg { width: 20px; height: 20px; }

/* ============ Page-Hero (Unterseiten) ============ */
/* Beige Hero-Flaeche auf den Unterseiten (Beige-Inversion des Systems). */
.m-pagehero { position: relative; min-height: clamp(560px, calc(var(--vph, 100svh) * .72), 760px); display: flex; align-items: stretch; overflow: hidden; color: var(--m-on-sand); background: var(--m-sand); }
.m-pagehero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1.18fr; gap: clamp(1.5rem,0rem + 2.6vw,2.75rem); align-items: center; width: 100%; }
.m-pagehero__body { padding-top: 5rem; }
.m-pagehero__eyebrow { margin-bottom: .6rem; }
.m-pagehero__title { font-size: clamp(3rem,1.6rem + 6vw,6.5rem); font-weight: 600; line-height: .95; color: var(--m-on-sand-head); }
.m-pagehero__lead { color: var(--m-on-sand); margin: 1.4rem 0 2rem; max-width: 46ch; }
.m-pagehero .m-seyebrow, .m-pagehero .m-script { color: var(--m-sage-text); }
.m-pagehero .m-btn { --bg: var(--m-ink); --fg: #fff; --bd: var(--m-ink); }
.m-pagehero .m-btn:hover { --bg: var(--m-ink-2); --bd: var(--m-ink-2); }
/* Header steht oben ueber der beigen Flaeche -> dunkle Schrift, bis gescrollt wird. */
.bzl-hero-sand .m-header:not(.is-scrolled) { color: var(--m-ink); }
.bzl-hero-sand .m-header:not(.is-scrolled) .m-nav a::after { background: var(--m-sage); }
.bzl-hero-sand .m-header:not(.is-scrolled) .m-nav__cta .m-btn { --fg: var(--m-ink); --bd: rgba(56,62,66,.45); }
.bzl-hero-sand .m-header:not(.is-scrolled) .m-nav__cta .m-btn:hover { --bg: var(--m-ink); --fg: #fff; --bd: var(--m-ink); }
.m-pagehero__figure { position: relative; justify-self: center; width: min(100%,460px); aspect-ratio: 4/5; }
.m-pagehero__figure img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: var(--m-radius); }
/* Freigestellte Motive (transparenter Hintergrund) vollstaendig zeigen statt beschneiden. */
/* Freigestelltes Motiv: fuellt die Hoehe und sitzt buendig auf der Kante zum naechsten Abschnitt.
   Die Motive laufen ohne transparenten Rand bis zur Bildunterkante, deshalb schliesst es exakt ab. */
/* Abstand nach oben, sonst laeuft das Motiv unter die feste Kopfzeile. Unten bleibt es buendig. */
.m-pagehero__figure--cut { aspect-ratio: auto; align-self: stretch; justify-self: end; width: 100%; margin-right: calc(var(--m-gutter) * -1); padding-top: clamp(6.5rem, 5rem + 2.5vw, 9rem); }   /* Kopfzeile ist 92 px hoch, plus Luft */
.m-pagehero__figure--cut img { object-fit: contain; object-position: bottom; border-radius: 0; }

/* ============ Split-Head (Abschnittskopf) ============ */
.m-splithead { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,0rem + 5vw,4rem); align-items: end; margin-bottom: clamp(3.5rem,2rem + 5vw,7rem); }
.m-splithead h2 { font-size: var(--m-fs-h2); }
.m-splithead p { color: var(--m-text-mut); }
.m-invert .m-splithead p { color: var(--m-on-sand-mut); }

/* ============ Arch-Karten (ovales Bild über Fläche) ============ */
.m-archgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.5rem,.5rem + 2vw,2.75rem); }
.m-archcard { display: flex; flex-direction: column; align-items: center; }
/* Oval wie auf der Live-Seite, nicht rechteckig. */
.m-archcard__img { width: 82%; aspect-ratio: 3/4; object-fit: cover; border-radius: 50%; position: relative; z-index: 1; box-shadow: 0 20px 44px rgba(0,0,0,.28); }
/* Ausschnitt tiefer legen, wenn das Motiv unten liegt (z. B. Schuhe). */
.m-archcard__img--lower { object-position: center 72%; }
.m-archcard__img--upper { object-position: center 30%; }
/* Helle Karten auf dunklem Abschnitt (wie live) */
.m-archcard__panel { margin-top: -64px; padding: 84px 1.6rem 2.2rem; width: 100%; text-align: center; display: flex; flex-direction: column; gap: .9rem; align-items: center; flex: 1; background: var(--m-cream); border-radius: var(--m-radius); }
.m-archcard__panel h3 { font-family: var(--m-serif); font-weight: 700; font-size: var(--m-fs-h3); color: var(--m-ink); }
.m-archcard__panel p { color: var(--m-on-sand-mut); font-size: 1rem; line-height: 1.6; }
.m-archcard--sand .m-archcard__panel { background: var(--m-sand); }

/* ============ Marken ============ */
.m-brands { text-align: center; }
.m-brands__more { margin-top: clamp(1.6rem,1.2rem + 1vw,2.4rem); color: var(--m-text-mut); font-style: italic; text-align: center; }

/* ============ FAQ ============ */
.m-faq { max-width: 900px; margin-inline: auto; }
.m-faq__item { border-bottom: 1px solid var(--m-line); }
.m-faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; text-align: left; padding: 1.25rem 0; font-family: var(--m-sans); font-weight: 600; font-size: clamp(1.02rem,.97rem + .22vw,1.15rem); line-height: 1.45; color: var(--m-heading); }
.m-faq__icon { flex: 0 0 auto; width: 1.1em; height: 1.1em; transition: transform .4s var(--m-ease); color: var(--m-sand); }
.m-faq__item.is-open .m-faq__icon { transform: rotate(45deg); }
.m-faq__a { overflow: hidden; max-height: 0; transition: max-height .45s var(--m-ease); }
.m-faq__a-inner { padding: 0 0 1.5rem; color: var(--m-text); max-width: 760px; }

/* ============ Vorteile (4er-Raster) ============ */
.m-benefits { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(1.5rem,.5rem + 2vw,2.75rem); }
.m-benefits__item h3 { font-family: var(--m-serif); font-size: var(--m-fs-h3); margin-bottom: .7rem; }
.m-benefits__item p { font-size: 1rem; line-height: 1.6; }
@media (max-width: 860px) { .m-benefits { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .m-benefits { grid-template-columns: 1fr; } }

/* ============ Kontaktdaten ============ */
/* Kontaktdaten + Karte — contained (1200px), zwei Spalten */
.m-contactinfo { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(1.5rem,0rem + 3.5vw,3rem); align-items: stretch; }
.m-contactinfo__panel { background: var(--m-sand); color: var(--m-on-sand); border-radius: var(--m-radius); padding: clamp(2rem,1.2rem + 3vw,3.4rem); }
.m-contactinfo__panel h2 { font-size: var(--m-fs-h2); color: var(--m-on-sand-head); margin-bottom: 1.4rem; }
.m-contactinfo__map { min-height: 440px; }

/* Consent-Karte: kein Google-Request bis zum Klick auf „Karte laden" */
.m-map { position: relative; width: 100%; height: 100%; min-height: 440px; display: grid; background: var(--m-ink-2); border: 1px solid var(--m-line); border-radius: var(--m-radius); overflow: hidden; }
.m-map__consent { place-self: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; max-width: 36ch; padding: 2rem; }
.m-map__pin { width: 34px; height: 34px; color: var(--m-sand); }
.m-map__note { color: var(--m-text-mut); font-size: var(--m-fs-small); line-height: 1.55; }
.m-map__ext { color: var(--m-sand); text-decoration: underline; font-size: var(--m-fs-small); }
.m-map iframe { width: 100%; height: 100%; min-height: 440px; border: 0; display: block; }

/* Split-Teaser contained — gleicher 1200px-Rhythmus wie die Startseite */
.m-split--wrap { padding-block: clamp(3.5rem,2rem + 5vw,6.5rem); }
.m-split--wrap .m-split__grid { max-width: var(--m-maxw); margin-inline: auto; padding-inline: var(--m-gutter); gap: clamp(2rem,0rem + 5vw,5rem); align-items: center; min-height: 0; }
.m-split--wrap .m-split__media { min-height: 0; aspect-ratio: 4/5; border-radius: var(--m-radius); }
.m-split--wrap .m-split__media img { position: static; border-radius: var(--m-radius); }
.m-split--wrap .m-split__panel { padding: 0; }
/* Kontaktdaten als Datenblock, nicht als Fliesstext: drei Gruppen, durch Haarlinien
   getrennt, Beschriftungen als kleine Versalzeile wie im Fusszeilen-Raster. Vorher standen
   sechs Playfair-Zwischenueberschriften untereinander, die Spalte las sich wie ein Aufsatz. */
.m-kontakt__block { margin-top: 1.7rem; padding-top: 1.7rem; border-top: 1px solid rgba(56,62,66,.16); }
.m-kontakt__block:first-of-type { margin-top: 1.8rem; padding-top: 0; border-top: 0; }
.m-kontakt__block--zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 1.8rem; }
.m-kontakt__sub { font-family: var(--m-sans); font-size: var(--m-fs-mini); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--m-on-sand-mut); margin: 0 0 .75rem; }
.m-kontakt__wert { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--m-on-sand-head); }
.m-kontakt__wert a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.m-kontakt__hinweis { margin: 1.1rem 0 0; font-size: var(--m-fs-small); line-height: 1.55; color: var(--m-on-sand-mut); }

/* Zeiten in einer eigenen Spalte, Ziffern auf gleicher Breite, damit die Uhrzeiten
   untereinander fluchten. Zeilenabstand enger als vorher (1rem war fast ein Absatz). */
.m-hours { display: grid; grid-template-columns: max-content 1fr; gap: .6rem 1.6rem; align-items: baseline; }
.m-hours dt { color: var(--m-on-sand-mut); font-weight: 600; }
.m-hours dd { margin: 0; color: var(--m-on-sand-head); font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .m-kontakt__block--zwei { grid-template-columns: 1fr; } }

/* ============ Responsive ============ */
@media (max-width: 1024px) { .m-split__grid { min-height: 0; } }
@media (max-width: 860px) {
  .m-nav { display: none; }
  .m-burger { display: flex; }
  .m-intro__grid,.m-moment__grid,.m-contact__grid,.m-pagehero__inner,.m-splithead,.m-contactinfo { grid-template-columns: 1fr; }
  /* Einspaltig steht der Text unten, nicht das Bild -> Abstand wieder herstellen. */
  .m-moment { padding-bottom: var(--m-section); }
  .m-moment__figure { align-self: auto; }
  .m-intro__figure { max-width: 460px; }
  .m-offer__list { grid-template-columns: 1fr; gap: 0; }
  .m-offer__item { border-top: 1px solid var(--m-line); padding-block: 1.8rem; }
  .m-offer__item:nth-child(2) { transform: none; }
  .m-split__grid { grid-template-columns: 1fr; }
  .m-split__media { min-height: calc(var(--vph, 100svh) * .58); }
  .m-split--reverse .m-split__media { order: 0; }
  .m-insta__grid { grid-template-columns: repeat(3,1fr); }
  .m-form__row { grid-template-columns: 1fr; }
  .m-archgrid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .m-pagehero__body { padding-top: 6rem; }
  .m-pagehero__figure { max-width: 340px; margin-top: 1rem; }
  /* Einspaltig steht das Bild unter dem Text. Die Kopfzeilen-Freistellung von oben
     wuerde dort als 104 px Leerraum mitten im Layout stehen. */
  .m-pagehero__figure--cut { padding-top: 0; margin-right: 0; width: min(100%,340px); justify-self: center; align-self: auto; }
  .m-pagehero__figure--cut img { object-position: center; }

  /* Bildband: statt eines 173 px schmalen Streifens am Rand liegt das Bild
     einspaltig ueber dem Text und laeuft nach unten in den Grund aus. */
  .m-feature { display: block; align-items: stretch; min-height: 0; }
  .m-feature__media { position: relative; inset: auto; right: auto; width: 100%; height: clamp(260px, calc(var(--vph, 100svh) * .42), 420px); }
  .m-feature__media::after { background: linear-gradient(180deg, rgba(var(--m-fade-rgb),0) 42%, rgba(var(--m-fade-rgb),.55) calc(100% - 56px), rgba(var(--m-fade-rgb),1) 100%); }
  .m-feature__inner { padding-bottom: var(--m-section); }
  .m-feature__body { max-width: none; }

  /* Derselbe Gedanke beim Split-Teaser: gestapelt faellt der Verlauf nach unten, nicht zur Seite. */
  .m-split__media::after,
  .m-split--reverse .m-split__media::after { background: linear-gradient(180deg, rgba(var(--m-fade-rgb),0) 48%, rgba(var(--m-fade-rgb),.55) calc(100% - 56px), rgba(var(--m-fade-rgb),1) 100%); }
  .m-split__panel { padding-top: clamp(1.6rem,1rem + 2vw,2.4rem); }
  .m-cta__inner { flex-direction: column; align-items: flex-start; }
  .m-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .m-footer__top { grid-template-columns: 1fr; }
  .m-footer__bottom { flex-direction: column; text-align: center; }
  .m-insta__grid { grid-template-columns: repeat(2,1fr); }
}

/* Tablet: vier Kacheln waeren zu klein, zwei zu gross. */
@media (max-width: 1024px) and (min-width: 861px) { .m-insta__grid { grid-template-columns: repeat(4,1fr); } }

/* ============ Fingerbedienung ============
   Auf Touch bekommen Ziele unter 44 px zusaetzliche Flaeche, ohne dass sich die Optik
   auf dem Desktop aendert. Bei .m-link nur oben, damit die animierte Unterlinie
   (background-position 0 100%) am Text kleben bleibt. */
@media (pointer: coarse) {
  .m-link { padding-top: 10px; }
  .m-quote__dot { width: 44px; height: 44px; }
  .m-footer ul a, .m-footer__bottom a, .m-contact__list a { display: inline-block; padding-block: .4rem; }
  .m-mobilenav a { padding-block: .3rem; }
}

/* Instagram-Feed-Platzhalter */
.m-insta__tile--ph { background: var(--m-ink-3); display: grid; place-items: center; }
.m-insta__ph svg { width: 36px; height: 36px; color: rgba(247,240,230,.32); }
.m-insta__note { text-align: center; margin-top: 1.3rem; color: var(--m-text-mut); font-size: var(--m-fs-small); letter-spacing: .02em; }

/* ============ Theme-Ergänzungen (WordPress) ============ */
.m-skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--m-cream); color: var(--m-ink); padding: .7rem 1.2rem; border-radius: 0 0 var(--m-radius) 0; font-weight: 600; }
.m-skip:focus { left: 0; }
.m-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.m-form-notice { border-radius: var(--m-radius); padding: .9rem 1.1rem; margin-bottom: 1.4rem; font-size: 1rem; }
.m-form-notice--ok { background: rgba(101,116,106,.16); border: 1px solid var(--m-sage); color: var(--m-on-sand-head); }
.m-form-notice--error { background: rgba(150,60,60,.12); border: 1px solid #9c5a5a; color: #7a3a3a; }
/* ============ Rechtstexte (Impressum, Datenschutzerklaerung) ============
   Aufbau uebernommen von fwn-media.de: Kopf mit Kicker und grossem Titel, darunter
   mitlaufendes Inhaltsverzeichnis links und Textkoerper rechts. Farben und Schriften
   kommen aus dem Token-System dieses Themes, nicht aus dem FWN-Theme. */
.m-legalhero { background: var(--m-ink); padding: clamp(7.25rem,5rem + 6vw,10.5rem) 0 clamp(1.6rem,1rem + 1.6vw,2.9rem); border-bottom: 1px solid var(--m-line); }
.m-legalhero__title { font-family: var(--m-serif); font-size: clamp(2.4rem,1.4rem + 4.4vw,4.6rem); font-weight: 600; line-height: 1.02; letter-spacing: -.02em; color: var(--m-heading); margin-top: .75rem; }

.m-legal { background: var(--m-ink); padding: clamp(2.75rem,2rem + 3vw,5rem) 0 var(--m-section); }
.m-legal__grid { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: clamp(2rem,1rem + 4vw,4.5rem); align-items: start; max-width: 1160px; }
.m-legal__toc { position: sticky; top: 6.5rem; background: var(--m-ink-2); border: 1px solid var(--m-line); border-radius: var(--m-radius); padding: 1.5rem 1.4rem; }
.m-legal__toc-title { display: block; font-family: var(--m-sans); font-size: var(--m-fs-mini); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--m-text-mut); margin-bottom: .9rem; }
.m-legal__toc ol { list-style: none; counter-reset: toc; display: flex; flex-direction: column; gap: 2px; padding: 0; margin: 0; }
.m-legal__toc li { counter-increment: toc; }
.m-legal__toc a { display: flex; gap: .7rem; align-items: baseline; padding: .5rem .6rem; border-radius: 9px; font-size: var(--m-fs-small); line-height: 1.35; color: var(--m-text); transition: background .25s var(--m-ease), color .25s var(--m-ease); }
.m-legal__toc a::before { content: counter(toc); color: var(--m-sand); font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }
.m-legal__toc a:hover { background: rgba(205,192,176,.1); color: var(--m-cream); }

.m-legal__body { color: var(--m-text); line-height: 1.75; max-width: 74ch; }
.m-legal__body h2 { position: relative; font-family: var(--m-serif); font-size: clamp(1.5rem,1.1rem + 1.9vw,2.15rem); font-weight: 600; line-height: 1.14; letter-spacing: -.01em; color: var(--m-heading); margin: 3.4rem 0 1.1rem; padding: 1.9rem 0 0 1.1rem; border-top: 1px solid var(--m-line); scroll-margin-top: 6.5rem; }
.m-legal__body h2::before { content: ""; position: absolute; left: 0; top: 2rem; bottom: .35rem; width: 3px; border-radius: 3px; background: var(--m-sand); }
.m-legal__body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.m-legal__body > h2:first-child::before { top: .12rem; }
.m-legal__body h3 { font-family: var(--m-serif); font-size: clamp(1.12rem,1rem + .6vw,1.38rem); font-weight: 600; color: var(--m-heading); margin: 2rem 0 .6rem; scroll-margin-top: 6.5rem; }
.m-legal__body h4 { font-family: var(--m-sans); font-size: 1rem; font-weight: 700; color: var(--m-heading); margin: 1.4rem 0 .5rem; }
.m-legal__body p { margin: 0 0 .9rem; }
.m-legal__body ul, .m-legal__body ol { margin: 0 0 1rem 1.4rem; }
.m-legal__body li { margin-bottom: .55rem; }
.m-legal__body a { color: var(--m-sand); word-break: break-word; text-decoration: underline; }   /* Salbei lag auf Anthrazit bei 2.2:1 */
.m-legal__body a:hover { color: var(--m-cream); }
.m-legal__body strong { color: var(--m-heading); font-weight: 700; }
/* Adressblock im Impressum steht als Erstes und darf etwas kraeftiger wirken. */
.m-legal__body > p:first-child { font-size: 1.06rem; color: var(--m-heading); line-height: 1.65; }
.m-legal__body table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; }
.m-legal__body td, .m-legal__body th { border-bottom: 1px solid var(--m-line); padding: .55rem .8rem .55rem 0; text-align: left; vertical-align: top; }

@media (max-width: 900px) {
  .m-legal__grid { grid-template-columns: 1fr; gap: .5rem; }
  .m-legal__toc { position: static; margin-bottom: 2.2rem; padding: 1.1rem 1rem; }
}
.m-404 { min-height: calc(var(--vph, 100svh) * .78); display: flex; align-items: center; text-align: center; }
.m-404__inner { max-width: 640px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.m-404__code { font-family: var(--m-script); font-size: clamp(4rem,2rem + 8vw,7rem); color: var(--m-sand); line-height: 1; }
.m-404 h1 { font-size: var(--m-fs-h2); }
.m-404 p { color: var(--m-text-mut); max-width: 46ch; }
.m-page { padding-block: clamp(6rem,4rem + 6vw,9rem) var(--m-section); }
.m-page__inner h1 { font-size: var(--m-fs-h2); margin-bottom: 1.4rem; }
.m-page__inner { color: var(--m-text); line-height: 1.75; }
.m-page__inner a { color: var(--m-sand); text-decoration: underline; }

/* ============ Complianz-Banner: leere Platzhalter-Links ausblenden ============
   Complianz Free rendert im Banner drei Dokument-Links als Vorlage, befuellt aber nur zwei:
   - .cookie-statement zeigt auf dieselbe Datenschutzerklaerung -> doppelter Link
   (Der Impressum-Link wird korrekt befuellt, seit im Complianz-Assistenten die Impressum-Seite
   zugewiesen ist - der bleibt sichtbar.)
   - .cmplz-manage-vendors zeigt "{vendor_count}" (TCF ist nicht aktiv)
   Ausblenden ist unkritisch: Datenschutzerklaerung bleibt im Banner verlinkt, das Impressum
   steht im Footer. */
#cmplz-cookiebanner-container .cmplz-link.cookie-statement,
#cmplz-cookiebanner-container .cmplz-link.cmplz-manage-vendors { display: none !important; }

/* ============ Complianz: Annehmen und Ablehnen gleichrangig ============
   Die Einwilligung muss so leicht zu verweigern wie zu erteilen sein (Art. 7 Abs. 3 DSGVO,
   EDSA-Leitlinien 03/2022 zu Dark Patterns). Complianz liefert „Ablehnen" ab Werk in einem
   blassen Grau aus, waehrend „Akzeptieren" die Akzentfarbe traegt. Beide bekommen hier
   exakt dieselbe Flaeche, Schrift und Kontur.
   „Einstellungen ansehen" bleibt bewusst zurueckhaltend: das ist keine dritte
   Einwilligungsentscheidung, sondern der Weg in die Feineinstellung. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-deny {
  background-color: var(--m-sand) !important;
  color: var(--m-ink-2) !important;
  border: 1px solid var(--m-sand) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  opacity: 1 !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover {
  background-color: var(--m-cream) !important;
  border-color: var(--m-cream) !important;
  color: var(--m-ink) !important;
}