/* Zahnarztpraxis Dr. Fleischmann · Pitch wedolegacy
   Prinzip: die Petrol-Kachel aus dem Logo. Sie liegt auf jedem Foto und hebt sich (nur transform). */
@font-face { font-family: "Bespoke Serif"; src: url(../assets/fonts/bespoke.woff2) format("woff2"); font-weight: 380 560; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url(../assets/fonts/satoshi.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --kalk: #f4f0e8; --kalk2: #ebe5d9; --white: #fff;
  --petrol: #006878; --petrol2: #267f8c; --tief: #0b3439; --tief2: #0f4148;
  --ink: #15282b; --mute: #566769; --line: rgba(21, 40, 43, .14);
  --ziegel: #b85c3a;
  --serif: "Bespoke Serif", Georgia, "Times New Roman", serif;
  --sans: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hd: 64px; --g: 20px;
  --ease: cubic-bezier(.22, .61, .2, 1); --lift: cubic-bezier(.72, 0, .2, 1);
}
@media (min-width: 900px) { :root { --hd: 76px; --g: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; -webkit-tap-highlight-color: transparent; scroll-padding-top: var(--hd); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--kalk); color: var(--ink); font: 400 17px/1.6 var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, figure, blockquote, ul { margin: 0; }
ul { padding: 0; list-style: none; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 300; background: var(--ink); color: #fff; padding: 10px 14px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--petrol2); outline-offset: 3px; }
.wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--g); }

/* ---------- Kachel-Reveal (das Prinzip) ---------- */
.kr { position: relative; display: block; overflow: hidden; background: var(--kalk2); isolation: isolate; }
.kr img { width: 100%; height: 100%; object-fit: cover; }
.kr picture { display: block; height: 100%; }
.kr__k { display: none; }
.js .kr__k { display: grid; place-items: center; position: absolute; inset: -1px; z-index: 2; background: var(--petrol); transform: translate3d(0, 0, 0); transition: transform 1.05s var(--lift); will-change: transform; }
.js .kr__k svg { width: 44%; max-width: 220px; color: var(--petrol2); transform: translate3d(0, 0, 0); transition: transform 1.25s var(--lift); }
.js .kr img { transform: scale(1.08); transition: opacity .6s var(--ease), transform 1.6s var(--ease); will-change: transform; backface-visibility: hidden; }
.js .kr.rv-in .kr__k { transform: translate3d(0, -101%, 0); }
.js .kr.rv-in .kr__k svg { transform: translate3d(0, 38%, 0); }
.js .kr.rv-in img { transform: scale(1); }
.js .kr.rv-done .kr__k { visibility: hidden; }

/* Lazy-Bilder weich (nur opacity) */
.js img[loading="lazy"]:not(.ld) { opacity: 0; }

/* ---------- Typo-Bausteine ---------- */
.kick { display: flex; align-items: center; gap: 12px; font: 500 12px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--petrol); }
.kick__n { display: inline-grid; place-items: center; width: 28px; height: 28px; background: var(--petrol); color: #fff; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.h2 { font: 400 clamp(30px, 4.3vw, 58px)/1.08 var(--serif); letter-spacing: -.012em; margin-top: 22px; max-width: 24ch; text-wrap: balance; }
.lead { margin-top: 20px; max-width: 58ch; color: var(--mute); font-size: 17px; }
.sh { margin-bottom: 44px; }
@media (min-width: 900px) { .sh { margin-bottom: 64px; } .lead { font-size: 18px; } }

.ln { display: inline-flex; align-items: center; gap: 10px; padding: 12px 0 10px; border-top: 1px solid currentColor; font: 500 12px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.ln b { font-weight: 700; letter-spacing: .08em; }
.ln svg { width: 20px; height: 12px; transition: transform .45s var(--ease); }
.ln:hover svg { transform: translateX(5px); }

.sq { display: inline-grid; place-items: center; width: 20px; height: 20px; font: 600 10px/1 var(--sans); font-style: normal; letter-spacing: 0; color: #fff; flex: none; }
.sq--kasse { background: var(--petrol); }
.sq--privat { background: var(--ink); }
.sq--rueck { background: var(--ziegel); }

/* ---------- Header ---------- */
.hd { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hd); display: flex; align-items: center; gap: 18px; padding: 0 var(--g); color: var(--petrol); background: rgba(244, 240, 232, 0); transition: background-color .4s var(--ease), color .4s var(--ease), transform .5s var(--ease), box-shadow .4s; }
.hd.is-s { background: var(--kalk); box-shadow: 0 1px 0 var(--line); }
.hd.is-dark { color: #e9f1f1; background: var(--tief); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
.hd.is-dark .hd__word { color: #e9f1f1; }
.hd.is-up { transform: translateY(-100%); }
.hd__logo { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.hd__mark { width: 36px; height: 36px; flex: none; }
.hd__word { width: 210px; height: auto; color: var(--petrol); transition: color .4s; }
.hd__nav { display: none; }
.hd__tel { display: none; }
.lang { display: flex; }
.hd > .lang { display: none; }
.lang button { padding: 6px 7px; font: 500 12px/1 var(--sans); letter-spacing: .12em; opacity: .62; transition: opacity .3s; position: relative; }
.lang button[aria-pressed="true"] { opacity: 1; }
.lang button[aria-pressed="true"]::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: 0; height: 1px; background: currentColor; }
.hd__burger { width: 44px; height: 44px; display: grid; place-content: center; gap: 7px; margin-right: -10px; }
.hd__burger i { display: block; width: 24px; height: 1.5px; background: currentColor; transition: transform .4s var(--ease); }
.hd__burger[aria-expanded="true"] i:first-of-type { transform: translateY(4.25px) rotate(45deg); }
.hd__burger[aria-expanded="true"] i:last-of-type { transform: translateY(-4.25px) rotate(-45deg); }
@media (max-width: 380px) { .hd__word { width: 170px; } }
@media (min-width: 1100px) {
  .hd { gap: 28px; }
  .hd__mark { width: 42px; height: 42px; }
  .hd__word { width: 290px; }
  .hd__nav { display: flex; gap: 26px; }
  .hd__nav a { font: 500 13px/1 var(--sans); letter-spacing: .06em; text-decoration: none; padding: 8px 0; position: relative; }
  .hd__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
  .hd__nav a:hover::after, .hd__nav a.on::after { transform: scaleX(1); }
  .hd > .lang { display: flex; }
  .hd__tel { display: inline-block; font: 700 13px/1 var(--sans); letter-spacing: .08em; text-decoration: none; padding: 10px 0 8px; border-bottom: 1px solid currentColor; }
  .hd__burger { display: none; }
}

/* Mobiles Menü */
.menu { position: fixed; inset: 0; z-index: 45; background: var(--kalk); padding: calc(var(--hd) + 20px) var(--g) 28px; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; opacity: 0; transform: translateY(-12px); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.menu.is-open { opacity: 1; transform: none; }
.menu nav a { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; font: 400 32px/1.1 var(--serif); }
.menu nav small { font: 500 12px var(--sans); color: var(--petrol); letter-spacing: .1em; }
.menu__lang { margin-top: 26px; flex-wrap: wrap; gap: 4px 10px; color: var(--petrol); }
.menu__lang button { font-size: 13px; padding: 10px 6px; letter-spacing: .04em; }
.menu__tel { margin-top: auto; padding: 18px; background: var(--tief); color: #fff; text-align: center; text-decoration: none; font: 700 15px var(--sans); letter-spacing: .08em; }

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: var(--hd); }
.hero__ph { position: relative; }
.kr--hero { position: relative; overflow: hidden; height: 62svh; min-height: 400px; max-height: 720px; background: var(--kalk2); }
.kr--hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero__ph figcaption { display: none; }
.hero__copy { position: relative; z-index: 2; margin: -64px var(--g) 0 0; padding: 26px var(--g) 6px; background: var(--kalk); }
.hero__kick { font: 500 12px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--petrol); }
.hero__h { margin-top: 16px; font: 400 clamp(40px, 11vw, 64px)/1.02 var(--serif); letter-spacing: -.02em; color: var(--ink); }
.hero__h span { display: block; }
.hero__l2 { text-wrap: balance; }
.hero__h .uw { display: inline-block; position: relative; }
.uw svg { position: absolute; left: -2%; width: 104%; bottom: -.3em; height: auto; aspect-ratio: 120 / 16; color: var(--ziegel); overflow: visible; }
.uw path { stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hero__sub { margin-top: 18px; color: var(--mute); max-width: 34ch; }
.hero__meta { margin-top: 20px; display: grid; gap: 6px; }
.now { display: flex; align-items: center; gap: 10px; font: 500 14px/1.35 var(--sans); }
.now__dot { width: 10px; height: 10px; background: var(--mute); flex: none; }
.now.is-open .now__dot { background: #2f8f62; }
.now.is-pause .now__dot { background: var(--ziegel); }
.hero__kassen { font: 500 14px/1.35 var(--sans); color: var(--mute); }
.hero__cta { margin-top: 22px; color: var(--petrol); }

/* Intro: das Logo-Quadrat liegt groß über dem Hof und fliegt in den Header (Werte setzt das Inline-Skript) */
.intro { display: none; }
.js .intro { display: block; position: fixed; left: 0; top: 0; z-index: 55; width: var(--S, 100vmax); height: var(--S, 100vmax); transform-origin: 0 0; transform: translate3d(var(--x0, 0), var(--y0, 0), 0); pointer-events: none; will-change: transform; animation: dock 1.15s cubic-bezier(.76, 0, .18, 1) .55s forwards, gone 0s linear 1.72s forwards; }
.intro svg { width: 100%; height: 100%; }
@keyframes dock { to { transform: translate3d(var(--x1, 20px), var(--y1, 12px), 0) scale(var(--k, .03)); } }
@keyframes gone { to { visibility: hidden; } }
.js:not(.no-intro) .hd__mark { animation: show 0s linear 1.7s both; }
@keyframes show { from { visibility: hidden; } to { visibility: visible; } }
.js:not(.no-intro) .hero__copy { animation: zdown 1.75s step-end both; }
@keyframes zdown { 0% { z-index: 60; } 100% { z-index: 2; } }

/* Hero-Choreografie in CSS: startet mit dem ersten Paint, Claim steht sofort (LCP) */
.js .hero__copy > * { animation: rise .9s var(--ease) both; }
.js .hero__h { animation-name: riseOnly; animation-delay: .05s; }
.js .hero__sub { animation-delay: .9s; }
.js .hero__meta { animation-delay: 1.35s; }
.js .hero__cta { animation-delay: 1.5s; }
.js .uw path { stroke-dashoffset: 1; opacity: 0; animation: draw 1.1s var(--ease) 1.55s forwards; }
.js .kr--hero img { animation: settle 2s var(--ease) .55s both; }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
@keyframes riseOnly { from { transform: translate3d(0, 14px, 0); } }
@keyframes draw { 0% { opacity: 1; stroke-dashoffset: 1; } 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes settle { from { transform: scale(1.07); } to { transform: scale(1); } }

@media (min-width: 900px) {
  .hero { min-height: 100svh; }
  .kr--hero { height: calc(100svh - var(--hd)); min-height: 600px; max-height: none; }
  .kr--hero img { object-position: 50% 45%; }
  .hero__ph figcaption { display: block; position: absolute; left: var(--g); bottom: 18px; padding: 7px 10px 6px; background: rgba(244, 240, 232, .92); font: 500 12px/1.3 var(--sans); letter-spacing: .04em; color: var(--ink); }
  .hero__copy { position: absolute; right: var(--g); bottom: 0; width: min(580px, 44vw); margin: 0; padding: 44px 46px 40px; }
  .hero__h { font-size: clamp(48px, 4.7vw, 78px); }
  .hero__sub { font-size: 18px; }
}
@media (min-width: 1500px) { .hero__copy { right: max(var(--g), calc((100vw - 1320px) / 2 + var(--g))); } }

/* ---------- Sektionen ---------- */
.sec { padding: 92px 0; }
.sec--white { background: var(--white); }
.sec--kalk { background: var(--kalk); }
.sec--dark { background: var(--tief); color: #edf1ef; }
.sec--dark .kick { color: #8fc3c9; }
.sec--dark .lead { color: #b5c7c8; }
@media (min-width: 900px) { .sec { padding: 140px 0; } }

/* Ärzte */
.duo { aspect-ratio: 1193 / 600; margin: 0 calc(-1 * var(--g)) 40px; }
@media (max-width: 699px) { .duo { aspect-ratio: 1000 / 600; } }
@media (min-width: 900px) { .duo { margin: 0 0 48px; } }
.docs { display: grid; gap: 48px; }
.doc { display: grid; gap: 22px; }
.doc__ph { aspect-ratio: 490 / 600; max-width: 460px; }
.doc__n { font: 400 30px/1.1 var(--serif); }
.doc__r { margin-top: 8px; font: 500 13px/1.45 var(--sans); letter-spacing: .04em; color: var(--petrol); }
.doc__q { margin-top: 18px; font: 440 23px/1.35 var(--serif); max-width: 28ch; }
.doc__l { margin-top: 16px; font-size: 14px; color: var(--mute); }
.doc__more { margin-top: 14px; }
.doc__more summary { list-style: none; cursor: pointer; display: inline-flex; gap: 10px; align-items: center; font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; padding: 12px 0; border-top: 1px solid currentColor; color: var(--petrol); }
.doc__more summary::-webkit-details-marker { display: none; }
.doc__more summary::after { content: "+"; font-size: 16px; letter-spacing: 0; transition: transform .4s var(--ease); }
.doc__more[open] summary::after { transform: rotate(45deg); }
.doc__more p { margin-top: 10px; font-size: 15px; color: var(--mute); max-width: 60ch; animation: rise .5s var(--ease); }
@media (min-width: 900px) {
  .docs { grid-template-columns: 1fr 1fr; gap: 64px; }
  .doc__n { font-size: 36px; }
  .doc__q { font-size: 29px; }
}
.facts { margin: 72px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.facts li { padding: 18px 0 22px; border-top: 1px solid var(--line); }
.facts b { display: block; font: 400 clamp(42px, 5.2vw, 72px)/1 var(--serif); color: var(--petrol); font-variant-numeric: lining-nums; }
.facts span { display: block; margin-top: 12px; font-size: 16px; line-height: 1.45; color: var(--ink); max-width: 24ch; }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; } }
.langs { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--line); }
.langs__t { font: 500 12px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--petrol); }
.langs__row { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.langs__row button { opacity: 1; text-align: left; padding: 18px 0 16px; border-top: 1px solid var(--line); }
.langs__row button b { display: block; font: 400 clamp(26px, 3.4vw, 46px)/1.05 var(--serif); color: var(--ink); opacity: .45; transition: opacity .35s var(--ease); }
.langs__row button small { display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.langs__row button small::before { content: ""; width: 10px; height: 10px; border: 1px solid currentColor; }
.langs__row button[aria-pressed="true"] b, .langs__row button:hover b { opacity: 1; }
.langs__row button[aria-pressed="true"] small { color: var(--petrol); }
.langs__row button[aria-pressed="true"] small::before { background: var(--petrol); border-color: var(--petrol); }
.langs__row button::after { display: none; }
@media (min-width: 900px) { .langs__row { grid-template-columns: repeat(4, 1fr); } }

/* Leistungen */
.tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 28px; margin-bottom: 26px; }
.tabs { display: flex; gap: 2px 18px; flex-wrap: wrap; }
.tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; font: 500 14px/1.2 var(--sans); color: var(--mute); position: relative; transition: color .3s; }
.tab small { font-size: 12px; color: var(--mute); }
.tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.tab[aria-pressed="true"] { color: var(--ink); }
.tab[aria-pressed="true"]::after { transform: scaleX(1); }
.view { display: flex; gap: 16px; }
.view button { font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 10px 0; color: var(--mute); position: relative; }
.view button[aria-pressed="true"] { color: var(--ink); }
.view button[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; }

.lg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; transition: opacity .22s var(--ease); }
.lg.is-swap { opacity: 0; }
@media (min-width: 700px) { .lg { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 20px; } }
@media (min-width: 1100px) { .lg { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 24px; } }
.tile { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 12px 10px; align-content: start; text-decoration: none; transition: opacity .5s var(--ease), transform .6s var(--ease); }
.tile__ph { grid-column: 1 / -1; aspect-ratio: 1; }
.tile__ph img { transition: opacity .6s var(--ease), transform 1.6s var(--ease); }
.tile:hover .tile__ph.rv-done img { transform: scale(1.045); }
.tile__n { font: 500 11px/1.6 var(--sans); letter-spacing: .1em; color: var(--petrol); font-variant-numeric: tabular-nums; padding-top: 3px; }
.tile__tx { display: grid; gap: 4px; }
.tile__t { font: 450 19px/1.15 var(--serif); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.tile__l { font-size: 13.5px; line-height: 1.45; color: var(--mute); }
.tile__sq { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px 12px; min-height: 20px; }
.tq { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px/1.2 var(--sans); color: var(--ink); }
.tile__ar { display: none; }
.tile.is-off { opacity: .22; transform: scale(.97); }
.tile--f { grid-column: 1 / -1; }
.tile--f .tile__t { font-size: 26px; }
@media (min-width: 700px) {
  .tile--f { grid-column: span 2; }
  .tile--f .tile__ph { aspect-ratio: auto; height: auto; }
  .tile--f .tile__ph img { aspect-ratio: 2.1; height: auto; }
  .tile--f .tile__t { font-size: 30px; }
  .tile--f .tile__l { font-size: 16px; }
}
@media (min-width: 1100px) {
  .lg .lg__key { grid-column: 1 / -1; aspect-ratio: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 40px; padding: 26px 30px; }
  .lg .lg__key .lg__kl { display: flex; gap: 28px; }
  .lg .lg__key .lg__kt { margin-right: 12px; }
  .lg .lg__key .lg__ks { margin: 0 0 0 auto; max-width: 30ch; }
}
@media (min-width: 900px) { .tile__t { font-size: 23px; } .tile__l { font-size: 14.5px; } }

.lg__key { position: relative; overflow: hidden; background: var(--petrol); color: #fff; padding: 22px 18px; display: flex; flex-direction: column; gap: 14px; aspect-ratio: 1; align-self: start; }
.lg__tooth { position: absolute; right: -14%; bottom: -16%; width: 74%; color: var(--petrol2); pointer-events: none; }
.lg__kt { position: relative; font: 400 22px/1.12 var(--serif); }
.lg__kl { position: relative; display: grid; gap: 8px; font-size: 13px; line-height: 1.3; }
.lg__kl li { display: flex; gap: 10px; align-items: center; }
.lg__kl .sq--kasse { background: #fff; color: var(--petrol); }
.lg__ks { position: relative; margin-top: auto; font-size: 12px; line-height: 1.4; color: #cfe6e8; }
@media (max-width: 699px) { .lg__key { aspect-ratio: auto; grid-column: 1 / -1; } .lg__tooth { width: 46%; right: -6%; bottom: -30%; } }
@media (min-width: 1100px) { .lg__key { padding: 28px 26px; } .lg__kt { font-size: 28px; } .lg__kl { font-size: 14px; } }

/* Listenansicht */
.lg[data-view="list"] { grid-template-columns: 1fr; gap: 0; }
.lg[data-view="list"] .tile { grid-template-columns: 34px 64px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.lg[data-view="list"] .tile__ph { grid-column: 2; grid-row: 1; width: 64px; }
.lg[data-view="list"] .tile__n { grid-column: 1; grid-row: 1; padding: 0; }
.lg[data-view="list"] .tile__tx { grid-column: 3; }
.lg[data-view="list"] .tile__sq { grid-column: 4; grid-row: 1; }
.lg[data-view="list"] .tq span { display: none; }
.lg[data-view="list"] .tile__ar { display: none; }
.lg[data-view="list"] .tile.is-off { transform: none; }
.lg[data-view="list"] .tile--f { grid-column: auto; grid-row: auto; grid-template-rows: none; }
.lg[data-view="list"] .tile--f .tile__ph { height: auto; aspect-ratio: 1; }
.lg[data-view="list"] .tile--f .tile__ph img { aspect-ratio: 1; height: 100%; }
.lg[data-view="list"] .tile--f .tile__t { font-size: inherit; }
.lg[data-view="list"] .lg__key { grid-column: auto; }
.lg[data-view="list"] .lg__key { aspect-ratio: auto; margin-top: 28px; }
@media (min-width: 900px) {
  .lg[data-view="list"] .tile { grid-template-columns: 50px 88px minmax(0, 1fr) 90px 30px; padding: 18px 0; gap: 24px; }
  .lg[data-view="list"] .tile__ph { width: 88px; }
  .lg[data-view="list"] .tile__tx { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: baseline; gap: 24px; }
  .lg[data-view="list"] .tile__ar { display: block; grid-column: 5; grid-row: 1; width: 20px; height: 12px; transition: transform .45s var(--ease); }
  .lg[data-view="list"] .tile:hover .tile__ar { transform: translateX(6px); }
  .lg[data-view="list"] .lg__key { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 18px 36px; }
  .lg[data-view="list"] .lg__kl { display: flex; gap: 28px; }
  .lg[data-view="list"] .lg__ks { margin: 0; }
  .lg[data-view="list"] .lg__tooth { width: 160px; bottom: -60px; right: 20px; }
}

/* Zahnspange */
.kfo__grid { display: grid; gap: 40px; }
.kfo__sh { margin: 0; }
.kfo__ph .kr { aspect-ratio: 1; }
.pl { width: 100%; border-collapse: collapse; }
.pl th, .pl td { padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .16); text-align: left; vertical-align: baseline; }
.pl th { font: 500 15px/1.35 var(--sans); }
.pl th small { display: block; font-size: 12.5px; color: #9fb8ba; font-weight: 400; }
.pl td { text-align: right; font: 400 22px/1.2 var(--serif); white-space: nowrap; font-variant-numeric: lining-nums; padding-left: 14px; }
.pl tr:last-child th, .pl tr:last-child td { border-bottom: 1px solid rgba(255, 255, 255, .16); }
.pl__note { margin-top: 12px; font-size: 13.5px; color: #9fb8ba; }
.plan { margin-top: 44px; }
.plan__t { font: 500 12px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #8fc3c9; }
.seg { margin-top: 16px; display: flex; gap: 22px; flex-wrap: wrap; }
.seg button { padding: 8px 0; font: 500 15px/1.2 var(--sans); color: #9fb8ba; position: relative; transition: color .3s; }
.seg button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.seg button[aria-pressed="true"] { color: #fff; }
.seg button[aria-pressed="true"]::after { transform: scaleX(1); }
.rng { display: block; margin-top: 26px; font-size: 14px; }
.rng output { font: 400 22px/1 var(--serif); margin: 0 2px; }
.rng input { -webkit-appearance: none; appearance: none; display: block; width: 100%; margin: 16px 0 0; height: 28px; background: transparent; touch-action: pan-y; }
.rng input::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, #8fc3c9 var(--p, 50%), rgba(255, 255, 255, .2) var(--p, 50%)); }
.rng input::-moz-range-track { height: 2px; background: rgba(255, 255, 255, .2); }
.rng input::-moz-range-progress { height: 2px; background: #8fc3c9; }
.rng input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10px; background: var(--kalk); border: 0; border-radius: 0; }
.rng input::-moz-range-thumb { width: 22px; height: 22px; background: var(--kalk); border: 0; border-radius: 0; }
.rng__hint { margin-top: 8px; font-size: 12.5px; color: #9fb8ba; }
.res { position: relative; overflow: hidden; margin-top: 24px; padding: 24px 22px; background: var(--petrol); }
.res__k { position: absolute; right: -24px; bottom: -40px; width: 150px; color: var(--petrol2); }
.res__v { position: relative; font: 400 clamp(30px, 8vw, 42px)/1.1 var(--serif); font-variant-numeric: lining-nums; }
.res__v small { display: block; margin-top: 4px; font: 500 12px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #cfe6e8; }
.res__s { position: relative; margin-top: 14px; font-size: 13.5px; color: #cfe6e8; }
#rMon { display: inline-block; transition: opacity .25s var(--ease), transform .35s var(--ease); }
#rMon.is-tick { opacity: .35; transform: translateY(4px); }
.chk { margin: 28px 0 0; padding: 0; border: 0; }
.chk legend { padding: 0; font: 500 12px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #8fc3c9; }
.chk__q { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .16); font-size: 15px; }
.yn { display: flex; gap: 16px; }
.yn button { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font: 500 14px var(--sans); color: #b5c7c8; }
.yn button::before { content: ""; width: 12px; height: 12px; border: 1px solid currentColor; transition: background-color .25s; }
.yn button[aria-pressed="true"] { color: #fff; }
.yn button[aria-pressed="true"]::before { background: #fff; border-color: #fff; }
.chk__r { margin-top: 16px; font: 440 19px/1.4 var(--serif); min-height: 3em; transition: opacity .25s var(--ease); }
.chk__r.is-tick { opacity: .2; }
.chk__r b { font-weight: 520; color: #f2c6a8; }
.plan__disc { margin-top: 18px; font-size: 12.5px; color: #9fb8ba; }
@media (min-width: 900px) {
  .kfo__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 80px; row-gap: 56px; }
  .kfo__sh { grid-column: 1 / -1; }
  .kfo__sh .h2 { max-width: 18ch; }
  .kfo__ph { align-self: start; position: sticky; top: calc(var(--hd) + 32px); }
}

/* Labor */
.lab__grid { display: grid; gap: 36px; }
.lab__sh { margin: 0; }
.lab__big .kr { aspect-ratio: 16 / 10; }
.lab__big figcaption, .hof figcaption, .lab__rob figcaption { margin-top: 10px; font: 500 12px/1.4 var(--sans); letter-spacing: .04em; color: var(--mute); }
.lab__rob .kr { aspect-ratio: 4 / 5; }
.lab__rob figcaption b { display: inline; font: 400 24px/1.1 var(--serif); color: var(--ink); letter-spacing: 0; margin-right: 8px; }
.lab__rob figcaption span { font: 500 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--petrol); }
.lab__q { font: 440 clamp(22px, 2.3vw, 30px)/1.35 var(--serif); margin-bottom: 28px; max-width: 30ch; }
.lab__facts { margin: 0; padding: 0; list-style: none; display: grid; }
.lab__facts li { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--mute); }
.lab__facts b { font: 450 22px/1.2 var(--serif); color: var(--ink); }
@media (min-width: 900px) {
  .lab__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "sh big" "rob facts"; column-gap: 72px; row-gap: 64px; align-items: start; }
  .lab__sh { grid-area: sh; } .lab__big { grid-area: big; } .lab__rob { grid-area: rob; max-width: 420px; } .lab__side { grid-area: facts; align-self: center; }
  .lab__facts li { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 24px; align-items: baseline; padding: 24px 0; }
}

/* Hof */
.hof { background: var(--kalk); padding: 92px 0; }
.hof__head { margin-bottom: 40px; }
.hof__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 10px; }
.hof figure { min-width: 0; }
.hof figure .kr { height: 100%; }
.hof__a { grid-column: 1 / -1; aspect-ratio: 4 / 4.4; }
.hof__b { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.hof__c { aspect-ratio: 1; }
.hof__d { aspect-ratio: 1; }
.hof__d img { object-position: 60% 50%; }
.hof__e { grid-column: 1 / -1; }
.hof figure.hof__e .kr { aspect-ratio: 16 / 9; height: auto; width: 100%; }
.hof__e figcaption { padding: 0 var(--g) 0 4px; }
@media (min-width: 900px) {
  .hof { padding: 140px 0; }
  .hof__head { margin-bottom: 64px; }
  .hof__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; padding: 0 var(--g); max-width: 1600px; margin: 0 auto; }
  .hof__a { grid-column: 1 / span 5; grid-row: 1 / span 2; aspect-ratio: auto; }
  .hof__b { grid-column: 6 / span 7; aspect-ratio: 16 / 9; }
  .hof__c { grid-column: 6 / span 3; }
  .hof__d { grid-column: 9 / span 4; aspect-ratio: auto; }
  .hof__e { grid-column: 3 / span 8; margin-top: 40px; }
}

/* Besuch */
.besuch__h { min-height: 2.2em; max-width: 20ch; }
.besuch__h b { font-weight: 400; color: #8fc3c9; }
.besuch__grid { display: grid; gap: 48px; }
.week { display: grid; gap: 0; }
.wk { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 15px; font-variant-numeric: tabular-nums; }
.wk__sq { display: grid; place-items: center; width: 44px; height: 44px; background: var(--petrol); font: 500 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.wk--zu .wk__sq { background: transparent; border: 1px solid rgba(255, 255, 255, .28); color: #9fb8ba; }
.wk--zu .wk__t { color: #9fb8ba; }
.wk.is-today .wk__sq { background: var(--kalk); color: var(--tief); }
.wk.is-today.wk--zu .wk__sq { border-color: var(--kalk); }
.wk.is-today .wk__t::after { content: attr(data-today); margin-left: 10px; font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #8fc3c9; }
.addr { display: grid; gap: 10px; align-content: start; }
.addr__a { font: 400 30px/1.2 var(--serif); margin-bottom: 8px; }
.addr .ln { color: #fff; }
.ln--l { text-transform: none; letter-spacing: .02em; font-size: 15px; }
.addr__fax { font-size: 14px; color: #9fb8ba; }
.map { position: relative; aspect-ratio: 9 / 7; overflow: hidden; background: #e8e2d6; color: var(--ink); }
.map__svg { width: 100%; height: 100%; }
.map .bg { fill: #ebe5d9; } .map .gr { fill: #dce4cf; } .map .wa { fill: #b2d6dc; } .map .bd { fill: #ddd5c6; }
.map .pa { fill: none; stroke: #f6f2ea; stroke-width: 2.5; }
.map .r1, .map .r2, .map .r3 { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; }
.map .r3 { stroke-width: 7; } .map .r2 { stroke-width: 10; } .map .r1 { stroke-width: 13; }
.map .hm { fill: var(--petrol); }
.map .st { fill: var(--tief); stroke: #fff; stroke-width: 3; }
.map .lb { font: 600 15px/1 var(--sans); fill: #7c8684; letter-spacing: .02em; }
.map__pin { position: absolute; width: 38px; height: 38px; transform: translate(-50%, -115%); box-shadow: 0 8px 22px rgba(11, 52, 57, .32); }
.map__pin::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 12px; background: var(--petrol); }
.map__st { position: absolute; transform: translate(12px, -50%); padding: 3px 6px; background: var(--tief); color: #fff; font: 600 11px/1.2 var(--sans); letter-spacing: .04em; white-space: nowrap; }
.map__route { position: absolute; left: 14px; bottom: 12px; color: var(--tief); background: rgba(244, 240, 232, .92); padding: 10px 12px 8px; border-top: 0; }
.map__c { position: absolute; right: 8px; bottom: 6px; font-size: 10px; color: #6d7675; }
.bus { display: grid; }
.bus li { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 15px; }
.bus b { font: 600 14px/1.5 var(--sans); }
.form { display: grid; gap: 16px; padding: 26px 20px; background: var(--tief2); }
.form__t { font: 400 26px/1.1 var(--serif); }
.form label { display: grid; gap: 6px; font: 500 12px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #9fb8ba; }
.form input, .form select, .form textarea { font: 400 16px/1.4 var(--sans); color: #fff; background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .3); padding: 8px 0; border-radius: 0; letter-spacing: 0; text-transform: none; transition: border-color .3s; }
.form select option { color: var(--ink); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: #8fc3c9; }
.form .is-err { border-color: #e39b7c; }
.form__ds { font-size: 12.5px; color: #9fb8ba; }
.btn { display: inline-flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 18px; background: var(--kalk); color: var(--tief); font: 700 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.btn svg { width: 20px; height: 12px; transition: transform .45s var(--ease); }
.btn:hover svg { transform: translateX(5px); }
.form__demo { font-size: 12px; color: #9fb8ba; }
.form__ok { animation: rise .6s var(--ease); }
.form__okt { font: 400 26px/1.2 var(--serif); }
.form__ok p + p { margin-top: 8px; font-size: 14px; color: #9fb8ba; }
@media (min-width: 900px) {
  .besuch__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 40px; row-gap: 56px; }
  .week { grid-column: 1 / span 7; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
  .wk { grid-template-columns: 1fr; gap: 12px; border: 0; padding: 0; align-content: start; font-size: 14px; }
  .wk__sq { width: 100%; height: auto; aspect-ratio: 1; font-size: 13px; }
  .wk.is-today .wk__t::after { display: block; margin: 8px 0 0; }
  .addr { grid-column: 9 / span 4; }
  .map { grid-column: 1 / span 7; grid-row: 2 / span 2; }
  .bus { grid-column: 9 / span 4; grid-row: 2; align-self: start; }
  .form { grid-column: 9 / span 4; grid-row: 3; padding: 30px 28px; }
}

/* Footer */
.ft { background: var(--kalk); padding: 64px 0 110px; font-size: 14px; color: var(--mute); }
.ft__grid { display: grid; gap: 28px; }
.ft__logo { display: flex; align-items: center; gap: 12px; color: var(--petrol); }
.ft__mark { width: 44px; height: 44px; }
.ft__word { width: 260px; }
.ft__c { display: grid; gap: 4px; }
.ft a { text-decoration: none; }
.ft a:hover { text-decoration: underline; }
@media (min-width: 900px) { .ft { padding-bottom: 64px; } .ft__grid { grid-template-columns: 1.4fr 1fr 1fr; align-items: start; } }

/* Dock (Handy) */
.dock { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; transform: translateY(140%); transition: transform .55s var(--ease); }
.dock.is-on { transform: none; }
.dock a { display: block; padding: 15px 10px; text-align: center; text-decoration: none; font: 700 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; background: var(--tief); color: #fff; box-shadow: 0 10px 30px rgba(11, 52, 57, .25); }
.dock a + a { background: var(--kalk); color: var(--tief); }
@media (min-width: 1100px) { .dock { display: none; } }

/* Detail-Ansicht */
.ov { position: fixed; inset: 0; z-index: 80; visibility: hidden; }
.ov.is-open { visibility: visible; }
.ov__k { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center; background: var(--petrol); transform: translate3d(0, 101%, 0); pointer-events: none; }
.ov__k svg { width: min(34vmin, 240px); }
.ov__in { position: absolute; inset: 0; z-index: 1; background: var(--white); overflow-y: auto; overscroll-behavior: contain; opacity: 0; }
.ov.is-shown .ov__in { opacity: 1; }
.ov__x { position: fixed; top: 10px; right: 10px; z-index: 3; width: 48px; height: 48px; display: grid; place-content: center; background: var(--kalk); }
.ov__x i { display: block; width: 22px; height: 1.5px; background: var(--ink); }
.ov__x i:first-of-type { transform: translateY(.75px) rotate(45deg); }
.ov__x i:last-of-type { transform: translateY(-.75px) rotate(-45deg); }
.ov__ph { aspect-ratio: 4 / 3; overflow: hidden; background: var(--kalk2); }
.ov__ph img { width: 100%; height: 100%; object-fit: cover; }
.ov__tx { padding: 30px var(--g) 60px; max-width: 760px; }
.ov__h { margin-top: 18px; font: 400 clamp(34px, 5vw, 60px)/1.05 var(--serif); }
.ov__lead { margin-top: 12px; font: 440 20px/1.4 var(--serif); color: var(--mute); }
.ov__costs { margin-top: 26px; display: grid; }
.ov__costs li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.ov__costs li:last-child { border-bottom: 1px solid var(--line); }
.ov__costs .sq { margin-top: 2px; }
.sq--info { background: transparent; border: 1px solid var(--mute); color: var(--mute); }
.ov__secs { margin-top: 30px; }
.ov__secs h3 { margin-top: 30px; font: 450 24px/1.2 var(--serif); }
.ov__secs p { margin-top: 10px; color: #33494b; }
.ov__price { margin-top: 16px; width: 100%; border-collapse: collapse; font-size: 15px; }
.ov__price td { padding: 10px 0; border-top: 1px solid var(--line); }
.ov__price td + td { text-align: right; font: 400 19px var(--serif); white-space: nowrap; padding-left: 14px; }
.ov__acts { margin-top: 40px; display: grid; gap: 22px; }
.ov__acts .ln { color: var(--petrol); justify-self: start; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.share a, .share button { font: 500 13px/1 var(--sans); letter-spacing: .04em; text-transform: none; color: var(--ink); text-decoration: none; padding: 8px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.ov__next { margin-top: 56px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 16px; padding: 22px 0; border-top: 1px solid var(--ink); text-decoration: none; }
.ov__next small { grid-column: 1 / -1; font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--petrol); }
.ov__next b { font: 400 30px/1.1 var(--serif); }
.ov__next svg { width: 24px; height: 14px; transition: transform .45s var(--ease); margin-bottom: 8px; }
.ov__next:hover svg { transform: translateX(6px); }
@media (min-width: 900px) {
  .ov__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .ov__ph { position: sticky; top: 0; height: 100vh; aspect-ratio: auto; }
  .ov__tx { padding: 96px 64px 80px; }
  .ov__x { top: 20px; right: 20px; }
}

/* Reveal für Text */
.js [data-rise] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.js [data-rise].rv-in { opacity: 1; transform: none; }

/* Sprache wechseln: kurzes Überblenden */
main, .hd__nav, .ft { transition: opacity .22s var(--ease); }
.is-lang main, .is-lang .hd__nav, .is-lang .ft { opacity: .25; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .kr__k { display: none; }
  .js .kr img, .js [data-rise] { transform: none; opacity: 1; }
  .js .uw path { stroke-dashoffset: 0; opacity: 1; }
  .js img[loading="lazy"]:not(.ld) { opacity: 1; }
}