/*
Theme Name: Praxis Mailahn
Description: Eigenes Theme fuer die Praxis Hannah und Markus Mailahn, Potsdam-Babelsberg. Ersetzt Elementor: kein Seitenbaukasten, keine Symbolbibliothek, Schrift selbst gehostet.
Version: 4.5.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: praxis-mailahn
*/

/* ===================================================================
   Schrift
   Manrope, variabel, selbst gehostet. Die alte Seite holte Roboto und
   Font Awesome bei jedem Aufruf von Google- und US-Servern — dafuer
   brauchte die Datenschutzerklaerung zwei eigene Absaetze. Eine Datei,
   25 KB, alle Gewichte von 400 bis 800.
   =================================================================== */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/schriften/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/schriften/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+2C60-2C7F;
}

/* ===================================================================
   Grundlagen
   =================================================================== */

:root {
  --blau:        #3387BF;
  --blau-text:   #1f5f8b;
  --blau-tief:   #113c5c;
  --blau-blass:  #eff5fa;

  /* Ueberschriften nicht im Markenblau, sondern fast schwarz mit blauem
     Stich. Das Blau wirkt staerker, wenn es nicht ueberall steht. */
  --tinte:       #101f2b;
  --text:        #27343d;
  --text-weich:  #62707b;
  --grund:       #ffffff;
  --linie:       #e4e9ed;
  --linie-satt:  #c4ced6;

  /* Nur fuer Urlaub, Vertretung und Notdienst. */
  --signal:      #9c3618;
  --signal-blass:#fcf3ef;

  /* 62rem statt der urspruenglichen 68: am grossen Schirm wirkte der
     Kopf mit Name, Zeile darunter und Menue auf voller Breite wie ein
     Plakat. Der Fliesstext aendert sich dadurch nicht, er steht ohnehin
     in --breite-text. */
  --breite:      62rem;
  --breite-text: 42rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* 16px. Manrope hat eine grosse x-Hoehe und traegt deshalb kraeftiger
     als eine Systemschrift derselben Groesse — 19 und dann 17 wirkten
     beide noch zu gross. Tiefer geht es nicht: viele Patienten hier sind
     ueber 60, und 16px ist der uebliche Boden im Web. Dafuer etwas mehr
     Zeilenabstand, damit es bei kleinerer Schrift luftig bleibt. */
  font: 400 16px/1.68 'Manrope', -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Grosse Groessensprünge tragen die Gliederung — dann braucht es dafuer
   keine Linien, Kaesten oder Farbflaechen. */
h1, h2, h3 {
  color: var(--tinte);
  font-weight: 700;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 1.7rem + 1.5vw, 2.6rem);
  line-height: 1.04;
  letter-spacing: -.033em;
  margin-bottom: .45em;
}
h2 {
  font-size: clamp(1.35rem, 1.22rem + .62vw, 1.62rem);
  line-height: 1.14;
  letter-spacing: -.024em;
  margin-top: 2.6rem;
}
h3 {
  font-size: 1.08rem;
  line-height: 1.3;
  letter-spacing: -.012em;
  margin-top: 1.6rem;
}

h1:first-child, h2:first-child, h3:first-child { margin-top: 0; }

p, ul, ol { margin: 0 0 1.05em; }
ul, ol { padding-left: 1.25em; }
li { margin-bottom: .4em; }
strong { font-weight: 700; color: var(--tinte); }

a {
  color: var(--blau-text);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  /* Gedeckter als der Linktext selbst — fester Wert statt color-mix(),
     das aeltere Geraete nicht kennen und dann die ganze Regel verwerfen. */
  text-decoration-color: #a6c6dd;
  transition: text-decoration-color .15s, color .15s;
}
a:hover { color: var(--blau-tief); text-decoration-color: currentColor; }

img { max-width: 100%; height: auto; }

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

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

