/* ========================================================================== F-096: Die Firmenfarben an EINER Stelle ========================================================================== Vorher standen 88 verschiedene Farbwerte im Programm - fuenf Rot, sechs Amber, sechs Gruen und achtzehn fast gleiche helle Flaechen. Nebeneinander sieht man das sofort, und es gab keinen Ort, an dem sich das aendern liess. Jetzt gibt es drei Sorten Farbe, und jede hat ihre Aufgabe: --... die TEXTfarbe. Dunkel genug, um sie zu lesen. --...signal die FUELLfarbe: Balken, Punkte, Raender. Kraeftig. --...flaeche der blasse HINTERGRUND hinter einer Meldung. Wer eine neue Farbe braucht, nimmt eine von hier. Steht eine passende nicht dabei, kommt sie hierher - nicht in die Datei daneben. Geprueft wird das mit werkzeug/optikprobe.js. */ :root{ --navy:#102D57; --navydunkel:#0A1F3D; --navyhell:#1A3A66; --gelb:#FFF200; --gelbdunkel:#E0C200; --grau:#D3D2D2; --bg:#F2F4F7; --linie:#DDE3E9; --text:#24313F; --textleise:#55606C; /* Die drei Meldefarben, je in Text, Signal und Flaeche */ --gruen:#1F5B43; --gruensignal:#1F9D55; --gruenflaeche:#E7F3EC; --rot:#8C1D18; --rotsignal:#D64545; --rotflaeche:#FBE9E7; --amber:#7A5600; --ambersignal:#E9A23B; --amberflaeche:#FBF0DA; /* Helle Flaechen. --flaeche fuer eingerueckte Zeilen und Kaesten, --flaecheleise fuer das, was einen Schritt blasser sein soll. --flaeche wurde im Programm schon benutzt, war aber nirgends festgelegt - die Zeilen standen deshalb ohne Hintergrund da. */ --flaeche:#F4F7FA; --flaecheleise:#F7F9FB; --linieleise:#E8EDF1; /* F-124: Das Grau der leisen Zeichen - der Anfasser in der Fensterecke, das Kreuz zum Wegnehmen einer Zeile. Steht hier und nicht im Programm, damit es EINE Stelle gibt (siehe werkzeug/optikprobe.js). */ --iconleise:#8A93A5; /* Leiser Text, eine Stufe blasser als --textleise: Zahlen auf leeren Kacheln, Platzhalter. */ --textleer:#8A9099; /* Das Signal fuer "nichts Besonderes" - neben --gruensignal, --ambersignal und --rotsignal die vierte, ruhige Stufe. */ --leisesignal:#9FB4CC; /* Zwei Akzente, die keinen Zustand meinen, sondern eine Herkunft unterscheiden: Blau fuer das Projekt, Lila fuer die Firma. Sie standen vorher als #7A6BA8 UND #7A6CA8 im Programm - zwei Werte, einen Farbschritt auseinander, und keiner wusste davon. */ --blausignal:#3C6E8F; --lilasignal:#7A6CA8; /* DE5 (Freddy 04.10.2026): EIN Raster für alle Seiten - Abstände, Rundungen, Knopfmaße. Wer etwas Neues baut, nimmt diese Werte; eine Änderung hier wirkt überall. */ --abstand:16px; --abstandklein:8px; --abstandgross:24px; --rund:8px; --rundblock:10px; --knopfhoehe:34px; --knopfhoeheklein:28px; } *{box-sizing:border-box} body{margin:0;font-family:'IBM Plex Sans',system-ui,sans-serif;background:var(--bg);color:var(--text)} a{color:var(--navy)} .verborgen{display:none !important} /* Anmeldung */ #anmeldung{min-height:100vh;display:flex;align-items:center;justify-content:center} .karte{background:#fff;border:1px solid #E2E7ED;border-radius:12px;padding:28px 30px;width:360px; box-shadow:0 2px 12px rgba(16,45,87,.08)} .marke{display:flex;align-items:center;gap:11px;margin-bottom:20px} .marke .balken{width:10px;height:36px;background:var(--gelb);border-radius:2px} .marke .name{font-weight:700;font-size:21px;letter-spacing:1.6px;color:var(--navy);line-height:1} .marke .unter{font-size:10.5px;letter-spacing:.9px;color:var(--textleise);text-transform:uppercase;margin-top:4px} label{display:block;font-size:11px;letter-spacing:.7px;text-transform:uppercase;color:var(--textleise);font-weight:600;margin-bottom:5px} input,select,textarea{width:100%;height:36px;padding:0 11px;border:1px solid var(--linie);border-radius:7px; background:#fff;font-family:inherit;font-size:13px;color:var(--text);outline:none} textarea{height:auto;padding:9px 11px} input:focus,select:focus{border-color:var(--navy)} /* Ein Haken ist kein Eingabefeld: ohne diese Zeile waere er 100 % breit und 36 Pixel hoch, und der Text daneben rutschte in die naechste Zeile. Betrifft jeden Haken im Programm. */ input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0; margin:0 5px 0 0;flex:none;accent-color:var(--navy);vertical-align:middle} .feld{margin-bottom:13px} /* F-096: Vier Knopfgroessen, mehr nicht. Vorher standen sieben verschiedene Hoehen als feste Angabe im Programm - 20, 22, 24, 28, 30, 32, 34 -, und nebeneinander sah man das. .knopf 38px die Haupthandlung einer Maske .knopf.klein 30px eine Handlung in einer Kopfzeile .minknopf 26px die kleine Handlung an einer Zeile .minknopf.winzig 22px in einer engen Tabellenzelle */ .knopf{height:38px;padding:0 16px;border:0;border-radius:7px;background:var(--gelb);color:var(--navy); font-family:inherit;font-size:13px;font-weight:600;cursor:pointer} .knopf.leise{background:#fff;border:1px solid #C9D2DB;color:var(--navy);font-weight:500} /* FA4: „betont“ - ein Schritt, der dran ist, oder „hier fehlt etwas“: weiß mit gelbem Rand (gelb gefüllt ist nur der EINE Hauptknopf) */ .knopf.betont{background:#fff;border:2px solid var(--gelb);box-shadow:inset 0 0 0 1px #D9CC00;color:var(--navy);font-weight:700} .knopf.klein{height:30px;padding:0 13px;font-size:12.5px} .fehler{color:var(--rot);font-size:12.5px;margin-top:10px} /* Rahmen */ #app{display:flex;min-height:100vh} aside{width:236px;flex-shrink:0;background:var(--navydunkel);display:flex;flex-direction:column;position:sticky;top:0;height:100vh} aside .kopf{padding:18px 20px;border-bottom:1px solid #1E3C69;display:flex;align-items:center;gap:11px} aside .kopf .name{color:#fff} nav{flex-grow:1;padding:12px;display:flex;flex-direction:column;gap:1px} nav a{display:flex;align-items:center;gap:11px;padding:8px 12px;border-radius:6px;color:#C6D0DB; font-size:13.5px;text-decoration:none} nav a.aktiv{background:var(--navyhell);box-shadow:inset 3px 0 0 var(--gelb);color:#fff;font-weight:500} nav a.gesperrt{color:#5E7593;cursor:default} aside .fuss{padding:12px 16px;border-top:1px solid #1E3C69;display:flex;align-items:center;gap:10px} aside .fuss .kreis{width:32px;height:32px;border-radius:16px;background:var(--gelb);color:var(--navy); font-weight:600;font-size:12.5px;display:flex;align-items:center;justify-content:center} aside .fuss .wer{color:#fff;font-size:13px;font-weight:500} aside .fuss .rolle{color:#96A6B8;font-size:11px} main{flex-grow:1;min-width:0;display:flex;flex-direction:column} header{min-height:60px;flex-shrink:0;background:#fff;border-bottom:1px solid var(--linie); display:flex;align-items:center;gap:13px;padding:8px 24px;box-sizing:border-box;flex-wrap:wrap} /* Pruef-Durchlauf 02.10.2026: Kopf bleibt oben; Knoepfe brechen um statt seitlich hinauszulaufen */ .kopfbereich{position:sticky;top:0;z-index:40} #kopfknoepfe{min-width:0} header h1{margin:0;font-size:18px;font-weight:700;color:var(--navy)} .leiste{height:40px;background:var(--gelb);display:flex;align-items:center;gap:12px;padding:0 20px; font-size:12.5px;color:#3D3100} .leiste b{color:var(--navy);letter-spacing:.4px} .wachsen{flex-grow:1} .schalter{display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:16px; background:#EAF1EC;border:1px solid #C7DCCD;font-size:12.5px;font-weight:500;color:var(--gruen);cursor:pointer} .schalter.test{background:#FFFCF2;border-color:#F0E3C0;color:var(--amber)} .punkt{width:8px;height:8px;border-radius:4px;background:var(--gruen)} .schalter.test .punkt{background:#E0A800} .inhalt{flex-grow:1;padding:18px 24px;display:flex;gap:16px;min-height:0} .block{background:#fff;border:1px solid #E2E7ED;border-radius:10px;padding:16px 18px} h2{margin:0;font-size:15px;font-weight:600;color:var(--navy)} table{width:100%;border-collapse:collapse;font-size:13px} /* F-122: Zwischen zwei Spalten gehoert Luft. Vorher stand hier padding:9px 0 - oben und unten Platz, links und rechts keiner. Solange eine Spalte kuerzer war als ihre Breite, fiel das nicht auf; sobald sie ausgefuellt war, klebten zwei Woerter aneinander: "ArbeitsleistungPROBE Wand" und in der Kopfzeile "EINHEITAVV". Mit der ziehbaren Trennlinie wird die Liste links absichtlich schmal - da wurde aus der Unsauberkeit ein echtes Leseproblem. Nur RECHTS Luft, nicht links: so bleibt die erste Spalte buendig mit allem anderen im Kasten. Die letzte Spalte bekommt einen Rand nach innen, und das stoert nicht. */ th{text-align:left;color:var(--textleise);font-size:11px;letter-spacing:.6px;text-transform:uppercase; font-weight:600;padding:0 14px 8px 0} td{padding:9px 14px 9px 0;border-top:1px solid #EDF1F4} th:last-child,td:last-child{padding-right:0} tbody tr{cursor:pointer} tbody tr:hover{background:#F7F9FB} tbody tr.aktiv{background:#FFFCE0;box-shadow:inset 3px 0 0 var(--gelb)} .marke-chip{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500; background:#F0F2F5;color:#4A5560} .chip-gruen{background:#EAF1EC;color:var(--gruen)} /* E4 (Freddy 04.10.2026): Status-Chips nie Gelb (Gelb nur Knöpfe) - ruhig: Grau = Entwurf, Blau = gesendet/in Arbeit, Grün = beauftragt/bezahlt, Rot = überfällig. Die alte Klasse chip-gelb ist jetzt das ruhige Blau. */ .chip-gelb,.chip-blau{background:#E6EEF8;color:#1F4E8C} .chip-grau{background:#EEEEEE;color:var(--textleise)} .chip-amber{background:#FBE9E9;color:#A12626} /* E4: Warn-Chip (z. B. „gefährlich“) rot statt gelb */ /* Der Kasten "Sieht aus wie ein vorhandener Eintrag" ging im blassen Gelb unter - man sah ihn erst, wenn man ihn suchte. Jetzt deutlich oranger: auffaellig genug zum Hinsehen, aber nicht rot. Rot heisst in diesem Programm "da ist etwas kaputt", und ein moeglicher Doppeleintrag ist nichts Kaputtes, sondern eine Frage. */ .hinweis{padding:10px 12px;background:#FFF4E3;border:1px solid #E8A33D; border-left:4px solid #D9770F;border-radius:8px; font-size:12.5px;color:#8A4B08} .zeile{display:flex;gap:12px} .zeile > *{flex:1;min-width:0} .leer{padding:26px;text-align:center;color:var(--textleise);font-size:13px} /* Meldungen */ .fehlerkasten{margin-top:10px;padding:9px 11px;background:#FBEAE8;border:1px solid #F0CFCB; border-radius:8px;font-size:12.5px;color:var(--rot)} .erfolgkasten{margin-top:10px;padding:9px 11px;background:#EAF1EC;border:1px solid #C7DCCD; border-radius:8px;font-size:12.5px;color:var(--gruen)} .reihe{display:flex;align-items:flex-start;gap:8px;padding:9px 11px;border:1px solid #E8ECF1; border-radius:8px;margin-bottom:7px} .reihe .werkzeuge{display:flex;gap:5px;flex-shrink:0} .minknopf{height:26px;padding:0 9px;border:1px solid #C9D2DB;background:#fff;color:var(--navy); border-radius:6px;font-family:inherit;font-size:11.5px;cursor:pointer} .minknopf.gefahr{border-color:#E3B7B3;color:var(--rot)} .minknopf.winzig{height:22px;padding:0 7px;font-size:11px} /* F-096: Eine Knopfbeschriftung bricht nie um. "Punkt setzen" auf zwei Zeilen macht den Knopf doppelt so hoch wie den daneben, und in einer Reihe sieht man das sofort. */ .knopf,.minknopf{white-space:nowrap} /* =========================================================================== F-108 und F-109: Reiter =========================================================================== Vorher waren Reiter dieselben Knoepfe wie "Papiere einlesen", nur der aktive gelb. Dadurch sah alles gleich wichtig aus: der Reiter, auf dem man steht, und der Knopf, mit dem man etwas tut. Ab jetzt gilt im ganzen Programm: Reiter = Navy, wenn man darauf steht, sonst weiss. Gelb = nur Knoepfe, mit denen man etwas TUT. Und die Reiter stehen in einer eigenen Zeile unter der Kopfleiste, immer an derselben Stelle - vorher haben sie sich je nach Laenge der Ueberschrift und der Knopfbeschriftung seitlich verschoben. */ .reiterleiste{flex-shrink:0;background:#fff;border-bottom:1px solid var(--linie); padding:0 24px;height:48px;display:flex;align-items:center;gap:0} /* Freddy 03.10.2026: Die Einstellungen haben 17 Bereiche - die Leiste bricht um, statt rechts aus dem Bild zu laufen. Mit einer Reihe bleibt sie 48px hoch. */ .reiterleiste{height:auto;min-height:48px;flex-wrap:wrap;row-gap:6px;padding-top:6px;padding-bottom:6px} .reiter{height:34px;padding:0 16px;border:1px solid #C9D2DB;border-radius:7px;background:#fff; color:var(--navy);font-family:inherit;font-size:13px;font-weight:500;cursor:pointer; white-space:nowrap} .reiter.an{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600} .reiter:hover:not(.an){background:var(--flaecheleise)} .reiter.klein{height:30px;padding:0 13px;font-size:12.5px} /* Aneinandergereiht: eine Leiste, keine Knopfsammlung. */ .reiterleiste .reiter{border-radius:0;margin-left:-1px} .reiterleiste .reiter:first-child{border-radius:7px 0 0 7px;margin-left:0} .reiterleiste .reiter:last-child{border-radius:0 7px 7px 0} .reiterleiste .reiter:only-child{border-radius:7px} /* Der aktive muss ueber seinen Nachbarn liegen, sonst frisst deren Rahmen seine Kante an. */ .reiterleiste .reiter.an{position:relative;z-index:1} /* F-108: Die Kopfleiste bricht nicht mehr um. Die Ueberschrift gibt nach, die Knoepfe bleiben, wo sie sind. */ header{flex-wrap:nowrap} header h1{white-space:nowrap} header #untertitel{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #kopfknoepfe{flex-shrink:0} /* Rollenfilter */ .filterzeile{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:11px} .filterchip{padding:4px 11px;border-radius:13px;border:1px solid var(--linie);background:#fff; font-family:inherit;font-size:12px;color:var(--textleise);cursor:pointer} /* F-109: Der eingeschaltete Filter ist ein Reiter, kein Knopf - er tut nichts, er zeigt nur, wo man steht. Deshalb Navy statt Gelb. */ .filterchip.an{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600} /* Artikelstamm */ .preistabelle{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:10px} .preistabelle th{padding:0 0 7px} .preistabelle td{padding:8px 0;border-top:1px solid #EDF1F4;vertical-align:top} .best{background:#F7FBF8} .begriffzeile{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px} .begriff{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:11px; background:#F0F2F5;color:#4A5560;font-size:11.5px} .begriff button{border:0;background:transparent;color:#8A94A0;cursor:pointer;font-size:13px;line-height:1;padding:0} .unterzeile{padding:8px 11px;background:#F7F9FB;border:1px solid #E8ECF1;border-radius:7px;margin-top:6px} /* Felder anlernen */ .ueberlagerung{position:fixed;inset:0;background:rgba(10,31,61,.55);z-index:50;display:flex; align-items:center;justify-content:center;padding:24px} .lernfenster{background:#fff;border-radius:12px;width:100%;max-width:1180px;max-height:92vh; display:flex;flex-direction:column;overflow:hidden} .lernkopf{padding:14px 20px;border-bottom:1px solid var(--linie);display:flex;align-items:center;gap:14px} .lernkoerper{flex-grow:1;display:flex;min-height:0} .lernbild{flex-grow:1;overflow:auto;background:#E4E8ED;padding:16px;position:relative} .lernrahmen{position:relative;display:inline-block;line-height:0;box-shadow:0 2px 10px rgba(16,45,87,.2)} .lernrahmen img{max-width:100%;height:auto;display:block;cursor:crosshair;user-select:none} .markierung{position:absolute;border:2px solid var(--gelb);background:rgba(255,242,0,.22);pointer-events:none} .gemerkt{position:absolute;border:2px solid var(--navy);background:rgba(16,45,87,.10);pointer-events:none} .gemerkt span{position:absolute;top:-17px;left:-2px;background:var(--navy);color:#fff;font-size:10.5px; padding:1px 5px;border-radius:3px;white-space:nowrap} .lernseite{width:300px;flex-shrink:0;border-left:1px solid var(--linie);padding:16px;overflow:auto} /* Anzeigeleiste beim Auslesen eines Belegs */ .leseleiste { margin-top: 12px; padding: 11px 13px; border: 1px solid var(--linie); border-radius: 6px; background: #FBFCFD; } .leseleistetext { font-size: 12.5px; color: var(--navy); margin-bottom: 8px; } .leseschiene { height: 7px; border-radius: 4px; background: var(--grau); overflow: hidden; } .leseschiene > i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--gelb); transition: width .35s ease; } /* Sicherheitsabfrage vor dem endgültigen Löschen */ .fragefenster { width: 430px; max-width: calc(100vw - 32px); background: #fff; border-radius: 10px; padding: 22px 24px 24px; box-shadow: 0 18px 50px rgba(16,45,87,.28); } .fragefenster h2 { color: var(--navy); } /* Pruef-Durchlauf 02.10.2026: Rot nur noch bei Loesch- und Stornofragen */ .fragefenster.warnung h2 { color: var(--rot); } /* Pruef-Durchlauf (fehler.md 37, Vorschlag 10): Anlege-Masken, die noch das einfache Fenster nutzen, bekommen denselben navy Kopf wie anlegeFenster. Sticky, damit der Titel beim Blaettern im langen Formular stehen bleibt. */ .fragefenster.anlegen { padding-top: 0; } .fragefenster.anlegen > h2:first-child { position: sticky; top: 0; z-index: 2; margin: 0 -24px 14px; padding: 14px 24px; background: var(--navy); color: #fff; font-size: 18px; border-radius: 10px 10px 0 0; } .fragetext { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--text); } .knopf.gefahrknopf { background: var(--rot); color: #fff; border-color: var(--rot); } .knopf.gefahrknopf:disabled { background: #E7D5D4; border-color: #E7D5D4; color: #fff; cursor: not-allowed; } /* Positionstabelle im Angebot */ .postabelle { width: 100%; border-collapse: collapse; } .postabelle th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--textleise); font-weight: 600; padding: 0 6px 7px; border-bottom: 1px solid var(--linie); } .postabelle td { padding: 5px 6px; border-bottom: 1px solid #F0F3F6; vertical-align: top; } .postabelle tr:hover > td { background: rgba(16,45,87,.02); } .postabelle tr.kalkzeile:hover > td { background: #F8FAFC; } .postabelle input, .postabelle select, .postabelle textarea { font-size: 12.5px; } /* Dashboard-Kacheln */ .kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; } .kachel { background: #fff; border-radius: 10px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(16,45,87,.06), 0 1px 12px rgba(16,45,87,.04); } .kachel.klickbar { cursor: pointer; transition: box-shadow .15s, transform .15s; } .kachel.klickbar:hover { box-shadow: 0 3px 16px rgba(16,45,87,.14); transform: translateY(-1px); } .kachelkopf { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--textleise); font-weight: 600; } .kachelwert { font-size: 25px; font-weight: 700; color: var(--navy); margin-top: 7px; line-height: 1.1; } .kachelfuss { font-size: 11.5px; color: var(--textleise); margin-top: 6px; } /* --------------------------------------------------------------------------- Bauzeitenplan Ein Balkenplan ohne Fremdbibliothek. Der Aufbau ist bewusst einfach: eine Spalte je Tag, feste Breite, Balken absolut darüber gelegt. Dadurch lassen sich Wochenenden und Feiertage einfach als graue Spalte hinterlegen. --------------------------------------------------------------------------- */ .planrahmen{overflow-x:auto;overflow-y:visible;border:1px solid var(--linie);border-radius:9px;background:#fff} .plangitter{position:relative;min-width:max-content} /* Kopfzeile mit Monat und Tag */ .plankopf{position:sticky;top:0;z-index:4;background:#fff;border-bottom:1px solid var(--linie)} .planmonate,.plantage{display:flex} .planmonat{font-size:11.5px;font-weight:600;color:var(--navy);padding:6px 0 4px 8px; border-left:1px solid var(--linie);white-space:nowrap;text-transform:uppercase;letter-spacing:.6px} /* F-096: Das Tageslineal im Bauzeitenplan ist die zweite Ausnahme. Ein Tag ist 22 Pixel breit; groesser passt die Zahl nicht hinein. */ .plantag{width:var(--tagbreite,22px);flex:0 0 var(--tagbreite,22px);text-align:center;font-size:9.5px;color:var(--textleise); padding:2px 0 5px;border-left:1px solid #F0F3F6} .plantag.frei{background:#EEF1F4;color:#96A6B8} .plantag.heute{background:var(--gelb);color:var(--navy);font-weight:700} .plantag .wt{display:block;font-size:8.5px;opacity:.75;line-height:1.1} /* Namensspalte links, bleibt beim Wegscrollen stehen */ .planzeile{display:flex;align-items:stretch;border-bottom:1px solid #F0F3F6;min-height:30px} .planname{position:sticky;left:0;z-index:3;width:260px;flex:0 0 260px;background:#fff; border-right:1px solid var(--linie);padding:5px 10px;font-size:12px;display:flex; align-items:center;gap:7px} .planzeile.baustelle{background:#F7F9FB} .planzeile.baustelle .planname{background:#F7F9FB;font-weight:600;color:var(--navy);font-size:12.5px} .planfeld{position:relative;display:flex;flex-grow:1} .plansaeule{width:var(--tagbreite,22px);flex:0 0 var(--tagbreite,22px);border-left:1px solid #F5F7F9} .plansaeule.frei{background:#EEF1F4} .plansaeule.heute{background:rgba(255,242,0,.28)} /* Die Balken */ .planbalken{position:absolute;top:4px;height:20px;border-radius:4px;display:flex;align-items:center; padding:0 7px;font-size:10.5px;color:#fff;white-space:nowrap;overflow:hidden;cursor:pointer; box-shadow:0 1px 2px rgba(16,45,87,.18)} .planbalken:hover{filter:brightness(1.08)} .planbalken.abschnitt{background:var(--navy)} .planbalken.mitarbeiter{background:#2F7D62} .planbalken.subunternehmer{background:#7A6CA8} .planbalken.betriebsmittel{background:#B5761F} .planbalken.konflikt{outline:2px solid #D64545;outline-offset:1px} .planbalken .fortschritt{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.28)} .planbalken .text{position:relative} /* Der Rahmen der Baustelle selbst, aus ihren Eckdaten */ .planrahmenbalken{position:absolute;top:6px;height:16px;border:1.5px solid var(--navy); border-radius:4px;background:rgba(16,45,87,.06)} .plangruppe{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--textleise)} .planpunkt{width:8px;height:8px;border-radius:2px;flex:0 0 8px} /* --------------------------------------------------------------------------- Auf dem Telefon (F-039) --------------------------------------------------------------------------- Das Programm ist fuer den Schreibtisch gebaut, und dabei bleibt es. Aber ein Aufmass entsteht nicht am Schreibtisch, sondern im Haus, mit dem Lasergeraet in der einen und dem Telefon in der anderen Hand. Bis es die Mitarbeiter-App gibt, ist der Browser auf dem Telefon der einzige Weg dorthin - und bis hierher war der unbenutzbar: die Seitenleiste nahm zwei Drittel des Bildschirms, und die Fenster standen halb daneben. Das hier macht daraus keine App. Es macht das Programm auf einem kleinen Bildschirm bedienbar. Das ist etwas anderes, und es steht auch so in der Anleitung. --------------------------------------------------------------------------- */ /* =========================================================================== F-095: Die Projektkacheln =========================================================================== Vier nebeneinander, so steht es auf dem Entwurf. Auf einem schmalen Bildschirm werden es weniger - vier Kacheln zu je 150 Pixel liest niemand mehr. Das gehoert hierher und nicht ins Programm: eine Bildschirmbreite ist eine Frage der Darstellung. */ .kachelraster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; } /* F-096: In einer schmalen Spalte - der Kundenstamm hat die Liste links daneben - passen keine vier Kacheln nebeneinander. Die Bildschirmbreite hilft da nicht weiter: der Bildschirm ist breit, die Spalte nicht. Deshalb setzt die Kachelansicht diese Klasse, wenn sie beim Aufbauen misst, dass es eng ist. */ .kachelraster.schmal { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kachelraster.sehrschmal { grid-template-columns: 1fr; } @media (max-width: 1180px) { .kachelraster { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .kachelraster { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .kachelraster { grid-template-columns: 1fr; } } /* Eine Kachel, auf der man steht, hebt sich leicht ab - sonst weiss man bei fuenfzehn gleich aussehenden Kaesten nicht, welcher gleich aufgeht. */ .projektkachel:hover { border-color: var(--navy); } @media (max-width: 860px) { #app { flex-direction: column; } /* Aus der Seitenleiste wird ein Streifen oben, durch den man wischt */ aside { width: auto; height: auto; position: sticky; top: 0; z-index: 20; flex-direction: row; align-items: center; } /* Gegenpruefung Runde 27: Am Tablet/Handy ist schon der Menuestreifen fest - der Kopf blaettert mit, sonst laege er darueber und naehme den halben Schirm */ .kopfbereich { position: static; } /* Am Handy hat das Fenster nur 15px Rand - der navy Kopf zieht nur so weit heraus */ .fragefenster.anlegen > h2:first-child { margin: 0 -15px 14px; padding: 12px 15px; } aside .kopf { padding: 10px 13px; border-bottom: none; border-right: 1px solid #1E3C69; flex: none; } aside .kopf .unter { display: none; } aside .kopf .name { font-size: 18px; letter-spacing: 1.2px; } aside .fuss { display: none; } nav { flex-direction: row; flex-wrap: nowrap; gap: 3px; padding: 7px 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; } nav a { white-space: nowrap; padding: 8px 11px; font-size: 13px; } nav a.aktiv { box-shadow: inset 0 -3px 0 var(--gelb); } /* F-071: Ziehen geht auf dem Telefon ohnehin nicht, und in der waagerechten Leiste wuerde der Hinweis nur Platz wegnehmen. */ .navifuss { display: none; } header { height: auto; flex-wrap: wrap; padding: 10px 13px; gap: 9px; } header h1 { font-size: 15px; } /* Die Spalten stehen untereinander statt nebeneinander */ .inhalt { flex-direction: column; padding: 12px 12px 48px; gap: 12px; } /* Ohne min-width:0 wachsen Flex-Kinder auf ihren Inhalt und schieben die ganze Seite seitlich hinaus. Dann laesst sich nichts mehr antippen, ohne dass das Bild verrutscht. */ .inhalt > * { min-width: 0; max-width: 100%; } /* Ein Kasten, dessen Inhalt nicht schmaler wird - eine Zahlenreihe, eine Eingabezeile -, bekommt seinen eigenen Schieber, statt die Seite zu sprengen. */ .block { padding: 13px 14px; overflow-x: auto; min-width: 0; } .kacheln { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; } /* Fenster nehmen den ganzen Bildschirm und beginnen oben - sonst schiebt die Tastatur des Telefons sie aus dem Bild. */ .ueberlagerung { padding: 8px; align-items: flex-start; overflow-y: auto; } .fragefenster { width: 100% !important; max-width: 100% !important; padding: 16px 15px 22px; } /* Eine breite Tabelle laesst sich seitlich schieben, statt die Seite zu sprengen */ table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Eingabefelder nicht kleiner als 16px - darunter zoomt das iPhone beim Antippen von allein hinein, und danach steht die Seite schief */ /* F-096: Die 16px sind Absicht und die einzige Ausnahme von der Staffel. Alles darunter laesst das iPhone beim Antippen in ein Feld hineinzoomen, und danach steht die Maske schief. */ input, select, textarea { font-size: 16px; } } /* =========================================================================== F-122: Die Trennlinie zwischen Liste und rechtem Bereich =========================================================================== "Der rechte Bereich ist zu schmal und laesst sich nicht vergroessern." Jetzt laesst er sich: die Linie dazwischen laesst sich packen und ziehen. Der Griff ist bewusst breiter als die Linie, die man sieht - acht Pixel lassen sich mit der Maus treffen, einer nicht. Sichtbar ist trotzdem nur der eine. */ .trennlinie{flex:0 0 9px;align-self:stretch;cursor:col-resize; display:flex;align-items:center;justify-content:center; touch-action:none;user-select:none} .trennlinie::before{content:"";width:1px;height:100%; background:var(--linie);transition:background .12s,width .12s} .trennlinie:hover::before,.trennlinie.zieht::before{width:3px; background:var(--navy);border-radius:2px} /* Waehrend des Ziehens darf nichts anderes den Zeiger an sich reissen - sonst bleibt die Linie am Text haengen, sobald man schneller zieht als die Seite nachkommt. */ body.zieht{cursor:col-resize;user-select:none} body.zieht .trennlinie::before{width:3px;background:var(--navy)} /* F-122: Untereinander gibt es nichts zu ziehen - und auf dem Telefon trifft man eine neun Pixel breite Linie ohnehin nicht. Diese Abfrage steht ganz am Ende: stuende sie weiter oben, wuerde die allgemeine Regel darueber sie wieder aufheben. */ @media (max-width: 860px) { .trennlinie { display: none; } } /* =========================================================================== F-124: Das freie Fenster =========================================================================== "Das Ganze soll in einem eigenen Pop-up-Fenster aufgehen, das im Fenster frei beweglich ist und ueber die Randlinien frei in der Groesse aufgezogen werden kann." Gebaut als HUELLE, nicht als Leistungsmaske: ueber F-124 steht in der Fehlerliste die Grundregel, dass JEDE Kalkulation im Programm dasselbe Fenster aufmacht - Leistung, Angebotsposition, Containerauftrag, Nachtrag. Deshalb wissen diese Regeln hier nichts von einer Leistung. Der Unterschied zu .ueberlagerung: der Grund bleibt LESBAR. Hinter einem Fenster, das man verschieben kann, will man sehen, was darunter liegt - sonst waere das Verschieben sinnlos. 0,28 statt 0,55. */ .fenstergrund{position:fixed;inset:0;background:rgba(10,31,61,.55);z-index:70} .freiesfenster{position:fixed;display:flex;flex-direction:column;background:#fff; border-radius:12px;border:1px solid var(--navy); box-shadow:0 24px 60px rgba(16,45,87,.35);overflow:hidden;z-index:71; min-width:520px;min-height:320px} /* Vollbild: die Lage aus dem Verschieben zaehlt dann nicht mehr. Ohne !important bliebe die Breite stehen, die in style.left/width eingetragen ist - und der Knopf taete nichts. */ .freiesfenster.gross{border-radius:0;inset:0; left:0!important;top:0!important;width:auto!important;height:auto!important} /* Der Kopf: anfassen und ziehen. touch-action:none, damit das Ziehen auf einem Tablet nicht als Blaettern durchgeht. */ .fensterkopf{display:flex;align-items:center;gap:12px;height:52px; padding:0 12px 0 18px;background:var(--navy);color:#fff;flex-shrink:0; cursor:move;touch-action:none;user-select:none} .fensterkopf h2{color:#fff;font-size:18px;font-weight:700; flex:1 1 auto;min-width:90px; margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Der Hinweis weicht, wenn das Fenster schmal gezogen wird. Vorher schob er den Titel auf null Breite: bei 520 Pixeln stand im Kopf gar nichts mehr, weil "am Kopf ziehen zum Verschieben - an den Raendern aufziehen" nicht umbricht. Der Titel ist das Wichtigere. */ .fensterwink{font-size:12px;color:#C9D3E6;white-space:nowrap; flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis} .fensterknopf{width:36px;height:36px;border:0;border-radius:7px;background:transparent; display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none; padding:0} .fensterknopf:hover{background:rgba(255,255,255,.14)} .fensterkoerper{display:flex;flex-direction:column;gap:18px;padding:20px 24px; flex-grow:1;overflow:auto;min-height:0} .fensterfuss{display:flex;align-items:center;justify-content:flex-end;gap:10px; padding:14px 24px;border-top:1px solid var(--linieleise);flex-shrink:0;flex-wrap:wrap} .fensterfuss .hinweistext{flex-grow:1;font-size:12px;color:var(--textleise); min-width:180px} /* Pruef-Durchlauf 37 (Freddy 03.10.2026): Ein langer Hinweis bricht in sich um, die Knoepfe bleiben daneben - wie bei „Neue Leistung“. Erst wenn das Fenster wirklich schmal ist (unter 180px Text), rutschen sie darunter. */ .fensterfuss .hinweistext{flex:1 1 0} .fensterfuss .knopf{flex-shrink:0} .fensterfuss .knopf{height:44px;padding:0 22px} /* Die Randlinien zum Aufziehen. Acht Stueck - vier Kanten und vier Ecken -, denn "ueber die Randlinien" heisst an jeder Seite und nicht nur unten rechts. Sie liegen UEBER dem Rand des Fensters, damit man sie auch trifft, ohne genau zu zielen. */ .fensterrand{position:absolute;touch-action:none;z-index:2} .fensterrand.n{top:-3px;left:10px;right:10px;height:8px;cursor:ns-resize} .fensterrand.s{bottom:-3px;left:10px;right:10px;height:8px;cursor:ns-resize} .fensterrand.w{left:-3px;top:10px;bottom:10px;width:8px;cursor:ew-resize} .fensterrand.o{right:-3px;top:10px;bottom:10px;width:8px;cursor:ew-resize} .fensterrand.nw{top:-3px;left:-3px;width:16px;height:16px;cursor:nwse-resize} .fensterrand.no{top:-3px;right:-3px;width:16px;height:16px;cursor:nesw-resize} .fensterrand.sw{bottom:-3px;left:-3px;width:16px;height:16px;cursor:nesw-resize} .fensterrand.so{bottom:0;right:0;width:20px;height:20px;cursor:nwse-resize; display:flex;align-items:flex-end;justify-content:flex-end;padding:2px} .freiesfenster.gross .fensterrand{display:none} body.fensterzieht{user-select:none} /* =========================================================================== F-124: Die Bausteine darin =========================================================================== */ .bausteinkopf{display:flex;align-items:center;justify-content:space-between; gap:12px;flex-wrap:wrap} .bausteinkopf .titel{font-size:15px;font-weight:700;color:var(--navy)} .bausteinkopf .wink{font-size:12px;color:var(--textleise)} .bausteinknoepfe{position:relative;display:flex;gap:8px;flex-wrap:wrap} .bausteinknopf{height:38px;padding:0 14px;border-radius:8px;border:1px solid var(--navy); background:#fff;color:var(--navy);font-weight:600;font-size:13px;cursor:pointer; font-family:inherit} .bausteinknopf:hover{background:var(--flaeche)} .bausteinknopf.offen{border-width:2px;background:var(--navy);color:#fff;padding:0 13px} /* Die Auswahlliste unter dem Knopf. Sie haengt am Knopf und nicht in der Mitte des Bildes: man hat gerade auf "+ Entsorgung" gedrueckt und sucht dort, wo der Finger ist. */ .bausteinliste{position:absolute;top:44px;z-index:3;width:360px;max-width:calc(100% - 4px); max-height:320px;display:flex;flex-direction:column;background:#fff; border:1px solid #C9CED8;border-radius:10px; box-shadow:0 10px 28px rgba(16,45,87,.22);overflow:hidden} .bausteinsuche{padding:10px 12px;border-bottom:1px solid var(--linieleise);flex:none} .bausteinsuche input{height:34px;border-color:var(--navy);border-radius:7px;font-size:14px} .bausteinrollen{overflow:auto;flex-grow:1} .bausteingruppe{padding:8px 14px 4px;font-size:11px;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--textleise);background:var(--flaecheleise)} .bausteinzeile{display:flex;justify-content:space-between;gap:10px;padding:10px 14px; font-size:14px;cursor:pointer;border-top:1px solid #F0F1F4;text-align:left;width:100%; border-left:0;border-right:0;border-bottom:0;background:#fff;font-family:inherit; color:var(--text);align-items:baseline} .bausteinzeile:hover,.bausteinzeile:focus{background:#E8EDF6;outline:none} .bausteinzeile .name{flex:1 1 auto;min-width:0;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .bausteinzeile .satz{flex:0 0 auto;color:var(--textleise);white-space:nowrap; font-size:13px} .bausteinzeile.leiser .name{color:var(--textleise)} /* Die Zeilentabelle. Ein Raster und keine : die sechs Spalten muessen in jeder Zeile genau untereinander stehen, auch wenn in einer ein Eingabefeld steht und in der naechsten eine Zahl. */ .bausteintafel{display:flex;flex-direction:column;border:1px solid #DCDFE6; border-radius:10px;overflow:hidden} .bausteinreihe{display:grid; grid-template-columns:130px minmax(0,1fr) 120px 80px 120px 110px 34px; gap:10px;align-items:center;padding:10px 14px;border-top:1px solid #ECEEF2; font-size:14px} .bausteinreihe.kopf{padding:9px 14px;background:#F4F5F8;font-size:11px;font-weight:600; letter-spacing:.08em;text-transform:uppercase;color:var(--textleise);border-top:0} .bausteinreihe .rechts{text-align:right} .bausteinreihe input{height:32px;font-size:13px;text-align:right} .bausteinreihe .summe{text-align:right;font-weight:600} .bausteinchip{justify-self:start;padding:2px 8px;border-radius:7px;background:#E8EDF6; color:var(--navy);font-size:12px;font-weight:600;white-space:nowrap} .bausteinwoher{min-width:0} .bausteinwoher .herkunft{font-size:11.5px;color:var(--textleise);margin-top:2px; overflow:hidden;text-overflow:ellipsis} /* Der Summenstreifen. Vier Zahlen, und die wichtigste in Navy. */ .bausteinsumme{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; padding:14px 16px;border-radius:10px;background:var(--flaecheleise); border:1px solid var(--linieleise)} .bausteinsumme .feld{display:flex;flex-direction:column;gap:2px;min-width:0} .bausteinsumme .bez{font-size:11px;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--textleise)} .bausteinsumme .zahl{font-size:21px;font-weight:700;line-height:1.1} .bausteinsumme .zahl.wichtig{color:var(--navy)} .bausteinsumme .dazu{font-size:12px;color:var(--textleise)} /* F-124: Auf dem Telefon gibt es nichts zu verschieben und nichts aufzuziehen - das Fenster nimmt das ganze Bild, und die sechs Spalten stehen untereinander. Diese Abfrage steht hinter den allgemeinen Regeln, sonst hebt die Regel darueber sie wieder auf. */ @media (max-width: 860px) { .freiesfenster{inset:0!important;width:auto!important;height:auto!important; border-radius:0;min-width:0} .fensterkopf{cursor:default} .fensterwink,.fensterrand{display:none} .bausteinliste{width:auto;left:0;right:0} .bausteinreihe{grid-template-columns:1fr 1fr;row-gap:4px} .bausteinreihe.kopf{display:none} .bausteinsumme{grid-template-columns:1fr 1fr} } /* F-162: Auftraege als Kacheln; Doppelklick zeigt den Auftrag gross in der Mitte */ .auftragraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;padding:2px} .auftragkachel{border:1px solid var(--linie);border-radius:10px;padding:12px 13px;background:#fff; cursor:pointer;display:flex;flex-direction:column;gap:5px;min-width:0;user-select:none} .auftragkachel:hover{border-color:var(--navy)} .auftragkachel.aktiv{border-color:var(--navy);box-shadow:inset 3px 0 0 var(--gelb, #FFF200)} .auftragkachel .kopfzeile{display:flex;justify-content:space-between;gap:8px;align-items:flex-start} .auftragkachel .art{font-weight:600;color:var(--navy)} .auftragkachel .klein{font-size:11.5px;color:var(--textleise);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .darstellungschalter{display:flex;flex-shrink:0;border:1px solid var(--linie);border-radius:8px;overflow:hidden} .darstellungschalter button{border:0;background:#fff;padding:5px 10px;font-size:12px;cursor:pointer;color:var(--navy)} .darstellungschalter button.an{background:var(--navy);color:#fff} /* Kennzahlen-Leiste oben auf den Listen-Seiten (Freddy, 03.10.2026): fest unter dem Kopf, ueber die ganze Breite, jede Kachel ein Filter */ .inhalt.mitkennzahlen{flex-direction:column} .inhaltreihe{display:flex;gap:16px;flex-grow:1;min-height:0;min-width:0} .kennzahlleiste{flex:0 0 auto;position:sticky;top:var(--kopf, 0px);z-index:5; display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px; background:var(--bg);padding:2px 0 6px} .kennzahl{text-align:left;background:#fff;border:1px solid var(--linie);border-left:4px solid var(--navy); border-radius:9px;padding:9px 12px;cursor:pointer;font-family:inherit;min-width:0} .kennzahl:hover{border-color:var(--navy)} .kennzahl.an{background:var(--navy);border-color:var(--navy)} .kennzahl.an .kennzahltitel,.kennzahl.an .kennzahlwert,.kennzahl.an .kennzahlunten,.kennzahl.an .kennzahlbetrag{color:#fff} .kennzahltitel{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--textleise)} .kennzahlwert{font-size:21px;font-weight:600;color:var(--navy);margin-top:2px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .kennzahlbetrag{font-size:13px;font-weight:600;color:var(--navy)} .kennzahlunten{font-size:11.5px;color:var(--textleise);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media (max-width: 860px) { .kennzahlleiste{position:static;grid-template-columns:repeat(2,minmax(0,1fr))} .inhaltreihe{flex-direction:column;gap:12px} .inhaltreihe > *{min-width:0;max-width:100%} } /* Pruefer Runde 1 (03.10.2026): Bei vielen Kopfknoepfen (z. B. Rechnung) liefen die hinteren rechts aus dem Bild - nicht erreichbar. Jetzt duerfen sie in eine zweite Zeile umbrechen; die Ueberschrift bleibt einzeilig. */ header #kopfknoepfe{flex-shrink:1;min-width:0} /* Pruefer Runde 1 (03.10.2026): Gelb nur fuer Aktionsknoepfe - der heutige Tag im Bauzeitenplan ist jetzt navy hinterlegt (wie ein aktiver Reiter) */ .plantag.heute{background:var(--navy);color:#fff;font-weight:700} .plansaeule.heute{background:rgba(16,45,87,.07)} /* Freddy 03.10.2026: Kalkulationsgrundlagen aus dem LV in der oberen Leiste des Angebots */ .rahmenreihe{flex:1 1 100%;display:grid;grid-template-columns:auto repeat(4,minmax(150px,1fr)) auto;gap:10px;align-items:stretch; border-top:1px solid var(--linieleise);padding-top:9px;margin-top:2px} .rahmentitel{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--textleise);align-self:center;writing-mode:horizontal-tb} .rahmenkachel{cursor:default} .rahmenkachel:hover{border-color:var(--linie)} .rahmenkachel .kennzahlwert{font-size:18px} @media (max-width: 1100px) { .rahmenreihe{grid-template-columns:repeat(2,minmax(0,1fr))} .rahmentitel{grid-column:1/-1} } /* Freddy 03.10.2026: Kalkulationsvorschlag im Kalk.-Fenster - zaehlt erst nach Bestaetigung */ .vorschlagkasten{border:1px dashed var(--navy);border-radius:9px;padding:10px 12px;background:var(--flaecheleise);font-size:12.5px} .vorschlagzeile{display:flex;gap:9px;align-items:center;padding:5px 0;border-top:1px solid var(--linieleise);cursor:pointer} .vorschlagzeile .schild{font-size:10.5px;padding:2px 7px;border-radius:9px;background:#fff;border:1px solid var(--linie);color:var(--navy);white-space:nowrap} /* Freddy 03.10.2026: Summenzeile im Angebot nur einmal - fest am unteren Fensterrand */ .summenfuss{position:sticky;bottom:0;z-index:5;background:#fff;border:1px solid var(--linie);border-top:3px solid var(--navy); border-radius:10px 10px 0 0;padding:10px 18px;box-shadow:0 -6px 18px rgba(16,45,87,.08)} @media (max-width: 860px) { .summenfuss{position:static} } /* Punkt 5 (03.10.2026): Hinweise fuer die Kalkulation zum Abhaken */ .hinweiskasten{border:1px solid var(--linie);border-left:4px solid var(--ambersignal);border-radius:8px;padding:8px 10px;background:var(--flaecheleise)} .hinweiskopf{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .hinweiszahl{font-size:12px;font-weight:600;color:var(--textleise)} .hinweiszahl.offen{color:var(--rotsignal)} .hinweisliste{max-height:230px;overflow-y:auto;margin-top:6px;display:flex;flex-direction:column;gap:4px} .hinweiszeile{display:flex;gap:8px;align-items:flex-start;padding:5px 6px;border-radius:6px;background:#fff;border:1px solid var(--linieleise)} .hinweiszeile input[type=checkbox]{margin-top:3px} .hinweiszeile.erledigt{opacity:.55} .hinweisart{flex:0 0 auto;white-space:nowrap;font-size:11px;font-weight:600;color:var(--navy);background:var(--flaeche);border:1px solid var(--linieleise);border-radius:4px;padding:1px 6px;margin-top:1px;min-width:92px;text-align:center} .hinweisfund{font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hinweisquelle,.hinweisnotiz{font-size:11px;color:var(--textleise);margin-top:2px} .hinweismail{display:inline-flex;gap:4px;align-items:center;margin-right:10px} /* Punkt 6 (03.10.2026): Unterlagen nach Art */ .unterlagenzeile{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr);gap:14px;align-items:stretch} .unterlagenzeile > div > .block{height:100%;box-sizing:border-box} .unterlagenreihe{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px} .unterlagenreihe.drei{grid-template-columns:repeat(3,minmax(0,1fr))} .unterlagenreihe .kennzahlunten,.unterlagenreihe .kennzahltitel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media (max-width: 1350px) { .unterlagenzeile{grid-template-columns:minmax(0,1fr)} } @media (max-width: 800px) { .unterlagenreihe, .unterlagenreihe.drei{grid-template-columns:repeat(2,minmax(0,1fr))} } .unterlagenkachel{cursor:pointer} .unterlagenhoch{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px;border:1px dashed var(--linie);border-radius:8px;background:var(--flaecheleise);margin:8px 0} .unterlagengitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:8px} .unterlagenkarte{display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--linieleise);border-left:4px solid var(--linieleise);border-radius:8px;background:#fff} .unterlagenkarte.ampel-rot{border-left-color:var(--rotsignal)} .unterlagenkarte.ampel-gelb{border-left-color:var(--ambersignal)} .unterlagenkarte.ampel-gruen{border-left-color:var(--gruensignal)} .unterlagenkarte img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:5px;cursor:zoom-in;background:var(--flaeche)} .unterlagenohnebild{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:var(--flaeche);border-radius:5px;font-size:12px;color:var(--textleise);padding:6px;text-align:center} .ampelwahl{display:flex;gap:6px;align-items:center} .ampelknopf{width:18px;height:18px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--linie);opacity:.35;cursor:pointer;padding:0} .ampelknopf.an{opacity:1;box-shadow:0 0 0 2px var(--navy)} .unterlagentabelle tr.vorschlag td{background:var(--amberflaeche)} /* Freddy 03.10.2026: Karte waehlen - Google Maps oder Apple Karten */ .kartenmenue{position:fixed;z-index:9999;background:#fff;border:1px solid var(--linie);border-radius:8px;box-shadow:0 8px 24px rgba(16,45,87,.18);padding:4px;display:flex;flex-direction:column;min-width:160px} .kartenmenue a{padding:8px 12px;border-radius:6px;color:var(--navy);text-decoration:none;font-size:13.5px;font-weight:500} .kartenmenue a:hover,.kartenmenue a:focus{background:var(--flaeche);outline:none} /* Freddy 03.10.2026, Angebot-Layout 1-3: Kopfknoepfe einreihig, Leisten und LV-Block einklappbar */ #kopfknoepfe.einreihig{flex-wrap:nowrap !important;gap:6px !important;overflow:hidden;align-items:center;justify-content:flex-start !important} #kopfknoepfe.einreihig .knopf{height:32px;padding:0 11px;font-size:13px;white-space:nowrap;flex-shrink:0} .kopfmehr{position:relative;flex-shrink:0} .kopfmehrliste{position:fixed;z-index:60;background:#fff;border:1px solid var(--linie);border-radius:8px;box-shadow:0 8px 24px rgba(16,45,87,.18);padding:4px;display:flex;flex-direction:column;gap:2px;min-width:200px} .kopfmehrliste[hidden]{display:none} .kopfmehrliste .knopf{height:34px;justify-content:flex-start;text-align:left;width:100%;border-radius:6px} /* .klappkasten: beide Leisten sind schon positioniert (sticky) - kein position:relative, sonst laeuft die Summenleiste nicht mehr mit */ .klappgriff{border:1px solid var(--linie);background:#fff;color:var(--navy);border-radius:6px;width:24px;height:22px;padding:0;font-size:12px;line-height:1;cursor:pointer;flex:0 0 auto} .klappkasten > .klappgriff{position:absolute;top:6px;right:8px} .klappkasten.eingeklappt{padding-top:6px !important;padding-bottom:6px !important} .klappkasten.eingeklappt > *:not(.klappgriff):not(.klappkurz){display:none !important} .klappkurz{font-size:12.5px;font-weight:600;color:var(--navy);padding-right:34px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rahmenreihe .rahmenkachel{padding:7px 10px} .rahmenreihe .rahmenkachel .kennzahlwert{font-size:15px;margin:1px 0} .rahmenreihe .rahmenkachel .kennzahlunten{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rahmenreihe .rahmenkachel .minknopf{padding:1px 6px;font-size:11px} .rahmenreihe.rahmenzu{display:block} .rahmenkurz{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--text)} /* (KL1: zweite Knopfzeile entfallen) */ /* Layout 3: LV-Kaestchen flacher - Titel und Wert in einer Zeile */ .rahmenreihe .rahmenkachel{display:flex;flex-wrap:wrap;column-gap:8px;row-gap:2px;align-items:baseline;align-content:flex-start} .rahmenreihe .rahmenkachel .kennzahlunten{flex:1 1 100%;min-width:0} .rahmenreihe .rahmenkachel > div:last-child:not(.kennzahlunten){flex:1 1 100%;margin-top:3px !important} /* Kalk.-Fenster (Freddy 03.10.2026): Fotos/Plaene zur Position, Rueckfragen */ .posbilder{border:1px solid var(--linieleise);border-radius:8px;padding:8px 10px;background:var(--flaecheleise);display:flex;flex-direction:column;gap:6px} .posbildstreifen{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px} .posbild{flex:0 0 118px;display:flex;flex-direction:column;gap:3px;border-left:3px solid transparent;padding-left:3px} .posbild.ampel-rot{border-left-color:var(--rotsignal)} .posbild.ampel-gelb{border-left-color:var(--ambersignal)} .posbild.ampel-gruen{border-left-color:var(--gruensignal)} .posbild img{width:112px;height:84px;object-fit:cover;border-radius:5px;cursor:zoom-in;background:var(--flaeche)} .posbild.waehlbar{cursor:pointer;opacity:.75} .posbild.waehlbar.gewaehlt{opacity:1;outline:2px solid var(--navy);outline-offset:2px;border-radius:5px} .posbildort{font-size:10.5px;color:var(--textleise);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .posbildtrenner{flex:0 0 1px;background:var(--linie);margin:0 4px} .rueckfrage{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:4px 0;border-top:1px solid var(--linieleise)} .rueckfragetext{flex:1 1 260px;font-size:13px} .rueckfrage .minknopf.gewaehlt{background:var(--navy);color:#fff;border-color:var(--navy)} /* Gegenpruefung Layout: Griff bleibt am Kasten, auch wenn die Summenleiste schmal nicht klebt; Platz fuer den Griff */ @media (max-width: 860px) { .summenfuss.klappkasten{position:relative} } .klappkasten{padding-right:40px !important} /* Auswahlzeilen in Formularfeldern: normale Schrift, nicht wie die Feldbeschriftung */ .feld label.wahlzeile{text-transform:none;letter-spacing:normal;font-weight:400;color:var(--text);margin:0} /* Freddy 03.10.2026: Angebot ruhiger - Kacheln mit neutralem Rand, Farbe nur als kleiner Punkt */ .unterlagenzeile .kennzahl, .rahmenreihe .rahmenkachel{border-left-width:1px !important;box-shadow:none;position:relative} /* die Signalfarbe (inline gesetzt) bleibt sichtbar - als kleiner Punkt oben rechts statt als breiter Rand */ .unterlagenzeile .kennzahl::after, .rahmenreihe .rahmenkachel::after{content:'';position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;background:currentColor;opacity:0} .unterlagenzeile .kennzahl[style*="rotsignal"]::after, .rahmenreihe .rahmenkachel[style*="rotsignal"]::after{opacity:1;background:var(--rotsignal)} .unterlagenzeile .kennzahl[style*="ambersignal"]::after, .rahmenreihe .rahmenkachel[style*="ambersignal"]::after{opacity:1;background:var(--ambersignal)} .unterlagenzeile .kennzahl .kennzahlwert, .rahmenreihe .rahmenkachel .kennzahlwert{color:var(--navy)} .unterlagenzeile .block, .hinweiskasten{box-shadow:none} .klappkasten.eingeklappt{min-height:0 !important} .klappkasten.eingeklappt .klappkurz{font-weight:500;color:var(--text)} .summenfuss{border-top-width:2px} .unterlagenzeile .klappkasten{position:relative} /* Gespraech mit der KI (Freddy 03.10.2026) */ .gespraechverlauf{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow-y:auto;padding:8px;border:1px solid var(--linieleise);border-radius:8px;background:var(--flaecheleise)} .sprechblase{max-width:82%;padding:8px 11px;border-radius:10px;font-size:13.5px;line-height:1.45;white-space:pre-wrap} .sprechblase.ki{align-self:flex-start;background:#fff;border:1px solid var(--linie)} .sprechblase.ich{align-self:flex-end;background:var(--navy);color:#fff} .sprechwer{font-size:10.5px;opacity:.7;margin-bottom:2px} /* Bauzeitenplan (Freddy 03.10.2026): Wochenende kraeftiger, Feiertag und Brueckentag sichtbar, Ansichten */ .plantag.frei{background:#E3E8EE;color:#7F8EA0} .plansaeule.frei{background:#E9EDF2} .plantag.feiertag{background:#F3E3E3;color:var(--rot)} .plansaeule.feiertag{background:#F7ECEC} .plantag.bruecke{background:var(--amberflaeche);color:var(--amber)} .plansaeule.bruecke{background:repeating-linear-gradient(135deg,var(--amberflaeche) 0 4px,#fff 4px 8px)} .plantag .ftname{display:block;font-size:9px;line-height:1.1;white-space:normal;padding:0 2px} .planrahmen.schmal .plantag span:first-child{display:none} .planrahmen.schmal .plantag{font-size:8px;padding-top:4px} .planrahmen.breit .plantag{font-size:12px} .planbalken.blinken{outline:3px solid var(--gelb);outline-offset:2px;animation:planblinken 1s ease 3} @keyframes planblinken{50%{outline-color:var(--rotsignal)}} .ansichtwahl{display:inline-flex;border:1px solid var(--linie);border-radius:8px;overflow:hidden} .ansichtwahl button{border:0;background:#fff;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer;color:var(--navy);border-right:1px solid var(--linie)} .ansichtwahl button:last-child{border-right:0} .ansichtwahl button.an{background:var(--navy);color:#fff;font-weight:600} .heutekarte{border:1px solid var(--linie);border-radius:8px;padding:10px 12px;background:#fff} .heutekarte h3{margin:0 0 6px;font-size:14px;color:var(--navy)} .heutechip{display:inline-block;margin:2px 4px 2px 0;padding:3px 9px;border-radius:12px;font-size:12px;background:var(--flaeche);border:1px solid var(--linieleise)} .heutechip.frei{background:var(--gruenflaeche);border-color:#bfe3cc} .heutechip.urlaub{background:var(--amberflaeche);border-color:#f0d9a6} .konfliktzeile{display:flex;gap:8px;width:100%;text-align:left;background:none;border:0;border-radius:6px;padding:5px 6px;font:inherit;font-size:12.5px;cursor:pointer;color:var(--text)} .konfliktzeile:hover{background:var(--rotflaeche)} .plankennzahlen.klappkasten{position:relative} /* Bauzeitenplan Punkt 2: Kaestchen zum Ziehen */ .planressourcen.klappkasten{position:relative} .ressgruppe{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:6px} .ressgruppe .rahmentitel{min-width:150px} .resschip{padding:4px 10px;border-radius:14px;font-size:12px;cursor:grab;border:1px solid transparent;user-select:none} .resschip.frei{background:var(--gruenflaeche);border-color:#bfe3cc;color:var(--gruen)} .resschip.verplant{background:#ECEFF2;border-color:var(--linie);color:var(--textleise)} .resschip.urlaub{background:var(--amberflaeche);border-color:#f0d9a6;color:var(--amber);cursor:not-allowed} .resschip.defekt{background:var(--rotflaeche);border-color:#f2c1bd;color:var(--rot);cursor:not-allowed} .planzeile.baustelle.ablageziel{outline:2px dashed var(--navy);outline-offset:-2px;background:#E8EEF6} .planmeldung{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:9999;max-width:min(680px,92vw);display:flex;gap:10px;align-items:flex-start; padding:10px 14px;border-radius:8px;box-shadow:0 8px 24px rgba(16,45,87,.2);font-size:13.5px;background:#fff;border-left:5px solid var(--ambersignal)} .planmeldung.fehler{border-left-color:var(--rotsignal)} /* Bauzeitenplan Sammelauftrag (Freddy 03.10.2026) */ /* Punkt 2: Wochenende und Feiertage schraffiert statt nur leicht grau */ .plansaeule.frei{background:repeating-linear-gradient(135deg,#E3E8EE 0 3px,#F5F7F9 3px 7px)} .plansaeule.feiertag{background:repeating-linear-gradient(135deg,#F1DADA 0 3px,#FBF3F3 3px 7px)} .plantag.frei{background:repeating-linear-gradient(135deg,#DDE3EA 0 3px,#EEF1F4 3px 7px)} /* Punkt 4: feste Farbe je Art - Mitarbeiter gruen, Subs lila, Maschinen ocker, Werkzeug grau */ :root{--artmitarbeiter:#2F7D62;--artsub:#7A5CB8;--artmaschine:#B5761F;--artwerkzeug:#7C8592} .planbalken.mitarbeiter{background:var(--artmitarbeiter)} .planbalken.subunternehmer{background:var(--artsub)} .planbalken.betriebsmittel{background:var(--artmaschine)} .planbalken.betriebsmittel.werkzeug{background:var(--artwerkzeug)} /* Punkt 5: Arbeiten hell in Firmenblau, damit Leute und Maschinen hervorstechen */ .planbalken.abschnitt{background:#DCE5F1;color:var(--navy);border:1px solid #A9BBD3;box-shadow:none;font-weight:500} .planbalken.abschnitt .fortschritt{background:rgba(16,45,87,.12)} .planzeile.baustelle{background:#fff;border-top:1px solid #C9D3E0} .planzeile.baustelle .planname{background:#fff} .planrahmenbalken{border-width:1px;background:transparent} /* Kaestchen oben: Art als Streifen links, Stand als Grund (frei weiss, verplant grau, Urlaub gelb, defekt rot) */ .resschip{border-left-width:5px !important} .resschip.artmitarbeiter{border-left-color:var(--artmitarbeiter) !important} .resschip.artsubunternehmer{border-left-color:var(--artsub) !important} .resschip.artbetriebsmittel{border-left-color:var(--artmaschine) !important} .resschip.artwerkzeug{border-left-color:var(--artwerkzeug) !important} .resschip.frei{background:#fff;border-color:var(--linie);color:var(--text)} .resschip.urlaub,.resschip.defekt{cursor:grab} .planlegende{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--textleise)} .planlegende .artfarbe{display:inline-block;width:14px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px} /* Punkt 7: Besetzung „2 von 3“ */ .planbesetzung{position:relative;margin-right:6px;padding:0 6px;border-radius:8px;font-size:10px;font-weight:600;line-height:15px;color:#fff;flex:0 0 auto} .planbesetzung.voll{background:#2F7D62} .planbesetzung.fehlt{background:#C98A00} .planbesetzung.mehr{background:#2F6FB5} .planland{font-size:10px;font-weight:600;padding:0 5px;border-radius:6px;border:1px solid #C9D3E0;color:var(--navy);background:#fff;cursor:pointer;flex:0 0 auto} .planland.anders{background:#FFF7CC;border-color:#E3C64A} .planvorschlag{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:5px 6px;font-size:12.5px} /* Punkt 9: Bloecke mit Griff zum Ziehen und Pfeil zum Zuklappen */ .ordnungsblock .kachelgriff{cursor:grab;color:var(--textleise);padding:0 6px;user-select:none;font-size:15px} .ordnungsblock.zieht{opacity:.5} .ordnungsblock.ziel{outline:2px dashed var(--navy);outline-offset:2px} .ordnungsblock > [hidden]{display:none !important} /* Containerdienst schlank (Freddy 03.10.2026) */ .auftragkachel .kacheladresse{font-weight:600;color:var(--text);font-size:13px} .standortraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px} .standortkarte{border:1px solid var(--linie);border-left:4px solid var(--textleer);border-radius:8px;padding:8px 10px;background:#fff;font-size:12.5px} .standortkarte.hofleer{border-left-color:var(--gruensignal)} .standortkarte.kunde{border-left-color:var(--blausignal)} .standortkarte.hofvoll{border-left-color:var(--ambersignal)} .standortkarte.entsorger{border-left-color:var(--navy)} .standortkarte .standortnummer{font-weight:700;color:var(--navy);font-size:13.5px} .standortkarte .klein{font-size:11.5px;color:var(--textleise)} .dispomarke{outline:3px solid var(--gelb);outline-offset:2px;border-radius:4px} /* Einheitliches Kalender-Fenster (Containerdienst Punkt 3) */ input[type=date]::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer} .kalenderfenster{position:fixed;z-index:9000;width:286px;background:#fff;border:1px solid var(--linie);border-radius:10px; box-shadow:0 10px 28px rgba(16,45,87,.22);padding:10px;font-size:13px} .kalenderfenster .kalendertitel{font-weight:600;color:var(--navy);margin-bottom:6px} .kalenderschnell{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px} .kalenderkopf{display:flex;justify-content:space-between;align-items:center;font-weight:600;color:var(--navy);margin-bottom:6px} .kalenderblatt{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center} .kalenderwt{font-size:10.5px;color:var(--textleise);padding:2px 0} .kalendertag{border:1px solid transparent;background:#fff;border-radius:6px;padding:5px 0;font:inherit;font-size:12.5px;cursor:pointer;color:var(--text)} .kalendertag:hover{border-color:var(--navy)} .kalendertag.wochenende{background:repeating-linear-gradient(135deg,#E3E8EE 0 3px,#F5F7F9 3px 7px);color:#7F8EA0} .kalendertag.feiertag{background:#F7ECEC;color:var(--rot)} .kalendertag.heute{border-color:var(--gelb);font-weight:700} .kalendertag.gewaehlt{background:var(--navy);color:#fff} .kalenderzeit{margin-top:8px;display:flex;flex-direction:column;gap:6px} .kalenderzeit input{height:30px} .zeitstempel{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--navy);font-weight:500} .zeitstempel span + span::before{content:'· ';color:var(--textleise)} .dispokaestchen{cursor:grab} .dispokaestchen.zieht{opacity:.5} .dispospalte{border:1px solid var(--linie);border-radius:8px;padding:8px 10px;min-height:70px;background:#fff} .dispospalte.dispoziel{outline:2px dashed var(--navy);outline-offset:2px;background:#F2F6FB} .dispoanfragen{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px} .dispoanfrage{border:1px solid var(--linie);border-left:4px solid var(--ambersignal);border-radius:8px;padding:8px 10px;font-size:12.5px;background:#fff} .dispoanfrage div.klein{font-size:11.5px;color:var(--textleise)} .auftragzusatz{font-size:11.5px;font-weight:600;color:var(--amber)} .dispovergessen{background:var(--rotflaeche);border-left-color:var(--rotsignal) !important} /* LV-Weg (03.10.2026) */ .lveinwurf{border:2px dashed var(--linie);border-radius:10px;padding:12px 14px;background:#fff;display:flex;flex-direction:column;gap:4px} .lveinwurf.ziel{border-color:var(--navy);background:#F2F6FB} .lveinwurf.gelesen{border-style:solid;border-color:var(--gruensignal)} .lvkunde{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:6px} /* kachelnOrdnen: zugeklappt zeigt nur die Kopfzeile - auch fuer spaeter nachgeladene Zeilen */ .ordnungsblock.ordnungzu > :not(.ordnungkopf) { display: none !important; } /* Vorgabe 11: angefangene Entwuerfe */ .entwurfleiste { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: #FFFBD6; border-left: 4px solid var(--ambersignal, #E0A100); padding: 8px 12px; margin-bottom: 10px; font-size: 13px; border-radius: 4px; } .entwurfleiste span { flex-grow: 1; } .entwurfzeile { display: flex; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--flaeche, #eee); } .angefangenknopf { border-color: var(--ambersignal, #E0A100); } /* Vorgabe 12: Logistik-Fenster - Ergebnis oben, Warnung gelb, Kacheln, Rest zugeklappt */ .logsatz { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border-left: 4px solid var(--gruensignal, #2E8B57); background: var(--flaeche, #F4F5F7); border-radius: 4px; margin-bottom: 8px; } .logsatz.rot { border-left-color: var(--rotsignal, #C0392B); } .logsatztext { flex: 1 1 320px; font-size: 14px; line-height: 1.5; } .logwarnung { background: #FFFBD6; border-left: 4px solid var(--ambersignal, #E0A100); padding: 8px 12px; font-size: 13px; margin-bottom: 8px; border-radius: 4px; } .logueber { margin: 12px 0 6px; font-size: 14px; color: var(--navy); } .logkacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-bottom: 8px; } .logkachel { border: 1px solid #D3D2D2; border-left: 4px solid var(--navy); border-radius: 4px; padding: 8px 10px; background: #fff; } .logkachel.rot { border-left-color: var(--rotsignal, #C0392B); } .logkachelkopf { font-weight: 700; color: var(--navy); font-size: 13px; } .logkachelwert { font-size: 15px; font-weight: 600; margin-top: 2px; } .logkachelfuss { font-size: 12px; color: var(--textleise); margin-top: 2px; } .logkachelhinweis { font-size: 11.5px; color: var(--amber, #B7791F); margin-top: 4px; } .logklappe { border-top: 1px solid #D3D2D2; padding: 6px 0; } .logklappe > summary { cursor: pointer; font-weight: 600; color: var(--navy); font-size: 13.5px; padding: 4px 0; } .logklappeinnen { padding: 6px 0 4px; } .logvorschlag { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-left: 4px solid #D3D2D2; margin-bottom: 6px; background: #fff; } .logvorschlag.wichtig { border-left-color: var(--ambersignal, #E0A100); background: #FFFBEA; } .logvorschlagtitel { font-weight: 700; } .logvorschlagsatz { font-size: 12.5px; color: var(--textleise); margin-top: 2px; } .logwichtig { background: var(--ambersignal, #E0A100); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 3px; margin-right: 6px; } .planmeldung.ok{border-left-color:var(--gruensignal,#2E8B57)} /* Punkt 6: Unterlagen hochladen - Ablagefeld */ .ablagezone { display: block; border: 2px dashed #D3D2D2; border-radius: 6px; padding: 22px; text-align: center; cursor: pointer; background: #FAFAFA; } .ablagezone.ziel, .unterlagenkasten.ablageoffen { border-color: var(--navy); background: #E8EEF6; } .unterlagenkasten.ablageoffen { outline: 2px dashed var(--navy); outline-offset: -4px; } .ablagezeile { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 7px 4px; border-bottom: 1px solid #ECECEC; font-size: 13px; } .ablagezeile.offen { border-left: 4px solid var(--ambersignal, #E0A100); padding-left: 8px; } .ablagezeile select { height: 30px; } /* fehler.md Projektanalyse: Funde je Bereich */ .analysezeile { border-left: 4px solid #D3D2D2; padding: 8px 10px; margin-bottom: 6px; background: #fff; font-size: 13px; } .analysezeile.rot { border-left-color: var(--rotsignal, #C0392B); } .analysezeile.gelb { border-left-color: var(--ambersignal, #E0A100); } .analysezeile.gruen { border-left-color: var(--gruensignal, #2E8B57); } .analysezeile.erledigt { border-left-color: #D3D2D2; opacity: .75; } .analysefein { font-size: 12px; color: var(--textleise); margin-top: 2px; } .analyserat { font-size: 12.5px; margin-top: 3px; } .analyseknoepfe { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; } /* Projektanalyse 5: Herkunft je Baustein-Preis */ .herkunftwahl { height: 24px; font-size: 11px; padding: 0 4px; max-width: 170px; } .herkunftwahl.geschaetzt { background: #FFFBD6; border-color: var(--ambersignal, #E0A100); } .herkunftquelle { height: 24px; font-size: 11px; width: 150px; } .preisherkunftbox { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 2px; } /* Vorgabe 14: Hilfe-Zeichen in der Seitenleiste */ .hilfeknopf { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #D3D2D2; background: #fff; color: var(--navy, #102D57); font-weight: 700; font-size: 14px; cursor: pointer; flex-shrink: 0; } .hilfeknopf:hover, .hilfeknopf:focus { border-color: var(--navy, #102D57); } .hilfetreffer { border-left: 4px solid #D3D2D2; padding: 8px 10px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .hilfetreffer.erster { border-left-color: var(--navy, #102D57); } /* Bauzeitenplan Punkt 10: Wunsch-KW am Projekt */ .planwunsch { font-size: 10.5px; padding: 0 5px; border-radius: 3px; background: #E8EEF6; color: var(--navy, #102D57); white-space: nowrap; margin-left: 4px; } /* Bauzeitenplan Punkt 14: Ist gegen kalkuliert */ .planist { position: relative; overflow: hidden; display: inline-flex; align-items: center; min-width: 86px; font-size: 10.5px; padding: 0 6px; border-radius: 3px; background: #E6F1E7; color: #1F5A2B; white-space: nowrap; margin-left: 4px; } .planist .planistfuell { position: absolute; left: 0; top: 0; bottom: 0; background: #9CCFA4; } .planist .planisttext { position: relative; font-weight: 600; } .planist.spaet { background: #FFF4C2; color: #6B4600; } .planist.spaet .planistfuell { background: #F2D16B; } .planist.drueber { background: var(--rotsignal, #C0392B); color: #fff; } .planist.drueber .planistfuell { background: transparent; } /* „Beachte bei diesem Kunden“: gelbes Warndreieck und ruhiger Zettel */ .kundewink { display: inline-flex; vertical-align: middle; margin-left: 4px; } .kundewink[hidden] { display: none; } .beachtemeldung.leise { color: var(--grautext, #666); } .kundewinkknopf { border: 0; background: none; padding: 0 2px; cursor: pointer; font-size: 14px; line-height: 1; color: #E0A100; text-shadow: 0 0 1px #8A5A00; } .kundewinkknopf:focus { outline: 2px solid var(--navy, #102D57); outline-offset: 1px; } .beachtezettel { position: fixed; z-index: 9990; width: 320px; background: #FFFBD6; border: 1px solid #E0A100; border-left: 5px solid #E0A100; border-radius: 4px; padding: 10px 12px; box-shadow: 0 6px 18px rgba(0,0,0,.15); font-size: 13px; } .beachtekopf { font-weight: 700; color: #8A5A00; margin-bottom: 4px; } .beachtetext { white-space: pre-wrap; margin-bottom: 6px; } .beachtelink, .kundehinweislink { font-size: 12px; color: var(--navy, #102D57); } .kundehinweislink { margin-left: 8px; font-weight: 400; } .beachtezettel textarea { width: 100%; font-family: inherit; font-size: 13px; } .beachtemeldung { font-size: 12px; color: var(--rotsignal, #C0392B); margin-top: 4px; } .beachtefeld { margin-top: 10px; padding: 8px 10px; background: #FFFDEB; border-left: 4px solid #E0A100; border-radius: 3px; } .beachtefeld textarea { width: 100%; font-family: inherit; font-size: 13px; margin-top: 4px; } /* KI-Liste 03./04.10.2026: aus einem Papier vorgeschlagenes Feld - bis der Mensch es anfasst (Vorgabe 1) */ .vorschlagfeld{outline:2px solid var(--ambersignal,#E0A100);outline-offset:1px;background:var(--amberflaeche,#FFF6E0)} /* =========================================================================== Tourenplanung (Freddy 04.10.2026): Spalten nebeneinander, ruhige einheitliche Kacheln =========================================================================== */ .tpleiste{position:sticky;top:0;z-index:5;display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--bg);padding:6px 0} .tpumschalter{display:inline-flex;border:1px solid #C9D2DB;border-radius:7px;overflow:hidden;margin-left:6px} .tpumschalter button{border:0;background:#fff;color:var(--navy);font:inherit;font-size:12.5px;padding:5px 11px;cursor:pointer} .tpumschalter button+button{border-left:1px solid #C9D2DB} .tpumschalter button.an{background:#102D57;color:#fff;font-weight:600} .tpbrett{display:flex;gap:10px;overflow-x:auto;align-items:flex-start;padding-bottom:6px} .tpspalte{flex:0 0 250px;background:#fff;border:1px solid #D3D2D2;border-radius:9px;display:flex;flex-direction:column;min-height:140px} .tpspalte.zuverteilen{background:#FFFBE6;border-color:#EADFA0} .tpspalte.gesperrt{background:repeating-linear-gradient(135deg,#EEF0F2 0 8px,#E3E6E9 8px 16px);opacity:.85} .tpspalte.dispoziel{outline:2px dashed #102D57;outline-offset:-2px} .tpkopf{padding:8px 10px;border-bottom:1px solid #E6E8EB} .tptitel{font-weight:700;font-size:13.5px;color:#102D57} .tpunter{font-size:11.5px;color:var(--textleise)} .tplast{display:flex;align-items:center;gap:7px;margin-top:4px;font-size:11.5px} .tplastzahl.voll{color:var(--rotsignal);font-weight:700} .tpbalken{flex:1;height:5px;background:#E6E8EB;border-radius:3px;overflow:hidden} .tpfuell{display:block;height:100%;background:#102D57} .tpfuell.voll{background:var(--rotsignal)} .tpfilter{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px} .tpchip{border:1px solid #D9CF95;background:#fff;border-radius:11px;font:inherit;font-size:11px;padding:2px 8px;cursor:pointer;color:#102D57} .tpchip.an{background:#102D57;color:#fff;border-color:#102D57} .tpgesperrt{font-size:12px;padding:8px 10px;color:#4A5560} .tpkoerper{padding:6px;display:flex;flex-direction:column;gap:6px;flex:1;min-height:60px} .tpleer{font-size:12px;color:var(--textleise);text-align:center;padding:14px 0} .tpkachel{display:flex;gap:8px;align-items:stretch;background:#fff;border:1px solid #DDE1E5;border-left:4px solid transparent;border-radius:7px;padding:6px;cursor:grab;position:relative} .tpkachel.kompakt{padding:4px 6px;align-items:center} .tpkachel.aktuell{border-color:var(--gruensignal,#2E8B57);box-shadow:0 0 0 2px rgba(46,139,87,.25)} .tpkachel.faellig{border-color:var(--rotsignal);box-shadow:0 0 0 1px var(--rotsignal)} .tpkachel.zieht{opacity:.5} .tpgroesse{flex:0 0 50px;border-radius:5px;color:#fff;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.1} .tpkachel.kompakt .tpgroesse{flex-basis:44px;min-height:26px;font-size:11px} .tpgroesse.stellen{background:#102D57}.tpgroesse.abholen{background:#B8862B}.tpgroesse.tauschen{background:#23807E}.tpgroesse.transport{background:#6E4A9E} .tptext{flex:1;min-width:0;cursor:pointer} .tpoben{display:flex;gap:6px;align-items:flex-start} .tpadresse{flex:1;min-width:0;font-weight:700;font-size:13px;color:#1B2530;line-height:1.25} .tpstatus{font-size:10.5px;color:var(--textleise);white-space:nowrap} .tpstatus.unterwegs{color:var(--gruensignal,#2E8B57);font-weight:600} .tpstatus.erledigt{color:#8A939C} .tpzeile{font-size:12px;color:#4A5560;margin-top:1px} .tpzeile.leise{color:var(--textleise);font-size:11.5px} .tpmarken{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px} .tpmarke{font-size:10.5px;border:1px solid #C9D2DB;border-radius:9px;padding:0 6px;color:#102D57} .tpmarke.zeit{border-color:#EADFA0;background:#FFFBE6} .tpmarke.selbst{border-color:#9DB7D5;color:#2B5C8F} .tphinweis{font-size:11.5px;font-style:italic;color:#4A5560;margin-top:2px} .tpfaellig{font-size:11.5px;color:var(--rotsignal);font-weight:600;margin-top:2px} .tpwahl{height:24px;font-size:11.5px;max-width:140px} .tpkreis{font-size:11px;color:var(--textleise);display:flex;align-items:center;gap:3px;cursor:pointer} /* Tourenplanung Punkt 4-7 (04.10.2026): Fußzeile der Kachel, Vormerkung, Karte, Woche, Monat */ .tpfuss{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:5px;padding-top:4px;border-top:1px dashed #E6E8EB;font-size:11px;color:var(--textleise);cursor:default} .tpkachel.vorgemerkt{border-style:dashed;border-left-style:solid} .tpmarke.vorgemerkt{border-style:dashed;color:#5F6B7A} .tpkartenstreifen{align-self:stretch;writing-mode:vertical-rl;transform:rotate(180deg);flex:0 0 34px;border:1px dashed #C9D2DB;background:#F7F8FA;border-radius:8px;color:#102D57;font-size:12px;cursor:pointer;padding:10px 0} .tpkartenstreifen:hover{background:#EEF2F7} .tpkarte .tpkartenebene{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;overflow:visible} .tpkartenzoom{position:absolute;right:8px;top:8px;z-index:7;display:flex;flex-direction:column;gap:4px} .tpkartenzoom .minknopf{width:28px;height:28px;padding:0;font-size:16px;background:#fff} .tpkartenlegende{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:11.5px} .tpkartenlegende span::before{content:'';display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px;background:var(--f,#102D57)} .tpkartenlegende .offen::before{background:#FFF200;box-shadow:0 0 0 1.5px #102D57} .tpkartenlegende .draussen::before{background:#9AA0A6} .tpkartenlegende .lang::before{background:#C0392B} .tpkarteninfo{margin-top:6px;font-size:12.5px;padding:6px 10px;background:#F7F8FA;border-radius:6px} .tpwoche{display:grid;gap:4px;overflow-x:auto} .tpwkopf{font-size:12px;font-weight:600;color:#102D57;background:#F2F4F7;border:none;border-radius:6px;padding:6px;text-align:left;cursor:pointer} .tpwkopf.leer{background:none;cursor:default} .tpwkopf.heute{background:#102D57;color:#fff} .tpwkopf.samstag,.tpwkopf.feiertag{background:#E6E7E9;color:#5F6B7A} .tpwname{padding:6px 8px;background:#fff;border:1px solid #E6E8EB;border-radius:6px} .tpwname.zuverteilen{background:#FFFBE0} .tpwzelle{min-height:54px;border:1px solid #E6E8EB;border-radius:6px;padding:4px;display:flex;flex-direction:column;gap:3px;background:#fff} .tpwzelle.zuverteilen{background:#FFFDF0} .tpwzelle.samstag,.tpwzelle.feiertag{background:#F4F4F5} .tpwzelle.gesperrt{background:repeating-linear-gradient(45deg,#F1F2F4,#F1F2F4 6px,#E3E5E8 6px,#E3E5E8 12px)} .tpwzelle.dispoziel{outline:2px dashed #102D57;outline-offset:-2px} .tpwlast{font-size:10.5px;color:var(--textleise);text-align:right} .tpwlast.voll{color:var(--rotsignal);font-weight:700} .tpwgesperrt{font-size:11px;color:#5F6B7A;font-style:italic} .tpwkachel{display:flex;gap:5px;align-items:center;font-size:11.5px;background:#fff;border:1px solid #DDE1E5;border-radius:5px;padding:2px 5px;cursor:grab;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tpwpunkt{flex:0 0 8px;height:8px;border-radius:50%;background:#102D57} .tpwpunkt.abholen{background:#B8862B}.tpwpunkt.tauschen{background:#23807E}.tpwpunkt.transport{background:#6E4A9E} .tpmonat{display:grid;grid-template-columns:repeat(7,1fr);gap:4px} .tpmkopf{font-size:11.5px;font-weight:600;color:#5F6B7A;text-align:center;padding:2px} .tpmtag{min-height:72px;border:1px solid #E6E8EB;border-radius:6px;background:#fff;padding:5px 6px;text-align:left;display:flex;flex-direction:column;gap:2px;cursor:pointer;font:inherit} .tpmtag.leer{border:none;background:none;cursor:default} .tpmtag.wochenende{background:#F4F4F5} .tpmtag.feiertag{background:#F1EEF6} .tpmtag.heute{border:2px solid #102D57} .tpmtag.vorgemerkt{border-style:dashed;border-color:#8FA3BC} .tpmtag:hover:not(.leer){background:#F2F6FB} .tpmnr{font-weight:700;color:#102D57;font-size:13px} .tpmfeier{font-size:10.5px;color:#6E4A9E} .tpmzahl{font-size:12px;font-weight:600} .tpmrest{font-size:10.5px;color:var(--textleise)} .tpmrest.rot{color:var(--rotsignal);font-weight:600} /* Tourenplanung Punkt 8 (04.10.2026): „Steht draußen & Abrechnen“ als Zeilen */ .drliste{display:flex;flex-direction:column;gap:6px} .drzeile{display:flex;gap:10px;align-items:stretch;background:#fff;border:1px solid #E1E4E8;border-radius:8px;padding:7px;cursor:pointer} .drzeile:hover{border-color:#B9C4D2;background:#FAFBFC} .drzeile .tpgroesse{flex:0 0 64px} .drtext{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .drrechts{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px} .drknoepfe{display:flex;gap:6px} .drstand{font-size:12px;font-weight:700;padding:2px 9px;border-radius:10px} .drstand.gelb{background:#FFF7CC;color:#7A6200} .drstand.orange{background:#FFE3C2;color:#A14F00} .drstand.rot{background:#FBE0DD;color:#B3261E} /* Tourenplanung Punkt 10: Fahrerhinweise als Knöpfe im schlanken Fenster */ .hinweisknoepfe > div{flex-direction:row !important;flex-wrap:wrap;gap:6px !important} .hinweisknoepfe > div > div{flex-direction:row !important;flex-wrap:wrap;gap:6px !important} .hinweisknoepfe .wahlzeile{border:1px solid #C9D2DB;border-radius:14px;padding:3px 10px;font-size:12.5px;cursor:pointer;background:#fff} .hinweisknoepfe .wahlzeile input[type=checkbox]{position:absolute;opacity:0;pointer-events:none} .hinweisknoepfe .wahlzeile:has(input:checked){background:#102D57;color:#fff;border-color:#102D57} .hinweisknoepfe .wahlzeile:focus-within{outline:2px solid #FFF200} .tphalb{margin:6px 8px 0;padding:5px 8px;border-radius:6px;font-size:11.5px;background:repeating-linear-gradient(45deg,#F4F5F7,#F4F5F7 6px,#E9EBEE 6px,#E9EBEE 12px);color:#3D4A5C} .planterminrot{margin-left:4px;border:none;border-radius:9px;background:var(--rotsignal,#B3261E);color:#fff;font-size:10.5px;font-weight:700;padding:1px 7px;cursor:pointer;white-space:nowrap} .tpwartet{font-size:11px;font-weight:700;color:#A14F00;background:#FFE3C2;border-radius:8px;padding:1px 7px;align-self:flex-start;margin-top:2px} .tpkachel.gerissen{border:2px solid var(--rotsignal);box-shadow:0 0 0 2px rgba(179,38,30,.18)} .tpgerissen{font-size:11.5px;font-weight:800;color:#fff;background:var(--rotsignal);border-radius:5px;padding:2px 6px;margin-top:3px} .logwarnung.rot{border-left-color:var(--rotsignal);background:#FBE9E7} .angebotrest{margin-left:auto;color:#B35400;background:#FFF1E0;border:1px solid #F5C08A;border-radius:8px;padding:4px 12px} /* Freddy 04.10.2026 (U2): Kosten ohne eigene Position mit Regler */ .kopraster{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(220px,1fr);gap:16px;margin-top:8px} .kopregler{display:flex;flex-direction:column;gap:6px;padding:10px 12px;background:var(--flaeche);border-radius:8px} .kopregler input[type=range]{width:100%} .koplive{display:flex;flex-direction:column;gap:3px;font-size:12.5px} .kopzeile{display:flex;justify-content:space-between;gap:10px} /* Freddy 04.10.2026 (U3): EP mit Umlage-Vermerk, DB je Stunde */ .epumlage{font-size:10.5px;color:#B35400;text-align:right;margin-top:2px;white-space:nowrap} .posdb{font-size:12px} .posdb.rot{color:var(--rotsignal);font-weight:700;background:#FDECEA} .restzeile td{background:#FFF1E0;color:#B35400;font-size:12.5px;padding:6px 8px} /* KI-Liste (04.10.2026): Auswertungen – Satz oben und Frage in Klartext */ .auswsatz{font-size:14px;font-weight:600;color:var(--navy);line-height:1.5} .auswfragereihe{display:flex;gap:8px;margin-top:10px} .auswfragereihe input{flex:1;height:36px} .auswantwort{margin-top:8px;font-size:13px} .auswantwortsatz{font-weight:700} .auswantwort ul{margin:4px 0 0 18px;padding:0} .stammzeile{display:flex;gap:6px;align-items:center;margin-bottom:6px} .stammzeile.neu{margin-top:10px;padding-top:8px;border-top:1px dashed var(--linie)} /* Teil 1 (Freddy 04.10.2026): Angebot nur noch Angebot - Kopf, vier Reiter, Hinweisstreifen */ .angident{display:flex;flex-direction:column;gap:2px;min-width:200px;margin-right:6px} .angnummer{font-size:17px;font-weight:700;color:#102D57} .angstatus{font-size:11px;font-weight:700;border-radius:10px;padding:1px 9px;background:#D3D2D2;color:#102D57;text-transform:uppercase;letter-spacing:.3px} .angstatus.versendet,.angstatus.angemeldet{background:#E3ECF6;color:#102D57} .angstatus.beauftragt{background:#DFF0E2;color:#1F5A2B} .angstatus.abgelehnt,.angstatus.storniert{background:#FBE0DD;color:#B3261E} .angreiter{display:flex;gap:0;border-bottom:2px solid #102D57;flex-wrap:wrap} .angreiter button{border:1px solid #D3D2D2;border-bottom:none;background:#fff;color:#102D57;font:inherit;font-size:13px;font-weight:600;padding:8px 14px;border-radius:8px 8px 0 0;cursor:pointer;margin-right:3px;display:flex;gap:6px;align-items:center} .angreiter button.an{background:#102D57;color:#fff;border-color:#102D57} .angzaehler{background:#FFF200;color:#102D57;border-radius:9px;padding:0 7px;font-size:11px;font-weight:700} .angstreifen{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:10px 14px;border:2px dashed #D3D2D2;border-radius:8px;color:#5F6B7A;font-size:12.5px;background:#fff} .angbriefbogen{width:100%;height:78vh;border:1px solid #D3D2D2;border-radius:6px;background:#fff} .linkknopf{border:none;background:none;padding:0;color:#102D57;font:inherit;font-weight:600;text-decoration:underline;cursor:pointer} /* Teil 2 (Freddy 04.10.2026): Kasten „KI-Hilfe“ über den Positionen */ .kihilfe{border-left:4px solid #102D57} .kihilfekopf{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .kihilfekopf h2{margin:0} .kihilfeknoepfe{display:flex;gap:6px;flex-wrap:wrap;flex:1} .kikarten{display:flex;gap:10px;overflow-x:auto;margin-top:10px;padding-bottom:4px;font-size:12.5px} .kikarte{flex:0 0 230px;border:1px solid #D3D2D2;border-radius:8px;padding:8px 10px;background:#fff;display:flex;flex-direction:column;gap:4px} .kikarte.wichtig{background:#FFF200;border-color:#E6D900} .kikarte.rot:not(.wichtig){border-left:4px solid var(--rotsignal)} .kikartekopf{display:flex;gap:6px;align-items:center} .kinr{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;border-radius:10px;background:#102D57;color:#fff;font-weight:700;font-size:11px} .kiwichtig{font-size:10.5px;font-weight:800;letter-spacing:.5px;color:#102D57} .kikartetitel{font-weight:700;color:#102D57;line-height:1.3} .kikartesatz{color:#3D4A5C;line-height:1.35} .kichip{display:inline-block;margin-left:6px;background:#102D57;color:#fff;border-radius:9px;padding:0 7px;font-size:10.5px;font-weight:700;vertical-align:middle} /* Teil 3 (Freddy 04.10.2026): Positionen in Titeln */ .anzeigeleiste{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px;padding:6px 10px;background:#F4F5F7;border-radius:8px;font-size:12px} .anzeigetitel{font-weight:800;letter-spacing:.6px;color:#102D57;font-size:11px} .anzeigeschalter{display:flex;align-items:center;gap:4px;padding:2px 8px;border:1px solid #D3D2D2;border-radius:12px;background:#fff;cursor:pointer} .anzeigeschalter.an{border-color:#102D57;color:#102D57;font-weight:600} .postabelle.ohnelangtext .poslangtext{display:none} /* Gegenprüfung: Spalte bleibt (Sonderzeilen mit colspan zählen sie mit), nur leer und ohne Breite */ .postabelle.ohneherkunft .posherkunft{width:0;padding:0 !important;border-left:0;border-right:0;font-size:0;overflow:hidden} .postabelle.ohneherkunft .posherkunft > *{display:none} .titelpfeil{border:none;background:none;color:#102D57;font-size:13px;cursor:pointer;padding:0 4px 0 0} .titelinfo{color:#5F6B7A;font-size:12px} .titeldb{font-weight:700;font-size:12px} .titeldb.gruen{color:var(--gruensignal)}.titeldb.gelb{color:#A07A00}.titeldb.rot{color:var(--rotsignal)} td.unsichtbar{visibility:hidden} .neuezeile input{width:100%;height:30px;border:1.5px dashed #9AA6B5;border-radius:6px;background:#FAFBFC;padding:0 10px;font:inherit;font-size:12.5px} .titelsummenzeile td{border-top:2px solid #102D57;font-weight:600;color:#102D57;font-size:12.5px;padding-top:4px} .herkunftchip{display:inline-block;font-size:10.5px;font-weight:700;border-radius:9px;padding:1px 7px;white-space:nowrap} .herkunftchip.nachkalkuliert{background:#DFF0E2;color:#1F5A2B} .herkunftchip.stamm{background:#E3ECF6;color:#1C4E8A} .herkunftchip.aehnlich{background:#ECEDEF;color:#4A5563} .herkunftchip.internet{background:#EFE5F5;color:#6E4A9E} .herkunftchip.geschaetzt{background:#FFF7BF;color:#7A6200} tr.poseventual td{color:#8A929C} tr.poseventual input{color:#8A929C} .poseventualchip{display:inline-block;margin-top:3px;font-size:10.5px;font-weight:700;border-radius:9px;padding:0 7px;background:#ECEDEF;color:#4A5563} .poseventualhaken{display:inline-flex;align-items:center;gap:2px;font-size:11px;color:#5F6B7A;margin-right:6px;cursor:pointer} .postabelle td.posbez{min-width:280px} .anzeigeschalter{text-transform:none;letter-spacing:0;font-size:12px} /* C1 (Freddy 04.10.2026): Kennzahlen klein und flach in der Kopfzeile */ #kopfzahlen{display:flex;align-items:center;min-width:0} .kopfzahlleiste{display:flex;gap:6px;flex-wrap:wrap} .kopfzahl{display:flex;align-items:baseline;gap:5px;border:1px solid #D3D2D2;border-left:3px solid var(--f,#102D57);border-radius:6px;background:#fff;padding:2px 8px;font:inherit;font-size:11.5px;color:#3D4A5C;cursor:pointer;white-space:nowrap} .kopfzahl strong{font-size:14px;color:#102D57} .kopfzahl.an{background:#102D57;color:#fff;border-color:#102D57} .kopfzahl.an strong{color:#fff} /* Teil 4 (Freddy 04.10.2026): Nachlass - oranger Chip, Vorschau vorher → nachher */ .nachlasschip{display:inline-block;margin:3px 4px 0 0;padding:1px 8px;border-radius:10px;border:1px solid #E8A45C;background:#FDF0E1;color:#9A5410;font:600 11px 'IBM Plex Sans',sans-serif;cursor:pointer;white-space:nowrap} .nachlasschip:hover{background:#FBE3C8} .nachlassweniger{color:var(--navy);font-size:13px} .nachlassvorschau table{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px} .nachlassvorschau th{text-align:right;font-weight:600;color:var(--textleise);padding:4px 6px} .nachlassvorschau th:first-child{text-align:left} .nachlassvorschau td{padding:5px 6px;border-top:1px solid var(--flaeche)} .nachlassok{margin-top:10px;padding:8px 10px;border-radius:6px;background:#E7F4EA;color:#1F6B33;font-size:13px} .nachlassrot{margin-top:10px;padding:8px 10px;border-radius:6px;background:#FBE9E9;color:#A12626;font-size:13px} .titelauswertung{margin-top:12px;border:1px solid var(--flaeche);border-radius:8px;padding:8px 12px;background:#fff} .titelauswertungleiste{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;font-size:13px} .titelauswertungtabelle{width:100%;border-collapse:collapse;margin-top:8px;font-size:13px} .titelauswertungtabelle th{text-align:left;color:var(--textleise);font-weight:600;padding:4px 6px;border-bottom:1px solid var(--flaeche)} .titelauswertungtabelle td{padding:4px 6px;border-bottom:1px solid var(--flaeche)} .titelauswertungtabelle .auswertungsumme td{font-weight:600;border-top:2px solid var(--flaeche)} .nachlassrottext,.nachlassrottext td{color:var(--rotsignal, #C0392B)} .epfestwarnung{margin-top:3px;padding:3px 6px;border-radius:5px;background:#FFF8C4;color:#6B5800;font-size:10.5px;text-align:right} /* Teil 5 (Freddy 04.10.2026): Projekt analysieren - links Liste, rechts Detail */ .analysezwei{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:14px;margin:12px 0;align-items:start} @media (max-width:900px){.analysezwei{grid-template-columns:1fr}} .analyselinks{border:1px solid var(--flaeche);border-radius:8px;padding:10px;background:#fff;position:sticky;top:8px} .analyselinkskopf{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px} .analysebalken{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--flaeche);margin:4px 0 4px} .analysebalken span.gruen{background:#2E8B57}.analysebalken span.gelb{background:var(--gelb)}.analysebalken span.orange{background:#E8833A} .analysegruppe{margin:12px 0 4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--textleise)} .analysepunkt{display:flex;gap:8px;align-items:center;width:100%;text-align:left;border:1px solid transparent;background:none;padding:6px 6px;border-radius:6px;cursor:pointer;font:inherit;font-size:13px} .analysepunkt:hover{background:var(--flaeche)} .analysepunkt.an{border-color:var(--navy);background:#EEF2F8} .analysepunkt.wichtig{background:#FFFBCC} .analysedot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--gelb);border:1px solid #C9B800} .analysedot.gruen{background:#2E8B57;border-color:#2E8B57}.analysedot.orange{background:#E8833A;border-color:#E8833A} .analysepunktname{flex-grow:1;min-width:0} .analysepunktname .kiwichtig{margin-right:6px} .analysepunktstatus{white-space:nowrap;font-size:11.5px;font-weight:600;color:var(--textleise)} .analysepunktstatus.gruen{color:#1F6B33}.analysepunktstatus.orange{color:#B35A12}.analysepunktstatus.gelb{color:var(--amber)} .analyserechts{border:1px solid var(--flaeche);border-radius:8px;padding:12px 14px;background:#fff;min-height:200px} .analyserechts h4{margin:14px 0 6px;font-size:13px;color:var(--navy)} .analysedetailkopf{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .analysedetailkopf h3{margin:0;font-size:16px;color:var(--navy)} .analysezitat{margin:8px 0;padding:6px 10px;border-left:3px solid var(--grau, #D3D2D2);font-style:italic;font-size:12.5px;color:var(--text)} .analysekostentabelle{width:100%;border-collapse:collapse;font-size:12.5px} .analysekostentabelle th{text-align:left;font-weight:600;color:var(--textleise);padding:3px 4px;border-bottom:1px solid var(--flaeche)} .analysekostentabelle td{padding:3px 4px;border-bottom:1px solid var(--flaeche);vertical-align:middle} .analysekostentabelle input[aria-label="Kostenblock"]{width:100%;min-width:140px} .analysekostentabelle select.herkunftchip{border:0;font:600 11px 'IBM Plex Sans',sans-serif;padding:1px 4px} .analyserechnung{white-space:nowrap} .analysewege{margin:4px 0 8px} .analyseregler{display:flex;gap:10px;align-items:center;margin:6px 0} .analyseregler input[type=range]{flex-grow:1;max-width:320px} .analysezwischen{display:flex;gap:16px;font-size:13px;font-weight:600;margin:4px 0 8px} .orangetext{color:#B35A12} .analyseaenderung{margin-top:10px;padding:8px 10px;border:1px solid var(--flaeche);border-radius:6px;background:#FAFBFC} .analyseaenderung table{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:4px} .analyseaenderung th{text-align:right;color:var(--textleise);font-weight:600;padding:2px 6px} .analyseaenderung th:first-child{text-align:left} .analyseaenderung td{padding:3px 6px;border-top:1px solid var(--flaeche)} /* Teil 6 (Freddy 04.10.2026): Projektseite mit Reitern */ .neuhierchip{display:inline-block;margin-left:6px;padding:0 6px;border-radius:8px;background:#E6EEF8;color:#1F4E8C;font:700 9.5px 'IBM Plex Sans',sans-serif;letter-spacing:.03em;vertical-align:middle} .projektkopfleiste{padding:10px 14px} .projektkopfzeile{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap} .projektkopfname{font-size:16px;color:var(--navy)} .projektstufen{margin-top:8px !important} .mitprojektkopf .steckbriefstatus{display:none !important} .projektuebersicht{display:grid;grid-template-columns:1fr minmax(260px,360px);gap:14px;align-items:start} @media (max-width:1000px){.projektuebersicht{grid-template-columns:1fr}} .projektkarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px} .projektkarte h3,.projektseitenkarte h3{margin:0 0 6px;font-size:13px;color:var(--navy)} .projektkarte{font-size:13px} .projektringkarte{display:flex;gap:14px;align-items:center;font-size:13px} .projektring{width:84px;height:84px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center} .projektringinnen{width:62px;height:62px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--navy)} .projektdokkarte{grid-column:1/-1} .projektdokzeile{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--flaeche);font-size:12.5px} .projektdokzeile.klickbar{cursor:pointer} .projektdokzeile.klickbar:hover{background:var(--flaeche)} .projektdokzeile.haupt{font-weight:600} .projektverlaufspalte{min-width:0} .projektreitergrid{display:grid;grid-template-columns:1fr 280px;gap:14px;align-items:start} @media (max-width:1000px){.projektreitergrid{grid-template-columns:1fr}} .projektseite{display:flex;flex-direction:column;gap:12px} .projektseitenkarte{font-size:12.5px;padding:10px 12px} .chip-rot{background:#FBE9E9;color:#A12626} .rottext{color:var(--rotsignal, #C0392B)} .projektverlaufzeile{padding:5px 0;border-bottom:1px solid var(--flaeche);font-size:12.5px} .projektverlaufzeile.beschwerde{border-left:3px solid var(--rotsignal);padding-left:6px} /* Abfallregister: Warnung als ruhige gelbliche Zeile (Vorgabe 12) */ .warnzeile{background:var(--amberflaeche);color:var(--amber);border-left:3px solid var(--ambersignal);border-radius:4px;padding:7px 10px;font-size:12.5px;margin:6px 0;line-height:1.45} /* ===== KL1–KL3 (Vorgabe 17, Freddy 04.10.2026): einheitlicher Kopf auf allen Seiten ===== */ /* feste Programm-Kopfzeile: Welt, Hilfe, Angefangen, Abmelden */ .programmleiste{height:34px;display:flex;align-items:center;gap:8px;padding:0 24px;background:#F4F5F8;border-bottom:1px solid var(--linie);font-size:12px} .programmname{font-weight:600;color:var(--gruen);padding:2px 9px;border-radius:10px;background:#EAF1EC;border:1px solid #C7DCCD;font-size:11.5px} .programmname.test{color:var(--amber);background:#FFFCF2;border-color:#F0E3C0} .programmleiste .knopf{height:26px;padding:0 10px;font-size:12px} .programmleiste .hilfeknopf{width:26px;height:26px} /* Titel voll lesbar, darunter der Erklärsatz (der weicht bei Platzmangel, nie der Titel) */ .kopftitel{display:flex;flex-direction:column;justify-content:center;flex:0 1 auto;min-width:0;line-height:1.25} .kopftitel h1{white-space:nowrap} /* der Erklärsatz bestimmt die Mindestbreite nicht mit (eine Zeile, Rest „…“) - der Titel nie gestaucht */ .kopftitel{min-width:min-content} .kopftitel #untertitel{font-size:12px;color:var(--textleise);white-space:normal;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:normal;word-break:keep-all} header{flex-wrap:nowrap !important} /* die Kennzahlen als EINE flache Kachel */ /* wer zuerst nachgibt: Kennzahlen (stark), dann Suche, dann Knöpfe (unter „Mehr“), nie der Titel */ #kopfzahlen{flex:0 12 auto;min-width:0;overflow:hidden} header > .kopfsuchhuelle{flex:0 3 220px;min-width:120px} header > .kopfsuchhuelle input{width:100%;min-width:0} header > .kopfsuchhuelle.seitensuchebreit{flex-basis:380px} /* Containerdienst: großes Suchfeld (Tourenplanung Punkt 8) */ .kopfzahlleiste{flex-wrap:nowrap;gap:0;border:1px solid #D3D2D2;border-radius:8px;background:#fff;overflow:hidden} .kopfzahlleiste .kopfzahl{border:0;border-radius:0;border-left:3px solid var(--f,#102D57);padding:3px 9px} .kopfzahlleiste .kopfzahl + .kopfzahl{box-shadow:inset 1px 0 0 #E6E7EA} /* Knöpfe: eine Linie, kein zweites Stockwerk */ header #kopfknoepfe{flex:0 0 auto;flex-wrap:nowrap !important;min-width:0} #kopfknoepfe.einreihig{overflow:visible} #kopfzahlen:not(:empty){min-width:0} /* Gegenprüfung: bei Platzmangel geben die Zahlen ganz nach */ @media (max-width: 900px){ header{flex-wrap:wrap !important} .programmleiste{padding:0 13px} } .kopfzahlbetrag{font-variant-numeric:tabular-nums;color:var(--textleise);font-size:11px} /* ===== DE1/DE5 (Freddy 04.10.2026): Kopfknöpfe auf allen Seiten gleich – weiß mit Rand, gleich hoch, gleich rund ===== */ header #kopfknoepfe{gap:var(--abstandklein) !important;align-items:center} header #kopfknoepfe .knopf,header #kopfknoepfe.einreihig .knopf{height:var(--knopfhoehe);padding:0 14px;border-radius:var(--rund);font-size:13px;white-space:nowrap} header #kopfknoepfe .knopf.leise{background:#fff;border:1px solid #C9D2DB;color:var(--navy);font-weight:500} header #kopfknoepfe .knopf:not(.leise){font-weight:600} @media (min-width: 901px){ .inhalt{padding:var(--abstand) var(--abstandgross);gap:var(--abstand)} } /* Handy behält seine Ränder (Gegenprüfung) */ .block{border-radius:var(--rundblock)} /* DE3: Zeilen-Darstellung der gemeinsamen Listen-Vorlage (listeDarstellen) */ .listenzeilen{display:flex;flex-direction:column} .listenzeile{display:flex;align-items:center;gap:var(--abstand);padding:9px 6px;border-bottom:1px solid var(--linieleise)} .listenzeile.klickbar{cursor:pointer} .listenzeile.klickbar:hover,.listenzeile.aktiv{background:var(--flaeche)} .listenzeiletext{flex:1 1 auto;min-width:0} .listenzeiletitel{font-size:13.5px;font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .listenzeileunter{font-size:12px;color:var(--textleise);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .listenzeilewarn{font-size:11.5px;font-weight:600;color:var(--rot)} .listenzeilebetrag{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;min-width:90px} /* Umschalter überall gleich, rechts im Listenkopf */ .darstellungschalter{margin-left:auto} /* DE4 (Freddy 04.10.2026): EINE Farbbedeutung – rot überfällig/dringend, grün erledigt, Bernstein wartet, blau gesendet/in Arbeit, grau Entwurf. Das Firmengelb #FFF200 bleibt den Aktionsknöpfen. */ .chip-wartet{background:var(--amberflaeche);color:var(--amber)} /* Vorgabe 20: Auswahl mit Tippen-und-Finden (suchAuswahl) */ /* BZ2 (Vorgabe 20): gemeinsame Such-Auswahl - die