/* joombird · Stylesheet
   Farben nur aus dem Logo. Verlauf nur im Logo und im Lichtschein des Einstiegs. */

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 300 800;
  src: url("../fonts/open-sans-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 300 800;
  src: url("../fonts/open-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Logofarben, unverändert */
  --orange: #F9A623;
  --koralle: #EF7656;
  --rose: #E2516F;
  --magenta: #D42A9C;

  /* Dunkle Flächen mit leichtem Stich ins Magenta, damit sie zum Logo gehören */
  --grund: #1A1519;
  --flaeche: #241D23;
  --flaeche-hell: #2E262D;
  --linie: #433940;

  --text: #E9E3E6;
  --text-leise: #B5ACB2;

  --rand: clamp(1.25rem, 5vw, 4rem);
  --kopfhoehe: 4.25rem;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopfhoehe) + 1rem);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: "Open Sans", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
}

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

a { color: var(--orange); text-underline-offset: .2em; }
a:hover { color: var(--koralle); }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  margin: 0 0 .6em;
  line-height: 1.15;
  font-weight: 700;
  color: #F4EFF1;
}
h1 { font-size: clamp(2.4rem, 7vw, 4.75rem); font-weight: 800; line-height: 1.05; }
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.0625rem; }
p { margin: 0 0 1em; }

/* Platzhalter: sollen sofort auffallen */
.offen {
  color: var(--orange);
  background: rgba(249, 166, 35, .1);
  outline: 1px dashed var(--orange);
  outline-offset: 1px;
  padding: 0 .3em;
  font-size: .9em;
  font-weight: 600;
  font-style: normal;
}
.offen--block {
  display: inline-block;
  margin: 0 0 1.25rem;
  padding: .35em .6em;
}

/* Knöpfe: eine Vollfarbe */
.knopf {
  display: inline-block;
  background: var(--magenta);
  color: #FFFFFF;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  border-radius: 6px;
  padding: .85em 1.4em;
  text-align: center;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease, text-shadow .3s ease;
}
/* Hover: Knopf strahlt sanft in den Logofarben und hebt sich leicht an.
   Die Fläche bleibt Magenta: heller wäre der weiße Text schlechter lesbar. */
.knopf:hover,
.knopf:focus-visible {
  color: #FFFFFF;
  text-decoration: none;
  transform: translateY(-2px) scale(1.02);
  text-shadow: 0 0 8px rgba(255, 255, 255, .3);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .15),
    0 0 14px 0 rgba(212, 42, 156, .4),
    0 0 32px 4px rgba(239, 118, 86, .15),
    0 10px 22px -10px rgba(212, 42, 156, .45);
}
.knopf:active { transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .knopf, .knopf:hover, .knopf:focus-visible { transform: none; transition: none; }
}
.knopf--klein { padding: .55em 1em; font-size: .9375rem; }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--flaeche);
}
.kopf__innen {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--kopfhoehe);
  padding: 0 var(--rand);
  max-width: 82rem;
  margin: 0 auto;
}
.kopf__logo img { width: 128px; height: auto; }
.kopf__knopf { margin-left: auto; white-space: nowrap; }
.kopf__menuknopf {
  order: 3;
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text);
  background: none;
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: .5em .8em;
  cursor: pointer;
}
.kopf__navi {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  background: var(--flaeche);
  padding: .5rem var(--rand) 1.25rem;
}
.kopf__navi.ist-offen { display: flex; }
.kopf__navi a {
  color: var(--text);
  text-decoration: none;
  padding: .7rem 0;
  font-weight: 600;
}
.kopf__navi a:hover { color: var(--orange); }

.nur-breit { display: none; }
@media (min-width: 30rem) { .nur-breit { display: inline; } }

@media (max-width: 26rem) {
  .kopf__knopf { font-size: .8125rem; padding: .5em .7em; }
  .kopf__logo img { width: 108px; }
}

