/* Nur Webfassung – Startseite. Ergänzt app/renderer/styles.css, ändert sie nicht.
   Alles hier gilt zusätzlich zur App-Fassung; auf grossen Bildschirmen sieht die Seite aus wie in der App. */

/* «--dvh» = eine Hundertstel Fensterhöhe (Erklärung in web-spiel.css; ältere Browser kennen dvh nicht, web-hoehe.js setzt die Höhe dort ein). */
:root { --dvh: 1vh; }
@supports (height: 1dvh) { :root { --dvh: 1dvh; } }

/* ── Zugang zu den Einstellungen: ein leiser Link am unteren Rand ─────────────── */
.home { position: relative; }

.webfuss {
  position: absolute;
  right: var(--hena-gutter);
  bottom: 8px;
  z-index: 4;
  padding: 8px 4px;
  border: 0;
  background: none;
  font: 400 12px/1 var(--megura-font-regular);
  letter-spacing: var(--megura-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--megura-fg-muted);
  opacity: .6;
  cursor: pointer;
  transition: opacity .3s var(--megura-ease), color .3s var(--megura-ease);
}
.webfuss:hover, .webfuss:focus-visible { opacity: 1; color: var(--megura-fg); }
.webfuss:focus-visible { outline: 2px solid var(--megura-color-accent); outline-offset: 3px; }

