/* ==========================================================================
   DW-MEDIA — Stylesheet
   Farbwelt aus dem Logo: Grün als einziger Akzent, die Punktfarben
   (Rot, Limette, Blau) erscheinen ausschließlich im Punktbogen-Motiv.
   Schriften liegen lokal, es wird keine externe Adresse aufgerufen.
   ========================================================================== */

@import url("fonts/schriften.css");

/* Versteckt heißt versteckt. Ohne diese Regel gewinnt jedes spätere
   .klasse{display:grid} gegen das hidden-Attribut und eine ausgeblendete
   Sektion wäre unbemerkt wieder sichtbar. */
[hidden] { display: none !important; }

/* --- Grundwerte ---------------------------------------------------------- */

:root {
  --gruen: #418e3c;
  --gruen-tief: #2f6b2b;
  --gruen-satt: #366f31;
  --gruen-hauch: #eef4ec;
  --gruen-rand: rgba(65, 142, 60, 0.22);

  /* Nur für den Punktbogen, nie als Flächen- oder Bedienfarbe */
  --punkt-rot: #eb1923;
  --punkt-limette: #b0d133;
  --punkt-blau: #00abdc;

  --tinte: #1c1f22;
  --tinte-weich: #3a4045;
  --grau: #5b636a;
  /* Dunkel genug für WCAG AA auf weißem Grund (4,9 zu 1). Ein helleres Grau
     riss die Nummern und Kleintexte unter die Grenze. */
  --grau-hell: #6a7278;

  --papier: #ffffff;
  --papier-warm: #f6f7f4;
  --papier-tief: #eef0ec;
  --dunkel: #16191c;
  --dunkel-karte: #21262a;
  --hell-auf-dunkel: #eef1ee;
  --grau-auf-dunkel: #9aa2a8;

  --rand: #e3e6e1;
  --rand-stark: #cfd4cd;

  --radius-karte: 14px;
  --radius-feld: 10px;
  --radius-knopf: 999px;

  --schatten: 0 1px 2px rgba(28, 31, 34, 0.04), 0 8px 24px rgba(28, 31, 34, 0.06);
  --schatten-hoch: 0 2px 4px rgba(28, 31, 34, 0.05), 0 18px 44px rgba(28, 31, 34, 0.1);

  --breite: 1180px;
  --kurve: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--grau);
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Lange Mailadressen und Links sprengen auf schmalen Bildschirmen sonst
     ihren Kasten. */
  overflow-wrap: break-word;
}

a[href^="mailto:"],
.kontaktkarte dd,
.fuss li {
  overflow-wrap: anywhere;
}

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

h1,
h2,
h3,
h4 {
  font-family: "Outfit", system-ui, sans-serif;
  color: var(--tinte);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.15rem, 1.35rem + 3.4vw, 3.55rem);
  font-weight: 700;
  line-height: 1.06;
}

h2 {
  font-size: clamp(1.7rem, 1.2rem + 2.1vw, 2.5rem);
  font-weight: 700;
}

h3 {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.4rem);
}

p {
  margin: 0 0 1.05em;
  max-width: 68ch;
}

a {
  color: var(--gruen-tief);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--gruen-satt);
}

strong {
  color: var(--tinte);
  font-weight: 700;
}

ul {
  padding-left: 1.15rem;
}

:focus-visible {
  outline: 3px solid var(--gruen-tief);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Hilfsklassen -------------------------------------------------------- */

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

.abschnitt {
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}

.abschnitt--eng {
  padding-block: clamp(2.75rem, 5vw, 4.5rem);
}

.warm {
  background: var(--papier-warm);
}

.dunkel {
  background: var(--dunkel);
  color: var(--grau-auf-dunkel);
}

.dunkel h1,
.dunkel h2,
.dunkel h3 {
  color: var(--hell-auf-dunkel);
}

.nur-fuer-screenreader {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sprung-link {
  position: absolute;
  left: 1rem;
  top: -60px;
  z-index: 200;
  background: var(--gruen-tief);
  color: #fff;
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius-feld);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s var(--kurve);
}

.sprung-link:focus {
  top: 1rem;
  color: #fff;
}

.vorspann {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gruen-tief);
  margin: 0 0 0.9rem;
}

.dunkel .vorspann {
  color: var(--punkt-limette);
}

/* Hervorhebung im Fließtext: fett und dunkler, bewusst nicht größer und nicht
   grün, damit sie nicht wie ein Link wirkt. */
.hervor {
  font-weight: 700;
  color: var(--tinte);
}

.blei {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  color: var(--tinte-weich);
  line-height: 1.6;
}

.dunkel .blei {
  color: var(--grau-auf-dunkel);
}

/* --- Punktbogen (das Markenmotiv aus dem Logo) --------------------------- */

.punktbogen {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 22px;
  margin-bottom: 1.6rem;
}

.punktbogen span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  opacity: 0.9;
}

/* Die Punkte springen beim Auftauchen nacheinander an und bleiben dann
   stehen. Das Logo-Motiv wird so zum Erkennungszeichen, ohne zu zappeln. */
.js .punktbogen span {
  opacity: 0;
  animation: punkt-pop 0.5s var(--kurve) forwards;
  animation-delay: calc(var(--n) * 90ms);
}

.punktbogen span:nth-child(1) {
  --n: 0;
}
.punktbogen span:nth-child(2) {
  --n: 1;
}
.punktbogen span:nth-child(3) {
  --n: 2;
}
.punktbogen span:nth-child(4) {
  --n: 3;
}
.punktbogen span:nth-child(5) {
  --n: 4;
}
.punktbogen span:nth-child(6) {
  --n: 5;
}

.punktbogen span:nth-child(1) {
  background: var(--punkt-rot);
  height: 6px;
  width: 6px;
}
.punktbogen span:nth-child(2) {
  background: var(--punkt-rot);
  height: 11px;
  width: 11px;
}
.punktbogen span:nth-child(3) {
  background: var(--punkt-limette);
  height: 14px;
  width: 14px;
}
.punktbogen span:nth-child(4) {
  background: var(--punkt-limette);
  height: 11px;
  width: 11px;
}
.punktbogen span:nth-child(5) {
  background: var(--punkt-blau);
  height: 9px;
  width: 9px;
}
.punktbogen span:nth-child(6) {
  background: var(--punkt-blau);
  height: 6px;
  width: 6px;
}

/* --- Bewegungsvokabular --------------------------------------------------
   Zurückhaltend gehalten: Dinge treten ein und rasten ein, nichts leuchtet
   und nichts läuft dauerhaft. Die Wirkung kommt aus der Anordnung.
   ------------------------------------------------------------------------- */

@keyframes punkt-pop {
  0% {
    transform: scale(0) translateY(5px);
    opacity: 0;
  }
  70% {
    transform: scale(1.18) translateY(0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 0.9;
  }
}

@keyframes hero-ein {
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- Knöpfe -------------------------------------------------------------- */

.knopf {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  white-space: nowrap;
  padding: 0.9rem 1.7rem;
  border-radius: var(--radius-knopf);
  border: 2px solid transparent;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s var(--kurve), box-shadow 0.25s var(--kurve),
    background 0.25s var(--kurve), border-color 0.25s var(--kurve), color 0.25s var(--kurve);
}

.knopf--voll {
  background: var(--gruen-tief);
  border-color: var(--gruen-tief);
  color: #fff;
  box-shadow: 0 6px 18px rgba(47, 107, 43, 0.2);
}

.knopf--voll:hover {
  background: var(--gruen-satt);
  border-color: var(--gruen-satt);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(47, 107, 43, 0.28);
}

.knopf--voll:active {
  transform: translateY(0) scale(0.985);
}

.knopf--rand {
  background: transparent;
  border-color: var(--rand-stark);
  color: var(--tinte);
}

.knopf--rand:hover {
  border-color: var(--gruen-tief);
  color: var(--gruen-tief);
  transform: translateY(-2px);
}

.dunkel .knopf--rand {
  border-color: rgba(238, 241, 238, 0.32);
  color: var(--hell-auf-dunkel);
}

.dunkel .knopf--rand:hover {
  border-color: var(--punkt-limette);
  color: var(--punkt-limette);
}

.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.9rem;
}

/* --- Kopfzeile ----------------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--rand);
}

.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 72px;
}

.kopf__logo {
  display: block;
  flex: none;
}

.kopf__logo img {
  height: 34px;
  width: auto;
}

.kopf__nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
}

.kopf__nav a {
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 0.97rem;
  font-weight: 500;
  color: var(--tinte-weich);
  text-decoration: none;
  position: relative;
  padding-block: 0.35rem;
  transition: color 0.2s var(--kurve);
}

.kopf__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--gruen);
  /* Über transform statt width, das kostet kein Neuberechnen des Layouts. */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--kurve);
}