@media (min-width: 56rem) {
  .kopf__logo img { width: 160px; }
  .kopf__menuknopf { display: none; }
  .kopf__navi {
    display: flex;
    position: static;
    flex-direction: row;
    gap: 2rem;
    padding: 0;
    margin-left: auto;
    background: none;
  }
  .kopf__navi a { padding: 0; font-weight: 500; font-size: .9688rem; }
  .kopf__knopf { margin-left: 1rem; }
}

/* ---------- Einstieg ---------- */
.einstieg {
  position: relative;
  overflow: hidden;
  padding-bottom: clamp(7rem, 14vw, 10rem);
}
.einstieg__innen {
  position: relative;
  z-index: 1;
  max-width: 82rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 8vw, 7rem) var(--rand) 0;
}
/* Einstieg mittig: Überschrift, Text und Button zentriert */
.einstieg__innen { text-align: center; }
.einstieg h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  max-width: 24ch;
  margin: 0 auto clamp(1.5rem, 4vw, 3rem);
}
/* Unterzeile so breit wie die Überschrift, Button darunter */
.einstieg__unterzeile {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.55;
  max-width: 60rem;
  margin: 0 auto 2rem;
}

.fotoplatz {
  display: grid;
  place-items: center;
  background: var(--flaeche);
  border: 1px dashed var(--linie);
  text-align: center;
  padding: 1rem;
}
.fotoplatz--quer { aspect-ratio: 5 / 4; }
.ueber__foto { margin: 0; }
/* Porträt im Hochformat: Breite begrenzt, damit es neben dem Text nicht zu hoch wird */
.ueber__foto img { width: 100%; max-width: 26rem; height: auto; border-radius: 6px; }

