/* sgully.app: Farben aus ios/App/Theme.swift. Keine externen Schriften. Einziges Skript: assets/sim.js.
   Bei Änderungen die Zahl in ?v= in index.html, en/index.html und 404.html erhöhen (7 Tage Cache). */

:root {
  --sky: #D7E8F1;
  --sky-2: #EAF2F6;
  --sea-1: #A9CDE0;
  --sea-2: #8FBFD8;
  --sand: #F3E7D3;
  --panel: rgba(255, 255, 255, .6);
  --chip: rgba(255, 255, 255, .6);
  --ink: #1D2840;
  --ink-2: #3D4860;
  --head: #22304F;
  --link: #2B5E80;
  --focus: #2B5E80;
  --line: rgba(29, 40, 64, .14);
  --field: #FFFFFF;
  --field-line: rgba(29, 40, 64, .55);
  --seg: rgba(29, 40, 64, .07);   /* Rahmen über 3:1 zum Grund (WCAG 1.4.11) */
  --warn: #B5462A;
  --btn: #22304F;
  --btn-ink: #FFFFFF;
  --bubble: #FFFFFF;
  --shadow: 0 6px 20px rgba(29, 40, 64, .10);
  --round: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 5vw, 32px);
  --sea-h: clamp(44px, 10vw, 72px);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sky: #0F1729;
    --sky-2: #1B2741;
    --sea-1: #2B5E80;
    --sea-2: #234D6A;
    --sand: #29261F;
    --panel: rgba(255, 255, 255, .06);
    --chip: rgba(255, 255, 255, .08);
    --ink: #EEF3F6;
    --ink-2: #C9D2DC;
    --head: #EEF3F6;
    --link: #A9CDE0;
    --focus: #F2B33D;
    --line: rgba(238, 243, 246, .16);
    --field: rgba(255, 255, 255, .07);
    --field-line: rgba(238, 243, 246, .42);
    --seg: rgba(255, 255, 255, .07);
    --warn: #F0A08A;
    --btn: #A9CDE0;
    --btn-ink: #0F1729;
    --bubble: #F7FAFC;
    --shadow: 0 6px 20px rgba(0, 0, 0, .35);
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Safari färbt Statusleiste und den Bereich unter der Werkzeugleiste mit dem Hintergrund von body: also Himmel,
   oben wie unten (der Fuß ist ebenfalls Himmel). Der Sand liegt nur auf .beach. */
html { background: var(--sky); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sky);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--text);
}

img { display: block; max-width: 100%; height: auto; }

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  overflow-wrap: anywhere;
}
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Eine Achse: alle Spalten mittig, Überschriften der Abschnitte mittig */
.wrap { max-width: 40rem; margin-inline: auto; padding-inline: var(--gutter); }
.wide { max-width: 62rem; }
.sec-h {
  margin: 0;
  color: var(--head);
  font: 800 clamp(1.625rem, 6vw, 2.125rem)/1.2 var(--round);
  text-align: center;
  text-wrap: balance;
}
.sec-lead { max-width: 34rem; margin: 12px auto 0; color: var(--ink-2); text-align: center; text-wrap: pretty; }

/* Kopf: nur der Sprachwechsel, auf dem Himmel */
.top { background: var(--sky); padding-top: 12px; }
.top .wrap { display: flex; justify-content: flex-end; max-width: 62rem; }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--chip);
  color: var(--head);
  font: 700 .9375rem/1 var(--round);
  text-decoration: none;
}

/* Himmel mit Name, Zeile und Vorstellung */
.sky {
  background: linear-gradient(var(--sky), var(--sky-2));
  padding: 12px 0 calc(var(--sea-h) + 8px);
  text-align: center;
}
.sky .wrap { max-width: 56rem; }
h1 {
  margin: 0;
  color: var(--head);
  font: 800 clamp(2.125rem, 9vw, 3.75rem)/1.05 var(--round);
  letter-spacing: -.015em;
  text-wrap: balance;
}
.tagline {
  margin: 10px 0 0;
  color: var(--link);
  font: 700 clamp(1.125rem, 4.4vw, 1.5rem)/1.3 var(--round);
}
.lead { max-width: 30rem; margin: 16px auto 0; color: var(--ink-2); text-wrap: pretty; }

