/* Preflite | Cockpit-Panel und Pilotencheckliste, Mobile-First */

@font-face { font-family: "Plex"; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex"; src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex"; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Condensed"; src: url("../fonts/ibm-plex-sans-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  /* Panel */
  --panel: #3A4549;
  --panel-2: #2C3538;
  --panel-3: #4A575C;
  --well: #1B2124;
  --well-edge: #11171A;
  --engrave: #E6E4DA;
  --engrave-2: #A9B2B0;
  --engrave-3: #75817F;

  /* Warnleuchten */
  --lamp-red: #E5483B;
  --lamp-amber: #F2A93B;
  --lamp-green: #5FBF6B;
  --lamp-blue: #6FA8DC;
  --lamp-off: #283034;

  /* Papier */
  --paper: #E8EBE5;
  --sheet: #FAFBF8;
  --ink: #1C2227;
  --ink-2: #4B555D;
  --rule: #BFC7BD;
  --rule-soft: #DCE1D9;
  --ok: #466629;
  --ok-bg: #E7EEDF;
  --warn: #83550A;
  --warn-bg: #F5ECDA;
  --err: #9C3222;
  --err-bg: #F6E3DF;
  --dyn: #365672;
  --dyn-bg: #E1E9F0;

  --sans: "Plex", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond: "Plex Condensed", "Plex", system-ui, sans-serif;
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --plate: #323C40;
  --plate-edge: #283034;

  --s1: .5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2rem;
  --pad: 1rem;
  --maxw: 90rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 4.5rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--lamp-amber); outline-offset: 2px; }

.spinner { width: 1rem; height: 1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ================= Panel ================= */

.panel {
  min-height: 100vh;
  color: var(--engrave);
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255, 255, 255, .07), transparent 60%),
    var(--panel);
  border-bottom: 5px solid var(--panel-2);
  box-shadow: 0 6px 18px rgba(20, 26, 29, .25);
}

.topbar {
  max-width: var(--maxw); margin: 0 auto; padding: .8rem var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, .25);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05);
}
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; font: 600 1.15rem/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; }
.brand__mark { width: 1.5rem; height: 1.5rem; }

.panel__inner { max-width: var(--maxw); margin: 0 auto; padding: 1.75rem var(--pad) 2rem; }

.title { font: 600 clamp(2.2rem, 9vw, 3.6rem)/1 var(--cond); letter-spacing: .005em; }
.lead { margin-top: .8rem; max-width: 40rem; color: var(--engrave-2); }

.engrave { display: block; font: 600 .74rem/1.3 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--engrave-2); }
.engrave__opt { letter-spacing: .06em; color: var(--engrave-3); }
.hint { font-size: .82rem; color: var(--engrave-3); }

/* Eingabefelder im Panel */
.field { display: grid; gap: .4rem; }
.field input, .field select {
  width: 100%; min-height: 2.9rem; padding: .55rem .8rem;
  background: var(--well); color: #F4F2EA;
  border: 1px solid var(--well-edge); border-radius: 6px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .06);
}
.field input::placeholder { color: #5E6A6E; }
.field input:focus, .field select:focus { outline: none; border-color: var(--lamp-amber); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45), 0 0 0 3px rgba(242, 169, 59, .25); }
.field--big input { min-height: 3.6rem; font: 400 1.2rem/1.2 var(--mono); letter-spacing: -.01em; }

