/* Forum, Galerie und Studio im Stil der Hauptseite. Die Gestaltung (Palette, Schriften, Kopf, Fuss, Knoepfe)
   kommt aus ../assets/stil-*.css, hier steht nur, was das Forum zusaetzlich braucht. */
.forum{padding:8px 0 56px}
.hero{padding:34px 0 8px}
.hero h1,.thread-title{position:relative;display:inline-block;margin:0 0 1rem;padding:.55em 1.5em .5em;font:400 clamp(1.8rem,6vw,3rem)/1.05 'Luckiest',sans-serif;color:var(--gold-l);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink);isolation:isolate}
.hero h1::before,.thread-title::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);clip-path:polygon(2% 38%,0 24%,7% 28%,9% 8%,16% 22%,22% 0,28% 20%,36% 6%,41% 24%,50% 2%,55% 22%,63% 4%,68% 24%,77% 8%,80% 26%,90% 12%,92% 32%,100% 28%,96% 48%,100% 62%,93% 66%,97% 88%,88% 78%,84% 100%,76% 80%,70% 98%,62% 78%,55% 100%,48% 80%,40% 96%,34% 78%,26% 98%,22% 76%,13% 90%,12% 70%,3% 76%,6% 56%)}
.thread-title{font-size:clamp(1.5rem,4.6vw,2.2rem)}
.hero .intro{max-width:62ch;margin:.4rem 0 1.1rem;padding:.8rem 1.1rem;background:var(--kohle);border:var(--kontur) solid var(--ink);border-left:10px solid var(--gold);border-radius:6px var(--r1) var(--r1) 6px;color:#fff;box-shadow:6px 6px 0 rgba(0,0,0,.45)}
.hero .btns{display:flex;flex-wrap:wrap;gap:14px}
.crumb{margin:22px 0 8px;padding:.25rem .9rem;background:var(--ink);color:var(--creme);border-left:7px solid var(--gold);border-radius:4px 12px 12px 4px;display:inline-block}
.crumb a{color:var(--gold-l)}

/* Knoepfe: wie im Spiel, hier ohne Keil */
.forum .btn{padding:.75rem 1.5rem .6rem;min-height:50px;justify-content:center}
.forum .btn.gold{--bg:var(--gold)}
.forum .btn.ghost{--bg:var(--kohle);--fg:var(--gold-l)}
.forum .btn.danger{--bg:var(--danger)}
.forum .btn.small{min-height:44px;padding:.4rem 1.1rem .3rem;font-size:1.05rem;border-bottom-width:8px}
.forum button.btn{font-family:'Luckiest',sans-serif}

/* Filter */
.chips{list-style:none;margin:6px 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips a,.chips .link{position:relative;isolation:isolate;display:inline-flex;align-items:center;min-height:44px;padding:.1rem 1.1rem;color:var(--creme);text-decoration:none;font:inherit;background:none;border:0}
.chips a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);border-bottom:5px solid var(--gold-d);border-radius:6px;transform:skewX(-8deg)}
.chips a:hover{color:#fff}
.chips a:hover::before{border-bottom-color:var(--gold)}
.chips a.on{color:var(--ink)}
.chips a.on::before{background:var(--gold);border-bottom-color:var(--ink)}
.chips.small a{min-height:44px;font-size:.95rem}

/* Themenliste: Zeilen mit Typfarbe, kein Kachelraster */
.threads{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.threads .row{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:center;padding:12px 16px;text-decoration:none;color:#fff;background:var(--kohle);border:var(--kontur) solid var(--ink);border-left-width:12px;border-radius:6px var(--r1) var(--r1) 6px;box-shadow:6px 6px 0 rgba(0,0,0,.45);transition:transform .12s}
.threads li:nth-child(even) .row{margin-left:clamp(0px,2vw,26px)}
.threads .row:hover{transform:translateX(4px);border-left-color:var(--gold)}
.threads .tt{font-size:1.15rem}
.threads .meta{grid-column:1/-1;color:var(--dim);font-size:.92rem}
.tag{display:inline-block;padding:.05rem .8rem;border-radius:4px;font-size:.85rem;color:var(--ink);background:var(--gold);transform:skewX(-8deg)}
.tag.bugs{background:var(--figure);color:#fff}
.tag.tips{background:var(--nature)}
.tag.collection{background:var(--object);color:#fff}
.tag.other{background:var(--element);color:#fff}
.closed{font-style:normal;font-size:.8rem;color:var(--creme);border:2px solid var(--dim);padding:0 8px;border-radius:10px}
.empty{padding:1rem 1.2rem;margin:16px 0;background:var(--kohle);border:var(--kontur) solid var(--ink);border-radius:var(--r1);color:var(--creme)}

/* Beitraege */
.post{margin:14px 0;padding:14px 18px;background:var(--kohle);border:var(--kontur) solid var(--ink);border-radius:var(--r1);box-shadow:6px 6px 0 rgba(0,0,0,.45)}
.post.dev{border-color:var(--gold);box-shadow:6px 6px 0 var(--gold-d)}
.post header{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin-bottom:6px}
.post time{color:var(--dim);font-size:.9rem}
.post .who{color:var(--gold-l)}
.badge{display:inline-block;background:var(--gold);color:var(--ink);border-radius:4px;padding:0 .6rem;font-size:.85rem;transform:skewX(-8deg)}
.badge.warn{background:var(--figure);color:#fff}
.txt{overflow-wrap:anywhere;color:#fff}
.rep{margin-top:6px;text-align:right}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 16px}
.inline{display:inline}
.link{background:none;border:0;color:var(--creme);font:inherit;font-size:.9rem;cursor:pointer;text-decoration:underline;min-height:44px;padding:0 .4rem}
.link:hover{color:var(--gold)}

/* Reaktionen */
.reacts{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 2px}
.react{display:inline}
.rbtn{font:inherit;display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:56px;padding:2px 12px 2px 8px;color:#fff;background:var(--ink);border:3px solid var(--ink);border-bottom-width:6px;border-radius:12px;cursor:pointer;transition:transform .12s}
.rbtn:hover{transform:translateY(-2px);border-bottom-color:var(--gold-d)}
.rbtn.on{background:#4a3410;border-color:var(--gold-d);border-bottom-color:var(--gold)}
.rbtn img{display:block}
.rbtn .n{min-width:.6em;font-size:.95rem;color:var(--gold-l)}
.rbtn[disabled]{opacity:.6}
.rbtn.pop img{animation:pop .35s ease-out}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.5) rotate(-8deg)}100%{transform:scale(1)}}
.actionbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;background:var(--kohle);border:var(--kontur) solid var(--ink);border-radius:var(--r1);padding:8px 14px;margin:0 0 14px}
.actionbar .reacts,.actionbar .rep{margin:0}

/* Formulare */
.card{margin:20px 0;padding:20px 22px;background:var(--kohle);border:var(--kontur) solid var(--ink);border-radius:var(--r2);box-shadow:8px 8px 0 rgba(0,0,0,.5)}
.card.narrow{max-width:460px;margin:40px auto}
.card h2,.forum h2{font:400 1.5rem/1.2 'Luckiest',sans-serif;color:var(--gold);-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;margin:18px 0 10px}
.card h2{margin-top:0}
.form{display:grid;gap:14px}
.form label,label{display:grid;gap:5px;color:var(--creme);font-size:.98rem}
input[type=text],input[type=password],select,textarea{font:inherit;font-size:1rem;color:#fff;background:#120c07;border:3px solid var(--tafel);border-radius:10px;padding:10px 12px;width:100%;min-height:46px}
input:focus,select:focus,textarea:focus{outline:4px solid var(--gold-l);outline-offset:1px;border-color:var(--gold)}
input[type=file]{color:var(--creme);padding:.5rem 0}
textarea{resize:vertical;min-height:130px}
small,.small{color:var(--dim);font-size:.88rem}
.rules{background:var(--ink);border-left:8px solid var(--gold);border-radius:4px 14px 14px 4px;padding:12px 16px;font-size:.95rem;color:var(--creme)}
.rules ul{margin:6px 0 8px 20px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.err{background:#4b1414;border:4px solid var(--figure);border-radius:10px;padding:10px 14px;margin-bottom:12px;color:#fff}
.okmsg{background:#12361d;border:4px solid var(--ok);border-radius:10px;padding:10px 14px;margin:12px 0;color:#fff}
.pager{display:flex;justify-content:center;gap:18px;margin:20px auto;align-items:center;width:max-content;max-width:100%;background:var(--kohle);border:var(--kontur) solid var(--ink);border-radius:var(--r1);padding:6px 18px}
.pager a{display:inline-flex;align-items:center;min-height:44px}

/* Galerie: versetztes Mauerwerk statt Raster */
.gallery{list-style:none;margin:10px 0;padding:0;columns:auto 230px;column-gap:18px}
.gallery li{break-inside:avoid;margin:0 0 20px}
.tile{display:block;text-decoration:none;color:#fff;background:var(--kohle);border:var(--kontur) solid var(--ink);border-radius:var(--r1);overflow:hidden;box-shadow:6px 6px 0 rgba(0,0,0,.5);transition:transform .15s}
.gallery li:nth-child(4n+1) .tile{transform:rotate(-1.4deg)}
.gallery li:nth-child(4n+2) .tile{transform:rotate(1.1deg) translateY(10px)}
.gallery li:nth-child(4n+3) .tile{transform:rotate(.7deg)}
.gallery li:nth-child(4n) .tile{transform:rotate(-1deg) translateY(6px)}
.tile:hover{transform:rotate(0) translateY(-4px)!important;border-color:var(--gold)}
.tile img{display:block;width:100%;height:auto;background:#120c07}
.tile .cap{display:grid;padding:8px 12px 10px}
.tile .cap span{color:var(--dim);font-size:.88rem}
.big{margin:0 0 14px;background:var(--ink);border:var(--kontur) solid var(--ink);border-radius:var(--r2);padding:10px;text-align:center;box-shadow:8px 8px 0 rgba(0,0,0,.5)}
.big img{max-width:100%;height:auto;max-height:78vh;display:block;margin:0 auto;border-radius:12px}
.big figcaption{margin-top:8px;color:var(--creme)}
.adm-img{max-width:240px;height:auto;border-radius:8px;display:block}

/* Studio */
.studio{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:20px;align-items:start;margin:10px 0 24px}
.stage{background:var(--ink);border:var(--kontur) solid var(--ink);border-radius:var(--r2);padding:10px;box-shadow:8px 8px 0 rgba(0,0,0,.5)}
#stage{display:block;width:100%;height:auto;aspect-ratio:1/1;border-radius:12px;touch-action:none;cursor:grab;background:#222}
#stage:focus-visible{outline:4px solid var(--gold-l)}
.stage .small{margin:.6rem .2rem 0}
.studio .panel{background:var(--kohle);border:var(--kontur) solid var(--ink);border-radius:var(--r2);padding:14px 16px;display:grid;gap:10px;box-shadow:8px 8px 0 rgba(0,0,0,.5)}
.studio .panel h2{font-size:1.15rem;margin:4px 0 0}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatch{width:46px;height:46px;border-radius:10px;border:4px solid var(--ink);cursor:pointer}
.swatch.on{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,196,20,.45)}
.palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px;max-height:220px;overflow:auto;padding:4px}
.pick{background:#120c07;border:3px solid var(--ink);border-radius:10px;padding:2px;cursor:pointer;min-height:48px}
.pick:hover,.pick:focus-visible{border-color:var(--gold)}
.pick img{display:block;width:100%;height:auto}
.tools{display:flex;flex-wrap:wrap;gap:6px}
.studio .actions{margin:2px 0 0}
@media(max-width:900px){.studio{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.rbtn.pop img{animation:none}.tile,.threads .row,.rbtn{transition:none}}