/* =========================================================================
   kurz.dev — Richtung A „Beleg"
   Der Kurzlink ist eine Quittung: sachlich, umrandet, mit einem Abschnitt,
   den man behält. Plan: ../../RICHTUNGEN.md
   ========================================================================= */

@font-face {
  font-family: 'Zilla Slab';
  src: url('schriften/ZillaSlab-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Der einzige Ort mit literalen Farbwerten ---------------------------- */
:root {
  /* Farbe — jeder Wert trägt eine Bedeutung, keiner ist Dekoration */
  --papier: #E9EDEF;          /* Grundfläche, kühles Aktenpapier            */
  --papier-erhoben: #F8FAFB;  /* der Formularkasten, das einzige „obenauf"  */
  --tinte: #16202B;           /* Text                                       */
  --tinte-leise: #4C5761;     /* Etiketten, Nebentext, Zeitangaben          */
  --amt: #1D3557;             /* Aktion: Knopf, Links, Fokusring            */
  --siegel: #8A2F24;          /* Sperre, Fehler, Warnung — nur hier         */
  --weiss: #FFFFFF;           /* Text auf --amt                             */

  /* Schrift */
  --schrift-anzeige: 'Zilla Slab', Georgia, 'Times New Roman', serif;
  --schrift-text: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
                  Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
  --schrift-daten: ui-monospace, 'Cascadia Code', 'SF Mono', 'Source Code Pro',
                   Menlo, Consolas, 'DejaVu Sans Mono', monospace;

  /* Typo-Skala, sechs Stufen. Nur die oberste ist fluid: der Kurzlink auf der
     Ergebnisseite bräuchte sonst bei 320 px einen Umbruch mitten im Wort. */
  --s1: 0.8125rem;   /* 13px — Etiketten, Fußzeile        */
  --s2: 0.9375rem;   /* 15px — Nebentext                  */
  --s3: 1.0625rem;   /* 17px — Fließtext                  */
  --s4: 1.3125rem;   /* 21px — Zwischenüberschrift        */
  --s5: 1.6875rem;   /* 27px — Seitenüberschrift          */
  --s6: clamp(1.5rem, 1.05rem + 2.2vw, 2.125rem); /* 24–34px — Kurzlink */

  /* Raum */
  --raum-1: 0.25rem;
  --raum-2: 0.5rem;
  --raum-3: 0.875rem;
  --raum-4: 1.25rem;
  --raum-5: 2rem;
  --raum-6: 3rem;

  --spalte: 34rem;
  --linie: 1px solid var(--tinte);
  --linie-leise: 1px solid var(--tinte-leise);
}

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

body {
  margin: 0;
  padding: var(--raum-4) var(--raum-3) var(--raum-6);
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: var(--s3);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  font-family: var(--schrift-anzeige);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 var(--raum-3);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--s5); }
h2 { font-size: var(--s4); }
h3 { font-size: var(--s3); }
p { margin: 0 0 var(--raum-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--amt); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

/* --- Skip-Link ---------------------------------------------------------- */
.sprungmarke {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--amt);
  color: var(--weiss);
  padding: var(--raum-2) var(--raum-3);
  z-index: 10;
}
.sprungmarke:focus {
  left: var(--raum-3);
  top: var(--raum-3);
}

/* --- Kopf --------------------------------------------------------------- */
.kopf,
.inhalt,
.fuss { max-width: var(--spalte); margin-inline: auto; }

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

.wortmarke {
  font-family: var(--schrift-anzeige);
  font-size: var(--s4);
  margin: 0;
  letter-spacing: -0.02em;
}
/* Typografisches Detail statt Bildzeichen: der Punkt trägt die Aktionsfarbe */
.wortmarke-punkt { color: var(--amt); }

/* Absenderzeile im Kopf. Keine Überschrift über dem Feld — der Hero bleibt
   das Eingabefeld. Sie beantwortet nur die Frage „was ist das hier?", die
   sonst offenbleibt, und macht aus der 12-Monats-Löschung eine Zusage. */
.kopf-deskriptor {
  font-size: var(--s1);
  color: var(--tinte-leise);
  margin: var(--raum-1) 0 0;
  letter-spacing: 0.01em;
}

/* --- Der Formularkasten: ein Vordruck ----------------------------------- */
.vordruck {
  background: var(--papier-erhoben);
  border: var(--linie);
  /* Die Unterkante trägt die Perforation und wird deshalb vom Element
     .perforation gezeichnet, nicht vom Rahmen. */
  border-bottom: 0;
  padding: var(--raum-4) var(--raum-4) 0;
}

.feldgruppe { margin-bottom: var(--raum-4); }

label {
  display: block;
  font-size: var(--s2);
  font-weight: 600;
  margin-bottom: var(--raum-1);
}

.hinweis {
  font-size: var(--s2);
  color: var(--tinte-leise);
  margin: var(--raum-1) 0 0;
}

input[type="url"],
input[type="text"],
input[type="date"],
input[type="number"],
input[type="password"] {
  width: 100%;
  font-family: var(--schrift-daten);
  font-size: var(--s3);
  font-variant-numeric: tabular-nums;
  color: var(--tinte);
  background: var(--weiss);
  border: var(--linie);
  border-radius: 0;
  padding: var(--raum-3);
  min-height: 2.75rem;
}
input::placeholder { color: var(--tinte-leise); opacity: 1; }

/* Der Affix vor dem Wunsch-Kurzpfad: kurz.dev/ steht sichtbar da,
   damit niemand die ganze Adresse eintippt. */
.affixfeld { display: flex; align-items: stretch; }
.affix {
  display: flex;
  align-items: center;
  font-family: var(--schrift-daten);
  font-size: var(--s2);
  color: var(--tinte-leise);
  background: var(--papier);
  border: var(--linie);
  border-right: 0;
  padding-inline: var(--raum-3);
  white-space: nowrap;
}
.affixfeld input { flex: 1; min-width: 0; }

/* --- Knöpfe ------------------------------------------------------------- */
.knopf {
  font-family: var(--schrift-text);
  font-size: var(--s3);
  font-weight: 700;
  color: var(--weiss);
  background: var(--amt);
  border: var(--linie);
  border-color: var(--amt);
  border-radius: 0;
  padding: var(--raum-3) var(--raum-5);
  min-height: 2.75rem;
  cursor: pointer;
}
.knopf:hover { background: var(--tinte); border-color: var(--tinte); }

/* Linksbündig, nicht rechts: Rechtsbündigkeit ist eine Dialogkonvention
   (OK/Abbrechen) — hier gibt es kein Abbrechen. Sie reißt außerdem die
   Leseachse nach rechts, obwohl der nächste Blickpunkt wieder links liegt. */
.knopfzeile { display: flex; justify-content: flex-start; }
.knopfzeile .knopf { min-width: 12rem; }

.knopf-zweit {
  color: var(--amt);
  background: var(--papier-erhoben);
  border-color: var(--amt);
  font-weight: 600;
  /* Zielgröße 2.5.8: 44px Höhe, Breite über Innenabstand — deutlich über 24px */
  padding: var(--raum-2) var(--raum-3);
  font-size: var(--s2);
  min-height: 2.75rem;
}
.knopf-zweit:hover { background: var(--papier); }

/* --- Die Ehrlichkeitszeile ----------------------------------------------
   Steht unter dem Knopf, nicht über dem Feld: Der Hero bleibt das
   Eingabefeld. Sie macht den Verzicht auf Konto, Cookies und Tracking als
   Entscheidung sichtbar statt als bloße Abwesenheit — und sagt vor dem
   Kürzen, was der Dienst nicht tut. Ein Zugeständnis, das erst nach der
   Entscheidung kommt, ist keins. */
.ehrlich {
  font-size: var(--s2);
  color: var(--tinte);
  margin: var(--raum-4) 0 0;
  padding-top: var(--raum-3);
  border-top: var(--linie-leise);
  line-height: 1.5;
}

/* --- Optionsfläche: natives details/summary ----------------------------- */
details {
  border-top: var(--linie-leise);
  margin-top: var(--raum-4);
  padding-top: var(--raum-3);
}
summary {
  font-size: var(--s2);
  font-weight: 700;
  color: var(--amt);
  cursor: pointer;
  /* Zielgröße 2.5.8 */
  min-height: 1.5rem;
  padding: var(--raum-2) 0;
  list-style-position: inside;
}
summary:hover { text-decoration: underline; }
.optionen-inhalt { padding-top: var(--raum-3); }

/* --- Feldfehler: Text UND Symbol, nie nur Farbe (Regel 11) -------------- */
.fehler {
  display: flex;
  gap: var(--raum-2);
  align-items: flex-start;
  font-size: var(--s2);
  color: var(--siegel);
  font-weight: 600;
  margin: var(--raum-2) 0 0;
  padding: var(--raum-2) var(--raum-3);
  border-left: 3px solid var(--siegel);
  background: var(--papier);
}
.fehler-zeichen {
  flex: none;
  font-family: var(--schrift-anzeige);
  line-height: 1.3;
}
input[aria-invalid="true"] {
  border-color: var(--siegel);
  border-width: 2px;
}

/* --- Ergebnisseite ------------------------------------------------------ */
.beleg {
  background: var(--papier-erhoben);
  border: var(--linie);
  padding: var(--raum-4);
}

.beleg-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--raum-3);
  flex-wrap: wrap;
  border-bottom: var(--linie);
  padding-bottom: var(--raum-2);
  margin-bottom: var(--raum-4);
}
.beleg-titel { margin: 0; font-size: var(--s4); }
.beleg-zeit {
  font-family: var(--schrift-daten);
  font-size: var(--s1);
  color: var(--tinte-leise);
}

