/* Weihnachtsmarkt auf dem Heger Tor – Mobile first */

@font-face{font-family:"Sorts Mill Goudy";src:url(fonts/sorts-mill-goudy-regular.woff2?v=2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Sorts Mill Goudy";src:url(fonts/sorts-mill-goudy-italic.woff2?v=2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/cormorant-garamond-600.woff2?v=2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --gruen:#02431f;
  --gruen-hell:#0d6234;
  --gruen-tief:#012a14;
  --creme:#faeec0;
  --creme-hell:#fff8dc;
  --creme-tief:#efdfa6;
  --gold:#e9c27c;
  --text-auf-creme:#02431f;
  --serif:"Sorts Mill Goudy",Georgia,"Times New Roman",serif;
  --zahl:"Cormorant Garamond",Georgia,serif;
  --rand:1.25rem;
  --max:68rem;
  --radius:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:4rem;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--serif);font-size:1.125rem;line-height:1.55;color:var(--creme);background:var(--gruen-tief)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-weight:400;line-height:1.12;margin:0 0 .6em}
h2{font-size:clamp(1.9rem,6.5vw,3rem)}
h3{font-size:1.45rem}
p{margin:0 0 1em}
.zahl{font-family:var(--zahl);font-weight:600;font-variant-numeric:lining-nums}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;background:var(--creme);color:var(--gruen);padding:.6rem 1rem;z-index:100}
.skip:focus{left:1rem;top:1rem}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}

/* Platzhalter für offene Angaben – vor Livegang entfernen */
.offen{background:#ffe066;color:#222;padding:0 .3em;border-radius:3px;font-family:system-ui,sans-serif;font-size:.85em}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--rand)}
.sektion{padding:4.5rem 0;position:relative}
.gruen{background:radial-gradient(ellipse at 50% 30%,var(--gruen-hell) 0%,var(--gruen) 55%,var(--gruen-tief) 100%);color:var(--creme)}
.creme{background:radial-gradient(ellipse at 50% 40%,var(--creme-hell) 0%,var(--creme) 60%,var(--creme-tief) 100%);color:var(--text-auf-creme)}
.kicker{font-size:.85rem;letter-spacing:.22em;text-transform:uppercase;opacity:.85;margin-bottom:.9rem}
.linie{width:90px;height:2px;background:currentColor;opacity:.55;margin:1.4rem 0}
.zentriert{text-align:center}
.zentriert .linie{margin-left:auto;margin-right:auto}
.intro{font-size:1.2rem;max-width:38rem}
.zentriert .intro{margin-left:auto;margin-right:auto}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.75rem 1.4rem;border-radius:0;font-family:var(--serif);font-size:1.1rem;text-decoration:none;border:2px solid currentColor;transition:transform .15s ease,background-color .15s ease}
.btn:active{transform:scale(.97)}
.btn-voll{background:var(--creme);color:var(--gruen);border-color:var(--creme)}
.btn-voll:hover{background:var(--creme-hell)}
.creme .btn-voll{background:var(--gruen);color:var(--creme);border-color:var(--gruen)}
.creme .btn-voll:hover{background:var(--gruen-hell)}
.btn-rand{background:transparent}
.btn-rand:hover{background:rgba(250,238,192,.1)}
.creme .btn-rand:hover{background:rgba(2,67,31,.06)}
.btn svg{width:1.15em;height:1.15em;flex:none}
.knoepfe{display:flex;flex-direction:column;gap:.75rem;margin-top:1.8rem}
.knoepfe .btn{width:100%}

