/* Rychlik Digital — Corporate Design 1.0, November 2026
   Bild-Idee: Ein Gesicht und eine Zahl. Das Porträt steht für den einen
   Ansprechpartner, die steigenden Balken aus dem Logo für das Ergebnis. */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farben — Markenstandard, Verteilung 60 Weiß, 25 Navy, 10 Blau, 5 Grau */
  --navy: #07182e;   /* Primärfarbe: Struktur, Überschriften, dunkle Flächen */
  --blau: #087fe5;   /* Akzent: Knöpfe, Kennzahlen, Hervorhebungen */
  --weiss: #fff;     /* dominante Fläche */
  --grau: #f3f6fa;   /* Sekundärfläche: Karten und Hintergründe */
  --slate: #263548;  /* Fließtext und Details */

  /* Schrift */
  --schrift-titel: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --schrift-text: "Inter", "Segoe UI", system-ui, sans-serif;
  --t-klein: 1rem;
  --t-text: 1.125rem;
  --t-leit: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
  --t-h3: clamp(1.375rem, 1.25rem + 0.5vw, 1.75rem);
  --t-h2: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  --t-h1: clamp(2.05rem, 8.6vw, 4.5rem);
  --t-zahl: clamp(2.75rem, 1.9rem + 3.8vw, 4.75rem);

  /* Abstände */
  --a-1: 0.5rem;
  --a-2: 1rem;
  --a-3: 1.5rem;
  --a-4: 2.5rem;
  --a-5: 4rem;
  --a-6: 6rem;
  --a-7: 8.5rem;
  --rand: clamp(1.25rem, 4vw, 4rem);
  --breite: 1280px;
  --kopf-h: 5.25rem;
  --ecke: 0.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--kopf-h); }
body {
  margin: 0;
  background: var(--weiss);
  color: var(--slate);
  font-family: var(--schrift-text);
  font-size: var(--t-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 {
  font-family: var(--schrift-titel);
  color: var(--navy);
  margin: 0;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-weight: 800; line-height: 1.08; }
h2 { font-size: var(--t-h2); font-weight: 700; line-height: 1.12; }
h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.25; }
p { margin: 0 0 var(--a-2); max-width: 62ch; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.leit { font-size: var(--t-leit); line-height: 1.5; }

.rahmen {
  width: 100%;
  max-width: calc(var(--breite) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}
.abschnitt { padding-block: var(--a-7); }
.abschnitt--grau { background: var(--grau); }
.abschnitt--ohne-oben { padding-top: 0; }

.sprung {
  position: absolute; left: var(--a-2); top: -5rem; z-index: 30;
  background: var(--navy); color: var(--weiss); padding: var(--a-1) var(--a-2);
}
.sprung:focus { top: var(--a-2); }
a:focus-visible, summary:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--blau); outline-offset: 3px;
}

/* Handlung: ein gefüllter Knopf pro Ansicht, der zweite Weg ist ein Textlink */
.handlung {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--a-2) var(--a-4);
  margin-top: var(--a-4);
}
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.75rem;
  padding: var(--a-1) var(--a-4);
  border: 0;
  border-radius: var(--ecke);
  background: var(--blau);
  color: var(--weiss);
  font-family: var(--schrift-text);
  font-size: 1.1875rem;
  font-weight: 700; /* Weiß auf Electric Blue: 4,1 : 1, also Großschrift fett */
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.knopf:hover { background: var(--navy); }
.auf-dunkel .knopf:hover { background: var(--weiss); color: var(--navy); }
.knopf--rand {
  min-height: 3rem;
  padding: 0 var(--a-3);
  border: 2px solid var(--navy);
  background: transparent;
  color: var(--navy);
  font-size: var(--t-klein);
  font-weight: 600;
}
.knopf--rand:hover { background: var(--navy); color: var(--weiss); }
.textlink {
  color: var(--navy);
  font-size: 1.1875rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--blau);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.textlink:hover { color: var(--blau); }
.auf-dunkel .textlink { color: var(--weiss); }
.auf-dunkel .textlink:hover { color: var(--weiss); text-decoration-thickness: 3px; }

