/* ============================================================================
   rd-webdesign.css — seitenspezifisch: webdesign-duesseldorf.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 */


/* ── Hover-/Fokus-Zustaende (F-Port) ────────────────────────────────────────
   In der Design-Quelle steckten sie in Pseudo-Attributen (style-hover- bzw.
   style-focus-Muster), die nur deren Laufzeit-Helfer auswertet. Ohne diesen
   Helfer gibt es keinen Hover/Fokus mehr, deshalb hier als echte CSS-Regeln.
   `!important`, weil die
   Ausgangswerte als inline-style am Element haengen (Handoff-Markup 1:1). */
.wd-cta-primary:hover{background:var(--sd-accent)!important;color:var(--sd-accent-ink)!important;transform:translateY(-2px)}
.wd-cta-tel:hover{border-color:var(--sd-ink)!important}
.wd-neu-link:hover{color:var(--sd-ink)!important}
.wd-teaser:hover{color:var(--sd-ink-muted)}
.wd-submit:hover:not(:disabled){transform:translateY(-2px);background:var(--sd-accent-deep)!important}
.wd-submit:disabled{cursor:progress;opacity:.72}

/* ── Textlink „Zur Case Study" im Featured-Case-Block ──────────────────────
   Kein Button, sondern Textlink im Duktus der uebrigen Seitenlinks
   (.wd-neu-link): Ink-Farbe, Pfeil, 1px-Underline-Sweep von links.
   Der Sweep laeuft ueber ein ::after mit scaleX — deshalb hier statt inline.
   Ruhezustand hat bewusst schon eine schwache Unterlinie: sonst waere der Link
   nur ueber die Farbe erkennbar (WCAG 1.4.1). */
.wd-case-link-t{position:relative;display:inline-block;border-bottom:1px solid rgba(14,14,12,.3)}
.wd-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)}
.wd-case-link:hover .wd-case-link-t::after,
.wd-case-link:focus-visible .wd-case-link-t::after{transform:scaleX(1)}
.wd-case-link-a{display:inline-block;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.wd-case-link:hover .wd-case-link-a{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  .wd-case-link-t::after,.wd-case-link-a{transition:none}
  .wd-case-link:hover .wd-case-link-a{transform:none}
}

/* Formularfelder auf der dunklen Card.
   Das `outline:none` des Handoffs wurde aus den inline-styles ENTFERNT — inline
   haette es den Fokus-Ring aus rd-base.css (`input:focus-visible`) unrettbar
   ueberschrieben (WCAG 2.2 AA, SPEC-Invariante „Fokus sichtbar"). Statt dessen
   nur der Ring fuer reine Zeigerfokussierung weg. */
.wd-field:focus{border-bottom-color:var(--sd-accent)!important}
.wd-field:focus:not(:focus-visible){outline:none;box-shadow:none}
.wd-field::placeholder{color:var(--sd-on-dark-faint)}

/* Inline-Fehlermeldung je Formular (role="alert" liegt im Markup).
   Leer = kein Platzverbrauch; `:empty` statt einer JS-gesetzten Klasse, damit
   Markup und Zustand nicht auseinanderlaufen koennen. */
.audit-err:empty{display:none}

/* Erfolgs-Zustand: die Ueberschrift bekommt den Fokus (tabindex="-1"), damit
   der Fokus nach dem Absenden nicht am entfernten Submit-Button verwaist. */
.success-title:focus{outline:none}
.success-title:focus-visible{outline:3px solid var(--sd-white);outline-offset:3px}

/* Rotor-Wort in der Hero-Headline: feste Zeilenhoehe, damit der Clip beim
   Wortwechsel nicht springt. */
#rotorClip{line-height:1.04}


/* --- Media-Queries (zusammengefasst) --- */
@media (max-width:900px){
  }
/* F-FIX — Hero-Headline wurde auf Mobilgeraeten abgeschnitten.
   Die zweite Zeile ist `.hl` mit white-space:nowrap (Marker-Sweep darf nicht
   umbrechen); ihre Breite haengt am laengsten Rotor-Wort. Gemessen bei 375px:
   „Bewerbungen bringt." braucht 420px in einer 327px breiten `.lm`-Zeile,
   „Neukunden bringt." 371px — beides wurde von `.lm{overflow:hidden}` still
   weggeschnitten (docW blieb == winW, ein reiner scrollWidth-Test meldet das
   nicht). In der Design-Vorlage faellt es nicht auf, weil dort das kurze
   Startwort „Anfragen" steht (320px, passt gerade so).
   Untere Grenze 1.6rem deckt 320px ab (Bedarf 258px bei 272px Platz).
   Ab ~533px liefert die Formel wieder 2.6rem — also exakt den Ausgangswert
   der Vorlage; oberhalb 760px greift die Regel gar nicht. Kein Effekt auf
   das Desktop-Bild. `!important`, weil der Ausgangswert als inline-style am
   <h1> haengt (Handoff-Markup 1:1). */
@media (max-width:760px){
  .hero-h1{font-size:clamp(1.6rem, 7.8vw, 2.6rem)!important}
}
@media (prefers-reduced-motion:reduce){
  /* Rotor bleibt statisch beim ersten Wort — der Timer startet in
     rd-webdesign.js gar nicht erst; hier nur die Absicherung gegen
     Rest-Transitions. */
  #rotor{transition:none!important;transform:none!important}
  .wd-cta-primary:hover,.wd-submit:hover:not(:disabled){transform:none}
}