/* Produktseite lifequest.j-audio.de
 *
 * Eigenständig. prototype/styles.css wird bewusst NICHT eingebunden: sie setzt
 * overflow:hidden auf body und ist für eine scrollende Seite falsch. Übernommen
 * sind nur die Farbmarken, damit Seite und App als eine Sache lesbar sind.
 *
 * Keine Webfonts, keine externen Ressourcen — das ist die Bedingung dafür, dass
 * die Datenschutzerklärung stimmt. Die Typografie holt ihre Persönlichkeit
 * deshalb aus dem Kontrast zweier Register derselben Systemschrift: sehr enge
 * Laufweite in den Überschriften, sehr weite in den Rubriken.
 *
 * Leitmotiv: der radiale Baum der App, aufgerollt zur Seite. Eine Achse, an der
 * die Zweige mit Ring-Knoten hängen. Ihr Verlauf Amber -> Cyan ist die These des
 * Produkts: zwei Welten, ein Stamm. */

:root {
  --bg:#0C0E13;
  --bg-lift:#12161E;
  --border:#262C38;
  --border-soft:#1C212B;

  --amber:#F5A623;
  --amber-light:#FFC65C;
  --cyan:#2EC4DE;

  --text:#E4E7EC;
  --text-soft:#B6BCC8;
  --text-dim:#878E9C;
  --label:#9AA1AD;

  --wrap:1080px;
  --rail:190px;
  --gap:44px;

  --font:-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  --mono:ui-monospace,"Cascadia Code",Consolas,"SF Mono",monospace;
}

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

html { scroll-behavior:smooth; }

body {
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

a { color:var(--amber-light); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover { color:var(--amber); }

:where(a, button):focus-visible {
  outline:2px solid var(--amber);
  outline-offset:4px;
  border-radius:3px;
}

.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }

/* ------------------------------------------------------------- Typografie */
/* Zwei Register, eine Familie: Überschriften eng und schwer, Rubriken weit und
 * leicht. Der Abstand zwischen -0.03em und +0.2em trägt hier die Persönlichkeit,
 * die sonst eine Displayschrift tragen würde. */

h1, h2, h3 { font-weight:700; letter-spacing:-.03em; line-height:1.12; }
h1 { font-size:clamp(2.4rem, 6vw, 4rem); }
h2 { font-size:clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size:1.28rem; letter-spacing:-.02em; line-height:1.25; }

.eyebrow {
  display:block;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--label);
}

.lede { color:var(--text-soft); font-size:1.08rem; }
p + p { margin-top:1em; }

code {
  font-family:var(--mono);
  font-size:.9em;
  letter-spacing:0;
  color:var(--cyan);
}

/* -------------------------------------------------------------------- Kopf */

.masthead {
  border-bottom:1px solid var(--border-soft);
  position:relative;
  z-index:3;
}
.masthead .wrap {
  display:flex;
  align-items:center;
  gap:13px;
  padding-block:18px;
  flex-wrap:wrap;
}
.masthead .mark { width:30px; }
/* Der Anwendungsname steht als ECHTER TEXT, nicht als Bild. Googles
 * OAuth-Prüfung vergleicht den im Zustimmungsbildschirm konfigurierten Namen
 * mit dem Namen auf der Startseite; eine Wortmarke als PNG findet sie dabei
 * nicht. Die Bild-Wortmarke bleibt im Fuß, wo sie nur schmückt. */
.masthead .wordmark-text {
  font-size:1.3rem; font-weight:700; letter-spacing:-.02em; color:var(--text);
}
.masthead nav { margin-left:auto; display:flex; gap:26px; flex-wrap:wrap; }
.masthead nav a {
  color:var(--text-dim);
  text-decoration:none;
  font-size:.94rem;
}
.masthead nav a:hover { color:var(--text); }

/* -------------------------------------------------------------------- Hero */

/* overflow:hidden ist hier tragend, nicht kosmetisch: .hero-sky ragt absichtlich
 * über den Rand hinaus, damit die Drift-Animation keine Kante zeigt. Ohne den
 * Beschnitt lugt das ungedimmte Bild unter dem Abdunkler hervor. */
.hero {
  position:relative; isolation:isolate; overflow:hidden;
  padding-block:clamp(72px, 12vw, 132px);
}

