/* Einfaches, modernes Design im "Gaming"-Look (dunkel).
   Alle Farben stehen zentral in theme.css (wird in header.php
   VOR dieser Datei geladen). Hier nur Layout + Nutzung der
   Farb-Variablen via var(--...). */

*{box-sizing:border-box}

/* UI-Skalierung (Einstellungen): skaliert alle rem-basierten Groessen ueber die Wurzel-Schrift. */
:root{font-size:16px}
:root[data-scale="small"]{font-size:14px}
:root[data-scale="large"]{font-size:18.5px}

body{
  margin:0;
  font-family:system-ui,"Segoe UI",Roboto,sans-serif;
  background:radial-gradient(1200px 600px at 20% -10%,var(--glow),transparent),var(--bg);
  color:var(--text);
  min-height:100vh;
}

.topbar{
  display:flex; align-items:center; gap:1rem;
  padding:1rem 1.5rem;
  border-bottom:1px solid var(--border);
  background:var(--topbar-bg);
  backdrop-filter:blur(6px);
}
.brand{font-weight:800; font-size:1.25rem; text-decoration:none; color:var(--text); letter-spacing:.5px}
.brand-slogan{font-weight:500; font-size:.72rem; color:var(--muted); letter-spacing:.02em; margin-left:.3rem; white-space:nowrap}
@media (max-width:600px){ .brand-slogan{display:none} }
.topbar nav{margin-left:auto; display:flex; align-items:center; gap:1rem}
.topbar nav a{color:var(--muted); text-decoration:none}
.topbar nav a:hover{color:var(--text)}
.hello{color:var(--muted); font-size:.9rem}
.nav-toggle{display:none; margin-left:auto; background:transparent; border:1px solid var(--border);
  color:var(--text); font-size:1.35rem; line-height:1; padding:.3rem .6rem; border-radius:.5rem; cursor:pointer}
@media (max-width:800px){
  .topbar{flex-wrap:wrap; padding:.8rem 1rem}
  .nav-toggle{display:inline-flex; align-items:center}
  .topbar nav{order:3; flex-basis:100%; margin-left:0; margin-top:.4rem; gap:0;
    display:none; flex-direction:column; align-items:stretch}
  .topbar nav.open{display:flex}
  .topbar nav a, .topbar nav .hello{padding:.7rem .2rem; border-top:1px solid var(--border)}
  .topbar nav .btn{margin-top:.5rem}
}

.btn,button{
  background:var(--brand-gradient);
  color:var(--on-brand); border:none;
  padding:.6rem 1rem; border-radius:.6rem;
  font-weight:600; cursor:pointer; font-size:1rem;
  text-decoration:none; display:inline-block;
}
.btn:hover,button:hover{opacity:.9}

.container{max-width:760px; margin:2.5rem auto; padding:0 1.5rem}
h1{margin-top:0}
a{color:var(--brand2)}

.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:1rem;
  padding:1.5rem; margin:1rem 0;
  box-shadow:var(--shadow);
}

form.card label{display:block; margin-bottom:1rem; color:var(--muted); font-size:.9rem}
form.card input{
  width:100%; margin-top:.35rem;
  padding:.7rem .8rem; border-radius:.6rem;
  border:1px solid var(--border);
  background:var(--panel2); color:var(--text); font-size:1rem;
}
form.card input:focus{outline:2px solid var(--brand)}

.error{background:var(--err-bg); border:1px solid var(--err); color:var(--err-text); padding:.7rem 1rem; border-radius:.6rem}
.success{background:var(--ok-bg); border:1px solid var(--ok); color:var(--ok-text); padding:.7rem 1rem; border-radius:.6rem}

.footer{max-width:760px; margin:2rem auto; padding:1rem 1.5rem; color:var(--muted); border-top:1px solid var(--border)}

/* ===== Bausteine fuer Spiele-/Feature-Seiten ===== */
.small{font-size:.85rem}
.muted{color:var(--muted)}

