@charset "utf-8";
/* Praxis am Hinterhag - Gestaltung.
   Zwei Schriften, drei Farben, viel Weissraum. Die Marke gibt das Rot
   (#E2001A aus der Wortmarke) vor; alles andere ist warmes Grau, damit das
   Rot dort wirkt, wo es zaehlt: Notfall, Telefon, Termin. */

/* ------------------------------------------------------------- Schriften -- */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo.woff2') format('woff2-variations');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/sourcesans.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- Marken -- */
:root {
  --papier: #faf8f5;
  --flaeche: #ffffff;
  --sand: #f2eee7;
  --tinte: #1b2430;
  --text: #384151;
  --leise: #626c7c;   /* 5.3:1 auf Papier */
  --linie: #e3ded5;
  --linie-stark: #cfc8bc;

  --rot: #e2001a;        /* Markenrot, nur fuer Flaechen und Grosstext */
  --rot-text: #b80016;   /* dieselbe Marke, aber 5.9:1 auf Weiss */
  --rot-dunkel: #96000f;
  --rot-hauch: #fdf0f1;

  --gruen: #1f6b4a;      /* "jetzt erreichbar" */
  --gruen-hauch: #eef5f1;

  --breit: 76rem;
  --schmal: 46rem;
  --rund: 14px;
  --rund-klein: 9px;
  --schatten: 0 1px 2px rgba(27, 36, 48, .05),
              0 8px 24px -12px rgba(27, 36, 48, .16);
  --schatten-hoch: 0 2px 4px rgba(27, 36, 48, .06),
                   0 18px 44px -20px rgba(27, 36, 48, .28);
  --kopf-hoehe: 4.25rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sprungmarken landen nicht unter der klebenden Kopfzeile. */
  scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               system-ui, sans-serif;
  /* 19px Grundgroesse: die Praxis betreut Menschen jeden Alters. */
  font-size: 1.1875rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* Platz fuer die Handy-Leiste am unteren Rand. */
  padding-bottom: env(safe-area-inset-bottom);
}

h1, h2, h3, h4 {
  font-family: 'Archivo', 'Source Sans 3', system-ui, sans-serif;
  color: var(--tinte);
  line-height: 1.18;
  letter-spacing: -.012em;
  margin: 0 0 .55em;
  text-wrap: balance;
  /* "Datenschutzerklaerung" ist bei 320 px breiter als die Spalte. Ohne
     Trennung schiebt ein einziges Wort die ganze Seite seitlich weg. */
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: clamp(2rem, 1.35rem + 2.7vw, 3.15rem); font-weight: 700; }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.2rem); font-weight: 700; }
h3 { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.4rem); font-weight: 600; }
h4 { font-size: 1.0625rem; font-weight: 600; }

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

a { color: var(--rot-text); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--rot-dunkel); }

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

ul, ol { padding-left: 1.3em; }
li { margin-bottom: .35em; }

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

/* Tastatur-Bedienbarkeit: ein Fokusring, der auf hell UND auf dunkel
   sichtbar ist. Deshalb zwei Ringe uebereinander. */
