/* ============================================================================
   rd-spedition.css — seitenspezifisch: spedition.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. */
.hl{position:relative;isolation:isolate;padding:0 .12em;margin:0 -.12em;white-space:nowrap}
.hl::before{content:"";position:absolute;left:0;right:0;top:.12em;bottom:-.04em;background:var(--sd-accent);z-index:-1;clip-path:polygon(5% 30%, 100% 24%, 95% 96%, 0% 100%);transform:scaleX(0);transform-origin:left center;transition:transform .9s cubic-bezier(.16,1,.3,1) .5s}
.is-in .hl::before{transform:scaleX(1)}
.hero-h1.is-in .hl::before{transition-delay:1.05s}
@media (prefers-reduced-motion:reduce){
  .hl::before{transform:scaleX(1);transition:none}
}
/* @critical-end */

.srow{opacity:0;transform:translateY(8px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.is-in .srow:nth-child(1){opacity:1;transform:none;transition-delay:.5s}
.is-in .srow:nth-child(2){opacity:1;transform:none;transition-delay:.65s}
.is-in .srow:nth-child(3){opacity:1;transform:none;transition-delay:.8s}
.is-in .srow:nth-child(4){opacity:1;transform:none;transition-delay:.95s}
.is-in .srow:nth-child(5){opacity:1;transform:none;transition-delay:1.1s}
.stab{background:transparent;border:1px solid var(--sd-line-strong);border-radius:999px;padding:.6rem 1.2rem;cursor:pointer;color:var(--sd-ink-muted);font:inherit;font-size:.88rem;white-space:nowrap;transition:border-color .25s ease,color .25s ease,background .25s ease}
.stab.on{background:var(--sd-ink);border-color:var(--sd-ink);color:var(--sd-white)}
.spanel{display:none}
.spanel.on{display:grid}
.qdot{width:6px;height:6px;background:var(--sd-line-strong);transition:background .3s ease,transform .3s ease}
.qdot.on{background:var(--sd-ink);transform:scale(1.2)}

/* --- Hover-/Fokus-Zustaende ------------------------------------------------
   In der Design-Quelle steckten diese Zustaende in werkzeugeigenen
   Attributen, die das Laufzeit-Skript als INLINE-Styles gesetzt hat.
   Im Port werden daraus echte CSS-Regeln. Weil die Grundwerte weiterhin
   inline am Element stehen (wie in header.php/footer.php), brauchen genau
   die Properties, die auch inline deklariert sind, !important — gleiches
   Muster wie .nav-cta:hover / .flink:hover in rd-base.css. */
.sp-btn--dark:hover{background:var(--sd-accent)!important;color:var(--sd-accent-ink)!important;transform:translateY(-2px)}
.sp-btn--ghost:hover{border-color:var(--sd-ink)!important}
.sp-contact-link:hover{color:var(--sd-accent)!important}
.sp-submit:hover{background:var(--sd-accent-deep)!important;transform:translateY(-2px)}
.sp-teaser:hover{color:var(--sd-ink-muted)!important}
.kform input:focus,.kform textarea:focus{border-bottom-color:var(--sd-accent)!important}

/* Inline-Fehlertext des Formulars mit role=alert. Ersetzt den Browser-Dialog
   des Bestands; leer = unsichtbar, ohne Platz zu belegen. */
.sp-err{margin:0;color:#FFB4A8;font-size:.85rem;line-height:1.5}
.sp-err.is-visible{margin:0 0 1.2rem}

/* Nur fuer Screenreader (Hinweis „oeffnet in neuem Tab"). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* --- Media-Queries (zusammengefasst) --- */
@media (max-width:1000px){
  .hero-mock{max-width:560px}
}
@media (max-width:760px){
  .g-prob,.g-adv,.g-cmp,.g-team,.g-tl,.g-sol{grid-template-columns:1fr!important}
  .stab-row{overflow-x:auto;padding-bottom:.5rem}
}
@media (prefers-reduced-motion:reduce){
  .srow{opacity:1;transform:none;transition:none}
}