/* Hinweis für alles, was vor dem Start noch offen ist */
.entwurf-hinweis {
  max-width: none;
  padding: var(--a-2) var(--a-3);
  border-radius: var(--ecke);
  background: var(--grau);
  color: var(--slate);
  font-size: var(--t-klein);
}

/* Kopf */
.kopf {
  position: sticky; top: 0; z-index: 20;
  height: var(--kopf-h);
  background: var(--weiss);
  box-shadow: 0 1px 0 rgba(7, 24, 46, 0.1);
}
.kopf__innen { height: 100%; display: flex; align-items: center; gap: var(--a-4); }
.kopf__logo img { height: 2.75rem; width: auto; }
.kopf__nav { display: flex; align-items: center; gap: var(--a-4); margin-left: auto; }
.kopf__nav a:not(.knopf) {
  color: var(--navy);
  font-size: var(--t-klein);
  font-weight: 500;
  text-decoration: none;
}
.kopf__nav a:not(.knopf):hover, .kopf__nav a[aria-current] {
  text-decoration: underline;
  text-decoration-color: var(--blau);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}
.menue { display: none; margin-left: auto; }
.menue summary {
  display: flex; align-items: center;
  min-height: 3rem;
  padding: 0 var(--a-3);
  border: 2px solid var(--navy);
  border-radius: var(--ecke);
  color: var(--navy);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.menue summary::-webkit-details-marker { display: none; }
.menue nav {
  position: absolute; left: 0; right: 0; top: var(--kopf-h);
  display: grid; gap: var(--a-1);
  padding: var(--a-3) var(--rand) var(--a-4);
  background: var(--weiss);
  box-shadow: 0 16px 30px -18px rgba(7, 24, 46, 0.35);
}
.menue nav a:not(.knopf) {
  display: block; padding: var(--a-1) 0;
  color: var(--navy);
  font-size: var(--t-leit);
  font-weight: 500;
  text-decoration: none;
}
.menue .knopf { margin-top: var(--a-2); }

/* Hero: Porträt dahinter, läuft unten aus */
.hero {
  position: relative;
  min-height: calc(100svh - var(--kopf-h));
  display: grid; align-items: center;
  overflow: hidden;
  background: var(--weiss);
}
.hero__bild {
  position: absolute;
  right: max(calc(50% - 56rem), -12vw);
  bottom: 0;
  height: min(96%, 55rem); width: auto; max-width: none;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 24%);
  mask-image: linear-gradient(to top, transparent 0%, #000 24%);
}
.hero__inhalt { position: relative; padding-block: var(--a-5); }
.hero h1 { font-size: var(--t-h1); max-width: 13em; }
.hero__unter {
  font-family: var(--schrift-text);
  font-size: var(--t-leit);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--slate);
  max-width: 34rem;
  margin-top: var(--a-3);
}

/* Vertrauensleiste: die Zahl in echtem Größenverhältnis */
.beweis { background: var(--navy); color: var(--weiss); padding-block: var(--a-6); }
.beweis__raster {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--a-5) var(--a-6);
  align-items: center;
}
.beweis__zahl {
  font-family: var(--schrift-titel);
  font-size: var(--t-zahl);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--weiss);
  max-width: none;
  margin-bottom: var(--a-1);
}
.beweis__zahl strong { color: var(--blau); font-weight: 700; }
.beweis__einheit { font-size: var(--t-leit); margin-bottom: var(--a-4); }
.balken { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--a-1) var(--a-2); align-items: center; }
.balken span { font-size: var(--t-klein); }
.balken i { display: block; height: 0.875rem; border-radius: 2px; background: var(--blau); }
.balken .balken__wenig { width: 2px; }
.beweis__liste { display: grid; gap: var(--a-3); }
.beweis__liste li { font-family: var(--schrift-titel); font-size: var(--t-h3); font-weight: 600; line-height: 1.3; }

/* Problem */
.problem__raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--a-5) var(--a-6);
  align-items: start;
}

