/* komet.email – Landingpage. Designkatalog Komet (docs/design/README.md): Papier, Kopf mit dem Weltraumfoto
   (docs/design/landingkopf.md). Die Werte stammen aus postfach/static/tokens.css (hell) und
   tokens-mail.css (Papier, Tinte, Bildfarben).
   tests/test_landing.py prüft, dass sie gleich bleiben.
   Kein JavaScript, keine externen Quellen, keine style-Attribute (CSP: style-src 'self'). */

@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 700; font-display: swap; src: url(schriften/unbounded-700.woff2) format("woff2"); }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 800; font-display: swap; src: url(schriften/unbounded-800.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url(schriften/figtree-400.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url(schriften/figtree-600.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap; src: url(schriften/figtree-700.woff2) format("woff2"); }

:root {
  --surface: #f6f3ed;
  --surface-raised: #fffdf8;
  --line: #e4ded2;
  --line-strong: #8f897a;
  --ink: #161a2e;
  --ink-muted: #555c75;
  --kobalt: #2547d0;
  --on-kobalt: #ffffff;
  --mango: #ffb020;
  --koralle: #ff6b57;
  --link: var(--kobalt);
  --shadow-press: 0 3px 0 #161a2e2e;
  --focus-ring: 0 0 0 2px #fffdf8, 0 0 0 4px #2547d0;
  --surface-pattern: radial-gradient(circle, #8f897a47 1.2px, transparent 1.5px);
  --status-offen: #161a2e;
  --on-mango: #161a2e;
  --on-koralle: #161a2e;
  --tinte: #161a2e;
  --on-tinte: #ffffff;
  --eigen-flaeche: #e0e5f8;
  --eigen-rahmen: #8597d9;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-full: 9999px;
  --font-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --font-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh;
  background-color: var(--surface); background-image: var(--surface-pattern);
  background-size: 24px 24px; background-attachment: fixed;
  color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 24px;
}
a { color: var(--link); }
:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* Eine Spalte, höchstens 760px, ab 320px nutzbar */
.rahmen {
  max-width: 760px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column;
  padding: max(var(--space-3), env(safe-area-inset-top, 0px)) max(var(--space-4), env(safe-area-inset-right, 0px))
    max(var(--space-4), env(safe-area-inset-bottom, 0px)) max(var(--space-4), env(safe-area-inset-left, 0px));
}
main { flex: 1; }

/* Kopf: Zeichen und Name links, Anmelden rechts */
.kopf {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4);
  padding-bottom: var(--space-3); border-bottom: 2px solid var(--line);
}
.marke {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px;
  color: var(--ink); text-decoration: none;
  font-family: var(--font-display); font-weight: 800; font-size: 15px; line-height: 16px; letter-spacing: -0.01em;
}
.zeichen { width: 44px; height: 24px; display: block; flex: none; }

/* Knöpfe: höchstens einer in Kobalt je Seite, die anderen als Nebenaktion */
a.knopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-6);
  border-radius: var(--radius-md); border: 2px solid var(--kobalt); background: var(--kobalt); color: var(--on-kobalt);
  box-shadow: var(--shadow-press); font-size: 15px; line-height: 20px; font-weight: 600; text-decoration: none;
  transition: transform 80ms ease, box-shadow 80ms ease;
}
a.knopf.neben { background: var(--surface-raised); border-color: var(--line-strong); color: var(--ink); padding: 0 var(--space-4); }
a.knopf:active { transform: translateY(2px); box-shadow: none; }
a.knopf:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

h1, h2 { font-family: var(--font-display); overflow-wrap: anywhere; }
h1 { font-size: 30px; line-height: 36px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 var(--space-4); }
h2 { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 var(--space-4); }
h3 { font-size: 17px; line-height: 24px; font-weight: 700; margin: 0; }
p { margin: 0 0 var(--space-3); }
.klein { color: var(--ink-muted); font-size: 15px; line-height: 20px; }

/* Kopfbereich */
.held { padding: var(--space-8) 0 var(--space-6); }
.einleitung { font-size: 18px; line-height: 28px; max-width: 36rem; }
.aktionen { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0 var(--space-4); }

