/* ═══════════════════════════════════════════════════════════════
   Monteurstay24 — Stilvorlage
   Eine Datei, zwei Ansichten. Der Umbruch liegt bei 960 px:
   darunter die Anordnung des 390-px-Entwurfs, darüber die des
   1440-px-Entwurfs. Dazwischen fliesst alles mit.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Flächen */
  --papier:      #f7f9fb;
  --karte:       #ffffff;
  --blau-hell:   #eaf0f7;
  --blau-hell-2: #dfe8f2;
  --platzhalter: #d5e0ec;

  /* Schrift */
  --tinte:   #14253a;
  --tinte-2: #4a5f78;
  --tinte-3: #52657d;
  --listen:  #33475f;

  /* Linien */
  --linie:         #dde5ee;
  --linie-kraeftig:#c4d1e0;
  --linie-blau:    #d7e2ee;
  --feldrand:      #7387a0;
  --rand-weich:    #c9d5e3;

  /* Akzente */
  --orange:      #f07d1a;   /* trägt die Handlung, nie Text auf Weiss */
  --orange-tief: #a34d04;   /* trägt Text: Abschnittslabels, Preise */
  --blau:        #1d5fa8;   /* trägt Information: Symbole, Links, Zahlen */
  --blau-tief:   #103f75;   /* nur berührt */
  --gruen:       #3f7d5c;   /* WhatsApp */
  --gruen-flaeche:#e8f0ea;

  /* Masse */
  --rand:      20px;        /* Seitenrand mobil */
  --spalte:  1328px;        /* Inhaltsbreite auf dem Rechner */
  --radius:    12px;
  --radius-gross: 16px;
}

@media (min-width: 960px) { :root { --rand: 56px; } }

/* ── Schriften ─────────────────────────────────────────────────
   Lokal ausgeliefert, damit beim Aufruf nichts an Google geht —
   Abschnitt 09 der Datenschutzerklärung.
   Kyrillisch fehlt in Bricolage und Karla. Statt die ganze Seite
   umzustellen, sind Manrope und Inter nur an den kyrillischen
   Zeichenbereich gebunden; alles Lateinische kommt weiter aus der
   Hausschrift. size-adjust gleicht die Höhenunterschiede aus.     */

@font-face { font-family:'Karla'; font-style:normal; font-weight:400 700;
  src:url(schrift/karla-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-display:swap; }

@font-face { font-family:'Karla'; font-style:normal; font-weight:400 700;
  src:url(schrift/karla-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-display:swap; }

@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:600 800;
  src:url(schrift/bricolage-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-display:swap; }

@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:600 800;
  src:url(schrift/bricolage-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-display:swap; }

/* Kyrillisch fehlt in beiden Hausschriften. Statt die ganze Seite
   umzustellen, sind Inter und Manrope NUR an den kyrillischen
   Zeichenbereich gebunden — alles Lateinische, auch Straßen- und
   Hausnamen mitten im ukrainischen Satz, kommt weiter aus der
   Hausschrift. size-adjust gleicht die Höhenunterschiede aus. */

@font-face { font-family:'Karla'; font-style:normal; font-weight:400 700;
  src:url(schrift/inter-cyrillic.woff2) format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; size-adjust:97%; font-display:swap; }

@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:600 800;
  src:url(schrift/manrope-cyrillic.woff2) format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; size-adjust:97%; font-display:swap; }

/* ── Grundlagen ───────────────────────────────────────────────── */

*, *::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;
  background: var(--papier);
  color: var(--tinte);
  font-family: 'Karla', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}

h1, h2, h3, h4 {
  font-family: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: -0.02em;
  text-wrap: balance;        /* balance gleicht aus, pretty nicht */
  margin: 0;
}

img { max-width: 100%; height: auto; display: block; }
/* height:auto gehört zwingend dazu: die Attribute width/height im HTML
   wirken wie feste Masse und setzen aspect-ratio ausser Kraft. */

a { color: var(--blau); text-decoration: none; }
a:hover { color: var(--blau-tief); text-decoration: underline; text-underline-offset: 3px; }

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

/* Anker nicht unter die feste Kopfzeile rutschen lassen */
:target { scroll-margin-top: 96px; }

/* Nur für Vorleseprogramme */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Sprung zum Inhalt — erste Tabulatorstation */
.sprung {
  position: absolute; left: var(--rand); top: -60px; z-index: 200;
  padding: 10px 18px; background: var(--tinte); color: #fff;
  border-radius: 0 0 var(--radius) var(--radius); transition: top .15s;
}
.sprung:focus { top: 0; color: #fff; text-decoration: none; }

/* ── Bausteine ────────────────────────────────────────────────── */

.spalte { width: 100%; max-width: var(--spalte); margin: 0 auto; padding: 0 var(--rand); }

.label {                       /* das kleine Abschnittslabel in Orange tief */
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--orange-tief);
}
.zahl { font-variant-numeric: tabular-nums; }

