@import url("nocturne.css");

/*
 * Anwendungsspezifische Ergänzungen zum Nocturne-Designsystem.
 *
 * Regel aus dem Systemhandbuch: Farben, Abstände, Radien und Schatten kommen
 * ausschließlich aus den Tokens — hier steht kein einziger Hexwert und keine
 * Zahl, die ein Token schon trägt. Ergänzt wird nur, was das System nicht
 * abdeckt: Kopfleiste, untere Navigation, Hero und der Diskretions-Vorhang.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Nocturne: Hierarchie über Größe und Raum, Überschriften nie fetter als 500. */
h1 { font-size: clamp(2rem, 6vw, 3.75rem); line-height: 1.04; letter-spacing: -0.03em; margin: 0; }
h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
h3 { font-size: 1.0625rem; letter-spacing: -0.01em; margin: 0; }

p { margin: 0; }

a { color: var(--color-accent-300); text-underline-offset: 3px; }

/* Fokus kommt aus dem System, nie der Browser-Standard. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

img { max-width: 100%; height: auto; display: block; }

/* --- Aufbau ------------------------------------------------------------ */

.ms-huelle {
  width: min(1120px, 100% - 2 * var(--space-6));
  margin-inline: auto;
}

.ms-inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-block: var(--space-8) calc(var(--space-8) * 3 + env(safe-area-inset-bottom));
}

@media (min-width: 860px) {
  .ms-inhalt { padding-bottom: var(--space-8); }
}

.ms-nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ms-sprungmarke {
  position: absolute;
  left: var(--space-6);
  top: -100px;
  z-index: 100;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-accent);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: top 150ms ease;
}

.ms-sprungmarke:focus { top: var(--space-6); }

/* --- Kopfleiste -------------------------------------------------------- */

.ms-kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--color-bg) 84%, transparent);
  border-bottom: 1px solid var(--color-divider);
}

.ms-kopf__reihe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-4);
}

.ms-marke {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-decoration: none;
}

.ms-marke img { width: 34px; height: 34px; border-radius: 9px; }
.ms-marke__endung { color: var(--color-neutral-500); }

.ms-kopf__nav { display: none; align-items: center; gap: var(--space-8); }

@media (min-width: 860px) { .ms-kopf__nav { display: flex; } }

.ms-kopf__nav a {
  font-size: 0.875rem;
  color: var(--color-neutral-300);
  text-decoration: none;
}

.ms-kopf__nav a:hover { color: var(--color-text); }

.ms-kopf__aktionen { display: flex; align-items: center; gap: var(--space-3); }

/* Ein Pseudonym darf 30 Zeichen haben. Ungebremst schiebt es die Kopfzeile
   auseinander, deshalb hier gekappt — der volle Text bleibt im Markup und
   wird von Vorlesegeräten weiterhin vollständig ausgegeben. */
.ms-kopf__pseudonym {
  display: inline-block;
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.7;
}

/* Gemessen: Marke und Aktionen zusammen brauchen 447 px. Verbreitete
   Telefone haben 360–390 px. Unterhalb 560 px trägt deshalb die untere
   Navigation die Wege, und die Kopfzeile behält nur Marke, Hauptaktion und
   Schnellverbergen. Der Markenname bleibt für Vorlesegeräte erhalten —
   sonst hätte der Verweis zur Startseite keinen lesbaren Namen mehr. */
@media (max-width: 559px) {
  .ms-marke__text {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .ms-kopf__nebenaktion { display: none; }
}

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

.ms-hero { display: flex; flex-direction: column; gap: var(--space-8); }

.ms-hero__marke {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  font-size: 0.75rem;
  color: var(--color-neutral-300);
}

/* Der Akzent als Marke, nicht als Fläche — Nocturne-Grundregel. */
.ms-hero__punkt {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 10px var(--color-accent);
}

.ms-hero__unterzeile {
  color: var(--color-neutral-300);
  font-size: 1.0625rem;
  max-width: 52ch;
}

.ms-hero__knoepfe { display: flex; flex-wrap: wrap; gap: var(--space-4); }

.ms-hero__knoepfe .btn { min-height: 48px; padding-inline: var(--space-8); font-size: 1rem; }

.ms-merkmale {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--color-neutral-300);
}

.ms-merkmale li { display: flex; align-items: center; gap: var(--space-2); }
.ms-merkmale svg { color: var(--color-accent); flex: none; }

/* --- Raster und Karten ------------------------------------------------- */

.ms-raster {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.ms-abschnitt { display: flex; flex-direction: column; gap: var(--space-6); }

.ms-kicker {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
}

/* --- Formulare --------------------------------------------------------- */

.ms-formular {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 26rem;
}

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-size: 0.8125rem; color: var(--color-neutral-300); }
.field .hinweis { font-size: 0.75rem; color: var(--color-neutral-500); }

.ms-fehler {
  padding: var(--space-4);
  border: 1px solid var(--color-accent-700);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  font-size: 0.875rem;
}

/* --- Untere Navigation ------------------------------------------------- */

.ms-untennav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  gap: 2px;
  padding: var(--space-3) var(--space-2) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-divider);
}

@media (min-width: 860px) { .ms-untennav { display: none; } }

.ms-untennav__eintrag {
  flex: 1;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding-block: var(--space-2);
  border-radius: var(--radius-lg);
  text-decoration: none;
  font-size: 0.6875rem;
  color: var(--color-neutral-500);
}

.ms-untennav__eintrag[aria-current="page"] { color: var(--color-accent); }

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

.ms-fuss {
  border-top: 1px solid var(--color-divider);
  padding-block: var(--space-8);
  margin-bottom: 72px;
  font-size: 0.8125rem;
  color: var(--color-neutral-500);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 860px) { .ms-fuss { margin-bottom: 0; } }

.ms-fuss__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  padding: 0;
  margin: 0;
  list-style: none;
}

.ms-fuss a { color: var(--color-neutral-400); text-decoration: none; }
.ms-fuss a:hover { color: var(--color-text); text-decoration: underline; }

/* --- Schnellverbergen -------------------------------------------------- */

/*
 * Diskretion als Funktion, nicht als Versprechen: Esc oder die Schaltfläche
 * legt sofort einen unverfänglichen Bildschirm darüber.
 */
.ms-vorhang {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  place-items: center;
  background: var(--color-bg);
  text-align: center;
  padding: var(--space-8);
}

.ms-vorhang[data-sichtbar="ja"] { display: grid; }

/* --- Gesperrte Inhalte ------------------------------------------------- */

/*
 * ACHTUNG: nur die visuelle Hülle. Die Unschärfe wird SERVERSEITIG als eigene
 * Datei erzeugt — ein Weichzeichner per CSS wäre wirkungslos, weil das
 * Original dann im Browser läge. Siehe docs/05-recht-compliance.md.
 */
.ms-gesperrt { position: relative; border-radius: var(--radius-md); overflow: hidden; }

.ms-gesperrt__schloss {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: var(--space-2);
  background: color-mix(in srgb, var(--color-bg) 55%, transparent);
  font-size: 0.8125rem;
}