/* =========================================================================
   kurz.dev — Richtung B „Prompt"
   Der Dienst zeigt seine Mechanik, statt sie zu verstecken. Eine Schrift,
   keine geschlossenen Formen, alles hängt links an einer Achse.
   Plan: ../../RICHTUNGEN.md
   ========================================================================= */

@font-face {
  font-family: 'JetBrains Mono';
  src: url('schriften/JetBrainsMono.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* --- Der einzige Ort mit literalen Farbwerten ---------------------------- */
:root {
  /* Zwei bedeutungstragende Buntfarben, beide entsättigt. Kein einzelner
     greller Akzent — das wäre der KI-Default für dunkle Oberflächen. */
  --grund: #161C24;          /* Grundfläche, tiefes Blaugrau               */
  --grund-erhoben: #1F2833;  /* die einzige erhobene Fläche                */
  --text: #D8E0E8;           /* Text, gedämpftes Weiß statt #FFFFFF        */
  --text-leise: #8C99A8;     /* Etiketten, Nebeninformation                */
  --aktion: #79B8CF;         /* Bedienbares und Fokus                      */
  --siegel: #CE7C6E;         /* Ablehnung: Fehler und Sperre               */
  --qr-grund: #FFFFFF;       /* QR-Ruhefläche. Eigener Token, weil ein QR
                                weiß bleiben muss, auch wenn sich das
                                Farbschema ändert — keine Markenfarbe.     */
  --achse-linie: #46525F;    /* die senkrechte Achse und Trenner. Eigener
                                Token, weil --grund-erhoben gegen --grund
                                nur 1,15:1 erreicht und damit unsichtbar
                                wäre — am Screenshot aufgefallen.          */

  /* Eine Familie für alles — das ist die Haltung dieser Richtung */
  --schrift: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'SF Mono',
             Menlo, Consolas, 'DejaVu Sans Mono', monospace;

  /* Drei Stufen. Nur die oberste ist fluid, damit der Kurzlink bei 320 px
     nicht mitten im Wort umbricht. */
  --s1: 0.875rem;   /* 14px */
  --s2: 1rem;       /* 16px */
  --s3: clamp(1.25rem, 0.9rem + 1.7vw, 1.625rem); /* 20–26px */

  --raum-1: 0.375rem;
  --raum-2: 0.75rem;
  --raum-3: 1.25rem;
  --raum-4: 2rem;
  --raum-5: 3.25rem;
  --raum-6: 5rem;

  --spalte: 38rem;
  --achse: 2px solid var(--achse-linie);
}

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

body {
  margin: 0;
  padding: var(--raum-3) var(--raum-3) var(--raum-6);
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: var(--s2);
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

h1, h2 {
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 var(--raum-2);
  font-size: var(--s2);
  letter-spacing: 0.01em;
}
p { margin: 0 0 var(--raum-2); }
p:last-child { margin-bottom: 0; }

a { color: var(--aktion); text-underline-offset: 0.2em; }

/* --- Skip-Link ---------------------------------------------------------- */
.sprungmarke {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--aktion);
  color: var(--grund);
  padding: var(--raum-1) var(--raum-2);
  font-weight: 700;
  z-index: 10;
}
.sprungmarke:focus { left: var(--raum-3); top: var(--raum-3); }

/* --- Die senkrechte Achse, an der alles hängt --------------------------- */
.kopf, .inhalt, .fuss {
  max-width: var(--spalte);
  margin-inline: auto;
  padding-left: var(--raum-3);
  border-left: var(--achse);
}

.kopf { padding-block: var(--raum-2) var(--raum-5); }
.wortmarke {
  font-size: var(--s2);
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.02em;
}
.wortmarke-punkt { color: var(--aktion); }

/* --- Etiketten ---------------------------------------------------------- */
.etikett {
  font-size: var(--s1);
  color: var(--text-leise);
  margin: 0 0 var(--raum-1);
  letter-spacing: 0.04em;
}

/* --- Eingabe: keine geschlossene Form, nur eine Grundlinie -------------- */
.feldgruppe { margin-bottom: var(--raum-4); }

label {
  display: block;
  font-size: var(--s1);
  color: var(--text-leise);
  margin-bottom: var(--raum-1);
  letter-spacing: 0.04em;
}

.eingabezeile { display: flex; align-items: baseline; gap: var(--raum-1); }

/* Signature-Detail: der Schreibcursor. Blinkt nur, solange das Feld leer ist. */
.eingabezeile::before {
  content: "▏";
  color: var(--aktion);
  font-size: var(--s2);
  animation: blinken 1.06s step-end infinite;
  flex: none;
}
.eingabezeile:has(input:not(:placeholder-shown))::before,
.eingabezeile:focus-within::before {
  animation: none;
  opacity: 0;
}
@keyframes blinken { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

input[type="url"],
input[type="text"],
input[type="date"],
input[type="number"],
input[type="password"] {
  flex: 1;
  min-width: 0;
  font-family: var(--schrift);
  font-size: var(--s2);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--text-leise);
  border-radius: 0;
  padding: var(--raum-1) 0;
  min-height: 2.75rem;
}
input::placeholder { color: var(--text-leise); opacity: 1; }
input:hover { border-bottom-color: var(--text); }

.affixfeld { display: flex; align-items: baseline; gap: 0; flex: 1; min-width: 0; }
.affix {
  color: var(--text-leise);
  font-size: var(--s2);
  white-space: nowrap;
  border-bottom: 2px solid var(--text-leise);
  padding: var(--raum-1) 0;
}

.hinweis {
  font-size: var(--s1);
  color: var(--text-leise);
  line-height: 1.6;
  margin: var(--raum-1) 0 0;
}

/* --- Knöpfe: eckig, offen, ohne Fläche ---------------------------------- */
.knopf {
  font-family: var(--schrift);
  font-size: var(--s2);
  font-weight: 700;
  color: var(--grund);
  background: var(--aktion);
  border: 2px solid var(--aktion);
  border-radius: 0;
  padding: var(--raum-2) var(--raum-4);
  min-height: 2.75rem;
  cursor: pointer;
  letter-spacing: 0.02em;
}
.knopf:hover { background: var(--text); border-color: var(--text); }

.knopf-zweit {
  color: var(--aktion);
  background: transparent;
  border-color: var(--aktion);
  font-size: var(--s1);
  padding: var(--raum-1) var(--raum-2);
  min-height: 2.75rem;
}
.knopf-zweit:hover { background: var(--grund-erhoben); color: var(--text); border-color: var(--text); }

/* --- Optionsfläche ------------------------------------------------------ */
details { margin-top: var(--raum-4); }
summary {
  font-size: var(--s1);
  color: var(--aktion);
  cursor: pointer;
  min-height: 1.5rem;
  padding: var(--raum-1) 0;
  letter-spacing: 0.04em;
}
summary:hover { text-decoration: underline; }
.optionen-inhalt {
  padding-top: var(--raum-3);
  margin-top: var(--raum-2);
  border-top: 1px solid var(--achse-linie);
}

/* --- Fehler: Text UND Zeichen, nie nur Farbe ---------------------------- */
.fehler {
  display: flex;
  gap: var(--raum-2);
  align-items: flex-start;
  font-size: var(--s1);
  color: var(--siegel);
  margin: var(--raum-2) 0 0;
  line-height: 1.6;
}
.fehler-zeichen { flex: none; font-weight: 700; }
input[aria-invalid="true"] { border-bottom-color: var(--siegel); }

/* --- Ergebnisseite ------------------------------------------------------ */
.kurzlink {
  font-size: var(--s3);
  font-weight: 700;
  margin: 0;
  /* Siehe Variante A: kein break-all im Kurzlink, sonst wird aus „kurz.dev"
     beim Umbruch eine andere Domain. */
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 1.35;
}
.kurzlink a { color: var(--text); }

.kopierzeile {
  display: flex;
  gap: var(--raum-2);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--raum-2);
}
.markierhinweis { font-size: var(--s1); color: var(--text-leise); margin: 0; }

.ziel {
  font-size: var(--s1);
  color: var(--text-leise);
  overflow-wrap: anywhere;
  word-break: break-all;
  margin: 0;
  padding-left: var(--raum-2);
  border-left: 2px solid var(--achse-linie);
  line-height: 1.6;
}

.abschnitt { margin-bottom: var(--raum-5); }

/* --- Signature: die Zeichenaufschlüsselung -----------------------------
   Der Kurzpfad zerlegt in seine Zeichen. Der einzige Moment, in dem ein
   Kurzpfad Ärger macht, ist das Abtippen oder Vorlesen — genau dafür lässt
   die Spec fünf Zeichen weg. Das macht diese Entscheidung sichtbar. */
.zerlegung {
  display: flex;
  flex-wrap: wrap;
  /* Ohne spürbaren Abstand lesen sich die Zellenbeschriftungen als ein
     durchgehender Satz statt als Zuordnung je Zeichen — am Screenshot
     aufgefallen. */
  gap: var(--raum-2);
  list-style: none;
  margin: 0 0 var(--raum-2);
  padding: 0;
}
.zerlegung li {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 2.75rem;
  /* Die Grundlinie trägt Information und muss sichtbar sein: gegen --grund
     erreicht --grund-erhoben nur 1,15:1 und wäre praktisch unsichtbar. */
  border-bottom: 2px solid var(--text-leise);
  padding-bottom: var(--raum-1);
}
.zeichen {
  font-size: var(--s3);
  font-weight: 700;
  line-height: 1.2;
}
.lage {
  font-size: 0.6875rem;   /* 11px — Zusatzebene unter der Skala, bewusst kleiner */
  color: var(--text-leise);
  /* Kein uppercase und keine Sperrung: beides macht die kurzen Kürzel
     breiter als ihre Zelle und lässt sie ineinanderlaufen. */
  letter-spacing: 0;
  white-space: nowrap;
}
/* Großbuchstaben werden markiert: „AbC" und „abc" sind verschiedene Kurzlinks */
.zerlegung li.gross { border-bottom-color: var(--aktion); }

/* --- QR ----------------------------------------------------------------- */
.qr-rahmen {
  display: inline-block;
  background: var(--qr-grund);
  padding: var(--raum-2);
  line-height: 0;
}
.qr-rahmen svg { display: block; width: 10.5rem; height: 10.5rem; }
.qr-unterzeile { font-size: var(--s1); margin: var(--raum-2) 0 0; overflow-wrap: anywhere; }

/* --- Verwaltungsblock: die einzige erhobene Fläche der Seite ------------ */
.verwaltung {
  background: var(--grund-erhoben);
  border-left: 2px solid var(--siegel);
  padding: var(--raum-3);
  margin-top: var(--raum-5);
}
.verwaltung-titel { font-size: var(--s2); font-weight: 700; margin: 0 0 var(--raum-2); }
.verwaltung-text { font-size: var(--s1); line-height: 1.65; margin-bottom: var(--raum-2); }

.token {
  display: block;
  font-family: var(--schrift);
  font-size: var(--s1);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--grund);
  padding: var(--raum-2);
  overflow-wrap: anywhere;
  word-break: break-all;
  line-height: 1.6;
}

