/* Zahnarztpraxis Dr. Wurzinger · Entwurf VCSLV
   Farben aus ihrer Marke: Blau des Logos (#14469E), Porzellan-Grund ihrer Website, Petrol der Praxiskleidung */
@font-face { font-family: 'Outfit'; src: url(../fonts/outfit.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url(../fonts/newsreader.woff2) format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url(../fonts/newsreader-italic.woff2) format('woff2'); font-weight: 200 800; font-style: italic; font-display: swap; }

:root {
  --bg: #F3F1EC; --bg-2: #ECE9E2; --paper: #FFFFFF; --ink: #0E1B33; --ink-2: #33405A; --muted: #5B6576;
  --line: rgba(14, 27, 51, .11); --line-2: rgba(14, 27, 51, .2);
  --blue: #14469E; --blue-d: #0E347A; --blue-l: #E8EDF7; --blue-m: #C9D5EC;
  --teal: #0C7A84; --teal-l: #DCEFEF;
  --navy: #0B1C3C; --on-navy: #EEF1F7; --on-navy-2: rgba(238, 241, 247, .68);
  --serif: 'Newsreader', 'Times New Roman', serif;
  --sans: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
  --gutter: clamp(20px, 5vw, 76px);
  --hdr-h: 72px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --r: 4px;
}
@media (max-width: 899px) { :root { --hdr-h: 60px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 0; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; font-weight: 400; -webkit-font-smoothing: antialiased; font-synthesis: none; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button, a, .chip { -webkit-tap-highlight-color: transparent; }
input { font: inherit; }
b, strong { font-weight: 600; }
em { font-style: italic; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--paper); padding: 10px 14px; border-radius: var(--r); }
.skip:focus { top: 12px; }
.wrap { padding-left: var(--gutter); padding-right: var(--gutter); max-width: 1560px; margin: 0 auto; width: 100%; }

/* live dot: petrol when the phone is answered now */
.dot { position: relative; display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.dot.is-open { background: var(--teal); }
.dot.is-open::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: var(--teal); opacity: 0; animation: pulse 2.4s var(--ease) infinite; }
.dot.is-off::after { animation-play-state: paused; }
@keyframes pulse { 0% { transform: scale(.4); opacity: .5; } 70%, 100% { transform: scale(1.5); opacity: 0; } }

/* buttons */
.btn { --h: 50px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--h); padding: 0 22px; border-radius: 3px; font: 500 15px/1 var(--sans); letter-spacing: .01em; white-space: nowrap; overflow: hidden; isolation: isolate; transition: background-color .25s var(--ease), color .25s var(--ease), transform .15s var(--ease); -webkit-touch-callout: none; user-select: none; }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(.97); }
.btn--blue { background: var(--blue); color: #fff; }
.btn--blue:hover { background: var(--blue-d); }
.btn--line { border: 1px solid currentColor; color: var(--blue); }
.btn--line::after { content: ""; position: absolute; inset: 0; z-index: -1; background: currentColor; opacity: 0; transition: opacity .25s var(--ease); }
.btn--line:hover::after { opacity: .1; }
.btn--ghost { color: var(--ink-2); padding: 0 14px; }
.btn--ghost:hover { background: rgba(14, 27, 51, .06); }
.lnk { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.lnk svg { width: 15px; height: 15px; }
.lnk:hover { color: var(--blue-d); }

/* ------------------------------------------------------------------ header */
.hdr { position: fixed; z-index: 60; inset: 0 0 auto; height: var(--hdr-h); display: flex; align-items: center; gap: 28px; padding: 0 var(--gutter); transition: background-color .35s var(--ease), box-shadow .35s var(--ease), transform .45s var(--ease); }
.hdr.is-solid { background: rgba(243, 241, 236, .96); box-shadow: 0 1px 0 var(--line); }
.hdr.is-hidden { transform: translateY(-100%); }
.hdr__brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; font: 400 23px/1 var(--serif); letter-spacing: -.005em; transition: opacity .4s var(--ease); }
.hdr__mark { width: 30px; height: 30px; color: var(--blue); }
.hdr.has-crest .hdr__brand { opacity: 0; pointer-events: none; }
.hdr__nav { display: flex; gap: 26px; font-size: 15px; }
.hdr__nav a { position: relative; padding: 6px 0; color: var(--ink-2); }
.hdr__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.hdr__nav a:hover::after, .hdr__nav a.is-active::after { transform: scaleX(1); }
.hdr__nav a.is-active { color: var(--ink); }
.hdr__live { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 14px; border-radius: 19px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.hdr__live:hover { box-shadow: 0 0 0 1px var(--line-2); }
.hdr__book { --h: 44px; padding: 0 18px; }
.hdr__menu { display: none; align-items: center; gap: 10px; height: 44px; padding: 0 4px 0 12px; font-size: 15px; }
.hdr__menu i { position: relative; width: 22px; height: 10px; }
.hdr__menu i::before, .hdr__menu i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .4s var(--ease), top .4s var(--ease); }
.hdr__menu i::before { top: 0; } .hdr__menu i::after { top: 8px; }
.menu-open .hdr__menu i::before { top: 4px; transform: rotate(45deg); } .menu-open .hdr__menu i::after { top: 4px; transform: rotate(-45deg); }
@media (max-width: 1239px) { .hdr__live { display: none; } }
@media (max-width: 1099px) { .hdr__nav { display: none; } .hdr__menu { display: inline-flex; } }
@media (max-width: 899px) { .hdr__book { display: none; } .hdr__brand { font-size: 21px; } .hdr__mark { width: 26px; height: 26px; } }
.menu-open .hdr { background: var(--bg); box-shadow: 0 1px 0 var(--line); }

.menu { position: fixed; z-index: 55; inset: 0; padding: calc(var(--hdr-h) + 24px) var(--gutter) calc(24px + env(safe-area-inset-bottom)); background: var(--bg); display: flex; flex-direction: column; justify-content: space-between; }
.menu[hidden] { display: none; }
.menu__nav { display: flex; flex-direction: column; gap: 2px; }
.menu__nav a { font: 400 clamp(2rem, 9vw, 3rem)/1.2 var(--serif); padding: 4px 0; overflow: hidden; }
.menu__nav a:hover { color: var(--blue); }
.menu__foot { display: grid; gap: 16px; }
.menu__live { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 15px; }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; min-height: 100vh; min-height: 100svh; padding-top: var(--hdr-h); display: flex; overflow-anchor: none; }
.hero__grid { width: 100%; display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); grid-template-rows: auto auto; grid-template-areas: "crest fig" "desk fig"; column-gap: clamp(36px, 5vw, 96px); row-gap: clamp(20px, 4svh, 44px); align-content: center; padding: clamp(14px, 3svh, 40px) var(--gutter) clamp(20px, 4.5svh, 52px); max-width: 1640px; margin: 0 auto; }
.crest { grid-area: crest; align-self: end; display: grid; gap: clamp(14px, 2.6svh, 26px); }
.crest__mark { width: clamp(84px, 14svh, 142px); height: auto; aspect-ratio: 924 / 902; overflow: visible; }
.crest__mark path { stroke: var(--blue); }
.crest__words { display: grid; gap: 6px; }
.crest__lab, .crest__since { font: 600 12px/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--blue); }
.crest__name { font: 400 clamp(3.2rem, min(6.4vw, 11.5svh), 6.8rem)/.98 var(--serif); letter-spacing: -.015em; white-space: nowrap; margin-left: -.04em; }
.crest__name em { color: var(--blue); }
.crest__name .ch { display: inline-block; }
.crest__since { display: flex; align-items: center; gap: 14px; color: var(--ink-2); letter-spacing: .24em; margin-top: 8px; }
.crest__since i { width: 36px; height: 1px; background: var(--line-2); transform-origin: right; }
.crest__since i:last-child { transform-origin: left; }

