/* =========================================================
   Müller & Klein – Startseite
   Corporate Design 2026 (Stand 07.10.2026) · Vorgaben: website/CLAUDE.md
   Maße im Entwurf gelten für 1920 px Breite und werden fließend verkleinert.
   ========================================================= */

/* Schrift Instrument Sans liegt auf dem eigenen Server (Datenschutz: keine Verbindung zu Google).
   Variable Schrift: eine Datei enthält alle Stärken von 400 bis 700. Lizenz: assets/schrift/OFL.txt */
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../assets/schrift/instrument-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../assets/schrift/instrument-sans-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;
}

:root {
  --weiss: #FFFFFF;       /* Hauptfläche, trägt die Seite */
  --glas-hell: #EEF4FA;
  --glas: #CFE0F1;
  --hellblau: #4D9BE6;
  --blau: #0060A9;        /* führt: Links, Ziffern, wichtigster Knopf */
  --nachtblau: #0A2342;   /* Grund hinter Bildern, Link beim Überfahren */
  --grau: #87888A;
  --schwarz: #16171A;     /* Überschriften */
  --text: #2B2C2F;        /* Fließtext */
  --linie: #D5D8DC;       /* feine Trennlinien */
  --linie-knopf: #C9CDD2; /* Rahmen der Pfeilknöpfe */
  --bild-grund: #E9ECEF;  /* Fläche hinter Portraits, solange sie laden */
  --schatten-dunkel: 10, 20, 36;

  --schrift: "Instrument Sans", Arial, sans-serif;

  /* Seitenränder: 96 px bei 1920 (im Kopf 64 px) */
  --rand: clamp(20px, 5vw, 96px);
  --rand-kopf: clamp(20px, 3.333vw, 64px);
  --menue-oben: clamp(16px, 1.875vw, 36px);  /* Abstand des Menüs zum oberen Rand */
  --menue-hoehe: 72px;           /* Höhe der Menüleiste, damit die Wortmarke auf gleicher Höhe sitzt */
  --einzug: 33.333vw;            /* Leistungen: ein Drittel der Breite */
  --einzug-kopf: 30.625vw;       /* Startseite oben: rund 30 % (588 px) */

  /* Schriftgrößen: Wert bei 1920 px als Obergrenze */
  --gr-ueberschrift-bild: clamp(40px, 3.958vw, 76px);
  --gr-ueberschrift: clamp(38px, 4.375vw, 84px);
  --gr-leitsatz: clamp(34px, 4.375vw, 84px);
  --gr-kartentitel: clamp(20px, 1.354vw, 26px);
  --gr-ziffer: clamp(30px, 2.292vw, 44px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* weiches Gleiten erst nach dem Laden (Klasse setzt main.js), sonst gleitet Safari beim Öffnen von „/#abschnitt“ über die ganze Seite und wirkt eingefroren */
html.weich-gleiten { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p, figure { margin: 0; }

.sprung { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 6px; background: var(--blau); color: #fff; }
.sprung:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--hellblau); outline-offset: 3px; }

/* ---------- Überschrift auf Weiß ---------- */
.ueberschrift {
  margin: 0;
  font-size: var(--gr-ueberschrift);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--schwarz);
}
.rand { margin-left: var(--rand); margin-right: var(--rand); }

/* ---------- Glas (nur auf Foto oder Farbfläche) ---------- */
.glas {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-radius: 8px;
  color: #fff;
}
.glas-karte {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-radius: 6px;
  padding: clamp(28px, 2.917vw, 56px) clamp(24px, 2.708vw, 52px);
  color: var(--text);
}

/* ---------- Knöpfe auf Foto ---------- */
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.knopf {
  display: inline-block; padding: 15px 22px; border-radius: 6px;
  font-size: 15px; font-weight: 600; line-height: 1.2; color: #fff; text-decoration: none;
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 16px 32px -12px rgba(var(--schatten-dunkel), 0.6);
  transition: background-color .2s;
}
.knopf--blau { background: rgba(0, 96, 169, 0.78); border: 1px solid rgba(120, 180, 240, 0.6); }
.knopf--blau:hover { background: rgba(0, 96, 169, 0.92); }
.knopf--grau { background: rgba(135, 136, 138, 0.42); border: 1px solid rgba(255, 255, 255, 0.34); }
.knopf--grau:hover { background: rgba(135, 136, 138, 0.6); }

/* ---------- Weicher Unschärfe-Verlauf über einem Foto ---------- */
.bild-weich-unten {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 52%;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 42%, transparent 100%);
  mask-image: linear-gradient(0deg, #000 0%, #000 42%, transparent 100%);
  background: linear-gradient(0deg, rgba(var(--schatten-dunkel), 0.6) 0%, rgba(var(--schatten-dunkel), 0) 100%);
}
.bild-schatten-oben {
  position: absolute; left: 0; top: 0; width: 100%; height: 200px;
  background: linear-gradient(180deg, rgba(var(--schatten-dunkel), 0.42) 0%, rgba(var(--schatten-dunkel), 0) 100%);
}

/* =========================================================
   1 · Startseite oben
   ========================================================= */
.kopf { position: relative; height: 100svh; min-height: 600px; overflow: hidden; background: var(--nachtblau); color: #fff; }
.kopf__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }

.kopf__leiste {
  position: absolute; z-index: 3; top: var(--menue-oben); left: var(--rand-kopf); right: var(--rand-kopf);
  display: flex; align-items: center; min-height: var(--menue-hoehe);
}
.kopf__logo { display: block; width: clamp(150px, 11.98vw, 230px); }
.kopf__logo img { width: 100%; height: auto; }
/* Partnerlogo TÜV SÜD neben der Wortmarke: unverändert, auf kleinem weißen Feld */
.kopf__marken { display: flex; align-items: center; gap: clamp(12px, 1.25vw, 24px); }
.kopf__partner { flex: none; display: block; padding: clamp(5px, 0.42vw, 8px) clamp(6px, 0.52vw, 10px); background: #fff; border-radius: 4px; }
.kopf__partner img { display: block; height: clamp(40px, 3.33vw, 64px); width: auto; }

/* Das Menü läuft beim Scrollen mit: helles Glas auf dem Foto, danach blaues Glas */
.menue {
  --menue-abstand: 30px;
  position: fixed; z-index: 50; top: var(--menue-oben); right: var(--rand-kopf);
  display: flex; align-items: center; gap: var(--menue-abstand); padding: 10px 10px 10px 28px; font-size: 16px; font-weight: 500;
  transition: background-color .3s, border-color .3s, box-shadow .3s;
}
/* Das Glas der Leiste liegt auf einer eigenen Ebene darunter. So kann das aufklappende Leistungsfeld selbst weichzeichnen
   (ein Element mit Weichzeichner würde den Effekt bei allem darin abschneiden). */
.menue.glas { background: none; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.menue::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: 8px;
  background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  transition: background-color .3s, border-color .3s;
}
.menue.ist-blau::before { background: rgba(0, 96, 169, 0.8); border-color: rgba(120, 180, 240, 0.55); }
.menue.ist-blau { box-shadow: 0 16px 32px -18px rgba(var(--schatten-dunkel), 0.55); }
/* Wortmarke in der Leiste: erscheint erst, wenn die große Wortmarke oben aus dem Bild ist (Leiste blau) – Weg zurück zur Startseite */
.menue__marke {
  --marke-breite: 104px; --marke-luft: 24px;
  flex: none; display: block; box-sizing: border-box; width: 0; overflow: hidden;
  margin-right: calc(var(--menue-abstand) * -1); opacity: 0; visibility: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.35);
  transition: width .5s cubic-bezier(.16, .7, .22, 1), margin .5s cubic-bezier(.16, .7, .22, 1), opacity .3s, visibility 0s .5s;
}
/* Klickfläche über die ganze Höhe der Leiste, das Bild selbst nimmt keine Klicks an */
.menue__marke { padding: 18px 0; margin-top: -18px; margin-bottom: -18px; }
.menue__marke img { display: block; width: var(--marke-breite); height: auto; max-width: none; pointer-events: none; transition: opacity .2s; }
.menue__marke:hover img { opacity: 0.75; }
.menue.ist-blau .menue__marke {
  width: calc(var(--marke-breite) + var(--marke-luft) + 1px); margin-right: 0; opacity: 1; visibility: visible;
  transition: width .5s cubic-bezier(.16, .7, .22, 1), margin .5s cubic-bezier(.16, .7, .22, 1), opacity .4s .1s, visibility 0s;
}
.menue__punkte { display: flex; align-items: center; gap: 30px; }
.menue a { text-decoration: none; white-space: nowrap; }
.menue__punkte a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* Leistungen klappen beim Überfahren als Feld unter der Leiste auf */
.menue__gruppe { position: relative; }
.menue__oben { display: inline-flex; align-items: center; gap: 10px; }
.menue__oben .winkel { width: 7px; height: 7px; margin: 0 0 4px; border-width: 1.6px; }
.menue__unter {
  position: absolute; top: calc(100% + 22px); left: -18px; min-width: 300px;
  display: flex; flex-direction: column; padding: 8px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(255, 255, 255, 0.5); color: var(--schwarz);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 24px 48px -24px rgba(var(--schatten-dunkel), 0.5);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.menue__unter::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; }  /* Brücke: das Feld bleibt offen, während die Maus von der Leiste hinunterfährt */
.menue__gruppe:hover .menue__unter, .menue__gruppe:focus-within .menue__unter { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.menue__gruppe:hover .menue__oben .winkel, .menue__gruppe:focus-within .menue__oben .winkel { transform: translateY(3px) rotate(-135deg); }
.menue .menue__unter a { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 13px 14px; border-radius: 5px; font-weight: 500; text-decoration: none; transition: background-color .15s; }
.menue .menue__unter a:hover, .menue .menue__unter a[aria-current] { background: var(--glas-hell); }
.menue__unter svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; }
/* sobald die Leiste blau ist, wird auch das Feld blaues Glas */
.menue.ist-blau .menue__unter { background: rgba(0, 96, 169, 0.86); border-color: rgba(120, 180, 240, 0.55); color: #fff; }
.menue.ist-blau .menue__unter a:hover, .menue.ist-blau .menue__unter a[aria-current] { background: rgba(255, 255, 255, 0.16); }
.menue__termin {
  padding: 14px 22px; border-radius: 5px; font-weight: 600; line-height: 1.2;
  background: rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.45);
  transition: background-color .2s;
}
.menue__termin:hover { background: rgba(255, 255, 255, 0.42); }
.menue__knopf { display: none; border: 0; background: none; padding: 14px 6px; font-weight: 500; cursor: pointer; }

/* Textblock unten, linke Kante bei rund 30 % der Breite */
.kopf__text { position: absolute; z-index: 2; left: var(--einzug-kopf); right: var(--rand-kopf); bottom: clamp(32px, 3.229vw, 62px); }
.kopf__text h1 {
  margin: 0; font-size: var(--gr-ueberschrift-bild); font-weight: 600; line-height: 0.98; letter-spacing: -0.035em;
}
.kopf__text p { margin-top: clamp(16px, 1.25vw, 24px); font-size: 17px; }
/* Startseite: „Wir schauen genau hin.“ ist ein Satz, die Hauptüberschrift (H1) für Suchmaschinen ist der Orts-Satz darunter. Optisch unverändert. */
.kopf__text .kopf__leitsatz { margin: 0; font-size: var(--gr-ueberschrift-bild); font-weight: 600; line-height: 0.98; letter-spacing: -0.035em; }
.kopf__text h1.kopf__ort { margin-top: clamp(16px, 1.25vw, 24px); font-size: 17px; font-weight: 400; line-height: 1.55; letter-spacing: 0; }
/* Unterseiten: der Ort als zweite, kleinere Zeile der Hauptüberschrift */
.kopf__h1-ort { display: block; margin-top: .24em; font-size: .42em; font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; }
.kopf__text .knoepfe { margin-top: clamp(20px, 1.458vw, 28px); }

/* ---------- Einblenden beim Hereinscrollen (Klassen setzt das Skript, ohne Skript ist alles sofort sichtbar) ----------
   Texte entstehen aus der Unschärfe, Elemente blenden weich ein und steigen leicht auf. Läuft je Element einmal. */
.ein {
  --ein-kurve: cubic-bezier(.16, .7, .22, 1);   /* beginnt zügig und läuft sehr weich aus */
  opacity: 0;
  transition: opacity var(--ein-dauer, 1.7s) var(--ein-kurve), transform var(--ein-dauer, 1.7s) var(--ein-kurve), filter var(--ein-dauer, 1.7s) var(--ein-kurve);
  transition-delay: var(--ein-warten, 0s);
}
.ein.ein--sofort { transition: none; }   /* beim Vorbereiten sofort verstecken, nicht ausblenden */
.ein--text { filter: blur(18px); transform: translateY(18px); }
.ein--element { transform: translateY(36px); }
.ein.ist-da { opacity: 1; filter: none; transform: none; }

/* Auftakt beim Öffnen der Seite: Das große Foto kommt aus einer leichten Vergrößerung zur Ruhe, Wortmarke und Menü blenden ein,
   Überschrift, Satz und Knöpfe entstehen nacheinander aus der Unschärfe. Läuft ohne Skript, deshalb blitzt nichts vorher auf. */
.kopf__bild { animation: kopf-bild 3s cubic-bezier(.16, .7, .22, 1) both; }
.kopf__leiste, .kopf .menue { animation: kopf-leiste 2s ease .2s both; }
.kopf__text > * { animation: kopf-text 2.4s cubic-bezier(.16, .7, .22, 1) both; }
.kopf__text > :nth-child(1) { animation-delay: .5s; }
.kopf__text > :nth-child(2) { animation-delay: .85s; }
.kopf__text > :nth-child(3) { animation-delay: 1.2s; }
@keyframes kopf-bild { from { transform: scale(1.07); } }   /* nur Größe, keine Unschärfe: bleibt auch auf älteren Geräten flüssig */
@keyframes kopf-leiste { from { opacity: 0; } }
@keyframes kopf-text { from { opacity: 0; filter: blur(18px); transform: translateY(18px); } }

/* ---------- Seitenkopf der Unterseiten: niedriger, unscharfe Bildfläche statt Foto ---------- */
.kopf--klein { height: clamp(300px, 46vh, 520px); min-height: 0; }
.kopf--klein .kopf__text h1 { max-width: 16em; }

/* ---------- Inhalt der Unterseiten (vorerst Platzhalter) ---------- */
.inhalt { padding: var(--abschnitt) var(--rand); }
.inhalt--zweiter { padding-top: 0; }
.inhalt__text { margin-left: calc(var(--einzug-kopf) - var(--rand)); max-width: 44em; }
.inhalt__text > * + * { margin-top: clamp(18px, 1.5vw, 28px); }
.platzhalter { padding: 18px 22px; border: 1px dashed var(--hellblau); border-radius: 6px; background: var(--glas-hell); color: var(--blau); font-weight: 500; }
.inhalt__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: clamp(28px, 2.6vw, 50px); }
.inhalt__zurueck { font-weight: 500; color: var(--blau); text-decoration: none; }
.inhalt__zurueck:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Ratgeber: Beiträge mit ruhig gesetztem Text, Kontakt-Hinweis und Übersicht als Kartenraster */
.artikel { padding: var(--abschnitt) var(--rand) calc(var(--abschnitt) * .7); }
.artikel__text, .artikel__hinweis { max-width: 44em; margin-left: calc(var(--einzug-kopf) - var(--rand)); }
.artikel__einleitung { font-size: clamp(19px, 1.4vw, 23px); line-height: 1.45; font-weight: 500; color: var(--schwarz); max-width: 36em; }
.artikel__stand { margin-top: 14px; font-size: 14px; color: var(--grau); }
.artikel__text > p, .artikel__text li { font-size: 17px; line-height: 1.6; }
.artikel__text > * + * { margin-top: 16px; }
.artikel__text h2 { margin-top: clamp(36px, 3.2vw, 56px); font-size: clamp(22px, 1.7vw, 30px); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--schwarz); }
.artikel__text ul { padding-left: 1.2em; }
.artikel__text li + li { margin-top: 8px; }
.artikel__text a:not(.knopf-voll) { color: var(--blau); text-underline-offset: 4px; }
.artikel__downloads { display: flex; flex-wrap: wrap; gap: 12px; }
.artikel__hinweis { margin-top: clamp(40px, 3.6vw, 64px); padding: clamp(24px, 2.4vw, 40px); background: var(--glas-hell); border-radius: 6px; }
.artikel__hinweis h2 { margin: 0; font-size: clamp(22px, 1.7vw, 30px); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--schwarz); }
.artikel__hinweis p { margin-top: 12px; max-width: 34em; }
.artikel__hinweis .inhalt__knoepfe { margin-top: 20px; }
.ratgeber { padding: var(--abschnitt) 0; }
.ratgeber--weitere { padding-top: 0; }
.ratgeber__kopf { margin-left: var(--einzug-kopf); }
.ratgeber__raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 40px 20px; margin-top: clamp(32px, 3vw, 56px); }
.ratgeber .reihe-kopf p { margin: 0; }
.karte.ratgeber__karte { width: auto; }

