/* BARZIK STUDIO v4 — Fliesstext-Unterseiten (`main.doc`).
   Der Inhalt dieser Seiten kommt WORTGLEICH aus dem Live-Stand (siehe baue.mjs); geaendert wird
   nur, wie er aussieht. Deshalb stylt diese Datei die vorhandenen Klassen der Quelle statt neue
   zu verlangen — sonst muesste der Generator ins Markup eingreifen, und genau das darf er bei
   AGB, AVV, Datenschutz und Widerrufsbelehrung nicht.
   Gestaltung wie der Rest von v4: Radius 0, Instrument Sans, Mono fuer Marken und Labels,
   `--rule` fuer feine Linien, weisses Panel mit demselben Schatten wie `.svc__panel`. */

.doc{background:var(--paper);padding:calc(var(--nav-h) + clamp(40px,7vh,90px)) var(--pad) clamp(56px,8vh,110px)}
.doc__in{max-width:var(--w);margin:0 auto}

/* Kopf: Eyebrow in Mono, darunter die Ueberschrift — dasselbe Raster wie die Fall-Seiten. */
.doc__hd{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:start;padding-bottom:clamp(28px,4vw,48px);border-bottom:1px solid var(--rule)}
.doc__eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:10px}
.doc__hd h1{grid-column:2;font-size:clamp(2.1rem,5vw,4.4rem);line-height:1;font-weight:700;letter-spacing:-.04em;color:var(--ink);max-width:20ch}

.doc__grid{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:start;margin-top:clamp(28px,4vw,52px)}

/* Inhaltsverzeichnis: klebt mit, solange Platz ist. Kein Kasten, nur Linien — ein umrandeter
   Block waere hier der dritte Rahmen auf einer Seite, die schon ein Panel hat. */
.doc__toc{position:sticky;top:calc(var(--nav-h) + 20px);display:grid;gap:2px;max-height:calc(100svh - var(--nav-h) - 60px);overflow:auto}
.doc__toc p{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.doc__toc a{display:block;font-size:13.5px;line-height:1.35;color:var(--body);padding:7px 0;border-top:1px solid var(--rule)}
.doc__toc a:first-of-type{border-top:0}
.doc__toc a:hover{color:var(--accent-cta)}

/* Panel wie im Rest von v4 — gleiche Flaeche, gleicher Schatten, gleiche Kante. */
.doc__body{background:var(--card);box-shadow:0 30px 80px -40px rgba(22,23,26,.35);padding:clamp(24px,3.2vw,56px);color:var(--body);font-size:16px;line-height:1.65;min-width:0}
.doc__body>*+*{margin-top:16px}
.doc__body h2{font-size:clamp(1.3rem,2.2vw,1.85rem);line-height:1.2;font-weight:700;letter-spacing:-.03em;color:var(--ink);margin-top:38px;scroll-margin-top:calc(var(--nav-h) + 20px)}
.doc__body h3{font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:700;letter-spacing:-.02em;color:var(--ink);margin-top:28px;scroll-margin-top:calc(var(--nav-h) + 20px)}
.doc__body h2:first-child,.doc__body h3:first-child{margin-top:0}
.doc__body p.lead{font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--ink);font-weight:500;letter-spacing:-.012em}
.doc__body b,.doc__body strong{color:var(--ink);font-weight:700}
.doc__body a{color:var(--accent-cta);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.doc__body a:hover{color:#A83F0D}
.doc__body hr{border:0;border-top:1px solid var(--rule);margin:30px 0}
.doc__body ul,.doc__body ol{padding-left:0;margin-top:14px;display:grid;gap:9px}
.doc__body li{position:relative;padding-left:20px}
/* Runder Punkt: die EINZIGE Rundung im ganzen Entwurf, wie auf den anderen Seiten auch. */
.doc__body ul li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--accent-cta)}
.doc__body ol{counter-reset:d}
.doc__body ol li{counter-increment:d}
.doc__body ol li::before{content:counter(d) ".";position:absolute;left:0;top:0;font-family:var(--mono);font-size:12px;color:var(--muted)}

