@charset "utf-8";
/* LENZMED Gruppenpraxis, Lenzburg - Entwurf.
   Mobile first.

   Farbe: Das Logo des Bestands ist grau mit einem roten X. Rot ist auf einer
   Arztseite aber kein Akzent, sondern ein Signal - es gehoert an die Stelle,
   die wirklich warnt (Notfall) und an das X der Marke, sonst nirgends.
   Die ruhige Farbe der Seite kommt stattdessen aus dem Haus selbst: die
   Fassade am Niederlenzer Kirchweg 5c ist gruen (#a1a05f, am Foto gemessen),
   ebenso die Waende im Gang. Daraus das gedeckte Gruen dieser Seite.

   Der Akzent ist in zwei Kanaele getrennt:
     --marke        Dekoration (Flaechen, Symbole neben Text, Linien)
     --marke-text   Information (Verweise, Beschriftungen) - immer >= 4.5:1
   Eine einzige Akzentfarbe fuer beides geraet an einer der beiden Stellen
   unter die Grenze, ohne dass ein Werkzeug das meldet. */

/* --- Schriften ---------------------------------------------------------- */
@font-face {
  font-family: 'SourceSerif';
  src: url('/assets/fonts/sourceserif.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SourceSans';
  src: url('/assets/fonts/sourcesans.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* --- Grundwerte --------------------------------------------------------- */
:root {
  --grund: #fafaf5;
  --grund-2: #f0f1e7;
  --flaeche: #ffffff;
  --tinte: #23261d;
  --tinte-2: #545849;   /* 7.6:1 auf --grund */
  --tinte-3: #666a59;   /* 5.6:1 auf --grund, 5.2:1 auf --grund-2 */
  --linie: #e4e4d7;
  --linie-2: #cdcebd;

  --marke: #5e7038;         /* Dekoration - aus der Hausfassade */
  --marke-text: #47551f;    /* Information - 7.4:1 auf weiss */
  --marke-dunkel: #333d1c;
  --marke-hell: #eef1e2;

  --rot: #e41d22;           /* am Logo des Bestands gemessen */
  --rot-text: #bf1419;      /* 6.0:1 auf weiss - fuer Schrift */
  --rot-hell: #fdecec;
  --rot-dunkel: #8e0f13;

  --dunkel: #262b1e;
  --dunkel-2: #333a29;
  --auf-dunkel: #f1f2e9;
  --auf-dunkel-2: #c3c8b2;
  --marke-auf-dunkel: #bcd28c;   /* Symbole im dunklen Fuss, 9.3:1 */

  --r: 10px;
  --r-klein: 6px;
  --schatten: 0 1px 2px rgba(35, 38, 29, .05), 0 8px 24px rgba(35, 38, 29, .07);
  --schatten-klein: 0 1px 2px rgba(35, 38, 29, .06), 0 3px 10px rgba(35, 38, 29, .05);
  --breite: 1220px;
  --luft: clamp(2.6rem, 6vw, 5.2rem);
}

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

html {
  /* rem rechnet gegen html, nicht gegen body. 16px bleibt die Basis. */
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Die klebende Kopfzeile wuerde beim Sprung auf einen Anker den Anfang
     des Ziels verdecken. */
  scroll-padding-top: 84px;
  /* overflow-x NICHT auf clip: das verschluckt waagrechtes Scrollen und
     versteckt damit echte Layoutfehler, statt sie zu zeigen. */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: 'SourceSans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: 'SourceSerif', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  line-height: 1.2;
  color: var(--tinte);
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.8rem, 5vw, 2.9rem); }
h2 { font-size: clamp(1.42rem, 3.3vw, 2.05rem); }
h3 { font-size: clamp(1.1rem, 2.2vw, 1.28rem); }
h4 { font-size: 1.03rem; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--marke-text); text-decoration-thickness: 1px; text-underline-offset: .16em; }
a:hover { color: var(--marke-dunkel); }
strong { font-weight: 600; }
em { font-style: italic; }
img, picture, svg { max-width: 100%; }
img { height: auto; display: block; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: .35em; }
address { font-style: normal; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--linie); margin: 2rem 0; }

/* Symbole brauchen immer ein Grundmass. Ohne eigene Groesse wird ein SVG
   mit max-width:100% so breit wie sein Kasten - aus einem Icon wird ein
   300px hoher Block. */
svg { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }
p svg, li svg, h2 svg, h3 svg, summary svg { width: 1.15em; height: 1.15em; }

:focus-visible {
  outline: 3px solid var(--marke-text);
  outline-offset: 2px;
  border-radius: 3px;
}

