/* ============================================================================
   rd-handwerk.css — seitenspezifisch: webdesign-handwerk-duesseldorf.php
   Generiert aus dem <style> der Design-Vorlage + den style-hover/style-focus-Attributen
   des Vorlagen-Markups (die sind DC-spezifisch und muessen zu echtem CSS
   werden). Laedt NACH rd-base.css und gewinnt damit bei gleichem
   Selektor+Property. @media-Bloecke stehen am Ende.

   Farb-/Font-Werte kommen aus assets/css/tokens.css (Single Source);
   Font-Stacks ausnahmslos ueber var(--sd-font-display) (Entscheidung D9).
   ============================================================================ */
/* @critical-start
   Marker-Sweep (.hl) — bewusst SEITENLOKAL, nicht in rd-base.css:
   die Design-Vorlage 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-Zustaende (in der Design-Vorlage als style-hover-Attribute) --------------- */
.hw-cta-solid:hover{background:var(--sd-accent);color:var(--sd-accent-ink);transform:translateY(-2px)}
.hw-cta-ghost:hover{border-color:var(--sd-ink)}
.hw-audit-link:hover{color:var(--sd-ink)}
.hw-std-teaser:hover{color:var(--sd-ink-muted)}
.hw-submit:hover:not(:disabled){transform:translateY(-2px);background:var(--sd-accent-deep)}
.hw-submit:disabled{opacity:.6;cursor:default;transform:none}

/* --- Kontaktformular auf dunklem Grund ----------------------------------- */
/* Fokus-Zustand (in der Design-Vorlage als style-focus-Attribut). Der Fokusring aus
   rd-base.css bleibt zusaetzlich sichtbar — das Vorlagen-Markup setzte
   inline outline:none, das waere auf dunkler Flaeche ein A11y-Rueckschritt
   und wurde beim Port entfernt. */
.kform input:focus,
.kform textarea:focus,
.kform select:focus{border-bottom-color:var(--sd-accent)}
.kform input::placeholder,
.kform textarea::placeholder{color:var(--sd-on-dark-muted);opacity:1}
.kform select option{color:var(--sd-ink);background:var(--sd-white)}
/* Panel-Sichtbarkeit: die Formulare tragen keine eigene display-Deklaration,
   die Regel steht trotzdem explizit da (Lehre aus Juli — [hidden] darf nie
   von einer display-Angabe ueberstimmt werden). */
.kform form[hidden]{display:none}

/* Inline-Fehlermeldung (role="alert"). Optik aus page-lp.css uebernommen,
   damit die Fehlerdarstellung ueber alle Formulare identisch bleibt. */
.audit-err{
  display:none;
  margin:.9rem 0 0;
  padding:.6rem .8rem;
  border:1px solid rgba(255,107,107,.25);
  border-radius:8px;
  background:rgba(255,107,107,.15);
  color:#ffb4b4;
  font-size:.82rem;
  line-height:1.5;
}
.audit-err.show{display:block}

/* --- Media-Queries (zusammengefasst) --- */
@media (max-width:760px){
  .g-bausteine{grid-template-columns:1fr!important}
}
@media (prefers-reduced-motion:reduce){
  .hw-cta-solid:hover,
  .hw-submit:hover:not(:disabled){transform:none}
}