/* sensis ISMS-Portal – Marke wie academy.sensis-apps.de (marke.css, ADR-0037 im cotrax-Repo)
   und www.sensis.de: hell, Orange als Fläche mit dunkler Schrift, Montserrat vom eigenen Server. */

@font-face { font-family: "Montserrat"; font-weight: 400; font-display: swap; src: url("/marke/schrift/montserrat-400.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-display: swap; src: url("/marke/schrift/montserrat-500.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url("/marke/schrift/montserrat-600.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700 900; font-display: swap; src: url("/marke/schrift/montserrat-700.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --bg: #fafbfe; --surface: #ffffff; --muted-surface: #edf0f7; --line: #e3e6ec; --card-line: #e8eaf0;
  --fg: #1d1d1b; --muted: #5e6064;
  --accent: #af5803; --signal: #fb8e24; --signal-hover: #f57c00; --on-signal: #1d1d1b; --stage: #fff1e3;
  --inverse-deep: #1d1d1b; --on-inverse: #ffffff; --on-inverse-muted: #bdbdb7;
  --warn: #b3261e; --warn-soft: #fdeceb; --ok: #2e7d4f; --ok-soft: #e7f5ec; --focus: #1d1d1b;
  --font: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 15px; line-height: 1.55 }
img { max-width: 100% }
[hidden] { display: none !important }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 16px }

header { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5 }
.top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-block: 12px }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none }
.brand img { block-size: 2.25rem; inline-size: auto; display: block }
.brand span { font-weight: 700; font-size: 18px; color: var(--accent); letter-spacing: .02em }
nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto }
nav a { font-weight: 600; font-size: 14px; color: var(--muted); text-decoration: none; padding: 8px 12px; border-radius: 8px }
nav a:hover { color: var(--fg); background: var(--muted-surface) }
nav a[aria-current="page"] { color: var(--fg); background: var(--stage); box-shadow: inset 0 -2px 0 var(--signal) }
.user { font-size: 13px; color: var(--muted); display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.notice { background: var(--stage); font-size: 14px; padding-block: 8px; border-top: 1px solid var(--line) }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px }
@media (max-width: 40rem) { .brand img { block-size: 1.75rem } nav { margin-left: 0 } nav a { font-size: 13px; padding: 6px 8px } }

main { padding-block: 28px 64px }
h1, h2, h3 { text-wrap: balance; margin: 0; letter-spacing: -0.01em }
h1 { font-size: 28px; font-weight: 700 }
h2 { font-size: 19px; font-weight: 600 }
h3 { font-size: 16px; font-weight: 600 }
p { margin: 0 }
.lead { color: var(--muted); max-width: 65ch; margin-top: 6px }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.small { font-size: 14px }
.muted { color: var(--muted) }
.nowrap { white-space: nowrap }
.stack { display: grid; gap: 24px }
.stack-s { display: grid; gap: 8px }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px }
.tile { background: var(--surface); border: 1px solid var(--card-line); border-radius: 16px; padding: 18px; display: grid; gap: 8px; align-content: start; min-width: 0 }
.tile.alert { border-color: var(--warn); background: var(--warn-soft) }
.tile a:not(.btn), .link { color: var(--accent); font-weight: 600; text-decoration: none }
.tile a:not(.btn):hover, .link:hover { text-decoration: underline }
.facts { display: flex; gap: 24px; flex-wrap: wrap; font-size: 14px; color: var(--muted) }
.facts b { color: var(--fg); font-variant-numeric: tabular-nums }
.meta { display: flex; gap: 8px; flex-wrap: wrap }

