/* X-Shred — Gestaltung „Richtung H"
   Formsprache aus dem Logo-X: schräg angeschnittene Kopfzonen, Karten mit
   abgeschnittener Ecke, schräge Marker und Unterlegungen.

   Markenblau ist #2C7DC0. Es erreicht mit Weiß nur 4,37:1 und ist damit für
   Text zu schwach. Deshalb drei abgeleitete Töne, nachgerechnet in
   pruefen/kontrast.py:
     --blau          #2C7DC0  nur Dekor und große Flächen ohne Text
     --blau-flaeche  #2871AE  Flächen, auf denen weißer Text steht
     --blau-tief     #1B4F8F  dunkles Ende der Verläufe, Text auf Weiß
     --blau-text     #226195  Blau als Text oder Marke auf hellem Grund */

:root {
  --blau: #2c7dc0;
  --blau-flaeche: #2871ae;
  --blau-tief: #1b4f8f;
  --blau-text: #226195;

  --ink: #0f172a;          /* Überschriften */
  --ink2: #4a5a70;         /* Fließtext */
  --ink3: #5d6d84;         /* Kleintext, Kartenbeschriftung */
  --grund: #f4f6f9;        /* grauer Wechselabschnitt */
  --schwarz: #12151c;      /* Fußzeile, dunkle Karte */
  --fusstext: #c2cbd7;
  --fussgrau: #a4b0c0;
  --linie: rgba(15, 23, 42, 0.12);
  --rahmen: rgba(15, 23, 42, 0.55);

  --breite: 1240px;
  --breite-text: 760px;
  --rand: clamp(20px, 5vw, 72px);
  --schraeg: 16px;         /* Tiefe der abgeschnittenen Ecke */
  --schrift: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;      /* die schrägen Dekorformen ragen bewusst über */
}

body {
  margin: 0;
  background: #fff;
  color: var(--ink2);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
  /* Die Rechtstexte enthalten sehr lange Wörter und Adressen. Ohne dies
     schieben sie die Seite bei 390 px über den Rand hinaus. */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--blau-text); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