.game-head{display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap}
.game-cover{width:80px; height:80px; border-radius:1rem; background:var(--cover);
  display:grid; place-items:center; font-size:2.2rem; flex:0 0 auto; overflow:hidden}
.game-cover img{width:100%; height:100%; object-fit:cover; display:block}
.chips{display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.5rem}
.chip{display:inline-flex; align-items:center; font-size:.78rem; font-weight:600;
  padding:.22rem .6rem; border-radius:99px; background:var(--panel2); color:var(--muted); border:1px solid var(--border)}

.section-h{display:flex; align-items:center; gap:.6rem; margin:1.3rem 0 .3rem;
  color:var(--brand2); font-size:.9rem; font-weight:600}
.section-h .line{flex:1; height:1px; background:var(--border)}

.frow{display:grid; grid-template-columns:1fr 210px; gap:1rem; align-items:center;
  padding:.85rem 0; border-bottom:1px solid var(--border)}
.frow:last-child{border-bottom:0}
.fmeta h4{margin:0 0 .35rem}

.meter{height:9px; background:var(--panel2); border-radius:99px; overflow:hidden; margin:.15rem 0 .35rem}
.meter i{display:block; height:100%; background:var(--brand-gradient); border-radius:99px}

.rate{display:flex; align-items:center; gap:.5rem; margin:0}
.rate input[type=range]{flex:1; min-width:80px; accent-color:var(--brand)}
.rng-val{min-width:2.2rem; text-align:right; font-weight:800; color:var(--brand2); font-variant-numeric:tabular-nums}
.rate button{padding:.35rem .6rem; border-radius:.5rem; font-size:.95rem; line-height:1}

.ring{position:relative; width:76px; height:76px; border-radius:50%; flex:0 0 auto;
  background:conic-gradient(var(--brand2), var(--brand) calc(var(--v,50)*1%), var(--panel2) 0)}
.ring>span{position:absolute; inset:9px; border-radius:50%; background:var(--panel);
  display:grid; place-items:center; font-weight:800; font-size:1.15rem}
.ring.lg{width:110px; height:110px}
.ring.lg>span{inset:12px; font-size:1.8rem}

.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1rem; margin-top:1rem}
.gamecard{background:var(--panel); border:1px solid var(--border); border-radius:1rem;
  overflow:hidden; text-decoration:none; color:var(--text); display:block}
.gamecard:hover{border-color:var(--brand)}
.gamecard .cover{height:90px; background:var(--cover); display:grid; place-items:center; font-size:1.9rem}
.gamecard .body{padding:.8rem 1rem}

@media(max-width:640px){.frow{grid-template-columns:1fr}}

/* Feature-Ansicht: Kategorie-Label, Rangliste, verlinkte Chips */
.tag-cat{font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--brand2); font-weight:700}
.rank{display:flex; align-items:center; gap:.8rem; padding:.55rem 0; border-bottom:1px solid var(--border)}
.rank:last-child{border-bottom:0}
.rank .no{flex:0 0 auto; width:1.6rem; text-align:center; font-weight:800; color:var(--brand2); font-size:1.05rem}
a.chip{text-decoration:none}
a.chip:hover{border-color:var(--brand); color:var(--text)}

/* Wichtigkeits-Stufen (essenziell / empfohlen / optional) */
.chip.ess{color:var(--bg); background:var(--brand2); border-color:transparent; font-weight:700}
.chip.rec{color:var(--on-brand); background:var(--brand); border-color:transparent}
.chip.opt{color:var(--muted)}
.meter.ess i{background:var(--brand2)}
.meter.opt i{background:var(--muted)}

/* Entwickler-Checkliste */
select{padding:.5rem .7rem; border-radius:.6rem; border:1px solid var(--border); background:var(--panel2); color:var(--text); font-size:1rem}
.check{display:flex; align-items:flex-start; gap:.7rem; padding:.6rem 0; border-bottom:1px solid var(--border); cursor:pointer}
.check:last-child{border-bottom:0}
.check input[type=checkbox]{margin-top:.2rem; width:18px; height:18px; accent-color:var(--brand); flex:0 0 auto}
.check .cbody{flex:1; min-width:0}

