:root{
  /* ══════════════════════════════════════════════════════════════════════
     DIESER BLOCK IST DIE EINZIGE STELLE, DIE PRO KUNDE ANGEPASST WIRD.
     Alles darunter ist Struktur und bleibt unverändert.
     ══════════════════════════════════════════════════════════════════════ */

  /* ── Marke (Akzentfarbe) ───────────────────────────────────────────────
     Eine Akzentfarbe, Sättigung unter 80 %. Drei Helligkeiten:
       --brand       Fläche: Knöpfe, Linien, Punkte, Rahmen
       --brand-deep  derselbe Ton als SCHRIFT auf hellem Grund (Kontrast!)
       --brand-light sehr helle Fläche: Bänder, Chips, Hinweiskästen       */
  --brand:         #97C11F;
  --brand-deep:    #41580E;
  --brand-light:   #EFF5DF;
  --brand-rgb:       151, 193, 31;
  --brand-deep-rgb:  65, 88, 14;
  --on-brand:      #1D1D1B;    /* Schrift AUF der Akzentfläche (hell)    */
  --accent:        var(--brand-deep);  /* Schrift-Akzent auf hellem Grund */
  --brand-dark:    #41580E;    /* Akzentfläche im Dunkelmodus            */
  --brand-soft:    #A9CE45;    /* Akzent als Schrift im Dunkelmodus      */

  /* ── Zweitfarbe: die ruhigen Bänder ────────────────────────────────────
     Kontaktleiste, CTA-Band und Fußzeile tragen denselben Ton.            */
  --brand-2:        #6B6B66;
  --brand-2-deep:   #4C4C48;
  --brand-2-light:  #EDEDEA;
  --brand-2-dark:   #33332F;   /* dieselben Bänder im Dunkelmodus        */
  --brand-2-rgb:     107, 107, 102;

  /* ── Neutral ───────────────────────────────────────────────────────────  */
  --text:          #1D1D1B;
  --muted:         #6B6B66;
  --bg:            #FAFAF8;    /* Seitenhintergrund                      */
  --bg-rgb:         250, 250, 248;
  --surface:       #FFFFFF;    /* Karten, Panels, Kopfzeile              */
  --warm:          #F4F4F1;    /* zweite helle Fläche (Bänder)           */
  --flaeche-hell:  #F1F1EE;    /* neutrale Zwischenfläche                */
  --border:        #E4E4DF;    /* feine Trennlinien                      */
  --border-stark:  #6B6B66;    /* kräftige Rahmen                        */
  --white:         #FFFFFF;
  --shadow:        0 1px 2px rgba(29,29,27,.04), 0 8px 24px rgba(29,29,27,.05);

  /* ── Platzhalterflächen (Motiv fehlt noch) ─────────────────────────────  */
  --ph-flaeche:    #E4E4DF;
  --ph-ico:        #9A9A94;

  /* ── Zitatkasten ───────────────────────────────────────────────────────  */
  --zitat-flaeche: rgba(250, 244, 239, .88);
  --zitat-text:    #1E1810;
  --zitat-text-rgb:  30, 24, 16;
  --zitat-dunkel:  #4A3505;    /* Fläche im Dunkelmodus                  */

  /* ── Schrift ───────────────────────────────────────────────────────────
     Drei Rollen. Die Namen stehen hier, geladen werden die Dateien in
     assets/fonts.css (lokal gehostet — DSGVO).                            */
  --f-display: 'Outfit', system-ui, sans-serif;
  --f-head:    'Outfit', system-ui, sans-serif;
  --f-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* ── Maße ──────────────────────────────────────────────────────────────  */
  --wrap: 1320px;
  --breit: 1560px;  /* die breiteste Zeile im Leistungs-Mosaik             */
  --pad:  clamp(1.25rem, 5vw, 3rem);
  --r-s:  4px;
  --r-m:  10px;
  --r-l:  16px;
  --gap:  1rem;      /* Abstand im .raster — lokal überschreibbar        */
  --sp:   8px;       /* Abstand im Leistungs-Mosaik                      */

  /* Höhe der klebenden Navigation — steuert auch den Sprungmarken-Offset */
  --nav-h: 82px;
  --logo-h: 56px;   /* Höhe der Wortmarke in der Kopfzeile                */

  /* Hintergrundbild des CTA-Bands: eine Aufnahme der Praxis, quer        */
  --cta-bild: none;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  font-size:17px;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

h1,h2,h3,h4{ margin:0; font-weight:400; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* Fokus – überall sichtbar */
a:focus-visible, button:focus-visible{
  outline:3px solid var(--brand-deep);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--brand-deep); color:var(--white);
  padding:.85rem 1.4rem; font-family:var(--f-head); font-weight:700;
}
.skip:focus{ left:0; }

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--f-head); font-weight:700; font-size:1rem;
  letter-spacing:.015em; text-decoration:none;
  padding:.85rem 1.6rem; border-radius:var(--r-m);
  border:2px solid transparent; cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn svg{ width:19px; height:19px; flex:none; }

.btn--solid{ background:var(--brand-2); color:var(--white); }
.btn--solid:hover{ background:var(--brand-2-deep); }

.btn--line{ background:transparent; color:var(--text); border-color:var(--muted); }
.btn--line:hover{ border-color:var(--accent); color:var(--accent); }

.btn--sm{ padding:.6rem 1.15rem; font-size:.94rem; }

/* ============================================================
   HEADER
   ============================================================ */
.topbar{
  background:var(--brand-light);
  color:var(--accent);
  font-size:.9rem;
  border-bottom:1px solid rgba(var(--brand-deep-rgb),.12);
}
.topbar__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; min-height:44px; flex-wrap:wrap;
}
.topbar__facts{
  display:flex; align-items:center; gap:1.6rem;
  list-style:none; margin:0; padding:0; flex-wrap:wrap;
}
.topbar__facts a{
  display:inline-flex; align-items:center; gap:.45rem;
  text-decoration:none; color:inherit; padding-block:.35rem;
}
.topbar__facts a:hover{ text-decoration:underline; text-underline-offset:3px; }
.topbar__facts svg{ width:15px; height:15px; flex:none; opacity:.8; }

.topbar__social{ display:flex; gap:.35rem; }
.topbar__social a{
  display:grid; place-items:center; width:30px; height:30px;
  border-radius:50%; color:var(--accent);
  transition:background-color .2s ease;
}
.topbar__social a:hover{ background:rgba(var(--brand-deep-rgb),.12); }
.topbar__social svg{ width:16px; height:16px; }

@media (max-width:900px){
  .topbar__facts li:nth-child(2){ display:none; }
  .topbar__social{ display:none; }
}
@media (max-width:520px){
  .topbar__in{ justify-content:center; }
  .topbar{ font-size:.85rem; }
}

/* ── Kopfbereich ──────────────────────────────────────────────
   FALLE: Ein sticky-Element klebt nur INNERHALB seines Elternelements.
   Solange <header> der Elternteil der Navigation war, konnte sie nur die
   Höhe des Headers überdauern (129 px am Rechner, 151 px am Telefon) und
   verschwand danach — gemessen bei 900 px Scroll: Navigation bei −814 px,
   also gar nicht klebend. `display:contents` nimmt den <header> aus dem
   Layout; die Navigation hängt damit direkt am <body> und bleibt über die
   ganze Seite oben stehen. Die Kontaktleiste scrollt normal weg. */
header{ display:contents; }

/* --- Navigation --- */
.nav{
  position:sticky; top:0; z-index:100;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  transition:box-shadow .25s ease;
}
.nav.is-stuck{ box-shadow:0 6px 24px -12px rgba(29,29,27,.28); }

.nav__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; min-height:var(--nav-h);
}
.nav__logo{ display:block; flex:none; }
.nav__logo img{ height:var(--logo-h, 36px); width:auto; }

.nav__menu{
  display:flex; align-items:center; gap:.35rem;
  list-style:none; margin:0; padding:0;
}
.nav__menu a{
  display:block; text-decoration:none;
  font-family:var(--f-head); font-weight:700; font-size:1.02rem;
  letter-spacing:.01em; color:var(--text);
  padding:.5rem .7rem; border-radius:var(--r-s);
  position:relative;
}
.nav__menu a::after{
  content:""; position:absolute; left:.7rem; right:.7rem; bottom:.15rem;
  height:3px; background:var(--brand); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .2s ease;
}
.nav__menu a:hover::after,
.nav__menu a[aria-current="page"]::after{ transform:scaleX(1); }

.nav__cta{ display:flex; align-items:center; gap:.6rem; flex:none; }

.burger{
  display:none; width:46px; height:46px; padding:0;
  background:transparent; border:2px solid var(--border);
  border-radius:var(--r-m); cursor:pointer;
  place-items:center;
}
/* Nur der eine Strich-Span wird gezeichnet — vorher traf ".burger span" auch den
   .sr-Span (Vorlesehilfe) und jedes der drei Markup-Spans bekam zusätzlich
   ::before/::after: rechnerisch 12 Striche, sichtbar als gefülltes Quadrat. */
.burger__strich{
  display:block; width:20px; height:2px; background:var(--text);
  border-radius:2px; position:relative;
}
.burger__strich::before,.burger__strich::after{
  content:""; position:absolute; left:0; width:20px; height:2px;
  background:var(--text); border-radius:2px; transition:transform .22s ease, top .22s ease;
}
.burger__strich::before{ top:-6px; }
.burger__strich::after{ top:6px; }
.burger[aria-expanded="true"] .burger__strich{ background:transparent; }
.burger[aria-expanded="true"] .burger__strich::before{ top:0; transform:rotate(45deg); }
.burger[aria-expanded="true"] .burger__strich::after{ top:0; transform:rotate(-45deg); }

@media (max-width:1080px){
  .nav__menu, .nav__cta .btn--line{ display:none; }
  .burger{ display:grid; }
}
@media (max-width:620px){
  /* FALLE (alt): Die Regel zielte auf .btn--solid, der Kopfzeilen-Knopf heißt aber
     .btn--mint (heute .btn--marke) — sie hat nie gegriffen, die Kopfzeile blieb
     512px breit und schob die Seite auf dem Telefon bis zu 152px nach rechts. */
  .nav__in{ gap:.45rem; padding-left:.8rem; padding-right:.8rem; min-height:64px; }
  .nav__logo img{ height:calc(var(--logo-h, 36px) * .67); }
  .nav__cta{ gap:.4rem; }
  .nav__cta .btn--sm{ padding:.55rem .8rem; font-size:.78rem; letter-spacing:.04em; }
  .nav__cta .btn--sm svg{ display:none; }
  .nav__cta .btn--sm .w-lang{ display:none; }
  .nav__cta .btn--sm .w-kurz{ display:inline; }
  .theme-toggle, .burger{ width:34px; height:34px; flex:none; }
  .theme-toggle svg{ width:17px; height:17px; }
  :root{ --nav-h:64px; }
}
.w-kurz{ display:none; }

/* --- Mobile-Menü --- */
.drawer{
  position:fixed; inset:0; z-index:99;
  background:var(--surface);
  padding:calc(var(--nav-h) + 1.5rem) var(--pad) 2.5rem;
  overflow-y:auto;
  transform:translateY(-100%);
  visibility:hidden;
  transition:transform .3s cubic-bezier(.4,0,.2,1), visibility .3s;
}
.drawer.is-open{ transform:translateY(0); visibility:visible; }
.drawer ul{ list-style:none; margin:0 0 2rem; padding:0; }
.drawer li + li{ border-top:1px solid var(--border); }
.drawer a{
  display:block; text-decoration:none; padding:1rem 0;
  font-family:var(--f-head); font-weight:700; font-size:1.35rem;
}
.drawer a:hover{ color:var(--accent); }
.drawer .btn{ width:100%; justify-content:center; }
.drawer__meta{
  margin-top:2rem; padding-top:1.5rem;
  border-top:1px solid var(--border);
  font-size:.95rem; color:var(--muted);
}
.drawer__meta a{ font-family:var(--f-body); font-size:1rem; font-weight:400; padding:.3rem 0; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  padding-block:clamp(3rem, 7vw, 6rem) clamp(3.5rem, 8vw, 7rem);
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; z-index:0;
  top:0; right:0; width:44%; height:100%;
  background:var(--brand-light);
  border-bottom-left-radius:220px;
}
@media (max-width:900px){ .hero::before{ display:none; } }

