/* Schriften liegen auf der eigenen Seite (keine Verbindung zu Google Fonts, DSGVO) */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/poppins-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/poppins-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/poppins-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300 500; font-display: swap; src: url('/assets/fonts/roboto-variabel.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* =====================================================================
   Zahnarzt Zotzmann – Landingpage Keramikimplantate
   CI übernommen von zahnarzt-zotzmann.de:
   Dunkelgrün #20362A · Lindgrün #97C445 · Creme #FAF8F2 · Nebel #DDE3E0
   Headlines: Poppins 600/700 (uppercase) · Fließtext: Roboto 300/400/500
   ===================================================================== */

:root {
  --green: #20362A;
  --green-80: rgba(32, 54, 42, .8);
  --green-10: rgba(32, 54, 42, .08);
  --lime: #97C445;
  --lime-dark: #7FA936;
  --lime-10: rgba(151, 196, 69, .12);
  --cream: #FAF8F2;
  --mist: #DDE3E0;
  --ink: #1D1D21;
  --gold: #726542;
  --titan: #8E959B;
  --titan-dark: #5F686F;
  --white: #FFFFFF;
  --red: #C8553D;

  --font-head: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Roboto', 'Helvetica Neue', Arial, sans-serif;

  --radius: 0;
  --radius-sm: 0;
  --line: 1px solid rgba(32, 54, 42, .22);
  --line-soft: 1px solid rgba(32, 54, 42, .12);
  --pill: 100px;
  --shadow: none;
  --shadow-sm: none;
  --container: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --section: clamp(64px, 9vw, 120px);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  overflow-x: clip; /* verhindert horizontales Scrollen durch dekorative Elemente (bricht kein position:sticky) */
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  color: var(--green);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
strong, b { font-weight: 500; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--green); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 1000; }
.skip-link:focus { left: 8px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, .h1, .h2, .h3 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 .5em;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: .01em;
}
h1, .h1 { font-size: clamp(1.9rem, 4vw, 3rem); }
h1, h2, h3, h4, .h1, .h2, .h3, .eyebrow { text-wrap: balance; overflow-wrap: break-word; }
h2, .h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); }
h3, .h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 600; text-transform: none; }
p { margin: 0 0 1em; text-wrap: pretty; hyphens: auto; -webkit-hyphens: auto; }
.section-head p, .hint, .stage-text, .special__body p, figcaption { hyphens: manual; -webkit-hyphens: manual; }
p:last-child { margin-bottom: 0; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 300; text-wrap: balance; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 600; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--lime-dark);
  margin-bottom: 14px;
}
.eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--green); }
.eyebrow--center { justify-content: center; }
.eyebrow--center::after { content: ''; width: 28px; height: 1px; background: var(--green); }
.section--green .eyebrow::before, .section--green .eyebrow::after, .cta-band .eyebrow::before { background: var(--lime); }
.text-center { text-align: center; }
.muted { color: var(--green-80); }
.accent { color: var(--lime-dark); }

