/* ============================================================
Tenew — Design-System „Werkbuch"
Zentrales Stylesheet für alle Oberflächen (Vermieterportal,
Gastportale, Betreiberportal).
Haltung: Das Produkt erzeugt keine Stimmung, sondern Beweise —
wer hat wann was bestätigt. Die Oberfläche ist ein Aufnahme-
instrument: präzise, undekoriert, ruhig. Farbe trägt Bedeutung,
nie Dekoration.
Farbwelt (Auftrag 2026-09-06): Espresso und Messing auf Kalk.
Espresso Marke, Navigation, primäre Aktion, Text
Messing Akzent, Hairlines, „Sie sind dran"
Kalk Papiergrund, Leinen/Stein die Abstufungen darauf
Warm gegen warm: Messing auf kühlem Blau wirkte wie ein Fremdkörper,
auf Dunkelbraun wie Messing auf Holz.
Farbrollen im Prozess
erledigt Grün der Schritt ist abgehakt
wartet Grau hängt an jemand anderem
sie Messing Ihre Entscheidung fehlt
problem Rot etwas ist schiefgegangen
Farbe steht nie allein: immer zusätzlich Symbol und Text.
Kontrast: Alle Textwerte sind gegen ihre tatsächliche Fläche
geprüft (Ziel 4,5:1). Messing ist als FLÄCHEN- und Linienfarbe
gedacht und erreicht als Text auf hellem Grund nur 3,3:1 —
für Messing-Text gibt es deshalb --messing-text. Auf einer
Messing-Fläche steht --text (4,8:1), nie Weiß (3,3:1) und auch
nicht --espresso, das dort nur 4,4:1 trägt.
Schrift (selbst gehostet — CSP erlaubt nur 'self', und externe
Font-Abrufe wären datenschutzrechtlich heikel)
Schibsted Grotesk Überschriften, Fließtext, Formulare, Labels.
Variabel 400–700, eine Datei.
IBM Plex Mono Daten: Zählerstände, Prüfwerte, Datum, Tokens.
Bleibt bewusst erhalten; im Protokoll müssen
Ziffern eindeutig und gleich breit sein.
Der Kopfbereich ist white-label-überschreibbar (branding.primaerFarbe).
Deshalb lebt die Markenfarbe in Schrift und kleinen Marken, nicht in
großen Farbflächen — das Layout überlebt eine fremde Kundenfarbe.
============================================================ */
@font-face {
/* Die Wortmarke. Eigene Schriftdatei aus Schibsted Grotesk bei Gewicht 500,
gebaut von werkzeuge/markenschrift-bauen.js. Sie enthaelt genau die sechs
Glyphen von "tenew." und traegt den optischen Ausgleich des Punktes (-.12em)
in der Vorbreite der Glyphe, nicht mehr als margin im Stylesheet.
Der Name muss abweichen: Schibsted Grotesk steht unter der SIL Open Font
License, die Aenderungen erlaubt und einen anderen Familiennamen verlangt.
Lizenztext und Aenderungsvermerk: public/fonts/OFL.txt.
Als data:-URI eingebettet und nicht als Datei verlinkt, aus drei Gruenden:
1068 Byte lohnen keinen zweiten Abruf, die Marke steht damit ohne Nachladen
schon beim ersten Bild, und der Service Worker braucht keinen neuen Eintrag
in seiner Asset-Liste — er hat dieses Stylesheet ohnehin.
unicode-range grenzt die Schrift auf ihre fuenf Zeichen ein: taucht der
Familienname versehentlich anderswo auf, faellt jedes andere Zeichen
zurueck auf Schibsted Grotesk. */
font-family: 'Tenew Marke';
font-style: normal; font-weight: 500; font-display: block;
src: url('data:font/woff2;base64,d09GMk9UVE8AAAQsAAoAAAAACDgAAAPfAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAADYVKBmAATAE2AiQDGD9sdGFnEgQGBYZjByAbggfIHoNtu3FVXS8vnclkMnk5j61FnCo7dqoibXwgIB0IOG0zsO/XtnfwZzZU8EiiET2paXs8//7t3F8rg0DiFmnkrQSTgAMMJIzwwfP/x0onEmeA8ok/HMAhnnNt2iK1Ygu7cFdogT5vt655I6AyjYtAm346gREBFuasN1gOTv/swI8DxUd8RtmQBUIxPBSrhOIE9Ykx3IxRs8pYANhgjwWA3U6KBeCvK84EYs/kamm356Z3T7MYwBhmicucM1fuPHkLf+sp5cqRe1MJZzzpjE8fImbZJ0+n4WMBYCebyqax6WwGDA0YRZNEsdHsMkeyhYuFspO3gbSWjDezco3rPjmOFB4l9eIkScsvtaalj6flIY++0tuB/PmlfpPkupL6T7/P/uOscQsnriTUCk95pC1GrAn933rTUq7VJQ5jiUM1r7ZfstWLww/RDFg1rPyx/yXuf3H+6kMXe3jo7epfhOfo3Jjzg/H8oJOzo02sHLU7vtGLG4stzkC6FVPYLnxoehmuSaplTTXpzbDb21PsfXKyu7eWbdY0FlSJNag8tD1jqy7Txj5JH/sOkQdJd6/LfLw8Hi93d/xF8AadXXp4Ox7etu3Y6muo1a+lelce5ZpNhkBhnNzzKuFXSGiLEYe13OSlyFWp1T8e42Q57oDcdPXQqYv7kfH+yjeEj+na4NNjDA/dW9kUw41VF/kpD1JyAam3JEXhjJJeDbk5Pc5gzK3zEhag8p3zYYbsypU70ouUtF/aYtSs2lPy6vu3YekyoI1MacvuTc/ESE5bFm9QSgfZiWdMpK61JzWbJSWn74o0RkaqcnvEMyrlQjbt/sY+3qbSWzLfwq6bb3vkCFbyS/Zs6TNv3rxnyRHCw7Rn6JZ56Ou6pEc1lB/am3tB1669W11oA6V7y/6CAvzgRwBMbR6G/ZA7HErRjLXRmQhwGzjeTP4JyBVM07Nijk5fwqdg/2MhlAKwQJyQQ3tLe6dKxZT6UpfVvJpWjhWQZMk7rbtePrllL/YPFQQAgPdn1zxojqQOqA9qoy1XFDyZhL3bU52O4QYAoAIAfgNxAfHMtZMtydcyDnzrAdQCFUDe1gUAAgAAZ+oK4wPCWfhEkcUwEdJJI5JPB1ElqLDcsL7lSBu1SZu1RVu1bbljH+3OaceYMEdop9YTTrVLFF5vRXA5IJLZI1E5XFpuWN9ypI3apM3aoq3attyxj3Znp8N64zUhAgAAAACARgAAAAAAkKj3TFgGXw6n6jq2ZgYSBvomDhZT1+FMzmd5a/G73tqZWFlyyiWH3BIUkbDu2b+A5vORmh6b/oW2T0KRhPTBYVACAAAA') format('woff2');
unicode-range: U+002E, U+0065, U+006E, U+0074, U+0077;
}
@font-face {
font-family: 'Schibsted Grotesk';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/fonts/schibsted-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Schibsted Grotesk';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/fonts/schibsted-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/plexmono-400-latin.woff2') format('woff2');
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/fonts/plexmono-600-latin.woff2') format('woff2');
}
:root {
/* --- Palette, verbindlich vorgegeben (Auftrag 2026-09-06, Teil 1: Espresso) --- */
--kalk: #EDEBE5;
--kalk-hell: #F8F7F3;
--stein: #DAD7CE;
--stein-tief: #C6C1B5;
--leinen: #E3DFD4;
--espresso: #2E2620; /* dunkle Flaeche: Marke, Navigation, Kopf */
--espresso-2: #3D342C; /* Dunkelton heller */
--espresso-3: #4A4038; /* Dunkelton aufgehellt, Links auf Hell */
--messing: #A98754;
--messing-hell: #D6B37C; /* Akzent AUF dunkler Flaeche */
/* Messing als TEXT auf hellem Grund. #A98754 erreicht dort nur 3,3:1;
dieser Wert liegt auf Weiß bei 6,5:1 und auf --leinen bei 4,9:1. */
--messing-text: #75592A;
/* --- Marke und primäre Aktion (Rollennamen aus dem Bestand) --- */
--tinte: var(--espresso);
--tinte-dunkel: #241E19;
--tinte-tief: #1A1512;
--tinte-hell: var(--espresso-3); /* Links auf hellem Grund (10,1:1) */
/* --- Flächen: Kalkpapier --- */
--grund: var(--kalk); /* Seitenhintergrund */
--karte: #ffffff;
--flaeche: var(--leinen); /* eingelassene Flächen, Tabellenköpfe */
--flaeche-warm: var(--kalk-hell); /* sehr leichte Abstufung, Eingabefelder */
--linie: var(--stein);
--linie-stark: var(--stein-tief);
/* --- Text (Werte gegen ihre jeweilige Fläche geprüft) --- */
--text: #26211C; /* 16,0:1 auf Weiß, 13,4:1 auf Kalk */
--text2: #4A423B; /* zweite Ebene */
--text-leise: #6B6259; /* 6,0:1 auf Weiß, 5,0:1 auf Kalk */
/* Auf --leinen (4,5:1 knapp) und --stein (4,2:1) verfehlt --text-leise die Marke.
Für leise Schrift auf diesen beiden Flächen deshalb: */
--text-leise-tief: #57504A; /* 6,0:1 auf Leinen, 5,5:1 auf Stein */
--muted: var(--text-leise);
/* --- Status. Textfarben jeweils auf der zugehörigen Fläche geprüft.
Die vier Zustände sind nie allein an der Farbe erkennbar; jede
Statuspille trägt zusätzlich Symbol und Klartext. --- */
--status-erledigt: #3E6B4F; --status-erledigt-bg: #E6EDE7;
--status-wartet: #57504A; --status-wartet-bg: #E7E5DE;
--status-sie: var(--messing); --status-sie-bg: #FBF7F0;
--status-problem: #8E3226; --status-problem-bg: #F6E3DF;
/* Bestandsnamen der vier Rollen. „info" ist im Bestand die Rolle
„hier bist du / du bist dran" und wird deshalb zu „sie". */
--ok-bg: var(--status-erledigt-bg); --ok-text: #2F5A3E; --ok-linie: #C3D6C8; --ok: var(--status-erledigt);
--warn-bg: var(--status-wartet-bg); --warn-text: #443E39; --warn-linie: #CFCBC0; --warn: var(--status-wartet);
--rot-bg: var(--status-problem-bg); --rot-text: #7A2A20; --rot-linie: #E7C6BE; --rot: var(--status-problem);
--info-bg: var(--status-sie-bg); --info-text: var(--messing-text); --info-linie: #E0CDAC; --info: var(--messing-text);
/* Signalfarbe der Warnpille (Zahl-Badge am Prozessschritt):
Messingfläche mit --text (4,8:1). Weiß wäre 3,3:1, --espresso nur 4,4:1. */
--signal: var(--messing);
--signal-text: var(--text);
/* --- Fokus --- */
--fokus: var(--espresso-3);
--fokus-hof: rgba(169, 135, 84, .38);
/* --- Raster --- */
--raum-1: 4px; --raum-2: 8px; --raum-3: 12px; --raum-4: 16px;
--raum-5: 24px; --raum-6: 32px; --raum-7: 48px;
--radius: 10px;
--marke-punkt-abstand: .04em; /* Abstand des Markenpunkts, siehe .wortmarke i */
--radius-klein: 7px;
--radius-gross: 14px;
--schatten: 0 1px 2px rgba(46, 38, 32, .07), 0 3px 10px rgba(46, 38, 32, .06);
--schatten-hoch: 0 12px 34px rgba(46, 38, 32, .2);
--breite: 800px;
/* Maximalbreite der Arbeitsflaeche neben der Seitenleiste. Begrenzt die FLAECHE,
nicht die Lesespalte — .inhalt bleibt bei --breite und wird darin zentriert. */
--breite-arbeit: 1320px;
/* --- Schrift --- */
--schrift-kopf: 'Schibsted Grotesk', -apple-system, 'Segoe UI', sans-serif;
--schrift-text: 'Schibsted Grotesk', -apple-system, 'Segoe UI', Roboto, sans-serif;
--schrift-daten: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
/* --- Aliase für Bestandsbezüge in Views und JS ---
Diese Namen stehen in style="…"-Attributen der Views; sie behalten ihre
Bedeutung, zeigen aber auf die neue Palette. Nicht entfernen. */
--tanne: var(--tinte);
--tanne-dunkel: var(--tinte-dunkel);
--tanne-tief: var(--tinte-tief);
--terrakotta: var(--messing); /* Akzent „Aktion" */
--terrakotta-dunkel: var(--messing-text);
--sand: var(--grund);
--gruen: var(--tinte);
--beige: var(--grund);
--orange: var(--warn);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--schrift-text);
font-size: 16px; /* 16px verhindert zusätzlich den iOS-Zoom beim Fokus in Felder */
line-height: 1.55;
background: var(--grund);
color: var(--text);
-webkit-font-smoothing: antialiased;
font-variant-numeric: tabular-nums;
}
/* Sprungmarke zum Inhalt: erste Tabulatorstation, sichtbar nur bei Tastaturfokus. */
.skip-link {
position: absolute; left: var(--raum-3); top: -60px; z-index: 10000;
background: var(--tinte); color: #fff; padding: 10px 16px;
border-radius: var(--radius-klein); font-weight: 600; text-decoration: none;
transition: top .15s;
}
.skip-link:focus { top: var(--raum-3); }
/* ---------- Kopfleiste + Navigation ----------
Nahezu monochrome Tinte. Der Tenant kann die Fläche per branding.primaerFarbe
überschreiben; deshalb sind alle Elemente darin auf hellem Text mit
halbtransparenten Flächen aufgebaut und funktionieren auf jeder dunklen Farbe. */
.kopf {
background: var(--tinte-dunkel);
color: #EDEAE3;
padding: var(--raum-3) var(--raum-4);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--raum-3);
border-bottom: 1px solid rgba(255, 255, 255, .1);
box-shadow: 0 1px 0 rgba(46, 38, 32, .1);
}
.kopf a { color: #EDEAE3; text-decoration: none; font-weight: 600; }
.kopf .marke a { display: inline-flex; align-items: center; min-height: 44px; }
.kopf .marke, .kopf .marke a {
font-family: var(--schrift-kopf);
font-weight: 600;
font-size: 27px;
letter-spacing: .015em;
line-height: 1;
color: #fff;
display: inline-flex;
align-items: center;
}
/* ---------- Wortmarke ----------
Die Marke ist der Schriftzug „tenew" plus Punkt in Messing. Kein Bildzeichen.
Gewicht 500, Laufweite leicht eng, immer klein geschrieben. Der Punkt ist das
einzige Akzentelement, faellt nie weg und wird nie umgefaerbt.
Eine Quelle im Markup: views/_marke.ejs. */
.wortmarke {
font-family: 'Tenew Marke', var(--schrift-text);
font-weight: 500; letter-spacing: -.01em; text-transform: lowercase;
color: var(--espresso); white-space: nowrap; line-height: 1;
}
/* Kein Rand mehr: der Ausgleich steckt jetzt in der Vorbreite der Glyphe. */
/* Abstand des Markenpunkts. Die Laufweite der Wortmarke ist negativ und zieht auch den
Punkt an das w heran; zusaetzlich steckt im Zeichensatz "Tenew Marke" ein optischer
Ausgleich in der Vorbreite der Glyphe. Beides zusammen liess den Punkt kleben. Diese
Variable nimmt genau so viel davon zurueck, wie noetig ist, und sonst nichts:
Form, Farbe und Groesse des Punkts sind unveraendert. */
.wortmarke i { font-style: normal; color: var(--messing); margin-left: var(--marke-punkt-abstand); }
/* Auf dunklem Grund — auch auf einer fremden Kundenfarbe im Kopf. */
.auf-dunkel .wortmarke { color: var(--kalk-hell); }
.auf-dunkel .wortmarke i { color: var(--messing-hell); }
.wortmarke.gross { font-size: 27px; }
.kopf .portal-chip {
font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
background: rgba(255, 255, 255, .14); color: #E4E0D8;
padding: 4px 10px; border-radius: 999px; white-space: nowrap;
border: 1px solid rgba(255, 255, 255, .12);
}
.kopf-marke { display: flex; align-items: center; gap: var(--raum-3); flex-wrap: wrap; min-width: 0; }
.marke-logo { max-height: 34px; max-width: 180px; display: block; }
/* Abmelden sitzt auf der (ggf. kundeneigenen) Kopffarbe: halbtransparente Flaeche
statt fester Farbe, damit der Knopf auf jedem Farbton lesbar bleibt. */
/* Hoehere Spezifitaet als .btn noetig: .btn steht spaeter im Stylesheet und wuerde die
Tinte-Flaeche sonst zurueckholen. */
.kopf .btn.kopf-abmelden {
background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); color: #fff;
}
.kopf .btn.kopf-abmelden:hover { background: rgba(255, 255, 255, .27); }
.kopf .nav { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; }
.kopf .nav form { margin: 0; }
.kopf .nav > a {
font-size: 14px; font-weight: 500; padding: 0 11px; border-radius: var(--radius-klein);
display: inline-flex; align-items: center; min-height: 44px;
color: #E0DBD3; transition: background .15s, color .15s;
}
.kopf .nav > a:hover { background: rgba(255, 255, 255, .13); color: #fff; }
.kopf .nav > a[aria-current] {
background: rgba(255, 255, 255, .12); color: #fff;
box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .55);
}
.kopf .nutzer { font-size: 13px; opacity: .78; padding: 0 var(--raum-2); }
.kopf .btn:focus-visible, .kopf a:focus-visible, .nav-knopf:focus-visible {
outline: 2px solid #fff; outline-offset: 2px; box-shadow: none;
}
/* Mobil: Navigation hinter dem Menü-Knopf. CSS-only (kein JS), damit sie auch
ohne bzw. vor dem Laden von JavaScript bedienbar bleibt. */
.nav-schalter, .nav-knopf { display: none; }
@media (max-width: 820px) {
.kopf { padding: var(--raum-3); }
.kopf .nav {
display: none;
width: 100%;
flex-direction: column;
align-items: stretch;
gap: 2px;
padding: var(--raum-2) 0 var(--raum-1);
border-top: 1px solid rgba(255, 255, 255, .16);
margin-top: var(--raum-1);
}
.kopf .nav > a { padding: 13px 12px; font-size: 16px; }
.kopf .nav form { margin-top: var(--raum-2); }
.kopf .nutzer { padding: 10px 12px 2px; }
.nav-knopf {
display: inline-flex; align-items: center; gap: var(--raum-2);
cursor: pointer; user-select: none; min-height: 44px;
font-size: 14px; font-weight: 600; color: #EDEAE3;
border: 1px solid rgba(255, 255, 255, .32);
border-radius: var(--radius-klein); padding: 8px 13px;
}
/* Der Schalter bleibt fuer die Tastatur erreichbar (nur visuell versteckt) — mit
display:none waere das mobile Menue ausschliesslich per Maus/Touch bedienbar. */
.nav-schalter {
display: block; position: absolute; width: 1px; height: 1px;
margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
white-space: nowrap; border: 0;
}
.nav-schalter:checked ~ .nav { display: flex; }
.nav-schalter:focus-visible ~ .nav-knopf { outline: 2px solid #fff; outline-offset: 2px; }
.nav-schalter:checked ~ .nav-knopf .nav-knopf-zeichen { transform: rotate(90deg); }
.nav-knopf-zeichen { display: inline-block; transition: transform .15s ease; }
}
/* ---------- Schale des angemeldeten Bereichs ----------
Zwei Spalten: links die feste Seitenleiste, rechts die Arbeitsflaeche.
Der Kopfbalken entfaellt dort vollstaendig. Gastansichten, Anmeldung und
Rechtstexte behalten .kopf (siehe _kopf.ejs).
Die Seitenleiste steht ausserhalb von .inhalt und wird deshalb vom DOM-Morph
nie angefasst — Zahlen darin aendern sich erst beim naechsten Seitenwechsel. */
.schale { display: flex; align-items: flex-start; min-height: 100vh; }
.seitenleiste {
flex: none; width: 246px; align-self: stretch;
position: sticky; top: 0; max-height: 100vh; overflow-y: auto;
background: var(--tinte-dunkel); color: #EDEAE3;
display: flex; flex-direction: column;
padding: var(--raum-5) var(--raum-3) var(--raum-4);
border-right: 1px solid rgba(255, 255, 255, .08);
}
.sl-kopf { padding: 0 var(--raum-2) var(--raum-5); }
.sl-marke { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.sl-marke .marke-logo { max-height: 34px; max-width: 190px; }
.sl-nav { flex: 1 1 auto; }
.sl-nav ul { list-style: none; margin: 0 0 var(--raum-5); padding: 0; }
.sl-gruppe {
font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
color: #B9B1A4; margin: 0 0 var(--raum-2); padding: 0 var(--raum-2);
}
/* Der Eintrag traegt links eine 3px-Spur, die nur im aktiven Zustand Messing wird.
Sie ist im Ruhezustand transparent und reserviert den Platz — sonst wuerde die
Beschriftung beim Wechsel der Seite um drei Pixel springen. */
.sl-nav a {
display: flex; align-items: center; gap: var(--raum-2);
min-height: 44px; padding: 0 var(--raum-3) 0 var(--raum-2);
border-left: 3px solid transparent; margin-left: -3px;
border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
color: #E0DBD3; text-decoration: none; font-size: 15px; font-weight: 500;
transition: background .15s, color .15s;
}
.sl-nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.sl-nav a[aria-current] {
background: rgba(255, 255, 255, .12); color: #fff; font-weight: 600;
border-left-color: var(--messing-hell);
}
.sl-text { flex: 1 1 auto; min-width: 0; }
/* Zahlpille auf Messing: dunkler Text, nie Weiss (Weiss traegt hier nur 3,3:1).
Sie steht ausschliesslich an der Uebersicht und zaehlt offene Aufgaben. Am Guthaben
sass frueher dieselbe Pille und las sich dort wie eine Zahl ungelesener Aufgaben,
obwohl sie den Kontostand meinte. */
.sl-zahl {
flex: none; min-width: 22px; padding: 2px 7px; border-radius: 999px;
background: var(--messing-hell); color: var(--text);
font-size: 12.5px; font-weight: 700; line-height: 1.5; text-align: center;
font-variant-numeric: tabular-nums;
}
/* Guthaben: keine Pille, sondern ein leiser Wert mit Einheit. Damit ist auf einen Blick
klar, dass hier ein Kontostand steht und keine Aufgabenzahl. */
.sl-guthaben {
flex: none; font-size: 12.5px; font-weight: 600; line-height: 1.5;
color: var(--messing-hell); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sl-konto {
display: flex; align-items: center; gap: var(--raum-2); flex-wrap: wrap;
padding-top: var(--raum-4); margin-top: var(--raum-4);
border-top: 1px solid rgba(255, 255, 255, .16);
}
.sl-initialen {
flex: none; width: 34px; height: 34px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--messing-hell); color: var(--text);
font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
.sl-person { flex: 1 1 90px; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sl-name { font-size: 14px; font-weight: 600; color: #F1EEE8; overflow-wrap: anywhere; }
.sl-firma { font-size: 12.5px; color: #C3BBAE; overflow-wrap: anywhere; }
.sl-konto form { margin: 0; flex: 1 0 100%; }
.seitenleiste .btn.sl-abmelden {
width: 100%; background: rgba(255, 255, 255, .16);
border-color: rgba(255, 255, 255, .3); color: #fff;
}
.seitenleiste .btn.sl-abmelden:hover { background: rgba(255, 255, 255, .27); }
.seitenleiste a:focus-visible, .seitenleiste .btn:focus-visible, .nav-knopf:focus-visible {
outline: 2px solid #fff; outline-offset: 2px; box-shadow: none;
}
/* Arbeitsflaeche. Die Maximalbreite von 1320px begrenzt die Flaeche, nicht die
Lesespalte: .inhalt behaelt seine bisherige Breite und wird darin zentriert.
Breite Inhalte holen sich die volle Flaeche spaeter ueber .inhalt.breit. */
.arbeitsflaeche { flex: 1 1 auto; min-width: 0; max-width: var(--breite-arbeit); }
.schale-schirm { display: none; }
.mobil-leiste { display: none; }
@media (max-width: 1000px) {
/* Schmale Bildschirme: die Seitenleiste wird zum Schubfach. Umschalter ist eine
Checkbox, das Menue funktioniert also auch ohne JavaScript. */
.schale { display: block; }
.arbeitsflaeche { max-width: none; }
.mobil-leiste {
display: flex; align-items: center; gap: var(--raum-3);
padding: var(--raum-2) var(--raum-3);
background: var(--tinte-dunkel); color: #EDEAE3;
border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.mobil-leiste .mobil-marke { margin-left: auto; font-size: 19px; }
.mobil-leiste .wortmarke { color: var(--kalk-hell); }
.mobil-leiste .wortmarke i { color: var(--messing-hell); }
.arbeitsflaeche .nav-knopf {
display: inline-flex; align-items: center; gap: var(--raum-2);
cursor: pointer; user-select: none; min-height: 44px;
font-size: 14px; font-weight: 600; color: #EDEAE3;
border: 1px solid rgba(255, 255, 255, .32);
border-radius: var(--radius-klein); padding: 8px 13px;
}
.seitenleiste {
position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
width: 282px; max-width: 86vw; max-height: none;
transform: translateX(-100%); transition: transform .22s ease;
box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0);
}
.nav-schalter:checked ~ .schale .seitenleiste { transform: none; }
.nav-schalter:checked ~ .schale .schale-schirm {
display: block; position: fixed; inset: 0; z-index: 50;
background: rgba(26, 21, 18, .5);
}
/* Der Schalter bleibt fuer die Tastatur erreichbar (nur visuell versteckt) — mit
display:none waere das Schubfach ausschliesslich per Maus/Touch bedienbar. */
.nav-schalter {
display: block; position: absolute; width: 1px; height: 1px;
margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
white-space: nowrap; border: 0;
}
.nav-schalter:focus-visible ~ .schale .nav-knopf { outline: 2px solid #fff; outline-offset: 2px; }
.nav-schalter:checked ~ .schale .nav-knopf .nav-knopf-zeichen { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
.seitenleiste { transition: none; }
}
/* Nur fuer Screenreader: ergaenzt Zahlen um ihre Bedeutung („3 Neuvermietungen
Guthaben"), ohne die Pille optisch zu verbreitern. */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* ---------- Layout ---------- */
.inhalt { max-width: var(--breite); margin: 0 auto; padding: var(--raum-5) var(--raum-4) var(--raum-7); }
.fuss {
max-width: var(--breite); margin: 0 auto;
padding: 0 var(--raum-4) var(--raum-6);
font-size: 13px; color: var(--muted); text-align: center;
}
.fuss { display: flex; flex-direction: column; align-items: center; gap: var(--raum-2); }
.fuss nav { display: flex; gap: var(--raum-2) var(--raum-4); flex-wrap: wrap; justify-content: center; }
.fuss-marke { font-family: var(--schrift-kopf); font-size: 17px; font-weight: 600; color: var(--text2); letter-spacing: .015em; }
.fuss a {
color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px;
}
.fuss a:hover { color: var(--tinte); }
.card {
background: var(--karte);
border: 1px solid var(--linie);
border-radius: var(--radius);
padding: var(--raum-5);
margin-bottom: var(--raum-4);
box-shadow: var(--schatten);
}
/* Einzelne, zentrierte Karte: Anmeldung, Registrierung, Passwortvergabe, Fehlerseiten.
Diese Seiten haben genau eine Aufgabe — die Karte bekommt deshalb Luft und eine feste,
schmale Spalte statt der vollen Inhaltsbreite. */
.card.solo { max-width: 460px; margin: var(--raum-7) auto; padding: var(--raum-6); }
.card.solo.breit { max-width: 580px; }
.card.solo h1 { font-size: clamp(26px, 6vw, 32px); }
.card.solo > p:first-of-type { color: var(--text2); }
.card.solo .nachsatz { margin: var(--raum-4) 0 0; font-size: 14px; color: var(--muted); }
.card.solo .nachsatz + .nachsatz { margin-top: var(--raum-2); }
@media (max-width: 560px) {
.card.solo { margin: var(--raum-4) auto; padding: var(--raum-5) var(--raum-4); }
}
@media (max-width: 560px) {
.inhalt { padding: var(--raum-4) var(--raum-3) var(--raum-6); }
.card { padding: var(--raum-4); border-radius: var(--radius-klein); }
}
/* ---------- Typografie ----------
Eine Familie fuer alles: Schibsted Grotesk. Ueberschriften laufen in Gewicht 500
mit enger Laufweite — so verlangt es die Tenew-Vorgabe, und erst damit sitzt die
Interpunktion am Wort statt daneben: Schibsted Grotesk gibt Komma und Doppelpunkt
grosszuegige Seitenraender, was in einer 40px-Ueberschrift als „Willkommen ,"
gelesen wird. Die vorherige POSITIVE Laufweite von .012em hat das noch verstaerkt. */
h1, h2 {
font-family: var(--schrift-kopf);
font-weight: 500;
letter-spacing: -.035em;
color: var(--tinte);
line-height: 1.1;
text-wrap: balance;
}
h1 { font-size: clamp(30px, 7vw, 40px); margin: 0 0 var(--raum-4); }
h2 { font-size: clamp(22px, 4.5vw, 26px); margin: 0 0 var(--raum-3); }
h3 {
font-family: var(--schrift-text);
font-size: 16px; font-weight: 600; line-height: 1.35;
margin: 0 0 var(--raum-2); color: var(--text);
}
p { margin: 0 0 var(--raum-3); }
a { color: var(--tinte-hell); text-underline-offset: 2px; }
a:hover { color: var(--tinte); }
strong, b { font-weight: 600; }
.klein { font-size: 13px; color: var(--muted); line-height: 1.5; }
/* Eyebrow: kurze Einordnung über einer Überschrift. */
.vorzeile {
font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
color: var(--muted); margin: 0 0 var(--raum-2);
}
/* Daten in Monospace mit Tabellenziffern: Zählerstände, Prüfwerte, Tokens, IDs.
Zahlen, die verglichen werden, stehen so stellenbündig untereinander. */
code, .daten, .z-stand, .z-nr, .pruefwert {
font-family: var(--schrift-daten);
font-variant-numeric: tabular-nums;
font-size: .92em;
}
code, .pruefwert {
background: var(--flaeche); border-radius: 5px; padding: 2px 6px;
border: 1px solid var(--linie); word-break: break-all;
}
/* Pruefwerte stehen oft in .klein-Absaetzen; die feste Groesse verhindert, dass die
relative 0.92em-Regel sie unter die Lesbarkeitsgrenze zieht. */
.pruefwert { font-size: 12.5px; }
/* ---------- Formulare ---------- */
label { display: block; font-size: 13.5px; font-weight: 600; margin: var(--raum-4) 0 var(--raum-1); color: var(--text2); }
input, select, textarea {
width: 100%;
padding: 11px 12px;
border: 1px solid var(--linie-stark);
border-radius: var(--radius-klein);
font-size: 16px; /* nicht kleiner: sonst zoomt iOS beim Fokus */
font-family: inherit;
background: var(--flaeche-warm);
color: var(--text);
transition: border-color .15s, background .15s;
}
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus { background: var(--karte); }
input[type="date"], input[type="time"], input[type="number"] {
font-family: var(--schrift-daten); font-variant-numeric: tabular-nums;
}
input[readonly] { background: var(--flaeche); color: var(--text2); }
textarea { line-height: 1.5; }
/* Sichtbarer Fokus auf jedem bedienbaren Element. Doppelring (Kontur + Hof),
damit er auch auf farbigen Statusflächen erkennbar bleibt. */
:is(input, select, textarea, button, a, summary, [tabindex]):focus-visible {
outline: 2px solid var(--fokus);
outline-offset: 2px;
box-shadow: 0 0 0 4px var(--fokus-hof);
border-radius: var(--radius-klein);
}
input[type="radio"], input[type="checkbox"] {
width: auto; min-width: 20px; min-height: 20px; accent-color: var(--tinte);
}
::placeholder { color: #6B6259; opacity: 1; }
/* Kopier-Knopf im Link-Feld (Zugangslinks). Sitzt absolut am rechten Feldrand;
das Feld bekommt rechts Platz, damit der Text nicht darunter läuft. */
.link-feld { position: relative; }
.link-feld input { padding-right: 50px; font-family: var(--schrift-daten); font-size: 14px; }
.link-feld .link-copy {
position: absolute; top: 4px; right: 4px; bottom: 4px;
width: 42px; min-height: 0; padding: 0; margin: 0;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--linie); border-radius: var(--radius-klein); cursor: pointer;
background: var(--karte); color: var(--text2);
font-size: 15px; line-height: 1; transition: background .15s, color .15s;
}
.link-feld .link-copy:hover { background: var(--flaeche); color: var(--text); }
/* Mehrzeiliges Feld (Beispieltext fuers Inserat): der Kopier-Knopf sitzt oben rechts,
nicht ueber die ganze Hoehe. */
.inserat-feld textarea {
width: 100%; padding: 11px 56px 11px 12px;
border: 1px solid var(--linie); border-radius: var(--radius-klein);
font-family: inherit; font-size: 14px; line-height: 1.5; resize: vertical;
background: var(--karte); color: var(--text);
}
.inserat-feld .link-copy { bottom: auto; height: 38px; top: 6px; right: 6px; }
/* Die beiden Knoepfe unter dem Textfeld: speichern und zuruecksetzen. */
.inserat-knoepfe { display: flex; gap: var(--raum-2); flex-wrap: wrap; align-items: center; margin: var(--raum-2) 0 var(--raum-2); }
.inserat-knoepfe form { margin: 0; }
/* .btn bringt display:inline-flex mit und wuerde [hidden] ueberstimmen: der Knopf
"Zuruecksetzen" waere von Anfang an sichtbar. Dieselbe Falle wie bei der
Unterschriftenflaeche, siehe .sig-flaeche[hidden]. */
.inserat-knoepfe .btn[hidden] { display: none; }
/* Der freiwillige Weg zurueck auf den Mustertext steht bewusst kleiner und in der Zeile
der Erklaerung, nicht neben den beiden Hauptknoepfen. */
.inserat-muster-form { display: inline; margin: 0; }
.inserat-muster-form .btn.mini { font-size: 12px; min-height: 30px; padding: 5px 10px; }
.link-feld .link-copy.kopiert { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-linie); }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--raum-2);
padding: 11px 18px;
min-height: 44px; /* Mindest-Antippfläche */
border: 1px solid transparent;
border-radius: var(--radius-klein);
font-size: 15px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
color: #fff;
background: var(--tinte);
font-family: inherit;
text-decoration: none;
text-align: center;
transition: background .15s, border-color .15s, transform .08s;
}
.btn:hover { background: var(--tinte-dunkel); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn.voll { width: 100%; margin-top: var(--raum-4); }
.btn.grau {
background: var(--karte); color: var(--text2); border-color: var(--linie-stark);
}
.btn.grau:hover { background: var(--flaeche); color: var(--text); border-color: var(--muted); }
.btn.rot { background: var(--rot); }
.btn.rot:hover { background: #7A2A20; }
.btn.akzent { background: var(--info); }
.btn.akzent:hover { background: var(--info-text); }
.btn.gruen { background: var(--ok); }
.btn.gruen:hover { background: var(--ok-text); }
/* Teil 6: die zweite, endgültige Bestätigung („Ja, Vergabe wirklich rückgängig machen") —
warnfarben, damit sie sich klar vom aufklappenden Auslöser darüber unterscheidet. */
.btn.warn { background: var(--warn); color: var(--signal-text); }
.btn.warn:hover { background: var(--warn-text); color: #fff; }
/* Kompakter Knopf fuer Nebenaktionen. 38px bleibt deutlich ueber der WCAG-Untergrenze;
44px wuerde die dichten Listen (Termine, Bewerber, Protokollzeilen) auseinanderziehen. */
.btn.mini { padding: 8px 13px; min-height: 38px; font-size: 13px; }
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; }
/* ---------- Meldungen ----------
Jede Meldung trägt zusätzlich zur Farbe ein Zeichen — Farbe allein ist
für Menschen mit Farbfehlsichtigkeit keine Information. */
/* Kein display:flex hier: die Views mischen in diesen Kaesten Inline-Elemente und
Textknoten (Titel — Text). Als Flex-Container wuerde jedes Element
ein eigener Flex-Item-Block und der Satz auseinandergerissen. Das Zeichen sitzt
deshalb absolut, der Inhalt fliesst normal weiter. */
.hinweis, .fehler, .ok {
position: relative;
border-radius: var(--radius-klein);
padding: var(--raum-3) var(--raum-4) var(--raum-3) 42px;
font-size: 14.5px;
line-height: 1.5;
margin-bottom: var(--raum-4);
border: 1px solid;
}
.hinweis > :last-child, .fehler > :last-child, .ok > :last-child { margin-bottom: 0; }
.hinweis::before, .fehler::before, .ok::before {
position: absolute; left: var(--raum-4); top: var(--raum-3);
width: 18px; text-align: center;
font-weight: 700; font-size: 15px; line-height: 1.5;
}
.hinweis { background: var(--warn-bg); border-color: var(--warn-linie); color: var(--warn-text); }
.hinweis::before { content: '!'; }
.fehler { background: var(--rot-bg); border-color: var(--rot-linie); color: var(--rot-text); }
.fehler::before { content: '\00d7'; font-size: 18px; line-height: 1.2; }
.ok { background: var(--ok-bg); border-color: var(--ok-linie); color: var(--ok-text); }
.ok::before { content: '\2713'; }
/* Bauauftrag 22: Knopf-Links behalten ihre Knopffarbe (sonst dunkle Schrift auf dunklem Knopf). */
.hinweis a:not(.btn), .fehler a:not(.btn), .ok a:not(.btn) { color: inherit; }
/* ---------- Tabellen ---------- */
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th, td { text-align: left; padding: 11px var(--raum-2); border-bottom: 1px solid var(--linie); vertical-align: top; }
th {
font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--linie-stark);
}
tr:last-child td { border-bottom: none; }
/* Zellen mit langen, umbruchlosen Werten (E-Mail-Adressen, Tokens) duerfen brechen,
sonst schieben sie die Tabelle ueber den Bildschirmrand hinaus. */
td.umbrechen { overflow-wrap: anywhere; }
/* ---------- Badges ---------- */
/* inline-block statt inline-flex: die Views setzen in Badges Text und Inline-Elemente
gemischt ("Schritt 5: Name"). Als Flex-Container bekaeme jedes Element
einen eigenen Item-Kasten samt Luecke — im Satz erschiene "Schritt 5 : Name". */
.badge {
display: inline-block;
padding: 4px 10px; border-radius: 999px;
font-size: 12.5px; font-weight: 600; line-height: 1.3;
border: 1px solid transparent; white-space: nowrap;
}
.badge.gruen { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-linie); }
.badge.gelb { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-linie); }
.badge.rot { background: var(--rot-bg); color: var(--rot-text); border-color: var(--rot-linie); }
.badge.grau { background: var(--flaeche); color: var(--text2); border-color: var(--linie); }
.badge.blau { background: var(--info-bg); color: var(--info-text); border-color: var(--info-linie); }
/* Terminplaetze eines freigegebenen Blocks (Auftrag 2026-09-12). Drei Zustaende, drei
Formen: gebucht traegt ein Haekchen, frei steht schlicht da, verfallen ist
durchgestrichen. Die Farbe ist nur Zugabe. Rot faellt hier weg, ein freier Platz ist
kein Problem, sondern schlicht noch offen. */
.badge.platz-frei { background: var(--leinen); color: var(--text-leise-tief); border-color: var(--linie); }
.badge.platz-verfallen {
background: var(--kalk-hell); color: var(--text-leise-tief);
border-color: var(--linie); border-style: dashed;
text-decoration: line-through; font-weight: 500;
}
/* Siegel — das wiederkehrende Zeichen für „bestätigt und unveränderlich".
Steht am versiegelten Protokoll und an abgeschlossenen Schritten; die
gezackte Kante zitiert einen Siegelrand. */
.siegel {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; flex: none; border-radius: 50%;
background: var(--ok-text); color: #fff;
font-size: 12px; font-weight: 700; line-height: 1;
box-shadow: 0 0 0 2px var(--karte), 0 0 0 3px var(--ok-linie);
}
/* ---------- Aufklapper ---------- */
summary { color: var(--text2); }
details > summary { cursor: pointer; }
/* Zeitfenster-Eingabe (Datum + von/bis). min-width:0 lässt die nativen date/time-
Felder unter ihre intrinsische Breite schrumpfen, sonst ragen sie mobil heraus. */
.zf-felder { display: flex; gap: var(--raum-3); margin-top: var(--raum-2); flex-wrap: wrap; }
.zf-felder > div { display: flex; flex-direction: column; min-width: 0; }
.zf-felder label { margin-top: 0; }
.zf-felder .zf-datum { flex: 2 1 150px; }
.zf-felder .zf-zeit { flex: 1 1 90px; }
@media (max-width: 480px) {
.zf-felder .zf-datum { flex-basis: 100%; }
.zf-felder .zf-zeit { flex-basis: calc(50% - 6px); }
}
/* Foto-Upload-Vorschau mit Lade-Anzeige. Der Wrapper reserviert von Anfang an feste
Maße, der Spinner liegt als Overlay darüber und dreht, bis der Server bestätigt hat.
Danach wird der Wrapper durch das Serverbild ersetzt — die Zeile springt nicht. */
.foto-thumb { position: relative; width: 72px; height: 54px; flex: none; }
.foto-thumb > img { width: 72px; height: 54px; object-fit: cover; border-radius: 6px; display: block; border: 1px solid var(--linie); }
.foto-spinner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .55); border-radius: 6px; }
.foto-spinner::after { content: ''; width: 20px; height: 20px; border: 2px solid rgba(46, 38, 32, .2); border-top-color: var(--tinte); border-radius: 50%; animation: foto-spin .7s linear infinite; }
@keyframes foto-spin { to { transform: rotate(360deg); } }
.foto-status { margin-top: 2px; font-size: 12.5px; }
.foto-fehler { color: var(--rot-text); font-weight: 600; }
/* Aufklapp-Trigger: klar als aufklappbares Menü erkennbar — sichtbarer Rahmen,
Fläche und ein Pfeil, der sich beim Öffnen dreht. So unterscheidet er sich
eindeutig von einem Link, hinter dem sofort eine endgültige Aktion läge. */
summary.aufklapp {
cursor: pointer; display: inline-flex; align-items: center; gap: var(--raum-2);
font-weight: 600; font-size: 14px; color: var(--text2);
padding: 9px 13px; min-height: 40px; border: 1px solid var(--linie-stark);
border-radius: var(--radius-klein);
background: var(--karte); list-style: none; user-select: none;
transition: border-color .15s, background .15s;
}
summary.aufklapp::-webkit-details-marker { display: none; }
summary.aufklapp::before {
content: '\25b8'; display: inline-block; color: var(--muted);
transition: transform .15s ease; font-size: 12px;
}
details[open] > summary.aufklapp::before { transform: rotate(90deg); }
summary.aufklapp:hover { border-color: var(--tinte); background: var(--flaeche); }
summary.aufklapp.rot { color: var(--rot-text); background: var(--rot-bg); border-color: var(--rot-linie); }
summary.aufklapp.rot::before { color: var(--rot-text); }
summary.aufklapp.rot:hover { border-color: var(--rot); }
summary.aufklapp.gruen { color: var(--ok-text); background: var(--ok-bg); border-color: var(--ok-linie); }
summary.aufklapp.gruen::before { color: var(--ok-text); }
summary.aufklapp.gruen:hover { border-color: var(--ok); }
summary.aufklapp.warn { color: var(--warn-text); background: var(--warn-bg); border-color: var(--warn-linie); }
summary.aufklapp.warn::before { color: var(--warn-text); }
summary.aufklapp.warn:hover { border-color: var(--warn); }
/* ---------- Toasts + Spinner ---------- */
.toast-wrap { position: fixed; left: 50%; bottom: var(--raum-5); transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: var(--raum-2); align-items: center; pointer-events: none; }
.toast {
background: var(--tinte-tief); color: #fff; padding: 12px 18px;
border-radius: var(--radius-klein); font-size: 14.5px; font-weight: 600;
box-shadow: var(--schatten-hoch); opacity: 0; transform: translateY(8px);
transition: opacity .2s, transform .2s; max-width: 90vw;
}
.toast.an { opacity: 1; transform: translateY(0); }
.toast.rot { background: var(--rot); }
/* Rabatt-Popup (Vermieter-Dashboard) */
.popup-hintergrund { position: fixed; inset: 0; background: rgba(7, 28, 25, .5); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: var(--raum-4); }
.popup { position: relative; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius-gross); padding: var(--raum-5) var(--raum-5) var(--raum-4); max-width: 460px; width: 100%; box-shadow: var(--schatten-hoch); }
.popup-pille { display: inline-flex; align-items: center; gap: 6px; background: var(--info-bg); border: 1px solid var(--info-linie); color: var(--info-text); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 600; }
.popup-x { position: absolute; top: 6px; right: 8px; background: none; border: 0; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; padding: 6px 10px; min-height: 44px; }
.popup-x:hover { color: var(--text); }
.popup-aktionen { display: flex; gap: var(--raum-3); margin-top: var(--raum-4); flex-wrap: wrap; }
.spinner { display: inline-block; width: 15px; height: 15px; margin-right: var(--raum-2); vertical-align: -2px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ---------- Vorgangsschiene (Stepper der Vermietungs-Detailseite) ----------
Das Rückgrat der Anwendung: sie zeigt auf jeder Seite eines Vorgangs, wo er
steht und wer als Nächstes dran ist. Erledigte Schritte tragen das Siegel. */
.prozessleiste-wrap { margin: 0 0 var(--raum-4); position: relative; }
/* Ortsangabe auf schmalen Bildschirmen: dort ist immer nur ein Ausschnitt der Schiene
zu sehen, und ohne Angabe weiss niemand, wo der Vorgang gerade steht. */
.schiene-lage {
margin: 0 0 var(--raum-2);
font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
color: var(--muted);
}
@media (min-width: 860px) { .schiene-lage { display: none; } }
/* Hinweis, dass rechts noch etwas weitergeht: weicher Verlauf ueber dem Scrollbereich. */
@media (max-width: 859px) {
.prozessleiste-wrap::after {
content: ''; position: absolute; right: 0; top: 26px; bottom: 0; width: 28px;
background: linear-gradient(to right, rgba(239, 242, 241, 0), var(--grund));
pointer-events: none;
}
}
.prozessleiste {
display: flex; gap: var(--raum-2); overflow-x: auto;
padding: var(--raum-2) 0; -webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
/* Nachlauf-Puffer: die letzte Kachel kann vollständig unter dem rechten
Scroll-Indikator hervorscrollen und wird nicht abgeschnitten. */
.prozessleiste::after { content: ''; flex: 0 0 18px; }
.prozessleiste .schritt {
position: relative;
flex: 1 1 0; min-width: 132px; display: flex; flex-direction: column; gap: 3px;
padding: 11px 13px; border-radius: var(--radius-klein);
border: 1px solid var(--linie);
background: var(--karte);
text-decoration: none; color: var(--text);
transition: border-color .12s, box-shadow .12s;
}
.prozessleiste .schritt:hover { border-color: var(--linie-stark); box-shadow: var(--schatten); }
.prozessleiste .schritt.erledigt { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-linie); }
.prozessleiste .schritt.laufend { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-linie); }
.prozessleiste .schritt.offen { background: var(--flaeche); color: var(--muted); border-color: var(--linie); }
/* Der aktuelle Schritt ist blau mit kräftigem Rahmen — Blau heißt in diesem
System durchgehend „hier bist du / hier ist die Aktion". */
.prozessleiste .schritt.aktuell {
background: var(--info-bg); color: var(--info-text);
border: 2px solid var(--info); padding: 10px 12px;
}
.prozessleiste .schritt.aktiv { border-color: var(--tinte); box-shadow: 0 0 0 2px var(--tinte); }
/* Warnsignal an einer Kachel: dort steht trotz „erledigt" noch eine Vermieter-
Aktion aus. An Schritt 3 zeigt die Pille zusätzlich die Anzahl offener
Aufgaben („3", „!" oder „! 3"), daher flexible Breite. */
.prozessleiste .s-warnpunkt {
position: absolute; top: -8px; right: -8px; z-index: 1;
min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px;
display: flex; align-items: center; justify-content: center;
background: var(--signal); color: var(--signal-text);
font-weight: 700; font-size: 12.5px; line-height: 1;
white-space: nowrap;
border: 2px solid var(--karte); box-shadow: 0 1px 3px rgba(46, 38, 32, .3);
}
/* Der Warnpunkt wird IMMER gerendert und nur bei leerem Marker ausgeblendet.
So bleibt die Kachel-Struktur beim Fetch-Refresh invariant — der positions-
basierte DOM-Morph kann die gleichnamigen -Geschwister sonst
gegeneinander verschieben und die Kachel verwürfeln. */
.prozessleiste .s-warnpunkt.leer { display: none; }
.prozessleiste .s-kopf { display: flex; align-items: center; gap: var(--raum-2); }
.prozessleiste .s-nr {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; flex: none; border-radius: 50%;
background: var(--tinte); color: #fff;
font-family: var(--schrift-kopf); font-size: 15px; font-weight: 600;
padding-top: 1px;
}
/* Siegelkante am abgeschlossenen Schritt. */
.prozessleiste .schritt.erledigt .s-nr {
background: var(--ok-text);
box-shadow: 0 0 0 2px var(--ok-bg), 0 0 0 3px var(--ok-linie);
}
.prozessleiste .schritt.laufend .s-nr { background: var(--warn-text); }
.prozessleiste .schritt.offen .s-nr { background: var(--linie-stark); color: var(--text2); }
.prozessleiste .schritt.aktuell .s-nr { background: var(--info); }
/* Symbol der Kachel: erbt die Statusfarbe ueber currentColor. */
.prozessleiste .s-icon { display: inline-flex; opacity: .75; }
.prozessleiste .s-icon svg { width: 16px; height: 16px; display: block; }
.prozessleiste .schritt.aktuell .s-icon { opacity: 1; }
.prozessleiste .s-label { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.prozessleiste .s-status { font-size: 12px; opacity: .9; }
/* Auf breiten Viewports teilen sich alle sechs Kacheln die Inhaltsbreite, statt
dass die letzte unter dem rechten Rand verschwindet — die Schiene ist das
Ruecklaufelement der Anwendung und soll dort vollstaendig sichtbar sein.
Darunter bleibt sie horizontal scrollbar. */
@media (min-width: 860px) {
.prozessleiste { overflow-x: visible; }
.prozessleiste::after { display: none; }
.prozessleiste .schritt { min-width: 0; }
.prozessleiste .s-label { hyphens: auto; }
}
/* Gesperrte Zukunftsschritte (Wizard): kein Link, kein Hover-Effekt. */
.prozessleiste .schritt.gesperrt { cursor: default; opacity: .7; }
.prozessleiste .schritt.gesperrt:hover { border-color: var(--linie); box-shadow: none; }
.prozess-hinweis, .prozess-banner, .prozess-zusatz {
display: flex; align-items: center; justify-content: space-between;
gap: var(--raum-3); flex-wrap: wrap;
margin-top: var(--raum-3); padding: var(--raum-3) var(--raum-4);
border-radius: var(--radius-klein);
background: var(--warn-bg); border: 1px solid var(--warn-linie);
}
.prozess-hinweis.fertig { background: var(--ok-bg); border-color: var(--ok-linie); }
/* „Sie sehen Schritt N": Ortsangabe, keine Warnung — neutral mit blauer Kante. */
.prozess-banner { background: var(--karte); border: 1px solid var(--linie); border-left: 4px solid var(--info); }
/* Zweiter Hinweis-Kasten für Aktionen an einem zurückliegenden Schritt. */
.prozess-zusatz { margin-top: var(--raum-2); border-left: 4px solid var(--warn-text); }
.prozess-hinweis .ph-text, .prozess-banner .ph-text, .prozess-zusatz .ph-text { display: flex; flex-direction: column; gap: 2px; min-width: 200px; flex: 1; }
.prozess-hinweis .ph-text strong, .prozess-banner .ph-text strong, .prozess-zusatz .ph-text strong { font-size: 15px; }
/* Zeichen vor der Hinweis-Ueberschrift. Frueher standen hier Emoji im Text; als
CSS-Zeichen sind sie einfarbig, ueberall gleich und werden nicht vorgelesen. */
.ph-marke::before {
content: '\25b8'; margin-right: 7px; font-weight: 700; color: var(--warn-text);
}
.ph-marke.fertig::before { content: '\2713'; color: var(--ok-text); }
.ph-marke.warn::before { content: '!'; color: var(--warn-text); }
.prozess-hinweis .ph-text span, .prozess-banner .ph-text span, .prozess-zusatz .ph-text span { font-size: 13.5px; color: var(--text2); }
/* Liste offener Einzelaufgaben unter dem Haupthinweis. */
.prozess-aufgaben { margin: var(--raum-2) 0 0; padding-left: 20px; font-size: 13.5px; color: var(--text2); }
.prozess-aufgaben li { margin: 3px 0; }
.prozess-frei { margin-top: var(--raum-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Ein langer Termin-Name („Freier Termin · noch nicht terminiert") sprengte auf schmalen
Bildschirmen die Seitenbreite: Flex-Kinder schrumpfen nicht unter ihre Inhaltsbreite,
solange sie keinen Umbruchpunkt haben. */
.prozess-frei > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
/* Badges sind sonst bewusst einzeilig (white-space: nowrap); hier steht aber ein
Termin-Name plus Datum drin, der auf 390px umbrechen können muss. */
.prozess-frei > .badge { white-space: normal; border-radius: var(--radius-klein); }
/* Unterschriften-Fläche auf der Protokollseite (Teil 7, Offline-Fix). Sie ersetzt die frühere
eigene Unterschriften-Seite: vor Ort ohne Netz darf kein Seitenwechsel nötig sein. Deutlich
abgesetzt, damit klar ist, dass hier gleich etwas Verbindliches passiert. */
.sig-flaeche {
margin-top: var(--raum-4); padding: var(--raum-4);
border: 2px solid var(--tinte); border-radius: var(--radius);
background: var(--flaeche-warm);
display: flex; flex-direction: column; gap: var(--raum-1);
}
.sig-flaeche .sig-titel {
font-family: var(--schrift-kopf); font-size: 21px; font-weight: 600;
color: var(--tinte); margin: 0 0 var(--raum-2);
}
.sig-canvas-rahmen {
border: 2px dashed var(--linie-stark); border-radius: var(--radius-klein);
background: #fff; touch-action: none; margin-top: var(--raum-1);
}
.sig-canvas-rahmen canvas { width: 100%; height: 200px; display: block; }
.sig-flaeche .sig-meldung { margin: var(--raum-2) 0 0; color: var(--text2); }
.sig-flaeche .sig-meldung.fehler { color: var(--rot-text); font-weight: 600; }
.sig-knoepfe { display: flex; gap: var(--raum-2); flex-wrap: wrap; margin-top: var(--raum-3); }
.sig-knoepfe .btn { flex: 1 1 auto; min-width: 130px; }
.sig-knoepfe [data-sig-speichern] { flex: 2 1 180px; }
/* Tabs innerhalb eines Schritts (Schritt 3: „Übersicht" / „Vor Ort"). Bewusst flach und
textnah — sie schalten nur den Ausschnitt um, sie sind keine eigene Aktion. Die aktive
Lasche trägt eine kräftige Unterkante statt nur einer Farbe, damit der Zustand auch ohne
Farbwahrnehmung erkennbar bleibt. */
.tabs {
display: flex; gap: var(--raum-1); flex-wrap: wrap;
border-bottom: 1px solid var(--linie); margin: 0 0 var(--raum-4);
}
.tabs .tab {
display: inline-flex; align-items: center; gap: 2px;
padding: 10px 14px; min-height: 44px; margin-bottom: -1px;
border: 1px solid transparent; border-bottom: 3px solid transparent;
border-radius: var(--radius-klein) var(--radius-klein) 0 0;
font-family: var(--schrift-kopf); font-size: 17px; font-weight: 600; letter-spacing: .01em;
color: var(--text2); text-decoration: none; background: none;
transition: color .15s, background .15s, border-color .15s;
}
.tabs .tab:hover { color: var(--tinte); background: var(--flaeche-warm); }
.tabs .tab.aktiv { color: var(--tinte); border-bottom-color: var(--tinte); background: var(--karte); }
.tabs .tab:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
/* Zähler-Badge (offene Punkte an einem Tab bzw. an einer Aktion). */
.zahl-badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 19px; height: 19px; padding: 0 6px; margin-left: 6px; border-radius: 999px;
background: var(--signal); color: var(--signal-text);
font-weight: 700; font-size: 12px; line-height: 1;
}
/* Anwesenheits-Kacheln „Kommt für mich infrage" / „Kommt nicht infrage".
Der gewählte Knopf leuchtet als Toggle auf; der doppelte Ring hebt ihn
deutlich vom nicht gewählten Nachbarn ab. */
.anwesenheit-wahl { display: flex; gap: var(--raum-2); flex-wrap: wrap; margin: 0; }
.anwesenheit-wahl form { margin: 0; }
/* Bewertungsknoepfe im Reiter "Vor Ort" (Auftrag 2026-09-14).
Frueher stand helle Schrift auf kraeftigem Grund, sobald etwas gewaehlt war, und genau
das war schlecht zu lesen. Jetzt umgekehrt: DUNKLE Schrift auf hellem farbigem Grund.
Der gewaehlte Knopf traegt ausserdem einen kraeftigeren Rand und darunter das Wort
"ausgewaehlt", die Auswahl ist also auch ohne Farbunterscheidung erkennbar. Die
Rahmenbreite ist in allen Zustaenden 2px, damit beim Wechsel nichts springt. */
.anwesenheit-wahl .wahl-knopf {
flex-direction: column; gap: 1px; line-height: 1.25;
background: var(--karte); color: var(--text2);
border: 2px solid var(--linie-stark);
}
.anwesenheit-wahl .wahl-knopf:hover { background: var(--flaeche); color: var(--text); }
.anwesenheit-wahl .wahl-zusatz { font-size: 11px; font-weight: 500; }
/* Gewaehlt: heller Grund, dunkle Schrift derselben Farbfamilie, kraeftiger Rand.
Gruen 6,6:1, Rot 7,4:1 gegen den jeweiligen Grund. */
.anwesenheit-wahl .wahl-knopf.ja-gewaehlt,
.anwesenheit-wahl .wahl-knopf.ja-gewaehlt:hover {
background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-text);
}
/* Eine Ablehnung ist eine getroffene Entscheidung, kein Alarm: gedaempftes Rot. */
.anwesenheit-wahl .wahl-knopf.nein-gewaehlt,
.anwesenheit-wahl .wahl-knopf.nein-gewaehlt:hover {
background: var(--rot-bg); color: var(--rot-text); border-color: var(--rot-text);
}
/* Der nicht gewaehlte Knopf tritt zurueck, bleibt aber klickbar. */
.anwesenheit-wahl .wahl-knopf.zurueck { background: var(--karte); color: var(--text-leise); border-color: var(--linie); }
.anwesenheit-wahl .wahl-knopf.zurueck:hover { background: var(--flaeche); color: var(--text2); border-color: var(--linie-stark); }
/* ---------- Dashboard: Archiv + Protokoll-Downloads + Schritt-Status ---------- */
.archiv summary {
cursor: pointer; font-family: var(--schrift-kopf); font-weight: 600; font-size: 21px;
color: var(--tinte); padding: 11px 14px; border-radius: var(--radius-klein);
background: var(--flaeche); border: 1px solid var(--linie);
list-style-position: inside; user-select: none;
}
.archiv summary:hover { border-color: var(--linie-stark); }
.archiv[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* Drei Download-Buttons nebeneinander; auf schmalen Bildschirmen einheitlich
volle Breite und sauber untereinander. */
.protokoll-dl { display: flex; gap: var(--raum-2); flex-wrap: wrap; }
.protokoll-dl .btn { text-decoration: none; white-space: nowrap; }
@media (max-width: 720px) {
.protokoll-dl { flex-direction: column; align-items: stretch; }
.protokoll-dl .btn { width: 100%; white-space: normal; }
}
/* Objektname in den Uebersichtstabellen: der eigentliche Einstieg in einen Vorgang. */
.objekt-link { color: var(--tinte); font-weight: 600; text-decoration: none; }
.objekt-link:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Kennzahlen einer Vermietung. Frueher standen hier vier nackte Zahlen hinter Schraeg-
strichen („0 / 39 / 1 / 1") mit der Legende nur in der Spaltenueberschrift — auf dem
Handy, wo die Ueberschrift wegfaellt, war das nicht mehr lesbar. Jetzt traegt jede
Zahl ihre eigene Beschriftung. */
.zahlen { display: flex; flex-wrap: wrap; gap: 3px 14px; font-size: 13px; color: var(--muted); }
.zahlen b { font-family: var(--schrift-daten); font-weight: 600; font-size: 14px; color: var(--text); margin-right: 3px; }
/* Ausrufezeichen im Stand-Badge: rundes Zeichen statt eines Emoji. */
.badge-marke {
display: inline-flex; align-items: center; justify-content: center;
width: 15px; height: 15px; margin-right: 5px; border-radius: 50%;
background: var(--warn-text); color: var(--warn-bg);
font-size: 11px; font-weight: 700; line-height: 1; vertical-align: -2px;
}
/* Status-Spalte „Schritt X: Name" — bei wenig Platz nur „Schritt X". */
.schritt-badge { white-space: nowrap; }
@media (max-width: 640px) {
.schritt-badge .schritt-name { display: none; }
}
/* Tabellen mit .tabelle-karten werden auf schmalen Bildschirmen zum Karten-Layout
(Zeile = Karte, Zellen untereinander, Spaltenname per data-label davor).
Die Kopfzeile trägt .nur-breit und verschwindet im Karten-Modus. */
@media (max-width: 640px) {
.tabelle-karten, .tabelle-karten tbody { display: block; }
.tabelle-karten tr {
display: block; border: 1px solid var(--linie); border-radius: var(--radius-klein);
padding: var(--raum-3); margin-bottom: var(--raum-3); background: var(--flaeche-warm);
}
.tabelle-karten tr.nur-breit { display: none; }
.tabelle-karten td { display: block; border: none; padding: 3px 0; }
.tabelle-karten td[data-label]::before {
content: attr(data-label) ': ';
font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
color: var(--muted); margin-right: var(--raum-1);
}
}
/* ---------- Betreiber: Kundenliste ----------
Der Inhaltsbereich ist 800px breit (--breite), neun Spalten samt zwei Formularzeilen
passen dort auf keinem Bildschirm hinein. Die Liste steht deshalb durchgehend als Karte
je Kunde: oben die Stammdaten, darunter auf leicht getoenter Flaeche Kontakt und Notiz
und, durch eine Linie getrennt, die Gutschrift. Technik wie .tabelle-karten, nur ohne
Breitenschwelle. Farben aus dem bestehenden Satz (Leinen, Kalk-hell), keine neuen. */
.adm-kunden, .adm-kunden tbody, .adm-kunden tr, .adm-kunden td { display: block; }
.adm-kunden tr.nur-breit { display: none; }
.adm-kunden tr.adm-kunde {
border: 1px solid var(--linie); border-bottom: none;
border-radius: var(--radius-klein) var(--radius-klein) 0 0;
padding: var(--raum-3) var(--raum-3) var(--raum-2); background: var(--flaeche-warm);
}
.adm-kunden tr.adm-detail {
border: 1px solid var(--linie); border-top: none;
border-radius: 0 0 var(--radius-klein) var(--radius-klein);
margin-bottom: var(--raum-3); background: var(--flaeche);
}
.adm-kunden td { border: none; padding: 3px 0; }
.adm-kunden td[data-label]::before {
content: attr(data-label) ': ';
font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
color: var(--text2); margin-right: var(--raum-1);
}
/* Eine Hauptaktion je Kunde ("Details", gefuellt), daneben der Statuswechsel als
Nebenaktion. Die Knoepfe stehen nebeneinander und brechen nur gemeinsam um. */
.adm-aktionen { padding-top: var(--raum-2) !important; }
.adm-knoepfe { display: flex; gap: var(--raum-2); flex-wrap: wrap; align-items: center; }
.adm-knoepfe form { margin: 0; display: flex; gap: var(--raum-2); }
.adm-knoepfe .btn { white-space: nowrap; text-decoration: none; }
.adm-detail > td { padding: 0 var(--raum-3); }
.adm-block {
display: flex; flex-wrap: wrap; align-items: center;
gap: var(--raum-2) var(--raum-4); padding: var(--raum-3) 0;
font-size: 13px; color: var(--text2);
}
.adm-block + .adm-block { border-top: 1px solid var(--linie); }
/* --text2 statt --muted: auf der Leinen-Flaeche kaeme --muted nur auf 4,49:1, knapp unter
der Grenze. Die Beschriftung ist ausserdem durch Versalien erkennbar, nicht nur farblich. */
.adm-marke {
font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
color: var(--text2); margin-right: var(--raum-1);
}
.adm-form { display: flex; gap: var(--raum-2); margin: 0; flex: 1 1 100%; align-items: center; }
.adm-form input { font-size: 13px; padding: 6px 8px; flex: 1; min-width: 0; }
/* Der Platzhalter "+/-Einheiten" wurde im frueheren 90px-Feld abgeschnitten. */
.adm-form input.adm-menge { flex: 0 0 132px; width: 132px; }
/* Ganz schmal stehen die Eingaben eines Formulars untereinander, sonst wird aus dem
Grund-Feld ein Guckloch. Der Knopf bleibt rechts. */
@media (max-width: 620px) {
.adm-form { flex-wrap: wrap; }
.adm-form input, .adm-form input.adm-menge { flex: 1 1 100%; width: auto; }
.adm-form .btn { margin-left: auto; }
}
/* ---------- Rechtstexte (Impressum, Datenschutz, AGB, AVV) ---------- */
.rechtstext { max-width: 68ch; }
.rechtstext h1 { margin-bottom: var(--raum-1); }
.rechtstext-stand { font-size: 13px; color: var(--muted); margin: 0 0 var(--raum-5); }
.rechtstext h2 { font-size: clamp(20px, 3.6vw, 23px); margin: var(--raum-6) 0 var(--raum-2); }
.rechtstext h3 { font-size: 15.5px; margin: var(--raum-5) 0 var(--raum-2); }
.rechtstext p, .rechtstext li { font-size: 15px; line-height: 1.7; }
.rechtstext ul { padding-left: 20px; }
.rechtstext table { width: 100%; border-collapse: collapse; font-size: 14px; margin: var(--raum-3) 0 var(--raum-4); }
/* Breite Rechtstext-Tabellen laufen mobil sonst aus dem Bild. Der Scroll-Container
macht sie horizontal scrollbar, ohne die Seite selbst zu verbreitern. */
.rechtstext .tabelle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--raum-3) 0 var(--raum-4); }
.rechtstext .tabelle-scroll > table { margin: 0; min-width: 480px; }
.rechtstext th, .rechtstext td { border: 1px solid var(--linie); padding: 8px 11px; text-align: left; vertical-align: top; }
.rechtstext th { background: var(--flaeche); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--text); }
.rechtstext-hinweis { background: var(--flaeche); border-left: 4px solid var(--info); border-radius: var(--radius-klein); padding: var(--raum-3) var(--raum-4); font-size: 14.5px; }
/* ---------- Bewegung ----------
Die Seiten aktualisieren sich bereits live per DOM-Morph; zusätzliche Animation
würde damit konkurrieren. Wer Bewegung reduziert haben will, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* Die Unterschriften-Flaeche ist ein Flex-Container; ohne diese Regel wuerde das
hidden-Attribut vom display:flex ueberstimmt und die Flaeche stuende beim Laden
ohne zugeordnete Person offen (Klick auf "Uebernehmen" waere wirkungslos). */
.sig-flaeche[hidden] { display: none; }
/* Unterschriftsflaeche der Selbstauskunft (Gastformular). Nutzt denselben Rahmen wie das
Protokoll; darunter eine Zeile mit Zustand und Loeschknopf. */
.sa-sig { margin: var(--raum-2) 0 var(--raum-3); }
.sa-sig .sig-canvas-rahmen canvas { height: 170px; touch-action: none; }
.sa-sig-zeile { display: flex; gap: var(--raum-3); align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: var(--raum-2); }
/* Anzeige der abgegebenen Unterschrift beim Vermieter. Heller Grund, damit ein dunkler
Strich in jedem Fall zu erkennen ist. */
.sa-sig-anzeige { border: 1px solid var(--linie); border-radius: var(--radius-klein); background: #fff; padding: var(--raum-2); max-width: 320px; }
.sa-sig-anzeige img { display: block; width: 100%; height: auto; }
/* Formularbaukasten. Die Pfeilknoepfe sind bewusst Knoepfe und kein Ziehen mit der Maus:
die meisten Vermieter arbeiten am Handy. */
.fb-fest { list-style: none; margin: 0; padding: 0; }
.fb-fest li { display: flex; gap: var(--raum-2); align-items: center; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.fb-fest li:last-child { border-bottom: 0; }
.fb-fest-name { font-weight: 600; min-width: 190px; }
.fb-fest-hinweis { color: var(--text-leise); flex: 1 1 260px; }
.fb-feld { border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: var(--raum-3); margin-bottom: var(--raum-3); }
.fb-kopf { display: flex; gap: var(--raum-3); align-items: flex-start; flex-wrap: wrap; }
.fb-titel { flex: 1 1 220px; }
.fb-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }
.fb-bearbeiten { margin-top: var(--raum-2); }
.fb-form { margin-top: var(--raum-2); }
.fb-form-knoepfe { margin-top: var(--raum-3); }
.fb-loeschen { display: flex; gap: var(--raum-2); align-items: center; flex-wrap: wrap; margin-top: var(--raum-3); padding-top: var(--raum-3); border-top: 1px solid var(--linie); }
.fb-warnung { color: var(--rot-text); flex: 1 1 240px; }
/* Am Handy zaehlt der Pfeil, die Beschriftung waere dort nur Ballast. */
@media (max-width: 560px) { .fb-knopf-text { display: none; } }
/* Offline gezeichnete Unterschriften, die noch nicht beim Server sind. */
.sig-warteschlange { margin-top: var(--raum-3); }
.sig-warteschlange[hidden] { display: none; }
.sig-warteschlange > p { margin: 0 0 var(--raum-2); }
.sig-wartet { font-size: 13px; padding: 3px 0; }
.sig-wartet.fehler { color: var(--rot-text); font-weight: 600; }
.sig-warteschlange .btn { margin-top: var(--raum-2); }
/* Offline-Balken der Protokollseite: klebt oben, damit vor Ort sofort sichtbar ist,
dass gerade nichts zum Server durchgeht. */
.offline-balken {
position: sticky; top: 0; z-index: 60;
margin: 0 0 var(--raum-3);
padding: var(--raum-2) var(--raum-3);
border-radius: var(--radius-klein);
background: var(--rot-bg); color: var(--rot-text);
border: 1px solid var(--rot-linie);
font-size: 14px; font-weight: 600;
}
.offline-balken[hidden] { display: none; }
/* ---------- Uebersicht des Vermieters (Etappe 5) ----------
Die Arbeitsflaeche bleibt hell: hier wird taeglich laenger mit Tabellen und
Formularen gearbeitet, ein dunkles Dashboard waere dafuer der falsche Ort.
Der einzige dunkle Bereich der Seite ist die Seitenleiste. */
/* Breite Ansichten (Uebersicht) nutzen die ganze Arbeitsflaeche statt der Lesespalte.
Formularseiten behalten --breite, dort zaehlt die Zeilenlaenge. */
.inhalt.breit { max-width: var(--breite-arbeit); }
.db-kopf {
display: flex; align-items: flex-end; justify-content: space-between;
flex-wrap: wrap; gap: var(--raum-3) var(--raum-5); margin-bottom: var(--raum-5);
}
.db-kopf-text { min-width: 0; }
.db-kopf h1 { margin: 0; }
.db-lage { margin: var(--raum-2) 0 0; color: var(--text2); font-size: 15.5px; max-width: 62ch; }
.db-kopf-knoepfe { display: flex; gap: var(--raum-2); flex-wrap: wrap; }
.db-kopf-knoepfe .btn { text-decoration: none; white-space: nowrap; }
/* --- Vier Kennzahlen ---
Vier gleich breite Spalten, ab 1000px drei, darunter zwei, ganz schmal eine.
auto-fit statt fester Spaltenzahl waere unruhiger: die Zahl der Karten ist fest. */
.kz-reihe {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: var(--raum-3); margin-bottom: var(--raum-4);
}
.kz {
background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius);
padding: var(--raum-4) var(--raum-4) var(--raum-3);
box-shadow: var(--schatten); min-width: 0;
}
/* Die erste Kennzahl ist die einzige, die eine Handlung verlangt. Sie traegt deshalb
Messingrahmen und getoente Flaeche. Die Zahl steht in --messing-text (6,2:1 auf
dieser Flaeche), NICHT in --messing: das waere dort nur 3,1:1. */
.kz-wichtig { border-color: var(--messing); background: var(--status-sie-bg); }
.kz-wichtig .kz-zahl { color: var(--messing-text); }
.kz-etikett {
margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: var(--text-leise);
}
.kz-zahl {
margin: var(--raum-2) 0 2px; font-family: var(--schrift-kopf);
font-size: clamp(30px, 4.2vw, 40px); font-weight: 500; letter-spacing: -.035em;
line-height: 1.05; color: var(--text);
}
.kz-zusatz { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-leise); }
/* --- Kartenkopf --- */
.card-kopf {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: var(--raum-2); margin-bottom: var(--raum-3);
}
.card-kopf h2 { margin: 0; }
/* --- Fortschritt: fuenf Segmente ---
Rein dekorativ (aria-hidden im Markup). Der Zustand steht immer zusaetzlich als
Text daneben ("Schritt X von 5") und als Pille in der Statusspalte, die Farbe
ist hier nie die einzige Auskunft.
Die kommenden Segmente stehen in --stein-tief (1,8:1 auf der Karte) statt in
--stein (1,4:1). Hoeher geht nicht, ohne die Abstufung zu zerstoeren: ein
Segment mit 3:1 laese sich nicht mehr von "erledigt" unterscheiden. */
.fs-balken { display: flex; gap: 3px; margin-bottom: 5px; }
.fs-seg { display: block; width: 22px; height: 6px; border-radius: 3px; background: var(--stein-tief); }
.fs-erledigt { background: var(--espresso); }
.fs-aktuell { background: var(--messing); }
.fs-text { display: block; font-size: 12.5px; color: var(--text-leise); white-space: nowrap; }
/* --- Interessenten: drei Zahlengruppen, Zahl oben, Bezeichnung klein darunter --- */
.iz { display: flex; gap: var(--raum-4); flex-wrap: wrap; }
.iz-g { display: flex; flex-direction: column; line-height: 1.25; }
.iz-g b {
font-family: var(--schrift-daten); font-weight: 600; font-size: 17px; color: var(--text);
}
.iz-g > span { font-size: 12px; color: var(--text-leise); }
.db-tabelle td { vertical-align: top; }
/* --- Band 2: die beiden Wartekarten nebeneinander, auf dem Handy untereinander --- */
/* Der Abstand unter den Wartekarten ist derselbe wie der unter den Kennzahlkacheln
(.kz-reihe): beide nehmen --raum-4. Vorher endete das Band ohne eigenen Abstand, die
Kacheln klebten an den Karten. Gilt in einer und in zwei Spalten gleichermassen. */
.db-warte { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-4); align-items: start; margin-bottom: var(--raum-4); }
.db-warte .card { margin-bottom: 0; }
@media (max-width: 860px) { .db-warte { grid-template-columns: 1fr; } }
/* Band 3: "Laeuft von allein" steht unter den Kacheln ueber die volle Breite. */
.db-automatik .card { margin-bottom: var(--raum-4); }
/* Zeitraumwechsel in "Laeuft von allein" (Auftrag 2026-09-17): Je Zeitraum hat die Liste
andere Zahlen, bei schmaler Ansicht brechen die Zeilen anders um, und die Karte wird
hoeher oder niedriger (gemessen 800, 820 und 839 Pixel bei 390 Pixel Breite). Browser mit
Scroll-Anker korrigieren dann selbst die Scroll-Position. Diese Karte wird deshalb als
Anker ausgeschlossen; die Position haelt ui.js (stelleScrollHer) ohnehin selbst. */
.db-automatik { overflow-anchor: none; }
/* Eingesparte Zeit als abgesetzter Kasten (Auftrag 2026-09-17, Teil B). Nur Farben aus dem
bestehenden Satz. Kontrast auf Espresso: Zahl in Kalk-hell 13,85:1, Rechenweg #c9c2b4
8,39:1, Beschriftung in --messing-hell 7,49:1. --messing selbst waere hier nur 4,44:1
und damit knapp unter der Grenze. Radius wie die Karten (--radius). */
.db-ersparnis {
background: var(--espresso); border-radius: var(--radius);
padding: var(--raum-4) var(--raum-4) var(--raum-3); margin-top: var(--raum-3);
}
.db-ersparnis p { margin: 0; }
.db-ersparnis-marke {
font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
color: var(--messing-hell);
}
.db-ersparnis-zahl {
font-size: clamp(28px, 7vw, 36px); font-weight: 700; line-height: 1.15;
color: var(--kalk-hell); margin: var(--raum-1) 0 var(--raum-2) !important;
}
.db-ersparnis-weg { font-size: 13px; line-height: 1.5; color: #c9c2b4; }
/* Unterzeile der Karte "Laeuft von allein". Der frueher negative obere Rand stammte aus
der Zeit, als die Zeile direkt unter der Kartenueberschrift stand. Seit die Knopfreihe
des Zeitraumfilters dazwischen liegt, zog er die Zeile in die Knoepfe hinein. */
.db-zeitraum { margin: 0 0 var(--raum-3); }
.db-liste { list-style: none; margin: 0; padding: 0; }
.db-liste li {
display: flex; align-items: flex-start; gap: var(--raum-3);
padding: var(--raum-3) 0; border-top: 1px solid var(--linie);
}
.db-liste li:first-child { border-top: none; padding-top: 0; }
/* Der Punkt benennt die Art der Zeile, ist aber nie ihr einziger Traeger: die
Ueberschrift der Karte sagt bereits, worum es geht, und jede Zeile hat Klartext. */
.db-punkt { flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; }
.db-punkt-sie { background: var(--messing); }
.db-punkt-ok { background: var(--status-erledigt); }
.db-liste-text { flex: 1 1 auto; min-width: 0; display: block; }
.db-liste-text strong { display: block; font-weight: 600; font-size: 15px; }
.db-liste-text .klein { display: block; margin-top: 2px; }
.db-liste-link {
flex: none; align-self: center; color: var(--tinte-hell); font-weight: 600;
font-size: 14px; text-decoration: none; white-space: nowrap;
display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--raum-1);
}
.db-liste-link:hover { text-decoration: underline; text-underline-offset: 3px; }
/* --- Archivzeile: zurueckhaltend, gestrichelt, ganz unten.
Bleibt ein , damit die drei Protokoll-Downloads erhalten bleiben. --- */
.db-archiv { margin-top: var(--raum-5); }
.db-archiv summary {
display: flex; align-items: center; gap: var(--raum-3);
font-family: var(--schrift-text); font-weight: 500; font-size: 14.5px;
color: var(--text-leise-tief); background: transparent;
border: 1px dashed var(--linie-stark); border-radius: var(--radius-klein);
padding: var(--raum-3) var(--raum-4);
}
.db-archiv summary:hover { border-color: var(--text-leise); }
.db-archiv-link { margin-left: auto; color: var(--tinte-hell); font-weight: 600; }
@media (max-width: 1180px) {
.kz-reihe { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
.db-paar { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.kz-reihe { grid-template-columns: 1fr; }
.kz { padding: var(--raum-3) var(--raum-4); }
.db-kopf { align-items: flex-start; }
.db-kopf-knoepfe { width: 100%; }
.db-kopf-knoepfe .btn { flex: 1 1 auto; text-align: center; }
/* Im Karten-Modus der Tabelle steht der Balken unter seinem Spaltennamen. */
.fs-balken { margin-top: 4px; }
/* Schmal: Punkt neben der Ueberschrift, Text darunter, Link in eigener Zeile.
Mit flex-wrap allein saesse der Punkt als eigene Zeile ueber dem Text. */
.db-liste li { display: grid; grid-template-columns: 9px 1fr; column-gap: var(--raum-3); }
.db-punkt { grid-column: 1; grid-row: 1; margin-top: 7px; }
.db-liste-text { grid-column: 2; grid-row: 1; }
.db-liste-link { grid-column: 2; grid-row: 2; justify-self: start; align-self: start; min-height: 38px; padding-left: 0; }
}
/* Zeitraumfilter der Karte "Laeuft von allein". Der aktive Knopf ist dunkel hinterlegt
UND traegt aria-current, die Farbe ist also nicht das einzige Merkmal. */
.db-zeitwahl { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 var(--raum-3); }
.db-zeitknopf {
display: inline-flex; align-items: center; min-height: 34px; padding: 6px 12px;
border: 1px solid var(--linie-stark); border-radius: 999px;
font-size: 13px; font-weight: 600; text-decoration: none;
background: var(--karte); color: var(--text2);
}
.db-zeitknopf:hover { background: var(--flaeche); color: var(--text); }
.db-zeitknopf.aktiv { background: var(--tinte); color: #fff; border-color: var(--tinte); }
.db-zeitknopf.aktiv:hover { background: var(--tinte-dunkel); color: #fff; }
/* Wartepunkt: neutraler Ton, weil hier nichts brennt, sondern jemand anders am Zug ist. */
.db-punkt-warte { background: var(--status-wartet); }
.db-erinnert { color: var(--text-leise); font-style: italic; }
.db-keine-mail { flex: none; align-self: center; color: var(--text-leise); }
.db-liste-form { flex: none; align-self: center; margin: 0; }
.db-leer { margin-bottom: var(--raum-3); }
/* Knopf und Oeffnen-Link derselben Zeile: nebeneinander, auf schmalen Schirmen
untereinander. Der Knopf bleibt vor dem Link, er ist die eigentliche Handlung. */
.db-liste-aktionen { flex: none; align-self: center; display: flex; align-items: center; gap: var(--raum-2); flex-wrap: wrap; }
.db-liste-aktionen .db-liste-link { grid-column: auto; grid-row: auto; }
/* Lange E-Mail-Adressen in den Erinnerungszeilen duerfen die Zeile nicht sprengen
(geprueft bei 390 und 320 Pixeln Breite). */
.db-erinnert { overflow-wrap: anywhere; }
@media (max-width: 560px) {
/* Wie beim "Oeffnen"-Link: Knopf und Hinweis wandern in die zweite Zeile. */
.db-liste-form, .db-keine-mail, .db-liste-aktionen { grid-column: 2; grid-row: 2; justify-self: start; align-self: start; }
}
/* Die Statuspille ist jetzt ein Link auf ihren Schritt. Sie behaelt das Aussehen der
Pille; Unterstreichung erst beim Ueberfahren, sonst wirkte die Tabelle unruhig. */
.schritt-link { text-decoration: none; }
.schritt-link:hover { text-decoration: underline; text-underline-offset: 2px; }
/* Nachtraegliche Korrektur der Mieterdaten (aufklappbar in Schritt 1). */
.mieter-form { margin-top: var(--raum-3); max-width: 420px; }
.mieter-form .klein { margin: var(--raum-2) 0 var(--raum-3); }
/* --- Mietvertrag (Punkt 11). Kein Prozessschritt, nur ein Zustand: der Vertrag
entsteht ausserhalb von Tenew. Deshalb steht er in der Entscheidungskarte als
Frage mit drei Antworten und nicht als Spalte in der Tabelle. --- */
.db-vertrag-form { flex: none; align-self: center; margin: 0; display: flex; gap: var(--raum-2); flex-wrap: wrap; }
.mv-kasten { margin-top: var(--raum-4); padding-top: var(--raum-3); border-top: 1px solid var(--linie); }
.mv-kopf { margin: 0 0 4px; display: flex; align-items: center; gap: var(--raum-2); flex-wrap: wrap; }
.mv-knoepfe { margin-top: var(--raum-3); display: flex; gap: var(--raum-2); flex-wrap: wrap; }
@media (max-width: 560px) {
.db-vertrag-form { grid-column: 2; grid-row: 2; justify-self: start; align-self: start; }
}
/* Die Mietvertrag-Zeile traegt drei Knoepfe. Nebeneinander quetschen sie den Text auf
drei Woerter je Zeile, deshalb hier zwei Zeilen: Text oben, Knoepfe darunter. */
.db-liste-breit { flex-wrap: wrap; }
/* flex-basis 0: mit auto waere die Basis die volle Textbreite, und der Punkt stuende
allein in der ersten Zeile. */
.db-liste-breit .db-liste-text { flex: 1 1 0; }
.db-liste-breit .db-vertrag-form { flex: 1 1 100%; margin-top: var(--raum-3); }
/* Bauauftrag 24 (Fund 131): viele Knoepfe derselben Zeile ebenso darunter, mit Umbruch. */
.db-liste-breit .db-liste-aktionen { flex: 1 1 100%; min-width: 0; margin-top: var(--raum-3); }
/* --- Vermietungen mit offener Aufgabe hervorheben (Korrektur 2026-09-10) ---
Zwei Merkmale zusaetzlich zur Farbe, nie Farbe allein: die Pille traegt weiterhin
das Ausrufezeichen und den Klartext der Aufgabe. Die Sortierung bleibt unberuehrt,
damit keine Zeile springt, wenn eine Aufgabe entsteht oder wegfaellt. */
.badge.messing {
/* Auf Messing steht DUNKLER Text. Weiss traegt dort nur 3,3:1, --text dagegen 4,8:1.
Der Auftrag nennt "hellen Text"; die in fruehen Etappen festgelegte Regel geht vor
und ist im selben Auftrag ausdruecklich bestaetigt. */
background: var(--messing); color: var(--text); border-color: var(--messing);
}
/* Der senkrechte Balken sitzt als innerer Schatten in der ersten Zelle. Ein border-left
an der Zeile wirkt bei border-collapse nicht zuverlaessig, die Zelle dagegen ist immer
so hoch wie die Zeile. */
.db-tabelle tr.vm-aufgabe td:first-child {
box-shadow: inset 3px 0 0 var(--messing);
padding-left: calc(var(--raum-3) + 3px);
}
@media (max-width: 640px) {
/* Im Kartenlayout ist die volle Breite da: der Klartext der Aufgabe bleibt sichtbar.
Er ist neben dem Ausrufezeichen das zweite Merkmal neben der Farbe. */
.db-tabelle .schritt-badge { white-space: normal; }
.db-tabelle .schritt-badge .schritt-name { display: inline; }
/* Im Kartenlayout gibt es keine erste Zelle mehr, die die volle Hoehe traegt. Der
Balken wandert deshalb an den linken Rand der ganzen Karte, gleiche Breite, gleiche
Farbe, gleiche Bedeutung. */
.db-tabelle tr.vm-aufgabe { border-left: 3px solid var(--messing); padding-left: calc(var(--raum-3) - 3px); }
.db-tabelle tr.vm-aufgabe td:first-child { box-shadow: none; padding-left: 0; }
}
/* --- Aufgabenkarten: Gruppen je Objekt (Aufgabe 3, 2026-09-11) ---
Die Kopfzeile ist ein durchgehender Espresso-Balken ueber die volle Kartenbreite.
Dafuer zieht sie sich mit negativen Aussenabstaenden aus dem Innenabstand der Karte
heraus; die Karte selbst beschneidet (overflow: hidden), damit der Balken nicht
ueber die abgerundeten Ecken hinauslaeuft. */
.db-karte { overflow: hidden; }
.db-gruppe + .db-gruppe { margin-top: var(--raum-4); }
.db-gruppe-kopf {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--raum-2);
margin: 0 calc(var(--raum-5) * -1) var(--raum-3);
padding: 9px var(--raum-5);
background: var(--espresso); color: #fff; text-decoration: none;
font-size: 14px; font-weight: 600;
}
.db-gruppe-kopf:hover { background: var(--espresso-2); text-decoration: underline; text-underline-offset: 2px; }
/* Der Trennpunkt ist das einzige farbige Element im Balken. Er traegt keine Bedeutung,
die nicht auch aus dem Textfluss hervorgeht, deshalb aria-hidden im Markup. */
.db-gruppe-trenn { color: var(--messing-hell); font-weight: 700; }
.db-gruppe-whg { font-weight: 400; color: var(--stein); }
/* Die duenne Linie trennt nur noch Aufgaben DESSELBEN Objekts. Zwischen Objekten
uebernimmt der Balken. */
.db-gruppe .db-liste li:first-child { border-top: none; padding-top: 0; }
/* Zusammenklappen ab vier Eintraegen, nur unter 640px. Reine CSS-Loesung mit einer
Auswahlbox: die Ausblenderegel steht ausschliesslich in der Medienabfrage, auf
breiten Schirmen gibt es sie also gar nicht und die Liste ist immer offen. Die
Auswahlbox bleibt bedienbar (sr-only statt hidden), damit sie mit der Tastatur
erreichbar ist. */
.db-falt-kopf { display: none; }
.db-falt-pfeil { margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; }
@media (max-width: 640px) {
.db-falt-kopf {
display: flex; align-items: center; gap: var(--raum-2); cursor: pointer;
padding: var(--raum-3) 0; font-size: 14px; font-weight: 600; color: var(--text2);
}
.db-falt-zahl {
background: var(--flaeche); border-radius: 999px; padding: 1px 8px;
font-variant-numeric: tabular-nums; font-size: 12.5px;
}
.db-falt-schalter:not(:checked) ~ .db-falt-liste { display: none; }
.db-falt-schalter:checked ~ .db-falt-kopf .db-falt-pfeil { transform: rotate(225deg); }
.db-falt-schalter:focus-visible ~ .db-falt-kopf { outline: 2px solid var(--tinte); outline-offset: 2px; }
}
/* --- Band 1 "Das brauchen Sie" (2026-09-10) ---
Die eine Karte ganz oben, in der ausschliesslich steht, was der Vermieter selbst tun
muss. Messingrand als Absetzung; erkennbar ist sie aber schon an Titel und Position,
die Farbe ist nur Zugabe. */
.db-karte-wichtig { border-color: var(--messing); }
/* Termin heute oder morgen: helle Flaeche plus das Wort "Heute" bzw. "Morgen" in der
Zeile. Nie Farbe allein. */
.db-bald { background: var(--status-sie-bg); border-radius: var(--radius-klein); }
.db-bald > .db-punkt { margin-left: var(--raum-2); }
.db-bald-marke {
display: inline-block; margin-right: var(--raum-2); padding: 1px 7px; border-radius: 999px;
background: var(--messing); color: var(--text);
font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
vertical-align: 1px;
}
/* --- Kontaktfeld (Hilfe und Vorschlaege) --- */
.kt-art { border: 0; padding: 0; margin: 0 0 var(--raum-3); }
.kt-art legend { padding: 0; font-size: 14px; font-weight: 600; color: var(--text2); margin-bottom: var(--raum-2); }
.kt-wahl {
display: flex; align-items: center; gap: var(--raum-2); cursor: pointer;
padding: 9px 12px; margin-bottom: var(--raum-2); font-weight: 400;
border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--flaeche-warm);
}
.kt-wahl:has(input:checked) { border-color: var(--messing); background: var(--status-sie-bg); }
.kt-wahl input { margin: 0; flex: none; }
/* Pflegeformular der Erklaervideos im Betreiberbereich. */
.video-form { border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: var(--raum-3); margin-bottom: var(--raum-3); }
.video-form .feld-reihe { display: flex; gap: var(--raum-3); flex-wrap: wrap; align-items: flex-end; }
.video-form .feld-reihe > div { flex: 1 1 200px; }
/* Erklaervideos. Die Startflaeche ist ein Knopf, kein Bild: vor dem Klick wird nichts
von YouTube geladen. Seitenverhaeltnis 16 zu 9, damit der spaeter eingesetzte Rahmen
dieselbe Flaeche einnimmt und nichts springt. */
.video-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--raum-4); }
.video-eintrag h3 { margin: 0 0 4px; font-size: 16px; }
.video-eintrag p { margin: 0 0 var(--raum-2); }
.video-halter { position: relative; aspect-ratio: 16 / 9; max-width: 560px; }
.video-start, .video-rahmen {
position: absolute; inset: 0; width: 100%; height: 100%;
border: 1px solid var(--linie); border-radius: var(--radius-klein);
}
.video-start {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
background: var(--flaeche-warm); color: var(--text); cursor: pointer;
font-family: inherit; font-size: 15px; font-weight: 600;
}
.video-start:hover { background: var(--flaeche); border-color: var(--linie-stark); }
.video-zeichen { font-size: 30px; line-height: 1; color: var(--messing-text); }
.video-hinweis { font-weight: 400; color: var(--text-leise); }
.video-rahmen { background: #000; }
/* Verlauf einer Support-Anfrage (Aufgabe 5). Wer geschrieben hat, steht als Wort im Kopf
der Zeile; Einrueckung und Hintergrund sind nur Zugabe, nie das einzige Merkmal. */
.sp-beitrag { padding: var(--raum-3) 0; border-bottom: 1px solid var(--linie); }
.sp-beitrag:last-child { border-bottom: 0; padding-bottom: 0; }
.sp-kopf { margin: 0 0 4px; font-size: 13px; color: var(--text2); }
.sp-text { margin: 0; white-space: pre-line; }
.sp-betreiber {
background: var(--flaeche-warm); border-left: 3px solid var(--messing);
border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
padding-left: var(--raum-3); padding-right: var(--raum-3);
}
/* --- Punktebewertung der Bewerber (Bauauftrag 8) ---------------------------------------
Die Punktzahl steht als Etikett in derselben Reihe wie "Link gesendet"; die
Aufschluesselung klappt darunter auf. Ein statt eines Klappskripts: es
funktioniert ohne JavaScript und ueberlebt den DOM-Morph des Auto-Refresh. */
.pkt-block { display: inline-block; }
.pkt-block > summary {
list-style: none; cursor: pointer; display: inline-flex; gap: 6px; align-items: center;
}
.pkt-block > summary::-webkit-details-marker { display: none; }
.pkt-mehr { font-size: 12px; color: var(--text2); text-decoration: underline dotted; }
.pkt-block[open] > summary .pkt-mehr::after { content: " schließen"; }
.pkt-liste {
margin: 8px 0 0; padding: 8px 12px; list-style: none;
background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px;
font-size: 13px; line-height: 1.7;
}
.pkt-liste li.pkt-abzug { color: var(--rot-text); }
.pkt-fussnote { margin: 6px 0 0; }