.hero__in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem, 5vw, 4.5rem); align-items:center;
}
@media (max-width:900px){
  .hero__in{ grid-template-columns:1fr; gap:2.75rem; }
}

.hero__eyebrow{
  font-family:var(--f-head); font-weight:700;
  font-size:1.05rem; color:var(--accent);
  margin:0 0 1rem;
}
.hero h1{
  font-family:var(--f-display);
  font-size:clamp(2.5rem, 5.4vw, 4.1rem);
  line-height:1.06;
  letter-spacing:-.01em;
  margin:0;
  max-width:14ch;
}
.hero__rule{
  display:block; width:5.5rem; height:9px;
  background:var(--brand); border-radius:3px;
  margin:1.6rem 0 1.75rem;
}
.hero__lead{
  font-size:1.15rem; line-height:1.7;
  color:var(--muted);
  max-width:48ch; margin:0 0 2.25rem;
}
.hero__lead strong{ color:var(--text); font-weight:500; }

.hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; }

/* --- Bild + Öffnungs-Karte --- */
.hero__figure{ position:relative; margin:0; }
.hero__figure img{
  width:100%; height:auto; aspect-ratio:4/3.35; object-fit:cover;
  border-radius:var(--r-l);
  box-shadow:0 24px 60px -30px rgba(90,82,80,.55);
}
.hero__figure figcaption{
  font-family:var(--f-head); font-weight:400; font-size:.92rem;
  color:var(--muted); margin-top:.85rem;
}

.today{
  position:absolute; left:-18px; bottom:-26px;
  background:var(--surface);
  border-radius:var(--r-m);
  padding:1rem 1.35rem;
  box-shadow:0 14px 34px -16px rgba(29,29,27,.35);
  border-left:5px solid var(--brand);
  min-width:220px;
}
.today__label{
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--f-head); font-weight:700;
  font-size:.92rem; color:var(--muted);
  margin-bottom:.15rem;
}
.today__dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--border-stark); flex:none;
}
.today__dot.is-open{ background:var(--brand); }
.today__time{
  font-family:var(--f-head); font-weight:700;
  font-size:1.22rem; line-height:1.3; color:var(--text);
}
@media (max-width:900px){
  .today{ left:12px; bottom:-22px; }
}
@media (max-width:520px){
  .today{ position:static; margin-top:1.25rem; min-width:0; }
  .hero__figure figcaption{ margin-bottom:0; }
}

/* ============================================================
   PLATZHALTER (folgende Sektionen)
   ============================================================ */
.placeholder{
  border-top:1px solid var(--border);
  padding-block:clamp(3rem,6vw,5rem);
  text-align:center; color:var(--muted);
  font-family:var(--f-head); font-size:1.05rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:var(--brand-2-deep);
  color:var(--border);
  padding-block:clamp(3rem, 6vw, 4.5rem) 0;
  font-size:.98rem;
}
.footer__grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1.15fr;
  gap:clamp(1.75rem, 4vw, 3.25rem);
  padding-bottom:3rem;
}
@media (max-width:960px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .footer__grid{ grid-template-columns:1fr; gap:2.25rem; } }

.footer h2{
  font-family:var(--f-head); font-weight:700;
  font-size:1.08rem; color:var(--white);
  margin:0 0 1.1rem;
  padding-bottom:.6rem;
  border-bottom:1px solid rgba(var(--bg-rgb),.18);
}

.footer__mark{
  font-family:var(--f-head); font-weight:700;
  font-size:1.75rem; line-height:1; color:var(--white);
  margin:0 0 1.15rem; letter-spacing:.01em;
}
.footer__mark i{ font-style:normal; color:var(--brand); }
.footer__claim{ color:rgba(var(--bg-rgb),.72); margin:0 0 1.5rem; max-width:34ch; }

.footer ul{ list-style:none; margin:0; padding:0; }
.footer li{ margin-bottom:.6rem; }
.footer a{
  color:var(--border); text-decoration:none;
  transition:color .18s ease;
}
.footer a:hover{ color:var(--brand); }

.f-contact li{ display:flex; gap:.7rem; align-items:flex-start; }
.f-contact svg{ width:17px; height:17px; flex:none; margin-top:.32rem; color:var(--brand); }

.f-hours{ display:grid; gap:.45rem; }
.f-hours div{
  display:flex; justify-content:space-between; gap:1rem;
  padding-bottom:.4rem;
  border-bottom:1px dotted rgba(var(--bg-rgb),.2);
}
.f-hours dt{ color:rgba(var(--bg-rgb),.75); }
.f-hours dd{ margin:0; font-family:var(--f-head); font-weight:700; color:var(--white); white-space:nowrap; }
.f-hours .is-today dt, .f-hours .is-today dd{ color:var(--brand); }

.f-note{ color:rgba(var(--bg-rgb),.72); margin:0 0 1rem; }

.f-social{ display:flex; gap:.6rem; margin-top:1.5rem; }
.f-social a{
  display:grid; place-items:center; width:40px; height:40px;
  border:1px solid rgba(var(--bg-rgb),.28); border-radius:50%;
  transition:background-color .2s ease, border-color .2s ease;
}
.f-social a:hover{ background:var(--brand); border-color:var(--brand); color:var(--muted); }
.f-social svg{ width:18px; height:18px; }

.footer__bottom{
  border-top:1px solid rgba(var(--bg-rgb),.16);
  padding-block:1.4rem;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  font-size:.92rem; color:rgba(var(--bg-rgb),.7);
}
.footer__legal{ display:flex; gap:1.5rem; flex-wrap:wrap; }


/* ═══════════════════════════════════════════════════════════════
   DUNKELMODUS
   Zwei-Schatten-System lebt von zwei Schatten: dunkel von unten rechts, hell
   von oben links. Im Dunkelmodus darf der helle Anteil nicht
   verschwinden — sonst wird jede Fläche flach und das ganze System
   fällt auseinander. Er wird nur sehr viel schwächer.
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="dark"]{
  /* Flächen */
  --bg:            #131312;
  --bg-rgb:         19, 19, 18;
  --surface:       #1B1B19;
  --warm:          #171716;
  --flaeche-hell:  #171716;
  --brand-2-light: #262623;   /* Trennlinien, helle Zweitfläche   */
  --brand-light:   #1E2410;   /* sehr helle Akzentfläche           */
  --brand-2-dark:  #33332F;   /* Bänder bleiben dunkel             */
  --brand-2-rgb:     51, 51, 47;

  /* Schrift */
  --text:          #EFEFEA;
  --muted:         #A8A8A0;

  /* Akzent: im Dunkeln wird die Fläche dunkler, die Schrift heller */
  --brand:         #41580E;   /* Fläche  — 5,2:1 mit #FFF3C4       */
  --brand-rgb:      65, 88, 14;
  --brand-deep:    #A9CE45;
  --brand-deep-rgb: 169, 206, 69;
  --brand-soft:    #A9CE45;   /* Akzent als Schrift — 13,4:1       */
  --accent:        #A9CE45;
  --on-brand:      #EFF5DF;   /* Schrift auf der Akzentfläche      */

  /* Rahmen */
  --border:        #262623;
  --border-stark:  #4C4C48;

  /* Platzhalter */
  --ph-flaeche:    #262623;
  --ph-ico:        #6E6E66;

  /* Zitatkasten */
  --zitat-flaeche: #4A3505;
  --zitat-text:    #FDF7E6;
  --zitat-text-rgb:  253, 247, 230;

  /* Der Schatten kippt: dunkel bleibt kräftig, hell wird zur Andeutung */
  --shadow:        8px 8px 18px rgba(0,0,0,.55), -6px -6px 16px rgba(255,255,255,.035);
}

/* Wortmarke: das dunkle Logo verschwindet auf dunklem Grund */
html[data-theme="dark"] .logo--dunkel{ display:none; }
.logo--hell{ display:none; }
html[data-theme="dark"] .logo--hell{ display:block; }

/* Akzent auf Dunkel: Flächen brauchen mehr Tiefe */
html[data-theme="dark"] .btn--solid{
  background:var(--brand);           /* im Dunkelmodus die dunklere Akzentflaeche */
  color:var(--brand-light);                    /* helle Schrift darauf — 4,7:1 */
}
html[data-theme="dark"] .btn--solid:hover{ background:var(--brand-dark); }
html[data-theme="dark"] .today__dot.is-open{ background:var(--brand); }

html[data-theme="dark"] img{ color-scheme: dark; }

/* Systemeinstellung: gilt, wenn der Nutzer nicht selbst gewählt hat */
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    /* Flächen */
    --bg:            #131312;
    --bg-rgb:         19, 19, 18;
    --surface:       #1B1B19;
    --warm:          #171716;
    --flaeche-hell:  #171716;
    --brand-2-light: #262623;   /* Trennlinien, helle Zweitfläche   */
    --brand-light:   #1E2410;   /* sehr helle Akzentfläche           */
    --brand-2-dark:  #33332F;   /* Bänder bleiben dunkel             */
    --brand-2-rgb:     51, 51, 47;
  
    /* Schrift */
    --text:          #EFEFEA;
    --muted:         #A8A8A0;
  
    /* Akzent: im Dunkeln wird die Fläche dunkler, die Schrift heller */
    --brand:         #41580E;   /* Fläche  — 5,2:1 mit #FFF3C4       */
    --brand-rgb:      65, 88, 14;
    --brand-deep:    #A9CE45;
    --brand-deep-rgb: 169, 206, 69;
    --brand-soft:    #A9CE45;   /* Akzent als Schrift — 13,4:1       */
    --accent:        #A9CE45;
    --on-brand:      #EFF5DF;   /* Schrift auf der Akzentfläche      */
  
    /* Rahmen */
    --border:        #262623;
    --border-stark:  #4C4C48;
  
    /* Platzhalter */
    --ph-flaeche:    #262623;
    --ph-ico:        #6E6E66;
  
    /* Zitatkasten */
    --zitat-flaeche: #4A3505;
    --zitat-text:    #FDF7E6;
    --zitat-text-rgb:  253, 247, 230;
  
    /* Der Schatten kippt: dunkel bleibt kräftig, hell wird zur Andeutung */
    --shadow:        8px 8px 18px rgba(0,0,0,.55), -6px -6px 16px rgba(255,255,255,.035);
  }
  html:not([data-theme="light"]) .logo--dunkel{ display:none; }
  html:not([data-theme="light"]) .logo--hell{ display:block; }
  html:not([data-theme="light"]) .btn--solid{ background:var(--brand); color:var(--brand-light); }
}

/* Umschalter */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0; flex:none;
  background:transparent; border:1.5px solid var(--border-stark);
  border-radius:50%; color:var(--text); cursor:pointer;
  transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
.theme-toggle:hover{ border-color:var(--accent); color:var(--accent); }
.theme-toggle svg{ width:18px; height:18px; }
.theme-toggle .ico-mond{ display:none; }
html[data-theme="dark"] .theme-toggle .ico-sonne{ display:none; }
html[data-theme="dark"] .theme-toggle .ico-mond{ display:block; }
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .theme-toggle .ico-sonne{ display:none; }
  html:not([data-theme="light"]) .theme-toggle .ico-mond{ display:block; }
}

@media print{
  .theme-toggle, .burger, .topbar__social{ display:none !important; }
}


/* ═══════════════════════════════════════════════════════════════
   SEITENBAUSTEINE
   ═══════════════════════════════════════════════════════════════ */