/* Leistungen: drei Balken, die wie im Logo ansteigen */
.leistungen__kopf { max-width: 44rem; margin-bottom: -2.5rem; }
.karten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--a-3);
  align-items: end;
}
.karte {
  display: flex; flex-direction: column;
  padding: var(--a-4);
  border-radius: var(--ecke);
  background: var(--grau);
  text-decoration: none;
  transition: transform 0.2s;
}
.karte:hover { transform: translateY(-0.25rem); }
.karte:nth-child(1) { min-height: 18rem; }
.karte:nth-child(2) { min-height: 22rem; background: var(--slate); color: var(--weiss); }
.karte:nth-child(3) { min-height: 26rem; background: var(--navy); color: var(--weiss); }
.karte:nth-child(n+2) h3 { color: var(--weiss); }
.karte h3 { margin-bottom: var(--a-2); }
.karte__link {
  margin-top: auto;
  padding-top: var(--a-3);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--blau);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

/* Ablauf */
.schritte__titel { margin-bottom: var(--a-5); }
.schritte {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--a-4);
  counter-reset: schritt;
}
.schritte li { counter-increment: schritt; }
.schritte li::before {
  content: counter(schritt);
  display: block;
  margin-bottom: var(--a-2);
  font-family: var(--schrift-titel);
  font-size: var(--t-zahl);
  font-weight: 700;
  line-height: 1;
  color: var(--blau);
}
.schritte h3 { margin-bottom: var(--a-1); }

/* Branchen: drei Zeilen über die ganze Breite */
.branchen__titel { margin-bottom: var(--a-4); }
.branche {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--a-1) var(--a-5);
  align-items: baseline;
  padding-block: var(--a-4);
  border-top: 1px solid rgba(7, 24, 46, 0.14);
  text-decoration: none;
  transition: color 0.2s;
}
.branche:last-child { border-bottom: 1px solid rgba(7, 24, 46, 0.14); }
.branche h3 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 700; transition: color 0.2s; }
.branche:hover h3 { color: var(--blau); }
.branche p { margin: 0; font-size: var(--t-leit); max-width: none; }

/* Abschluss */
.abschluss { background: var(--navy); color: var(--weiss); padding-block: var(--a-6); }
.abschluss h2 { color: var(--weiss); margin-bottom: var(--a-2); }
.abschluss__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--a-4) var(--a-6);
  align-items: center;
}

/* Fuß */
.fuss { background: var(--navy); color: var(--weiss); font-size: var(--t-klein); }
.fuss__oben {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: var(--a-4);
  padding-block: var(--a-5);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.fuss__logo img { width: 15rem; }
.fuss__claim { margin-top: var(--a-2); max-width: 22rem; }
.fuss h2 {
  color: var(--weiss);
  font-size: var(--t-klein);
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: var(--a-2);
}
.fuss li { margin-bottom: var(--a-1); }
.fuss a { text-decoration: none; }
.fuss a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.fuss__unten {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--a-1) var(--a-4);
  padding-block: var(--a-3);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.fuss__unten p { margin: 0; }
.fuss__unten nav { display: flex; gap: var(--a-4); }

/* Seitenkopf der Unterseiten: links die Aussage, rechts die Fakten */
.seitenkopf { background: var(--navy); color: var(--weiss); padding-block: var(--a-6); }
.seitenkopf h1 { color: var(--weiss); font-size: var(--t-h2); font-weight: 800; margin-bottom: var(--a-3); }
.seitenkopf__raster {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--a-5) var(--a-6);
  align-items: start;
}
.pfad { margin-bottom: var(--a-3); font-size: var(--t-klein); max-width: none; }
.pfad a { text-underline-offset: 0.25em; }
.fakten {
  padding: var(--a-4);
  border-radius: var(--ecke);
  background: var(--weiss);
  color: var(--slate);
}
.fakten h2 { font-size: var(--t-h3); font-weight: 600; margin-bottom: var(--a-2); }
.fakten * + h2 { margin-top: var(--a-4); }
.haken { display: grid; gap: var(--a-1); }
.haken li { position: relative; padding-left: 1.5rem; }
.haken li::before {
  content: "";
  position: absolute; left: 0; top: 0.6em;
  width: 0.625rem; height: 0.625rem;
  border-radius: 1px;
  background: var(--blau);
}

