/* Flussfeuer – Startseite. Welt: plastisches Kanalmodell, drei Lichtstimmungen (dunkel, rot, hell). */

@font-face {
  font-family: "Archivo Black";
  src: url("../fonts/archivo-black-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-wght.woff2") format("woff2-variations"), url("../fonts/archivo-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farben */
  --rot: #E30113;
  --rot-tief: #B5000F;
  --graphit: #121213;
  --graphit-2: #1B1B1D;
  --schwarz: #0B0B0C;
  --weiss: #FFFFFF;
  --hell: #F1F1F2;
  --linie-hell: #D9D9DC;
  --text: #121213;
  --text-leise: #48484D;
  --text-auf-dunkel: #F4F4F5;
  --text-auf-dunkel-leise: #B9B9BF;

  /* Schrift */
  --schrift-display: "Archivo Black", "Archivo", sans-serif;
  --schrift-text: "Archivo", system-ui, sans-serif;
  --h1: clamp(2.3rem, 1.1rem + 3.2vw, 4.2rem);
  --h2: clamp(1.9rem, 1.2rem + 2.4vw, 3.4rem);
  --h3: clamp(1.15rem, 1rem + .5vw, 1.45rem);
  --text-gross: clamp(1.05rem, .98rem + .3vw, 1.22rem);
  --text-normal: 1.0625rem;

  /* Abstände */
  --rand: clamp(16px, 4vw, 48px);
  --breite: 1240px;
  --abschnitt: clamp(5rem, 3rem + 7vw, 9.5rem);
  --start-text-breite: 44rem;
  --start-text-oben: clamp(6rem, 3rem + 8vh, 9rem);

  /* Szene: Position des Schiffs im Startbild (Prozent der Szene) */
  --schiff-x: 72.5%;
  --schiff-y: 73.5%;
  --schiff-breite: 10.5%;

  /* Kopfzeile: feste Höhe, damit Sprungmarken ohne Skript genau darunter landen */
  --kopf-h: 4.25rem;
  --szene-rechts: 0%;

  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-h) - 1px); }
/* Sprung über das Menü: die Überschrift landet knapp unter der Kopfzeile, nicht die leere Oberkante des Abschnitts
   (gilt für alle Breiten; bis 2026-10-16 nur bis 960 px, am Desktop und Tablet quer blieb die Lücke) */
#so-laeuft-es, #leistungen, #ablauf, #fragen, #erstgespraech { scroll-margin-top: calc(1.75rem - var(--abschnitt)); }
/* Abschnitte, die genau einen Bildschirm füllen (Erstgespräch am Handy hoch und quer), landen mit ihrer Oberkante an der Kopfzeile */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 960px), (max-width: 640px) and (orientation: portrait) { #erstgespraech { scroll-margin-top: 0; } }
body {
  margin: 0;
  font-family: var(--schrift-text);
  font-size: var(--text-normal);
  line-height: 1.6;
  color: var(--text);
  background: var(--weiss);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-family: var(--schrift-display); font-weight: 400; line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); line-height: 1.2; letter-spacing: -.01em; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
::selection { background: var(--rot); color: var(--weiss); }
:focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; border-radius: 4px; }
.abschluss :focus-visible, .zusagen :focus-visible { outline-color: var(--weiss); }
/* In der weißen Buchungskarte wieder rot, sonst weißer Ring auf Weiß */
.abschluss .formular :focus-visible { outline-color: var(--rot); }

.rahmen { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }

.skip { position: absolute; left: var(--rand); top: -4rem; z-index: 100; background: var(--weiss); color: var(--text); padding: .6rem 1rem; border-radius: 6px; }
.skip:focus { top: 1rem; }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.25rem; padding: .85rem 1.6rem;
  border-radius: 999px; border: 2px solid transparent;
  font: 650 1rem/1.1 var(--schrift-text); text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.knopf:active { transform: translateY(1px); }
.knopf--rot { background: var(--rot); color: var(--weiss); box-shadow: 0 8px 18px -10px rgba(11, 11, 12, .45); }
@media (hover: hover) { .knopf--rot:hover { background: var(--rot-tief); } }
.knopf--hell-umriss { border-color: rgba(255, 255, 255, .55); color: var(--weiss); }
@media (hover: hover) { .knopf--hell-umriss:hover { border-color: var(--weiss); background: rgba(255, 255, 255, .08); } }
.knopf--weiss { background: var(--weiss); color: var(--rot); }
.knopf--weiss:hover { background: var(--hell); }
.knopf--weiss-umriss { border-color: rgba(255, 255, 255, .7); color: var(--weiss); }
.knopf--weiss-umriss:hover { border-color: var(--weiss); background: rgba(255, 255, 255, .1); }
.knopf--klein { min-height: 2.75rem; padding: .6rem 1.2rem; font-size: .95rem; }
.knopf--voll { width: 100%; }
.knopf:disabled { opacity: .6; cursor: progress; }

/* Kopfzeile */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 2rem;
  height: var(--kopf-h); padding: 0 var(--rand);
  background: var(--schwarz);
  transition: box-shadow .35s var(--ease);
}
/* Feste schwarze Fläche: Navigation bleibt über jedem Bild lesbar. Höhe bleibt beim Scrollen gleich, damit Sprungmarken genau unter der Kopfzeile landen. */
.kopf.ist-gescrollt { box-shadow: 0 8px 30px -18px rgba(0, 0, 0, .8); }
.kopf__marke img { width: clamp(150px, 14vw, 210px); height: auto; }
.kopf__nav { display: flex; gap: clamp(1rem, 2.4vw, 2.4rem); margin-left: auto; }
.kopf__nav a { color: var(--text-auf-dunkel); text-decoration: none; font-weight: 520; position: relative; padding-block: .3rem; }
.kopf__nav a.knopf { font-weight: 650; }
.kopf__nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--rot); transition: right .35s var(--ease); }
.kopf__nav a:hover::after, .kopf__nav a:focus-visible::after { right: 0; }
/* Menü-Knopf und Menü-Fuß gibt es nur am Handy und Tablet (Regeln unten bei max-width: 960px) */
.kopf__menue, .kopf__nav-fuss, .fahrt__punkte, .fahrt__wischen, .fahrt__mehr, .demo__info, .mehr-angaben, .start__mehr { display: none; }
/* „ buchen“ steht in eigenem span (am Handy ausgeblendet); der Abstand davor ist sonst die Lücke des Knopfs */
.kopf__knopf { gap: .27em; }

/* Szene: Bildfläche mit festem Seitenverhältnis 3:2, deckt wie object-fit: cover, rechts verankert */
.szene { position: absolute; top: 50%; right: var(--szene-rechts); aspect-ratio: 3 / 2; height: max(100%, calc(100vw / 1.5)); transform: translateY(-50%); }
.szene picture { display: contents; }
.szene__bild { width: 100%; height: 100%; object-fit: cover; }
.szene__schiff { position: absolute; z-index: 2; width: var(--schiff-breite); left: var(--schiff-x); top: var(--schiff-y); translate: -50% 0; transform-origin: 50% 0; will-change: transform; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .45)); }


/* So läuft eine Anfrage: Programmfenster mit vereinfachter Beispielanfrage, Schritt folgt dem Scrollstand (main.js) */

