/* ==========================================================================
   /automatisierung/ · nur diese Seite (Video Manuel, Zeitfresser-Check). Lädt NACH css/lpx.css.
   Mobile first (390 px), ab 641 / 901 / 1101 px nach oben. Nur Tokens der Hauptseite, Grün nur für WhatsApp.
   Pläne: _intern/lp-redesign/plaene/automatisierung-*.md
   ========================================================================== */

.lp--automatisierung { --auto-gap: clamp(1.4rem, 3.5vw, 3rem); }
.auto-mikro { margin: 0; font-family: var(--font-mono); font-size: 0.7rem; line-height: 1.6; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); }

/* ---------- Hero: H1 und grüner Knopf am Handy in den ersten 320 px ---------- */
@media (max-width: 640px) {
  .auto-hero { padding-top: 5.6rem; gap: 0.9rem; }   /* Eyebrow mit gut 12 px Luft unter der Kopfzeilen-Linie (76 px) */
  .auto-hero .eyebrow { font-size: 0.66rem; letter-spacing: 0.1em; gap: 0.5rem; }
  .auto-hero .hero__title { font-size: clamp(1.7rem, 8.6vw, 3.4rem); line-height: 1.02; }
}
/* Handy: unter Knopf und Mikrotext sofort die Gesichter-Zeile (Vertrauen im ersten Bild), dann der Anzeigentext und
   die ruhige Zeile, darunter die Bühne mit Ring und Schildern. */
@media (max-width: 700px) {
  .auto-hero > .lpx-hero__vertrauen { order: 1; }
  .auto-hero > .lpx-hero__lead { order: 2; }
  .auto-hero > .auto-hero__ruhe { order: 2; margin-top: -0.35rem; }
  .auto-hero > .lpx-hero__buehne { order: 3; min-height: 0; height: clamp(220px, 64vw, 300px); margin-top: -0.4rem; }
}
/* Ruhige Zeile unter dem Anzeigentext: normale Schrift (im Hero ist nur die Dachzeile Mono) */
.auto-hero__ruhe { margin: 0; max-width: 36rem; font-size: 0.98rem; line-height: 1.45; color: var(--fg-muted); }
html[data-contrast="high"] .auto-hero__ruhe { text-shadow: 0 0 12px var(--bg), 0 0 3px var(--bg); }
@media (min-width: 1101px) { .auto-hero .hero__title .line__inner { white-space: nowrap; } }

/* Bühne mit Aufgaben-Schildern: die Szene sitzt in .lpx-buehne, die Schilder liegen darüber (nur Deko, aria-hidden) */
.auto-hero__buehne { position: relative; pointer-events: none; }
.auto-buehne-fuell { position: absolute; inset: 0; min-height: 0; }
.auto-orbit { width: min(92%, 520px); }
.auto-orbit ellipse { stroke-width: 0.55; }
.auto-tags { position: absolute; inset: 0; }
/* Schilder deckend (die Ringlinien laufen hinter dem Schild, nie durch die Schrift). Tiefe nur über Größe und Textfarbe
   (--tiefe 1 = vorne, 0 = hinten, setzt seite.js), nie über Deckkraft. Ohne JS und bei reduzierter Bewegung stehen sie
   fest auf der Ellipse, am Handy mit kleinerem Radius und an den Rändern begrenzt (kein Schild ragt aus der Bühne). */