.hero-sky {
  position:absolute; inset:-4% -4% -4% -4%; z-index:-2;
  background:#05070B center/cover no-repeat;
  opacity:.62;
}
/* Die Galaxie atmet. Sehr langsam, kaum wahrnehmbar — sie soll auffallen, wenn
 * man hinsieht, und nie, wenn man liest. */
@media (prefers-reduced-motion:no-preference) {
  .hero-sky { animation:drift 64s ease-in-out infinite alternate; }
}
@keyframes drift {
  from { transform:scale(1)      translate3d(0, 0, 0); }
  to   { transform:scale(1.055)  translate3d(-1%, -.6%, 0); }
}

/* Zwei Lagen: eine weiche Wanne, die den Text freistellt, und ein Verlauf, der
 * die Kanten in den Seitenhintergrund führt. Der Text steht über einem
 * Bildbereich voller Knoten und Linien — ohne die Wanne wird er unruhig. */
.hero::after {
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(78% 62% at 50% 46%, rgba(8,10,14,.86) 0%, rgba(10,12,17,.62) 45%, transparent 78%),
    radial-gradient(130% 96% at 50% 40%, transparent 0%, rgba(12,14,19,.66) 70%, var(--bg) 100%),
    linear-gradient(180deg, rgba(12,14,19,.5) 0%, rgba(12,14,19,.22) 42%, var(--bg) 100%);
}

.hero .wrap { text-align:center; max-width:820px; }
.hero h1 { margin-block:20px 0; text-wrap:balance; }
.hero .claim {
  margin-top:16px;
  font-size:clamp(1.1rem, 2.4vw, 1.4rem);
  font-weight:600;
  letter-spacing:.01em;
  color:var(--amber-light);
}
.hero .lede { margin:26px auto 0; max-width:60ch; }

.status {
  display:inline-flex; align-items:center; gap:9px;
  padding:6px 15px 6px 12px;
  border:1px solid rgba(245,166,35,.42);
  border-radius:999px;
  background:rgba(245,166,35,.09);
  color:var(--amber-light);
  font-size:.8rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
}
.status::before {
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--amber); box-shadow:0 0 0 3px rgba(245,166,35,.2);
}

/* Auftakt: die Zeilen kommen in der Reihenfolge, in der man sie liest. */
@media (prefers-reduced-motion:no-preference) {
  .hero .status, .hero h1, .hero .claim, .hero .lede {
    animation:rise .7s cubic-bezier(.22,.8,.3,1) backwards;
  }
  .hero .status { animation-delay:.05s; }
  .hero h1     { animation-delay:.16s; }
  .hero .claim { animation-delay:.28s; }
  .hero .lede  { animation-delay:.40s; }
}
@keyframes rise {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:none; }
}

/* ---------------------------------------------------------------- Abschnitt */

.band { padding-block:clamp(64px, 9vw, 104px); }
.band-head { max-width:64ch; margin-bottom:52px; }
.band-head h2 { margin-top:12px; }
.band-head p { margin-top:16px; color:var(--text-soft); }

/* -------------------------------------------------------------- Die Zweige */
/* Der Baum, aufgerollt: eine Achse, daran hängen die Zweige mit Ring-Knoten.
 * Unterhalb 900 px fällt die Achse weg — sie ist Schmuck mit Bedeutung, nicht
 * Struktur, und darf auf dem Handy verschwinden. */

.branches { position:relative; display:grid; gap:64px; }

.branch { display:grid; gap:16px; }
.branch-body { max-width:66ch; }
.branch-body p { color:var(--text-soft); }
.branch-body h3 + p { margin-top:10px; }

.branch figure { margin-top:28px; }
.branch img {
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--bg-lift);
}
.branch figcaption {
  margin-top:12px;
  font-size:.86rem;
  color:var(--text-dim);
}