/* Beispiel einer Unterhaltung, gebaut wie die Baumansicht der App */
.beispiel {
  margin: 0; padding: var(--space-3); border: 2px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.beispiel figcaption {
  margin-bottom: var(--space-2); color: var(--ink-muted);
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.betreff { font-family: var(--font-display); font-size: 16px; line-height: 22px; font-weight: 700; margin: 0 0 var(--space-3); }
ol.strahl { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; }
ol.strahl::before { content: ""; position: absolute; left: 7px; top: 14px; bottom: 14px; border-left: 2px solid var(--line-strong); }
ol.strahl > li { position: relative; margin-top: var(--space-2); }
ol.strahl > li:first-child { margin-top: 0; }
.punkt::before {
  content: ""; position: absolute; left: -21px; top: 15px; width: 10px; height: 10px; border-radius: var(--radius-full);
  background: var(--surface-raised); border: 2px solid var(--line-strong); z-index: 1;
}
.punkt.eigen::before { background: var(--kobalt); border-color: var(--kobalt); }
.punkt.offen::before { background: var(--surface-raised); border-color: var(--status-offen); box-shadow: 0 0 0 3px var(--surface-raised), 0 0 0 5px var(--status-offen); }
.punkt.zweig { margin-left: 26px; }
.punkt.zweig::before { display: none; }
.punkt.zweig::after {
  content: ""; position: absolute; left: -40px; top: -6px; width: 30px; height: 26px;
  border-left: 2px solid var(--line-strong); border-bottom: 2px solid var(--line-strong); border-bottom-left-radius: 14px;
}
.nachricht {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--space-2); padding: var(--space-2) var(--space-3);
  border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
}
.nachricht .wer { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nachricht .wann { color: var(--ink-muted); font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nachricht .auf { grid-column: 1 / -1; color: var(--ink-muted); font-size: 12px; line-height: 16px; }
.nachricht .text { grid-column: 1 / -1; font-size: 15px; line-height: 20px; }
.eigen > .nachricht { background: var(--eigen-flaeche); border-color: var(--eigen-rahmen); }
.eigen > .nachricht .wer { color: var(--kobalt); }

/* Abschnitte */
.abschnitt { padding-top: var(--space-8); }
.funktionen, .schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.karte, .funktionen > li {
  padding: var(--space-4); border: 2px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised);
}
.funktionen p, .schritte p, .karte p { margin: var(--space-1) 0 0; color: var(--ink-muted); font-size: 15px; line-height: 22px; }
/* kleine Kachel wie im Logo; höchstens drei Markenfarben je Seite: Kobalt, Mango, Koralle */
.funktionen h3 { display: flex; align-items: center; gap: var(--space-2); }
.funktionen h3::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--kobalt); }
.funktionen > li:nth-child(3n+2) h3::before { background: var(--mango); }
.funktionen > li:nth-child(3n) h3::before { background: var(--koralle); }

.schritte { counter-reset: schritt; }
.schritte > li { counter-increment: schritt; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 var(--space-3); }
.schritte > li::before {
  content: counter(schritt); grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--radius-full); border: 2px solid var(--ink); font-family: var(--font-display); font-weight: 800;
}
.schritte h3 { align-self: center; }
.schritte + .klein { margin-top: var(--space-4); }

.preis .marke-klein {
  margin: 0; color: var(--ink-muted);
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.preis .betrag { margin: var(--space-1) 0 0; color: var(--ink); font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 800; }

/* Seiten mit Text (Impressum, Datenschutz) */
.text-seite { padding-top: var(--space-8); max-width: 44rem; }
.text-seite h2 { font-size: 18px; line-height: 24px; margin: var(--space-6) 0 var(--space-2); }
.text-seite p, .text-seite li { line-height: 24px; }
.text-seite ul { margin: 0 0 var(--space-3); padding-left: 1.25rem; }
.text-seite li + li { margin-top: var(--space-1); }
.text-seite a { overflow-wrap: anywhere; }

/* Fuß */
.fuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-4);
  margin-top: var(--space-8); padding-top: var(--space-3); border-top: 2px solid var(--line);
}
.fuss nav { display: flex; gap: var(--space-4); }
.fuss a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-muted); font-size: 15px; }
.fuss a:hover { color: var(--ink); }
.fuss .klein { margin: 0 0 0 auto; }

