/*
Theme Name: COMES Game
Theme URI: https://www.comes-game.com
Author: JPW Projekt GmbH
Author URI: https://www.jpw-projekt.gmbh
Description: Individuelles WordPress-Theme fuer comes-game.com. Schlanke Startseite mit drei interaktiven Bereichen (Wartebereich, Entertainment/Spiel, Zugang), angelehnt an die Optik von ctv-tech.com. Eckige Formensprache, Video-Hover-Effekte, ueber den Customizer austauschbare Bilder/Videos/Farben.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: comes-game
*/

/* =========================================================
   1. Basis / Custom Properties
   ========================================================= */
:root {
  --color-bg: #677269;
  --color-bg-dark: #4c554d;
  --color-panel: #3d453f;
  --color-accent: #ffff00;
  --color-accent-contrast: #1a1a1a;
  --color-text: #f4f4f2;
  --color-text-muted: #cfd3cd;
  --color-line: rgba(255, 255, 255, 0.08);
  --font-base: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --header-height: 84px;
  --gap: 32px;
  --panel-width: 380px;
  --panel-height: 520px;
  --radius: 0; /* Ausdruecklicher Kundenwunsch: keine runden Ecken (gilt fuer Buttons/Boxen ausserhalb der drei Hero-Panels) */
  --radius-card: 18px; /* Die drei Hero-Panels (Wartebereich/Spiel/Zugang) sind bewusst abgerundet, siehe Abschnitt 3 */
  --panel-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

* ,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  background-color: #3d443d; /* Tonwert des Hintergrundbilds als Fallback, waehrend es laedt */
  background-image: url('assets/images/site-background.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.5;
}

/* iOS/Safari unterstuetzt background-attachment:fixed nicht zuverlaessig -
   dort (und generell auf Touch-Geraeten) normal mitscrollen lassen. */
@media (hover: none) {
  body {
    background-attachment: scroll;
  }
}

img,
video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.6em;
}

p {
  margin: 0 0 1em;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.container {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 24px;
}

.btn {
  display: inline-block;
  padding: 14px 28px;
  border: 2px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.btn:hover,
.btn:focus-visible {
  background: transparent;
  color: var(--color-accent);
  transform: translateY(-1px);
}

.btn--dark {
  border-color: #1a1a1a;
  background: #1a1a1a;
  color: var(--color-text);
}

.btn--dark:hover,
.btn--dark:focus-visible {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-text);
}

.btn--ghost {
  border-color: rgba(255, 255, 255, 0.5);
  background: transparent;
  color: var(--color-text);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--color-text);
  color: var(--color-bg-dark);
  border-color: var(--color-text);
}

/* =========================================================
   2. Header / Navigation
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg-dark);
  border-bottom: 1px solid var(--color-line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

.site-logo {
  display: flex;
  align-items: center;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.site-logo img {
  max-height: 44px;
  width: auto;
}

.site-logo span.accent {
  color: var(--color-accent);
}

.primary-menu-toggle {
  display: none;
  background: none;
  border: 2px solid var(--color-text);
  color: var(--color-text);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.primary-menu-toggle span,
.primary-menu-toggle span::before,
.primary-menu-toggle span::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  position: relative;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.primary-menu-toggle span::before,
.primary-menu-toggle span::after {
  content: "";
  position: absolute;
}

.primary-menu-toggle span::before { top: -6px; }
.primary-menu-toggle span::after { top: 6px; }

.primary-menu {
  list-style: none;
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.primary-menu li a {
  display: block;
  padding: 10px 20px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text);
  border: 1px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.primary-menu li a:hover,
.primary-menu li a:focus-visible {
  color: var(--color-accent);
}

.primary-menu li.current-menu-item > a,
.primary-menu li.current_page_item > a {
  background: var(--color-panel);
  border-color: var(--color-line);
  color: var(--color-accent);
}

/* =========================================================
   3. Hero / Startseiten-Triptychon
   ========================================================= */
.hero-triptych {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: var(--gap);
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding: 64px 24px;
  box-sizing: border-box;
}

