/* Corpo Vivo – Website 2026 (erzeugt von build_wp.py aus dem Entwurf – nicht von Hand ändern)
   Farben aus dem bisherigen Auftritt (Türkis, Petrol, Magenta), modernisiert und kontrastgeprüft. */

:root {
  --ink: #163533;
  --ink-soft: #4b6664;
  --petrol: #0e5e63;
  --petrol-dark: #0a4649;
  --tuerkis: #7fc7c8;
  --tuerkis-50: #e3f4f2;
  --tuerkis-100: #cfeceb;
  --orchid: #b0157f;
  --orchid-dark: #8c0f65;
  --orchid-50: #fbeff6;
  --sand: #ecf7f5;  /* zartes Türkis als Seitengrund */
  --tint-flaeche: rgba(127, 199, 200, .17);  /* durchscheinend, damit der Seitenverlauf durchkommt */
  --hell-flaeche: rgba(255, 255, 255, .3);
  --fade: clamp(56px, 8vw, 110px);
  --sand-200: #f3ece3;
  --white: #ffffff;
  --line: #e2eae8;

  /* Farben der Themenräume */
  --rose: #d9668c;
  --lavendel: #8a64bd;
  --feuer: #c4442c;
  --wasser: #1f8fa1;
  --erde: #8b6a48;
  --luft: #6fa3c9;

  --radius: 24px;
  --radius-sm: 14px;
  --shadow: 0 18px 40px -22px rgba(14, 94, 99, .45);
  --shadow-soft: 0 8px 24px -16px rgba(14, 94, 99, .35);
  --font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --section: clamp(64px, 9vw, 120px);
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding: Sprungziele (#jobs, #mami …) landen unterhalb der festen Kopfzeile statt dahinter */
/* scrollbar-gutter: Platz für den Scrollbalken bleibt reserviert, damit nichts verrutscht, wenn das Menü das Scrollen sperrt */
html { scroll-behavior: smooth; scroll-padding-top: 96px; scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  /* Türkis kräftig am Anfang, heller in der Mitte, zum Seitenende wieder kräftiger */
  background: linear-gradient(180deg, var(--sand) 0%, #f3faf9 35%, #f1f9f8 52%, #d8eeeb 75%, #c6e4e0 92%, #c6e4e0 100%) var(--sand);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
input, select, textarea, button { font: inherit; color: inherit; }
a { color: var(--petrol); text-underline-offset: .2em; }
a:hover { color: var(--orchid); }
:focus-visible { outline: 3px solid var(--orchid); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.15; overflow-wrap: break-word; }
h1, h2 { font-family: var(--font-head); font-weight: 500; letter-spacing: -.02em; font-variation-settings: "SOFT" 60, "opsz" 96; }
h1 { font-size: clamp(2.35rem, 5.2vw, 4.1rem); line-height: 1.05; }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.75rem); }
h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.005em; }
h1 em, h2 em { font-style: italic; color: var(--orchid); font-weight: 400; }
p { margin: 0 0 1em; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.25rem); color: var(--ink-soft); max-width: 60ch; }
.small { font-size: .9rem; color: var(--ink-soft); }
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--section); }
.section--tint { background: linear-gradient(to bottom, transparent 0, var(--tint-flaeche) var(--fade), var(--tint-flaeche) calc(100% - var(--fade)), transparent 100%); }
.section--white { background: linear-gradient(to bottom, transparent 0, var(--hell-flaeche) var(--fade), var(--hell-flaeche) calc(100% - var(--fade)), transparent 100%); }
.section--petrol { background: var(--petrol); color: #e8f4f3; }
.section--petrol h2, .section--petrol h3 { color: var(--white); }
.section--petrol h2 em { color: #ffc2e6; }
/* Zarte Logo-Welle senkrecht an den Außenseiten: blasst nach oben und unten aus, wandert beim Scrollen langsamer als der Inhalt
   und endet vor dem FAQ-Bereich bzw. dem Footer (--welle-y und --welle-unten aus main.js) */
@media (min-width: 1400px) {
  body::before, body::after {
    content: ""; position: fixed; top: 0; bottom: var(--welle-unten, 0px); width: 150px; z-index: 1; pointer-events: none;
    left: calc((100vw - var(--container)) / 4 - 75px);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 320'%3E%3Cg fill='none' stroke='%230e5e63' stroke-width='9' stroke-linejoin='round'%3E%3Cpath stroke-opacity='.08' d='M12.2 -40L13.5 -32 15.0 -24 16.6 -16 18.3 -8 20.0 0 21.7 8 23.4 16 25.0 24 26.5 32 27.8 40 28.9 48 29.8 56 30.5 64 30.9 72 31.0 80 30.9 88 30.5 96 29.8 104 28.9 112 27.8 120 26.5 128 25.0 136 23.4 144 21.7 152 20.0 160 18.3 168 16.6 176 15.0 184 13.5 192 12.2 200 11.1 208 10.2 216 9.5 224 9.1 232 9.0 240 9.1 248 9.5 256 10.2 264 11.1 272 12.2 280 13.5 288 15.0 296 16.6 304 18.3 312 20.0 320 21.7 328 23.4 336 25.0 344 26.5 352 27.8 360'/%3E%3Cpath stroke-opacity='.15' d='M32.2 -40L33.5 -32 35.0 -24 36.6 -16 38.3 -8 40.0 0 41.7 8 43.4 16 45.0 24 46.5 32 47.8 40 48.9 48 49.8 56 50.5 64 50.9 72 51.0 80 50.9 88 50.5 96 49.8 104 48.9 112 47.8 120 46.5 128 45.0 136 43.4 144 41.7 152 40.0 160 38.3 168 36.6 176 35.0 184 33.5 192 32.2 200 31.1 208 30.2 216 29.5 224 29.1 232 29.0 240 29.1 248 29.5 256 30.2 264 31.1 272 32.2 280 33.5 288 35.0 296 36.6 304 38.3 312 40.0 320 41.7 328 43.4 336 45.0 344 46.5 352 47.8 360'/%3E%3Cpath stroke-opacity='.08' d='M52.2 -40L53.5 -32 55.0 -24 56.6 -16 58.3 -8 60.0 0 61.7 8 63.4 16 65.0 24 66.5 32 67.8 40 68.9 48 69.8 56 70.5 64 70.9 72 71.0 80 70.9 88 70.5 96 69.8 104 68.9 112 67.8 120 66.5 128 65.0 136 63.4 144 61.7 152 60.0 160 58.3 168 56.6 176 55.0 184 53.5 192 52.2 200 51.1 208 50.2 216 49.5 224 49.1 232 49.0 240 49.1 248 49.5 256 50.2 264 51.1 272 52.2 280 53.5 288 55.0 296 56.6 304 58.3 312 60.0 320 61.7 328 63.4 336 65.0 344 66.5 352 67.8 360'/%3E%3C/g%3E%3C/svg%3E") 0 calc(var(--welle-y, 0) * 1px) / 150px 600px repeat-y;
    filter: blur(6px);  /* weiche, schleierartige Linien ohne harte Kontur */
    -webkit-mask-image: linear-gradient(transparent 4%, rgba(0, 0, 0, .55) 25%, #000 45%, #000 55%, rgba(0, 0, 0, .55) 75%, transparent 96%);
    mask-image: linear-gradient(transparent 4%, rgba(0, 0, 0, .55) 25%, #000 45%, #000 55%, rgba(0, 0, 0, .55) 75%, transparent 96%);
  }
  body::after { left: auto; right: calc((100vw - var(--container)) / 4 - 75px); background-position-y: calc(var(--welle-y, 0) * 1px + 300px); }
}
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--petrol); color: #fff; padding: 10px 16px; border-radius: 10px; }
.skip-link:focus { top: 12px; color: #fff; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--petrol); margin-bottom: 1rem;
}
.eyebrow svg { width: 32px; height: 17px; flex: none; overflow: visible; }
.section--petrol .eyebrow { color: #c9ecec; }
.section-head { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }
.section-head--split { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.section-head--split > div { max-width: 680px; }

/* ---------- Buttons & Chips ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 50px; padding: .8em 1.5em; border-radius: 999px; border: 2px solid transparent;
  font: 700 1rem/1.2 var(--font-body); text-decoration: none; cursor: pointer;
  transition: transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--orchid); color: #fff; box-shadow: 0 10px 24px -12px rgba(176, 21, 127, .7); }
.btn-primary:hover { background: var(--orchid-dark); color: #fff; }
.btn-secondary { border-color: var(--petrol); color: var(--petrol); background: transparent; }
.btn-secondary:hover { background: var(--petrol); color: #fff; }
.btn-light { background: #fff; color: var(--petrol); }
.btn-light:hover { background: var(--tuerkis-100); color: var(--petrol-dark); }
.btn-small { min-height: 44px; padding: .55em 1.1em; font-size: .95rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.link-arrow { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; font-weight: 700; text-decoration: none; }
.link-arrow svg { width: 18px; height: 18px; transition: transform .2s ease; }
.link-arrow:hover svg { transform: translateX(4px); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .45em .95em; border-radius: 999px; background: var(--white); border: 1px solid var(--line);
  font-size: .92rem; font-weight: 600; color: var(--ink);
}
.chip svg { width: 16px; height: 16px; color: var(--petrol); }
.tag { display: inline-block; padding: .2em .65em; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--orchid-50); color: var(--orchid-dark); }
.tag--petrol { background: var(--tuerkis-100); color: var(--petrol-dark); }

/* ---------- Entwurfshinweis & Topbar ---------- */
.draft-bar { background: #fff6d6; color: #5b4a00; font-size: .85rem; text-align: center; padding: 6px 12px; }
.draft-bar strong { font-weight: 700; }
.topbar { background: var(--petrol); color: #dff1f0; font-size: .9rem; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { color: var(--tuerkis); }
.topbar-items { display: flex; gap: 22px; align-items: center; }
.topbar-items span, .topbar-items a { display: inline-flex; align-items: center; gap: .45em; }
.topbar svg { width: 16px; height: 16px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #9fb3b2; box-shadow: 0 0 0 3px rgba(255,255,255,.12); }
.is-open .status-dot { background: #6ee7a8; box-shadow: 0 0 0 3px rgba(110, 231, 168, .25); }

/* ---------- Header & Navigation ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(236, 247, 245, .88); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease; }
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 6px 20px -18px rgba(0,0,0,.4); }
.header-inner { display: flex; align-items: center; gap: 24px; min-height: 78px; }
.logo { flex: none; display: block; }
.logo img { width: 128px; height: auto; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav a { display: block; padding: .55em .8em; border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: .98rem; }
.nav a:hover { background: var(--tuerkis-50); color: var(--petrol); }
.nav a[aria-current="page"] { color: var(--petrol); background: var(--tuerkis-100); }
.header-cta { flex: none; }
.nav-cta { display: none; }
.nav .nav-cta .btn-primary { color: #fff; background: var(--orchid); }
.nav .nav-cta .btn-secondary { color: var(--petrol); }
.nav-toggle { display: none; margin-left: auto; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--petrol); cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle .icon-close { display: none; }
.nav-open .nav-toggle .icon-close { display: block; }
.nav-open .nav-toggle .icon-menu { display: none; }

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: clamp(40px, 6vw, 88px) clamp(56px, 8vw, 110px); overflow-x: clip; /* Leuchtfläche läuft unten aus, statt an der Kante abgeschnitten zu werden */ }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: 62%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(127, 199, 200, .38), rgba(127, 199, 200, 0)); z-index: -1; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { margin-bottom: .35em; }
.hero .lead { margin-bottom: 1.6em; }
.hero .chips { margin-top: 28px; }
.hero-media { position: relative; aspect-ratio: 1 / 1.02; }
.hero-media .blob-main { position: absolute; inset: 0 0 8% 6%; border-radius: 58% 42% 46% 54% / 48% 56% 44% 52%; overflow: hidden; box-shadow: var(--shadow); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media .bubble { position: absolute; width: 34%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 6px solid var(--sand); box-shadow: var(--shadow-soft); }
.hero-media .bubble--a { left: -4%; bottom: 2%; }
.hero-media .bubble--b { right: -2%; top: -3%; width: 26%; }
.status-card {
  position: absolute; right: 2%; bottom: 10%; background: #fff; border-radius: 18px; padding: 14px 18px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 12px; font-size: .95rem; max-width: 260px;
}
.status-card .status-dot { flex: none; box-shadow: none; }
.status-card strong { display: block; font-size: 1rem; }
.status-card span.small { display: block; line-height: 1.35; }

/* Seitenkopf für Unterseiten */
.page-hero { padding-block: clamp(36px, 5vw, 72px) clamp(40px, 6vw, 80px); position: relative; overflow-x: clip; }
.page-hero::before { content: ""; position: absolute; inset: -40% auto auto -10%; width: 55%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(127, 199, 200, .3), rgba(127, 199, 200, 0)); z-index: -1; }
.page-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.page-hero-media { border-radius: 46% 54% 40% 60% / 52% 44% 56% 48%; overflow: hidden; aspect-ratio: 5 / 4; box-shadow: var(--shadow); }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.breadcrumb { font-size: .9rem; color: var(--ink-soft); margin-bottom: 18px; }
.breadcrumb a { color: var(--ink-soft); }

/* ---------- Karten ---------- */
.grid { display: grid; gap: clamp(16px, 2.4vw, 28px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; border: 1px solid rgba(14, 94, 99, .06); }
.card-media { aspect-ratio: 16 / 11; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
a.card { color: inherit; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); color: inherit; }
a.card:hover .card-media img { transform: scale(1.04); }
.card-body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-body p { color: var(--ink-soft); margin: 0; }
.card-body .link-arrow { margin-top: auto; padding-top: 10px; color: var(--petrol); }
.card h3 { margin: 0; font-size: 1.3rem; }
.card--big h3 { font-family: var(--font-head); font-weight: 500; font-size: 1.65rem; letter-spacing: -.01em; }

/* Vorteile */
.usp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 40px; }
.usp-item { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; }
.usp-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--tuerkis-100); color: var(--petrol); }
.usp-icon svg { width: 26px; height: 26px; }
.usp-item h3 { margin: 4px 0 4px; font-size: 1.1rem; }
.usp-item p { margin: 0; color: var(--ink-soft); font-size: .98rem; }

/* Saisonangebot */
/* Jede Jahreszeit hat eigene Farben; der Herbst ist der Ausgangswert */
.season { --season-bg: linear-gradient(135deg, #fff4ea 0%, #fde9e2 55%, #f7e6f1 100%); --season-accent: var(--feuer); background: var(--season-bg); border-radius: calc(var(--radius) + 8px); padding: clamp(28px, 4.5vw, 56px); position: relative; overflow: hidden; }
.season::after { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: color-mix(in srgb, var(--season-accent) 9%, transparent); }
.season--fruehling { --season-bg: linear-gradient(135deg, #f1f8ec 0%, #e8f6f1 55%, #fdf2f6 100%); --season-accent: #3b7a46; }
.season--sommer { --season-bg: linear-gradient(135deg, #fff7e2 0%, #fdf0d8 50%, #e8f7f6 100%); --season-accent: #8a5f00; }
.season--winter { --season-bg: linear-gradient(135deg, #eef4fb 0%, #e6eef8 55%, #f3f0f8 100%); --season-accent: #2f6690; }
.season-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; position: relative; z-index: 1; }
.offer { background: #fff; border-radius: 20px; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 10px 24px -20px rgba(140, 50, 20, .6); }
.offer-name { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--season-accent, var(--feuer)); }
.offer h3 { font-family: var(--font-head); font-weight: 500; font-size: 1.2rem; margin: 0; }
.offer ul { list-style: none; margin: 0; padding: 0; color: var(--ink-soft); font-size: .95rem; }
.offer .price { margin-top: auto; padding-top: 10px; font-family: var(--font-head); font-size: 1.9rem; color: var(--ink); }
.price small { font-family: var(--font-body); font-size: .9rem; color: var(--ink-soft); }

/* Räume */
.rooms { display: grid; grid-template-columns: 300px 1fr; gap: clamp(20px, 4vw, 48px); align-items: stretch; }
.room-tabs { display: flex; flex-direction: column; gap: 8px; }
.room-tab {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
  padding: 14px 18px; border-radius: 16px; border: 1px solid var(--line); background: #fff;
  font: 600 1.05rem/1.2 var(--font-body); color: var(--ink); transition: background-color .2s ease, border-color .2s ease;
}
.room-tab:hover { border-color: var(--tuerkis); }
.room-tab[aria-selected="true"] { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.room-tab .dot { width: 22px; height: 22px; border-radius: 50%; flex: none; background: var(--room); box-shadow: 0 0 0 4px color-mix(in srgb, var(--room) 18%, transparent); }
.room-tab small { display: block; font-weight: 500; color: var(--ink-soft); font-size: .85rem; margin-top: 2px; }
/* Hintergrund in der Raumfarbe, falls das Foto noch lädt */
.room-panel { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 460px; background: color-mix(in srgb, var(--room) 22%, #fff); box-shadow: var(--shadow); }
.room-panel[hidden] { display: none; }
.room-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.room-panel .room-caption {
  position: absolute; left: 20px; right: 20px; bottom: 20px; background: rgba(255, 255, 255, .94); border-radius: 18px; padding: 20px 24px;
  border-left: 6px solid var(--room); max-width: 520px;
}
.room-caption h3 { font-family: var(--font-head); font-weight: 500; font-size: 1.5rem; margin-bottom: 4px; }
.room-caption p { margin: 0; color: var(--ink-soft); }

/* Räume-Seite */
.room-feature { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.room-feature + .room-feature { margin-top: clamp(48px, 7vw, 96px); }
.room-feature:nth-child(even) .room-feature-media { order: 2; }
.room-feature-media { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; height: clamp(240px, 32vw, 430px); }
.room-feature-media img { border-radius: 20px; width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.room-label { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: color-mix(in srgb, var(--room) 68%, #000); letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; }
.room-label::before { content: ""; width: 26px; height: 4px; border-radius: 4px; background: var(--room); }

/* Banner (Mittagspause, Gutschein) */
.banner { display: grid; grid-template-columns: 1fr 1.1fr; border-radius: calc(var(--radius) + 8px); overflow: hidden; background: var(--white); box-shadow: var(--shadow-soft); }
.banner-media { min-height: 340px; position: relative; }
.banner-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner-body { padding: clamp(28px, 4.5vw, 56px); display: flex; flex-direction: column; justify-content: center; }
.banner--orchid { background: var(--orchid-50); }
.banner--petrol { background: var(--petrol); color: #e5f3f2; }
.banner--petrol h2 { color: #fff; }
.banner--petrol .eyebrow { color: #c9ecec; }
.banner--petrol h2 em { color: #ffc2e6; }
.big-price { font-family: var(--font-head); font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; margin: 6px 0 14px; }
.facts { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; padding: 0; margin: 0 0 22px; }
.facts li { display: inline-flex; gap: .45em; align-items: center; font-weight: 600; }
.facts svg { width: 18px; height: 18px; }

/* Team */
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.team--jobs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.member { text-align: left; }
.member-photo { position: relative; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: var(--tuerkis-100); margin-bottom: 14px; }
.member-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.member h3 { margin: 0; font-size: 1.15rem; }
.member p { margin: 2px 0 0; color: var(--ink-soft); font-size: .95rem; }
.jobs-card { border-radius: 22px; background: var(--orchid); color: #fff; padding: 26px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; aspect-ratio: 4 / 5; }
.jobs-card h3 { font-family: var(--font-head); font-weight: 500; font-size: clamp(1.25rem, 1.9vw, 1.6rem); color: #fff; }
.jobs-card p { color: #ffe3f3; margin: 0; hyphens: auto; overflow-wrap: break-word; }
.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; list-style: none; padding: 0; margin: 0; }
.benefits li { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 16px; padding: 14px 16px; display: flex; gap: 10px; align-items: flex-start; }
.benefits svg { width: 20px; height: 20px; flex: none; color: var(--tuerkis); margin-top: 3px; }

/* FAQ */
.faq { display: grid; gap: 12px; max-width: 860px; }
.faq details { background: #fff; border-radius: 18px; border: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 60px 20px 24px; font-weight: 700; font-size: 1.07rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 12px; height: 12px; border-right: 2.5px solid var(--petrol); border-bottom: 2.5px solid var(--petrol); transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details[open] { border-color: var(--tuerkis); box-shadow: var(--shadow-soft); }
.faq .answer { padding: 0 24px 20px; color: var(--ink-soft); }
.faq .answer p:last-child { margin: 0; }

/* Kontakt & Öffnungszeiten */
.visit { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.info-card { background: #fff; border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-soft); }
.info-card h3 { display: flex; gap: 10px; align-items: center; }
.info-card h3 svg { width: 22px; height: 22px; color: var(--orchid); }
.info-card address { font-style: normal; }
.hours { width: 100%; border-collapse: collapse; font-size: .98rem; }
.hours td { padding: 7px 0; border-bottom: 1px dashed var(--line); }
.hours td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hours tr.is-today td { font-weight: 700; color: var(--petrol); }
.hours tr.is-today td:first-child::after { content: " · heute"; font-weight: 600; color: var(--orchid); }
.contact-list { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }
.contact-list a, .contact-list span { display: inline-flex; gap: 10px; align-items: center; text-decoration: none; font-weight: 600; }
.contact-list svg { width: 20px; height: 20px; color: var(--petrol); flex: none; }

/* Formular */
.form-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
.form-card { background: #fff; border-radius: calc(var(--radius) + 4px); padding: clamp(22px, 4vw, 44px); box-shadow: var(--shadow); }
.form-card h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
fieldset { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
legend, .label { display: block; font-weight: 700; margin-bottom: 10px; font-size: 1rem; }
.label .opt { font-weight: 500; color: var(--ink-soft); font-size: .9rem; }
.choice-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; padding: .55em 1em; border-radius: 999px; border: 1.5px solid var(--line); background: var(--sand); font-weight: 600; font-size: .95rem; cursor: pointer; transition: all .15s ease; }
.choice span:hover { border-color: var(--tuerkis); }
.choice input:checked + span { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.choice input:focus-visible + span { outline: 3px solid var(--orchid); outline-offset: 2px; }
.field { margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--sand); border: 1.5px solid var(--line); border-radius: 14px; padding: .8em 1em; min-height: 52px;
  transition: border-color .15s ease, background-color .15s ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--petrol); background: #fff; box-shadow: 0 0 0 4px rgba(14, 94, 99, .12); }
/* Datumsauswahl im Corpo-Vivo-Design (main.js) */
.datum { position: relative; }
.datum input[type="date"] { padding-right: 3.2em; cursor: pointer; }
.datum input::-webkit-calendar-picker-indicator { display: none; }
.datum-knopf { position: absolute; right: 8px; top: 26px; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: var(--petrol); display: grid; place-items: center; cursor: pointer; }
.datum-knopf:hover, .datum-knopf[aria-expanded="true"] { background: var(--tuerkis-50); }
.datum-knopf svg { width: 21px; height: 21px; }
.datum-pop { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; width: 316px; max-width: calc(100vw - 32px); padding: 16px 16px 12px; background: #fff; border-radius: 22px; box-shadow: 0 24px 48px -20px rgba(14, 94, 99, .45), 0 0 0 1px rgba(14, 94, 99, .06); }
.datum-pop[hidden] { display: none; }
.datum-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.datum-kopf strong { font-family: var(--font-head); font-weight: 500; font-size: 1.15rem; letter-spacing: -.01em; color: var(--ink); }
.datum-nav { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--tuerkis-50); color: var(--petrol); display: grid; place-items: center; cursor: pointer; }
.datum-nav:hover { background: var(--tuerkis-100); }
.datum-nav svg { width: 18px; height: 18px; }
.datum-woche, .datum-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.datum-woche span { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); padding: 4px 0 6px; }
.datum-tag { aspect-ratio: 1; border: 0; border-radius: 50%; background: transparent; font: 500 .95rem var(--font-body); color: var(--ink); cursor: pointer; transition: background-color .12s ease; }
.datum-tag:hover { background: var(--tuerkis-50); }
.datum-tag.is-wochenende { color: var(--ink-soft); }
.datum-tag.is-anders { color: #a9bbb9; }
.datum-tag.is-heute { box-shadow: inset 0 0 0 1.5px var(--petrol); font-weight: 700; color: var(--petrol); }
.datum-tag.is-gewaehlt { background: var(--orchid); color: #fff; font-weight: 700; box-shadow: 0 6px 14px -8px rgba(176, 21, 127, .8); }
.datum-tag:disabled { opacity: .35; cursor: default; background: transparent; }
.datum-tag:focus-visible, .datum-nav:focus-visible, .datum-fuss button:focus-visible { outline: 2px solid var(--orchid); outline-offset: 1px; }
.datum-fuss { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.datum-fuss button { border: 0; background: transparent; font: 700 .9rem var(--font-body); color: var(--petrol); padding: 6px 10px; border-radius: 999px; cursor: pointer; }
.datum-fuss button:hover { background: var(--tuerkis-50); }
.field .hint { font-size: .88rem; color: var(--ink-soft); margin-top: 6px; }
.field.has-error input, .field.has-error textarea { border-color: #c0392b; }
.error-msg { color: #b42318; font-size: .88rem; margin-top: 6px; display: none; }
.has-error .error-msg { display: block; }
.notice { display: flex; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--tuerkis-50); border: 1px solid var(--tuerkis-100); font-size: .93rem; color: var(--ink); margin-bottom: 18px; }
.notice svg { width: 20px; height: 20px; flex: none; color: var(--petrol); margin-top: 2px; }
.notice--warm { background: #fff8e8; border-color: #f6e3b4; }
.notice--warm svg { color: #9a6b00; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .93rem; }
.field--consent { margin-bottom: 22px; }
.has-error .choice span { border-color: #c0392b; }
.has-error .consent input { outline: 2px solid #c0392b; outline-offset: 2px; }
main:focus { outline: none; }
.consent input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--petrol); flex: none; }
.hp { position: absolute; left: -9999px; }
[data-show-for][hidden], [data-rezept-einwilligung][hidden] { display: none; }
.form-success { text-align: center; padding: 30px 10px; }
.form-success .check { width: 72px; height: 72px; border-radius: 50%; background: var(--tuerkis-100); color: var(--petrol); display: grid; place-items: center; margin: 0 auto 18px; }
.form-success .check svg { width: 36px; height: 36px; }

/* Preise */
.price-tools { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tab { min-height: 44px; padding: .6em 1.15em; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font: 600 .97rem var(--font-body); color: var(--ink); cursor: pointer; }
.tab:hover { border-color: var(--tuerkis); }
.tab[aria-selected="true"] { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.search { position: relative; }
.search input { font: inherit; padding: .7em 1em .7em 2.6em; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; min-width: 260px; min-height: 46px; }
.search input:focus { outline: none; border-color: var(--petrol); box-shadow: 0 0 0 4px rgba(14, 94, 99, .12); }
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-soft); }
.price-group { background: #fff; border-radius: var(--radius); padding: clamp(20px, 3.5vw, 36px); box-shadow: var(--shadow-soft); margin-bottom: 20px; }
.price-group[hidden] { display: none; }
.price-group h2 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); margin-bottom: .2em; }
.price-group > p { color: var(--ink-soft); }
.price-table { width: 100%; border-collapse: collapse; }
.price-table th { text-align: left; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); padding: 10px 0; border-bottom: 2px solid var(--line); }
.price-table td { padding: 13px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.price-table tr:last-child td { border-bottom: 0; }
.price-table td.dur { color: var(--ink-soft); white-space: nowrap; padding-inline: 16px; width: 1%; }
.price-table td.eur, .price-table th.eur { text-align: right; font-weight: 700; white-space: nowrap; width: 1%; font-variant-numeric: tabular-nums; padding-left: 20px; }
.price-table .note { display: block; font-size: .88rem; color: var(--ink-soft); }
.price-table tr[hidden] { display: none; }
.no-results { display: none; padding: 30px; text-align: center; color: var(--ink-soft); }
.no-results.is-visible { display: block; }

/* Wellness-Behandlungen */
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.treatments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.treatment { background: #fff; border-radius: 20px; padding: 22px 24px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.treatment[hidden] { display: none; }
.treatment h3 { margin: 0; font-size: 1.15rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.treatment p { margin: 0; color: var(--ink-soft); font-size: .97rem; }
.treatment .prices { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.treatment .prices span { background: var(--tuerkis-50); border-radius: 10px; padding: .3em .7em; font-size: .9rem; font-weight: 600; }
.treatment .prices b { color: var(--petrol); }
.package { position: relative; background-color: #fff; border-radius: 22px; padding: 30px 26px 26px; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.package::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--accent, var(--orchid)); }
.package h3 { font-family: var(--font-head); font-weight: 500; font-size: 1.35rem; margin: 0; }
.package ul { margin: 0; padding-left: 1.1em; color: var(--ink-soft); }
.package .price { margin-top: auto; font-family: var(--font-head); font-size: 1.8rem; padding-top: 8px; }

/* Schritte */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps li { background: #fff; border-radius: 22px; padding: 26px; position: relative; counter-increment: step; box-shadow: var(--shadow-soft); }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--orchid); color: #fff; font-weight: 800; margin-bottom: 14px; font-size: 1.1rem; }
.steps h3 { margin-bottom: 6px; }
.steps p { margin: 0; color: var(--ink-soft); }

/* Listen & Text */
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; }
.check-list svg { width: 20px; height: 20px; flex: none; color: var(--orchid); margin-top: 4px; }
.service-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; list-style: none; padding: 0; margin: 0; }
.service-list li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.service-list strong { display: block; font-size: 1.07rem; }
.service-list span { color: var(--ink-soft); font-size: .97rem; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.rounded-img { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.rounded-img img { width: 100%; height: 100%; object-fit: cover; }
.prose { max-width: 760px; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.draft-note { background: #fff6d6; border: 1px dashed #d9b84a; color: #5b4a00; border-radius: 14px; padding: 14px 18px; font-size: .93rem; margin-bottom: 24px; }

/* Abschluss-CTA */
.cta-band { text-align: center; }
.cta-band .btn-row { justify-content: center; margin-top: 22px; }

/* Film (oben auf der Startseite bzw. Abschnitt „Einblick“): quer am Desktop, 4:5 am Handy */
.film { position: relative; margin: 0; aspect-ratio: 16 / 9; max-width: 100%; border-radius: calc(var(--radius) + 8px); overflow: hidden; background: var(--sand); box-shadow: var(--shadow); }
.film-standbild, .film-standbild img, .film video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.film video { opacity: 0; transition: opacity .5s ease; }
.film.laeuft video { opacity: 1; }
@media (max-width: 700px) { .film { aspect-ratio: 4 / 5; } }
/* oben auf der Startseite: nie höher als der Bildschirm, damit Text und Knöpfe darunter sichtbar bleiben */
.hero--film { padding-block: clamp(14px, 2.4vw, 28px) clamp(44px, 6vw, 72px); }
.film--held { width: min(100%, calc((100svh - 215px) * 16 / 9)); min-width: min(100%, 640px); margin-inline: auto; border-radius: calc(var(--radius) + 12px); }
/* quer: Pause-Knopf links unten – dort ist der Film in jeder Szene frei */
@media (min-width: 701px) { .film--held .film-knopf { right: auto; left: clamp(10px, 2vw, 20px); } }
.film.is-pausiert .film-knopf { left: auto; }
@media (max-width: 700px) { .film--held { width: min(100%, calc((100svh - 200px) * 4 / 5)); min-width: min(100%, 300px); } }
.held-unter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: clamp(20px, 3vw, 34px); }
.held-unter .lead { margin: 0; max-width: 52ch; }
.hero--film .chips { margin-top: clamp(16px, 2.4vw, 24px); }
.film-knopf { position: absolute; right: clamp(10px, 2vw, 20px); bottom: clamp(10px, 2vw, 20px); width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--petrol); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-soft); transition: transform .2s ease, background-color .2s ease; }
.film-knopf:hover { background: #fff; transform: scale(1.06); }
.film-knopf svg { width: 22px; height: 22px; }
.film-knopf .ic-play, .film.is-pausiert .film-knopf .ic-pause { display: none; }
.film.is-pausiert .film-knopf .ic-play { display: block; }
/* angehalten: großer Knopf in der Mitte */
.film.is-pausiert .film-knopf { width: 84px; height: 84px; right: 50%; bottom: 50%; transform: translate(50%, 50%); background: var(--orchid); color: #fff; }
.film.is-pausiert .film-knopf svg { width: 34px; height: 34px; margin-left: 4px; }
@media (max-width: 640px) {
  .film-knopf { width: 44px; height: 44px; right: 8px; bottom: 8px; background: rgba(255, 255, 255, .78); }
  .film-knopf svg { width: 18px; height: 18px; }
  .film.is-pausiert .film-knopf { width: 64px; height: 64px; }
  .film.is-pausiert .film-knopf svg { width: 26px; height: 26px; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--petrol-dark); color: #cfe6e4; padding-top: 72px; position: relative; margin-top: 0; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--tuerkis); text-decoration: underline; }
.footer-wave { display: block; width: 100%; height: 60px; color: var(--petrol-dark); margin-top: -60px; position: relative; }
.site-footer address { font-style: normal; }
.footer-grid .hours tr.is-today td:first-child::after { content: none; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 48px; }
.footer-grid h3 { color: #fff; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-grid .logo img { width: 150px; margin-bottom: 16px; }
.footer-grid .hours td { border-color: rgba(255,255,255,.12); }
.footer-grid .hours tr.is-today td { color: #fff; }
.footer-grid .hours tr.is-today td:first-child::after { color: #ffc2e6; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-block: 20px 28px; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: .9rem; }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; padding: 0; margin: 0; }
.footer-grid address p { margin: 0 0 .7em; }
.footer-klein { font-size: .92rem; color: #b9d6d3; margin: 0 0 .4em; }
.footer-link, .footer-kontakt a, .footer-kontakt span { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; }
.footer-link { font-weight: 700; min-height: 44px; }
.footer-link svg, .footer-kontakt svg { width: 18px; height: 18px; flex: none; color: var(--tuerkis); }
.footer-grid .footer-kontakt { margin-bottom: 18px; gap: 4px; }
.site-footer .btn-light { color: var(--petrol); text-decoration: none; }
.site-footer .btn-light:hover { color: var(--petrol-dark); text-decoration: none; }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 36px; }
/* Kontaktseite: Adresse, Zeiten und Telefon stehen schon neben dem Formular */
.site-footer--kompakt .footer-grid { grid-template-columns: minmax(0, 1fr); }
.site-footer--kompakt .footer-grid > :not(.footer-marke) { display: none; }
.site-footer--kompakt .footer-marke { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; }
.site-footer--kompakt .footer-marke .logo img { margin-bottom: 0; }
.site-footer--kompakt .footer-marke p { margin: 0; }

/* Mobile Aktionsleiste */
.mobile-bar { display: none; }

/* Einblend-Animation */
/* Sichtbar ist der Normalzustand; nur Abschnitte unterhalb des ersten Bildschirms werden per Skript kurz versteckt */
.reveal { transition: opacity .7s ease, transform .7s ease; }
.reveal.is-pending { opacity: 0; transform: translateY(18px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.is-pending { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Responsiv ---------- */
@media (max-width: 1100px) {
  .nav a { padding: .5em .6em; font-size: .94rem; }
  .header-cta { display: none; }
  .season-grid { grid-template-columns: repeat(2, 1fr); }
  .treatments { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hours tr.is-today td:first-child::after { content: none; }
}

/* Tablet hochkant: bei drei Elementen in zwei Spalten nimmt das letzte die volle Breite */
@media (min-width: 641px) and (max-width: 960px) {
  .grid-3 > :last-child:nth-child(odd), .visit > :last-child:nth-child(odd), .steps > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .grid-3 > .card:last-child:nth-child(odd) { flex-direction: row; }
  .grid-3 > .card:last-child:nth-child(odd) .card-media { flex: 1 1 50%; aspect-ratio: auto; min-height: 260px; }
  .grid-3 > .card:last-child:nth-child(odd) .card-body { flex: 1 1 50%; justify-content: center; }
  .team--jobs .jobs-card { grid-column: 1 / -1; aspect-ratio: auto; }
}

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  /* backdrop-filter würde das fixierte Menü in den Header einsperren */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--sand); }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(86vw, 380px); background: var(--sand); padding: 100px 24px 24px;
    transform: translateX(100%); transition: transform .3s ease; box-shadow: -20px 0 40px -20px rgba(0,0,0,.3); overflow-y: auto; z-index: 60;
  }
  .nav-open .nav { transform: none; }
  .nav ul { flex-direction: column; gap: 4px; }
  .nav a { font-size: 1.15rem; padding: .8em 1em; }
  .nav-cta { display: block; margin-top: 10px; }
  .nav li:not(.nav-cta) + .nav-cta { margin-top: 24px; }
  .nav .nav-cta .btn { display: flex; font-size: 1.05rem; padding: .8em 1.2em; }
  .nav-toggle { position: relative; z-index: 70; margin-left: 8px; }
  .search-toggle { margin-left: auto; }
  /* offenes Menü: Seite dahinter bleibt stehen (html und body, sonst scrollt iOS Safari trotzdem) */
  html.nav-open, body.nav-open { overflow: hidden; }
  .nav { overscroll-behavior: contain; }
  .nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(10, 40, 40, .35); z-index: 40; }
  .hero-grid, .page-hero-grid, .split, .banner, .form-layout, .room-feature, .rooms { grid-template-columns: 1fr; }
  .hero-media { max-width: 560px; margin-inline: auto; width: 100%; }
  .room-feature:nth-child(even) .room-feature-media { order: 0; }
  .grid-3, .usp, .visit, .steps { grid-template-columns: 1fr 1fr; }
  .grid-4, .team { grid-template-columns: repeat(2, 1fr); }
  .benefits { grid-template-columns: 1fr 1fr; }
  .room-tabs { flex-direction: row; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
  .room-tab { width: auto; flex: none; }
  .room-tab small { display: none; }
  .room-panel { min-height: 420px; }
  .banner-media { min-height: 260px; }
  .topbar-items .hide-sm { display: none; }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 82px; }
  body { font-size: 1rem; padding-bottom: 72px; }
  /* lange deutsche Wörter wie „Datenschutzerklärung“ sauber trennen */
  h1, h2, h3 { -webkit-hyphens: auto; hyphens: auto; }
  .grid-2, .grid-3, .usp, .visit, .steps, .season-grid, .treatments, .service-list, .benefits, .field-row, .footer-grid { grid-template-columns: 1fr; }
  .team { grid-template-columns: 1fr 1fr; gap: 14px; }
  .jobs-card { aspect-ratio: auto; grid-column: 1 / -1; }
  .header-inner { min-height: 66px; }
  .logo img { width: 108px; }
  .topbar .container { justify-content: center; }
  .topbar-items .hide-xs { display: none; }
  .status-card { right: 0; bottom: 4%; max-width: 230px; padding: 12px 14px; }
  .room-panel { min-height: 380px; }
  .room-panel .room-caption { left: 12px; right: 12px; bottom: 12px; padding: 16px 18px; }
  .search input { min-width: 0; width: 100%; }
  .search { width: 100%; }
  .price-table td.dur { padding-inline: 10px; }
  .mobile-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(236, 247, 245, .96); backdrop-filter: blur(10px); border-top: 1px solid var(--line);
  }
  .mobile-bar .btn { min-height: 48px; padding: .6em .8em; font-size: .98rem; }
  .footer-bottom { padding-bottom: 96px; }

  /* Mehrspaltige Preistabellen werden auf dem Handy zu Karten */
  .price-table.price-table--stack thead { display: none; }
  .price-table.price-table--stack tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .price-table.price-table--stack tr:last-child { border-bottom: 0; }
  .price-table.price-table--stack td { display: block; border: 0; padding: 2px 0; width: auto; text-align: left; }
  .price-table.price-table--stack td:first-child { font-weight: 700; }
  .price-table.price-table--stack td[data-label] { display: flex; justify-content: space-between; gap: 12px; }
  .price-table.price-table--stack td[data-label]::before { content: attr(data-label); font-weight: 500; color: var(--ink-soft); }
}

/* Auf Touch-Geräten keine „klebenden“ Hover-Effekte */
@media (hover: none) {
  .btn:hover, a.card:hover { transform: none; }
  a.card:hover .card-media img { transform: none; }
}

/* ======================================================================
   Neue Funktionen: Suche, Massage-Finder, Gutschein-Gestalter, Jahreszeiten
   ====================================================================== */

/* ---------- Suche ---------- */
.search-toggle { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--petrol); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.search-toggle svg { width: 22px; height: 22px; }
.search-toggle:hover { border-color: var(--tuerkis); background: var(--tuerkis-50); }
html.search-open, html.search-open body { overflow: hidden; }
.search-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(10, 40, 40, .5); display: flex; justify-content: center; align-items: flex-start; padding: max(6vh, env(safe-area-inset-top, 0px)) 16px 16px; }
.search-overlay[hidden] { display: none; }
.search-panel { width: min(100%, 720px); max-height: 86vh; background: var(--white); border-radius: var(--radius); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45); display: flex; flex-direction: column; overflow: hidden; }
.search-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--line); }
.search-head > svg { width: 22px; height: 22px; color: var(--petrol); flex: none; }
.search-head input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font-size: 1.12rem; padding: .55em 0; min-height: 48px; }
.search-head input:focus { outline: none; }
.search-head input::-webkit-search-cancel-button { display: none; }
.search-close { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--tuerkis-50); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.search-close svg { width: 20px; height: 20px; }
.search-body { overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 18px; }
.search-hints .small { margin: 0 4px 8px; }
.hint-list { display: flex; flex-wrap: wrap; gap: 8px; }
.hint-chip { font: 600 .95rem var(--font-body); color: var(--ink); background: var(--sand); border: 1.5px solid var(--line); border-radius: 999px; padding: .5em 1em; min-height: 44px; cursor: pointer; }
.hint-chip:hover { border-color: var(--tuerkis); }
.search-status { margin: 10px 4px 6px; }
.search-status:empty { display: none; }
.search-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.search-results a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid transparent; color: var(--ink); text-decoration: none; }
.search-results a:hover, .search-results a:focus-visible { background: var(--tuerkis-50); border-color: var(--tuerkis-100); outline: none; }
.search-results .typ { grid-column: 1; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--petrol); }
.search-results .titel { grid-column: 1; font-weight: 700; font-size: 1.05rem; }
.search-results .text { grid-column: 1; font-size: .9rem; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search-results .preis { grid-column: 2; grid-row: 1 / span 3; align-self: center; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.search-empty { padding: 10px 6px; }
@media (max-width: 640px) {
  .search-overlay { padding: 0; }
  .search-panel { width: 100%; max-height: none; height: 100%; border-radius: 0; padding-top: env(safe-area-inset-top, 0px); }
  .search-toggle { width: 44px; height: 44px; }
}

/* ---------- Jahreszeiten-Vorschau (nur im Entwurf) und Live-Hinweis ---------- */
.season-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; width: fit-content; max-width: 100%; margin-bottom: 14px; padding: 8px 10px; font-size: .85rem; color: #5b4a00; background: #fff6d6; border: 1px dashed #d9b84a; border-radius: 12px; }
.season-preview button { font: 700 .85rem var(--font-body); color: #5b4a00; background: #fffdf3; border: 1px solid #d9b84a; border-radius: 999px; padding: .4em 1em; min-height: 44px; cursor: pointer; }
.season-preview button[aria-pressed="true"] { background: #5b4a00; color: #fff6d6; border-color: #5b4a00; }
.beispiel-hinweis { width: fit-content; max-width: 100%; margin: 12px 0 0; padding: 6px 10px; font-size: .85rem; color: #5b4a00; background: #fff6d6; border: 1px dashed #d9b84a; border-radius: 10px; }
.live-badge { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; width: fit-content; margin-bottom: 10px; padding: .35em .85em; border-radius: 999px; background: #e3f6eb; color: #11613a; font-size: .85rem; font-weight: 700; }
.live-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #1f9d55; box-shadow: 0 0 0 4px rgba(31, 157, 85, .2); }
.live-badge[hidden] { display: none; }

/* ---------- Massage-Finder ---------- */
.teaser { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; margin-top: clamp(20px, 3vw, 32px); padding: clamp(22px, 4vw, 40px); background: var(--white); border-radius: calc(var(--radius) + 8px); box-shadow: var(--shadow-soft); }
.teaser-icon { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--orchid-50); color: var(--orchid); }
.teaser-icon svg { width: 30px; height: 30px; }
.teaser h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: .25em; }
.teaser p { margin: 0; color: var(--ink-soft); }
.teaser .eyebrow { margin-bottom: .6rem; }
.finder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.finder fieldset { margin-bottom: 24px; }
.finder legend { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; }
.step { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--orchid); color: #fff; font-size: .85rem; font-weight: 800; flex: none; }
.finder-ergebnis { background: var(--white); border-radius: var(--radius); padding: clamp(18px, 3vw, 28px); box-shadow: var(--shadow-soft); min-width: 0; }
.finder-start { margin: 0; color: var(--ink-soft); }
.finder-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.finder-liste:empty { display: none; }
.finder-treffer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 16px 18px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--sand); }
.finder-treffer:first-child { border-color: var(--orchid); background: var(--white); }
.finder-treffer h3 { margin: 0; font-size: 1.15rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.finder-treffer .sub { margin: 2px 0 0; color: var(--ink-soft); font-size: .93rem; }
.finder-treffer .price { margin: 0; font-family: var(--font-head); font-size: 1.6rem; line-height: 1.1; white-space: nowrap; }
.finder-gruende { grid-column: 1 / -1; list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.finder-gruende li { padding: .2em .7em; border-radius: 999px; background: var(--tuerkis-50); color: var(--petrol-dark); font-size: .82rem; font-weight: 600; }
.finder-treffer .btn-row { grid-column: 1 / -1; margin-top: 8px; align-items: center; }
.finder-hinweis { margin: 14px 0 0; }
.treatment:target, .package:target, .faq details:target, .is-ziel { animation: hervorheben 2.6s ease; }
@keyframes hervorheben { 0%, 45% { box-shadow: 0 0 0 4px var(--orchid); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---------- Gutschein-Gestalter ---------- */
.gestalter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.gestalter-form fieldset { margin-bottom: 22px; }
.gestalter-vorschau { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 100px); }
@media (max-width: 760px) {
  .gestalter { grid-template-columns: minmax(0, 1fr); }
  .gestalter-vorschau { position: static; order: -1; }
}
.vorschau-label { margin: 0 0 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; }

/* ---------- Gutschein (Vorschau und Druck) ----------
   Hintergrundbild je Anlass (Logo, Schriftzug „Gutschein“ und Motiv sind im Bild), der Text liegt in der freien Fläche links.
   Schriftgrößen wachsen mit der Breite des Gutscheins (cqi) – so passt er in die Vorschau und auf A4.
   Unter 560 px Breite (Handy) steht der Text unter dem Bild statt darauf. */
.voucher {
  --v-fg: var(--ink); --v-accent: var(--petrol); --v-panel: #e6f4f2; --v-kopf: var(--petrol);
  container-type: inline-size; position: relative; isolation: isolate; overflow: hidden; line-height: 1.25;
  border-radius: 22px; background: var(--v-panel); color: var(--v-fg); box-shadow: var(--shadow);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* ANLAESSE-ANFANG – erzeugt aus gutschein.py (build.py), nicht von Hand ändern */
.voucher[data-anlass="geburtstag"] { --v-panel: #fbe1e1; --v-accent: #a3136f; }
.voucher[data-anlass="geburtstag"] .voucher-hg--geburtstag { display: block; }
.voucher[data-anlass="weihnachten"] { --v-panel: #014c51; --v-accent: #ecd08f; --v-fg: #fff; --v-kopf: #fff; }
.voucher[data-anlass="weihnachten"] .voucher-hg--weihnachten { display: block; }
.voucher[data-anlass="weihnachten"] .v-logo--petrol { display: none; }
.voucher[data-anlass="weihnachten"] .v-logo--weiss { display: block; }
.voucher[data-anlass="neujahr"] { --v-panel: #dbdadd; --v-accent: #565d6a; }
.voucher[data-anlass="neujahr"] .voucher-hg--neujahr { display: block; }
.voucher[data-anlass="valentinstag"] { --v-panel: #f7e0de; --v-accent: #a1123a; }
.voucher[data-anlass="valentinstag"] .voucher-hg--valentinstag { display: block; }
.voucher[data-anlass="ostern"] { --v-panel: #f5e5dc; --v-accent: #8c4a5e; }
.voucher[data-anlass="ostern"] .voucher-hg--ostern { display: block; }
.voucher[data-anlass="muttertag"] { --v-panel: #fce7e8; --v-accent: #b0407a; }
.voucher[data-anlass="muttertag"] .voucher-hg--muttertag { display: block; }
.voucher[data-anlass="vatertag"] { --v-panel: #f2e8df; --v-accent: #35505f; }
.voucher[data-anlass="vatertag"] .voucher-hg--vatertag { display: block; }
.voucher[data-anlass="hochzeit"] { --v-panel: #f0e7df; --v-accent: #7e6228; }
.voucher[data-anlass="hochzeit"] .voucher-hg--hochzeit { display: block; }
.voucher[data-anlass="geburt"] { --v-panel: #fbf1d1; --v-accent: #86650f; }
.voucher[data-anlass="geburt"] .voucher-hg--geburt { display: block; }
.voucher[data-anlass="gutebesserung"] { --v-panel: #e4e8cf; --v-accent: #2f6b45; }
.voucher[data-anlass="gutebesserung"] .voucher-hg--gutebesserung { display: block; }
.voucher[data-anlass="danke"] { --v-panel: #e5e1f8; --v-accent: #634392; }
.voucher[data-anlass="danke"] .voucher-hg--danke { display: block; }
.voucher[data-anlass="einfach"] { --v-panel: #dcf0ee; --v-accent: #0e5e63; }
.voucher[data-anlass="einfach"] .voucher-hg--einfach { display: block; }
/* ANLAESSE-ENDE */
.voucher p { margin: 0; }
.voucher-bild { position: relative; }
.voucher-hg { display: none; width: 100%; height: auto; }
/* Logo und Schriftzug sitzen bei jedem Anlass exakt gleich – nur das Motiv wechselt */
.v-logo { position: absolute; z-index: 1; left: 2.4%; top: 4%; width: 21.2%; height: auto; display: none; }
.voucher .v-logo--petrol { display: block; }
.voucher-label { position: absolute; z-index: 1; left: 51%; top: 18.7%; transform: translate(-50%, -50%); white-space: nowrap; padding: .6em 2em .6em 2.3em; border: clamp(1px, .12cqi, 2px) solid currentColor; border-radius: 999px; color: var(--v-kopf); font-size: max(2.1cqi, .5rem); line-height: 1; font-weight: 800; letter-spacing: .34em; text-transform: uppercase; }
.voucher-inhalt { position: absolute; z-index: 1; left: 8%; top: 42.5%; width: 56%; bottom: 11.5%; display: flex; flex-direction: column; justify-content: flex-start; gap: .18em; min-width: 0; }
.voucher-inhalt > * { flex: none; }
.voucher-titel { font-family: var(--font-head); font-size: 3.2cqi; line-height: 1.08; font-weight: 500; letter-spacing: -.01em; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.voucher-detail { font-weight: 600; font-size: 1.65cqi; letter-spacing: .01em; color: var(--v-accent); }
.voucher-namen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1.4em; font-size: 1.65cqi; margin-top: .1em; }
.voucher-namen p { font-weight: 400; letter-spacing: .02em; }
.voucher-fuer strong, .voucher-von strong { font-family: var(--font-head); font-weight: 500; font-size: 1.35em; letter-spacing: -.005em; margin-left: .1em; font-variation-settings: "SOFT" 100, "opsz" 48; }
.voucher .voucher-gruss { margin-top: .25em; font-family: var(--font-head); font-style: italic; font-size: 1.7cqi; line-height: 1.32; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.voucher .voucher-fuss { position: absolute; z-index: 1; left: 8%; width: 58%; bottom: 4.6%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1.6em; font-size: 1.45cqi; opacity: .9; }
.voucher-fuss [data-v-nr] { font-weight: 700; }
.voucher-fuss [data-v-nr]:empty, .voucher .voucher-gruss:empty, .voucher .voucher-von:empty { display: none; }
/* Platzhalter ohne Transparenz, damit sie lesbar bleiben – kursiv statt blass */
.voucher .leer { font-style: italic; font-weight: 500; }
@container (max-width: 559px) {
  .voucher-inhalt { position: static; width: auto; padding: 14px 18px 4px; gap: .25em; }
  .voucher-titel { font-size: clamp(1.2rem, 6cqi, 1.6rem); }
  .voucher-detail, .voucher-namen { font-size: clamp(.82rem, 3.2cqi, 1rem); }
  .voucher .voucher-gruss { font-size: clamp(.9rem, 3.4cqi, 1.1rem); -webkit-line-clamp: 4; }
  .voucher .voucher-fuss { position: static; width: auto; padding: 8px 18px 14px; font-size: clamp(.68rem, 2.6cqi, .8rem); }
}

/* Vorschau vergrößern (Gutschein-Gestalter) */
.vorschau-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vorschau-gross { display: inline-flex; align-items: center; gap: .45em; border: 0; background: var(--tuerkis-50); color: var(--petrol); font: 700 .8rem/1 var(--font-body); letter-spacing: .03em; text-transform: none; padding: .55em .95em; border-radius: 999px; cursor: pointer; transition: background-color .15s ease; }
.vorschau-gross:hover { background: var(--tuerkis-100); }
.vorschau-gross svg { width: 15px; height: 15px; flex: none; }
.gestalter-vorschau .voucher { cursor: zoom-in; }
.gross-overlay { position: fixed; inset: 0; z-index: 220; display: flex; overflow: auto; padding: clamp(16px, 4vw, 40px); background: rgba(10, 40, 40, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: grossEin .18s ease; }
.gross-box { position: relative; width: min(100%, 1100px); margin: auto; }
.gross-box .voucher { box-shadow: 0 34px 70px -22px rgba(0, 0, 0, .6); cursor: default; }
.gross-zu { position: absolute; top: -16px; right: -16px; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5); transition: background-color .15s ease, color .15s ease; }
.gross-zu:hover { background: var(--orchid); color: #fff; }
.gross-zu svg { width: 20px; height: 20px; }
html.gross-offen, html.gross-offen body { overflow: hidden; }
@media (max-width: 640px) { .gross-zu { top: -14px; right: -8px; } }
@keyframes grossEin { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gross-overlay { animation: none; } }

/* ---------- Druckansicht für die Praxis ---------- */
body.druck { background: #e9eeed; padding-bottom: 0; }
.druck-leiste { background: #fff; border-bottom: 1px solid var(--line); padding: 20px var(--gutter); display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2.2fr); gap: 12px 32px; align-items: start; }
.druck-kopf h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: .3em; }
.druck-kopf p { color: var(--ink-soft); font-size: .95rem; margin: 0; }
.druck-felder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 14px; max-width: 1100px; }
.druck-felder label { display: grid; gap: 4px; font-weight: 700; font-size: .85rem; grid-column: span 2; }
.druck-felder .lang { grid-column: span 4; }
.druck-felder input, .druck-felder select, .druck-felder textarea { font: 500 .95rem var(--font-body); color: var(--ink); padding: .55em .7em; border: 1.5px solid var(--line); border-radius: 10px; background: var(--sand); min-height: 44px; }
.druck-felder textarea { min-height: 64px; resize: vertical; }
.druck-felder .breit { grid-column: 1 / -1; }
.druck-felder fieldset { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; margin: 0; }
.druck-felder legend { font-weight: 700; font-size: .85rem; float: left; margin-right: 12px; }
.druck-felder .wahl { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: .95rem; min-height: 40px; }
.druck-felder .wahl input { min-height: 0; width: 18px; height: 18px; accent-color: var(--petrol); }
.druck-knoepfe { display: flex; gap: 12px; }
.druck-flaeche { padding: clamp(20px, 4vw, 48px) var(--gutter); }
.druck-blatt { width: min(100%, 1000px); margin: 0 auto; background: #fff; padding: clamp(18px, 5%, 56px); box-shadow: 0 20px 40px -26px rgba(0, 0, 0, .35); }
.druck-schnitt { outline: 1.5px dashed #9aa9a7; outline-offset: 9px; border-radius: 22px; }
.druck-schnitt .voucher { box-shadow: none; }
.druck-hinweis { margin: 22px 0 0; text-align: center; color: var(--ink-soft); font-size: .85rem; }
.druck[data-format="pdf"] .druck-blatt { padding: 0; background: none; box-shadow: none; }
.druck[data-format="pdf"] .druck-schnitt { outline: 0; }
.druck[data-format="pdf"] .druck-hinweis { display: none; }
@media (max-width: 760px) { .druck-leiste { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .druck-felder { grid-template-columns: 1fr; } .druck-felder label, .druck-felder .lang { grid-column: 1 / -1; } }
@media print {
  body.druck { background: #fff; }
  .druck-leiste, .draft-bar { display: none !important; }
  .druck-flaeche { padding: 0; }
  .druck-blatt { width: 100%; box-shadow: none; padding: 8mm 0 0; }
  .druck-schnitt { width: 230mm; margin: 0 auto; }
  .druck[data-format="pdf"] .druck-blatt { padding: 0; }
  .druck[data-format="pdf"] .druck-schnitt { width: 100%; }
  .druck[data-format="pdf"] .voucher { border-radius: 0; }
}

/* ======================================================================
   Ausbau Oktober 2026: Finder-Schnellstart, Kursplan, Bewerbung, erster Termin,
   Bewertungen, Schließzeiten, Leistungsseiten
   ====================================================================== */

/* Massage-Finder: Schnellstart auf der Startseite */
.schnellstart { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.kachel { --kachel: var(--petrol); display: flex; flex-direction: column; gap: 4px; min-height: 168px; padding: 22px 20px 20px; border-radius: var(--radius); background: #fff; border: 1.5px solid color-mix(in srgb, var(--kachel) 22%, transparent); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-soft); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.kachel:hover { transform: translateY(-3px); border-color: var(--kachel); box-shadow: var(--shadow); color: var(--ink); }
.kachel-icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 10px; color: var(--kachel); background: color-mix(in srgb, var(--kachel) 12%, #fff); }
.kachel-icon svg { width: 28px; height: 28px; }
.kachel strong { font-size: 1.12rem; line-height: 1.25; }
.kachel span:last-child { color: var(--ink-soft); font-size: .95rem; }
.schnellstart-mehr { margin: 18px 0 0; color: var(--ink-soft); }
.schnellstart-mehr a { display: inline-flex; align-items: center; min-height: 40px; font-weight: 700; }
@media (max-width: 1100px) { .schnellstart { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .schnellstart { grid-template-columns: 1fr 1fr; }
  .kachel { min-height: 0; padding: 16px; }
  .kachel:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (hover: none) { .kachel:hover { transform: none; } }

/* Finder im Handy-Menü, Hinweise, Teilen */
.nav-finder { display: none; }
@media (max-width: 960px) {
  .nav-finder { display: block; margin-bottom: 14px; }
  .nav .nav-finder a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: var(--orchid-50); color: var(--orchid-dark); font-weight: 700; }
  .nav-finder svg { width: 26px; height: 26px; flex: none; }
  .nav-finder small { display: block; font-weight: 500; font-size: .85rem; color: var(--ink-soft); }
}
.finder-tipp { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--orchid-50); color: var(--ink); font-size: .95rem; margin: 0 0 22px; }
.finder-tipp svg { width: 22px; height: 22px; flex: none; color: var(--orchid); margin-top: 1px; }
.finder-tipp a, .field .hint a, .price-group > p a { font-weight: 700; }
.finder-teilen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.finder-teilen[hidden] { display: none; }

/* Kursplan */
.kursplan { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.kurstermin { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto auto; gap: 12px 22px; align-items: center; padding: 16px 20px; background: #fff; border-radius: 20px; box-shadow: var(--shadow-soft); }
.kurs-datum { display: grid; justify-items: center; padding: 8px 6px; border-radius: 14px; background: var(--tuerkis-50); color: var(--petrol-dark); line-height: 1.15; }
.kurs-datum span { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.kurs-datum strong { font-family: var(--font-head); font-size: 1.45rem; font-weight: 500; }
.kurs-info h3 { margin: 0 0 2px; font-size: 1.12rem; }
.kurs-info p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.plaetze { padding: .3em .8em; border-radius: 999px; font-size: .85rem; font-weight: 700; white-space: nowrap; }
.plaetze--frei { background: #e3f6eb; color: #11613a; }
.plaetze--wenig { background: #fff1d6; color: #7a4a00; }
.plaetze--voll { background: #eceff0; color: #45585a; }
.kursplan-hinweis { margin: 14px 0 0; }
@media (max-width: 760px) {
  .kurstermin { grid-template-columns: 70px minmax(0, 1fr); padding: 14px 16px; }
  .kurstermin .plaetze, .kurstermin .btn { grid-column: 2; justify-self: start; }
}

/* Hilfen für Entwurf und WordPress: oben ausrichten, kurzes Textfeld, Fehlermeldung beim Senden */
.align-start { align-items: start; }
textarea.kurz, .field textarea.kurz { min-height: 96px; }
.form-fehler { color: #b42318; font-weight: 600; margin: 14px 0 0; }
.form-fehler:focus { outline: none; }

/* Gutschein-Bestellung: Überweisung mit GiroCode */
.zahlung { text-align: left; margin: 26px auto 0; max-width: 620px; padding: 22px 22px 18px; border-radius: var(--radius); background: var(--tuerkis-50); }
.zahlung h3 { margin: 0 0 14px; }
.zahlung-inhalt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; }
.girocode { margin: 0; padding: 10px; background: #fff; border-radius: 14px; text-align: center; }
.girocode img { display: block; width: 180px; height: 180px; image-rendering: pixelated; }
.girocode figcaption { max-width: 180px; margin-top: 8px; font-size: .8rem; color: var(--ink-soft); }
.zahlung-daten { margin: 0; display: grid; gap: 10px; }
.zahlung-daten dt { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.zahlung-daten dd { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-weight: 600; overflow-wrap: anywhere; }
.zahlung .kopieren { min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--petrol); background: #fff; color: var(--petrol); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.zahlung > .small { margin: 14px 0 0; }
@media (max-width: 640px) {
  .zahlung { padding: 18px 16px 14px; }
  .zahlung-inhalt { grid-template-columns: 1fr; }
  .girocode { justify-self: center; }
}

/* Schnellbewerbung im Jobs-Bereich */
.section--petrol .form-card { color: var(--ink); margin-top: 36px; max-width: 880px; }
.section--petrol .form-card h2 { color: var(--ink); }
.section--petrol .form-card h2 em { color: var(--orchid); }
.bewerbung input[type="file"] { padding: .6em; }

/* Ihr erster Termin, Rezept-Frist */
.frist .field { margin: 14px 0 12px; }
.frist .consent { font-size: .92rem; }
.frist-ergebnis { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--tuerkis-50); font-size: .97rem; }
.frist-ergebnis:empty { display: none; }
.frist-ergebnis.is-abgelaufen { background: #fff1d6; }

/* Bewertungen */
.bewertungen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.bewertung { margin: 0; padding: 24px; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 12px; }
.bewertung .sterne, .bewertung-schnitt .sterne { color: #d99a00; letter-spacing: .12em; }
.bewertung blockquote { margin: 0; font-family: var(--font-head); font-size: 1.15rem; line-height: 1.45; }
.bewertung blockquote p { margin: 0; }
.bewertung figcaption { margin-top: auto; color: var(--ink-soft); font-size: .92rem; font-weight: 600; }
.bewertung--platzhalter { border: 1.5px dashed var(--line); box-shadow: none; }
.bewertung--platzhalter .sterne { color: #c9d2d0; }
.bewertung-schnitt { margin: 0; font-size: 1.05rem; }
.bewertungen-mehr { margin-top: 18px; }
@media (max-width: 960px) { .bewertungen { grid-template-columns: 1fr; } }

/* Schließzeiten: Hinweis über der Kopfzeile */
.hinweis-band { background: var(--orchid-50); color: var(--orchid-dark); font-size: .95rem; font-weight: 600; }
.hinweis-band .container { display: flex; align-items: center; justify-content: center; gap: 10px; padding-block: 10px; text-align: center; }
.hinweis-band svg { width: 18px; height: 18px; flex: none; }

/* Fußzeile: beliebte Leistungen */
.footer-beliebt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding-bottom: 22px; font-size: .92rem; color: #b9d6d3; }
.footer-beliebt ul { display: flex; flex-wrap: wrap; gap: 0 18px; list-style: none; margin: 0; padding: 0; }
.footer-beliebt a { display: inline-flex; align-items: center; min-height: 36px; }

/* Leistungsseiten */
.leistung-links { margin: 22px 0 0; color: var(--ink-soft); }
.leistung-links a { font-weight: 700; }
.leistung-text .prose h2:first-child { margin-top: 0; }
@media (min-width: 961px) { .leistung-text .info-card { position: sticky; top: 112px; } }
.preis-mini-titel { font-size: 1rem; margin: 0 0 .2em; }
.preis-mini .price-table + .preis-mini-titel { margin-top: 26px; }
.treatments + .price-group, .treatments + .preis-mini { margin-top: 20px; }
.link-arrow--klein { min-height: 40px; font-size: .95rem; margin-top: 2px; }
/* Anfahrt: Parken und Zugang */
.anfahrt-zusatz { list-style: none; margin: -6px 0 16px; padding: 0; display: grid; gap: 4px; font-size: .92rem; color: var(--ink-soft); }
.anfahrt-zusatz strong { color: var(--ink); }

/* Team: Schwerpunkte und Ansprechpartnerin */
.member-tags { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; margin: 10px 0 0; }
.member-tags span { padding: .2em .75em; border-radius: 999px; background: var(--tuerkis-50); color: var(--petrol); font-size: .8rem; font-weight: 600; }
.member-mehr[open] { flex-basis: 100%; }
.member-mehr .member-tags { margin: 0; }
.member-mehr summary { list-style: none; cursor: pointer; padding: .2em .75em; border-radius: 999px; border: 1px dashed var(--petrol); color: var(--petrol); font-size: .8rem; font-weight: 700; }
.member-mehr summary::-webkit-details-marker { display: none; }
.member-mehr summary:hover { background: var(--tuerkis-50); }
.member-mehr[open] summary { display: none; }
.ansprech { margin-top: 24px; }
.ansprech ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ansprech li { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; }
.ansprech-foto { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: block; }
.ansprech-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ansprech .member-tags { justify-content: flex-start; margin-top: 6px; }
input[type="file"]::file-selector-button {
  font: 700 .9rem var(--font-body); color: var(--petrol); background: #fff; border: 1.5px solid var(--petrol);
  border-radius: 999px; padding: .5em 1.1em; margin-right: .9em; cursor: pointer; transition: background .15s, color .15s;
}
input[type="file"]::file-selector-button:hover { background: var(--petrol); color: #fff; }

/* ======================================================================
   WordPress: dieselbe Gestaltung für die Blöcke des Editors
   (Gruppen, Überschriften, Absätze, Listen, Bilder, Knöpfe)
   ====================================================================== */

.wp-site-blocks { padding: 0; }
main#inhalt:focus { outline: none; }
.entry-content > :first-child { margin-top: 0; }
.jobs-card { text-decoration: none; }
.jobs-card:hover { color: #fff; }
.kontakt-infos { display: grid; gap: 20px; }

/* angemeldet: Kopfzeile unter der WordPress-Leiste */
.admin-bar .site-header { top: 32px; }
.admin-bar .search-overlay { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header, .admin-bar .search-overlay { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }

/* Hilfsklassen statt Inline-Stilen */
.mb-0 { margin-bottom: 0 !important; }
.m-0 { margin: 0 !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-12 { margin-bottom: 12px !important; }
.mb-14 { margin-bottom: 14px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-22 { margin-bottom: 22px !important; }
.mb-24 { margin-bottom: 24px !important; }
.mt-12 { margin-top: 12px !important; }
.mt-14 { margin-top: 14px !important; }
.mt-32 { margin-top: 32px !important; }
.mt-1em { margin-top: 1em !important; }
.pt-0 { padding-top: 0; }
.kontakt-layout { padding-top: clamp(32px, 5vw, 56px); }
.aspect-4-3 { aspect-ratio: 4 / 3; }
.mw-860 { max-width: 860px; }
.karte-tint { background: var(--tuerkis-50); }
.banner--text { grid-template-columns: 1fr; }
.lead--hell { color: #cfe6e4; }
.lead.mb-0 { margin: 0; }

/* Wellen-Linie vor der Dachzeile – im Editor steht dort nur Text */
.eyebrow:not(:has(> svg))::before {
  content: ""; width: 30px; height: 14px; flex: none; background: currentColor;
  -webkit-mask: var(--cv-welle) center / contain no-repeat; mask: var(--cv-welle) center / contain no-repeat;
}

/* ---------- Bilder ---------- */
figure.wp-block-image { margin: 0; }
.wp-block-image.page-hero-media img, .wp-block-image.rounded-img img, .wp-block-image.card-media img { width: 100%; height: 100%; object-fit: cover; }
.wp-block-image.banner-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wp-block-image.rounded-img { height: auto; }

/* ---------- Knöpfe ---------- */
.wp-block-buttons.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.wp-block-buttons > .wp-block-button { margin: 0; }
.wp-block-button .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 50px; padding: .8em 1.5em; border-radius: 999px; border: 2px solid transparent;
  font: 700 1rem/1.2 var(--font-body); text-decoration: none; cursor: pointer; word-break: normal;
  background: var(--orchid); color: #fff;
  transition: transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.wp-block-button .wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-button.is-style-cv-primaer .wp-block-button__link { background: var(--orchid); color: #fff; box-shadow: 0 10px 24px -12px rgba(176, 21, 127, .7); }
.wp-block-button.is-style-cv-primaer .wp-block-button__link:hover { background: var(--orchid-dark); color: #fff; }
.wp-block-button.is-style-cv-sekundaer .wp-block-button__link { border-color: var(--petrol); color: var(--petrol); background: transparent; box-shadow: none; }
.wp-block-button.is-style-cv-sekundaer .wp-block-button__link:hover { background: var(--petrol); color: #fff; }
.wp-block-button.is-style-cv-hell .wp-block-button__link { background: #fff; color: var(--petrol); box-shadow: none; }
.wp-block-button.is-style-cv-hell .wp-block-button__link:hover { background: var(--tuerkis-100); color: var(--petrol-dark); }
.wp-block-button.is-style-cv-umriss-hell .wp-block-button__link { border-color: #fff; color: #fff; background: transparent; box-shadow: none; }
.wp-block-button.is-style-cv-umriss-hell .wp-block-button__link:hover { background: #fff; color: var(--petrol); }
.wp-block-button[class*="cv-i-"] .wp-block-button__link::before {
  content: ""; width: 20px; height: 20px; flex: none; background: currentColor;
  -webkit-mask: var(--cv-icon) center / contain no-repeat; mask: var(--cv-icon) center / contain no-repeat;
}
@media (hover: none) { .wp-block-button .wp-block-button__link:hover { transform: none; } }
@media (max-width: 960px) { .nav .nav-cta .btn { justify-content: flex-start; } }

/* „Mehr erfahren →“ als Absatz mit Link */
p.link-arrow { display: flex; min-height: 0; margin: 0; }
p.link-arrow a { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; font-weight: 700; text-decoration: none; }
/* in Karten wie im Entwurf: 10px Abstand + 34px Linkhöhe; angetippt wird ohnehin die ganze Karte */
.card-body p.link-arrow a { min-height: 34px; }
p.link-arrow a::after {
  content: ""; width: 18px; height: 18px; flex: none; background: currentColor; transition: transform .2s ease;
  -webkit-mask: var(--cv-pfeil) center / contain no-repeat; mask: var(--cv-pfeil) center / contain no-repeat;
}
p.link-arrow a:hover::after { transform: translateX(4px); }

/* ---------- Listen mit Symbolen ---------- */
.wp-block-list { --cv-icon: initial; }
.chips > li { display: inline-flex; align-items: center; gap: .45em; padding: .45em .95em; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: .92rem; font-weight: 600; color: var(--ink); }
.facts > li { display: inline-flex; gap: .45em; align-items: center; font-weight: 600; }
.chips > li::before, .facts > li::before {
  content: ""; width: 16px; height: 16px; flex: none; background: var(--petrol);
  -webkit-mask: var(--cv-icon, var(--cv-haken)) center / contain no-repeat; mask: var(--cv-icon, var(--cv-haken)) center / contain no-repeat;
}
.facts > li::before { width: 18px; height: 18px; background: currentColor; }

.wp-block-list.is-style-cv-haken, .wp-block-list.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.wp-block-list.is-style-cv-haken > li, .wp-block-list.check-list > li { display: block; position: relative; padding-left: 30px; }
.wp-block-list.is-style-cv-haken > li::before, .wp-block-list.check-list > li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; background: var(--orchid);
  -webkit-mask: var(--cv-icon, var(--cv-haken)) center / contain no-repeat; mask: var(--cv-icon, var(--cv-haken)) center / contain no-repeat;
}
.wp-block-list.benefits > li { display: block; position: relative; padding-left: 46px; }
.wp-block-list.benefits > li::before {
  content: ""; position: absolute; left: 16px; top: 17px; width: 20px; height: 20px; background: var(--tuerkis);
  -webkit-mask: var(--cv-icon, var(--cv-haken)) center / contain no-repeat; mask: var(--cv-icon, var(--cv-haken)) center / contain no-repeat;
}
/* Zeilenhöhe wie im Entwurf (dort steht die Beschreibung in einem eigenen Element) */
.wp-block-list.service-list > li { color: var(--ink-soft); font-size: .97rem; line-height: 1.753rem; }
@media (max-width: 640px) { .wp-block-list.service-list > li { line-height: 1.65rem; } }
.wp-block-list.service-list > li strong { color: var(--ink); font-size: 1.07rem; line-height: 1.65; }

/* ---------- Karten, Kästen, Schritte ---------- */
.card:has(p.link-arrow a) { position: relative; transition: transform .25s ease, box-shadow .25s ease; }
.card p.link-arrow a::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.card:has(p.link-arrow a:hover) { transform: translateY(-4px); box-shadow: var(--shadow); }
.card:has(p.link-arrow a:hover) .card-media img { transform: scale(1.04); }
.card:has(p.link-arrow a:focus-visible) { outline: 3px solid var(--orchid); outline-offset: 3px; }
.card p.link-arrow a:focus-visible { outline: none; }
@media (hover: none) { .card:has(p.link-arrow a:hover) { transform: none; } .card:has(p.link-arrow a:hover) .card-media img { transform: none; } }
figure.card-media { margin: 0; }

.info-card h3[class*="cv-i-"]::before {
  content: ""; width: 22px; height: 22px; flex: none; background: var(--orchid);
  -webkit-mask: var(--cv-icon) center / contain no-repeat; mask: var(--cv-icon) center / contain no-repeat;
}
aside.wp-block-group { display: grid; gap: 20px; align-content: start; }

.usp-item.wp-block-group { display: block; position: relative; padding-left: 68px; min-height: 52px; }
.usp-item.wp-block-group::before { content: ""; position: absolute; left: 0; top: 0; width: 52px; height: 52px; border-radius: 16px; background: var(--tuerkis-100); }
.usp-item.wp-block-group::after {
  content: ""; position: absolute; left: 13px; top: 13px; width: 26px; height: 26px; background: var(--petrol);
  -webkit-mask: var(--cv-icon) center / contain no-repeat; mask: var(--cv-icon) center / contain no-repeat;
}

.notice.wp-block-group::before {
  content: ""; width: 20px; height: 20px; flex: none; margin-top: 2px; background: var(--petrol);
  -webkit-mask: var(--cv-icon, var(--cv-info)) center / contain no-repeat; mask: var(--cv-icon, var(--cv-info)) center / contain no-repeat;
}
.notice .wp-block-group > p:first-child { margin: 0; }
.notice .wp-block-group > p + p { margin: .4em 0 0; }

.steps.wp-block-group > * { background: #fff; border-radius: 22px; padding: 26px; position: relative; counter-increment: step; box-shadow: var(--shadow-soft); }
.steps.wp-block-group > *::before { content: counter(step); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--orchid); color: #fff; font-weight: 800; margin-bottom: 14px; font-size: 1.1rem; }
.steps.wp-block-group > * > p { margin: 0; color: var(--ink-soft); }

/* Mittagspausen-Hinweis: nur sichtbar, wenn gerade Mittagszeit ist */
p.live-badge:not(.is-live) { display: none; }

/* Hinweise zum Prüfen (Impressum, Datenschutz) */
p.draft-note { display: block; }

/* Formular: Senden läuft / Fehler */
button[aria-busy="true"] { opacity: .7; cursor: progress; }

/* Symbole für die Blöcke des Editors (aus dem Entwurf) */
:root {
  --cv-haken: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m5 12.5 4.5 4.5L19 7.5%22/%3E%3C/svg%3E");
  --cv-info: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 11v6M12 7.5v.5%22/%3E%3C/svg%3E");
  --cv-pfeil: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14M13 6l6 6-6 6%22/%3E%3C/svg%3E");
  --cv-welle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 30 14%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M1 4c4-3 8-3 12 0s8 3 12 0%22/%3E%3Cpath d=%22M1 8.5c4-3 8-3 12 0s8 3 12 0%22/%3E%3Cpath d=%22M6 13c3-2 6-2 9 0s6 2 9 0%22/%3E%3C/svg%3E");
}
.cv-i-phone { --cv-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2%22/%3E%3C/svg%3E"); }
.cv-i-mail { --cv-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%225%22 width=%2218%22 height=%2214%22 rx=%222%22/%3E%3Cpath d=%22m3 7 9 6 9-6%22/%3E%3C/svg%3E"); }
.cv-i-pin { --cv-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 21s-7-6.1-7-11.5A7 7 0 0 1 19 9.5C19 14.9 12 21 12 21z%22/%3E%3Ccircle cx=%2212%22 cy=%229.5%22 r=%222.5%22/%3E%3C/svg%3E"); }
.cv-i-clock { --cv-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 7v5l3 2%22/%3E%3C/svg%3E"); }
.cv-i-arrow { --cv-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14M13 6l6 6-6 6%22/%3E%3C/svg%3E"); }
.cv-i-check { --cv-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m5 12.5 4.5 4.5L19 7.5%22/%3E%3C/svg%3E"); }
.cv-i-leaf { --cv-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 19c0-8 5-13 15-14-1 10-6 15-14 15%22/%3E%3Cpath d=%22M5 19c3-4 6-7 10-9%22/%3E%3C/svg%3E"); }
.cv-i-bed { --cv-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 18v-7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v7M3 14h18M7 9V7a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v2%22/%3E%3C/svg%3E"); }
.cv-i-cup { --cv-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 9h11v5a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5zM16 10h1.5a2.5 2.5 0 0 1 0 5H16M8 3c0 1.5 1 1.5 1 3M12 3c0 1.5 1 1.5 1 3%22/%3E%3C/svg%3E"); }
.cv-i-heart { --cv-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 20s-7.5-4.6-7.5-10.2A4.3 4.3 0 0 1 12 7a4.3 4.3 0 0 1 7.5 2.8C19.5 15.4 12 20 12 20z%22/%3E%3C/svg%3E"); }
.cv-i-cap { --cv-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m2 9 10-5 10 5-10 5zM6 11v5c3 2 9 2 12 0v-5M22 9v6%22/%3E%3C/svg%3E"); }
.cv-i-gift { --cv-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%228%22 width=%2218%22 height=%225%22 rx=%221%22/%3E%3Cpath d=%22M5 13v8h14v-8M12 8v13M12 8S10.5 3 8 4s0 4 4 4c4 0 6.5-3 4-4s-4 4-4 4%22/%3E%3C/svg%3E"); }
.cv-i-menu { --cv-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 7h16M4 12h16M4 17h16%22/%3E%3C/svg%3E"); }
.cv-i-close { --cv-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 6l12 12M18 6 6 18%22/%3E%3C/svg%3E"); }
.cv-i-calendar { --cv-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%225%22 width=%2218%22 height=%2216%22 rx=%222%22/%3E%3Cpath d=%22M3 10h18M8 3v4M16 3v4%22/%3E%3C/svg%3E"); }
.cv-i-info { --cv-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 11v6M12 7.5v.5%22/%3E%3C/svg%3E"); }
.cv-i-shield { --cv-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3 5 6v5c0 4.5 3 8.3 7 10 4-1.7 7-5.5 7-10V6z%22/%3E%3Cpath d=%22m9 12 2 2 4-4%22/%3E%3C/svg%3E"); }
.cv-i-search { --cv-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%227%22/%3E%3Cpath d=%22m20 20-4-4%22/%3E%3C/svg%3E"); }
.cv-i-spark { --cv-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5 18 18M6 18l2.5-2.5M15.5 8.5 18 6%22/%3E%3C/svg%3E"); }
.cv-i-towel { --cv-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 4h12v16H6zM6 9h12M10 4v5%22/%3E%3C/svg%3E"); }
.cv-i-users { --cv-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%229%22 cy=%228%22 r=%223.5%22/%3E%3Cpath d=%22M2.5 20a6.5 6.5 0 0 1 13 0M16 4.5a3.5 3.5 0 0 1 0 7M21.5 20a6.5 6.5 0 0 0-4-6%22/%3E%3C/svg%3E"); }
.cv-i-facebook { --cv-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 8h3V4h-3a4 4 0 0 0-4 4v3H7v4h3v6h4v-6h3l1-4h-4V8.5a.5.5 0 0 1 .5-.5%22/%3E%3C/svg%3E"); }
.cv-i-wellen { --cv-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 9c3-2.5 6-2.5 9 0s6 2.5 9 0M3 15c3-2.5 6-2.5 9 0s6 2.5 9 0%22/%3E%3C/svg%3E"); }
.cv-i-flamme { --cv-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 21c-3.9 0-7-2.9-7-6.6 0-2.6 1.5-4.6 3.1-6.2.4 1.5 1.3 2.6 2.4 3.1C10.5 7.6 12 5 14.6 3c-.3 2.7.9 4.6 2.4 6.3 1.3 1.5 2 3.3 2 5.1 0 3.7-3.1 6.6-7 6.6z%22/%3E%3C/svg%3E"); }
.cv-i-tropfen { --cv-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3.5s-6 6.6-6 11a6 6 0 0 0 12 0c0-4.4-6-11-6-11z%22/%3E%3Cpath d=%22M9.5 15a2.5 2.5 0 0 0 2.5 2.5%22/%3E%3C/svg%3E"); }
.cv-i-globus { --cv-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9M12 3c-2.5 2.6-3.8 5.6-3.8 9s1.3 6.4 3.8 9%22/%3E%3C/svg%3E"); }
.cv-i-teilen { --cv-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2218%22 cy=%225.5%22 r=%222.5%22/%3E%3Ccircle cx=%226%22 cy=%2212%22 r=%222.5%22/%3E%3Ccircle cx=%2218%22 cy=%2218.5%22 r=%222.5%22/%3E%3Cpath d=%22m8.2 10.8 7.6-4.1M8.2 13.2l7.6 4.1%22/%3E%3C/svg%3E"); }
.cv-i-datei { --cv-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7 3h7l5 5v13H7z%22/%3E%3Cpath d=%22M14 3v5h5M10 13h6M10 17h6%22/%3E%3C/svg%3E"); }
.cv-i-stern { --cv-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m12 3.5 2.6 5.4 5.9.8-4.3 4.1 1 5.8L12 16.8l-5.2 2.8 1-5.8-4.3-4.1 5.9-.8z%22/%3E%3C/svg%3E"); }