/* =============================================================================
   NexGeM One-Pager – nexgem.de
   Stand: Desktop-Layout (1440 px) + Token-Ebene. Breakpoints folgen.

   Aufbau
   1  Fonts
   2  Tokens
   3  Reset und Grundlagen
   4  Layout-Bausteine (.inner, .section, N-Kontur)
   5  Typo-Klassen
   6  Buttons
   7  Sektionen 1–11
   ========================================================================== */

/* == 1  Fonts =============================================================== */
/* Inter 4.1, statische Schnitte, lokal von der eigenen Domain.               */
/* Kein Google Fonts – die Besucher-IP verlaesst die Domain nicht (DSGVO).    */
/* Lizenz: SIL Open Font License 1.1, siehe assets/fonts/LICENSE-Inter.txt    */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/Inter-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/Inter-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/Inter-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("assets/fonts/Inter-Black.woff2") format("woff2");
}

/* == 2  Tokens ============================================================== */

:root {
  /* -- Farben -- */
  --c-blue:        #005A99;   /* Primär Dunkelblau  */
  --c-blue-tint:   #E5EEF5;   /* Sektions-Hintergrund */
  --c-blue-light:  #337BAD;   /* Linien auf Blau, Link-Hover */
  --c-on-blue:     #CCDEEB;   /* Sublines auf blauem Grund */
  --c-green:       #4BFF14;
  --c-magenta:     #FF0082;
  --c-orange:      #FF6200;
  --c-white:       #FFFFFF;
  --c-text:        #000000;
  --c-text-2:      #333333;   /* Funktionsangaben, Newsletter-Text */
  --c-text-3:      #666666;   /* Labels, Kategorien */
  --c-rule:        #CCCCCC;   /* Akkordeon, Kontakt */
  --c-rule-light:  #E5E5E5;   /* unter der Navigation */

  /* -- Maß und Raster -- */
  --maxw:      1440px;  /* Inhaltsbreite, darüber wachsen die Ränder */
  --pad-x:     100px;   /* Seitenrand in drei Stufen: 24 mobil → 48 → 100 Desktop */
  --sec-y:     clamp(64px, 44.31px + 5.05vw, 96px);  /* 64 mobil → 96 Desktop */
  --radius:    4px;     /* nur Buttons; Störer 50 %, sonst 0 */

  /* -- Typografie -- */
  /* Fluid zwischen 390 px (Mobil-Entwurf) und 1024 px (Desktop-Fassung).     */
  /* Ober- und Untergrenze sind exakt die Werte der beiden Entwuerfe.         */
  --font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-h1:      clamp(32px, 19.70px + 3.155vw, 52px);  /* 32 → 52, 900, lh 1.05  */
  --fs-h2:      clamp(26px, 19.85px + 1.577vw, 36px);  /* 26 → 36, 900, lh 1.15  */
  --fs-lead:    clamp(19px, 15.92px + 0.789vw, 24px);  /* 19 → 24, 500           */
  --fs-card-h:  clamp(20px, 17.54px + 0.631vw, 24px);  /* 20 → 24, 900           */
  --fs-news-h:  clamp(20px, 18.77px + 0.315vw, 22px);  /* 20 → 22, 900           */
  --fs-body:    clamp(18px, 17.38px + 0.158vw, 19px);  /* 18 → 19, 300, lh 1.6   */
  /* CTAs bleiben auf allen Breiten 19 px. Weiss auf Magenta hat 3,77:1 und
     erfuellt WCAG AA nur als "grosser Text" – der beginnt bei 18,66 px fett.
     Mit 18 px mobil waere die Schwelle 4,5:1 und der Button fiele durch.    */
  --fs-btn:     19px;
  --fs-body-s:  17px;                                  /* Karten, mobil wie Desktop */
  --fs-nav:     17px;                                  /* mobil 18, siehe < 1024 */
  --fs-label:   clamp(15px, 14.38px + 0.158vw, 16px);  /* 15 → 16, 500, 0.1em    */
  --fs-stoerer: clamp(18px, 16.77px + 0.315vw, 20px);  /* 18 → 20, 900           */

  /* -- Bausteine, die mitskalieren -- */
  /* Bildmaße folgen den Proportionen des 1440er-Entwurfs und laufen deshalb
     bis 1440 weiter, waehrend die Schriftgroessen schon bei 1024 stehen.     */
  --logo-h:        clamp(88px,  60.93px + 6.94vw,  132px);  /*  88 → 132 */
  --logo-h-footer: clamp(120px, 95.39px + 6.31vw,  160px);  /* 120 → 160 */
  --hero-media-h:  clamp(260px, 163.40px + 24.76vw, 520px); /* 260 → 520 bei 1440 */
  --stoerer-size:  clamp(152px, 147.54px + 1.143vw, 164px); /* 152 → 164 bei 1440 */
  --band-h:        clamp(240px, 173.14px + 17.14vw, 420px); /* 240 → 420 bei 1440 */
  --portrait:      clamp(88px,  68.31px + 5.05vw,  120px);  /*  88 → 120 */
  --card-img-h:    180px;                                   /* mobil 200, s. u. */

  /* -- N-Kontur: Y wird gesetzt, X folgt mit 0,618 -- */
  --nY: 75px;
  --nX: calc(0.618 * var(--nY));
}