/* Rechtstexte (Impressum, Datenschutz): ruhig gesetzter Fließtext, auch für den später eingebundenen Text der Kanzlei */
.rechtstext { max-width: 46em; margin-left: calc(var(--einzug-kopf) - var(--rand)); overflow-wrap: break-word; }
.rechtstext > * + * { margin-top: 14px; }
.rechtstext h1, .rechtstext h2 { margin: clamp(40px, 3.6vw, 64px) 0 0; font-size: clamp(24px, 1.8vw, 32px); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--schwarz); }
.rechtstext h3, .rechtstext h4 { margin: 28px 0 0; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--schwarz); }
.rechtstext > :first-child, .rechtstext .platzhalter + * { margin-top: 0; }
.rechtstext .platzhalter { margin-bottom: clamp(32px, 3vw, 52px); }
.rechtstext p, .rechtstext li { font-size: 16px; line-height: 1.6; }
.rechtstext ul, .rechtstext ol { padding-left: 1.2em; }
.rechtstext a { color: var(--blau); }
.rechtstext a:hover { text-underline-offset: 4px; }

/* =========================================================
   Leistungsseiten (Muster: Schadengutachten, nach dem Vorbild rideany.com/en/family)
   ========================================================= */
/* Kopf: großes Foto wie auf der Startseite */
.kopf--leistung .kopf__bild { object-position: 60% 35%; }

