/* Layout: ruhige Dorfchronik. Heller Grund, Kieferngrün als tragende Farbe, Heideviolett und Ährengold nur als Akzent (Farben aus dem Wappen). Eine Textspalte von 68rem, Fotos mit schmalem Rahmen. */
:root{
  --kiefer:#2f4a34;      /* Kiefern- und Wacholdergrün */
  --kiefer-dunkel:#1f3324;
  --heide:#7b4f86;       /* Heideblüte im Wappen */
  --aehre:#b8913a;       /* Ähre im Wappen */
  --grund:#f5f5f0;       /* heller Grund, leicht grünlich */
  --weiss:#ffffff;
  --text:#1e231f;
  --leise:#56605a;
  --linie:#dcdfd6;
  --serif:"Palatino Linotype",Palatino,"Book Antiqua","URW Palladio L","Iowan Old Style",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --breite:68rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5.5rem;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--text);font:400 1.0625rem/1.7 var(--sans)}
img{max-width:100%;display:block}
a{color:var(--kiefer)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--aehre);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.2;text-wrap:balance;margin:0;color:var(--kiefer-dunkel)}
p{margin:0}
.wrap{max-width:var(--breite);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.dachzeile{font:600 .78rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--heide)}
section{padding-block:clamp(3.5rem,8vw,6rem)}
section.weiss{background:var(--weiss)}
.kopf{display:grid;gap:.8rem;max-width:42rem;margin-bottom:clamp(2rem,5vw,3rem)}
.kopf h2{font-size:clamp(1.9rem,4.2vw,2.7rem)}
.kopf h2::after{content:"";display:block;width:3.5rem;height:3px;background:var(--aehre);margin-top:1rem}
.kopf p{color:var(--leise);font-size:1.08rem}
.fliess{display:grid;gap:1rem;max-width:40rem}
.skip{position:absolute;left:-999px;top:0;background:var(--aehre);color:#fff;padding:.6rem 1rem;z-index:100}
.skip:focus{left:1rem;top:1rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- Kopfzeile ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--weiss)}
.leiste{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--weiss);border-bottom:1px solid var(--linie)}
.leiste .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4.75rem}
.marke{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--kiefer-dunkel);min-width:0}
.marke img{width:36px;height:auto;flex:none}
.marke b{display:block;font:700 1.12rem/1.15 var(--serif);white-space:nowrap}
.marke small{display:block;font:500 .78rem/1.3 var(--sans);color:var(--leise);white-space:nowrap}
.nav-breit{display:none;gap:1.6rem}
.nav-breit a{color:var(--text);text-decoration:none;font-size:.97rem;padding:.3rem 0;border-bottom:2px solid transparent}
.nav-breit a:hover,.nav-breit a.aktiv{border-bottom-color:var(--aehre);color:var(--kiefer)}
.burger{width:46px;height:46px;flex:none;border:1px solid var(--linie);border-radius:6px;background:var(--weiss);display:grid;place-items:center;cursor:pointer;color:var(--kiefer)}
.burger span{display:block;width:20px;height:2px;background:currentColor;position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;transition:transform .2s}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
.menue{position:fixed;left:0;right:0;bottom:0;top:calc(4.75rem + env(safe-area-inset-top,0px));z-index:45;background:var(--weiss);overflow-y:auto;padding:1rem max(20px,env(safe-area-inset-right,0px)) calc(2rem + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px))}
.menue ul{list-style:none;margin:0;padding:0}
.menue li{border-bottom:1px solid var(--linie)}
.menue a{display:block;padding:1rem .25rem;font:700 1.35rem/1.3 var(--serif);color:var(--kiefer-dunkel);text-decoration:none}
body.menue-offen{overflow:hidden}
@media (min-width:1000px){.nav-breit{display:flex}.burger{display:none}.menue{display:none!important}}

