/* HoloNews, dritte Fassung (16.10.2026, Jeff: „mehr die Optik einer echten Bildzeitung vom Aufbau her“, Logo wie HoloFreaks, Kursblatt
   rechts bleibt). Aufbau einer Boulevardzeitung: Kopfleiste mit Logo-Kasten, schwarze Ressortleiste, Eilband, Aufmacher mit riesiger
   Schlagzeile über die volle Breite, Zweitaufmacher mit Schlagzeile im Bild, Teaser mit roter Dachzeile. Bewegtbild nur mit CSS.
   Schriften aus dem System (DSGVO): Schlagzeilen in Impact bzw. der schmalsten fetten Grotesk, die das Gerät hat. */
:root {
  /* HoloFreaks-CI (20.10.2026, Brand Kit docs/brand/holofreaks): Werte wie apps/web/src/marke/holofreaks-tokens.css */
  --blau: #0d1630; --schwarz: #070d1f; --tinte-2: #556079; --linie: #e2e7f0; --flaeche: #f4f7fb;
  --eis: #60cbf1; --eis-tief: #0a6fa3; --eisweiss: #eaf9fa; --glut: #ffc24a; --feuer: #ff6a2a; --feuer-tief: #c2410c;
  --handlung: var(--eis-tief);   /* Knöpfe und Hover auf Weiß (5,5 : 1) */
  --akzent: var(--feuer-tief);   /* Dachzeilen und Rubrikmarken (5,2 : 1 auf Weiß); Feuer heißt nie Verlust */
  --gruen: #157a45; --verlust: #c81e3a;
  --holo: linear-gradient(90deg, #60cbf1 0%, #a8e6ff 42%, #ffc24a 74%, #ff6a2a 100%);
  --chrom: linear-gradient(180deg, #ffffff 0%, #d6eef9 48%, #2f7fd0 50%, #7fd6f5 100%);
  --sans: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, "Segoe UI", sans-serif;
  --schlagzeile: Impact, "Haettenschweiler", "Arial Narrow Bold", "Helvetica Neue Condensed Bold", "Arial Black", sans-serif;
  --breit: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { background: #fff; }
body { margin: 0; background: #fff; color: var(--schwarz); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.rahmen { max-width: 1200px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }

/* Kopf: blaue Leiste mit Logo wie der rote Kasten der Boulevardzeitung */
.kopf { background: var(--blau); color: #fff; }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 10px; padding-bottom: 10px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-zeichen { height: 44px; width: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35)); }
.logo-schrift { position: relative; font-family: var(--breit); font-weight: 900; font-style: italic; font-size: clamp(2rem, 6vw, 3.1rem); line-height: 1;
  letter-spacing: -0.02em; transform: skewX(-6deg); background: var(--chrom);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding: 2px 6px 10px 2px;
  filter: drop-shadow(2px 0 0 #0b1a3f) drop-shadow(-2px 0 0 #0b1a3f) drop-shadow(0 2px 0 #0b1a3f) drop-shadow(0 -2px 0 #0b1a3f) drop-shadow(0 4px 6px rgba(0,0,0,0.35)); }
.logo-schrift::after { content: ""; position: absolute; left: 6%; right: 2%; bottom: 0; height: 5px; border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: var(--holo); background-size: 200% 100%; animation: holo 5s linear infinite; }
@keyframes holo { to { background-position: 200% 0; } }
.kopf-daten { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 0.82rem; color: rgba(255,255,255,0.85); text-align: right; font-weight: 700; }
.kopf-daten #ausgabe { font-weight: 900; color: var(--eis); letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.74rem; }

/* Ressortleiste schwarz, Großbuchstaben */
.ressorts-leiste { background: var(--schwarz); }
.ressorts { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; }
.ressorts::-webkit-scrollbar { display: none; }
.ressorts a { flex: none; font-size: 0.8rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; color: #fff; padding: 10px 12px; }
.ressorts a:first-child { padding-left: 0; }
.ressorts a:hover, .ressorts a:focus-visible { color: var(--eis); }

/* Eilband */
.eil { display: flex; align-items: stretch; background: var(--eisweiss); border-bottom: 2px solid var(--schwarz); overflow: hidden; }
.eil-marke { flex: none; display: flex; align-items: center; padding: 0 12px; background: var(--feuer); color: var(--schwarz); font-weight: 900; font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; }
.eil-spur { flex: 1; min-width: 0; overflow: hidden; }
.eil-lauf { display: flex; width: max-content; animation: eil 60s linear infinite; }
.eil:hover .eil-lauf, .eil:focus-within .eil-lauf { animation-play-state: paused; }
@keyframes eil { to { transform: translateX(-50%); } }
.eil-satz { display: flex; flex: none; }
.eil-satz a { white-space: nowrap; padding: 8px 0; font-weight: 800; font-size: 0.9rem; text-decoration: none; color: var(--schwarz); }
.eil-satz a::after { content: "+++"; margin: 0 16px; color: var(--akzent); font-weight: 900; }
.eil-satz a:hover { text-decoration: underline; }

.motto { margin: 14px 0 10px; font-size: 0.95rem; font-weight: 800; color: var(--tinte-2); }

/* Bewegte Bilder: langsamer Zoom und ein Holo-Glanz */
.bild { position: relative; display: block; overflow: hidden; background: var(--blau); isolation: isolate; }
.bild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; animation: zoom 14s ease-in-out infinite alternate; }
.bild::after { content: ""; position: absolute; inset: -30%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.45) 48%, rgba(96,203,241,0.25) 52%, transparent 60%);
  mix-blend-mode: soft-light; animation: glanz 6s ease-in-out infinite; pointer-events: none; z-index: 1; }
@keyframes zoom { from { transform: scale(1.02); } to { transform: scale(1.14) translateY(-2%); } }
@keyframes glanz { 0% { transform: translateX(-60%); } 55%, 100% { transform: translateX(60%); } }

.dachzeile { display: block; font-size: 0.8rem; font-weight: 900; letter-spacing: 0.03em; text-transform: uppercase; color: var(--akzent); }
.dachzeile.kasten { display: inline-block; color: #fff; background: var(--akzent); padding: 3px 8px; font-size: 0.74rem; }
.meta { font-size: 0.76rem; color: var(--tinte-2); }

/* Aufmacher: Schlagzeile über die volle Breite, darunter Bild links, Anriss rechts */
/* Eilmeldung (21.10.2026): eigene Meldung der Redaktion zwischen zwei Ausgaben, bis die Zeitung sie druckt (RPC holonews_eil) */
.eilkasten { border: 4px solid var(--feuer-tief); background: #fff8f2; padding: 16px; margin-bottom: 22px; animation: auftritt 0.5s ease-out both; }
.eilkasten + .eilkasten { margin-top: -10px; }
.eil-meldung { display: grid; grid-template-columns: minmax(110px, 190px) minmax(0, 1fr); gap: 18px; align-items: start; }
.eil-meldung.ohne-karte { grid-template-columns: minmax(0, 1fr); }
.eil-meldung + .eil-meldung { margin-top: 16px; padding-top: 16px; border-top: 2px solid var(--linie); }
.eil-karte { display: block; width: 100%; height: auto; border-radius: 6%/4.3%; box-shadow: 0 10px 24px rgba(7,13,31,0.35); transform: rotate(-3deg); }
.eil-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.eil-kopf .kasten { background: var(--feuer-tief); animation: pulsieren 2.4s ease-in-out infinite; }
.eil-zeit { font-size: 0.8rem; font-weight: 800; color: var(--tinte-2); }
.eil-meldung h2 { margin: 8px 0 6px; font-family: var(--schlagzeile); font-weight: 400; font-size: clamp(1.9rem, 5vw, 3.4rem); line-height: 0.98; text-transform: uppercase; }
.eil-meldung p { margin: 0 0 10px; font-size: 1.02rem; line-height: 1.45; }
.eil-quelle { font-weight: 800; color: var(--handlung); }
@media (max-width: 560px) { .eil-meldung { grid-template-columns: minmax(0, 1fr); } .eil-karte { width: 58%; margin: 0 auto; } }

.aufmacher { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "kopf kopf" "bild text"; gap: 14px 22px;
  padding-bottom: 22px; margin-bottom: 22px; border-bottom: 4px solid var(--schwarz); animation: auftritt 0.5s ease-out both; }
@keyframes auftritt { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.aufmacher-kopf { grid-area: kopf; }
.aufmacher-kopf .kasten { animation: pulsieren 2.4s ease-in-out infinite; }
@keyframes pulsieren { 50% { background: var(--schwarz); } }
.aufmacher h2 { margin: 8px 0 0; font-family: var(--schlagzeile); font-weight: 400; font-size: clamp(2.6rem, 7.2vw, 5.6rem); line-height: 0.95; letter-spacing: 0.005em;
  text-transform: uppercase; cursor: pointer; }
.aufmacher h2:hover { color: var(--handlung); }
.aufmacher > .bild { grid-area: bild; aspect-ratio: 16 / 10; cursor: pointer; }
.aufmacher-text { grid-area: text; align-self: start; display: grid; gap: 12px; justify-items: start; }
/* Aufmacher ohne Bild (28.10.2026): die Nachricht des Tages zeigt nur noch ein Bild mit Bezug zur Meldung. Fehlt es (oder lädt es nicht,
   portraet entfernt dann den Rahmen), läuft der Text über die volle Breite statt neben einer leeren Bildspalte. */
.aufmacher:not(:has(> .bild)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "text"; }
.cliffhanger { margin: 0; font-size: 1.3rem; line-height: 1.35; font-weight: 800; }
.weiter { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 900; font-size: 1rem; cursor: pointer; border: 0; padding: 11px 18px;
  background: var(--handlung); color: #fff; text-transform: uppercase; letter-spacing: 0.02em; }
.weiter:hover, .weiter:focus-visible { background: var(--schwarz); }

/* Raster: 6 Spalten; Zweitaufmacher je 3, Teaser je 2 */
.spalten { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.artikel-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 24px 20px; }
.meldung { grid-column: span 2; display: flex; flex-direction: column; gap: 7px; text-align: left; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit;
  cursor: pointer; animation: auftritt 0.5s ease-out both; }
.meldung .bild { aspect-ratio: 16 / 10; }
.meldung h3 { margin: 0; font-size: 1.15rem; line-height: 1.18; font-weight: 900; letter-spacing: -0.01em; }
.meldung:hover h3, .meldung:focus-visible h3 { color: var(--handlung); }
.meldung p { margin: 0; font-size: 0.94rem; line-height: 1.45; color: #2c2f36; }
.meldung.ohne-bild { border-top: 3px solid var(--schwarz); padding-top: 10px; }
/* Zweitaufmacher: Schlagzeile weiß im Bild */
.meldung.ueber { grid-column: span 3; }
.meldung.ueber .bild { aspect-ratio: 4 / 3; }
.ueber-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: 6px; justify-items: start; padding: 60px 14px 14px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.88) 100%); }
.meldung.ueber h3 { color: #fff; font-family: var(--schlagzeile); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1; text-transform: uppercase; letter-spacing: 0.01em;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5); }
.meldung.ueber:hover h3, .meldung.ueber:focus-visible h3 { color: var(--eis); }

/* Kursblatt (bleibt rechts, Jeff 16.10.2026) mit schwarzem Kopf wie ein Zeitungskasten */
.kursblatt { border: 2px solid var(--schwarz); background: #fff; }
/* Seitenspalte (27.10.2026): Kursblatt und Slab-Börse untereinander. Nicht mehr sticky: zwei Kästen sind höher als der Bildschirm,
   ein klebender Block ließe das untere Ende erst am Seitenende sehen */
.seitenspalte { display: grid; gap: 18px; align-content: start; }
.kursblatt h2 { margin: 0; padding: 8px 12px; background: var(--schwarz); color: #fff; font-family: var(--schlagzeile); font-weight: 400; font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.02em; }
.kursblatt .unter { margin: 8px 12px 4px; font-size: 0.8rem; color: var(--tinte-2); font-weight: 700; }
.kurs { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--linie); }
.kurs .bild { aspect-ratio: 5 / 7; border-radius: 3px; }
.kurs > :only-child { grid-column: 1 / -1; } /* ohne Kartenbild lag der Text in der 52-px-Bildspalte (20.10.2026) */
.kurs b { display: block; line-height: 1.2; font-size: 0.95rem; }
.kurs small { color: var(--tinte-2); }
.plus { color: var(--gruen); font-weight: 900; } .minus { color: var(--verlust); font-weight: 900; }
.kurs .zeitraum { font-size: 0.72rem; font-weight: 700; color: var(--tinte-2); margin-left: 6px; white-space: nowrap; } /* 7 oder 30 Tage je Zeile (26.10.2026) */
.kommentar { margin: 12px; font-size: 0.9rem; line-height: 1.5; }
.kursblatt .hinweis { font-size: 0.72rem; color: var(--tinte-2); margin: 0 12px 12px; }
/* Slab-Börse (27.10.2026): teurer und günstiger weiterverkaufte Slabs, Wochenmedian gegen die Verkäufe davor */
.slabboerse h3 { margin: 10px 12px 2px; font-size: 0.74rem; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tinte-2); }
.slab small { display: block; } /* Set und Sprache in eigener Zeile, sonst klebt das Noten-Etikett an „Englisch“ (Screenshot 27.10.2026) */
.slab .note { display: inline-block; margin-top: 3px; padding: 1px 6px; border: 1.5px solid var(--schwarz); border-radius: 3px; font-size: 0.72rem; font-weight: 900;
  letter-spacing: 0.02em; white-space: nowrap; }
.slab .preis { font-weight: 900; }
.slab .vorher { display: block; font-size: 0.76rem; color: var(--tinte-2); }
.slab .beleg { display: inline-block; margin-top: 2px; font-size: 0.74rem; font-weight: 700; color: var(--handlung); text-decoration: none; }
.slab .beleg:hover, .slab .beleg:focus-visible { text-decoration: underline; }

.fuss { margin-top: 36px; background: var(--blau); color: rgba(255,255,255,0.8); font-size: 0.82rem; }
.fuss-innen { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 18px; padding-bottom: 18px; }
.fuss a { color: #fff; }

/* Geöffneter Artikel */
.blatt { position: fixed; inset: 0; background: rgba(8, 14, 32, 0.72); display: grid; place-items: center; padding: 16px; z-index: 10; }
.blatt[hidden] { display: none; }
.blatt-papier { position: relative; width: min(680px, 100%); max-height: 90vh; overflow: auto; background: #fff; border-top: 6px solid var(--handlung); padding: 26px 24px 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5); animation: aufziehen 0.35s cubic-bezier(.2,.7,.2,1) both; }
@keyframes aufziehen { from { transform: translateY(24px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
.blatt-zu { position: absolute; top: 6px; right: 10px; font-size: 1.9rem; line-height: 1; border: 0; background: none; cursor: pointer; color: var(--schwarz); }
.blatt-papier h2 { margin: 8px 0 14px; font-family: var(--schlagzeile); font-weight: 400; font-size: 2.3rem; line-height: 1; text-transform: uppercase; }
.blatt-papier p { font-size: 1.08rem; line-height: 1.55; }
.blatt-papier .bild { aspect-ratio: 16 / 10; margin: 0 0 16px; }
.quelle-knopf { display: inline-block; margin-top: 8px; font-weight: 900; padding: 10px 16px; text-decoration: none; background: var(--schwarz); color: #fff; text-transform: uppercase; font-size: 0.9rem; }
.quelle-knopf:hover { background: var(--handlung); }
/* Teilen-Leiste (19.10.2026, Kern in teilen.js): Textknöpfe in Markenfarben im Stil der Zeitung, Kopieren in Gelb, nativer Dialog in Rot */
.teilen { margin-top: 20px; padding-top: 14px; border-top: 3px solid var(--schwarz); }
.teilen > a { font-weight: 700; word-break: break-all; }
.teilen-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.teilen-knoepfe a, .teilen-knoepfe button { display: inline-flex; align-items: center; font: inherit; font-weight: 900; font-size: 0.8rem; line-height: 1; text-transform: uppercase;
  letter-spacing: 0.03em; text-decoration: none; color: #fff; background: var(--schwarz); border: 0; padding: 9px 12px; cursor: pointer; }
.teilen-knoepfe a:hover, .teilen-knoepfe a:focus-visible, .teilen-knoepfe button:hover, .teilen-knoepfe button:focus-visible { filter: brightness(0.82); }
.teilen-knoepfe .nativ { background: var(--handlung); }
.teilen-knoepfe .whatsapp { background: #25d366; }
.teilen-knoepfe .facebook { background: #1877f2; }
.teilen-knoepfe .x { background: #000; }
.teilen-knoepfe .telegram { background: #26a5e4; }
.teilen-knoepfe .linkedin { background: #0a66c2; }
.teilen-knoepfe .mail { background: var(--blau); }
.teilen-knoepfe .kopieren { background: var(--eis); color: var(--schwarz); }
.teilen-knoepfe .kopieren.fertig { background: var(--gruen); color: #fff; }
.teilen-knoepfe .fehler { background: var(--verlust); color: #fff; }
.teilen-link { flex: 1 1 100%; font: inherit; font-size: 0.9rem; padding: 8px 10px; border: 2px solid var(--schwarz); }
.teilen-adresse { display: block; margin-top: 8px; font-size: 0.76rem; color: var(--tinte-2); word-break: break-all; }
.leer { color: var(--tinte-2); text-align: center; padding: 40px 0; }

@media (max-width: 1000px) {
  .spalten { grid-template-columns: 1fr; }
  .kursblatt { position: static; }
  .artikel-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meldung, .meldung.ueber { grid-column: span 1; }
}
@media (max-width: 700px) {
  .aufmacher { grid-template-columns: 1fr; grid-template-areas: "kopf" "bild" "text"; }
  .cliffhanger { font-size: 1.12rem; }
  .artikel-raster { grid-template-columns: 1fr; }
  .logo-zeichen { height: 34px; }
  .kopf-daten { font-size: 0.72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bild img, .bild::after, .logo-schrift::after, .aufmacher, .aufmacher-kopf .kasten, .meldung, .blatt-papier { animation: none !important; }
  .eil-spur { overflow-x: auto; } .eil-lauf { animation: none; } .eil-satz[aria-hidden="true"] { display: none; }
}