/* Pandaloop Admin Plane — Blueprint-Grau, Raster, Rot als Wuerze.
   Variablennamen wie in pandaloop.de/assets/styles.css. */

@font-face { font-family: 'Mozilla Headline'; src: url('/static/fonts/Mozilla_Headline_VF.woff2') format('woff2-variations');
             font-weight: 200 700; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/static/fonts/Geist_VF.woff2') format('woff2-variations');
             font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/static/fonts/Geist_Mono_VF.woff2') format('woff2-variations');
             font-weight: 100 900; font-display: swap; }

:root {
  --white:       #e4e4e4;
  --grey:        #959595;
  --black:       #222222;
  --red:         #e94b27;
  --orange:      #e66100;
  --lightgrey:   #bbb;
  --lightergrey: #ddd;

  --sp:  min(95vw, 2500px);
  --px:  calc(1 / 1600 * var(--sp));
  --gap: calc(12 * var(--px));
  --s1: calc((var(--sp) - 7 * var(--gap)) / 8);
  --s2: calc(2 * var(--s1) + var(--gap));
  --s4: calc(4 * var(--s1) + 3 * var(--gap));
  --s6: calc(6 * var(--s1) + 5 * var(--gap));

  --border-solid:  1px solid var(--black);
  --border-dashed: 1px dashed var(--black);
  --radius: calc(5 * var(--px));

  --ls-headline: calc(-1 / 40);
  --ls-mono:     calc(-1 / 15);
  --ls-body:     calc(-1 / 30);
}

@media (max-width: 800px) { :root { --gap: 5vw; } }

* { box-sizing: border-box; }

html {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: calc(17 * var(--px));
  letter-spacing: calc(var(--ls-body) * 1em);
  color: var(--black);
  background: var(--white);
}
body { margin: 0; min-height: 100vh; }

/* Hintergrund-Spaltenraster, liegt fest hinter allem. */
.bggrid {
  position: fixed; inset: 0; z-index: -2;
  display: flex; gap: var(--gap);
  width: var(--sp); margin: 0 auto;
  pointer-events: none;
}
.bggrid .cell { flex: 1; border-left: 1px dashed var(--lightgrey); }
.bggrid .cell:last-child { border-right: 1px dashed var(--lightgrey); }

