/* Ghostify — Landing
   Dieselben Marken-Token wie die App (src/Ghostify.App/ui/app.css). Bewusst kopiert und
   nicht geteilt: die App liefert ihr CSS neben der Exe aus, die Seite kommt vom Webserver.
   Ändert sich die Farbe, muss sie an beiden Stellen nachgezogen werden — dafür hängt die
   Seite an keinem Build-Schritt. */

/* ---------------------------------------------------------------- Schriften
   Selbst ausgeliefert, nicht von Googles Servern. Beim Einbinden über fonts.googleapis.com
   geht die IP jedes Besuchers an Google; das LG München I hat das ohne Einwilligung als
   DSGVO-Verstoss gewertet (3 O 17493/20). Nebeneffekt: eine Abhängigkeit weniger und ein
   Rundweg weniger beim Laden.

   Nur der lateinische Schnitt, nur die sechs tatsächlich benutzten Gewichte. */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('schrift/Barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('schrift/Barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('schrift/Barlow-700.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('schrift/BarlowCondensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('schrift/BarlowCondensed-700.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('schrift/BarlowCondensed-800.woff2') format('woff2'); }

:root {
  --ac: #D40000;
  --ac-text: #FF4B4B;
  --bg: #090909;
  --panel: #0D0D0D;
  --panel-2: #111111;
  --line: #1E1E1E;
  --soft: #1A1A1A;
  --text: #EEECE4;
  --dim: #8B8880;
  --mute: #5C5A55;
  --ghost: #3A3A38;
  --ok: #44C47D;
  --warn: #E2A33B;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --aus: cubic-bezier(.16, 1, .3, 1);   /* weiches Auslaufen für längere Wege */
  --rand: 1px solid var(--line);
  --breite: 1320px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 100px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Der Hintergrund war flaches Schwarz — dadurch wirkte jede Fläche gleich weit weg.
   Ein feines Raster plus ein roter Schimmer oben geben Tiefe, ohne laut zu werden. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(900px 520px at 50% -140px, rgba(212, 0, 0, .13), transparent 70%),
    radial-gradient(700px 420px at 88% 8%, rgba(212, 0, 0, .06), transparent 72%);
}
body::after {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(1200px 800px at 50% 0, #000 20%, transparent 85%);
}

a { color: inherit; }

/* Tastaturbedienung: es gab bisher keine einzige :focus-Regel, also nur den Browser-
   Standard — der sieht in dieser Gestaltung zufällig aus und verschwindet auf dunklem
   Grund fast. :focus-visible statt :focus, damit ein Mausklick keinen Rahmen hinterlässt. */
:focus-visible {
  outline: 2px solid var(--ac-text);
  outline-offset: 3px;
}

/* Sprungmarke für Tastatur und Screenreader: liegt ausserhalb des Bildes und kommt
   erst hervor, wenn sie den Fokus bekommt. */
.sprung {
  position: fixed; top: 10px; left: 10px; z-index: 100;
  transform: translateY(-160%);
  background: var(--ac); color: #fff; padding: 11px 18px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase; text-decoration: none;
  transition: transform .2s var(--aus);
}
.sprung:focus { transform: none; }
/* height: auto ist Pflicht, sobald das Bild width/height-Attribute trägt — sonst behält
   es seine Attributhöhe, während die Breite schrumpft, und wird gestreckt. Genau daran
   war der Held 1026 statt 560 px hoch. */
img { max-width: 100%; height: auto; display: block; }

.wrap { width: min(var(--breite), 100% - 56px); margin-inline: auto; }

.lbl {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: 3.4px;
  text-transform: uppercase; color: var(--mute);
}
.lbl-r { color: var(--ac-text); }

h1, h2, h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  line-height: .98; margin: 0;
}

/* ---------------------------------------------------------------- Partnerleiste
   Erscheint nur bei ?ref=CODE im Link. Sie steht über der Kopfzeile und nicht fest am
   oberen Rand: wer liest, soll sie wegscrollen können. Eine Leiste, die mitfährt, wäre
   eine Werbefläche — das hier ist eine Mitteilung, die man einmal zur Kenntnis nimmt. */
.reflauf { background: #140606; border-bottom: 1px solid #2A1414; }
.reflauf .wrap {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 11px 0; font-size: 13.5px;
}
.reflauf code {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: 19px; letter-spacing: 3px; color: var(--ac);
  background: none; padding: 0;
}
.reflauf .text { color: var(--dim); min-width: 0; }
.reflauf button {
  margin-left: auto; flex: 0 0 auto;
  border: 1px solid #3A1A1A; background: transparent; color: inherit;
  font: inherit; padding: 7px 14px; cursor: pointer;
}
.reflauf button:hover { border-color: var(--ac); }

/* Die Kopfzeile klebt oben — mit Leiste davor wäre sonst die Leiste darunter weg,
   sobald man scrollt, und der Code mit ihr. Das ist in Ordnung: er steht in der Adresse
   und kommt bei jedem Neuladen wieder. */

/* ---------------------------------------------------------------- Kopfzeile */
header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
}
header.ab {
  background: rgba(9, 9, 9, .82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}
.kopf { display: flex; align-items: center; gap: 28px; padding: 16px 0; }
.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; }
.marke .wm { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 21px; letter-spacing: 3px; text-transform: uppercase; }
.kopf nav { display: flex; gap: 30px; margin-left: auto; }
.kopf nav a {
  position: relative; font-size: 13.5px; color: var(--dim); text-decoration: none;
  padding: 4px 0; transition: color .2s var(--ease);
}
/* Unterstrich wächst aus der Mitte statt hart zu erscheinen. */
.kopf nav a::after {
  content: ''; position: absolute; left: 50%; right: 50%; bottom: 0; height: 1.5px;
  background: var(--ac); transition: left .25s var(--aus), right .25s var(--aus);
}
.kopf nav a:hover { color: var(--text); }
.kopf nav a:hover::after { left: 0; right: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 0 22px; min-height: 44px; border: var(--rand); background: transparent;
  color: var(--text); font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 14px; letter-spacing: 1.8px; text-transform: uppercase; text-decoration: none;
  cursor: pointer; position: relative; overflow: hidden;
  transition: background .2s var(--ease), border-color .2s var(--ease),
              transform .2s var(--aus), box-shadow .25s var(--ease);
}
.btn:hover { background: var(--panel-2); border-color: #333; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn.rot { background: var(--ac); border-color: var(--ac); }
.btn.rot:hover { background: #E81010; border-color: #E81010; box-shadow: 0 10px 34px -12px rgba(212, 0, 0, .9); }
.btn.gross { min-height: 56px; padding: 0 32px; font-size: 15.5px; }

/* ---------------------------------------------------------------- Held */
/* Keine min-height: die hatte den Block auf 1002 px aufgeblasen, obwohl der Inhalt
   knapp 560 px braucht — bei 900 px Fensterhöhe lagen die Knöpfe damit unter der Kante.
   Jetzt bestimmt der Inhalt die Höhe, und unter dem Held beginnt sichtbar der nächste
   Abschnitt. Das ist der Hinweis, dass es weitergeht. */
.held {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: 60px; align-items: center;
  padding: 52px 0 84px;
}
.held h1 { font-size: clamp(46px, 5.6vw, 88px); }
.held h1 .zeile { display: block; overflow: hidden; }
.held .unter { font-size: 17.5px; color: var(--dim); max-width: 50ch; margin: 26px 0 0; }
.held .knoepfe { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }
.marker { display: flex; flex-wrap: wrap; gap: 11px 24px; margin-top: 32px; }
.marker span { font-size: 12.5px; color: var(--mute); display: flex; align-items: center; gap: 9px; }
.marker span::before { content: ''; width: 5px; height: 5px; background: var(--ac); flex: 0 0 auto; }

/* Der Screenshot stand vorher nackt daneben. Jetzt leicht gedreht, mit Schein darunter
   und nach unten auslaufend — er gehört damit zur Seite, statt darauf zu liegen. */
.schirm { position: relative; margin: 0; perspective: 2000px; }
.schirm::before {
  content: ''; position: absolute; inset: 8% -6% -14% -2%; z-index: 0;
  background: radial-gradient(60% 55% at 50% 50%, rgba(212, 0, 0, .3), transparent 72%);
  filter: blur(46px);
}
.schirm .rahmen {
  position: relative; z-index: 1;
  border: var(--rand); background: var(--panel); padding: 8px;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .02) inset;
  transform: rotateY(-7deg) rotateX(2.5deg) translateZ(0);
  transition: transform .7s var(--aus), box-shadow .7s var(--aus);
}
.schirm:hover .rahmen {
  transform: rotateY(-2deg) rotateX(.5deg);
  box-shadow: 0 46px 110px -42px rgba(0, 0, 0, .95);
}
.schirm img {
  border: 1px solid #141414;
  mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
}
.schirm figcaption { position: relative; z-index: 1; font-size: 11.5px; color: var(--mute); padding: 14px 4px 0; text-align: center; }

/* ---------------------------------------------------------------- Zahlen */
.zahlen {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: var(--rand);
}
.zahl { background: var(--panel); padding: 26px 24px; transition: background .25s var(--ease); }
.zahl:hover { background: var(--panel-2); }
.zahl b {
  display: block; font-family: 'Barlow Condensed', sans-serif;
  font-size: 46px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.zahl span { display: block; font-size: 12.5px; color: var(--dim); margin-top: 9px; }

/* ---------------------------------------------------------------- Abschnitte */
section { padding: 96px 0; border-top: var(--rand); }
.titel { max-width: 64ch; }
.titel h2 { font-size: clamp(32px, 3.9vw, 50px); margin-top: 14px; }
.titel p { color: var(--dim); margin: 20px 0 0; font-size: 16px; }

.karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.karte {
  border: var(--rand); background: var(--panel); padding: 28px 26px;
  display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden;
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .3s var(--aus);
}
/* Dünne rote Kante, die beim Überfahren von links einläuft. */
.karte::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--ac); transform: scaleY(0); transform-origin: top;
  transition: transform .35s var(--aus);
}
.karte:hover { border-color: #2E2E2C; background: var(--panel-2); transform: translateY(-3px); }
.karte:hover::before { transform: scaleY(1); }
.karte h3 { font-size: 20px; }
.karte p { color: var(--dim); font-size: 14.5px; margin: 0; flex: 1 1 auto; }
.tag {
  align-self: flex-start; font-family: 'Barlow Condensed', sans-serif; font-size: 11px;
  font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
  padding: 4px 9px; border: 1px solid #1F3A28; color: var(--ok); background: #0C1510;
}
.tag.neutral { border-color: var(--line); color: var(--dim); background: var(--soft); }

/* ---------------------------------------------------------------- Grenzen */
.grenzen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: var(--rand); margin-top: 48px; }
.grenze { background: var(--panel); padding: 30px 28px; transition: background .25s var(--ease); }
.grenze:hover { background: var(--panel-2); }
.grenze h3 { font-size: 19px; color: var(--ac-text); }
.grenze p { color: var(--dim); font-size: 14.5px; margin: 11px 0 0; }

/* ---------------------------------------------------------------- Pläne */
.plaene { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: var(--rand); margin-top: 48px; }
.plan { background: var(--panel); padding: 34px 28px; display: flex; flex-direction: column; transition: background .25s var(--ease); }
.plan:hover { background: var(--panel-2); }
.plan.hervor { background: #100B0B; border-top: 3px solid var(--ac); margin-top: -3px; }
.plan.hervor:hover { background: #140C0C; }
.plan .name { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 28px; letter-spacing: 1.8px; text-transform: uppercase; }
.plan .preis { font-family: 'Barlow Condensed', sans-serif; font-size: 42px; font-weight: 800; line-height: 1; margin-top: 12px; }
.plan .preis.offen { font-size: 19px; color: var(--warn); letter-spacing: .4px; line-height: 1.3; }
.plan ul { list-style: none; padding: 18px 0 0; margin: 18px 0 0; border-top: var(--rand); flex: 1 1 auto; }
.plan li { display: flex; gap: 10px; font-size: 14.5px; padding: 7px 0; }
.plan li::before { content: '✓'; color: var(--ok); flex: 0 0 auto; }
.plan li.aus { color: var(--mute); }
.plan li.aus::before { content: '–'; color: var(--ghost); }
.plan .btn { margin-top: 24px; }
.abzeichen { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; background: var(--ac); padding: 3px 8px; margin-left: 9px; vertical-align: 3px; }

/* ---------------------------------------------------------------- Partnerseite */

/* Held ohne Screenshot-Spalte. */
.held.einspaltig { grid-template-columns: minmax(0, 76ch); }

/* „offen" statt einer Zahl — kleiner und in Warnfarbe, damit es nicht wie ein Wert aussieht. */
.zahl b.offen { font-size: 26px; color: var(--warn); letter-spacing: .5px; }

.schritte { list-style: none; counter-reset: s; padding: 0; margin: 48px 0 0; display: grid; gap: 1px; background: var(--line); border: var(--rand); }
.schritte li { background: var(--panel); padding: 26px 28px; display: flex; gap: 24px; align-items: flex-start; transition: background .25s var(--ease); }
.schritte li:hover { background: var(--panel-2); }
.schritte .nr { font-family: 'Barlow Condensed', sans-serif; font-size: 30px; font-weight: 800; color: var(--ghost); flex: 0 0 52px; line-height: 1; }
.schritte h3 { font-size: 19px; }
.schritte p { color: var(--dim); font-size: 14.5px; margin: 9px 0 0; max-width: 78ch; }

.regeln { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: var(--rand); }
.regeln li { background: var(--panel); padding: 20px 24px; display: flex; gap: 14px; align-items: flex-start; font-size: 14.5px; color: var(--dim); }
/* Kreuz statt Haken: diese Liste sagt, was nicht geht. */
.regeln li::before { content: '✕'; color: var(--ac-text); flex: 0 0 auto; font-size: 13px; line-height: 1.6; }

.faq { margin-top: 48px; border: var(--rand); background: var(--panel); }
.faq details { border-top: var(--rand); }
.faq details:first-child { border-top: none; }
.faq summary {
  padding: 20px 24px; cursor: pointer; list-style: none;
  font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
  display: flex; align-items: center; gap: 14px;
  transition: background .2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
/* Plus, das sich beim Öffnen zum Minus dreht. */
.faq summary::after {
  content: '+'; margin-left: auto; font-size: 24px; color: var(--ac-text);
  line-height: 1; transition: transform .3s var(--aus);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { background: var(--panel-2); }
.faq p { margin: 0; padding: 0 24px 22px; color: var(--dim); font-size: 14.5px; max-width: 80ch; }
.faq code { font-family: ui-monospace, 'Cascadia Mono', monospace; font-size: 13px; background: var(--soft); padding: 1px 6px; }

@media (max-width: 1080px) {
  .regeln { grid-template-columns: minmax(0, 1fr); }
  .schritte li { gap: 16px; }
}

/* ---------------------------------------------------------------- Hinweis */
.hinweis { border: 1px solid #3A2A12; background: #130F08; padding: 20px 22px; display: flex; gap: 14px; margin-top: 34px; font-size: 14.5px; color: #D8CDB6; }
.hinweis b { color: var(--warn); }

/* ---------------------------------------------------------------- Fuss */
footer { border-top: var(--rand); padding: 60px 0 44px; }
.fuss { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; }
.fuss h4 { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2.6px; text-transform: uppercase; color: var(--mute); margin: 0 0 14px; }
.fuss a { display: block; font-size: 13.5px; color: var(--dim); text-decoration: none; padding: 5px 0; transition: color .2s var(--ease), transform .2s var(--aus); }
.fuss a:hover { color: var(--text); transform: translateX(3px); }
.klein { font-size: 12.5px; color: var(--mute); max-width: 46ch; margin: 14px 0 0; }
.schluss { border-top: var(--rand); margin-top: 42px; padding-top: 24px; font-size: 12.5px; color: var(--mute); display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------------------------------------------------------------- Einblenden
   Jeder markierte Block startet leicht versetzt und blass und fährt beim Hereinscrollen
   an seinen Platz. Ohne JavaScript bleibt alles sichtbar — die Klasse „bereit" setzt
   erst das Skript, und nur dann wird überhaupt versteckt. */
.bereit [data-auf] { opacity: 0; transform: translateY(22px); }
.bereit [data-auf].da {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--aus);
  transition-delay: var(--verzug, 0ms);
}

/* ---------------------------------------------------------------- Schmal */
@media (max-width: 1080px) {
  .held { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 24px; gap: 44px; }
  .schirm .rahmen { transform: none; }
  .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .karten, .plaene, .grenzen { grid-template-columns: minmax(0, 1fr); }
  .plan.hervor { margin-top: 0; }
  .kopf nav { display: none; }
  section { padding: 72px 0; }
}
@media (max-width: 560px) {
  .wrap { width: calc(100% - 32px); }
  .zahlen, .fuss { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .bereit [data-auf] { opacity: 1; transform: none; }
  .schirm .rahmen { transform: none; }
}