/* Dieselbe Handschrift wie die App: warmes Papier, tiefes Blau, grosse Schrift.
   Die Seite ist kein Prospekt fuer die App, sie ist eine Probe davon. Wer hier
   nicht ohne Muehe lesen kann, glaubt uns die grossen Knoepfe auch nicht.

   Alle Markenfarben kommen aus aso-tokens.css und werden hier nur zugeordnet.
   Die neutralen Toene sind aus dem Markenton gemischt, damit das Papier warm
   bleibt, ohne dass eine zweite Farbe erfunden wird. */

:root {
  --paper:    color-mix(in srgb, var(--brand) 22%, #fff);
  --surface:  #fff;
  --sunken:   color-mix(in srgb, var(--brand) 45%, #fff);
  --line:     color-mix(in srgb, var(--brand) 62%, #fff);
  --ink:      #14232E;
  --ink-soft: #4A5B66;
  /* Fliesstext und kleine Schrift: 5.0:1 auf dem Papier. */
  --accent:   var(--brand-2);
  /* Nur fuer grosse, fette Schrift und Flaechen. */
  --warm:     var(--brand-ink);
  --cta-bg:   var(--brand-2);
  --cta-ink:  #fff;
  --radius:   20px;
  --maxw:     1040px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:    #0C161F;
    --surface:  #16242E;
    --sunken:   #1E2F3A;
    --line:     #2C3F4C;
    --ink:      #F4EFE6;
    --ink-soft: #A8B8C3;
    --accent:   var(--brand-soft);
    --warm:     var(--brand-soft);
    --cta-bg:   var(--brand-soft);
    --cta-ink:  var(--on-brand);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  /* Systemschrift, kein Webfont. Die Groesse liegt bewusst ueber dem Ueblichen. */
  font: 400 clamp(19px, 0.6vw + 17px, 22px)/1.65
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  /* Lange Wortungetueme brechen, statt aus der Spalte zu laufen. */
  overflow-wrap: break-word;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

a { color: var(--accent); }
a:focus-visible, .aso-badge:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--surface); color: var(--ink);
  padding: 14px 20px; border-radius: 0 0 12px 0; font-weight: 600;
}
.skip:focus { left: 0; top: 0; z-index: 10; }

/* ------------------------------------------------------------ Kopf und Fuss */

header.site { border-bottom: 1px solid var(--line); padding: 16px 0; }
header.site .wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand img { width: 48px; height: 48px; border-radius: 12px; display: block; }
.brand .name { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
header.site nav { margin-left: auto; display: flex; gap: 8px 22px; flex-wrap: wrap; }
header.site nav a {
  color: var(--ink-soft); text-decoration: none; font-size: 18px; font-weight: 600;
  /* Auch die Navigation soll sich mit einem unsicheren Finger treffen lassen. */
  padding: 10px 2px; display: inline-block;
}
header.site nav a:hover { color: var(--accent); text-decoration: underline; }

footer.site { border-top: 1px solid var(--line); margin-top: 72px; padding: 32px 0 64px; }
footer.site .legal {
  color: var(--ink-soft); font-size: 17px; max-width: 46em; margin: 0 0 24px;
}
.foot-row { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; font-size: 17px; }
footer.site nav { margin-left: auto; display: flex; gap: 12px 22px; flex-wrap: wrap; }
footer.site a { color: var(--ink-soft); }
footer.site span { color: var(--ink-soft); }

/* ---------------------------------------------------------------- Textsatz */

h1 {
  font-size: clamp(33px, 4.6vw, 52px); line-height: 1.12;
  letter-spacing: -0.02em; margin: 0 0 20px; font-weight: 800;
  max-width: 17em;
}
h2 {
  font-size: clamp(26px, 3vw, 35px); line-height: 1.2;
  letter-spacing: -0.015em; margin: 0 0 16px; font-weight: 750;
  max-width: 20em;
}
h3 { font-size: clamp(21px, 1.6vw, 24px); line-height: 1.3; margin: 0 0 10px; font-weight: 700; }
p { margin: 0 0 18px; max-width: 38em; }
ul, ol { max-width: 38em; padding-left: 26px; }
li { margin-bottom: 12px; }
strong { font-weight: 700; }

.lead { font-size: clamp(21px, 1.5vw, 26px); line-height: 1.5; color: var(--ink-soft); max-width: 30em; }
.small { font-size: 17px; color: var(--ink-soft); }

section { padding: 8px 0; }
.band { background: var(--surface); padding: 56px 0; margin: 56px 0; }
.band-sunken { background: var(--sunken); padding: 56px 0; margin: 56px 0; }
.band h2, .band-sunken h2 { margin-top: 0; }

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

.hero { padding: 48px 0 8px; }
.hero .grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 48px; align-items: center;
}
.hero-shot { justify-self: center; }
.hero-shot img {
  width: 221px; height: auto; max-width: 100%;
  border-radius: 20px; display: block;
  box-shadow: 0 20px 46px rgba(20, 35, 46, 0.20);
}
@media (max-width: 780px) {
  .hero .grid { grid-template-columns: 1fr; gap: 32px; }
}

.eyebrow {
  display: inline-block; background: var(--sunken); color: var(--ink);
  padding: 8px 16px; border-radius: 999px;
  font-size: 16px; font-weight: 700; letter-spacing: 0.02em;
  margin: 0 0 20px;
}

.facts { list-style: none; padding: 0; margin: 24px 0 0; font-size: 18px; color: var(--ink-soft); }
.facts li { margin-bottom: 8px; padding-left: 28px; position: relative; }
.facts li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 12px; height: 12px; border-radius: 50%; background: var(--warm);
}

/* -------------------------------------------------------- Download-Knoepfe */

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin: 28px 0; max-width: none; }
.aso-badge .b-white { display: none; }
@media (prefers-color-scheme: dark) {
  .aso-badge .b-black { display: none; }
  .aso-badge .b-white { display: inline-block; }
}
.cta-note { font-size: 17px; color: var(--ink-soft); }

