/* Gemeinsame Gestaltung aller Quonn-Seiten (Startseite, So arbeitet Quonn, Datenschutz, Impressum).
   Farben, Schatten und Radien folgen der App („Quonn Papier“, src/styles/globals.css). */
:root {
  --ground:#f3f3f5; --surface:#ffffff; --tint:#eceef1; --line:#e3e5ea; --line-strong:#d0d3da;
  --text:#1b1c20; --text-dim:#5f6168; --text-faint:#686a71;
  --accent:#0a5fcc; --accent-ink:#ffffff; --accent-quiet:#e6effb;
  --band:#0a3f86; --band-ink:#f2f6fc; --band-dim:#c6d6ee; --band-line:rgba(255,255,255,.22);
  --shadow-sm:0 1px 2px rgba(20,22,30,.07),0 0 0 1px rgba(20,22,30,.08);
  --shadow-md:0 1px 2px rgba(20,22,30,.05),0 8px 24px -8px rgba(20,22,30,.14);
  --shadow-lg:0 4px 14px rgba(20,22,30,.1),0 28px 56px -16px rgba(20,22,30,.26);
  --r-md:8px; --r-lg:12px; --r-xl:18px;
  --ui:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Bricolage Grotesque","IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  --read:"IBM Plex Serif",Georgia,"Times New Roman",serif;
  --maxw:1180px;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --ground:#141517; --surface:#1f2024; --tint:#1a1b1e; --line:#2a2c31; --line-strong:#3d3f46;
    --text:#ececef; --text-dim:#a3a5ad; --text-faint:#9396a0;
    --accent:#6fb0ff; --accent-ink:#062544; --accent-quiet:#1d2e45;
    --band:#1c2c45; --band-ink:#ececef; --band-dim:#b9c6da; --band-line:rgba(255,255,255,.16);
    --shadow-sm:0 1px 2px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.07);
    --shadow-md:0 2px 8px rgba(0,0,0,.35),0 12px 28px -10px rgba(0,0,0,.55);
    --shadow-lg:0 4px 14px rgba(0,0,0,.4),0 32px 64px -18px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  --ground:#141517; --surface:#1f2024; --tint:#1a1b1e; --line:#2a2c31; --line-strong:#3d3f46;
  --text:#ececef; --text-dim:#a3a5ad; --text-faint:#9396a0;
  --accent:#6fb0ff; --accent-ink:#062544; --accent-quiet:#1d2e45;
  --band:#1c2c45; --band-ink:#ececef; --band-dim:#b9c6da; --band-line:rgba(255,255,255,.16);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.07);
  --shadow-md:0 2px 8px rgba(0,0,0,.35),0 12px 28px -10px rgba(0,0,0,.55);
  --shadow-lg:0 4px 14px rgba(0,0,0,.4),0 32px 64px -18px rgba(0,0,0,.7);
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* Weiches Scrollen erst nach dem Laden (Klasse „smooth“ per Skript): Ein Direktaufruf wie /#faq springt sonst
   während der Animation und bleibt knapp neben dem Anker stehen. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
@media (prefers-reduced-motion:no-preference) { html.smooth { scroll-behavior:smooth; } }
body { margin:0; background:var(--ground); color:var(--text); font-family:var(--ui); font-size:1rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-wrap:break-word; }
/* Anker landen genau unter der Kopfzeile (64 px + 1 px Linie) */
[id] { scroll-margin-top:65px; }
#preis { scroll-margin-top:96px; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 28px; }

