@charset "UTF-8";
/* ==========================================================================
   KAHRAMAN GMBH & CO. KG — VODAFONE SHOPS
   legal.css · Impressum und Datenschutzerklärung
   --------------------------------------------------------------------------
   Grundlage : Kahraman Designsystem v1.0 (global.css)
   Präfix    : kh-legal-  ·  Schema: kh-block__element--modifier
   --------------------------------------------------------------------------
   WAS HIER ANDERS IST ALS AUF DEN ÜBRIGEN SEITEN

   Diese beiden Seiten haben eine andere Aufgabe als der Rest der
   Website. Sie sollen nicht überzeugen, sondern auffindbar machen.
   Jemand sucht hier eine bestimmte Angabe — die Registernummer, den
   Absatz zum Bewerbungsformular — und will sie in Sekunden finden.

   Daraus folgt alles Weitere:

       kein roter Kopfbereich   Rot markiert hier nur die Kante am
                                Seitentitel und die aktive Marke im
                                Inhaltsverzeichnis.
       schmale Spalte           68 Zeichen Satzbreite, wie kh-prose.
       kein Kartenraster        Abschnitte werden durch Abstand und
                                Haarlinien getrennt, nicht durch Kästen.
       sichtbare Struktur       H2 pro Abschnitt, H3 pro Unterpunkt,
                                beim Datenschutz zusätzlich ein
                                Inhaltsverzeichnis mit Sprungmarken.

   „Hochwertig" heisst auf einer Rechtsseite: ruhig, gleichmässig,
   ohne Dekoration, die beim Lesen im Weg steht.
   ========================================================================== */


/* ==========================================================
   00. VERTIKALER RHYTHMUS
   ==========================================================
   Grosszügiger als auf den Inhaltsseiten. Rechtstexte werden
   in Abschnitten gelesen, nicht am Stück — der Abstand ist das
   einzige Mittel, das die Abschnitte trennt.
   ========================================================== */

.kh-legal-hero { padding-block: clamp(48px, 4vw + 24px, 88px) clamp(40px, 3vw + 20px, 72px); }
.kh-legal-toc  { padding-block: 0 clamp(24px, 2vw + 12px, 40px); }

/* HELLGRAUER GRUND UNTER DEN WEISSEN FLÄCHEN
   Ohne ihn stünden weisse Karten auf Weiss und wären nur an ihrer
   Kante zu erkennen. Der Grund ist der ruhigste Ton des
   Designsystems; er trägt die Flächen, ohne selbst aufzufallen.
   Der obere Innenabstand wächst mit, damit die erste Fläche nicht
   an der roten Kante klebt. */
.kh-legal-body {
  padding-block: clamp(36px, 3vw + 16px, 64px) clamp(56px, 5vw + 28px, 112px);
  background-color: var(--kh-color-surface-100);
}


/* ==========================================================
   01. SEITENKOPF — ROTE MARKENFLÄCHE
   ==========================================================
   Hier stand eine weisse Fläche mit roter Kante. Sie war ruhig,
   aber sie sah nicht aus wie diese Website: jede andere Seite
   beginnt mit einer roten Markenfläche.

   Jetzt tut es diese auch — und zwar FLACH. Kein Verlauf, kein
   Ringmotiv, kein Signet, keine Bewegung. Auf Startseite,
   Karriere, Geschäftskunden und „Über uns" trägt der Kopf ein
   Motiv, weil dort etwas beworben wird. Ein Rechtstext bewirbt
   nichts; die Fläche und die Typografie genügen. Das ist der
   Unterschied zwischen „gleiches Haus" und „gleiche Seite".

   KONTRAST (gegen #E60000)
   Weiss 4,81:1 · 88 % Weiss rund 4,4:1 · 84 % Weiss rund 4,2:1.
   Die Überschrift ist grosse Schrift und braucht 3:1, Eyebrow und
   Standzeile sind klein — für sie bleibt es bei Weiss mit hoher
   Deckkraft statt bei einem grauen Weiss, das rechnerisch
   durchfiele. Gemessen wird das unten im Bericht.
   ========================================================== */

.kh-legal-hero { background-color: var(--kh-color-primary-500); }