.sprung-zum-inhalt {
  position: absolute; left: -9999px; top: 0;
  background: var(--tinte); color: #fff;
  padding: .75rem 1.25rem; z-index: 60;
}
.sprung-zum-inhalt:focus { left: 0; color: #fff; }

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* ===================================================================
   Kopfbereich
   =================================================================== */

/* Der Kopf steht auf einem Hauch Blau, damit er sich vom weissen Inhalt
   absetzt — dieselbe Flaeche wie die Sprechzeiten weiter unten, damit es
   eine Farbsprache bleibt und nicht zwei. */
.kopf, .navigation { background: var(--blau-blass); }

/* Der Kopf traegt nichts als den Namen — er darf nicht das Erste und
   Groesste sein, was am Schirm steht. Am Telefon ist er das ohnehin
   nicht, dort ueberschreibt der schmale Schirm diese Werte. */
.kopf__reihe {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-block: .7rem .5rem;
}

/* Das Zeichen begleitet den Namen, es kuendigt ihn nicht an. Eine
   Arztpraxis ist keine Marke, die sich vorstellen muss — wer die Seite
   oeffnet, sucht Sprechzeiten. Deshalb steht es daneben und nicht
   darueber, und deshalb bleibt der Name das Groesste im Kopf. */
.marke {
  display: flex;
  align-items: center;
  gap: .72rem;
  text-decoration: none;
  margin-right: auto;
}
.marke__zeichen {
  display: block;
  flex: none;
  /* Hoehe statt Breite: das Zeichen ist breiter als hoch, und was mit
     der Schrift mitwachsen soll, ist die Hoehe.

     2.15rem ist mehr als die Namenszeile und weniger als beide Zeilen
     zusammen — das Zeichen reicht ueber den Namen hinaus in die
     Fachrichtungen hinein, ohne den Kopf hoeher zu machen. Darueber
     wuerde es den Namen ueberragen, und dann gehoerte der Kopf neu
     aufgebaut. */
  height: 2.15rem;
  width: auto;
}
.marke__name {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--tinte);
}
.marke__zusatz {
  display: block;
  font-size: .88rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-weich);
  margin-top: .2rem;
}

.menue-schalter {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  /* 48 Pixel — das ist die Groesse, ab der ein Ziel mit dem Daumen
     zuverlaessig getroffen wird. */
  width: 48px; height: 48px;
  /* Bewusst ohne Rahmen. Die Trefferflaeche bleibt die vollen 48 Pixel,
     sie ist nur nicht mehr eingezeichnet. */
  margin-right: -.6rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--tinte);
  cursor: pointer;
}
.menue-schalter svg { display: block; }
/* Zwei Symbole im Knopf, immer nur eines sichtbar. */
.menue-schalter .symbol-zu { display: none; }
.menue-schalter[aria-expanded="true"] .symbol-auf { display: none; }
.menue-schalter[aria-expanded="true"] .symbol-zu { display: block; }
.menue-schalter[aria-expanded="true"] {
  color: var(--blau-text);
}

/* ===================================================================
   Navigation
   =================================================================== */

.navigation {
  border-bottom: 1px solid #d6e3ee;
}

.navigation ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75rem;
}