h1, h2, h3, h4 { font-family:var(--display); font-weight:600; letter-spacing:-0.02em; margin:0; text-wrap:balance; }
h1 { font-size:clamp(2rem,1.3rem + 3vw,3rem); line-height:1.08; }
h2 { font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem); line-height:1.15; }
h3 { font-size:1.15rem; line-height:1.3; }
p { margin:0; }
a { color:var(--accent); text-underline-offset:3px; text-decoration-thickness:1px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
.skip { position:absolute; left:12px; top:-60px; z-index:50; background:var(--surface); color:var(--text);
  padding:10px 14px; border-radius:var(--r-md); box-shadow:var(--shadow-md); }
.skip:focus { top:12px; }

/* Kopfzeile */
header.bar { position:sticky; top:0; z-index:30; background:var(--ground);
  background:color-mix(in srgb,var(--ground) 88%,transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.bar .wrap { display:flex; align-items:center; gap:24px; height:64px; }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--text);
  font-family:var(--display); font-weight:600; font-size:1.2rem; letter-spacing:-0.02em; }
.brand img { width:28px; height:28px; border-radius:7px; display:block; }
.bar nav { display:flex; align-items:center; gap:20px; margin-left:12px; }
.bar nav a { color:var(--text-dim); text-decoration:none; font-size:.9375rem; font-weight:500; white-space:nowrap; }
.bar nav a:hover { color:var(--text); }
.bar-end { margin-left:auto; display:flex; align-items:center; gap:16px; }
/* Knöpfe: Grundform und der Kopfzeilen-Knopf „Bald im Microsoft Store“, gleich auf allen Seiten mit dieser Kopfzeile.
   Weitere Formen (ruhiger Knopf, Schild „Bald im Microsoft Store“) gibt es nur auf der Startseite (home.css). */
.btn { display:inline-flex; align-items:center; gap:10px; padding:13px 20px; border-radius:999px; font-weight:600;
  text-decoration:none; font-size:1rem; border:1px solid transparent; font-family:var(--ui); line-height:1.2; }
.btn-primary { background:var(--text); color:var(--ground); }
.btn-primary:hover { background:var(--accent); color:var(--accent-ink); }
.bar .btn { padding:8px 15px; font-size:.9375rem; white-space:nowrap; }
/* Menü + Knopf brauchen einzeilig ~780 px (gemessen 15.10.); darunter klappt das Menü weg, Abstand für größere Schrift. */
@media (max-width:800px) { .bar nav { display:none; } }
.tglt { background:none; border:1px solid var(--line-strong); color:var(--text-dim); width:36px; height:36px;
  border-radius:var(--r-md); display:grid; place-items:center; cursor:pointer; padding:0; }
.tglt:hover { color:var(--text); }
.tglt svg { width:16px; height:16px; }

/* Bilder: je Bild EIN <picture>, der Browser lädt nur die passende Fassung (hell/dunkel, breit/schmal).
   Der Seiten-Schalter (data-theme hat Vorrang vor dem System) stellt dafür das „media“ der <source> um (site.js).
   .shot = ganzes App-Fenster (nur das Kopfbild), .cut = Ausschnitt als ruhige Karte ohne Fenster-Look. */
.shot, .cut { margin:0; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-lg); overflow:hidden; }
.shot { max-width:1120px; box-shadow:var(--shadow-lg); }
.cut { box-shadow:var(--shadow-md); }
/* Die Kachel ist selbst schon eine Karte (Rand im Bild) → kein zweiter Rahmen; Ecken wie die App-Kachel (36 px im 750×287-Bild). */
.cut.tile { border:0; background:transparent; border-radius:4.8% / 12.5%; }
.shot picture, .cut picture { display:block; }
.shot img, .cut img { display:block; width:100%; height:auto; }

/* Kopf */
.hero { padding:clamp(36px,5vw,72px) 0 clamp(40px,5vw,72px); }
.kicker { color:var(--accent); font-weight:500; font-size:.9375rem; margin-bottom:14px; }
.hero h1 { max-width:20ch; }
.hero .sub { margin-top:18px; max-width:46rem; font-size:1.125rem; color:var(--text-dim); }
.hero .price-line { margin-top:22px; font-weight:500; color:var(--text); }
.hero .price-line span { color:var(--text-dim); font-weight:400; }
.hero-fig { margin:clamp(28px,4vw,48px) 0 0; }
.hero-fig figcaption { margin-top:18px; max-width:46rem; font-size:1.0625rem; color:var(--text-dim); }