.notice { padding: .7rem .9rem; border-radius: 6px; font-size: .92rem; border-left: 3px solid; }
.notice--err { background: rgba(229, 72, 59, .14); border-color: var(--lamp-red); color: #FFC9C3; }
.notice--warn { background: rgba(242, 169, 59, .13); border-color: var(--lamp-amber); color: #FFDFAE; }
.notice--dyn { background: rgba(111, 168, 220, .13); border-color: var(--lamp-blue); color: #CFE3F5; }

/* ================= Anmeldung ================= */

body.is-login {
  min-height: 100vh; min-height: 100dvh; color: var(--engrave);
  background: radial-gradient(90% 60% at 50% 0%, rgba(255, 255, 255, .08), transparent 65%), var(--panel);
}
.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem var(--pad); }
.login__desk {
  width: min(100%, 25rem); display: grid; gap: 1.1rem; padding: 2rem 1.35rem 1.5rem;
  border: 1px solid #242C2F; border-radius: 16px;
  background:
    radial-gradient(circle at 14px 14px, #5A676C 0 2.5px, #1A2124 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 14px) 14px, #5A676C 0 2.5px, #1A2124 3px, transparent 4px),
    radial-gradient(circle at 14px calc(100% - 14px), #5A676C 0 2.5px, #1A2124 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), #5A676C 0 2.5px, #1A2124 3px, transparent 4px),
    var(--panel-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 50px rgba(10, 14, 16, .45);
}
.login__brand { display: grid; justify-items: center; text-align: center; gap: .35rem; }
.login__gauge { width: 7.5rem; height: 7.5rem; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .45)); }
.login__needle { transform-origin: 60px 60px; transform: rotate(-135deg); animation: needle-up 1.6s cubic-bezier(.3, .9, .3, 1.05) .3s forwards; }
@keyframes needle-up { to { transform: rotate(52deg); } }
.login__name { margin-top: .7rem; padding-left: .22em; font: 600 1.9rem/1 var(--cond); letter-spacing: .22em; text-transform: uppercase; }
.login__claim { color: var(--engrave-3); font-size: .88rem; }
.login__lamps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 5px; background: #161C1E; border-radius: 8px; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6); }
.minilamp {
  display: grid; place-items: center; min-height: 2.1rem; padding: .2rem; border-radius: 4px;
  font: 600 .62rem/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: #5F6B6F;
  background: linear-gradient(180deg, #2E373A, var(--lamp-off));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  animation: lamp-on .2s ease-out .6s forwards;
}
.minilamp:nth-child(2) { animation-delay: 1s; }
.minilamp:nth-child(3) { animation-delay: 1.4s; }
.minilamp.is-denied { animation: lamp-deny .9s steps(1) .6s 3 forwards; }
@keyframes lamp-on {
  to { background: radial-gradient(90% 80% at 50% 35%, #8BDB95, #4FA85B 75%); color: #0E2A13; box-shadow: 0 0 12px rgba(95, 191, 107, .5), inset 0 0 6px rgba(255, 255, 255, .35); }
}
@keyframes lamp-deny {
  0%, 100% { background: radial-gradient(90% 80% at 50% 35%, #FF8578, #C8392D 75%); color: #fff; box-shadow: 0 0 14px rgba(229, 72, 59, .6); }
  50% { background: linear-gradient(180deg, #2E373A, var(--lamp-off)); color: #5F6B6F; box-shadow: none; }
}
.caution { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; padding: .6rem .75rem; border-radius: 6px; background: rgba(242, 169, 59, .1); color: #FFDFAE; font-size: .85rem; }
.caution__lamp { width: .7rem; height: .7rem; margin-top: .3rem; border-radius: 50%; background: var(--lamp-amber); box-shadow: 0 0 8px rgba(242, 169, 59, .8); animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
.login .guard { display: block; }
.login .start { width: 100%; }

/* Konsole (Eingang) */
.console {
  margin-top: 1.5rem; padding: 1rem;
  display: grid; gap: 1rem;
  background: var(--panel-2);
  border: 1px solid #242C2F; border-radius: 12px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .06);
}
.modes { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; background: var(--well); border-radius: 8px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5); }
.modes__btn {
  min-height: 2.6rem; padding: .4rem .8rem; border: 0; border-radius: 6px; background: transparent; cursor: pointer;
  font: 600 .85rem/1.2 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--engrave-3);
}
.modes__btn[aria-selected="true"] {
  color: var(--engrave);
  background: linear-gradient(180deg, #56646A, var(--panel-3));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 2px 4px rgba(0, 0, 0, .4);
}
.pane { display: grid; gap: .9rem; }

.auth summary { cursor: pointer; font-size: .88rem; color: var(--engrave-2); list-style: none; display: inline-flex; align-items: center; gap: .45rem; min-height: 2rem; }
.auth summary::-webkit-details-marker { display: none; }
.auth summary::before { content: ""; width: .42rem; height: .42rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.auth[open] summary::before { transform: rotate(45deg); }
.auth__grid { display: grid; gap: .8rem; margin-top: .6rem; }
.auth .hint { margin-top: .5rem; }

.drop {
  position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1rem;
  padding: 1.1rem 1rem; cursor: pointer;
  background: #232B2E; border: 2px dashed #56636A; border-radius: 8px;
}
.drop:hover, .drop.is-over { border-color: var(--lamp-amber); }
.drop.is-filled { border-style: solid; border-color: var(--lamp-green); }
.drop__input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.drop__input:focus-visible ~ .drop__icon { outline: 3px solid var(--lamp-amber); outline-offset: 4px; border-radius: 4px; }
.drop__icon { width: 2.4rem; height: 2.4rem; color: var(--engrave-2); }
.drop__icon svg { width: 100%; height: 100%; }
.drop__body { display: grid; gap: .45rem; min-width: 0; }
.drop__text { overflow-wrap: anywhere; }
.drop__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.fmt { padding: 0 .35rem; border: 1px solid var(--engrave-3); border-radius: 2px; font: 600 .7rem/1.5 var(--cond); letter-spacing: .08em; color: var(--engrave-2); }
.drop__meta .hint { margin-left: .25rem; }

.console__foot { display: grid; gap: 1.1rem; padding-top: 1rem; border-top: 1px solid rgba(0, 0, 0, .3); box-shadow: 0 -1px 0 rgba(255, 255, 255, .04); }

/* Kippschalter */
.switch { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track {
  position: relative; width: 3rem; height: 1.6rem; margin-top: .05rem;
  background: var(--well); border-radius: 1rem; border: 1px solid var(--well-edge);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .55);
  transition: background-color .15s;
}
.switch__knob {
  position: absolute; top: 2px; left: 2px; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: linear-gradient(180deg, #E1E3DC, #A9ADA6);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .5);
  transition: transform .15s;
}
.switch input:checked + .switch__track { background: #2F5A36; }
.switch input:checked + .switch__track .switch__knob { transform: translateX(1.4rem); }
.switch input:focus-visible + .switch__track { outline: 3px solid var(--lamp-amber); outline-offset: 2px; }
.switch__text { font-weight: 500; font-size: .95rem; }
.switch__text .hint { display: block; font-weight: 400; }

/* Startschalter mit Schutzrahmen */
.guard {
  display: inline-block; padding: 5px; border-radius: 9px;
  background: repeating-linear-gradient(135deg, var(--lamp-amber) 0 9px, #20282B 9px 18px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}
.start {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3.3rem; min-width: 14rem; padding: .6rem 1.8rem;
  border: 1px solid #0F1416; border-radius: 6px; cursor: pointer;
  background: linear-gradient(180deg, #2B3437, #1C2326);
  color: var(--lamp-amber);
  font: 600 1.05rem/1 var(--cond); letter-spacing: .14em; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -2px 0 rgba(0, 0, 0, .4);
}
.start:hover:not(:disabled) { text-shadow: 0 0 10px rgba(242, 169, 59, .7); }
.start:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6); }
.start:disabled { color: var(--engrave-3); cursor: not-allowed; }
.console__foot .guard { justify-self: stretch; }
.console__foot .start { width: 100%; }

/* ================= Warnleuchten ================= */

.lamps { margin-top: 1.75rem; }
.lamps__head { display: grid; gap: .2rem; margin-bottom: .5rem; }
.lamps__hint { font-size: .82rem; color: var(--engrave-3); max-width: 46rem; }
/* Sobald ein Ergebnis da ist, treten Schnellzugriff und Erklärtext zurück */
.has-result .lamps__hint { display: none; }
.lamps__title { margin-bottom: .6rem; }
/*
 * Die Zahl der Leuchten geht nicht in jedem Raster auf. Deshalb flexibel mit
 * fester Spaltenzahl je Breite und zentrierter letzter Reihe, damit keine
 * einzelnen Leuchten links hängen bleiben.
 */
.lamps__grid {
  --cols: 2;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 6px;
  background: #161C1E; border-radius: 10px; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .06);
}
.lamps__grid > .lamp { flex: 0 1 calc((100% - (var(--cols) - 1) * 6px) / var(--cols)); }
.lamp { padding: 3px; border: 0; background: #0F1416; border-radius: 6px; cursor: pointer; min-width: 0; }
.lamp:disabled { cursor: default; }
.lamp__glass {
  display: grid; place-items: center; min-height: 3.3rem; padding: .35rem .3rem; border-radius: 4px;
  background: linear-gradient(180deg, #2E373A, var(--lamp-off));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -2px 4px rgba(0, 0, 0, .4);
  font: 600 .68rem/1.15 var(--cond); letter-spacing: .08em; text-transform: uppercase; text-align: center;
  color: #5F6B6F; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere;
  transition: background .2s, color .2s, box-shadow .3s;
}
.lamp.is-lit.lamp--ok .lamp__glass {
  background: radial-gradient(90% 80% at 50% 35%, #8BDB95, #4FA85B 75%);
  color: #0E2A13; box-shadow: 0 0 16px rgba(95, 191, 107, .5), inset 0 0 8px rgba(255, 255, 255, .35);
}
.lamp.is-lit.lamp--warn .lamp__glass {
  background: radial-gradient(90% 80% at 50% 35%, #FFD48A, #E09A2A 75%);
  color: #3A2600; box-shadow: 0 0 16px rgba(242, 169, 59, .55), inset 0 0 8px rgba(255, 255, 255, .35);
}
.lamp.is-lit.lamp--err .lamp__glass {
  background: radial-gradient(90% 80% at 50% 35%, #FF8578, #C8392D 75%);
  color: #fff; box-shadow: 0 0 18px rgba(229, 72, 59, .6), inset 0 0 8px rgba(255, 255, 255, .3);
}
.lamp:not(:disabled):hover .lamp__glass { filter: brightness(1.08); }

/* ================= Ergebnis im Panel ================= */

.result { display: grid; gap: var(--s3); }
.result__notes { display: grid; gap: var(--s1); }

/* Aktionsleiste */
.bar {
  display: grid; gap: var(--s2); padding: var(--s2);
  background: var(--plate); border: 1px solid var(--plate-edge); border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 2px 6px rgba(0, 0, 0, .18);
}
.bar__id { min-width: 0; }
.bar__page { font: 600 1.15rem/1.3 var(--sans); color: var(--engrave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar__meta { margin-top: .25rem; font: 400 .75rem/1.5 var(--mono); color: var(--engrave-3); white-space: pre-wrap; }
.bar__pages select { min-height: 2.6rem; }
.bar__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1); }
.bar__actions .pbtn--primary { grid-column: 1 / -1; }
.bar__status { font-size: .9rem; color: var(--engrave-2); display: flex; align-items: center; gap: var(--s1); }
.bar__status.is-err { color: #FFC9C3; }

.pbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 2.6rem; padding: .45rem 1rem; cursor: pointer; white-space: nowrap;
  background: linear-gradient(180deg, #56646A, var(--panel-3)); color: var(--engrave);
  border: 1px solid #242C2F; border-radius: 6px;
  font: 600 .8rem/1 var(--cond); letter-spacing: .1em; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 3px rgba(0, 0, 0, .35);
}
.pbtn:hover { color: #fff; }
.pbtn:active { transform: translateY(1px); }
.pbtn:disabled { opacity: .7; cursor: progress; }
.pbtn--primary { color: var(--lamp-amber); background: linear-gradient(180deg, #2B3437, #1C2326); border-color: #0F1416; }
.pbtn--primary:hover { color: var(--lamp-amber); text-shadow: 0 0 8px rgba(242, 169, 59, .6); }

/* Module */
.mod {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--plate); border: 1px solid var(--plate-edge); border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 2px 6px rgba(0, 0, 0, .18);
}
.mod__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1) var(--s2);
  min-height: 3.25rem; padding: var(--s1) var(--s2);
  border-bottom: 1px solid rgba(0, 0, 0, .3); box-shadow: 0 1px 0 rgba(255, 255, 255, .04);
}
.mod__title { font: 600 .74rem/1.3 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--engrave-2); }
.mod__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); }
.mod__link { font-size: .85rem; color: var(--engrave-2); text-underline-offset: 3px; }
.mod__link::after { content: " \2197"; }
.mod__link:hover { color: var(--engrave); }
.mod__body { flex: 1; display: flex; flex-direction: column; gap: var(--s3); padding: var(--s2); min-width: 0; }
.mod__foot {
  display: grid; gap: var(--s2); padding: var(--s2);
  border-top: 1px solid rgba(0, 0, 0, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.mod__notes { display: grid; gap: .3rem; }

/* Ergebnis-Modul */
.dial { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s2); align-items: center; }
.dial__side { display: contents; }
.dial .counters { grid-column: 1 / -1; }

.gauge { width: 8.5rem; height: 8.5rem; display: block; }
.gauge__needle { transform-origin: 100px 100px; transition: transform .12s linear; }
.gauge__value { font: 400 30px/1 var(--mono); fill: #F4F2EA; }
.gauge__unit { font: 600 9px/1 var(--cond); letter-spacing: .14em; fill: var(--engrave-3); }
.gauge__num { font: 600 11px/1 var(--cond); fill: var(--engrave-2); }

.verdict {
  padding: .85rem 1rem; border-radius: 8px; min-width: 0;
  background: #141A1C; border: 1px solid #0B0F11;
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .06);
}
.verdict__label {
  font: 600 clamp(1.25rem, 5.6vw, 2.4rem)/1.05 var(--cond); letter-spacing: .05em; text-transform: uppercase;
  color: #323B3E; transition: color .3s, text-shadow .4s;
  overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto;
}
.verdict.is-lit.verdict--ok .verdict__label { color: var(--lamp-green); text-shadow: 0 0 18px rgba(95, 191, 107, .55); }
.verdict.is-lit.verdict--warn .verdict__label { color: var(--lamp-amber); text-shadow: 0 0 18px rgba(242, 169, 59, .55); }
.verdict.is-lit.verdict--err .verdict__label { color: var(--lamp-red); text-shadow: 0 0 20px rgba(229, 72, 59, .6); }

.counters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); }
.counter {
  --c: var(--lamp-green);
  display: grid; gap: .3rem; padding: .55rem .7rem; min-width: 0;
  background: #262F32; border-radius: 6px; border-left: 3px solid var(--c);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35);
}
.counter--err { --c: var(--lamp-red); }
.counter--warn { --c: var(--lamp-amber); }
.counter__num { font: 400 1.35rem/1 var(--mono); color: #F4F2EA; }
.counter__label { font: 600 .66rem/1.2 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--engrave-3); }

.mod .lamps { margin-top: auto; padding-top: var(--s3); border-top: 1px solid rgba(0, 0, 0, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.mod .lamps__title { margin-bottom: var(--s1); }

/* Website-Modul: Monitor und Smartphone */
.devices__stage { flex: 1; display: grid; align-content: end; }
.device { min-width: 0; }
.device.is-off { display: none; }
.device__label { margin-top: var(--s1); text-align: center; font: 600 .7rem/1.3 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--engrave-3); }

.viewport { position: relative; overflow: hidden; background: #fff; }
.viewport iframe { position: absolute; top: 0; left: 0; border: 0; background: #fff; transform-origin: 0 0; }
.viewport--desk { aspect-ratio: 1366 / 854; border-radius: 3px; }
.viewport--phone { aspect-ratio: 390 / 844; border-radius: 24px; }
.viewport__load { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .55rem; background: #1B2124; color: var(--engrave-2); font-size: .85rem; }

.phone {
  position: relative; width: min(17rem, 78vw); margin: 0 auto; padding: 11px;
  background: linear-gradient(145deg, #232B2E, #0E1214 60%); border: 1px solid #3A4549; border-radius: 36px;
  box-shadow: 0 16px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.phone__island { position: absolute; z-index: 2; top: 19px; left: 50%; width: 26%; height: 15px; transform: translateX(-50%); background: #0B0E10; border-radius: 10px; }

.monitor__bezel {
  padding: 10px 10px 16px; background: linear-gradient(180deg, #1C2326, #0E1214); border: 1px solid #333D41; border-radius: 10px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.monitor__stand { width: 22%; height: 22px; margin: 0 auto; background: linear-gradient(180deg, #151B1D, #2A3336); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
.monitor__foot { width: 34%; height: 6px; margin: 0 auto; background: #2A3336; border-radius: 3px 3px 5px 5px; box-shadow: 0 4px 8px rgba(0, 0, 0, .35); }

.status-line { display: flex; align-items: center; gap: var(--s1); font-size: .9rem; color: var(--engrave); }
.status-line::before { content: ""; flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: var(--engrave-3); }
.status-line--ok::before { background: var(--lamp-green); box-shadow: 0 0 8px rgba(95, 191, 107, .7); }
.status-line--warn::before { background: var(--lamp-amber); box-shadow: 0 0 8px rgba(242, 169, 59, .7); }

/* Google- und Teilen-Modul */
.screen__bezel {
  padding: 8px; border-radius: 10px; background: #151B1D; border: 1px solid #0B0F11;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .07);
}
.screen__glass { background: #fff; color: #202124; border-radius: 5px; padding: 1rem .9rem; overflow: hidden; }

.tabs { display: inline-flex; padding: 2px; background: var(--well); border-radius: 6px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5); }
.tabs button { min-height: 2rem; padding: .25rem .8rem; border: 0; border-radius: 4px; background: transparent; cursor: pointer; font: 600 .72rem/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--engrave-3); }
.tabs button[aria-selected="true"] { color: var(--engrave); background: var(--panel-3); }

.serp { font-family: Arial, "Liberation Sans", Helvetica, sans-serif; color: #202124; max-width: 600px; }
.serp__site { display: flex; align-items: center; gap: .7rem; }
.serp__fav { width: 28px; height: 28px; border-radius: 50%; background: #F1F3F4; border: 1px solid #DADCE0; display: grid; place-items: center; flex: none; overflow: hidden; }
.serp__fav img { width: 18px; height: 18px; object-fit: contain; }
.serp__fav svg { width: 16px; height: 16px; color: #5F6368; }
.serp__sitename { font-size: 14px; line-height: 20px; color: #202124; }
.serp__url { font-size: 12px; line-height: 18px; color: #4D5156; overflow-wrap: anywhere; }
.serp__title { margin-top: 6px; font-size: 20px; line-height: 26px; color: #1A0DAB; font-weight: 400; overflow-wrap: anywhere; }
.serp__desc { margin-top: 4px; font-size: 14px; line-height: 22px; color: #4D5156; overflow-wrap: anywhere; }
.serp__guess { font-style: italic; }
.serp--mobile { max-width: 380px; margin: 0 auto; padding: 14px 16px; border-radius: 16px; box-shadow: 0 1px 6px rgba(32, 33, 36, .18); }
.serp--mobile .serp__title { font-size: 18px; line-height: 24px; }

.meters { margin-top: .9rem; display: grid; gap: .8rem; }
.meter__row { display: flex; justify-content: space-between; gap: .75rem; font-size: .82rem; color: var(--engrave-2); }
.meter__row .engrave { display: inline; }
.meter__track { position: relative; height: 8px; margin-top: .35rem; background: var(--well); border-radius: 4px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6); }
.meter__fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--lamp-green); box-shadow: 0 0 8px rgba(95, 191, 107, .5); max-width: 100%; }
.meter__limit { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--engrave); }
.meter--warn .meter__fill { background: var(--lamp-amber); box-shadow: 0 0 8px rgba(242, 169, 59, .5); }

.share { max-width: 30rem; margin: 0 auto; background: #fff; border: 1px solid #DADDE1; border-radius: 8px; overflow: hidden; font-family: Arial, "Liberation Sans", Helvetica, sans-serif; }
.screen__glass--share { background: #E9EBEE; }
.share__img { aspect-ratio: 1.91 / 1; background: #DDE1E4; display: grid; place-items: center; color: #5C656B; font: 400 .85rem/1.35 var(--sans); text-align: center; padding: 1rem; }
.share__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.share__img.has-img { padding: 0; }
.share__body { padding: 10px 12px 12px; background: #F2F3F5; border-top: 1px solid #DADDE1; }
.share__host { font-size: 12px; color: #606770; text-transform: uppercase; letter-spacing: .02em; }
.share__title { margin-top: 3px; font-size: 16px; line-height: 20px; font-weight: 700; color: #1D2129; overflow-wrap: anywhere; }
.share__desc { margin-top: 3px; font-size: 14px; line-height: 20px; color: #606770; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.phpchip { display: inline-block; padding: 0 .3rem; margin: 0 .1rem; border-radius: 3px; background: var(--dyn); color: #fff; font: 600 .72rem/1.5 var(--sans); vertical-align: .08em; }

/* ================= Checkliste (Papier) ================= */

.report { max-width: var(--maxw); margin: 0 auto; padding: 1.5rem var(--pad) 4rem; }
.report__layout { display: grid; gap: 1rem; }
.report__main { display: grid; gap: 1.25rem; min-width: 0; }

.toc {
  position: sticky; top: 0; z-index: 5;
  margin: 0 calc(-1 * var(--pad)); padding: .55rem var(--pad);
  display: flex; gap: .4rem; overflow-x: auto; white-space: nowrap; scrollbar-width: none;
  background: var(--paper); border-bottom: 1px solid var(--rule);
}
.toc::-webkit-scrollbar { display: none; }
.toc__title { display: none; }
.toc__item {
  display: inline-flex; align-items: center; gap: .4rem; flex: none;
  min-height: 2.2rem; padding: .3rem .65rem;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 6px;
  font-size: .85rem; text-decoration: none;
}
.toc__item[aria-current="true"] { background: var(--panel-2); border-color: var(--panel-2); color: var(--engrave); }
.toc__num { font: 600 .85rem/1 var(--cond); opacity: .7; }
.toc__marks { display: inline-flex; align-items: center; gap: .2rem; }
.mark { min-width: 1.25rem; padding: 0 .3rem; border-radius: 3px; font: 600 .72rem/1.45 var(--sans); text-align: center; color: #fff; }
.mark--err { background: var(--err); }
.mark--warn { background: var(--warn); }
.mark--ok { width: .6rem; height: .6rem; min-width: 0; padding: 0; border-radius: 50%; background: var(--lamp-green); box-shadow: 0 0 0 2px rgba(95, 191, 107, .25); }

.card {
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(28, 34, 39, .08), 0 8px 20px -14px rgba(28, 34, 39, .35);
}
.card__head {
  display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; align-items: center;
  padding: .9rem var(--pad); background: var(--panel-2); color: var(--engrave);
}
.card__num {
  grid-row: span 2; width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
  border: 2px solid var(--engrave-3); border-radius: 6px;
  font: 600 1.1rem/1 var(--cond); color: var(--engrave);
}
.card__title { font: 600 1.25rem/1.15 var(--cond); letter-spacing: .02em; }
.card__sum { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; font: 600 .72rem/1.3 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--engrave-2); }
.card__sum span { display: inline-flex; align-items: center; gap: .35rem; }
.card__sum i { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; }
.card__intro { padding: .7rem var(--pad) 0; font-size: .88rem; color: var(--ink-2); }
.card__body { padding: 0 var(--pad) .4rem; }

.checks { list-style: none; margin: .6rem 0 0; padding: 0; }
.check {
  --c: var(--ok); --c-bg: var(--ok-bg); --lamp: var(--lamp-green); --halo: rgba(95, 191, 107, .25);
  padding: .95rem 0; border-bottom: 1px solid var(--rule-soft);
  scroll-margin-top: 4.5rem;
}
.check:last-child { border-bottom: 0; }
.check--warn { --c: var(--warn); --c-bg: var(--warn-bg); --lamp: var(--lamp-amber); --halo: rgba(242, 169, 59, .25); }
.check--error, .check--missing { --c: var(--err); --c-bg: var(--err-bg); --lamp: var(--lamp-red); --halo: rgba(229, 72, 59, .25); }
.check--info, .check--dyn { --c: var(--dyn); --c-bg: var(--dyn-bg); --lamp: var(--lamp-blue); --halo: rgba(111, 168, 220, .25); }
.check.is-target { background: var(--c-bg); box-shadow: -1rem 0 0 var(--c-bg), 1rem 0 0 var(--c-bg); transition: background-color .6s; }

.check__line { display: flex; align-items: baseline; gap: .5rem; }
.check__num { font: 400 .75rem/1 var(--mono); color: var(--ink-2); flex: none; min-width: 2.1rem; }
.check__title { font-size: 1rem; font-weight: 600; min-width: 0; }
.check__leader { flex: 1 1 1.5rem; min-width: 1.5rem; border-bottom: 2px dotted #9AA59C; transform: translateY(-.25rem); }
.check__status {
  flex: none; display: inline-flex; align-items: center; gap: .4rem;
  font: 600 .78rem/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--c);
}
.check__status::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 0 2px var(--halo); }
.check__body { padding-left: 2.6rem; min-width: 0; }
.check__value {
  margin-top: .4rem; padding: .35rem .55rem;
  background: var(--paper); border-radius: 4px;
  font: 400 .83rem/1.5 var(--mono); overflow-wrap: anywhere; white-space: pre-wrap;
}
.check__msg { margin-top: .35rem; font-size: .93rem; color: var(--ink-2); }
.check__items { margin: .45rem 0 0; padding: 0 0 0 1rem; font-size: .85rem; color: var(--ink-2); }
.check__items li { overflow-wrap: anywhere; margin-top: .15rem; }
.check__items .more { list-style: none; margin-left: -1rem; font-style: italic; }

.checks--ok { margin-top: 0; }
.checks--ok .check { padding: .6rem 0; }
.checks--ok .check__title { font-weight: 500; font-size: .95rem; }

.okrow {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  min-height: 3rem; padding: .5rem 0; margin-top: .2rem;
  background: none; border: 0; border-top: 1px solid var(--rule); cursor: pointer; text-align: left;
  font: 600 .8rem/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--ok);
}
.okrow__dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--lamp-green); flex: none; }
.okrow__leader { flex: 1; border-bottom: 2px dotted #9AA59C; }
.okrow__action { color: var(--ink-2); display: inline-flex; align-items: center; gap: .4rem; }
.okrow__action::after { content: ""; width: .42rem; height: .42rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.okrow[aria-expanded="true"] .okrow__action::after { transform: rotate(-135deg) translateY(-2px); }

.fix { margin-top: .55rem; }
.fix summary { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; list-style: none; font-size: .9rem; font-weight: 600; min-height: 2rem; }
.fix summary::-webkit-details-marker { display: none; }
.fix summary::before { content: ""; width: .45rem; height: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.fix[open] summary::before { transform: rotate(45deg); }
.fix__text { margin-top: .35rem; font-size: .93rem; }
.code { position: relative; margin-top: .5rem; }
.code pre {
  margin: 0; padding: .75rem .85rem; padding-right: 5.5rem;
  background: var(--panel-2); color: #E3E8E1; border-radius: 6px;
  font: 400 .82rem/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere;
}
.code button { position: absolute; top: .45rem; right: .45rem; background: transparent; color: #E3E8E1; border: 1px solid #6B757C; border-radius: 4px; font-size: .78rem; padding: .2rem .55rem; cursor: pointer; min-height: 1.9rem; }
.code button:hover { border-color: #E3E8E1; }


/* ================= Kundenbericht ================= */

/* Schalter Fachbericht / Kundenbericht in der Aktionsleiste */
.variant { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; background: var(--well); border-radius: 8px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5); }
.variant__btn {
  min-height: 2.35rem; padding: .3rem .85rem; border: 0; border-radius: 6px; background: transparent; cursor: pointer; white-space: nowrap;
  font: 600 .78rem/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--engrave-3);
}
.variant__btn[aria-checked="true"] { color: var(--engrave); background: linear-gradient(180deg, #56646A, var(--panel-3)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 4px rgba(0, 0, 0, .4); }
.bar__actions .variant { grid-column: 1 / -1; }

.ampel { flex: none; width: .9rem; height: .9rem; border-radius: 50%; background: #B9C1BA; box-shadow: 0 0 0 3px rgba(185, 193, 186, .3); }
.ampel--ok { background: var(--lamp-green); box-shadow: 0 0 0 3px rgba(95, 191, 107, .25); }
.ampel--warn { background: var(--lamp-amber); box-shadow: 0 0 0 3px rgba(242, 169, 59, .25); }
.ampel--err { background: var(--lamp-red); box-shadow: 0 0 0 3px rgba(229, 72, 59, .25); }

.card--customer .card__body { padding-top: var(--s2); padding-bottom: var(--s3); }
.ksum { padding: var(--s2); border-radius: 8px; background: var(--paper); border-left: 4px solid var(--lamp-green); }
.ksum--warn { border-left-color: var(--lamp-amber); }
.ksum--err { border-left-color: var(--lamp-red); }
.ksum__label { display: flex; align-items: center; gap: .7rem; font: 600 1.35rem/1.2 var(--cond); letter-spacing: .02em; }
.ksum__text { margin-top: .5rem; font-size: 1.02rem; }

.kareas { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: 0; }
.karea { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; padding: .85rem 0; border-top: 1px solid var(--rule-soft); }
.karea .ampel { margin-top: .3rem; }
.karea__label { font-size: 1rem; font-weight: 600; }
.karea__text { margin-top: .15rem; font-size: .93rem; color: var(--ink-2); }

.kitem { position: relative; padding: var(--s2) 0 var(--s2) var(--s2); border-top: 1px solid var(--rule-soft); }
.kitem:first-child { border-top: 0; }
.kitem::before { content: ""; position: absolute; left: 0; top: var(--s2); bottom: var(--s2); width: 4px; border-radius: 2px; background: var(--lamp-amber); }
.kitem--err::before { background: var(--lamp-red); }
.kitem__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; }
.kitem__title { font-size: 1.08rem; font-weight: 600; }
.effort { flex: none; padding: .2rem .5rem; border-radius: 4px; background: var(--ok-bg); color: var(--ok); font: 600 .7rem/1.2 var(--cond); letter-spacing: .1em; text-transform: uppercase; }
.effort--mittel { background: var(--warn-bg); color: var(--warn); }
.effort--hoch { background: var(--err-bg); color: var(--err); }
.klabel { margin-top: .75rem; font: 600 .7rem/1.3 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.ktext { margin-top: .2rem; font-size: .97rem; }
.kdetail { margin-top: .5rem; font-size: .85rem; color: var(--ink-2); }
.kempty { padding: var(--s2) 0; color: var(--ink-2); }

.kgood { list-style: none; margin: 0; padding: var(--s1) 0 0; display: grid; gap: .55rem; }
.kgood li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; }
.kgood li::before { content: ""; width: .8rem; height: .45rem; margin-top: .35rem; border-left: 2.5px solid var(--ok); border-bottom: 2.5px solid var(--ok); transform: rotate(-45deg); }

.ksteps { margin: var(--s1) 0 0; padding-left: 1.3rem; display: grid; gap: .5rem; }
/* Ansprechpartner: dunkel wie im PDF, Logo rechts */
.kcontact {
  margin-top: var(--s3); padding: var(--s2); border-radius: 8px; display: grid; gap: var(--s2);
  background: var(--panel-2); color: var(--engrave);
}
.kcontact__row { display: grid; gap: var(--s2); align-items: center; }
.kcontact__view p { margin-top: .1rem; }
.kcontact__view .klabel { margin-top: 0; margin-bottom: .35rem; color: var(--engrave-3); }
.kcontact__company { font-size: 1.15rem; font-weight: 600; color: #fff; }
.kcontact__reach { margin-top: .5rem !important; font-size: .92rem; color: var(--engrave-2); overflow-wrap: anywhere; white-space: pre-wrap; }
.kcontact .kbtn { justify-self: start; background: transparent; border-color: #4A575C; color: var(--engrave-2); }
.kcontact .kbtn:hover { color: var(--engrave); border-color: var(--engrave-2); }
.brandname strong { font-weight: 700; }
.kbtn { justify-self: start; min-height: 2.4rem; padding: .35rem .9rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--sheet); cursor: pointer; font-size: .88rem; }
.kbtn:hover { border-color: var(--ink-2); }
.kbtn--primary { background: var(--panel-2); border-color: var(--panel-2); color: var(--engrave); }
.kcontact__form { display: grid; gap: .7rem; }
.kcontact__form .kfield { color: var(--engrave-3); }
.kcontact__form .kfield input:not([type="checkbox"]) {
  background: var(--well); color: #F4F2EA; border-color: var(--well-edge);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45);
}
.kcontact__form .kfield input:not([type="checkbox"]):focus { border-color: var(--lamp-amber); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45), 0 0 0 3px rgba(242, 169, 59, .25); }
.kcontact .kdisclaimer { color: var(--engrave-3); }
.kfield { display: grid; gap: .25rem; font-size: .82rem; color: var(--ink-2); }
.kfield input { min-height: 2.5rem; padding: .4rem .6rem; border: 1px solid var(--rule); border-radius: 6px; background: #fff; color: var(--ink); font-size: .95rem; }
.kfield input:focus { outline: none; border-color: var(--ink-2); box-shadow: 0 0 0 3px rgba(28, 34, 39, .12); }
.kcontact__actions { display: flex; flex-wrap: wrap; gap: var(--s1); }
.kdisclaimer { margin-top: var(--s2); font-size: .82rem; color: var(--ink-2); }


/* Teilen-Block und geteilte Ansicht */
.kshare { margin-top: var(--s3); padding: var(--s2); border-radius: 8px; background: var(--paper); border: 1px dashed var(--rule); display: grid; gap: var(--s2); }
.kshare__lead { font-size: .92rem; color: var(--ink-2); }
.kcheck { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: center; cursor: pointer; font-size: .95rem; }
/* Eigene Kästchen: die Standarddarstellung des Browsers passt weder auf das
   dunkle Panel noch zum Bernstein der Marke. */
.kcheck input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 1.2rem; height: 1.2rem; min-height: 0; min-width: 0; padding: 0; margin: 0; cursor: pointer;
  box-shadow: none;
  display: grid; place-content: center;
  border: 1.5px solid currentColor; border-radius: 4px; background: transparent;
  transition: border-color .15s, background-color .15s;
}
.kcheck input[type="checkbox"]::before {
  content: ""; width: .62rem; height: .34rem; margin-top: -.12rem;
  border-left: 2.4px solid var(--lamp-amber); border-bottom: 2.4px solid var(--lamp-amber);
  transform: rotate(-45deg) scale(.4); opacity: 0; transition: transform .15s ease-out, opacity .12s;
}
.kcheck input[type="checkbox"]:checked { border-color: var(--lamp-amber); background: rgba(242, 169, 59, .12); }
.kcheck input[type="checkbox"]:checked::before { transform: rotate(-45deg) scale(1); opacity: 1; }
.kcheck input[type="checkbox"]:hover { border-color: var(--lamp-amber); }
.kcheck input[type="checkbox"]:focus-visible { outline: 2px solid var(--lamp-amber); outline-offset: 2px; }
.kshare .kfield textarea { min-height: 4rem; padding: .5rem .6rem; border: 1px solid var(--rule); border-radius: 6px; background: #fff; color: var(--ink); font: inherit; font-size: .95rem; resize: vertical; }
.kshare__msg { font-size: .9rem; color: var(--ink-2); }
.kshare__msg.is-err { color: var(--err); }
.kshare__out { display: grid; gap: var(--s1); }
.kshare__hint { font-size: .88rem; color: var(--ink-2); }
.kshare__url { width: 100%; min-height: 2.6rem; padding: .45rem .6rem; border: 1px solid var(--rule); border-radius: 6px; background: #fff; color: var(--ink); font: 400 .95rem/1.4 var(--mono); }

.topbar__note { font: 600 .72rem/1.3 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--engrave-3); }
/*
 * Im geteilten Bericht endet der dunkle Bereich direkt unter den Karten. Die
 * Mindesthöhe des Panels würde sonst eine große leere Fläche erzeugen, die
 * aussieht, als fehle das Ergebnis.
 */
.is-shared .panel { min-height: 0; }
.is-shared .panel__inner { padding-bottom: var(--s3); }
.mod--shared .dial { align-items: center; }
.shared__summary { font-size: 1rem; color: var(--engrave); }
.is-shared .bar__actions .pbtn { text-decoration: none; }
.is-shared .report__layout { display: block; }
.is-shared .kcontact__reach a { color: inherit; }
.kcontact__reach a { color: var(--engrave-2); }
.kcontact__reach a:hover { color: var(--engrave); }
.is-shared .kdisclaimer .link { color: var(--ink-2); }
.is-shared .kdisclaimer .link:hover { color: var(--ink); }


/* Fehlerseite statt Website */
.alarm {
  display: grid; gap: var(--s1); padding: var(--s2);
  background: linear-gradient(180deg, rgba(229, 72, 59, .18), rgba(229, 72, 59, .08));
  border: 1px solid rgba(229, 72, 59, .5); border-left: 4px solid var(--lamp-red); border-radius: 10px;
}
.alarm__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) .8rem; }
.alarm__code {
  flex: none; padding: .15rem .5rem; border-radius: 4px; background: var(--lamp-red); color: #fff;
  font: 400 1rem/1.4 var(--mono);
}
.alarm__title { font: 600 1.35rem/1.15 var(--cond); letter-spacing: .03em; text-transform: uppercase; color: #FFC9C3; }
.alarm__text { color: var(--engrave); }
.alarm__hint { font-size: .9rem; color: var(--engrave-2); }
.alarm__tries { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); margin-top: var(--s1); }
.alarm__label { font: 600 .7rem/1.3 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--engrave-3); }
.alarm__tries .pbtn { font-family: var(--mono); font-size: .78rem; letter-spacing: 0; text-transform: none; }
.mod.is-void .dial, .mod.is-void .lamps { opacity: .45; }

/* Overlay */
body.is-locked { overflow: hidden; }
.backdrop {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center;
  padding: 0; background: rgba(11, 15, 17, .72); animation: fade .15s ease-out;
}
@keyframes fade { from { opacity: 0; } }
.sheet {
  width: min(42rem, 100%); max-height: 92vh; display: flex; flex-direction: column;
  background: var(--plate); color: var(--engrave);
  border: 1px solid var(--plate-edge); border-bottom: 0; border-radius: 14px 14px 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, .5);
  animation: rise .2s ease-out;
}
@keyframes rise { from { transform: translateY(2rem); } }
.sheet__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: var(--s2); border-bottom: 1px solid rgba(0, 0, 0, .3); box-shadow: 0 1px 0 rgba(255, 255, 255, .04);
}
.sheet__title { font: 600 .78rem/1.3 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--engrave-2); }
.sheet__close {
  flex: none; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 1px solid #4A575C; border-radius: 6px; color: var(--engrave-2); font-size: 1rem;
}
.sheet__close:hover { color: var(--engrave); border-color: var(--engrave-2); }
.sheet__body { padding: var(--s2); overflow-y: auto; }
.sheet .kshare { margin-top: 0; background: transparent; border: 0; padding: 0; }
.sheet .kshare .klabel, .sheet .kshare__lead, .sheet .kshare__hint, .sheet .kshare__msg { color: var(--engrave-2); }
.sheet .kcheck { color: var(--engrave); }
.sheet .kfield { color: var(--engrave-3); }
.sheet .kbtn { background: linear-gradient(180deg, #56646A, var(--panel-3)); border-color: #242C2F; color: var(--engrave); }
.sheet .kbtn:hover { color: #fff; border-color: #242C2F; }
.sheet .kbtn--primary { background: linear-gradient(180deg, #2B3437, #1C2326); border-color: #0F1416; color: var(--lamp-amber); }

/* ================= ab Tablet ================= */

@media (min-width: 720px) {
  :root { --pad: 1.75rem; }
  .kcontact__row { grid-template-columns: minmax(0, 1fr) auto; }
  .kcontact__logo { object-position: right center; }
  .panel__inner { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .console { padding: 1.4rem; }
  .modes { display: inline-grid; justify-self: start; min-width: 22rem; }
  .auth__grid { grid-template-columns: 1fr 1fr; }
  .console__foot { grid-template-columns: 1fr auto; align-items: center; }
  .console__foot .guard { justify-self: end; }
  .console__foot .start { width: auto; }
  .lamps__grid { --cols: 4; }

  .bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s2) var(--s3); }
  .bar__id { flex: 1 1 18rem; }
  .bar__pages { flex: 0 1 20rem; }
  .bar__actions { display: flex; flex-wrap: wrap; align-items: center; }
  .backdrop { align-items: center; padding: var(--s3); }
  .sheet { border-bottom: 1px solid var(--plate-edge); border-radius: 14px; }
  .sheet__head, .sheet__body { padding: var(--s3); }
  .kcontact__form { grid-template-columns: 1fr 1fr; }
  .kcontact__actions, .kcontact__form .kdisclaimer { grid-column: 1 / -1; }
  .kgood { grid-template-columns: 1fr 1fr; column-gap: var(--s4); }
  .bar__status { flex: 1 1 100%; }
  .mod__head { padding: var(--s1) var(--s3); }
  .mod__body, .mod__foot { padding: var(--s3); }
  .dial { gap: var(--s3); }
  .dial__side { display: grid; gap: var(--s2); min-width: 0; }
  .dial .counters { grid-column: auto; }
  .gauge { width: 10.5rem; height: 10.5rem; }
  .screen__glass { padding: 1.3rem 1.4rem; }
}

@media (min-width: 1100px) {
  .lamps__grid { --cols: 7; }
  .intake .console { margin-top: 0; }
  .lamp__glass { min-height: 3.9rem; font-size: .76rem; }

  /* Raster: 12 Spalten */
  .result { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .is-shared .mod--inst { grid-column: 1 / span 6; }
  .is-shared .mod--serp { grid-column: 7 / span 6; }
  .kshare__out { grid-template-columns: 1fr auto; align-items: center; }
  .kshare__hint, .kshare__url { grid-column: 1 / -1; }
  .bar, .result__notes { grid-column: 1 / -1; }
  .mod--inst { grid-column: 1 / span 5; }
  .mod--site, .result--idle .intake { grid-column: 6 / span 7; }
  .mod--serp { grid-column: 1 / span 6; }
  .mod--share { grid-column: 7 / span 6; }
  .result--nosite .mod--inst { grid-row: span 2; }
  .result--nosite .mod--serp, .result--nosite .mod--share { grid-column: 6 / span 7; }
  /* ohne Website-Modul: Ergebnis hochkant, damit es neben Google und Teilen ohne Lücke steht */
  .result--nosite .dial { grid-template-columns: 1fr; justify-items: center; }
  .result--nosite .dial__side { width: 100%; }
  .result--nosite .gauge { width: 12.5rem; height: 12.5rem; }
  .result--nosite .verdict { text-align: center; }
  .result--nosite .lamp__glass { min-height: 4.75rem; }
  .result--nosite .mod--inst .mod__body { justify-content: space-around; }
  .result--nosite .mod--inst .lamps { margin-top: 0; }
  .result--nosite .share { max-width: 26rem; }

  .mod .lamps__grid { --cols: 4; }
  .mod .lamp__glass { font-size: .62rem; letter-spacing: .06em; padding-inline: .2rem; }
  .verdict__label { font-size: clamp(1.5rem, 2.2vw, 2.3rem); }
  .mod__devtabs { display: none; }
  .devices__stage { grid-template-columns: minmax(0, 1fr) 11.5rem; gap: var(--s3); align-items: end; }
  .device.is-off { display: block; }
  .phone { width: 100%; border-radius: 28px; padding: 8px; }
  .viewport--phone { border-radius: 20px; }
  .phone__island { top: 14px; height: 11px; }

  .report__layout { grid-template-columns: 13rem minmax(0, 1fr); gap: 1.75rem; align-items: start; }
  .toc { top: 1.25rem; margin: 0; padding: 0; display: grid; gap: 0; overflow: visible; white-space: normal; background: none; border: 0; }
  .toc__title { display: block; padding-bottom: .5rem; margin-bottom: .2rem; border-bottom: 2px solid var(--ink); font: 600 .78rem/1.2 var(--cond); letter-spacing: .12em; text-transform: uppercase; }
  .toc__item { min-height: 2.4rem; padding: .4rem .5rem .4rem .6rem; background: none; border: 0; border-bottom: 1px solid var(--rule); border-left: 3px solid transparent; border-radius: 0; }
  .toc__item[aria-current="true"] { background: var(--sheet); color: var(--ink); border-left-color: var(--ink); border-bottom-color: var(--rule); }
  .toc__label { flex: 1; }
  html { scroll-padding-top: 1.25rem; }
  .check { scroll-margin-top: 1.25rem; }
}

@media (min-width: 1500px) {
  .devices__stage { grid-template-columns: minmax(0, 1fr) 13rem; }
}

@media (prefers-reduced-motion: reduce) {
  .login__needle { animation: none; transform: rotate(52deg); }
  .minilamp, .minilamp.is-denied { animation-duration: .01s; animation-delay: 0s; animation-iteration-count: 1; }
  .caution__lamp { animation: none; }
  .gauge__needle, .lamp__glass, .verdict__label, .switch__knob, .switch__track { transition: none; }
  .check.is-target { transition: none; }
  .spinner { animation-duration: 2s; }
}


/* Liste der Berichte als Karten. Mobile-First: einspaltig, ab Tablet nebeneinander. */
.replist { display: grid; gap: var(--s2); }
.rep {
  display: grid; gap: var(--s2); padding: var(--s2);
  background: var(--plate); border: 1px solid var(--plate-edge); border-radius: 10px;
}
.rep__head { display: grid; gap: .15rem; min-width: 0; }
.rep__site { font-weight: 600; color: var(--engrave); overflow-wrap: anywhere; }
.rep__when { font-size: .82rem; color: var(--engrave-3); }
.rep__label { display: block; font: 600 .62rem/1.3 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--engrave-3); }
.rep__small { font-size: .78rem; color: var(--engrave-3); }

.rep__score { display: flex; align-items: center; gap: var(--s2); }
.scorebig {
  min-width: 3.1rem; padding: .25rem .5rem; border-radius: 7px; text-align: center;
  font: 400 1.35rem/1.2 var(--mono); background: var(--well); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5);
}
.scorebig--ok { color: #9EE3A8; }
.scorebig--warn { color: #FFD48A; }
.scorebig--err { color: #FFACA3; }
.rep__counts { display: flex; gap: .25rem; }

.rep__client { display: grid; gap: .3rem; min-width: 0; align-content: start; }
.rep__more { font-size: .78rem; color: var(--lamp-amber); }

/* Kunde: erst nur der Name, das Feld erscheint auf Klick */
.cedit { min-width: 0; }
.cedit__view {
  display: flex; align-items: baseline; gap: .5rem; cursor: pointer; list-style: none;
  padding: .25rem .4rem; margin-left: -.4rem; border-radius: 6px;
}
.cedit__view::-webkit-details-marker { display: none; }
.cedit__view:hover { background: rgba(255, 255, 255, .05); }
.cedit__name { font-weight: 600; color: var(--engrave); overflow-wrap: anywhere; }
.cedit__edit { font-size: .74rem; color: var(--engrave-3); text-decoration: underline; text-underline-offset: 2px; }
.cedit[open] .cedit__view { display: none; }
.cedit:not([open]) .cedit__form { display: none; }
.cedit__form { display: flex; gap: .3rem; }
.cedit__form .kbtn { white-space: nowrap; }

/* Frühere Prüfungen derselben Website */
.rep__history { grid-column: 1 / -1; border-top: 1px solid rgba(0, 0, 0, .3); padding-top: var(--s1); }
.rep__history > summary {
  cursor: pointer; padding: .35rem .4rem; margin-left: -.4rem; border-radius: 6px;
  font-size: .85rem; color: var(--engrave-2);
}
.rep__history > summary:hover { background: rgba(255, 255, 255, .05); color: var(--engrave); }
.hist { list-style: none; margin: var(--s1) 0 0; padding: 0; display: grid; gap: .4rem; }
.hist__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem;
  padding: .45rem .6rem; background: var(--well); border-radius: 7px; font-size: .88rem;
}
.hist__date { color: var(--engrave-2); }
.hist__counts { display: flex; gap: .25rem; }
.hist__diff { font-size: .8rem; }
.hist__diff--up { color: var(--lamp-green); }
.hist__diff--down { color: var(--lamp-red); }
.hist__del { margin-left: auto; }
.rep__share { display: grid; gap: .3rem; min-width: 0; align-content: start; }
.rep__stats { display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: center; }
.rep__acts { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.rep__acts form { display: contents; }

@media (min-width: 800px) {
  .rep {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 13rem) minmax(0, 1.4fr) auto;
    align-items: center; column-gap: var(--s3);
  }
  .rep__acts { flex-direction: column; align-items: stretch; }
  .rep__acts .kbtn { text-align: center; }
}

/* Hinweis über einem gespeicherten Bericht, immer über die volle Breite */
.savednote { grid-column: 1 / -1; }

/* Abschnitt ohne Wertung: der KI-Check */
/* Leuchte des KI-Checks: eingelassene Fassung, damit sie sich von den gewerteten abhebt */
.lamp--aside .lamp__glass { box-shadow: inset 0 0 0 2px rgba(11, 15, 17, .5), inset 0 2px 4px rgba(0, 0, 0, .35); }

.card--aside { border-style: dashed; border-color: #4A575C; background: transparent; }
.card--aside .card__head { border-bottom-style: dashed; }
.card__num--aside { background: transparent; border: 1px dashed #4A575C; color: var(--engrave-3); font-size: .74rem; letter-spacing: .06em; }
.card--aside .check__num { visibility: hidden; }
.aside__note { padding: var(--s2) var(--s2) 0; font-size: .88rem; color: var(--engrave-3); }
.aside__level { font: 600 .72rem/1.3 var(--cond); letter-spacing: .1em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 4px; }
.aside__level--none { background: rgba(95, 191, 107, .16); color: #9EE3A8; }
.aside__level--mid { background: rgba(242, 169, 59, .16); color: #FFD48A; }
.aside__level--high { background: rgba(229, 72, 59, .16); color: #FFACA3; }

/* Hinweis zu den Texten im Kundenbericht: sichtbar abgesetzt, ohne Wertung */
.kitem--aside { border-left-color: #6FA8DC; }
.card--customer .kcard__sub { color: var(--ink-2); }

/* Hinweis des Administrators */
.adminnote {
  max-width: var(--maxw); margin: var(--s2) auto 0; padding: .7rem 1rem;
  background: rgba(242, 169, 59, .14); border-left: 3px solid var(--lamp-amber); border-radius: 0 6px 6px 0;
  color: #FFD48A; font-size: .92rem;
}

/* ---------- Dashboard ---------- */

.dashhead { display: grid; gap: var(--s2); }
.dashhead__sub { font-size: .88rem; color: var(--engrave-3); }

/* Kennzahlen */
.kpis { display: grid; gap: var(--s2); }
.kpi {
  display: grid; gap: .2rem; align-content: start; padding: var(--s2) var(--s3);
  background: linear-gradient(180deg, var(--plate), #2E373B); border: 1px solid var(--plate-edge); border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.kpi__label { font: 600 .66rem/1.3 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--engrave-3); }
.kpi__num { font: 400 2.6rem/1.05 var(--mono); color: #F4F2EA; }
.kpi__num--ok { color: #9EE3A8; }
.kpi__num--warn { color: #FFD48A; }
.kpi__num--err { color: #FFACA3; }
.kpi__num--off { color: var(--engrave-3); }
.kpi__trend { font-size: .78rem; }
.kpi__trend--up { color: var(--lamp-green); }
.kpi__trend--down { color: var(--lamp-red); }
.kpi__trend--flat, .kpi__trend--warn { color: var(--lamp-amber); }
.kpi__foot { margin-top: .35rem; padding-top: .4rem; border-top: 1px solid rgba(0, 0, 0, .28); font-size: .76rem; color: var(--engrave-3); }

/* Kasten mit Kopfzeile */
.panelbox { padding: var(--s2) var(--s3) var(--s3); background: var(--plate); border: 1px solid var(--plate-edge); border-radius: 12px; }
.panelbox__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s2); padding-bottom: var(--s2); }
.panelbox__title { font: 600 .78rem/1.3 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--engrave-2); }
.panelbox__more { font-size: .8rem; color: var(--engrave-3); }
.panelbox__more:hover { color: var(--lamp-amber); }
.legend { display: flex; gap: var(--s2); font-size: .76rem; color: var(--engrave-3); }
.legend__item { display: inline-flex; align-items: center; gap: .35rem; }
.legend__key { width: .8rem; height: .55rem; border-radius: 2px; background: var(--lamp-amber); }
.legend__key--line { height: 2px; border-radius: 2px; background: var(--lamp-blue); }

/* Verlauf */
.graph { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; }
.graph__scale { display: flex; flex-direction: column; justify-content: space-between; font: 400 .68rem/1 var(--mono); color: var(--engrave-3); text-align: right; height: 10rem; }
.graph__plot { position: relative; height: 10rem; }
.graph__grid { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(230, 228, 218, .14) 1px, transparent 1px) 0 0 / 100% 50%; border-bottom: 1px solid rgba(230, 228, 218, .22); }
.graph__bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
.graph__bar { flex: 1 1 0; min-width: 2px; height: var(--h); border-radius: 2px 2px 0 0; background: linear-gradient(180deg, #F7B85B, #D98E21); }
.graph__bar:hover { background: var(--lamp-amber); }
.graph__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.graph__line polyline { fill: none; stroke: var(--lamp-blue); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.graph__axis { display: flex; justify-content: space-between; margin-top: .4rem; padding-left: 2rem; font-size: .72rem; color: var(--engrave-3); }

/* Verteilung */
.spread { display: grid; gap: .6rem; margin-top: var(--s1); }
.spread__row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: var(--s2); align-items: center; }
.spread__label { font-size: .82rem; color: var(--engrave-2); }
.spread__track { height: .65rem; border-radius: 999px; background: var(--well); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5); overflow: hidden; }
.spread__fill { display: block; width: var(--w); height: 100%; border-radius: 999px; }
.spread__fill--ok { background: var(--lamp-green); }
.spread__fill--warn { background: var(--lamp-amber); }
.spread__fill--err { background: var(--lamp-red); }
.spread__val { font: 400 .9rem/1 var(--mono); color: var(--engrave); white-space: nowrap; }
.spread__pct { color: var(--engrave-3); font-size: .76rem; }

/* Listen */
.dashgrid { display: grid; gap: var(--s2); }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.feed__row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: center; padding: .4rem 0; border-top: 1px solid rgba(0, 0, 0, .25); }
.feed__row:first-child { border-top: 0; }
.feed__main { display: grid; gap: .1rem; min-width: 0; }
.feed__title { color: var(--engrave); font-size: .93rem; }
.feed__sub { color: var(--engrave-3); font-size: .76rem; }
.scoredot {
  width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: 8px; flex: none;
  font: 400 .88rem/1 var(--mono); background: var(--well); box-shadow: inset 0 1px 4px rgba(0, 0, 0, .5);
}
.scoredot--ok { color: #9EE3A8; }
.scoredot--warn { color: #FFD48A; }
.scoredot--err { color: #FFACA3; }
.scoredot--off { color: var(--engrave-3); }
.noticeform { display: grid; gap: var(--s2); }

/* Häufigste Befunde */
.topfind { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: .4rem; }
.topfind__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); align-items: center; padding: .5rem .7rem; background: var(--plate); border-radius: 7px; overflow: hidden; }
.topfind__bar { position: absolute; inset: 0 auto 0 0; width: var(--w); background: rgba(242, 169, 59, .16); }
.topfind__name, .topfind__val { position: relative; }
.topfind__name { color: var(--engrave); font-size: .93rem; overflow-wrap: anywhere; }
.topfind__val { font: 400 .95rem/1 var(--mono); color: var(--lamp-amber); white-space: nowrap; }
.topfind__abs { color: var(--engrave-3); font-size: .8rem; }

/* Filterleiste über der Liste */
.filterbar { display: grid; gap: var(--s2); padding: var(--s2); background: var(--plate); border: 1px solid var(--plate-edge); border-radius: 10px; }
.fb__field { display: grid; gap: .25rem; min-width: 0; }
.fb__field input, .fb__field select {
  min-height: 2.6rem; padding: .45rem .6rem; border: 1px solid var(--well-edge); border-radius: 6px;
  background: var(--well); color: var(--engrave); font-size: .95rem; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .4);
}
.fb__field input:focus, .fb__field select:focus { outline: none; border-color: var(--lamp-amber); }
.fb__actions { display: flex; flex-wrap: wrap; gap: var(--s1); align-items: end; }
.fb__actions .kbtn { min-height: 2.6rem; }

@media (min-width: 800px) {
  .filterbar { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; }
}

/* Kundenzuordnung */
.inline { display: flex; gap: .3rem; align-items: center; }
.inline .kbtn { white-space: nowrap; }
.clientfield { flex: 1 1 auto; }
.rowactions .kbtn { white-space: nowrap; }
.adtable--list td { vertical-align: middle; }
.clientfield {
  width: 100%; min-width: 4rem; padding: .3rem .5rem; border: 1px solid var(--plate-edge); border-radius: 5px;
  background: var(--well); color: var(--engrave); font-size: .85rem;
}
.clientfield:focus { outline: none; border-color: var(--lamp-amber); }
.kbtn--mini { padding: .3rem .6rem !important; min-height: 2rem !important; font-size: .8rem !important; }

/* Befunde in der Liste. Bewusst ohne flex auf der Zelle, das bricht Tabellen. */
.befunde { white-space: nowrap; }
.bcount { display: inline-block; min-width: 1.6rem; margin-right: .2rem; padding: .1rem .35rem; border-radius: 4px; text-align: center; font: 400 .8rem/1.5 var(--mono); }
.bcount--err { background: rgba(229, 72, 59, .18); color: #FFACA3; }
.bcount--warn { background: rgba(242, 169, 59, .18); color: #FFD48A; }
.bcount--ok { background: rgba(95, 191, 107, .18); color: #9EE3A8; }

/* ---------- Eine Maske: Instrument und Eingabe nebeneinander ---------- */

.stage { display: grid; gap: var(--s3); align-items: start; }
.mod--idle .dial__side { gap: var(--s2); }
.idlehint { font-size: .84rem; color: var(--engrave-3); }
.mod--idle .verdict { background: var(--well); }
.mod--idle .verdict__label { color: var(--engrave-3); text-shadow: none; font-size: clamp(1.3rem, 3vw, 1.9rem); }
.mod--idle.is-busy .verdict__label { color: var(--lamp-amber); text-shadow: 0 0 18px rgba(242, 169, 59, .55); }
.mod--idle .gauge__needle { transform-origin: 100px 100px; transform: rotate(-135deg); }
/* Während der Prüfung bleibt der Zeiger stehen, das Instrument leuchtet auf */
.mod--idle.is-busy .gauge { animation: instglow 1.8s ease-in-out infinite; }
@keyframes instglow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(242, 169, 59, 0)); }
  50% { filter: drop-shadow(0 0 14px rgba(242, 169, 59, .45)); }
}
/*
 * Die Startmaske nutzt dasselbe Raster wie das Ergebnis: links das Instrument,
 * rechts an der Stelle der Website-Vorschau die Eingabe. Dadurch sitzt nach der
 * Prüfung alles an derselben Stelle.
 */
.result--idle { margin-top: 0; }
.result--idle .intake { align-self: start; }
.result--idle .console { margin-top: 0; }
.mod--idle .idlehint[hidden] { display: none; }




/* Vergleich mit der vorigen Prüfung, als Zeile im Ergebnis */
.trend {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem;
  margin-top: var(--s1); padding: .5rem .7rem; border-radius: 8px;
  background: var(--well); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45);
}
.trend__num { display: inline-flex; align-items: center; gap: .3rem; font: 400 1.15rem/1 var(--mono); color: var(--engrave-2); }
.trend__arrow { font-size: .7rem; }
.trend--ok .trend__num { color: var(--lamp-green); }
.trend--err .trend__num { color: var(--lamp-red); }
.trend--flat .trend__num { color: var(--engrave-3); }
.trend__text { font-size: .82rem; color: var(--engrave-3); }
.spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 1.5rem; margin-left: auto; }
.spark__bar { width: .35rem; border-radius: 2px 2px 0 0; background: var(--lamp-green); opacity: .5; }
.spark__bar--warn { background: var(--lamp-amber); }
.spark__bar--err { background: var(--lamp-red); }
.spark__bar--now { opacity: 1; background: var(--lamp-amber); }

/* ================= Admin-Bereich ================= */

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.brand__sub { margin-left: .1rem; padding: .1rem .4rem; border: 1px solid var(--engrave-3); border-radius: 3px; font: 600 .62rem/1.4 var(--cond); letter-spacing: .12em; color: var(--engrave-2); }

/* Nutzermenü oben rechts */
.usermenu { position: relative; }
.usermenu__button {
  display: flex; align-items: center; gap: .55rem; min-height: 2.4rem; padding: .25rem .6rem .25rem .3rem;
  background: transparent; border: 1px solid transparent; border-radius: 999px; cursor: pointer; color: var(--engrave-2);
}
.usermenu__button:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); color: var(--engrave); }
.usermenu__button[aria-expanded="true"] { background: var(--well); border-color: var(--well-edge); color: var(--engrave); }
.usermenu__avatar {
  flex: none; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(180deg, #56646A, var(--panel-3)); color: var(--engrave);
  font: 600 .82rem/1 var(--cond); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
}
.usermenu__img { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; object-fit: cover; background: var(--panel-3); }
.usermenu__img--big { width: 2.4rem; height: 2.4rem; margin-bottom: .35rem; }
.usermenu__name { display: none; font-size: .88rem; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu__arrow { width: .4rem; height: .4rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); }
.usermenu__button[aria-expanded="true"] .usermenu__arrow { transform: rotate(-135deg) translate(-1px, -1px); }
.usermenu__list {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 40; min-width: 13.5rem;
  display: grid; padding: .35rem; background: var(--plate); border: 1px solid var(--plate-edge); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}
.usermenu__head { display: grid; gap: .1rem; padding: .5rem .6rem .6rem; border-bottom: 1px solid rgba(0, 0, 0, .3); margin-bottom: .3rem; }
.usermenu__who { font-weight: 600; color: var(--engrave); overflow-wrap: anywhere; }
.usermenu__role { font: 600 .64rem/1.3 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--engrave-3); }
.usermenu__item { display: block; padding: .55rem .6rem; border-radius: 6px; text-decoration: none; color: var(--engrave-2); font-size: .92rem; }
.usermenu__item:hover { background: rgba(255, 255, 255, .07); color: var(--engrave); }
.usermenu__item--out { margin-top: .2rem; border-top: 1px solid rgba(0, 0, 0, .3); padding-top: .6rem; color: #FFACA3; }
.login__foot { margin-top: .3rem; font-size: .88rem; }
.login__foot a { color: var(--engrave-3); }
.login__foot a:hover { color: var(--engrave); }

.is-admin .panel { border-bottom: 0; min-height: 100vh; }
.is-admin .panel__inner { display: grid; gap: var(--s3); align-content: start; }

/* Aufteilung mit Menüspalte links */
.adlayout { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad) var(--s4); display: grid; gap: var(--s2); align-items: start; }
.adcontent { display: grid; gap: var(--s3); align-content: start; min-width: 0; padding-top: var(--s2); }

.adnav__toggle {
  display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 3rem; margin-top: var(--s2);
  padding: .5rem .9rem; cursor: pointer; text-align: left;
  background: var(--plate); border: 1px solid var(--plate-edge); border-radius: 8px; color: var(--engrave);
  font: 600 .8rem/1.3 var(--cond); letter-spacing: .1em; text-transform: uppercase;
}
.adnav__bars { position: relative; width: 1.1rem; height: 2px; background: currentColor; }
.adnav__bars::before, .adnav__bars::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; }
.adnav__bars::before { top: -6px; }
.adnav__bars::after { top: 6px; }

.adnav { display: none; padding: var(--s1); background: var(--plate); border: 1px solid var(--plate-edge); border-radius: 10px; }
.adnav.is-open { display: block; }
.adnav__title { padding: .7rem .7rem .35rem; font: 600 .64rem/1.3 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--engrave-3); }
.adnav__item {
  display: flex; align-items: center; gap: .7rem; min-height: 2.7rem; padding: .5rem .7rem; border-radius: 7px;
  text-decoration: none; color: var(--engrave-2); font-size: .94rem; border-left: 3px solid transparent;
}
.adnav__item:hover { background: rgba(255, 255, 255, .06); color: var(--engrave); }
.adnav__item[aria-current="page"] { background: var(--well); color: var(--engrave); border-left-color: var(--lamp-amber); font-weight: 600; }
.adnav__icon { flex: none; width: 1.15rem; height: 1.15rem; opacity: .85; }
.adnav__item[aria-current="page"] .adnav__icon { opacity: 1; color: var(--lamp-amber); }
.adnav__flag { margin-left: auto; width: 1.2rem; height: 1.2rem; display: grid; place-items: center; border-radius: 50%; background: var(--lamp-amber); color: #241700; font: 600 .72rem/1 var(--sans); }
.adtitle { font: 600 clamp(1.8rem, 7vw, 2.6rem)/1 var(--cond); letter-spacing: .01em; }
.adsub { margin-top: var(--s2); font: 600 .78rem/1.3 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--engrave-2); }
.adhint { font-size: .92rem; color: var(--engrave-2); max-width: 46rem; }

.adgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--s2); }
.adcard { display: grid; gap: .3rem; padding: var(--s2); background: var(--plate); border: 1px solid var(--plate-edge); border-radius: 10px; }
.adcard__num { font: 400 1.6rem/1 var(--mono); color: #F4F2EA; overflow-wrap: anywhere; }
.adcard__label { font: 600 .68rem/1.3 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--engrave-3); }

.adtable { width: 100%; border-collapse: collapse; background: var(--plate); border: 1px solid var(--plate-edge); border-radius: 10px; overflow: hidden; font-size: .92rem; }
.adtable th, .adtable td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid rgba(0, 0, 0, .25); vertical-align: middle; }
.adtable tr:last-child th, .adtable tr:last-child td { border-bottom: 0; }
.adtable thead th { font: 600 .68rem/1.3 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--engrave-3); background: rgba(0, 0, 0, .18); }
.adtable tbody th { font-weight: 500; color: var(--engrave); }
.adtable td { color: var(--engrave-2); }
.adtable code { font: 400 .88rem/1 var(--mono); color: var(--lamp-amber); }
.adtable .ellipsis { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/*
 * Die Liste scrollt waagerecht. Kopf und Körper sind dabei eigene Tabellen,
 * deshalb braucht es eine feste Aufteilung, sonst stehen die Überschriften
 * nicht über ihren Spalten.
 */
.adtable--list { display: block; overflow-x: auto; }
.adtable--list thead, .adtable--list tbody { display: table; width: 100%; min-width: 46rem; table-layout: fixed; }
.adtable--list td, .adtable--list th { overflow-wrap: anywhere; }
.adtable form { margin: 0; }

.pill { display: inline-block; padding: .1rem .5rem; border-radius: 4px; font: 600 .72rem/1.6 var(--sans); }
.pill--ok { background: rgba(95, 191, 107, .18); color: #9EE3A8; }
.pill--warn { background: rgba(242, 169, 59, .18); color: #FFD48A; }
.pill--err { background: rgba(229, 72, 59, .18); color: #FFACA3; }

.adform { display: grid; gap: var(--s2); padding: var(--s2); background: var(--plate); border: 1px solid var(--plate-edge); border-radius: 10px; }
.adform .kfield { color: var(--engrave-3); }
.adform .kfield input:not([type="checkbox"]), .adform .kfield select {
  min-height: 2.7rem; padding: .5rem .7rem; background: var(--well); color: #F4F2EA;
  border: 1px solid var(--well-edge); border-radius: 6px; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45);
}
.adform .kfield select, .fb__field select {
  appearance: none; -webkit-appearance: none; padding-right: 2.2rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 48%, var(--engrave-2) 48%, var(--engrave-2) 56%, transparent 56%),
    linear-gradient(-45deg, transparent 48%, var(--engrave-2) 48%, var(--engrave-2) 56%, transparent 56%);
  background-size: .42rem .42rem; background-position: right 1.1rem center, right .75rem center; background-repeat: no-repeat;
}
.adform input[type=number] { appearance: textfield; -moz-appearance: textfield; }
.adform input::-webkit-outer-spin-button, .adform input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.adform .kfield input:not([type="checkbox"]):focus, .adform .kfield select:focus { outline: none; border-color: var(--lamp-amber); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45), 0 0 0 3px rgba(242, 169, 59, .25); }
.adform .kcheck { color: var(--engrave); }
.adform__actions { display: flex; flex-wrap: wrap; gap: var(--s1); }
.is-admin .kbtn, .adtable .kbtn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: .4rem .9rem; cursor: pointer;
  background: linear-gradient(180deg, #56646A, var(--panel-3)); color: var(--engrave); text-decoration: none;
  border: 1px solid #242C2F; border-radius: 6px; font-size: .88rem;
}
.is-admin .kbtn:hover, .adtable .kbtn:hover { color: #fff; }
.is-admin .kbtn--primary { background: linear-gradient(180deg, #2B3437, #1C2326); border-color: #0F1416; color: var(--lamp-amber); }
.is-admin .kbtn--danger { color: #FFACA3; }
.is-admin .kbtn:disabled { opacity: .5; cursor: not-allowed; }
.notice--ok { background: rgba(95, 191, 107, .14); border-color: var(--lamp-green); color: #C6EECC; }
.notice a { color: inherit; }

@media (min-width: 720px) {
  .usermenu__name { display: block; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashhead { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .adform { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--s3); }
  .adform__actions, .adform .kcheck { grid-column: 1 / -1; }
  .adform--inline { grid-template-columns: minmax(0, 24rem) auto; align-items: end; }
}

@media (min-width: 1100px) {
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .graph__scale, .graph__plot { height: 13rem; }
}

@media (min-width: 1000px) {
  .adlayout { grid-template-columns: 15rem minmax(0, 1fr); column-gap: var(--s3); padding-bottom: var(--s4); }
  .adnav__toggle { display: none; }
  .adnav { display: block; position: sticky; top: var(--s2); margin-top: var(--s2); }
  .adcontent { padding-top: var(--s2); }
}


/* Bilder und Logos */
.brand__logo { display: block; width: auto; max-width: 14rem; object-fit: contain; }
.upload { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
/* Vorschau ohne eigene Fläche: die Dateien sind durchsichtig und sollen
   genau so wirken wie später im dunklen Kopf der Seiten. */
.upload__prev { max-height: 3.4rem; max-width: 11rem; object-fit: contain; }
.upload__prev--round { width: 3.4rem; height: 3.4rem; border-radius: 50%; object-fit: cover; }
.upload__prev--icon { width: 3.4rem; height: 3.4rem; object-fit: contain; }
.tabprev { display: inline-flex; align-items: center; gap: .5rem; margin-top: .4rem; padding: .4rem 1.4rem .4rem .6rem; background: var(--well); border-radius: 8px 8px 0 0; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45); }
.tabprev__icon { width: 1.1rem; height: 1.1rem; object-fit: contain; }
.tabprev__title { font-size: .85rem; color: var(--engrave-2); }
/* Dateiauswahl im Cockpit-Stil statt der weißen Standardschaltfläche */
.upload input[type=file] {
  flex: 1 1 14rem; min-width: 0; padding: .45rem .6rem; cursor: pointer;
  background: var(--well); border: 1px solid var(--well-edge); border-radius: 7px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45);
  font-size: .88rem; color: var(--engrave-2);
}
.upload input[type=file]:focus-visible { outline: none; border-color: var(--lamp-amber); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45), 0 0 0 3px rgba(242, 169, 59, .25); }
.upload input[type=file]::file-selector-button {
  margin-right: .8rem; padding: .4rem .9rem; cursor: pointer;
  background: linear-gradient(180deg, #56646A, var(--panel-3)); color: var(--engrave);
  border: 1px solid #242C2F; border-radius: 6px; font: inherit; font-size: .85rem;
}
.upload input[type=file]::file-selector-button:hover { color: #fff; }
.kcheck--small { font-size: .85rem; margin-top: .4rem; }
.adform__head { grid-column: 1 / -1; margin-top: var(--s1); padding-top: var(--s2); border-top: 1px solid rgba(0, 0, 0, .25); font-size: .9rem; color: var(--engrave-2); }
.adcard--wide { grid-column: 1 / -1; }
.logoprev { display: flex; align-items: center; gap: .55rem; margin-top: .4rem; color: var(--engrave); }
.logoprev__word { font: 600 1.15rem/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; }
.kcontact__logo { display: block; max-height: 3.4rem; max-width: 11rem; object-fit: contain; object-position: left center; }
.muted { font-size: .85rem; color: var(--engrave-3); }
.linkfield { width: 100%; min-width: 10rem; padding: .35rem .5rem; border: 1px solid var(--plate-edge); border-radius: 5px; background: var(--well); color: var(--engrave); font: 400 .8rem/1.4 var(--mono); }
.rowactions { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.rowactions form { display: contents; }
.rowactions .kbtn { padding-inline: .55rem; }
.adtable--list tbody td { padding-block: .5rem; }

/* ================= Druck ================= */

@media print {
  body { background: #fff; font-size: 10.5pt; }
  .topbar, .intake, .bar__pages, .bar__actions, .tabs, .toc, .okrow, .code button, .mod--site, .kbtn, .kcontact__form, .backdrop { display: none !important; }
  .panel { background: #fff; color: var(--ink); border: 0; box-shadow: none; }
  .panel__inner, .report { max-width: none; padding: 0 0 1rem; }
  .engrave, .hint, .meter__row, .mod__title, .bar__meta, .counter__label { color: var(--ink-2); }
  .bar__page, .counter__num { color: var(--ink); }
  .bar, .mod, .counter, .verdict, .screen__bezel, .lamps__grid, .lamp { background: #fff; box-shadow: none; border: 1px solid #ccc; }
  .result { display: block; }
  .mod, .bar { margin-bottom: 1rem; break-inside: avoid; }
  .lamp__glass, .verdict__label, .gauge, .meter__fill, .mark, .card__head { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .report__layout, .report__main { display: block; }
  .card { margin-bottom: 1rem; box-shadow: none; break-inside: auto; }
  .check { break-inside: avoid; }
  .checks--ok[hidden] { display: block !important; }
  .mod--serp [data-view] { display: block !important; margin-bottom: 1rem; }
  .fix summary::before { display: none; }
}