/* start.css - Stilblatt der Startseite (Vertrag Y-894, BS-790, OA-606/OA-607/OA-608): eine Szene als Bild, darin der Glieks-Chat. Gestaltungsvorlage: Astra (Zweig astra/startseite-bild,
   Richtungen A, B, C, D), hier in Glieks-Form: Farbrollen als Eigenschaften (hell und dunkel), Szene und Chat-Rechteck kommen aus szenen_gen.js (skript/start/szene.js) als
   Klassen und Eigenschaften am Bild. Die Chat-Teile (Feld, Verlauf, Balken, Vorschläge, Dialoge) gestaltet die Chat-Komponente selbst (ui/start).
   Setzt voraus: schriften.css (IBM Plex Sans, Source Sans 3), bilder/logo/glieks.svg. Ohne Übergänge und ohne Bewegung. */

:root {
  --s-paper: #faf9f5; --s-ink: #185c61; --s-muted: #53696a; --s-line: #c6d5cf; --s-surface: #eef4f0; --s-white: #fff;
  --s-apricot: #ffab78; --s-schatten: #082f3540; --s-trenn: #ccd7cf; --s-flaeche: #eaf0e9; --s-akzent: #bd6232;
  --s-titel: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --s-text: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --s-paper: #123337; --s-ink: #e2ece4; --s-muted: #bbceca; --s-line: #486467; --s-surface: #25484b; --s-white: #193e42; --s-trenn: #456365; --s-flaeche: #21464a;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--s-paper); }
body.start { margin: 0; background: var(--s-paper); color: var(--s-ink); font: 17px/1.45 var(--s-text); -webkit-font-smoothing: antialiased; }
.start a { color: inherit; text-underline-offset: 4px; }
.start :focus-visible { outline: 3px solid var(--s-ink); outline-offset: 3px; }
.start-sprung { position: absolute; top: -90px; left: 8px; background: var(--s-paper); padding: 14px; z-index: 10; }
.start-sprung:focus { top: 0; }

/* Kopf (Y-914, OA-644/OA-647, Vorlage Astra astra/startseite-layout): Logo, drei Informationsreiter, Konto rechts; auf dem Handy Konto neben dem Logo, die drei Reiter in einer zweiten Zeile, kein verstecktes Menü. */
.start-kopf { min-height: 88px; padding: 18px clamp(24px, 4vw, 80px); display: flex; align-items: center; gap: clamp(30px, 5vw, 100px); border-bottom: 1px solid var(--s-trenn); }
.start-logo { display: block; width: 118px; height: 43px; flex: none; }
.start-logo img { display: block; width: 100%; height: auto; }
.start-kopf nav { display: flex; align-items: center; gap: 30px; }
.start-kopf nav a { font-size: 16px; white-space: nowrap; min-height: 44px; display: flex; align-items: center; text-decoration: none; }
.start-kopf nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.start-konto { margin-left: auto; }
.start-kopf .start-eroeffnen { background: var(--s-apricot); color: #173c3e; border-radius: 5px; padding: 0 18px; gap: 20px; }
.start-kopf .start-eroeffnen:hover { text-decoration: none; filter: brightness(0.96); }
@media (prefers-color-scheme: dark) {
  .start-logo { background: var(--s-ink); -webkit-mask: url("../bilder/logo/glieks.svg") center / contain no-repeat; mask: url("../bilder/logo/glieks.svg") center / contain no-repeat; }
  .start-logo img { opacity: 0; }
}

/* Bühne: das Bild liegt in einer beschnittenen Fläche; szene.js bestimmt Größe und Versatz so, dass der Bildschirm des Geräts im Bild eine bedienbare Mindestgröße hat, und setzt den Chat
   (Prozent des Bildes) genau auf diesen Bildschirm. Ohne Skript gilt das Seitenverhältnis der ersten Szene. */
.start-buehne { position: relative; width: 100%; margin: 0; overflow: hidden; aspect-ratio: 1280 / 801; background: var(--s-surface); }
.start-bild { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1280 / 801; }
.start-bild picture { display: contents; }
.start-szene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Y-925 (a): ist das Bild kleiner als die Fensterbreite (niedriges Fenster), laeuft es links und rechts weich in die Buehnenfarbe aus. */
.start-bild--baender .start-szene { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%); }
.start-chat {
  position: absolute; z-index: 2; box-shadow: 0 0 0 2px var(--s-paper);
  left: calc(var(--cl, 33.91) * 1%); top: calc(var(--co, 12.73) * 1%); width: calc(var(--cb, 32.19) * 1%); height: calc(var(--ch, 71.41) * 1%);
  display: flex; flex-direction: column; justify-content: center; overflow: auto; overscroll-behavior: contain;
  background: var(--s-paper); color: var(--s-ink); border-radius: var(--cr, 8px); padding: clamp(14px, 1.9vw, 24px) clamp(14px, 1.8vw, 22px);
}
/* NB-972 (Owner 08.10.2026): der Bildschirm des Geraets bleibt auch im dunklen Modus hell - ein Bildschirm im Foto ist hell, Petrol wirkt dort "sehr gruen". */
@media (prefers-color-scheme: dark) {
  .start-chat {
    --s-paper: #faf9f5; --s-ink: #185c61; --s-muted: #53696a; --s-line: #c6d5cf; --s-surface: #eef4f0; --s-white: #fff;
    color-scheme: light;
  }
}
.start-chat h1 { margin: 0 0 18px; font: 500 clamp(21px, 1.9vw, 27px)/1.16 var(--s-titel); letter-spacing: -0.02em; }
.start-gespraech .start-chat { justify-content: flex-start; }
.start-gespraech .start-insel { flex: 1 1 auto; }
/* Läuft das Gespräch, braucht der Bildschirm den Platz: der Kernsatz bleibt für Vorlesegeräte und Suchmaschinen im Text, ist aber nicht mehr sichtbar. */
.start-gespraech .start-chat h1 { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); }
.start-gespraech .start-chat { padding-block: 16px; }
.start-insel { min-height: 0; display: flex; flex-direction: column; }
.start-platz .start-feld { border: 1px solid var(--s-line); border-radius: 12px; background: var(--s-white); min-height: 86px; padding: 14px; color: var(--s-muted); }
.start-ohnejs { margin: 12px 0 0; }

