.topic-hero{padding:76px 0 48px}
.topic-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:42px;align-items:center}
.topic-hero h1{font-size:clamp(3.4rem,8vw,7.5rem);line-height:.89;letter-spacing:-.06em;margin:15px 0 22px}
.topic-hero .intro{font-size:1.2rem;color:#d7dce6;line-height:1.65}
.hero-photo{background:#eee;border-radius:28px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.hero-photo img{width:100%;display:block;aspect-ratio:1/1;object-fit:cover}
.credit{font-size:.72rem;color:#818998;padding:8px 12px;background:#0e1118}
.fact-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:28px}
.fact{background:var(--panel);border:1px solid var(--line);border-radius:17px;padding:17px}
.fact strong{display:block;font-size:1.55rem;color:var(--gold)}
.fact small{color:var(--muted)}
.tape-lab{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.deck,.game{background:linear-gradient(145deg,#171b25,#0c1017);border:1px solid var(--line);border-radius:25px;padding:26px;box-shadow:var(--shadow)}
.cassette{max-width:500px;margin:20px auto;background:#d7cfb9;color:#201c18;border-radius:18px;padding:24px;box-shadow:0 18px 45px rgba(0,0,0,.35)}
.window{background:#292723;border-radius:10px;padding:22px;display:flex;justify-content:space-around}
.reel{width:72px;height:72px;border:12px dotted #d7cfb9;border-radius:50%;transition:transform .2s}
.cassette.running .reel{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.counter{font-family:monospace;background:#151515;color:#ffdf7d;padding:7px 10px;border-radius:6px;display:inline-block;margin-top:16px}
.deck-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px}
.deck-controls button,.choice{border:1px solid var(--line);background:#202631;color:#fff;border-radius:12px;padding:14px 9px;font-weight:900;cursor:pointer}
.deck-controls button:hover,.choice:hover{background:#2b3341}
.status{min-height:52px;margin-top:16px;color:#dce3ee;font-weight:800}
.waitbar{height:14px;border-radius:99px;background:#232a35;overflow:hidden;margin:18px 0}
.waitbar span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--orange),var(--cyan));transition:width .3s}
.original-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.original-card{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.original-card img{display:block;width:100%;height:380px;object-fit:cover;background:#eee}
.original-card figcaption{padding:18px;color:#cbd1dc}
.original-card strong{display:block;font-size:1.25rem;color:#fff;margin-bottom:6px}
.quiz-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.choice.good{outline:2px solid var(--green);background:rgba(108,255,155,.09)}
.choice.bad{outline:2px solid #ff6969;background:rgba(255,105,105,.08)}
.quiz-result{min-height:42px;margin-top:14px;font-weight:850}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.compare>div{border:1px solid var(--line);border-radius:20px;padding:22px;background:var(--panel)}
.compare strong{display:block;font-size:1.65rem;margin-bottom:8px}
.compare p{color:var(--muted)}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:16px 18px;margin:9px 0}
.faq summary{font-weight:900;cursor:pointer}
.sources{border-top:1px solid var(--line);padding-top:22px;color:var(--muted)}
.sources a{color:#a9e8ff}
.next-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.next-card{display:block;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px}
.next-card strong{display:block;font-size:1.15rem;margin:6px 0}
.next-card small{color:var(--muted)}
@media(max-width:820px){.topic-grid,.tape-lab,.original-grid,.compare{grid-template-columns:1fr}.fact-strip{grid-template-columns:1fr 1fr}.next-cards{grid-template-columns:1fr}}
@media(max-width:520px){.fact-strip,.quiz-options,.deck-controls{grid-template-columns:1fr 1fr}}


/* ===== Datasette Layout Fix: Desktop + Mobile ===== */

/* Herobild: keine künstliche quadratische/hohe Fläche mehr */
.hero-photo{
  align-self:center;
  background:#0d1118;
}
.hero-photo img{
  width:100%;
  height:auto !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  max-height:620px;
  background:#0d1118 !important;
}

/* Originalbilder ebenfalls natürlich darstellen */
.original-card img{
  width:100%;
  height:auto !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  max-height:520px;
  background:#0d1118 !important;
}

@media(max-width:820px){
  .topic-hero{
    padding:42px 0 34px !important;
  }

  .topic-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:28px !important;
  }

  .topic-hero h1{
    font-size:clamp(3.1rem,15vw,5.2rem) !important;
    line-height:.91 !important;
    margin:14px 0 20px !important;
  }

  .topic-hero .intro{
    font-size:1.08rem !important;
    line-height:1.6 !important;
  }

  .hero-photo{
    width:100% !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .hero-photo img{
    width:100% !important;
    max-height:none !important;
  }

  .fact-strip{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    margin-top:22px !important;
  }

  .fact{
    min-width:0 !important;
    padding:15px !important;
  }

  .fact strong{
    font-size:1.15rem !important;
  }

  .tape-lab,
  .original-grid,
  .compare{
    grid-template-columns:1fr !important;
  }

  .deck,
  .game{
    padding:18px !important;
  }

  .cassette{
    width:100% !important;
    padding:17px !important;
  }

  .deck-controls{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .quiz-options{
    grid-template-columns:1fr !important;
  }

  .next-cards{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:420px){
  .topic-hero h1{
    font-size:clamp(2.9rem,14vw,4rem) !important;
  }
}


/* ===== Hero-Bild kompakter ===== */
@media(min-width:821px){
  .topic-grid{
    grid-template-columns:1.08fr .92fr !important;
  }
  .hero-photo{
    width:min(100%,480px) !important;
    justify-self:end !important;
  }
  .hero-photo img{
    max-height:460px !important;
    object-fit:contain !important;
  }
}
@media(max-width:820px){
  .hero-photo{
    width:min(100%,520px) !important;
    justify-self:center !important;
  }
}