/* ==========================================================================
   Ergotherapie Anna Hain
   Farben und Schriften stammen von der Vorgängerseite (Theme "yoga").
   ========================================================================== */

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/Raleway-latin.woff2) format('woff2');
  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+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/Raleway-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/OpenSans-latin.woff2) format('woff2');
  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+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/OpenSans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --blau:        #2d5fa7;
  --blau-dunkel: #002954;
  --blau-hell:   #eaf0f8;
  --blau-rand:   #cfdcee;
  /* Bereichsfarben von den Visitenkarten: Grün für Kinder, Hellblau für
     Erwachsene. Beide sind zu hell für Text und werden nur als Fläche und
     Akzent eingesetzt; die Schrift bleibt dunkel. */
  --erwachsene:        #8ebae5;
  --erwachsene-flaeche:#ddeaf7;
  --erwachsene-rand:   #b9d3ee;
  --kinder:            #b8d698;
  --kinder-flaeche:    #e9f3dd;
  --kinder-rand:       #cde3b4;

  --text:        #1f2933;
  --text-leise:  #5a6672;
  --weiss:       #ffffff;
  --grau:        #f5f7fa;
  --rand:        #e2e8f0;
  --warnung:     #8a6d3b;
  --warnung-bg:  #fdf6e3;
  --fehler:      #a94442;
  --erfolg:      #1a7f5a;

  --breite: 1100px;
  --radius: 10px;
  --schatten: 0 1px 3px rgba(0, 41, 84, .08), 0 8px 24px rgba(0, 41, 84, .06);
}

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

body {
  margin: 0;
  font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--weiss);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
  font-family: 'Raleway', system-ui, sans-serif;
  color: var(--blau-dunkel);
  line-height: 1.25;
  margin: 0 0 .6em;
  font-weight: 700;
}
h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem); }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2rem); }
h3 { font-size: 1.2rem; font-weight: 600; }

p { margin: 0 0 1.1em; }
a { color: var(--blau); }
a:hover, a:focus { color: var(--blau-dunkel); }

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

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

/* Der Kopfbereich läuft beim Scrollen mit. Ohne diesen Abstand verschwindet
   ein angesprungenes Sprungziel darunter. */
[id] { scroll-margin-top: 6rem; }

/* Sanftes Springen, sofern die Person keine reduzierte Bewegung wünscht. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

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

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

.skip-link {
  position: absolute; left: .5rem; top: -4rem; z-index: 100;
  background: var(--blau-dunkel); color: #fff;
  padding: .7rem 1.1rem; border-radius: var(--radius);
  transition: top .15s;
}
.skip-link:focus { top: .5rem; color: #fff; }

/* --- Kopfbereich ---------------------------------------------------------- */

.topbar {
  background: var(--blau-dunkel);
  color: #dbe6f3;
  font-size: .9rem;
}
.topbar .container {
  display: flex; flex-wrap: wrap; gap: .35rem 1.75rem;
  justify-content: flex-end; padding-block: .5rem;
}
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover, .topbar a:focus { color: #fff; text-decoration: underline; }
.topbar svg { width: 1em; height: 1em; vertical-align: -.12em; margin-right: .45em; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rand);
}
.site-header .container {
  display: flex; align-items: center; gap: 1rem;
  padding-block: .7rem;
}

/* flex: none – der Markenblock darf nicht zusammengedrückt werden. Sonst
   brechen Name und Rolle um und der Kopfbereich wird doppelt so hoch. */
.marke {
  display: flex; align-items: center; gap: .8rem;
  text-decoration: none; margin-right: auto; flex: none;
}
.marke img { width: 54px; height: 54px; flex: none; }
.marke-text { display: flex; flex-direction: column; line-height: 1.2; }
.marke-name {
  font-family: 'Raleway', sans-serif; font-weight: 700;
  font-size: 1.3rem; color: var(--blau); white-space: nowrap;
}
.marke-rolle {
  font-size: .8rem; color: var(--text-leise);
  letter-spacing: .02em; white-space: nowrap;
}