.hero__fig { grid-area: fig; align-self: center; display: grid; gap: 12px; }
.hero__fig .rv { position: relative; overflow: hidden; border-radius: var(--r); aspect-ratio: 1.34; background: var(--bg-2); }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero__cap { font: 500 12px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

.desk { grid-area: desk; align-self: start; width: 100%; max-width: 540px; background: var(--paper); border-radius: var(--r); padding: clamp(18px, 2.6svh, 26px) 24px clamp(18px, 2.6svh, 24px); box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px rgba(14, 27, 51, .4); display: grid; gap: clamp(10px, 1.5svh, 14px); }
.desk__live { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink-2); flex-wrap: wrap; row-gap: 2px; }
.desk__live b { font-weight: 600; color: var(--ink); }
.desk__live span { color: var(--muted); }
.desk__title { font: 400 clamp(1.45rem, min(2.1vw, 3.6svh), 1.9rem)/1.15 var(--serif); }
.desk__title em { color: var(--blue); }
.desk__lab { font: 500 11px/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.desk__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 40px; padding: 0 16px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 15px; color: var(--ink); transition: box-shadow .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease); }
.chip:hover { box-shadow: inset 0 0 0 1px var(--blue); background: var(--blue-l); }
.chip.is-on { background: var(--blue); color: #fff; box-shadow: none; }
.desk__go { justify-self: start; margin-top: 4px; }

@media (max-width: 899px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "fig" "crest" "desk"; align-content: start; row-gap: 14px; padding-top: 0; padding-bottom: 16px; }
  .hero__fig { margin: 0 calc(-1 * var(--gutter)); gap: 0; }
  .hero__fig .rv { aspect-ratio: auto; height: clamp(150px, 26svh, 250px); border-radius: 0; }
  .hero__img { object-position: 50% 15%; }
  .hero__cap { display: none; }
  .crest { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
  .crest__mark { width: clamp(56px, 16vw, 72px); }
  .crest__words { gap: 2px; }
  .crest__lab, .crest__since { font-size: 11px; letter-spacing: .26em; }
  .crest__name { font-size: clamp(2.35rem, 11vw, 3.1rem); }
  .crest__since { margin-top: 4px; gap: 10px; }
  .crest__since i { width: 18px; }
  .desk { max-width: none; padding: 16px 16px 16px; gap: 10px; }
  .desk__title { font-size: 1.4rem; }
  .desk__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .chip { height: 40px; padding: 0 10px; font-size: 14.5px; }
  .desk__go { justify-self: stretch; }
}

/* ------------------------------------------------------------------ screens layer */
:root {
  --scr-t: calc(var(--hdr-h) + clamp(14px, 3.4svh, 46px));
  --scr-b: clamp(18px, 3.8svh, 50px);
  --scr-h: calc(100svh - var(--scr-t) - var(--scr-b));
  --h2s: clamp(2.1rem, min(3.4vw, 5.6svh), 3.8rem);
  --t-lab: 11.5px; --t-cap: 11px; --t-lead: 17px; --t-body: 15.5px; --t-small: 14px;
  --h3m: clamp(1.5rem, min(2vw, 3.4svh), 1.9rem);
  --h3s: clamp(1.25rem, min(1.6vw, 2.8svh), 1.5rem);
}
@media (max-width: 899px) { :root { --scr-b: calc(86px + env(safe-area-inset-bottom)); } }
@media (max-width: 719px) { :root { --scr-t: calc(var(--hdr-h) + 14px); --h2s: clamp(1.9rem, 8.2vw, 2.3rem); --t-lab: 11px; --t-cap: 10.5px; --t-lead: 15.5px; --t-body: 15px; --t-small: 13.5px; --h3m: 1.45rem; --h3s: 1.2rem; } }
@media (max-height: 760px) and (min-width: 900px) { :root { --h2s: clamp(2rem, min(3vw, 5.4svh), 3.2rem); } }
main > section:not(.hero) { padding-top: var(--scr-t); padding-bottom: var(--scr-b); position: relative; }
@media (min-width: 900px) { main > section:not(.hero) { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; } }
.h-label { font: 600 var(--t-lab)/1.6 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--blue); }
.h2 { font: 400 var(--h2s)/1.04 var(--serif); letter-spacing: -.012em; margin-top: 10px; }
.h2 em { color: var(--blue); }
.ln .line-mask { padding: 0 .16em .14em; margin: 0 -.16em -.14em; }