/* Meer mit Hafen und Leuchtturm wie in der App (BeachScene.swift) */
.coast {
  position: relative;
  height: var(--sea-h);
  background: linear-gradient(var(--sea-1), var(--sea-2));
}
.harbor {
  position: absolute;
  top: 0;
  left: 0;
  width: min(42%, 380px);
  transform: translateY(-54%);
}
.lighthouse {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(84px, 22vw, 168px);
  transform: translateY(9%);
}

/* Sand: Sgully, So geht's, Warteliste, Punkte, Fragen */
.beach { display: flow-root; background: var(--sand); }   /* flow-root: Ränder der Kinder bleiben im Sand */

/* Sgully steht im Sand. Das Bild ist in tools/assets/web.py so aufgefüllt, dass die Möwe optisch mittig steht. */
.gull { margin: 22px 0 0; text-align: center; }
.gull img { width: min(86vw, 520px); margin: 2px auto 0; }
.bubble {
  position: relative;
  display: inline-block;
  max-width: 21rem;
  margin: 0 0 6px;
  padding: 12px 18px;
  border-radius: 22px;
  background: var(--bubble);
  box-shadow: var(--shadow);
  color: #1D2840;
  font: 700 1.0625rem/1.35 var(--round);
  text-wrap: balance;
}
.bubble::after {
  content: "";
  position: absolute;
  left: 44%;
  bottom: -8px;
  width: 18px;
  height: 18px;
  border-radius: 0 0 5px 0;
  background: var(--bubble);
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: no-preference) {
  .bubble { animation: pop .45s cubic-bezier(.2, 1.4, .4, 1) .2s backwards; transform-origin: 44% 100%; }
}
@keyframes pop {
  from { transform: translateY(6px) scale(.85); }
  to { transform: none; }
}

/* Warteliste (nach der Demo): kompakt, Mailfeld und Knopf ab 560 px in einer Zeile */
.card {
  max-width: 32rem;
  margin: 48px auto 0;
  padding: 20px clamp(16px, 4.5vw, 24px) 18px;
  border-radius: 22px;
  background: var(--panel);
}
.card h2 { margin: 0; color: var(--head); font: 800 1.25rem/1.25 var(--round); text-align: center; }
.card > p { margin: 4px 0 0; text-align: center; color: var(--ink-2); font-size: .9375rem; }
.wl { position: relative; display: grid; gap: 12px; margin-top: 14px; }
.wl fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
/* Plattform als Segment-Umschaltung: echte Radios, unsichtbar über dem ganzen Segment */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px !important; border-radius: 16px; background: var(--seg); }
.seg label { position: relative; display: grid; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span { display: grid; align-content: center; padding: 7px 6px; border-radius: 12px; color: var(--head); font: 800 1rem/1.2 var(--round); text-align: center; }
.seg small { display: block; color: var(--ink-2); font: 500 .8125rem/1.3 var(--text); text-wrap: balance; }
.seg input:checked + span { background: var(--btn); color: var(--btn-ink); }
.seg input:checked + span small { color: var(--btn-ink); }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.field label { display: block; margin-bottom: 4px; color: var(--head); font: 700 .9375rem/1.3 var(--round); }
.row { display: grid; gap: 8px; }
.wl input[type="email"] {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 8px 14px;
  border: 1.5px solid var(--field-line);
  border-radius: 14px;
  background: var(--field);
  color: var(--ink);
  font: 400 max(16px, 1.0625rem)/1.3 var(--text);   /* ab 16 px zoomt Safari nicht beim Antippen */
}
.wl input:user-invalid { border-color: var(--warn); }
.consent { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); font-size: .875rem; line-height: 1.45; }
.consent input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--link); }
.consent p { margin: 0; }
.btn {
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 14px;
  background: var(--btn);
  color: var(--btn-ink);
  font: 800 1.0625rem/1 var(--round);
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.12); }
.note { margin: -4px 0 0 30px; color: var(--ink-2); font-size: .875rem; }
/* Honigtopf: für Menschen unsichtbar, aber nicht display:none (manche Bots füllen nur sichtbare Felder) */
.hp { position: absolute; left: -10000px; top: 0; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 560px) {
  .row { grid-template-columns: 1fr auto; }
}