.navigation a {
  display: block;
  padding-block: .62rem;
  text-decoration: none;
  color: var(--text);
  font-size: .99rem;
  font-weight: 500;
  /* Die Unterstreichung ist immer da, nur durchsichtig — sonst springt
     die Zeile beim Ueberfahren um zwei Pixel. */
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.navigation a:hover { color: var(--tinte); border-bottom-color: var(--linie-satt); }

.navigation .current-menu-item > a,
.navigation .current_page_item > a {
  color: var(--tinte);
  font-weight: 700;
  border-bottom-color: var(--blau);
}

/* ===================================================================
   Aktueller Hinweis (Urlaub, Vertretung)

   Kein Band mehr ueber die ganze Breite: der Hinweis steht im Textmass,
   auf blasser Flaeche, und faellt allein ueber die Signalfarbe seiner
   Marke auf. Er steht nur auf der Startseite und bei den Sprechzeiten —
   den zwei Stellen, an denen jemand nach ihm sucht.
   =================================================================== */

.hinweis {
  display: block;
  max-width: var(--breite-text);
  margin-top: 2rem;
  padding: .75rem 1.05rem;
  border-radius: 8px;
  background: var(--signal-blass);
  font-size: .95rem;
  line-height: 1.55;
  color: var(--text);
}
.hinweis p { margin-bottom: .35rem; }
.hinweis p:last-child { margin-bottom: 0; }
.hinweis__marke {
  font-weight: 700;
  color: var(--signal);
  margin-right: .3rem;
}
.hinweis a { color: var(--signal); }

/* ===================================================================
   Inhalt
   =================================================================== */

.inhalt { padding-block: 2.75rem 3.5rem; }
.abschnitt { padding-block: 2.75rem; }

/* Fliesstext bleibt schmal. Ueber rund 75 Zeichen je Zeile verliert man
   beim Zurueckspringen die Zeile. */
.fliesstext { max-width: var(--breite-text); }

/* Nur der Absatz direkt unter der Ueberschrift ist der Einstieg. Ueber
   :first-of-type haette es auch den ersten Absatz mitten in der
   Datenschutzerklaerung getroffen, wo er nichts anfuehrt. */
.fliesstext > h1 + p {
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--tinte);
  font-weight: 500;
  letter-spacing: -.011em;
}

/* Jeder Abschnitt bekommt eine kurze blaue Marke. Auf langen Seiten —
   Leistungen, Datenschutz — ist das beim Scrollen der Anker, an dem das
   Auge haengenbleibt, ohne dass dafuer eine Linie durchs Bild muss.
   Nur im Hauptteil: die Fusszeile ist keine Abschnittsfolge. */
main h2 {
  position: relative;
  padding-top: 1.35rem;
}
main h2::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 2.25rem; height: 3px;
  border-radius: 2px;
  background: var(--blau);
}

/* Aufzaehlungen mit eigenem Punkt statt des Standardbullets: die
   Leistungslisten sind teils fuenfzehn Zeilen lang und brauchen mehr
   Luft und einen ruhigeren Rand. */
.fliesstext ul {
  list-style: none;
  padding-left: 0;
}
.fliesstext ul > li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .55em;
}
.fliesstext ul > li::before {
  content: "";
  position: absolute;
  left: .3rem; top: .68em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blau);
}
/* Zweite Ebene: die Leistungslisten der Praxis sind zweistufig
   („Ultraschall bei Beschwerden“ → „Bauchorgane“, „Schilddruese“). Der
   Unterpunkt bekommt einen hohlen Punkt, damit die Stufe auch ohne
   Einrueckungsgefuehl erkennbar ist, und unten keinen zweiten Abstand —
   den traegt schon der Listenpunkt darueber. */
.fliesstext ul ul {
  margin-top: .5em;
  margin-bottom: 0;
}
.fliesstext ul ul > li { margin-bottom: .35em; }
.fliesstext ul ul > li::before {
  width: 5px; height: 5px;
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--blau);
  top: .72em;
}

/* Der Schnitt sitzt oben und unten, nie an den Seiten: acht Menschen
   stehen nebeneinander, jeder seitliche Beschnitt kostet ein Gesicht.
   Am Telefon laeuft das Bild ueber die volle Breite — dort ist das
   richtig. Am grossen Schirm nicht: ueber 1500 Pixel wurde daraus eine
   Litfasssaeule, und die Gesichter standen in Lebensgroesse da. Deshalb
   dieselbe Breite wie der uebrige Inhalt, nicht mehr. */
