:root {
  --zb-dunkel: #1B3A4B;
  --zb-tief: #0F2433;
  --zb-mittel: #2D6A7F;
  --zb-akzent: #E07A5F;
  --zb-akzent-tief: #C4603E;
  --zb-akzent-hell: #F2A98E;
  --zb-hell: #F4F1EC;
  --zb-weiss: #FFFFFF;
  --zb-text: #1A2332;
  --zb-grau: #546070;
  --zb-rand: #D8D2C8;
  --zb-hervor: #ECE8E0;

  --schrift-kopf: Georgia, 'Times New Roman', 'Book Antiqua', serif;
  --schrift-text: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  --sz-xs: 0.75rem;
  --sz-sm: 0.875rem;
  --sz-basis: 1rem;
  --sz-md: 1.125rem;
  --sz-lg: 1.375rem;
  --sz-xl: 1.75rem;
  --sz-2xl: 2.25rem;
  --sz-3xl: 3rem;

  --lu-xs: 0.5rem;
  --lu-sm: 1rem;
  --lu-md: 1.5rem;
  --lu-lg: 2.5rem;
  --lu-xl: 4rem;
  --lu-2xl: 6rem;

  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --schatten-a: 0 2px 8px rgba(27, 58, 75, 0.08);
  --schatten-b: 0 4px 18px rgba(27, 58, 75, 0.14);

  --max-inhalt: 1160px;
  --max-text: 720px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--schrift-text);
  font-size: var(--sz-basis);
  color: var(--zb-text);
  background-color: var(--zb-hell);
  line-height: 1.72;
}

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

a {
  color: var(--zb-mittel);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--zb-dunkel);
}

a:focus-visible {
  outline: 2px solid var(--zb-akzent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

h1, h2, h3, h4 {
  font-family: var(--schrift-kopf);
  font-weight: normal;
  line-height: 1.25;
  color: var(--zb-dunkel);
}

h1 { font-size: var(--sz-3xl); }
h2 { font-size: var(--sz-2xl); }
h3 { font-size: var(--sz-xl); }
h4 { font-size: var(--sz-lg); }

p {
  margin-bottom: var(--lu-sm);
  max-width: var(--max-text);
}

p:last-child {
  margin-bottom: 0;
}

ul, ol {
  padding-left: var(--lu-md);
}

li {
  margin-bottom: var(--lu-xs);
}

.seite {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.huelle {
  width: 100%;
  max-width: var(--max-inhalt);
  margin: 0 auto;
  padding: 0 var(--lu-md);
}

.hauptinhalt {
  flex: 1;
}

.kopfnavigation {
  background-color: var(--zb-weiss);
  border-bottom: 1px solid var(--zb-rand);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  max-width: var(--max-inhalt);
  margin: 0 auto;
  padding: 0 var(--lu-md);
}

.nav-wortmarke {
  font-family: var(--schrift-kopf);
  font-size: var(--sz-lg);
  color: var(--zb-dunkel);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.nav-wortmarke:hover {
  color: var(--zb-mittel);
}

.nav-liste {
  list-style: none;
  display: flex;
  gap: var(--lu-lg);
  padding: 0;
  margin: 0;
}

.nav-glied a {
  font-size: var(--sz-sm);
  color: var(--zb-grau);
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.2s;
}

.nav-glied a:hover,
.nav-glied a[aria-current="page"] {
  color: var(--zb-dunkel);
}

.nav-glied a[aria-current="page"] {
  border-bottom: 2px solid var(--zb-akzent);
  padding-bottom: 2px;
}

.startbanner {
  background-color: var(--zb-dunkel);
  padding: var(--lu-2xl) 0;
  overflow: hidden;
}

.banner-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--lu-xl);
  align-items: center;
  max-width: var(--max-inhalt);
  margin: 0 auto;
  padding: 0 var(--lu-md);
}

.banner-text h1 {
  color: var(--zb-weiss);
  margin-bottom: var(--lu-md);
  font-size: clamp(var(--sz-2xl), 4vw, var(--sz-3xl));
}

.banner-untertitel {
  font-size: var(--sz-md);
  color: rgba(255,255,255,0.80);
  margin-bottom: var(--lu-lg);
  line-height: 1.65;
  max-width: var(--max-text);
}

.banner-aktionen {
  display: flex;
  gap: var(--lu-sm);
  flex-wrap: wrap;
}

.banner-grafik {
  display: flex;
  justify-content: center;
  align-items: center;
}

.knopf {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--schrift-text);
  font-size: var(--sz-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.knopf:focus-visible {
  outline: 2px solid var(--zb-akzent);
  outline-offset: 3px;
}

.knopf-haupt {
  background-color: var(--zb-akzent);
  color: var(--zb-weiss);
  border-color: var(--zb-akzent);
}

.knopf-haupt:hover {
  background-color: var(--zb-akzent-tief);
  border-color: var(--zb-akzent-tief);
  color: var(--zb-weiss);
}

.knopf-neben {
  background-color: transparent;
  color: var(--zb-weiss);
  border-color: rgba(255,255,255,0.45);
}

.knopf-neben:hover {
  border-color: var(--zb-weiss);
  background-color: rgba(255,255,255,0.09);
  color: var(--zb-weiss);
}

.knopf-umriss {
  background-color: transparent;
  color: var(--zb-dunkel);
  border-color: var(--zb-dunkel);
}

.knopf-umriss:hover {
  background-color: var(--zb-dunkel);
  color: var(--zb-weiss);
}

.einstieg-karten {
  background-color: var(--zb-hervor);
  padding: var(--lu-xl) 0;
}

.karten-kopf {
  margin-bottom: var(--lu-lg);
}

.karten-kopf h2 {
  margin-bottom: var(--lu-xs);
}

.karten-kopf p {
  color: var(--zb-grau);
  margin: 0;
}

.dreier-anordnung {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--lu-md);
}

.info-karte {
  background-color: var(--zb-weiss);
  border-radius: var(--radius-md);
  padding: var(--lu-lg);
  box-shadow: var(--schatten-a);
  border-top: 3px solid var(--zb-akzent);
}

.karte-kennung {
  font-family: var(--schrift-kopf);
  font-size: var(--sz-3xl);
  color: var(--zb-akzent);
  line-height: 1;
  margin-bottom: var(--lu-xs);
}

.info-karte h3 {
  font-size: var(--sz-md);
  margin-bottom: var(--lu-xs);
}

.info-karte p {
  font-size: var(--sz-sm);
  color: var(--zb-grau);
  max-width: none;
  margin-bottom: 0;
}

.split-bereich {
  padding: var(--lu-2xl) 0;
  background-color: var(--zb-weiss);
}

.split-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--lu-xl);
  align-items: center;
}