.abschnitt{ padding: clamp(3.5rem, 8vw, 6rem) 0; }
.abschnitt--warm{ background:var(--warm); }
.abschnitt__in.zwei{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.abschnitt__kopf{ max-width:62ch; margin-bottom:clamp(2rem,4vw,3rem); }
.abschnitt__kopf .lead{ margin-top:1rem; color:var(--muted); }

.eyebrow{
  font-family:var(--f-head); font-weight:700; font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  margin:0 0 .7rem;
}
.abschnitt h2{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1.18; margin:0; color:var(--text);
}
.regel{ display:block; width:64px; height:3px; background:var(--brand); border-radius:2px; margin:1.25rem 0; }
.abschnitt p{ margin:.9rem 0 0; }
.lead{ font-size:1.08rem; line-height:1.7; }
.abschnitt .lead{ color:var(--text); }
.abschnitt p:not(.lead):not(.eyebrow):not(.mehr){ color:var(--muted); }
.signatur{ font-family:var(--f-display); font-size:1.15rem; color:var(--text) !important; }

/* Bilder */
.bild-gerahmt{ margin:0; }
.bild-gerahmt img{
  width:100%; height:auto; display:block;
  border-radius:var(--r-l); border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.bild-gerahmt figcaption{ font-size:.82rem; color:var(--muted); margin-top:.8rem; }

/* Raster */
.raster{ display:grid; gap:var(--gap,1rem); }
.raster--3{ grid-template-columns:repeat(3,1fr); }
.raster--4{ grid-template-columns:repeat(4,1fr); }

/* Karten */
.karte{
  display:flex; align-items:center; gap:.75rem;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-m); padding:1rem 1.15rem;
  text-decoration:none; color:var(--text);
  box-shadow:var(--shadow);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.karte:hover{ transform:translateY(-2px); border-color:var(--accent); }
.karte__nr{ font-family:var(--f-head); font-weight:700; font-size:.75rem; color:var(--accent); flex:none; }
.karte__titel{ font-family:var(--f-head); font-weight:700; font-size:1.02rem; flex:1; }
.karte__pfeil{ color:var(--accent); flex:none; transition:transform .22s ease; }
.karte:hover .karte__pfeil{ transform:translateX(3px); }
.karte.blog{ flex-direction:column; align-items:flex-start; gap:.5rem; min-height:100%; }
.karte.blog strong{ font-family:var(--f-head); font-weight:700; font-size:1.05rem; line-height:1.35; }
.karte__marke{
  font-family:var(--f-head); font-weight:700; font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase;
  background:var(--brand-light); color:var(--accent);
  border-radius:999px; padding:.2rem .6rem;
}

/* Team */
.team{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.team__person{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-m); padding:1.15rem;
  box-shadow:var(--shadow); text-align:center;
}
.team__bild--leer{
  border-style:dashed; opacity:.55;
}
.team__bild{
  display:block; width:64px; height:64px; margin:0 auto .8rem;
  border-radius:50%; object-fit:cover; border:2px solid var(--border); background:var(--brand-light);
}
.team__person strong{ display:block; font-family:var(--f-head); font-weight:700; font-size:1rem; }
.team__person span{ display:block; font-size:.85rem; color:var(--muted); margin-top:.2rem; }

/* Zitat */
.zitat{ background:var(--brand-2-deep); color:var(--white); }
.zitat__in{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.zitat blockquote{ margin:0; border-left:5px solid var(--brand); padding-left:1.5rem; }
.zitat .zitat__in blockquote p{ font-family:var(--f-display); font-size:clamp(1.6rem,3vw,2.3rem);
  line-height:1.25; margin:0; color:var(--white) !important; }
.zitat blockquote footer{ font-family:var(--f-head); font-weight:700; font-size:.9rem; letter-spacing:.06em; color:var(--brand); margin-top:.6rem; }
.zitat .zitat__in .zitat__text{ margin:0; color:rgba(255,255,255,.88) !important; font-size:1.05rem; }

/* Kontaktband */
.kontakt-band{ background:var(--brand-2); }
.kontakt-band__in{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4rem); }
.kontakt-band__liste{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-l); padding:1.6rem; box-shadow:var(--shadow); }
.kontakt-band__liste h3{ font-family:var(--f-head); font-weight:700; font-size:1.15rem; margin:0 0 1rem; }
.kontakt-band__liste ul{ list-style:none; margin:0; padding:0; }
.kontakt-band__liste li{ padding:.7rem 0; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:.15rem; }
.kontakt-band__liste li:first-child{ border-top:none; }
.kontakt-band__liste strong{ font-family:var(--f-head); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.kontakt-band__liste a{ color:var(--accent); text-decoration:none; }
.kontakt-band__liste a:hover{ text-decoration:underline; }
.knopfreihe{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem; }

/* Listen Öffnungszeiten / Anfahrt */
.zeiten, .anfahrt{ margin:1.5rem 0 0; padding:0; }
.zeiten div, .anfahrt div{ display:flex; justify-content:space-between; gap:1.5rem; padding:.7rem 0; border-top:1px solid var(--border); }
.zeiten dt, .anfahrt dt{ font-family:var(--f-head); font-weight:700; font-size:.95rem; flex:none; }
.zeiten dd, .anfahrt dd{ margin:0; color:var(--muted); text-align:right; }
.anfahrt div{ flex-direction:column; gap:.3rem; }
.anfahrt dd{ text-align:left; }

.mehr{ margin-top:clamp(1.75rem,3vw,2.5rem); }

/* Responsiv */
@media (max-width:1080px){
  .raster--4{ grid-template-columns:repeat(2,1fr); }
  .raster--3{ grid-template-columns:repeat(2,1fr); }
  .team{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px){
  .abschnitt__in.zwei, .zitat__in, .kontakt-band__in{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .raster--4, .raster--3, .team{ grid-template-columns:1fr; }
  .team{ grid-template-columns:repeat(2,1fr); }
}


/* Die Öffnungszeiten-Karte lag über der Bildunterschrift des Hero-Fotos.
   Sie sitzt jetzt rechts, die Unterschrift bleibt links frei. */
.hero__figure .today{ left:auto; right:-18px; }
.hero__figure figcaption{ max-width:58%; }
@media (max-width:900px){
  .hero__figure .today{ right:0; }
  .hero__figure figcaption{ max-width:none; }
}


/* ═══════════════════════════════════════════════════════════════
   STARTSEITE — Aufbau: Kontaktleiste · Navigation · Hero · Bänder · Fußzeile
   Breiter, bildstark, mit doppeltem Menü.
   ═══════════════════════════════════════════════════════════════ */

/* Breiter als der Struktur-Entwurf */
:root{ --wrap:1320px; --breit:1560px; }

/* ── Menü 1: dunkle Kontaktleiste ── */
.topbar{ background:var(--brand-2); color:#fff; border-bottom:none; }
.topbar a{ color:#fff; text-decoration:none; }
.topbar a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.topbar__in{ min-height:46px; }
.topbar__facts li{ display:flex; align-items:center; gap:.5rem; }
.topbar__facts svg{ width:15px; height:15px; flex:none; opacity:.85; }
.topbar__social a{ display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center;
  border-radius:50%; background:rgba(255,255,255,.1); }
.topbar__social svg{ width:15px; height:15px; }

/* ── Menü 2: weiße Navigationsleiste mit grünem Termin-Knopf ── */
.nav{ background:var(--surface); box-shadow:0 2px 14px -8px rgba(29,29,27,.25); }
.nav__in{ min-height:82px; }
.nav__menu a{ font-family:var(--f-head); font-weight:400; letter-spacing:.09em;
  text-transform:uppercase; font-size:.87rem; padding:.55rem .8rem; }
.nav__menu a[aria-current="page"], .nav__menu a:hover{ color:var(--brand-deep); }
/* Zweitknopf: Akzentrahmen, Hover füllt weiß */
.btn--zweit {
  background:var(--brand-2); color:#fff;
  border:1.5px solid var(--brand);
  box-shadow:0 0 0 3px rgba(var(--brand-2-rgb),.16);
  transition:background .35s cubic-bezier(.32,.72,0,1), color .35s cubic-bezier(.32,.72,0,1),
             border-color .35s cubic-bezier(.32,.72,0,1), box-shadow .35s cubic-bezier(.32,.72,0,1),
             transform .35s cubic-bezier(.32,.72,0,1);
}
.btn--zweit:hover, .btn--zweit:focus-visible {
  background:#fff; color:var(--brand-2-deep);
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(var(--brand-rgb),.30);
  transform:translateY(-1px);
}
.btn--zweit:active { transform:translateY(0); box-shadow:0 0 0 2px rgba(var(--brand-rgb),.24); }
html[data-theme="dark"] .btn--zweit { background:var(--brand-2-dark); color:var(--text); }
html[data-theme="dark"] .btn--zweit:hover, html[data-theme="dark"] .btn--zweit:focus-visible {
  background:var(--brand-2-deep); color:#fff;
}
.btn--marke{ background:var(--brand); color:var(--on-brand); border:none; }
.btn--marke:hover{ background:var(--brand-deep); color:var(--white); }

/* ── Vollbild-Hero ── */
.hero-voll{ position:relative; background:var(--text); overflow:hidden; }
.hero-voll__bild{ position:absolute; inset:0; }
.hero-voll__bild img{ width:100%; height:100%; object-fit:cover; }
.hero-voll__schleier{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(29,29,27,.30), rgba(29,29,27,.45)); }
.hero-voll__in{ position:relative; z-index:1; text-align:center;
  padding:clamp(5rem,13vw,9.5rem) 0; min-height:clamp(340px,44vw,620px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; padding-inline:var(--pad); }
.hero-voll h1{ font-family:var(--f-display); font-weight:400; color:#fff;
  font-size:clamp(2rem,4.6vw,3.6rem); line-height:1.12; margin:0; max-width:22ch;
  text-shadow:0 2px 20px rgba(0,0,0,.45); }
.hero-voll__sub{ font-family:var(--f-head); color:#fff; font-size:clamp(1rem,1.7vw,1.35rem);
  margin:1rem 0 0; text-shadow:0 2px 14px rgba(0,0,0,.5); }
.hero-voll__knopf{ margin-top:2rem; }

/* ── Abschnitt: breite Bänder ── */
.band{ padding:clamp(3.5rem,8vw,6rem) 0; }
.band--hell{ background:var(--flaeche-hell); }
.band--weiss{ background:var(--surface); }
/* Abstand zwischen Einfuehrungstext und Raster war 32-48px und wirkte
   gedraengt; auf 51-77px erhoeht (Wunsch: mehr Luft zum Textblock). */
.band__kopf{ text-align:center; max-width:74ch; margin:0 auto clamp(3.2rem,5.6vw,4.8rem); }
.band__kopf h2{ font-family:var(--f-head); font-weight:700; font-size:clamp(1.5rem,2.8vw,2.1rem);
  margin:0; color:var(--text); }
.band__kopf h2 em{ font-style:normal; color:var(--brand-deep); }
.band__kopf .lead{ margin-top:1rem; color:var(--muted); }
/* ── Erkennungszeichen (PROJEKT-SLOT) ────────────────────────────────
   Hier steht das Erkennungszeichen des Kunden, einfarbig ueber currentColor.
   Pro Projekt austauschen: das SVG steht im Markup, die Groesse kommt aus
   .marken-ico bzw. .bildmarke--s/m/l/xl. Mehrfarbige Originale gehoeren als
   <img src="…svg"> ins Markup, nicht in ein einfarbiges Symbol. */
.marken-ico{ display:block; width:34px; height:34px; color:var(--brand-deep); }
.marken-ico svg{ display:block; width:100%; height:100%; }
/* Originalfarbiges Erkennungszeichen als Bild (mehrfarbige Marken) */
.marken-ico-bild{ display:block; height:44px; width:auto; margin:0 auto 1rem; }
.team-sechs .leer .marken-ico-bild{ height:52px; }
.band__kopf .marken-ico{ margin:0 auto 1rem; }
.bildmarke{ display:block; width:auto; height:56px; }
.bildmarke--s{ height:28px; }
.bildmarke--m{ height:44px; }
.bildmarke--l{ height:72px; }
.bildmarke--xl{ height:104px; }
/* Das Team-Platzhalterfeld trägt das Erkennungszeichen statt eines Fotos */
.leer .marken-ico{ width:52px; height:52px; color:var(--border-stark); }

/* ── Willkommen: drei Spalten ── */
.willkommen{ display:grid; grid-template-columns:300px 1fr 230px; gap:clamp(1.5rem,4vw,3.5rem); align-items:start; }
.willkommen__bild img{ width:100%; height:auto; display:block; }
.willkommen__text h2{ font-family:var(--f-head); font-weight:700; font-size:clamp(1.5rem,2.6vw,1.9rem); margin:0 0 1rem; }
.willkommen__text p{ color:var(--muted); }
.willkommen__text p strong{ color:var(--text); }
.willkommen__sign{ font-family:var(--f-display); font-size:1.2rem; color:var(--text); margin-top:1.2rem; }
.willkommen__arzt{ text-align:right; }
.willkommen__arzt b{ display:block; font-family:var(--f-head); color:var(--brand-deep); font-size:1rem; line-height:1.4; }
.willkommen__arzt small{ display:block; color:var(--muted); font-size:.82rem; margin-top:.6rem; }

/* ── Aktuelles: vier Karten mit Bild ── */
.aktuell{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.aktuell__karte{ background:var(--surface); box-shadow:0 12px 30px -20px rgba(29,29,27,.35);
  display:flex; flex-direction:column; text-decoration:none; color:var(--text);
  border:1px solid var(--border); transition:transform .22s ease, box-shadow .22s ease; }
.aktuell__karte:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -22px rgba(29,29,27,.45); }
.aktuell__bild{ aspect-ratio:16/10; overflow:hidden; background:var(--brand-light); }
.aktuell__bild img{ width:100%; height:100%; object-fit:cover; display:block; }
.aktuell__in{ padding:1.15rem 1.25rem 1.4rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.aktuell__marke{ font-family:var(--f-head); font-weight:700; font-size:.68rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--brand-deep); }
.aktuell__karte strong{ font-family:var(--f-head); font-weight:700; font-size:1.02rem; line-height:1.35; }
.aktuell__karte p{ margin:0; font-size:.92rem; color:var(--muted); }
.band__mehr{ text-align:right; margin-top:1.6rem; }
.band__mehr a{ font-family:var(--f-head); font-weight:700; color:var(--brand-deep); text-decoration:none; font-size:.95rem; }
.band__mehr a:hover{ text-decoration:underline; }

/* ── Zitat: Vollbild mit grünem Kasten ── */
.zitat-band{ position:relative; background:var(--text); }
.zitat-band__bild{ position:absolute; inset:0; }
.zitat-band__bild img{ width:100%; height:100%; object-fit:cover; }
.zitat-band__in{ position:relative; z-index:1; padding:clamp(3rem,7vw,5.5rem) 0;
  display:grid; grid-template-columns:1.05fr 1fr; }
.zitat-kasten{ background:var(--zitat-flaeche); border-left:4px solid var(--brand);color:var(--zitat-text); padding:clamp(1.6rem,3.4vw,2.6rem); }
.zitat-kasten__kopf{ display:flex; align-items:center; gap:.7rem; margin-bottom:1.2rem; }
.zitat-kasten__kopf svg{ width:22px; height:22px; flex:none; }
.zitat-kasten__kopf b{ font-family:var(--f-head); font-weight:700; font-size:1.05rem; }
.zitat-kasten__kopf span{ font-family:var(--f-head); font-size:.88rem; opacity:.8; }
.zitat-kasten p{ margin:0 0 1rem; font-size:1rem; line-height:1.7; }
.zitat-kasten p:last-of-type{ margin-bottom:1.5rem; }
.zitat-kasten .btn--line{ border-color:rgba(var(--zitat-text-rgb),.5); color:var(--zitat-text); }
.zitat-kasten .btn--line:hover{ background:var(--zitat-text); color:var(--brand); border-color:var(--zitat-text); }

/* ── Team: sechs Spalten, große Porträts ── */
.team-sechs{ display:grid; grid-template-columns:repeat(6,1fr); gap:1.5rem 1.4rem; }
.team-sechs figure{ margin:0; text-align:center; }
.team-sechs img, .team-sechs .leer{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; display:block;
  background:var(--ph-flaeche); border:1px solid var(--border);
}
.team-sechs .leer{ display:flex; align-items:center; justify-content:center; }
.team-sechs .leer .marken-ico{ width:52px; height:52px; color:var(--ph-ico); }
.team-sechs .leer svg{ width:100%; height:100%; }
.team-sechs figcaption{ margin-top:.9rem; }
.team-sechs strong{ display:block; font-family:var(--f-head); font-weight:700; font-size:1rem; line-height:1.3; }
.team-sechs span{ display:block; font-family:var(--f-head); font-size:.88rem; color:var(--brand-deep); margin-top:.15rem; }
.team-mitte{ text-align:center; margin-top:clamp(1.8rem,3.5vw,2.6rem); }

/* ── Praxismosaik ── */
/* "dense": ohne das laesst die automatische Platzierung Zellen leer, wenn eine
   grosse Kachel nicht mehr in die laufende Reihe passt (gemessen: Spalte 4 in
   Reihe 1 blieb leer, dazu Reihe 5/6). Mit dense fuellt der Browser die
   Luecken mit spaeteren Kacheln — das Mosaik geht ohne Loch auf. */
.mosaik{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:.9rem;
  grid-auto-flow:row dense; }
.mosaik img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Platzhalter im Mosaik: Die Nummer verbindet Kachel und Motivliste.
   Austausch: <div class="ph"> je Kachel durch <img ...>. */
.mosaik .ph{ position:relative; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:.45rem; width:100%; height:100%; padding:1.1rem; text-align:center;
  border:1px dashed var(--border-stark); color:var(--muted);
  background:repeating-linear-gradient(45deg,var(--border) 0 8px,transparent 8px 16px),var(--surface); }
.mosaik .ph svg{ width:30px; height:30px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; color:var(--brand-deep); }
.mosaik .ph b{ font-family:var(--f-head); font-weight:700; font-size:.92rem; line-height:1.25; color:var(--text); }
.mosaik .ph span{ font-family:var(--f-head); font-size:.74rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--brand-deep); }
.mosaik .ph em{ position:absolute; top:.55rem; left:.7rem; font-style:normal;
  font-family:var(--f-head); font-weight:700; font-size:.8rem; color:var(--brand-deep); }
html[data-theme="dark"] .mosaik .ph{
  background:repeating-linear-gradient(45deg,var(--brand-2-light) 0 8px,transparent 8px 16px),var(--surface); }
html[data-theme="dark"] .mosaik .ph svg,
html[data-theme="dark"] .mosaik .ph span,
html[data-theme="dark"] .mosaik .ph em{ color:var(--accent); }
.mosaik .g2{ grid-column:span 2; grid-row:span 2; }
.mosaik .h2{ grid-row:span 2; }
.mosaik .b2{ grid-column:span 2; }

/* ── Leistungen: drei Spalten mit großen Bildern ── */
.leistungen{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,2.4rem); }
.leistungen a{ text-decoration:none; color:var(--text); display:block; }
.leistungen__bild{ aspect-ratio:16/10; overflow:hidden; background:var(--brand-light); }
.leistungen__bild img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease; }
.leistungen a:hover .leistungen__bild img{ transform:scale(1.045); }
.leistungen b{ display:block; text-align:center; font-family:var(--f-head); font-weight:700;
  font-size:1.08rem; margin-top:1rem; }
.leistungen a:hover b{ color:var(--brand-deep); }

/* ── CTA im PAM-Stil ── */
/* CTA im Originalton der Kundenseite (var(--brand-2), Taupe). Dahinter liegt die
   Aufnahme mit dem Telefonhoerer (kontakt.jpg, 1920x850). Der Schleier
   darueber ist derselbe Taupe-Ton — dadurch bleibt der Hintern rund ruhig
   und das Foto wirkt als Struktur, nicht als Bild.
   ::before = Foto · ::after = Schleier · .wrap liegt darueber. */
.cta-band{ position:relative; background-color:var(--brand-2); overflow:hidden; }
.cta-band::before{
  content:""; position:absolute; inset:0;
  background:var(--cta-bild) center 38%/cover no-repeat;
}
.cta-band::after{
  content:""; position:absolute; inset:0;
  background:rgba(var(--brand-2-rgb),.75);
}
.cta-band > .wrap{ position:relative; z-index:2; }
html[data-theme="dark"] .cta-band{ background-color:var(--brand-2-dark); }
html[data-theme="dark"] .cta-band::after{ background:rgba(var(--bg-rgb),.84); }
/* Link unter dem Leistungen-Raster jetzt ein Knopf — mit Luft bis zur CTA */
/* FALLE: Der Abstand stand als margin-bottom am Absatz. Raender kollabieren aus
   dem Elternelement heraus - die 2,6rem (42 px bei 1560) lagen damit AUSSERHALB
   der weissen Sektion, und darunter schien der Seitengrund var(--bg) durch (im
   Bild der helle Streifen ueber der CTA). Als padding bleibt die Luft im Element
   und die Flaeche bleibt geschlossen. */
.band__mehr--btn{ margin-top:clamp(1.6rem,3vw,2.2rem); margin-bottom:0;
                  padding-bottom:clamp(1.4rem,3.2vw,2.6rem); }
.band__mehr--btn .btn i{ font-style:normal; }
.cta-box{ background:var(--surface); border:1px solid var(--border); padding:clamp(1.8rem,3.5vw,3rem);
  display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(1.6rem,3.5vw,3rem); align-items:center;
  box-shadow:var(--shadow); }
.cta-box h2{ font-family:var(--f-display); font-weight:400; font-size:clamp(1.6rem,3vw,2.3rem); margin:.4rem 0 .8rem; }
.cta-box .eyebrow{ color:var(--brand-deep); }
.cta-box p{ color:var(--muted); margin:0; }
.cta-kacheln{ display:grid; gap:.9rem; }
.cta-kachel{ display:flex; align-items:center; gap:1rem; padding:1.05rem 1.25rem;
  background:var(--bg); border:1px solid var(--border); border-left:4px solid var(--brand);
  text-decoration:none; color:var(--text);
  transition:transform .2s ease, border-color .2s ease; }
.cta-kachel:hover{ transform:translateX(3px); }
.cta-kachel__icon{ flex:none; width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  background:var(--brand-light); color:var(--brand-deep); border-radius:50%; }
.cta-kachel__icon svg{ width:20px; height:20px; }
.cta-kachel__text{ flex:1; }
.cta-kachel__text b{ display:block; font-family:var(--f-head); font-weight:700; font-size:1rem; }
.cta-kachel__text small{ display:block; color:var(--muted); font-size:.85rem; margin-top:.15rem; }
.cta-kachel__pfeil{ flex:none; width:20px; height:20px; color:var(--brand-deep); }

/* ── Fußzeile im PAM-Stil ── */
.fuss{ background:var(--brand-2); color:#fff; }
.fuss__raster{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(1.6rem,3.5vw,3rem);
  padding:clamp(2.5rem,5vw,4rem) 0; }
.fuss h4{ font-family:var(--f-head); font-weight:700; font-size:.78rem; letter-spacing:.12em;
  text-transform:uppercase; color:#fff; margin:0 0 1.1rem; }
.fuss p{ margin:.4rem 0; font-size:.94rem; }
.fuss a{ color:#fff; text-decoration:none; }
.fuss a:hover{ color:#fff; }
.fuss__route{ font-style:normal; color:var(--brand); }
.fuss a:hover .fuss__route{ color:#fff; }
.fuss__marke{ font-family:var(--f-head); font-size:1.3rem; letter-spacing:.02em; color:#fff; margin:0 0 .9rem; }
.fuss__marke i{ font-style:normal; color:var(--brand); }
/* Wortmarke als SVG statt Textzeile. Das Logo ist weiss auf transparent und
   funktioniert deshalb in beiden Modi — der Footer ist immer dunkel
   (var(--brand-2) hell / var(--brand-2-dark) dunkel), ein Umschalten ist nicht noetig. */
.fuss__marke{ display:block; margin:0 0 1rem; }
.fuss__marke img{ display:block; height:calc(var(--logo-h, 36px) * 1.08); width:auto; }
.fuss__zeiten{ width:100%; border-collapse:collapse; }
.fuss__zeiten th, .fuss__zeiten td{ text-align:left; font-size:.9rem; padding:.32rem 0; font-weight:400; }
.fuss__zeiten th{ color:rgba(255,255,255,.6); padding-right:.8rem; white-space:nowrap; }
.fuss__zeiten tr.heute td, .fuss__zeiten tr.heute th{ color:var(--brand); font-weight:700; }
.fuss__unten{ border-top:1px solid rgba(255,255,255,.14); padding:1.2rem 0;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.85rem; }

/* ── Feinschliff Dunkelmodus ── */
html[data-theme="dark"] .band--hell{ background:var(--flaeche-hell); }
html[data-theme="dark"] .nav{ box-shadow:0 2px 14px -8px rgba(0,0,0,.6); }
/* FALLE: Der aktive Menüpunkt stand auch im Dunkelmodus auf --brand-deep.
   Auf dem dunklen Grund sind das 2,2:1 — praktisch unlesbar. Im Dunkelmodus
   übernimmt deshalb --accent (var(--brand-soft), 13,4:1) die Markierung. */
html[data-theme="dark"] .nav__menu a[aria-current="page"],
html[data-theme="dark"] .nav__menu a:hover{ color:var(--accent); }
html:not([data-theme="light"]) .nav__menu a[aria-current="page"],
html:not([data-theme="light"]) .nav__menu a:hover{ color:var(--accent); }
html[data-theme="dark"] .nav.is-open .nav__menu a[aria-current="page"],
html:not([data-theme="light"]) .nav.is-open .nav__menu a[aria-current="page"]{ color:var(--accent); }
html[data-theme="dark"] html[data-theme="dark"] .team-sechs img,
html[data-theme="dark"] .team-sechs .leer{ background:var(--brand-2-light); }
html[data-theme="dark"] .team-sechs .leer svg{ color:var(--ph-ico); }
/* Dunkelmodus: tiefes Bronze statt des trüben --brand-deep; der Knopf braucht
   helle Schrift, sonst stand dunkle Schrift auf dunklem Bronze (unlesbar). */
html[data-theme="dark"] .zitat-kasten{ background:var(--zitat-dunkel); color:var(--brand-light); }
html[data-theme="dark"] .zitat-kasten .btn--line{ border-color:rgba(253,247,230,.5); color:var(--brand-light); }
html[data-theme="dark"] .zitat-kasten .btn--line:hover{ background:var(--brand); color:var(--on-brand); border-color:var(--brand); }
html[data-theme="dark"] .zitat-kasten .zitat-kasten__kopf span{ opacity:.85; }
html[data-theme="dark"] .cta-kachel__icon{ background:var(--brand-light); color:var(--brand); }
html[data-theme="dark"] .fuss{ background:var(--brand-2-dark); }
/* Kontaktleiste und Fusszeile tragen dasselbe Band: hell Taupe var(--brand-2),
   dunkel Espresso var(--brand-2-dark). Espresso hat 12,9:1 mit Weiss und trennt sich mit
   1,46:1 vom Seitengrund; der alte Wert #0F1317 nur 1,01:1 (unsichtbar) und
   zudem kaltblau (Farbton 210) in einer durchweg warmen Palette. */
html:not([data-theme="light"]) .fuss{ background:var(--brand-2-dark); }
html[data-theme="dark"] .topbar,
html:not([data-theme="light"]) .topbar{ background:var(--brand-2-dark); }
html[data-theme="dark"] .fuss a:hover,
html:not([data-theme="light"]) .fuss a:hover{ color:#fff; }
.fuss__route{ font-style:normal; color:var(--brand); }
.fuss a:hover .fuss__route{ color:#fff; }
html[data-theme="dark"] .today__dot.is-open,
html:not([data-theme="light"]) .today__dot.is-open{ background:var(--accent); }

/* ── Responsiv ── */
@media (max-width:1300px){
  .team-sechs{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:1080px){
  .willkommen{ grid-template-columns:1fr; }
  .willkommen__arzt{ text-align:left; }
  .aktuell{ grid-template-columns:repeat(2,1fr); }
  .leistungen{ grid-template-columns:repeat(2,1fr); }
  .cta-box{ grid-template-columns:1fr; }
  .fuss__raster{ grid-template-columns:repeat(2,1fr); }
  .zitat-band__in{ grid-template-columns:1fr; }
  /* Zitat auf schmalen Geraeten: Der Akzentkasten stand ueber die volle Breite
     und deckte das Hintergrundbild bis auf schmale Streifen ab (gemessen:
     y 2600-3140 durchgehend in der Akzentfarbe). Das Bild wird deshalb zur eigenen
     Bildzeile ueber dem Kasten statt ueberlagertes Hintergrundbild. */
  .zitat-band__bild{ position:static; height:clamp(190px,44vw,300px); }
  .zitat-band__bild img{ display:block; }
  /* var(--pad) statt 0: sonst läuft der Kasten randlos bis an die
     Bildschirmkante, während der Rest der Seite 21,5px Rand hat. */
  .zitat-band__in{ padding:clamp(1.5rem,4vw,2.2rem) var(--pad) clamp(2.6rem,6vw,4rem);
    background:var(--brand); }
  /* Im Dunkelmodus ist der Kasten var(--zitat-dunkel) — dann muss auch die Flaeche
     darum diese Farbe haben, sonst entsteht ein greller Akzentrand. */
  html[data-theme="dark"] .zitat-band__in{ background:var(--zitat-dunkel); }
  .zitat-kasten{ padding:clamp(1.4rem,4.5vw,2rem); }
  .mosaik{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:760px){
  /* Drei Spalten statt zwei (Wunsch). Namen wie "Elona Durguti-Haxhijaha"
     sind lang, deshalb Schrift und Abstaende kleiner — sonst reissen die
     Unterschriften auf drei Zeilen. */
  .team-sechs{ grid-template-columns:repeat(3,1fr); gap:1.1rem .8rem; }
  /* Zwei Zeilen Hoehe fest reservieren: sonst sitzt die Funktionszeile
     bei langen Namen ("Elona Durguti-Haxhijaha") tiefer als bei kurzen. */
  .team-sechs strong{ font-size:.85rem; line-height:1.25; min-height:2.5em; }
  .team-sechs span{ font-size:.76rem; }
  .team-sechs figcaption{ margin-top:.6rem; }
  .aktuell, .leistungen{ grid-template-columns:1fr; }
  .fuss__raster{ grid-template-columns:1fr; }
  .mosaik{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
  .mosaik .g2{ grid-column:span 2; grid-row:span 1; }
}

/* ═══ Leistungs-Mosaik — Varianten ═══ */
/* 16 statt 12 Spalten: die Spannen der Kacheln bleiben, dadurch passen vier
   Kacheln in die Reihe statt drei und die Sektion wird deutlich flacher
   (Kundenvorgabe "weniger hoch"). Summe der Spannen 60 -> 3,75 statt 5 Reihen. */
/* Flex-Zeilen statt Grid. Ein Grid PLATZIERT Kacheln — passt eine nicht mehr in
   die Reihe, bleibt die Luecke liegen (gemessen: bis zu 6 Leerstellen). Flex legt
   sie nebeneinander und flex-grow verteilt den Rest: JEDE Reihe ist randvoll,
   auch die letzte, ohne Breakpoint-Luecken. Kachelbreite als Bruchteil von 1/n:
   7 Spalten am Rechner, 5 am Tablet, 3 mobil. Die Inline-Spannen im HTML bleiben
   unangetastet — sie werden hier nur abgebildet, damit die [style*="--c:..."]-
   Regeln fuer Panel und Textweite weiter greifen. */
.gitter{ display:flex; flex-wrap:wrap; gap:8px; margin:0; }
.gitter .k{ flex:1 1 auto; }
.gitter .k:not([style*="--c:6"]){ flex-basis:calc(14.2857% - 8px); }   /* 1/7 */
.gitter .k[style*="--c:6"]{ flex-basis:calc(28.5714% - 7px); }         /* 2/7 */
.gitter .k:not([style*="--c:6"]) img{ aspect-ratio:16/10; }
.gitter .k[style*="--c:6"] img{ aspect-ratio:16/9; }

/* Desktop: 20 Spalten statt 12. Die Inline-Spannen (6/3/4) werden hier auf
   8/4/4 abgebildet — 6 -> 8 (40 %), 3/4 -> 4 (20 %). Damit passen vier Kacheln
   in die Reihe statt drei. Zusammen mit r=2 (statt 3/2 gemischt) packt das
   Raster LUECKENLOS: 8 Rasterreihen = 4 Kachelreihen statt 5.
   Gemessen: 0 sichtbare Leerstellen (16 Spalten mit den alten Spannen hatten 6,
   die verhaeltnistreue Variante 8/4/5 hatte 11 Reihen = gar keine Ersparnis).
   Die Inline-Werte bleiben unangetastet, damit die [style*="--c:..."]-Regeln
   an allen Breakpoints weiter greifen. */
.k{ position:relative; display:block; overflow:hidden; text-decoration:none; background:var(--ph-flaeche); }
.k img{ width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .65s cubic-bezier(.2,.75,.3,1); }
.k:hover img{ transform:scale(1.06); }
.k__nr{ position:absolute; z-index:3; top:.7rem; left:.8rem;
    font-family:var(--f-head); font-weight:700; font-size:.7rem; letter-spacing:.06em;
    color:#fff; background:rgba(20,24,22,.55); padding:.22rem .5rem; border-radius:3px; }
/* Titel immer sichtbar */
.k__titel{ position:absolute; z-index:2; left:0; right:0; bottom:0; padding:.9rem 1rem .85rem;
    font-family:var(--f-head); font-weight:700; font-size:1.02rem; color:#fff; line-height:1.25;
    background:linear-gradient(180deg, transparent, rgba(20,24,22,.72)); }
.k:focus-visible{ outline:3px solid var(--brand); outline-offset:-3px; }

/* ── Variante A: Panel schiebt hoch ── */
.v-a .k__panel{ position:absolute; z-index:4; left:0; right:0; bottom:0;
    padding:1.15rem 1.2rem 1.25rem; color:#fff;
    background:linear-gradient(180deg, rgba(var(--zitat-text-rgb),.05), rgba(var(--zitat-text-rgb),.92) 24%, var(--zitat-text));
    transform:translateY(101%); transition:transform .45s cubic-bezier(.2,.75,.3,1);
    display:flex; flex-direction:column; gap:.45rem; }
.v-a .k:hover .k__panel, .v-a .k:focus-visible .k__panel{ transform:translateY(0); }
.v-a .k__panel strong{ font-family:var(--f-head); font-weight:700; font-size:1rem; line-height:1.35; }
.v-a .k__rest{ font-size:.87rem; line-height:1.5; color:rgba(255,255,255,.84);
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.v-a .k__mehr{ font-family:var(--f-head); font-weight:700; font-size:.82rem; color:var(--brand);
    display:inline-flex; align-items:center; gap:.35rem; margin-top:.15rem; }
.v-a .k__mehr i{ font-style:normal; transition:transform .3s ease; }
.v-a .k:hover .k__mehr i{ transform:translateX(4px); }
.v-a .k:hover .k__titel{ opacity:0; transition:opacity .2s; }



/* Kleine Kacheln: weniger Text */
.k[style*="--c:3"][style*="--r:2"] .k__panel strong,
.k[style*="--c:3"][style*="--r:3"] .k__lead{ font-size:.95rem; }

/* Tablet: zwei Kacheln pro Zeile, Höhen bleiben unterschiedlich */
@media (max-width:1100px){
  .gitter .k:not([style*="--c:6"]){ flex-basis:calc(20% - 8px); }     /* 5 Spalten */
  .gitter .k[style*="--c:6"]{ flex-basis:calc(40% - 8px); }
}
/* Telefon: zwei Spalten, die hohen Kacheln laufen über die volle Breite */
@media (max-width:700px){
  .gitter .k:not([style*="--c:6"]){ flex-basis:calc(33.3333% - 8px); }  /* 3 Spalten */
  /* Breitkacheln auf halbe Breite: sonst brauchen Prophylaxe und Veneers am
     Telefon je eine ganze Reihe. Mit 50 % stehen sie nebeneinander. */
  .gitter .k[style*="--c:6"]{ flex-basis:calc(50% - 6px); }
  /* Kacheltitel duerfen trennen: Lange Fachwoerter oder
     "Kiefergelenkbeschwerden" sind breiter als eine 124-px-Kachel und liefen
     sonst aus dem Bild (overflow:hidden schnitt sie ab). */
  .gitter--voll .k__titel{ hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word;
    font-size:.9rem; line-height:1.25; padding:.6rem .7rem .55rem; }
}




/* ═══════════════════════════════════════════════════════════════
   LEISTUNGS-MOSAIK auf der Startseite
   Vollbreit bis an den Bildschirmrand, enger gestellt.
   ═══════════════════════════════════════════════════════════════ */
.leist-mosaik{ padding-bottom:0; }
/* Abstand zwischen Text und Mosaik */
.leist-mosaik .band__kopf{ margin-bottom:clamp(2rem,4vw,3rem); }
.gitter--voll{ --sp:8px; gap:var(--sp); margin:0; }
/* Engere Kachel-Typografie, weil die Kacheln flacher sind */
.gitter--voll .k__nr{ top:.5rem; left:.55rem; font-size:.64rem; padding:.16rem .4rem; }
.gitter--voll .k__titel{ padding:.7rem .85rem .6rem; font-size:.95rem; }
.gitter--voll .k__panel{ padding:.9rem 1rem 1rem; gap:.35rem; }
.gitter--voll .k[style*="--r:2"] .k__panel strong{ font-size:.9rem; }
.gitter--voll .k__panel strong{ font-size:.92rem; line-height:1.32; }
.gitter--voll .k__rest{ font-size:.82rem; line-height:1.45; -webkit-line-clamp:2; }
.gitter--voll .k__mehr{ font-size:.78rem; }
/* sehr flache Kacheln: Text knapper halten */
.gitter--voll .k[style*="--c:6"][style*="--r:2"] .k__rest{ display:none; }
.gitter--voll .k[style*="--r:3"] .k__panel strong{ font-size:.98rem; }
.gitter--voll .k[style*="--c:4"] .k__rest{ display:none; }

@media (max-width:1100px){

}
@media (max-width:700px){
  .gitter--voll{ --sp:6px; }
  .gitter--voll .k__rest{ display:none; }
}

/* Text auf jedem Bildgrund lesbar halten */
.v-a .k__panel strong, .v-a .k__rest{ text-shadow:0 1px 3px rgba(0,0,0,.55), 0 0 14px rgba(0,0,0,.35); }
.v-a .k__titel{ text-shadow:0 1px 4px rgba(0,0,0,.6); }
.v-a .k__mehr{ text-shadow:0 1px 2px rgba(0,0,0,.5); }
/* Vollbreit: erster Buchstabe des Namens bleibt auch bei sehr hellen Bildern lesbar */
.gitter--voll .k__titel{ background:linear-gradient(180deg, transparent, rgba(20,24,22,.78)); }

/* ══ Mosaik: Erklärtexte vollständig zeigen ═══════════════════════════════
   Vorher blenden zwei Regeln den Erklärtext auf bestimmten Kachelgrößen
   komplett aus (--c:4 und --c:6/--r:2) und kürzen ihn sonst auf 2 Zeilen
   mit Auslassungspunkten. Gemessen (Chromium, 1560 px, ohne Kürzung):
   Kachelhöhe 270-409 px, Panelinhalt 84-163 px → in ALLEN 15 Kacheln
   mindestens 82 px Luft. Die Kürzung war also nicht nötig und hat Text
   verschluckt, der im Markup steht. Die Originalregeln bleiben erhalten,
   werden hier aber aufgehoben — zum Zurücknehmen diesen Block löschen. */
.gitter--voll .k__rest,
.gitter--voll .k[style*="--c:4"] .k__rest,
.gitter--voll .k[style*="--c:6"][style*="--r:2"] .k__rest{
  display: block;
  -webkit-line-clamp: none;
  line-clamp: none;
  overflow: visible;
}

/* ══ Hero auf dem Originalbild (headline_praxis.jpg) ══════════════════════
   Das Originalbild zeigt den Empfang: hell, freundlich, viel Weiß und
   Holz. Weiße Schrift wäre darauf nicht lesbar — das Original setzt
   deshalb dunkle Schrift (rgba(51,51,51,.93)). Umgesetzt mit einem weichen
   Lichtschleier, der hinter der Schrift trägt und das Foto an den Rändern
   stehen lässt. Stärke gemessen (Chromium, 1560 px): Headline 10,2:1, Rand der
   Umriss-Knöpfe 3,2:1 (Grenze für Bedienoberflächen 3:1). Eine leichtere
   Variante kam auf 2,7:1 und ließ die Knopfumrisse verschwinden.
   Im Dunkelmodus bleibt die dunkle Behandlung mit heller
   Schrift — sonst würde eine helle Fläche aus dem dunklen Layout brechen. */
.hero-voll{ background:var(--bg); }
.hero-voll__schleier{
  background:
    radial-gradient(ellipse 76% 60% at 50% 47%, rgba(var(--bg-rgb),.84), rgba(var(--bg-rgb),.55) 56%, rgba(var(--bg-rgb),.04) 100%),
    linear-gradient(180deg, rgba(var(--bg-rgb),.34) 0%, rgba(var(--bg-rgb),.06) 42%, rgba(var(--bg-rgb),.5) 100%);
}
.hero-voll h1{ color:var(--text); text-shadow:0 1px 18px rgba(var(--bg-rgb),.85); }
.hero-voll__sub{ color:var(--text); text-shadow:0 1px 14px rgba(var(--bg-rgb),.9); }
.hero-voll__nav{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:2rem; }

html[data-theme="dark"] .hero-voll__schleier{
  background:
    radial-gradient(ellipse 76% 60% at 50% 47%, rgba(var(--bg-rgb),.88), rgba(var(--bg-rgb),.66) 56%, rgba(var(--bg-rgb),.2) 100%),
    linear-gradient(180deg, rgba(var(--bg-rgb),.45) 0%, rgba(var(--bg-rgb),.25) 45%, rgba(var(--bg-rgb),.62) 100%);
}
html[data-theme="dark"] .hero-voll h1,
html[data-theme="dark"] .hero-voll__sub{ color:var(--text); text-shadow:0 2px 18px rgba(0,0,0,.5); }

/* ══ Willkommen: Text · Gruppenfoto — zwei Spalten ab Desktop ═══════════
   (Dreispaltig mit Aktuelles wurde verworfen: zu viel Leerraum. Aktuelles
   sitzt jetzt als eigene kompakte Leiste unter diesem Bereich.) */
.willkommen{ display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(1.5rem,2.6vw,2.5rem); align-items:start; }
.willkommen__text{ max-width:none; margin:0; }
.willkommen__text p{ font-size:.97rem; line-height:1.6; }

/* Gruppenfoto — Querformat, damit nach dem Shooting nur src getauscht wird */
.willkommen__gruppe{ margin:0; }
.willkommen__gruppe img{
  width:100%; height:auto; display:block;
  /* 4:3 statt 16:9 — füllt die Spalte besser. 4:5 wurde geprüft und
     schneidet die rechte Person an; 4:3 lässt allen Platz und bleibt
     für ein künftiges Querformat-Gruppenfoto sicher. */
  aspect-ratio:4/3; object-fit:cover; object-position:center 25%;
  border-radius:var(--r-l);
}
.willkommen__gruppe figcaption{
  margin-top:.7rem; color:var(--muted); font-size:.8rem; line-height:1.45;
}


/* Sonderhinweis (Praxisferien / wichtige Mitteilung) — im HTML auskommentiert.
   Zum Einschalten den Kommentar entfernen; die Gestaltung steht bereit. */
.akt__hinweis{ padding-top:22px; }
.hinweis{ margin:0; padding:13px 15px; border-radius:12px;
  border:1px solid var(--brand); border-left-width:4px; background:var(--brand-light); }
.hinweis__marke{ display:block; margin-bottom:.3rem; font-size:.68rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--brand-deep); }
.hinweis p{ margin:0; font-size:.86rem; line-height:1.5; color:var(--text); }
.hinweis a{ color:var(--brand-deep); white-space:nowrap; }


/* ══ Aktuelles-Leiste ════════════════════════════════════════════════════
   Drei Beitraege mit Minithumbnail, rechts ein farbiger Knopf zum Blog.
   Eine Zeile ab Desktop. */
.band--akt{ padding:0; background:var(--surface); border-block:1px solid var(--border); }
/* padding-block statt padding:22px 0 — sonst werden die seitlichen 21,5px
   der .wrap-Klasse auf 0 gesetzt und die Leiste klebt am Bildschirmrand.
   Gemessen: .akt padding war "22px 0px 22px 0px", Label bei x=0 statt x=21,5. */
.akt{ display:flex; align-items:center; gap:clamp(.8rem,1.7vw,1.5rem); padding-block:22px; }
.akt__l{ flex:0 0 auto; margin:0; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; font-weight:700; color:var(--muted); }
.akt__liste{ list-style:none; margin:0; padding:0; flex:1 1 auto; min-width:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.akt__k{ display:flex; align-items:center; gap:11px; padding:8px 11px;
  border:1px solid var(--border); border-radius:12px; background:var(--bg);
  text-decoration:none; color:var(--text);
  transition:border-color .18s, transform .18s, box-shadow .18s; }
.akt__k:hover, .akt__k:focus-visible{ border-color:var(--brand);
  transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.10); }
.akt__bild{ flex:0 0 auto; width:64px; height:48px; object-fit:cover;
  border-radius:8px; background:var(--brand-light); }
.akt__t{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.akt__t i{ font-style:normal; font-size:.63rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--brand-deep); }
.akt__t b{ font-family:var(--f-head); font-weight:700; font-size:.86rem; line-height:1.26; }
.akt__mehr{ flex:0 0 auto; }

@media (max-width:1100px){
  .akt{ flex-wrap:wrap; }
  .akt__liste{ grid-template-columns:1fr 1fr; flex:1 1 100%; order:2; }
  .akt__mehr{ order:3; }
  .akt__l{ order:1; }
}
@media (max-width:700px){
  .akt{ flex-direction:column; align-items:stretch; gap:12px; }
  .akt__liste{ grid-template-columns:1fr; }
  .akt__mehr{ align-self:flex-start; }
  .willkommen{ grid-template-columns:1fr; gap:1.6rem; }
}

/* ══ Ärzteteam-Leiste, kompakt — zwischen Hero und Willkommen (2026-09-18) ══
   Vier Karten, ganze Karte klickbar, Ziel praxis-team.html#<anker>.
   Desktop 4 nebeneinander, Mobil 2x2 (Viereck-Raster).
   Token-Namen geprüft: --surface --border --brand --brand-light --brand-deep --muted. */

.band--aerzte{ padding:0; background:var(--surface); border-bottom:1px solid var(--border); }
/* padding:0 übersteuert die globale .band-Regel (clamp 3.5-6rem = bis 96px Luft).
   Die Leiste soll kompakt am Hero kleben; Abstände macht sie selbst. */
.aerzte-l{ margin:0; padding:34px 0 12px; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; font-weight:700; color:var(--muted); }

.ak{ list-style:none; margin:0; padding:0 0 26px;
  /* minmax(0,1fr) statt 1fr: sonst kann die Spalte nicht unter die
     Inhaltsbreite schrumpfen und die Leiste läuft auf 320px über. */
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }

.ak__k{ display:flex; align-items:center; gap:10px;
  padding:10px 13px; border:1px solid var(--border); border-radius:12px;
  background:var(--bg); color:var(--text);
  transition:border-color .18s, transform .18s, box-shadow .18s; }
/* Zwei Linkziele je Karte — deshalb kein <a> im <a>:
   .ak__profil führt zum Steckbrief, .ak__ico nach außen. */
.ak__profil{ display:flex; align-items:center; gap:13px; flex:1 1 auto;
  min-width:0; text-decoration:none; color:inherit; }
.ak__soz{ display:flex; align-items:center; gap:4px; flex:0 0 auto; }
.ak__ico{ display:grid; place-items:center; width:30px; height:30px;
  border-radius:8px; text-decoration:none; transition:background .18s; }
.ak__ico img{ width:17px; height:17px; display:block; }
.ak__ico:hover, .ak__ico:focus-visible{ background:var(--brand-light); }
.ak__k:hover, .ak__k:focus-visible{ border-color:var(--brand);
  transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.10); }

.ak__bild{ flex:0 0 auto; width:52px; height:52px; border-radius:50%;
  object-fit:cover; object-position:center 24%; background:var(--brand-light); }
.ak__bild--offen{ display:grid; place-items:center; font-weight:700; font-size:1.2rem;
  color:var(--brand-deep); border:1.5px dashed var(--brand); background:var(--brand-light); }

.ak__t{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.ak__t b{ font-family:var(--f-head); font-weight:700; font-size:1.02rem; line-height:1.24; }
.ak__t i{ font-style:normal; font-size:.79rem; line-height:1.3; color:var(--muted); }


/* Vier Karten brauchen mit Porträt, Name, Funktion und Zeichen rund 1220px.
   Darunter bricht sonst ein Name um und die Funktionszeilen stehen ungleich. */
@media (max-width:1240px){
  .ak{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* Mobil: 2x2-Raster, Karten hochkant — alle vier auf einen Blick */
@media (max-width:700px){
  .ak{ gap:10px; padding-bottom:20px; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ak__k{ flex-direction:column; text-align:center; gap:9px; padding:15px 10px 14px; }
  /* .ak__profil behält sonst die Zeilenausrichtung und das Porträt
     bliebe links neben dem Namen — hier hochkant wie freigegeben. */
  .ak__profil{ align-self:stretch; align-items:center; flex-direction:column; gap:9px; }
  .ak__bild{ width:62px; height:62px; }
  .ak__t{ align-items:center; }
  .ak__t b{ font-size:.96rem; }
  .ak__t i{ font-size:.74rem; }
}

/* Sehr schmale Geräte (320px): lange Namen brechen um. Feste zweizeilige
   Höhe, damit die Funktionszeilen aller vier Karten trotzdem bündig stehen. */
@media (max-width:380px){
  .ak__t b{ font-size:.9rem; min-height:2.5em;
    display:flex; align-items:center; justify-content:center; }
}

/* ══ Kopfbereich: drei Abstandsfehler behoben (2026-09-18) ════════════════
   Alle drei sind nachgemessen, nicht geschätzt. */

/* 1. Kontaktleiste mobil: gap:1.6rem (25,6px) wirkte auch ZWISCHEN den
      umbrechenden Zeilen — Leiste war 93px hoch statt ~70px.
      Spaltenabstand bleibt groß, Zeilenabstand wird klein. */
@media (max-width:900px){
  .topbar__facts{ column-gap:1.1rem; row-gap:.05rem; }
  .topbar__in{ min-height:0; padding-block:.55rem; }
}

/* 2. Navigationskopf mobil: die Basisregel .nav__in{min-height:82px} steht
      in dieser Datei NACH @media(max-width:620px) und gewann deshalb —
      der Kopf war mobil 82px hoch, während --nav-h auf 64px stand. --nav-h
      positioniert das Burger-Menü, dessen Inhalt dadurch 18px zu hoch
      begann (unter dem Kopf). Hier gilt wieder --nav-h. */
@media (max-width:620px){
  .nav__in{ min-height:var(--nav-h); }
}

/* 3. Sprungmarken landeten unter dem klebenden Kopf (kein Offset gesetzt).
      Betrifft die Heroknöpfe (#termin, #leistungen, #team) und alle
      Anker im Footer. */
html{ scroll-padding-top:calc(var(--nav-h) + 14px); }

/* 4. Navigationskopf 1040-1140px: Logo (247) + Menü (572) + Termin-Knopf (199)
      brauchen mit Abständen ~1122px. Darunter brachen die Menübeschriftungen
      auf zwei Zeilen und der Kopf wuchs von 83 auf 88px. Menü wechselt jetzt
      früher ins Burger-Menü; die Beschriftungen brechen nie um. */
@media (max-width:1140px){
  .nav__menu{ display:none; }
  .burger{ display:grid; }
}
.nav__menu a{ white-space:nowrap; }


/* ============================================================
   BURGER-MENÜ — Panel unter der Menüleiste
   FALLE (alt): Das Skript schaltet seit jeher .is-open auf #nav, eine
   passende Regel gab es aber nie. Unter 1140 px wird .nav__menu ausgeblendet
   — der Burger öffnete also ins Leere (im Browser nachgemessen: nach dem
   Klick display:none, Kasten 0 x 0). Ebenso zeigte aria-controls auf
   #drawer, ein Element, das es nie gab.
   ============================================================ */
@media (max-width:1140px){
  .nav.is-open{ box-shadow:0 18px 34px -18px rgba(29,29,27,.32); }
  .nav.is-open .nav__menu{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; left:0; right:0; top:100%;
    background:var(--surface);
    border-top:1px solid var(--border); border-bottom:1px solid var(--border);
    padding:.45rem 0 .65rem; z-index:120;
  }
  .nav.is-open .nav__menu a{
    display:block; padding:.85rem 1.15rem; border-radius:0; font-size:.95rem;
  }
  .nav.is-open .nav__menu a::after{ display:none; }
  .nav.is-open .nav__menu a[aria-current="page"]{ color:var(--brand-deep); }
}
html[data-theme="dark"] .nav.is-open,
html:not([data-theme="light"]) .nav.is-open{ box-shadow:0 18px 34px -18px rgba(0,0,0,.7); }
html[data-theme="dark"] .nav.is-open .nav__menu,
html:not([data-theme="light"]) .nav.is-open .nav__menu{ background:var(--surface); }

/* Telefon: die Kontaktleiste soll einzeilig bleiben (war 86 px = zwei Zeilen) */
@media (max-width:620px){
  .topbar{ font-size:.78rem; }
  .topbar__in{ column-gap:.8rem; padding-block:.4rem; }
  .topbar__social{ display:none; }
  .topbar__facts svg{ width:13px; height:13px; }
}


/* ============================================================
   AKZENTKNÖPFE IM DUNKELMODUS
   Im Dunkelmodus ist --brand die Akzentflaeche (helle Schrift darauf), --brand-soft
   bleibt Schrift und kleiner Akzent. Am Dateiende, damit keine frueher
   notierte Regel dazwischenkommt.
   ============================================================ */
html[data-theme="dark"] .btn--marke,
html:not([data-theme="light"]) .btn--marke{ background:var(--brand); color:var(--brand-light); }
html[data-theme="dark"] .btn--marke:hover,
html:not([data-theme="light"]) .btn--marke:hover{ background:var(--brand-dark); color:var(--brand-light); }

/* Der Kopfzeilen-Knopf holte seinen Akzent ueber eine zweite Variable (--accent),
   die im Dunkelmodus var(--brand-soft) ist. Damit die dokumentierte Regel gilt - dunkle
   Akzentflaeche --brand mit heller Schrift - wird sie hier ausdruecklich gesetzt. */
html[data-theme="dark"] .nav__cta .btn--marke,
html:not([data-theme="light"]) .nav__cta .btn--marke{
  background:var(--brand) !important; color:var(--brand-light) !important;
}
html[data-theme="dark"] .nav__cta .btn--marke:hover,
html:not([data-theme="light"]) .nav__cta .btn--marke:hover{
  background:var(--brand-dark) !important; color:var(--brand-light) !important;
}

/* ═══════════════════════════════════════════════════════════════
   OPTIONALE BAUSTEINE — nur aktiv, wenn die Daten sie füllen
   ═══════════════════════════════════════════════════════════════ */

/* Markenzeichen im Hero — für Projekte OHNE brauchbares Herofoto.
   Groß und angeschnitten: das prägende Element bleibt vollständig sichtbar,
   nur die Gegenseite läuft aus der Fläche. Nie spiegeln.
   Der Hero bleibt Text auf ruhiger Fläche statt Foto mit Schleier. */
.hero-voll__zeichen{
  position:absolute; z-index:0; pointer-events:none;
  top:6%; height:88%; width:auto;
  right:clamp(-28px, 4vw, 96px);
}
@media (max-width:900px){
  .hero-voll__zeichen{ top:auto; bottom:0; height:74%; right:-14px; opacity:.85; }
}

/* Text-Wortmarke neben der Bildmarke — für Praxisnamen ohne Wortmarken-Datei */
.nav__logo{ display:flex; align-items:center; gap:.7rem; }
.marke__wort{ display:flex; flex-direction:column; line-height:1.16; }
.marke__wort b{ font-family:var(--f-head); font-weight:700; font-size:1.06rem; color:var(--text); }
.marke__wort i{ font-style:normal; font-size:.7rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); margin-top:.15rem; }
.marke__wort i:empty{ display:none; }

/* Text-Wortmarke in der Fußzeile (dunkler Grund -> helle Schrift) */
.fuss__wort{ display:block; margin:0 0 1rem; }
.fuss__wort b{ display:block; font-family:var(--f-head); font-weight:700;
  font-size:1.18rem; color:var(--white); line-height:1.2; }
.fuss__wort i{ display:block; font-style:normal; font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(255,255,255,.66); margin-top:.3rem; }
.fuss__wort i:empty{ display:none; }
@media (max-width:620px){
  .marke__wort b{ font-size:.92rem; }
  .marke__wort i{ display:none; }
}

/* Leistungs-Kacheln OHNE Foto: keine Bildfläche, also selbst Höhe geben.
   Fläche in der Akzentfarbe des Projekts, dunkle Schrift — sonst stünde
   weiße Schrift auf hellem Grund. Panel und Bild-Abzeichen entfallen. */
.gitter--voll .k.ohne-bild{
  background:var(--brand-light); border:1px solid var(--border);
  min-height:150px; padding:1.05rem 1.1rem 1.15rem;
  display:flex; flex-direction:column; justify-content:flex-end; gap:.35rem;
}
.gitter--voll .k.ohne-bild .k__nr{
  position:static; align-self:flex-start; color:var(--brand-deep);
  background:transparent; padding:0;
}
.gitter--voll .k.ohne-bild .k__titel{
  position:static; padding:0; background:none; color:var(--text);
  text-shadow:none; font-size:.98rem;
}
.gitter--voll .k.ohne-bild .k__panel{
  position:static; transform:none; padding:0; background:none; color:var(--muted);
}
.gitter--voll .k.ohne-bild .k__panel strong{ color:var(--brand-deep); font-size:.86rem; }
.gitter--voll .k.ohne-bild .k__rest{ color:var(--muted); font-size:.82rem; }
.gitter--voll .k.ohne-bild .k__mehr{ color:var(--brand-deep); }
.gitter--voll .k.ohne-bild:hover{ background:var(--brand-light); border-color:var(--brand); }
.gitter--voll .k.ohne-bild:hover .k__titel{ opacity:1; }
.gitter--voll .k.ohne-bild[style*="--c:6"]{ min-height:170px; }

/* ═══════════════════════════════════════════════════════════════
   LEISTUNGEN ALS LISTE — für Projekte OHNE Bildmaterial zu den
   Leistungen. Ruhiger als ein Kachelmosaik: die Schwerpunkte als
   große Wörter, die Verfahren als zweispaltige Liste mit Haarlinien.
   Keine Kästen, keine Bilder, kein Rahmen.
   ═══════════════════════════════════════════════════════════════ */
.leist-schwer{
  list-style:none; margin:0 auto clamp(2.4rem,5vw,3.8rem); padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  gap:.5rem .2rem; max-width:78ch;
}
.leist-schwer li{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.3rem,2.5vw,1.95rem); line-height:1.22; color:var(--text);
  letter-spacing:-.015em;
}
.leist-schwer li + li::before{
  content:"·"; color:var(--brand); font-weight:400; margin:0 .75rem 0 .55rem;
}

.leist-liste{
  list-style:none; margin:0 auto; padding:0; max-width:var(--breit,1560px);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(2rem,5vw,4.5rem);
}
.leist-liste li{
  display:flex; align-items:baseline; gap:.95rem;
  padding:.82rem 0; border-top:1px solid var(--border);
}
.leist-liste li:last-child{ border-bottom:1px solid var(--border); }
/* Auch die vorletzte Zeile abschließen: bei zwei Spalten ist das die linke,
   die sonst ohne Linie endet, während die rechte eine hat. */
@media (min-width:821px){
  .leist-liste li:nth-last-child(2){ border-bottom:1px solid var(--border); }
}
.leist-liste .nr{
  flex:none; font-family:var(--f-head); font-weight:700; font-size:.68rem;
  letter-spacing:.09em; color:var(--muted); font-variant-numeric:tabular-nums;
}
.leist-liste b{
  font-family:var(--f-head); font-weight:600; font-size:1.02rem;
  line-height:1.34; color:var(--text);
}
@media (max-width:820px){
  .leist-liste{ grid-template-columns:1fr; column-gap:0; }
  .leist-liste li{ padding:.72rem 0; }
  .leist-schwer{ gap:.35rem 0; }
  .leist-schwer li + li::before{ margin:0 .5rem 0 .35rem; }
}

/* ═══════════════════════════════════════════════════════════════
   SPRECHZEITEN- UND AKUTBAND — helle Alternative zum Zitatband.
   Zwei Spalten: links die Zeiten als Liste, rechts die Akut-
   sprechstunde mit großer Uhrzeit auf ruhiger Fläche.
   ═══════════════════════════════════════════════════════════════ */
.sprech-band{ background:var(--warm); border-block:1px solid var(--border); }
.sprech{ display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.sprech h2{ font-family:var(--f-head); font-weight:700;
  font-size:clamp(1.5rem,2.8vw,2.05rem); margin:0 0 .4rem; color:var(--text); }
.zeiten--gross{ margin-top:1.4rem; }
.zeiten--gross dt{ font-size:.98rem; }
.zeiten--gross dd{ font-family:var(--f-head); font-weight:700; font-size:.98rem;
  color:var(--text); font-variant-numeric:tabular-nums; }
.sprech__hinweis{ margin:1.1rem 0 0; font-size:.9rem; color:var(--muted); }

.sprech__akut{ background:var(--surface); border:1px solid var(--border);
  border-left:5px solid var(--brand); padding:clamp(1.5rem,3vw,2.3rem);
  box-shadow:var(--shadow); }
.sprech__akut .eyebrow{ margin-bottom:.35rem; }
.sprech__zeit{ font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.9rem,4vw,2.9rem); line-height:1.06; letter-spacing:-.02em;
  color:var(--text); margin:.15rem 0 .9rem; }
.sprech__text{ margin:0 0 1.4rem; color:var(--muted); }
.sprech__bild{ display:block; width:100%; height:auto; border-radius:var(--r-m);
  margin-bottom:1.2rem; }
@media (max-width:900px){
  .sprech{ grid-template-columns:1fr; gap:2rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PROJEKT-FEINSCHLIFF — Praxis Dr. med. Andreas Krämer (025)
   ══════════════════════════════════════════════════════════════════════════ */

/* 1 · Outfit ist eine Grotesk. Die Display-Rollen der Vorlage stehen auf
       Gewicht 400 — bei einer Serife richtig, hier zu dünn. */
.hero-voll h1{ font-weight:600; letter-spacing:-.022em; }
.cta-box h2{ font-weight:600; letter-spacing:-.018em; }
.willkommen__text h2, .band__kopf h2, .sprech h2{ font-weight:600; letter-spacing:-.015em; }
.willkommen__sign{ font-family:var(--f-body); font-weight:600; font-size:1.05rem; }
.leist-schwer li{ font-weight:600; }

/* 2 · Porträts: der Kopf muss im quadratischen Ausschnitt sitzen. Bei
       Brustbildern liegt das Gesicht im oberen Drittel, nicht in der Mitte. */
.team-sechs img{ object-position:center 18%; }
.ak__bild{ object-position:center 20%; }

/* 3 · Fünf Mitarbeitende — die Vorlage ist auf vier Karten und sechs
       Teamspalten ausgelegt. */
@media (min-width:1241px){
  .ak{ grid-template-columns:repeat(5,minmax(0,1fr)); }
  .ak__t b{ font-size:.95rem; }
  .ak__t i{ font-size:.74rem; }
}
@media (min-width:1301px){
  .team-sechs{ grid-template-columns:repeat(5,minmax(0,1fr)); }
}
@media (min-width:761px) and (max-width:1300px){
  .team-sechs{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:1.2rem .9rem; }
  .team-sechs strong{ font-size:.92rem; }
  .team-sechs span{ font-size:.79rem; }
}

/* 4 · Kein Herofoto (das breiteste Original misst 445 px). Das Markenzeichen
       steht groß im Hero; auf schmalen Geräten rückt es hinter den Text. */
@media (max-width:900px){
  .hero-voll__zeichen{ height:46%; opacity:.26; right:-10px; bottom:-6%; }
  .hero-voll__in{ padding-bottom:clamp(7rem,22vw,9rem); }
}

/* 5 · Die Bildmarke ist hochkant (75 × 170): der Kreis sitzt oben, darunter
       läuft ein dünner Halm aus. Als kleiner Aufsatz bleibt vom Zeichen nur
       ein Punkt — an der Team-Überschrift übernimmt deshalb eine Akzentlinie
       die Markierung, und die Fußzeile führt sie in voller Höhe. */
.band__kopf::before{ content:""; display:block; width:64px; height:3px;
  background:var(--brand); border-radius:2px; margin:0 auto 1.5rem; }
.team-sechs .leer .marken-ico-bild{ height:96px; }
.fuss__marke img{ height:96px; margin-bottom:.9rem; }

/* 6 · Fotos im Mosaik: auch hier sitzt der Kopf oben. */
.mosaik img{ object-position:center 30%; }

/* 7 · CTA-Band ohne Foto: ruhige graue Fläche statt Schleier über Nichts. */
.cta-band::before, .cta-band::after{ background:none; }

/* 8 · Sechs Platzhalterkacheln in voller Breite wären mobil eine sehr lange
       Strecke für Motive, die es noch nicht gibt. Zwei Spalten halbieren sie. */
@media (max-width:760px){
  .mosaik{ grid-template-columns:repeat(2,1fr); grid-auto-rows:auto; }
  .mosaik .b2{ grid-column:span 1; }
  .mosaik .ph{ min-height:150px; padding:.85rem .7rem; }
  .mosaik .ph b{ font-size:.84rem; }
  .mosaik .ph span{ font-size:.64rem; }
  .mosaik .ph svg{ width:24px; height:24px; }
}

/* 9 · Auf der grauen Fußzeile trägt die Akzentfarbe keinen Kontrast (2,5:1) —
       „Route planen“ wird hell und unterstrichen statt grün. */
.fuss__route{ color:#FFFFFF; text-decoration:underline; text-underline-offset:3px; }
.fuss a:hover .fuss__route{ color:#FFFFFF; }

/* 10 · Entwurfskennzeichnung. Fällt beim Go-Live mit einer Zeile weg. */
.fuss__unten{ font-size:.82rem; }
.fuss__unten span:first-child{ color:rgba(255,255,255,.72); }


/* ══════════════════════════════════════════════════════════════════════════
   Kompaktfassung — 23.09.2026
   Die vorhandenen Fotos liegen nur klein vor (210–445 px breit). Sie werden
   nicht mehr über ihre eigene Auflösung hinaus vergrößert: sie wirken dadurch
   schärfer, und die Seite wird kürzer. Die Mobilfassung bleibt unverändert.
   ══════════════════════════════════════════════════════════════════════════ */
/* Nur die Bänder mit eigenem Abstand — .band--akt und .band--aerzte haben
   bewusst padding:0 und dürfen nicht überschrieben werden. */
.band:not(.band--akt):not(.band--aerzte):not(.leist-mosaik){ padding:clamp(2.6rem,6vw,4.6rem) 0; }
/* .leist-mosaik behält unten 0 Abstand — nur oben straffen. */
.leist-mosaik{ padding-top:clamp(2.6rem,6vw,4.6rem); }

@media (min-width:761px){
  .hero-voll__in{ min-height:clamp(300px,36vw,520px); }
  .willkommen__gruppe img{ max-width:430px; }              /* Vorlage 445 px */
  .sprech__bild{ max-width:300px; }                        /* Vorlage 210 px */
  .team-sechs img{ max-width:180px; margin-inline:auto; }   /* Vorlagen 200–223 px */
  .mosaik{ grid-auto-rows:170px; }
}

/* ── Rechtstexte als Popup ────────────────────────────────────────────── */
dialog.recht{ width:min(680px,92vw); max-width:680px; max-height:86vh; padding:0; border:0;
  border-radius:var(--r-l); background:var(--surface); color:var(--text);
  box-shadow:0 30px 80px -24px rgba(20,22,18,.5); }
dialog.recht::backdrop{ background:rgba(22,24,20,.55); }
dialog.recht .recht__in{ position:relative; max-height:86vh; overflow-y:auto;
  padding:clamp(1.5rem,4vw,2.4rem); }
dialog.recht .recht__zu{ position:absolute; top:.7rem; right:.8rem; width:38px; height:38px;
  display:grid; place-items:center; border:1px solid var(--border); border-radius:50%;
  background:var(--surface); color:var(--text); font-size:1.35rem; line-height:1; cursor:pointer; }
dialog.recht .recht__zu:hover{ border-color:var(--brand); color:var(--brand-deep); }
dialog.recht .recht__marke{ font-family:var(--f-head); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--brand-deep); margin:0 0 .3rem; }
dialog.recht h2{ font-family:var(--f-display); font-size:clamp(1.5rem,3vw,2rem);
  margin:0 0 1rem; color:var(--text); }
dialog.recht h3{ font-family:var(--f-head); font-size:1rem; margin:1.5rem 0 .4rem;
  color:var(--brand-deep); }
dialog.recht p{ font-size:.93rem; line-height:1.68; margin:.4rem 0; }
dialog.recht .recht__anschrift{ line-height:1.6; }
dialog.recht a{ color:var(--brand-deep); }
dialog.recht .recht__offen{ background:var(--warm); border-left:3px solid var(--brand);
  padding:.6rem .8rem; border-radius:0 6px 6px 0; font-size:.88rem; }
dialog.recht .recht__herkunft{ margin-top:1.6rem; padding-top:.9rem; border-top:1px solid var(--border);
  font-size:.82rem; color:var(--muted); }