.cta {
  display: inline-block; background: var(--cta-bg); color: var(--cta-ink);
  text-decoration: none; font-weight: 700; font-size: 19px;
  padding: 16px 26px; border-radius: 14px;
  /* Mindestens so hoch wie eine sichere Trefferflaeche, nicht knapp darunter. */
  min-height: 56px; line-height: 24px;
}
.cta:hover { text-decoration: underline; }

/* ------------------------------------------------------------ Bildschirme */

.shots {
  display: grid; grid-template-columns: repeat(4, 221px);
  gap: 24px; margin: 32px 0 8px; padding-bottom: 8px;
  overflow-x: auto; justify-content: center;
}
.shots figure { margin: 0; width: 221px; }
.shots img {
  width: 221px; height: 480px; display: block;
  border-radius: 18px; box-shadow: 0 14px 34px rgba(20, 35, 46, 0.16);
}
.shots figcaption { font-size: 17px; color: var(--ink-soft); margin-top: 12px; line-height: 1.4; }
@media (max-width: 1000px) {
  .shots { justify-content: start; scroll-snap-type: x proximity; }
  .shots figure { scroll-snap-align: start; }
}

/* ------------------------------------------------------------------ Karten */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 32px 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.band .card { background: var(--paper); }
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.card p { color: var(--ink-soft); font-size: 18px; }

/* Nummerierte Schritte. Die Ziffer ist gross genug, um sie am Telefon
   wiederzufinden, ohne den Text zu verdraengen. */
.steps { list-style: none; padding: 0; margin: 32px 0; counter-reset: step; max-width: 42em; }
.steps li {
  counter-increment: step; position: relative;
  padding: 0 0 26px 66px; margin: 0;
}
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--sunken); color: var(--ink);
  font-size: 21px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.steps h3 { margin-bottom: 6px; }
.steps p { margin-bottom: 0; color: var(--ink-soft); font-size: 18px; }

/* ----------------------------------------------------------------- Tabelle */

.table-scroll { overflow-x: auto; margin: 28px 0; }
table {
  width: 100%; border-collapse: collapse; min-width: 34em;
  font-size: 18px; text-align: left;
}
th, td { padding: 16px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-size: 17px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-soft); }
tbody th { font-weight: 700; }

/* -------------------------------------------------------------------- Hinweis */

.note {
  background: var(--sunken); border-radius: var(--radius);
  padding: 24px 26px; margin: 32px 0; max-width: 42em;
}
.note p:last-child { margin-bottom: 0; }
.note p { max-width: none; }

/* --------------------------------------------------------------------- FAQ */

.faq { margin: 28px 0; max-width: 42em; }
.faq h3 { margin-top: 32px; }
.faq p { color: var(--ink-soft); }

/* ---------------------------------------------------------- Querverweise */

.related { background: var(--surface); border-top: 1px solid var(--line); padding: 56px 0 8px; margin-top: 64px; }
.related-list { list-style: none; padding: 0; margin: 28px 0; max-width: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.related-list li { margin: 0; }
.related-list a {
  display: block; height: 100%; padding: 22px 24px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--ink);
}
.related-list a:hover { border-color: var(--accent); }
.related-list strong { display: block; font-size: 20px; margin-bottom: 6px; color: var(--accent); }
.related-list span { display: block; font-size: 17px; color: var(--ink-soft); line-height: 1.45; }
.back { font-size: 18px; }

/* ------------------------------------------------------------ Rechtstexte */

.doc { max-width: 44em; padding: 40px 0 8px; }
.doc h2 { font-size: clamp(23px, 2vw, 28px); margin-top: 44px; }
.doc .updated { color: var(--ink-soft); font-size: 17px; }