/* Neue Startseite (Oktober 2026). Entsteht aus prototype/neu/seite.html, nicht von Hand ändern. */
/* Neue Startseite, Entwurf 23.10.2026: ruhiger Aufbau nach dem Vorbild inlight-motion.de,
     Farben, Schrift und Abstände aus docs/brand-guidelines.md. Bewusst ein einziges Erscheinungsbild,
     kein Dunkelmodus-Wechsel: dunkle und helle Abschnitte setzen ihre Farben selbst. */
  @font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; }
  @font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-italic-latin.woff2") format("woff2"); font-weight: 300 600; font-style: italic; font-display: swap; }

  :root {
    --orange: #FF4700;
    --orange-text: #C23400;          /* Orange als Schrift auf hellem Grund (Kontrast 4,7 : 1) */
    --ink: #0F0C0C;
    --panel: #1A1616;
    --cream: #F8F3EF;
    --weiss: #FFFFFF;
    --text-dunkel: rgba(255, 255, 255, .74);
    --text-hell: #4D4645;
    --linie-dunkel: rgba(255, 255, 255, .12);
    --linie-hell: rgba(15, 12, 12, .12);
    --s1: 8px; --s2: 13px; --s3: 21px; --s4: 34px; --s5: 55px; --s6: 89px; --s7: 144px;
    --r: 13px; --r2: 21px;
    --rand: 21px;
    color-scheme: dark;
  }
  @media (min-width: 768px) { :root { --rand: 34px; } }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-block: 80px 24px; }   /* Sprungziele und Fokus nicht unter der Kopfleiste */
  @media (max-width: 959px) { html { scroll-padding-bottom: 89px; } }   /* … und nicht unter der Handy-Leiste */
  a, button, summary, video { touch-action: manipulation; -webkit-tap-highlight-color: rgba(255, 71, 0, .2); }
  body {
    margin: 0; background: var(--ink); color: var(--weiss);
    font: 400 17px/1.618 "Inter Tight", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased; overflow-x: clip;
  }
  img, video { display: block; max-width: 100%; }
  img { height: auto; }
  a { color: inherit; }
  p { margin: 0; }
  :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
  .hell :focus-visible { outline-color: var(--orange-text); }
  .wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--rand); }
  section { padding-block: var(--s5); }
  #ablauf { scroll-margin-top: var(--s2); }   /* alte Sprungmarke /#ablauf zeigt auf die Schritte */
  @media (min-width: 960px) { section { padding-block: var(--s6); } }

  .springen { position: absolute; left: var(--s2); top: -100px; z-index: 50; padding: var(--s2) var(--s3); border-radius: var(--r); background: var(--weiss); color: var(--ink); font-weight: 600; }
  .springen:focus { top: var(--s2); }

  /* Schrift: große Überschriften eng, Fließtext normal, kleine Etiketten leicht gesperrt */
  h1, h2, h3 { margin: 0; text-wrap: balance; }
  h1 { font-weight: 600; font-size: clamp(2.9rem, 1.4rem + 5.2vw, 5.25rem); line-height: .97; letter-spacing: -0.035em; }
  h2 { font-weight: 600; font-size: clamp(2rem, 1.3rem + 3vw, 3.75rem); line-height: 1.02; letter-spacing: -0.03em; }
  h3 { font-weight: 600; font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; }
  .duenn { display: block; font-weight: 300; font-style: italic; }
  .augenbraue { font-size: 15px; line-height: 1.4; color: var(--orange); }
  .augenbraue strong { font-weight: 600; }
  .hell .augenbraue { color: var(--orange-text); }
  .intro { color: var(--text-dunkel); max-width: 34rem; }
  .hell .intro { color: var(--text-hell); }

  .kopf { display: grid; gap: var(--s3); justify-items: center; text-align: center; max-width: 44rem; margin: 0 auto var(--s5); }
  .kopf-links { justify-items: start; text-align: left; margin: 0 0 var(--s4); }

  .hell { background: var(--cream); color: var(--ink); color-scheme: light; }

  /* Knöpfe: Pill wie bisher, 44 px Tippfläche, Pfeil im Text */
  .knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
    min-height: 55px; padding: 0 var(--s4); border-radius: 999px;
    font-size: 17px; font-weight: 600; text-decoration: none; white-space: nowrap;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  .knopf-hell { background: var(--weiss); color: var(--ink); }
  .knopf-hell:hover { background: #ECE4DE; }
  .knopf-dunkel { background: var(--ink); color: var(--weiss); }
  .knopf-dunkel:hover { background: #2B2525; }
  .knopf-rand { border: 1px solid rgba(255, 255, 255, .42); color: var(--weiss); }
  .knopf-rand:hover { border-color: var(--weiss); }

  /* ---------- Kopfleiste ---------- */
  .kopfleiste { position: fixed; z-index: 20; top: calc(env(safe-area-inset-top, 0px) + var(--s1)); left: var(--s1); right: var(--s1); }
  .kopfleiste-innen {
    max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: var(--s2);
    padding: 5px 5px 5px var(--s2); border-radius: 999px;
    background: rgba(15, 12, 12, .74); border: 1px solid rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(13px); backdrop-filter: blur(13px);
  }
  .marke { display: flex; align-items: center; gap: var(--s1); min-height: 44px; margin-right: auto; text-decoration: none; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
  .marke img { width: 30px; height: auto; }
  .navi { display: none; }
  .kopf-knopf { display: none; min-height: 44px; padding: 0 var(--s3); font-size: 15px; }
  .menue { position: relative; }
  .menue summary {
    list-style: none; cursor: pointer; min-height: 44px; display: grid; place-items: center;
    padding: 0 var(--s3); border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 15px; font-weight: 600;
  }
  .menue summary::-webkit-details-marker { display: none; }
  .menue nav {
    position: absolute; right: 0; top: calc(100% + var(--s1)); min-width: 240px; max-height: calc(100svh - 89px); overflow-y: auto; overscroll-behavior: contain; padding: var(--s1);
    display: grid; border-radius: var(--r2); background: var(--ink); border: 1px solid var(--linie-dunkel);
  }
  .menue nav a { min-height: 44px; display: flex; align-items: center; padding: 0 var(--s2); border-radius: var(--r); text-decoration: none; }
  .menue nav a:hover { background: rgba(255, 255, 255, .08); }
  .menue-unter { display: grid; margin: 0 0 var(--s1) var(--s2); padding-left: var(--s1); border-left: 1px solid var(--linie-dunkel); }
  .menue-unter a { min-height: 40px; font-size: 15px; color: rgba(255, 255, 255, .72); }
  @media (min-width: 960px) {
    .kopf-knopf { display: inline-flex; }
  }
  /* Das volle Menü passt erst ab 1200 px in die Leiste, darunter steht es unter „Menü“ */
  @media (min-width: 1200px) {
    .menue { display: none; }
    .navi { display: flex; align-items: center; gap: 2px; }
    .navi > a, .navi-auf { min-height: 44px; display: flex; align-items: center; gap: 7px; padding: 0 var(--s2); border-radius: 999px; text-decoration: none; font-size: 15px; color: rgba(255, 255, 255, .82); transition: background-color .2s ease, color .2s ease; }
    .navi > a:hover, .navi-auf:hover, .navi-gruppe:focus-within .navi-auf { color: var(--weiss); background: rgba(255, 255, 255, .08); }
    .navi-auf::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
    .navi-gruppe { position: relative; }
    .navi-unter {
      position: absolute; left: 50%; top: calc(100% + var(--s2)); width: 300px; padding: var(--s1);
      display: grid; border-radius: var(--r2); background: var(--ink); border: 1px solid var(--linie-dunkel); box-shadow: 0 21px 55px rgba(0, 0, 0, .45);
      opacity: 0; visibility: hidden; transform: translate(-50%, -4px); transition: opacity .2s ease, transform .2s ease, visibility .2s;
    }
    .navi-unter::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--s2); }   /* Brücke: bleibt offen beim Hinüberfahren */
    .navi-gruppe:hover .navi-unter, .navi-gruppe:focus-within .navi-unter { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
    .navi-unter a { display: grid; gap: 2px; padding: 10px var(--s2); border-radius: var(--r); text-decoration: none; color: var(--weiss); }
    .navi-unter a:hover { background: rgba(255, 255, 255, .08); }
    .navi-unter strong { font-size: 15px; font-weight: 600; }
    .navi-unter span { font-size: 13px; color: var(--text-dunkel); }
  }

  /* ---------- Start ---------- */
  .start { position: relative; isolation: isolate; min-height: min(100svh, 1000px); display: flex; align-items: flex-end; padding-block: 0; overflow: hidden; }
  .start-medien { position: absolute; inset: 0; z-index: -1; background: var(--ink) url("media/start.jpg") center / cover; }
  .start-medien video { width: 100%; height: 100%; object-fit: cover; }
  .start-medien::after {
    content: ""; position: absolute; inset: 0;
    /* ab 50 % ganz dunkel: dort stehen die Untertitel des Reels (52–63 % der Höhe) */
    background: linear-gradient(180deg, rgba(15, 12, 12, .55) 0%, rgba(15, 12, 12, .3) 18%, rgba(15, 12, 12, .85) 40%, var(--ink) 50%);
  }
  .start-inhalt { display: grid; gap: var(--s3); padding-top: var(--s7); padding-bottom: var(--s5); }
  /* Davids Instagram-Screenshot genau dieses Reels (24.10.2026, fremder Name unkenntlich): auf dem Handy unter den Kennzahlen,
     am Desktop unten links neben der Video-Karte und ein Stück darüber. */
  .start-buehne { display: contents; }
  .start-beleg { width: min(100%, 300px); margin: 0 0 var(--s5); }
  .start-beleg img {
    display: block; width: 100%; height: auto; border: 4px solid var(--weiss); border-radius: var(--r2);
    background: var(--weiss); box-shadow: 0 21px 55px rgba(0, 0, 0, .55);
  }
  /* Oranger Hinweis: die Zahlen aus dem Screenshot groß und lesbar; am Desktop links daneben mit Pfeil auf die Zahlenzeile */
  .start-beleg figcaption { margin-bottom: var(--s2); font-size: 14px; line-height: 1.4; color: var(--text-dunkel); }
  .start-beleg figcaption strong { display: block; margin-bottom: 4px; font-size: 19px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; color: var(--orange); }
  .start-beleg .pfeil { display: none; }
  .h1-zeile { display: block; margin-top: var(--s3); font-size: 15px; line-height: 1.4; letter-spacing: .02em; font-weight: 500; font-style: normal; color: var(--orange); }
  .lead { max-width: 30rem; font-size: 18px; color: rgba(255, 255, 255, .86); }
  .knopfreihe { display: flex; flex-wrap: wrap; gap: var(--s2); }
  .start-hinweis { font-size: 14px; color: rgba(255, 255, 255, .78); }
  .start-hinweis .sterne { color: var(--orange); }
  /* Davids Porträt im Hauptknopf: zeigt, mit wem man spricht (statt Agentur) */
  .knopf-person { padding-left: var(--s1); }
  .knopf-person img { width: 39px; height: 39px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(15, 12, 12, .12); }
  .kennzahlen {
    list-style: none; margin: var(--s1) 0 0; padding: var(--s3) 0 0; border-top: 1px solid rgba(255, 255, 255, .16);
    display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--s3);
    font-size: 14px; line-height: 1.35; color: rgba(255, 255, 255, .78);
  }
  .kennzahlen strong { display: block; margin-bottom: 4px; font-size: 22px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; color: var(--weiss); font-variant-numeric: tabular-nums; }
  @media (min-width: 480px) { .kennzahlen { gap: var(--s4); } .kennzahlen strong { font-size: 26px; } }
  @media (max-width: 479px) {
    .knopfreihe .knopf { flex: 1 1 100%; }
    /* jede Kennzahl höchstens zweizeilig, damit alles über der Handy-Leiste bleibt */
    .kennzahlen { grid-template-columns: minmax(0, auto) max-content minmax(0, auto); column-gap: var(--s2); font-size: 13px; }
    .kennzahlen strong { font-size: 20px; }
  }
  @media (max-width: 959px) {
    .start-inhalt { padding-block: var(--s6) var(--s5); }   /* dreizeilige Überschrift: beide Knöpfe bleiben über der Handy-Leiste */
    .kennzahlen { margin-top: 0; padding-top: var(--s2); }
    .start-medien { bottom: auto; height: min(100svh, 1000px); }   /* Video nur im ersten Bild, nicht über den Screenshot gestreckt */
  }
  @media (min-width: 960px) {
    .start { align-items: center; background: radial-gradient(ellipse 52% 62% at 80% 52%, rgba(194, 52, 0, .3), transparent 72%), var(--ink); }
    .start-raster { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s5); align-items: center; }
    .start-medien { position: relative; inset: auto; z-index: 0; justify-self: end; height: min(76vh, 720px); aspect-ratio: 9 / 16; border-radius: var(--r2); overflow: hidden; box-shadow: 0 34px 89px rgba(0, 0, 0, .5); }
    .start-medien::after { display: none; }
    .start-buehne { display: block; position: relative; justify-self: end; }
    /* Die Untertitel des Reels stehen auf 52–63 % der Höhe: Karte beginnt darunter */
    .start-beleg { position: absolute; z-index: 1; left: -89px; top: 65%; width: 46%; margin: 0; }
    .start-beleg figcaption {
      position: absolute; top: calc(80% - 24px); right: calc(100% + 4px); margin: 0;
      display: flex; align-items: flex-start; gap: 4px; width: max-content; text-align: right;
    }
    .start-beleg .pfeil { display: block; color: var(--orange); }
    .kennzahlen { justify-self: start; column-gap: var(--s3); }   /* Linie nur so breit wie die Zahlen, läuft nicht unter die Karte; enger, damit der Screenshot-Hinweis Abstand hat */
    .start-inhalt { padding-block: var(--s7) var(--s6); }
  }
  @media (min-width: 960px) and (max-width: 1199px) {
    .start-beleg figcaption { display: none; }   /* zu wenig Platz neben Kennzahlen und Hinweiszeile */
  }

  /* ---------- Kunden ---------- */
  .kunden { padding-block: var(--s5); border-top: 1px solid var(--linie-dunkel); }
  .kunden p { text-align: center; font-size: 15px; color: var(--text-dunkel); margin-bottom: var(--s4); }
  .kunden p strong { color: var(--weiss); font-weight: 600; }
  .logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s3); }
  .logos img { height: 32px; width: auto; opacity: .72; }
  @media (min-width: 960px) { .logos { gap: var(--s4) var(--s5); } .logos img { height: 38px; } }

  /* ---------- Arbeiten: Reels mit Player ---------- */
  .reels {
    list-style: none; margin: 0 calc(var(--rand) * -1); padding: 0 var(--rand) var(--s2);
    display: flex; gap: var(--s2); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand);
    scrollbar-width: none;
  }
  .reels::-webkit-scrollbar { display: none; }
  .reel { position: relative; flex: 0 0 min(72vw, 300px); aspect-ratio: 9 / 16; border-radius: var(--r); overflow: hidden; background: var(--panel); scroll-snap-align: start; }
  .reel video { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
  .reel-etikett {
    position: absolute; top: var(--s2); left: var(--s2); max-width: calc(100% - 26px); padding: 4px var(--s2); border-radius: 999px;
    background: rgba(15, 12, 12, .64); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    font-size: 13px; font-weight: 600; line-height: 1.5; pointer-events: none;
  }
  .reel-fuss {
    position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: var(--s1);
    padding: var(--s5) var(--s2) var(--s2); background: linear-gradient(transparent, rgba(15, 12, 12, .8)); pointer-events: none;
  }
  .reel-zahl { font-size: 15px; font-weight: 600; line-height: 1.3; }
  .reel-ton {
    pointer-events: auto; margin-left: auto; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0;
    display: grid; place-items: center; cursor: pointer; color: var(--weiss);
    background: rgba(15, 12, 12, .64); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: background-color .2s ease;
  }
  .reel-ton:hover { background: rgba(15, 12, 12, .86); }
  .reel-ton[aria-pressed="true"] { background: var(--weiss); color: var(--ink); }
  .reel-ton .an { display: none; }
  .reel-ton[aria-pressed="true"] .an { display: block; }
  .reel-ton[aria-pressed="true"] .aus { display: none; }
  .reel-play {
    position: absolute; left: 50%; top: 50%; width: 55px; height: 55px; margin: -27px 0 0 -27px; padding: 0; border: 0; border-radius: 50%;
    display: grid; place-items: center; background: rgba(15, 12, 12, .55); color: var(--weiss); cursor: pointer;
    opacity: 0; transition: opacity .2s ease;
  }
  .reel.angehalten .reel-play, .reel-play:focus-visible { opacity: 1; }
  .reel-play .anhalten, .reel.angehalten .reel-play .anhalten { display: none; }
  .reel:not(.angehalten) .reel-play .anhalten { display: block; }
  .reel:not(.angehalten) .reel-play .abspielen { display: none; }
  /* Pause-Taste fürs Startvideo, am Desktop unten rechts in der Video-Karte */
  .start-pause { display: none; }
  @media (min-width: 960px) {
    .start-pause {
      position: absolute; right: var(--s2); bottom: var(--s2); z-index: 1; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
      display: grid; place-items: center; cursor: pointer; color: var(--weiss);
      background: rgba(15, 12, 12, .64); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .2s ease;
    }
    .start-pause:hover { background: rgba(15, 12, 12, .86); }
    .start-pause .abspielen, .start-pause.steht .anhalten { display: none; }
    .start-pause.steht .abspielen { display: block; }
  }
  @media (min-width: 1100px) {
    .reels { display: grid; grid-template-columns: repeat(3, minmax(0, 300px)); justify-content: center; overflow: visible; margin: 0; padding: 0; }
  }

  /* ---------- Businessfotos ---------- */
  .fotos {
    list-style: none; margin: 0 calc(var(--rand) * -1); padding: 0 var(--rand) var(--s2);
    display: flex; gap: var(--s2); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand);
    scrollbar-width: none;
  }
  .fotos::-webkit-scrollbar { display: none; }
  .fotos li { flex: 0 0 min(82vw, 420px); scroll-snap-align: start; }
  .fotos img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); background: #E8E1DB; }
  @media (min-width: 960px) { .fotos { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; margin: 0; padding: 0; } }
  /* Preisanker groß direkt unter dem Kopf, damit der Mehrwert vor den Bildern ankommt */
  .foto-wert { max-width: 34rem; margin: 0 auto var(--s5); text-align: center; color: var(--text-hell); }
  .foto-wert-label { display: inline-block; margin-bottom: var(--s2); padding: var(--s1) var(--s3); border-radius: var(--s3); background: var(--orange); color: var(--ink); font-size: clamp(1rem, .9rem + .4vw, 1.25rem); line-height: 1.3; font-weight: 600; letter-spacing: .01em; text-wrap: balance; }
  .foto-wert strong { display: block; margin-bottom: var(--s1); font-size: clamp(2.125rem, 1.6rem + 2vw, 3.25rem); line-height: 1; letter-spacing: -0.035em; font-weight: 600; color: var(--orange-text); font-variant-numeric: tabular-nums; }
  .foto-zitat { display: grid; gap: var(--s2); max-width: 40rem; margin: var(--s5) auto 0; text-align: center; }
  .foto-zitat blockquote, .ablauf-zitat blockquote { margin: 0; font-size: 20px; line-height: 1.45; font-style: italic; font-weight: 300; color: var(--ink); }
  .foto-zitat figcaption, .ablauf-zitat figcaption { font-size: 14px; color: var(--text-hell); }

  /* ---------- Ergebnisse: ein Fall pro Versprechen, mit Foto, Zahlen und Stimme (nach dem Vorbild von 4reach.de) ---------- */
  .faelle { display: grid; gap: var(--s4); }
  .fall { display: grid; overflow: hidden; border-radius: var(--r2); background: var(--panel); border: 1px solid var(--linie-dunkel); }
  .fall-bild { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 22%; }
  .fall-inhalt { display: grid; gap: var(--s3); align-content: center; padding: var(--s4) var(--s3); }
  .fall-wer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); font-size: 14px; color: var(--text-dunkel); }
  .fall h3 { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.125rem); line-height: 1.1; letter-spacing: -0.02em; font-weight: 600; }
  .fall-zahlen { list-style: none; margin: 0; padding: var(--s3) 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: var(--s3); border-block: 1px solid var(--linie-dunkel); }
  .fall-zahlen li { display: grid; align-content: start; gap: 6px; font-size: 14px; line-height: 1.35; color: var(--text-dunkel); }
  .fall-zahlen strong { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); line-height: 1.05; font-weight: 600; letter-spacing: -0.03em; color: var(--orange); font-variant-numeric: tabular-nums; }
  .fall blockquote { margin: 0; font-size: clamp(20px, 1.1rem + .5vw, 24px); line-height: 1.4; font-style: italic; font-weight: 300; color: var(--weiss); }
  .fall blockquote .hervor { font-weight: 500; color: var(--orange); }
  /* Firmenlogos farbig auf einem weißen Schild, alle gleich groß (Logos aus WordPress, ibrand.design und von David) */
  .marke-kachel { flex: none; display: grid; place-items: center; width: 88px; height: 44px; padding: 5px 8px; border-radius: 10px; background: var(--weiss); }
  .marke-kachel img { width: auto; height: auto; max-width: 72px; max-height: 34px; }
  .fall-wer strong { font-weight: 600; color: var(--weiss); }
  .fall-person { font-size: 14px; color: var(--text-dunkel); }
  .fall-person strong { color: var(--weiss); font-weight: 600; }
  /* Handy: kleines rundes Porträt am Namen statt großem Foto über der Karte */
  .fall-avatar { display: none; }
  @media (max-width: 959px) {
    .fall-bild { display: none; }
    .fall-person { display: flex; align-items: center; gap: var(--s2); }
    .fall-avatar { display: block; flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }
  }
  .reel[id] { scroll-margin-top: var(--s6); }
  /* Weitere Stimmen: kleine Laufleiste unter den Fällen (Vorbild ibrand.design). Pfeile nur, wenn sie überläuft. */
  .band { margin-top: var(--s5); }
  .band-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s3); }
  .band-titel { font-size: 15px; font-weight: 600; color: var(--weiss); }
  .band-pfeile { display: flex; gap: var(--s1); }
  .band-pfeil { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--orange); color: var(--ink); cursor: pointer; }
  .band-pfeil:hover { background: var(--weiss); }
  .band-reihe { list-style: none; margin: 0 calc(var(--rand) * -1); padding: 0 var(--rand) var(--s1); display: flex; gap: var(--s2); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); scrollbar-width: none; }
  .band-reihe::-webkit-scrollbar { display: none; }
  .band-karte { flex: 0 0 min(85vw, 360px); scroll-snap-align: start; display: grid; gap: var(--s3); align-content: space-between; padding: var(--s4) var(--s3); border-radius: var(--r2); background: var(--panel); border: 1px solid var(--linie-dunkel); }
  .band-karte blockquote { margin: 0; font-size: 17px; line-height: 1.5; font-style: italic; font-weight: 300; color: var(--weiss); }
  .band-karte .hervor { font-weight: 500; color: var(--orange); }
  .band-wer { display: flex; align-items: center; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--linie-dunkel); font-size: 13px; line-height: 1.4; color: var(--text-dunkel); }
  .band-wer strong { display: block; font-size: 15px; font-weight: 600; color: var(--weiss); }
  @media (min-width: 1100px) { .band-reihe { margin: 0; padding-inline: 0; } .band-karte { flex-basis: calc((100% - 2 * var(--s2)) / 3); } }
  @media (min-width: 960px) {
    .faelle { grid-auto-rows: 1fr; }   /* alle Fälle gleich hoch, egal wie viel Text */
    .fall { grid-template-columns: 1fr 2fr; }
    .fall:nth-child(even) { grid-template-columns: 2fr 1fr; }
    .fall h3 { font-size: 1.75rem; }
    .fall-zahlen strong { font-size: 1.875rem; }
    .fall blockquote { font-size: 22px; }
    .fall-bild { aspect-ratio: auto; height: 0; min-height: 100%; }   /* Höhe kommt vom Text, das Foto füllt sie */
    .fall:nth-child(even) .fall-bild { order: 2; }
    .fall-inhalt { padding: var(--s4) var(--s5); }
  }
  .mehr { margin-top: var(--s4); display: grid; justify-items: center; gap: var(--s2); text-align: center; }
  .mehr p { margin: 0; font-size: 17px; color: var(--weiss); text-wrap: balance; }

  .google { margin-top: var(--s4); text-align: center; font-size: 15px; color: var(--text-dunkel); }
  .google strong { color: var(--weiss); font-weight: 600; }
  .google .stern { color: var(--orange); }
  .google a { color: var(--weiss); font-weight: 600; text-decoration-color: var(--orange); text-underline-offset: 5px; }

  /* ---------- Zweispaltig: Überschrift links, Inhalt rechts ---------- */
  @media (min-width: 960px) {
    .zwei { display: grid; grid-template-columns: 1fr 1.618fr; gap: var(--s6); align-items: start; }
    .zwei .kopf-links { position: sticky; top: 110px; margin: 0; }
  }

  /* ---------- Ablauf ---------- */
  .schritte { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--linie-hell); }
  .schritt { display: grid; grid-template-columns: 44px 1fr; gap: var(--s1) var(--s2); padding: var(--s3) 0; border-bottom: 1px solid var(--linie-hell); }
  .schritt .nr { grid-row: span 2; font-size: 15px; font-weight: 600; line-height: 1.6; color: var(--orange-text); font-variant-numeric: tabular-nums; }
  .schritt p { color: var(--text-hell); }
  .ablauf-zitat { display: grid; gap: var(--s1); margin: var(--s4) 0 0; padding-left: var(--s3); border-left: 3px solid var(--orange-text); }

  /* ---------- Preise ---------- */
  .preise { display: grid; gap: var(--s3); max-width: 980px; margin: 0 auto; }
  @media (min-width: 768px) { .preise { grid-template-columns: 1fr 1fr; } }
  .preis { position: relative; display: grid; gap: var(--s2); align-content: start; padding: var(--s4); border-radius: var(--r2); background: var(--weiss); border: 1px solid var(--linie-hell); overflow: hidden; }
  .preis-name { font-size: 17px; }
  .preis-name span { font-weight: 400; color: var(--orange); }
  .preis-betrag { font-size: clamp(2.6rem, 2.1rem + 2vw, 3.4rem); line-height: 1; letter-spacing: -0.035em; font-weight: 600; font-variant-numeric: tabular-nums; }
  .preis-einheit { font-size: 14px; color: var(--text-hell); }
  .preis-text { color: var(--text-hell); }
  .preis-menge { font-weight: 600; }
  .preis .knopf { justify-self: start; margin-top: var(--s2); }
  .preis-komplett { background: var(--ink); color: var(--weiss); border-color: var(--ink); }
  .preis-komplett::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--orange); }
  .preis-komplett .preis-einheit, .preis-komplett .preis-text { color: var(--text-dunkel); }
  .preis-zusatz { display: grid; gap: var(--s3); max-width: 980px; margin: var(--s4) auto 0; }
  .beide { text-align: center; color: var(--text-hell); font-size: 15px; }
  .beide strong, .vorteile strong { color: var(--ink); font-weight: 600; }
  .vorteile { display: grid; gap: var(--s2); }
  .vorteile p { padding: var(--s3); border-radius: var(--r); background: rgba(15, 12, 12, .045); color: var(--text-hell); font-size: 15px; line-height: 1.55; }
  @media (min-width: 768px) { .vorteile { grid-template-columns: repeat(2, 1fr); } }
  .foerder { display: grid; gap: var(--s3); align-items: center; padding: var(--s4); border-radius: var(--r2); background: var(--weiss); border: 1px solid var(--linie-hell); }
  .foerder img { width: 89px; height: auto; }
  .foerder p { color: var(--text-hell); font-size: 15px; line-height: 1.55; }
  .foerder p strong { color: var(--ink); font-weight: 600; }
  .preis-link { text-align: center; font-size: 15px; }
  .preis-link a { color: var(--ink); font-weight: 600; text-decoration-color: var(--orange); text-underline-offset: 5px; }
  .preis-zusatz > *, .vorteile > *, .foerder > * { min-width: 0; }
  .foerder .knopf { justify-self: stretch; white-space: normal; text-align: center; padding: var(--s2) var(--s3); }
  @media (min-width: 768px) {
    .foerder { grid-template-columns: auto 1fr auto; gap: var(--s4); }
    .foerder .knopf { justify-self: end; white-space: nowrap; padding: 0 var(--s4); }
  }

  /* ---------- Über mich ---------- */
  .ueber { display: grid; gap: var(--s4); align-items: center; }
  .ueber img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 0% 40%; border-radius: var(--r2); }
  .ueber-text { display: grid; gap: var(--s3); }
  .ueber-text p:not(.augenbraue) { color: var(--text-hell); max-width: 34rem; }
  @media (min-width: 960px) {
    .ueber { grid-template-columns: 1fr 1.618fr; gap: var(--s6); }
    .ueber img { aspect-ratio: 4 / 5; object-position: 4% 50%; }
  }

  /* ---------- Fragen ---------- */
  .fragen { border-top: 1px solid var(--linie-hell); }
  .fragen details { border-bottom: 1px solid var(--linie-hell); }
  .fragen summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
    min-height: 44px; padding: var(--s3) 0; font-size: 18px; font-weight: 600; line-height: 1.35;
  }
  .fragen summary::-webkit-details-marker { display: none; }
  .fragen summary::after { content: "+"; flex: none; font-size: 28px; font-weight: 300; line-height: 1; color: var(--orange-text); transition: transform .3s ease; }
  .fragen details[open] summary::after { transform: rotate(45deg); }
  .fragen details p { max-width: 62ch; padding-bottom: var(--s3); color: var(--text-hell); }

  /* ---------- Abschluss ---------- */
  .abschluss { text-align: center; background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(194, 52, 0, .26), transparent 72%), var(--ink); }
  .abschluss .wrap { display: grid; gap: var(--s3); justify-items: center; }
  .abschluss .knopf { margin-top: var(--s2); }
  .kontakt-zeile { list-style: none; margin: var(--s2) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--s3); font-size: 15px; color: var(--text-dunkel); }
  .kontakt-zeile li { display: flex; align-items: center; min-height: 44px; }
  .kontakt-zeile a { color: var(--weiss); text-underline-offset: 5px; }
  .check-hinweis { max-width: 34rem; margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--linie-dunkel); font-size: 15px; color: var(--text-dunkel); }
  .check-hinweis a { color: var(--weiss); font-weight: 600; text-decoration-color: var(--orange); text-underline-offset: 5px; }

  /* ---------- Fußzeile und Handy-Leiste ---------- */
  .fuss { padding-block: var(--s5) calc(var(--s6) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linie-dunkel); font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .62); }
  .fuss p { margin: 0; }
  .fuss-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
  .fuss-marke { grid-column: 1 / -1; display: grid; align-content: start; gap: var(--s1); max-width: 26rem; }
  .fuss-raster > div > p + p { margin-top: var(--s1); }
  .fuss .fuss-titel { font-size: 17px; font-weight: 600; color: var(--weiss); }
  .fuss .fuss-kopf { margin-bottom: var(--s1); font-weight: 600; color: var(--weiss); }
  .fuss ul { list-style: none; margin: 0; padding: 0; display: grid; }
  .fuss a { display: inline-block; padding-block: 5px; text-decoration: none; color: inherit; transition: color .2s ease; }
  .fuss a:hover { color: var(--weiss); }
  .fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s3); margin-top: var(--s4); padding-top: var(--s2); border-top: 1px solid var(--linie-dunkel); font-size: 14px; }
  @media (min-width: 960px) {
    .fuss-raster { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); }
    .fuss-marke { grid-column: auto; }
  }
  .leiste {
    position: fixed; z-index: 30; left: var(--s1); right: var(--s1); bottom: calc(env(safe-area-inset-bottom, 0px) + var(--s1));
    display: grid; grid-template-columns: 1.618fr 1fr 1fr; gap: 4px; padding: 5px; border-radius: 999px;
    background: rgba(15, 12, 12, .88); border: 1px solid rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(13px); backdrop-filter: blur(13px);
  }
  .leiste a { min-height: 46px; display: grid; place-items: center; border-radius: 999px; text-decoration: none; font-size: 15px; font-weight: 600; }
  .leiste a:first-child { background: var(--weiss); color: var(--ink); }
  @media (min-width: 960px) { .leiste { display: none; } .fuss { padding-bottom: var(--s4); } }

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

  /* ---------- Ergänzungen für WordPress ---------- */
  [hidden] { display: none !important; }
  body .wp-site-blocks { padding: 0; }
  body .wp-site-blocks > * { margin-block: 0; }
  .admin-bar .kopfleiste { top: calc(32px + var(--s1)); }
  @media (max-width: 782px) { .admin-bar .kopfleiste { top: calc(46px + var(--s1)); } }