/* tibinokids.tv — eigenes Stylesheet, bewusst NICHT das der Hauptseite.
   tibinokids.com ist warm und kinderbuchhaft, weil dort Eltern lesen. Hier wird geschaut:
   dunkler Grund, damit das Video die hellste Flaeche im Bild ist — dieselbe Ueberlegung wie
   im Kino und in jeder Streaming-App. Markenfarben bleiben, der Charakter aendert sich. */

:root{
  --grund:#12100E; --flaeche:#1C1916; --linie:#2E2823;
  --text:#F4EFE7; --leise:#B3A899;
  --orange:#FF8A1E; --gelb:#FFC93C; --rot:#E8503A;
  --rund:16px;
  --breit:1180px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--grund); color:var(--text);
  font:16px/1.65 "Nunito","Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* height:auto ist hier nicht kosmetisch: die Bilder tragen width/height-Attribute (gegen
   Layoutspruenge). Ohne diese Zeile schlaegt das height-Attribut das aspect-ratio, und die
   Vorstellbilder werden auf 271x540 gequetscht statt 16:9. */
img,video,iframe{max-width:100%; height:auto; display:block}
a{color:var(--gelb); text-decoration:none}
a:hover,a:focus-visible{text-decoration:underline}
.wrap{width:100%; max-width:var(--breit); margin:0 auto; padding:0 20px}

h1,h2,h3{font-family:"Fredoka","Nunito",system-ui,sans-serif; line-height:1.15; margin:0 0 .5em}
h1{font-size:clamp(2rem,5.5vw,3.4rem); letter-spacing:-.01em}
h2{font-size:clamp(1.4rem,3vw,2rem); margin-top:0}
h3{font-size:1.12rem; margin:0 0 .35em}

/* ── Kopfzeile ───────────────────────────────────────────────────────── */
.bar{
  display:flex; align-items:center; gap:20px;
  max-width:var(--breit); margin:0 auto; padding:14px 20px;
  border-bottom:1px solid var(--linie);
}
.mark{display:flex; align-items:center; gap:8px; flex:0 0 auto}
.mark img{width:104px; height:auto}
.mark span{
  font:700 .68rem/1 "Fredoka",sans-serif; letter-spacing:.16em;
  color:var(--grund); background:var(--gelb);
  padding:.32em .5em .28em; border-radius:5px;
}
.bar nav{display:flex; gap:22px; margin-left:auto; flex-wrap:wrap}
.bar nav a{color:var(--leise); font-weight:700; font-size:.94rem}
.bar nav a:hover{color:var(--text); text-decoration:none}

.btn{
  display:inline-block; background:var(--rot); color:#fff; font-weight:800;
  padding:.6em 1.15em; border-radius:999px; font-size:.92rem; white-space:nowrap;
}
.btn:hover{background:#f2604a; text-decoration:none}
.btn.big{padding:.8em 1.5em; font-size:1.02rem}
.btn.ghost{background:transparent; color:var(--text); box-shadow:inset 0 0 0 2px var(--linie)}
.btn.ghost:hover{background:var(--flaeche)}

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero{
  padding:clamp(48px,8vw,96px) 0 clamp(36px,6vw,64px);
  background:
    radial-gradient(80rem 34rem at 12% -18%, rgba(255,138,30,.20), transparent 60%),
    radial-gradient(60rem 30rem at 92% 8%, rgba(255,201,60,.11), transparent 60%);
}
.kicker{
  margin:0 0 .9em; color:var(--gelb); font-weight:800;
  font-size:.78rem; letter-spacing:.13em; text-transform:uppercase;
}
.hero .lead{max-width:46ch; color:var(--leise); font-size:clamp(1.02rem,1.6vw,1.2rem); margin:0 0 1.7em}
.cta{display:flex; gap:12px; flex-wrap:wrap}

/* ── Abschnitte ──────────────────────────────────────────────────────── */
.sec{padding:clamp(34px,5vw,56px) 20px}
.sec .sub{color:var(--leise); margin:-.4em 0 1.6em}
.more{margin:1.5em 0 0}
.band{background:var(--flaeche); border-radius:var(--rund); margin:0 auto clamp(34px,5vw,56px);
      padding:clamp(28px,4vw,44px)}
.band p{color:var(--leise); max-width:62ch}

/* ── Folgen ──────────────────────────────────────────────────────────── */
.eps{display:grid; gap:26px; grid-template-columns:1fr}
@media (min-width:720px){ .eps{grid-template-columns:1fr 1fr} }

.ep{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--rund); overflow:hidden}
.ep-txt{padding:16px 18px 20px}
.ep-txt h3 a{color:var(--text)}
.ep-txt p{margin:.4em 0 0; color:var(--leise); font-size:.95rem}
.tag{display:inline-block; color:var(--gelb); font-weight:800; font-size:.72rem;
     letter-spacing:.1em; text-transform:uppercase; margin-bottom:.5em}