.demo { position: relative; height: var(--demo-h, min(64vh, 560px)); display: flex; flex-direction: column; border-radius: 24px; overflow: hidden;
  background: #161618; border: 1px solid rgba(255, 255, 255, .08); }
.demo__kopf { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, .08); background: #1B1B1D; }
.demo__titel { font-weight: 650; color: var(--weiss); font-size: .98rem; }
.demo__titel i { font-style: normal; }
.demo__titel span { display: block; font-weight: 450; color: var(--text-auf-dunkel-leise); font-size: .85rem; margin-top: .1rem; }
.demo__beispiel { margin-left: auto; font-size: .78rem; font-weight: 600; color: var(--weiss); border: 1.5px solid var(--rot); border-radius: 999px; padding: .25rem .65rem; }
.demo__hinweis { margin-top: .9rem; max-width: 52ch; font-size: .88rem; line-height: 1.5; color: var(--text-auf-dunkel-leise); }
.demo__uhr { display: flex; align-items: baseline; gap: .6rem; padding: .9rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.demo__uhr b { font: 400 1.5rem/1 var(--schrift-display); color: var(--weiss); font-variant-numeric: tabular-nums; }
.demo__uhr span { color: var(--text-auf-dunkel-leise); font-size: .9rem; }
.demo__verlauf { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: .2rem; padding: 1rem 1.25rem 1.25rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 1rem, #000 6rem); mask-image: linear-gradient(180deg, transparent 0, transparent 1rem, #000 6rem); }

/* Einträge: wachsen in der Höhe auf, dadurch rutscht der Verlauf ruhig nach oben */
.eintrag { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .55s var(--ease), opacity .45s var(--ease); }
.eintrag > div { min-height: 0; overflow: hidden; }
.eintrag.ist-da { grid-template-rows: 1fr; opacity: 1; }
.eintrag__innen { padding-block: .45rem; }
.meta { font-size: .78rem; color: var(--text-auf-dunkel-leise); margin-bottom: .35rem; font-variant-numeric: tabular-nums; }
.blase { max-width: 88%; border-radius: 16px; padding: .75rem .95rem; font-size: .93rem; line-height: 1.45; }
.blase--rein { background: #F1F1F2; color: var(--text); border-top-left-radius: 6px; }
.blase--raus { margin-left: auto; background: var(--rot); color: var(--weiss); border-top-right-radius: 6px; }
.eintrag--raus .meta { text-align: right; }
.blase small { display: block; margin-top: .35rem; opacity: .75; font-size: .78rem; }

.merkmale { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.merkmal { font-size: .8rem; border-radius: 8px; padding: .3rem .55rem; background: rgba(255, 255, 255, .08); color: var(--text-auf-dunkel); transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); border: 1px solid transparent; }
.merkmal b { font-weight: 650; color: var(--weiss); }
.merkmal--fehlt { border-color: var(--rot); color: #FFB3B8; background: transparent; }
.merkmal--fehlt b { color: #FFB3B8; }
.demo[data-schritt="1"] .merkmal--fehlt, .demo[data-schritt="2"] .merkmal--fehlt, .demo[data-schritt="3"] .merkmal--fehlt { border-color: transparent; background: rgba(255, 255, 255, .08); color: var(--text-auf-dunkel); }
.demo[data-schritt="1"] .merkmal--fehlt b, .demo[data-schritt="2"] .merkmal--fehlt b, .demo[data-schritt="3"] .merkmal--fehlt b { color: var(--weiss); }
.merkmal__wert-neu { display: none; }
.demo[data-schritt="1"] .merkmal__wert-alt, .demo[data-schritt="2"] .merkmal__wert-alt, .demo[data-schritt="3"] .merkmal__wert-alt { display: none; }
.demo[data-schritt="1"] .merkmal__wert-neu, .demo[data-schritt="2"] .merkmal__wert-neu, .demo[data-schritt="3"] .merkmal__wert-neu { display: inline; }

.angebot { background: #F1F1F2; color: var(--text); border-radius: 16px; padding: .9rem 1rem; font-size: .88rem; }
.angebot__kopf { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: .5rem; }
.angebot__zeile { display: flex; justify-content: space-between; gap: 1rem; padding: .26rem 0; border-top: 1px solid var(--linie-hell); font-variant-numeric: tabular-nums;
  opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.angebot__zeile span:last-child { white-space: nowrap; }
.angebot__summe { font-weight: 750; border-top: 2px solid var(--text); }
.ist-da .angebot__zeile { opacity: 1; transform: none; }
.ist-da .angebot__zeile:nth-child(3) { transition-delay: .15s; }
.ist-da .angebot__zeile:nth-child(4) { transition-delay: .3s; }
.ist-da .angebot__zeile:nth-child(5) { transition-delay: .45s; }
.ist-da .angebot__zeile:nth-child(6) { transition-delay: .6s; }
.ist-da .angebot__zeile:nth-child(7) { transition-delay: .75s; }
.ist-da .angebot__zeile:nth-child(8) { transition-delay: .9s; }

.status { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--text-auf-dunkel); margin-top: .1rem; }
.status svg { flex: none; width: 18px; height: 18px; }
.status--ende { color: var(--weiss); font-weight: 650; }

@media (max-width: 960px) {
  .demo { height: clamp(20rem, 48svh, 30rem); border-radius: 18px; }
  .demo__verlauf { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent .5rem, #000 3.5rem); mask-image: linear-gradient(180deg, transparent 0, transparent .5rem, #000 3.5rem); }
  .demo__hinweis { font-size: .8rem; }
  .demo__beispiel { font-size: .72rem; }
  .demo__kopf { padding: .7rem 1rem; }
  .demo__titel span { display: none; }
  .demo__uhr { padding: .6rem 1rem; }
  .demo__verlauf { padding: .6rem 1rem 1rem; }
  .demo__uhr b { font-size: 1.2rem; }
  .blase { font-size: .86rem; }
}

/* Einstieg */
/* Startbild beginnt unter der Kopfzeile und wird nie oben oder unten beschnitten: Höhe passt immer, links läuft das dunkle Bild in die Fläche aus */
.start { position: relative; margin-top: var(--kopf-h); min-height: calc(100svh - var(--kopf-h)); overflow: hidden; background: var(--graphit); color: var(--text-auf-dunkel); display: flex; align-items: center; isolation: isolate; }
.start::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(11, 11, 12, .9) 0%, rgba(11, 11, 12, .72) 34%, rgba(11, 11, 12, .1) 62%, transparent 75%); pointer-events: none; }
.start .szene { z-index: 0; top: 0; right: 0; height: 100%; transform: none; }
.start .szene__bild { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
.start__text { position: relative; z-index: 2; translate: 0 var(--text-y, 0px); width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; padding: clamp(2.5rem, 7vh, 5rem) var(--rand); }
.start h1 { font-size: var(--h1); max-width: 12em; color: var(--weiss); }
.start__auto { display: block; color: var(--rot); text-shadow: 0 2px 30px rgba(0, 0, 0, .5); }
/* Suchbegriff gehört zur H1, steht aber leise darunter (keine Dachzeile darüber) */
.start__thema { display: block; margin-top: 1.4rem; font-family: var(--schrift-text); font-size: var(--text-gross); font-weight: 700; line-height: 1.3; letter-spacing: 0; color: var(--weiss); }
.start h1 + .start__unter { margin-top: .5rem; }
.start__unter { margin-top: 1.6rem; max-width: var(--unter-breite, 36rem); font-size: var(--text-gross); color: var(--text-auf-dunkel); }
.start__knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: var(--knopf-abstand, 2.2rem); }
.start__hinweis { margin-top: 1rem; font-size: .95rem; color: var(--text-auf-dunkel-leise); }
.start__bildtext { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Ausgangslage */
.lage { background: var(--hell); padding-block: var(--abschnitt); }
.lage__titel { max-width: 20ch; color: var(--rot); }
.lage__liste { list-style: none; margin: var(--lage-abstand, clamp(3rem, 6vw, 5rem)) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 4rem); }
.lage__liste li { border-top: 2px solid var(--text); padding-top: 1.4rem; }
.lage__liste h3 { font-size: var(--lage-h3, clamp(1.4rem, 1.1rem + 1vw, 2rem)); line-height: 1.1; }
.lage__liste em { font-style: normal; color: var(--rot); }
.lage__liste p { margin-top: .9rem; color: var(--text-leise); max-width: 34ch; }

/* So läuft eine Anfrage */
.fahrt { background: var(--graphit); color: var(--text-auf-dunkel); padding-block: var(--abschnitt) clamp(3rem, 2rem + 4vw, 6rem); }
.fahrt__gitter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.fahrt__buehne { position: sticky; top: 6rem; }
.fahrt__text h2 { color: var(--weiss); max-width: 16ch; }
.fahrt__einleitung { margin-top: 1.2rem; max-width: 40ch; font-size: var(--text-gross); color: var(--text-auf-dunkel); }
.fahrt__einleitung + .fahrt__schritte { margin-top: 2.2rem; }
.nicht-trennen { white-space: nowrap; }
.fahrt__schritte { list-style: none; margin: 3rem 0 0; padding: 0; }
.fahrt__schritt { position: relative; padding: 1.6rem 0 1.6rem 4.2rem; border-top: 1px solid rgba(255, 255, 255, .14); opacity: .7; transition: opacity .5s var(--ease); min-height: var(--schritt-h, 30vh); }
.fahrt__schritt.ist-aktiv, .fahrt__schritt:focus-within { opacity: 1; }
.fahrt__nr { position: absolute; left: 0; top: 1.4rem; width: 2.8rem; height: 2.8rem; display: grid; place-items: center; border-radius: 10px; background: var(--rot); color: var(--weiss); font: 400 1.2rem/1 var(--schrift-display); }
.fahrt__schritt h3 { color: var(--weiss); }
.fahrt__schritt p { margin-top: .6rem; color: var(--text-auf-dunkel-leise); max-width: 46ch; }
.fahrt__freigabe { margin-top: 1rem; font-weight: 600; color: var(--weiss); max-width: 46ch; }
.fahrt__definition { margin-top: 1.2rem; color: var(--text-auf-dunkel-leise); max-width: 52ch; font-size: .98rem; }

/* Leistungen */
.leistungen { background: var(--weiss); padding-block: var(--abschnitt); }
.leistungen h2 { max-width: 18ch; }
.leistungen__einleitung { margin-top: 1.2rem; max-width: 44ch; font-size: var(--text-gross); }
/* Leistungen: Aufgaben, die wegfallen, werden beim Vorbeiscrollen rot durchgestrichen */
.leistungen__liste { list-style: none; margin: clamp(2.5rem, 5vw, 4.5rem) 0 0; padding: 0; }
.leistungen__liste li { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 1rem clamp(2rem, 5vw, 5rem); align-items: start; padding-block: var(--l-zeile, clamp(1.6rem, 1rem + 1.6vw, 2.6rem)); border-top: 1px solid var(--linie-hell); }
.leistungen__liste li:last-child { border-bottom: 1px solid var(--linie-hell); }
.leistungen__liste h3 { max-width: 22ch; font-size: var(--l-h3, clamp(1.5rem, 1rem + 1.9vw, 2.5rem)); line-height: 1.12; letter-spacing: -.02em; }
.leistungen__liste p { margin: .35rem 0 0; max-width: 46ch; color: var(--text-leise); }
.leistungen__liste strong { color: var(--rot-tief); font-weight: 700; }
.leistungen__haupt h3 { max-width: 20ch; font-size: var(--l-haupt-h3, clamp(1.8rem, 1.1rem + 2.6vw, 3.1rem)); line-height: 1.06; }
.leistungen__haupt p { color: var(--text); }
.erledigt { position: relative; display: inline-block; white-space: nowrap; color: #4E4E54; transition: color .5s ease; }
/* Strich über der Schrift, nicht dahinter */
.erledigt::after { content: ""; position: absolute; left: 0; top: 54%; width: var(--strich, 100%); height: .09em; background: var(--rot); pointer-events: none; }
.streichen:not(.ist-erledigt) .erledigt { color: var(--text); }
.leistungen__knopf { margin-top: clamp(2rem, 4vw, 3rem); }

/* Ablauf */
.ablauf { padding-block: var(--abschnitt); }
.ablauf__gitter { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
/* Desktop: Überschriftspalte etwas breiter, damit „Unternehmen ein“ zusammen in eine Zeile passt (vorher „ein“ allein) */
@media (min-width: 961px) { .ablauf__gitter { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); } }
.ablauf__titel { position: sticky; top: calc(var(--kopf-h) + 1.75rem); max-width: 14ch; }
.ablauf__liste { --fill: 0; position: relative; list-style: none; margin: 0; padding: 0 0 0 5rem; }
.ablauf__liste::before, .ablauf__liste::after { content: ""; position: absolute; left: 1.55rem; top: .5rem; bottom: .5rem; width: 3px; border-radius: 3px; }
.ablauf__liste::before { background: var(--linie-hell); }
.ablauf__liste::after { background: var(--rot); transform-origin: top; transform: scaleY(var(--fill)); }
.ablauf__liste li { position: relative; padding-bottom: var(--ablauf-schritt, clamp(2.2rem, 4vw, 3.2rem)); }
.ablauf__liste li:last-child { padding-bottom: 0; }
/* Kreismitte auf Höhe der Mitte der ersten H3-Zeile (H3: line-height 1.2, kein Abstand oben) */
.ablauf__nr { position: absolute; left: -5rem; top: calc(var(--h3) * .6 - 1.7rem); z-index: 1; width: 3.4rem; height: 3.4rem; display: grid; place-items: center; border-radius: 50%; background: var(--weiss); color: var(--text); border: 3px solid var(--linie-hell); font: 400 1.25rem/1 var(--schrift-display); transition: border-color .4s var(--ease), background-color .4s var(--ease), color .4s var(--ease); }
.ablauf__liste li.ist-erreicht .ablauf__nr { border-color: var(--rot); background: var(--rot); color: var(--weiss); }

/* Ablauf als Fluss: Streifen aus dem Modellbild (Kanal von oben, Material wie Startbild), Rot steigt beim Scrollen
   als Pegel von oben nach unten; die Stationen sitzen auf dem Wasser (main.js setzt Lage und Größe).
   Ohne Skript bleibt die gerade Linie oben stehen. */
.ablauf__strom { position: relative; --fluss-rand: 6.5rem; }
.ablauf__strom .ablauf__liste { padding-left: var(--fluss-rand); }
.ablauf__strom .ablauf__nr { left: calc(-1 * var(--fluss-rand) - .4rem); }
.fluss { position: absolute; pointer-events: none; display: none; --kern: 54px; --weich: 30px; --mitte: 51.25%; --fade-oben: 120px;
  /* Maske 1: weicher Ein- und Auslauf oben und unten. Maske 2: folgt dem Kanal (main.js, aus der bekannten Mittellinie),
     damit kein grauer Modellboden neben dem Wasser stehen bleibt; ohne Skript ein gerader Streifen. */
  --fluss-maske: linear-gradient(90deg, transparent calc(var(--mitte) - var(--kern) - var(--weich)), #000 calc(var(--mitte) - var(--kern)), #000 calc(var(--mitte) + var(--kern)), transparent calc(var(--mitte) + var(--kern) + var(--weich)));
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--fade-oben-js, var(--fade-oben)), #000 calc(100% - 150px), transparent 100%), var(--fluss-maske);
  -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0, #000 var(--fade-oben-js, var(--fade-oben)), #000 calc(100% - 150px), transparent 100%), var(--fluss-maske);
  mask-size: 100% 100%; mask-repeat: no-repeat;
  mask-composite: intersect; }
.hat-fluss .fluss { display: block; }
.hat-fluss .ablauf__liste::before, .hat-fluss .ablauf__liste::after { display: none; }
.fluss__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
/* Weiche Pegelkante: Rot läuft wie eingefärbtes Wasser nach unten */
.fluss__rot { -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--pegel, 0px) - 60px), transparent calc(var(--pegel, 0px) + 60px));
  mask-image: linear-gradient(180deg, #000 calc(var(--pegel, 0px) - 60px), transparent calc(var(--pegel, 0px) + 60px)); }
.hat-fluss .ablauf__nr { border-color: var(--weiss); box-shadow: 0 6px 14px -8px rgba(18, 18, 19, .35); will-change: transform; }
.hat-fluss .ablauf__liste li.ist-erreicht .ablauf__nr { border-color: var(--weiss); }
.ablauf__liste p { margin-top: .55rem; color: var(--text-leise); max-width: 56ch; }
/* Ablauf auf Schwarz (Nutzer 2026-10-15): Fluss aus dem dunklen Modell, geht ohne Schein in den Grund über */
.ablauf { background: var(--schwarz); color: var(--text-auf-dunkel); }
.ablauf h2, .ablauf h3 { color: var(--weiss); }
.ablauf .ablauf__liste p { color: var(--text-auf-dunkel-leise); }
.hat-fluss .ablauf__nr { color: var(--text); box-shadow: none; }
.hat-fluss .ablauf__liste li.ist-erreicht .ablauf__nr { color: var(--weiss); }
.ablauf .ablauf__liste::before { background: #3A3A3F; }

/* Zusagen */
.zusagen { position: relative; overflow: hidden; background: var(--rot); color: var(--weiss); padding-block: var(--abschnitt); isolation: isolate; }
.zusagen__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; z-index: -1; }
.zusagen::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(200, 0, 16, .55) 0%, rgba(200, 0, 16, .25) 45%, transparent 70%); }
.zusagen h2 { max-width: 12ch; }
.zusagen__liste { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; max-width: 40rem; }
.zusagen__liste li { padding-block: var(--z-zeile, 1.5rem); border-top: 1px solid rgba(255, 255, 255, .45); }
.zusagen__liste h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.zusagen__liste p { margin-top: .6rem; max-width: 50ch; }

/* Haltung */
.haltung { background: var(--weiss); padding-block: var(--abschnitt); }
.haltung__gitter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 6vw, 6rem); }
.haltung h2 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem); max-width: 16ch; }
.haltung p { margin-top: 1.1rem; color: var(--text-leise); font-size: var(--text-gross); max-width: 44ch; }