/* == 3  Reset und Grundlagen =============================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-text);
  font-family: var(--font);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }

/* <picture> ist standardmaessig inline und wuerde sonst eine Grundlinien-
   luecke unter dem Bild erzeugen.                                          */
picture { display: block; }

p { margin: 0; text-wrap: pretty; }

h1, h2, h3 { margin: 0; }

a {
  color: var(--c-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:hover { color: var(--c-blue-light); }

:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 2px;
}
/* Auf blauem Grund tritt Weiß an die Stelle des blauen Rings */
.on-blue :focus-visible,
.aussteller :focus-visible { outline-color: var(--c-white); }

button { font: inherit; color: inherit; }

/* Nur fuer Screenreader: erklaert Links, die ein neues Fenster oeffnen. */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  background: var(--c-white);
  color: var(--c-blue);
  padding: 12px 20px;
  font-size: var(--fs-label);
  font-weight: 700;
  transform: translateY(-100%);
}
.skip-link:focus { transform: none; }

/* == 4  Layout-Bausteine =================================================== */

/* Inhalt bei 1440 px zentriert, Hintergründe laufen randlos weiter.          */
.inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section { padding-block: var(--sec-y); }
.section--white { background: var(--c-white); }
.section--tint  { background: var(--c-blue-tint); }

/* N-Kontur: Kerbe oben rechts (Flanke 56 %) und unten links (44 %).          */
.n-clip {
  clip-path: polygon(
    0 0,
    calc(56% - var(--nX)) 0,
    56% var(--nY),
    56% 0,
    100% 0,
    100% 100%,
    calc(44% + var(--nX)) 100%,
    44% calc(100% - var(--nY)),
    44% 100%,
    0 100%
  );
}

/* == 5  Typo-Klassen ======================================================= */

.h2 {
  font-size: var(--fs-h2);
  font-weight: 900;
  line-height: 1.15;
  color: var(--c-blue);
}

.lead {
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.35;
  max-width: 52ch;
}

.body {
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.6;
}

.body-s {
  font-size: var(--fs-body-s);
  font-weight: 300;
  line-height: 1.6;
}