.split-raster.gespiegelt {
  direction: rtl;
}

.split-raster.gespiegelt > * {
  direction: ltr;
}

.split-textseite h2 {
  margin-bottom: var(--lu-sm);
}

.split-textseite p {
  color: var(--zb-grau);
  margin-bottom: var(--lu-sm);
}

.split-textseite .knopf {
  margin-top: var(--lu-xs);
}

.split-bildseite {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--schatten-b);
}

.eigenschaften-bereich {
  padding: var(--lu-2xl) 0;
  background-color: var(--zb-hell);
}

.eigenschaften-kopf {
  margin-bottom: var(--lu-lg);
}

.eigenschaften-kopf h2 {
  margin-bottom: var(--lu-xs);
}

.eigenschaften-kopf p {
  color: var(--zb-grau);
  max-width: 640px;
}

.eigenschaften-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--lu-sm) var(--lu-lg);
}

.eigenschaft {
  display: flex;
  gap: var(--lu-sm);
  align-items: flex-start;
  padding: var(--lu-sm) 0;
  border-bottom: 1px solid var(--zb-rand);
}

.eigenschaft-zeichen {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--zb-dunkel);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--zb-weiss);
  font-family: var(--schrift-kopf);
  font-size: var(--sz-sm);
}

.eigenschaft-text h4 {
  font-size: var(--sz-basis);
  margin-bottom: 2px;
}

.eigenschaft-text p {
  font-size: var(--sz-sm);
  color: var(--zb-grau);
  margin-bottom: 0;
  max-width: none;
}

.weiternavigation {
  background-color: var(--zb-dunkel);
  padding: var(--lu-xl) 0;
}

.weiternav-kopf {
  text-align: center;
  margin-bottom: var(--lu-lg);
}

.weiternav-kopf h2 {
  color: var(--zb-weiss);
}

.weiternav-kopf p {
  color: rgba(255,255,255,0.68);
  margin: var(--lu-xs) auto 0;
}

