/* ===========================================================================
DIE HAUT DES STUDIOS · 05.09.2026
Kai: "Das CRM ist vom Design toll ... denkst du wir können das Studio genauso
bauen, oder bringt uns das um?" Gemessen an diesem Tag:
obs.css 992 Regeln, 91 Token, 98 % aller Farben ueber Token
crm.css 433 Regeln, 21 Token, eigene Sprache, kein Studio-Token
Studio-JS 45 Dateien, 813 kB, 780 verschiedene Klassennamen
Daraus die Antwort: die FARBEN und das MASS sind ein Tokenblock, die FORM ist
780 Entscheidungen. Diese Datei nimmt das Erste und laesst das Zweite in Ruhe.
WARUM EINE EIGENE DATEI und kein Eingriff in obs.css: sie haengt hinter obs.css
im Seitenkopf. Ein weniger, und das Studio sieht wieder aus wie vorher -
ohne einen einzigen Rueckbau. Solange eine Aenderung so billig zurueckzunehmen
ist, kann man sie eine Woche lang ansehen, statt sie zu diskutieren.
WAS HIER NICHT HINEINGEHOERT: Seitenlayouts. Wer eine Seite umbaut, macht das
in ihrer eigenen Datei - sonst waechst hier in drei Monaten ein zweites obs.css.
=========================================================================== */
/* --------------------------------------------------------------- 1 · Palette */
/* Die Werte des CRM in den Namen des Studios. Nur Farbe und Mass, keine Regel. */
:root {
--ground: #f8f9fb;
--ground-2: #f1f3f7;
--panel: #ffffff;
--panel-2: #f8f9fb;
--panel-3: #f1f3f7;
--line: #e8eaed;
--line-2: #f0f0f0;
--ink: #1a1a1a;
--ink-2: #6c757d;
--ink-3: #9ca3af;
--accent: #667eea;
--accent-ink: #ffffff;
--accent-soft: #ede9fe;
--ok: #10b981; --ok-soft: #d1fae5; --ok-ink: #065f46;
--warn: #f59e0b; --warn-soft: #fef3c7; --warn-ink: #92400e;
--crit: #ef4444; --crit-soft: #fee2e2; --crit-ink: #991b1b;
--info: #667eea; --info-soft: #ede9fe; --info-ink: #3730a3;
--rail-bg: #ffffff;
--frame-bg: #f8f9fb;
/* WEICHER SCHATTEN STATT KANTE: das ist der halbe Unterschied zum CRM. */
--shadow-card: 0 1px 2px rgba(16, 24, 40, .05);
--lift: 0 8px 24px rgba(16, 24, 40, .10);
/* Etwas weniger Rundung, etwas mehr Luft - die Zahlen des CRM. */
--r-card: 12px;
--r-sm: 8px;
--pad: 16px;
--pad-lg: 20px;
--gap: 14px;
}
/* DIE NACHT IST WEG (05.09.2026, Kai: "den dark mode koennen wir eigentlich entfernen,
wir machen nur weiss hintergrund").
Hier stand bis vor einer Stunde eine Nachtfassung dieser Palette. Sie ist raus, weil sie
sonst genau das waere, was eine solche Datei nie enthalten darf: Regeln, die nichts mehr
treffen und die der Naechste fuer eine Absicht haelt.
ABGESCHALTET WIRD IN DER HUELLE, NICHT HIER: trifft beide Wege
auf einmal - :root[data-theme="dark"] greift nicht, und der Block hinter
@media (prefers-color-scheme: dark) ist in obs.css mit :root:not([data-theme="light"])
bewacht. Die Farbwerte der Nacht stehen weiter in obs.css. Sie stoeren nicht, und wer die
Fassung je zurueckholt, findet sie dort vollstaendig vor. */
/* ---------------------------------------------------------------- 2 · Rahmen */
/* Die Leiste traegt im CRM keine Trennlinie, sondern steht auf dem Grund. Das ist
der zweite halbe Unterschied: weniger Striche, mehr Flaeche. */
.obs-rail {
background: var(--rail-bg);
border-right: 1px solid var(--line);
padding: 14px 10px;
gap: 18px;
}
.obs-nav {
border-radius: var(--r-sm);
padding: 8px 10px;
font-weight: 500;
}
/* DER GEWAEHLTE PUNKT IST GEFUELLT, NICHT UNTERSTRICHEN - so findet das Auge ihn,
ohne die Beschriftung zu lesen. */
.obs-nav[aria-current="page"] {
background: var(--accent-soft);
color: var(--accent);
font-weight: 600;
}
.obs-topbar {
padding: 10px 18px;
background: var(--panel);
border-bottom: 1px solid var(--line);
}
/* ------------------------------------------------------------- 3 · Bauteile */
/* DIE GEMEINSAME SCHICHT. Sechs Teile, aus denen im CRM jede Seite besteht: Karte,
Seitenkopf, Schild, Leerzustand, Tabelle, Knopf. Wer im Studio eine neue Seite
baut, nimmt diese - und erfindet keine siebte Familie. Bis heute sind es 780
Klassennamen in 45 Dateien; jede neue Familie macht daraus 781.
Die Namen sind deutsch wie im Haus. Keine dieser Klassen kommt heute irgendwo
vor (nachgesehen am 05.09.2026) - sie kollidieren also mit nichts. */
.obs-karte {
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--r-card);
box-shadow: var(--shadow-card);
overflow: hidden;
}
.obs-karte-kopf {
display: flex;
align-items: center;
gap: 10px;
padding: 14px var(--pad);
border-bottom: 1px solid var(--line);
}
.obs-karte-kopf h2, .obs-karte-kopf h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.obs-karte-leib { padding: var(--pad); }
.obs-karte-fuss {
display: flex;
align-items: center;
gap: 8px;
padding: 12px var(--pad);
border-top: 1px solid var(--line);
background: var(--panel-2);
}
/* Der Seitenkopf: Titel, Beiwort, dann rechts die Knoepfe. Die Zeile, mit der im
CRM jede Seite anfaengt. */
.obs-seitenkopf {
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
margin: 0 0 var(--gap);
}
.obs-seitenkopf h1 { margin: 0; font-size: 1.35rem; letter-spacing: -.01em; }
.obs-seitenkopf .obs-beiwort { color: var(--ink-3); font-size: .82rem; }
.obs-seitenkopf .obs-schub { margin-left: auto; display: flex; gap: 8px; }
/* Ein Schild sagt einen Zustand in einem Wort. Die Farbe wiederholt das Wort, sie
ersetzt es nicht - wer die Farbe nicht sieht, liest weiter mit. */
.obs-schild {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 9px;
border-radius: var(--r-pill);
font-size: .72rem;
font-weight: 600;
background: var(--panel-3);
color: var(--ink-2);
}
.obs-schild--ok { background: var(--ok-soft); color: var(--ok-ink, var(--ok)); }
.obs-schild--warn { background: var(--warn-soft); color: var(--warn-ink, var(--warn)); }
.obs-schild--krit { background: var(--crit-soft); color: var(--crit-ink, var(--crit)); }
.obs-schild--info { background: var(--info-soft); color: var(--info-ink, var(--info)); }
/* EIN LEERER BEREICH IST EINE AUSKUNFT UND KEINE PANNE. Er sagt, was fehlt und was
man tun kann - nicht nur, dass nichts da ist. */
.obs-leerzustand {
padding: 28px var(--pad);
text-align: center;
color: var(--ink-3);
font-size: .88rem;
}
.obs-leerzustand b { display: block; color: var(--ink-2); font-size: .95rem; margin-bottom: 4px; }
.obs-tabelle { width: 100%; border-collapse: collapse; font-size: .86rem; }
.obs-tabelle th {
text-align: left;
font-size: .72rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-3);
font-weight: 600;
padding: 8px 10px;
border-bottom: 1px solid var(--line);
}
.obs-tabelle td { padding: 10px; border-bottom: 1px solid var(--line-2); }
.obs-tabelle tr:last-child td { border-bottom: 0; }
.obs-tabelle tbody tr:hover { background: var(--panel-2); }
/* ------------------------------------------------- 4 · das Vorhandene mitnehmen */
/* Die vier Klassen, die HEUTE schon ueberall stehen (gezaehlt am 05.09.2026 in den
Rollenelementen: btn 35x, obs-section 19x, obs-table 12x, obs-card 4x). Sie werden
hier auf dasselbe Mass gezogen - damit sehen die bestehenden Seiten mit, ohne dass
eine einzige von ihnen angefasst wird. Das ist der ganze Trick an dieser Datei. */
.obs-card { border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.obs-section { margin-bottom: var(--gap); }
.obs-table th {
font-size: .72rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-3);
}
.obs-page-head h1 { letter-spacing: -.01em; }
/* Knoepfe: dieselbe Rundung und dasselbe Gewicht wie im CRM. Nur Form, kein Layout -
ein Knopf, der ploetzlich breiter wird, verschiebt vierzig Seiten. */
.btn {
border-radius: var(--r-sm);
font-weight: 600;
transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.06); }
/* Und der Schluss, damit niemand raten muss, wo das hier herkommt:
Diese Datei haengt in der Seitenhuelle openbistudio-neu hinter obs.css.
Ein weniger, und alles ist wie vorher. */