/* Weitere Leistungen */
.weiter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-3); }
.weiter a {
  display: block;
  padding: var(--a-4);
  border-radius: var(--ecke);
  background: var(--grau);
  text-decoration: none;
  transition: box-shadow 0.2s;
}
.weiter a:hover { box-shadow: inset 0 0 0 2px var(--blau); }
.weiter h3 { margin-bottom: var(--a-1); }
.weiter p { margin: 0; }
.weiter__titel { margin-bottom: var(--a-4); }

/* Referenzen */
.seitentitel { font-size: var(--t-h1); margin-bottom: var(--a-3); }
.referenzen__kopf { margin-bottom: var(--a-5); }
.referenz-gross {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--a-4) var(--a-6);
  align-items: center;
  padding: var(--a-5);
  border-radius: var(--ecke);
  background: var(--navy);
  color: var(--weiss);
  margin-bottom: var(--a-3);
}
.referenz-gross h2 { color: var(--weiss); font-size: var(--t-h3); font-weight: 600; margin-bottom: var(--a-2); }
.referenz__meta { font-size: var(--t-klein); margin-bottom: var(--a-2); }
.referenzen-liste { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--a-3); }
.referenz { grid-column: span 2; display: flex; flex-direction: column; align-items: flex-start; padding: var(--a-4); border-radius: var(--ecke); background: var(--grau); }
.referenz--breit { grid-column: span 3; }
.kundenlogo {
  display: inline-flex; align-items: center;
  height: 4.5rem; max-width: 100%;
  padding: 0.625rem var(--a-2);
  border-radius: var(--ecke);
  background: var(--weiss);
  margin-bottom: var(--a-3);
  transition: box-shadow 0.2s;
}
.kundenlogo:hover { box-shadow: 0 0 0 2px var(--blau); }
.kundenlogo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.kundenlogo--voll { padding: 0; overflow: hidden; }
.kundenlogos { display: flex; flex-wrap: wrap; gap: var(--a-1) var(--a-2); }
.kundenadressen { display: flex; flex-wrap: wrap; gap: var(--a-1) var(--a-3); margin: auto 0 0; padding-top: var(--a-3); max-width: none; }
.kundenadresse {
  font-size: var(--t-klein);
  font-weight: 600;
  color: var(--navy);
  overflow-wrap: anywhere;
  text-decoration-color: var(--blau);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
.auf-dunkel .kundenadresse { display: inline-block; margin-top: var(--a-2); color: var(--weiss); }
.stimme { margin: var(--a-2) 0 0; }
.stimme p { font-size: var(--t-leit); font-weight: 500; line-height: 1.45; color: var(--navy); margin-bottom: var(--a-1); max-width: none; }
.stimme footer { font-size: var(--t-klein); }
.auf-dunkel .stimme p { color: var(--weiss); }
.referenz h2 { font-size: var(--t-h3); font-weight: 600; margin-bottom: var(--a-1); }
.referenz__meta, .referenz h2, .referenz .stimme { width: 100%; }
.referenz__zahl {
  font-family: var(--schrift-titel);
  font-size: clamp(1.75rem, 1.5rem + 0.9vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--navy);
  margin-block: var(--a-3) var(--a-1);
}
.referenzen__hinweis { margin-top: var(--a-4); }

/* Über mich */
.ueber__raster {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--a-5) var(--a-6);
  align-items: end;
}
.ueber__bild img {
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 18%);
  mask-image: linear-gradient(to top, transparent 0%, #000 18%);
}
.ueber__text { padding-block: var(--a-5); }
.ueber__text .seitentitel { font-size: var(--t-h2); font-weight: 800; }
.ueber__wege { display: flex; flex-wrap: wrap; gap: var(--a-1) var(--a-4); margin-top: var(--a-4); }
.ueber__wege a { font-size: var(--t-text); }