.grossbild {
  display: block;
  width: 100%;
  max-width: calc(var(--breite) - 3rem);
  margin-inline: auto;
  height: clamp(15rem, 40vw, 22rem);
  object-fit: cover;
  object-position: center 34%;
  background: var(--blau-blass);
}

/* Blasse Farbflaeche als Gliederung. Bewusst ein Hauch Blau und nicht
   das satte — ein kraeftiges Band ueber die volle Breite war es, was die
   Seite vorher alt aussehen liess. */
.band { background: var(--blau-blass); padding-block: 2.75rem; }
.band h2 { margin-top: 0; }

/* Sprungziel von der Startseite. Ohne diesen Abstand landet die
   Ueberschrift genau unter der stehenden Navigation und ist nicht zu
   sehen — man kommt an und glaubt, der Link sei ins Leere gegangen. */
#urlaub { scroll-margin-top: 3.25rem; }

/* ===================================================================
   Karte (Anfahrt)
   =================================================================== */

.karte { margin: 0 0 2.75rem; }
/* Dieselbe Breite wie das Teamfoto auf der Startseite und wie der Text
   darueber. Ueber die volle Fensterbreite war die Karte am grossen
   Schirm ein Stadtplan, auf dem der Punkt der Praxis verschwand. */
.karte img {
  display: block;
  width: 100%;
  max-width: calc(var(--breite) - 3rem);
  margin-inline: auto;
  height: clamp(13rem, 34vw, 24rem);
  object-fit: cover;
  background: var(--blau-blass);
}
.karte figcaption {
  max-width: var(--breite);
  margin-inline: auto;
  padding: .85rem 1.5rem 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text-weich);
}

/* ===================================================================
   Sprechzeiten
   =================================================================== */

.sprechzeiten {
  display: grid;
  gap: 2.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 46rem) {
  .sprechzeiten { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

/* Gilt fuer H2 und H3 — welche Ebene es ist, haengt davon ab, unter
   welcher Ueberschrift die Tafel steht. Ein Arztname ist keine
   Abschnittsueberschrift, also auch ohne die blaue Marke. Bewusst so
   statt mit :not(.sprechzeit h2): Nachfahrenselektoren in :not() kennen
   aeltere Browser nicht und verwerfen dann die ganze Regel. */
.sprechzeit h2::before { content: none; }
.sprechzeit h2, .sprechzeit h3 {
  margin: 0 0 .2rem;
  font-size: 1.12rem;
  line-height: 1.3;
  letter-spacing: -.02em;
  padding-top: 0;
}
.sprechzeit__rolle {
  color: var(--text-weich);
  font-size: .9rem;
  line-height: 1.45;
  margin-bottom: 1.25rem;
}

.sprechzeit table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}
.sprechzeit td {
  padding: .6rem 0;
  border-bottom: 1px solid var(--linie);
  vertical-align: baseline;
}
.sprechzeit tr:last-child td { border-bottom: 0; }
.sprechzeit td:first-child {
  font-weight: 700;
  width: 3rem;
  color: var(--text-weich);
}
.sprechzeit td.ist-zu { color: var(--text-weich); }

/* Die haeufigste Frage an eine Praxisseite ist "haben die jetzt offen",
   nicht "wie sind die Zeiten". */
.sprechzeit tr.ist-heute td { color: var(--tinte); font-weight: 600; }
.sprechzeit tr.ist-heute td:first-child { color: var(--blau-text); }
.heute-marke {
  display: inline-block;
  margin-left: .5rem;
  padding: .12em .5em;
  border-radius: 999px;
  background: var(--blau);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: .12em;
}

/* Stand hier klein und gedaempft, also wie eine Fussnote. Es ist aber
   keine: wann die Akutsprechstunde ist, entscheidet, ob jemand morgen
   frueh vor der Tuer steht oder nicht — das ist so wichtig wie die
   Tabelle darueber. Deshalb normale Schriftgroesse und normale
   Textfarbe. */
.sprechzeit__akut {
  margin-top: 1.25rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
}

/* ===================================================================
   Urlaub und Vertretung
   Nach Praxis getrennt, Reihenfolge wie bei den Sprechzeiten.

   Vorher eine Karte je Zeitraum, sortiert nach Datum und dann nach
   Name. Dadurch stand dasselbe Datum zweimal untereinander — einmal je
   Praxis — und Hannah vor Markus, waehrend die Sprechzeiten darueber
   mit Markus anfangen. Dazu sechs hohe Karten mit viel Weissraum: am
   Telefon drei Bildschirmhoehen fuer vier Zeitraeume.

   Jetzt zwei Bloecke, darin je Zeitraum eine Zeile und die
   Vertretungen so eng wie es geht.
   =================================================================== */

/* Steht oben, nicht unten. Fuer Rezepte, Ueberweisungen und Termine
   aendert ein Urlaub nichts — das betrifft die meisten Anrufer, und sie
   sollen es erfahren, bevor sie an drei Vertretungen vorbeiscrollen. */
.urlaube__hinweis {
  max-width: var(--breite-text);
  margin: 0 0 1.75rem;
  font-size: .93rem;
  line-height: 1.55;
  color: var(--text);
}

.urlaube {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) {
  .urlaube { grid-template-columns: 1fr 1fr; gap: 1.5rem 2.5rem; }
}

.praxisblock__wer {
  margin: 0;
  padding: 0 0 .4rem;
  border-bottom: 2px solid var(--blau);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--tinte);
}
/* Die blaue Abschnittsmarke gilt den H2 im Hauptteil, nicht diesen
   Namen — sie haben ihre eigene Linie darunter. */