/* ---------- Startseite: Kopf mit Weltraumfoto (Baustein „Landingkopf“, 06.11.2026) ---------- */
.innen {
  width: 100%; max-width: 1000px; margin: 0 auto;
  padding-left: max(var(--space-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-4), env(safe-area-inset-right, 0px));
}
/* Leiste über dem Bild: Zeichen und Name, kein Anmelden. Seitenrand wie der Textblock */
.startseite .kopf {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3; border-bottom: 0;
  padding: max(22px, env(safe-area-inset-top, 0px)) clamp(20px, 5vw, 64px) 22px;
}
.kopf-nacht .marke { color: #ffffff; }
/* Kopf in #03040c, dem Schwarz des Bildes; der Text steht auf dem schwarzen All oben links */
.weltraum { position: relative; overflow: hidden; background: #03040c; color: #ffffff; }
.held { position: relative; z-index: 2; padding: 116px clamp(20px, 5vw, 64px) 0; }
.held-text { max-width: 600px; }
.kicker {
  display: inline-block; margin: 0 0 22px; padding: 7px 12px; border-radius: var(--radius-full); border: 1.5px solid #ffffff59;
  color: #ffffff; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.held h1 { margin: 0 0 20px; color: #ffffff; font-size: clamp(32px, 4.2vw, 54px); line-height: 1.08; letter-spacing: -0.02em; }
.weltraum .einleitung { margin: 0 0 32px; max-width: 480px; color: #e6e9f5; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; }
.weltraum .aktionen { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }
.weltraum a.knopf { min-height: 48px; padding: 0 22px; border-radius: 12px; font-size: 16px; font-weight: 700; }
/* Höchstens ein Mango-Knopf im Kopf, daneben ein Rahmenknopf; kein Kobalt im Kopf */
a.knopf.mango { background: var(--mango); border-color: var(--mango); color: var(--on-mango); box-shadow: var(--shadow-press); }
a.knopf.auf-nacht { background: #03040c; border-color: #ffffffb3; color: #ffffff; box-shadow: none; }
.weltraum a.knopf:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; box-shadow: none; }
/* Bild in voller Breite, 16:9, unten bündig, um 27 % seiner Höhe unter den Textblock gerückt */
.kopfbild { position: relative; z-index: 1; aspect-ratio: 16 / 9; margin-top: calc(-0.27 * 56.25vw); }
.kopfbild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
/* Übergänge: oben ohne Kante aus dem Kopf, unten läuft die Erde ins Papier aus */
.kopfbild::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, #03040c 0%, #03040c00 22%, #03040c00 84%, #f6f3ed 100%);
}
@media (max-width: 720px) {
  /* Handy: Ausschnitt 4:3, damit Satellit, Haus und Brief groß genug bleiben */
  .kopfbild { aspect-ratio: 4 / 3; margin-top: calc(-0.16 * 75vw); }
  .kopfbild img { object-position: 38% 100%; }
}
.papier { padding-top: var(--space-4); }
.papier > .beispiel { max-width: 760px; }

/* „Du entscheidest, was wo landet.“: dunkler Abschnitt in Tinte mit den drei Kacheln und dem Spam-Rand */
.tinte { margin-top: var(--space-8); padding: 48px 0; background: var(--tinte); color: var(--on-tinte); }
.tinte h2 { color: var(--on-tinte); }
.kacheln { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kachel { display: grid; gap: var(--space-1); align-content: start; padding: var(--space-4); border-radius: var(--radius-md); box-shadow: 0 3px 0 #00000099; }
.kachel img { margin-bottom: var(--space-2); }
.kachel h3 { color: inherit; }
.kachel p { margin: 0; font-size: 15px; line-height: 22px; }
.k-antworten { background: var(--kobalt); color: var(--on-kobalt); }
.k-abhaken { background: var(--mango); color: var(--on-mango); }
.k-aussortieren { background: var(--koralle); color: var(--on-koralle); }
.spamrand { margin-top: var(--space-6); padding-left: var(--space-4); border-left: 2px solid #343a5c; max-width: 640px; }
.spamrand-titel { margin: 0 0 var(--space-1); color: #a9b0cc; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.spamrand ul { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.spamrand li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-3); padding: var(--space-2) 0; color: #a9b0cc; font-size: 15px; line-height: 20px; }
.spamrand li + li { border-top: 1px solid #2a2f4a; }
.spamrand .wer { font-weight: 600; }
.marke-vielleicht {
  display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-full);
  border: 2px solid #f1f3fa; color: #f1f3fa; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.tinte .klein { margin: 0; color: #a9b0cc; }
.fuss.innen { margin-top: var(--space-8); }

@media (min-width: 600px) {
  h1 { font-size: 40px; line-height: 44px; }
  .funktionen { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
  .punkt.zweig { margin-left: 18px; }
  .punkt.zweig::after { left: -32px; width: 22px; }
  .fuss .klein { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  a.knopf { transition: none; }
  a.knopf:active { transform: none; }
}