/* JEMAKO Vertriebspartnerin Vilena Moradian — theme.css (generiert aus assets/css/parts/). Fonts: fonts.css. */
/* ==== colors ==== */
/* Moradian × JEMAKO — Farben (1:1 aus REFERENCEDESIGN/_ds/.../tokens/colors.css) */
:root {
  --paper: #F7F2E9;
  --paper-2: #EFE8DA;
  --paper-3: #E6DCC8;
  --white: #FDFBF6;

  --ink: #2B2420;
  --ink-2: #5C5248;
  --ink-3: #8A7F73;

  --cognac: #A85A28;
  --cognac-deep: #91582F;
  --cognac-tint: #F4E3D1;
  --cognac-tint-2: #E7CBAD;

  --olive: #83866F;
  --olive-deep: #62654F;
  --olive-tint: #E9EADD;

  --line: #E2D8C5;
  --line-strong: #C6B9A1;

  --ok: #5A7A4E;
  --error: #A63B26;
  --error-tint: #F5DFD7;

  --surface-page: var(--paper);
  --surface-card: var(--white);
  --surface-raised: var(--white);
  --surface-inverse: var(--ink);
  --text-body: var(--ink);
  --text-muted: var(--ink-2);
  --text-faint: var(--ink-3);
  --text-on-inverse: #F5EFE3;
  --text-accent: var(--cognac);
  --border-default: var(--line);
  --border-input: var(--line-strong);
  --focus-ring: 0 0 0 3px rgba(168, 90, 40, 0.28);

  /* Bild-Scrims (aus tokens/imagery.css) */
  --scrim-photo: linear-gradient(to top, rgba(43, 36, 24, 0.62) 0%, rgba(43, 36, 24, 0.26) 45%, rgba(43, 36, 24, 0.06) 100%);
  --scrim-photo-strong: linear-gradient(to top, rgba(43, 36, 24, 0.76) 0%, rgba(43, 36, 24, 0.38) 55%, rgba(43, 36, 24, 0.14) 100%);
  --scrim-hero: linear-gradient(100deg, rgba(43, 36, 24, 0.58) 0%, rgba(43, 36, 24, 0.30) 52%, rgba(43, 36, 24, 0.08) 100%);
  --img-zoom: 1.06;
  --parallax-shift: 40px;
}

/* ==== typography ==== */
/* Moradian × JEMAKO — Typografie (1:1 aus tokens/typography.css + base.css) */
:root {
  --font-display: "Inter Tight", "Inter", "Helvetica Neue", sans-serif;
  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-hand: "Caveat", cursive;

  --text-display-1: 600 clamp(2.6rem, 6vw, 4.5rem)/1.05 var(--font-display);
  --text-display-2: 600 clamp(2rem, 4vw, 3rem)/1.1 var(--font-display);
  --text-title: 600 1.5rem/1.2 var(--font-display);
  --letter-display: -0.02em;

  --text-lead: 400 1.1875rem/1.55 var(--font-sans);
  --text-body: 400 1rem/1.6 var(--font-sans);
  --text-small: 400 0.875rem/1.5 var(--font-sans);

  --text-button: 500 0.9375rem/1 var(--font-sans);
  --text-label: 500 0.8125rem/1.3 var(--font-sans);
  --text-eyebrow: 600 0.75rem/1.2 var(--font-sans);
  --letter-eyebrow: 0.12em;

  --text-hand: 500 1.5rem/1.25 var(--font-hand);
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body-color, var(--ink));
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--cognac); text-decoration-color: var(--cognac-tint-2); text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--cognac-deep); text-decoration-color: var(--cognac); }
::selection { background: var(--cognac-tint-2); }

.wp-block-heading, h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: var(--letter-display);
  color: var(--ink);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==== spacing ==== */
/* Moradian × JEMAKO — Spacing, Radius, Schatten (1:1 aus tokens/layout.css) */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --section-pad: clamp(64px, 10vw, 128px);
  --content-max: 1120px;
  --content-pad: clamp(20px, 5vw, 48px);

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(43, 36, 24, 0.05), 0 4px 16px rgba(43, 36, 24, 0.06);
  --shadow-raised: 0 2px 6px rgba(43, 36, 24, 0.08), 0 12px 32px rgba(43, 36, 24, 0.1);
}

/* ==== motion ==== */
/* Moradian × JEMAKO — Motion-Tokens + Keyframes (1:1 aus tokens/layout.css + theme.css) */
:root {
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-drift: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --dur-reveal: 700ms;
  --dur-scene: 1400ms;
  --reveal-rise: 20px;
  --stagger: 90ms;
}

@keyframes klarwisch {
  from { clip-path: polygon(0% 0%, 130% 0%, 130% 100%, -14% 100%); }
  to { clip-path: polygon(114% 0%, 130% 0%, 130% 100%, 100% 100%); }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sig-mist { display: none !important; }
}

/* Scroll-Reveal: JS setzt .is-inview, sobald das Element sichtbar wird (theme.js) */
.jm-reveal { opacity: 0; transform: translateY(var(--reveal-rise)); }
.jm-reveal.is-inview {
  opacity: 1; transform: none;
  transition: opacity var(--dur-reveal) var(--ease-drift), transform var(--dur-reveal) var(--ease-drift);
}
@media (prefers-reduced-motion: reduce) {
  .jm-reveal { opacity: 1; transform: none; }
}

/* ==== ui ==== */
/* Moradian × JEMAKO — UI-Komponenten (Praefix jm-). Autor: Codex, portiert aus REFERENCEDESIGN. */

