/* System-Register der Marke Oliver Wiemers: Neutralskala, Inter, Hairlines, Weißraum. Schriften lokal. */
@font-face { font-family: "Inter"; font-weight: 400; src: url("/fonts/inter-400-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-weight: 400; src: url("/fonts/inter-400-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-weight: 700; src: url("/fonts/inter-700-normal-latin.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; src: url("/fonts/jetbrains-mono-400-normal-latin.woff2") format("woff2"); }
:root { --ow-black: #000; --ow-white: #FFF; --n100: #F5F5F5; --n200: #E5E5E5; --n400: #A3A3A3; --n500: #737373; --n700: #404040; --n900: #171717; --mono: "JetBrains Mono", ui-monospace, monospace; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ow-white); color: var(--n900); font: 400 15px/1.55 Inter, system-ui, sans-serif; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
.leiste { display: flex; align-items: center; gap: 1rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--n200); position: sticky; top: 0; background: var(--ow-white); z-index: 2; flex-wrap: wrap; }
.leiste h1 { font-size: 1rem; font-weight: 400; margin: 0; white-space: nowrap; }
.leiste .zaehler { font-family: var(--mono); font-size: 0.8rem; color: var(--n500); }
.leiste .rechts { margin-left: auto; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.leiste nav a { color: var(--n500); text-decoration: none; margin-right: 0.9rem; } .leiste nav a[aria-current="page"] { color: var(--n900); border-bottom: 1px solid var(--n900); }
.filter { display: flex; border: 1px solid var(--n200); border-radius: 0.5rem; overflow: hidden; }
.filter button { background: var(--ow-white); border: 0; padding: 0.35rem 0.7rem; cursor: pointer; color: var(--n500); }
.filter button[aria-pressed="true"] { background: var(--n900); color: var(--ow-white); }
select { border: 1px solid var(--n200); border-radius: 0.5rem; padding: 0.35rem 0.6rem; background: var(--ow-white); }
.knopf { border: 1px solid var(--n900); background: var(--n900); color: var(--ow-white); border-radius: 0.5rem; padding: 0.55rem 0.95rem; cursor: pointer; text-decoration: none; display: inline-block; }
.knopf.leise { background: var(--ow-white); color: var(--n900); }
.knopf[disabled] { opacity: 0.5; cursor: default; }
.karte { border: 1px solid var(--n200); border-radius: 0.5rem; padding: 1rem 1.1rem; margin: 0 0 1rem; }
.karte h3 { font-size: 0.8rem; font-weight: 600; color: var(--n500); margin: 0 0 0.5rem; }
.status { font-family: var(--mono); font-size: 0.75rem; color: var(--n500); }
.leer { color: var(--n500); padding: 2rem 1.5rem; }
.anmeldung { max-width: 40ch; margin: 4rem auto; padding: 0 1rem; }
.anmeldung input { width: 100%; border: 1px solid var(--n200); border-radius: 0.5rem; padding: 0.6rem 0.75rem; margin: 0.5rem 0; }
.fuss { color: var(--n500); font-size: 0.85rem; padding: 2rem 1rem; border-top: 1px solid var(--n200); } .fuss p { max-width: 70ch; margin: 0; }
:focus-visible { outline: 2px solid var(--n900); outline-offset: 2px; }
[hidden] { display: none !important; }
/* Gast */
body.gast .nur-betreiber { display: none !important; } body.gast .gast-hinweis { display: block; } .gast-hinweis { display: none; color: var(--n500); font-size: 0.9rem; margin: 0 0 0.75rem; }
/* Rückrufliste */
.raster { display: grid; grid-template-columns: 1fr; min-height: calc(100vh - 50px); } @media (min-width: 900px) { .raster { grid-template-columns: minmax(320px, 2fr) 3fr; } }
.liste { border-right: 1px solid var(--n200); overflow: auto; }
.eintrag { display: grid; grid-template-columns: 6px 1fr auto; gap: 0.75rem; padding: 0.8rem 1rem 0.8rem 0.6rem; border: 0; border-bottom: 1px solid var(--n200); cursor: pointer; background: none; width: 100%; text-align: left; }
.eintrag:hover, .eintrag[aria-current="true"] { background: var(--n100); }
.eintrag .balken { border-radius: 3px; background: transparent; } .eintrag.notfall .balken { background: var(--ow-black); } .eintrag.zeitnah .balken { background: var(--n400); } .eintrag.planbar .balken { background: var(--n200); }
.eintrag .wer { font-weight: 600; } .eintrag .was { color: var(--n500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44ch; }
.eintrag .meta { font-family: var(--mono); font-size: 0.75rem; color: var(--n500); text-align: right; white-space: nowrap; }
.detail { padding: 1.25rem 1.5rem 3rem; max-width: 80ch; }
.detail h2 { font-size: 1.2rem; font-weight: 600; margin: 0 0 0.25rem; } .detail .unter { color: var(--n500); margin: 0 0 1rem; }
.notfall-balken { background: var(--ow-black); color: var(--ow-white); padding: 0.9rem 1.1rem; border-radius: 0.5rem; margin: 0 0 1rem; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; flex-wrap: wrap; }
.notfall-balken a { color: inherit; font-weight: 600; text-decoration: none; font-family: var(--mono); }
.hinweise { background: var(--n100); border-radius: 0.5rem; padding: 0.7rem 1rem; margin: 0 0 1rem; font-size: 0.9rem; } .hinweise ul { margin: 0; padding-left: 1.1rem; }
audio { width: 100%; margin: 0.25rem 0 0.75rem; }
.transkript { white-space: pre-wrap; color: var(--n700); font-size: 0.95rem; }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 1rem; }
.felder label { display: block; font-family: var(--mono); font-size: 0.72rem; color: var(--n500); } .felder label.breit { grid-column: 1 / -1; }
.felder input, .felder select, .felder textarea { width: 100%; border: 1px solid var(--n200); border-radius: 0.5rem; padding: 0.5rem 0.65rem; margin-top: 0.2rem; background: var(--ow-white); font-family: Inter, system-ui, sans-serif; font-size: 0.95rem; }
.felder textarea { min-height: 4.5rem; resize: vertical; } .zeichen { font-family: var(--mono); font-size: 0.72rem; color: var(--n500); text-align: right; }
.aktionen { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.9rem; align-items: center; }
/* Einreichen */
.einreichen { max-width: 60ch; margin: 0 auto; padding: 2rem 1rem 3rem; } .einreichen h2 { font-size: 1.3rem; font-weight: 600; margin: 0 0 0.25rem; } .einreichen p.hinweis { color: var(--n500); margin: 0 0 1.25rem; }
.feld { margin: 0 0 0.7rem; } .feld label { display: block; font-family: var(--mono); font-size: 0.72rem; color: var(--n500); }
.feld input, .feld textarea { width: 100%; border: 1px solid var(--n200); border-radius: 0.5rem; padding: 0.55rem 0.7rem; margin-top: 0.2rem; background: var(--ow-white); } .feld textarea { min-height: 7rem; font-family: var(--mono); font-size: 0.9rem; }
.beispiele { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0 1rem; }