.praxisblock__wer { padding-top: 0; }
.praxisblock__wer::before { content: none; }

.praxisblock__offen {
  margin: .7rem 0 0;
  font-size: .93rem;
  color: var(--text-weich);
}

.urlaub {
  padding-block: .75rem;
  /* 2px: bei einer Linie trennt der Strich zwei Zeitraeume, die beide aus
     Datum, Etikett und Namen bestehen — sie verschwand zwischen den
     Zeilen. Er bleibt heller als die blaue Linie unter dem Namen, die
     ganze Bloecke trennt. */
  border-bottom: 2px solid var(--linie);
}
.urlaub:last-child { border-bottom: 0; }

/* Der laufende Urlaub ist der einzige, der gerade jemanden betrifft. */
.urlaub--laeuft {
  background: var(--blau-blass);
  border-radius: 8px;
  padding-inline: .85rem;
  margin-inline: -.85rem;
  border-bottom-color: transparent;
}

.urlaub__zeit {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem .6rem;
  margin: 0 0 .3rem;
  font-size: .97rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--tinte);
  font-variant-numeric: tabular-nums;
}
.urlaub__laeuft {
  padding: .14em .55em;
  border-radius: 999px;
  background: var(--blau);
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
/* Ohne dieses Woertchen stuenden drei Namen untereinander — der Arzt,
   das Datum, die vertretende Praxis — und man raet, welcher welcher
   ist. Es steht unter dem Datum und fuehrt die Liste an. */
.urlaub__etikett {
  margin: 0 0 .1rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-weich);
}

/* Eine Vertretung ist eine Zeile: Name, Anschrift, Nummer. Vorher drei
   Zeilen mit Trennlinie dazwischen — bei drei Vertretungen zwoelf
   Zeilen fuer das, was in drei passt. */
.vertretungen {
  list-style: none;
  margin: 0; padding: 0;
}
.vertretungen li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .5rem;
  margin: 0;
  padding: .12rem 0;
  border: 0;
  line-height: 1.45;
}
.vertretung__name {
  font-weight: 700;
  font-size: .93rem;
  color: var(--tinte);
}
.vertretung__adresse {
  font-size: .87rem;
  color: var(--text-weich);
}
.vertretung__telefon {
  font-size: .93rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-decoration: none;
}
.vertretung__telefon:hover { text-decoration: underline; }