/* Kopfzeile */
.kopf{position:sticky;top:0;z-index:50;background:rgba(1,42,20,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(250,238,192,.15)}
.kopf .wrap{display:flex;align-items:center;gap:1rem;height:3.5rem}
.kopf-logo{flex:none;display:block;width:4.2rem}
.nav{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
.nav::-webkit-scrollbar{display:none}
.nav ul{display:flex;gap:1.2rem;list-style:none;margin:0;padding:0 1.5rem 0 0;white-space:nowrap}
.nav a{text-decoration:none;font-size:1rem;opacity:.9;padding:.6rem 0;display:block}
.nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}

/* Hero */
.hero{min-height:min(calc(100svh - 3.5rem),56rem);display:flex;align-items:center;padding:3rem 0 3.5rem;overflow:hidden}
.hero .wrap{position:relative;z-index:1}
.hero h1{margin:0 auto 1.2rem;max-width:30rem}
.hero h1 img{width:100%;margin:0 auto}
.hero .lead{font-size:1.3rem;max-width:30rem;margin:0 auto}
.eckdaten{display:grid;gap:.15rem;margin:1.6rem auto 0;font-size:1.25rem}
.eckdaten .zahl{font-size:2rem;line-height:1.1}
.status{font-family:var(--zahl);font-weight:600;font-variant-numeric:lining-nums;font-size:1.05rem !important;display:inline-block;margin-top:1.4rem;padding:.35rem .9rem;border:1px solid rgba(250,238,192,.4);border-radius:999px;font-size:.98rem}
.status:empty{display:none}
.status .punkt{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:var(--gold);margin-right:.45rem;vertical-align:.08em;box-shadow:0 0 8px var(--gold)}

/* Bokeh-Lichter, nur am Rand */
.lichter{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.lichter span{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,214,140,var(--a)) 0%,rgba(255,190,90,calc(var(--a)*.6)) 55%,rgba(255,180,80,0) 72%)}
@media (prefers-reduced-motion:no-preference){
  .lichter span{animation:flackern var(--d) ease-in-out infinite alternate}
  @keyframes flackern{from{opacity:.55}to{opacity:1}}
}

/* Karten „Klein & fein“ */
.karten{display:grid;gap:1rem;margin-top:2rem}
.karte{background:rgba(255,255,255,.45);border:1px solid rgba(2,67,31,.15);border-radius:var(--radius);padding:1.5rem 1.4rem}
.karte h3{margin-bottom:.5rem}
.karte p{margin:0}
.karte .icon{width:2.4rem;height:2.4rem;margin-bottom:.8rem;color:var(--gruen)}

/* Visualisierungen */
.galerie{display:flex;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;margin:2.5rem calc(var(--rand)*-1) 0;padding:0 var(--rand) .6rem;scrollbar-width:thin}
.galerie figure{flex:0 0 85%;margin:0;scroll-snap-align:center}
.galerie img{width:100%;aspect-ratio:734/380;object-fit:cover;border-radius:var(--radius)}
.galerie.einzel{display:block;overflow:visible;margin:2.5rem 0 0;padding:0}
.galerie.einzel figure{margin:0}
.galerie figcaption{font-size:.9rem;margin-top:.45rem;opacity:.8;font-style:italic}

/* Termine */
.wochenenden{display:grid;gap:.9rem;margin-top:2rem;list-style:none;padding:0}
.wochenende{display:flex;align-items:center;gap:1.1rem;padding:1.1rem 1.2rem;border:1px solid rgba(250,238,192,.3);border-radius:var(--radius);background:rgba(1,42,20,.35)}
.wochenende .nr{font-family:var(--zahl);font-weight:600;font-variant-numeric:lining-nums;font-size:2.6rem;line-height:1;width:2.2rem;text-align:center;color:var(--gold)}
.wochenende .daten{font-family:var(--zahl);font-weight:600;font-variant-numeric:lining-nums;font-size:1.65rem;line-height:1.1}
.wochenende .tage{font-family:var(--zahl);font-weight:600;font-variant-numeric:lining-nums;font-size:1.05rem;opacity:.85}
.wochenende.vorbei{opacity:.45}
.wochenende.jetzt{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.zeiten{display:flex;justify-content:center;align-items:stretch;gap:0;margin:1.8rem 0 0;flex-wrap:nowrap}
.zeiten div{text-align:center;padding:.2rem clamp(.9rem,4vw,1.6rem)}
.zeiten div+div{border-left:1px solid rgba(250,238,192,.35)}
.zeiten small{display:block;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;opacity:.75;margin-bottom:.5rem}
.zeiten .zahl{display:block;font-size:clamp(1.7rem,7vw,2.4rem);line-height:1;white-space:nowrap}

/* Programm */
.abende{list-style:none;padding:0;margin:1.6rem 0 0;display:flex;flex-wrap:wrap;gap:.6rem}
.abende li{padding:.45rem 1rem;border:1px solid rgba(2,67,31,.35);border-radius:999px;font-style:italic}
.hinweis{font-size:1rem;opacity:.85;margin-top:1.2rem}
.programm-grid{display:grid;gap:2.5rem}
.tasse{margin:0;border-radius:var(--radius);overflow:hidden;position:relative}
.tasse img{width:100%;aspect-ratio:4/5;object-fit:cover}
.tasse figcaption{position:absolute;left:.7rem;bottom:.7rem;background:rgba(1,42,20,.8);color:var(--creme);font-size:.8rem;padding:.2rem .6rem;border-radius:999px}

/* Anfahrt */
.adresse{font-style:normal;font-size:1.3rem;line-height:1.45;margin:1.4rem 0}

/* Aussteller */
.stände{display:grid;gap:1rem;margin-top:2rem;max-width:34rem;margin-inline:auto}
.stand{border:1px solid rgba(2,67,31,.2);border-radius:var(--radius);padding:1.5rem 1.4rem;background:rgba(255,255,255,.45);display:flex;flex-direction:column}
.stand p{flex:1}
.fakten{margin:.2rem 0 1rem;padding-left:1.2rem}
.fakten li{margin-bottom:.35rem}
.fakten li::marker{color:var(--gold)}
.fakten .zahl{white-space:nowrap}
.hinweis a{color:inherit}
.bildband{position:relative;overflow:hidden;height:clamp(20rem,72vw,44rem);background:var(--gruen-tief)}
.bildband img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;object-position:18% 50%;will-change:transform}
.bildband-hinweis{position:absolute;right:var(--rand);bottom:1rem;margin:0;background:rgba(1,42,20,.8);color:var(--creme);font-size:.85rem;font-style:italic;padding:.25rem .7rem}
.stand .btn{margin-top:.6rem}

