/* =========================================================================
   kurz.dev — Richtung C „Wegweiser"
   Beschilderung: groß, eindeutig, aus drei Metern lesbar. Ein Kurzlink ist
   kein Objekt, sondern eine Richtung. Plan: ../../RICHTUNGEN.md
   ========================================================================= */

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

/* --- Der einzige Ort mit literalen Farbwerten ---------------------------- */
:root {
  --feld: #D9A404;        /* Grundfläche, gesättigtes Bernstein            */
  --karte: #FFFFFF;       /* die Arbeitsfläche, bewusst kein Creme         */
  --text: #1A1408;        /* Text, sehr dunkles Warmbraun statt Schwarz    */
  --text-leise: #544A33;  /* Etiketten und Nebentext                       */
  --aktion: #14213D;      /* Aktion und Richtungsbalken, Nachtblau         */
  --siegel: #8E1D22;      /* 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.                   */

  --schrift-anzeige: 'Archivo', system-ui, 'Segoe UI', Arial, sans-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;

  /* Zwei Extreme statt einer Leiter — der Maßstabssprung eines Schilds.
     Nur die oberste Stufe ist fluid, sonst bräche der Kurzlink bei 320 px. */
  --s1: 0.8125rem;  /* 13px — Etiketten          */
  --s2: 1rem;       /* 16px — alles Gelesene     */
  --s3: 1.375rem;   /* 22px — Zwischenstufe      */
  --s4: clamp(1.75rem, 1.15rem + 2.9vw, 2.5rem); /* 28–40px — Angezeigtes */

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

  --spalte: 36rem;
  --radius: 14px;
  --versatz: 6px;
  --pfeil: 1.5rem;   /* Tiefe der Pfeilspitze im Richtungsbalken */
}

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

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

h1, h2 {
  font-family: var(--schrift-anzeige);
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 var(--raum-2);
  letter-spacing: -0.02em;
}
h1 { font-size: var(--s4); }
h2 { font-size: var(--s3); }
p { margin: 0 0 var(--raum-2); }
p:last-child { margin-bottom: 0; }

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

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

/* --- Kopf auf der Vollfläche -------------------------------------------- */
.kopf, .fuss {
  max-width: var(--spalte);
  margin-inline: auto;
  padding-inline: var(--raum-3);
}
.kopf { margin-bottom: var(--raum-4); }

.wortmarke {
  font-family: var(--schrift-anzeige);
  font-weight: 800;
  font-size: var(--s3);
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--text);
}
.wortmarke-punkt { color: var(--aktion); }

/* --- Die Karte: außermittig, harte versetzte Kante statt weichem Schatten */
.inhalt {
  max-width: var(--spalte);
  margin-inline: auto;
  padding-inline: var(--raum-3);
}

.karte {
  background: var(--karte);
  border-radius: var(--radius);
  padding: var(--raum-4);
  /* Kein weicher mehrlagiger Schatten, sondern eine harte Vollton-Kante.
     Sie liegt als eigene Fläche unter der Karte, nicht als Unschärfe. */
  box-shadow: var(--versatz) var(--versatz) 0 0 var(--aktion);
}

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

/* --- Eingabe ------------------------------------------------------------ */
.feldgruppe { margin-bottom: var(--raum-3); }

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

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(--s2);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--karte);
  border: 2px solid var(--text-leise);
  border-radius: 8px;
  padding: var(--raum-2) var(--raum-3);
  min-height: 3rem;
}
input::placeholder { color: var(--text-leise); opacity: 1; }
input:hover { border-color: var(--aktion); }

.affixfeld { display: flex; align-items: stretch; }
.affix {
  display: flex;
  align-items: center;
  font-family: var(--schrift-daten);
  font-size: var(--s1);
  color: var(--text-leise);
  background: var(--karte);
  border: 2px solid var(--text-leise);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  padding-inline: var(--raum-2);
  white-space: nowrap;
}
.affixfeld input { border-radius: 0 8px 8px 0; min-width: 0; flex: 1; }

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

