/* ==========================================================
   Kenia Hilfe Baden e.V. – Rechtstexte (Impressum / Datenschutz)
   Eigenes Stylesheet, lädt NACH style.css und überschreibt die
   Basis-Darstellung der Rechtsseiten. Nutzt die Marken-Palette
   aus style.css (:root) – warmes Papier, Tinte, Grün/Rot, Sand.
   Eigene, gekapselte .lg-* Klassen, damit nichts Globales
   beeinflusst wird.
   ========================================================== */

/* Pflicht-Helfer laut Vorgabe: Vorstand mehrzeilig rendern */
.pre-line{white-space:pre-line;}

/* ---------- Kopfbereich der Seite (eigener Header) ---------- */
.lg-header{
  position:sticky;top:0;z-index:50;
  background:rgba(250,247,240,.95);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.lg-header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:13px 0;
}
.lg-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);}
.lg-brand-mark{
  width:38px;height:38px;border-radius:8px;
  background:var(--ink);color:#fff;
  display:grid;place-items:center;
  font-family:"Courier New",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:700;font-size:14px;letter-spacing:.04em;
  border-bottom:3px solid var(--red);
}
.lg-brand-name{
  font-family:"Courier New",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:700;letter-spacing:.04em;
  font-size:14.5px;line-height:1.25;
}
.lg-brand-name span{color:var(--red);}
.lg-back{
  text-decoration:none;color:var(--ink);font-size:14.5px;
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border:1px solid var(--line);border-radius:7px;
  background:var(--paper);transition:border-color .15s,color .15s;
}
.lg-back:hover{color:var(--red);border-color:var(--red);}
.lg-back:focus-visible{outline:3px solid var(--green);outline-offset:2px;}

/* ---------- Lesefläche ---------- */
.lg-main{
  max-width:820px;
  margin:0 auto;
  padding:34px 24px 48px;
}
@media (max-width:560px){
  .lg-main{padding:24px 18px 36px;}
}

/* ---------- Titelbereich ---------- */
.lg-eyebrow{
  display:inline-block;
  font-family:"Courier New",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  font-size:13px;color:var(--ink);
  background:linear-gradient(transparent 60%, rgba(30,107,66,.22) 60%, rgba(30,107,66,.22) 90%, transparent 90%);
  padding:0 4px;margin-bottom:8px;
}
.lg-title{
  font-size:clamp(30px,4.6vw,44px);
  line-height:1.12;
  letter-spacing:-.01em;
  margin-bottom:6px;
  max-width:20ch;
}
.lg-meta{
  font-family:"Courier New",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:700;letter-spacing:.04em;
  font-size:13px;color:#6e6a5d;
  margin-bottom:10px;
}
.lg-rule{
  border:0;height:1px;background:var(--line);
  margin:0 0 20px;
}

/* ---------- Abschnitte ---------- */
/* style.css setzt global section{padding:80px 0} – hier zurücksetzen,
   sonst entstehen riesige (mehrere cm) Leerräume zwischen den Abschnitten. */
.lg-section{margin:0 0 18px;padding:0;}
.lg-section:last-of-type{margin-bottom:0;}
.lg-section h2{
  font-size:clamp(19px,2.4vw,23px);
  line-height:1.25;
  margin:0 0 6px;
  /* Anker mit Sticky-Header berücksichtigen */
  scroll-margin-top:78px;
}
.lg-section h2 .lg-num{
  color:var(--green);
  font-variant-numeric:tabular-nums;
  margin-right:.45em;
}
.lg-section p{
  font-size:16px;line-height:1.65;
  margin:0 0 8px;color:var(--ink);
}
.lg-section p:last-child{margin-bottom:0;}
.lg-section a{color:var(--green);text-decoration:underline;text-underline-offset:2px;}
.lg-section a:hover{color:var(--red);}

