@font-face { font-family: Manrope; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/Manrope-VariableFont_wght.woff2') format('woff2'); }
:root {
  /* Gleiche Farben wie die Startseite (Theme der Live-Seite) */
  --orange: #ff9900;
  --orange-ink: #9c5300;
  --petal: #f3a712;
  --petal-pale: #f6eda5;
  --cream: #fffeed;
  --paper: #fbfaf3;
  --band: #f2f2f2;
  --base: #ffffff;
  --grey: #686868;
  --ink: #2f2c28;
  --button-ink: #382110;
  --pink: #e52574;
  --pink-ink: #b0135a;
  --pink-pale: #fde3ee;
  --line: #e4e0d2;
  --line-strong: #8b8274;
  --font: "Manrope", "Segoe UI", system-ui, sans-serif;
  --step--1: clamp(0.84rem, 0.8rem + 0.15vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
  --step-2: clamp(1.5rem, 1.3rem + 0.9vw, 2.1rem);
  --step-3: clamp(2rem, 1.55rem + 2.1vw, 3.4rem);
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --header-h: 68px;
  --bar-h: 72px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
@media (min-width: 900px) { :root { --header-h: 92px; } }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--base); color: var(--grey);
  font-family: var(--font); font-size: var(--step-0); line-height: 1.65;
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 900px) { body { padding-bottom: 0; } }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { color: var(--ink); line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -0.015em; }
h1 { font-size: var(--step-3); font-weight: 800; }
h2 { font-size: var(--step-2); font-weight: 800; }
h3 { font-size: var(--step-1); font-weight: 700; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--orange-ink); text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--button-ink); }
::selection { background: var(--petal-pale); color: var(--ink); }
:focus-visible { outline: 3px solid var(--button-ink); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 1160px; margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; }
.skip:focus { top: 12px; }
.skip:hover { color: #fff; }

/* Buttons wie auf der Startseite */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0.7em 1.4em; border-radius: 999px; border: 0;
  font: 800 1rem/1.1 var(--font); white-space: nowrap; text-decoration: none !important; cursor: pointer;
  transition: transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms, background-color 160ms;
}
.btn-primary { background: var(--orange); color: var(--button-ink); box-shadow: 0 6px 16px -8px rgba(156, 83, 0, 0.7); }
.btn-primary:hover { background: #ffa826; color: var(--button-ink); transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(156, 83, 0, 0.75); }
.btn-ghost { background: var(--base); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn-ghost:hover { background: var(--cream); color: var(--ink); }
.btn-primary:active, .btn-ghost:active { transform: scale(.97); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn-lg { min-height: 58px; padding: 0.8em 1.7em; font-size: 1.1rem; }

/* Kopfzeile */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--band); padding-top: env(safe-area-inset-top, 0px); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); }
.logo { display: block; padding-block: 8px; }
.logo img { width: 132px; height: auto; }
@media (min-width: 900px) { .logo img { width: 172px; } }
.nav { display: none; }
@media (min-width: 900px) {
  .nav { display: flex; gap: 28px; font-weight: 700; font-size: 0.95rem; }
  .nav a { color: var(--ink); text-decoration: none; padding-block: 8px; border-bottom: 2px solid transparent; }
  .nav a:hover { border-bottom-color: var(--orange); }
  .nav a[aria-current="page"] { border-bottom-color: var(--pink); }
}
.header-actions { display: flex; align-items: center; gap: 10px; }
.header-phone { display: none; }
@media (min-width: 900px) { .header-phone { display: inline-flex; } }
.header-actions .btn { min-height: 44px; padding: 0.6em 1.1em; font-size: 0.95rem; }

