/* Demo für Frieden und Freiheit Fulda – Weiß und Blau, sparsam Sonnengelb.
   Nur Systemschriften, keine externen Dateien. Hell/Dunkel nach Systemeinstellung. */
:root{
  --serif:Georgia,"Palatino Linotype",Palatino,"Book Antiqua",serif;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  /* Grundpalette */
  --himmelblau:#8cc3ec; --taubenblau:#5a7a98; --tiefblau:#1d3f6e; --nachtblau:#142c4f;
  --sonne:#f3c44f;
  /* Rollen (hell) */
  --bg:#f5f9fd; --flaeche:#fff; --himmel-hell:#e7f2fc; --text:#1b2636; --leise:#44546a;
  --ueber:#1d3f6e; --link:#1c4f8f; --rand:#d3e2f0; --sonne-hell:#fff4d2;
  --schatten:0 1px 2px rgba(20,44,79,.06),0 6px 22px rgba(20,44,79,.08);
  --hero-a:#173d6b; --hero-b:#2a619e; --hero-c:#336fae;
  --fuss-a:#1d3f6e; --fuss-b:#142c4f;
  --kopf-schleier:linear-gradient(180deg,rgba(15,42,82,.74) 0%,rgba(36,88,148,.46) 48%,rgba(17,50,94,.80) 100%);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0d1828; --flaeche:#142338; --himmel-hell:#172b44; --text:#e8eef6; --leise:#b4c3d5;
  --ueber:#bcdcf7; --link:#9fcdf4; --rand:#263f5e; --sonne-hell:rgba(243,196,79,.13);
  --schatten:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.28);
  --hero-a:#132a48; --hero-b:#1d426f; --hero-c:#22507f;
  --fuss-a:#0f2038; --fuss-b:#08111e;
  --kopf-schleier:linear-gradient(180deg,rgba(8,22,44,.80) 0%,rgba(22,58,104,.55) 48%,rgba(10,26,48,.86) 100%);
}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font:400 clamp(1.125rem,1.05rem + .3vw,1.25rem)/1.65 var(--sans);overflow-x:hidden}
img{max-width:100%}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--sonne);outline-offset:3px;border-radius:4px}
strong{font-weight:700}
h2,h3{font-family:var(--serif);color:var(--ueber);font-weight:700;line-height:1.25}
h2{font-size:clamp(1.55rem,1.3rem + 1vw,2rem);margin:2.6rem 0 1rem}
h3{font-size:clamp(1.25rem,1.15rem + .5vw,1.45rem);margin:2.2rem 0 .6rem}
p{margin:0 0 1rem}

/* ---------- Kopf ---------- */
.kopfbereich{position:relative;isolation:isolate;color:#fff;background-size:cover;background-position:45% 45%;
  min-height:min(34vh,340px);display:flex;flex-direction:column}
.s-index .kopfbereich{min-height:min(52vh,560px)}
.kopfbereich::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--kopf-schleier)}
.leiste{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1.5rem;
  max-width:1100px;width:100%;margin:0 auto;padding:1rem 1.2rem}