/* ---------- Grundlayout / Sektionen ----------
   .jm-section ist IMMER alignfull (voller Hintergrund); die direkten Kinder werden von WPs
   eigener .is-layout-constrained-Regel (aus theme.json settings.layout.contentSize/wideSize)
   automatisch auf --content-max zentriert. Hier nur Sektionsabstand + Innenpolsterung + Farbtoene. */
.jm-section { padding-block: var(--section-pad); padding-inline: var(--content-pad); position: relative; box-sizing: border-box; }
.jm-section.tone-wash { background: var(--paper-2); }
.jm-section.tone-tint { background: var(--cognac-tint); }
.jm-section.tone-inverse { background: var(--cognac-deep); color: var(--text-on-inverse); }
.jm-section.tone-inverse .wp-block-heading,
.jm-section.tone-inverse p { color: var(--text-on-inverse); }

/* Sektions-Ueberschriften auf die Design-Display-Skala setzen. OHNE diese Regel fallen wp:heading-
   Bloecke auf die WP-Core-Defaults zurueck (h2=1.5em=24px) statt auf --text-display-2 (32-48px) --
   das war der Hauptgrund, warum die Seite "kleiner"/anders als das Referenzdesign wirkte. */
.jm-section h2.wp-block-heading {
  font: var(--text-display-2); letter-spacing: var(--letter-display); text-wrap: pretty;
}
.jm-section h3.wp-block-heading {
  font: 600 clamp(1.4rem, 2vw, 1.75rem)/1.2 var(--font-display); letter-spacing: var(--letter-display);
}

.jm-eyebrow { display: inline-block; font: var(--text-eyebrow); letter-spacing: var(--letter-eyebrow); text-transform: uppercase; color: var(--cognac); margin-bottom: var(--space-3); }
.jm-eyebrow.is-muted { color: var(--ink-3); }

/* ---------- Buttons (core/button + className) ---------- */
/* Buttons duerfen NIE zeichenweise umbrechen (sonst vertikale Buchstaben-Kolonne, s. Mobil-Header). */
.jm-btn-primary .wp-block-button__link,
.jm-btn-secondary .wp-block-button__link,
.jm-btn-inverse .wp-block-button__link,
.wp-block-button__link.jm-btn-primary { white-space: nowrap; word-break: normal; }
/* Selektoren jeweils in ZWEI Formen: Klasse am .wp-block-button-Wrapper (Core-Buttons in Patterns)
   UND direkt am .wp-block-button__link-<a> (Custom-Block-Render, z. B. Hero) -- sonst greift der
   Style nur bei einer der beiden Ausgabeformen (Hero-Sekundaerbutton war so ungestylt = WP-Default). */
.wp-block-button.jm-btn-primary .wp-block-button__link,
.wp-block-button__link.jm-btn-primary {
  background: var(--cognac); color: #fff; border-radius: var(--radius-pill);
  font: var(--text-button); padding: 14px 26px; border: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.wp-block-button.jm-btn-primary .wp-block-button__link:hover,
.wp-block-button__link.jm-btn-primary:hover { background: var(--cognac-deep); }

.wp-block-button.jm-btn-secondary .wp-block-button__link,
.wp-block-button__link.jm-btn-secondary {
  background: transparent; color: var(--ink); border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill); font: var(--text-button); padding: 13px 25px;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.wp-block-button.jm-btn-secondary .wp-block-button__link:hover,
.wp-block-button__link.jm-btn-secondary:hover { border-color: var(--cognac); color: var(--cognac); }

.wp-block-button.jm-btn-inverse .wp-block-button__link,
.wp-block-button__link.jm-btn-inverse {
  background: transparent; color: var(--text-on-inverse); border: 1px solid rgba(245, 239, 227, 0.45);
  border-radius: var(--radius-pill); font: var(--text-button); padding: 13px 25px;
}
.wp-block-button.jm-btn-inverse .wp-block-button__link:hover,
.wp-block-button__link.jm-btn-inverse:hover { border-color: var(--text-on-inverse); }

.wp-block-button.jm-btn-ghost .wp-block-button__link {
  background: none; color: var(--cognac); border: none; padding: 0; font: var(--text-button);
  text-decoration: underline; text-decoration-color: var(--cognac-tint-2); text-underline-offset: 3px;
}

/* ---------- Header / Topbar ---------- */
/* Sticky gehoert auf den Template-Part-WRAPPER, nicht auf .jm-header: WP wrappt den Header in
   <header class="wp-block-template-part">, das nur header-hoch ist. Ein Sticky-Element wird durch
   seine Elternhoehe begrenzt -> auf .jm-header wirkungslos. Der Wrapper dagegen ist direktes Kind
   des hohen Scroll-Containers .wp-site-blocks -> hier klebt Sticky korrekt (wie Referenz). */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 30; }