/* Kontakt */
.kontakt__raster {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--a-5) var(--a-6);
  align-items: start;
}
.quiz { padding: var(--a-4); border-radius: var(--ecke); background: var(--grau); }
.quiz[hidden], .quiz [hidden] { display: none !important; }
.quiz__kopf { display: flex; align-items: flex-end; gap: var(--a-2); margin-bottom: var(--a-3); }
.quiz__balken { display: flex; align-items: flex-end; gap: 4px; height: 2rem; }
.quiz__balken i { display: block; width: 0.625rem; border-radius: 1px; background: #fff; box-shadow: inset 0 0 0 1px var(--slate); transition: background-color 0.2s; }
.quiz__balken i:nth-child(1) { height: 25%; }
.quiz__balken i:nth-child(2) { height: 50%; }
.quiz__balken i:nth-child(3) { height: 75%; }
.quiz__balken i:nth-child(4) { height: 100%; }
.quiz__balken i.aktiv { background: var(--blau); box-shadow: none; }
.quiz__stand { margin: 0; font-size: var(--t-klein); font-weight: 600; color: var(--navy); }
.quiz__schritt { margin: 0; padding: 0; border: 0; min-width: 0; }
.quiz__frage {
  display: block;
  padding: 0;
  margin-bottom: var(--a-3);
  font-family: var(--schrift-titel);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.25;
  color: var(--navy);
}
.quiz__frage:focus { outline: none; }
.quiz__wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-1); }
.quiz__wahl label {
  position: relative;
  display: flex; align-items: center;
  min-height: 4rem;
  padding: var(--a-1) var(--a-2);
  border: 2px solid var(--slate);
  border-radius: var(--ecke);
  background: var(--weiss);
  color: var(--navy);
  font-weight: 500;
  cursor: pointer;
}
.quiz__wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.quiz__wahl label:hover { border-color: var(--blau); }
.quiz__wahl label:has(input:checked) { border-color: var(--blau); box-shadow: inset 0 0 0 2px var(--blau); font-weight: 600; }
.quiz__wahl label:has(input:focus-visible) { outline: 3px solid var(--blau); outline-offset: 3px; }
.quiz__felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-2); }
.feld { display: grid; gap: 0.375rem; min-width: 0; }
.feld--breit { grid-column: 1 / -1; }
.feld label { color: var(--navy); font-weight: 600; }
.feld input, .feld textarea {
  width: 100%;
  min-height: 3.5rem;
  padding: 0.75rem var(--a-2);
  border: 2px solid var(--slate);
  border-radius: var(--ecke);
  background: var(--weiss);
  color: var(--navy);
  font: inherit;
}
.feld textarea { min-height: 6rem; resize: vertical; }
.quiz__vorschau-titel { margin: var(--a-3) 0 var(--a-1); font-weight: 600; color: var(--navy); }
.quiz__vorschau {
  margin: 0 0 var(--a-3);
  padding: var(--a-2);
  border-radius: var(--ecke);
  background: var(--weiss);
  color: var(--slate);
  font-family: var(--schrift-text);
  font-size: var(--t-klein);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.quiz__leiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-1) var(--a-3); margin-top: var(--a-3); }
.quiz__zurueck { padding: 0; border: 0; background: none; font-family: var(--schrift-text); cursor: pointer; }
.quiz__hinweis { margin: var(--a-1) 0 0; min-height: 1.6em; font-size: var(--t-klein); font-weight: 600; color: var(--navy); }
.quiz__info { margin: var(--a-2) 0 0; font-size: var(--t-klein); }
.quiz__ohne-js { margin: 0; }
.direkt { padding: var(--a-4); border-radius: var(--ecke); background: var(--grau); }
.direkt h2 { font-size: var(--t-h3); font-weight: 600; margin-bottom: var(--a-3); }
.direkt__wege { display: grid; gap: var(--a-2); }
.direkt__wege .knopf--rand { width: 100%; min-height: 3.5rem; font-size: var(--t-text); }
.direkt__wege a:not(.knopf) { font-weight: 600; color: var(--navy); overflow-wrap: anywhere; }