:focus-visible { outline: 3px solid var(--blau-tief); outline-offset: 3px; }
.kopfzone :focus-visible { outline-color: #fff; }

.huelle { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.huelle-schmal { max-width: var(--breite-text); }

/* ---------- Typografie ---------- */

h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.08; font-weight: 800; color: var(--ink); }
h1 { font-size: clamp(2.3rem, 6.2vw, 4.4rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.85rem); letter-spacing: -0.022em; }
h3 { font-size: 1.28rem; letter-spacing: -0.01em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* Schräge Unterlegung wie der Anschnitt des Logo-X */
.unter { position: relative; display: inline-block; }
.unter::after {
  content: ""; position: absolute; z-index: -1;
  left: -0.06em; right: -0.06em; bottom: 0.09em; height: 0.17em;
  background: rgba(255, 255, 255, 0.3); transform: skewX(-18deg);
}

.kicker {
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--blau-text); margin: 0 0 0.9em;
}
.kopfzone .kicker { color: #fff; }

.vorspann {
  font-size: clamp(1.02rem, 1.5vw, 1.19rem); line-height: 1.55;
  font-weight: 500; color: var(--ink2); max-width: 34em;
}
.kopfzone .vorspann { color: rgba(255, 255, 255, 0.94); }

.klein { font-size: 0.87rem; color: var(--ink3); }
.kopfzone .klein { color: #fff; opacity: 0.92; }

/* ---------- Kopfzone mit schrägem Anschnitt ---------- */

.kopfzone {
  position: relative;
  padding-bottom: clamp(46px, 7vw, 82px);
  color: #fff;
  isolation: isolate;
}
.kopfzone::before {
  content: ""; position: absolute; z-index: -2;
  left: 0; right: 0; top: 0; bottom: 0;
  background: linear-gradient(135deg, var(--blau-flaeche) 0%, var(--blau-tief) 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 58px), 0 100%);
}
.kopfzone h1, .kopfzone h2 { color: #fff; }

/* Kopfzone ohne eigenen Aufmacher — Textseiten, Formulare, Rechtstexte */
.kopfzone-schmal { padding-bottom: 0; }
.kopfzone-schmal::before { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 0 100%); }
.kopfzone-schmal .leiste { padding-bottom: 52px; }

/* Aufmacher: Text neben Gerät */
.aufmacher { display: flex; align-items: flex-start; gap: clamp(28px, 5vw, 66px); }
.aufmacher .text { flex: 1; min-width: 0; }

.xzeichen { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
.xzeichen img { position: absolute; opacity: 0.1; }
.xzeichen .x1 { right: -80px; top: -110px; width: min(560px, 60vw); }
.xzeichen .x2 { left: -120px; top: 130px; width: min(380px, 45vw); opacity: 0.07; }

/* ---------- Leiste (Navigation) ---------- */

.leiste {
  display: flex; align-items: center; gap: 20px;
  padding-top: 26px; padding-bottom: 26px;
  flex-wrap: wrap;
}
.leiste-logo img { height: 42px; width: auto; }
.leiste nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.leiste nav a {
  position: relative; color: #fff; font-size: 0.87rem; font-weight: 600;
  text-decoration: none; padding: 4px 0;
}
.leiste nav a:hover { text-decoration: underline; }
.leiste nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px;
  height: 3px; background: #fff; transform: skewX(-18deg);
}

.sprachwahl { display: flex; gap: 6px; align-items: center; font-size: 0.82rem; }
.sprachwahl a { color: #fff; opacity: 0.92; font-weight: 700; text-decoration: none; }
.sprachwahl a[aria-current="true"] { opacity: 1; text-decoration: underline; }
.sprachwahl span { color: #fff; opacity: 0.92; }

.menue-knopf {
  display: none; margin-left: auto;
  background: none; border: 2px solid rgba(255, 255, 255, 0.85); color: #fff;
  font: inherit; font-size: 0.85rem; font-weight: 700;
  padding: 8px 14px; cursor: pointer;
}

/* ---------- Knöpfe mit abgeschnittener Ecke ---------- */

.knopfreihe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.knopf {
  display: inline-block; font: inherit; font-size: 0.98rem; font-weight: 700;
  padding: 16px 28px; border: 2px solid transparent; cursor: pointer;
  text-decoration: none; text-align: center;
  background: #fff; color: var(--blau-tief);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--schraeg)),
                     calc(100% - var(--schraeg)) 100%, 0 100%);
}
.knopf:hover { background: #eaf2f9; text-decoration: none; }

.knopf-blau { background: var(--blau-flaeche); color: #fff; }
.knopf-blau:hover { background: var(--blau-tief); }

.knopf-rand {
  background: transparent; color: #fff; clip-path: none;
  border-color: rgba(255, 255, 255, 0.85);
}
.knopf-rand:hover { background: rgba(255, 255, 255, 0.14); }

.knopf-rand-dunkel {
  background: transparent; color: var(--ink); clip-path: none;
  border-color: var(--rahmen);
}
.knopf-rand-dunkel:hover { background: var(--grund); }

/* Knopf in der Leiste, kleiner */
.leiste .knopf { padding: 11px 20px; font-size: 0.85rem; --schraeg: 12px; }

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

.abschnitt { padding: clamp(52px, 7vw, 92px) 0; }
.abschnitt-eng { padding: clamp(34px, 4vw, 52px) 0 clamp(52px, 7vw, 92px); }

/* Grauer Wechselabschnitt mit schrägen Kanten */
.abschnitt-grund {
  background: var(--grund);
  padding: clamp(62px, 8vw, 100px) 0;
  clip-path: polygon(0 34px, 100% 0, 100% 100%, 0 calc(100% - 34px));
  margin: -20px 0;
}

/* Blauer Abschluss */
.abschluss {
  position: relative; overflow: hidden; text-align: center; color: #fff;
  background: linear-gradient(135deg, var(--blau-flaeche) 0%, var(--blau-tief) 100%);
  padding: clamp(58px, 8vw, 92px) 0;
  clip-path: polygon(0 34px, 100% 0, 100% 100%, 0 100%);
}
.abschluss h2 { color: #fff; }
.abschluss .vorspann { color: rgba(255, 255, 255, 0.94); margin: 0 auto; }
.abschluss .knopfreihe { justify-content: center; }
.abschluss .x3 {
  position: absolute; right: -40px; bottom: -110px;
  width: min(380px, 50vw); opacity: 0.12; pointer-events: none;
}

/* ---------- Streifen unter der Kopfzone ---------- */

.streifen {
  position: relative; z-index: 2;
  margin: -34px auto clamp(20px, 3vw, 34px);
  max-width: calc(var(--breite) - 2 * var(--rand));
  width: calc(100% - 2 * var(--rand));
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--blau-flaeche); color: #fff;
}
.streifen > div { padding: 22px 24px; border-right: 1px solid rgba(255, 255, 255, 0.3); }
.streifen > div:last-child { border-right: 0; }
.streifen b { display: block; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; }
.streifen span {
  display: block; margin-top: 5px; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}

/* ---------- Karten mit abgeschnittener Ecke ---------- */

.karten { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.karten-2 { grid-template-columns: repeat(2, 1fr); }

.karte {
  background: #fff; border-radius: 16px; padding: 26px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  /* drop-shadow statt box-shadow: der Schatten folgt der abgeschnittenen Ecke.
     box-shadow würde vom clip-path mit abgeschnitten und ließe an den Rändern
     harte Kanten stehen. */
  filter: drop-shadow(0 5px 14px rgba(15, 23, 42, 0.12));
}
.abschnitt-grund .karte { filter: drop-shadow(0 5px 14px rgba(15, 23, 42, 0.14)); }
.karte h3 { margin-bottom: 0.45em; }
.karte p { font-size: 0.95rem; color: var(--ink2); }
.karte .marke {
  display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink3);
}
.karte .zahl {
  display: block; margin: 4px 0 10px;
  font-size: 2.3rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink);
}
.karte .zahl em {
  font-style: normal; font-size: 1rem; font-weight: 600;
  color: var(--ink2); margin-left: 4px;
}

.karte-dunkel { background: var(--schwarz); }
.karte-dunkel h3, .karte-dunkel .zahl { color: #fff; }
.karte-dunkel p { color: var(--fusstext); }
.karte-dunkel .marke { color: var(--fussgrau); }

/* Schräges Markenfeld in der Karte */
.zeichen {
  width: 46px; height: 46px; margin-bottom: 16px;
  background: rgba(44, 125, 192, 0.13); color: var(--blau-text);
  font-size: 1.05rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  transform: skewX(-12deg);
}
.zeichen b { transform: skewX(12deg); }
.karte-dunkel .zeichen { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* ---------- Wechselabschnitt Text / Gerät ---------- */

.wechsel { display: flex; align-items: center; gap: clamp(30px, 5vw, 76px); }
.wechsel-gedreht { flex-direction: row-reverse; }
.wechsel .text { flex: 1; min-width: 0; }

.geraet {
  flex: none; width: min(330px, 100%);
  background: var(--schwarz); padding: 10px; border-radius: 40px;
  box-shadow: 0 22px 46px rgba(15, 23, 42, 0.28);
}
.geraet img { width: 100%; border-radius: 30px; }
.geraet-gross { width: min(360px, 100%); }

/* ---------- Zeilenliste auf Haarlinien ---------- */

.zeilen { margin-top: 26px; }
.zeile {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px;
  padding: 15px 0; border-bottom: 1px solid var(--linie);
}
.zeile b { font-size: 1.02rem; font-weight: 700; color: var(--ink); flex: 0 0 210px; }
.zeile p { flex: 1 1 240px; margin: 0; font-size: 0.95rem; }
.zeile i {
  font-style: normal; font-size: 0.8rem; font-weight: 700;
  color: var(--blau-text); margin-left: auto;
}

/* ---------- Hinweiskasten (Textseiten) ---------- */

.hinweis {
  border-left: 4px solid var(--blau-flaeche); background: rgba(44, 125, 192, 0.08);
  padding: 18px 22px; margin: 26px 0;
}

/* ---------- Textseiten (Recht, Formulare) ---------- */

.textseite { padding: clamp(44px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); }
.textseite h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: 0.6em; }
.textseite h2 {
  font-size: 1.22rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--blau-text); border-top: 1px solid var(--linie);
  padding-top: 1.1em; margin-top: 2.4em;
}
.textseite h3 { font-size: 1.05rem; margin-top: 1.8em; }
.textseite p { color: var(--ink2); }
.textseite .stand { color: var(--ink3); font-size: 0.92rem; }

/* ---------- Formulare ---------- */

.formular { max-width: 620px; margin-top: 32px; }
.feld { margin-bottom: 22px; }
.feld > label, .feld > .feldtitel {
  display: block; font-weight: 700; font-size: 0.95rem;
  color: var(--ink); margin-bottom: 8px;
}
.pflicht { color: var(--blau-text); font-weight: 500; font-size: 0.85rem; }
.hilfe { color: var(--ink3); font-size: 0.9rem; margin: -2px 0 8px; }

input[type="text"], input[type="email"], textarea, select {
  width: 100%; padding: 13px 15px; font: inherit; font-size: 16px;
  color: var(--ink); background: #fff;
  border: 1px solid var(--rahmen); border-radius: 4px;
}
input:focus, textarea:focus, select:focus { border-color: var(--blau-tief); }
textarea { min-height: 120px; resize: vertical; }

.wahl { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 9px; font-size: 0.95rem; }
.wahl input { margin-top: 4px; accent-color: var(--blau-flaeche); flex: none; }

.formular-meldung { margin-top: 18px; padding: 14px 18px; display: none; }
.formular-meldung.gut {
  display: block; background: rgba(44, 125, 192, 0.1);
  border-left: 4px solid var(--blau-flaeche); color: var(--blau-tief);
}
.formular-meldung.fehler {
  display: block; background: rgba(163, 35, 26, 0.08);
  border-left: 4px solid #a3231a; color: #a3231a;
}

/* ---------- Fußzeile mit schräger Oberkante ---------- */

.fuss {
  background: var(--schwarz); color: var(--fusstext);
  padding: calc(48px + 34px) 0 40px; font-size: 0.92rem;
  clip-path: polygon(0 34px, 100% 0, 100% 100%, 0 100%);
  margin-top: -20px;
}
.fuss-oben { display: flex; flex-wrap: wrap; gap: 34px 60px; }
.fuss-marke { flex: 1 1 260px; }
.fuss-marke img { height: 40px; width: auto; }
.fuss-marke p { margin-top: 16px; max-width: 32ch; color: var(--fussgrau); }
.fuss h4 {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: #fff; margin-bottom: 12px;
}
.fuss nav { display: flex; flex-direction: column; gap: 8px; }
.fuss a { color: var(--fusstext); }
.fuss a:hover { color: #fff; }
.fuss-unten {
  margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--fussgrau); font-size: 0.85rem;
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
}
.fuss :focus-visible { outline-color: #fff; }

/* ---------- Schmal ---------- */

@media (max-width: 1000px) {
  .karten { grid-template-columns: 1fr 1fr; }
  .karten > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .wechsel, .wechsel-gedreht { flex-direction: column; align-items: flex-start; }
  .aufmacher { flex-direction: column; }
  .geraet { margin: 0 auto; }
}

@media (max-width: 820px) {
  .menue-knopf { display: block; }
  .leiste nav {
    display: none; order: 3; width: 100%; margin-left: 0;
    flex-direction: column; align-items: flex-start; gap: 14px;
    padding: 14px 0 6px;
  }
  .leiste .knopf { order: 4; }
  .leiste .sprachwahl { order: 5; }
  .leiste.offen nav { display: flex; }
  .leiste nav a[aria-current="page"]::after { right: auto; width: 2.2em; }
  .streifen { grid-template-columns: 1fr 1fr; }
  .streifen > div:nth-child(2n) { border-right: 0; }
  .streifen > div:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .karten { grid-template-columns: 1fr; }
  .karten > :last-child:nth-child(odd) { grid-column: auto; }
  .zeile b { flex: 1 1 100%; }
  .zeile i { margin-left: 0; }
  .knopfreihe .knopf { flex: 1 1 100%; }
  .kopfzone::before { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 0 100%); }
}

@media (max-width: 420px) {
  .streifen { grid-template-columns: 1fr; }
  .streifen > div { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
  .streifen > div:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}