.folgen {
  margin: var(--raum-3) 0 0;
  padding-left: var(--raum-3);
  font-size: var(--s1);
  color: var(--text-leise);
  line-height: 1.6;
}
.folgen li { margin-bottom: var(--raum-2); }
.folgen li:last-child { margin-bottom: 0; }

.rueckweg { margin-top: var(--raum-4); font-size: var(--s1); }

/* --- Fußzeile ----------------------------------------------------------- */
.fuss {
  margin-top: var(--raum-6);
  padding-block: var(--raum-2);
  font-size: var(--s1);
  color: var(--text-leise);
}
.fuss-liste {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-1) var(--raum-3);
  margin: 0;
  padding: 0;
}
/* Zielgröße 2.5.8: siehe Variante A — ohne Mindesthöhe nur 18 px. */
.fuss-liste a {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
}

/* --- Fokus -------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--aktion);
  outline-offset: 3px;
}
/* Doppelter Ring: außen hell gegen den dunklen Grund, innen dunkel gegen die
   helle Knopffläche. Ein einzelner Ring verlöre auf einer der beiden Seiten
   seinen Kontrast — gerechnet, nicht geschätzt. */
.knopf:focus-visible {
  outline-color: var(--text);
  box-shadow: inset 0 0 0 2px var(--grund);
}
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight; }
}

/* --- Bewegung nur, wenn erwünscht --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Der Cursor bleibt sichtbar stehen, statt zu verschwinden */
  .eingabezeile::before { opacity: 1; }
}

/* --- 320 px zuerst ------------------------------------------------------ */
@media (min-width: 30rem) {
  body { padding-inline: var(--raum-4); }
  .kopf, .inhalt, .fuss { padding-left: var(--raum-4); }
}