.auto-tag {
  --a: calc(var(--w) * 1deg); --tiefe: 1;
  position: absolute; left: clamp(5.4rem, calc(50% + 30% * cos(var(--a))), calc(100% - 5.4rem)); top: calc(50% + 15% * sin(var(--a)));
  transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.42rem 0.8rem 0.42rem 0.62rem; border-radius: 999px; white-space: nowrap;
  background: var(--c-panel); border: 1px solid var(--line-strong);
  font: 500 0.8rem/1 var(--font-body); color: color-mix(in srgb, var(--fg) calc(var(--tiefe) * 100%), var(--fg-muted)); will-change: transform;
}
.auto-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 8px var(--c-accent); }
.auto-tags.is-js .auto-tag { left: 0; top: 0; }
/* Sehr schmale Handys: Schilder etwas kleiner, Bühne etwas höher; ohne JS (reduzierte Bewegung) drei Reihen statt zwei */
@media (max-width: 360px) {
  .auto-tag { font-size: 0.74rem; }
  .auto-hero > .lpx-hero__buehne { height: 250px; }
  .auto-tags:not(.is-js) .auto-tag:nth-child(2) { top: 54%; }
  .auto-tags:not(.is-js) .auto-tag:nth-child(3) { top: 78%; }
}
.auto-tag--breit { display: none; }
/* Desktop: drei Schilder bis 1279 px (Bühne zu schmal für fünf), ab 1280 px alle fünf im Abstand von 72 Grad (--wd) */
@media (min-width: 901px) { .auto-tag { left: clamp(6rem, calc(50% + 38% * cos(var(--a))), calc(100% - 6rem)); font-size: 0.82rem; } }
@media (min-width: 1280px) {
  .auto-tag { --a: calc(var(--wd, var(--w)) * 1deg); left: clamp(6.6rem, calc(50% + 38% * cos(var(--a))), calc(100% - 6.6rem)); font-size: 0.9rem; }
  .auto-tag--breit { display: inline-flex; }
}

/* Kapitel ohne Intro: Titel über die volle Breite (sonst bricht der Zweizeiler am Desktop in vier Zeilen) */
@media (min-width: 901px) {
  .lp--automatisierung .chapter__head:not(:has(.chapter__intro)) { grid-template-columns: minmax(0, 1fr); }
  .lp--automatisierung .chapter__head:not(:has(.chapter__intro)) .chapter__title { max-width: 22ch; }
}

/* ---------- Video mit Sprungstellen ---------- */
.auto-video__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1rem; padding-top: clamp(1.6rem, 3.5vh, 2.4rem); border-top: 1px solid var(--line); margin-bottom: clamp(1.2rem, 3vh, 2rem); }
.auto-video__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; align-items: center; }
.auto-video__box { max-width: none; aspect-ratio: 4 / 5; }
.auto-video__box video { object-position: 50% 30%; }
@media (min-width: 641px) { .auto-video__box { aspect-ratio: 16 / 9; } }
.auto-marken { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.auto-marken li { border-bottom: 1px solid var(--line); }
.auto-marke { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.8rem; align-items: baseline; width: 100%; min-height: 56px; padding: 0.95rem 0; border: 0; color: var(--fg); font: 500 1rem/1.45 var(--font-body); text-align: left; cursor: pointer; transition: color 0.3s var(--ease); }
.auto-marke__zeit { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--accent-ink); }
.auto-marke__satz { text-wrap: pretty; }
.auto-marke:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 0.4rem; }
@media (hover: hover) and (pointer: fine) { .auto-marke:hover { color: var(--accent-ink); } }
.auto-video__cta { justify-content: center; }
@media (min-width: 901px) {
  .auto-video__raster { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--auto-gap); }
  .auto-marke { font-size: 1.05rem; }
}

/* ---------- 01 Woche: jeden Tag dasselbe ---------- */
/* Handy: eigene kleine Bühne zwischen Intro und Tabelle, damit die Szene nie über den Punkten der Woche liegt */
.auto-chaos__buehne { min-height: 0; height: clamp(170px, 46vw, 230px); margin-bottom: 1.4rem; }
.auto-woche { border-top: 1px solid var(--line-strong); }
.auto-woche__kopf, .auto-woche__zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.8rem; border-bottom: 1px solid var(--line); }
.auto-woche__kopf { padding: 0.55rem 0; }
.auto-woche__zeile { padding: 0.85rem 0; }
.auto-woche__aufgabe { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; line-height: 1.2; letter-spacing: -0.012em; color: var(--fg); }
.auto-woche__tage { display: grid; grid-template-columns: repeat(5, 1.55rem); gap: 0.35rem; justify-items: center; }
.auto-woche__tage i { font: normal 400 0.66rem/1 var(--font-mono); letter-spacing: 0.06em; color: var(--fg-muted); text-transform: uppercase; }
.auto-woche__tage b { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--line-strong); transition: background-color 0.25s, box-shadow 0.25s; }
.auto-woche__tage b.is-an, html:not(.auto-js) .auto-woche__tage b { background: var(--fg); box-shadow: 0 0 10px color-mix(in srgb, var(--fg) 55%, transparent); }
.auto-woche.is-fertig .auto-woche__tage b { background: var(--c-accent); box-shadow: 0 0 10px color-mix(in srgb, var(--c-accent) 60%, transparent); }
.auto-woche__wieder { display: flex; align-items: center; gap: 0.7rem; margin: 1rem 0 0; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.012em; color: var(--accent-ink); }
.auto-woche__wieder::before { content: ""; flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 2px dotted var(--c-accent); }
@media (prefers-reduced-motion: no-preference) { .auto-woche__wieder::before { animation: auto-dreh 6s linear infinite; } }
@keyframes auto-dreh { to { transform: rotate(360deg); } }
@media (min-width: 901px) {
  .auto-woche__zeile { padding: 1.05rem 0; }
  .auto-woche__aufgabe { font-size: 1.4rem; }
  .auto-woche__tage { grid-template-columns: repeat(5, 2.2rem); gap: 0.5rem; }
  .auto-woche__tage b { width: 0.85rem; height: 0.85rem; }
}

