/* ============================================================================
MEDICENT Baden — gemeinsame Markenschicht für alle internen Anwendungen.
Diese Datei ist in jeder Anwendung Zeichen für Zeichen dieselbe:
Monatsfakturierung, OPZ Lager/Fakturierung, Zeiterfassung, Arztportal —
genauso wie marke.js.
Sie stammt aus dem Stylesheet der Homepage medicent-baden.at (headless,
Astro + Wix) — Farben, Schrift, Rundungen und Maße sind von dort
übernommen, damit innen und außen dasselbe Haus zu sehen ist.
ÄNDERUNGEN BITTE IN ALLE ANWENDUNGEN EINSPIELEN. Wer hier etwas dreht,
kopiert die Datei anschließend in die anderen Projekte. Alles, was nur
eine Anwendung betrifft, gehört nicht hierher, sondern in deren stil.css.
Aufbau:
1. Schrift
2. Farben und Maße
3. Grundlagen
4. Typografie
5. Karten und Raster
6. Tabellen
7. Formulare
8. Knöpfe
9. Meldungen und Marker
10. Such- und Filterleiste
11. Aufklapper
========================================================================= */
/* ------------------------------------------------------------- 1. Schrift
Figtree liegt auf unserem eigenen Rechner, nicht bei Google — genau wie
auf der Homepage. Im Haus-Netzwerk ist das nicht nur eine Frage des
Datenschutzes: ohne Internet würde eine fremde Schrift gar nicht laden.
Eine variable Datei deckt 400 bis 800 ab, zusammen rund 30 KB.
Lizenz: SIL Open Font License 1.1, siehe fonts/OFL.txt */
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('fonts/figtree-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: 'Figtree';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('fonts/figtree-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ---------------------------------------------------- 2. Farben und Maße */
:root {
/* Die elf Farben der Homepage, unverändert. */
--grund: #FFFFFF;
--text: #1B1A18;
--text2: #332F2B;
--grau: #4A453F;
--grau2: #6E6862;
--linie: #E3DFDA;
--linie2: #EFECE8;
--flaeche: #F6F4F1;
--pille: #F1EEEA;
--akzent: #C8791A;
--akzent-dunkel: #8A3F07;
--akzent-hell: #FDF0E4;
--akzent-rand: #F0DFCB;
/* Rand der Eingabefelder — auf der Homepage als Festwert gesetzt. */
--feldrand: #D8D3CD;
/* Nur die Anwendungen brauchen Zustandsfarben; die Homepage kennt sie
nicht. Bewusst gedeckt gehalten, damit sie im warmen Grundton nicht
herausfallen. */
--gruen: #2F6B47;
--gruen-hell: #EDF4EF;
--gruen-rand: #C6DED0;
--rot: #A8362B;
--rot-hell: #FBEDEB;
--rot-rand: #EFCBC6;
--warn: #7A5C15;
--warn-hell: #FDF4E3;
--warn-rand: #EAD9AE;
/* Rundungen der Homepage: Karten 14, Felder 10, Pillen halbe Höhe. */
--rund-karte: 14px;
--rund-feld: 10px;
/* Höhe von Knopf und Eingabefeld. Die Homepage arbeitet mit 44 bzw. 48 px
— angenehm für den Daumen, aber in einer Tabelle mit dreißig Zeilen zu
viel. Hier 38 px: dieselbe Form, dichter gesetzt. */
--hoch: 38px;
--hoch-klein: 28px;
}
*, *::before, *::after { box-sizing: border-box; }
/* Muss vor allen display-Regeln stehen und sie schlagen, sonst macht ein
display:flex das hidden-Attribut wirkungslos. */
[hidden] { display: none !important; }
/* -------------------------------------------------------- 3. Grundlagen */
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
font-size: 15px;
line-height: 1.5;
color: var(--text);
background: var(--flaeche);
-webkit-font-smoothing: antialiased;
}
a { color: var(--akzent-dunkel); }
a:hover { color: #5E2B05; }
img { max-width: 100%; height: auto; }
/* Ein einziger Fokusrahmen für alles — wie auf der Homepage. */
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
.nur-sr {
position: absolute; width: 1px; height: 1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* ------------------------------------------------------- 4. Typografie
Die Homepage setzt Überschriften fett (800) und etwas enger — das ist
ihr auffälligstes Merkmal und wird hier übernommen. */
h1 {
margin: 0 0 4px;
font-size: 26px; font-weight: 800; line-height: 1.18;
letter-spacing: -0.02em;
}
h2 {
margin: 30px 0 12px;
font-size: 19px; font-weight: 700; line-height: 1.25;
letter-spacing: -0.015em;
}
/* Die kleine Vorzeile der Homepage: gesperrte Großbuchstaben. */
h3 {
margin: 0 0 10px;
font-size: 12px; font-weight: 700;
letter-spacing: 0.11em; text-transform: uppercase;
color: var(--grau2);
}
.unterzeile { margin: 0 0 22px; color: var(--grau); }
.klein { font-size: 13px; color: var(--grau2); }
.nowrap { white-space: nowrap; }
.r { text-align: right; font-variant-numeric: tabular-nums; }
.z { text-align: center; }
/* -------------------------------------------------- 5. Karten und Raster */
.karte {
background: var(--grund);
border: 1px solid var(--linie);
border-radius: var(--rund-karte);
padding: 18px 20px;
margin-bottom: 18px;
}
.karte > h2:first-child, .karte > h3:first-child { margin-top: 0; }
/* Überschrift als abgesetztes Band über der Karte — die Homepage macht das
in der Nebenspalte ihrer Detailseiten genauso. */
.karte.mitkopf { padding: 0; overflow: hidden; }
.karte.mitkopf > h2, .karte.mitkopf > h3 {
margin: 0; padding: 13px 18px;
background: var(--flaeche); border-bottom: 1px solid var(--linie);
font-size: 15px; font-weight: 700; letter-spacing: 0;
text-transform: none; color: var(--text);
}
.karte.mitkopf > *:not(h2):not(h3) { padding-left: 18px; padding-right: 18px; }
.karte.mitkopf > *:last-child { padding-bottom: 16px; }
.raster { display: grid; gap: 18px; }
.raster.d2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.raster.d3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.raster.d4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
/* Kennzahl: dieselbe Karte wie auf der Homepage, nur links ausgerichtet. */
.kennzahl {
background: var(--grund);
border: 1px solid var(--linie);
border-radius: var(--rund-karte);
padding: 15px 18px;
}
.kennzahl .wert {
display: block;
font-size: 28px; font-weight: 700; line-height: 1.1;
letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.kennzahl .bez { display: block; margin-top: 2px; font-size: 13px; color: var(--grau2); }
.kennzahl.betont { border-color: var(--akzent-rand); background: var(--akzent-hell); }
.kennzahl.betont .wert { color: var(--akzent-dunkel); }
/* ---------------------------------------------------------- 6. Tabellen */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
padding: 8px 9px; text-align: left; white-space: nowrap;
font-size: 11.5px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--grau2);
border-bottom: 1px solid var(--linie);
}
td {
padding: 9px; vertical-align: middle;
border-bottom: 1px solid var(--linie2);
}
tbody tr:hover { background: var(--flaeche); }
tbody tr:last-child td { border-bottom: none; }
tfoot td {
padding-top: 11px; font-weight: 700;
border-top: 1px solid var(--linie); border-bottom: none;
}
/* Tabelle randlos in der Karte: die Karte gibt den Rahmen, die Tabelle
braucht nur noch Luft an den Außenspalten. */
.tabellenkarte { padding: 6px 4px; }
.tabellenkarte th:first-child, .tabellenkarte td:first-child { padding-left: 16px; }
.tabellenkarte th:last-child, .tabellenkarte td:last-child { padding-right: 16px; }
.sortierlink {
display: inline-flex; align-items: center; gap: 4px;
color: inherit; text-decoration: none; white-space: nowrap;
}
.sortierlink:hover { color: var(--akzent-dunkel); }
.sortierlink.an { color: var(--text); }
.sortierlink .pfeil { min-width: 7px; font-size: 11px; color: var(--akzent); }
/* --------------------------------------------------------- 7. Formulare */
label {
display: block; margin-bottom: 4px;
font-size: 13px; font-weight: 600; color: var(--grau);
}
input[type=text], input[type=password], input[type=number], input[type=date],
input[type=email], input[type=search], select, textarea {
width: 100%; height: var(--hoch); padding: 0 12px;
border: 1px solid var(--feldrand); border-radius: var(--rund-feld);
font: inherit; font-size: 14.5px;
color: var(--text); background: var(--grund);
}
textarea {
height: auto; min-height: 110px; padding: 11px 13px;
font-family: Consolas, "Courier New", monospace; font-size: 13px;
resize: vertical;
}
select { padding-right: 8px; }
/* Dateiauswahl: der gestrichelte Rand sagt „hier kommt etwas herein", der
eingebaute Knopf bekommt dieselbe Pillenform wie alle anderen. */
input[type=file] {
width: 100%; padding: 7px 10px;
border: 1px dashed var(--feldrand); border-radius: var(--rund-feld);
background: var(--grund); font: inherit; font-size: 13.5px; color: var(--grau2);
}
input[type=file]::file-selector-button {
height: var(--hoch-klein); margin-right: 11px; padding: 0 13px;
border: 1px solid var(--feldrand); border-radius: calc(var(--hoch-klein) / 2);
background: var(--grund); color: var(--text);
font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
input[type=file]::file-selector-button:hover {
background: var(--pille); border-color: #CBC5BE;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--akzent);
box-shadow: 0 0 0 3px rgba(200, 121, 26, .16);
}
.feld { margin-bottom: 14px; }
.feldzeile {
display: grid; gap: 14px;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.hinweis { margin-top: 4px; font-size: 13px; color: var(--grau2); }
/* Kästchen mit Beschriftung daneben */
.schalter { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.schalter input { width: auto; height: auto; margin: 0; accent-color: var(--akzent); }
.schalter label { margin: 0; font-size: 14px; font-weight: 400; color: var(--text); }
input.zahl { text-align: right; font-variant-numeric: tabular-nums; }
/* Zahlenfeld mit nachgestellter Einheit, etwa Prozent */
.mit-einheit { display: flex; align-items: center; gap: 8px; }
.mit-einheit input { flex: 1; min-width: 0; }
.mit-einheit span { font-size: 14px; color: var(--grau2); }
/* Kennwortfeld mit Auge zum Aufdecken. Den Rahmen und den Knopf setzt
marke.js um jedes , die Vorlagen brauchen nichts
zu tun. Wer sein Kennwort tippt und nicht sieht, vertippt sich - und auf
einer Tastatur mit deutschem Layout an einem Rechner, der auf englisch
steht, merkt man es sonst erst nach dem dritten Fehlversuch. */
.kennwortfeld { position: relative; display: block; }
.kennwortfeld input { padding-right: 40px; }
/* Bewusst ueber zwei Klassen adressiert. Eine Anwendung, die irgendwo
button { width: 100% } setzt - und sei es nur fuer ihren Anmeldeknopf -,
wuerde sonst das Auge auf die volle Feldbreite ziehen. Genau das ist hier
passiert. */
.kennwortfeld .kennwort-auge {
position: absolute; right: 1px; top: 1px;
display: flex; align-items: center; justify-content: center;
/* Abstand ausdruecklich auf null: Eine Anwendung, die irgendwo
button { margin-top: ... } setzt - und sei es nur fuer ihren
Anmeldeknopf -, schoebe das Auge sonst unter das Feld. Auch das
ist passiert. */
width: 36px; height: calc(var(--hoch) - 2px); padding: 0; margin: 0;
border: 0; border-radius: 0 var(--rund-feld) var(--rund-feld) 0;
background: transparent; color: var(--grau2); cursor: pointer;
}
.kennwortfeld .kennwort-auge:hover { color: var(--akzent-dunkel); }
.kennwortfeld .kennwort-auge[aria-pressed="true"] { color: var(--akzent-dunkel); }
.kennwortfeld .kennwort-auge svg { display: block; width: 18px; height: 18px; }
/* Schieber — die runde Form der Homepage-Knöpfe im Kleinen */
.schieber {
display: inline-flex; align-items: center; gap: 9px;
margin: 0; cursor: pointer; user-select: none;
}
.schieber input { position: absolute; width: 0; height: 0; opacity: 0; }
.schieber .bahn {
position: relative; flex: none;
width: 38px; height: 21px; border-radius: 11px;
background: var(--feldrand); transition: background .15s ease;
}
.schieber .bahn::after {
content: ""; position: absolute; left: 2.5px; top: 2.5px;
width: 16px; height: 16px; border-radius: 50%;
background: var(--grund); box-shadow: 0 1px 2px rgba(27, 26, 24, .28);
transition: transform .15s ease;
}
.schieber input:checked + .bahn { background: var(--akzent); }
.schieber input:checked + .bahn::after { transform: translateX(17px); }
.schieber input:focus-visible + .bahn { outline: 3px solid var(--akzent); outline-offset: 2px; }
.schieber .text { font-size: 14px; color: var(--text); }
/* ------------------------------------------------------------ 8. Knöpfe
Die Pillenform ist das Erkennungszeichen der Homepage. Übernommen, nur
flacher: 38 statt 44 px. */
.knopf, button {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
height: var(--hoch); padding: 0 18px;
border: 1px solid var(--feldrand); border-radius: calc(var(--hoch) / 2);
background: var(--grund); color: var(--text);
font: inherit; font-size: 14px; font-weight: 600;
text-decoration: none; cursor: pointer; white-space: nowrap;
transition: transform .12s ease, background-color .18s ease, border-color .18s ease;
}
.knopf:hover, button:hover { background: var(--pille); border-color: #CBC5BE; }
.knopf:active, button:active { transform: scale(.98); }
.knopf.haupt, button.haupt {
background: var(--akzent); border-color: var(--akzent); color: var(--grund);
}
.knopf.haupt:hover, button.haupt:hover {
background: var(--akzent-dunkel); border-color: var(--akzent-dunkel);
}
.knopf.gefahr, button.gefahr {
background: var(--rot); border-color: var(--rot); color: var(--grund);
}
.knopf.gefahr:hover, button.gefahr:hover { background: #8C2B22; border-color: #8C2B22; }
.knopf.klein, button.klein {
height: var(--hoch-klein); padding: 0 12px;
border-radius: calc(var(--hoch-klein) / 2); font-size: 13px;
}
/* Das kleine Kreuz am Zeilenende: eine Zeile entfernen. Bewusst still —
ein roter Punkt in jeder Zeile einer Liste schreit, obwohl er selten
gebraucht wird. Rot wird er erst unter dem Zeiger. */
.knopf.weg, button.weg {
width: var(--hoch-klein); height: var(--hoch-klein); padding: 0;
border-radius: 50%; background: var(--grund); color: var(--grau2);
font-size: 15px; font-weight: 400; line-height: 1;
}
.knopf.weg:hover, button.weg:hover {
background: var(--rot-hell); border-color: var(--rot-rand); color: var(--rot);
}
.knopfzeile { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
/* -------------------------------------------- 9. Meldungen und Marker */
.meldungen { display: grid; gap: 8px; margin-bottom: 18px; }
.meldung {
padding: 11px 16px; border: 1px solid; border-radius: var(--rund-feld);
font-size: 14px;
}
.meldung.erfolg { background: var(--gruen-hell); border-color: var(--gruen-rand); color: var(--gruen); }
.meldung.fehler { background: var(--rot-hell); border-color: var(--rot-rand); color: var(--rot); }
.meldung.hinweis { background: var(--warn-hell); border-color: var(--warn-rand); color: var(--warn); }
/* Die Meldung an einem einzelnen Feld - sie ersetzt das graue Kästchen des
Browsers („Füllen Sie dieses Feld aus"). Dieselbe Prüfung, aber in der
Schrift des Hauses, direkt unter dem Feld und mit dem Namen des Feldes
darin. Sie bleibt stehen, bis jemand weitertippt; das Kästchen des
Browsers verschwand nach zwei Sekunden von selbst, oft bevor man es
gelesen hatte. Gesetzt wird sie von marke.js. */
.feldfehler {
margin-top: 6px; padding: 7px 11px;
border: 1px solid var(--rot-rand); border-radius: var(--rund-feld);
background: var(--rot-hell); color: var(--rot);
font-size: 13px; line-height: 1.35;
}
.feld input[aria-invalid="true"],
.feld select[aria-invalid="true"],
.feld textarea[aria-invalid="true"] { border-color: var(--rot-rand); }
/* Die Merkmalspillen der Homepage */
.marker {
display: inline-flex; align-items: center;
height: 22px; padding: 0 10px; border-radius: 11px;
font-size: 12px; font-weight: 600; white-space: nowrap;
background: var(--pille); color: var(--grau);
}
.marker.gut { background: var(--gruen-hell); color: var(--gruen); }
.marker.offen { background: var(--warn-hell); color: var(--warn); }
.marker.rot { background: var(--rot-hell); color: var(--rot); }
.marker.grau { background: var(--pille); color: var(--grau); }
.marker.lila { background: var(--akzent-hell); color: var(--akzent-dunkel); }
.gefahrkasten {
padding: 16px 18px;
border: 1px solid var(--rot-rand); border-radius: var(--rund-karte);
background: var(--rot-hell);
}
.gefahrkasten h3 { color: var(--rot); }
/* Karte, die auf etwas Offenes hinweist — fehlende Werte, unbekannte
Ladekarten. Dasselbe Gelb wie die Hinweismeldung. */
.karte.warnung { border-color: var(--warn-rand); background: var(--warn-hell); }
.karte.warnung > h3 { color: var(--warn); }
.leer { padding: 44px 20px; text-align: center; color: var(--grau2); }
.leer p { margin: 0 0 14px; }
/* --------------------------------------- 10. Such- und Filterleiste */
.filterleiste {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
margin-bottom: 18px;
}
/* Ohne das bleibt der Abstand stehen, den ein .feld sonst nach unten hält —
14 px tote Luft unter der Zeile und ein Feld, das neben den anderen
verrutscht aussieht. Für .leiste steht dasselbe weiter unten. */
.filterleiste .feld { margin: 0; }
.suchfeld { position: relative; flex: 1; min-width: 260px; max-width: 520px; }
.suchfeld svg {
position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
width: 15px; height: 15px; color: var(--grau2); pointer-events: none;
}
.suchfeld input { padding-left: 35px; padding-right: 32px; }
.suchfeld input::-webkit-search-cancel-button { display: none; }
.suchfeld .loeschen {
position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
padding: 0 3px; font-size: 17px; line-height: 1;
color: var(--grau2); text-decoration: none;
}
.suchfeld .loeschen:hover { color: var(--rot); }
.leiste {
display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
margin-bottom: 20px;
}
.leiste .feld { margin: 0; }
.leiste select, .leiste input { min-width: 150px; }
/* Felder, die ohne .feld-Rahmen unmittelbar in einer Zeile stehen, nehmen
ihre natürliche Breite. Sonst drängt jedes auf 100 %, die Zeile bricht um
und der Knopf rutscht unter die Felder.
Bewusst nur die DIREKTEN Kinder: ein Feld innerhalb eines .feld-Rahmens
soll dessen Spalte weiterhin ausfüllen.
Gefunden hat das die Sitzung OPZ Lager/Fakturierung an ihrer Artikelliste
– bei lauter HTTP 200, während die Zeile am Bildschirm längst zerfallen
war. Wer hier etwas ändert, sieht es sich also auch im Browser an. */
.filterleiste > input, .filterleiste > select,
.leiste > input, .leiste > select,
.zeileform > input, .zeileform > select,
/* Steht zwischen Zeile und Feld noch ein