/* ==== 01-tokens.css ==== */
/* ===================================================================
   zahngesundheit.li v11, Tokens.

   Diese Fassung erfindet nichts. Sie baut die bestehende Seite der
   Praxis nach, auf sauberem Unterbau und mit den Fotos von 2026.
   Jeder Wert hier hat eine Fundstelle: entweder das Logo der Praxis
   oder das Stylesheet der laufenden Seite.

   Ausserhalb dieses Blocks steht kein einziger Farbwert.
   =================================================================== */

:root {
  /* --- Die Marke ---------------------------------------------------
     Aus logo-2x.png abgetastet. Royalblau deckt 69,4 Prozent der
     Logoflaeche, Aubergine 9,8 Prozent. Beide sind bitgenau, nicht
     aufgehellt und nicht interpretiert. */
  --blau-kanaele: 20 63 132;
  --blau:       rgb(var(--blau-kanaele));   /* #143F84 */
  --blau-tief:  #0E2C5C;
  --blau-hell:  #1E4F9E;
  --aubergine:  #56294A;

  /* --- Flaechen und Schrift ----------------------------------------
     Aus dem Stylesheet der laufenden Seite: #393c3e ist dort die
     Textfarbe (21 Fundstellen), #f4f4f4 die graue Zaesurflaeche. */
  --weiss:      #FFFFFF;
  --grau:       #F4F4F4;
  --grau-tief:  #E9E9EA;
  --text:       #393C3E;
  --text-weich: #63676A;
  --linie:      #DEDEE0;
  --linie-fein: #ECECEE;

  /* Weisse Schrift auf dunklem Grund, leicht gedaempft fuer Fliesstext */
  --auf-blau:        #FFFFFF;
  --auf-blau-weich:  rgb(255 255 255 / 0.86);

  /* --- Schrift -----------------------------------------------------
     Instrument Sans. Bis zum 19.08. lief hier Raleway, die Schrift der
     bestehenden Seite; Michael hat sie an diesem Tag ausgewaehlt
     ersetzt, nachdem er fuenf Schnitte nebeneinander gesehen hatte.
     Das ist die einzige bewusste Abweichung vom bestehenden Auftritt,
     das Logo und die Farben bleiben unangetastet.

     Sie liegt naeher an einer Grotesk als Raleway und setzt vor allem
     die Ziffern ruhiger; Raleway stellt sie schmal und eigenwillig.
     Dazu bringt Instrument Sans Tabellenziffern mit, die Raleway fehlen:
     die Sprechzeiten stehen damit erstmals sauber untereinander.

     Variabel 400 bis 700 (die Seite braucht 400, 500, 600 und 700),
     Breitenachse auf 100 festgesetzt, auf den deutschen Zeichenvorrat
     verkleinert, 16 kB statt 36 kB, selbst gehostet. */
  --schrift: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Bahn --------------------------------------------------------
     1240 wie im Bestand (dort .container mit 1170 plus Rand). */
  --bahn:     1240px;
  --bahn-eng: 820px;
  --rand:     clamp(18px, 4.5vw, 48px);
  /* Die Bahn ohne ihre Raender. Das Rasterlineal fuer randlose
     Abschnitte braucht diesen Wert getrennt, siehe .voll. */
  --bahn-innen: calc(var(--bahn) - 2 * var(--rand));

  /* --- Abstaende ---------------------------------------------------- */
  --raum-1:   4px;
  --raum-2:   8px;
  --raum-3:  14px;
  --raum-4:  20px;
  --raum-5:  28px;
  --raum-6:  40px;
  --raum-7:  56px;
  --raum-8:  76px;
  --raum-9: 104px;

  --abschnitt: clamp(56px, 3rem + 4vw, 104px);

  /* --- Schriftgrade ------------------------------------------------
     Der Bestand setzt Abschnittsueberschriften in Versalien mit
     weiter Laufweite. Das ist die Handschrift der Seite und bleibt. */
  /* Der Auftakt traegt seinen Text auf einem Band; 60 px machten es so
     hoch, dass es das halbe Foto verdeckte. 44 px halten es kompakt. */
  --grad-h1:     clamp(27px, 17px + 2vw, 44px);
  /* Untergrenze 21 px: „ZAHNBEHANDLUNGEN" ist als Versalwort mit
     Sperrung 16 Zeichen lang und passte bei 25 px mit 323 px nicht in
     ein 320 px breites Fenster. */
  --grad-h2:     clamp(21px, 15px + 1.75vw, 38px);
  --grad-h3:     clamp(18px, 16px + 0.4vw, 21px);
  --grad-lead:   clamp(17px, 16px + 0.35vw, 20px);
  --grad-text:   clamp(16px, 15.4px + 0.15vw, 17.5px);
  --grad-klein:  15px;
  --grad-winzig: 13.5px;

  --sperrung-versal: 0.11em;

  /* --- Rundung -----------------------------------------------------
     Michaels Rueckmeldung vom 18.08.: die Seite ist zu hart und zu
     eckig. Vorher war ausser drei Formularfeldern nichts gerundet.

     Vier Stufen, nach Groesse der Flaeche gestaffelt. Eine einzige
     Rundung ueberall waere der Fehler in die andere Richtung: 12 px
     auf einem Knopf wirken zaghaft, 12 px auf einem grossen Foto
     wirken gar nicht. Die Regel ist: je groesser die Flaeche, desto
     groesser der Radius, und was man anfasst, ist ganz rund.

     Das Haus an der Essanestrasse hat Rundbogenfenster; die Rundung
     ist hier also nicht gegen den Kunden gebuerstet. Nachgeahmt wird
     der Bogen trotzdem nicht, das waere die Standardgeste jeder
     Vorlage. */
  --rund-fein:  8px;    /* Formularfelder, kleine Marken */
  --rund:      16px;    /* Bilder, Karten, Kacheln */
  --rund-gross: 34px;   /* grosse Flaechen, Auftaktband */
  --rund-voll: 999px;   /* alles, was angeklickt wird */

  /* --- Schatten ----------------------------------------------------
     Sehr flach und sehr weit. Ein enger dunkler Schatten wuerde die
     Kante nur verdoppeln statt sie zu loesen. */
  --schatten-fein:  0 1px 2px rgb(29 24 20 / 0.04),
                    0 4px 14px rgb(29 24 20 / 0.05);
  --schatten:       0 2px 4px rgb(29 24 20 / 0.04),
                    0 10px 30px rgb(29 24 20 / 0.08);
  --schatten-hoch:  0 3px 6px rgb(29 24 20 / 0.05),
                    0 18px 44px rgb(29 24 20 / 0.12);

  /* --- Bewegung ----------------------------------------------------- */
  --dauer:  180ms;
  --dauer-lang: 420ms;
  --kurve:  cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Bewegung, ergaenzt am 19.08. Michaels Befund: die bestehende Seite
     hat mehr Bewegung als die neue, und das geht nicht. Sie hat einen
     Bildwechsler im Auftakt, ein Aufsteigen beim Scrollen und einen
     Zoom beim Ueberfahren von Bildern.

     --auftritt ist die Dauer eines Aufsteigens, --versatz der Abstand
     zwischen zwei Nachbarn in derselben Reihe. 70 ms sind schnell
     genug, dass eine Vierergruppe nicht zerfaellt, und langsam genug,
     dass man die Staffelung sieht. --heben ist die Kurve fuer alles,
     was sich unter dem Zeiger hebt: sie schiesst leicht ueber und
     kommt zurueck, das laesst eine Flaeche lebendig wirken, ohne zu
     wippen. */
  --auftritt: 620ms;
  --versatz:  70ms;
  --weg:      16px;
  --heben:    cubic-bezier(0.34, 1.4, 0.64, 1);

  /* --- Kopfhoehe, von main.js gemessen und hier ueberschrieben ------ */
  --kopf-hoehe: 116px;
}

/* ==== 02-basis.css ==== */
/* ===================================================================
   Grundlagen und Typografie.
   =================================================================== */

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-var.woff2") format("woff2-variations");
  /* Die Gewichtsachse der Schrift reicht von 400 bis 700 und nicht
     weiter. Der Bereich muss stimmen, sonst rechnet der Browser mit
     Gewichten, die es nicht gibt. Die Seite nutzt 400, 500, 600, 700. */
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

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

html {
  /* clip statt hidden: hidden macht jedes sticky-Element im Baum
     wirkungslos, und die Kopfzeile ist sticky. */
  overflow-x: clip;
  scroll-behavior: smooth;
  /* Damit Sprungziele nicht unter der Kopfzeile landen. */
  scroll-padding-block-start: calc(var(--kopf-hoehe) + var(--raum-4));
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--weiss);
  color: var(--text);
  font-family: var(--schrift);
  font-size: var(--grad-text);
  font-weight: 400;
  line-height: 1.72;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, picture, svg, iframe { display: block; max-inline-size: 100%; }
img { block-size: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.22;
  color: var(--text);
  /* Keine automatische Silbentrennung. Sie hat am 18.08. aus dem
     Abschluss „SCHOENE, GESUNDE ZAEH-NE EIN LEBEN LANG!" gemacht: in
     einer gesperrten Versalzeile ist ein Trennstrich mitten im Wort
     besonders auffaellig. Ueberlange Komposita faengt stattdessen der
     kleinere Schriftgrad ab, geprueft bis 320 px. */
  hyphens: manual;
  overflow-wrap: break-word;
  text-wrap: balance;
  max-inline-size: 100%;
}

/* Die Abschnittsueberschrift der Praxis: Versalien, weit gesperrt,
   mittleres Gewicht. So steht sie seit Jahren auf der Seite. */
h2 {
  font-size: var(--grad-h2);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--sperrung-versal);
  line-height: 1.24;
}

h3 { font-size: var(--grad-h3); font-weight: 600; letter-spacing: 0.005em; }

p { margin: 0; }
p + p { margin-block-start: var(--raum-4); }

ul, ol, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }

.lead {
  font-size: var(--grad-lead);
  line-height: 1.66;
  color: var(--text-weich);
}