/* Fragen */
.fragen { background: var(--hell); padding-block: var(--abschnitt); }
.fragen__gitter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.fragen__kopf { position: sticky; top: calc(var(--kopf-h) + 1.75rem); }
/* Lange Überschrift: eigene Größe, damit „und Automatisierung“ zusammen in die Spalte passt (Text unverändert, SEO) */
.fragen__kopf h2 { max-width: 14ch; font-size: clamp(1.6rem, .5rem + 2.6vw, 2.9rem); }
.fragen__stand { margin-top: 1.2rem; color: var(--text-leise); font-size: .95rem; }
.fragen details { border-top: 1px solid var(--linie-hell); }
.fragen details:last-child { border-bottom: 1px solid var(--linie-hell); }
.fragen summary { list-style: none; cursor: pointer; position: relative; padding: 1.3rem 3rem 1.3rem 0; font-weight: 650; font-size: 1.12rem; line-height: 1.35; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::before, .fragen summary::after { content: ""; position: absolute; right: .4rem; top: 50%; width: 16px; height: 2px; background: var(--text); transition: transform .35s var(--ease), background-color .35s var(--ease); }
.fragen summary::after { transform: rotate(90deg); }
.fragen details[open] summary::after { transform: rotate(0deg); }
.fragen details[open] summary::before, .fragen details[open] summary::after { background: var(--rot); }
.fragen summary:hover { color: var(--rot-tief); }
.fragen details p { padding: 0 3rem 1.5rem 0; color: var(--text-leise); max-width: 62ch; }

/* Abschluss */
/* Rote Welt hinter dem Slogan: linker Teil der Landschaftsplatte (Filzhügel); der Kanal liegt rechts hinter dem Formular */
.abschluss { position: relative; background: var(--rot); color: var(--weiss); padding-block: var(--abschnitt); overflow: hidden; isolation: isolate; }
.abschluss__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0% 40%; z-index: -1; }
.abschluss::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(200, 0, 16, .5) 0%, rgba(200, 0, 16, .2) 50%, rgba(200, 0, 16, .35) 100%); }
.abschluss__gitter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.abschluss__slogan { font-family: var(--schrift-display); font-size: var(--slogan-size, clamp(3rem, 1.4rem + 6vw, 6rem)); line-height: .95; letter-spacing: -.03em; max-width: 9ch; }
.abschluss h2 { margin-top: 2.2rem; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); }
.abschluss__text > p:not(.abschluss__slogan) { margin-top: 1rem; max-width: 42ch; font-size: var(--text-gross); }
.abschluss__knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.formular { background: var(--weiss); color: var(--text); border-radius: 24px; padding: clamp(1.5rem, 3.5vw, 2.6rem); box-shadow: 0 40px 80px -40px rgba(80, 0, 6, .7); }
.formular__titel { font-size: 1.5rem; margin-bottom: 1rem; }
/* Kalender ist der Hauptweg, das Formular liegt dahinter und wird per Textlink umgeschaltet (ohne JS: beides sichtbar) */
.termin__text { margin: 0 0 1.2rem; color: var(--text-leise); }
.termin__platzhalter { display: grid; place-items: center; min-height: 18rem; padding: 1.5rem; border: 1px dashed var(--linie-hell); border-radius: 16px; background: var(--hell); color: var(--text-leise); text-align: center; }
.umschalten { display: none; margin-top: 1.4rem; padding: 0; border: 0; background: none; font: inherit; color: var(--text-leise); cursor: pointer; text-align: left; }
.umschalten span { color: var(--rot-tief); font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.umschalten:hover span { color: var(--rot); }
.js .umschalten { display: block; }
.js .formular:not(.zeigt-formular) #form-wrap, .js .formular.zeigt-formular .termin { display: none; }
#form-wrap.is-sent > .umschalten { display: none; }
#inquiry-form { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem 1rem; }
.field { grid-column: 1 / -1; display: grid; gap: .3rem; }
.field--halb { grid-column: span 1; align-content: end; }
.field label { font-weight: 620; font-size: .95rem; }
.optional { font-weight: 450; color: var(--text-leise); }
.field input, .field select, .field textarea { width: 100%; font: inherit; color: var(--text); background: var(--hell); border: 2px solid transparent; border-radius: 12px; padding: .62rem .85rem; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.field textarea { resize: vertical; min-height: 5.2rem; }
/* Platzhalter nur dort sichtbar, wo die Beschriftung über dem Feld entfällt (kleine Handys hochkant) */
.field ::placeholder { color: transparent; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--linie-hell); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--text); background: var(--weiss); }
.field-hint { font-size: .9rem; color: var(--text-leise); }
.field-error { display: none; font-size: .9rem; color: var(--rot-tief); font-weight: 600; }
.field.has-error .field-error { display: block; }
.field.has-error input, .field.has-error textarea { border-color: var(--rot); background: #FFF5F5; }
.hp { position: absolute; left: -9999px; }
#inquiry-form button { grid-column: 1 / -1; margin-top: .4rem; }
.form-status { grid-column: 1 / -1; font-size: .95rem; }
.form-status.is-error { color: var(--rot-tief); font-weight: 600; }
#form-wrap.is-sent form, #form-wrap.is-sent .formular__titel { display: none; }
#form-success h3 { font-size: 1.6rem; }
#form-success p { margin: .8rem 0 1.6rem; color: var(--text-leise); }
#form-success:focus { outline: none; }

/* Kanäle: Instagram und YouTube, Zeichen einfarbig nach den Markenregeln (Freiraum, Mindestgröße, nicht verändert) */
.kanaele { background: var(--hell); padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.kanaele__gitter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: center; }
.kanaele h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); max-width: 14ch; }
.kanaele__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }
.kanal { display: flex; align-items: center; gap: 1.1rem; padding: 1.1rem 1.3rem; border-radius: 18px; background: var(--weiss); color: var(--text); text-decoration: none; box-shadow: 0 1px 0 var(--linie-hell); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
@media (hover: hover) { .kanal:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -24px rgba(18, 18, 19, .5); } }
.kanal__zeichen { flex: none; width: 40px; height: 40px; margin: 6px; fill: var(--graphit); }
.kanal__text { display: grid; gap: .1rem; min-width: 0; }
.kanal__name { font-family: var(--schrift-display); font-size: 1.2rem; line-height: 1.1; }
.kanal__konto { color: var(--text-leise); font-size: .95rem; }
.kanal__aufruf { margin-left: auto; padding: .45rem .9rem; border-radius: 999px; background: var(--rot); color: var(--weiss); font-weight: 650; font-size: .9rem; }
@media (hover: hover) { .kanal:hover .kanal__aufruf { background: var(--rot-tief); } }
/* Desktop bis 1439 px: Karten nebeneinander sind knapp (1280: Name stieß an „Abonnieren“), daher etwas weniger Innenabstand */
@media (min-width: 961px) and (max-width: 1439px) { .kanal { gap: .8rem; padding-inline: 1rem; } }

/* Fußzeile: kompakt in zwei Zeilen, Marke links, Links rechts, darunter klein das Copyright */
.fuss { background: var(--schwarz); color: var(--text-auf-dunkel-leise); padding-block: var(--fuss-oben, 2.75rem) 1.75rem; }
.fuss__gitter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2.5rem; }
.fuss__marke { display: flex; align-items: center; gap: 1.25rem; }
.fuss__marke img { width: 170px; height: auto; }
.fuss__slogan { padding-left: 1.25rem; border-left: 1px solid rgba(255, 255, 255, .2); font-family: var(--schrift-display); color: var(--weiss); font-size: 1rem; line-height: 1.2; }
.fuss__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.fuss__links a { text-decoration: none; color: var(--text-auf-dunkel); }
.fuss__links a:hover { color: var(--weiss); text-decoration: underline; }
.fuss__copy { flex-basis: 100%; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .85rem; }

/* Einblenden beim Scrollen: sichtbar als Ausgangszustand, nur mit JS verschoben */
.js .einblenden { opacity: 0; translate: 0 24px; transition: opacity .9s var(--ease), translate .9s var(--ease); }
.js .einblenden.ist-sichtbar { opacity: 1; translate: 0 0; }

/* Startbereich am Desktop: Werte aus dem Regler-Panel, vom Nutzer gespeichert 2026-10-15 */
@media (min-width: 961px) {
  .start { --text-y: -25px; --schiff-y: 75.25%; --schiff-breite: 12.5%; }
  /* zweite Runde, gespeichert 22:45: fließend umgerechnet, damit es zwischen 961 und 1920 px stimmt (Werte bei 1440 px wie gespeichert) */
  body { --abschnitt: clamp(5rem, 3rem + 6.3vw, 9.5rem); }
  .fahrt { --demo-h: min(64vh, 569px); }
  .ablauf { --ablauf-schritt: clamp(2.2rem, 4vw, 3.3rem); }
  .zusagen { --z-zeile: 1.45rem; }
  .abschluss { --slogan-size: clamp(3rem, 1.4rem + 6vw, 5.3rem); }
  .fuss { --fuss-oben: 2.45rem; }
}

/* Tablet */
@media (max-width: 960px) {
  :root { --kopf-h: 3.75rem; }
  a, button, summary { -webkit-tap-highlight-color: transparent; }
  .kopf { gap: .6rem; }
  .kopf .knopf--klein { margin-left: auto; }

  /* Menü-Knopf: zwei Striche, werden beim Öffnen zum Kreuz */
  .kopf__menue { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; background: transparent; color: var(--weiss); cursor: pointer; transition: border-color .25s var(--ease), background-color .25s var(--ease); }
  .kopf__menue:active { background: rgba(255, 255, 255, .08); }
  .kopf__menue-zeichen { position: relative; width: 18px; height: 10px; }
  .kopf__menue-zeichen::before, .kopf__menue-zeichen::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: top .35s var(--ease), bottom .35s var(--ease), rotate .35s var(--ease); }
  .kopf__menue-zeichen::before { top: 0; }
  .kopf__menue-zeichen::after { bottom: 0; }
  .menue-offen .kopf__menue { border-color: var(--weiss); }
  .menue-offen .kopf__menue-zeichen::before { top: 4px; rotate: 45deg; }
  .menue-offen .kopf__menue-zeichen::after { bottom: 4px; rotate: -45deg; }

  /* Menü: ganze Fläche unter der Kopfzeile, große Einträge, unten der Weg zum Erstgespräch */
  .kopf__nav { position: fixed; inset: var(--kopf-h) 0 0 0; display: flex; flex-direction: column; gap: 0; margin: 0; padding: .75rem var(--rand) max(1.5rem, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; background: var(--schwarz); border-top: 1px solid rgba(255, 255, 255, .1); visibility: hidden; opacity: 0; transition: opacity .3s var(--ease), visibility 0s linear .3s; }
  .menue-offen .kopf__nav { visibility: visible; opacity: 1; transition: opacity .3s var(--ease); }
  .menue-offen, .menue-offen body { overflow: hidden; }
  .kopf__nav > a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid rgba(255, 255, 255, .12); color: var(--weiss); font: 400 clamp(1.65rem, 1.1rem + 2.6vw, 2.3rem)/1.1 var(--schrift-display); letter-spacing: -.02em;
    translate: 0 14px; opacity: 0; transition: translate .5s var(--ease), opacity .5s var(--ease), color .2s; }
  .kopf__nav > a::after { position: static; flex: none; width: .6rem; height: .6rem; margin-right: .35rem; background: none; border-top: 2.5px solid var(--rot); border-right: 2.5px solid var(--rot); rotate: 45deg; }
  .kopf__nav > a:active { color: var(--rot); }
  .menue-offen .kopf__nav > a { translate: 0 0; opacity: 1; }
  .menue-offen .kopf__nav > a:nth-child(2) { transition-delay: .04s; }
  .menue-offen .kopf__nav > a:nth-child(3) { transition-delay: .08s; }
  .menue-offen .kopf__nav > a:nth-child(4) { transition-delay: .12s; }
  .kopf__nav-fuss { display: grid; gap: .7rem; margin-top: auto; padding-top: 2.5rem; }
  .kopf__nav-fuss a::after { display: none; }
  .kopf__nav-fuss p { text-align: center; font-size: .95rem; color: var(--text-auf-dunkel-leise); }
  .kopf__nav-mail { justify-self: center; padding: .5rem; color: var(--text-auf-dunkel); }

  /* „So läuft eine Anfrage“ und „Datenschutz / Für wen“ bleiben bis 641 px zweispaltig wie am Desktop (Tablets hochkant) */
  .ablauf__gitter, .fragen__gitter, .abschluss__gitter, .kanaele__gitter { grid-template-columns: minmax(0, 1fr); }

  /* „Vereinfachtes Beispiel“ am Handy deutlich: eigene Zeile über dem Titel, rot gefüllt */
  .fahrt .demo__kopf { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .fahrt .demo__beispiel { order: -1; margin-left: 0; white-space: nowrap; background: var(--rot); border-color: var(--rot); font-size: .78rem; font-weight: 700; padding: .3rem .75rem; }

  /* Sprung aus dem Menü: Überschrift steht direkt unter der Kopfzeile statt nach dem ganzen Abschnittsabstand */
  .start { align-items: flex-end; }
  /* Bild oben, Text darunter: die Tore liegen nicht hinter der Überschrift */
  /* Tore möglichst mittig, aber das Bild reicht immer bis zum rechten Rand */
  .start .szene { top: 0; right: auto; left: 50%; height: 56svh; transform: translateX(calc(-1 * min(74%, 100% - 50vw))); }
  .start .szene__bild { -webkit-mask-image: none; mask-image: none; }
  /* Verlauf erst unter dem Schiff, damit es rot bleibt; Text beginnt darunter */
  .start::before { background: linear-gradient(180deg, transparent 0%, transparent 50svh, rgba(11, 11, 12, .88) 55svh, var(--graphit) 56svh); }
  .start__text { padding-top: 54svh; padding-bottom: 3rem; }
  .ablauf__titel, .fragen__kopf { position: static; }
  /* Tablet zweispaltig: „KI-Automatisierung“ passt nicht in die halbe Spalte, darf am Bindestrich umbrechen */
  .fahrt .nicht-trennen { white-space: normal; }
  .ablauf__strom { --fluss-rand: 6rem; }
  .fluss { --kern: 46px; --weich: 24px; }
}
/* Handy: „So läuft eine Anfrage“ als Wischkarten (bis 2026-10-16 galt das bis 960 px; Tablets haben jetzt die Desktop-Fassung) */
@media (max-width: 640px) and (orientation: portrait), (max-width: 640px) and (min-height: 501px) {
  .fahrt__gitter, .haltung__gitter { grid-template-columns: minmax(0, 1fr); }

  /* So läuft eine Anfrage: Überschrift, Schrittleiste, Karten zum Wischen, darunter das Fenster.
     Die sichtbare Karte bestimmt, was das Fenster zeigt (main.js). Nichts klebt, nichts wird verdeckt. */
  .fahrt__gitter { row-gap: 0; }
  .fahrt__text { display: contents; }
  .fahrt__text h2 { order: 1; }
  .fahrt__einleitung { order: 2; }
  .fahrt__buehne { order: 6; position: relative; top: auto; margin-top: 1.4rem; }
  /* Fenster zeigt am Handy nur den aktuellen Schritt, vollständig und ohne Ausblendung.
     Höhe folgt dem Schritt, der Wechsel läuft weich (main.js setzt die Höhe kurz fest). */
  .fahrt .demo { height: auto; transition: height .45s var(--ease); }
  .fahrt .angebot { padding: .75rem .85rem; font-size: .84rem; }
  .fahrt .angebot__zeile { padding: .2rem 0; line-height: 1.35; }
  .fahrt .demo__verlauf { justify-content: flex-start; gap: .1rem; padding: .75rem 1rem 1rem; -webkit-mask-image: none; mask-image: none; }
  .fahrt .eintrag { display: none; }
  .fahrt .eintrag.ist-jetzt { display: grid; grid-template-rows: 1fr; opacity: 1; animation: eintrag-rein .5s var(--ease) both; }
  .fahrt .blase { font-size: .92rem; }
  .fahrt__schritte { order: 4; position: relative; display: flex; gap: .75rem; margin: 1rem calc(-1 * var(--rand)) 0; padding: 0 var(--rand) .25rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); scrollbar-width: none; }
  .fahrt__schritte::-webkit-scrollbar { display: none; }
  .fahrt__schritt { flex: 0 0 min(84%, 24rem); scroll-snap-align: start; min-height: 0; padding: 1.15rem 1.15rem 1.3rem; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; background: var(--graphit-2); opacity: .5; transition: opacity .35s var(--ease), border-color .35s var(--ease); }
  .fahrt__schritt.ist-aktiv { opacity: 1; border-color: rgba(227, 1, 19, .6); }
  .fahrt__nr { position: static; width: 2.1rem; height: 2.1rem; margin-bottom: .85rem; border-radius: 8px; font-size: 1rem; }
  .fahrt__schritt h3 { font-size: 1.2rem; }
  .fahrt__schritt p { margin-top: .45rem; font-size: .98rem; line-height: 1.55; }
  /* Schrittleiste über dem Fenster: Kurznamen als Reiter (Nummern stehen schon auf den Karten), rote Linie wächst bis zum aktiven Schritt */
  .fahrt__punkte { order: 3; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1.5rem; --fortschritt: 0; }
  .fahrt__punkte::before, .fahrt__punkte::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; border-radius: 2px; }
  .fahrt__punkte::before { right: 0; background: rgba(255, 255, 255, .14); }
  .fahrt__punkte::after { width: calc(100% * var(--fortschritt)); background: var(--rot); transition: width .45s var(--ease); }
  .fahrt__punkte button { min-width: 0; padding: .7rem 0 .75rem; border: 0; background: none; color: var(--text-auf-dunkel-leise); font: 600 .8rem/1.2 var(--schrift-text); text-align: center; cursor: pointer; transition: color .3s var(--ease); }
  .fahrt__punkte button.ist-erreicht { color: var(--text-auf-dunkel); }
  .fahrt__punkte button[aria-current="true"] { color: var(--weiss); }
  .fahrt__wischen { order: 5; display: flex; justify-content: center; align-items: center; gap: .6rem; margin-top: .85rem; font-size: .85rem; color: var(--text-auf-dunkel-leise); }
  .fahrt__wischen::before, .fahrt__wischen::after { content: ""; width: .4rem; height: .4rem; border-top: 2px solid var(--rot); border-right: 2px solid var(--rot); }
  .fahrt__wischen::before { rotate: -135deg; }
  .fahrt__wischen::after { rotate: 45deg; }
  .fahrt__freigabe { order: 7; margin-top: 1.75rem; }
  .fahrt__definition { order: 8; }

}