.urlaub__ohne {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: .9rem;
  color: var(--text-weich);
}

/* ===================================================================
   Urlaubsvermerk unter den Sprechzeiten der Startseite
   =================================================================== */

/* Derselbe Kasten in zwei Lautstaerken. Laeuft kein Urlaub, ist das
   eine Randnotiz: eine Zeile, nur so breit wie ihr Text — deshalb
   inline-block und nicht ueber die halbe Spalte. */
.urlaubsnotiz {
  display: inline-block;
  background: var(--grund);
  border-left: 3px solid var(--blau);
  border-radius: 0 8px 8px 0;
  padding: .55rem 1.1rem;
  margin: 1.75rem 0 0;
  max-width: 100%;
  font-size: .97rem;
}
.urlaubsnotiz > a { font-weight: 700; }

/* Laeuft gerade ein Urlaub, ist das die wichtigste Auskunft auf der
   Seite — dann traegt der Kasten die Signalfarbe, die sonst nur Urlaub,
   Vertretung und Notdienst tragen, und nimmt sich den Platz dafuer. */
.urlaubsnotiz--jetzt {
  display: block;
  border-left: 3px solid var(--signal);
  border-radius: 0 10px 10px 0;
  padding: 1.15rem 1.35rem;
  max-width: 34rem;
  font-size: 1rem;
}
.urlaubsnotiz__marke {
  margin: 0 0 .45rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blau-text);
}
.urlaubsnotiz--jetzt .urlaubsnotiz__marke {
  margin-bottom: .6rem;
  color: var(--signal);
}
.urlaubsnotiz__zeile {
  margin: 0 0 .6rem;
  line-height: 1.5;
  color: var(--text-weich);
}
.urlaubsnotiz__zeile strong {
  font-weight: 700;
  color: var(--tinte);
}
.urlaubsnotiz__weiter { margin: 0; }
.urlaubsnotiz__weiter a {
  font-weight: 700;
  text-decoration-color: currentColor;
}
.urlaubsnotiz--jetzt .urlaubsnotiz__weiter a { color: var(--signal); }
.urlaubsnotiz--jetzt .urlaubsnotiz__weiter a:hover { color: #7a2a12; }

/* ===================================================================
   Team
   =================================================================== */

.team {
  display: grid;
  gap: 2.25rem 1.75rem;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  list-style: none;
  padding: 0; margin: 0;
}
.team li { margin: 0; }
.team img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
  background: var(--blau-blass);
  border-radius: 10px;
  margin-bottom: .8rem;
}
.team__name {
  display: block;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--tinte);
  letter-spacing: -.012em;
}
.team__rolle {
  display: block;
  color: var(--text-weich);
  font-size: .88rem;
  line-height: 1.4;
  margin-top: .15rem;
}

/* ===================================================================
   Kontaktangaben
   =================================================================== */

.daten { margin: 0 0 2rem; font-size: 1rem; }
.daten div {
  display: flex;
  gap: 1.25rem;
  padding-block: .55rem;
  border-bottom: 1px solid var(--linie);
}
.daten div:last-child { border-bottom: 0; }
.daten dt { flex: none; width: 6rem; color: var(--text-weich); }
.daten dd { margin: 0; color: var(--tinte); font-weight: 500; }

/* ===================================================================
   Formular (Contact Form 7)
   =================================================================== */

.wpcf7 { max-width: var(--breite-text); }
.wpcf7 label { display: block; font-size: .98rem; font-weight: 500; margin-bottom: 1.15rem; }