.kachel-reihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--lu-md);
}

.nav-kachel {
  background-color: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-md);
  padding: var(--lu-lg);
  text-decoration: none;
  color: var(--zb-weiss);
  transition: background-color 0.2s, border-color 0.2s;
  display: block;
}

.nav-kachel:hover {
  background-color: rgba(255,255,255,0.13);
  border-color: rgba(255,255,255,0.28);
  color: var(--zb-weiss);
}

.nav-kachel h3 {
  color: var(--zb-weiss);
  font-size: var(--sz-md);
  margin-bottom: var(--lu-xs);
}

.nav-kachel p {
  font-size: var(--sz-sm);
  color: rgba(255,255,255,0.65);
  max-width: none;
  margin-bottom: 0;
}

.kachel-weiter {
  margin-top: var(--lu-sm);
  color: var(--zb-akzent-hell);
  font-size: var(--sz-sm);
}

.seiten-vorspann {
  background-color: var(--zb-dunkel);
  padding: var(--lu-xl) 0 var(--lu-lg);
}

.seiten-vorspann h1 {
  color: var(--zb-weiss);
  margin-bottom: var(--lu-sm);
  font-size: clamp(var(--sz-xl), 3vw, var(--sz-2xl));
}

.vorspann-beschreibung {
  color: rgba(255,255,255,0.76);
  font-size: var(--sz-md);
  max-width: 680px;
  margin-bottom: 0;
}

.pfad-hinweis {
  font-size: var(--sz-xs);
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--lu-sm);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.erklaerung-block {
  padding: var(--lu-2xl) 0;
  background-color: var(--zb-weiss);
}

.erklaerung-raster {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--lu-xl);
  align-items: start;
}

.erklaerung-haupttext h2 {
  margin-bottom: var(--lu-sm);
}

.erklaerung-haupttext p {
  color: var(--zb-grau);
  margin-bottom: var(--lu-sm);
}

.randkasten {
  background-color: var(--zb-hell);
  border-left: 4px solid var(--zb-akzent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--lu-md) var(--lu-lg);
}

.randkasten h3 {
  font-size: var(--sz-md);
  margin-bottom: var(--lu-xs);
}

.randkasten p,
.randkasten li {
  font-size: var(--sz-sm);
  color: var(--zb-grau);
}

.randkasten ul {
  padding-left: var(--lu-sm);
  margin-bottom: 0;
}

.fragen-bereich {
  padding: var(--lu-2xl) 0;
  background-color: var(--zb-hell);
}

.fragen-kopf {
  margin-bottom: var(--lu-lg);
}

.fragen-kopf h2 {
  margin-bottom: var(--lu-xs);
}

.fragen-kopf p {
  color: var(--zb-grau);
  max-width: 640px;
}

.fragen-auflistung {
  list-style: none;
  padding: 0;
  max-width: 820px;
}

.frage-eintrag {
  border-bottom: 1px solid var(--zb-rand);
  padding: var(--lu-md) 0;
}

.frage-eintrag:first-child {
  padding-top: 0;
}

.frage-text {
  font-family: var(--schrift-kopf);
  font-size: var(--sz-md);
  color: var(--zb-dunkel);
  margin-bottom: var(--lu-xs);
}

.antwort-text {
  color: var(--zb-grau);
  font-size: var(--sz-sm);
  max-width: none;
  margin-bottom: 0;
}

.ablauf-bereich {
  padding: var(--lu-2xl) 0;
  background-color: var(--zb-weiss);
}

.ablauf-kopf {
  margin-bottom: var(--lu-xl);
}

.ablauf-kopf h2 {
  margin-bottom: var(--lu-xs);
}

.ablauf-kopf p {
  color: var(--zb-grau);
  max-width: 640px;
}

.schritte-list {
  position: relative;
  list-style: none;
  padding: 0;
  max-width: 760px;
}

.schritte-list::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 28px;
  bottom: 28px;
  width: 2px;
  background-color: var(--zb-rand);
}

.schritt {
  display: flex;
  gap: var(--lu-md);
  margin-bottom: var(--lu-lg);
  position: relative;
}