/* ---------- Layout ---------- */
.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.container--narrow { max-width: 820px; }
.section { padding-block: var(--section); position: relative; }
.section--cream { background: var(--cream); }
.section--green { background: var(--green); color: var(--cream); overflow: hidden; }
.section--green h2, .section--green h3, .section--green .eyebrow { color: var(--cream); }
.section--green .eyebrow { color: var(--lime); }
.section-head { max-width: 760px; margin: 0 auto clamp(36px, 5vw, 64px); text-align: center; }
.grid { display: grid; gap: clamp(24px, 4vw, 56px); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr 1fr; }
@media (min-width: 760px) {
  .grid--2 { grid-template-columns: 1fr 1fr; align-items: center; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Buttons (Pill, wie Homepage) ---------- */
.btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 15px 32px; border-radius: var(--pill);
  font-family: var(--font-head); font-weight: 600; font-size: .85rem; letter-spacing: .06em;
  text-transform: uppercase; line-height: 1.2; text-align: center;
  background: var(--lime); color: var(--cream);
  border: 1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  box-shadow: none;
}
.btn:hover { transform: translateY(-2px); background: var(--lime-dark); }
.btn:active { transform: translateY(0); }
.btn__label { display: block; }
.btn small { font-family: var(--font-body); font-weight: 400; font-size: .72rem; letter-spacing: .02em; text-transform: none; opacity: .95; }
.btn--outline { background: transparent; color: var(--green); border-color: var(--green); box-shadow: none; }
.btn--outline:hover { background: var(--green); color: var(--cream); box-shadow: none; }
.btn--dark { background: var(--green); color: var(--cream); }
.btn--dark:hover { background: #172A1F; }
.btn--lg { padding: 18px 40px; font-size: .92rem; line-height: 1.3; }
.btn--block { width: 100%; }
.btn--wide { width: 100%; padding: 16px 28px; font-size: .95rem; margin-top: 22px; }
.btn--wide .btn__label { white-space: nowrap; }
.btn--wide small { font-size: .8rem; margin-top: 2px; }
@media (max-width: 479px) { .btn--wide .btn__label { white-space: normal; } }
.header__cta { white-space: nowrap; }
.show-sm { display: none; }
@media (max-width: 560px) { .hide-sm { display: none; } .show-sm { display: inline; } }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.phone-hint { font-size: .95rem; color: var(--green-80); }
.phone-hint a { color: var(--lime-dark); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 248, 242, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--line-soft);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.header__logo img { width: clamp(150px, 22vw, 230px); height: auto; }
.header__nav { display: none; gap: 28px; font-family: var(--font-head); font-weight: 500; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.header__nav a { position: relative; padding: 6px 0; }
.header__nav a::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--lime); transition: width .3s var(--ease); }
.header__nav a:hover::after { width: 100%; }
.header__actions { display: flex; align-items: center; gap: 12px; }
.header__phone { display: none; font-weight: 500; font-size: .95rem; align-items: center; gap: 8px; }
.header__phone svg { width: 18px; height: 18px; }
.header .btn { padding: 12px 22px; font-size: .75rem; box-shadow: none; }
@media (min-width: 980px) {
  .header__nav { display: flex; }
  .header__phone { display: inline-flex; }
}

/* ---------- Seiten-Hero (Unterseiten) ---------- */
.page-hero { background: var(--cream); position: relative; overflow: hidden; padding-block: clamp(40px, 6vw, 80px) clamp(36px, 5vw, 64px); border-bottom: var(--line-soft); }
.page-hero .rings { right: -10vw; top: -12vw; width: 44vw; height: 44vw; max-width: 600px; max-height: 600px; }
.page-hero__inner { position: relative; z-index: 1; max-width: 820px; }
.page-hero h1 { font-size: clamp(1.7rem, 3.4vw, 2.7rem); margin-bottom: 14px; }
.page-hero .lead { max-width: 700px; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; font-size: .8rem; color: var(--green-80); margin: 0 0 18px; padding: 0; list-style: none; }
.breadcrumb a:hover { color: var(--lime-dark); }
.breadcrumb li + li::before { content: '/'; margin-right: 6px; opacity: .5; }
.page-hero--person { padding-bottom: 0; }
.page-hero--person .page-hero__grid { display: grid; gap: 24px; align-items: end; position: relative; z-index: 1; }
@media (min-width: 800px) { .page-hero--person .page-hero__grid { grid-template-columns: 1.1fr .9fr; gap: 48px; } }
.page-hero--person .page-hero__text { padding-bottom: clamp(36px, 5vw, 64px); }
.page-hero--person img { width: min(440px, 100%); margin: 0 auto; display: block; }
.check-list { display: grid; gap: 12px; margin: 18px 0 26px; }
.check-list li { display: block; position: relative; padding-left: 38px; font-weight: 400; }
.check-list li::before { content: ''; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border: 1px solid var(--lime); background: var(--lime-10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237FA936' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / 14px no-repeat; }
.focus-list { display: grid; gap: 0; border-top: var(--line); }
.focus-list li { padding: 16px 0; border-bottom: var(--line); display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.focus-list b { display: block; font-family: var(--font-head); font-weight: 600; font-size: 1rem; }
.focus-list span { font-size: .95rem; color: var(--green-80); }
.focus-list i { font-family: var(--font-head); font-weight: 700; font-style: normal; font-size: .8rem; letter-spacing: .1em; color: var(--lime-dark); padding-top: 4px; }

/* ---------- Hero ---------- */
.hero { background: var(--cream); overflow: hidden; position: relative; padding-block: clamp(40px, 6vw, 88px) clamp(48px, 7vw, 100px); }
.rings { position: absolute; pointer-events: none; z-index: 0; }
.rings svg { width: 100%; height: 100%; display: block; transform: translateY(var(--ry, 0px)) rotate(var(--rr, 0deg)); transition: transform .12s linear; will-change: transform; }
.rings circle:nth-child(2) { stroke-dasharray: 6 10; }
.rings circle:nth-child(4) { stroke-dasharray: 2 8; }
.rings circle { fill: none; stroke: var(--green); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .16; }
.section--green .rings circle, .cta-band .rings circle { stroke: var(--cream); opacity: .14; }
.hero .rings { right: -12vw; top: -14vw; width: 52vw; height: 52vw; max-width: 720px; max-height: 720px; }
.hero__grid { display: grid; gap: 40px; align-items: center; position: relative; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 64px; } }
.hero h1 { margin-bottom: 18px; font-size: clamp(1.5rem, 2.9vw, 2.6rem); letter-spacing: 0; }
.nowrap { white-space: nowrap; }
.br-lg { display: none; }
@media (min-width: 700px) { .br-lg { display: inline; } }
.hero h1 span { color: var(--lime-dark); }
.hero .lead { max-width: 560px; margin-bottom: 28px; }
.hero__trust { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.avatars { display: flex; }
.avatars img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--cream); object-fit: cover; margin-left: -12px; background: var(--mist); }
.avatars img:first-child { margin-left: 0; }
.stars { color: #F5B301; letter-spacing: 2px; font-size: 1rem; line-height: 1; }
.hero__trust-text { font-size: .9rem; line-height: 1.35; }
.hero__trust-text strong { display: block; font-weight: 500; }
.hero__seals { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 32px; margin-top: clamp(36px, 5vw, 56px); padding-top: 28px; border-top: var(--line); }
.hero__seals img { height: 84px; width: auto; object-fit: contain; transition: transform .35s var(--ease); }
.hero__seals img:hover { transform: translateY(-4px) scale(1.04); }
.hero__seals .g-rating { display: flex; flex-direction: column; align-items: center; font-size: .8rem; color: var(--green-80); }
.hero__seals .g-rating b { font-size: 1.35rem; font-weight: 700; color: var(--green); }
.video-frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--green); z-index: 2; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hero__video-wrap { position: relative; }
.hero__media .phone-hint { margin-top: 12px; }
.hero__video-wrap::before, .hero__video-wrap::after { /* Doppelter Offset-Rahmen wie auf der Homepage */
  content: ''; position: absolute; border: 1px solid var(--green); z-index: 1; pointer-events: none;
}
.hero__video-wrap::before { inset: -16px 16px 16px -16px; opacity: .55; }
.hero__video-wrap::after { inset: 20px -20px -20px 20px; opacity: .35; }

/* ---------- YouTube Facade (lädt erst bei Klick – DSGVO & Performance) ---------- */
.yt { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000 center / cover no-repeat; cursor: pointer; }
.yt img { width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: transform .6s var(--ease); }
.yt:hover img { transform: scale(1.04); }
.yt__play { position: absolute; inset: 0; display: grid; place-items: center; }
.yt__play span {
  width: 74px; height: 74px; border-radius: 50%; background: var(--lime); display: grid; place-items: center;
  transition: transform .3s var(--ease);
}
.yt:hover .yt__play span { transform: scale(1.08); }
.yt__play svg { width: 28px; height: 28px; fill: var(--cream); margin-left: 4px; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt__hint { position: absolute; left: 14px; bottom: 12px; font-size: .72rem; color: rgba(255,255,255,.85); background: rgba(0,0,0,.45); padding: 4px 10px; }

/* ---------- Bild-Rahmen (Doppel-Kontur wie Homepage) ---------- */
.frame { position: relative; display: inline-block; width: 100%; }
.frame img { width: 100%; object-fit: cover; position: relative; z-index: 2; display: block; }
/* Gestaltungskasten wie im Original (gs1.svg: zwei versetzte Rahmen, #B3C1B9), 88 % der Bildbreite, 16 px nach oben/unten, nach rechts versetzt */
.frame::before { content: ''; position: absolute; z-index: 1; pointer-events: none; top: -16px; bottom: -16px; left: 23.5%; width: 88%;
  background: url(/assets/img/deko/gs1.svg) no-repeat center / 100% 100%; }
.frame--flip::before { left: auto; right: 23.5%; }
.frame::after { content: none; }
@media (max-width: 759px) { .frame::before { display: none; } }

/* ---------- Cards ---------- */
.card { background: var(--white); padding: clamp(24px, 3vw, 36px); border: var(--line); position: relative; }
.card::after { content: ''; position: absolute; left: 0; top: 0; width: 40px; height: 2px; background: var(--lime); }
.card--cream { background: var(--cream); }
.card--feature { background: var(--green); border-color: var(--green); color: rgba(250,248,242,.85); }
.card--feature::after { background: var(--lime); }
.card.card--feature h3 { color: var(--cream); }
.card.card--feature p { color: rgba(250,248,242,.8); }
.card--feature .card__icon { border-color: rgba(250,248,242,.35); color: var(--cream); }
.card--feature .card__icon .ic-accent { stroke: var(--lime); }
.card--feature:hover { border-color: var(--lime); }
.card--feature:hover .card__icon { background: var(--lime); border-color: var(--lime); color: var(--green); }
.card--feature:hover .card__icon .ic-accent { stroke: var(--green); }
.card__badge {
  position: absolute; right: 0; top: 0; background: var(--lime); color: var(--green);
  font-family: var(--font-head); font-weight: 700; font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; padding: 6px 12px;
}
.card__big {
  display: block; font-family: var(--font-head); font-weight: 700; line-height: .9;
  font-size: clamp(2.6rem, 5vw, 3.4rem); color: var(--lime); letter-spacing: -.03em;
  margin: 4px 0 10px; font-variant-numeric: tabular-nums;
}
.card { transition: transform .4s var(--ease), border-color .4s var(--ease); }
.card:hover { transform: translateY(-6px); border-color: var(--green); }
.card:hover .card__icon { background: var(--green); color: var(--cream); border-color: var(--green); }
.card:hover .card__icon .ic-accent { stroke: var(--lime); }
.card__icon { transition: background .3s, color .3s; }
.card__icon { width: 72px; height: 72px; border: 1px solid rgba(32,54,42,.35); display: grid; place-items: center; margin-bottom: 20px; color: var(--green); position: relative; }
.card__icon::after { content: ''; position: absolute; right: -5px; bottom: -5px; width: 10px; height: 10px; background: var(--lime); }
.card__icon .ic-accent { stroke: var(--lime-dark); }
.card__icon svg { width: 52px; height: 52px; }
.card h3 { margin-bottom: 8px; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; font-size: 1.05rem; }
.card p { color: var(--green-80); font-size: 1rem; }

/* ---------- Vorteile (Benefits) ---------- */
.benefits { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); justify-content: center; }
@media (min-width: 640px) { .benefits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .benefits { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Titan vs. Keramik – Scrollytelling ---------- */
.compare { background: var(--cream); }
.compare--plain { background: var(--white); }
.compare--plain .compare__visual { background: var(--white); }
@media (max-width: 899px) { .compare--plain .compare__visual { background: var(--white); } }
.compare__layout { display: grid; gap: 28px; }
@media (min-width: 900px) { .compare__layout { grid-template-columns: 420px 1fr; gap: 64px; align-items: start; } }

.compare__visual {
  position: sticky; top: 76px; z-index: 5;
  background: var(--cream); padding: 12px 0 16px;
}
@media (min-width: 900px) { .compare__visual { top: 110px; padding: 0; } }
.implant-stage {
  position: relative; overflow: hidden;
  background: var(--white);
  border: var(--line);
  display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 14px; padding: 14px 18px;
  transition: background .6s;
}
@media (min-width: 900px) { .implant-stage { grid-template-columns: 1fr; text-align: center; padding: 36px 28px 28px; gap: 22px; } }
.implant-svg { width: 100px; height: 150px; margin: 0 auto; }
@media (min-width: 900px) { .implant-svg { width: 220px; height: 330px; } }
.implant-svg .i-body, .implant-svg .i-thread { transition: fill .7s var(--ease), stroke .7s var(--ease); }
.implant-svg .i-body { fill: url(#bodyTitan); }
.implant-svg .i-abut { fill: #6F777E; transition: fill .7s var(--ease); }
.implant-svg .i-thread { stroke: #3F464C; opacity: .8; }
.implant-svg .i-shadow { fill: var(--titan-dark); opacity: .55; transition: opacity .7s var(--ease); }
.implant-svg .i-bact { fill: var(--red); opacity: .8; transition: opacity .5s var(--ease); }
.implant-svg .i-glow { opacity: 0; transition: opacity .7s var(--ease); }
.compare[data-phase="keramik"] .implant-svg .i-body { fill: url(#bodyKeramik); }
.compare[data-phase="keramik"] .implant-svg .i-abut { fill: #E9E6DC; }
.compare[data-phase="keramik"] .implant-svg .i-thread { stroke: #B9B5A6; }
.compare[data-phase="keramik"] .implant-svg .i-shadow { opacity: 0; }
.compare[data-phase="keramik"] .implant-svg .i-bact { opacity: 0; }
.compare[data-phase="keramik"] .implant-svg .i-glow { opacity: 1; }
.compare[data-phase="keramik"] .implant-stage { border-color: var(--lime); }

.stage-label { display: flex; flex-direction: column; gap: 6px; }
@media (min-width: 900px) { .stage-label { align-items: center; } }
.stage-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--pill);
  font-family: var(--font-head); font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--titan); color: #fff; transition: background .6s, color .6s; width: max-content;
}
.stage-pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.compare[data-phase="keramik"] .stage-pill { background: var(--lime); color: var(--cream); }
.stage-text { font-size: .85rem; line-height: 1.35; color: var(--green-80); min-height: 2.6em; }
@media (min-width: 900px) { .stage-text { font-size: 1rem; max-width: 300px; } }
.stage-text span { display: none; }
.compare[data-phase="titan"] .stage-text .t-titan, .compare[data-phase="keramik"] .stage-text .t-keramik { display: block; }
.stage-progress { height: 2px; background: rgba(32,54,42,.15); overflow: hidden; margin-top: 4px; }
.stage-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--titan), var(--lime)); transition: width .2s linear; }

.compare__stream { display: grid; gap: 14px; }
.compare__stream .stream-head { padding: 8px 0 4px; }
.compare__stream .stream-head h3 { margin: 0 0 4px; }
.compare__stream .stream-head p { font-size: .95rem; color: var(--green-80); margin: 0; }
.point {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start;
  background: var(--white); padding: 18px 18px 18px 16px;
  border: var(--line-soft); border-left: 2px solid var(--titan);
  opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.point.is-visible { opacity: 1; transform: none; }
.point:hover { transform: translateX(6px); border-color: var(--green); }
.point--plus:hover { border-left-color: var(--lime); }
.point__icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.point__icon svg { width: 20px; height: 20px; }
.point--minus .point__icon { border: 1px solid var(--red); color: var(--red); }
.point--neutral .point__icon { border: 1px solid rgba(32,54,42,.35); color: var(--green-80); }
.point--plus .point__icon { border: 1px solid var(--lime); color: var(--lime-dark); }
.point h4 { margin: 4px 0 4px; }
.point p { margin: 0; font-size: .95rem; color: var(--green-80); }
.point--plus { border-left-color: var(--lime); }

.verdict {
  background: var(--green); color: var(--cream); padding: clamp(24px, 3vw, 36px);
  display: grid; gap: 10px; margin: 10px 0; position: relative; overflow: hidden;
  opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.verdict.is-visible { opacity: 1; transform: none; }
.verdict::after { content: ''; position: absolute; right: -70px; top: -70px; width: 220px; height: 220px; border-radius: 50%; border: 1px solid rgba(250,248,242,.25); }
.verdict::before { content: ''; position: absolute; right: -30px; top: -30px; width: 140px; height: 140px; border-radius: 50%; border: 1px solid rgba(250,248,242,.25); }
.verdict .eyebrow { color: var(--lime); margin-bottom: 4px; }
.verdict h3 { color: var(--cream); font-size: 1.35rem; margin: 0; }
.verdict p { color: rgba(250,248,242,.85); margin: 0; font-size: 1rem; }
.verdict .arrow { width: 44px; height: 44px; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-table { width: 100%; min-width: 520px; border-collapse: separate; border-spacing: 0; margin-top: clamp(36px, 5vw, 64px); background: var(--white); border: var(--line); font-size: 1rem; font-weight: 400; color: var(--green); }
.compare-table td:first-child { font-weight: 500; }
.compare-table td:nth-child(2) { color: var(--titan-dark); }
.compare-table th, .compare-table td { padding: 14px 16px; text-align: left; border-bottom: var(--line-soft); }
.compare-table th { font-family: var(--font-head); font-weight: 600; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; background: var(--cream); }
.compare-table th:nth-child(3) { background: var(--lime-10); color: var(--lime-dark); }
.compare-table td:nth-child(3) { background: rgba(151,196,69,.06); font-weight: 500; }
.compare-table tr:last-child td { border-bottom: 0; }
.compare-table .ok { color: var(--lime-dark); font-weight: 700; }
.compare-table .no { color: var(--red); font-weight: 700; }
@media (max-width: 599px) { .compare-table { font-size: .9rem; } .compare-table th, .compare-table td { padding: 12px 10px; } }

/* ---------- Testimonials ---------- */
.testimonials { display: grid; gap: clamp(40px, 6vw, 80px); position: relative; z-index: 1; }
.testimonial { display: grid; gap: 22px; align-items: center; }
@media (min-width: 760px) { .testimonial { grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); } .testimonial--flip .testimonial__media { order: 2; } }
.testimonial__quote { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.5rem); text-transform: uppercase; line-height: 1.3; color: var(--cream); margin: 0 0 14px; }
.testimonial__quote::before { content: '"'; } .testimonial__quote::after { content: '"'; }
.testimonial .stars { color: #C9B457; }
.testimonial__meta { border-top: 1px solid rgba(250,248,242,.25); margin-top: 22px; padding-top: 22px; font-size: .95rem; color: rgba(250,248,242,.8); }
.testimonial__meta b { font-weight: 500; display: block; color: var(--cream); }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--lime); }
.badge svg { width: 12px; height: 12px; }
.section--green .rings { left: -14vw; top: 8%; width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; }
.quotes { display: grid; gap: 0; margin-top: clamp(40px, 6vw, 72px); border-top: 1px solid rgba(250,248,242,.25); position: relative; z-index: 1; }
@media (min-width: 760px) { .quotes { grid-template-columns: 1fr 1fr; } .quote-card + .quote-card { border-left: 1px solid rgba(250,248,242,.25); } }
.quote-card { padding: 28px 28px 28px 0; display: grid; gap: 10px; }
@media (min-width: 760px) { .quote-card + .quote-card { padding-left: 28px; } }
.quote-card .testimonial__quote { font-size: 1.05rem; margin: 0; }
.quote-card .testimonial__meta { border: 0; margin: 0; padding: 0; display: flex; gap: 14px; align-items: center; }

/* ---------- Google Bewertungen Band ---------- */
.reviews-widget { min-height: 280px; }
.google-band { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 40px; text-align: center; border-top: var(--line); border-bottom: var(--line); padding: 28px 0; }
.google-band .g-logo { font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; }
.google-band .g-logo span:nth-child(1){color:#4285F4}.google-band .g-logo span:nth-child(2){color:#EA4335}.google-band .g-logo span:nth-child(3){color:#FBBC05}.google-band .g-logo span:nth-child(4){color:#4285F4}.google-band .g-logo span:nth-child(5){color:#34A853}.google-band .g-logo span:nth-child(6){color:#EA4335}

/* ---------- Zahlen / Stats ---------- */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(250,248,242,.22); border: 1px solid rgba(250,248,242,.22); }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  position: relative; overflow: hidden; text-align: left; padding: 26px 16px 20px;
  background: var(--green); transition: background .45s var(--ease);
}
.stat::before { /* Akzentlinie oben, wächst beim Einblenden */
  content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--lime);
  transition: width .9s var(--ease) .15s;
}
.stat.is-counted::before { width: 100%; }
.stat::after { /* Diagonale Lichtkante beim Hover */
  content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(151,196,69,.18), rgba(151,196,69,0) 60%);
  opacity: 0; transition: opacity .45s var(--ease);
}
.stat:hover { background: #1A2C22; }
.stat:hover::after { opacity: 1; }
.stat b {
  display: block; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.9rem, 2.4vw, 2.5rem);
  color: var(--lime); line-height: .95; margin-bottom: 10px; font-variant-numeric: tabular-nums;
  letter-spacing: -.03em; position: relative; z-index: 2; white-space: nowrap;
}
.stat span { display: block; font-size: .76rem; line-height: 1.35; color: rgba(250,248,242,.75); position: relative; z-index: 2;
  font-family: var(--font-head); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.stat i { /* dezenter Index oben rechts */
  position: absolute; right: 16px; top: 16px; font-family: var(--font-head); font-weight: 600; font-style: normal;
  font-size: .72rem; letter-spacing: .12em; line-height: 1; color: rgba(250,248,242,.35); z-index: 2;
  transition: color .35s var(--ease);
}
.stat:hover i { color: var(--lime); }

/* ---------- Bento-Grid (Praxis) ---------- */
.bento { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; gap: 12px; }
.bento__item { margin: 0; position: relative; overflow: hidden; outline: 1px solid rgba(250,248,242,.25); outline-offset: -6px; }
.bento__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.bento__item:hover img { transform: scale(1.05); }
.bento__item figcaption { position: absolute; left: 14px; bottom: 12px; font-family: var(--font-head); font-weight: 600; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cream); background: rgba(32,54,42,.85); padding: 6px 10px; }
.bento__item--big { grid-column: span 2; grid-row: span 2; }
.bento__item--wide { grid-column: span 2; }
@media (min-width: 760px) { .bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 16px; } .bento__item--big { grid-column: span 2; grid-row: span 2; } }


/* ---------- CTA-Band mit Foto (volle Breite) ---------- */
.cta-photo {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(48px, 7vw, 88px);
  background-color: var(--green); background-size: cover; background-position: center; background-repeat: no-repeat;
  border-top: 1px solid rgba(250,248,242,.25); border-bottom: 1px solid rgba(250,248,242,.25);
}
.cta-photo::before { /* Grün-Schleier, damit der Text sicher lesbar bleibt */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(32,54,42,.92) 0%, rgba(32,54,42,.78) 42%, rgba(32,54,42,.58) 100%);
}
.cta-photo::after { /* dünne Lindgrün-Kante oben */
  content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--lime); z-index: 2;
  transition: width 1.1s var(--ease) .1s;
}
.cta-photo.is-visible::after { width: 100%; }
.cta-photo__inner { display: grid; gap: 26px; align-items: center; position: relative; z-index: 2; }
@media (min-width: 860px) { .cta-photo__inner { grid-template-columns: 1.15fr auto; gap: 48px; } }
.cta-photo .eyebrow { color: var(--lime); margin-bottom: 10px; }
.cta-photo .eyebrow::before { background: var(--lime); }
.cta-photo h2 { color: var(--cream); margin: 0; text-shadow: 0 2px 14px rgba(32,54,42,.45); font-size: clamp(1.35rem, 2.5vw, 2rem); }
.cta-photo__action { display: grid; justify-items: start; gap: 10px; }
@media (min-width: 860px) { .cta-photo .btn { white-space: nowrap; } }
@media (min-width: 860px) { .cta-photo__action { justify-items: end; } }
.cta-photo__note { font-size: .85rem; color: rgba(250,248,242,.85); text-shadow: 0 1px 6px rgba(32,54,42,.6); }
.cta-photo__phone { font-size: .95rem; color: var(--cream); text-shadow: 0 1px 6px rgba(32,54,42,.6); border-bottom: 1px solid rgba(250,248,242,.4); padding-bottom: 2px; }
.cta-photo__phone:hover { color: var(--lime); border-color: var(--lime); }
@media (max-width: 859px) {
  .cta-photo__action { justify-items: center; text-align: center; width: 100%; }
  .cta-photo__inner { text-align: center; }
  .cta-photo .eyebrow { justify-content: center; }
  .cta-photo .eyebrow::after { content: ''; width: 28px; height: 1px; background: var(--lime); }
}

