/* Fraunces selbst gehostet — die CSP der Domain erlaubt keine Fremd-Fonts
   (CLAUDE.md, Regel 1). IBM Plex ist durch Systemstapel ersetzt. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/fraunces-latin.woff2') format('woff2');
}

  :root {
    /* Nächtlicher Atlas. Neutrale mit Blaustich — gewählt, nicht geerbt. */
    --void: #04060e;
    --abyss: #0a1024;
    --ocean: #12203f;
    --meridian: rgba(148, 186, 255, 0.14);
    --meridian-lit: rgba(148, 186, 255, 0.3);
    --mist: #96a3c2;
    --mist-dim: #68748f;
    --chalk: #eef1f8;

    /* Akzent: das Rosé der Liebe-Nadel. Die Kühnheit wird hier ausgegeben. */
    --rose: #f43f5e;
    --rose-lit: #ff6d84;
    --gold: #ffca4a;

    /* Nadeltypen, identisch mit der App */
    --pin-date: #f59e0b;
    --pin-friend: #22d3ee;
    --pin-love: #e11d48;
    --pin-ons: #ff6d84;

    --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    --body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;
    --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

    --measure: 34rem;
    --gutter: clamp(1.25rem, 5vw, 2.5rem);
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--void);
    color: var(--chalk);
    font-family: var(--body);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 {
    font-family: var(--display);
    font-variation-settings: 'SOFT' 20, 'WONK' 1;
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.018em;
    text-wrap: balance;
    margin: 0;
  }

  p { margin: 0; }
  a { color: inherit; }

  :focus-visible {
    outline: 2px solid var(--rose-lit);
    outline-offset: 3px;
    border-radius: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* ---------------------------------------------------------------- Gerüst */

  .wrap {
    width: 100%;
    max-width: var(--measure);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .wrap.wide { max-width: 58rem; }

  section {
    padding-block: clamp(3.5rem, 9vw, 6.5rem);
    position: relative;
  }

  /* Sektionsmarken sind Koordinaten, keine Nummern — das Motiv ist Kartografie,
     und die Abschnitte sind keine Reihenfolge. Nur der Ablauf unten ist eine. */
  .coord {
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.19em;
    text-transform: uppercase;
    color: var(--mist-dim);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }

  .coord::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--meridian);
  }

  .lede {
    color: var(--mist);
    font-size: 1.125rem;
    margin-top: 1.25rem;
  }

  /* ------------------------------------------------------------------ Kopf */

  .topbar {
    position: absolute;
    inset-inline: 0;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem var(--gutter);
  }

  .mark {
    font-family: var(--display);
    font-variation-settings: 'SOFT' 20, 'WONK' 1;
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
  }

  .mark em {
    font-style: italic;
    color: var(--rose-lit);
  }

  .langs {
    margin-left: auto;
    display: flex;
    gap: 0.25rem;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
  }

  .langs button {
    font: inherit;
    letter-spacing: inherit;
    background: none;
    border: 1px solid var(--meridian);
    color: var(--mist-dim);
    padding: 0.4rem 0.6rem;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.18s, border-color 0.18s;
  }

  .langs button[aria-pressed='true'] {
    color: var(--chalk);
    border-color: var(--meridian-lit);
  }

  /* ------------------------------------------------------------------ Hero */

  .hero {
    min-height: 100svh;
    display: grid;
    align-content: center;
    padding-block: 7rem 4rem;
    isolation: isolate;
    /* Der Canvas ist absichtlich breiter als der Viewport — hier geklippt,
       damit die Seite nie seitlich scrollt. */
    overflow: hidden;
  }

  /* Der Held ist die These: der Globus selbst, handgerechnet. */
  #globe {
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 46%;
    translate: -50% -50%;
    width: min(118vw, 52rem);
    aspect-ratio: 1;
    /* Der Globus ist die These, nicht der Text-Konkurrent: er bleibt Atmosphäre. */
    opacity: 0.62;
  }

  .hero::after {
    /* Verlauf nach unten, damit der Text auf dem Globus liest */
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
      to bottom,
      rgba(4, 6, 14, 0.62) 0%,
      rgba(4, 6, 14, 0.34) 30%,
      rgba(4, 6, 14, 0.66) 62%,
      rgba(4, 6, 14, 0.94) 86%,
      var(--void) 100%
    );
  }

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mist);
    border: 1px solid var(--meridian);
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    background: rgba(10, 16, 36, 0.7);
    backdrop-filter: blur(10px);
  }

  h1 {
    font-size: clamp(2.75rem, 11vw, 4.75rem);
    margin-top: 1.5rem;
  }

  h1 em {
    font-style: italic;
    font-variation-settings: 'SOFT' 40, 'WONK' 1;
    color: var(--rose-lit);
  }

  .promise {
    font-family: var(--mono);
    font-size: 0.8125rem;
    letter-spacing: 0.03em;
    color: var(--gold);
    margin-top: 1.75rem;
    padding-left: 0.9rem;
    border-left: 2px solid var(--gold);
  }

  .cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2.25rem;
  }

  .cta {
    font: 600 0.9375rem/1 var(--body);
    text-decoration: none;
    padding: 1rem 1.5rem;
    border-radius: 2px;
    background: var(--rose);
    color: #fff;
    border: 1px solid var(--rose);
    transition: background 0.18s, translate 0.18s;
  }

  .cta:hover { background: var(--rose-lit); translate: 0 -1px; }

  .cta.quiet {
    background: none;
    color: var(--mist);
    border-color: var(--meridian);
  }

  .cta.quiet:hover { color: var(--chalk); background: rgba(148, 186, 255, 0.06); }

  .fineprint {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--mist-dim);
    margin-top: 1.25rem;
    letter-spacing: 0.02em;
  }

  /* -------------------------------------------------------------- Versprechen */

  .promise-block { border-top: 1px solid var(--meridian); }

  h2 { font-size: clamp(1.75rem, 5.5vw, 2.5rem); }

  .body-copy { color: var(--mist); margin-top: 1.25rem; }
  .body-copy + .body-copy { margin-top: 1rem; }
  .body-copy strong { color: var(--chalk); font-weight: 600; }

  /* Die Grenzen stehen gleichgewichtig neben dem Versprechen. Landingpages
     verstecken sowas — genau deshalb ist es hier das Verkaufsargument. */
  .limits {
    margin-top: 2.5rem;
    border: 1px solid var(--meridian);
    background: var(--abyss);
    padding: 1.5rem;
  }

  .limits > .coord { margin-bottom: 1.25rem; }

  .limits dl { margin: 0; display: grid; gap: 1.15rem; }
  .limits dt {
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--gold);
    margin-bottom: 0.3rem;
  }
  .limits dd { margin: 0; color: var(--mist); font-size: 0.9375rem; line-height: 1.6; }

  /* ----------------------------------------------------------------- Ablauf */

  /* Hier IST es eine Reihenfolge — also darf es numeriert sein. */
  .steps { margin-top: 2rem; counter-reset: s; display: grid; gap: 1.75rem; }

  .step { display: grid; grid-template-columns: 2.25rem 1fr; gap: 1rem; }

  .step::before {
    counter-increment: s;
    content: counter(s, decimal-leading-zero);
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rose-lit);
    padding-top: 0.3rem;
  }

  .step h3 { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em; }
  .step p { color: var(--mist); font-size: 0.9375rem; margin-top: 0.35rem; }

  /* ---------------------------------------------------------- Reality Checks */

  .cards { display: grid; gap: 0.875rem; margin-top: 2rem; }

  .card {
    border: 1px solid;
    padding: 1.1rem 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  .card .who {
    font-family: var(--mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    margin-bottom: 0.6rem;
  }

  .card .who .grade { margin-left: auto; opacity: 0.75; letter-spacing: 0.1em; }

  .card.hart   { border-color: rgba(244, 63, 94, 0.34);  background: rgba(244, 63, 94, 0.07);  color: #ffd9e0; }
  .card.hart .who   { color: var(--rose-lit); }
  .card.mittel { border-color: rgba(245, 158, 11, 0.32); background: rgba(245, 158, 11, 0.07); color: #ffe9c4; }
  .card.mittel .who { color: var(--pin-date); }
  .card.mild   { border-color: rgba(34, 211, 238, 0.3);  background: rgba(34, 211, 238, 0.06); color: #cdf3fb; }
  .card.mild .who   { color: var(--pin-friend); }

  .aside {
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: var(--mist-dim);
    border-left: 2px solid var(--meridian);
    padding-left: 1rem;
  }

  /* ------------------------------------------------------------------ Titel */

  .titles { display: grid; gap: 0.75rem; margin-top: 2rem; }

  .title-row {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: 0.9rem;
    align-items: start;
    border-bottom: 1px solid var(--meridian);
    padding-bottom: 0.75rem;
  }

  .title-row .ic { font-size: 1.25rem; line-height: 1.2; }
  .title-row b { font-size: 0.9375rem; font-weight: 600; color: var(--gold); }
  .title-row span { display: block; color: var(--mist); font-size: 0.875rem; }

  /* ------------------------------------------------------------------ Preis */

  .price-block { border-top: 1px solid var(--meridian); }

  .plan {
    margin-top: 2rem;
    border: 1px solid var(--meridian-lit);
    background: var(--abyss);
    padding: clamp(1.5rem, 5vw, 2.25rem);
  }

  .amount {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-family: var(--display);
    font-variation-settings: 'SOFT' 20, 'WONK' 0;
  }

  .amount b {
    font-size: clamp(2.75rem, 9vw, 3.75rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  /* Akquisephase: der künftige Preis, sichtbar durchgestrichen. */
  .amount s {
    font-size: clamp(1.4rem, 4.5vw, 1.9rem);
    font-weight: 700;
    color: var(--mist-dim);
    text-decoration: line-through;
    text-decoration-color: #ff6d84;
    text-decoration-thickness: 3px;
  }

  .amount span {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mist-dim);
  }

  .plan ul { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 0.7rem; }

  .plan li {
    display: grid;
    grid-template-columns: 1.15rem 1fr;
    gap: 0.65rem;
    font-size: 0.9375rem;
    color: var(--chalk);
  }

  .plan li::before { content: '✓'; color: var(--gold); font-weight: 700; }

  .plan .cta { display: inline-block; margin-top: 1.75rem; }

  .free-note {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--meridian);
    font-size: 0.875rem;
    color: var(--mist);
  }

  .free-note b { color: var(--chalk); font-weight: 600; }

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

  details {
    border-bottom: 1px solid var(--meridian);
    padding: 1.1rem 0;
  }

  summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9375rem;
    list-style: none;
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
  }

  summary::-webkit-details-marker { display: none; }

  summary::after {
    content: '+';
    margin-left: auto;
    font-family: var(--mono);
    color: var(--mist-dim);
    flex: none;
  }

  details[open] summary::after { content: '–'; }

  details p { color: var(--mist); font-size: 0.9375rem; margin-top: 0.75rem; }

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

  footer {
    border-top: 1px solid var(--meridian);
    padding-block: 3rem;
    font-size: 0.8125rem;
    color: var(--mist-dim);
  }

  footer nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 1.25rem; }
  footer a { text-decoration: none; border-bottom: 1px solid var(--meridian); padding-bottom: 1px; }
  footer a:hover { color: var(--chalk); }
  footer .todo { font-family: var(--mono); font-size: 0.6875rem; margin-top: 1rem; color: #6b5a2e; }

  [data-lang-hide] { display: none !important; }

  /* ------------------------------------------------- Blog-Anriss („Lesen") */

  .reads { display: grid; gap: 0.875rem; margin-top: 2rem; }

  .read {
    display: block;
    border: 1px solid var(--meridian);
    background: var(--abyss);
    padding: 1.1rem 1.25rem;
    text-decoration: none;
    transition: border-color 0.18s, translate 0.18s;
  }

  .read:hover { border-color: var(--meridian-lit); translate: 0 -1px; }

  .read b {
    display: block;
    font-family: var(--display);
    font-variation-settings: 'SOFT' 20, 'WONK' 1;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 0.35rem;
  }

  .read span { color: var(--mist); font-size: 0.9375rem; }

/* ------------------------------------------------------ Desktop (ab 980px) */
/* Mobil ist die Referenz (Thomas, 24.08.). Ab hier nutzt die Seite die
   Breite: Hero zweizonig (Text links, Globus steigt rechts am Rand auf),
   Inhalte werden mehrspaltig, Lesespalten bleiben bei ~40rem Maß. */
@media (min-width: 980px) {
  .wrap { max-width: 68rem; }
  .lede,
  .body-copy { max-width: 40rem; }

  .hero { padding-block: 8rem 5rem; }
  .hero h1 { font-size: clamp(3.4rem, 4.6vw, 4.4rem); }

  #globe {
    left: auto;
    right: -10vw;
    top: 50%;
    translate: 0 -50%;
    width: min(56vw, 54rem);
    opacity: 0.8;
  }

  .limits { padding: 2rem; }
  .limits dl { grid-template-columns: 1fr 1fr; gap: 1.5rem 2.5rem; }

  .steps { grid-template-columns: repeat(3, 1fr); gap: 2rem; }

  .cards { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: start; }
  /* stretch (Standard) statt start: gleich hohe Karten wirken ruhiger. */
  .reads { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }

  .titles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem 1.5rem; align-items: start; }

  .plan { max-width: 32rem; }

  section > .wrap > details { max-width: 44rem; }
}