/* So läuft eine Anfrage, Handy hochkant: Überschrift bis Beispielfenster füllen genau einen Bildschirm (main.js: fahrtEinpassen).
   Das Fenster bekommt den Rest der Höhe, gleich für alle Schritte; reicht es nicht, wird alles stufenweise kleiner (--fahrt-skala).
   Übriger Platz geht in die Abstände (--fahrt-luft). Hinweis, Freigabe und Definition folgen darunter, per Scrollen erreichbar.
   Kurzfassung nur in der Darstellung: Der Text steht vollständig im HTML (gleich für Handy und Desktop, wichtig für Google und
   KI-Suchen); der Rest jedes Kartentexts ist per „mehr“ aufklappbar, im Fenster fallen ein paar Beispielzeilen weg. */
@media (max-width: 640px) and (orientation: portrait) {
  .fahrt { --fs: var(--fahrt-skala, 1); --g: var(--fahrt-luft, 0px); padding-top: calc(1.1rem + var(--g)); }
  #so-laeuft-es { scroll-margin-top: 0; }
  .fahrt__text h2 { max-width: none; font-size: calc(min(1.75rem, (100vw - 2 * var(--rand)) / 13) * var(--fs)); line-height: 1.04; }
  .fahrt__einleitung { margin-top: .45rem; max-width: none; font-size: calc(clamp(1rem, 4.2vw, 1.1rem) * var(--fs)); line-height: 1.4; }
  .fahrt__punkte { margin-top: calc(.9rem + var(--g) * 1.5); }
  .fahrt__punkte button { padding: .5rem 0 .6rem; font-size: calc(clamp(.84rem, 3.6vw, .92rem) * var(--fs)); }
  .fahrt__schritte, .fahrt__einleitung + .fahrt__schritte { margin-top: calc(.7rem + var(--g) * .5); align-items: flex-start; }
  .fahrt__schritt { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .65rem; align-content: start; padding: .8rem .95rem .9rem; }
  .fahrt__nr { width: 1.75rem; height: 1.75rem; margin: 0; border-radius: 7px; font-size: calc(.95rem * var(--fs)); }
  .fahrt__schritt h3 { font-size: calc(clamp(1.12rem, 4.7vw, 1.25rem) * var(--fs)); line-height: 1.2; }
  .fahrt__schritt p { grid-column: 1 / -1; margin-top: .45rem; font-size: calc(clamp(.98rem, 4.1vw, 1.08rem) * var(--fs)); line-height: 1.5; }
  .js .fahrt:not(.zeigt-ganz):not(.fahrt--voll) .fahrt__rest { display: none; }
  .fahrt__mehr { display: inline; margin-left: .3rem; padding: 0; border: 0; background: none; font: inherit; font-weight: 650; color: var(--weiss); text-decoration: underline; text-decoration-color: var(--rot); text-underline-offset: .2em; cursor: pointer; }
  .fahrt__wischen { margin-top: .5rem; font-size: calc(.85rem * var(--fs)); }
  .fahrt__buehne { margin-top: calc(.35rem + var(--g) * .5); }
  .fahrt.ist-eingepasst .demo { height: var(--demo-fest); transition: none; }

  .js .fahrt:not(.zeigt-ganz):not(.fahrt--voll) .fahrt__kern--offen::after { content: "\00a0…"; }
  .fahrt.fahrt--voll .fahrt__mehr { display: none; }
  .fahrt--eng .fahrt__wischen { display: none; }
  /* Kleine iPhones (SE): alle Abstände etwas enger */
  .fahrt--eng { padding-top: calc(.55rem + var(--g)); }
  .fahrt--eng .fahrt__punkte { margin-top: calc(.5rem + var(--g) * 1.5); }
  .fahrt--eng .fahrt__punkte button { padding: .4rem 0 .45rem; }
  .fahrt--eng .fahrt__schritt { padding: .65rem .85rem .75rem; }
  .fahrt--eng .fahrt__schritt p { margin-top: .3rem; }
  .fahrt--eng .fahrt__buehne { margin-top: calc(.55rem + var(--g) * .5); }
  .fahrt--eng .demo__uhr { padding-top: .75rem; }

  /* Fenster kompakt: Kennzeichnung als Etikett auf dem Rahmen, ohne Titelzeile; die Uhr ist die erste Zeile.
     Je Schritt nur die Kernnachricht: Zeitzeilen fallen weg (die Uhr zeigt die Zeit), im Nachfassen
     entfällt die Abschlussmeldung, das Angebot zeigt zwei Positionen und die Summe. */
  .fahrt .demo { overflow: visible; margin-top: .55rem; }
  .fahrt .demo__kopf { display: contents; }
  .fahrt .demo__titel { display: none; }
  .fahrt .demo__beispiel { position: absolute; z-index: 2; top: 0; right: .9rem; transform: translateY(-50%); margin: 0; padding: .22rem .6rem; border: 0; background: var(--rot); font-size: calc(.74rem * var(--fs)); }
  .fahrt .meta { display: none; }
  .fahrt .eintrag[data-ab="3"]:has(.status) { display: none !important; }
  .fahrt .demo__uhr { padding: .85rem .9rem .5rem; white-space: nowrap; }
  .fahrt .demo__uhr b { font-size: calc(1.15rem * var(--fs)); }
  .fahrt .demo__uhr span { font-size: calc(clamp(.86rem, 3.6vw, .95rem) * var(--fs)); }
  .fahrt .demo__verlauf { padding: .55rem .9rem .8rem; }
  .fahrt .eintrag__innen { padding-block: .3rem; }
  .fahrt .blase { max-width: 92%; padding: .6rem .85rem; font-size: calc(clamp(.94rem, 3.95vw, 1.03rem) * var(--fs)); line-height: 1.45; }
  .fahrt .blase small { display: none; }
  .fahrt .merkmale { gap: .3rem; margin-top: .45rem; }
  .fahrt .merkmal { padding: .25rem .5rem; font-size: calc(clamp(.8rem, 3.35vw, .88rem) * var(--fs)); }
  /* Von den erkannten Angaben bleiben Produkt und Maße, die fehlenden bleiben alle */
  .fahrt .merkmal:nth-child(3), .fahrt .merkmal:nth-child(4), .fahrt .merkmal:nth-child(5) { display: none; }
  .fahrt .angebot { padding: .65rem .85rem; font-size: calc(clamp(.86rem, 3.6vw, .94rem) * var(--fs)); }
  .fahrt .angebot__kopf { margin-bottom: .3rem; }
  .fahrt .angebot__zeile { padding: .16rem 0; }
  /* Angebot: zwei Positionen, der Rest als eine Zeile */
  .fahrt .angebot__zeile:nth-child(n+4):nth-child(-n+7) { display: none; }
  .fahrt .angebot__zeile:nth-child(3) { position: relative; margin-bottom: 1.45em; }
  .fahrt .angebot__zeile:nth-child(3)::after { content: "+ 4 weitere Positionen"; position: absolute; left: 0; top: calc(100% + .2em); color: #6B6B70; font-size: .92em; }
  .fahrt .status { font-size: calc(clamp(.86rem, 3.6vw, .94rem) * var(--fs)); }

  /* Kartentext aufgeklappt: Karten wachsen, das Fenster tritt zurück */
  .fahrt .demo { transition: opacity .35s var(--ease); }
  .fahrt.zeigt-ganz .demo { opacity: .3; }
  .fahrt.zeigt-ganz .demo__verlauf { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }

  /* Unter dem Bildschirm */
  .fahrt .demo__hinweis { margin-top: calc(.9rem + var(--g)); font-size: .9rem; }
  .fahrt__freigabe { margin-top: calc(.85rem + var(--g)); font-size: 1.05rem; }
  .fahrt__definition { margin-top: .75rem; font-size: 1rem; }
}

/* Schmale Handys hochkant (iPhone SE, 375 px): etwas kompakter, damit das Fenster öfter ganz auf den Bildschirm passt.
   Einleitung in einer Zeile, Karten etwas breiter (Titel bricht seltener um), Merkmal „Produkt“ entfällt im Fenster. */
@media (max-width: 380px) and (orientation: portrait) {
  /* 320 px: Platzhalter „Unternehmen“ passt sonst nicht ins halbe Feld */
  .abschluss .field input { padding-inline: .55rem; }
  .fahrt__schritt { flex-basis: 88%; }
  .fahrt .merkmal:nth-child(1) { display: none; }
  .fahrt .blase { max-width: 100%; padding: .5rem .75rem; line-height: 1.38; }
  .fahrt .demo__uhr { padding-top: .75rem; }
  /* Freigabe-Meldung im Angebot entfällt hier; derselbe Gedanke steht im Text darunter („… entscheiden Sie.“) */
  .fahrt .eintrag[data-ab="2"]:has(.status) { display: none !important; }
  .fahrt .fahrt__schritt { padding: .7rem .9rem .8rem; }
  .fahrt .fahrt__schritt p { line-height: 1.42; }
}

/* Ablauf auf Tablet hochkant und Handy quer: Stationen und Fluss ein Stück vom linken Rand weg, sonst wird der Kanal angeschnitten */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 960px), (min-width: 641px) and (max-width: 960px) and (orientation: portrait) {
  .ablauf__strom { --fluss-rand: 7rem; }
  .ablauf__strom .ablauf__nr { left: calc(-1 * var(--fluss-rand) + 1.1rem); }
}

/* Leistungen auf Tablet hochkant und Handy quer: erster Punkt wie alle anderen (am Desktop bleibt er hervorgehoben) */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 960px), (min-width: 641px) and (max-width: 1100px) and (orientation: portrait) {
  .leistungen__haupt h3 { max-width: 22ch; font-size: var(--l-h3, clamp(1.5rem, 1rem + 1.9vw, 2.5rem)); line-height: 1.12; }
  .leistungen__haupt p { color: var(--text-leise); }
}