/* Die Textrollen kippen auf der roten Fläche. Sie stehen hier
   einzeln statt über kh-section--brand aus global.css: jene Klasse
   brächte zusätzlich den hellen Verlauf mit, den dieser Kopf
   ausdrücklich nicht haben soll. */
.kh-legal-hero .kh-h1 .elementor-heading-title { color: var(--kh-color-ink-inverse); }

.kh-legal-hero .kh-section-header__eyebrow,
.kh-legal-hero .kh-section-header__eyebrow p.elementor-heading-title {
  color: var(--kh-color-ink-inverse);
}

/* GEMESSEN UND KORRIGIERT · DIE STANDZEILE MUSSTE WEISS BLEIBEN
   Vorgesehen war rgba(255,255,255,.84). Nachgerechnet gegen
   #E60000 ergibt das 3,60:1 — die Zeile ist kleine Schrift und
   braucht 4,5:1. Auch 92 Prozent Weiss kommen nur auf 4,19.

   Der Grund liegt in der Markenfarbe selbst: reines Weiss erreicht
   auf #E60000 gerade einmal 4,81:1. Jede Abschwächung fällt damit
   sofort unter die Grenze. Auf einer Rechtsseite ist das der
   falsche Ort für einen Kompromiss, also steht die Zeile in
   vollem Weiss. Ihre Zurückhaltung kommt aus Schriftgrad und
   Zeilenlänge, nicht aus der Deckkraft. */
.kh-legal-hero .kh-legal-hero__meta { color: var(--kh-color-ink-inverse); }

/* Die kurze Kante über dem Eyebrow war rot — auf rotem Grund wäre
   sie unsichtbar. */
.kh-legal-hero .kh-legal-hero__rule { background-color: rgba(255, 255, 255, .60); }

/* DER KOPF STEHT AM SATZSPIEGEL, NICHT IN DER MITTE
   -------------------------------------------------------------
   Hier stand:

       .kh-legal-hero__inner { max-width: var(--kh-container-narrow); }

   Das sind 760px. Zusammen mit dem margin-inline: auto, das jeder
   .kh-container mitbringt, wurde daraus ein schmaler, ZENTRIERTER
   Kasten im 1440er-Fenster. Gemessen:

       Kopf    Container x=340, Breite  760, erstes Kind x=372
       Inhalt  Container x=120, Breite 1200, erstes Kind x=152

   Der Kopf begann also 220px weiter rechts als der Rechtstext
   darunter. Dass die Texte darin linksbündig sind, half nichts —
   der ganze Kasten stand in der Mitte. Genau das liess beide
   Köpfe zentriert wirken.

   In den Elementor-Daten stand nichts davon: der Container trägt
   content_width "full" und keine eigene Breite. Der Fehler lag
   allein in dieser einen Zeile, und sie entfällt ersatzlos —
   .kh-legal-hero__inner ist damit ein normaler .kh-container und
   beginnt auf derselben Kante wie jeder andere Abschnitt.

   DIE LESEBREITE BLEIBT — NUR NICHT MEHR ÜBER DEN CONTAINER
   Sie wandert an die Textelemente selbst: die Überschrift trägt
   ihre 20ch bereits (siehe unten), die Standzeile bekommt sie
   hier. 44rem sind 704px und damit praktisch die Breite, die der
   Absatz vorher hatte (gemessen 696px) — die Zeile wird also
   nicht länger, sie rückt nur nach links. */

.kh-legal-hero__rule {
  display: block;
  inline-size: 48px;
  block-size: 3px;
  margin-block-end: var(--kh-space-md);
  background-color: var(--kh-color-primary-500);
}