.klein  { font-size: var(--grad-klein); }
.weich  { color: var(--text-weich); }

/* Zwei benannte Abstaende statt style-Attributen im Markup. */
.abstand-oben       { margin-block-start: var(--raum-8); }
.abstand-oben-klein { margin-block-start: var(--raum-4); }

/* --- Links ---------------------------------------------------------
   Blau traegt, was angeklickt wird. Unterstrichen, damit ein Link im
   Fliesstext auch ohne Farbwahrnehmung erkennbar bleibt. */
a {
  color: var(--blau);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.19em;
  transition: color var(--dauer) var(--kurve),
              text-decoration-thickness var(--dauer) var(--kurve);
}

a:hover { color: var(--blau-hell); text-decoration-thickness: 2px; }
a:active { color: var(--blau-tief); }

:focus-visible {
  outline: 3px solid var(--blau);
  outline-offset: 2px;
  border-radius: var(--rund-fein);
}

::selection { background: var(--blau); color: var(--weiss); }

/* --- Bahn ----------------------------------------------------------- */
.bahn {
  inline-size: 100%;
  max-inline-size: var(--bahn);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.abschnitt { padding-block: var(--abschnitt); }

/* Die grauen Zaesurflaechen laufen weiterhin ueber die volle Breite,
   ihre vier Ecken sind aber gerundet. Vorher stiessen Weiss und Grau
   mit einer messerscharfen Kante ueber 1440 px aneinander; das war
   nach Michaels Befund vom 18.08. die groesste verbliebene Haerte.
   Weiss und Grau wechseln sich auf der ganzen Seite ab, es stossen
   also nie zwei gerundete Flaechen aufeinander. */
.flaeche-grau {
  background: var(--grau);
  border-radius: var(--rund-gross);
}

/* --- Kapitelkopf ----------------------------------------------------
   Zentrierte Versalueberschrift mit einer kurzen Zierlinie darunter.
   Das ist die Handschrift der bestehenden Seite; uebernommen, nur die
   Linie traegt jetzt die Aubergine des Logos statt eines Themefarbtons.

   Spaltenfluss statt Fliess, damit die Linie ueber `order` immer
   zwischen Ueberschrift und Einleitung steht, egal in welcher
   Reihenfolge das Markup sie liefert. */
.kapitel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-inline-size: var(--bahn-eng);
  margin-inline: auto;
  margin-block-end: var(--raum-7);
}

.kapitel > h2 { order: 1; }

.kapitel::after {
  content: "";
  order: 2;
  inline-size: 54px;
  block-size: 3px;
  border-radius: 999px;
  margin-block-start: var(--raum-4);
  background: var(--aubergine);
}

.kapitel > .lead {
  order: 3;
  margin-block-start: var(--raum-5);
}

.kapitel--linksbuendig {
  align-items: flex-start;
  text-align: start;
  margin-inline: 0;
}

/* --- Hilfsklassen ---------------------------------------------------- */
.nur-sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.springlink {
  position: absolute;
  inset-inline-start: -9999px;
  inset-block-start: 0;
  z-index: 300;
  background: var(--weiss);
  color: var(--blau);
  padding: var(--raum-3) var(--raum-4);
  border-end-end-radius: var(--rund);
  box-shadow: var(--schatten);
  font-weight: 600;
}

.springlink:focus { inset-inline-start: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===================================================================
   Randloses Raster.

   Am 19.08. dazugekommen, als Michael „modernere Gestaltung" fuer
   alles unterhalb des Auftakts bestellt hat. Der Auftakt macht vor,
   was die Seite darunter bis dahin nicht tat: ein Foto laeuft bis an
   beide Fensterkanten und wird von einer Farbflaeche abgefangen.
   Unterhalb sass dagegen jedes Bild brav in der 1240er Bahn, auch das
   Gruppenfoto mit fuenfundzwanzig Personen.

   Dieses Lineal loest das. Es ist ein Raster ueber die volle Breite
   mit benannten Linien: zwei Randspalten, die den Bahnrand nachbilden,
   und die Bahn selbst, in der Mitte noch einmal geteilt. Ein Kind
   sitzt standardmaessig in der Bahn und kann per Klasse nach links,
   nach rechts oder ueber beides hinauslaufen.

   Warum keine 100vw-Rechnung: `100vw` zaehlt die Scrollleiste mit und
   erzeugt auf Windows zuverlaessig zwei bis siebzehn Pixel Overflow.
   Prozentwerte in einem Raster kennen die Scrollleiste. */
.voll {
  display: grid;
  grid-template-columns:
    [rand-links] minmax(var(--rand), 1fr)
    [inhalt-start] minmax(0, calc(var(--bahn-innen) / 2))
    [mitte] minmax(0, calc(var(--bahn-innen) / 2))
    [inhalt-ende] minmax(var(--rand), 1fr)
    [rand-rechts];
}

.voll > * { grid-column: inhalt-start / inhalt-ende; min-inline-size: 0; }

/* Bis an die linke Kante, rechts bis zur Bahnmitte */
.voll > .bis-links  { grid-column: rand-links / mitte; }
/* Von der Bahnmitte bis an die rechte Kante */
.voll > .bis-rechts { grid-column: mitte / rand-rechts; }
/* Ueber die ganze Fensterbreite */
.voll > .ganz       { grid-column: rand-links / rand-rechts; }
/* Nur die linke bzw. rechte Bahnhaelfte, ohne Ausbruch */
.voll > .halb-links  { grid-column: inhalt-start / mitte; }
.voll > .halb-rechts { grid-column: mitte / inhalt-ende; }

/* Unter 900 px steht alles untereinander und in der Bahn; ein
   halbseitiges Bild waere dort nur noch ein Streifen. Ausbrueche nach
   links und rechts bleiben, sie geben auch schmalen Fenstern Luft. */
@media (max-width: 899px) {
  .voll > .bis-links,
  .voll > .bis-rechts { grid-column: rand-links / rand-rechts; }
  .voll > .halb-links,
  .voll > .halb-rechts { grid-column: inhalt-start / inhalt-ende; }
}

/* ==== 03-kopf.css ==== */
/* ===================================================================
   Kopfzeile.

   Logo links, Navigation rechts in Versalien, Anrufknopf am Ende.
   Weisser Grund, eine Zeile.

   Die blaue Kontaktleiste ueber der Kopfzeile ist am 18.08. auf
   Michaels Anweisung entfallen („diese Leiste gefaellt mir nicht, weg
   damit"). Sie trug Adresse, Sprechzeit und Nummer. Adresse und
   Sprechzeit stehen vollstaendig im Kontaktabschnitt, die Nummer sitzt
   jetzt als Knopf in der Kopfzeile und ist dort auffaelliger als
   vorher in der Leiste.

   Zwei Dinge sind anders als im Bestand, beide aus Notwendigkeit:
     - Die Kopfzeile ist sticky. Im Bestand scrollt sie weg, und auf
       einer Seite mit sieben Abschnitten ist die Telefonnummer dann
       nur noch ganz oben erreichbar.
     - Das Klappmenue ist echtes HTML mit button und aria-expanded,
       nicht das Skript des Themes.
   =================================================================== */

.kopf {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: var(--weiss);
  border-block-end: 1px solid var(--linie-fein);
}

/* Erst wenn Inhalt darunter durchlaeuft, bekommt die Kopfzeile einen
   Schatten. Vorher waere er eine Behauptung ohne Anlass. */
.kopf.ist-geloest {
  box-shadow: var(--schatten-fein);
  border-block-end-color: transparent;
}

/* --- Logo und Navigation --------------------------------------------- */
/* Die Kopfzeile laeuft breiter als der Inhalt darunter: Logo,
   sieben Navigationspunkte und Anrufknopf brauchen zusammen 1148 px,
   die normale Bahn bietet nur 1144. Ohne die zusaetzliche Breite
   klebte die Navigation am Logo. */
.kopf-innen {
  display: flex;
  align-items: center;
  gap: var(--raum-4);
  max-inline-size: 1400px;
  padding-block: var(--raum-3);
}

/* Das Logo links, alles Uebrige rechts. flex-shrink aus: ohne das
   wurde das Logo bei 1130 px Fensterbreite von 150 auf 92 px gequetscht,
   weil die Zeile zu eng wurde. Jetzt bleibt es in voller Groesse und
   die Zeile klappt stattdessen rechtzeitig ins Menue. */
.kopf-marke {
  margin-inline-end: auto;
  flex: 0 0 auto;
}

.kopf-marke { display: block; line-height: 0; text-decoration: none; }
.kopf-marke img { inline-size: clamp(150px, 13vw, 186px); block-size: auto; }

.kopf-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(13px, 1.35vw, 22px);
}

/* Nachgerechnet: die sieben Punkte tragen zusammen 81 Zeichen. Bei
   13,5 px und 0,085 em Sperrung brauchten sie mit dem Logo zusammen
   1222 px und brachen deshalb bei 1440 px Fensterbreite um.

   Die Sperrung ist am 19.08. beim Wechsel auf Instrument Sans von
   0,045 auf 0,035 em zurueckgenommen worden. Gemessen bei 1200 px:
   Raleway brauchte 735 px, Instrument Sans 747 px, also zwoelf mehr,
   und damit blieben zwischen Logo und Navigation nur noch die 20 px
   Mindestabstand stehen. 0,01 em weniger Sperrung ueber 81 Zeichen
   holt rund neun Pixel zurueck; die Zeile steht damit wieder so
   luftig wie vorher. Instrument Sans vertraegt die kleinere Sperrung,
   sie ist weniger eng gezeichnet als Raleway. */
.kopf-nav a {
  display: block;
  padding-block: var(--raum-2);
  color: var(--text);
  /* 12 px ist die Untergrenze aus den eigenen Regeln, und sie gilt
     ausdruecklich auch fuer gesperrte Kleinlabel; 11,5 px waren ein
     Verstoss. Gemessen mit Instrument Sans: bei 12 px und 0,03 em
     Sperrung braucht die Leiste 762 px und bleibt bis 1200 px
     einzeilig. Die Schwelle zum Klappmenue liegt trotzdem bei 1240 px,
     damit Reserve bleibt, wenn spaeter ein Menuepunkt dazukommt. */
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}

