/* Adami Office – Produktseite. Keine externen Schriften oder Skripte (Datenschutz). */
:root {
  --bg: #F6F7FB;
  --surface: #FFFFFF;
  --sunk: #EEF1F7;
  --line: #DDE2EC;
  --tx1: #0F172A;
  --tx2: #45506A;
  --tx3: #55607A;
  --accent: #4F46E5;
  --accent-ink: #FFFFFF;
  --accent-soft: #E0E7FF;
  --chrome: #E7EAF2;
  --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 18px 40px -12px rgba(15, 23, 42, .18);
  /* Office-Farben der Apps (wie AdamiPalette / Admin-Seed) [v1.0.29] */
  --c-hub: #5B5FC7; --c-mail: #0F6CBD; --c-writer: #185ABD; --c-calc: #107C41;
  --c-notes: #7719AA; --c-cloud: #0364B8; --c-slides: #C43E1C;
  --ui: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Code", "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #09090F;
    --surface: #0E1018;
    --sunk: #141620;
    --line: #1E2235;
    --tx1: #F1F5F9;
    --tx2: #A3AEC2;
    --tx3: #8B95A7;
    --accent: #818CF8;
    --accent-ink: #0B0D16;
    --accent-soft: #1B2340;
    --chrome: #141620;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 24px 60px -20px rgba(0, 0, 0, .7);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--tx1);
  font: 16px/1.6 var(--ui);
  padding-inline: 20px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 1120px; margin: 0 auto; }
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; letter-spacing: -.015em; }
h1 { font-size: clamp(38px, 6.2vw, 64px); line-height: 1.04; font-weight: 700; }
h2 { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.15; font-weight: 650; }
h3 { font-size: 18px; line-height: 1.3; font-weight: 600; }
p { margin: 0; }
.eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--tx3); }
.mono { font-family: var(--mono); font-size: .9em; }

/* Navigation */
.nav { display: flex; align-items: center; gap: 24px; padding-block: 18px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 650; font-size: 17px; color: var(--tx1); text-decoration: none; }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, #185ABD, #5B5FC7 55%, #C43E1C); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.nav-links { display: flex; gap: 22px; margin-left: auto; font-size: 14.5px; }
.nav-links a { color: var(--tx2); text-decoration: none; }
.nav-links a:hover { color: var(--tx1); }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; padding-block: 56px 72px; }
.hero-copy { display: grid; gap: 22px; }
.lede { font-size: 19px; color: var(--tx2); max-width: 46ch; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 9px; font-weight: 600; font-size: 15px; text-decoration: none; border: 1px solid transparent; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { color: var(--tx1); border-color: var(--line); background: var(--surface); }
.btn-ghost:hover { border-color: var(--tx3); }
.meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--tx3); }

/* Fensterrahmen wie die Apps: eigene Titelleiste, drei Schaltflächen rechts */
.window { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.window-bar { display: flex; align-items: center; gap: 8px; height: 34px; padding-inline: 12px; background: var(--chrome); border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--tx3); }
.window-bar .dot { width: 14px; height: 14px; border-radius: 4px; }
.window-bar .ctrls { margin-left: auto; display: flex; gap: 16px; }
.window-bar .ctrls i { width: 10px; height: 10px; border: 1.5px solid var(--tx3); border-radius: 2px; display: block; opacity: .7; }
.window-bar .ctrls i:first-child { border-width: 0 0 1.5px 0; border-radius: 0; height: 6px; }
.window img { width: 100%; }

