/* ==========================================================================
   Servus Gelting — Pflichtseiten (/impressum, /datenschutz, /agb)

   1:1 nach dem Canvas-Rendering. Quelle:
   canvas/roesterei/seiten-recht.jsx — ein Template für alle drei

   Aufbau: Espresso-Kopf, Inhaltsverzeichnis links, Textspalte mit
   680px Satzbreite rechts, Querverweise am Fuß.

   ZUM INHALT: Impressum und Datenschutzerklärung tragen seit dem
   18.09.2026 ihre verbindlichen Texte (eRecht24, geprüft und ergänzt) —
   die AGB sind weiterhin Struktur-Platzhalter. Siehe RECHTSTEXTE in
   CLAUDE.md und _rechtstexte.md.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Bänder
   -------------------------------------------------------------------------- */

.band--dunkel {
  background: var(--espresso);
  color: var(--cream);
}

.band--cream2-oben {
  background: var(--cream-2);
  border-top: 1px solid var(--linie);
}


/* --------------------------------------------------------------------------
   1. Kopf — auf Espresso
   -------------------------------------------------------------------------- */

.recht-kopf { padding-block: 72px 64px; }

.recht-kopf__zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(246, 238, 223, .2);
}

.recht-kopf__ey {
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tan);
}

.recht-kopf__stand {
  font-size: 11.5px;
  letter-spacing: .14em;
  color: rgba(246, 238, 223, .55);
}

.recht-kopf__titel {
  margin-top: 36px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 82px;
  line-height: .98;
  letter-spacing: .012em;
  text-transform: uppercase;
  color: var(--cream);
}

.recht-kopf__intro {
  max-width: 680px;
  margin-top: 22px;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(246, 238, 223, .78);
}


/* --------------------------------------------------------------------------
   2. Inhalt — Verzeichnis links, Textspalte rechts
   -------------------------------------------------------------------------- */

.recht-inhalt {
  padding-block: 72px 88px;
  display: grid;
  grid-template-columns: 300px minmax(0, 680px);
  gap: 96px;
  align-items: start;
}

/* --- Inhaltsverzeichnis --- */

.verzeichnis__titel {
  margin-bottom: 16px;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted-brown);
}

.verzeichnis__liste { border-top: 1px solid var(--linie); }

.verzeichnis a {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 12px 0 12px 12px;
  border-bottom: 1px solid var(--linie);
  /* Der Markierungsstrich sitzt links und ist im Ruhezustand
     durchsichtig — so springt die Zeile beim Wechsel nicht. */
  border-left: 2px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.verzeichnis a:hover { border-left-color: var(--linie); }

.verzeichnis__nr {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .1em;
  line-height: 1.9;
  color: var(--muted-brown);
}

.verzeichnis__text {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--muted-brown);
}

.verzeichnis a.ist-aktiv { border-left-color: #C2540F; }
.verzeichnis a.ist-aktiv .verzeichnis__nr { color: #C2540F; }
.verzeichnis a.ist-aktiv .verzeichnis__text { font-weight: 700; color: var(--espresso); }

.verzeichnis__hinweis {
  margin-top: 22px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted-brown);
}

/* Die Abschnittszahl zeigt nur das Mobil-Artboard („Inhalt · 7
   Abschnitte"). Auf dem Desktop steht dort die volle Liste, die Zahl
   waere dort doppelt gemoppelt. */
.verzeichnis__anzahl { display: none; }


/* --- Textspalte --- */

.kapitel {
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--linie);
}

.kapitel__kopf {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 14px;
}

.kapitel__nr {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
  color: var(--amber);
}

.kapitel__titel {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.02;
  letter-spacing: .012em;
  text-transform: uppercase;
  color: var(--espresso);
}

.kapitel__text {
  font-size: 17px;
  line-height: 1.75;
  color: var(--muted-brown);
}

/* Rechtstexte sind länger als ein Absatz. Der Canvas zeigt je Kapitel
   nur eine Zeile Platzhalter — die Texte von eRecht24 haben
   Absatzfolgen, Zwischenüberschriften und Aufzählungen. Die Werte sind
   vom Fließtext der Beitragsseiten abgeleitet (.fliess__* in
   artikel.css), eine Stufe kleiner: Dort steht die Überschrift allein,
   hier unter einer nummerierten Kapitelüberschrift. Siehe
   _rechtstexte.md. */

.kapitel__text + .kapitel__text,
.kapitel__liste + .kapitel__text,
.angaben + .kapitel__text { margin-top: 20px; }

.kapitel__untertitel {
  margin: 28px 0 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: .012em;
  text-transform: uppercase;
  color: var(--espresso);
}

.kapitel__untertitel:first-child { margin-top: 0; }

.kapitel__liste {
  margin-top: 16px;
  border-top: 1px solid var(--linie);
}

.kapitel__liste li {
  padding: 11px 0;
  border-bottom: 1px solid var(--linie);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--muted-brown);
}