/* Kopf der Seite */
.intro { position: relative; overflow: hidden; background: var(--cream); }
.intro .wrap { display: grid; gap: 22px; padding-block: 28px 30px; position: relative; z-index: 1; }
@media (min-width: 900px) { .intro .wrap { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 56px; align-items: start; padding-block: 56px 44px; } }
/* Gleiche Spalten wie der Buchungsbereich, damit der Hinweis über „So läuft die Buchung“ steht */
@media (min-width: 1000px) { .intro .wrap { grid-template-columns: minmax(0, 720px) minmax(0, 1fr); } }
.intro-copy { display: grid; gap: 14px; }
.intro .lead { font-size: var(--step-1); line-height: 1.5; max-width: 36ch; }
.squiggle { position: relative; white-space: nowrap; }
.squiggle svg { position: absolute; left: -2%; bottom: -0.2em; width: 104%; height: 0.38em; color: var(--pink); overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .squiggle path { stroke-dasharray: 220; stroke-dashoffset: 220; animation: draw 900ms 300ms var(--ease-out) forwards; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
}

/* Zahnschmerzen: im Kopf, damit man es sofort findet */
.urgent { background: var(--base); border-radius: 24px; padding: 20px 22px; display: grid; gap: 8px; box-shadow: 0 12px 32px -20px rgba(56, 33, 16, 0.35); font-size: var(--step-0); line-height: 1.55; color: var(--ink); }
.urgent h2 { font-size: var(--step-1); }
.urgent .tel { font-weight: 800; color: var(--ink); white-space: nowrap; }

/* Blütenblätter wie auf der Startseite */
.petal { position: absolute; width: var(--s, 90px); aspect-ratio: 1; border-radius: 0 100% 0 100%; background: var(--c, var(--orange)); pointer-events: none; z-index: 0; }
.urgent-m { margin-top: 16px; }
@media (min-width: 900px) { .urgent-m { display: none; } }
@media (max-width: 899px) { .urgent-d { display: none; } }
.intro .p1 { --s: clamp(64px, 10vw, 128px); --c: var(--petal); right: -26px; top: -18px; rotate: 200deg; }

/* Buchungstisch */
.desk-section { padding-block: 0 clamp(56px, 8vw, 96px); background: linear-gradient(var(--cream) 0 120px, var(--base) 120px); }
.desk { display: grid; gap: 28px; }
@media (min-width: 1000px) { .desk { grid-template-columns: minmax(0, 720px) minmax(0, 1fr); gap: 56px; align-items: start; } }

.booker {
  position: relative; background: var(--cream); border-radius: 24px;
  /* clip statt hidden: sonst kann eTermio den Kasten beim Springen zu einem Feld verschieben */
  overflow: clip; container: booker / inline-size; max-width: 720px;
  box-shadow: 0 0 0 1px var(--line), 0 24px 48px -32px rgba(56, 33, 16, 0.55);
  min-height: 420px; display: grid;
  transition: min-height 600ms var(--ease-out);
}
.booker[data-state="loading"], .booker[data-state="ready"] { min-height: var(--frame-h); }
:root { --frame-h: max(600px, calc(100svh - var(--header-h) - 24px)); }
@media (min-width: 900px) { :root { --frame-h: min(820px, max(640px, calc(100svh - var(--header-h) - 40px))); } }

.consent { position: relative; display: grid; gap: 18px; align-content: center; justify-items: start; padding: clamp(24px, 5vw, 56px); z-index: 1; }
.consent h2 { max-width: 18ch; }
.consent .what { color: var(--ink); max-width: 44ch; }
.services { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 560px; }
.services li { background: var(--base); border-radius: 999px; padding: 5px 13px; font-size: 0.86rem; font-weight: 700; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.consent .note { font-size: var(--step--1); max-width: 52ch; color: var(--grey); position: relative; z-index: 1; }
.consent .alt { font-size: var(--step--1); font-weight: 700; color: var(--ink); }
.consent .alt a { color: var(--ink); }
.booker .petal { opacity: .9; }
.booker .p1 { --s: clamp(110px, 16vw, 190px); --c: var(--orange); right: -46px; bottom: -52px; rotate: 160deg; }
.booker .p2 { --s: clamp(60px, 8vw, 96px); --c: var(--petal-pale); right: clamp(70px, 12vw, 150px); bottom: -30px; rotate: 100deg; }
.booker .p3 { --s: 38px; --c: var(--pink); right: 28px; top: 26px; rotate: 20deg; }
@media (max-width: 640px) { .booker .p2, .booker .p1, .booker .p3 { display: none; } }
.booker .p1 { right: -90px; bottom: -110px; }
@media (max-width: 899px) {
  .intro .wrap { gap: 14px; padding-block: 16px 22px; }
  .intro-copy { gap: 10px; }
  .intro .lead { font-size: var(--step-0); }
  .urgent { padding: 12px 16px; gap: 4px; border-radius: 18px; }
  .urgent h2 { font-size: 1rem; }
  .consent { gap: 14px; padding: 22px 20px 26px; }
  .consent h2 { font-size: var(--step-1); }
  .consent .note { order: 2; margin-top: -4px; } .consent .what { order: 3; } .consent .services { order: 4; } .consent .alt { order: 5; }
  .consent .btn-lg { order: 1; width: 100%; }
  .consent h2 { order: 0; }
}

/* Rahmen mit eTermio */
.frame-wrap { position: absolute; inset: 0; display: none; overflow: clip; --bleed: 17px; }
/* eTermio zeichnet im Rahmen sein Pop-up: Abdunklung plus Karte mit 1rem Rand (unter 576px 0.25rem) und 1px Linie oben, links, rechts.
   Der Rahmen ragt um Rand plus Linie über den Kasten hinaus, so ist nur das Innere der Karte zu sehen.
   Breite bleibt unter 768px, sonst begrenzt eTermio die Karte auf 720px und zentriert sie. */
@container booker (width < 544px) { .frame-wrap { --bleed: 5px; } }
.booker[data-state="loading"] .frame-wrap, .booker[data-state="ready"] .frame-wrap { display: block; }
.booker[data-state="loading"] .consent, .booker[data-state="ready"] .consent, .booker[data-state="error"] .consent { display: none; }
#etermio-frame { position: absolute; left: calc(-1 * var(--bleed)); top: -17px; width: calc(100% + 2 * var(--bleed)); height: calc(100% + 17px); border: 0; display: block; background: var(--cream); opacity: 0; transition: opacity 400ms var(--ease-out); }
.booker[data-state="ready"] #etermio-frame { opacity: 1; }

/* Ladeanzeige: vier Blütenblätter, die sich zur Logo-Blüte drehen */
.loader { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; color: var(--ink); font-weight: 700; transition: opacity 300ms; }
.booker[data-state="ready"] .loader { opacity: 0; pointer-events: none; }
.bloom { position: relative; width: 72px; height: 72px; }
.bloom i { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -30px 0 0 0; border-radius: 0 100% 0 100%; background: var(--c); transform-origin: 0 100%; rotate: var(--r); }
.bloom i:nth-child(1) { --c: var(--orange); --r: 0deg; }
.bloom i:nth-child(2) { --c: var(--petal); --r: 90deg; }
.bloom i:nth-child(3) { --c: var(--pink); --r: 180deg; }
.bloom i:nth-child(4) { --c: var(--petal-pale); --r: 270deg; }
@media (prefers-reduced-motion: no-preference) {
  .bloom { animation: turn 1600ms var(--ease-out) infinite; }
  .bloom i { animation: fold 1600ms var(--ease-out) infinite; }
  @keyframes turn { to { rotate: 90deg; } }
  @keyframes fold { 0% { scale: .4; } 45%, 70% { scale: 1; } 100% { scale: .4; } }
}

/* Fehler */
.failed { display: none; position: relative; z-index: 1; padding: clamp(24px, 5vw, 56px); align-content: center; justify-items: start; gap: 14px; }
.booker[data-state="error"] .failed { display: grid; }
.failed h2 { font-size: var(--step-1); }
.failed .row { display: flex; flex-wrap: wrap; gap: 12px; }

.frame-foot { max-width: 720px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 16px; margin-top: 10px; font-size: var(--step--1); }
.frame-foot a { color: var(--ink); font-weight: 700; }
.frame-foot button { min-height: 44px; padding-inline: 4px; font: inherit; font-weight: 700; color: var(--ink); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; cursor: pointer; min-height: 24px; }

/* Seitenspalte */
.aside { display: grid; gap: 28px; align-content: start; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding: 12px 0 12px 46px; min-height: 58px; border-bottom: 1px solid var(--line); font-size: var(--step--1); line-height: 1.5; }
.bring { margin-top: 18px; font-size: var(--step--1); color: var(--ink); font-weight: 600; }
.steps li::before { position: absolute; left: 0; top: 12px; content: counter(s); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 0 100% 0 100%; background: var(--c); color: var(--button-ink); font-weight: 800; font-size: 0.9rem; }
.steps li:nth-child(1) { --c: var(--orange); } .steps li:nth-child(2) { --c: var(--petal); } .steps li:nth-child(3) { --c: var(--petal-pale); }
.steps strong { display: block; color: var(--ink); font-size: var(--step-0); line-height: 1.45; }
.steps strong + br { display: none; }
.call { display: grid; gap: 6px; }
.call .big { font-size: var(--step-2); font-weight: 800; color: var(--ink); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }
.call .big:hover { color: var(--orange-ink); }
.call p { font-size: var(--step--1); }
@media (max-width: 999px) { .aside { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 28px 40px; } }

/* Fußzeile */
.site-footer { background: var(--band); padding-block: 48px; font-size: var(--step--1); }
.footer-grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; } }
.site-footer h2 { font-size: 1rem; margin-bottom: 10px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
address { font-style: normal; color: var(--ink); font-weight: 700; line-height: 1.45; }
.copyright { margin-top: 32px; padding-top: 20px; border-top: 1px solid #dcdcdc; }

/* Aktionsleiste unten, nur Handy; verschwindet, solange die Buchung im Bild ist */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--line);
  padding: 10px var(--gutter-r) calc(10px + env(safe-area-inset-bottom, 0px)) var(--gutter-l);
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  box-shadow: 0 -8px 24px -18px rgba(56, 33, 16, 0.5);
}
.action-bar .btn { width: 100%; min-height: 52px; }
@media (min-width: 900px) { .action-bar { display: none; } }
html.js .action-bar { transition: translate 320ms var(--ease-out), visibility 0s linear 320ms; }
html.js .action-bar:not(.show) { translate: 0 120%; visibility: hidden; }
html.js .action-bar.show { transition: translate 320ms var(--ease-out), visibility 0s; }
@media (prefers-reduced-motion: reduce) { html.js .action-bar, html.js .action-bar.show { transition: none; } }