/* ============================================================
   1 · Basis
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* Anker-Sprünge (Nav-Links) landen unter dem sticky Header, nicht dahinter */
html { scroll-padding-top: 111px; }

body {
  margin: 0;
  background: var(--db-white);
  color: var(--db-white);
  font-family: var(--db-font-body);
  font-size: 15px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--db-white); outline-offset: 3px; }
.blk :focus-visible, .footer :focus-visible { outline-color: var(--db-blue); }

/* Container: 1200 px, zentriert */
.wrap {
  max-width: calc(var(--db-container) + 48px);  /* innen exakt 1200 */
  margin-inline: auto;
  padding-inline: 24px;
}

/* Fläche = Design-Breite 1440. Alles darüber läuft der Rand mit. */
.band { width: 100%; }
.band--blue  { background: var(--db-blue); }
.band--white { background: var(--db-white); color: var(--db-blue); }

/* ============================================================
   2 · Typografie
   ============================================================ */
.h-display {
  font-family: var(--db-font-headline);
  font-weight: 400;
  font-size: inherit;   /* Schriftgröße kommt von .h-clamped (damit auch die
                           öffnende Klammer den richtigen em-Bezug hat) */
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
}
.h-section {
  font-family: var(--db-font-display);
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
  margin: 0;
}
.h-block {
  font-family: var(--db-font-headline);
  font-size: 13px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 400;
  margin: 0 0 18px;
}
.eyebrow {
  font-family: var(--db-font-display);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

/* ============================================================
   3 · Klammer
   .db-bracket kommt aus tokens.css (10 | 10 | 26 px).
   Hier nur die Kompositionen, die im Entwurf vorkommen.
   ============================================================ */

/* Headline in Klammern: die Marken HÄNGEN im linken/rechten Rand, damit der
   Headline-Text bündig mit der Aufzählung darunter beginnt (wie im Designer).
   Beide Marken 70 px hoch. */
.h-clamped {
  position: relative;   /* Anker für die absolut hängende öffnende Marke */
  font-size: clamp(38px, 4.6vw, 62px);   /* Headline-Größe (Basis); pro Kontext überschrieben */
}
.h-clamped .db-bracket { --_h: 70px; }
/* Opening = Winkel-Ecke ⌈ : nur oberer Arm (unteren ausblenden) */
.h-clamped > .db-bracket:first-child::after { content: none; }
/* Öffnende Marke ⌈ hängt links im Rand; Arm sitzt ÜBER der linken Kante der
   ersten Zeile, Spine ~20 px links daneben. (px, weil die Marke fix 70 px hoch
   ist und nicht mit der Schrift skaliert.) */
.h-clamped > .db-bracket:first-child {
  position: absolute;
  left: -28px;
  top: -6px;
}
/* Schließende Marke ⌋ hängt am letzten Wort: Spine ~20 px dahinter, Arm darunter. */
.h-display > .db-bracket--end {
  display: inline-block;
  vertical-align: bottom;
  margin-left: -0.26em;
  transform: translateY(0.12em);
}

/* Textblock mit einer hohen Klammer links. Gemessen: 233 bzw. 267 px,
   also so hoch wie der Block selbst. */
.blk {
  display: grid;
  grid-template-columns: var(--db-bracket-width) 1fr;
  column-gap: 44px;
  align-items: stretch;
}
.blk .db-bracket { --_h: 100%; }
.blk__body { max-width: 62ch; }

/* ============================================================
   4 · Bild-Slots (quadratisch — Bilder werden 700 × 700 geliefert)
   ============================================================ */
.slot {
  position: relative;               /* Anker für das absolut gefüllte Bild */
  aspect-ratio: 1 / 1;              /* quadratisch */
  background: repeating-linear-gradient(
      45deg, #ADAFC3, #ADAFC3 12px, #A3A5BA 12px, #A3A5BA 24px);
  display: grid;
  place-content: center;
  gap: 4px;
  text-align: center;
  color: #2b3050;
  font-family: var(--db-font-display);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.slot small {
  font-family: var(--db-font-body);
  letter-spacing: 0;
  text-transform: none;
  font-size: 12px;
  opacity: .75;
}
/* Bild füllt die komplette Slot-Fläche */
.slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   5 · Navigation  (Entwurf: 0–110 px)
   ============================================================ */
/* Header bleibt beim Scrollen oben stehen, der Rest scrollt darunter durch. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
}
/* Platzhalter, solange Header per JS (include.js) nachgeladen wird:
   reserviert Höhe + Blau, damit die Seite beim Einsetzen nicht springt. */
[data-include="header"] { display: block; min-height: 111px; background: var(--db-blue); }
.nav {
  min-height: 111px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.nav__logo { width: 190px; flex: none; }
.nav__logo svg { width: 100%; height: auto; color: var(--db-white); }
.nav__claim {
  font-size: 11px;
  letter-spacing: 0.04em;
  opacity: .9;
  flex: none;
}
.nav__links {
  margin-left: auto;
  display: flex;
  gap: 46px;
  list-style: none;
  padding: 0;
  font-family: var(--db-font-display);
  font-size: 12px;
  letter-spacing: 0.1em;
}
/* Aktiver Punkt: abgesetzte L-Ecke im derbrill-Stil — senkrechter Strich links
   + Unterstrich, die sich NICHT berühren (Lücke an der Ecke, wie im Design). */
.nav__links a[aria-current] { position: relative; }
.nav__links a[aria-current]::before {   /* Spine links, volle Worthöhe */
  content: "";
  position: absolute;
  left: -10px; top: -2px; bottom: -6px;
  width: 3px;
  background: currentColor;
}
.nav__links a[aria-current]::after {    /* Unterstrich, rechts der Spine abgesetzt → Lücke */
  content: "";
  position: absolute;
  left: -3px; right: -6px; bottom: -6px;
  height: 3px;
  background: currentColor;
}
.nav__links a[aria-current]:hover { text-decoration: none; }

/* Sprachumschalter (DE / EN) ganz rechts in der Nav */
.nav__lang {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--db-font-display);
  font-size: 12px;
  letter-spacing: 0.1em;
}
.nav__lang a { opacity: .55; }
.nav__lang a:hover { opacity: 1; text-decoration: none; }
.nav__lang a[aria-current] { opacity: 1; font-weight: 600; }
.nav__lang-sep { opacity: .4; }

/* ============================================================
   6 · Banner  (Entwurf: y 111–791, 681 px)
   Foto x 0–706 · weiße Rinne x 705–733 (29 px) · Panel x 733–1440
   Weiße Querstreifen x 777–1439 bei y 109–138 und y 763–791
   ============================================================ */
.banner {
  display: grid;
  grid-template-columns: 707fr 29px 704fr;
  background: var(--db-blue);
}
.banner__gutter { background: var(--db-white); }
.banner__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 34px;
  /* linkes Padding als Anteil der Panelbreite (Abstand zum weißen Gutter).
     Von 27 % auf 16 % reduziert, damit lange Headlines („Unabhängig verbinden")
     im schmalen Desktop-Panel genug Platz haben. */
  padding: 74px 60px 74px 16%;
}
/* die beiden weißen Streifen, 29 px hoch, 44 px vom linken Panelrand eingerückt */
.banner__panel::before,
.banner__panel::after {
  content: "";
  position: absolute;
  left: 44px; right: 0;
  height: 29px;
  background: var(--db-white);
}
.banner__panel::before { top: 0; }
.banner__panel::after  { bottom: 0; }

.banner__list {
  list-style: none;
  margin: 0 0 0 -16px;   /* Striche hängen links; Text bündig mit dem Headline-Text */
  padding: 0;
  display: grid;
  gap: 3px;
  font-size: 15px;
}
.banner__list li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.banner__list li::before {
  content: "";
  width: 4px;
  height: 15px;
  background: currentColor;
  flex: none;
}
.banner__more {
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* ============================================================
   7 · Intro  (Entwurf: y 792–1205, 414 px)
   ============================================================ */
.intro { padding: 96px 0 104px; }

/* ============================================================
   8 · Leinen los  (Entwurf: y 1206–1760, weiß; Kacheln y 1383–1661)
   ============================================================ */
.leinen { padding: 74px 0 90px; text-align: center; }
.leinen .h-section { margin-bottom: 56px; }

.db-tiles { text-align: left; }
.db-tile {
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--db-white);
}
.db-tile__icon {
  height: 74px;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
}
.db-tile__icon svg { height: 100%; width: auto; }
.db-tile h3 {
  font-family: var(--db-font-display);
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 400;
  margin: 0;
  text-align: center;
}
.db-tile p { font-size: 12.5px; line-height: 1.5; text-align: center; }

.db-tile--kurs      { background: var(--db-navy-deep); }
.db-tile--erfahren  { background: var(--db-grey-light); color: var(--db-navy-violet); }
.db-tile--weitblick { background: var(--db-navy-violet); }
.db-tile--freiheit  { background: var(--db-blue); }

/* ============================================================
   9 · Volle Freiheit voraus  (Entwurf: y 1761–2441, 681 px)
   Panel x 0–720 · weiße Rinne x 691–720 (30 px) · Foto x 720–1440
   Weißer Querstreifen x 0–662 bei y 2413–2441
   ============================================================ */
.freiheit {
  display: grid;
  grid-template-columns: 691fr 30px 719fr;
  background: var(--db-blue);
}
.freiheit__panel {
  position: relative;
  display: grid;
  place-content: center;
  padding: 74px 60px;
}
.freiheit__panel::after {
  content: "";
  position: absolute;
  left: 0; right: 58px; bottom: 0;
  height: 29px;
  background: var(--db-white);
}
.freiheit__gutter { background: var(--db-white); }

/* ============================================================
   10 · Wir setzen die Segel  (Entwurf: y 2442–2858, 417 px)
   ============================================================ */
.segel { padding: 96px 0 104px; }

/* ============================================================
   11 · Footer  (Entwurf: y 2859–3500, 641 px, weiß)
   ============================================================ */
.footer {
  background: var(--db-white);
  color: var(--db-blue);
  padding: 74px 0 90px;
  min-height: 641px;      /* Entwurf: y 2859–3500 */
  display: flex;
  align-items: flex-start;
}
.footer > .wrap { width: 100%; }
.footer__grid {
  display: grid;
  grid-template-columns: 200px 1.25fr .85fr .7fr 1.1fr;
  gap: 40px;
  align-items: start;
}
.footer__map { width: 100%; height: auto; opacity: .95; }
.footer h2 {
  font-family: var(--db-font-headline);   /* Good Times, wie die Headlines */
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 400;
  margin: 0 0 16px;
  line-height: 1.5;
}
/* Der kleine blaue Balken vor den Footer-Spaltentiteln */
.footer__col h3 {
  font-family: var(--db-font-body);
  font-size: 12.5px;
  font-weight: 600;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer__col h3::before {
  content: "";
  width: 22px; height: 7px;
  background: currentColor;
  flex: none;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; }
.footer__contact { display: grid; gap: 12px; font-size: 12.5px; }
.footer__contact div { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.footer__contact svg { width: 14px; height: 14px; margin-top: 3px; }
.footer__claim { font-size: 12.5px; }

/* ============================================================
   12 · Impressum  (eigene Unterseite)
   Banner: Headline-Panel LINKS mit weißem Klammer-Rahmen, Siegel-Foto
   RECHTS (kein Gutter). Darunter Kontaktblock (blau) + einspaltiger
   Rechtstext (WEISS), davor ein blauer Trennbalken, dann der Footer.
   Maße pixelgenau aus DERBRILL_Website_3ai_Impressum.jpg (÷2,092).
   ============================================================ */

/* --- Banner: Foto LINKS · Headline-Panel RECHTS (randlos, kein Gutter).
   Gespiegelt zum ursprünglichen Impressum-Entwurf, damit das erste Foto
   – wie auf allen anderen Seiten – links steht. --- */
.imp-banner {
  display: grid;
  grid-template-columns: 704fr 736fr;   /* Foto ~704 · Panel ~736 (Design 1440) */
  background: var(--db-blue);
}
.imp-banner > .slot { grid-column: 1; grid-row: 1; }   /* Foto links */
.imp-banner__panel {
  grid-column: 2; grid-row: 1;          /* Headline-Panel rechts */
  position: relative;
  display: grid;
  place-content: center start;          /* Headline mittig, linksbündig (nah am Foto, wie „Wir") */
  padding: 112px 40px 112px 22%;
}
/* Headline: Cap-Höhe ~40 px wie im Entwurf, kein Umbruch (schließende
   Klammer bleibt inline hinter dem Wort, statt in die 2. Zeile zu rutschen). */
.imp-banner .h-clamped { font-size: clamp(36px, 3.9vw, 56px); }
.imp-banner .h-display { white-space: nowrap; }
/* Mehrzeilige Headlines (Datenschutz, AGB) sind länger → kleinere Schrift. */
.imp-banner--multi .h-clamped { font-size: clamp(26px, 2.9vw, 40px); }
.imp-banner--multi .h-display { line-height: 1.2; }
/* URL-/Text-Zeile unter der Headline (Datenschutz-URL, 404-Meldung). */
.imp-banner__url {
  margin: 26px 0 0;
  font-size: 14px;
  letter-spacing: 0.01em;
  opacity: .92;
}
.imp-banner__url a { text-decoration: underline; text-underline-offset: 3px; }
/* Weißer Klammer-Rahmen: senkrechter Balken links im Panel (nah am Foto,
   wie bei „Wir"), volle Höhe … */
.imp-banner__panel::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 30px;
  background: var(--db-white);
}
/* … plus zwei waagerechte Balken oben/unten, die nach einer Lücke (~43 px hinter
   dem senkrechten Balken) beginnen und nach rechts laufen. */
.imp-frame { position: absolute; inset: 0; pointer-events: none; }
.imp-frame::before,
.imp-frame::after {
  content: "";
  position: absolute;
  left: 74px; right: 0;
  height: 29px;
  background: var(--db-white);
}
.imp-frame::before { top: 0; }
.imp-frame::after  { bottom: 0; }

/* Klammern in den Headlines: höher, weiter außen, mit klarem Abstand zum Wort.
   Einheitlich für ALLE Header (Impressum-Look auf jeder Seite: Banner + Freiheit
   + Impressum/Datenschutz/AGB). Überschreibt die Standard-Werte aus .h-clamped. */
/* Klammer-Geometrie komplett in em → die GANZE Klammer (Höhe, Breite, Spine,
   Lücke, Arme) skaliert proportional mit der Headline-Schrift. em bezieht sich
   auf die Schriftgröße von .h-clamped (siehe oben) — gilt für öffnende UND
   schließende Klammer. Höhe (1em) ≤ Zeilenhöhe → keine aufgeblähte letzte Zeile. */
.banner    .h-clamped .db-bracket,
.freiheit  .h-clamped .db-bracket,
.imp-banner .h-clamped .db-bracket {
  --_h: 1em;
  --_arm-h: 0.12em;
  --db-bracket-width: 0.76em;
  --db-bracket-thin: 0.16em;
  --db-bracket-gap: 0.16em;
  --db-bracket-thick: 0.42em;
}

.imp-banner .h-clamped > .db-bracket:first-child,
.banner    .h-clamped > .db-bracket:first-child,
.freiheit  .h-clamped > .db-bracket:first-child { left: -0.9em; top: -0.48em; }

.imp-banner .h-display > .db-bracket--end,
.banner    .h-display > .db-bracket--end,
.freiheit  .h-display > .db-bracket--end {
  margin-left: 0.05em;
  transform: translateY(0.45em);   /* Arm ~26 px unter der Grundlinie */
}

/* --- Kontaktblock (blau) + Rechtstext (weiß): eingerückte Spalte --- */
.imp-inner {
  max-width: 68ch;
  margin-left: 14%;          /* Textspalte sitzt eingerückt wie im Entwurf */
}
.imp-contact-band .imp-inner { padding: 74px 0 84px; }
.imp-legal-band   .imp-inner { padding: 84px 0 96px; }

/* Kontaktdaten mit kleiner senkrechter Marke je Gruppe */
.imp-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 24px;
  font-size: 14px;
}
.imp-contact li {
  position: relative;
  padding-left: 24px;
  line-height: 1.55;
}
.imp-contact li::before {
  content: "";
  position: absolute;
  left: 0; top: 4px;
  width: 4px; height: 16px;
  background: currentColor;
}
.imp-contact strong { font-weight: 600; }

/* Rechtstext (auf Weiß, blaue Schrift via .band--white) */
.imp-legal .h-section { margin-bottom: 40px; }
.imp-legal h3 {
  font-family: var(--db-font-display);
  font-size: 13px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 400;
  margin: 34px 0 14px;
}
/* tiefere Zwischenüberschrift (z. B. „Wer ist verantwortlich …?") */
.imp-legal h4 {
  font-family: var(--db-font-body);
  font-size: 14px;
  font-weight: 700;
  margin: 22px 0 8px;
}
.imp-legal p  { max-width: 66ch; }
.imp-legal ul { max-width: 66ch; margin: 0 0 14px; padding-left: 20px; }
.imp-legal li { margin-bottom: 5px; }
.imp-legal a  { text-decoration: underline; text-underline-offset: 2px; }

/* Blauer Trennbalken vor dem Footer (~28 px, randlos über die volle Breite) */
.imp-divider {
  height: 28px;
  background: var(--db-blue);
}

/* ============================================================
   12b · Wissen — zentrierte Begrüßungs-Überschrift
   (weißes Band zwischen Intro und Schulungszentrum, ohne Kacheln)
   ============================================================ */
.wissen-welcome { padding: 92px 0; text-align: center; }
.wissen-welcome .h-section { margin: 0; line-height: 1.5; }

/* Leistung: Freiheit-Panel mit Aufzählung (Headline + Liste gestapelt,
   linksbündig, vertikal zentriert über place-content:center des Panels). */
.freiheit__stack { display: flex; flex-direction: column; gap: 34px; }

/* ============================================================
   12c · Fragen — Kontaktzeilen (Telefon/Mail) unter der Banner-Headline
   und großer Kontaktblock statt Formular.
   ============================================================ */
.imp-banner__contact {
  margin: 34px 0 0;
  display: grid;
  gap: 14px;
  font-size: 15px;
}
.imp-banner__contact a { display: inline-flex; align-items: center; gap: 12px; }
.imp-banner__contact svg { width: 17px; height: 17px; flex: none; }

/* Kontaktblock (blaue Fläche auf Weiß, mittig — im Entwurf das Formularfeld) */
.fragen-kontakt { padding: 96px 0 104px; text-align: center; }
.fragen-kontakt__box {
  background: var(--db-blue);
  color: var(--db-white);
  max-width: 720px;
  margin-inline: auto;
  padding: 74px 40px;
  display: grid;
  gap: 30px;
  justify-items: center;
}
.fragen-kontakt__box .h-section { margin: 0; }
.fragen-kontakt__list { display: grid; gap: 18px; font-size: 16px; justify-items: center; }
/* Icon-Spalte fix, Text linksbündig daneben → mehrzeilige Adresse bleibt bündig */
.fragen-kontakt__list div {
  display: grid;
  grid-template-columns: 18px auto;
  gap: 14px;
  align-items: start;
  text-align: left;
}
.fragen-kontakt__list svg { width: 18px; height: 18px; flex: none; margin-top: 3px; }

/* Headline-Größe richtet sich nach der PANEL-Breite (Container Queries: cqw),
   NICHT nach der Fensterbreite. Im Desktop ist das Panel nur ~halb so breit
   wie das Fenster — mit vw wurde die Schrift zu groß und lange Headlines wie
   „Unabhängig verbinden" liefen aus dem Panel. cqw = 1 % der Panelbreite, so
   skaliert die Headline sauber mit dem tatsächlich verfügbaren Platz. */
.banner__panel, .freiheit__panel { container-type: inline-size; }
.banner .h-clamped,
.freiheit .h-clamped { font-size: clamp(34px, 7.5cqw, 58px); }

/* ============================================================
   13 · Responsive
   Der Entwurf existiert nur als 1440er Desktop-Layout. Alles
   darunter ist meine Interpretation — mit dem Grafiker abgleichen.
   ============================================================ */
@media (max-width: 1000px) {
  .db-tiles { grid-template-columns: repeat(2, 1fr); }
  /* Footer gestapelt: Karte + SH-Text nebeneinander (Zeile 1), darunter die
     drei Rubriken Schnellzugriff / Rechtliches / Kontakt (Zeile 2, 3 Spalten). */
  .footer__grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 24px;
    row-gap: 40px;
    align-items: start;
  }
  .footer__map-cell { grid-column: 1; grid-row: 1; max-width: 150px; }
  .footer__intro    { grid-column: 2 / -1; grid-row: 1; align-self: center; }
  /* die drei .footer__col fließen automatisch in Zeile 2 (Spalte 1/2/3) */
  .imp-inner { margin-left: 6%; }
}
/* Tablet (≤960): die zweispaltigen Sektionen (Banner, Freiheit, Impressum-
   Banner) stapeln, die Nav bricht um — BEVOR Headline/Nav zu quetschen
   anfangen. Vorher passierte das erst bei 760 px, das war zu spät
   (Headline lief aus dem Panel, Klammer rutschte in eine 3. Zeile). */
@media (max-width: 960px) {
  .banner, .freiheit { grid-template-columns: 1fr; }
  .banner__gutter, .freiheit__gutter { display: none; }
  .banner__panel::before, .banner__panel::after, .freiheit__panel::after { display: none; }
  .freiheit { direction: rtl; }        /* Foto zuerst, wie im Lesefluss */
  .freiheit > * { direction: ltr; }
  /* Gestapelt: ALLE Headline-Panels einheitlich zentriert (Headline + Liste
     als zentrierter Block), symmetrisches Padding. Durch die Zentrierung hat
     die links hängende Klammer genug Platz und ragt nicht aus dem Bild. */
  .banner__panel, .freiheit__panel, .imp-banner__panel { padding: 56px 24px; }
  .banner__panel { align-items: center; }        /* Flex-Column: horizontal mittig */
  .imp-banner__panel { place-content: center; }  /* statt center start */
  .imp-banner { grid-template-columns: 1fr; }
  .imp-banner > .slot { grid-column: 1; grid-row: 1; }   /* Foto oben */
  .imp-banner__panel  { grid-column: 1; grid-row: 2; }   /* Headline darunter */
  .imp-frame { display: none; }
  .imp-banner__panel::before { display: none; }
  .imp-inner { margin-left: 0; }
  .imp-contact-band .imp-inner { padding: 48px 0 40px; }
  .imp-legal-band   .imp-inner { padding: 48px 0 64px; }
  .blk { grid-template-columns: var(--db-bracket-width) 1fr; column-gap: 20px; }
  .nav { flex-wrap: wrap; gap: 16px; padding-block: 20px; min-height: 0; }
  .nav__links { width: 100%; margin-left: 0; gap: 24px; justify-content: space-between; }
}
/* Handy (≤760): Kacheln einspaltig. */
@media (max-width: 760px) {
  .db-tiles { grid-template-columns: 1fr; }
}
/* Sehr schmal (≤560): Karte + Text bleiben nebeneinander, die drei Rubriken
   rutschen untereinander (je volle Breite). */
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: auto 1fr; }
  .footer__map-cell { grid-column: 1; max-width: 120px; }
  .footer__intro    { grid-column: 2; }
  .footer__col      { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}