/* ============================================================================
   rd-klaeser.css — seitenspezifisch: klaeser.php (/projekte/klaeser)
   Generiert aus dem <style>-Block der Design-Quelle „Klaeser 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.
   ============================================================================ */

/* @critical-start
   Above-the-fold der Case-Seite = Hero. Darin liegen:
     a) der Marker-Sweep (.hl) — bewusst SEITENLOKAL wie auf allen Unterseiten
        (Startseite nutzt die background-image-/@keyframes-Variante, alle
        uebrigen Seiten die ::before+clip-path-Variante; siehe rd-spedition.css).
        Auf dieser Seite steht der Marker im Statement-Block, wird aber hier
        mitgeliefert, weil rd-klaeser.css non-blocking nachlaedt.
     b) die 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 ebenfalls critical. */
.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)}

/* Bildhuelle: Radius 2px, Fotos cover, warmer Grund gegen weisses Aufblitzen. */
.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}

@media (prefers-reduced-motion:reduce){
  .hl::before{transform:scaleX(1);transition:none}
}
/* @critical-end */

/* --- Visitenkarten-Rueckseite (Kapitel 04) ---------------------------------
   Gebautes Element, kein Foto: weisse Karte 85:55 mit weichem Schatten,
   darin das rote Klaeser-Logo bei 88 % Breite. */
.ks-card{width:min(300px, 100%);aspect-ratio:85/55;background:var(--sd-white);border-radius:3px;box-shadow:0 16px 36px -16px rgba(var(--sd-ink-rgb), .28), 0 1px 0 rgba(var(--sd-ink-rgb), .06);display:flex;align-items:center;justify-content:center;padding:.9rem}
.ks-card img{width:88%;height:auto;display:block;margin-top:-.1rem}

/* --- 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 in rd-spedition.css), brauchen
   genau die inline deklarierten Properties !important. */
.ks-btn--accent:hover{background:var(--sd-accent-deep)!important;transform:translateY(-2px)}
.ks-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 brechen
   „Fachspedition & Fahrzeugbau, seit 1954" und die Leistungszeile auf 320px
   in unlesbare Einzelwoerter. */
@media (max-width:420px){
  .g-meta{grid-template-columns:minmax(0,1fr)!important}
}
/* Kapitel-H2: „Geschaeftsausstattung" ist ein unteilbares Kompositum und
   laeuft bei 320px ueber den Viewport hinaus (gemessen: 341px Kastenbreite
   bei 272px Inhaltsbreite). hyphens:auto trennt korrekt deutsch (<html lang="de">),
   overflow-wrap ist der Fallback fuer Engines ohne de-Trennmuster. */
@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}
}