/* 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; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400; src: url("/fonts/playfair-display-400-italic-latin.woff2") format("woff2"); }
/* Startseite */
.start { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 3rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 900px) { .start { grid-template-columns: 3fr 2fr; } }
.start h2 { font-size: 1.1rem; font-weight: 600; margin: 0 0 0.5rem; }
textarea.transkript { width: 100%; min-height: 22rem; border: 1px solid var(--n200); border-radius: 0.5rem; padding: 0.75rem; font: 0.9rem/1.5 var(--mono); resize: vertical; background: var(--ow-white); }
input.titel { width: 100%; border: 1px solid var(--n200); border-radius: 0.5rem; padding: 0.55rem 0.7rem; margin: 0 0 0.6rem; }
.aktionen { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 0.75rem; }
.gespraeche { list-style: none; margin: 0; padding: 0; }
.gespraeche li { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--n200); }
.gespraeche a { font-weight: 600; text-decoration: none; } .gespraeche .meta { font-family: var(--mono); font-size: 0.75rem; color: var(--n500); text-align: right; }
.gespraeche .was { color: var(--n500); grid-column: 1 / -1; font-size: 0.9rem; }
/* Gesprächsseite */
.tabs { display: flex; border-bottom: 1px solid var(--n200); padding: 0 1rem; gap: 0; overflow-x: auto; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 0.7rem 0.9rem; cursor: pointer; color: var(--n500); white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--n900); border-bottom-color: var(--n900); }
.blatt { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.blatt h2 { font-size: 1.05rem; font-weight: 600; margin: 1.25rem 0 0.5rem; } .blatt h2:first-child { margin-top: 0; }
.prozess { border: 1px solid var(--n200); border-radius: 0.5rem; padding: 0.9rem 1rem; margin: 0 0 0.9rem; }
.prozess h3 { font-size: 1rem; font-weight: 600; margin: 0 0 0.25rem; } .prozess .besch { color: var(--n700); margin: 0 0 0.6rem; }
.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.6rem 1rem; }
.zahl label { display: block; font-family: var(--mono); font-size: 0.72rem; color: var(--n500); }
.zahl .paar { display: flex; gap: 0.35rem; } .zahl input { border: 1px solid var(--n200); border-radius: 0.5rem; padding: 0.4rem 0.55rem; width: 100%; background: var(--ow-white); }
.zahl input.wert { width: 6.5rem; flex: 0 0 auto; } .zahl .zitat { font-size: 0.8rem; color: var(--n500); margin: 0.2rem 0 0; font-style: italic; }
.zahl .zitat.fehlt { color: var(--n900); font-style: normal; } .zahl .zitat.hand { font-style: normal; }
.gestrichen { background: var(--ow-black); color: var(--ow-white); padding: 0.8rem 1rem; border-radius: 0.5rem; margin: 0 0 1rem; } .gestrichen ul { margin: 0.25rem 0 0; padding-left: 1.1rem; }
.feld { margin: 0 0 0.6rem; } .feld label { display: block; font-family: var(--mono); font-size: 0.72rem; color: var(--n500); }
.feld input, .feld select, .feld textarea { width: 100%; border: 1px solid var(--n200); border-radius: 0.5rem; padding: 0.45rem 0.6rem; margin-top: 0.15rem; background: var(--ow-white); }
.zweispaltig { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 1000px) { .zweispaltig { grid-template-columns: 2fr 3fr; } }
.vorschau { border: 1px solid var(--n200); border-radius: 0.5rem; padding: 1.5rem 1.75rem; background: var(--ow-white); }
.vorschau h1 { font-size: 1.4rem; margin: 0 0 0.5rem; } .vorschau h2 { font-size: 1rem; margin: 1.1rem 0 0.3rem; } .vorschau h3 { font-size: 0.95rem; margin: 0.9rem 0 0.2rem; }
.vorschau p { margin: 0.3rem 0; } .vorschau ul, .vorschau ol { margin: 0.3rem 0; padding-left: 1.2rem; } .vorschau mark { background: var(--n200); padding: 0 0.2rem; }
pre.transkript { white-space: pre-wrap; font: 0.9rem/1.55 var(--mono); color: var(--n700); border: 1px solid var(--n200); border-radius: 0.5rem; padding: 1rem; max-height: 70vh; overflow: auto; }

/* Gast: nur ansehen */
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 1rem; }