/* ==========================================================================
   Website-Design. Die Hauptfarbe (--primary) kommt aus den Einstellungen.
   Keine externen Schriften → keine Datenübertragung an Dritte (DSGVO).
   ========================================================================== */
:root {
  --primary: #1f6feb;
  --primary-dark: color-mix(in srgb, var(--primary) 78%, #000);
  --primary-soft: color-mix(in srgb, var(--primary) 10%, #fff);
  --text: #16202e;
  --muted: #5a6677;
  --bg: #ffffff;
  --bg-alt: #f4f6f9;
  --dark: #0f1724;
  --border: #e2e7ee;
  --radius: 16px;
  --container: 1160px;
  --narrow: 760px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px rgba(16, 24, 40, .08);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Eigene Tokens für den Baustein "Button" (siehe render_block_button() in lib/blocks.php) - bewusst
     unabhängig von --primary, damit Titelbereich/Handlungsaufruf (.btn unten) unverändert bleiben.
     Standard = heutiger Button-Look (schwarz, weiße Schrift, eckig), siehe CLAUDE.md-Aufgabe "Neuer
     Baustein Button und Links wieder als normale Links". */
  --btn-bg: #000000;
  --btn-text: #ffffff;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
/* overflow-x:clip statt overflow-x:hidden: fängt denselben seltenen Subpixel-/Scrollbar-Überhang ab
   (u. a. durch .container-full, siehe dort), ohne wie "hidden" einen eigenen Scroll-Container zu
   erzeugen, der position:sticky (Sticky-Header-Einstellung) zerstören könnte. */
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }

/* Deko-Element-Block: frei positioniertes Bild, relativ zur gesamten Seite (#inhalt). */
#inhalt { position: relative; }
.deko-element { position: absolute; pointer-events: none; user-select: none; z-index: 1; }
.deko-element img { width: 100%; height: auto; }
.deko-element.deko-back { z-index: 0; }
/* Höher als .site-header (z-index: 50): "Vor dem Inhalt" soll auch beim Scrollen unter dem
   fixierten Header sichtbar bleiben, statt darunter zu verschwinden. */
.deko-element.deko-front { z-index: 60; }
/* Frei positionierte Bild-/Text-Bausteine (nicht das Deko-Element selbst): im Unterschied zum
   rein dekorativen Deko-Bild sollen diese klickbar/markierbar bleiben (Links im Text, Bild an
   sich kann z. B. verlinkt sein). */
.deko-element.free-el { pointer-events: auto; user-select: auto; }
.deko-element.free-el figcaption { font-size: .85rem; color: var(--muted); margin-top: 6px; }
a { color: var(--primary); text-underline-offset: 3px; }
/* overflow-wrap: lange deutsche Komposita (z. B. "Hundephysiotherapiepraxis") haben keine natürliche
   Trennstelle und würden sonst auf schmalen Bildschirmen über den Rand hinauslaufen. Größe/Zeilenhöhe/
   Buchstabenabstand/Stärke/Schrift/Farbe/Großschreibung/Abstand-unten kommen als CSS-Variablen aus den
   Einstellungen -> Typografie (siehe typography_css() in lib/core.php, eingebunden über layout.php) -
   h1 nutzt dieselben Variablen wie .heading-style-1 usw. ("Standard-Zuordnung", siehe CLAUDE.md), damit
   ein Baustein mit explizit gewähltem Stil und ein bloßes <h1> optisch identisch aussehen. Ein Theme, das
   diese Variablen nicht referenziert (z. B. ein pixelgenauer Kunden-Nachbau mit eigenem style.css),
   bleibt unberührt - die Fallback-Werte hier entsprechen dem, was vor den Einstellungen fest codiert war. */
h1, h2, h3, h4, h5, h6, .heading-style-1, .heading-style-2, .heading-style-3, .heading-style-4,
.heading-style-5, .heading-style-6, .heading-style-7, .heading-style-8 { margin: 0 0 .5em; overflow-wrap: break-word; }
h1, .heading-style-1 { font-size: var(--h1-size, 3.8rem); line-height: var(--h1-line-height, 1.15); letter-spacing: var(--h1-letter-spacing, -.02em); font-weight: var(--h1-weight, 750); font-family: var(--h1-font, inherit); color: var(--h1-color, inherit); text-transform: var(--h1-transform, none); margin-bottom: var(--h1-margin-bottom, .5em); }
h2, .heading-style-2 { font-size: var(--h2-size, 2.5rem); line-height: var(--h2-line-height, 1.15); letter-spacing: var(--h2-letter-spacing, -.02em); font-weight: var(--h2-weight, 750); font-family: var(--h2-font, inherit); color: var(--h2-color, inherit); text-transform: var(--h2-transform, none); margin-bottom: var(--h2-margin-bottom, .5em); }
h3, .heading-style-3 { font-size: var(--h3-size, 1.25rem); line-height: var(--h3-line-height, 1.15); letter-spacing: var(--h3-letter-spacing, -.01em); font-weight: var(--h3-weight, 750); font-family: var(--h3-font, inherit); color: var(--h3-color, inherit); text-transform: var(--h3-transform, none); margin-bottom: var(--h3-margin-bottom, .5em); }
h4, .heading-style-4 { font-size: var(--h4-size, 1.2rem); line-height: var(--h4-line-height, 1.3); letter-spacing: var(--h4-letter-spacing, 0); font-weight: var(--h4-weight, 700); font-family: var(--h4-font, inherit); color: var(--h4-color, inherit); text-transform: var(--h4-transform, none); margin-bottom: var(--h4-margin-bottom, .5em); }
h5, .heading-style-5 { font-size: var(--h5-size, 1.05rem); line-height: var(--h5-line-height, 1.3); letter-spacing: var(--h5-letter-spacing, 0); font-weight: var(--h5-weight, 700); font-family: var(--h5-font, inherit); color: var(--h5-color, inherit); text-transform: var(--h5-transform, none); margin-bottom: var(--h5-margin-bottom, .5em); }
h6, .heading-style-6 { font-size: var(--h6-size, .95rem); line-height: var(--h6-line-height, 1.3); letter-spacing: var(--h6-letter-spacing, 0); font-weight: var(--h6-weight, 700); font-family: var(--h6-font, inherit); color: var(--h6-color, inherit); text-transform: var(--h6-transform, none); margin-bottom: var(--h6-margin-bottom, .5em); }
.heading-style-7 { font-size: var(--h7-size, .9rem); line-height: var(--h7-line-height, 1.3); letter-spacing: var(--h7-letter-spacing, 0); font-weight: var(--h7-weight, 700); font-family: var(--h7-font, inherit); color: var(--h7-color, inherit); text-transform: var(--h7-transform, none); margin-bottom: var(--h7-margin-bottom, .5em); }
.heading-style-8 { font-size: var(--h8-size, .8rem); line-height: var(--h8-line-height, 1.3); letter-spacing: var(--h8-letter-spacing, 0); font-weight: var(--h8-weight, 700); font-family: var(--h8-font, inherit); color: var(--h8-color, inherit); text-transform: var(--h8-transform, none); margin-bottom: var(--h8-margin-bottom, .5em); }
p { margin: 0 0 1em; }
hr { border: 0; border-top: 1px solid var(--border); }

.container { width: min(var(--container), 100% - 40px); margin-inline: auto; }
.narrow { max-width: var(--narrow); }
.container.narrow { width: min(var(--narrow), 100% - 40px); }
/* "Block auf der Seite" (Textblock, siehe render_block_text() in lib/blocks.php) - reine Box-Position,
   wirkt nie auf die Textausrichtung (die kommt ausschließlich aus der Rich-Text-Werkzeugleiste, siehe
   .prose-Regeln unten). Mitte ist der .container-Standard (margin-inline:auto), braucht keine eigene
   Klasse. */
.container.box-left { margin-left: 0; margin-right: auto; }
.container.box-right { margin-left: auto; margin-right: 0; }
/* Nach wie vor eigenständig: fest vom Theme vorgegebene Überschriften-Zentrierung mancher Bausteine
   (z. B. FAQ/Kundenstimmen, siehe render_heading(..., 'align-center') in lib/blocks.php) - unabhängig
   vom Textblock-Feld oben. */
.align-center { text-align: center; }

.prose > :last-child { margin-bottom: 0; }
.prose h2 { margin-top: 1.4em; font-size: 1.6rem; }
.prose h3 { margin-top: 1.2em; }

/* RICHTEXT-LIST-START */
/* Rich-Text-Listen: EINE gemeinsame Regel für Editor und Frontend - theme_richtext_editor_css() in
   lib/richtext.php spiegelt genau den Block zwischen den beiden RICHTEXT-LIST-Markern oben/unten
   (jeweils eigene, in sich abgeschlossene Kommentarzeilen, damit der reguläre Ausdruck dort sauber
   schneiden kann) unverändert unter .ql-editor in den Editor, es gibt also kein separates,
   abweichendes Editor-CSS für Listen.
   Punkt-/Zahlen-/Strich-Liste einheitlich über ein eigenes ::before als Marker (list-style:none, nicht
   das native list-style/::marker) - nur so bleibt der Marker bei jeder Ausrichtung am Text:
   - links/Blocksatz (Standard): hängender Einzug. <li> reserviert links Platz (padding-left), der
     Marker wird per negativem margin-left in genau diesen reservierten Platz gezogen. Läuft der Text
     über mehrere Zeilen um, läuft die Folgezeile unter dem TEXT weiter (am Rand der reservierten
     Fläche), nicht unter dem Marker - klassische "hanging indent"-Technik.
   - zentriert/rechts (von Quill direkt auf den Listenpunkt gesetzt, style="text-align:center" -
     ausschließlich die Textleiste, keine blockweite Ausrichtung mehr, siehe CLAUDE.md-Aufgabe "Block-
     Position und Textausrichtung trennen"): der reservierte Marker-Platz
     entfällt (kein Abstand über die Blockbreite), der Marker steht als ganz normaler Inline-Text direkt
     vor der Zeile und wird dadurch zusammen mit dem Text zentriert/rechtsbündig ausgerichtet.
   Einzugsstufen (--rt-indent-Variable, von .rt-indent-1..8 gesetzt) gelten in beiden Fällen gleich -
   sie verschieben Marker+Text gemeinsam, unabhängig von der Marker-Platzreservierung.
   Schrift/Größe/Farbe des Markers = vom Text geerbt (::before erbt vom <li>, keine eigenen Werte). */
.prose ul, .prose ol { list-style: none; margin: 0 0 1em; padding: 0; }
.prose li { position: relative; margin: .3em 0; padding-left: calc(var(--rt-indent, 0em) + 1.5em); }
.prose li::before { display: inline-block; width: 1.2em; margin-left: -1.5em; margin-right: .3em; text-align: right; white-space: nowrap; }
.prose ul > li::before { content: "•"; }
.prose ul.list-dash > li::before { content: "–"; }
.prose ol { counter-reset: rt-ol; }
.prose ol > li::before { counter-increment: rt-ol; content: counter(rt-ol) "."; }

.prose .rt-indent-1 { --rt-indent: 3em; }
.prose .rt-indent-2 { --rt-indent: 6em; }
.prose .rt-indent-3 { --rt-indent: 9em; }
.prose .rt-indent-4 { --rt-indent: 12em; }
.prose .rt-indent-5 { --rt-indent: 15em; }
.prose .rt-indent-6 { --rt-indent: 18em; }
.prose .rt-indent-7 { --rt-indent: 21em; }
.prose .rt-indent-8 { --rt-indent: 24em; }
/* Einzug für Absätze/Überschriften im Fließtext (li siehe oben - trägt --rt-indent bereits über
   padding-left mit). CLAUDE.md-Aufgabe "Einzug geht beim Speichern verloren". */
.prose p, .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { margin-left: var(--rt-indent, 0em); }

.prose li[style*="text-align:center"], .prose li[style*="text-align:right"] { padding-left: var(--rt-indent, 0em); }
.prose li[style*="text-align:center"]::before, .prose li[style*="text-align:right"]::before { margin-left: 0; }
/* Liste als Ganzes mittig/rechtsbündig (je Zeile von Quill gesetzt, siehe oben) - schrumpft auf die
   Inhaltsbreite, statt über die volle Breite zentrierten/rechtsbündigen Text in einer linksbündigen
   vollen Zeile zu zeigen. */
.prose ul:has(> li[style*="text-align:center"]), .prose ol:has(> li[style*="text-align:center"]) { width: fit-content; margin-inline: auto; }
.prose ul:has(> li[style*="text-align:right"]), .prose ol:has(> li[style*="text-align:right"]) { width: fit-content; margin-left: auto; margin-right: 0; }

/* Textleisten-Felder "Zeilenabstand"/"Absatzabstand" (CLAUDE.md-Aufgabe "Zeilenabstand in der
   Textleiste") - feste Klassen statt Inline-Style (CSP), siehe buildToolbar() in admin/richtext.js.
   Gilt gleich für Absätze/Überschriften UND Listenpunkte (Zeilenhöhe je Punkt, Abstand zwischen den
   Punkten über margin-top/-bottom auf dem jeweiligen li - gewinnt per Klassen-Spezifität gegen die
   Kurzform ".prose li { margin: .3em 0 }" oben). "Standard" entfernt die Klasse wieder (siehe
   richtext_clean_attrs() in lib/richtext.php) - ohne Klasse gilt wie bisher body/.prose li.
   Keine eigenen Mobil-Werte: die Theme-Typografie (typography_css()) kennt diese Felder nicht, die
   Werte gelten überall gleich. */
.prose .lh-10 { line-height: 1; }
.prose .lh-115 { line-height: 1.15; }
.prose .lh-13 { line-height: 1.3; }
.prose .lh-15 { line-height: 1.5; }
.prose .lh-18 { line-height: 1.8; }
.prose .lh-20 { line-height: 2; }
.prose .lh-25 { line-height: 2.5; }
.prose .space-t-0 { margin-top: 0; }
.prose .space-t-4 { margin-top: 4px; }
.prose .space-t-8 { margin-top: 8px; }
.prose .space-t-16 { margin-top: 16px; }
.prose .space-t-24 { margin-top: 24px; }
.prose .space-t-32 { margin-top: 32px; }
.prose .space-t-48 { margin-top: 48px; }
.prose .space-b-0 { margin-bottom: 0; }
.prose .space-b-4 { margin-bottom: 4px; }
.prose .space-b-8 { margin-bottom: 8px; }
.prose .space-b-16 { margin-bottom: 16px; }
.prose .space-b-24 { margin-bottom: 24px; }
.prose .space-b-32 { margin-bottom: 32px; }
.prose .space-b-48 { margin-bottom: 48px; }
/* RICHTEXT-LIST-END */

/* Anführungszeichen per CSS statt fest im Template, damit Rich-Text-Inhalt (mehrere Absätze möglich)
   darin nicht mit literalen Zeichen kollidiert - sieht für bestehende (unformatierte) Zitate identisch aus. */
.quote-marks::before { content: "\201E"; }
.quote-marks::after { content: "\201C"; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .85em 1.6em; border-radius: 999px; border: 2px solid transparent; background: var(--primary); color: #fff; font: inherit; font-family: var(--btn-font-family, inherit); font-weight: 650; text-decoration: none; cursor: pointer; transition: transform .15s, background .15s, box-shadow .15s; }
.btn:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 30%, transparent); }
.btn-light { background: #fff; color: var(--primary-dark); }
.btn-light:hover { background: #fff; color: var(--primary-dark); }
.btn-ghost-light { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .12); box-shadow: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6em; }

/* Baustein "Button" (eigener Block, siehe render_block_button() in lib/blocks.php) - zu unterscheiden
   von .btn oben (Titelbereich/Handlungsaufruf): eigenes Aussehen komplett über die Block-Felder
   gesteuert, Farbe/Schrift fallen ohne eigene Angabe auf --btn-bg/--btn-text/--btn-font-family zurück. */
.block-button-wrap { display: flex; }
.block-button-wrap.align-left { justify-content: flex-start; }
.block-button-wrap.align-center { justify-content: center; }
.block-button-wrap.align-right { justify-content: flex-end; }
.block-button {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  font: inherit; font-family: var(--btn-font-family, inherit); font-weight: 650;
  text-decoration: none; cursor: pointer; border: 2px solid transparent;
  transition: transform .15s, background .15s, color .15s;
}
.block-button.bb-filled { background: var(--btn-bg); color: var(--btn-text); }
.block-button.bb-outline { background: transparent; border-color: var(--btn-bg); color: var(--btn-bg); }
.block-button.bb-text { background: transparent; border-color: transparent; color: var(--btn-bg); padding: 0 !important; }
.block-button.bb-small { font-size: .9rem; }
.block-button.bb-large { font-size: 1.15rem; }
.block-button.bb-full { display: flex; width: 100%; }
.block-button:hover { transform: translateY(-1px); }
.block-button:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
@media (max-width: 820px) { .block-button:not(.bb-text) { min-height: 44px; } }

/* Admin-Leiste (nur eingeloggt sichtbar) */
.adminbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 36px; display: flex; align-items: center; gap: 18px; padding: 0 16px; background: #111827; color: #cbd5e1; font-size: 14px; }
.adminbar a { color: #fff; text-decoration: none; font-weight: 600; }
.adminbar a:hover { color: #93c5fd; }
.adminbar-note { color: #fcd34d; }
.has-adminbar { padding-top: 36px; }
.has-adminbar .site-header { top: 36px; }

/* Hinweisleiste "Kostenloser Versand ab …" (nur wenn Shop aktiv und ein Schwellenwert gesetzt ist) */
.shipping-banner { background: var(--primary); color: #fff; text-align: center; font-size: .85rem; font-weight: 650; padding: 8px 16px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .88); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); }
/* Einstellung „Sticky-Header“ deaktiviert: Menü scrollt normal mit statt oben fixiert zu bleiben.
   position:relative (statt static) erhält den Positionierungs-Bezugspunkt für das mobile Klappmenü. */
body.no-sticky-header .site-header { position: relative; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; position: relative; }
.brand { display: flex; align-items: center; font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; color: var(--text); text-decoration: none; }
.brand img { max-height: var(--logo-height, 46px); width: auto; }
/* --nav-size/-letter-spacing/-color/-underline usw. kommen aus Einstellungen -> Typografie ->
   „Header-Menü“ (typography_css() in lib/core.php) - sie ersetzen dabei praktisch die ältere,
   einfachere Einstellung --nav-font-size (Allgemein-Tab, "Schriftgröße der Menüpunkte"), da beide
   dieselbe Eigenschaft steuern; --nav-font-size bleibt als Fallback bestehen, falls --nav-size aus
   irgendeinem Grund fehlt (z. B. sehr altes Site-Paket ohne "typography"). */
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--nav-gap, 4px); }
.site-nav a { display: block; padding: .5em .95em; border-radius: 10px; color: var(--nav-color, var(--text)); text-decoration: var(--nav-underline, none); font-weight: 550; font-size: var(--nav-size, var(--nav-font-size, .97rem)); font-family: var(--nav-font, var(--menu-font-family, inherit)); letter-spacing: var(--nav-letter-spacing, 0); }
.site-nav a:hover { background: var(--bg-alt); }
.site-nav a.active { color: var(--nav-color-active, var(--primary)); background: var(--primary-soft); }
.cart-link { position: relative; display: inline-flex; align-items: center; padding: .5em .6em; border-radius: 10px; text-decoration: none; font-size: 1.15rem; }
.cart-link:hover { background: var(--bg-alt); }
.cart-count { position: absolute; top: 2px; right: 0; background: var(--primary); color: #fff; font-size: .65rem; font-weight: 700; border-radius: 999px; padding: 1px 5px; line-height: 1.3; }
.nav-toggle { display: none; width: var(--nav-mobile-icon-size, 44px); height: var(--nav-mobile-icon-size, 44px); border: 0; background: transparent; border-radius: 10px; cursor: pointer; padding: 11px 10px; }
.nav-toggle span { display: block; height: 2px; background: var(--text); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle span + span { margin-top: 6px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .site-nav { display: none; position: absolute; top: 100%; left: -20px; right: -20px; background: #fff; border-bottom: 1px solid var(--border); box-shadow: 0 16px 24px rgba(16, 24, 40, .08); padding: 8px 20px 20px; }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; gap: var(--nav-mobile-item-gap, 0px); }
  .site-nav a { padding: .8em 1em; font-size: var(--nav-mobile-item-size, var(--nav-size, var(--nav-font-size, .97rem))); }
}

/* Blöcke allgemein */
.block { padding: clamp(56px, 8vw, 104px) 0; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
.bg-light { background: var(--bg-alt); }
.bg-transparent { background: transparent; }
.bg-dark { background: var(--dark); color: #dbe3ee; }
.bg-dark h2, .bg-dark h3 { color: #fff; }
.bg-dark a:not(.btn) { color: #93c5fd; }
.bg-primary { background: var(--primary); color: rgba(255, 255, 255, .92); }
.bg-primary h2, .bg-primary h3 { color: #fff; }
.bg-primary a:not(.btn) { color: #fff; }
.bg-primary .btn { background: #fff; color: var(--primary-dark); }
.bg-white + .bg-white, .bg-light + .bg-light { padding-top: 0; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto clamp(32px, 5vw, 56px); }
.section-head p, .section-head .prose { color: var(--muted); font-size: 1.1rem; }
.bg-dark .section-head p, .bg-primary .section-head p, .bg-dark .section-head .prose, .bg-primary .section-head .prose { color: inherit; opacity: .85; }

/* Titelbereich */
.block-hero { position: relative; padding: 0; overflow: hidden; color: #fff; background: radial-gradient(1200px 500px at 85% -10%, color-mix(in srgb, var(--primary) 55%, #fff) 0%, transparent 60%), linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 55%, #0b1220) 100%); }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.block-hero.has-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10, 16, 28, .78) 0%, rgba(10, 16, 28, .45) 60%, rgba(10, 16, 28, .25) 100%); }
.hero-center.has-image::after { background: rgba(10, 16, 28, .55); }
.hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; }
/* In der Flex-Spalte dürfen Titel/Text nicht über den Container hinausragen, wenn align-items
   (z. B. bei hero-center) die Kinder auf ihre Inhaltsbreite schrumpft statt sie zu stretchen. */
.hero-inner > * { max-width: 100%; }
.hero-large .hero-inner { min-height: min(80vh, 740px); padding: 96px 0; }
.hero-medium .hero-inner { min-height: 440px; padding: 80px 0; }
.hero-small .hero-inner { min-height: 280px; padding: 64px 0; }
.hero-small h1 { font-size: clamp(2rem, 4.2vw, 3rem); }
.hero-center .hero-inner { align-items: center; text-align: center; }
.hero-center .btn-row { justify-content: center; }
.hero-left h1, .hero-left .hero-sub { max-width: 760px; }
.hero-sub { font-size: clamp(1.08rem, 1.8vw, 1.3rem); opacity: .92; max-width: 680px; margin: 0; }
.block-hero h1 { color: #fff; }

/* Text + Bild */
.ti-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.ti-grid.img-left .ti-media { order: -1; }
/* Produktseite: Bild oben an der Überschrift ausgerichtet statt mittig zur (längeren) Kaufbox-Spalte. */
.ti-grid.product-detail { align-items: start; }
.ti-media img, .img-placeholder { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 4 / 3; object-fit: cover; }
.ti-media .ti-frame { border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 4 / 3; overflow: hidden; }
.ti-media .ti-frame img { height: 100%; border-radius: 0; box-shadow: none; aspect-ratio: auto; }
.img-placeholder { background: linear-gradient(135deg, var(--primary-soft), color-mix(in srgb, var(--primary) 25%, #fff)); }
.ti-text .btn { margin-top: 1em; }
@media (max-width: 820px) {
  .ti-grid { grid-template-columns: 1fr; }
  .ti-grid.img-left .ti-media { order: 0; }
}

/* Karten */
.cards-grid { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
.cards-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cards-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card { background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease; }
.card:hover { transform: translateY(-7px); box-shadow: var(--shadow); border-color: transparent; }
.card-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s ease; }
.card:hover .card-img { transform: scale(1.05); }
.card-body { padding: 28px; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { color: var(--text); }
.card-body .prose { color: var(--muted); flex: 1; }
.card-icon { width: 52px; height: 52px; display: grid; place-items: center; font-size: 1.6rem; border-radius: 14px; background: var(--primary-soft); margin-bottom: 18px; transition: transform .3s ease; }
.card:hover .card-icon { transform: scale(1.12) rotate(-4deg); }
.card-link { margin-top: 16px; font-weight: 650; text-decoration: none; color: var(--primary) !important; }
.card-link:hover { text-decoration: underline; }
@media (max-width: 960px) { .cards-grid, .cards-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cards-grid, .cards-grid.cols-2, .cards-grid.cols-4 { grid-template-columns: 1fr; } }

/* Handlungsaufruf */
.block-cta { padding: clamp(40px, 6vw, 72px) 0; }
.cta-box { border-radius: calc(var(--radius) + 8px); padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px); text-align: center; }
.cta-box p, .cta-box .prose { font-size: 1.12rem; max-width: 620px; margin: 0 auto 1.6em; opacity: .9; }
.cta-box h2:last-child { margin: 0; }
.cta-primary { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 60%, #0b1220)); color: #fff; }
.cta-dark { background: var(--dark); color: #fff; }
.cta-light { background: var(--primary-soft); color: var(--text); }
.cta-primary h2, .cta-dark h2 { color: #fff; }

/* FAQ */
.faq-list { margin-top: 32px; display: grid; gap: 12px; }
.faq-item { background: #fff; border: 1px solid var(--border); border-radius: 12px; color: var(--text); }
.faq-item summary { cursor: pointer; list-style: none; padding: 18px 56px 18px 22px; font-weight: 650; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; color: var(--primary); transition: transform .2s; }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item .prose { padding: 0 22px 20px; color: var(--muted); }

/* Kundenstimmen */
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.testimonial-card { margin: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.testimonial-card blockquote { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--text); flex: 1; }
.testimonial-card figcaption { display: flex; align-items: center; gap: 12px; }
.testimonial-card img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.testimonial-card figcaption span { display: flex; flex-direction: column; line-height: 1.3; }
.testimonial-card small { color: var(--muted); font-size: .85rem; }

/* Kontakt */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.contact-grid.no-form { grid-template-columns: 1fr; max-width: var(--narrow); }
.contact-list { margin: 28px 0 0; display: grid; gap: 20px; }
.contact-list dt { font-weight: 700; margin-bottom: 2px; }
.contact-list dd { margin: 0; color: var(--muted); }
.bg-dark .contact-list dd, .bg-primary .contact-list dd { color: inherit; opacity: .85; }
.contact-form-wrap { background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow); }
.contact-form { display: grid; gap: 16px; }
.contact-form label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.contact-form input, .contact-form textarea { font: inherit; font-weight: 400; padding: .75em .9em; border: 1px solid #cfd6e0; border-radius: 10px; background: #fff; color: var(--text); width: 100%; transition: border-color .15s, box-shadow .15s; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); }
.contact-form label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: .9rem; color: var(--muted); }
.contact-form label.check input { width: auto; margin-top: .3em; }
.contact-form .btn { justify-self: start; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice { padding: 16px 18px; border-radius: 10px; margin-bottom: 16px; }
.notice-ok { background: #ecfdf3; color: #065f46; border: 1px solid #a7f3d0; }
.notice-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
@media (max-width: 820px) { .contact-grid, .form-row { grid-template-columns: 1fr; } }

/* Individuelles Formular (Block "form"), z. B. ein Anamnesebogen */
.block-form { padding: clamp(48px, 7vw, 88px) 0; }
.dyn-form { margin-top: 1.6em; display: grid; gap: 16px; }
.dyn-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.dyn-field { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.dyn-field-full { grid-column: 1 / -1; }
.dyn-field input[type=text], .dyn-field input[type=email], .dyn-field textarea, .dyn-field select {
  font: inherit; font-weight: 400; padding: .75em .9em; border: 1px solid #cfd6e0; border-radius: 10px;
  background: #fff; color: var(--text); width: 100%; transition: border-color .15s, box-shadow .15s;
}
.dyn-field input:focus, .dyn-field textarea:focus, .dyn-field select:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}
.dyn-radio-group { display: flex; flex-wrap: wrap; gap: 6px 20px; font-weight: 400; }
.dyn-radio { display: flex; align-items: center; gap: 6px; font-size: .95rem; }
.dyn-radio input { width: auto; }
.dyn-check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; }
.dyn-check input { width: auto; margin-top: .35em; flex: none; }
.dyn-file { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.dyn-file input[type=file] { font: inherit; font-weight: 400; }
.dyn-file small { font-weight: 400; }
.dyn-form > .btn { justify-self: start; }
@media (max-width: 820px) { .dyn-form-grid { grid-template-columns: 1fr; } }

/* Galerie & Bilder */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 32px; }
.gallery-grid figure { margin: 0; }
.gallery-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; transition: opacity .2s; }
.gallery-grid a:hover img { opacity: .88; }
figcaption { font-size: .9rem; color: var(--muted); margin-top: 8px; text-align: center; }
.block-image { padding: clamp(24px, 4vw, 48px) 0; }
.block-image figure { margin-block: 0; }
.block-image figure:not(.full) img { border-radius: var(--radius); }
.block-image figure.full img { width: 100%; }

/* Container: eigene Fläche mit verschachtelten Bausteinen. "overflow:hidden" sorgt dafür, dass
   frei positionierte Bausteine darin (siehe .deko-element/.free-el) nicht über den Rand
   hinausgeschoben werden können - sie sind relativ zu DIESER Fläche positioniert, nicht zur
   ganzen Seite, weil sie "position:relative" ist (nächster positionierter Vorfahre). */
.container-canvas { position: relative; overflow: hidden; }

/* Container "Vollbreit": klassischer 50vw-Ausbruch aus einem (evtl.) zentrierten max-width-Wrapper -
   links:50% + margin-left:-50vw ergibt exakt Fensterbreite, unabhängig von der Breite des Elternelements,
   solange dieses selbst zentriert ist (margin-inline:auto, wie .container/.container-canvas - gilt auch
   verschachtelt). Funktioniert gleichermaßen bei position:relative (section) wie position:absolute
   (.deko-element bei frei positionierten Vollbreit-Containern). Nur auf dem äußeren Element - siehe
   render_block_container() in lib/blocks.php. */
.container-full { width: 100vw; left: 50%; margin-left: -50vw; }
.block-container.container-full { position: relative; }

/* Abstand */
.block-spacer.spacer-small { padding: 16px 0; }
.block-spacer.spacer-medium { padding: 40px 0; }
.block-spacer.spacer-large { padding: 80px 0; }
.block-spacer hr { margin-block: 0; }

/* Kleinere/zurückhaltende Button-Varianten, u. a. für den Shop */
.btn-sm { padding: .5em 1.1em; font-size: .9rem; }
.btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline:hover { background: var(--primary-soft); color: var(--primary-dark); box-shadow: none; }

/* Shop: Produktraster, Produktseite, Warenkorb, Kasse */
/* Bildrahmen für Produktfotos: immer gleiche Größe/Seitenverhältnis, das Bild selbst wird per
   image_zoom (siehe admin/shop_edit.php) hineingezoomt/verkleinert statt automatisch zugeschnitten. */
.shop-img-frame { position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1; border-radius: var(--radius); background: var(--bg-alt); }
.shop-img-frame img, .shop-img-frame .img-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.shop-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.shop-thumb { padding: 0; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: var(--bg-alt); cursor: pointer; }
.shop-thumb img { width: 100%; height: 100%; object-fit: contain; }
.shop-thumb.active, .shop-thumb:hover { border-color: var(--primary); }
.shop-card .card-body { gap: 4px; }
.shop-price { font-weight: 750; font-size: 1.1rem; margin: 4px 0 12px; }
.shop-price-large { font-size: 1.35rem; margin: 6px 0 18px; }
.shop-back-link { color: var(--text); font-weight: 600; text-decoration: none; }
.shop-back-link:hover { text-decoration: underline; }
.shop-add-form { margin-top: auto; display: grid; gap: 8px; }
.shop-add-form .btn { justify-self: start; }
.shop-add-form-detail { display: grid; gap: 16px; margin: 18px 0; }
.shop-buy-row { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.shop-buy-row .btn { flex: 1 1 auto; min-height: 48px; }
.shop-qty-label { display: grid; gap: 6px; font-weight: 600; font-size: .9rem; }
.shop-qty-label input { width: 72px; padding: .7em .8em; border: 1px solid #cfd6e0; border-radius: 10px; font: inherit; }

/* Titel + Beschreibung der Produktseite deutlich kompakter als die großen Marketing-Überschriften
   sonst auf der Website (angelehnt an schlanke Shop-Produktseiten statt Landingpage-Format). */
.product-detail h1 { font-size: clamp(1.5rem, 2.4vw + 1rem, 1.9rem); letter-spacing: -.01em; margin-bottom: .3em; }

/* Variantenauswahl auf der Produktseite als Pillen statt Dropdown (Radio-Buttons, per Label bedienbar). */
.field-caption { display: block; font-weight: 650; font-size: .85rem; margin-bottom: 8px; }
.variant-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-pills input[type=radio] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.variant-pills label { display: inline-flex; align-items: center; gap: 8px; padding: .55em 1em; border: 2px solid var(--border); border-radius: 999px; cursor: pointer; font-weight: 600; font-size: .9rem; transition: border-color .15s, background .15s, color .15s; }
.variant-pills label:hover { border-color: var(--primary); }
.variant-pills input[type=radio]:checked + label { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-dark); }
.variant-pills input[type=radio]:focus-visible + label { outline: 2px solid var(--primary); outline-offset: 2px; }
.variant-pill-price { color: var(--muted); font-weight: 400; font-size: .85em; }

/* Beschreibung rutscht unter die Kaufbox (Preis, Variante, Menge, Button) statt davor – sichtbar
   und bestellbar, ohne erst am langen Beschreibungstext vorbeischeiben zu müssen – und steht als
   eigener Block unter dem ganzen Raster, über die volle Breite (Bild- + Textspalte zusammen). */
.product-description { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }

.cart-table { width: 100%; border-collapse: collapse; margin-top: 24px; }
.cart-table th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--border); }
.cart-table td { padding: 14px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.cart-table input[type=number] { width: 64px; padding: .5em .6em; border: 1px solid #cfd6e0; border-radius: 8px; font: inherit; }
.cart-summary { max-width: 380px; margin: 32px 0 0 auto; display: grid; gap: 16px; }
.cart-summary-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cart-summary-list li { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }
.cart-totals { margin: 0; padding-top: 12px; border-top: 1px solid var(--border); display: grid; gap: 6px; }
.cart-totals div { display: flex; justify-content: space-between; margin: 0; }
.cart-totals dt, .cart-totals dd { margin: 0; font-weight: 400; }
.cart-total-sum { font-weight: 750; font-size: 1.2rem; padding-top: 6px; }
.cart-summary > .btn { justify-self: end; }
.discount-box { display: grid; gap: 8px; }
.discount-form { display: flex; gap: 8px; flex-wrap: wrap; }
.discount-form input { font: inherit; padding: .6em .8em; border: 1px solid #cfd6e0; border-radius: 8px; flex: 1 1 160px; min-width: 0; }

.checkout-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; margin-top: 24px; }
.checkout-form { display: grid; gap: 16px; }
.checkout-form label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.checkout-form input { font: inherit; font-weight: 400; padding: .75em .9em; border: 1px solid #cfd6e0; border-radius: 10px; width: 100%; }
.checkout-summary { background: var(--bg-alt); border-radius: var(--radius); padding: 24px; }
@media (max-width: 820px) { .checkout-grid { grid-template-columns: 1fr; } .cart-summary { max-width: none; } }

/* Footer */
.site-footer { background: var(--dark); color: #94a3b8; padding: 48px 0; font-size: .95rem; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.footer-brand { display: grid; }
.footer-brand strong { color: #fff; font-size: 1.1rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-nav a { color: #cbd5e1; text-decoration: none; }
.footer-nav a:hover { color: #fff; text-decoration: underline; }
.footer-copy { width: 100%; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .88rem; }