/* So läuft eine Anfrage auf Tablet hochkant und Handy quer: Das Fenster zeigt nur den aktuellen Schritt, vollständig,
   und ist so hoch wie dieser Schritt (kein leer gezogenes Fenster, nichts oben abgeschnitten). Schrift etwas größer. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 960px), (min-width: 641px) and (max-width: 1100px) and (orientation: portrait) {
  .fahrt .demo { height: auto; transition: height .45s var(--ease); }
  .fahrt .demo__verlauf { flex: none; justify-content: flex-start; padding-bottom: 1rem; -webkit-mask-image: none; mask-image: none; }
  .fahrt .eintrag { display: none; }
  .fahrt .eintrag.ist-jetzt { display: grid; grid-template-rows: 1fr; opacity: 1; animation: eintrag-rein .5s var(--ease) both; }
  .fahrt .blase { font-size: .95rem; }
  .fahrt .blase small { font-size: .8rem; }
  .fahrt .meta { font-size: .78rem; }
  .fahrt .merkmal { font-size: .85rem; }
  .fahrt .angebot { font-size: .9rem; }
  .fahrt .status { font-size: .9rem; }
  .fahrt .demo__hinweis { font-size: .88rem; }
}
/* Sehr flache Handys quer (SE): Chat eine Spur kleiner, damit jeder Schritt ganz ins Fenster passt */
@media (orientation: landscape) and (max-height: 400px) and (max-width: 960px) {
  .fahrt .blase { font-size: .9rem; line-height: 1.4; }
  .fahrt .merkmal { font-size: .8rem; }
  .fahrt .demo__uhr { padding-top: .7rem; }
  .fahrt .angebot { font-size: .84rem; }
  .fahrt .demo .demo__verlauf { padding-bottom: .6rem; }
  /* Freigabe-Meldung entfällt hier im Fenster; derselbe Gedanke steht im Text („… entscheiden Sie.“) */
  .fahrt .eintrag[data-ab="2"]:has(.status) { display: none !important; }
}
/* Handy quer: wenig Höhe. Fenster klebt direkt unter der Kopfzeile und passt immer auf den Bildschirm;
   Kennzeichnung als Etikett auf dem Rahmen, Kurzfassung des Beispiels wie am Handy hochkant. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 960px) {
  .fahrt__gitter { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: clamp(1.5rem, 4vw, 2.5rem); }
  /* Überschrift passt in die schmalere Textspalte („KI-Automatisierung“ bricht nicht um, rund 10,4 em breit) */
  .fahrt__text h2 { font-size: min(2.1rem, (100vw - 2 * var(--rand) - clamp(1.5rem, 4vw, 2.5rem)) / 2.4 / 11); }
  /* Nur das Fenster klebt (über die ganze Höhe der linken Spalte); der Hinweis steht unter dem Text rechts,
     sonst schöbe er sich beim Scrollen hinter das klebende Fenster */
  .fahrt__gitter { row-gap: 0; }
  .fahrt__buehne { display: contents; }
  .fahrt .demo { grid-column: 1; grid-row: 1 / span 2; align-self: start; position: sticky; top: calc(var(--kopf-h) + .75rem); }
  .fahrt__text { grid-column: 2; grid-row: 1; }
  .fahrt .demo__hinweis { grid-column: 2; grid-row: 2; margin-top: 1rem; max-width: none; }
  .fahrt .demo { overflow: visible; max-height: calc(100svh - var(--kopf-h) - 1.15rem); }
  .fahrt .demo__kopf { display: contents; }
  .fahrt .demo__titel { display: none; }
  .fahrt .demo__beispiel { position: absolute; z-index: 2; top: 0; right: .9rem; transform: translateY(-50%); margin: 0; padding: .22rem .6rem; border: 0; font-size: .74rem; }
  .fahrt .demo__uhr { padding: .8rem 1rem .45rem; white-space: nowrap; }
  .fahrt .demo__uhr b { font-size: 1.1rem; }
  .fahrt .demo__verlauf { flex: 0 1 auto; min-height: 0; padding: .5rem 1rem .8rem; }
  .fahrt .eintrag__innen { padding-block: .3rem; }
  .fahrt .blase { max-width: 100%; }
  .fahrt .meta, .fahrt .blase small { display: none; }
  .fahrt .eintrag[data-ab="3"]:has(.status) { display: none !important; }
  .fahrt .merkmal:nth-child(-n+5):not(:nth-child(2)) { display: none; }
  .fahrt .angebot { padding: .6rem .85rem; }
  .fahrt .angebot__kopf { margin-bottom: .3rem; }
  .fahrt .angebot__zeile { padding: .16rem 0; }
  .fahrt .angebot__zeile:nth-child(n+4):nth-child(-n+7) { display: none; }
  .fahrt .angebot__zeile:nth-child(3) { position: relative; margin-bottom: 1.45em; }
  .fahrt .angebot__zeile:nth-child(3)::after { content: "+ 4 weitere Positionen"; position: absolute; left: 0; top: calc(100% + .2em); color: #6B6B70; font-size: .92em; }
}
@media (max-width: 640px) and (orientation: portrait), (max-width: 640px) and (min-height: 501px) {
  /* Fluss vom Bildschirmrand weg: Stationen und Kanal ein Stück nach rechts, Kanal schmaler */
  .ablauf__strom { --fluss-rand: 6.25rem; }
  .ablauf__strom .ablauf__nr { left: calc(-1 * var(--fluss-rand) + .6rem); }
  .fluss { --kern: 40px; --weich: 22px; --fade-oben: 55px; }
  .lage__liste { grid-template-columns: 1fr; }
  /* Streichliste: jede Aufgabe bleibt einzeilig, damit der Strich durchgeht */
  .leistungen__liste h3, .leistungen__haupt h3 { font-size: min(1.5rem, 5.6vw); }
}

/* Handy: eigene Gestaltung, nicht nur gestapelt (2026-10-16). Kompakter Kopf, Startbild mit Knopf im ersten Bildschirm,
   ruhige Abstände, Text nie auf unruhigem Bild. */