.etikett {
  font-size: var(--s1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin: 0 0 var(--raum-2);
}

/* Der Kurzlink: das Größte auf der Seite */
.kurzlink {
  font-family: var(--schrift-daten);
  font-size: var(--s6);
  font-weight: 700;
  color: var(--tinte);
  /* break-all würde mitten in „kurz.dev" umbrechen und damit eine andere
     Domain lesbar machen. Mit normal + break-word nutzt der Browser zuerst
     die <wbr>-Marken im HTML. */
  word-break: normal;
  overflow-wrap: break-word;
  margin: 0;
  line-height: 1.25;
}
.kurzlink a { color: inherit; }

.kopierzeile {
  display: flex;
  gap: var(--raum-3);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--raum-3);
  /* Ohne diesen Abstand klebt der Kopierknopf am folgenden Etikett —
     am Screenshot bei 1280 px aufgefallen, dort nachgemessen. */
  margin-bottom: var(--raum-6);
}
.markierhinweis {
  font-size: var(--s1);
  color: var(--tinte-leise);
  margin: 0;
}

/* Die Zieladresse liegt hinter einem nativen Aufklapper: Der Host in der
   Summary leistet die Prüfung, die fast alle brauchen. Die vollständige
   Adresse mit über 300 Zeichen ist Prüfmaterial für die wenigen, die sie
   wollen — und kein Block, der zwischen Erfolgsmoment und Verwaltungslink
   eine Bildschirmhöhe frisst. */