.kh-legal-hero .kh-h1 .elementor-heading-title {
  font-size: clamp(1.875rem, 1.3rem + 2.3vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.028em;
  max-width: 20ch;
}

/* Die Standzeile nennt, worauf der Text sich bezieht. Sie steht
   klein und grau, aber nicht versteckt: bei einem Rechtstext ist
   der Stand eine inhaltliche Angabe. */
.kh-legal-hero__meta {
  margin-block-start: var(--kh-space-md);
  max-width: 44rem;
  font-size: var(--kh-text-sm);
  line-height: 1.6;
  color: var(--kh-color-ink-500);
}


/* ==========================================================
   02. INHALTSVERZEICHNIS
   ==========================================================
   Nur auf der Datenschutzerklärung. Sie hat sechzehn Abschnitte;
   ohne Verzeichnis wäre die Suche nach einem davon ein Scrollen
   über mehrere Bildschirme.

   Keine Kästen, keine Nummernkreise: eine zweispaltige Liste mit
   Haarlinien. Die Nummer steht vor dem Eintrag und ist dieselbe
   wie am Abschnitt selbst, damit man beim Springen weiss, wo man
   herauskommt.
   ========================================================== */

.kh-legal-toc__inner { max-width: var(--kh-container-narrow); }

.kh-legal-toc__title {
  margin: 0 0 var(--kh-space-sm);
  font-size: var(--kh-text-label);
  font-weight: var(--kh-font-weight-bold);
  letter-spacing: var(--kh-tracking-label);
  text-transform: uppercase;
  color: var(--kh-color-ink-500);
}

.kh-legal-toc__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--kh-space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--kh-color-line-200);
}

@media (min-width: 48em) {
  .kh-legal-toc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.kh-legal-toc__link {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--kh-space-xs);
  align-items: baseline;
  min-block-size: var(--kh-tap-min);
  padding-block: var(--kh-space-xs);
  border-block-end: 1px solid var(--kh-color-line-200);
  font-size: var(--kh-text-sm);
  line-height: 1.5;
  color: var(--kh-color-ink-700);
  text-decoration: none;
  transition: color var(--kh-transition-fast) var(--kh-ease-standard);
}

.kh-legal-toc__link:hover { color: var(--kh-color-primary-text); }

.kh-legal-toc__link:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
  border-radius: var(--kh-radius-xs);
}

.kh-legal-toc__num {
  font-variant-numeric: tabular-nums;
  font-weight: var(--kh-font-weight-bold);
  color: var(--kh-color-primary-text);
}


/* ==========================================================
   03. TEXTKÖRPER
   ==========================================================
   Eine Spalte, 68 Zeichen breit. Das ist dieselbe Satzbreite wie
   kh-prose und damit dieselbe Lesegeschwindigkeit wie überall
   sonst auf der Website.
   ========================================================== */

.kh-legal-body__inner { max-width: var(--kh-container-narrow); }

/* JEDER ABSCHNITT IST JETZT EINE FLÄCHE
   -------------------------------------------------------------
   Vorher trennte eine Haarlinie die Abschnitte voneinander — auf
   einer weissen Seite eine lange, ununterbrochene Textbahn. Bei
   der Datenschutzerklärung waren das achtzehn Abschnitte am Stück.

   Jetzt trägt jeder Abschnitt eine eigene weisse Fläche auf
   hellgrauem Grund. Das ist kein Marketing-Kachelraster: keine
   Symbole, keine Schaltflächen, kein Anheben beim Überfahren. Die
   Fläche hat genau eine Aufgabe — zu zeigen, wo ein Thema anfängt
   und wo es aufhört. Wer eine Registernummer sucht, findet die
   Grenze sofort.

   Die Kante ist bewusst rgba(0,0,0,.08) und nicht line-200: auf
   dem grauen Grund braucht eine weisse Fläche eine Kante, die vom
   Untergrund unabhängig ist. */
.kh-legal-block {
  padding: clamp(22px, 1.6vw + 12px, 40px);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: var(--kh-radius-xl);
  background-color: var(--kh-color-surface-000);
  box-shadow:
      0 1px 2px rgba(0, 0, 0, .04),
      0 10px 30px -24px rgba(0, 0, 0, .35);
}

/* Die alte Trennregel wird zurückgenommen: Abstand JA, zweite
   Kante und zusätzlicher Innenabstand NEIN — beides hat die
   Fläche schon. */
.kh-legal-block + .kh-legal-block {
  margin-block-start: clamp(20px, 1vw + 12px, 28px);
  padding-block-start: clamp(22px, 1.6vw + 12px, 40px);
  border-block-start: 1px solid rgba(0, 0, 0, .08);
}