/* Startseite: body als Flex-Spalte ueber die volle Bildschirmhoehe,
   die drei Kacheln fuellen exakt den Platz, der nach dem "Under
   Construction"-Balken und dem McMan-Icon noch uebrig ist (statt
   separat ihre eigenen 100vh zu beanspruchen, was zusammen mit den
   Elementen davor mehr als die Bildschirmhoehe ergeben und dadurch
   sowohl die Zentrierung verschieben als auch unnoetiges Scrollen
   verursachen wuerde). Dadurch sind die Kacheln auf normal hohen
   Bildschirmen zuverlaessig horizontal UND vertikal im sichtbaren
   Bereich zentriert, siehe README Abschnitt 5c. Auf kleinen/mobilen
   Bildschirmen, auf denen die gestapelten Kacheln ohnehin nicht auf
   einen Bildschirm passen, waechst body einfach ueber 100vh hinaus
   (normales Scrollen) - keine Aenderung gegenueber vorher. */
body.comes-homepage {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.comes-homepage .hero-triptych {
  flex: 1 0 auto;
}

.hero-panel {
  position: relative;
  flex: 0 1 auto;
  width: 100%;
  max-width: var(--panel-width);
  height: var(--panel-height);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: transparent;
  border-radius: var(--radius-card);
  box-shadow: var(--panel-shadow);
}

.hero-panel__image,
.hero-panel__video,
.hero-panel__image--hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.hero-panel__image {
  transition: opacity 0.5s ease, filter 0.5s ease;
}

.hero-panel__video,
.hero-panel__image--hover {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.hero-panel--game:hover .hero-panel__video,
.hero-panel--game:focus-within .hero-panel__video,
.hero-panel--game.is-active .hero-panel__video {
  opacity: 1;
}

.hero-panel--game:hover .hero-panel__image,
.hero-panel--game:focus-within .hero-panel__image,
.hero-panel--game.is-active .hero-panel__image {
  opacity: 0;
}

/* Wartebereich: echtes zweites Foto mit eingeschalteter Lampe blendet
   bei Hover/Fokus über das Normalbild (statt einer künstlichen CSS-
   Verlaufs-Ebene) - siehe assets/images/wartebereich-hover.jpg. */
.hero-panel--wait:hover .hero-panel__image--hover,
.hero-panel--wait:focus-within .hero-panel__image--hover,
.hero-panel--wait.is-active .hero-panel__image--hover {
  opacity: 1;
}

.hero-panel--access {
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================
   4. Zugangs-Karte (COMES Login)
   ---------------------------------------------------------
   Bewusste Ausnahme von der sonstigen "keine runden Ecken"-
   Vorgabe: dieser Login-Bereich orientiert sich 1:1 an der
   Original-Login-Maske auf downloads.comes-game.com (auf
   ausdruecklichen Kundenwunsch), inkl. abgerundeter Ecken,
   Logo und Eingabe-/Button-Optik.
   ========================================================= */
.access-card {
  position: absolute;
  inset: 0;
  background: #ffffff;
  color: #333333;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 26px;
  overflow-y: auto;
  border-radius: var(--radius-card);
  box-shadow: none;
}

.access-card__logo {
  display: block;
  width: 150px;
  max-width: 70%;
  height: auto;
  margin: 0 auto 18px;
}

.access-card__title {
  text-align: center;
  font-size: 1.4rem;
  color: #333333;
  margin: 0 0 18px;
}

.access-form label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #666666;
  margin-bottom: 6px;
}

.access-form__code {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 16px;
}

.access-form__code input {
  width: 100%;
  padding: 10px 4px;
  text-align: center;
  border: 1px solid #cccccc;
  border-radius: 6px;
  background: #f9f9f9;
  color: #222222;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.access-form__code input::placeholder {
  color: #b8b8b8;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.access-form__code input:focus {
  outline: none;
  border-color: #f5b400;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(245, 180, 0, 0.2);
}

.access-form input[type="email"] {
  width: 100%;
  padding: 12px;
  border: 1px solid #dddddd;
  border-radius: 8px;
  background: #ffffff;
  color: #222222;
  margin-bottom: 18px;
  font-size: 1rem;
}

.access-form input[type="email"]:focus {
  outline: none;
  border-color: #f5b400;
  box-shadow: 0 0 0 3px rgba(245, 180, 0, 0.2);
}

.access-form .btn {
  width: 100%;
  border-radius: 8px;
  background: #f5b400;
  border-color: #f5b400;
  color: #1a1a1a;
  text-transform: none;
  letter-spacing: normal;
}

.access-form .btn:hover,
.access-form .btn:focus-visible {
  background: #d99f00;
  border-color: #d99f00;
  color: #1a1a1a;
  transform: translateY(-1px);
}

.access-form__message {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  text-align: center;
}

.access-form__message:empty {
  margin-top: 0;
  padding: 0;
}

.access-form__message[data-state="ok"] {
  color: #155724;
  background: #d4edda;
  border: 1px solid #c3e6cb;
}

.access-form__message[data-state="error"] {
  color: #721c24;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
}

@media (max-width: 480px) {
  .access-card {
    padding: 24px 18px;
  }
}

/* =========================================================
   5. Generische Seiteninhalte (page.php, Kontakt, Entertainment)
   ========================================================= */
.page-header {
  padding: 64px 0 24px;
  border-bottom: 1px solid var(--color-line);
}

.page-header h1 {
  font-size: clamp(2rem, 4vw, 3rem);
}

.page-content {
  padding: 48px 0 96px;
}

.page-content .container {
  max-width: 900px;
}

.page-content h2 {
  margin-top: 1.6em;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: var(--gap);
  align-items: start;
  margin-bottom: 48px;
}

.contact-block {
  background: var(--color-panel);
  padding: 40px;
  display: grid;
  gap: 12px;
  height: 100%;
}

.contact-block h2 {
  margin-bottom: 4px;
}

.contact-block a {
  color: var(--color-accent);
}

.contact-subpages {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--color-line);
}

.contact-subpages ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.contact-subpages a {
  color: var(--color-text);
  opacity: 0.8;
  text-decoration: underline;
}

.contact-subpages a:hover {
  opacity: 1;
}

/* =========================================================
   5b. Kontaktformular
   ========================================================= */
.contact-form-panel {
  background: var(--color-panel);
  padding: 40px;
}

.contact-form-panel h2 {
  margin-top: 0;
  margin-bottom: 20px;
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.contact-form__field {
  margin-bottom: 20px;
}

.contact-form__field label,
.contact-form__consent label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.contact-form__field input[type="text"],
.contact-form__field input[type="email"],
.contact-form__field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-line);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text);
  font-family: inherit;
  font-size: 1rem;
  border-radius: var(--radius);
}

