/* 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);
}

/* Verwaltete Instanzen sind der Normalfall: ruhige Flaeche, fester Rahmen.
   Fremde fallen auf — gestrichelter Rahmen und Punktraster, wie eine
   Flaeche in einer technischen Zeichnung, die nicht zum Bauteil gehoert. */
.product-window.unmanaged {
  border: var(--border-dashed);
  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));
}
.product-window.unmanaged .name { color: var(--grey); }
.product-window.unmanaged .head { color: var(--grey); }

.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;
}

/* -- Navigation: Logo als Heimweg, aktiver Punkt ---------------------- */

header.top .home {
  display: flex; align-items: center; gap: var(--gap);
  text-decoration: none; color: var(--black);
}
header.top .home img.mark { transition: transform 150ms; }
header.top .home:hover img.mark { transform: rotate(-4deg); }
.navlink.on { background: #e94b27a1; }

/* -- Tabelle: Zeilen als Raster, kein Kasten -------------------------- */

table.listing {
  width: 100%; border-collapse: collapse;
  margin-top: calc(4 * var(--px));
}
table.listing th {
  text-align: left;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: calc(12 * var(--px)); text-transform: uppercase;
  letter-spacing: calc(var(--ls-mono) * 1em);
  color: var(--grey); font-weight: 400;
  padding: calc(6 * var(--px)) calc(8 * var(--px));
  border-bottom: var(--border-solid);
}
table.listing td {
  padding: calc(9 * var(--px)) calc(8 * var(--px));
  border-bottom: var(--border-dashed);
  font-size: calc(15 * var(--px)); vertical-align: top;
}
table.listing tr:hover td { background: var(--lightergrey); }

/* Kacheln des Dashboards duerfen schmaler stehen als Produktfenster. */
.grid .product-window { min-width: calc(220 * var(--px)); }

/* -- Filterzeile ------------------------------------------------------ */

.filters {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: calc(6 * var(--px));
  margin: calc(10 * var(--px)) 0 calc(4 * var(--px));
}
.filters a.taglabel { text-decoration: none; color: var(--black); }
.filters a.taglabel:hover { background: var(--red); color: var(--white); border-color: var(--black); }
.filters a.taglabel.hot { background: var(--black); color: var(--white); border-color: var(--black); }
.filters a.taglabel.hot .dim { color: var(--lightgrey); }
.filters .sep { color: var(--grey); margin: 0 calc(4 * var(--px)); }

/* -- Links: kein Browser-Blau, roter Marker beim Überfahren ------------ */

a { color: var(--black); text-decoration: none; }
.wrap p a, .wrap dd a, td a:not(.navlink):not(.action) {
  border-bottom: 1px solid var(--grey);
  transition: border-color 150ms, color 150ms;
}
.wrap p a:hover, .wrap dd a:hover, td a:not(.navlink):not(.action):hover {
  border-bottom-color: var(--red);
}
/* Trennzeichen in Linkzeilen bleibt grau, der Slash rot — wie im Fußzeilen-
   Muster "Seite 1 / 3". */
.linkline { display: flex; gap: calc(8 * var(--px)); align-items: baseline; }
.linkline .sep { color: var(--red); }

/* -- Kachelfuß: Mono-Labels statt Knöpfe ------------------------------- */

.product-window .foot {
  display: flex; align-items: center; gap: calc(10 * var(--px));
  padding: calc(8 * var(--px)) calc(10 * var(--px));
  border-top: var(--border-dashed);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: calc(12 * var(--px)); text-transform: uppercase;
  letter-spacing: calc(var(--ls-mono) * 1em);
}
.product-window .foot form { display: inline; }
.act {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--black); border-bottom: 1px solid var(--grey);
  transition: color 150ms, border-color 150ms;
}
.act:hover { color: var(--red); border-bottom-color: var(--red); }
.act.danger { color: var(--grey); }
.act.danger:hover { color: var(--red); border-bottom-color: var(--red); }
.product-window .foot .right { margin-left: auto; }

/* Der Löschbereich klappt unter der Kachel auf, statt sie zu sprengen. */
.product-window details.remove { width: 100%; }
.product-window details.remove > summary { list-style: none; cursor: pointer; }
.product-window details.remove > summary::-webkit-details-marker { display: none; }
.product-window details.remove[open] { padding-top: calc(8 * var(--px)); }

/* -- QR-Code: auf heller Flaeche, sonst lesen ihn manche Kameras nicht -- */

.qr {
  display: inline-block;
  background: #fff; padding: calc(8 * var(--px));
  border: var(--border-solid);
  margin: calc(8 * var(--px)) 0;
}
.qr svg { display: block; width: calc(190 * var(--px)); height: auto; }

/* Aktueller Punkt der Unternavigation: kein Link, aber sichtbar der Ort. */
.linkline .hier { color: var(--black); border-bottom: 1px solid var(--black); }