/* ---------- Spezialgebiete ---------- */
.specials { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); justify-content: center; }
@media (min-width: 760px) { .specials { grid-template-columns: repeat(auto-fit, minmax(300px, 380px)); } }
.special { position: relative; overflow: hidden; min-height: 300px; display: flex; align-items: flex-end; color: var(--cream); outline: 1px solid rgba(250,248,242,.35); outline-offset: 8px; }
.special img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.special:hover img { transform: scale(1.05); }
.special::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(32,54,42,.92) 0%, rgba(32,54,42,.35) 55%, rgba(32,54,42,0) 100%); }
.special__body { position: relative; z-index: 2; padding: 26px; }
.special__icon { position: absolute; left: 18px; top: 18px; z-index: 2; width: 56px; height: 56px; display: grid; place-items: center; background: var(--cream); color: var(--green); border: 1px solid rgba(32,54,42,.2); }
.special__icon svg { width: 34px; height: 34px; }
.special__icon .ic-accent { stroke: var(--lime-dark); }
.special__body h3 { color: var(--cream); margin-bottom: 6px; }
.special__body p { font-size: .95rem; color: rgba(250,248,242,.85); margin: 0; }

/* ---------- Über Zotzmann ---------- */
.about__list { display: grid; gap: 14px; margin: 22px 0 28px; }
.about__list li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-size: 1rem; }
.about__list svg { width: 24px; height: 24px; color: var(--lime-dark); margin-top: 2px; }
.about__sign { display: flex; align-items: center; gap: 14px; margin-top: 8px; padding-top: 18px; border-top: var(--line); }
.about__sign b { display: block; font-family: var(--font-head); font-weight: 600; text-transform: uppercase; font-size: .85rem; letter-spacing: .06em; }
.about__sign span { font-size: .9rem; color: var(--green-80); }

/* ---------- Liste mit Pfeil (wie Homepage "> Punkt") ---------- */
.arrow-list { display: grid; gap: 10px; margin-top: 18px; }
.arrow-list li { padding-left: 24px; position: relative; font-weight: 400; }
.arrow-list li::before { content: '>'; position: absolute; left: 0; color: var(--lime-dark); font-weight: 700; font-family: var(--font-head); }

/* ---------- Pain Points -> Vorteile ---------- */
.pains { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); justify-content: center; }
@media (min-width: 760px) { .pains { grid-template-columns: repeat(auto-fit, minmax(280px, 360px)); } }
.pain { background: var(--cream); padding: 22px; display: flex; gap: 14px; align-items: center; font-weight: 400; border: var(--line); border-left: 2px solid var(--red); }
.pain svg { width: 26px; height: 26px; flex: none; color: var(--red); }
.advantages { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); justify-content: center; }
@media (min-width: 640px) { .advantages { grid-template-columns: repeat(auto-fit, minmax(280px, 370px)); } }

/* ---------- Ablauf / Schritte mit Linienanimation ---------- */
.steps { position: relative; display: grid; gap: 0; }
.steps__line { position: absolute; left: 27px; top: 0; bottom: 0; width: 1px; background: rgba(32,54,42,.25); }
.steps__line i { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--lime); transition: height .15s linear; }
.step { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 0 0 clamp(36px, 5vw, 56px); position: relative; }
.step:last-child { padding-bottom: 0; }
.step__num {
  width: 56px; height: 56px; border-radius: 50%; background: var(--cream); border: 1px solid rgba(32,54,42,.35);
  display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; position: relative; z-index: 2;
  transition: background .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease), transform .5s var(--ease);
}
.step.is-active .step__num { background: var(--lime); border-color: var(--lime); color: var(--cream); transform: scale(1.08); box-shadow: 0 0 0 1px var(--cream), 0 0 0 2px var(--lime); }
.step__body { display: grid; gap: 18px; opacity: .55; transform: translateX(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.step.is-active .step__body { opacity: 1; transform: none; }
@media (min-width: 760px) { .step__body { grid-template-columns: 1fr 260px; align-items: center; gap: 32px; } }
.step__body img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; outline: 1px solid var(--green); outline-offset: 8px; }
.step__tag { font-family: var(--font-head); font-weight: 600; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lime-dark); margin-bottom: 4px; display: block; }
.step h3 { margin-bottom: 8px; }
.step p { color: var(--green-80); font-size: 1rem; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; }
.faq { gap: 0; border-top: var(--line); }
.faq details { background: transparent; border-bottom: var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 0; font-family: var(--font-head); font-weight: 600; font-size: 1rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 22px; top: 50%; margin-top: -14px; width: 28px; height: 28px;
  border-radius: 50%; border: 1px solid var(--green);
  background-image: linear-gradient(var(--green), var(--green)), linear-gradient(var(--green), var(--green));
  background-size: 11px 1.5px, 1.5px 11px; background-position: center center, center center; background-repeat: no-repeat;
  transition: transform .35s var(--ease), background-color .3s, border-color .3s;
}
.faq summary:hover::after { background-color: var(--lime-10); border-color: var(--lime-dark); }
.faq details[open] summary::after { transform: rotate(135deg); background-color: var(--lime); border-color: var(--lime);
  background-image: linear-gradient(var(--cream), var(--cream)), linear-gradient(var(--cream), var(--cream)); }
.faq details > div { padding: 0 56px 22px 0; color: var(--green-80); font-size: 1rem; }
.faq details > div ul { list-style: disc; padding-left: 20px; margin: 10px 0; }

/* ---------- CTA Band ---------- */
.cta-band { background: var(--green); color: var(--cream); padding: clamp(32px, 5vw, 64px); text-align: center; position: relative; overflow: hidden; outline: 1px solid var(--green); outline-offset: 10px; }
.cta-band .rings { position: absolute; z-index: 0; left: -120px; bottom: -220px; width: 460px; height: 460px; }
.cta-band > * { position: relative; z-index: 2; }
.cta-band h2 { color: var(--cream); max-width: 720px; margin-inline: auto; }
.cta-band .lead { color: rgba(250,248,242,.85); max-width: 600px; margin: 0 auto 28px; }
.cta-band .phone-hint { color: rgba(250,248,242,.8); }
.cta-band .phone-hint a { color: var(--lime); }
.cta-band .btn-row { justify-content: center; }