.nav-toggle {
  display: none; background: none; border: 1px solid var(--rand);
  border-radius: 8px; padding: .5rem .7rem; cursor: pointer;
  color: var(--blau-dunkel); font: inherit; font-size: .9rem;
  align-items: center; gap: .5rem;
}
.nav-toggle svg { width: 1.2em; height: 1.2em; }

.hauptnav ul {
  display: flex; gap: .15rem; list-style: none; margin: 0; padding: 0;
}
.hauptnav a {
  display: block; padding: .55rem .7rem; border-radius: 8px;
  text-decoration: none; color: var(--text);
  font-size: .97rem; white-space: nowrap;
}
.hauptnav a:hover, .hauptnav a:focus { background: var(--blau-hell); color: var(--blau-dunkel); }
.hauptnav a[aria-current="page"] {
  color: var(--blau); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--blau);
  border-radius: 8px 8px 0 0;
}

/* Unterhalb dieser Breite ist die Navigation gestapelt.
   Grundzustand: sichtbar. Erst wenn JavaScript läuft (Klasse `js` am
   Dokument), wird daraus ein aufklappbares Menü. Andersherum wäre die Seite
   ohne Skripte auf dem Handy vollständig ohne Navigation. */
@media (max-width: 1100px) {
  .site-header .container { flex-wrap: wrap; }

  .hauptnav { flex-basis: 100%; }
  .hauptnav ul { flex-direction: column; gap: 0; padding: .25rem 0 0; }
  .hauptnav a { padding: .8rem .5rem; border-radius: 0; border-top: 1px solid var(--rand); }
  .hauptnav a[aria-current="page"] { box-shadow: none; }

}

/* Erst wenn Skripte laufen, wird daraus ein aufklappbares Menü. Die Abfrage
   `scripting` beantwortet der Browser selbst – dafür braucht es keine Datei,
   die eine Klasse setzt, und damit ein Glied weniger in der Ladekette.
   Kennt ein Browser die Abfrage nicht, bleibt die Navigation ausgeklappt:
   etwas hoch, aber vollständig bedienbar. */
@media (max-width: 1100px) and (scripting: enabled) {
  .nav-toggle { display: inline-flex; }
  .hauptnav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--rand);
    box-shadow: var(--schatten);
  }
  .hauptnav.offen { display: block; }
  .hauptnav ul { padding: .5rem 1.25rem 1rem; }
  .hauptnav a { border-top: 0; border-bottom: 1px solid var(--rand); }
}

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