.contact-form__field textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form__field input:focus,
.contact-form__field textarea:focus,
.contact-form__consent input:focus-visible {
  outline: none;
  border-color: var(--color-accent);
}

.contact-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 24px;
}

.contact-form__consent input[type="checkbox"] {
  margin-top: 4px;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
}

.contact-form__consent label {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
}

.contact-form__consent a {
  color: var(--color-accent);
}

.contact-form .btn {
  width: 100%;
}

.contact-form__message {
  margin-top: 16px;
  font-size: 0.9rem;
  text-align: center;
}

.contact-form__message[data-state="ok"] { color: #8fd98f; }
.contact-form__message[data-state="error"] { color: #f2b8b8; }

@media (max-width: 860px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-form__row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Entertainment: grosse einzelne Spiel-Kachel wiederverwendet die Hero-Panel-Komponente */
.entertainment-feature {
  height: 70vh;
  min-height: 480px;
  margin-bottom: 48px;
}

.entertainment-feature .hero-panel {
  border: none;
  width: 100%;
  max-width: none;
  height: 100%;
}

/* =========================================================
   5c. Entertainment-Demoseite
   (McMan-Showcase, Block-Puzzle-Demospiel, Angebote)
   ========================================================= */
.demo-section {
  border-top: 1px solid var(--color-line);
}

.demo-section--alt {
  background: var(--color-bg-dark);
}

.demo-section-header {
  max-width: 720px;
  margin-bottom: 32px;
}

.demo-section-header h2 {
  margin-bottom: 8px;
}

.demo-section-header p {
  color: var(--color-text-muted);
  margin: 0;
}

/* McMan-Showcase */
.mcman-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: center;
}

.mcman-showcase__media {
  height: 320px;
  max-width: none;
}

.mcman-showcase__text p {
  color: var(--color-text-muted);
  margin-top: 0;
}

/* Block-Puzzle */
.block-puzzle {
  display: grid;
  grid-template-columns: auto minmax(220px, 280px);
  gap: 32px;
  justify-content: center;
  align-items: start;
}

.block-puzzle__board-wrap {
  position: relative;
  line-height: 0;
}

.block-puzzle__canvas {
  background: #1a1f1b;
  border: 1px solid var(--color-line);
  display: block;
}

.block-puzzle__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  text-align: center;
  padding: 24px;
}

.block-puzzle__overlay[hidden] {
  display: none;
}

.block-puzzle__overlay p {
  margin: 0;
  font-weight: 700;
  font-size: 1.1rem;
}

.block-puzzle__side {
  display: grid;
  gap: 20px;
}

.block-puzzle__side .btn {
  width: 100%;
}

.block-puzzle__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: var(--color-panel);
  padding: 16px;
  text-align: center;
}

