/* Schützenfest-Wiki. Stil nach Nils' Bildern (05.11.): sonnige Voxel-Welt in Grün und Weiß, blauer Himmel,
   Wimpelketten in Grün, Weiß und Rot, Gold der Königskette, rote Rosen. Hell, freundlich, leicht blockig. */
:root{
  --gruen:#2f8f3e;--gruen-dunkel:#1d5c2a;--gruen-tief:#14401e;--gruen-hell:#e4f3e2;--gruen-mitte:#bfe0ba;
  --gold:#f2b822;--gold-dunkel:#b9820a;--rot:#d93a3a;--himmel:#5bb3ea;--himmel-hell:#e6f4fd;
  --grund:#f5f9f2;--flaeche:#fff;--text:#1f2a22;--leise:#5d6b60;--linie:#dfe8db;--akzent:#1d5c2a;
  --karte-schatten:0 4px 0 #d3e2cf;--rund:14px;
  --slot:#c6c6c6;--slotrand:#8b8b8b;
}
body.technik{--akzent:#2d5374;--gruen-hell:#e7eef5;--linie:#dde5ec;--karte-schatten:0 4px 0 #d3dde7}
*{box-sizing:border-box}
html{scroll-padding-top:110px;color-scheme:light}
body{margin:0;background:var(--grund);color:var(--text);
  font:16.5px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--gruen-dunkel);text-decoration-thickness:1px;text-underline-offset:2px}
body.technik main a{color:var(--akzent)}
a:hover{color:var(--gruen)}
img{max-width:100%}