.btn { display: inline-block; font: inherit; font-weight: 600; font-size: 14px; text-decoration: none; border: 1px solid var(--signal); border-radius: 8px; padding: 10px 18px; cursor: pointer; background: var(--signal); color: var(--on-signal); justify-self: start }
.btn:hover { background: var(--signal-hover); border-color: var(--signal-hover) }
.btn.warn { background: var(--warn); border-color: var(--warn); color: #fff }
.btn.ghost { background: var(--surface); color: var(--fg); border-color: var(--muted) }
.btn.ghost:hover { background: var(--muted-surface) }
.btn.small { padding: 5px 12px; font-size: 13px }

.forms { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; align-items: start }
@media (max-width: 760px) { .forms { grid-template-columns: 1fr } }
.formlist { display: grid; gap: 18px }
.formlist ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px }
.formitem { display: grid; gap: 1px; border: 1px solid transparent; border-radius: 8px; padding: 9px 10px; color: var(--fg); text-decoration: none }
.formitem:hover { background: var(--muted-surface) }
.formitem small { color: var(--muted); font-size: 13px }
.formitem[aria-current="true"] { background: var(--surface); border-color: var(--line); box-shadow: inset 3px 0 0 var(--signal) }
.panel { background: var(--surface); border: 1px solid var(--card-line); border-radius: 16px; padding: 22px; display: grid; gap: 18px; min-width: 0 }
.chip { font-size: 12px; font-weight: 500; background: var(--muted-surface); border-radius: 8px; padding: 3px 9px }
.note { font-size: 14px; border-left: 3px solid var(--signal); padding: 8px 12px; background: var(--stage); border-radius: 0 8px 8px 0 }
.note.warn { border-color: var(--warn); background: var(--warn-soft) }

form { display: grid; gap: 14px }
.field { display: grid; gap: 5px }
.field > label, .field > .lbl { font-weight: 600; font-size: 14px }
.hint { font-size: 13px; color: var(--muted) }
.err { font-size: 13px; color: var(--warn); font-weight: 600 }
input[type=text], input[type=date], input[type=datetime-local], input[type=number], input[type=file], select, textarea {
  font: inherit; font-size: 15px; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; width: 100%; max-width: 100% }
[aria-invalid="true"] { border-color: var(--warn) !important }
textarea { min-height: 96px; resize: vertical }
.opts { display: flex; flex-wrap: wrap; gap: 6px 16px }
.opts label { display: flex; gap: 6px; align-items: center; font-size: 15px }
.check { display: grid; gap: 6px }
.check label { display: flex; gap: 8px; align-items: flex-start; font-size: 15px }
.check small { color: var(--muted) }
input[type=checkbox], input[type=radio] { accent-color: var(--signal) }
.row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px }
.req::after { content: " *"; color: var(--warn) }

.callbox { border: 2px solid var(--warn); border-radius: 16px; padding: 16px; display: grid; gap: 10px; background: var(--surface) }
.calllist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.calllist li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 6px }
.calllist li:last-child { border-bottom: 0 }
.calllist small { color: var(--muted) }
.tel { font-weight: 700; font-size: 17px; color: var(--fg); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums }

.result { border: 1px solid var(--ok); background: var(--ok-soft); border-radius: 16px; padding: 18px; display: grid; gap: 8px }
.sheet { background: #fff; border: 1px solid var(--line); padding: 24px; display: grid; gap: 14px; font-size: 13px }
.sheethead { display: flex; gap: 16px; align-items: center; border-bottom: 2px solid var(--signal); padding-bottom: 12px; flex-wrap: wrap }
.sheethead img { block-size: 1.6rem; inline-size: auto }
.sheettab { width: 100%; border-collapse: collapse }
.sheettab th { width: 38%; font-size: 12px; color: var(--muted); font-weight: 600; text-transform: none; letter-spacing: 0 }
.sheettab td, .sheettab th { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere }
.sheetfoot { font-size: 11px; color: var(--muted) }

.tablewrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--card-line); border-radius: 16px }
table { border-collapse: collapse; width: 100%; font-size: 15px }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600 }
tr:last-child td { border-bottom: 0 }
td.nr { font-size: 13px; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums }
.pill { font-size: 12px; border-radius: 999px; padding: 2px 8px; white-space: nowrap }
.pill.ok { background: var(--ok-soft); color: var(--ok) }
.pill.open { background: var(--stage); color: var(--fg) }
.roles { margin-left: 0 }
.roles a { border: 1px solid var(--line); background: var(--surface); color: var(--fg); border-radius: 999px; padding: 6px 14px }
.roles a[aria-current="page"] { background: var(--signal); border-color: var(--signal); color: var(--on-signal); box-shadow: none }
.contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px }

.fuss { background: var(--inverse-deep); color: var(--on-inverse); padding-block: 28px; font-size: 13px }
.fussin { display: flex; gap: 24px; align-items: center; flex-wrap: wrap }
.fussin img { block-size: 2.5rem; inline-size: auto }
.fuss span { color: var(--on-inverse-muted) }

@media print {
  header, footer, .formlist, .result, .btn, .muted { display: none !important }
  .panel { border: 0; padding: 0 }
  .sheet { border: 0 }
}