/* DIE ABSCHNITTSNUMMER ÜBER DER ÜBERSCHRIFT
   Sie kommt aus einem Zähler, nicht aus dem Inhalt — genau wie im
   Verzeichnis daneben, und aus demselben Grund: beim Umsortieren
   oder Ergänzen eines Abschnitts stimmt die Reihenfolge von
   selbst, und niemand muss zwei Stellen pflegen.

   Der Zähler sitzt auf dem Widget-Rahmen der Überschrift, nicht
   auf dem h2. Dadurch steht die Ziffer als eigene Zeile DARÜBER
   und nicht im Überschriftentext — Vorlesewerkzeuge sprechen die
   Überschrift, nicht „null-eins Anbieter". */
.kh-legal-main { counter-reset: kh-legal; }

.kh-legal-block { counter-increment: kh-legal; }

.kh-legal-block .kh-legal-block__title::before {
  content: counter(kh-legal, decimal-leading-zero);
  display: block;
  margin-block-end: var(--kh-space-2xs);
  font-family: var(--kh-font-sans);
  font-size: var(--kh-text-label);
  font-weight: var(--kh-font-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--kh-tracking-label);
  line-height: 1.4;
  color: var(--kh-color-primary-text);
}

/* Registernummern, lange Adressen und Verweise dürfen die Fläche
   nicht sprengen. anywhere nur hier, nicht im Fliesstext: es darf
   auch mitten im Wort trennen, und das will man nur da, wo sonst
   etwas herausragen würde. */
.kh-legal-block a,
.kh-legal-dl dd { overflow-wrap: anywhere; }

/* Die Abschnittsnummer steht über der Überschrift, nicht davor:
   so bleibt die Überschrift linksbündig auf derselben Achse wie
   der Fliesstext darunter. */
.kh-legal-block__num {
  display: block;
  margin-block-end: var(--kh-space-2xs);
  font-size: var(--kh-text-label);
  font-weight: var(--kh-font-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--kh-tracking-label);
  color: var(--kh-color-primary-text);
}

.kh-legal-block__title {
  margin: 0 0 var(--kh-space-md);
  font-family: var(--kh-font-heading);
  font-size: var(--kh-text-h3);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--kh-color-ink-900);
}

.kh-legal-block__sub {
  margin: var(--kh-space-lg) 0 var(--kh-space-xs);
  font-family: var(--kh-font-heading);
  font-size: var(--kh-text-h4);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.3;
  color: var(--kh-color-ink-900);
}

.kh-legal-block p {
  margin: 0 0 var(--kh-space-md);
  font-size: var(--kh-text-body);
  line-height: var(--kh-leading-relaxed);
  color: var(--kh-color-ink-700);
}

.kh-legal-block p:last-child { margin-block-end: 0; }

.kh-legal-block ul {
  margin: 0 0 var(--kh-space-md);
  padding: 0;
  list-style: none;
}

.kh-legal-block li {
  position: relative;
  padding-inline-start: var(--kh-space-lg);
  margin-block-end: var(--kh-space-xs);
  font-size: var(--kh-text-body);
  line-height: var(--kh-leading-normal);
  color: var(--kh-color-ink-700);
}

/* Dieselbe rote Marke wie in den Aufzählungen der Leistungsseite —
   das ist die einzige Stelle, an der diese Seiten Farbe im Text
   tragen. */
.kh-legal-block li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .65em;
  inline-size: 12px;
  block-size: 2px;
  background-color: var(--kh-color-primary-500);
}

.kh-legal-block a {
  font-weight: var(--kh-font-weight-medium);
  color: var(--kh-color-primary-text);
}

.kh-legal-block a:hover { color: var(--kh-color-primary-700); }


/* --- 03.1 Angabenliste (Impressum) ------------------------ */

/* Firmierung, Anschrift, Register: Paare aus Bezeichnung und
   Wert. Eine Definitionsliste sagt genau das aus, und sie sagt es
   auch Hilfsmitteln — deshalb dl/dt/dd und keine Tabelle und
   erst recht keine Karten.
   Bis 40em untereinander, darüber zweispaltig mit fester
   Beschriftungsspalte, damit die Werte auf einer Achse stehen. */

.kh-legal-dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0 0 var(--kh-space-md);
  border-block-start: 1px solid var(--kh-color-line-200);
}

.kh-legal-dl__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding-block: var(--kh-space-sm);
  border-block-end: 1px solid var(--kh-color-line-200);
}

@media (min-width: 40em) {

  .kh-legal-dl__row {
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: var(--kh-space-md);
    align-items: baseline;
  }
}

