/* ============================================================
   ZAHNWERK HENNEF — Design-Tokens
   ============================================================ */
:root{
  /* Farben — die Rollen des CI (Stand 25.09.2026) */
  --taupe:       #807571;   /* Akzent/Flaeche hell — Weiss darauf 4,47:1 */
  --taupe-deep:  #5A5250;   /* Schrift auf hellem Grund — 7,62:1 */
  --taupe-light: #F5F0EF;   /* weiche Flaeche */
  --grau:        #6B6560;   /* akzentuierte Texte — 5,74:1 */
  --grau-hell:   #E8E5E1;   /* neutrale Flaeche */
  --silber:      #b9c0c8;   /* Metall: Kanten auf Dunkel, Rahmen */
  --silber-hell: #C8CDD4;
  --silber-rand: #A9B1BB;
  --silber-tief: #98A2AE;
  --on-taupe:    #FFFFFF;   /* Schrift auf der Taupeflaeche */
  --warm:        #FAF4EF;
  --text:        #1D1D1B;
  --white:       #FFFFFF;

  /* Typografie */
  --f-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --f-head:    'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif;
  --f-body:    'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Maße */
  --wrap: 1200px;
  --pad:  clamp(1.25rem, 5vw, 3rem);
  --r-s:  4px;
  --r-m:  10px;
  --r-l:  16px;

  /* Höhen für sticky-Offsets */
  --nav-h: 82px;

  /* Semantische Ebene — hier greift der Dunkelmodus */
  --bg:            #FAF4EF;   /* Seitenhintergrund */
  --surface:       #FFFFFF;   /* Karten, Panels, Kopfzeile */
  --accent:        #5A5250;   /* Akzent für Text auf hellem Grund */
  --muted:         #6B6560;   /* gedämpfter Text */
  --border:        #F5F0EF;   /* feine Trennlinien */
  --border-stark:  #807571;   /* kräftige Rahmen */
  --shadow:        6px 6px 14px rgba(127,116,113,.13), -6px -6px 14px rgba(255,255,255,.85);
}

*,*::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(--taupe-deep);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--taupe); color:#FFFFFF;
  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:#807571;color:#fff; color:var(--white); }
.btn--solid:hover{ background:#63490A; }

.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(--taupe-light);
  color:var(--accent);
  font-size:.9rem;
  border-bottom:1px solid rgba(128,117,113,.16);
}
.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(128,117,113,.16); }
.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: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;
}
  /* Menue: die Klammern des Logos — beim Ueberfahren und auf der aktiven Seite.
     Sie ersetzen den frueheren Unterstrich: beide tragen dieselbe Aussage,
     die Klammern sind aber das Zeichen der Marke. Die Farbe folgt dem Text
     (currentColor), deshalb stimmt sie im Hell- und Dunkelmodus von selbst. */
  .nav__menu a::before, .nav__menu a::after{
    content:""; position:absolute; top:50%; width:.3em; height:1.4em;
    border:2.5px solid currentColor; opacity:0; pointer-events:none;
    transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .16s linear;
  }
  .nav__menu a::before{ left:.2rem; border-right:0; transform:translate(9px,-50%); }
  .nav__menu a::after { right:.2rem; border-left:0; transform:translate(-9px,-50%); }
  .nav__menu a:hover::before, .nav__menu a:focus-visible::before, .nav__menu a[aria-current="page"]::before,
  .nav__menu a:hover::after,  .nav__menu a:focus-visible::after,  .nav__menu a[aria-current="page"]::after{
    opacity:1; transform:translate(0,-50%);
  }
.nav__menu a:hover::after,

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

/* Randlos (22.09.2026): Im Kopfbereich tragen "Termin" und der Hell/Dunkel-
   Schalter einen Rahmen, der Burger hatte einen 2 px starken — drei
   verschiedene Designs in einer Reihe. Jetzt zeichnet der Burger nur seine
   drei Striche; die 46-px-Box bleibt als Trefferflaeche erhalten.
   Der Abstand zu den Nachbarelementen kommt in der 1080-px-Regel dazu. */