.block-puzzle__stats span {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.block-puzzle__stats strong {
  font-size: 1.3rem;
}

.block-puzzle__next {
  background: var(--color-panel);
  padding: 16px;
  text-align: center;
}

.block-puzzle__next span {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.block-puzzle__next canvas {
  background: #1a1f1b;
  border: 1px solid var(--color-line);
}

.block-puzzle__help {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0;
}

.block-puzzle__touch {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.block-puzzle__touch button {
  padding: 14px 0;
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  color: var(--color-text);
  font-size: 1.1rem;
  cursor: pointer;
}

.block-puzzle__touch button:active {
  background: var(--color-bg-dark);
}

.block-puzzle__touch [data-block-puzzle-control="drop"] {
  grid-column: span 3;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (hover: none) {
  .block-puzzle__touch {
    display: grid;
  }
}

/* Angebote / individuelle Lösungen */
.offers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap);
  margin-bottom: 32px;
}

.offer-card {
  background: var(--color-panel);
  padding: 32px 28px;
}

.offer-card h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.15rem;
}

.offer-card p {
  margin: 0;
  color: var(--color-text-muted);
}

.offers-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: var(--color-bg-dark);
  padding: 24px 32px;
}

.offers-cta p {
  margin: 0;
  font-weight: 600;
}

@media (max-width: 780px) {
  .mcman-showcase {
    grid-template-columns: 1fr;
  }

  .mcman-showcase__media {
    height: 240px;
  }

  .block-puzzle {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .block-puzzle__canvas {
    width: 100%;
    height: auto;
  }
}

/* =========================================================
   6. Footer
   ========================================================= */
.site-footer {
  background: var(--color-bg-dark);
  border-top: 1px solid var(--color-line);
  padding: 48px 0 24px;
}

.site-footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  margin-bottom: 32px;
}

.site-footer address {
  font-style: normal;
  color: var(--color-text-muted);
  line-height: 1.7;
}

.site-footer address a {
  color: var(--color-text);
}