.label {
  margin: 0;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.label--link { text-decoration: none; color: var(--c-text-3); }
.label--link:hover { color: var(--c-blue-light); }

.link-med { font-weight: 500; }

/* == 6  Buttons ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: var(--radius);
  font-size: var(--fs-btn);
  font-weight: 900;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { filter: brightness(0.92); }
.btn--44 { min-height: 44px; }

.btn--magenta { background: var(--c-magenta); color: var(--c-white); }
.btn--magenta:hover { color: var(--c-white); }

/* Der grüne CTA behält schwarze Schrift */
.btn--green { background: var(--c-green); color: var(--c-text); }
.btn--green:hover { color: var(--c-text); }

.btn--outline {
  background: var(--c-white);
  color: var(--c-blue);
  border: 2px solid var(--c-blue);
}
.btn--outline:hover { color: var(--c-blue); }

.btn--white {
  min-height: 44px;
  padding: 0 20px;
  background: var(--c-white);
  color: var(--c-blue);
  font-size: var(--fs-label);
}
.btn--white:hover { color: var(--c-blue); }

/* == 7.1  Header =========================================================== */

#header { background: var(--c-white); }

.header__bar { background: var(--c-blue); color: var(--c-white); }
.header__bar-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-block: 14px;
}
.lang {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  font-size: var(--fs-label);
  font-weight: 700;
}
.lang__on  { color: var(--c-white); }
.lang__off {
  color: var(--c-on-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lang__off:hover { color: var(--c-white); }
.lang__sep { color: var(--c-blue-light); }

.header__claim {
  font-size: var(--fs-label);
  font-weight: 300;
  line-height: 1.4;
}

.header__main { background: var(--c-white); border-bottom: 1px solid var(--c-rule-light); }
.header__main-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-block: 20px;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}
.nav a {
  font-size: var(--fs-nav);
  font-weight: 700;
  color: var(--c-blue);
  text-decoration: none;
}
.nav a:hover { color: var(--c-blue-light); text-decoration: underline; }

/* Hamburger – erst ab dem Mobil-Breakpoint sichtbar */
.burger { display: none; }

/* Das Logo fuehrt zur Startseite. Der Anker traegt die Beschriftung, das
   Bild bekommt deshalb ein leeres alt – sonst wuerde es doppelt vorgelesen. */
.logo-link {
  display: inline-flex;
  text-decoration: none;
  flex: none;
}
.logo-link:hover { opacity: 0.88; }

.header__logo { height: var(--logo-h); width: auto; }

/* == 7.2  Hero ============================================================= */

.hero { background: var(--c-blue); }
.hero__inner {
  display: grid;
  grid-template-columns: 560px 1fr;
  padding-inline: 0;               /* Padding sitzt in den Spalten */
  position: relative;
}

.hero__text {
  padding: 64px 48px 40px var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.hero__date {
  align-self: flex-start;
  padding-top: 14px;
  border-top: 6px solid var(--c-magenta);
}
.hero__date span {
  font-size: 26px;
  font-weight: 900;
  line-height: 1.15;
  color: var(--c-white);
}
.hero__h1 {
  font-size: var(--fs-h1);
  font-weight: 900;
  line-height: 1.05;
  color: var(--c-white);
}
.hero__subline {
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-on-blue);
  max-width: none;
}
.hero__body {
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.6;
  color: var(--c-white);
  max-width: 58ch;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.hero__media {
  padding: 64px 16px 16px;
  padding-right: max(16px, calc(var(--pad-x) - 84px));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.hero__media-frame { position: relative; width: 100%; }
.hero__video {
  --nY: clamp(40px, 5.208vw, 75px);   /* 40 mobil → 75 bei 1440, X = 0,618 × Y */
  width: 100%;
  height: var(--hero-media-h);
  object-fit: cover;
  object-position: 50% 45%;
  background: var(--c-blue);
}

.stoerer {
  position: absolute;
  bottom: 28px;
  right: 28px;
  z-index: 2;
  width: var(--stoerer-size);
  height: var(--stoerer-size);
  background: var(--c-magenta);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 22px;
  gap: 6px;
}
.stoerer__date {
  font-size: var(--fs-stoerer);
  font-weight: 900;
  line-height: 1.15;
  color: var(--c-white);
}
.stoerer__place {
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.3;
  color: var(--c-white);
}

/* Der englische Stoerer traegt mit "Hanover Exhibition Center" gut doppelt
   so viel Text wie der deutsche "Hannover Messe". Eigene Stufe, damit der
   Kreis nicht ueberlaeuft – die Copy bleibt unangetastet.                   */
.stoerer--long { padding: 14px; gap: 2px; }
.stoerer--long .stoerer__place {
  font-size: clamp(13px, 12.38px + 0.158vw, 14px);
  line-height: 1.25;
}

.hero__vdw {
  height: 52px;
  width: auto;
  margin-top: auto;
  margin-bottom: 8px;
  align-self: flex-end;
}

/* == 7.3  Themen =========================================================== */

.themen__intro { max-width: 78ch; }
#themen .h2   { margin-bottom: 16px; }
#themen .lead { margin-bottom: 24px; }
.themen__intro { margin-bottom: 48px; }

.themen__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.thema { display: flex; flex-direction: column; gap: 12px; }
.thema__rule { display: block; width: 64px; height: 6px; background: var(--rule); }
.thema__title {
  font-size: var(--fs-card-h);
  font-weight: 900;
  line-height: 1.25;
  color: var(--c-blue);
  text-wrap: balance;
}

/* == 7.4  Aussteller ======================================================= */

/* Die N-Kontur schneidet oben rechts und unten links in die blaue Flaeche.
   Was durch die Kerben scheint, muss zur angrenzenden Sektion passen: oben
   die weisse Themen-Sektion, unten die hellblaue News-Sektion. Deshalb kein
   einfarbiger Wrapper, sondern eine harte Kante auf halber Hoehe – weit
   entfernt von beiden Kerben, die maximal 128 px tief sind.               */
.aussteller__wrap {
  /* Die N-Kontur schneidet oben rechts und unten links ein. Was durch die
     Kerben scheint, muss zur angrenzenden Sektion passen: oben die weisse
     Themen-Sektion, unten die hellblaue News-Sektion.                     */
  background: linear-gradient(var(--c-white) 50%, var(--c-blue-tint) 50%);
}

.aussteller {
  --nY: clamp(40px, 8.889vw, 128px);  /* 40 mobil → 128 bei 1440 */
  background: var(--c-blue);
  color: var(--c-white);
}
.aussteller__inner {
  padding-block: clamp(96px, 10.56vw, 152px) clamp(96px, 9.44vw, 136px);
}

.aussteller__h2   { color: var(--c-white); max-width: 24ch; margin-bottom: 20px; }
.aussteller__lead { color: var(--c-on-blue); line-height: 1.4; max-width: 60ch; margin-bottom: 56px; }

.gruende {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 48px;
}
.grund {
  border-top: 4px solid var(--rule);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.grund__title {
  font-size: var(--fs-card-h);
  font-weight: 900;
  line-height: 1.25;
  color: var(--c-white);
  text-wrap: balance;
}
.grund__body { color: var(--c-white); max-width: 60ch; }

/* CTA in der fünften Rasterzelle – linke Kante auf der zweiten Spalte */
.gruende__cta {
  grid-column: 2;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding-bottom: 4px;
}

/* == 7.5  News ============================================================= */

.news__h2 { margin-bottom: 40px; }
/* Nur in der englischen Fassung: Vorspann unter der Ueberschrift.
   Die deutsche Copy hat an dieser Stelle keinen Text.                        */
.news__lead { max-width: 78ch; margin: -24px 0 32px; }
.news__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.card {
  background: var(--c-white);
  border-top: 4px solid var(--rule);
  display: flex;
  flex-direction: column;
}
.card__img {
  width: 100%;
  height: var(--card-img-h);
  object-fit: cover;
  object-position: 50% 50%;
}
.card__img--right { object-position: 55% 50%; }
.card__body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.card__kicker {
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--c-text-3);
}
.card__title {
  font-size: var(--fs-news-h);
  font-weight: 900;
  line-height: 1.3;
  color: var(--c-blue);
  overflow-wrap: anywhere;
}
/* margin-top:auto hält die Downloadlinks aller Karten auf einer Höhe */
.card__link {
  margin-top: auto;
  padding-top: 12px;
  font-size: var(--fs-body-s);
  font-weight: 500;
  color: var(--c-blue);
}

/* == 7.6  Bildband ========================================================= */

.band { background: var(--c-white); }
.band__blue { background: var(--c-blue); padding-block: 24px; }
.band__inner { padding-inline: 24px; }
.band__img {
  --nY: clamp(40px, 5.0vw, 72px);     /* 40 mobil → 72 bei 1440 */
  width: 100%;
  height: var(--band-h);
  object-fit: cover;
  object-position: 50% 40%;
}

/* == 7.7  FAQ ============================================================== */

.faq__h2 { margin-bottom: 40px; }

.faq { border-top: 1px solid var(--c-rule); }
.faq__item { border-bottom: 1px solid var(--c-rule); }
.faq__h { font: inherit; }

.faq__btn {
  width: 100%;
  background: none;
  border: 0;
  padding: 24px 0;
  display: flex;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
}
.faq__q {
  font-size: var(--fs-card-h);
  font-weight: 900;
  line-height: 1.25;
  color: var(--c-blue);
}
.faq__icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 500;
  border: 2px solid var(--c-blue);
  color: var(--c-blue);
}
.faq__icon::before { content: "+"; }
.faq__btn[aria-expanded="true"] .faq__icon {
  background: var(--c-blue);
  border-color: var(--c-blue);
  color: var(--c-white);
}
.faq__btn[aria-expanded="true"] .faq__icon::before { content: "–"; }

.faq__panel { padding: 0 76px 24px 0; }
.faq__panel .body { max-width: 70ch; }

/* == 7.8  Hannover Messe =================================================== */

.hm { background: var(--c-blue-tint); }
.hm__inner {
  padding-block: 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.hm__text { max-width: 60ch; }

/* == 7.9  Kontakt ========================================================== */

.kontakt { background: var(--c-white); padding-block: 64px 96px; }
.kontakt__h2 { margin-bottom: 40px; }
.kontakt .label { margin-bottom: 20px; }

.personen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.personen--first { margin-bottom: 48px; }

.person {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  border-top: 1px solid var(--c-rule);
  padding-top: 24px;
}
.person picture { flex: none; }
.person__img {
  flex: none;
  width: var(--portrait);
  height: var(--portrait);
  object-fit: cover;
  object-position: 50% 20%;
}
.person__data { display: flex; flex-direction: column; gap: 6px; }
.person__name {
  font-size: var(--fs-card-h);
  font-weight: 900;
  line-height: 1.25;
  color: var(--c-blue);
}
.person__role {
  font-size: var(--fs-body);
  font-weight: 300;
  color: var(--c-text-2);
}
.person__link {
  font-size: var(--fs-body);
  font-weight: 300;
  color: var(--c-blue);
}

/* == 7.10  Newsletter-Footer =============================================== */

.nl { background: var(--c-blue-tint); border-top: 4px solid var(--c-magenta); }
/* Drittel-Raster: die linke Kante des CTA liegt auf der dritten Spalte –
   bündig mit „Folgen & Teilen“ im Footer darunter.                          */
.nl__inner {
  padding-block: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.nl__text {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nl__title {
  font-size: var(--fs-card-h);
  font-weight: 900;
  line-height: 1.3;
  color: var(--c-blue);
}
.nl__body {
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.5;
  color: var(--c-text-2);
}
.nl .btn { justify-self: start; }

/* == 7.11  Footer ========================================================== */

.footer__top { background: var(--c-blue-tint); }
.footer__grid {
  padding-block: 64px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.footer__brand { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.footer__logo-link { align-self: flex-start; }
.footer__logo { height: var(--logo-h-footer); width: auto; }
.footer__vdw  { width: 170px; height: auto; margin-top: 8px; }

.footer__col { display: flex; flex-direction: column; gap: 14px; }
.footer__col--social { gap: 28px; }
.footer__block { display: flex; flex-direction: column; gap: 14px; }

.footer__link {
  font-size: var(--fs-body);
  font-weight: 300;
  color: var(--c-blue);
}

.social { display: flex; gap: 14px; align-items: center; }
.social a { display: flex; color: var(--c-blue); }
.social a:hover { color: var(--c-blue-light); }
.social svg { width: 40px; height: 40px; }

.footer__hm { display: inline-flex; align-self: flex-start; }
.footer__hm img { height: 80px; width: auto; object-fit: contain; }

.footer__bottom { background: var(--c-blue); color: var(--c-white); }
.footer__bottom-inner {
  padding-block: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: baseline;
}
.footer__wordmark { font-size: var(--fs-stoerer); font-weight: 900; }
.footer__meta { font-size: var(--fs-label); font-weight: 500; color: var(--c-on-blue); }

/* =============================================================================
   8  Breakpoints

   < 768      Mobil-Fassung: einspaltig, Hamburger, Störer kleiner
   768–1023   Übergang: zweispaltige Raster, Navigation noch im Menü
   ≥ 1024     Desktop-Fassung (die Basis oben)
   ≥ 1440     Inhalt zentriert, Ränder wachsen (über .inner, ohne Query)

   Die Schriftgrößen und die N-Kontur laufen fluid über clamp(); hier stehen
   nur die Umbrüche im Raster und die drei Stufen des Seitenrands.
   ========================================================================== */

/* == 8.1  Unter 1024: Navigation ins Menü, Hero einspaltig ================= */

@media (max-width: 1023px) {

  :root {
    --pad-x: 48px;
    --fs-nav: 18px;
  }

  /* -- Navigation hinter dem Hamburger -- */
  .header__main-inner { flex-wrap: wrap; gap: 16px; }

  .header__logo-link { order: 1; }
  .burger       { order: 2; }
  .nav          { order: 3; }

  .burger {
    display: flex;
    flex: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: var(--c-blue);
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
  }
  .burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--c-white);
  }

  .nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    /* volle Breite: der Seitenrand wird aufgehoben und pro Zeile neu gesetzt */
    margin: 4px calc(-1 * var(--pad-x)) -20px;
    border-top: 1px solid var(--c-rule-light);
  }
  .nav--open { display: flex; }
  .nav a {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 0 var(--pad-x);
    border-bottom: 1px solid var(--c-rule-light);
  }
  .nav a:last-child { border-bottom: 0; }

  /* -- Hero einspaltig, Text zuerst -- */
  .hero__inner { grid-template-columns: 1fr; }
  .hero__text  { padding: 56px var(--pad-x) 32px; gap: 18px; }
  .hero__media { padding: 0 var(--pad-x) 40px; }
  .hero__vdw   { align-self: flex-start; margin-top: 28px; margin-bottom: 0; }

  /* -- Raster zweispaltig -- */
  .themen__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .news__grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gruende      { gap: 32px; }

  /* Der Drittel-Bezug zu „Folgen & Teilen“ gilt nur, solange der Footer
     dreispaltig ist – darunter Text und CTA nebeneinander.                   */
  .nl__inner { grid-template-columns: 1fr auto; gap: 32px; }
  .nl__text  { grid-column: auto; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }

  .faq__panel { padding-right: 0; }
}

/* == 8.2  Unter 768: Mobil-Fassung ========================================= */

@media (max-width: 767px) {

  :root {
    --pad-x: 24px;
    --card-img-h: 200px;
  }

  /* -- Buttons brechen um, statt aus dem Bild zu laufen -- */
  .btn {
    white-space: normal;
    text-align: center;
    padding: 12px 20px;
  }

  /* -- Header: Newsletter-Zeile gestapelt -- */
  .header__bar-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-block: 16px;
  }
  .lang { order: -1; align-self: flex-end; margin-left: 0; }

  /* -- Hero: Störer überlappt die Bildunterkante -- */
  .hero__text { padding: 44px var(--pad-x) 28px; gap: 16px; }
  .hero__date span { font-size: 22px; }
  .hero__cta { display: block; }
  .hero__cta .btn { width: 100%; }

  .hero__media { padding: 0 var(--pad-x) 32px; }
  .stoerer {
    bottom: -44px;
    right: 20px;
    padding: 16px;
    gap: 4px;
  }
  .hero__vdw { margin-top: 60px; height: 42px; }

  /* -- Raster einspaltig -- */
  .themen__grid { grid-template-columns: 1fr; gap: 28px; }

  .gruende { grid-template-columns: 1fr; gap: 28px; }
  .gruende__cta {
    grid-column: 1;
    padding-bottom: 0;
    align-items: stretch;
  }
  .gruende__cta .btn { width: 100%; }

  .news__grid { grid-template-columns: 1fr; gap: 20px; }
  .card__body { padding: 24px; gap: 10px; }

  .band__blue  { padding-block: 16px; }
  .band__inner { padding-inline: 16px; }

  .faq__btn   { gap: 16px; padding: 20px 0; }
  .faq__panel { padding: 0 0 24px; }

  .hm__inner {
    flex-direction: column;
    align-items: stretch;
    padding-block: 40px;
    gap: 16px;
  }
  .hm__inner .btn { width: 100%; }

  .kontakt { padding-block: 48px 64px; }
  .personen { grid-template-columns: 1fr; gap: 28px; }
  .personen--first { margin-bottom: 40px; }
  .person { gap: 16px; }

  .nl__inner { grid-template-columns: 1fr; gap: 18px; padding-block: 24px; }
  .nl__inner .btn { width: 100%; }

  .footer__grid { grid-template-columns: 1fr; gap: 40px; padding-block: 48px; }
  .footer__col--social { gap: 28px; }
}

/* == 8.3  Unter 390: Störer mitskalieren ================================== */
/* 152 px ist der Wert des Mobil-Entwurfs bei 390 px. Darunter wird der Kreis
   sonst groesser als das halbe Bild – er skaliert deshalb weiter herunter.   */

@media (max-width: 389px) {
  :root { --stoerer-size: clamp(120px, 39vw, 152px); }
  .stoerer { right: 16px; bottom: -36px; }
}

/* =============================================================================
   9  Rechtstextseiten

   Eigene Unterseiten fuer Impressum, Datenschutzhinweise und
   Barrierefreiheit. Laut Handoff einspaltig, maximal 70ch, gleiche
   Typografie wie der One-Pager. Vorlage: rechtstext-vorlage.html
   ========================================================================== */

.legal { background: var(--c-white); padding-block: var(--sec-y); }
.legal__inner > * { max-width: 70ch; }

.legal__h1 {
  font-size: var(--fs-h2);
  font-weight: 900;
  line-height: 1.15;
  color: var(--c-blue);
  margin-bottom: 32px;
  text-wrap: balance;
}
.legal__h2 {
  font-size: var(--fs-card-h);
  font-weight: 900;
  line-height: 1.25;
  color: var(--c-blue);
  margin: 48px 0 12px;
  text-wrap: balance;
}
.legal__h3 {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-blue);
  margin: 32px 0 8px;
}
.legal__h4 {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-text);
  margin: 24px 0 6px;
}
.legal__inner .body + .body { margin-top: 16px; }

.legal__list {
  margin: 16px 0;
  padding-left: 22px;
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.6;
}
.legal__list li + li { margin-top: 6px; }