/* AGENCY — Brand Guide
 *
 * Die Farbtafeln und Kontrastwerte werden zur Laufzeit aus tokens.css
 * gelesen und gerechnet. Ein Brand Guide, der seine Werte abgetippt hat,
 * beschreibt irgendwann eine Marke, die es nicht mehr gibt.
 */

/* ── Farben ─────────────────────────────────────────────────────────────── */

.swatches{display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:12px}
.sw{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface)}
.sw .chip-lg{height:74px; display:flex; align-items:flex-end; padding:8px 10px}
.sw .chip-lg b{font-family:var(--mono); font-size:11px; font-weight:600}
.sw .meta{padding:9px 11px}
.sw .name{font-family:var(--mono); font-size:11.5px; font-weight:600}
.sw .hex{font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:2px}
.sw .use{font-size:11.5px; color:var(--ink-2); margin-top:6px; line-height:1.45}

.contrast{display:flex; align-items:center; gap:6px; margin-top:7px;
  font-family:var(--mono); font-size:10.5px}
.contrast .v{font-weight:600}
.contrast .pass{color:var(--pos)}
.contrast .fail{color:var(--neg)}

/* ── Verhältnisregel ────────────────────────────────────────────────────── */

.ratio-demo{display:flex; height:38px; border:1px solid var(--line-2); border-radius:var(--r-sm);
  overflow:hidden; margin:14px 0 8px}
.ratio-demo div{display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:10.5px; font-weight:600}

/* ── Logo ───────────────────────────────────────────────────────────────── */

.logo-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px}
.logo-cell{
  border:1px solid var(--line); border-radius:var(--r); padding:26px 20px;
  display:flex; align-items:center; justify-content:center; min-height:118px;
}
.logo-cell.on-ink{background:var(--ink)}
.logo-cell.on-accent{background:var(--accent)}
.logo-cell .cap{
  position:absolute; margin:-46px 0 0 0; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--muted);
}
.logo-wrap{position:relative}

.dodont{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-top:16px}
.dd{border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.dd .frame{
  height:96px; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); overflow:hidden;
}
.dd .say{padding:9px 11px; font-size:12px; line-height:1.45; display:flex; gap:7px; align-items:flex-start}
.dd .say .m{font-family:var(--mono); font-weight:600; flex:none}
.dd.no .say .m{color:var(--neg)}
.dd.yes .say .m{color:var(--pos)}

/* ── Typografie ─────────────────────────────────────────────────────────── */

.spec{border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; margin-bottom:12px}
.spec .head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:11px}
.spec .role{font-family:var(--mono); font-size:9.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted)}
.spec .stack{font-family:var(--mono); font-size:11px; color:var(--ink-2); margin-left:auto}
.spec .sample{line-height:1.15; margin:0}
.spec .scale{display:flex; flex-wrap:wrap; gap:14px; margin-top:13px;
  padding-top:11px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; color:var(--muted)}

/* ── Tonalität ──────────────────────────────────────────────────────────── */

.voice{display:grid; gap:1px; background:var(--line); border:1px solid var(--line)}
.voice-row{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line)}
@media (max-width:680px){ .voice-row{grid-template-columns:1fr} }
.voice-cell{background:var(--surface); padding:13px 15px}
.voice-cell .m{font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; margin-bottom:6px; font-weight:600}
.voice-cell.no .m{color:var(--neg)}
.voice-cell.yes .m{color:var(--pos)}
.voice-cell p{margin:0; font-size:13.5px; line-height:1.55}
.voice-cell.no p{color:var(--muted)}

/* ── Downloads ──────────────────────────────────────────────────────────── */

.dl-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px}
.dl{
  display:flex; align-items:center; gap:11px; padding:12px 14px; text-align:left;
  border:1px solid var(--line-2); border-radius:var(--r); background:var(--surface);
  cursor:pointer; font-size:13px; width:100%;
}
.dl:hover{border-color:var(--muted); background:var(--surface-2)}
.dl .ico{
  width:30px; height:30px; border-radius:5px; flex:none; display:flex;
  align-items:center; justify-content:center; background:var(--surface-3);
  font-family:var(--mono); font-size:9px; font-weight:600; color:var(--muted);
}
.dl .n{font-weight:600}
.dl .s{font-size:11px; color:var(--muted)}