/* Satz auf unscharfer Bildfläche, darunter drei Fotokacheln ohne Abstand */
.flaeche-satz { position: relative; overflow: hidden; background: #5E8FC4; color: #fff; }
.flaeche-satz__innen { position: relative; z-index: 2; padding: calc(var(--abschnitt) * 1.1) var(--rand) clamp(56px, 5.5vw, 110px); }
.flaeche-satz .leitsatz__satz { max-width: 12em; }
.flaeche-satz__text { margin-top: clamp(24px, 2.2vw, 42px); max-width: 30em; font-size: 17px; }
.kacheln { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kacheln .kachel { width: auto; aspect-ratio: auto; height: clamp(380px, 34vw, 660px); margin: 0; }
.kacheln .kachel img { object-position: center 30%; }
.kacheln .kachel::after { height: 46%; }
.kacheln .kachel figcaption { left: clamp(20px, 1.8vw, 34px); right: clamp(20px, 1.8vw, 34px); bottom: clamp(20px, 1.8vw, 34px); }
.kacheln .kachel strong { font-size: var(--gr-kartentitel); letter-spacing: -0.02em; }
.kacheln .kachel span { margin-top: 8px; max-width: 28em; font-size: 15px; line-height: 1.45; }
.kacheln--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kacheln--vier .kachel { height: clamp(380px, 30vw, 580px); }
/* Kopf mit Teamfoto: das Team steht rechts, der Text links davor */
.kopf--team .kopf__bild { object-position: 70% 50%; }

/* Heller Abschnitt: helle unscharfe Bildfläche, dunkle Schrift, 01 bis 03 */
.hell { position: relative; overflow: hidden; background: var(--glas-hell); }
.bildflaeche--hell::after { background: rgba(238, 244, 250, 0.58); }
.bildflaeche--hell .bildflaeche__korn { opacity: 0.22; }
.hell__innen { position: relative; z-index: 2; padding: calc(var(--abschnitt) * 1.1) 0 var(--abschnitt); }
.hell .ueberschrift { max-width: 13em; margin: 0 var(--rand); }
.hell__text { max-width: 30em; margin: clamp(20px, 1.8vw, 34px) var(--rand) 0; color: var(--schwarz); }
.hell .schritt p { color: var(--schwarz); }
.hell__reihe { border-top-color: rgba(22, 23, 26, 0.16); }

/* Galerie: Überschrift links, Text rechts, Fotos unterschiedlich breit */
.galerie { padding: var(--abschnitt) 0; }
.galerie__kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24em); gap: 24px clamp(32px, 5vw, 96px); align-items: end; }
.galerie__kopf .ueberschrift { max-width: 10em; }
.galerie__text { font-size: 16px; }
.reihe--galerie { gap: clamp(10px, 0.8vw, 16px); margin-top: clamp(40px, 4vw, 76px); padding: 0 var(--rand); scroll-padding-left: var(--rand); }
.galerie__foto { height: clamp(260px, 25vw, 480px); width: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; background: var(--bild-grund); }
.galerie__foto--hoch { aspect-ratio: 3 / 4; }
.galerie__pfeile { justify-content: flex-end; margin-top: clamp(20px, 1.8vw, 32px); }

/* Tabelle: was im Gutachten steht */
.tabelle-abschnitt { padding: var(--abschnitt) 0; }
.tabelle { margin: clamp(40px, 4vw, 76px) var(--rand) 0 var(--einzug); border-top: 1px solid var(--linie); }
.tabelle > div { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 8px 32px; padding: clamp(16px, 1.3vw, 24px) 0; border-bottom: 1px solid var(--linie); }
.tabelle dt { font-weight: 600; color: var(--schwarz); }
.tabelle dd { margin: 0; }
/* Variante Ansprechpartner: Name, Aufgabe, Durchwahl, E-Mail */
.tabelle--kontakt { margin-left: var(--rand); }
.tabelle--kontakt > div { grid-template-columns: minmax(0, 13em) minmax(0, 1fr) 9.5em 20em; align-items: baseline; }
.tabelle--kontakt dd { display: contents; }  /* Aufgabe, Telefon und E-Mail werden eigene Spalten, damit sie in allen Zeilen bündig stehen */
.tabelle--kontakt a { color: var(--blau); text-decoration: none; white-space: nowrap; }
.tabelle--kontakt a:hover { text-decoration: underline; text-underline-offset: 4px; }
.tabelle__fuss { margin: clamp(28px, 2.6vw, 48px) var(--rand) 0 var(--einzug); }
.tabelle__fuss .inhalt__knoepfe { margin-top: 18px; gap: 12px; }
/* Variante mit Nummern statt Begriffen (Prüfpunkte) */
.tabelle--nummern > div { grid-template-columns: 4em minmax(0, 1fr); align-items: baseline; }
.tabelle--nummern dt { font-weight: 400; color: var(--blau); }
.tabelle--nummern dd strong { display: block; font-weight: 600; color: var(--schwarz); }
.tabelle--nummern dd span { display: block; margin-top: 4px; font-size: 15px; }
.fragen details p a { color: var(--blau); }

/* Mitlaufende Leiste unten in der Mitte: blaues Glas wie das Menü */
.leiste {
  position: fixed; z-index: 45; left: 50%; bottom: clamp(14px, 1.6vw, 28px);
  display: flex; align-items: center; gap: clamp(20px, 1.8vw, 34px); padding: 8px 8px 8px 22px; border-radius: 8px; color: #fff;
  background: rgba(0, 96, 169, 0.8); border: 1px solid rgba(120, 180, 240, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 18px 36px -16px rgba(var(--schatten-dunkel), 0.6);
  opacity: 0; pointer-events: none; transform: translate(-50%, 24px);
  transition: opacity .45s ease, transform .6s cubic-bezier(.16, .7, .22, 1);
}
.leiste.ist-da { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.leiste__text { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
.leiste__text span { font-size: 13px; color: rgba(255, 255, 255, 0.75); }
.leiste__text a { margin-top: 2px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; }
.leiste__knopf {
  padding: 14px 22px; border-radius: 5px; font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none;
  background: rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.45); transition: background-color .2s;
}
.leiste__knopf:hover { background: rgba(255, 255, 255, 0.42); }

/* Kontakt: Kopf mit Gebäudefoto, Öffnungszeiten in den Fotokacheln */
.kopf--gebaeude .kopf__bild { object-position: 50% 40%; }
.kopf--gebaeude .bild-weich-unten { height: 62%; }  /* höherer Textblock mit Angaben: Verlauf reicht weiter nach oben */
.kopf__angaben { display: flex; flex-wrap: wrap; gap: 18px clamp(28px, 3.3vw, 64px); margin-top: clamp(20px, 1.8vw, 32px); padding-top: clamp(16px, 1.4vw, 24px); border-top: 1px solid rgba(255, 255, 255, 0.3); }
.kopf__angaben a { font-size: clamp(17px, 1.15vw, 21px); font-weight: 500; line-height: 1.35; text-decoration: none; }
.kopf__angaben a:hover { text-decoration: underline; text-underline-offset: 4px; }
.kopf__angaben .fuss__titel { margin-bottom: 4px; }
/* der Textblock ist hier höher: Animation für die vierte Zeile */
.kopf__text > :nth-child(4) { animation-delay: 1.5s; }
.doppel__zeiten { font-size: 17px !important; font-weight: 500; }

/* Startseite: zwei Leistungen ohne eigene Seite (Unfallrekonstruktion, AVILOO) als große Fotokacheln nebeneinander */
.doppel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--nachtblau); }
.doppel__teil { position: relative; overflow: hidden; height: clamp(560px, 92svh, 1000px); color: #fff; }
.doppel__teil > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform 1.2s cubic-bezier(.16, .7, .22, 1); }
.doppel__teil:hover > img { transform: scale(1.03); }
/* weicher, unscharfer Streifen unten wie bei den Portraits, nur höher */
.doppel__teil::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 58%;
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  -webkit-mask-image: linear-gradient(0deg, #000 50%, transparent 100%);
  mask-image: linear-gradient(0deg, #000 50%, transparent 100%);
  background: linear-gradient(0deg, rgba(10, 35, 66, 0.62) 0%, rgba(10, 35, 66, 0.2) 70%, rgba(10, 35, 66, 0) 100%);
}
.doppel__text { position: absolute; z-index: 1; left: clamp(24px, 3.3vw, 64px); right: clamp(24px, 3.3vw, 64px); bottom: clamp(32px, 3.6vw, 70px); }
.doppel__text .leitsatz-klein { max-width: 14em; }
.doppel__text p { margin-top: clamp(14px, 1.2vw, 22px); max-width: 30em; font-size: 16px; }
.doppel__text .knoepfe { margin-top: clamp(20px, 1.6vw, 30px); }
.doppel__teil { scroll-margin-top: 0; }

/* Glaskarte mit sechs Punkten: etwas dichter gesetzt */
.glas-karte--dicht .punkt + .punkt { margin-top: clamp(18px, 1.6vw, 30px); }
.gruende--seite { padding: var(--abschnitt) 0; }
.gruende__reihe.gruende__reihe--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-left: var(--rand); }  /* vier Schritte brauchen die volle Breite */
.ablauf__text { margin-top: clamp(16px, 1.4vw, 26px); max-width: 34em; }
/* Fachbeitrag zum Aufklappen (Oldtimer) */
.fachbeitrag { padding: var(--abschnitt) var(--rand); }
.fachbeitrag__innen { margin-left: calc(var(--einzug) - var(--rand)); max-width: 46em; }
.fachbeitrag .ueberschrift { max-width: 14em; font-size: clamp(32px, 3.3vw, 62px); line-height: 1.04; }
.fachbeitrag__einleitung { margin-top: clamp(18px, 1.5vw, 28px); }
.fachbeitrag__mehr { margin-top: clamp(24px, 2.2vw, 40px); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.fachbeitrag__mehr summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0; font-weight: 600; color: var(--blau); cursor: pointer; list-style: none; }
.fachbeitrag__mehr summary::-webkit-details-marker { display: none; }
.fachbeitrag__mehr .rechtstext { margin: 0 0 32px; }
.hell__text a, .flaeche-satz__text a { color: inherit; text-underline-offset: 4px; }
.hell__text a { color: var(--blau); }
.flaeche-satz__text + .flaeche-satz__text { margin-top: 14px; }