.auto-statement { margin: clamp(2rem, 5vh, 3rem) 0 0; max-width: 24ch; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 6.4vw, 2.2rem); line-height: 1.1; letter-spacing: -0.025em; color: var(--fg-muted); text-wrap: balance; }
.auto-statement em { font-style: normal; color: var(--accent-ink); }
.auto-statement--hell { color: var(--fg); margin-top: 0; }
@media (min-width: 901px) { .auto-statement { font-size: clamp(2rem, 3.2vw, 3.1rem); } }

/* ---------- 02 Zeitfresser antippen, Vorschau der Nachricht ---------- */
.auto-wahl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.auto-wahl__feld { margin: 0; padding: 0; border: 0; min-width: 0; }
.auto-wahl__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.55rem; }
.auto-punkt { position: relative; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.85rem; align-items: center; min-height: 56px; padding: 0.8rem 1rem; border: 1px solid var(--line-strong); border-radius: 1rem; cursor: pointer; transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), transform 0.15s; -webkit-tap-highlight-color: transparent; }
.auto-punkt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.auto-punkt__haken { position: relative; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--line-strong); transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease); }
.auto-punkt__haken::after { content: ""; position: absolute; left: 50%; top: 46%; width: 0.62rem; height: 0.34rem; border-left: 2px solid var(--c-on-accent); border-bottom: 2px solid var(--c-on-accent); transform: translate(-50%, -50%) rotate(-45deg) scale(0); transition: transform 0.3s var(--ease); }
.auto-punkt__text { font-size: 1rem; line-height: 1.35; color: var(--fg); }
.auto-punkt:has(input:checked) { border-color: var(--c-accent); background: var(--accent-soft); }
.auto-punkt:has(input:checked) .auto-punkt__haken { background: var(--c-accent); border-color: var(--c-accent); }
.auto-punkt:has(input:checked) .auto-punkt__haken::after { transform: translate(-50%, -50%) rotate(-45deg) scale(1); }
.auto-punkt:has(input:focus-visible) { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.auto-punkt:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { .auto-punkt:hover { border-color: color-mix(in srgb, var(--c-accent) 60%, var(--line-strong)); } }
/* Handy: Karten flacher (weniger Scrollweg), Text bricht ruhig um */
@media (max-width: 700px) {
  .auto-wahl__liste { gap: 0.45rem; }
  .auto-punkt { min-height: 52px; padding: 0.62rem 0.9rem; gap: 0.75rem; grid-template-columns: 1.45rem minmax(0, 1fr); }
  .auto-punkt__haken { width: 1.45rem; height: 1.45rem; }
  .auto-punkt__text { text-wrap: pretty; }
}

.auto-vorschau { display: grid; gap: 1rem; min-width: 0; }
.auto-vorschau__karte { display: grid; gap: 0.95rem; padding: 1.3rem; border: 1px solid var(--line-strong); border-radius: 1.1rem; background: var(--c-panel); }   /* deckend: am Handy scheint die Szene nicht durch die Karte */
.auto-vorschau__label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); }
.auto-vorschau__text { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--fg-muted); overflow-wrap: anywhere; }
.auto-vorschau__text b { color: var(--accent-ink); font-weight: 600; }
.auto-vorschau__zaehler { margin: 0; font-size: 0.98rem; line-height: 1.45; color: var(--fg); }
.auto-vorschau__karte .btn { width: 100%; min-height: 56px; justify-content: center; }
/* Schmale Handys: der grüne Knopf bleibt einzeilig („Gratis Zeitfresser-Check anfragen“) */
@media (max-width: 440px) {
  .auto-vorschau__karte { padding: 1.1rem 0.95rem; }
  .auto-vorschau__karte .btn { padding-inline: 0.8rem; gap: 0.5rem; font-size: min(1rem, 4.05vw); white-space: nowrap; }
}
.auto-vorschau__hinweis { text-align: center; }
/* Desktop: Bühne der Szene „drei“ rechts neben dem Kapitel-Titel, direkt über der Vorschau-Karte (am Handy aus) */
@media (min-width: 901px) {
  .auto-zf { --zf-b: clamp(200px, 18vw, 280px); }
  .auto-zf__kopf { position: relative; }
  #zeitfresser .auto-zf__kopf .chapter__title { max-width: min(22ch, calc(100% - var(--zf-b) - 1.5rem)); }   /* id: schlägt die 22ch-Regel für Köpfe ohne Intro */
  .auto-zf__buehne { position: absolute; right: 0; top: 0.6rem; bottom: 0; width: var(--zf-b); min-height: 0; }
}
@media (min-width: 1101px) { .auto-wahl__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 901px) {
  .auto-wahl { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--auto-gap); }
  .auto-vorschau { position: sticky; top: 5.5rem; }
}