/* Die Unterstreichung waechst aus der Mitte. Sie belegt eigenen Platz
   ueber ein Pseudoelement, damit beim Ueberfahren nichts springt. */
.kopf-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
  border-radius: 1px;
  background: var(--aubergine);
  transform: scaleX(0);
  transition: transform var(--dauer) var(--kurve);
}

.kopf-nav a:hover { color: var(--blau); }
.kopf-nav a:hover::after,
.kopf-nav a:focus-visible::after { transform: scaleX(1); }

/* --- Anrufknopf ------------------------------------------------------
   Vollrund, in der Markenfarbe, mit Hoerersymbol. Er ersetzt die
   entfallene Kontaktleiste und ist die einzige farbige Flaeche in der
   sonst weissen Kopfzeile. */
.kopf-ruf {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  flex: 0 0 auto;
  min-block-size: 42px;
  padding-inline: var(--raum-5);
  border-radius: var(--rund-voll);
  background: var(--blau);
  color: var(--weiss);
  font-size: var(--grad-klein);
  font-weight: 700;
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dauer) var(--kurve);
}

.kopf-ruf:hover,
.kopf-ruf:focus-visible { background: var(--aubergine); color: var(--weiss); }
.kopf-ruf svg { inline-size: 16px; block-size: 16px; width: 16px; height: 16px; flex: 0 0 auto; }

/* --- Klappschalter, nur schmal sichtbar -------------------------------- */
.kopf-schalter {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 46px;
  block-size: 46px;
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: var(--rund-fein);
  background: var(--weiss);
  color: var(--text);
  cursor: pointer;
}

.kopf-schalter span,
.kopf-schalter span::before,
.kopf-schalter span::after {
  display: block;
  inline-size: 21px;
  block-size: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--dauer) var(--kurve),
              opacity var(--dauer) var(--kurve);
}

.kopf-schalter span { position: relative; }
.kopf-schalter span::before,
.kopf-schalter span::after { content: ""; position: absolute; inset-inline-start: 0; }
.kopf-schalter span::before { inset-block-start: -7px; }
.kopf-schalter span::after  { inset-block-start: 7px; }

.kopf-schalter[aria-expanded="true"] span { background: transparent; }
.kopf-schalter[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.kopf-schalter[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

/* ===================================================================
   Schmale Fenster: die Navigation klappt auf.

   Die Schwelle liegt bei 1200 px, nachgerechnet: Logo 150, Navigation
   730, Anrufknopf 172 und zwei Abstaende zu 20 ergeben 1092 px. Dazu
   kommen 2 x 48 px Rand, macht 1188. Darunter wird es eng, also klappt
   die Navigation ab 1239 px ins Menue.
   =================================================================== */

@media (max-width: 1239px) {
  .kopf-schalter { display: flex; }

  .kopf-nav {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    background: var(--weiss);
    border-end-start-radius: var(--rund);
    border-end-end-radius: var(--rund);
    box-shadow: var(--schatten);
    display: none;
  }

  .kopf-nav.ist-offen { display: block; }

  .kopf-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--raum-3) var(--rand) var(--raum-5);
    max-block-size: calc(100dvh - var(--kopf-hoehe));
    overflow-y: auto;
  }

  .kopf-nav li + li { border-block-start: 1px solid var(--linie-fein); }

  .kopf-nav a {
    padding-block: var(--raum-4);
    font-size: var(--grad-klein);
  }

  .kopf-nav a::after { display: none; }
}

/* Auf dem Telefon zeigt der Anrufknopf nur noch das Hoerersymbol: die
   Nummer daneben wuerde die Zeile sprengen, und unten laeuft ohnehin
   die feste Anrufleiste mit.

   Die Reihenfolge wird ueber `order` gesetzt und nicht ueber einen
   zweiten automatischen Rand. Mit zwei solchen Raendern teilten Logo
   und Knopf den freien Platz unter sich auf, und der Klappschalter
   stand in der Mitte der Zeile statt am rechten Rand. */
@media (max-width: 599px) {
  .kopf-ruf {
    order: 2;
    padding-inline: 0;
    inline-size: 44px;
    justify-content: center;
    font-size: 0;
    gap: 0;
  }
  .kopf-ruf svg { inline-size: 19px; block-size: 19px; width: 19px; height: 19px; }
  .kopf-schalter { order: 3; }
  .kopf-innen { gap: var(--raum-3); }
}

/* ==== 04-auftakt.css ==== */
/* ===================================================================
   Auftakt.

   Wie im Bestand: ein grosses Foto, darauf der Name des Hauses, der
   Claim und ein Weg weiter. Neu ist das Foto, es zeigt die drei
   Partner, aufgenommen 2026 im Garten hinter dem Haus.

   Der Text steht nicht auf dem Foto, sondern auf einem eigenen Band
   darunter. Warum, steht weiter unten bei .auftakt-band: kurz gesagt
   ist das Foto zu hell, um Schrift zu tragen, und jede Abdunklung, die
   das aendern wuerde, zerstoert das Foto.

   Das Band schliesst mit gerundeter Oberkante an und ueberlappt das
   Foto. Vorher trennte beides eine harte Linie; das war nach Michaels
   Befund vom 18.08. die haerteste Stelle der Seite.
   =================================================================== */

.auftakt {
  position: relative;
  display: grid;
  /* Zwei Zeilen: oben das Foto, das den Rest der Hoehe nimmt, unten
     das Band mit dem Text. Kein Verlauf ueber die Personen. */
  grid-template-rows: minmax(0, 1fr) auto;
  /* Hoeher als der erste Entwurf. Bei 666 px sass der Text zwischen 49
     und 69 Prozent der Hoehe, also mitten auf den weissen Polos, und
     erreichte gemessene 1,46 zu 1. Mit mehr Hoehe rutscht er in den
     Bereich, den der Verlauf traegt, ohne dass der Verlauf bis zu den
     Gesichtern hochwandern muss. */
  /* 23.08.2026: hoeher als vorher. Michael: „ich sehe immer noch zu wenig
     von der Zahnaerztin, der Banner muss weiter runter." Sie steht eine
     Kopfhoehe tiefer als die Maenner, ihr Kasack reicht im Foto von 46 bis
     97 Prozent der Bildhoehe, gemessen. Mit den vorherigen 88vh endete der
     sichtbare Ausschnitt bei 70 Prozent, also mitten auf ihrem Kasack.
     Mit 96vh und dem tieferen Bildstand reicht er bis 81 Prozent. Der
     Auftakt ist damit hoeher als ein 900-px-Fenster: die Knoepfe stehen
     bewusst an der Fensterkante, nicht mehr ganz darueber.

     Am selben Abend noch einmal von 96 auf 106vh, auf Michaels „den Banner
     noch etwas weiter runter". Der Rahmen waechst dadurch bei 1440 x 900 von
     615 auf rund 705 px, der Ueberschuss schrumpft entsprechend, und
     sichtbar wird jetzt fast das ganze Foto. */
  min-block-size: clamp(600px, 106vh, 1160px);
  overflow: hidden;
  background: var(--blau-tief);
  isolation: isolate;
}

.auftakt-bild {
  position: relative;
  overflow: hidden;
  min-block-size: 0;
}

.auftakt-bild img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* 8 Prozent, nachgerechnet am 18.08. nach Michaels Befund „Koepfe
     abgeschnitten".

     Bei 1440 px Breite wird das 16:9-Foto auf 810 px Hoehe skaliert;
     die Scheitel liegen dann bei 64 px. Sichtbar sind je nach Fenster
     nur 400 bis 560 px, der Ueberschuss betraegt also 250 bis 440 px.
     Mit den vorherigen 22 Prozent wurden davon oben bis zu 97 px
     weggeschnitten, also mehr als die 64 px Luft ueber den Koepfen: die
     Scheitel fielen aus dem Bild. Mit 8 Prozent sind es hoechstens
     35 px, es bleiben mindestens 29 px Luft.

     Am 23.08.2026 zuerst auf 22, dann auf 16 Prozent gesetzt. Grund fuer
     den zweiten Schritt ist der zentrierte Ausschnitt: in ihm liegt der
     oberste Scheitel, Dr. Joynson, bei 7,4 statt bei 10,9 Prozent der
     Bildhoehe, weil oben weniger Laub mitlaeuft. Mit 22 Prozent blieben auf
     einem 1920 x 1080 nur 16 px Luft darueber, mit 16 Prozent sind es 28. Flache Fenster bekommen weiter unten einen
     eigenen Wert, dort waechst der Ueberschuss und 22 Prozent davon
     wuerden den Scheitel treffen. */
  object-position: center 16%;
}

/* Der Traeger, gerechnet und nicht geschaetzt.

   Die hellste Stelle unter der Ueberschrift ist ein weisses Polo mit
   einer relativen Leuchtdichte von 0,91. Ein Schleier, der dort 7 zu 1
   erzeugen wuerde, muesste 70 Prozent decken und haette das halbe Foto
   verschluckt; gemessen kam die Ueberschrift mit Schleier auf 1,46 und
   nach dem Nachschaerfen auf 2,08 zu 1. Beides ist genau das Weiss auf
   Weiss, das nicht sein soll. Also traegt ein eigenes Band den Text:
   Weiss auf #143F84 sind gerechnete 10,1 zu 1, unabhaengig davon, was
   im Foto darueber liegt.

/* Das Band schiebt sich mit gerundeter Oberkante unter das Foto und
   ueberlappt es dabei. Vorher trennte eine harte 3-px-Linie beides,
   das war die haerteste Stelle der ganzen Seite. Die Rundung greift
   nur oben; unten schliesst das Band buendig an den naechsten
   Abschnitt an. */
.auftakt-band {
  position: relative;
  z-index: 1;
  margin-block-start: calc(var(--rund-gross) * -1);
  background: var(--blau);
  border-start-start-radius: var(--rund-gross);
  border-start-end-radius: var(--rund-gross);
}

