/* Dorfwacht – gemeinsamer Stil (Look „Nachtwache“, Stand 10.10.2026). Regeln: DESIGN.md */
@font-face{font-family:Cinzel;src:url(/fonts/cinzel-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Garamond;src:url(/fonts/eb-garamond-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Garamond;src:url(/fonts/eb-garamond-latin-400-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Garamond;src:url(/fonts/eb-garamond-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0}
img{max-width:100%}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.leiste .wrap{display:flex;align-items:center;gap:28px;height:68px}
.leiste .marke img{height:38px;width:auto;display:block}
.leiste nav{margin-left:auto;display:flex;gap:24px;align-items:center}
.leiste nav a{text-decoration:none;padding:12px 0}
.held{position:relative;overflow:hidden}
.held .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.held .knoepfe{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0 0}
.zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:48px}
.zahlen div{padding:4px 18px}
.zahlen b{display:block}
.szene{position:absolute;inset:auto 0 0 0;height:100%;z-index:1;pointer-events:none}
.szene svg{position:absolute;bottom:0;left:0;width:100%;height:auto}
.spiele{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.spiel{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.spiel .bild{position:relative;overflow:hidden}
.spiel .bild img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .5s}
.spiel:hover .bild img{transform:scale(1.04)}
.spiel .inhalt{display:flex;flex-direction:column;flex:1}
.spiel p{flex:1}
.spiel em.alpha{display:block;margin-top:8px;font-size:.88em;opacity:.8}
.spiel .fuss{display:flex;align-items:center;justify-content:space-between;gap:12px}
.spiel.offen{justify-content:center;align-items:center;text-align:center}
.schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
.schritt{counter-increment:s}
.mpunkte{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px}
.brett{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.brett ul{list-style:none;margin:0;padding:0}
.tagebuch{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.eintrag time{display:block}
.stamm{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.stimmen{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.projekt .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.fragen{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.fragen summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+"}
.fragen details[open] summary::after{content:"–"}
footer .wrap{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
footer .rechts{margin-left:auto;display:flex;gap:22px}
footer a{display:inline-block;padding:10px 0}
@keyframes funkeln{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes strahl{0%{transform:rotate(-38deg)}50%{transform:rotate(38deg)}100%{transform:rotate(-38deg)}}
@keyframes glimmen{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes steigen{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translateY(-160px) translateX(20px);opacity:0}}
.stern{animation:funkeln 4s ease-in-out infinite}
.strahl{transform-origin:860px 214px;animation:strahl 14s ease-in-out infinite}
.fenster{animation:glimmen 3s ease-in-out infinite}
.funke{animation:steigen 6s linear infinite}
@media (prefers-reduced-motion:reduce){.stern,.strahl,.fenster,.funke{animation:none}}
@media (max-width:960px){
  .held .wrap,.projekt .wrap,.stamm{grid-template-columns:1fr}
  .spiele,.tagebuch{grid-template-columns:1fr 1fr}
  .schritte{grid-template-columns:1fr 1fr}
  .mpunkte{grid-template-columns:1fr}
  .fragen{grid-template-columns:1fr}
}
@media (max-width:640px){
  .leiste nav a:not(.nav-knopf){display:none}
  .leiste .wrap{height:60px}
  .spiele,.tagebuch,.brett{grid-template-columns:1fr}
  .zahlen{grid-template-columns:1fr 1fr;row-gap:18px}
  .held .knoepfe a{flex:1 1 100%;justify-content:center}
  footer .rechts{margin-left:0}
}
/* Entwurf A: Nachtwache. Kinoreife Nacht, Wappen-Gold, Cinzel. */
:root{--nacht:#0E1424;--tief:#090D18;--blau:#18213B;--gold:#C9A25A;--goldhell:#EBCB86;--creme:#F3E7CF;--text:#D9D3C5;--leise:#9EA6B8;--linie:rgba(201,162,90,.28)}
body.a{background:var(--nacht);color:var(--text);font:400 19px/1.6 Garamond,Georgia,serif}
.a a{color:var(--goldhell)}
.a h1,.a h2,.a h3{font-family:Cinzel,serif;font-weight:600;color:var(--creme);letter-spacing:.04em;margin:0}
.a .leiste{position:absolute;left:0;right:0;top:0;z-index:5}
.a .leiste nav a{font-family:Cinzel,serif;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--creme)}
.a .leiste nav a:hover{color:var(--goldhell)}
.a .nav-knopf{border:1px solid var(--gold);padding:10px 16px!important}
.a .held{padding:150px 0 300px;background:radial-gradient(ellipse 90% 70% at 72% 62%,#1f2c52 0,var(--nacht) 62%,var(--tief) 100%)}
.a .szene .stern{fill:#F3E7CF}
.a .szene .strahl{fill:url(#none);fill:rgba(235,203,134,.10)}
.a .szene .huegel2{fill:#141d36}
.a .szene .huegel{fill:#0f172c}
.a .szene .haus{fill:#0b1222}
.a .szene .fenster{fill:#EBCB86}
.a .szene .turm{fill:#0b1222}
.a .szene .laterne{fill:#FFE3A3;filter:drop-shadow(0 0 10px #EBCB86) drop-shadow(0 0 24px #C9A25A)}
.a .szene .funke{fill:#EBCB86}
.a .szene .boden{fill:var(--tief)}
.a .kicker{font-family:Cinzel,serif;color:var(--gold);font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;margin:0 0 20px;display:flex;align-items:center;gap:14px}
.a .kicker::before{content:"";width:44px;height:1px;background:var(--gold)}
.a h1{font-size:clamp(2.6rem,5.4vw,4.4rem);line-height:1.04;letter-spacing:.02em;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.a h1 em{font-family:Garamond,serif;font-style:italic;font-weight:400;color:var(--goldhell);letter-spacing:0}
.a .lead{font-size:1.28rem;max-width:30em;margin:22px 0 0}
.a .taste{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(180deg,#E3BE72,#C49A50);color:var(--tief);font-family:Cinzel,serif;font-weight:600;font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:17px 28px;border:1px solid #F1D597;box-shadow:0 10px 30px rgba(201,162,90,.25)}
.a .taste:hover{filter:brightness(1.08)}
.a .taste.zwei{background:rgba(9,13,24,.4);color:var(--goldhell);border-color:var(--linie);box-shadow:none;backdrop-filter:blur(4px)}
.a .zahlen{border-top:1px solid var(--linie);padding-top:22px;max-width:620px}
.a .zahlen div{border-left:1px solid var(--linie)}.a .zahlen div:first-child{border-left:0;padding-left:0}
.a .zahlen b{font-family:Cinzel,serif;color:var(--creme);font-size:1.7rem}
.a .zahlen span{color:var(--leise);font-size:.95rem;font-style:italic}
.a .bildspalte .rahmen{position:relative;padding:12px;border:1px solid var(--linie);background:rgba(9,13,24,.55);transform:perspective(1200px) rotateY(-9deg) rotateX(3deg);box-shadow:0 40px 80px rgba(0,0,0,.55)}
.a .bildspalte img{display:block;width:100%;height:auto;aspect-ratio:5/4;object-fit:cover}.a .bildspalte{max-width:500px;justify-self:end;width:100%}
.a .bildspalte .rahmen::before,.a .bildspalte .rahmen::after{content:"";position:absolute;width:28px;height:28px;border:2px solid var(--gold)}
.a .bildspalte .rahmen::before{top:-7px;left:-7px;border-right:0;border-bottom:0}
.a .bildspalte .rahmen::after{bottom:-7px;right:-7px;border-left:0;border-top:0}
.a .bildspalte figcaption{font-style:italic;color:var(--leise);font-size:.95rem;margin-top:14px;text-align:right}
.a section{padding:96px 0;position:relative}
.a section+section{border-top:1px solid var(--linie)}
.a .kopf{display:grid;grid-template-columns:auto 1fr;column-gap:22px;align-items:baseline;margin:0 0 44px}
.a .kopf .nr{font-family:Cinzel,serif;color:var(--gold);letter-spacing:.2em;font-size:.95rem}
.a h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.a .kopf .unter{grid-column:2;margin:8px 0 0;color:var(--leise);font-style:italic;font-size:1.1rem}
.a .spiel{background:linear-gradient(180deg,var(--blau),rgba(24,33,59,.35));border:1px solid var(--linie);transition:transform .25s,border-color .25s,box-shadow .25s}
.a .spiel:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 24px 50px rgba(0,0,0,.45)}
.a .spiel .art{position:absolute;left:0;bottom:0;background:var(--tief);color:var(--goldhell);font-family:Cinzel,serif;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;padding:8px 12px}
.a .spiel .inhalt{padding:22px 22px 24px}
.a .spiel h3{font-size:1.5rem;margin:0 0 8px}
.a .spiel p{margin:0 0 20px}
.a .spiel .los{font-family:Cinzel,serif;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--goldhell);border-bottom:1px solid var(--gold);padding:8px 0}
.a .version{font-style:italic;color:var(--gold);font-size:.92rem}
.a .spiel.offen{border-style:dashed;background:transparent;padding:40px 28px}
.a .spiel.offen .plus{width:76px;height:76px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold);font-family:Cinzel,serif;font-size:1.8rem;margin-bottom:18px}
.a .spiel.offen strong{color:var(--goldhell);font-weight:600}
.a .mitmachen{background:linear-gradient(180deg,var(--tief),var(--nacht))}
.a .schritt{border-top:1px solid var(--gold);padding-top:18px}
.a .schritt b{font-family:Cinzel,serif;color:var(--creme);font-size:1.15rem;letter-spacing:.06em;font-weight:600}
.a .schritt b::before{content:"0" counter(s) "  ";color:var(--gold);font-size:.85rem;letter-spacing:.2em}
.a .schritt p{margin:6px 0 0;color:var(--leise)}
.a .spalte{background:var(--blau);border:1px solid var(--linie);padding:22px}
.a .spalte h3{font-size:1rem;letter-spacing:.14em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px}
.a .spalte h3 span{font-family:Garamond,serif;text-transform:none;letter-spacing:0;font-style:italic;color:var(--leise);font-weight:400;font-size:.95rem}
.a .spalte li{padding:12px 0;border-top:1px solid var(--linie);display:flex;justify-content:space-between;gap:10px}
.a .spalte li b{color:var(--creme);font-weight:600}.a .spalte li em{color:var(--gold);font-size:.95rem}
.a .eintrag{border-left:1px solid var(--gold);padding:4px 0 4px 22px}
.a .eintrag time{color:var(--leise);font-style:italic;font-size:.95rem}
.a .eintrag .tag{display:inline-block;margin:8px 0;font-family:Cinzel,serif;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tief);background:var(--gold);padding:4px 9px}
.a .eintrag h3{font-size:1.25rem;margin:0 0 8px}
.a .eintrag p{margin:0;color:var(--text)}
.a .lead2{font-size:1.2rem;margin:0 0 28px}
.a .stimmen li{background:var(--blau);border:1px solid var(--linie);padding:20px 24px;position:relative}
.a .stimmen q{display:block;font-style:italic;font-size:1.15rem;color:var(--creme);quotes:"„" "“"}
.a .stimmen span{display:block;margin-top:8px;color:var(--gold);font-size:.9rem;font-family:Cinzel,serif;letter-spacing:.12em;text-transform:uppercase}
.a .projekt{background:radial-gradient(ellipse at 80% 50%,#1b2747,var(--tief) 70%)}
.a .tafel{border:1px solid var(--linie);padding:36px;background:repeating-linear-gradient(135deg,rgba(201,162,90,.05) 0 2px,transparent 2px 14px)}
.a .tafelkopf{display:block;font-family:Cinzel,serif;color:var(--gold);letter-spacing:.22em;font-size:.76rem;text-transform:uppercase;margin-bottom:10px}
.a .tafel strong{display:block;font-family:Cinzel,serif;color:var(--creme);font-size:1.5rem;font-weight:600;letter-spacing:.04em}
.a .phasen{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:22px}
.a .phasen i{font-style:normal;font-size:.85rem;color:var(--leise);border-top:4px solid rgba(201,162,90,.18);padding-top:8px}
.a .phasen i.an{border-color:var(--gold);color:var(--goldhell)}
.a .fragen details{border-bottom:1px solid var(--linie)}
.a .fragen summary{padding:18px 0;font-weight:600;color:var(--creme);font-size:1.12rem}
.a .fragen summary::after{color:var(--gold);font-family:Cinzel,serif}
.a .fragen p{margin:0 0 18px}
.a .spende{text-align:center;background:radial-gradient(ellipse at 50% 100%,#1b2747,var(--nacht) 70%)}
.a .spende h2{margin-bottom:16px}
.a .spende p{max-width:34em;margin:0 auto 30px;font-size:1.18rem}
.a footer{border-top:1px solid var(--linie);padding:30px 0 44px;color:var(--leise);font-size:.95rem;background:var(--tief)}
.a footer a{color:var(--leise)}
@media (max-width:960px){.a .held{padding:120px 0 240px}.a .bildspalte .rahmen{transform:none}}
@media (max-width:640px){body.a{font-size:18px}.a .held{padding:96px 0 200px}.a section{padding:64px 0}.a .zahlen div:nth-child(3){border-left:0;padding-left:0}}

.a .manifest{text-align:center;background:var(--tief);border-top:1px solid var(--linie)}
.a .mkopf{font-family:Cinzel,serif;color:var(--gold);letter-spacing:.24em;font-size:.8rem;text-transform:uppercase;margin:0 0 14px}
.a .manifest h2{font-size:clamp(2rem,4.4vw,3.4rem)}
.a .mlead{max-width:36em;margin:18px auto 0;font-size:1.25rem;font-style:italic;color:var(--text)}
.a .mpunkte{text-align:left}
.a .mpunkte div{border-top:1px solid var(--gold);padding-top:16px}
.a .mpunkte b{font-family:Cinzel,serif;color:var(--creme);font-weight:600;letter-spacing:.05em;font-size:1.12rem}
.a .mpunkte p{margin:6px 0 0;color:var(--leise)}

/* Wärme aus Entwurf C: Laternenlicht, glühende Fenster, Gesprächsblasen */
.a .held{background:radial-gradient(circle at 72% 80%,rgba(235,203,134,.20) 0,rgba(235,203,134,0) 30%),radial-gradient(ellipse 90% 70% at 72% 62%,#1f2c52 0,var(--nacht) 62%,var(--tief) 100%)}
.a .szene .fenster{filter:drop-shadow(0 0 5px #EBCB86)}
.a .taste,.a .spiel,.a .spalte,.a .tafel,.a .bildspalte .rahmen{border-radius:4px}
.a .spiel{overflow:hidden}
.a .stimmen li{border-radius:18px 18px 18px 4px;background:var(--blau);box-shadow:0 10px 24px rgba(0,0,0,.25)}
.a .stimmen li:nth-child(even){margin-left:40px;border-radius:18px 18px 4px 18px;background:#22305a}
.a .stimmen q{font-size:1.08rem}
.a .stammtisch{background:radial-gradient(circle at 12% 30%,rgba(235,203,134,.12),transparent 42%),var(--nacht)}
.a .unterschrift{font-style:italic;color:var(--goldhell);margin:18px 0 26px}
.leer{color:var(--leise);font-style:italic;padding:12px 0;border-top:1px solid var(--linie)}
.leer a{font-style:normal}
.a .rang{margin-top:34px;background:var(--blau);border:1px solid var(--linie);border-radius:4px;padding:20px 22px}
.a .rang h3{font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 6px;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.a .rang h3 span{font-family:Garamond,serif;text-transform:none;letter-spacing:0;font-style:italic;font-weight:400;color:var(--leise);font-size:.92rem}
.a .rang ol{list-style:none;margin:0;padding:0;counter-reset:r}
.a .rang li{counter-increment:r;display:grid;grid-template-columns:2em 1fr auto;gap:10px;padding:9px 0;border-top:1px solid var(--linie)}
.a .rang li::before{content:counter(r);font-family:Cinzel,serif;color:var(--gold)}
.a .rang li b{color:var(--creme);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a .rang li em{color:var(--leise);font-size:.92rem}
.a .reiter{display:flex;gap:8px;margin:8px 0 6px}
.a .reiter button{font:inherit;font-size:.92rem;min-height:44px;padding:0 16px;background:transparent;color:var(--leise);border:1px solid var(--linie);border-radius:999px;cursor:pointer}
.a .reiter button[aria-pressed=true]{color:var(--tief);background:var(--goldhell);border-color:var(--goldhell)}
.a h1 .kicker{display:flex;font-size:.8rem;margin-bottom:20px;text-shadow:none}
.a .bild .marke{position:absolute;right:0;top:0;background:var(--goldhell);color:var(--tief);font-family:Cinzel,serif;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;padding:8px 12px}
.a .spiel .version{color:#D4AE68}
.a .spiel.offen strong{white-space:nowrap}
.a .spiel .los{padding:12px 0}
@media (max-width:640px){.a .stimmen li:nth-child(even){margin-left:16px}.leiste .marke img{height:32px}}

/* Spendenband nach den Spielen */
.a .spendband{padding:0 0 8px;border-top:0}
.a .spendband+section{border-top:1px solid var(--linie)}
.a .band{display:flex;align-items:center;gap:32px;padding:30px 34px;border:1px solid var(--gold);border-radius:4px;background:radial-gradient(circle at 0 50%,rgba(235,203,134,.16),transparent 55%),var(--blau);box-shadow:0 0 40px rgba(235,203,134,.08)}
.a .band b{display:block;font-family:Cinzel,serif;font-weight:600;color:var(--creme);font-size:1.25rem;letter-spacing:.03em}
.a .band p{margin:6px 0 0;color:var(--text);max-width:40em}
.a .band .taste{flex:none;margin-left:auto}
.a .tafelfuss{margin:24px 0 0;font-style:italic;color:var(--leise)}
@media (max-width:760px){.a .band{flex-direction:column;align-items:stretch;padding:24px}.a .band .taste{margin:0;justify-content:center}}
.a #spiele{padding-bottom:48px}.a .spendband{padding-bottom:96px}