:root{--red:#951820;--ink:#171717;--muted:#6f6f72;--line:#e9e9eb;--bg:#f6f6f7;--white:#fff;--radius:24px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--bg)}
.topbar{height:76px;padding:0 clamp(20px,5vw,72px);display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);position:sticky;top:0;z-index:20;border-bottom:1px solid rgba(0,0,0,.05)}
.brand img{display:block;width:142px;max-height:43px;object-fit:contain}.brand-fallback{display:none;font-weight:850;letter-spacing:-1.5px;font-size:27px;color:#222}.brand-fallback span{color:var(--red)}.back{text-decoration:none;color:#555;font-size:14px}.back:hover{color:var(--red)}
main{max-width:1440px;margin:auto;padding:0 clamp(18px,5vw,72px) 80px}.hero{padding:68px 0 38px;max-width:760px}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--red);margin-bottom:12px}.hero h1{font-size:clamp(44px,7vw,82px);line-height:.96;letter-spacing:-.055em;margin:0 0 18px}.hero p{font-size:clamp(17px,2vw,22px);color:var(--muted);margin:0;line-height:1.5}
.worlds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.world{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#ddd;cursor:pointer;isolation:isolate;box-shadow:0 8px 26px rgba(0,0,0,.07);transform:translateZ(0)}.world::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 28%,rgba(0,0,0,.78));z-index:1}.world-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .65s}.world:hover .world-bg{transform:scale(1.045);filter:saturate(1.05)}.world-content{position:absolute;z-index:2;left:clamp(22px,3vw,38px);right:clamp(22px,3vw,38px);bottom:clamp(20px,3vw,34px);color:white}.world-kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;opacity:.78}.world h2{font-size:clamp(25px,3vw,42px);letter-spacing:-.035em;margin:7px 0 7px}.world p{margin:0;max-width:580px;font-size:14px;line-height:1.45;color:rgba(255,255,255,.84)}.play-pill{position:absolute;right:28px;top:28px;z-index:3;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.9);color:var(--red);font-size:17px;box-shadow:0 8px 25px rgba(0,0,0,.12);transition:.25s}.world:hover .play-pill{transform:scale(1.08);background:#fff}
.modal,.player{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:22px}.modal.open,.player.open{display:flex}.modal-backdrop,.player-backdrop{position:absolute;inset:0;background:rgba(12,12,14,.68);backdrop-filter:blur(10px)}.modal-card{position:relative;width:min(1100px,100%);max-height:92vh;overflow:auto;background:white;border-radius:28px;box-shadow:0 30px 100px rgba(0,0,0,.35)}.close{position:absolute;right:18px;top:18px;z-index:8;border:0;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.92);font-size:29px;line-height:1;color:#222;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.15)}.modal-cover{height:min(49vw,470px);min-height:330px;background-size:cover;background-position:center;position:relative}.modal-gradient{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.78))}.modal-heading{position:absolute;left:clamp(24px,5vw,58px);right:clamp(24px,5vw,58px);bottom:40px;color:#fff}.modal-heading span{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.8}.modal-heading h2{font-size:clamp(36px,6vw,64px);letter-spacing:-.05em;margin:7px 0 9px}.modal-heading p{margin:0;max-width:690px;color:rgba(255,255,255,.85);line-height:1.5}.episodes-wrap{padding:34px clamp(24px,5vw,58px) 50px}.section-title{font-weight:800;font-size:14px;margin-bottom:18px}.episodes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.episode{border:1px solid var(--line);border-radius:17px;overflow:hidden;background:#fff;cursor:pointer;transition:.25s}.episode:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.08)}.episode-thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#ececef,#d8d8dc);display:grid;place-items:center;position:relative}.episode-thumb::after{content:"▶";width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:white;color:var(--red);box-shadow:0 6px 20px rgba(0,0,0,.14)}.episode-copy{padding:15px}.episode-copy strong{display:block;font-size:15px;margin-bottom:5px}.episode-copy small{color:#777;line-height:1.4}
.player{z-index:70}.player-card{position:relative;width:min(1000px,100%);background:#111;border-radius:22px;overflow:hidden;box-shadow:0 30px 100px rgba(0,0,0,.5)}.player-close{background:rgba(0,0,0,.6);color:#fff}.video-frame{aspect-ratio:16/9;background:radial-gradient(circle at 50% 45%,#3a3a3e,#111 70%);display:grid;place-items:center;color:white}.demo-play{display:grid;place-items:center;text-align:center;gap:13px}.demo-play .bigplay{width:78px;height:78px;border-radius:50%;background:var(--red);display:grid;place-items:center;font-size:28px;padding-left:5px}.demo-play span{font-size:13px;color:#aaa}.player-info{padding:22px 26px 26px;color:#fff}.player-info h3{margin:0 0 6px}.player-info p{margin:0;color:#aaa;font-size:14px}
body.lock{overflow:hidden}
@media(max-width:1000px){.worlds{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.topbar{height:66px}.brand img{width:118px}.hero{padding:46px 2px 28px}.worlds{grid-template-columns:1fr;gap:15px}.world{border-radius:19px}.world p{display:none}.play-pill{width:42px;height:42px;right:18px;top:18px}.modal,.player{padding:0}.modal-card,.player-card{border-radius:0;width:100%;height:100%;max-height:none}.modal-cover{height:46vh;min-height:300px}.episodes{grid-template-columns:1fr 1fr}.player{align-items:center}.player-card{height:auto}.close{right:14px;top:14px}}
@media(max-width:480px){.episodes{grid-template-columns:1fr}.hero h1{font-size:46px}}

/* V2: 3er-Raster auf Desktop */
@media(min-width:1001px){.world-content{left:22px;right:22px;bottom:22px}.world h2{font-size:clamp(22px,2.2vw,32px)}.world p{font-size:13px}.play-pill{right:20px;top:20px;width:44px;height:44px}}

/* V3 – direkter Player: eine Themenwelt = ein Video */
.player-info span{display:block;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:7px}.player-info h2{margin:0 0 8px;font-size:clamp(24px,4vw,38px);letter-spacing:-.035em}.player-info p{max-width:760px;line-height:1.5}.video-frame iframe{width:100%;height:100%;border:0;display:block}.world:focus-visible{outline:3px solid var(--red);outline-offset:4px}


/* =========================================================
   Fallback-Farben, solange ein Themenbild fehlt
   ========================================================= */
.world-bg{
  background-size:cover;
  background-position:center;
}
.world-bg.fallback-1{background:linear-gradient(135deg,#951820 0%,#c74850 52%,#ecb3b7 100%)}
.world-bg.fallback-2{background:linear-gradient(135deg,#243b55 0%,#4d718f 52%,#a8c0d2 100%)}
.world-bg.fallback-3{background:linear-gradient(135deg,#5b3b72 0%,#9267a8 52%,#d5bce0 100%)}
.world-bg.fallback-4{background:linear-gradient(135deg,#176b67 0%,#45a39d 52%,#a9d9d5 100%)}
.world-bg.fallback-5{background:linear-gradient(135deg,#8a5a16 0%,#c28a38 52%,#ead0a4 100%)}
.world-bg.fallback-6{background:linear-gradient(135deg,#404040 0%,#777 52%,#c5c5c5 100%)}
.world-bg.fallback-7{background:linear-gradient(135deg,#7c315d 0%,#b05d8c 52%,#dfb6ce 100%)}
.world-bg.fallback-8{background:linear-gradient(135deg,#405b28 0%,#769652 52%,#c1d4aa 100%)}

/* Sobald ein Bild vorhanden ist, hat es Vorrang vor der Fallback-Farbe */
.world-bg.has-image{
  background-size:cover;
  background-position:center;
}

.load-error{
  grid-column:1/-1;
  background:#fff;
  border-radius:20px;
  padding:32px;
  color:#777;
  text-align:center;
  box-shadow:0 8px 26px rgba(0,0,0,.06);
}
/* =========================================================
   WEITERE VIDEOS FOLGEN
   ========================================================= */

.more-card {
  cursor: default;
}

.more-card:hover {
  transform: none;
}

.more-bg {
  background:
    linear-gradient(
      135deg,
      #951820 0%,
      #6f1118 55%,
      #3d080c 100%
    ) !important;
}

.more-icon {
  position: absolute;
  z-index: 5;

  top: 42px;
  left: 50%;

  transform: translateX(-50%);

  width: 58px;
  height: 58px;

  border: 2px solid rgba(255,255,255,0.85);
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  color: white;

  font-size: 36px;
  font-weight: 300;
  line-height: 1;

  background: rgba(255,255,255,0.08);
}

.more-content .world-kicker {
  color: rgba(255,255,255,0.70);
}

.more-content h2 {
  color: white;
}

.more-content p {
  color: rgba(255,255,255,0.78);
}