.auftakt-innen {
  padding-block: var(--raum-4) var(--raum-5);
  text-align: center;
  color: var(--weiss);
}

.auftakt h1 {
  font-size: var(--grad-h1);
  font-weight: 500;
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  color: var(--weiss);
  text-wrap: balance;
}

.auftakt-claim {
  margin-block-start: var(--raum-4);
  font-size: clamp(17px, 15px + 0.6vw, 23px);
  font-weight: 400;
  color: var(--weiss);
}

.auftakt-wege {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--raum-3) var(--raum-4);
  margin-block-start: var(--raum-5);
}

/* --- Knoepfe ---------------------------------------------------------
   Der Bestand setzt hier einen Rahmenknopf. Uebernommen, dazu ein
   gefuellter fuer den Anruf: er ist die eine Handlung, die eine Praxis
   wirklich braucht. */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--raum-2);
  min-block-size: 52px;
  padding-inline: var(--raum-7);
  border: 2px solid transparent;
  /* Vollstaendig gerundet. Michael hatte das schon bei v9 verlangt:
     die eckigen Anrufknoepfe wirkten hart. */
  border-radius: var(--rund-voll);
  /* Keine Versalien und keine Sperrung mehr.

     Auf einem Knopf steht meist eine Telefonnummer oder eine
     E-Mail-Adresse. „INFO@ZAHNGESUNDHEIT.LI" in Versalien ist schlicht
     falsch geschrieben: Adressen setzt man klein. Gesperrte Versalien
     lesen sich ausserdem langsamer, weil das Wortbild fehlt, und genau
     das hat Michael am 18.08. an den Knoepfen beanstandet.

     Der Grad steigt von 15 auf 16 px: Kleinbuchstaben wirken bei
     gleichem Grad kleiner als Versalien. */
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--dauer) var(--kurve),
              color var(--dauer) var(--kurve),
              border-color var(--dauer) var(--kurve);
}

.knopf--voll {
  background: var(--blau);
  border-color: var(--blau);
  color: var(--weiss);
}

.knopf--voll:hover,
.knopf--voll:focus-visible { background: var(--blau-hell); border-color: var(--blau-hell); color: var(--weiss); }

.knopf--rahmen {
  border-color: var(--weiss);
  color: var(--weiss);
  background: rgb(255 255 255 / 0);
}

.knopf--rahmen:hover,
.knopf--rahmen:focus-visible { background: var(--weiss); color: var(--blau-tief); }

/* Derselbe Rahmenknopf fuer helle Flaechen. Der weisse oben steht auf
   dem Markenblau; auf dem hellen Grau des Kontaktblocks waere er nicht
   zu sehen. */
.knopf--linie {
  border-color: var(--blau);
  color: var(--blau);
  background: rgb(255 255 255 / 0);
}

.knopf--linie:hover,
.knopf--linie:focus-visible { background: var(--blau); color: var(--weiss); }

.knopf--dunkel {
  background: var(--aubergine);
  border-color: var(--aubergine);
  color: var(--weiss);
}

.knopf--dunkel:hover,
.knopf--dunkel:focus-visible { background: var(--blau); border-color: var(--blau); }

/* Im Auftakt liegt der Text auf dem Markenblau. Der gefuellte Knopf
   waere dort blau auf blau und damit unsichtbar; er tauscht die Farben.
   Der Rahmenknopf funktioniert unveraendert. */
.auftakt .knopf--voll {
  background: var(--weiss);
  border-color: var(--weiss);
  color: var(--blau-tief);
}

.auftakt .knopf--voll:hover,
.auftakt .knopf--voll:focus-visible {
  background: var(--grau);
  border-color: var(--grau);
  color: var(--blau-tief);
}

.auftakt :focus-visible { outline-color: var(--weiss); }

/* Der Pfeil aus dem Bestand, als reine Form ohne Zeichensatzabhaengigkeit. */
.knopf svg { inline-size: 17px; block-size: 17px; flex: 0 0 auto; }

/* ===================================================================
   Schmale Fenster.

   Hier bestimmt nicht mehr die Fensterhoehe den Auftakt, sondern das
   Foto: es bekommt sein eigenes Seitenverhaeltnis und das Band haengt
   sich darunter. Mit der festen Mindesthoehe blieben dem Foto bei
   320 px Breite nur rund 100 px, die vier waren ein Streifen.
   =================================================================== */

/* Flache Fenster: je niedriger der Rahmen, desto groesser der Ueberschuss,
   und ein fester Prozentsatz schneidet dann zu viel oben weg. Bei 1440 x 700
   waeren 22 Prozent bereits 92 px, das ist mehr als die 88 px bis zum
   Scheitel. */
@media (min-width: 701px) and (max-height: 800px) {
  .auftakt-bild img { object-position: center 12%; }
}

@media (max-width: 700px) {
  .auftakt {
    min-block-size: 0;
    grid-template-rows: auto auto;
  }

  .auftakt-bild {
    aspect-ratio: 4 / 3;
    max-block-size: 66vh;
  }

  /* Der enge Ausschnitt ist bereits 4:3 und wird kaum noch beschnitten;
     ein kleiner Wert haelt die Scheitel sicher im Bild. */
  .auftakt-bild img { object-position: center 12%; }
}

@media (max-width: 560px) {
  .auftakt-innen { padding-block: var(--raum-5) var(--raum-6); }
  .knopf { inline-size: 100%; padding-inline: var(--raum-4); }
  .auftakt-wege { flex-direction: column; align-items: stretch; }
}

/* ==== 05-inhalt.css ==== */
/* ===================================================================
   Inhaltsabschnitte.

   Alle Bausteine hier stehen so auch im Bestand: die Aufklappliste
   unter „Was uns auszeichnet", die Personenkarten, die farbigen
   Kacheln der besonderen Leistungen, die Behandlungsliste. Neu ist
   nur, wie sie gebaut sind: als HTML, das ohne Skript funktioniert.
   =================================================================== */

/* --- Fliesstextspalte ------------------------------------------------
   Der Bestand setzt „Über uns" zentriert; uebernommen, aber schmaler.
   Zentrierter Fliesstext hat auf beiden Seiten eine unruhige Kante,
   und je laenger die Zeile, desto schwerer findet das Auge den
   Zeilenanfang. Bei 58 Zeichen bleibt das im Rahmen. */
.text-mitte {
  max-inline-size: 58ch;
  margin-inline: auto;
  text-align: center;
}

.text-spalte { max-inline-size: 68ch; }

/* ===================================================================
   Baender: Text in der einen Bahnhaelfte, Bild bis an die Fensterkante.

   Die Figur stammt aus dem Auftakt: dort steht das Foto randlos und
   wird von einer Flaeche abgefangen. Unterhalb sass bis zum 19.08.
   jedes Bild in der Bahn. Verwendet in „Über uns".
   =================================================================== */
.abschnitt--band {
  align-items: center;
  /* Das Bild traegt hier die Hoehe. Der Abschnittsabstand oben und
     unten wuerde es von der Kante loesen, also faellt er weg und die
     Textspalte bringt ihren eigenen mit. */
  padding-block: 0;
  overflow: clip;
}

.band-text {
  padding-block: var(--abschnitt);
  padding-inline-end: var(--raum-8);
}

.band-bild { margin: 0; }

/* Das Bild behaelt sein Verhaeltnis, statt auf die Texthoehe gestreckt
   zu werden. Der erste Versuch am 19.08. hat es mit object-fit auf die
   Spaltenhoehe gezogen; dabei fielen links und rechts je zehn Prozent
   weg, und Dr. Harm stand nur noch zur Haelfte im Bild. Auf dem Foto
   sind drei Personen ueber die ganze Breite verteilt, von zehn bis
   fuenfundneunzig Prozent, es gibt also keinen engeren Ausschnitt, der
   alle drei ganz zeigt. Also bleibt das Bild ganz. */
.band-bild img {
  inline-size: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-start-start-radius: var(--rund);
  border-end-start-radius: var(--rund);
}

/* Auf dem Telefon steht das Bild ueber dem Text und wird flacher, sonst
   fuellt es allein zwei Bildschirmhoehen. */
@media (max-width: 899px) {
  .abschnitt--band { display: block; padding-block: 0 var(--abschnitt); }
  .band-text { padding-inline: var(--rand); padding-block: var(--abschnitt) 0; }
  .band-bild { margin-block-start: var(--raum-8); }
  .band-bild img { aspect-ratio: 4 / 3; min-block-size: 0; }
}

/* ===================================================================
   „Was uns auszeichnet": Kapitelkopf links, Aufklappliste rechts.

   Die Liste stand ueber die volle Bahnbreite, die Ueberschrift
   zentriert darueber. Jetzt teilen sie sich die Bahn. Der Kopf klebt
   beim Scrollen, damit die linke Spalte nicht leer mitlaeuft, waehrend
   rechts sechs Punkte durchziehen.
   =================================================================== */
@media (min-width: 940px) {
  .merkmale-raster {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: var(--raum-9);
    align-items: start;
  }

  .merkmale-kopf {
    position: sticky;
    inset-block-start: calc(var(--kopf-hoehe) + var(--raum-7));
  }

  .merkmale-kopf .kapitel { margin-block-end: var(--raum-7); }
}

/* Ohne Bild stuende links eine Ueberschrift allein auf siebenhundert
   Pixel Hoehe. Genau das hat Michael an frueheren Entwuerfen
   bemaengelt: halbleere Bildschirmhaelften. */
.merkmale-bild { margin: 0; }

.merkmale-bild img {
  inline-size: 100%;
  /* Hochkant, damit die Spalte neben der sechsteiligen Liste nicht
     unten leer ausläuft. Der Ausschnitt sitzt bei 62 Prozent, dort
     steht die Person; mittig geschnitten waere nur der Blumenstrauss
     im Bild. */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 62% center;
  border-radius: var(--rund);
  box-shadow: var(--schatten-fein);
}

@media (max-width: 939px) {
  .merkmale-bild { margin-block: var(--raum-6) var(--raum-7); }
  .merkmale-bild img { aspect-ratio: 16 / 9; }
}