/* Unterer Verlauf (Nachtrag OA-644): das Foto geht in die Seitenfarbe über, hell wie dunkel; nimmt keine Zeigerereignisse an. Ist das Bild vergrößert und beschnitten, bleibt der Verlauf kurz, damit er den Bildschirm nicht berührt. */
.start-buehne::after { content: ""; position: absolute; inset: auto 0 0; height: 8%; background: linear-gradient(to bottom, transparent 0%, var(--s-paper) 100%); pointer-events: none; z-index: 1; }
.start-buehne--zoom::after { height: min(8%, 32px); }

/* Abschnitte darunter: Hook, Erklärung, Vertrauen, Teamangebot */
.start-rubrik { font-size: 14px; font-weight: 500; letter-spacing: 0.045em; margin: 0 0 20px; }
.start a.start-textlink { display: inline-flex; gap: 24px; min-height: 44px; align-items: center; border-bottom: 1px solid currentColor; font-size: 17px; margin-top: 12px; text-decoration: none; }
.start-auftakt h2, .start-vertrauen h2, .start-schluss h2 { font-family: var(--s-titel); font-weight: 500; letter-spacing: -0.035em; font-size: clamp(28px, 3vw, 52px); line-height: 1.16; margin: 0; }
.start-auftakt h2 span { color: var(--s-akzent); }
.start-auftakt { padding: 80px clamp(24px, 7vw, 140px) 88px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 8vw; align-items: center; border-bottom: 1px solid var(--s-trenn); }
.start-erklaerung { font-size: 21px; max-width: 470px; }
.start-erklaerung p { margin: 0 0 12px; }
.start-vertrauen { padding: 64px clamp(24px, 7vw, 140px); background: var(--s-flaeche); }
.start-vertrauen__innen { display: grid; grid-template-columns: 1.5fr 1fr; gap: 8vw; }
.start-vertrauen__innen > div { font-size: 22px; max-width: 470px; }
.start-vertrauen__innen p { margin: 0; }
.start-schluss { padding: 70px clamp(24px, 7vw, 140px); display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.start-schluss h2 { font-size: clamp(27px, 2.5vw, 40px); }
.start-schluss .start-textlink { font-size: 18px; gap: 28px; margin-top: 0; flex: none; }

/* Fuß */
.start-fuss { border-top: 1px solid var(--s-trenn); padding: 25px clamp(24px, 4vw, 80px); display: flex; justify-content: space-between; align-items: center; gap: 30px; color: var(--s-muted); font-size: 14px; }
.start-fuss nav { display: flex; flex-wrap: wrap; gap: 0 24px; }
.start-fuss a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.start-fuss a:hover { text-decoration: underline; text-underline-offset: 5px; }

@media (max-width: 1000px) {
  .start-kopf { gap: 28px; padding-inline: 24px; }
  .start-kopf nav { gap: 18px; }
  .start-erklaerung, .start-vertrauen__innen > div { font-size: 19px; }
  .start-fuss { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* Handy: Bühne und Bild bestimmt szene.js (Hochformat-Bild mit ganzem Gerät, volle Breite); hier nur die Maße der Seite. */
@media (max-width: 700px) {
  body.start { font-size: 17px; }
  .start-kopf { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; padding: 12px 18px 0; min-height: 112px; }
  .start-logo { width: 88px; height: 32px; }
  .start-kopf .start-konto { grid-column: 2; grid-row: 1; gap: 13px; justify-content: flex-end; }
  .start-kopf nav a { font-size: 14px; }
  .start-kopf .start-eroeffnen { padding: 0 10px; gap: 0; }
  .start-pfeil { display: none; }
  .start-kopf .start-reiter { grid-row: 2; grid-column: 1 / -1; justify-content: space-between; border-top: 1px solid var(--s-trenn); gap: 12px; min-height: 44px; }
  .start-buehne::after { height: 18%; }
  .start-buehne--zoom::after { height: min(18%, 32px); }
  .start-chat { padding: 20px 18px; }
  /* NB-974 (Owner 08.10.2026): ist das Gerät im Foto abgeschnitten (nur Szenen ohne ganzes Gerät), macht ein gezeichneter Geräterand mit Kamerapunkt das Tablet erkennbar. */
  .start-bild--rand .start-chat { box-shadow: 0 0 0 2px #ffffff80, 0 0 0 12px #17191a, 0 0 0 13px #3b4142, 0 10px 28px 14px #0000004d; }
  .start-bild--rand::after {
    content: ""; position: absolute; z-index: 3; width: 6px; height: 6px; border-radius: 50%; background: #3b4142;
    left: calc((var(--cl, 33.91) + var(--cb, 32.19) / 2) * 1% - 3px); top: calc(var(--co, 12.73) * 1% - 9px);
  }
  .start-chat h1 { font-size: 24px; margin-bottom: 22px; line-height: 1.2; }
  .start-rubrik { font-size: 13px; margin-bottom: 16px; }
  .start-auftakt { grid-template-columns: 1fr; padding: 40px 24px 44px; gap: 26px; }
  .start-auftakt h2, .start-vertrauen h2, .start-schluss h2 { font-size: 30px; }
  .start-erklaerung { font-size: 19px; }
  .start-vertrauen { padding: 36px 24px 40px; }
  .start-vertrauen__innen { grid-template-columns: 1fr; gap: 22px; }
  .start-vertrauen__innen h2 br { display: none; }
  .start-schluss { padding: 40px 24px; flex-direction: column; align-items: flex-start; gap: 23px; }
  .start-schluss h2 { font-size: 29px; }
  .start-fuss { padding: 22px 24px; gap: 6px; }
  .start-fuss nav { gap: 0 20px; font-size: 13px; }
}

/* Tischdetails (Y-938, BS-838): Bedienfelder und Bewegung der kleinen Überraschungen auf den schrägen Tischen; nur Querformat am Rechner (skript/start/tischdetails.js). */
.tisch-ebene { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.tisch-ebene > * { pointer-events: auto; }
.tisch-schicht { position: absolute; display: block; pointer-events: none !important; }
.tisch-sprite { position: absolute; background-repeat: no-repeat; pointer-events: none !important; transform-origin: 50% 90%; -webkit-mask-image: radial-gradient(ellipse closest-side, #000 82%, transparent 100%); mask-image: radial-gradient(ellipse closest-side, #000 82%, transparent 100%); }
.tisch-sprite[hidden] { display: none; }
.tisch-feld { position: absolute; transform: translate(-50%, -50%); margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 12px; -webkit-tap-highlight-color: transparent; }
.tisch-feld--rund { border-radius: 50%; }
.tisch-feld:focus-visible { outline: 3px solid #fff; box-shadow: 0 0 0 6px #17191a; }
.tisch-hinweis { position: absolute; transform: translate(-50%, 0); margin: 0; padding: 8px 14px; max-width: 280px; border-radius: 999px; background: #17191a; color: #fff; font: 500 15px/1.3 var(--s-text, system-ui, sans-serif); text-align: center; box-shadow: 0 6px 18px #0000004d; }
.tisch-hinweis[hidden], .tisch-spiel[hidden], .tisch-pille[hidden] { display: none; }
.tisch-pille { position: absolute; transform: translate(-50%, -50%); min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: #17191a; color: #fff; font: 500 15px/1 var(--s-text, system-ui, sans-serif); cursor: pointer; }
.tisch-pille:focus-visible, .tisch-spiel__zelle:focus-visible { outline: 3px solid #fff; box-shadow: 0 0 0 6px #17191a; }
.tisch-spiel { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px; box-sizing: border-box; border-radius: 28px; background: #bfd4b4; color: #1f2a1c; box-shadow: 0 10px 28px #0000005c, inset 0 0 0 6px #2f3a2c; }
.tisch-spiel__zeile { margin: 0; font: 600 16px/1.2 var(--s-text, system-ui, sans-serif); text-align: center; }
.tisch-spiel__gitter { display: grid; grid-template-columns: repeat(3, minmax(44px, 1fr)); gap: 6px; width: min(100%, 220px); }
.tisch-spiel__zelle { aspect-ratio: 1; min-height: 44px; border: 2px solid #2f3a2c; border-radius: 10px; background: #d7e6cd; color: #1f2a1c; font: 700 28px/1 var(--s-text, system-ui, sans-serif); cursor: pointer; }
.tisch-spiel__zelle:disabled { cursor: default; }
.tisch-spiel__leiste { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.tisch-spiel__leiste .tisch-pille { position: static; transform: none; }
.tisch-quiek { animation: tisch-quiek .42s ease-out; }
.tisch-huepfen { animation: tisch-huepfen .9s ease-in-out; }
.tisch-neigen { transform-origin: 50% 95%; animation: tisch-neigen 1.1s ease-in-out; }
.tisch-fahren { animation: tisch-fahren 2.6s ease-in-out; }
.tisch-klingeln { transform-origin: 50% 60%; animation: tisch-klingeln .12s linear infinite; }
@keyframes tisch-quiek { 0% { transform: scale(1); } 35% { transform: scale(1.12, .9); } 70% { transform: scale(.96, 1.08); } 100% { transform: scale(1); } }
@keyframes tisch-huepfen { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-9px); } 50% { transform: translateY(0); } 75% { transform: translateY(-6px); } }
@keyframes tisch-neigen { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-5deg); } 70% { transform: rotate(4deg); } }
@keyframes tisch-fahren { 0%, 100% { transform: translateX(0) rotate(0); } 45% { transform: translateX(16px) rotate(2deg); } 70% { transform: translateX(10px) rotate(-1deg); } }
@keyframes tisch-klingeln { 0% { transform: rotate(-.8deg); } 50% { transform: rotate(.8deg); } 100% { transform: rotate(-.8deg); } }
@media (max-width: 700px) { .tisch-ebene { display: none; } }
@media (prefers-reduced-motion: reduce) { .tisch-sprite { animation: none !important; display: none; } }

/* Umschalter "Ambiente" (Y-995, OA-772, Form von Astra: sachliche Ansicht v2): klein und nachrangig im Kopf, kein eigener Block. Zustand als Form (Schieber rechts, gefuellt = AN = mit Szene) UND Wort.
   Die Beschriftung steht in texte/de.json (start.ansicht.szene); AN = mit Szene (OA-773); Platz und Groesse sind hier leicht zu tauschen. Am Rechner ganz unten rechts im Kopf, ausserhalb des Flusses; auf dem Handy rechts neben der Datenzeile. */
.start-kopf .start-ansicht { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--s-muted); font: 400 12px/1 var(--s-text); cursor: pointer; white-space: nowrap; }
.start-ansicht__spur { position: relative; flex: none; width: 30px; height: 18px; border-radius: 20px; background: #a0aaa7; }
.start-ansicht__spur::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.start-ansicht[aria-checked="true"] .start-ansicht__spur { background: #185c61; }
.start-ansicht[aria-checked="true"] .start-ansicht__spur::after { left: 15px; }
.start-ansicht:hover .start-ansicht__wort { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 701px) {
  .start-kopf { position: relative; }
  .start-kopf .start-ansicht { position: absolute; right: clamp(24px, 4vw, 80px); bottom: 0; min-height: 26px; }
}
@media (max-width: 700px) {
  .start-kopf .g-vertrauen { padding-right: 96px; }
  .start-kopf .start-ansicht { grid-row: 3; grid-column: 1 / -1; justify-self: end; align-self: center; margin-bottom: 10px; z-index: 1; }
}

/* Sachliche Ansicht: dieselbe Seite, dieselben Texte, derselbe Aufbau - nur das Foto und der gezeichnete Geraeterand entfallen; der Chat bleibt, wo er ist, auf ruhiger Flaeche. */
html[data-ansicht="sachlich"] .start-bild { background: var(--s-surface); }
html[data-ansicht="sachlich"] .start-bild::after { display: none; }
html[data-ansicht="sachlich"] .start-chat { box-shadow: none; border-radius: 6px; }