/* ============================================================================
   rd-automatisierung.css — seitenspezifisch: automatisierung.php
   Generiert aus dem Handoff-<style>. Laedt NACH rd-base.css und gewinnt
   damit bei gleichem Selektor+Property. @media-Bloecke stehen am Ende.
   ============================================================================ */
/* @critical-start ----------------------------------------------------------
   Seiten-Critical: includes/header.php schneidet den Block zwischen diesen
   beiden Markern heraus und schreibt ihn inline in den <head>. Die Datei
   selbst laedt non-blocking nach (media="print" onload) — was hier NICHT
   steht, wirkt erst nach dem First Paint.

   1. Hero-Raster (Bestandsfehler, behoben Welle 2):
      `.g-hero` traegt sein zweispaltiges Raster als inline-style
      (grid-template-columns:1.1fr .9fr) im Markup. Die Einspaltigkeit fuer
      schmale Viewports steht in rd-base.css UNTERHALB von @critical-end und
      kommt damit erst mit dem nachgeladenen Stylesheet. Bis dahin rendert der
      Hero auch auf dem Telefon zweispaltig.
      Gemessen (mobil, 412px): das Hero-Widget stand als schmale Saeule rechts
      (x 250, 203x757) und sprang danach unter die Headline (x 24, y 687,
      364x390) — Layout-Shift 0,545 von 0,556 Gesamt-CLS der Seite.
      Der `.hero-preview`-Wert ist bewusst 560px (der Wert dieser Datei weiter
      unten), nicht die 520px aus rd-base.css: sonst entstuende bei ~1000px
      Viewport ein neuer 40px-Sprung, sobald diese Datei nachlaedt.
      rd-base.css bleibt unveraendert (Single Source fuer alle anderen Seiten),
      die Regel wird hier nur seitenlokal wiederholt — identische Werte, damit
      beim Anwenden von rd-base.css nichts nachspringt.
   2. Zitat-Rotation (M8): die Slides liegen absolut uebereinander. Ohne diese
      beiden Regeln beim First Paint stapeln sie sich in den Textfluss; die
      Sektion waere um ein Vielfaches zu hoch und schrumpfte beim Nachladen.
   -------------------------------------------------------------------------- */
@media (max-width:1000px){
  .g-hero{grid-template-columns:1fr!important}
  .hero-preview{max-width:560px}
}
.quote-slide{position:absolute;inset:0;opacity:0;transform:translateY(10px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);pointer-events:none}
.quote-slide.on{opacity:1;transform:none;pointer-events:auto}
/* @critical-end */