/* Registerkreuze an den Rasterkanten — Passermarken aus dem Druck. */
.crosses { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.crosses span {
  position: absolute; width: calc(14 * var(--px)); height: calc(14 * var(--px));
  background: url('/static/cross.svg') no-repeat center / contain; opacity: .5;
}

.wrap { width: var(--sp); margin: 0 auto; padding: calc(28 * var(--px)) 0 calc(60 * var(--px)); }

/* -- Kopf ------------------------------------------------------------- */

header.top {
  display: flex; align-items: center; gap: var(--gap);
  padding-bottom: calc(14 * var(--px)); border-bottom: var(--border-solid);
}
header.top img.mark { height: calc(34 * var(--px)); width: auto; }
header.top .wordmark {
  font-family: 'Mozilla Headline', 'Geist', sans-serif; font-weight: 600;
  font-size: calc(26 * var(--px)); letter-spacing: calc(var(--ls-headline) * 1em);
  line-height: 1;
}
header.top nav { margin-left: auto; display: flex; gap: calc(6 * var(--px)); align-items: center; }

.navlink {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: calc(13 * var(--px)); text-transform: uppercase;
  letter-spacing: calc(var(--ls-mono) * 1em);
  padding: calc(6 * var(--px)) calc(11 * var(--px));
  background: #aeaeaea1; backdrop-filter: blur(10px);
  border-radius: var(--radius); color: var(--black); text-decoration: none;
  border: none; cursor: pointer; transition: background 150ms;
}
.navlink:hover { background: #e94b27a1; }

/* -- Abschnittslabel: roter Slash, Mono-Versalien, Haarlinie ---------- */

.section-label {
  display: flex; align-items: baseline; gap: calc(8 * var(--px));
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: calc(15 * var(--px)); text-transform: uppercase;
  letter-spacing: calc(var(--ls-mono) * 1em);
  margin: calc(38 * var(--px)) 0 calc(14 * var(--px));
  border-bottom: var(--border-solid); padding-bottom: calc(6 * var(--px));
}
.section-label .slash { color: var(--red); }
.section-label .count { margin-left: auto; color: var(--grey); }

h1 {
  font-family: 'Mozilla Headline', 'Geist', sans-serif;
  font-size: calc(75 * var(--px)); font-weight: 700; line-height: .8;
  letter-spacing: calc(var(--ls-headline) * 1em);
  margin: calc(24 * var(--px)) 0 calc(8 * var(--px));
}
h2 {
  font-family: 'Mozilla Headline', 'Geist', sans-serif;
  font-size: calc(36 * var(--px)); font-weight: 600; line-height: .9;
  letter-spacing: calc(var(--ls-headline) * 1em); margin: 0;
}

.mono { font-family: 'Geist Mono', ui-monospace, monospace; letter-spacing: calc(var(--ls-mono) * 1em); }
.caps { text-transform: uppercase; }
.dim  { color: var(--grey); }
.num  { color: var(--black); }
.num::before { content: '['; color: var(--red); }
.num::after  { content: ']'; color: var(--red); }

/* -- Instanzkarte als Terminalfenster --------------------------------- */

.grid { display: flex; flex-wrap: wrap; gap: var(--gap); }

.product-window {
  width: var(--s2); min-width: calc(260 * var(--px));
  border: var(--border-solid); background: var(--lightergrey);
  display: flex; flex-direction: column;
}
.product-window .head {
  display: flex; align-items: center; gap: calc(8 * var(--px));
  padding: calc(8 * var(--px)) calc(10 * var(--px));
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: calc(13 * var(--px)); text-transform: uppercase;
  letter-spacing: calc(var(--ls-mono) * 1em);
}
.product-window .head img { width: calc(14 * var(--px)); height: calc(14 * var(--px)); }
.product-window .head .n { margin: 0 auto; }
.product-window hr { border: none; border-top: var(--border-dashed); margin: 0; }
.product-window .body { padding: calc(12 * var(--px)) calc(10 * var(--px)); flex: 1; }
.product-window .body .name {
  font-family: 'Mozilla Headline', 'Geist', sans-serif; font-weight: 600;
  font-size: calc(28 * var(--px)); line-height: 1;
  letter-spacing: calc(var(--ls-headline) * 1em);
  word-break: break-word;
}
.product-window dl { margin: calc(12 * var(--px)) 0 0; font-size: calc(14 * var(--px)); }
.product-window dl div { display: flex; gap: calc(8 * var(--px)); padding: calc(3 * var(--px)) 0; }
.product-window dt {
  font-family: 'Geist Mono', ui-monospace, monospace; text-transform: uppercase;
  font-size: calc(12 * var(--px)); color: var(--grey); min-width: calc(74 * var(--px));
  letter-spacing: calc(var(--ls-mono) * 1em);
}
.product-window dd { margin: 0; word-break: break-all; }
.product-window .foot {
  display: flex; gap: calc(6 * var(--px)); padding: calc(10 * var(--px));
  border-top: var(--border-dashed);
}

/* Aktiver/verwalteter Zustand: Punktraster, wie .team-rider aktiv. */
.product-window.managed {
  background-image: radial-gradient(var(--lightgrey) calc(1 * var(--px)), transparent calc(1 * var(--px)));
  background-size: calc(9 * var(--px)) calc(9 * var(--px));
}

.taglabel {
  display: inline-block;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: calc(12 * var(--px)); text-transform: uppercase;
  letter-spacing: calc(var(--ls-mono) * 1em);
  padding: calc(2 * var(--px)) calc(7 * var(--px));
  border: 2px dotted var(--grey); border-radius: calc(3 * var(--px));
  background: linear-gradient(#ececec, #dcdcdc);
  transition: background 150ms, border-color 150ms;
}
.taglabel.hot { border-style: solid; border-color: var(--black); font-weight: 700; }

/* -- Formular ---------------------------------------------------------- */

form.panel { width: var(--s4); min-width: calc(300 * var(--px)); }
.field { margin-bottom: calc(14 * var(--px)); }
.field label {
  display: block; font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: calc(12 * var(--px)); text-transform: uppercase; color: var(--grey);
  letter-spacing: calc(var(--ls-mono) * 1em); margin-bottom: calc(4 * var(--px));
}
.field input, .field select, .field textarea {
  width: 100%; font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: calc(15 * var(--px)); letter-spacing: calc(var(--ls-mono) * 1em);
  padding: calc(8 * var(--px)) calc(10 * var(--px));
  border: var(--border-solid); border-radius: 0;
  background: var(--lightergrey); color: var(--black);
}
.field textarea { min-height: calc(90 * var(--px)); resize: vertical; }
.field .hint { font-size: calc(12 * var(--px)); color: var(--grey); margin-top: calc(4 * var(--px)); }

button.action {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: calc(14 * var(--px)); text-transform: uppercase;
  letter-spacing: calc(var(--ls-mono) * 1em);
  padding: calc(8 * var(--px)) calc(14 * var(--px));
  border: var(--border-solid); border-radius: 0;
  background: var(--white); color: var(--black); cursor: pointer;
  transition: background 150ms, color 150ms;
}
button.action:hover { background: var(--red); color: var(--white); }
button.action.quiet:hover { background: var(--black); }

/* -- Meldungen --------------------------------------------------------- */

.note { border: var(--border-solid); padding: calc(12 * var(--px)); margin: calc(16 * var(--px)) 0; background: var(--lightergrey); }
.note.bad { border-left: calc(4 * var(--px)) solid var(--red); }
.note.good { border-left: calc(4 * var(--px)) solid var(--black); }
.note .k { font-family: 'Geist Mono', ui-monospace, monospace; text-transform: uppercase; font-size: calc(12 * var(--px)); color: var(--grey); }

/* -- Anmeldung --------------------------------------------------------- */

.login-shell { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-box { width: var(--s2); min-width: calc(320 * var(--px)); border: var(--border-solid); background: var(--lightergrey); }
.login-box .head { display: flex; align-items: center; gap: calc(8 * var(--px)); padding: calc(9 * var(--px)) calc(11 * var(--px)); font-family: 'Geist Mono', ui-monospace, monospace; font-size: calc(13 * var(--px)); text-transform: uppercase; letter-spacing: calc(var(--ls-mono) * 1em); }
.login-box .head img { width: calc(14 * var(--px)); height: calc(14 * var(--px)); }
.login-box .body { padding: calc(16 * var(--px)); }

/* Randannotation in Mono, wie die Koordinaten am Hero-Rand. */
.annotation {
  position: fixed; bottom: calc(12 * var(--px)); left: calc(14 * var(--px));
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: calc(11 * var(--px)); color: var(--grey);
  letter-spacing: calc(var(--ls-mono) * 1em); text-transform: uppercase;
}