/* ---------- Footer ---------- */
.footer { background: var(--green); color: rgba(250,248,242,.85); padding: clamp(48px, 6vw, 80px) 0 110px; font-size: .95rem; }
@media (min-width: 900px) { .footer { padding-bottom: 40px; } }
.footer__grid { display: grid; gap: 36px; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; } }
.footer__links { display: grid; gap: 8px; }
.footer__links a { border-bottom: 1px solid transparent; }
.footer__links a:hover { border-color: var(--lime); }
.footer h4 { color: var(--cream); text-transform: uppercase; font-size: .8rem; letter-spacing: .1em; margin-bottom: 14px; }
.footer__logo img { width: 210px; margin-bottom: 18px; }
.footer a:hover { color: var(--lime); }
.hours { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; }
.footer__bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(250,248,242,.25); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: .85rem; color: rgba(250,248,242,.6); }
.footer__bottom nav { display: flex; gap: 18px; }
.footer__seals { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 22px; }
.footer__seals img { height: 64px; width: auto; background: #fff; padding: 4px; }


/* ---------- Embed-Variante (iFrame in Webflow) ---------- */
.embed-page { background: transparent; }
.embed-page .funnel { padding: 0 0 8px; display: block; }
.embed-page .funnel__card {
  width: 100%; max-width: 720px; margin-inline: auto;
  outline: none; border: var(--line); background: var(--white);
  padding: clamp(20px, 4vw, 40px);
}
.embed-page .funnel__card--wide { max-width: 980px; }
.embed-page .calendly-wrap { min-height: 720px; }
.choice-list--compact .choice { padding: 13px 16px; font-size: .95rem; }
@media (min-width: 620px) { .choice-list--compact { grid-template-columns: 1fr 1fr; } }

/* ---------- Funnel-Seite: Danke-Seite der Hauptdomain ---------- */
/* ---------- Sticky Mobile CTA ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(250,248,242,.96); backdrop-filter: blur(10px); border-top: var(--line);
  display: grid; grid-template-columns: 52px 1fr; gap: 10px; transform: translateY(110%); transition: transform .4s var(--ease);
}
.sticky-cta.is-visible { transform: none; }
.sticky-cta .btn { padding: 13px 16px; font-size: .78rem; }
.sticky-cta .sticky-cta__phone { display: grid; place-items: center; border-radius: 50%; background: var(--green); color: var(--cream); }
.sticky-cta .sticky-cta__phone svg { width: 20px; height: 20px; }
@media (min-width: 900px) { .sticky-cta { display: none; } }

/* ---------- Reveal-Animationen ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .1s; } .reveal[data-delay="2"] { transition-delay: .2s; } .reveal[data-delay="3"] { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .point, .verdict, .step__body { opacity: 1 !important; transform: none !important; transition: none !important; }
  .sticky-cta { transition: none; }
}

/* =====================================================================
   FUNNEL (termin.html)
   ===================================================================== */
.funnel-page { min-height: 100vh; background: var(--cream); display: flex; flex-direction: column; }
.funnel-page .header { position: static; }
.funnel { flex: 1; display: grid; place-items: start center; padding: clamp(24px, 5vw, 64px) 0 80px; }
.funnel__card { width: min(720px, 100% - 2 * var(--gutter)); background: var(--white); border: var(--line); outline: 1px solid var(--green); outline-offset: 10px; padding: clamp(24px, 4vw, 48px); position: relative; }
.funnel__card--wide { width: min(980px, 100% - 2 * var(--gutter)); }
.funnel__progress { display: flex; align-items: center; gap: 8px; margin-bottom: 28px; }
.funnel__progress i { flex: 1; height: 3px; background: rgba(32,54,42,.12); overflow: hidden; position: relative; }
.funnel__progress i::after { content: ''; position: absolute; inset: 0; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.funnel__progress i.done::after, .funnel__progress i.active::after { transform: scaleX(1); }
.funnel__progress i.active::after { background: var(--lime-dark); }
.funnel__progress-text { font-size: .8rem; color: var(--green-80); white-space: nowrap; font-weight: 500; }
.fstep { display: none; animation: fadeUp .45s var(--ease); }
.fstep.is-active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.fstep h2 { text-transform: none; font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin-bottom: 6px; }
.fstep .hint { color: var(--green-80); font-size: .95rem; margin-bottom: 22px; }
.choice-list { display: grid; gap: 10px; margin-bottom: 26px; }
.choice { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--cream); border: var(--line); cursor: pointer; font-weight: 400; transition: all .2s var(--ease); }
.choice:hover { border-color: var(--lime); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__box { width: 24px; height: 24px; border: 1px solid rgba(32,54,42,.4); display: grid; place-items: center; flex: none; background: #fff; transition: all .2s; }
.choice__box svg { width: 14px; height: 14px; opacity: 0; color: #fff; }
.choice.is-checked { background: var(--lime); color: var(--cream); border-color: var(--lime); }
.choice.is-checked .choice__box { background: var(--green); border-color: var(--green); }
.choice.is-checked .choice__box svg { opacity: 1; }
.field { display: grid; gap: 8px; margin-bottom: 18px; }
.field label { font-family: var(--font-head); font-weight: 600; font-size: .8rem; letter-spacing: .04em; }
.field input, .field select, .field textarea {
  width: 100%; padding: 16px 18px; border: var(--line); background: var(--cream);
  font: inherit; font-weight: 400; color: var(--green); transition: border-color .2s; -webkit-appearance: none; appearance: none;
}
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2320362A' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--lime); }
.field input.is-invalid { border-color: var(--red); }
.field__error { display: none; color: var(--red); font-size: .85rem; }
.field.has-error .field__error { display: block; }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: 12px; font-size: .9rem; color: var(--green-80); }
/* Eigene Checkbox – die globale Regel oben setzt appearance:none, dadurch würde eine
   native Checkbox unsichtbar bleiben (kein Haken beim Klick). */
.field--check input[type="checkbox"] {
  width: 26px; height: 26px; flex: none; padding: 0; margin: 0;
  border: 1px solid rgba(32, 54, 42, .4); background: var(--white);
  cursor: pointer; transition: background-color .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease);
}
.field--check input[type="checkbox"]:hover { border-color: var(--lime-dark); background: var(--lime-10); }
.field--check input[type="checkbox"]:active { transform: scale(.92); }
.field--check input[type="checkbox"]:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.field--check label { cursor: pointer; }
/* Fehlerzustand: nur background-COLOR setzen – die Kurzform `background` würde
   sonst das Haken-Bild der angehakten Box mit löschen. */
.field--check.has-error input[type="checkbox"] { border-color: var(--red); background-color: rgba(200, 85, 61, .07); }
/* „Angehakt“ steht bewusst zuletzt und schlägt damit auch den Fehlerzustand. */
.field--check input[type="checkbox"]:checked,
.field--check.has-error input[type="checkbox"]:checked {
  background-color: var(--lime); border-color: var(--lime);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E");
  background-size: 17px; background-position: center; background-repeat: no-repeat;
  animation: checkPop .22s var(--ease);
}
@keyframes checkPop { 0% { transform: scale(.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.field--check a { text-decoration: underline; }
.funnel__nav { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 8px; }
.funnel__back { color: var(--green-80); font-size: .9rem; display: inline-flex; align-items: center; gap: 6px; }
.funnel__back svg { width: 16px; height: 16px; }
.funnel__back:hover { color: var(--green); }
.funnel__trust { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin-top: 26px; font-size: .8rem; color: var(--green-80); }
.funnel__trust span { display: inline-flex; align-items: center; gap: 6px; }
.funnel__trust svg { width: 14px; height: 14px; color: var(--lime-dark); }

/* Calendly-Schritt */
/* Roter Achtung-Balken: kompakt, damit der Kalender möglichst weit oben steht */
.alert-book {
  display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start;
  background: var(--red); color: #FFF3F0; padding: 14px 16px; margin-bottom: 16px;
  border-left: 4px solid #8E3626; animation: alertIn .5s var(--ease);
}
.alert-book__icon { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; }
.alert-book__icon svg { width: 26px; height: 26px; }
.alert-book__text { font-size: .95rem; line-height: 1.5; }
.alert-book__text b { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: #fff; margin-bottom: 2px; }
.alert-book__text strong { color: #fff; font-weight: 500; }
.alert-book__text u { text-underline-offset: 3px; }
@keyframes alertIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 479px) { .alert-book { grid-template-columns: 1fr; gap: 8px; } .alert-book__icon { width: 28px; height: 28px; } }

.final-banner { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center; background: var(--cream); border: 1px solid var(--lime); border-left: 3px solid var(--lime); padding: 18px 20px; margin-bottom: 22px; }
.final-banner__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--lime); display: grid; place-items: center; color: var(--cream); animation: pop .6s var(--ease); }
.final-banner__icon svg { width: 28px; height: 28px; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
/* Warn-Variante: Anfrage ist noch NICHT abgeschlossen */
.final-banner--warn { background: #FFF6E8; border-color: #E0A12E; border-left-color: #E0A12E; }
.final-banner--warn .final-banner__icon { background: #E0A12E; }
.final-banner--warn strong { color: var(--green); font-weight: 500; }
.final-alt { margin-top: 22px; padding: 22px; border: var(--line); background: var(--cream); text-align: center; display: grid; gap: 8px; justify-items: center; }
.final-alt b { font-family: var(--font-head); font-weight: 600; font-size: .95rem; }
.final-alt span { font-size: .9rem; color: var(--green-80); }
.final-alt .btn { margin-top: 8px; }
@media (max-width: 479px) { .final-banner { grid-template-columns: 1fr; text-align: center; } .final-banner__icon { margin: 0 auto; } }
.final-banner b { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; }
.final-banner span { font-size: .95rem; color: var(--green-80); }
.final-steps { display: grid; gap: 10px; margin-bottom: 22px; }
@media (min-width: 640px) { .final-steps { grid-template-columns: 1fr 1fr 1fr; } }
.final-steps div { display: flex; gap: 10px; align-items: center; font-size: .9rem; padding: 12px 14px; background: var(--cream); border: var(--line-soft); }
.final-steps div b { width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: var(--cream); display: grid; place-items: center; font-size: .8rem; flex: none; }
.final-steps div.now { background: var(--lime); color: var(--cream); font-weight: 500; border-color: var(--lime); }
.final-steps div.now b { background: var(--cream); color: var(--green); }
.calendly-wrap { overflow: hidden; border: var(--line); background: #fff; min-height: 680px; position: relative; }
.calendly-inline-widget { min-width: 320px; height: 760px; }
.calendly-fallback { padding: 28px; text-align: center; color: var(--green-80); }
.booked { text-align: center; padding: 30px 10px; display: none; }
.booked.is-visible { display: block; animation: fadeUp .5s var(--ease); }
/* Nach der Buchung nur noch die Bestätigung zeigen */
.fstep.is-booked .alert-book,
.fstep.is-booked .final-banner--warn,
.fstep.is-booked > h2,
.fstep.is-booked > .hint,
.fstep.is-booked .arrow-down,
.fstep.is-booked .final-alt { display: none; }
.booked .final-banner__icon { margin: 0 auto 16px; width: 80px; height: 80px; }
.booked .final-banner__icon svg { width: 40px; height: 40px; }
.arrow-down { display: flex; justify-content: center; margin: 8px 0 14px; color: var(--lime-dark); animation: bounce 1.6s infinite; }
.arrow-down svg { width: 28px; height: 28px; }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* =====================================================================
   INTERNES FORMULAR (telefonische-anfrage.html)
   Einseitig, dicht gesetzt – wird beim Telefonieren ausgefüllt.
   ===================================================================== */
.form-head { text-align: center; margin-bottom: 26px; }
.form-head h1 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); text-transform: none; margin-bottom: 8px; }
.form-head .hint { color: var(--green-80); font-size: .98rem; margin: 0; }

/* Zwei Felder nebeneinander, auf dem Handy untereinander */
.field-row { display: grid; gap: 0 18px; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

.label-soft { font-family: var(--font-body); font-weight: 300; text-transform: none; letter-spacing: 0; color: var(--green-80); }

/* Telefonfeld mit Länderkennzeichen davor.
   Der Rahmen sitzt am Container, das Eingabefeld selbst ist rahmenlos –
   sonst entstünde eine doppelte Linie zwischen Flagge und Eingabe. */
.input-prefix { display: grid; grid-template-columns: 52px 1fr; align-items: center; border: var(--line); background: var(--cream); transition: border-color .2s; }
.input-prefix:focus-within { border-color: var(--lime); }
.input-prefix__flag { display: grid; place-items: center; border-right: var(--line-soft); align-self: stretch; }
.input-prefix input { border: 0; background: transparent; }
.input-prefix input:focus { outline: none; }
.field.has-error .input-prefix { border-color: var(--red); }

/* Datumsfeld: das native Kalendersymbol bleibt sichtbar, appearance:none
   der globalen Feldregel würde es sonst verschlucken. */
.field input[type="date"] { -webkit-appearance: none; appearance: none; min-height: 55px; }
.field input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; }
.field input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

.form-mark { display: grid; place-items: center; margin-top: 30px; padding-top: 24px; border-top: var(--line-soft); opacity: .5; }
.form-mark img { width: 150px; height: auto; }

/* Agentur-Hinweis im Footer: hebt sich vom gedimmten Copyright ab.
   Die Umgebung steht auf 60 % Deckkraft – deshalb hier volle Deckkraft
   setzen, sonst bleibt auch Fettdruck blass. */
.footer__by { color: rgba(250,248,242,.92); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.footer__by strong { font-family: var(--font-head); font-weight: 700; letter-spacing: .02em; color: var(--lime); }
.footer__by:hover { color: #fff; }
.footer__by:hover strong { color: #fff; }

/* =====================================================================
   PRAXIS-BENTO
   Kacheln unterschiedlicher Größe statt zweispaltigem Block.
   Bewusst KEINE runden Ecken – die CI ist geradlinig, rund sind nur
   die CTA-Pillen. Tiefe entsteht über Flächenfarbe und 1-px-Linien.
   ===================================================================== */
.pbento {
  display: grid;
  gap: 14px;
  grid-template-areas:
    "text"
    "video"
    "zahl"
    "stats"
    "foto"
    "labor"
    "cta";
}
@media (min-width: 700px) {
  .pbento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "text  text"
      "video video"
      "zahl  foto"
      "stats stats"
      "labor labor"
      "cta   cta";
  }
}
@media (min-width: 1000px) {
  .pbento {
    grid-template-columns: repeat(4, 1fr);
    /* Letzte Zeile bewusst begrenzt: sonst zieht das breite Foto die
       Handlungsaufforderung daneben auf dieselbe Höhe auf. */
    grid-template-rows: auto auto auto minmax(150px, 180px);
    grid-template-areas:
      "text  text  video video"
      "text  text  zahl  foto"
      "stats stats stats foto"
      "labor labor cta   cta";
  }
}
.pbento__text  { grid-area: text; }
.pbento__video { grid-area: video; }
.pbento__zahl  { grid-area: zahl; }
.pbento__foto  { grid-area: foto; }
.pbento__stats { grid-area: stats; }
.pbento__labor { grid-area: labor; }
.pbento__cta   { grid-area: cta; }

/* Gemeinsame Kachel-Basis */
.pbento > * {
  position: relative;
  overflow: hidden;
  min-width: 0;                 /* verhindert, dass lange Wörter das Raster sprengen */
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}

/* --- Textkachel: helle Fläche als Anker im dunklen Band --- */
.pbento__text {
  background: var(--cream);
  padding: clamp(26px, 3.4vw, 46px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
}
.pbento__text h2 { margin-bottom: 10px; }
.pbento__text .lead { margin-bottom: 12px; }
.pbento__text p:last-of-type { color: var(--green-80); font-size: .98rem; }
/* Dekor: konzentrische Linien, drehen sich beim Überfahren der Kachel */
.pbento__deko {
  position: absolute; right: -90px; bottom: -90px; width: 300px; height: 300px;
  pointer-events: none; opacity: .5;
  transition: transform 1.6s var(--ease), opacity .6s var(--ease);
}
.pbento__deko circle { fill: none; stroke: var(--lime); stroke-width: 1; }
.pbento__text:hover .pbento__deko { transform: rotate(120deg) scale(1.06); opacity: .85; }

/* --- Videokachel --- */
.pbento__video .yt { height: 100%; }
.pbento__video .yt img { width: 100%; height: 100%; object-fit: cover; }

/* --- Zahlenkachel in Lindgrün mit Fortschrittsbalken --- */
.pbento__zahl {
  background: var(--lime); color: var(--green);
  padding: clamp(22px, 2.6vw, 34px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  min-height: 190px;
}
.pbento__zahl .kachel-label {
  font-family: var(--font-head); font-weight: 700; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; opacity: .75;
}
.pbento__zahl b {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -.02em;
}
.pbento__zahl span.kachel-text { font-size: .95rem; font-weight: 500; }
.pbento__bar { height: 5px; background: rgba(32, 54, 42, .18); overflow: hidden; }
.pbento__bar i { display: block; height: 100%; width: 0; background: var(--green); transition: width 1.4s var(--ease) .2s; }
.pbento__zahl.is-counted .pbento__bar i { width: 86%; }

/* --- Fotokacheln ---
   <figure> bringt im Browser-Standard seitliche Außenabstände mit – die
   müssen weg, sonst füllt die Kachel ihre Rasterfläche nicht aus.
   Das Bild liegt absolut, damit nicht seine Eigenhöhe die Kachel bestimmt:
   auf schmalen Schirmen gibt das Seitenverhältnis die Höhe vor, im großen
   Raster die Zeilenhöhe. */
.pbento figure { margin: 0; }
.pbento__foto, .pbento__labor { border: 1px solid rgba(250, 248, 242, .18); position: relative; }
.pbento__foto img, .pbento__labor img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s var(--ease);
}
.pbento__foto  { aspect-ratio: 4 / 5; }
.pbento__labor { aspect-ratio: 16 / 9; }
@media (min-width: 1000px) {
  /* Im vierspaltigen Raster gibt die Zeile die Höhe vor. */
  .pbento__foto, .pbento__labor { aspect-ratio: auto; min-height: 0; }
}
.pbento__foto:hover img, .pbento__labor:hover img { transform: scale(1.05); }
.pbento figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 18px 14px; color: #fff; font-size: .85rem; font-weight: 500;
  background: linear-gradient(to top, rgba(32, 54, 42, .85), transparent);
}

/* --- Kleine Zahlen nebeneinander --- */
.pbento__stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(250, 248, 242, .18);
}
.pbento__stats > div { padding: clamp(18px, 2.2vw, 26px); position: relative; }
.pbento__stats > div + div { border-left: 1px solid rgba(250, 248, 242, .18); }
.pbento__stats b {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1; color: var(--lime); letter-spacing: -.02em;
}
.pbento__stats span { display: block; margin-top: 8px; font-size: .82rem; color: rgba(250, 248, 242, .78); line-height: 1.35; }
.pbento__stats i {
  position: absolute; top: 12px; right: 14px; font-style: normal;
  font-family: var(--font-head); font-size: .7rem; letter-spacing: .1em; color: rgba(250, 248, 242, .35);
}
/* Auch auf dem Handy drei Spalten: die Beschriftungen sind kurz genug,
   und eine einzelne Kachel in der zweiten Reihe sähe abgebrochen aus. */
@media (max-width: 559px) {
  .pbento__stats > div { padding: 16px 10px; }
  .pbento__stats b { font-size: 1.6rem; }
  .pbento__stats span { font-size: .74rem; }
  .pbento__stats i { top: 8px; right: 8px; font-size: .62rem; }
}

/* --- Handlungsaufforderung mit Pfeilkreis --- */
.pbento__cta {
  background: var(--cream); color: var(--green);
  padding: clamp(22px, 2.6vw, 32px);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  text-decoration: none;
}
.pbento__cta h3 { margin: 0 0 6px; font-size: clamp(1.1rem, 1.8vw, 1.4rem); }
.pbento__cta p { margin: 0; font-size: .92rem; color: var(--green-80); }
.pbento__pfeil {
  flex: none; width: 58px; height: 58px; border-radius: 50%;
  background: var(--lime); color: var(--green);
  display: grid; place-items: center;
  transition: transform .4s var(--ease), background-color .3s var(--ease);
}
.pbento__pfeil svg { width: 24px; height: 24px; }
.pbento__cta:hover .pbento__pfeil { transform: translateX(6px); background: var(--green); color: var(--cream); }
.pbento__cta:hover { border-color: var(--lime); }

@media (prefers-reduced-motion: reduce) {
  .pbento > *, .pbento__deko, .pbento__foto img, .pbento__labor img, .pbento__pfeil { transition: none !important; }
}

/* --- Farben in den hellen Kacheln zurücksetzen ---
   .section--green färbt Überschriften und Text cremefarben. Innerhalb der
   hellen Kacheln wäre das weiß auf creme, also unlesbar. Deshalb hier
   ausdrücklich zurück auf Dunkelgrün – die Regeln müssen NACH den
   .section--green-Regeln stehen, sonst gewinnen die. */
.section--green .pbento__text,
.section--green .pbento__text h2,
.section--green .pbento__text h3,
.section--green .pbento__text p,
.section--green .pbento__text strong { color: var(--green); }
.section--green .pbento__text .eyebrow { color: var(--lime-dark); }
.section--green .pbento__text .eyebrow::before { background: var(--green); }
.section--green .pbento__text p:last-of-type { color: var(--green-80); }

.section--green .pbento__zahl,
.section--green .pbento__zahl b,
.section--green .pbento__zahl .kachel-label,
.section--green .pbento__zahl .kachel-text { color: var(--green); }

.section--green .pbento__cta,
.section--green .pbento__cta h3 { color: var(--green); }
.section--green .pbento__cta p { color: var(--green-80); }

/* Auf schmalen Schirmen ist "EINE ZAHNARZTPRAXIS." breiter als die Kachel –
   der Browser bricht dann den Punkt in eine eigene Zeile. Deshalb hier eine
   eigene, kleinere Staffelung statt der allgemeinen H2-Größe. */
.pbento__text h2 { font-size: clamp(1.35rem, 5vw, 2.4rem); }

/* =====================================================================
   WEBSITE zahnarzt-zotzmann.de – Ergänzungen zum Landingpage-Stylesheet
   ===================================================================== */

/* ---------- Topbar (Lindgrün, wie bisher) ---------- */
.topbar { background: var(--lime); color: var(--green); font-size: .8rem; font-weight: 500; }
.topbar__inner { display: flex; align-items: center; gap: 22px; min-height: 34px; }
.topbar a, .topbar summary { display: inline-flex; align-items: center; gap: 6px; color: var(--green); cursor: pointer; list-style: none; }
.topbar summary::-webkit-details-marker { display: none; }
.topbar svg { width: 14px; height: 14px; }
.topbar__right { margin-left: auto; }
.topbar__hours { position: relative; }
.topbar__hours .hours { position: absolute; left: 0; top: calc(100% + 8px); z-index: 200; background: var(--white); color: var(--green); border: var(--line); padding: 14px 16px; min-width: 240px; font-size: .85rem; grid-template-columns: 36px 1fr; }
@media (max-width: 599px) { .topbar__inner { gap: 14px; } .topbar a:nth-child(3) { display: none; } }

/* ---------- Header + Navigation ---------- */
.header--site { position: sticky; top: 0; z-index: 100; }
.header--site .header__inner { gap: 18px; }
.header--site .header__logo img { width: 210px; height: auto; }
.nav { display: none; }
.nav__list { display: flex; gap: 2px; margin: 0; }
.nav__item { position: relative; }
.nav__link { display: inline-flex; align-items: center; gap: 5px; padding: 10px 12px; font-family: var(--font-head); font-weight: 600; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--green); background: none; border: 0; cursor: pointer; border-bottom: 2px solid transparent; }
.nav__link svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.nav__item.is-active > .nav__link, .nav__link:hover { border-bottom-color: var(--lime); }
.nav__item.is-open > .nav__link svg { transform: rotate(180deg); }
.nav__sub { display: none; position: absolute; left: 0; top: 100%; min-width: 280px; background: var(--white); border: var(--line); padding: 8px 0; z-index: 150; box-shadow: 0 18px 40px -20px rgba(32,54,42,.35); }
.nav__item.is-open > .nav__sub { display: block; }
.nav__sub a { display: block; padding: 10px 18px; font-size: .92rem; font-weight: 400; border-left: 2px solid transparent; }
.nav__sub a:hover { background: var(--cream); border-left-color: var(--lime); }
.nav__mega { display: none; }
/* „Neupatient werden“: großes Panel über die ganze Kopfbreite, wie auf der Webflow-Seite */
@media (min-width: 1100px) {
  .header--site .header__inner { position: relative; }
  .nav__item.has-mega { position: static; }
  .nav__mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 150; grid-template-columns: 1fr 1fr; background: var(--cream); border: var(--line-soft); box-shadow: 0 24px 50px -24px rgba(32,54,42,.4); opacity: 0; transform: translateY(-6px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
  .nav__mega::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px; }
  .nav__item.is-open > .nav__mega { display: grid; opacity: 1; transform: none; }
  .nav__item.has-mega.is-open > .nav__link { border-bottom-color: var(--lime); }
}
.nav__mega-np, .nav__mega-zeiten { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px 48px 44px; text-align: center; }
.nav__mega-np { background: var(--green); color: rgba(250,248,242,.85); }
.nav__mega-np b { color: var(--cream); font-weight: 600; }
.nav__mega-title { font-family: var(--font-head); font-weight: 300; font-size: 2.1rem; line-height: 1.15; color: var(--green); margin: 0 0 6px; }
.nav__mega-np .nav__mega-title { color: var(--cream); }
.nav__mega-np p { margin: 0; max-width: 46ch; line-height: 1.55; }
.nav__mega-btn { width: 100%; max-width: 520px; justify-content: center; }
.nav__mega-dl { font-family: var(--font-head); font-weight: 600; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cream); text-decoration: underline; text-underline-offset: 4px; }
.nav__mega-dl:hover { color: var(--lime); }
.nav__mega-tel { background: var(--mist); color: var(--green); }
.nav__mega-tel:hover { background: var(--white); color: var(--green); }
.nav__mega-zeiten dl { display: grid; grid-template-columns: auto auto; gap: 8px 20px; margin: 18px 0 0; text-align: left; font-size: 1.05rem; color: var(--green); font-variant-numeric: tabular-nums; }
.nav__mega-zeiten dt { font-weight: 500; }
.nav__mega-zeiten dd { margin: 0; }
.nav__mobile-extra { display: none; }
.btn--sm { padding: 11px 20px; font-size: .72rem; }
.header__actions { display: flex; align-items: center; gap: 10px; }
.burger { width: 44px; height: 44px; display: grid; place-items: center; gap: 0; border: var(--line); background: var(--white); }
.burger span { display: block; width: 20px; height: 2px; background: var(--green); transition: transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1100px) {
  .nav { display: block; }
  .burger { display: none; }
}
@media (max-width: 1099px) {
  .hide-md { display: none; }
  .nav.is-open { display: block; position: fixed; inset: 0; top: 0; background: var(--cream); z-index: 300; overflow-y: auto; padding: 84px var(--gutter) 40px; }
  .nav.is-open .nav__list { flex-direction: column; gap: 0; }
  .nav.is-open .nav__item { border-bottom: var(--line-soft); }
  .nav.is-open .nav__link { width: 100%; justify-content: space-between; padding: 16px 0; font-size: .9rem; border-bottom: 0; }
  .nav.is-open .nav__sub { position: static; border: 0; box-shadow: none; background: transparent; padding: 0 0 12px; min-width: 0; }
  .nav.is-open .nav__sub a { padding: 10px 0 10px 14px; }
  .nav.is-open .nav__mobile-extra { display: grid; gap: 12px; margin-top: 26px; }
  .nav.is-open .nav__mobile-extra .btn { justify-content: center; }
  body.nav-open { overflow: hidden; }
  body.nav-open .header--site { z-index: 400; }
}
@media (max-width: 1099px) and (min-width: 1000px) { .header--site .header__logo img { width: 190px; } }
@media (max-width: 479px) { .header__cta { display: none; } }

/* ---------- Allgemeine Ergänzungen ---------- */
.section--tight { padding: clamp(36px, 5vw, 64px) 0; }
.section--tight + .section--tight { padding-top: 0; }
.grid--3 { display: grid; gap: 22px; }
@media (min-width: 800px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
.num-list { padding-left: 22px; list-style: decimal; margin: 0 0 1.1em; }
.num-list li { margin: 6px 0; padding-left: 4px; }
.content-img { margin: 26px 0; border: var(--line-soft); }
.content-img img { width: 100%; height: auto; }
blockquote { margin: 26px 0; padding: 18px 22px; border-left: 3px solid var(--lime); background: var(--cream); font-size: 1rem; }
.page-hero--img { padding: clamp(40px, 6vw, 80px) 0; }
.page-hero__grid { display: grid; gap: 34px; align-items: center; }
@media (min-width: 900px) { .page-hero__grid { grid-template-columns: 1.1fr 1fr; gap: 64px; } }
.page-hero__grid h1 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
.page-hero__media .frame img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.breadcrumb li + li::before { content: '›'; margin: 0 8px; opacity: .5; }
.hours--dark { color: var(--green); }
.footer__grid--5 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .footer__grid--5 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .footer__grid--5 { grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; } }
.footer__links li { margin: 5px 0; }
.legal h2 { font-size: 1.15rem; margin-top: 30px; }
.legal h3 { font-size: 1.05rem; margin-top: 26px; }
.legal h5 { font-size: .95rem; margin-top: 22px; text-transform: none; }
.legal p, .legal li { font-size: .95rem; }
.legal a { text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }

/* ---------- Behandlungs-Kacheln (Startseite) ---------- */
.treat-grid { display: grid; gap: 16px; }
@media (min-width: 700px) { .treat-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .treat-grid { grid-template-columns: repeat(3, 1fr); } }
.treat { border: var(--line); background: var(--white); display: flex; flex-direction: column; transition: transform .4s var(--ease), border-color .3s; }
.treat:hover { transform: translateY(-4px); border-color: var(--lime); }
.treat__img { aspect-ratio: 16/10; overflow: hidden; border-bottom: var(--line-soft); }
.treat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.treat:hover .treat__img img { transform: scale(1.05); }
.treat__body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.treat__body h3 { margin: 0; }
.treat__body p { font-size: .95rem; color: var(--green-80); margin: 0; }
.treat__body .arrow-list { margin-top: auto; padding-top: 8px; }
.treat__body .arrow-list li { font-size: .9rem; }

/* ---------- Nummerierte Punkte ---------- */
.nums { display: grid; gap: 14px; }
@media (min-width: 700px) { .nums { grid-template-columns: 1fr 1fr; } }
.num { border: var(--line); padding: 24px 24px 26px; background: var(--white); position: relative; transition: border-color .3s, transform .4s var(--ease); }
.num:hover { border-color: var(--lime); transform: translateY(-3px); }
.num__no { font-family: var(--font-head); font-weight: 700; font-size: .78rem; letter-spacing: .14em; color: var(--lime-dark); display: block; margin-bottom: 10px; }
.num h3 { font-size: 1.1rem; margin-bottom: 8px; }
.num p { font-size: .95rem; color: var(--green-80); margin: 0; }

/* ---------- Downloads ---------- */
.dl-grid { display: grid; gap: 14px; }
@media (min-width: 700px) { .dl-grid { grid-template-columns: 1fr 1fr; } }
.dl { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: center; border: var(--line); padding: 18px 20px; background: var(--white); transition: border-color .3s, transform .4s var(--ease); }
.dl:hover { border-color: var(--lime); transform: translateY(-3px); }
.dl__icon { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--lime); color: var(--lime-dark); }
.dl__icon svg { width: 26px; height: 26px; }
.dl__body { display: grid; gap: 2px; }
.dl__body b { font-family: var(--font-head); font-weight: 600; font-size: 1rem; }
.dl__body span { font-size: .88rem; color: var(--green-80); }
.dl__go { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 600; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lime-dark); }
.dl__go svg { width: 16px; height: 16px; }
@media (min-width: 600px) { .dl { grid-template-columns: 52px 1fr auto; } .dl__go { grid-column: auto; } }

/* ---------- Zitate, Presse, Team, Jobs ---------- */
.quotes { display: grid; gap: 16px; }
@media (min-width: 800px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
/* Zwei Stimmen: zwei Spalten statt einer leeren dritten */
@media (min-width: 800px) { .quotes:has(> :nth-child(2):last-child) { grid-template-columns: 1fr 1fr; } }
.quote { background: rgba(250,248,242,.06); border: 1px solid rgba(250,248,242,.2); padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.quote h3 { color: var(--cream); font-size: 1.05rem; margin: 0; }
.quote p { color: rgba(250,248,242,.85); font-size: .95rem; margin: 0; flex: 1; }
.quote footer { font-family: var(--font-head); font-weight: 600; font-size: .8rem; letter-spacing: .06em; color: var(--lime); }
.press-grid { display: grid; gap: 16px; }
@media (min-width: 700px) { .press-grid { grid-template-columns: repeat(3, 1fr); } }
.press { border: var(--line); background: var(--white); display: flex; flex-direction: column; transition: border-color .3s, transform .4s var(--ease); }
.press:hover { border-color: var(--lime); transform: translateY(-3px); }
.press img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-bottom: var(--line-soft); }
.press span { padding: 16px 18px 4px; font-family: var(--font-head); font-weight: 600; }
.press b { padding: 0 18px 18px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 600; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lime-dark); }
.press b svg { width: 16px; height: 16px; }
.team-grid { display: grid; gap: 16px; }
@media (min-width: 600px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }
.member { margin: 0; border: var(--line); background: var(--white); }
.member img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: top; }
.member figcaption { padding: 14px 16px 16px; display: grid; gap: 2px; }
.member b { font-family: var(--font-head); font-weight: 600; }
.member span { font-size: .85rem; color: var(--green-80); }
.job-grid { display: grid; gap: 16px; }
@media (min-width: 700px) { .job-grid { grid-template-columns: 1fr 1fr; } }
.job { background: rgba(250,248,242,.06); border: 1px solid rgba(250,248,242,.25); padding: 26px; display: flex; flex-direction: column; gap: 10px; transition: border-color .3s, transform .4s var(--ease); }
.job:hover { border-color: var(--lime); transform: translateY(-3px); }
.job__tag { font-family: var(--font-head); font-weight: 600; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.job h3 { color: var(--cream); margin: 0; font-size: 1.15rem; }
.job b { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 600; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }
.job b svg { width: 16px; height: 16px; }

/* ---------- Ablauf (einfach), Hinweisbox, Kontakt ---------- */
.steps-simple { display: grid; gap: 14px; }
@media (min-width: 800px) { .steps-simple { grid-template-columns: repeat(3, 1fr); } }
.step--simple { display: grid; grid-template-columns: 44px 1fr; gap: 16px; border: var(--line); padding: 22px; background: var(--white); }
.step--simple .step__num { position: static; width: 44px; height: 44px; }
.step--simple h3 { font-size: 1.05rem; margin: 2px 0 6px; }
.step--simple p { font-size: .93rem; color: var(--green-80); margin: 0; }
.note { border: var(--line); border-left: 3px solid var(--lime); background: var(--cream); padding: 22px 26px; }
.note p:last-child { margin: 0; }
.contact-grid { display: grid; gap: 34px; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.1fr 1fr; gap: 64px; } }
.contact-rows { display: grid; gap: 12px; margin-top: 18px; }
.contact-rows a { display: grid; gap: 2px; border: var(--line); padding: 14px 18px; background: var(--white); transition: border-color .3s; }
.contact-rows a:hover { border-color: var(--lime); }
.contact-rows small { font-family: var(--font-head); font-weight: 600; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lime-dark); }
.contact-rows b { font-weight: 400; }

/* ---------- Blog ---------- */
.post-grid { display: grid; gap: 16px; }
@media (min-width: 700px) { .post-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }
.post-card { border: var(--line); background: var(--white); display: flex; flex-direction: column; transition: border-color .3s, transform .4s var(--ease); }
.post-card:hover { border-color: var(--lime); transform: translateY(-4px); }
.post-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-bottom: var(--line-soft); }
.post-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-card__meta { font-family: var(--font-head); font-weight: 600; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lime-dark); }
.post-card h3 { font-size: 1.05rem; text-transform: none; margin: 0; }
.post-card p { font-size: .9rem; color: var(--green-80); margin: 0; }
.post-card b { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 600; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lime-dark); }
.post-card b svg { width: 16px; height: 16px; }
.post-hero { margin: 0; border: var(--line); }
.post-hero img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.post h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); text-transform: none; margin-top: 34px; }
.post h3 { font-size: 1.15rem; text-transform: none; margin-top: 28px; }
.post h4, .post h5 { font-size: 1.02rem; text-transform: none; margin-top: 22px; }
.post p { font-size: 1.02rem; }
.post .yt { margin: 26px 0; }
.post .check-list li { margin: 6px 0; }

