/* ============================================================
   Rechtsseiten: Impressum, Datenschutz, AGB, Cookies

   Nur das, was style.css fuer lange Paragraphentexte nicht hat.
   Basis bleibt .a-col aus style.css (Blogartikel-Spalte) — diese
   Datei erweitert sie um Sprungmarken, Adressbloecke, Tabellen
   und den Platzhalter-Marker.

   Wird nur von den vier Rechtsseiten geladen, darum eine eigene
   Datei und kein Anhaengsel an style.css: die 67 KB dort werden
   auf jeder Seite geladen, diese 3 KB auf vieren.
   ============================================================ */

/* Paragraphen-Nummerierung: "§ 3 Vertragsschluss" als Ueberschrift
   plus automatisch nummerierte Absaetze waere schoen, ist aber in
   den AGB sprechender von Hand gesetzt. Hier nur die Optik. */
.legal h2{
  scroll-margin-top:92px;      /* die fixe Nav verdeckt sonst die Ueberschrift */
}
.legal h3{
  margin-top:30px;
  font-size:clamp(17px,2vw,20px);
  font-weight:700; letter-spacing:-.01em;
  color:var(--ink);
}
.legal h3 + p{ margin-top:10px; }

/* ---------- Inhaltsverzeichnis ---------- */
.legal-toc{
  /* Bewusst ein <div role="navigation">, kein <nav>: style.css macht jedes
     <nav> zur fixen Kopfleiste, das Verzeichnis lag dann ueber der Seite. */
  margin-top:8px; padding:0 0 24px;
  border-bottom:1px solid var(--line);
}
.legal-toc b{
  display:block; font-size:12px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue);
}
.legal-toc ol{
  margin-top:14px; padding:0; list-style:none;
  display:grid; gap:2px;
  counter-reset:toc;
}
.legal-toc li{ margin:0; padding:0; }
.legal-toc li::before{ content:none; }   /* .a-col li::before aus style.css aushebeln */
.legal-toc a{
  display:block; padding:7px 10px; margin-left:-10px;
  border-radius:9px;
  font-size:15px; font-weight:500; color:var(--dim);
  counter-increment:toc;
}
.legal-toc a::before{
  content:counter(toc) ".";
  display:inline-block; min-width:1.8em;
  font-weight:700; color:var(--blue);
}
@media (hover:hover){ .legal-toc a:hover{ color:var(--ink); background:rgba(255,255,255,.75); } }
.legal-toc a:active{ color:var(--blue); background:#fff; }

/* ---------- Adress- und Datenbloecke ---------- */
.legal-card{
  margin-top:20px; padding:0 0 0 18px;
  border-left:2px solid var(--line);
}
.legal-card + .legal-card{ margin-top:14px; }

/* Begriff/Wert-Paare (Registergericht, USt-IdNr., Kontakt …).
   Grid statt float, damit lange Werte auf dem Handy unter das
   Label rutschen statt es wegzudruecken. */
.legal-dl{ margin:0; display:grid; gap:12px 20px; grid-template-columns:auto 1fr; }
.legal-dl dt{ font-weight:600; color:var(--ink); }
.legal-dl dd{ margin:0; color:var(--dim); }
.legal-dl dd a{ color:var(--blue); font-weight:500; }
@media (max-width:560px){
  .legal-dl{ grid-template-columns:1fr; gap:4px 0; }
  .legal-dl dd{ margin-bottom:12px; }
}

/* ---------- Tabelle (Verarbeitungen, Speicherfristen) ---------- */
.legal-table-wrap{ margin-top:20px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.legal-table{
  width:100%; min-width:520px;
  border-collapse:collapse;
  font-size:15px; line-height:1.5;
}
.legal-table th, .legal-table td{
  padding:12px 14px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line);
}
.legal-table th{
  font-weight:600; color:var(--ink);
  font-size:13px; letter-spacing:.04em; text-transform:uppercase;
  border-bottom:1.5px solid #c8d9f6;
}
.legal-table td{ color:var(--dim); }
.legal-table tr:last-child td{ border-bottom:none; }

/* ---------- Platzhalter ----------
   Bewusst auffaellig: was hier steht, ist noch keine Pflichtangabe,
   sondern eine offene Aufgabe. Lieber sichtbar leer als erfunden. */
.todo{
  display:inline-block; padding:2px 9px; border-radius:7px;
  background:#fff3cd; color:#7a5800;
  font-weight:600; font-size:.92em;
  box-shadow:inset 0 0 0 1px #f0d98a;
}

/* ---------- Stand-Zeile ---------- */
.legal-stand{
  margin-top:48px; padding-top:20px;
  border-top:1px solid var(--line);
  font-size:14px; color:var(--dim);
}

/* .a-col setzt sehr grosse Absaetze — in Rechtstexten sind das
   hunderte Zeilen. Eine Stufe kleiner, sonst scrollt man ewig. */
.legal > p{ font-size:clamp(15px,1.7vw,17px); }
.legal > ul{ margin-top:18px; gap:12px; }
.legal > ul li{ font-size:clamp(15px,1.7vw,17px); }

/* Schlicht: keine Kaesten, Ueberschriften schwarz, Text grau */
.legal h1, .legal h2, .legal h3{ color:var(--ink); }

/* ============================================================
   MOBILE-PRUEFUNG 2026-10-02 (mobile-check.js ueber alle Seiten)
   Nur Ergaenzungen, nichts oben geaendert. Einmal loeschen = alter Stand.
   ============================================================ */
/* Tippflaechen auf dem Handy mindestens 44 px (Apple HIG). Desktop bleibt kompakt. */
@media (max-width:900px){
  .legal-toc a{ display:flex; align-items:center; min-height:44px; padding-top:6px; padding-bottom:6px; }
  /* Unterpunkte (richtlinien.html setzt im Seiten-CSS 4px) — hoehere Spezifitaet noetig */
  body .legal-toc ol ol a{ min-height:44px; }
  /* Einzelne Links als Wert (Impressum: Mail, Instagram): Trefferflaeche groesser, Zeile gleich hoch */
  .legal-dl dd > a:only-child, .legal-card > p > a:only-child{
    display:inline-block; padding:10px 0; margin:-10px 0;
  }
}
/* Breite Tabellen scrollen auf dem Handy seitlich. Schatten am Rand zeigen, dass
   da noch mehr kommt; sie verschwinden am Anfang/Ende (background-attachment-Trick,
   kein JS). Der Rahmen-Hintergrund muss deckend sein, darum var(--paper). */
.legal-table-wrap{
  background:
    linear-gradient(to right, var(--paper) 30%, rgba(255,255,255,0)) left center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--paper) 30%, rgba(255,255,255,0)) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(22,35,61,.16), transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(22,35,61,.16), transparent) right center / 14px 100% no-repeat scroll;
}
@media (max-width:560px){
  .legal-table{ font-size:14px; }
  .legal-table th, .legal-table td{ padding:10px 12px; }
}