.kh-legal-dl dt {
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-semibold);
  line-height: 1.5;
  color: var(--kh-color-ink-500);
  margin: 0;
}

.kh-legal-dl dd {
  margin: 0;
  font-size: var(--kh-text-body);
  line-height: var(--kh-leading-normal);
  color: var(--kh-color-ink-900);
}

.kh-legal-dl dd a { color: var(--kh-color-primary-text); }


/* --- 03.2 Hinweisblock ------------------------------------ */

/* Für Stellen, an denen der Text den Leser auf einen anderen Weg
   schickt (Auskunftsrecht, Widerruf). Linke Kante statt Kasten:
   der Block bleibt Teil des Textflusses und unterbricht ihn nicht.

   BEWUSST NICHT für fehlende Pflichtangaben benutzt. Ein
   öffentliches „hier fehlt noch etwas" gehört nicht auf eine
   Rechtsseite; solche Lücken stehen als HTML-Kommentar im Quelltext
   für die Redaktion und vollständig im Übergabebericht. */
/* ==========================================================
   ZWEISPALTER MIT STEHENDEM INHALTSVERZEICHNIS
   ==========================================================
   Ein Rechtstext wird nicht gelesen, er wird nachgeschlagen.
   Wer hier landet, sucht einen bestimmten Punkt — die
   Registernummer, die Loeschfrist, die Aufsichtsbehoerde. Das
   Inhaltsverzeichnis gehoert deshalb nicht einmal an den Anfang,
   sondern dauerhaft ins Blickfeld.

   Ab 62em steht es links und bleibt stehen; rechts laeuft der
   Text. Darunter faellt es auf seinen alten Platz zurueck: ein
   kompakter Block ueber dem Inhalt. Keine waagerechte Leiste,
   keine Ausklapperei — auf einem Telefon ist eine Liste das
   Ruhigste und das am schnellsten Erfassbare.

   Die Textspalte ist bewusst schmal. Volle Containerbreite waere
   auf einem Rechtstext der sicherste Weg, dass niemand ihn liest.
   ========================================================== */

/* ELEMENTOR-VORGABE · DIE 10px DES CONTAINERS
   Der Zweispalter ist ein Elementor-Container und brachte dessen
   --padding-inline von 10px mit. Solange der Inhalt eine
   durchgehende Textbahn war, fiel das nicht auf. Seit links eine
   Seitenspalte steht, schon: gemessen begann sie bei x=162, die
   Überschrift im Kopf darüber bei x=152. Zehn Pixel Versatz
   zwischen Kopf und Inhalt sind genau die Art Unsauberkeit, die
   man nicht benennen kann, aber sieht. Die seitlichen Innen-
   abstände entfallen deshalb; oben und unten bleiben sie. */
.kh-legal-shell {
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3vw + 12px, 48px);
}

/* GEMESSEN UND KORRIGIERT · DER UMBRUCHPUNKT LAG ZU FRUEH
   Mit 62em standen die zwei Spalten schon ab 992px. Gemessen blieb
   der Textspalte bei 1024px dann nur 589px — die Vorgabe nennt
   720–820, und 589px sind rund 58 Zeichen je Zeile statt 72.

   Die Seitenspalte erscheint deshalb erst, wenn beide Masse
   nebeneinander passen: ab 78em bleiben nach 280px Verzeichnis und
   dem Abstand noch 764px fuer den Text. Darunter steht dasselbe
   Verzeichnis als kompakter Block oben — dort behaelt die
   Textspalte ihre vollen 760px. Ein Rechtstext verliert nichts,
   wenn das Verzeichnis nicht mitlaeuft; er verliert viel, wenn die
   Zeilen zu kurz werden. */
@media (min-width: 78em) {

  .kh-legal-shell {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: clamp(48px, 5vw, 96px);
    align-items: start;
  }

  /* Der Kopfbereich der Seite ist fest; ohne den Abstand
     verschwindet die oberste Zeile darunter. */
  .kh-legal-side {
    position: sticky;
    top: calc(var(--kh-header-height) + var(--kh-space-lg));
    max-block-size: calc(100vh - var(--kh-header-height) - var(--kh-space-xl));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--kh-color-line-300) transparent;
  }
}