.kopf__nav a:hover,
.kopf__nav a[aria-current="page"] {
  color: var(--tinte);
}

.kopf__nav a:hover::after,
.kopf__nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.kopf__nav .knopf {
  padding: 0.65rem 1.35rem;
  font-size: 0.92rem;
  color: #fff;
}

/* --- Aufklappbare Leistungsgruppe im Menü --------------------------------
   Der Name bleibt ein eigener Link zur Übersicht, das Aufklappen liegt auf
   einem getrennten Knopf. So funktioniert beides mit der Tastatur.
   ------------------------------------------------------------------------- */

.nav-gruppe {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-gruppe__schalter {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  color: var(--grau);
  cursor: pointer;
  border-radius: 5px;
  transition: transform 0.25s var(--kurve), color 0.2s var(--kurve);
}

.nav-gruppe__schalter:hover {
  color: var(--gruen-tief);
}

.nav-gruppe__schalter[aria-expanded="true"] {
  transform: rotate(180deg);
  color: var(--gruen-tief);
}

.nav-menue {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: -0.9rem;
  z-index: 60;
  width: 310px;
  display: grid;
  gap: 0.15rem;
  padding: 0.6rem;
  background: var(--papier);
  border: 1px solid var(--rand);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-hoch);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.22s var(--kurve), transform 0.22s var(--kurve),
    visibility 0.22s;
}

/* Unsichtbare Brücke, damit der Zeiger die Lücke queren kann. */
.nav-menue::before {
  content: "";
  position: absolute;
  top: -0.9rem;
  left: 0;
  right: 0;
  height: 0.9rem;
}

.nav-gruppe:hover .nav-menue,
.nav-gruppe:focus-within .nav-menue,
.nav-menue.offen {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-menue a {
  display: grid;
  gap: 0.05rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-feld);
  text-decoration: none;
  transition: background 0.2s var(--kurve);
}

.nav-menue a::after {
  display: none;
}

.nav-menue a:hover,
.nav-menue a:focus-visible {
  background: var(--papier-warm);
}

.nav-menue strong {
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--tinte);
}

.nav-menue span {
  font-size: 0.85rem;
  color: var(--grau);
}

.nav-menue__alle {
  margin-top: 0.35rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rand);
  border-radius: 0;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gruen-tief);
}

.nav-menue__alle:hover {
  background: none;
  text-decoration: underline;
}

.kopf__nav .knopf::after {
  display: none;
}

.kopf__schalter {
  display: none;
  background: none;
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius-feld);
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.kopf__schalter span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--tinte);
  position: relative;
  transition: background 0.2s var(--kurve);
}

.kopf__schalter span::before,
.kopf__schalter span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--tinte);
  transition: transform 0.25s var(--kurve);
}

.kopf__schalter span::before {
  top: -6px;
}
.kopf__schalter span::after {
  top: 6px;
}

.kopf__schalter[aria-expanded="true"] span {
  background: transparent;
}

.kopf__schalter[aria-expanded="true"] span::before {
  transform: translateY(6px) rotate(45deg);
}

.kopf__schalter[aria-expanded="true"] span::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  padding-top: clamp(2.5rem, 5vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
  overflow: hidden;
}

.hero__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(2rem, 4.5vw, 3.5rem);
  align-items: center;
}

/* Bewusst kleiner als die globale H1: Die Zeile mit drei Ortsnamen muss auf
   zwei Zeilen passen, sonst wächst der Hero über den ersten Bildschirm. */
.hero h1 {
  font-size: clamp(1.95rem, 1.15rem + 2.5vw, 2.75rem);
  line-height: 1.1;
  margin-bottom: 1.1rem;
  text-wrap: pretty;
}

.hero .blei {
  max-width: 46ch;
}

.hero__bild {
  position: relative;
  border-radius: var(--radius-karte);
  overflow: hidden;
  box-shadow: var(--schatten-hoch);
  aspect-ratio: 4 / 3;
  background: var(--papier-tief);
}

.hero__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Farbband aus den Logofarben als ruhiger Abschluss unter dem Bild. */
.hero__marke {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--punkt-rot) 0 40px,
    var(--punkt-limette) 40px 80px,
    var(--punkt-blau) 80px 120px
  );
  background-size: 120px 100%;
}

.hero__raster {
  position: relative;
}

/* Der Hero baut sich beim Laden gestaffelt auf. */
.js .hero__auftritt > * {
  opacity: 0;
  transform: translateY(18px);
  animation: hero-ein 0.75s var(--kurve) forwards;
  animation-delay: calc(120ms + var(--n) * 120ms);
}

.js .hero__bild {
  opacity: 0;
  transform: translateY(24px);
  animation: hero-ein 0.9s var(--kurve) 0.28s forwards;
}

@keyframes hero-ein {
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- Seitenkopf der Unterseiten ------------------------------------------ */

.seitenkopf {
  padding-top: clamp(2.5rem, 4.5vw, 4rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.seitenkopf h1 {
  max-width: 20ch;
}

.seitenkopf .blei {
  max-width: 56ch;
}

.sprungliste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
}

.sprungliste a {
  display: inline-block;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--tinte-weich);
  background: var(--papier-warm);
  border: 1px solid var(--rand);
  border-radius: var(--radius-knopf);
  padding: 0.45rem 1.05rem;
  text-decoration: none;
  transition: border-color 0.2s var(--kurve), color 0.2s var(--kurve),
    background 0.2s var(--kurve);
}

.sprungliste a:hover {
  border-color: var(--gruen-tief);
  color: var(--gruen-tief);
  background: var(--gruen-hauch);
}

/* --- Brotkrumen ----------------------------------------------------------- */

.brotkrumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
  font-size: 0.87rem;
  color: var(--grau);
}

.brotkrumen a {
  color: var(--grau);
  text-decoration: none;
}

.brotkrumen a:hover {
  color: var(--gruen-tief);
  text-decoration: underline;
}

.brotkrumen [aria-current="page"] {
  color: var(--tinte);
  font-weight: 600;
}

/* --- Anatomie einer Suchanzeige -------------------------------------------
   Nachbau, kein Screenshot. Jeder Baustein trägt links seine Beschriftung,
   damit sichtbar wird, woraus eine Anzeige besteht.
   ------------------------------------------------------------------------- */

.anzeige {
  margin: 0;
  background: var(--papier);
  border: 1px solid var(--rand);
  border-radius: var(--radius-karte);
  padding: 1.4rem 1.5rem 1.2rem;
  box-shadow: var(--schatten);
}

.anzeige__kopf {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.3rem;
  border-bottom: 1px solid var(--rand);
  font-size: 0.95rem;
  color: var(--tinte-weich);
}

.anzeige__karte {
  display: grid;
  gap: 0.85rem;
}

.anzeige__teil {
  position: relative;
  padding-left: 8.4rem;
}