.burger{
  display:none; width:46px; height:46px; padding:0;
  background:transparent; border:0; border-radius:0; 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; }
  /* 2.5rem = 40 px Abstand zum Hell/Dunkel-Schalter — der Burger steht sonst
     mit 6 px direkt an der Knopfgruppe. */
  .burger{ display:grid; margin-left:2.1rem; }
}
@media (max-width:620px){
  /* FALLE (alt): Die Regel zielte auf .btn--solid, der Kopfzeilen-Knopf heißt aber
     .btn--mint (heute .btn--voll) — 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:24px; }
  .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(--paper);
  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(--taupe); 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(--taupe);
  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(--taupe); }
.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(--taupe-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(250,244,239,.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(--taupe); }
.footer__claim{ color:rgba(245,240,239,.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(--taupe); }

.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(--taupe); }

.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(250,244,239,.2);
}
.f-hours dt{ color:rgba(245,240,239,.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(--taupe); }

.f-note{ color:rgba(245,240,239,.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(250,244,239,.28); border-radius:50%;
  transition:background-color .2s ease, border-color .2s ease;
}
.f-social a:hover{ background:var(--taupe); border-color:var(--taupe); color:var(--muted); }
.f-social svg{ width:18px; height:18px; }

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


/* ═══════════════════════════════════════════════════════════════
   DUNKELMODUS
   Neumorphism 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"]{
  --bg:            #14110B;
  --surface:       #1E1A13;
  --warm:          #1A1712;
  --taupe:         #6E6459;   /* Flaeche dunkel — Weiss darauf 5,78:1 */
  --taupe-deep:    #C9BEB0;   /* Schrift/Akzent dunkel — 10,29:1 */
  --taupe-light:   #2A2521;
  --grau:          #ADA395;
  --grau-hell:     #2E2A25;
  --silber:        #b9c0c8;   /* die helle Kante auf dunklem Grund */
  --silber-hell:   #C8CDD4;
  --silber-rand:   #A9B1BB;
  --silber-tief:   #98A2AE;
  --on-taupe:      #FFFFFF;

  --text:          #F0EBE3;
  --muted:         #ADA395;
  --accent:        #C9BEB0;   /* Schrift/Akzent dunkel — 10,29:1 */
  --border:        #2C2519;
  --border-stark:  #4E4534;

  /* 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; }

/* Taupe auf Dunkel: Flaechen brauchen mehr Tiefe */
html[data-theme="dark"] .btn--solid{
  background:var(--taupe);           /* im Dunkelmodus #6E6459 als Flaeche */
  color:#FFFFFF;                    /* helle Schrift darauf — 4,7:1 */
}
html[data-theme="dark"] .btn--solid:hover{ background:#7A6F63; }
html[data-theme="dark"] .today__dot.is-open{ background:var(--taupe); }

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"]){    --bg:            #14110B;
    --surface:       #1E1A13;
    --warm:          #1A1712;
    --taupe:         #6E6459;   /* Flaeche dunkel — Weiss darauf 5,78:1 */
    --taupe-deep:    #C9BEB0;   /* Schrift/Akzent dunkel — 10,29:1 */
    --taupe-light:   #2A2521;
    --grau:          #ADA395;
    --grau-hell:     #2E2A25;
    --silber:        #b9c0c8;
    --silber-hell:   #C8CDD4;
    --silber-rand:   #A9B1BB;
    --silber-tief:   #98A2AE;
    --on-taupe:      #FFFFFF;
    --text:          #F0EBE3;
    --muted:         #ADA395;
    --accent:        #C9BEB0;   /* Schrift/Akzent dunkel — 10,29:1 */
    --border:        #2C2519;
    --border-stark:  #4E4534;
    --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(--taupe); color:#FFFFFF; }
}

/* 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(--paper); }
.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(--taupe); 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(--taupe-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(--paper);
}
.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(--taupe-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(--taupe); 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(--taupe); 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(--taupe); }
.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; }
}


/* ═══════════════════════════════════════════════════════════════
   UMBAU NACH DEM ORIGINAL (zahnwerk-hennef.de)
   Breiter, bildstark, mit doppeltem Menü.
   ═══════════════════════════════════════════════════════════════ */

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

/* ── Menü 1: dunkle Kontaktleiste ── */
.topbar{ background:#807571; 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 1.05rem; }
.nav__menu a[aria-current="page"], .nav__menu a:hover{ color:var(--taupe-deep); }
/* Menue-Button: Silberrand auf Taupe + Hovereffekt (Kundenwunsch) */
.btn--taupe {
  background:#807571; color:#fff;
  border:1.5px solid var(--silber);
  box-shadow:0 0 0 3px rgba(168,176,187,.26);
  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--taupe:hover, .btn--taupe:focus-visible {
  background:#fff; color:#6E635E;
  border-color:var(--taupe);
  box-shadow:0 0 0 3px rgba(185,192,200,.34);
  transform:translateY(-1px);
}
.btn--taupe:active { transform:translateY(0); box-shadow:0 0 0 2px rgba(185,192,200,.28); }
html[data-theme="dark"] .btn--taupe { background:#3B3532; color:#F0EBE3; }
html[data-theme="dark"] .btn--taupe:hover, html[data-theme="dark"] .btn--taupe:focus-visible {
  background:#4A423E; color:#fff;
}
.btn--voll{ background:var(--taupe); color:#FFFFFF; border:none; }
.btn--voll:hover{ background:var(--taupe-deep); color:var(--white); }

/* ── Vollbild-Hero ── */
.hero-voll{ position:relative; background:#1D1D1B; 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:#F7F7F7; }
.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(--taupe-deep); }
.band__kopf .lead{ margin-top:1rem; color:var(--muted); }
/* ── Bildmarke: der Zahn aus dem Original-Logo ──
   Der Zahn ist das "w" in [zahn_werk] — Krone und Wurzeln in einem Zeichen.
   Rollen: als ICON einfarbig ueber currentColor (Silhouette liest sich bei jeder
   Groesse als Zahn), als BILDMARKE originalgetreu zweifarbig (img/zahn.svg,
   zahn-weiss.svg, zahn-silber.svg). Zweifarbig klein = kippt optisch zum "W". */
.zahn-ico{ display:block; width:34px; height:34px; color:var(--taupe-deep); }
.band__kopf .zahn-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 die Bildmarke statt eines Fotos */
.leer .zahn-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(--taupe-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(--paper); }
.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(--taupe-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(--taupe-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:#1D1D1B; }
.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:rgba(250,244,239,.88); border-left:4px solid var(--taupe);color:#1E1810; 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(30,24,16,.5); color:#1E1810; }
.zitat-kasten .btn--line:hover{ background:#1E1810; color:var(--silber); border-color:#1E1810; }

/* ── 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:#C1C1C1; border:1px solid var(--border);
}
.team-sechs .leer{ display:flex; align-items:center; justify-content:center; }
.team-sechs .leer svg{ width:34px; height:34px; color:#8E8E8E; }
.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(--taupe-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 — kein Provisorium, sondern das Briefing fuer das
   kommende Fotoshooting. Nummer verbindet Kachel, Motivliste und die Seite
   fotoshooting.html. 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(--taupe-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(--taupe-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(--taupe-deep); }
html[data-theme="dark"] .mosaik .ph{
  background:repeating-linear-gradient(45deg,#2C2519 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(--paper); }
.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(--taupe-deep); }

/* ── CTA im PAM-Stil ── */
/* CTA im Originalton der Kundenseite (#807571, 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:#807571; overflow:hidden; }
.cta-band::before{
  content:""; position:absolute; inset:0;
  background:url(../img/kontakt.jpg) center 38%/cover no-repeat;
}
.cta-band::after{
  content:""; position:absolute; inset:0;
  background:rgba(128,117,113,.75);
}
.cta-band > .wrap{ position:relative; z-index:2; }
html[data-theme="dark"] .cta-band{ background-color:#2A241E; }
html[data-theme="dark"] .cta-band::after{ background:rgba(20,17,11,.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 #FAF4EF 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(--taupe-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(--taupe);
  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(--taupe-light); color:var(--taupe-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(--taupe-deep); }

/* ── Fußzeile im PAM-Stil ── */
.fuss{ background:#807571; 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__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(--taupe); }
/* Wortmarke als SVG statt Textzeile. Das Logo ist weiss auf transparent und
   funktioniert deshalb in beiden Modi — der Footer ist immer dunkel
   (#807571 hell / #363031 dunkel), ein Umschalten ist nicht noetig. */
.fuss__marke{ display:block; margin:0 0 1rem; }
.fuss__marke img{ display:block; height:39px; 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:#FFFFFF; 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:#1A1712; }
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 dem dunklen Akzent (#5A5250).
   Auf dem dunklen Grund sind das 2,2:1 — praktisch unlesbar. Im Dunkelmodus
   übernimmt deshalb --accent (#C9BEB0, 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:#2C2519; }
html[data-theme="dark"] .team-sechs .leer svg{ color:#6B7280; }
/* Dunkelmodus: eigene dunkle Flaeche statt des trueben Akzents; der Knopf braucht
   helle Schrift, sonst stand dunkle Schrift auf dunklem Taupe (unlesbar). */
html[data-theme="dark"] .zitat-kasten{ background:#2A2521; color:#FDF7E6; }
html[data-theme="dark"] .zitat-kasten .btn--line{ border-color:rgba(245,240,239,.5); color:#FDF7E6; }
html[data-theme="dark"] .zitat-kasten .btn--line:hover{ background:var(--taupe); color:#FFFFFF; border-color:var(--taupe); }
html[data-theme="dark"] .zitat-kasten .zitat-kasten__kopf span{ opacity:.85; }
html[data-theme="dark"] .cta-kachel__icon{ background:#211A10; color:var(--taupe); }
html[data-theme="dark"] .fuss{ background:#363031; }
/* Kontaktleiste und Fusszeile tragen dasselbe Band: hell Taupe #807571,
   dunkel Espresso #363031. 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:#363031; }
html[data-theme="dark"] .topbar,
html:not([data-theme="light"]) .topbar{ background:#363031; }
html[data-theme="dark"] .fuss a:hover,
html:not([data-theme="light"]) .fuss a:hover{ 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 Zitatkasten stand ueber die volle Breite
     und deckte das Hintergrundbild bis auf schmale Streifen ab (gemessen:
     y 2600-3140 durchgehend warm (Holzton)). 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(--taupe); }
  /* Im Dunkelmodus ist der Kasten #2A2521 — dann muss auch die Flaeche
     darum diese Farbe haben, sonst entsteht ein greller heller Rand. */
  html[data-theme="dark"] .zitat-band__in{ background:#2A2521; }
  .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:#B9BEBC; }
.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,17,11,.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,17,11,.72)); }
.k:focus-visible{ outline:3px solid var(--taupe); 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(30,24,16,.05), rgba(30,24,16,.92) 24%, #1E1810);
    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(--silber);
    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; }

/* ── Variante B: Überlagerung ── */
.v-b .k__overlay{ position:absolute; z-index:4; inset:0; padding:1.3rem;
    background:linear-gradient(160deg, rgba(128,117,113,.97), rgba(90,82,80,.97));
    color:#FFFFFF; display:flex; flex-direction:column; justify-content:center; gap:.9rem;
    opacity:0; transition:opacity .38s ease; }
.v-b .k:hover .k__overlay, .v-b .k:focus-visible .k__overlay{ opacity:1; }
.v-b .k__lead{ font-family:var(--f-head); font-weight:700; font-size:1.1rem; line-height:1.35; }
.v-b .k__pfeil{ width:38px; height:38px; border-radius:50%; border:2px solid rgba(20,17,11,.55);
    display:inline-flex; align-items:center; justify-content:center; flex:none; }
.v-b .k__pfeil svg{ width:18px; height:18px; }
.v-b .k:hover .k__titel{ opacity:0; transition:opacity .2s; }
.v-b .k:hover img{ transform:scale(1.08); }

/* 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: Woerter wie "Kinderzahnheilkunde" 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; }
}

/* ── Rahmen der Vergleichsseite ── */
.werkstatt{ background:#EDEFEE; min-height:100vh; padding-bottom:4rem; }
.werkstatt__kopf{ background:#fff; border-bottom:1px solid var(--border); padding:1.1rem 0; position:sticky; top:0; z-index:20; }
.werkstatt__kopf .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.werkstatt__kopf h1{ font-family:var(--f-head); font-size:1.05rem; margin:0; font-weight:700; }
.schalter{ display:flex; gap:.4rem; background:#EDEFEE; padding:.28rem; border-radius:8px; }
.schalter button{ font-family:var(--f-head); font-weight:700; font-size:.85rem; padding:.5rem 1rem;
  border:none; background:transparent; color:var(--muted); border-radius:6px; cursor:pointer; }
.schalter button.aktiv{ background:var(--taupe-deep); color:#fff; }
.v-hinweis{ max-width:76ch; margin:1.4rem auto .4rem; padding:0 1.2rem; }
.v-hinweis h2{ font-family:var(--f-head); font-size:1.15rem; margin:0 0 .4rem; }
.v-hinweis p{ margin:0; color:var(--muted); font-size:.94rem; }
[hidden]{ display:none !important; }


/* ═══════════════════════════════════════════════════════════════
   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,17,11,.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(250,244,239,.84), rgba(250,244,239,.55) 56%, rgba(250,244,239,.04) 100%),
    linear-gradient(180deg, rgba(250,244,239,.34) 0%, rgba(250,244,239,.06) 42%, rgba(250,244,239,.5) 100%);
}
.hero-voll h1{ color:var(--text); text-shadow:0 1px 18px rgba(250,244,239,.85); }
.hero-voll__sub{ color:var(--text); text-shadow:0 1px 14px rgba(250,244,239,.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(20,17,11,.88), rgba(20,17,11,.66) 56%, rgba(20,17,11,.2) 100%),
    linear-gradient(180deg, rgba(20,17,11,.45) 0%, rgba(20,17,11,.25) 45%, rgba(20,17,11,.62) 100%);
}
html[data-theme="dark"] .hero-voll h1,
html[data-theme="dark"] .hero-voll__sub{ color:#F0EBE3; 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(--taupe); border-left-width:4px; background:var(--taupe-light); }
.hinweis__marke{ display:block; margin-bottom:.3rem; font-size:.68rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--taupe-deep); }
.hinweis p{ margin:0; font-size:.86rem; line-height:1.5; color:var(--text); }
.hinweis a{ color:var(--taupe-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(--taupe);
  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(--paper); }
.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(--taupe-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 geprueft: --surface --border --taupe --taupe-light --taupe-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(--taupe-light); }
.ak__k:hover, .ak__k:focus-visible{ border-color:var(--taupe);
  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(--paper); }
.ak__bild--offen{ display:grid; place-items:center; font-weight:700; font-size:1.2rem;
  color:var(--taupe-deep); border:1.5px dashed var(--taupe); background:var(--taupe-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(--taupe-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; }
}


/* ============================================================
   TAUPE KNOEPFE IM DUNKELMODUS
   Im Dunkelmodus ist #6E6459 die Taupeflaeche (helle Schrift darauf), #C9BEB0
   bleibt Schrift und kleiner Akzent. Am Dateiende, damit keine frueher
   notierte Regel dazwischenkommt.
   ============================================================ */
html[data-theme="dark"] .btn--voll,
html:not([data-theme="light"]) .btn--voll{ background:var(--taupe); color:#FFFFFF; }
html[data-theme="dark"] .btn--voll:hover,
html:not([data-theme="light"]) .btn--voll:hover{ background:#7A6F63; color:#FFFFFF; }

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


/* ═══════════════════════════════════════════════════════════════════════
   LEISTUNGS-MOSAIK auf dem Telefon — drei Spalten bleiben
   Gemessen (Chromium, 390 px, vorher): Panelhoehe 142-358 px bei
   Kachelhoehen von 79-127 px -> in ALLEN 15 Kacheln lief die Ueberlagerung
   ueber die Kachel hinaus, in der Spitze um 293 px. Ursache: der Block
   "Mosaik: Erklaertexte vollstaendig zeigen" weiter oben setzt .k__rest
   wieder auf display:block und hebt damit die Telefonregel auf.
   Erster Versuch war zweispaltig. Auf Wunsch bleibt es bei DREI Spalten —
   dann muss die Kachel aber hoeher werden, sonst passt auch ein
   Sieben-Woerter-Text nicht hinein. Gemessen bei 126 x 79 px: selbst mit
   10-px-Schrift fehlten bis zu 22 px. Mit quadratischen Bildern (126 x 126)
   und .82rem Schrift: 0 Ueberlaeufe, kleinste Luft 17 px, Mosaik 1051 px
   hoch (zweispaltig waeren es 1775 px gewesen — so ist es sogar kuerzer
   als vorher). Auf dem Rechner bleibt alles unveraendert.
   Zuruecknehmen: diesen Block loeschen. */
.k__kurz{ display:none; }

@media (max-width:700px){
  .gitter--voll .k .k__rest{ display:none !important; }
  .gitter--voll .k .k__mehr{ display:none !important; }
  /* Die drei Spalten kommen aus der Regel weiter oben (33,33 % / 50 %) und
     bleiben unangetastet. Neu ist nur die Kachelhoehe: quadratisch statt
     16:10, damit die Ueberschrift Platz hat. */
  .gitter .k img{ aspect-ratio:1/1 !important; }
  .gitter--voll .k__panel{ padding:.6rem .65rem; }
  .gitter--voll .k__panel strong{ font-size:.82rem; line-height:1.25; }
  .gitter--voll .k__lang{ display:none; }
  .gitter--voll .k__kurz{ display:inline; }
}