@media (min-width: 56rem) {
  .einstieg {
    min-height: min(56rem, calc(100svh - var(--kopfhoehe)));
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .einstieg__innen { width: 100%; }
}

/* Hintergrund im Einstieg: Horizontlinie mit Lichtschein in den Logofarben,
   dazu langsam aufsteigende Punkte (erzeugt in main.js) */
.horizont {
  --linie-unten: clamp(3rem, 6vw, 4.5rem);
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.horizont__schein {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--linie-unten);
  height: 80%;
  background: linear-gradient(90deg, #F9A623 0%, #EF7656 40%, #E2516F 70%, #D42A9C 100%);
  --schein-breite: 80%;
  -webkit-mask-image: radial-gradient(ellipse var(--schein-breite) 100% at 50% 100%, #000 0%, rgba(0,0,0,.35) 30%, rgba(0,0,0,.1) 55%, transparent 75%);
          mask-image: radial-gradient(ellipse var(--schein-breite) 100% at 50% 100%, #000 0%, rgba(0,0,0,.35) 30%, rgba(0,0,0,.1) 55%, transparent 75%);
  opacity: .6;
  animation: atmen 9s ease-in-out infinite alternate;
}
.horizont__linie {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: var(--linie-unten);
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #F9A623 20%, #EF7656 40%, #E2516F 60%, #D42A9C 80%, transparent 100%);
}
/* weicher Schimmer um die Linie */
.horizont__linie::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: -5px;
  height: 12px;
  background: inherit;
  filter: blur(7px);
  opacity: .8;
}
/* heller Kern in der Mitte der Linie */
.horizont__linie::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #FCEFF4 50%, transparent);
}
@media (min-width: 56rem) {
  .horizont__schein { --schein-breite: 45%; }
}
.horizont__punkte {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: var(--linie-unten);
  height: 75%;
}
.horizont__punkte span {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  opacity: 0;
  animation: steigen var(--dauer) linear var(--verzug) infinite;
}
@keyframes atmen {
  from { opacity: .5; }
  to   { opacity: .75; }
}
@keyframes steigen {
  0%   { transform: translate(0, 0);                       opacity: 0; }
  15%  { opacity: .85; }
  75%  { opacity: .6; }
  100% { transform: translate(var(--drift), var(--hoehe)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .horizont__schein { animation: none; }
  .horizont__punkte { display: none; }
}

/* ---------- Lage der Kund:innen ---------- */
.lage {
  max-width: 82rem;
  margin: 0 auto;
  padding: clamp(4rem, 10vw, 9rem) var(--rand) clamp(3rem, 8vw, 6rem);
}
.lage h2 { max-width: none; text-wrap: balance; }
.lage__liste {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 2rem;
  max-width: 52rem;
}
.lage__satz {
  font-size: clamp(1.25rem, 2.6vw, 1.625rem);
  line-height: 1.4;
  font-weight: 500;
  padding-left: 1.25rem;
  border-left: 3px solid var(--rose);
  text-wrap: balance;
}
.lage__satz--gross { font-size: clamp(1.375rem, 2.8vw, 1.875rem); font-weight: 600; border-left-color: var(--orange); }
.lage__satz--klein { font-size: clamp(1.125rem, 2vw, 1.3125rem); border-left-color: var(--magenta); }
@media (min-width: 56rem) {
  .lage__liste { margin-top: 2.5rem; }
  /* Gleichmäßige Treppe: jeder Satz beginnt 3rem weiter rechts als der vorige */
  .lage__satz:nth-child(2) { margin-left: 3rem; }
  .lage__satz:nth-child(3) { margin-left: 6rem; }
  .lage__satz:nth-child(4) { margin-left: 9rem; }
  .lage__satz:nth-child(5) { margin-left: 12rem; }
  .lage__satz--mitte { border-left-color: var(--koralle); }
}

/* ---------- Leistungen ---------- */
.leistungen {
  background: var(--flaeche);
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--rand);
}
.leistungen > * { max-width: calc(82rem - 2 * var(--rand)); margin-left: auto; margin-right: auto; }
.leistungen__kopf { margin-bottom: 3rem; }
.leistungen__kopf h2 { max-width: 20ch; }
.leistungen__kopf p { max-width: 38rem; color: var(--text-leise); font-size: 1.125rem; }

.paket {
  display: grid;
  gap: 2.5rem;
}
.paket__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.paket__liste li {
  position: relative;
  padding: 0 0 1rem 1.75rem;
}
/* Kleiner Punkt in Logofarbe statt Häkchen */
.paket__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: .7em;
  height: .7em;
  border-radius: 50%;
  background: var(--orange);
}
.paket__spalte { max-width: 42rem; }
/* Desktop: links Überschrift, Einleitung und Komplettpaket untereinander, rechts ein Foto */
.leistungen__foto { margin: 2.5rem 0 0; }
/* Fester 5:4-Ausschnitt, egal in welchem Format das Foto kommt */
.leistungen__foto img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 40% top; /* bei hohen Fotos unten kürzen, damit der Kopf drinbleibt */
  border-radius: 6px;
}

/* Grafik „Anzeige → Website → Anfrage“ im Abschnitt „Was ich für dich mache“.
   Ein Vogel fliegt auf einer Bahn nach oben, vorbei an drei Stationen in den Logofarben.
   Hinter ihm ein Schweif aus Lichtpunkten; seine Spur beginnt am Tracking-Startpunkt,
   an jeder Station erscheint ein Haken (= Tracking).
   Die Bewegung steckt als SMIL-Animation im SVG, CSS regelt Farben und „Bewegung reduzieren“. */
.funnel svg { display: block; width: 100%; aspect-ratio: 5 / 4; overflow: visible; }
.funnel .f-orange { fill: var(--orange); }
.funnel .f-rose { fill: var(--rose); }
.funnel .f-magenta { fill: var(--magenta); }
.funnel__sterne circle { fill: var(--text-leise); opacity: .45; }
.funnel__sterne circle[class] { opacity: .8; }
.funnel__schein { opacity: .35; }
.funnel__bahn { fill: none; stroke: var(--linie); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; }
.funnel__spur { fill: none; stroke: var(--text-leise); stroke-width: 1.6; stroke-dasharray: 1 5; stroke-linecap: round; }
.funnel__symbol * { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.funnel__symbol circle { fill: #fff; stroke: none; }
.funnel__vogel path,
.funnel__vogel-ruhig { fill: none; stroke: var(--text); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.funnel__vogel-ruhig { display: none; }
.funnel__haken circle { fill: var(--text); stroke: var(--flaeche); stroke-width: 2; }
.funnel__haken path { fill: none; stroke: var(--grund); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.funnel__start { fill: var(--flaeche); stroke: var(--text); stroke-width: 2; }
.funnel text { font-family: inherit; }
.funnel .f-schritt { font-size: 19px; font-weight: 700; fill: var(--text); }
.funnel .f-satz { font-size: 14px; fill: var(--text-leise); }
.funnel .f-links { text-anchor: start; }
.funnel .f-rechts { text-anchor: end; }
/* Ohne Bewegung: kein fliegender Vogel, kein Schweif; die Spur liegt vollständig da, der Vogel sitzt am Ende */
@media (prefers-reduced-motion: reduce) {
  .funnel__vogel,
  .funnel__teilchen { display: none; }
  .funnel__spur[mask] { mask: none; }
  .funnel__vogel-ruhig { display: inline; }
  .funnel__haken { opacity: 1; }
}
@media (min-width: 56rem) {
  .leistungen__oben {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
  }
  .leistungen__foto { margin: 0; }
}

.ausbau { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.ausbau h3 { font-size: 1.5rem; margin-bottom: 1.25rem; }
.ausbau__zeile {
  border-top: 1px solid var(--linie);
  padding: 1.25rem 0 .5rem;
}
.ausbau__zeile h4 { margin-bottom: .4rem; }
.ausbau__zeile p { color: var(--text-leise); max-width: 40rem; }
@media (min-width: 48rem) {
  .ausbau__zeile {
    display: grid;
    grid-template-columns: 16rem 1fr;
    gap: 2rem;
  }
}

/* ---------- Ablauf ---------- */
.ablauf {
  max-width: 82rem;
  margin: 0 auto;
  padding: clamp(4rem, 9vw, 7rem) var(--rand);
}
.ablauf h2 { max-width: 16ch; }
.ablauf__schritte {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 2.25rem;
}
.schritt {
  display: grid;
  grid-template-columns: 3.75rem 1fr;
  column-gap: 1rem;
}
.schritt h3, .schritt p { grid-column: 2; }
.schritt p { color: var(--text-leise); margin: 0; }
/* Die Punkte wachsen von Schritt zu Schritt, wie die Kreise im Logo.
   Jeder Punkt hat eine der vier Logofarben, als Vollfarbe. */
.schritt__punkt {
  grid-row: 1 / span 2;
  justify-self: center;
  border-radius: 50%;
  margin-top: .2rem;
}
.schritt--1 .schritt__punkt { width: 1rem;    height: 1rem;    background: var(--orange); }
.schritt--2 .schritt__punkt { width: 1.5rem;  height: 1.5rem;  background: var(--koralle); }
.schritt--3 .schritt__punkt { width: 2.125rem; height: 2.125rem; background: var(--rose); }
.schritt--4 .schritt__punkt { width: 2.875rem; height: 2.875rem; background: var(--magenta); }
/* Betreuung: Ring statt Punkt, weil es danach weiterläuft */
.schritt--5 .schritt__punkt { width: 3.5rem; height: 3.5rem; border: 3px solid var(--magenta); background: transparent; }

@media (min-width: 60rem) {
  .ablauf__schritte {
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
    margin-top: 3.5rem;
  }
  .schritt {
    grid-template-columns: 1fr;
    grid-template-rows: 3.75rem auto 1fr;
  }
  .schritt h3, .schritt p { grid-column: 1; }
  .schritt__punkt {
    grid-row: 1;
    justify-self: start;
    align-self: end;
    margin: 0 0 1rem;
  }
}

/* ---------- Über mich ---------- */
.ueber {
  display: grid;
  gap: 2rem;
  max-width: 82rem;
  margin: 0 auto;
  padding: 0 var(--rand) clamp(4rem, 9vw, 7rem);
}
.ueber__text { font-size: 1.125rem; max-width: 36rem; }
.ueber__text .knopf { margin-top: .75rem; font-size: 1rem; }
@media (min-width: 56rem) {
  .ueber {
    grid-template-columns: 5fr 6fr;
    gap: 4.5rem;
    align-items: center;
  }
  .ueber__foto { justify-self: end; }
}

/* ---------- Stimmen ---------- */
.stimmen {
  background: var(--flaeche);
  padding: clamp(3.5rem, 8vw, 6rem) var(--rand);
}
.stimmen__innen { max-width: calc(82rem - 2 * var(--rand)); margin: 0 auto; }
.stimmen h2 { max-width: 22ch; margin-bottom: 2.5rem; }
.stimmen__hinweis {
  color: var(--text-leise);
  max-width: 38rem;
  margin-bottom: 2.5rem;
}
.stimmen__liste { display: grid; gap: 2.5rem; }
@media (min-width: 52rem) {
  .stimmen__liste { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
}
.stimme { margin: 0; }
.stimme blockquote {
  margin: 0 0 1.25rem;
  font-size: 1.25rem;
  line-height: 1.5;
}
.stimme figcaption {
  display: flex;
  align-items: center;
  gap: .9rem;
}
.stimme__foto {
  width: 3.5rem;
  height: 3.5rem;
  flex: none;
  border-radius: 50%;
  border: 1px dashed var(--linie);
  display: grid;
  place-items: center;
  font-size: .7rem;
}
.stimme__name { font-weight: 600; }
.stimme__wer { display: grid; gap: .1rem; }
.stimme__rolle { font-size: .9375rem; color: var(--text-leise); }

/* ---------- Erstanalyse und Kontakt ---------- */
.kontakt {
  position: relative;
  display: grid;
  gap: 2.5rem;
  max-width: 72rem;
  margin: clamp(4rem, 9vw, 7rem) auto;
  padding: clamp(2rem, 5vw, 3.5rem) var(--rand);
  background: var(--flaeche);
}
.kontakt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--magenta);
}
.kontakt__text { max-width: 30rem; }
@media (min-width: 56rem) {
  .kontakt {
    grid-template-columns: 5fr 6fr;
    gap: 4rem;
    padding: 3.5rem;
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 2 * var(--rand));
  }
}

.formular { display: grid; gap: 1.1rem; }
.feld label {
  display: block;
  font-weight: 600;
  margin-bottom: .35rem;
}
.feld__optional { font-weight: 400; color: var(--text-leise); }
.feld input[type="text"],
.feld input[type="email"],
.feld textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: 4px;
  padding: .7rem .8rem;
}
.feld input::placeholder { color: #857B82; }
.feld input:focus, .feld textarea:focus {
  outline: 2px solid var(--orange);
  outline-offset: 0;
  border-color: var(--orange);
}
.feld textarea { resize: vertical; }
/* Automatisch ausgefüllte Felder: Browser färbt sie sonst hellblau mit schwarzer Schrift.
   Die innere Schattenfläche überdeckt diese Farbe mit dem dunklen Feldhintergrund. */
.feld input:-webkit-autofill,
.feld input:-webkit-autofill:hover,
.feld input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  -webkit-box-shadow: 0 0 0 100rem var(--grund) inset;
          box-shadow: 0 0 0 100rem var(--grund) inset;
  transition: background-color 600000s 0s;
}
.feld--check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
  align-items: start;
  font-size: .9375rem;
}
.feld--check input { width: 1.15rem; height: 1.15rem; margin: .2rem 0 0; accent-color: var(--orange); }
.feld--check label { font-weight: 400; color: var(--text-leise); margin: 0; }
.feld--falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.formular .knopf { justify-self: start; margin-top: .5rem; }
.formular__fehler {
  margin: 0;
  padding: .8rem 1rem;
  border-left: 3px solid var(--rose);
  background: var(--grund);
}

/* ---------- Fußzeile ---------- */
.fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  max-width: 82rem;
  margin: 0 auto;
  padding: 2rem var(--rand) 2.5rem;
  font-size: .9375rem;
}
.fuss nav { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
.fuss a { color: var(--text-leise); text-decoration: none; }
.fuss a:hover { color: var(--orange); }
.fuss__copy { color: var(--text-leise); }
/* Handy: Copyright als letzte Zeile unter Links und Symbolen */
@media (max-width: 40rem) { .fuss__copy { order: 1; } }

/* ---------- Unterseiten (Impressum, Datenschutz, Danke) ---------- */
.unterseite {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 5rem) var(--rand);
}
.unterseite h1 { font-size: clamp(2rem, 5vw, 3rem); }
.unterseite h2 { font-size: 1.375rem; margin-top: 2rem; }
.unterseite ul { padding-left: 1.2rem; }

/* Rechtstexte (Datenschutz): langer Fließtext aus dem Generator */
.unterseite--recht { font-size: 1rem; }
.unterseite--recht h2 { font-size: 1.375rem; margin-top: 3rem; scroll-margin-top: calc(var(--kopfhoehe) + 1rem); }
.unterseite--recht h3 { font-size: 1.0625rem; margin-top: 1.75rem; }
.unterseite--recht li { margin-bottom: .5rem; }
.unterseite--recht strong { color: #F4EFF1; }
/* lange Links und Wörter brechen auf dem Handy um, statt seitlich rauszulaufen */
.unterseite--recht p, .unterseite--recht li { overflow-wrap: anywhere; hyphens: auto; }
.unterseite--recht .seal img { width: 120px; height: auto; margin: 1rem 0; }
.unterseite--recht .index {
  list-style: none;
  padding: 1.25rem 1.5rem;
  background: var(--flaeche);
  border-radius: 6px;
  columns: 2 16rem;
  column-gap: 2rem;
}
.unterseite--recht .index li { break-inside: avoid; margin-bottom: .4rem; }
.unterseite--recht .m-elements { padding: 1rem 1.25rem 1rem 2.25rem; background: var(--flaeche); border-radius: 6px; }
.unterseite--recht .glossary li { margin-bottom: 1rem; }

/* Danke-Seite: gleicher Lichtschein wie im Einstieg, Inhalt mittig */
.danke {
  position: relative;
  overflow: hidden;
  min-height: calc(100svh - var(--kopfhoehe));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.danke__innen {
  position: relative;
  z-index: 1;
  max-width: 62rem;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 5rem) var(--rand) clamp(8rem, 14vw, 10rem);
  text-align: center;
}
.danke__marke { width: 72px; margin: 0 auto 1.75rem; }
.danke h1 {
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  text-wrap: balance;
  margin-bottom: 1rem;
}
.danke__unterzeile {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  color: var(--text);
  margin-bottom: 1rem;
}
/* Hinweis auf die Bestätigungs-Mail (landet bei neuen Absendern oft im Spam) */
.danke__hinweis {
  font-size: .9375rem;
  color: var(--text-leise);
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.danke__gruss { font-size: 1.125rem; color: var(--text-leise); margin-bottom: 1.75rem; }
.danke__gruss span { font-size: 1.5rem; font-weight: 700; color: #F4EFF1; }

[hidden] { display: none !important; }

.fuss__cookies {
  font: inherit;
  color: var(--text-leise);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.fuss__cookies:hover { color: var(--orange); }

/* ---------- Cookie-Banner (nur aktiv, wenn Tracking eingetragen ist) ---------- */
.cookies {
  position: fixed;
  z-index: 20;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: var(--flaeche-hell);
  border-radius: 8px;
  padding: 1.25rem 1.25rem 1rem;
  font-size: .9375rem;
  line-height: 1.55;
}
.cookies__titel { font-weight: 700; font-size: 1.0625rem; margin-bottom: .4rem; color: #F4EFF1; }
.cookies p { margin-bottom: .9rem; }
.cookies__knoepfe { display: grid; gap: .5rem; }
.cookies__knopf {
  font: inherit;
  font-weight: 600;
  color: var(--text);
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: .6em 1em;
  white-space: nowrap;
  cursor: pointer;
}
.cookies__knopf:hover { border-color: var(--text-leise); }
.cookies__auswahl { display: grid; gap: .8rem; margin-bottom: 1rem; }
.cookies__dienst {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
  align-items: start;
  color: var(--text-leise);
}
.cookies__dienst strong { color: var(--text); }
.cookies__dienst input { width: 1.1rem; height: 1.1rem; margin: .2rem 0 0; accent-color: var(--magenta); }
@media (min-width: 40rem) {
  .cookies { left: auto; width: 30rem; right: 1.5rem; bottom: 1.5rem; }
  .cookies__knoepfe { grid-template-columns: repeat(3, auto); justify-content: start; }
}

/* ---------- Effekte beim Scrollen ----------
   Bewusst nur an wenigen Stellen: Hauptüberschrift, Abschnittsüberschriften,
   Kund:innen-Sätze und die Punkte im Ablauf. Die Klasse .effekte setzt ein kleines
   Skript im <head>; ohne JavaScript oder bei "Bewegung reduzieren" ist alles sofort sichtbar. */

/* Einstieg: Überschrift Wort für Wort, Text darunter fließt hinterher */
@keyframes aus-unschaerfe {
  from { opacity: 0; filter: blur(10px); transform: translateY(.25em); }
  to   { opacity: 1; filter: blur(0);    transform: none; }
}
.effekte .einstieg__titel .wort {
  display: inline-block;
  animation: aus-unschaerfe 1s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: calc(var(--i) * 80ms + 150ms);
}
@keyframes sanft-ein {
  from { opacity: 0; filter: blur(6px); transform: translateY(10px); }
  to   { opacity: 1; filter: blur(0);   transform: none; }
}
.effekte .einblenden-laden--danach {
  animation: sanft-ein 1.2s cubic-bezier(.22, .61, .36, 1) .75s both;
}

.effekte [data-einblenden]:not(.ablauf__schritte) {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(12px);
  transition: opacity .5s ease-out, filter .5s ease-out, transform .5s cubic-bezier(.2, .7, .2, 1);
}
.effekte [data-einblenden].ist-sichtbar:not(.ablauf__schritte) {
  opacity: 1;
  filter: none;
  transform: none;
}

/* Ablauf: Punkte wachsen nacheinander auf, Texte folgen leicht versetzt */
.effekte .ablauf__schritte .schritt__punkt {
  transform: scale(0);
  transition: transform .45s cubic-bezier(.3, 1.4, .5, 1);
}
.effekte .ablauf__schritte .schritt h3,
.effekte .ablauf__schritte .schritt p {
  opacity: 0;
  transition: opacity .45s ease-out;
}
.effekte .ablauf__schritte.ist-sichtbar .schritt__punkt { transform: scale(1); }
.effekte .ablauf__schritte.ist-sichtbar .schritt h3,
.effekte .ablauf__schritte.ist-sichtbar .schritt p { opacity: 1; }
.effekte .ablauf__schritte .schritt--2 .schritt__punkt,
.effekte .ablauf__schritte .schritt--2 h3,
.effekte .ablauf__schritte .schritt--2 p { transition-delay: .12s; }
.effekte .ablauf__schritte .schritt--3 .schritt__punkt,
.effekte .ablauf__schritte .schritt--3 h3,
.effekte .ablauf__schritte .schritt--3 p { transition-delay: .24s; }
.effekte .ablauf__schritte .schritt--4 .schritt__punkt,
.effekte .ablauf__schritte .schritt--4 h3,
.effekte .ablauf__schritte .schritt--4 p { transition-delay: .36s; }
.effekte .ablauf__schritte .schritt--5 .schritt__punkt,
.effekte .ablauf__schritte .schritt--5 h3,
.effekte .ablauf__schritte .schritt--5 p { transition-delay: .48s; }

/* Symbole für LinkedIn, Facebook und Instagram (Simple Icons, CC0) */
.fuss__sozial {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.fuss__icon {
  display: inline-flex;
  color: var(--text-leise);
}
.fuss__icon:hover, .fuss__icon:focus-visible { color: var(--orange); }

/* Pflichtfelder im Formular */
.pflicht { color: var(--magenta); font-weight: 700; }
.formular__hinweis { margin: 0; font-size: .875rem; color: var(--text-leise); }

/* Handy: lange Wörter in Überschriften (z. B. „Verbraucherstreitbeilegung“) trennen statt rauslaufen */
@media (max-width: 30rem) {
  .unterseite h1, .unterseite h2, .unterseite h3, .unterseite p { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
}

/* iPhone: automatisch erkannte Adressen, Telefonnummern und Daten nicht als Link einfärben */
a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font: inherit !important;
}

/* ---------- Handy: kompaktere Größen (nur bis 36rem Breite, Desktop bleibt unverändert) ---------- */
@media (max-width: 36rem) {
  h2 { font-size: 1.625rem; }

  /* Einstieg */
  .einstieg h1 { font-size: 2.125rem; }
  .einstieg__unterzeile { font-size: 1.0625rem; }
  .einstieg { padding-bottom: 5.5rem; }

  /* Sätze der Kund:innen */
  .lage__satz { font-size: 1.125rem; }
  .lage__satz--gross { font-size: 1.25rem; }
  .lage__satz--klein { font-size: 1.0625rem; }

  /* Leistungen */
  .leistungen__kopf { margin-bottom: 2rem; }
  .leistungen__kopf p { font-size: 1.0625rem; }
  .ausbau h3 { font-size: 1.3125rem; }

  /* Über mich: Foto kleiner und enger zugeschnitten (Gesicht und Schultern) */
  .ueber { gap: 1.5rem; }
  .ueber__foto img {
    width: 15rem;
    max-width: 75%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 15%;
  }
  .ueber__text { font-size: 1.0625rem; }
}

/* ---------- Desktop: mehr Luft zwischen den Bereichen (ab 56rem Breite, Handy unverändert) ---------- */
@media (min-width: 56rem) {
  .lage { padding-top: 10rem; padding-bottom: 9rem; }
  .leistungen { padding-top: 9rem; padding-bottom: 9rem; }
  .leistungen__kopf { margin-bottom: 4rem; }
  .ausbau { margin-top: 8rem; }
  .ausbau h3 { margin-bottom: 2rem; }
  .ablauf { padding-top: 9rem; padding-bottom: 9rem; }
  .ablauf__schritte { margin-top: 4rem; }
  .ueber { padding-top: 3rem; padding-bottom: 4rem; }
  .kontakt { margin-top: 8rem; margin-bottom: 9rem; }
}

/* Desktop: Porträt bei „Über mich“ etwas kleiner (ca. 340 × 510), damit Bild und Text ausgewogen nebeneinander stehen */
@media (min-width: 56rem) {
  .ueber__foto img { max-width: 21.25rem; }
}