/* ============================================================================
   rd-altenberger-hof.css — seitenspezifisch: altenberger-hof.php
   (/projekte/altenberger-hof)
   Aufgebaut nach dem Muster von rd-klaeser.css / rd-harnischmacher.css.
   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.

   Kein .hl-Marker auf dieser Seite (nur der Footer-Import traegt einen,
   dessen Styles liegen in includes/footer.php).
   ============================================================================ */

/* @critical-start
   Above-the-fold = Hero mit Bildhuelle .cs-media/.cs-cap/.cs-num.
   Ohne sie rendert das Hero-Bild beim First Paint in Intrinsic-Groesse und
   erzeugt einen massiven Layout-Shift — deshalb critical (wie rd-klaeser.css). */
.cs-media{position:relative;overflow:hidden;border-radius:2px;background:var(--sd-paper-warm)}
.cs-media picture{display:block;width:100%;height:100%}
.cs-media img{width:100%;height:100%;object-fit:cover;display:block}
/* Video (Imagefilm in Kapitel 01) fuellt die Huelle wie ein Bild. */
.cs-media video{width:100%;height:100%;object-fit:cover;display:block}
/* Hero-Bild ist 112% hoch, Parallax bewegt es um max. 5% seiner Hoehe.
   Ohne top:-6% gaebe der 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 (CTA-Buttons; Grundwerte stehen inline am Element,
   deshalb !important fuer genau diese Properties — Muster rd-klaeser.css). */
.ah-btn--accent:hover{background:var(--sd-accent-deep)!important;transform:translateY(-2px)}
.ah-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-Grafiken behalten contain. */
@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}
}
@media (max-width:420px){
  .g-meta{grid-template-columns:minmax(0,1fr)!important}
}
/* Kapitel-H2 („Der Kulinarische Kalender") kann auf 320px ueberlaufen. */
@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}
}