.schritt-zahl {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--zb-dunkel);
  color: var(--zb-weiss);
  font-family: var(--schrift-kopf);
  font-size: var(--sz-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.schritt-details {
  padding-top: 0.75rem;
}

.schritt-details h3 {
  font-size: var(--sz-lg);
  margin-bottom: var(--lu-xs);
}

.schritt-details p {
  color: var(--zb-grau);
  max-width: none;
  margin-bottom: 0;
}

.leistungs-raster-block {
  padding: var(--lu-2xl) 0;
  background-color: var(--zb-hell);
}

.leistungs-kopf {
  margin-bottom: var(--lu-xl);
}

.leistungs-kopf h2 {
  margin-bottom: var(--lu-xs);
}

.leistungs-kopf p {
  color: var(--zb-grau);
  max-width: 640px;
}

.zweier-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--lu-lg);
}

.leistungs-panel {
  background-color: var(--zb-weiss);
  border-radius: var(--radius-md);
  padding: var(--lu-lg);
  box-shadow: var(--schatten-a);
}

.leistungs-panel h3 {
  font-size: var(--sz-lg);
  margin-bottom: var(--lu-sm);
  padding-bottom: var(--lu-xs);
  border-bottom: 2px solid var(--zb-hervor);
}

.leistungs-panel p {
  color: var(--zb-grau);
  font-size: var(--sz-sm);
  max-width: none;
  margin-bottom: var(--lu-xs);
}

.kontakt-block {
  padding: var(--lu-2xl) 0;
  background-color: var(--zb-weiss);
}

.kontakt-raster {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--lu-xl);
  align-items: start;
}

.formular-kopf {
  margin-bottom: var(--lu-lg);
}

.formular-kopf h2 {
  margin-bottom: var(--lu-xs);
}

.formular-kopf p {
  color: var(--zb-grau);
}

.anfrage-formular {
  display: flex;
  flex-direction: column;
  gap: var(--lu-sm);
}

.feld-gruppe {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.feld-gruppe label {
  font-size: var(--sz-sm);
  font-weight: 600;
  color: var(--zb-text);
  letter-spacing: 0.02em;
}

.pflicht-stern {
  color: var(--zb-akzent);
  margin-left: 2px;
}

.eingabefeld {
  font-family: var(--schrift-text);
  font-size: var(--sz-basis);
  color: var(--zb-text);
  background-color: var(--zb-hell);
  border: 1px solid var(--zb-rand);
  border-radius: var(--radius-sm);
  padding: 0.625rem 0.875rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}

.eingabefeld:focus {
  outline: none;
  border-color: var(--zb-mittel);
  box-shadow: 0 0 0 3px rgba(45, 106, 127, 0.15);
}

.eingabefeld::placeholder {
  color: var(--zb-grau);
  opacity: 0.65;
}

textarea.eingabefeld {
  min-height: 140px;
  resize: vertical;
}

select.eingabefeld {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23546070' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.absende-knopf {
  font-family: var(--schrift-text);
  font-size: var(--sz-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--zb-weiss);
  background-color: var(--zb-dunkel);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.875rem 2rem;
  cursor: pointer;
  transition: background-color 0.2s;
  align-self: flex-start;
}

.absende-knopf:hover {
  background-color: var(--zb-tief);
}

.absende-knopf:focus-visible {
  outline: 2px solid var(--zb-akzent);
  outline-offset: 3px;
}

.kontakt-illustration {
  margin-bottom: var(--lu-md);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.kontakt-illustration img {
  width: 100%;
  height: auto;
}

.kontakt-infobox {
  background-color: var(--zb-hell);
  border-radius: var(--radius-md);
  padding: var(--lu-lg);
}

.kontakt-infobox h3 {
  font-size: var(--sz-lg);
  margin-bottom: var(--lu-md);
}

.kontakt-zeile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--lu-xs) 0;
  border-bottom: 1px solid var(--zb-rand);
  font-size: var(--sz-sm);
}

.kontakt-zeile:last-child {
  border-bottom: none;
}

.kontakt-bezeichnung {
  font-weight: 600;
  color: var(--zb-grau);
  text-transform: uppercase;
  font-size: var(--sz-xs);
  letter-spacing: 0.07em;
}

.kontakt-wert {
  color: var(--zb-text);
}

.kontakt-wert a {
  color: var(--zb-mittel);
  text-decoration: none;
}

.kontakt-wert a:hover {
  color: var(--zb-dunkel);
  text-decoration: underline;
}

