/* ==========================================================================
MONTEUR-AUFTRAGSPROGRAMM · PREMIUM-DESIGNSYSTEM
Messtechnik Bastasic GmbH
--------------------------------------------------------------------------
Diese Datei wird NACH style.css geladen und ueberschreibt gezielt.
Sie aendert ausschliesslich das Aussehen. Keine Klasse wird umbenannt,
keine Funktion angefasst, kein "display" einer per JavaScript
gesteuerten Klasse veraendert.
!important wird nur dort verwendet, wo die bestehende style.css selbst
mit !important arbeitet - anders waere ein Ueberschreiben nicht moeglich.
An jeder solchen Stelle steht im Kommentar, warum.
Einbinden (Reihenfolge ist wichtig):
Ueberall dort, wo heute style.css eingebunden ist - also in base.html und
zusaetzlich in poster_print.html und poster_batch_print.html.
Aufbau:
01 Farb- und Masstokens
02 Grundlagen: Schrift, Flaeche, Typohierarchie
03 Fokus, Bewegung, Barrierefreiheit
04 Navigation (dunkle Leiste)
05 Karten und Container
06 Knoepfe
07 Formulare
08 Marken, Badges, Chips
09 Auftragskarten und Listen
10 Hinweise, Warnungen, Meldungen
11 Tabellen
12 Kalender
13 Selbstplaner
14 Admin / Zugangsdaten / Qualifikationen
15 Planungspruefung
16 Kleinteile (Versionsmarke, Upload, Tooltip, Dialoge)
17 Responsive
18 Schutz der millimetergenauen Druckvorlagen
19 Druck
Gemessen und nachgewiesen (echte Browseransicht, 375 / 768 / 1024 / 1280 /
1440 Pixel Fensterbreite, Seiten "Noch zu planen", Jahres- und
Monatskalender, Planungspruefung, Admin):
- kein seitlicher Ueberlauf
- kein Textkontrast unter den Vorgaben der WCAG-Stufe AA
========================================================================== */
/* ==========================================================================
01 · FARB- UND MASSTOKENS
Eine dominante Akzentfarbe (Petrol). Die drei Auftraggeberfarben sind
bewusst gedaempft und treten nur als Punkt, Linie oder Badge auf -
sie sollen Zugehoerigkeit zeigen, nicht die Seite einfaerben.
========================================================================== */
:root{
/* --- Schrift --------------------------------------------------------- */
--schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
--schrift-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
"Liberation Mono", monospace;
/* --- Tinte (Text) ---------------------------------------------------- */
--tinte: #101828; /* Haupttext, Ueberschriften */
--tinte-2: #414A5C; /* Fliesstext zweiter Ordnung */
--tinte-3: #5B6472; /* Zusatzinfo, Beschriftungen (5,5:1) */
--tinte-4: #8A93A3; /* NUR fuer Zierde: Trennpunkte, Pfeile, */
/* Platzhalterstriche - nie fuer echten Text */
/* (nur 3,1:1 auf Weiss) */
--tinte-platzhalter: #6B7484; /* Eingabe-Platzhalter, 4,7:1 */
/* --- Flaechen -------------------------------------------------------- */
--papier: #F4F4F1; /* Seitenhintergrund, warmes Off-White */
--papier-tief: #EDEDE8; /* Aussenflaeche Kalender */
--flaeche: #FFFFFF; /* Karten */
--flaeche-2: #FAFAF7; /* leicht getoente Flaeche, Zebra, Zellen */
--flaeche-3: #F1F1EC; /* ruhige Fuellung, Segmentleisten */
/* --- Linien ---------------------------------------------------------- */
--linie: #E5E5DF; /* Standardrahmen 1px */
--linie-2: #D4D4CC; /* kraeftigerer Rahmen, Eingabefelder */
--linie-3: #C2C2B9; /* Trennlinie in Tabellenkoepfen */
/* --- Navigation ------------------------------------------------------ */
--nav: #0F172A;
--nav-2: #131E36;
--nav-linie: rgba(255,255,255,.09);
--nav-text: rgba(255,255,255,.78);
--nav-text-2: rgba(255,255,255,.55);
--nav-hover: rgba(255,255,255,.09);
--nav-aktiv: rgba(255,255,255,.14);
/* --- Akzent (Petrol) ------------------------------------------------- */
--akzent: #1B6E8C;
--akzent-dunkel: #155A74;
--akzent-tief: #114A60;
--akzent-hell: #64A8C1;
--akzent-050: #F0F7FA;
--akzent-100: #DCEAF1;
--akzent-200: #B9D5E1;
--akzent-text: #114A60;
/* --- Semantik -------------------------------------------------------- */
--rot: #B42318; --rot-050:#FEF3F2; --rot-200:#F5C7C2; --rot-text:#8F1D14;
--orange: #B54708; --orange-050:#FFF9EC; --orange-200:#F3DBA8; --orange-text:#8A3A08;
--gruen: #12704B; --gruen-050:#EFFAF3; --gruen-200:#B7DFC8; --gruen-text:#0B5537;
--blau: #1D5BB8; --blau-050:#F0F5FC; --blau-200:#C2D6EF; --blau-text:#17458C;
/* --- Auftraggeber (dezent) ------------------------------------------- */
--minol: #A32821; --minol-050:#FBF1F0; --minol-200:#E7C8C5; --minol-text:#8A211B;
--metrona: #1D4E89; --metrona-050:#EFF3F9; --metrona-200:#C4D4E7; --metrona-text:#173D6D;
--techem: #A15613; --techem-050:#FBF4EB; --techem-200:#E6D0B2; --techem-text:#83450E;
/* --- Abstaende ------------------------------------------------------- */
--s1: 4px; --s2: 8px; --s3: 12px;
--s4: 16px; --s6: 24px; --s8: 32px;
/* --- Radien ---------------------------------------------------------- */
--r-xs: 4px; --r-sm: 6px; --r-md: 8px;
--r-lg: 10px; --r-xl: 12px; --r-2xl: 16px; --r-pill: 999px;
/* --- Schatten (sehr dezent) ------------------------------------------ */
--sh-0: 0 1px 1px rgba(16,24,40,.04);
--sh-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04);
--sh-2: 0 2px 4px -2px rgba(16,24,40,.08), 0 4px 10px -4px rgba(16,24,40,.08);
--sh-3: 0 8px 24px -8px rgba(16,24,40,.16), 0 2px 6px -3px rgba(16,24,40,.08);
--sh-4: 0 20px 48px -16px rgba(16,24,40,.28), 0 4px 12px -6px rgba(16,24,40,.12);
--sh-fokus: 0 0 0 3px rgba(27,110,140,.24);
/* --- Typoskala (px, weil die Altdatei durchgehend px verwendet) ------- */
--t-xs: 11px; /* Grossbuchstaben-Marken */
--t-sm: 12.5px; /* Zusatzinfo */
--t-md: 13.5px; /* dichte Arbeitsflaechen, Tabellen */
--t-base:14.5px; /* Fliesstext */
--t-lg: 16px; /* Kartenueberschrift */
--t-xl: 19px; /* Bereichstitel */
--t-2xl: 25px; /* Seitentitel */
/* --- Bewegung -------------------------------------------------------- */
--ms-kurz: .15s;
--ms: .2s;
--kurve: cubic-bezier(.2,.6,.35,1);
/* --- Layout ---------------------------------------------------------- */
--kopf-h: 80px; /* Hoehe der Navigationsleiste (Kalenderrechnung) */
/* Die Oberflaeche ist hell aufgebaut. Diese Angabe sorgt dafuer, dass
Auswahlfelder, Bildlaufleisten und der Schreibcursor auch dann hell
dargestellt werden, wenn das Betriebssystem auf Dunkelmodus steht -
sonst zeichnet der Browser einzelne Bedienelemente dunkel in eine
helle Seite. */
color-scheme: light;
}
html{
-webkit-text-size-adjust: 100%; /* iOS vergroessert sonst quer den Text */
text-size-adjust: 100%;
}
/* ==========================================================================
02 · GRUNDLAGEN
========================================================================== */
/* WICHTIG: style.css setzt in V105 "html, body { background:#7f8791 !important }"
und faerbt zusaetzlich "main" in denselben Graublauton. Die gesamte
Anwendung stand dadurch auf einem mittelgrauen Feld - genau der Eindruck,
der als "billig" empfunden wurde. Beides wird hier zurueckgenommen; ohne
!important waere das nicht moeglich. */
html,
body{
background: var(--papier)!important;
}
body{
font-family: var(--schrift);
color: var(--tinte);
font-size: var(--t-base);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
main,
.app-main,
.page,
.page-bg,
.content-bg,
.site-content{
background: transparent!important;
}
main{
max-width: 1500px!important;
margin: 22px auto 44px!important;
padding: 0 20px!important;
}
/* Zahlen, Zeiten und Betraege muessen untereinander stehen. */
table, input, select, textarea,
.calorder, .order-head strong, .termin-nav-zahl, .pp-z .n,
.monatsumsatz-wert, .kap-min, .kap-euro, .ib-ne, .pk-counter-number,
.zug-frisch-wert, .pp-datum, .pp-nr{
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* --- Typohierarchie ---------------------------------------------------- */
/* Seitentitel: ruhig, nicht riesig, leicht negativer Laufweitenausgleich. */
h1{
font-size: var(--t-2xl);
line-height: 1.2;
font-weight: 600;
letter-spacing: -.012em;
color: var(--tinte);
margin: 0 0 6px;
}
h2{
font-size: var(--t-xl);
line-height: 1.28;
font-weight: 600;
letter-spacing: -.008em;
color: var(--tinte);
margin: var(--s6) 0 var(--s2);
}
h3{
font-size: var(--t-lg);
line-height: 1.35;
font-weight: 600;
letter-spacing: -.004em;
color: var(--tinte);
margin: var(--s4) 0 var(--s2);
}
h4, h5, h6{
font-size: var(--t-md);
font-weight: 600;
letter-spacing: .02em;
color: var(--tinte-2);
margin: var(--s3) 0 var(--s1);
}
p{ margin: 0 0 var(--s3); }
/* Zusatzinfo: leiser, aber noch WCAG-AA-tauglich (>4.5:1 auf Karte). */
.small, .hint, .qual-hinweis, .pp-sub, .ib-sub, .monteur-skill-help,
.pp-objekt-text, .cal-paket-hinweis{
font-size: var(--t-sm);
line-height: 1.55;
color: var(--tinte-3);
}
.hint{ margin: 0 0 var(--s3); max-width: 78ch; }
/* Grossbuchstaben-Marke (Formularlabel, Tabellenkopf, Kachelbeschriftung) */
.zug-label, .zug-frisch-marke, .pp-z .l, .monatsumsatz-titel,
.mo-fakten dt{
font-size: var(--t-xs)!important;
font-weight: 600!important;
letter-spacing: .06em!important;
text-transform: uppercase;
color: var(--tinte-3)!important;
}
a{ color: var(--akzent-dunkel); }
a:hover{ color: var(--akzent-tief); }
code, kbd, samp, pre{ font-family: var(--schrift-mono); }
hr{ border: 0; border-top: 1px solid var(--linie); margin: var(--s6) 0; }
::selection{ background: var(--akzent-100); color: var(--akzent-tief); }
/* Dezente Bildlaufleisten in den dichten Kalenderzellen. */
.calday, .calendar-content-v119, .calendar-sidebar-v119, .filecard{
scrollbar-width: thin;
scrollbar-color: var(--linie-2) transparent;
}
.calday::-webkit-scrollbar,
.calendar-content-v119::-webkit-scrollbar{ width: 10px; height: 10px; }
.calday::-webkit-scrollbar-thumb,
.calendar-content-v119::-webkit-scrollbar-thumb{
background: var(--linie-2); border-radius: var(--r-pill);
border: 3px solid transparent; background-clip: content-box;
}
.calday::-webkit-scrollbar-track,
.calendar-content-v119::-webkit-scrollbar-track{ background: transparent; }
/* ==========================================================================
03 · FOKUS, BEWEGUNG, BARRIEREFREIHEIT
========================================================================== */
/* Sichtbarer Fokusring fuer Tastaturbedienung - auf hellem UND dunklem Grund. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
outline: 2px solid var(--akzent)!important;
outline-offset: 2px!important;
border-radius: var(--r-sm);
}
.topbar a:focus-visible,
.topbar button:focus-visible{
outline: 2px solid #9FD3E6!important;
outline-offset: 1px!important;
}
/* Einheitliche, kurze Uebergaenge. Nur Eigenschaften, die nicht umbrechen. */
a, button, input, select, textarea, summary,
.order, .card, .calorder, .zug-karte, .pp-objekt, .filecard,
.monteur-skill-choice, .nzp-monteur-btn, .mini-day-v119, .calviewbtn,
.navbtn-v119, .skill-badge, .pp-nr, .pp-lg, .ib-nr, .ib-lg{
transition:
background-color var(--ms) var(--kurve),
border-color var(--ms) var(--kurve),
color var(--ms) var(--kurve),
box-shadow var(--ms) var(--kurve),
transform var(--ms-kurz) var(--kurve),
opacity var(--ms) var(--kurve);
}
/* Bewegung kann Uebelkeit ausloesen - hier wird sie vollstaendig abgestellt.
Die pulsierende Erinnerungsleiste aus V215 wird zusaetzlich generell
ruhiggestellt (siehe Abschnitt 10). */
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{
animation-duration: .01ms!important;
animation-iteration-count: 1!important;
transition-duration: .01ms!important;
scroll-behavior: auto!important;
}
}
/* ==========================================================================
04 · NAVIGATION
Aus der bisherigen Knopfsammlung wird eine ruhige, dunkle Leiste:
Zeile 1 = Firmenzeile (leise), Zeile 2 = Navigation (alle Punkte gleich
gestaltet). Die Zugehoerigkeit zu Minol/Metrona/Techem zeigt nur noch ein
kleiner Farbpunkt.
========================================================================== */
/* Bewusst NICHT klebend am oberen Rand: Neunzehn Menuepunkte brechen je nach
Fensterbreite in zwei bis drei Zeilen um (gemessen 128px bei 1440px, 161px
bei 1200px Fensterbreite). Eine dauerhaft mitfahrende Leiste dieser Hoehe
wuerde einem Leitstand zu viel Arbeitsflaeche wegnehmen. Auf dem Handy ist
sie einzeilig und schmal - dort bleibt sie oben stehen (siehe Abschnitt 17). */
.topbar{
position: relative!important;
z-index: 120!important;
display: flex!important;
flex-direction: column!important;
align-items: stretch!important;
justify-content: flex-start!important;
gap: 0!important;
padding: 0!important;
background: var(--nav)!important;
color: #fff!important;
border-bottom: 1px solid rgba(0,0,0,.4)!important;
box-shadow: 0 1px 0 rgba(255,255,255,.04) inset,
0 8px 20px -14px rgba(16,24,40,.55)!important;
}
/* --- Zeile 1: Firmenzeile ---------------------------------------------- */
.topbar > div:first-child{
display: flex;
align-items: center;
gap: 8px;
min-height: 32px;
padding: 0 18px;
font-size: 12px;
line-height: 1.2;
letter-spacing: .015em;
color: var(--nav-text-2);
background: var(--nav-2);
border-bottom: 1px solid var(--nav-linie);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.topbar > div:first-child strong{
color: rgba(255,255,255,.94);
font-weight: 600;
letter-spacing: .005em;
}
/* --- Zeile 2: Navigation ----------------------------------------------- */
.topbar nav{
display: flex!important;
flex: 0 0 auto!important; /* wichtig: sonst wirkt flex-basis als Hoehe */
flex-wrap: wrap!important;
align-items: center!important;
justify-content: flex-start!important;
gap: 2px!important;
padding: 6px 12px 7px!important;
margin: 0!important;
min-height: 46px;
/* Ohne diese drei Zeilen zieht sich die Leiste auf die Breite ihres
Inhalts (gemessen 2551px) und wird abgeschnitten statt umzubrechen. */
width: 100%;
max-width: 100%;
min-width: 0;
}
.topbar > div:first-child{ max-width: 100%; min-width: 0; }
.topbar nav a{
display: inline-flex!important;
align-items: center!important;
gap: 7px!important;
margin: 0!important;
padding: 7px 10px!important;
border-radius: var(--r-md)!important;
border: 1px solid transparent!important;
background: transparent!important;
color: var(--nav-text)!important;
font-size: 13px!important;
font-weight: 500!important;
line-height: 1.15!important;
letter-spacing: .005em;
white-space: nowrap!important;
text-decoration: none;
}
.topbar nav a:hover{
background: var(--nav-hover)!important;
color: #fff!important;
}
.topbar nav a:active{
background: rgba(255,255,255,.14)!important;
transform: translateY(.5px);
}
/* Aktiver Punkt: klar, aber ohne Signalfarbe.
Die Kalenderseite traegt eine eigene Body-Klasse - dort wird der Punkt
automatisch markiert. aria-current wird zusaetzlich unterstuetzt, falls
es spaeter in den Vorlagen gesetzt wird. */
body.calendar-page-full-v121 .topbar nav a.calendar-link,
.topbar nav a[aria-current="page"]{
background: var(--nav-aktiv)!important;
color: #fff!important;
font-weight: 600!important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.14),
inset 0 -2px 0 0 var(--akzent-hell)!important;
}
/* Farbpunkt statt farbigem Knopf: Zugehoerigkeit bleibt erkennbar,
die Leiste bleibt ruhig. */
.topbar nav a.self-planner-link,
.topbar nav a.termin-nav-link{
background: transparent!important;
color: var(--nav-text)!important;
font-weight: 500!important;
padding: 7px 10px!important;
border-radius: var(--r-md)!important;
}
.topbar nav a.self-planner-link:hover,
.topbar nav a.termin-nav-link:hover{
background: var(--nav-hover)!important;
color: #fff!important;
}
.topbar nav a.self-planner-link::before,
.topbar nav a.termin-nav-link::before{
content: "";
flex: 0 0 auto;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--tinte-4);
box-shadow: 0 0 0 2px rgba(255,255,255,.06);
}
.topbar nav a.self-planner-link::before,
.topbar nav a.termin-nav-ml::before{ background: #E06A5F; } /* Minol */
.topbar nav a.metrona-planner-link::before,
.topbar nav a.termin-nav-mt::before{ background: #6FA3DC; } /* Metrona */
.topbar nav a.techem-planner-link::before,
.topbar nav a.termin-nav-te::before{ background: #E2A15C; } /* Techem */
/* Die alten Vollfarb-Knoepfe abschalten. */
.topbar a.calendar-link,
.metrona-planner-link,
.techem-planner-link,
.topbar a.self-planner-link{
background: transparent!important;
color: var(--nav-text)!important;
font-weight: 500!important;
border-radius: var(--r-md)!important;
padding: 7px 10px!important;
}
body.calendar-page-full-v121 .topbar a.calendar-link{
background: var(--nav-aktiv)!important;
color: #fff!important;
}
/* Zaehler-Badges: elegant, ruhig, gut lesbar. */
.termin-nav-zahl{
display: inline-flex!important;
align-items: center;
justify-content: center;
min-width: 20px;
margin-left: 1px!important;
padding: 1px 6px!important;
border-radius: var(--r-sm)!important;
background: rgba(255,255,255,.13)!important;
border: 1px solid rgba(255,255,255,.14)!important;
box-shadow: none!important;
color: rgba(255,255,255,.95)!important;
font-size: 11px!important;
font-weight: 600!important;
line-height: 1.55!important;
letter-spacing: .01em;
}
.topbar nav a:hover .termin-nav-zahl{
background: rgba(255,255,255,.2)!important;
border-color: rgba(255,255,255,.24)!important;
}
/* Benutzername + Abmelden ruecken als ruhige Gruppe nach rechts. */
.topbar nav > span{
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: auto!important;
margin-right: 2px!important;
padding: 6px 10px;
border-radius: var(--r-md);
background: rgba(255,255,255,.06);
border: 1px solid var(--nav-linie);
color: rgba(255,255,255,.86);
opacity: 1;
font-size: 12.5px!important;
font-weight: 600;
white-space: nowrap;
}
.topbar nav a[href*="logout"]{
color: var(--nav-text-2)!important;
font-weight: 500!important;
}
.topbar nav a[href*="logout"]:hover{
color: #fff!important;
background: rgba(255,255,255,.09)!important;
}
/* ==========================================================================
05 · KARTEN UND CONTAINER
Feiner 1px-Rahmen, sehr dezenter Schatten, moderater Radius.
Der Inhalt steht im Vordergrund, nicht der Behaelter.
========================================================================== */
/* V105 setzt fuer .card ein "background:#ffffff !important" - Farbe passt,
aber Rahmen, Radius und Schatten kommen von hier. Der bisherige
Schlagschatten (0 18px 45px schwarz 22%) liess jede Karte schweben; ein
1px-Rahmen mit kaum sichtbarem Schatten wirkt praeziser. */
.card{
background: var(--flaeche)!important;
border: 1px solid var(--linie)!important;
border-radius: var(--r-xl);
box-shadow: var(--sh-1)!important;
padding: 20px 22px 22px;
margin-bottom: var(--s4);
}
.card > h1:first-child,
.card > h2:first-child{ margin-top: 0; }
/* Erste Zeile einer Karte: Titel und Zusatztext bilden einen Block. */
.card > h1 + p,
.card > h1 + .hint,
.card > .pp-kopf + .pp-zahlen{ margin-top: 0; }
.login{ max-width: 420px; margin: 12vh auto; }
.login .card{ padding: 28px 26px 26px; box-shadow: var(--sh-3); }
.filecard{
background: var(--flaeche-2);
border: 1px solid var(--linie);
border-radius: var(--r-lg);
box-shadow: var(--sh-0);
}
.filecard:hover{ border-color: var(--linie-2); box-shadow: var(--sh-1); }
.estimate{
background: var(--akzent-050);
border: 1px solid var(--akzent-200);
border-radius: var(--r-lg);
padding: 12px 14px;
font-size: var(--t-md);
color: var(--akzent-text);
}
.route-start{
background: var(--flaeche-2);
border: 1px solid var(--linie);
border-radius: var(--r-lg);
padding: 14px 16px;
}
.route-stop{
background: var(--flaeche);
border: 1px solid var(--linie);
border-radius: var(--r-lg);
box-shadow: var(--sh-0);
}
.stop-number{
background: var(--akzent);
font-weight: 600;
font-size: var(--t-md);
box-shadow: none;
}
iframe{ border: 1px solid var(--linie); border-radius: var(--r-lg); }
img{ border-radius: var(--r-md); max-width: 100%; height: auto; }
/* ==========================================================================
06 · KNOEPFE
Einheitliche Hoehe (38px), Radius, Schriftgroesse und Zustaende.
Sechs Rollen: Primary, Secondary, Success, Warning, Danger, Ghost.
========================================================================== */
/* --- Grundform (Primary) ----------------------------------------------- */
button,
.editbtn, .map, .routebtn, .takeover-btn, .pp-neu, .pp-btn, .allMonteurs,
.zug-speichern, .cal-paket-btn, .serienbtn, .pz-btn, .navbtn-v119,
.calviewbtn, .route-optimize-btn-v164, .lg-search-quick-btn-v166,
.poster-done-btn, .takeover-secondary-v144, .delete-preview,
.mt-extra-plus-v125, .v158-team-btn, .cal-loesch-knopf,
.loesch-ja, .loesch-nein, .zug-auge, .ib-suche button{
font-family: var(--schrift);
font-size: var(--t-md);
font-weight: 600;
letter-spacing: .005em;
line-height: 1.2;
border-radius: var(--r-md);
cursor: pointer;
}
button{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 38px;
padding: 9px 16px;
background: var(--akzent);
color: #fff;
border: 1px solid var(--akzent);
box-shadow: var(--sh-0);
}
button:hover{ background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }
button:active{ background: var(--akzent-tief); border-color: var(--akzent-tief); transform: translateY(.5px); }
/* Gesperrt heisst nicht unlesbar: die Beschriftung bleibt bei 5,3:1,
erkennbar ist der Zustand an der flachen grauen Flaeche ohne Schatten. */
button[disabled], button:disabled{
background: var(--flaeche-3);
border-color: var(--linie);
color: var(--tinte-3);
box-shadow: none;
cursor: not-allowed;
opacity: 1;
}
/* --- Secondary: heller Grund, feiner Rahmen ---------------------------- */
.editbtn, .allMonteurs, .takeover-secondary-v144, .navbtn-v119,
.route-optimize-btn-v164, .lg-search-quick-btn-v166, .v158-team-btn{
display: inline-flex!important;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 7px 13px!important;
background: var(--flaeche)!important;
color: var(--tinte)!important;
border: 1px solid var(--linie-2)!important;
box-shadow: var(--sh-0)!important;
text-decoration: none;
margin-top: 0;
}
.editbtn:hover, .allMonteurs:hover, .takeover-secondary-v144:hover,
.navbtn-v119:hover, .route-optimize-btn-v164:hover,
.lg-search-quick-btn-v166:hover, .v158-team-btn:hover{
background: var(--flaeche-2)!important;
border-color: var(--akzent-200)!important;
color: var(--akzent-tief)!important;
}
.editbtn{ margin-left: 0; margin-right: 6px; }
/* "Auftrag öffnen" und "Auftrag freigeben" tragen dieselbe Klasse, sind aber
nicht gleich wichtig: Freigeben ist auf der Seite "Noch zu planen" die
eigentliche Handlung. Deshalb bekommt genau dieser Link (erkennbar am
Pfad /freigeben) die Hauptfarbe. Reine Gestaltung, keine Logik. */
a.editbtn[href*="/freigeben"]{
background: var(--akzent)!important;
border-color: var(--akzent)!important;
color: #fff!important;
}
a.editbtn[href*="/freigeben"]:hover{
background: var(--akzent-dunkel)!important;
border-color: var(--akzent-dunkel)!important;
color: #fff!important;
}
/* --- Ghost: nur Text, fuer Nebenwege (Route oeffnen) ------------------- */
.map{
display: inline-flex;
align-items: center;
min-height: 34px;
margin-left: 0;
margin-right: 6px;
padding: 7px 12px;
background: transparent;
color: var(--tinte-2);
border: 1px solid transparent;
text-decoration: none;
}
.map:hover{
background: var(--flaeche-3);
color: var(--tinte);
border-color: var(--linie);
}
/* --- Success --------------------------------------------------------- */
.routebtn, .takeover-btn, .poster-done-btn, .mt-extra-plus-v125,
.poster-print-green, .serienbtn{
display: inline-flex!important;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 10px 18px!important;
background: var(--gruen)!important;
color: #fff!important;
border: 1px solid var(--gruen)!important;
box-shadow: var(--sh-0)!important;
text-decoration: none;
}
.routebtn:hover, .takeover-btn:hover, .poster-done-btn:hover,
.mt-extra-plus-v125:hover, .poster-print-green:hover, .serienbtn:hover{
background: var(--gruen-text)!important;
border-color: var(--gruen-text)!important;
}
.takeover-secondary-v144{ background: var(--flaeche)!important; color: var(--tinte)!important; }
/* --- Danger ---------------------------------------------------------- */
.danger, .delete-preview, .loesch-ja{
background: var(--rot)!important;
color: #fff!important;
border: 1px solid var(--rot)!important;
box-shadow: var(--sh-0)!important;
}
.danger:hover, .delete-preview:hover, .loesch-ja:hover{
background: var(--rot-text)!important;
border-color: var(--rot-text)!important;
}
.loesch-ja[disabled]{
background: var(--flaeche-3)!important;
border-color: var(--linie)!important;
color: var(--tinte-3)!important;
}
.loesch-nein{
background: var(--flaeche)!important;
color: var(--tinte)!important;
border: 1px solid var(--linie-2)!important;
}
/* --- Danger dezent: kleiner Loeschknopf im Kalender ------------------- */
.cal-loesch-knopf{
min-height: 30px;
background: transparent;
border: 1px solid var(--rot-200);
color: var(--rot-text);
padding: 5px 10px;
font-size: var(--t-sm);
}
.cal-loesch-knopf:hover{ background: var(--rot-050); border-color: var(--rot); }
/* --- Dunkler Werkzeugknopf (Neu pruefen, Alle einblenden) ------------- */
.pp-neu{
background: var(--nav)!important;
color: #fff!important;
border: 1px solid var(--nav)!important;
min-height: 36px;
padding: 8px 15px!important;
}
.pp-neu:hover{ background: #1B2537!important; border-color: #1B2537!important; }
/* --- Kleine Aktionsknoepfe in Tabellen -------------------------------- */
.pp-btn{
min-height: 30px;
padding: 5px 11px;
background: var(--akzent);
border: 1px solid var(--akzent);
color: #fff;
font-size: var(--t-sm);
line-height: 1.35;
border-radius: var(--r-sm);
box-shadow: none;
margin-top: 0;
/* Darf auf schmalen Bildschirmen umbrechen - sonst zwingt die lange
Beschriftung die ganze Tabelle ueber den Bildschirmrand. */
white-space: normal;
text-align: left;
}
.pp-btn:hover{ background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }
.cal-paket-btn{
background: var(--akzent)!important;
border: 1px solid var(--akzent)!important;
color: #fff!important;
min-height: 36px;
padding: 8px 16px!important;
font-weight: 600!important;
}
.cal-paket-btn:hover{ background: var(--akzent-dunkel)!important; }
.cal-paket-btn:disabled{
background: var(--flaeche-3)!important;
border-color: var(--linie)!important;
color: var(--tinte-3)!important;
opacity: 1;
}
.zug-speichern{
background: var(--akzent);
border: 1px solid var(--akzent);
min-height: 38px;
font-weight: 600;
border-radius: var(--r-md);
}
.zug-speichern:hover{ background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }
/* ==========================================================================
07 · FORMULARE
========================================================================== */
input, select, textarea{
font-family: var(--schrift);
font-size: 15px;
line-height: 1.4;
padding: 9px 12px;
min-height: 38px;
color: var(--tinte);
background: var(--flaeche);
border: 1px solid var(--linie-2);
border-radius: var(--r-md);
box-shadow: var(--sh-0);
outline: none;
}
textarea{ min-height: 92px; line-height: 1.55; resize: vertical; }
input::placeholder, textarea::placeholder{ color: var(--tinte-platzhalter); }
input:hover, select:hover, textarea:hover{ border-color: var(--linie-3); }
input:focus, select:focus, textarea:focus{
border-color: var(--akzent);
box-shadow: var(--sh-fokus);
outline: none;
}
input:disabled, select:disabled, textarea:disabled{
background: var(--flaeche-3);
color: var(--tinte-3);
cursor: not-allowed;
}
/* Auswahlfelder bekommen einen eigenen Pfeil - sonst sehen sie auf jedem
Betriebssystem anders aus. */
select{
-webkit-appearance: none;
appearance: none;
padding-right: 32px;
background-image:
url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235B6472' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 11px center;
background-size: 11px 7px;
}
select[multiple]{ background-image: none; padding-right: 12px; }
label{
display: block;
margin-top: 14px;
margin-bottom: 5px;
font-size: var(--t-md);
font-weight: 600;
letter-spacing: .005em;
color: var(--tinte-2);
}
input[type=checkbox], input[type=radio]{
width: 17px;
height: 17px;
min-height: 0;
padding: 0;
accent-color: var(--akzent);
cursor: pointer;
box-shadow: none;
}
/* Ein Farbfeld ueber die volle Formularbreite sieht aus wie ein Fehler.
Es bekommt eine feste, kompakte Groesse. */
input[type=color]{
width: 62px;
min-width: 62px;
padding: 3px;
min-height: 36px;
border-radius: var(--r-md);
cursor: pointer;
}
input[type=file]{ padding: 8px 10px; background: var(--flaeche-2); }
/* Suchfelder: kompakt und klar erkennbar.
Die beiden Suchen im Kalender standen bisher als zwei fast bildschirmbreite
graue Kaesten untereinander und haben rund 100 Pixel Kalenderflaeche
gekostet. Jetzt stehen sie nebeneinander und ohne eigenen Kasten. */
.calendar-search-row-v122{
gap: 10px!important;
margin: 8px 0 10px!important;
}
.calendar-order-search-v122{
width: min(420px, 100%)!important;
flex: 1 1 320px!important;
background: transparent!important;
border: 0!important;
border-radius: 0!important;
padding: 0!important;
gap: 6px!important;
}
.calendar-order-search-v122 input[type="search"],
.ib-suche input{
border: 1px solid var(--linie-2)!important;
border-radius: var(--r-md)!important;
background: var(--flaeche)!important;
font-size: 14.5px!important;
padding: 9px 12px!important;
min-height: 38px;
box-shadow: var(--sh-0);
}
.calendar-order-search-v122 input[type="search"]{
font-weight: 500!important;
flex: 1 1 180px!important;
min-width: 140px!important;
}
.calendar-order-search-v122 input[type="search"]:focus,
.ib-suche input:focus{
border-color: var(--akzent)!important;
box-shadow: var(--sh-fokus)!important;
}
/* Suchknoepfe bleiben zurueckhaltend - das Eingabefeld ist die eigentliche
Aufforderung, und "Heute" soll der einzige kraeftige Knopf der Leiste sein. */
.calendar-order-search-v122 button,
.lg-search-quick-btn-v166{
background: var(--flaeche)!important;
color: var(--tinte)!important;
border: 1px solid var(--linie-2)!important;
border-radius: var(--r-md)!important;
padding: 8px 14px!important;
font-size: var(--t-md)!important;
font-weight: 600!important;
min-height: 38px;
box-shadow: var(--sh-0)!important;
}
.calendar-order-search-v122 button:hover,
.lg-search-quick-btn-v166:hover{
background: var(--flaeche-2)!important;
border-color: var(--akzent-200)!important;
color: var(--akzent-text)!important;
}
.ib-suche button{
background: var(--akzent);
border: 1px solid var(--akzent);
min-height: 38px;
padding: 9px 20px;
border-radius: var(--r-md);
}
.ib-suche button:hover{ background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }
.grid2{ gap: var(--s4); }
/* Aufgabenzeilen im Auftragsformular */
.taskrow{
background: var(--flaeche-2);
border: 1px solid var(--linie);
border-radius: var(--r-lg);
padding: 10px 12px;
}
.taskrow:hover{ border-color: var(--linie-2); }
.taskcheck{ font-weight: 600; font-size: var(--t-md); color: var(--tinte-2); }
.taskbox .qty, .taskbox .variant, .taskbox .calc, .time-select{
min-height: 34px;
padding: 6px 10px;
font-size: var(--t-md);
}
/* ==========================================================================
08 · MARKEN, BADGES, CHIPS
========================================================================== */
/* Monteurmarke - die Farbe kommt aus der Datenbank und bleibt unangetastet.
Wie bei den Kalenderbalken legt sich eine 22 Prozent dunkle Schicht
darueber, damit die weisse Schrift auch auf helleren Monteurfarben den
geforderten Kontrast erreicht (gemessen vorher 2,94:1 bei Ocker). */
.monteur-badge{
border-radius: var(--r-sm);
padding: 3px 9px;
font-size: var(--t-sm);
font-weight: 600;
letter-spacing: .01em;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
text-shadow: 0 1px 1.5px rgba(0,0,0,.4);
}
.monteur-badge[style],
.team-name-chip-v160[style]{
background-image: linear-gradient(rgba(3,7,18,.22), rgba(3,7,18,.22))!important;
}
.team-name-chip-v160{ text-shadow: 0 1px 1.5px rgba(0,0,0,.4); }
/* Faehigkeitsmarken: dezent getoent statt kraeftig bunt. */
.skill-badge{
border-radius: var(--r-xs);
padding: 2px 6px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
background: var(--flaeche-3);
color: var(--tinte-2);
border: 1px solid var(--linie);
}
.skill-minol{ background: var(--minol-050); color: var(--minol-text); border: 1px solid var(--minol-200); }
.skill-metrona{ background: var(--metrona-050); color: var(--metrona-text); border: 1px solid var(--metrona-200); }
.skill-techem{ background: var(--techem-050); color: var(--techem-text); border: 1px solid var(--techem-200); }
/* In der Kalender-Seitenleiste stehen dieselben Marken - dort mit !important
ueberschrieben, deshalb hier ebenfalls. */
.calendar-sidebar-monteurs-v119 .skill-badge{
border-radius: var(--r-xs)!important;
padding: 2px 6px!important;
font-size: 10px!important;
font-weight: 600!important;
letter-spacing: .03em;
}
/* Auftraggebermarke auf farbigen Kalenderkarten - bleibt dunkel, damit sie
auf jeder Monteurfarbe lesbar ist. */
.kunde-chip{
border-radius: var(--r-xs);
padding: 1px 5px;
font-weight: 600;
font-size: .92em;
letter-spacing: .015em;
}
.kunde-minol{ background: #7E1A15; }
.kunde-metrona{ background: #16386B; }
.kunde-techem{ background: #6B3D10; }
/* Postkarten-/Kontaktmarke: war ein voll gefuellter orangener Balken und
damit das lauteste Element der Auftragskarte. Jetzt getoent. */
.pk-badge{
background: var(--orange-050);
color: var(--orange-text);
border: 1px solid var(--orange-200);
border-radius: var(--r-xs);
padding: 2px 7px;
font-size: var(--t-xs);
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
}
.pk-file-line{
background: var(--flaeche-2);
border: 1px solid var(--linie);
border-left: 3px solid var(--orange);
border-radius: var(--r-md);
font-weight: 500;
color: var(--tinte-2);
}
.pk-counter-box{
background: var(--flaeche-2);
border: 1px solid var(--linie);
border-radius: var(--r-lg);
}
.pk-counter-number{ font-weight: 600; letter-spacing: -.02em; }
/* Auftragsnummern und Liegenschaftslinks als ruhige Datenchips. */
.pp-nr, .pp-lg, .ib-nr, .ib-lg, .pp-nrliste summary{
background: var(--akzent-050)!important;
border: 1px solid var(--akzent-200)!important;
color: var(--akzent-text)!important;
border-radius: var(--r-sm)!important;
font-weight: 600!important;
}
.pp-nr:hover, .pp-lg:hover, .ib-nr:hover, .ib-lg:hover,
.pp-nrliste summary:hover{
background: var(--akzent-100)!important;
border-color: var(--akzent-hell)!important;
text-decoration: none!important;
}
.pp-lg-fehlt{
background: var(--flaeche-3)!important;
border-color: var(--linie)!important;
color: var(--tinte-3)!important;
}
.ib-nr-tot{
background: var(--flaeche-3)!important;
border-color: var(--linie)!important;
color: var(--tinte-3)!important;
}
.ib-monteur{
background: var(--nav);
border-radius: var(--r-xs);
font-weight: 600;
font-size: var(--t-xs);
letter-spacing: .03em;
padding: 3px 8px;
}
.ib-zahl{
background: var(--flaeche-3);
border: 1px solid var(--linie);
border-radius: var(--r-pill);
color: var(--tinte-2);
font-weight: 600;
font-size: var(--t-md);
}
.ib-ne{
background: var(--akzent-050);
color: var(--akzent-text);
border: 1px solid var(--akzent-200);
border-radius: var(--r-sm);
font-weight: 600;
}
/* Statusmarke "groesster Einsatz" */
.pp-marke{
background: var(--gruen-050);
color: var(--gruen-text);
border: 1px solid var(--gruen-200);
border-radius: var(--r-xs);
font-size: 10.5px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
padding: 2px 7px;
}
.pp-monteur{
background: var(--flaeche-2);
border: 1px solid var(--linie);
border-radius: var(--r-sm);
font-weight: 600;
font-size: var(--t-md);
padding: 2px 9px;
}
.pp-offen{ color: var(--orange-text); font-weight: 600; font-size: var(--t-sm); }
/* "Zieleinsatz" und "freigegeben - geschuetzt" sind echte Statusangaben und
keine Zierde - sie muessen lesbar bleiben (5,5:1 statt 2,9:1). */
.pp-still{ color: var(--tinte-3); font-size: var(--t-sm); }
.pp-ampel{ font-size: 14px; opacity: .9; }
/* ==========================================================================
09 · AUFTRAGSKARTEN UND LISTEN
Die grossen hellgelben / hellroten Flaechen weichen weissen Karten mit
einer schmalen Farblinie links. Die Prioritaet bleibt sofort erkennbar,
die Seite wird ruhig.
========================================================================== */
.orders{ gap: 10px; margin-top: var(--s4); }
.order{
position: relative;
background: var(--flaeche);
border: 1px solid var(--linie);
border-left: 3px solid var(--tinte-4);
border-radius: var(--r-lg);
padding: 13px 16px 14px;
box-shadow: var(--sh-0);
color: var(--tinte);
}
a.order:hover{
border-color: var(--linie-2);
border-left-color: var(--akzent);
box-shadow: var(--sh-2);
transform: translateY(-1px);
}
.order.prio-hoch { background: var(--flaeche); border-left-color: var(--rot); }
.order.prio-normal { background: var(--flaeche); border-left-color: var(--orange); }
.order.prio-niedrig { background: var(--flaeche); border-left-color: var(--gruen); }
a.order.prio-hoch:hover { border-left-color: var(--rot); }
a.order.prio-normal:hover { border-left-color: var(--orange); }
a.order.prio-niedrig:hover{ border-left-color: var(--gruen); }
.order-head{
gap: 9px;
margin-bottom: 5px;
font-size: var(--t-base);
color: var(--tinte-3);
}
.order-head strong{ font-weight: 600; letter-spacing: .005em; color: var(--tinte); }
.order > div:not(.order-head):not(.small){ font-size: var(--t-base); color: var(--tinte-2); }
/* Lesereihenfolge in der Auftragskarte:
1. Monteur + Termin (Kopfzeile) 2. Adresse 3. Auftraggeber + Nummer
4. Einzelheiten. Die Adresse ist das, wonach im Alltag gesucht wird,
deshalb steht sie kraeftiger als die Nummernzeile darueber. */
.order > div:nth-of-type(2){
font-size: var(--t-sm);
color: var(--tinte-3);
letter-spacing: .01em;
}
.order > div:nth-of-type(3){
font-size: 15px;
font-weight: 600;
color: var(--tinte);
letter-spacing: -.005em;
line-height: 1.4;
}
.order .small{ margin-top: 6px; }
.order p{ margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.order form{ margin-top: 8px; }
/* "Entfernen" loescht endgueltig und steht direkt unter den Alltagsknoepfen.
Als roter Vollknopf zog es den Blick staerker an als das Freigeben.
Deshalb hier als Umriss - eindeutig rot, aber nicht einladend. */
.order .danger{
min-height: 32px;
padding: 6px 13px;
font-size: var(--t-sm);
background: var(--flaeche)!important;
color: var(--rot-text)!important;
border: 1px solid var(--rot-200)!important;
box-shadow: none!important;
}
.order .danger:hover{
background: var(--rot)!important;
border-color: var(--rot)!important;
color: #fff!important;
}
.poster-locked{
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
border-radius: var(--r-sm);
background: var(--flaeche-3);
border: 1px solid var(--linie);
color: var(--tinte-3);
font-size: var(--t-sm);
font-weight: 500;
}
.poster-mini{
display: inline-flex;
align-items: center;
gap: 4px;
border-radius: var(--r-xs);
padding: 1px 6px;
font-size: var(--t-xs);
font-weight: 600;
letter-spacing: .03em;
text-transform: uppercase;
}
.poster-mini.printed { background: var(--gruen-050); color: var(--gruen-text); border: 1px solid var(--gruen-200); }
.poster-mini.reprinted{ background: var(--orange-050); color: var(--orange-text); border: 1px solid var(--orange-200); }
.poster-mini.open { background: var(--flaeche-3); color: var(--tinte-3); border: 1px solid var(--linie); }
/* Monteurleiste in "Noch zu planen" */
.nzp-monteur-leiste{
background: var(--flaeche-2);
border: 1px solid var(--linie);
border-radius: var(--r-lg);
padding: 9px 12px;
gap: 7px;
}
.nzp-leiste-titel{
font-weight: 600;
font-size: var(--t-md);
color: var(--tinte-3);
letter-spacing: .02em;
}
.nzp-monteur-btn{
background: var(--flaeche);
border: 1px solid var(--linie-2);
border-left-width: 3px;
border-radius: var(--r-sm);
padding: 6px 11px;
font-size: var(--t-md);
font-weight: 600;
color: var(--tinte-2);
min-height: 32px;
text-decoration: none;
}
.nzp-monteur-btn:hover{
background: var(--flaeche-2);
border-color: var(--linie-3);
color: var(--tinte);
}
.nzp-monteur-btn.aktiv{
background: var(--nav);
border-color: var(--nav);
color: #fff;
}
.nzp-punkt{ width: 9px; height: 9px; }
/* Uebersichtsfilter */
.overview-filter-calendar-style{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 7px;
background: var(--flaeche-2);
border: 1px solid var(--linie);
border-radius: var(--r-lg);
padding: 9px 12px;
margin: 14px 0 4px;
}
.overview-filter-calendar-style > strong{
font-size: var(--t-md);
font-weight: 600;
color: var(--tinte-3);
letter-spacing: .02em;
}
.overview-monteur-chip{
display: inline-flex!important;
align-items: center;
gap: 6px;
margin: 0!important;
padding: 5px 10px!important;
background: var(--flaeche);
border: 1px solid var(--linie-2);
border-left-width: 3px;
border-radius: var(--r-sm);
font-size: var(--t-md);
font-weight: 500;
color: var(--tinte-2);
min-height: 32px;
cursor: pointer;
}
.overview-monteur-chip:hover{ background: var(--flaeche-2); color: var(--tinte); }
.overview-monteur-chip input{ width: auto; min-height: 0; }
.overview-filter-all{
min-height: 32px!important;
padding: 6px 12px!important;
background: var(--flaeche)!important;
color: var(--tinte)!important;
border: 1px solid var(--linie-2)!important;
font-size: var(--t-sm)!important;
margin: 0!important;
}
.overview-filter-all:hover{ background: var(--flaeche-2)!important; border-color: var(--akzent-200)!important; }
.monteur-dot{ display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
/* ==========================================================================
10 · HINWEISE, WARNUNGEN, MELDUNGEN
Aus grossen Farbflaechen werden schmale, ruhige Bausteine: heller Grund,
1px-Rahmen, 3px Farbkante links. Die Bedeutung bleibt, der Laerm geht.
========================================================================== */
.problem, .pk-info-box, .pp-kap, .qual-warnung, .farb-hinweis-doppelt,
.planner-warning, .release-warning, .pk-release-warning, .zug-melde,
.pp-leer, .wunsch-meldung, .planner-large-confirm, .calendar-search-error-v122{
border-radius: var(--r-md)!important;
padding: 11px 14px!important;
font-size: var(--t-md)!important;
line-height: 1.55!important;
box-shadow: none!important;
}
/* Hinweis (neutral) */
.pk-info-box{
background: var(--flaeche-2)!important;
border: 1px solid var(--linie)!important;
border-left: 3px solid var(--tinte-4)!important;
color: var(--tinte-2)!important;
font-weight: 500!important;
}
/* Warnung (orange) */
.problem, .pp-kap, .qual-warnung, .farb-hinweis-doppelt,
.planner-large-confirm{
background: var(--orange-050)!important;
border: 1px solid var(--orange-200)!important;
border-left: 3px solid var(--orange)!important;
color: var(--orange-text)!important;
font-weight: 500!important;
}
/* Kritisch (rot) */
.planner-warning, .release-warning, .pk-release-warning,
.calendar-search-error-v122{
background: var(--rot-050)!important;
border: 1px solid var(--rot-200)!important;
border-left: 3px solid var(--rot)!important;
color: var(--rot-text)!important;
font-weight: 500!important;
}
/* Erfolg (gruen) */
.pp-leer{
background: var(--gruen-050)!important;
border: 1px solid var(--gruen-200)!important;
border-left: 3px solid var(--gruen)!important;
color: var(--gruen-text)!important;
}
/* Rueckmeldungen bei den Zugangsdaten */
.zug-melde.gut{ background: var(--gruen-050)!important; border: 1px solid var(--gruen-200)!important; border-left: 3px solid var(--gruen)!important; color: var(--gruen-text)!important; }
.zug-melde.hinweis{ background: var(--flaeche-2)!important; border: 1px solid var(--linie)!important; border-left: 3px solid var(--tinte-4)!important; color: var(--tinte-2)!important; }
.zug-melde.warn{ background: var(--rot-050)!important; border: 1px solid var(--rot-200)!important; border-left: 3px solid var(--rot)!important; color: var(--rot-text)!important; }
.zug-alt{
background: var(--orange-050);
border: 1px solid var(--orange-200);
border-left: 3px solid var(--orange);
color: var(--orange-text);
border-radius: var(--r-sm);
font-weight: 600;
}
/* Erinnerungsleiste unten: souveraen statt alarmierend.
Der Puls aus V215 wird abgestellt - eine dauerhaft blinkende Flaeche ist
auf einem Arbeitsplatz, an dem man acht Stunden sitzt, unzumutbar. */
.hinweis-leiste{ left: 20px; right: 20px; bottom: 20px; gap: 10px; }
.termin-warnung{
background: var(--nav)!important;
border: 1px solid rgba(255,255,255,.12)!important;
border-left: 3px solid var(--orange)!important;
border-radius: var(--r-lg)!important;
color: rgba(255,255,255,.9)!important;
box-shadow: var(--sh-4)!important;
padding: 12px 16px!important;
font-size: var(--t-md)!important;
animation: none!important;
}
.termin-warnung strong{ color: #fff; font-weight: 600; }
.plakat-warnung{
background: var(--nav)!important;
border-left-color: var(--akzent-hell)!important;
}
.termin-warnung-btn{
background: rgba(255,255,255,.95)!important;
color: var(--tinte)!important;
border-radius: var(--r-md)!important;
padding: 8px 15px!important;
font-weight: 600!important;
font-size: var(--t-md)!important;
min-height: 34px;
display: inline-flex;
align-items: center;
}
.termin-warnung-btn:hover{ background: #fff!important; }
.termin-warnung-zu{
background: transparent!important;
border: 1px solid rgba(255,255,255,.22)!important;
color: rgba(255,255,255,.8)!important;
border-radius: var(--r-sm)!important;
padding: 5px 10px!important;
min-height: 30px;
font-size: var(--t-sm)!important;
font-weight: 500!important;
box-shadow: none!important;
}
.termin-warnung-zu:hover{
background: rgba(255,255,255,.12)!important;
color: #fff!important;
border-color: rgba(255,255,255,.32)!important;
}
@keyframes termin-puls{ 0%,100%{ box-shadow: var(--sh-4); } }
/* ==========================================================================
11 · TABELLEN
Ruhiger Kopf in Grossbuchstaben, feine Zeilenlinien, Zahlen rechts.
========================================================================== */
.pp-tab, .qual-tabelle, .material-table, .te-tab{
width: 100%;
border-collapse: collapse;
font-size: var(--t-md);
}
/* Kein "white-space: nowrap" im Tabellenkopf: eine lange Spaltenueberschrift
wie "ZUSAMMENFÜHREN" haette die Mindestbreite der Tabelle so weit
hochgesetzt, dass die Seite unter 800 Pixeln seitlich uebergelaufen waere
(gemessen 734px Tabelle in einem 700px breiten Kasten). */
.pp-tab th, .qual-tabelle th, .material-table th, .te-tab th{
background: transparent!important;
color: var(--tinte-3)!important;
font-size: var(--t-xs)!important;
font-weight: 600!important;
letter-spacing: .06em!important;
line-height: 1.3;
text-transform: uppercase;
text-align: left;
padding: 7px 9px!important;
border-bottom: 1px solid var(--linie-3)!important;
}
.pp-tab td, .qual-tabelle td, .material-table td, .te-tab td{
padding: 7px 9px;
border-bottom: 1px solid var(--linie);
vertical-align: top;
color: var(--tinte-2);
}
/* Zahlenspalten bleiben in einer Zeile. */
.pp-tab .r, .material-table .r{ white-space: nowrap; }
.pp-tab tbody tr:hover td,
.qual-tabelle tbody tr:hover td{ background: var(--flaeche-2); }
.qual-tabelle tr:nth-child(even) td{ background: transparent; }
.pp-tab tr.pp-haupt{ background: var(--gruen-050); }
.pp-tab .r, .material-table .r{ text-align: right; }
/* Auftraggeberspalten in der Qualifikationstabelle: nur eine feine
Farbkante oben statt kraeftig eingefaerbter Kopfzellen. */
.qual-th{ text-align: center!important; }
.qual-th-ml, .qual-th-mt, .qual-th-te{
color: var(--tinte-2)!important;
background: var(--flaeche-2)!important;
border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.qual-th-ml{ box-shadow: inset 0 3px 0 0 var(--minol); }
.qual-th-mt{ box-shadow: inset 0 3px 0 0 var(--metrona); }
.qual-th-te{ box-shadow: inset 0 3px 0 0 var(--techem); }
.qual-th-zeit{ background: var(--flaeche-2)!important; color: var(--tinte-2)!important; }
.qual-zelle input[type=checkbox]{ width: 18px; height: 18px; }
.qual-leer{ color: var(--tinte-4); }
/* Die Qualifikationstabelle war schon vorher zu breit: drei Haekchenspalten
zu je 92 Pixeln, eine Arbeitszeitspalte zu 190 Pixeln und ein Farbwaehler
mit 150 Pixeln Mindestbreite ergaben 818 Pixel in einem 767 Pixel breiten
Fenster. Unter 1000 Pixeln werden die festen Breiten deshalb geloest. */
@media (max-width: 1000px){
.qual-tabelle .qual-th{ width: auto!important; min-width: 58px; }
.qual-tabelle .qual-th-zeit{ width: auto!important; }
.qual-zeit input[type=time]{ width: 74px!important; padding: 4px 5px!important; }
.qual-zeit span{ margin: 0 2px!important; }
.farb-wahl{ min-width: 104px!important; }
.qual-tabelle td, .qual-tabelle th{ padding: 6px 6px!important; }
}
/* Auf dem Handy lassen sich die breiten Tabellen seitlich schieben - alles
andere waere entweder unlesbar klein oder wuerde die Seite ueberlaufen
lassen. Gemessen: Planungspruefung 731px Tabelle in 375px Fenster. */
@media (max-width: 640px){
.qual-tabelle,
.pp-tab{
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.qual-tabelle{ white-space: nowrap; }
.pp-tab td, .pp-tab th{ white-space: nowrap; }
.pp-tab .pp-monteur{ white-space: nowrap; }
}
/* War ein 15 Pixel hoher Textlink - fuer den Finger zu klein und
ausgerechnet beim Loeschen. Die Trefferflaeche waechst, ohne dass sich
das Layout verschiebt (negative Aussenabstaende). */
.qual-entf{
display: inline-block;
color: var(--rot-text);
font-weight: 600;
font-size: var(--t-sm);
padding: 8px 10px;
margin: -8px -10px;
border-radius: var(--r-sm);
text-decoration: none;
}
.qual-entf:hover{ background: var(--rot-050); text-decoration: underline; }
.farb-punkt{ box-shadow: 0 0 0 1px var(--linie-2); }
/* Kapazitaetsuebersicht beim Tagesstart (Markup liegt in base.html) */
#kapv168-box{
border-radius: var(--r-2xl);
box-shadow: var(--sh-4);
padding: 26px 28px 28px;
border: 1px solid var(--linie);
}
#kapv168-box h2{ font-size: var(--t-xl); font-weight: 600; letter-spacing: -.008em; }
#kapv168-box .kapv168-sub{ color: var(--tinte-3); font-size: var(--t-sm); }
#kapv168-box #kapv168-close{
background: var(--flaeche);
color: var(--tinte);
border: 1px solid var(--linie-2);
border-radius: var(--r-md);
padding: 7px 14px;
font-weight: 600;
font-size: var(--t-md);
}
#kapv168-box #kapv168-close:hover{ background: var(--flaeche-2); border-color: var(--akzent-200); }
#kapv168-box .kapv168-table th{
background: var(--flaeche-2);
color: var(--tinte-3);
font-size: 10.5px;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
border-bottom: 1px solid var(--linie-3);
}
#kapv168-box .kapv168-table td{ border: 1px solid var(--linie); }
#kapv168-box .kapv168-cell-full { background: var(--gruen-050); color: var(--gruen-text); }
#kapv168-box .kapv168-cell-half { background: var(--orange-050); color: var(--orange-text); }
#kapv168-box .kapv168-cell-low { background: var(--rot-050); color: var(--rot-text); }
#kapv168-box .kapv168-cell-empty{ background: var(--flaeche-3); color: var(--tinte-4); }
#kapv168-box .kapv168-week-header{ background: var(--flaeche-3)!important; color: var(--tinte-3); }
/* ==========================================================================
12 · KALENDER
Neutraler Premium-Hintergrund, Monate als saubere weisse Karten,
ausgewaehlter/heutiger Tag deutlich, Sonn- und Feiertage erkennbar
ohne Alarmfarbe.
========================================================================== */
/* --- Aussenflaeche und Schale ------------------------------------------ */
body.calendar-page-full-v121{
background: var(--papier-tief)!important;
}
body.calendar-page-full-v121 .calendar-shell-v119.card,
body.calendar-page-full-v121 .calendar-sidebar-v119,
body.calendar-page-full-v121 .calendar-content-v119{
min-height: calc(100vh - var(--kopf-h))!important;
}
.calendar-shell-v119.card{
background: var(--flaeche)!important;
border: 0!important;
box-shadow: none!important;
}
/* --- Seitenleiste ------------------------------------------------------ */
.calendar-sidebar-v119{
background: var(--flaeche-2)!important;
border-right: 1px solid var(--linie)!important;
}
.calendar-sidebar-title-v119{
font-size: var(--t-xl)!important;
font-weight: 600!important;
letter-spacing: -.01em;
color: var(--tinte)!important;
margin-bottom: 2px!important;
}
.calendar-today-v119{
font-size: var(--t-sm)!important;
font-weight: 500!important;
color: var(--tinte-3)!important;
margin-bottom: 14px!important;
}
.sidebar-filter-head-v119 strong{
font-size: var(--t-xs)!important;
font-weight: 600!important;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--tinte-3);
}
.sidebar-filter-head-v119 .allMonteurs{
background: var(--flaeche)!important;
color: var(--tinte)!important;
border: 1px solid var(--linie-2)!important;
border-radius: var(--r-sm)!important;
font-size: var(--t-xs)!important;
font-weight: 600!important;
padding: 6px 10px!important;
}
.sidebar-filter-head-v119 .allMonteurs:hover{
background: var(--flaeche-2)!important;
border-color: var(--akzent-200)!important;
}
.calendar-sidebar-monteurs-v119 label.calendar-sidebar-monteur-v119{
background: var(--flaeche)!important;
border: 1px solid var(--linie)!important;
border-left: 3px solid var(--linie-2)!important;
border-radius: var(--r-md)!important;
min-height: 46px!important;
padding: 7px 10px!important;
box-shadow: var(--sh-0)!important;
cursor: pointer;
}
.calendar-sidebar-monteurs-v119 label.calendar-sidebar-monteur-v119:hover{
background: var(--flaeche-2)!important;
border-color: var(--linie-2)!important;
}
.calendar-sidebar-monteurs-v119 .monteur-name{
font-size: var(--t-base)!important;
font-weight: 600!important;
color: var(--tinte)!important;
line-height: 1.2!important;
}
.calendar-sidebar-note-v119{
color: var(--tinte-3)!important;
font-size: var(--t-sm)!important;
border-top: 1px solid var(--linie);
padding-top: 10px;
}
/* --- Kopfzeile und Werkzeugleiste -------------------------------------- */
.calendar-content-v119{ background: var(--flaeche)!important; }
.calendar-calhead-v119 h1{
font-size: 24px!important;
font-weight: 600!important;
letter-spacing: -.012em;
}
.calendar-subtitle-v119{
color: var(--tinte-3)!important;
font-size: var(--t-md)!important;
font-weight: 500!important;
}
/* Ansichtswahl als Segmentleiste */
.calendar-view-switch-v119{
background: var(--flaeche-3)!important;
border: 1px solid var(--linie)!important;
border-radius: var(--r-lg)!important;
padding: 3px!important;
gap: 2px!important;
}
.calendar-view-switch-v119 span{
font-size: var(--t-xs)!important;
font-weight: 600!important;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--tinte-3);
padding: 0 8px 0 6px;
}
.calendar-view-switch-v119 .calviewbtn{
background: transparent!important;
color: var(--tinte-2)!important;
border: 1px solid transparent!important;
border-radius: var(--r-md)!important;
padding: 6px 14px!important;
font-size: var(--t-md)!important;
font-weight: 600!important;
min-height: 32px;
display: inline-flex!important;
align-items: center;
box-shadow: none!important;
}
.calendar-view-switch-v119 .calviewbtn:hover{
background: rgba(255,255,255,.7)!important;
color: var(--tinte)!important;
}
.calendar-view-switch-v119 .calviewbtn.active{
background: var(--flaeche)!important;
color: var(--akzent-text)!important;
border-color: var(--linie-2)!important;
box-shadow: var(--sh-1)!important;
}
/* Blaetterknoepfe: ruhig, nur "Heute" ist die Hauptaktion. */
.navbtn-v119{
background: var(--flaeche)!important;
color: var(--tinte-2)!important;
border: 1px solid var(--linie-2)!important;
border-radius: var(--r-md)!important;
padding: 7px 12px!important;
font-size: var(--t-sm)!important;
font-weight: 600!important;
min-height: 32px;
box-shadow: var(--sh-0)!important;
}
.navbtn-v119:hover{
background: var(--flaeche-2)!important;
border-color: var(--akzent-200)!important;
color: var(--akzent-text)!important;
}
.today-v119{
background: var(--akzent)!important;
border-color: var(--akzent)!important;
color: #fff!important;
}
.today-v119:hover{
background: var(--akzent-dunkel)!important;
border-color: var(--akzent-dunkel)!important;
color: #fff!important;
}
/* Monatsumsatz-Kachel */
.monatsumsatz{
border-radius: var(--r-lg);
border: 1px solid var(--linie);
background: var(--flaeche-2);
padding: 7px 14px;
box-shadow: var(--sh-0);
}
.monatsumsatz-wert{ font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.monatsumsatz-rot { background: var(--rot-050); border-color: var(--rot-200); color: var(--rot-text); }
.monatsumsatz-gelb { background: var(--orange-050); border-color: var(--orange-200); color: var(--orange-text); }
.monatsumsatz-gruen{ background: var(--gruen-050); border-color: var(--gruen-200); color: var(--gruen-text); }
/* --- Wochentagskopf ---------------------------------------------------- */
.calendar-grid.header div,
.calendar-content-v119 .calendar-grid.header div{
background: transparent!important;
color: var(--tinte-3)!important;
font-size: var(--t-xs)!important;
font-weight: 600!important;
letter-spacing: .09em!important;
text-transform: uppercase;
border-radius: 0!important;
border-bottom: 1px solid var(--linie-3)!important;
padding: 6px 4px 7px!important;
margin-bottom: 6px;
}
/* --- Tageszellen ------------------------------------------------------- */
.calday,
.calendar-content-v119 .calday{
background: var(--flaeche)!important;
border: 1px solid var(--linie)!important;
border-radius: var(--r-md)!important;
padding: 7px!important;
}
.calendar-content-v119 .calday:hover{ border-color: var(--linie-2)!important; }
/* Sonn- und Feiertage: erkennbar, aber ohne Alarmfarbe. */
.calday.blocked,
.calendar-content-v119 .calday.blocked{
background: var(--flaeche-3)!important;
border-color: var(--linie-2)!important;
}
.holiday{
color: var(--tinte-3);
font-size: var(--t-xs);
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
margin: 4px 0 6px;
}
/* Ausgewaehlter (in der Regel heutiger) Tag: deutlich, aber nicht laut. */
.calendar-content-v119 .calday.selected-day{
outline: 2px solid var(--akzent)!important;
outline-offset: -2px!important;
background: var(--akzent-050)!important;
box-shadow: var(--sh-1)!important;
}
.calday.muted{ opacity: .42; }
.dayno{ font-weight: 600; }
.calendar-content-v119 .dayno a{
font-size: var(--t-base)!important;
font-weight: 600!important;
color: var(--tinte)!important;
letter-spacing: -.01em;
}
.calendar-content-v119 .calday.selected-day .dayno a{ color: var(--akzent-tief)!important; }
.calendar-main-grid.view-week .dayno a:hover{ background: var(--akzent-050); }
/* Auftragskarten im Kalender: die Monteurfarbe kommt aus der Datenbank und
bleibt unveraendert. Statt eines Schlagschattens (der die Balken wie
Aufkleber wirken liess) fasst ein feiner dunkler Innenrand die Flaeche -
das wirkt flacher, praeziser und laesst die Farben ruhiger erscheinen. */
.calendar-content-v119 .calorder{
border-radius: var(--r-sm)!important;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.14)!important;
font-weight: 500;
letter-spacing: .005em;
}
/* LESBARKEIT AUF DEN FARBIGEN BALKEN
Die Balkenfarbe kommt als Inline-Angabe aus der Monteurverwaltung. Bei
helleren Farben stand weisse Schrift auf hellem Grund - gemessen 2,94:1
bei Ocker (#ca8a04) und 3,68:1 bei Tuerkis (#0891b2), gefordert sind
4,5:1. Die Farbe selbst wird NICHT angetastet; stattdessen legt sich eine
22 Prozent dunkle Schicht darueber (Farbton bleibt, Helligkeit sinkt) und
die Schrift bekommt eine feine Abschattung. Damit erreicht Ocker 4,6:1
und Tuerkis 5,4:1.
Hinweis fuer sehr helle Altfarben wie #f59e0b: dort hilft nur ein Wechsel
auf eine der vierzehn abgestimmten Farben unter "Admin / Monteure".
"background-image" braucht !important, weil die Vorlage "background" als
Kurzform inline setzt und damit jedes Hintergrundbild zuruecksetzt. */
.calorder[style],
.calendar-content-v119 .calorder{
background-image: linear-gradient(rgba(3,7,18,.22), rgba(3,7,18,.22))!important;
text-shadow: 0 1px 1.5px rgba(0,0,0,.45);
}
.calorder .kunde-chip{ text-shadow: none; }
.calendar-content-v119 .calorder:hover{
box-shadow: inset 0 0 0 1px rgba(0,0,0,.2),
0 2px 6px -1px rgba(16,24,40,.22)!important;
filter: brightness(1.06);
}
.calorder.status-geplant{
outline: 1px dashed rgba(255,255,255,.85)!important;
outline-offset: -3px!important;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.14)!important;
}
.calorder.status-freigegeben{ box-shadow: inset 0 0 0 1px rgba(0,0,0,.18)!important; }
a.calorder.wird-gezogen{ opacity: .3!important; }
.calday.ablage-hier{
outline: 2px dashed var(--akzent)!important;
outline-offset: -2px;
background: var(--akzent-050)!important;
}
.calendar-main-grid.view-week .calorder.sortier-ziel{
outline: 2px dashed var(--orange)!important;
}
/* --- Jahresansicht ----------------------------------------------------- */
/* Der graugruene Kachelteppich weicht einer neutralen Flaeche mit weissen
Monatskarten. */
body.calendar-page-full-v121 .year-grid-v119{
background: transparent!important;
padding: 2px 0 0!important;
border-radius: 0!important;
gap: 14px!important;
box-shadow: none!important;
}
/* Behobener Ueberlauf: die Spalten standen auf minmax(245px, 1fr). Sobald
vier Spalten a 245px plus Abstaende breiter waren als die Kalenderflaeche,
ragten die letzten Monatskarten rechts heraus und die Flaeche bekam einen
waagerechten Rollbalken. minmax(0, 1fr) laesst die Spalten schrumpfen. */
.year-grid-v119,
body.calendar-page-full-v121 .year-grid-v119{
grid-template-columns: repeat(4, minmax(0, 1fr))!important;
}
@media (max-width: 1200px){
.year-grid-v119,
body.calendar-page-full-v121 .year-grid-v119{
grid-template-columns: repeat(3, minmax(0, 1fr))!important;
}
}
@media (max-width: 820px){
.year-grid-v119,
body.calendar-page-full-v121 .year-grid-v119{
grid-template-columns: repeat(2, minmax(0, 1fr))!important;
}
}
@media (max-width: 540px){
.year-grid-v119,
body.calendar-page-full-v121 .year-grid-v119{
grid-template-columns: minmax(0, 1fr)!important;
}
}
.year-month-v119,
body.calendar-page-full-v121 .year-month-v119,
body.calendar-page-full-v121 .year-month-v119:nth-child(odd),
body.calendar-page-full-v121 .year-month-v119:nth-child(even){
background: var(--flaeche)!important;
border: 1px solid var(--linie)!important;
border-radius: var(--r-xl)!important;
box-shadow: var(--sh-1)!important;
padding: 12px 12px 13px!important;
}
body.calendar-page-full-v121 .year-month-v119:hover{
border-color: var(--linie-2)!important;
box-shadow: var(--sh-2)!important;
}
.year-month-v119 h2{
margin: 0 0 9px!important;
font-size: var(--t-md)!important;
font-weight: 600!important;
letter-spacing: .06em;
text-transform: uppercase;
}
.year-month-v119 h2 a,
body.calendar-page-full-v121 .year-month-v119 h2 a{
color: var(--tinte-3)!important;
text-decoration: none!important;
}
.year-month-v119 h2 a:hover{ color: var(--akzent-tief)!important; }
/* 9,5px in #8A93A3 ergaben nur 3,1:1. Eine Spaltenueberschrift muss lesbar
sein, also einen Tick groesser und deutlich dunkler (5,5:1). */
.mini-weekdays-v119 span,
body.calendar-page-full-v121 .mini-weekdays-v119 span{
font-size: 10px!important;
font-weight: 600!important;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--tinte-3)!important;
}
.mini-day-v119,
body.calendar-page-full-v121 .mini-day-v119{
background: var(--flaeche-2)!important;
border: 1px solid transparent!important;
border-radius: var(--r-xs)!important;
color: var(--tinte-2)!important;
font-size: 11px!important;
font-weight: 500!important;
}
/* Tage des Nachbarmonats: fruehere Loesung war "opacity: .28" - das ergab
rund 1,3:1 und war praktisch unlesbar. Sie treten jetzt dadurch zurueck,
dass ihnen die Fuellung fehlt, nicht dadurch, dass die Schrift verblasst
(5,5:1 statt 1,3:1). */
.mini-day-v119.muted,
body.calendar-page-full-v121 .mini-day-v119.muted{
opacity: 1!important;
background: transparent!important;
color: var(--tinte-3)!important;
font-weight: 400!important;
}
.mini-day-v119:hover,
body.calendar-page-full-v121 .mini-day-v119:hover{
background: var(--flaeche)!important;
border-color: var(--akzent)!important;
outline: none!important;
color: var(--akzent-tief)!important;
}
/* Sonntag / Feiertag: nur leicht abgesetzt, aber lesbar (5,3:1) */
.mini-day-v119.blocked,
body.calendar-page-full-v121 .mini-day-v119.blocked{
background: var(--flaeche-3)!important;
color: var(--tinte-3)!important;
}
/* Tage mit Auftraegen: getoente Akzentflaeche mit fester Unterkante -
ueber zwoelf Monate hinweg deutlich ruhiger als ein voller Blauklotz. */
.mini-day-v119.has-orders,
body.calendar-page-full-v121 .mini-day-v119.has-orders{
background: var(--akzent-100)!important;
color: var(--akzent-tief)!important;
font-weight: 600!important;
border-color: var(--akzent-200)!important;
box-shadow: inset 0 -2px 0 0 var(--akzent)!important;
}
.mini-day-v119.has-orders:hover,
body.calendar-page-full-v121 .mini-day-v119.has-orders:hover{
background: var(--akzent-200)!important;
}
/* Ausgewaehlter Tag: klarer Akzentring */
.mini-day-v119.selected,
body.calendar-page-full-v121 .mini-day-v119.selected{
outline: 2px solid var(--akzent)!important;
outline-offset: 1px!important;
color: var(--akzent-tief)!important;
font-weight: 700!important;
}
/* Hoehen an die zweizeilige Kopfleiste anpassen */
body.calendar-page-full-v121 .calendar-content-v119 .calendar-main-grid.view-month .calday{
min-height: clamp(120px, calc((100vh - 330px) / 6), 200px)!important;
}
body.calendar-page-full-v121 .calendar-content-v119 .calendar-main-grid.view-week .calday,
body.calendar-page-full-v121 .calendar-content-v119 .calendar-main-grid.view-day .calday{
min-height: calc(100vh - 285px)!important;
}
body.calendar-page-full-v121 .year-grid-v119{ min-height: calc(100vh - 215px)!important; }
body.calendar-page-full-v121 .year-month-v119{
min-height: clamp(190px, calc((100vh - 275px) / 3), 300px)!important;
}
body.calendar-page-full-v121 .mini-day-v119{
min-height: clamp(22px, calc((100vh - 420px) / 18), 38px)!important;
}
/* --- Hover-Vorschau in der Jahresansicht ------------------------------- */
.year-hover-card-v157{
background: var(--nav)!important;
border: 1px solid rgba(255,255,255,.14)!important;
border-radius: var(--r-lg)!important;
box-shadow: var(--sh-4)!important;
font-size: var(--t-md)!important;
padding: 13px 14px!important;
}
.year-hover-card-v157::before{
background: var(--nav)!important;
border-left: 1px solid rgba(255,255,255,.14)!important;
border-top: 1px solid rgba(255,255,255,.14)!important;
}
.year-hover-title-v157{
font-size: var(--t-lg)!important;
font-weight: 600!important;
letter-spacing: -.005em;
}
.year-hover-total-v157{
color: var(--akzent-hell)!important;
font-weight: 500!important;
font-size: var(--t-sm)!important;
letter-spacing: .03em;
text-transform: uppercase;
}
.year-hover-row-v157{ border-top: 1px solid rgba(255,255,255,.12)!important; }
.year-hover-row-v157 strong{ font-weight: 600!important; }
.year-hover-row-v157 em{ color: rgba(255,255,255,.66)!important; font-weight: 500!important; }
.year-hover-kap-title-v162{ color: var(--akzent-hell); }
/* --- Kapazitaets-Tooltip ---------------------------------------------- */
.kap-tooltip-v162{
background: var(--nav);
border: 1px solid rgba(255,255,255,.14);
border-radius: var(--r-md);
box-shadow: var(--sh-3);
font-size: var(--t-sm);
}
.kap-tooltip-title{
color: rgba(255,255,255,.6);
font-size: 10px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
}
.kap-name{ font-weight: 500; color: rgba(255,255,255,.9); }
.kap-min{ color: #8FD3B4; font-weight: 600; }
.kap-tooltip-row.kap-full .kap-min{ color: #F0A6A0; }
.kap-euro{ border-radius: var(--r-xs); font-weight: 600; }
.kap-euro-gut{ background: var(--gruen); }
.kap-euro-knapp{ background: var(--rot); }
/* --- Paketleiste ------------------------------------------------------- */
.cal-paket-leiste{
background: var(--flaeche-2);
border: 1px solid var(--linie);
border-radius: var(--r-lg);
padding: 10px 14px;
gap: 12px;
}
.cal-paket-leiste label{ font-weight: 600; font-size: var(--t-md); color: var(--tinte-2); margin: 0; }
.cal-paket-zahl{
color: var(--tinte-3);
font-weight: 600;
font-size: var(--t-md);
font-variant-numeric: tabular-nums;
}
.cal-paket-datum input, .cal-paket-monteur select, .cal-paket-zeit input[type=time]{
min-height: 34px;
padding: 6px 10px;
font-size: var(--t-md);
}
/* --- Loeschdialog ------------------------------------------------------ */
.loesch-hintergrund{ background: rgba(15,23,42,.55); backdrop-filter: blur(2px); }
.loesch-fenster{
border: 1px solid var(--linie)!important;
border-top: 3px solid var(--rot)!important;
border-radius: var(--r-2xl);
box-shadow: var(--sh-4);
padding: 24px 26px;
}
.loesch-titel{
color: var(--rot-text);
font-size: var(--t-xl);
font-weight: 600;
letter-spacing: .01em;
}
/* ==========================================================================
13 · SELBSTPLANER
========================================================================== */
.planner-monteurs{ gap: 8px; margin: 10px 0 18px; }
.monteur-skill-choice,
.planner-monteurs label{
background: var(--flaeche)!important;
border: 1px solid var(--linie)!important;
border-radius: var(--r-md)!important;
padding: 9px 11px!important;
margin: 0!important;
font-size: var(--t-md);
font-weight: 500;
color: var(--tinte-2);
box-shadow: var(--sh-0);
cursor: pointer;
min-height: 42px;
}
.planner-monteurs label:hover{
background: var(--flaeche-2)!important;
border-color: var(--linie-2)!important;
}
.monteur-skill-choice .monteur-name{
font-weight: 600;
color: var(--tinte);
font-size: var(--t-base);
}
.planner-day{
background: var(--flaeche-2);
border: 1px solid var(--linie);
border-radius: var(--r-xl);
padding: 16px 18px;
}
.planner-day > h2{ margin-top: 0; font-size: var(--t-lg); }
.planner-order{
background: var(--flaeche);
border: 1px solid var(--linie);
border-left: 3px solid var(--akzent);
border-radius: var(--r-md);
box-shadow: var(--sh-0);
}
.planner-helfer{
border-left: 3px solid var(--tinte-4)!important;
background: var(--flaeche-2)!important;
}
.planner-file{
background: var(--flaeche-2);
border: 1px solid var(--linie);
border-radius: var(--r-md);
padding: 9px 12px;
font-weight: 500;
font-size: var(--t-md);
color: var(--tinte-2);
}
.team-order-info{
background: var(--flaeche-2);
border-radius: var(--r-sm);
color: var(--tinte-3);
font-size: var(--t-sm);
}
/* Upload-Flaeche: einladend, aber ruhig. */
.dropzone{
border: 1.5px dashed var(--linie-2);
background: var(--flaeche-2);
border-radius: var(--r-xl);
padding: 30px 24px;
font-weight: 500;
font-size: var(--t-base);
color: var(--tinte-3);
transition: background-color var(--ms) var(--kurve),
border-color var(--ms) var(--kurve);
}
.dropzone:hover{ border-color: var(--akzent-200); background: var(--akzent-050); color: var(--tinte-2); }
.dropzone.dragover{
border-color: var(--akzent)!important;
background: var(--akzent-050)!important;
color: var(--akzent-text)!important;
}
/* Teamwahl */
.v158-team-box{
border: 1px solid var(--linie);
border-radius: var(--r-md);
background: var(--flaeche-2);
padding: 4px 12px;
margin-top: 8px;
}
.v158-team-title{
font-size: var(--t-md);
font-weight: 600;
color: var(--akzent-text);
cursor: pointer;
padding: 8px 0;
}
.v158-team-hint{ font-size: var(--t-sm); color: var(--tinte-3); line-height: 1.55; }
.v158-team-btn{ min-height: 32px!important; padding: 6px 12px!important; font-size: var(--t-sm)!important; }
.v158-disabled{ opacity: .5; }
.v158-ok { color: var(--gruen-text); font-size: var(--t-sm); }
.v158-warn{ color: var(--orange-text); font-size: var(--t-sm); }
/* Metrona-Zusatzplaetze */
.mt-extra-add-v125 input{
border: 1px solid var(--linie-2)!important;
border-radius: var(--r-md)!important;
padding: 8px 11px!important;
font-size: var(--t-base)!important;
}
.mt-extra-chip-v125{
background: var(--akzent-050)!important;
border: 1px solid var(--akzent-200)!important;
color: var(--akzent-text)!important;
border-radius: var(--r-sm)!important;
font-weight: 600!important;
font-size: var(--t-sm)!important;
padding: 5px 10px!important;
}
.mt-extra-chip-v125 button{ color: var(--akzent-text)!important; }
.wunsch-feld{ font-size: var(--t-base); }
.wunsch-mikro{
background: var(--flaeche);
color: var(--tinte-2);
border: 1px solid var(--linie-2);
min-height: 38px;
}
.wunsch-mikro:hover{ background: var(--flaeche-2); border-color: var(--akzent-200); }
.wunsch-meldung{
background: var(--akzent-050)!important;
border: 1px solid var(--akzent-200)!important;
border-left: 3px solid var(--akzent)!important;
color: var(--akzent-text)!important;
}
/* ==========================================================================
14 · ADMIN / ZUGANGSDATEN / QUALIFIKATIONEN
========================================================================== */
.zug-karten{ gap: 12px; }
.zug-karte{
background: var(--flaeche);
border: 1px solid var(--linie);
border-radius: var(--r-xl);
box-shadow: var(--sh-1);
padding: 15px 16px 16px;
}
.zug-karte:hover{ border-color: var(--linie-2); box-shadow: var(--sh-2); }
.zug-name{
font-size: var(--t-lg);
font-weight: 600;
letter-spacing: -.005em;
color: var(--tinte);
padding-bottom: 10px;
margin-bottom: 12px;
border-bottom: 1px solid var(--linie);
}
.zug-rolle{
background: var(--flaeche-3);
border: 1px solid var(--linie);
color: var(--tinte-3);
border-radius: var(--r-sm);
font-size: 10px;
font-weight: 600;
letter-spacing: .06em;
padding: 3px 8px;
}
.zug-karte .zug-feld{
border: 1px solid var(--linie-2);
border-radius: var(--r-md);
padding: 9px 11px;
font-size: var(--t-base);
min-height: 38px;
}
.zug-karte .zug-feld:focus{
border-color: var(--akzent);
outline: none;
box-shadow: var(--sh-fokus);
}
.zug-auge{
width: 40px;
height: 38px;
border: 1px solid var(--linie-2);
border-radius: var(--r-md);
background: var(--flaeche-2);
color: var(--tinte-3);
font-size: 15px;
}
.zug-auge:hover{ background: var(--flaeche-3); color: var(--tinte-2); }
.zug-auge.an{ background: var(--akzent-050); border-color: var(--akzent); color: var(--akzent-text); }
.zug-frisch{
background: var(--akzent-050);
border: 1px solid var(--akzent-200);
border-left: 3px solid var(--akzent);
border-radius: var(--r-xl);
padding: 16px 18px;
}
.zug-frisch-kopf{
color: var(--akzent-text);
font-size: var(--t-lg);
font-weight: 600;
letter-spacing: -.005em;
}
.zug-frisch-text{ color: var(--tinte-2); font-size: var(--t-md); }
.zug-frisch-wert{
background: var(--flaeche);
border: 1px solid var(--akzent-200);
border-radius: var(--r-sm);
color: var(--tinte);
font-size: var(--t-base);
}
.zug-frisch-wert.gross{
font-size: 20px;
font-weight: 600;
letter-spacing: .08em;
border-color: var(--akzent);
color: var(--akzent-text);
}
.userrow{ gap: 8px; align-items: end; margin-bottom: 10px; }
.userrow input, .userrow select{ margin-top: 0; }
/* ==========================================================================
15 · PLANUNGSPRUEFUNG
Die vier Kennzahlen werden zu ruhigen Kacheln, die grossen gelben
Warnflaechen zu weissen Bloecken mit schmaler Farbkante.
========================================================================== */
.pp-kopf{ gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--linie); margin-bottom: 4px; }
.pp-zahlen{ gap: 10px; margin: 16px 0 20px; }
.pp-z{
background: var(--flaeche);
border: 1px solid var(--linie);
border-top: 3px solid var(--linie-2);
border-radius: var(--r-lg);
padding: 13px 15px;
box-shadow: var(--sh-0);
}
.pp-z .n{ font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--tinte); }
.pp-z.gut { background: var(--flaeche); border-color: var(--linie); border-top-color: var(--gruen); }
.pp-z.warn{ background: var(--flaeche); border-color: var(--linie); border-top-color: var(--orange); }
.pp-z.fest{ background: var(--flaeche); border-color: var(--linie); border-top-color: var(--rot); }
.pp-z.gut .n { color: var(--gruen-text); }
.pp-z.warn .n{ color: var(--orange-text); }
.pp-z.fest .n{ color: var(--rot-text); }
.pp-objekt{
background: var(--flaeche);
border: 1px solid var(--linie);
border-left: 3px solid var(--linie-2);
border-radius: var(--r-lg);
padding: 14px 16px;
box-shadow: var(--sh-0);
}
.pp-objekt:hover{ border-color: var(--linie-2); box-shadow: var(--sh-1); }
.pp-objekt.warnung{ background: var(--flaeche); border-left-color: var(--orange); }
.pp-objekt.fest { background: var(--flaeche); border-left-color: var(--rot); }
.pp-objekt-name strong{ font-size: var(--t-base); font-weight: 600; }
.pp-objekt-summe{
font-size: var(--t-sm);
font-weight: 600;
color: var(--tinte-3);
background: var(--flaeche-2);
border: 1px solid var(--linie);
border-radius: var(--r-sm);
padding: 3px 9px;
}
.pp-hinweis{
background: var(--flaeche);
border: 1px solid var(--linie);
border-radius: var(--r-md);
font-size: var(--t-md);
}
.pp-hinweis-liste span{ color: var(--tinte-3); }
.pp-h2{ margin: 28px 0 4px; font-size: var(--t-xl); font-weight: 600; }
.pp-lg-konflikt{
background: var(--orange-050)!important;
border: 1px solid var(--orange-200)!important;
color: var(--orange-text)!important;
border-radius: var(--r-sm)!important;
font-weight: 600!important;
}
/* ==========================================================================
16 · KLEINTEILE
========================================================================== */
/* Versionsmarke: soll da sein, aber nicht auffallen - trotzdem lesbar
bleiben. Eine niedrige Deckkraft waere zwar leiser, wuerde den Kontrast
aber auf etwa 2,4:1 druecken; deshalb wird stattdessen die Textfarbe
gedaempft (10,3:1 statt 13:1). */
.version-badge{
background: rgba(21,29,48,.9);
border: 1px solid rgba(255,255,255,.12);
border-radius: var(--r-sm);
padding: 4px 9px;
font-size: 11px;
font-weight: 500;
letter-spacing: .03em;
color: rgba(255,255,255,.8);
opacity: 1;
backdrop-filter: blur(6px);
transition: color var(--ms) var(--kurve);
}
.version-badge:hover{ color: #fff; }
/* Termineintrag-Umschalter */
.te-tabs a, .te-tab-btn{
border-radius: var(--r-md)!important;
font-weight: 600!important;
font-size: var(--t-md)!important;
}
/* Plakat-/Postkartenkarten */
.poster-card, .pc-card{
border: 1px solid var(--linie);
border-radius: var(--r-xl);
box-shadow: var(--sh-1);
background: var(--flaeche);
}
/* Zusammenklappbare Bereiche */
details > summary{ cursor: pointer; }
details > summary::-webkit-details-marker{ color: var(--tinte-4); }
/* Fahrliste / Materialplan */
.fl-card{ border-radius: var(--r-xl); }
.mp-anmeldeart{
background: var(--akzent-050)!important;
color: var(--akzent-text)!important;
border: 1px solid var(--akzent-200);
border-radius: var(--r-xs)!important;
font-weight: 600!important;
}
/* ==========================================================================
17 · RESPONSIVE
Desktop / Notebook / Tablet / Smartphone.
Die Informationsdichte bleibt erhalten - es wird umbrochen, nicht
aufgeblasen.
========================================================================== */
/* --- Notebook (bis 1440px): Navigation bricht in zwei Zeilen um --------- */
@media (max-width: 1440px){
:root{ --kopf-h: 128px; }
.topbar nav a{ padding: 7px 9px!important; font-size: 12.5px!important; }
main{ max-width: 100%!important; }
}
/* --- Tablet quer (bis 1100px) ----------------------------------------- */
@media (max-width: 1100px){
:root{ --kopf-h: 172px; }
.card{ padding: 18px 18px 20px; }
h1{ font-size: 23px; }
.calendar-sidebar-v119{
border-right: 0!important;
border-bottom: 1px solid var(--linie)!important;
}
body.calendar-page-full-v121 .calendar-sidebar-v119,
body.calendar-page-full-v121 .calendar-content-v119{ min-height: 0!important; }
body.calendar-page-full-v121 .year-grid-v119{ min-height: 0!important; }
}
/* --- Tablet hoch / kleines Notebook (bis 900px) ------------------------ */
@media (max-width: 900px){
.topbar > div:first-child{ min-height: 34px; font-size: 12px; }
.topbar nav{ padding: 6px 10px 8px!important; gap: 3px!important; }
.topbar nav a{
min-height: 40px;
padding: 8px 11px!important;
font-size: 13.5px!important;
}
.topbar nav > span{ min-height: 38px; }
main{ margin: 16px auto 40px!important; padding: 0 14px!important; }
.card{ padding: 16px 15px 18px; border-radius: var(--r-lg); }
h1{ font-size: 22px; }
h2{ font-size: 17.5px; }
.order{ padding: 12px 13px 13px; }
.order p{ gap: 6px; }
.editbtn, .map, .routebtn, .takeover-btn{ min-height: 44px!important; }
.pp-tab{ font-size: var(--t-sm); }
.calendar-view-switch-v119 .calviewbtn,
.navbtn-v119{ min-height: 40px; }
}
/* --- Smartphone und schmales Tablet (bis 768px) ------------------------
Neunzehn Menuepunkte ergeben auf einem 375 Pixel breiten Handy zehn
umgebrochene Zeilen - gemessen 469 Pixel, also mehr als die halbe
Bildschirmhoehe. Deshalb steht die Navigation hier in EINER Zeile, die
seitlich geschoben wird. Ein weicher Farbverlauf am rechten Rand zeigt,
dass es weitergeht. Die Kopfzeile bleibt damit bei rund 80 Pixeln und
darf oben stehen bleiben.
---------------------------------------------------------------------- */
@media (max-width: 768px){
.topbar{
position: sticky!important;
top: 0!important;
overflow: hidden;
}
.topbar nav{
flex-wrap: nowrap!important;
width: 100%!important;
max-width: 100%!important;
min-width: 0!important;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 5px 30px 6px 10px!important;
gap: 2px!important;
scroll-padding-inline: 10px;
}
.topbar nav::-webkit-scrollbar{ display: none; }
.topbar nav a{
flex: 0 0 auto;
min-height: 44px; /* Fingerflaeche nach WCAG 2.5.5 */
padding: 8px 11px!important;
}
.topbar nav > span{
flex: 0 0 auto;
margin-left: 6px!important;
min-height: 40px;
}
.topbar::after{ /* Hinweis: die Zeile geht weiter */
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 34px;
height: 56px;
pointer-events: none;
background: linear-gradient(to right, rgba(15,23,42,0), var(--nav) 72%);
}
}
/* --- Smartphone (bis 640px) ------------------------------------------- */
@media (max-width: 640px){
main{ padding: 0 12px!important; }
.card{ padding: 14px 13px 16px; }
h1{ font-size: 20px; }
h2{ font-size: 16.5px; }
/* 16px verhindert das automatische Hineinzoomen unter iOS. */
input, select, textarea{ font-size: 16px; min-height: 42px; }
button{ min-height: 44px; width: auto; }
.order .danger, .cal-loesch-knopf{ min-height: 40px; }
.order p{ flex-direction: column; align-items: stretch; }
.order p > a, .order p > span{ justify-content: center; text-align: center; }
.nzp-monteur-btn, .overview-monteur-chip{ min-height: 40px; }
.zug-karte{ padding: 14px; }
.pp-zahlen{ grid-template-columns: repeat(2, minmax(0,1fr)); }
/* Die beiden Erinnerungsbanner belegten zusammen 234 von 812 Pixeln
Bildschirmhoehe. Auf dem Handy deshalb deutlich kompakter. */
.hinweis-leiste{ left: 8px; right: 8px; bottom: 8px; gap: 6px; max-height: 46vh; }
.termin-warnung{
padding: 9px 11px!important;
gap: 8px!important;
font-size: 12px!important;
line-height: 1.4;
}
.termin-warnung-text{ flex: 1 1 100%!important; }
.termin-warnung-btn{ padding: 6px 12px!important; font-size: 12.5px!important; min-height: 32px; }
.termin-warnung-zu{ padding: 4px 9px!important; min-height: 28px; }
.version-badge{ right: 8px; bottom: 8px; }
/* Sonst liegt die Versionsmarke auf den Bannern. */
body:has(#hinweis-leiste .termin-warnung) .version-badge{ display: none!important; }
}
/* --- Kalender auf dem Smartphone -------------------------------------- */
/* Das Wochenraster stand fest auf sieben Spalten zu mindestens 95 Pixeln
(707 Pixel plus Abstaende). Auf einem 375 Pixel breiten Handy lief die
Seite dadurch seitlich ueber. Unter 760 Pixeln stehen die Tage jetzt
untereinander - so war es in der Grundfassung auch gedacht. */
@media (max-width: 760px){
.calendar-content-v119 .calendar-main-grid,
.calendar-content-v119 .calendar-main-grid.view-month,
.calendar-content-v119 .calendar-main-grid.view-week{
grid-template-columns: minmax(0, 1fr)!important;
}
.calendar-content-v119 .calendar-grid.header{ display: none!important; }
body.calendar-page-full-v121 .calendar-content-v119 .calendar-main-grid.view-month .calday,
body.calendar-page-full-v121 .calendar-content-v119 .calendar-main-grid.view-week .calday,
body.calendar-page-full-v121 .calendar-content-v119 .calendar-main-grid.view-day .calday{
min-height: 84px!important;
}
/* Tage der Nachbarmonate treten zurueck - sie werden bewusst NICHT
ausgeblendet, weil das Kalenderskript die Zellen der Reihe nach
durchgeht. */
.calendar-content-v119 .calday.muted{ opacity: .3; }
body.calendar-page-full-v121 .mini-day-v119{ min-height: 34px!important; }
}
/* Sicherheitsnetz gegen seitlichen Ueberlauf: Raster mit 1fr entsprechen
minmax(auto,1fr) - auto ist die Inhaltsbreite und kann breiter werden als
die Spalte. Flex-Elemente ohne min-width:0 tun dasselbe. */
.grid2, .orders, .zug-karten, .planner-monteurs, .pp-zahlen,
.filegrid, #previewArea, .pp-hinweise{ min-width: 0; }
.grid2 > *, .orders > *, .zug-karten > *, .pp-zahlen > *,
.planner-monteurs > *, .pp-hinweise > *{ min-width: 0; }
.order-head, .pp-objekt-kopf, .cal-paket-leiste, .nzp-monteur-leiste,
.overview-filter-calendar-style, .ib-suche, .calhead{ min-width: 0; }
.order-head > *, .pp-objekt-kopf > *{ min-width: 0; }
/* Bewusst "break-word" und NICHT "anywhere": "anywhere" fliesst in die
Mindestbreitenberechnung ein und zerlegt in engen Tabellenspalten sogar
Namen buchstabenweise ("Mlad / en / Basta / sic"). "break-word" bricht
nur dann, wenn ein Wort sonst wirklich herauslaufen wuerde. */
.pp-objekt, .card, .order, .zug-karte{ overflow-wrap: break-word; }
table{ max-width: 100%; }
/* Lange E-Mail-Adressen, Dateinamen und Auftragsnummern duerfen umbrechen. */
.pp-objekt-name, .order > div, .zug-frisch-wert, .ib-text{ overflow-wrap: break-word; }
/* ==========================================================================
18 · SCHUTZ DER MILLIMETERGENAUEN DRUCKVORLAGEN
--------------------------------------------------------------------------
Plakate, Anmeldebriefe und Postkarten sind auf die amtlichen Vordrucke
kalibriert: Die Felder stehen mit absoluten Millimeterangaben an ihrem
Platz. Eine andere Schrift hat andere Buchstabenbreiten - eine Zeile
koennte dadurch anders umbrechen oder ueber eine Linie laufen.
Deshalb behalten alle Druckbereiche ausdruecklich die bisherige Schrift
und die bisherige Bilddarstellung. Hier wird nichts "verschoenert".
Dieser Abschnitt steht bewusst am Ende, damit er die allgemeinen Regeln
weiter oben ueberschreibt.
========================================================================== */
.poster-print-page, .poster-print-page *,
.poster-bg-preview-landscape, .poster-bg-preview-landscape *,
body.poster-only-print, body.poster-only-print *,
.poster-field, .poster-l-field, .poster-check, .poster-l-check,
.pc-bg, .pc-bg *, .pc-card, .pc-card *, .pc-field, .pc-check,
.minol-letter-page, .minol-letter-page *,
.metrona-letter-page, .metrona-letter-page *{
font-family: Arial, Helvetica, sans-serif;
}
/* Bildhoehen in den Vorlagen nicht antasten - die Hintergrundbogen sind auf
feste Masse gelegt. */
.poster-print-page img,
.poster-bg-preview-landscape img,
body.poster-only-print img,
.pc-bg img, .pc-card img,
.minol-letter-page img, .metrona-letter-page img{
height: revert;
border-radius: 0;
margin-top: 0;
max-width: none;
}
/* ==========================================================================
19 · DRUCK
Auf Papier zaehlt der Inhalt. Flaechen, Schatten und Rahmen weg.
Die Plakat-, Brief- und Postkartenvorlagen sind ausgenommen - sie bringen
ihre eigenen, kalibrierten Druckregeln mit.
========================================================================== */
@media print{
/* ":not(.poster-only-print)" schuetzt die Plakat- und Sammeldruckseiten:
dort bestimmen die kalibrierten Regeln aus style.css die Schriftgroessen. */
body:not(.poster-only-print){
background: #fff!important;
color: #000!important;
font-size: 11pt;
}
body:not(.poster-only-print) main{
max-width: none!important;
margin: 0!important;
padding: 0!important;
}
body:not(.poster-only-print) .card,
body:not(.poster-only-print) .order,
body:not(.poster-only-print) .pp-objekt,
body:not(.poster-only-print) .zug-karte,
body:not(.poster-only-print) .filecard{
border: 1px solid #999!important;
border-radius: 0!important;
box-shadow: none!important;
background: #fff!important;
}
body:not(.poster-only-print) .pp-tab th,
body:not(.poster-only-print) .qual-tabelle th{
border-bottom: 1px solid #000!important;
color: #000!important;
}
body:not(.poster-only-print) .pp-objekt,
body:not(.poster-only-print) .order{ break-inside: avoid; }
body:not(.poster-only-print) a{
color: #000!important;
text-decoration: none!important;
}
/* Kalenderbalken behalten ihre Farbe auch auf Papier - sonst ist der
Tagesplan nicht mehr nach Monteur zu unterscheiden. */
.calorder, .monteur-badge{
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}