.zieldetails {
  border-top: var(--linie-leise);
  margin-top: var(--raum-5);
  padding-top: var(--raum-3);
}
.zieldetails > summary {
  font-family: var(--schrift-daten);
  font-size: var(--s2);
  font-weight: 400;
  color: var(--tinte);
}
.zieldetails > .ziel { margin-top: var(--raum-3); }

/* Zieladresse zur Kontrolle */
.ziel {
  font-family: var(--schrift-daten);
  font-size: var(--s2);
  color: var(--tinte-leise);
  overflow-wrap: anywhere;
  word-break: break-all;
  margin: 0;
  padding: var(--raum-3);
  background: var(--papier);
  border: var(--linie-leise);
}

/* QR-Block */
.qr-block { margin-top: var(--raum-4); }
.qr-rahmen {
  display: inline-block;
  background: var(--weiss);
  border: var(--linie);
  padding: var(--raum-2);
  line-height: 0;
}
/* 128 px statt 168: Ein Schwarzweißmuster mit hoher Ortsfrequenz ist der
   stärkste vorbewusste Blickfänger der Seite und steht unmittelbar vor dem
   Block, den niemand übersehen darf. Für 24 Zeichen Nutzlast reicht das. */
.qr-rahmen svg { display: block; width: 8rem; height: 8rem; }
.qr-unterzeile {
  font-family: var(--schrift-daten);
  font-size: var(--s2);
  margin: var(--raum-2) 0 0;
  overflow-wrap: anywhere;
}

/* --- Signature: die Perforation ----------------------------------------
   Oberhalb steht, was man weitergibt. Unterhalb, was man behält.
   Die Abrisskante ist die von der Spec verlangte deutliche Absetzung —
   und sie erklärt zugleich, warum es zwei Bereiche gibt. */
.perforation {
  position: relative;
  height: var(--raum-5);
  margin: var(--raum-5) calc(var(--raum-4) * -1) var(--raum-5);
  border-top: 2px dashed var(--tinte-leise);
}
/* Dieselbe Kante schließt auf der Startseite den Formularkasten ab. Damit
   lebt die Signature nicht nur auf Seite 2, und sie kündigt an, was auf
   Seite 2 passiert: Es entsteht etwas mit einem Abschnitt, den du behältst. */