.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=tel],
.wpcf7 input[type=date], .wpcf7 textarea {
  display: block;
  width: 100%;
  margin-top: .4rem;
  padding: .7rem .85rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
  color: var(--text);
  background: var(--grund);
  border: 1px solid var(--linie-satt);
  border-radius: 8px;
}
.wpcf7 input:focus, .wpcf7 textarea:focus {
  border-color: var(--blau-text);
  outline: 1px solid var(--blau-text);
}
.wpcf7 textarea { min-height: 9rem; resize: vertical; }

.wpcf7 input[type=checkbox] {
  width: 1.15rem; height: 1.15rem;
  margin-right: .5rem;
  accent-color: var(--blau-text);
}
.wpcf7-checkbox .wpcf7-list-item { margin: 0; display: block; }

.wpcf7 input[type=submit] {
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  background: var(--tinte);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: .85rem 1.9rem;
  cursor: pointer;
}
.wpcf7 input[type=submit]:hover { background: var(--blau-tief); }

.wpcf7-not-valid-tip { color: #a1131a; font-size: .95rem; font-weight: 400; }
.wpcf7-response-output {
  border-width: 1px !important;
  border-radius: 8px;
  padding: 1rem 1.2rem !important;
  margin: 1.5rem 0 0 !important;
  font-size: 1rem;
}

.formular-hinweis {
  max-width: var(--breite-text);
  background: var(--blau-blass);
  border-radius: 10px;
  padding: 1.1rem 1.3rem;
  font-size: .96rem;
  line-height: 1.55;
  margin-bottom: 2rem;
}
.formular-hinweis p:last-child { margin-bottom: 0; }

/* ===================================================================
   Fuss
   =================================================================== */

.fuss {
  border-top: 1px solid var(--linie);
  margin-top: 1rem;
  padding-block: 2rem 1.4rem;
  font-size: .96rem;
  line-height: 1.55;
}
.fuss h2 {
  font-size: .97rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0;
}
.fuss a { color: var(--blau-text); text-decoration: none; }
.fuss a:hover { text-decoration: underline; }

/* Die beiden Nummern standen untereinander, Beschriftung links und
   Nummer rechts am Rand eines 24rem breiten Blocks — vier Zeilen Hoehe
   fuer zwei Telefonnummern. Nebeneinander in einer Reihe sind es zwei. */
.fuss__notdienst {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem 2.25rem;
  margin-bottom: 1.1rem;
}
.fuss__notdienst h2 { flex: 1 0 100%; margin-bottom: .25rem; }
.fuss__notdienst p {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin: 0;
  color: var(--text-weich);
}
.fuss__notdienst a {
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--tinte);
}

.fuss__schluss {
  padding-top: 1rem;
  border-top: 1px solid var(--linie);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 2rem;
}
.fuss__anschrift {
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--text-weich);
}
.fuss__anschrift strong {
  display: block;
  font-size: .96rem;
  font-weight: 700;
  color: var(--tinte);
}
.fuss__schluss ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 0 0 0 auto; padding: 0;
  font-size: .9rem;
}
.fuss__schluss li { margin: 0; }

/* ===================================================================
   Grosse Schirme: die Navigation bleibt beim Scrollen stehen
   =================================================================== */

@media (min-width: 46.01rem) {
  .navigation {
    position: sticky;
    top: 0;
    z-index: 30;
  }

  /* Sobald das Bild nicht mehr an den Fensterrand stoesst, braucht es
     einen eigenen Rand — sonst klebt es unter der Navigationsleiste.
     Die Rundung ist dieselbe wie bei den Teamfotos.

     Zur Hoehe: Das Bild ist 1600 x 876, also knapp 2:1. Auf 59rem
     Breite stuende es von Natur aus rund 32rem hoch — zu viel fuer das
     Erste, was man sieht. Einmal war es auf 22rem gedeckelt, dann
     fehlte ein Drittel und es sah gequetscht aus.

     2.1:1 ist der Mittelweg: gegenueber dem Original fehlen 13 Prozent
     der Hoehe, und die fallen bei einer Gruppenaufnahme dort weg, wo
     ohnehin nichts steht — etwas Luft ueber den Koepfen und der untere
     Bildrand. Die Hoehe faellt damit von 32 auf 28rem.

     Am schmalen Schirm bleibt der engere Zuschnitt aus der Grundregel,
     dort ist er richtig: sonst waere das Bild auf dem Telefon so hoch
     wie der halbe Schirm. */
  .grossbild {
    margin-top: 1.75rem;
    border-radius: 12px;
    height: auto;
    aspect-ratio: 2.1 / 1;
  }

  /* Die Karte bekommt dieselbe Rundung — sie steht auf derselben
     Breite und soll nicht als zweite Bildsprache danebenstehen. */
  .karte img { border-radius: 12px; }
}