/* Abschnitte */
section.band { padding:clamp(44px,6vw,84px) 0; border-top:1px solid var(--line); }
section.tint { background:var(--tint); }
/* Text + Bild nebeneinander (ab 900 px), vertikal mittig. Text 5fr, Bild 7fr; .flip = Bild links (7fr | 5fr).
   Im HTML steht immer erst der Text, dann das Bild: unter 900 px ergibt das Überschrift, Text, Bild. */
.split { display:grid; gap:24px; align-items:center; }
.split .copy h2 { font-size:clamp(1.5rem,1.15rem + 1.1vw,1.9rem); }
.copy p { margin-top:12px; font-size:1.0625rem; color:var(--text-dim); }
.media { display:grid; gap:20px; min-width:0; }
.media-narrow { max-width:34rem; }
@media (min-width:900px) {
  .split { grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:56px; }
  .split.flip { grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
  .split.flip .media { order:-1; }
}

.who { margin-top:28px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,40px); }
.who .col { border-top:2px solid var(--accent); padding-top:18px; }
.who h3 { margin-bottom:10px; }
.who p { color:var(--text-dim); font-size:1rem; }

/* Vertrauens-Band: eine Ebene, ein Block */
.privacy { background:var(--band); color:var(--band-ink); border-top:none; }
.privacy h2 { color:var(--band-ink); max-width:24ch; }
.privacy .lead { margin-top:14px; max-width:44rem; font-size:1.125rem; color:var(--band-dim); }
.privacy ul { list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--band-line); max-width:64rem; }
.privacy li { padding:16px 28px 16px 0; border-bottom:1px solid var(--band-line); color:var(--band-ink); font-size:1rem; }
.privacy li a { color:var(--band-ink); }
.privacy .links { margin-top:26px; display:flex; flex-wrap:wrap; gap:12px 36px; }
.privacy .more { display:inline-block; color:var(--band-ink); font-weight:500; }

/* Funktionen, Anforderungen, Preis */
.fgroup + .fgroup { margin-top:18px; }
.fgroup h3 { font-size:1rem; margin-bottom:4px; }
.fgroup p { color:var(--text-dim); }
.fmore { margin-top:20px; }
.fmore summary { cursor:pointer; font-weight:600; color:var(--accent); padding:6px 0; }
.fmore[open] summary { margin-bottom:12px; }
.fwrap { margin-top:24px; max-width:50rem; }
.req { margin:0; display:grid; gap:12px; }
.req > div { display:grid; grid-template-columns:110px 1fr; gap:14px; align-items:baseline; }
.req dt { font-weight:600; color:var(--text); }
.req dd { margin:0; color:var(--text-dim); }
.req-note { margin-top:14px; color:var(--text-dim); font-size:.9375rem; }
.req-extra { margin-top:14px; color:var(--text-dim); }
.price-block { margin-top:36px; padding-top:28px; border-top:1px solid var(--line-strong); max-width:50rem; }
.price-block .price { font-family:var(--display); font-weight:600; font-size:1.7rem; letter-spacing:-0.02em; }
.price-block p { margin-top:8px; color:var(--text-dim); }
.sub-h { font-size:1.15rem; margin:36px 0 0; }

/* Fragen */
.faq { margin-top:26px; max-width:46rem; }
.faq details { border-top:1px solid var(--line-strong); }
.faq details:last-child { border-bottom:1px solid var(--line-strong); }
.faq summary { list-style:none; cursor:pointer; padding:18px 0; display:flex; justify-content:space-between; gap:20px;
  font-weight:600; font-size:1.0625rem; color:var(--text); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-weight:400; font-size:1.3rem; line-height:1; color:var(--text-faint); flex:none; }
.faq details[open] summary { color:var(--accent); }
.faq details[open] summary::after { content:"\2212"; color:var(--accent); }
.faq summary:hover { color:var(--accent); }
.faq details > p { padding:0 0 20px; color:var(--text-dim); max-width:42rem; }