/* Die Textspalte. 760px liegen im Bereich der Vorgabe (720–820)
   und ergeben bei 17px Schrift rund 72 Zeichen je Zeile.

   Auch hier entfallen die seitlichen 10px der Elementor-Vorgabe.
   Einspaltig stehen Verzeichnis und Flächen sonst versetzt:
   gemessen bei 390px begann die Navigation bei x=26, die erste
   Fläche bei x=36. */
.kh-legal-main {
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  max-width: 760px;
}


/* --- Das Verzeichnis in der Seitenspalte ------------------- */

/* Die Ueberschrift ist ein Ueberschriften-Widget mit header_size
   "p". ELEMENTOR-FALLE: auf p.elementor-heading-title greift
   global.css mit (0,2,1) — deshalb steht das p hier in der Kette. */
.kh-legal-side__title p.elementor-heading-title {
  margin: 0 0 var(--kh-space-sm);
  font-size: var(--kh-text-xs);
  font-weight: var(--kh-font-weight-semibold);
  letter-spacing: var(--kh-tracking-label);
  text-transform: uppercase;
  color: var(--kh-color-ink-500);
}


/* --- Das Verzeichnis als native Icon-Liste ----------------- */

/* VORHER EIN HTML-BLOCK, JETZT EIN WIDGET
   Das Verzeichnis stand als handgeschriebenes <nav> mit <ul> in
   einem HTML-Widget. Damit liess sich kein Eintrag im Editor
   aendern, ohne Quelltext anzufassen. Jetzt ist es eine
   Elementor-Icon-Liste: Beschriftung und Sprungziel jeder Zeile
   sind im Editor pflegbar.

   DIE NUMMER KOMMT AUS EINEM ZAEHLER
   Das Widget kennt Symbole, aber keine Textnummern. Statt ein
   Symbol je Zeile einzutragen — was eine Symbolschriftart
   nachladen wuerde, die diese Website bewusst nicht verwendet —
   zaehlt CSS. Die Nummer ist damit Darstellung, keine Beschriftung:
   Vorlesewerkzeuge sprechen den Eintrag, nicht die Ziffer, und
   beim Umsortieren stimmt die Reihenfolge von allein.

   SPEZIFITAET: Elementor liefert sein Widget-CSS in einer eigenen
   Datei aus, die nach dem Theme laden kann. Bei gleicher
   Gewichtung gewinnt dann Elementor. Das vorangestellte body macht
   aus (0,2,0) ein (0,2,1) und entscheidet unabhaengig von der
   Ladereihenfolge. */

body .kh-legal-side .elementor-icon-list-items {
  counter-reset: kh-side;
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--kh-color-line-200);
}

body .kh-legal-side .elementor-icon-list-item {
  counter-increment: kh-side;
  display: block;
  margin: 0;
  padding: 0;
  border-block-end: 1px solid var(--kh-color-line-200);
  font-size: inherit;
}

body .kh-legal-side .elementor-icon-list-item > a {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--kh-space-2xs);

  /* Trefferflaeche ohne aufgeblaehte Zeile. */
  min-block-size: var(--kh-tap-min);
  padding: var(--kh-space-2xs) 0;

  font-size: var(--kh-text-sm);
  line-height: var(--kh-leading-normal);
  color: var(--kh-color-ink-700);
  text-decoration: none;
  transition: var(--kh-transition-colors);
}

body .kh-legal-side .elementor-icon-list-item > a::before {
  content: counter(kh-side, decimal-leading-zero);
  font-variant-numeric: tabular-nums;
  font-weight: var(--kh-font-weight-semibold);
  color: var(--kh-color-primary-text);
}

body .kh-legal-side .elementor-icon-list-item > a:hover {
  color: var(--kh-color-ink-900);
}

body .kh-legal-side .elementor-icon-list-item > a:focus-visible {
  outline: none;
  border-radius: var(--kh-radius-xs);
  box-shadow: var(--kh-shadow-focus);
}

/* Der Text ist bei Elementor ein eigener span mit eigenem Polster. */
body .kh-legal-side .elementor-icon-list-text {
  padding: 0;
  color: inherit;
}

/* Ohne gesetztes Symbol gibt Elementor kein Symbolfeld aus. Traegt
   jemand spaeter doch eines ein, soll es nicht die Spalte der
   Nummer sprengen. */