/* ---------- 03 Rechner (Bausteine .rech der Startseite, ohne Ring) ---------- */
.auto-rech .rech__haupt { --ring-b: 0px; }
.auto-rech__karten { grid-template-columns: minmax(0, 1fr); }
.auto-rech .rech__ergebnis { gap: 1.2rem; }
.auto-rech__cta { width: 100%; justify-content: center; }
.auto-rech .rech__block.range .range__top { align-items: flex-start; }
/* Pflicht-Kleingedrucktes unter beiden Karten, links und schmal: am Desktop liegt es so nie unter dem Dock (rechts unten) */
.auto-rech .auto-rech__note { grid-column: 1 / -1; max-width: 46rem; margin: 0.2rem 0 0; padding-top: 0; border-top: 0; }
@media (min-width: 701px) { .auto-rech__cta { width: auto; justify-self: start; } }

/* ---------- 04 Beispiele: Auslöser, Linie mit Lichtpunkt, Ergebnis ---------- */
.auto-flows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--auto-gap); }
.auto-flow { display: grid; align-content: start; gap: 0.45rem; padding: 1.3rem 0 1.5rem; border-top: 1px solid var(--line-strong); }
.auto-flow h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; line-height: 1.1; letter-spacing: -0.02em; color: var(--fg); }
.auto-flow__bahn { position: relative; display: grid; gap: 1.1rem; margin-top: 0.4rem; padding-left: 2rem; }
.auto-flow__bahn p { position: relative; margin: 0; font-size: 1.02rem; line-height: 1.45; color: var(--fg-muted); }
.auto-flow__bahn small { display: block; margin-bottom: 0.2rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); }
.auto-flow__nach { color: var(--fg) !important; transition: opacity 0.6s var(--ease) 0.9s; }
.auto-flow__nach small { color: var(--accent-ink) !important; }
.auto-flow__von::before, .auto-flow__nach::before { content: ""; position: absolute; left: -2rem; top: 0.15rem; width: 0.9rem; height: 0.9rem; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--bg); }
.auto-flow__nach::before { border-color: var(--c-accent); background: var(--c-accent); box-shadow: 0 0 10px color-mix(in srgb, var(--c-accent) 60%, transparent); transition: background-color 0.4s var(--ease) 1s, box-shadow 0.4s var(--ease) 1s; }
.auto-flow__linie { position: absolute; left: -1.55rem; top: 1.05rem; width: 1px; height: calc(100% + 0.2rem); background: var(--line-strong); }
.auto-flow__linie::before { content: ""; position: absolute; inset: 0; background: var(--c-accent); transform-origin: top; transition: transform 1.1s var(--ease); }
.auto-flow__linie i { position: absolute; left: -4px; top: 100%; width: 9px; height: 9px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 10px var(--c-accent); opacity: 0; }
html.lpx-anim .auto-flow:not(.is-spiel) .auto-flow__linie::before { transform: scaleY(0); }
html.lpx-anim .auto-flow:not(.is-spiel) .auto-flow__nach { opacity: 0.35; }
html.lpx-anim .auto-flow:not(.is-spiel) .auto-flow__nach::before { background: var(--bg); box-shadow: none; }
@media (prefers-reduced-motion: no-preference) { .auto-flow.is-spiel .auto-flow__linie i { animation: auto-flow-punkt 1.1s var(--ease) 1 both; } }
@keyframes auto-flow-punkt { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.auto-flows__fuss { margin-top: 1rem; }
/* Handy: erst drei Beispiele, der Rest auf Tippen (ohne JS sind alle sechs sichtbar) */
.auto-flows__mehr { display: none; }
@media (max-width: 700px) {
  html.auto-js .auto-flows:not(.is-offen) .auto-flow--mehr { display: none; }
  html.auto-js .auto-flows__mehr { display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; min-height: 52px; margin-top: 0.2rem; padding: 0.8rem 1.2rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--fg); font: 600 1rem/1.2 var(--font-body); cursor: pointer; }
  html.auto-js .auto-flows__mehr::after { content: ""; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--accent-ink); border-bottom: 2px solid var(--accent-ink); transform: translateY(-0.15rem) rotate(45deg); }
  html.auto-js .auto-flows.is-offen + .auto-flows__mehr { display: none; }
  .auto-flows__mehr:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
  .auto-flow:focus { outline: none; }
}
.auto-beispiele__buehne { min-height: 0; height: clamp(200px, 56vw, 260px); }
@media (min-width: 1101px) { .auto-flows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 901px) { .auto-beispiele__buehne { height: 70vh; } }