/* Admin-Bar-Versatz (nur eingeloggt) -> Header nicht unter der Leiste verstecken. */
body.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; }
@media screen and (min-width: 783px) { body.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; } }
/* .jm-header bleibt positioniert (relative) -> Anker (offsetParent) fuers absolute Mobil-Menue. */
.jm-header { position: relative; z-index: 30; background: rgba(247, 242, 233, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: background var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out); }
.jm-header.is-compact { background: rgba(247, 242, 233, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: var(--line); }
.jm-header-inner { max-width: var(--content-max); margin: 0 auto; padding: 16px var(--content-pad); display: flex; align-items: center; gap: 24px; }
.jm-wordmark { display: flex; flex-direction: column; gap: 2px; text-decoration: none; }
.jm-wordmark > * { margin: 0; } /* core/site-title + core/site-tagline bringen sonst WP-Flow-Block-Gap mit */
.jm-wordmark-name { font: 600 1.25rem/1 var(--font-display); letter-spacing: -0.01em; color: var(--ink); }
.jm-wordmark-sub { font: 600 0.625rem/1 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.jm-wordmark.is-inverse .jm-wordmark-name { color: var(--text-on-inverse); }
.jm-wordmark.is-inverse .jm-wordmark-sub { color: var(--cognac-tint-2); }

.jm-header nav.wp-block-navigation { margin-left: auto; }
.jm-header .wp-block-navigation__container { gap: 24px; align-items: center; }
/* Core-Navigation setzt Link-Farbe ueber .wp-block-navigation-item__content.wp-block-navigation-item__content
   (Spezifitaet 0,3,0 per Absicht) -- hier bewusst mit mind. gleicher/hoeherer Spezifitaet ueberschreiben. */
.jm-header .wp-block-navigation-item a,
.jm-header .wp-block-navigation-item__content.wp-block-navigation-item__content {
  font: var(--text-button); color: var(--ink-2); text-decoration: none; transition: color var(--dur-fast) var(--ease-out);
}
.jm-header .wp-block-navigation-item a:hover,
.jm-header .wp-block-navigation-item__content.wp-block-navigation-item__content:hover { color: var(--cognac); }
.jm-header .wp-block-navigation__responsive-container-open,
.jm-header .wp-block-navigation__responsive-container-close { color: var(--ink); }

/* WPs Default-Hamburger-SVG hat nur ZWEI Striche -> Referenz nutzt das Lucide-"menu"-Icon (DREI
   Striche). Statt es nachzubauen: das Core-SVG ausblenden und das EXAKTE Lucide-Icon als CSS-mask
   einsetzen (Original-Pfade M4 5h16 / M4 12h16 / M4 19h16, stroke-width 1.75 + runde Enden wie in
   der Referenz, dort size 20). Faerbung ueber background-color = currentColor (--ink).
   Der Button selbst = Referenz-"IconButton" (ghost): 44x44 rund, transparent, Cognac-Tint bei Hover. */
.jm-header .wp-block-navigation__responsive-container-open {
  width: 44px; height: 44px; padding: 0; border-radius: var(--radius-pill, 999px);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); background: transparent; border: 1px solid transparent;
  transition: background var(--dur-fast, 0.15s) var(--ease-out, ease);
}
.jm-header .wp-block-navigation__responsive-container-open:hover { background: var(--cognac-tint); }
.jm-header .wp-block-navigation__responsive-container-open svg { display: none !important; }
.jm-header .wp-block-navigation__responsive-container-open::before {
  content: ""; width: 20px; height: 20px; background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16"/><path d="M4 12h16"/><path d="M4 19h16"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16"/><path d="M4 12h16"/><path d="M4 19h16"/></svg>') center / contain no-repeat;
}

/* Zwei Header-CTAs (Referenz-Muster): lange Beschriftung auf Desktop, kurze auf Mobil. */
.jm-header .jm-cta-mobile { display: none; }

/* Mobil: Wortmarke links, dann [kompakter CTA][Hamburger] rechts gruppiert (wie Referenz).
   Breakpoint 599px = WPs overlayMenu:"mobile"-Schwelle fuer die Navigation (Hamburger erscheint
   bei <=599px). Muss identisch sein, sonst mobiler CTA neben Desktop-Nav-Links. */
@media (max-width: 599px) {
  .jm-header-inner { gap: 12px; padding-inline: var(--content-pad); }
  .jm-header .jm-wordmark { min-width: 0; }
  .jm-header .jm-wordmark-name { font-size: 1.1rem; }
  .jm-header .jm-cta-desktop { display: none; }
  .jm-header .jm-cta-mobile { display: block; }
  .jm-header .wp-block-buttons { order: 2; margin-left: auto; flex-shrink: 0; }
  /* WP setzt nav auf position:relative -> das Dropdown-Panel (position:absolute) haenge sonst an der
     schmalen 40px-Hamburger-Box statt am Header. Deshalb nav hier statisch: offsetParent wird der
     sticky .jm-header (volle Breite), Panel spannt korrekt ueber die ganze Breite. */
  .jm-header nav.wp-block-navigation { order: 3; margin-left: 0; flex-shrink: 0; position: static !important; }
  .jm-header .jm-cta-mobile .wp-block-button__link { padding: 10px 16px; font-size: 0.9375rem; }

  /* ---- Mobiles Menue = Dropdown UNTER dem Header (Header bleibt sichtbar), wie Referenz ----
     Nicht WPs Vollbild-Overlay (das verdeckt den Header). Der Container wird per position:absolute
     relativ zum sticky .jm-header (top:100% = direkt unter dem Header) verankert -> admin-bar-sicher,
     unabhaengig von der Header-Hoehe. Cremefarbenes Panel, gestapelte Links mit Trennlinien. */
  .jm-header .wp-block-navigation__responsive-container.is-menu-open {
    position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; bottom: auto !important;
    width: 100% !important; height: auto !important; min-height: 0 !important; max-height: 80dvh !important;
    background: var(--paper) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    padding: 8px var(--content-pad) 20px !important; box-sizing: border-box !important;
    display: block !important; z-index: 90 !important; overflow-y: auto;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow-card);
    /* WPs Overlay-Animation hinterlaesst transform:translateY(0) -> das wuerde ein containing-block
       fuer position:fixed etablieren (X-Button landet im Panel statt viewport-fix). Deshalb neutralisieren. */
    animation: none !important; transform: none !important;
  }
  .jm-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { transform: none !important; }
  .jm-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
  .jm-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
  .jm-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { width: 100% !important; max-width: none !important; }
  /* WP-Core-Reset: der Dialog bekommt margin-top:46px (Admin-Bar) und der Content padding-top:56px +
     align-items:flex-end (Platz fuer Close + rechtsbuendig) -> genau das erzeugt den grossen Leerraum
     und die falsche Ausrichtung. Hier neutralisieren: Menuepunkte starten direkt unter der Topbar,
     linksbuendig ueber die volle Breite (wie Referenz). */
  .jm-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { margin-top: 0 !important; }
  .jm-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    padding-top: 0 !important; padding-bottom: 0 !important; margin: 0 !important;
    display: block !important; align-items: stretch !important;
  }
  .jm-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    flex-direction: column !important; align-items: stretch !important; width: 100%; gap: 4px !important;
  }
  .jm-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    width: 100%; border-bottom: 1px solid var(--line);
  }
  .jm-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child { border-bottom: none; }
  .jm-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    display: block !important; width: 100%; padding: 14px 4px !important;
    font: 500 1.05rem/1 var(--font-sans) !important; color: var(--ink) !important;
  }
  /* Hamburger ausblenden solange offen; runder X-Button an EXAKT derselben Stelle wie der Hamburger
     (rechts neben "Beratung", vertikal zentriert -- wie Referenz). Die genaue top/left-Position setzt
     theme.js zur Laufzeit aus der echten Hamburger-Position (getBoundingClientRect) -> robust gegen
     Header-Hoehe, Admin-Leiste und Viewport. Hier nur das visuelle Styling + position:fixed. */
  html.has-modal-open .jm-header .wp-block-navigation__responsive-container-open { visibility: hidden !important; }
  .jm-header .wp-block-navigation__responsive-container-close {
    position: fixed !important; bottom: auto !important; z-index: 100001 !important;
    width: 44px; height: 44px; border-radius: var(--radius-pill, 999px) !important;
    background: transparent !important; color: var(--ink) !important; border: 1px solid transparent !important;
    display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important;
    transition: background var(--dur-fast, 0.15s) var(--ease-out, ease);
  }
  .jm-header .wp-block-navigation__responsive-container-close:hover { background: var(--cognac-tint) !important; }
  /* Exaktes Lucide-"x"-Icon (Original-Pfade), analog zum Hamburger per mask -> einfaerbbar. */
  .jm-header .wp-block-navigation__responsive-container-close svg { display: none !important; }
  .jm-header .wp-block-navigation__responsive-container-close::before {
    content: ""; width: 20px; height: 20px; background-color: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>') center / contain no-repeat;
  }
}