:focus-visible {
  outline: 3px solid var(--rot);
  outline-offset: 2px;
  border-radius: 3px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .85);
}
.dunkel :focus-visible,
.notfall-band :focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 6px rgba(27, 36, 48, .85);
}

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.sprung {
  position: absolute; left: 1rem; top: -100vh; z-index: 200;
  background: var(--tinte); color: #fff; padding: .7rem 1.1rem;
  border-radius: var(--rund-klein); text-decoration: none; font-weight: 600;
}
.sprung:focus { top: .75rem; color: #fff; }

/* ---------------------------------------------------------------- Raster -- */
.wrap {
  width: min(100% - 2.25rem, var(--breit));
  margin-inline: auto;
}
.wrap-schmal { width: min(100% - 2.25rem, var(--schmal)); margin-inline: auto; }

section { padding-block: clamp(2.75rem, 1.6rem + 4.4vw, 5rem); }
section.eng { padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); }
.sand { background: var(--sand); }
.dunkel { background: var(--tinte); color: #dfe3e9; }
.dunkel h1, .dunkel h2, .dunkel h3, .dunkel h4 { color: #fff; }
.dunkel a { color: #ffd7db; }

.kopfzeile-block { max-width: 44rem; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.kopfzeile-block.mitte { margin-inline: auto; text-align: center; }
.augenbraue {
  font-family: 'Archivo', sans-serif;
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--rot-text); margin: 0 0 .7rem;
}
.dunkel .augenbraue { color: #ff8d9b; }
.lead { font-size: 1.1em; color: var(--text); }

/* --------------------------------------------------------------- Knoepfe -- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem;
  min-height: 3rem; padding: .7rem 1.35rem;
  border-radius: 999px; border: 1.5px solid transparent;
  font-family: 'Archivo', sans-serif; font-size: 1rem; font-weight: 600;
  line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease,
              transform .16s ease;
}
.knopf:active { transform: translateY(1px); }
.knopf svg { width: 1.15em; height: 1.15em; flex: none; }

.knopf-rot { background: var(--rot); color: #fff; }
.knopf-rot:hover { background: var(--rot-dunkel); color: #fff; }
.knopf-tinte { background: var(--tinte); color: #fff; }
.knopf-tinte:hover { background: #0f1721; color: #fff; }
.knopf-rand {
  background: transparent; color: var(--tinte); border-color: var(--linie-stark);
}
.knopf-rand:hover { background: var(--flaeche); border-color: var(--tinte); color: var(--tinte); }
.dunkel .knopf-rand { color: #fff; border-color: rgba(255,255,255,.4); }
.dunkel .knopf-rand:hover { background: rgba(255,255,255,.1); color: #fff; }
.knopf-weiss { background: #fff; color: var(--tinte); }
.knopf-weiss:hover { background: #f1eee9; color: var(--tinte); }

.knopfreihe { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ------------------------------------------------------------- Kopfzeile -- */
.kopf {
  position: sticky; top: 0; z-index: 90;
  background: rgba(250, 248, 245, .94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--linie);
}
.kopf-innen {
  display: flex; align-items: center; gap: 1rem;
  min-height: var(--kopf-hoehe);
}
.marke { display: flex; align-items: center; text-decoration: none; flex: none; }
.marke img { width: 168px; height: 52px; object-fit: contain; object-position: left center; }
@media (min-width: 48em) { .marke img { width: 196px; height: 61px; } }

.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: .6rem; }

.nav-haupt { display: none; }
@media (min-width: 68em) {
  .nav-haupt { display: flex; align-items: center; gap: .15rem; margin-left: auto; }
  .nav-haupt a {
    font-family: 'Archivo', sans-serif; font-size: .95rem; font-weight: 500;
    color: var(--tinte); text-decoration: none;
    padding: .55rem .55rem; border-radius: var(--rund-klein);
  }
  .nav-haupt a:hover { background: var(--sand); color: var(--tinte); }
  .nav-haupt a[aria-current='page'] {
    color: var(--rot-text); font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--rot);
    border-radius: var(--rund-klein) var(--rund-klein) 0 0;
  }
  .kopf-rechts { margin-left: .5rem; }
}
.kopf-tel { display: none; }
@media (min-width: 43em) { .kopf-tel { display: inline-flex; } }

/* Menue-Knopf: ab 62em ueberfluessig. */
.menue-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 2.85rem; min-width: 2.85rem; padding: .4rem .8rem;
  background: var(--flaeche); border: 1.5px solid var(--linie-stark);
  border-radius: 999px; color: var(--tinte); cursor: pointer;
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: .95rem;
}
@media (min-width: 68em) { .menue-knopf { display: none; } }
.menue-knopf svg { width: 1.2rem; height: 1.2rem; }

/* Schublade. Sichtbarkeit haengt AN EINEM Schalter: dem hidden-Attribut.
   Keine eigene display-Regel auf .schublade, sonst schlaegt sie [hidden]. */
.schublade {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(15, 23, 33, .55);
  padding: 0;
}
.schublade[hidden] { display: none; }
.schublade-blatt {
  background: var(--papier); height: 100%; width: min(23rem, 88vw);
  margin-left: auto; padding: 1.1rem 1.35rem 2.5rem;
  overflow-y: auto; display: flex; flex-direction: column;
  box-shadow: var(--schatten-hoch);
}
.schublade-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.schublade nav { display: flex; flex-direction: column; }
.schublade nav a {
  font-family: 'Archivo', sans-serif; font-size: 1.12rem; font-weight: 500;
  color: var(--tinte); text-decoration: none;
  padding: .82rem .25rem; border-bottom: 1px solid var(--linie);
}
.schublade nav a[aria-current='page'] { color: var(--rot-text); font-weight: 700; }
.schublade .knopfreihe { margin-top: 1.5rem; flex-direction: column; }
.schublade .knopf { width: 100%; }

/* ---------------------------------------------- Handy-Leiste ganz unten -- */
.handyleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--flaeche);
  border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -6px 22px -14px rgba(27, 36, 48, .4);
}
.handyleiste a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .18rem; padding: .55rem .3rem .6rem;
  font-family: 'Archivo', sans-serif; font-size: .8rem; font-weight: 600;
  color: var(--tinte); text-decoration: none; min-height: 3.5rem;
}
.handyleiste a + a { border-left: 1px solid var(--linie); }
.handyleiste svg { width: 1.3rem; height: 1.3rem; }
.handyleiste .notruf { color: var(--rot-text); }
@media (min-width: 68em) { .handyleiste { display: none; } }
@media (max-width: 67.99em) { body { padding-bottom: 4.4rem; } }