/* Admin-Bereich */
.btn.ghost{background:transparent; border:1px solid var(--border); color:var(--text)}
textarea{width:100%; margin-top:.35rem; padding:.7rem .8rem; border-radius:.6rem; border:1px solid var(--border); background:var(--panel2); color:var(--text); font-size:1rem; font-family:inherit; min-height:80px}
.checkgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.35rem 1rem; margin:.4rem 0 1.2rem}
.checkgrid label{display:flex; align-items:center; gap:.45rem; margin:0; color:var(--text); font-size:.9rem; cursor:pointer}
.checkgrid input[type=checkbox]{width:auto; accent-color:var(--brand)}
table.adminlist{width:100%; border-collapse:collapse}
table.adminlist th, table.adminlist td{text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--border); vertical-align:middle}
table.adminlist th{font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
.badge{display:inline-block; font-size:.72rem; padding:.15rem .5rem; border-radius:99px; border:1px solid var(--border); color:var(--muted)}
.badge.pub{color:var(--ok); border-color:var(--ok)}
.badge.draft{color:var(--warn); border-color:var(--warn)}

/* Vorschlags-System */
.suggestion{border-bottom:1px solid var(--border); padding:.9rem 0}
.suggestion:last-child{border-bottom:0}
.vote{display:flex; gap:.5rem; align-items:center; margin:0}
.votebtn{background:var(--panel2); border:1px solid var(--border); color:var(--text); padding:.35rem .7rem; border-radius:.6rem; cursor:pointer; font-weight:600; font-size:.9rem}
.votebtn.for.active{background:var(--ok); color:var(--bg); border-color:transparent}
.votebtn.against.active{background:var(--err); color:var(--bg); border-color:transparent}

/* 2D-Bewertung (Notwendigkeit × Begehrtheit) */
.padgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:1.2rem; margin-top:.8rem}
.padblock h4{margin:.2rem 0}
.padgroups{margin-top:.6rem}
.padgroup{border:1px solid var(--border); border-radius:.5rem; margin:.4rem 0; background:var(--panel2)}
.padgroup > summary{cursor:pointer; padding:.5rem .7rem; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; list-style:none}
.padgroup > summary::-webkit-details-marker{display:none}
.padgroup > summary::before{content:"\25B8"; color:var(--muted)}
.padgroup[open] > summary::before{content:"\25BE"}
.padgroup .pg-name{font-weight:600}
.padgroup .pg-comm{margin-left:auto}
.padgroup .padblock{padding:.1rem .7rem .7rem}
.pad{position:relative; width:100%; max-width:200px; aspect-ratio:1/1; margin:.3rem 0;
  background:var(--panel2); border:1px solid var(--border); border-radius:.5rem;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-position:center; background-size:50% 50%; touch-action:none; cursor:crosshair}
.pad .dot{position:absolute; width:14px; height:14px; border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 2px var(--panel)}
.pad .dot.avg{background:var(--muted)}
.pad .dot.me{width:16px; height:16px; background:var(--brand-gradient); cursor:grab}
.axis-x{font-size:.68rem; color:var(--muted); text-align:center}
.axis-y{position:absolute; left:3px; top:3px; font-size:.62rem; color:var(--muted)}
.padwrap input[type=range]{width:100%; accent-color:var(--brand); margin-top:.1rem}
.padwrap label{display:block; margin:.2rem 0}
.padwrap button{margin-top:.4rem}

/* Quadranten-Diagramm (Genre-Seite) */
.quadrant{position:relative; width:100%; max-width:460px; aspect-ratio:1/1; margin:.6rem 0;
  background:var(--panel2); border:1px solid var(--border); border-radius:.6rem;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-position:center; background-size:50% 50%}
.quadrant .qdot{position:absolute; width:11px; height:11px; border-radius:50%; background:var(--brand-gradient); transform:translate(-50%,-50%); box-shadow:0 0 0 2px var(--panel)}
.quadrant .qlabel{position:absolute; transform:translate(-50%,-170%); font-size:.62rem; color:var(--text); white-space:nowrap; pointer-events:none}
.qnote{font-size:.68rem; color:var(--muted)}