/* ---------- Footer ---------- */
.jm-footer { background: var(--cognac-deep); color: var(--text-on-inverse); }
.jm-footer a,
.jm-footer .wp-block-navigation-item__content.wp-block-navigation-item__content { color: var(--cognac-tint-2); text-decoration: none; }
.jm-footer a:hover,
.jm-footer .wp-block-navigation-item__content.wp-block-navigation-item__content:hover { color: var(--text-on-inverse); }
.jm-footer-main { max-width: var(--content-max); margin: 0 auto; padding: 56px var(--content-pad) 40px; }
.jm-footer-claim { margin: 0; font: var(--text-small); color: var(--cognac-tint-2); max-width: 36ch; }
.jm-footer-nav { display: flex; flex-direction: column; gap: 10px; font: var(--text-small); }
.jm-footer-contact { display: flex; flex-direction: column; gap: 10px; font: var(--text-small); color: var(--cognac-tint-2); }
.jm-footer-bottom { border-top: 1px solid rgba(245, 239, 227, 0.18); }
.jm-footer-bottom-inner { max-width: var(--content-max); margin: 0 auto; padding: 16px var(--content-pad); display: flex; flex-wrap: wrap; gap: 24px; font: 400 0.8125rem/1.4 var(--font-sans); color: rgba(245, 239, 227, 0.6); }

/* ---------- Sticky WhatsApp-Float ---------- */
.jm-whatsapp-float {
  position: fixed; bottom: 20px; right: 20px; z-index: 40; text-decoration: none;
  display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px;
  background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-raised);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.jm-whatsapp-float.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.jm-whatsapp-float:hover { background: var(--cognac-tint); }
.jm-whatsapp-float-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--paper-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.jm-whatsapp-float-text { display: flex; flex-direction: column; gap: 2px; }
.jm-whatsapp-float-title { font: 500 0.875rem/1 var(--font-sans); color: var(--ink); }
.jm-whatsapp-float-sub { display: flex; align-items: center; gap: 5px; font: 400 0.75rem/1 var(--font-sans); color: var(--cognac); }

/* ---------- Handschrift-Notiz (Custom-Block-Klasse + Block-Style-Variante core/paragraph) ---------- */
.jm-handnote,
.wp-block-paragraph.is-style-handnote,
p.is-style-handnote {
  font: var(--text-hand); color: var(--cognac-deep); display: inline-block; transform: rotate(-2deg);
}
.jm-section.tone-inverse .jm-handnote,
.jm-section.tone-inverse .is-style-handnote,
.jm-hero-full .jm-handnote,
.jm-hero-full .is-style-handnote { color: var(--cognac-tint-2); }

