/* TOPBEREICH-V1 · Startseite oben — Varianten, Animationen, Bild immer vollständig („ganz“) */
.tb { position: relative; margin: 16px auto 8px; color: #fff; }
.tb-breite-wrap { max-width: var(--breite, 1200px); padding: 0 16px; }
.tb-breite-voll { max-width: none; padding: 0; margin-top: 0; }
.tb-innen { position: relative; height: var(--tb-h, 360px); border-radius: 14px; overflow: hidden; background: #0b0b0d; box-shadow: 0 10px 34px rgba(0,0,0,.28); }
.tb-breite-voll .tb-innen { border-radius: 0; }
.tb a { color: inherit; text-decoration: none; }

/* Bildfläche: vollständiges Bild vor unscharfem Hintergrund */
.tb-bild { position: absolute; inset: 0; overflow: hidden; background: #111; }
.tb-bild.leer { background: linear-gradient(120deg, #1a1a1a, #5a0008); }
.tb-unschaerfe { position: absolute; inset: -30px; background: center/cover no-repeat; filter: blur(26px) brightness(.55) saturate(1.2); transform: scale(1.08); }
.tb-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.tb-bild.fuellen img { object-fit: cover; } .tb-bild.fuellen .tb-unschaerfe { display: none; }
.tb-verlauf { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,var(--tb-dunkel,.45)) 0%, rgba(0,0,0,calc(var(--tb-dunkel,.45) * .5)) 45%, transparent 75%); }
.tb[data-textpos="rechts"] .tb-verlauf { background: linear-gradient(270deg, rgba(0,0,0,var(--tb-dunkel,.45)) 0%, transparent 75%); }
.tb[data-textpos="mitte"] .tb-verlauf { background: linear-gradient(0deg, rgba(0,0,0,var(--tb-dunkel,.45)) 0%, transparent 70%); }

/* Text */
.tb-text { position: absolute; left: 4%; bottom: 10%; max-width: 46%; z-index: 3; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.tb[data-textpos="rechts"] .tb-text { left: auto; right: 4%; text-align: right; }
.tb[data-textpos="mitte"] .tb-text { left: 50%; transform: translateX(-50%); text-align: center; max-width: 80%; }
.tb-ueber { font-size: 1rem; font-weight: 600; opacity: .95; margin-bottom: 2px; }
.tb-titel { font: clamp(1.5rem, 2.6vw, 2.5rem)/1.05 'Anton', sans-serif; text-transform: uppercase; letter-spacing: .01em; }
.tb-titel.klein { font-size: clamp(1.05rem, 1.4vw, 1.4rem); }
.tb-unter { font-size: 1.05rem; margin-top: 6px; font-weight: 600; }
.tb-count { font-size: 1rem; margin-top: 6px; color: var(--gold, #e5c07b); }
.tb-knopf { display: inline-block; margin-top: 12px; padding: 9px 18px; border-radius: 6px; background: var(--rot, #c4161c); font-weight: 700; font-size: 1rem; text-shadow: none; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
a:hover .tb-knopf, a:focus-visible .tb-knopf { filter: brightness(1.12); }
.tb-marke { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 4px; font: .85rem 'Anton', sans-serif; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; text-shadow: none; }
.tb-marke.live { background: var(--rot, #c4161c); } .tb-marke.live i { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: tbPuls 1.4s infinite; }
.tb-marke.komm { background: #2c3e9e; } .tb-marke.rep { background: #444; } .tb-marke.vid { background: #6b4a14; } .tb-marke.eig { background: var(--gold, #e5a823); color: #1a1408; }
@keyframes tbPuls { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* Glanz-Sweep (Effekt) */
.tb[data-glanz="1"] .tb-innen::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%); transform: translateX(-120%); animation: tbGlanz 9s ease-in-out 1.2s infinite; }
@keyframes tbGlanz { 0% { transform: translateX(-120%); } 18%, 100% { transform: translateX(120%); } }

/* ── Karussell ── */
.tb-karussell .tb-folie { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, transform .9s ease, visibility 0s .9s; }
.tb-karussell .tb-folie.an { opacity: 1; visibility: visible; transition: opacity .9s ease, transform .9s ease; z-index: 2; }
.tb[data-anim="schieben"] .tb-folie { transform: translateX(8%); } .tb[data-anim="schieben"] .tb-folie.an { transform: none; } .tb[data-anim="schieben"] .tb-folie.weg { transform: translateX(-8%); }
.tb[data-anim="zoom"] .tb-folie { transform: scale(.92); } .tb[data-anim="zoom"] .tb-folie.an { transform: scale(1); }
.tb[data-anim="kippen"] .tb-innen { perspective: 1400px; } .tb[data-anim="kippen"] .tb-folie { transform: rotateY(14deg) scale(.96); transform-origin: left center; } .tb[data-anim="kippen"] .tb-folie.an { transform: none; }
.tb[data-anim="kenburns"] .tb-folie.an .tb-bild img, .tb[data-anim="kenburns"] .tb-folie.an .tb-unschaerfe { animation: tbKen 12s ease-out both; }
@keyframes tbKen { from { transform: scale(1); } to { transform: scale(1.07) translate(-1%, -1%); } }
.tb[data-anim] .tb-folie.an .tb-text > * { animation: tbText .8s ease-out both; }
.tb[data-anim] .tb-folie.an .tb-text > *:nth-child(2) { animation-delay: .1s; } .tb[data-anim] .tb-folie.an .tb-text > *:nth-child(3) { animation-delay: .2s; } .tb[data-anim] .tb-folie.an .tb-text > *:nth-child(4) { animation-delay: .3s; }
.tb[data-anim="keine"] .tb-folie, .tb[data-anim="keine"] .tb-folie.an .tb-text > * { transition: none; animation: none; }
@keyframes tbText { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.tb-pfeil { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(0,0,0,.45); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; opacity: .75; transition: opacity .2s, background .2s; }
.tb-pfeil:hover, .tb-pfeil:focus-visible { opacity: 1; background: var(--rot, #c4161c); }
.tb-pfeil.zur { left: 12px; } .tb-pfeil.vor { right: 12px; }
.tb-punkte { position: absolute; z-index: 5; right: 18px; bottom: 14px; display: flex; gap: 6px; }
.tb-punkte button { width: 34px; height: 34px; border: 0; background: transparent; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.tb-punkte span { display: block; width: 26px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.45); overflow: hidden; position: relative; }
.tb-punkte .an span { background: rgba(255,255,255,.35); }
.tb-punkte .an span::after { content: ''; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: tbLauf var(--tb-iv, 7s) linear both; }
.tb.pause .tb-punkte .an span::after { animation-play-state: paused; }
@keyframes tbLauf { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Kompakt-Banner ── */
.tb-banner .tb-innen { background: linear-gradient(105deg, #5a0008, #8e1014 55%, #2a0306); }
.tb-banner a.tb-banner, .tb-banner div.tb-banner { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr minmax(0, calc(var(--tb-h) * 16 / 9 - 40px)); gap: 24px; align-items: center; padding: 20px 28px; }
.tb-banner-text { position: relative; min-width: 0; }
.tb-banner .tb-text { position: static; max-width: none; transform: none; text-align: left; }
.tb-banner-bild { position: relative; height: calc(var(--tb-h) - 40px); border-radius: 10px; overflow: hidden; box-shadow: 0 8px 28px rgba(0,0,0,.45); transition: transform .5s ease; }
.tb-banner a:hover .tb-banner-bild { transform: scale(1.02); }
.tb-play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--rot, #c4161c); z-index: 3; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.tb-play::before { content: ''; position: absolute; left: 28px; top: 20px; border-left: 26px solid #fff; border-top: 16px solid transparent; border-bottom: 16px solid transparent; }

/* ── Bühne (Slider/Coverflow) ── */
.tb-buehne .tb-innen { background: radial-gradient(ellipse at 50% 110%, #5a0008, #0b0b0d 70%); perspective: 1600px; }
.tb-buehne-bahn { position: absolute; inset: 0; }
.tb-karte { position: absolute; top: 8%; left: 50%; height: 84%; aspect-ratio: 16/9; max-width: 62%; border-radius: 12px; overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,.6);
  transform: translateX(-50%) scale(.62); opacity: 0; transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .8s, filter .8s; filter: brightness(.55); pointer-events: none; }
.tb-karte .tb-text { left: 5%; bottom: 7%; max-width: 90%; }
.tb-karte.an { transform: translateX(-50%) scale(1); opacity: 1; filter: none; z-index: 3; pointer-events: auto; }
.tb-karte.links { transform: translateX(-118%) scale(.74) rotateY(18deg); opacity: .85; z-index: 2; pointer-events: auto; }
.tb-karte.rechts { transform: translateX(18%) scale(.74) rotateY(-18deg); opacity: .85; z-index: 2; pointer-events: auto; }
.tb[data-anim="keine"] .tb-karte { transition: none; }

/* ── Mosaik ── */
.tb-mosaik .tb-innen { background: transparent; box-shadow: none; overflow: visible; }
.tb-mosaik-raster { height: 100%; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; }
.tb-feld { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.tb-feld.f0 { grid-row: 1 / 3; }
.tb-feld .tb-text { max-width: 86%; bottom: 8%; }
.tb-feld .tb-bild img, .tb-feld .tb-unschaerfe { transition: transform .7s ease; }
.tb-feld:hover .tb-bild img { transform: scale(1.04); }
.tb-mosaik[data-glanz="1"] .tb-innen::after { display: none; }

/* ── Live-Band ── */
.tb-ticker .tb-innen { height: auto; min-height: 64px; display: flex; align-items: stretch; background: linear-gradient(90deg, #5a0008, #8e1014); border-radius: 10px; }
.tb-ticker-kopf { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 0 20px; font: 1.25rem 'Anton', sans-serif; background: rgba(0,0,0,.25); }
.tb-punkt { width: 12px; height: 12px; border-radius: 50%; background: #fff; animation: tbPuls 1.4s infinite; }
.tb-ticker-band { flex: 1; overflow: hidden; display: flex; align-items: center; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.tb-ticker-lauf { display: flex; gap: 48px; white-space: nowrap; animation: tbTicker 40s linear infinite; padding-left: 24px; }
.tb-ticker:hover .tb-ticker-lauf, .tb-ticker:focus-within .tb-ticker-lauf { animation-play-state: paused; }
.tb-tick { display: inline-flex; align-items: center; gap: 10px; font-size: 1.1rem; min-height: 48px; }
.tb-tick .tb-marke { margin: 0; } .tb-tick span { opacity: .9; }
@keyframes tbTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Handy */
@media (max-width: 760px) {
  .tb-innen { height: auto; aspect-ratio: 16/10; min-height: 220px; }
  .tb-ticker .tb-innen { aspect-ratio: auto; }
  .tb-text { max-width: 88%; left: 5%; bottom: 7%; }
  .tb-titel { font-size: 1.35rem; } .tb-unter { font-size: .95rem; } .tb-knopf { padding: 7px 14px; font-size: .95rem; }
  .tb-banner a.tb-banner, .tb-banner div.tb-banner { grid-template-columns: 1fr; padding: 14px; }
  .tb-banner-bild { display: none; }
  .tb-mosaik .tb-innen { aspect-ratio: auto; } .tb-mosaik-raster { grid-template-columns: 1fr; grid-template-rows: none; height: auto; } .tb-feld { aspect-ratio: 16/9; } .tb-feld.f0 { grid-row: auto; }
  .tb-karte { max-width: 86%; } .tb-karte.links, .tb-karte.rechts { opacity: 0; }
  .tb-pfeil { width: 40px; height: 40px; font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tb *, .tb *::before, .tb *::after, .tb .tb-innen::after { animation: none !important; transition: none !important; }
}

/* TOPBEREICH-V1 Feinschliff: bei „ganz“ steht das Bild seitlich, der Text daneben — nichts überdeckt das Bild */
.tb-karussell .tb-bild.ganz img { object-position: right center; }
.tb-karussell[data-textpos="rechts"] .tb-bild.ganz img { object-position: left center; }
.tb-karussell[data-textpos="links"] .tb-folie:has(.tb-bild.ganz) .tb-text,
.tb-karussell[data-textpos="rechts"] .tb-folie:has(.tb-bild.ganz) .tb-text { max-width: calc(100% - var(--tb-h) * 16 / 9 - 7%); min-width: 260px; }
.tb-karussell .tb-folie:has(.tb-bild.ganz) .tb-verlauf { background: none; }
.tb-karte .tb-verlauf, .tb-feld .tb-verlauf { background: linear-gradient(0deg, rgba(0,0,0,calc(var(--tb-dunkel,.45) + .2)) 0%, transparent 55%) !important; }
.tb-karte .tb-text, .tb-feld .tb-text { left: 4%; right: 4%; max-width: none; transform: none; text-align: left; }
.tb-bild.leer::after { content: 'DJB.TV'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 3rem 'Anton', sans-serif; color: rgba(255,255,255,.18); }
@media (max-width: 760px) {
  .tb-karussell .tb-bild.ganz img { object-position: center top; }
  .tb-karussell .tb-folie:has(.tb-bild.ganz) .tb-text { max-width: 88% !important; min-width: 0; }
  .tb-karussell .tb-folie:has(.tb-bild.ganz) .tb-verlauf { background: linear-gradient(0deg, rgba(0,0,0,.8), transparent 60%); }
}