/* ---------- Auftakt ---------- */
.auftakt{padding:0;background:var(--kiefer-dunkel)}
.auftakt .foto{position:relative;min-height:clamp(420px,62vh,620px);background:#4a5a46;display:flex;align-items:flex-end;overflow:hidden}
.auftakt .foto>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:68% 62%;filter:saturate(.78) contrast(.96) brightness(.97);z-index:0}
.auftakt .foto::before{z-index:1}
.auftakt .foto .wrap{z-index:2}
.auftakt .foto::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,30,22,0) 35%,rgba(20,30,22,.72) 100%)}
@media (max-width:699px){.auftakt .foto::before{background:linear-gradient(180deg,rgba(20,30,22,0) 15%,rgba(20,30,22,.55) 45%,rgba(20,30,22,.8) 100%)}}
.auftakt .ort,.auftakt h1,.auftakt .unter{text-shadow:0 1px 12px rgba(0,0,0,.35)}
.auftakt .wrap{position:relative;width:100%;padding-block:3rem clamp(2rem,5vw,3.5rem);color:#fff;display:grid;gap:1rem}
.auftakt .ort{font:600 .82rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#f1e9d2}
.auftakt h1{color:#fff;font-size:clamp(2.4rem,7vw,4.4rem);max-width:16ch}
.auftakt .unter{font-size:clamp(1.05rem,2.2vw,1.25rem);max-width:38rem;color:rgba(255,255,255,.92)}
.fakten{background:var(--kiefer);color:#eef2ec}
.fakten .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem}
@media (min-width:700px){.fakten .wrap{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}}
.fakten .wrap>div{padding:1.1rem 1.25rem 1.1rem 0;display:grid;gap:.15rem;align-content:start}
.fakten b{font:700 1.25rem/1.25 var(--serif);color:#fff}
.fakten span{font-size:.9rem;color:#c9d4c8}
.fakten a{color:#fff}
@media (min-width:700px){.fakten .wrap>div+div{padding-left:1.25rem;border-left:1px solid rgba(255,255,255,.18)}}

/* ---------- Unser Dorf ---------- */
.dorf .wrap{display:grid;gap:2.5rem;align-items:start}
.wappen{background:var(--weiss);border:1px solid var(--linie);padding:2rem 1.5rem;display:grid;justify-items:center;gap:1rem;text-align:center}
.wappen-paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;align-items:start;width:100%;max-width:22rem}
.wappen-paar figure{display:grid;justify-items:center;gap:.5rem}
.wappen-paar img{width:auto;height:150px;max-width:100%;object-fit:contain}
.wappen-paar figcaption{font:600 .85rem/1.3 var(--sans);letter-spacing:.04em;color:var(--kiefer-dunkel);text-align:center}
.wappen-paar figcaption small{display:block;font-weight:400;font-size:.76rem;letter-spacing:0;color:var(--leise);margin-top:.15rem}
.dorf .breit{margin-top:2rem}
.chronik .bilder img.klein{max-width:24rem}
.aktuell{display:grid;gap:1.75rem;background:var(--grund);border:1px solid var(--linie);border-top:4px solid var(--kiefer);padding:1.5rem;margin-bottom:1.25rem;align-items:start}
.aktuell .text{display:grid;gap:.8rem;align-content:start}
.aktuell h3{font-size:clamp(1.4rem,3vw,1.8rem)}
.aktuell p{color:var(--text)}
.aktuell .foto-rahmen{margin-top:.5rem}
.video{display:grid;gap:.5rem;justify-items:center}
.video video{width:100%;max-width:340px;height:auto;aspect-ratio:464/832;background:#000;display:block}
.video figcaption{font-size:.88rem;color:var(--leise);text-align:center}
@media (min-width:860px){.aktuell{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:2.5rem;padding:2rem}}
.wappen p{font-size:.95rem;color:var(--leise);max-width:22rem}
@media (min-width:860px){.dorf .wrap{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:4rem}}

/* ---------- Gemeinschaft ---------- */
.gemeinschaft .zweispaltig{display:grid;gap:2.5rem;align-items:start}
figure{margin:0}
.foto-rahmen{background:var(--weiss);border:1px solid var(--linie);padding:.5rem}
.foto-rahmen img{width:100%;height:auto;background:var(--linie)}
.foto-rahmen figcaption{font-size:.88rem;color:var(--leise);padding:.6rem .25rem .2rem}
.motto{margin:1rem 0 0;padding:1.25rem 1.5rem;border-left:4px solid var(--aehre);background:var(--grund)}
.motto p{font:italic 700 clamp(1.35rem,3vw,1.75rem)/1.3 var(--serif);color:var(--kiefer-dunkel)}
.motto cite{display:block;margin-top:.4rem;font:600 .78rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--leise)}
@media (min-width:860px){.gemeinschaft .zweispaltig{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4rem}}

/* ---------- Termine ---------- */
.termine{background:var(--grund)}
.tabelle{list-style:none;margin:0;padding:0;border-top:2px solid var(--kiefer)}
.termin{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:.25rem 1.25rem;padding:1.1rem 0;border-bottom:1px solid var(--linie);align-items:baseline}
.termin .wann{font-variant-numeric:tabular-nums}
.termin .wann b{display:block;font:700 1.3rem/1.2 var(--serif);color:var(--kiefer-dunkel)}
.termin .wann span{display:block;font-size:.88rem;line-height:1.4;color:var(--leise)}
.termin h3{font-size:1.2rem;hyphens:auto;overflow-wrap:break-word}
.termin .wo{color:var(--leise);font-size:.97rem}
.termin .hinweis{grid-column:2;font-size:.92rem;color:#5b4a1c;background:#f6efdc;padding:.45rem .7rem;margin-top:.4rem;justify-self:start}
.termin .als{display:none;font:700 .7rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;background:var(--aehre);color:#fff;padding:.3rem .5rem;margin-left:.5rem;vertical-align:middle}
.termin.naechster{background:linear-gradient(90deg,#f2f5ef,transparent);box-shadow:inset 4px 0 0 var(--kiefer);padding-left:1rem}
.termin.naechster h3{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:.35rem}
.termin.naechster .als{display:block;margin-left:0}
.termin.vorbei{color:var(--leise)}
.termin.vorbei h3,.termin.vorbei .wann b{color:var(--leise)}
@media (min-width:760px){
  .termin{grid-template-columns:7rem minmax(0,1.2fr) minmax(0,1fr)}
  .termin .hinweis{grid-column:3}
  .termin.naechster{padding-left:1rem}
}
.jahrkopf{font:700 1rem/1 var(--sans);letter-spacing:.16em;color:var(--heide);padding:1.6rem 0 .6rem;border-bottom:1px solid var(--linie)}
.tabelle>.jahrkopf:first-child{padding-top:1rem}
.termin.jubi .wann b,.termin.jubi h3{color:var(--aehre)}
.termin.jubi{background:linear-gradient(90deg,#faf4e4,transparent)}
.jubilaeum{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.25rem 1.75rem;align-items:center;background:var(--weiss);border:1px solid var(--linie);border-top:4px solid var(--aehre);padding:1.5rem 1.5rem 1.6rem;margin-bottom:2.5rem}
.jubilaeum .zahl{font:700 clamp(3.6rem,10vw,5.5rem)/.9 var(--serif);color:var(--aehre);font-variant-numeric:lining-nums}
.jubilaeum h3{font-size:clamp(1.35rem,3vw,1.7rem);margin:.35rem 0 .5rem}
.jubilaeum p{color:var(--leise);max-width:40rem}
@media (max-width:520px){.jubilaeum{grid-template-columns:minmax(0,1fr)}}
.vergangen{margin-top:1.25rem}
.vergangen summary{cursor:pointer;color:var(--kiefer);font-weight:600;padding:.4rem 0;list-style:none;display:inline-flex;gap:.5rem;align-items:center}
.vergangen summary::-webkit-details-marker{display:none}
.vergangen summary::before{content:"▸";transition:transform .2s}
.vergangen[open] summary::before{transform:rotate(90deg)}
.vergangen .tabelle{border-top:1px solid var(--linie);margin-top:.5rem}
.termin-fuss{display:grid;gap:1rem;margin-top:2rem;max-width:44rem}
.termin-fuss p{font-size:.94rem;color:var(--leise)}
.knopf{display:inline-flex;align-items:center;gap:.55rem;justify-self:start;background:var(--kiefer);color:#fff;text-decoration:none;font-weight:600;padding:.85rem 1.3rem;border-radius:4px}
.knopf:hover{background:var(--kiefer-dunkel)}
.knopf svg{width:18px;height:18px}

/* ---------- Chronik ---------- */
.chronik ol{list-style:none;margin:0;padding:0;position:relative}
.eintrag{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;padding-bottom:clamp(2.5rem,5vw,3.5rem);position:relative}
.eintrag .jahr{font:700 clamp(1.9rem,4.5vw,2.6rem)/1 var(--serif);color:var(--aehre);font-variant-numeric:tabular-nums}
.eintrag .jahr small{display:block;font:600 .74rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--leise);margin-bottom:.3rem}
.eintrag h3{font-size:clamp(1.45rem,3vw,1.8rem)}
.eintrag .rhythmus{font-size:.92rem;font-weight:600;color:var(--heide)}
.eintrag .inhalt{display:grid;gap:.8rem;max-width:40rem}
.eintrag .inhalt p{color:var(--text)}
.eintrag .bilder{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:.75rem}
.eintrag .bilder img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--linie)}
@media (min-width:860px){
  .chronik ol::before{content:"";position:absolute;left:8.5rem;top:.6rem;bottom:0;width:1px;background:var(--linie)}
  .eintrag{grid-template-columns:7rem minmax(0,1fr);column-gap:3rem}
  .eintrag::before{content:"";position:absolute;left:calc(8.5rem - 6px);top:.65rem;width:11px;height:11px;border-radius:50%;background:var(--grund);border:2px solid var(--aehre)}
  .eintrag .jahr{text-align:right}
  .eintrag .rest{display:grid;gap:1.25rem}
}
.eintrag .rest{display:grid;gap:1.1rem;min-width:0}

/* ---------- Bilder ---------- */
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:.75rem}
.galerie button{all:unset;cursor:zoom-in;display:block;background:var(--weiss);border:1px solid var(--linie);padding:.4rem}
.galerie button:focus-visible{outline:3px solid var(--aehre);outline-offset:2px}
.galerie img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--linie)}
.galerie span{display:block;font-size:.86rem;color:var(--leise);padding:.5rem .2rem .15rem;line-height:1.4}
dialog.gross{border:0;padding:0;max-width:min(96vw,1100px);background:transparent}
dialog.gross::backdrop{background:rgba(15,22,17,.88)}
dialog.gross img{max-height:80vh;width:auto;margin:0 auto;background:var(--weiss)}
dialog.gross p{color:#fff;text-align:center;padding:.75rem 1rem 0;font-size:.95rem}
dialog.gross button{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px));width:44px;height:44px;border:0;border-radius:4px;background:var(--weiss);color:var(--text);font-size:1.5rem;line-height:1;cursor:pointer}

/* ---------- Anerkennung ---------- */
.dreier{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.feld{background:var(--weiss);border:1px solid var(--linie);display:flex;flex-direction:column}
.feld img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--linie)}
.feld .text{padding:1.3rem 1.3rem 1.5rem;display:grid;gap:.6rem;align-content:start}
.feld h3{font-size:1.3rem}
.feld p,.feld li{color:var(--leise);font-size:.98rem}
.feld ul{margin:0;padding:0;list-style:none;display:grid;gap:.5rem}
.feld li b{color:var(--kiefer-dunkel);font-variant-numeric:tabular-nums;margin-right:.4rem}

/* ---------- Kontakt ---------- */
.kontakt{background:var(--kiefer);color:#eef2ec}
.kontakt .kopf h2{color:#fff}
.kontakt .kopf p{color:#c9d4c8}
.personen{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));max-width:48rem}
.person{background:var(--weiss);color:var(--text);padding:1.5rem;display:grid;gap:.75rem}
.person h3{font-size:1.45rem}
.person a{display:flex;align-items:center;gap:.6rem;color:var(--text);text-decoration:none;overflow-wrap:anywhere;padding:.35rem 0;font-variant-numeric:tabular-nums}
.person a:hover{color:var(--kiefer)}
.person svg{width:18px;height:18px;flex:none;color:var(--kiefer)}

/* ---------- Fuß ---------- */
footer{background:var(--kiefer-dunkel);color:#c9d4c8;padding-block:2.25rem calc(2.25rem + env(safe-area-inset-bottom,0px));font-size:.93rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:1.25rem 2rem;align-items:center;justify-content:space-between}
footer .marke b{color:#fff}
footer .marke small{color:#c9d4c8}
footer nav{display:flex;gap:1.5rem}
footer a{color:#fff}
footer .nachweis{flex-basis:100%;order:3;font-size:.8rem;color:#9fb09d;margin:0}
footer .nachweis a{color:#c9d4c8}

.feld img.pokal{object-fit:contain;background:#1c2350}

.termin-meldung{color:var(--leise);padding:1rem 0}
.termin-meldung.fehler{color:#7a2a1c;background:#fbeeea;padding:.8rem 1rem}