/* Genre-Seite: Landkarte-Layout, Filter, Mini-Pads, Listen */
.map-row{display:flex; gap:1.2rem; flex-wrap:wrap; align-items:flex-start}
.map-col{flex:1; min-width:260px}
.filter-col{flex:0 0 180px; display:flex; flex-direction:column; gap:.3rem}
.filter-item{display:flex; align-items:center; gap:.4rem; color:var(--text); font-size:.85rem; cursor:pointer; margin:0}
.filter-item input{width:auto; accent-color:var(--brand)}
.quadrant [data-cat][hidden]{display:none !important}

details{border-top:1px solid var(--border); padding:.4rem 0}
details > summary{cursor:pointer; font-weight:600; padding:.3rem 0}
details.card{border-top:none}
details.card > summary{font-size:1.05rem}

.minigrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.9rem; margin:.6rem 0}
.miniblock{font-size:.8rem}
.minipad{position:relative; width:74px; height:74px; margin:.25rem 0;
  background:var(--panel2); border:1px solid var(--border); border-radius:.4rem;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-position:center; background-size:50% 50%}
.minipad .dot{position:absolute; width:10px; height:10px; border-radius:50%; background:var(--brand-gradient); transform:translate(-50%,-50%); box-shadow:0 0 0 2px var(--panel)}

.split{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.listrow{display:flex; justify-content:space-between; align-items:center; gap:.6rem; padding:.45rem 0; border-bottom:1px solid var(--border)}
.listrow:last-child{border-bottom:0}
@media(max-width:640px){.split{grid-template-columns:1fr}}

/* Spiel-Seite: Genre-Fit-Balken */
.fitline{display:flex; align-items:center; gap:.6rem; margin:.25rem 0}
.fitline > span:first-child{min-width:5.5rem}
.fitline .meter{flex:1; max-width:300px}

/* Spiel-Landkarte (SVG): Umsetzung vs. Genre-Schnitt */
.gmap{position:relative; width:100%; max-width:460px; aspect-ratio:1/1; margin:.4rem 0;
  background:var(--panel2); border:1px solid var(--border); border-radius:.6rem}
.gamemap-svg{width:100%; height:100%; display:block}
.gamemap-svg .mgrid{stroke:var(--border); stroke-width:.4}
.gamemap-svg .gring{fill:none; stroke:var(--muted); stroke-width:.7}
.gamemap-svg .mline{stroke:var(--muted); stroke-width:.5; opacity:.75}
.gamemap-svg .marrow{fill:var(--muted)}
.gamemap-svg .mdot.up{fill:var(--ok)}
.gamemap-svg .mdot.down{fill:var(--err)}
.gamemap-svg .mdot.flat{fill:var(--muted)}
.gamemap-svg .mstar{fill:var(--star); font-size:6px; text-anchor:middle; dominant-baseline:central}
.gamemap-svg .mlabel{fill:var(--text); font-size:2.6px; text-anchor:middle}
.gamemap-svg .gring.missing{stroke-dasharray:1.6 1.6; opacity:.55}
.gamemap-svg .mlabel.missing{fill:var(--muted); opacity:.7}

/* Umsetzungs-Seite (Implementierung eines Features durch ein Spiel) */
.impl-game{font-size:1.5rem; font-weight:800; color:var(--muted); line-height:1.2}
.impl-game a{color:var(--brand2)}
img.impl-shot{width:100%; max-width:640px; display:block; border:1px solid var(--border); border-radius:.7rem; margin:.6rem 0}
.impl-list{margin:.5rem 0 0; padding-left:1.2rem}
.impl-list li{margin:.35rem 0}
.shot-thumb{max-width:220px; max-height:130px; border:1px solid var(--border); border-radius:.5rem; display:block}
.change-row{text-align:right; margin:.4rem 0}
.btn.mini{padding:.3rem .7rem; font-size:.82rem}
.propose-inline{margin:.2rem 0 .9rem; padding:.7rem; background:var(--panel2); border:1px solid var(--border); border-radius:.6rem}
.propose-inline textarea{width:100%; min-height:56px; margin-bottom:.5rem}
.propose-inline input[type=url]{width:100%; margin-bottom:.5rem}
.other-proposals{border-top:1px solid var(--border); margin-top:.3rem}
.other-proposals > summary{cursor:pointer; font-size:.85rem; color:var(--brand2); padding:.4rem 0; font-weight:600}
.prop-meta{display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin-top:.3rem}

/* Seitenkopf mit Aktion rechts (z. B. "Neues Genre vorschlagen") */
.page-head{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap}

/* Blätter-Navigation (Spiele-Suche) */
.pagination{display:flex; gap:1rem; align-items:center; justify-content:center; margin-top:1.2rem}
.filterbar input[type=search]{width:100%}

/* Kompakte Spiele-Suche: Feld + Detailsuche-Toggle, Genre-Auswahl aufklappbar darunter */
.game-search{padding:1rem 1.2rem}
.game-search .search-row{display:flex; gap:.6rem; align-items:center}
.game-search .search-row input[type=search]{flex:1; min-width:0}
.game-search .search-row .btn{white-space:nowrap}
.detail-search{margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--border)}
.genre-filter-inline{display:flex; flex-wrap:wrap; gap:.35rem 1rem; align-items:center; margin-bottom:.8rem}