/* ---------- 04 Beispiele, Unterblock Programme: zwei Laufbänder, gegenläufig ---------- */
.auto-programme { margin-top: clamp(2.4rem, 6vh, 4rem); padding-top: clamp(1.4rem, 3vh, 2rem); border-top: 1px solid var(--line); }
.auto-programme__titel { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 6.6vw, 2.2rem); line-height: 1.05; letter-spacing: -0.025em; color: var(--fg); }
.auto-programme__titel .line { display: block; }
.auto-programme__text { margin: 0.9rem 0 clamp(1.2rem, 3vh, 1.8rem); max-width: 36rem; font-size: 1.0625rem; line-height: 1.55; color: var(--fg-muted); }
@media (min-width: 901px) { .auto-programme__titel { font-size: clamp(2.2rem, 3.4vw, 3.4rem); } }
.auto-band .statement { margin-inline: calc(-1 * var(--pad)); }
.auto-band .marquee + .marquee { border-top: 0; }
.auto-band__rueck .marquee__track { animation-direction: reverse; }
.auto-band .marquee__track span { font-size: clamp(1.1rem, 2vw, 1.5rem); }
@media (prefers-reduced-motion: reduce) {
  .auto-band .marquee__track { flex-wrap: wrap; width: auto; gap: 0.6rem 1.6rem; padding-inline: var(--pad); }
  .auto-band .marquee__track span { gap: 1.6rem; }
  .auto-band .marquee:first-child .marquee__track span:nth-child(n+19), .auto-band .auto-band__rueck .marquee__track span:nth-child(n+20) { display: none; }
}
.auto-weiter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.6rem; margin: clamp(1.4rem, 3vh, 2rem) 0 0; font-size: 1rem; color: var(--fg-muted); }
.auto-walink { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; color: var(--wa); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.auto-walink .ico-wa { width: 1.15em; height: 1.15em; flex: none; }
.auto-walink:hover { text-decoration-thickness: 2px; }
.auto-walink:focus-visible { outline: 2px solid var(--wa); outline-offset: 3px; border-radius: 0.3rem; }

/* ---------- 06 Angebot: drei Punkte fangen je eine Schleife ein, darunter der Ablauf ---------- */
.auto-drei { list-style: none; margin: clamp(1.6rem, 4vh, 2.4rem) 0 0; padding: 0; border-top: 1px solid var(--line-strong); }
.auto-drei li { position: relative; display: grid; grid-template-columns: 2.8rem minmax(0, 1fr); gap: 0.6rem; align-items: baseline; padding: 1.05rem 0; border-bottom: 1px solid var(--line); }
.auto-drei li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease); }
.auto-drei li.is-an::after { transform: scaleX(1); }
.auto-drei__num { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; color: var(--fg-muted); transition: color 0.4s var(--ease); }
.auto-drei li.is-an .auto-drei__num { color: var(--accent-ink); }
.auto-drei__t { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.15; letter-spacing: -0.018em; color: var(--fg); }
.auto-angebot__buehne { aspect-ratio: auto; min-height: 0; height: clamp(190px, 52vw, 260px); }
@media (min-width: 901px) {
  .auto-drei__t { font-size: 1.6rem; }
  .auto-angebot__buehne { aspect-ratio: 1; height: auto; }
}