/* App-Leiste: Kacheln wie im Hub, farbige Oberkante; „folgt“-Kacheln gestrichelt */
.apps { padding-block: 24px 20px; display: grid; gap: 26px; }
.app-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.app { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: 10px; padding: 14px 14px 16px; display: grid; gap: 6px; align-content: start; }
.app .ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); font-weight: 700; font-family: var(--display); }
.app b { font-size: 15px; font-weight: 600; }
.app span { font-size: 13px; color: var(--tx2); line-height: 1.45; }
/* Noch nicht in der Flutter-Fassung enthaltene Apps */
.app.soon { border-top-style: dashed; background: var(--sunk); }
.app .soon-badge { justify-self: start; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--tx3); }
.figure-note { font-size: 13px; color: var(--tx3); }
.platforms { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.platforms li { display: grid; grid-template-columns: 92px 1fr; gap: 12px; }
.platforms b { font-weight: 600; }

/* Feature-Abschnitte */
.feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; padding-block: 64px; border-top: 1px solid var(--line); }
.feature.flip .feature-copy { order: 2; }
.feature-copy { display: grid; gap: 16px; }
.feature-copy p { color: var(--tx2); max-width: 52ch; }
.facts { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.facts li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 15px; color: var(--tx1); }
.facts li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c, var(--accent)); margin-top: 9px; }
.tag { justify-self: start; font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c, var(--accent)) 14%, transparent); color: var(--tx1); }
.tag::before { content: "● "; color: var(--c, var(--accent)); }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* Datenschutz im Produkt */
.privacy { padding-block: 64px; border-top: 1px solid var(--line); display: grid; gap: 28px; }
.privacy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 36px; }
.privacy-grid div { display: grid; gap: 6px; align-content: start; }
.privacy-grid p { color: var(--tx2); font-size: 15px; }

/* Anforderungen + Download */
.specs { padding-block: 64px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
.specs dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 12px 28px; font-size: 15px; }
.specs dt { color: var(--tx3); }
.specs dd { margin: 0; font-variant-numeric: tabular-nums; }
.download { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 24px; display: grid; gap: 12px; align-content: start; }
.download p { color: var(--tx2); }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--tx2); }
.status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #F59E0B; }

/* Rechtsseiten */
.legal { max-width: 72ch; padding-block: 40px 64px; display: grid; gap: 18px; }
.legal h2 { font-size: 22px; margin-top: 18px; }
.legal p, .legal li { color: var(--tx2); }
.legal ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.placeholder { border: 1px dashed var(--tx3); border-radius: 10px; padding: 14px 16px; color: var(--tx2); background: var(--sunk); }

footer { border-top: 1px solid var(--line); padding-block: 28px 40px; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 14px; color: var(--tx3); }
footer a { color: var(--tx2); }
footer .grow { flex: 1; }

@media (max-width: 980px) {
  .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .privacy-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .hero, .feature, .specs { grid-template-columns: 1fr; gap: 32px; }
  .feature.flip .feature-copy { order: 0; }
  .nav-links { display: none; }
}
@media (max-width: 560px) {
  .app-grid { grid-template-columns: 1fr 1fr; }
  .privacy-grid, .duo { grid-template-columns: 1fr; }
  .specs dl { grid-template-columns: 1fr; gap: 2px; }
  .specs dd { margin-bottom: 10px; }
}

/* App-Farben ohne Inline-Styles (CSP style-src 'self') */
[data-app="hub"] { --c: var(--c-hub); }
.c-hub-bg { background: var(--c-hub); }
[data-app="mail"] { --c: var(--c-mail); }
.c-mail-bg { background: var(--c-mail); }
[data-app="writer"] { --c: var(--c-writer); }
.c-writer-bg { background: var(--c-writer); }
[data-app="calc"] { --c: var(--c-calc); }
.c-calc-bg { background: var(--c-calc); }
[data-app="notes"] { --c: var(--c-notes); }
.c-notes-bg { background: var(--c-notes); }
[data-app="cloud"] { --c: var(--c-cloud); }
.c-cloud-bg { background: var(--c-cloud); }
[data-app="slides"] { --c: var(--c-slides); }
.c-slides-bg { background: var(--c-slides); }
.specs-copy { display: grid; gap: 22px; align-content: start; }