/* ---------- Hero ---------- */
.jm-hero-full { position: relative; min-height: 100svh; max-height: 1000px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; color: var(--text-on-inverse); }
.jm-hero-full .jm-hero-scene { position: absolute; inset: 0; z-index: 0; }
.jm-hero-full .jm-hero-scrim { position: absolute; inset: 0; background: var(--scrim-hero); z-index: 0; }
.jm-hero-full .jm-hero-content { position: relative; z-index: 1; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--content-pad) clamp(40px, 8vh, 84px); display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.jm-hero-full .jm-hero-content > * { max-width: 720px; }
.jm-hero-full h1 { font: var(--text-display-1); letter-spacing: var(--letter-display); color: var(--text-on-inverse); }
.jm-hero-full p { font: var(--text-lead); color: rgba(245, 239, 227, 0.88); max-width: 48ch; }
.jm-hero-badge { display: inline-block; padding: 6px 14px; border: 1px solid rgba(245, 239, 227, 0.45); border-radius: var(--radius-pill); font: var(--text-eyebrow); letter-spacing: var(--letter-eyebrow); text-transform: uppercase; color: var(--text-on-inverse); }
/* Akzentwort in Headlines (Cognac statt Kursive) -- auf dunklem Grund heller eingefaerbt */
.jm-accent { font-style: normal; color: var(--cognac); }
.jm-hero-full .jm-accent, .jm-section.tone-inverse .jm-accent { color: var(--cognac-tint-2); }
.jm-hero-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* Hero-CTAs sind die grosse "lg"-Variante (Referenz: font 1.0625rem, padding 16/32). */
.jm-hero-cta-row .wp-block-button__link,
.jm-hero-cta-row a.wp-block-button__link { font-size: 1.0625rem; padding: 16px 32px; }

.jm-hero-split .jm-hero-text { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 6vh, 96px) var(--content-pad); }
.jm-hero-split .jm-hero-text-inner { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; max-width: 560px; margin-left: auto; margin-right: clamp(24px, 4vw, 72px); }
.jm-hero-split h1 { font: var(--text-display-1); letter-spacing: var(--letter-display); }
.jm-hero-split p { font: var(--text-lead); color: var(--ink-2); max-width: 44ch; }
.jm-hero-split .jm-hero-scene { position: relative; overflow: hidden; }

/* .jm-photo-scene: FUeLLT einen positionierten Vorfahren (Hero, BeforeAfter-Layer) -- position:absolute. */
.jm-photo-scene { position: absolute; inset: 0; background: var(--paper-3); background-image: repeating-linear-gradient(115deg, rgba(43,36,24,0.045) 0px, rgba(43,36,24,0.045) 2px, transparent 2px, transparent 16px); display: flex; align-items: center; justify-content: center; }
.jm-photo-scene-label { font: 400 0.8125rem/1.4 ui-monospace, monospace; color: var(--ink-3); background: rgba(253, 251, 246, 0.72); padding: 6px 12px; border-radius: var(--radius-s); max-width: 70%; text-align: center; }
/* .jm-photo-placeholder: eigenstaendiger Platzhalter im Normal-Flow (Photo-Block, Produkt-Karte) --
   KEIN position:absolute, sonst bricht das Layout ausserhalb eines positionierten Wrappers. */
.jm-photo-placeholder { position: relative; background: var(--paper-3); background-image: repeating-linear-gradient(115deg, rgba(43,36,24,0.045) 0px, rgba(43,36,24,0.045) 2px, transparent 2px, transparent 16px); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-l); width: 100%; }
.jm-photo { aspect-ratio: 4 / 3; background: var(--paper-3); border: 1px dashed var(--line-strong); border-radius: var(--radius-l); display: flex; align-items: center; justify-content: center; font: var(--text-label); color: var(--ink-3); text-align: center; padding: 16px; box-sizing: border-box; }

.sig-mist { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: rgba(247, 242, 233, 0.8); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: klarwisch var(--dur-scene) var(--ease-drift) 400ms both; }

/* ---------- Karten (Feature / Step / Weg / Produkt) ---------- */
.jm-feature-nr { font: 600 0.875rem/1 var(--font-display); letter-spacing: 0.08em; color: var(--cognac); }
/* Feature/Statement-Titel: Referenz-Groesse clamp(1.4rem,2vw,1.75rem) statt --text-title (1.5rem). */
.jm-feature h3 { font: 600 clamp(1.4rem, 2vw, 1.75rem)/1.15 var(--font-display); letter-spacing: var(--letter-display); margin: 8px 0; }

.jm-step { display: flex; gap: 22px; }
.jm-step-nr { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--cognac-tint); color: var(--cognac-deep); display: flex; align-items: center; justify-content: center; font: 600 0.9375rem/1 var(--font-display); }
/* Step-Titel: Referenz 1.375rem (22px), war 1.0625rem (17px). */
.jm-step h3 { font: 600 1.375rem/1.2 var(--font-display); letter-spacing: var(--letter-display); margin: 0 0 6px; }

.jm-path-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); padding: var(--space-6); display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-card); transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.jm-path-card:hover { box-shadow: var(--shadow-raised); transform: translateY(-2px); }
.jm-path-card.tone-tint { background: var(--cognac-tint); border-color: var(--cognac-tint-2); }
.jm-path-card h3 { font: var(--text-title); }
/* Karten-CTA als umrandete Sekundaer-Pille (Referenz), nicht als Ghost-Link. margin-top:auto haelt
   den Button am Kartenboden buendig, egal wie lang der Text ist. */
.jm-path-card .jm-card-cta { display: inline-flex; align-items: center; align-self: flex-start; width: auto; margin-top: auto; white-space: nowrap; }

.jm-product-card { display: flex; flex-direction: column; gap: 14px; }
/* Produkt-Titel: Referenz clamp(1.5rem,2.4vw,2rem) (24-32px), war 1.0625rem (17px). */
.jm-product-card h3 { font: 600 clamp(1.5rem, 2.4vw, 2rem)/1.15 var(--font-display); letter-spacing: var(--letter-display); }
.jm-product-card h3 a { color: var(--ink); text-decoration: none; }
.jm-product-card h3 a:hover { color: var(--cognac); }

