/* ============================================================================
   rd-index.css — seitenspezifisch: Startseite (index.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
   Marker-Sweep (.hl) — bewusst SEITENLOKAL, nicht in rd-base.css:
   der Handoff hat zwei sich ausschliessende Implementierungen
   (Startseite: background-image + @keyframes sdMarkerIn/Scrubbing;
    uebrige Seiten: ::before mit clip-path:polygon()). Above-the-fold. */
@keyframes sdMarkerIn{
  0%{background-size:0% 100%}
  100%{background-size:100% 100%;color:var(--sd-accent-ink)}
}
.hl{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M5 30 L100 24 L95 96 L0 100 Z' fill='%23E8F497'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:0% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .12em;margin:0 -.12em}
.hl>*{position:relative;z-index:1}
.is-in .hl{animation:sdMarkerIn 1.1s cubic-bezier(.16,1,.3,1) both .35s}
.is-in .hl.hl-off{animation:none;background-image:none}
.hl.hl-scrub{animation:none!important}
.hl.hl-off>*{border-bottom:3px solid var(--sd-accent)}
@media (prefers-reduced-motion:reduce){
  .is-in .hl,.hl.hl-scrub{animation:none;background-size:100% 100%;color:var(--sd-accent-ink)}
}
/* @critical-end */

/* ENTFERNT (F4-Port der Startseite) — Nav-Overrides aus dem Handoff-<style>:
     nav.is-on-dark .auto-pill{box-shadow:none}
     nav{padding:1rem 1.25rem!important}                    (@media max-width:760px)
     #mobMenu.open .mob-link:nth-child(2|3|4){transition-delay:.05s|.1s|.15s}
   Begruendung: die Navigation kommt jetzt aus includes/header.php und ist
   kanonisch FUENFgliedrig (Startseite, Projekte, Webdesign, Automatisierung,
   Studio); das Handoff-Template der Startseite hatte nur vier Links.
   1. Der Stagger traf damit die falschen Kinder. rd-index.css laedt NACH
      rd-base.css und haette dessen nth-child(3|4|5)-Staffel ueberschrieben:
      Link 4 und 5 haetten beide .15s bekommen, Link 2 zusaetzlich .05s —
      sichtbar stockende Reihenfolge beim Oeffnen des Burger-Menues.
   2. `nav{...}` ohne Klasse zielte auf JEDE <nav>; rd-base.css setzt die
      identische Regel bereits als `nav.site-nav{...}` samt der F3-Fixes fuer
      Logo-/CTA-/Burger-Groessen. Die ungenauere Kopie hier waere nur ein
      zweiter Ort mit demselben Wert gewesen.
   3. `.auto-pill` existiert im Nav-Markup der Startseite nicht (stammt aus
      dem Automatisierungs-Template) — tote Regel.
   Aenderungen an der Navigation gehoeren ausschliesslich nach rd-base.css. */

.case .case-media img{transition:transform 1.1s cubic-bezier(.2,.7,.2,1),opacity .7s ease}
.case .case-media .img-b{position:absolute;inset:0;opacity:0}
.case:hover .case-media .img-b{opacity:1}
.leist-row{transition:background .35s ease}
.leist-row:hover{background:var(--sd-paper-soft)}
.leist-row:hover .leist-num{color:var(--sd-ink)}
#sticky-cta{opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .4s ease,transform .4s ease}
#sticky-cta.is-visible{opacity:1;transform:none;pointer-events:auto}
.qdot{width:28px;height:28px;background:transparent;position:relative}
.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)}

/* --- Hover-/Fokus-Zustaende (F4) --------------------------------------------
   In der Design-Vorlage steckten diese Zustaende in Sonderattributen, die nur
   deren Laufzeitskript auswertet. Ohne dieses Skript gaebe es keinen Hover
   mehr, deshalb hier als echte CSS-Regeln. !important, weil die
   Ausgangswerte als inline-style am Element haengen (Markup 1:1 uebernommen). */
.btn-solid:hover{background:var(--sd-accent)!important;color:var(--sd-accent-ink)!important;transform:translateY(-2px)}
.btn-ghost:hover{border-color:var(--sd-ink)!important;transform:translateY(-2px)}
.ilink:hover,.ilink-soft:hover{border-bottom-color:var(--sd-ink)!important}
.own-card:hover{border-color:rgba(14,14,12,.3)!important;background:var(--sd-white)!important}
.klink:hover{color:var(--sd-accent)!important}
.ksubmit:hover{background:var(--sd-accent-deep)!important;transform:translateY(-2px)}
.cta-solid:hover{background:var(--sd-accent)!important;color:var(--sd-accent-ink)!important}
.kform input:focus,.kform textarea:focus{border-bottom-color:var(--sd-accent)!important}
/* Inline-Fehlermeldung des Kontaktformulars (ersetzt den Browser-Dialog des Bestands).
   Farbe auf der dunklen Card geprueft: #FFB4A8 auf #0A0A09 = 9,6:1. */
.kform-err{color:#FFB4A8}

/* --- Media-Queries (zusammengefasst) --- */
@media (max-width:760px){
  #heroCanvasBox{transform:translate(42%,-9%)}
  #heroAct1,#heroAct2{left:1.5rem!important;right:1.5rem!important;max-width:none!important}
  .g-facts{grid-template-columns:repeat(2, 1fr)!important;gap:1.5rem 1rem!important}
  .g-2col,.g-studio{grid-template-columns:1fr!important}
  .g-kontakt{grid-template-columns:1fr!important;gap:3.5rem!important}
  .g-own{grid-template-columns:1fr!important}
  .g-frow{gap:1.4rem!important}
  .leist-row{grid-template-columns:1fr!important;gap:.5rem!important;padding:1.6rem .5rem!important;margin:0 -.5rem!important}
  .leist-row .leist-num{padding-top:0!important}
  .cta-tel-txt{display:none}
  #sticky-cta{bottom:16px;right:16px}
}