/* =========================================================
   Reihen zum Durchklicken (Leistungen, Team)
   ========================================================= */
.reihe {
  /* overflow-y: hidden – sonst lässt sich die Reihe beim Einblenden (Bilder kurz 36 px tiefer) senkrecht verschieben, die Bilder rutschen dann hinter den Rand */
  display: flex; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.reihe::-webkit-scrollbar { display: none; }
.reihe > * { flex: none; scroll-snap-align: start; }

/* Reihe mit der Maus ziehen */
@media (hover: hover) and (pointer: fine) { .reihe { cursor: grab; } }
.reihe.ist-gezogen { scroll-snap-type: none; cursor: grabbing; user-select: none; -webkit-user-select: none; }

/* Überschrift links, Pfeilknöpfe rechts auf gleicher Höhe */
.reihe-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; }
.reihe-kopf .pfeile { margin-left: auto; }
/* Sprung aus dem Menü: etwas Luft, damit die Pfeilknöpfe nicht unter dem mitlaufenden Menü landen */
#leistungen, #bewertungen, #team { scroll-margin-top: 48px; }

/* Pfeilknöpfe */
.pfeile { display: flex; gap: 10px; }
.pfeil {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  background: #fff; border: 1px solid var(--linie-knopf); border-radius: 6px; cursor: pointer;
  transition: border-color .2s, opacity .2s;
}
.pfeil svg { width: 20px; height: 20px; fill: none; stroke: var(--schwarz); stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter; }
.pfeil:hover { border-color: var(--schwarz); }
.pfeil:disabled { opacity: .35; cursor: default; border-color: var(--linie-knopf); }

/* =========================================================
   2 · Leistungen
   ========================================================= */
.leistungen { padding: var(--abschnitt) 0; }
.reihe--karten { gap: 20px; margin-top: clamp(36px, 3.6vw, 70px); padding-left: var(--rand); padding-right: var(--rand); scroll-padding-left: var(--rand); }
.karte { display: block; width: clamp(240px, 17.19vw, 330px); color: inherit; text-decoration: none; }
.karte img { display: block; width: 100%; height: auto; aspect-ratio: 330 / 400; object-fit: cover; border-radius: 6px; background: var(--bild-grund); transition: opacity .25s; }
.karte:hover img { opacity: 0.86; }
.karte:hover strong { color: var(--blau); }
.karte:focus-visible { outline: 2px solid var(--hellblau); outline-offset: 4px; }
.karte__text { display: block; margin-top: 16px; font-size: 15px; line-height: 1.5; }
.karte strong { font-weight: 600; color: var(--schwarz); transition: color .2s; }

/* =========================================================
   Bildfenster „m & k“ (nur Website, nicht Teil des Corporate Designs)
   ========================================================= */
