@charset "utf-8";
/* Hausarztzentrum am Stadtweg, Rheinfelden - Entwurf.
   Ein einziges Stilblatt, keine Abhaengigkeiten.

   Gestaltungsgedanke
   ------------------
   Eine Hausarztpraxis ist kein Spital und kein Startup. Der Auftritt soll
   ruhig sein, nicht kuehl: warmes Papier statt klinisches Weiss, das Indigo
   der echten Wortmarke als traegende Farbe, ein gedaempftes Ton-in-Ton-Rot
   (Ziegel) als einziger Akzent - und ein eigenes, deutlich anderes Rot, das
   ausschliesslich dem Notfall gehoert. Eine Farbe, die man ueberall sieht,
   warnt nirgends mehr.

   Lesbarkeit hat Vorrang vor Wirkung. Die Grundschrift ist 17.5 px gross,
   die Zeilen sind kurz, die Kontraste liegen ueber den Anforderungen der
   WCAG-Stufe AA (geprueft mit tools/check.mjs). Die Patientenschaft einer
   Hausarztpraxis ist im Schnitt aelter als die einer beliebigen Webseite.
*/

/* ------------------------------------------------------------ Schriften -- */

@font-face {
  font-family: 'Source Serif';
  src: url('/assets/fonts/sourceserif.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans';
  src: url('/assets/fonts/sourcesans.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------- Variablen -- */

:root {
  /* Flaechen */
  --papier:      #f7f5f0;   /* Grundflaeche, warmes Papier */
  --papier-tief: #efeade;   /* abgesetzte Abschnitte */
  --weiss:       #ffffff;   /* Karten */
  --linie:       #ddd6c7;
  --linie-fein:  #e9e3d7;

  /* Marke - das Indigo der gezeichneten Wortmarke, fuer den Text vertieft */
  --tinte:       #1f2a6b;
  --tinte-tief:  #131a47;
  --tinte-hell:  #e6e8f3;

  /* Text */
  --text:        #272b36;
  --grau:        #545a68;

  /* Akzent: Ziegel. Verweise, zweite Schaltflaeche, Hervorhebung. */
  --akzent:      #99441f;
  --akzent-hell: #f5e8e0;

  /* Signale */
  --notfall:     #96181d;
  --notfall-hell:#fbeceb;
  --offen:       #1f5c3d;
  --offen-hell:  #e6f0ea;

  /* Masse */
  --wrap: 1180px;
  --pad: 1.15rem;
  --rund: 14px;
  --rund-klein: 9px;
  --schatten: 0 1px 2px rgba(19, 26, 71, .05),
              0 8px 24px -12px rgba(19, 26, 71, .18);
  --schatten-hoch: 0 2px 4px rgba(19, 26, 71, .06),
                   0 18px 40px -18px rgba(19, 26, 71, .28);
}

/* ------------------------------------------------------------ Grundlagen -- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Die Kopfleiste klebt oben. Ohne dies verschwindet das Sprungziel
     darunter, wenn man einem Anker folgt. */
  scroll-padding-top: 5.5rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: 'Source Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img, svg, picture { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: 'Source Serif', Georgia, 'Times New Roman', serif;
  color: var(--tinte-tief);
  line-height: 1.2;
  margin: 0 0 .55em;
  font-weight: 600;
  letter-spacing: -.005em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.35rem + 2.7vw, 3.15rem); letter-spacing: -.018em; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.25vw, 2.1rem); letter-spacing: -.012em; }
h3 { font-size: clamp(1.16rem, 1.08rem + .35vw, 1.35rem); }
h4 { font-size: 1.03rem; font-family: inherit; font-weight: 700;
     letter-spacing: .02em; color: var(--tinte); }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: var(--akzent); text-underline-offset: .18em; }
a:hover { color: var(--tinte); }