/* --- Signature: der Richtungsbalken -------------------------------------
   Ein Kurzlink enthält kein Ziel, er zeigt auf eines. Die Pfeilspitze sagt
   das aus, ohne es zu beschriften. Dieselbe Form trägt auf der Startseite
   die Aktion und auf der Ergebnisseite das Ergebnis. */
.balken {
  background: var(--aktion);
  color: var(--karte);
  padding: var(--raum-3) calc(var(--pfeil) + var(--raum-3)) var(--raum-3) var(--raum-3);
  clip-path: polygon(0 0, calc(100% - var(--pfeil)) 0, 100% 50%,
                     calc(100% - var(--pfeil)) 100%, 0 100%);
  width: 100%;
  border: 0;
  border-radius: 0;
  text-align: left;
  font-family: var(--schrift-anzeige);
  font-weight: 800;
  font-size: var(--s3);
  letter-spacing: -0.01em;
  cursor: pointer;
  min-height: 3.25rem;
  display: block;
}
.balken:hover { background: var(--text); }

/* Der Fokusring darf nicht vom clip-path abgeschnitten werden. Deshalb liegt
   er hier innen statt außen — gleichwertiger Ersatz nach Regel 9, mit
   ausreichendem Kontrast gegen die Balkenfläche. */
.balken:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--karte), inset 0 0 0 6px var(--aktion);
}

/* --- Zweitknopf --------------------------------------------------------- */
.knopf-zweit {
  font-family: var(--schrift-text);
  font-size: var(--s2);
  font-weight: 700;
  color: var(--aktion);
  background: var(--karte);
  border: 2px solid var(--aktion);
  border-radius: 8px;
  padding: var(--raum-2) var(--raum-3);
  min-height: 2.75rem;
  cursor: pointer;
}
.knopf-zweit:hover { background: var(--feld); border-color: var(--text); }

/* --- Optionsfläche ------------------------------------------------------ */
details {
  margin-top: var(--raum-3);
  border-top: 2px solid var(--feld);
  padding-top: var(--raum-2);
}
summary {
  font-size: var(--s2);
  font-weight: 700;
  color: var(--aktion);
  cursor: pointer;
  min-height: 1.5rem;
  padding: var(--raum-2) 0;
}
summary:hover { text-decoration: underline; }
.optionen-inhalt { padding-top: var(--raum-2); }

/* --- Fehler: Text UND Zeichen ------------------------------------------- */
.fehler {
  display: flex;
  gap: var(--raum-2);
  align-items: flex-start;
  font-size: var(--s2);
  font-weight: 600;
  color: var(--siegel);
  margin: var(--raum-2) 0 0;
  padding: var(--raum-2) var(--raum-3);
  border-radius: 8px;
  border: 2px solid var(--siegel);
  line-height: 1.5;
}
.fehler-zeichen { flex: none; font-weight: 800; font-family: var(--schrift-anzeige); }
input[aria-invalid="true"] { border-color: var(--siegel); }

/* --- Ergebnisseite ------------------------------------------------------ */
.kurzlink-balken {
  background: var(--aktion);
  color: var(--karte);
  padding: var(--raum-3) calc(var(--pfeil) + var(--raum-3)) var(--raum-3) var(--raum-3);
  clip-path: polygon(0 0, calc(100% - var(--pfeil)) 0, 100% 50%,
                     calc(100% - var(--pfeil)) 100%, 0 100%);
  margin-bottom: var(--raum-3);
}
.kurzlink {
  font-family: var(--schrift-daten);
  /* Eigene, engere Skala als --s4: Bei voller Anzeigegröße bricht der
     Kurzlink zu „https://kurz.de" + „v/7Gk2mQx" um — gelesen wird dann eine
     andere Domain. Das ist bei einem Kurzlinkdienst kein Schönheitsfehler. */
  font-size: clamp(1.25rem, 0.55rem + 3.4vw, 2rem);
  font-weight: 700;
  margin: 0;
  /* break-all ignoriert erlaubte Bruchstellen. Mit normal + break-word nutzt
     der Browser zuerst die <wbr>-Marken im HTML und bricht erst dann hart. */
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 1.2;
  color: var(--karte);
}
.kurzlink a { color: var(--karte); }
/* Das Protokoll trägt keine Information, die man beim Vorlesen braucht.
   Kleiner gesetzt gewinnt der Kurzpfad die Anzeigegröße zurück. */
