/* 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; }
/* Upload */
.upload { max-width: 60ch; margin: 0 auto; padding: 2rem 1rem 3rem; }
.upload h2 { font-size: 1.35rem; font-weight: 600; margin: 0 0 0.25rem; } .upload p.hinweis { color: var(--n500); margin: 0 0 1.5rem; }
.ablage { display: block; border: 1.5px dashed var(--n400); border-radius: 0.75rem; padding: 2.2rem 1rem; text-align: center; cursor: pointer; }
.ablage.aktiv { border-color: var(--n900); background: var(--n100); }
.ablage input { display: none; }
.ablage .gross { font-size: 1.05rem; margin: 0 0 0.35rem; } .ablage .klein { color: var(--n500); font-size: 0.9rem; margin: 0; }
.vorgaenge { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.vorgaenge li { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--n200); }
.vorgaenge .name { font-weight: 600; } .vorgaenge .erg { color: var(--n700); grid-column: 1 / -1; } .vorgaenge .erg.unsicher::before { content: "Prüfen: "; font-weight: 600; }
.vorgaenge .st { font-family: var(--mono); font-size: 0.75rem; color: var(--n500); white-space: nowrap; }
/* Posteingang */
.raster { display: grid; grid-template-columns: 1fr; min-height: calc(100vh - 50px); }
@media (min-width: 900px) { .raster { grid-template-columns: minmax(300px, 1fr) 2fr; } }
.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.pruefen .balken { background: var(--ow-black); } .eintrag.ok .balken { background: var(--n200); }
.eintrag .wer { font-weight: 600; } .eintrag .was { color: var(--n500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40ch; }
.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; }
.detail h2 { font-size: 1.2rem; font-weight: 600; margin: 0 0 0.25rem; word-break: break-all; } .detail .unter { color: var(--n500); margin: 0 0 1rem; }
.zweispaltig { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 1100px) { .zweispaltig { grid-template-columns: minmax(280px, 1fr) minmax(320px, 1fr); } }
.bild { border: 1px solid var(--n200); border-radius: 0.5rem; overflow: hidden; background: var(--n100); min-height: 240px; }
.bild img { display: block; width: 100%; height: auto; } .bild iframe { display: block; width: 100%; height: 70vh; border: 0; }
.gruende { background: var(--ow-black); color: var(--ow-white); padding: 0.9rem 1.1rem; border-radius: 0.5rem; margin: 0 0 1rem; }
.gruende ul { margin: 0.25rem 0 0; padding-left: 1.1rem; }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 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 input.geaendert, .felder select.geaendert { border-color: var(--n900); }
.aktionen { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; align-items: center; }
.fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.6rem 1rem; }
.fakten div span { display: block; font-family: var(--mono); font-size: 0.72rem; color: var(--n500); } .fakten div b { font-weight: 500; }
/* Kanzlei */
.kanzlei { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.mandanten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.mandant h2 { font-size: 1.05rem; font-weight: 600; margin: 0 0 0.75rem; }
.mandant .zahlen { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; margin: 0 0 0.75rem; }
.mandant .zahlen b { display: block; font-size: 1.4rem; font-weight: 500; } .mandant .zahlen span { font-family: var(--mono); font-size: 0.72rem; color: var(--n500); }
.mandant ul { margin: 0.5rem 0 0.75rem; padding-left: 1.1rem; color: var(--n700); font-size: 0.9rem; }
.mandant table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 0.5rem 0 0.75rem; }
.mandant td { padding: 0.3rem 0; border-bottom: 1px solid var(--n200); vertical-align: top; } .mandant td.r { text-align: right; font-family: var(--mono); font-size: 0.8rem; white-space: nowrap; }