body .kh-legal-side .elementor-icon-list-icon { display: none; }


/* --- Lesbarkeit im Textteil -------------------------------- */

/* Die Vorgabe nennt 16–18px und 1.65–1.75. 17px auf 1.7 liegt in
   beiden Faellen in der Mitte. */
.kh-legal-main .kh-legal-block p,
.kh-legal-main .kh-legal-block li {
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 72ch;
}

.kh-legal-main .kh-legal-block__title {
  font-size: clamp(1.25rem, 1.05rem + .5vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: -.015em;
}

/* Lange Adressen, Registerangaben und juristische Wortketten
   duerfen die Spalte nicht sprengen. break-word bricht erst,
   wenn eine Zeile sonst ueberliefe — anders als break-all, das
   auch dort trennt, wo Platz waere. */
.kh-legal-block a,
.kh-legal-dl dd { overflow-wrap: break-word; }


/* --- Die Abschnittsnummer kommt aus einem Zaehler ----------- */

/* Vorher stand die Nummer als <span> im Markup, zusammen mit der
   Ueberschrift in einem HTML-Widget. Damit war weder der Titel im
   Editor pflegbar, noch stimmte die Zaehlung, sobald jemand einen
   Abschnitt einschiebt.

   Jetzt ist der Titel ein echtes Ueberschriften-Widget und die
   Nummer entsteht in CSS. Sie ist Darstellung, kein Inhalt —
   Vorlesewerkzeuge muessen sie nicht mitsprechen, und beim
   Einfuegen eines Abschnitts zaehlt sie von allein weiter. */
.kh-legal-main { counter-reset: kh-legal; }

.kh-legal-main .kh-legal-block { counter-increment: kh-legal; }

.kh-legal-main .kh-legal-block__title::before {
  content: counter(kh-legal, decimal-leading-zero);
  display: block;
  margin-block-end: var(--kh-space-2xs);
  font-family: var(--kh-font-heading);
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--kh-tracking-label);
  line-height: 1;
  color: var(--kh-color-primary-text);
}

/* Der Titel ist jetzt ein Widget; gestaltet wird die Ueberschrift
   darin. Die aeltere Regel auf dem Element selbst bleibt stehen,
   damit nichts bricht, falls irgendwo noch die alte Form steht. */
.kh-legal-main .kh-legal-block__title .elementor-heading-title {
  margin: 0 0 var(--kh-space-md);
  font-family: var(--kh-font-heading);
  font-size: clamp(1.25rem, 1.05rem + .5vw, 1.5rem);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--kh-color-ink-900);
}

/* Der Abstand zwischen zwei Abschnitten traegt eine Haarlinie —
   die Trennung, die Abschnitt 10 der Vorgabe meint. */
.kh-legal-main .kh-legal-block + .kh-legal-block {
  margin-block-start: clamp(36px, 3vw + 16px, 56px);
  padding-block-start: clamp(36px, 3vw + 16px, 56px);
  border-block-start: 1px solid var(--kh-color-line-200);
}


/* --- Hervorgehobener Hinweis ------------------------------- */

/* Fuer die zwei, drei Stellen, die man wirklich finden muss —
   die Rechte der betroffenen Person, der Weg zum Verantwortlichen.
   Eine ruhige Flaeche mit roter Kante, kein Handlungsaufruf. */
.kh-legal-callout {
  margin-block: var(--kh-space-lg);
  padding: var(--kh-space-lg);
  border: 1px solid var(--kh-color-line-200);
  border-inline-start: 3px solid var(--kh-color-primary-500);
  border-radius: var(--kh-radius-md);
  background-color: var(--kh-color-surface-050);
}

.kh-legal-callout > :first-child { margin-block-start: 0; }
.kh-legal-callout > :last-child { margin-block-end: 0; }

.kh-legal-callout__title {
  margin: 0 0 var(--kh-space-2xs);
  font-family: var(--kh-font-heading);
  font-size: var(--kh-text-h4);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.3;
  color: var(--kh-color-ink-900);
}


/* --- Offene Angaben deutlich kennzeichnen ------------------ */

