/* Ärztehuus Vindonissa — Stylesheet
   Mobile first. Alle Farbpaare sind gegen WCAG AA gerechnet (siehe
   check_meta.py / pruefe.py); die Werte in Klammern sind die Kontraste
   gegen den jeweiligen Grund. */

/* ---------- Schriften ------------------------------------------------- */
/* Nur die Gewichte, die wirklich vorkommen. Die opsz-Achse ist aus den
   Dateien entfernt — sie verdoppelt die Groesse ohne sichtbaren Gewinn. */
@font-face{
  font-family:'Source Serif';
  src:url('../fonts/sourceserif.woff2') format('woff2');
  font-weight:200 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
                U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,
                U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Source Sans';
  src:url('../fonts/sourcesans.woff2') format('woff2');
  font-weight:200 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
                U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,
                U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- Marken-Werte ---------------------------------------------- */
:root{
  --papier:#FBF8F3;
  --sand:#EDE4D8;
  --sand-tief:#E3D7C7;
  --tief:#1F3A34;          /* 11.6 auf Papier */
  --tief-2:#2A4A43;
  --text:#1C2421;          /* 15.0 auf Papier */
  --gedaempft:#4A5A54;     /*  6.9 auf Papier */
  --auf-tief:#A8BDB4;      /*  6.2 auf Tief   */
  --akzent:#9E4726;        /*  5.9 auf Papier, Weiss darauf 5.9 */
  --akzent-tief:#8F3F20;   /*  5.8 auf Sand   */
  --akzent-hell:#E09A6E;   /*  5.3 auf Tief   */
  --heute-flaeche:#F7EFE4;
  --heute-text:#8F3F20;    /*  5.8 auf Sand/Papier */
  --linie:#DCD2C4;
  --linie-tief:#3A5A52;

  --breite:74rem;
  --rand:1.25rem;
  --radius:.5rem;
  --radius-gross:.875rem;

  --schatten:0 1px 2px rgba(31,58,52,.06),0 4px 12px rgba(31,58,52,.05);
  --schatten-hoch:0 2px 4px rgba(31,58,52,.08),0 10px 28px rgba(31,58,52,.10);

  /* Hoehe der klebenden Kopfzeile. Wird von site.js gemessen und hier
     gesetzt, damit Sprungziele nicht darunter verschwinden. */
  --kopf-hoehe:4.25rem;
}

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

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

body{
  margin:0;
  background:var(--papier);
  color:var(--text);
  font-family:'Source Sans',system-ui,-apple-system,'Segoe UI',Roboto,
              'Helvetica Neue',Arial,sans-serif;
  /* Relative Groesse: waechst mit der Schrifteinstellung des Browsers. */
  font-size:1.0625rem;
  line-height:1.65;
  font-synthesis-weight:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Source Serif',Georgia,'Times New Roman',serif;
  font-weight:600;
  line-height:1.2;
  color:var(--tief);
  margin:0 0 .6em;
  text-wrap:balance;
  /* «Datenschutzerklärung» ist bei 320 px breiter als die Spalte. Ohne
     Trennung schiebt ein einziges Wort die ganze Seite waagrecht. */
  hyphens:auto;
  overflow-wrap:break-word;
}
h1{font-size:clamp(1.9rem,1.35rem + 2.6vw,3rem);letter-spacing:-.012em}
h2{font-size:clamp(1.45rem,1.15rem + 1.4vw,2.1rem);letter-spacing:-.008em}
h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem)}
h4{font-size:1.05rem}
p{margin:0 0 1.1em;overflow-wrap:break-word}
p:last-child{margin-bottom:0}

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

img{max-width:100%;height:auto}
/* Ein inline-SVG ohne width/height faellt auf die Ersatzgroesse 300 x 150
   zurueck. In einem Flex-Kasten wird es dann zusammengequetscht statt zu
   verschwinden - es sieht nach einem Layoutfehler aus, nicht nach einem
   fehlenden Mass. Deshalb hier eine Grundgroesse fuer alle Symbole. */
svg{width:1.25em;height:1.25em}
hr{border:0;border-top:1px solid var(--linie);margin:2.5rem 0}

:focus-visible{
  outline:3px solid var(--akzent);
  outline-offset:2px;
  border-radius:3px;
}
/* Auf dunklem Grund braucht der Fokusring eine helle Farbe, sonst
   verschwindet er im Tief. */
.tief :focus-visible,.kopf :focus-visible,.fuss :focus-visible{
  outline-color:var(--akzent-hell);
}

.wrap{
  max-width:var(--breite);
  margin-inline:auto;
  padding-inline:var(--rand);
}

/* Nur fuer Screenreader — aber fokussierbar, wenn es ein Link ist. */
.nur-sr{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.sprunglink{
  position:absolute;left:.75rem;top:-4rem;z-index:1000;
  background:var(--akzent);color:#fff;
  padding:.7rem 1.1rem;border-radius:var(--radius);
  font-weight:600;text-decoration:none;
  transition:top .15s ease;
}
.sprunglink:focus{top:.75rem;color:#fff}

/* ---------- Schaltflaechen -------------------------------------------- */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  /* Mindestens 44 px Tippflaeche in jede Richtung. */
  min-height:2.875rem;
  padding:.7rem 1.35rem;
  border:1px solid transparent;border-radius:var(--radius);
  font:inherit;font-weight:600;line-height:1.25;
  text-align:center;text-decoration:none;
  cursor:pointer;
  transition:background-color .15s ease,color .15s ease,
             border-color .15s ease,transform .15s ease;
}
.knopf:active{transform:translateY(1px)}
.knopf svg{width:1.15em;height:1.15em;flex:none}
/* Eine Telefonnummer wird nie umgebrochen. */
.knopf[href^="tel:"]{white-space:nowrap}
.kopf__tel{white-space:nowrap}

.knopf--haupt{background:var(--akzent);color:#fff;border-color:var(--akzent)}
.knopf--haupt:hover{background:var(--akzent-tief);border-color:var(--akzent-tief);color:#fff}

.knopf--rand{background:transparent;color:var(--tief);border-color:var(--tief)}
.knopf--rand:hover{background:var(--tief);color:var(--papier)}

.knopf--hell{background:var(--papier);color:var(--tief);border-color:var(--papier)}
.knopf--hell:hover{background:var(--sand);color:var(--tief);border-color:var(--sand)}

.knopf--auf-tief{background:transparent;color:var(--papier);border-color:var(--auf-tief)}
.knopf--auf-tief:hover{background:var(--papier);color:var(--tief);border-color:var(--papier)}

.knopf--klein{min-height:2.75rem;padding:.55rem 1rem;font-size:.95rem}
.knopf--breit{width:100%}

/* flex:0 0 auto — ohne das schrumpfen die Knoepfe, statt umzubrechen,
   und «056 441 55 57» steht dann dreizeilig im Knopf. */
.knopf-reihe{display:flex;flex-wrap:wrap;gap:.75rem;align-items:stretch}
.knopf-reihe > *{flex:0 0 auto;max-width:100%}

/* ---------- Kopfzeile -------------------------------------------------- */
.kopf{
  position:sticky;top:0;z-index:60;
  background:var(--papier);
  border-bottom:1px solid var(--linie);
}
.kopf__leiste{
  display:flex;align-items:center;gap:.75rem;
  min-height:4.25rem;
}
.marke{
  display:flex;align-items:center;gap:.6rem;
  text-decoration:none;color:var(--tief);
  /* min-width:0 — sonst schrumpft ein Flex-Kind nie unter seinen Inhalt
     und die Marke schiebt den Menueknopf aus dem Bild. */
  min-width:0;margin-right:auto;
}
.marke__zeichen{flex:none;width:2.25rem;height:2.25rem;display:block}
.marke__text{min-width:0}
.marke__name{
  display:block;
  font-family:'Source Serif',Georgia,serif;font-weight:600;
  font-size:1.0625rem;line-height:1.15;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.marke__zusatz{
  display:none;
  font-size:.75rem;color:var(--gedaempft);line-height:1.3;
  letter-spacing:.02em;
}

.kopf__tel{
  display:inline-flex;align-items:center;justify-content:center;
  flex:none;width:2.875rem;height:2.875rem;
  border:1px solid var(--linie);border-radius:var(--radius);
  color:var(--tief);text-decoration:none;
}
.kopf__tel:hover{background:var(--sand);color:var(--tief)}
.kopf__tel svg{width:1.25rem;height:1.25rem}

.kopf__termin{display:none}

.menue-knopf{
  flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  width:2.875rem;height:2.875rem;
  background:transparent;border:1px solid var(--linie);
  border-radius:var(--radius);color:var(--tief);cursor:pointer;
}
.menue-knopf:hover{background:var(--sand)}
.menue-knopf svg{width:1.4rem;height:1.4rem;display:block}
.menue-knopf__zu{display:none}
.menue-knopf[aria-expanded="true"] .menue-knopf__auf{display:none}
.menue-knopf[aria-expanded="true"] .menue-knopf__zu{display:block}

/* Navigation: mobil ein aufklappbares Feld unter der Leiste.
   [hidden] wird weiter unten NICHT durch eine eigene display-Regel
   ueberschrieben — deshalb steht hier kein display auf .nav selbst. */
.nav{
  border-top:1px solid var(--linie);
  padding-block:.5rem 1rem;
  max-height:calc(100dvh - var(--kopf-hoehe));
  overflow-y:auto;
}
.nav__liste{list-style:none;margin:0;padding:0}
.nav__liste a{
  display:block;padding:.7rem .25rem;
  color:var(--text);text-decoration:none;font-weight:500;
  border-bottom:1px solid var(--linie);
}
.nav__liste a:hover{color:var(--akzent)}
.nav__liste a[aria-current="page"]{color:var(--akzent);font-weight:700}
.nav__termin{margin-top:1rem}

@media (min-width:64rem){
  .kopf__leiste{gap:1.25rem}
  .marke__zeichen{width:2.6rem;height:2.6rem}
  .marke__name{font-size:1.2rem}
  .marke__zusatz{display:block}
  .menue-knopf{display:none}
  .kopf__tel{width:auto;padding-inline:.9rem;gap:.45rem;font-weight:600}
  .kopf__tel::after{content:attr(data-nummer)}
  .kopf__termin{display:inline-flex}

  /* Auf breiten Schirmen ist die Navigation immer sichtbar — auch wenn
     das hidden-Attribut vom Skript noch gesetzt ist. Deshalb hier
     ausdruecklich mit hoher Spezifitaet und !important, sonst gewinnt
     das [hidden]{display:none} des Browsers. */
  .kopf .nav[hidden],.kopf .nav{
    display:block!important;
    border-top:0;padding:0;margin-right:.5rem;
    max-height:none;overflow:visible;
  }
  .nav__liste{display:flex;gap:.25rem}
  .nav__liste a{
    border-bottom:0;padding:.45rem .6rem;border-radius:var(--radius);
    font-size:.975rem;
  }
  .nav__liste a:hover{background:var(--sand)}
  .nav__liste a[aria-current="page"]{background:var(--sand);color:var(--akzent-tief)}
  .nav__termin{display:none}
}

/* ---------- Abschnitte ------------------------------------------------- */
main{display:block}
.abschnitt{padding-block:3rem}
.abschnitt--eng{padding-block:2.25rem}
.abschnitt--sand{background:var(--sand)}
.abschnitt--tief{background:var(--tief);color:var(--papier)}
@media (min-width:48rem){.abschnitt{padding-block:4.5rem}.abschnitt--eng{padding-block:3rem}}

.tief h2,.tief h3,.abschnitt--tief h2,.abschnitt--tief h3{color:var(--papier)}
.abschnitt--tief a:not(.knopf){color:var(--akzent-hell)}
.abschnitt--tief a:not(.knopf):hover{color:#fff}

.kopfzeile{max-width:46rem;margin-bottom:2rem}
.kopfzeile p{color:var(--gedaempft);font-size:1.075rem}
.abschnitt--tief .kopfzeile p{color:var(--auf-tief)}

.augbraue{
  display:block;
  font-family:'Source Sans',sans-serif;font-size:.8125rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--akzent);margin-bottom:.7rem;
}
.abschnitt--tief .augbraue{color:var(--akzent-hell)}

/* ---------- Startbild -------------------------------------------------- */
/* Kein Vollbild-Foto: die groesste Datei des Bestands ist 760 px breit.
   Der Kopf traegt deshalb Schrift und Flaeche, das Foto steht daneben
   in seiner echten Groesse. */
.start{
  background:var(--tief);color:var(--papier);
  padding-block:2.75rem 3rem;
  position:relative;overflow:hidden;
}
.start::before{
  /* Angedeutete Arena-Ellipse — der Name der Praxis kommt vom
     Amphitheater Vindonissa gleich nebenan. */
  content:'';position:absolute;pointer-events:none;
  width:44rem;height:22rem;right:-14rem;top:-7rem;
  border:1px solid rgba(224,154,110,.22);border-radius:50%;
}
.start::after{
  content:'';position:absolute;pointer-events:none;
  width:30rem;height:15rem;right:-7rem;top:-1.5rem;
  border:1px solid rgba(224,154,110,.14);border-radius:50%;
}
.start__raster{position:relative;z-index:1}
.start h1{color:var(--papier);margin-bottom:.45em}
.start__vor{
  display:block;font-family:'Source Sans',sans-serif;
  font-size:.8125rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--akzent-hell);margin-bottom:1rem;
}
.start__lead{
  font-size:1.125rem;color:var(--auf-tief);max-width:36rem;
  margin-bottom:1.75rem;
}
.start__knoepfe{margin-bottom:1.75rem}
.start__merkmale{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;
  font-size:.95rem;color:var(--auf-tief);
}
.start__merkmale li{display:flex;align-items:center;gap:.45rem}
.start__merkmale svg{width:1.05rem;height:1.05rem;flex:none;color:var(--akzent-hell)}

.start__bild{display:none}
@media (min-width:62rem){
  .start{padding-block:4rem 4.5rem}
  .start__raster{
    display:grid;grid-template-columns:minmax(0,1fr) 17.5rem;
    gap:3.5rem;align-items:center;
  }
  .start__bild{
    display:block;margin:0;
    /* 280 px ist die echte Dateibreite — nicht groesser anzeigen. */
    width:17.5rem;
  }
  .start__bild img{
    display:block;width:100%;height:auto;
    border-radius:var(--radius-gross);
    box-shadow:0 18px 44px rgba(0,0,0,.3);
  }
  .start__bild figcaption{
    margin-top:.7rem;font-size:.8125rem;color:var(--auf-tief);
  }
}

/* ---------- Schnellfinder ---------------------------------------------- */
/* Die vier Fragen, mit denen Menschen auf eine Praxisseite kommen. */
.schnell{
  background:var(--papier);
  border-bottom:1px solid var(--linie);
  padding-block:1.5rem;
}
.schnell__raster{
  display:grid;gap:.75rem;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
}
.schnell__karte{
  display:flex;gap:.85rem;align-items:flex-start;
  padding:1rem 1.1rem;
  background:var(--sand);border:1px solid var(--sand-tief);
  border-radius:var(--radius);
  color:var(--text);text-decoration:none;
  transition:border-color .15s ease,background-color .15s ease;
}
.schnell__karte:hover{border-color:var(--akzent);background:var(--sand-tief);color:var(--text)}
.schnell__karte svg{width:1.5rem;height:1.5rem;flex:none;color:var(--akzent-tief);margin-top:.1rem}
.schnell__karte b{display:block;font-size:1rem;line-height:1.3}
.schnell__karte span{display:block;font-size:.875rem;color:var(--gedaempft);margin-top:.15rem}

.schnell__karte--notfall{background:#F7E9E2;border-color:#E6C7B6}
.schnell__karte--notfall:hover{background:#F1DCD1;border-color:var(--akzent)}

/* ---------- Karten / Raster -------------------------------------------- */
.raster{display:grid;gap:1.25rem}
.raster--2{grid-template-columns:1fr}
.raster--3{grid-template-columns:1fr}
@media (min-width:40rem){
  /* minmax(0,1fr) statt 1fr: sonst setzt ein langes Wort oder ein Bild
     die Spalte breiter als die Spur und das Raster laeuft ueber. */
  .raster--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .raster--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:62rem){
  .raster--3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

.karte{
  background:var(--papier);
  border:1px solid var(--linie);border-radius:var(--radius-gross);
  padding:1.5rem;
}
.abschnitt--sand .karte{background:var(--papier)}
.abschnitt--tief .karte{
  background:var(--tief-2);border-color:var(--linie-tief);color:var(--papier);
}
.karte h3{margin-bottom:.5rem}
.karte p{color:var(--gedaempft);font-size:.975rem}
.abschnitt--tief .karte p{color:var(--auf-tief)}

.karte__symbol{
  display:flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;margin-bottom:1rem;
  background:var(--sand);border-radius:var(--radius);
  color:var(--akzent-tief);
}
.abschnitt--sand .karte__symbol{background:var(--sand)}
.karte__symbol svg{width:1.5rem;height:1.5rem}

/* ---------- Sprechstunden-Tabelle -------------------------------------- */
.tabelle-huelle{
  overflow-x:auto;
  border:1px solid var(--linie);border-radius:var(--radius-gross);
  background:var(--papier);
}
table.zeiten{
  width:100%;border-collapse:collapse;
  font-size:.95rem;
  /* Die Tabelle darf schmaler nicht werden, sonst brechen die Zeiten
     mitten in der Spanne um. Die Huelle scrollt dann waagrecht. */
  min-width:38rem;
}
table.zeiten th,table.zeiten td{
  padding:.75rem .85rem;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--linie);
}
table.zeiten thead th{
  background:var(--tief);color:var(--papier);
  font-family:'Source Sans',sans-serif;font-weight:600;font-size:.875rem;
  letter-spacing:.03em;
  position:sticky;top:0;
}
table.zeiten tbody th{
  font-family:'Source Serif',Georgia,serif;font-weight:600;
  color:var(--tief);white-space:nowrap;
}
table.zeiten tbody tr:last-child th,
table.zeiten tbody tr:last-child td{border-bottom:0}
table.zeiten tbody td.heute,table.zeiten tbody th.heute{
  background:var(--heute-flaeche);
}
table.zeiten thead th.heute{
  /* box-shadow statt background: der Grund muss dunkel bleiben, weil die
     Schrift hier hell ist. */
  box-shadow:inset 0 -4px 0 var(--akzent-hell);
}
.zeit{display:block;white-space:nowrap}
.zeit + .zeit{margin-top:.2rem}
.leer{color:var(--gedaempft);opacity:.7}

.heute-hinweis{
  display:inline-flex;align-items:center;gap:.45rem;
  margin-top:1rem;font-size:.875rem;color:var(--gedaempft);
}
.heute-punkt{
  width:.75rem;height:.75rem;border-radius:2px;
  background:var(--heute-flaeche);border:1px solid var(--sand-tief);flex:none;
}

/* Telefonzeiten / Öffnungszeiten als Liste */
.zeiten-liste{list-style:none;margin:0;padding:0}
.zeiten-liste li{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.6rem 0;border-bottom:1px solid var(--linie);
  font-variant-numeric:tabular-nums;
}
.zeiten-liste li:last-child{border-bottom:0}
.zeiten-liste li.heute{font-weight:700;color:var(--heute-text)}
/* Auf dunklem Grund waere --heute-text 1.7:1. Die Variable wird dort
   umgesetzt, statt die Regel zu wiederholen. */
.fuss,.abschnitt--tief,.start{--heute-text:var(--akzent-hell)}
.abschnitt--tief .zeiten-liste li{border-color:var(--linie-tief)}
.zeiten-liste dt,.zeiten-liste b{font-weight:600}
.zeiten-liste .spalte-zeit{text-align:right}
/* Nur die einzelne Spanne bleibt zusammen, nicht die ganze Zeile. */
.zeiten-liste .spalte-zeit .zeit{display:inline-block;white-space:nowrap}
@media (max-width:26rem){
  .zeiten-liste li{display:block}
  /* Keine eigene Farbe: dieselbe Liste steht auf hellem UND auf dunklem
     Grund (Fusszeile). Ein fester Grauton waere dort 1.7:1. */
  .zeiten-liste .spalte-zeit{text-align:left}
}

/* ---------- Team -------------------------------------------------------- */
.team-raster{
  display:grid;gap:1.25rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));
}
.person{
  background:var(--papier);
  border:1px solid var(--linie);border-radius:var(--radius-gross);
  padding:1.25rem;
  display:flex;flex-direction:column;
}
.abschnitt--sand .person{background:var(--papier)}
.person__bild{
  /* 3:4 — die Datei ist 161 x 215; die Kachel bleibt darunter, damit
     nichts hochgerechnet wird. */
  width:7.5rem;aspect-ratio:3/4;
  margin:0 0 1rem;flex:none;
  border-radius:var(--radius);overflow:hidden;background:var(--sand);
}
.person__bild img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%;
}
.person__name{margin:0 0 .15rem;font-size:1.125rem}
.person__titel{
  margin:0 0 .75rem;font-size:.9rem;color:var(--akzent-tief);font-weight:600;
}
.person__text{font-size:.95rem;color:var(--gedaempft);margin-bottom:1rem}
.person__sprachen{
  margin-top:auto;padding-top:.75rem;border-top:1px solid var(--linie);
  font-size:.85rem;color:var(--gedaempft);
}
.person__sprachen b{color:var(--text);font-weight:600}

/* Werdegang */
.werdegang{margin:1rem 0 0;padding:0;list-style:none;font-size:.925rem}
.werdegang li{
  display:grid;grid-template-columns:6.5rem 1fr;gap:.25rem .9rem;
  padding:.45rem 0;border-top:1px solid var(--linie);
  color:var(--gedaempft);
}
@media (max-width:29.99rem){
  .werdegang li{grid-template-columns:1fr}
}
.werdegang .jahr{
  font-weight:700;color:var(--tief);font-variant-numeric:tabular-nums;
}

details.aufklapp{
  border:1px solid var(--linie);border-radius:var(--radius);
  background:var(--papier);margin-top:1rem;
}
details.aufklapp > summary{
  cursor:pointer;padding:.75rem 1rem;font-weight:600;font-size:.95rem;
  color:var(--tief);list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  min-height:2.75rem;
}
details.aufklapp > summary::-webkit-details-marker{display:none}
details.aufklapp > summary::after{
  content:'';flex:none;width:.6rem;height:.6rem;
  border-right:2px solid var(--akzent);border-bottom:2px solid var(--akzent);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .15s ease;
}
details.aufklapp[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
details.aufklapp > div{padding:0 1rem 1rem}

/* ---------- Notfall ----------------------------------------------------- */
.notfall-band{
  background:#7E2D14;color:#fff;
  padding-block:1.1rem;
}
.notfall-band a:not(.knopf){
  display:inline-flex;align-items:center;min-height:2.75rem;
  padding-inline:.35rem;margin-inline:-.35rem;
  color:#fff;text-decoration:underline;font-weight:700;
}
.notfall-band__inhalt{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.25rem;
  font-size:.975rem;
}
.notfall-band svg{width:1.35rem;height:1.35rem;flex:none}
.notfall-band strong{font-weight:700}

.notruf{
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
}
.notruf__karte{
  display:block;padding:1.25rem;
  background:var(--papier);border:1px solid var(--linie);
  border-left:4px solid var(--akzent);
  border-radius:var(--radius);text-decoration:none;color:var(--text);
}
.notruf__karte:hover{border-color:var(--akzent);background:var(--sand);color:var(--text)}
.notruf__karte--dringend{border-left-color:#7E2D14;background:#F7E9E2}
.notruf__karte--dringend:hover{background:#F1DCD1}
.notruf__nummer{
  display:block;font-family:'Source Serif',Georgia,serif;
  font-size:1.75rem;font-weight:700;color:var(--tief);line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.notruf__wofuer{display:block;font-weight:700;margin:.35rem 0 .4rem;font-size:1rem}
.notruf__text{display:block;font-size:.925rem;color:var(--gedaempft)}

/* ---------- Anfahrt ----------------------------------------------------- */
.weg-liste{list-style:none;margin:0;padding:0}
.weg-liste li{
  display:flex;gap:.9rem;padding:1rem 0;border-bottom:1px solid var(--linie);
}
.weg-liste li:last-child{border-bottom:0}
.weg-liste svg{width:1.4rem;height:1.4rem;flex:none;color:var(--akzent-tief);margin-top:.15rem}
.weg-liste b{display:block}
.weg-liste span{font-size:.95rem;color:var(--gedaempft)}
.weg-liste .warnung{color:#7E2D14;font-weight:600}

.karten-bild{
  display:block;border-radius:var(--radius-gross);overflow:hidden;
  border:1px solid var(--linie);
}

/* ---------- Formular ---------------------------------------------------- */
.feld{margin-bottom:1.1rem}
.feld label{display:block;font-weight:600;margin-bottom:.35rem;font-size:.95rem}
.feld .hilfe{display:block;font-weight:400;color:var(--gedaempft);font-size:.875rem}
.feld input,.feld select,.feld textarea{
  display:block;width:100%;
  min-height:2.875rem;padding:.65rem .8rem;
  font:inherit;font-size:1rem;
  color:var(--text);background:var(--papier);
  border:1px solid var(--linie);border-radius:var(--radius);
}
.feld textarea{min-height:7rem;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  border-color:var(--akzent);
}
.pflicht{color:var(--akzent-tief)}

.hinweis{
  padding:1rem 1.1rem;
  background:var(--sand);border-left:4px solid var(--akzent);
  border-radius:0 var(--radius) var(--radius) 0;
  font-size:.95rem;
}
.hinweis strong{color:var(--tief)}
.hinweis p:last-child{margin-bottom:0}
.abschnitt--tief .hinweis{background:var(--tief-2);border-left-color:var(--akzent-hell)}
.abschnitt--tief .hinweis,.abschnitt--tief .hinweis p{color:var(--papier)}
.abschnitt--tief .hinweis strong{color:#fff}

/* ---------- Kontaktblock ------------------------------------------------ */
.kontakt-raster{display:grid;gap:2rem}
@media (min-width:48rem){
  .kontakt-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem}
}
.kontakt-zeile{
  display:flex;gap:.9rem;padding:.85rem 0;
  border-bottom:1px solid var(--linie);
}
.kontakt-zeile:last-child{border-bottom:0}
.abschnitt--tief .kontakt-zeile{border-color:var(--linie-tief)}
.kontakt-zeile svg{width:1.3rem;height:1.3rem;flex:none;color:var(--akzent);margin-top:.2rem}
.abschnitt--tief .kontakt-zeile svg{color:var(--akzent-hell)}
.kontakt-zeile b{display:block;font-size:.8125rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gedaempft);font-weight:700;
  margin-bottom:.1rem}
.abschnitt--tief .kontakt-zeile b{color:var(--auf-tief)}
.kontakt-zeile a{font-size:1.05rem;font-weight:600}

/* ---------- Aktuelles --------------------------------------------------- */
.meldung{
  display:grid;gap:1.25rem;align-items:start;
  padding:1.5rem;background:var(--papier);
  border:1px solid var(--linie);border-radius:var(--radius-gross);
}
.meldung + .meldung{margin-top:1.25rem}
@media (min-width:44rem){
  .meldung.hat-bild{grid-template-columns:minmax(0,1fr) 15rem}
}
.meldung__datum{
  display:block;font-size:.8125rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--akzent-tief);margin-bottom:.4rem;
}
.meldung__bild{margin:0}
.meldung__bild img{
  display:block;width:100%;height:auto;border-radius:var(--radius);
  border:1px solid var(--linie);
}

/* ---------- Fusszeile --------------------------------------------------- */
.fuss{
  background:var(--tief);color:var(--auf-tief);
  padding-block:3rem 1.75rem;font-size:.95rem;
}
.fuss a:not(.knopf){color:var(--papier);text-decoration:none}
.fuss a:not(.knopf):hover{color:var(--akzent-hell);text-decoration:underline}
.fuss__raster{display:grid;gap:2rem}
@media (min-width:48rem){
  .fuss__raster{grid-template-columns:1.4fr 1fr 1fr}
}
.fuss h2,.fuss h3{
  color:var(--papier);font-family:'Source Sans',sans-serif;
  font-size:.8125rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:1rem;
}
.fuss__liste{list-style:none;margin:0;padding:0}
.fuss__liste li{margin-bottom:0}
.fuss__liste a{display:inline-block;padding:.55rem 0;min-height:2.75rem;
  display:flex;align-items:center}
.fuss__marke{
  font-family:'Source Serif',Georgia,serif;font-size:1.25rem;
  color:var(--papier);display:block;margin-bottom:.5rem;
}
.fuss__unten{
  margin-top:2.5rem;padding-top:1rem;
  border-top:1px solid var(--linie-tief);
  display:flex;flex-wrap:wrap;align-items:center;gap:0 1.5rem;
  font-size:.875rem;
}
.fuss__unten p{margin:0;min-height:2.75rem;display:flex;align-items:center}
.fuss__unten a{display:flex;align-items:center;min-height:2.75rem}

/* ---------- Kleinteile --------------------------------------------------- */
.merkmale{
  list-style:none;margin:0;padding:0;
  display:grid;gap:.6rem;
}
.merkmale li{display:flex;gap:.6rem;align-items:flex-start}
.merkmale svg{width:1.15rem;height:1.15rem;flex:none;color:var(--akzent);margin-top:.28rem}
.abschnitt--tief .merkmale svg{color:var(--akzent-hell)}

.marken-liste{
  list-style:none;margin:0;padding:0;
  display:grid;gap:.75rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
}
.marken-liste li{
  padding:1rem 1.1rem;background:var(--papier);
  border:1px solid var(--linie);border-radius:var(--radius);
}
.marken-liste b{display:block;color:var(--tief);margin-bottom:.2rem}
.marken-liste span{font-size:.9rem;color:var(--gedaempft)}

.text-block{max-width:44rem}
.text-block h2{margin-top:2.5rem}
.text-block h2:first-child{margin-top:0}
.text-block h3{margin-top:1.75rem}
.text-block ul{padding-left:1.2rem}
.text-block li{margin-bottom:.4rem}

.zentriert{text-align:center}
.abstand-oben{margin-top:2rem}
.klein{font-size:.875rem;color:var(--gedaempft)}
.abschnitt--tief .klein,.fuss .klein,.start .klein{color:var(--auf-tief)}

/* Brotkrumen */
.krumen{font-size:.875rem;color:var(--gedaempft);padding-block:.25rem 0}
.krumen ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:0 .4rem}
.krumen li{display:flex;align-items:center;min-height:2.75rem}
.krumen a{display:flex;align-items:center;min-height:2.75rem}
.krumen li:not(:last-child)::after{content:'›';margin-left:.4rem;color:var(--linie)}
.krumen a{color:var(--gedaempft)}
.krumen a:hover{color:var(--akzent)}
.krumen [aria-current="page"]{color:var(--text)}