/* ============================================================ Oberfläche — die ruhige Gestaltung ------------------------------------------------------------ Wird NACH tailwind.min.css geladen und ist bewusst unabhängig davon: das eingecheckte Tailwind kennt nur eine Teilmenge der Klassen, fehlende färben stillschweigend nichts. Alles hier steht deshalb als eigene Regel. Grundgedanke „Ruhig": pro Seite genau EINE weiße Fläche. Alles andere sind Abschnitte, die nur durch Überschrift, Haarlinie und Abstand getrennt sind. Farbe bedeutet Handlungsbedarf — sonst Grau. Namensraum: hw- ============================================================ */ :root { --hw-bg: #fbfbf9; --hw-surf: #ffffff; --hw-surf2: #f6f6f3; --hw-surf3: #f1f1ed; --hw-ink: #15181c; --hw-ink2: #414852; --hw-ink3: #767e88; --hw-line: #e5e6e2; --hw-line2: #d3d5d0; --hw-zart: #eff0ec; --hw-acc: #0e6b78; --hw-acc-ink: #ffffff; --hw-acc-zart: rgba(14, 107, 120, .08); --hw-gut: #15803d; --hw-gut-f: #dcfce7; --hw-warn: #b45309; --hw-warn-f: #fef3c7; --hw-krit: #b91c1c; --hw-krit-f: #fee2e2; --hw-info: #1d4ed8; --hw-info-f: #dbeafe; --hw-lila: #6d28d9; --hw-lila-f: #ede9fe; --hw-r: 12px; --hw-schatten: 0 1px 2px rgba(20, 24, 28, .05); --hw-hoch: 0 8px 30px rgba(20, 24, 28, .12); --hw-dunkel: #1d232b; --hw-dunkel2: #2a323c; --hw-dunkel3: #39434f; --hw-dunkel-text: #98a3af; --hw-leiste-breit: 216px; --hw-leiste-schmal: 68px; } html.dark { --hw-bg: #14171a; --hw-surf: #1b1f24; --hw-surf2: #20252b; --hw-surf3: #262c33; --hw-ink: #e9edf1; --hw-ink2: #b6bec7; --hw-ink3: #8b949d; --hw-line: #2b3138; --hw-line2: #3a424b; --hw-zart: #242a30; --hw-acc: #2a9aab; --hw-acc-zart: rgba(42, 154, 171, .13); --hw-gut: #4ade80; --hw-gut-f: rgba(74, 222, 128, .14); --hw-warn: #fbbf24; --hw-warn-f: rgba(251, 191, 36, .14); --hw-krit: #f87171; --hw-krit-f: rgba(248, 113, 113, .14); --hw-info: #60a5fa; --hw-info-f: rgba(96, 165, 250, .14); --hw-lila: #a78bfa; --hw-lila-f: rgba(167, 139, 250, .14); --hw-schatten: 0 1px 2px rgba(0, 0, 0, .35); --hw-hoch: 0 8px 30px rgba(0, 0, 0, .5); --hw-dunkel: #0f1317; --hw-dunkel2: #1b2027; --hw-dunkel3: #2b323b; } /* ============================ Gerüst ============================ */ body.hw-body { margin: 0; background: var(--hw-bg); color: var(--hw-ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; } /* Der Zustand der Navigation hängt an : ohne Klasse = Seitenleiste ausgefahren .hw-oben = Kopfzeile .hw-schmal = Seitenleiste eingefahren Gesetzt wird das im Kopf der Seite, bevor gezeichnet wird — sonst springt die Leiste beim Laden einmal sichtbar um. */ .hw-rahmen { display: flex; flex-direction: row; min-height: 100vh; } html.hw-oben .hw-rahmen { flex-direction: column; } .hw-z { font-variant-numeric: tabular-nums; } /* --- Navigation --- */ .hw-nav { background: var(--hw-dunkel); color: #ffffff; flex: none; display: flex; flex-direction: column; width: var(--hw-leiste-breit); padding: 18px 12px 14px; /* Haftend, sonst rutschen der Griff zum Einfahren und das Konto auf langen Seiten unter den Falz — genau die zwei Dinge, die immer erreichbar sein müssen. Bei zu wenig Höhe scrollt die Leiste in sich. */ position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; } html.hw-schmal .hw-nav { width: var(--hw-leiste-schmal); padding: 16px 8px 14px; } html.hw-oben .hw-nav { width: auto; align-self: stretch; flex-direction: row; align-items: center; gap: 16px; height: 58px; padding: 0 16px; overflow: visible; z-index: 40; } /* In der Kopfzeile ist nur für die Hauptnavigation und das Konto Platz. Die zweite Ebene und der Griff würden die Zeile über den Rand hinausschieben; erreichbar bleiben sie über das Konto-Menü. Wichtig: nur die DIREKTEN Kinder der Leiste ausblenden — die Einträge im Konto-Menü tragen dieselbe Klasse und sollen sichtbar bleiben. */ html.hw-oben .hw-nav > .hw-nav-trenner, html.hw-oben .hw-nav > .hw-nav-zweit, html.hw-oben .hw-griff { display: none; } html.hw-oben .hw-nav-fuss { margin-top: 0; margin-left: auto; position: relative; } html.hw-oben .hw-konto { border-top: 0; padding: 4px 8px 4px 4px; margin-top: 0; } html.hw-oben .hw-konto-name span { display: none; } /* Der Abstand nach unten gehört nur in die Seitenleiste. In der Kopfzeile machte er das Logo höher als die Navigationspunkte daneben, und weil die Zeile mittig ausrichtet, saß die Wortmarke sichtbar zu hoch. */ .hw-marke-zeile { display: flex; align-items: center; gap: 9px; text-decoration: none; padding: 0 4px 14px; margin-bottom: 4px; } html.hw-oben .hw-marke-zeile { padding: 0; margin: 0; } html.hw-schmal:not(.hw-oben) .hw-marke-zeile { justify-content: center; padding: 0 0 12px; } .hw-marke-text { font-size: 19px; font-weight: 700; letter-spacing: -.015em; color: #fff; white-space: nowrap; } .hw-navpunkte { display: flex; flex-direction: column; gap: 3px; } html.hw-oben .hw-navpunkte { flex-direction: row; gap: 2px; } .hw-navpunkt { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 9px; color: #d2d9e0; font-size: 14px; font-weight: 500; text-decoration: none; position: relative; } html.hw-oben .hw-navpunkt { gap: 7px; padding: 8px 10px; font-size: 13px; color: var(--hw-dunkel-text); } .hw-navpunkt:hover { background: var(--hw-dunkel2); color: #fff; } .hw-navpunkt.ist-aktiv { background: var(--hw-acc); color: #fff; font-weight: 600; } .hw-navpunkt svg { flex: none; } html.hw-schmal:not(.hw-oben) .hw-navpunkt { justify-content: center; padding: 10px 4px; } html.hw-schmal:not(.hw-oben) .hw-navpunkt-text { display: none; } html.hw-schmal:not(.hw-oben) .hw-zaehler { display: none; } html.hw-schmal:not(.hw-oben) .hw-navpunkt.hat-neues::after { content: ""; position: absolute; top: 7px; right: 12px; width: 7px; height: 7px; border-radius: 999px; background: var(--hw-warn); } .hw-zaehler { margin-left: auto; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 999px; background: var(--hw-dunkel3); color: #c3ccd5; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .hw-navpunkt.ist-aktiv .hw-zaehler { background: rgba(255, 255, 255, .24); color: #fff; } .hw-nav-trenner { height: 1px; background: var(--hw-dunkel2); margin: 14px 4px; } .hw-nav-zweit { padding: 8px 12px; font-size: 13px; color: var(--hw-dunkel-text); text-decoration: none; display: block; } .hw-nav-zweit:hover { color: #fff; } .hw-nav-fuss { margin-top: auto; } .hw-griff { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; margin-bottom: 10px; background: var(--hw-dunkel2); color: #fff; font-size: 12.5px; font-weight: 600; border: 0; width: 100%; cursor: pointer; font-family: inherit; } html.hw-schmal:not(.hw-oben) .hw-griff { justify-content: center; } .hw-griff:hover { background: var(--hw-dunkel3); } .hw-umschalter { display: inline-flex; gap: 2px; padding: 2px; flex: none; border-radius: 8px; background: var(--hw-dunkel2); } html.hw-schmal:not(.hw-oben) .hw-umschalter { flex-direction: column; } .hw-umschalter button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; border-radius: 6px; background: transparent; border: 0; cursor: pointer; color: var(--hw-dunkel-text); } .hw-umschalter button.ist-aktiv { background: var(--hw-dunkel3); color: #fff; } /* Das Konto ist ein Knopf, kein Textblock — es klappt das Menü auf. */ .hw-konto-huelle { position: relative; } .hw-konto { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 8px 4px; margin-top: 6px; border: 0; border-top: 1px solid var(--hw-dunkel2); background: none; color: inherit; font-family: inherit; text-align: left; cursor: pointer; border-radius: 0 0 9px 9px; } .hw-konto:hover { background: var(--hw-dunkel2); } .hw-konto-pfeil { margin-left: auto; font-size: 10px; color: var(--hw-dunkel-text); flex: none; } html.hw-schmal:not(.hw-oben) .hw-konto-pfeil { display: none; } /* Menü: in der Leiste in der Zeilenflucht nach oben, weil die Leiste in sich scrollt und ein schwebendes Feld dort abgeschnitten würde. */ .hw-konto-menue { background: var(--hw-dunkel2); border-radius: 10px; padding: 5px; margin-bottom: 6px; } .hw-menue-punkt { border-radius: 7px; } .hw-menue-punkt:hover { background: var(--hw-dunkel3); color: #fff; } .hw-menue-punkt--warn { color: #f2a2a2; } .hw-menue-trenner { display: block; height: 1px; background: var(--hw-dunkel3); margin: 5px 8px; } /* In der Kopfzeile schwebt dasselbe Menü unter dem Konto. */ html.hw-oben .hw-konto-menue { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 210px; background: var(--hw-dunkel); border: 1px solid var(--hw-dunkel3); box-shadow: var(--hw-hoch); margin-bottom: 0; } /* Eingefahren bleibt nur das Kürzel — das Menü braucht dann eigene Breite. */ html.hw-schmal:not(.hw-oben) .hw-konto-menue { margin: 0 -4px 6px; padding: 4px; } html.hw-schmal:not(.hw-oben) .hw-menue-punkt { padding: 8px 6px; font-size: 11px; text-align: center; } html.hw-schmal:not(.hw-oben) .hw-konto { justify-content: center; border-top: 0; padding-top: 10px; } .hw-konto-name { min-width: 0; flex-grow: 1; } .hw-konto-name b { display: block; font-size: 13px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hw-konto-name span { display: block; font-size: 11.5px; color: var(--hw-dunkel-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.hw-schmal:not(.hw-oben) .hw-konto-name { display: none; } .hw-kuerzel { width: 32px; height: 32px; border-radius: 999px; flex: none; background: var(--hw-dunkel2); color: #dfe6ed; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } /* --- Werkzeugzeile über dem Inhalt --- */ .hw-koerper { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; } .hw-werkzeuge { height: 48px; flex: none; border-bottom: 1px solid var(--hw-line); background: var(--hw-surf); display: flex; align-items: center; gap: 14px; padding: 0 22px; } .hw-suchfeld { display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--hw-line); background: var(--hw-surf2); min-width: 240px; font-size: 13px; color: var(--hw-ink3); text-decoration: none; } .hw-werkzeuge-rechts { margin-left: auto; display: flex; align-items: center; gap: 16px; } .hw-werkzeuge-rechts a { color: var(--hw-ink3); display: inline-flex; } .hw-werkzeuge-rechts a:hover { color: var(--hw-ink); } /* ========================= Seiteninhalt ========================= */ .hw-spalten { flex-grow: 1; display: flex; min-height: 0; align-items: stretch; } .hw-haupt { flex-grow: 1; min-width: 0; padding: 24px 26px 40px; } /* Die Arbeitsleiste steht rechts und bleibt stehen. ------------------------------------------------------------ margin-left: auto — sonst klebt sie am Inhalt statt am rechten Rand, sobald der Hauptbereich eine max-width hat (Einstellungen). Ohne den Automatik-Rand blieb rechts daneben eine leere Fläche. position: sticky — was in der Leiste steht, sind Werkzeuge zur Seite daneben. Scrollt sie mit weg, sind sie beim Lesen weg. Dafür braucht sie align-self: flex-start (sonst wird sie vom Container gestreckt und hat keinen Spielraum zum Kleben) und eine feste Höhe von 100vh, damit die getönte Spalte nicht mitten auf der Seite endet. */ .hw-arbeitsleiste { width: 320px; flex: none; margin-left: auto; align-self: flex-start; position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--hw-surf2); border-left: 1px solid var(--hw-line); padding: 20px 18px 32px; } /* In der Kopfzeilen-Form klebt die dunkle Navigation selbst oben (58 px). Ohne diesen Versatz verschwindet der Kopf der Leiste darunter — beim Scrollen war die Überschrift „Speichern" weg und der Knopf angeschnitten. */ html.hw-oben .hw-arbeitsleiste { top: 58px; height: calc(100vh - 58px); } .hw-titelzeile { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; flex-wrap: wrap; } .hw-titelzeile h1 { margin: 0; font-size: 25px; font-weight: 700; letter-spacing: -.026em; color: var(--hw-ink); } .hw-titel-taten { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; } /* Kennzahlen als Textzeile statt als Kachelreihe */ .hw-zahlen { margin: 0 0 6px; font-size: 13px; color: var(--hw-ink3); line-height: 1.7; } .hw-zahlen b { color: var(--hw-ink); font-weight: 700; font-variant-numeric: tabular-nums; } .hw-zahlen .hw-punkt { padding: 0 10px; color: var(--hw-line2); } .hw-zahlen-warn { margin: 0 0 22px; font-size: 13px; font-weight: 600; color: var(--hw-warn); } .hw-zahlen-warn.ist-gut { color: var(--hw-ink3); font-weight: 400; } /* Die EINE weiße Fläche der Seite */ .hw-flaeche { background: var(--hw-surf); border: 1px solid var(--hw-line); border-radius: var(--hw-r); box-shadow: var(--hw-schatten); padding: 20px 22px; } .hw-flaeche--warn { border-color: color-mix(in srgb, var(--hw-warn) 40%, var(--hw-line)); } .hw-flaeche--krit { border-color: color-mix(in srgb, var(--hw-krit) 40%, var(--hw-line)); } .hw-flaeche--blank { padding: 0; overflow: hidden; } /* Abschnitt ohne Kasten */ .hw-bereich { margin-bottom: 26px; } .hw-bereich-kopf { display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--hw-line); } .hw-bereich-kopf h2 { margin: 0; font-size: 14.5px; font-weight: 700; letter-spacing: -.012em; color: var(--hw-ink); } .hw-bereich-neben { margin-left: auto; font-size: 12.5px; color: var(--hw-ink3); text-decoration: none; } .hw-bereich-neben:hover { color: var(--hw-acc); } .hw-raster2 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; } @media (max-width: 900px) { .hw-raster2 { grid-template-columns: 1fr; gap: 0; } } /* Zeilenlisten */ .hw-zeile { display: flex; align-items: center; gap: 13px; padding: 12px 0; border-top: 1px solid var(--hw-zart); text-decoration: none; color: inherit; } .hw-zeile:first-child { border-top: 0; } .hw-zeile:hover { background: var(--hw-surf2); } .hw-zeile-mitte { min-width: 0; flex-grow: 1; } .hw-zeile-titel { display: block; margin: 0; font-size: 13.5px; font-weight: 600; color: var(--hw-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hw-zeile-unter { display: block; margin: 3px 0 0; font-size: 12px; color: var(--hw-ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hw-streifen { width: 4px; align-self: stretch; min-height: 30px; border-radius: 99px; flex: none; } .hw-geld { font-size: 14px; font-weight: 700; color: var(--hw-ink); font-variant-numeric: tabular-nums; letter-spacing: -.015em; flex: none; } .hw-geld--gross { font-size: 20px; } .hw-geld--krit { color: var(--hw-krit); } .hw-geld--matt { color: var(--hw-ink3); } /* Knöpfe */ .hw-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 15px; min-height: 36px; border-radius: 10px; font-size: 13.5px; font-weight: 600; white-space: nowrap; background: var(--hw-surf); border: 1px solid var(--hw-line2); color: var(--hw-ink2); text-decoration: none; cursor: pointer; font-family: inherit; } .hw-knopf:hover { border-color: var(--hw-ink3); color: var(--hw-ink); } .hw-knopf--voll { background: var(--hw-acc); border-color: var(--hw-acc); color: var(--hw-acc-ink); } .hw-knopf--voll:hover { filter: brightness(1.08); color: var(--hw-acc-ink); } .hw-knopf--warn { background: var(--hw-krit); border-color: var(--hw-krit); color: #fff; } .hw-knopf--warn:hover { filter: brightness(1.08); color: #fff; } .hw-knopf--breit { width: 100%; } .hw-knopf[disabled] { opacity: .5; cursor: default; } /* Marken / Pillen */ .hw-marke { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--hw-surf3); color: var(--hw-ink3); } .hw-marke--gut { background: var(--hw-gut-f); color: var(--hw-gut); } .hw-marke--warn { background: var(--hw-warn-f); color: var(--hw-warn); } .hw-marke--krit { background: var(--hw-krit-f); color: var(--hw-krit); } .hw-marke--info { background: var(--hw-info-f); color: var(--hw-info); } .hw-marke--lila { background: var(--hw-lila-f); color: var(--hw-lila); } .hw-kringel { width: 8px; height: 8px; border-radius: 999px; flex: none; display: inline-block; } /* Arbeitsleiste rechts */ .hw-leisten-kopf { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; } .hw-leisten-kopf h2 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--hw-ink3); } .hw-leisten-zahl { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--hw-krit); color: #fff; font-size: 11px; font-weight: 700; } .hw-leisten-block { margin-bottom: 22px; } .hw-notiz { width: 100%; min-height: 92px; resize: vertical; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--hw-line); background: var(--hw-surf); color: var(--hw-ink2); font-size: 12.5px; line-height: 1.5; font-family: inherit; } .hw-notiz:focus { outline: 2px solid var(--hw-acc); outline-offset: -1px; } .hw-aufgabe { display: flex; align-items: flex-start; gap: 9px; padding: 8px 0; border-top: 1px solid var(--hw-line); } .hw-aufgabe:first-child { border-top: 0; } .hw-haken { width: 17px; height: 17px; border-radius: 5px; flex: none; margin-top: 1px; border: 1.5px solid var(--hw-line2); background: var(--hw-surf); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .hw-haken.ist-fertig { background: var(--hw-acc); border-color: var(--hw-acc); } .hw-aufgabe-text { font-size: 12.5px; line-height: 1.4; color: var(--hw-ink2); flex-grow: 1; } .hw-aufgabe.ist-fertig .hw-aufgabe-text { color: var(--hw-ink3); text-decoration: line-through; } .hw-reiter { display: flex; gap: 4px; margin-bottom: 10px; } .hw-reiter button { padding: 5px 11px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--hw-ink3); font-size: 12.5px; font-weight: 500; cursor: pointer; font-family: inherit; } .hw-reiter button.ist-aktiv { background: var(--hw-surf); border-color: var(--hw-line); color: var(--hw-ink); font-weight: 700; } .hw-schnell { display: flex; align-items: center; gap: 9px; padding: 9px 11px; margin-bottom: 6px; background: var(--hw-surf); border: 1px solid var(--hw-line); border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--hw-ink2); text-decoration: none; } .hw-schnell:hover { border-color: var(--hw-ink3); color: var(--hw-ink); } .hw-schnell .hw-pfeil { margin-left: auto; color: var(--hw-ink3); } /* Liste + Detail (Meine Aufträge) */ .hw-listenspalte { width: 364px; flex: none; background: var(--hw-surf); border-right: 1px solid var(--hw-line); display: flex; flex-direction: column; } .hw-listenkopf { padding: 17px 16px 12px; border-bottom: 1px solid var(--hw-zart); } .hw-listenkopf h1 { margin: 0 0 10px; font-size: 17.5px; font-weight: 700; letter-spacing: -.02em; color: var(--hw-ink); } .hw-listenrumpf { flex-grow: 1; overflow-y: auto; padding: 8px 10px 20px; } .hw-eintrag { display: flex; gap: 11px; padding: 11px 12px; margin-bottom: 2px; border-radius: 9px; border: 1px solid transparent; text-decoration: none; color: inherit; } .hw-eintrag:hover { background: var(--hw-surf2); } .hw-eintrag.ist-gewaehlt { background: var(--hw-acc-zart); border-color: color-mix(in srgb, var(--hw-acc) 45%, transparent); } .hw-filterzeile { display: flex; gap: 6px; flex-wrap: wrap; } .hw-feld { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--hw-line2); background: var(--hw-surf); font-size: 12.5px; color: var(--hw-ink2); font-family: inherit; cursor: pointer; } .hw-feld.ist-gesetzt { border-color: var(--hw-acc); background: var(--hw-acc-zart); color: var(--hw-acc); font-weight: 600; } .hw-detailspalte { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; } .hw-detailkopf { padding: 18px 26px 14px; background: var(--hw-surf); border-bottom: 1px solid var(--hw-line); } .hw-detailkopf h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.024em; color: var(--hw-ink); } .hw-detailrumpf { padding: 20px 26px 40px; overflow-y: auto; } .hw-steckbrief { margin: 0 0 18px; font-size: 13px; color: var(--hw-ink3); line-height: 1.7; } .hw-steckbrief b { color: var(--hw-ink); font-weight: 700; font-variant-numeric: tabular-nums; } .hw-steckbrief .hw-punkt { padding: 0 9px; color: var(--hw-line2); } .hw-leer { margin: 0; padding: 40px 0; text-align: center; font-size: 13.5px; color: var(--hw-ink3); } .hw-karte-flaeche { height: 148px; border-radius: 9px; position: relative; overflow: hidden; background: var(--hw-surf3); border: 1px solid var(--hw-zart); } /* Kleines Balkenband */ .hw-band { height: 6px; border-radius: 999px; background: var(--hw-zart); overflow: hidden; } .hw-band > i { display: block; height: 100%; background: var(--hw-acc); } /* Tastaturfokus bleibt sichtbar */ .hw-navpunkt:focus-visible, .hw-knopf:focus-visible, .hw-zeile:focus-visible, .hw-eintrag:focus-visible, .hw-griff:focus-visible, .hw-umschalter button:focus-visible, .hw-schnell:focus-visible, .hw-feld:focus-visible { outline: 2px solid var(--hw-acc); outline-offset: 2px; } /* Schmale Bildschirme: Leisten weichen */ /* Schmaler Bildschirm: die Leiste rutscht UNTER den Inhalt statt zu verschwinden. Sie ausblenden hieß, ihren Inhalt zu verlieren — auf den Einstellungen wäre das der einzige Speichern-Knopf gewesen, auf „Heute" die Aufmerksamkeitsliste, die Notizen und die Aufgaben. */ @media (max-width: 1100px) { .hw-spalten { flex-direction: column; } .hw-arbeitsleiste { width: 100%; margin-left: 0; align-self: stretch; position: static; height: auto; overflow: visible; border-left: 0; border-top: 1px solid var(--hw-line); } } @media (max-width: 860px) { .hw-rahmen { flex-direction: column; } .hw-nav { width: 100%; flex-direction: row; align-items: center; padding: 10px 14px; overflow-x: auto; } .hw-nav .hw-navpunkte { flex-direction: row; } .hw-nav .hw-navpunkt-text { display: none; } .hw-nav .hw-nav-trenner, .hw-nav .hw-nav-zweit, .hw-nav .hw-griff { display: none; } .hw-nav-fuss { margin-top: 0; margin-left: auto; } .hw-konto { border-top: 0; padding: 0; } .hw-konto-name { display: none; } .hw-listenspalte { width: 100%; border-right: 0; border-bottom: 1px solid var(--hw-line); } .hw-spalten { flex-direction: column; } .hw-haupt { padding: 18px 16px 32px; } } /* Eingefahrene Leiste: die zweite Ebene passt nicht in 68 px und würde nur abgeschnitten dastehen. Sie bleibt über das Konto-Menü oben erreichbar. Der Umschalter Kopfzeile/Seitenleiste bleibt sichtbar — sonst käme man aus dem eingefahrenen Zustand nur noch über den Griff heraus. */ html.hw-schmal:not(.hw-oben) .hw-nav > .hw-nav-zweit, html.hw-schmal:not(.hw-oben) .hw-nav > .hw-nav-trenner { display: none; } html.hw-schmal:not(.hw-oben) .hw-konto { flex-direction: column; gap: 8px; } /* Umschalter auf hellem Grund — in der Werkzeugzeile über dem Inhalt. */ .hw-umschalter--hell { background: var(--hw-surf3); } .hw-umschalter--hell button { color: var(--hw-ink3); } .hw-umschalter--hell button:hover { color: var(--hw-ink); } .hw-umschalter--hell button.ist-aktiv { background: var(--hw-surf); color: var(--hw-ink); box-shadow: var(--hw-schatten); } .hw-werkzeuge-strich { width: 1px; height: 20px; background: var(--hw-line); flex: none; } /* ============================================================ ÜBERGANGSSCHICHT — bewusst vorläufig ------------------------------------------------------------ Die noch nicht einzeln überarbeiteten Seiten sind in Tailwind ausgezeichnet. Damit sie nicht als Fremdkörper in der neuen Hülle stehen, lenkt dieser Block die paar Farb- und Flächenklassen um, die dort tatsächlich vorkommen (aus den Vorlagen ausgezählt, nicht geraten). Gilt NUR innerhalb von body.hw-body, also nur auf Seiten, die bereits auf layouts/app umgestellt sind. Seiten auf der alten Hülle bleiben unberührt. Diese Schicht ersetzt keine Überarbeitung. Sie überträgt Palette, Radien und Schatten — nicht die Anordnung. Wenn eine Seite einzeln überarbeitet ist, verschwinden ihre Tailwind- Klassen von selbst; ist der Block am Ende leer wirksam, kann er ersatzlos weg. ============================================================ */ /* Flächen */ .hw-body .bg-white { background-color: var(--hw-surf); } .hw-body .bg-gray-50 { background-color: var(--hw-surf2); } .hw-body .bg-gray-100 { background-color: var(--hw-surf3); } .hw-body .bg-gray-200 { background-color: var(--hw-zart); } /* Schrift */ .hw-body .text-gray-900 { color: var(--hw-ink); } .hw-body .text-gray-800, .hw-body .text-gray-700 { color: var(--hw-ink2); } .hw-body .text-gray-600, .hw-body .text-gray-500 { color: var(--hw-ink3); } .hw-body .text-gray-400, .hw-body .text-gray-300 { color: var(--hw-ink3); opacity: .85; } /* Linien */ .hw-body .border-gray-100, .hw-body .border-gray-200 { border-color: var(--hw-line); } .hw-body .border-gray-300 { border-color: var(--hw-line2); } .hw-body .divide-gray-100 > :not([hidden]) ~ :not([hidden]), .hw-body .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--hw-line); } /* Akzent — im Bestand heißt er primary */ .hw-body .bg-primary-600, .hw-body .bg-primary-700 { background-color: var(--hw-acc); } .hw-body .bg-primary-50, .hw-body .bg-primary-100 { background-color: var(--hw-acc-zart); } .hw-body .text-primary-500, .hw-body .text-primary-600, .hw-body .text-primary-700 { color: var(--hw-acc); } .hw-body .border-primary-500, .hw-body .border-primary-600 { border-color: var(--hw-acc); } .hw-body .ring-primary-500 { --tw-ring-color: var(--hw-acc); } .hw-body .hover\:bg-primary-700:hover { background-color: var(--hw-acc); filter: brightness(1.08); } .hw-body .hover\:text-primary-600:hover, .hw-body .hover\:text-primary-700:hover { color: var(--hw-acc); } /* Ampelfarben auf die eigenen Werte ziehen, damit „rot" überall dasselbe Rot ist */ .hw-body .text-red-600, .hw-body .text-red-700 { color: var(--hw-krit); } .hw-body .bg-red-50, .hw-body .bg-red-100 { background-color: var(--hw-krit-f); } .hw-body .text-green-600, .hw-body .text-green-700 { color: var(--hw-gut); } .hw-body .bg-green-50, .hw-body .bg-green-100 { background-color: var(--hw-gut-f); } .hw-body .text-amber-600, .hw-body .text-amber-700, .hw-body .text-yellow-600, .hw-body .text-yellow-700 { color: var(--hw-warn); } .hw-body .bg-amber-50, .hw-body .bg-amber-100, .hw-body .bg-yellow-50, .hw-body .bg-yellow-100 { background-color: var(--hw-warn-f); } /* Radien und Schatten auf das Maß der neuen Gestaltung */ .hw-body .rounded-2xl, .hw-body .rounded-xl { border-radius: var(--hw-r); } .hw-body .rounded-lg { border-radius: 10px; } .hw-body .shadow-sm, .hw-body .shadow, .hw-body .shadow-md { box-shadow: var(--hw-schatten); } .hw-body .shadow-lg, .hw-body .shadow-xl { box-shadow: var(--hw-hoch); } /* Der Inhalt der alten Seiten bringt seinen eigenen Rahmen mit (max-w-7xl mx-auto px-4 py-6). Der darf bleiben — nur die Breite soll sich an der Arbeitsfläche orientieren, nicht am Bildschirm. */ .hw-body main > .max-w-7xl { max-width: 1180px; } /* Verläufe: im Bestand steht 20-mal ein blauer bis violetter Verlauf. Neben dem Petrol-Akzent wirkt der wie aus einem anderen Programm. Solange die betroffenen Seiten nicht einzeln überarbeitet sind, werden sie auf einen ruhigen Verlauf in der Akzentfarbe gezogen. Die Tailwind-Farbstopps (--tw-gradient-*) bleiben dabei unbenutzt; deshalb hier eine vollständige Hintergrundangabe statt einzelner Stopps. */ .hw-body [class*="bg-gradient-to-"] { background-image: linear-gradient(135deg, var(--hw-acc), color-mix(in srgb, var(--hw-acc) 78%, #000)) !important; } /* Helle Verläufe (from-*-100 bis to-*-100) sind Flächen hinter Symbolen und dürfen nicht kräftig werden — sie bekommen die zarte Akzenttönung. */ .hw-body [class*="bg-gradient-to-"][class*="-100"], .hw-body [class*="bg-gradient-to-"][class*="-50"] { background-image: none !important; background-color: var(--hw-acc-zart) !important; } /* Status-Pillen kommen aus statusColor als Tailwind-Paare. Ohne diese Zeilen stünden Blau, Violett und Indigo neben dem Petrol-Akzent — die drei fehlten in der Umlenkung oben, weil sie in den Vorlagen nur über die Hilfsfunktion auftauchen und beim Auszählen nicht sichtbar waren. */ .hw-body .bg-blue-100 { background-color: var(--hw-info-f); } .hw-body .text-blue-700, .hw-body .text-blue-800 { color: var(--hw-info); } .hw-body .bg-purple-100, .hw-body .bg-indigo-100 { background-color: var(--hw-lila-f); } .hw-body .text-purple-700, .hw-body .text-purple-800, .hw-body .text-indigo-700, .hw-body .text-indigo-800 { color: var(--hw-lila); } .hw-body .text-yellow-800, .hw-body .text-amber-800 { color: var(--hw-warn); } .hw-body .text-green-800 { color: var(--hw-gut); } .hw-body .text-gray-800 { color: var(--hw-ink2); } /* Reiterzeile im Auftrag — dieselbe Form wie auf „Meine Aufträge". */ .hw-reiterzeile { display: flex; gap: 3px; flex-wrap: wrap; border-bottom: 1px solid var(--hw-line); margin-bottom: 20px; } .hw-reiterzeile button { display: inline-flex; align-items: center; gap: 7px; padding: 11px 13px; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--hw-ink3); border-bottom: 2px solid transparent; margin-bottom: -1px; } .hw-reiterzeile button:hover { color: var(--hw-ink); } .hw-reiterzeile button.ist-aktiv { color: var(--hw-ink); font-weight: 700; border-bottom-color: var(--hw-acc); } .hw-reiterzeile .hw-reiterzahl { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--hw-surf3); color: var(--hw-ink3); font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .hw-reiterzeile button.ist-aktiv .hw-reiterzahl { background: var(--hw-acc-zart); color: var(--hw-acc); } .hw-reiterzeile .hw-reiterzahl--warn { background: var(--hw-krit); color: #fff; } /* ============================================================ Auftragsdetail — Fassung „Arbeit und Fakten" Links alles, woran gearbeitet wird; rechts eine feste Leiste mit den Zahlen und allen Aktionen. Dieselbe Idee wie die Arbeitsleiste auf „Heute": das rechte Drittel gehört dem, woran man gerade arbeitet. ============================================================ */ .hw-auftrag { flex-grow: 1; display: flex; min-height: 0; align-items: flex-start; } .hw-arbeit { flex-grow: 1; min-width: 0; padding: 24px 26px 44px; } .hw-auftragsleiste { width: 320px; flex: none; background: var(--hw-surf2); border-left: 1px solid var(--hw-line); padding: 22px 18px 32px; /* Haftend, damit Zahlen und Knöpfe auch am Ende einer langen Seite noch dastehen — sonst wäre der Vorteil der Leiste dahin. */ position: sticky; top: 0; align-self: stretch; max-height: 100vh; overflow-y: auto; } /* Die früheren Reiter sind jetzt Abschnitte untereinander. */ .hw-abschnitt { padding: 22px 0; border-top: 1px solid var(--hw-line); } .hw-fakt { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-top: 1px solid var(--hw-zart); } .hw-fakt:first-child { border-top: 0; } .hw-fakt-name { font-size: 12.5px; color: var(--hw-ink3); flex-grow: 1; } .hw-fakt-wert { font-size: 13.5px; font-weight: 700; color: var(--hw-ink); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .hw-fakt-wert--warn { color: var(--hw-warn); } .hw-fakt-wert--matt { color: var(--hw-ink3); font-weight: 500; } /* Aktionen stehen untereinander statt nebeneinander — dadurch passen alle hinein, ohne dass die Zeile überläuft. */ .hw-leisten-tat { display: block; width: 100%; margin-bottom: 7px; text-align: center; } @media (max-width: 1100px) { .hw-auftrag { flex-direction: column; } .hw-auftragsleiste { width: 100%; position: static; max-height: none; border-left: 0; border-top: 1px solid var(--hw-line); } } /* ============================================================ Verfügbare Aufträge — die Karten des Marktplatzes Eine Karte je Auftrag, ruhig: oben die eine Marke, die etwas sagt, in der Mitte Titel und Text, unten die harten Zahlen und der Knopf. Kein Bildplatzhalter — bei Auftragsfotos ist dort ohnehin meist nichts. ============================================================ */ .hw-marktkarte { display: block; text-decoration: none; color: inherit; background: var(--hw-surf); border: 1px solid var(--hw-line); border-radius: var(--hw-r); box-shadow: var(--hw-schatten); padding: 16px 18px; margin-bottom: 12px; } .hw-marktkarte:hover { border-color: var(--hw-line2); } .hw-marktkarte--dringend { border-color: color-mix(in srgb, var(--hw-krit) 40%, var(--hw-line)); } .hw-marktkopf { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; flex-wrap: wrap; } .hw-marktkopf .hw-meta { font-size: 12px; color: var(--hw-ink3); } .hw-marktkopf .hw-datum { margin-left: auto; font-size: 12px; color: var(--hw-ink3); font-variant-numeric: tabular-nums; } .hw-marktkarte h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.015em; color: var(--hw-ink); } .hw-markttext { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--hw-ink2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .hw-marktfuss { display: flex; align-items: center; gap: 18px; margin-top: 12px; flex-wrap: wrap; } .hw-marktfuss span { font-size: 12.5px; color: var(--hw-ink3); } .hw-marktfuss b { color: var(--hw-ink); font-weight: 700; font-variant-numeric: tabular-nums; } .hw-marktfuss .hw-tat { margin-left: auto; } /* Chipzeile für die Gewerke — die übrigen Filter stehen im Schubfach. */ .hw-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .hw-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: var(--hw-surf); border: 1px solid var(--hw-line); color: var(--hw-ink2); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; font-family: inherit; } .hw-chip:hover { border-color: var(--hw-ink3); color: var(--hw-ink); } .hw-chip.ist-aktiv { background: var(--hw-acc); border-color: var(--hw-acc); color: #fff; } .hw-sortierung { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--hw-surf3); } .hw-sortierung a { padding: 5px 11px; border-radius: 6px; font-size: 12.5px; font-weight: 500; color: var(--hw-ink3); text-decoration: none; } .hw-sortierung a.ist-aktiv { background: var(--hw-surf); color: var(--hw-ink); font-weight: 700; box-shadow: var(--hw-schatten); } .hw-blaettern { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 28px; } .hw-blaettern a, .hw-blaettern span { padding: 8px 13px; border-radius: 9px; font-size: 13px; font-weight: 600; text-decoration: none; border: 1px solid var(--hw-line2); background: var(--hw-surf); color: var(--hw-ink2); } .hw-blaettern span.ist-aktiv { background: var(--hw-acc); border-color: var(--hw-acc); color: #fff; } /* ============================================================ Das Kartenraster auf dem Marktplatz ------------------------------------------------------------ Ohne gewählten Auftrag nimmt es die volle Breite und zeigt drei bis vier Aufträge je Reihe. Mit gewähltem Auftrag wird links eine schmale Trefferliste daraus (hw-listenspalte) und rechts steht der Auftrag ganz. ============================================================ */ .hw-marktraster { display: grid; gap: 14px; align-items: stretch; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); } /* Im Raster sind die Karten gleich hoch und die Fußzeile sitzt unten — sonst tanzt der Knopf je nach Länge der Beschreibung auf und ab. */ .hw-marktraster .hw-marktkarte { margin-bottom: 0; height: 100%; display: flex; flex-direction: column; } .hw-marktraster .hw-marktfuss { margin-top: auto; padding-top: 12px; } /* Fotos des Kunden — drei nebeneinander. */ .hw-fotoraster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; } .hw-fotoraster button { display: block; border-radius: 8px; overflow: hidden; background: var(--hw-surf3); } .hw-fotoraster img { display: block; width: 100%; height: 88px; object-fit: cover; } /* Die Suchzeile in eigener Auszeichnung statt in Tailwind. */ .hw-suchzeile { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .hw-suchkasten { position: relative; min-width: 0; } .hw-suchzeile .hw-suchkasten { flex-grow: 1; } .hw-suchkasten input[type="text"] { width: 100%; padding: 9px 12px 9px 34px; font: inherit; font-size: 13.5px; color: var(--hw-ink); background: var(--hw-surf); border: 1px solid var(--hw-line2); border-radius: 9px; } .hw-suchkasten input[type="text"]:focus { outline: 2px solid var(--hw-acc); outline-offset: -1px; } .hw-suchkasten .hw-lupe { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--hw-ink3); pointer-events: none; } .hw-filterzahl { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--hw-acc); color: var(--hw-acc-ink); font-size: 10.5px; font-weight: 700; } /* Das Schubfach für die selten geänderten Filter. Auf „Verfügbare Aufträge“ stehen die Gewerke im breiten Zustand zusätzlich als Chipzeile — im schmalen Zustand ist das Schubfach der einzige Weg dorthin, deshalb liegen sie auch darin. */ .hw-schubfach-hg { position: fixed; inset: 0; background: rgba(16, 20, 24, .42); z-index: 40; } .hw-schubfach { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 380px; z-index: 50; display: flex; flex-direction: column; background: var(--hw-surf); box-shadow: var(--hw-hoch); } .hw-schubfach-kopf { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--hw-line); } .hw-schubfach-kopf h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--hw-ink); } .hw-schubfach-rumpf { flex-grow: 1; overflow-y: auto; padding: 18px 20px; } .hw-schubfach-fuss { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--hw-line); } .hw-fach { margin-bottom: 20px; } .hw-fach > label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; color: var(--hw-ink); } .hw-fach-hinweis { margin: 6px 0 0; font-size: 11.5px; color: var(--hw-ink3); } .hw-fach-hinweis.ist-krit { color: var(--hw-krit); } .hw-eingabe { width: 100%; padding: 8px 11px; font: inherit; font-size: 13.5px; color: var(--hw-ink); background: var(--hw-surf); border: 1px solid var(--hw-line2); border-radius: 9px; } .hw-eingabe:focus { outline: 2px solid var(--hw-acc); outline-offset: -1px; } /* ============================================================ Einklappbare Detailspalte ------------------------------------------------------------ Von Steven gefordert: „wenn dauerhaft alles in einer Reihe ist, dauert es ewig, bis man alle Aufträge durch hat.“ Also zwei Zustände derselben Seite. Ohne gewählten Auftrag nimmt das Raster die volle Breite und zeigt drei bis vier Aufträge je Reihe. Mit gewähltem Auftrag wird links eine schmale Trefferliste daraus und rechts steht der Auftrag ganz. Der Weg zurück ist ein Klick auf „Liste breit“. Der Zustand steht in der Adresse (?job=…), nicht im Skript — verlinkbar, und der Zurück-Knopf tut das Erwartete. ============================================================ */ .hw-zuklapp { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--hw-line2); background: var(--hw-surf); font-size: 12.5px; font-weight: 600; color: var(--hw-ink2); text-decoration: none; cursor: pointer; font-family: inherit; } .hw-zuklapp:hover { border-color: var(--hw-ink3); color: var(--hw-ink); } /* Der Kopf der Trefferliste braucht mehr Zeilen als der von „Meine Aufträge“ — Suche, Filter, Sortierung, Trefferzahl. */ .hw-listenkopf .hw-suchzeile { margin-bottom: 8px; } .hw-listenkopf .hw-knopf { padding: 7px 10px; font-size: 12.5px; } /* Zwei Spalten im Auftrag rechts — Beschreibung und Fotos links, Eckdaten und Lage rechts. Unter 1080 px untereinander. */ /* auto-fit statt zwei festen Spalten: hat ein Auftrag weder Fotos noch beantwortete Rückfragen, entfällt die linke Spalte und die Eckdaten rücken nach links, statt eine leere Hälfte stehen zu lassen. */ .hw-detailpaar { display: grid; gap: 30px; align-items: start; justify-content: start; grid-template-columns: repeat(auto-fit, minmax(340px, 560px)); } @media (max-width: 1080px) { .hw-detailpaar { grid-template-columns: minmax(0, 1fr); gap: 0; } } /* Auf schmalen Geräten liegt der Auftrag unter der Liste. */ @media (max-width: 860px) { .hw-spalten { flex-direction: column; } .hw-listenspalte { width: 100%; border-right: 0; border-bottom: 1px solid var(--hw-line); max-height: 46vh; } } /* ============================================================ Drei Stapel — Meine Angebote ------------------------------------------------------------ Wartet auf Antwort, Laufend und Archiv stehen nebeneinander statt in drei Klappbereichen untereinander. Was auf Antwort wartet, ist damit dauerhaft im Blick; vorher musste man es aufklappen, und was zugeklappt ist, wird übersehen. ============================================================ */ .hw-stapel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; } @media (max-width: 1180px) { .hw-stapel { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 780px) { .hw-stapel { grid-template-columns: minmax(0, 1fr); } } .hw-stapelkopf { display: flex; align-items: center; gap: 9px; padding: 0 0 9px; margin-bottom: 12px; border-bottom: 2px solid var(--hw-line2); background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; font-family: inherit; cursor: pointer; text-align: left; } .hw-stapelkopf h2 { margin: 0; font-size: 14px; font-weight: 700; color: var(--hw-ink); } .hw-stapelkopf--warn { border-bottom-color: var(--hw-warn); } .hw-stapelkopf--gut { border-bottom-color: var(--hw-gut); } .hw-stapelkopf.ist-gewaehlt { background: var(--hw-acc-zart); border-radius: 8px 8px 0 0; padding: 7px 9px; } .hw-stapelhinweis { margin: 0 0 12px; font-size: 12px; color: var(--hw-ink3); line-height: 1.5; } .hw-angebotkarte { display: block; text-decoration: none; color: inherit; background: var(--hw-surf); border: 1px solid var(--hw-line); border-radius: var(--hw-r); box-shadow: var(--hw-schatten); padding: 13px 14px; margin-bottom: 10px; } .hw-angebotkarte:hover { border-color: var(--hw-line2); } .hw-angebotkarte h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--hw-ink); line-height: 1.35; } .hw-angebotkarte .hw-kopfzeile { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; flex-wrap: wrap; } .hw-angebotkarte .hw-wann { margin-left: auto; font-size: 11.5px; color: var(--hw-ink3); font-variant-numeric: tabular-nums; } .hw-angebotkarte .hw-wer { margin: 4px 0 10px; font-size: 12px; color: var(--hw-ink3); /* Die Ortsangabe ist bei manchen Aufträgen die volle Adresszeile des Geocoders — auf einer Karte in Spaltenbreite muss sie abschneiden. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hw-angebotkarte .hw-fuss { display: flex; align-items: center; gap: 8px; } .hw-angebotkarte .hw-grund { margin: 9px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--hw-surf2); border-left: 2px solid var(--hw-krit); font-size: 11.5px; line-height: 1.5; color: var(--hw-ink3); } /* ============================================================ Kalender — Aufbau „Monat groß“ ------------------------------------------------------------ Das Monatsraster nimmt die Seite, rechts die Arbeitsleiste mit heute, den nächsten Terminen und dem Weg zum eigenen Termin. Die Termine stehen mit Uhrzeit im Tagesfeld, nicht nur als Punkt — man sieht sonst nicht, ob 7 Uhr oder 16 Uhr. ============================================================ */ .hw-monat { border: 1px solid var(--hw-line); border-radius: var(--hw-r); overflow: hidden; background: var(--hw-surf); } .hw-monatkopf { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--hw-line); } .hw-monatkopf span { padding: 10px 8px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hw-ink3); } .hw-monatraster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } .hw-tag { min-height: 104px; padding: 7px 7px 5px; min-width: 0; overflow: hidden; border-right: 1px solid var(--hw-zart); border-bottom: 1px solid var(--hw-zart); } .hw-tag:nth-child(7n) { border-right: 0; } .hw-tag--leer { background: var(--hw-surf2); } .hw-tagzahl { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; font-size: 11.5px; color: var(--hw-ink2); font-variant-numeric: tabular-nums; } .hw-tag--heute .hw-tagzahl { background: var(--hw-acc); color: var(--hw-acc-ink); font-weight: 700; } .hw-termin { display: block; text-decoration: none; padding: 3px 6px; margin-bottom: 3px; border-radius: 5px; font-size: 10.5px; line-height: 1.35; color: var(--hw-ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hw-termin b { font-variant-numeric: tabular-nums; } .hw-termin--warn { background: var(--hw-warn-f); } .hw-termin--warn b { color: var(--hw-warn); } .hw-termin--gut { background: var(--hw-gut-f); } .hw-termin--gut b { color: var(--hw-gut); } .hw-termin--info { background: var(--hw-info-f); } .hw-termin--info b { color: var(--hw-info); } .hw-termin--lila { background: var(--hw-lila-f); } .hw-termin--lila b { color: var(--hw-lila); } .hw-termin--krit { background: var(--hw-krit-f); } .hw-termin--krit b { color: var(--hw-krit); } /* Ein Termin in der Leiste rechts oder in einer Liste. */ .hw-terminzeile { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-top: 1px solid var(--hw-line); text-decoration: none; color: inherit; } .hw-terminzeile:first-of-type { border-top: 0; } .hw-terminzeile .hw-uhr { width: 46px; flex: none; font-size: 12.5px; font-weight: 700; color: var(--hw-ink); font-variant-numeric: tabular-nums; } /* Fenster für den eigenen Termin. */ .hw-fenster-hg { position: fixed; inset: 0; z-index: 50; background: rgba(16, 20, 24, .5); display: flex; align-items: center; justify-content: center; padding: 24px; } .hw-fenster { width: 100%; max-width: 440px; background: var(--hw-surf); border-radius: var(--hw-r); box-shadow: var(--hw-hoch); padding: 20px 22px 22px; } .hw-fenster-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .hw-fenster-kopf h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--hw-ink); } /* ============================================================ Mitarbeiter — Aufbau „Kacheln“ ------------------------------------------------------------ Eine Karte je Mitarbeiter: Avatar, Position, Gewerke, die Auslastung als Balken und die drei Aktionen als Knöpfe statt in einem Menü hinter drei Punkten. Wer jemanden deaktivieren will, soll den Knopf sehen und nicht suchen. ============================================================ */ .hw-personen { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; } .hw-person { background: var(--hw-surf); border: 1px solid var(--hw-line); border-radius: var(--hw-r); box-shadow: var(--hw-schatten); padding: 16px 17px; } .hw-person.ist-still { opacity: .66; } .hw-person-kopf { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; } .hw-person-kopf h3 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.012em; color: var(--hw-ink); } .hw-person-kopf p { margin: 3px 0 0; font-size: 12.5px; color: var(--hw-ink3); } .hw-person-marken { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 13px; } .hw-person-taten { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; } .hw-person-taten .hw-knopf { padding: 6px 11px; font-size: 12.5px; } .hw-person-taten .hw-knopf--warn { background: none; border-color: var(--hw-line2); color: var(--hw-krit); } .hw-person-taten .hw-knopf--warn:hover { border-color: var(--hw-krit); color: var(--hw-krit); filter: none; } /* Unternavigation einer Seite (Mitarbeiter | Schichtplan, Verleih …). */ .hw-unternav { display: flex; gap: 3px; border-bottom: 1px solid var(--hw-line); margin-bottom: 20px; } .hw-unternav a { padding: 10px 14px; border-bottom: 2px solid transparent; font-size: 13px; font-weight: 500; color: var(--hw-ink3); text-decoration: none; } .hw-unternav a:hover { color: var(--hw-ink2); } .hw-unternav a.ist-aktiv { border-bottom-color: var(--hw-acc); color: var(--hw-ink); font-weight: 700; } /* ============================================================ Nachrichten — zwei Spalten, dritte einklappbar ------------------------------------------------------------ Von Steven so gewünscht: „eine Mischung aus zwei Spalten und drei Spalten, so dass man die dritte einklappen kann.“ Zugeklappt ist es genau das Zwei-Spalten-Bild. Aufgeklappt steht rechts der Auftrag: Wert, Stand, Termin, Mitarbeiter und die Wege zurück in den Auftrag. Der Zustand liegt in localStorage — also pro Gerät, wie die Navigation auch. Der Inhalt wird erst geholt, wenn die Spalte offen ist. ============================================================ */ .hw-post { flex-grow: 1; display: flex; min-height: 0; align-items: stretch; } .hw-postliste { width: 348px; flex: none; background: var(--hw-surf); border-right: 1px solid var(--hw-line); display: flex; flex-direction: column; min-height: 0; } .hw-postrumpf { flex-grow: 1; overflow-y: auto; } .hw-postmitte { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; } .hw-postkontext { width: 304px; flex: none; background: var(--hw-surf2); border-left: 1px solid var(--hw-line); padding: 18px 18px 24px; overflow-y: auto; } .hw-postkontext.ist-zu { display: none; } /* Der Griff sitzt im Kopf über dem Verlauf, damit er in beiden Zuständen an derselben Stelle liegt. */ .hw-kontextgriff { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--hw-line2); background: var(--hw-surf); font-size: 12.5px; font-weight: 600; color: var(--hw-ink2); cursor: pointer; font-family: inherit; flex: none; } .hw-kontextgriff:hover { border-color: var(--hw-ink3); color: var(--hw-ink); } .hw-gespraech { display: flex; gap: 11px; padding: 12px 13px; border-bottom: 1px solid var(--hw-zart); border-left: 3px solid transparent; cursor: pointer; text-decoration: none; color: inherit; } .hw-gespraech:hover { background: var(--hw-surf2); } .hw-gespraech.ist-gewaehlt { background: var(--hw-acc-zart); border-left-color: var(--hw-acc); } .hw-gespraech .hw-oben { display: flex; align-items: baseline; gap: 8px; } .hw-gespraech .hw-name { font-size: 13.5px; font-weight: 600; color: var(--hw-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hw-gespraech.ist-neu .hw-name { font-weight: 700; } .hw-gespraech .hw-zeit { margin-left: auto; flex: none; font-size: 11px; color: var(--hw-ink3); font-variant-numeric: tabular-nums; } .hw-gespraech.ist-neu .hw-zeit { color: var(--hw-acc); font-weight: 600; } .hw-gespraech .hw-letzte { margin: 4px 0 0; font-size: 12.5px; color: var(--hw-ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hw-gespraech.ist-neu .hw-letzte { color: var(--hw-ink2); font-weight: 600; } .hw-gespraech .hw-wozu { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 11.5px; color: var(--hw-ink3); overflow: hidden; } @media (max-width: 1180px) { .hw-postkontext { display: none; } } @media (max-width: 860px) { .hw-post { flex-direction: column; } .hw-postliste { width: 100%; border-right: 0; border-bottom: 1px solid var(--hw-line); max-height: 42vh; } } /* ============================================================ Verleih — Aufbau „Bildraster“ ------------------------------------------------------------ Beim Verleih entscheidet das Foto mit: vier Kacheln je Reihe mit großem Bild, Verfügbarkeit als Marke, Preis groß und das Merken-Herz oben rechts. Die Unterseiten stehen als Reiter darüber statt hinter einem Ausklapper. ============================================================ */ .hw-geraete { display: grid; grid-template-columns: repeat(auto-fill, minmax(256px, 1fr)); gap: 16px; align-items: start; } .hw-geraet { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--hw-surf); border: 1px solid var(--hw-line); border-radius: var(--hw-r); box-shadow: var(--hw-schatten); overflow: hidden; } .hw-geraet:hover { border-color: var(--hw-line2); } .hw-geraet-bild { position: relative; aspect-ratio: 4 / 3; background: var(--hw-surf3); display: flex; align-items: center; justify-content: center; } /* Ohne Foto steht dort der Kategoriename. Vorher lief er in 30 px über zwei Zeilen und sah aus wie ein Fehler — klein und grau ist er ein ruhiger Platzhalter. */ .hw-geraet-bild > span:not(.hw-marke):not(.hw-bildmarke) { padding: 0 14px; text-align: center; font-size: 13px; color: var(--hw-ink3); line-height: 1.4; } .hw-geraet-bild img { width: 100%; height: 100%; object-fit: cover; display: block; } .hw-geraet-koerper { padding: 13px 14px; display: flex; flex-direction: column; flex-grow: 1; } .hw-geraet-koerper h3 { margin: 3px 0 0; font-size: 14.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.012em; color: var(--hw-ink); } .hw-geraet-kat { font-size: 11px; color: var(--hw-ink3); } .hw-geraet-wo { margin: 6px 0 0; font-size: 12px; color: var(--hw-ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hw-geraet-fuss { margin-top: auto; padding-top: 12px; display: flex; align-items: flex-end; gap: 8px; } .hw-geraet-preis { font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--hw-ink); font-variant-numeric: tabular-nums; } .hw-geraet-preis small { font-size: 11.5px; font-weight: 400; color: var(--hw-ink3); } .hw-geraet-wem { margin-left: auto; font-size: 11.5px; color: var(--hw-ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46%; } .hw-herz { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 999px; background: var(--hw-surf); border: 1px solid var(--hw-line2); display: inline-flex; align-items: center; justify-content: center; color: var(--hw-ink3); cursor: pointer; font-family: inherit; } .hw-herz.ist-gemerkt { color: var(--hw-krit); border-color: var(--hw-krit); } .hw-bildmarke { position: absolute; top: 8px; left: 8px; } /* ============================================================ Einstellungen — alles auf einer Seite ------------------------------------------------------------ Von Steven so gewählt, mit einer Änderung: EIN Speichern-Knopf rechts, der alles auf einmal sichert. Das Klicken zwischen Bereichen entfällt, das Speichern je Abschnitt auch. Was Passwort, E-Mail, Datenauskunft und Kontolöschung angeht, bleiben eigene Formulare — die brauchen jeweils das aktuelle Passwort und dürfen nicht am Sammelknopf hängen. ============================================================ */ .hw-schalter { display: flex; align-items: flex-start; gap: 14px; padding: 13px 0; border-top: 1px solid var(--hw-zart); cursor: pointer; } .hw-schalter:first-of-type { border-top: 0; } .hw-schalter-text { min-width: 0; flex-grow: 1; } .hw-schalter-text b { display: block; font-size: 13.5px; font-weight: 500; color: var(--hw-ink); } .hw-schalter-text span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.45; color: var(--hw-ink3); } /* Der Schalter selbst: ein echtes Kontrollkästchen, nur anders gezeichnet. Ohne echtes input ginge weder Tastatur noch Formularversand. */ .hw-schalter input { position: absolute; opacity: 0; width: 0; height: 0; } .hw-kippe { width: 38px; height: 22px; border-radius: 999px; flex: none; background: var(--hw-line2); position: relative; display: inline-block; transition: background .12s; } .hw-kippe::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: left .12s; } .hw-schalter input:checked + .hw-kippe { background: var(--hw-acc); } .hw-schalter input:checked + .hw-kippe::after { left: 19px; } .hw-schalter input:focus-visible + .hw-kippe { outline: 2px solid var(--hw-acc); outline-offset: 2px; } /* Hell / Dunkel / Automatisch als drei Felder. */ .hw-themawahl { display: flex; gap: 8px; flex-wrap: wrap; } .hw-themawahl label { cursor: pointer; } .hw-themawahl input { position: absolute; opacity: 0; width: 0; height: 0; } .hw-themafeld { display: inline-flex; align-items: center; justify-content: center; padding: 9px 18px; border-radius: 9px; border: 1px solid var(--hw-line2); background: var(--hw-surf); font-size: 13px; font-weight: 500; color: var(--hw-ink2); } .hw-themawahl input:checked + .hw-themafeld { border-color: var(--hw-acc); background: var(--hw-acc-zart); color: var(--hw-acc); font-weight: 700; } .hw-themawahl input:focus-visible + .hw-themafeld { outline: 2px solid var(--hw-acc); outline-offset: 2px; } /* Ein Kasten für alles, was gefährlich ist oder ein Passwort verlangt. */ .hw-ernst { padding: 14px 16px; border-radius: var(--hw-r); background: var(--hw-surf2); border: 1px solid var(--hw-line); } .hw-ernst--krit { background: var(--hw-krit-f); border-color: color-mix(in srgb, var(--hw-krit) 35%, transparent); } .hw-ernst h3 { margin: 0 0 4px; font-size: 13.5px; font-weight: 700; color: var(--hw-ink); } .hw-ernst--krit h3 { color: var(--hw-krit); } .hw-ernst p { margin: 0 0 12px; font-size: 12.5px; line-height: 1.55; color: var(--hw-ink3); } /* Der eine Speichern-Knopf steht oben in der Leiste rechts; die Leiste selbst klebt bereits, ein zweiter Kleber darin wäre nur im Weg. */ .hw-sichern-hinweis { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--hw-ink3); } /* ============================================================ Verleih — Aufbau „Filterleiste und Liste“ ------------------------------------------------------------ Von Steven so gewählt: „ich möchte nicht mehr, dass alle einfach dort stehen, sondern eine bessere Sortierung, ein Design mit Sidepanel, wo alle Sortierungen drin sind.“ Links eine feste Leiste mit allem, wonach man aussucht — Sortierung, Kategorien mit Trefferzahl, Umkreis, Höchstpreis, Verfügbarkeit, Nachweispflicht. Rechts die Treffer als Zeilen. ============================================================ */ .hw-filterleiste { width: 268px; flex: none; background: var(--hw-surf); border-right: 1px solid var(--hw-line); padding: 18px 16px 26px; overflow-y: auto; display: flex; flex-direction: column; } .hw-filterkopf { display: flex; align-items: baseline; gap: 9px; margin-bottom: 14px; } .hw-filterkopf h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--hw-ink); } .hw-filterkopf a { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--hw-acc); text-decoration: none; } .hw-filterblock { margin-bottom: 22px; } .hw-filterblock:last-child { margin-bottom: 0; } /* Ein Eintrag der Kategorie- oder Sortierliste. */ .hw-wahlzeile { display: flex; align-items: center; gap: 9px; padding: 7px 9px; margin-bottom: 2px; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--hw-ink2); text-decoration: none; } .hw-wahlzeile:hover { background: var(--hw-surf2); } .hw-wahlzeile.ist-aktiv { background: var(--hw-acc-zart); color: var(--hw-acc); font-weight: 700; } .hw-wahlzeile.ist-leer { opacity: .5; } .hw-wahlzeile .hw-anzahl { margin-left: auto; font-size: 11.5px; color: var(--hw-ink3); font-variant-numeric: tabular-nums; } .hw-wahlzeile.ist-aktiv .hw-anzahl { color: var(--hw-acc); } /* Der Punkt vor einer Sortierung — ein echtes Radio wäre ein Formular, die Sortierung ist aber ein Link mit vollständiger Adresse. */ .hw-punktmarke { width: 13px; height: 13px; border-radius: 999px; flex: none; border: 1.5px solid var(--hw-line2); background: var(--hw-surf); } .hw-wahlzeile.ist-aktiv .hw-punktmarke { border-color: var(--hw-acc); background: var(--hw-acc); box-shadow: inset 0 0 0 2px var(--hw-surf); } /* Gesetzte Filter über den Treffern, jeder einzeln abwerfbar. */ .hw-chipzeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .hw-abwerfen { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 999px; background: var(--hw-acc-zart); border: 1px solid color-mix(in srgb, var(--hw-acc) 40%, transparent); font-size: 12px; font-weight: 600; color: var(--hw-acc); text-decoration: none; } .hw-abwerfen:hover { border-color: var(--hw-acc); } .hw-abwerfen i { font-style: normal; opacity: .6; } /* Eine Trefferzeile. */ .hw-leihzeile { display: flex; align-items: center; gap: 14px; padding: 13px 2px; border-top: 1px solid var(--hw-zart); text-decoration: none; color: inherit; } .hw-leihzeile:first-of-type { border-top: 0; } .hw-leihzeile:hover { background: var(--hw-surf2); } .hw-leihbild { width: 60px; height: 46px; flex: none; border-radius: 8px; overflow: hidden; background: var(--hw-surf3); display: flex; align-items: center; justify-content: center; font-size: 9.5px; color: var(--hw-ink3); } .hw-leihbild img { width: 100%; height: 100%; object-fit: cover; display: block; } .hw-leihmitte { min-width: 0; flex-grow: 1; } .hw-leihmitte .hw-oben { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; } .hw-leihmitte b { font-size: 14px; font-weight: 600; color: var(--hw-ink); } .hw-leihmitte p { margin: 0; font-size: 12px; color: var(--hw-ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 1000px) { .hw-filterleiste { display: none; } } /* ============================================================ Schichtplan — Aufbau „Stundenzettel“ ------------------------------------------------------------ Von Steven so gewählt: „ein Schichtplan, wo man guckt, wann, wo und wie viel ein Mitarbeiter was macht.“ Also je Zeile Uhrzeit, Ort und Stunden — und je Mitarbeiter eine Summe. ============================================================ */ .hw-stundenzettel { background: var(--hw-surf); border: 1px solid var(--hw-line); border-radius: var(--hw-r); box-shadow: var(--hw-schatten); padding: 15px 17px 12px; margin-bottom: 14px; } .hw-zettelkopf { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; } .hw-zettelkopf h2 { margin: 0; font-size: 14.5px; font-weight: 700; letter-spacing: -.012em; color: var(--hw-ink); } .hw-zettelkopf p { margin: 3px 0 0; font-size: 12px; color: var(--hw-ink3); } .hw-zettelsumme { font-size: 18px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } /* Die Ampel der Auslastung kommt aus dem Handler (UtilColor). */ .hw-util-gray { color: var(--hw-ink3); } .hw-util-green { color: var(--hw-gut); } .hw-util-amber { color: var(--hw-warn); } .hw-util-red { color: var(--hw-krit); } .hw-zettelkopfzeile, .hw-zettelzeile, .hw-zettelsummenzeile { display: grid; grid-template-columns: 92px 116px minmax(0, 1fr) minmax(0, 240px) 74px; gap: 12px; align-items: center; } .hw-zettelkopfzeile { padding: 0 10px 8px; border-bottom: 1px solid var(--hw-line); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--hw-ink3); } .hw-zettelzeile { padding: 10px; border-top: 1px solid var(--hw-zart); cursor: pointer; border-radius: 8px; } .hw-zettelzeile:first-of-type { border-top: 0; } .hw-zettelzeile:hover { background: var(--hw-surf2); } .hw-zetteltag { font-size: 12.5px; font-weight: 600; color: var(--hw-ink2); } .hw-zetteltag.ist-heute { color: var(--hw-acc); } .hw-zettelzeit { font-size: 12.5px; color: var(--hw-ink2); font-variant-numeric: tabular-nums; } .hw-zettelwas { min-width: 0; } .hw-zettelwas b { display: block; font-size: 13px; font-weight: 600; color: var(--hw-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hw-zettelwas span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--hw-ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hw-zettelwo { font-size: 12px; color: var(--hw-ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hw-zettelstunden { font-size: 13px; font-weight: 700; text-align: right; color: var(--hw-ink); font-variant-numeric: tabular-nums; } .hw-zettelsummenzeile { padding: 11px 10px; border-top: 2px solid var(--hw-line2); font-size: 12.5px; font-weight: 700; color: var(--hw-ink); } @media (max-width: 900px) { .hw-zettelkopfzeile { display: none; } .hw-zettelzeile, .hw-zettelsummenzeile { grid-template-columns: 78px minmax(0, 1fr) 64px; } .hw-zettelzeile .hw-zettelwo { display: none; } .hw-zettelzeile .hw-zettelzeit { grid-column: 2; } } /* ============================================================ Profil — Aufbau „Schaufenster“ ------------------------------------------------------------ Von Steven so gewählt: das Profil muss auf einen Kunden wirken. Also ein farbiges Kopfband mit dem, was zählt — Name, Siegel, Bewertung, abgeschlossene Aufträge — und zwei große Knöpfe. Alles Inhaber-Interne steht rechts in der Leiste und wird für fremde Besucher gar nicht gerendert. ============================================================ */ .hw-schaufenster { border-radius: 14px; overflow: hidden; margin-bottom: 20px; background: linear-gradient(135deg, var(--hw-acc), color-mix(in srgb, var(--hw-acc) 78%, #000)); color: #fff; padding: 26px 28px; } .hw-schaufensterkopf { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; } .hw-schaufensterkopf h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.03em; color: #fff; } .hw-schaufensterlogo { width: 76px; height: 76px; flex: none; border-radius: 18px; overflow: hidden; background: rgba(255, 255, 255, .18); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 27px; font-weight: 700; } .hw-schaufensterlogo img { width: 100%; height: 100%; object-fit: cover; display: block; } .hw-schaufenstermarken { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .hw-glasmarke { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .2); color: #fff; font-size: 11.5px; font-weight: 600; } .hw-schaufenstersatz { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .88); max-width: 62ch; } .hw-schaufenstertaten { display: flex; flex-direction: column; gap: 8px; flex: none; } .hw-glasknopf { display: inline-flex; align-items: center; justify-content: center; padding: 11px 20px; border-radius: 10px; white-space: nowrap; border: 1px solid rgba(255, 255, 255, .5); color: #fff; font-size: 13.5px; font-weight: 600; text-decoration: none; } .hw-glasknopf:hover { background: rgba(255, 255, 255, .12); color: #fff; } .hw-glasknopf--voll { background: #fff; color: var(--hw-acc); border-color: #fff; font-weight: 700; } .hw-glasknopf--voll:hover { background: rgba(255, 255, 255, .9); color: var(--hw-acc); } .hw-leistungen { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; } .hw-leistung { display: inline-flex; align-items: center; padding: 11px 16px; border-radius: 11px; background: var(--hw-surf); border: 1px solid var(--hw-line); box-shadow: var(--hw-schatten); font-size: 13.5px; font-weight: 600; color: var(--hw-ink); } @media (max-width: 700px) { .hw-schaufenster { padding: 20px 18px; } .hw-schaufensterkopf h1 { font-size: 23px; } .hw-schaufenstertaten { flex-direction: row; width: 100%; } .hw-glasknopf { flex: 1; } } /* ============================================================ Meine Aufträge, Kundensicht — „Einer nach dem anderen“ ------------------------------------------------------------ Von Steven so gewählt und begründet: „welcher Kunde hat sehr viele Aufträge gleichzeitig? Die meisten haben einen, wenn's hoch kommt drei.“ Also je Auftrag eine volle Tafel statt einer Kachel — mit dem Weg über sechs Stationen und dem nächsten Schritt als eigenem Kasten. ============================================================ */ .hw-auftragstafel { display: block; background: var(--hw-surf); border: 1px solid var(--hw-line); border-radius: var(--hw-r); box-shadow: var(--hw-schatten); padding: 20px 22px; margin-bottom: 16px; } /* Kein flex-wrap: der Preis gehört nach rechts oben und nicht unter die Adresszeile — bei langen Adressen ist er sonst dorthin gerutscht. */ .hw-tafelkopf { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; } @media (max-width: 640px) { .hw-tafelkopf { flex-wrap: wrap; } } .hw-tafelkopf h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.022em; color: var(--hw-ink); } .hw-tafelunter { margin: 5px 0 0; font-size: 12.5px; color: var(--hw-ink3); } .hw-tafelpreis { font-size: 20px; font-weight: 700; letter-spacing: -.025em; color: var(--hw-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .hw-tafelpreisunter { display: block; font-size: 11.5px; color: var(--hw-ink3); } /* Der Weg über sechs Stationen. */ .hw-weg { display: flex; align-items: flex-start; margin-bottom: 18px; } .hw-wegstation { flex: 1; min-width: 0; position: relative; text-align: center; } .hw-wegstation + .hw-wegstation::before { content: ""; position: absolute; top: 10px; left: -50%; width: 100%; height: 2px; background: var(--hw-zart); } .hw-wegstation.ist-fertig::before, .hw-wegstation.ist-jetzt::before { background: var(--hw-acc); } .hw-wegpunkt { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; font-style: normal; background: var(--hw-zart); color: #fff; font-size: 11px; font-weight: 700; } .hw-wegstation.ist-fertig .hw-wegpunkt { background: var(--hw-acc); } .hw-wegstation.ist-jetzt .hw-wegpunkt { background: var(--hw-surf); border: 2px solid var(--hw-acc); } .hw-wegstation b { display: block; margin-top: 6px; font-size: 11px; line-height: 1.3; font-weight: 400; color: var(--hw-ink3); } .hw-wegstation.ist-fertig b { color: var(--hw-ink2); } .hw-wegstation.ist-jetzt b { color: var(--hw-ink); font-weight: 700; } /* Der nächste Schritt — die wichtigste Zeile der Seite. */ .hw-schritt { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border-radius: 11px; background: var(--hw-surf2); border: 1px solid var(--hw-line); } .hw-schritt.ist-dran { background: var(--hw-acc-zart); border-color: color-mix(in srgb, var(--hw-acc) 40%, transparent); } .hw-schritt-titel { margin: 0; font-size: 13px; font-weight: 700; color: var(--hw-ink2); } .hw-schritt.ist-dran .hw-schritt-titel { color: var(--hw-acc); } .hw-schritt-hin { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--hw-ink3); } .hw-tafelfrage { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--hw-warn-f); border: 1px solid color-mix(in srgb, var(--hw-warn) 40%, transparent); } .hw-tafeltext { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: var(--hw-ink2); max-width: 68ch; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .hw-tafelfuss { display: flex; align-items: center; gap: 16px; margin-top: 18px; flex-wrap: wrap; } .hw-tafelfakt { font-size: 12.5px; color: var(--hw-ink3); } .hw-tafelfakt b { color: var(--hw-ink); font-weight: 700; font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .hw-wegstation b { font-size: 9.5px; } } /* ============================================================ Sprungmarken — Abstand nach oben ------------------------------------------------------------ Ein Sprung über #kennung setzt den Anfang des Ziels genau an den oberen Rand des Fensters. In der Kopfzeilen-Form liegt dort aber die haftende Navigation — die Überschrift des Abschnitts verschwand darunter, man landete mitten im ersten Schalter. scroll-margin-top hält den Platz frei. Der Wert ist die Höhe dessen, was oben klebt, plus etwas Luft: Seitenleisten-Form: nichts klebt oben → nur Luft Kopfzeilen-Form: 58 px Navigation → 58 + Luft ============================================================ */ .hw-bereich[id], .hw-abschnitt[id], .hw-stundenzettel[id], .hw-auftragstafel[id] { scroll-margin-top: 22px; } html.hw-oben .hw-bereich[id], html.hw-oben .hw-abschnitt[id], html.hw-oben .hw-stundenzettel[id], html.hw-oben .hw-auftragstafel[id] { scroll-margin-top: 80px; } /* Weicher Sprung — außer wenn das Gerät weniger Bewegung wünscht. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* ============================================================ Arbeitsflächen — die Abschnitte der Auftragsseite ------------------------------------------------------------ Die Auftragsseite hatte den Rahmen schon in der ruhigen Fassung, ihre acht Abschnitte kamen aber noch aus den alten Partials: weiße Kästen in weißen Kästen, jeder mit eigenem Rand und eigenem Schatten. Bei acht Abschnitten wird daraus ein Stapel Rahmen, in dem der Inhalt untergeht. Hier steht das Gegenstück: Trennlinien statt Kästen, ein Kasten nur dort, wo etwas eingegeben wird. Alle Farben über die Marken, damit Hell und Dunkel gleich gut aussehen. ============================================================ */ .hw-uebertitel { margin: 0 0 9px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hw-ink3); } /* Faktenraster — Kontakt, Eckdaten, alles was Name und Wert ist */ .hw-faktraster { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 9px; } .hw-faktkasten { padding: 10px 12px; border-radius: 10px; background: var(--hw-surf2); border: 1px solid var(--hw-zart); } .hw-faktkasten--breit { grid-column: 1 / -1; } .hw-faktkasten dt { margin: 0 0 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--hw-ink3); } .hw-faktkasten dd { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--hw-ink); overflow-wrap: anywhere; } .hw-faktkasten dd.hw-umbruch { white-space: pre-wrap; } .hw-faktkasten dd a { color: var(--hw-acc); text-decoration: none; } .hw-faktkasten dd a:hover { text-decoration: underline; } /* Formkasten — das Einzige, was in diesen Abschnitten noch gerahmt ist */ .hw-formkasten { background: var(--hw-surf2); border: 1px solid var(--hw-line); border-radius: var(--hw-r); padding: 14px 15px; } .hw-formkasten-titel { display: block; margin: 0 0 9px; font-size: 13px; font-weight: 600; color: var(--hw-ink); } .hw-formzeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .hw-formzeile > .hw-eingabe { flex: 1; min-width: 140px; width: auto; } .hw-formfuss { display: flex; align-items: center; gap: 10px; margin-top: 11px; flex-wrap: wrap; } .hw-formfuss--rechts { justify-content: flex-end; } .hw-formhinweis { margin: 0; font-size: 12px; color: var(--hw-ink3); } textarea.hw-eingabe { resize: vertical; min-height: 62px; line-height: 1.55; } .hw-eingabe:focus-visible { outline: 2px solid var(--hw-acc); outline-offset: 1px; border-color: var(--hw-acc); } .hw-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 9px; } .hw-feldchen > label { display: block; margin-bottom: 4px; font-size: 11.5px; font-weight: 600; color: var(--hw-ink3); } /* Fortschrittsbalken */ .hw-balkenzeile { display: flex; align-items: baseline; gap: 10px; margin-bottom: 7px; } .hw-balkenzeile b { margin-left: auto; font-size: 13.5px; font-weight: 700; color: var(--hw-ink); font-variant-numeric: tabular-nums; } .hw-balken { height: 6px; border-radius: 999px; background: var(--hw-zart); overflow: hidden; } .hw-balken i { display: block; height: 100%; border-radius: 999px; background: var(--hw-acc); } /* Gesprächsfaden — Rückfragen und Antworten */ .hw-frage { padding: 14px 0; border-top: 1px solid var(--hw-zart); } .hw-frage:first-child { border-top: 0; padding-top: 0; } .hw-wer-zeile { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; } .hw-wer { font-size: 13.5px; font-weight: 700; color: var(--hw-ink); } .hw-wer--ich { color: var(--hw-acc); } .hw-wann { font-size: 11.5px; color: var(--hw-ink3); font-variant-numeric: tabular-nums; } .hw-satz { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--hw-ink2); white-space: pre-wrap; overflow-wrap: anywhere; } .hw-antwort { margin-top: 11px; padding-left: 12px; border-left: 2px solid var(--hw-gut); } .hw-antwort .hw-uebertitel { color: var(--hw-gut); margin-bottom: 4px; } .hw-wartet { margin: 10px 0 0; font-size: 12.5px; color: var(--hw-warn); } /* Verlauf mit Punkten — Baufortschritt */ .hw-verlauf { display: flex; gap: 12px; } .hw-verlaufband { display: flex; flex-direction: column; align-items: center; flex: none; padding-top: 5px; } .hw-verlaufband i { width: 9px; height: 9px; border-radius: 999px; background: var(--hw-acc); flex: none; } .hw-verlaufband span { width: 1px; flex: 1; background: var(--hw-line); margin-top: 4px; } .hw-verlauf:last-child .hw-verlaufband span { background: transparent; } .hw-verlauftext { flex: 1; min-width: 0; padding-bottom: 16px; } /* Zeilenkarte — ein Eintrag mit Kopfzeile und Taten rechts */ .hw-satzkarte { padding: 13px 0; border-top: 1px solid var(--hw-zart); } .hw-satzkarte:first-child { border-top: 0; padding-top: 0; } .hw-satztaten { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; flex: none; } /* Stiller Knopf — Löschen, Schließen, Entfernen */ .hw-still { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; flex: none; border-radius: 7px; border: 0; background: transparent; color: var(--hw-ink3); cursor: pointer; padding: 0; font-family: inherit; } .hw-still:hover { background: var(--hw-krit-f); color: var(--hw-krit); } .hw-still--klein { width: 19px; height: 19px; border-radius: 999px; } /* Anhänge */ .hw-anhang { display: inline-flex; align-items: center; gap: 8px; margin-top: 9px; padding: 8px 11px; border-radius: 9px; background: var(--hw-surf2); border: 1px solid var(--hw-line); font-size: 12.5px; font-weight: 600; color: var(--hw-ink2); text-decoration: none; } .hw-anhang:hover { border-color: var(--hw-line2); } .hw-anhangbild { display: block; margin-top: 9px; padding: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--hw-line); background: var(--hw-surf2); cursor: zoom-in; } .hw-anhangbild img { display: block; max-width: 100%; width: auto; max-height: 250px; object-fit: contain; } .hw-vorschau { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px; border-radius: 10px; background: var(--hw-surf); border: 1px solid var(--hw-line); } .hw-vorschau img, .hw-vorschau .hw-dateiklotz { width: 42px; height: 42px; border-radius: 7px; object-fit: cover; flex: none; } .hw-dateiklotz { background: var(--hw-surf3); color: var(--hw-ink3); display: inline-flex; align-items: center; justify-content: center; } .hw-vorschau-text { min-width: 0; flex: 1; font-size: 12px; } .hw-vorschau-text b { display: block; font-weight: 600; color: var(--hw-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hw-vorschau-text span { color: var(--hw-ink3); } /* Leuchtkasten für Bilder */ .hw-leuchtkasten { position: fixed; inset: 0; z-index: 9999; background: rgba(8, 10, 12, .9); display: flex; align-items: center; justify-content: center; padding: 20px; } .hw-leuchtkasten img { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: 10px; } .hw-leuchtzu { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .92); color: #15181c; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } /* Einsatzblöcke */ .hw-einsatz { padding: 14px 0; border-top: 1px solid var(--hw-zart); } .hw-einsatz:first-child { border-top: 0; padding-top: 0; } .hw-einsatzkopf { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .hw-datumsklotz { flex: none; min-width: 50px; text-align: center; padding: 5px 7px; border-radius: 9px; background: var(--hw-surf2); border: 1px solid var(--hw-zart); } .hw-datumsklotz b { display: block; font-size: 17px; font-weight: 700; line-height: 1.15; color: var(--hw-ink); font-variant-numeric: tabular-nums; } .hw-datumsklotz span { display: block; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--hw-ink3); } .hw-einsatzzeit { flex: none; font-size: 14px; font-weight: 700; color: var(--hw-ink); font-variant-numeric: tabular-nums; } .hw-einsatzzeit span { display: block; font-size: 11.5px; font-weight: 500; color: var(--hw-ink3); } .hw-einsatzwas { min-width: 0; flex: 1; font-size: 12.5px; color: var(--hw-ink3); line-height: 1.5; } /* Personen als Chips */ .hw-personchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .hw-personchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 3px; border-radius: 999px; background: var(--hw-surf); border: 1px solid var(--hw-line); font-size: 12.5px; font-weight: 600; color: var(--hw-ink2); } .hw-personchip .hw-kuerzel { width: 21px; height: 21px; font-size: 9.5px; } .hw-personchip--offen { border-style: dashed; color: var(--hw-ink3); padding: 5px 12px; cursor: pointer; font-family: inherit; } .hw-personchip--offen:hover { color: var(--hw-acc); border-color: var(--hw-acc); } .hw-personchip--gewaehlt { background: var(--hw-acc-zart); border-color: transparent; color: var(--hw-acc); padding: 4px 8px 4px 11px; } /* Auswahlliste mit Häkchen */ .hw-wahlliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 1px; max-height: 152px; overflow-y: auto; padding: 6px; border-radius: 9px; border: 1px solid var(--hw-line); background: var(--hw-surf); } .hw-wahlliste label { display: flex; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 7px; font-size: 12.5px; color: var(--hw-ink2); cursor: pointer; } .hw-wahlliste label:hover { background: var(--hw-surf2); } /* Abhak-Zeilen — Checkliste */ .hw-hakzeile { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--hw-zart); } .hw-hakzeile:first-child { border-top: 0; } .hw-hakzeile .hw-haken { width: 19px; height: 19px; margin-top: 0; } .hw-haktext { flex: 1; min-width: 0; font-size: 13.5px; color: var(--hw-ink); line-height: 1.5; overflow-wrap: anywhere; } .hw-haktext--fertig { color: var(--hw-ink3); text-decoration: line-through; } .hw-haktext small { display: block; font-size: 11.5px; color: var(--hw-ink3); text-decoration: none; } .hw-menge { font-weight: 600; color: var(--hw-ink3); } /* Anhang-Menü hinter der Büroklammer */ .hw-klammermenue { position: absolute; bottom: 100%; left: 0; margin-bottom: 8px; z-index: 30; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 208px; padding: 6px; background: var(--hw-surf); border: 1px solid var(--hw-line); border-radius: var(--hw-r); box-shadow: var(--hw-hoch); } .hw-klammermenue button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 6px; border: 0; border-radius: 9px; background: transparent; font-family: inherit; font-size: 11.5px; color: var(--hw-ink2); cursor: pointer; } .hw-klammermenue button:hover { background: var(--hw-acc-zart); color: var(--hw-acc); } /* ------------------------------------------------------------ Hinweiskästen — „Termin vorgeschlagen", „Kunde bittet um …", „zur Abnahme gemeldet". Vorher jeweils eigene Tailwind-Farben pro Fall; jetzt ein Kasten mit vier Tönen. ------------------------------------------------------------ */ .hw-hinweis { padding: 12px 14px; border-radius: 11px; margin-bottom: 14px; background: var(--hw-surf2); border: 1px solid var(--hw-line); border-left: 3px solid var(--hw-ink3); } .hw-hinweis p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--hw-ink2); } .hw-hinweis p + p { margin-top: 5px; color: var(--hw-ink3); font-size: 12.5px; } .hw-hinweis b { color: var(--hw-ink); font-weight: 700; } .hw-hinweis--info { border-left-color: var(--hw-info); background: var(--hw-info-f); border-color: transparent; } .hw-hinweis--warn { border-left-color: var(--hw-warn); background: var(--hw-warn-f); border-color: transparent; } .hw-hinweis--gut { border-left-color: var(--hw-gut); background: var(--hw-gut-f); border-color: transparent; } .hw-hinweis--info p, .hw-hinweis--warn p, .hw-hinweis--gut p { color: var(--hw-ink); } .hw-hinweis--info p + p, .hw-hinweis--warn p + p, .hw-hinweis--gut p + p { color: var(--hw-ink2); } /* Abschnittsüberschrift mit Erklärsatz darunter */ .hw-abschnitt > h3 { margin: 0 0 3px; font-size: 15px; font-weight: 700; letter-spacing: -.012em; color: var(--hw-ink); } .hw-abschnitt > h3 + p { margin: 0 0 16px; font-size: 13px; line-height: 1.6; color: var(--hw-ink3); } .hw-untertitel { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--hw-ink3); } /* Zwischenüberschrift innerhalb eines Abschnitts */ .hw-untergruppe { padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--hw-line); } .hw-untergruppe > h3 { margin: 0 0 3px; font-size: 14px; font-weight: 700; color: var(--hw-ink); } /* Angebotspositionen — je Zeile Art, Beschreibung, Menge, Einheit, Preis, USt */ .hw-posten { display: grid; gap: 6px; align-items: start; margin-bottom: 6px; grid-template-columns: 1fr; } @media (min-width: 720px) { .hw-posten { grid-template-columns: 108px minmax(0, 1fr) 74px 84px 104px 118px 30px; } .hw-posten--ohne-ust { grid-template-columns: 108px minmax(0, 1fr) 74px 84px 104px 30px; } } .hw-postenkopf { display: none; gap: 6px; padding: 0 2px 5px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--hw-ink3); } @media (min-width: 720px) { .hw-postenkopf { display: grid; } } .hw-summen { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--hw-line); } .hw-summenzeile { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 13px; color: var(--hw-ink2); font-variant-numeric: tabular-nums; } .hw-summenzeile--gesamt { margin-top: 4px; padding-top: 7px; border-top: 1px solid var(--hw-zart); font-size: 14.5px; font-weight: 700; color: var(--hw-ink); } .hw-summenfuss { margin: 7px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--hw-ink3); } /* Sterne für die Bewertung */ .hw-sterne { display: flex; gap: 3px; } .hw-sterne button { padding: 2px; border: 0; background: none; cursor: pointer; line-height: 0; color: var(--hw-line2); } .hw-sterne button.ist-an { color: #eab308; } /* Kartenausschnitt mit Kopfzeile */ .hw-ortkasten { border: 1px solid var(--hw-line); border-radius: var(--hw-r); overflow: hidden; background: var(--hw-surf); margin-bottom: 14px; } .hw-ortkopf { display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--hw-zart); } .hw-ortkopf b { font-size: 12.5px; font-weight: 600; color: var(--hw-ink); } .hw-ortkopf a { margin-left: auto; font-size: 12px; color: var(--hw-acc); text-decoration: none; white-space: nowrap; } /* Grüner Haken in der Checkliste — die Farbe sagt „erledigt", nicht „gewählt" */ .hw-hakzeile .hw-haken.ist-fertig { background: var(--hw-gut); border-color: var(--hw-gut); color: #fff; } /* ------------------------------------------------------------ Chat mit dem Kunden ------------------------------------------------------------ Dasselbe Bauteil steckt auf der Auftragsseite (als Abschnitt, feste Höhe) und in den Nachrichten (füllt die Mittelspalte). Deshalb die Höhe hier und die Ausnahme darunter. ------------------------------------------------------------ */ .hw-chat { display: flex; flex-direction: column; min-height: 0; height: 26rem; background: var(--hw-bg); border: 1px solid var(--hw-line); border-radius: var(--hw-r); overflow: hidden; } .hw-postmitte .hw-chat { height: auto; flex: 1; border: 0; border-radius: 0; } .hw-chatkopf { display: flex; align-items: center; gap: 10px; flex: none; padding: 11px 14px; background: var(--hw-surf); border-bottom: 1px solid var(--hw-line); } .hw-chatkopf b { display: block; font-size: 13.5px; font-weight: 700; color: var(--hw-ink); } .hw-chatkopf small { display: block; font-size: 11.5px; color: var(--hw-ink3); } .hw-chatlauf { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; } .hw-blase { display: flex; margin-bottom: 8px; } .hw-blase--ich { justify-content: flex-end; } .hw-blase > div { max-width: 76%; padding: 8px 11px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; background: var(--hw-surf); border: 1px solid var(--hw-line); color: var(--hw-ink); } .hw-blase--ich > div { background: var(--hw-acc-zart); border-color: transparent; } .hw-blase p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; } .hw-blasenfuss { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 4px; font-size: 11px; color: var(--hw-ink3); font-variant-numeric: tabular-nums; } .hw-blasenbild { display: block; margin-bottom: 6px; padding: 0; border: 0; background: none; cursor: zoom-in; } .hw-blasenbild img { display: block; max-width: 190px; max-height: 170px; border-radius: 8px; object-fit: cover; } .hw-blasendatei { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 6px 9px; border-radius: 8px; background: var(--hw-surf2); color: inherit; text-decoration: none; font-size: 12px; font-weight: 600; } .hw-chatfuss { flex: none; padding: 10px 12px; background: var(--hw-surf); border-top: 1px solid var(--hw-line); } .hw-chatzeile { display: flex; align-items: center; gap: 8px; position: relative; } .hw-chatzeile > .hw-eingabe { flex: 1; min-width: 0; width: auto; } .hw-chatgesperrt { flex: none; padding: 16px; text-align: center; background: var(--hw-surf); border-top: 1px solid var(--hw-line); } .hw-chatgesperrt p { margin: 0 0 4px; font-size: 13px; color: var(--hw-ink2); line-height: 1.55; } .hw-chatgesperrt p + p { color: var(--hw-ink3); font-size: 12.5px; } /* Kleines Tropfmenü in heller Umgebung (drei Punkte im Chatkopf) */ .hw-tropfmenue { position: absolute; right: 0; top: calc(100% + 5px); z-index: 30; min-width: 236px; padding: 5px; background: var(--hw-surf); border: 1px solid var(--hw-line); border-radius: var(--hw-r); box-shadow: var(--hw-hoch); } .hw-tropfmenue button, .hw-tropfmenue a { display: block; width: 100%; text-align: left; padding: 8px 11px; border: 0; border-radius: 8px; background: none; font-family: inherit; font-size: 13px; color: var(--hw-ink2); text-decoration: none; cursor: pointer; } .hw-tropfmenue button:hover, .hw-tropfmenue a:hover { background: var(--hw-surf2); color: var(--hw-ink); } .hw-tropfmenue .hw-tropf--krit { color: var(--hw-krit); } .hw-tropfmenue .hw-tropf--krit:hover { background: var(--hw-krit-f); color: var(--hw-krit); } .hw-tropfmenue .hw-tropf--matt { color: var(--hw-ink3); } /* ------------------------------------------------------------ Große Fenster mit Formular — „Neuer Mitarbeiter", „Schicht anlegen". Der Rumpf rollt für sich, damit Kopf und Fußzeile mit den Knöpfen stehen bleiben. ------------------------------------------------------------ */ .hw-fenster--breit { max-width: 780px; max-height: calc(100vh - 56px); display: flex; flex-direction: column; } .hw-fenster--breit .hw-fenster-rumpf { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -22px; padding: 2px 22px; } .hw-fenster--breit .hw-formfuss { flex: none; padding-top: 14px; border-top: 1px solid var(--hw-line); } .hw-fenster h3 + .hw-untertitel { margin-top: -8px; } /* Aufklapp-Auswahl: sieht aus wie ein Feld, öffnet aber eine eigene Tafel mit Suche und der Möglichkeit, einen eigenen Eintrag anzulegen. */ .hw-aufklapphuelle { position: relative; } .hw-aufklapp { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--hw-line2); background: var(--hw-surf); font-family: inherit; font-size: 13.5px; color: var(--hw-ink); cursor: pointer; text-align: left; } .hw-aufklapp svg { flex: none; color: var(--hw-ink3); transition: transform .15s; } .hw-aufklapp.ist-offen { border-color: var(--hw-acc); } .hw-aufklapp.ist-offen svg { transform: rotate(180deg); } .hw-aufklapptafel { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; display: grid; grid-template-columns: 2fr 1fr; overflow: hidden; background: var(--hw-surf); border: 1px solid var(--hw-line); border-radius: var(--hw-r); box-shadow: var(--hw-hoch); } @media (max-width: 640px) { .hw-aufklapptafel { grid-template-columns: 1fr; } } .hw-aufklappliste { max-height: 250px; overflow-y: auto; } .hw-aufklappliste button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 13px; border: 0; background: none; font-family: inherit; font-size: 13px; color: var(--hw-ink2); text-align: left; cursor: pointer; } .hw-aufklappliste button:hover { background: var(--hw-surf2); } .hw-aufklappliste button.ist-gewaehlt { background: var(--hw-acc-zart); color: var(--hw-acc); font-weight: 600; } .hw-aufklappsuche { padding: 9px; border-bottom: 1px solid var(--hw-zart); background: var(--hw-surf2); } .hw-aufklappeigen { padding: 11px; border-left: 1px solid var(--hw-zart); background: var(--hw-surf2); } @media (max-width: 640px) { .hw-aufklappeigen { border-left: 0; border-top: 1px solid var(--hw-zart); } } .hw-aufklappeigen p { margin: 0 0 7px; } /* Berechtigungen als Karten mit Häkchen */ .hw-rechtekarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 7px; } .hw-rechtekarte { display: flex; align-items: flex-start; gap: 10px; padding: 10px 11px; border: 1px solid var(--hw-line); border-radius: 10px; background: var(--hw-surf); cursor: pointer; } .hw-rechtekarte:hover { border-color: var(--hw-line2); } .hw-rechtekarte.ist-an { border-color: var(--hw-acc); background: var(--hw-acc-zart); } .hw-rechtekarte b { display: block; font-size: 13px; font-weight: 600; color: var(--hw-ink); } .hw-rechtekarte small { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.45; color: var(--hw-ink3); } /* Ein abgesetzter Block innerhalb eines Formulars */ .hw-gruppe { padding: 14px 15px; border-radius: var(--hw-r); border: 1px solid var(--hw-line); background: var(--hw-surf2); } .hw-gruppe > h4 { margin: 0 0 3px; font-size: 13.5px; font-weight: 700; color: var(--hw-ink); } .hw-gruppe > h4 + p { margin: 0 0 13px; font-size: 12.5px; line-height: 1.55; color: var(--hw-ink3); } /* ------------------------------------------------------------ Werkzeugleiste oben rechts — Glocke und Briefsymbol ------------------------------------------------------------ */ .hw-werkzeug { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; flex: none; border: 0; background: transparent; color: var(--hw-ink3); cursor: pointer; padding: 0; font-family: inherit; text-decoration: none; } .hw-werkzeug:hover { background: var(--hw-surf2); color: var(--hw-ink); } .hw-werkzeug-zahl { position: absolute; top: 1px; right: 1px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: var(--hw-krit); color: #fff; font-size: 9.5px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } /* Die Tafel unter der Glocke */ .hw-glockenhuelle { position: relative; } .hw-glockentafel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 372px; max-width: calc(100vw - 32px); background: var(--hw-surf); border: 1px solid var(--hw-line); border-radius: var(--hw-r); box-shadow: var(--hw-hoch); overflow: hidden; } .hw-glockenkopf { display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-bottom: 1px solid var(--hw-line); background: var(--hw-surf2); } .hw-glockenkopf h3 { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--hw-ink); } .hw-glockenliste { max-height: 400px; overflow-y: auto; } .hw-meldung { position: relative; display: flex; border-bottom: 1px solid var(--hw-zart); } .hw-meldung:last-child { border-bottom: 0; } .hw-meldung > a { flex: 1; min-width: 0; display: block; padding: 12px 42px 12px 15px; text-decoration: none; color: inherit; } .hw-meldung:hover { background: var(--hw-surf2); } .hw-meldung b { display: block; font-size: 13px; font-weight: 600; color: var(--hw-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hw-meldung p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--hw-ink3); } .hw-meldung time { display: block; margin-top: 5px; font-size: 11px; color: var(--hw-ink3); font-variant-numeric: tabular-nums; } .hw-meldung .hw-still { position: absolute; top: 10px; right: 9px; } .hw-glockenfuss { padding: 10px 15px; border-top: 1px solid var(--hw-line); background: var(--hw-surf2); text-align: center; } .hw-glockenfuss a { font-size: 12.5px; font-weight: 600; color: var(--hw-acc); text-decoration: none; } /* Leerzustand als eigenes Bauteil */ .hw-leerkarte { padding: 46px 24px; text-align: center; } .hw-leerkarte h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--hw-ink); } .hw-leerkarte p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--hw-ink3); } .hw-leerkarte .hw-knopf { margin-top: 16px; } .hw-leerzeichen { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 13px; border-radius: 999px; background: var(--hw-surf3); color: var(--hw-ink3); font-size: 24px; } /* Die Marke im Akzentkasten der Navigation. Als Bild statt als Pfad — das gelieferte Logo ist eine Rasterdatei. */ .hw-marke-bild { display: block; width: 38px; height: 38px; } /* ------------------------------------------------------------ Abschnitt als Reiterinhalt ------------------------------------------------------------ .hw-abschnitt bringt normalerweise eine Trennlinie oben mit — sie setzt die Abschnitte einer langen Bahn voneinander ab. Unter einer Reiterzeile ist das eine Linie zu viel: Die Zeile zieht ihre eigene, und zwei direkt übereinander sehen aus wie ein Fehler. ------------------------------------------------------------ */ .hw-abschnitt.ist-tafel { border-top: 0; padding: 4px 0 8px; } /* ------------------------------------------------------------ Karte: klein, auf Klick groß ------------------------------------------------------------ Klein beantwortet sie nur „wo ungefähr", und dafür reichen 130 Pixel. Erst der Klick macht sie zum Arbeitsgerät. Die Höhe wandert weich, damit man sieht, was passiert — MapLibre wird danach neu vermessen (karteNeuVermessen). ------------------------------------------------------------ */ .hw-kartenfeld { width: 100%; height: 168px; cursor: zoom-in; transition: height .22s ease; } /* Aufgeklappt soll die Karte wirklich groß sein und nicht bloß ein breiter Streifen: Bei 420 Pixeln Höhe auf voller Breite sah man zwar mehr Fläche, aber kaum mehr Umgebung — zum Einschätzen einer Anfahrt braucht es Höhe. */ .hw-kartenfeld.ist-gross { height: 620px; cursor: default; } @media (prefers-reduced-motion: reduce) { .hw-kartenfeld { transition: none; } } /* Der Knopf in der Kopfzeile der Karte. Sitzt zwischen Adresse und „Route" und nennt beim Namen, was der Klick auf die Fläche tut — ein Klickziel ohne Beschriftung findet niemand. */ .hw-ortknopf { margin-left: auto; flex: none; padding: 3px 9px; border-radius: 7px; border: 1px solid var(--hw-line); background: var(--hw-surf); font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--hw-ink3); cursor: pointer; white-space: nowrap; } .hw-ortknopf:hover { border-color: var(--hw-line2); color: var(--hw-ink); } /* „Route" stand bisher rechts außen; jetzt schiebt der Knopf, und der Link braucht seinen eigenen Abstand statt des Automatik-Randes. */ .hw-ortkopf a { margin-left: 12px; } /* ------------------------------------------------------------ Kopf der Auftrags-Übersicht: Kontakt links, Karte rechts ------------------------------------------------------------ Telefon und E-Mail stehen untereinander in einer schmalen Spalte, die Karte daneben. Vorher lagen die Kontaktfelder nebeneinander und die Karte über die volle Breite darunter — sie war damit selbst in klein noch das größte Element. Die beiden teilen sich die Zeile zu gleichen Teilen und füllen sie ganz aus. Feste Breiten wären hier falsch: Bei 250 + 460 Pixeln blieb zwischen Karte und Leiste rechts die halbe Arbeitsfläche leer — und mit einer dehnbaren Karte wurde sie sofort wieder so breit, wie sie vorher war. Damit das aufgeht, steht die Kontaktspalte IMMER in der Vorlage, auch ohne hinterlegte Nummer. Fiele sie weg, stünde die Karte allein und die Aufteilung wäre hin. Klappt die Karte auf, nimmt sie eine ganze Zeile für sich. ------------------------------------------------------------ */ .hw-uebersichtskopf { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; margin-bottom: 22px; } .hw-kontaktspalte, .hw-uebersichtskopf .hw-ortkasten { flex: 1 1 280px; min-width: 0; margin-bottom: 0; } .hw-uebersichtskopf.ist-gross .hw-ortkasten { flex: 1 1 100%; } /* Faktenraster in einer Spalte — für Name/Wert-Paare, die untereinander gehören statt nebeneinander. */ .hw-faktraster--eine { grid-template-columns: minmax(0, 1fr); } /* Die Sonderregel für „ohne Kontakt" ist mit dem Wechsel auf Flexbox überflüssig geworden: Fehlt die Kontaktspalte, rücken Karte und Beschreibung von selbst auf. Die Klasse bleibt in der Vorlage — falls dieser Fall doch einmal eigene Maße braucht, hängt sie schon da. */