.verfahrens-hinweis {
  margin-top: var(--lu-md);
  background-color: var(--zb-hervor);
  border-radius: var(--radius-sm);
  padding: var(--lu-sm) var(--lu-md);
  font-size: var(--sz-sm);
  color: var(--zb-grau);
}

.hinweisband {
  background-color: var(--zb-akzent);
  padding: var(--lu-lg) 0;
}

.hinweisband-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lu-md);
  flex-wrap: wrap;
  max-width: var(--max-inhalt);
  margin: 0 auto;
  padding: 0 var(--lu-md);
}

.hinweisband-text h3 {
  color: var(--zb-weiss);
  font-size: var(--sz-xl);
  margin-bottom: 4px;
}

.hinweisband-text p {
  color: rgba(255,255,255,0.84);
  font-size: var(--sz-sm);
  margin-bottom: 0;
}

.hinweisband-aktion .knopf {
  background-color: var(--zb-weiss);
  color: var(--zb-akzent);
  border-color: var(--zb-weiss);
  white-space: nowrap;
}

.hinweisband-aktion .knopf:hover {
  background-color: var(--zb-hell);
  border-color: var(--zb-hell);
}

.fusszeile {
  background-color: var(--zb-tief);
  color: rgba(255,255,255,0.72);
  padding: var(--lu-xl) 0 var(--lu-lg);
}

.fuss-aufbau {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--lu-xl);
  padding-bottom: var(--lu-lg);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: var(--lu-lg);
}

.fuss-marke {
  font-family: var(--schrift-kopf);
  font-size: var(--sz-xl);
  color: var(--zb-weiss);
  text-decoration: none;
  display: block;
  margin-bottom: var(--lu-sm);
}

.fuss-kurzbeschreibung {
  font-size: var(--sz-sm);
  color: rgba(255,255,255,0.52);
  max-width: 275px;
  margin-bottom: 0;
}

.fuss-rubrik-titel {
  font-size: var(--sz-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  margin-bottom: var(--lu-sm);
}

.fuss-nav-liste {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fuss-nav-liste li {
  margin-bottom: 6px;
}

.fuss-nav-liste a {
  font-size: var(--sz-sm);
  color: rgba(255,255,255,0.62);
  text-decoration: none;
  transition: color 0.2s;
}

.fuss-nav-liste a:hover {
  color: var(--zb-weiss);
}

.fuss-kontakt-info {
  font-size: var(--sz-sm);
  color: rgba(255,255,255,0.52);
  margin-bottom: 6px;
  line-height: 1.5;
}

.fuss-kontakt-info a {
  color: rgba(255,255,255,0.62);
  text-decoration: none;
  transition: color 0.2s;
}

.fuss-kontakt-info a:hover {
  color: var(--zb-weiss);
}

.fuss-abschluss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--lu-xs);
}

.fuss-urheberrecht {
  font-size: var(--sz-xs);
  color: rgba(255,255,255,0.38);
}

.fuss-rechtslinks {
  display: flex;
  gap: var(--lu-md);
}

.fuss-rechtslinks a {
  font-size: var(--sz-xs);
  color: rgba(255,255,255,0.38);
  text-decoration: none;
  transition: color 0.2s;
}

.fuss-rechtslinks a:hover {
  color: rgba(255,255,255,0.68);
}

.rechts-abschnitt {
  padding: var(--lu-2xl) 0;
  background-color: var(--zb-weiss);
}

.rechts-textkoerper {
  max-width: 800px;
}

.rechts-textkoerper h2 {
  font-size: var(--sz-xl);
  margin-top: var(--lu-lg);
  margin-bottom: var(--lu-sm);
  padding-top: var(--lu-sm);
  border-top: 1px solid var(--zb-rand);
}

.rechts-textkoerper h2:first-child {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}

.rechts-textkoerper h3 {
  font-size: var(--sz-md);
  margin-top: var(--lu-md);
  margin-bottom: var(--lu-xs);
}

.rechts-textkoerper p {
  color: var(--zb-grau);
  max-width: none;
  margin-bottom: var(--lu-sm);
}

.rechts-textkoerper ul,
.rechts-textkoerper ol {
  color: var(--zb-grau);
  margin-bottom: var(--lu-sm);
}

.querverweise {
  margin-top: var(--lu-xl);
  padding-top: var(--lu-md);
  border-top: 1px solid var(--zb-rand);
}

