/* QUIBIQ Corporate Design: Markenblau als Fläche, Gelb als einziger Akzent, kantig, Titillium Web. */
@font-face { font-family: "Titillium Web"; font-weight: 400; font-display: swap; src: url("/fonts/titillium-web-400.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-weight: 600; font-display: swap; src: url("/fonts/titillium-web-600.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-weight: 700; font-display: swap; src: url("/fonts/titillium-web-700.woff2") format("woff2"); }

:root {
  --brand: #002c5c; --brand-dark: #011e3f; --accent: #e2df00; --white: #fff; --grey-light: #eff2f7;
  --line: #d6dce6; --muted-on-dark: #c9d3df; --muted: #4d6584; --red: #d5003c; --ok: #60ab80;
}
* { box-sizing: border-box; border-radius: 0; }
body { margin: 0; font: 17px/1.55 "Titillium Web", system-ui, sans-serif; color: var(--brand); background: var(--grey-light); }

header { display: flex; align-items: center; gap: 1.25rem; padding: .9rem 2rem; color: var(--white);
  background: linear-gradient(var(--brand), var(--brand-dark)); border-bottom: 4px solid var(--accent); }
header img { height: 28px; width: auto; display: block; }
header .product { font-weight: 600; color: var(--accent); font-size: 1.15rem; }
header .who { margin-left: auto; color: var(--muted-on-dark); font-size: .95rem; }
header .who form { display: inline; }
header .who button { background: none; border: 0; color: var(--white); font: inherit; text-decoration: underline; cursor: pointer; padding: 0 0 0 .6rem; }

main { max-width: 46rem; margin: 2.5rem auto; padding: 0 1.5rem; }
h1 { font-size: 2rem; font-weight: 700; margin: 0 0 1rem; line-height: 1.2; }
h2 { font-size: 1.3rem; font-weight: 700; margin: 2rem 0 .6rem; }
p { margin: 0 0 1rem; }
a { color: var(--brand); }
code { font-family: ui-monospace, Consolas, monospace; font-size: .92em; background: var(--white); border: 1px solid var(--line); padding: .05rem .35rem; overflow-wrap: anywhere; }

.card { background: var(--white); border: 1px solid var(--line); padding: 1.4rem 1.6rem; margin: 0 0 1.25rem; }
.status { border-left: 6px solid var(--line); }
.status.ok { border-left-color: var(--ok); }
.status.missing { border-left-color: var(--accent); }
.muted { color: var(--muted); }
.notice { background: var(--white); border-left: 4px solid var(--accent); padding: .7rem 1rem; margin: 0 0 1.25rem; }
.error { background: var(--white); border-left: 4px solid var(--red); color: var(--red); padding: .7rem 1rem; margin: 0 0 1.25rem; }
.warn { border-left: 4px solid var(--accent); padding-left: .7rem; }

label { display: block; font-weight: 600; margin: 0 0 .3rem; }
input[type=password], input[type=text] { width: 100%; font: inherit; color: inherit; padding: .55rem .7rem; border: 2px solid var(--line); background: var(--white); }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
button, .button { font: inherit; font-weight: 600; padding: .6rem 1.3rem; border: 2px solid var(--brand); cursor: pointer;
  background: var(--white); color: var(--brand); text-decoration: none; display: inline-block; }
button.primary, .button.primary { background: var(--accent); border-color: var(--accent); color: var(--brand); }
button.danger { border-color: var(--red); color: var(--red); }

ol.steps { padding-left: 1.3rem; }
ol.steps li { margin-bottom: .4rem; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1.2rem; margin: 0; }
dl.facts dt { font-weight: 600; }
dl.facts dd { margin: 0; }
footer { max-width: 46rem; margin: 0 auto 2rem; padding: 0 1.5rem; color: var(--muted); font-size: .9rem; }
h2.flush { margin-top: 0; }