:focus-visible {
  outline: 3px solid var(--tinte);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Auf dunklem Grund waere das Indigo unsichtbar. */
.ab--tinte :focus-visible, .fuss :focus-visible, .kopf__tel:focus-visible {
  outline-color: #f0c98a;
}

hr { border: 0; border-top: 1px solid var(--linie); margin: 2.4rem 0; }

::selection { background: var(--tinte); color: #fff; }

/* Zahlen in Tabellen und Zeiten bleiben in der Spur. */
.zeiten, .preisliste, .notrufliste, .profil__zeiten {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- Raster -- */

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

.ab { padding-block: clamp(2.6rem, 1.6rem + 3.4vw, 4.6rem); }
.ab--eng { padding-block: clamp(1.9rem, 1.4rem + 2vw, 3rem); }
/* Der h1-Block einer Unterseite: unten kein eigener Abstand, den setzt der
   folgende Abschnitt. Sonst klafft zwischen Titel und Inhalt eine Luecke
   aus zwei addierten Innenabstaenden. */
.ab--titel { padding-bottom: 0; }
.ab--titel .ab__kopf { margin-bottom: 0; }
.ab--tief { background: var(--papier-tief); }
.ab--tinte { background: var(--tinte-tief); color: #e8eaf4; }
.ab--tinte h2, .ab--tinte h3 { color: #fff; }
.ab--tinte a { color: #f3d4ae; }
.ab--tinte a:hover { color: #fff; }

.ab__kopf { max-width: 46rem; margin-bottom: clamp(1.6rem, 1rem + 2vw, 2.6rem); }
.ab__kopf--mitte { margin-inline: auto; text-align: center; }
.ab__kopf--luft { margin-top: 2rem; }

/* Ueberschrift, die die Gliederung traegt, aber nicht gezeigt wird. Nicht
   display:none - das nehmen Vorleseprogramme ebenfalls aus dem Baum. */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.lead {
  font-size: clamp(1.06rem, 1rem + .3vw, 1.2rem);
  color: var(--grau);
  max-width: 42rem;
}
.ab--tinte .lead { color: #c3c8e0; }
.klein { font-size: .92rem; color: var(--grau); }
.ab--tinte .klein { color: #b6bcd8; }

/* Kleine Ueberzeile ueber einer h2. */
.ueber {
  display: block;
  font-family: 'Source Sans', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: .5rem;
}
.ab--tinte .ueber { color: #eab784; }

/* ------------------------------------------------------------ Sprungmarke -- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--tinte);
  color: #fff;
  padding: .8rem 1.2rem;
  border-radius: 0 0 var(--rund-klein) 0;
  font-weight: 600;
}
.skip:focus { left: 0; color: #fff; }

/* ----------------------------------------------------------- Kopfleiste -- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 245, 240, .96);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--linie);
}
.kopf__in {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.3rem;
  padding-block: .5rem;
}

.marke {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--tinte);
  text-decoration: none;
  flex: 0 0 auto;
  min-width: 0;
}
.marke:hover { color: var(--tinte-tief); }
.marke__logo { width: clamp(118px, 15vw, 160px); height: auto; display: block; }
.marke:hover .marke__logo { opacity: .82; }
.marke__wort {
  display: none;
  font-family: 'Source Serif', Georgia, serif;
  font-size: .92rem;
  line-height: 1.15;
  color: var(--grau);
  border-left: 1px solid var(--linie);
  padding-left: .6rem;
  max-width: 8.5rem;
}
@media (min-width: 1080px) { .marke__wort { display: block; } }

.nav {
  display: none;
  margin-left: auto;
  gap: .15rem;
  align-items: center;
}
.nav a {
  display: block;
  padding: .5rem .62rem;
  border-radius: var(--rund-klein);
  color: var(--tinte);
  text-decoration: none;
  font-weight: 600;
  font-size: .96rem;
  white-space: nowrap;
}
.nav a:hover { background: var(--tinte-hell); }
.nav a[aria-current='page'] {
  background: var(--tinte-hell);
  box-shadow: inset 0 -2px 0 var(--akzent);
}
@media (min-width: 1000px) { .nav { display: flex; } }

.kopf__tat {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
}
@media (min-width: 1000px) { .kopf__tat { margin-left: .5rem; } }

.kopf__tel {
  display: none;
  align-items: center;
  gap: .4rem;
  color: var(--tinte);
  text-decoration: none;
  font-weight: 700;
  font-size: .98rem;
  padding: .45rem .6rem;
  border-radius: var(--rund-klein);
  white-space: nowrap;
}
.kopf__tel:hover { background: var(--tinte-hell); }
.kopf__tel svg { width: 1.05em; height: 1.05em; fill: currentColor; }
@media (min-width: 620px) { .kopf__tel { display: inline-flex; } }

/* Der Menueknopf darf nie aus der Leiste geschoben werden. */
.menu {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-klein);
  background: var(--weiss);
  color: var(--tinte);
  cursor: pointer;
}
.menu svg { width: 1.4rem; height: 1.4rem; fill: currentColor; }
.menu:hover { background: var(--tinte-hell); }
@media (min-width: 1000px) { .menu { display: none; } }

/* Die Schublade haengt AUSSCHLIESSLICH am hidden-Attribut. Keine eigene
   display-Regel auf .schub - die wuerde das Attribut ueberstimmen und das
   Menue bliebe dauerhaft offen. */
.schub[hidden] { display: none !important; }
.schub {
  /* Absolut unter dem Kopf, nicht im Fluss: stuende sie im Fluss, wuechse
     die klebende Kopfleiste beim Oeffnen um die ganze Menuehoehe und der
     Seiteninhalt ruckte nach unten weg. */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  background: var(--papier);
  box-shadow: var(--schatten-hoch);
  padding: .9rem var(--pad) 1.2rem;
  max-height: calc(100dvh - 4.3rem);
  overflow-y: auto;
}
.schub__nav { display: grid; gap: .1rem; }
.schub__nav a {
  display: block;
  padding: .72rem .8rem;
  border-radius: var(--rund-klein);
  color: var(--tinte);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.05rem;
}
.schub__nav a:hover { background: var(--tinte-hell); }
.schub__nav a[aria-current='page'] { background: var(--tinte-hell); }
.schub__nav .unter { padding-left: 1.9rem; font-weight: 400; font-size: 1rem; }
.schub__tat { display: grid; gap: .55rem; margin-top: .9rem; }
@media (min-width: 1000px) { .schub { display: none; } }

/* ------------------------------------------------------- Schaltflaechen -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--rund-klein);
  background: var(--tinte);
  color: #fff;
  font: inherit;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  transition: background .15s ease, transform .12s ease;
}
.btn:hover { background: var(--tinte-tief); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.15em; height: 1.15em; fill: currentColor; flex: 0 0 auto; }

.btn--geist {
  background: var(--weiss);
  color: var(--tinte);
  border-color: var(--linie);
}
.btn--geist:hover { background: var(--tinte-hell); color: var(--tinte-tief); }

.btn--akzent { background: var(--akzent); }
.btn--akzent:hover { background: #7d3718; }

.btn--notfall { background: var(--notfall); }
.btn--notfall:hover { background: #7a1317; }

.btn--klein { padding: .55rem .85rem; font-size: .94rem; }
.btn--voll { width: 100%; }

/* Auf dunklem Grund kehrt sich die Geist-Fassung um. */
.ab--tinte .btn--geist {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .42);
}
.ab--tinte .btn--geist:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.tatreihe { display: flex; flex-wrap: wrap; gap: .7rem; }

.link-pfeil {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.link-pfeil::after { content: '\2192'; transition: transform .15s ease; }
.link-pfeil:hover::after { transform: translateX(3px); }

/* ------------------------------------------------------------------ Hero -- */

.hero { padding-block: clamp(2rem, 1.2rem + 3vw, 3.8rem) 0; }
.hero__in {
  display: grid;
  gap: clamp(1.6rem, 1rem + 2.4vw, 3rem);
  align-items: center;
}
@media (min-width: 880px) {
  .hero__in { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); }
}
.hero h1 { margin-bottom: .4em; }
.hero__lead {
  font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem);
  color: var(--grau);
  max-width: 34rem;
  margin-bottom: 1.5rem;
}
.hero__tat { margin-bottom: 1.1rem; }
.hero__bild {
  border-radius: var(--rund);
  overflow: hidden;
  box-shadow: var(--schatten-hoch);
  /* Eigene Hoehe: ohne sie scheitert object-fit still, und nur auf
     schmalen Schirmen. */
  aspect-ratio: 16 / 9;
}
.hero__bild img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 879px) {
  .hero__bild { max-width: 620px; }
}

/* -------------------------------------------------------- Offen-Anzeige -- */

.status {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .42rem .85rem .42rem .68rem;
  border-radius: 999px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  font-size: .94rem;
  font-weight: 600;
  color: var(--grau);
}
.status[data-leer] { display: none; }
.status__punkt {
  width: .62rem;
  height: .62rem;
  border-radius: 50%;
  background: var(--grau);
  flex: 0 0 auto;
}
.status--offen { background: var(--offen-hell); border-color: #bcd6c8; color: var(--offen); }
.status--offen .status__punkt { background: var(--offen); }
.status--zu { background: var(--akzent-hell); border-color: #e3c8b8; color: var(--akzent); }
.status--zu .status__punkt { background: var(--akzent); }

/* --------------------------------------------------------- Schnellfinder -- */
/*
   Die vier Dinge, wegen denen Patientinnen und Patienten diese Seite
   oeffnen: anrufen, Zeiten, Notfall, Anfahrt. Sie stehen unmittelbar unter
   dem Hero, nicht im Fuss.
*/

.schnell {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .75rem;
  /* Feste Spaltenzahlen, nicht auto-fit: dort stand zwischen 820 und 1100 px
     eine Zeile mit drei Kacheln und eine mit einer einzigen. 2 x 2 ist in
     diesem Band die ruhigere Aufteilung. */
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .schnell { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .schnell { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.schnell > li { display: flex; }
.schnell a {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  width: 100%;
  padding: 1rem 1.05rem;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--schatten);
  transition: border-color .15s ease, transform .15s ease;
}
.schnell a:hover {
  border-color: var(--tinte);
  transform: translateY(-2px);
  color: var(--text);
}
.schnell__sym {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--tinte-hell);
  color: var(--tinte);
}
.schnell__sym svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.schnell b {
  display: block;
  font-family: 'Source Serif', Georgia, serif;
  font-size: 1.08rem;
  color: var(--tinte-tief);
  font-weight: 600;
  line-height: 1.3;
}
.schnell span { display: block; font-size: .9rem; color: var(--grau); }
.schnell--notfall .schnell__sym { background: var(--notfall-hell); color: var(--notfall); }
.schnell--notfall a:hover { border-color: var(--notfall); }

/* ---------------------------------------------------------------- Kacheln -- */

.kacheln {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
  /* minmax(0, …) statt minmax(auto, …): ein langes Wort im Inhalt wuerde
     die Spalte sonst aufblaehen und das Raster sprengen. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
}
.kachel {
  display: flex;
  flex-direction: column;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  overflow: hidden;
  box-shadow: var(--schatten);
  min-width: 0;
}
.kachel__bild { aspect-ratio: 4 / 3; background: var(--papier-tief); }
.kachel__bild img { width: 100%; height: 100%; object-fit: cover; }
.kachel__text { padding: 1.1rem 1.15rem 1.25rem; display: flex;
                flex-direction: column; flex: 1; }
.kachel h3 { margin-bottom: .35em; }
.kachel p { color: var(--grau); font-size: .97rem; }
.kachel__fuss { margin-top: auto; padding-top: .85rem; }

/* --------------------------------------------------------- Text und Bild -- */

.paar {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2.2vw, 2.8rem);
  align-items: center;
}
@media (min-width: 820px) {
  .paar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paar--gedreht .paar__bild { order: -1; }
}
.paar__bild {
  border-radius: var(--rund);
  overflow: hidden;
  box-shadow: var(--schatten);
  aspect-ratio: 3 / 2;
}
.paar__bild img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 819px) { .paar__bild { max-width: 580px; } }

/* --------------------------------------------------------------- Listen -- */

.haken {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  display: grid;
  gap: .5rem;
}
.haken li {
  position: relative;
  padding-left: 1.75rem;
}
.haken li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .52em;
  width: .72rem;
  height: .4rem;
  border-left: 2.2px solid var(--akzent);
  border-bottom: 2.2px solid var(--akzent);
  transform: rotate(-45deg);
}
.ab--tinte .haken li::before { border-color: #eab784; }

.punkte { margin: 0 0 1.1rem; padding-left: 1.15rem; }
.punkte li { margin-bottom: .35rem; }
.punkte li::marker { color: var(--akzent); }

.zweispaltig { columns: 2; column-gap: 2rem; }
@media (max-width: 640px) { .zweispaltig { columns: 1; } }
.zweispaltig li { break-inside: avoid; }

/* ------------------------------------------------------------- Vertrauen -- */

.belege {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.4rem 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .belege { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .belege { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.belege li { min-width: 0; }
.belege__sym {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  background: var(--akzent-hell);
  color: var(--akzent);
  margin-bottom: .7rem;
}
.ab--tinte .belege__sym { background: rgba(255, 255, 255, .1); color: #f0c98a; }
.belege__sym svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }
.belege h3 { font-size: 1.1rem; margin-bottom: .3em; }
.belege p { font-size: .96rem; color: var(--grau); }
.ab--tinte .belege p { color: #c3c8e0; }

.marken {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .5rem;
}
.marken li {
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: .3rem .8rem;
  font-size: .88rem;
  color: var(--grau);
  background: var(--weiss);
}
.ab--tinte .marken li {
  border-color: rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .06);
  color: #c3c8e0;
}

/* ----------------------------------------------------------------- Zeiten -- */

.zeitkarten {
  display: grid;
  gap: 1.1rem;
  /* start, nicht stretch: sonst zieht die laengste Karte die kurzen mit in
     die Hoehe und unter deren Text steht eine leere weisse Flaeche. */
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
/* Zwei gleichrangige Karten nebeneinander - hier sollen sie gleich hoch
   stehen, sonst sieht das Paar schief aus. */
.zeitkarten--paar,
.zeitkarten--gleich { align-items: stretch; }
@media (min-width: 660px) {
  .zeitkarten--paar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.zeitkarte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: 1.25rem 1.3rem 1.35rem;
  box-shadow: var(--schatten);
}
.zeitkarte h3 {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.14rem;
  margin-bottom: .8rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--linie-fein);
}
.zeitkarte h3 svg { width: 1.15rem; height: 1.15rem; fill: var(--akzent); flex: 0 0 auto; }

.zeiten { margin: 0; }
.zeiten .zeile {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .3rem 1rem;
  padding: .38rem .5rem;
  margin-inline: -.5rem;
  border-radius: 6px;
}
.zeiten dt { font-weight: 600; color: var(--tinte-tief); }
.zeiten dd { margin: 0; text-align: right; display: grid; gap: .05rem; }
.zeiten .zeit { white-space: nowrap; }
.zeiten .zu { color: var(--grau); }
.zeiten .zeile[data-heute] {
  background: var(--tinte-hell);
  box-shadow: inset 2px 0 0 var(--akzent);
}
.zeiten .zeile[data-heute] dt::after {
  content: ' heute';
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--akzent);
}

/* --------------------------------------------------------------- Notfall -- */

.notfall-gross {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 1.8rem;
  background: var(--notfall);
  color: #fff;
  border-radius: var(--rund);
  padding: clamp(1.3rem, 1rem + 1.6vw, 2.1rem);
}
.notfall-gross h2 { color: #fff; margin: 0 0 .2em; }
.notfall-gross p { color: #f7dcdb; margin: 0; }
.notfall-gross__num {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: 'Source Serif', Georgia, serif;
  font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem);
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  line-height: 1;
  margin-left: auto;
  white-space: nowrap;
}
.notfall-gross__num:hover { color: #ffe3e1; }
.notfall-gross__num svg { width: .8em; height: .8em; fill: currentColor; }

.notrufliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .6rem;
  /* Sechs Nummern: 1, 2 oder 3 Spalten gehen auf, 4 liesse zwei allein. */
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .notrufliste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .notrufliste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.notrufliste a {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .8rem 1rem;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--rund-klein);
  text-decoration: none;
  color: var(--text);
}
.notrufliste a:hover { border-color: var(--notfall); color: var(--text); }
.notrufliste b {
  font-family: 'Source Serif', Georgia, serif;
  font-size: 1.5rem;
  color: var(--notfall);
  min-width: 3.2rem;
  line-height: 1;
}
.notrufliste span { display: block; font-size: .9rem; color: var(--grau); }
.notrufliste strong { display: block; font-weight: 600; color: var(--tinte-tief); }

.kontaktkarte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--akzent);
  border-radius: var(--rund);
  padding: 1.2rem 1.35rem;
  box-shadow: var(--schatten);
}
.kontaktkarte h3 { margin-bottom: .3em; }
.kontaktkarte__num {
  font-family: 'Source Serif', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--tinte);
  text-decoration: none;
  display: inline-block;
  margin-top: .3rem;
}
.kontaktkarte__num:hover { color: var(--akzent); }

/* ------------------------------------------------------------------ Team -- */

.leute {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.2rem;
  /* Feste Spaltenzahlen statt auto-fill: mit sechs Aerztinnen und Aerzten
     geht 2 und 3 immer auf, bei auto-fill stand je nach Fensterbreite eine
     einzelne Kachel in der letzten Zeile. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 560px) {
  .leute { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.person { min-width: 0; }
.person > a, .person > div {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.person__bild {
  aspect-ratio: 3 / 4;
  border-radius: var(--rund);
  overflow: hidden;
  background: var(--papier-tief);
  box-shadow: var(--schatten);
  margin-bottom: .75rem;
}
.person__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.person > a:hover .person__bild img { transform: scale(1.035); }
.leute--eng { max-width: 60rem; }
.person h3 {
  font-size: 1.06rem;
  margin-bottom: .15em;
  line-height: 1.25;
}
.person > a:hover h3 { color: var(--akzent); }
.person p { font-size: .9rem; color: var(--grau); margin: 0; line-height: 1.45; }
.person__mehr {
  display: inline-block;
  margin-top: .4rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--akzent);
}

/* ------------------------------------------------------------- Arztprofil -- */

.profil {
  display: grid;
  gap: clamp(1.6rem, 1rem + 2.4vw, 3rem);
  align-items: start;
}
@media (min-width: 820px) {
  .profil { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
}
.profil__bild {
  aspect-ratio: 3 / 4;
  border-radius: var(--rund);
  overflow: hidden;
  box-shadow: var(--schatten-hoch);
  background: var(--papier-tief);
}
.profil__bild img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 819px) { .profil__bild { max-width: 20rem; } }

.profil__rolle {
  font-size: 1.08rem;
  color: var(--akzent);
  font-weight: 600;
  margin-bottom: 1.2rem;
}
.profil__rolle span { display: block; }

.profil__zeiten { margin: 0 0 1.2rem; }
.profil__zeiten .zeile {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .2rem 1rem;
  padding: .34rem 0;
  border-bottom: 1px solid var(--linie-fein);
}
.profil__zeiten dt { font-weight: 600; color: var(--tinte-tief); }
.profil__zeiten dd { margin: 0; text-align: right; }

.fakten {
  display: grid;
  gap: 1.4rem 2.2rem;
  margin-top: 1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.fakten section { min-width: 0; }
/* h2, damit die Gliederung nicht von h1 auf h3 springt - aussehen sollen
   sie trotzdem wie kleine Etiketten, nicht wie Abschnittstitel. */
.fakten h2 {
  font-family: 'Source Sans', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--akzent);
  padding-bottom: .4rem;
  margin-bottom: .6rem;
  border-bottom: 1px solid var(--linie);
}
.fakten ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.fakten li { font-size: .96rem; }
.fakten p { font-size: .96rem; }

.hinweis {
  background: var(--akzent-hell);
  border-left: 4px solid var(--akzent);
  border-radius: 0 var(--rund-klein) var(--rund-klein) 0;
  padding: .95rem 1.15rem;
  margin: 0 0 1.2rem;
  font-size: .98rem;
}
.hinweis p:last-child { margin-bottom: 0; }
.hinweis--tinte { background: var(--tinte-hell); border-left-color: var(--tinte); }
.hinweis--notfall { background: var(--notfall-hell); border-left-color: var(--notfall); }

/* ------------------------------------------------------------- Schritte -- */

.schritte {
  list-style: none;
  counter-reset: schritt;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
  /* Es sind immer genau drei Schritte: entweder alle drei nebeneinander
     oder alle untereinander. 2 + 1 liest sich wie ein Fehler. */
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* In einer schmalen Spalte neben einem Bild bleiben sie untereinander. */
.schritte--eine { grid-template-columns: 1fr !important; }
.schritte li {
  counter-increment: schritt;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: 1.2rem 1.25rem 1.3rem;
  box-shadow: var(--schatten);
  min-width: 0;
}
.schritte li::before {
  content: counter(schritt, decimal-leading-zero);
  display: block;
  font-family: 'Source Serif', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--akzent);
  line-height: 1;
  margin-bottom: .55rem;
}
.schritte h3 { font-size: 1.08rem; margin-bottom: .3em; }
.schritte p { font-size: .96rem; color: var(--grau); margin: 0; }

/* ------------------------------------------------------------- Preisliste -- */

.preisliste { display: grid; gap: 0; }
.preisliste > div {
  display: grid;
  gap: .2rem 1.2rem;
  grid-template-columns: 1fr auto;
  padding: .95rem 0;
  border-bottom: 1px solid var(--linie);
}
.preisliste > div:first-child { border-top: 1px solid var(--linie); }
.preisliste b { font-weight: 600; color: var(--tinte-tief); font-size: 1.03rem; }
.preisliste .preis {
  font-weight: 700;
  color: var(--tinte);
  white-space: nowrap;
  justify-self: end;
}
.preisliste p {
  grid-column: 1 / -1;
  margin: 0;
  font-size: .93rem;
  color: var(--grau);
}

/* ----------------------------------------------------------- Zeitstrahl -- */

.strahl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.strahl > li {
  display: grid;
  gap: .2rem 1.6rem;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  padding-bottom: 2.2rem;
  position: relative;
}
.strahl > li::before {
  content: '';
  position: absolute;
  left: 5.5rem;
  top: .75rem;
  bottom: 0;
  width: 1px;
  background: var(--linie);
  transform: translateX(-.8rem);
}
.strahl > li:last-child { padding-bottom: 0; }
.strahl > li:last-child::before { display: none; }
.strahl__jahr {
  font-family: 'Source Serif', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--akzent);
  line-height: 1.2;
  position: relative;
}
.strahl__jahr::after {
  content: '';
  position: absolute;
  right: -1.6rem;
  top: .42rem;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--akzent);
  transform: translateX(.52rem);
}
.strahl h3 { margin-bottom: .3em; }
.strahl__bild { margin-top: .9rem; border-radius: var(--rund);
                overflow: hidden; max-width: 30rem; box-shadow: var(--schatten); }
@media (max-width: 640px) {
  .strahl > li { grid-template-columns: 1fr; gap: .1rem; padding-left: 1.4rem; }
  .strahl > li::before { left: 0; transform: none; }
  .strahl__jahr::after { right: auto; left: -1.4rem; transform: translateX(-.27rem); }
}

/* ---------------------------------------------------------------- Fragen -- */

.fragen { display: grid; gap: .6rem; }
.frage {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--rund-klein);
  overflow: hidden;
}
.frage > summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 3rem 1rem 1.15rem;
  font-weight: 600;
  color: var(--tinte-tief);
  position: relative;
  font-size: 1.02rem;
}
.frage > summary::-webkit-details-marker { display: none; }
.frage > summary::after {
  content: '';
  position: absolute;
  right: 1.25rem;
  top: 1.45rem;
  width: .6rem;
  height: .6rem;
  border-right: 2px solid var(--akzent);
  border-bottom: 2px solid var(--akzent);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.frage[open] > summary::after { transform: rotate(-135deg); top: 1.7rem; }
.frage > summary:hover { background: var(--papier-tief); }
.frage__text { padding: 0 1.15rem 1.15rem; color: var(--grau); }
.frage__text p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- Anfahrt -- */

.karte {
  border-radius: var(--rund);
  overflow: hidden;
  box-shadow: var(--schatten);
  border: 1px solid var(--linie);
  display: block;
  aspect-ratio: 16 / 9;
  position: relative;
}
.karte img { width: 100%; height: 100%; object-fit: cover; }
.karte__marke {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  color: var(--notfall);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
}
.karte__marke svg { width: 2.6rem; height: 2.6rem; fill: currentColor; }
.karte__band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(19, 26, 71, .88);
  color: #fff;
  padding: .7rem 1rem;
  font-size: .94rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.adresskarte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: 1.35rem 1.4rem;
  box-shadow: var(--schatten);
}
.adresskarte address { font-style: normal; line-height: 1.6; }
.adresskarte__reihe {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--linie-fein);
}
.adresskarte__reihe:last-child { border-bottom: 0; padding-bottom: 0; }
.adresskarte__reihe svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: var(--akzent);
  flex: 0 0 auto;
  margin-top: .22rem;
}
.adresskarte__reihe > div,
.adresskarte__reihe address { min-width: 0; }
.adresskarte__reihe b { display: block; color: var(--tinte-tief); }
.adresskarte__reihe a { font-weight: 600; overflow-wrap: anywhere; }

.haus {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .05rem;
}
.haus li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--linie-fein);
  font-size: .97rem;
}
.haus li:last-child { border-bottom: 0; }
.haus b { font-weight: 600; color: var(--tinte-tief); }
.haus span { color: var(--grau); white-space: nowrap; }

/* -------------------------------------------------------------- Aktuelles -- */

.neuigkeiten { display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.neuigkeit {
  display: grid;
  gap: 1rem;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  align-items: start;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: 1rem;
  box-shadow: var(--schatten);
}
.neuigkeit__bild {
  aspect-ratio: 4 / 3;
  border-radius: var(--rund-klein);
  overflow: hidden;
  background: var(--papier-tief);
}
.neuigkeit__bild img { width: 100%; height: 100%; object-fit: cover; }
.neuigkeit h3 { font-size: 1.05rem; margin-bottom: .25em; }
.neuigkeit p { font-size: .93rem; color: var(--grau); margin: 0; }
.neuigkeit time {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: .25rem;
}
@media (max-width: 460px) {
  .neuigkeit { grid-template-columns: 1fr; }
  .neuigkeit__bild { max-width: 10rem; }
}

/* ----------------------------------------------------------- Bildergitter -- */

.gitter {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}
.figur { margin: 0; min-width: 0; }
.figur > picture, .figur > a { display: block; }
.figur img {
  width: 100%;
  border-radius: var(--rund);
  box-shadow: var(--schatten);
}
.figur figcaption {
  font-size: .88rem;
  color: var(--grau);
  margin-top: .5rem;
  line-height: 1.45;
}

/* Anklickbare Bilder */
.zoom { position: relative; display: block; border-radius: var(--rund); }
.zoom img { aspect-ratio: 4 / 3; object-fit: cover; }
.zoom__lupe {
  position: absolute;
  right: .55rem;
  bottom: .55rem;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: rgba(19, 26, 71, .82);
  color: #fff;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.zoom__lupe svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.zoom:hover .zoom__lupe, .zoom:focus-visible .zoom__lupe { opacity: 1; }
/* Auf Zeigergeraeten ohne Hover (Handy) dauerhaft zeigen. */
@media (hover: none) { .zoom__lupe { opacity: .85; } }

.gross {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100dvh;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.gross::backdrop { background: rgba(10, 14, 36, .92); }
.gross__buehne {
  height: 100%;
  display: grid;
  place-content: center;
  gap: .9rem;
  padding: clamp(1rem, .5rem + 3vw, 3.5rem);
}
.gross__buehne img {
  max-width: 100%;
  max-height: calc(100dvh - 9rem);
  width: auto;
  object-fit: contain;
  border-radius: 6px;
  margin-inline: auto;
}
.gross__bu {
  color: #eceaf4;
  text-align: center;
  font-size: .95rem;
  margin: 0;
  display: flex;
  gap: .8rem;
  justify-content: center;
  flex-wrap: wrap;
}
.gross__zaehler { color: #9aa0c0; font-variant-numeric: tabular-nums; }
.gross__knopf {
  position: fixed;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
}
.gross__knopf:hover { background: rgba(255, 255, 255, .28); }
.gross__knopf svg { width: 1.3rem; height: 1.3rem; fill: currentColor; }
.gross__zu { top: 1rem; right: 1rem; }
.gross__pfeil { top: 50%; transform: translateY(-50%); }
.gross__pfeil--zurueck { left: .7rem; }
.gross__pfeil--weiter { right: .7rem; }
.gross-offen { overflow: hidden; }

/* --------------------------------------------------------------- Brotweg -- */

.brot {
  font-size: .88rem;
  color: var(--grau);
  padding-top: 1.3rem;
}
.brot ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .5rem;
}
.brot li { display: flex; gap: .5rem; align-items: center; }
/* Ohne eigene Hoehe sind die Verweise nur 23 px hoch - zu wenig zum
   Antippen. */
.brot a, .brot [aria-current='page'] {
  display: inline-block;
  padding-block: .3rem;
}
.brot li + li::before { content: '\203A'; color: var(--linie); }
.brot a { color: var(--grau); }
.brot a:hover { color: var(--akzent); }
.brot [aria-current='page'] { color: var(--tinte-tief); font-weight: 600; }

/* ------------------------------------------------------------------- Fuss -- */

.fuss {
  background: var(--tinte-tief);
  color: #c3c8e0;
  margin-top: clamp(2.6rem, 1.6rem + 3.4vw, 4.6rem);
  /* Platz fuer die feste Rufleiste auf schmalen Schirmen. */
  padding-bottom: 4.6rem;
}
@media (min-width: 760px) { .fuss { padding-bottom: 0; } }
.fuss__in {
  display: grid;
  gap: 2rem;
  padding-block: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.fuss__block { min-width: 0; }
.fuss h2 {
  color: #fff;
  font-family: 'Source Sans', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .9rem;
}
.fuss__logo { width: 150px; height: auto; margin-bottom: .9rem; display: block; }
/* .klein setzt sonst var(--grau) - das ist dunkelgrau auf dunkelblau und
   praktisch unlesbar. Im Fuss braucht der gedaempfte Text eine eigene,
   helle Farbe. */
.fuss .klein { color: #b6bcd8; }
.fuss a { color: #e6e8f4; }
.fuss a:hover { color: #fff; }
.fuss address { font-style: normal; line-height: 1.6; margin-bottom: .8rem; }
.fuss__kontakt { display: grid; gap: .35rem; margin: 0; }
.fuss__kontakt a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  text-decoration: none;
}
/* Die HIN-Adresse ist lang. Statt sie mitten im Wort zu brechen (aus
   "hin.ch" wurde "hi / n.ch"), steht im HTML ein <wbr> nach dem @ - hier
   nur noch die kleinere Schrift dafuer. */
.fuss__kontakt a[href^='mailto:'] { font-size: .93rem; }
.fuss__kontakt svg { width: 1.05em; height: 1.05em; fill: #9aa2ce; flex: 0 0 auto; }
.fuss__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .32rem; }
.fuss__liste a { text-decoration: none; }
.fuss__liste a:hover { text-decoration: underline; }
.fuss .zeiten .zeile { padding: .2rem .4rem; margin-inline: -.4rem; font-size: .93rem; }
.fuss .zeiten dt { color: #fff; font-weight: 600; }
/* #8f97c4 reicht auf dem dunklen Grund (5.8), aber NICHT in der
   hervorgehobenen Zeile des heutigen Tages: deren Grund ist 10 % Weiss
   ueber der Grundfarbe, und dort faellt der Wert auf 4.4. Das faellt nur an
   Tagen auf, an denen "heute" auf eine geschlossene Zeile trifft - also am
   Wochenende. Darum eine Stufe heller, das genuegt in beiden Faellen. */
.fuss .zeiten .zu { color: #9aa2ce; }
.fuss .zeiten .zeile[data-heute] {
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 2px 0 0 #eab784;
}
.fuss .zeiten .zeile[data-heute] dt::after { color: #eab784; }
.fuss__unten {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-block: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  justify-content: space-between;
  font-size: .89rem;
}
.fuss__unten p { margin: 0; }
.fuss__unten a { margin-right: 1rem; }

/* -------------------------------------------------------------- Rufleiste -- */
/*
   Feste Leiste am unteren Rand, nur auf schmalen Schirmen. Anrufen ist der
   einzige Weg zu einem Termin - der Knopf dafuer soll immer erreichbar sein.
*/

.rufleiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(247, 245, 240, .97);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom);
}
.rufleiste a {
  display: grid;
  justify-items: center;
  gap: .15rem;
  padding: .55rem .25rem .6rem;
  color: var(--tinte);
  text-decoration: none;
  /* .73rem waeren 11.7px - unter der Grenze, ab der Beschriftungen auf
     kleinen Schirmen noch zuverlaessig lesbar sind. */
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
.rufleiste a + a { border-left: 1px solid var(--linie-fein); }
.rufleiste svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }
.rufleiste a:hover { background: var(--tinte-hell); }
.rufleiste .ruf--notfall { color: var(--notfall); }
@media (min-width: 760px) { .rufleiste { display: none; } }

/* ------------------------------------------------------------- Auftreten -- */

.auftritt { opacity: 0; transform: translateY(14px); }
.auftritt--da {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .55s ease;
}
@media (prefers-reduced-motion: reduce) {
  .auftritt, .auftritt--da { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* Ohne JavaScript bleibt alles sichtbar - die Klasse wird erst vom Skript
   gesetzt, hier zur Sicherheit noch einmal. */
.kein-js .auftritt { opacity: 1; transform: none; }

/* ----------------------------------------------------------------- Druck -- */

@media print {
  .kopf, .rufleiste, .schub, .menu, .gross, .brot { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .ab { padding-block: .8rem; }
  .fuss { background: #fff; color: #000; padding-bottom: 0; }
  .fuss a, .fuss h2, .fuss .zeiten dt { color: #000; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; }
  .kachel, .zeitkarte, .schritte li { break-inside: avoid; box-shadow: none; }
}

/* ---------------------------------------------------------- Hilfsklassen -- */
/*
   Kleine Anpassungen, die frueher als style-Attribut im HTML standen.
   Das geht nicht: die Content-Security-Policy dieser Seite erlaubt
   style-src 'self' ohne 'unsafe-inline' - jedes style-Attribut wird vom
   Browser verworfen, und zwar STILL. Lokal ohne CSP sieht alles richtig
   aus, auf dem Server bricht das Layout. Darum stehen sie hier.
*/

.m0 { margin: 0; }
.mt-s { margin-top: .9rem; }
.mt-m { margin-top: 1.3rem; }
.mt-l { margin-top: 1.8rem; }
.mt-xl { margin-top: 2.4rem; }
.mb-m { margin-bottom: .8rem; }
.mb-l { margin-bottom: 1.4rem; }
.mitte { justify-content: center; }
.liste-blank { list-style: none; padding: 0; }
/* Die Seitenliste des Fusses, hier aber auf hellem Grund (404-Seite). */
.liste-seiten a { color: var(--akzent); }
.liste-seiten a:hover { color: var(--tinte); }

/* Ueberschriften, die inhaltlich eine Stufe tragen, aber kleiner gesetzt
   sind als die Stufe sonst. */
.h-klein { font-size: 1.08rem; margin-bottom: .2em; }
.h-mittel { font-size: 1.2rem; }
.h-gross { font-size: 1.3rem; }

/* Ein Begriff mit Erklaerung, untereinander mit feiner Trennlinie. */
.deflist > div {
  padding: .85rem 0;
  border-bottom: 1px solid var(--linie-fein);
}
.deflist > div:last-child { border-bottom: 0; }
.deflist p { margin: 0; }

/* Die Ueberschrift einer Zeitkarte, wenn sie inhaltlich eine h2 ist. */
.zeitkarte h2.zeitkarte__h {
  font-size: 1.14rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .8rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--linie-fein);
}
.zeitkarte h2.zeitkarte__h svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: var(--akzent);
  flex: 0 0 auto;
}

/* Ein einzelnes Portraet neben Text, nicht im Raster. */
.portraet-klein { aspect-ratio: 3 / 4; max-width: 17rem; }

.kontaktkarte--notfall {
  margin-top: 1.1rem;
  border-left-color: var(--notfall);
}