/* ---------- Funnel eingebettet in eine Seite ---------- */
.funnel--inline { display: block; padding: 0; }
.funnel--inline .funnel__card { width: 100%; max-width: 820px; margin: 0 auto; }
.funnel--inline .funnel__card--wide { max-width: 1000px; }

/* Navigation: Einträge nie umbrechen; zwischen 1100 und 1320 px enger setzen */
.nav__link { white-space: nowrap; }
@media (min-width: 1100px) and (max-width: 1320px) {
  .nav__link { padding: 10px 8px; font-size: .72rem; letter-spacing: .05em; }
  .header--site .header__logo img { width: 180px; }
  .btn--sm { padding: 10px 14px; font-size: .68rem; }
}
.arrow-list { margin-bottom: 1.1em; }

/* =====================================================================
   STARTSEITE + FOOTER – 1:1 nach dem Webflow-Original (gemessen bei 1440 px)
   Sektion 60/50, Raster 1140 (container-m) bzw. 1317 (container-l),
   H2 54,4 px, H3 33,6 px, Topline 12,8 px / 2 px Sperrung, Text 16 px / 300.
   ===================================================================== */
.wf-section { position: relative; padding: 60px 50px; }
.wf-section--cream { background: var(--cream); }
.wf-section--dark { background: var(--green); color: var(--cream); overflow: hidden; }
.wf-section--insta { background: var(--cream); padding: 60px 50px; }
.wf-c { position: relative; max-width: 1140px; margin-inline: auto; }
.wf-cl { position: relative; max-width: 1317px; margin-inline: auto; }
.wf-cs { max-width: 720px; margin-inline: auto; }
.wf-center { text-align: center; }
.wf-bold { font-weight: 500; }