/* Ein Verweis im Rechtstext muss als Verweis erkennbar sein — Farbe
   allein genügt nicht, und in diesen Texten stehen Adressen, auf die es
   ankommt (Aufsichtsbehörde, OS-Plattform, die eigene Erklärung).
   basis.css stellt alle Verweise glatt; hier wird das zurückgenommen. */
.kapitel__text a,
.kapitel__liste a {
  color: var(--espresso);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.kapitel__text a:hover,
.kapitel__liste a:hover { color: #C2540F; }

/* Angaben als Zeilenpaare — nur im Impressum */
.angaben {
  margin-top: 6px;
  border-top: 1px solid var(--linie);
}

.angaben > div {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
  padding: 13px 0;
  border-bottom: 1px solid var(--linie);
}

.angaben dt {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--muted-brown);
}

.angaben dd {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--espresso);
}

/* Hinweiskasten am Ende der Textspalte */
.rechtshinweis {
  padding: 22px 26px;
  background: var(--cream-2);
  border: 1px solid var(--linie);
  border-left: 3px solid #C2540F;
  border-radius: 6px;
}

.rechtshinweis__marke {
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: .14em;
  color: #C2540F;
}

.rechtshinweis p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted-brown);
}

/* Der Kasten steht seit dem 18.09.2026 auch mitten im Text — für das
   Widerspruchsrecht nach Art. 21 DSGVO, das „getrennt von anderen
   Informationen" dargestellt werden muss. Dann trägt er mehrere
   Absätze und braucht Abstand zum Kapiteltext. */
.rechtshinweis p + p { margin-top: 12px; }

.kapitel .rechtshinweis { margin-top: 20px; }


/* --------------------------------------------------------------------------
   3. Querverweise auf die anderen Pflichtseiten
   -------------------------------------------------------------------------- */

.querverweise { padding-block: 56px 64px; }

.querverweise .eyebrow { display: block; margin-bottom: 24px; }

.querverweise__raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Vier Kacheln sind der Normalfall — Impressum, Datenschutz, AGB,
   Cookie-Einstellungen, die aktuelle Seite darunter ausgegraut. Zum
   Launch der Phase A entfallen die AGB (kein Shop, kein Onlineverkauf);
   dann stünden drei Kacheln in vier Spalten und rechts bliebe ein leeres
   Viertel von 313px, das aussieht, als fehle etwas.

   Die Regel zählt die Kinder, statt die Spaltenzahl fest zu setzen: Sie
   greift nur bei genau drei und fällt von selbst weg, sobald die AGB
   zurückkommen. Gemessen bei 1440: Kacheln 293x141 auf 398x107 — der
   Name „Cookie-Einstellungen" bricht dann nicht mehr um —, Block 303 auf
   269, Seite 3771 auf 3737.

   Eingeklammert in min-width, weil `:has()` sonst die Stufen für
   schmalere Fenster überstimmen würde: Sein Selektor wiegt schwerer als
   das blosse `.querverweise__raster` in den Media Queries darunter.

   Seit dem 18.09.2026 sind es zwei: Mit den AGB sind auch die
   Cookie-Einstellungen entfallen: Die Seite setzt keine Cookies und
   holt keine Einwilligung ein, seit der dauerhafte Speichereintrag weg
   ist — ein Einstieg zum Widerruf einer Einwilligung, die es nicht
   gibt, führt in die Irre. Zwei Kacheln in vier Spalten ließen die
   halbe Reihe leer. */
@media (min-width: 1201px) {
  .querverweise__raster:has(> :last-child:nth-child(3)) {
    grid-template-columns: repeat(3, 1fr);
  }

  .querverweise__raster:has(> :last-child:nth-child(2)) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.querverweis {
  padding: 20px 22px 22px;
  background: var(--flaeche-karte);
  border: 1px solid var(--linie);
  border-radius: 6px;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.querverweis:hover { border-color: var(--espresso); }

/* Die Seite, auf der man gerade ist, steht gedämpft da */
.querverweis.ist-hier { opacity: .45; }

.querverweis__pfad {
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--muted-brown);
}

.querverweis__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.querverweis__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  color: var(--espresso);
}