/* Solange eine Pflichtangabe fehlt, steht das im Dokument und
   wird nicht kaschiert. Auf dem Testsystem sichtbar markiert,
   damit es vor dem Livegang niemand uebersieht. */
.kh-legal-open {
  display: inline-flex;
  align-items: center;
  gap: var(--kh-space-3xs);
  padding: 2px var(--kh-space-2xs);
  border: 1px dashed var(--kh-color-primary-300, var(--kh-color-primary-500));
  border-radius: var(--kh-radius-xs);
  font-size: var(--kh-text-xs);
  font-weight: var(--kh-font-weight-semibold);
  letter-spacing: var(--kh-tracking-label);
  text-transform: uppercase;
  color: var(--kh-color-primary-text);
  white-space: nowrap;
}


/* --- Anker nicht unter die Kopfzeile schieben -------------- */

.kh-legal-block { scroll-margin-block-start: calc(var(--kh-header-height) + var(--kh-space-lg)); }


/* ==========================================================
   ABSCHLUSSZEILE
   ==========================================================
   Jede andere Seite endet mit einem Handlungsbereich. Auf einem
   Rechtstext waere das falsch — hier wird nichts angeboten, hier
   wird Auskunft gegeben. Die beiden Dokumente enden deshalb mit
   dem Leisesten, was es gibt: dem Verweis auf das jeweils andere
   und dem Weg zurueck nach oben.

   Der Ruecksprung ist kein Zierrat. Die Datenschutzerklaerung ist
   gemessen 9271px lang; ohne ihn bleibt am Ende nur der Weg ueber
   die Bildlaufleiste. Ein Anker, kein Skript und keine Bewegung —
   das Verhalten kommt vom Browser.
   ========================================================== */

.kh-legal-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--kh-space-sm) var(--kh-space-lg);

  margin: clamp(40px, 3.5vw + 18px, 64px) 0 0;
  padding-block-start: var(--kh-space-md);
  border-block-start: 1px solid var(--kh-color-line-200);
}

/* Links die drei rechtlichen Verweise, rechts der Ruecksprung. */
.kh-legal-end__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kh-space-sm) var(--kh-space-lg);
}

.kh-legal-end__link,
.kh-legal-end__top {
  display: inline-flex;
  align-items: center;
  gap: var(--kh-space-2xs);

  /* Trefferflaeche ohne sichtbares Polster: die Hoehe kommt aus
     min-block-size, die Zeile bleibt dadurch schmal. */
  min-block-size: var(--kh-tap-min);

  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-semibold);
  text-decoration: none;
  transition: var(--kh-transition-colors);
}

.kh-legal-end__link { color: var(--kh-color-primary-text); }
.kh-legal-end__top  { color: var(--kh-color-ink-500); }

.kh-legal-end__link:hover { color: var(--kh-color-primary-700); text-decoration: underline; text-underline-offset: 3px; }
.kh-legal-end__top:hover  { color: var(--kh-color-primary-text); }

/* Der Pfeil nach oben ist eine gedrehte Ecke, kein Zeichensatz. */
.kh-legal-end__top::after {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(-45deg);
}

.kh-legal-end__link:focus-visible,
.kh-legal-end__top:focus-visible {
  outline: none;
  border-radius: var(--kh-radius-xs);
  box-shadow: var(--kh-shadow-focus);
}

/* Der Anker springt sonst unter die feste Kopfzeile. */
.kh-legal-hero { scroll-margin-block-start: var(--kh-header-height); }


.kh-legal-note {
  margin: var(--kh-space-lg) 0;
  padding: var(--kh-space-md) 0 var(--kh-space-md) var(--kh-space-lg);
  border-inline-start: 2px solid var(--kh-color-primary-500);
}

.kh-legal-note p {
  margin: 0;
  font-size: var(--kh-text-sm);
  line-height: 1.6;
  color: var(--kh-color-ink-700);
}

.kh-legal-note p + p { margin-block-start: var(--kh-space-sm); }


/* ==========================================================
   04. FOKUS UND BEWEGUNG — hier bewusst NICHTS
   ==========================================================
   Fokusring, Tap-Ziele und die Rücknahme der Bewegung stehen in
   global.css. Diese beiden Seiten tragen keine eigene Bewegung —
   auch das ist eine Entscheidung und keine Auslassung.
   ========================================================== */