/* Fuß */
footer { border-top:1px solid var(--line); padding:44px 0 56px; }
.why { max-width:42rem; }
.why h2 { font-size:1.15rem; margin-bottom:8px; }
.why p { color:var(--text-dim); }
.foot-row { margin-top:34px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap;
  gap:12px 28px; align-items:center; justify-content:space-between; font-size:.9375rem; color:var(--text-faint); }
.foot-row a { color:var(--text-dim); }
.foot-row nav { display:flex; flex-wrap:wrap; gap:8px 22px; }
.foot-row nav a { text-decoration:none; }
.foot-row nav a:hover { color:var(--text); text-decoration:underline; }
.ffmpeg { margin-top:16px; font-size:.8125rem; color:var(--text-faint); }
.ffmpeg a { color:var(--text-dim); }

/* Eigene Seiten (So arbeitet Quonn, Impressum, Datenschutz): Lesetext in Serifen, 70 Zeichen, Seitenrand von .wrap bleibt */
.legal { padding-top:clamp(32px,5vw,64px); padding-bottom:96px; font-family:var(--read); font-size:1.0625rem; line-height:1.65; }
.legal > * { max-width:70ch; }
.legal .back { display:inline-block; margin-bottom:24px; font-family:var(--ui); font-size:.9375rem; text-decoration:none; }
.legal .back:hover { text-decoration:underline; }
.legal h1 { font-size:clamp(1.8rem,1.3rem + 1.8vw,2.3rem); margin-bottom:6px; }
.legal .updated { color:var(--text-faint); font-size:.9375rem; margin-bottom:26px; }
.legal h2 { font-size:1.4rem; margin:40px 0 10px; }
.legal h3 { font-size:1.12rem; margin:26px 0 6px; }
.legal h4 { font-family:var(--read); font-size:1rem; font-weight:600; letter-spacing:0; margin:20px 0 4px; color:var(--text); }
.legal p, .legal li { color:var(--text-dim); }
.legal strong { color:var(--text); font-weight:600; }
.legal p + p { margin-top:12px; }
.legal ul { margin:10px 0; padding-left:20px; display:flex; flex-direction:column; gap:8px; }
.legal hr { max-width:70ch; border:none; border-top:1px solid var(--line-strong); margin:44px 0; }
.legal .box { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 22px;
  box-shadow:var(--shadow-sm); margin-bottom:24px; }
.legal .box p { color:var(--text); }
.legal .proof { margin-top:12px; padding-left:16px; border-left:2px solid var(--accent); }
.legal .proof strong { display:block; font-family:var(--ui); font-size:.9375rem; margin-bottom:2px; }

@media (max-width:960px) {
  .who { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .bar .wrap { gap:12px; }
  .privacy ul { grid-template-columns:1fr; }
  .req > div { grid-template-columns:1fr; gap:2px; }
}
/* Auf dem Handy nur die Karteikarte zeigen, nicht auch noch den Lernplatz (das Bild darf dort ganz weg). */
@media (max-width:600px) {
  .cut-extra { display:none; }
  .bar .btn { display:none; }
}
@media (max-width:430px) {
  .wrap { padding:0 20px; }
  body { line-height:1.55; }
  .hero { padding:28px 0 32px; }
  .hero .sub, .copy p, .hero-fig figcaption { font-size:1rem; }
  .hero .sub { margin-top:14px; }
  .hero .price-line { margin-top:16px; }
  section.band { padding:26px 0; }
  .hero-fig { margin-top:20px; }
  .hero-fig figcaption { margin-top:14px; }
  .split { gap:20px; }
  .media { gap:16px; }
  .who { margin-top:20px; gap:22px; }
  .privacy ul { margin-top:20px; }
  .privacy .lead { font-size:1rem; }
  .privacy li { padding:12px 0; }
  .faq summary { padding:14px 0; font-size:1rem; }
  .faq details > p { padding-bottom:16px; }
  .price-block { margin-top:26px; padding-top:20px; }
  .sub-h { margin-top:26px; }
  footer { padding:32px 0 40px; }
  .foot-row { margin-top:24px; padding-top:16px; }
  .legal { font-size:1rem; padding-bottom:56px; }
}