/* ============================================================
   KiezQuiz — Corporate Identity / Brand Guidelines
   Stylesheet & Design Tokens
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* Core */
  --tinte:#0F1118;       /* Ink — primary dark, app theme */
  --nacht:#171A24;       /* Night surface */
  --beton:#252938;       /* Concrete — raised surface */
  --beton-2:#30354a;     /* Concrete light */
  --linie:#363B4F;       /* hairlines on dark */
  --nebel:#9AA0B0;       /* fog — muted text on dark */
  --nebel-2:#C5C9D4;     /* brighter muted */
  --papier:#F1ECE0;      /* warm paper */
  --papier-2:#E7E0D0;    /* paper shade */
  --kreide:#FCFBF8;      /* near-white */

  /* Accents */
  --signal:#FF5233;      /* Kiez-Signal — vermilion pin */
  --signal-tief:#E23E22; /* darker signal */
  --strom:#C6F24E;       /* Strom — electric lime, XP/streak */
  --himmel:#5AA9FF;      /* Himmel — sky blue */
  --pflaume:#9B7BFF;     /* extra: violet */
  --bernstein:#F4B53C;   /* extra: amber */

  /* District tints (map cells) */
  --d1:#FF5233; --d2:#C6F24E; --d3:#5AA9FF; --d4:#9B7BFF;
  --d5:#F4B53C; --d6:#2BC4B4; --d7:#FF8A5B; --d8:#E36BA6;

  /* Type */
  --display:"Bricolage Grotesque", system-ui, sans-serif;
  --text:"Hanken Grotesk", system-ui, sans-serif;
  --mono:"Space Mono", ui-monospace, monospace;

  /* Layout */
  --maxw:1180px;
  --gutter:clamp(20px, 5vw, 64px);
  --radius:18px;
  --radius-s:12px;
  --nav-w:248px;
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--text);
  background:var(--tinte);
  color:var(--kreide);
  line-height:1.55;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--signal);color:#fff}

/* ---------- Layout shell ---------- */
.app{display:flex;min-height:100vh}