@media (max-width: 640px) and (orientation: portrait), (max-width: 640px) and (min-height: 501px) {
  :root { --szene-rechts: -38%; }
  body { --abschnitt: 4.5rem; }
  .kopf__marke img { width: 128px; }
  .kopf .knopf--klein { min-height: 2.75rem; padding-inline: 1rem; font-size: .9rem; }
  .kopf__knopf-zusatz { display: none; }

  /* Startbild (vom Nutzer gewählt 2026-10-16): Überschrift oben, Modell als ruhiges Band, Knöpfe darunter.
     Der Abschnitt füllt genau einen Bildschirm, so ist nie ein Streifen des nächsten Abschnitts zu sehen.
     Übriger Platz sammelt sich über den Knöpfen (Daumenbereich); das Bild hängt nur an der Breite und wächst nicht mit.
     Überschrift genau 3 Zeilen: längste Zeile „Ab jetzt automatisch.“ = 11,26 em (gemessen), daher Breite / 11,6. */
  /* Freier Platz verteilt sich gleich über und unter dem Bild (margin-top: auto an Bild und Knöpfen), Mindestabstand = row-gap */
  .start { --start-abstand: clamp(.6rem, 2svh, 1.25rem); display: flex; flex-direction: column; align-items: stretch; row-gap: var(--start-abstand); min-height: calc(100svh - var(--kopf-h)); padding: clamp(1.1rem, 3svh, 2rem) 0 clamp(1.25rem, 3.5svh, 2.25rem); }
  .start::before { display: none; }
  .start__text { display: contents; }
  /* Schrift wächst mit der Breite im selben Verhältnis (Maß: iPhone Pro, 393 px), damit ein Pro Max wie ein vergrößertes Pro aussieht */
  .start h1 { order: 1; margin-inline: var(--rand); font-size: calc(min(2.4rem, (100vw - 2 * var(--rand)) / 11.6) * var(--start-skala, 1)); line-height: 1.06; }
  .start__thema { margin-top: .7rem; font-size: calc(clamp(.85rem, 3.87vw, 1.1rem) * var(--start-skala, 1)); }
  /* Bildhöhe setzt main.js (--bild-h): der Rest des Bildschirms nach Überschrift und Knöpfen, mindestens 68vw
     (1,5 × 68 = 102vw breit, deckt die Breite immer). Ränder laufen weich ins Dunkel. */
  .start .szene { order: 3; position: relative; top: auto; right: auto; left: 50%; flex: none; align-self: flex-start;
    height: var(--bild-h, 68vw); margin-top: auto; transition: height .45s var(--ease); transform: translateX(calc(-1 * min(74%, 100% - 50vw))); }
  /* Am Handy hochkant zeigt die Szene ein eigenes Bild aus einem Guss (schleusen-hoch): dasselbe Modell im Hochformat,
     der Kanal läuft hinter „Nachfassen“ bis unter die Kopfzeile weiter. Es deckt den Ausschnitt ab 35,98 % der Szenenbreite;
     seine unteren 1066 von 1536 Zeilen entsprechen der vollen Szenenhöhe (Tore gemessen deckungsgleich, Versatz 0 px),
     daher Höhe 1536 / 1066 = 144,09 % der Szene, unten bündig. Das Schiff bleibt auf seinem Platz. */
  .start .szene picture { display: contents; }
  /* Seit 2026-10-16 schleusen-hoch-allee (hinter „Nachfassen“ durchgehende Kaimauern, Lampen paarweise gegenüber, sonst wie schleusen-hoch-lang): dasselbe Bild auf 78,52 % verkleinert und unten (Wasser vor „Anfrage“) sowie seitlich
     verlängert. Umrechnung, damit Tore und Schiff exakt dort bleiben: Breite 64,02 % / 0,78516, links 35,98 % minus 110/1024
     der neuen Breite, Höhe 144,09 % × 1536/1206; das Bild reicht 330/1206 × 144,09 % = 39,43 % der Szenenhöhe unter die Szene,
     dort liegen die Knöpfe auf dem dunklen Wasser. */
  .start .szene__bild { position: absolute; z-index: 1; left: 27.221%; bottom: -39.43%; width: 81.538%; height: 183.52%; max-width: none; object-fit: fill; pointer-events: none;
    /* Oben weicher Einlauf; unten beginnt der Auslauf an derselben Stelle wie beim alten Bild (60,5 % = 77 % des alten),
       damit Helligkeit und Stimmung gleich bleiben, und läuft schwach unter den Knöpfen weiter; 78,5 % = Unterkante der Szene */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 60.5%, rgba(0, 0, 0, .78) 65.2%, rgba(0, 0, 0, .5) 70%, rgba(0, 0, 0, .3) 76%, rgba(0, 0, 0, .17) 84%, rgba(0, 0, 0, .07) 92%, transparent 99%), linear-gradient(90deg, transparent 0, #000 16%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 60.5%, rgba(0, 0, 0, .78) 65.2%, rgba(0, 0, 0, .5) 70%, rgba(0, 0, 0, .3) 76%, rgba(0, 0, 0, .17) 84%, rgba(0, 0, 0, .07) 92%, transparent 99%), linear-gradient(90deg, transparent 0, #000 16%);
    mask-composite: intersect; }
  /* Schrift und Knöpfe liegen über dem Bild */
  .start h1, .start__unter, .start__knoepfe, .start__hinweis { position: relative; z-index: 3; }
  .start h1 { text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
  /* Weicher dunkler Schleier hinter Überschrift und Text, folgt der Schrift; rechts am kräftigsten, dort läuft der helle Kanal */
  /* closest-side: der Verlauf ist an den Kastenrändern ganz ausgelaufen, so entsteht keine sichtbare Kante */
  .start h1::before, .start__unter::before { content: ""; position: absolute; z-index: -1; inset: -3rem calc(-1 * var(--rand)); pointer-events: none;
    background: radial-gradient(closest-side at 58% 50%, rgba(11, 11, 12, .82) 0%, rgba(11, 11, 12, .62) 55%, rgba(11, 11, 12, 0) 100%); }
  /* Aufgeklappt liegt der Text über dem Bild (Wunsch des Nutzers): nichts verschiebt sich, das Bild bleibt gleich groß.
     main.js setzt --unter-top auf die Unterkante von „KI-Beratung für den Mittelstand“. */
  .js .start.zeigt-text .start__unter { position: absolute; z-index: 3; left: 0; right: 0; top: var(--unter-top, 12rem); margin: 0 var(--rand); }
  /* Aufgeklappt wird das ganze Bild gedimmt (Tore bleiben schwach sichtbar), der Text steht als ruhiger Block davor.
     Etwas kleiner und enger gesetzt, damit er über dem Tor „Anfrage“ endet. */
  .js .start.zeigt-text .start__unter::before { display: none; }
  /* Über dem Schleier der Überschrift (der reicht bis in die erste Textzeile und hätte sie abgedunkelt) */
  .js .start.zeigt-text .start__unter { z-index: 5; }
  .js .start.zeigt-text .start__unter { font-size: calc(clamp(.86rem, 3.82vw, 1.05rem) * var(--start-skala, 1)); line-height: 1.5; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
  .start .szene__bild { transition: filter .45s var(--ease), opacity .45s var(--ease); }
  .js .start.zeigt-text .szene__bild { filter: brightness(.34) saturate(.8); }
  .js .start.zeigt-text .start__schiff { opacity: .35; transition: opacity .45s var(--ease); }
  .start__schiff { transition: opacity .45s var(--ease); }
  .start h1 { z-index: 4; }
  .start__knoepfe { order: 4; margin-inline: var(--rand); margin-top: auto; }
  .start__hinweis { order: 5; margin-inline: var(--rand); }
  .start .start__hinweis { margin-top: calc(.35rem - var(--start-abstand)); }
  /* Der kleine Text ist am Handy eingeklappt und öffnet sich per Pfeil direkt unter „KI-Beratung für den Mittelstand“
     (Wunsch des Nutzers 2026-10-16). Ohne Skript bleibt er sichtbar; Knopf und Klick in main.js. */
  .start.misst .szene { transition: none; }
  /* Bis main.js mit den echten Schriften eingepasst hat, bleibt der Startbereich unsichtbar: sonst verschieben sich Bild
     und Knöpfe (Lighthouse maß 0,32). Die Klasse start-wartet setzt ein Einzeiler im Kopf von index.html (vor dem ersten
     Malen; CSP-Hash in deploy/nginx.conf); main.js setzt .ist-eingepasst. Notfall: nach 3 s sichtbar, auch ohne Skript. */
  .start-wartet .start:not(.ist-eingepasst) > * { visibility: hidden; animation: start-notfall 0s 3s forwards; }
  .start__unter { order: 2; margin: calc(.65rem - var(--start-abstand)) var(--rand) 0; font-size: calc(clamp(.9rem, 3.99vw, 1.12rem) * var(--start-skala, 1)); line-height: 1.55; color: var(--text-auf-dunkel); }
  .js .start:not(.zeigt-text) .start__unter { display: none; }
  .js .start.zeigt-text .start__unter { animation: eintrag-rein .45s var(--ease) both; }
  .js .start__thema { cursor: pointer; }
  .start__mehr { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: -.95rem -.7rem -.95rem -.1rem; padding: 0; border: 0; background: none; vertical-align: middle; cursor: pointer; }
  .start__mehr::before { content: ""; width: .5rem; height: .5rem; margin-top: -.25rem; border-right: 2px solid var(--rot); border-bottom: 2px solid var(--rot); rotate: 45deg; transition: rotate .3s var(--ease), margin .3s var(--ease); }
  .start__mehr[aria-expanded="true"]::before { rotate: -135deg; margin-top: .3rem; }
  .start__knoepfe { gap: .2rem; }
  .start__knoepfe .knopf { font-size: clamp(.95rem, 4.07vw, 1.15rem); min-height: clamp(3.25rem, 13.2vw, 3.7rem); }
  .start__knoepfe .knopf { flex: 1 1 100%; }
  /* Zweiter Weg als ruhiger Textknopf mit Pfeil nach unten statt zweiter Pille */
  .start__knoepfe .knopf--hell-umriss { border-color: transparent; min-height: 2.9rem; gap: .65rem; font-weight: 600; }
  .start__knoepfe .knopf--hell-umriss::after { content: ""; width: .45rem; height: .45rem; margin-top: -.25rem; border-right: 2px solid var(--rot); border-bottom: 2px solid var(--rot); rotate: 45deg; }
  .start__hinweis { margin-top: .35rem; text-align: center; font-size: clamp(.82rem, 3.66vw, 1rem); }
  .start__hinweis, .start__knoepfe .knopf--hell-umriss { text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }

  .lage__liste { gap: 2rem; margin-top: 2.25rem; }
  .lage__liste li { padding-top: 1.1rem; }
  .lage__liste h3 { font-size: 1.45rem; }
  .lage__liste p { margin-top: .6rem; }

  /* Leistungen: alle Punkte gleich aufgebaut, ruhige Liste; der Fettdruck (Leistungsname) in Rot, eine Spur größer */
  .leistungen__liste { margin-top: 2rem; }
  .leistungen__liste li { grid-template-columns: 1fr; gap: .55rem; padding-block: 1.35rem; }
  .leistungen__liste p { margin-top: 0; font-size: 1rem; line-height: 1.55; }
  .leistungen__liste strong { color: var(--rot-tief); font-size: 1.04em; }
  .leistungen__knopf { width: 100%; }

  .ablauf__liste p { font-size: 1rem; }
  .haltung__gitter { gap: 2.75rem; }
  .haltung p { font-size: 1.02rem; }

  /* Zusagen: genau ein Bildschirm hoch, das Flussbild liegt über die ganze Fläche (Kanal mit Schleuse rechts,
     links das rote Land unter dem Text), dunkelrot abgetönt, damit die weiße Schrift überall gut lesbar ist.
     Abstände wachsen und schrumpfen mit der Bildschirmhöhe; reicht die Höhe nicht, wird der Abschnitt länger. */
  .zusagen { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--kopf-h) + 2px); padding-block: clamp(1.1rem, 3.5svh, 2.25rem); }
  .zusagen__bild { object-position: 79% 50%; }
  .zusagen::before { z-index: 0; background: linear-gradient(180deg, rgba(72, 0, 6, .6) 0%, rgba(72, 0, 6, .5) 45%, rgba(72, 0, 6, .64) 100%); }
  .zusagen__inhalt { position: relative; z-index: 2; width: 100%; }
  .zusagen h2, .zusagen__liste h3 { text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
  .zusagen__liste p { text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
  .zusagen__liste { margin-top: clamp(.9rem, 3.4svh, 2.25rem); }
  .zusagen h2 { max-width: none; font-size: min(2.25rem, 8.6vw); }
  .zusagen__liste li { padding-block: clamp(.6rem, 3.4svh - .75rem, 1.7rem); border-top-color: rgba(255, 255, 255, .5); }
  .zusagen__liste h3 { font-size: min(1.5rem, 5.6vw); }
  .zusagen__liste p { margin-top: clamp(.4rem, 1svh, .65rem); font-size: clamp(1rem, 4.2vw, 1.1rem); line-height: 1.5; }

  .fragen summary { padding: 1.1rem 2.5rem 1.1rem 0; font-size: 1.02rem; }
  .fragen summary:active { color: var(--rot-tief); }
  .fragen details p { padding-right: 0; }

  /* Erstgespräch kompakt: kleinerer Slogan, Name und Unternehmen nebeneinander, flachere Felder,
     freiwillige Angaben zum Aufklappen (Knopf aus main.js; ohne Skript bleiben sie sichtbar).
     Schrift in Feldern bleibt ≥ 16 px, sonst zoomt Safari beim Antippen. */
  .abschluss__slogan { font-size: 2.6rem; }
  .abschluss h2 { margin-top: 1.1rem; font-size: 1.6rem; }
  .abschluss__text > p:not(.abschluss__slogan) { font-size: 1rem; }
  .abschluss__gitter { gap: 1.75rem; }
  .formular { padding: 1.25rem 1.1rem 1.35rem; }
  .formular__titel { font-size: 1.3rem; margin-bottom: .8rem; }
  #inquiry-form { gap: .7rem .6rem; }
  .field { gap: .2rem; }
  .field label { font-size: .88rem; }
  .field input, .field select { min-height: 2.75rem; padding: .45rem .75rem; font-size: 1rem; }
  .field textarea { min-height: 4.6rem; padding: .55rem .75rem; font-size: 1rem; }
  .field-hint { font-size: .82rem; line-height: 1.4; }
  .field--optional { grid-column: 1 / -1; }
  .js #inquiry-form:not(.zeigt-optional) .field--optional { display: none; }
  #inquiry-form .mehr-angaben { grid-column: 1 / -1; margin-top: 0; display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem; padding: 0 .1rem; border: 0; border-block: 1px solid var(--linie-hell); background: none; color: var(--text); font: 600 .92rem/1.2 var(--schrift-text); cursor: pointer; }
  .mehr-angaben span { font-weight: 450; color: var(--text-leise); }
  .mehr-angaben::after { content: ""; flex: none; width: .5rem; height: .5rem; margin: -.25rem .3rem 0 auto; border-right: 2px solid var(--rot); border-bottom: 2px solid var(--rot); rotate: 45deg; transition: rotate .3s var(--ease), margin .3s var(--ease); }
  .mehr-angaben[aria-expanded="true"]::after { rotate: -135deg; margin-top: .25rem; }
  #inquiry-form button[type="submit"] { margin-top: .2rem; }
  .kanaele__liste { grid-template-columns: 1fr; }
  /* Fußzeile kompakt: Links nebeneinander, bricht bei Bedarf um */
  .fuss { --fuss-oben: 2rem; padding-bottom: 1.25rem; }
  .fuss__gitter { flex-direction: column; align-items: flex-start; gap: .9rem; }
  .fuss__links { flex-direction: row; gap: 0 1.5rem; }
  .fuss__links a { display: inline-block; padding-block: .35rem; }
  .fuss__links li:first-child { flex-basis: 100%; }
  /* Erst die Links, darunter Logo und Slogan */
  .fuss__links { order: 1; }
  .fuss__marke { order: 2; margin-top: .6rem; }
  .fuss__copy { order: 3; }
  .fuss__copy { flex-basis: auto; width: 100%; padding-top: .9rem; font-size: .8rem; }
  .fuss__marke img { width: 140px; }
  .fuss__slogan { white-space: nowrap; }
}

/* Tablets hochkant (641–1100 px, Hochformat; 2026-10-16): Schrift auf dem Bild wie am Desktop (Wunsch des Nutzers).
   Bild füllt die Höhe; Ausschnitt so verschoben, dass der rechte Rand bei 94 % der Szene liegt (alle drei Tore sichtbar),
   links bleibt die dunkle Hügelfläche frei für die Schrift. Schleier oben links, Tore und Schiff bleiben hell.
   Überschrift in drei Zeilen wie am Desktop, links über der Höhe des Tors „Nachfassen“. Kleiner Text per Pfeil. */
@media (min-width: 641px) and (max-width: 1100px) and (orientation: portrait) {
  .start { align-items: flex-start; min-height: calc(100svh - var(--kopf-h)); }
  /* Bild füllt die unteren 85 % und läuft oben ins Dunkel aus: Tore kleiner und weiter rechts unten, oben links mehr Platz für die Schrift */
  .start .szene { top: auto; bottom: 0; right: auto; left: 0; height: 85%; transform: translateX(calc(100vw - 94%)); }
  .start .szene__bild { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%); mask-image: linear-gradient(180deg, transparent 0, #000 14%); }
  .start::before { background:
    radial-gradient(78vw 44% at 0 24%, rgba(11, 11, 12, .9), rgba(11, 11, 12, .62) 50%, rgba(11, 11, 12, 0)),
    linear-gradient(180deg, rgba(11, 11, 12, .55) 0, rgba(11, 11, 12, 0) 12%); }
  .start__text { translate: none; padding: clamp(3rem, 7svh, 6rem) var(--rand) 2rem; }
  /* 11,6 em: drei Zeilen wie am Desktop („Anfragen. Angebote.“ / „Nachfassen.“ / „Ab jetzt automatisch.“, längste 11,26 em) */
  .start h1 { max-width: 11.6em; font-size: clamp(2.6rem, 5.6vw, 3.7rem); line-height: 1.04; }
  .start__thema { margin-top: 1.1rem; font-size: clamp(1.05rem, 1.9vw, 1.3rem); }
  /* Text schmal genug, dass er links vor dem Tor „Angebot“ endet */
  .start__unter { max-width: min(26rem, 39vw); font-size: clamp(1.02rem, 1.8vw, 1.2rem); }
  .start__knoepfe { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .start__knoepfe .knopf { min-height: 3.5rem; padding-inline: 2rem; font-size: 1.08rem; }
  .start__hinweis { font-size: 1rem; }
  /* Aufgeklappt: Überschrift und Knöpfe etwas kleiner, damit die Knöpfe nicht auf das Tor „Anfrage“ rutschen */
  .start.zeigt-text h1 { font-size: clamp(2.3rem, 5vw, 3.3rem); }
  .start.zeigt-text .start__unter { font-size: clamp(.98rem, 1.7vw, 1.12rem); }
  .start.zeigt-text .start__knoepfe { margin-top: 1.4rem; gap: .6rem; }
  .start.zeigt-text .start__knoepfe .knopf { min-height: 3.1rem; padding-inline: 1.6rem; font-size: 1rem; }

  /* Zusagen: Foto als Streifen oben, Text auf ruhigem Rot (wie am Handy) */
  .zusagen { padding-top: 0; }
  .zusagen__bild { position: relative; z-index: 0; height: clamp(16rem, 32vw, 24rem); object-position: 70% 50%; }
  .zusagen::before { inset: 0 0 auto 0; height: clamp(16rem, 32vw, 24rem); z-index: 1; background: linear-gradient(180deg, rgba(227, 1, 19, 0) 35%, var(--rot) 100%); }
  .zusagen__inhalt { position: relative; z-index: 2; margin-top: -2.5rem; }
}
/* Schmalstes iPad hochkant (iPad mini): Ausschnitt bis 91 % der Szene, die Tore stehen dadurch weiter rechts */
@media (min-width: 641px) and (max-width: 760px) and (orientation: portrait) {
  .start .szene { transform: translateX(calc(100vw - 91%)); }
}

/* iPhone quer (bis 500 px hoch): wie am Desktop, Schrift links auf dem Bild, Tore und Schiff rechts.
   Bild etwas höher als der Bereich (1,15 ×) und rechts angelehnt, links läuft es ins Dunkel aus. Kleiner Text per Pfeil. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 960px) {
  .start { align-items: center; min-height: calc(100svh - var(--kopf-h)); }
  .start .szene { top: 50%; left: auto; right: 0; height: calc((100svh - var(--kopf-h)) * 1.15); transform: translateY(-50%); }
  .start .szene__bild { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); }
  .start::before { background: linear-gradient(90deg, rgba(11, 11, 12, .92) 0%, rgba(11, 11, 12, .6) 40%, rgba(11, 11, 12, 0) 62%); }
  .start__text { padding: clamp(.75rem, 4svh, 1.5rem) var(--rand); }
  /* 11,4 em: „Ab jetzt automatisch.“ (11,26 em) passt in eine Zeile, „Nachfassen.“ rutscht in die zweite, so bleibt die Schrift links der Tore */
  .start h1 { max-width: 12em; font-size: clamp(1.45rem, 7.4svh, 2.1rem); line-height: 1.04; }
  .start__thema { margin-top: .6rem; font-size: clamp(.82rem, 3.9svh, 1rem); }
  .start__unter { max-width: min(30rem, 52vw); margin-top: .5rem; font-size: .92rem; }
  .start__knoepfe { margin-top: clamp(.8rem, 4.5svh, 1.4rem); gap: .6rem; }
  .start__knoepfe .knopf { min-height: 2.75rem; padding: .55rem 1.25rem; font-size: .95rem; }
  .start__hinweis { margin-top: .5rem; font-size: .85rem; }
  /* Aufgeklappt: alles etwas enger und kleiner, damit es auf einem Bildschirm bleibt */
  .start.zeigt-text .start__text { padding-block: 0; }
  .start.zeigt-text h1 { font-size: clamp(1.15rem, 5.6svh, 1.7rem); line-height: 1; }
  .start.zeigt-text .start__thema { margin-top: .4rem; }
  .start.zeigt-text .start__unter { margin-top: .3rem; font-size: .8rem; line-height: 1.35; }
  .start.zeigt-text .start__knoepfe { margin-top: .45rem; }
  .start.zeigt-text .start__hinweis { margin-top: .15rem; }
}

/* Kleiner Text per Pfeil auch am iPhone quer und am Tablet hochkant (am Handy hochkant steht das im Handy-Block) */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 960px), (min-width: 641px) and (max-width: 1100px) and (orientation: portrait) {
  .js .start:not(.zeigt-text) .start__unter { display: none; }
  .js .start.zeigt-text .start__unter { animation: eintrag-rein .45s var(--ease) both; }
  .js .start__thema { cursor: pointer; }
  .start__mehr { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: -.95rem -.7rem -.95rem -.1rem; padding: 0; border: 0; background: none; vertical-align: middle; cursor: pointer; }
  .start__mehr::before { content: ""; width: .5rem; height: .5rem; margin-top: -.25rem; border-right: 2px solid var(--rot); border-bottom: 2px solid var(--rot); rotate: 45deg; transition: rotate .3s var(--ease), margin .3s var(--ease); }
  .start__mehr[aria-expanded="true"]::before { rotate: -135deg; margin-top: .3rem; }
}

@keyframes eintrag-rein { from { opacity: 0; translate: 0 10px; } }

/* Zusagen am Handy quer: ein Bildschirm, Überschrift in einer Zeile, die drei Zusagen nebeneinander;
   Bild über die ganze Fläche, abgetönt wie hochkant */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 960px) {
  .zusagen { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--kopf-h) + 2px); padding-block: clamp(1rem, 5svh, 1.75rem); }
  .zusagen__bild { object-position: 70% 50%; }
  .zusagen::before { z-index: 0; background: linear-gradient(180deg, rgba(72, 0, 6, .6) 0%, rgba(72, 0, 6, .5) 45%, rgba(72, 0, 6, .64) 100%); }
  .zusagen__inhalt { position: relative; z-index: 2; width: 100%; }
  .zusagen h2 { max-width: none; font-size: clamp(1.5rem, 3.6vw, 2rem); }
  .zusagen h2, .zusagen__liste h3, .zusagen__liste p { text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
  .zusagen__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1rem, 3vw, 2rem); max-width: none; margin-top: clamp(.75rem, 4svh, 1.25rem); }
  .zusagen__liste li { padding-block: .8rem 0; border-top-color: rgba(255, 255, 255, .5); }
  .zusagen__liste h3 { font-size: clamp(1rem, 2.3vw, 1.2rem); line-height: 1.2; }
  .zusagen__liste p { margin-top: .4rem; font-size: clamp(.86rem, 1.85vw, .95rem); line-height: 1.45; }
}
/* Erstgespräch am Handy hochkant: genau ein Bildschirm, auf jedem Handy gleich aufgebaut.
   Überschrift, Text, Formular und dicht darunter klein der Slogan stehen als ein Block mit festen Abständen;
   freie Höhe verteilt sich oben und unten (auto-Abstände), der Block steht also mittig.
   Schrift und Felder wachsen mit der Handybreite. Reicht die Höhe nicht, wird der Abschnitt länger. */
