/* ============================================================
   WIR FÜR UELZEN — gemeinsames Aussehen der Unterseiten
   Impressum · Datenschutz · Aus unserer Arbeit · Kontakt · Satzung

   Übernimmt Farben, Schrift und Bausteine der Startseite (index.html).
   Kommt ohne fremde Server aus: keine externen Schriften, keine
   Tracker, keine Cookies, keine Karten.
   ============================================================ */

:root{
  --blau:#1A4DFF;
  --blau-dunkel:#0B2CA8;
  --nacht:#081744;
  --nacht-2:#0E2159;
  --gelb:#EABF00;
  --tinte:#12151C;
  --grau:#5A6373;
  --grau-hell:#8B94A3;
  --linie:#E3E7EF;
  --nebel:#F5F7FC;
  --weiss:#fff;
  --radius:14px;
  --schatten:0 1px 2px rgba(8,23,68,.06), 0 8px 24px rgba(8,23,68,.07);
  --schatten-gross:0 24px 60px rgba(8,23,68,.14);
  --breite:1180px;
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Segoe UI",-apple-system,system-ui,Roboto,Arial,sans-serif;
  color:var(--tinte); background:var(--weiss);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

.huelle{ width:100%; max-width:var(--breite); margin:0 auto; padding:0 24px }

/* ============ KOPFZEILE ============ */
header{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--linie);
}
.kopf{ display:flex; align-items:center; justify-content:space-between; height:76px; gap:24px }
.kopf .logo img{ height:34px }
nav.haupt{ display:flex; align-items:center; gap:2px; margin-left:auto }
nav.haupt a{
  padding:9px 13px; border-radius:9px; font-size:15px; font-weight:500; color:#39414F;
  transition:background .15s, color .15s;
}
nav.haupt a:hover{ background:var(--nebel); color:var(--blau) }
nav.haupt a.hier{ color:var(--blau); background:var(--nebel) }