.marke{display:flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;font:600 1.05rem/1.2 var(--sans);letter-spacing:.01em}
.marke b{font-weight:700;color:var(--sonne)}
.marke .taube{width:2.6rem;height:2.6rem;flex:none}
.taube .sonne{fill:var(--sonne)}
.taube .vogel{fill:#fff}
.taube .zweig{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
nav{display:flex;flex-wrap:wrap;gap:.4rem}
nav a{color:#fff;text-decoration:none;font:500 1.05rem/1.2 var(--sans);padding:.55rem .95rem;border-radius:999px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);transition:background .2s}
nav a:hover{background:rgba(255,255,255,.22)}
nav a.aktiv{background:#fff;color:var(--tiefblau);border-color:#fff;font-weight:600}
.kopf{position:relative;padding:2rem 1.2rem 4.5rem;max-width:1100px;width:100%;margin:auto auto 0}
.kopf h1{font:400 clamp(2rem,1.4rem + 3.6vw,3.7rem)/1.12 var(--serif);margin:0 0 .7rem;max-width:18ch;
  text-shadow:0 2px 16px rgba(5,20,45,.45);text-wrap:balance}
.kopf h1::after{content:"";display:block;width:4.5rem;height:4px;border-radius:2px;background:var(--sonne);margin-top:.9rem}
.kopf p{font:italic 400 clamp(1.15rem,1rem + 1vw,1.6rem)/1.4 var(--serif);margin:0;max-width:36ch;
  text-shadow:0 1px 10px rgba(5,20,45,.55)}
.welle{display:block;width:100%;height:clamp(36px,6vw,80px)}
.kopfbereich .welle{position:absolute;left:0;right:0;bottom:-1px}
.welle .w1{fill:var(--bg);opacity:.45}
.welle .w2{fill:var(--bg)}

/* ---------- Inhalt ---------- */
main{max-width:1000px;margin:0 auto;padding:1.5rem 1.2rem 3.5rem}
.gross{font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem);line-height:1.4;margin:.2rem 0}
.karte{background:var(--flaeche);border:1px solid var(--rand);border-radius:18px;padding:1.3rem 1.5rem;margin:1.5rem 0;
  box-shadow:var(--schatten)}
.karte p:last-child{margin-bottom:0}
.kontakt{display:flex;gap:1rem;align-items:flex-start;background:var(--himmel-hell);border-color:transparent;
  border-left:6px solid var(--himmelblau);box-shadow:none}
.kontakt.leise{background:var(--flaeche);border:1px solid var(--rand);border-left:6px solid var(--himmelblau)}
.kontakt a{overflow-wrap:anywhere;font-weight:600}
.ikon{width:1.6rem;height:1.6rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ikon.tg{width:2.6rem;height:2.6rem;padding:.55rem;border-radius:50%;background:var(--tiefblau);color:#fff;margin-top:.1rem}
@media (prefers-color-scheme:dark){.ikon.tg{background:#2a5c93}}

/* Termin-Hero */
.termin-hero{position:relative;margin:-3rem 0 2rem;padding:clamp(1.4rem,1rem + 2vw,2.4rem);border-radius:24px;color:#fff;
  background:radial-gradient(120% 140% at 100% 0%,rgba(140,195,236,.35),transparent 55%),
             linear-gradient(135deg,var(--hero-a),var(--hero-b) 60%,var(--hero-c));
  box-shadow:0 10px 34px rgba(20,44,79,.25);overflow:hidden}
.termin-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(243,196,79,.35),rgba(243,196,79,0) 70%);pointer-events:none}
.hero-titel{font:700 clamp(1.6rem,1.2rem + 1.8vw,2.3rem)/1.2 var(--serif);margin:0 0 1.2rem;position:relative;z-index:1}
.termin-felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1rem;position:relative;z-index:1}
.termin-feld{display:flex;gap:.9rem;align-items:flex-start;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  border-radius:16px;padding:1rem 1.1rem}
.termin-feld .ikon{width:2.8rem;height:2.8rem;padding:.6rem;border-radius:50%;background:var(--sonne);color:#1b2636;stroke-width:2}
.termin-feld .gross{margin:0}
.termin-feld strong{font-size:1.12em}
.hero-text{margin:1.3rem 0 0;position:relative;z-index:1;max-width:60ch}

/* Termine */
.termine{list-style:none;padding:0;margin:.5rem 0 1.5rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:1rem}
.termine li{background:var(--flaeche);border:1px solid var(--rand);border-radius:16px;overflow:hidden;box-shadow:var(--schatten);
  display:flex;flex-direction:column;text-align:center}
.termine li::before{content:"";height:8px;background:linear-gradient(90deg,var(--himmelblau),var(--sonne))}
.termine .datum{font:700 1.6rem/1.2 var(--serif);color:var(--ueber);padding:1rem 1rem .2rem;letter-spacing:.02em}
.termine .ort{color:var(--leise);padding:0 1rem 1rem}

.weiter{margin:2rem 0 0}
.knopf{display:inline-block;background:var(--tiefblau);color:#fff;text-decoration:none;font:600 1.1rem/1.2 var(--sans);
  padding:.95rem 1.6rem;border-radius:999px;box-shadow:0 4px 14px rgba(29,63,110,.25);transition:transform .15s,box-shadow .15s}
.knopf:hover{transform:translateY(-1px);box-shadow:0 0 0 4px rgba(243,196,79,.55),0 6px 18px rgba(29,63,110,.3)}
@media (prefers-color-scheme:dark){.knopf{background:#2f6aab}}

/* Positionspapier */
.text{max-width:46rem;margin:0 auto}
.leitsatz{font-size:clamp(1.6rem,1.3rem + 1.4vw,2.25rem);margin:.5rem 0 1.5rem;text-wrap:balance}
.text h3{display:flex;gap:.7rem;align-items:baseline}
.text h3::before{content:"";flex:none;width:.7rem;height:.7rem;border-radius:50%;background:var(--sonne);
  box-shadow:0 0 0 4px var(--sonne-hell);transform:translateY(-.1em)}
.zitat{margin:2.4rem 0;padding:1.4rem 1.6rem;background:var(--himmel-hell);border-left:6px solid var(--sonne);border-radius:0 18px 18px 0}
.zitat h3{margin-top:0;font-style:italic}
.zitat h3::before{display:none}
.zitat p:last-child{margin:0}
.einladung{margin:2.6rem 0 0;padding:1.5rem 1.6rem;border-radius:20px;border:1px solid var(--rand);
  background:linear-gradient(160deg,var(--flaeche),var(--himmel-hell));box-shadow:var(--schatten)}
.einladung h3{margin-top:0}
.gruss{font:700 clamp(1.3rem,1.15rem + .6vw,1.6rem)/1.3 var(--serif);color:var(--ueber);margin:1.2rem 0 0}

/* Impressum */
.impressum{max-width:32rem;font-size:1.15em;line-height:1.7}

/* Galerie */
.abschnitt{margin:2.8rem 0 0}
.abschnitt-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-bottom:1rem;
  padding-bottom:.8rem;border-bottom:2px solid var(--rand)}
.abschnitt-kopf h2{margin:0}
.badge{display:inline-flex;align-items:center;gap:.55rem;background:var(--tiefblau);color:#fff;
  font:700 clamp(1.2rem,1.1rem + .5vw,1.45rem)/1.2 var(--serif);padding:.5rem 1.1rem .5rem .8rem;border-radius:999px}
@media (prefers-color-scheme:dark){.badge{background:#24507f}}
.badge .ikon{width:1.35rem;height:1.35rem;color:var(--sonne);stroke-width:2.2}
.anzahl{color:var(--leise);font-size:.95rem}
.abschnitt-text{font-style:italic;font-family:var(--serif);font-size:1.1em}
.videos{display:grid;gap:1rem;margin:1rem 0}
.videos:not(.mehrere){max-width:760px}
.videos.mehrere{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem;margin:1rem 0}
.raster a{display:block;border-radius:12px;overflow:hidden;background:var(--himmel-hell);box-shadow:var(--schatten)}
.raster img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .35s ease}
.raster a:hover img{transform:scale(1.05)}
.video{aspect-ratio:16/9;background:#0b1626;border-radius:16px;overflow:hidden;box-shadow:var(--schatten)}
.video button{all:unset;cursor:pointer;display:block;width:100%;height:100%;position:relative;color:#fff}
.video button:focus-visible{outline:3px solid var(--sonne);outline-offset:-3px}
.video img,.video iframe{width:100%;height:100%;object-fit:cover;border:0;display:block}
.video span{position:absolute;left:50%;top:50%;width:4.5rem;height:4.5rem;margin:-2.25rem 0 0 -2.25rem;display:grid;place-items:center;
  font-size:1.8rem;padding-left:.25rem;border-radius:50%;background:rgba(29,63,110,.85);border:3px solid #fff;box-shadow:0 4px 18px rgba(0,0,0,.4);
  transition:background .2s}
.video button:hover span{background:var(--sonne);color:#1b2636}
.video small{position:absolute;left:0;right:0;bottom:0;padding:.5rem .9rem;background:linear-gradient(transparent,rgba(8,22,44,.85));
  font:500 .9rem/1.3 var(--sans)}

/* ---------- Fuß ---------- */
footer{margin-top:2rem;color:#fff;background:linear-gradient(180deg,var(--fuss-a),var(--fuss-b))}
footer .welle{transform:rotate(180deg);margin-top:-1px}
.fuss{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:1rem 1.2rem 2.2rem;text-align:center}
.fuss .taube{width:3rem;height:3rem}
.fuss p{margin:0;font-size:1.05rem}
.fuss a{color:#fff;font-weight:600}
.fuss a:hover{color:var(--sonne)}

/* ---------- Lightbox ---------- */
#lb{position:fixed;inset:0;background:rgba(6,16,32,.94);display:grid;place-items:center;z-index:9}
#lb[hidden]{display:none}
#lb img{max-width:96vw;max-height:92vh;border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
#lb button{position:absolute;top:.8rem;right:.8rem;width:3.2rem;height:3.2rem;font-size:2.2rem;line-height:1;color:#fff;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);border-radius:50%;cursor:pointer}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width:640px){
  .leiste{padding:.8rem 1rem}
  nav{width:100%}
  nav a{font-size:1rem;padding:.5rem .8rem}
  .kopf{padding:1.2rem 1rem 3.6rem}
  main{padding:1.2rem 1rem 3rem}
  .termin-hero{margin-top:-2.2rem;border-radius:20px}
  .karte,.zitat,.einladung{padding:1.1rem 1.15rem}
  .kontakt{gap:.8rem}
  .ikon.tg{width:2.3rem;height:2.3rem;padding:.48rem}
  .termin-feld{padding:.9rem;gap:.75rem}
  .termin-feld .ikon{width:2.4rem;height:2.4rem;padding:.5rem}
  .raster{grid-template-columns:repeat(2,1fr);gap:.5rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Letzter Telegram-Beitrag */
.beitrag{border-left:6px solid var(--sonne)}
.beitrag-datum{font:700 .95rem/1 var(--sans);color:var(--leise);letter-spacing:.04em;margin-bottom:.6rem}

/* Kontaktformular */
.formular{display:grid;gap:1rem;max-width:36rem}
.formular label{display:grid;gap:.35rem;font-weight:600}
.formular input:not([type=checkbox]),.formular textarea{font:inherit;padding:.7rem .9rem;border:1px solid var(--rand);border-radius:12px;background:var(--flaeche);color:var(--text)}
.formular .haken{display:flex;gap:.6rem;font-weight:400;align-items:flex-start}
.formular .knopf{border:0;cursor:pointer;justify-self:start}