/* Icon Maker – eigenständiges Stylesheet. Nur Variablen oben anpassen, um das Design der Website zu übernehmen. */

:root{
  --kopfhoehe:84px; /* Höhe der festen Navigation */
  --m-bg:#0b0b0b;
  --m-karte:#151515;
  --m-linie:#2c2c2c;
  --m-text:#f2f2f2;
  --m-gedimmt:#bdbdbd;
  --m-akzent:#ff0000;
  --m-titel:var(--font-titel,Impact,sans-serif);
  --m-schrift:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}

.editor{padding-top:32px;padding-bottom:40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.vorschau{position:sticky;top:calc(var(--kopfhoehe) + 14px)}
.schachbrett{border:1px solid var(--m-linie);border-radius:14px;padding:16px;background:
  repeating-conic-gradient(#1a1a1a 0% 25%,#222 0% 50%) 0 0/24px 24px}
#leinwand{display:block;width:100%;max-width:512px;height:auto;margin:0 auto;aspect-ratio:1}
.klein{display:flex;gap:16px;align-items:flex-end;margin-top:14px}
.klein canvas{background:repeating-conic-gradient(#1a1a1a 0% 25%,#222 0% 50%) 0 0/16px 16px;border:1px solid var(--m-linie);border-radius:8px}

.regler{display:grid;gap:16px}
fieldset{margin:0;padding:16px 18px 18px;border:1px solid var(--m-linie);border-radius:14px;background:var(--m-karte);display:grid;gap:12px}
legend{padding:0 8px;font:400 1.5rem/1.15 var(--m-titel);letter-spacing:.03em}
label{display:grid;grid-template-columns:130px 1fr;gap:10px;align-items:center;font-size:.95rem;color:var(--m-gedimmt)}
label.hakenzeile{grid-template-columns:auto 1fr}
.farben{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.farben label{grid-template-columns:auto 1fr}
input[type=range]{width:100%;accent-color:var(--m-akzent)}
input[type=color]{width:100%;min-width:44px;height:36px;padding:2px;background:#0e0e0e;border:1px solid var(--m-linie);border-radius:8px;cursor:pointer}
input[type=text],select{width:100%;height:38px;padding:0 10px;color:var(--m-text);background:#0e0e0e;border:1px solid var(--m-linie);border-radius:8px;font:inherit}
input[type=file]{color:var(--m-gedimmt);font-size:.9rem}
label.datei{grid-template-columns:1fr}
button{font:inherit;color:var(--m-text);background:#222;border:1px solid var(--m-linie);border-radius:10px;padding:9px 14px;cursor:pointer;min-height:42px}
button:hover{background:#2a2a2a}
button.haupt{background:var(--m-akzent);border-color:var(--m-akzent);color:#fff;font-weight:600}
button.haupt:hover{filter:brightness(1.12)}
button.sekundaer{background:transparent}
:is(button,input,select):focus-visible{outline:2px solid #fff;outline-offset:2px}
.knoepfe,.groessen,.leiste{display:flex;flex-wrap:wrap;gap:10px}
.groessen button{flex:1 1 0}
.knoepfe button{flex:1 1 200px}
.knoepfe[hidden],.setvorschau[hidden]{display:none}
.setauswahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:4px 10px;margin-bottom:12px}
.setvorschau{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin:14px 0}
.setvorschau figure{margin:0;text-align:center}
.setvorschau canvas{width:100%;height:auto;aspect-ratio:1;background:repeating-conic-gradient(#1a1a1a 0% 25%,#222 0% 50%) 0 0/16px 16px;border:1px solid var(--m-linie);border-radius:8px}
.setvorschau figcaption{font-size:.8rem;color:var(--m-text);margin-top:4px}
.schnell{display:flex;flex-wrap:wrap;gap:8px}
.schnell button{width:32px;height:32px;min-height:0;padding:0;border-radius:50%;border:2px solid #000}
.schnell button:focus-visible,.schnell button:hover{border-color:#fff}
.symbole{display:grid;grid-template-columns:repeat(auto-fill,52px);grid-auto-rows:52px;gap:8px;justify-content:space-between;align-content:start}
.symbole button{width:52px;height:52px;min-height:0;padding:0;position:relative;display:block}
.symbole button[aria-checked=true]{border-color:var(--m-akzent);background:#2a1212}
.symbole svg{position:absolute;left:11px;top:11px;width:30px;height:30px;fill:currentColor}
.symbole svg[fill=none]{fill:none}
.symbole button[hidden]{display:none}
.symbol-liste{max-height:260px;overflow:auto;padding:2px}
.extratitel{margin:4px 0 0;color:var(--m-gedimmt);font-size:.9rem}
input[type=search]{width:100%;height:38px;padding:0 10px;color:var(--m-text);background:#0e0e0e;border:1px solid var(--m-linie);border-radius:8px;font:inherit}
.vorlagenzeile{display:flex;gap:10px}
.vorlagenzeile button{flex:0 0 auto}
.vorlagenliste{display:grid;gap:6px}
.vorlage{display:flex;align-items:center;gap:8px}
.vname{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vorlage button{flex:0 0 auto;min-height:36px;padding:6px 12px}
.meldung{margin:0;min-height:1.4em;color:var(--m-gedimmt);font-size:.9rem}
.meldung.fehler{color:#ff8a8a}

@media (max-width:860px){
  .editor{grid-template-columns:1fr}
  .vorschau{position:sticky;top:var(--kopfhoehe);z-index:5;background:var(--m-bg);padding:8px 0;display:flex;gap:12px;align-items:center}
  .vorschau .schachbrett{flex:0 0 auto;width:min(46vw,220px);padding:8px}
  .klein{margin-top:0;flex-wrap:wrap}
  label{grid-template-columns:110px 1fr}
}
@media (prefers-reduced-motion:no-preference){button{transition:background .15s,filter .15s}}

/* gleicher Abstand wie bei allen anderen Reglern */
#hgregler{display:grid;gap:12px}
#hgregler[hidden]{display:none}
/* Regler ohne Wirkung ausgegraut */
label.inaktiv{opacity:.38}
label.inaktiv,label.inaktiv *{cursor:not-allowed}
input:disabled,select:disabled{opacity:.6}
.schnell.inaktiv{opacity:.38;pointer-events:none}

/* Layout-Karte */
.layouts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.layouts button{display:grid;justify-items:center;align-content:start;gap:6px;padding:10px 4px;min-height:0;height:auto;font-size:.74rem;line-height:1.25;color:var(--m-gedimmt)}
.layouts svg{width:52px;height:52px}
.layouts .rahmen{fill:#0e0e0e;stroke:#4a4a4a;stroke-width:1.5}
.layouts .txt{fill:#f2f2f2}
.layouts .sym{fill:var(--m-akzent)}
.layouts button[aria-pressed=true]{border-color:var(--m-akzent);background:#2a1212;color:var(--m-text)}
button:disabled{opacity:.4;cursor:not-allowed}
@media (max-width:480px){.layouts{grid-template-columns:repeat(2,1fr)}}

/* einklappbare Karten */
.kopfleiste{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
button.klein{min-height:0;padding:5px 10px;font-size:.85rem}
.kartenkopf{display:inline-flex;align-items:center;gap:10px;margin:0;padding:0 4px;min-height:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;border-radius:6px}
.kartenkopf:hover{background:none;color:#fff}
.kartenkopf .pfeil{width:9px;height:9px;border-right:2px solid var(--m-gedimmt);border-bottom:2px solid var(--m-gedimmt);transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
.kartenkopf[aria-expanded=false] .pfeil{transform:rotate(-45deg)}
.karteninhalt{display:grid;gap:12px}
.karteninhalt[hidden]{display:none}
fieldset.zu{padding-top:4px;padding-bottom:8px}

/* Karten: Überschrift sitzt im Kasten (nicht auf dem Rand), damit eingeklappte Karten sauber aussehen */
fieldset{display:block;padding:14px 18px 16px}
legend{float:left;width:100%;padding:0;margin:0 0 12px}
.karteninhalt{clear:both}
fieldset.zu{padding:14px 18px}
fieldset.zu legend{margin-bottom:0}
.kartenkopf{width:100%;justify-content:space-between;padding:0}

/* Stream-Look-Hinweise */
#lookbereich{padding-top:28px;display:grid;gap:10px}
#lookbereich:empty{padding-top:0}
.lookhinweis{background:var(--karte,#151515);border:1px solid var(--linie,#2c2c2c);border-left:4px solid var(--rot,#e10000);padding:12px 16px;border-radius:4px}
.lookhinweis[hidden]{display:none}
.lookzeile{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.lookzeile strong{color:var(--text,#f2f2f2)}
.lookinfo{color:var(--gedimmt,#bdbdbd);flex:1 1 240px}
.lookknoepfe{display:flex;flex-wrap:wrap;gap:8px}
.lookknoepfe button,a.knopflink{min-height:38px;padding:7px 14px;font-size:.9rem}
a.knopflink{display:inline-flex;align-items:center;color:var(--text,#f2f2f2);border:1px solid var(--m-linie);border-radius:10px;text-decoration:none;background:transparent}
a.knopflink:hover{background:#2a2a2a}
a.knopflink:focus-visible{outline:2px solid #fff;outline-offset:2px}
#lookbereich + .editor{padding-top:20px}

/* Erklärtext und FAQ unter dem Werkzeug */
.makertext{padding-bottom:72px;max-width:820px;color:var(--m-gedimmt);line-height:1.6}
.makertext h2{margin:28px 0 10px;color:var(--m-text);font:400 1.7rem/1.15 var(--m-titel);letter-spacing:.03em}
.makertext h2:first-child{margin-top:0}
.makertext h3{margin:18px 0 4px;color:var(--m-text);font-size:1.05rem;font-weight:600}
.makertext p{margin:0}
.makertext a{color:var(--m-text);text-decoration:underline}