/* ============================================================================
   rd-harnischmacher.css — seitenspezifisch: harnischmacher.php
   (/projekte/harnischmacher)
   Generiert aus dem <style>-Block der Design-Quelle „Harnischmacher Case.dc.html".
   Laedt NACH rd-base.css und gewinnt damit bei gleichem Selektor+Property.

   NICHT hier (steht bereits in rd-base.css, nicht duplizieren):
     Reset/body, Navigation, Burger/Mobile-Overlay, Fokus-Sichtbarkeit,
     Skip-Link, ::selection, .rv/.rv-d1/.rv-d2/.rv-d3, .lm, .uline.
   Der Handoff-<style> enthielt diese Regeln ein zweites Mal — beim Port
   entfernt, damit rd-base.css die einzige Quelle bleibt.

   Kein .hl-Marker auf dieser Seite: Die Design-Quelle definiert ihn zwar,
   nutzt ihn im Seitenrumpf aber nirgends (nur der Footer-Import traegt einen
   Marker, und der bringt seine Styles in includes/footer.php selbst mit).
   ============================================================================ */

/* @critical-start
   Above-the-fold der Case-Seite = Hero mit der Bildhuelle
   .cs-media/.cs-cap/.cs-num. Ohne sie rendert das Hero-Bild beim First Paint
   in Intrinsic-Groesse (2200 px breit) und erzeugt einen massiven
   Layout-Shift — deshalb critical (gleiche Begruendung wie rd-klaeser.css). */
.cs-media{position:relative;overflow:hidden;border-radius:2px;background:var(--sd-paper-warm)}
/* <picture> ist per Default inline und wuerde die Prozenthoehen der Bilder
   ins Leere laufen lassen — deshalb als Block auf volle Huellengroesse. */
.cs-media picture{display:block;width:100%;height:100%}
.cs-media img{width:100%;height:100%;object-fit:cover;display:block}
/* Hero-Bild ist 112% hoch und wird per JS um max. 5% seiner Hoehe bewegt
   (= 5,6% der Huellenhoehe). Ohne top:-6% saesse es buendig an der Oberkante
   und gaebe beim Abwaerts-Versatz einen Streifen der Huelle frei. */
#heroImg{position:relative;top:-6%}
.cs-cap{font-size:.78rem;color:#6E6E67;margin:.7rem 0 0;line-height:1.5}
.cs-num{font-family:var(--sd-font-display);font-size:.85rem;color:#6E6E67}
/* @critical-end */

/* --- Hover-Zustaende -------------------------------------------------------
   In der Design-Quelle steckten diese Zustaende in werkzeugeigenen
   style-hover-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 (gleiches Muster wie rd-klaeser.css), brauchen
   genau die inline deklarierten Properties !important. */
.hm-btn--accent:hover{background:var(--sd-accent-deep)!important;transform:translateY(-2px)}
.hm-btn--ghost:hover{border-color:var(--sd-white)!important;transform:translateY(-2px)}

/* --- Media-Queries ---------------------------------------------------------
   Mobil (<=760px): alle Zweispalter einspaltig, Bild zuerst (.cs-first-m),
   Meta-Grid 2x2, Hero 4:3 (.m-tall), Full-width-Fotos 16:10 (.m-wide). */
@media (max-width:760px){
  .g-meta{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  .g-cs,.g-cs-r,.g-duo,.g-intro{grid-template-columns:minmax(0,1fr)!important}
  .cs-first-m{order:-1}
  .m-tall{aspect-ratio:4/3!important}
  .m-wide{aspect-ratio:16/10!important}
}
/* Ab 420px abwaerts kippt auch das Meta-Grid auf eine Spalte — sonst bricht
   „Loettechnik & Waermebehandlung · Froendenberg/Ruhr" auf 320px in
   unlesbare Einzelwoerter. */
@media (max-width:420px){
  .g-meta{grid-template-columns:minmax(0,1fr)!important}
}
/* Kapitel-H2: „Website-Redesign" und „Fachinhalte" sind lange Komposita und
   koennen bei 320px ueber den Viewport hinauslaufen. hyphens:auto trennt
   korrekt deutsch (<html lang="de">), overflow-wrap ist der Fallback fuer
   Engines ohne de-Trennmuster (gleiche Regel wie rd-klaeser.css). */
@media (max-width:520px){
  .cs-h2{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
  /* Kapitel-Nummer: Bei umbrechenden Titeln lief die zweite Zeile im
     Inline-Fluss links unter die Ziffer (ausgefranstes Bild). Auf schmalen
     Screens steht die Nummer deshalb als eigene Zeile ueber dem Titel,
     der Umbruch wird buendig. !important, weil der margin-right inline
     am <span> steht. */
  .cs-h2 .cs-num{display:block;margin:0 0 .4rem!important}
  /* Eyebrow rechts neben dem Kapitel-H2: das inline white-space:nowrap
     laeuft bei 320px ueber den Viewport — auf schmalen Screens darf die
     Zeile umbrechen. */
  .cs-h2 + span{white-space:normal!important}
}