/* ------------------------------------------------------------------ Zeiten */
.zeiten__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head week" "more week"; column-gap: clamp(40px, 6vw, 110px); row-gap: 28px; align-items: start; }
.zeiten__head { grid-area: head; align-self: end; }
.zeiten__now { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 12px; margin-top: clamp(18px, 3svh, 32px); }
.zeiten__now .dot { align-self: center; width: 11px; height: 11px; }
.zeiten__now b { font: 400 var(--h3m)/1.2 var(--serif); }
.zeiten__now span { grid-column: 2; color: var(--muted); font-size: var(--t-body); margin-top: 4px; }
.zeiten__fine { margin-top: 18px; color: var(--ink-2); font-size: var(--t-small); }
.zeiten__more { grid-area: more; display: grid; gap: 12px; }
.zcard { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 16px 18px; border-radius: var(--r); background: var(--paper); box-shadow: 0 0 0 1px var(--line); font-size: var(--t-small); color: var(--ink-2); line-height: 1.5; }
.zcard svg { width: 22px; height: 22px; color: var(--blue); margin-top: 1px; }
.zcard b { display: block; color: var(--ink); font-size: 15px; }
.zcard .lnk { grid-column: 2; justify-self: start; margin-top: 6px; font-size: 14px; }
.zcard--sos svg { color: var(--teal); }

.week { grid-area: week; background: var(--paper); border-radius: var(--r); padding: 22px 24px 18px; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -44px rgba(14, 27, 51, .35); align-self: center; }
.week__axis { position: relative; height: 20px; margin-left: 52px; font-size: 12px; color: var(--muted); }
.week__axis span { position: absolute; left: calc((var(--h) - 7) / 10 * 100%); transform: translateX(-50%); }
.week__rows { position: relative; display: grid; gap: 6px; }
.week__row { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: center; height: clamp(38px, 5.2svh, 48px); border-radius: 3px; text-align: left; transition: background-color .25s var(--ease); }
.week__row:hover { background: rgba(20, 70, 158, .04); }
.week__d { font-weight: 600; font-size: 15px; padding-left: 8px; color: var(--ink-2); }
.week__track { position: relative; height: 100%; border-radius: 3px; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--line) calc(10% - 1px) 10%), var(--bg); overflow: hidden; }
.week__track i { position: absolute; top: 5px; bottom: 5px; left: calc((var(--a) - 7) / 10 * 100%); width: calc((var(--b) - var(--a)) / 10 * 100%); border-radius: 3px; background: var(--blue-l); box-shadow: inset 0 0 0 1px var(--blue-m); color: var(--blue-d); font-style: normal; font-size: 13px; font-weight: 500; display: grid; place-items: center; white-space: nowrap; transition: background-color .3s var(--ease), color .3s var(--ease); }
.week__track em { position: absolute; inset: 0; display: flex; align-items: center; padding-left: 14px; font-style: normal; font-size: 13.5px; color: var(--muted); }
.week__row.is-off .week__track { background: repeating-linear-gradient(135deg, transparent 0 7px, rgba(14, 27, 51, .045) 7px 8px), var(--bg); }
.week__row.is-today .week__d { color: var(--blue); }
.week__row.is-today .week__d::after { content: "heute"; display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .08em; color: var(--muted); }
.week__row[aria-pressed="true"] { background: var(--blue-l); }
.week__row[aria-pressed="true"] .week__track i { background: var(--blue); color: #fff; box-shadow: none; }
.week__now { position: absolute; top: 0; height: 0; left: 0; width: 2px; background: var(--teal); border-radius: 1px; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease); }
.week__now.is-on { opacity: 1; }
.week__now::before { content: ""; position: absolute; left: 50%; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); transform: translateX(-50%); }
.week__line { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--t-small); color: var(--ink-2); min-height: 2.9em; }
.week__line b { color: var(--ink); }

@media (max-width: 899px) {
  .zeiten__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "week" "more"; row-gap: 16px; }
  .zeiten__now { margin-top: 12px; }
  .zeiten__fine { display: none; }
  .zeiten__more { display: none; }
  .zcard { padding: 12px 14px; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; }
  .zcard p { font-size: 13px; line-height: 1.4; }
  .zcard b { font-size: 14px; }
  .zcard svg { width: 20px; height: 20px; }
  .zcard .lnk { grid-column: 3; margin: 0; }
  .week { padding: 14px 12px 12px; }
  .week__axis { margin-left: 46px; height: 18px; font-size: 11px; }
  .week__rows { gap: 4px; }
  .week__row { grid-template-columns: 40px minmax(0, 1fr); gap: 6px; height: 31px; }
  .week__d { font-size: 14px; padding-left: 6px; }
  .week__row.is-today .week__d::after { display: none; }
  .week__track i { font-size: 11.5px; top: 4px; bottom: 4px; }
  .week__track em { font-size: 12.5px; padding-left: 10px; }
  .week__line { margin-top: 10px; padding-top: 10px; min-height: 0; }
}
@media (max-width: 899px) and (max-height: 700px) { .zcard--sos p span.hide-s { display: none; } }