/* ── PIN-Abfrage ───────────────────────────────────────────────────────────── */
.pin {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0; /* Rückfall für Browser vor Chromium 87 (kennen «inset» nicht) */
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, .78);
}
.pin__panel {
  width: min(420px, 100%);
  padding: 28px;
  border: 1px solid var(--megura-border);
  border-radius: var(--megura-radius-md);
  background: var(--megura-bg-raised, #111);
}
.pin__kicker {
  margin: 0 0 6px;
  font: 400 .78rem/1 var(--megura-font-regular);
  letter-spacing: var(--megura-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--megura-color-sec);
}
.pin__titel { margin: 0; font: 400 1.9rem/1.05 var(--megura-font-display); color: var(--megura-fg); }
.pin__text { margin: 10px 0 18px; font: 400 1rem/1.4 var(--megura-font-light); color: var(--megura-fg-muted); }
.pin__feld {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--megura-border);
  border-radius: var(--megura-radius-md);
  background: #000;
  /* 16 px oder mehr: sonst zoomt das iPhone beim Antippen in die Seite hinein. */
  font: 400 18px/1.2 var(--megura-font-regular);
  color: var(--megura-fg);
}
.pin__feld:focus { outline: 2px solid var(--megura-color-accent); outline-offset: 1px; }
.pin__fehler { margin: 10px 0 0; font: 400 .95rem/1.3 var(--megura-font-regular); color: #ff6b5e; }
.pin__knoepfe { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }
.pin__knoepfe .megura-btn { min-height: 48px; }


/* ── Eine Einheit für die ganze Startseite: «--e» ────────────────────────────────
   Alle Masse der Spieleauswahl (Schrift, Knöpfe, Pfeile, Abstände) sind Vielfache von --e. Auf einem Handy und auf einem normalen
   Laptop ist --e = 1px: die Seite sieht aus wie bisher. Auf grossen Bildschirmen wächst --e mit, und alles wächst gleichmässig mit –
   darum ist die Startseite auf einem Samsung-Bildschirm im Hochformat (1080×1920 oder 2160×3840) dieselbe wie auf dem Handy,
   nur grösser, und nicht mehr eine winzige Karte in einer leeren Fläche.
     Querformat:  Entwurf 1920×1080 → --e = Fensterbreite/1920 oder Fensterhöhe/1080, je nachdem was kleiner ist, mindestens 1px.
     Hochformat:  Entwurf 390×693 (Handy, 9:16) → ebenso; ein breiteres Fenster (Tablet) wird von der Höhe begrenzt.
   Ältere Browser (vor Chromium 79) kennen max()/min() nicht und bleiben bei 1px. */
:root { --e: 1px; }
@supports (width: max(1px, 2px)) {
  @media (orientation: landscape) { :root { --e: max(1px, min(.052083vw, calc(.092593 * var(--dvh, 1vh)))); } }
  @media (orientation: portrait) { :root { --e: max(1px, min(.25641vw, calc(.1443 * var(--dvh, 1vh)))); } }
}

/* ── Die Karte: Breite und Höhe stehen immer ausdrücklich da ──────────────────────
   Kein aspect-ratio (Chromium vor 88 kennt es nicht, die Karte wäre dort 0 breit) und – in den älteren Browsern – keine
   Containereinheiten (cqw/cqh, ab Chromium 105): dort schätzt die Seite den freien Platz aus der Fensterhöhe (Kopf und Punkte
   brauchen rund 200 --e im Hochformat, 84 px im flachen Querformat, 400 --e im grossen Querformat). Wo es Containereinheiten gibt,
   misst die Karte den Platz des Karussells genau. --kb = Breite der Karte. */

/* ── Handy, Tablet, Samsung-Bildschirm hochkant und Handy quer: das Karussell mit Nachbarn links und rechts ──
   Ein Spiel steht gross in der Mitte, die Nachbarn schauen links und rechts hervor. Man wischt, tippt auf die
   Pfeile oder auf die Punkte. Die ganze Seite passt auf den Bildschirm, nichts muss gescrollt werden.
   Zwei Fälle: Hochformat (Karte steht, Bild oben, Text darunter) und Querformat mit wenig Höhe (Karte liegt,
   Bild links, Text rechts). Das Vorschaubild ist immer ganz zu sehen und wird nie angeschnitten. */
@media (orientation: portrait), (orientation: landscape) and (max-height: 520px) {
  :root { --hena-gutter: calc(18 * var(--e)); }

  .home {
    height: 100vh;
    height: calc(100 * var(--dvh, 1vh));
    padding: calc(18 * var(--e) + env(safe-area-inset-top)) var(--hena-gutter) calc(6 * var(--e) + env(safe-area-inset-bottom));
    gap: calc(10 * var(--e));
  }
  .home__eyebrow { font-size: calc(13.6 * var(--e)); }
  .home__title { font-size: clamp(calc(14 * var(--e)), calc((100vw - 2 * var(--hena-gutter)) / 15.5), calc(36.7 * var(--e))); }
  .home__intro { max-width: none; margin-top: calc(6 * var(--e)); font-size: calc(15 * var(--e)); }
  .home__status { position: absolute; left: var(--hena-gutter); bottom: calc(10 * var(--e) + env(safe-area-inset-bottom)); min-height: 0; max-width: 55%; font-size: calc(12.8 * var(--e)); }

  .karussell { animation: none; }
  .karussell__buehne {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  }
  .karussell__karte {
    max-width: none;
    border-radius: calc(18 * var(--e));
    /* Die Nachbarn rücken näher heran als am Mac (88 statt 110 Prozent), damit auf einem schmalen Bildschirm ein Stück von ihnen zu sehen bleibt. */
    transform: translate(-50%, -50%) translateX(calc(var(--versatz, 0) * 88%)) translateX(var(--zug, 0px)) scale(var(--groesse, 1));
  }
  .karussell__bild { object-fit: contain; background: #000; }
  .karussell__folie { display: none; }
  .karussell__text { gap: calc(4 * var(--e)); }
  .karussell__nummer { font-size: calc(12.5 * var(--e)); }
  .karussell__marke { top: calc(14 * var(--e)); right: calc(14 * var(--e)); padding: calc(5 * var(--e)) calc(12 * var(--e)); font-size: calc(10.9 * var(--e)); }
  .karussell__karte .karussell__cta {
    margin-top: calc(9 * var(--e));
    min-height: calc(38 * var(--e));
    padding: calc(10 * var(--e)) calc(20 * var(--e));
    font-size: calc(14 * var(--e));
  }

  .karussell__pfeil { width: calc(42 * var(--e)); height: calc(42 * var(--e)); }
  .karussell__pfeil svg { width: calc(18 * var(--e)); height: calc(18 * var(--e)); }
  .karussell__pfeil--zurueck { left: calc(-6 * var(--e)); }
  .karussell__pfeil--vor { right: calc(-6 * var(--e)); }
  .karussell__punkte { min-height: calc(26 * var(--e)); gap: calc(10 * var(--e)); }
  .karussell__punkt { width: calc(9 * var(--e)); height: calc(9 * var(--e)); }
  .karussell__punkt[aria-selected='true'] { width: calc(28 * var(--e)); }

  /* Der Zugang zu den Einstellungen sitzt in derselben Zeile wie die Punkte, rechts unten. */
  .webfuss { right: var(--hena-gutter); bottom: calc(2 * var(--e) + env(safe-area-inset-bottom)); padding: calc(12 * var(--e)) calc(4 * var(--e)); font-size: calc(12 * var(--e)); }
}

/* Hochformat (jede Breite): Karte steht, 3:4, Bild oben (16:10), Text darunter. */
@media (orientation: portrait) {
  .karussell__karte {
    --kb: min(calc(.86 * (100vw - 36 * var(--e))), calc(.75 * (100 * var(--dvh, 1vh) - 200 * var(--e))), calc(560 * var(--e)));
    width: var(--kb);
    height: calc(var(--kb) * 4 / 3);
  }
  .karussell__bild { height: calc(var(--kb) * .625); }
  .karussell__text { left: calc(16 * var(--e)); right: calc(16 * var(--e)); bottom: calc(16 * var(--e)); }
  .karussell__titel { font-size: calc(23 * var(--e)); }
  .karussell__beschrieb { font-size: calc(14.4 * var(--e)); }
}
@supports (width: 1cqw) {
  @media (orientation: portrait) {
    .karussell { container-type: size; }
    .karussell__karte { --kb: min(86cqw, 75cqh, calc(560 * var(--e))); }
  }
}

/* Querformat mit wenig Höhe (Handy quer): Titel in einer Zeile, ohne Einleitung; Karte liegt (2,1:1), Bild links, Text rechts. */
@media (orientation: landscape) and (max-height: 520px) {
  .home { padding-top: calc(10px + env(safe-area-inset-top)); gap: 6px; }
  .home__title { font-size: clamp(1.1rem, calc((100vw - 2 * var(--hena-gutter)) / 15.5), 1.6rem); line-height: 1.1; letter-spacing: -.02em; }
  .home__intro, .home__eyebrow { display: none; }

  .karussell__karte {
    --kb: min(calc(.74 * (100vw - 36px)), calc(2.1 * (100 * var(--dvh, 1vh) - 84px)), 760px);
    width: var(--kb);
    height: calc(var(--kb) / 2.1);
  }
  .karussell__bild { top: 50%; width: 62%; height: calc(var(--kb) * .3875); transform: translateY(-50%); }
  .karussell__text { left: calc(62% + 16px); right: 14px; top: 50%; bottom: auto; transform: translateY(-50%); gap: 3px; }
  .karussell__titel { font-size: clamp(1.05rem, 2.7vw, 1.7rem); }
  .karussell__beschrieb { font-size: clamp(.78rem, 1.7vw, 1rem); line-height: 1.3; }
  .karussell__karte .karussell__cta { margin-top: 6px; }
}
@supports (width: 1cqw) {
  @media (orientation: landscape) and (max-height: 520px) {
    .karussell { container-type: size; }
    .karussell__karte { --kb: min(74cqw, 210cqh, 760px); }
    .karussell__titel { font-size: clamp(1.05rem, 2.7cqw, 1.7rem); }
    .karussell__beschrieb { font-size: clamp(.78rem, 1.7cqw, 1rem); }
  }
}

/* ── Querformat ab 521 px Höhe (Laptop, Fernseher, grosse Bildschirme): wie in der Mac-App, auf grossen Bildschirmen gleichmässig grösser ──
   Die Karte ist fast quadratisch (103:100), höchstens 700 --e hoch und höchstens 46 % (bis 720 px Höhe 42 %) der Breite. */
@media (orientation: landscape) and (min-height: 521px) {
  .karussell__karte {
    --bmax: 46;
    --kh: min(calc(100 * var(--dvh, 1vh) - 400 * var(--e)), calc(700 * var(--e)));
    --kb: min(calc(var(--kh) * 1.03), calc(var(--bmax) * .01 * (100vw - 2 * var(--hena-gutter))));
    width: var(--kb);
    height: var(--kh);
    max-width: none;
  }
}
@media (orientation: landscape) and (min-height: 521px) and (max-height: 720px) {
  .karussell__karte { --bmax: 42; }
}
@supports (width: 1cqw) {
  @media (orientation: landscape) and (min-height: 521px) {
    .karussell { container-type: size; }
    .karussell__karte {
      --kh: min(100cqh, calc(700 * var(--e)));
      --kb: min(calc(var(--kh) * 1.03), calc(var(--bmax) * 1cqw));
    }
  }
}

/* Ab 721 px Höhe wachsen auch Schrift, Knöpfe und Abstände mit (bis 720 px gelten die Masse der Mac-App unverändert). */
@media (orientation: landscape) and (min-height: 721px) {
  :root { --hena-gutter: clamp(calc(32 * var(--e)), 6.5vw, calc(200 * var(--e))); }
  .home { padding: calc(60 * var(--e)) var(--hena-gutter) calc(34 * var(--e)); gap: calc(22 * var(--e)); }
  .home__eyebrow { font-size: calc(13.6 * var(--e)); }
  .home__title { font-size: clamp(calc(32 * var(--e)), calc((100vw - 2 * var(--hena-gutter)) / 15.5), calc(54 * var(--e))); }
  .home__intro { max-width: calc(570 * var(--e)); margin-top: calc(10 * var(--e)); font-size: calc(19 * var(--e)); }
  .home__status { font-size: calc(14.4 * var(--e)); }

  .karussell__karte { border-radius: calc(18 * var(--e)); }
  .karussell__text { left: clamp(calc(20 * var(--e)), 4%, calc(38 * var(--e))); right: clamp(calc(20 * var(--e)), 4%, calc(38 * var(--e))); bottom: clamp(calc(16 * var(--e)), 3.4%, calc(30 * var(--e))); gap: calc(5 * var(--e)); }
  .karussell__nummer { font-size: calc(12.5 * var(--e)); }
  .karussell__titel { font-size: clamp(calc(24 * var(--e)), 2.6vw, calc(36.8 * var(--e))); }
  .karussell__beschrieb { font-size: clamp(calc(14.4 * var(--e)), 1.15vw, calc(16.8 * var(--e))); }
  .karussell__marke { top: clamp(calc(14 * var(--e)), 3%, calc(26 * var(--e))); right: clamp(calc(14 * var(--e)), 3%, calc(26 * var(--e))); padding: calc(5 * var(--e)) calc(12 * var(--e)); font-size: calc(10.9 * var(--e)); }
  .karussell__karte .karussell__cta { margin-top: calc(9 * var(--e)); padding: calc(10 * var(--e)) calc(20 * var(--e)); font-size: calc(14 * var(--e)); }

  .karussell__pfeil { width: calc(58 * var(--e)); height: calc(58 * var(--e)); }
  .karussell__pfeil svg { width: calc(22 * var(--e)); height: calc(22 * var(--e)); }
  .karussell__punkte { gap: calc(10 * var(--e)); min-height: calc(10 * var(--e)); }
  .karussell__punkt { width: calc(9 * var(--e)); height: calc(9 * var(--e)); }
  .karussell__punkt[aria-selected='true'] { width: calc(28 * var(--e)); }
  .webfuss { bottom: calc(8 * var(--e)); font-size: calc(12 * var(--e)); }
}