/* ===================================================================
   Schmale Schirme
   =================================================================== */

@media (max-width: 46rem) {
  .menue-schalter { display: flex; }

  .kopf__reihe { padding-block: 1.1rem; gap: 1rem; }
  .marke__name { font-size: 1.72rem; }
  .marke__zusatz { font-size: .86rem; margin-top: .2rem; }
  /* Etwas enger als am grossen Schirm: neben dem Zeichen und dem
     Menueknopf bleiben fuer die Zeile unter dem Namen sonst keine
     drei Woerter je Zeile uebrig. */
  .marke { gap: .6rem; }
  .marke__zeichen { height: 1.9rem; }

  .navigation { border-top: 0; }
  .navigation ul { flex-direction: column; gap: 0; }
  .navigation li + li { border-top: 1px solid var(--linie); }
  .navigation a {
    /* Volle Zeilenbreite und 52 Pixel Hoehe: mit dem Daumen im Gehen
       bedienbar, nicht nur mit der Fingerspitze im Sitzen. */
    display: flex;
    align-items: center;
    min-height: 52px;
    padding-block: .7rem;
    font-size: 1.05rem;
    border-bottom: 0;
    border-left: 3px solid transparent;
    padding-left: .85rem;
    margin-bottom: 0;
  }
  .navigation a:hover { border-bottom: 0; }
  .navigation .current-menu-item > a,
  .navigation .current_page_item > a {
    border-bottom: 0;
    border-left-color: var(--blau);
    background: var(--blau-blass);
  }

  /* Ohne JavaScript bleibt das Menue offen und bedienbar. Erst das
     Skript klappt es zu — ein Fehler dort darf die Navigation nicht
     unerreichbar machen. */
  .navigation[hidden] { display: none; }

  .inhalt { padding-block: 2rem 2.5rem; }
  .abschnitt, .band { padding-block: 2.25rem; }
  h2 { margin-top: 2rem; }
  .fuss { padding-block: 1.75rem 1.25rem; }
  .fuss__notdienst { margin-bottom: 1rem; }
  .fuss__schluss ul { margin-left: 0; width: 100%; }

  /* Zwei Personen nebeneinander statt einer. In einer Spalte wurde ein
     Portrait fast so hoch wie der halbe Schirm — acht Personen waren
     damit acht Bildschirmhoehen Blaettern. Halb so breit reicht, um
     ein Gesicht zu erkennen. */
  .team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1rem;
  }
}

@media (max-width: 30rem) {
  body { font-size: 16px; }
  .huelle { padding-inline: 1.25rem; }
  .daten div { flex-direction: column; gap: .1rem; padding-block: .6rem; }
  .daten dt { width: auto; font-size: .88rem; }
  .sprechzeit td { font-size: .97rem; }
}

@media print {
  .navigation, .menue-schalter, .sprung-zum-inhalt { display: none; }
  /* Die Anschrift bleibt: auf einem ausgedruckten Blatt ist sie das
     Einzige, was die Praxis noch benennt. Nur die Links sind sinnlos. */
  .fuss__schluss ul { display: none; }
  body { font-size: 12pt; }
  .band, .grossbild { background: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}