/* =====================================================================
   anton-gartmann.de – Impressum & Datenschutz (rechtliches.html)
   Plakat-Bildsprache wie die Startseite (seit 05.11.2026): Papier, Schwarz,
   Signalrot, Gelb als harte Fläche; strenges Zwölferraster mit Haarlinien,
   große Archivo-Überschrift, das „&“ als weißes, kursives Zeichen im roten
   Kreis. Baut auf css/base.css auf (Farben, Raster .raster, Kennzeile
   .kicker, Karteikarte .vb-karte, Fußzeile). Die Rechtstexte bleiben
   unverändert; hier ändert sich nur die Gestaltung.
   Reihenfolge: Kopfzeile · Einstieg · Impressum · Datenschutz ·
   Responsiv · Druck
   ===================================================================== */

/* ---------- Kopfzeile: Papier mit schwarzer Haarlinie, rechts der Rückweg als schwarzer Knopf ---------- */
.r-top{background:var(--hall);border-bottom:1px solid var(--ink)}
/* Kopfzeile in der Höhe der Plakat-Kopfzeile, über die ganze Breite (die Seite hat kein Skript; die Regeln für die
   Navigationskopfzeile ohne Skript in base.css gelten nur für .site-header) */
.rechtliches .r-top .nav-row{height:var(--kopf);min-height:0;padding:0 var(--rand);flex-wrap:nowrap}
.r-back{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 12px;background:var(--ink);color:var(--hall);font-weight:700;font-size:15px;line-height:1.15;text-decoration:none;white-space:nowrap;transition:background-color .18s,color .18s}
.r-back .pfeil{width:18px;height:18px;transition:transform .22s var(--einrasten)}
.r-back:hover{background:var(--rot);color:#fff}
.r-back:hover .pfeil,.r-back:focus-visible .pfeil{transform:translateX(-4px)}

/* ---------- Einstieg: Kennzeile, riesige Überschrift, schwarzer Balken – auf den Haarlinien des Rasters ---------- */
.r-hero{position:relative;overflow:clip;padding:clamp(26px,5svh,56px) 0 clamp(36px,7svh,84px)}
.r-linien{position:absolute;inset:0;z-index:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt);padding-inline:var(--rand);pointer-events:none}
.r-linien span{border-left:1px solid var(--haar);border-right:1px solid var(--haar)}
.r-hero-raster{position:relative;z-index:1;align-items:end}
.r-hero .kicker{grid-column:1/span 6;margin:0}
/* Zwei Zeilen fast gleicher Breite; das „&“ steht als Zeichen im roten Kreis am Ende der ersten */
.r-hero h1{grid-column:1/-1;margin:clamp(18px,4svh,44px) 0 0;font-weight:800;font-size:clamp(38px,13.2vw,240px);line-height:.86;letter-spacing:-.045em}
.r-hero h1 .zeile{display:block;white-space:nowrap}
/* Kreis so hoch wie die Versalien (mit Überhang wie ein rundes „O“): Zeichen .82 der Überschrift, Kreis .76,
   Unterkante .03 unter der Grundlinie (overflow:hidden macht die Unterkante zur Grundlinie des Kastens) */