/* FAQ */
.fragen{margin-top:2rem;border-top:1px solid rgba(250,238,192,.25)}
.fragen details{border-bottom:1px solid rgba(250,238,192,.25)}
.fragen summary{cursor:pointer;list-style:none;padding:1.1rem 2.2rem 1.1rem 0;font-size:1.2rem;position:relative}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";position:absolute;right:.2rem;top:50%;transform:translateY(-50%);font-family:var(--zahl);font-size:1.8rem;line-height:1;transition:transform .2s}
.fragen details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.fragen details p{padding:0 0 1.2rem;margin:0;opacity:.92}

/* Instagram */
.insta .handle{font-size:1.3rem;letter-spacing:.03em;margin:.4rem 0 0;word-break:break-word}
.insta-symbol{width:11rem;margin:0 auto 1.6rem}

/* Fuß */
.fuss{background:var(--gruen-tief);padding:3rem 0 2.5rem;font-size:1rem}
.fuss .wrap{display:grid;gap:1.5rem}
.fuss-logo{width:12rem}
.fuss ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.fuss a{text-decoration:none;opacity:.9}
.fuss a:hover{text-decoration:underline}
.fuss .klein{font-size:.88rem;opacity:.7;margin:0}

/* Unterseiten (Impressum, Datenschutz) */
.recht{background:var(--creme);color:var(--text-auf-creme);padding:3rem 0 4rem}
.recht .wrap{max-width:46rem}
.recht h1{font-size:clamp(2rem,7vw,2.8rem)}
.recht h2{font-size:1.5rem;margin-top:2.2rem}
.recht h3{font-size:1.2rem;margin-top:1.5rem}
.recht a{text-underline-offset:3px}
.zurueck{display:inline-block;margin-bottom:2rem;text-decoration:none}
.zurueck:hover{text-decoration:underline}

/* Ab Tablet */
@media (min-width:640px){
  :root{--rand:2rem}
  .knoepfe{flex-direction:row;justify-content:center}
  .knoepfe .btn{width:auto}
  .karten{grid-template-columns:repeat(2,1fr)}
  .wochenenden{grid-template-columns:repeat(2,1fr)}
  .galerie figure{flex-basis:60%}
  .fuss .wrap{grid-template-columns:auto 1fr;align-items:center;column-gap:3rem}
  .fuss .klein{grid-column:1/-1}
}

/* Ab Desktop */
@media (min-width:1000px){
  body{font-size:1.2rem}
  .sektion{padding:6.5rem 0}
  .kopf .wrap{height:4rem}
  .nav{-webkit-mask-image:none;mask-image:none}
  .nav ul{justify-content:flex-end;gap:2rem;padding:0}
  .hero h1{max-width:38rem}
  .karten{grid-template-columns:repeat(4,1fr)}
  .wochenenden{grid-template-columns:repeat(4,1fr)}
  .wochenende{flex-direction:column;text-align:center;gap:.5rem;padding:1.6rem 1rem}
  .galerie{overflow:visible;margin:3rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr)}
  .programm-grid{grid-template-columns:1.3fr 1fr;align-items:center;gap:4rem}
  .zwei-spalten{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
}