/* Filterleiste (Feature-Uebersicht) */
.filterbar{display:flex; gap:2rem; flex-wrap:wrap}
.filter-group{display:flex; flex-direction:column; gap:.35rem; min-width:180px}
.filter-chips{display:flex; flex-direction:column; gap:.25rem; max-height:220px; overflow-y:auto; overflow-x:hidden}
.fchip[hidden]{display:none !important}
.fgroup[hidden]{display:none !important}

/* Inline-"Vorschlagen"-Panel (Genre- & Feature-Seite): Auswahl vorhandener Eintraege */
.group-head{display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem}
.genre-group{border-top:1px solid var(--border); padding:.5rem 0}
.genre-group:first-of-type{border-top:0}
.grp-details{flex:1; min-width:0; border-top:0; padding:0}
.grp-details > summary{cursor:pointer; font-weight:600}
.propose-panel{margin:.3rem 0 .9rem; padding:.7rem; background:var(--panel2); border:1px solid var(--border); border-radius:.6rem}
.check-list{display:flex; flex-direction:column; gap:.3rem; max-height:220px; overflow:auto; margin:.3rem 0 .6rem}
.check-list label{display:flex; align-items:center; gap:.4rem; font-size:.88rem; cursor:pointer}
.check-list input{width:auto; accent-color:var(--brand)}
.panel-actions{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center}

/* "Meine Bewertung" (Spielseite): Gesamtnote-Regler + Textfeld */
form[data-rate] label{display:block; margin-bottom:.9rem; color:var(--muted); font-size:.9rem}
form[data-rate] input[type=range]{display:block; width:280px; max-width:100%; margin-top:.35rem; accent-color:var(--brand)}
form[data-rate] textarea{width:100%; min-height:70px}

/* Landingpage */
.hero{background:linear-gradient(160deg, var(--panel2), var(--panel)); border:1px solid var(--border); border-radius:1rem; padding:2.8rem 2rem; margin:.4rem 0 1.4rem}
.hero .eyebrow{display:inline-block; font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--brand2)}
.hero h1{font-size:2.3rem; line-height:1.12; margin:.5rem 0 .7rem; max-width:20ch}
.hero .accent{color:var(--brand2)}
.hero .lead{color:var(--muted); max-width:60ch; font-size:1.06rem; margin:0}
.hero-cta{display:flex; gap:.7rem; flex-wrap:wrap; margin:1.3rem 0 0}
.hero-stats{display:flex; gap:2rem; flex-wrap:wrap; margin-top:1.6rem}
.hero-stats b{font-size:1.6rem; color:var(--text); line-height:1}
.hero-stats span{display:block; color:var(--muted); font-size:.82rem; margin-top:.2rem}
.cta-band{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  background:linear-gradient(160deg, var(--panel2), var(--panel)); border:1px solid var(--border);
  border-radius:1rem; padding:1.4rem 1.6rem; margin:1.6rem 0 .4rem}
