/* Video-Sektion #videos (10/2026): Umschalter Kinder | Eltern, Hochformat-Karten, Player im Overlay (Bunny Stream). */
#videos .vid-kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 32px}
#videos .vid-kopf .lead{max-width:58ch}
.vid-wahl{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:var(--pastel)}
.vid-wahl button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 20px;border:0;border-radius:999px;background:transparent;
  font:700 15px 'Quicksand',sans-serif;color:var(--blau-tief);cursor:pointer;white-space:nowrap}
.vid-wahl button[aria-pressed="true"]{color:var(--blau)}
.vid-wahl button i{font-size:19px}
.vid-marke{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:#fff;box-shadow:0 2px 8px rgba(var(--blau-rgb),.12);transition:translate .45s cubic-bezier(.34,1.3,.64,1)}
#videos.rechts .vid-marke{translate:100% 0}
@media (prefers-reduced-motion:reduce){.vid-marke{transition:none}}

.vid-reihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:clamp(24px,3.5vw,40px)}
.vid-reihe[hidden]{display:none}
@media (max-width:900px){.vid-reihe{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62%;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:8px;margin-left:calc(-1 * var(--rand));margin-right:calc(-1 * var(--rand));padding-left:var(--rand);padding-right:var(--rand);scroll-padding-left:var(--rand);scrollbar-width:none}
  .vid-reihe::-webkit-scrollbar{display:none}
  .vid-karte{scroll-snap-align:start}}
.vid-karte{display:flex;flex-direction:column;gap:10px;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:var(--blau-tief);font:inherit}
.vid-rahmen{position:relative;display:block;aspect-ratio:9/16;border-radius:var(--r-karte);overflow:hidden;background:var(--blau);box-shadow:0 10px 28px rgba(var(--blau-rgb),.16);
  transition:transform .3s var(--feder,ease),box-shadow .3s}
.vid-rahmen img{width:100%;height:100%;object-fit:cover;display:block}
.vid-karte:hover .vid-rahmen,.vid-karte:focus-visible .vid-rahmen{transform:translateY(-4px);box-shadow:0 16px 36px rgba(var(--blau-rgb),.24)}
.vid-karte:focus-visible{outline:none}
.vid-karte:focus-visible .vid-rahmen{outline:3px solid var(--blau);outline-offset:3px}
.vid-play{position:absolute;left:50%;bottom:18px;translate:-50% 0;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#fff;color:var(--blau);
  box-shadow:0 6px 18px rgba(5,15,45,.25);font-size:24px}
.vid-sprache{position:absolute;top:12px;left:12px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--blau-tief);font:700 11px/1.4 'Quicksand',sans-serif;letter-spacing:.04em}
.vid-karte b{font:700 17px/1.25 var(--kopf);color:var(--blau)}
.vid-dauer{font-size:14px;opacity:.75;margin-top:-6px}

.vid-overlay{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;background:rgba(6,18,48,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.vid-overlay[hidden]{display:none}
.vid-box{position:relative;height:min(88vh,calc((100vw - 32px) * 2348 / 1080));aspect-ratio:1080/2348;max-width:100%;border-radius:24px;overflow:hidden;background:#000;box-shadow:0 24px 64px rgba(0,0,0,.4)}
.vid-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-zu{position:absolute;top:12px;right:12px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.95);color:var(--blau-tief);font-size:22px;cursor:pointer}
@media (min-width:700px){.vid-zu{top:20px;right:20px}}