@media (max-width: 640px) and (orientation: portrait) {
  .abschluss { display: flex; flex-direction: column; min-height: calc(100svh - var(--kopf-h) + 2px); padding-block: clamp(1rem, 6svh - 1.5rem, 3rem); }
  .abschluss__gitter { flex: 1; width: 100%; display: flex; flex-direction: column; gap: 0; }
  .abschluss__text { display: contents; }
  .abschluss h2 { order: 1; margin-top: auto; font-size: min(2rem, 7.6vw); }
  .abschluss__text > p:not(.abschluss__slogan) { order: 2; margin: clamp(.4rem, 1.2svh, .75rem) 0 0; font-size: clamp(.95rem, 4.2vw, 1.1rem); line-height: 1.5; }
  .abschluss .formular { order: 3; margin-top: clamp(1rem, 2.6svh, 1.6rem); padding-block: clamp(.9rem, 2.6svh, 1.6rem) clamp(1rem, 2.8svh, 1.7rem); }
  .abschluss__slogan { order: 4; margin-top: clamp(.8rem, 2.2svh, 1.2rem); margin-bottom: auto; max-width: none; font-size: min(1.1rem, 4.4vw); line-height: 1; letter-spacing: -.01em; }
  .abschluss .formular__titel { display: none; }
  .abschluss #inquiry-form { row-gap: clamp(.5rem, 1.6svh, 1rem); }
  .abschluss .field input, .abschluss .field select { min-height: clamp(2.75rem, 11.5vw, 3.2rem); font-size: clamp(1rem, 4.2vw, 1.1rem); }
  .abschluss .field textarea { min-height: 0; height: clamp(4.3rem, 18vw, 5rem); font-size: clamp(1rem, 4.2vw, 1.1rem); line-height: 1.4; }
  .abschluss #inquiry-form .mehr-angaben { min-height: clamp(2.75rem, 11.5vw, 3.1rem); font-size: clamp(.92rem, 3.9vw, 1rem); }
  .abschluss #inquiry-form button[type="submit"] { min-height: clamp(3rem, 12.5vw, 3.4rem); font-size: clamp(1rem, 4.2vw, 1.1rem); }
}
/* Handy hochkant (alle Größen gleich): Beschriftungen über den Feldern entfallen sichtbar,
   die Felder zeigen sie als Platzhalter (für Screenreader bleiben die Beschriftungen). Der Hinweis zur Nachricht
   steht im Platzhalter. */
@media (max-width: 640px) and (orientation: portrait) {
  .abschluss .field > label:not(:has(+ select)) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .abschluss .field ::placeholder { color: var(--text-leise); opacity: 1; }
  .abschluss .field-hint { display: none; }
}
/* Erstgespräch am Handy quer: Text links, Formular rechts, ein Bildschirm. Formular sehr kompakt:
   ohne eigenen Titel (die Überschrift links sagt es), Name, Unternehmen und E-Mail in einer Zeile,
   freiwillige Angaben zum Aufklappen wie hochkant, Nachricht zweizeilig. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 960px) {
  .abschluss { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--kopf-h) + 2px); padding-block: clamp(.75rem, 3svh, 1.25rem); }
  .abschluss__gitter { width: 100%; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.25rem, 3vw, 2.25rem); align-items: center; }
  .abschluss__text { display: flex; flex-direction: column; }
  .abschluss__slogan { order: 3; margin-top: 1rem; max-width: none; font-size: clamp(1.3rem, 2.6vw, 1.6rem); line-height: 1; }
  .abschluss h2 { order: 1; margin-top: 0; font-size: clamp(1.4rem, 3vw, 1.8rem); }
  .abschluss__text > p:not(.abschluss__slogan) { order: 2; margin-top: .6rem; font-size: clamp(.9rem, 1.9vw, 1rem); line-height: 1.45; }
  .abschluss .formular { padding: .85rem 1rem .95rem; border-radius: 18px; }
  .abschluss .formular__titel { display: none; }
  .abschluss #inquiry-form { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem .6rem; }
  .abschluss .field { gap: .15rem; }
  .abschluss .field--halb, .abschluss .field:has(#email) { grid-column: span 1; align-content: start; }
  .abschluss .field label { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .abschluss .field input, .abschluss .field select { min-height: 2.5rem; padding: .35rem .65rem; font-size: 1rem; }
  .abschluss .field textarea { min-height: 0; height: 3.2rem; padding: .45rem .65rem; font-size: 1rem; }
  .abschluss .field-hint { display: none; }
  .abschluss .field--optional { grid-column: span 1; }
  .abschluss .field--optional label { white-space: normal; line-height: 1.2; }
  .js .abschluss #inquiry-form:not(.zeigt-optional) .field--optional { display: none; }
  .abschluss #inquiry-form .mehr-angaben { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-height: 2.3rem; margin: 0; padding: 0 .1rem; border: 0; border-block: 1px solid var(--linie-hell); background: none; color: var(--text); font: 600 .88rem/1.2 var(--schrift-text); cursor: pointer; }
  .abschluss .mehr-angaben span { font-weight: 450; color: var(--text-leise); }
  .abschluss .mehr-angaben::after { content: ""; flex: none; width: .45rem; height: .45rem; margin: -.25rem .3rem 0 auto; border-right: 2px solid var(--rot); border-bottom: 2px solid var(--rot); rotate: 45deg; transition: rotate .3s var(--ease), margin .3s var(--ease); }
  .abschluss .mehr-angaben[aria-expanded="true"]::after { rotate: -135deg; margin-top: .25rem; }
  .abschluss #inquiry-form button[type="submit"] { margin-top: 0; min-height: 2.75rem; }
}
/* Socials und Fußzeile am Handy: alles eine Spur kleiner und ruhiger */
@media (max-width: 640px) and (orientation: portrait), (max-width: 640px) and (min-height: 501px) {
  .kanaele { padding-block: 2.25rem 2.5rem; }
  .kanaele__gitter { gap: 1.1rem; }
  .kanaele h2 { font-size: 1.5rem; }
  .kanaele__liste { gap: .65rem; }
  .kanal { gap: .85rem; padding: .75rem .95rem; border-radius: 14px; }
  .kanal__zeichen { width: 28px; height: 28px; margin: 3px; }
  .kanal__name { font-size: 1.05rem; }
  .kanal__konto { font-size: .86rem; }
  .kanal__aufruf { padding: .36rem .8rem; font-size: .82rem; }
  .fuss { --fuss-oben: 1.3rem; padding-bottom: .85rem; }
  .fuss__gitter { gap: .55rem; }
  .fuss__links a { padding-block: .25rem; font-size: .9rem; }
  .fuss__marke { margin-top: .35rem; gap: .9rem; }
  .fuss__marke img { width: 118px; }
  .fuss__slogan { padding-left: .9rem; font-size: .85rem; }
  .fuss__copy { padding-top: .6rem; font-size: .75rem; }
}
/* Socials und Fußzeile am Handy quer: Überschrift links, beide Kanäle nebeneinander; Fußzeile in zwei Zeilen
   (Marke links, Links rechts, darunter Copyright) */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 960px) {
  .kanaele { padding-block: 1.75rem; }
  .kanaele__gitter { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem 2rem; }
  .kanaele h2 { font-size: 1.5rem; }
  .kanaele__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .kanal { gap: .75rem; padding: .7rem .9rem; border-radius: 14px; }
  .kanal__zeichen { width: 26px; height: 26px; margin: 2px; }
  .kanal__name { font-size: 1rem; }
  .kanal__konto { font-size: .82rem; }
  .kanal__aufruf { padding: .34rem .75rem; font-size: .8rem; }
  .fuss { --fuss-oben: .85rem; padding-bottom: .6rem; }
  .fuss__gitter { gap: .4rem 1.5rem; }
  .fuss__marke { gap: .75rem; }
  .fuss__marke img { width: 100px; }
  .fuss__slogan { padding-left: .75rem; font-size: .78rem; }
  .fuss__links { gap: .2rem 1.1rem; }
  .fuss__links a { padding-block: .2rem; font-size: .82rem; }
  .fuss__copy { padding-top: .4rem; border-top-color: rgba(255, 255, 255, .08); font-size: .7rem; }
}
/* Handy quer, übrige Abschnitte: weniger Luft oben und unten, die Breite nutzen.
   Leistungen: die sechs Punkte in zwei Spalten (Durchstreichen bleibt). Ablauf: Überschrift breit in zwei Zeilen
   über dem Fluss, Fluss links wie hochkant. Fragen: Überschrift links (klebt beim Scrollen), Liste rechts. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 960px) {
  .leistungen, .ablauf, .fragen { --abschnitt: clamp(2.25rem, 9svh, 3.25rem); }
  .leistungen h2 { font-size: clamp(1.6rem, 3.6vw, 2.1rem); }
  .leistungen h2 { max-width: none; }
  .leistungen__einleitung { margin-top: .6rem; max-width: 60ch; font-size: 1rem; }
  .leistungen__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 3rem); margin-top: 1.5rem; }
  .leistungen__liste li { grid-template-columns: minmax(0, 1fr); gap: .45rem; padding-block: 1rem 1.1rem; }
  .leistungen__liste li:nth-last-child(2) { border-bottom: 1px solid var(--linie-hell); }
  .leistungen__liste h3, .leistungen__haupt h3 { max-width: none; font-size: clamp(1.15rem, 2.6vw, 1.4rem); }
  .leistungen__liste p { margin-top: 0; font-size: .95rem; line-height: 1.5; }
  .leistungen__knopf { margin-top: 1.5rem; }

  .fragen__gitter { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 3rem); }
  .fragen__kopf { position: sticky; top: calc(var(--kopf-h) + 1rem); }
  .ablauf__gitter { gap: 1.25rem; }
  .ablauf__titel { max-width: none; font-size: clamp(1.5rem, 3.4vw, 2rem); }
  .ablauf { --ablauf-schritt: 1.75rem; }
  .fragen__kopf h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); }
  .fragen__stand { margin-top: .75rem; }
  .fragen summary { padding-block: .95rem; font-size: 1rem; }
}
/* Schmale Handys quer (SE): Überschrift über den Kanälen und über den Fragen, daneben wäre es zu eng
   („und Automatisierung“ ragte in die Fragen) */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 760px) {
  .kanaele__gitter { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .fragen__gitter { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .fragen__kopf { position: static; }
  .fragen__kopf h2 { max-width: none; }
}
/* „Hier rutschen Ihnen Aufträge durch“ am Handy quer: ein Bildschirm, Überschrift in einer Zeile,
   drei Spalten mit kleinerer Überschrift und Text */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 960px) {
  .lage { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--kopf-h) + 2px); padding-block: clamp(1rem, 5svh, 2rem); }
  .lage > .rahmen { width: 100%; }
  .lage__titel { max-width: none; font-size: clamp(1.4rem, 3.4vw, 2rem); }
  .lage__liste { margin-top: clamp(.9rem, 4svh, 1.5rem); gap: clamp(1.1rem, 3vw, 2rem); }
  .lage__liste li { padding-top: .75rem; }
  .lage__liste h3 { font-size: clamp(1.02rem, 2.3vw, 1.3rem); line-height: 1.15; }
  .lage__liste p { margin-top: .45rem; font-size: clamp(.86rem, 1.85vw, .95rem); line-height: 1.5; }
}
/* Startbild am Handy hochkant: Hinweis „Kostenlos, 45 Minuten, per Video.“ direkt unter „Erstgespräch buchen“
   (er gehört zu diesem Knopf), „So läuft eine Anfrage“ darunter. Startbereich 2 px höher als der Bildschirm,
   damit Safari bei krummen Pixelwerten unten keinen hellen Streifen des nächsten Abschnitts zeigt. */