@media (min-width:900px) {
  .branches { padding-left:0; }
  .branches::before {
    content:"";
    position:absolute;
    left:11px; top:11px; bottom:11px;
    width:1px;
    background:linear-gradient(180deg, var(--amber) 0%, var(--cyan) 100%);
    opacity:.5;
  }
  .branch {
    grid-template-columns:var(--rail) 1fr;
    column-gap:var(--gap);
    align-items:start;
  }
  .branch-rail { position:relative; padding-left:38px; padding-top:2px; }
  /* Der Knoten: ein Ring mit offenem Viertel — dieselbe Formensprache wie die
   * Fortschrittsringe der Skills in der App. */
  .branch-rail::before {
    content:"";
    position:absolute; left:0; top:1px;
    width:23px; height:23px;
    border-radius:50%;
    border:2px solid var(--amber);
    border-right-color:transparent;
    transform:rotate(-45deg);
    background:var(--bg);
  }
  .branch:last-child .branch-rail::before { border-color:var(--cyan); border-right-color:transparent; }
  /* Bilder brechen nach links aus, aber nur bis zur Textkante der Rubrik —
   * NICHT bis zur Spaltenkante. Sonst läuft die Achse mitten durchs Bild:
   * sie sitzt bei 11 px (Mitte des Ring-Knotens), das Bild begänne bei 0.
   * Die 38 px sind dieselbe Einrückung wie die Rubrik darüber, das Bild
   * fluchtet also mit seiner eigenen Beschriftung. */
  .branch figure { margin-left:calc(38px - var(--rail) - var(--gap)); }
}

/* ------------------------------------------------------------------ Google */

.scopes { display:grid; gap:18px; }
@media (min-width:820px) { .scopes { grid-template-columns:1fr 1fr; } }

.panel {
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--bg-lift);
  padding:28px 30px;
}
.panel h3 { margin-bottom:10px; }
.panel p { color:var(--text-soft); font-size:.98rem; }
/* Nur der Scope-Name als eigene Zeile — DIREKTES Kind. Ein `code` im Fließtext
 * (etwa calendar.events) muss inline bleiben, sonst zerreißt es den Satz. */
.panel > code { display:block; margin-bottom:14px; font-size:.95rem; }

/* Cyan liest, Amber schreibt — dieselbe Zuordnung wie in der Marke. */
.panel-read  { border-left:2px solid var(--cyan); }
.panel-write { border-left:2px solid var(--amber); }
.panel-read  > code { color:var(--cyan); }
.panel-write > code { color:var(--amber-light); }
/* Im Fließtext genannte Scopes bleiben neutral. calendar.events wird gerade
 * NICHT angefordert — es in der Farbe der erteilten Berechtigung zu setzen,
 * würde das Gegenteil behaupten. */
.panel p code { color:var(--text-dim); }

.panel-wide { margin-top:18px; }

/* --------------------------------------------------------------- Rechtstext */

.legal { padding-block:clamp(48px, 7vw, 76px); }
.legal .wrap { max-width:720px; }
.legal h1 { font-size:clamp(1.9rem, 4vw, 2.6rem); margin-bottom:24px; }
.legal h2 { font-size:1.18rem; margin-top:40px; margin-bottom:10px; }
.legal h3 { font-size:1.02rem; margin-top:26px; margin-bottom:8px; color:var(--text); }
.legal p, .legal li { color:var(--text-soft); }
.legal ul { margin:12px 0 0 20px; }
.legal li + li { margin-top:8px; }
.legal address { font-style:normal; color:var(--text); margin-top:10px; line-height:1.9; }
.legal .intro { color:var(--text-soft); font-size:1.05rem; }

/* --------------------------------------------------------------------- Fuß */

.colophon {
  position:relative; isolation:isolate;
  margin-top:40px;
  padding-block:clamp(64px, 9vw, 96px) 40px;
  border-top:1px solid var(--border-soft);
}
.colophon-sky {
  position:absolute; inset:0; z-index:-2;
  background:#05070B center/cover no-repeat;
  opacity:.34;
}
.colophon::after {
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, var(--bg) 0%, rgba(12,14,19,.55) 45%, rgba(12,14,19,.9) 100%);
}
.colophon .wrap { text-align:center; }
/* Marke und Wortmarke einzeln statt der fertigen Lockup-Datei: die trägt einen
 * undurchsichtigen Sternenfeld-Hintergrund und stünde als schwarzer Kasten vor
 * der Galaxie. Die transparenten Teile setzen sich nahtlos darauf. */
.colophon .foot-mark { width:54px; margin-inline:auto; }
.colophon .foot-word { width:min(190px, 56vw); margin:14px auto 0; }
.colophon p { margin-top:26px; color:var(--text-soft); }
.colophon nav { margin-top:24px; display:flex; gap:28px; justify-content:center; flex-wrap:wrap; }
.colophon nav a { color:var(--text-soft); text-decoration:none; font-size:.95rem; }
.colophon nav a:hover { color:var(--text); text-decoration:underline; }
.colophon small { display:block; margin-top:26px; color:var(--text-dim); font-size:.84rem; }