/* --- Zwei Spalten, Bild und Text ------------------------------------- */
.paar {
  display: grid;
  gap: var(--raum-6);
  align-items: center;
}

@media (min-width: 860px) {
  .paar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(var(--raum-6), 4vw, var(--raum-9));
  }
  .paar--oben { align-items: start; }
  .paar--bild-links > .paar-text { order: 2; }
  .paar--bild-links > .paar-bild { order: 1; }
}

.paar-bild img {
  inline-size: 100%;
  border-radius: var(--rund);
}
.paar-text > h3 + p { margin-block-start: var(--raum-4); }

figure { margin: 0; }

/* Jedes Bild ausserhalb des Auftakts traegt dieselbe Rundung. Ohne sie
   stiessen zwoelf scharfe Ecken gegen den Text; Michaels Befund vom
   18.08. war „zu hart, zu eckig". */
figure > picture > img,
figure > img { border-radius: var(--rund); }

figcaption {
  margin-block-start: var(--raum-3);
  font-size: var(--grad-winzig);
  color: var(--text-weich);
}

/* ===================================================================
   Aufklappliste.

   Der Bestand zeigt die sechs Merkmale als Aufklapper mit einem Pfeil
   rechts. Uebernommen, aber als details und summary: das funktioniert
   ohne JavaScript, ist mit der Tastatur bedienbar und meldet sich von
   selbst korrekt an Vorlesesoftware.
   =================================================================== */

.klapper { border-block-start: 1px solid var(--linie); }

.klapp {
  border-block-end: 1px solid var(--linie);
}

.klapp > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-4);
  padding-block: var(--raum-5);
  font-size: var(--grad-h3);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  transition: color var(--dauer) var(--kurve);
}

.klapp > summary::-webkit-details-marker { display: none; }
.klapp > summary:hover { color: var(--blau); }
.klapp > summary:focus-visible { outline-offset: -3px; border-radius: var(--rund-fein); }

/* Das Zeichen rechts: ein Kreuz, das sich beim Oeffnen zum Strich
   dreht. Zwei Balken, kein Zeichensatz, kein Bild. */
.klapp-zeichen {
  position: relative;
  flex: 0 0 auto;
  inline-size: 17px;
  block-size: 17px;
}

.klapp-zeichen::before,
.klapp-zeichen::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  inline-size: 17px;
  block-size: 2px;
  border-radius: 1px;
  background: var(--aubergine);
  transform: translateY(-50%);
  transition: transform var(--dauer) var(--kurve), opacity var(--dauer) var(--kurve);
}

.klapp-zeichen::after { transform: translateY(-50%) rotate(90deg); }
.klapp[open] .klapp-zeichen::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }

.klapp-inhalt {
  padding-block-end: var(--raum-5);
  max-inline-size: 74ch;
  color: var(--text-weich);
}

/* ===================================================================
   Personenkarten.

   Bild oben, Name und Rolle zentriert darunter, wie im Bestand.

   Zu den Bildern: seit 21.08.2026 stehen hier drei Portraits, die drei
   Partner. Dr. Lingg ist auf Weisung von Dr. Harm aus der Reihe
   genommen. Damit stammen alle drei aus demselben Shooting vom
   06.07.2026; der frueher sichtbare Bruch zwischen Winter- und
   Sommeraufnahme ist weg. Alle drei stehen im Rahmenverhaeltnis 4 zu 5.

   Das Raster ist auto-fit und traegt den Wegfall ohne Eingriff: aus
   vier Spalten werden drei, jede rund 363 px breit bei voller Bahn.
   Die sizes-Angabe im Markup ist entsprechend von 22vw auf 30vw
   angehoben, sonst laedt der Browser zu kleine Dateien.
   =================================================================== */

/* Flex statt Grid, seit die Reihe drei Karten traegt.

   Mit auto-fit und 240 px Mindestbreite standen bei 768 px zwei Karten
   oben und eine allein links darunter. Das Raster kann eine ungerade
   Karte nicht mittig setzen, Flex kann es: justify-content zentriert
   die letzte Zeile von selbst, egal ob dort eine, zwei oder drei
   Karten stehen.

   Basis 200 px statt 240: damit stehen die drei ab rund 715 px
   nebeneinander, also schon auf dem Tablet, und nicht erst ab 830.
   Die Obergrenze 360 px verhindert, dass drei Karten auf grossen
   Schirmen ins Plakathafte wachsen; bei voller Bahn fuellen sie
   1136 von 1144 px. */
.leute {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--raum-6) var(--raum-5);
}

.person {
  flex: 1 1 200px;
  max-inline-size: 360px;
  text-align: center;
}

.person figure {
  margin-block-end: var(--raum-4);
  background: var(--grau-tief);
  border-radius: var(--rund);
  box-shadow: var(--schatten-fein);
  overflow: hidden;
}

.person figure img {
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  transition: transform var(--dauer-lang) var(--kurve);
}

@media (hover: hover) {
  .person:hover figure img { transform: scale(1.03); }
}

.person-name {
  font-size: var(--grad-h3);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

.person-rolle {
  margin-block-start: var(--raum-2);
  font-size: var(--grad-klein);
  color: var(--text-weich);
  line-height: 1.5;
}

/* Bei den Gruppenbildern stehen zwei Reihen untereinander. Das Wort davor
   traegt die Zuordnung und darf nicht in der Zeile untergehen. */
.person-rolle strong {
  color: var(--text);
  font-weight: 600;
}

/* Zwischen den beiden Reihen etwas Luft, sonst laufen sie ineinander,
   sobald eine Reihe umbricht. Der Umbruch selbst steht im Text. */
.person-rolle br {
  content: "";
  display: block;
  margin-block-end: var(--raum-3);
}

/* Auf dem Telefon steht ein Gruppenbild allein in der Zeile. Zwei
   nebeneinander lassen den Bildtext auf gut zwanzig Zeichen schrumpfen,
   dann zerfaellt die Namensreihe in vier Zeilen. */
@media (max-width: 599px) {
  .person--quer { flex-basis: 100%; max-inline-size: none; }
}

/* Gruppenbilder sind quer und brauchen kein Hochformat. */
.person--quer figure img { aspect-ratio: 3 / 2; object-position: center; }

/* ===================================================================
   Kacheln der besonderen Leistungen.

   Der Bestand setzt sie gefuellt mit einem Zeichen oben. Die Zeichen
   sind hier weggelassen: selbst gezeichnet lasen sie sich falsch, das
   Alterszeichen wie eine durchgestrichene Person und das Zahnzeichen
   wie ein Tropfen. Ein missverstaendliches Symbol schadet mehr, als
   ein fehlendes fehlt.

   Die mittlere Kachel traegt Aubergine statt Blau. Nicht zur Zierde:
   die Alterszahnmedizin ist die Leistung, die auf der bestehenden
   Seite am schwersten zu finden ist, und die drei Kacheln waeren
   sonst dreimal dasselbe.
   =================================================================== */

.kacheln {
  display: grid;
  gap: var(--raum-5);
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
}

.kachel {
  display: flex;
  flex-direction: column;
  padding: var(--raum-7) var(--raum-6) var(--raum-6);
  border-radius: var(--rund);
  background: var(--blau);
  color: var(--auf-blau);
  text-align: center;
  box-shadow: var(--schatten);
  transition: background-color var(--dauer) var(--kurve),
              transform var(--dauer) var(--kurve),
              box-shadow var(--dauer) var(--kurve);
}

@media (hover: hover) {
  .kachel:hover {
    transform: translateY(-3px);
    box-shadow: var(--schatten-hoch);
  }
}

.kachel:nth-child(2) { background: var(--aubergine); }

.kachel h3 {
  position: relative;
  color: var(--weiss);
  padding-block-end: var(--raum-4);
}

/* Eine kurze, rund abgeschlossene Marke statt einer Linie ueber die
   ganze Kachelbreite. */
.kachel h3::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 0;
  translate: -50% 0;
  inline-size: 34px;
  block-size: 3px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.45);
}

.kachel p {
  margin-block-start: var(--raum-4);
  color: var(--auf-blau-weich);
  font-size: var(--grad-klein);
  flex: 1 1 auto;
}

.kachel-weg {
  margin-block-start: var(--raum-5);
  color: var(--weiss);
  font-weight: 600;
  font-size: var(--grad-klein);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.28em;
}

.kachel-weg:hover { color: var(--weiss); }
.kachel :focus-visible { outline-color: var(--weiss); }

/* ===================================================================
   Behandlungsliste. Zehn Eintraege, je ein Begriff und ein Halbsatz.
   =================================================================== */

.liste { display: grid; }

@media (min-width: 760px) {
  .liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--raum-8); }
}

.liste > li {
  display: grid;
  gap: var(--raum-1);
  padding-block: var(--raum-4);
  border-block-end: 1px solid var(--linie);
}

@media (min-width: 520px) {
  .liste > li {
    /* Gleich breite Spalten. Bei 1fr zu 1.25fr blieben "Parodontologie",
       "Zahnerhaltung" und "Schienentherapie" auf iPad hochkant (768 und
       820 px, zwei Rasterspalten) rund zehn Pixel zu breit und liefen in
       die Beschreibung. Ausgemessen: erst bei gleichen Spalten bleiben die
       Einwortbegriffe einzeilig, und die Beschreibung braucht dadurch
       keine Zeile mehr. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--raum-4);
    align-items: baseline;
  }
}

.liste b {
  font-weight: 600;
  font-size: var(--grad-h3);
  color: var(--text);
  /* Auf iPad hochkant (768 und 820 px) ist die erste Spalte knapper als
     "Parodontologie" breit ist. Ohne Umbruch laeuft der Begriff in die
     Beschreibung. Silbentrennung zuerst, Bruch im Wort als Netz. */
  hyphens: auto;
  overflow-wrap: break-word;
}

.liste span { color: var(--text-weich); font-size: var(--grad-klein); }

/* --- Aufzaehlung ------------------------------------------------------ */
.punkte { display: grid; gap: var(--raum-3); }

.punkte > li {
  position: relative;
  padding-inline-start: var(--raum-5);
}

/* Ein Kreis, kein Quadrat. Sechs scharfe Ecken je Zeile waren genau
   die Haerte, die Michael am 18.08. beanstandet hat. */
.punkte > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.62em;
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--aubergine);
}