.bildfenster { overflow: hidden; background: #fff; }
.doppel + .bildfenster { margin-top: calc(var(--abschnitt) * 1.2); }  /* Weißraum, damit Fotokacheln und Buchstaben nicht zu einem Bildblock verschmelzen */
.bildfenster svg { display: block; width: 100%; height: max(36.64vw, 150px); }  /* Hochformat (Handy): volle Breite, Zeichen schließen mit dem Seitenrand ab */
/* Querformat: 90 % der sichtbaren Höhe des Browsers, die Zeichen werden an den Rändern angeschnitten */
@media (min-aspect-ratio: 1/1) { .bildfenster svg { height: 90vh; height: 90svh; min-height: 420px; } }
.bildfenster image { will-change: transform; }

/* =========================================================
   3 · Team
   ========================================================= */
.team { padding: calc(var(--abschnitt) * 1.7) 0; }  /* mehr Luft zum Bildfenster darüber und zur Karriere darunter */
.reihe--team { margin-top: clamp(48px, 5vw, 96px); }
.kachel { position: relative; width: clamp(236px, 16.667vw, 320px); aspect-ratio: 320 / 440; overflow: hidden; background: var(--bild-grund); }
.kachel img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
/* weicher, unscharfer Streifen am unteren Rand */
.kachel::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34.1%; /* 150 von 440 px */
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(0deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(0deg, #000 55%, transparent 100%);
  background: linear-gradient(0deg, rgba(10, 35, 66, 0.45), rgba(10, 35, 66, 0));
}
.kachel figcaption { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 18px; color: #fff; }
.kachel strong { display: block; font-size: clamp(18px, 1.146vw, 22px); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.kachel span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.35; }
/* Über uns: Portraits sind klickbar und öffnen ein Fenster mit Durchwahl und E-Mail */
.team__hinweis { margin-top: clamp(12px, 1vw, 18px); font-size: 15px; }
.kachel--klickbar img { transition: transform .6s cubic-bezier(.16, .7, .22, 1); }
.kachel--klickbar:hover img { transform: scale(1.04); }
.kachel__oeffnen { position: absolute; inset: 0; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer; }
.kachel__oeffnen:focus-visible { outline: 2px solid var(--hellblau); outline-offset: -4px; }
/* weißer Pfeil direkt hinter dem Namen: zeigt ohne Überfahren, dass es mehr gibt */
.kachel__pfeil { display: inline-block; width: 15px; height: 15px; margin-left: 8px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; transition: transform .3s cubic-bezier(.16, .7, .22, 1); }
.kachel--klickbar:hover .kachel__pfeil, .kachel__oeffnen:focus-visible ~ figcaption .kachel__pfeil { transform: translateX(4px); }
.kachel--ohne-foto .kachel__pfeil { color: #fff; }

/* Fenster als digitale Visitenkarte: links das Portrait, rechts eine unscharfe Bildfläche aus demselben Portrait, Schrift weiß */
.person { width: min(940px, calc(100vw - 32px)); max-width: none; max-height: calc(100svh - 32px); padding: 0; border: 0; background: none; color: #fff; overflow: visible; }
.person::backdrop { background: rgba(10, 35, 66, 0.5); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
.person__karte { position: relative; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); overflow: hidden; border-radius: 6px; background: var(--nachtblau); box-shadow: 0 40px 90px -30px rgba(10, 35, 66, 0.75); }
.person[open] .person__karte { animation: person-ein .45s cubic-bezier(.16, .7, .22, 1); }
@keyframes person-ein { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.person__bild { min-height: 100%; aspect-ratio: 320 / 440; background: var(--bild-grund); }
.person__bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.person__bild.ist-ohne-foto { background: linear-gradient(180deg, #F4F5F6 0%, #DCDFE3 62%, #5B6779 100%); }
.person__bild.ist-ohne-foto img { display: none; }
.person__text { position: relative; overflow: hidden; background: #3E5F86; }
.person__flaeche { position: absolute; inset: 0; }
.person__flaeche img { position: absolute; left: -15%; top: -15%; width: 130%; height: 130%; max-width: none; object-fit: cover; filter: blur(50px) saturate(1.2); }
.person__flaeche::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 35, 66, 0.25), rgba(10, 35, 66, 0.55)); }
.person__inhalt { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; padding: clamp(32px, 3.6vw, 60px) clamp(26px, 3.2vw, 56px) clamp(24px, 2.6vw, 44px); }
.person__name { padding-right: 52px; color: #fff; }
.person__rolle { margin-top: clamp(12px, 1vw, 18px); max-width: 26em; font-size: 16px; color: rgba(255, 255, 255, 0.86); }
.person__angaben { display: grid; gap: 16px; margin-top: clamp(26px, 2.6vw, 44px); padding-top: clamp(18px, 1.6vw, 28px); border-top: 1px solid rgba(255, 255, 255, 0.28); }
.person__angaben a { font-size: 17px; text-decoration: none; overflow-wrap: anywhere; }
.person__angaben a:hover { text-decoration: underline; text-underline-offset: 4px; }
.person__knoepfe { margin-top: clamp(22px, 2vw, 34px); }
.person__fuss { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: auto; padding-top: clamp(28px, 2.6vw, 48px); }
.person__marke { width: clamp(110px, 8.5vw, 150px); height: auto; }
.person__fuss .pfeil { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.person__fuss .pfeil svg { stroke: #fff; }
.person__fuss .pfeil:hover { background: rgba(255, 255, 255, 0.32); border-color: #fff; }
.person__zu { position: absolute; z-index: 3; top: 14px; right: 14px; width: 44px; height: 44px; padding: 0; border-radius: 6px; cursor: pointer;
  background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.person__zu::before, .person__zu::after { content: ""; position: absolute; left: 13px; right: 13px; top: 50%; height: 1.8px; background: #fff; transform: rotate(45deg); }
.person__zu::after { transform: rotate(-45deg); }
.person__zu:hover { background: rgba(255, 255, 255, 0.32); }

/* Personen, deren Portrait noch folgt: ruhige helle Fläche wie der Portrait-Hintergrund */
.kachel--ohne-foto { background: linear-gradient(180deg, #F4F5F6 0%, #DCDFE3 62%, #5B6779 100%); }

/* =========================================================
   4 · Leitsatz auf unscharfer Bildfläche mit Glaskarte
   ========================================================= */
.leitsatz { position: relative; overflow: hidden; min-height: clamp(560px, 52.08vw, 1000px); background: #5E8FC4; color: #fff; }
.bildflaeche { position: absolute; inset: 0; }
.bildflaeche img { position: absolute; left: -8%; top: -8%; width: 116%; height: 116%; max-width: none; object-fit: cover; filter: blur(60px) saturate(1.15); }
.bildflaeche::after { content: ""; position: absolute; inset: 0; background: rgba(10, 35, 66, 0.18); }
/* Körnung als fertiges Kachelbild (gleiches Rauschen wie feTurbulence, fractalNoise 0.8, 3 Oktaven) – live berechnet bremste es Safari beim Scrollen */
.bildflaeche__korn { position: absolute; inset: 0; z-index: 1; opacity: 0.35; mix-blend-mode: overlay; pointer-events: none; background: url("../assets/img/web/korn.png") 0 0 / 256px 256px repeat; }

.leitsatz__innen {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 46.875vw) minmax(0, min(604px, 31.458vw)); justify-content: space-between; gap: clamp(32px, 4vw, 80px); align-items: start;
  padding: clamp(56px, 5.73vw, 110px) var(--rand) clamp(64px, 6.25vw, 120px);
}
.leitsatz__satz { margin: 0; max-width: 46.875vw; font-size: var(--gr-leitsatz); font-weight: 500; line-height: 1.02; letter-spacing: -0.03em; }
/* Scroll-Effekt: Satz steht blass da und füllt sich Wort für Wort mit Weiß */
.leitsatz__satz .wort { color: rgba(255, 255, 255, 0.32); transition: color .35s ease; }
.leitsatz__satz .wort.ist-voll { color: #fff; }
.leitsatz__knopf { margin-top: clamp(28px, 2.6vw, 50px); }
/* Fußzeile der Glaskarte: Partnerlogo und Öffnungszeiten */
.karte-fuss { display: flex; align-items: center; gap: 18px; margin-top: clamp(28px, 2.5vw, 48px); padding-top: clamp(20px, 1.6vw, 30px); border-top: 1px solid var(--linie); }
.karte-fuss img { flex: none; height: 62px; width: auto; }
.karte-fuss p { font-size: 14px; line-height: 1.45; }

.punkt + .punkt { margin-top: clamp(28px, 2.5vw, 48px); }
.punkt__kopf { display: flex; align-items: baseline; gap: 14px; }
.ziffer { font-size: var(--gr-ziffer); font-weight: 400; line-height: 1; letter-spacing: -0.04em; color: var(--blau); }
.punkt__kopf strong { font-size: var(--gr-kartentitel); font-weight: 600; letter-spacing: -0.02em; color: var(--schwarz); }
.punkt p + p { margin-top: 10px; font-size: 15px; line-height: 1.5; }

/* =========================================================
   Weitere Bausteine (aus den Vorgaben abgeleitet)
   ========================================================= */
:root { --abschnitt: clamp(80px, 8.4vw, 168px); --gr-leitsatz-klein: clamp(30px, 2.8125vw, 54px); }

/* Knopf auf weißem Grund: sieht aus wie der blaue Glasknopf auf dem Foto (gleicher Ton, gleiche Kontur, gleiche Ecken) */
.knopf-voll {
  display: inline-block; padding: 15px 22px; border: 1px solid rgba(120, 180, 240, 0.6); border-radius: 6px;
  background: rgba(0, 96, 169, 0.9); color: #fff; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
  box-shadow: 0 16px 32px -16px rgba(0, 96, 169, 0.55);
  transition: background-color .2s;
}
.knopf-voll:hover { background: rgba(0, 96, 169, 1); }

.leitsatz-klein { margin: 0; font-size: var(--gr-leitsatz-klein); font-weight: 500; line-height: 1.08; letter-spacing: -0.025em; }

/* Plus-Zeichen zum Aufklappen: zwei gerade Linien */
.plus { position: relative; flex: none; width: 18px; height: 18px; }
.plus::before, .plus::after { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 1.8px; background: var(--schwarz); transition: transform .2s; }
.plus::after { transform: rotate(90deg); }
details[open] > summary .plus::after { transform: rotate(0deg); }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

/* Unscharfe Bildfläche als Abschnitt, davor ein scharfes Bild */
.flaeche-abschnitt { position: relative; overflow: hidden; background: #5E8FC4; color: #fff; }
.scharf { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 28px 56px -14px rgba(10, 35, 66, 0.6); background: var(--nachtblau); }

/* ---------- 2 · Wegweiser ---------- */
.wegweiser { padding: var(--abschnitt) 0; }
/* links ein großes Foto, das zum Anliegen wechselt – rechts in zwei Schritten: Anliegen wählen, dann kurze Fragen */
/* schmaler als die Seite und mittig; Foto und Auswahl sind gleich hoch, damit alles auf einen Blick passt */
.wegweiser__innen { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 3.4vw, 64px); align-items: stretch; width: min(1280px, 80vw); margin: 0 auto; }
.wegweiser__bild { position: relative; min-height: 420px; overflow: hidden; border-radius: 6px; background: var(--bild-grund); }
.wegweiser__fotos img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06); filter: blur(10px);
  transition: opacity .8s var(--weich), transform 1.2s var(--weich), filter .8s var(--weich);
}
.wegweiser__fotos img.ist-aktiv { opacity: 1; transform: none; filter: none; }
.wegweiser__schild { position: absolute; z-index: 2; left: 20px; bottom: 20px; margin: 0; padding: 10px 16px; border-radius: 6px; font-size: 14px; font-weight: 500; }
.wegweiser__feld { padding: 4px 0; }
.wegweiser__innen { --weich: cubic-bezier(.2, .7, .1, 1); }
.wegweiser__schritt[hidden] { display: none; }
.wegweiser__schritt { animation: schritt-ein .5s var(--weich); }
@keyframes schritt-ein { from { opacity: 0; filter: blur(12px); } }
.wegweiser__stand { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(16px, 1.25vw, 24px); font-size: 14px; color: var(--grau); }
.wegweiser__stand::before { content: ""; order: 2; flex: 1; height: 2px; background: linear-gradient(90deg, var(--blau) 50%, var(--glas) 50%); }
[data-schritt="2"] .wegweiser__stand::before { background: var(--blau); }
.wegweiser__stand span { order: 3; white-space: nowrap; }
.wegweiser__zurueck { order: 1; border: 0; background: none; padding: 0; font: inherit; font-weight: 500; color: var(--blau); cursor: pointer; white-space: nowrap; }
.wegweiser__zurueck::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-left: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-1px); }
.wegweiser .ueberschrift { font-size: clamp(32px, 2.9vw, 52px); }
.wegweiser__text { margin: clamp(12px, 0.95vw, 18px) 0 clamp(18px, 1.25vw, 24px); font-size: 16px; line-height: 1.5; }
.wahl-liste { display: grid; gap: 6px; }
.wahl { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 16px; border: 1px solid transparent; border-radius: 6px; background: var(--glas-hell); cursor: pointer; transition: background-color .25s, border-color .25s; }
.wahl:hover { border-color: var(--glas); }
.wahl input { position: absolute; opacity: 0; pointer-events: none; }
.wahl__text { display: grid; gap: 1px; }
.wahl__text strong { font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--schwarz); }
.wahl__text small { font-size: 13.5px; line-height: 1.4; }
.wahl__marke { flex: none; width: 20px; height: 20px; border: 1px solid var(--linie-knopf); border-radius: 4px; background: #fff; transition: border .25s; }
.wahl:has(input:checked) { background: var(--glas); border-color: var(--blau); }
.wahl:has(input:checked) .wahl__marke { border: 6px solid var(--blau); }
.wahl:has(input:focus-visible) { outline: 2px solid var(--hellblau); outline-offset: 2px; }
.wegweiser__weiter { display: grid; gap: 12px; margin-top: 16px; text-align: center; }
.knopf-voll--breit { display: block; width: 100%; padding: 16px 22px; font-size: 16px; text-align: center; }
.wegweiser__anruf { font-size: 15px; font-weight: 500; color: var(--blau); text-decoration: none; }
.wegweiser__anruf:hover { text-decoration: underline; text-underline-offset: 4px; }
.wegweiser .formular .wegweiser__text { margin-bottom: 0; }

.formular { display: grid; gap: 22px; }
.formular[hidden] { display: none; }
.auswahl { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.auswahl legend { width: 100%; margin-bottom: 10px; padding: 0; font-size: 15px; font-weight: 600; color: var(--schwarz); }
.auswahl label { position: relative; padding: 11px 16px; background: #fff; border: 1px solid var(--linie-knopf); border-radius: 6px; font-size: 15px; cursor: pointer; transition: border-color .2s, background-color .2s; }
.auswahl input { position: absolute; opacity: 0; pointer-events: none; }
.auswahl label:has(input:checked) { border-color: var(--blau); background: var(--glas); color: var(--blau); font-weight: 500; }
.auswahl label:has(input:focus-visible) { outline: 2px solid var(--hellblau); outline-offset: 2px; }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.feld { display: block; }
.feld span { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--schwarz); }
.feld input, .feld textarea { width: 100%; padding: 13px 14px; border: 1px solid var(--linie-knopf); border-radius: 6px; background: #fff; font: inherit; font-size: 16px; color: var(--text); }
.feld input:focus, .feld textarea:focus { outline: none; border-color: var(--blau); }
.einwilligung { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.einwilligung input { margin-top: 4px; accent-color: var(--blau); }
.einwilligung a { color: var(--blau); }
.formular .knopf-voll { justify-self: start; }
.formular__danke { font-weight: 500; color: var(--blau); }
.formular__fehler { font-weight: 500; color: var(--schwarz); }
.formular__fehler a { color: var(--blau); }
.formular .knopf-voll:disabled { opacity: .5; cursor: wait; }
/* Spamschutz: für Menschen unsichtbar, Programme füllen es aus */
.formular__falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 4 · Erklärfilm ---------- */
/* Grundzustand (Handy, Tablet, ohne Bewegung): Film in voller Breite, Text darunter */
.film { position: relative; background: #5E8FC4; color: #fff; }
.film__halt { position: relative; overflow: hidden; padding: clamp(48px, 5vw, 96px) var(--rand); }
.film__rahmen { position: relative; z-index: 3; max-width: 960px; margin: 0 auto; overflow: hidden; border-radius: 4px; box-shadow: 0 28px 56px -14px rgba(10, 35, 66, 0.6); background: var(--nachtblau); }
.film__rahmen video { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.film__ton { font-family: inherit; cursor: pointer; }
.film__knopf { margin-top: clamp(22px, 2vw, 38px); }
.film__ton[hidden] { display: none; }
.film__text { position: relative; z-index: 2; max-width: 960px; margin: clamp(28px, 3vw, 56px) auto 0; }

.bildflaeche--fertig img { left: 0; top: 0; width: 100%; height: 100%; filter: none; }
.bildflaeche--fertig::after { content: none; }

/* Großer Bildschirm im Querformat (Klassen setzt das Skript): Der Abschnitt bleibt kurz stehen. Sobald man darin weiterscrollt,
   geht der Film von selbst weich auf Vollbild (film--gross) – unabhängig davon, wie weit oder ruckartig gescrollt wird.
   Der Rahmen ist immer bildschirmgroß und wird nur verkleinert dargestellt, das bleibt flüssig. */
/* Ablauf in der Bahn: Film bleibt stehen (100vh) · 70vh Vollbild allein · dann schiebt sich der Schleier (100vh) darüber */
.film--waechst .film__halt { z-index: 1; }
.film--waechst .film__halt { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0; }
.film--waechst .film__rahmen {
  position: absolute; inset: 0; max-width: none; margin: 0; border-radius: 11px;   /* wirkt verkleinert wie 4 px */
  transform: translateY(-22vh) scale(0.36);   /* Anfang: 36 % der Fensterbreite, oben mittig */
  transition: transform .85s cubic-bezier(.3, .1, .2, 1), border-radius .85s;
  will-change: transform; cursor: pointer;
}
.film--waechst .film__rahmen video { aspect-ratio: auto; }
.film--waechst .film__text {
  position: absolute; left: 24vw; right: 22vw; max-width: none; margin: 0;
  top: 60vh;   /* Film endet bei 46 % der Höhe, darunter bleibt deutlich Luft */
  transition: opacity .45s, transform .85s cubic-bezier(.3, .1, .2, 1), filter .45s;
}
.film--gross .film__rahmen { transform: none; border-radius: 0; }
.film--gross .film__text { opacity: 0; filter: blur(22px); transform: translateY(14vh); pointer-events: none; }
/* ---------- In vier Schritten: Grundzustand (Handy, Tablet, ohne Bewegung) ist ein normaler heller Abschnitt unter dem Film ---------- */
.schleier { position: relative; background: #fff; color: var(--text); }
.schleier__innen { position: relative; z-index: 1; padding: var(--abschnitt) var(--rand); }
.schleier__text { margin-top: clamp(16px, 1.4vw, 26px); max-width: 30em; }
.schleier__reihe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 56px); margin-top: clamp(40px, 4.4vw, 84px); }
.schritt .ziffer { display: block; font-size: clamp(34px, 2.6vw, 50px); }
.schritt strong { display: block; margin-top: clamp(10px, 0.8vw, 16px); font-size: var(--gr-kartentitel); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--schwarz); }
.schritt p { margin-top: 10px; font-size: 15px; line-height: 1.5; }
.schleier__knopf { margin-top: clamp(36px, 3.6vw, 68px); text-align: center; }

/* Großer Bildschirm: bildschirmhoher, heller Schleier aus mattem Glas. Er liegt in der Bahn unter dem stehenden Film
   und schiebt sich beim normalen Scrollen von selbst darüber. Die obere Kante läuft weich aus. */
.film--waechst .schleier { z-index: 2; height: 100vh; height: 100svh; margin-top: 70vh; background: none; }
.film--waechst .schleier::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(34px) saturate(1.25); backdrop-filter: blur(34px) saturate(1.25);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20vh); mask-image: linear-gradient(180deg, transparent 0, #000 20vh);
}
.film--waechst .schleier__innen { display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 16vh 0 6vh; }
/* Die vier Schritte stehen als schmale, mittige Reihe; Überschrift und Text beginnen ein kleines Stück links von der „01“ */
.film--waechst .schleier { --reihe: min(1080px, 56vw); --versatz: clamp(24px, 2.6vw, 50px); }
.film--waechst .schleier .ueberschrift, .film--waechst .schleier__text { margin-left: calc((100vw - var(--reihe)) / 2 - var(--versatz)); margin-right: var(--rand); }
.film--waechst .schleier__reihe { width: var(--reihe); margin-left: auto; margin-right: auto; gap: clamp(20px, 2.2vw, 42px); }

/* zweiter Ton-Knopf: erscheint erst, wenn der Film groß ist */
.film__ton--gross { display: none; }
.film--waechst .film__ton--gross { display: block; position: absolute; z-index: 4; left: var(--rand-kopf); bottom: clamp(20px, 2.2vw, 40px); opacity: 0; pointer-events: none; transition: opacity .3s, background-color .2s; }
.film--waechst .film__ton--gross[hidden] { display: none; }
.film--gross .film__ton--gross { opacity: 1; pointer-events: auto; transition-delay: .6s, 0s; }
.film--waechst .film__ton--gross[hidden] { display: none; }

/* ---------- 5 · In vier Schritten ---------- */

/* ---------- 6 · Bewertungen ---------- */
/* ---------- Warum Müller & Klein: Überschrift links, drei Gründe ab der Drittel-Linie ---------- */
.gruende { padding: calc(var(--abschnitt) * 1.4) 0 var(--abschnitt); }
.gruende .ueberschrift { max-width: 15em; }
.gruende__reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 56px); margin: clamp(48px, 5vw, 96px) var(--rand) 0 var(--einzug); padding-top: clamp(24px, 2.2vw, 42px); border-top: 1px solid var(--linie); }
.team__knopf { margin-top: clamp(28px, 2.6vw, 50px); }

/* Alles mittig: ein Zitat steht scharf in der Mitte, die Nachbarn blass und unscharf an den Rändern */
.bewertungen { --stimme: clamp(300px, 50vw, 960px); padding: calc(var(--abschnitt) * 1.7) 0; }
.bewertungen .ueberschrift { margin: 0 var(--rand); text-align: center; }
.reihe--stimmen { gap: clamp(32px, 5vw, 96px); margin-top: clamp(40px, 4.4vw, 84px); padding: 0 calc(50% - var(--stimme) / 2); align-items: center; }
.stimme { width: var(--stimme); margin: 0; text-align: center; scroll-snap-align: center; transition: opacity .5s ease, filter .5s ease; }
.stimme blockquote { margin: 0; font-size: var(--gr-leitsatz-klein); font-weight: 500; line-height: 1.1; letter-spacing: -0.025em; color: var(--schwarz); }
.stimme figcaption { margin-top: clamp(16px, 1.3vw, 26px); font-size: 14px; }
/* die Klasse mit-mitte setzt das Skript; ohne Skript bleiben alle Zitate scharf */
.reihe--stimmen.mit-mitte .stimme:not(.ist-mitte) { opacity: 0.28; filter: blur(7px); }
.bewertungen__fuss { display: flex; flex-direction: column; align-items: center; gap: clamp(22px, 2vw, 38px); margin: clamp(40px, 4.4vw, 84px) var(--rand) 0; text-align: center; }
.bewertungen__fuss p { font-size: 15px; }
.bewertungen__fuss .ziffer { margin-right: 6px; font-size: 30px; vertical-align: -3px; }

/* ---------- 9 · TÜV SÜD ---------- */

/* ---------- 10 · Karriere ---------- */
.karriere__innen { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 96px); align-items: center; padding: clamp(48px, 5vw, 96px) var(--rand); }
.karriere__text p { margin-top: clamp(14px, 1.1vw, 22px); font-size: 16px; max-width: 30em; }
.karriere__text .knoepfe { margin-top: clamp(20px, 1.5vw, 28px); }

/* ---------- 11 · Häufige Fragen ---------- */
/* schwebende weiße Karte auf Weiß, so breit wie der Wegweiser und mittig */
.fragen { padding: calc(var(--abschnitt) * 1.2) 0; }
.fragen__karte {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 96px); align-items: start;
  width: min(1280px, 80vw); margin: 0 auto; padding: clamp(36px, 5vw, 96px) clamp(28px, 4.2vw, 80px);
  background: #fff; border-radius: 6px;
  box-shadow: 0 2px 10px rgba(10, 35, 66, 0.05), 0 40px 90px -30px rgba(10, 35, 66, 0.28);
}
.fragen .ueberschrift { font-size: clamp(32px, 2.9vw, 52px); }
.fragen__kopf p { margin-top: clamp(14px, 1.2vw, 22px); font-size: 16px; max-width: 22em; }
.fragen__liste { border-top: 1px solid var(--linie); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(16px, 1.25vw, 24px) 0; font-size: clamp(16px, 1.05vw, 19px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; color: var(--schwarz); }
.fragen summary:hover { color: var(--blau); }
.fragen details p { padding: 0 40px clamp(18px, 1.5vw, 28px) 0; font-size: 16px; }
/* kleiner Winkel statt Plus, dreht sich beim Aufklappen */
.winkel { flex: none; width: 9px; height: 9px; margin: 0 4px 4px 0; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
details[open] > summary .winkel { transform: translateY(4px) rotate(-135deg); }
.fragen__knopf { margin-top: clamp(24px, 2.2vw, 42px); text-align: right; }

/* ---------- 12 · Support your Locals ---------- */
.locals { padding: var(--abschnitt) 0; }
.locals__text { margin-top: clamp(18px, 1.5vw, 28px); max-width: 34em; }
.locals__logos { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); margin-top: clamp(32px, 3vw, 56px); margin-bottom: 0; padding: 0; list-style: none; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.locals__logos li { display: grid; place-items: center; padding: clamp(20px, 1.9vw, 36px) 12px; }
.locals__logos img { max-height: 72px; width: auto; max-width: 100%; }
.locals__logos img.breit { max-height: 28px; }

/* ---------- 13 · Kontakt (auf Glas hell) und Fußbereich ---------- */
/* Kontakt und Fußbereich in einem, auf unscharfer Bildfläche */
.fuss__innen { position: relative; z-index: 2; padding: calc(var(--abschnitt) * 1.2) var(--rand) clamp(28px, 2.4vw, 46px); }
.fuss__satz { margin: 0; font-size: var(--gr-leitsatz); font-weight: 500; line-height: 1.02; letter-spacing: -0.03em; }
.fuss__kopf .knoepfe { margin-top: clamp(28px, 2.6vw, 50px); }
.fuss__reihe { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 48px); margin-top: clamp(56px, 7vw, 134px); padding-top: clamp(22px, 1.9vw, 36px); border-top: 1px solid rgba(255, 255, 255, 0.3); }
/* Fünf Angaben (zwei Standorte): erst ab 1400 px alle nebeneinander, sonst bricht die Adresse dreizeilig um */
@media (max-width: 1400px) { .fuss__reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fuss__titel { margin-bottom: 8px; font-size: 15px; font-weight: 600; }
.fuss a { text-decoration: none; }
.fuss__reihe a:hover, .fuss__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.fuss__unten { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px clamp(28px, 4vw, 76px); align-items: end; margin-top: clamp(56px, 7vw, 134px); }
.fuss__marke img { display: block; width: clamp(170px, 12vw, 230px); height: auto; }
.fuss__links { display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 15px; }
.fuss__rechts { display: grid; gap: 14px; justify-items: end; }
.fuss__netz { display: flex; gap: 12px; }
.fuss__sozial { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 6px; background: rgba(255, 255, 255, 0.12); transition: background-color .2s; }
.fuss__sozial:hover { background: rgba(255, 255, 255, 0.26); }
.fuss__sozial svg { width: 22px; height: 22px; }
.fuss__zeile { font-size: 14px; color: rgba(255, 255, 255, 0.72); white-space: nowrap; }

/* =========================================================
   Handy und Tablet: Einrückungen entfallen, Menü klappt in ein Glasfeld
   ========================================================= */
@media (max-width: 1000px) {
  :root { --einzug: var(--rand); --einzug-kopf: var(--rand-kopf); --menue-hoehe: 66px; }
  .menue { --menue-abstand: 6px; padding: 6px 6px 6px 14px; }
  .menue__marke { --marke-breite: 92px; --marke-luft: 14px; }
  .menue.ist-blau .menue__marke { margin-right: 8px; }
  .menue__knopf { display: block; }
  .menue__punkte {
    position: absolute; top: calc(100% + 10px); right: 0; min-width: 220px;
    display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 10px;
    background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 8px;
    -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  }
  .menue__punkte.ist-offen { display: flex; }
  .menue.ist-blau .menue__punkte { background: rgba(0, 96, 169, 0.94); border-color: rgba(120, 180, 240, 0.55); }  /* aufgeklappt dichter, damit die Schrift dahinter nicht stört */
  .menue__punkte a { padding: 12px 14px; border-radius: 5px; }
  .menue__punkte a:hover { background: rgba(255, 255, 255, 0.16); text-decoration: none; }
  .menue__punkte { max-height: calc(100svh - var(--menue-oben) - 100px); overflow-y: auto; }
  .menue__oben { display: flex; }
  .menue__oben .winkel { display: none; }
  .menue__unter, .menue.ist-blau .menue__unter {
    position: static; min-width: 0; padding: 0 0 6px 14px; border: 0; background: none; box-shadow: none; color: inherit;
    -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1; visibility: visible; transform: none;
  }
  .menue__unter::before, .menue__unter svg { display: none; }
  .menue .menue__unter a { padding: 9px 14px; font-size: 15px; font-weight: 400; }
  .menue .menue__unter a:hover, .menue .menue__unter a[aria-current], .menue.ist-blau .menue__unter a:hover { background: rgba(255, 255, 255, 0.16); }
  section[id] { scroll-margin-top: 40px; }  /* Sprung aus dem Menü: Überschrift landet unter dem mitlaufenden Menü, nicht dahinter */
  .inhalt__text { margin-left: 0; }
  .rechtstext { margin-left: 0; }
  .artikel__text, .artikel__hinweis, .ratgeber__kopf { margin-left: 0; }
  .fachbeitrag__innen { margin-left: 0; }
  .kacheln { grid-template-columns: 1fr; }
  .kacheln--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kacheln--vier .kachel { height: clamp(380px, 62vw, 560px); }
  .tabelle--kontakt > div { grid-template-columns: minmax(0, 13em) minmax(0, 1fr); }
  .tabelle--kontakt dd { display: grid; gap: 2px; }
  .person__karte { grid-template-columns: 1fr; overflow-y: auto; max-height: calc(100svh - 32px); }
  .person__bild { aspect-ratio: auto; min-height: 0; height: min(38svh, 340px); }
  .person__angaben { margin-top: 20px; }
  .tabelle--kontakt a { white-space: normal; overflow-wrap: anywhere; }
  .doppel { grid-template-columns: 1fr; }
  .doppel__teil { height: clamp(520px, 88svh, 780px); }
  .kacheln .kachel { height: clamp(360px, 70vw, 560px); }
  .galerie__kopf { grid-template-columns: 1fr; }
  .tabelle, .tabelle__fuss { margin-left: var(--rand); }
  .wegweiser__innen { grid-template-columns: 1fr; width: auto; margin: 0 var(--rand); }
  .wegweiser__bild { height: 46vh; min-height: 300px; }
  .leitsatz__innen { grid-template-columns: 1fr; }
  .leitsatz__satz { max-width: none; }
  .karriere__innen, .fragen__karte { grid-template-columns: 1fr; }
  .fragen__karte { width: auto; margin: 0 var(--rand); }
  .schleier__reihe, .fuss__reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss__unten { grid-template-columns: 1fr; align-items: start; }
  .fuss__rechts { justify-items: start; }
  .gruende__reihe { margin-left: var(--rand); }
  .gruende__reihe.gruende__reihe--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss__zeile { white-space: normal; }
  .locals__logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .karriere__innen .scharf { order: -1; }
}
@media (max-width: 1000px) and (orientation: portrait) {
  /* Querformat-Fotos (Hof, Team, Gebäude): auf dem Handy ganz zeigen statt einen schmalen Streifen auszuschneiden.
     Das scharfe Foto steht auf einer unscharfen Bildfläche aus demselben Foto, der Text darunter. */
  .kopf--ganz { height: auto; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 150px; }
  .kopf--ganz::before { content: ""; position: absolute; inset: -60px; background: var(--kopf-flaeche) center / cover; filter: blur(36px) saturate(1.2); }
  .kopf--ganz::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 35, 66, 0.35) 0%, rgba(10, 35, 66, 0.15) 35%, rgba(10, 35, 66, 0.6) 100%); }
  .kopf--ganz .kopf__bild { position: relative; z-index: 1; inset: auto; height: auto; aspect-ratio: auto; object-position: 50% 50%; border-radius: 4px; width: calc(100% - 2 * var(--rand-kopf)); margin: 0 var(--rand-kopf); }
  .kopf--ganz .bild-weich-unten { display: none; }
  .kopf--ganz .bild-schatten-oben { z-index: 1; }
  .kopf--ganz .kopf__text { position: relative; left: auto; right: auto; bottom: auto; margin: 28px var(--rand-kopf) 32px; }
}
@media (max-width: 560px) {
  .menue__termin { padding: 12px 14px; font-size: 15px; }
  .kopf__logo { width: 118px; }
  /* neben der Wortmarke ist kein Platz: das Partnerlogo steht auf dem Handy darunter */
  .kopf__leiste { align-items: flex-start; }
  .kopf__marken { flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 19px; }
  .kopf__partner img { height: 38px; }  /* neben dem mitlaufenden Menü bleibt auf dem Handy nur so viel Platz */
  .kopf__text p, .kopf__text h1.kopf__ort { font-size: 16px; }
  .kopf__h1-ort { font-size: 18px; }
  /* lange Wörter wie „Fahrzeugbewertungen“ passen so auch auf schmale Handys in eine Zeile */
  .kopf__text h1:not(.kopf__ort) { font-size: min(40px, 8.4vw); }
  /* Mitarbeiter-Karte: das X liegt auf dem hellen Portrait, deshalb dunkles Glas statt weißem */
  .person__zu { background: rgba(10, 35, 66, 0.55); border-color: rgba(255, 255, 255, 0.5); }
  /* Kontaktkarte: Angaben enger, das Foto bekommt den ganzen übrigen Platz, damit die Gesichter nicht angeschnitten werden */
  /* Mindesthöhe so, dass das ganze Gesicht samt Kinn sichtbar bleibt (Portraits 2:3, Kinn bei gut der Hälfte); reicht der Platz nicht, lässt sich die Karte wischen */
  .person__karte { height: calc(100svh - 32px); grid-template-rows: minmax(calc((100vw - 32px) * 0.86), 1fr) auto; }
  .person__bild { height: auto; }
  .person__bild img { object-position: center top; }
  .person__inhalt { height: auto; padding: 20px 20px 16px; }
  .person__rolle { margin-top: 6px; font-size: 15px; line-height: 1.4; }
  .person__angaben { gap: 8px; margin-top: 14px; padding-top: 12px; }
  .person__angaben .fuss__titel { display: none; }  /* Nummer und Adresse sind auch ohne „Telefon“ und „E-Mail“ eindeutig */
  .person__angaben a { font-size: 16px; }
  .person__knoepfe { margin-top: 14px; }
  .person__fuss { padding-top: 14px; }
  .karte { width: 68vw; }
  .kachel { width: 64vw; }
  .bewertungen { --stimme: 76vw; }
  .felder, .schleier__reihe, .fuss__reihe, .gruende__reihe { grid-template-columns: 1fr; }
  /* Handy: Logos als eine Reihe zum Wischen statt vier Zeilen untereinander; rechts angeschnitten, damit man sieht, dass es weitergeht */
  .locals__logos { display: flex; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-right: 0; padding-right: var(--rand); scroll-padding-left: 0; }
  .locals__logos::-webkit-scrollbar { display: none; }
  .locals__logos li { flex: none; width: 38vw; scroll-snap-align: start; padding: 22px 12px; }
  .locals__logos img { max-height: 60px; }
  .tabelle > div { grid-template-columns: 1fr; }
  .kacheln--vier { grid-template-columns: 1fr; }
  .gruende__reihe.gruende__reihe--vier { grid-template-columns: 1fr; }
  .kopf--gebaeude .bild-weich-unten { height: 78%; }
  .tabelle--nummern > div { grid-template-columns: 3em minmax(0, 1fr); }
  .leiste { left: 16px; right: 16px; justify-content: space-between; padding-left: 16px; transform: translateY(24px); }
  .leiste.ist-da { transform: none; }
}

/* Falls ein Browser den Glaseffekt nicht kann: dichtere Farbe, damit Schrift lesbar bleibt */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glas, .menue__punkte { background: rgba(10, 35, 66, 0.62); }
  .menue::before { background: rgba(10, 35, 66, 0.62); }
  .menue.ist-blau::before { background: rgba(0, 96, 169, 0.96); }
  .menue__unter { background: rgba(255, 255, 255, 0.96); }
  .leiste { background: rgba(0, 96, 169, 0.96); }
  @media (min-width: 1001px) { .menue__punkte { background: none; } }
  .glas-karte { background: rgba(255, 255, 255, 0.95); }
  .film--waechst .schleier::before { background: rgba(255, 255, 255, 0.95); }
  .knopf--blau { background: rgba(0, 96, 169, 0.95); }
  .knopf--grau { background: rgba(90, 92, 96, 0.9); }
  .kachel::after { background: linear-gradient(0deg, rgba(10, 35, 66, 0.75), rgba(10, 35, 66, 0)); }
}

/* Bewegung reduzieren: Leitsatz sofort ganz weiß, kein weiches Scrollen */
/* (mit „?animation=an“ in der Adresse lassen sich die Effekte zum Ansehen trotzdem einschalten) */
@media (prefers-reduced-motion: reduce) {
  html, html.weich-gleiten { scroll-behavior: auto; }
  html:not(.bewegung-an) .leitsatz__satz .wort { color: #fff; transition: none; }
  html:not(.bewegung-an) .wegweiser__fotos img { transition: none; transform: none; filter: none; }
  html:not(.bewegung-an) .wegweiser__schritt { animation: none; }
  html:not(.bewegung-an) .kopf__bild, html:not(.bewegung-an) .kopf__leiste, html:not(.bewegung-an) .kopf .menue, html:not(.bewegung-an) .kopf__text > * { animation: none; }
}

/* Große Überschriften mit Ä, Ö, Ü (Klasse setzt das Skript): Die Punkte reichen bis 0,93 der Schriftgröße nach oben, g und y 0,22 nach unten.
   Unter 1,15 Zeilenabstand berühren sie sich, deshalb hier 1,18. Kleine ä, ö, ü sind niedriger und passen auch eng gesetzt. */
h1.mit-umlaut, h2.mit-umlaut, p.mit-umlaut { line-height: 1.18; }

/* ---------- Footer-Signet Kleinwiegross (Baustein _Vorlagen/footer-signet.html, eingebaut 12.11.2026) ---------- */
  .kwg-signet { white-space: nowrap; }
  .kwg-signet span[role="img"] { color: #000; } /* Emojis immer in voller Farbe, auch wenn die Footer-Schrift halbtransparent ist */
  .kwg-signet .kwg-hz { display: inline-block; width: 1.05em; height: .95em; vertical-align: -.14em; background: linear-gradient(120deg, #EC0F7C 0%, #F3335F 40%, #FF6A1A 100%);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'><path d='M12 21.3S2 15.4 2 8.5C2 4.9 4.6 2.4 7.6 2.4c2 0 3.6 1.1 4.4 2.7.8-1.6 2.4-2.7 4.4-2.7 3 0 5.6 2.5 5.6 6.1 0 6.9-10 12.8-10 12.8z'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'><path d='M12 21.3S2 15.4 2 8.5C2 4.9 4.6 2.4 7.6 2.4c2 0 3.6 1.1 4.4 2.7.8-1.6 2.4-2.7 4.4-2.7 3 0 5.6 2.5 5.6 6.1 0 6.9-10 12.8-10 12.8z'/></svg>") center / contain no-repeat; } /* Herz im Verlauf */
  .kwg-signet .kwg-cc svg { display: inline-block; height: .8em; width: 1.28em; vertical-align: -.07em; }
  .kwg-signet a.kwg-logo { color: inherit; text-decoration: none; display: inline-block; vertical-align: -.14em; margin-left: .15em; transform-origin: 0 70%; transition: transform .45s cubic-bezier(.16, .7, .22, 1); }
  .kwg-signet a.kwg-logo:hover, .kwg-signet a.kwg-logo:focus-visible { transform: scale(1.35); }
  .kwg-signet a.kwg-logo svg { display: block; height: 1.02em; width: 4.06em; }

/* Rechtstexte der IT-Recht Kanzlei (werden per Skript in .itrk-legaltext geladen, eine Ebene tiefer als sonst) */
.rechtstext .itrk-legaltext > * + * { margin-top: 14px; }
.rechtstext .itrk-legaltext > :first-child { margin-top: 0; }