/*
* Gesamte Gestaltung. Eine Datei, keine externen Abhaengigkeiten -
* die Content-Security-Policy erlaubt nichts von aussen.
*
* Die Hausfarbe steht an genau einer Stelle. Wird sie geaendert, ziehen
* Kopfbanner, Knoepfe, Ueberschriften und Rahmen automatisch mit.
*
* --gruen ist das Igepa-Gruen, am 03.09.2026 aus dem Logo
* (Igepa_Group_Logo.svg.webp) ausgelesen: von 55.364 gruenen Bildpunkten
* tragen praktisch alle den Wert #007858. Nicht geraten.
* Die abgeleiteten Toene entstehen daraus per color-mix(); die Werte
* darunter sind Rueckfallwerte fuer aeltere Browser und muessen bei einem
* Farbwechsel grob mit angepasst werden.
*/
:root {
--gruen: #007858;
--gruen-dunkel: #005f46;
--gruen-blass: #e6f2ef;
--gruen-rand: #b3d5cb;
--text: #1c2220;
--text-blass: #5a6763;
--linie: #dde3e1;
--flaeche: #ffffff;
--grund: #f4f7f6;
--warn: #8a5a00;
--warn-blass: #fdf3e0;
--fehler: #b3261e;
--fehler-blass: #fdecea;
--radius: .4rem;
--schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@supports (color: color-mix(in srgb, red, blue)) {
:root {
--gruen-dunkel: color-mix(in srgb, var(--gruen) 82%, black);
--gruen-blass: color-mix(in srgb, var(--gruen) 8%, white);
--gruen-rand: color-mix(in srgb, var(--gruen) 30%, white);
}
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font: 16px/1.55 var(--schrift);
color: var(--text);
background: var(--grund);
}
/* --- Kopf ---------------------------------------------------------------- */
.kopf {
background: var(--gruen);
color: #fff;
padding: .8rem 1.25rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .75rem 1.25rem;
}
/*
* Die Marke ist seit dem 10.09.2026 ein Verweis auf die Startseite - die
* uebliche Stelle dafuer. Ohne die beiden Zeilen darunter faerbt und
* unterstreicht der Browser sie wie einen Textverweis, und der Kopf sah
* aus wie ein Fehler.
*/
.kopf .marke {
display: flex;
align-items: center;
gap: .7rem;
color: inherit;
text-decoration: none;
}
.kopf a.marke:hover h1 { text-decoration: underline; }
/*
* Das Schmuckband in der Kopfleiste.
*
* Es fuellt den Platz zwischen Marke und Benutzerblock. Die Grafik ist
* rechtsbuendig und loest sich nach links auf: wird die Leiste schmaler,
* verschwindet zuerst das blasse Ende, nicht das Motiv.
*
* UNTER 48rem ganz weg - gemessen, nicht geschaetzt.
*
* Erst stand hier 60rem. Das war zu frueh: bei 1000 px und bei 820 px
* steht das Band einwandfrei, es verliert nur links Motive, und die
* Kopfleiste bricht dort ohnehin um - mit Band wie ohne, gemessen mit
* und ohne display:none. Wer ein Fenster unter 960 px hatte, sah die
* Grafik also nie. Unter 48rem wird es wirklich eng, dort ist Schluss.
*/
.kopf .kopfband {
flex: 1 1 6rem;
min-width: 4rem;
align-self: stretch;
min-height: 1.9rem;
/* Luft zum Benutzerblock - sonst steht der Lastwagen am Namen. */
margin-right: 1.25rem;
background: url("kopfband.svg") no-repeat right center;
background-size: auto 100%;
}
@media (max-width: 48rem) {
.kopf .kopfband { display: none; }
}
.kopf img.logo {
height: 1.6rem;
width: auto;
background: #fff;
padding: .18rem .4rem;
border-radius: .2rem;
}
.kopf h1 {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
letter-spacing: .01em;
}
.kopf .wer {
margin-left: auto;
font-size: .88rem;
display: flex;
align-items: center;
gap: .7rem;
}
.kopf .wer .rolle {
background: rgba(255, 255, 255, .2);
border-radius: 1rem;
padding: .1rem .6rem;
font-size: .76rem;
text-transform: uppercase;
letter-spacing: .04em;
}
.kopf form { margin: 0; }
/* --- Hauptmenue ---------------------------------------------------------- */
/*
* ZWEI KACHELN ALS OBERMENUE, DARUNTER DIE PUNKTE DER AKTIVEN KACHEL.
* Beides mittig.
*
* Vorgabe des Anwenders vom 10.09.2026: die Trennung zwischen "ich selber"
* und "Verwaltung anderer" soll klar sein, und man soll beim Klicken in
* seiner Kategorie bleiben. Welche Kachel aktiv ist, ergibt sich aus der
* aufgerufenen Seite - siehe inc/kopf.php.
*
* Vorher waren es erst sechs Zeilen nackter Textverweise (der Umbruch landete
* unter der Bereichsbezeichnung), dann eine Leiste mit Klappen. Die Klappen
* sind wieder weg: mit zwei Kacheln stehen alle Punkte offen da, und ein
* Menue, das nichts verbirgt, braucht auch kein Skript.
*/
/* Kopfzeile und Menue bleiben oben (01.10.2026) - nicht auf kleinen oder
niedrigen Bildschirmen, dort bliebe darunter kaum Platz. */
.oben-fest { position: sticky; top: 0; z-index: 40; }
html { scroll-padding-top: var(--oben-h, 0px); }
/*
* DIE LEISTE DES WOCHENPLANS KLEBT MIT (08.10.2026): direkt unter dem Kopf
* (--kopf-h), und die Tabellenkoepfe darunter (--oben-h zaehlt sie mit) -
* beides setzt assets/oben-fest.js.
*/
.leiste-fest {
position: sticky;
top: var(--kopf-h, 0px);
z-index: 30;
background: var(--grund);
padding: .45rem 0;
border-bottom: 1px solid var(--linie);
}
@media (max-width: 700px), (max-height: 640px) {
.oben-fest { position: static; }
.leiste-fest { position: static; border-bottom: 0; }
}
.menue {
background: var(--flaeche);
border-bottom: 1px solid var(--linie);
padding: .55rem 1.25rem .1rem;
display: flex;
flex-direction: column;
align-items: center;
}
/* --- Die Kacheln --------------------------------------------------------- */
.menue .kacheln {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .5rem;
margin-bottom: .5rem;
}
.menue .kachel {
display: flex;
flex-direction: column;
gap: .1rem;
min-width: 13rem;
padding: .5rem 1.1rem;
border: 1px solid var(--gruen-rand);
border-radius: var(--radius);
background: var(--flaeche);
color: var(--text);
text-decoration: none;
text-align: center;
}
.menue .kachel .was { font-size: .95rem; font-weight: 600; }
.menue .kachel .wozu { font-size: .74rem; color: var(--text-blass); }
.menue .kachel:hover { background: var(--gruen-blass); }
.menue .kachel:focus-visible { outline: 2px solid var(--gruen); outline-offset: 2px; }
/* Die Kachel, in der man gerade ist. Gefuellt, nicht nur umrandet - der
Unterschied muss aus zwei Metern erkennbar sein. */
.menue .kachel.hier {
background: var(--gruen);
border-color: var(--gruen);
color: #ffffff;
}
.menue .kachel.hier .wozu { color: rgba(255, 255, 255, .82); }
.menue .kachel.hier:hover { background: var(--gruen-dunkel); }
/* --- Die Punkte der aktiven Kachel --------------------------------------- */
.menue .punkte {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0 .1rem;
}
.menue .punkte a,
.menue .punkte span.offen {
padding: .5rem .7rem;
font-size: .9rem;
color: var(--text-blass);
text-decoration: none;
white-space: nowrap;
border-bottom: 3px solid transparent;
}
.menue .punkte a:hover {
color: var(--text);
background: var(--grund);
}
.menue .punkte a[aria-current="page"] {
color: var(--gruen-dunkel);
border-bottom-color: var(--gruen);
font-weight: 600;
}
/* Noch nicht gebaute Punkte: sichtbar, aber kein Verweis. */
.menue .punkte span.offen { color: #a6b0ad; cursor: help; }
.menue .punkte span.offen::after { content: ' *'; }
@media (max-width: 44rem) {
.menue { padding: .5rem .6rem .1rem; }
.menue .kachel { min-width: 0; flex: 1 1 9rem; padding: .45rem .6rem; }
.menue .kachel .was { font-size: .88rem; }
.menue .punkte a,
.menue .punkte span.offen { padding: .45rem .55rem; font-size: .86rem; }
}
/*
* DIE ZAHL AN EINEM MENUEPUNKT ODER AN EINER KACHEL (offene Antraege).
*
* Die Grundform steht an .menue und nicht an .menue .punkte a - sonst gilt
* sie an der Kachel nicht, und genau das war der Fehler der ersten Fassung:
* an der Kachel blieb ein sechs Pixel breiter weisser Strich stehen, weil
* dort weder display noch min-width ankamen.
*
* Klein, rund, in der Warnfarbe: auffaellig genug, um im Vorbeigehen
* gesehen zu werden, leise genug, um das Menue nicht zu zerreissen.
*/
.menue .marke-zahl {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-width: 1.25rem;
height: 1.25rem;
margin-left: .4rem;
padding: 0 .3rem;
border-radius: .7rem;
background: var(--warn);
color: #ffffff;
font-size: .74rem;
font-weight: 700;
line-height: 1;
vertical-align: middle;
}
/* Auf der Seite, auf der man gerade steht, in der Hausfarbe. */
.menue .punkte a[aria-current="page"] .marke-zahl { background: var(--gruen-dunkel); }
/* Auf der gefuellten Kachel braucht sie einen hellen Grund - Bernstein auf
Gruen verschwindet. */
.menue .kachel.hier .was .marke-zahl { background: #ffffff; color: var(--gruen-dunkel); }
/* --- Inhalt -------------------------------------------------------------- */
main { max-width: 78rem; margin: 1.5rem auto; padding: 0 1rem; }
main.schmal { max-width: 26rem; }
/*
* --- Die Anmeldeseite ----------------------------------------------------
*
* Sie ist die einzige Seite ohne Menue, mit einer einzigen Karte darauf.
* Mit den Abstaenden aller anderen Seiten klebte die Karte direkt unter
* dem gruenen Kopf, waehrend darunter der halbe Bildschirm leer blieb -
* der Anwender am 16.09.2026: "sieht alles sehr gedrungen oben aus".
*
* Also: der Koerper spannt ueber die volle Fensterhoehe, der Inhalt sitzt
* in der Mitte des Raums zwischen Kopf und Fuss. Auf einem niedrigen
* Fenster (Handy quer) bleibt es beim normalen Fluss, weil die Karte dort
* ohnehin die Hoehe fuellt - justify-content wirkt dann von selbst nicht
* mehr, gescrollt wird trotzdem.
*/
body.anmeldeseite {
min-height: 100vh;
display: flex;
flex-direction: column;
}
body.anmeldeseite main {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
/* Etwas oberhalb der Mitte steht ruhiger als exakt mittig. */
padding-block: 2rem 4rem;
margin-block: 0;
}
/*
* Auf der Anmeldeseite steht die Marke in der MITTE.
*
* Sonst sitzt sie links, weil rechts der Benutzerblock steht - hier gibt
* es den nicht, und links angeschlagen mit viel Gruen daneben sieht die
* Leiste unfertig aus. Anwender am 16.09.2026: "logo und 'schichtplan vph'
* sollten auf der loginseite aber mittig sein".
*
* Das Schmuckband wandert dafuer nach aussen: einmal rechts, einmal links
* gespiegelt. Gespiegelt, nicht nur verschoben - sonst zeigte der Verlauf
* auf beiden Seiten in dieselbe Richtung und die linke Haelfte haette eine
* harte Kante zur Mitte hin.
*
* Als ::before und ::after und nicht ueber das eine Bandfeld: das steht im
* Fluss und wuerde die Marke aus der Mitte druecken. Absolut gesetzt
* bleibt die Mitte die Mitte, egal wie lang der Name ist.
*/
body.anmeldeseite .kopf {
position: relative;
justify-content: center;
}
body.anmeldeseite .kopf .kopfband { display: none; }
body.anmeldeseite .kopf::before,
body.anmeldeseite .kopf::after {
content: "";
position: absolute;
top: 50%;
/*
* Die Breite haelt Abstand zur Marke, statt ihn dem Zufall zu ueberlassen.
*
* GEMESSEN bei 820 px: mit festen 30 % blieben zwischen Band und Logo
* nur 20 px - es sah aus, als klebte die Palette am Schriftzug. Mit
* calc(50% - 12rem) sind es dort 51 px und bei 1280 px 115 px; unter
* 48rem ist ohnehin Schluss.
*/
width: min(30%, calc(50% - 12rem));
max-width: 22rem;
height: 1.9rem;
background: url("kopfband.svg") no-repeat right center;
background-size: auto 100%;
pointer-events: none;
}
body.anmeldeseite .kopf::after { right: 1.25rem; transform: translateY(-50%); }
body.anmeldeseite .kopf::before { left: 1.25rem; transform: translateY(-50%) scaleX(-1); }
/*
* Unter 48rem beides weg - dieselbe Grenze wie beim Band im Fluss. Dort
* reicht die Breite fuer Marke UND Zierrat nicht mehr, und die Grafik
* liefe unter den Namen.
*/
@media (max-width: 48rem) {
body.anmeldeseite .kopf::before,
body.anmeldeseite .kopf::after { display: none; }
}
/* Mehr Luft in der Karte - sie traegt hier die ganze Seite. */
body.anmeldeseite .karte { padding: 1.8rem 1.75rem 2rem; }
body.anmeldeseite .karte h2 { margin-bottom: 1.25rem; }
/*
* Der Fuss bekommt dieselbe Breite wie die Karte und steht damit buendig
* darunter.
*
* GEMESSEN, nicht geraten: im Flex-Koerper zieht sich der Fuss auf seine
* Textbreite zusammen (398 px) und wird von seinen auto-Raendern in die
* Mitte geschoben - ein Rand mit auto verhindert das Strecken. Er stand
* dann irgendwo, nur nicht unter der Karte. Mit width und max-width sitzt
* er, wo er hingehoert.
*/
body.anmeldeseite footer {
width: 100%;
max-width: 26rem;
margin: 0 auto 2rem;
}
/*
* Seiten mit einer breiten Tabelle duerfen die ganze Fensterbreite nehmen -
* dieselbe wie die Menueleiste, damit die Seite nicht aussieht, als fehle
* ihr rechts ein Stueck.
*
* Anwender am 14.09.2026 zur Spesenfreigabe: "ich will da nicht scrollen
* muessen waagerecht, mach die ganze Tabelle einfach breiter, diese deckt
* ja nur ca 80% der Breite der Menuepunkte ab" - und nach einem ersten
* Versuch ueber die volle Fensterbreite: "das ist jetzt zu breit, optimal
* waere die Breite der Menueleiste, Beginn von Wochenplan bis hinter
* Feiertage und Ferien".
*
* GEMESSEN, nicht geschaetzt (Fenster 1425 px): die Menuepunkte spannen von
* x=55 bis x=1370, also 1314 px = 82,1 rem. Die Freigabetabelle braucht
* 1343 px. Weil box-sizing: border-box gilt, STECKT DIE POLSTERUNG IN DER
* MAX-BREITE: 84rem haetten nur 1304 px Inhalt ergeben und die Tabelle
* waere weiter gescrollt - genau das ist beim ersten Versuch passiert.
* 86,5rem = 1384 px abzueglich 40 px Polsterung = 1344 px Inhalt, und die
* Tabelle passt. 78rem (die Vorgabe fuer alle anderen Seiten) waren 1248 px
* und damit deutlich zu wenig.
*
* Die Polsterung ist die der Menueleiste, damit die Kanten fluchten.
*/
main.weit { max-width: 86.5rem; padding: 0 1.25rem; }
h2 { font-size: 1.1rem; margin: 0 0 .9rem; }
h2 .neben { font-weight: 400; color: var(--text-blass); font-size: .88rem; }
/* Der Hinweis zu einer Woche (seit 30.09.2026) - roter Text in der
Ueberschrift des Wochenplans, zwischen Titel und Zeitraum. */
h2 .wochenhinweis { color: var(--fehler); font-weight: 700; margin: 0 .6rem; }
.karte {
background: var(--flaeche);
border: 1px solid var(--linie);
border-radius: var(--radius);
padding: 1.25rem;
}
.leiste {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .6rem;
margin: 0 0 1rem;
}
.leiste .luecke { margin-left: auto; }
/* Felder oben buendig, wenn Beschriftungen verschieden hoch sind - sonst
rutscht das niedrigere Feld nach unten (Spesen: Tachostand neben den
Paletten mit ihrer Zeile "je Stueck", 01.10.2026). */
.leiste.oben-buendig { align-items: flex-start; }
/* Spesenfreigabe: "zuruecknehmen" klappt die zwei Wege auf (08.10.2026). */
details.zurueck-wahl { display: inline-block; }
details.zurueck-wahl > summary { list-style: none; cursor: pointer; }
details.zurueck-wahl > summary::-webkit-details-marker { display: none; }
details.zurueck-wahl .zurueck-wege { display: flex; flex-direction: column; gap: .3rem; margin-top: .3rem; }
/* Mehrere Knoepfe, die zusammen bleiben und zusammen umbrechen. Einzeln
schiebt .luecke nur den ersten nach rechts. */
.leiste .knopfgruppe { display: inline-flex; flex-wrap: wrap; gap: .5rem; }
/* --- Meldungen ----------------------------------------------------------- */
.meldung {
border-radius: var(--radius);
padding: .8rem 1rem;
margin: 0 0 1.1rem;
border-left: .3rem solid;
}
.meldung.fehler { background: var(--fehler-blass); border-color: var(--fehler); color: #7d1a15; }
.meldung.gut { background: var(--gruen-blass); border-color: var(--gruen); color: #00503b; }
.meldung.hinweis { background: var(--warn-blass); border-color: var(--warn); color: #6b4600; }
/* --- Formulare ----------------------------------------------------------- */
label { display: block; margin: 0 0 1rem; font-size: .9rem; font-weight: 600; }
label.neben { display: inline-block; margin: 0; }
/* Ein Bemerkungsfeld in einer Leiste: die Beschriftung darueber, das Feld so
breit wie der Platz (Antraege, 01.10.2026). */
label.neben.bemerkung-feld input { display: block; width: 100%; }
label .zusatz { display: block; font-weight: 400; color: var(--text-blass); margin-top: .2rem; }
input[type="text"], input[type="password"], input[type="email"], input[type="search"],
input[type="date"], input[type="number"], select {
margin-top: .35rem;
padding: .5rem .6rem;
font: inherit;
color: var(--text);
background: var(--flaeche);
border: 1px solid var(--linie);
border-radius: var(--radius);
}
/* Volle Breite fuer Eingabefelder in einer Beschriftung - aber NICHT fuer
Ankreuz- und Auswahlkaestchen. Ohne die Ausnahme wurde das Haekchen bei
"Beschaeftigt" 309 Pixel breit und die Beschriftung driftete nach
rechts weg. Gefunden am 08.09.2026 in der Mitarbeiterverwaltung. */
label:not(.neben) input:not([type="checkbox"]):not([type="radio"]),
label:not(.neben) select { width: 100%; }
input:focus, select:focus, button:focus-visible, a:focus-visible {
outline: 2px solid var(--gruen);
outline-offset: 1px;
}
button, .knopf {
display: inline-block;
font: inherit;
font-weight: 600;
padding: .52rem 1rem;
color: #fff;
background: var(--gruen);
border: 0;
border-radius: var(--radius);
cursor: pointer;
text-decoration: none;
}
button:hover, .knopf:hover { background: var(--gruen-dunkel); }
button.zweitrangig, .knopf.zweitrangig {
background: var(--flaeche);
color: var(--text);
border: 1px solid var(--linie);
}
button.zweitrangig:hover, .knopf.zweitrangig:hover { background: var(--grund); }
/*
* Die Monatswahl in der Blaetterleiste (monatsuebersicht.php).
*
* Vorher sahen "voriger Monat", die Auswahl und "naechster Monat" gleich
* aus - drei graue Kaesten nebeneinander, und beim Blaettern wusste man
* nicht, welcher davon der ist, den man gerade sieht.
*/
.leiste .monatswahl {
padding: .3rem .6rem;
border: 1px solid var(--gruen-rand);
border-radius: var(--radius);
background: var(--gruen-blass);
}
.leiste .monatswahl label.neben { color: var(--gruen-dunkel); font-weight: 700; }
/* Der wirklich laufende Monat, nicht nur der angesehene. */
.leiste .monatswahl.laufend {
border-color: var(--gruen);
box-shadow: inset 0 0 0 1px var(--gruen);
}
/* --- Band "Antraege warten" (antraege.php) -------------------------------- */
/*
* Auffaellig, aber nicht schreiend: bernsteinfarben, solange es im Rahmen
* ist, und roetlich, sobald der aelteste Antrag acht Tage alt ist. Die Zahl
* steht gross links, weil sie das ist, was man im Vorbeigehen liest.
*
* Es erscheint nur, wenn wirklich etwas wartet - ein Hinweis, der immer da
* ist, wird nicht mehr gelesen.
*/
.wartet {
display: flex;
align-items: center;
gap: .9rem;
margin: 0 0 1.1rem;
padding: .8rem 1rem;
border-radius: var(--radius);
border-left: .4rem solid var(--warn);
background: var(--warn-blass);
color: #6b4600;
}
.wartet .zahl {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.4rem;
height: 2.4rem;
padding: 0 .5rem;
border-radius: 50%;
background: var(--warn);
color: #ffffff;
font-size: 1.25rem;
line-height: 1;
}
.wartet .dazu { display: block; font-size: .88rem; font-weight: 400; }
/* Ab acht Tagen draengt es. Gedaempftes Rot, nicht --fehler: es ist kein
Fehler, es ist liegen geblieben. */
.wartet.draengt {
border-left-color: #a4262c;
background: #fbeaea;
color: #7d1a15;
}
.wartet.draengt .zahl { background: #a4262c; }
/* Die Verweise auf die Monatsuebersicht im Kopf eines Antrags. Meist einer,
ueber den Monatswechsel zwei - dann brauchen sie einen Abstand. */
.monatsblick { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
/* --- Tabellen ------------------------------------------------------------ */
/*
* FESTE TABELLENKOEPFE (01.10.2026). Ein Kopf klebt per CSS nur, solange
* kein Element dazwischen selbst scrollt. Tabellen ohne Rahmen kleben
* deshalb direkt unter dem Menue (--oben-h setzt assets/oben-fest.js); in
* einem Rahmen - der waagerecht scrollt, fuer Monatsuebersicht und
* Urlaubsplanung - schiebt das Skript die Kopfzellen. Ein Rahmen, der auch
* senkrecht scrollt, war der erste Versuch: zwei ineinander scrollende
* Bereiche, und der Kopf rutschte mit dem Rahmen unter das Menue.
*
* Die Tabelle schneidet ihre runden Ecken mit "clip" statt "hidden":
* "hidden" macht sie selbst zu einem Scrollbereich, und dann klebt nichts.
*/
.rahmen { overflow-x: auto; }
table {
width: 100%;
border-collapse: collapse;
background: var(--flaeche);
border: 1px solid var(--linie);
border-radius: var(--radius);
overflow: clip;
}
thead th {
position: sticky;
top: var(--oben-h, 0px);
z-index: 3;
}
/* In einem Rahmen schiebt assets/oben-fest.js die Kopfzellen; sie muessen
dafuer ueber den Zeilen liegen. */
.rahmen thead th { position: relative; top: 0; z-index: 3; }
/* Sortierbare Spaltenkoepfe (Mitarbeiterliste, 01.10.2026): sie sehen aus
wie die anderen Koepfe und verraten sich erst beim Darueberfahren. */
th a.sortieren { display: block; color: inherit; text-decoration: none; }
th a.sortieren:hover, th a.sortieren:focus-visible { color: var(--gruen-dunkel); text-decoration: underline; }
/* Beim Scrollen schrumpft der feste Kopf: die grossen Menuekacheln gehen
weg, Kopfzeile und Menuepunkte bleiben (setzt assets/oben-fest.js). */
.gescrollt .oben-fest .menue .kacheln { display: none; }
.gescrollt .oben-fest .kopf { padding-top: .35rem; padding-bottom: .35rem; }
.gescrollt .oben-fest .menue { padding-top: .25rem; }
th, td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--linie); }
th {
background: var(--grund);
font-size: .76rem;
text-transform: uppercase;
letter-spacing: .03em;
color: var(--text-blass);
}
tr:last-child td { border-bottom: 0; }
/* --- Personenkacheln (Woche bearbeiten, Person waehlen) ------------------- */
/*
* Drei Dinge standen hier nebeneinander und sahen gleich aus: der Name der
* Schicht, der Name der Person und der Knopf zum Weiterklicken. Seit dem
* 14.09.2026 ist die Person gruen und traegt ihr Kuerzel im Kreis, und die
* Schicht bekommt einen gruenen Balken vor die Ueberschrift.
*/
.personen {
display: flex;
flex-wrap: wrap;
gap: .45rem;
}
.person-kachel {
display: inline-flex;
align-items: center;
padding: .42rem .85rem;
border: 1px solid var(--gruen-rand);
border-radius: 2rem;
background: var(--gruen-blass);
color: var(--gruen-dunkel);
font-size: .9rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.person-kachel:hover {
background: var(--gruen);
border-color: var(--gruen);
color: #ffffff;
}
/* Die Schicht als Ueberschrift - mit Balken, damit sie nicht mit einer
Person zu verwechseln ist. */
.schichtkopf {
display: flex;
align-items: baseline;
gap: .55rem;
margin: 0 0 .7rem;
font-size: 1.05rem;
}
.schichtkopf::before {
content: '';
width: .28rem;
align-self: stretch;
min-height: 1.1rem;
border-radius: .14rem;
background: var(--gruen);
}
.schichtkopf .anzahl {
font-size: .8rem;
font-weight: 400;
color: var(--text-blass);
}
/*
* Ziehen der Personenkacheln (woche-bearbeiten.php, Auswahl).
*
* Nur fuer die Verwaltung: draggable steht sonst gar nicht im Markup, und
* ohne draggable greift keine dieser Regeln. Wer nicht ziehen darf, sieht
* also auch keinen Greifzeiger, der etwas verspricht.
*/
.person-kachel[draggable="true"] { cursor: grab; }
.person-kachel[draggable="true"]:active { cursor: grabbing; }
/* Die Kachel, die gerade an der Maus haengt. */
.person-kachel.zieht { opacity: .4; }
/* Reihenfolge in der Gruppe (30.09.2026): Kachel mit zwei Pfeilen, und
beim Ziehen eine gruene Linie an der Stelle, an der sie landet. */
.kachel-zeile { display: inline-flex; align-items: center; gap: .1rem; max-width: 100%; flex-wrap: wrap; }
.kachel-zeile .pfeil {
padding: .1rem .35rem;
font-size: .95rem;
line-height: 1;
background: none;
border: 1px solid transparent;
color: var(--text-blass);
}
.kachel-zeile .pfeil:hover:not([disabled]),
.kachel-zeile .pfeil:focus-visible { border-color: var(--gruen-rand); color: var(--gruen-dunkel); }
.kachel-zeile .pfeil[disabled] { visibility: hidden; }
/* "-> abwesend" / "zurueck" (22.10.2026): leise wie die Pfeile, Text statt Zeichen. */
.kachel-zeile .nach-abwesend {
padding: .1rem .35rem;
font-size: .72rem;
line-height: 1.2;
white-space: nowrap;
background: none;
border: 1px solid var(--linie);
border-radius: var(--radius);
color: var(--text-blass);
cursor: pointer;
}
.kachel-zeile .nach-abwesend:hover,
.kachel-zeile .nach-abwesend:focus-visible { border-color: var(--gruen-rand); color: var(--gruen-dunkel); }
.kachel-zeile.ziel-links { box-shadow: -3px 0 0 0 var(--gruen); }
.kachel-zeile.ziel-rechts { box-shadow: 3px 0 0 0 var(--gruen); }
.kachel-zeile.ziel-oben { box-shadow: 0 -3px 0 0 var(--gruen); }
.kachel-zeile.ziel-unten { box-shadow: 0 3px 0 0 var(--gruen); }
/*
* GRUPPEN ALS KACHELN (01.10.2026). Bei vielen Gruppen waren die Wege beim
* Ziehen zu lang: jede Gruppe eine Zeile ueber die ganze Breite. Jetzt ein
* Raster aus Kaesten, die Namen darin untereinander.
*/
.gruppen-raster {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
gap: .7rem;
align-items: start;
margin-bottom: 1rem;
}
.gruppen-raster .gruppen-kachel { padding: .8rem .85rem; min-width: 0; }
.gruppen-raster .schichtkopf { font-size: .98rem; margin-bottom: .5rem; }
.gruppen-raster .personen { flex-direction: column; align-items: stretch; gap: .28rem; }
.gruppen-raster .kachel-zeile { display: flex; }
.gruppen-raster .person-kachel {
flex: 1 1 auto;
white-space: normal;
padding: .3rem .7rem;
font-size: .86rem;
}
.gruppen-raster .kachel-zeile .pfeil { font-size: .62rem; }
/* Die Woche, wie sie ist (08.10.2026): Tage am Namen, Gaeste gestrichelt. */
.kachel-tage { margin-left: .35rem; font-size: .74rem; color: var(--text-blass); white-space: nowrap; font-weight: 400; }
.kachel-zeile.gast .person-kachel { border-style: dashed; background: var(--grund); }
#verschieben .tagwahl { display: inline-flex; flex-direction: column; padding: .3rem .5rem; border: 1px solid var(--linie); border-radius: var(--radius); }
#verschieben .tagwahl input { margin-right: .3rem; }
/*
* WOCHE BEARBEITEN MIT LEISTE (01.10.2026): rechts, wer in der Woche fehlt.
* Die Leiste klebt beim Scrollen unter dem Menue - die Kacheln sind lang,
* die Leiste soll beim Ziehen sichtbar bleiben. Auf schmalen Schirmen
* rutscht sie unter die Kacheln.
*/
.mit-leiste {
display: grid;
grid-template-columns: minmax(0, 1fr) 19rem;
gap: 1rem;
align-items: start;
}
.mit-leiste > form, .mit-leiste > .gruppen-raster { min-width: 0; }
.wochen-abwesend {
/* Dezent hinterlegt, damit sie sich von den weissen Gruppenkacheln
abhebt (Anwender, 01.10.2026). Die Tabelle darin bleibt weiss. */
background: var(--warn-blass);
border-color: #ecd9b0;
position: sticky;
top: calc(var(--oben-h, 0px) + .5rem);
padding: .8rem .85rem;
max-height: calc(100vh - var(--oben-h, 0px) - 1rem);
overflow-y: auto;
}
.wochen-abwesend h3 { margin: 0 0 .5rem; font-size: .98rem; }
.wochen-abwesend table { font-size: .82rem; }
.wochen-abwesend thead th { position: static; }
.wochen-abwesend th.tag, .wochen-abwesend td.tag { text-align: center; width: 2.1rem; padding: .2rem .1rem; }
.wochen-abwesend td.name { padding: .2rem .4rem; line-height: 1.25; }
.wochen-abwesend th.feiertag { color: var(--fehler); }
.wochen-abwesend tr.hervor td { background: var(--gruen-blass); font-weight: 600; }
.wochen-abwesend .abwesend {
display: inline-block;
min-width: 1.6rem;
padding: 0 .15rem;
border: 1px solid transparent;
border-radius: 4px;
font-size: .74rem;
font-weight: 600;
}
/* Urlaub rot wie krank (Anwender, 08.10.2026: "es wurde gewuenscht, dass auch Urlaub
wie Krank dargestellt wird, also in rot"). Unterschieden wird am Text. */
.wochen-abwesend .abwesend-urlaub { background: var(--fehler-blass); border-color: #eab9b5; color: #7d1a15; }
.wochen-abwesend .abwesend-krank { background: var(--fehler-blass); border-color: #eab9b5; color: #7d1a15; }
.wochen-abwesend .abwesend-kur { background: var(--warn-blass); border-color: #e6cf9e; color: #6b4600; }
.wochen-abwesend .abwesend-freistellung { background: #eef0fd; border-color: #c3c9f2; color: #303a86; }
.wochen-abwesend .abwesend-freizeitausgleich { background: #f3eefd; border-color: #d5c6f0; color: #4b2d80; }
/* Beantragt, nicht entschieden: nur umrandet, nicht gefuellt. */
.wochen-abwesend .abwesend.offen { background: var(--flaeche); border-style: dashed; }
@media (max-width: 62rem) {
.mit-leiste { grid-template-columns: minmax(0, 1fr); }
.wochen-abwesend { position: static; max-height: none; }
}
@media print {
.wochen-abwesend { display: none; }
}
/*
* Der Kasten, ueber dem die Kachel schwebt. Gestrichelt und nicht gefuellt:
* gefuellt saehe aus wie "schon erledigt", und erledigt ist es erst nach
* dem Loslassen.
*/
.karte.ziel.drueber {
outline: 2px dashed var(--gruen);
outline-offset: -4px;
background: var(--gruen-blass);
}
/* Ein Gruppenkasten ohne Mitglieder. Blass und gestrichelt: er ist ein Ziel,
aber er soll nicht so laut sein wie ein voller. */
.leerer-kasten {
margin: 0;
padding: .5rem .75rem;
border: 1px dashed var(--linie);
border-radius: var(--radius);
color: var(--text-blass);
font-size: .86rem;
}
/* --- Spesenfreigabe: die Liste ------------------------------------------- */
/*
* Drei Spalten brachen zu oft um (Anwender, 14.09.2026): der Name, der
* Stand und die Spalte mit ansehen/freigeben. Bei neun Spalten verteilt der
* Browser die Breite nach Inhalt - die Zahlenspalten bekamen sie, die
* kurzen Textspalten brachen.
*
* Der Name ist das, woran man die Zeile wiederfindet, und "ansehen" und
* "freigeben" gehoeren nebeneinander: ein Knopf, der unter seinen Verweis
* rutscht, sieht aus wie ein zweiter Eintrag.
*/
/*
* Etwas dichtere Polsterung als die Grundeinstellung (.5rem/.7rem). Bei
* zehn Spalten sind die 0,2rem je Seite zusammen rund 64 px - genug, damit
* die Tabelle in die Breite der Menueleiste passt, ohne dass eine Spalte
* schmaler wird und wieder umbricht.
*
* Gemessen am 14.09.2026: die Kette main(1384) > karte(1344, 20px
* Polsterung) > rahmen(1302) liess der Tabelle 1302 px, sie brauchte 1339.
* Die Karte frisst also 82 px, an die man beim Rechnen nicht denkt.
*/
table.freigabe th, table.freigabe td { padding-left: .5rem; padding-right: .5rem; }
/*
* Die Mindestbreiten sind GEMESSEN, nicht geschaetzt: der breiteste Name
* ("Wildemann, Waldemar") braucht 160 px, der breiteste Stand
* ("in Bearbeitung") 92 px, dazu je 16 px Polsterung. Die erste Fassung gab
* dem Stand genau 112 px - vier Pixel Luft, und der Anwender nannte es am
* 14.09.2026 zu Recht "sehr gequetscht". Jetzt hat jede Spalte gut 40 px
* Luft; die Tabelle scrollt dafuer in ihrem Rahmen.
*/
table.freigabe td.wer {
white-space: nowrap;
min-width: 12.5rem;
}
/*
* EIN NAME, EINE ZEILE (Anwender, 01.10.2026) - wie zuvor schon in der
* Gutscheinkontrolle.
*
* Vorher trug der Zusatz "ausgeschieden" display:block und stand damit
* UNTER dem Namen; die Zelle wurde dadurch 63 statt 42 px hoch (gemessen
* bei 966 px Fensterbreite). Der Name ist das, woran man die Zeile
* wiederfindet - er soll nicht der Kopf eines zweizeiligen Blocks sein.
*
* Die Zelle traegt ohnehin nowrap, inline genuegt also. Die Spalte wird
* fuer solche Zeilen nur breiter: min-width oben ist eine Untergrenze,
* keine Obergrenze.
*
* Die Standspalte darunter behaelt ihr display:block - dort stehen
* mehrere eigenstaendige Angaben (seit, freigegeben, abgerufen)
* untereinander, und das ist kein Name.
*/
table.freigabe td.wer .blass { display: inline; }
/*
* HEISST standspalte UND NICHT stand.
*
* ".stand" gibt es schon: das ist die Pille fuer Antragszustaende
* (genehmigt, beantragt, abgelehnt) mit Rahmen und rundem Radius. Die Zelle
* hier hat damit nichts zu tun, sah nach der Namensgleichheit aber aus wie
* ein Eingabefeld - gemessen am 14.09.2026: border 1px solid, Radius
* 12,8 px, beides von der fremden Regel geerbt.
*
* Eine Klasse ist ein Name im ganzen Haus. Wer einen vergibt, der schon
* vergeben ist, erbt dessen Aussehen.
*/
table.freigabe td.standspalte {
white-space: nowrap;
min-width: 9.5rem;
padding-right: .9rem;
}
table.freigabe td.standspalte .blass { display: block; }
/*
* flex-wrap: nowrap - die Zelle traegt zwar nowrap, aber darin steht eine
* Leiste, und die bricht nach ihren eigenen Regeln um. nowrap an der Zelle
* allein reichte deshalb nicht.
*/
/* nowrap: die Zelle traegt zwar nowrap, aber die Leiste darin bricht nach
ihren eigenen Regeln um. align-items: der Verweis "ansehen" sitzt auf
der Schriftlinie, der Knopf auf seiner Kastenhoehe - ohne das stehen
sie 6 px versetzt nebeneinander. */
/* Kurz durfte sie umbrechen (08.10.2026) - das wollte der Anwender nicht.
Den Platz fuer "freigeben" + "an Fahrer zurueckgeben" schafft seitdem die
leere Spalte Werbungskosten, die nur noch erscheint, wenn etwas drinsteht. */
table.freigabe td.tun .leiste { flex-wrap: nowrap; align-items: center; }
/* --- Wochenplan ---------------------------------------------------------- */
table.woche { font-size: .87rem; }
table.woche th.tag { text-align: center; min-width: 7.5rem; }
table.woche th.tag .datum { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; }
table.woche th.tag.wochenende { background: var(--gruen-blass); }
table.woche th.tag.feiertag { background: var(--warn-blass); color: var(--warn); }
table.woche td.zelle { text-align: center; padding: .35rem .4rem; white-space: nowrap; }
/*
* Die Tour unter der Schicht - klein und blass.
*
* Gelesen wird zuerst die Schicht; die Tour ist die Nebenauskunft. Sie
* bekommt eine eigene Zeile, weil "04:15 - 13:00 FF 426/ BI- VP8015"
* nebeneinander die Spalte sprengen wuerde.
*/
/*
* Die Tourspalte - schmal, links, und im Ausdruck genauso.
*
* Anforderung der Lagerleitung vom 28.09.2026. Sie steht direkt hinter
* dem Namen, weil sie zur Person gehoert und nicht zum Tag.
*/
table.woche th.tour, table.woche td.tour {
white-space: nowrap;
font-size: .8rem;
color: var(--text-blass);
padding-right: .6rem;
}
table.woche td.tour { font-variant-numeric: tabular-nums; }
table.woche td.zelle .tourzeile {
display: block;
font-size: .72rem;
color: var(--text-blass);
line-height: 1.2;
}
@media print {
table.woche td.zelle .tourzeile { color: #333; }
}
table.woche td.person { font-weight: 600; white-space: nowrap; }
/*
* Der Name ist ein Verweis, sieht aber keiner.
*
* In dieser Spalte ist JEDER Eintrag anklickbar. Gruen und unterstrichen
* heisst dann nicht mehr "hier kannst du klicken", sondern macht aus der
* Namensspalte einen Streifen Unruhe neben dem Plan. Schwarz und fett,
* wie der Anwender es am 21.09.2026 verlangt hat; dass es geht, zeigt der
* Mauszeiger und beim Ueberfahren das Gruen.
*/
table.woche td.person a {
color: var(--text);
font-weight: 700;
text-decoration: none;
}
table.woche td.person a:hover,
table.woche td.person a:focus-visible { color: var(--gruen); }
/* "max. N im Urlaub": dezent und am rechten Rand (08.10.2026). */
table.woche tr.gruppenkopf .urlaub-max {
float: right;
font-weight: 400;
font-size: .76rem;
opacity: .7;
letter-spacing: 0;
text-transform: none;
}
/* Die Fahrer-Summe unter dem Plan (08.10.2026). */
table.woche tfoot tr.fahrer-summe th,
table.woche tfoot tr.fahrer-summe td {
background: var(--gruen-blass);
border-top: 2px solid var(--gruen-rand);
font-weight: 700;
color: var(--gruen-dunkel);
}
table.woche tfoot tr.fahrer-summe td.zelle { text-align: center; }
.wochen-abwesend table.fahrer-summe td.tag { font-weight: 700; color: var(--gruen-dunkel); }
table.woche tr.gruppenkopf th {
background: var(--gruen);
color: #fff;
font-size: .8rem;
letter-spacing: .04em;
}
.zelle .schicht { color: var(--text); }
.zelle .abwesend {
display: inline-block;
min-width: 1.6rem;
padding: .1rem .45rem;
border-radius: .2rem;
background: var(--grund);
border: 1px solid var(--linie);
color: var(--text-blass);
font-weight: 600;
}
/* Urlaub rot wie krank (Anwender, 08.10.2026: "es wurde gewuenscht, dass auch Urlaub
wie Krank dargestellt wird, also in rot"). Unterschieden wird am Text. */
.zelle .abwesend-urlaub { background: var(--fehler-blass); border-color: #eab9b5; color: #7d1a15; }
.zelle .abwesend-krank { background: var(--fehler-blass); border-color: #eab9b5; color: #7d1a15; }
.zelle .abwesend-kur { background: var(--warn-blass); border-color: #e6cf9e; color: #6b4600; }
.zelle .abwesend-freistellung { background: #eef0fd; border-color: #c3c9f2; color: #303a86; }
.zelle .abwesend-freizeitausgleich { background: #f3eefd; border-color: #d5c6f0; color: #4b2d80; }
.zelle .freitext { color: var(--warn); font-weight: 600; }
.zelle .leer { color: #c9d1ce; }
/*
* GRUPPE JE TAG (30.09.2026). An einem Tag, den die Person in einer anderen
* Gruppe arbeitet, steht in ihrer Zeile nur der Verweis dorthin - klein und
* blass, die Schicht selbst steht in der anderen Gruppe. Die Zeile eines
* Gastes (die Person gehoert fest woanders hin) ist kursiv.
*/
.zelle .woanders { color: var(--text-blass); font-size: .78em; white-space: nowrap; }
table.woche tr.gast td.person { font-style: italic; }
/* Dieselben Zeichen in der Legende unter dem Plan (12.10.2026). */
.zeichen .woanders { color: var(--text-blass); font-size: .78em; white-space: nowrap; }
@media print {
.zelle .woanders { color: #555; }
}
/* --- Monatsmatrix -------------------------------------------------------- */
table.monat { font-size: .78rem; }
table.monat th, table.monat td { padding: .2rem .15rem; border-bottom: 1px solid var(--linie); }
table.monat th.person, table.monat td.person {
text-align: left;
padding: .25rem .5rem;
white-space: nowrap;
position: sticky;
left: 0;
background: var(--flaeche);
font-weight: 600;
border-right: 2px solid var(--linie);
}
table.monat th.person { background: var(--grund); }
table.monat td.person a { color: var(--gruen); text-decoration: none; }
table.monat td.person a:hover { text-decoration: underline; }
table.monat th.tag {
text-align: center;
min-width: 1.5rem;
padding: .2rem .1rem;
letter-spacing: 0;
text-transform: none;
}
table.monat th.tag .nr { display: block; font-weight: 700; color: var(--text); }
table.monat th.tag .wt { display: block; font-weight: 400; font-size: .68rem; }
/*
* WOCHENENDE IN GEDAEMPFTEM ROT (Anwender, 14.09.2026: "die Wochenenden
* dort mehr roetlich markieren").
*
* Bewusst ein STUMPFES Rot und nicht --fehler. Die Hausfarbe ist Grün, und
* Rot kommt im ganzen Projekt sonst genau einmal vor: negativer Resturlaub
* in der Gesamtübersicht. Ein Wochenende ist keine Warnung, es ist nur kein
* Arbeitstag - waeren beide gleich rot, hiesse Rot hier nichts mehr.
*/
table.monat th.tag.wochenende { background: #f3dede; color: #8d4a4a; }
table.monat th.tag.wochenende .nr { color: #8d4a4a; }
table.monat th.tag.ferien { background: #eaf3fb; }
table.monat th.tag.feiertag { background: var(--warn-blass); color: var(--warn); }
table.monat th.tag.heute { box-shadow: inset 0 -3px 0 var(--gruen); }
table.monat td.zelle { text-align: center; }
/*
* Die anklickbare Tageszelle sieht aus wie vorher.
*
* Seit dem 21.09.2026 fuehrt jede Zelle auf die Tagesmaske. Waeren das
* gruen unterstrichene Verweise, bestuende die Monatsmatrix aus 600
* Verweisen und waere nicht mehr lesbar - und gelesen wird sie viel
* haeufiger, als in ihr geaendert wird.
*
* Die Zelle traegt die Farbe der Abwesenheit weiter (die steckt im
* inneren span), fuellt die ganze Zelle aus, damit man nicht zielen muss,
* und hebt sich erst beim Ueberfahren ab.
*/
table.monat td.zelle a.tagzelle {
display: block;
color: inherit;
text-decoration: none;
border-radius: 2px;
}
table.monat td.zelle a.tagzelle:hover,
table.monat td.zelle a.tagzelle:focus-visible {
outline: 2px solid var(--gruen);
outline-offset: -2px;
}
/* Kraeftiger als der erste Versuch (#fcf2f2): gegen die rote Kopfzelle
war der Ton in den Zeilen kaum zu sehen, und die Spalte soll als
Spalte lesbar sein - so wie die heutige. */
table.monat td.zelle.wochenende { background: #fbe9e9; }
table.monat td.zelle.feiertag { background: #fdf8ec; }
/*
* DER HEUTIGE TAG, SENKRECHT DURCH DIE GANZE TABELLE.
*
* Bis zum 14.09.2026 trug nur die Kopfzeile einen gruenen Unterstrich - in
* einer Tabelle mit 31 Spalten und 37 Zeilen findet man die Spalte damit
* nicht wieder, sobald man einmal nach unten gesehen hat.
*
* Getragen wird die Markierung von den SEITENLINIEN, nicht vom Grund: in
* den Zellen steht ein mit eigener Farbe (Schicht, Abwesenheit), und
* ein Hintergrund an der Zelle verschwindet darunter. Die Linien laufen
* durch, egal was in der Zelle steht.
*
* Diese Regeln stehen NACH wochenende und feiertag: bei gleicher
* Spezifitaet entscheidet die Reihenfolge, und heute soll gewinnen - faellt
* der heutige Tag auf einen Samstag, ist die Spalte trotzdem markiert.
*/
table.monat th.tag.heute,
table.monat td.zelle.heute {
background: var(--gruen-blass);
border-left: 2px solid var(--gruen);
border-right: 2px solid var(--gruen);
}
/* Die Kopfzelle schliesst das Band oben ab. */
table.monat th.tag.heute {
border-top: 2px solid var(--gruen);
color: var(--gruen-dunkel);
}
table.monat th.tag.heute .nr { color: var(--gruen-dunkel); }
/* Und die letzte Zeile unten. */
table.monat tbody tr:last-child td.zelle.heute,
table.monat tfoot tr:last-child td.zelle.heute {
border-bottom: 2px solid var(--gruen);
}
table.monat th.summe, table.monat td.summe {
text-align: center;
min-width: 2.4rem;
border-left: 1px solid var(--linie);
color: var(--text-blass);
/* Ohne das macht die Grossschreibung der Tabellenkoepfe aus 'Ku' ein
'KU' und beschneidet 'FZA'. */
text-transform: none;
letter-spacing: 0;
}
/*
* DER SUMMENBLOCK RECHTS SETZT SICH VOM TAGESRASTER AB.
*
* Links stehen 28 bis 31 Tagesspalten, rechts sechs Summen (A, U, K, Ku,
* FR, FZA). Beide sahen gleich aus, und beim Wandern nach rechts merkte man
* den Uebergang nicht - die erste Summe las sich wie ein weiterer Tag.
*
* Der Grund traegt die Trennung, die Doppellinie davor setzt die Kante.
* Bewusst ein anderer Ton als die heutige Spalte und als Wochenende und
* Feiertag: drei Bedeutungen, drei Farben, sonst heisst Farbe hier nichts
* mehr.
*/
/*
* Der Block war in der ersten Fassung zu leise (Anwender, 14.09.2026: "die
* Summen rechts sind auch noch viel zu unscheinbar"). Jetzt traegt die
* Kopfzeile die Hausfarbe und die Zahlen stehen dunkelgruen und fett auf
* blassgruenem Grund - er liest sich als eigener Block und nicht als
* Fortsetzung des Tagesrasters.
*/
table.monat th.summe {
background: var(--gruen);
color: #ffffff;
font-weight: 700;
}
table.monat td.summe {
background: var(--gruen-blass);
color: var(--gruen-dunkel);
font-weight: 700;
font-size: .84rem;
}
/*
* Die Kante vor der ersten Summenspalte. Sie haengt an einer eigenen Klasse
* aus dem Markup und NICHT an :nth-of-type - das haette die Personenspalte
* getroffen, denn die ist das erste | jeder Zeile. Erst beim Nachsehen
* aufgefallen; eine geratene Regel prueft sich nicht selbst.
*/
table.monat th.summe.kante, table.monat td.summe.kante {
border-left: 3px solid var(--gruen);
}
table.monat tbody tr:hover td.summe { background: #d7e9e2; }
table.monat .abwesend {
min-width: 0;
padding: 0 .2rem;
border: 0;
background: none;
font-size: .76rem;
}
/* Urlaub rot wie krank (Anwender, 08.10.2026: "es wurde gewuenscht, dass auch Urlaub
wie Krank dargestellt wird, also in rot"). Unterschieden wird am Text. */
table.monat .abwesend-urlaub { color: #7d1a15; background: var(--fehler-blass); }
table.monat .abwesend-krank { color: #7d1a15; background: var(--fehler-blass); }
table.monat .abwesend-kur { color: #6b4600; background: var(--warn-blass); }
table.monat .abwesend-freistellung { color: #303a86; background: #eef0fd; }
table.monat .abwesend-freizeitausgleich { color: #4b2d80; background: #f3eefd; }
table.monat tfoot td {
background: var(--grund);
font-weight: 600;
border-top: 2px solid var(--linie);
}
@media print {
table.monat { font-size: 7pt; }
table.monat th.person, table.monat td.person { position: static; }
table.monat th.tag.wochenende, table.monat td.zelle.wochenende { background: #eee !important; }
table.monat th.tag.feiertag, table.monat td.zelle.feiertag { background: #ddd !important; color: #000 !important; }
table.monat .abwesend { background: none !important; color: #000 !important; }
}
/* --- Jahrestabelle (Gesamtuebersicht) ------------------------------------ */
table.jahr { font-size: .88rem; }
table.jahr th, table.jahr td { padding: .35rem .5rem; }
table.jahr th.person, table.jahr td.person { text-align: left; white-space: nowrap; }
table.jahr td.person a { color: var(--gruen); text-decoration: none; font-weight: 600; }
table.jahr td.person a:hover { text-decoration: underline; }
table.jahr th.zahl, table.jahr td.zahl { text-align: right; white-space: nowrap; }
/* Die Restspalte ist die, auf die alle schauen. */
table.jahr th.stark, table.jahr td.stark {
font-weight: 700;
border-left: 2px solid var(--linie);
border-right: 2px solid var(--linie);
}
table.jahr td.minus { color: var(--fehler); }
table.jahr td.offen { color: var(--warn); font-weight: 600; }
table.jahr td.gefuellt { color: var(--gruen); }
table.jahr .stern { color: var(--gruen); font-weight: 700; }
table.jahr .vermerk {
display: inline-block;
margin-left: .4rem;
padding: 0 .35rem;
border: 1px solid var(--linie);
border-radius: .8rem;
font-size: .72rem;
font-weight: 400;
color: var(--text-blass);
}
table.jahr tr.gruppenkopf th {
background: var(--gruen);
color: #fff;
font-size: .8rem;
letter-spacing: .04em;
text-align: left;
}
table.jahr tfoot td {
background: var(--grund);
font-weight: 600;
border-top: 2px solid var(--linie);
}
@media print {
table.jahr { font-size: 8pt; }
table.jahr tr.gruppenkopf th { background: #ddd !important; color: #000 !important; }
table.jahr td.minus, table.jahr td.offen, table.jahr td.gefuellt { color: #000 !important; }
table.jahr .stern { color: #000 !important; }
}
/* --- Planungstabelle ----------------------------------------------------- */
table.planung td.person { font-weight: 600; white-space: nowrap; }
table.planung td.zahl { text-align: right; }
table.planung input[type="text"] { margin: 0; padding: .3rem .4rem; }
table.planung tr.gruppenkopf th {
background: var(--gruen);
color: #fff;
font-size: .8rem;
letter-spacing: .04em;
}
/* Zwei Knoepfe in einer Tabellenzelle, nebeneinander statt gestapelt. */
form.knopfpaar {
margin: 0;
display: flex;
gap: .4rem;
justify-content: flex-end;
}
form.knopfpaar button { padding: .4rem .8rem; font-size: .9rem; }
/* --- Historie ------------------------------------------------------------ */
/* Beschriftung links, Wert rechts. */
table.paare { width: auto; }
table.paare th, table.paare td { padding: .35rem .9rem .35rem 0; border: 0; }
table.paare th {
text-align: left;
font-weight: 400;
color: var(--text-blass);
text-transform: none;
letter-spacing: 0;
background: none;
}
table.paare tr.stark th, table.paare tr.stark td {
border-top: 1px solid var(--linie);
padding-top: .6rem;
}
/* Stand eines Antrags als Beschriftung ueber der Tagesliste. */
.standzeile { margin: 1rem 0 .35rem; display: flex; align-items: baseline; gap: .5rem; }
.standzeile:first-of-type { margin-top: .4rem; }
.stand {
display: inline-block;
padding: .1rem .5rem;
border-radius: .8rem;
font-size: .78rem;
font-weight: 600;
border: 1px solid;
}
.stand-genehmigt { background: var(--gruen-blass); border-color: var(--gruen-rand); color: #00503b; }
.stand-beantragt { background: var(--warn-blass); border-color: var(--warn); color: #6b4600; }
.stand-abgelehnt { background: var(--fehler-blass); border-color: var(--fehler); color: #7d1a15; }
.stand-entwurf { background: var(--grund); border-color: var(--linie); color: var(--text-blass); }
/* Die Tage selbst. Im Altbestand standen sie als roher Datumstext
hintereinander, zwei je Zeile, durch geschuetzte Leerzeichen getrennt. */
.tagliste { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .2rem; }
.tagliste .tag {
display: inline-block;
padding: .15rem .45rem;
border: 1px solid var(--linie);
border-radius: var(--radius);
background: var(--flaeche);
font-size: .82rem;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.tagliste .tag-genehmigt { border-color: var(--gruen-rand); background: var(--gruen-blass); }
.tagliste .tag-beantragt { border-color: var(--warn); background: var(--warn-blass); }
.tagliste .tag-entwurf { border-style: dashed; color: var(--text-blass); }
table.tage { width: auto; }
table.tage td { padding: .25rem .9rem .25rem 0; border: 0; font-size: .86rem; }
table.tage td.datum { white-space: nowrap; font-variant-numeric: tabular-nums; }
table.jahr tr.gewaehlt td { background: var(--gruen-blass); }
table.jahr tr.gewaehlt td.person a { font-weight: 700; }
/* .vermerk gibt es auch in der Jahrestabelle - hier ausserhalb einer
Tabelle, deshalb ohne Praefix. */
.karte .vermerk {
display: inline-block;
margin-left: .4rem;
padding: 0 .35rem;
border: 1px solid var(--linie);
border-radius: .8rem;
font-size: .72rem;
color: var(--text-blass);
}
.karte .stern { color: var(--gruen); font-weight: 700; }
@media print {
.stand, .tagliste .tag { border-color: #999 !important; background: none !important; color: #000 !important; }
table.jahr tr.gewaehlt td { background: none !important; }
}
/* --- Kleinteile ---------------------------------------------------------- */
.regeln { margin: .2rem 0 1rem; padding-left: 1.15rem; font-size: .86rem; color: var(--text-blass); }
.regeln li { margin: .15rem 0; }
/* Fliesstext unter einer Tabelle. Nicht .zeichen nehmen - das ist ein
flex-Behaelter fuer Symbolkaestchen und zerreisst einen Absatz. */
.fussnote {
margin: .8rem 0 0;
max-width: 62rem;
font-size: .82rem;
line-height: 1.5;
color: var(--text-blass);
}
.fussnote strong { color: var(--text); }
.zeichen {
display: flex;
flex-wrap: wrap;
gap: .4rem .9rem;
font-size: .82rem;
color: var(--text-blass);
margin: .8rem 0 0;
}
.zeichen span { display: inline-flex; align-items: center; gap: .3rem; }
/*
* Die Legende in DENSELBEN Farben wie der Plan (Anwender, 12.10.2026). Bis
* dahin standen "Urlaub", "krank" ... dort als schlichter Text - die Regeln
* fuer die Farben gelten nur in den Planzellen (.zelle).
*/
.zeichen .abwesend {
display: inline-block; min-width: 1.6rem; padding: .1rem .45rem; border-radius: .2rem;
background: var(--grund); border: 1px solid var(--linie); color: var(--text-blass); font-weight: 600;
}
.zeichen .abwesend-urlaub { background: var(--fehler-blass); border-color: #eab9b5; color: #7d1a15; }
.zeichen .abwesend-krank { background: var(--fehler-blass); border-color: #eab9b5; color: #7d1a15; }
.zeichen .abwesend-kur { background: var(--warn-blass); border-color: #e6cf9e; color: #6b4600; }
.zeichen .abwesend-freistellung { background: #eef0fd; border-color: #c3c9f2; color: #303a86; }
.zeichen .abwesend-freizeitausgleich { background: #f3eefd; border-color: #d5c6f0; color: #4b2d80; }
.zeichen .freitext { color: var(--warn); font-weight: 600; }
.zeichen .leer { color: #c9d1ce; }
code {
background: var(--grund);
border: 1px solid var(--linie);
border-radius: .2rem;
padding: .05rem .3rem;
font-size: .87rem;
}
footer {
max-width: 78rem;
margin: 2rem auto 3rem;
padding: 0 1rem;
font-size: .84rem;
color: var(--text-blass);
}
/* --- Ausdruck ------------------------------------------------------------ */
@media print {
.kopf, .menue, footer, button, .knopf, .leiste, .nurbildschirm { display: none !important; }
body { background: #fff; font-size: 11pt; }
main { max-width: none; margin: 0; padding: 0; }
table { border: 1px solid #000; }
th, td { border-bottom: 1px solid #777; }
th { background: #eee !important; color: #000 !important; }
table.woche tr.gruppenkopf th { background: #ddd !important; color: #000 !important; }
/* Im Ausdruck traegt jede Abwesenheit dieselbe neutrale Darstellung -
sonst laesst sich aus der Farbe der Grund erraten. */
.zelle .abwesend { background: #fff !important; border-color: #999 !important; color: #000 !important; }
.druckkopf { display: block !important; margin: 0 0 .6rem; }
}
.druckkopf { display: none; }
/* --- Handy --------------------------------------------------------------- */
@media (max-width: 44rem) {
.kopf { padding: .65rem .9rem; }
.kopf h1 { font-size: .98rem; }
.kopf .wer { margin-left: 0; width: 100%; }
.menue { padding: 0 .6rem; }
main { margin: 1rem auto; }
.karte { padding: 1rem; }
}
/* --- Formularraster (Mitarbeiterverwaltung) ------------------------------ */
/* Felder nebeneinander, solange Platz ist. Kein festes Spaltenraster:
auf dem Handy soll eins pro Zeile stehen, am Schreibtisch drei. */
.felder {
display: flex;
flex-wrap: wrap;
gap: .8rem 1.1rem;
margin-top: .6rem;
}
.felder .feld {
display: flex;
flex-direction: column;
gap: .2rem;
min-width: 13rem;
}
.felder .feld > input,
.felder .feld > select { margin: 0; }
.felder .feld > .klein { margin: 0; }
/* Kasten und Beschriftung in einer Zeile, ohne dass der Haken springt. */
.schalterzeile {
display: inline-flex;
align-items: center;
gap: .4rem;
min-width: 14rem;
}
.schalterzeile input[type="checkbox"] { margin: 0; }
.schalterzeile label { margin: 0; font-weight: 400; }
/* Das Einmalpasswort. Gross und in gleicher Schrittweite, weil es
abgelesen oder vorgelesen wird - und weil es nur einmal zu sehen ist. */
.einmalpasswort {
margin: .5rem 0;
font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
font-size: 1.6rem;
font-weight: 700;
letter-spacing: .12em;
color: var(--gruen-dunkel);
-webkit-user-select: all;
user-select: all;
}
/* --- Protokolltabelle ---------------------------------------------------- */
table.protokoll { font-size: .84rem; }
table.protokoll th, table.protokoll td {
padding: .3rem .5rem;
vertical-align: top;
border-bottom: 1px solid var(--linie);
}
table.protokoll td a { color: var(--gruen); text-decoration: none; }
table.protokoll td a:hover { text-decoration: underline; }
/* Der Bereich als Marke davor - so ist auf einen Blick zu sehen, ob die
Zeile eine Anmeldung oder eine Datenaenderung ist. */
.bereichmarke {
display: inline-block;
margin-right: .35rem;
padding: 0 .4rem;
border-radius: .8rem;
background: var(--gruen-blass);
border: 1px solid var(--gruen-rand);
font-size: .74rem;
font-weight: 600;
color: var(--gruen-dunkel);
white-space: nowrap;
}
/* Ein geaendertes Feld: "PLZ: 32052 → 33604". Jedes auf eigener Zeile,
sonst laufen bei mitarbeiter/geaendert mehrere ineinander. */
.feldwert {
display: block;
font-variant-numeric: tabular-nums;
}
.feldwert.entfernt { color: var(--text-blass); text-decoration: line-through; }
/* --- Hilfsklassen -------------------------------------------------------- */
/*
* DIESER BLOCK GEHOERT ANS ENDE DER DATEI.
*
* Eine Hilfsklasse und eine Bauteilklasse haben dieselbe Spezifitaet -
* bei Gleichstand gewinnt die spaeter notierte Regel. Standen die Helfer
* weiter oben, schlug ".zeichen { display: flex }" das ".blockig" am
* selben Element, und die Angabe war wieder wirkungslos. Wer hier etwas
* ergaenzt, laesst den Block als Letztes stehen.
*/
/*
* Diese Klassen gab es zuerst nicht - die Werte standen als style="..." am
* Element. Das war wirkungslos: die Sicherheitskopfzeile setzt
* "style-src 'self'" OHNE 'unsafe-inline', und damit verwirft der Browser
* jede Stilangabe im Element. 95 Vorkommen in elf Seiten, still. Gefunden
* am 07.09.2026 an der Frage, warum ein negativer Resttag in der Historie
* nicht rot ist.
*
* Die Kopfzeile bleibt, wie sie ist. Umgekehrt waere es bequemer und
* schlechter.
*/
/* Abstaende. Drei Stufen, nicht fuenfzig Einzelwerte. */
.eng { margin: 0; }
.oben { margin-top: 1.15rem; }
.unten { margin-bottom: 1.15rem; }
/* Textabstufung */
.blass { color: var(--text-blass); }
.klein { font-size: .86rem; }
.normal { font-weight: 400; }
.fett { font-weight: 600; }
.sehr-fett { font-weight: 700; }
.warntext { color: var(--warn); }
.fehlertext { color: var(--fehler); }
.blockig { display: block; }
.hervor { background: var(--gruen-blass); }
.rand-warn { border-color: var(--warn); }
/* Ausrichtung */
.rechts, td.rechts, th.rechts { text-align: right; }
.links, td.links, th.links { text-align: left; }
.nowrap, td.nowrap, th.nowrap { white-space: nowrap; }
/*
* DIE ANTRAGSKACHEL - dicht, und der Name traegt sie.
*
* Gemessen am 28.09.2026: von 265 px Kartenhoehe waren 125 px Abstand.
* Gemeldet wurde es als "sehr viel weiss drin".
*
* Nur .antrag und .antragsteller werden angefasst. .karte, .unten, .oben
* und .leiste benutzt die ganze Anwendung - wer dort dreht, aendert
* Spesen, Gutscheine und Mitarbeiterverwaltung gleich mit.
*/
.karte.antrag { padding: .85rem 1.1rem; }
/*
* Erst alle Abstaende auf null, dann genau einen zwischen zwei Kindern.
* Sonst addieren sich margin-bottom des einen und margin-top des
* naechsten weiter zu Werten, die niemand geplant hat.
*/
.karte.antrag > * { margin-top: 0; margin-bottom: 0; }
.karte.antrag > * + * { margin-top: .55rem; }
/*
* Der Name ist die Auskunft, nach der man die Karte sucht - alles andere
* in der Zeile (Art, Anzahl, Gruppe) ist Beiwerk und bleibt blass.
*
* UNTERLEGT STATT GROESSER. Die erste Fassung vom 28.09.2026 hatte ihn auf
* 1,15rem gesetzt; der Anwender wollte ihn nicht groesser, sondern
* farblich abgesetzt. Das traegt weiter - die Schriftgroesse der Zeile
* bleibt, und die Karte wird dadurch keine Zeile hoeher.
*/
.karte.antrag .antragsteller {
display: inline-block;
padding: .15rem .5rem;
border-radius: 3px;
background: var(--gruen);
color: #fff;
}
/* Im Ausdruck ist Flaeche teuer und Farbe unzuverlaessig. */
@media print {
.karte.antrag .antragsteller {
background: none;
color: #000;
padding: 0;
}
}
/*
* Die eingeklappten Antragstage.
*
* Die Zusammenfassung traegt den Namen ein zweites Mal - im zugeklappten
* Zustand ist sie die einzige Zeile, die man sieht, und "29 Tage" ohne
* Namen davor sagt nichts. Sie sieht aus wie ein Knopf, weil sie einer
* ist.
*/
.antragstage > summary {
cursor: pointer;
padding: .45rem .6rem;
background: var(--gruen-blass);
border: 1px solid var(--gruen-rand);
border-radius: 4px;
list-style-position: inside;
}
.antragstage > summary:hover { background: var(--flaeche); }
/* Zugeklappt traegt die Kopfzeile der Karte den Namen schon. */
.antragstage:not([open]) > summary .nur-offen { display: none; }
/*
* AUFGEKLAPPT BLEIBT DIE ZEILE OBEN KLEBEN.
*
* Das war der eigentliche Befund vom 28.09.2026: bei 29 beantragten Tagen
* ist die Karte laenger als der Bildschirm, der Name steht ganz oben und
* ist nach dem ersten Scrollen weg - und dann entscheidet man 29 Zeilen
* lang, ohne zu sehen, um wen es geht. Deshalb traegt die Zusammenfassung
* den Namen und bleibt beim Scrollen stehen.
*/
.antragstage[open] > summary {
margin-bottom: .5rem;
position: sticky;
top: 0;
z-index: 2;
}
/* Kaestchen fuer "ausgewaehlte genehmigen/ablehnen" (19.10.2026) */
.antragstage th.auswahl,
.antragstage td.auswahl { width: 1%; text-align: center; white-space: nowrap; }
.antragstage td.auswahl input { width: 1.15rem; height: 1.15rem; margin: 0; cursor: pointer; }
/*
* BETRAEGE UND SUMMEN BRECHEN NICHT UM.
*
* Gemeldet am 21.09.2026 aus der Gutscheinkontrolle: in einem schmalen
* Fenster stand dort "30,00" in der einen und "€" in der naechsten Zeile.
* Das Eurozeichen gehoert zur Zahl; getrennt liest es sich wie eine
* eigene Spalte.
*
* Als Regel ueber das Merkmal statt ueber eine Klasse: dieselben zehn
* Stellen in Gutschein, Export, Spesen und Personalsicht tragen alle
* data-feld="betrag" oder "summe", und keine davon soll umbrechen.
*/
[data-feld="betrag"], [data-feld="summe"] { white-space: nowrap; }
/*
* Und die Knoepfe in der Gutscheinliste auch nicht - "Einlösen
* zurücknehmen" stand sonst zweizeilig im Knopf. Nur hier und nicht fuer
* alle Knoepfe: laengere Beschriftungen wie "Jetzt 14 Mails verschicken"
* sollen auf einem schmalen Bildschirm sehr wohl umbrechen duerfen. Die
* Tabelle steckt in .rahmen und schiebt sich zur Not seitlich.
*/
table[data-liste="gutscheine"] td button { white-space: nowrap; }
/* Ein Name, eine Zeile (Anwender, 01.10.2026) - dafuer sind die Spalten mit
den Ausfalltagen so schmal wie ihre Zahl; ihr Kopf darf umbrechen. */
table[data-liste="gutscheine"] th[scope="row"] { white-space: nowrap; }
table[data-liste="gutscheine"] th.schmal,
table[data-liste="gutscheine"] td[data-feld^="krank"],
table[data-liste="gutscheine"] td[data-feld="betrag"] { width: 1%; white-space: nowrap; }
table[data-liste="gutscheine"] th.schmal { white-space: normal; line-height: 1.2; }
/* Feldbreiten. Benannt nach dem Inhalt, nicht nach der Zahl - eine
Jahreszahl braucht anderen Platz als eine Tageszahl. */
.w-jahr { width: 6.5rem; }
.w-tage { width: 5rem; }
.w-tage-klein { width: 4.5rem; }
.w-winzig { width: 2.5rem; }
.w-voll { width: 100%; }
/* Anordnung in einer Leiste */
.breit { flex: 1; }
.mindest-12 { min-width: 12rem; }
.mindest-14 { min-width: 14rem; }
.luecken { gap: .5rem; }
.luecken-klein{ gap: .4rem; }
.unten-aus { align-items: flex-end; }
/* --------------------------------------------------------------------------
Schichtfolge ziehen (assets/reihenfolge.js)
Steht am Ende der Datei, weil hier Hilfsklassen stehen: eine Hilfsklasse
und eine Bauteilklasse haben dieselbe Spezifitaet, und dann gewinnt die
spaetere. Das ist am 07.09.2026 einmal schiefgegangen.
Die Klassen setzt das Skript. Ohne Skript greift keine davon, und die
Tabelle sieht aus wie jede andere - so ist es gemeint.
-------------------------------------------------------------------------- */
tr.ziehbar { cursor: grab; }
tr.ziehbar:active { cursor: grabbing; }
tr.wird-gezogen { opacity: 0.4; }
/* Die Linie zeigt, wo die Zeile landet. Ueber der oberen Haelfte davor,
ueber der unteren dahinter - ohne diese Unterscheidung kommt man nie an
die letzte Position. */
tr.ziel-oben > td { box-shadow: inset 0 2px 0 0 var(--gruen); }
tr.ziel-unten > td { box-shadow: inset 0 -2px 0 0 var(--gruen); }
/* Der Griff macht sichtbar, dass die Zeile gezogen werden kann. */
tr.ziehbar > td:first-child::before {
content: "⠿";
margin-right: .5em;
color: var(--text-blass);
cursor: grab;
}
/* --------------------------------------------------------------------------
Jahresbescheinigung fuer das Finanzamt (bescheinigung.php)
Ein Blatt je Bescheinigung. Der Altbestand setzte jede Zeile mit fester
Position (setY/setX/Cell) - wer dort einen Satz aenderte, verschob alles
darunter. Hier macht der Browser den Umbruch, und "Drucken" -> "Als PDF
speichern" liefert dasselbe Blatt.
-------------------------------------------------------------------------- */
/*
* Ein Blatt, das gedruckt wird. Die Jahresbescheinigung und der
* Tankgutschein haben dieselbe Form - Rahmen auf dem Bildschirm, auf dem
* Papier ein eigenes Blatt ohne Rahmen. Deshalb zwei Namen und eine Regel:
* ein zweiter Block nur fuer den Namen waere doppelte Pflege.
*/
.bescheinigung,
.gutschein-blatt {
background: var(--flaeche);
border: 1px solid var(--linie);
border-radius: var(--radius);
padding: 2rem 2.5rem;
margin: 1.5rem 0;
max-width: 48rem;
line-height: 1.7;
}
.bs-kopf { text-align: center; font-weight: 700; letter-spacing: .02em; margin: 0; }
.bs-unterkopf { text-align: center; margin: .1rem 0 1.4rem; }
.bs-titel { text-align: center; margin: 0 0 1.8rem; font-size: 1.15rem; }
.bs-zeile { margin: 0 0 1.4rem; }
.bs-absatz { margin: 0 0 1.6rem; }
.bs-aufwand { margin-top: 2.5rem; }
/* Die Linien zum Ausfuellen von Hand. */
.bs-linie {
display: inline-block;
min-width: 12rem;
border-bottom: 1px solid var(--text);
height: 1.2em;
vertical-align: bottom;
}
.bs-fuss {
display: flex;
gap: 2rem;
margin-top: 3.5rem;
font-size: .86rem;
}
.bs-fuss > div { flex: 1; }
.bs-fuss .bs-linie { min-width: 0; width: 100%; }
.bs-tabelle { width: 100%; font-size: .86rem; }
.bs-tabelle th { text-align: left; border-bottom: 1px solid var(--text); }
.bs-tabelle .rechts, .bs-tabelle th.rechts { text-align: right; }
.bs-tabelle tfoot td { border-top: 1px solid var(--text); }
@media print {
/*
* Jede Bescheinigung auf ein eigenes Blatt, und die letzte ohne
* Leerseite dahinter. break-after ist der heutige Name, page-break-after
* der aeltere - beide, damit es auch in aelteren Browsern umbricht.
*/
.bescheinigung,
.gutschein-blatt {
border: none;
padding: 0;
margin: 0;
max-width: none;
page-break-after: always;
break-after: page;
}
.bescheinigung:last-of-type {
page-break-after: auto;
break-after: auto;
}
/* Eine Tabelle nicht mitten in einer Zeile trennen. */
.bs-tabelle tr { page-break-inside: avoid; break-inside: avoid; }
}
/* ---------------------------------------------------------------------------
* Auswertungen: Balkengrafik und Ranglisten
*
* Die Farben der Datenreihen stehen HIER und nicht im Markup - die
* Sicherheitskopfzeile setzt style-src 'self' ohne 'unsafe-inline'. Vier
* Reihen genuegen; balkengrafik() schneidet mehr ab.
* ------------------------------------------------------------------------- */
.grafik { width: 100%; height: auto; display: block; }
.grafik .g-raster { stroke: var(--linie); stroke-width: 1; }
.grafik .g-linie { stroke: var(--text-blass); stroke-width: 1; }
.grafik .g-achse,
.grafik .g-rubrik { fill: var(--text-blass); font: 11px var(--schrift); }
.grafik .g-einheit { fill: var(--text-blass); font: 600 11px var(--schrift); }
.grafik .g-luecke { fill: var(--warn); font: 600 12px var(--schrift); }
.grafik .g-balken { stroke: #ffffff; stroke-width: .5; }
/* Vier Abstufungen der Hausfarbe, von blass (aeltestes Jahr) nach satt. */
.grafik .g-r0 { fill: #b9d9d0; }
.grafik .g-r1 { fill: #74b6a5; }
.grafik .g-r2 { fill: var(--gruen); }
.grafik .g-r3 { fill: var(--gruen-dunkel); }
.grafik-legende { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem;
margin: .3rem 0 0; padding: 0; list-style: none;
font-size: .84rem; color: var(--text-blass); }
.grafik-legende li { display: flex; align-items: center; gap: .35rem; }
.grafik-legende .marke { width: .8rem; height: .8rem; border-radius: 2px;
display: inline-block; }
.grafik-legende .m0 { background: #b9d9d0; }
.grafik-legende .m1 { background: #74b6a5; }
.grafik-legende .m2 { background: var(--gruen); }
.grafik-legende .m3 { background: var(--gruen-dunkel); }
/* Die Ranglisten stehen nebeneinander, solange Platz ist. */
.ausw-spalten { display: grid; gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.rangliste { width: 100%; }
.rangliste td,
.rangliste th { padding: .18rem .4rem; }
.rangliste .platz { color: var(--text-blass); text-align: right; width: 2.2rem; }
.rangliste tbody tr:nth-child(2n) { background: var(--grund); }
/*
* Vertraulichkeitsband. Steht ueber jeder Auswertung mit Gesundheitsdaten -
* am Bildschirm und im Ausdruck. Begruendung: ANZEIGEREGELN.md, Abschnitt
* "Auswertungen".
*/
.vertraulich {
border-left: 4px solid var(--fehler);
background: var(--fehler-blass);
padding: .5rem .7rem;
border-radius: var(--radius);
margin: 0 0 .8rem;
font-size: .9rem;
}
.vertraulich strong { color: var(--fehler); }
@media print {
/* Eine Grafik nicht auf zwei Blaetter reissen. */
.grafik, .grafik-legende { page-break-inside: avoid; break-inside: avoid; }
/* Der Vertraulichkeitshinweis muss auf dem Papier stehen, nicht nur am
* Bildschirm - er ist der Grund, warum das Blatt nicht herumliegen darf. */
.vertraulich { border: 1px solid #000; background: none; }
}
/* Die Tabellen der Auswertungen: dichter als die Grundeinstellung, weil
* dort fuenfzehn Spalten nebeneinander stehen.
*
* WARUM DIESE KLASSE UEBERHAUPT EINE REGEL HAT: darstellung.sh prueft, dass
* jede benutzte Klasse hier eine hat. Die erste Fassung dieser Seite trug
* class="tabelle eng" - "tabelle" war eine Klasse, die es nirgends gab, und
* die Pruefung hat sie gemeldet. Eine Klasse ohne Regel ist entweder ein
* Tippfehler oder ein Rest; beides gehoert weg. */
table.auswertung { font-size: .86rem; }
table.auswertung th,
table.auswertung td { padding: .28rem .45rem; }
table.auswertung caption { caption-side: top; text-align: left; padding: 0 0 .35rem; }
/*
* Die Fehltageliste: zwei Zeilen gehoeren zu EINER Person, deshalb wird je
* Person gebandet und nicht je Zeile. Ein Band, das durch eine Person
* hindurchgeht, trennt genau das, was zusammenhaengt - dieselbe Ueberlegung
* wie beim PDF desselben Blattes.
*/
table.fehltage td { padding: .16rem .3rem; font-variant-numeric: tabular-nums; }
table.fehltage tbody tr:nth-child(4n+1) td,
table.fehltage tbody tr:nth-child(4n+2) td { background: var(--grund); }
/* --- Jahreskalender im Urlaubsantrag ------------------------------------- */
/*
* Zwoelf Monatsbloecke nebeneinander, so viele wie passen. Kein festes
* Raster mit Spaltenzahl: auf einem schmalen Bildschirm sollen es zwei
* sein, auf einem breiten vier, ohne dass jemand eine Grenze pflegt.
*/
.jahreskalender {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: 1rem;
margin-top: .75rem;
}
.jahreskalender .monat h3 {
margin: 0 0 .35rem;
font-size: .95rem;
}
/*
* minmax(0, 1fr) UND NICHT 1fr.
*
* 1fr heisst minmax(auto, 1fr) - die Spalte bleibt mindestens so breit, wie
* ihr Inhalt braucht. In kuenftigen Monaten sind die Werktage Beschriftungen
* zu einem Ankreuzfeld und die Wochenenden nicht; damit hatten Samstag und
* Sonntag ein anderes Mindestmass, wurden 16 px breiter als der Rest, und
* jede Zahl ab Freitag stand unter dem falschen Wochentag. In vergangenen
* Monaten ist alles gleich - deshalb sahen die gut aus.
*
* Gemeldet vom Anwender am 15.09.2026, gemessen im Browser:
* Kopf 38.5 38.5 38.5 38.5 38.5 38.5 38.5
* Tage 38.5 38.5 38.5 38.5 38.5 54.5 54.5
*/
.jahreskalender .wochentage,
.jahreskalender .tage {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 2px;
}
.jahreskalender .wochentage span {
text-align: center;
font-size: .7rem;
color: var(--text-blass);
padding-bottom: .15rem;
}
/*
* Die Ankreuzfelder selbst sind unsichtbar, die Beschriftung ist der Tag.
* NICHT display:none - dann waeren sie fuer die Tastatur nicht mehr
* erreichbar und die Seite ohne Maus unbedienbar. Sie liegen stattdessen
* unter ihrer Beschriftung.
*/
.jahreskalender .tagwahl {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
margin: 0;
}
.jahreskalender .tag,
.jahreskalender .leer {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1;
font-size: .8rem;
border-radius: 4px;
user-select: none;
}
.jahreskalender .tag.waehlbar {
cursor: pointer;
background: var(--gruen-blass);
color: var(--text);
}
.jahreskalender .tag.waehlbar:hover {
background: var(--gruen);
color: #fff;
}
/* Gewaehlt: der Haken steckt im Feld VOR der Beschriftung. */
.jahreskalender .tagwahl:checked + .tag {
background: var(--gruen);
color: #fff;
font-weight: 600;
}
/* Die Tastatur braucht einen sichtbaren Rahmen - ohne ihn sieht man beim
Durchtabben nicht, wo man ist. */
.jahreskalender .tagwahl:focus-visible + .tag {
outline: 2px solid var(--gruen);
outline-offset: 1px;
}
/* Die Gruppe ist an diesem Tag schon voll. Waehlbar bleibt er - entscheiden
tut der Leitstand, nicht die Farbe. */
.jahreskalender .tag.voll {
background: var(--warn-blass);
color: var(--warn);
}
.jahreskalender .tag.gesperrt {
color: var(--text-blass);
background: var(--grund);
}
.jahreskalender .tag.eigen {
background: var(--gruen);
color: #fff;
opacity: .55;
}
.jahreskalender .tag.stand-beantragt { background: var(--warn); color: #fff; opacity: .75; }
.jahreskalender .tag.stand-entwurf { background: var(--warn-blass); color: var(--warn); opacity: 1; }
.legende .muster {
display: inline-block;
width: .8rem;
height: .8rem;
border-radius: 3px;
margin: 0 .2rem 0 .8rem;
vertical-align: -1px;
}
.legende .muster.waehlbar { background: var(--gruen-blass); }
.legende .muster.voll { background: var(--warn-blass); }
.legende .muster.eigen { background: var(--gruen); opacity: .55; }
.legende .muster.gesperrt { background: var(--grund); border: 1px solid var(--linie); }
/* --- Uebersicht: zwei Wochen nebeneinander -------------------------------- */
/*
* Auf einem breiten Bildschirm stehen die beiden Wochen nebeneinander, auf
* einem schmalen untereinander. Kein Umbruchpunkt in Pixeln: auto-fit
* entscheidet das anhand dessen, was wirklich passt.
*/
.zweiwochen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
gap: 1rem;
margin-top: .5rem;
}
.zweiwochen h3 { margin: 0 0 .25rem; font-size: .95rem; }
.zweiwochen table { width: 100%; }
.zweiwochen td { padding: .2rem .4rem; }
.zweiwochen tr.wochenende td { color: var(--text-blass); }
.zweiwochen tr.heute td { background: var(--gruen-blass); font-weight: 600; }
.zweiwochen .schicht { font-weight: 600; }
.zweiwochen .abwesend { color: var(--gruen); }
.zweiwochen .feiertag { color: var(--warn); }
/* --- Uebersicht: das Monatsblatt ------------------------------------------ */
/*
* Baut auf dem Jahreskalender des Urlaubsantrags auf - dieselbe Rasterung,
* nur ein Monat und mit zwei Zeilen im Feld: die Tageszahl und das Kuerzel
* dessen, was ansteht.
*/
.dienstmonat {
grid-template-columns: minmax(0, 24rem);
}
.dienstmonat .tag {
flex-direction: column;
gap: 0;
aspect-ratio: auto;
padding: .25rem 0;
min-height: 2.6rem;
background: var(--grund);
}
.dienstmonat .tag .zahl { font-size: .75rem; color: var(--text-blass); line-height: 1.1; }
.dienstmonat .tag .was { font-size: .78rem; font-weight: 600; line-height: 1.2; }
.dienstmonat .tag.schicht { background: var(--gruen-blass); }
.dienstmonat .tag.schicht .was { color: var(--gruen-dunkel); }
.dienstmonat .tag.abwesend { background: var(--gruen); }
.dienstmonat .tag.abwesend .zahl,
.dienstmonat .tag.abwesend .was { color: #fff; }
/* Ein beantragter Tag ist noch keine Zusage - blasser als ein genehmigter. */
.dienstmonat .tag.abwesend.stand-beantragt { background: var(--warn); }
.dienstmonat .tag.abwesend.stand-entwurf { background: var(--warn-blass); }
.dienstmonat .tag.abwesend.stand-entwurf .zahl,
.dienstmonat .tag.abwesend.stand-entwurf .was { color: var(--warn); }
.dienstmonat .tag.feiertag { background: var(--warn-blass); }
.dienstmonat .tag.feiertag .was { color: var(--warn); }
/*
* EIN TAG OHNE EINTRAG.
*
* Keine Schicht, keine Abwesenheit, kein Feiertag - das Feld bleibt leer
* und sieht anders aus als eines mit Inhalt. Die Klasse hat vorher keine
* Regel gehabt; gefunden von pruefen/darstellung.sh, die jede Klasse im
* HTML gegen die Stildatei haelt.
*/
.dienstmonat .tag.ohne {
background: var(--flaeche);
color: var(--text-blass);
}
/*
* EIN TAG IN EINER NOCH NICHT FREIGEGEBENEN WOCHE.
*
* Nicht leer, sondern erkennbar anders: schraffiert und blass, mit einem
* Punkt darin. Ein leeres Feld wuerde "ich habe frei" heissen, und genau
* das soll es nicht heissen - der Anwender hat sich am 17.09.2026
* ausdruecklich gegen die stille Variante entschieden. Der Titel am
* Element nennt den Grund im Klartext.
*/
.dienstmonat .tag.gesperrt {
color: var(--text-blass);
background: repeating-linear-gradient(
45deg, var(--flaeche), var(--flaeche) 3px,
var(--grund) 3px, var(--grund) 6px);
}
.dienstmonat .tag.wochenende { background: transparent; }
.dienstmonat .tag.heute { outline: 2px solid var(--gruen); outline-offset: -2px; }
.legende .muster.schicht { background: var(--gruen-blass); }
.legende .muster.abwesend { background: var(--gruen); }
.legende .muster.feiertag { background: var(--warn-blass); }
/* --- Spesen: Eingabeblock und Kennzeichen --------------------------------- */
/*
* Der Kasten, in dem etwas EINGETRAGEN wird, sieht anders aus als die
* Kaesten, die etwas zeigen. Vom Anwender am 15.09.2026 gewuenscht.
*
* Nicht nur die Flaeche: ein farbiger Streifen links traegt dieselbe
* Aussage auch dort, wo Hintergrundfarben nicht ankommen - im Ausdruck,
* bei hohem Kontrast, auf schlechten Bildschirmen.
*/
.karte.eingabe {
background: var(--gruen-blass);
border-left: 4px solid var(--gruen);
}
.karte.eingabe input,
.karte.eingabe select {
background: var(--flaeche);
}
/*
* EIN KENNZEICHEN BRICHT NIE.
*
* Im Bestand steht "BI - VP 8008" mit zwei Leerzeichen, und jedes davon ist
* fuer den Browser eine Umbruchstelle. Gemessen bei 1100 px Fenster: alle
* achtzehn Fahrzeugzellen zweizeilig, Zeilenhoehe 66 statt 42 px. Ein
* Kennzeichen in zwei Zeilen liest sich wie zwei Kennzeichen.
*
* Auch der Tag bleibt zusammen - "Mo 03.08." ist eine Angabe, keine zwei.
*/
table[data-liste="monat"] td:nth-child(1),
table[data-liste="monat"] td:nth-child(3),
table[data-liste="monat"] th:nth-child(1),
table[data-liste="monat"] th:nth-child(3) {
white-space: nowrap;
}
/* Feste Koepfe nicht im Druck: der Rahmen schnitte lange Tabellen sonst
auf Bildschirmhoehe ab, und der Kopf stuende auf jeder Seite oben. */
@media print {
.oben-fest { position: static; }
.leiste-fest { position: static; border-bottom: 0; }
thead th { position: static; transform: none !important; }
}
/*
* Tagesbelegung einer Gruppe (gruppe-woche.php, 08.10.2026): fuenf Tage
* nebeneinander, darunter alle des Bereichs mit ihrer Woche.
*/
.tagesbelegung { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; align-items: start; }
@media (max-width: 62rem) { .tagesbelegung { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); } }
.tag-spalte { padding: .7rem .75rem; min-width: 0; }
.tag-spalte h3 { font-size: .98rem; display: flex; align-items: baseline; gap: .4rem; }
.tag-spalte h3 .datum { font-size: .8rem; font-weight: 400; color: var(--text-blass); }
.tag-spalte h3 .anzahl { margin-left: auto; font-size: .8rem; color: var(--text-blass); }
.tag-spalte .feiertag { color: var(--fehler); }
.tag-spalte ul.belegung { list-style: none; margin: .3rem 0 0; padding: 0; }
.tag-spalte ul.belegung li { padding: .25rem .35rem; border-bottom: 1px solid var(--linie); line-height: 1.3; cursor: grab; }
.tag-spalte ul.belegung li a { color: var(--text); font-weight: 600; text-decoration: none; display: block; }
.tag-spalte ul.belegung li.gast { border-left: 3px dashed var(--gruen-rand); }
/* Abwesend an diesem Tag: rot wie Urlaub/krank im Wochenplan (08.10.2026). Nicht ziehbar. */
.tag-spalte ul.belegung li.abwesend { background: var(--fehler-blass); border-left: 3px solid var(--fehler); color: #7d1a15; cursor: default; }
.tag-spalte ul.belegung li.abwesend a { color: #7d1a15; }
.tag-spalte ul.belegung li.abwesend.offen { background: var(--flaeche); border-left-style: dashed; }
.tag-spalte ul.belegung li.abwesend[draggable="true"] { cursor: grab; }
/* Herausnehmen (08.10.2026): das x rechts an jeder eingeteilten Person. */
.tag-spalte ul.belegung li a.raus { float: right; display: inline-block; margin-left: .3rem; padding: 0 .35rem;
font-weight: 400; line-height: 1.3; color: var(--text-blass); border-radius: 4px; text-decoration: none; }
.tag-spalte ul.belegung li a.raus:hover { background: var(--fehler-blass); color: var(--fehler); }
.tag-spalte form.hinzu { display: flex; gap: .3rem; margin-top: .5rem; }
.tag-spalte form.hinzu select { flex: 1 1 auto; min-width: 0; }
table.pool td.name { font-weight: 600; white-space: nowrap; }
table.pool tbody tr[draggable="true"] { cursor: grab; }
table.pool td.pool-tag { line-height: 1.25; }
table.pool td.pool-tag .pool-gruppe { display: block; white-space: nowrap; }
table.pool td.pool-tag.hier { background: var(--gruen-blass); }
table.pool td.pool-tag.hier .pool-gruppe { font-weight: 600; color: var(--gruen-dunkel); }
table.pool th .datum { display: block; font-size: .75rem; font-weight: 400; color: var(--text-blass); }
table.pool .abwesend { display: inline-block; min-width: 1.6rem; padding: 0 .3rem; border: 1px solid transparent; border-radius: 4px; font-size: .78rem; font-weight: 600; text-align: center; }
table.pool .abwesend-urlaub, table.pool .abwesend-krank, table.pool .abwesend-marke { background: var(--fehler-blass); border-color: #eab9b5; color: #7d1a15; }
table.pool .abwesend-kur { background: var(--warn-blass); border-color: #e6cf9e; color: #6b4600; }
table.pool .abwesend-freistellung { background: #eef0fd; border-color: #c3c9f2; color: #303a86; }
table.pool .abwesend-freizeitausgleich { background: #f3eefd; border-color: #d5c6f0; color: #4b2d80; }
table.pool .abwesend.offen { background: var(--flaeche); border-style: dashed; }
table.pool .leer { color: #c9d1ce; }
.zieht { opacity: .5; }
/* Der Gruppenname als Verweis auf die Tagesbelegung - sieht aus wie der Name, nicht wie ein Verweis. */
a.gruppen-verweis { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
a.gruppen-verweis:hover { border-bottom-style: solid; }
@media print { a.gruppen-verweis { border-bottom: 0; } }
/*
* Jahreskalender einer Person (jahreskalender.php, 09.10.2026): zwoelf
* Monate untereinander, Tage 1-31 nebeneinander - wie der Fehltagekalender
* aus Taris. Farben wie in der Monatsuebersicht.
*
* EIGENE KLASSE, die sonst NIRGENDS vorkommt: zuerst hiess sie "jahr" -
* die tragen Mitarbeiterliste, Gesamtuebersicht und Historie, und alle drei
* bekamen am 12.10.2026 kleine Schrift, Rahmen und zentrierte Zellen mit.
* Danach "jahreskalender" - so heisst das Raster im Urlaubsantrag
* (display: grid), und die Tabelle zerfiel. Vor einem neuen Klassennamen:
* grep in stil.css UND in allen Seiten.
*/
table.personenjahr { font-size: .74rem; border-collapse: collapse; }
table.personenjahr th, table.personenjahr td { padding: .15rem .1rem; border: 1px solid var(--linie); text-align: center; }
table.personenjahr th.tag { min-width: 1.75rem; background: var(--grund); font-weight: 600; }
table.personenjahr th.monat { text-align: left; padding: .15rem .45rem; background: var(--grund); white-space: nowrap; }
table.personenjahr td.zelle { height: 1.6rem; }
table.personenjahr td.zelle.wochenende { background: #eceff0; } /* grau, nicht rosa: Urlaub ist seit dem 08.10. rot */
table.personenjahr td.zelle.feiertag { background: #fdf8ec; }
table.personenjahr td.zelle.kein-tag { background: #d5dbd9; }
table.personenjahr th.summe, table.personenjahr td.summe { min-width: 2.2rem; font-weight: 600; background: var(--grund); }
table.personenjahr tfoot th, table.personenjahr tfoot td { border-top: 2px solid var(--text-blass); }
table.personenjahr .marke { color: var(--text-blass); font-size: .7rem; }
table.personenjahr .abwesend, .jahr-legende .abwesend {
display: inline-block; min-width: 1.4rem; padding: 0 .15rem; border: 1px solid transparent;
border-radius: 3px; font-weight: 600; font-size: .72rem;
}
table.personenjahr .abwesend-urlaub, table.personenjahr .abwesend-krank,
.jahr-legende .abwesend-urlaub, .jahr-legende .abwesend-krank { color: #7d1a15; background: var(--fehler-blass); border-color: #eab9b5; }
table.personenjahr .abwesend-kur, .jahr-legende .abwesend-kur { color: #6b4600; background: var(--warn-blass); border-color: #e6cf9e; }
table.personenjahr .abwesend-freistellung, .jahr-legende .abwesend-freistellung { color: #303a86; background: #eef0fd; border-color: #c3c9f2; }
table.personenjahr .abwesend-freizeitausgleich, .jahr-legende .abwesend-freizeitausgleich { color: #4b2d80; background: #f3eefd; border-color: #d5c6f0; }
table.personenjahr .abwesend.offen { background: var(--flaeche); border-style: dashed; }
@media print { table.personenjahr { font-size: .62rem; } table.personenjahr th.tag { min-width: 0; } }
/* Zuschlaege als Stueckzahl unter dem Betrag (Spesen, 12.10.2026). */
/* Umbrechbar zwischen den Teilen - nicht nowrap, sonst laeuft die Liste der
Spesenfreigabe rechts aus dem Kasten (12.10.2026). */
td .stueck { display: block; font-size: .72rem; font-weight: 400; color: var(--text-blass); white-space: normal; }
/* Seitenwahl im Protokoll (12.10.2026): Nummern, erste/letzte, Sprungfeld. */
.seitenwahl { flex-wrap: wrap; gap: .35rem; }
.seitenwahl .seite-nr { min-width: 2.4rem; padding-left: .5rem; padding-right: .5rem; text-align: center; }
.seitenwahl .seite-jetzt {
display: inline-block; min-width: 2.4rem; padding: .45rem .5rem; text-align: center;
border-radius: var(--radius); background: var(--gruen); color: #fff; font-weight: 700;
}
/*
* Suche ueber alles (14.10.2026): das Feld DIREKT rechts neben der letzten
* Kachel - als weiteres Glied der Kachelzeile, mittig mit ihr. Zuerst stand
* es am rechten Fensterrand; das war dem Anwender zu weit weg.
* Die Trefferliste steht in suche.php.
*/
.menue .suche-kopf { display: flex; gap: .3rem; align-items: center; margin-left: .3rem; }
.menue .suche-kopf input { width: 13rem; padding: .4rem .55rem; font-size: .88rem; }
.menue .suche-kopf button { padding: .4rem .7rem; font-size: .86rem; }
@media (max-width: 44rem) {
.menue .suche-kopf { flex: 1 1 100%; justify-content: center; margin-left: 0; }
}
.treffer h3 { display: flex; align-items: baseline; gap: .5rem; }
.trefferliste { list-style: none; margin: .3rem 0 0; padding: 0; }
.trefferliste li {
display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .3rem 1rem;
padding: .45rem .3rem; border-bottom: 1px solid var(--linie);
}
.trefferliste li:last-child { border-bottom: 0; }
.trefferliste li.ausgeschieden .treffer-wer strong { color: var(--text-blass); }
.trefferliste .treffer-wer { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.trefferliste .treffer-wege { display: flex; flex-wrap: wrap; gap: .3rem; font-size: .84rem; }
/* Die Wege als kleine Knoepfe - schnell zu treffen, ruhig im Bild. */
.trefferliste .treffer-wege a {
padding: .2rem .55rem; border: 1px solid var(--gruen-rand); border-radius: var(--radius);
color: var(--gruen-dunkel); text-decoration: none; background: var(--flaeche); white-space: nowrap;
}
.trefferliste .treffer-wege a:hover { background: var(--gruen-blass); }
.menue .suche-kopf input { margin-top: 0; }
.trefferliste mark { background: #fff1b8; color: inherit; padding: 0 .05rem; border-radius: 2px; }
/* Der Rueckweg zur letzten Trefferliste, neben dem Suchfeld (14.10.2026). */
.menue .suche-kopf .suche-zurueck { font-size: .82rem; color: var(--gruen-dunkel); white-space: nowrap; margin-left: .3rem; }
/* Das Suchwort nach dem Sprung aus der Suche (assets/suche-markieren.js). */
mark.such-treffer { background: #ffe066; color: inherit; padding: 0 .05rem; border-radius: 2px; box-shadow: 0 0 0 1px #e0b400; }
|