/* Die Beschriftung sitzt links neben dem Baustein, auf einer Zeile. */
.anzeige__teil::before {
  content: attr(data-marke);
  position: absolute;
  left: 0;
  top: 0.22rem;
  width: 7.6rem;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grau-hell);
  text-align: right;
  white-space: nowrap;
}

.anzeige__teil::after {
  content: "";
  position: absolute;
  left: 7.95rem;
  top: 0.45rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rand-stark);
}

.anzeige__teil:first-child {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.anzeige__teil:first-child .rang__marke {
  background: var(--tinte);
  color: #fff;
}

.anzeige__url {
  font-size: 0.88rem;
  color: var(--grau);
}

.anzeige__titel {
  font-family: "Outfit", system-ui, sans-serif;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.22rem);
  font-weight: 600;
  color: #1a4fa8;
  line-height: 1.3;
}

.anzeige__text {
  margin: 0;
  font-size: 0.94rem;
  color: var(--tinte-weich);
  max-width: none;
}

.anzeige__zusatz {
  display: inline-block;
  margin-right: 0.4rem;
  font-size: 0.86rem;
  color: #1a4fa8;
  border-bottom: 1px solid rgba(26, 79, 168, 0.35);
}

.anzeige__fuss {
  margin: 1.3rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--rand);
  font-size: 0.82rem;
  color: var(--grau);
}

/* --- Verlaufskurve --------------------------------------------------------
   Zeigt das Verhalten von SEO gegenüber Anzeigen. Die Linien zeichnen sich
   beim Sichtbarwerden von links nach rechts.
   ------------------------------------------------------------------------- */

.verlauf {
  margin: 0;
  background: var(--papier);
  border: 1px solid var(--rand);
  border-radius: var(--radius-karte);
  padding: 1.4rem 1.5rem 1.2rem;
  box-shadow: var(--schatten);
}

.verlauf__kopf {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: 1.1rem;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid var(--rand);
  font-size: 0.92rem;
  color: var(--tinte-weich);
}

.verlauf__bild {
  width: 100%;
  height: auto;
}

.js .verlauf__linie {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}

/* Die gestrichelte Anzeigen-Linie braucht ihr Muster zurück, sobald
   gezeichnet ist. Deshalb läuft sie über eine eigene Animation. */
.js .verlauf.laeuft .verlauf__linie--seo {
  transition: stroke-dashoffset 2s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
  stroke-dashoffset: 0;
}

.js .verlauf.laeuft .verlauf__linie--ads {
  transition: stroke-dashoffset 1.1s ease-out;
  stroke-dashoffset: 0;
}

.verlauf__legende {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  font-size: 0.88rem;
  color: var(--grau);
}

.verlauf__legende li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.verlauf__marke {
  width: 22px;
  height: 3px;
  border-radius: 2px;
  flex: none;
}

.verlauf__marke--seo {
  background: var(--gruen-tief);
  height: 4px;
}

.verlauf__marke--ads {
  background: repeating-linear-gradient(
    90deg,
    var(--grau-hell) 0 6px,
    transparent 6px 11px
  );
}

/* --- KI-Antwort -----------------------------------------------------------
   Nachbau einer Antwort, wie KI-Dienste sie ausgeben. Die Zeilen laufen
   nacheinander ein, so wie eine Antwort geschrieben wird.
   ------------------------------------------------------------------------- */

.antwort {
  margin: 0;
  background: var(--papier);
  border: 1px solid var(--rand);
  border-radius: var(--radius-karte);
  padding: 1.4rem 1.5rem 1.2rem;
  box-shadow: var(--schatten);
}

.antwort__block {
  display: grid;
  gap: 0.9rem;
}

.antwort__zeile {
  margin: 0;
  font-size: 0.96rem;
  color: var(--tinte-weich);
  max-width: none;
}

.antwort__zeile--quelle {
  padding-top: 0.9rem;
  border-top: 1px solid var(--rand);
  font-size: 0.82rem;
  color: var(--grau);
}

.antwort__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.antwort__liste li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-feld);
  background: var(--papier-warm);
  font-size: 0.95rem;
  color: var(--tinte-weich);
}

.antwort__punkt {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rand-stark);
  flex: none;
}

.antwort__treffer {
  background: var(--gruen-hauch);
  border: 1px solid var(--gruen-rand);
  color: var(--tinte);
}

.antwort__treffer .antwort__punkt {
  background: var(--gruen);
}

.js .antwort__block > *,
.js .antwort__liste li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--kurve), transform 0.5s var(--kurve);
  transition-delay: calc(var(--n) * 220ms);
}

.js .antwort.laeuft .antwort__block > *,
.js .antwort.laeuft .antwort__liste li {
  opacity: 1;
  transform: none;
}

/* --- Werke (Print) --------------------------------------------------------
   Sechs Gestaltungsarten. Feine Linien statt Kästen, damit die Liste ruhig
   bleibt und nicht wie eine Kachelwand wirkt.
   ------------------------------------------------------------------------- */

.werke {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 2.6rem;
  border-top: 1px solid var(--rand);
}

.werk {
  padding: 1.7rem 1.6rem 1.7rem 0;
  border-bottom: 1px solid var(--rand);
  border-right: 1px solid var(--rand);
}

.werk:nth-child(3n) {
  border-right: none;
  padding-right: 0;
}

.werk:not(:nth-child(3n)) {
  padding-right: 1.6rem;
}

.werk:not(:nth-child(3n + 1)) {
  padding-left: 1.6rem;
}

.werk h3 {
  margin-bottom: 0.5rem;
}

.werk p {
  margin: 0;
  font-size: 0.96rem;
}

/* --- Umkreis --------------------------------------------------------------
   Drei Ringe um den Betrieb, die beim Sichtbarwerden nach außen aufgehen.
   Zeigt, dass Meta-Anzeigen auf ein Einzugsgebiet begrenzt werden.
   ------------------------------------------------------------------------- */

.umkreis {
  margin: 0;
  background: var(--papier);
  border: 1px solid var(--rand);
  border-radius: var(--radius-karte);
  padding: 1.4rem 1.5rem 1.2rem;
  box-shadow: var(--schatten);
}

.umkreis__feld {
  position: relative;
  aspect-ratio: 1;
  max-width: 340px;
  margin: 0.6rem auto 0.4rem;
  display: grid;
  place-items: center;
}

.umkreis__ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid var(--gruen-rand);
  background: rgba(65, 142, 60, 0.05);
}

.umkreis__ring--weit {
  inset: 0;
  border-style: dashed;
  border-color: var(--rand-stark);
  background: transparent;
}

.umkreis__ring--mittel {
  inset: 18%;
}

.umkreis__ring--nah {
  inset: 34%;
  background: rgba(65, 142, 60, 0.12);
  border-color: var(--gruen);
}

.js .umkreis__ring {
  transform: scale(0.4);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.8s var(--kurve);
  transition-delay: calc(var(--n) * 180ms);
}

.js .umkreis.laeuft .umkreis__ring {
  transform: none;
  opacity: 1;
}

.umkreis__mitte {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 0.55rem 0.95rem;
  border-radius: var(--radius-knopf);
  background: var(--gruen-tief);
  color: #fff;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(47, 107, 43, 0.28);
}

/* Die globale strong-Regel färbt sonst dunkel auf die grüne Fläche. */
.umkreis__mitte strong {
  color: inherit;
  font-weight: inherit;
}

.umkreis__ort {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-knopf);
  background: var(--papier);
  border: 1px solid var(--rand);
  font-size: 0.8rem;
  color: var(--tinte-weich);
  white-space: nowrap;
}

/* --- Handy-Schema ---------------------------------------------------------
   Zeigt den Aufbau einer Seite auf dem Handy, ohne einen Screenshot zu
   fälschen: Nur Flächen, dazu die Erklärung daneben.
   ------------------------------------------------------------------------- */

