/* ==========================================================================
   Praxis Schlegel - Design-System
   Ruhig, hell, grosszuegig. Grosse Schrift und grosse Klickflaechen, damit
   sich Patient:innen jeden Alters ohne Nachdenken durchklicken koennen.
   ========================================================================== */

/* ---------- Design-Token ------------------------------------------------ */
:root {
  /* Marke: das Gold aus dem Logo */
  --gold:        #918a00;
  --gold-600:    #7d7700;
  --gold-700:    #665f00;
  --gold-100:    #f2f0d6;
  --gold-50:     #faf9ee;

  --ink:         #1c1d1a;
  --ink-2:       #3d3f39;
  --muted:       #6b6d66;
  --line:        #e2e2d8;
  --line-strong: #cbcbbc;

  --bg:          #ffffff;
  --bg-soft:     #faf9f5;
  --bg-card:     #ffffff;

  --ok:          #2c7a52;
  --ok-bg:       #e8f5ee;
  --warn:        #9a6a00;
  --warn-bg:     #fdf3dd;
  --err:         #a52a2a;
  --err-bg:      #fbeaea;
  --info:        #2a5f8f;
  --info-bg:     #e9f1f8;

  --radius:      14px;
  --radius-sm:   9px;
  --radius-lg:   22px;

  --shadow-sm:   0 1px 2px rgba(28,29,26,.06), 0 1px 3px rgba(28,29,26,.05);
  --shadow:      0 2px 6px rgba(28,29,26,.06), 0 8px 24px rgba(28,29,26,.07);
  --shadow-lg:   0 8px 20px rgba(28,29,26,.09), 0 24px 48px rgba(28,29,26,.10);

  --wrap:        1160px;
  --wrap-narrow: 760px;

  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Spectral", Georgia, "Times New Roman", serif;

  --step: 1rem;
}

/* ---------- Reset ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 18px;          /* bewusst gross */
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold-600); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); }
h4 { font-size: 1.1rem; }
p  { margin: 0 0 1.1em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

ul, ol { padding-left: 1.3em; margin: 0 0 1.1em; }
li { margin-bottom: .45em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--gold-100); }

/* ---------- Layout ------------------------------------------------------ */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }

.section { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.section--soft { background: var(--bg-soft); }
.section--gold { background: var(--gold-50); }
.section--tight { padding: clamp(2rem, 4vw, 3rem) 0; }

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.stack > * + * { margin-top: 1rem; }
.row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.spacer { flex: 1; }

.text-center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.tiny  { font-size: .8rem; }
.lead  { font-size: 1.2rem; color: var(--ink-2); }
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.75rem}.mt-4{margin-top:2.5rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.75rem}
.nowrap { white-space: nowrap; }

/* Sektionskopf */
.section-head { max-width: 46rem; margin: 0 0 2.5rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.eyebrow {
  display: inline-block;
  font-family: var(--font);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: .7rem;
}

/* Skip-Link */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Buttons ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 52px;                       /* grosse Klickflaeche */
  padding: .8rem 1.6rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font: inherit; font-weight: 600; font-size: 1.02rem;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease,
              transform .12s ease, box-shadow .16s ease;
}
/* Reihenfolge beachten: :active steht spaeter und gewinnt deshalb gegen :hover */
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--gold); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--gold-600); color: #fff; box-shadow: var(--shadow); }

.btn-outline { background: transparent; color: var(--gold-700); border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--gold); background: var(--gold-50); color: var(--gold-700); }

.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--bg-soft); color: var(--ink); }

.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; color: #fff; }

.btn-danger { background: var(--err); color: #fff; }
.btn-danger:hover { background: #8e2222; color: #fff; }

.btn-sm { min-height: 40px; padding: .4rem 1rem; font-size: .92rem; }
.btn-lg { min-height: 60px; padding: 1rem 2.2rem; font-size: 1.12rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ---------- Karten ------------------------------------------------------ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}
.card--flat { box-shadow: none; }
.card--pad-lg { padding: clamp(1.75rem, 4vw, 2.75rem); }

a.card, .card--link { color: inherit; text-decoration: none; display: block; }
a.card:hover, .card--link:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  color: inherit;
}
.card--link { transition: border-color .18s, box-shadow .18s, transform .18s; }

.card-icon {
  width: 54px; height: 54px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--gold-100); color: var(--gold-700);
  font-size: 1.5rem; margin-bottom: 1rem;
}
.card h3 { margin-bottom: .4rem; }
.card-arrow { color: var(--gold-700); font-weight: 600; margin-top: 1rem; display: inline-block; }

/* ---------- Symbole (Inline-SVG aus _icons.html) ------------------------ *
   Die Zeichnungen tragen stroke: currentColor und uebernehmen damit die
   Schriftfarbe ihrer Umgebung - im goldenen Kachelfeld das Gold, im
   Fliesstext die Textfarbe. Groesse kommt aus dem Makro (Attribute width
   und height), damit ein Symbol im Einzelfall groesser gesetzt werden kann.
   Der Reset stellt img/svg auf display: block; fuer Symbole mitten im Text
   wird das hier wieder auf inline-block gedreht und die Grundlinie so
   verschoben, dass Symbol und Schrift auf einer Linie sitzen.
   ----------------------------------------------------------------------- */
.icon { display: inline-block; vertical-align: -.18em; flex: none; }
/* Im Kachelfeld zentriert die Rasterausrichtung bereits - dort stoert eine
   verschobene Grundlinie und das Symbol darf wieder ein Block sein. */
.card-icon > .icon { display: block; vertical-align: 0; }
/* Dasselbe im Leerzustand: die Schriftgroesse von .empty-icon stammt noch aus
   der Emoji-Zeit und wuerde eine Strichzeichnung sonst um die halbe
   Unterlaenge nach unten schieben. Als Block traegt das Symbol seine eigene
   Hoehe und wird ueber die Aussenabstaende mittig gesetzt. */
.empty-icon > .icon { display: block; vertical-align: 0; margin-inline: auto; }

