@font-face{font-family:"GT Walsheim";src:url("assets/fonts/GT-Walsheim-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"GT Walsheim";src:url("assets/fonts/GT-Walsheim-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --bg:#faf9f7; --fg:#181716; --surface:#fff; --surface2:#f5f4f1;
  --muted:#77736e; --border:#e6e3de; --border-strong:#d4d0c9;
  --pink:#f0156c; --soft:#fff0f6; --accent-fg:#c10e55;
  --warn-bg:#fff5df; --warn-fg:#a96800;
  --max:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:"GT Walsheim",system-ui,sans-serif;font-weight:500;
  font-synthesis:none;text-rendering:optimizeLegibility;
  font-size:16px;line-height:1.55;
}
code{
  font-family:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.86em;background:var(--surface2);padding:.1em .38em;border-radius:3px;
}
p{margin:0 0 1em}
strong{font-weight:700}

/* ---------- Kopf ---------- */
.head{max-width:var(--max);margin:0 auto;padding:72px 32px 40px}
.mark{display:block;color:var(--fg);margin-bottom:28px}
.kicker{
  font-family:"DM Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin:0 0 10px;
}
h1{font-weight:700;font-size:clamp(34px,4.6vw,52px);line-height:1.05;letter-spacing:-.02em;margin:0 0 22px}
.lead{max-width:62ch;font-size:18px;color:#403d3a}

/* ---------- Blöcke ---------- */
.block{max-width:var(--max);margin:0 auto;padding:44px 32px;border-top:1px solid var(--border)}
.block--tint{background:var(--surface2);max-width:none;border-top:1px solid var(--border-strong)}
.block--tint > *{max-width:var(--max);margin-left:auto;margin-right:auto}
.block--end{padding-bottom:96px}
.h2{font-weight:700;font-size:clamp(22px,2.4vw,28px);letter-spacing:-.015em;margin:0 0 18px}
.intro{max-width:66ch;color:#403d3a}
.hint{margin-top:26px;padding:14px 18px;background:var(--soft);color:var(--accent-fg);border-radius:6px;font-size:14px}
.warn{padding:14px 18px;background:var(--warn-bg);color:var(--warn-fg);border-radius:6px;font-size:15px}
.warn code{background:rgba(0,0,0,.06)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}

/* ---------- Format-Demo ---------- */
.ratio-demo{display:flex;flex-direction:column;gap:16px}
.rd__label{font-family:"DM Mono",ui-monospace,monospace;font-size:12px;color:var(--muted);display:block;margin-bottom:6px}
.rd__box{
  border:1px solid var(--border-strong);background:var(--surface);border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  font-family:"DM Mono",ui-monospace,monospace;font-size:11px;color:var(--muted);
}
.rd--169{aspect-ratio:16/9;width:100%}
.rd--53{aspect-ratio:5/3;width:93.8%}
.rd--11{aspect-ratio:1/1;width:180px}
.rd--off{border-style:dashed;background:transparent;color:var(--warn-fg);border-color:var(--warn-fg)}

/* ---------- Ist-Zustand ---------- */
.thumbs{display:flex;gap:24px;flex-wrap:wrap;margin-top:10px}
.thumb{margin:0;width:160px}
.thumb img{width:160px;aspect-ratio:5/3;object-fit:cover;display:block;border-radius:4px}
.thumb figcaption{font-family:"DM Mono",ui-monospace,monospace;font-size:11px;color:var(--muted);margin-top:7px}

/* ---------- Bildplätze ---------- */
.slot{position:relative;background:var(--surface2);border:1px solid var(--border);border-radius:4px;overflow:hidden}
.slot img{width:100%;height:100%;object-fit:cover;display:block}
.slot__name{
  display:none;position:absolute;inset:0;align-items:center;justify-content:center;
  font-family:"DM Mono",ui-monospace,monospace;font-size:12px;color:var(--muted);
}
.slot.is-empty{border-style:dashed;background:var(--surface)}
.slot.is-empty img{display:none}
.slot.is-empty .slot__name{display:flex}
.slot--169{aspect-ratio:16/9}
.slot--53{aspect-ratio:5/3}
.slot--real{width:160px;flex:0 0 160px}

/* ---------- Vergleich 16:9 ---------- */
.style{padding:30px 0;border-top:1px solid var(--border)}
.style:first-child{border-top:none;padding-top:12px}
.style__head{max-width:70ch;margin-bottom:20px}
.style__head h3{display:inline;font-weight:700;font-size:20px;letter-spacing:-.01em;margin:0}
.style__head p{margin:10px 0 0;color:var(--muted);font-size:15px}
.style__id{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;margin-right:10px;vertical-align:2px;
  background:var(--fg);color:#fff;border-radius:3px;
  font-family:"DM Mono",ui-monospace,monospace;font-size:12px;
}
.style__pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.style__pair figure{margin:0}
.style__pair figcaption{font-family:"DM Mono",ui-monospace,monospace;font-size:11px;color:var(--muted);margin-top:8px}

/* ---------- Vergleich 5:3 Realgrösse ---------- */
.strip{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.strip__row{display:flex;align-items:center;gap:28px;padding:14px 0;border-top:1px solid var(--border-strong)}
.strip__row:first-child{border-top:none}
.strip__label{flex:0 0 220px;font-size:15px}
.strip__imgs{display:flex;gap:18px}

/* ---------- Prompts ---------- */
.pgroup{padding:24px 0;border-top:1px solid var(--border)}
.pgroup:first-child{border-top:none}
.pgroup h3{font-weight:700;font-size:17px;margin:0 0 14px}
.prompt{
  background:var(--surface);border:1px solid var(--border);border-radius:5px;
  padding:12px 15px;margin-bottom:9px;cursor:pointer;transition:border-color .15s,background .15s;
}
.prompt:hover{border-color:var(--pink)}
.prompt.is-copied{background:var(--soft);border-color:var(--pink)}
.prompt__tag{
  display:block;font-family:"DM Mono",ui-monospace,monospace;font-size:11px;
  color:var(--muted);margin-bottom:7px;
}
.prompt.is-copied .prompt__tag::after{content:"  ·  kopiert";color:var(--accent-fg)}
.prompt code{background:none;padding:0;font-size:13px;line-height:1.6;color:#2c2a28;word-break:break-word}

@media (max-width:860px){
  .head{padding:48px 22px 30px}
  .block{padding:34px 22px}
  .cols{grid-template-columns:1fr;gap:26px}
  .style__pair{grid-template-columns:1fr}
  .strip__row{flex-direction:column;align-items:flex-start;gap:12px}
  .strip__label{flex:none}
}

/* ---------- System / Motive ---------- */
.h3{font-weight:700;font-size:19px;letter-spacing:-.01em;margin:38px 0 12px}
.formula{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:14px 16px;background:var(--surface);border:1px solid var(--border-strong);
  border-radius:5px;font-family:"DM Mono",ui-monospace,monospace;font-size:13px;
}
.formula span{background:var(--fg);color:#fff;padding:3px 8px;border-radius:3px}
.formula code{background:none;padding:0;color:var(--muted)}
.rules{margin:0;padding-left:20px;color:#403d3a}
.rules li{margin-bottom:9px}
.motifs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:6px}
.motif{background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:18px 20px}
.motif__n{
  font-family:"DM Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px;
}
.motif__head h3{font-weight:700;font-size:16px;margin:0 0 8px;line-height:1.3}
.tag{
  display:inline-block;background:var(--soft);color:var(--accent-fg);
  font-family:"DM Mono",ui-monospace,monospace;font-size:11px;
  padding:3px 8px;border-radius:3px;
}
.motif__u{font-size:14px;color:var(--muted);margin:12px 0 12px}
.motif__code{display:block;background:var(--surface2);padding:10px 12px;border-radius:4px;font-size:12px;line-height:1.5}

/* ---------- 3er-Raster ---------- */
.style__triple{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.style__triple figure{margin:0}
.style__triple figcaption{font-family:"DM Mono",ui-monospace,monospace;font-size:11px;color:var(--muted);margin-top:8px}
.style__block{margin:14px 0 0;font-size:13px}
.style__block span{
  font-family:"DM Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin-right:8px;
}
.style__block code{font-size:12px;line-height:1.6}
.prompt code em{font-style:normal;background:var(--soft);color:var(--accent-fg);padding:1px 3px;border-radius:2px}

@media (max-width:860px){
  .motifs{grid-template-columns:1fr}
  .style__triple{grid-template-columns:1fr}
  .strip__imgs{flex-wrap:wrap}
}

/* ---------- Runde 2 ---------- */
.h3--tight{margin-top:0}
.note{font-size:14px;color:var(--muted);border-left:2px solid var(--border-strong);padding-left:14px}
.refs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
.ref{margin:0}
.ref img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:5px;border:1px solid var(--border)}
.ref figcaption{font-size:14px;color:var(--muted);margin-top:11px;line-height:1.5}
.ref figcaption strong{display:block;color:var(--fg);font-size:15px;margin-bottom:4px}
.motif h3{font-weight:700;font-size:15px;margin:0 0 10px;line-height:1.3}
.nachbar{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start;margin-top:8px}
.nb{margin:0;width:230px}
.nb img{width:100%;aspect-ratio:5/3;object-fit:cover;display:block;border-radius:4px}
.nb .slot{width:230px}
.nb figcaption{font-family:"DM Mono",ui-monospace,monospace;font-size:11px;color:var(--muted);margin-top:7px}
@media (max-width:860px){.refs{grid-template-columns:1fr}}

/* ---------- Runde 3 ---------- */
.formula--big{font-size:14px;padding:16px 18px}
.formula--big code{color:var(--fg)}
.merkmale{display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:5px;overflow:hidden}
.merkmal{display:flex;gap:16px;background:var(--surface);padding:11px 15px;align-items:baseline}
.merkmal span{
  flex:0 0 92px;font-family:"DM Mono",ui-monospace,monospace;font-size:11px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
}
.merkmal p{margin:0;font-size:14px}
.mgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 24px;margin-top:6px}
.mfig{margin:0}
.mfig figcaption{margin-top:10px}
.mfig figcaption strong{display:block;font-size:15px;line-height:1.35}
.mfig .meta{
  display:block;font-family:"DM Mono",ui-monospace,monospace;font-size:11px;
  color:var(--muted);margin-top:4px;
}
@media (max-width:860px){.mgrid{grid-template-columns:1fr}}
.nb .slot--real{width:160px;flex:0 0 160px}
#grid-53 .nb{width:160px}

/* ---------- Runde 4 ---------- */
.teil{
  font-family:"DM Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;background:var(--pink);display:inline-block;
  padding:3px 9px;border-radius:3px;margin:0 0 14px;
}
.motive{margin-top:34px}
.mrow{display:grid;grid-template-columns:1fr 1.15fr;gap:34px;padding:30px 0;border-top:1px solid var(--border);align-items:start}
.mrow:first-child{border-top:none}
.mrow__text h3{font-weight:700;font-size:19px;letter-spacing:-.01em;margin:0 0 12px;line-height:1.25}
.kern{font-size:15px;color:#403d3a;margin-bottom:14px}
.idee{font-size:14px;color:var(--muted);background:var(--surface2);padding:11px 14px;border-radius:4px;margin-bottom:16px}
.idee span{
  display:block;font-family:"DM Mono",ui-monospace,monospace;font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px;
}
.mrow__real{display:flex;align-items:center;gap:14px;margin-top:14px}
.mrow__real > span{font-family:"DM Mono",ui-monospace,monospace;font-size:11px;color:var(--muted)}
.ziele{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.ziel{background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:15px 17px}
.ziel h3{display:inline;font-weight:700;font-size:16px;margin:0}
.ziel p{font-size:13.5px;color:var(--muted);margin:9px 0 0}
.ziel p strong{color:var(--fg);font-weight:700}
.suche{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}
.probe{margin:0}
.probe figcaption{font-family:"DM Mono",ui-monospace,monospace;font-size:11px;color:var(--muted);margin-top:7px}
.code-in{border-bottom:1px dashed var(--border-strong);padding-bottom:1px}
.prompt--static{cursor:pointer}
@media (max-width:860px){
  .mrow{grid-template-columns:1fr;gap:20px}
  .suche{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Schlanke Fassung ---------- */
.head--slim{padding:56px 32px 26px}
.head--slim h1{font-size:clamp(30px,3.6vw,42px);margin-bottom:14px}
.rezept{display:grid;grid-template-columns:1fr 1fr;gap:36px;padding-top:30px;padding-bottom:30px}
.rezept p{font-size:15px;color:#403d3a;margin:0}
.stil{max-width:var(--max);margin:0 auto;padding:38px 32px;border-top:1px solid var(--border)}
.stil--offen{opacity:.72}
.stil__head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.stil__head h2{font-weight:700;font-size:24px;letter-spacing:-.015em;margin:0}
.stil__head .style__id{margin:0;width:26px;height:26px;font-size:13px;vertical-align:0}
.tag--offen{background:var(--surface2);color:var(--muted)}
.stil__hinweis{max-width:70ch;font-size:14px;color:var(--muted);margin:0 0 16px}
.sref-box{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:20px;
  padding:11px 14px;background:var(--surface);border:1px solid var(--border);border-radius:5px;
}
.sref-box span{
  font-family:"DM Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
}
.sref-box code{font-size:11px}
.reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.kachel{margin:0}
.kachel figcaption{margin-top:9px;font-size:13px;line-height:1.4}
.kachel figcaption strong{display:block}
.kachel figcaption span{color:var(--muted);font-size:12px}
.real{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid var(--border)}
.real__label{
  flex:0 0 100%;font-family:"DM Mono",ui-monospace,monospace;font-size:11px;
  color:var(--muted);margin-bottom:2px;
}
@media (max-width:860px){
  .rezept{grid-template-columns:1fr;gap:22px}
  .stil{padding:28px 22px}
  .reihe{grid-template-columns:1fr}
}

/* ---------- Bestand ---------- */
.bestand{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:6px}
.bk{margin:0}
.bk img{width:100%;aspect-ratio:5/3;object-fit:cover;display:block;border-radius:4px}
.bk--raus img{opacity:.42}
.bk figcaption{font-size:13px;margin-top:8px}
.bk__tag{
  display:block;font-family:"DM Mono",ui-monospace,monospace;font-size:10px;
  letter-spacing:.04em;color:var(--accent-fg);margin-top:3px;
}
.bk__tag--raus{color:var(--muted)}
@media (max-width:860px){.bestand{grid-template-columns:repeat(2,1fr)}}