.geraet {
  margin: 0;
  display: grid;
  gap: 1.6rem;
  justify-items: center;
}

.geraet__rahmen {
  width: min(268px, 100%);
  border: 10px solid var(--tinte);
  border-radius: 30px;
  background: var(--papier);
  padding: 0 0 0.9rem;
  box-shadow: var(--schatten-hoch);
  overflow: hidden;
}

.geraet__leiste {
  height: 26px;
  display: grid;
  place-items: center;
  background: var(--tinte);
}

.geraet__leiste span {
  width: 74px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.35);
}

.geraet__inhalt {
  display: grid;
  gap: 0.6rem;
  padding: 1rem 0.95rem 0;
}

.geraet__zeile {
  height: 9px;
  width: var(--b, 100%);
  border-radius: 5px;
  background: var(--papier-tief);
}

.geraet__zeile--titel {
  height: 15px;
  width: 70%;
  background: var(--rand-stark);
}

.geraet__knopf {
  margin: 0.35rem 0;
  padding: 0.62rem 0.9rem;
  border-radius: var(--radius-knopf);
  background: var(--gruen-tief);
  color: #fff;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
}

.geraet__bild {
  height: 78px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--papier-tief), var(--rand-stark));
}

.geraet__punkte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.8rem;
  max-width: 34ch;
}

.geraet__punkte li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.95rem;
  color: var(--grau);
}

.geraet__punkte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gruen);
}

.geraet__punkte strong {
  color: var(--tinte);
}

/* --- Leistungsblöcke ----------------------------------------------------- */

.leistung__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
  margin-bottom: 2.2rem;
}

.leistung__kopf h2 {
  margin-bottom: 0;
  max-width: 18ch;
}

.leistung__kopf .blei {
  margin-bottom: 0;
}

.merkmale {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem clamp(1.8rem, 4vw, 3.5rem);
  margin-top: 1.9rem;
}

.merkmale .punkte {
  margin-top: 0;
}

.einordnung {
  margin-top: 1.9rem;
  padding: 1rem 1.3rem;
  background: var(--gruen-hauch);
  border: 1px solid var(--gruen-rand);
  border-radius: var(--radius-feld);
  font-size: 0.98rem;
  color: var(--tinte-weich);
  max-width: 62ch;
}

.warm .einordnung {
  background: var(--papier);
}

.hinweiskarte {
  background: var(--gruen-hauch);
  border: 1px solid var(--gruen-rand);
  border-radius: var(--radius-karte);
  padding: clamp(2rem, 4.5vw, 3.2rem);
}

.hinweiskarte h2 {
  max-width: 22ch;
}

.hinweiskarte .einordnung {
  background: var(--papier);
  margin-bottom: 0;
}

/* --- Laufbänder ----------------------------------------------------------
   Der Inhalt steht zweimal im Quelltext. Das Band verschiebt sich um genau
   die halbe Breite, dadurch entsteht ein nahtloser Umlauf ohne Sprung.
   ------------------------------------------------------------------------- */

.laufband {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--rand);
  background: var(--papier);
  padding-block: 1.05rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.laufband--dunkel {
  background: var(--dunkel);
  border-color: rgba(238, 241, 238, 0.12);
}

.laufband__spur {
  display: flex;
  width: max-content;
  animation: band 38s linear infinite;
}

.laufband--rueck .laufband__spur {
  animation-direction: reverse;
  animation-duration: 46s;
}

.laufband:hover .laufband__spur {
  animation-play-state: paused;
}

@keyframes band {
  to {
    transform: translateX(-50%);
  }
}

.laufband__gruppe {
  display: flex;
  align-items: center;
  flex: none;
}

.laufband__wort {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  padding-inline: 1.6rem;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tinte);
  white-space: nowrap;
}

.laufband--dunkel .laufband__wort {
  color: var(--hell-auf-dunkel);
}

.laufband__wort::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--rand-stark);
}

.laufband__wort:nth-child(3n + 1)::after {
  background: var(--punkt-rot);
}
.laufband__wort:nth-child(3n + 2)::after {
  background: var(--punkt-limette);
}
.laufband__wort:nth-child(3n)::after {
  background: var(--punkt-blau);
}

/* --- Branchen ------------------------------------------------------------ */

.branchen {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2.4rem;
}

.branchen .laufband {
  border: none;
  background: transparent;
  padding-block: 0;
}

.branche {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
  margin-inline: 0.38rem;
  padding: 0.62rem 1.25rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius-knopf);
  background: var(--papier);
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 0.97rem;
  font-weight: 500;
  color: var(--tinte-weich);
  white-space: nowrap;
}

.branche::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gruen);
  flex: none;
}

/* --- Partnerlogos --------------------------------------------------------- */

.partner {
  display: flex;
  align-items: center;
  gap: 3rem;
  flex: none;
  padding-inline: 1.5rem;
}

.partner__titel {
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--grau-hell);
  text-align: center;
  margin: 0 auto 1.6rem;
  max-width: none;
}

.partner__hinweis {
  margin-top: 1.6rem;
}

.laufband--offen {
  border: none;
  background: transparent;
  padding-block: 0.4rem;
}

.partner__platz {
  width: 148px;
  height: 58px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px dashed var(--rand-stark);
  border-radius: 10px;
  background: var(--papier);
  color: var(--grau-hell);
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Echte Logos später: Bild statt Platzhalter, dann greift diese Regel. */
.partner img {
  max-height: 44px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.3s var(--kurve), opacity 0.3s var(--kurve);
}

.partner img:hover {
  filter: grayscale(0);
  opacity: 1;
}

/* --- Leistungen als Liste -------------------------------------------------
   Ersetzt die frühere Kachelwand: eine Zeile je Leistung, klare Rangfolge
   durch Nummer und Größe statt sechs gleich aussehender Kästen.
   ------------------------------------------------------------------------- */

.listenkopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
}

.listenkopf h2 {
  margin-bottom: 0;
}

.listenkopf .blei {
  margin-bottom: 0;
}

.leistungsliste {
  list-style: none;
  margin: 2.8rem 0 0;
  padding: 0;
  border-top: 1px solid var(--rand);
  counter-reset: leistung;
}

.leistungsliste__eintrag {
  border-bottom: 1px solid var(--rand);
}

.leistungsliste__eintrag a {
  display: grid;
  grid-template-columns: 3.2rem 2.4rem minmax(0, 0.78fr) minmax(0, 1.35fr) 2rem;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.8rem);
  padding: 1.45rem 0.6rem 1.45rem 0.4rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.32s var(--kurve);
}

/* Kein Einrücken über padding: Das würde bei jedem Überfahren das Raster neu
   berechnen. Hintergrund, Nummer, Symbol und Pfeil tragen den Hover bereits. */
.leistungsliste__eintrag a:hover,
.leistungsliste__eintrag a:focus-visible {
  background: var(--papier-warm);
}

.warm .leistungsliste__eintrag a:hover,
.warm .leistungsliste__eintrag a:focus-visible {
  background: var(--papier);
}

.leistungsliste__nr {
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--grau-hell);
  transition: color 0.32s var(--kurve);
}

.leistungsliste__eintrag a:hover .leistungsliste__nr {
  color: var(--gruen-tief);
}

.leistungsliste__ikon {
  display: grid;
  place-items: center;
}

.leistungsliste__ikon svg {
  width: 26px;
  height: 26px;
  fill: var(--gruen-tief);
  transition: transform 0.32s var(--kurve);
}

.leistungsliste__eintrag a:hover .leistungsliste__ikon svg {
  transform: scale(1.1);
}

.leistungsliste__titel {
  font-family: "Outfit", system-ui, sans-serif;
  font-size: clamp(1.18rem, 1rem + 0.7vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--tinte);
}

