/* Technik Portal – gemeinsame Gestaltung (App, Büro-Portal, Kunden-Seiten).
   Farben und Formen angelehnt an das BeijerRef-Magazinraster: Navy-Kopf, weiße Flächen, flache Karten mit Linien,
   eckige Buttons, Kicker-Zeilen. Schrift „Albert Sans“ (OFL) liegt lokal in /fonts. */

@font-face {
  font-family: "Albert Sans";
  src: url("fonts/AlbertSans.woff") format("woff");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --bg: #ffffff; --surface: #f1f6fa; --fg: #0b2230; --muted: #4f6679; --line: #d6e2ea;
  --navy: #004262; --on-navy: #ffffff; --blue: #006eb5; --on-blue: #ffffff; --link: #006eb5; --sky: #8cbede; --tint: #e4f0f8;
  --ok: #1b7f45; --bad: #b83225; --warn: #9a6a10; --na: #5d7080;
  --c-st: #c2410c; --c-ib: #006eb5; --c-ws: #004262; --c-ts: #2a7f8f;
  --font: "Albert Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r: 4px;
  /* ältere Namen, damit bestehende Regeln weiter greifen */
  --text: var(--fg); --card: var(--bg); --brand: var(--blue); --brand-d: var(--navy);
  --radius: 4px; --shadow: none; --st: var(--c-st); --ib: var(--c-ib); --wa: var(--c-ws);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #08151d; --surface: #0f2230; --fg: #e6eff5; --muted: #93abbc; --line: #223a4a;
    --navy: #04202f; --blue: #1479bd; --link: #6db8ea; --sky: #8cbede; --tint: #10304a;
    --ok: #43b374; --bad: #ef7b6e; --warn: #e0b050; --na: #7b8f9e;
    --c-st: #ee8a55; --c-ib: #5ab0e8; --c-ws: #8cbede; --c-ts: #5cc0cf;
  }
}
:root[data-theme="dark"] {
  --bg: #08151d; --surface: #0f2230; --fg: #e6eff5; --muted: #93abbc; --line: #223a4a;
  --navy: #04202f; --blue: #1479bd; --link: #6db8ea; --sky: #8cbede; --tint: #10304a;
  --ok: #43b374; --bad: #ef7b6e; --warn: #e0b050; --na: #7b8f9e;
  --c-st: #ee8a55; --c-ib: #5ab0e8; --c-ws: #8cbede; --c-ts: #5cc0cf;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 var(--font); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
a { color: var(--link); text-decoration: none; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }

.kicker { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--link); }
.kicker::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.more { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; color: var(--link); background: none; border: 0; padding: 0; cursor: pointer; }
.more::after { content: "→"; transition: transform .15s; }
.more:hover::after { transform: translateX(4px); }

/* Buttons */
.btn {
  min-height: 48px; padding: 0 22px; border-radius: var(--r); cursor: pointer; font-weight: 700;
  border: 1.5px solid var(--blue); background: transparent; color: var(--link);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
}
.btn:hover { background: var(--tint); }
.btn.primary { background: var(--blue); color: var(--on-blue); border-color: var(--blue); }
.btn.primary:hover { background: var(--navy); border-color: var(--navy); }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 55%, var(--line)); }
.btn.ghost { border-color: var(--line); color: var(--fg); }
.btn.small, .btn.sm { min-height: 38px; padding: 0 14px; font-size: 14px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .55; cursor: default; }

.pill {
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: color-mix(in srgb, var(--c, var(--blue)) 14%, transparent); color: var(--c, var(--link));
}
.pill.done, .pill.ok { --c: var(--ok); }
.pill.draft, .pill.warn { --c: var(--warn); }
.pill.bad { --c: var(--bad); }

/* Formularelemente */
label, .lbl { display: block; font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
input[type=text], input[type=tel], input[type=number], input[type=date], input[type=time], input[type=email], input[type=password],
input[type=search], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--bg); color: var(--fg); outline: none;
  appearance: none; -webkit-appearance: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 25%, transparent); }
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px;
}
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }

/* Handschuh-Modus: größere Flächen, kräftigere Linien, höherer Kontrast */
body.glove { --line: #6f8798; --muted: #25394a; --link: #00508a; font-size: 18px; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body.glove { --line: #7f9bb0; --muted: #c5d6e2; --link: #8cc8f2; } }
html[data-theme="dark"] body.glove { --line: #7f9bb0; --muted: #c5d6e2; --link: #8cc8f2; }
body.glove :is(button, input, select, textarea):not(.icon-btn):not(.more):not(.mic) { min-height: 64px; font-size: 18px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }