/* ==========================================================================
   Praxis Monika Klis, Starnberg

   Zwei Regeln halten die Seite zusammen:
   1. Es gibt genau sechs Schriftgrößen. Keine Ausnahmen.
   2. Es gibt genau sechs Abstände. Jeder Abstand auf der Seite ist einer davon.

   Schrift ist Verdana. Sie liegt auf jedem Rechner, muss also nicht geladen
   werden, und hat eine große x-Höhe, was sie auf dem Bildschirm gut lesbar
   macht.
   ========================================================================== */

:root {
  /* --- Farben, aus der bisherigen Seite übernommen --------------------- */
  --tiefsee:     #22353c;   /* Fließtext */
  --see:         #36505a;   /* Überschriften, dunkle Flächen */
  --seicht:      #4d7080;   /* kleiner Text, 4.9:1 auf hellem Grund */
  --dunst:       #b7d2dc;   /* nur Linien */
  --himmel:      #83b6ce;   /* nur Linien */
  --himmel-hell: #a5cde0;   /* kleiner Text auf dunklem Grund, 5.1:1 */
  --papier:      #f3f6f7;   /* Grundfläche */
  --papier-hell: #fbfcfc;   /* hellere Fläche */
  --abendlicht:      #b5714a;  /* Linien, Ränder, Fokus */
  --abendlicht-text: #9c6140;  /* derselbe Ton für Text, 4.6:1 */

  /* --- Die sechs Schriftgrößen ---------------------------------------- */
  --t1: 0.75rem;                          /* 12px  Beschriftungen */
  --t2: 0.875rem;                         /* 14px  Navigation, Hinweise */
  --t3: 1rem;                             /* 16px  Fließtext */
  --t4: 1.25rem;                          /* 20px  Vorspann, Hervorhebung */
  --t5: clamp(1.5rem, 3vw, 2rem);         /*       Zwischenüberschriften */
  --t6: clamp(2rem, 5vw, 3rem);           /*       Seitentitel */

  /* --- Die sechs Abstände ---------------------------------------------- */
  --a1: 0.5rem;
  --a2: 1rem;
  --a3: 1.5rem;
  --a4: 2.5rem;
  --a5: 4rem;
  --a6: clamp(3rem, 6vw, 5rem);

  --schrift: Verdana, Geneva, 'DejaVu Sans', sans-serif;
  --bahn: 1120px;
  --rand: clamp(1.25rem, 5vw, 2.5rem);
  --kurve: cubic-bezier(.22, .61, .36, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--papier);
  color: var(--tiefsee);
  font-family: var(--schrift);
  font-size: var(--t3);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--schrift);
  color: var(--see);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--a2); }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

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

.sprung-link {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -110%);
  z-index: 100;
  background: var(--see); color: #fff;
  padding: var(--a1) var(--a3);
  font-size: var(--t2);
  border-radius: 0 0 4px 4px;
  transition: transform .2s var(--kurve);
}
.sprung-link:focus { transform: translate(-50%, 0); }

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

/* Jeder Inhaltsblock ist eine weiße Tafel auf dem blaugrauen Grund.
   Dadurch unterscheiden sich Kopf, Inhalt und Fuß klar voneinander. */
main { flex: 1; padding-block: var(--a3) var(--a4); }

.tafel {
  background: #fff;
  border-radius: 20px;
  padding: clamp(1.75rem, 4vw, 3.25rem);
}
.tafel + .tafel { margin-top: var(--a2); }

@media (max-width: 620px) {
  .tafel { border-radius: 14px; }
}

.spalte { max-width: 58ch; }

/* Kleine Beschriftung über einem Abschnitt */
.augenbraue {
  font-size: var(--t1);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--seicht);
  margin: 0 0 var(--a2);
}

/* Die sechs Größen als Klassen, für Stellen ohne eigene Regel */
.gross    { font-size: var(--t6); }
.mittel   { font-size: var(--t5); }
.vorspann { font-size: var(--t4); line-height: 1.5; color: var(--see); }

/* --- Textlink mit wachsender Unterstreichung ------------------------------ */
.pfeil {
  display: inline-block;
  font-size: var(--t2);
  font-weight: 700;
  text-decoration: none;
  color: var(--see);
  padding-bottom: 3px;
  background-image: linear-gradient(var(--abendlicht), var(--abendlicht));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size .35s var(--kurve), color .25s var(--kurve);
}
.pfeil:hover, .pfeil:focus-visible { background-size: 100% 1px; color: var(--abendlicht-text); }
.pfeil::after { content: ' \2192'; }

/* --- Kopf ----------------------------------------------------------------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid #e6edf0;
  transition: box-shadow .3s var(--kurve);
}
.kopf[data-gescrollt='ja'] { box-shadow: 0 8px 24px -18px rgba(34, 53, 60, .45); }

.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a3);
  min-height: 4.5rem;
}

.marke {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  white-space: nowrap;
}

/* Das Logo ist ein leuchtendes Gelb und auf Weiß kaum zu sehen.
   Deshalb sitzt es auf einer dunklen Fläche, dort liegt der Kontrast bei 7,8:1. */
.marke__zeichen {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.9rem;
  height: 2.4rem;
  background: var(--see);
  border-radius: 9px;
}
.marke__zeichen img { width: 84%; height: auto; }

.marke__name {
  display: block;
  font-size: var(--t3);
  font-weight: 700;
  color: var(--see);
  line-height: 1.3;
}
.marke__rolle {
  display: block;
  font-size: var(--t1);
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--seicht);
}

@media (max-width: 460px) {
  .marke__zeichen { width: 3.2rem; height: 2rem; border-radius: 7px; }
  .marke { gap: .55rem; }
}

.menue { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.6rem); }
.menue a {
  font-size: var(--t2);
  color: var(--see);
  text-decoration: none;
  padding: var(--a1) 0;
  position: relative;
  white-space: nowrap;
}
.menue a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--abendlicht);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--kurve);
}
.menue a:hover::after,
.menue a[aria-current='page']::after { transform: scaleX(1); }
.menue a[aria-current='page'] { font-weight: 700; }

.menue__ruf { color: var(--seicht) !important; }
.menue__ruf::after { display: none; }

.burger {
  display: none;
  background: none;
  border: 1px solid var(--dunst);
  border-radius: 2px;
  padding: var(--a1) var(--a2);
  cursor: pointer;
  font-family: var(--schrift);
  font-size: var(--t2);
  color: var(--see);
}

@media (max-width: 900px) {
  .burger { display: block; }
  .menue {
    position: fixed;
    inset: 4.5rem 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--papier-hell);
    border-bottom: 1px solid var(--dunst);
    padding: 0 var(--rand) var(--a3);
    transform: translateY(-140%);
    transition: transform .4s var(--kurve);
    box-shadow: 0 18px 40px -24px rgba(34, 53, 60, .35);
  }
  .menue[data-offen='ja'] { transform: translateY(0); }
  .menue a { padding: var(--a2) 0; border-bottom: 1px solid rgba(183, 210, 220, .5); font-size: var(--t3); }
  .menue a::after { display: none; }
  .menue__ruf { border-bottom: 0 !important; }
}

/* --- Auftakt -------------------------------------------------------------- */

.auftakt__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .8fr);
  gap: var(--a6);
  align-items: center;
}

.auftakt h1 { font-size: var(--t6); margin-bottom: var(--a1); }

.auftakt__rolle {
  font-size: var(--t4);
  color: var(--seicht);
  line-height: 1.4;
  margin-bottom: var(--a3);
}

/* Kastenform, mehrfach verwendet: Startseite und Kosten */
.kasten {
  background: var(--papier);
  border: 1px solid var(--dunst);
  border-radius: 12px;
  padding: var(--a3);
}

.merkmale { margin-bottom: var(--a3); max-width: 30rem; }
.merkmale__titel {
  font-size: var(--t3);
  font-weight: 700;
  color: var(--see);
  margin: 0 0 var(--a2);
  padding-bottom: var(--a2);
  border-bottom: 1px solid var(--dunst);
}
.merkmale .grade { margin: 0; max-width: none; }

.auftakt__ort {
  font-size: var(--t2);
  color: var(--seicht);
  max-width: 34rem;
  margin: var(--a3) 0 0;
}

.grade {
  list-style: none;
  margin: 0 0 var(--a3);
  padding: 0;
  display: grid;
  gap: var(--a1);
  font-size: var(--t3);
  color: var(--tiefsee);
  max-width: 32rem;
}
.grade li { padding-left: var(--a2); position: relative; }
.grade li::before {
  content: '';
  position: absolute;
  left: 0; top: .72em;
  width: .5rem; height: 1px;
  background: var(--himmel);
}

.auftakt__bild {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 14px;
}
.auftakt__bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

@media (max-width: 800px) {
  .auftakt__raster { grid-template-columns: 1fr; gap: var(--a4); }
  .auftakt__bild { aspect-ratio: 3 / 2; max-height: 60vh; order: -1; }
  .auftakt__bild img { object-position: center 25%; }
}

.nachsatz {
  margin-top: var(--a3);
  font-size: var(--t2);
  color: var(--seicht);
}

/* --- Behandlungsthemen in drei Kategorien -------------------------------- */
.kategorien {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--a2);
  margin-top: var(--a3);
}

.kategorie {
  padding: var(--a4);
  color: #fff;
  background: var(--see);
  border-radius: 12px;
}

.kategorie h2 {
  color: #fff;
  font-size: var(--t5);
  line-height: 1.25;
  margin: 0 0 var(--a4);
}

.kategorie ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--a2);
}

.kategorie li {
  font-size: var(--t2);
  line-height: 1.5;
  color: #e8eff1;
  padding-left: var(--a2);
  position: relative;
}
.kategorie li::before {
  content: '';
  position: absolute;
  left: 0; top: .72em;
  width: .5rem; height: 1px;
  background: rgba(255, 255, 255, .6);
}

@media (max-width: 820px) {
  .kategorien { grid-template-columns: 1fr; }
  .kategorie { padding: var(--a4) var(--a3); }
}

/* --- Inhaltsseiten -------------------------------------------------------- */
.seitenkopf { padding: 0 clamp(.25rem, 2vw, 1.25rem) var(--a3); }
.seitenkopf h1 { font-size: var(--t6); }
.seitenkopf .vorspann { margin-top: var(--a2); max-width: 50ch; margin-bottom: 0; }


.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .72fr);
  gap: var(--a4);
  align-items: start;
}
.duo--gedreht > *:first-child { order: 2; }
.duo--gedreht > *:last-child  { order: 1; }
.duo img { border-radius: 14px; width: 100%; }
.duo--portraet img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center 18%; }
.duo h2 { font-size: var(--t5); margin-bottom: var(--a2); }

@media (max-width: 800px) {
  .duo { grid-template-columns: 1fr; gap: var(--a3); }
  .duo--gedreht > *:first-child,
  .duo--gedreht > *:last-child { order: 0; }
}

/* --- Beruflicher Werdegang als Abfolge ---------------------------------- */
.stationen {
  list-style: none;
  margin: var(--a3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--a3);
  max-width: 44ch;
}
.stationen__phase {
  font-size: var(--t1);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--seicht);
  margin: 0 0 .15rem;
}
.stationen__ort {
  font-size: var(--t3);
  color: var(--tiefsee);
  margin: 0;
  line-height: 1.5;
}

/* --- Bildreihe ------------------------------------------------------------ */
.galerie {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--a2);
  margin: var(--a3) auto 0;
  max-width: 52rem;
}
.galerie figure { margin: 0; }
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 40%; border-radius: 10px; }
.galerie figcaption { font-size: var(--t1); color: var(--seicht); margin-top: var(--a1); }

@media (max-width: 620px) {
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galerie figure:last-child { grid-column: 1 / -1; }
  .galerie figure:last-child img { aspect-ratio: 16 / 9; }
}

/* --- Kosten --------------------------------------------------------------- */
/* Die Beträge stehen sachlich in einer Zeile, nicht als hervorgehobene Kacheln */
.tarife {
  margin: var(--a4) 0 var(--a3);
  padding: 0;
  max-width: 24rem;
  border-top: 1px solid var(--dunst);
}
.tarife > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--a3);
  padding: var(--a2) 0;
  border-bottom: 1px solid var(--dunst);
}
.tarife dt {
  font-size: var(--t3);
  color: var(--tiefsee);
}
.tarife dd {
  margin: 0;
  font-size: var(--t3);
  color: var(--see);
}

/* --- Kontaktdaten und Anfahrt --------------------------------------------- */
.daten { margin: 0; padding: 0; display: grid; gap: var(--a3); }
.daten dd + dd { margin-top: .2rem; }
.daten dt, .anfahrt h2 {
  font-size: var(--t1);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--seicht);
  margin: 0 0 var(--a1);
}
.daten dd { margin: 0; }
.daten a { text-decoration: none; border-bottom: 1px solid var(--dunst); transition: border-color .25s var(--kurve); }
.daten a:hover { border-color: var(--abendlicht); }

.anfahrt {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--a4);
  margin-top: var(--a4);
}
.anfahrt p { margin: 0; }
.anfahrt .kartenlinks { display: grid; justify-items: start; gap: var(--a1); margin-top: var(--a2); }

/* Standortseite: Angaben links und rechts, die Karte in der Mitte */
/* Gemeinsames Zeilenraster: Die Überschriften beider Spalten liegen in
   derselben Zeile, die Textblöcke ebenso. Die beiden leeren Randzeilen
   schieben alles zusammen mittig zur Karte. */
.anfahrt--bild {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto auto 1fr;
  column-gap: var(--a3);
  row-gap: 0;
  align-items: start;
}
.anfahrt__spalte { display: contents; }

.anfahrt__spalte:first-of-type > :nth-child(1) { grid-area: 2 / 1; }
.anfahrt__spalte:first-of-type > :nth-child(2) { grid-area: 3 / 1; }
.anfahrt__spalte:first-of-type > :nth-child(3) { grid-area: 4 / 1; }

.anfahrt__bild { grid-area: 1 / 2 / -1 / 3; align-self: center; }

.anfahrt__spalte:last-of-type > :nth-child(1) { grid-area: 2 / 3; }
.anfahrt__spalte:last-of-type > :nth-child(2) { grid-area: 3 / 3; }
.anfahrt__bild { margin: 0; }
.anfahrt__rahmen { position: relative; }
.anfahrt__rahmen > img { width: 100%; }
/* left und top stehen im HTML und geben die Lage im Bild an.
   Beide Marken sehen gleich aus, nur das Symbol unterscheidet sie. */
.anfahrt__pin {
  position: absolute;
  transform: translate(-22px, -100%);
  pointer-events: none;
}

.anfahrt__feld {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--a1);
  padding: 4px 10px 4px 4px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 18px -8px rgba(34, 53, 60, .6);
  white-space: nowrap;
}
.anfahrt__feld::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 100%;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid #fff;
}

.anfahrt__symbol {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 1.55rem;
  border-radius: 6px;
  background: var(--see);
}
.anfahrt__symbol img { width: 82%; height: auto; }
.anfahrt__symbol--bahn {
  color: #fff;
  font-size: var(--t2);
  font-weight: 700;
}

.anfahrt__text {
  font-size: var(--t2);
  font-weight: 700;
  color: var(--tiefsee);
  line-height: 1.2;
}

@media (max-width: 860px) {
  .anfahrt--bild { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: var(--a4); }
  .anfahrt__spalte { display: block; }
  .anfahrt__spalte:first-of-type > *, .anfahrt__spalte:last-of-type > * { grid-area: auto; }
  .anfahrt__bild { grid-area: auto; width: 100%; max-width: 30rem; margin-inline: auto; order: -1; }
}
@media (max-width: 460px) {
  .anfahrt__text { font-size: var(--t1); }
  .anfahrt__symbol { width: 1.9rem; height: 1.3rem; }
}

/* --- Kontaktseite: links die Angaben, rechts die Karte mit dem Formular -- */

.kontakt__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--a6);
  align-items: start;
}

.kontaktseite { padding-inline: clamp(.25rem, 2vw, 1.25rem); }
.kontakt__text h1 { margin-bottom: var(--a3); }
.kontakt__text .vorspann { max-width: 34ch; margin: 0; }

.kontakt__linie {
  border: 0;
  border-top: 1px solid var(--dunst);
  margin: var(--a4) 0;
  max-width: 24rem;
}

@media (max-width: 860px) {
  .kontakt__raster { grid-template-columns: 1fr; gap: var(--a4); }
}

/* --- Die Karte ----------------------------------------------------------- */
.karte {
  background: #fff;
  border: 1px solid #e6edf0;
  border-radius: 14px;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  box-shadow: 0 1px 2px rgba(34, 53, 60, .04),
              0 14px 36px -22px rgba(34, 53, 60, .22);
}

/* --- Formular ------------------------------------------------------------- */
.formular { display: grid; gap: var(--a3); }

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

.feld label {
  font-size: var(--t2);
  font-weight: 700;
  color: var(--tiefsee);
}
.feld__zusatz {
  font-weight: 400;
  color: var(--seicht);
  margin-left: .35rem;
}

.feld input,
.feld textarea {
  font-family: var(--schrift);
  font-size: var(--t3);
  color: var(--tiefsee);
  background: var(--papier);
  border: 1px solid var(--seicht);
  border-radius: 8px;
  padding: .85rem 1rem;
  width: 100%;
  transition: background .2s var(--kurve), border-color .2s var(--kurve);
}
.feld input::placeholder,
.feld textarea::placeholder { color: var(--seicht); opacity: .85; }

.feld input:hover,
.feld textarea:hover { background: #eef3f5; }

.feld input:focus,
.feld textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--see);
  box-shadow: 0 0 0 3px rgba(54, 80, 90, .12);
}

.feld textarea { resize: vertical; min-height: 7.5rem; line-height: 1.6; }

.feld__hinweis {
  font-size: var(--t1);
  line-height: 1.6;
  color: var(--seicht);
  margin: var(--a1) 0 0;
}
.feld__hinweis--mitte { text-align: center; margin-top: 0; }
.feld__hinweis a { color: var(--see); }

.zustimmung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--a2);
  align-items: start;
  font-size: var(--t2);
  line-height: 1.55;
  color: var(--see);
}
.zustimmung input {
  margin-top: .2rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--see);
}

/* Für Menschen unsichtbares Feld gegen Spam */
.falle { position: absolute; left: -9999px; }

.knopf {
  width: 100%;
  font-family: var(--schrift);
  font-size: var(--t3);
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, var(--see), var(--tiefsee));
  border: 0;
  border-radius: 10px;
  padding: 1rem var(--a3);
  cursor: pointer;
  transition: filter .2s var(--kurve), transform .1s var(--kurve);
}
.knopf:hover { filter: brightness(1.15); }
.knopf:active { transform: translateY(1px); }

.meldung {
  font-size: var(--t2);
  line-height: 1.6;
  padding: var(--a2);
  border-radius: 8px;
  margin-bottom: var(--a3);
}
.meldung--gut  { background: rgba(131, 182, 206, .18); border: 1px solid var(--himmel); color: var(--see); }
.meldung--fehl { background: rgba(181, 113, 74, .1);  border: 1px solid var(--abendlicht); color: var(--abendlicht-text); }

/* --- Rechtstexte ---------------------------------------------------------- */
.rechtstext { max-width: 68ch; }
.rechtstext h2 { font-size: var(--t4); margin: var(--a4) 0 var(--a1); }
.rechtstext h3 { font-size: var(--t3); font-weight: 700; margin: var(--a3) 0 var(--a1); }
.rechtstext ul { padding-left: var(--a3); margin: 0 0 var(--a2); }
.rechtstext li { margin-bottom: var(--a1); }
.rechtstext a { color: var(--see); text-decoration-color: var(--dunst); text-underline-offset: 3px; }
.rechtstext a:hover { text-decoration-color: var(--abendlicht); }

/* --- Fuß ------------------------------------------------------------------ */
.fuss {
  background: var(--see);
  color: #fff;
  padding-block: var(--a4);
  text-align: center;
}
.fuss__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--a1) var(--a4);
  margin-bottom: var(--a3);
}
.fuss__links a {
  font-size: var(--t3);
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--kurve);
}
.fuss__links a:hover { border-bottom-color: var(--himmel-hell); }

.fuss__strich {
  width: 2.5rem;
  height: 1px;
  border: 0;
  background: rgba(255, 255, 255, .55);
  margin: 0 auto var(--a3);
}

.fuss__adresse {
  font-size: var(--t2);
  line-height: 1.8;
  color: rgba(255, 255, 255, .9);
  margin: 0;
}
.fuss__adresse a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.fuss__adresse a:hover { border-bottom-color: #fff; }
.fuss__name { font-weight: 700; letter-spacing: .06em; color: #fff; }

/* --- Bewegung ------------------------------------------------------------- */
.auftauchen {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--kurve), transform .7s var(--kurve);
}
.auftauchen[data-sichtbar='ja'] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .auftauchen { opacity: 1; transform: none; }
}

@media print {
  .kopf, .sprung-link { display: none; }
  .auftauchen { opacity: 1; transform: none; }
  body { background: #fff; font-size: 11pt; }
  .fuss { background: none; color: #000; }
}