/* Sidebar nav */
.sidenav{
  width:var(--nav-w);flex:0 0 var(--nav-w);
  position:sticky;top:0;align-self:flex-start;height:100vh;
  background:#0B0D13;border-right:1px solid var(--linie);
  display:flex;flex-direction:column;
  padding:26px 0 18px;
  z-index:50;
}
.sidenav .brand{
  display:flex;align-items:center;gap:11px;
  padding:0 22px 22px;margin-bottom:6px;
  border-bottom:1px solid var(--linie);
}
.sidenav .brand .mark{width:34px;height:34px;flex:0 0 34px}
.sidenav .brand .name{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em}
.sidenav .brand .name span{color:var(--signal)}
.sidenav .navscroll{overflow-y:auto;flex:1;padding:14px 0;scrollbar-width:thin;scrollbar-color:var(--beton) transparent}
.sidenav .navscroll::-webkit-scrollbar{width:6px}
.sidenav .navscroll::-webkit-scrollbar-thumb{background:var(--beton);border-radius:3px}
.nav-group{padding:6px 0}
.nav-eyebrow{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:#5b6072;padding:8px 22px 6px;
}
.sidenav a.navlink{
  display:flex;align-items:baseline;gap:10px;
  padding:7px 22px;font-size:14.5px;color:var(--nebel);
  border-left:2px solid transparent;transition:.16s;
}
.sidenav a.navlink .ix{font-family:var(--mono);font-size:11px;color:#565b6e}
.sidenav a.navlink:hover{color:var(--kreide);background:#11131c}
.sidenav a.navlink.active{color:var(--kreide);border-left-color:var(--signal);background:#12141d}
.sidenav a.navlink.active .ix{color:var(--signal)}
.sidenav .foot{padding:14px 22px 0;border-top:1px solid var(--linie);font-family:var(--mono);font-size:10.5px;color:#565b6e;line-height:1.7}

/* Main column */
.main{flex:1;min-width:0}

/* mobile nav toggle */
.navtoggle{display:none}

/* ---------- Section scaffolding ---------- */
.section{
  padding:clamp(64px,9vw,128px) var(--gutter);
  border-bottom:1px solid var(--linie);
  position:relative;scroll-margin-top:0;
  max-width:calc(var(--maxw) + var(--gutter)*2);
}
.section.pad-wide{max-width:none}
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--signal);display:flex;align-items:center;gap:12px;margin-bottom:22px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--signal);display:inline-block}
.eyebrow .coord{color:#585d70;margin-left:auto;letter-spacing:.1em}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1.02}
.section h2{font-size:clamp(34px,5.2vw,62px);margin-bottom:20px;text-wrap:balance}
.section .lead{font-size:clamp(18px,2.1vw,23px);color:var(--nebel-2);max-width:62ch;line-height:1.5}
.section h3{font-size:clamp(22px,2.6vw,30px);margin:8px 0 14px}
.section h4{font-size:18px;letter-spacing:-.01em;margin-bottom:8px}
.muted{color:var(--nebel)}
.mono{font-family:var(--mono)}
strong{font-weight:700;color:var(--kreide)}
p{max-width:68ch;text-wrap:pretty}

/* utility */
.grid{display:grid;gap:22px}
.grid>*{min-width:0}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.gm{display:grid;gap:14px;grid-template-columns:repeat(5,minmax(0,1fr))}
.gm>*{min-width:0}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt40{margin-top:40px}.mt56{margin-top:56px}
.tac{text-align:center}
@media(max-width:1024px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gm{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:820px){
  .g2,.g3,.g4{grid-template-columns:1fr!important}
  .g4.keep2,.g3.keep2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .gm{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .splitcard{grid-template-columns:1fr!important}
}

/* Card */
.card{
  background:var(--nacht);border:1px solid var(--linie);border-radius:var(--radius);
  padding:26px;position:relative;
}
.card.raised{background:var(--beton)}
.card .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--signal);margin-bottom:12px}
.card .num{font-family:var(--display);font-weight:800;font-size:13px;color:#4d5266}

.pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  padding:5px 11px;border:1px solid var(--linie);border-radius:999px;color:var(--nebel-2)}

/* tag chips */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{font-family:var(--mono);font-size:12.5px;padding:6px 12px;border-radius:999px;background:var(--beton);color:var(--nebel-2);border:1px solid var(--linie)}
.chip.on{background:var(--signal);color:#fff;border-color:var(--signal)}

/* contour bg accent */
.topo{position:absolute;inset:0;pointer-events:none;opacity:.5;overflow:hidden}

/* code/value */
.val{font-family:var(--mono);font-size:13px;color:var(--nebel-2)}

/* ---------- Cover ---------- */
.cover{
  min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(34px,5vw,64px) var(--gutter);position:relative;overflow:hidden;
  background:radial-gradient(120% 90% at 80% -10%, #1b1f2e 0%, var(--tinte) 55%);
}
.cover-top{display:flex;justify-content:space-between;align-items:flex-start;font-family:var(--mono);font-size:12px;color:var(--nebel);letter-spacing:.06em}
.cover-mid{margin:auto 0}
.cover-logo{width:auto;height:auto;margin-bottom:30px}
.wordmark-xl{display:inline-flex;align-items:flex-end;font-family:var(--display);font-weight:800;
  font-size:clamp(64px,12vw,150px);line-height:.8;letter-spacing:-.045em;color:var(--kreide)}
.wordmark-xl span{display:block}
.wm-pin{height:1.18em;width:auto;color:var(--signal);transform:translateY(.13em);margin:0 -.04em}

/* reusable wordmark (any size via font-size) */
.wordmark{display:inline-flex;align-items:flex-end;font-family:var(--display);font-weight:800;
  letter-spacing:-.045em;line-height:.8;color:var(--kreide)}
.wordmark span{display:block}
.wordmark.mono .wm-pin{color:inherit}
.lockup-stack{display:inline-flex;flex-direction:column;align-items:center;gap:.18em;font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:.85;color:var(--kreide)}
.lockup-stack .wm-pin{transform:none;margin:0}

/* app icon */
.appicon{width:84px;aspect-ratio:1;border-radius:22%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.3)}
.appicon svg{height:58%;width:auto}
.homeicon{aspect-ratio:1;border-radius:13px}
.cover h1{font-size:clamp(40px,7vw,96px);line-height:.98}
.cover .claim{font-family:var(--display);font-weight:700;font-size:clamp(20px,3.2vw,34px);color:var(--signal);margin-top:18px;letter-spacing:-.02em}
.cover-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--nebel);letter-spacing:.05em}
.crosshair{position:absolute;width:26px;height:26px;opacity:.55}
.crosshair::before,.crosshair::after{content:"";position:absolute;background:var(--signal)}
.crosshair::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-50%)}
.crosshair::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-50%)}