.vb {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--marke-dunkel); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 var(--r-klein) 0; font-weight: 600;
}
.skip:focus { left: 0; color: #fff; }

.wrap { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 1.15rem; }
.klein { font-size: .875rem; color: var(--tinte-2); line-height: 1.55; }
.lead { font-size: 1.09rem; color: var(--tinte-2); max-width: 62ch; }

/* --- Schaltflaechen ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: .78rem 1.25rem;
  border: 1px solid var(--marke-dunkel);
  border-radius: var(--r-klein);
  background: var(--marke-dunkel);
  color: #fff;
  font: inherit; font-weight: 600; font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
  /* Kein white-space:nowrap hier! Eine lange Beschriftung erhielte damit
     eine Mindestbreite und sprengt bei 320px das Raster. Nur dort setzen,
     wo der Text kurz und fest ist (.kopf__tel, .rufleiste a). */
}
.btn:hover { background: #222a12; border-color: #222a12; color: #fff; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.1em; height: 1.1em; }
.btn--geist {
  background: transparent; color: var(--marke-text); border-color: var(--linie-2);
}
.btn--geist:hover { background: var(--marke-hell); border-color: var(--marke); color: var(--marke-dunkel); }
.btn--klein { padding: .58rem 1rem; font-size: .95rem; }
/* Kurzer, fester Text: hier ist nowrap richtig. Ohne dies bricht
   "Termin vereinbaren" im Kopf auf drei Zeilen und macht ihn 71px hoch. */
.kopf .btn, .schub__tat .btn { white-space: nowrap; }

.tatreihe { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.tatreihe--mitte { justify-content: center; margin-top: 2rem; }

/* inline, nicht inline-flex: bei umbrechendem Text waere der Pfeil ein
   eigenes Flex-Element und landete am Zeilenende statt beim letzten Wort.
   Das geschuetzte Leerzeichen haelt ihn am Wort. */
.link-pfeil { display: inline; font-weight: 600; text-decoration: none; }
.link-pfeil::after {
  content: '\00a0→'; display: inline-block;
  transition: transform .18s ease;
}
.link-pfeil:hover::after { transform: translateX(3px); }
.link-stark {
  display: inline-flex; align-items: flex-start; gap: .45rem;
  font-weight: 600; text-decoration: none;
}
/* Symbol an der ERSTEN Zeile ausrichten. Mittig stand es bei einer
   umgebrochenen Adresse zwischen den Zeilen. */
.link-stark svg { margin-top: .18em; }
.link-stark:hover { text-decoration: underline; }

/* --- Kopf --------------------------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 90;
  background: rgba(250, 250, 245, .96);
  border-bottom: 1px solid var(--linie);
  backdrop-filter: saturate(1.3) blur(8px);
}
.kopf__in {
  display: flex; align-items: center; gap: .8rem;
  min-height: 68px; padding-top: .5rem; padding-bottom: .5rem;
}
/* Wortmarke: die Marke des Bestands als nachgezeichnetes SVG. Die
   Buchstaben nehmen die Textfarbe an, das X behaelt sein Rot - so stimmt
   die Marke auf hellem wie auf dunklem Grund, ohne zweite Datei. */
.marke {
  flex: none; display: flex; align-items: center;
  text-decoration: none; color: var(--tinte);
  min-width: 0;
}
.marke__wort {
  flex: none; display: block;
  width: 154px; height: auto;
  transition: opacity .2s ease;
}
.marke:hover .marke__wort { opacity: .82; }

.nav { display: none; }
.kopf__tat { margin-left: auto; display: flex; align-items: center; gap: .55rem; }
.kopf__tel {
  display: none; align-items: center; gap: .4rem;
  font-weight: 600; text-decoration: none; color: var(--tinte);
  white-space: nowrap;      /* kurz und fest - hier richtig */
  font-variant-numeric: tabular-nums;
}
.kopf__tel:hover { color: var(--marke-text); }
.kopf__tel svg { color: var(--marke); }
.kopf__tat .btn--klein { display: none; }

.lupe {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; flex: none;
  background: transparent; border: 1px solid var(--linie-2);
  border-radius: var(--r-klein); color: var(--tinte); cursor: pointer;
}
.lupe svg { width: 1.5rem; height: 1.5rem; }
.lupe:hover { background: var(--grund-2); }

/* Die Schublade haengt nur am hidden-Attribut. Eine eigene display-Regel
   (etwa .schub{display:block}) wuerde [hidden]{display:none} des Browsers
   ueberstimmen und das Menue dauerhaft offen stehen lassen - darum die
   ausdrueckliche Regel hier. */
.schub {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  box-shadow: var(--schatten);
  padding: .9rem 1.15rem 1.15rem;
  max-height: 78vh; overflow-y: auto;
}
.schub[hidden] { display: none; }
.schub__nav { display: flex; flex-direction: column; }
.schub__nav a {
  padding: .78rem .2rem; border-bottom: 1px solid var(--linie);
  color: var(--tinte); text-decoration: none; font-weight: 600;
}
.schub__nav a:hover, .schub__nav a[aria-current='page'] { color: var(--marke-text); }
.schub__tat { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
.schub__tat .btn { width: 100%; }

/* --- Notfallband --------------------------------------------------------
   Die einzige Stelle, an der Rot auf dieser Seite als Signal auftritt.
   Sie steht direkt unter dem Kopf, weil im Notfall niemand scrollt. */
.notfallband {
  background: var(--rot-hell);
  border-bottom: 1px solid #f3cccd;
}
.notfallband__in {
  display: flex; flex-wrap: wrap; align-items: center;
  /* Die Angaben sind eigene Flex-Elemente und werden durch den Abstand
     getrennt, nicht durch Trennpunkte im Text. Bricht die Zeile um, haengt
     sonst ein "·" allein am Zeilenende. */
  gap: .15rem 1.1rem; padding-top: .55rem; padding-bottom: .55rem;
  font-size: .9rem;
}
.notfallband__t {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; color: var(--rot-dunkel);   /* 8.1:1 auf --rot-hell */
  text-transform: uppercase; letter-spacing: .06em; font-size: .78rem;
}
.notfallband__t svg { width: 1.05rem; height: 1.05rem; color: var(--rot-text); }
.notfallband p { margin: 0; color: #4a2022; }
.notfallband a {
  color: var(--rot-dunkel); font-weight: 700; text-decoration: none;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.notfallband a:hover { text-decoration: underline; }

/* --- Hero --------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero__bild { position: absolute; inset: 0; z-index: -2; }
.hero__bild img { width: 100%; height: 100%; object-fit: cover; }
.hero__folie {
  position: absolute; inset: 0; z-index: -1;
  /* Zwei Schichten, die Werte sind GEMESSEN (tools/kontrast_hero.py) und
     nicht geschaetzt: im Empfangsfoto gibt es grosse fast weisse Flaechen
     (Decke, Leuchten, Tresen). Schmal deckt der Text die ganze Breite ab,
     darum dort ein kraeftigerer Schleier. */
  background: linear-gradient(180deg, rgba(22, 26, 17, .84) 0%,
    rgba(22, 26, 17, .74) 45%, rgba(22, 26, 17, .90) 100%);
}
@media (min-width: 760px) {
  .hero__folie {
    background:
      linear-gradient(90deg, rgba(22, 26, 17, .50) 0%, rgba(22, 26, 17, .38) 48%, rgba(22, 26, 17, 0) 82%),
      linear-gradient(180deg, rgba(22, 26, 17, .70) 0%, rgba(22, 26, 17, .54) 45%, rgba(22, 26, 17, .86) 100%);
  }
}
.hero__in { padding: clamp(2.8rem, 10vw, 6rem) 1.15rem clamp(2.4rem, 7vw, 4.2rem); }
.augenbraue {
  display: inline-block;
  font-size: .8125rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase;
  color: #f2f6e6;
  background: rgba(71, 85, 31, .92);
  border-radius: 100px; padding: .3rem .85rem;
  margin: 0 0 1rem;
}
.hero__t { color: #fff; max-width: 20ch; margin-bottom: .7rem; }
.hero__lead { color: #eef1e5; font-size: 1.11rem; max-width: 50ch; margin-bottom: 1.6rem; }
.hero__klein { color: #d9ddcb; font-size: .875rem; margin-top: 1rem; }
/* Die zweite Schaltflaeche steht direkt auf dem Foto. Ohne eigene Flaeche
   haengt ihr Kontrast allein am Verlauf. Die getoente Flaeche macht sie vom
   Bild unabhaengig. */
.hero .btn--geist {
  color: #fff; border-color: rgba(255, 255, 255, .58);
  background: rgba(22, 26, 17, .48);
  backdrop-filter: blur(2px);
}
.hero .btn--geist:hover { background: rgba(255, 255, 255, .14); color: #fff; border-color: #fff; }

.status {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 0; width: 100%;
  font-size: .92rem; color: #e4e8d8;
}
.status__punkt {
  width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--auf-dunkel-2); flex: none;
}
.status--offen .status__punkt { background: #93cd6a; }
.status--zu .status__punkt { background: #e8c07a; }

/* --- Hero, ruhige Fassung ------------------------------------------------
   Fuer die Unterseiten. Heller Grund, dunkle Schrift, Bild daneben.
   Alle Farben hier ausdruecklich setzen: die Regeln der dunklen Fassung
   gelten weiter fuer .hero, und ohne eigene Angabe bliebe weisse Schrift
   auf hellem Grund stehen. */
.hero--ruhig { background: var(--grund-2); border-bottom: 1px solid var(--linie); }
.hero--ruhig .hero__in {
  display: grid; gap: 1.7rem; align-items: center;
  padding-top: clamp(1.9rem, 5.5vw, 3.4rem);
  padding-bottom: clamp(1.9rem, 5.5vw, 3.4rem);
}
.hero--ruhig .hero__t { color: var(--tinte); max-width: 24ch; }
.hero--ruhig .hero__lead { color: var(--tinte-2); }
.hero--ruhig .hero__klein { color: var(--tinte-3); }
.hero--ruhig .augenbraue { color: var(--marke-dunkel); background: var(--marke-hell); }
.hero--ruhig .btn--geist { color: var(--marke-text); border-color: var(--linie-2); }
.hero--ruhig .btn--geist:hover {
  background: var(--flaeche); border-color: var(--marke); color: var(--marke-dunkel);
}
.hero--ruhig .status { color: var(--tinte-2); }
.hero--ruhig .status__punkt { background: var(--tinte-3); }
.hero--ruhig.status--offen .status__punkt { background: var(--marke); }
.hero--ruhig .hero__nebenbild {
  /* Einspaltig nicht auf die ganze Inhaltsbreite ziehen - mehrere
     Bestandsaufnahmen sind schmal und wuerden sonst hochskaliert.
     Ab zwei Spalten hebt die Regel unten die Grenze wieder auf. */
  max-width: 620px; margin-inline: auto; width: 100%;
}
.hero--ruhig .hero__nebenbild img {
  width: 100%; border-radius: var(--r); box-shadow: var(--schatten);
  aspect-ratio: 3 / 2; object-fit: cover;
}
@media (min-width: 820px) {
  .hero--ruhig .hero__in { grid-template-columns: 1fr 1fr; gap: 2.4rem; }
  .hero--ruhig .hero__nebenbild { max-width: none; }
}

/* --- Abschnitte --------------------------------------------------------- */
.ab { padding: var(--luft) 0; }
.ab--ton { background: var(--grund-2); }
.ab--marke { background: var(--marke-hell); }
.ab--schmal > .wrap { max-width: 820px; }
.ab--eng { padding: 2rem 0; }

.ab--dunkel { background: var(--dunkel); }
/* Dunkelregeln fuer ALLE Elemente schreiben, nicht nur fuer h2/p - sonst
   bleibt eine Adresse oder eine Tabellenzelle auf 1.9:1 stehen. */
.ab--dunkel, .ab--dunkel p, .ab--dunkel li, .ab--dunkel dt, .ab--dunkel dd,
.ab--dunkel address, .ab--dunkel td, .ab--dunkel th, .ab--dunkel caption,
.ab--dunkel figcaption, .ab--dunkel span, .ab--dunkel .klein,
.ab--dunkel .lead { color: var(--auf-dunkel); }
.ab--dunkel h1, .ab--dunkel h2, .ab--dunkel h3 { color: #fff; }
.ab--dunkel .klein, .ab--dunkel .lead { color: var(--auf-dunkel-2); }
.ab--dunkel a { color: var(--marke-auf-dunkel); }
.ab--dunkel .btn {
  background: #fff; color: var(--marke-dunkel); border-color: #fff;
}
.ab--dunkel a.btn:hover { background: var(--grund-2); color: var(--marke-dunkel); border-color: var(--grund-2); }
.ab--dunkel .btn--geist { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.ab--dunkel a.btn--geist:hover { background: rgba(255, 255, 255, .13); border-color: #fff; color: #fff; }

.kopfzeile { margin-bottom: 2rem; max-width: 62ch; }
.kopfzeile--zeile {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .6rem; max-width: none;
}
.kopfzeile--zeile h2 { margin-bottom: 0; }
.kopfzeile--zeile p { margin: 0; }

/* --- Schnellfinder ------------------------------------------------------
   Die vier Fragen, mit denen Menschen auf eine Praxisseite kommen:
   Wann offen? Wie Termin? Wo? Und was, wenn es dringend ist?
   Steht darum unmittelbar unter dem Hero, nicht am Seitenende. */
.finder { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.finder li { margin: 0; }
.finder__k {
  display: flex; flex-direction: column; gap: .45rem; height: 100%;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); padding: 1.15rem 1.2rem;
  box-shadow: var(--schatten-klein);
  text-decoration: none; color: inherit;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
a.finder__k:hover {
  box-shadow: var(--schatten); transform: translateY(-2px);
  border-color: var(--linie-2); color: inherit;
}
.finder__i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: var(--marke-hell); color: var(--marke-text); flex: none;
}
.finder__i svg { width: 1.25rem; height: 1.25rem; }
.finder__h {
  font-family: 'SourceSerif', Georgia, serif; font-size: 1.14rem;
  font-weight: 600; line-height: 1.25;
}
.finder__b { font-size: .92rem; color: var(--tinte-2); flex: 1; margin: 0; }
.finder__z {
  font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums;
  color: var(--marke-text);
}
/* Die Notfallkarte traegt Rot - hier ist es die richtige Farbe. */
.finder__k--notfall { border-color: #f0c9ca; background: var(--rot-hell); }
.finder__k--notfall .finder__i { background: #fbdcdd; color: var(--rot-dunkel); }
.finder__k--notfall .finder__z, .finder__k--notfall a { color: var(--rot-dunkel); }
.finder__k--notfall .finder__b { color: #4a2022; }

/* Die drei Arztkacheln auf der Startseite. Feste 150px fuer das Bild -
   das Portraet von Dr. Frei liegt im Bestand nur mit 195px vor, und drei
   verschieden breite Bilder nebeneinander lesen sich als Darstellungsfehler. */
.finder--team .finder__k { align-items: flex-start; }
.finder--team picture { display: block; }
.finder--team img {
  width: 150px; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--r-klein); background: var(--grund-2);
  margin-bottom: .3rem;
}

/* --- Leistungen --------------------------------------------------------- */
.leistungen { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem; }
.leistungen > li { margin: 0; }
.leistung {
  height: 100%; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); padding: 1.35rem;
  box-shadow: var(--schatten-klein);
}
.leistung__kopf { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .6rem; }
.leistung__i {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: var(--r-klein);
  background: var(--marke-hell); color: var(--marke-text);
}
.leistung__i svg { width: 1.35rem; height: 1.35rem; }
.leistung h3 { margin: .15rem 0 0; }
.leistung > p { font-size: .95rem; color: var(--tinte-2); margin-bottom: .9rem; }
.leistung ul { list-style: none; padding: 0; margin: 0; }
.leistung ul li {
  position: relative; padding-left: 1.35rem; margin-bottom: .38rem;
  font-size: .94rem;
}
.leistung ul li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--marke);
}

/* --- Ausstattung -------------------------------------------------------- */
.geraete { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.geraete li {
  margin: 0; padding: .85rem 1rem;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-klein);
}
.geraete strong { display: block; font-size: .98rem; }
.geraete span { font-size: .88rem; color: var(--tinte-2); }

/* --- Ablauf (nummerierte Schritte) -------------------------------------- */
.ablauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.ablauf > li { margin: 0; display: flex; gap: 1rem; align-items: flex-start; }
.ablauf__n {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--marke-dunkel); color: #fff;
  font-family: 'SourceSerif', Georgia, serif; font-weight: 600; font-size: 1.1rem;
  line-height: 1;
}
.ablauf__t { min-width: 0; }
.ablauf__t h3 { margin-bottom: .25rem; font-size: 1.1rem; }
.ablauf__t p { margin: 0; font-size: .96rem; color: var(--tinte-2); }

/* --- Kacheln ------------------------------------------------------------ */
.kacheln { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem; }
.kacheln li { margin: 0; }
.kachel a {
  display: flex; flex-direction: column; height: 100%;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); overflow: hidden;
  text-decoration: none; color: inherit;
  box-shadow: var(--schatten-klein);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.kachel a:hover {
  box-shadow: var(--schatten); transform: translateY(-2px);
  border-color: var(--linie-2);
}
.kachel__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.kachel__in { display: flex; flex-direction: column; gap: .5rem; padding: 1.15rem; flex: 1; }
.kachel__h {
  font-family: 'SourceSerif', Georgia, serif; font-size: 1.2rem; font-weight: 600;
  line-height: 1.25;
}
.kachel__b { font-size: .92rem; color: var(--tinte-2); flex: 1; }
.kachel a .link-pfeil { color: var(--marke-text); font-size: .92rem; }

/* --- Bildgitter --------------------------------------------------------- */
.gitter { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.gitter li { margin: 0; }
.figur { margin: 0; }
.figur img { width: 100%; border-radius: var(--r-klein); }
.figur img { aspect-ratio: 3 / 2; object-fit: cover; box-shadow: var(--schatten-klein); }
.figur figcaption {
  font-size: .82rem; color: var(--tinte-3); margin-top: .5rem; line-height: 1.45;
}

/* --- Paar (Text + Bild) ------------------------------------------------- */
.paar { display: grid; gap: 1.6rem; align-items: center; }
/* Einspaltig nicht auf die ganze Inhaltsbreite ziehen. Ab zwei Spalten hebt
   die Regel weiter unten die Grenze wieder auf. */
.paar__bild { max-width: 580px; margin-inline: auto; width: 100%; }
.paar__text > :last-child { margin-bottom: 0; }
.paar__text h2 { margin-bottom: .7rem; }

/* --- Fliesstext --------------------------------------------------------- */
.fliesstext { max-width: 70ch; }
.fliesstext h2 { margin-top: 2rem; }
.fliesstext h2:first-child, .fliesstext h1 + h2 { margin-top: 0; }
.fliesstext h3 { margin-top: 1.6rem; }
.fliesstext ul { padding-left: 1.15rem; }

/* --- Aerztekarte --------------------------------------------------------
   Die drei Portraets stammen aus drei verschiedenen Aufnahmen - Studio,
   Aussenaufnahme, Strasse. Nebeneinander in einem Raster waere der Bruch
   der Hintergruende das Erste, was auffaellt. Untereinander, jedes mit
   seinem eigenen Text daneben, faellt er nicht ins Gewicht - und der
   Werdegang hat Platz. */
.aerzte { display: grid; gap: 1.6rem; }
.arzt {
  display: grid; gap: 1.2rem;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); padding: 1.3rem;
  box-shadow: var(--schatten-klein);
}
.arzt__bild { max-width: 260px; width: 100%; }
.arzt__bild img {
  width: 100%; border-radius: var(--r-klein);
  aspect-ratio: 4 / 5; object-fit: cover;
}
.arzt__text { min-width: 0; }
.arzt__text h2, .arzt__text h3 { margin-bottom: .2rem; }
.arzt__rolle {
  font-size: .95rem; color: var(--marke-text); font-weight: 600;
  margin: 0 0 .1rem;
}
.arzt__meta { font-size: .9rem; color: var(--tinte-3); margin: 0 0 .9rem; }
.arzt__wd { margin-top: 1rem; }
.arzt__wd summary {
  cursor: pointer; font-weight: 600; font-size: .95rem;
  color: var(--marke-text); list-style: none;
  display: inline-flex; align-items: center; gap: .4rem;
}
.arzt__wd summary::-webkit-details-marker { display: none; }
.arzt__wd summary::after { content: '▾'; font-size: .8em; }
.arzt__wd[open] summary::after { content: '▴'; }
.arzt__wd summary:hover { text-decoration: underline; }
.werdegang { margin: .9rem 0 0; display: grid; gap: .5rem; }
.werdegang > div {
  display: grid; gap: .05rem .9rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--linie);
}
.werdegang > div:last-child { border-bottom: 0; padding-bottom: 0; }
.werdegang dt {
  font-weight: 600; font-size: .85rem; color: var(--marke-text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.werdegang dd { margin: 0; font-size: .93rem; color: var(--tinte-2); }
@media (min-width: 480px) {
  .werdegang > div { grid-template-columns: 8.5rem 1fr; }
}
/* 195px, nicht mehr: das Portraet von Dr. Frei liegt im Bestand nur mit
   195 x 292 px vor. Eine breitere Spalte muesste es hochrechnen - und drei
   verschieden breite Portraets untereinander lesen sich als Fehler. Die
   Breite des schwaechsten Originals bestimmt darum alle drei. */
.arzt__bild { max-width: 195px; }
@media (min-width: 640px) {
  .arzt { grid-template-columns: 195px 1fr; gap: 1.8rem; align-items: start; }
}

/* --- Teamgitter (MPA) --------------------------------------------------- */
.team { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem;
  grid-template-columns: repeat(2, 1fr); }
.team li { margin: 0; }
.team img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--r); background: var(--grund-2);
}
.team__n { font-weight: 600; margin: .6rem 0 0; font-size: .98rem; }
.team__r { font-size: .85rem; color: var(--tinte-3); margin: 0; }
@media (min-width: 620px) { .team { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .team { grid-template-columns: repeat(5, 1fr); } }

/* --- Infokarten --------------------------------------------------------- */
.infokarten, .dreispalt { display: grid; gap: 1.15rem; }
.infokarte {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); padding: 1.35rem;
  box-shadow: var(--schatten-klein);
}
.infokarte h2, .infokarte h3 {
  display: flex; align-items: center; gap: .5rem;
  font-size: 1.16rem; margin-bottom: .8rem;
}
.infokarte h2 svg, .infokarte h3 svg { color: var(--marke); }
.infokarte address { margin-bottom: .8rem; }
.infokarte__z { display: flex; flex-direction: column; gap: .35rem; }
.schritte { padding-left: 1.3rem; margin-bottom: 0; }
.schritte li { margin-bottom: .6rem; font-size: .96rem; }

.zeiten {
  margin: 0;
  /* Die Liste steht an mehreren Orten mit sehr verschiedener Breite
     (Infokarte und Fussspalte). Sie fragt darum ihre eigene Breite ab,
     nicht die des Fensters. */
  container-type: inline-size;
}
.zeiten .zeile {
  display: flex; flex-wrap: wrap; gap: .2rem 1rem;
  justify-content: space-between; align-items: baseline;
  /* Waagrechter Innenabstand mit negativem Aussenabstand: die Zeilen bleiben
     am Text ausgerichtet, die Markierung des heutigen Tages darf aber ueber
     den Rand hinausgehen und wirkt dadurch wie ein Band. */
  padding: .48rem .6rem; margin-inline: -.6rem;
  border-bottom: 1px solid var(--linie);
  border-radius: var(--r-klein);
}
.zeiten .zeile:last-child { border-bottom: 0; }
.zeiten dt { font-weight: 600; font-size: .95rem; }
/* margin-left: auto, nicht nur align-items: bricht die Zeile um, ist das
   dd das einzige Element seiner Zeile und "space-between" setzt es an den
   Anfang - die Uhrzeit stand dann links unter dem Tagesnamen. */
.zeiten dd {
  margin: 0 0 0 auto; display: flex; flex-direction: column;
  align-items: flex-end; text-align: right;
}
.zeit { font-variant-numeric: tabular-nums; font-size: .95rem; color: var(--tinte-2); }

/* Der heutige Tag: farbig hinterlegt. Die Farbe allein traegt die Aussage
   nicht - der Zusatz "heute" bleibt stehen. */
.zeiten .zeile[data-heute] { background: var(--marke-hell); border-bottom-color: transparent; }
.zeiten .zeile[data-heute] dt,
.zeiten .zeile[data-heute] .zeit { color: var(--marke-dunkel); font-weight: 600; }
.zeiten .zeile[data-heute] dt::after {
  content: ' · heute'; font-size: .72rem; letter-spacing: .04em; font-weight: 600;
}

/* Unter 258px passen Tagesname und Uhrzeiten nicht nebeneinander. Dann
   stapeln ALLE Zeilen gleich - sonst bricht nur die markierte um und faellt
   aus der Reihe. */
@container (max-width: 258px) {
  .zeiten .zeile { display: block; }
  .zeiten dt { margin-bottom: .1rem; }
  .zeiten dd {
    margin: 0; align-items: flex-start; text-align: left;
    flex-direction: row; flex-wrap: wrap; gap: .1rem .7rem;
  }
}

/* --- Notfallliste ------------------------------------------------------- */
.notruf { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.notruf > li { margin: 0; }
.notruf__k {
  display: flex; flex-direction: column; gap: .3rem; height: 100%;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-left: 4px solid var(--marke); border-radius: var(--r-klein);
  padding: 1rem 1.1rem;
}
.notruf__k--rot { border-left-color: var(--rot); background: var(--rot-hell); border-color: #f0c9ca; }
.notruf__k--rot .notruf__b { color: #4a2022; }
.notruf__n {
  font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums;
  text-decoration: none; color: var(--tinte); line-height: 1.15;
}
.notruf__k--rot .notruf__n { color: var(--rot-dunkel); }
.notruf__n:hover { text-decoration: underline; }
.notruf__h { font-weight: 600; font-size: .96rem; }
.notruf__b { font-size: .9rem; color: var(--tinte-2); margin: 0; }

/* --- Hinweiskasten ------------------------------------------------------ */
.hinweiskasten {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); padding: 1.5rem;
  max-width: 74ch;
}
.hinweiskasten h2, .hinweiskasten h3 { font-size: 1.18rem; margin-bottom: .5rem; }
.hinweiskasten--warnung { background: #fdf6e8; border-color: #eedcb4; }
.hinweiskasten--marke { background: var(--marke-hell); border-color: #dbe2c6; }

/* --- CTA-Band ----------------------------------------------------------- */
.ctaband { display: grid; gap: 1.2rem; align-items: center; }
.ctaband h2 { margin-bottom: .3rem; }
.ctaband p { margin: 0; }

/* --- FAQ ---------------------------------------------------------------- */
.faqs { display: grid; gap: .6rem; max-width: 820px; }
.faq {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-klein); padding: 0;
}
.faq summary {
  cursor: pointer; padding: .9rem 1.1rem; font-weight: 600;
  list-style: none; display: flex; justify-content: space-between; gap: 1rem;
  align-items: center; font-size: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; color: var(--marke-text); font-size: 1.4rem; line-height: 1;
  flex: none; font-weight: 400;
}
.faq[open] summary::after { content: '−'; }
.faq[open] summary { padding-bottom: .3rem; }
.faq p { padding: 0 1.1rem 1rem; margin: 0; color: var(--tinte-2); font-size: .96rem; }

/* --- Stellen ------------------------------------------------------------ */
.stelle {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); padding: 1.35rem; margin-bottom: 1.15rem;
}
.stelle h3 { margin-bottom: .5rem; }
.stelle ul { margin-bottom: 0; padding-left: 1.15rem; }
.merkliste {
  list-style: none; padding: 0; margin: .9rem 0 0;
  display: flex; flex-wrap: wrap; gap: .45rem;
}
.merkliste li {
  margin: 0; font-size: .88rem; background: var(--grund-2);
  border: 1px solid var(--linie); border-radius: 100px;
  padding: .24rem .75rem; color: var(--tinte-2);
}
.ab--dunkel .merkliste li {
  background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22);
  color: var(--auf-dunkel);
}

/* --- Fuss --------------------------------------------------------------- */
.fuss { background: var(--dunkel); color: var(--auf-dunkel); padding: var(--luft) 0 0; }
/* Der Fuss ist ebenso dunkel wie .ab--dunkel, traegt die Klasse aber nicht.
   Darum hier alle Farben noch einmal ausdruecklich. */
.fuss p, .fuss li, .fuss dt, .fuss dd, .fuss address, .fuss span { color: var(--auf-dunkel); }
.fuss .klein { color: var(--auf-dunkel-2); }
.fuss a { color: var(--auf-dunkel); text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss__in { display: grid; gap: 2rem; padding-bottom: 2.4rem; }
.fuss__marke {
  display: block; width: 176px; height: auto; color: #fff;
  margin-bottom: .8rem;
}
.fuss__h {
  font-family: 'SourceSans', sans-serif; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--auf-dunkel-2) !important; margin-bottom: .8rem; font-weight: 600;
}
.fuss address { display: flex; gap: .5rem; align-items: flex-start; margin: .8rem 0; }
.fuss address svg { color: var(--marke-auf-dunkel); margin-top: .25rem; }
.fuss__kontakt { display: flex; flex-direction: column; gap: .35rem; }
.fuss__kontakt a { display: inline-flex; align-items: center; gap: .45rem; font-weight: 500; }
.fuss__kontakt svg { color: var(--marke-auf-dunkel); }
.fuss__liste { list-style: none; padding: 0; margin: 0 0 .8rem; }
.fuss__liste li { font-size: .92rem; margin-bottom: .3rem; }
.fuss__liste--nav li { margin-bottom: .45rem; }
.zeiten--fuss .zeile { border-color: rgba(241, 242, 233, .15); }
.zeiten--fuss .zeit { color: var(--auf-dunkel-2); }
/* Im dunklen Fuss hebt sich das helle Markengruen nicht ab - hier wird die
   Flaeche selbst dunkelgruen und die Schrift weiss. */
.zeiten--fuss .zeile[data-heute] { background: #44562a; border-bottom-color: transparent; }
.zeiten--fuss .zeile[data-heute] dt,
.zeiten--fuss .zeile[data-heute] .zeit,
.zeiten--fuss .zeile[data-heute] dd { color: #fff; }
.fuss__notfall {
  border: 1px solid rgba(228, 29, 34, .5); border-radius: var(--r-klein);
  padding: .8rem .95rem; margin-top: .9rem;
  background: rgba(228, 29, 34, .12);
}
.fuss__notfall p { margin: 0; font-size: .88rem; }
.fuss__notfall a { font-weight: 700; font-variant-numeric: tabular-nums; }
.fuss__unten {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  justify-content: space-between;
  border-top: 1px solid rgba(241, 242, 233, .15);
  padding-top: 1.2rem; padding-bottom: 1.4rem;
}
.fuss__unten p { margin: 0; font-size: .85rem; color: var(--auf-dunkel-2) !important; }
.fuss__unten a { margin-right: 1rem; font-size: .85rem; }

/* --- Rufleiste (nur schmal) --------------------------------------------- */
.rufleiste {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 80;
  display: flex; background: var(--flaeche);
  border-top: 1px solid var(--linie-2);
  box-shadow: 0 -2px 12px rgba(35, 38, 29, .1);
  padding-bottom: env(safe-area-inset-bottom);
}
.rufleiste a {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: .1rem; padding: .55rem .3rem; text-decoration: none;
  color: var(--tinte); font-size: .75rem; font-weight: 600;
  white-space: nowrap;      /* kurz und fest - hier richtig */
  border-right: 1px solid var(--linie);
}
.rufleiste a:last-child { border-right: 0; }
.rufleiste svg { width: 1.25rem; height: 1.25rem; color: var(--marke); }
.rufleiste a:hover { background: var(--marke-hell); }
.rufleiste a.rufleiste--notfall { color: var(--rot-dunkel); }
.rufleiste a.rufleiste--notfall svg { color: var(--rot-text); }
.rufleiste a.rufleiste--notfall:hover { background: var(--rot-hell); }
body { padding-bottom: 68px; }   /* Platz fuer die Rufleiste - gemessen,
                                    nicht geschaetzt */

/* --- Breiten ------------------------------------------------------------ */
@media (min-width: 560px) {
  .finder { grid-template-columns: repeat(2, 1fr); }
  .kacheln { grid-template-columns: repeat(2, 1fr); }
  /* Bei genau drei Kacheln spannt die letzte ueber beide Spalten - eine
     halb leere Rasterzeile wird als Darstellungsfehler gelesen. */
  .kacheln--drei > :last-child:nth-child(3) { grid-column: 1 / -1; }
  .kacheln--drei > :last-child:nth-child(3) .kachel__bild img { aspect-ratio: 21 / 9; }
  .gitter--drei { grid-template-columns: repeat(2, 1fr); }
  /* Zweispaltig bleibt bei ungerader Anzahl die letzte Zeile halb leer -
     das liest sich als Darstellungsfehler. */
  .gitter--drei > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .gitter--drei > :last-child:nth-child(odd) img { aspect-ratio: 21 / 9; }
  .infokarten { grid-template-columns: repeat(2, 1fr); }
  .geraete { grid-template-columns: repeat(2, 1fr); }
  .notruf { grid-template-columns: repeat(2, 1fr); }
  .leistungen { grid-template-columns: repeat(2, 1fr); }
}

/* Die Telefonnummer im Kopf ist die wichtigste Handlung - sie erscheint,
   sobald ueberhaupt Platz dafuer ist. */
@media (min-width: 620px) {
  .kopf__tel { display: inline-flex; }
}

/* Ab hier traegt der Kopf Nummer UND Schaltflaeche; die feste Rufleiste am
   unteren Rand wird damit ueberfluessig. */
@media (min-width: 800px) {
  body { padding-bottom: 0; }
  .rufleiste { display: none; }
  .kopf__tat .btn--klein { display: inline-flex; }
}

@media (min-width: 760px) {
  body { font-size: 1.09375rem; }
  .marke__wort { width: 178px; }
  /* Gleich breite Spalten. Mit 1.05fr/.95fr staende das Bild bei
     .paar--gedreht in der breiteren Spalte, waehrend die sizes-Angabe die
     schmalere nennt - der Browser waehlte eine zu kleine Datei. */
  .paar { grid-template-columns: 1fr 1fr; gap: 2.4rem; }
  .paar__bild { max-width: none; }
  .paar--gedreht .paar__text { order: 2; }
  .ctaband { grid-template-columns: 1.4fr auto; gap: 2rem; }
  .ctaband .tatreihe { justify-content: flex-end; }
  .dreispalt { grid-template-columns: repeat(3, 1fr); }
  .gitter--drei { grid-template-columns: repeat(3, 1fr); }
  .gitter--drei > :last-child:nth-child(odd) { grid-column: auto; }
  .gitter--drei > :last-child:nth-child(odd) img { aspect-ratio: 3 / 2; }
  /* Dreispaltig bleibt bei 7 Bildern die letzte Zeile zu einem Drittel
     belegt - dieselbe Luecke wie zweispaltig bei ungerader Anzahl, nur an
     anderer Stelle. Das letzte Bild spannt dann ueber alle drei Spalten und
     bekommt ein flacheres Verhaeltnis, damit es kein Plakat wird. */
  .gitter--drei > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  .gitter--drei > :last-child:nth-child(3n + 1) img { aspect-ratio: 21 / 9; }
  .notruf { grid-template-columns: repeat(3, 1fr); }
  .fuss__in { grid-template-columns: 1.4fr 1.2fr 1fr; }
}

@media (min-width: 1000px) {
  .finder { grid-template-columns: repeat(4, 1fr); }
  .kacheln--drei { grid-template-columns: repeat(3, 1fr); }
  .kacheln--drei > :last-child:nth-child(3) { grid-column: auto; }
  .kacheln--drei > :last-child:nth-child(3) .kachel__bild img { aspect-ratio: 3 / 2; }
  .geraete { grid-template-columns: repeat(3, 1fr); }
  .leistungen { grid-template-columns: repeat(3, 1fr); }
  .fuss__in { grid-template-columns: 1.45fr 1.25fr .85fr .9fr; }
  .hero__in { padding-top: 6.4rem; padding-bottom: 4.6rem; }
  .marke__wort { width: 198px; }
}

/* Erst hier ist wirklich Platz fuer die Hauptnavigation. Frueher
   eingeblendet laeuft der Kopf waagrecht ueber; mit flex-wrap braeche sie
   stattdessen auf zwei Zeilen. Beides sieht nach Panne aus - bis hierher
   fuehrt darum die Schublade. "Startseite" fehlt in der Leiste bewusst:
   die Wortmarke fuehrt dorthin und traegt ein aria-label. */
@media (min-width: 1080px) {
  .nav { display: flex; gap: .1rem; margin-left: .6rem; flex-wrap: nowrap; }
  .nav a {
    padding: .5rem .55rem; border-radius: var(--r-klein);
    color: var(--tinte-2); text-decoration: none;
    font-size: .95rem; font-weight: 500; white-space: nowrap;
  }
  .nav a:hover { background: var(--grund-2); color: var(--tinte); }
  .nav a[aria-current='page'] { color: var(--marke-text); font-weight: 600; }
  .lupe { display: none; }
}

/* --- Einblenden beim Scrollen ------------------------------------------- */
.kein-js .auftritt { opacity: 1; transform: none; }
.auftritt {
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
}
.auftritt--da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .auftritt { opacity: 1; transform: none; }
}

/* --- Druck -------------------------------------------------------------- */
@media print {
  .kopf, .rufleiste, .hero__bild, .hero__folie, .ctaband, .gross { display: none; }
  body { background: #fff; font-size: 11pt; padding: 0; }
  .hero__in { padding: 0 0 1rem; }
  .hero__t, .hero__lead, .augenbraue { color: #000; background: none; }
  .ab { padding: .6rem 0; }
  .arzt, .leistung, .infokarte { break-inside: avoid; }
  .arzt__wd[open] .werdegang { display: grid; }
  .fuss { background: #fff; color: #000; }
  .fuss p, .fuss li, .fuss dt, .fuss dd, .fuss address, .fuss span, .fuss a { color: #000; }
}

/* --- Grossansicht ---------------------------------------------------------
   <dialog> mit showModal(): Fokusfalle, Escape und die Abdunklung
   (::backdrop) kommen vom Browser, und der Fokus springt beim Schliessen von
   selbst auf das angeklickte Bild zurueck. Kein Fremdcode, kein Konflikt mit
   der Content-Security-Policy.

   Wichtig: die eigene display-Regel NUR an [open] haengen. Ein
   ".gross { display:flex }" schluege das eingebaute Verhalten und der Rahmen
   stuende dauerhaft offen - dieselbe Falle wie beim Schubladenmenue. */
.zoom {
  display: block; position: relative; line-height: 0;
  border-radius: var(--r-klein); overflow: hidden;
  color: inherit; text-decoration: none;
}
.zoom__lupe {
  position: absolute; right: .55rem; bottom: .55rem;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(22, 26, 17, .66); color: #fff;
  opacity: 0; transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
}
.zoom__lupe svg { width: 1.1rem; height: 1.1rem; }
.zoom:hover .zoom__lupe,
.zoom:focus-visible .zoom__lupe { opacity: 1; transform: none; }
/* Ohne Zeigegeraet gibt es kein :hover - dort steht die Lupe dauerhaft,
   sonst sieht man dem Bild nicht an, dass es sich anklicken laesst. */
@media (hover: none) { .zoom__lupe { opacity: 1; transform: none; } }
.zoom img { transition: transform .3s ease; }
.zoom:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .zoom img, .zoom:hover img { transform: none; }
}

.gross {
  position: fixed; inset: 0; margin: 0;
  width: 100vw; max-width: 100vw;
  height: 100%; max-height: 100%;
  padding: 0; border: 0; background: transparent; overflow: hidden;
}
.gross[open] { display: flex; align-items: center; justify-content: center; }
.gross::backdrop { background: rgba(15, 18, 11, .94); }
.gross__buehne {
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  max-width: min(94vw, 1400px);
}
.gross__bild {
  display: block; width: auto; height: auto;
  /* 8.5rem bleiben links und rechts frei - genau so viel, dass die beiden
     Pfeile nie auf dem Bild liegen. */
  max-width: min(calc(100vw - 8.5rem), 1400px); max-height: 76vh;
  border-radius: var(--r-klein);
  background: var(--dunkel-2);
}
.gross__bu { margin: 0; color: #eef0e5; font-size: .92rem; text-align: center; max-width: 46rem; }
.gross__zaehler { color: var(--auf-dunkel-2); margin-left: .6rem; white-space: nowrap; }
.gross__knopf {
  position: absolute;
  width: 48px; height: 48px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(51, 58, 41, .78); color: #fff;
  border-radius: 999px; cursor: pointer;
}
.gross__knopf svg { width: 22px; height: 22px; fill: currentColor; }
.gross__knopf:hover { background: var(--marke); border-color: transparent; }
.gross__zu { top: 1rem; right: 1rem; }
.gross__pfeil { top: 50%; margin-top: -24px; }
.gross__pfeil--zurueck { left: 1rem; }
.gross__pfeil--weiter { right: 1rem; }
@media (max-width: 620px) {
  .gross__buehne { max-width: 96vw; }
  .gross__bild { max-width: 96vw; max-height: 66vh; }
  /* Nicht ganz nach unten: dort liegt die feste Rufleiste - die Pfeile
     saessen genau darauf. */
  .gross__pfeil { top: auto; margin-top: 0; bottom: 4.75rem; }
}
/* Solange die Grossansicht offen ist, soll die Seite dahinter nicht
   mitscrollen. Die Klasse setzt das Skript. */
.gross-offen, .gross-offen body { overflow: hidden; }

/* --- Abstandsklassen ----------------------------------------------------
   Statt style="margin-top:…". Ein style-Attribut wird von der
   Content-Security-Policy (style-src 'self') blockiert - und das faellt nur
   auf, wenn man gegen die echte Domain prueft, nicht gegen den lokalen
   Server ohne Kopfzeilen. */
.oben-1 { margin-top: .85rem; }
.oben-2 { margin-top: 1.1rem; }
.oben-3 { margin-top: 1.4rem; }
.oben-4 { margin-top: 2.1rem; }
.oben-5 { margin-top: 2.4rem; }