/* Hauptquartier und Kramladen */
.hq-kopf{padding-bottom:1rem}
.hq-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1rem;margin-top:.6rem}
.hq-konto{display:inline-flex;align-items:center;gap:.4rem;margin:0 .6rem 0 0;font:700 1.25rem var(--titel)}
.hq-konto.gross{font-size:1.6rem}
.hq-beere-icon{width:auto;height:1.4em;vertical-align:middle;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}

/* ---------- Bühne und Raum ---------- */
.hq-buehne{padding:0 0 1.5rem}
.hq-scroll{max-width:1500px;margin:0 auto;overflow-x:auto;overflow-y:hidden;padding:0 .6rem .4rem;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.hq-raum{position:relative;width:100%;min-width:880px;max-width:max(880px,calc((100vh - 110px) * 1.6));aspect-ratio:16/10;margin:0 auto;border-radius:18px;overflow:hidden;
  box-shadow:0 0 0 6px #6b4a2b,0 0 0 9px #3d2a18,0 18px 40px var(--schatten);background:#7b5a3a;user-select:none;-webkit-user-select:none;container-type:inline-size}
.hq-wand{position:absolute;left:0;right:0;top:0;height:70%;background:#9a8a6a center/cover no-repeat}
.hq-tint{position:absolute;inset:0;mix-blend-mode:multiply;opacity:.62;pointer-events:none}
.hq-wand::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22px;background:linear-gradient(transparent,rgba(40,25,10,.35))}
.hq-boden{position:absolute;left:0;right:0;bottom:0;height:30%;background:#8a6a42 center/100% 100% no-repeat;box-shadow:inset 0 14px 18px rgba(40,25,10,.35)}
.hq-boden::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:linear-gradient(#5a3e22,#7a5634);box-shadow:0 2px 2px rgba(0,0,0,.25)}
.hq-dinge{position:absolute;inset:0}
.hq-ding{position:absolute;display:block;padding:0;margin:0;border:0;background:none;cursor:pointer;line-height:0;touch-action:manipulation;
  filter:drop-shadow(0 6px 5px rgba(40,25,10,.35));transition:filter .2s}
.hq-ding.hq-flach{filter:drop-shadow(0 2px 2px rgba(40,25,10,.25))}
.hq-ding img{width:100%;height:auto;pointer-events:none}
.hq-ding-innen{display:block}
.hq-ding-innen.gespiegelt{transform:scaleX(-1)}
.hq-ding:hover{filter:drop-shadow(0 6px 5px rgba(40,25,10,.35)) drop-shadow(0 0 6px rgba(255,236,170,.9))}
.hq-ding:focus-visible{outline:3px dashed #fff3c4;outline-offset:3px}
.hq-ding.wackelt{animation:hq-wackeln .6s ease-in-out}
@keyframes hq-wackeln{25%{transform:rotate(-4deg)}50%{transform:rotate(3deg)}75%{transform:rotate(-1.5deg)}}
.hq-raum.einrichten .hq-ding{cursor:grab;touch-action:none}
.hq-raum.einrichten .hq-ding.zieht{cursor:grabbing;filter:drop-shadow(0 16px 12px rgba(40,25,10,.45))}
.hq-raum.einrichten .hq-ding.gewaehlt{outline:3px dashed #fff3c4;outline-offset:4px;border-radius:6px}
.hq-raum.einrichten::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,250,230,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,250,230,.13) 1px,transparent 1px);background-size:2.5% 4%}

/* Fenster: Jahreszeit hinter den Scheiben */
.hq-blick{position:absolute;left:18%;right:18%;top:6%;bottom:20%;z-index:-1;overflow:hidden;line-height:0}
.hq-blick img{width:100%;height:100%;object-fit:cover}
.hq-f-fenster .hq-ding-innen{position:relative}
/* Regal: Fallbücher */
.hq-buecher{position:absolute;left:12%;right:12%;top:41.5%;height:19.5%;display:flex;align-items:flex-end;gap:2%;pointer-events:none}
.hq-buch{position:relative;width:13%;height:100%;background:center/100% 100% no-repeat;filter:drop-shadow(2px 0 1px rgba(0,0,0,.35))}
.hq-buch b{position:absolute;left:0;right:0;top:18%;text-align:center;font:700 3.4cqw/1 var(--hand);color:#3b2a1a}
.hq-buch:nth-child(2){transform:rotate(-2deg)}
/* Vitrine: Abzeichen in drei Fächern */
.hq-fach{position:absolute;left:13%;right:13%;height:14%;display:flex;align-items:flex-end;justify-content:center;gap:3%;pointer-events:none}
.hq-fach.f0{top:36%}.hq-fach.f1{top:54.5%}.hq-fach.f2{top:73%}
.hq-orden{width:22%;line-height:0}
.hq-orden .abz,.hq-orden .abz-bild{width:100%;height:auto;filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
/* Pinnwand im Raum (verkleinert) */
.hq-mini-brett{position:absolute;left:7%;right:7%;top:9%;bottom:12%;pointer-events:none;container-type:inline-size;overflow:hidden}
.hq-mini-brett .hq-karte{width:16%;min-height:18%;padding:1.2%;font-size:4.2cqw;line-height:1.05;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.hq-mini-brett .hq-karte svg{width:70%}
/* Ausweis im Rahmen */
.hq-mini-ausweis{position:absolute;left:16%;right:16%;top:17%;bottom:10%;display:flex;flex-direction:column;align-items:center;justify-content:space-around;pointer-events:none;text-align:center;color:#2b2118;line-height:1.05;container-type:inline-size}
.hq-mini-ausweis .hand{font-size:18cqw}
.hq-mini-ausweis img{width:62%;height:auto;border-radius:4px}
.hq-mini-ausweis small{font:700 9cqw var(--text);color:#5a4a3a}
.hq-wappen-leer{width:55%;aspect-ratio:6/7;border:2px solid #2b2118;border-radius:8% 8% 50% 50%/8% 8% 40% 40%;opacity:.5}
/* Truhe: Anzahl geöffneter Fächer */
.hq-zahl{position:absolute;right:6%;top:-6%;min-width:22%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:#c99a3b;color:#2b2118;font:700 9cqw var(--titel);box-shadow:0 2px 4px rgba(0,0,0,.4);pointer-events:none}
.hq-f-truhe{container-type:inline-size}

/* ---------- Werkzeug und Einrichten ---------- */
.hq-werkzeug{position:sticky;bottom:.6rem;z-index:30;max-width:760px;margin:.8rem auto 0;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .5rem;padding:.6rem .9rem}
.hq-werkzeug strong{margin-right:auto;font-family:var(--titel)}
.hq-knopf{min-height:44px;min-width:44px;padding:.3rem .8rem;border:2px solid #6b4a2b;border-radius:10px;background:#fffaf0;color:#2b2118;font:700 1rem var(--titel);cursor:pointer}
.hq-knopf:hover{background:#f3e6c8}.hq-knopf[disabled]{opacity:.45;cursor:not-allowed}
.hq-einrichten{margin-top:1rem}
.hq-felder{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.hq-felder fieldset{border:2px dashed rgba(90,74,58,.35);border-radius:12px;padding:.6rem .8rem}
.hq-felder legend{font:700 1.1rem var(--titel);padding:0 .3rem}
.hq-wahl{display:flex;flex-wrap:wrap;gap:.5rem}
.hq-muster{display:flex;flex-direction:column;align-items:center;gap:.25rem;width:96px;padding:.35rem;border:2px solid transparent;border-radius:10px;background:rgba(255,250,240,.7);font:.85rem/1.15 var(--text);color:#2b2118;cursor:pointer;text-align:center}
.hq-muster[aria-pressed="true"]{border-color:var(--holunder);background:#fff}
.hq-muster[disabled]{opacity:.55;cursor:not-allowed}
.hq-muster-bild{display:block;width:72px;height:48px;border-radius:6px;background:center/cover;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.hq-kiste{display:flex;flex-wrap:wrap;gap:.6rem;margin:.4rem 0 1rem}
.hq-kiste-ding{display:flex;flex-direction:column;align-items:center;gap:.2rem;width:112px;padding:.4rem;border:2px dashed rgba(90,74,58,.4);border-radius:12px;background:rgba(255,250,240,.75);font:.9rem/1.15 var(--text);color:#2b2118;cursor:pointer}
.hq-kiste-ding img{width:80px;height:80px;object-fit:contain}
.hq-kiste-ding:hover{background:#fff;border-style:solid}
.hq-schalter{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer}
.hq-schalter input{width:1.3rem;height:1.3rem}

/* ---------- Unter dem Raum ---------- */
.hq-zwei{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.hq-liste{padding-left:1.2rem}
.hq-liste li{margin:.25rem 0}
.hq-linkknopf{padding:0;border:0;background:none;font:700 1em var(--text);color:var(--holunder);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;cursor:pointer}
.hq-hinweis{margin-top:1rem}

/* ---------- Dialog ---------- */
.hq-dialog{border:0;padding:0;background:transparent;width:min(94vw,860px);max-height:92vh;color:#2b2118}
.hq-dialog::backdrop{background:rgba(40,28,16,.55);backdrop-filter:blur(2px)}
.hq-dialog-blatt{position:relative;padding:1.6rem 1.4rem 1.3rem;background:#fffaf0 url(../../img/papier.webp);border-radius:8px;box-shadow:0 20px 40px rgba(0,0,0,.35)}
.hq-dialog-blatt h2{color:var(--holunder);margin-right:2.5rem}
.hq-zu{position:absolute;right:.6rem;top:.5rem;width:48px;height:48px;border:0;border-radius:50%;background:rgba(90,74,58,.12);font:700 1.8rem/1 var(--titel);color:#2b2118;cursor:pointer}
.hq-zu:hover{background:rgba(90,74,58,.25)}
.hq-fallbuecher{list-style:none;padding:0;display:grid;gap:.8rem}
.hq-fallbuecher li{display:flex;gap:1rem;align-items:center;padding:.6rem;border-radius:10px;background:rgba(239,227,200,.55)}
.hq-fallbuecher li:not(.da){opacity:.8}
.hq-fb-ruecken{flex:0 0 34px;height:110px;background:center/100% 100% no-repeat}
.hq-fallbuecher li:not(.da) .hq-fb-ruecken{filter:grayscale(1) opacity(.45)}
.hq-ausweis-gross{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;padding:1rem;border:3px double #6b4a2b;border-radius:10px;background:#fbf3df}
.hq-ausweis-gross .gross{font-size:2rem;margin:0}

/* Pinnwand groß */
.hq-brett{position:relative;width:100%;aspect-ratio:1332/865;background:url(../../img/hq-pinnwand-800.webp) center/100% 100% no-repeat;filter:drop-shadow(0 8px 10px rgba(40,25,10,.3))}
.hq-brett-flaeche{position:absolute;left:7%;right:7%;top:9%;bottom:12%;touch-action:none;container-type:inline-size}
.hq-faeden{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.hq-faeden line{stroke:#b3241d;stroke-width:.5;vector-effect:non-scaling-stroke;stroke-width:2.5px}
.hq-karte{position:absolute;z-index:1;width:15%;min-height:16%;padding:.5%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2%;text-align:center;
  font:700 1.7cqw/1.1 var(--hand);color:#2b2118;background:#fffaf0;transform:rotate(var(--dreh,0deg));box-shadow:0 3px 6px rgba(0,0,0,.35);cursor:grab;touch-action:none;word-break:break-word}
.hq-karte::before{content:"";position:absolute;top:-4%;left:50%;width:9%;aspect-ratio:1;margin-left:-4.5%;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f07a6a,#a3322a 60%,#5a1510);box-shadow:0 1px 2px rgba(0,0,0,.4)}
.hq-karte.t-notiz{font-size:2.1cqw}
.hq-karte svg{width:62%;height:auto}
.hq-karte.gewaehlt{outline:3px dashed var(--holunder);outline-offset:3px}
.hq-brett-werkzeug{display:grid;gap:.6rem;margin-top:.9rem}
.hq-notiz-form{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.hq-notiz-form input{flex:1 1 220px;min-height:44px;padding:.4rem .7rem;border:2px solid #b9a37f;border-radius:10px;font:1.05rem var(--text);background:#fff}
.hq-brett-werkzeug select{min-height:44px;padding:.3rem .5rem;border:2px solid #b9a37f;border-radius:10px;font:1rem var(--text);background:#fff;max-width:100%}
.hq-brett-werkzeug .sticker{width:52px;height:60px;padding:2px;border:2px solid transparent;border-radius:10px;background:rgba(255,250,240,.8);cursor:pointer}
.hq-brett-werkzeug .sticker svg{width:100%;height:100%}

/* Beeren sammeln */
.hq-verdienen{padding-left:1.2rem}
.hq-verdienen li{margin:.35rem 0}
.hq-verdienen b{color:var(--holunder)}
.hq-verdienen li>b:first-child{display:inline-block;min-width:2.6rem}
.hq-haken{display:inline-block;margin-left:.3rem;padding:0 .5rem;border-radius:8px;background:#e3f0d2;color:#2d4a1c;font-size:.85rem}
.hq-serie{display:inline-flex;gap:4px;vertical-align:middle;margin:0 .3rem}
.hq-serie span{width:14px;height:14px;border-radius:50%;border:2px solid #3b2a5a;background:transparent}
.hq-serie span.an{background:#3b2a5a}
.hq-insta{margin:1rem 0}

/* ---------- Kramladen ---------- */
.laden-kopf{display:grid;gap:1.4rem;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center}
.laden-bild img{border-radius:14px;box-shadow:0 0 0 5px #6b4a2b,0 14px 30px var(--schatten)}
.laden-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.laden-filter button{min-height:44px;padding:.3rem 1rem;border:2px solid #6b4a2b;border-radius:999px;background:#fffaf0;color:#2b2118;font:700 1rem var(--titel);cursor:pointer}
.laden-filter button[aria-pressed="true"]{background:#5c346e;border-color:#3b2a5a;color:#fff}
.laden-raster{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.laden-ding{display:flex;flex-direction:column;gap:.3rem;padding:.8rem;border-radius:12px;background:#fffaf0 url(../../img/papier.webp);box-shadow:0 8px 18px var(--schatten);color:#2b2118}
.laden-ding:nth-child(4n+1){transform:rotate(-.5deg)}.laden-ding:nth-child(4n+3){transform:rotate(.4deg)}
.laden-ding .laden-bild-ding{display:grid;place-items:center;height:150px}
.laden-ding .laden-bild-ding img{max-height:140px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 5px 4px rgba(40,25,10,.3))}
.laden-ding.gesperrt .laden-bild-ding img{filter:grayscale(.85) opacity(.55)}
.laden-ding h3{margin:0;font-size:1.2rem}
.laden-ding p{margin:0;font-size:.98rem}
.laden-preis{display:flex;align-items:center;gap:.3rem;font:700 1.15rem var(--titel)}
.laden-ding .schild{margin-top:auto;align-self:flex-start}
.laden-hat{margin-top:auto;font-weight:700;color:#2d4a1c}
.laden-zu{margin-top:auto;font-size:.92rem;color:#5a4a3a}
.laden-muster{display:block;height:110px;border-radius:8px;background:center/cover;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
@media (max-width:760px){
  .hq-raum{min-width:760px}
  .laden-kopf{grid-template-columns:1fr}
  .hq-werkzeug{bottom:.3rem;margin-inline:.4rem}
  .hq-knopf{padding:.3rem .6rem}
}
@media (prefers-reduced-motion:reduce){.hq-ding.wackelt{animation:none}.hq-plus{transition:none}}
html.ruhig .hq-ding.wackelt{animation:none}
@media print{.hq-chip,.hq-plus{display:none!important}}