/* ---------- Swatches ---------- */
.swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.swatches>*{min-width:0}
@media(max-width:820px){.swatches{grid-template-columns:repeat(2,1fr)}}
.swatch{border-radius:var(--radius-s);overflow:hidden;border:1px solid var(--linie);background:var(--nacht)}
.swatch .chipcol{height:118px;display:flex;align-items:flex-end;padding:12px}
.swatch .meta{padding:13px 14px 15px}
.swatch .meta .nm{font-family:var(--display);font-weight:700;font-size:16px}
.swatch .meta .hx{font-family:var(--mono);font-size:12px;color:var(--nebel);margin-top:3px;text-transform:uppercase}
.swatch .meta .use{font-size:12.5px;color:var(--nebel);margin-top:7px;line-height:1.45}

/* ---------- Type specimen ---------- */
.specimen{background:var(--nacht);border:1px solid var(--linie);border-radius:var(--radius);padding:30px 32px}
.specimen .big{font-family:var(--display);font-weight:800;font-size:clamp(48px,9vw,118px);line-height:.92;letter-spacing:-.03em}
.specimen .row{display:flex;justify-content:space-between;border-top:1px solid var(--linie);padding:14px 0;font-size:14px;color:var(--nebel)}
.glyphs{font-family:var(--display);font-size:34px;letter-spacing:.04em;line-height:1.5;color:var(--nebel-2);overflow-wrap:anywhere}

/* ---------- DO / DON'T ---------- */
.dd{border-radius:var(--radius-s);border:1px solid var(--linie);overflow:hidden}
.dd .head{display:flex;align-items:center;gap:9px;padding:11px 16px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.dd.do .head{background:rgba(198,242,78,.12);color:var(--strom)}
.dd.dont .head{background:rgba(255,82,51,.12);color:var(--signal)}
.dd .body{padding:18px 16px;font-size:14px;color:var(--nebel-2);background:var(--nacht);min-height:62px}
.dd .stage{display:flex;align-items:center;justify-content:center;padding:26px;background:var(--nacht);min-height:140px}

/* ---------- Application mockups ---------- */
.device{background:var(--beton);border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden;position:relative}
.frame-lite{border:1px solid var(--linie);border-radius:var(--radius-s);overflow:hidden}

/* paper surfaces for print apps */
.paper{background:var(--papier);color:var(--tinte);border-radius:var(--radius-s);position:relative;overflow:hidden}
.paper .ink{color:var(--tinte)}

/* value list */
.deflist{display:grid;gap:0}
.deflist .item{display:grid;grid-template-columns:118px 1fr;gap:16px;padding:16px 0;border-top:1px solid var(--linie)}
.deflist .item:last-child{border-bottom:1px solid var(--linie)}
.deflist .k{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--signal)}
.deflist .v{color:var(--nebel-2)}
@media(max-width:640px){.deflist .item{grid-template-columns:1fr;gap:5px}}