/* Eröffnung (eroeffnung.html) */
.einladung-hero .einladung-logo{width:min(70%,16rem);margin:0 auto 1.6rem}
.einladung-titel{font-size:clamp(2.6rem,11vw,4.6rem);line-height:1.05;margin:0 0 .6rem;font-weight:400}
.eckpunkte{display:grid;gap:1rem;margin:2.5rem auto 0;max-width:52rem}
.eckpunkte div{border-top:1px solid rgba(2,67,31,.25);padding-top:.9rem}
.eckpunkte dt{font-size:.85rem;letter-spacing:.22em;text-transform:uppercase;opacity:.75;margin-bottom:.3rem}
.eckpunkte dd{margin:0;font-size:1.15rem}
.einladung-bild{margin:2.8rem 0 0}
.einladung-bild img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:18% 50%;border-radius:var(--radius)}
.einladung-bild figcaption{font-size:.9rem;margin-top:.45rem;opacity:.8;font-style:italic}
.rsvp{max-width:34rem;margin:2.2rem auto 0;display:grid;gap:1.2rem}
.rsvp[hidden],.rsvp [hidden]{display:none}
.feld label,.wahl legend{display:block;font-size:1.05rem;margin-bottom:.4rem}
.feld input,.feld textarea{width:100%;font:inherit;font-size:1.05rem;color:var(--gruen);background:var(--creme-hell);border:2px solid var(--creme);border-radius:0;padding:.7rem .85rem}
.feld input:focus,.feld textarea:focus{outline:3px solid var(--gold);outline-offset:2px}
.feld-hilfe{font-size:.92rem;opacity:.8;margin:.35rem 0 0}
.feld-hilfe a{color:inherit}
.optional{opacity:.7;font-size:.9em}
.wahl{border:0;margin:0;padding:0;display:grid;gap:.5rem}
.wahl-feld{display:flex;align-items:center;gap:.7rem;padding:.75rem .9rem;border:1px solid rgba(250,238,192,.4);cursor:pointer}
.wahl-feld:has(input:checked){border-color:var(--creme);background:rgba(250,238,192,.1)}
.wahl-feld input{width:1.2rem;height:1.2rem;accent-color:var(--gold);margin:0}
.rsvp .btn{width:100%;cursor:pointer}
.rsvp-fehler{margin:0;color:#ffd7a0}
.rsvp-danke{max-width:42rem;margin:0 auto;padding:1rem 0 .5rem;outline:none}
.rsvp-danke[hidden],.rsvp-danke [hidden]{display:none}
.danke-zeichen{width:5.5rem;height:5.5rem;margin:0 auto 1.6rem;border-radius:50%;border:2px solid var(--gold);color:var(--gold);display:grid;place-items:center;box-shadow:0 0 40px rgba(233,194,124,.35),inset 0 0 20px rgba(233,194,124,.15)}
.danke-zeichen svg{width:2.8rem;height:2.8rem}
.danke-titel{font-size:clamp(2.3rem,8.5vw,3.8rem);line-height:1.1;margin:0}
.danke-termin{display:flex;flex-direction:column;align-items:center;gap:.2rem;margin:2rem auto 0;padding:1.3rem 1.5rem;max-width:26rem;border-top:1px solid rgba(233,194,124,.5);border-bottom:1px solid rgba(233,194,124,.5);font-size:1.15rem}
.danke-uhrzeit{font-size:1.8rem;color:var(--gold)}
@media (prefers-reduced-motion:no-preference){
  .rsvp-danke:not([hidden]){animation:danke-ein .7s ease-out both}
  .rsvp-danke:not([hidden]) .danke-zeichen{animation:danke-zeichen .9s .15s cubic-bezier(.2,.9,.3,1.3) both}
}
@keyframes danke-ein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes danke-zeichen{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.rsvp-meldung{max-width:34rem;margin:2.2rem auto 0;padding:1.5rem 1.4rem;border:1px solid var(--gold);background:rgba(1,42,20,.45);text-align:center}
.rsvp-meldung h3{margin:0 0 .5rem;font-size:1.5rem}
.rsvp-meldung p{margin:0}
.nur-bots{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (min-width:640px){
  .eckpunkte{grid-template-columns:repeat(3,1fr);gap:2rem}
  .wahl{grid-template-columns:1fr 1fr}
  .wahl legend{grid-column:1/-1}
}