/*
 * Aussehen der Startseite — deutsche und englische Fassung teilen es sich.
 *
 * Ausgelagert, weil es die Seite zweimal gibt: Ohne diese Datei stünden
 * fünfhundert Zeilen CSS in beiden Dateien, und die erste Nachbesserung, die
 * jemand nur in einer davon macht, ließe die Fassungen auseinanderlaufen —
 * still, denn niemand ruft beide nebeneinander auf.
 *
 * Der Text bleibt doppelt. Das ist der Preis der Skriptfreiheit (die CSP
 * verbietet Inline-Skripte, also kann die Seite kein Wörterbuch nachladen) und
 * bewusst bezahlt; das Aussehen muss ihn nicht mitzahlen.
 */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/manrope.woff2') format('woff2');
}

:root {
  --ink: #0b0b0d;
  --ink-raised: #141418;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.2);
  --text: #f2eee6;
  --muted: #8d8d97;
  --accent: #e25c00;
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --radius: 10px;
  --radius-lg: 16px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(232, 98, 46, 0.1), transparent 70%),
    var(--ink);
  color: var(--text);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/*
  Ohne das ist per Tastatur nicht zu erkennen, wo man steht: Die Knöpfe
  sind Anker, und deren Standard-Umriss verschwindet auf dunklem Grund.
*/
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
}

.mark {
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--text);
}

nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-link {
  padding: 0 10px;
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
}

.nav-link:hover {
  color: var(--text);
}

/* Auf schmalen Geräten bleibt nur „Anmelden" — für Sprungmarken zu drei
   Abschnitten ist dort kein Platz, und ein umbrechender Kopf ist schlimmer
   als einer ohne Abkürzungen. */
@media (max-width: 640px) {
  .nav-link {
    display: none;
  }
  /* Der Sprachumschalter bleibt: Er ist für einen englischen Besucher der
     wichtigste Verweis der ganzen Seite, und auf dem Telefon erst recht. */
  .nav-link.is-lang {
    display: inline;
  }
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}

.button.primary {
  background: var(--accent);
  color: #16100c;
  font-weight: 600;
}

.button.ghost {
  border-color: var(--line);
  color: var(--text);
}

.button.ghost:hover {
  border-color: var(--line-strong);
}

header .button {
  height: 36px;
  padding: 0 14px;
  font-size: 14px;
}

/* --- Aufmacher ------------------------------------------------------ */

.hero {
  padding: 56px 0 44px;
  text-align: center;
}

.hero h1 {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-size: clamp(40px, 8vw, 76px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.hero p {
  max-width: 620px;
  margin: 0 auto 34px;
  color: var(--muted);
  font-size: clamp(17px, 2.4vw, 20px);
}

.cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/*
  Muss `.hero p` schlagen — sonst erbt der Hinweis dessen Schriftgröße und
  seinen Abstand von 34 px und wirkt wie ein zweiter Aufmacher statt wie
  eine Fußnote. Deshalb Klasse **und** Element im Selektor.
*/
p.cta-hint {
  max-width: 460px;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* --- Bild des Boards ------------------------------------------------- */

/*
  Eine Zeichnung, kein Bildschirmfoto.

  Sie behauptet nicht, die Oberfläche zu sein — sie zeigt den Aufbau: eine
  Fläche ohne Rand, darauf benannte Ausschnitte, und ein Kader, der von
  einem zum nächsten fährt. Genau das ist der Gedanke, den ein Satz nicht
  transportiert.

  Ein echtes Bildschirmfoto wäre besser und gehört hierher, sobald es eines
  gibt. Bis dahin ist eine ehrliche Zeichnung besser als eine reine
  Textseite.
*/
.stage {
  margin: 0 auto;
  max-width: 720px;
  padding: 0 24px;
}

.stage svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #0f0f13;
}

.stage figcaption {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

/* Der Kader wandert über die drei Frames und hält jeweils an. */
.viewfinder {
  animation: tour 15s ease-in-out infinite;
}

@keyframes tour {
  0%,
  18% {
    transform: translateX(0);
  }
  27%,
  45% {
    transform: translateX(196px);
  }
  54%,
  72% {
    transform: translateX(392px);
  }
  81%,
  100% {
    transform: translateX(0);
  }
}

/*
  Wer Bewegung abbestellt hat, bekommt keine. Der Kader steht dann auf dem
  ersten Frame — die Zeichnung bleibt vollständig lesbar.
*/
@media (prefers-reduced-motion: reduce) {
  .viewfinder {
    animation: none;
  }
}

/* --- Abschnitte ------------------------------------------------------ */

section {
  padding: 44px 0;
  border-top: 1px solid var(--line);
}

/* Scrollziel unter dem Sprung: Ohne das klebt die Überschrift am Bildrand. */
section[id] {
  scroll-margin-top: 16px;
}

h2 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 400;
}

.lede {
  margin: 0 0 26px;
  max-width: 640px;
  color: var(--muted);
}

/* --- Die drei Wege hinein -------------------------------------------- */

.ways {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.way {
  display: flex;
  flex-direction: column;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--ink-raised);
}

.way.is-featured {
  border-color: rgba(226, 92, 0, 0.5);
}

.way h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
}

.way p {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 14px;
}

/* Schiebt den Knopf an den unteren Rand, damit die drei Karten trotz
   verschieden langer Texte eine gemeinsame Grundlinie haben. */
.way .button {
  margin-top: auto;
}

.way-note {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* --- Was es kann ---------------------------------------------------- */

.features {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
}

.features:last-child {
  margin-bottom: 0;
}

.features h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
}

.features p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

h3.group {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Vertrauen ------------------------------------------------------- */

.facts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.facts li {
  padding: 14px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 15px;
}

.facts li:first-child {
  border-top: 0;
}

.facts b {
  display: block;
  color: var(--text);
  font-weight: 600;
}

/* --- Pakete --------------------------------------------------------- */

.plans {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--ink-raised);
}

.plan.is-featured {
  border-color: rgba(226, 92, 0, 0.5);
}

.plan h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.price {
  margin: 6px 0 4px;
  font-family: var(--serif);
  font-size: 34px;
}

.price span {
  color: var(--muted);
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
}

.billing {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 12px;
}

.plan ul {
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: 14px;
  list-style: none;
}

.plan li + li {
  margin-top: 3px;
}

.plans-note {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* --- Fragen ---------------------------------------------------------- */

details {
  border-top: 1px solid var(--line);
}

summary {
  padding: 14px 0;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

details p {
  margin: 0 0 16px;
  max-width: 640px;
  color: var(--muted);
  font-size: 15px;
}

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

footer {
  padding: 34px 0 48px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

footer a {
  color: var(--muted);
}

.foot-links {
  margin: 0 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

@media (max-width: 560px) {
  .cta .button {
    width: 100%;
  }
}