/* Werbefilm und Bildergalerie auf der Startseite (31.10.2026). Nur Farben aus tisch.css, dadurch auch im Nachtlicht. */
.film,.galerie{position:relative;z-index:1;max-width:1240px;margin:34px auto 0;padding:0 28px 1.2rem}
.film__zettel,.galerie__zettel{position:relative;padding:2rem 2.2rem 1.6rem;background-color:var(--papier-brief);box-shadow:0 2px 0 var(--schatten-kontakt),0 14px 22px -10px var(--schatten-weich)}
.film__zettel{transform:rotate(.3deg)}
.galerie__zettel{transform:rotate(-.25deg)}
.film__zettel::before,.galerie__zettel::before{content:"";position:absolute;left:50%;top:-12px;width:132px;height:26px;margin-left:-66px;background:var(--klebeband);box-shadow:0 0 0 1px var(--klebeband-kante);transform:rotate(2deg)}
.film h2,.galerie h2{margin:0 0 1.1rem;font-family:var(--schrift-titel);font-size:1.75rem;color:var(--tinte)}
.film__rahmen{position:relative;max-width:860px;aspect-ratio:16/9;background:var(--tiefschwarz);overflow:hidden;box-shadow:inset 0 0 0 2px var(--klebeband-kante)}
.film__vorschau,.film__rahmen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.film__vorschau{object-fit:cover}




.galerie__raster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.galerie__raster li{margin:0}
.galerie__bild{display:block;padding:6px 6px 18px;background:var(--papier);box-shadow:0 2px 0 var(--schatten-kontakt),0 8px 14px -8px var(--schatten-weich)}
.galerie__raster li:nth-child(odd) .galerie__bild{transform:rotate(-.8deg)}
.galerie__raster li:nth-child(even) .galerie__bild{transform:rotate(.7deg)}
.galerie__bild img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.galerie__bild:focus-visible{outline:3px solid var(--bordeaux);outline-offset:3px}
.grossbild{max-width:min(96vw,1100px);max-height:94vh;padding:0;border:0;background:transparent;color:var(--creme);overflow:visible}
.grossbild::backdrop{background:rgba(18,11,7,.86)}
.grossbild__figur{margin:0;display:flex;flex-direction:column;align-items:center}
.grossbild__bild{display:block;max-width:100%;max-height:78vh;width:auto;height:auto;background:var(--papier);padding:8px;box-sizing:border-box}
.grossbild__text{max-width:60ch;margin:.6rem auto 0;font-size:1rem;line-height:1.4;text-align:center}
.grossbild__leiste{display:flex;justify-content:center;gap:12px;margin-top:.6rem}
.grossbild__knopf{min-width:48px;min-height:48px;border:0;border-radius:3px 5px 3px 6px;background:var(--knopf);color:var(--knopf-schrift);font:inherit;font-size:1.6rem;font-weight:700;line-height:1;cursor:pointer;box-shadow:inset 0 0 0 2px var(--knopf-kante)}
.grossbild__knopf:focus-visible{outline:3px solid var(--gold-hell);outline-offset:2px}
@media (max-width:899px){
 .film,.galerie{max-width:600px;margin:18px auto 0;padding:0 16px 1rem}
 .film h2,.galerie h2{font-size:1.5rem}
 .film__zettel,.galerie__zettel{padding:1.6rem 1.1rem 1.1rem;transform:none}





 .galerie__raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@media (prefers-reduced-motion:reduce){.film__zettel,.galerie__zettel,.galerie__bild{transform:none!important}}

/* Hotfix 31.10.2026 nachmittags: grosser Abspielknopf mittig, Hinweis klein unter dem Bild */
.film__knopf{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0;cursor:pointer}
.film__knopf svg{width:88px;height:62px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));transition:transform .15s}
.film__knopf-grund{fill:#c4302b;fill-opacity:.92}
.film__knopf:hover svg,.film__knopf:focus-visible svg{transform:scale(1.08)}
.film__knopf:hover .film__knopf-grund,.film__knopf:focus-visible .film__knopf-grund{fill-opacity:1}
.film__knopf:focus-visible{outline:3px solid var(--creme);outline-offset:-6px}
.film__hinweis{max-width:860px;margin:.55rem 0 0;font-size:.82rem;line-height:1.4;color:var(--tinte);opacity:.8}
.film__hinweis a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
@media (max-width:899px){.film__knopf svg{width:72px;height:51px}}
/* Folgt uns: Links zu unseren Kanälen, Symbole als Inline-SVG */
.kanaele{margin:1.3rem 0 0}
.kanaele__titel{margin:0 0 .5rem;font-family:var(--schrift-titel);font-size:1.35rem;color:var(--tinte)}
.kanaele__liste{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 14px}
.kanaele__liste li{margin:0}
.kanaele__link{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:.45rem 1rem;border-radius:3px 5px 3px 6px;background:var(--knopf);color:var(--knopf-schrift);font-weight:700;text-decoration:none;box-shadow:inset 0 0 0 2px var(--knopf-kante)}
.kanaele__link:hover .kanaele__name{text-decoration:underline}
.kanaele__link:focus-visible{outline:3px solid var(--bordeaux);outline-offset:3px}
.kanaele__konto{font-weight:400}
.kanaele__symbol{flex:none}
.kanaele--fuss{margin:0 0 1rem;text-align:center}
.kanaele--fuss .kanaele__titel{color:inherit}
.kanaele--fuss .kanaele__liste{justify-content:center}
@media (max-width:899px){.kanaele__link{flex:1 1 100%;justify-content:flex-start}}

/* 31.10.2026 nachmittags: Film in der Kopfszene ueber dem Paeckchen-Zaehler (wirkt nur, wenn .szene ein Raster ist) */
.szene>.film{grid-column:1;grid-row:2;margin:18px 0 0;padding:0}
.szene>.zaehler{grid-row:3}
.szene>.kalender{grid-row:4}

/* Hotfix 31.10.2026 16:00: ab 1400px ist .szene eine feste Bühne (alle Kinder absolut); Film mittig unter die Bühne, Platz darunter freihalten */
@media (min-width:1400px){.szene>.film{top:100%;left:0;right:0;bottom:auto;width:auto;max-width:960px;margin:34px auto 0;z-index:1}.szene{margin-bottom:800px}}