/* Eyebrow auf dunklem Panel (tone-inverse) heller einfaerben, sonst zu wenig Kontrast */
.jm-section.tone-inverse .jm-eyebrow { color: var(--cognac-tint-2); }

/* ---------- Ritual/Ablauf-Timeline (dunkles Panel, Scroll-Fortschrittslinie) ----------
   Track + Fortschrittslinie sind ::before/::after auf dem Group-Wrapper selbst (Kap. 3a Regel 3:
   Dekoration per CSS, kein rohes <div> im Core-Block -- sonst wird der Block ungueltig). Die
   Fortschritts-Hoehe steuert JS ueber die CSS-Variable --jm-progress (theme.js initTimeline()). */
.jm-timeline-steps { position: relative; padding-left: 40px; --jm-progress: 0px; }
.jm-timeline-steps::before {
  content: ""; position: absolute; left: 19px; top: 46px; bottom: 46px; width: 2px;
  background: rgba(245, 239, 227, 0.16); border-radius: 1px; z-index: 0;
}
.jm-timeline-steps::after {
  content: ""; position: absolute; left: 19px; top: 46px; width: 2px; height: var(--jm-progress);
  background: var(--cognac); border-radius: 1px; z-index: 0;
  transition: height var(--dur-slow) var(--ease-out);
}
.jm-timeline-steps .jm-step { padding: 26px 0; opacity: 0.42; transition: opacity var(--dur-slow) var(--ease-drift); }
.jm-timeline-steps .jm-step .jm-step-nr {
  margin-left: -40px; position: relative; z-index: 1;
  background: var(--cognac-deep); border: 1px solid rgba(245, 239, 227, 0.35); color: var(--text-on-inverse);
  transition: background var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out);
}
.jm-timeline-steps .jm-step.is-active { opacity: 1; }
.jm-timeline-steps .jm-step.is-active .jm-step-nr { background: var(--cognac); border-color: var(--cognac); }
.jm-timeline-steps .jm-step h3 { color: var(--text-on-inverse); }
.jm-timeline-steps .jm-step p { color: rgba(245, 239, 227, 0.72); margin: 0; max-width: 44ch; }
@media (prefers-reduced-motion: reduce) {
  .jm-timeline-steps .jm-step, .jm-timeline-steps .jm-step .jm-step-nr, .jm-timeline-steps::after { transition: none; }
}

/* ---------- Zitate / Testimonials (core/quote, Block-Style "jm-quote") ---------- */
.jm-quote,
.wp-block-quote.jm-quote,
.wp-block-quote.is-style-jm-quote {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: var(--space-6); box-shadow: var(--shadow-card); margin: 0;
}
.jm-quote p, .is-style-jm-quote p { font: 500 1.0625rem/1.5 var(--font-display); color: var(--ink); margin: 0 0 12px; }
.jm-quote cite, .is-style-jm-quote cite { font: var(--text-small); color: var(--ink-2); font-style: normal; }

/* ---------- FAQ-Akkordeon (core/details, Block-Style "jm-faq-item") ---------- */
.wp-block-details.jm-faq-item,
.wp-block-details.is-style-jm-faq-item {
  border-bottom: 1px solid var(--line); padding: 18px 0;
}
.wp-block-details.jm-faq-item summary,
.wp-block-details.is-style-jm-faq-item summary {
  font: 600 1.0625rem/1.35 var(--font-display); color: var(--ink); cursor: pointer;
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.wp-block-details.jm-faq-item summary::-webkit-details-marker,
.wp-block-details.is-style-jm-faq-item summary::-webkit-details-marker { display: none; }
.wp-block-details.jm-faq-item summary::after,
.wp-block-details.is-style-jm-faq-item summary::after {
  content: ""; flex-shrink: 0; width: 12px; height: 12px;
  border-right: 2px solid var(--cognac); border-bottom: 2px solid var(--cognac);
  transform: rotate(45deg); transition: transform var(--dur-fast) var(--ease-out);
}
.wp-block-details.jm-faq-item[open] summary::after,
.wp-block-details.is-style-jm-faq-item[open] summary::after { transform: rotate(-135deg); }
.wp-block-details.jm-faq-item p,
.wp-block-details.is-style-jm-faq-item p { color: var(--ink-2); margin: 12px 0 0; }

/* ---------- Blog-Callouts (Direktantwort / Warnung / Hinweis / Produkt-Empfehlung) ---------- */
.jm-callout { border-radius: var(--radius-m); padding: var(--space-5) var(--space-6); margin: 1.6em 0; }
.jm-callout p:last-child { margin-bottom: 0; }
.jm-callout-direktantwort { background: var(--cognac-tint); border: 1px solid var(--cognac-tint-2); }
.jm-callout-hinweis { background: var(--paper-2); border: 1px solid var(--line); }
.jm-callout-warnung { background: var(--error-tint); border: 1px solid var(--error); }
.jm-callout-produkt { background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.jm-callout-label { display: block; font: var(--text-eyebrow); letter-spacing: var(--letter-eyebrow); text-transform: uppercase; color: var(--cognac); margin-bottom: 8px; }

/* ---------- Kontaktformular ---------- */
.jm-form { display: flex; flex-direction: column; gap: 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); padding: var(--space-6); box-shadow: var(--shadow-card); }
.jm-form-field { display: flex; flex-direction: column; gap: 6px; }
.jm-form-field label { font: var(--text-label); color: var(--ink-2); }
.jm-form-field input,
.jm-form-field textarea {
  font: var(--text-body); color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: var(--radius-s); padding: 12px 14px; min-width: 0;
}
.jm-form-field input:focus,
.jm-form-field textarea:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--cognac); }
.jm-form-submit { align-self: flex-start; }
.jm-form-note { font: var(--text-small); color: var(--ink-3); margin: 0; }
.jm-form-success { background: var(--olive-tint); border: 1px solid var(--olive); border-radius: var(--radius-m); padding: var(--space-5); }
.jm-form-error { background: var(--error-tint); border: 1px solid var(--error); border-radius: var(--radius-m); padding: var(--space-5); }
.jm-form[hidden] { display: none; }
.jm-form-success[hidden],
.jm-form-error[hidden] { display: none; }