/* --------------------------------------------------------------------------
   4. Schmalere Fenster

   ACHTUNG: Die Mobil-Artboards „09a–09c … Mobile 390" sind hier NICHT
   umgesetzt. Dort ist das Inhaltsverzeichnis aufklappbar. Was folgt,
   bricht nur die Desktop-Fassung um.
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .recht-inhalt { grid-template-columns: 1fr; gap: 48px; }
  .querverweise__raster { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .recht-kopf__zeile { flex-wrap: wrap; gap: 8px; }
  .recht-kopf__titel { font-size: clamp(36px, 8vw, 82px); }
  .kapitel__titel { font-size: clamp(24px, 5vw, 32px); }
  .angaben > div { grid-template-columns: 1fr; gap: 4px; }
  .querverweise__raster { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   Mobil — Artboards „09a · Impressum", „09b · Datenschutz",
   „09c · AGB", je Mobile 390
   Gemessen gegen die eigenständigen Artboard-Ausgaben des Kunden
   (_referenz/impressum-, datenschutz-, agb-mobile.html),
   geprüft mit _abgleich.html.

   Eine Textstelle bleibt bewusst anders: Die Artboards nennen im
   Impressum noch die alte Anschrift, „noch zu klären" als Rechtsform
   und hallo@servus-gelting.de. Es gilt ADRESSE in CLAUDE.md.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  .recht-kopf, .querverweise { padding-inline: 24px; }

  /* --- Kopf --------------------------------------------------------------
     Auf dem Desktop stehen Marke und Standzeile nebeneinander ueber dem
     Titel. Im Artboard steht die Marke oben, die Standzeile ganz unten
     mit Linie darueber. Die Zeile wird dafuer aufgeloest. */
  .recht-kopf { display: flex; flex-direction: column; padding-block: 32px 36px; }
  .recht-kopf__zeile { display: contents; }

  .recht-kopf__ey { order: 1; font-size: 10px; line-height: 1.9; letter-spacing: .2em; }
  .recht-kopf__titel { order: 2; }
  .recht-kopf__intro { order: 3; }

  .recht-kopf__stand {
    order: 4;
    padding-top: 14px;
    border-top: 1px solid rgba(246, 238, 223, .2);
    font-size: 10.5px;
    line-height: 1.9;
  }

  .recht-kopf__titel {
    margin-top: 14px;
    font-size: 42px;
    line-height: 1;
    letter-spacing: .01em;
  }

  .recht-kopf__intro { margin: 16px 0 18px; font-size: 15px; line-height: 1.6; }


  /* --- Inhaltsverzeichnis ------------------------------------------------
     Mobil bleibt davon nur die Kopfzeile: „Inhalt · 7 Abschnitte" auf
     der Zweitfläche. Die Sprungliste ist dem Desktop vorbehalten — im
     Artboard ist sie eingeklappt. */
  .recht-inhalt { display: block; padding: 0; }

  .verzeichnis {
    padding: 18px 24px;
    background: var(--bg-alt, #F2E9DC);
  }
  .verzeichnis__titel { margin-bottom: 0; font-size: 10.5px; line-height: 1.9; }
  .verzeichnis__anzahl { display: inline; }
  .verzeichnis__liste, .verzeichnis__hinweis { display: none; }

  /* --- Textspalte ---------------------------------------------------------- */
  .recht-text { padding: 34px 24px 40px; }

  .kapitel { padding-bottom: 26px; margin-bottom: 26px; }

  .kapitel__kopf { display: block; }
  .kapitel__nr {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 11px;
    line-height: 1.9;
    letter-spacing: .14em;
  }
  .kapitel__titel { font-size: 26px; line-height: 1.04; letter-spacing: .01em; }
  .kapitel__text { margin-top: 12px; font-size: 15px; line-height: 1.6; }

  .kapitel__text + .kapitel__text,
  .kapitel__liste + .kapitel__text,
  .angaben + .kapitel__text { margin-top: 16px; }

  .kapitel__untertitel { margin: 22px 0 10px; font-size: 17px; }
  .kapitel__liste { margin-top: 12px; }
  .kapitel__liste li { padding: 10px 0; font-size: 15px; line-height: 1.6; }

  .angaben { margin-top: 14px; }
  .angaben > div { display: block; padding: 12px 0; }
  .angaben dt { font-size: 10px; line-height: 1.9; letter-spacing: .16em; }
  .angaben dd { margin-top: 5px; font-size: 15.5px; line-height: 1.55; }

  .rechtshinweis { padding: 18px 20px; border-left-width: 2px; }
  .rechtshinweis__marke { margin-bottom: 8px; font-size: 10.5px; line-height: 1.9; }
  .rechtshinweis p { font-size: 15px; line-height: 1.6; }

  /* --- Querverweise --------------------------------------------------------- */
  .querverweise { padding-block: 34px 40px; }

  .querverweise .eyebrow {
    display: block;
    margin-bottom: 18px;
    font-size: 10.5px;
    letter-spacing: .26em;
  }

  .querverweise__raster { display: flex; flex-direction: column; gap: 12px; }

  .querverweis { padding: 16px 18px; }
  .querverweis__pfad { font-size: 10px; line-height: 1.9; letter-spacing: .14em; }
  .querverweis__zeile { gap: 12px; margin-top: 8px; }
  .querverweis__name { line-height: 1.3; }
}

/* Unter 390px deckt das Artboard nicht mehr ab: „Schlussbestimmungen"
   (AGB) und „erklärung" aus „Datenschutz­erklärung" sind Wörter ohne
   weitere Umbruchstelle und breiter als ihre Spalte — beide Seiten
   liefen dadurch sieben Pixel über den Rand. Sie dürfen trennen, statt
   die Seite breiter zu machen. Dieselbe Entscheidung wie bei
   „@servusgelting" auf der Startseite. */
@media (max-width: 389px) {
  .kapitel__titel,
  .recht-kopf__titel { hyphens: auto; overflow-wrap: break-word; }
}