/* [MOBILE-OVERFLOW-FIX 20260816] Vorbestehendes Problem (bereits vor dieser
   Runde, per git stash bestätigt): .reference-monitor (dekorativ,
   aria-hidden, absolute + transform:scale()) behält seine volle 640px-
   Layoutbreite bei — transform:scale() verändert nur die Darstellung, nicht
   die Breite, die in scrollWidth einfließt. Ergebnis: horizontales Scrollen
   auf schmalen Bildschirmen, obwohl visuell alles passt. Einzeilige,
   risikoarme Absicherung statt das dekorative Element neu zu bauen. */
html,body{overflow-x:hidden}
/* [MOBILE-HERO-GRID-FIX 20260816] Ebenfalls vorbestehend, bisher nur durch
   .reference-monitor (position:absolute, ignorierte seine Grid-Zelle
   komplett) verdeckt: tagesnachweis-landing-monitor.css definiert
   .hero{grid-template-columns:.88fr 1.12fr} OHNE @media-Klammer, geladen
   NACH tagesnachweis-landing.css — gewinnt dadurch bei gleicher Spezifität
   IMMER gegen dessen "@media(max-width:900px){.hero{grid-template-columns:
   1fr}}", auch auf schmalen Bildschirmen. Ergebnis ohne diese Regel: die
   zweite Spalte (Monitor) wurde auf ~20px zusammengedrückt. Einfacher
   Cascade-Fix (spätere Ladeposition, keine !important nötig) statt die
   bestehende Datei anzufassen. */
@media(max-width:900px){.hero{grid-template-columns:1fr}}

/* [DEMO-CARDS 20260816] 6 Karten + gemeinsame Vorschau. Eigene, kleine Datei
   statt die bestehende (einzeilige) tagesnachweis-landing.css anzufassen —
   gleiche Variablen (--navy/--orange/--paper/--soft/--muted/--line), keine
   neuen Farben. */
.demo-cards{padding-top:70px;padding-bottom:70px}
.demo-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:32px;align-items:start;margin-top:32px}
.demo-cards-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.demo-card{display:flex;align-items:center;gap:12px;text-align:left;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--paper);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;font:inherit}
.demo-card:hover{border-color:var(--orange)}
.demo-card.is-active{border-color:var(--orange);background:#fff;box-shadow:0 10px 24px rgba(18,38,57,.1)}
.demo-card-num{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;background:var(--soft);color:var(--navy);transition:background .2s ease,color .2s ease}
.demo-card.is-active .demo-card-num{background:var(--orange);color:#fff}
.demo-card-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.demo-card-text strong{font-size:14.5px;color:var(--navy)}
.demo-card-text small{font-size:12.5px;color:var(--muted);line-height:1.4}
.demo-card{padding:16px 18px}
.demo-viewer{position:relative;border-radius:16px;overflow:hidden;background:#0e1b2c;box-shadow:0 22px 44px rgba(18,38,57,.16);aspect-ratio:16/10}
.demo-viewer img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.demo-viewer-caption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:14px 18px;background:linear-gradient(0deg,rgba(8,20,36,.88),rgba(8,20,36,0));color:#fff;font-size:13px;font-weight:600}
@media(max-width:900px){.demo-layout{grid-template-columns:1fr}.demo-viewer{order:-1}}
@media(max-width:560px){.demo-cards-list{grid-template-columns:1fr}}