/* ---------- RadiusMap ---------- */
.jm-radiusmap { position: relative; aspect-ratio: 4 / 3; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; }
.jm-radiusmap-ring { position: absolute; left: 50%; top: 50%; height: 88%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); border: 1.5px dashed var(--line-strong); border-radius: 50%; }
.jm-radiusmap-radiuslabel { position: absolute; left: 50%; top: 6%; transform: translateX(-50%); font: var(--text-label); color: var(--ink-3); background: var(--paper-2); padding: 0 8px; }
.jm-radiusmap-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 5px; }
.jm-radiusmap-center-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--paper); outline: 1.5px solid var(--ink); }
.jm-radiusmap-center-label { font: 600 0.8125rem/1 var(--font-sans); color: var(--ink); white-space: nowrap; }
.jm-radiusmap-place { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 5px; }
.jm-radiusmap-place-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--olive); }
.jm-radiusmap-place-label { font: 400 0.8125rem/1 var(--font-sans); color: var(--ink-2); white-space: nowrap; }
.jm-radiusmap-caption { margin: 10px 0 0; font: var(--text-label); color: var(--ink-3); }

/* ---------- Vorher/Nachher-Regler ---------- */
.jm-beforeafter { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-l); overflow: hidden; user-select: none; touch-action: pan-y; }
.jm-beforeafter-layer { position: absolute; inset: 0; }
.jm-beforeafter-after { clip-path: inset(0 0 0 50%); }
.jm-beforeafter-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--white); transform: translateX(-50%); cursor: ew-resize; }
.jm-beforeafter-grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-raised); display: flex; align-items: center; justify-content: center; }
.jm-beforeafter-label { position: absolute; bottom: 14px; font: var(--text-label); color: var(--text-on-inverse); background: rgba(43, 36, 24, 0.55); padding: 4px 12px; border-radius: var(--radius-pill); }
.jm-beforeafter-label.is-before { left: 14px; }
.jm-beforeafter-label.is-after { right: 14px; }