.wf-h2 { font-family: var(--font-head); font-weight: 600; font-size: 3.4rem; line-height: 1.1; text-transform: uppercase; text-align: center; color: var(--green); margin: 0 0 16px; text-wrap: balance; }
.wf-h3 { font-family: var(--font-head); font-weight: 600; font-size: 2.1rem; line-height: 1; text-transform: uppercase; color: var(--green); margin: 0 0 16px; }
.wf-h4 { font-family: var(--font-head); font-weight: 600; font-size: 1.4rem; line-height: 1.2; text-transform: uppercase; color: var(--green); margin: 0 0 16px; }
.wf-h5 { font-family: var(--font-head); font-weight: 600; font-size: 1.4rem; line-height: 1.25; text-transform: uppercase; color: var(--green); margin: 0 0 8px; }
.wf-h3--light, .wf-section--dark .wf-h2, .wf-section--dark .wf-h5 { color: var(--cream); }
.wf-topline { font-family: var(--font-body); font-weight: 500; font-size: .8rem; line-height: 1.5; letter-spacing: 2px; text-transform: uppercase; color: var(--green); margin: 0 0 10px; }
.wf-topline--center { text-align: center; }
.wf-section--dark .wf-topline { color: var(--cream); }
.wf-text { font-family: var(--font-body); font-weight: 300; font-size: 1rem; line-height: 1.6; color: var(--green); margin: 0; }
.wf-text strong { font-weight: 500; }
.wf-small { font-family: var(--font-body); font-weight: 300; font-size: 1rem; line-height: 1.5; color: var(--green); margin: 0; }
.wf-text--light, .wf-section--dark .wf-text, .wf-section--dark .wf-small { color: var(--cream); }
.wf-phone { font-family: var(--font-body); font-weight: 400; font-size: .8rem; line-height: 1.5; color: var(--green); margin: 9px 0 0; text-align: center; }
.wf-phone a { color: var(--lime-dark); text-decoration: underline; text-underline-offset: 2px; }
.wf-section--dark .wf-phone, .wf-cta .wf-phone { color: var(--cream); }
.wf-section--dark .wf-phone a, .wf-cta .wf-phone a { color: var(--lime); }