.cta-band strong{display:block; font-size:1.1rem}
@media (max-width:560px){ .hero h1{font-size:1.8rem} .hero{padding:2rem 1.2rem} }

/* "Angesagt"-Karussell */
.carousel{position:relative; margin:.4rem 0 1.4rem}
.carousel-viewport{overflow:hidden; border-radius:1rem}
.carousel-track{display:flex; transition:transform .4s ease}
.slide{min-width:100%; box-sizing:border-box}
.slide-inner{display:block; position:relative; overflow:hidden; text-decoration:none; color:var(--text);
  background:linear-gradient(120deg, var(--panel2), var(--panel)); border:1px solid var(--border);
  border-radius:1rem; padding:2.2rem 3.6rem; min-height:190px}
.slide-inner:hover{border-color:var(--brand)}
.slide-emoji{position:absolute; right:3.6rem; top:1.1rem; font-size:3.4rem; opacity:.35; pointer-events:none}
.slide-badge{display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--brand2)}
.slide-title{font-size:1.9rem; line-height:1.15; margin:.4rem 0 .2rem; max-width:80%}
.slide-sub{color:var(--muted)}
.carousel-btn{position:absolute; top:calc(50% - 20px); width:38px; height:38px; border-radius:50%;
  border:1px solid var(--border); background:var(--panel2); color:var(--text); font-size:1.3rem; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0}
.carousel-btn:hover{border-color:var(--brand)}
.carousel-prev{left:.6rem}
.carousel-next{right:.6rem}
.carousel-dots{display:flex; gap:.4rem; justify-content:center; margin-top:.7rem}
.carousel-dot{width:9px; height:9px; padding:0; border-radius:50%; border:none; background:var(--border); cursor:pointer}
.carousel-dot.active{background:var(--brand)}
@media (max-width:560px){ .slide-title{font-size:1.4rem; max-width:100%} .slide-emoji{display:none} }

/* Einstellungen-Seite */
.setgroup{border:1px solid var(--border); border-radius:.6rem; padding:.7rem 1rem; margin:0 0 1rem}
.setgroup legend{padding:0 .4rem; color:var(--muted); font-size:.85rem; font-weight:700}
.setgroup label.radio{display:flex; align-items:center; gap:.5rem; margin:.25rem 0; color:var(--text); font-size:.95rem; cursor:pointer}
.setgroup input[type=radio]{width:auto; accent-color:var(--brand)}

/* Verschachtelte Features: aufklappbarer Baum (Genre-/Feature-Seite) */
.feat-list{display:flex; flex-wrap:wrap; gap:.35rem .4rem; align-items:flex-start}
.froot{width:100%}
.game-head, .steward-head{position:relative}
.steward-toggle{position:absolute; top:.5rem; right:.5rem; z-index:3; padding:.2rem .4rem; font-size:1.05rem; line-height:1}
.steward-card .steward-row{display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin:.3rem 0}
.steward-actions{display:flex; flex-wrap:wrap; gap:.5rem; margin:.6rem 0 .3rem}
.dev-chip{border-color:var(--brand2); color:var(--brand2)}
.dev-block{border:1px solid var(--brand2); border-radius:.6rem; padding:.6rem .8rem; margin:.6rem 0; background:var(--panel2)}
.dev-badge{display:inline-block; font-size:.72rem; font-weight:700; color:var(--brand2); border:1px solid var(--brand2); border-radius:999px; padding:.05rem .5rem; margin-bottom:.35rem}
.feat-tree{width:100%; border:1px solid var(--border); border-radius:.5rem; background:var(--panel2)}
.feat-tree > summary{cursor:pointer; padding:.35rem .6rem; font-size:.9rem; list-style:none}
.feat-tree > summary::-webkit-details-marker{display:none}
.feat-tree > summary::before{content:"\25B8"; display:inline-block; margin-right:.4rem; color:var(--muted)}
.feat-tree[open] > summary::before{content:"\25BE"}
.feat-tree summary a{color:var(--text); text-decoration:none; font-weight:600}
.feat-tree summary a:hover{color:var(--brand2)}
.feat-tree-kids{padding:.15rem .6rem .5rem 1.4rem; display:flex; flex-wrap:wrap; gap:.35rem .4rem; align-items:flex-start}