.site-footer nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.site-footer nav a {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.site-footer nav a:hover {
  color: var(--color-accent);
}

.site-footer__bottom {
  border-top: 1px solid var(--color-line);
  padding-top: 20px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* Icon oben rechts auf JEDER Seite (nicht nur der Startseite):
   McMan-Kopf-Logo, dient als einziger Link zurück zur Startseite - ein
   normaler Header mit COMES-Logo/Hauptmenü gibt es nicht mehr
   (Kundenwunsch 03.11.). Bewusst im normalen Seitenfluss positioniert
   (nicht fixed) und dadurch immer direkt unter dem "Under
   Construction"-Balken (siehe inc/under-construction.php) - nie
   darüber/darunter versetzt, egal wie hoch der Balken gerade ist.
   Bewusst nicht auf --container-Breite begrenzt, sondern rechtsbündig
   über die volle Seitenbreite (Kundenwunsch). Hover-Effekt ist bewusst
   ein leichter, heller Schatten statt eines Farbwechsels. Siehe README
   Abschnitt 5c. */
.home-icon {
  position: relative;
  display: flex;
  justify-content: flex-end;
  padding: 16px 20px 0;
}

.home-icon__link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.home-icon__img {
  display: block;
  height: 32px;
  width: auto;
  transition: filter 0.2s ease;
}

.home-icon__link:hover .home-icon__img,
.home-icon__link:focus-visible .home-icon__img {
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 16px rgba(244, 244, 242, 0.85));
}

/* Rechtliche Leiste unten links auf der Startseite (Impressum,
   Datenschutzerklärung, Cookies, AGB). Fest positioniert am unteren
   Bildschirmrand, dauerhaft sichtbar (kein Scroll-Verhalten mehr,
   Kundenwunsch). Der schmale "Griff" (.legal-bar__handle) steht immer
   da; die eigentliche Linkliste klappt darüber auf, bei Hover
   (Desktop) bzw. per Tap (Touch). Optik wie das frühere Dropdown:
   dunkles Panel mit Schatten, bewusst ohne Rahmenlinien. */
.legal-bar {
  position: fixed;
  left: 20px;
  bottom: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.legal-bar__handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 24px;
  padding: 0;
  /* Etwas heller als --color-panel, da dieses dem Seitenhintergrund
     (site-background.jpg) sehr aehnlich ist und der Griff sonst darin
     optisch verschwindet - siehe README Abschnitt 5c. */
  background: #545d56;
  border: none;
  border-radius: 8px 8px 0 0;
  box-shadow: var(--panel-shadow), 0 0 0 1px rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.legal-bar__handle-bar {
  /* Deutliche, kraeftige graue Linie statt eines blassen, kaum
     sichtbaren Strichs - dadurch auf dem dunklen Hintergrund jederzeit
     klar erkennbar, nicht erst bei genauem Hinsehen. */
  display: block;
  width: 34px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-text-muted);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, width 0.2s ease;
}

.legal-bar__handle:hover .legal-bar__handle-bar,
.legal-bar__handle:focus-visible .legal-bar__handle-bar {
  background: var(--color-text);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
  width: 42px;
}

.legal-bar__panel {
  position: absolute;
  left: 0;
  bottom: 100%;
  min-width: 220px;
  background: var(--color-panel);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  box-shadow: var(--panel-shadow);
  padding: 16px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.legal-bar:hover .legal-bar__panel,
.legal-bar:focus-within .legal-bar__panel,
.legal-bar.is-open .legal-bar__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.legal-bar__panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.legal-bar__panel a {
  display: block;
  padding: 10px 24px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.legal-bar__panel a:hover {
  color: var(--color-accent);
}

/* =========================================================
   7. Responsive
   ========================================================= */
@media (max-width: 860px) {
  .primary-menu-toggle {
    display: flex;
  }

  .primary-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--color-bg-dark);
    border-bottom: 1px solid var(--color-line);
    display: none;
    padding: 8px 24px 16px;
  }

  .primary-menu.is-open {
    display: flex;
  }

  .hero-triptych {
    padding: 40px 20px;
  }

  .hero-panel {
    width: 100%;
    max-width: var(--panel-width);
  }

  .entertainment-feature {
    height: auto;
  }

  .entertainment-feature .hero-panel {
    min-height: 70vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-panel__image,
  .hero-panel__video,
  .hero-panel__image--hover,
  .btn {
    transition: none !important;
  }
}

/* =========================================================
   9. Download-Center (nach Login per Zugangscode)
   ========================================================= */

/* Dunkler Hero-Kopf, an das Original auf downloads.comes-game.com
   angelehnt (dort: Vollbild-Hintergrundbild + Overlay). Hier bewusst
   ohne das Platzhalter-Wasserzeichenbild, dafuer mit den echten
   Theme-Farben, damit es zum Rest der Seite passt. */
.download-hero {
  background: linear-gradient(160deg, var(--color-bg-dark) 0%, #23281f 100%);
  border-bottom: 3px solid var(--color-accent);
  padding: 56px 0;
}

.download-hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.download-hero__title h1 {
  margin: 0;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
}

.download-hero__title p {
  margin: 6px 0 0;
  color: var(--color-text-muted);
}

.download-logout {
  white-space: nowrap;
}

.download-section {
  padding: 64px 0 96px;
}

.download-error {
  background: rgba(200, 40, 40, 0.12);
  border: 1px solid rgba(200, 40, 40, 0.4);
  color: #f2b8b8;
  padding: 16px 20px;
  margin-bottom: 32px;
}

.download-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gap);
  max-width: 820px;
  margin-inline: auto;
}

.download-card {
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  padding: 48px 32px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.download-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.download-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  color: var(--color-accent);
}

.download-card__icon--mac {
  color: var(--color-text);
}

.download-card h3 {
  margin-top: 0;
  font-size: 1.4rem;
}

.download-card p {
  opacity: 0.85;
  margin-bottom: 28px;
}

.download-card .btn {
  width: 100%;
}

@media (max-width: 640px) {
  .download-hero__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}