/* Tabellen (AVV-Unterauftragsverarbeiter, Preistabellen): eigener Scrollbereich, damit eine
   breite Tabelle nie die SEITE quer schiebt — der Ueberlauf gehoert in den Kasten, nicht ins
   Layout. `.doc__scroll` bringt die Quelle bereits mit. */
.doc__scroll{overflow-x:auto;margin-top:18px;border:1px solid var(--rule)}
.doc__body table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:520px}
.doc__body th,.doc__body td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
.doc__body thead th{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:400;background:var(--paper)}
.doc__body tbody tr:last-child td{border-bottom:0}

/* Schwesterlinks am Fuss des Textes. */
.doc__sib{margin-top:44px;padding-top:20px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 20px}
.doc__sib p{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);width:100%}
.doc__sib a{font-size:14.5px;font-weight:600;color:var(--ink)}
.doc__sib a:hover{color:var(--accent-cta)}

@media (max-width:960px){
  .doc__hd{grid-template-columns:1fr;gap:10px}
  .doc__eyebrow{padding-top:0}
  .doc__hd h1{grid-column:1}
  .doc__grid{grid-template-columns:1fr}
  /* Auf dem Handy klebt nichts: ein mitlaufendes Verzeichnis frisst dort die halbe Hoehe. */
  .doc__toc{position:static;max-height:none;overflow:visible;padding-bottom:18px;border-bottom:1px solid var(--rule)}
}

/* Aktionen auf der Fehlerseite.
   ⚠️ Die Knoepfe stehen INNERHALB von .doc__body, und dort faerbt  jeden Link
   orange und unterstreicht ihn. Diese Regel ist spezifischer als eine einzelne Klasse — mein
    kam nie an, der Knopf hatte orangen Text auf fast schwarzem Grund (gemessen 3,9:1).
   Deshalb hier bewusst mit  davor, statt !important. */
.doc__aktionen{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px}
.doc__body .doc__btn{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:#fff;padding:14px 24px;font-size:15px;font-weight:600;text-decoration:none;border:1.5px solid var(--ink);transition:background .25s,border-color .25s,color .25s}
.doc__body .doc__btn:hover{background:var(--accent-cta);border-color:var(--accent-cta);color:#fff}
.doc__body .doc__btn svg{width:17px;height:17px;flex:0 0 auto;transition:transform .25s}
.doc__body .doc__btn:hover svg{transform:translateX(5px)}
/* Zweite Wahl: Kontur statt Flaeche, damit der Weg zurueck der Hauptweg bleibt. */
.doc__body .doc__btn--wa svg{width:19px;height:19px}
.doc__body .doc__btn--wa{background:none;color:var(--ink);border-color:var(--rule-strong)}
.doc__body .doc__btn--wa:hover{background:var(--ink);border-color:var(--ink);color:#fff}
@media (max-width:560px){.doc__aktionen{flex-direction:column}.doc__body .doc__btn{width:100%;justify-content:center}}

/* ══ MOBILE KUERZUNG (30.08.2026) ═════════════════════════════════════════════════════════════
   Gemessen: Guide-Seiten 8,5 Bildschirme auf 390x844. Das Inhaltsverzeichnis wiederholt dabei
   nur die Ueberschriften, die zwei Bildschirme weiter ohnehin kommen — und seine Links messen
   32 px statt 44 (26 Befunde im Mobil-Audit). Auf dem Handy scrollt man, statt zu springen.
   ⚠️ Diese Regeln stehen HIER und nicht in `v4-site.css`: `.doc__toc` ist in beiden Dateien
   definiert, und diese laedt spaeter — eine Regel dort verliert die Kaskade. */
/* ⚠️ `pointer: coarse` statt `max-width:640px`: im Querformat misst ein Handy 844 px, dort blieb
   das Inhaltsverzeichnis mit 32-px-Links stehen (gemessen 30.08.2026, neun Vorkommen). */
@media (pointer: coarse){
  .doc__toc{display:none}
  .doc__grid{grid-template-columns:1fr;gap:0}
}
@media (max-width:640px){
  .doc__body h2{margin-top:clamp(28px,6vw,38px)}
  .doc__in{padding-bottom:clamp(32px,7vw,48px)}
}