/* Aufzählungen */
.lg-list{
  list-style:none;
  margin:2px 0 8px;
  padding:0;
}
.lg-list li{
  position:relative;
  padding-left:22px;
  margin-bottom:4px;
  font-size:16px;line-height:1.55;
}
.lg-list li::before{
  content:"";
  position:absolute;left:2px;top:.62em;
  width:7px;height:7px;border-radius:2px;
  background:var(--green);
  transform:rotate(45deg);
}

/* ---------- Info-Karte / Definitionsliste (Impressum) ---------- */
.lg-card{
  background:#fff;
  border:1px solid var(--line);
  border-left:4px solid var(--green);
  border-radius:var(--radius);
  padding:18px 22px;
  margin:0 0 18px;
  box-shadow:0 6px 22px rgba(24,32,27,.05);
}
@media (max-width:560px){
  .lg-card{padding:16px 16px;}
}
.lg-card h2{
  font-size:18px;
  margin:0 0 12px;
  padding-bottom:9px;
  border-bottom:1px solid var(--line);
}
.lg-dl{
  display:grid;
  grid-template-columns:max-content 1fr;
  gap:9px 24px;
  margin:0;
}
@media (max-width:560px){
  .lg-dl{grid-template-columns:1fr;gap:2px 0;}
  .lg-dl dd{margin-bottom:10px;}
  .lg-dl dd:last-child{margin-bottom:0;}
}
.lg-dl dt{
  font-family:"Courier New",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:700;letter-spacing:.03em;
  font-size:12.5px;text-transform:uppercase;
  color:#6e6a5d;
  padding-top:2px;
}
.lg-dl dd{
  margin:0;
  font-size:16px;line-height:1.6;
  color:var(--ink);
}
.lg-dl dd a{color:var(--green);text-decoration:underline;text-underline-offset:2px;}
.lg-dl dd a:hover{color:var(--red);}

/* ---------- Callout (Verantwortlicher / Kontakt) ---------- */
.lg-callout{
  background:#fff;
  border:1px solid var(--line);
  border-left:4px solid var(--red);
  border-radius:var(--radius);
  padding:15px 18px;
  margin:0 0 12px;
}
.lg-callout p{margin-bottom:0;}
.lg-callout a{color:var(--green);}

/* ---------- Inhaltsverzeichnis (Datenschutz) ---------- */
.lg-toc{
  background:var(--sand);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:15px 20px;
  margin:0 0 22px;
}
.lg-toc h2{
  font-family:"Courier New",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  font-size:13px;color:#6e6a5d;
  margin:0 0 9px;
}
.lg-toc ol{
  list-style:none;
  margin:0;padding:0;
  columns:2;
  column-gap:32px;
}
@media (max-width:560px){
  .lg-toc ol{columns:1;}
}
.lg-toc li{
  break-inside:avoid;
  margin-bottom:4px;
  font-size:14.5px;line-height:1.5;
}
.lg-toc a{
  color:var(--ink);
  text-decoration:none;
  display:inline-flex;gap:.5em;
}
.lg-toc a .lg-num{
  color:var(--green);
  font-family:"Courier New",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:700;font-variant-numeric:tabular-nums;
}
.lg-toc a:hover{color:var(--red);text-decoration:underline;text-underline-offset:2px;}
.lg-toc a:hover .lg-num{color:var(--red);}

/* ---------- Fokus / Zugänglichkeit ---------- */
.lg-main a:focus-visible,
.lg-toc a:focus-visible{
  outline:3px solid var(--green);
  outline-offset:2px;
  border-radius:3px;
}

/* ---------- Druck ---------- */
@media print{
  .lg-header{position:static;border:0;background:none;}
  .lg-back{display:none;}
  .lg-main{max-width:none;padding:0;}
  .lg-eyebrow{background:none;padding:0;}
  .lg-card,.lg-callout,.lg-toc{
    box-shadow:none;border:1px solid #ccc;background:#fff;
  }
  .lg-toc{display:none;}
  .lg-section{margin-bottom:18px;}
  .lg-section h2{scroll-margin-top:0;}
  a{color:#000;text-decoration:underline;}
  .site-footer{background:none;color:#000;border-top:1px solid #ccc;}
  .site-footer a{color:#000;}
}