/* --- Name einer Aerztin oder eines Arztes im Fliesstext ---------------- */
.name { font-weight: 600; color: var(--aubergine); }

/* ===================================================================
   Unterseiten.

   Die Unterseiten des Bestands haben kein Auftaktfoto, und ein
   erfundenes Stimmungsbild waere genau das, was an KI-Seiten stoert.
   Stattdessen ein schmaler Seitenkopf: Herkunft, Titel, Einleitung.
   =================================================================== */

.seitenkopf {
  padding-block: var(--raum-8) var(--raum-7);
  background: var(--grau);
  border-end-start-radius: var(--rund-gross);
  border-end-end-radius: var(--rund-gross);
}

.seitenkopf-ueber {
  font-size: var(--grad-winzig);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--aubergine);
  margin-block-end: var(--raum-3);
}

.seitenkopf h1 {
  font-size: clamp(30px, 20px + 2.2vw, 50px);
  font-weight: 500;
  line-height: 1.14;
  max-inline-size: 18ch;
}

.seitenkopf .lead {
  margin-block-start: var(--raum-5);
  max-inline-size: 62ch;
}

/* Eine Zwischenueberschrift, die nicht die volle Versalwucht der
   Abschnittsueberschrift braucht. */
.h2-klein {
  font-size: clamp(19px, 16px + 0.7vw, 25px);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin-block-end: var(--raum-4);
}

.h2-klein + p { margin-block-start: 0; }

/* --- Rechtstexte ------------------------------------------------------ */
.rechtstext {
  max-inline-size: 68ch;
}

.rechtstext > h2 { margin-block-start: var(--raum-7); }
.rechtstext > h2:first-child { margin-block-start: 0; }
.rechtstext address { font-style: normal; }
.rechtstext ul { margin-block-start: var(--raum-4); }

/* Die Seite fuer unbekannte Adressen, /404.html. Eigene Regeln statt
   Aenderungen an .rechtstext: die gelten sonst auch fuer Impressum und
   Datenschutz, wo die Abstaende stimmen. */
.fehlseite ul { list-style: none; padding-inline-start: 0; }
.fehlseite ul li + li { margin-block-start: var(--raum-2); }
.fehlseite .fehlseite-notfall { margin-block-start: var(--raum-6); }

/* Ein Hinweis in eigener Sache, sichtbar abgesetzt: er richtet sich an
   die Praxis, nicht an Patienten. */
.hinweis {
  margin-block-start: var(--raum-7);
  padding: var(--raum-4) var(--raum-5);
  border-inline-start: 3px solid var(--aubergine);
  border-radius: 0 var(--rund-fein) var(--rund-fein) 0;
  background: var(--grau);
  font-size: var(--grad-klein);
  color: var(--text-weich);
}

/* --- Pfadleiste -------------------------------------------------------
   Ersetzt den Versalien-Kicker ueber der Ueberschrift, der auf der
   Bannliste steht und nichts leistet. Eine Pfadleiste orientiert und
   ist anklickbar. */
.pfad {
  padding-block: var(--raum-4) 0;
  background: var(--grau);
}

.pfad ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-2);
  font-size: var(--grad-winzig);
  color: var(--text-weich);
}

.pfad li { display: flex; align-items: center; gap: var(--raum-2); }

/* Das Trennzeichen als Form, nicht als Schriftzeichen: ein Chevron aus
   zwei Strichen liegt sauber auf der Grundlinie. */
.pfad li + li::before {
  content: "";
  inline-size: 5px;
  block-size: 5px;
  border-inline-end: 1.5px solid var(--linie);
  border-block-start: 1.5px solid var(--linie);
  rotate: 45deg;
  flex: 0 0 auto;
}

.pfad a { color: var(--text-weich); text-decoration-color: var(--linie); }
.pfad a:hover { color: var(--blau); text-decoration-color: currentColor; }
.pfad [aria-current] { color: var(--text); font-weight: 600; }

/* Der Seitenkopf schliesst direkt an die Pfadleiste an. */
.pfad + .seitenkopf { padding-block-start: var(--raum-5); }

/* ==== 06-kontakt.css ==== */
/* ===================================================================
   Sprechstunden, Kontakt, Formular, Fuss, Anrufleiste.
   =================================================================== */

.kontakt {
  background: var(--grau);
  border-radius: var(--rund-gross);
}

.kontakt-raster {
  display: grid;
  gap: var(--raum-7);
  margin-block-start: var(--raum-7);
}

@media (min-width: 900px) {
  .kontakt-raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--raum-9);
    align-items: start;
  }
}

.angaben { display: grid; gap: var(--raum-6); }

/* Die Marke unter der Ueberschrift ist kurz und rund abgeschlossen,
   nicht mehr eine Linie ueber die volle Spaltenbreite. */
.angabe h3,
.anfahrt-kopf h3 {
  margin-block-end: var(--raum-4);
  padding-block-end: var(--raum-3);
  position: relative;
}

.anfahrt-kopf h3 { margin-block-end: 0; }

.angabe h3::after,
.anfahrt-kopf h3::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  inline-size: 38px;
  block-size: 3px;
  border-radius: 999px;
  background: var(--aubergine);
}

.zeiten { display: grid; gap: var(--raum-3); }
.zeiten > div { display: grid; gap: 2px; }
.zeiten dt { font-weight: 600; }
.zeiten dd { color: var(--text-weich); font-variant-numeric: tabular-nums; }

.angabe address { font-style: normal; }

/* --- Formular ---------------------------------------------------------
   Der Bestand fragt Name, E-Mail und Nachricht. Uebernommen. Dazu ein
   Honigtopf gegen Maschinen; ein Bilderraetsel waere fuer eine Praxis
   mit aelterer Kundschaft die schlechtere Huerde. */
.formular {
  display: grid;
  gap: var(--raum-4);
  padding: var(--raum-7);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  box-shadow: var(--schatten-fein);
}

.feld { display: grid; gap: var(--raum-2); }

.feld label {
  font-size: var(--grad-klein);
  font-weight: 600;
}

.feld .pflicht { color: var(--aubergine); }

.feld input,
.feld textarea {
  inline-size: 100%;
  min-block-size: 50px;
  padding: var(--raum-3);
  border: 1px solid var(--linie);
  border-radius: var(--rund-fein);
  background: var(--weiss);
  color: var(--text);
  font-family: inherit;
  font-size: var(--grad-text);
  line-height: 1.6;
  transition: border-color var(--dauer) var(--kurve),
              box-shadow var(--dauer) var(--kurve);
}

.feld textarea { min-block-size: 148px; resize: vertical; }

.feld input:hover,
.feld textarea:hover { border-color: var(--text-weich); }

.feld input:focus-visible,
.feld textarea:focus-visible {
  outline: none;
  border-color: var(--blau);
  box-shadow: 0 0 0 3px rgb(20 63 132 / 0.16);
}

/* Der Honigtopf. Nicht display:none, das ueberspringen viele Maschinen
   gezielt; stattdessen aus dem Sichtfeld geschoben und aus dem
   Tabulatorlauf genommen.

   Weggeschoben heisst aber: fuer die Adress-Autovervollstaendigung von
   Chrome und Safari zaehlt das Feld als sichtbar. Deshalb darf es keinen
   Namen tragen, den die Heuristik kennt. Es heisst "hinweisfeld" und
   traegt autocomplete="new-password"; ein Feld namens "ort" hatten die
   Browser als Ortsfeld gefuellt und damit echte Anfragen verworfen. */
.honig {
  position: absolute;
  inset-inline-start: -9999px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

.formular-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-3) var(--raum-4);
}

.formular-hinweis { font-size: var(--grad-winzig); color: var(--text-weich); }

/* Die Rueckmeldung nach dem Abschicken. Sie erscheint erst, wenn
   main.js etwas hineinschreibt: ohne Text kein Kasten, kein Abstand,
   keine leere Zeile unter dem Knopf.

   Der Zustand steht in einem data-Attribut und nicht in einer zweiten
   Klasse, damit immer nur einer davon gilt. Farbe traegt die Aussage
   mit, aber nicht allein: der Text sagt es ebenso, und die Leiste links
   bleibt auch bei Farbenblindheit als Form erkennbar. */
.formular-antwort {
  margin: 0;
  font-size: var(--grad-klein);
  line-height: 1.55;
}

.formular-antwort[data-stand] {
  margin-block-start: var(--raum-4);
  padding: var(--raum-3) var(--raum-4);
  border-inline-start: 3px solid currentColor;
  background: rgb(20 63 132 / 0.04);
}

.formular-antwort[data-stand="gut"]     { color: #2f5d3f; }
.formular-antwort[data-stand="fehler"]  { color: #8a2b2b; background: rgb(138 43 43 / 0.05); }
.formular-antwort[data-stand="laeuft"]  { color: var(--text-weich); }

/* Ein Feld, das der Server beanstandet hat. Der Rahmen allein waere
   wieder nur Farbe; die Meldung darunter nennt den Grund im Klartext. */
.feld input[aria-invalid="true"],
.feld textarea[aria-invalid="true"] {
  border-color: #8a2b2b;
}

.feld-fehler {
  margin: var(--raum-2) 0 0;
  font-size: var(--grad-winzig);
  color: #8a2b2b;
}

/* --- Anfahrt ----------------------------------------------------------
   Das Parkplatzbild stand zuerst als letztes in der linken Spalte. Da die
   linke Spalte damit deutlich laenger wurde als das Formular rechts,
   klaffte dort unten ein Loch ueber die halbe Bahnbreite. Seither laeuft
   die Anfahrt unter beiden Spalten durch.

   Seit dem 25.08.2026 steht dort ein eigener Block: Ueberschrift und
   Knopf in einer Zeile, darunter Lageplan und Parkplatzfoto nebeneinander,
   jedes mit seinem Bildtext. Anlass war Dr. Harms Bitte, das Foto und den
   Satz dazu beieinander zu stellen; sie standen vorher zwei
   Bildschirmhoehen auseinander. */
.anfahrt {
  /* Kein eigener Abstand nach oben: das Raster setzt zwischen seinen
     Reihen bereits raum-9. Mit einem weiteren Abstand klafft zwischen
     dem Formular und der Anfahrt ein Loch. */
  grid-column: 1 / -1;
}

.anfahrt-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-4);
  margin-block-end: var(--raum-5);
}