/* Button wie .button.button-primary: 13,6 px / 600 / 0,3 px, 14,4 × 28,8 px */
.wf-btn { display: inline-block; padding: 14.4px 28.8px; font-size: .85rem; letter-spacing: .3px; line-height: 1.5; box-shadow: none; transform: none; }
.wf-btn:hover { transform: none; }
.wf-btn--sm { font-size: .8rem; letter-spacing: 1px; }
.wf-btn--yt { background: #E01C1F; color: #fff; }
.wf-btn--yt:hover { background: #B7151A; }
.wf-btnwrap { display: flex; flex-direction: column; align-items: center; margin-top: 30px; }
.wf-btnwrap--left { align-items: flex-start; }
.wf-btnwrap--left .wf-phone { text-align: left; align-self: flex-start; padding-left: 10px; }
.wf-btnwrap--top { margin-top: 30px; }
.wf-btnwrap--top50 { margin-top: 50px; }

/* Linien */
.wf-line { height: 1px; background: var(--green); }
.wf-line--100 { margin: 100px 0; }
.wf-line--white { background: rgba(255,255,255,.25); margin: 30px 0; }

/* Zweispalter 1140 = 540 | 60 | 540 */
.wf-2er { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin: 70px 0 29px; }
.wf-2er--first { margin-top: 0; }
.wf-2er--mehr { grid-template-columns: 594fr 445fr; gap: 60px 100px; margin: 80px 0 0; }
.wf-2er--voice { grid-template-columns: 1fr 1fr; gap: 40px 120px; margin: 100px 0 0; }
.wf-3er { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 40px; margin-top: 50px; }
.wf-3er--yt { gap: 16px; margin-top: 80px; }
.wf-3er--blog { gap: 20px; margin-top: 30px; }
.wf-3er--praxis img { width: 100%; height: 230px; object-fit: cover; display: block; }
.wf-3er--presse img { width: 100%; height: 250px; object-fit: cover; display: block; }
.wf-press { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.wf-content { min-width: 0; }
.wf-content > .wf-text + .wf-text { margin-top: 16px; }

/* Bild mit Gestaltungskasten dahinter (.image-wrapper.i-layers-left / -right) */
.i-layers { position: relative; display: flex; justify-content: center; align-items: center; min-height: 402px; }
.i-layers__deko { position: absolute; top: -16px; left: 50%; width: 400px; max-width: none; height: auto; transform: translateX(calc(-50% + 80px)); z-index: 0; pointer-events: none; }
.i-layers--right .i-layers__deko { transform: translateX(calc(-50% - 80px)); }
.i-layers__foto { position: relative; z-index: 1; width: min(100%, 454px); height: 402px; object-fit: cover; display: block; }

/* Unterpunkte: 2 Spalten 240 | 60 | 240, „>“ in Lime + 500er Text */
.wf-vita { display: grid; grid-template-columns: 1fr 1fr; gap: 0 60px; margin-top: 12px; }
.wf-vita--1 { grid-template-columns: 1fr; margin-top: 4px; }
.wf-vita__item { display: flex; align-items: flex-start; gap: 6px; margin-top: 20px; font-family: var(--font-body); font-size: 1rem; line-height: 1.5; font-weight: 300; color: var(--green); }
.wf-vita--1 .wf-vita__item { margin-top: 10px; }
.wf-vita__item strong { font-weight: 500; }
.wf-pfeil { color: var(--lime); font-weight: 600; flex: 0 0 auto; }
a.wf-vita__item:hover strong { color: var(--lime-dark); }

/* Video-Kasten (dunkel) wie .video-wrapper-voices */
.wf-videobox { background: var(--green); position: relative; }
.wf-videobox .yt { aspect-ratio: 16 / 9; }
.wf-ytbox { background: var(--cream); }
.wf-section--cream .wf-ytbox { background: #fff; }
.wf-ytbox .yt { aspect-ratio: 16 / 9; }

/* Hero */
.wf-hero { position: relative; background: #fff; padding: 40px 50px 70px; }
.wf-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 120px; align-items: center; margin-top: 20px; }
.wf-hero__video { position: relative; background: var(--green); }
.wf-hero__video .video-frame { position: relative; z-index: 1; margin: 0; }
.wf-hero__video-gs { position: absolute; top: 50px; left: -9px; right: -9px; bottom: -17px; border: 1px solid var(--mist); z-index: 0; }
.wf-hero__brands { display: grid; grid-template-columns: 192px 153px 153px; gap: 50px; align-items: center; margin-top: 20px; }
.wf-hero__brands img { height: 120px; width: auto; max-width: 100%; justify-self: center; }
.wf-gbadge { display: inline-flex; align-items: center; gap: 12px; padding: 12px 15px; color: var(--green); text-decoration: none; }
.wf-gbadge__g { display: inline-flex; }
.wf-gbadge > span:last-child { display: flex; flex-direction: column; line-height: 1.15; }
.wf-gbadge b { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; }
.wf-gbadge .stars { color: #FBBC05; font-size: .95rem; letter-spacing: 2px; }
.wf-gbadge small { font-size: .72rem; color: #4d5c54; }
.wf-hero__text h1 { font-family: var(--font-head); font-weight: 600; font-size: 3.8rem; line-height: 1.05; text-transform: uppercase; color: var(--green); margin: 0 0 16px; }
.wf-hero__text .wf-text { max-width: 85%; }

/* Behandlungen */
#behandlungen .wf-h2 { max-width: 640px; margin-inline: auto; }
#behandlungen .wf-2er--treat:first-of-type { margin-top: 150px; }

/* CTA-Band: dunkelgrün + Bild + 70 % Overlay, 612 | 120 | 408 */
.wf-cta { position: relative; background: var(--green); color: var(--cream); padding: 80px 50px; overflow: hidden; }
.wf-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.wf-cta__overlay { position: absolute; inset: 0; background: var(--green); opacity: .7; z-index: 1; }
.wf-cta__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 612fr 408fr; gap: 40px 120px; align-items: center; }
.wf-cta__grid .wf-h3 { margin: 0; }
.wf-cta__grid .wf-btnwrap { margin-top: 0; }

/* Patientenstimmen */
/* Ringe wie im Original: volle Sektionsbreite, 150 px von oben, linksbündig */
.wf-rings { position: absolute; top: 150px; left: 0; width: 100%; height: auto; max-width: 100%; pointer-events: none; }
.wf-quote blockquote { font-family: var(--font-head); font-weight: 600; font-size: 1.75rem; line-height: 1.1; text-transform: uppercase; color: var(--cream); margin: 0 0 20px; padding: 0; border: 0; background: none; }
.wf-stars { width: 100px; height: auto; display: block; }
.wf-reviews { margin-top: 60px; background: #fff; padding: 10px; }

/* Blog */
.wf-blog-head { position: relative; }
.wf-blog-head__deko { position: absolute; left: 50%; top: 50%; transform: translate(calc(-50% - 260px), -55%); width: 150px; opacity: .8; pointer-events: none; }
.wf-post { display: flex; flex-direction: column; background: #fff; color: var(--green); text-decoration: none; border: 1px solid var(--mist); }
.wf-section--cream .wf-post { border: 0; }
.wf-post__img { height: 328px; overflow: hidden; }
.wf-post__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.wf-post:hover .wf-post__img img { transform: scale(1.04); }
.wf-post__body { padding: 25px; display: flex; flex-direction: column; flex: 1; }
.wf-post__meta { font-family: var(--font-body); font-size: .8rem; letter-spacing: 1px; text-transform: uppercase; color: var(--green); margin: 0 0 20px; display: flex; gap: 8px; }
.wf-post__body .wf-btn { margin-top: auto; align-self: flex-start; }
.wf-post .wf-h5 { margin-bottom: 15px; }

/* FAQ mit Plus-Button und Linie */
.wf-faq { margin-top: 50px; }
.wf-faq__item { position: relative; }
.wf-faq__item + .wf-faq__item { margin-top: 15px; }
.wf-faq__q { position: relative; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 25px 70px 25px 0; background: none; border: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.wf-faq__q .wf-h5 { margin: 0; overflow-wrap: anywhere; hyphens: auto; }
.wf-faq__plus { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border: 1px solid var(--lime); border-radius: 100px; display: grid; place-items: center; transition: transform .3s ease, background .3s ease; }
.wf-faq__plus img { width: 11px; height: 11px; display: block; }
.wf-faq__q[aria-expanded="true"] .wf-faq__plus { transform: translateY(-50%) rotate(45deg); background: var(--lime); }
.wf-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.wf-faq__a > div { overflow: hidden; }
.wf-faq__item.is-open .wf-faq__a { grid-template-rows: 1fr; }
.wf-faq__item.is-open .wf-faq__a > div { padding-bottom: 25px; }
.wf-faq__a p { margin: 0 0 10px; }
.wf-faq__a ul { margin: 10px 0; padding-left: 20px; }
.wf-faq__line { height: 1px; background: var(--mist); position: relative; }
.wf-faq__line i { position: absolute; left: 0; top: 0; height: 1px; width: 0; background: var(--lime); transition: width .5s ease; }
.wf-faq__item.is-open .wf-faq__line i { width: 100%; }

/* Footer: 70/50/60, container-l 1317, Raster 337 | 449 | 449 */
.wf-footer { background: var(--cream); color: var(--green); padding: 70px 50px 60px; }
.wf-footer__top { display: grid; grid-template-columns: 337px 1fr 1fr; gap: 50px 40px; margin-top: 20px; }
.wf-footer__brand { display: flex; align-items: flex-start; }
.wf-footer__brand img { width: 120px; height: auto; display: block; }
.wf-footer__vline { width: 1px; align-self: stretch; background: rgba(0,0,0,.47); margin: 0 40px 0 auto; }
.wf-footer__label { font-family: var(--font-body); font-weight: 400; font-size: .8rem; letter-spacing: 2px; text-transform: uppercase; color: var(--green); margin: 0 0 10px; }
.wf-footer__row { display: flex; gap: 0; font-family: var(--font-body); font-size: .9rem; line-height: 1.55; color: var(--green); }
.wf-footer__day { flex: 0 0 35px; }
.wf-footer__adresse { margin: 22px 0 0; font-size: .9rem; line-height: 1.55; }
.wf-footer__contact { display: flex; flex-direction: column; align-items: flex-start; }
.wf-footer__big { display: flex; flex-direction: column; margin-bottom: 25px; color: var(--green); text-decoration: none; }
.wf-footer__big span { font-family: var(--font-head); font-weight: 400; font-size: 1.4rem; line-height: 1.3; text-transform: uppercase; }
.wf-footer__big i { display: block; height: 1px; margin-top: 5px; background: var(--green); width: 0; transition: width .5s ease; }
.wf-footer__big:hover i { width: 100%; }
.wf-footer__seals { display: grid; grid-template-columns: repeat(4, 1fr) 245px; gap: 50px; align-items: center; margin-top: 20px; }
.wf-footer__seals > div { display: flex; justify-content: center; align-items: center; }
.wf-footer__seals img { height: 110px; width: auto; max-width: 183px; object-fit: contain; }
.wf-footer__seals > div:nth-child(3) img { height: 85px; }
.wf-footer__seals > div:nth-child(4) img { height: 120px; }
.wf-footer__jameda { justify-content: flex-start; }
.wf-footer__bottom { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: center; margin-top: 100px; }
.wf-footer__partner { display: flex; align-items: center; gap: 10px; color: var(--green); text-decoration: none; font-family: var(--font-body); font-size: .8rem; }
.wf-footer__partner strong { font-weight: 700; }
.wf-footer__partner img { width: 52px; height: auto; }
.wf-footer__copy { font-family: var(--font-body); font-size: .8rem; margin: 0; }
.wf-footer__social { display: flex; justify-content: center; gap: 4px; }
.wf-footer__social a { width: 40px; height: 40px; border: 1px solid var(--mist); border-radius: 1000px; display: grid; place-items: center; transition: border-color .3s; }
.wf-footer__social a:hover { border-color: var(--lime); }
.wf-footer__social img { width: 18px; height: 18px; }
.wf-footer__legal { display: flex; justify-content: flex-end; }
.wf-footer__legal a { font-family: var(--font-body); font-size: .85rem; color: var(--green); text-decoration: none; margin-left: 20px; }
.wf-footer__legal a:hover { color: var(--lime-dark); }

/* Tablet */
@media (max-width: 1100px) {
  .wf-hero__grid { gap: 16px 50px; }
  .wf-hero__brands { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .wf-hero__text h1 { font-size: 3rem; }
  .wf-h2 { font-size: 2.8rem; }
  .wf-2er--voice { gap: 40px 60px; }
  .wf-cta__grid { gap: 40px 60px; }
  .wf-footer__top { grid-template-columns: 240px 1fr 1fr; }
  .wf-footer__seals { grid-template-columns: repeat(3, 1fr); gap: 30px; }
  .wf-footer__bottom { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .wf-footer__legal { justify-content: flex-start; }
  .wf-footer__legal a { margin: 0 20px 0 0; }
  .wf-footer__social { justify-content: flex-start; }
}

/* Mobil (Original: Sektion 50/30, H2 33,6 px, H3 28,8 px, H1 38,4 px, Text zuerst, Kasten aus) */
@media (max-width: 767px) {
  .wf-section, .wf-section--insta, .wf-hero, .wf-cta, .wf-footer { padding-left: 30px; padding-right: 30px; }
  .wf-section, .wf-section--insta { padding-top: 50px; padding-bottom: 50px; }
  .wf-cta { padding: 50px 30px; }
  .wf-hero { padding-top: 30px; padding-bottom: 50px; }
  .wf-h2 { font-size: 2.1rem; }
  .wf-h3 { font-size: 1.8rem; }
  .wf-hero__text h1 { font-size: 2.4rem; }
  .wf-hero__grid { grid-template-columns: 1fr; gap: 30px; }
  .wf-hero__text { order: 1; }
  .wf-hero__media { order: 2; }
  .wf-hero__text .wf-text { max-width: none; }
  .wf-hero__brands { grid-template-columns: auto 1fr 1fr; gap: 14px; width: min(100%, 340px); margin-inline: auto; }
  .wf-hero__brands img { height: 90px; }
  .wf-gbadge { padding: 0; gap: 8px; }
  .wf-gbadge small { white-space: nowrap; }
  .wf-gbadge b { font-size: 1.2rem; }
  .wf-2er, .wf-2er--mehr, .wf-2er--voice, .wf-3er { grid-template-columns: 1fr; }
  .wf-2er { gap: 50px; margin: 70px 0 0; }
  .wf-2er--first { margin-top: 30px; }
  .wf-2er--flip .i-layers { order: -1; }
  .wf-2er--voice { gap: 40px; margin-top: 60px; }
  .wf-3er { gap: 16px; margin-top: 40px; }
  #behandlungen .wf-2er--treat:first-of-type { margin-top: 50px; }
  .i-layers { min-height: 0; display: block; }
  .i-layers__deko { display: none; }
  .i-layers__foto { width: 100%; height: auto; aspect-ratio: 454 / 402; }
  .wf-vita { grid-template-columns: 1fr; gap: 0; }
  .wf-cta__grid { grid-template-columns: 1fr; gap: 24px; }
  .wf-cta__grid .wf-h3 { text-align: center; }
  .wf-btnwrap--left { align-items: center; }
  .wf-btnwrap--left .wf-phone { text-align: center; padding-left: 0; }
  .wf-quote blockquote { font-size: 1.5rem; }
  .wf-line--100 { margin: 60px 0; }
  .wf-blog-head__deko { display: none; }
  .wf-post__img { height: 220px; }
  .wf-faq__q { padding-right: 60px; }
  .wf-footer { padding: 50px 31px; }
  .wf-footer__top { grid-template-columns: 1fr; gap: 30px; margin-top: 0; }
  .wf-footer__brand { flex-direction: column; align-items: center; gap: 24px; }
  .wf-footer__vline { width: 190px; height: 1px; margin: 0 auto; align-self: center; }
  .wf-footer__hours, .wf-footer__contact { align-items: center; text-align: center; }
  .wf-footer__row { justify-content: center; }
  .wf-footer__seals { grid-template-columns: 1fr 1fr; gap: 30px 20px; justify-items: center; margin-top: 30px; }
  .wf-footer__seals img { height: 90px; }
  .wf-footer__jameda { grid-column: 1 / -1; justify-content: center; }
  .wf-footer__bottom { grid-template-columns: 1fr; gap: 20px 16px; margin-top: 50px; justify-items: center; text-align: center; }
  .wf-footer__legal, .wf-footer__social { justify-content: center; }
  .wf-footer__legal a { margin: 0 10px; }
}
@media (max-width: 479px) {
  .wf-section, .wf-section--insta, .wf-hero, .wf-cta { padding-left: 16px; padding-right: 16px; }
  .wf-footer { padding-left: 16px; padding-right: 16px; }
  .wf-h2 { font-size: 1.85rem; }
  .wf-hero__text h1 { font-size: 2.1rem; }
  .wf-btn { padding: 13px 22px; }
}

/* =====================================================================
   KARRIERE (/karriere, /jobs/*, /bewerbung) und Funnel-Seite /termin
   ===================================================================== */
.wf-left { text-align: left; }
.kr-hero { position: relative; min-height: 560px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--cream); padding: 90px 50px; overflow: hidden; background: var(--green); }
.kr-hero--job { min-height: 460px; padding: 70px 50px; }
.kr-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; z-index: 0; }
.kr-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(32,54,42,.55) 0%, rgba(32,54,42,.72) 100%); z-index: 1; }
.kr-hero__inner { position: relative; z-index: 2; max-width: 900px; }
.kr-hero .wf-topline { color: var(--lime); }
.kr-hero h1 { font-family: var(--font-head); font-weight: 600; font-size: 3.8rem; line-height: 1.05; text-transform: uppercase; color: var(--cream); margin: 0 0 18px; text-wrap: balance; }
.kr-hero--job h1 { font-size: 2.8rem; }
.kr-hero__lead { font-family: var(--font-body); font-weight: 300; font-size: 1.1rem; line-height: 1.6; max-width: 640px; margin: 0 auto 30px; color: var(--cream); }
.kr-hero__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; }
.kr-hero__note { font-size: .8rem; opacity: .85; }
.kr-btn--ghost { background: transparent; color: var(--cream); border: 1px solid rgba(250,248,242,.7); }
.kr-btn--ghost:hover { background: var(--cream); color: var(--green); }
.breadcrumb--light { justify-content: center; color: rgba(250,248,242,.8); margin-bottom: 26px; }
.breadcrumb--light a { color: var(--cream); }

/* Stellen */
.kr-jobs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.kr-job { background: #fff; border: 1px solid var(--mist); padding: 32px; display: flex; flex-direction: column; gap: 14px; transition: border-color .3s, transform .3s; }
.kr-job:hover { border-color: var(--lime); transform: translateY(-3px); }
.kr-job__tag { display: inline-block; font-family: var(--font-body); font-size: .75rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--lime-dark); font-weight: 500; margin-bottom: 8px; }
.kr-job h3 { font-family: var(--font-head); font-weight: 600; font-size: 1.4rem; line-height: 1.2; text-transform: uppercase; color: var(--green); margin: 0; }
.kr-job__btns { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding-top: 8px; }
.kr-job__apply { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 600; font-size: .78rem; letter-spacing: .3px; text-transform: uppercase; color: var(--green); }
.kr-job__apply svg { width: 16px; height: 16px; transition: transform .3s; }
.kr-job__apply:hover svg { transform: translateX(4px); }

/* Vorteile */
.kr-vorteile { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 50px; position: relative; }
.kr-vorteil { border: 1px solid rgba(250,248,242,.25); padding: 28px 26px; display: flex; align-items: center; gap: 18px; background: rgba(250,248,242,.04); transition: border-color .3s, background .3s; }
.kr-vorteil:hover { border-color: var(--lime); background: rgba(250,248,242,.07); }
.kr-vorteil__icon { flex: 0 0 52px; width: 52px; height: 52px; border: 1px solid var(--lime); border-radius: 100px; display: grid; place-items: center; color: var(--lime); }
.kr-vorteil__icon svg { width: 24px; height: 24px; }
.kr-vorteil h3 { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; line-height: 1.25; text-transform: uppercase; color: var(--cream); margin: 0; }

/* Teamgalerie (3 · 3 · 2 wie im Original) */
.kr-intro { max-width: 760px; }
.kr-intro .wf-h2 { text-align: left; margin-bottom: 20px; }
.kr-galerie { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 240px; gap: 12px; margin-top: 44px; }
.kr-galerie__item { margin: 0; overflow: hidden; grid-column: span 2; }
.kr-galerie__item--4 { grid-column: span 2; }
.kr-galerie__item--7 { grid-column: span 4; }
.kr-galerie__item--8 { grid-column: span 2; }
.kr-galerie img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.kr-galerie__item:hover img { transform: scale(1.04); }

/* Praxis-Slider (reines CSS, Scroll-Snap) */
.kr-slider { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; margin-top: 40px; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: var(--lime) transparent; }
.kr-slider__slide { flex: 0 0 calc(50% - 8px); scroll-snap-align: start; margin: 0; }
.kr-slider__slide img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.kr-slider__dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.kr-slider__dots a { width: 10px; height: 10px; border-radius: 100px; border: 1px solid var(--green); display: block; }
.kr-slider__dots a:hover { background: var(--lime); border-color: var(--lime); }
.kr-praxis-text { max-width: 760px; margin: 50px auto 0; text-align: center; }
.kr-praxis-text .wf-text + .wf-text { margin-top: 14px; }

/* Ansprechpartnerin */
.kr-kontakt { display: grid; grid-template-columns: 440px 1fr; gap: 60px; align-items: center; }
.kr-kontakt > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.kr-kontakt .wf-text + .wf-text { margin-top: 12px; }
.kr-kontakt__links { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.kr-kontakt__links a, .kr-side-card a { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 600; font-size: .95rem; color: var(--green); }
.kr-kontakt__links a:hover, .kr-side-card a:hover { color: var(--lime-dark); }
.kr-kontakt__links svg, .kr-side-card svg { width: 18px; height: 18px; color: var(--lime-dark); flex: none; }

/* Einblicke */
.kr-einblicke { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
.kr-einblick { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; }
.kr-einblick img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.kr-einblick:hover img { transform: scale(1.04); }

/* Stellenseite */
.kr-job-layout { display: grid; grid-template-columns: 1fr 340px; gap: 60px; align-items: start; }
.kr-job-body h3 { font-family: var(--font-head); font-weight: 600; font-size: 1.4rem; text-transform: uppercase; color: var(--green); margin: 34px 0 12px; }
.kr-job-body h3:first-child { margin-top: 0; }
.kr-job-body .check-list { gap: 10px; margin: 14px 0 8px; }
.kr-job-body .check-list li { font-weight: 300; line-height: 1.55; }
.kr-job-side { display: grid; gap: 20px; position: sticky; top: 110px; }
.kr-side-card { background: var(--cream); border: 1px solid var(--mist); padding: 26px; display: flex; flex-direction: column; gap: 6px; }
.kr-side-card > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 14px; }
.kr-side-card .wf-topline { margin-bottom: 2px; }
.kr-side-card .wf-h4 { margin-bottom: 0; }
.kr-side-card a { margin-top: 8px; }

/* Anfrage-Box auf /neupatient */
.anfrage-box { background: #fff; border: 1px solid var(--mist); padding: 34px; }

/* Funnel als eigene Seite (/termin, /bewerbung) */
.header--funnel { position: static; }
.header--funnel .header__phone { display: inline-flex; }
.header--funnel .header__phone { white-space: nowrap; min-height: 44px; }
.header--funnel .btn--sm { min-height: 44px; }
.funnel__card { margin-inline: auto; }
/* Handy: Telefon als runder Knopf (Daumen), Nummer steht im Funnel selbst */
@media (max-width: 520px) {
  .header--funnel .header__phone { width: 44px; height: 44px; justify-content: center; border: var(--line); border-radius: 50%; }
  .header--funnel .header__phone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
.funnel--page { padding-top: 40px; }
.funnel-footer { background: var(--cream); padding: 24px 0; font-size: .85rem; color: var(--green); }
.funnel-footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
.funnel-footer nav a { margin-left: 18px; }
.field-row--2 { grid-template-columns: 1fr 1fr; }
#funnelCard.is-done form, #funnelCard.is-done .funnel__progress { display: none; }

@media (max-width: 1100px) {
  .kr-vorteile { grid-template-columns: 1fr 1fr; }
  .kr-kontakt { grid-template-columns: 1fr 1fr; gap: 40px; }
  .kr-job-layout { grid-template-columns: 1fr 300px; gap: 40px; }
  .kr-einblicke { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .kr-hero { min-height: 0; padding: 70px 30px; }
  .kr-hero h1 { font-size: 2.4rem; }
  .kr-hero--job h1 { font-size: 1.9rem; }
  .kr-hero__lead { font-size: 1rem; }
  .kr-jobs { grid-template-columns: 1fr; gap: 16px; margin-top: 30px; }
  .kr-job { padding: 24px; }
  .kr-vorteile { grid-template-columns: 1fr; gap: 12px; margin-top: 30px; }
  .kr-vorteil { padding: 20px; }
  .kr-galerie { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; gap: 8px; margin-top: 30px; }
  .kr-galerie__item, .kr-galerie__item--7 { grid-column: span 1; }
  .kr-slider__slide { flex-basis: 85%; }
  .kr-kontakt { grid-template-columns: 1fr; gap: 24px; }
  .kr-einblicke { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kr-job-layout { grid-template-columns: 1fr; gap: 30px; }
  .kr-job-side { position: static; }
  .kr-intro .wf-h2 { text-align: left; }
  .anfrage-box { padding: 22px 18px; }
  .field-row--2 { grid-template-columns: 1fr; }
  .funnel-footer .container { flex-direction: column; text-align: center; }
  .funnel-footer nav a { margin: 0 9px; }
}
@media (max-width: 479px) {
  .kr-hero { padding: 56px 16px; }
  .kr-hero h1 { font-size: 2rem; }
}

/* Themenkarten (Leistungsübersicht + „Weitere Themen“ auf den Unterseiten) */
.tcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--mist); color: var(--green); text-decoration: none; transition: border-color .3s, transform .3s; }
.tcard:hover { border-color: var(--lime); transform: translateY(-3px); }
.tcard__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--cream); }
.tcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.tcard:hover .tcard__img img { transform: scale(1.04); }
.tcard__body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tcard__kat { font-family: var(--font-body); font-size: .72rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--lime-dark); font-weight: 500; }
.tcard h3 { font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; line-height: 1.25; text-transform: uppercase; color: var(--green); margin: 0; text-wrap: balance; }
.tcard p { font-family: var(--font-body); font-weight: 300; font-size: .95rem; line-height: 1.55; color: var(--green); margin: 0; }
.tcard__more { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 600; font-size: .78rem; letter-spacing: .3px; text-transform: uppercase; color: var(--green); }
.tcard__more svg { width: 16px; height: 16px; transition: transform .3s; }
.tcard:hover .tcard__more svg { transform: translateX(4px); }
.tcard:hover .tcard__more { color: var(--lime-dark); }
@media (max-width: 1100px) { .tcards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .tcards { grid-template-columns: 1fr; gap: 14px; } .tcard__body { padding: 18px 18px 20px; } }

/* Hinweis unter der Mehrfachauswahl (automatisches Weiterschalten) */
.auto-hint { display: none; margin: -14px 0 16px; font-size: .85rem; color: var(--green-80, #4d5c54); }
.auto-hint.is-visible { display: flex; align-items: center; gap: 8px; animation: fadeUp .35s ease; }
.auto-hint::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--lime, #97C445); border-top-color: transparent; animation: autoSpin .9s linear infinite; flex: none; }
@keyframes autoSpin { to { transform: rotate(360deg); } }

/* Patientenstatus-Weiche und Bestandspatienten-Weg */
.bstep { display: none; animation: fadeUp .45s var(--ease); }
.bstep.is-active { display: block; }
#statusChoices .choice { align-items: center; }
#statusChoices .choice > span:last-child { display: flex; flex-direction: column; gap: 2px; }
#statusChoices .choice b { font-family: var(--font-head); font-weight: 600; font-size: .95rem; }
#statusChoices .choice small { font-size: .82rem; opacity: .8; }
#bestand .final-alt { margin-bottom: 22px; }

.bstep h2 { text-transform: none; font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin-bottom: 6px; }
.bstep .hint { color: var(--green-80); font-size: .95rem; margin-bottom: 22px; }

/* ---------- Preis-Karten (@@preise, z. B. /zahnimplantat-kosten) ---------- */
.preise { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .preise { grid-template-columns: repeat(3, 1fr); } }
.preis { background: var(--white); border: var(--line); padding: clamp(26px, 3vw, 38px); display: flex; flex-direction: column; position: relative; }
.preis::after { content: ''; position: absolute; left: 0; top: 0; width: 40px; height: 2px; background: var(--lime); }
.preis__titel { font-family: var(--font-head); font-weight: 600; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lime-dark); margin: 0; }
.preis__betrag { white-space: nowrap; font-family: var(--font-head); font-weight: 600; font-size: clamp(1.9rem, 2.8vw, 2.4rem); line-height: 1.1; color: var(--green); margin: 18px 0 4px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.preis__einheit { font-size: .95rem; color: var(--green-80); margin: 0; padding-bottom: 20px; border-bottom: var(--line-soft); }
.preis__text { color: var(--green-80); font-size: 1rem; margin: 18px 0 0; }
.preis--haupt { background: var(--green); border-color: var(--green); }
.preis--haupt .preis__titel { color: var(--lime); }
.preis--haupt .preis__betrag { color: var(--cream); }
.preis--haupt .preis__einheit { color: rgba(250,248,242,.75); border-bottom-color: rgba(250,248,242,.2); }
.preis--haupt .preis__text { color: rgba(250,248,242,.85); }
.preis-leiste { margin-top: 22px; background: var(--white); border: var(--line); display: grid; grid-template-columns: 1fr; }
@media (min-width: 700px) { .preis-leiste { grid-template-columns: 1fr 1fr; } .preis-leiste__posten + .preis-leiste__posten { border-left: var(--line-soft); } }
.preis-leiste__posten { padding: clamp(22px, 2.6vw, 30px) clamp(24px, 3vw, 38px); }
.preis-leiste__posten + .preis-leiste__posten { border-top: var(--line-soft); }
@media (min-width: 700px) { .preis-leiste__posten + .preis-leiste__posten { border-top: 0; } }
.preis-leiste__betrag { font-family: var(--font-head); font-weight: 600; font-size: 1.6rem; color: var(--green); margin: 10px 0 0; font-variant-numeric: tabular-nums; }
.preis-leiste__betrag span { font-family: var(--font-body); font-weight: 400; font-size: .95rem; color: var(--green-80); margin-left: 6px; }
.preis-leiste .preis__text { margin-top: 8px; font-size: .95rem; }
.preise__hinweis { text-align: center; font-size: .9rem; color: var(--green-80); margin: 22px auto 0; max-width: 60ch; }

/* Funnel am Handy: „Weiter“ bei der Themenauswahl klebt unten am Daumen (kein automatisches Weiter) */
@media (max-width: 759px) {
  .fstep[data-step="2"] .funnel__nav { position: sticky; bottom: 0; z-index: 5; background: var(--white); margin: 8px -24px 0; padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -12px 20px -16px rgba(32, 54, 42, .45); }
  .fstep[data-step="2"] .funnel__nav span { display: none; }
  .fstep[data-step="2"] .funnel__nav .btn { flex: 1; justify-content: center; min-height: 52px; }
}

/* Daumen: „Zurück“ in den Funnels mindestens 44 px hoch */
.funnel__back { min-height: 44px; min-width: 44px; padding-inline: 8px; }