.leistungsliste__text {
  font-size: 0.99rem;
  color: var(--grau);
}

.leistungsliste__pfeil {
  display: grid;
  place-items: center;
  color: var(--grau-hell);
  transition: transform 0.32s var(--kurve), color 0.32s var(--kurve);
}

.leistungsliste__eintrag a:hover .leistungsliste__pfeil {
  transform: translateX(5px);
  color: var(--gruen-tief);
}

/* --- Ranking-Aufstieg -----------------------------------------------------
   Zeigt, was die Arbeit bewirkt: Der grüne Eintrag wandert von Platz zehn
   nach oben, die übrigen rücken nach.
   ------------------------------------------------------------------------- */

.rang__raster {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.rang {
  margin: 0;
  background: var(--papier);
  border: 1px solid var(--rand);
  border-radius: var(--radius-karte);
  padding: 1.5rem 1.6rem 1.3rem;
  box-shadow: var(--schatten);
}

.rang__kopf {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--rand);
  font-size: 0.95rem;
  color: var(--tinte-weich);
}

.rang__lupe {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--papier-warm);
}

.rang__lupe svg {
  width: 15px;
  height: 15px;
  fill: var(--grau);
}

.rang__liste {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 0.9rem;
}

.rang__nummern {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-rows: 42px;
  align-items: center;
}

.rang__nummern li {
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--grau-hell);
  text-align: right;
}

.rang__nummern li:first-child {
  color: var(--gruen-tief);
}

.rang__feld {
  position: relative;
  height: 420px;
}

.rang__zeile {
  position: absolute;
  left: 0;
  top: 0;
  height: 32px;
  width: var(--breite, 70%);
  border-radius: 7px;
  background: var(--papier-tief);
  transform: translateY(calc(var(--von) * 42px + 5px));
  transition: transform 1.15s cubic-bezier(0.65, 0, 0.35, 1);
}

.rang.laeuft .rang__zeile {
  transform: translateY(calc(var(--nach) * 42px + 5px));
}

.rang__zeile--wir {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-inline: 0.85rem;
  background: var(--gruen-tief);
  color: #fff;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 0.94rem;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(47, 107, 43, 0.24);
  transition: transform 1.15s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: 0.1s;
}

.rang__zeile--wir svg {
  width: 17px;
  height: 17px;
  fill: #fff;
  flex: none;
}

/* Kennzeichnung, wie Google sie über bezahlten Treffern zeigt.
   Dunkel abgesetzt statt aufgehellt: Weiß auf einer aufgehellten Grünfläche
   kam nur auf 3,96 zu 1 und lag damit unter der Grenze für Kleintext. */
.rang__marke {
  flex: none;
  padding: 0.16rem 0.5rem;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.28);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rang__fuss {
  margin: 1.2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--rand);
  font-size: 0.83rem;
  color: var(--grau);
}

/* --- Zahlenband ---------------------------------------------------------- */

.zahlen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2.8rem;
  border-top: 1px solid rgba(238, 241, 238, 0.14);
  padding-top: 2.4rem;
}

.zahl__wert {
  font-family: "Outfit", system-ui, sans-serif;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem);
  font-weight: 700;
  color: var(--hell-auf-dunkel);
  line-height: 1;
  letter-spacing: -0.03em;
}

.zahl__wert em {
  font-style: normal;
  color: var(--punkt-limette);
}

.zahl__text {
  margin: 0.7rem 0 0;
  font-size: 0.95rem;
  color: var(--grau-auf-dunkel);
  max-width: 24ch;
}

.fussnote {
  margin-top: 2.2rem;
  font-size: 0.86rem;
  color: var(--grau-auf-dunkel);
  max-width: 62ch;
}

/* --- Ablauf (Zeitleiste) ------------------------------------------------- */

/* --- Zeitleiste, senkrecht mit Bildern ------------------------------------
   Jeder Schritt ist eine Karte mit Text und Bild. Die grüne Linie wächst
   stufenweise mit, sobald ein Schritt ins Bild kommt.
   ------------------------------------------------------------------------- */

.zeitleiste {
  position: relative;
  max-width: 940px;
  margin: 3rem 0 0;
}

.zl-linie {
  position: absolute;
  left: 27px;
  top: 34px;
  width: 2px;
  height: calc(100% - 68px);
  background: var(--rand-stark);
}

/* Wächst über transform statt über die Höhe, sonst rechnet der Browser bei
   jedem Schritt das Layout der Zeitleiste neu. Den Wert setzt skript.js direkt
   als transform: Über eine CSS-Variable kann die Transition nicht überblenden,
   weil nicht registrierte Variablen für sie undurchsichtig sind. */
.zl-fortschritt {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--gruen);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.schritt {
  position: relative;
  padding-left: 86px;
  margin-bottom: 1.6rem;
}

.schritt:last-child {
  margin-bottom: 0;
}

.schritt__punkt {
  position: absolute;
  left: 0;
  top: 8px;
  width: 56px;
  height: 56px;
  z-index: 2;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--papier);
  border: 2px solid var(--rand-stark);
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--grau);
  transition: border-color 0.5s var(--kurve), color 0.5s var(--kurve),
    background 0.5s var(--kurve), transform 0.5s var(--kurve);
}

.warm .schritt__punkt {
  background: var(--papier-warm);
}

.schritt.sichtbar .schritt__punkt {
  border-color: var(--gruen);
  color: var(--gruen-tief);
}

.schritt__punkt--voll {
  background: var(--gruen-tief);
  border-color: var(--gruen-tief);
  color: #fff;
}

.schritt.sichtbar .schritt__punkt--voll,
.warm .schritt__punkt--voll {
  background: var(--gruen-tief);
  border-color: var(--gruen-tief);
  color: #fff;
}

.schritt:hover .schritt__punkt {
  transform: scale(1.06);
}

.schritt__inhalt {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 1.8rem;
  align-items: center;
  background: var(--papier);
  border: 1px solid var(--rand);
  border-radius: var(--radius-karte);
  padding: 1.7rem 1.8rem;
  transition: transform 0.4s var(--kurve), box-shadow 0.4s var(--kurve),
    border-color 0.4s var(--kurve);
}

.schritt:hover .schritt__inhalt {
  transform: translateY(-4px);
  box-shadow: var(--schatten);
  border-color: var(--gruen-rand);
}

.schritt--hervor .schritt__inhalt {
  border-color: var(--gruen);
  background: linear-gradient(180deg, var(--gruen-hauch) 0%, var(--papier) 100%);
}

.schritt__text h3 {
  margin-bottom: 0.5rem;
}

.schritt__text p {
  margin: 0;
  font-size: 0.96rem;
}

.schritt__marke {
  display: inline-block;
  margin-bottom: 0.6rem;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-knopf);
  background: var(--gruen-tief);
  color: #fff;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.schritt__bild {
  border-radius: var(--radius-feld);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--papier-tief);
}

.schritt__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.schritt:hover .schritt__bild img {
  transform: scale(1.05);
}

/* --- Fallbeispiel --------------------------------------------------------- */

.fall {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  background: var(--papier-warm);
  border: 1px solid var(--rand);
  border-radius: var(--radius-karte);
  padding: clamp(1.8rem, 4vw, 3.2rem);
}

.fall__text h2 {
  margin-bottom: 1rem;
}

.fall__hinweis {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rand-stark);
  font-size: 0.87rem;
  color: var(--grau);
  margin-bottom: 0;
}

.konto {
  margin: 0;
  background: var(--papier);
  border: 1px solid var(--rand);
  border-radius: var(--radius-karte);
  padding: 1.4rem 1.5rem 1.2rem;
  box-shadow: var(--schatten);
}

.konto__kopf {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.9rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--rand);
  font-size: 0.88rem;
  color: var(--grau);
}