.knopf{
  display:inline-flex; align-items:center; gap:9px; padding:12px 22px; border-radius:10px;
  font-weight:650; font-size:15px; border:2px solid transparent; cursor:pointer;
  transition:transform .12s, box-shadow .15s, background .15s;
}
.knopf:hover{ transform:translateY(-1px) }
.knopf-voll{ background:var(--blau); color:#fff; box-shadow:0 6px 18px rgba(26,77,255,.28) }
.knopf-voll:hover{ background:var(--blau-dunkel) }
.knopf-rand{ border-color:var(--linie); color:var(--tinte); background:#fff }
.knopf-rand:hover{ border-color:var(--blau); color:var(--blau) }
.knopf-gelb{ background:var(--gelb); color:#12151C }

.burger{ display:none; background:none; border:0; padding:8px; cursor:pointer }
.burger span{ display:block; width:24px; height:2px; background:var(--tinte); margin:5px 0; border-radius:2px }

/* Klappmenü fürs Handy — auf der Startseite genauso */
.menue-handy{ display:none; border-top:1px solid var(--linie); background:#fff }
.menue-handy.auf{ display:block }
.menue-handy a{
  display:block; padding:14px 24px; font-size:16px; font-weight:600; color:#39414F;
  border-bottom:1px solid var(--linie);
}
.menue-handy a:last-child{ border-bottom:0 }
.menue-handy a:hover{ background:var(--nebel); color:var(--blau) }

/* ============ SEITENKOPF ============ */
.seitenkopf{ background:var(--nacht); color:#fff; position:relative; overflow:hidden }
.seitenkopf .auge{ position:absolute; right:-90px; top:-60px; width:460px; opacity:.06; pointer-events:none }
.seitenkopf .huelle{ padding:66px 24px 72px; position:relative }
.seitenkopf .kicker{
  display:inline-block; font-size:12.5px; font-weight:750; letter-spacing:2px;
  text-transform:uppercase; color:var(--gelb); margin-bottom:16px;
}
.seitenkopf h1{
  font-size:clamp(32px,4.4vw,52px); line-height:1.08; letter-spacing:-1.6px; font-weight:750;
  max-width:760px;
}
.seitenkopf p{ margin-top:20px; font-size:18px; color:#B9C8F0; line-height:1.6; max-width:620px }

/* Brotkrume */
.krume{ font-size:13.5px; color:#8FA6E0; margin-bottom:18px }
.krume a:hover{ color:#fff }
.krume span{ opacity:.55; margin:0 7px }

/* ============ INHALT ============ */
section{ padding:72px 0 }
section.eng .huelle{ max-width:840px }
.abschnitt-kopf{ max-width:680px; margin-bottom:40px }
.abschnitt-kopf .kicker{
  display:inline-block; font-size:12.5px; font-weight:750; letter-spacing:2px;
  text-transform:uppercase; color:var(--blau); margin-bottom:16px;
}
.abschnitt-kopf h2{ font-size:clamp(26px,3.2vw,36px); line-height:1.14; letter-spacing:-1px; font-weight:730 }
.abschnitt-kopf p{ margin-top:16px; font-size:17px; color:var(--grau); line-height:1.6 }

/* Fließtext für Rechtstexte */
.text h2{
  font-size:22px; font-weight:730; letter-spacing:-.5px; line-height:1.25;
  margin:44px 0 14px; padding-top:22px; border-top:1px solid var(--linie);
}
.text h2:first-child{ margin-top:0; padding-top:0; border-top:0 }
.text h3{ font-size:17.5px; font-weight:700; letter-spacing:-.3px; margin:26px 0 8px }
.text p{ font-size:16.5px; color:#2C3340; line-height:1.68; margin-bottom:14px }
.text ul, .text ol{ margin:0 0 18px 22px }
.text li{ font-size:16.5px; color:#2C3340; line-height:1.62; margin-bottom:8px }
.text a{ color:var(--blau); font-weight:600; overflow-wrap:anywhere }
.text a:hover{ text-decoration:underline }
.text strong{ font-weight:700; color:var(--tinte) }
.text .klein{ font-size:14.5px; color:var(--grau-hell) }

/* Angabenblock (Anschrift, Vorstand …) */
.block{
  background:var(--nebel); border:1px solid var(--linie); border-left:5px solid var(--blau);
  border-radius:var(--radius); padding:26px 28px; margin:0 0 22px;
}
.block h3{ font-size:16px; font-weight:750; letter-spacing:-.2px; margin-bottom:12px }
.block p, .block li{ font-size:16.5px; line-height:1.6; color:#2C3340 }
.block ul{ list-style:none; margin:0 }
.block li + li{ margin-top:6px }
.block a{ color:var(--blau); font-weight:600 }

/* sichtbarer Platzhalter für noch fehlende Angaben */
.platzhalter{
  display:inline-block; background:#FFF4CC; color:#7A6100;
  border:1px dashed #D9B400; border-radius:6px;
  padding:1px 8px; font-size:14.5px; font-weight:700;
}

/* Hinweiskasten */
.hinweiskasten{
  background:#E9EFFF; border:1px solid #C9D8FF; border-radius:var(--radius);
  padding:20px 24px; margin:22px 0; font-size:16px; color:#20304F; line-height:1.6;
}

/* ============ DATEIEN (Satzung, Formulare) ============ */
.dateien{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px }
.datei{
  display:flex; gap:18px; align-items:flex-start; padding:24px 26px;
  border:1px solid var(--linie); border-radius:var(--radius); background:#fff;
  transition:border-color .16s, box-shadow .16s, transform .16s;
}
.datei:hover{ border-color:#CBD6F5; box-shadow:var(--schatten); transform:translateY(-2px) }
.datei .zeichen{
  flex:0 0 44px; height:44px; border-radius:11px; background:#E9EFFF; color:var(--blau);
  display:flex; align-items:center; justify-content:center;
}
.datei .zeichen svg{ width:22px; height:22px }
.datei h3{ font-size:17.5px; font-weight:700; letter-spacing:-.3px }
.datei p{ font-size:15px; color:var(--grau); margin-top:6px; line-height:1.55 }
.datei .link{ font-size:14.8px; font-weight:650; color:var(--blau); margin-top:9px; display:inline-block }

/* ============ ARCHIV ============ */
.archiv{ background:var(--nebel) }
.filterzeile{ margin-bottom:18px }
.filterzeile > .titel{
  font-size:12px; font-weight:750; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--grau-hell); margin-bottom:10px;
}
.filter{ display:flex; flex-wrap:wrap; gap:9px }
.filter button{
  font:inherit; font-size:14px; font-weight:600; padding:9px 17px; border-radius:100px;
  border:1px solid var(--linie); background:#fff; color:var(--grau); cursor:pointer;
  transition:all .15s;
}
.filter button:hover{ border-color:var(--blau); color:var(--blau) }
.filter button.an{ background:var(--nacht); border-color:var(--nacht); color:#fff }

.trefferzeile{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  margin:26px 0 22px; font-size:15px; color:var(--grau);
}
.trefferzeile b{ color:var(--tinte); font-weight:750 }
.zuruecksetzen{
  font:inherit; font-size:14px; font-weight:650; color:var(--blau);
  background:none; border:0; cursor:pointer; padding:0;
}
.zuruecksetzen:hover{ text-decoration:underline }

.beitraege{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px }
.beitrag{
  background:#fff; border:1px solid var(--linie); border-radius:var(--radius);
  padding:24px 22px 22px; display:flex; flex-direction:column; gap:12px;
  transition:transform .16s, box-shadow .16s, border-color .16s;
  overflow-wrap:anywhere;
}
.beitrag:hover{ transform:translateY(-3px); box-shadow:var(--schatten); border-color:#CBD6F5 }
.beitrag .oben{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.beitrag .art{
  font-size:11px; font-weight:750; letter-spacing:1.1px; text-transform:uppercase;
  padding:4px 9px; border-radius:5px;
}
.art-presse{ background:#FFF4CC; color:#8A6F00 }
.art-antrag{ background:#E9EFFF; color:var(--blau-dunkel) }
.art-brief{ background:#EAF6EE; color:#1E6B3A }
.art-sonst{ background:#EDEFF4; color:#4A5364 }
.beitrag .wann{ font-size:13px; color:var(--grau-hell); font-weight:600 }
.beitrag h3{ font-size:17px; font-weight:700; line-height:1.34; letter-spacing:-.3px }
.beitrag .mehr{
  margin-top:auto; padding-top:8px; font-size:14.5px; font-weight:650; color:var(--blau);
  display:inline-flex; align-items:center; gap:7px;
}
.beitrag .mehr svg{ width:15px; height:15px; transition:transform .15s }
.beitrag:hover .mehr svg{ transform:translateX(3px) }
.leer{
  display:none; padding:40px 0; text-align:center; font-size:17px; color:var(--grau);
}
.leer.an{ display:block }

/* ============ KONTAKTFORMULAR ============ */
.kontakt-raster{ display:grid; grid-template-columns:1.15fr .85fr; gap:52px; align-items:start }
.wege{ display:flex; flex-direction:column; gap:16px }
.weg{
  display:flex; gap:18px; align-items:flex-start; padding:24px 26px;
  border:1px solid var(--linie); border-radius:var(--radius); background:#fff;
  transition:border-color .16s, box-shadow .16s;
}
.weg:hover{ border-color:#CBD6F5; box-shadow:var(--schatten) }
.weg .zeichen{
  flex:0 0 44px; height:44px; border-radius:11px; background:#E9EFFF; color:var(--blau);
  display:flex; align-items:center; justify-content:center;
}
.weg .zeichen svg{ width:22px; height:22px }
.weg h3{ font-size:17.5px; font-weight:700; letter-spacing:-.3px }
.weg p{ font-size:15px; color:var(--grau); margin-top:6px; line-height:1.55 }
.weg .link{ font-size:14.8px; font-weight:650; color:var(--blau); margin-top:9px; display:inline-block }

.kontaktkarte{
  background:var(--nebel); border:1px solid var(--linie); border-radius:18px; padding:32px 30px 34px;
}
.kontaktkarte h3{ font-size:20px; font-weight:730; letter-spacing:-.5px; margin-bottom:8px }
.kontaktkarte .vorspann{ font-size:14.5px; color:var(--grau); margin-bottom:22px; line-height:1.55 }
.feld{ margin-bottom:16px }
.feld label{ display:block; font-size:13.5px; font-weight:650; margin-bottom:7px; color:#39414F }
.feld label .muss{ color:var(--blau) }
.feld input, .feld textarea{
  width:100%; font:inherit; font-size:15px; padding:12px 14px; border-radius:10px;
  border:1px solid var(--linie); background:#fff; color:var(--tinte);
}
.feld input:focus, .feld textarea:focus{ outline:2px solid var(--blau); outline-offset:-1px; border-color:transparent }
.feld textarea{ min-height:120px; resize:vertical }
.feld.fehlt input, .feld.fehlt textarea{ border-color:#D64545; background:#FFF7F7 }
.feld .feldfehler{ display:none; font-size:13px; color:#B01F1F; font-weight:600; margin-top:6px }
.feld.fehlt .feldfehler{ display:block }

/* Honigtopf — echte Menschen sehen dieses Feld nie */
.honigtopf{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}

.einwilligung{
  display:flex; gap:11px; align-items:flex-start; margin:6px 0 18px;
  font-size:13.8px; color:#39414F; line-height:1.5;
}
.einwilligung input{ margin-top:3px; width:17px; height:17px; flex:0 0 17px; accent-color:var(--blau) }
.einwilligung a{ color:var(--blau); font-weight:600 }
.einwilligung.fehlt{ color:#B01F1F }
.kontaktkarte .knopf{ width:100%; justify-content:center; margin-top:4px }
.kontaktkarte .hinweis{ font-size:12.8px; color:var(--grau-hell); margin-top:14px; line-height:1.5 }

.meldung{
  display:none; border-radius:12px; padding:18px 20px; margin-bottom:22px;
  font-size:15.5px; line-height:1.55;
}
.meldung.an{ display:block }
.meldung.gut{ background:#EAF6EE; border:1px solid #B9E0C6; color:#17552F }
.meldung.schlecht{ background:#FFF1F1; border:1px solid #F3C4C4; color:#8E1D1D }
.meldung b{ display:block; font-size:16.5px; font-weight:750; margin-bottom:4px }

/* ============ FUSSZEILE ============ */
footer{ background:var(--nacht); color:#fff; padding:64px 0 32px }
.fuss-raster{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.1fr; gap:44px; margin-bottom:48px }
.fuss-marke img{ height:32px; margin-bottom:20px }
.fuss-marke p{ font-size:15px; color:#A9BAE6; line-height:1.6; max-width:300px }
.sozial{ display:flex; gap:12px; margin-top:22px }
.sozial a{
  width:42px; height:42px; border-radius:11px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition:background .15s, transform .12s, border-color .15s;
}
.sozial a:hover{ background:var(--gelb); color:var(--nacht); border-color:var(--gelb); transform:translateY(-2px) }
.sozial svg{ width:20px; height:20px }
.sozial .offen{ opacity:.45 }
.fuss-spalte h4{
  font-size:12px; font-weight:750; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--gelb); margin-bottom:18px;
}
.fuss-spalte ul{ list-style:none; display:flex; flex-direction:column; gap:11px }
.fuss-spalte a, .fuss-spalte li{ font-size:15px; color:#C3CFEC; line-height:1.5 }
.fuss-spalte a:hover{ color:#fff }
.fuss-unten{
  border-top:1px solid rgba(255,255,255,.12); padding-top:26px;
  display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:center;
}
.fuss-unten p{ font-size:13.5px; color:#8496C4 }
.fuss-unten .rechts{ display:flex; gap:22px; flex-wrap:wrap }
.fuss-unten .rechts a{ font-size:13.5px; color:#8496C4 }
.fuss-unten .rechts a:hover{ color:#fff }

/* ============ ENTWURFS-BANNER ============ */
.entwurf{
  background:var(--gelb); color:#12151C; text-align:center; padding:11px 20px;
  font-size:14px; font-weight:650;
}

/* ============ SCHMALE BILDSCHIRME ============ */
@media (max-width:1040px){
  .beitraege{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .fuss-raster{ grid-template-columns:1fr 1fr; gap:36px }
}
@media (max-width:860px){
  nav.haupt{ display:none }
  .burger{ display:block }
  .kontakt-raster{ grid-template-columns:1fr; gap:38px }
  .dateien{ grid-template-columns:1fr }
  section{ padding:56px 0 }
  .seitenkopf .huelle{ padding:48px 24px 54px }
}
@media (max-width:620px){
  .beitraege{ grid-template-columns:1fr }
  .fuss-raster{ grid-template-columns:1fr }
  .kopf .knopf{ display:none }
  .huelle{ padding:0 18px }
  .block{ padding:22px 20px }
  .kontaktkarte{ padding:26px 22px 28px }
}

/* ============ AUSDRUCK ============
   Muss am Ende stehen, sonst gewinnen die Regeln für schmale Bildschirme. */
@media print{
  @page{ size:A4; margin:14mm }
  html{ -webkit-print-color-adjust:exact; print-color-adjust:exact }
  body{ font-size:12px }
  header, .entwurf, .burger, .menue-handy, .filterzeile, .zuruecksetzen, .sozial{ display:none }
  .seitenkopf{ background:#fff; color:var(--tinte) }
  .seitenkopf .auge{ display:none }
  .seitenkopf .huelle{ padding:0 0 18px }
  .seitenkopf p, .krume{ color:var(--grau) }
  .seitenkopf .kicker{ color:var(--blau) }
  .huelle{ max-width:none; padding:0 }
  section{ padding:14px 0 }
  .beitraege{ grid-template-columns:repeat(2,1fr) }
  .beitrag, .block, .datei, .weg, .kontaktkarte{
    box-shadow:none !important; break-inside:avoid; page-break-inside:avoid;
  }
  footer{ background:#fff; color:var(--tinte); padding:18px 0 0; border-top:1px solid var(--linie) }
  .fuss-spalte a, .fuss-spalte li, .fuss-marke p, .fuss-unten p, .fuss-unten .rechts a{ color:var(--grau) }
  .fuss-spalte h4{ color:var(--tinte) }
}