/* slider rows (personality) */
.slider-row{display:grid;grid-template-columns:130px 1fr 130px;align-items:center;gap:16px;padding:13px 0;border-top:1px solid var(--linie)}
.slider-row:last-child{border-bottom:1px solid var(--linie)}
.slider-row .end{font-size:13.5px;color:var(--nebel)}
.slider-row .end.l{text-align:right;color:var(--kreide);font-weight:600}
.track{height:6px;background:var(--beton);border-radius:99px;position:relative}
.track .fill{position:absolute;top:50%;transform:translateY(-50%);height:14px;width:14px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 4px rgba(255,82,51,.18)}

/* big number stat */
.stat{display:flex;flex-direction:column;gap:4px}
.stat .n{font-family:var(--display);font-weight:800;font-size:clamp(34px,5vw,56px);letter-spacing:-.02em;line-height:1}
.stat .n.sig{color:var(--signal)}.stat .n.str{color:var(--strom)}.stat .n.him{color:var(--himmel)}
.stat .l{font-size:13.5px;color:var(--nebel)}

/* persona */
.persona{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start}
.persona .ava{width:74px;height:74px;border-radius:50%;background:var(--beton);display:flex;align-items:center;justify-content:center;font-size:34px;flex:0 0 74px;border:1px solid var(--linie)}

/* timeline */
.tl{position:relative;padding-left:28px}
.tl::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--linie)}
.tl .step{position:relative;padding:0 0 26px}
.tl .step::before{content:"";position:absolute;left:-26px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 4px var(--tinte)}
.tl .step .ph{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--signal)}

/* pictogram tiles */
.picto-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.picto-grid>*{min-width:0}
@media(max-width:1024px){.picto-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:820px){.picto-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.picto{aspect-ratio:1;background:var(--nacht);border:1px solid var(--linie);border-radius:var(--radius-s);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px;transition:.16s}
.picto:hover{border-color:var(--signal);background:var(--beton)}
.picto svg{width:40px;height:40px}
.picto .lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--nebel);text-align:center}

/* footer */
.colophon{padding:clamp(54px,8vw,96px) var(--gutter);background:#0B0D13}
.colophon h2{font-size:clamp(28px,4vw,46px)}

/* misc helpers */
.divider{height:1px;background:var(--linie);margin:0}
.center-stage{display:flex;align-items:center;justify-content:center}
.ratio-bar{display:flex;height:46px;border-radius:8px;overflow:hidden;border:1px solid var(--linie)}
.ratio-bar span{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;color:rgba(0,0,0,.55)}

@media(max-width:900px){
  :root{--nav-w:0px}
  .sidenav{position:fixed;left:0;top:0;transform:translateX(-100%);transition:.25s;width:260px;flex-basis:260px}
  .sidenav.open{transform:translateX(0)}
  .navtoggle{display:flex;position:fixed;top:14px;right:14px;z-index:60;
    width:46px;height:46px;border-radius:12px;background:var(--beton);border:1px solid var(--linie);
    align-items:center;justify-content:center;color:#fff;cursor:pointer}
  .navtoggle svg{width:22px;height:22px}
}

/* ============ PRINT / PDF ============ */
@media print{
  *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important}
  @page{size:A4 landscape;margin:0}
  html,body{background:var(--tinte)}
  .sidenav,.navtoggle{display:none !important}
  .app{display:block}
  .main{width:100%;flex:none}
  .section{
    max-width:none;border-bottom:none;
    padding:46px 56px;
    page-break-before:always;break-before:page;
  }
  #kern{page-break-before:avoid;break-before:avoid}
  .cover{min-height:auto;height:188mm;page-break-after:always;break-after:page}
  .colophon{page-break-before:always;break-before:page}
  /* keep elements intact across page breaks */
  .card,.swatch,.dd,.persona,.specimen,.picto,.frame-lite,.device,.paper,.tl .step,.slider-row,.deflist .item,.stat{
    break-inside:avoid;page-break-inside:avoid;
  }
  h2,h3,h4{break-after:avoid;page-break-after:avoid}
  /* trim oversized vertical rhythm so sections fit a landscape page */
  .section h2{font-size:40px}
  .mt56{margin-top:30px}.mt40{margin-top:24px}
  .picto:hover,.picto{transition:none}
  a[href]{text-decoration:none}
}