.konto__punkte {
  display: flex;
  gap: 5px;
  flex: none;
}

.konto__punkte i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.konto__punkte i:nth-child(1) {
  background: var(--punkt-rot);
}
.konto__punkte i:nth-child(2) {
  background: var(--punkt-limette);
}
.konto__punkte i:nth-child(3) {
  background: var(--punkt-blau);
}

.konto__zeilen {
  display: grid;
  gap: 0.75rem;
}

.konto__zeile {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr) 5.2rem;
  gap: 0.9rem;
  align-items: center;
}

.konto__label {
  font-size: 0.88rem;
  color: var(--grau);
}

.konto__balken {
  height: 9px;
  border-radius: 5px;
  background: var(--papier-tief);
  position: relative;
  overflow: hidden;
}

.konto__balken::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--anteil, 50%);
  border-radius: 5px;
  background: var(--rand-stark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.konto.laeuft .konto__balken::after {
  transform: scaleX(1);
}

.konto__zeile--stark .konto__balken::after {
  background: var(--gruen);
}

.konto__zeile:nth-child(2) .konto__balken::after {
  transition-delay: 0.1s;
}
.konto__zeile:nth-child(3) .konto__balken::after {
  transition-delay: 0.2s;
}
.konto__zeile:nth-child(4) .konto__balken::after {
  transition-delay: 0.3s;
}
.konto__zeile:nth-child(5) .konto__balken::after {
  transition-delay: 0.4s;
}
.konto__zeile:nth-child(6) .konto__balken::after {
  transition-delay: 0.5s;
}

.konto__wert {
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--tinte);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.konto__zeile--stark .konto__wert {
  color: var(--gruen-tief);
}

.konto__zeile--stark .konto__label {
  color: var(--tinte-weich);
  font-weight: 600;
}

.konto__fuss {
  margin: 1.2rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rand);
  font-size: 0.8rem;
  color: var(--grau);
}

/* --- Weg zur Anfrage ------------------------------------------------------
   Vier Stufen, die nacheinander einlaufen. Bewusst ohne Zahlen: Es zeigt das
   Prinzip, nicht behauptete Ergebnisse.
   ------------------------------------------------------------------------- */

.weg__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.weg {
  margin: 0;
  display: grid;
  gap: 0.7rem;
}

.weg__stufe {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  /* Jede Stufe ist etwas schmaler als die vorige: der Trichter. */
  width: calc(100% - var(--n) * 5%);
}

.js .weg__stufe {
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.6s var(--kurve), transform 0.6s var(--kurve);
  transition-delay: calc(var(--n) * 160ms);
}

.js .weg.laeuft .weg__stufe {
  opacity: 1;
  transform: none;
}

.weg__nr {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--rand-stark);
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--grau);
}

.weg__balken {
  display: grid;
  gap: 0.1rem;
  padding: 0.85rem 1.15rem;
  border-radius: var(--radius-feld);
  background: var(--papier-warm);
  border: 1px solid var(--rand);
}

.weg__balken strong {
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--tinte);
}

.weg__balken em {
  font-style: normal;
  font-size: 0.89rem;
  color: var(--grau);
}

.weg__stufe--ziel .weg__nr {
  background: var(--gruen-tief);
  border-color: var(--gruen-tief);
  color: #fff;
}

.weg__stufe--ziel .weg__balken {
  background: var(--gruen-hauch);
  border-color: var(--gruen);
}

.weg__stufe--ziel .weg__balken strong {
  color: var(--gruen-satt);
}

.weg__fuss {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--grau);
}

/* --- Zweispalter (Bild und Text) ----------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.split--gedreht .split__bild {
  order: 2;
}

.split__bild {
  border-radius: var(--radius-karte);
  overflow: hidden;
  box-shadow: var(--schatten);
  aspect-ratio: 4 / 3;
  background: var(--papier-tief);
}

.split__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Ortsliste ----------------------------------------------------------- */

.orte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}

.orte li {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--tinte-weich);
  background: var(--papier);
  border: 1px solid var(--rand);
  border-radius: var(--radius-knopf);
  padding: 0.4rem 0.95rem;
  cursor: default;
  transition: transform 0.28s var(--kurve), border-color 0.28s var(--kurve),
    color 0.28s var(--kurve), box-shadow 0.28s var(--kurve);
}

.orte li:hover {
  transform: translateY(-3px);
  border-color: var(--gruen);
  color: var(--gruen-tief);
  box-shadow: 0 6px 16px rgba(47, 107, 43, 0.16);
}

/* Die Orte tauchen nacheinander auf, sobald der Abschnitt im Bild ist. */
.js .orte.zeigt li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--kurve), transform 0.5s var(--kurve);
  transition-delay: calc(var(--n) * 55ms);
}

.js .orte.zeigt.da li {
  opacity: 1;
  transform: none;
}

/* --- Vorteilsliste ------------------------------------------------------- */

.punkte {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 0;
  display: grid;
  gap: 1.1rem;
}

.punkte li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0.85rem;
  align-items: start;
  font-size: 1rem;
}

.punkte li::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--gruen-hauch);
  border: 2px solid var(--gruen);
  box-shadow: inset 0 0 0 3px var(--papier);
}

.dunkel .punkte li::before {
  background: transparent;
  border-color: var(--punkt-limette);
  box-shadow: inset 0 0 0 3px var(--dunkel);
}

/* --- Aufklapper (Fragen und Antworten) ----------------------------------- */

.fragen {
  margin-top: 2.4rem;
  border-top: 1px solid var(--rand);
  max-width: 820px;
}

.frage {
  border-bottom: 1px solid var(--rand);
}

.frage summary {
  cursor: pointer;
  list-style: none;
  padding: 1.25rem 2.5rem 1.25rem 0;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--tinte);
  position: relative;
  transition: color 0.2s var(--kurve);
}

.frage summary::-webkit-details-marker {
  display: none;
}

.frage summary:hover {
  color: var(--gruen-tief);
}

.frage summary::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--gruen-tief);
  border-bottom: 2px solid var(--gruen-tief);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s var(--kurve);
}

.frage[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
}

.frage__inhalt {
  padding-bottom: 1.4rem;
}

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

/* --- Abschluss-Aufruf ---------------------------------------------------- */

.aufruf {
  background: var(--gruen-tief);
  border-radius: var(--radius-karte);
  padding: clamp(2.4rem, 5vw, 3.6rem);
  color: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: 2rem;
  align-items: center;
}

.aufruf h2 {
  color: #fff;
  margin-bottom: 0.6rem;
}

.aufruf p {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  max-width: 52ch;
}

.aufruf .knopf {
  background: #fff;
  border-color: #fff;
  color: var(--gruen-satt);
  box-shadow: none;
}

.aufruf .knopf:hover {
  background: var(--gruen-hauch);
  border-color: var(--gruen-hauch);
  color: var(--gruen-satt);
  transform: translateY(-2px);
}

/* --- Formular ------------------------------------------------------------ */

.formular {
  display: grid;
  gap: 1.15rem;
}

.feld {
  display: grid;
  gap: 0.45rem;
}

.feld label {
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--tinte);
}

.feld input,
.feld textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--tinte);
  background: var(--papier);
  border: 1.5px solid var(--rand-stark);
  border-radius: var(--radius-feld);
  padding: 0.8rem 0.95rem;
  width: 100%;
  transition: border-color 0.2s var(--kurve), box-shadow 0.2s var(--kurve);
}

.feld input::placeholder,
.feld textarea::placeholder {
  color: #7b838a;
}

.feld input:focus,
.feld textarea:focus {
  outline: none;
  border-color: var(--gruen-tief);
  box-shadow: 0 0 0 3px rgba(47, 107, 43, 0.15);
}

.feld textarea {
  min-height: 150px;
  resize: vertical;
}