.r-und{display:inline-block;width:.927em;height:.927em;margin-left:.037em;padding-top:.04em;overflow:hidden;border-radius:50%;background:var(--rot);color:#fff;font-size:.82em;line-height:.927em;text-align:center;letter-spacing:0;vertical-align:-.037em}
.r-balken{grid-column:1/-1;height:clamp(8px,1vw,14px);margin:clamp(16px,2.8svh,30px) 0 clamp(16px,2.4svh,26px);background:var(--ink)}
.r-hero .lead{grid-column:1/span 5;max-width:30em;color:var(--ink);font-weight:600;font-size:clamp(17px,.55vw + 12px,21px);line-height:1.38;letter-spacing:-.01em}

/* ---------- Impressum: gelbe Fläche, darauf die Karteikarte und der Hinweis ---------- */
.r-sec{position:relative;border-top:1px solid var(--ink);padding:clamp(56px,9svh,112px) 0}
.r-sec h2{margin:0;font-weight:800;line-height:.95;letter-spacing:-.04em;text-wrap:balance}
.r-impressum{background:var(--gelb);--fokus:var(--ink)}
.r-grid{row-gap:clamp(26px,4svh,44px);align-items:start}
.r-impressum h2{grid-column:1/span 9;font-size:clamp(34px,5.6vw,100px)}
.r-karte{grid-column:1/span 5}
.r-text{grid-column:7/span 5;margin:0;max-width:34em;color:var(--ink);font-size:clamp(17px,.5vw + 13px,21px);line-height:1.5}

/* ---------- Datenschutz: links das haftende Inhaltsverzeichnis, rechts das Dokument ---------- */
.r-doc-grid{align-items:start}
.r-index{grid-column:1/span 4;position:sticky;top:24px}
.r-index h2{margin-bottom:clamp(20px,3svh,30px);font-size:clamp(34px,3.6vw,62px);hyphens:manual}
.r-index ul{list-style:none;margin:0;padding:0;border-top:3px solid var(--ink)}
.r-index li{border-bottom:1px solid var(--ink)}
.r-index a{display:flex;align-items:center;gap:14px;min-height:48px;padding:8px 0;text-decoration:none;font-weight:650;font-size:16px;line-height:1.3;transition:color .18s}
/* Marke vor jedem Eintrag: schwarzes Quadrat, beim Überfahren und am angesprungenen Abschnitt ein roter Kreis */
.r-index a::before{content:'';flex:none;width:10px;height:10px;background:var(--ink);transition:border-radius .22s,background-color .18s,transform .22s var(--einrasten)}
.r-index a:hover,.r-index a:focus-visible{color:var(--rot-schrift)}
.r-index a:hover::before,.r-index a:focus-visible::before{border-radius:50%;background:var(--rot);transform:scale(1.3)}
.r-doc-grid:has(#verantwortlicher:target) .r-index a[href="#verantwortlicher"]::before,
.r-doc-grid:has(#grundsatz:target) .r-index a[href="#grundsatz"]::before,
.r-doc-grid:has(#hosting:target) .r-index a[href="#hosting"]::before,
.r-doc-grid:has(#zugangsschutz:target) .r-index a[href="#zugangsschutz"]::before,
.r-doc-grid:has(#kontakt:target) .r-index a[href="#kontakt"]::before,
.r-doc-grid:has(#rechte:target) .r-index a[href="#rechte"]::before{border-radius:50%;background:var(--rot);transform:scale(1.3)}

.r-doc{grid-column:6/span 7;min-width:0;max-width:44em}
.r-doc h3{margin:clamp(40px,6svh,60px) 0 14px;padding-top:14px;border-top:3px solid var(--ink);font-weight:800;font-size:clamp(23px,1.9vw,32px);line-height:1.1;letter-spacing:-.025em;scroll-margin-top:24px}
.r-doc h3:first-child{margin-top:0}
/* Angesprungener Abschnitt: die Linie darüber wird rot */
.r-doc h3:target{border-top-color:var(--rot)}
.r-doc p,.r-doc li{margin:0 0 14px;color:var(--ink-2);max-width:68ch}
.r-doc ul{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}
.r-doc li{position:relative;margin:0;padding-left:26px}
/* Aufzählung: das rote Quadrat wie der Punkt hinter „Werkzeuge.“ auf der Startseite */
.r-doc li::before{content:'';position:absolute;left:0;top:.5em;width:10px;height:10px;background:var(--rot)}
.r-doc strong{color:var(--ink)}
.r-doc a{font-weight:700;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat;padding-bottom:1px;overflow-wrap:anywhere;transition:background-size .22s var(--einrasten),color .18s}
.r-doc a:hover{color:var(--rot-schrift);background-image:linear-gradient(var(--rot),var(--rot));background-size:100% 4px}
.r-doc .r-stand{max-width:none;margin:clamp(40px,6svh,60px) 0 0;padding-top:12px;border-top:1px solid var(--ink);font:500 13px/1.35 var(--mono);letter-spacing:.04em;color:var(--ink)}

/* ---------- Responsiv ---------- */
@media(max-width:1023.98px){
  .r-hero .lead{grid-column:1/span 8}
  .r-impressum h2{grid-column:1/-1}
  .r-karte{grid-column:1/span 7}
  .r-text{grid-column:1/span 10}
  .r-index{grid-column:1/-1;position:static}
  .r-doc{grid-column:1/-1;margin-top:clamp(36px,6svh,56px)}
}
@media(max-width:760px){
  .r-linien{grid-template-columns:repeat(4,minmax(0,1fr))}
  .r-linien span:nth-child(n+5){display:none}
  .r-hero .kicker,.r-hero .lead,.r-karte,.r-text{grid-column:1/-1}
}
@media(max-width:380px){
  .r-back{padding-inline:10px 12px;font-size:14px}
}

/* ---------- Druck: ohne Haarlinien, große Abstände und Sprungliste (auf Papier ohne Nutzen); der rote Kreis und die
   roten Aufzählungsquadrate werden mitgedruckt, sonst stünde das weiße „&“ auf Weiß ---------- */
@media print{
  .r-linien,.r-back,.r-index nav{display:none}
  .r-top{border-bottom-width:1.5px}
  .r-hero,.r-sec{padding:18px 0}
  .r-hero h1{font-size:64px}
  .r-und,.r-doc li::before{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .r-balken{height:0;border-top:6px solid var(--ink)}
  .r-impressum{background:none}
  .r-index{position:static}
  .r-doc{margin-top:18px}
  .r-doc h3{break-after:avoid}
}