/* ---------- Badges / Pills --------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .75rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; line-height: 1.4;
  background: var(--bg-soft); color: var(--ink-2); border: 1px solid var(--line);
}
.badge--gold { background: var(--gold-100); color: var(--gold-700); border-color: transparent; }
.badge--ok   { background: var(--ok-bg);   color: var(--ok);   border-color: transparent; }
.badge--warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.badge--err  { background: var(--err-bg);  color: var(--err);  border-color: transparent; }
.badge--info { background: var(--info-bg); color: var(--info); border-color: transparent; }

/* ---------- Hinweise / Flash ------------------------------------------- */
.notice {
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  border-left: 5px solid var(--info);
  background: var(--info-bg);
  color: #1f2b36;
  margin-bottom: 1.25rem;
}
.notice--ok   { border-color: var(--ok);   background: var(--ok-bg);   color: #16412c; }
.notice--warn { border-color: var(--warn); background: var(--warn-bg); color: #4d3600; }
.notice--err  { border-color: var(--err);  background: var(--err-bg);  color: #5c1616; }
/* Ausdruecklich vorhanden, weil die Flash-Meldungen diese Klasse setzen. */
.notice--info { border-color: var(--info); background: var(--info-bg); color: #1f2b36; }
.notice strong { display: block; margin-bottom: .2rem; }

/* ---------- Formulare --------------------------------------------------- */
.field { margin-bottom: 1.35rem; }
.field > label, .field-label {
  display: block; font-weight: 600; margin-bottom: .4rem; color: var(--ink);
}
.field-hint { font-size: .88rem; color: var(--muted); margin-top: .35rem; }
.req { color: var(--err); font-weight: 700; }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="time"], input[type="number"], input[type="password"], input[type="search"],
select, textarea {
  width: 100%;
  min-height: 52px;
  padding: .7rem .9rem;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
select { appearance: none; background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%236b6d66' d='M1.4 0 7 5.6 12.6 0 14 1.4 7 8.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px var(--gold-100);
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"],
.has-error input, .has-error select, .has-error textarea { border-color: var(--err); }
.field-error { color: var(--err); font-size: .9rem; font-weight: 600; margin-top: .35rem; }

/* Checkbox / Radio als grosse anklickbare Kachel */
.check {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .85rem 1rem;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  margin-bottom: .6rem;
  background: #fff;
}
.check:hover { border-color: var(--gold); background: var(--gold-50); }
.check input { width: 22px; height: 22px; min-height: 0; margin: .18rem 0 0; flex: none; accent-color: var(--gold); }
.check input:checked ~ .check-body { color: var(--ink); }
.check:has(input:checked) { border-color: var(--gold); background: var(--gold-50); }
.check-body { line-height: 1.45; }
.check-body strong { display: block; }
.check-body small { color: var(--muted); }

fieldset { border: 0; padding: 0; margin: 0 0 1.75rem; }
legend { font-weight: 700; font-size: 1.05rem; padding: 0; margin-bottom: .75rem; }

.form-grid { display: grid; gap: 0 1.25rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Honeypot */
.hp { position: absolute !important; left: -9999px !important; }

/* ---------- Tabellen ---------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
table.data { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.data th, table.data td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data thead th {
  background: var(--bg-soft); font-size: .78rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); font-weight: 700; white-space: nowrap;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--gold-50); }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Kopfbereich ------------------------------------------------- */
.topbar {
  background: var(--ink);
  color: #e8e8e2;
  font-size: .88rem;
}
.topbar a { color: #fff; text-decoration: none; font-weight: 500; }
.topbar a:hover { text-decoration: underline; }
.topbar .wrap { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; align-items: center; padding: .5rem 0; }

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
  padding: .75rem 0; }
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--ink); }
.brand img { height: 52px; width: auto; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text b { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
.brand-text span { font-size: .78rem; color: var(--muted); letter-spacing: .04em; }

.nav { display: flex; align-items: center; gap: .2rem; margin-left: auto; }
.nav a {
  padding: .6rem .85rem; border-radius: 8px;
  color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 1rem;
  white-space: nowrap;
}
.nav a:hover { background: var(--bg-soft); color: var(--ink); }
.nav a.is-active { color: var(--gold-700); font-weight: 700; }

.nav-drop { position: relative; }
.nav-drop > button {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .6rem .85rem; border: 0; background: none; border-radius: 8px;
  font: inherit; font-weight: 500; color: var(--ink-2); cursor: pointer;
}
.nav-drop > button:hover { background: var(--bg-soft); color: var(--ink); }
.nav-drop > button::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.nav-drop-menu {
  position: absolute; top: calc(100% + .4rem); left: 0; min-width: 250px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: .5rem; display: none; z-index: 70;
}
.nav-drop[open] .nav-drop-menu, .nav-drop.is-open .nav-drop-menu { display: block; }
.nav-drop-menu a { display: block; padding: .65rem .8rem; border-radius: 8px; }

.nav-cta { margin-left: .5rem; }

.burger {
  display: none; margin-left: auto;
  width: 52px; height: 52px; border: 2px solid var(--line-strong); border-radius: 12px;
  background: #fff; cursor: pointer; align-items: center; justify-content: center;
}
.burger span, .burger span::before, .burger span::after {
  display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; content: "";
  position: relative;
}
.burger span::before { position: absolute; top: -7px; }
.burger span::after  { position: absolute; top: 7px; }

/* Bis 1160px verschwindet die Kopfnavigation komplett - ihre Aufgabe
   uebernimmt das Off-Canvas-Panel am Ende des Body (siehe unten).
   Die Grenze liegt bewusst hoch: Logo, Praxisname und alle Menuepunkte
   zusammen brauchen rund 1120px - darunter schiebt sich beides ineinander.
   Wird sie geaendert, muss MOBIL_MAX in static/js/site.js mitziehen. */
@media (max-width: 1160px) {
  .burger { display: inline-flex; }
  .nav { display: none; }
}

/* Auf sehr schmalen Geraeten (ab etwa 360px) fehlt neben Logo und Menueknopf
   der Platz fuer die Zeile "Physio - Ergo - Handtherapie". Sie steht dort
   sonst unter dem Menueknopf. Der Praxisname bleibt sichtbar. */
@media (max-width: 480px) {
  .site-header .wrap { gap: .75rem; }
  .brand { gap: .6rem; }
  .brand img { height: 44px; }
  .brand-text span { display: none; }
}

/* ---------- Mobilmenue (eigenes Panel, NICHT im Kopfbereich) ------------ *
   Wichtig: .site-header traegt backdrop-filter. Ein solcher Filter erzeugt
   einen Bezugsrahmen fuer position:fixed - ein Panel innerhalb des Headers
   waere deshalb nur so hoch wie die Kopfzeile. Das Panel haengt darum
   direkt am Body und darf nie in ein Element mit backdrop-filter,
   filter oder transform verschoben werden.
   ----------------------------------------------------------------------- */
.mobilnav {
  position: fixed; inset: 0; z-index: 200;
  visibility: hidden;                     /* nimmt geschlossen auch den Fokus raus */
}
.mobilnav.is-open { visibility: visible; }

.mobilnav-overlay {
  position: absolute; inset: 0;
  background: rgba(28, 29, 26, .45);
  opacity: 0; transition: opacity .22s ease;
}
.mobilnav.is-open .mobilnav-overlay { opacity: 1; }

.mobilnav-panel {
  position: absolute; inset: 0 0 0 auto;
  width: min(88vw, 380px); max-width: 100%;
  display: flex; flex-direction: column; gap: .25rem;
  background: #fff; border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: 1rem 1.25rem 1.5rem;
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.22, .61, .36, 1);
}
.mobilnav.is-open .mobilnav-panel { transform: none; }

.mobilnav-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-bottom: .75rem; margin-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}
.mobilnav-head b { font-family: var(--font-display); font-size: 1.1rem; }
.mobilnav-close {
  width: 48px; height: 48px; flex: none;
  border: 2px solid var(--line-strong); border-radius: 12px;
  background: #fff; color: var(--ink); font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.mobilnav-close:hover { border-color: var(--gold); background: var(--gold-50); }

.mobilnav-list { list-style: none; margin: 0; padding: 0; }
.mobilnav-list li { margin: 0; }
.mobilnav-list a {
  display: block; padding: .78rem 1rem; border-radius: 10px;
  font-size: 1.1rem; font-weight: 500; color: var(--ink-2); text-decoration: none;
}
.mobilnav-list a:hover { background: var(--bg-soft); color: var(--ink); }
.mobilnav-list a.is-active { color: var(--gold-700); font-weight: 700; background: var(--gold-50); }

.mobilnav-gruppe { margin: .35rem 0; }
.mobilnav-gruppe > span {
  display: block; padding: .9rem 1rem .3rem;
  font-size: .82rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.mobilnav-gruppe ul { list-style: none; margin: 0 0 0 1rem; padding: 0;
  border-left: 3px solid var(--gold-100); }
.mobilnav-gruppe a { font-size: 1.02rem; padding: .6rem 1rem; }

.mobilnav-cta { margin: 1rem 0 .5rem; }
.mobilnav-foot {
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: .95rem; color: var(--muted); line-height: 1.8;
}
.mobilnav-foot a { display: inline-block; min-height: 44px; line-height: 44px; }

/* Solange das Menue offen ist, scrollt die Seite dahinter nicht mit. */
body.nav-offen { overflow: hidden; }

/* Ab 1161px gibt es das Panel gar nicht - dort gilt die Kopfnavigation. */
@media (min-width: 1161px) {
  .mobilnav { display: none; }
}

/* ---------- Hero -------------------------------------------------------- */
.hero {
  position: relative;
  background: linear-gradient(170deg, var(--gold-50) 0%, #fff 62%);
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -10%; top: -30%;
  width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(145,138,0,.10), transparent 65%);
  pointer-events: none;
}
/* Zweiter, sehr flacher Verlauf: gibt dem Hero Tiefe, ohne zu blinken. */
.hero::before {
  content: ""; position: absolute; inset: auto -10% -45% -25%;
  height: 85%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.85), rgba(255,255,255,0) 68%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.hero h1 { margin-bottom: 1rem; }
.hero-sub { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); color: var(--ink-2); max-width: 34rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: 2.5rem;
  padding-top: 1.75rem; border-top: 1px solid var(--line); }
.hero-fact b { display: block; font-family: var(--font-display); font-size: 1.35rem; }
.hero-fact span { font-size: .9rem; color: var(--muted); }
.hero-visual { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: #fff; }
.hero-visual img { width: 100%; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
}

/* ---------- Schnellzugriff (3 Kacheln) ---------------------------------- */
.quick { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.quick-card {
  display: flex; flex-direction: column; gap: .4rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem; text-decoration: none; color: inherit;
  box-shadow: var(--shadow-sm); transition: transform .18s, box-shadow .18s, border-color .18s;
  height: 100%;
}
.quick-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold); color: inherit; }
.quick-card .card-icon { margin-bottom: .6rem; }
.quick-card b { font-family: var(--font-display); font-size: 1.2rem; }
.quick-card p { color: var(--muted); font-size: .96rem; margin: 0; }
.quick-card .card-arrow { margin-top: auto; padding-top: .8rem; }

/* ---------- News / Presse ----------------------------------------------- */
.news-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; padding: 0; }
.news-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--bg-soft); }
.news-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.news-meta { font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em;
  font-weight: 600; margin-bottom: .5rem; }
.news-card h3 { font-size: 1.15rem; }
.news-card .card-arrow { margin-top: auto; }

/* ---------- Kontaktleiste (der gewuenschte gleichmaessige Dreier) -------- */
.contact-strip { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .contact-strip { grid-template-columns: 1fr; } }
.contact-col {
  display: flex; flex-direction: column; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.9rem 1.75rem; height: 100%;
}
.contact-col .card-icon { margin-bottom: 1rem; }
.contact-col h3 { font-size: 1.2rem; margin-bottom: .6rem; }
.contact-col address { font-style: normal; color: var(--ink-2); line-height: 1.7; margin-bottom: 1rem; }
.contact-col .btn { margin-top: auto; }
.contact-col a.plain { color: var(--ink-2); text-decoration: none; }
.contact-col a.plain:hover { color: var(--gold-700); text-decoration: underline; }

/* ---------- Oeffnungszeiten -------------------------------------------- */
.hours { width: 100%; border-collapse: collapse; }
.hours td { padding: .55rem 0; border-bottom: 1px dashed var(--line); }
.hours td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.hours tr:last-child td { border-bottom: 0; }
.hours tr.is-today td { color: var(--gold-700); font-weight: 700; }
.hours-status { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; }
.dot--open { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-bg); }
.dot--closed { background: var(--err); box-shadow: 0 0 0 4px var(--err-bg); }

/* ---------- Buchungsstrecke -------------------------------------------- */
.steps { display: flex; gap: .5rem; margin-bottom: 2.25rem; flex-wrap: wrap; }
.step {
  flex: 1 1 150px; display: flex; align-items: center; gap: .65rem;
  padding: .8rem 1rem; border-radius: var(--radius-sm);
  background: var(--bg-soft); border: 1px solid var(--line); font-size: .95rem; color: var(--muted);
}
.step b { width: 30px; height: 30px; border-radius: 50%; background: var(--line); color: #fff;
  display: grid; place-items: center; font-size: .9rem; flex: none; }
.step.is-active { background: var(--gold-50); border-color: var(--gold); color: var(--ink); font-weight: 600; }
.step.is-active b { background: var(--gold); }
.step.is-done { color: var(--ok); border-color: var(--ok-bg); background: var(--ok-bg); }
.step.is-done b { background: var(--ok); }

.choice-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.choice {
  display: block; text-align: left; width: 100%;
  padding: 1.15rem 1.3rem; border: 2px solid var(--line); border-radius: var(--radius);
  background: #fff; cursor: pointer; font: inherit; color: inherit;
  transition: border-color .15s, background .15s, transform .12s;
}
.choice:hover { border-color: var(--gold); background: var(--gold-50); transform: translateY(-2px); }
.choice.is-selected { border-color: var(--gold); background: var(--gold-50); box-shadow: 0 0 0 4px var(--gold-100); }
.choice b { display: block; font-size: 1.08rem; margin-bottom: .2rem; }
.choice small { color: var(--muted); display: block; line-height: 1.5; }

.daybar { display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .75rem; scroll-snap-type: x mandatory; }
.day {
  flex: none; min-width: 92px; scroll-snap-align: start;
  padding: .85rem .5rem; text-align: center; border: 2px solid var(--line);
  border-radius: var(--radius-sm); background: #fff; cursor: pointer; font: inherit;
}
.day small { display: block; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.day b { display: block; font-size: 1.25rem; font-family: var(--font-display); }
.day em { display: block; font-style: normal; font-size: .75rem; color: var(--muted); }
.day:hover:not([disabled]) { border-color: var(--gold); }
.day.is-selected { border-color: var(--gold); background: var(--gold); color: #fff; }
.day.is-selected small, .day.is-selected em { color: rgba(255,255,255,.85); }
.day[disabled] { opacity: .4; cursor: not-allowed; }

.slots { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.slot {
  padding: .8rem .5rem; text-align: center; font: inherit; font-weight: 600;
  font-variant-numeric: tabular-nums;
  border: 2px solid var(--line); border-radius: var(--radius-sm); background: #fff; cursor: pointer;
  min-height: 52px;
}
.slot:hover { border-color: var(--gold); background: var(--gold-50); }
.slot.is-selected { border-color: var(--gold); background: var(--gold); color: #fff; }

.summary-box {
  background: var(--gold-50); border: 1px solid var(--gold-100);
  border-radius: var(--radius); padding: 1.5rem;
}
.summary-box dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.25rem; margin: 0; }
.summary-box dt { color: var(--muted); font-size: .92rem; }
.summary-box dd { margin: 0; font-weight: 600; }

.spinner {
  width: 26px; height: 26px; border: 3px solid var(--line);
  border-top-color: var(--gold); border-radius: 50%;
  animation: spin .8s linear infinite; margin: 1.5rem auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Fusszeile --------------------------------------------------- */
.site-footer { background: var(--ink); color: #c9cac3; padding: clamp(3rem, 5vw, 4.5rem) 0 0; margin-top: 0; }
.site-footer h4 { color: #fff; font-family: var(--font); font-size: .82rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.1rem; }
.site-footer a { color: #c9cac3; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: .6rem; }
.footer-brand img { height: 64px; margin-bottom: 1rem; filter: brightness(0) invert(1); opacity: .92; }
.footer-note { color: #8b8c85; font-size: .92rem; line-height: 1.6; }
.social { display: flex; gap: .6rem; margin-top: 1.2rem; }
.social a {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255,255,255,.08); color: #fff; transition: background .16s;
}
.social a:hover { background: var(--gold); }
.footer-bottom {
  margin-top: 3rem; border-top: 1px solid rgba(255,255,255,.12);
  padding: 1.5rem 0; display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; align-items: center;
  font-size: .88rem; color: #8b8c85;
}

/* ---------- Prosa (Impressum / Datenschutz) ----------------------------- */
.prose { max-width: 46rem; }
.prose h2 { margin-top: 2.5rem; font-size: 1.6rem; }
.prose h3 { margin-top: 2rem; font-size: 1.22rem; }
.prose h4 { margin-top: 1.5rem; }
.prose p, .prose li { color: var(--ink-2); }
.prose a { word-break: break-word; }
.prose ul, .prose ol { margin-bottom: 1.4rem; }
.toc { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.toc ul { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 2rem; }
@media (max-width: 700px) { .toc ul { columns: 1; } }
.toc li { margin-bottom: .5rem; break-inside: avoid; }

/* ---------- Akkordeon (FAQ) --------------------------------------------- */
details.acc { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; margin-bottom: .75rem; }
details.acc > summary {
  cursor: pointer; padding: 1.1rem 1.35rem; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-height: 56px;
}
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::after { content: "+"; font-size: 1.5rem; color: var(--gold-700); line-height: 1; }
details.acc[open] > summary::after { content: "\2013"; }
details.acc > div { padding: 0 1.35rem 1.35rem; color: var(--ink-2); }

/* ---------- Wasserzeichen (Papierueberdruck) ---------------------------- *
   Drei Ebenen in einem Element, von unten nach oben:
     1. .watermark-foto - ein Hauch Triberg: das Panorama stark unscharf,
                          oben angesetzt und nach unten ausgeblendet
     2. ::before        - das unscharfe Logo der Marke
     3. ::after         - eine weisse Schicht, die alles zurueckhaelt
   Die weisse Schicht ist oben etwas offener als unten (.62 -> .78): oben
   liegt das Motiv, unten der Fliesstext, der ruhig bleiben soll. Gewollt ist
   ein Ueberdruck auf Papier, kein Hintergrundbild.

   Lesbarkeit, nachgerechnet: der dunkelste ueberhaupt moegliche Punkt ist
   die Stelle, an der die dunkelste Fotoflaeche (rgb 32,40,15 nach der
   Unschaerfe) und die dunkelste Logoflaeche (rgb 11,11,11) genau
   uebereinander liegen. Das ergibt rgb(218,218,217). Darauf stehen
     --ink-2    #3d3f39 (Fliesstext)       7,62:1
     --ink      #1c1d1a (Ueberschriften)  12,10:1
     --gold-700 #665f00 (Eyebrow, Links)   4,69:1
   WCAG AA verlangt 4,5:1 - alle drei liegen darueber. Selbst wenn man beide
   Bildebenen als reines Schwarz annimmt, bleiben rgb(215,215,215) und damit
   7,42:1 fuer den Fliesstext und 4,56:1 fuer das Gold.
   Genau danach ist die Deckkraft bemessen: das strengste Mass ist das Gold,
   das ohne Ueberdruck 6,56:1 hat und nur bis rund rgb(214,214,214) reicht.

   Nicht auf den Ueberdruck gehoert dagegen --muted (#6b6d66): diese Farbe
   hat schon auf reinem Weiss nur 5,24:1 und faellt unter jedem sichtbaren
   Wasserzeichen unter 4,5:1 - auch unter dem bisherigen. Auf der Startseite
   steht deshalb kein .muted-Fliesstext direkt auf dem Seitengrund, sondern
   nur in Karten, und die haben ihren eigenen weissen Hintergrund.

   z-index: -1 legt die Ebene hinter allen Inhalt; das funktioniert, weil der
   weisse Hintergrund des Body auf die Zeichenflaeche uebergeht und das
   Element dadurch sichtbar bleibt. Weil .watermark damit ein eigener
   Bezugsrahmen ist, bekommen die drei Ebenen darin eigene z-index-Werte.
   ----------------------------------------------------------------------- */
.watermark {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none; overflow: hidden;
}
.watermark::before, .watermark::after { content: ""; position: absolute; inset: 0; }

/* 1. Fotoebene. Sie ist bewusst ueber den Rand hinausgezogen, damit die
      Unschaerfe an den Kanten nicht als heller Saum stehen bleibt, und wird
      per Maske nach unten ausgeblendet - ohne die Maske gaebe es eine
      sichtbare Kante quer durch die Seite. */
.watermark-foto {
  position: absolute; z-index: 1;
  left: -10%; right: -10%; top: -12%; height: 66%;
  background: url("../img/hero.jpg") no-repeat center top;
  background-size: cover;
  /* saturate() ist leuchtdichteerhaltend und kostet deshalb keinen Kontrast -
     es holt nur das Gruen zurueck, das die geringe Deckkraft wegnimmt. */
  filter: blur(24px) saturate(125%);
  opacity: .16;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 52%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 52%, transparent 100%);
}

/* 2. Logo - das eigentliche Zeichen. Weniger Unschaerfe als bisher (16 statt
      24 Pixel): die Form wird dadurch deutlich besser erkennbar, ohne dass
      der Grund einen Deut dunkler wird. */
.watermark::before {
  z-index: 2;
  background: url("../img/logo-mark.png") no-repeat center 20vh;
  background-size: min(120vw, 1400px) auto;
  filter: blur(16px);
  opacity: .30;
}

/* 3. Weisse Schicht - oben offener, unten dichter. */
.watermark::after {
  z-index: 3;
  background: linear-gradient(180deg,
              rgba(255,255,255,.62) 0%,
              rgba(255,255,255,.70) 45%,
              rgba(255,255,255,.78) 100%);
}

/* Auf schmalen Geraeten ist weniger Platz, dort bleibt nur eine Andeutung.
   Dunkelster Punkt hier: rgb(234,234,233) - Fliesstext 8,85:1, Gold 5,44:1. */
@media (max-width: 700px) {
  .watermark-foto { height: 46%; filter: blur(20px) saturate(125%); opacity: .10; }
  .watermark::before { background-size: min(150vw, 820px) auto; filter: blur(13px); opacity: .22; }
  .watermark::after {
    background: linear-gradient(180deg,
                rgba(255,255,255,.70) 0%,
                rgba(255,255,255,.80) 100%);
  }
}

/* Wer den Kontrast hochdreht, will keinen Ueberdruck - dann bleibt die
   Seite schlicht weiss. Im Druck faellt .watermark ohnehin ganz weg. */
@media (prefers-contrast: more) {
  .watermark { display: none; }
}

/* ---------- Animationen ------------------------------------------------- *
   Grundsatz: ohne JavaScript ist alles sofort sichtbar. Erst wenn das
   Dokument die Klasse .js-anim traegt (gesetzt im Kopf der Seite, aber nur
   wenn IntersectionObserver vorhanden ist und keine Bewegungsreduktion
   gewuenscht wird), wird ueberhaupt etwas ausgeblendet.
   Die vollstaendige Bewegungsschicht - .reveal mit allen Varianten, die
   Staffelung, Zeigen, Klicken, Lesefortschritt und die Handleiste - steht
   gebuendelt im Abschnitt "Bewegung" weiter unten in dieser Datei.
   ----------------------------------------------------------------------- */

/* ---------- Bausteine fuer die Fachbereiche ---------------------------- */

/* Zeitverlauf, z.B. fuer E-Mail-Threads: senkrechte Linie mit Punkten. */
.timeline { list-style: none; margin: 0; padding: .25rem 0 0 1.9rem; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: .43rem; top: .8rem; bottom: .8rem;
  width: 2px; background: var(--line); border-radius: 2px;
}
.timeline > li, .timeline > .timeline-item { position: relative; margin: 0 0 1.4rem; }
.timeline > li:last-child, .timeline > .timeline-item:last-child { margin-bottom: 0; }
.timeline > li::before, .timeline > .timeline-item::before {
  content: ""; position: absolute; left: -1.65rem; top: .45rem;
  width: 13px; height: 13px; border-radius: 50%;
  background: #fff; border: 3px solid var(--gold); box-sizing: border-box;
}
.timeline > .is-muted::before { border-color: var(--line-strong); }
.timeline > .is-ok::before    { border-color: var(--ok); }
.timeline > .is-warn::before  { border-color: var(--warn); }
.timeline-time { display: block; font-size: .82rem; color: var(--muted); margin-bottom: .15rem; }
.timeline-title { font-weight: 600; }
.timeline-body { color: var(--ink-2); }

/* Kleines Etikett, wahlweise mit Entfernen-Knopf. */
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .32rem .8rem; margin: 0 .35rem .35rem 0;
  border-radius: 999px; border: 1px solid transparent;
  background: var(--gold-100); color: var(--gold-700);
  font-size: .86rem; font-weight: 600; line-height: 1.5;
  text-decoration: none; max-width: 100%;
}
.chip--muted { background: var(--bg-soft); color: var(--ink-2); border-color: var(--line); }
.chip-remove {
  width: 24px; height: 24px; margin-right: -.4rem; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent;
  color: inherit; font: inherit; font-size: 1rem; line-height: 1; cursor: pointer;
}
.chip-remove:hover { background: rgba(28, 29, 26, .12); }

/* Schalter fuer ja/nein - ein normales Kontrollkaestchen mit anderer Optik. */
.switch {
  position: relative; display: inline-flex; align-items: center; gap: .7rem;
  min-height: 44px; cursor: pointer; font-weight: 500;
}
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.switch-track {
  width: 52px; height: 30px; flex: none; border-radius: 999px;
  background: var(--line-strong); position: relative; transition: background .18s ease;
}
.switch-track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-sm); transition: transform .18s ease;
}
.switch input:checked + .switch-track { background: var(--gold); }
.switch input:checked + .switch-track::after { transform: translateX(22px); }
.switch input:disabled + .switch-track { opacity: .45; }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--gold); outline-offset: 3px; }
.switch-label small { display: block; color: var(--muted); font-weight: 400; font-size: .86rem; }

/* Leerzustand: Symbol, Erklaerung und ein Weg nach vorn. */
.empty-state {
  text-align: center; padding: clamp(2rem, 5vw, 3.5rem) 1.5rem;
  border: 2px dashed var(--line); border-radius: var(--radius);
  background: var(--bg-soft); color: var(--ink-2);
}
.empty-icon { display: block; font-size: 2.6rem; line-height: 1; margin-bottom: .75rem; opacity: .7; }
.empty-state h3 { margin-bottom: .35rem; }
.empty-state p { color: var(--muted); max-width: 34rem; margin-inline: auto; }
.empty-state .btn { margin-top: 1.35rem; }

/* Schmaler Fortschrittsbalken. Breite kommt per style="width: 42%". */
.progress {
  height: 10px; border-radius: 999px; background: var(--line);
  overflow: hidden; width: 100%;
}
.progress-bar {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--gold); transition: width .3s ease;
}
.progress-bar.is-ok   { background: var(--ok); }
.progress-bar.is-warn { background: var(--warn); }
.progress-bar.is-err  { background: var(--err); }

/* Grosse Kennzahl mit Beschriftung. */
.kpi {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--gold);
  border-radius: var(--radius); padding: 1.35rem 1.5rem;
}
.kpi b {
  display: block; font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.5rem); line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.kpi span { display: block; color: var(--muted); font-size: .88rem; margin-top: .2rem; }
.kpi small { display: block; margin-top: .5rem; font-size: .82rem; color: var(--ink-2); }
.kpi--warn { border-left-color: var(--warn); }
.kpi--warn b { color: var(--warn); }
.kpi--ok { border-left-color: var(--ok); }
.kpi--ok b { color: var(--ok); }

/* Reiter. Funktioniert als <a> und als <button>. */
.tabs {
  display: flex; flex-wrap: wrap; gap: .25rem;
  border-bottom: 2px solid var(--line); margin-bottom: 1.5rem;
}
.tab {
  appearance: none; border: 0; background: none; font: inherit; font-weight: 600;
  color: var(--muted); text-decoration: none; cursor: pointer;
  min-height: 48px; padding: .75rem 1.1rem;
  border-radius: 10px 10px 0 0; border-bottom: 3px solid transparent;
  margin-bottom: -2px; white-space: nowrap;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.tab:hover { background: var(--bg-soft); color: var(--ink); }
.tab.is-active { color: var(--gold-700); border-bottom-color: var(--gold); }
.tab .badge { margin-left: .4rem; }

/* Feld zum Einfuegen oder Hochladen. */
.drop-zone {
  border: 2px dashed var(--line-strong); border-radius: var(--radius);
  background: var(--bg-soft); color: var(--ink-2);
  padding: clamp(1.5rem, 4vw, 2.5rem); text-align: center; cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.drop-zone:hover { border-color: var(--gold); background: var(--gold-50); }
.drop-zone.is-dragover {
  border-color: var(--gold); background: var(--gold-50);
  box-shadow: 0 0 0 4px var(--gold-100);
}
.drop-zone-icon { display: block; font-size: 2.1rem; line-height: 1; margin-bottom: .5rem; opacity: .75; }
.drop-zone p { margin: 0; color: var(--muted); }
.drop-zone strong { color: var(--ink); }

/* Monospace-Block mit Platz fuer einen Kopieren-Knopf oben rechts. */
.code-box {
  position: relative; background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.code-box pre, .code-box code {
  display: block; margin: 0; padding: 1rem 5rem 1rem 1rem;
  max-height: 22rem; overflow: auto;
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: .86rem; line-height: 1.6; white-space: pre; tab-size: 2;
  color: var(--ink);
}
.code-box > .btn { position: absolute; top: .55rem; right: .55rem; z-index: 1; }

/* Druckbares Dokument: am Bildschirm ein Blatt mit Schatten, im Druck nackt. */
.doc-sheet {
  width: min(100%, 210mm); margin-inline: auto;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: clamp(1.5rem, 5vw, 20mm);
}
.doc-sheet h1 { font-size: 1.85rem; }
.doc-sheet h2 { font-size: 1.3rem; margin-top: 2rem; }
.doc-sheet .doc-head {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start;
  justify-content: space-between; border-bottom: 2px solid var(--line); padding-bottom: 1.25rem;
}
.doc-sheet .doc-foot {
  margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: .85rem; color: var(--muted);
}

/* Runde Initialen. Groesse ueber --avatar-size steuern. */
.avatar {
  --avatar-size: 42px;
  width: var(--avatar-size); height: var(--avatar-size); flex: none;
  display: inline-grid; place-items: center; overflow: hidden;
  border-radius: 50%; background: var(--gold-100); color: var(--gold-700);
  font-weight: 700; font-size: calc(var(--avatar-size) * .4); line-height: 1;
  text-transform: uppercase; letter-spacing: .02em; text-decoration: none;
}
.avatar--gold { background: var(--gold); color: #fff; }
.avatar--dark { background: var(--ink); color: #fff; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Nur im Druck sichtbarer Kopf (Praxisname und Datum). */
.print-head, .print-only { display: none; }

/* ---------- Admin ------------------------------------------------------- */
body.admin { background: var(--bg-soft); font-size: 16px; }
.admin-shell { display: grid; grid-template-columns: 262px minmax(0, 1fr); min-height: 100vh; }
.admin-side {
  background: var(--ink); color: #c9cac3; padding: 1.5rem 1rem;
  display: flex; flex-direction: column; gap: .3rem; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.admin-side .brand-admin { display: flex; align-items: center; gap: .7rem; color: #fff;
  text-decoration: none; padding: .3rem .6rem 1.5rem; }
.admin-side .brand-admin b { font-family: var(--font-display); font-size: 1.1rem; }
.admin-side a.nav-item {
  display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem; border-radius: 10px;
  color: #c9cac3; text-decoration: none; font-weight: 500; font-size: .96rem;
}
.admin-side a.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.admin-side a.nav-item.is-active { background: var(--gold); color: #fff; }
.admin-side .nav-sep { margin: 1rem .85rem .5rem; font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: #7c7d76; font-weight: 700; }
.admin-side .side-foot { margin-top: auto; padding-top: 1.5rem; font-size: .85rem; color: #8b8c85;
  border-top: 1px solid rgba(255,255,255,.12); }
.admin-main { padding: 1.75rem clamp(1rem, 3vw, 2.5rem) 4rem; min-width: 0; }
.admin-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 1.75rem; }
.admin-head h1 { font-size: 1.75rem; margin: 0; }

.stat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 2rem; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.35rem; }
.stat b { display: block; font-family: var(--font-display); font-size: 2rem; line-height: 1.1; }
.stat span { color: var(--muted); font-size: .88rem; }
.stat.is-alert b { color: var(--gold-700); }

.filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; margin-bottom: 1.25rem; }
.filters .field { margin: 0; }
.filters input, .filters select { min-height: 44px; }

.cal { display: grid; grid-template-columns: 68px repeat(var(--cols, 6), minmax(0, 1fr)); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; background: #fff; }
.cal-head { background: var(--bg-soft); padding: .7rem .5rem; text-align: center; font-weight: 700;
  font-size: .85rem; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.cal-head small { display: block; font-weight: 500; color: var(--muted); }
.cal-time { padding: .35rem .5rem; text-align: right; font-size: .78rem; color: var(--muted);
  border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.cal-cell { border-top: 1px solid var(--line); border-left: 1px solid var(--line); min-height: 34px; position: relative; padding: 2px; }
.cal-appt {
  display: block; font-size: .78rem; line-height: 1.3; padding: .25rem .4rem; border-radius: 6px;
  background: var(--gold-100); border-left: 3px solid var(--gold); color: var(--ink);
  text-decoration: none; overflow: hidden;
}
.cal-appt:hover { background: var(--gold); color: #fff; }
.cal-appt.st-angefragt { background: var(--warn-bg); border-color: var(--warn); }
.cal-appt.st-abgesagt { background: var(--err-bg); border-color: var(--err); text-decoration: line-through; opacity: .7; }
.cal-appt.st-erledigt { background: var(--ok-bg); border-color: var(--ok); }

.burger-admin { display: none; }
@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-side { position: fixed; inset: 0 auto 0 0; width: 270px; transform: translateX(-100%);
    transition: transform .2s ease; z-index: 80; }
  .admin-side.is-open { transform: none; }
  .burger-admin { display: inline-flex; }
}

/* ==========================================================================
   Bewegung
   Die gemeinsame Bewegungsschicht aller oeffentlichen Seiten. Vier Regeln,
   an die sich jede Klasse hier haelt:
     * Nichts bewegt sich von selbst. Bewegung antwortet auf Scrollen,
       Zeigen oder Klicken - einzige Ausnahme bleibt der Ladekreisel.
     * Kurze Wege (hoechstens 24px) und kurze Zeiten (150-600ms), weiche
       Kurven. Kein Springen, kein Drehen, kein Blinken.
     * Animiert werden nur transform und opacity. Beides laeuft auf der
       Grafikkarte; Breite, Hoehe oder Abstaende wuerden jedes Bild neu
       umbrechen lassen und auf aelteren Geraeten ruckeln.
     * Ohne .js-anim am html-Element passiert nichts. Jeder Inhalt ist dann
       von Anfang an sichtbar - auch ganz ohne JavaScript. @media print und
       prefers-reduced-motion am Dateiende schalten zusaetzlich alles ab.
   ========================================================================== */

/* ---------- Einblenden beim Scrollen ------------------------------------ *
   Alle Varianten teilen sich denselben Uebergang, nur der Startzustand
   unterscheidet sich. Die Verzoegerung steckt in --reveal-delay: gesetzt
   entweder von [data-reveal-group] (site.js rechnet sie je Kind aus) oder
   fest von .reveal-1 bis .reveal-5.
   ----------------------------------------------------------------------- */
.js-anim .reveal,
.js-anim .reveal--left,
.js-anim .reveal--right,
.js-anim .reveal--scale,
.js-anim .reveal--fade {
  opacity: 0;
  transition: opacity .45s ease-out,
              transform .45s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

/* Startzustaende. Bewusst kurze Wege - alles Weitere wirkt geworfen. */
.js-anim .reveal        { transform: translateY(18px); }
.js-anim .reveal--left  { transform: translateX(-22px); }
.js-anim .reveal--right { transform: translateX(22px); }
.js-anim .reveal--scale { transform: scale(.97); }
.js-anim .reveal--fade  { transform: none; }   /* nur Deckkraft, kein Versatz */

.js-anim .reveal.is-in,
.js-anim .reveal--left.is-in,
.js-anim .reveal--right.is-in,
.js-anim .reveal--scale.is-in,
.js-anim .reveal--fade.is-in {
  opacity: 1;
  transform: none;
  will-change: auto;      /* Grafikspeicher nach dem Einblenden freigeben */
}

/* Feste Stufen fuer Elemente, die keine Geschwister einer Kachelreihe sind. */
.js-anim .reveal-1 { --reveal-delay:  60ms; }
.js-anim .reveal-2 { --reveal-delay: 120ms; }
.js-anim .reveal-3 { --reveal-delay: 180ms; }
.js-anim .reveal-4 { --reveal-delay: 240ms; }
.js-anim .reveal-5 { --reveal-delay: 300ms; }

/* ---------- Bilder ------------------------------------------------------ *
   Nachgeladene Fotos ploppen sonst hart auf. Ohne .js-anim - und damit auch
   ohne JavaScript - steht das Bild sofort da.
   ----------------------------------------------------------------------- */
.js-anim .img-reveal { opacity: 0; transition: opacity .4s ease-out; }
.js-anim .img-reveal.is-in { opacity: 1; }

/* ---------- Erster Bildschirm ------------------------------------------- *
   Einmal beim Laden, 300ms, und nur beim echten Aufruf einer Seite: beim
   Zurueckspringen setzt site.js die Klasse gar nicht erst und entfernt sie
   nach dem Durchlauf wieder. Sonst bliebe <main> ein Bezugsrahmen fuer
   position:fixed - genau der Effekt, der schon das Mobilmenue aus der
   Kopfzeile vertrieben hat.
   ----------------------------------------------------------------------- */
@keyframes seite-ein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.js-anim main.page-in { animation: seite-ein .3s cubic-bezier(.22, .61, .36, 1) both; }

/* ---------- Zeigen und Klicken ------------------------------------------ *
   Was nur mit Maus Sinn ergibt, steht in @media (hover: hover) and
   (pointer: fine). Auf Beruehrungsgeraeten bliebe ein Hover-Zustand nach
   dem Antippen sonst kleben. Die Uebergaenge selbst stehen ausserhalb -
   ohne Ausloeser bewegen sie nichts, geben aber der Tastaturbedienung
   dieselbe ruhige Rueckmeldung.
   ----------------------------------------------------------------------- */
.js-anim .hover-lift {
  transition: transform .18s cubic-bezier(.22, .61, .36, 1), box-shadow .18s ease;
}
.js-anim .icon-pop .card-icon {
  transition: transform .18s cubic-bezier(.22, .61, .36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .js-anim .hover-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
  /* Das Symbol waechst nur - es dreht sich nicht. */
  .js-anim .icon-pop:hover .card-icon { transform: scale(1.06); }
}

.js-anim .hover-lift:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow); }
.js-anim .icon-pop:focus-visible .card-icon { transform: scale(1.06); }

/* Unterstrich, der von links waechst. Er steckt in einem ::after, damit nur
   transform animiert wird - eine wachsende Breite wuerde die Zeile jedes
   Bild neu umbrechen. */
.underline-grow { position: relative; text-decoration: none; }
.underline-grow::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: currentColor; border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
}
.js-anim .underline-grow::after { transition: transform .2s cubic-bezier(.22, .61, .36, 1); }

@media (hover: hover) and (pointer: fine) {
  .underline-grow:hover::after { transform: scaleX(1); }
}
.underline-grow:focus-visible::after { transform: scaleX(1); }

/* Ohne Maus gibt es kein Zeigen - dort steht der Unterstrich dauerhaft,
   sonst waere der Link auf dem Handy nicht als Link zu erkennen. */
@media (hover: none), (pointer: coarse) {
  .underline-grow::after { transform: none; }
}

/* Knoepfe federn beim Klicken minimal ein. Die drei Klassen der Regel
   gewinnen gegen .btn:active weiter oben - beides zusammen waere unruhig. */
.js-anim .press { transition: transform .09s ease-out; }
.js-anim .press:active { transform: scale(.985); }

/* ---------- Hochzaehlende Zahl ------------------------------------------ *
   site.js zaehlt beim Sichtwerden von 0 auf data-count. Tabellarische
   Ziffern halten dabei die Breite ruhig, sonst zappelt die ganze Zeile.
   ----------------------------------------------------------------------- */
.count-up { font-variant-numeric: tabular-nums; }

/* ---------- Lesefortschritt --------------------------------------------- *
   Haarduenner Balken ganz oben. Die Breite kommt ueber transform: scaleX -
   eine animierte Breite wuerde bei jedem Bildlauf einen neuen Umbruch
   ausloesen. Den Balken legt site.js an; er ist rein schmueckend.
   ----------------------------------------------------------------------- */
.scroll-progress {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 90;                       /* ueber der Kopfzeile (z-index 60) */
  background: var(--gold);
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left center;
  pointer-events: none;
}
.js-anim .scroll-progress { display: block; }

/* ---------- Kopfzeile nach dem Scrollen --------------------------------- *
   Kompakter, aber ohne Sprung. Es aendert sich nur der Innenabstand - die
   Zeile bricht dadurch nicht um - und die Groesse des Logos ueber transform.
   Der Abstand wechselt bewusst in einem Schritt und wird NICHT animiert:
   eine animierte Hoehe muesste der Browser Bild fuer Bild neu umbrechen.
   Die Schwelle liegt in site.js und hat eine Hysterese, damit die Kopfzeile
   an der Grenze nicht flackert.
   ----------------------------------------------------------------------- */
.site-header { transition: box-shadow .2s ease; }
.site-header .brand img {
  transition: transform .2s cubic-bezier(.22, .61, .36, 1);
  transform-origin: left center;
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.site-header.is-scrolled .wrap { padding-top: .55rem; padding-bottom: .55rem; }
.site-header.is-scrolled .brand img { transform: scale(.94); }

/* ---------- Feste Aktionsleiste auf dem Handy --------------------------- *
   Die beiden wichtigsten Wege bleiben immer erreichbar: Termin buchen und
   anrufen. Ab 900px verschwindet die Leiste - dort steht die Terminschalt-
   flaeche in der Kopfzeile. Sie ist Bedienhilfe, kein Bewegungseffekt, und
   deshalb auch ohne .js-anim da.
   ----------------------------------------------------------------------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: flex; gap: .6rem;
  padding: .6rem .9rem;
  padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));  /* Aussparung */
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(160%) blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -2px 10px rgba(28, 29, 26, .07);
}
.sticky-cta .btn { flex: 1 1 0; min-width: 0; padding: .8rem .9rem; font-size: .98rem; }

/* Die Leiste liegt ueber der Seite und wuerde sonst das Ende der Fusszeile
   verdecken - der Body bekommt unten genau so viel Platz, wie sie hoch ist. */
body:has(.sticky-cta) { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 900px) {
  .sticky-cta { display: none; }
  body:has(.sticky-cta) { padding-bottom: 0; }
}

/* ---------- Druck ------------------------------------------------------- *
   Alles Bedienbare faellt weg, es bleibt schwarze Schrift auf weissem Grund.
   Vorlagen koennen oben ein <div class="print-head"> setzen - es erscheint
   nur im Druck und traegt Praxisname und Datum.
   ----------------------------------------------------------------------- */
@page { margin: 16mm 14mm; }

@media print {
  /* Bedienelemente, Navigation und Zierrat weg */
  .site-header, .site-footer, .topbar, .nav, .mobilnav, .burger, .burger-admin,
  .admin-side, .btn, .filters, .skip-link, .watermark, .social, .footer-bottom,
  .drop-zone, .tabs, .nav-drop, .spinner, .print-hide {
    display: none !important;
  }
  .print-head, .print-only { display: block !important; }

  /* Einblend-Animation zuruecknehmen: Abschnitte, die beim Drucken nie im
     Sichtfenster standen, sind sonst noch auf opacity: 0 und fehlen auf
     dem Papier komplett. */
  .js-anim .reveal { opacity: 1 !important; transform: none !important; }

  html, body {
    background: #fff !important; color: #000;
    font-size: 11pt; line-height: 1.45;
  }
  body.admin { background: #fff !important; }
  .admin-shell { display: block; }
  .admin-main { padding: 0; }
  .wrap, .wrap-narrow { width: auto; margin: 0; }
  .section { padding: 0 0 1rem; background: #fff !important; }
  .hero { background: #fff !important; padding: 0 0 1rem; }
  .hero::before, .hero::after { display: none; }

  /* Kopfzeile des Ausdrucks */
  .print-head {
    border-bottom: 2px solid #000; padding-bottom: .4rem; margin-bottom: 1rem;
    font-size: 10pt; display: flex !important; flex-wrap: wrap;
    gap: .3rem 1.5rem; align-items: baseline;
  }
  .print-head strong { font-size: 12pt; }
  .print-head .print-date { margin-left: auto; }

  /* Ueberschriften und Bloecke moeglichst nicht zerreissen */
  h1, h2, h3, h4 { color: #000; break-after: avoid; page-break-after: avoid; }
  h1 { font-size: 16pt; } h2 { font-size: 13pt; } h3 { font-size: 11.5pt; }
  p, li, tr, .card, .kpi, .stat, .summary-box, .doc-sheet, .timeline > li,
  .timeline > .timeline-item, details.acc, .contact-col, .quick-card {
    break-inside: avoid; page-break-inside: avoid;
  }

  /* Karten und Tabellen mit klarem Rahmen */
  .card, .kpi, .stat, .summary-box, .contact-col, .quick-card, .table-wrap, .code-box {
    box-shadow: none !important; border: 1px solid #000; background: #fff !important;
    border-radius: 0; padding: .5rem .6rem;
  }
  .table-wrap { overflow: visible !important; }
  table.data, table.hours { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  table.data th, table.data td { border: 1px solid #000; padding: .25rem .4rem; }
  table.data thead th { background: #eee !important; color: #000; -webkit-print-color-adjust: exact; }
  table.data thead { display: table-header-group; }     /* Kopfzeile auf jeder Seite */
  table.data tbody tr:hover { background: none; }
  .badge { border: 1px solid #000; background: none !important; color: #000; }

  /* Wochenkalender */
  .cal { border: 1px solid #000; border-radius: 0; break-inside: auto; }
  .cal-head { background: #eee !important; color: #000; border-color: #000;
    -webkit-print-color-adjust: exact; }
  .cal-time, .cal-cell { border-color: #000; }
  .cal-appt { background: none !important; color: #000; border: 0;
    border-left: 3px solid #000; break-inside: avoid; page-break-inside: avoid; }

  /* Dokumentenblatt fuellt die Seite ohne Schmuck */
  .doc-sheet { width: auto; margin: 0; padding: 0; border: 0; border-radius: 0;
    box-shadow: none !important; }

  /* Sichtbare Ziele nur bei echten Links im Fliesstext */
  .prose a[href^="http"]::after, main a[href^="http"]::after {
    content: " (" attr(href) ")"; font-size: .85em; color: #333; word-break: break-all;
  }
}

/* ---------- Bewegungsreduktion ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  /* Einblenden komplett aus - die Inhalte stehen sofort da. */
  .js-anim .reveal { opacity: 1 !important; transform: none !important; }
  .btn:hover, .card--link:hover, a.card:hover, .quick-card:hover, .choice:hover {
    transform: none !important;
  }
}