/* Ablauf: Schritt 1 ist WhatsApp (grün) */
.auto-schritt--wa .lpx-schritt__num { background: var(--wa) !important; border-color: var(--wa) !important; color: var(--wa-ink) !important; }
.auto-ablauf { margin-top: clamp(2.4rem, 6vh, 4rem); padding-top: 1.4rem; border-top: 1px solid var(--line); }
.auto-ablauf > .chapter__num { display: block; margin-bottom: 1.4rem; }
.auto-ablauf__fuss { margin-top: clamp(1.4rem, 3vh, 2rem); }
.auto-angebot__cta { margin-top: clamp(1.8rem, 4vh, 2.6rem); }

/* ---------- 07 Echte Projekte mit Aufnahmen der Live-Seiten ---------- */
.auto-refs__vorspann { margin-bottom: 1.2rem; }
.auto-ref { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; padding: 1.8rem 0; border-top: 1px solid var(--line-strong); }
.auto-ref__text { display: grid; align-content: start; gap: 0.7rem; min-width: 0; }
.auto-ref__text .lpx-ref__art { margin: 0; }
.auto-ref__text .lpx-ref__link { justify-self: start; }
.auto-ref__screen { margin: 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 0.9rem; background: #000; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8); }
.auto-ref__screen img { display: block; width: 100%; height: auto; }
.auto-ref__bilder { position: relative; padding: 0 16% 18% 0; }
.auto-ref__screen--desktop { aspect-ratio: 16 / 10; }
.auto-ref__screen--desktop img { height: 100%; object-fit: cover; object-position: top; }
.auto-ref__bilder .auto-ref__screen--handy { position: absolute; right: 0; bottom: 0; width: 32%; border-radius: 0.8rem; }
.auto-ref__vj { display: grid; gap: 0.9rem; margin: 0.3rem 0; }
.auto-ref__vj p { margin: 0.25rem 0 0; color: var(--fg-muted); font-size: 1rem; line-height: 1.5; }
.auto-ref__vjlabel { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); }
.auto-ref__vjlabel--jetzt { color: var(--accent-ink); }
.auto-ref__vj div + div p { color: var(--fg); }
.auto-ablauf-mini { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); }
.auto-ablauf-mini span:last-child { color: var(--accent-ink); }
.auto-ablauf-mini i { position: relative; flex: 0 0 3.5rem; height: 1px; background: var(--line-strong); }
.auto-ablauf-mini i::after { content: ""; position: absolute; left: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 8px var(--c-accent); }
@media (prefers-reduced-motion: no-preference) { .auto-ablauf-mini.is-spiel i::after { animation: auto-mini 2.6s var(--ease) 3 both; } }
@keyframes auto-mini { 0% { left: 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { left: calc(100% - 7px); opacity: 0.9; } }
.auto-refs__klein { display: grid; grid-template-columns: minmax(0, 1fr); }
.auto-refs__klein .auto-ref { grid-template-columns: 7rem minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.auto-refs__klein .lpx-ref__marke { font-size: clamp(1.5rem, 6vw, 2rem); }
.auto-ref--eigen .lpx-ref__art { color: var(--fg-muted); }
.auto-ref--zeile { border-top: 1px solid var(--line-strong); }
.auto-refs__fuss { margin-top: 1.2rem; }
@media (min-width: 901px) {
  .auto-ref--gross { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--auto-gap); padding: 2.4rem 0; }
  .auto-ref__vj { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
  .auto-refs__klein { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--auto-gap); }
  .auto-refs__klein .auto-ref { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 1.6rem; }
  .auto-ref .lpx-ref__marke { font-size: clamp(2rem, 3.2vw, 3rem); }
}

/* ---------- 08 Team und Zusammenarbeit ---------- */
.auto-person .lpx-person__foto { grid-row: span 4; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c-accent) 30%, #10161f), var(--bg) 75%); border-color: color-mix(in srgb, var(--c-accent) 45%, transparent); }
.auto-person__marke { justify-self: start; padding: 0.28rem 0.6rem; border: 1px solid color-mix(in srgb, var(--c-accent) 45%, transparent); border-radius: 999px; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); }
.auto-weiter--team { margin-top: 1rem; }
.auto-zusammen { display: grid; gap: 1.1rem; margin-top: clamp(2.6rem, 6vh, 4rem); padding-top: 1.6rem; border-top: 1px solid var(--line); }
.auto-zusammen__text { margin: 0; max-width: 36rem; font-size: 1.08rem; line-height: 1.55; color: var(--fg-muted); }