.querverweise p {
  font-size: var(--sz-sm);
  color: var(--zb-grau);
  margin-bottom: var(--lu-xs);
}

.querverweise-liste {
  list-style: none;
  padding: 0;
  display: flex;
  gap: var(--lu-sm);
  flex-wrap: wrap;
}

.querverweise-liste a {
  font-size: var(--sz-sm);
  color: var(--zb-mittel);
}

.details-streifen {
  padding: var(--lu-xl) 0;
}

.details-streifen.dunkel-bg {
  background-color: var(--zb-hell);
}

.details-streifen.hell-bg {
  background-color: var(--zb-weiss);
}

.merkmale-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sz-sm);
  margin-bottom: var(--lu-md);
}

.merkmale-tabelle th,
.merkmale-tabelle td {
  padding: var(--lu-xs) var(--lu-sm);
  border-bottom: 1px solid var(--zb-rand);
  text-align: left;
}

.merkmale-tabelle th {
  font-weight: 600;
  color: var(--zb-dunkel);
  background-color: var(--zb-hervor);
}

.merkmale-tabelle td {
  color: var(--zb-grau);
}

.extra-thema {
  padding: var(--lu-xl) 0;
}

.extra-thema.variante-a {
  background-color: var(--zb-weiss);
}

.extra-thema.variante-b {
  background-color: var(--zb-hell);
}

.term-liste {
  list-style: none;
  padding: 0;
  max-width: 820px;
}

.term-eintrag {
  padding: var(--lu-md) 0;
  border-bottom: 1px solid var(--zb-rand);
}

.term-bezeichnung {
  font-family: var(--schrift-kopf);
  font-size: var(--sz-md);
  color: var(--zb-dunkel);
  margin-bottom: var(--lu-xs);
}

.formular-hinweis {
  font-size: var(--sz-xs);
  color: var(--zb-grau);
  margin-top: 0.75rem;
}

.karte-titellink {
  color: inherit;
  text-decoration: none;
}

.karte-titellink:hover {
  color: var(--zb-mittel);
  text-decoration: underline;
}

.term-erklaerung {
  color: var(--zb-grau);
  font-size: var(--sz-sm);
  max-width: none;
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  :root {
    --sz-3xl: 2.5rem;
    --lu-2xl: 4rem;
  }

  .fuss-aufbau {
    grid-template-columns: 1fr 1fr;
    gap: var(--lu-lg);
  }

  .dreier-anordnung {
    grid-template-columns: 1fr 1fr;
  }

  .kachel-reihe {
    grid-template-columns: 1fr 1fr;
  }

  .erklaerung-raster {
    gap: var(--lu-lg);
  }

  .kontakt-raster {
    gap: var(--lu-lg);
  }

  .split-raster {
    gap: var(--lu-lg);
  }
}

@media (max-width: 768px) {
  :root {
    --sz-3xl: 2rem;
    --sz-2xl: 1.75rem;
    --lu-2xl: 3rem;
    --lu-xl: 2.5rem;
  }

  .nav-innen {
    flex-wrap: wrap;
    height: auto;
    padding: var(--lu-xs) var(--lu-md);
    gap: var(--lu-xs);
  }

  .nav-liste {
    gap: var(--lu-md);
  }

  .nav-glied a {
    font-size: 0.78rem;
  }

  .banner-raster {
    grid-template-columns: 1fr;
  }

  .banner-grafik {
    display: none;
  }

  .banner-aktionen {
    flex-direction: column;
    align-items: flex-start;
  }

  .dreier-anordnung {
    grid-template-columns: 1fr;
  }

  .split-raster {
    grid-template-columns: 1fr;
  }

  .split-raster.gespiegelt {
    direction: ltr;
  }

  .eigenschaften-raster {
    grid-template-columns: 1fr;
  }

  .kachel-reihe {
    grid-template-columns: 1fr;
  }

  .erklaerung-raster {
    grid-template-columns: 1fr;
  }

  .kontakt-raster {
    grid-template-columns: 1fr;
  }

  .zweier-panels {
    grid-template-columns: 1fr;
  }

  .fuss-aufbau {
    grid-template-columns: 1fr;
    gap: var(--lu-lg);
  }

  .fuss-abschluss {
    flex-direction: column;
    align-items: flex-start;
  }

  .hinweisband-innen {
    flex-direction: column;
    align-items: flex-start;
  }

  .schritte-list::before {
    display: none;
  }
}