/* ==========================================================================
   That's it. Marketing - Recruiting-Landingpage
   legal.css
   --------------------------------------------------------------------------
   Nur fuer /impressum/ und /datenschutz/. Ergaenzt style.css (Tokens, Reset,
   Typografie, Buttons) um das, was Fliesstextseiten brauchen: eine schmale
   Lesespalte, gegliederte Abschnitte und eine Definitionsliste fuer die
   Pflichtangaben.

   Die Rechtsseiten sind Lesen, nicht Ueberzeugen: keine Reveals, keine
   Animationen, kein zweiter CTA. Der Kopf bleibt schwarz wie Hero und
   Footer, damit die Klammer der Marke haelt, der Textkoerper steht auf
   Papier.
   ========================================================================== */

/* --- Kopf ---------------------------------------------------------------- */
.legal-header {
  background-color: var(--ti-black);
  color: var(--ti-paper);
  padding-block: clamp(2rem, 5vw, 3rem);
}

.legal-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ti-s-4);
}

.legal-header__logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.legal-header__logo img {
  display: block;
  width: auto;
  height: 1.75rem;
}

.legal-header__back {
  display: inline-block;
  padding-block: var(--ti-s-3);
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--ti-label);
  font-size: var(--ti-fs-body-s);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.legal-header__back:hover,
.legal-header__back:focus-visible {
  color: var(--ti-gold);
}

/* --- Textkoerper --------------------------------------------------------- */
.legal-main {
  padding-block: clamp(2.5rem, 7vw, 4.5rem);
}

/* Schmaler als der Standard-Container: Fliesstext liest sich ab etwa 70
   Zeichen je Zeile schlechter, der 1200px-Container waere hier zu breit. */
.legal-body {
  max-width: 44rem;
  margin-inline: auto;
  padding-inline: var(--ti-s-5);
}

.legal-body h1 {
  margin-bottom: var(--ti-s-4);
}

.legal-body__lead {
  color: var(--ti-fg-2);
  margin-bottom: var(--ti-s-8);
}

.legal-section {
  margin-top: var(--ti-s-8);
  padding-top: var(--ti-s-6);
  border-top: 1px solid var(--ti-line);
}

.legal-section:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.legal-section h2 {
  margin-bottom: var(--ti-s-4);
}

.legal-section h3 {
  margin-top: var(--ti-s-6);
  margin-bottom: var(--ti-s-3);
}

.legal-section p,
.legal-section li {
  color: var(--ti-fg-2);
}

/* Abstand zwischen aufeinanderfolgenden Bloecken - auch nach einer Liste.
   Ohne den zweiten Selektor klebt der Absatz nach .legal-list direkt am
   letzten Listenpunkt. */
.legal-section p + p,
.legal-section .legal-list + p,
.legal-section .legal-dl + p {
  margin-top: var(--ti-s-4);
}

.legal-list {
  margin-top: var(--ti-s-4);
  display: grid;
  gap: var(--ti-s-3);
}

.legal-list li {
  position: relative;
  padding-left: var(--ti-s-5);
}

/* Marken-Quadrat als Aufzaehlungszeichen, nicht der Standard-Punkt. */
.legal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 1px;
  background-color: var(--ti-gold-ink);
}

/* Pflichtangaben als Beschriftung/Wert-Paare. Ab 640px zweispaltig, damit
   das Auge die Beschriftungen als Spalte lesen kann. */
.legal-dl {
  display: grid;
  gap: var(--ti-s-3) var(--ti-s-5);
  margin-top: var(--ti-s-4);
}

.legal-dl dt {
  font-weight: 600;
  color: var(--ti-fg);
}

.legal-dl dd {
  margin: 0;
  color: var(--ti-fg-2);
}