/* ---------- Schluss ---------- */
@media (min-width: 901px) {
  .lp--automatisierung .lpx-schluss .contact__title { max-width: 19ch; font-size: min(clamp(2.8rem, 6vw, 5.6rem), calc((100vw - 2 * var(--pad)) / 9)); text-wrap: balance; }
}
.lp--automatisierung .lpx-schluss .contact__hint { margin-top: 0.8rem; }
.lp--automatisierung .lpx-schluss .contact__sep { color: var(--fg-muted); }   /* Desktop: Punkt zwischen Telefon und E-Mail (am Handy aus, styles.css) */

/* ---------- Kopfzeile und Dock am Handy deckend (kein Text scheint beim Scrollen durch) ---------- */
@media (max-width: 700px) {
  .lp--automatisierung .nav::before { opacity: 1; background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .lp--automatisierung .dock { background: var(--c-panel); }
  .lp--automatisierung .dock__form { background: color-mix(in srgb, var(--c-light) 8%, var(--c-panel)); }
}

/* ---------- Desktop: das Dock (rechts unten) verdeckt nichts Wichtiges in der rechten Spalte ---------- */
@media (min-width: 901px) {
  /* Vorschau: unter der Karte Platz, damit das Dock rechts unten nie auf dem Knopf liegt */
  .auto-vorschau { padding-bottom: 5rem; }
  /* NABBA: Text links, Aufnahmen rechts (unter dem Dock liegt dann höchstens eine Bildecke) */
  .lp--automatisierung .auto-ref--gross { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .auto-ref--gross .auto-ref__bilder { order: 2; }
}
@media (min-width: 1001px) {
  /* Rechner: Stunden und Jahreskarte nebeneinander, so steht der Knopf höher und links vom Dock */
  .auto-rech .rech__ergebnis { grid-template-columns: auto minmax(0, 1fr); column-gap: 1.6rem; align-items: center; }
  .auto-rech .rech__ergebnis > .calc__label, .auto-rech .rech__ergebnis > .auto-rech__cta { grid-column: 1 / -1; }
  .auto-rech .rech__ergebnis { align-content: center; }   /* Ergebnis mittig in der Karte (die Eingabe-Karte daneben ist höher) */
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  .auto-flow__nach, .auto-flow__nach::before, .auto-flow__linie::before { transition: none; }
}

/* Sehr schmale Handys (320 px): Rollen-Zeile darf umbrechen */
@media (max-width: 360px) {
  .auto-person .person__role li { white-space: normal; min-width: 0; }
  .auto-person .person__role { min-width: 0; }
}