/* So geht's: Schritte und Simulation */
.how { padding: 40px 0 8px; }   /* direkt nach dem Kopf mit Strandszene */
.how-grid { display: grid; gap: 32px; justify-items: center; margin-top: 28px; }
.steps { width: 100%; max-width: 30rem; margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 6px; }
.steps li { position: relative; padding: 10px 14px 10px 54px; border-radius: 16px; color: var(--ink-2); }
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 12px;
  top: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--panel);
  color: var(--head);
  font: 800 1rem/30px var(--round);
  text-align: center;
}
.steps b { display: block; color: var(--head); font: 800 1.125rem/1.35 var(--round); }
.steps li[aria-current] { background: var(--panel); }
.steps li[aria-current]::before { background: var(--btn); color: var(--btn-ink); }
.stage { display: grid; justify-items: center; width: 100%; order: -1; }   /* schmal: Rahmen vor den Schritten */
/* Spalten fest vorgeben: .phone hat container-type, ihre Inhaltsbreite zählt für die Spur nicht */
.phones { display: grid; grid-template-columns: minmax(0, 250px); gap: 32px; justify-content: center; width: 100%; }
.phone { width: 100%; margin: 0; container-type: inline-size; }
.phone figcaption { margin-top: 12px; color: var(--ink-2); font-size: .9375rem; text-align: center; text-wrap: balance; }
.sim-foot { min-height: 3.2em; margin-top: 14px; text-align: center; }
.sim-live { max-width: 22rem; margin: 0 auto; color: var(--ink-2); font-size: .9375rem; }
.ghost {
  min-height: 44px;
  margin-top: 8px;
  padding: 0 20px;
  border: 1.5px solid var(--field-line);
  border-radius: 999px;
  background: transparent;
  color: var(--head);
  font: 700 1rem/1 var(--round);
  cursor: pointer;
}
/* Ohne JavaScript: drei Zustände nebeneinander (breit) oder untereinander (schmal), ohne Startbild und Bedienzeile */
.how:not(.on) [data-scr="start"], .how:not(.on) .sim-foot { display: none; }
/* Mit JavaScript: ein Rahmen, die Bildschirme liegen übereinander, sichtbar ist nur der aktive */
.how.on .phones { grid-template-columns: minmax(0, 280px); }   /* schmal: Rahmen und Zeile darunter passen auf einen iPhone-Bildschirm */
.how.on .phones > .phone { grid-area: 1 / 1; }
.how.on figcaption { display: none; }

/* Der iPhone-Rahmen. Maße in cqw (Breite des Rahmens), damit alles mit dem Rahmen wächst.
   Der Bildschirm bleibt hell wie die App, auch im dunklen Schema der Seite. */