/* ---------- Startseite: Kleinteile ---------- */
.jm-quote-placeholder { font: italic 400 0.9375rem/1.5 var(--font-sans); color: var(--ink-3); border-left: 2px solid var(--line-strong); padding-left: 14px; }
.jm-languages { font: var(--text-small); color: var(--ink-2); }
.jm-product-rows { display: flex; flex-direction: column; gap: clamp(48px, 7vw, 88px); margin-top: 56px; }
/* Produkt-Auftritt-Namen: Referenz-Groesse clamp(1.5rem,2.4vw,2rem), Ink-Farbe, KEIN Link-Look. */
.jm-product-rows .b-product-text h3.wp-block-heading { font: 600 clamp(1.5rem, 2.4vw, 2rem)/1.15 var(--font-display); letter-spacing: var(--letter-display); }
.jm-product-rows .b-product-text h3 a { color: var(--ink); text-decoration: none; }
.jm-product-rows .b-product-text h3 a:hover { color: var(--cognac); }
.jm-product-outro { margin-top: clamp(48px, 7vw, 80px); padding-top: 40px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.jm-product-outro p { margin: 0; font: var(--text-lead); color: var(--ink); max-width: 40ch; }
.jm-closing .jm-closing-inner { max-width: 640px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; gap: 20px; align-items: center; }
.jm-closing .jm-closing-inner .wp-block-buttons { justify-content: center; }
/* Abschluss-CTAs sind die grosse "lg"-Variante wie im Hero (Referenz ClosingCta size="lg"). */
.jm-closing .jm-closing-inner .wp-block-button__link { font-size: 1.0625rem; padding: 16px 32px; }
.jm-micro { font: var(--text-small); color: var(--ink-3); margin-top: 6px; }
.jm-seo-footnote-section { padding-block: var(--space-8); }
.jm-seo-footnote { font: var(--text-small); color: var(--ink-3); max-width: 72ch; margin: 0 0 8px; }

/* ==== sections ==== */
/* Moradian × JEMAKO — Block-Layouts (1:1 aus REFERENCEDESIGN/theme/theme.css) */
.nav-desktop { display: flex; }
.nav-mobile { display: none; }

.b-footer { display: grid; grid-template-columns: 1fr; gap: 32px; }
.b-statements { display: grid; grid-template-columns: 1fr; }
.b-statements > * { padding: 28px 0; }
.b-statements > * + * { border-top: 1px solid var(--line); }
.b-timeline { display: grid; grid-template-columns: 1fr; gap: 48px; }
.b-proof { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.b-paths { display: grid; grid-template-columns: 1fr; gap: 20px; }
.b-portrait { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.b-portrait > *:first-child { max-width: 480px; }
.b-product-row { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.b-testimonials { display: grid; grid-template-columns: 1fr; gap: 20px; }
.block-hero-split { display: grid; grid-template-columns: 1fr; }
.hero-split-img { order: -1; height: 44svh; min-height: 300px; }
.motion-note { max-width: 240px; }

@media (max-width: 840px) {
  .nav-desktop { display: none; }
  .nav-mobile { display: flex; }
  .b-product-row > *:first-child:has(.b-product-text) { order: 2; }
}

@media (min-width: 841px) {
  .b-footer { grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
  .b-statements { grid-template-columns: 1fr 1fr 1fr; }
  .b-statements > * { padding: 8px 36px; }
  .b-statements > *:first-child { padding-left: 0; }
  .b-statements > * + * { border-top: none; border-left: 1px solid var(--line); }
  .b-timeline { grid-template-columns: 0.9fr 1.1fr; gap: 72px; }
  .b-timeline-intro { position: sticky; top: 120px; align-self: start; }
  .b-proof { grid-template-columns: 1fr 1.25fr; gap: 56px; }
  .b-paths { grid-template-columns: 1fr 1fr 1fr; }
  .b-portrait { grid-template-columns: 0.9fr 1.1fr; gap: 72px; }
  .b-portrait > *:first-child { max-width: none; }
  .b-product-row { grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 72px); }
  .b-testimonials { grid-template-columns: 1fr 1fr 1fr; }
  .block-hero-split { grid-template-columns: 1.05fr 0.95fr; min-height: 100svh; }
  .hero-split-img { order: 0; height: auto; min-height: 100svh; }
  .motion-note { max-width: 320px; }
}

/* Blog */
.filter-bar { display: flex; gap: 22px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.filter-bar::-webkit-scrollbar { display: none; }
.filter-btn { appearance: none; background: none; border: none; cursor: pointer; font: var(--text-button); color: var(--ink-2); padding: 10px 2px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; white-space: nowrap; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.filter-btn:hover { color: var(--cognac); }
.filter-btn[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--cognac); }

.b-blog-featured { display: grid; grid-template-columns: 1fr; }
.b-blog-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.b-consult { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }

.article-card h3 { transition: color var(--dur-fast) var(--ease-out); }
.article-card:hover h3 { color: var(--cognac); }

@media (min-width: 841px) {
  .b-blog-featured { grid-template-columns: 1.2fr 1fr; }
  .b-blog-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

/* Leistungsseiten */
.b-service-hero { min-height: auto; }
.b-service-hero-img { min-height: 300px; }
@media (min-width: 841px) {
  .b-service-hero { min-height: 72svh; }
  .b-service-hero-img { min-height: 72svh; height: auto; order: 0; }
}
.b-facts { display: grid; grid-template-columns: 1fr; gap: 36px; }
.b-stats { display: grid; grid-template-columns: 1fr; gap: 32px; }
.b-inquiry { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: stretch; }
@media (min-width: 841px) {
  .b-facts { grid-template-columns: 0.8fr 1.2fr; gap: 72px; }
  .b-stats { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .b-inquiry { grid-template-columns: 1fr 1.15fr; gap: 24px; }
}

/* Produkt-Empfehlungsseiten */
.b-product-hero { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
.b-honest { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: stretch; }
.b-psteps { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.b-decision { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: stretch; }
@media (min-width: 841px) {
  .b-product-hero { grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); }
  .b-honest { grid-template-columns: 1fr 1fr; gap: 24px; }
  .b-psteps { grid-template-columns: 1.1fr 0.9fr; gap: 64px; }
  .b-decision { grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* Ortsseiten (analog Leistungsseiten-Hero, schlankere Sektionsfolge) */
.b-place-hero { min-height: auto; }
@media (min-width: 841px) { .b-place-hero { min-height: 56svh; } }

/* Blog-Artikel — Lese-Typografie */
.article-col { max-width: 720px; margin: 0 auto; }
.article-prose { font: 400 1.0625rem/1.75 var(--font-sans); color: var(--ink); }
.article-prose p { margin: 0 0 1.4em; max-width: 66ch; text-wrap: pretty; }
.article-prose h2 { margin: 2.2em 0 0.7em; font: 600 clamp(1.4rem, 2.2vw, 1.75rem)/1.2 var(--font-display); letter-spacing: var(--letter-display); color: var(--ink); text-wrap: pretty; }
.article-prose h3 { margin: 1.8em 0 0.6em; font: 600 1.1875rem/1.3 var(--font-display); letter-spacing: var(--letter-display); color: var(--ink); }
.article-prose ul { margin: 0 0 1.4em; padding-left: 1.2em; }
.article-prose li { margin-bottom: 0.4em; max-width: 62ch; }
.article-prose strong { font-weight: 600; }

/* ==== pages ==== */
/* Moradian × JEMAKO — Seiten-Feinschliff (bewusst schlank; Sektions-Grids stehen in sections.css) */

/* WP-Editor/Frontend-Bruecke: Core-Block-Defaults an das Design annaehern */
.wp-block-group.is-layout-constrained > .wp-block-group__inner-container,
.wp-block-group.is-layout-flow { max-width: 100%; }

/* alignfull Sektionen sollen nie horizontal scrollen (Mobil-Overflow-Gotcha) */
/* overflow-x muss CLIP sein, nicht hidden: hidden macht .wp-site-blocks zum Scroll-Container und
   bricht damit position:sticky des Headers. clip kappt den horizontalen Ueberlauf ohne Scroll-Container
   -> Sticky-Header funktioniert wieder (wie Referenz). */
.wp-site-blocks, body { overflow-x: clip; }

/* Bild-Zuschnitt: full-bleed randscharf, eingerueckt radius-l */
.alignfull img { border-radius: 0; }