.perforation-abschluss {
  /* Höhe 0: Die gestrichelte Linie IST die Unterkante des Kastens. Mit Höhe
     bliebe darunter ein weißer Streifen stehen und die Kante schwebte. */
  height: 0;
  margin-top: var(--raum-4);
  margin-bottom: 0;
}
.perforation::before,
.perforation::after {
  content: "";
  position: absolute;
  top: calc(var(--raum-3) * -1);
  width: var(--raum-4);
  height: var(--raum-4);
  background: var(--papier);
  border: var(--linie);
  border-radius: 50%;
}
.perforation::before { left: calc(var(--raum-3) * -1); }
.perforation::after { right: calc(var(--raum-3) * -1); }

/* --- Verwaltungsblock: unten, aber nicht leiser -------------------------
   Volle Kontrastwerte und eigener Rahmen. Er steht weiter unten, weil die
   Spec die Rangfolge festlegt — nicht weil er unwichtig wäre. Er enthält
   den einzigen unwiederbringlichen Wert der Seite. */
.verwaltung {
  border: 2px solid var(--tinte);
  padding: var(--raum-4);
  background: var(--papier-erhoben);
}
.verwaltung-titel {
  font-family: var(--schrift-anzeige);
  font-size: var(--s4);
  margin: 0 0 var(--raum-2);
}
.verwaltung-text { font-size: var(--s2); margin-bottom: var(--raum-3); }

.token {
  display: block;
  font-family: var(--schrift-daten);
  font-size: var(--s2);
  font-variant-numeric: tabular-nums;
  color: var(--tinte);
  background: var(--weiss);
  border: var(--linie);
  padding: var(--raum-3);
  overflow-wrap: anywhere;
  word-break: break-all;
  line-height: 1.5;
  margin-bottom: var(--raum-3);
}

/* Die Aufforderung steht direkt an dem, was sie schützt — nicht mehrere
   hundert Pixel entfernt in der leisesten Textfarbe der Seite. */
.speicherhinweis {
  font-size: var(--s2);
  color: var(--tinte);
  margin: var(--raum-3) 0 0;
}

/* --- Der Ehrlichkeitssatz auf der Ergebnisseite -------------------------
   Volle Kontrastwerte. Wer etwas zugibt und es dann grau und klein setzt,
   gibt es nicht zu — er versteckt es formkonform. Direkt neben der
   sichtbaren Zieladresse, weil die Aussage nur dort überprüfbar ist. */
.folgen {
  margin: var(--raum-4) 0 0;
  padding: 0;
  font-size: var(--s2);
  color: var(--tinte);
  line-height: 1.55;
}

/* --- Rückweg ------------------------------------------------------------ */
.rueckweg { margin-top: var(--raum-5); font-size: var(--s2); }

/* --- Fußzeile ----------------------------------------------------------- */
.fuss {
  margin-top: var(--raum-6);
  padding-top: var(--raum-3);
  border-top: var(--linie-leise);
  font-size: var(--s1);
  color: var(--tinte-leise);
}
.fuss-liste {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2) var(--raum-4);
  margin: 0;
  padding: 0;
}
/* Zielgröße 2.5.8: Fußzeilenlinks sind eigenständige Navigationsziele, keine
   Inline-Links im Satz. Ohne diesen Innenabstand sind sie nur 18 px hoch —
   per Messung im Browser aufgefallen, nicht geschätzt. */
.fuss-liste a {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
}

/* --- Fokus (Regel 9) ---------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--amt);
  outline-offset: 2px;
}
/* Doppelter Ring auf gefüllten Knöpfen: der äußere trägt gegen die helle
   Umgebung, der innere gegen die dunkle Knopffläche. Ein einzelner Ring
   verlöre je nach angrenzender Fläche seinen Kontrast — gerechnet, nicht
   geschätzt (siehe pruefung/kontrast.mjs). */
.knopf:focus-visible {
  outline: 2px solid var(--tinte);
  outline-offset: 3px;
  box-shadow: inset 0 0 0 2px var(--weiss);
}
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight; }
}

/* --- 320 px zuerst, dann nach oben (Regel 14) --------------------------- */
/* Unterhalb von 480 px füllt die Aktion die volle Breite des Kastens. Sie ist
   die einzige Handlung der Seite und stand als kleinstes Element in einer
   Spalte, in der alles andere volle Breite hat. */
@media (max-width: 29.999rem) {
  .knopfzeile .knopf { width: 100%; }
}

@media (min-width: 30rem) {
  body { padding-inline: var(--raum-5); }
  .vordruck { padding: var(--raum-5) var(--raum-5) 0; }
  .beleg { padding: var(--raum-5); }
  .perforation { margin-inline: calc(var(--raum-5) * -1); }
}