.device {
  aspect-ratio: 9 / 19.5;
  padding: 3.4cqw;
  border-radius: 16cqw;
  background: #1D2840;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), var(--shadow);
}
.screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 12.8cqw;
  background: linear-gradient(#D7E8F1, #EAF2F6 44%, #A9CDE0 44%, #8FBFD8 50%, #F3E7D3 50%);
  color: #1D2840;
  font: 700 4.6cqw/1.3 var(--round);
  text-align: center;
}
.screen :focus-visible { outline-color: #2B5E80; }
.screen p { margin: 0; }
.screen button { font: inherit; color: inherit; cursor: pointer; }
.island { position: absolute; z-index: 2; top: 2.6cqw; left: 50%; width: 27cqw; height: 7.8cqw; margin-left: -13.5cqw; border-radius: 99px; background: #05070B; }
.say {
  position: absolute;
  top: 13%;
  left: 8cqw;
  right: 8cqw;
  padding: 3cqw 4cqw;
  border-radius: 5cqw;
  background: #FFFFFF;
  box-shadow: 0 1.5cqw 4cqw rgba(29, 40, 64, .12);
  font-size: 4.4cqw;
  text-wrap: balance;
}
.say::after { content: ""; position: absolute; left: 44%; bottom: -2cqw; width: 4.4cqw; height: 4.4cqw; border-radius: 0 0 1.2cqw 0; background: #FFFFFF; transform: rotate(45deg); }
.bird { position: absolute; left: 50%; bottom: 38%; width: 84cqw; transform: translateX(-50%); }
.bird img { width: 100%; }
.panel { position: absolute; left: 5cqw; right: 5cqw; bottom: 4.5cqw; padding: 3.6cqw; border-radius: 7cqw; background: rgba(255, 255, 255, .62); }
.lbl { font-size: 4cqw; color: #3D4860; }
.dur { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; margin: 2.4cqw 0 3cqw; }
.dur button { min-height: 11cqw; border: 0; border-radius: 99px; background: #FFFFFF; }
.dur button[aria-pressed="true"] { background: #2B5E80; color: #FFFFFF; }
.go { width: 100%; min-height: 13cqw; border: 0; border-radius: 99px; background: #22304F; color: #FFFFFF !important; font-weight: 800 !important; }

/* Timer läuft */
.cd { position: absolute; top: 8%; left: 0; right: 0; font: 800 15cqw/1 var(--round); font-variant-numeric: tabular-nums; }
.watch { position: absolute; top: 17%; left: 0; right: 0; font-size: 4.2cqw; color: #3D4860; }
.bird.sleep { width: 76cqw; bottom: 42%; }
.zzz { position: absolute; top: 27%; left: 30%; width: 12cqw; height: 16cqw; color: #2B5E80; font: 800 5cqw/1 var(--round); }
.zzz span { position: absolute; left: 4cqw; bottom: 0; opacity: 0; }
.ff { position: absolute; top: 60.5%; left: 50%; transform: translateX(-50%); min-height: 10cqw; padding: 0 5cqw; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .75); font-size: 4.2cqw !important; white-space: nowrap; }
.hint { position: absolute; left: 0; right: 0; bottom: 33cqw; font-size: 4.2cqw; color: #3D4860; }
.dock { position: absolute; left: 4cqw; right: 4cqw; bottom: 4cqw; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 3cqw 1.5cqw; border-radius: 8cqw; background: rgba(255, 255, 255, .5); list-style: none; }
.dock button { display: grid; justify-items: center; gap: 1.2cqw; width: 100%; padding: 1cqw 0; border: 0; background: none; font: 600 3.7cqw/1.1 var(--text) !important; }
.ic { display: grid; place-items: center; width: 14cqw; height: 14cqw; border-radius: 3.6cqw; }
.ic svg { width: 8.4cqw; height: 8.4cqw; }
.a1 { background: #F3E7D3; color: #22304F; box-shadow: inset 0 0 0 1px rgba(29, 40, 64, .12); }
.a2 { background: #22304F; color: #F2B33D; }
.a3 { background: #A9CDE0; color: #22304F; }
.a4 { background: #E0795B; color: #22304F; }

/* Gesperrte App: nachgebaut nach ios/Extensions/ShieldConfig/ShieldConfigurationExtension.swift */
.shield { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 50cqw 9cqw 0; background: #F7F5ED; }
.shield img { width: 30cqw; }
.sh-title { margin-top: 5cqw !important; color: #1F2933; font: 700 6.6cqw/1.2 var(--text); }
.sh-sub { margin-top: 2.6cqw !important; color: #576673; font: 400 4.6cqw/1.35 var(--text); }
.sh-btn { position: absolute; left: 8cqw; right: 8cqw; bottom: 9cqw; min-height: 13.5cqw; border: 0; border-radius: 4cqw; background: #2E5778; color: #FFFFFF !important; font: 600 5cqw/1 var(--text) !important; }

/* Timer geschafft */
.got { position: absolute; top: 7.5%; left: 5cqw; right: 5cqw; padding: 2.6cqw 2.2cqw; border-radius: 5cqw; background: rgba(255, 255, 255, .62); }
.got > p { font: 800 5cqw/1.2 var(--round); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2cqw; margin-top: 2cqw; }
.g { display: inline-flex; align-items: center; gap: .8cqw; padding: 1.1cqw 1.8cqw 1.1cqw 1.4cqw; border-radius: 99px; background: #FFFFFF; font: 800 3.8cqw/1 var(--round); }
.g img { width: auto; height: 4.4cqw; }
.done .say { top: 26%; }
.acts { position: absolute; left: 5cqw; right: 5cqw; bottom: 4.5cqw; display: grid; grid-template-columns: 1fr auto; gap: 2.4cqw; }
.feed { display: flex; align-items: center; justify-content: center; gap: 2cqw; min-height: 13cqw; border: 0; border-radius: 99px; background: #FFFFFF; font-weight: 800 !important; }
.feed img { width: auto; height: 6cqw; }
.feed .n { min-width: 7cqw; padding: .6cqw 1.6cqw; border-radius: 99px; background: #F2B33D; font-size: 3.8cqw; }
.feed:disabled { opacity: .55; cursor: default; }
.again { min-height: 13cqw; padding: 0 5cqw; border: 0; border-radius: 99px; background: #22304F; color: #FFFFFF !important; font-weight: 800 !important; }

@media (prefers-reduced-motion: no-preference) {
  .zzz span { animation: zz 2.4s linear infinite; }
  .zzz span:nth-child(2) { animation-delay: .8s; font-size: 6cqw; }
  .zzz span:nth-child(3) { animation-delay: 1.6s; font-size: 7cqw; }
  .hop { animation: hop .36s ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  .zzz { width: auto; height: auto; }
  .zzz span { position: static; opacity: 1; margin-right: 1cqw; }
}
@keyframes zz {
  0% { opacity: 0; transform: translate(0, 0); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(-7cqw, -15cqw); }
}
@keyframes hop {
  40% { transform: translate(-50%, -4cqw); }
  100% { transform: translate(-50%, 0); }
}

/* Die Punkte */
.features { padding: 64px 0 8px; }
.features ul { display: grid; gap: 28px; max-width: 40rem; margin: 28px auto 0; padding: 0; list-style: none; }
.features li { display: grid; grid-template-columns: 72px 1fr; gap: 18px; align-items: start; }
.features img { width: 72px; height: 72px; object-fit: contain; }
.features h3 { margin: 0 0 4px; color: var(--head); font: 800 1.1875rem/1.3 var(--round); }
.features p { margin: 0; color: var(--ink-2); }

/* Häufige Fragen: aufklappbar ohne JavaScript, Plus-Zeichen aus zwei Verläufen (kein url(), CSP) */
.faq { padding: 64px 0 72px; }
.qa { display: grid; gap: 10px; max-width: 44rem; margin: 24px auto 0; }
.qa details { border-radius: 18px; background: var(--panel); }
.qa summary {
  position: relative;
  display: block;
  padding: 15px 60px 15px 20px;
  border-radius: 18px;
  color: var(--head);
  font: 800 1.125rem/1.35 var(--round);
  list-style: none;
  cursor: pointer;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  border-radius: 50%;
  background-color: var(--sand);
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px 2.5px, 2.5px 12px;
}
.qa details[open] > summary::after { background-size: 12px 2.5px, 2.5px 0; }
.qa summary:hover { color: var(--link); }
.qa summary:focus-visible { outline-offset: 2px; }
.qa details > p { margin: 0; padding: 0 20px 18px; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .qa summary::after { transition: background-size .2s ease; }
}

/* Fuß: Hilfe und Rechtliches liefert der Sgully-Server auf derselben Domain */
footer { background: var(--sky); padding: 28px 0 44px; font-size: .9375rem; text-align: center; }
footer ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; margin: 0; padding: 0; list-style: none; }
footer a { display: inline-block; padding-block: 8px; }
footer p { margin: 4px 0 0; }
.pub { margin-top: 10px !important; color: var(--ink-2); }

/* 404 */
.lost { padding: 40px 0 56px; }
.lost + footer { border-top: 1px solid var(--line); }
.lost img { width: min(76vw, 320px); margin: 0 auto 28px; }
.lost h1 { font-size: clamp(1.75rem, 7vw, 2.5rem); }
.lost p { margin: 10px 0 0; }
.lost .en { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.lost .en h2 { margin: 0; color: var(--head); font: 800 1.375rem/1.2 var(--round); }

@media (max-width: 359px) {
  .features li { grid-template-columns: 56px 1fr; gap: 14px; }
  .features img { width: 56px; height: 56px; }
}

@media (min-width: 720px) {
  body { font-size: 1.125rem; }
  .sky { padding-top: 24px; }
  .gull { margin-top: 30px; }
}

/* Breit: Schritte und Simulation nebeneinander, die Punkte als 2 × 2-Raster */
@media (min-width: 900px) {
  .how.on .how-grid { grid-template-columns: minmax(0, 30rem) 300px; justify-content: center; align-items: center; column-gap: 72px; }
  .how.on .stage { order: 0; }
  .how.on .phones { grid-template-columns: minmax(0, 300px); }
  .how:not(.on) .phones { grid-template-columns: repeat(3, 230px); }
  .features ul { grid-template-columns: 1fr 1fr; max-width: none; gap: 40px 56px; }
}