:root { --gruen: #1b7a52; --text: #1c1917; --grau: #57534e; --hell: #f5f5f4; }
* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font: 17px/1.6 system-ui, -apple-system,
       "Segoe UI", Roboto, sans-serif; color: var(--text); background: linear-gradient(180deg, #fff 0%, var(--hell) 100%); }
main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 3rem 1.25rem;
       text-align: center; overflow-x: clip; }
/* Wappen: nach 2 s Verweilen mit der Maus dreht es sich um und zeigt die Bronze-Fassung; beim Verlassen zurück */
.wappen { width: min(46vw, 220px); aspect-ratio: 1984 / 2166; margin: 0 auto; perspective: 1200px; }
.wappen-innen { position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
                transition: transform .9s cubic-bezier(.45, .05, .2, 1); }
.wappen:hover .wappen-innen { transform: rotateY(180deg); transition-delay: 2s; }
/* diffuser Schatten: weit gestreut und weich, dazu ein leichter Kontaktschatten */
.seite { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; backface-visibility: hidden;
         filter: drop-shadow(0 24px 36px rgb(0 0 0 / .22)) drop-shadow(0 6px 10px rgb(0 0 0 / .10)); }
.hinten { transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) { .wappen-innen { transition-duration: .01s; } }
h1 { margin: 1.75rem 0 .25rem; font-size: clamp(1.5rem, 4.5vw, 2.3rem); line-height: 1.2; letter-spacing: -.01em; }
.untertitel { margin: 0; color: var(--grau); }
/* Flatterband: rot-weißes Absperrband quer über die Seite, Text läuft langsam durch */
body { overflow-x: hidden; }
/* breiter als die Seite, mittig ausgerichtet – ohne die Spalte mitzuziehen */
.flatterband { flex-shrink: 0; width: 130vw; margin: 2.75rem 0 1.25rem calc(50% - 65vw); overflow: hidden;
               transform: rotate(-2.5deg);
               background: repeating-linear-gradient(135deg, #c8102e 0 26px, #fff 26px 52px);
               border-block: 3px solid #a50d26; box-shadow: 0 10px 24px -10px rgb(0 0 0 / .35); }
.spur { display: flex; width: max-content; padding: .7rem 0; animation: laufen 60s linear infinite; }
/* Abstand als margin statt gap: dann ist die halbe Breite genau 6 Felder – nahtlose Schleife */
.spur span { margin-right: 4.5rem; padding: .3rem .95rem; background: #fff; color: #a50d26; font-size: .95rem; font-weight: 800;
             letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 0 0 2px #a50d26; }
@keyframes laufen { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .spur { animation: none; } }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.kontakt a { white-space: nowrap; }
.bald { max-width: 30rem; margin: 1rem auto 0; color: var(--grau); font-size: .95rem; }
.kontakt { max-width: 44rem; margin: 2.25rem auto 0; padding-top: 1.5rem; border-top: 1px solid #e7e5e4; color: var(--grau); font-size: .95rem; }
a { color: var(--gruen); }
footer { padding: 1.25rem; text-align: center; font-size: .9rem; color: var(--grau); }
footer a { margin: 0 .6rem; }
.text { max-width: 44rem; margin: 0 auto; padding: 3rem 1.25rem; text-align: left; }
.text h1 { margin-top: 0; }
.text h2 { margin-top: 2rem; font-size: 1.15rem; }

/* Schießstand (spiel.js): Doppelklick auf das Wappen */
.im-stand, .im-stand body { overflow: hidden; }
.schiessstand { position: fixed; inset: 0; z-index: 50; background: #0b120f; touch-action: none; user-select: none; }
.schiessstand[hidden] { display: none; }
.schiessstand canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
@media (hover: hover) and (pointer: fine) { .schiessstand canvas { cursor: none; } }
.stand-kopf { position: absolute; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
              gap: 1rem; padding: 1rem 1.25rem; color: #f5f5f4; font-weight: 700; pointer-events: none; }
.stand-kopf .stand-knopf { pointer-events: auto; }
.stand-knopf { padding: .5rem 1rem; border: 1px solid rgb(255 255 255 / .35); border-radius: 999px; background: rgb(255 255 255 / .08);
               color: #fff; font: inherit; font-size: .9rem; cursor: pointer; }
.stand-knopf:hover { background: rgb(255 255 255 / .18); }
.stand-knopf.primaer { border-color: var(--gruen); background: var(--gruen); }
.stand-ergebnis { position: absolute; left: 50%; top: 50%; width: min(92vw, 26rem); padding: 1.75rem 1.5rem;
                  transform: translate(-50%, -50%); border-radius: 1.25rem; background: #fff; color: var(--text);
                  text-align: center; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .6); }
.stand-ergebnis[hidden] { display: none; }
.stand-ergebnis h2 { margin: 0; font-size: 1rem; color: var(--grau); text-transform: uppercase; letter-spacing: .08em; }
.stand-summe { margin: .35rem 0 0; font-size: 2.2rem; font-weight: 800; color: var(--gruen); }
.stand-serie { margin: .5rem 0 0; color: var(--grau); font-variant-numeric: tabular-nums; }
.stand-urteil { margin: 1rem 0 0; }
.stand-knoepfe { display: flex; justify-content: center; gap: .6rem; margin-top: 1.4rem; }
.stand-ergebnis .stand-knopf:not(.primaer) { border-color: #d6d3d1; background: #fff; color: var(--text); }
.stand-ergebnis { max-height: 92vh; overflow-y: auto; }
.stand-liste { margin-top: 1.25rem; text-align: left; }
.stand-reiter { display: flex; gap: .25rem; padding: .25rem; border-radius: 999px; background: #f5f5f4; }
.stand-reiter button { flex: 1; padding: .4rem; border: 0; border-radius: 999px; background: none; color: var(--grau);
                       font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.stand-reiter button[aria-selected="true"] { background: #fff; color: var(--gruen); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.stand-eintrag { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem; margin-top: .9rem; }
.stand-eintrag[hidden] { display: none; }
.stand-eintrag label { flex: 1 1 12rem; display: grid; gap: .25rem; font-size: .85rem; color: var(--grau); }
.stand-eintrag input { padding: .5rem .7rem; border: 1px solid #d6d3d1; border-radius: .6rem; font: inherit; color: var(--text); }
.stand-eintrag input:focus { outline: 2px solid var(--gruen); outline-offset: 1px; }
.stand-hinweis { min-height: 1.2em; margin: .75rem 0 0; font-size: .9rem; color: var(--gruen); }
.stand-plaetze { margin: .5rem 0 0; padding: 0; list-style: none; counter-reset: platz; }
.stand-plaetze li { display: flex; align-items: baseline; gap: .6rem; padding: .35rem .5rem; border-radius: .5rem;
                    counter-increment: platz; font-variant-numeric: tabular-nums; }
.stand-plaetze li::before { content: counter(platz) "."; width: 1.6rem; color: var(--grau); }
.stand-plaetze li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stand-plaetze li:nth-child(-n+3) b { color: #a16207; }
.stand-plaetze li.eigener { background: rgb(27 122 82 / .1); }

/* KK-Stand: 3D-Raum hinter der Zeichenfläche (Maße setzt spiel.js) */
.schiessstand canvas { position: absolute; inset: 0; z-index: 2; }
.stand-kopf { z-index: 3; }
.stand-ergebnis { z-index: 4; }
.raum { position: absolute; inset: 0; overflow: hidden; z-index: 1;
        background: radial-gradient(ellipse at 50% 45%, #2a241d 0%, #0d0b09 70%); }
.welt { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.welt > div { position: absolute; left: 0; top: 0; backface-visibility: hidden; }
/* Seitenwände: Holzverkleidung unten, Schallschutzplatten oben */
.wand { transform-style: preserve-3d;
        background:
          linear-gradient(180deg, rgb(0 0 0 / .55) 0%, rgb(0 0 0 / 0) 18%, rgb(0 0 0 / 0) 70%, rgb(0 0 0 / .35) 100%),
          repeating-linear-gradient(90deg, transparent 0 118px, rgb(0 0 0 / .28) 118px 122px),
          linear-gradient(180deg, #5b5650 0%, #4f4a44 56%, #2d2620 56%, #2d2620 57%, #8a6038 57%, #6a4526 100%); }
.wand::after { content: ""; position: absolute; inset: 58% 0 0 0;
               background: repeating-linear-gradient(90deg, rgb(255 255 255 / .05) 0 2px, transparent 2px 46px); }
.wandwappen { position: absolute; width: auto; filter: drop-shadow(0 10px 14px rgb(0 0 0 / .6)); }
/* Boden: Estrich vorn, Kies/Rasen im Bahnbereich */
.boden { background:
          linear-gradient(180deg, rgb(0 0 0 / .05), rgb(0 0 0 / .55)),
          repeating-linear-gradient(90deg, transparent 0 calc(20% - 4px), rgb(255 255 255 / .22) calc(20% - 4px) 20%),
          linear-gradient(180deg, #8d8a83 0 10%, #7b7263 10% 11%, #56663a 11% 100%); }
.decke { background: linear-gradient(180deg, #0b0a09, #221f1b); }
/* Hochblenden: schwere Holzbalken mit Stahlblech, verhindern Schüsse ins Freie */
.blende { background: linear-gradient(180deg, #1c1a18 0%, #2a2724 70%, #5b4a36 70%, #3e3021 100%);
          box-shadow: 0 18px 30px rgb(0 0 0 / .55); }
/* Geschossfang: Holzlamellen, beleuchtet, mit Bahnnummern */
.rueckwand { background:
              radial-gradient(ellipse at 50% 55%, rgb(255 236 190 / .35), transparent 60%),
              repeating-linear-gradient(0deg, #5c4630 0 26px, #4b3825 26px 30px); }
.bahn { position: absolute; top: 22%; width: 6%; padding: 1.2% 0; background: #f1ede4; color: #1c1917; text-align: center;
        font: 800 clamp(24px, 4vw, 60px)/1 system-ui, sans-serif; border-radius: 4px; }
/* Schützentisch vorn */
.tisch { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 11vh; padding: 0 1.25rem; display: flex;
         align-items: center; color: rgb(255 255 255 / .75); font: 700 .8rem system-ui, sans-serif; letter-spacing: .12em;
         text-transform: uppercase; pointer-events: none;
         background: linear-gradient(180deg, #8a6440 0%, #6b4a2b 12%, #4e3520 100%);
         box-shadow: 0 -12px 30px rgb(0 0 0 / .5); }
.stand-verein { margin-top: 1.25rem; padding: 1rem 1.1rem; border-radius: 1rem; text-align: left;
                background: linear-gradient(135deg, rgb(27 122 82 / .1), rgb(161 98 7 / .1));
                border: 1px solid rgb(27 122 82 / .25); }
.stand-verein[hidden] { display: none; }
.stand-verein p { margin: 0; font-size: .95rem; }
.stand-verein .stand-verein-titel { margin-bottom: .35rem; font-weight: 800; color: var(--gruen); font-size: 1.05rem; }
.stand-verein .stand-knoepfe { justify-content: flex-start; margin-top: .8rem; }
.stand-verein a.stand-knopf { text-decoration: none; }
.stand-ergebnis a.stand-knopf:not(.primaer) { border-color: #d6d3d1; background: #fff; color: var(--text); }
.welt > .boden, .welt > .decke { backface-visibility: visible; }