/* dasprogramm.de – fp: token=qarn stil=Editorial-Light nach Mockup Tom 13.10.2026 akzent=#ff3b54 lila=#7b4dff font-h=DM-Serif-Display font-hand=Caveat font-b=System radius=16px spacing=16px shadow=soft anim=keine */
@font-face { font-family: "Qarn Serif"; src: url("/schriften/dm-serif-display-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Qarn Hand"; src: url("/schriften/caveat-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
:root {
  --qarn-bg: #faf7f4;
  --qarn-karte: #ffffff;
  --qarn-text: #141416;
  --qarn-leise: #63636b;
  --qarn-linie: #ece7e1;
  --qarn-rot: #dc1f3c;
  --qarn-rot-dunkel: #b3152f;
  --qarn-rosa: #ffe3e7;
  --qarn-lila: #7b4dff;
  --qarn-lila-hell: #efe9ff;
  --qarn-gelb: #fff36b;
  --qarn-nacht: #17151f;
  --qarn-radius: 16px;
  --qarn-abstand: 16px;
  --qarn-schatten: 0 1px 2px rgba(20, 20, 22, .05), 0 6px 24px rgba(20, 20, 22, .06);
  --qarn-breite: 1360px;
  --qarn-serif: "Qarn Serif", Georgia, "Times New Roman", serif;
  --qarn-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--qarn-bg); color: var(--qarn-text); font: 400 1rem/1.6 var(--qarn-sans); overflow-x: hidden; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; overflow-wrap: break-word; hyphens: auto; }
p, li, dd { overflow-wrap: break-word; }
h1, h2 { font-family: var(--qarn-serif); font-weight: 400; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
h2 small { font-family: var(--qarn-sans); font-size: .55em; color: var(--qarn-leise); margin-left: .4em; white-space: nowrap; letter-spacing: 0; }
h3 { font-size: 1.05rem; font-weight: 700; }
a { color: var(--qarn-rot-dunkel); }
img { max-width: 100%; height: auto; display: block; }
svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.qarn-unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.qarn-skip { position: absolute; left: -999px; top: 8px; background: var(--qarn-text); color: #fff; padding: 8px 12px; border-radius: 8px; z-index: 100; }
.qarn-skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--qarn-lila); outline-offset: 2px; }

/* ---------- Kopf ---------- */
.qarn-kopf { position: sticky; top: 0; z-index: 30; background: rgba(250, 247, 244, .94); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--qarn-linie); }
.qarn-kopf-in { max-width: var(--qarn-breite); margin: 0 auto; padding: 10px var(--qarn-abstand); display: flex; align-items: center; gap: 24px; }
.qarn-logo { text-decoration: none; color: var(--qarn-text); display: flex; flex-direction: column; line-height: 1.1; flex: none; }
.qarn-logo-wort { font-family: var(--qarn-sans); font-weight: 800; font-size: 1.55rem; letter-spacing: -.04em; }
.qarn-logo-wort b { color: var(--qarn-rot); font-weight: 800; }
.qarn-logo-wort small { font-size: .62em; letter-spacing: -.02em; }
.qarn-logo-slogan { font-size: .72rem; color: var(--qarn-leise); letter-spacing: .01em; }
.qarn-nav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.qarn-navlink, .qarn-menue > button { font: 600 .95rem var(--qarn-sans); color: var(--qarn-text); text-decoration: none; background: none; border: 0; padding: 8px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.qarn-navlink:hover, .qarn-menue > button:hover, .qarn-menue.qarn-offen > button, .qarn-navlink[aria-current], .qarn-aktiv > button { background: #fff; box-shadow: inset 0 0 0 1px var(--qarn-linie); }
.qarn-pfeil-unten { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.qarn-menue { position: relative; }
.qarn-menue-liste { position: absolute; top: 100%; left: 0; min-width: 240px; padding: 14px 8px 8px; display: none; z-index: 40; }
.qarn-menue-liste::before { content: ""; position: absolute; inset: 6px 0 0; background: #fff; border-radius: 14px; box-shadow: 0 12px 40px rgba(20, 20, 22, .14); z-index: -1; }
.qarn-menue:hover .qarn-menue-liste, .qarn-menue.qarn-offen .qarn-menue-liste, .qarn-menue:focus-within .qarn-menue-liste { display: block; }
.qarn-menue-liste a { display: block; padding: 9px 12px; border-radius: 10px; color: var(--qarn-text); text-decoration: none; font-size: .95rem; }
.qarn-menue-liste a:hover, .qarn-menue-liste a[aria-current] { background: var(--qarn-rosa); color: var(--qarn-rot-dunkel); }
.qarn-kopf-rechts { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.qarn-burger { display: none; background: #fff; border: 1px solid var(--qarn-linie); border-radius: 12px; padding: 9px; cursor: pointer; color: var(--qarn-text); }
.qarn-burger svg { width: 22px; height: 22px; }

/* Suche */
.qarn-suche { position: relative; display: flex; align-items: center; background: #fff; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--qarn-linie); }
.qarn-suche input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--qarn-text); padding: 10px 4px 10px 16px; outline: none; }
.qarn-suche input::-webkit-search-cancel-button { display: none; }
.qarn-suche button { border: 0; background: none; color: var(--qarn-text); padding: 8px 14px; cursor: pointer; display: grid; place-items: center; }
.qarn-suche-klein { width: 280px; }
.qarn-suche-gross { box-shadow: var(--qarn-schatten); padding: 8px; max-width: 640px; }
.qarn-suche-gross input { font-size: 1.12rem; padding: 12px 8px; }
.qarn-suche-gross button { width: 52px; height: 52px; border-radius: 50%; background: var(--qarn-rot); color: #fff; }
.qarn-suche-gross button svg { width: 22px; height: 22px; }
.qarn-suche-funke { color: var(--qarn-lila); padding-left: 12px; display: grid; }
.qarn-suche-funke svg { width: 24px; height: 24px; }
.qarn-treffer { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border-radius: 14px; box-shadow: 0 12px 40px rgba(20, 20, 22, .16); padding: 6px; z-index: 50; max-height: 60vh; overflow: auto; }
.qarn-treffer a, .qarn-suchergebnis a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--qarn-text); text-decoration: none; }
.qarn-treffer a:hover, .qarn-treffer a.qarn-gewaehlt { background: var(--qarn-rosa); }
.qarn-treffer small, .qarn-suchergebnis small { color: var(--qarn-leise); white-space: nowrap; }
.qarn-suchergebnis { list-style: none; padding: 0; margin: 20px 0; background: #fff; border-radius: var(--qarn-radius); }

.qarn-main { max-width: var(--qarn-breite); margin: 0 auto; padding: var(--qarn-abstand); }
.qarn-lead { font-size: 1.08rem; color: var(--qarn-leise); max-width: 62ch; }
.qarn-leise { color: var(--qarn-leise); font-size: .9rem; }
.qarn-klein { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--qarn-leise); }
.qarn-dachzeile { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--qarn-text); margin: 0 0 10px; }
.qarn-krumen { font-size: .85rem; color: var(--qarn-leise); margin: 4px 0 14px; }
.qarn-krumen a { color: var(--qarn-leise); }
.qarn-chip { display: inline-flex; align-items: center; gap: 6px; font: 500 .88rem var(--qarn-sans); padding: 7px 14px; border-radius: 999px; background: #fff; color: var(--qarn-text); text-decoration: none; border: 1px solid var(--qarn-linie); cursor: pointer; }
.qarn-chip:hover { border-color: var(--qarn-text); }
.qarn-chip[aria-pressed="true"] { background: var(--qarn-lila); border-color: var(--qarn-lila); color: #fff; }
.qarn-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.qarn-marke { display: inline-block; background: var(--qarn-rot); color: #fff; font: 700 .7rem var(--qarn-sans); padding: 3px 8px; border-radius: 6px; vertical-align: middle; margin-left: 6px; }

/* Knöpfe & Schalter */
.qarn-knopf { display: inline-flex; align-items: center; gap: 8px; font: 650 .92rem var(--qarn-sans); border: 0; cursor: pointer; padding: 11px 18px; border-radius: 999px; background: var(--qarn-rot); color: #fff; text-decoration: none; line-height: 1.2; }
.qarn-knopf:hover { filter: brightness(1.06); }
.qarn-knopf-hell { background: #fff; color: var(--qarn-text); box-shadow: inset 0 0 0 1px var(--qarn-linie); }
.qarn-knopf-weiss { background: #fff; color: var(--qarn-text); }
.qarn-knopf[aria-pressed="true"] { background: var(--qarn-lila); }
.qarn-knopf[aria-pressed="true"] svg, .qarn-herz[aria-pressed="true"] svg { fill: currentColor; }
.qarn-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.qarn-schalter { display: inline-flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 600; cursor: pointer; user-select: none; }
.qarn-schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qarn-schalter span { width: 42px; height: 24px; border-radius: 999px; background: #d9d4cd; position: relative; transition: background .15s; }
.qarn-schalter span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.qarn-schalter input:checked + span { background: var(--qarn-lila); }
.qarn-schalter input:checked + span::after { transform: translateX(18px); }
.qarn-schalter input:focus-visible + span { outline: 3px solid var(--qarn-lila); outline-offset: 2px; }

/* ---------- Hero Startseite ---------- */
.qarn-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; align-items: center; margin: 4px 0 20px; }
.qarn-punktzeile { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.qarn-punktzeile span { display: inline-flex; align-items: center; gap: 14px; }
.qarn-punktzeile span:first-child::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--qarn-rot); margin-right: -6px; }
.qarn-punktzeile span + span::before { content: "•"; color: var(--qarn-text); }
.qarn-hero h1 { font-size: clamp(3rem, 8vw, 6.4rem); line-height: .9; letter-spacing: -.035em; margin: 0 0 14px; }
.qarn-hero h1 span { display: block; }
.qarn-hero h1 em { font-style: normal; color: var(--qarn-rot); }
.qarn-hero-unter { font-family: var(--qarn-serif); font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0 0 8px; line-height: 1.15; }
.qarn-hero-lead { color: var(--qarn-leise); font-size: 1.08rem; max-width: 54ch; margin: 0 0 20px; }
.qarn-hero-bild { position: relative; align-self: stretch; min-height: 340px; }
.qarn-hero-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 30%;
  clip-path: polygon(6% 2%, 22% 0, 48% 3%, 76% 0, 100% 4%, 98% 30%, 100% 62%, 96% 100%, 64% 97%, 36% 100%, 10% 96%, 0 70%, 3% 40%, 0 12%); border-radius: 6px; }
.qarn-hero-bild::before { content: ""; position: absolute; left: -4%; bottom: 6%; width: 38%; height: 26%; background: linear-gradient(120deg, var(--qarn-rot), #ff7a5a); clip-path: polygon(0 30%, 100% 0, 92% 100%, 6% 80%); opacity: .85; z-index: -1; }
.qarn-hero-bild::after { content: ""; position: absolute; right: 8%; bottom: -4%; width: 44%; height: 22%; background: var(--qarn-lila-hell); clip-path: polygon(4% 20%, 100% 0, 96% 90%, 0 100%); z-index: -1; }
.qarn-hand { position: absolute; top: 4%; right: 3%; margin: 0; font-family: "Qarn Hand", "Bradley Hand", cursive; font-size: clamp(2rem, 4vw, 3.4rem); color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.45); transform: rotate(-8deg); }
.qarn-etiketten { position: absolute; right: 2%; bottom: 10%; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.qarn-etiketten li { background: var(--qarn-gelb); color: var(--qarn-text); font: 600 .78rem var(--qarn-sans); letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; }

/* ---------- Boxen ---------- */
.qarn-box { background: var(--qarn-karte); border-radius: var(--qarn-radius); box-shadow: var(--qarn-schatten); padding: 20px; margin: 0 0 var(--qarn-abstand); min-width: 0; }
.qarn-box-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.qarn-box-kopf a { font-size: .85rem; font-weight: 600; color: var(--qarn-lila); text-decoration: none; display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
.qarn-box-lila { background: linear-gradient(160deg, #fff 0%, var(--qarn-lila-hell) 100%); }
.qarn-dunkel { background: radial-gradient(120% 120% at 100% 0%, #3a2350 0%, var(--qarn-nacht) 60%); color: #fff; }
.qarn-dunkel .qarn-klein { color: #c9c2dc; }
.qarn-dunkel h2 { color: #fff; }

/* Story-Radar */
.qarn-radar-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 14px; }
.qarn-radar-kopf h2 { margin: 0; }
.qarn-tabs { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.qarn-tabs button { font: 600 .9rem var(--qarn-sans); background: var(--qarn-bg); border: 1px solid var(--qarn-linie); padding: 6px 14px; border-radius: 999px; cursor: pointer; color: var(--qarn-text); }
.qarn-tabs button[aria-selected="true"] { background: var(--qarn-text); color: #fff; border-color: var(--qarn-text); }
.qarn-radar-inhalt { display: grid; grid-template-columns: 150px minmax(0, 1fr) 150px 260px minmax(240px, 300px); gap: 20px; align-items: center; }
.qarn-radar-gesehen, .qarn-radar-aktuell { display: flex; flex-direction: column; gap: 2px; }
.qarn-radar-gesehen b, .qarn-radar-aktuell b { font-size: 1.25rem; }
.qarn-radar-strahl { min-width: 0; }
.qarn-radar-bilder { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(84px, 1fr); gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.qarn-radar-bilder::-webkit-scrollbar { display: none; }
.qarn-radar-bild { position: relative; border-radius: 10px; overflow: hidden; text-decoration: none; display: block; }
.qarn-radar-bild .qarn-bild { border-radius: 10px; }
.qarn-radar-bild img, .qarn-radar-bild .qarn-bild-leer { aspect-ratio: 16 / 10; }
.qarn-radar-bild span { position: absolute; left: 6px; bottom: 6px; background: rgba(20,20,22,.75); color: #fff; font-size: .7rem; font-weight: 700; padding: 2px 6px; border-radius: 6px; }
.qarn-radar-linie { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; position: relative; }
.qarn-radar-linie::before { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--qarn-lila), #d7ccff); }
.qarn-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--qarn-lila); position: relative; }
.qarn-punkt-jetzt { width: 22px; height: 22px; box-shadow: 0 0 0 5px var(--qarn-lila-hell); }
.qarn-punkt.qarn-gesehen-punkt { background: #fff; box-shadow: inset 0 0 0 3px var(--qarn-lila); }
.qarn-radar-knopf { display: flex; align-items: center; gap: 12px; background: var(--qarn-rot); color: #fff; text-decoration: none; padding: 18px 20px; border-radius: 14px; font-weight: 650; font-size: 1.02rem; line-height: 1.25; }
.qarn-radar-knopf svg:first-child { width: 26px; height: 26px; }
.qarn-radar-knopf:hover { filter: brightness(1.06); }
.qarn-radar-fragen { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 1px solid var(--qarn-linie); }
.qarn-radar-fragen a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; color: var(--qarn-text); text-decoration: none; font-size: .9rem; }
.qarn-radar-fragen a:hover { color: var(--qarn-lila); }

/* Vier Spalten */
.qarn-vier { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--qarn-abstand); align-items: start; }
.qarn-vier .qarn-box { margin: 0; height: 100%; }
.qarn-slots { list-style: none; margin: 0 0 24px; padding: 0; }
.qarn-slot { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; padding: 12px 8px; border-bottom: 1px solid var(--qarn-linie); border-radius: 10px; }
.qarn-slot time { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qarn-slot h3 { font-size: 1rem; margin: 0; }
.qarn-slot h3 a { color: var(--qarn-text); }
.qarn-slot-info { margin: 0; font-size: .86rem; color: var(--qarn-leise); }
.qarn-slot details summary { font-size: .85rem; cursor: pointer; color: var(--qarn-rot-dunkel); }
.qarn-slot details p { margin: 6px 0 0; }
.qarn-prime { background: #fff7e0; }
.qarn-slot.qarn-laeuft { background: var(--qarn-rosa); box-shadow: inset 4px 0 0 var(--qarn-rot); }
.qarn-slot.qarn-laeuft time::after { content: "Jetzt"; display: block; width: max-content; margin-top: 4px; background: var(--qarn-rot); color: #fff; font-size: .68rem; padding: 1px 6px; border-radius: 6px; }
.qarn-slot.qarn-vorbei { opacity: .5; }
.qarn-slots-kompakt .qarn-slot { grid-template-columns: 48px 64px minmax(0, 1fr); align-items: center; padding: 8px 4px; }
.qarn-slots-kompakt .qarn-slot h3 { font-size: .92rem; }
.qarn-daumen { border-radius: 8px; }
.qarn-daumen img, .qarn-daumen.qarn-bild-leer { aspect-ratio: 4 / 3; }
.qarn-daumen.qarn-bild-leer svg { width: 18px; height: 18px; }
.qarn-serienkarten { display: grid; gap: 10px; }
.qarn-serienkarte { position: relative; border-radius: 14px; overflow: hidden; min-height: 92px; background: linear-gradient(120deg, #3b2a7a, var(--qarn-lila)); color: #fff; display: flex; align-items: flex-end; }
.qarn-serienkarte:nth-child(n+2) { background: linear-gradient(120deg, #1d1b26, #3a3646); }
.qarn-serienkarte .qarn-karte-bg { position: absolute; inset: 0; margin: 0; border-radius: 0; }
.qarn-serienkarte .qarn-karte-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .7; }
.qarn-serienkarte .qarn-karte-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23,21,31,.92) 0%, rgba(23,21,31,.55) 60%, rgba(23,21,31,.2) 100%); }
.qarn-serienkarte:first-child .qarn-karte-bg::after { background: linear-gradient(90deg, rgba(64,36,160,.95) 0%, rgba(123,77,255,.6) 60%, rgba(123,77,255,.15) 100%); }
.qarn-serienkarte-text { position: relative; padding: 12px 52px 12px 14px; display: flex; flex-direction: column; gap: 0; font-size: .85rem; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.qarn-serienkarte-text a { color: #fff; text-decoration: none; font-size: 1.25rem; font-weight: 800; }
.qarn-serienkarte-text a::after { content: ""; position: absolute; inset: 0; }
.qarn-herz { position: absolute; top: 10px; right: 10px; z-index: 2; background: rgba(255,255,255,.14); border: 0; border-radius: 50%; width: 36px; height: 36px; display: grid; place-items: center; color: #fff; cursor: pointer; }
.qarn-herz[aria-pressed="true"] { color: var(--qarn-rot); background: #fff; }
.qarn-tipp-klein { margin: 10px 0 0; }
.qarn-showliste { list-style: none; padding: 0; margin: 0 0 16px; }
.qarn-showliste a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.12); color: #fff; text-decoration: none; font-size: .92rem; }
.qarn-showliste span { color: #c9c2dc; white-space: nowrap; font-size: .82rem; }

/* Abstimmungen */
.qarn-umfrage-frage { font-weight: 700; font-size: 1.05rem; margin: 0 0 10px; }
.qarn-optionen { display: grid; gap: 8px; }
.qarn-option { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; font: 500 .92rem var(--qarn-sans); color: var(--qarn-text); background: #fff; border: 1px solid var(--qarn-linie); border-radius: 12px; padding: 10px 12px; cursor: pointer; overflow: hidden; }
.qarn-option:hover:not([disabled]) { border-color: var(--qarn-lila); }
.qarn-option[disabled] { cursor: default; }
.qarn-option .qarn-balken { position: absolute; left: 0; top: 0; bottom: 0; background: var(--qarn-lila-hell); z-index: 0; }
.qarn-option.qarn-meine-wahl .qarn-balken { background: #ffd2d9; }
.qarn-option span { position: relative; z-index: 1; }
.qarn-summe { font-size: .82rem; color: var(--qarn-leise); margin: 8px 0 0; }
.qarn-mitmachen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--qarn-linie); }
.qarn-spannung, .qarn-bewertung { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.qarn-spannung .qarn-optionen, .qarn-bewertung .qarn-optionen { display: flex; flex-wrap: wrap; gap: 6px; }
.qarn-spannung .qarn-option, .qarn-bewertung .qarn-option { width: auto; padding: 5px 10px; font-size: .82rem; border-radius: 999px; }
.qarn-spannung .qarn-summe, .qarn-bewertung .qarn-summe { margin: 0; }

/* Quiz */
.qarn-quiz-frage { font-weight: 700; margin: 0 0 10px; }
.qarn-quiz .qarn-option.qarn-richtig { border-color: #1a9b5b; background: #e7f7ee; }
.qarn-quiz .qarn-option.qarn-falsch { border-color: var(--qarn-rot); background: var(--qarn-rosa); }
.qarn-quiz-stand { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; font-size: .9rem; }

/* ---------- Serienseite ---------- */
.qarn-serie-kopf { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: center; margin-bottom: 14px; }
.qarn-serie-kopf h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: .95; margin-bottom: 10px; }
.qarn-serie-bild .qarn-bild { border-radius: var(--qarn-radius); box-shadow: var(--qarn-schatten); }
.qarn-wochen { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 0; position: sticky; top: 64px; background: var(--qarn-bg); z-index: 5; margin-bottom: 8px; }
.qarn-wochen::-webkit-scrollbar { display: none; }
.qarn-wochen a { white-space: nowrap; padding: 7px 14px; border-radius: 999px; background: #fff; color: var(--qarn-text); text-decoration: none; font-size: .88rem; font-weight: 600; box-shadow: inset 0 0 0 1px var(--qarn-linie); }
.qarn-wochen a:hover { box-shadow: inset 0 0 0 1px var(--qarn-text); }
.qarn-zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.qarn-seite { position: sticky; top: 120px; }
.qarn-woche { margin-bottom: 26px; }
.qarn-folge { background: var(--qarn-karte); border-radius: var(--qarn-radius); box-shadow: var(--qarn-schatten); margin-bottom: 10px; overflow: hidden; }
.qarn-folge > summary { list-style: none; cursor: pointer; padding: 14px 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
.qarn-folge > summary::-webkit-details-marker { display: none; }
.qarn-folge > summary::after { content: "+"; grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--qarn-rosa); color: var(--qarn-rot-dunkel); font-size: 1.3rem; }
.qarn-folge[open] > summary::after { content: "–"; }
.qarn-folge-meta { font-size: .83rem; color: var(--qarn-rot-dunkel); font-weight: 700; margin: 0; }
.qarn-folge-titel { font-family: var(--qarn-serif); font-size: 1.35rem; grid-column: 1; }
.qarn-folge-nr { font-size: .85rem; color: var(--qarn-leise); grid-column: 1; }
.qarn-folge-inhalt { padding: 0 18px 18px; display: grid; gap: 18px; }
@media (min-width: 760px) { .qarn-folge-inhalt { grid-template-columns: 280px minmax(0, 1fr); } .qarn-folge-erste .qarn-folge-inhalt { grid-template-columns: 400px minmax(0, 1fr); } }
.qarn-folge-inhalt p { margin: 0 0 10px; }
.qarn-folge-erste { box-shadow: 0 0 0 2px var(--qarn-rot), var(--qarn-schatten); }
.qarn-extras { margin: 0; padding: 0; list-style: none; font-size: .9rem; color: var(--qarn-leise); }
.qarn-extras li::before { content: "▸ "; color: var(--qarn-rot); }
.qarn-bild { margin: 0; border-radius: 12px; overflow: hidden; background: #ece7e1; }
.qarn-bild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.qarn-bild figcaption { font-size: .72rem; color: var(--qarn-leise); padding: 4px 8px; background: #fff; }
.qarn-bild-leer { aspect-ratio: 16 / 9; display: grid; place-items: center; color: #c5bdb3; }
.qarn-bild-leer svg { width: 32px; height: 32px; fill: currentColor; stroke: none; }
.qarn-zeiten { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0 0 10px; }
.qarn-zeiten dt { font-weight: 700; }
.qarn-zeiten dd { margin: 0; }
.qarn-rollen { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.qarn-rollen li { display: flex; flex-direction: column; padding: 10px 12px; border: 1px solid var(--qarn-linie); border-radius: 12px; }
.qarn-rollen span { font-size: .88rem; color: var(--qarn-leise); }
.qarn-rollen em { font-style: normal; font-size: .78rem; color: var(--qarn-lila); font-weight: 600; }
.qarn-drei { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.qarn-faq { border-bottom: 1px solid var(--qarn-linie); padding: 12px 0; }
.qarn-faq summary { cursor: pointer; font-weight: 650; }
.qarn-faq p { margin: 8px 0 0; }
.qarn-minis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.qarn-mini { display: flex; flex-direction: column; padding: 14px; border: 1px solid var(--qarn-linie); border-radius: 14px; text-decoration: none; color: var(--qarn-text); }
.qarn-mini:hover { border-color: var(--qarn-rot); }
.qarn-mini span { color: var(--qarn-leise); font-size: .9rem; }
.qarn-mehr { font-weight: 700; font-size: .92rem; }
.qarn-liste { margin: 0; padding-left: 18px; }

/* Spoiler-Schutz */
[data-qarn-spoiler-aus] .qarn-spoiler { filter: blur(6px); cursor: pointer; user-select: none; transition: filter .2s; }
[data-qarn-spoiler-aus] .qarn-spoiler.qarn-gezeigt { filter: none; }

/* Shows */
.qarn-termine { display: grid; gap: 14px; margin-bottom: 20px; }
.qarn-termin { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; background: #fff; border-radius: var(--qarn-radius); box-shadow: var(--qarn-schatten); padding: 16px; }
.qarn-termin h3 { font-family: var(--qarn-serif); font-weight: 400; font-size: 1.35rem; margin: 2px 0 8px; }
.qarn-termin p { margin: 0 0 8px; }
.qarn-termin-ohne-bild { grid-template-columns: minmax(0, 1fr); }
.qarn-termin-erster { box-shadow: 0 0 0 2px var(--qarn-rot), var(--qarn-schatten); }

/* Senderseite */
.qarn-jetzt { background: var(--qarn-nacht); color: #fff; border-radius: var(--qarn-radius); padding: 14px 18px; }
.qarn-jetzt b { color: var(--qarn-gelb); }
.qarn-jetzt a { color: #fff; }
.qarn-sender .qarn-slots { background: #fff; border-radius: var(--qarn-radius); box-shadow: var(--qarn-schatten); padding: 6px; }

/* Bereich, Archiv, Text */
.qarn-text-breit { max-width: 980px; }
.qarn-bereich-gitter { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-top: 18px; }
.qarn-bereich-karte { display: flex; flex-direction: column; gap: 4px; background: #fff; border-radius: var(--qarn-radius); box-shadow: var(--qarn-schatten); padding: 14px; text-decoration: none; color: var(--qarn-text); }
.qarn-bereich-karte b { font-family: var(--qarn-serif); font-weight: 400; font-size: 1.35rem; margin-top: 6px; }
.qarn-bereich-karte:hover { box-shadow: 0 0 0 2px var(--qarn-rot), var(--qarn-schatten); }
.qarn-archiv { list-style: none; padding: 0; margin: 18px 0; background: #fff; border-radius: var(--qarn-radius); box-shadow: var(--qarn-schatten); }
.qarn-archiv li { display: grid; grid-template-columns: 90px 110px minmax(0, 1fr); gap: 6px 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--qarn-linie); }
.qarn-archiv li > .qarn-chip, .qarn-archiv li > .qarn-bewertung { grid-column: 2 / -1; justify-self: start; }
.qarn-archiv-datum { color: var(--qarn-leise); font-size: .9rem; }
.qarn-text { background: #fff; border-radius: var(--qarn-radius); padding: 28px 24px; max-width: 780px; }
.qarn-text h1 { font-size: 2.2rem; }
.qarn-text h2 { font-size: 1.3rem; margin-top: 1.4em; }
.qarn-verbindungen { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.qarn-verbindungen li { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 999px; background: var(--qarn-bg); }

/* Vorteile & Fuß */
.qarn-vorteile { border-top: 1px solid var(--qarn-linie); margin-top: 28px; }
.qarn-vorteile ul { max-width: var(--qarn-breite); margin: 0 auto; padding: 22px var(--qarn-abstand); list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.qarn-vorteile li { display: flex; gap: 12px; align-items: flex-start; }
.qarn-vorteile b { display: block; font-size: .92rem; }
.qarn-vorteile small { color: var(--qarn-leise); font-size: .8rem; }
.qarn-ico { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: var(--qarn-schatten); color: var(--qarn-lila); flex: none; }
.qarn-fuss { background: var(--qarn-nacht); color: #b9b4c8; font-size: .88rem; }
.qarn-fuss-in { max-width: var(--qarn-breite); margin: 0 auto; padding: 24px var(--qarn-abstand); }
.qarn-fuss nav { display: flex; flex-wrap: wrap; gap: 16px; margin: 10px 0; }
.qarn-fuss a { color: #fff; }
.qarn-quelle, .qarn-stand { margin: 0; }

/* ---------- Breiten ---------- */
@media (max-width: 1280px) {
  .qarn-radar-inhalt { grid-template-columns: 140px minmax(0, 1fr) 240px; }
  .qarn-radar-aktuell { display: none; }
  .qarn-radar-fragen { grid-column: 1 / -1; border-left: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  .qarn-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qarn-suche-klein { width: 220px; }
}
@media (max-width: 1100px) {
  .qarn-burger { display: inline-grid; }
  .qarn-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--qarn-bg); border-bottom: 1px solid var(--qarn-linie); padding: 8px var(--qarn-abstand) 16px; box-shadow: 0 12px 30px rgba(20,20,22,.1); max-height: calc(100vh - 70px); overflow: auto; }
  .qarn-nav.qarn-offen { display: flex; }
  .qarn-menue-liste { position: static; display: block; padding: 0 0 6px 12px; min-width: 0; }
  .qarn-menue-liste::before { display: none; }
  .qarn-menue > button { width: 100%; justify-content: space-between; }
  .qarn-menue > button .qarn-pfeil-unten { display: none; }
  .qarn-navlink { padding: 10px 12px; }
  .qarn-zweispaltig { grid-template-columns: minmax(0, 1fr); }
  .qarn-seite { position: static; }
}
@media (max-width: 860px) {
  .qarn-hero { grid-template-columns: minmax(0, 1fr); }
  .qarn-hero-bild { min-height: 240px; order: -1; margin: 0 -4px; }
  .qarn-serie-kopf { grid-template-columns: minmax(0, 1fr); }
  .qarn-serie-bild { order: -1; }
  .qarn-radar-inhalt { grid-template-columns: minmax(0, 1fr); }
  .qarn-radar-gesehen { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
  .qarn-radar-fragen { grid-template-columns: minmax(0, 1fr); }
  .qarn-vier { grid-template-columns: minmax(0, 1fr); }
  .qarn-vorteile ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qarn-termin { grid-template-columns: minmax(0, 1fr); }
  .qarn-suche-klein { display: none; }
}
@media (max-width: 520px) {
  .qarn-logo-slogan { display: none; }
  .qarn-logo-wort { font-size: 1.3rem; }
  .qarn-hero h1 { font-size: 3.1rem; }
  .qarn-box { padding: 16px 14px; }
  .qarn-vorteile ul { grid-template-columns: minmax(0, 1fr); }
  .qarn-archiv li { grid-template-columns: 80px minmax(0, 1fr); }
  .qarn-archiv li > span:not(.qarn-archiv-datum) { grid-column: 1 / -1; }
  .qarn-archiv li > .qarn-chip, .qarn-archiv li > .qarn-bewertung { grid-column: 1 / -1; }
  .qarn-folge > summary { padding: 12px 14px; }
  .qarn-folge-inhalt { padding: 0 14px 14px; }
}

/* ===== Feinschliff nach Vergleich mit Toms Mockup (1536 px) ===== */
:root { --qarn-breite: 1480px; --qarn-rand: 16px; }
@media (min-width: 1100px) { :root { --qarn-rand: 32px; } }
.qarn-main, .qarn-kopf-in, .qarn-vorteile ul, .qarn-fuss-in { padding-left: var(--qarn-rand); padding-right: var(--qarn-rand); }
/* Kopf auf der Startseite durchsichtig über dem Bild, beim Scrollen wieder hell */
.qarn-start .qarn-kopf { background: transparent; backdrop-filter: none; border-bottom-color: transparent; transition: background .2s; }
.qarn-start .qarn-kopf.qarn-gescrollt { background: rgba(250, 247, 244, .94); backdrop-filter: saturate(1.4) blur(10px); border-bottom-color: var(--qarn-linie); }
/* Hero: Bild randlos bis an den rechten und oberen Rand */
.qarn-start .qarn-main { padding-top: 0; }
.qarn-start .qarn-hero { display: block; margin: -72px 0 0; padding: 92px 0 96px; min-height: 600px; }
.qarn-start .qarn-hero-text { position: relative; z-index: 2; max-width: 50%; }
.qarn-start .qarn-hero h1 { font-size: clamp(3.2rem, 7.4vw, 7.2rem); }
.qarn-start .qarn-hero-bild { position: absolute; top: 0; bottom: 0; left: 46%; right: calc(50% - 50vw); min-height: 0; z-index: 1; }
.qarn-start .qarn-hero-bild img { border-radius: 0; object-position: 45% 35%;
  clip-path: polygon(9% 0, 100% 0, 100% 86%, 93% 90%, 84% 86%, 72% 92%, 60% 88%, 47% 94%, 34% 89%, 22% 95%, 12% 90%, 7% 76%, 2% 64%, 6% 50%, 0 38%, 4% 24%, 1% 10%); }
.qarn-start .qarn-hero-bild::before { left: -2%; bottom: 20%; width: 26%; height: 18%; z-index: 2; opacity: .9; clip-path: polygon(0 40%, 30% 18%, 64% 8%, 100% 0, 94% 48%, 70% 70%, 40% 92%, 6% 100%); }
.qarn-start .qarn-hero-bild::after { right: 30%; bottom: 3%; width: 40%; height: 16%; z-index: 2; background: linear-gradient(100deg, #b9a4ff, var(--qarn-lila)); opacity: .55; clip-path: polygon(0 60%, 40% 30%, 100% 0, 92% 50%, 52% 80%, 8% 100%); }
.qarn-start .qarn-hand { top: 14%; right: 4%; color: var(--qarn-text); text-shadow: none; background: rgba(250,247,244,.0); }
.qarn-start .qarn-hand::after { content: ""; display: block; height: 5px; margin: -2px 0 0 12%; width: 80%; background: var(--qarn-rot); border-radius: 4px; transform: rotate(-4deg); }
.qarn-hand2 { position: absolute; right: 9%; bottom: 13%; z-index: 3; margin: 0; padding: 16px 30px 18px; background: #fbfaf7; font-family: "Qarn Hand", cursive; font-size: clamp(1.4rem, 2.2vw, 2.1rem); line-height: 1; color: var(--qarn-text); transform: rotate(-8deg);
  clip-path: polygon(4% 10%, 30% 0, 62% 6%, 96% 0, 100% 40%, 94% 86%, 64% 100%, 30% 92%, 0 100%, 3% 52%); }
.qarn-start .qarn-etiketten { top: 30%; bottom: auto; right: 2.5%; }
.qarn-start .qarn-etiketten li { font-size: .82rem; padding: 4px 9px; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
/* Radar schiebt sich über das Bild */
.qarn-start .qarn-radar { position: relative; z-index: 3; margin-top: -84px; padding: 18px 22px; }
.qarn-start .qarn-radar-inhalt { grid-template-columns: 180px minmax(0, 1fr) 150px 260px 300px; gap: 22px; }
.qarn-radar-bilder { grid-auto-columns: minmax(118px, 1fr); }
.qarn-radar-bild img, .qarn-radar-bild .qarn-bild-leer { aspect-ratio: 16 / 9; }
.qarn-radar-fragen { background: var(--qarn-bg); border-left: 0; border-radius: 12px; padding: 6px 14px; }
.qarn-radar-fragen li + li { border-top: 1px solid var(--qarn-linie); }
.qarn-radar-fragen a { padding: 7px 0; }
.qarn-radar-gesehen { flex-direction: row; gap: 12px; align-items: center; }
.qarn-radar-gesehen .qarn-poster { width: 64px; flex: none; border-radius: 8px; overflow: hidden; }
.qarn-radar-gesehen .qarn-poster img { aspect-ratio: 3 / 4; object-fit: cover; }
.qarn-radar-gesehen > div { display: flex; flex-direction: column; }
/* Vier Kästen dichter, wie im Mockup */
@media (min-width: 1180px) { .qarn-vier { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.qarn-vier .qarn-box { padding: 18px 18px 16px; }
.qarn-vier h2 { font-size: 1.5rem; margin: 0; }
.qarn-vier .qarn-box-kopf { margin-bottom: 2px; }
.qarn-vier .qarn-box-kopf a { font-size: .8rem; }
.qarn-heute .qarn-leise { margin: 0 0 6px; }
.qarn-slots-kompakt .qarn-slot { position: relative; border-bottom: 0; padding: 6px 4px 6px 18px; }
.qarn-slots-kompakt::before { content: ""; }
.qarn-slots-kompakt .qarn-slot::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; background: var(--qarn-linie); }
.qarn-slots-kompakt .qarn-slot::after { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #c9c2b8; }
.qarn-slots-kompakt .qarn-slot.qarn-laeuft::after { background: var(--qarn-rot); box-shadow: 0 0 0 4px var(--qarn-rosa); }
.qarn-slots-kompakt .qarn-slot.qarn-laeuft { box-shadow: none; }
.qarn-umfrage-kopf { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; margin: 10px 0 12px; }
.qarn-umfrage-kopf .qarn-bild { border-radius: 10px; }
.qarn-umfrage-kopf .qarn-bild img { aspect-ratio: 1; }
.qarn-umfrage-kopf p { margin: 0; font-weight: 700; line-height: 1.3; }
.qarn-naechstes .qarn-umfrage-frage { display: none; }
.qarn-dunkel { position: relative; overflow: hidden; }
.qarn-dunkel > * { position: relative; z-index: 1; }
.qarn-dunkel .qarn-dunkel-bild { position: absolute; inset: 0; z-index: 0; margin: 0; border-radius: 0; background: none; }
.qarn-dunkel .qarn-dunkel-bild img { width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.qarn-dunkel .qarn-dunkel-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,21,31,.55) 0%, rgba(23,21,31,.92) 55%); }
@media (max-width: 1280px) { .qarn-start .qarn-radar-inhalt { grid-template-columns: 170px minmax(0, 1fr) 240px; } }
@media (max-width: 860px) {
  .qarn-start .qarn-hero { margin-top: -72px; padding: 0 0 20px; min-height: 0; }
  .qarn-start .qarn-hero-text { max-width: none; }
  .qarn-start .qarn-hero-bild { position: relative; left: auto; right: auto; margin: 0 calc(-1 * var(--qarn-rand)) 12px; height: 340px; }
  .qarn-start .qarn-radar { margin-top: 0; }
  .qarn-start .qarn-radar-inhalt { grid-template-columns: minmax(0, 1fr); }
  .qarn-hand2 { right: 6%; bottom: 10%; }
}
.qarn-start .qarn-hand { color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.4); }
.qarn-start .qarn-radar-inhalt { grid-template-columns: 220px minmax(0, 1fr) 130px 240px 270px; gap: 20px; }
.qarn-radar-bilder { grid-auto-columns: minmax(104px, 1fr); }
.qarn-radar-gesehen b { white-space: nowrap; }
.qarn-vier .qarn-box-kopf { flex-wrap: nowrap; }
.qarn-vier .qarn-box-kopf h2 { white-space: nowrap; }
@media (max-width: 1280px) { .qarn-start .qarn-radar-inhalt { grid-template-columns: 200px minmax(0, 1fr) 240px; } }
@media (max-width: 860px) { .qarn-start .qarn-radar-inhalt { grid-template-columns: minmax(0, 1fr); } }

/* ===== Herzklopfen: emotionale Mitmach-Bausteine ===== */
.qarn-widget-titel { display: block; width: 100%; font-family: var(--qarn-serif); font-size: 1.15rem; line-height: 1.2; margin: 0 0 6px; }
.qarn-mitmachen { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 20px; align-items: start; padding-top: 16px; }
.qarn-mitmachen .qarn-bewertung { grid-column: 1 / -1; }
/* Gesehen-Stempel */
.qarn-stempel { display: inline-flex; align-items: center; gap: 8px; font: 700 .9rem var(--qarn-sans); padding: 10px 16px; border-radius: 999px; border: 2px dashed #cfc7bd; background: #fff; color: var(--qarn-leise); cursor: pointer; transform: rotate(-2deg); }
.qarn-stempel:hover { border-color: var(--qarn-rot); color: var(--qarn-rot-dunkel); }
.qarn-stempel[aria-pressed="true"] { border: 2px solid var(--qarn-rot); background: var(--qarn-rot); color: #fff; transform: rotate(-6deg); box-shadow: 0 6px 16px rgba(255, 59, 84, .35); }
.qarn-stempel svg { width: 18px; height: 18px; }
/* Drama-Barometer */
.qarn-spannung { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 18px; align-items: center; background: linear-gradient(135deg, #fff 0%, #fff4f6 100%); border: 1px solid #ffd9df; border-radius: 18px; padding: 14px 16px; }
.qarn-spannung .qarn-widget-titel { grid-column: 1 / -1; }
.qarn-baro { grid-row: span 2; text-align: center; }
.qarn-baro svg { width: 150px; height: auto; overflow: visible; }
.qarn-baro-zeiger { transform-origin: 60px 60px; transition: transform .8s cubic-bezier(.3, 1.6, .5, 1); }
.qarn-baro-bogen { transition: stroke-dasharray .8s ease; }
.qarn-baro-leer .qarn-baro-zeiger { opacity: .25; }
.qarn-baro-wert { margin: -4px 0 0; font-family: "Qarn Hand", cursive; font-size: 1.5rem; line-height: 1; color: var(--qarn-rot-dunkel); }
.qarn-baro-leer .qarn-baro-wert { color: var(--qarn-leise); font-size: 1.2rem; }
.qarn-puls-reihe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.qarn-puls-knopf { border: 1px solid var(--qarn-linie); background: #fff; border-radius: 12px; padding: 8px 4px; cursor: pointer; font: 600 .78rem var(--qarn-sans); color: var(--qarn-text); line-height: 1.15; }
.qarn-puls { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.qarn-puls svg { width: 40px; height: 16px; }
.qarn-stufe-0 { color: #6b5cc4; } .qarn-stufe-1 { color: #9b59d0; } .qarn-stufe-2 { color: #e2457a; } .qarn-stufe-3 { color: var(--qarn-rot-dunkel); }
.qarn-puls-knopf span span { color: var(--qarn-text); }
.qarn-puls-knopf:hover:not([disabled]) { border-color: currentColor; background: #fff7f8; }
.qarn-puls-knopf[disabled] { cursor: default; opacity: .55; }
.qarn-puls-knopf.qarn-meine-wahl { opacity: 1; border: 2px solid currentColor; background: #fff; }
.qarn-spannung .qarn-summe { grid-column: 2; margin: 2px 0 0; }
/* Herzen */
.qarn-bewertung { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.qarn-herzen { display: flex; gap: 2px; }
.qarn-herz-knopf { border: 0; background: none; padding: 4px; cursor: pointer; color: #e3c9cf; }
.qarn-herz-knopf svg { width: 30px; height: 30px; fill: currentColor; stroke: none; }
.qarn-herz-knopf.qarn-vorschau, .qarn-herz-knopf.qarn-voll { color: var(--qarn-rot); }
.qarn-herz-knopf[disabled] { cursor: default; }
.qarn-herz-wort { font-family: "Qarn Hand", cursive; font-size: 1.5rem; color: var(--qarn-rot-dunkel); min-width: 6ch; }
.qarn-bewertung .qarn-summe { width: 100%; margin: 0; }
/* Umfrage */
.qarn-umfrage .qarn-option { padding: 12px 14px; border-radius: 14px; font-weight: 600; }
.qarn-umfrage .qarn-balken, .qarn-rangliste .qarn-balken { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: linear-gradient(90deg, var(--qarn-lila-hell), #e3d9ff); z-index: 0; transition: width .7s ease; }
.qarn-umfrage .qarn-fuehrt .qarn-balken { background: linear-gradient(90deg, #ffe0e5, #ffc6cf); }
.qarn-umfrage .qarn-meine-wahl { border: 2px solid var(--qarn-rot); }
.qarn-prozent { position: relative; z-index: 1; font-family: "Qarn Hand", cursive; font-size: 1.35rem; line-height: 1; color: var(--qarn-rot-dunkel); }
.qarn-option-text { position: relative; z-index: 1; }
/* Lieblingsfigur */
.qarn-rangliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.qarn-rang-knopf { position: relative; overflow: hidden; width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--qarn-linie); background: #fff; border-radius: 999px; padding: 4px 14px 4px 4px; cursor: pointer; font: 600 .92rem var(--qarn-sans); color: var(--qarn-text); }
.qarn-rang-knopf:hover:not([disabled]) { border-color: var(--qarn-rot); }
.qarn-rang-knopf[disabled] { cursor: default; }
.qarn-avatar { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 800 .8rem var(--qarn-sans); color: #fff; background: hsl(var(--h) 55% 52%); }
.qarn-rang-name { position: relative; z-index: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qarn-platz-eins .qarn-rang-knopf { border: 2px solid var(--qarn-gelb); box-shadow: 0 4px 14px rgba(255, 220, 60, .45); }
.qarn-platz-eins .qarn-avatar { box-shadow: 0 0 0 3px var(--qarn-gelb); }
.qarn-rang-knopf.qarn-meine-wahl { border-color: var(--qarn-rot); }
/* Quiz */
.qarn-quiz-herzen { display: flex; gap: 4px; margin-bottom: 10px; }
.qarn-quiz-herzen svg { width: 22px; height: 22px; fill: #eee5e6; stroke: none; }
.qarn-quiz-herzen .qarn-voll svg { fill: var(--qarn-rot); }
.qarn-quiz-herzen .qarn-leer svg { fill: #cfc7bd; }
.qarn-quiz-frage { font-family: var(--qarn-serif); font-weight: 400; font-size: 1.45rem; line-height: 1.2; }
.qarn-quiz-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.qarn-kachel { min-height: 64px; border: 1px solid var(--qarn-linie); background: #fff; border-radius: 14px; padding: 10px 12px; cursor: pointer; font: 700 .95rem var(--qarn-sans); color: var(--qarn-text); text-align: center; }
.qarn-kachel:hover:not([disabled]) { border-color: var(--qarn-lila); background: var(--qarn-lila-hell); }
.qarn-kachel[disabled] { cursor: default; }
.qarn-kachel.qarn-richtig { background: #1a9b5b; border-color: #1a9b5b; color: #fff; }
.qarn-kachel.qarn-falsch { background: var(--qarn-rot); border-color: var(--qarn-rot); color: #fff; }
.qarn-quiz-echo { font-family: "Qarn Hand", cursive; font-size: 1.5rem; line-height: 1.1; color: var(--qarn-text); }
.qarn-quiz-ergebnis { font-family: var(--qarn-serif); font-size: 3rem; line-height: 1; margin: 6px 0 0; color: var(--qarn-rot); }
.qarn-quiz-urteil { font-family: "Qarn Hand", cursive; font-size: 1.8rem; margin: 0 0 12px; }
/* Countdown & Cliffhanger */
.qarn-countdown { grid-column: 1; justify-self: start; margin-top: 6px; font: 700 .8rem var(--qarn-sans); color: #fff; background: var(--qarn-text); padding: 4px 10px; border-radius: 999px; }
.qarn-countdown.qarn-live { background: var(--qarn-rot); }
.qarn-countdown.qarn-live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #fff; margin-right: 6px; vertical-align: 1px; }
mark.qarn-cliff { background: linear-gradient(transparent 58%, #ffd2d9 58%); color: var(--qarn-text); font-weight: 650; padding: 0 2px; }
/* Bewegung nur als Antwort auf einen Klick */
@keyframes qarn-plopp { 0% { transform: scale(1) rotate(-6deg); } 40% { transform: scale(1.12) rotate(-9deg); } 100% { transform: scale(1) rotate(-6deg); } }
@keyframes qarn-schlag { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.04); } 60% { transform: scale(.99); } }
.qarn-stempel.qarn-ploppt { animation: qarn-plopp .35s ease; }
.qarn-ploppt.qarn-spannung, .qarn-ploppt.qarn-umfrage, .qarn-ploppt.qarn-ranking { animation: qarn-schlag .5s ease; }
@media (prefers-reduced-motion: reduce) { .qarn-baro-zeiger, .qarn-baro-bogen, .qarn-balken { transition: none !important; } .qarn-ploppt { animation: none !important; } }
@media (max-width: 560px) {
  .qarn-mitmachen { grid-template-columns: minmax(0, 1fr); }
  .qarn-spannung { grid-template-columns: minmax(0, 1fr); }
  .qarn-baro { grid-row: auto; }
  .qarn-spannung .qarn-summe { grid-column: 1; }
  .qarn-puls-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Mitmachen untereinander statt nebeneinander – sicher in allen Breiten */
.qarn-mitmachen { grid-template-columns: minmax(0, 1fr); }
.qarn-mitmachen > .qarn-stempel { justify-self: start; }
@media (max-width: 900px) { .qarn-spannung { grid-template-columns: minmax(0, 1fr); } .qarn-baro { grid-row: auto; } .qarn-spannung .qarn-summe { grid-column: 1; } }
/* Auf einen Blick + So entsteht diese Seite */
.qarn-blick { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.qarn-blick li { background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: var(--qarn-schatten); display: flex; flex-direction: column; }
.qarn-blick li span { font-size: .82rem; color: var(--qarn-leise); }
.qarn-blick li b { font-size: 1.02rem; }
.qarn-aktualisiert { font-size: .85rem; color: var(--qarn-leise); margin: 4px 0 0; }
.qarn-herkunft { font-size: .9rem; color: var(--qarn-leise); }
.qarn-herkunft h2 { font-size: 1.2rem; color: var(--qarn-text); }
/* Story-Verbindungen */
.qarn-verbindungen-box .qarn-lead { margin-top: 0; }
.qarn-legende { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0; margin: 0 0 6px; font-size: .85rem; color: var(--qarn-leise); }
.qarn-legende li { display: inline-flex; align-items: center; gap: 6px; }
.qarn-legende i, .qarn-bez-gruppe h3 i { width: 22px; height: 0; border-top: 3px solid var(--k); display: inline-block; }
.qarn-k-liebe { --k: #ff3b54; } .qarn-k-familie { --k: #7b4dff; } .qarn-k-freund { --k: #1a9b5b; } .qarn-k-konflikt { --k: #ff8a00; } .qarn-k-ex { --k: #9a948c; }
.qarn-legende .qarn-k-konflikt i, .qarn-legende .qarn-k-ex i, h3.qarn-k-konflikt i, h3.qarn-k-ex i { border-top-style: dashed; }
.qarn-graph { width: 100%; height: auto; max-height: 560px; display: block; margin: 0 auto; }
.qarn-kante { fill: none; stroke: var(--k); stroke-width: 3; opacity: .75; transition: opacity .2s, stroke-width .2s; }
.qarn-kante.qarn-k-konflikt { stroke-dasharray: 8 6; }
.qarn-kante.qarn-k-ex { stroke-dasharray: 3 6; }
.qarn-knoten { cursor: pointer; outline: none; }
.qarn-knoten circle { stroke: #fff; stroke-width: 4; transition: transform .2s; }
.qarn-ini { fill: #fff; font: 800 15px var(--qarn-sans); text-anchor: middle; pointer-events: none; }
.qarn-knoten-name { fill: var(--qarn-text); font: 700 14px var(--qarn-sans); text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 5px; }
.qarn-knoten:hover circle, .qarn-knoten:focus-visible circle { transform: scale(1.12); }
.qarn-knoten:focus-visible circle { stroke: var(--qarn-lila); }
.qarn-graph.qarn-fokus .qarn-kante:not(.qarn-an) { opacity: .08; }
.qarn-graph.qarn-fokus .qarn-knoten:not(.qarn-an) { opacity: .3; }
.qarn-graph.qarn-fokus .qarn-kante.qarn-an { opacity: 1; stroke-width: 5; }
.qarn-graph-info { background: var(--qarn-lila-hell); border-radius: 14px; padding: 12px 16px; margin: 8px 0 14px; }
.qarn-bez-gruppen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 10px; }
.qarn-bez-gruppe h3 { display: flex; align-items: center; gap: 8px; font-family: var(--qarn-serif); font-weight: 400; font-size: 1.25rem; }
.qarn-bez-gruppe ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.qarn-bez-gruppe li { border-left: 3px solid var(--k); padding: 6px 0 6px 12px; }
.qarn-bez-gruppe li p { margin: 0 0 6px; }
.qarn-bez-art { color: var(--qarn-leise); font-size: .9rem; }
.qarn-bez-gruppe li.qarn-an { background: #fff7f8; border-radius: 0 10px 10px 0; }
.qarn-umfrage-mini .qarn-umfrage-frage { font-size: .88rem; color: var(--qarn-leise); margin: 0 0 6px; font-weight: 600; }
.qarn-umfrage-mini .qarn-optionen { display: flex; flex-wrap: wrap; gap: 6px; }
.qarn-umfrage-mini .qarn-option { width: auto; padding: 6px 12px; border-radius: 999px; font-size: .84rem; }
.qarn-umfrage-mini .qarn-prozent { font-size: 1.05rem; margin-left: 6px; }
.qarn-umfrage-mini .qarn-summe { font-size: .78rem; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .qarn-kante, .qarn-knoten circle { transition: none; } }
.qarn-folge-inhalt > .qarn-bild { align-self: start; }
.qarn-puls-reihe { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.qarn-puls-knopf { padding: 10px 6px; font-size: .8rem; }
.qarn-quiz-herzen svg { width: 26px; height: 26px; fill: #f1d9dd; }
.qarn-graph { stroke: none; max-height: 720px; }
.qarn-graph text { stroke: none; }
.qarn-knoten-name { stroke: #fff !important; stroke-width: 5px; text-anchor: inherit; }
.qarn-ini { font-size: 14px; }

/* ===== Wer mit wem: Bühne im Abendprogramm-Licht ===== */
.qarn-wer-box { --wer-bg: #1c1328; --wer-text: #f6f1fa; --wer-leise: #b9adc9;
  position: relative; background: radial-gradient(90% 70% at 50% 42%, #3a1838 0%, var(--wer-bg) 62%); color: var(--wer-text);
  border-radius: 24px; padding: 26px 22px 20px; margin: 0 0 var(--qarn-abstand); overflow: hidden; }
.qarn-wer-box h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin: 0 0 4px; }
.qarn-wer-lead { color: var(--wer-leise); margin: 0 0 14px; max-width: 60ch; }
.qarn-wer-leiste { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 12px; margin: 0 -4px; scroll-snap-type: x proximity; }
.qarn-wer-leiste::-webkit-scrollbar { display: none; }
.qarn-wer-chip { flex: none; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 68px; background: none; border: 0; color: var(--wer-leise); font: 600 .78rem var(--qarn-sans); cursor: pointer; padding: 0; }
.qarn-wer-chip img, .qarn-wer-chip .qarn-wer-ini { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(255,255,255,.18); transition: box-shadow .2s, transform .2s; }
.qarn-wer-chip[aria-pressed="true"] { color: #fff; }
.qarn-wer-chip[aria-pressed="true"] img, .qarn-wer-chip[aria-pressed="true"] .qarn-wer-ini { box-shadow: 0 0 0 3px var(--qarn-rot), 0 0 22px rgba(255,59,84,.55); transform: scale(1.06); }
.qarn-wer-chip:focus-visible { outline: none; }
.qarn-wer-chip:focus-visible img, .qarn-wer-chip:focus-visible .qarn-wer-ini { box-shadow: 0 0 0 3px #fff; }
.qarn-wer-ini { display: grid; place-items: center; color: #fff; font: 800 1rem var(--qarn-sans); background: linear-gradient(140deg, hsl(var(--h) 60% 55%), hsl(calc(var(--h) + 50) 60% 38%)); }
.qarn-wer-feld { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: center; }
.qarn-wer-buehne { position: relative; aspect-ratio: 1.35 / 1; min-height: 360px; }
.qarn-wer-buehne::before { content: ""; position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255,59,84,.32), transparent 65%); pointer-events: none; }
.qarn-wer-faeden { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.qarn-faden { stroke: var(--k); stroke-width: 2.5; stroke-linecap: round; opacity: .9; }
.qarn-faden.qarn-k-konflikt { stroke-dasharray: 2 7; stroke-width: 4; }
.qarn-faden.qarn-k-ex { stroke-dasharray: 6 6; opacity: .6; }
.qarn-wer-box .qarn-k-liebe { --k: #ff4d6a; } .qarn-wer-box .qarn-k-familie { --k: #a78bff; } .qarn-wer-box .qarn-k-freund { --k: #3fd28c; } .qarn-wer-box .qarn-k-konflikt { --k: #ffa133; } .qarn-wer-box .qarn-k-ex { --k: #a39cb0; }
.qarn-wer-etikett { position: absolute; transform: translate(-50%, -50%) rotate(-3deg); font-family: "Qarn Hand", cursive; font-size: 1.15rem; line-height: 1.05; color: #fff; background: var(--wer-bg); border: 1.5px solid var(--k); border-radius: 10px; padding: 2px 9px 3px; max-width: 150px; text-align: center; white-space: normal; z-index: 2; pointer-events: none; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.qarn-wer-person { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer; color: #fff; font: 700 .85rem var(--qarn-sans); z-index: 3; }
.qarn-wer-person .qarn-wer-bild { box-shadow: 0 0 0 3px var(--k), 0 8px 24px rgba(0,0,0,.45); transition: transform .2s; }
.qarn-wer-person:hover .qarn-wer-bild, .qarn-wer-person:focus-visible .qarn-wer-bild { transform: scale(1.08); }
.qarn-wer-person:focus-visible { outline: none; }
.qarn-wer-person:focus-visible .qarn-wer-bild { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--k); }
.qarn-wer-name { text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.qarn-wer-bild { display: block; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: #2b2038; }
.qarn-wer-bild img, .qarn-wer-bild .qarn-wer-ini { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; border-radius: 50%; }
.qarn-wer-mitte { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 4; }
.qarn-wer-gross { width: 168px; height: 168px; box-shadow: 0 0 0 4px #fff, 0 0 0 9px var(--qarn-rot), 0 18px 50px rgba(255,59,84,.45); }
.qarn-wer-gross .qarn-wer-ini { font-size: 2.6rem; }
.qarn-wer-mitte-name { font-family: var(--qarn-serif); font-size: 1.6rem; line-height: 1; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.7); white-space: nowrap; }
@keyframes qarn-wer-rein { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes qarn-wer-faden { from { opacity: 0; } to { opacity: .9; } }
.qarn-wer-neu .qarn-wer-person, .qarn-wer-neu .qarn-wer-mitte { animation: qarn-wer-rein .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.qarn-wer-neu .qarn-wer-person:nth-of-type(2n) { animation-delay: .05s; } .qarn-wer-neu .qarn-wer-person:nth-of-type(3n) { animation-delay: .1s; }
.qarn-wer-neu .qarn-faden, .qarn-wer-neu .qarn-wer-etikett { animation: qarn-wer-faden .5s ease .15s both; }
.qarn-wer-karte { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 18px; }
.qarn-wer-karte-name { font-family: var(--qarn-serif); font-weight: 400; font-size: 1.7rem; margin: 0; color: #fff; }
.qarn-wer-karte-d { color: var(--wer-leise); margin: 2px 0 12px; }
.qarn-wer-karte-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.qarn-wer-karte-liste li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 0 10px; padding-left: 10px; border-left: 3px solid var(--k); }
.qarn-wer-art { grid-row: span 2; font-size: .8rem; font-weight: 700; color: var(--k); padding-top: 2px; }
.qarn-wer-link { background: none; border: 0; padding: 0; text-align: left; color: #fff; font: 700 .95rem var(--qarn-sans); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 3px; }
.qarn-wer-detail { color: var(--wer-leise); font-size: .85rem; }
.qarn-wer-lizenz { display: block; margin-top: 12px; color: var(--wer-leise); font-size: .72rem; }
.qarn-wer-legende { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0; margin: 14px 0 0; color: var(--wer-leise); font-size: .82rem; }
.qarn-wer-legende li { display: inline-flex; align-items: center; gap: 6px; }
.qarn-wer-legende i { width: 22px; border-top: 3px solid var(--k); }
.qarn-wer-legende .qarn-k-konflikt i { border-top-style: dotted; } .qarn-wer-legende .qarn-k-ex i { border-top-style: dashed; }
.qarn-bez-alle { margin-top: 18px; background: #fff; color: var(--qarn-text); border-radius: 18px; padding: 4px 18px; }
.qarn-bez-alle > summary { cursor: pointer; font-weight: 700; padding: 12px 0; }
.qarn-bez-alle .qarn-bez-gruppen { padding-bottom: 16px; }
.qarn-wer-quelle { color: var(--wer-leise); font-size: .78rem; margin: 14px 0 0; }
.qarn-wer-quelle a { color: #fff; }
.qarn-wer-mehr { display: inline-block; margin-top: 14px; color: #fff; font-weight: 700; }
@media (max-width: 900px) {
  .qarn-wer-feld { grid-template-columns: minmax(0, 1fr); }
  .qarn-wer-buehne { aspect-ratio: .92 / 1; min-height: 340px; }
  .qarn-wer-bild { width: 62px; height: 62px; }
  .qarn-wer-gross { width: 116px; height: 116px; }
  .qarn-wer-etikett { font-size: .98rem; max-width: 112px; }
  .qarn-wer-person { font-size: .76rem; }
  .qarn-wer-box { border-radius: 18px; padding: 20px 14px 16px; margin-left: calc(-1 * var(--qarn-rand) + 4px); margin-right: calc(-1 * var(--qarn-rand) + 4px); }
}
@media (prefers-reduced-motion: reduce) { .qarn-wer-neu .qarn-wer-person, .qarn-wer-neu .qarn-wer-mitte, .qarn-wer-neu .qarn-faden, .qarn-wer-neu .qarn-wer-etikett { animation: none; } }
@media (max-width: 600px) {
  .qarn-wer-buehne { aspect-ratio: .8 / 1; min-height: 400px; }
  .qarn-wer-gross { width: 92px; height: 92px; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--qarn-rot), 0 12px 30px rgba(255,59,84,.45); }
  .qarn-wer-mitte-name { font-size: 1.15rem; }
  .qarn-wer-bild { width: 54px; height: 54px; }
  .qarn-wer-etikett { font-size: .86rem; max-width: 92px; padding: 1px 6px 2px; }
}
@media (max-width: 600px) { .qarn-wer-etikett { display: none; } .qarn-wer-buehne { min-height: 360px; aspect-ratio: .9 / 1; } }

/* ===== Figuren, Darsteller, Staffel ===== */
.qarn-seitenkopf { margin: 6px 0 18px; }
.qarn-seitenkopf h1 { font-size: clamp(2.2rem, 5.4vw, 4rem); line-height: .98; }
.qarn-portraet { margin: 0; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex: none; background: #ece7e1; }
.qarn-portraet img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.qarn-portraet-ini { display: grid; place-items: center; background: linear-gradient(140deg, hsl(var(--h) 60% 55%), hsl(calc(var(--h) + 50) 60% 38%)); color: #fff; font: 800 1.3rem var(--qarn-sans); }
.qarn-mini-portraet { margin: 0; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; }
.qarn-mini-portraet img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.qarn-mini-portraet.qarn-portraet-ini { font-size: .85rem; }
/* Darsteller */
.qarn-top-box { background: var(--qarn-nacht); color: #fff; border-radius: 22px; padding: 22px; margin-bottom: 18px; }
.qarn-top-box h2 { color: #fff; }
.qarn-top-box .qarn-leise { color: #b9b4c8; }
.qarn-top { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }
.qarn-top li { display: grid; grid-template-columns: minmax(120px, 210px) minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.qarn-top a { color: #fff; }
.qarn-top-bar { height: 14px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; }
.qarn-top-bar i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--qarn-lila), var(--qarn-rot)); border-radius: 999px; }
.qarn-top b { font-family: "Qarn Hand", cursive; font-size: 1.35rem; font-weight: 600; white-space: nowrap; }
.qarn-cast-liste { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.qarn-cast { display: flex; gap: 14px; align-items: center; background: #fff; border-radius: 18px; padding: 14px; box-shadow: var(--qarn-schatten); }
.qarn-cast h3 { font-family: var(--qarn-serif); font-weight: 400; font-size: 1.25rem; margin: 0; }
.qarn-cast h3 a { color: var(--qarn-text); }
.qarn-cast p { margin: 0; font-size: .9rem; color: var(--qarn-leise); }
.qarn-cast-seit, .qarn-cast-menge { display: block; font-size: .8rem; color: var(--qarn-lila); font-weight: 600; }
/* Figur */
.qarn-figur-kopf { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: center; margin: 6px 0 18px; }
.qarn-figur-bild { margin: 0; width: 300px; aspect-ratio: 1; border-radius: 50% 50% 46% 54% / 52% 48% 52% 48%; overflow: hidden; box-shadow: 0 0 0 6px #fff, 0 0 0 12px var(--qarn-rot), 0 24px 60px rgba(255,59,84,.3); position: relative; }
.qarn-figur-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.qarn-figur-bild figcaption { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: .65rem; padding: 4px 30px 10px; background: linear-gradient(transparent, rgba(0,0,0,.6)); }
.qarn-figur-bild figcaption a { color: #fff; }
.qarn-figur-bild.qarn-portraet-ini span { font-size: 5rem; }
.qarn-figur-text h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: .95; margin-bottom: 12px; }
.qarn-figur-text h1 span { display: block; font-family: var(--qarn-sans); font-size: .3em; font-weight: 600; color: var(--qarn-leise); letter-spacing: 0; margin-top: 10px; }
.qarn-figur-naechste { display: inline-flex; flex-direction: column; background: var(--qarn-rot); color: #fff; text-decoration: none; border-radius: 16px; padding: 12px 18px; margin-top: 6px; }
.qarn-figur-naechste span { font-size: .82rem; opacity: .9; }
.qarn-figur-naechste b { font-size: 1.1rem; }
.qarn-wusstest { background: var(--qarn-gelb); border-radius: 22px; padding: 22px 24px; margin: 0 0 18px; transform: rotate(-.4deg); }
.qarn-wusstest h2 { margin-bottom: 12px; }
.qarn-wusstest ol { margin: 0; padding: 0; list-style: none; counter-reset: w; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.qarn-wusstest li { counter-increment: w; background: #fff; border-radius: 16px; padding: 14px 16px 14px 56px; position: relative; font-weight: 500; transform: rotate(.4deg); }
.qarn-wusstest li::before { content: counter(w); position: absolute; left: 14px; top: 10px; font-family: var(--qarn-serif); font-size: 2.2rem; line-height: 1; color: var(--qarn-rot); }
.qarn-geschichte p { font-size: 1.05rem; line-height: 1.7; max-width: 68ch; }
.qarn-zeitleiste { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 3px solid var(--qarn-lila-hell); display: grid; gap: 14px; }
.qarn-zeitleiste li { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; }
.qarn-zeitleiste li::before { content: ""; position: absolute; left: -26px; top: 6px; width: 13px; height: 13px; border-radius: 50%; background: var(--qarn-lila); box-shadow: 0 0 0 4px #fff; }
.qarn-zeitleiste b { font-family: var(--qarn-serif); font-weight: 400; font-size: 1.2rem; color: var(--qarn-lila); }
.qarn-kf { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.qarn-kf a { display: flex; flex-direction: column; text-decoration: none; color: var(--qarn-text); border-left: 3px solid var(--qarn-rot); padding: 2px 0 2px 10px; }
.qarn-kf-datum { font-size: .8rem; color: var(--qarn-rot-dunkel); font-weight: 700; }
.qarn-kf a span:last-child { font-size: .82rem; color: var(--qarn-leise); }
.qarn-partner { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.qarn-partner li { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; gap: 0 10px; align-items: center; }
.qarn-partner li > figure { grid-row: span 2; }
.qarn-partner b { font-family: "Qarn Hand", cursive; font-size: 1.2rem; color: var(--qarn-rot-dunkel); font-weight: 600; }
.qarn-wer-zur-figur { display: inline-block; margin-top: 14px; background: var(--qarn-rot); color: #fff; padding: 8px 14px; border-radius: 999px; font-weight: 700; text-decoration: none; }
/* Staffel */
.qarn-staffel-link { display: flex; flex-direction: column; background: var(--qarn-nacht); color: #fff; border-radius: 18px; padding: 16px 20px; text-decoration: none; margin-bottom: 14px; }
.qarn-staffel-link b { font-family: var(--qarn-serif); font-weight: 400; font-size: 1.5rem; }
.qarn-staffel-link span { color: #c9c2dc; }
.qarn-paare { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.qarn-paar { background: #fff; border-radius: 18px; padding: 16px; box-shadow: var(--qarn-schatten); display: flex; flex-direction: column; gap: 8px; border-top: 5px solid var(--qarn-rot); }
.qarn-paar h3 { font-family: var(--qarn-serif); font-weight: 400; font-size: 1.3rem; margin: 0; }
.qarn-paar p { margin: 0; font-size: .92rem; color: var(--qarn-leise); }
.qarn-paar-ist-raus { border-top-color: #cfc7bd; opacity: .78; }
.qarn-paar-raus, .qarn-paar-drin { align-self: flex-start; font-size: .8rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.qarn-paar-drin { background: #e6f7ee; color: #12794a; }
.qarn-paar-raus { background: #f1ede8; color: var(--qarn-leise); }
.qarn-paar-spoiler { font-size: .82rem; color: var(--qarn-leise); cursor: pointer; }
.qarn-auszuege .qarn-spoiler, .qarn-paar-spoiler .qarn-spoiler { filter: blur(6px); cursor: pointer; user-select: none; transition: filter .2s; }
.qarn-auszuege .qarn-spoiler.qarn-gezeigt, .qarn-paar-spoiler .qarn-spoiler.qarn-gezeigt { filter: none; }
.qarn-auszuege { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 3px solid var(--qarn-rosa); display: grid; gap: 16px; }
.qarn-auszuege li { position: relative; display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 2px 12px; }
.qarn-auszuege li::before { content: ""; position: absolute; left: -26px; top: 4px; width: 13px; height: 13px; border-radius: 50%; background: var(--qarn-rot); box-shadow: 0 0 0 4px #fff; }
.qarn-zeit-folge { font-family: var(--qarn-serif); font-size: 1.15rem; color: var(--qarn-rot-dunkel); }
.qarn-zeit-datum { font-size: .8rem; color: var(--qarn-leise); align-self: center; }
.qarn-auszuege div { grid-column: 1 / -1; display: flex; flex-direction: column; }
.qarn-auszuege div span span, .qarn-auszuege div > span:last-child { color: var(--qarn-leise); font-size: .92rem; }
.qarn-termin-liste { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.qarn-termin-liste li { display: flex; flex-direction: column; border-left: 3px solid var(--qarn-lila); padding-left: 10px; }
.qarn-termin-liste span { font-size: .85rem; color: var(--qarn-leise); }
.qarn-tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; }
.qarn-tabelle th { text-align: left; font-size: .8rem; color: var(--qarn-leise); font-weight: 700; border-bottom: 2px solid var(--qarn-linie); padding: 8px 6px; }
.qarn-tabelle td { padding: 9px 6px; border-bottom: 1px solid var(--qarn-linie); }
.qarn-tabelle tr:first-child td { font-weight: 700; }
@media (max-width: 760px) {
  .qarn-figur-kopf { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .qarn-figur-bild { width: 220px; }
  .qarn-top li { grid-template-columns: minmax(0, 1fr) auto; }
  .qarn-top-bar { grid-column: 1 / -1; grid-row: 2; }
}
/* Keine Großbuchstaben-Etiketten (Ausnahme: Punktzeile der Startseite laut Mockup) */
.qarn-dachzeile:not(.qarn-punktzeile) { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: .95rem; color: var(--qarn-leise); }
.qarn-klein { text-transform: none; letter-spacing: 0; font-size: .85rem; font-weight: 600; }
.qarn-ende { background: var(--qarn-nacht); color: #fff; border-radius: 20px; padding: 18px 22px; margin: 0 0 16px; border-left: 6px solid var(--qarn-rot); }
.qarn-ende h2 { color: #fff; font-size: 1.5rem; margin-bottom: 6px; }
.qarn-ende p { margin: 0 0 4px; } .qarn-ende a { color: #fff; } .qarn-ende .qarn-leise { color: #c9c2dc; }
/* Prüfer-Runde: Kopf auf dem Handy nie durchsichtig, Hero frei */
@media (max-width: 860px) {
  .qarn-start .qarn-kopf { background: rgba(250, 247, 244, .96); border-bottom-color: var(--qarn-linie); backdrop-filter: saturate(1.4) blur(10px); }
  .qarn-start .qarn-hero { margin-top: 0; }
  .qarn-start .qarn-hero-bild { margin-top: 0; }
  .qarn-hand2 { bottom: 4%; right: 4%; font-size: 1.2rem; padding: 10px 18px 12px; }
  .qarn-start .qarn-etiketten { top: 8%; }
  .qarn-figur-text { text-align: left; justify-self: stretch; }
}
.qarn-start .qarn-etiketten { top: 24%; }
.qarn-start .qarn-hero-text { max-width: 46%; }
@media (max-width: 860px) { .qarn-start .qarn-hero-text { max-width: none; } }
.qarn-figur-bild figcaption { position: static; background: none; padding: 6px 0 0; text-align: center; }
.qarn-figur-bild { overflow: visible; }
.qarn-figur-bild img { border-radius: 50% 50% 46% 54% / 52% 48% 52% 48%; }
.qarn-figur-bild figcaption a { color: var(--qarn-leise); font-size: .75rem; }
.qarn-bild figcaption, .qarn-wer-lizenz { font-size: .78rem; }
/* Prüfer-Runde: Feinschliff */
.qarn-vier { align-items: start; }
.qarn-vier .qarn-box { height: auto; }
.qarn-daumen-leer { width: 64px; aspect-ratio: 4 / 3; border-radius: 8px; background: repeating-linear-gradient(135deg, #f4efe9 0 6px, #efe9e2 6px 12px); }
.qarn-termin > .qarn-bild { align-self: start; }
.qarn-h2-frei { margin: 8px 0 12px; }
.qarn-frueher summary { cursor: pointer; font-weight: 700; }
.qarn-frueher ul { columns: 2; margin: 12px 0 0; padding-left: 18px; }
.qarn-frueher span { color: var(--qarn-leise); font-size: .9rem; }
@media (max-width: 600px) { .qarn-frueher ul { columns: 1; } }
.qarn-wer-teaser { display: flex; margin: 6px 0 16px; }
.qarn-wer-teaser a { margin-right: -14px; }
.qarn-wer-teaser img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; box-shadow: 0 0 0 3px var(--wer-bg); }
.qarn-wer-klein .qarn-knopf { background: var(--qarn-rot); }
.qarn-staffel-bild { margin-bottom: 14px; }
.qarn-staffel-bild .qarn-bild { border-radius: 22px; max-height: 420px; }
.qarn-staffel-bild .qarn-bild img { max-height: 380px; }
.qarn-prime-tipp { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 20px; align-items: center; background: var(--qarn-nacht); color: #fff; border-radius: 22px; padding: 18px; margin: 0 0 20px; }
.qarn-prime-tipp h2 { color: var(--qarn-gelb); font-size: 1.1rem; font-family: var(--qarn-sans); font-weight: 700; margin: 0 0 4px; }
.qarn-prime-tipp h3 { font-family: var(--qarn-serif); font-weight: 400; font-size: 2rem; margin: 0 0 6px; }
.qarn-prime-tipp h3 a { color: #fff; }
.qarn-prime-tipp .qarn-slot-info { color: #c9c2dc; }
.qarn-prime-tipp p { margin: 6px 0 0; }
.qarn-prime-tipp .qarn-bild figcaption { background: transparent; color: #b9b4c8; }
.qarn-prime-tipp .qarn-bild figcaption a { color: #fff; }
@media (max-width: 700px) { .qarn-prime-tipp { grid-template-columns: minmax(0, 1fr); } }
.qarn-tagesteil h2 { font-size: 1.3rem; margin: 18px 0 8px; }
.qarn-pausen ul { margin: 0 0 6px; padding-left: 18px; }
.qarn-pausen h3 { margin-bottom: 6px; }
.qarn-mitmachen > .qarn-stempel { margin: 3px 4px; }
.qarn-staffel-bild .qarn-bild img { max-height: 300px; object-position: 50% 30%; }
/* Kurzclip zur nächsten Folge */
.qarn-clip { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 26px; align-items: center; background: var(--qarn-nacht); color: #fff; border-radius: 24px; padding: 20px 26px 20px 20px; margin: 0 0 18px; }
.qarn-clip-handy { border-radius: 26px; overflow: hidden; border: 6px solid #2b2238; box-shadow: 0 20px 50px rgba(0,0,0,.35); aspect-ratio: 9 / 16; background: #140d1e; }
.qarn-clip-handy video { width: 100%; height: 100%; display: block; object-fit: cover; }
.qarn-clip h2 { color: #fff; margin-bottom: 8px; }
.qarn-clip p { margin: 0 0 8px; color: #e6def0; max-width: 46ch; }
.qarn-clip .qarn-leise { color: #a99cbc; }
@media (max-width: 640px) { .qarn-clip { grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 14px; } .qarn-clip h2 { font-size: 1.25rem; } .qarn-clip p { font-size: .9rem; } }

/* ===== Motiv statt Senderbild: Gesichter der Figuren, die mitspielen (freie Fotos) bzw. Titelkarte ===== */
.qarn-motiv, .qarn-buehne { --m1: #ff3b54; --m2: #7b4dff; --m3: #17151f; }
.qarn-motiv { position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 18% 110%, var(--m1) 0%, transparent 55%), radial-gradient(110% 100% at 100% 0%, var(--m2) 0%, transparent 60%), var(--m3); color: #fff; }
[data-m="awz"] { --m1: #7b4dff; --m2: #3fb6ff; --m3: #1b1638; }
[data-m="unter-uns"] { --m1: #ff8a3d; --m2: #ff3b54; --m3: #2a1420; }
[data-m="tv"], .qarn-motiv[data-m^="wer-"], .qarn-motiv[data-m^="sommer"] { --m1: #ff3b54; --m2: #fff36b; --m3: #17151f; }
.qarn-motiv::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background: radial-gradient(circle at 70% 30%, rgba(255,255,255,.22), transparent 40%), repeating-radial-gradient(circle at 30% 120%, rgba(255,255,255,.06) 0 2px, transparent 2px 14px); }
.qarn-motiv-koepfe { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 6% 6% 16%; }
.qarn-motiv-koepfe img { width: calc(100% / (var(--n, 3) + .45)); max-height: 100%; aspect-ratio: 1; height: auto; object-fit: cover; object-position: 50% 22%;
  border-radius: 50%; border: 3px solid #fff; box-shadow: 0 8px 22px rgba(0,0,0,.35); background: #2a2633; }
.qarn-motiv-koepfe img + img { margin-left: -5%; }
.qarn-motiv-koepfe img:nth-child(2) { transform: translateY(-6%) rotate(2deg); z-index: 1; }
.qarn-motiv-koepfe img:nth-child(1) { transform: rotate(-3deg); }
.qarn-motiv-koepfe img:nth-child(3) { transform: rotate(4deg); }
.qarn-motiv figcaption { position: absolute; left: 10px; right: 10px; bottom: 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font: 600 clamp(1rem, 2.2vw, 1.35rem)/1.1 "Qarn Hand", cursive; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.qarn-motiv figcaption span { font: 800 .62rem/1 var(--qarn-sans); letter-spacing: .08em; text-transform: uppercase; background: var(--qarn-gelb); color: var(--qarn-text);
  padding: 4px 6px; border-radius: 4px; text-shadow: none; transform: rotate(-3deg); }
.qarn-motiv-typo { display: grid; place-content: center; text-align: center; padding: 8px; }
.qarn-motiv-typo b { font: 400 clamp(1.4rem, 4.5vw, 2.6rem)/1 var(--qarn-serif); letter-spacing: -.01em; }
.qarn-motiv-typo span { font: 600 1.05rem/1.1 "Qarn Hand", cursive; color: var(--qarn-gelb); margin-top: 4px; }
/* Größen je Einsatzort */
.qarn-bild-gross.qarn-motiv figcaption { font-size: 1.5rem; }
.qarn-radar-bild .qarn-motiv { aspect-ratio: 16 / 9; border-radius: 10px; }
.qarn-radar-bild .qarn-motiv-koepfe { padding: 8% 6% 20%; }
.qarn-radar-bild .qarn-motiv-koepfe img { border-width: 2px; box-shadow: 0 3px 8px rgba(0,0,0,.35); }
.qarn-radar-bild .qarn-motiv-typo b { font-size: 1.1rem; }
.qarn-radar-bild .qarn-motiv-typo span { font-size: .85rem; }
.qarn-daumen.qarn-motiv { width: 64px; aspect-ratio: 4 / 3; border-radius: 8px; }
.qarn-daumen .qarn-motiv-koepfe { padding: 3px; }
.qarn-daumen .qarn-motiv-koepfe img { width: auto; height: 100%; border-width: 2px; box-shadow: none; transform: none; }
.qarn-daumen.qarn-motiv-typo b { font-size: .78rem; line-height: 1.05; overflow-wrap: anywhere; }
.qarn-daumen.qarn-motiv-typo span { display: none; }
.qarn-poster.qarn-motiv { width: 64px; aspect-ratio: 3 / 4; border-radius: 8px; }
.qarn-poster .qarn-motiv-koepfe { padding: 6px; }
.qarn-poster .qarn-motiv-koepfe img { width: 100%; border-width: 2px; transform: none; }
.qarn-poster.qarn-motiv-typo b { font-size: .9rem; }
.qarn-umfrage-kopf .qarn-motiv { aspect-ratio: 1; border-radius: 10px; }
.qarn-umfrage-kopf .qarn-motiv-koepfe { padding: 10%; }
.qarn-umfrage-kopf .qarn-motiv-koepfe img { border-width: 2px; }
.qarn-umfrage-kopf .qarn-motiv-typo b { font-size: 1.1rem; }
.qarn-serienkarte .qarn-karte-bg.qarn-motiv { aspect-ratio: auto; position: absolute; inset: 0; border-radius: 0; }
.qarn-serienkarte .qarn-karte-bg .qarn-motiv-koepfe { justify-content: flex-end; padding: 8px 10px; }
.qarn-serienkarte .qarn-karte-bg .qarn-motiv-koepfe img { width: auto; height: 78%; opacity: .95; border-width: 2px; }
.qarn-serienkarte .qarn-karte-bg.qarn-motiv-typo b, .qarn-serienkarte .qarn-karte-bg.qarn-motiv-typo span { display: none; }
.qarn-serienkarte .qarn-karte-bg.qarn-motiv::after { background: linear-gradient(90deg, rgba(23,21,31,.85) 0%, rgba(23,21,31,.45) 45%, rgba(23,21,31,0) 70%); }
.qarn-serienkarte:first-child .qarn-karte-bg.qarn-motiv::after { background: linear-gradient(90deg, rgba(64,36,160,.92) 0%, rgba(123,77,255,.45) 45%, rgba(123,77,255,0) 70%); }
.qarn-motiv-buehne { aspect-ratio: 4 / 3; border-radius: var(--qarn-radius); box-shadow: var(--qarn-schatten); }
.qarn-motiv-buehne figcaption { font-size: 1.6rem; left: 18px; bottom: 14px; }
.qarn-motiv-buehne .qarn-motiv-koepfe { padding: 8% 6% 18%; }
.qarn-motiv-buehne .qarn-motiv-koepfe img { border-width: 4px; }
.qarn-motiv-buehne .qarn-motiv-koepfe img:nth-child(4) { transform: translateY(5%) rotate(-2deg); }
.qarn-prime-bild.qarn-motiv { border-radius: 14px; }
.qarn-bereich-karte .qarn-motiv { border-radius: 10px; }
.qarn-folge-inhalt > .qarn-motiv { align-self: start; }
/* Bildnachweis der freien Fotos in der Fußzeile */
.qarn-fotonachweis { font-size: .78rem; color: #a9a3b8; margin: 8px 0; }
.qarn-fotonachweis summary { cursor: pointer; }
.qarn-fotonachweis a { color: inherit; }

/* ===== Rückblick: gelaufene Folgen mit Inhaltsangabe ===== */
.qarn-rueckblick { display: grid; gap: 14px; margin: 18px 0 24px; }
.qarn-rueck { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; background: #fff; border-radius: var(--qarn-radius); box-shadow: var(--qarn-schatten); padding: 14px; }
@media (min-width: 760px) { .qarn-rueck { grid-template-columns: 240px minmax(0, 1fr); padding: 18px; } .qarn-rueck-gestern { grid-template-columns: 380px minmax(0, 1fr); } }
.qarn-rueck h2 { font-size: 1.45rem; margin: 2px 0 8px; }
.qarn-rueck-gestern { box-shadow: 0 0 0 2px var(--qarn-rot), var(--qarn-schatten); }
.qarn-rueck-gestern h2 { font-size: 1.9rem; }
.qarn-rueck p { margin: 0 0 10px; }
.qarn-rueck-bild { align-self: start; }
.qarn-rueck-mit { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; }
.qarn-motiv-buehne .qarn-motiv-koepfe img { width: calc(100% / (var(--n, 4) + .25)); }
.qarn-motiv-buehne .qarn-motiv-koepfe img + img { margin-left: -8%; }
.qarn-serienkarte .qarn-karte-bg .qarn-motiv-koepfe { padding: 10px 46px 10px 10px; }
.qarn-serienkarte .qarn-karte-bg .qarn-motiv-koepfe img { height: 72%; }
.qarn-serienkarte .qarn-karte-bg .qarn-motiv-koepfe img + img { margin-left: -14px; }
.qarn-daumen.qarn-motiv-typo b { font-size: 1.3rem; }

/* ===== Show-Plakat: großes Titelbild statt Senderbild ===== */
.qarn-show-poster { display: grid; place-content: center; gap: 6px; text-align: center; padding: 28px; }
.qarn-show-poster b { font-size: clamp(2.2rem, 5.4vw, 4.2rem); line-height: .95; text-wrap: balance; }
.qarn-show-poster > span { font-size: 1.5rem; }
.qarn-show-poster .qarn-show-poster-dach { font: 600 1rem/1 var(--qarn-sans); color: rgba(255,255,255,.75); }
.qarn-motiv span.qarn-poster-countdown { justify-self: center; margin-top: 8px; font: 700 .9rem/1 var(--qarn-sans); background: var(--qarn-gelb); color: var(--qarn-text); padding: 8px 12px; border-radius: 999px; }
[data-m="barbara-salesch"], [data-m="ulrich-wetzel"], [data-m="verklag-mich-doch"], [data-m="blaulicht-report"], [data-m="csi-miami"] { --m1: #3f6dff; --m2: #9fb4ff; --m3: #0f1530; }
[data-m="bauer-sucht-frau"], [data-m="pumuckl"] { --m1: #ffb02e; --m2: #ff3b54; --m3: #2b1a12; }
[data-m="stern-tv"], [data-m="punkt-12"], [data-m="spiegel-tv"], [data-m="exclusiv"], [data-m="explosiv"], [data-m="extra"] { --m1: #fff36b; --m2: #ff3b54; --m3: #1a1720; }
[data-m="nfl"], [data-m="formel-1"], [data-m="dfb-pokal"], [data-m="europa-league"], [data-m="conference-league"] { --m1: #20d07a; --m2: #3fb6ff; --m3: #0d1d18; }
.qarn-leute { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.qarn-leute li { display: flex; flex-direction: column; background: var(--qarn-bg); border-radius: 10px; padding: 10px 12px; }
.qarn-leute span { color: var(--qarn-leise); font-size: .88rem; }

/* ===== Bühne: randloser, dunkler Kopf der Serien- und Show-Seiten (wie ein Soap-Vorspann) ===== */
.qarn-buehne { position: relative; isolation: isolate; color: #fff; margin: 0 calc(50% - 50vw) 18px; min-height: 420px;
  padding: 40px max(var(--qarn-rand, 16px), calc(50vw - var(--qarn-breite) / 2 + var(--qarn-rand, 16px)));
  background: radial-gradient(70% 120% at 85% 110%, color-mix(in srgb, var(--m1) 70%, transparent) 0%, transparent 60%),
              radial-gradient(60% 90% at 100% -10%, color-mix(in srgb, var(--m2) 75%, transparent) 0%, transparent 60%),
              radial-gradient(40% 70% at 0% 0%, rgba(255,255,255,.07), transparent 70%), var(--m3); }
.qarn-buehne::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35;
  background: repeating-radial-gradient(circle at 78% 115%, rgba(255,255,255,.05) 0 2px, transparent 2px 18px); }
.qarn-buehne h1 { color: #fff; font-size: clamp(2.8rem, 7vw, 5.6rem); line-height: .92; letter-spacing: -.015em; margin-bottom: 14px; text-wrap: balance; }
.qarn-buehne .qarn-dachzeile, .qarn-buehne .qarn-dachzeile:not(.qarn-punktzeile) { color: rgba(255,255,255,.72); }
.qarn-buehne .qarn-lead { color: rgba(255,255,255,.78); max-width: 46ch; }
.qarn-buehne-naechste { margin: 0 0 12px; font: 600 clamp(1.35rem, 2.6vw, 1.9rem)/1.15 "Qarn Hand", cursive; color: var(--qarn-gelb); transform: rotate(-1.5deg); transform-origin: left; }
.qarn-buehne-naechste > span:first-child { color: #fff; }
.qarn-buehne-countdown { display: inline-block; vertical-align: middle; margin-left: 8px; font: 700 .8rem/1 var(--qarn-sans); background: var(--qarn-rot); color: #fff; padding: 6px 10px; border-radius: 999px; transform: rotate(1.5deg); }
.qarn-buehne .qarn-knopf-hell { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.qarn-buehne .qarn-knopf-hell:hover { background: rgba(255,255,255,.18); }
.qarn-buehne .qarn-schalter { color: #fff; }
.qarn-buehne .qarn-schalter span { background: rgba(255,255,255,.28); }
.qarn-buehne a:focus-visible, .qarn-buehne button:focus-visible { outline: 3px solid var(--qarn-gelb); outline-offset: 3px; }
/* Gesichter schweben frei auf der Bühne statt in einem eigenen Kasten */
.qarn-buehne .qarn-serie-bild .qarn-motiv { background: none; box-shadow: none; border-radius: 0; aspect-ratio: 5 / 4; overflow: visible; }
.qarn-buehne .qarn-serie-bild .qarn-motiv::before { display: none; }
.qarn-buehne .qarn-motiv-koepfe img { box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.qarn-buehne .qarn-motiv-buehne figcaption { left: 50%; right: auto; transform: translateX(-50%) rotate(-2deg); white-space: nowrap; font-size: 1.7rem; }
.qarn-buehne .qarn-show-poster b { font-size: clamp(2.6rem, 6vw, 5rem); text-shadow: 0 6px 30px rgba(0,0,0,.4); }
@media (max-width: 760px) {
  .qarn-buehne { min-height: 0; padding-top: 18px; padding-bottom: 26px; }
  .qarn-buehne .qarn-serie-bild .qarn-motiv { aspect-ratio: 16 / 10; }
  .qarn-buehne .qarn-motiv-buehne figcaption { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) { .qarn-buehne-naechste, .qarn-buehne-countdown { transform: none; } }
.qarn-buehne .qarn-serie-bild .qarn-motiv-gesichter { aspect-ratio: 4 / 3; }
.qarn-buehne .qarn-serie-bild .qarn-motiv-koepfe { padding: 0 0 16%; }
.qarn-buehne .qarn-serie-bild .qarn-motiv-koepfe img { width: calc(100% / (var(--n, 4) - .35)); border-width: 4px; }
.qarn-buehne .qarn-serie-bild .qarn-motiv-koepfe img + img { margin-left: -11%; }
.qarn-buehne .qarn-motiv-buehne figcaption { bottom: 4%; }
.qarn-buehne .qarn-serie-bild .qarn-motiv-gesichter { aspect-ratio: 16 / 10; }

/* ===== Figuren-Leiste auf der Serienseite ===== */
.qarn-figurenkarten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.qarn-figurenkarten a { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 14px 10px; border-radius: 14px; background: var(--qarn-bg); color: var(--qarn-text); text-decoration: none; height: 100%; }
.qarn-figurenkarten a:hover { box-shadow: 0 0 0 2px var(--qarn-rot); }
.qarn-figurenkarten a:focus-visible { outline: 3px solid var(--qarn-lila); outline-offset: 2px; }
.qarn-figurenkarte-bild { width: 92px; height: 92px; margin-bottom: 8px; box-shadow: 0 6px 16px rgba(20,20,22,.18); border: 3px solid #fff; }
.qarn-figurenkarten b { font-family: var(--qarn-serif); font-weight: 400; font-size: 1.15rem; line-height: 1.15; }
.qarn-figurenkarten span { font-size: .85rem; color: var(--qarn-leise); }
.qarn-figurenkarten small { margin-top: 4px; font: 600 .95rem/1.1 "Qarn Hand", cursive; color: var(--qarn-rot); }

/* ===== Link-Leiste in der Fußzeile ===== */
.qarn-fuss-links { max-width: var(--qarn-breite); margin: 0 auto; padding: 28px var(--qarn-rand, 16px) 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px 24px; }
.qarn-fuss-links div { display: flex; flex-direction: column; gap: 4px; }
.qarn-fuss-links b { font-family: var(--qarn-serif); font-weight: 400; font-size: 1.15rem; margin-bottom: 4px; }
.qarn-fuss-links a { color: inherit; opacity: .8; text-decoration: none; font-size: .92rem; padding: 2px 0; }
.qarn-fuss-links a:hover { opacity: 1; text-decoration: underline; }
/* Ohne freies Foto: Monogramm in Serienfarben statt grauer Initialen */
.qarn-portraet-ini span, .qarn-figurenkarten .qarn-portraet-ini span { color: #fff; font-family: var(--qarn-serif); font-weight: 400; letter-spacing: .02em; text-shadow: 0 2px 10px rgba(0,0,0,.25); }
.qarn-figurenkarten .qarn-portraet-ini span { font-size: 2rem; }
/* Startseite: „Heute bei RTL“ bekommt mehr Breite, Titel ohne Silbentrennung, Info höchstens zwei Zeilen */
@media (min-width: 1180px) { .qarn-vier { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); } }
.qarn-slots-kompakt .qarn-slot h3 { hyphens: manual; overflow-wrap: anywhere; line-height: 1.2; margin-bottom: 2px; }
.qarn-slots-kompakt .qarn-slot-info { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; hyphens: manual; font-size: .85rem; line-height: 1.35; margin: 0; }
.qarn-serienkarte-text { max-width: 64%; padding-right: 8px; }
.qarn-serienkarte .qarn-karte-bg .qarn-motiv-koepfe img { height: 70%; }
.qarn-vier h2 { hyphens: manual; }
.qarn-figur-link { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--qarn-rot) 55%, transparent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.qarn-figur-link:hover { text-decoration-color: var(--qarn-rot); }
/* Show-Plakat mit Gesicht der Moderation */
.qarn-poster-gesichter { display: flex; justify-content: center; margin-bottom: 6px; }
.qarn-poster-gesichter img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 4px solid #fff; box-shadow: 0 14px 30px rgba(0,0,0,.4); }
.qarn-poster-gesichter img + img { margin-left: -18px; }
.qarn-motiv figcaption.qarn-poster-mit { position: static; justify-content: center; font-size: 1.3rem; color: #fff; margin-bottom: 4px; }
.qarn-leute li { flex-direction: row; align-items: center; gap: 10px; }
.qarn-leute li > div { display: flex; flex-direction: column; }
.qarn-leute-bild { width: 48px; height: 48px; }
.qarn-buehne .qarn-motiv-buehne figcaption.qarn-poster-mit { left: auto; transform: rotate(-2deg); font-size: 1.4rem; white-space: normal; }

/* ===== Staffel mit Einzel-Teilnehmern (Bauer sucht Frau) ===== */
.qarn-tn-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.qarn-tn { position: relative; background: #fff; border-radius: var(--qarn-radius); box-shadow: var(--qarn-schatten); padding: 16px 16px 14px 72px; }
.qarn-tn-ini { position: absolute; left: 14px; top: 16px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(140deg, #ffb02e, #ff3b54); color: #fff; font: 400 1.4rem/1 var(--qarn-serif); }
.qarn-tn h3 { font-family: var(--qarn-serif); font-weight: 400; font-size: 1.45rem; margin: 0; }
.qarn-tn p { margin: 4px 0 0; font-size: .92rem; }
.qarn-tn .qarn-tn-ort { font: 600 1.05rem/1.2 "Qarn Hand", cursive; color: var(--qarn-rot); margin-bottom: 6px; }
.qarn-kalender-abo { display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--qarn-lila-hell); color: var(--qarn-text); text-decoration: none; }
.qarn-kalender-abo svg { width: 22px; height: 22px; flex: none; color: var(--qarn-lila); }
.qarn-kalender-abo span { display: flex; flex-direction: column; line-height: 1.25; }
.qarn-kalender-abo small { color: var(--qarn-leise); font-size: .8rem; }
.qarn-kalender-abo:hover { box-shadow: 0 0 0 2px var(--qarn-lila); }
/* Seitenspalte nicht mehr „kleben“ lassen: sie ist höher als der Bildschirm und wurde sonst abgeschnitten */
.qarn-seite { position: static; top: auto; }
summary h3.qarn-folge-titel { margin: 0; font-weight: 400; line-height: 1.2; }
.qarn-blick-rueck { box-shadow: 0 0 0 2px var(--qarn-rot), var(--qarn-schatten) !important; }
.qarn-blick-rueck a { color: var(--qarn-text); text-decoration: none; }
.qarn-blick-rueck a:hover b { text-decoration: underline; }
.qarn-seite > :last-child { position: sticky; top: 120px; }
.qarn-wissen h3 { font-size: 1.05rem; margin: 1.1em 0 .3em; }
.qarn-wissen h3:first-of-type { margin-top: .4em; }
.qarn-wissen p { max-width: 70ch; }
/* Darsteller in den kommenden Folgen: Gesicht oder Initialen */
.qarn-rollen { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.qarn-rollen li { flex-direction: row; align-items: center; gap: 12px; padding: 10px; }
.qarn-rollen li > div { display: flex; flex-direction: column; min-width: 0; }
.qarn-rollen b { line-height: 1.25; }
.qarn-rolle-bild { width: 52px; height: 52px; }
.qarn-rolle-bild.qarn-portraet-ini span { font-size: 1.15rem; }
.qarn-mehr-rollen { margin: 12px 0 4px; }
.qarn-mehr-rollen > summary { cursor: pointer; font-weight: 700; color: var(--qarn-lila); padding: 6px 0; }
.qarn-mehr-rollen > .qarn-rollen { margin-top: 10px; }
@media (max-width: 640px) { .qarn-rollen { grid-template-columns: 1fr 1fr; gap: 8px; } .qarn-rollen li { flex-direction: column; align-items: flex-start; gap: 8px; } .qarn-rolle-bild { width: 48px; height: 48px; } }
/* Quiz: Fortschritt als Leiste statt Herzen (Herzen wirkten wie eine Bewertung zum Anklicken) */
.qarn-quiz-stand-oben { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-bottom: 12px; font-size: .85rem; font-weight: 700; color: var(--qarn-leise); }
.qarn-quiz-balken { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.qarn-quiz-balken i { height: 6px; border-radius: 3px; background: #ebe4dc; }
.qarn-quiz-balken i.qarn-q-jetzt { background: var(--qarn-lila); opacity: .45; }
.qarn-quiz-balken i.qarn-q-ok { background: #1f9d63; }
.qarn-quiz-balken i.qarn-q-falsch { background: var(--qarn-rot); }
.qarn-quiz-punkte { color: var(--qarn-text); }
/* Clip-Startknopf: Kreis mit Verlaufsring, kein roter Player-Kasten */
.qarn-clip-handy { position: relative; }
.qarn-clip-start { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 0 18%; border: 0; background: linear-gradient(180deg, transparent 45%, rgba(10,6,18,.55)); cursor: pointer; color: #fff; }
.qarn-clip-ring { width: 74px; height: 74px; border-radius: 50%; padding: 4px; background: conic-gradient(from 200deg, var(--qarn-rot), var(--qarn-lila), var(--qarn-gelb), var(--qarn-rot)); box-shadow: 0 10px 30px rgba(0,0,0,.45); transition: transform .2s ease; display: block; }
.qarn-clip-ring svg { width: 100%; height: 100%; border-radius: 50%; background: rgba(255,255,255,.96); fill: var(--qarn-nacht); padding: 18px 16px 18px 20px; display: block; }
.qarn-clip-label { font: 600 1.25rem "Qarn Hand", cursive; letter-spacing: .01em; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.qarn-clip-start:hover .qarn-clip-ring, .qarn-clip-start:focus-visible .qarn-clip-ring { transform: scale(1.07); }
.qarn-clip-start:focus-visible { outline: 3px solid var(--qarn-gelb); outline-offset: -6px; }
.qarn-clip-laeuft .qarn-clip-start { display: none; }
@media (max-width: 640px) { .qarn-clip-ring { width: 56px; height: 56px; } .qarn-clip-ring svg { padding: 13px 11px 13px 15px; } .qarn-clip-label { font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) { .qarn-clip-ring { transition: none; } }

/* ===== Hauptmenü: großes Aufklappmenü (Serien-Karten mit Gesichtern, Termin-Kacheln) ===== */
.qarn-menue.qarn-mega { position: static; }
.qarn-mega-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; display: none; padding: 0 var(--qarn-abstand) 0; }
.qarn-mega.qarn-offen > .qarn-mega-panel { display: block; animation: qarn-mega-auf .18s ease-out; }
@keyframes qarn-mega-auf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.qarn-mega-in { max-width: var(--qarn-breite); margin: 8px auto 0; padding: 22px; border-radius: 22px; color: #fff;
  background: radial-gradient(60% 120% at 0% 0%, rgba(255,59,84,.28), transparent 60%), radial-gradient(50% 120% at 100% 100%, rgba(123,77,255,.32), transparent 60%), var(--qarn-nacht);
  box-shadow: 0 30px 80px rgba(23,21,31,.35), 0 0 0 1px rgba(255,255,255,.06) inset; }
.qarn-mega-serien { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.qarn-mega-serie { border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.05); box-shadow: 0 0 0 1px rgba(255,255,255,.07) inset; display: flex; flex-direction: column; }
.qarn-mega-kopf { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 14px; padding: 16px; text-decoration: none; color: #fff; isolation: isolate;
  background: radial-gradient(90% 140% at 0% 100%, color-mix(in srgb, var(--m1, #ff3b54) 55%, transparent), transparent 70%), radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--m2, #7b4dff) 45%, transparent), transparent 70%); }
.qarn-mega-koepfe { grid-row: 1 / 4; display: flex; align-items: center; padding-right: 4px; }
.qarn-mega-koepfe img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 2px solid rgba(255,255,255,.85); margin-left: -16px; background: #2b2238; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.qarn-mega-koepfe img:first-child { margin-left: 0; }
.qarn-mega-name { font: 400 1.6rem/1.05 var(--qarn-serif); }
.qarn-mega-voll { font-size: .78rem; color: rgba(255,255,255,.72); margin-top: 2px; }
.qarn-mega-naechste { margin-top: 8px; font-size: .8rem; font-weight: 700; color: var(--qarn-gelb); display: flex; align-items: center; gap: 6px; }
.qarn-mega-naechste i { width: 7px; height: 7px; border-radius: 50%; background: var(--qarn-gelb); box-shadow: 0 0 0 3px rgba(255,243,107,.22); }
.qarn-mega-kopf:hover .qarn-mega-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.qarn-mega-wege { list-style: none; margin: 0; padding: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.qarn-mega-wege a { display: flex; flex-direction: column; padding: 9px 10px; border-radius: 10px; color: #fff; text-decoration: none; }
.qarn-mega-wege b { font-size: .92rem; }
.qarn-mega-wege small { font-size: .74rem; color: rgba(255,255,255,.6); }
.qarn-mega-wege a:hover, .qarn-mega-wege a:focus-visible, .qarn-mega-wege a[aria-current] { background: rgba(255,255,255,.1); }
.qarn-mega-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); }
.qarn-mega-weitere { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-right: auto; }
.qarn-mega-titel { margin: 0 0 10px; font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.6); }
.qarn-mega-weitere .qarn-mega-titel { margin: 0; }
.qarn-mega-abo { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; padding: 8px 14px 8px 10px; border-radius: 12px; background: rgba(255,255,255,.07); }
.qarn-mega-abo svg { width: 22px; height: 22px; fill: none; stroke: var(--qarn-gelb); stroke-width: 1.8; flex: none; }
.qarn-mega-abo b { display: block; font-size: .88rem; }
.qarn-mega-abo small { display: block; font-size: .74rem; color: rgba(255,255,255,.62); }
.qarn-mega-abo:hover { background: rgba(255,255,255,.13); }
.qarn-mega-alle { color: #fff; font-weight: 700; font-size: .9rem; text-underline-offset: 4px; }
.qarn-mega-kacheln { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.qarn-mega-kacheln-gross { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.qarn-mega-kachel { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; color: #fff; text-decoration: none; height: 100%;
  background: radial-gradient(120% 140% at 0% 100%, color-mix(in srgb, var(--m1, #ff3b54) 40%, transparent), transparent 70%), rgba(255,255,255,.05); box-shadow: 0 0 0 1px rgba(255,255,255,.07) inset; }
.qarn-mega-kachel b { font-size: .95rem; line-height: 1.25; }
.qarn-mega-kachel small { font-size: .78rem; color: var(--qarn-gelb); font-weight: 600; }
.qarn-mega-kachel:hover, .qarn-mega-kachel[aria-current] { box-shadow: 0 0 0 1px rgba(255,255,255,.35) inset; }
.qarn-mega-weitere .qarn-mega-kachel { padding: 8px 12px; }
.qarn-mega a:focus-visible { outline: 2px solid var(--qarn-gelb); outline-offset: 2px; }
.qarn-start .qarn-nav { flex: none; background: rgba(250,247,244,.9); border-radius: 999px; padding: 4px; backdrop-filter: blur(8px); }
@media (prefers-reduced-motion: reduce) { .qarn-mega.qarn-offen > .qarn-mega-panel { animation: none; } }

/* Handy/Tablet: Menü als Vollbild-Schublade */
@media (max-width: 1100px) {
  .qarn-start .qarn-nav { background: var(--qarn-nacht); border-radius: 0; padding: 8px var(--qarn-abstand) 24px; backdrop-filter: none; }
  .qarn-nav { background: var(--qarn-nacht); border-bottom: 0; height: calc(100dvh - 64px); max-height: none; gap: 2px; padding: 8px var(--qarn-abstand) 24px; }
  .qarn-nav .qarn-navlink, .qarn-nav .qarn-menue > button { color: #fff; font-size: 1.05rem; padding: 14px 6px; border-radius: 0; background: none; box-shadow: none; border-bottom: 1px solid rgba(255,255,255,.08); }
  .qarn-nav .qarn-menue > button .qarn-pfeil-unten { display: inline-block; transition: transform .2s; }
  .qarn-nav .qarn-menue.qarn-offen > button .qarn-pfeil-unten { transform: translateY(2px) rotate(-135deg); }
  .qarn-mega-panel { position: static; padding: 0; }
  .qarn-mega.qarn-offen > .qarn-mega-panel { animation: none; }
  .qarn-mega-in { margin: 6px 0 10px; padding: 0; background: none; box-shadow: none; border-radius: 0; }
  .qarn-mega-serien { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .qarn-mega-wege { grid-template-columns: 1fr 1fr; }
  .qarn-mega-kacheln-gross { grid-template-columns: 1fr 1fr; }
  .qarn-mega-fuss { margin-top: 10px; padding-top: 12px; }
}
@media (min-width: 700px) and (max-width: 1100px) { .qarn-mega-serien { grid-template-columns: repeat(3, minmax(0, 1fr)); } .qarn-mega-wege { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { html.qarn-nav-auf { overflow: hidden; } }
.qarn-burger svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.qarn-burger .qarn-burger-zu, .qarn-burger[aria-expanded="true"] svg:first-child { display: none; }
.qarn-burger[aria-expanded="true"] .qarn-burger-zu { display: block; }
/* Vorteile der Vorschau als ruhiger Streifen unter den Eckdaten */
.qarn-darum { list-style: none; margin: -4px 0 18px; padding: 12px 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 18px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--qarn-linie); }
.qarn-darum li, .qarn-darum a { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; align-items: center; color: inherit; text-decoration: none; }
.qarn-darum svg { grid-row: 1 / 3; width: 22px; height: 22px; fill: none; stroke: var(--qarn-lila); stroke-width: 1.8; }
.qarn-darum b { font-size: .9rem; line-height: 1.2; }
.qarn-darum span { font-size: .78rem; color: var(--qarn-leise); line-height: 1.3; }
.qarn-darum a:hover b { text-decoration: underline; }
@media (max-width: 1100px) { .qarn-darum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .qarn-darum { padding: 12px; gap: 12px; } .qarn-darum li, .qarn-darum a { grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; } .qarn-darum svg { width: 18px; height: 18px; } }
.qarn-treffer a span, .qarn-suchergebnis a span { min-width: 0; }
@media (max-width: 520px) { .qarn-treffer a, .qarn-suchergebnis a { flex-direction: column; gap: 2px; } .qarn-treffer small, .qarn-suchergebnis small { white-space: normal; } }
.qarn-darum-link { display: block !important; }
.qarn-quiz-balken i { display: block; padding: 0; border: 0; }
.qarn-avatar-foto { overflow: hidden; padding: 0; }
.qarn-avatar-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; border-radius: 50%; display: block; }
@media (max-width: 640px) { .qarn-radar-kopf .qarn-tabs { flex: 1 1 100%; order: 2; } .qarn-radar-kopf .qarn-schalter { order: 3; } }
.qarn-startwerte { display: block; margin-top: 2px; font-size: .72rem; color: var(--qarn-leise); text-decoration: none; }
.qarn-startwerte:hover { text-decoration: underline; }
.qarn-dunkel .qarn-startwerte, .qarn-nacht .qarn-startwerte { color: rgba(255,255,255,.6); }
.qarn-fotonachweis ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; }
.qarn-fotonachweis li a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 520px) { .qarn-punktzeile { flex-wrap: nowrap; gap: 6px 9px; letter-spacing: .06em; font-size: .7rem; } .qarn-punktzeile span { gap: 9px; white-space: nowrap; } }