.hero {
  background:
    radial-gradient(80rem 30rem at 85% -10%, #dce7f5 0%, rgba(220, 231, 245, 0) 60%),
    var(--blau-hell);
  border-bottom: 1px solid var(--blau-rand);
  padding-block: clamp(2.5rem, 1rem + 6vw, 4.5rem);
}
.hero-grid {
  display: grid; gap: 2.5rem; align-items: center;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
}
@media (max-width: 800px) { .hero-grid { grid-template-columns: 1fr; } }

/* Startseite: Illustration als Banner.
   Der Ausschnitt sitzt bei 82 % der Bildhöhe, nicht ganz unten: So kommt der
   Raum mit Sprossenwand und Schaukel zur Geltung, während der Tisch unten
   angeschnitten bleibt. Karten (ab 81 % Bildhöhe) und Handschiene (ab 71 %)
   sind dadurch in jeder Fensterbreite noch zu sehen, auch auf Ultrawide.
   Der weiße Verlauf hält die Schrift links lesbar. */
.hero-banner {
  /* Der Schleier steckt in einer Variablen, damit er in den Größenstufen
     unten nicht dreimal wiederholt werden muss. */
  --schleier: linear-gradient(to right,
      rgba(255, 255, 255, .95) 0%,
      rgba(255, 255, 255, .86) 32%,
      rgba(255, 255, 255, .30) 56%,
      rgba(255, 255, 255, 0) 74%);

  /* Erste Zeile: Rückfall für Browser ohne image-set(). Zweite Zeile
     überschreibt sie dort, wo image-set() verstanden wird; der Browser nimmt
     das erste Format, das er kennt. AVIF spart gegenüber WebP noch einmal
     20–40 %, bei gemessen gleicher oder besserer Bildqualität. */
  background-image: var(--schleier), url(../img/hero-gross.jpg);
  background-image: var(--schleier), image-set(
      url(../img/hero-gross.avif) type("image/avif"),
      url(../img/hero-gross.webp) type("image/webp"),
      url(../img/hero-gross.jpg)  type("image/jpeg"));
  background-size: cover;
  background-position: center 82%;
  background-repeat: no-repeat;
  min-height: clamp(440px, 46vw, 740px);
  display: flex;
  align-items: center;
  padding-block: 2.5rem;
  /* Steht sofort, während das Bild noch lädt – die Fläche bleibt nie weiß. */
  background-color: var(--blau-hell);
}

/* Unterseiten: dasselbe Motiv, aber als flaches Band. Der Inhalt beginnt
   dadurch weit oben – wer aus der Suche direkt hier landet, sieht sofort,
   worum es geht, und trotzdem die Handschrift der Startseite. */
.hero-banner-schmal {
  min-height: clamp(200px, 20vw, 320px);
  padding-block: 2rem;

  /* Höher angesetzt als auf der Startseite: Im flachen Band ist nur gut ein
     Drittel des Motivs zu sehen. Bei 82 % wäre das ausschließlich der Tisch;
     bei 50 % stehen Sprossenwand, Schaukel und Gymnastikball im Bild. */
  background-position: center 50%;

  /* Im flachen Band steht der Text weiter rechts als auf der Startseite.
     Der Schleier reicht deshalb weiter und lässt das Motiv nur am rechten
     Rand deutlich durchscheinen. */
  --schleier: linear-gradient(to right,
      rgba(255, 255, 255, .96) 0%,
      rgba(255, 255, 255, .91) 52%,
      rgba(255, 255, 255, .55) 76%,
      rgba(255, 255, 255, .15) 100%);
}
.hero-banner-schmal .hero-inhalt,
.hero-banner-schmal h1,
.hero-banner-schmal .lead { max-width: 42rem; }

/* Notebooks: 1700 px wären dort deutlich mehr Bild als Bildschirm. */
@media (max-width: 1300px) {
  .hero-banner {
    background-image: var(--schleier), url(../img/hero-mittel.jpg);
    background-image: var(--schleier), image-set(
        url(../img/hero-mittel.avif) type("image/avif"),
        url(../img/hero-mittel.webp) type("image/webp"),
        url(../img/hero-mittel.jpg)  type("image/jpeg"));
  }
}
.hero-banner .hero-inhalt { max-width: 34rem; }

/* Auf dem Handy liegt der Text über dem Bild. Weil er dort die volle Breite
   braucht, ist der weiße Schleier fast deckend – die Illustration bleibt als
   zarte Andeutung erkennbar, ohne dem Text ins Gehege zu kommen. */
@media (max-width: 760px) {
  .hero-banner {
    --schleier: linear-gradient(to bottom,
        rgba(255, 255, 255, .92) 0%,
        rgba(255, 255, 255, .86) 55%,
        rgba(255, 255, 255, .78) 100%);
    background-image: var(--schleier), url(../img/hero-klein.jpg);
    background-image: var(--schleier), image-set(
        url(../img/hero-klein.avif) type("image/avif"),
        url(../img/hero-klein.webp) type("image/webp"),
        url(../img/hero-klein.jpg)  type("image/jpeg"));
    background-position: center 82%;
  }
}

.kicker {
  display: inline-block; font-family: 'Raleway', sans-serif;
  font-weight: 600; font-size: .85rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--blau);
  margin-bottom: .8rem;
}
.lead { font-size: 1.12rem; color: #2c3742; }

/* Das Portrait steht ohne weiße Karte direkt im Banner: Der Bildhintergrund
   ist selbst ruhig und hell, ein Rahmen darum las sich wie ein zweiter Rand.
   Der zarte Schatten genügt, um das Foto vom Banner abzusetzen. */
.hero-bild { margin: 0; text-align: center; }

/* 260 px sind die Wunschgröße, aber nie mehr als die Spalte hergibt – sonst
   ragt das Bild auf schmalen Bildschirmen aus der Seite heraus. */
.hero-bild img {
  max-width: min(260px, 100%); height: auto;
  border-radius: var(--radius); box-shadow: var(--schatten);
}

/* Ab 800 px ist der Hero einspaltig (siehe .hero-grid), das Bild sitzt dann
   unter dem Text. Dort darf es kleiner sein: In der Spalte trägt es die
   Bildhälfte des Layouts, unter dem Text schiebt es nur den nächsten
   Abschnitt nach unten. */
@media (max-width: 800px) {
  .hero-bild img { max-width: min(220px, 100%); }
}
.hero-bild figcaption { font-size: .85rem; color: var(--text-leise); margin-top: .8rem; }

.buttons { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.4rem; border-radius: 8px;
  font-family: 'Raleway', sans-serif; font-weight: 600; font-size: 1rem;
  text-decoration: none; cursor: pointer;
  border: 2px solid var(--blau); background: var(--blau); color: #fff;
  transition: background .15s, border-color .15s;
}
.btn:hover, .btn:focus { background: var(--blau-dunkel); border-color: var(--blau-dunkel); color: #fff; }
.btn-sekundaer { background: transparent; color: var(--blau); }
.btn-sekundaer:hover, .btn-sekundaer:focus { background: var(--blau-dunkel); color: #fff; }

/* --- Abschnitte ----------------------------------------------------------- */

.abschnitt { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem); }
.abschnitt-grau { background: var(--grau); border-block: 1px solid var(--rand); }

.abschnitt-kopf { max-width: 46rem; margin-bottom: 2rem; }
.abschnitt-kopf h2::after {
  content: ""; display: block; width: 3rem; height: 4px;
  background: var(--akzent, var(--blau)); border-radius: 2px; margin-top: .7rem;
}

/* Bereichsfarben. Die Klasse kommt entweder auf den <section>-Block – dann
   färbt sie Überschriftenstrich und alle Karten darin – oder direkt auf eine
   einzelne Karte. Gesteuert wird beides über --akzent und --akzent-flaeche. */
.bereich-erwachsene {
  --akzent: var(--erwachsene);
  --akzent-flaeche: var(--erwachsene-flaeche);
  --akzent-rand: var(--erwachsene-rand);
}
.bereich-kinder {
  --akzent: var(--kinder);
  --akzent-flaeche: var(--kinder-flaeche);
  --akzent-rand: var(--kinder-rand);
}

.karten { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

.karte {
  background: #fff;
  border: 1px solid var(--akzent-rand, var(--rand));
  border-top: 5px solid var(--akzent, var(--blau));
  border-radius: var(--radius); padding: 1.6rem;
  box-shadow: var(--schatten);
}

/* Zusätzlich zur Karte: färbt auch die Fläche in der Bereichsfarbe.
   Bewusst opt-in – meistens genügt der Akzentstreifen oben. */
.karte-flaeche { background: var(--akzent-flaeche, #fff); }
.karte h3 { color: var(--blau-dunkel); margin-bottom: .5rem; }
.karte ul { margin: 0 0 1rem; padding-left: 1.15rem; }
.karte li { margin-bottom: .35rem; }
.karte > :last-child { margin-bottom: 0; }

.hinweis {
  background: var(--blau-hell); border: 1px solid var(--blau-rand);
  border-left: 4px solid var(--blau);
  border-radius: var(--radius); padding: 1.3rem 1.5rem;
}
.hinweis h3 { margin-bottom: .4rem; }
.hinweis > :last-child { margin-bottom: 0; }

/* Markiert Inhalte, die noch von Anna bestätigt werden müssen. */
.entwurf {
  background: var(--warnung-bg); border: 1px dashed #d8c48a;
  border-radius: var(--radius); padding: 1.1rem 1.3rem;
  color: #6b5626; font-size: .95rem; margin-bottom: 1.5rem;
}
.entwurf strong { color: var(--warnung); }
.entwurf > :last-child { margin-bottom: 0; }

/* --- Leistungen ----------------------------------------------------------- */

.preise { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.preis {
  text-align: center; background: #fff;
  border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 1.8rem 1.3rem; box-shadow: var(--schatten);
}
.preis img, .preis svg { width: 72px; height: 72px; margin-bottom: .9rem; }
.preis .dauer { font-family: 'Raleway', sans-serif; font-weight: 600; color: var(--text-leise); }
.preis .betrag {
  font-family: 'Raleway', sans-serif; font-weight: 700;
  font-size: 2rem; color: var(--blau); line-height: 1.1; margin-top: .2rem;
}

.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th, .tabelle td { text-align: left; padding: .8rem .9rem; border-bottom: 1px solid var(--rand); }
.tabelle th { font-family: 'Raleway', sans-serif; color: var(--blau-dunkel); }

/* --- Standorte und Karte -------------------------------------------------- */

.standort figure { margin: 0 0 1rem; }
.standort img { border-radius: var(--radius); border: 1px solid var(--rand); width: 100%; }
.standort .adresse { font-style: normal; margin-bottom: .8rem; }

/* --- Formular ------------------------------------------------------------- */

.formular { display: grid; gap: 1.1rem; }
.feld-paar { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .feld-paar { grid-template-columns: 1fr; } }

.feld label {
  display: block; font-family: 'Raleway', sans-serif; font-weight: 600;
  color: var(--blau-dunkel); margin-bottom: .35rem; font-size: .95rem;
}
.feld .pflicht { color: var(--fehler); }
.feld input, .feld textarea, .feld select {
  width: 100%; font: inherit; color: var(--text);
  padding: .7rem .85rem; border: 1px solid #c3ccd8;
  border-radius: 8px; background: #fff;
}
.feld input:focus, .feld textarea:focus, .feld select:focus {
  border-color: var(--blau); outline: 3px solid rgba(45, 95, 167, .25); outline-offset: 0;
}
.feld textarea { min-height: 9rem; resize: vertical; }
.feld .hilfe { font-size: .85rem; color: var(--text-leise); margin-top: .3rem; }
.feld-fehler input, .feld-fehler textarea { border-color: var(--fehler); background: #fdf3f3; }
.feldfehler { color: var(--fehler); font-size: .88rem; margin-top: .3rem; }

/* Honeypot: für Menschen unsichtbar, für Bots ein verlockendes Feld. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.meldung { border-radius: var(--radius); padding: 1.1rem 1.3rem; margin-bottom: 1.5rem; }
.meldung-erfolg { background: #e8f6f0; border: 1px solid #a8d8c4; color: #14614a; }
.meldung-fehler { background: #fdf3f3; border: 1px solid #e0b4b2; color: #7d2f2c; }
.meldung > :last-child { margin-bottom: 0; }

/* --- Häufige Fragen ------------------------------------------------------- */

.frage { padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--rand); }
.frage:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.frage h2 { font-size: 1.25rem; margin-bottom: .5rem; }
.frage p { margin-bottom: 0; }

/* --- Fußbereich ----------------------------------------------------------- */

.site-footer {
  background: var(--blau-dunkel); color: #c8d6e6;
  padding-block: 3rem 1.5rem; margin-top: 0;
}
.site-footer h3 { color: #fff; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; }
.site-footer a { color: #fff; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.site-footer address { font-style: normal; }
.footer-mitglied { background: #fff; padding: .6rem .8rem; border-radius: 8px; display: inline-block; }
.footer-mitglied img { display: block; max-width: min(200px, 100%); height: auto; }
.footer-unten {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .18);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: .9rem;
}
.footer-unten ul { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }

/* --- Hilfsklassen -------------------------------------------------------- */
/* Ersetzen Inline-Styles, damit die Content-Security-Policy ohne
   'unsafe-inline' auskommt. */

.mw-38 { max-width: 38rem; }
.mw-44 { max-width: 44rem; }
.mw-46 { max-width: 46rem; }
.mw-48 { max-width: 48rem; }

.mt-0  { margin-top: 0; }
.mt-1  { margin-top: 1rem; }
.mt-15 { margin-top: 1.5rem; }
.mt-2  { margin-top: 2rem; }
.mt-25 { margin-top: 2.5rem; }
.m-0   { margin: 0; }

.klein  { font-size: .9rem; color: var(--text-leise); }
.leise  { color: var(--text-leise); font-size: .95rem; }
.gerundet { border-radius: 8px; }

address { font-style: normal; }

/* Werdegang und Impressumsangaben.
   Lange deutsche Zusammensetzungen dürfen notfalls getrennt werden, statt die
   Tabelle in die Breite zu ziehen. */
.tabelle-links td,
.tabelle-links th {
  overflow-wrap: break-word;
  hyphens: auto;
}


/* Auf schmalen Bildschirmen bleibt für zwei Spalten kein Platz. Bezeichnung
   und Wert stehen dann untereinander. Die Rollen im HTML erhalten dabei die
   Tabellenbedeutung für Screenreader, die `display: block` sonst verlieren. */
@media (max-width: 700px) {
  .tabelle-links,
  .tabelle-links tbody,
  .tabelle-links tr,
  .tabelle-links th,
  .tabelle-links td { display: block; }

  .tabelle-links tr {
    border-bottom: 1px solid var(--rand);
    padding-block: .8rem;
  }
  .tabelle-links th,
  .tabelle-links td { border: 0; padding: 0; }
  .tabelle-links th { margin-bottom: .15rem; font-size: .9rem; }
}


/* Vorschlag bei vermutetem Tippfehler in der E-Mail-Adresse */
.tippfehler-uebernehmen {
  font: inherit; font-size: inherit; color: var(--blau);
  background: none; border: 0; padding: 0;
  text-decoration: underline; cursor: pointer;
}
.tippfehler-uebernehmen:hover,
.tippfehler-uebernehmen:focus { color: var(--blau-dunkel); }

/* --- Zwei-Klick-Karte ----------------------------------------------------- */

.karte-halter { position: relative; margin: 0 0 1rem; }
.karte-halter img { display: block; width: 100%; border-radius: var(--radius); border: 1px solid var(--rand); }

.karte-laden {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font: inherit; font-family: 'Raleway', sans-serif; font-weight: 600; font-size: .95rem;
  padding: .7rem 1.2rem; cursor: pointer;
  background: rgba(255, 255, 255, .95); color: var(--blau-dunkel);
  border: 2px solid var(--blau); border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 41, 84, .25);
}
.karte-laden:hover, .karte-laden:focus { background: var(--blau); color: #fff; }

/* Nach dem Laden füllt der Rahmen den Platz des Bildes. */
.karte-geladen { aspect-ratio: 3 / 2; }
.karte-geladen iframe {
  display: block; width: 100%; height: 100%; border: 0;
  border-radius: var(--radius); border: 1px solid var(--rand);
}