/* ------------------------------------------------------------------ Neu bei uns */
.neu__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 6vw, 110px); align-items: center; }
.neu__main { min-width: 0; }
.req, .ticket { margin-top: clamp(16px, 3svh, 30px); background: var(--paper); border-radius: var(--r); padding: clamp(18px, 2.8svh, 28px) clamp(18px, 2vw, 28px); box-shadow: 0 0 0 1px var(--line), 0 30px 60px -44px rgba(14, 27, 51, .35); }
.req__steps { display: flex; gap: 8px; counter-reset: s; margin-bottom: clamp(14px, 2.4svh, 22px); }
.req__steps li { counter-increment: s; flex: 1; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); padding-top: 10px; border-top: 2px solid var(--line); transition: border-color .3s var(--ease), color .3s var(--ease); }
.req__steps li::before { content: counter(s); font-weight: 600; }
.req__steps li.is-on, .req__steps li.is-done { color: var(--ink); border-color: var(--blue); }
.req__q { font: 400 var(--h3s)/1.25 var(--serif); margin-bottom: 12px; }
.req__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt { position: relative; display: grid; gap: 2px; text-align: left; padding: 13px 16px 13px 16px; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .25s var(--ease), background-color .25s var(--ease); min-height: 64px; align-content: center; }
.opt b { font-weight: 600; font-size: 15.5px; }
.opt small { font-size: 13.5px; color: var(--muted); }
.opt:hover { box-shadow: inset 0 0 0 1px var(--blue); }
.opt[aria-checked="true"] { background: var(--blue-l); box-shadow: inset 0 0 0 2px var(--blue); }
.opt[aria-checked="true"]::after { content: ""; position: absolute; right: 12px; top: 12px; width: 18px; height: 18px; border-radius: 50%; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.req__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fld { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.fld input { height: 48px; padding: 0 14px; border-radius: 3px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); font-size: 16px; outline: none; transition: border-color .2s; min-width: 0; }
.fld input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-l); }
.fld input.is-bad { border-color: #B4472E; }
.seg { display: flex; align-items: center; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.seg__lab { font-size: 14px; color: var(--ink-2); margin-right: 8px; }
.seg button { height: 38px; padding: 0 18px; border-radius: 19px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14.5px; }
.seg button[aria-checked="true"] { background: var(--blue); color: #fff; box-shadow: none; }
.req__pain-line { color: var(--ink-2); font-size: var(--t-body); line-height: 1.5; }
.req__pain-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.req.is-pain .req__nav, .req.is-pain .req__steps { display: none; }
.req__alt { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.req__alt svg { width: 16px; height: 16px; }
.req__alt:hover { color: var(--blue); }
.req__warn { min-height: 0; color: #B4472E; font-size: 13.5px; }
.req__warn:not(:empty) { margin-top: 10px; }
.req__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: clamp(14px, 2.4svh, 22px); }
.req__next { margin-left: auto; }
.ticket__lab { display: flex; align-items: center; gap: 10px; font: 600 var(--t-lab)/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--teal); }
.ticket__lab svg { width: 20px; height: 20px; }
.ticket__rows { margin: 12px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; }
.ticket__rows div { padding: 9px 0 10px; border-bottom: 1px solid var(--line); min-width: 0; }
.ticket__rows dt { font: 500 var(--t-cap)/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ticket__rows dd { margin: 2px 0 0; font-size: 15.5px; overflow-wrap: anywhere; }
.ticket__note { margin-top: 14px; font-size: var(--t-small); color: var(--muted); }
.ticket__acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-top: 16px; }
.neu__foot { display: none; margin-top: 12px; font-size: 13px; color: var(--muted); line-height: 1.45; }

.wahl { background: var(--blue); color: #fff; border-radius: var(--r); padding: clamp(24px, 4svh, 40px) clamp(22px, 2.6vw, 38px); }
.wahl .h-label { color: rgba(255, 255, 255, .72); }
.wahl__t { font: 400 var(--h3m)/1.18 var(--serif); margin-top: 8px; }
.wahl__t em { color: #fff; opacity: .78; }
.wahl__flow { margin-top: clamp(18px, 3svh, 30px); display: grid; gap: clamp(14px, 2.4svh, 22px); position: relative; }
.wahl__flow::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 1px; background: rgba(255, 255, 255, .3); }
.wahl__flow li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; }
.wahl__ico { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.wahl__ico svg { width: 22px; height: 22px; }
.wahl__flow b { font-weight: 600; font-size: 16px; padding-top: 2px; }
.wahl__flow span:not(.wahl__ico) { font-size: 14.5px; color: rgba(255, 255, 255, .8); line-height: 1.45; }
.wahl__src { margin-top: clamp(16px, 3svh, 28px); padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .22); font-size: 13px; color: rgba(255, 255, 255, .7); }

@media (max-width: 899px) {
  .neu__grid { grid-template-columns: minmax(0, 1fr); }
  .wahl { display: none; }
  .neu__foot { display: block; }
  .req, .ticket { padding: 16px 14px; margin-top: 14px; }
  .req__steps { margin-bottom: 12px; }
  .req__steps li { font-size: 12.5px; padding-top: 8px; }
  .req__q { margin-bottom: 10px; }
  .req__opts { gap: 8px; }
  .opt { padding: 10px 12px; min-height: 58px; }
  .opt b { font-size: 15px; }
  .opt small { font-size: 12.5px; }
  .opt[aria-checked="true"]::after { right: 8px; top: 8px; }
  .req__fields { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fld input { height: 44px; }
  .seg { margin-top: 10px; }
  .ticket__rows div { padding: 7px 0 8px; }
  .ticket__rows dd { font-size: 14.5px; }
  .ticket__note .hide-s { display: none; }
  .ticket__acts { flex-wrap: nowrap; gap: 8px; }
  .ticket__acts .btn { --h: 46px; padding: 0 12px; font-size: 14px; }
}

/* ------------------------------------------------------------------ Leistungen */
.lei__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(40px, 5vw, 96px); align-items: center; }
.lei__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: clamp(18px, 3svh, 30px); }
.lei__tabs button { height: 38px; padding: 0 13px; border-radius: 19px; font-size: 14px; box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); }
.lei__tabs button:hover { box-shadow: inset 0 0 0 1px var(--blue); }
.lei__tabs button[aria-selected="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.lei__list { margin-top: clamp(14px, 2.4svh, 22px); display: grid; border-top: 1px solid var(--line); }
.lei__list[hidden] { display: none; }
.lei__list button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; padding: clamp(9px, 1.4svh, 13px) 4px; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--ink-2); transition: color .25s var(--ease), padding .35s var(--ease); }
.lei__list button::after { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .25s var(--ease), box-shadow .25s var(--ease); }
.lei__list button:hover { color: var(--ink); }
.lei__list button[aria-pressed="true"] { color: var(--blue); font-weight: 500; padding-left: 12px; }
.lei__list button[aria-pressed="true"]::after { background: var(--blue); box-shadow: none; }
.lei__stage { display: grid; gap: clamp(14px, 2.4svh, 22px); }
.opg { position: relative; background: #FBFAF7; border-radius: var(--r); padding: clamp(10px, 2svh, 22px) clamp(10px, 1.6vw, 24px); box-shadow: 0 0 0 1px var(--line), 0 30px 60px -44px rgba(14, 27, 51, .35); }
.opg__svg { width: 100%; height: auto; aspect-ratio: 1000 / 440; max-height: calc(var(--scr-h) - 190px); margin: 0 auto; overflow: visible; }
.opg__tag { position: absolute; right: 14px; bottom: 10px; font: 500 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.t path, .t circle, .t ellipse { transition: fill .45s var(--ease), stroke .45s var(--ease), opacity .45s var(--ease), stroke-width .45s var(--ease); }
.t { transition: opacity .45s var(--ease); }
.t__root { fill: #EFECE5; stroke: rgba(14, 27, 51, .42); stroke-width: 1.3; }
.t__crown { fill: #fff; stroke: rgba(14, 27, 51, .72); stroke-width: 1.5; }
.t__canal { fill: none; stroke: rgba(14, 27, 51, .22); stroke-width: 1.2; stroke-linecap: round; }
.t__apex { fill: var(--blue); stroke: var(--blue); stroke-width: 1.5; opacity: 0; }
.t__occ { fill: var(--blue); opacity: 0; }
.o__gum { fill: none; stroke: var(--teal); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .45s var(--ease); }
.o__splint { fill: rgba(20, 70, 158, .1); stroke: var(--blue); stroke-width: 1.6; opacity: 0; transition: opacity .45s var(--ease); }
.o__bridge { fill: none; stroke: var(--blue); stroke-width: 5; stroke-linecap: round; opacity: 0; transition: opacity .45s var(--ease); }
.o__base { fill: rgba(12, 122, 132, .12); stroke: var(--teal); stroke-width: 1.4; opacity: 0; transition: opacity .45s var(--ease); }
.opg.has-hl .t { opacity: .5; }
.opg .t.is-hl { opacity: 1; }
.opg .t.hl-crown .t__crown, .opg .t.hl-whole .t__crown { fill: #D3DEF3; stroke: var(--blue); stroke-width: 2.2; }
.opg .t.hl-whole .t__root { fill: #DFE7F6; stroke: var(--blue); stroke-width: 1.8; }
.opg .t.hl-canal .t__canal { stroke: var(--blue); stroke-width: 3; }
.opg .t.hl-apex .t__apex { opacity: .9; }
.opg .t.hl-occ .t__occ { opacity: .9; }
.opg .t.hl-gap { opacity: .14; }
.opg.hl-gum .o__gum, .opg.hl-splint .o__splint, .opg.hl-bridge .o__bridge, .opg.hl-base .o__base { opacity: 1; }
.opg.hl-none .t { opacity: .28; }
.lei__cap { min-height: 7.4em; }
.lei__t { font: 400 var(--h3m)/1.2 var(--serif); }
.lei__d { margin-top: 6px; color: var(--ink-2); font-size: var(--t-lead); line-height: 1.5; max-width: 40em; }
.lei__kl { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font: 500 var(--t-cap)/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.lei__kl::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.lei__kl[hidden] { display: none; }

@media (max-width: 899px) {
  .lei__grid { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .lei__tabs { flex-wrap: nowrap; overflow-x: auto; margin: 14px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter); scrollbar-width: none; }
  .lei__tabs::-webkit-scrollbar, .lei__list::-webkit-scrollbar { display: none; }
  .lei__tabs button { flex: none; height: 36px; padding: 0 14px; font-size: 14px; }
  .lei__list { display: flex; gap: 6px; overflow-x: auto; border: 0; margin: 10px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter); scrollbar-width: none; }
  .lei__list li { flex: none; }
  .lei__list button { height: 36px; padding: 0 13px; border: 0; border-radius: 18px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; white-space: nowrap; }
  .lei__list button::after { display: none; }
  .lei__list button[aria-pressed="true"] { padding-left: 13px; background: var(--blue); color: #fff; box-shadow: none; }
  .opg { padding: 8px 6px 18px; }
  .opg__tag { right: 10px; bottom: 6px; font-size: 9.5px; }
  .lei__cap { min-height: 8.6em; }
  .lei__d { font-size: 14.5px; }
}

/* ------------------------------------------------------------------ Generationen */
.gen__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(40px, 6vw, 110px); align-items: center; }
.gen__art { position: relative; display: grid; justify-items: center; gap: 14px; }
.gen__svg { width: min(100%, calc(var(--scr-h) - 60px)); height: auto; aspect-ratio: 924 / 902; overflow: visible; }
.gen__ghost { color: rgba(20, 70, 158, .08); }
.gen__a, .gen__b { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.gen__a { stroke: var(--blue); }
.gen__b { stroke: var(--teal); }
.gen__dot { fill: var(--paper); stroke: var(--blue); stroke-width: 9; transition: fill .3s var(--ease), r .3s var(--ease); cursor: pointer; }
.gen__dot.is-b { stroke: var(--teal); }
.gen__dot.is-past { fill: var(--blue-l); }
.gen__dot.is-on { fill: var(--blue); }
.gen__dot.is-b.is-on { fill: var(--teal); }
.gen__dot.is-off { opacity: .45; }
.gen__keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
.gen__key { display: inline-flex; align-items: center; gap: 8px; font: 500 var(--t-cap)/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.gen__key::before { content: ""; width: 22px; height: 4px; border-radius: 2px; background: var(--blue); }
.gen__key--b::before { background: var(--teal); }
.gen__years { display: flex; flex-wrap: wrap; gap: 6px; margin-top: clamp(18px, 3svh, 30px); }
.gen__years button { height: 38px; min-width: 62px; padding: 0 14px; border-radius: 19px; font-size: 15px; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); }
.gen__years button:hover { box-shadow: inset 0 0 0 1px var(--blue); }
.gen__years button[aria-selected="true"] { background: var(--blue); color: #fff; box-shadow: none; }
.gen__years button[data-year="6"][aria-selected="true"] { background: var(--teal); }
.gen__text { margin-top: clamp(16px, 3svh, 28px); min-height: 6.2em; }
.gen__t { font: 400 var(--h3m)/1.2 var(--serif); }
.gen__d { margin-top: 6px; font-size: var(--t-lead); color: var(--ink-2); max-width: 34em; }
.gen__q { margin: clamp(18px, 3.4svh, 34px) 0 0; padding-top: clamp(14px, 2.4svh, 22px); border-top: 1px solid var(--line); }
.gen__q p { font: italic 400 clamp(1.25rem, min(1.6vw, 2.8svh), 1.6rem)/1.3 var(--serif); }
.gen__q cite { display: block; margin-top: 8px; font: 500 var(--t-cap)/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-style: normal; }
@media (max-width: 899px) {
  .gen__grid { grid-template-columns: minmax(0, 1fr); }
  .gen__art { order: 2; margin-top: 12px; gap: 8px; }
  .gen__copy { display: contents; }
  .gen__copy > .h-label { order: 0; } .gen__copy > .h2 { order: 1; }
  .gen__years { order: 3; } .gen__text { order: 4; }
  .gen__svg { width: clamp(150px, 26svh, 230px); }
  .gen__years { flex-wrap: nowrap; overflow-x: auto; margin: 12px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter); scrollbar-width: none; }
  .gen__years::-webkit-scrollbar { display: none; }
  .gen__years button { flex: none; height: 36px; min-width: 0; font-size: 14px; }
  .gen__text { margin-top: 12px; min-height: 7.6em; }
  .gen__d { font-size: 14.5px; }
  .gen__q { display: none; }
}

/* ------------------------------------------------------------------ Ärzte */
.docs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 48px); margin-top: clamp(20px, 4svh, 44px); }
.doc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 2vw, 30px); align-items: end; }
.doc__img { display: block; overflow: hidden; border-radius: var(--r); aspect-ratio: 4 / 5; background: var(--bg-2); max-height: calc(var(--scr-h) - 150px); }
.doc__img img { width: 100%; height: 100%; object-fit: cover; }
.doc__name { font: 400 var(--h3m)/1.15 var(--serif); }
.doc__role { margin-top: 8px; font: 500 var(--t-cap)/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.doc__facts { margin-top: 14px; display: grid; gap: 8px; font-size: var(--t-small); color: var(--ink-2); }
.doc__facts li { padding-top: 8px; border-top: 1px solid var(--line); }
@media (max-width: 899px) {
  .docs__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 16px; }
  .doc { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: start; }
  .doc__img { max-height: none; }
  .doc__name { font-size: 1.22rem; }
  .doc__role { margin-top: 4px; font-size: 10px; }
  .doc__facts { margin-top: 8px; gap: 5px; font-size: 13px; line-height: 1.4; }
  .doc__facts li { padding-top: 5px; }
}

/* ------------------------------------------------------------------ Lage */
.lage__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(36px, 5vw, 90px); align-items: center; }
.lage__map { display: grid; gap: 8px; }
.map { position: relative; overflow: hidden; border-radius: var(--r); aspect-ratio: 330 / 224; max-height: calc(var(--scr-h) - 30px); background: #ECE8E0; box-shadow: 0 0 0 1px var(--line); }
.map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__ground { fill: #ECE8E0; }
.map__bld { fill: #DDD7CB; }
.map__church { fill: #CFC6B5; }
.map__home { fill: var(--blue); }
.map__case-roads path { stroke: #D6CFC2; }
.map__roads path { stroke: #FBFAF7; }
.map__foot path { stroke: #C9C1B2; stroke-width: 1.3; stroke-dasharray: 3 3; }
.map__case { stroke: #fff; stroke-width: 8; vector-effect: non-scaling-stroke; }
.map__line { stroke: var(--teal); stroke-width: 4; vector-effect: non-scaling-stroke; }
.map__route { opacity: 0; transition: opacity .4s var(--ease); }
.map__route.is-on { opacity: 1; }
.map__route.is-peek { opacity: .5; }
.map__src { font-size: 11.5px; color: var(--muted); }
.pin { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--ink); font: 600 13px/1 var(--sans); box-shadow: 0 0 0 1.5px var(--ink-2), 0 6px 14px -6px rgba(14, 27, 51, .5); transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); }
.pin.is-on { background: var(--teal); color: #fff; box-shadow: 0 0 0 1.5px var(--teal), 0 6px 14px -6px rgba(14, 27, 51, .5); }
.pin--home { width: auto; height: 34px; padding: 0 12px 0 6px; gap: 8px; display: inline-flex; border-radius: 17px; background: var(--blue); color: #fff; box-shadow: 0 8px 20px -8px rgba(14, 27, 51, .6); z-index: 2; transform: translate(-18px, calc(-100% - 8px)); }
.pin--home svg { width: 24px; height: 24px; padding: 3px; border-radius: 50%; background: #fff; color: var(--blue); }
.pin--home b { font-weight: 600; font-size: 13px; }
.pin--home::after { content: ""; position: absolute; left: 13px; bottom: -5px; width: 10px; height: 10px; background: var(--blue); transform: rotate(45deg); z-index: -1; }
.lage__addr { margin-top: 10px; font-size: var(--t-lead); color: var(--ink-2); }
.near { margin-top: clamp(16px, 3svh, 28px); display: grid; border-top: 1px solid var(--line); }
.near button { width: 100%; display: grid; grid-template-columns: 26px 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: clamp(10px, 1.6svh, 14px) 4px; text-align: left; border-bottom: 1px solid var(--line); transition: background-color .25s var(--ease); }
.near button:hover { background: rgba(20, 70, 158, .04); }
.near__no { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.near button[aria-pressed="true"] { background: var(--teal-l); }
.near button[aria-pressed="true"] .near__no { background: var(--teal); color: #fff; box-shadow: none; }
.near__ico { width: 22px; height: 22px; color: var(--blue); }
.near__n b { display: block; font-weight: 500; font-size: 15.5px; line-height: 1.3; }
.near__n small { display: block; font-size: 13px; color: var(--muted); }
.near__d { text-align: right; font: 400 1.3rem/1 var(--serif); white-space: nowrap; }
.near__d small { display: block; margin-top: 4px; font: 400 12px/1 var(--sans); color: var(--muted); }
.lage__route { margin-top: clamp(16px, 3svh, 26px); }
@media (max-width: 899px) {
  .lage__grid { grid-template-columns: minmax(0, 1fr); }
  .lage__map { order: 2; margin-top: 12px; gap: 4px; }
  .lage__copy { display: contents; }
  .lage__copy > * { order: 1; }
  .lage__copy > .near, .lage__copy > .lage__route { order: 3; }
  .map { aspect-ratio: auto; height: clamp(170px, 30svh, 260px); max-height: none; }
  .map__src { font-size: 10.5px; }
  .lage__addr { margin-top: 6px; font-size: 15px; }
  .near { margin-top: 10px; }
  .near button { padding: 9px 2px; gap: 10px; grid-template-columns: 24px 20px minmax(0, 1fr) auto; }
  .near__n b { font-size: 14.5px; }
  .near__n small { font-size: 12px; }
  .near__d { font-size: 1.15rem; }
  .lage__route { --h: 44px; margin-top: 12px; justify-self: start; }
}

/* ------------------------------------------------------------------ Footer */
.foot { background: var(--navy); color: var(--on-navy); padding: clamp(56px, 10svh, 110px) 0 calc(28px + env(safe-area-inset-bottom)); }
.foot__in { display: grid; gap: clamp(32px, 6svh, 64px); }
.foot__brand { display: flex; align-items: center; gap: 22px; }
.foot__mark { width: clamp(56px, 7vw, 92px); height: auto; aspect-ratio: 924 / 902; color: #fff; }
.foot__name { font: 400 clamp(2rem, 4.4vw, 4rem)/1.05 var(--serif); }
.foot__name em { color: #AFC3EA; }
.foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.foot__cols h4 { font: 600 var(--t-lab)/1.6 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--on-navy-2); margin-bottom: 10px; }
.foot__cols p { font-size: 15px; line-height: 1.6; }
.foot__cols a { border-bottom: 1px solid rgba(238, 241, 247, .35); }
.foot__cols a:hover { border-color: #fff; }
.foot__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; border-top: 1px solid rgba(238, 241, 247, .16); font-size: 13px; color: var(--on-navy-2); }
.foot__bar a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 899px) {
  .foot { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .foot__cols { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
  .foot__cols p { font-size: 14px; }
  .foot__brand { gap: 14px; }
}

/* ------------------------------------------------------------------ dock (phone) */
.dock { display: none; }
@media (max-width: 899px) {
  .dock { position: fixed; z-index: 50; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; gap: 8px; padding: 6px; border-radius: 6px; background: rgba(255, 255, 255, .97); box-shadow: 0 0 0 1px var(--line), 0 14px 36px -12px rgba(14, 27, 51, .45); transform: translateY(calc(100% + 24px)); transition: transform .5s var(--ease); }
  .dock.is-on { transform: none; }
  .dock__book { flex: 1; height: 48px; border-radius: 4px; background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 500; font-size: 15px; -webkit-touch-callout: none; }
  .dock__book:active { transform: scale(.98); }
  .dock__ico { position: relative; flex: none; width: 58px; height: 48px; border-radius: 4px; display: grid; place-items: center; align-content: center; gap: 5px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); }
  .dock__ico span { font-size: 9.5px; letter-spacing: .02em; color: var(--muted); line-height: 1; white-space: nowrap; }
  .dock__ico svg { width: 19px; height: 19px; color: var(--blue); }
  .dock__live .dot { width: 9px; height: 9px; margin: 3px 0 2px; }
  .dock__note i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); margin: 4px 0 3px; }
  .dock__asst .asst-btn__dot { position: absolute; top: 5px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 2px #fff; }
  .dock__asst.is-seen .asst-btn__dot { display: none; }
  .dock__note[aria-expanded="true"] { background: var(--blue-l); }
}

/* ------------------------------------------------------------------ assistant */
.asst-btn { position: fixed; z-index: 49; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 9px; height: 50px; padding: 0 20px 0 16px; border-radius: 25px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 500; box-shadow: 0 14px 34px -10px rgba(14, 27, 51, .55); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; }
.asst-btn.is-on { opacity: 1; visibility: visible; }
.asst-btn.is-on.is-away { opacity: 0; visibility: hidden; }
.asst-btn svg { width: 20px; height: 20px; flex: none; color: #AFC3EA; }
.asst-btn__dot { position: absolute; top: -2px; right: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 2px var(--bg); }
.asst-btn.is-seen .asst-btn__dot { display: none; }
.asst-btn.is-compact { width: 46px; padding: 0; justify-content: center; }
.asst-btn.is-compact .asst-btn__label { display: none; }
.asst-btn.is-compact .asst-btn__dot { right: 1px; top: 0; }
.asst-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 1.5px var(--teal); opacity: 0; pointer-events: none; }
.asst-btn.is-ring::after { animation: asst-ring 2.6s var(--ease) 2; }
@keyframes asst-ring { 0% { opacity: .75; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.14, 1.42); } }
.asst-tip { position: absolute; right: calc(100% + 10px); top: 50%; width: max-content; max-width: min(250px, calc(100vw - 160px)); padding: 9px 14px; border-radius: 12px 12px 3px 12px; background: var(--paper); color: var(--ink); text-align: left; line-height: 1.25; box-shadow: 0 0 0 1px var(--line), 0 14px 32px -10px rgba(14, 27, 51, .45); opacity: 0; visibility: hidden; transform: translate(8px, -50%); transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s; }
.asst-btn.is-tip .asst-tip { opacity: 1; visibility: visible; transform: translate(0, -50%); }
.asst-tip b { display: block; font-size: 14px; font-weight: 600; }
.asst-tip small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--muted); }
.asst-tip__dots { display: flex; gap: 4px; padding: 5px 2px; }
.asst-tip__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: asst-dot 1s ease-in-out infinite; }
.asst-tip__dots i:nth-child(2) { animation-delay: .16s; } .asst-tip__dots i:nth-child(3) { animation-delay: .32s; }
.asst-btn:not(.is-tip) .asst-tip__dots i, .asst-btn.is-said .asst-tip__dots i { animation-play-state: paused; }
@keyframes asst-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.asst-tip__txt { display: none; }
.asst-btn.is-said .asst-tip__dots { display: none; }
.asst-btn.is-said .asst-tip__txt { display: block; }
.asst { position: fixed; inset: 0; z-index: 92; background: rgba(14, 27, 51, .4); }
.asst[hidden] { display: none; }
.asst__panel { position: absolute; right: 20px; bottom: 20px; width: 400px; height: min(800px, calc(100dvh - 40px)); border-radius: 14px; overflow: hidden; background: var(--navy); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); }
.asst__panel iframe { display: block; width: 100%; height: 100%; border: 0; }
.asst__x { position: absolute; z-index: 1; top: 30px; right: 12px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(11, 28, 60, .72); border: 1px solid rgba(255, 255, 255, .3); color: #fff; }
.asst__x svg { width: 16px; height: 16px; }
@media (max-width: 899px) {
  .asst-btn { display: none; }
  .asst__panel { inset: 0; width: auto; height: auto; border-radius: 0; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
  .asst__x { top: calc(30px + env(safe-area-inset-top)); }
}
@media (prefers-reduced-motion: reduce) { .asst-btn.is-ring::after, .asst-tip__dots i, .dot.is-open::after { animation: none; } .asst-tip { transition: none; } }

/* ------------------------------------------------------------------ draft note */
.note { position: fixed; z-index: 52; left: 10px; top: 50%; font-size: 14.5px; opacity: 0; visibility: hidden; transform: translate(-6px, -50%); transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s; }
.note.is-shown, .note.is-open { opacity: 1; visibility: visible; transform: translate(0, -50%); }
.note__btn { display: inline-flex; align-items: center; gap: 10px; writing-mode: vertical-rl; transform: rotate(180deg); width: 26px; padding: 14px 0 12px; border-radius: 4px; background: rgba(11, 28, 60, .9); color: #fff; font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.note__btn i { width: 6px; height: 6px; border-radius: 50%; background: #AFC3EA; }
.note__panel { position: absolute; left: 38px; top: 50%; transform: translateY(-50%); width: min(340px, calc(100vw - 32px)); background: var(--paper); color: var(--ink); border-radius: 5px; padding: 22px; box-shadow: 0 30px 70px -20px rgba(14, 27, 51, .45), 0 0 0 1px var(--line); display: grid; gap: 10px; font-size: 15px; line-height: 1.5; }
.note__panel[hidden] { display: none; }
.note__panel b { font: 400 1.6rem/1.2 var(--serif); }
.note__panel .btn { --h: 44px; margin-top: 6px; justify-self: start; }
.note__fine { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.note__fine a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 899px) {
  .note { left: 12px; right: 12px; top: auto; bottom: calc(80px + env(safe-area-inset-bottom)); transform: translateY(8px); }
  .note.is-shown:not(.is-open) { opacity: 0; visibility: hidden; }
  .note.is-open { transform: none; }
  .note__btn { display: none; }
  .note__panel { position: static; width: auto; transform: none; }
}

/* ------------------------------------------------------------------ intro states */
.js .crest__a, .js .crest__b { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.js .crest__lab, .js .crest__since, .js .desk, .js .hero__cap, .js .hdr { opacity: 0; }
.js .crest__name { opacity: 0; }
.js .hero__fig .rv { transform: translateY(101%); }
.js .hero__img { transform: translateY(-101%) scale(1.08); }
.no-anim .crest__a, .no-anim .crest__b, .is-static .crest__a, .is-static .crest__b { stroke-dashoffset: 0 !important; }
.no-anim .crest__lab, .no-anim .crest__since, .no-anim .desk, .no-anim .hero__cap, .no-anim .hdr, .no-anim .crest__name,
.is-static .crest__lab, .is-static .crest__since, .is-static .desk, .is-static .hero__cap, .is-static .hdr, .is-static .crest__name { opacity: 1 !important; }
.no-anim .hero__fig .rv, .no-anim .hero__img, .is-static .hero__fig .rv, .is-static .hero__img { transform: none !important; }
.no-anim .gen__a, .no-anim .gen__b { stroke-dashoffset: 0; }

/* utility */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }

/* short phones (iOS Safari with toolbars, 390×664) */
@media (max-width: 899px) and (max-height: 700px) {
  .week__row { height: 29px; }
  .zeiten__now { margin-top: 8px; }
  .map { height: 24svh; }
  .near button { padding: 7px 2px; }
  .lage__route { margin-top: 10px; }
  .req__steps { margin-bottom: 8px; }
  .req__steps li { padding-top: 6px; }
  .fld input { height: 42px; }
  .req__nav { margin-top: 12px; }
}