/* Knöpfe. min-height, nie height — sonst schneidet es in der
   längsten Sprache ab. Siehe Blatt „Feste Höhen ausgeräumt".      */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 24px; border-radius: var(--radius);
  font-size: 16px; font-weight: 700; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer;
  font-family: inherit;
}
.knopf:hover { text-decoration: none; }
.knopf--handlung {
  background: var(--orange); color: var(--tinte);
  box-shadow: 0 1px 2px rgba(20,37,58,.05), 0 8px 20px rgba(240,125,26,.28);
}
.knopf--handlung:hover { background: #e8760f; color: var(--tinte); }
.knopf--rand { background: var(--karte); border-color: var(--feldrand); color: var(--tinte); }
.knopf--rand:hover { background: var(--blau-hell); color: var(--tinte); }
.knopf--dunkel { background: var(--tinte); color: #fff; }
.knopf--dunkel:hover { background: #0d1929; color: #fff; }

/* ═══ KOPFBEREICH ══════════════════════════════════════════════ */

/* Die schmale Leiste über der Kopfzeile. Auf 390 px gibt es sie
   nicht — dort tragen Kopfknöpfe und Fusszeile dieselben Angaben. */
.dienstleiste { display: none; }

@media (min-width: 960px) {
  .dienstleiste {
    display: block; background: var(--blau-hell);
    font-size: 13.5px; color: var(--tinte-2);
  }
  .dienstleiste__innen {
    display: flex; align-items: center; justify-content: space-between;
    gap: 32px; min-height: 44px; padding-block: 6px;
  }
  .dienstleiste__wege { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
  .dienstleiste__wege a,
  .dienstleiste__wege span { display: flex; align-items: center; gap: 8px; color: inherit; }
  .dienstleiste__wege a:hover { color: var(--blau-tief); }
}

.kopf {
  position: sticky; top: 0; z-index: 60;
  background: var(--papier); border-bottom: 1px solid var(--linie);
}
.kopf__innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 60px; padding-block: 8px;
}
@media (min-width: 960px) { .kopf__innen { min-height: 88px; gap: 40px; } }

.wortmarke {
  font-family: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  font-size: 20px; font-weight: 800; letter-spacing: -0.03em;
  color: var(--tinte); text-decoration: none; flex-shrink: 0;
}
.wortmarke:hover { color: var(--tinte); text-decoration: none; }
@media (min-width: 960px) { .wortmarke { font-size: 26px; } }

.hauptnavigation { display: none; }
@media (min-width: 960px) {
  .hauptnavigation {
    display: flex; align-items: center; gap: 32px;
    font-size: 15.5px; font-weight: 500; color: var(--tinte-2);
  }
  .hauptnavigation a { color: inherit; }
  .hauptnavigation a:hover { color: var(--tinte); }
  .hauptnavigation a[aria-current] { color: var(--tinte); font-weight: 600; }
}

.kopf__werkzeuge { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
@media (min-width: 960px) { .kopf__werkzeuge { gap: 12px; } }

/* Symbolknopf, 44 × 44 — das Mindestmass für einen Daumen */
.symbolknopf {
  display: flex; align-items: center; justify-content: center;
  width: 44px; min-height: 44px; padding: 0; flex-shrink: 0;
  background: var(--blau-hell); border: 0; border-radius: var(--radius);
  color: var(--tinte); cursor: pointer;
}
.symbolknopf--gruen { background: var(--gruen-flaeche); }
.symbolknopf:hover { filter: brightness(.96); }


/* ═══ SPRACHWAHL ═══════════════════════════════════════════════ */

.sprachknopf {
  display: flex; align-items: center; gap: 5px;
  min-height: 44px; padding: 0 13px; flex-shrink: 0;
  background: transparent; border: 1.5px solid var(--feldrand);
  border-radius: 10px; font-family: inherit; font-size: 13px;
  font-weight: 700; color: var(--tinte); cursor: pointer;
}
.sprachknopf[aria-expanded="true"] { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.sprachknopf[aria-expanded="true"] svg { stroke: #fff; }

/* Die Kürzel offen in der Dienstleiste — nur auf dem Rechner */
.sprachreihe { display: flex; align-items: center; gap: 4px; }
.sprachreihe a {
  padding: 4px 10px; border-radius: 999px; font-size: 12px;
  font-weight: 500; color: var(--tinte-2); text-decoration: none;
}
.sprachreihe a:hover { background: var(--blau-hell); color: var(--tinte); text-decoration: none; }
.sprachreihe a[aria-current] { background: var(--tinte); color: #fff; font-weight: 600; }
.sprachreihe a[aria-current]:hover { background: var(--tinte); color: #fff; }

/* Die aufklappende Liste auf 390 px */
.sprachliste {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--karte); border-bottom: 1px solid var(--linie);
  box-shadow: 0 12px 28px rgba(20,37,58,.18);
  max-height: calc(100dvh - 60px); overflow-y: auto; z-index: 70;
}
.sprachliste__kopf {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 48px; padding: 0 8px 0 20px; border-bottom: 1px solid #eef2f7;
}
.sprachliste a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 52px; padding: 10px 20px; color: var(--tinte);
  font-size: 16px; text-decoration: none;
}
.sprachliste a:hover { background: var(--papier); color: var(--tinte); text-decoration: none; }
.sprachliste a[aria-current] { background: var(--blau-hell); font-weight: 700; }

/* ═══ MOBILES MENÜ ═════════════════════════════════════════════ */

.menue {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--karte); border-bottom: 1px solid var(--linie);
  box-shadow: 0 12px 28px rgba(20,37,58,.18);
  max-height: calc(100dvh - 60px); overflow-y: auto; z-index: 70;
}
.menue__label { padding: 18px 20px 8px; }
.menue__punkt {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; padding: 10px 20px; color: var(--tinte);
  font-size: 17px; font-weight: 600; text-decoration: none;
}
.menue__punkt:hover { background: var(--papier); color: var(--tinte); text-decoration: none; }
.menue__weg {
  display: flex; align-items: center; gap: 14px;
  min-height: 56px; padding: 10px 20px; color: var(--tinte);
  font-size: 16px; font-weight: 600; text-decoration: none;
}
.menue__weg:hover { background: var(--papier); color: var(--tinte); text-decoration: none; }
.menue__weg small { display: block; font-size: 14px; font-weight: 400; color: var(--tinte-3); }
.menue__recht {
  display: flex; align-items: center; min-height: 48px; padding: 8px 20px;
  color: var(--tinte-2); font-size: 14.5px; text-decoration: none;
}
.menue__trenner { height: 1px; background: #eef2f7; margin: 10px 20px; }
.menue__zeit { padding: 12px 20px 20px; font-size: 12.5px; color: var(--tinte-3); }

.kopf { position: sticky; }
.kopf__innen { position: relative; }

/* ═══ SPRACHHINWEIS ════════════════════════════════════════════ */

.sprachhinweis {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  min-height: 52px; padding: 14px var(--rand) 16px;
  background: var(--tinte); color: #fff;
}
.sprachhinweis[hidden] { display: none; }
.sprachhinweis__satz {
  display: flex; gap: 11px; font-size: 14.5px; line-height: 1.45;
  flex: 1 1 240px;
}
.sprachhinweis__knoepfe { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; }
.sprachhinweis__ja {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 16px; background: var(--orange);
  color: var(--tinte); border-radius: 10px; font-size: 15px; font-weight: 700;
  text-decoration: none;
}
.sprachhinweis__ja:hover { color: var(--tinte); text-decoration: none; }
.sprachhinweis__nein {
  min-height: 44px; padding: 8px 14px; flex-shrink: 0;
  background: transparent; border: 0; border-radius: 10px;
  font-family: inherit; font-size: 14px; color: #8b9cb2; cursor: pointer;
}
.sprachhinweis__nein:hover { color: #c4d1e0; }

@media (min-width: 960px) {
  .sprachhinweis { flex-wrap: nowrap; padding: 8px var(--rand); gap: 20px; }
  .sprachhinweis__satz { font-size: 15px; flex: 1 1 auto; }
  .sprachhinweis__knoepfe { flex: 0 0 auto; }
  .sprachhinweis__ja { flex: 0 0 auto; min-height: 36px; padding: 6px 16px; font-size: 14px; }
  .sprachhinweis__nein { min-height: 36px; padding: 6px; }
}

/* ═══ FESTE AKTIONSLEISTE (nur mobil) ══════════════════════════ */

.aktionsleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: flex; gap: 8px;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  background: var(--karte); border-top: 1px solid var(--linie);
  box-shadow: 0 -6px 20px rgba(20,37,58,.10);
}
.aktionsleiste a {
  min-height: 52px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
}
.aktionsleiste__symbol { width: 52px; flex-shrink: 0; background: var(--karte); border: 1.5px solid var(--feldrand); }
.aktionsleiste__symbol--gruen { background: var(--gruen-flaeche); border: 1px solid #cfe0d5; }
.aktionsleiste__handlung {
  flex: 1 1 0; background: var(--orange); color: var(--tinte);
  font-size: 16px; font-weight: 700;
  box-shadow: 0 1px 2px rgba(20,37,58,.05), 0 8px 20px rgba(240,125,26,.28);
}
.aktionsleiste__handlung:hover { color: var(--tinte); text-decoration: none; }

/* Die Leiste verdeckt sonst die letzte Zeile der Fusszeile */
body { padding-bottom: 86px; }
@media (min-width: 960px) {
  .aktionsleiste { display: none; }
  body { padding-bottom: 0; }
}

/* ═══ FUSSZEILE ════════════════════════════════════════════════ */

.fuss { background: var(--blau-hell-2); padding: 40px 0 28px; margin-top: 56px; }
@media (min-width: 960px) { .fuss { padding: 56px 0 34px; margin-top: 80px; } }

.fuss__spalten { display: grid; gap: 32px; }
@media (min-width: 960px) { .fuss__spalten { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; } }

.fuss__titel {
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinte); margin-bottom: 12px;
}
.fuss__zeile { font-size: 14px; color: var(--tinte-2); line-height: 1.7; }
.fuss__zeile a { color: var(--tinte-2); }
.fuss__zeile a:hover { color: var(--tinte); }
.fuss__zeile strong { font-weight: 700; color: var(--tinte); }

.fuss__sprachen { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.fuss__sprachen a {
  padding: 12px 16px; background: var(--karte); border: 1px solid var(--rand-weich);
  color: var(--tinte-2); border-radius: 999px; font-size: 13px; text-decoration: none;
}
.fuss__sprachen a:hover { background: var(--blau-hell); color: var(--tinte); text-decoration: none; }
.fuss__sprachen a[aria-current] { background: var(--tinte); border-color: var(--tinte); color: #fff; font-weight: 600; }

.fuss__schluss {
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rand-weich);
  font-size: 12.5px; color: var(--tinte-3); line-height: 1.5;
}

/* ═══ ABSCHNITTE ═══════════════════════════════════════════════ */

.abschnitt { padding: 44px 0; }
@media (min-width: 960px) { .abschnitt { padding: 72px 0; } }
.abschnitt--hell { background: var(--blau-hell); }
.abschnitt--papier { background: var(--papier); }

.abschnitt__kopf { margin-bottom: 24px; }
.abschnitt__label { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.abschnitt__label::before {
  content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--orange);
}
.abschnitt__titel { font-size: 28px; font-weight: 700; line-height: 1.15; }
@media (min-width: 960px) { .abschnitt__titel { font-size: 40px; } }
.abschnitt__satz { margin-top: 12px; max-width: 60ch; color: var(--tinte-2); }

.karten { display: grid; gap: 20px; }
@media (min-width: 960px) { .karten--zwei { grid-template-columns: 1fr 1fr; gap: 28px; } }

.karte {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius-gross); overflow: hidden;
}
.karte__inhalt { padding: 20px; }
@media (min-width: 960px) { .karte__inhalt { padding: 28px; } }

figure { margin: 0; }
figcaption { font-size: 13px; color: var(--tinte-3); margin-top: 8px; }

/* ═══ FORMULAR ═════════════════════════════════════════════════ */

.feldreihe { display: grid; gap: 16px; }
.feldreihe > * { min-width: 0; }   /* sonst sprengt das Datumsfeld die Karte */
@media (min-width: 620px) { .feldreihe--zwei { grid-template-columns: 1fr 1fr; } }

.feld { display: block; }
.feld__label {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinte-3); margin-bottom: 7px;
}
.feld input, .feld select, .feld textarea {
  width: 100%; min-width: 0; max-width: 100%; min-height: 50px; padding: 12px 14px;
  background: var(--papier); border: 1.5px solid var(--feldrand);
  border-radius: 10px; font-family: inherit; font-size: 16px;  /* 16px: iOS zoomt sonst */
  color: var(--tinte);
}
.feld textarea { min-height: 92px; resize: vertical; line-height: 1.45; }
.feld input::placeholder, .feld textarea::placeholder { color: var(--tinte-3); opacity: 1; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: 2px solid var(--blau); outline-offset: 1px; border-color: var(--blau);
}
.feld--falsch input, .feld--falsch select, .feld--falsch textarea { border-color: var(--orange-tief); }

/* iOS-Safari behandelt Datumsfelder als native Bedienelemente mit eigener
   Mindestbreite und übergeht dabei das width: 100 % von oben — das Feld
   schob sich rechts aus der Karte. appearance: none nimmt ihm dieses
   Sonderrecht, danach gilt wieder unsere Breite. Chromium und Firefox
   ändern sich dadurch nicht; die Kalenderschaltfläche bleibt erhalten. */
.feld input[type="date"], .feld input[type="time"] {
  -webkit-appearance: none; appearance: none;
}
.feld input[type="date"]::-webkit-date-and-time-value {
  text-align: left; margin: 0; min-width: 0;   /* iOS zentriert sonst */
}
.feld input[type="date"]::-webkit-calendar-picker-indicator {
  margin-inline-start: auto; flex-shrink: 0;
}

.einwilligung { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; font-size: 14px; color: var(--tinte-2); }
.einwilligung input { width: 22px; height: 22px; flex-shrink: 0; margin: 2px 0 0; }

.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.zustand {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px; border-radius: var(--radius); margin-top: 20px;
}
.zustand--gut  { background: var(--gruen-flaeche); border: 1px solid #cfe0d5; }
.zustand--fehler { background: #fdf1e3; border: 1px solid #f0d5b4; }
.zustand__titel { font-size: 18px; font-weight: 700; }
.zustand__zeile { font-size: 15px; color: var(--tinte-2); margin-top: 4px; }
@media (max-width: 959px) { .zustand__titel { font-size: 18px; } .zustand__zeile { font-size: 15px; } }

/* ═══ ÜBERLAGERUNGEN ═══════════════════════════════════════════ */

.ueberlagerung {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,37,58,.72); padding: var(--rand);
}
.ueberlagerung[hidden] { display: none; }

.einwilligungsdialog {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 110;
  background: var(--karte); border-top: 1px solid var(--linie);
  box-shadow: 0 -8px 32px rgba(20,37,58,.18);
  padding: 20px var(--rand) calc(20px + env(safe-area-inset-bottom));
}
.einwilligungsdialog[hidden] { display: none; }
.einwilligungsdialog__knoepfe { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.einwilligungsdialog__knoepfe .knopf { flex: 1 1 200px; }   /* beide gleich schwer — sonst ist die Einwilligung nicht frei */

/* ═══ FEHLERSEITE ══════════════════════════════════════════════ */

.fehlerseite { max-width: 60ch; }
.fehlerseite__titel { font-size: 32px; font-weight: 800; line-height: 1.1; margin-top: 14px; }
@media (min-width: 960px) { .fehlerseite__titel { font-size: 46px; } }
.fehlerseite__satz { margin: 14px 0 0; color: var(--tinte-2); font-size: 17px; }
.fehlerseite__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.fehlerseite__weiter { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--linie); }
.fehlerseite__liste { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.fehlerseite__liste a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px;
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius);
  color: var(--tinte); font-size: 15.5px; font-weight: 600; text-decoration: none;
}
.fehlerseite__liste a:hover { background: var(--blau-hell); color: var(--tinte); text-decoration: none; }

/* ═══ SICHTBARKEIT ═════════════════════════════════════════════
   Ganz am Ende und mit !important. Diese beiden Klassen müssen
   jede Regel schlagen, die weiter oben ein display setzt — sonst
   entscheidet die Reihenfolge im Stylesheet darüber, ob der mobile
   Sprachknopf auf dem Rechner auftaucht. Genau das ist passiert. */

@media (min-width: 960px) { .nur-mobil   { display: none !important; } }
@media (max-width: 959px) { .nur-rechner { display: none !important; } }

/* ═══ RECHTSTEXTE ══════════════════════════════════════════════ */

.rechtstext .spalte { max-width: 880px; }
.rechtstext__titel { font-size: 32px; font-weight: 800; line-height: 1.1; margin-top: 14px; }
@media (min-width: 960px) { .rechtstext__titel { font-size: 44px; } }
.rechtstext__vorspann { margin: 14px 0 0; font-size: 17px; color: var(--tinte-2); max-width: 62ch; }
.rechtstext__stand { margin: 18px 0 0; font-size: 13.5px; color: var(--tinte-3); }
.rechtstext__massgeblich {
  margin: 10px 0 0; padding: 12px 16px; background: var(--blau-hell);
  border-radius: 10px; font-size: 13.5px; color: var(--tinte-2); max-width: 62ch;
}
.rechtstext__inhalt { margin-top: 32px; padding: 20px; background: var(--karte);
  border: 1px solid var(--linie); border-radius: var(--radius-gross); }
.rechtstext__inhalt ol { margin: 0; padding-left: 22px; color: var(--tinte-2); }
.rechtstext__inhalt li { margin: 6px 0; }
.rechtstext__block { margin-top: 40px; }
.rechtstext__block h2 {
  display: flex; align-items: baseline; gap: 14px;
  font-size: 21px; font-weight: 700; padding-bottom: 12px;
  border-bottom: 1px solid var(--linie);
}
@media (min-width: 960px) { .rechtstext__block h2 { font-size: 24px; } }
.rechtstext__nummer { font-size: 14px; font-weight: 700; color: var(--orange-tief); }
.rechtstext__block p { margin: 14px 0 0; color: var(--tinte-2); max-width: 70ch; }
.rechtstext__block ul { margin: 12px 0 0; padding-left: 20px; color: var(--tinte-2); max-width: 70ch; }
.rechtstext__block li { margin: 5px 0; }

.angaben { display: grid; gap: 4px 20px; margin: 16px 0 0; }
@media (min-width: 620px) { .angaben { grid-template-columns: 210px 1fr; } }
.angaben dt { font-size: 13.5px; color: var(--tinte-3); padding-top: 4px; }
.angaben dd { margin: 0 0 12px; color: var(--tinte); }
@media (min-width: 620px) { .angaben dd { margin-bottom: 8px; } }

/* ═══ HELD ═════════════════════════════════════════════════════ */

.held { position: relative; overflow: hidden; }
.held__bild {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 52%;
}
.held__schleier {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(247,249,251,.97) 0%, rgba(247,249,251,.93) 52%, rgba(250,247,242,.55) 100%);
}
@media (min-width: 960px) {
  .held__schleier {
    background: linear-gradient(96deg, #f7f9fb 0%, #f7f9fb 43%, rgba(250,247,242,.72) 58%, rgba(250,247,242,.16) 100%);
  }
}
.held__innen {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 28px;
  padding-top: 36px; padding-bottom: 40px;
}
@media (min-width: 960px) {
  .held__innen { flex-direction: row; align-items: flex-start; gap: 56px; padding-top: 74px; padding-bottom: 64px; }
}
.held__text { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 960px) { .held__text { width: 780px; gap: 24px; } }

.held__ort {
  align-self: flex-start; padding: 7px 14px;
  background: var(--blau-hell); border-radius: 999px;
}
.held__titel { font-size: 34px; line-height: 1.06; font-weight: 800; }
@media (min-width: 620px) { .held__titel { font-size: 44px; } }
@media (min-width: 960px) { .held__titel { font-size: 62px; line-height: 1.04; } }
.held__preiszeile { font-size: 24px; font-weight: 700; color: var(--orange-tief); }
@media (min-width: 620px) { .held__preiszeile { font-size: 30px; } }
@media (min-width: 960px) { .held__preiszeile { font-size: 38px; } }
.held__satz { margin: 0; max-width: 60ch; font-size: 17px; line-height: 1.62; color: var(--tinte-2); }
@media (min-width: 960px) { .held__satz { font-size: 19px; } }
.held__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.held__knoepfe .knopf { flex: 1 1 240px; }
@media (min-width: 960px) {
  .held__knoepfe .knopf { flex: 0 0 auto; }
  .held__knopf-gross { min-height: 60px; font-size: 17px; padding: 14px 30px; }
}
.held__sprachen { margin: 0; font-size: 14.5px; color: var(--tinte-2); }

.preiskarte {
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius-gross);
  padding: 24px; display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 2px 4px rgba(20,37,58,.04), 0 20px 44px rgba(20,37,58,.10);
}
@media (min-width: 960px) { .preiskarte { width: 340px; flex-shrink: 0; margin-top: 4px; padding: 28px; gap: 20px; } }
.preiskarte__zahl { display: flex; align-items: baseline; gap: 7px; margin: 8px 0 0; }
.preiskarte__ab { font-size: 15px; color: var(--tinte-3); }
.preiskarte__zahl strong {
  font-family: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  font-size: 46px; font-weight: 800; color: var(--orange-tief); line-height: 1;
}
.preiskarte__euro { font-size: 22px; font-weight: 700; color: var(--orange-tief); }
.preiskarte__satz { margin: 6px 0 0; font-size: 14px; color: var(--tinte-2); }
.preiskarte__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px;
  padding-top: 18px; border-top: 1px solid var(--linie); font-size: 14.5px; color: var(--tinte-2); }
.preiskarte__liste strong { color: var(--tinte); }
.preiskarte__fuss { margin: 0; padding-top: 16px; border-top: 1px solid var(--linie);
  font-size: 13px; color: var(--tinte-3); line-height: 1.5; }

/* ═══ FAKTENBAND ═══════════════════════════════════════════════ */

.fakten { background: var(--blau-hell); }
.fakten__band { display: grid; gap: 18px; padding-top: 26px; padding-bottom: 26px; }
@media (min-width: 620px) { .fakten__band { grid-template-columns: 1fr 1fr; gap: 22px 32px; } }
@media (min-width: 960px) { .fakten__band { grid-template-columns: repeat(5, 1fr); gap: 28px; } }
.fakt { display: flex; flex-direction: column; gap: 2px; }
.fakt__zahl {
  font-family: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  font-size: 27px; font-weight: 700; color: var(--blau); line-height: 1.1;
}
.fakt__wort { font-size: 13.5px; color: var(--tinte-2); line-height: 1.4; }

/* ═══ STANDORTE ════════════════════════════════════════════════ */

.haeuser { display: grid; gap: 24px; }
@media (min-width: 1100px) { .haeuser { grid-template-columns: 1fr 1fr; gap: 28px; } }

.haus { background: var(--karte); border: 1px solid var(--linie);
        border-radius: var(--radius-gross); overflow: hidden; display: flex; flex-direction: column; }
.haus__bild { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--platzhalter); }
.haus__bild img { width: 100%; height: 100%; object-fit: cover; }
.haus__inhalt { padding: 20px; display: flex; flex-direction: column; gap: 18px; flex-grow: 1; }
@media (min-width: 960px) { .haus__inhalt { padding: 28px; gap: 20px; } }
.haus__name { font-size: 26px; font-weight: 700; margin-top: 10px; }
@media (min-width: 960px) { .haus__name { font-size: 30px; } }
.haus__adresse { margin: 4px 0 0; color: var(--tinte-2); font-size: 15px; }

.haus__zahlen { display: flex; gap: 32px; padding: 16px 0; border-block: 1px solid var(--linie); }
.haus__zahlen > div { display: flex; flex-direction: column; }

.haus__wege { display: grid; gap: 20px; }
@media (min-width: 620px) { .haus__wege { grid-template-columns: 1fr 1fr; gap: 28px; } }
.wegzeile {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--linie);
  font-size: 14.5px; color: var(--listen); line-height: 1.5;
}
.wegzeile span:last-child { color: var(--blau); font-weight: 600; flex-shrink: 0; }

.punkte { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 9px;
          font-size: 15px; color: var(--listen); line-height: 1.6; }
.punkte li { display: flex; gap: 11px; align-items: flex-start; }
.punkte li > svg { flex-shrink: 0; margin-top: 3px; }

.haus__imhaus { margin-top: auto; }
.haus__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.haus__knoepfe .knopf { flex: 1 1 180px; }

/* ═══ PREISE ═══════════════════════════════════════════════════ */

.preise__oben { display: grid; gap: 28px; }
@media (min-width: 1100px) { .preise__oben { grid-template-columns: 0.9fr 1.4fr; gap: 48px; align-items: start; } }

.haken { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px;
         font-size: 15px; color: var(--tinte-2); }
.haken li { display: flex; gap: 11px; align-items: flex-start; }
.haken li > svg { flex-shrink: 0; margin-top: 3px; }

.preisliste { background: var(--karte); border: 1px solid var(--linie);
              border-radius: var(--radius-gross); overflow: hidden; }
.preiszeile {
  display: grid; gap: 6px 20px; padding: 20px;
  border-bottom: 1px solid var(--linie);
  grid-template-areas: "preis was" "einheit haus";
  grid-template-columns: auto 1fr;
  align-items: center;
}
@media (min-width: 760px) {
  .preiszeile { grid-template-areas: "preis was einheit haus";
                grid-template-columns: auto 1fr auto auto; padding: 22px 26px; gap: 24px; }
}
.preiszeile__preis { grid-area: preis; display: flex; align-items: baseline; gap: 5px; }
.preiszeile__ab { font-size: 13px; color: var(--tinte-3); }
.preiszeile__preis strong {
  font-family: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  font-size: 34px; font-weight: 800; color: var(--orange-tief); line-height: 1;
}
.preiszeile__euro { font-size: 17px; font-weight: 700; color: var(--orange-tief); }
.preiszeile__was { grid-area: was; }
.preiszeile__was h3 { font-size: 18px; font-weight: 700; }
.preiszeile__was p { margin: 3px 0 0; font-size: 14px; color: var(--tinte-2); }
.preiszeile__einheit { grid-area: einheit; display: flex; flex-direction: column;
                       font-size: 13px; color: var(--tinte-3); line-height: 1.35; }
.preiszeile__haus { grid-area: haus; display: flex; flex-wrap: wrap; gap: 6px; }
.hausmarke { display: inline-flex; align-items: center; padding: 5px 11px;
             background: var(--papier); border: 1px solid var(--linie);
             border-radius: 999px; font-size: 12.5px; color: var(--tinte-2); white-space: nowrap; }
.preisliste__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
                    gap: 14px; padding: 20px 26px; background: var(--papier); }
