/* bv-redaktion — Gestaltung angelehnt an den herbalvapeclub-Piloten; Systemschriften, kein Fremdabruf. */
:root{color-scheme:dark;--bg:#191c20;--flaeche:#21262b;--linie:#353c42;--text:#e4e9e5;--leise:#aab5af;--gruen:#a5d780;--dunkelgruen:#243a2d;--rot:#f08a7a;
  font:16px/1.6 "Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text)}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:4px}
h1,h2,h3,p{margin-top:0}h1{font-size:2.1rem;line-height:1.15;letter-spacing:-.03em;margin-bottom:14px}
h2{font-size:1.35rem;line-height:1.3;margin-bottom:10px}h3{font-size:1.1rem;margin-bottom:6px}
p{color:var(--leise)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--gruen);outline-offset:3px}
.skip{position:fixed;top:-100px;left:16px;background:var(--gruen);color:#132117;padding:12px;z-index:20}.skip:focus{top:16px}
.gruen{color:var(--gruen)}
.marke{display:flex;align-items:center;gap:12px;font-size:1.2rem;font-weight:700}
.marke small{display:block;font-size:.7rem;font-weight:400;color:var(--leise)}
.marke-zeichen{font-size:1.5rem;font-style:italic;color:var(--gruen);border:1px solid #4b694b;border-radius:10px;padding:0 8px}
.seitenleiste{width:254px;position:fixed;inset:0 auto 0 0;background:#181f1a;border-right:1px solid var(--linie);display:flex;flex-direction:column;padding:28px 18px;gap:24px}
.projekt{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--linie);border-radius:12px}
.projekt small{display:block;color:var(--leise);font-size:.8rem;word-break:break-all}
.projekt-zeichen{width:36px;height:36px;border-radius:9px;background:var(--dunkelgruen);color:var(--gruen);display:grid;place-items:center;font-weight:700;flex:none}
nav{display:flex;flex-direction:column;gap:4px}
nav a{padding:9px 12px;border-radius:9px;color:var(--leise)}nav a:hover{background:#222b24;color:var(--text);text-decoration:none}
nav a span{display:inline-block;width:22px;color:var(--gruen)}
.unten{margin-top:auto;display:flex;flex-direction:column;gap:10px;font-size:.9rem;color:var(--leise)}
.rahmen{margin-left:254px;min-height:100vh}
.kopf{display:flex;justify-content:space-between;align-items:center;padding:18px 40px;border-bottom:1px solid var(--linie);color:var(--leise);font-size:.9rem}
.trenner{opacity:.5;margin:0 6px}
main{max-width:1080px;padding:36px 40px 80px;display:flex;flex-direction:column;gap:56px}
section{scroll-margin-top:24px}
.vorzeile{font-size:.75rem;letter-spacing:.14em;color:var(--gruen);font-weight:600;margin-bottom:6px;display:block}
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:18px}
.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:6px}
.karte.breit{margin-top:18px}
.karte.aktion:hover{border-color:#4b694b;text-decoration:none}
.knopf{display:inline-block;align-self:flex-start;margin-top:10px;background:var(--gruen);color:#132117;font-weight:700;border:0;border-radius:10px;padding:10px 18px;cursor:pointer;font:inherit;font-weight:700}
.knopf:hover{text-decoration:none;filter:brightness(1.07)}
.knopf:disabled{opacity:.45;cursor:not-allowed}
.knopf.zweit{background:transparent;color:var(--gruen);border:1px solid #4b694b}
.leise{background:none;border:0;color:var(--leise);text-align:left;padding:0;cursor:pointer;font:inherit}
.leise:hover{color:var(--text)}
.klein{font-size:.85rem;color:var(--leise)}
.liste{list-style:none;padding:0;margin:8px 0;display:flex;flex-direction:column;gap:6px}
.liste li{display:flex;justify-content:space-between;gap:16px;padding:10px 12px;border:1px solid var(--linie);border-radius:10px}
.liste li small{color:var(--leise);white-space:nowrap}
.liste li.leer{color:var(--leise);border-style:dashed}
label{font-weight:600;font-size:.9rem;margin-top:6px}
input,textarea{width:100%;background:#161a1e;border:1px solid var(--linie);border-radius:10px;color:var(--text);padding:10px 12px;font:inherit}
.meldung{padding:14px 18px;border-radius:12px;border:1px solid #4b694b;background:var(--dunkelgruen);color:var(--text);margin:0}
.meldung.fehler{border-color:#7a3a33;background:#3a2220}
.hinweis{color:var(--rot)}
.anmeldung{min-height:100vh;display:grid;place-items:center;padding:24px}
.anmeldung-karte{max-width:420px;background:var(--flaeche);border:1px solid var(--linie);border-radius:18px;padding:36px;display:flex;flex-direction:column;gap:8px}
.anmeldung-karte h1{margin-top:18px}
@media (max-width:820px){
  .seitenleiste{position:static;width:auto;border-right:0;border-bottom:1px solid var(--linie)}
  .rahmen{margin-left:0}.kopf{padding:14px 16px}main{padding:24px 16px 60px}
  .liste li{flex-direction:column;gap:2px}
}