/* Rechtstexte und Sammelseite */
.recht__raster { max-width: 46rem; }
.recht h1 { font-size: var(--t-h2); margin-bottom: var(--a-4); }
.recht h2 { font-size: var(--t-h3); font-weight: 600; margin-block: var(--a-4) var(--a-1); }
.recht ul { list-style: disc; padding-left: 1.25em; margin-bottom: var(--a-2); }
.recht li { margin-bottom: 0.25rem; }
.recht a { color: var(--navy); text-decoration-color: var(--blau); text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.recht code { font-size: 0.95em; overflow-wrap: anywhere; }
.recht__stand { margin-top: var(--a-4); }

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

/* Schmaler Rechner: H1 schrumpft mit, damit sie neben dem Kopf bleibt */
@media (min-width: 1001px) and (max-width: 1300px) {
  :root { --t-h1: 5.2vw; }
}

/* Schmaler Rechner und Tablet */
@media (max-width: 1100px) {
  .kopf__nav { display: none; }
  .menue { display: block; }
  .hero__bild { right: -14vw; height: 82%; }
  .hero__unter { max-width: 26rem; }
  .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss__oben { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fuss__marke { grid-column: 1 / -1; }
  .referenz, .referenz--breit { grid-column: span 3; }
}

/* Bis 1000 px steht das Porträt oben und läuft in die weiße Fläche aus.
   Der Abstand richtet sich nach der Bildbreite, damit der Text nie auf dem Gesicht liegt. */
@media (max-width: 1000px) {
  /* 32,5rem: Kopfzeile und Textblock, 0,78: dort ist das Bild ausgelaufen */
  .hero { --bild-b: min(104vw, max(15rem, calc((100svh - 32.5rem) / 0.78))); align-items: end; }
  .hero__bild {
    top: 0; right: auto; bottom: auto; left: 50%;
    transform: translateX(-50%);
    width: var(--bild-b); height: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 92%);
    mask-image: linear-gradient(to bottom, #000 58%, transparent 92%);
  }
  .hero__inhalt { padding-block: calc(var(--bild-b) * 0.78) var(--a-4); }
  .hero__unter { max-width: 40rem; }
}

/* Handy */
@media (max-width: 760px) {
  :root { --kopf-h: 4.5rem; }
  .abschnitt { padding-block: var(--a-6); }
  .kopf__logo img { height: 2.25rem; }

  .handlung { gap: var(--a-3); }
  .knopf:not(.knopf--rand) { width: 100%; padding-inline: var(--a-2); }

  .beweis__raster, .problem__raster, .abschluss__raster,
  .seitenkopf__raster, .referenz-gross, .ueber__raster, .kontakt__raster {
    grid-template-columns: minmax(0, 1fr);
  }
  .leistungen__kopf { margin-bottom: var(--a-4); }
  .karten { grid-template-columns: minmax(0, 1fr); gap: var(--a-2); }
  .karte, .karte:nth-child(1), .karte:nth-child(2), .karte:nth-child(3) { min-height: 0; padding: var(--a-3); }
  .karte:nth-child(1) { margin-right: var(--a-5); }
  .karte:nth-child(2) { margin-right: var(--a-3); }
  .schritte { grid-template-columns: minmax(0, 1fr); gap: var(--a-3); }
  .schritte li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: var(--a-1); }
  .schritte li::before { grid-row: span 2; margin: 0; }
  .branche { grid-template-columns: minmax(0, 1fr); padding-block: var(--a-3); }
  .fuss__oben { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weiter { grid-template-columns: minmax(0, 1fr); }
  .quiz__wahl, .quiz__felder { grid-template-columns: minmax(0, 1fr); }
  .referenzen-liste { grid-template-columns: minmax(0, 1fr); }
  .referenz, .referenz--breit { grid-column: auto; }
  .referenz-gross, .fakten, .referenz, .direkt, .quiz, .weiter a { padding: var(--a-3); }
  .ueber__bild { max-width: 24rem; margin-inline: auto; }
  .ueber__text { padding-block: 0 var(--a-5); }
}