/* Kopf: weiße Leiste, darunter die Wimpelkette */
header{position:sticky;top:0;z-index:10;background:var(--flaeche);box-shadow:0 1px 0 var(--linie)}
.leiste{display:flex;gap:18px;align-items:center;max-width:1400px;margin:0 auto;padding:10px 20px}
header .logo{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--text);flex:none}
header .logo img{width:40px;height:40px;image-rendering:pixelated;border-radius:8px;box-shadow:0 3px 0 var(--gruen-dunkel)}
header .logo span{font-weight:850;font-size:1.25rem;line-height:1.05;color:var(--gruen-dunkel)}
header .logo small{display:block;font-weight:600;font-size:.72rem;color:var(--leise);letter-spacing:.02em}
.reiter{display:flex;gap:4px;flex-wrap:wrap}
.reiter a{padding:7px 14px;border-radius:999px;text-decoration:none;color:var(--text);font-weight:650;font-size:.95rem}
.reiter a:hover{background:var(--gruen-hell);color:var(--gruen-dunkel)}
.reiter a.aktiv{background:var(--gruen);color:#fff;box-shadow:0 3px 0 var(--gruen-dunkel)}
body.technik .reiter a.aktiv{background:var(--akzent);box-shadow:0 3px 0 #1c3850}
#menue{display:none;background:none;border:0;font-size:1.5rem;cursor:pointer;color:var(--gruen-dunkel);padding:4px 8px}
.suchfeld{margin-left:auto;position:relative}
#suche{width:min(300px,40vw);padding:9px 14px 9px 36px;border:2px solid var(--linie);border-radius:999px;font:inherit;
  font-size:.95rem;background:var(--grund) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235d6b60' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l4 4'/%3E%3C/svg%3E") 13px 50%/15px no-repeat;color:var(--text)}
#suche:focus{outline:none;border-color:var(--gruen);background-color:#fff}
#treffer{position:absolute;right:0;top:46px;width:min(420px,calc(100vw - 32px));max-height:70vh;overflow:auto;background:#fff;
  border:2px solid var(--linie);border-radius:var(--rund);box-shadow:0 12px 30px #1d5c2a26;display:none}
#treffer a{display:block;padding:9px 14px;text-decoration:none;color:var(--text);border-bottom:1px solid var(--linie)}
#treffer a:hover,#treffer a.aktiv{background:var(--gruen-hell)}
#treffer small{color:var(--leise);display:block;font-size:.8rem}
.wimpel{height:26px;margin-bottom:-26px;position:relative;pointer-events:none;background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='26'%3E%3Cpath d='M0 2 Q60 8 120 2' stroke='%23b0a48a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M3 3 L27 4.3 L15 22Z' fill='%232f8f3e'/%3E%3Cpath d='M33 4.6 L57 5.2 L45 24Z' fill='%23ffffff' stroke='%23dfe8db'/%3E%3Cpath d='M63 5.2 L87 4.6 L75 24Z' fill='%23d93a3a'/%3E%3Cpath d='M93 4.3 L117 3 L105 22Z' fill='%23ffffff' stroke='%23dfe8db'/%3E%3C/svg%3E") 0 0/120px 26px repeat-x}

/* Gerüst */
.rahmen{display:flex;gap:28px;max-width:1400px;margin:0 auto;padding:36px 20px 50px}
#nav{width:250px;flex:none;position:sticky;top:96px;align-self:flex-start;max-height:calc(100vh - 110px);overflow:auto;
  padding:4px 6px 20px 0;font-size:.93rem}
#nav h3{font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;color:var(--leise);margin:18px 0 4px 10px}
#nav h3:first-child{margin-top:0}
#nav a{display:block;padding:5px 10px;border-radius:8px;text-decoration:none;color:var(--text)}
#nav a:hover{background:var(--gruen-hell);color:var(--gruen-dunkel)}
#nav a.hier{background:var(--gruen-hell);color:var(--gruen-dunkel);font-weight:700}
#nav a.unter{padding-left:22px;color:var(--leise);font-size:.88rem}
main{flex:1;min-width:0;max-width:980px}
main>h1,.titelbild h1{font-size:2.3rem;line-height:1.15;margin:0 0 18px;font-weight:850;color:var(--gruen-tief);letter-spacing:-.01em}
body.technik main>h1{color:#1c3850}
.gruppe{margin:0 0 2px;font-size:.8rem;font-weight:750;text-transform:uppercase;letter-spacing:.08em;color:var(--gruen)}
body.technik .gruppe{color:var(--akzent)}
main h2{font-size:1.5rem;margin:2em 0 .5em;color:var(--gruen-tief);line-height:1.25}
main h2::before{content:"";display:inline-block;width:12px;height:12px;margin-right:10px;vertical-align:.12em;
  background:var(--gold);box-shadow:3px 3px 0 var(--gold-dunkel)}
body.technik main h2{color:#1c3850}
body.technik main h2::before{background:var(--akzent);box-shadow:3px 3px 0 #1c3850}
main h3{font-size:1.15rem;margin:1.6em 0 .4em;color:var(--gruen-dunkel)}
body.technik main h3{color:var(--akzent)}
main p,main li{max-width:72ch}

/* Titelbild über einer Seite */
.titelbild{position:relative;margin:0 0 26px;border-radius:20px;overflow:hidden;box-shadow:0 6px 0 var(--gruen-mitte)}
.titelbild img{display:block;width:100%;height:clamp(180px,26vw,300px);object-fit:cover;object-position:center 40%}
.titelbild>div{position:absolute;inset:auto 0 0 0;padding:60px 26px 18px;background:linear-gradient(transparent,#0d2a14d9)}
.titelbild h1{color:#fff;margin:0;text-shadow:0 2px 0 #0d2a14}
.titelbild .gruppe{color:var(--gold)}

/* Inhalte */
table{border-collapse:separate;border-spacing:0;width:100%;display:block;overflow-x:auto;margin:1.2em 0;
  border:2px solid var(--linie);border-radius:var(--rund);background:#fff}
th,td{padding:8px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--linie)}
th{background:var(--gruen-hell);color:var(--gruen-tief);font-weight:750;font-size:.93rem}
tr:last-child td{border-bottom:0}
code{background:var(--gruen-hell);border-radius:6px;padding:1px 6px;font-size:.88em;color:var(--gruen-tief)}
body.technik code{color:#1c3850}
pre{background:#fff;border:2px solid var(--linie);border-radius:var(--rund);padding:12px 16px;overflow:auto}
pre code{background:none;padding:0}
blockquote,.hinweis{margin:1.2em 0;padding:12px 16px;border-radius:var(--rund);background:var(--himmel-hell);border:2px solid #c9e5f8}
blockquote p{margin:.3em 0}
.hinweis{font-size:.95rem}
.leise{color:var(--leise)}
hr{border:0;height:2px;background:var(--linie);margin:2em 0}
details.technik{margin-top:2em;padding:10px 16px;border:2px dashed var(--linie);border-radius:var(--rund);color:var(--leise);font-size:.92rem}
details summary{cursor:pointer;font-weight:650}
ul.spalten{columns:2 260px}
footer{text-align:center;color:#e9f5e7;font-size:.86rem;padding:28px 16px 34px;background:var(--gruen-dunkel);
  border-top:6px solid var(--gruen)}
footer p{margin:.2em 0}

/* Startseite */
.held{position:relative;border-radius:24px;overflow:hidden;margin:0 0 30px;box-shadow:0 6px 0 var(--gruen-mitte);background:var(--gruen-tief)}
.held-bild{display:block;width:100%;height:clamp(300px,42vw,470px);object-fit:cover}
.held-text{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:30px 34px;
  background:linear-gradient(90deg,#0d2a14e6 0%,#0d2a14a6 38%,transparent 72%),linear-gradient(transparent 55%,#0d2a1499);color:#fff}
.held-text>*{max-width:520px}
.held .gruss{margin:0;font-weight:850;color:var(--gold);font-size:1.1rem;letter-spacing:.06em;text-transform:uppercase}
.held h1{margin:.1em 0 .25em;font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.08;font-weight:900;color:#fff;text-shadow:0 2px 0 #0d2a14}
.held p{margin:.2em 0 .6em;font-size:1.08rem}
.knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px!important}
.knopf{display:inline-block;padding:10px 20px;border-radius:12px;background:var(--gold);color:#3a2a00!important;font-weight:800;
  text-decoration:none;box-shadow:0 4px 0 var(--gold-dunkel)}
.knopf:hover{transform:translateY(-1px);box-shadow:0 5px 0 var(--gold-dunkel)}
.knopf.hell{background:#fff;color:var(--gruen-tief)!important;box-shadow:0 4px 0 #b8cdb3}
.knopf.gross{padding:14px 26px;font-size:1.12rem}
.download{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin:0 0 30px;
  padding:20px 24px;border-radius:20px;background:linear-gradient(135deg,var(--gruen-tief),var(--gruen-dunkel));color:#fff;
  box-shadow:0 5px 0 #0d2a14}
.download h2{margin:0 0 .2em;color:#fff;border:0}
.download-text{flex:1 1 320px}
.download-text p{margin:0}
.download .knoepfe{margin:0!important}
.download-klein{flex-basis:100%;margin:0;font-size:.9rem;opacity:.9}
.download-klein a{color:#fff}

/* Karten der Ratgeber */
.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin:14px 0 10px}
.karte{display:flex;flex-direction:column;background:#fff;border:2px solid var(--linie);border-radius:18px;overflow:hidden;
  text-decoration:none;color:var(--text);box-shadow:var(--karte-schatten);transition:transform .12s,box-shadow .12s}
.karte:hover{transform:translateY(-3px);box-shadow:0 7px 0 var(--gruen-mitte);color:var(--text)}
.karte img,.karte .ersatz{display:block;width:100%;height:140px;object-fit:cover}
.karte .ersatz{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--himmel-hell),var(--gruen-hell))}
.karte .ersatz .sym{width:64px;height:64px;filter:drop-shadow(0 4px 0 #0002)}
.karte .text{padding:12px 16px 16px}
.karte b{display:block;font-size:1.08rem;color:var(--gruen-tief);margin-bottom:4px}
.karte p{margin:0;font-size:.9rem;color:var(--leise);line-height:1.45}
.neu-kasten{margin:30px 0;padding:18px 22px;border-radius:18px;background:linear-gradient(135deg,#fff8e1,#fff);
  border:2px solid #f6dc8f;box-shadow:0 4px 0 #f0d47c}
.neu-kasten h2{margin-top:0}

/* Schilder (Nachschlagen) */
.schilder{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:12px 0}
.schild{display:flex;gap:12px;align-items:center;padding:12px 14px;text-decoration:none;color:var(--text);background:#fff;
  border:2px solid var(--linie);border-radius:var(--rund);box-shadow:var(--karte-schatten)}
.schild:hover{border-color:var(--gruen-mitte);transform:translateY(-2px)}
.schild b{display:block;color:var(--gruen-tief)}
body.technik .schild b{color:#1c3850}
.schild small{display:block;color:var(--leise);font-size:.84rem;line-height:1.3}
.schild .sym{background:var(--gruen-hell);border-radius:10px;padding:4px}
.zahlen{display:flex;flex-wrap:wrap;gap:12px;padding:0;list-style:none;margin:24px 0}
.zahlen li{flex:1 1 130px;background:#fff;border:2px solid var(--linie);border-radius:var(--rund);padding:12px 16px;text-align:center}
.zahlen b{font-size:1.8rem;color:var(--gruen);display:block;font-weight:900;line-height:1.1}

/* Neuigkeiten */
.version{background:#fff;border:2px solid var(--linie);border-radius:18px;padding:6px 22px 16px;margin:18px 0;box-shadow:var(--karte-schatten)}
.version h2{font-size:1.15rem;color:var(--leise);font-weight:650}
.version h2::before{display:none}
.version .kurz{font-size:1.04rem}
.version li{margin:.35em 0;font-size:.95rem}
.marke{display:inline-block;padding:1px 10px;border-radius:999px;background:var(--gruen);color:#fff;font-weight:800;font-size:.85rem}
.marke.hell{background:var(--gruen-hell);color:var(--gruen-tief)}
.version .marke{font-size:1rem;margin-right:6px}

/* Gegenstände */
.sym{width:32px;height:32px;image-rendering:pixelated;object-fit:cover;object-position:top;vertical-align:middle;flex:none}
.sym.gross{width:48px;height:48px}
.sym.leer{display:inline-flex;align-items:center;justify-content:center;background:var(--gruen-mitte);color:var(--gruen-tief);font-weight:800;border-radius:8px}
.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.kachel{display:flex;gap:8px;align-items:center;padding:7px 9px;border:2px solid var(--linie);border-radius:12px;background:#fff;
  text-decoration:none;color:var(--text);font-size:.9rem;line-height:1.25}
.kachel:hover{border-color:var(--gruen-mitte);background:var(--gruen-hell)}
h2 small{color:var(--leise);font-weight:500}
.kopf{display:flex;gap:18px;align-items:flex-start;padding:16px;background:#fff;border:2px solid var(--linie);border-radius:18px;box-shadow:var(--karte-schatten)}
.kopf .sym{width:80px;height:80px;padding:6px;background:var(--slot);border:3px solid var(--slotrand);border-radius:6px}
.meta{margin:0 0 6px}
.tooltip{margin:.4em 0;color:var(--leise);font-style:italic}
.dinge{columns:2 220px;padding-left:0;list-style:none}
.ding{display:inline-flex;gap:6px;align-items:center;text-decoration:none}

/* Rezepte wie die Werkbank */
.rezepte{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.rezept{display:grid;grid-template-columns:auto auto auto;align-items:center;gap:10px;margin:8px 0;padding:10px;background:#c6c6c6;color:#222;
  border:3px solid;border-color:#fff #555 #555 #fff;border-radius:4px;width:fit-content;max-width:100%}
.rezept figcaption{grid-column:1/-1;font-size:.88rem}
.rezept small{color:#444}
.raster{display:grid;grid-template-columns:repeat(3,40px);gap:2px}
.slot{width:40px;height:40px;background:#8b8b8b;border:2px solid;border-color:#373737 #fff #fff #373737;display:flex;align-items:center;justify-content:center;position:relative}
.slot .sym{width:32px;height:32px;font-size:.8rem}
.slot .sym.leer{background:#a9a9a9;color:#333;border-radius:0}
.slot.ergebnis{width:56px;height:56px}.slot.ergebnis .sym{width:48px;height:48px}
.anzahl{position:absolute;right:2px;bottom:0;color:#fff;text-shadow:2px 2px 0 #3f3f3f;font-weight:800}
.pfeil{font-size:1.8rem;color:#555;font-weight:900}
.sprung{line-height:2.2}
.sprung a{white-space:nowrap;display:inline-block;padding:0 10px;margin:2px;border-radius:999px;background:var(--gruen-hell);text-decoration:none}
audio{height:32px;max-width:100%;margin:2px 0}

@media (max-width:1100px){.reiter a{padding:6px 10px;font-size:.9rem}}
@media (max-width:900px){
  #menue{display:block}
  .reiter{display:none}
  header .logo small{display:none}
  #nav{display:none;position:fixed;inset:64px 0 0 0;width:auto;max-height:none;background:var(--grund);z-index:9;padding:20px}
  #nav.offen{display:block}
  .rahmen{padding:30px 16px 40px}
  #suche{width:34vw;padding-right:8px}
  main>h1,.titelbild h1{font-size:1.8rem}
  header .logo span{font-size:1.05rem}
  .leiste{gap:10px;padding:10px 12px}
  .held-text{padding:20px;background:linear-gradient(transparent 10%,#0d2a14e6 70%)}
  .held-bild{height:420px}
}

/* Bug-Formular (melden.html) */
.meldung{display:grid;gap:14px;max-width:760px}
.meldung label{display:grid;gap:4px;font-weight:700}
.meldung label small{font-weight:400;color:var(--leise)}
.meldung input,.meldung textarea,.meldung select{font:inherit;padding:9px 12px;border:2px solid var(--linie);border-radius:10px;background:var(--flaeche);color:var(--text);width:100%}
.meldung input:focus,.meldung textarea:focus,.meldung select:focus{outline:none;border-color:var(--gruen-mitte)}
.meldung input[type=file]{padding:7px}
.meldung-zeile{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.meldung .topf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.meldung-vorschau{display:flex;flex-wrap:wrap;gap:10px}
.meldung-vorschau:empty{display:none}
.meldung-vorschau figure{position:relative;margin:0}
.meldung-vorschau img{width:140px;height:90px;object-fit:cover;border-radius:8px;border:2px solid var(--linie)}
.meldung-vorschau button{position:absolute;top:4px;right:4px;border:0;border-radius:50%;width:24px;height:24px;background:#fff;cursor:pointer}
.meldung-status{font-weight:700}
.meldung-status.ok{color:var(--gruen-dunkel)}
.meldung-status.fehler{color:var(--rot)}
.meldung-status.warnung{color:var(--gold-dunkel)}
.meldung button[disabled]{opacity:.6;cursor:wait}