/* ---- Showcases (herausragende Umsetzungen) ---- */
.sc-block{border:1px solid var(--border); border-radius:.7rem; padding:.8rem; margin:.6rem 0; background:var(--panel2)}
.sc-block-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem}
.sc-block-no{font-weight:700; color:var(--brand2); font-size:.85rem; text-transform:uppercase; letter-spacing:.03em}
.sc-list{display:flex; flex-direction:column; gap:.5rem}
.sc-item{display:flex; align-items:center; gap:.8rem; padding:.6rem .8rem; border:1px solid var(--border); border-radius:.6rem; text-decoration:none; color:var(--text); background:var(--panel2)}
.sc-item:hover{border-color:var(--brand2)}
.sc-item-score{flex:0 0 auto; min-width:2.4rem; height:2.4rem; display:flex; align-items:center; justify-content:center; border-radius:.5rem; font-weight:800; background:var(--brand-gradient); color:var(--on-brand)}
.sc-item-title{flex:1; font-weight:600}
.sc-item-votes{flex:0 0 auto}
.sc-view-block{overflow:hidden}
.sc-view-block .impl-shot{margin-bottom:.6rem}
.sc-req{display:flex; gap:1rem; justify-content:space-between; align-items:center; flex-wrap:wrap; padding:.6rem 0; border-top:1px solid var(--border)}
.sc-upload{display:flex; align-items:center; gap:.6rem; margin-top:.6rem; flex-wrap:wrap}
.sc-upload label{margin:0}

/* ---- "So funktioniert's": horizontal scrollbares Kachel-Band ---- */
.how-wrap{position:relative}
.how-scroll{overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; padding:.2rem 0 .5rem; scrollbar-width:none}
.how-scroll::-webkit-scrollbar{display:none}
.how-scroll:focus{outline:none}
.how-track{display:flex; gap:1rem; width:max-content; padding:.1rem; will-change:transform}
/* Endlos-Marquee: Distanz (= eine Kopie) + Dauer werden per JS in --how-shift/--how-dur gesetzt */
.how-track.how-marquee{animation:how-marquee var(--how-dur, 30s) linear infinite}
.how-marquee.how-paused,
.how-scroll:hover .how-marquee,
.how-scroll:focus-within .how-marquee{animation-play-state:paused}
@keyframes how-marquee{to{transform:translateX(calc(-1 * var(--how-shift, 1000px)))}}
.how-tile{flex:0 0 190px; display:flex; flex-direction:column; gap:.35rem; padding:1rem; border:1px solid var(--border); border-radius:.9rem; background:var(--panel); text-decoration:none; color:var(--text); transition:border-color .15s, transform .15s}
.how-tile:hover{border-color:var(--brand2); transform:translateY(-2px)}
.how-ico{font-size:1.9rem; line-height:1}
.how-word{font-size:1.05rem}
/* rechter Verlauf + Pfeil als Scroll-Hinweis (bei Erreichen des Endes ausgeblendet) */
.how-wrap::after{content:""; position:absolute; top:0; right:0; bottom:.5rem; width:56px; pointer-events:none; background:linear-gradient(to right, transparent, var(--bg)); transition:opacity .2s}
.how-hint{position:absolute; top:calc(50% - .3rem); right:.5rem; transform:translateY(-50%); pointer-events:none; color:var(--brand2); font-size:1.8rem; font-weight:800; opacity:.75}