@media (max-width: 640px) and (orientation: portrait) {
  .start { min-height: calc(100svh - var(--kopf-h) + 2px); }
  .start__knoepfe { display: contents; }
  /* flex: 0 0 auto, weil die Knöpfe hier direkt in der senkrechten Startspalte stehen: Mit 1 1 100% wuchsen sie in die Höhe,
     sobald das Bild gedeckelt war (Galaxy Fold außen: 94 px hohe Knöpfe) */
  .start__knoepfe .knopf { position: relative; z-index: 3; margin-inline: var(--rand); flex: 0 0 auto; }
  .start__knoepfe .knopf--rot { order: 4; margin-top: auto; }
  .start .start__hinweis { order: 5; margin-top: calc(.45rem - var(--start-abstand)); }
  .start__knoepfe .knopf--hell-umriss { order: 6; margin-top: calc(.3rem - var(--start-abstand)); }
}
/* Ablauf am Handy hochkant: Überschrift in drei statt vier Zeilen („So führt Flussfeuer“ / „KI in Ihrem“ / „Unternehmen ein“) */
@media (max-width: 640px) and (orientation: portrait) {
  .ablauf__titel { max-width: none; }
}
/* Sehr flache Handys quer (z. B. Samsung Galaxy S, 360 px hoch): Formular im Erstgespräch eine Spur flacher */
@media (orientation: landscape) and (max-height: 380px) and (max-width: 960px) {
  .abschluss .formular { padding-block: .65rem .75rem; }
  .abschluss #inquiry-form { row-gap: .4rem; }
  .abschluss #inquiry-form button[type="submit"] { min-height: 2.5rem; }
}
/* „So läuft eine Anfrage“ am Handy hochkant, mehr Ruhe: nur noch ein Kasten (die Karte). Das Beispiel ist ein Band
   über die ganze Breite mit je einer Linie oben und unten; Rot nur dort, wo es etwas bedeutet (Nummer, Fortschritt,
   Etikett); der Wischhinweis blendet sich nach dem ersten eigenen Wischen oder Antippen aus; Kartentitel einzeilig. */
@media (max-width: 640px) and (orientation: portrait) {
  .fahrt .demo { margin-inline: calc(-1 * var(--rand)); border: 0; border-block: 1px solid rgba(255, 255, 255, .14); border-radius: 0; }
  .fahrt .demo__uhr, .fahrt .demo__verlauf { padding-inline: var(--rand); }
  .fahrt .demo__uhr { border-bottom-color: rgba(255, 255, 255, .07); }
  .fahrt .demo { margin-top: 1.3rem; }
  .fahrt .demo__uhr { padding-top: 1.45rem; }
  .fahrt .demo__beispiel { right: var(--rand); }
  .fahrt .demo__hinweis { margin-inline: 0; }
  .fahrt__schritt.ist-aktiv { border-color: rgba(255, 255, 255, .26); }
  .fahrt__wischen { transition: opacity .5s var(--ease); }
  .fahrt__wischen::before, .fahrt__wischen::after { border-color: currentColor; }
  .fahrt.ist-gewischt .fahrt__wischen { opacity: 0; }
  .fahrt__mehr { text-decoration-color: rgba(255, 255, 255, .45); }
  .fahrt__schritt { flex-basis: 88%; }
  .fahrt__schritt h3 { font-size: calc(clamp(1.06rem, 4.4vw, 1.22rem) * var(--fs)); }
  /* Einleitung immer in einer Zeile (Satz 23,2 em breit, etwas Reserve für Safari) */
  .fahrt__einleitung { font-size: calc(min(1.1rem, (100vw - 2 * var(--rand)) / 24) * var(--fs)); }
}
/* Hinweis „Stark vereinfacht …“ am Handy hochkant hinter dem Etikett: Knopf „Vereinfachtes Beispiel ⓘ“ an derselben Stelle,
   der Text erscheint als kleine Tafel oben im Beispiel; Antippen der Tafel oder erneut des Knopfs schließt sie */
@media (max-width: 640px) and (orientation: portrait) {
  .js .fahrt .demo .demo__beispiel { visibility: hidden; }
  .js .fahrt .demo__info { position: absolute; z-index: 3; top: 1.4rem; right: var(--rand); transform: translateY(-50%); display: inline-flex; align-items: center; gap: .5rem; min-height: 2.1rem; padding: .3rem .35rem .3rem .85rem; border: 0; border-radius: 999px; background: var(--rot); color: var(--weiss); font: 650 .9rem/1.2 var(--schrift-text); cursor: pointer; box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .6); }
  .demo__info span { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: rgba(255, 255, 255, .22); font: 700 .85rem/1 var(--schrift-text); font-style: italic; }
  .js .fahrt .demo__hinweis { position: absolute; z-index: 4; top: calc(1.4rem + 1.3rem); left: var(--rand); right: var(--rand); margin: 0; padding: .75rem .9rem; border-radius: 12px; background: #24242A; color: var(--text-auf-dunkel); font-size: .88rem; line-height: 1.45; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .6); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s; cursor: pointer; }
  .js .fahrt .zeigt-hinweis .demo__hinweis { opacity: 1; visibility: visible; transform: none; transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s; }
}
/* „So läuft eine Anfrage“ hochkant, Feinschliff: Nummer klein und grau vor dem Titel statt rotem Quadrat
   (der Reiter zeigt den Schritt schon), Karten nur so hoch wie ihr Text, Freigabe-Satz mit kurzer roter Linie darüber als Fazit */
@media (max-width: 640px) and (orientation: portrait) {
  .fahrt__schritt { align-items: baseline; column-gap: .45rem; }
  .fahrt__nr { width: auto; height: auto; display: inline; border-radius: 0; background: none; color: var(--text-auf-dunkel-leise); font: 400 calc(clamp(1.06rem, 4.4vw, 1.22rem) * var(--fs))/1.2 var(--schrift-display); }
  .fahrt__nr::after { content: "·"; margin-left: .45rem; }
  .fahrt__schritt.ist-aktiv .fahrt__nr { color: var(--weiss); }
  .fahrt__freigabe::before { content: ""; display: block; width: 2rem; height: 2px; margin-bottom: .6rem; background: var(--rot); }
}
/* Startbild Handy hochkant: Schiff etwas größer und näher an „Erstgespräch buchen“ (das Wasser läuft seit schleusen-hoch-lang unter die Knöpfe weiter) */
@media (max-width: 640px) and (orientation: portrait) {
  .start { --schiff-y: 75.4%; --schiff-breite: 13.6%; }
}
/* Startbild Handy hochkant: hinter dem Pfeil bei „KI-Beratung für den Mittelstand“ steht im Bild eine ferne Lampe;
   ein weicher dunkler Fleck hinter dem Pfeil nimmt ihr die Konkurrenz (ohne das Bild zu ändern) */
@media (max-width: 640px) and (orientation: portrait) {
  .start__mehr { position: relative; }
  /* liegt im Stapel der Überschrift hinter der Schrift, über dem Bild; ohne Kante ausgeblendet */
  .start__mehr::after { content: ""; position: absolute; z-index: -1; inset: -1.4rem -1.2rem; pointer-events: none; background: radial-gradient(closest-side, rgba(11, 11, 12, .95) 0%, rgba(11, 11, 12, .8) 45%, rgba(11, 11, 12, 0) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* 0s statt .01ms: Mit .01ms lief jede Eigenschaft noch als Übergang, startEinpassen las dann alte Höhen */
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: .01ms !important; }
  .js .einblenden { opacity: 1; translate: none; }
}
/* Sehr schmale Handys (bis 360 px): „KI-Automatisierung“ darf am Bindestrich umbrechen, sonst wird die Seite breiter als der Bildschirm */
/* Sehr schmale Handys (bis 360 px, z. B. Samsung Galaxy S, Fold außen): Socials und Fußzeile übernehmen die
   kompakten Handy-Werte; nur der Abstand in den Kanal-Karten wird noch etwas enger */
@media (max-width: 360px) {
  .demo__uhr b { white-space: nowrap; }
  .kanal { gap: .65rem; }
  .fuss__marke { gap: .8rem; }
}

/* Rechtstexte (Impressum, Datenschutz) */
.recht { max-width: 46rem; padding-block: 9rem 6rem; }
.recht h1 { font-size: var(--h2); hyphens: auto; overflow-wrap: break-word; }
.recht h2 { font-family: inherit; font-weight: 700; font-size: 1.25rem; letter-spacing: 0; margin-top: 2.25rem; }
.recht h3 { font-family: inherit; letter-spacing: 0; font-weight: 700; font-size: 1.0625rem; margin-top: 1.5rem; }
.recht h4 { font-family: inherit; letter-spacing: 0; font-weight: 700; font-size: 1rem; margin-top: 1.25rem; }
.recht p, .recht ul { margin-top: .75rem; max-width: 70ch; }
.recht ul { padding-left: 1.25rem; list-style: disc; }
.recht a { color: var(--rot-tief); text-decoration: underline; text-underline-offset: .15em; }
.recht .recht__zurueck { margin-top: 3rem; }

/* Bis Cal.com läuft: nur das Formular (Klasse ohne-kalender an .formular entfernen, sobald der Kalender eingebettet ist) */
.formular.ohne-kalender .termin, .formular.ohne-kalender .umschalten, .formular.ohne-kalender [data-zeige="termin"] { display: none; }
.js .formular.ohne-kalender #form-wrap { display: block; }
@keyframes start-notfall { to { visibility: visible; } }

/* Auswahlfelder: eigener Pfeil im roten Winkel statt Browser-Pfeil (gleiche Spezifität wie die Handy-Regeln, steht dahinter) */
.abschluss .field select { -webkit-appearance: none; appearance: none; padding-right: 2.3rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23E30113' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .85rem center; background-size: .75rem .5rem; text-overflow: ellipsis; }

/* So läuft eine Anfrage, Tablet hochkant: Schritte 22vh statt 30vh hoch (vorher bis 263 px schwarze Lücke unter dem Text).
   Ganz ohne Mindesthöhe passte der Abschnitt aufs iPad Pro 13 in einen Bildschirm, dann zeigte das Fenster schon Schritt 4,
   während man Schritt 1 las. Gemessen: nach Menü-Sprung Schritt 1 aktiv, Lücken höchstens rund 150 px. */
@media (min-width: 641px) and (max-width: 1100px) and (orientation: portrait) {
  .fahrt__schritt { --schritt-h: 22vh; padding-block: 2rem; }
}