/* ---------------------------------------------------------------- Buehne -- */
.buehne { position: relative; background: var(--tinte); }
.buehne-bild { position: relative; }
.buehne-bild img {
  width: 100%; height: clamp(15rem, 46vw, 30rem); object-fit: cover;
  object-position: center 34%;
}
.buehne-karte {
  background: var(--flaeche);
  padding: clamp(1.5rem, 1rem + 2.2vw, 2.6rem);
  border-radius: var(--rund);
  box-shadow: var(--schatten-hoch);
}
@media (min-width: 62em) {
  .buehne-karte { margin-top: -7rem; position: relative; max-width: 40rem; }
}
@media (max-width: 61.99em) {
  .buehne-karte { margin-top: -1.75rem; position: relative; border-radius: var(--rund) var(--rund) 0 0; }
}
.buehne-karte h1 { margin-bottom: .5rem; }
.buehne-karte .lead { margin-bottom: 1.5rem; }

/* --------------------------------------------------------- Schnellfinder -- */
.schnellfinder { display: grid; gap: .85rem; grid-template-columns: 1fr; }
@media (min-width: 34em) { .schnellfinder { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62em) { .schnellfinder { grid-template-columns: repeat(4, 1fr); } }

.finder-karte {
  display: flex; flex-direction: column; gap: .35rem;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: 1.15rem 1.2rem 1.25rem;
  text-decoration: none; color: var(--text);
  box-shadow: var(--schatten);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.finder-karte:hover {
  border-color: var(--linie-stark); transform: translateY(-2px);
  box-shadow: var(--schatten-hoch); color: var(--text);
}
.finder-karte .ikon {
  width: 2.3rem; height: 2.3rem; border-radius: 9px;
  display: grid; place-items: center; margin-bottom: .45rem;
  background: var(--sand); color: var(--tinte);
}
.finder-karte .ikon svg { width: 1.3rem; height: 1.3rem; }
.finder-karte b {
  font-family: 'Archivo', sans-serif; font-size: 1.06rem; color: var(--tinte);
  font-weight: 600;
}
.finder-karte span { font-size: .97rem; line-height: 1.5; color: var(--leise); }
.finder-karte.dringend { border-color: #f4c3c8; background: var(--rot-hauch); }
.finder-karte.dringend .ikon { background: var(--rot); color: #fff; }
.finder-karte.dringend b { color: var(--rot-dunkel); }

/* ------------------------------------------------------- Status Telefon -- */
.status {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'Archivo', sans-serif; font-size: .93rem; font-weight: 600;
  padding: .32rem .8rem .34rem; border-radius: 999px;
  background: var(--sand); color: var(--tinte);
}
.status .punkt { width: .58rem; height: .58rem; border-radius: 50%; background: var(--leise); flex: none; }
.status.offen { background: var(--gruen-hauch); color: #145136; }
.status.offen .punkt { background: var(--gruen); }
.status.zu { background: var(--rot-hauch); color: var(--rot-dunkel); }
.status.zu .punkt { background: var(--rot); }

/* -------------------------------------------------------------- Hinweise -- */
.hinweis {
  border: 1px solid var(--linie); border-left: 4px solid var(--linie-stark);
  background: var(--flaeche); border-radius: var(--rund-klein);
  padding: 1.1rem 1.25rem;
}
/* Die Ueberschrift im Kasten kann h2 oder h3 sein - je nachdem, wo der
   Kasten in der Gliederung sitzt. Aussehen soll sie gleich. */
.hinweis h2, .hinweis h3 {
  margin-bottom: .3rem;
  font-size: clamp(1.2rem, 1.08rem + .5vw, 1.4rem); font-weight: 600;
}
.hinweis.wichtig { border-color: #f4c3c8; border-left-color: var(--rot); background: var(--rot-hauch); }
.hinweis.wichtig h2, .hinweis.wichtig h3 { color: var(--rot-dunkel); }
.hinweis-liste { display: grid; gap: 1rem; }
@media (min-width: 52em) { .hinweis-liste { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------ Leistungen -- */
.leistungen { display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 42em) { .leistungen { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68em) { .leistungen { grid-template-columns: repeat(3, 1fr); } }
.leistung {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: 1.3rem 1.35rem 1.4rem;
  /* min-width:0 – sonst sprengt ein langes Wort die Rasterspalte. */
  min-width: 0;
}
.leistung h3 { margin-bottom: .35rem; }
.leistung p { font-size: .99rem; line-height: 1.6; color: var(--leise); margin: 0; }
.leistung .nr {
  font-family: 'Archivo', sans-serif; font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; color: var(--rot-text); display: block; margin-bottom: .5rem;
}

/* ------------------------------------------------------------------ Team -- */
.team { display: grid; gap: 1.4rem 1.1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 42em) { .team { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 62em) { .team { grid-template-columns: repeat(4, 1fr); } }
.team.aerzte { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 52em) { .team.aerzte { grid-template-columns: repeat(4, 1fr); } }

.person { min-width: 0; }
/* Das Bild braucht eine eigene Hoehe, sonst greift object-fit nicht. */
.person picture { display: block; aspect-ratio: 1 / 1; border-radius: var(--rund); overflow: hidden; background: var(--sand); }
.person img { width: 100%; height: 100%; object-fit: cover; }
.person .name {
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 1.02rem;
  color: var(--tinte); margin: .75rem 0 .12rem; line-height: 1.3;
}
.person .rolle {
  font-size: .85rem; font-weight: 600; color: var(--rot-text);
  margin: 0 0 .18rem; line-height: 1.35;
}
.person ul { list-style: none; padding: 0; margin: 0; }
.person li { font-size: .9rem; line-height: 1.45; color: var(--leise); margin: 0 0 .12rem; }

/* --------------------------------------------------------------- Zeiten --- */
.zeiten { width: 100%; border-collapse: collapse; }
.zeiten th, .zeiten td { text-align: left; padding: .62rem .2rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.zeiten th { font-family: 'Archivo', sans-serif; font-weight: 600; color: var(--tinte); white-space: nowrap; }
.zeiten td { color: var(--text); font-variant-numeric: tabular-nums; }
/* Zwei Zeitspannen nebeneinander passen bei 320 px nicht in eine Zeile.
   Jede Spanne bleibt in sich unzerrissen, umbrechen darf es dazwischen. */
.zeiten td .spanne { white-space: nowrap; display: inline-block; }
.zeiten td .trenn { color: var(--leise); }
@media (max-width: 24em) {
  .zeiten { font-size: .94rem; }
  .zeiten th, .zeiten td { padding-inline: 0; }
  .zeiten td .spanne { display: block; }
  /* Untereinander braucht es keinen Trenner mehr. */
  .zeiten td .trenn { display: none; }
}
.zeiten tr.heute th, .zeiten tr.heute td { background: var(--sand); color: var(--tinte); font-weight: 600; }
.zeiten tr.heute th::after { content: ' · heute'; color: var(--rot-text); font-weight: 700; font-size: .8em; }
.zeiten .zu-text { color: var(--leise); }

.karten-paar { display: grid; gap: 1.1rem; }
@media (min-width: 54em) { .karten-paar { grid-template-columns: 1fr 1fr; align-items: start; } }
.karte {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: clamp(1.25rem, 1rem + 1vw, 1.9rem);
  min-width: 0;
}
.karte.sandig { background: var(--sand); border-color: var(--linie-stark); }

.fakten { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.fakten li { display: flex; gap: .8rem; margin: 0; }
.fakten svg { width: 1.3rem; height: 1.3rem; flex: none; color: var(--rot-text); margin-top: .25rem; }
.fakten b { display: block; font-family: 'Archivo', sans-serif; color: var(--tinte); font-weight: 600; font-size: 1rem; }
.fakten span { font-size: .99rem; line-height: 1.55; color: var(--leise); }

/* -------------------------------------------------------------- Notfall --- */
.notfall-band { background: var(--rot-text); color: #fff; }
.notfall-band h1, .notfall-band h2, .notfall-band h3 { color: #fff; }
.notfall-band a { color: #fff; }
.notfall-band .augenbraue { color: #ffd2d7; }   /* 5.1:1 auf #b80016 */
/* .lead erbt sonst --text (dunkelgrau) und stand mit 2.1:1 auf dem Rot. */
.notfall-band .lead, .notfall-band p { color: #fff; }

/* Knoepfe auf farbigen Flaechen.
   ".notfall-band a" und ".knopf-weiss" sind gleich spezifisch; die
   Abschnittsregel steht spaeter und faerbte die Schrift des weissen Knopfes
   weiss auf weiss - unsichtbar, aber anklickbar. Mit a.knopf-... gewinnt
   wieder der Knopf. Gleiches gilt fuer die dunklen Flaechen. */
.notfall-band a.knopf-weiss, .dunkel a.knopf-weiss { color: var(--tinte); }
.notfall-band a.knopf-weiss:hover, .dunkel a.knopf-weiss:hover { color: var(--tinte); }
.notfall-band a.knopf-rand, .dunkel a.knopf-rand { color: #fff; }
.notfall-band a.knopf-rand { border-color: rgba(255, 255, 255, .55); }
.notfall-band a.knopf-rand:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.nummern { display: grid; gap: .8rem; grid-template-columns: 1fr; list-style: none; padding: 0; margin: 0; }
@media (min-width: 40em) { .nummern { grid-template-columns: 1fr 1fr; } }
@media (min-width: 66em) { .nummern { grid-template-columns: repeat(3, 1fr); } }
.nummern li { margin: 0; min-width: 0; }
.nummer {
  display: flex; align-items: baseline; gap: .9rem;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: 1rem 1.15rem; text-decoration: none;
  height: 100%;
}
.nummer:hover { border-color: var(--linie-stark); background: #fff; }
.nummer .zahl {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 1.5rem;
  color: var(--tinte); letter-spacing: -.02em; flex: none;
  font-variant-numeric: tabular-nums;
}
.nummer .was { font-family: 'Archivo', sans-serif; font-weight: 600; color: var(--tinte); display: block; font-size: 1rem; line-height: 1.3; }
.nummer .zusatz { font-size: .88rem; color: var(--leise); line-height: 1.4; display: block; }
.nummer.lebenswichtig { border-color: #f4c3c8; background: var(--rot-hauch); }
.nummer.lebenswichtig .zahl { color: var(--rot-dunkel); }

/* -------------------------------------------------------------- Galerie --- */
.galerie { display: grid; gap: .8rem; grid-template-columns: 1fr; }
@media (min-width: 40em) { .galerie { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) { .galerie { grid-template-columns: repeat(3, 1fr); } }
.galerie figure { margin: 0; min-width: 0; }
.galerie button.bildknopf {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; border-radius: var(--rund); overflow: hidden;
}
.galerie picture { display: block; aspect-ratio: 3 / 2; background: var(--sand); }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.galerie button.bildknopf:hover img { transform: scale(1.03); }
.galerie figcaption { font-size: .92rem; color: var(--leise); line-height: 1.45; padding: .55rem .15rem 0; }

dialog.gross {
  border: 0; padding: 0; background: transparent;
  max-width: min(94vw, 64rem); max-height: 92vh;
}
dialog.gross::backdrop { background: rgba(12, 18, 26, .86); }
dialog.gross img { width: 100%; height: auto; border-radius: var(--rund); }
dialog.gross .gross-text {
  color: #e8eaee; font-size: .95rem; padding: .7rem .2rem 0; line-height: 1.5;
  display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between;
}
dialog.gross .zu-knopf {
  flex: none; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
  color: #fff; border-radius: 999px; min-height: 2.4rem; padding: .3rem 1rem;
  cursor: pointer; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: .9rem;
}
dialog.gross .zu-knopf:hover { background: rgba(255,255,255,.25); }

/* --------------------------------------------------------------- Inhalt --- */
.fliesstext h2 { margin-top: 2.2rem; }
.fliesstext h2:first-child { margin-top: 0; }
.fliesstext h3 { margin-top: 1.6rem; }
.fliesstext ul { margin-bottom: 1.15em; }

.definitionen { display: grid; gap: 1.15rem; }
.definitionen > div { padding-left: 1.1rem; border-left: 3px solid var(--linie-stark); }
.definitionen b { display: block; font-family: 'Archivo', sans-serif; color: var(--tinte); font-weight: 600; }
.definitionen span { font-size: .99rem; color: var(--leise); line-height: 1.6; }

/* Die Quelle ist 944 px breit. Ueber diese Breite gezogen wuerde das Bild
   hochgerechnet und unscharf - darum hier die Obergrenze, mittig gesetzt. */
.bild-band { max-width: 944px; margin-inline: auto; }
/* Volle Breite der Inhaltsspalte, eigenes Verhaeltnis 3:2. */
.bild-breit { display: block; aspect-ratio: 3 / 2; border-radius: var(--rund); overflow: hidden; background: var(--sand); margin-top: 2rem; }
.bild-breit img { width: 100%; height: 100%; object-fit: cover; }
.bild-band picture { display: block; aspect-ratio: 2 / 1; border-radius: var(--rund); overflow: hidden; background: var(--sand); }
.bild-band img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- Fuss ---- */
.fuss { background: var(--tinte); color: #b9c1cc; padding-block: 3rem 2rem; }
.fuss h2, .fuss h3 { color: #fff; font-size: 1.02rem; margin-bottom: .8rem; }
.fuss a { color: #dde2e9; text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss-raster { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 44em) { .fuss-raster { grid-template-columns: 1.3fr 1fr 1fr; } }
.fuss img.marke-fuss { width: 190px; height: 59px; object-fit: contain; object-position: left center; margin-bottom: 1rem; }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin-bottom: .45rem; font-size: .99rem; }
.fuss .klein { font-size: .9rem; line-height: 1.6; color: #8e99a7; }
.fuss-unten {
  margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.13);
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between;
  font-size: .9rem; color: #8e99a7;
}
.fuss-unten nav { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; }

/* --------------------------------------------------------------- Entwurf -- */
.entwurfsband {
  background: #2b2118; color: #f4e3c8; font-size: .88rem; line-height: 1.5;
  padding: .55rem 0; text-align: center;
}
.entwurfsband b { color: #fff; }

/* ------------------------------------------------------------- Formular -- */
.formular { display: grid; gap: 1rem; }
.feld { display: grid; gap: .35rem; }
.feld label { font-family: 'Archivo', sans-serif; font-weight: 600; color: var(--tinte); font-size: .97rem; }
.feld input, .feld textarea, .feld select {
  font: inherit; font-size: 1.03rem; color: var(--text);
  padding: .7rem .85rem; border: 1.5px solid var(--linie-stark);
  border-radius: var(--rund-klein); background: var(--flaeche); width: 100%;
}
.feld input:focus, .feld textarea:focus { border-color: var(--rot); }
.feld .hilfe { font-size: .88rem; color: var(--leise); }

/* ------------------------------------------------- Kleine Hilfsklassen -- */
/* Diese ersetzen die frueheren style="..."-Attribute. Die
   Content-Security-Policy erlaubt "style-src 'self'" und verwirft jedes
   style-Attribut - ohne Fehlermeldung im Seitenbild, nur in der Konsole.
   Lokal ohne CSP faellt das nicht auf, auf der echten Domain schon:
   Abstaende und Breiten waren dort einfach weg. */
.mt-klein   { margin-top: .8rem; }
.mt-mittel  { margin-top: 1rem; }
.mt-gross   { margin-top: 1.25rem; }
.mt-weit    { margin-top: 1.5rem; }
.mt-sehr    { margin-top: 1.75rem; }
.mt-riesig  { margin-top: 2rem; }
.mb-weit    { margin-bottom: 1rem; }
.mb-sehr    { margin-bottom: 2rem; }
.ohne-rand  { margin: 0; }
.status-oben { margin: .4rem 0 1rem; }
.fussnote   { font-size: .93rem; color: var(--leise); margin-top: .8rem; }
.fussnote-mt { font-size: .95rem; color: var(--leise); margin-top: 1rem; }
.leise-klein { color: var(--leise); font-size: .95rem; }
.mini-rand  { margin: .6rem 0 0; }
.ohne-polster { padding: 0; }
.ohne-polster-unten { padding-bottom: 0; }
.breit-52 { max-width: 52rem; }
.breit-50 { max-width: 50rem; }
.karte-36 { max-width: 36rem; }