.vc-line{opacity:0;transform:translateY(8px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.is-in .vc-line:nth-child(1){opacity:1;transform:none;transition-delay:.4s}
.is-in .vc-line:nth-child(2){opacity:1;transform:none;transition-delay:1s}
.is-in .vc-line:nth-child(3){opacity:1;transform:none;transition-delay:1.6s}
.vc-result{opacity:0;transform:translateY(8px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.is-in .vc-result{opacity:1;transform:none;transition-delay:2.2s}

/* ---------------------------------------------------------------------------
   Ersatz fuer die Pseudo-Attribute des Handoffs (style-hover/-focus/-before).
   Das Laufzeitskript der Design-Quelle hat sie in CSS uebersetzt; ohne dieses
   Skript muessen sie hier als echte Regeln stehen. Werte 1:1, ueber Tokens.
   --------------------------------------------------------------------------- */
/* Hero-CTAs */
.au-cta-primary{transition:background .3s ease,color .3s ease,transform .25s ease}
.au-cta-primary:hover{background:var(--sd-accent);color:var(--sd-accent-ink);transform:translateY(-2px)}
.au-cta-ghost{transition:border-color .3s ease}
.au-cta-ghost:hover{border-color:var(--sd-ink)}

/* "Live"-Punkt der Hero-Vorschau (style-before) */
.au-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sd-accent);flex-shrink:0}

/* Formular auf Dunkel (style-focus + Placeholder-Kontrast wie Bestand) */
.kform input:focus,.kform textarea:focus{border-bottom-color:var(--sd-accent)}
.kform input::placeholder,.kform textarea::placeholder{color:var(--sd-on-dark-faint)}
.au-submit{transition:transform .25s ease,background .3s ease}
.au-submit:hover:not(:disabled){transform:translateY(-2px);background:var(--sd-accent-deep)}
.au-submit:disabled{opacity:.65;cursor:default;transform:none}

/* Inline-Fehler statt Browser-Dialog (Bestand-Bug, form-tracking-kontrakt 2.4).
   [hidden]-Regel explizit: .au-err bringt eine eigene display-Deklaration mit. */
.au-err{display:block;margin:1.1rem 0 0;font-size:.85rem;line-height:1.5;color:#FFC9BE}
.au-err[hidden]{display:none}

/* Erfolgs-Region — Umschaltung ueber #auform-wrap.is-done (wie Bestand) */
.au-ok{display:none;padding:2rem 0}
.au-ok:focus{outline:none}
#auform-wrap.is-done .au-ok{display:block}
#auform-wrap.is-done #auform,#auform-wrap.is-done .au-form-intro{display:none}

/* Teaser-Zeile zum SION Standard */
.au-teaser{transition:color .3s ease}
.au-teaser:hover{color:var(--sd-ink-muted)}

/* Parallax-Bild im Founder-Block (JS setzt translateY) */
#founderImg{will-change:transform}

/* --- Media-Queries (zusammengefasst) --- */
@media (max-width:1000px){
  .hero-preview{max-width:560px}
  .g-uc,.g-stk,.g-proc{grid-template-columns:1fr 1fr!important}
}

/* ── Featured-Case FORUM BEFA ────────────────────────────────────────────────
   .befa-shot: solange kein <img> drinsteckt, ruhige Platzhalter-Flaeche
   (diagonale Schraffur in Markenfarben) — nie ein gebrochenes Bild.
   Sobald ein <img> eingesetzt wird, deckt es die Flaeche vollstaendig ab. */
.befa-shot{background:
  repeating-linear-gradient(135deg,rgba(14,14,12,.035) 0 12px,transparent 12px 24px),
  var(--sd-white)}
.befa-shot img{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:760px){
  .g-befa{grid-template-columns:1fr!important}
  .g-uc,.g-stk,.g-proc{grid-template-columns:1fr!important}
}
@media (prefers-reduced-motion:reduce){
  .vc-line,.vc-result{opacity:1;transform:none;transition:none}
  .au-cta-primary,.au-cta-ghost,.au-submit,.au-teaser{transition:none}
  .au-cta-primary:hover,.au-submit:hover:not(:disabled){transform:none}
  #founderImg{transform:none!important}
}

/* --- Case-Link im BEFA-Block -----------------------------------------------
   Idiom von .wd-case-link (rd-webdesign.css): unterstrichener Text, Pfeil
   schiebt beim Hover 3px nach rechts. */
.au-case-link-t{position:relative;display:inline-block;border-bottom:1px solid rgba(14,14,12,.3)}
.au-case-link-t::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.au-case-link:hover .au-case-link-t::after,
.au-case-link:focus-visible .au-case-link-t::after{transform:scaleX(1)}
.au-case-link-a{display:inline-block;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.au-case-link:hover .au-case-link-a{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  .au-case-link-t::after,.au-case-link-a{transition:none}
  .au-case-link:hover .au-case-link-a{transform:none}
}

/* --- Zitat-Rotation (M8) -----------------------------------------------------
   Punkt-Navigation 1:1 aus rd-index.css (Startseite ist die Referenz-Bauart):
   28x28 Trefferflaeche (WCAG 2.5.8), der sichtbare Punkt sitzt als ::after
   mittig darin. `.qdot{border-radius/border/padding/cursor}` steht zusaetzlich
   in rd-base.css; hier bewusst wiederholt, damit die Buttons auch dann rund
   sind, wenn rd-base.css noch nicht angewendet wurde (die Punkte erzeugt
   rd-automatisierung.js erst nach DOMContentLoaded, also unkritisch fuers Layout —
   die layoutbestimmenden Slide-Regeln liegen deshalb oben im Critical-Block). */
.qdot{width:28px;height:28px;background:transparent;position:relative;border-radius:50%;border:0;padding:0;cursor:pointer}
.qdot::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:6px;height:6px;border-radius:50%;background:var(--sd-line-strong);transition:background .3s ease,transform .3s ease}
.qdot:hover::after{background:rgba(14,14,12,.45)}
.qdot.on::after{background:var(--sd-ink);transform:translate(-50%,-50%) scale(1.25)}