.legal-body a {
  color: var(--ti-gold-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-body a:hover,
.legal-body a:focus-visible {
  text-decoration-thickness: 2px;
}

/* Ausnahme: Buttons in der Lesespalte (404-Seite). Die Regel darueber
   unterstreicht jeden Link im Fliesstext - das ist auf Rechtsseiten
   richtig, auf einem Gold-Button aber ein Fehler: die Unterstreichung
   laeuft quer durch die gesperrte Versalschrift und laesst den Button
   wie einen missratenen Textlink aussehen. Die Trefferflaeche und der
   Fokusring kommen von .btn, es geht hier nur um die Linie. */
.legal-body .btn,
.legal-body .btn:hover,
.legal-body .btn:focus-visible {
  text-decoration: none;
}

/* Offene Angabe, die vor Go-Live gefuellt werden muss. Bewusst sichtbar und
   nicht nur als HTML-Kommentar: ein unvollstaendiges Impressum, das
   vollstaendig aussieht, ist gefaehrlicher als eines, das seine Luecke
   zeigt. Beim Fuellen ersetzt der echte Wert das ganze Element. */
.legal-todo {
  display: inline-block;
  padding: 0.1em 0.5em;
  background-color: rgba(220, 152, 50, 0.16);
  border: 1px dashed var(--ti-gold-ink);
  border-radius: var(--ti-r-1);
  color: var(--ti-gold-ink);
  font-family: var(--ti-label);
  font-size: 0.85em;
  letter-spacing: 0.04em;
}

/* Variante fuer eine offene Stelle, die keine fehlende *Angabe* ist,
   sondern eine offene *Aufgabe* (z. B. eine noch zu praezisierende
   Rechtsgrundlage). Der Grundzustand oben ist auf ein kurzes Wort mitten
   im Satz gerechnet: inline-block, 0.85em, gesperrt. Ein ganzer Satz waere
   darin gestaucht und in der Label-Schrift muehsam zu lesen - deshalb hier
   voller Block, normale Laufweite und die Textschrift. */
.legal-todo--block {
  display: block;
  max-width: none;
  margin: var(--ti-s-4) 0;
  padding: var(--ti-s-4);
  font-family: inherit;
  font-size: 0.95em;
  letter-spacing: 0;
  line-height: 1.6;
}

/* Feldnamen im Fliesstext (utm_source und Verwandte). Monospace, damit ein
   Unterstrich nicht wie ein Trennfehler aussieht, aber ohne Kasten - es
   sind Beispiele, kein Code zum Kopieren. */
.legal-body code {
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 0.9em;
  color: var(--ti-fg);
  overflow-wrap: anywhere;
}

/* max-width: none, sonst begrenzt die globale p-Regel (65ch) den Kasten und
   die Trennlinie darueber endet mitten in der Spalte - derselbe Fall wie bei
   .section__overline in style.css. */
.legal-updated {
  max-width: none;
  margin-top: var(--ti-s-8);
  padding-top: var(--ti-s-5);
  border-top: 1px solid var(--ti-line);
  color: var(--ti-fg-3);
  font-size: var(--ti-fs-body-s);
}

@media (min-width: 640px) {
  .legal-dl {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  }

  .legal-dl dt {
    grid-column: 1;
  }

  .legal-dl dd {
    grid-column: 2;
  }
}

/* ==========================================================================
   Tabelle (Cookie-Uebersicht in der Datenschutzerklaerung)

   Eine Aufzaehlung von "Name / Zweck / Dauer" ist eine Tabelle und keine
   Liste - drei Angaben je Eintrag, und man liest sie spaltenweise ("was
   liegt hier laenger als eine Sitzung?"). Als Liste muesste man jeden
   Eintrag ganz lesen.

   Auf schmalen Displays passt sie nicht in die 44rem-Lesespalte: die
   Zweckspalte braucht Platz. Statt zu quetschen (Namen wie "ti_consent_v1"
   umbrechen dann mitten im Wort) ist der Rahmen waagerecht scrollbar und
   per tabindex auch mit der Tastatur erreichbar.
   ========================================================================== */
.legal-table-wrap {
  margin-top: var(--ti-s-4);
  overflow-x: auto;
}

.legal-table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: var(--ti-fs-body-s);
  line-height: 1.55;
  text-align: left;
}

.legal-table th,
.legal-table td {
  padding: var(--ti-s-3) var(--ti-s-4) var(--ti-s-3) 0;
  border-bottom: 1px solid var(--ti-line);
  vertical-align: top;
}

.legal-table th {
  font-family: var(--ti-label);
  font-size: var(--ti-fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ti-fg);
  white-space: nowrap;
}

.legal-table td {
  color: var(--ti-fg-2);
}

/* Erste Spalte traegt die technischen Namen - die sollen nicht umbrechen,
   sonst liest sich "_fbc" wie zwei Eintraege. */
.legal-table td:first-child {
  white-space: nowrap;
  color: var(--ti-fg);
}

/* Letzte Spalte ist kurz und steht sonst zu weit von ihrer Ueberschrift. */
.legal-table th:last-child,
.legal-table td:last-child {
  padding-right: 0;
  white-space: nowrap;
}

/* ==========================================================================
   404-Seite

   Nutzt die Schale der Rechtsseiten (schwarzer Kopf, schmale Lesespalte),
   bekommt aber einen eigenen Einstieg: eine grosse, gedaempfte 404 ueber
   der Headline. Sie ist rein dekorativ und per aria-hidden aus dem
   Vorlesefluss genommen - der Screenreader liest die Ueberschrift, nicht
   eine nackte Zahl.

   Bewusst NICHT gold: Die Zahl waere sonst das Lauteste auf der Seite und
   wuerde den Fehler betonen statt den Weg heraus. Gold traegt hier der CTA.
   ========================================================================== */
.notfound__code {
  font-family: var(--ti-display);
  font-size: clamp(4rem, 14vw, 7rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ti-n-200);
  margin: 0 0 var(--ti-s-3);
  max-width: none;
}

/* Die beiden Wege raus. Mobil untereinander und volle Breite, ab 480px
   nebeneinander - zwei gestapelte Buttons auf dem Desktop saehen aus wie
   eine unfertige Liste. */
.notfound__actions {
  display: flex;
  flex-direction: column;
  gap: var(--ti-s-3);
  margin-top: var(--ti-s-6);
}

.notfound__actions .btn {
  width: 100%;
}

@media (min-width: 480px) {
  .notfound__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .notfound__actions .btn {
    width: auto;
  }
}

.notfound__help {
  margin-top: var(--ti-s-6);
  padding-top: var(--ti-s-5);
  border-top: 1px solid var(--ti-line);
  color: var(--ti-fg-2);
  font-size: var(--ti-fs-body-s);
}