.protokoll { font-size: 0.55em; font-weight: 400; }

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

.ziel {
  font-family: var(--schrift-daten);
  font-size: var(--s1);
  color: var(--text-leise);
  overflow-wrap: anywhere;
  word-break: break-all;
  margin: 0;
  padding: var(--raum-2);
  background: var(--karte);
  border: 2px solid var(--feld);
  border-radius: 8px;
  line-height: 1.55;
}

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

.qr-rahmen {
  display: inline-block;
  background: var(--qr-grund);
  border: 2px solid var(--feld);
  border-radius: 8px;
  padding: var(--raum-2);
  line-height: 0;
}
.qr-rahmen svg { display: block; width: 10.5rem; height: 10.5rem; }
.qr-unterzeile {
  font-family: var(--schrift-daten);
  font-size: var(--s1);
  margin: var(--raum-2) 0 0;
  overflow-wrap: anywhere;
}

/* --- Verwaltungsblock: eigene Fläche, volle Kontrastwerte --------------- */
.verwaltung {
  border: 3px solid var(--aktion);
  border-radius: var(--radius);
  padding: var(--raum-3);
  margin-top: var(--raum-5);
}
.verwaltung-titel {
  font-family: var(--schrift-anzeige);
  font-weight: 800;
  font-size: var(--s3);
  margin: 0 0 var(--raum-2);
}
.verwaltung-text { font-size: var(--s2); margin-bottom: var(--raum-2); }

.token {
  display: block;
  font-family: var(--schrift-daten);
  font-size: var(--s1);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--karte);
  border: 2px solid var(--text-leise);
  border-radius: 8px;
  padding: var(--raum-2);
  overflow-wrap: anywhere;
  word-break: break-all;
  line-height: 1.55;
}

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

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

/* --- Fußzeile: liegt auf der Vollfläche, nicht auf der Karte ------------ */
.fuss {
  margin-top: var(--raum-4);
  font-size: var(--s1);
  color: var(--text);
}
.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: Fußzeilenlinks sind eigenständige Navigationsziele, keine
   Inline-Links im Satz. Ohne Mindesthöhe messen sie nur 18 px. */
.fuss a {
  color: var(--aktion);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
}

/* --- Fokus -------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--aktion);
  outline-offset: 2px;
}
.fuss :focus-visible, .kopf :focus-visible { outline-color: var(--aktion); }
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight; }
}

/* --- 320 px zuerst -------------------------------------------------------
   Unterhalb von 480 px läuft die Karte bis an die Ränder. Die Richtung
   verliert dort etwas an Wirkung — das ist der bezahlte Preis für Regel 14. */
@media (max-width: 29.999rem) {
  .inhalt { padding-inline: 0; }
  .karte {
    border-radius: 0;
    box-shadow: none;
    border-top: 3px solid var(--aktion);
    border-bottom: 3px solid var(--aktion);
    padding-inline: var(--raum-3);
  }
}
@media (min-width: 30rem) {
  body { padding-top: var(--raum-4); }
  .karte { padding: var(--raum-5); }
}

/* Ab genügend Breite sitzt die Karte außermittig, wie im Plan festgelegt.
   Das ist keine Laune: Eine zentrierte Karte lässt die Vollfläche zum bloßen
   Rahmen werden. Außermittig bleibt rechts eine zusammenhängende Fläche
   stehen, und erst dadurch ist das Bernstein eine Fläche und keine Umrandung. */
@media (min-width: 64rem) {
  .kopf, .inhalt, .fuss { margin-inline: 14vw auto; }
}