/* Gemeinsames Stylesheet der beiden Rechtsseiten (Impressum, Datenschutz).
   Die Startseite bleibt bewusst Single-File; für zwei Textseiten wäre doppeltes
   CSS im Kopf reiner Wartungsballast. Nichts hier wird von fremden Servern geladen. */

@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('assets/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:100 900;font-display:swap;
  src:url('assets/fonts/montserrat-latin-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --green:#2F9E4F; --leaf:#7BC142; --green-dark:#2C4A52; --green-mid:#1F7A3C; --tool:#3D7A80;
  --sun:#F9C81F; --sun-soft:#FEF6DE;
  --sage:#EDF5EF; --paper:#F8F8F3; --card:#FFFFFF;
  --ink:#1B2E33; --muted:#4A5F63; --border:#DCE7DE;
  --shadow-sm:0 1px 2px rgba(20,40,45,.06), 0 4px 14px rgba(20,40,45,.05);
  --r:18px; --r-lg:26px; --r-pill:999px;
  --sans:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans); background:var(--paper); color:var(--ink);
  font-size:16.5px; line-height:1.68; letter-spacing:-.003em; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
a{color:inherit}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.ic{width:1em; height:1em; flex:none; stroke:currentColor; stroke-width:2; fill:none;
  stroke-linecap:round; stroke-linejoin:round; vertical-align:-.12em}
.ink{fill:none; stroke:var(--green); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.ink-2{stroke-width:2.4}
.ink-thin{stroke-width:1.15}
.ink-leaf{stroke:var(--leaf)}
.ink-tool{stroke:var(--tool)}

.skip{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  background:var(--green-dark); color:#fff; padding:.8em 1.2em; font-weight:600; text-decoration:none}
.skip:focus{position:static; display:inline-block; width:auto; height:auto; clip-path:none;
  border-radius:0 0 var(--r) 0}

.topline{height:4px; background:linear-gradient(90deg,var(--green) 0 76%, var(--sun) 76% 100%)}

/* Kopf: schmaler als auf der Startseite, weil hier nichts verkauft wird —
   nur die Marke und der Weg zurück. */
.site-header{position:sticky; top:0; z-index:50; background:rgba(248,248,243,.92);
  backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--border)}
.header-inner{max-width:var(--maxw); margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.brand{display:inline-flex; align-items:center; gap:12px; text-decoration:none}
.brand svg{width:38px; height:38px; flex:none}
.brand-name{display:block; font-size:1.24rem; font-weight:700; color:var(--green-dark);
  letter-spacing:-.01em; white-space:nowrap}
.brand-name b{color:var(--green); font-weight:700}
.back{display:inline-flex; align-items:center; gap:.5em; font-size:.94rem; font-weight:600;
  color:var(--green-dark); text-decoration:none; padding:.5em .9em; border-radius:var(--r-pill);
  border:1.5px solid var(--border); background:#fff; transition:border-color .2s, background .2s}
.back:hover{border-color:var(--green); background:var(--sage)}
.brand:focus-visible,.back:focus-visible,.prose a:focus-visible,.footer a:focus-visible,
.crumbs a:focus-visible,.skip:focus-visible{outline:2px solid var(--green); outline-offset:3px; border-radius:6px}

/* Kopfband: eine gezeichnete Horizontlinie statt eines Bildes — dasselbe
   Tinten-Motiv wie im Hero der Startseite, auf Randhöhe eingedampft. */
.page-hero{background:var(--sage); border-bottom:1px solid var(--border); position:relative; overflow:hidden;
  padding-top:clamp(44px,6vw,72px); padding-bottom:clamp(64px,8vw,104px)}
.page-hero .wrap{position:relative; z-index:1}
.crumbs{font-size:.84rem; color:var(--muted); margin-bottom:14px}
.crumbs a{color:var(--green-mid); font-weight:600; text-decoration:none; border-bottom:1px solid #A9D3B8}
.crumbs a:hover{color:var(--green-dark); border-color:var(--green)}
.page-hero h1{font-size:clamp(1.9rem,4.6vw,3.1rem); font-weight:700; letter-spacing:-.022em;
  line-height:1.12; color:var(--green-dark); margin:0}
.page-hero .sub{font-size:1.1rem; color:#33474C; margin-top:16px; max-width:52ch}
.hero-line{position:absolute; left:0; right:0; bottom:0; width:100%; height:clamp(56px,7vw,92px);
  opacity:.6; pointer-events:none}

/* Lesespalte: 68 Zeichen. Rechtstext wird gelesen, nicht überflogen — deshalb
   eine Spalte statt des 12-Spalten-Rasters der Startseite. */
.sec{padding:clamp(48px,7vw,80px) 0 clamp(64px,8vw,96px)}
.prose{max-width:68ch}
.prose h2{font-size:1.18rem; font-weight:700; letter-spacing:-.015em; color:var(--green-dark);
  margin:40px 0 10px; padding-top:22px; border-top:1px solid var(--border); line-height:1.3}
.prose > h2:first-child{margin-top:0; padding-top:0; border-top:0}
.prose p{margin-bottom:14px; color:#33474C}
/* Bewusst kein Flex auf dem <li>: sonst wird jedes Inline-Element darin zu einem
   eigenen Flex-Item und bekommt den gap davor — vor einem Komma sieht das kaputt aus. */
.prose ul{list-style:none; margin:4px 0 18px; display:flex; flex-direction:column; gap:8px}
.prose ul li{position:relative; padding-left:1.35em; color:#33474C}
.prose ul li::before{content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--green)}
.prose a{color:var(--green-mid); font-weight:600; text-decoration:none; border-bottom:1px solid #A9D3B8;
  word-break:break-word}
.prose a:hover{color:var(--green-dark); border-color:var(--green)}
.prose strong{color:var(--green-dark); font-weight:600}

/* Kurzfassung ganz oben: die eine Abweichung vom üblichen Rechtstext-Block.
   Wer nur wissen will, woran er ist, ist nach diesem Kasten fertig. */
.gist{background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); padding:28px 30px; margin-bottom:44px; position:relative}
.gist::after{content:""; position:absolute; left:30px; right:30px; top:0; height:3px;
  background:var(--sun); border-radius:0 0 3px 3px}
.gist h2{margin:0 0 14px; padding:0; border:0; font-size:1.05rem;
  display:flex; align-items:center; gap:.6em}
.gist h2 .ic{color:var(--green); width:1.15em; height:1.15em; stroke-width:2.4}
.gist ul{margin:0}
.gist ul li{font-size:.96rem}
.gist p{margin:0; font-size:.96rem}
.gist p + ul{margin-top:12px}

/* Behördenanschrift: abgesetzt, weil man sie abschreibt und nicht liest. */
.datacard{background:var(--sun-soft); border:1px solid #E8D296; border-radius:var(--r);
  padding:20px 24px; margin:6px 0 18px}
.datacard p{margin:0; color:#4A3B0E}
.datacard a{color:#6B5411; border-bottom-color:#C9AE63}
.datacard a:hover{color:#3A2E08; border-bottom-color:#6B5411}

.stand{margin-top:44px; padding-top:20px; border-top:1px solid var(--border);
  font-size:.86rem; color:var(--muted)}

/* Fuß: gekürzte Fassung der Startseite — Anschrift, Kontakt, Rechtliches. */
.footer{background:#14282D; color:#A6BEC2; padding:56px 0 0}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; padding-bottom:40px}
.footer .brand-name{color:#fff}
.footer .brand-name b{color:var(--leaf)}
.footer-about{margin-top:16px; font-size:.92rem; line-height:1.7; color:#A6BEC2; max-width:300px}
.footer .fh{font-size:.78rem; text-transform:uppercase; letter-spacing:.13em;
  color:#CFE4E7; margin-bottom:16px; font-weight:600}
.footer ul{list-style:none; display:flex; flex-direction:column; gap:11px}
.footer ul a, .footer ul li{color:#A6BEC2; text-decoration:none; font-size:.93rem; transition:color .2s}
.footer ul a:hover{color:#fff}
.footer .fx{display:inline-flex; align-items:center; gap:.55em}
.footer .fx .ic{color:var(--leaf); width:1em; height:1em}
.footer-note{color:#A6BEC2; font-size:.85rem; margin-top:4px}
.footer-bar{border-top:1px solid rgba(255,255,255,.08); padding:22px 0;
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  font-size:.84rem; color:#A6BEC2}
.credit a{color:var(--leaf); text-decoration:none; font-weight:600}
.credit a:hover{text-decoration:underline}

@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){
  body{font-size:16px}
  .footer-grid{grid-template-columns:1fr; gap:28px}
  .header-inner{padding:12px 16px}
  .brand-name{font-size:1.12rem}
  .gist{padding:24px 22px}
  .gist::after{left:22px; right:22px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}