.feld__hinweis {
  font-size: 0.85rem;
  color: var(--grau);
}

.feld-paar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
}

.zustimmung {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: 0.92rem;
  line-height: 1.55;
}

.zustimmung input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--gruen-tief);
}

.honigtopf {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

.pflicht {
  color: var(--gruen-tief);
}

/* --- Kontaktkarte -------------------------------------------------------- */

.kontaktkarte {
  background: var(--papier-warm);
  border: 1px solid var(--rand);
  border-radius: var(--radius-karte);
  padding: 2rem 1.9rem;
}

.kontaktkarte dl {
  margin: 0;
  display: grid;
  gap: 1.3rem;
}

.kontaktkarte dt {
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: 0.25rem;
}

.kontaktkarte dd {
  margin: 0;
  font-size: 1.05rem;
  color: var(--tinte);
  line-height: 1.5;
}

.kontaktkarte dd a {
  font-weight: 600;
}

/* --- Grundsätze (Über uns) ----------------------------------------------- */

.grundsaetze {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem clamp(2rem, 5vw, 4rem);
  margin-top: 2.6rem;
}

.grundsatz {
  padding-top: 1.5rem;
  border-top: 2px solid var(--gruen);
}

.grundsatz h3 {
  margin-bottom: 0.45rem;
}

.grundsatz p {
  margin: 0;
  font-size: 0.99rem;
}

/* --- Porträt -------------------------------------------------------------
   Das Foto ist im Querformat aufgenommen. Der Ausschnitt entsteht über
   object-position, damit nichts verzerrt und keine Ränder entstehen.
   ------------------------------------------------------------------------- */

.portraet {
  position: relative;
  margin: 0;
  border-radius: var(--radius-karte);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--papier-tief);
  box-shadow: var(--schatten);
}

.portraet img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 47% 22%;
}

.portraet figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 0.1rem;
  padding: 2.6rem 1.5rem 1.3rem;
  /* Unten voll deckend, damit die Lesbarkeit nicht vom Foto darunter abhängt. */
  background: linear-gradient(
    to top,
    rgba(14, 16, 18, 0.96) 0%,
    rgba(14, 16, 18, 0.82) 45%,
    rgba(14, 16, 18, 0) 100%
  );
  color: #fff;
}

.portraet figcaption strong {
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
}

.portraet figcaption span {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.82);
}

/* Farbstreifen aus dem Logo als Abschluss, wie am Hero-Bild. */
.portraet::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--punkt-rot) 0 34px,
    var(--punkt-limette) 34px 68px,
    var(--punkt-blau) 68px 102px
  );
}

/* --- Kontaktseite -------------------------------------------------------- */

.kontakt__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

/* Drei Zusagen unter der Überschrift: Was passiert, wenn ich absende. */
.zusagen {
  list-style: none;
  margin: 2.2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem clamp(1.5rem, 3vw, 2.6rem);
}

.zusagen li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  font-size: 0.93rem;
  color: var(--grau);
  line-height: 1.45;
}

.zusagen strong {
  display: block;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--tinte);
  margin-bottom: 0.15rem;
}

.zusagen__ikon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--gruen-hauch);
  border: 1px solid var(--gruen-rand);
}

.zusagen__ikon svg {
  width: 20px;
  height: 20px;
  fill: var(--gruen-tief);
}

/* Das Formular sitzt in einer eigenen Karte, damit es nicht im Weiß versinkt. */
.formularkarte {
  background: var(--papier);
  border: 1px solid var(--rand);
  border-radius: var(--radius-karte);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  box-shadow: var(--schatten);
}

.themenwahl {
  border: none;
  margin: 0 0 0.4rem;
  padding: 0;
}

.themenwahl legend {
  padding: 0;
  margin-bottom: 0.85rem;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--tinte);
}

.themen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

/* Kästchen zum Anklicken statt Ankreuzen: Das echte Feld bleibt bedienbar
   und für Vorleseprogramme sichtbar, nur optisch ersetzt. */
.thema input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.thema span {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border: 1.5px solid var(--rand-stark);
  border-radius: var(--radius-knopf);
  background: var(--papier);
  font-size: 0.93rem;
  color: var(--tinte-weich);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.22s var(--kurve), background 0.22s var(--kurve),
    color 0.22s var(--kurve), transform 0.22s var(--kurve);
}

.thema span:hover {
  border-color: var(--gruen);
  color: var(--gruen-tief);
}

.thema input:checked + span {
  background: var(--gruen-tief);
  border-color: var(--gruen-tief);
  color: #fff;
  font-weight: 600;
}

.thema input:focus-visible + span {
  outline: 3px solid var(--gruen-tief);
  outline-offset: 3px;
}

.thema input:active + span {
  transform: scale(0.97);
}

.feld__zusatz {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--grau);
}

.formular__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rand);
}

.formular__fuss .feld__hinweis {
  margin: 0;
  flex: 1 1 15rem;
}

.kontakt__seite {
  display: grid;
  gap: 1.5rem;
  align-content: start;
}

.mini-ablauf {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.55rem;
  font-size: 0.94rem;
}

.mini-ablauf li::marker {
  color: var(--gruen-tief);
  font-weight: 700;
}

.kontaktkarte__titel {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
}

.kontakt__zusatz {
  margin-top: 1.6rem;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius-karte);
}

.kontakt__zusatz h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.kontakt__zusatz p {
  margin: 0;
  font-size: 0.95rem;
}

/* --- Fließtextseiten (Impressum, Datenschutz) ---------------------------- */

.rechtstext {
  max-width: 760px;
}

.rechtstext h2 {
  font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.7rem);
  margin-top: 2.6rem;
}

.rechtstext h3 {
  font-size: 1.1rem;
  margin-top: 1.8rem;
}

.rechtstext p,
.rechtstext li {
  font-size: 1rem;
}

.rechtstext ul {
  margin-bottom: 1.2rem;
}

.rechtstext li {
  margin-bottom: 0.4rem;
}

.merker {
  background: #fff8e1;
  border-left: 4px solid #e0a800;
  border-radius: 0 var(--radius-feld) var(--radius-feld) 0;
  padding: 0.9rem 1.1rem;
  margin: 1.4rem 0;
  font-size: 0.94rem;
  color: #6b5200;
}

.merker strong {
  color: #6b5200;
}

/* --- Fußzeile ------------------------------------------------------------ */

.fuss {
  background: var(--papier-warm);
  border-top: 1px solid var(--rand);
  color: var(--grau);
  padding-block: clamp(3rem, 5vw, 4.5rem) 2rem;
}

.fuss__raster {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.fuss__logo img {
  height: 34px;
  width: auto;
  margin-bottom: 1.2rem;
}

.fuss p {
  font-size: 0.95rem;
  color: var(--grau);
}

.fuss h3 {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tinte);
  margin-bottom: 1.1rem;
}

.fuss ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.65rem;
}

/* Auch die Anschrift ohne Verweis bleibt auf Fußzeilengröße, sonst wirkt
   sie größer als die Spalten daneben. */
.fuss li {
  font-size: 0.95rem;
  line-height: 1.5;
}

.fuss a {
  color: var(--grau);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s var(--kurve);
}

.fuss a:hover {
  color: var(--gruen-tief);
  text-decoration: underline;
}

.fuss__unten {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rand);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  font-size: 0.88rem;
}

/* --- Bewegung ------------------------------------------------------------ */

/* Inhalte sind grundsätzlich sichtbar. Nur wenn JavaScript läuft (die Klasse
   js steht dann am html-Element), starten sie ausgeblendet und werden beim
   Hochscrollen eingeblendet. Ohne JavaScript ist trotzdem alles lesbar. */
.js .zeigt {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--kurve), transform 0.7s var(--kurve);
}