/* Abspielflaeche: Bild, das auf Klick zum Player wird */
.player{position:relative; display:block; cursor:pointer; background:#000; aspect-ratio:16/9}
.player img,.player video,.player iframe{width:100%; height:100%; object-fit:cover; border:0}
.player.big{border-radius:var(--rund); overflow:hidden; margin:0 0 .6em}
.play{
  position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%;
  background:rgba(18,16,14,.62); backdrop-filter:blur(3px);
  box-shadow:0 6px 22px rgba(0,0,0,.42); transition:transform .16s, background .16s;
}
.play::after{
  content:""; position:absolute; inset:0; margin:auto; width:0; height:0;
  border-left:19px solid #fff; border-top:12px solid transparent; border-bottom:12px solid transparent;
  transform:translateX(3px);
}
.play.small{width:48px; height:48px}
.play.small::after{border-left-width:14px; border-top-width:9px; border-bottom-width:9px}
.player:hover .play,.hi:hover .play{transform:scale(1.09); background:var(--rot)}
.len{
  position:absolute; right:10px; bottom:10px; background:rgba(18,16,14,.82);
  color:#fff; font-size:.76rem; font-weight:800; padding:.22em .5em; border-radius:5px;
}

/* ── Vorstellvideos ──────────────────────────────────────────────────── */
.his{display:grid; gap:16px; grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){ .his{grid-template-columns:repeat(4,1fr)} }
@media (min-width:640px){ .his.wide{grid-template-columns:repeat(4,1fr)} }

.hi{
  position:relative; cursor:pointer; background:var(--flaeche);
  border:1px solid var(--linie); border-radius:var(--rund); overflow:hidden; padding-bottom:14px;
}
.hi img,.hi video{width:100%; aspect-ratio:16/9; object-fit:cover}
.hi .play{inset:auto; top:calc(50% - 40px); left:calc(50% - 24px)}
.hi b{display:block; padding:12px 14px 0; font-size:1rem}
.hi span:not(.play){display:block; padding:0 14px; color:var(--leise); font-size:.86rem}

/* ── Folgenseite ─────────────────────────────────────────────────────── */
.watch{padding:clamp(28px,4vw,48px) 20px clamp(40px,6vw,72px)}
.crumb{color:var(--leise); font-size:.86rem; margin:0 0 .8em}
.watch .lead{color:var(--leise); font-size:1.08rem; max-width:60ch; margin:0 0 1.6em}
.cap{color:var(--leise); font-size:.84rem; margin:0 0 2em}

.facts{display:grid; gap:22px; grid-template-columns:1fr; margin:0 0 2em}
@media (min-width:820px){ .facts{grid-template-columns:repeat(3,1fr)} }
.facts > div{background:var(--flaeche); border:1px solid var(--linie);
             border-radius:var(--rund); padding:18px 20px}
.facts span{display:block; color:var(--gelb); font-weight:800; font-size:.72rem;
            letter-spacing:.1em; text-transform:uppercase; margin-bottom:.5em}
.facts p{margin:0; color:var(--leise); font-size:.95rem}

.note{
  border-left:3px solid var(--orange); background:var(--flaeche);
  border-radius:0 var(--rund) var(--rund) 0; padding:16px 20px; margin:0 0 2.4em;
}
.note p{margin:0; color:var(--leise); font-size:.95rem}

/* ── Fusszeile ───────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--linie); padding:36px 0 44px; margin-top:24px}
.foot-lead{max-width:56ch; color:var(--leise); margin:0 0 1em}
.foot-links{margin:0 0 1em; font-size:.94rem}
.foot-links a{color:var(--leise)}
.foot-links a:hover{color:var(--gelb)}
.foot-fine{color:#7E7367; font-size:.84rem; margin:0; max-width:60ch}

/* Tastaturbedienung sichtbar lassen — die Abspielflaechen sind divs mit role=button */
[tabindex]:focus-visible,a:focus-visible,.btn:focus-visible{
  outline:3px solid var(--gelb); outline-offset:3px; border-radius:6px;
}

@media (prefers-reduced-motion:reduce){ *{transition:none !important} }