.anfahrt-paar { display: grid; gap: var(--raum-5); }

@media (min-width: 760px) {
  .anfahrt-paar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--raum-6);
  }
}

.anfahrt-teil { display: grid; gap: var(--raum-3); align-content: start; }

.anfahrt-teil img {
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--rund);
  box-shadow: var(--schatten-fein);
}

/* Beide Bilder haben dasselbe Verhaeltnis, 900 zu 417, und stehen damit
   nebeneinander gleich hoch. Auf dem Telefon ist dieser Streifen fuer
   einen Plan zu flach: bei 330 px Breite bliebe er 150 px hoch und der
   Strassenname waere nicht mehr zu lesen. Dort wird er deshalb hoeher
   gestellt und seitlich beschnitten. Die Praxis steht in der Bildmitte
   und bleibt bei jedem Zuschnitt stehen. */
.anfahrt-plan { aspect-ratio: 900 / 417; object-fit: cover; }

@media (max-width: 620px) {
  .anfahrt-plan { aspect-ratio: 4 / 3; }
}

/* --- Karte auf Klick ---------------------------------------------------
   Solange niemand geklickt hat, liegt hier der eigene Lageplan und es
   wird nichts von Google geladen. Darueber ein Schleier mit dem Knopf.
   Nach dem Klick nimmt der Rahmen mit der Google-Karte denselben Platz
   ein, deshalb traegt der Halter das Seitenverhaeltnis und nicht das
   Bild. */
.karte-halter {
  position: relative;
  aspect-ratio: 900 / 417;
  border-radius: var(--rund);
  overflow: hidden;
  box-shadow: var(--schatten-fein);
  background: var(--grau-tief);
}

@media (max-width: 620px) {
  .karte-halter { aspect-ratio: 4 / 3; }
}

.karte-halter > img,
.karte-halter > iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  /* Die Rundung steht auch auf dem Rahmen selbst. `overflow: hidden` am
     Halter allein schneidet ein iframe in mehreren Browsern nicht ab, die
     Ecken bleiben eckig. */
  border-radius: var(--rund);
  box-shadow: none;
}

.karte-halter > img { object-fit: cover; }

.karte-schleier {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--raum-3);
  padding: var(--raum-4);
  text-align: center;
  /* Dunkel genug, dass die weisse Schrift darauf steht, hell genug, dass
     der Plan darunter noch als Karte zu erkennen ist. */
  background: linear-gradient(rgb(20 63 132 / 0.58), rgb(14 44 92 / 0.72));
}

/* Weisser Knopf auf blauem Grund, wie im Abschluss. Ein blauer Knopf auf
   blauem Schleier verschwindet. */
.karte-schleier .knopf--voll {
  background: var(--weiss);
  border-color: var(--weiss);
  color: var(--blau-tief);
}

.karte-schleier .knopf--voll:hover,
.karte-schleier .knopf--voll:focus-visible {
  background: var(--blau-tief);
  border-color: var(--weiss);
  color: var(--weiss);
}

.karte-hinweis {
  max-inline-size: 36ch;
  margin: 0;
  font-size: var(--grad-klein);
  line-height: 1.5;
  color: var(--auf-blau);
}

.anfahrt-teil figcaption {
  font-size: var(--grad-klein);
  line-height: 1.55;
  color: var(--text-weich);
}

/* Die Adresse fuehrt in die Karten-App. Sie ist als Verweis erkennbar,
   aber leise: eine feine Unterstreichung, die beim Zeigen kraeftiger
   wird. Ein blaues Wortpaar mitten in einer Anschrift zerrisse sie. */
.karte-verweis {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--linie);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dauer) var(--kurve), color var(--dauer) var(--kurve);
}

.karte-verweis:hover,
.karte-verweis:focus-visible {
  color: var(--blau);
  text-decoration-color: currentColor;
}

/* Im blauen Abschluss traegt die Anschrift weisse Schrift. Blau als
   Zeigefarbe waere dort unsichtbar. */
.abschluss .karte-verweis {
  text-decoration-color: rgb(255 255 255 / 0.4);
}

.abschluss .karte-verweis:hover,
.abschluss .karte-verweis:focus-visible {
  color: var(--auf-blau);
  text-decoration-color: currentColor;
}

.karte-hinweis a {
  color: inherit;
  text-underline-offset: 3px;
}

/* Zurueck zum eigenen Plan. Steht erst da, wenn die Google-Karte geladen
   ist. */
.karte-zurueck {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--grad-winzig);
  color: var(--text-weich);
  text-decoration: underline;
  text-decoration-color: var(--linie);
  text-underline-offset: 3px;
  cursor: pointer;
}

.karte-zurueck:hover,
.karte-zurueck:focus-visible {
  color: var(--blau);
  text-decoration-color: currentColor;
}

.anfahrt-teil .quelle { display: block; font-size: var(--grad-winzig); }
.anfahrt-teil .quelle a { color: inherit; text-underline-offset: 2px; }

/* ===================================================================
   Abschluss in Blau.
   =================================================================== */

/* ===================================================================
   Abschluss und Fuss.

   Michaels Befund vom 18.08.: „den Abschluss der Seite finde ich gar
   nicht stimmig, passt auch nicht zur Corporate Identity."

   Er hatte in beidem recht. Der Abschluss war eine grosse blaue Flaeche,
   die zu drei Vierteln leer stand, und darunter lag ein Balken in
   #393C3E. Dieses Grau ist die Textfarbe der Seite, aber es ist keine
   Farbe der Marke; die Marke besteht aus Royalblau und Aubergine.

   Jetzt ist beides ein zusammenhaengender Fussbereich in den beiden
   Logofarben: oben der Claim mit den zwei Wegen, darunter drei Spalten
   mit Anschrift, Sprechzeiten und Seitenverweisen, ganz unten eine
   schmale Zeile in Blau-Tief. Die Flaeche traegt jetzt Inhalt, statt
   nur gross zu sein.
   =================================================================== */

.abschluss {
  position: relative;
  z-index: 1;
  background: var(--blau);
  color: var(--auf-blau);
  padding-block: var(--raum-8) var(--raum-7);
  border-start-start-radius: var(--rund-gross);
  border-start-end-radius: var(--rund-gross);
}

.abschluss a { color: var(--weiss); }
.abschluss :focus-visible { outline-color: var(--weiss); }

/* --- Der Claim, mittig ueber den Spalten ---------------------------- */
.abschluss-kopf { text-align: center; }

.abschluss-claim {
  font-size: clamp(21px, 16px + 1.1vw, 30px);
  font-weight: 500;
  line-height: 1.28;
  color: var(--weiss);
  margin-inline: auto;
}

.abschluss-wege {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--raum-3) var(--raum-4);
  margin-block-start: var(--raum-6);
}

.abschluss .knopf--voll {
  background: var(--weiss);
  border-color: var(--weiss);
  color: var(--blau-tief);
}

.abschluss .knopf--voll:hover,
.abschluss .knopf--voll:focus-visible {
  background: var(--grau);
  border-color: var(--grau);
  color: var(--blau-tief);
}

/* --- Drei Spalten mit den Angaben ----------------------------------- */
.abschluss-spalten {
  display: grid;
  gap: var(--raum-7);
  margin-block-start: var(--raum-8);
  padding-block-start: var(--raum-7);
  border-block-start: 1px solid rgb(255 255 255 / 0.22);
}

@media (min-width: 760px) {
  .abschluss-spalten {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--raum-8);
  }
}

/* Auch hier keine gesperrten Versalien mehr, sondern eine kleine
   Ueberschrift in normaler Schreibweise mit einer Marke darunter. */
.abschluss-spalte h3 {
  font-size: var(--grad-klein);
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--weiss);
  margin-block-end: var(--raum-4);
  padding-block-end: var(--raum-3);
  position: relative;
}

.abschluss-spalte h3::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  inline-size: 28px;
  block-size: 2px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.42);
}

.abschluss-spalte address,
.abschluss-spalte p,
.abschluss-spalte li {
  font-size: var(--grad-klein);
  line-height: 1.62;
  color: var(--auf-blau-weich);
  font-style: normal;
}

/* Stand 05.09.2026: stand vorher als style-Attribut im Markup. Aus dem
   HTML herausgeloest, damit die Content-Security-Policy beim Livegang ohne
   'unsafe-inline' fuer style auskommt. */
.abschluss-spalte .abschluss-kontaktzeile { margin-block-start: var(--raum-3); }

.abschluss-spalte dl { display: grid; gap: var(--raum-3); }
.abschluss-spalte dt {
  font-size: var(--grad-klein);
  font-weight: 600;
  color: var(--weiss);
}
.abschluss-spalte dd {
  font-size: var(--grad-klein);
  color: var(--auf-blau-weich);
  font-variant-numeric: tabular-nums;
}

.abschluss-liste { display: grid; gap: var(--raum-2); }

.abschluss-liste a {
  text-decoration-color: rgb(255 255 255 / 0.32);
  text-underline-offset: 0.22em;
}

.abschluss-liste a:hover { text-decoration-color: var(--weiss); }

/* --- Schlusszeile ----------------------------------------------------
   In Blau-Tief statt in dem fremden Grau. Sie beginnt hinter dem
   Abschluss, damit dessen Rundung eine Flaeche hat. */
.fuss {
  margin-block-start: calc(var(--rund-gross) * -1);
  padding-block: calc(var(--raum-4) + var(--rund-gross)) var(--raum-4);
  background: var(--blau-tief);
  color: rgb(255 255 255 / 0.72);
  font-size: var(--grad-winzig);
}