.js .zeigt.da {
  opacity: 1;
  transform: none;
}

/* --- Schmale Bildschirme ------------------------------------------------- */

@media (max-width: 980px) {
  .hero__raster,
  .split {
    grid-template-columns: 1fr;
  }

  .split--gedreht .split__bild {
    order: 0;
  }










  .zahlen {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.5rem;
  }

  .aufruf {
    grid-template-columns: 1fr;
  }

  .leistung__kopf,
  .listenkopf,
  .rang__raster,
  .fall,
  .weg__raster {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1.1rem;
  }

  .rang__raster,
  .fall,
  .weg__raster {
    gap: 2.4rem;
  }

  /* Print: Sechs Gestaltungsarten auf zwei Spalten. */
  .werke {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .werk:nth-child(3n) {
    border-right: 1px solid var(--rand);
    padding-right: 1.6rem;
  }

  .werk:nth-child(2n) {
    border-right: none;
    padding-right: 0;
  }

  .werk:nth-child(2n + 1) {
    padding-left: 0;
  }

  .werk:nth-child(2n) {
    padding-left: 1.6rem;
  }

  /* Zeitleiste: Bild wandert unter den Text. */
  .schritt__inhalt {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .schritt__bild {
    aspect-ratio: 16 / 9;
  }

  /* Leistungszeile klappt auf zwei Reihen: Nummer, Symbol und Titel oben,
     die Beschreibung darunter. */
  .leistungsliste__eintrag a {
    grid-template-columns: 2.6rem 2.2rem minmax(0, 1fr) 1.6rem;
    grid-template-areas:
      "nr ikon titel pfeil"
      ".  .    text  .";
    row-gap: 0.5rem;
    padding-block: 1.3rem;
  }

  .leistungsliste__nr {
    grid-area: nr;
  }
  .leistungsliste__ikon {
    grid-area: ikon;
  }
  .leistungsliste__titel {
    grid-area: titel;
  }
  .leistungsliste__text {
    grid-area: text;
  }
  .leistungsliste__pfeil {
    grid-area: pfeil;
  }

  .leistung__kopf h2 {
    max-width: 24ch;
  }

  .kontakt__raster {
    grid-template-columns: 1fr;
  }

  .zusagen {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .fuss__raster {
    grid-template-columns: 1fr 1fr;
  }

  .fuss__logo {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .kopf__nav {
    position: fixed;
    inset: 72px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--papier);
    border-bottom: 1px solid var(--rand);
    padding: 0.5rem 1.15rem 1.5rem;
    box-shadow: var(--schatten-hoch);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s var(--kurve), transform 0.25s var(--kurve),
      visibility 0.25s;
  }

  .kopf__nav.offen {
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  .kopf__nav a {
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--rand);
    font-size: 1.05rem;
  }

  .kopf__nav a::after {
    display: none;
  }

  .kopf__nav .knopf {
    margin-top: 1.1rem;
    border-bottom: none;
    padding: 0.85rem 1.4rem;
  }

  /* Im Schubfach steht die Gruppe untereinander, das Untermenü klappt
     an Ort und Stelle auf statt zu schweben. */
  .nav-gruppe {
    display: block;
    position: static;
  }

  .nav-gruppe > a {
    display: inline-block;
    width: calc(100% - 3rem);
  }

  .nav-gruppe__schalter {
    position: absolute;
    right: 1.15rem;
    width: 44px;
    height: 44px;
    margin-top: -3.2rem;
    border: 1px solid var(--rand);
  }

  .nav-menue {
    position: static;
    width: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid var(--rand);
    border-radius: 0;
    padding: 0 0 0.9rem 0.9rem;
    display: none;
  }

  .nav-menue::before {
    display: none;
  }

  .nav-gruppe:hover .nav-menue,
  .nav-gruppe:focus-within .nav-menue {
    display: none;
  }

  .nav-menue.offen,
  .nav-gruppe:focus-within .nav-menue.offen {
    display: grid;
  }

  .nav-menue a {
    padding: 0.7rem 0.75rem;
    border-bottom: none;
    font-size: 1rem;
  }

  .nav-menue strong {
    font-size: 1rem;
  }

  /* Bündig mit den Einträgen darüber statt am Rand des Untermenüs. */
  .nav-menue__alle {
    margin: 0.35rem 0.75rem 0;
    padding: 0.85rem 0 0.2rem;
  }

  .kopf__schalter {
    display: inline-flex;
  }




  .merkmale {
    gap: 1.1rem;
  }

  .merkmale .punkte:last-child {
    margin-top: 0;
  }

  .sprungliste a {
    font-size: 0.88rem;
    padding: 0.4rem 0.85rem;
  }

  /* Ranking-Grafik wird auf schmalen Bildschirmen kompakter. */
  .rang {
    padding: 1.2rem 1.1rem 1rem;
  }

  .rang__liste {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 0.6rem;
  }

  .rang__nummern {
    grid-auto-rows: 36px;
  }

  .rang__nummern li {
    font-size: 0.76rem;
  }

  .rang__feld {
    height: 360px;
  }

  .rang__zeile {
    height: 28px;
    transform: translateY(calc(var(--von) * 36px + 4px));
  }

  .rang.laeuft .rang__zeile {
    transform: translateY(calc(var(--nach) * 36px + 4px));
  }

  .rang__zeile--wir {
    font-size: 0.86rem;
    padding-inline: 0.65rem;
    gap: 0.4rem;
  }

  /* Anzeigen-Anatomie: Beschriftung rückt über den Baustein. */
  .anzeige__teil {
    padding-left: 0;
    padding-top: 1.15rem;
  }

  .anzeige__teil::before {
    width: auto;
    text-align: left;
    top: 0;
  }

  .anzeige__teil::after {
    display: none;
  }

  .anzeige__teil:first-child {
    flex-wrap: wrap;
  }

  .partner__platz {
    width: 118px;
    height: 50px;
  }

  .partner {
    gap: 1.6rem;
  }

  /* Zeitleiste rückt enger an den linken Rand. */
  .zeitleiste {
    margin-top: 2.2rem;
  }

  .zl-linie {
    left: 21px;
    top: 28px;
    height: calc(100% - 56px);
  }

  .schritt {
    padding-left: 62px;
  }

  .schritt__punkt {
    width: 44px;
    height: 44px;
    font-size: 0.92rem;
    top: 6px;
  }

  .schritt__inhalt {
    padding: 1.3rem 1.25rem;
  }

  .konto__zeile {
    grid-template-columns: 7.4rem minmax(0, 1fr) 4.4rem;
    gap: 0.6rem;
  }

  .konto__label,
  .konto__wert {
    font-size: 0.82rem;
  }

  .weg__stufe {
    width: 100%;
  }

  /* Print: Gestaltungsarten untereinander. */
  .werke {
    grid-template-columns: 1fr;
  }

  .werk,
  .werk:nth-child(3n),
  .werk:nth-child(2n) {
    border-right: none;
    padding-left: 0;
    padding-right: 0;
  }

  /* KI-Antwort und Umkreis kompakter. */
  .antwort,
  .umkreis,
  .verlauf {
    padding: 1.2rem 1.1rem 1rem;
  }

  .umkreis__ort {
    font-size: 0.74rem;
    padding: 0.24rem 0.55rem;
  }

  .umkreis__mitte {
    font-size: 0.78rem;
    padding: 0.45rem 0.75rem;
  }



  .fuss__unten {
    flex-direction: column;
    gap: 0.7rem;
  }
}

/* --- Weniger Bewegung ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js .zeigt {
    opacity: 1;
    transform: none;
  }
}

/* --- Druck --------------------------------------------------------------- */

@media print {
  .kopf,
  .fuss,
  .aufruf,
  .knopf-reihe {
    display: none;
  }

  body {
    color: #000;
    font-size: 11pt;
  }
}