.preisliste__fuss p { margin: 0; font-size: 15px; color: var(--tinte-2); max-width: 42ch; }

/* ═══ AUSSTATTUNG ══════════════════════════════════════════════ */

.ausstattung { display: grid; gap: 20px; }
@media (min-width: 760px) { .ausstattung { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .ausstattung { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.zusatz { color: var(--tinte-3); font-size: .92em; }

/* ═══ GALERIE ══════════════════════════════════════════════════ */

.galerie { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .galerie { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.galerie__bild { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius); overflow: hidden; }
.galerie__bild img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; transition: transform .25s; }
.galerie__bild:hover img { transform: scale(1.03); }
.galerie__mehr { margin: 20px 0 0; }

.rundgaenge__kopf { margin-top: 52px; }
.rundgaenge__titel { font-size: 24px; font-weight: 700; margin-top: 10px; }
@media (min-width: 960px) { .rundgaenge__titel { font-size: 30px; } }
.rundgaenge { margin-top: 22px; }
.rundgang {
  position: relative; min-height: 260px; box-sizing: border-box;
  padding: 40px 20px; border-radius: var(--radius-gross); overflow: hidden;
  background: var(--tinte); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
@media (min-width: 960px) { .rundgang { min-height: 480px; padding: 52px 24px; } }
.rundgang__mitte { display: flex; flex-direction: column; align-items: center; gap: 13px; text-align: center; }
.rundgang__knopf { width: 60px; height: 60px; border-radius: 50%; background: var(--orange);
  display: block; position: relative; }
@media (min-width: 960px) { .rundgang__knopf { width: 74px; height: 74px; } }
.rundgang__knopf::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%,-50%);
  border-left: 18px solid var(--tinte); border-block: 11px solid transparent; }
.rundgang__titel { font-family: 'Bricolage Grotesque', sans-serif; font-size: 19px; font-weight: 700; }
@media (min-width: 960px) { .rundgang__titel { font-size: 25px; } }
.rundgang__satz { font-size: 13.5px; color: #c4d1e0; }
.rundgang__marke { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center;
                   font-size: 12px; color: #8b9cb2; }
@media (min-width: 960px) { .rundgang__marke { left: 24px; right: auto; bottom: 20px; text-align: left; font-size: 13px; } }
.rundgang--laeuft { padding: 0; cursor: default; }
.rundgang__rahmen { width: 100%; height: 100%; min-height: 260px; border: 0; }
@media (min-width: 960px) { .rundgang__rahmen { min-height: 480px; } }

/* ═══ KONTAKT ══════════════════════════════════════════════════ */

.kontakt { display: grid; gap: 28px; }
@media (min-width: 1100px) { .kontakt { grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: start; } }

.wege { display: grid; gap: 12px; margin-top: 24px; }
.weg {
  display: flex; flex-direction: column; gap: 3px;
  padding: 16px 20px; background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); text-decoration: none; color: var(--tinte);
}
.weg:hover { background: var(--blau-hell); color: var(--tinte); text-decoration: none; }
.weg__titel { font-size: 18px; font-weight: 700; }
.weg__satz { font-size: 13.5px; color: var(--tinte-3); }
.kontakt__sprachen { margin: 16px 0 0; font-size: 14px; color: var(--blau); }

.formularkarte__satz { margin: 6px 0 20px; font-size: 15px; color: var(--tinte-2); }
.formularkarte__senden { width: 100%; margin-top: 20px; min-height: 58px; font-size: 17px; }
.formularkarte__recaptcha { margin: 14px 0 0; font-size: 12px; color: var(--tinte-3); line-height: 1.5; }

/* ═══ GALERIEFENSTER ═══════════════════════════════════════════ */

.galeriefenster {
  background: var(--karte); border-radius: var(--radius-gross);
  padding: 16px; width: 100%; max-width: 900px; max-height: 92dvh; overflow-y: auto;
}
.galeriefenster__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.galeriefenster__kopf .zahl { font-size: 13px; color: var(--tinte-3); margin-left: auto; margin-right: 8px; }
#galerie-bild { width: 100%; border-radius: var(--radius); background: var(--platzhalter); }
.galeriefenster__unterschrift { margin: 12px 0 0; font-size: 14px; color: var(--tinte-2); }
.galeriefenster__knoepfe { display: flex; gap: 10px; margin-top: 14px; }
.galeriefenster__knoepfe .knopf { flex: 1 1 0; }

/* ═══ RUNDGANGWAHL ═════════════════════════════════════════════ */

.rundgangwahl__reihe { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 14px; }
.rundgangwahl {
  display: inline-flex; align-items: center; min-height: 46px; padding: 10px 20px;
  background: var(--karte); border: 1px solid var(--linie-kraeftig); border-radius: 10px;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--tinte);
  cursor: pointer; white-space: nowrap;
}
.rundgangwahl:hover { background: var(--blau-hell); }
.rundgangwahl--aktiv,
.rundgangwahl[aria-pressed="true"] {
  background: var(--orange); border-color: var(--orange); font-weight: 700;
  box-shadow: 0 1px 2px rgba(20,37,58,.05), 0 6px 16px rgba(240,125,26,.28);
}
.rundgangwahl[aria-pressed="true"]:hover { background: #e8760f; }

/* ═══ SYMBOLE IN ZEILEN UND KNÖPFEN ════════════════════════════ */

.wegzeile span:first-child { display: flex; align-items: center; gap: 10px; }
.wegzeile svg { flex-shrink: 0; }
.preiskarte__liste li { display: flex; gap: 11px; align-items: flex-start; }
.preiskarte__liste li > svg { flex-shrink: 0; margin-top: 2px; }
.haus__name { display: flex; align-items: center; gap: 10px; }
.haus__adresse svg { vertical-align: -3px; margin-right: 4px; }
.held__ort { display: flex; align-items: center; gap: 8px; }
.held__sprachen { display: flex; align-items: center; gap: 8px; }
.kontakt__sprachen { display: flex; align-items: center; gap: 8px; }
.weg { flex-direction: row; align-items: center; gap: 14px; }
.weg > svg { flex-shrink: 0; }
.weg__inhalt { display: flex; flex-direction: column; gap: 3px; }
.hausmarke svg { margin-right: 5px; }
.rundgang__knopf { display: flex; align-items: center; justify-content: center; }
.rundgang__marke { display: flex; align-items: center; justify-content: center; gap: 8px; }
@media (min-width: 960px) { .rundgang__marke { justify-content: flex-start; } }

/* Aufzählungen ohne Symbol — in den Rechtstexten trägt der blaue
   Mittelpunkt die Gliederung, so wie im Entwurf. */
.punkte--zeichen li::before {
  content: "·"; color: var(--blau); font-weight: 700; flex-shrink: 0;
  line-height: 1.4;
}

/* ═══ RASTER DÜRFEN SCHRUMPFEN ═════════════════════════════════
   Elemente in einem Raster haben von Haus aus min-width: auto und
   können deshalb nicht unter ihre Eigenbreite. Ein Datumsfeld bringt
   durch die Bedienelemente des Browsers rund 335 px mit — auf einem
   390-px-Gerät schiebt das die ganze Spalte über den Rand, samt
   allem, was daneben liegt. Eine Zeile, die viel verhindert.        */

.kontakt > *, .karten > *, .haeuser > *, .ausstattung > *,
.preise__oben > *, .haus__wege > *, .fakten__band > *,
.fuss__spalten > *, .galerie > *, .feldreihe > *,
.wege > *, .fuss__sprachen > *, .rundgangwahl__reihe > * { min-width: 0; }

/* „anywhere" war hier zu scharf: es zählt beim Errechnen der kleinst-
   möglichen Breite jede Stelle als Bruchstelle mit, also schrumpfte der
   Kasten und die Telefonnummer brach mitten entzwei. „break-word" lässt
   die Breite unberührt und greift nur, wenn es sonst wirklich überliefe. */
.weg__titel, .weg__satz { overflow-wrap: break-word; }
.weg { min-width: 0; }
.weg__inhalt { min-width: 0; }

/* ═══ SCHMALE GERÄTE ═══════════════════════════════════════════════
   Die Kopfzeile braucht Wortmarke (145) + Abstand + Werkzeuge (170)
   = 327 px. Bei 360 px Gerätebreite bleiben nach dem Seitenrand nur
   320 übrig — sieben zu wenig, und 360 ist die häufigste Breite auf
   Android. Die erste Stufe holt 28 px an Rändern und Abständen; die
   Wortmarke bleibt dabei in voller Grösse. */
@media (max-width: 389px) {
  :root { --rand: 14px; }
  .kopf__innen     { gap: 8px; }
  .kopf__werkzeuge { gap: 6px; }
  .sprachknopf     { padding: 0 9px; }
}

/* ═══ SEHR SCHMALE GERÄTE (≤ 359 px) ══════════════════════════════
   Das iPhone SE der ersten Reihe — und, häufiger, jeder, der auf
   einem normalen Telefon hineinzoomt. WCAG 1.4.10 verlangt, dass die
   Seite bei 320 px noch ohne Querschieben lesbar bleibt. Hier reichen
   die 28 px von oben nicht mehr, also wird zusätzlich die Wortmarke
   kleiner. Die Tippflächen bleiben überall bei 44 px. */
@media (max-width: 359px) {
  .wortmarke  { font-size: 17px; }
  /* „info@monteurstay24.de" braucht bei 18 px genau 208 px, im
     Kontaktkasten stehen 201 zur Verfügung — sieben zu wenig, also
     bricht die Adresse zweizeilig um. Bei 16.5 px sind es 191. */
  .weg__titel { font-size: 16.5px; }

  /* „Datenschutzerklärung" ist ein Wort und in dieser Schriftgrösse
     335 px breit — breiter als das Gerät. Ein einzelnes Wort bricht
     nicht um, es schiebt die Seite auf. Deutsche Komposita treffen
     das regelmässig, also lassen wir trennen statt zu verkleinern:
     hyphens richtet sich nach dem lang-Attribut und trennt nach
     Silben; break-word fängt den Fall ab, wo der Browser für die
     Sprache kein Trennmuster mitbringt. */
  h1, h2, h3, .rechtstext__titel, .rechtstext__block h2 {
    -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word;
  }
}