/* Rentique Weiß — Startseite. Nur, was site.css und rentique.css nicht haben.
   Nur Token, keine festen Farben oder Abstände. Wird über "css: start" im
   Frontmatter von src/pages/index.html geladen. */

/* ——— Bildfläche im Startbild ———
   Das Foto steckt in einem <picture>. Der Bildrahmen des Design-Systems
   greift aber nur direkte Kinder (.rw-imgframe > img), deshalb bekommt das
   Bild hier seine Maße. Nur für das Oval im Startbild — die Kacheln des
   Generators bleiben unberührt. */
.site-hero__art .rw-imgframe picture{display:block;width:100%;height:100%}
.site-hero__art .rw-imgframe img{width:100%;height:100%;
  object-fit:cover;object-position:center}

/* ——— Helles Band ———
   Hebt „Neu im Verleih“ und den Vertrauensblock vom Elfenbein ab, damit die
   Seite eine Gliederung hat, ohne dass eine Linie quer durchgeht. */
.start-band{background:var(--surface-card);
  border-top:var(--bw-hair) solid var(--border-subtle);
  border-bottom:var(--bw-hair) solid var(--border-subtle)}

/* ——— Aufruf-Band ———
   Eine Spalte, alles linksbündig, Zeilen kurz genug zum Lesen. Der Abstand
   kommt aus dem Raster, nicht aus den Rändern der einzelnen Elemente. */
.start-cta{display:grid;justify-items:start;gap:var(--space-5)}
.start-cta>*{margin:0}
.start-cta h2{max-width:22ch}
.start-cta p{max-width:52ch}
/* Gemeint ist der Telefonlink im Absatz — NUR der.
   Vorher stand hier .start-cta a. Das erfasste auch die beiden Knöpfe im
   Band: der primäre Knopf „Verfügbarkeit prüfen“ bekam damit Kupferschrift
   (--link-on-dark) auf Kupferfläche — gemessen 2,06:1, und die Icon-Maske
   in derselben Farbe. Die anderen sieben Primärknöpfe der Seite messen
   5,22:1. Der zweite Knopf blieb heil, weil .rw-btn--on-dark.rw-btn--secondary
   die höhere Spezifität hat; .rw-btn--primary hat sie nicht. */
.start-cta p a{color:var(--link-on-dark)}
.start-cta p a:hover{color:var(--link-on-dark-hover)}