/* ==========================================================================
   The Zone Media, Seitentyp legal (Fassung B)
   Referenzseiten Welle 2: /impressum, /datenschutz.
   Wird nach /css/site.css geladen. Nur Tokens aus site.css, Praefix legal-.
   Lesespalte 34em auf Weiss. Keine Glows, kein Navy ausser Footer.

   Aufbau
     1  Hero (Weiss, Breadcrumb, Eyebrow, H1, Stand-Datum)
     2  Lesespalte (Inhalt-Hinweis, Ueberschriften, Absaetze, Listen, Tabellen)
     3  Responsive
   ========================================================================== */


/* ==========================================================================
   1 Hero
   ========================================================================== */

.legal-hero {
  padding-top: var(--tz-hero-top);
  padding-bottom: clamp(32px, 3.6vw, 48px);
  border-bottom: 1px solid var(--tz-line);
}
/* Breadcrumb: Bauteil in site.css (Audit B2) */

.legal-hero h1 {
  margin-top: 16px;
  font: 700 var(--tz-h1-text)/1.08 var(--tz-font-display);
  letter-spacing: -0.02em;
}
.legal-hero-date { margin-top: 14px; font: 700 14px/1.4 var(--tz-font-display); color: var(--tz-muted); }


/* ==========================================================================
   2 Lesespalte
   ========================================================================== */

/* Die Hairline unter dem Hero trennt schon: danach der enge Sektionsabstand,
   nur oben (Audit B5), der Abstand zum Footer kommt aus site.css (C17) */
.legal-section { padding-top: var(--tz-section-tight); }
.legal-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }

.legal-intro {
  max-width: 34em;
  margin-bottom: clamp(28px, 3.2vw, 40px);
  padding: 20px 24px;
  background: var(--tz-stone);
  border-radius: var(--tz-radius-compact);
}
.legal-intro-label { font: 500 12px/1.4 var(--tz-font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--tz-muted); }
.legal-intro-text { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--tz-navy); }

.legal-body { max-width: 34em; }
.legal-body > * + * { margin-top: 20px; }

.legal-body h2 {
  margin-top: 48px;
  font: 700 clamp(22px, 2vw, 28px)/1.25 var(--tz-font-display);
  letter-spacing: -0.01em;
  color: var(--tz-navy);
}
.legal-body > h2:first-child { margin-top: 0; }
.legal-body h3 {
  margin-top: 32px;
  font: 700 19px/1.3 var(--tz-font-display);
  letter-spacing: -0.005em;
  color: var(--tz-navy);
}
.legal-body p { font-size: 17px; line-height: 1.65; color: var(--tz-navy); }
.legal-body address { font-style: normal; font-size: 17px; line-height: 1.65; }

.legal-body ul, .legal-body ol { padding-left: 22px; font-size: 17px; line-height: 1.65; color: var(--tz-navy); }
.legal-body ul { list-style: none; padding-left: 0; }
.legal-body ul > li { position: relative; padding-left: 26px; }
.legal-body ul > li + li { margin-top: 10px; }
.legal-body ul > li::before {
  content: ""; position: absolute; left: 4px; top: .65em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tz-orange);
}
.legal-body ol { list-style: decimal; }
.legal-body ol > li + li { margin-top: 10px; }
.legal-body ol > li::marker { font: 700 16px/1 var(--tz-font-display); color: var(--tz-orange-ink); }

.legal-body a { color: var(--tz-navy); text-decoration: underline 1px var(--tz-line); text-underline-offset: 3px; }
.legal-body a:hover { color: var(--tz-orange-ink); text-decoration-color: var(--tz-orange); }

.legal-table-wrap { max-width: 34em; overflow-x: auto; border-radius: var(--tz-radius-compact); background: var(--tz-stone); }
.legal-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.legal-table th, .legal-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--tz-line); }
.legal-table th { font: 700 13px/1.3 var(--tz-font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--tz-muted); }
.legal-table tr:last-child td { border-bottom: 0; }


/* ==========================================================================
   3 Responsive
   ========================================================================== */

@media (max-width: 767px) {
  .legal-hero { padding-bottom: 24px; }
  .legal-intro { padding: 16px 18px; }
  .legal-body h2 { margin-top: 36px; font-size: 22px; }
  .legal-body h3 { margin-top: 24px; font-size: 18px; }
  .legal-body p, .legal-body ul, .legal-body ol, .legal-body address { font-size: 16px; }
}


/* ==========================================================================
   4 Responsive-Feinschliff (Bericht _berichte/responsive-a.md, 2026-09-23)
   ========================================================================== */

/* «Datenschutzerklärung» ragte bei 320 bis 430 px über den Rand: Trennung an
   der Wortfuge per ­ im Markup (Audit B10), Umbruch als Rückfallebene */
.legal-hero h1 { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; }

/* Telefon und E-Mail in der Adresse: Trefferfläche 44 px ohne Zeilenabstand zu ändern */
.legal-body address a { display: inline-block; padding-block: 11px; margin-block: -11px; }