.fuss a { color: rgb(255 255 255 / 0.9); text-decoration-color: rgb(255 255 255 / 0.35); }
.fuss a:hover { color: var(--weiss); text-decoration-color: var(--weiss); }
.fuss :focus-visible { outline-color: var(--weiss); }

.fuss-innen {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--raum-2) var(--raum-6);
}

.fuss-wege { display: flex; flex-wrap: wrap; gap: var(--raum-2) var(--raum-5); }

/* ===================================================================
   Feste Anrufleiste auf dem Telefon.
   Sie erscheint erst, wenn der Auftakt durchgelaufen ist, damit sie
   nicht schon ueber dem Anrufknopf des Auftakts klebt.
   =================================================================== */

.rufleiste {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--raum-2);
  min-block-size: 58px;
  background: var(--aubergine);
  border-start-start-radius: var(--rund);
  border-start-end-radius: var(--rund);
  color: var(--weiss);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transform: translateY(100%);
  /* Solange die Leiste unten weggeschoben ist, gehoert sie nicht in den
     Tabulatorlauf: sonst landet der Fokus auf einem Verweis, den niemand
     sehen kann. visibility erbt sich und nimmt das Element heraus, ohne
     dass die Bewegung verloren geht. */
  visibility: hidden;
  transition: transform var(--dauer-lang) var(--kurve),
              visibility 0s linear var(--dauer-lang);
}

.rufleiste.ist-da {
  visibility: visible;
  transition: transform var(--dauer-lang) var(--kurve),
              visibility 0s linear 0s;
}

.rufleiste:hover { color: var(--weiss); }

@media (max-width: 767px) {
  .rufleiste { display: flex; }
  .rufleiste.ist-da { transform: none; }
  body { padding-block-end: 56px; }
}

/* ==== 07-bewegung.css ==== */
/* ===================================================================
   Bewegung.

   Am 19.08. dazugekommen. Michaels Befund war ein Vergleich, kein
   Geschmacksurteil: „Es geht nicht, dass auf der alten Seite mehr
   Animationen sind als auf der neuen." Nachgemessen an der laufenden
   Praxisseite stimmt das. Sie hat einen Bildwechsler im Auftakt, ein
   `fadeInUp` beim Scrollen und einen Zoom beim Ueberfahren von Bildern.
   Die neue hatte nur die Hover-Zustaende.

   Alle Regeln hier bewegen ausschliesslich `transform` und `opacity`.
   Beides laeuft auf der Grafikkarte und loest kein Neuberechnen des
   Layouts aus; eine Hoehe oder ein Rand zu animieren wuerde die Seite
   bei jedem Bild neu umbrechen lassen.

   Die verbergenden Klassen setzt das Skript, nicht dieses Stylesheet.
   Ohne JavaScript steht deshalb alles sofort da, statt unsichtbar zu
   bleiben. Das ist der Unterschied zwischen einer Zutat und einer
   Falle. Ganz unten steht zusaetzlich der Block fuer alle, die weniger
   Bewegung eingestellt haben; dort wird alles stillgelegt.
   =================================================================== */

/* --- 1. Aufsteigen beim Sichtbarwerden --------------------------------
   Der Grundbaustein. Ein Element steht sechzehn Pixel tiefer und ist
   durchsichtig, bis es ins Bild kommt. */
.steigt-auf {
  opacity: 0;
  transform: translateY(var(--weg));
  transition: opacity var(--auftritt) var(--kurve),
              transform var(--auftritt) var(--kurve);
}

.steigt-auf.ist-sichtbar { opacity: 1; transform: none; }

/* --- 2. Staffelung in einer Reihe -------------------------------------
   Vier Aerzte, drei Kacheln, zehn Behandlungen: sie kommen nacheinander
   statt als Block. Das ist der groesste Unterschied zwischen „da ist
   etwas erschienen" und „da ordnet sich etwas".

   Der Versatz ist gedeckelt: bei der zehnteiligen Behandlungsliste
   waeren zehnmal 70 ms schon 700 ms, und der letzte Eintrag kaeme
   spuerbar zu spaet. Ab dem sechsten Nachbarn bleibt es deshalb bei
   sechs Stufen. */
.staffel > * {
  opacity: 0;
  transform: translateY(var(--weg));
  transition: opacity var(--auftritt) var(--kurve),
              transform var(--auftritt) var(--kurve);
}

.staffel.ist-sichtbar > * { opacity: 1; transform: none; }

.staffel.ist-sichtbar > :nth-child(1) { transition-delay: 0ms; }
.staffel.ist-sichtbar > :nth-child(2) { transition-delay: calc(var(--versatz) * 1); }
.staffel.ist-sichtbar > :nth-child(3) { transition-delay: calc(var(--versatz) * 2); }
.staffel.ist-sichtbar > :nth-child(4) { transition-delay: calc(var(--versatz) * 3); }
.staffel.ist-sichtbar > :nth-child(5) { transition-delay: calc(var(--versatz) * 4); }
.staffel.ist-sichtbar > :nth-child(n + 6) { transition-delay: calc(var(--versatz) * 5); }

/* --- 3. Bilder kommen aus der Tiefe -----------------------------------
   Ein Bild, das aus 1,05 auf 1,0 zurueckgeht, waehrend es einblendet,
   wirkt, als komme es dem Betrachter entgegen. Der Rahmen bleibt dabei
   still, nur der Inhalt bewegt sich, deshalb sitzt der Zuschnitt am
   Rahmen und die Bewegung am Bild. */
.zoomt-auf { overflow: hidden; }

.zoomt-auf img {
  transform: scale(1.05);
  transition: transform 1100ms var(--kurve);
}

.zoomt-auf.ist-sichtbar img { transform: none; }

/* --- 4. Der Auftakt beim Laden ----------------------------------------
   Der Aufbau bleibt, wie Michael ihn freigegeben hat. Bewegt wird nur,
   wie er erscheint: Titel, Claim und die beiden Wege steigen kurz
   nacheinander auf. Kurz, weil hier das erste Bild der Seite steht und
   niemand auf seinen eigenen Text warten will.

   Das Foto bleibt davon unberuehrt. Es ist das Element, an dem der
   Browser die Ladezeit misst; eine Einblendung darauf wuerde die
   gemessene Ladezeit verschlechtern, ohne dass die Seite schneller
   waere. */
.auftakt-innen > * {
  opacity: 0;
  transform: translateY(18px);
  animation: auftritt 700ms var(--kurve) forwards;
}

.auftakt-innen > :nth-child(1) { animation-delay: 120ms; }
.auftakt-innen > :nth-child(2) { animation-delay: 240ms; }
.auftakt-innen > :nth-child(3) { animation-delay: 360ms; }

@keyframes auftritt {
  to { opacity: 1; transform: none; }
}

/* --- 5. Das Auftaktfoto atmet -----------------------------------------
   Sehr langsam, sehr wenig: vier Prozent in fünfundzwanzig Sekunden,
   dann zurueck. Das ist unter der Schwelle, ab der man eine Bewegung
   als Bewegung erkennt; man merkt nur, dass das Bild nicht tot ist.
   Der Bestand loest dasselbe mit einem Bildwechsler, der alle paar
   Sekunden ein anderes Foto einblendet. Das haette hier bedeutet, das
   Aerztefoto zu teilen, und genau darauf ist der Auftakt gebaut. */
.auftakt-bild img {
  animation: atmen 25s ease-in-out infinite alternate;
  transform-origin: center 42%;
}

@keyframes atmen {
  from { transform: scale(1); }
  to   { transform: scale(1.04); }
}

/* --- 6. Die Aufklappliste gleitet -------------------------------------
   `details` springt von Haus aus auf. Ein Sprung mitten in einer Liste
   verliert den Leser, weil alles darunter ohne Vorwarnung wegrutscht.
   Der Inhalt faehrt deshalb heraus.

   Animiert wird `grid-template-rows` von 0fr auf 1fr. Das ist der eine
   Fall, in dem eine Layout-Eigenschaft richtig ist: eine Hoehe in
   Pixeln kennt man vorher nicht, und `max-height` mit einem geratenen
   Wert laesst kurze Eintraege trudeln und schneidet lange ab. */
.klapp-inhalt {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dauer-lang) var(--kurve);
}

.klapp[open] .klapp-inhalt { grid-template-rows: 1fr; }

.klapp-inhalt > * { overflow: hidden; }

/* --- 7. Zustaende unter dem Zeiger ------------------------------------
   Was anklickbar ist, hebt sich. Die Kurve schiesst leicht ueber und
   kommt zurueck. */
@media (hover: hover) {
  .knopf { transition: transform var(--dauer-lang) var(--heben),
                       background-color var(--dauer) var(--kurve),
                       border-color var(--dauer) var(--kurve),
                       color var(--dauer) var(--kurve); }
  .knopf:hover { transform: translateY(-2px); }
  .knopf:active { transform: translateY(0); }

  .kachel { transition: transform var(--dauer-lang) var(--heben),
                        box-shadow var(--dauer-lang) var(--kurve); }
  .kachel:hover { transform: translateY(-5px); box-shadow: var(--schatten-hoch); }

  /* Die Personenkarten heben sich mit, nicht nur ihr Bild. */
  .person { transition: transform var(--dauer-lang) var(--heben); }
  .person:hover { transform: translateY(-4px); }

  .formular .knopf:hover { transform: translateY(-2px); }
}

/* --- 8. Weniger Bewegung ----------------------------------------------
   Deckt alles ab: Aufsteigen, Staffelung, Zoom, Atmen, Auftritt, die
   Aufklappliste und die Hover-Hebungen. Wer die Einstellung gesetzt
   hat, bekommt eine ruhige Seite und keine halbe. */
@media (prefers-reduced-motion: reduce) {
  .steigt-auf,
  .staffel > *,
  .auftakt-innen > * {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }

  .zoomt-auf img { transform: none; transition: none; }
  .auftakt-bild img { animation: none; }
  .klapp-inhalt { transition: none; }

  .knopf:hover, .kachel:hover, .person:hover { transform: none; }
}