/* Startseite – das Morgenbild. * * Baut auf dem auf, was schon da ist: die Farben, Radien und Rahmen kommen aus * den Seiten selbst (--surface-1, --ring, --ink-2), die Hausfarbe aus marke.css. * Hier stehen nur die Bausteine, die es vorher nicht gab – Kachelgitter, * Begrüßungsbühne, Statuszeilen, Messwerte. * * GEHÖRT NACH marke.css IN DEN : die Kacheln benutzen --ut-gruen, und das * setzt marke.css. * * Zwei Gestaltungsregeln, die überall durchgehalten werden: * * 1. Eine Kachel hat EINE Aufgabe und eine Überschrift, die sie benennt. Kein * Kasten ohne Titel, kein Titel über zwei Themen. * 2. Zahlen sind groß, Beschriftungen klein und ruhig. Wer morgens draufschaut, * soll die Zahl lesen, ohne den Satz danebenlesen zu müssen. */ /* --- Begrüßungsbühne ---------------------------------------------------- */ /* Dieselbe Bildbühne wie auf allen Seiten, nur höher und mit Inhalt: Anrede, Datum, Tagesstatus, Suche. Das ist die Zeile, die morgens zuerst gelesen wird – deshalb steht sie im Bild und nicht in einer Kachel. */ .db-buehne { position: relative; border-radius: 14px; overflow: hidden; background: var(--ut-gruen-dunkel, #005C34); margin-bottom: 18px; min-height: 210px; display: flex; align-items: flex-end; } .db-buehne > .ut-buehne-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center right; } /* Von unten abdunkeln – ohne den Verlauf säuft die Schrift in den hellen Stellen des Kopfbilds ab. */ .db-buehne::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 48, 27, 0.86) 0%, rgba(0, 48, 27, 0.42) 58%, rgba(0, 48, 27, 0.05) 100%); } .db-buehne-inhalt { position: relative; z-index: 1; padding: 22px 24px 20px; width: 100%; } .db-buehne .ut-logo-hell { height: 38px; margin-bottom: 14px; } .db-anrede { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; justify-content: space-between; } .db-buehne h1 { color: #fff; margin: 0; font-size: 30px; letter-spacing: -0.015em; } .db-datum { color: rgba(255, 255, 255, 0.88); font-size: 13.5px; margin: 5px 0 0; } .db-datum strong { font-weight: 700; } /* Porträt neben der Anrede. Klein, rund, mit weißem Ring – es soll die Person wiedererkennbar machen, nicht die Zeile dominieren. */ .db-portraet { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: rgba(255, 255, 255, 0.2); border: 2px solid rgba(255, 255, 255, 0.7); flex: none; } .db-anrede-links { display: flex; align-items: center; gap: 14px; } /* --- Tagesstatus in der Bühne ------------------------------------------- */ .db-status { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 14px; } .db-status-titel { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(255, 255, 255, 0.72); margin-right: 3px; font-weight: 700; } .db-status button { font-size: 12.5px; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.38); background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; backdrop-filter: blur(2px); } .db-status button:hover { background: rgba(255, 255, 255, 0.24); } .db-status button.aktiv { background: #fff; color: var(--ut-gruen-dunkel, #005C34); border-color: #fff; font-weight: 700; } /* Urlaub kann man nicht klicken – er kommt aus dem genehmigten Antrag. */ .db-status .db-status-fest { font-size: 12.5px; padding: 5px 12px; border-radius: 999px; background: var(--ut-orange, #ED7D31); color: #fff; font-weight: 700; } /* --- Suche in der Bühne -------------------------------------------------- */ .db-suchbereich { position: relative; margin-top: 16px; max-width: 620px; } .db-suchbereich input { width: 100%; font-size: 14px; padding: 11px 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.94); color: #0b0b0b; } .db-suchbereich input::placeholder { color: #6b6a66; } .db-treffer { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--surface-1); border: 1px solid var(--ring); border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22); overflow: hidden; z-index: 20; max-height: 60vh; overflow-y: auto; } .db-treffer a, .db-treffer div.db-treffer-zeile { display: block; padding: 10px 14px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--ring); } .db-treffer > :last-child { border-bottom: none; } .db-treffer a:hover { background: var(--plane); } .db-treffer-art { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ut-gruen, #007A45); font-weight: 700; } .db-treffer-titel { font-size: 13.5px; font-weight: 700; margin: 1px 0; } .db-treffer-text { font-size: 12.5px; color: var(--ink-2); } /* --- Kachelgitter -------------------------------------------------------- */ /* Sechs Spalten, damit sich Drittel und Hälften mischen lassen. Unter 1000px wird jede Kachel volle Breite – nebeneinander wäre auf dem Telefon nur klein. */ .db-gitter { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; /* stretch, nicht start: nebeneinanderliegende Kacheln sind gleich hoch und schließen unten auf einer Linie ab. Mit `start` klaffte zwischen einer langen und einer kurzen Kachel eine Lücke, und die Seite sah aus wie ein halb aufgeräumter Schreibtisch. Damit die Lücke nicht bloß in die Kachel wandert, sind die langen Listen unten begrenzt und scrollen. */ align-items: stretch; } .db-kachel { grid-column: span 6; } .db-kachel[data-breite="2"] { grid-column: span 2; } .db-kachel[data-breite="3"] { grid-column: span 3; } .db-kachel[data-breite="4"] { grid-column: span 4; } .db-kachel { background: var(--surface-1); border: 1px solid var(--ring); border-radius: 14px; padding: 16px 18px 18px; display: flex; flex-direction: column; min-width: 0; } /* Lange Listen begrenzen und scrollen lassen. Die Anwesenheitstafel hat 15 Zeilen und würde die Kachel neben sich sonst auf doppelte Höhe zwingen. */ .db-rollbar { overflow-y: auto; max-height: 420px; min-height: 0; } /* Kopfzeile jeder Kachel: Titel links, Werkzeuge rechts. Der grüne Strich vor dem Titel ist derselbe wie über den öffentlichen Beiträgen – so sehen alle Überschriften der App gleich aus. */ .db-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .db-kopf h2 { font-size: 13px; margin: 0; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-2); font-weight: 700; display: flex; align-items: center; gap: 8px; } .db-kopf h2::before { content: ""; width: 3px; height: 13px; border-radius: 2px; background: var(--ut-gruen, #007A45); flex: none; } .db-zahl-daneben { font-size: 11.5px; color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; } /* Werkzeuge erscheinen erst beim Überfahren – sie sind Einrichtung, nicht Inhalt, und sollen nicht ständig um Aufmerksamkeit bitten. */ .db-werkzeuge { display: flex; gap: 3px; opacity: 0; transition: opacity .12s; } .db-kachel:hover .db-werkzeuge, .db-werkzeuge:focus-within { opacity: 1; } .db-werkzeuge button { font-size: 12px; line-height: 1; padding: 4px 7px; border-radius: 6px; border: 1px solid var(--ring); background: var(--plane); color: var(--ink-2); cursor: pointer; } .db-werkzeuge button:hover { color: var(--ink); border-color: var(--ut-gruen, #007A45); } /* Zugangszeile links in der Kopfzeile */ .db-wer { font-size: 12.5px; color: var(--muted); } .db-wer strong { color: var(--ink-2); } /* --- „Heute für mich wichtig" ------------------------------------------- */ .db-punkte { display: flex; flex-direction: column; gap: 9px; } .db-punkt { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 11px; background: var(--plane); border: 1px solid var(--ring); border-left: 3px solid var(--grid); } .db-punkt.dringend { border-left-color: var(--ut-orange, #ED7D31); background: color-mix(in srgb, var(--ut-orange, #ED7D31) 7%, var(--plane)); } .db-punkt-text { flex: 1; min-width: 0; } .db-punkt-titel { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; } .db-punkt-mehr { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; } .db-punkt .db-knopf { flex: none; } /* Der gute Fall: nichts offen. Der soll sich auch so anfühlen. */ .db-frei { display: flex; align-items: center; gap: 12px; padding: 18px 16px; border-radius: 11px; background: color-mix(in srgb, var(--ut-gruen, #007A45) 8%, var(--plane)); border: 1px solid color-mix(in srgb, var(--ut-gruen, #007A45) 25%, var(--ring)); } .db-frei-haken { width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--ut-gruen, #007A45); color: #fff; display: grid; place-items: center; font-size: 15px; font-weight: 700; } .db-frei-titel { font-size: 14.5px; font-weight: 700; } .db-frei-text { font-size: 12.5px; color: var(--ink-2); } .db-knopf { font: inherit; font-size: 12.5px; padding: 7px 13px; border-radius: 8px; border: 1px solid var(--ring); background: var(--surface-1); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-block; white-space: nowrap; } .db-knopf:hover { border-color: var(--ut-gruen, #007A45); color: var(--ut-gruen, #007A45); } .db-knopf.stark { background: var(--ut-gruen, #007A45); border-color: transparent; color: #fff; font-weight: 700; } .db-knopf.stark:hover { filter: brightness(1.1); color: #fff; } /* --- Schnellzugriff ------------------------------------------------------ */ /* Flach und schmal statt groß und gesprächig (Vorgabe von Klaus, 04.08.2026). Es sind siebzehn Kacheln: die Liste wird nicht gelesen, sie wird abgesucht. Deshalb weniger Höhe je Kachel, engere Spalten und ein Hinweis, der auf eine Zeile passt. Keine Kachel ist dafür weggefallen – nur der Platz, den sie brauchte. */ .db-schnell { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 7px; } .db-schnell a, .db-schnell button { font: inherit; text-align: left; cursor: pointer; text-decoration: none; color: var(--ink); background: var(--plane); border: 1px solid var(--ring); border-radius: 9px; padding: 8px 10px; display: block; transition: border-color .12s, transform .12s; } .db-schnell a:hover, .db-schnell button:hover { border-color: var(--ut-gruen, #007A45); transform: translateY(-1px); } @media (prefers-reduced-motion: reduce) { .db-schnell a, .db-schnell button { transition: none; } .db-schnell a:hover, .db-schnell button:hover { transform: none; } } /* Logo eines fremden Dienstes über dem Titel. Klein und ruhig: es soll die Kachel wiedererkennbar machen, nicht Werbung sein. Höhe begrenzt statt Breite – so sitzen ein breites Wortlogo und ein quadratisches Zeichen gleich hoch. */ .db-schnell-logo { display: block; height: 14px; width: auto; max-width: 100%; margin-bottom: 5px; } /* Fremde Logos sind meist dunkel auf transparent und verschwinden im Dunkelmodus. Heller Sockel darunter – umgefärbt wird ein fremdes Logo nicht, das verbietet jedes Corporate Design. Dieselbe Lösung wie beim eigenen Logo in marke.css. */ :root[data-theme="dark"] .db-schnell-logo { background: #fff; padding: 3px 5px; border-radius: 5px; } @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .db-schnell-logo { background: #fff; padding: 3px 5px; border-radius: 5px; } } .db-schnell-titel { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; display: block; line-height: 1.25; } /* Der Hinweis ist auf EINE Zeile begrenzt und wird sonst abgeschnitten. Das ist Absicht: eine Kachel, die je nach Textlänge zwei oder drei Zeilen hoch ist, macht aus dem Raster eine Treppe. Was nicht passt, gehört nicht in einen Schnellzugriff – der ganze Text steht ohnehin am Ziel. */ .db-schnell-hinweis { font-size: 11px; color: var(--muted); margin-top: 1px; display: block; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Ein offener Punkt an einer Kachel – die Regel dahinter steht noch nicht. */ .db-schnell .db-offen { display: inline-block; margin-top: 3px; font-size: 10.5px; color: var(--ut-orange, #ED7D31); font-weight: 700; } /* --- Messwerte und Balken ----------------------------------------------- */ .db-werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 14px; } .db-wert { background: var(--plane); border: 1px solid var(--ring); border-radius: 11px; padding: 11px 13px; } .db-wert-l { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; } .db-wert-w { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-top: 3px; font-variant-numeric: tabular-nums; } .db-wert-w.gut { color: var(--ut-gruen-dunkel, #005C34); } .db-wert-n { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; } :root[data-theme="dark"] .db-wert-w.gut { color: var(--ut-gruen, #12A163); } @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .db-wert-w.gut { color: var(--ut-gruen, #12A163); } } .db-zeile { margin-bottom: 12px; } .db-zeile:last-child { margin-bottom: 0; } .db-zeile-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; margin-bottom: 5px; } .db-zeile-name { font-weight: 700; } .db-zeile-wert { color: var(--ink-2); font-variant-numeric: tabular-nums; } .db-balken { height: 9px; border-radius: 999px; background: var(--grid); overflow: hidden; position: relative; } .db-balken > span { display: block; height: 100%; border-radius: 999px; background: var(--ut-gruen, #007A45); } /* Unter Plan: nicht rot, sondern orange. Rot behauptet einen Fehler, orange sagt „hier ist noch etwas zu tun" – und das ist im Vertrieb der Normalfall. */ .db-balken > span.unter { background: var(--ut-orange, #ED7D31); } /* Die Plan-Marke. Bei Zielerreichung über 100 % ist der Balken voll – ohne die Marke sähen 105 % und 199 % gleich aus. Sie sitzt dann dort, wo der Plan erreicht war (bei 199 % also in der Mitte). */ .db-plan { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); opacity: 0.45; } /* --- Personen- und Terminlisten ---------------------------------------- */ .db-liste { display: flex; flex-direction: column; } .db-liste > * { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--ring); } .db-liste > :last-child { border-bottom: none; } .db-punkt-lampe { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--grid); box-shadow: 0 0 0 2px var(--surface-1); } .db-punkt-lampe.da { background: var(--ut-gruen, #007A45); } .db-punkt-lampe.weg { background: var(--ut-orange, #ED7D31); } .db-punkt-lampe.unklar { background: transparent; border: 1.5px solid var(--muted); } .db-name { font-size: 13.5px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .db-nebentext { font-size: 12px; color: var(--ink-2); flex: none; text-align: right; } .db-nebentext a { color: var(--ut-gruen, #007A45); } .db-notiz { font-size: 11.5px; color: var(--muted); font-style: italic; } .db-termin-tag { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; flex: none; width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .db-termin-tag.heute { color: var(--ut-gruen, #007A45); } .db-termin-text { flex: 1; min-width: 0; } .db-termin-titel { font-size: 13.5px; font-weight: 600; } .db-termin-mehr { font-size: 11.5px; color: var(--ink-2); } .db-marke { flex: none; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--plane); border: 1px solid var(--ring); color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.04em; } .db-marke.frei { color: var(--ut-gruen, #007A45); border-color: currentColor; } .db-marke.weg { color: var(--ut-orange, #ED7D31); border-color: currentColor; } /* --- Ideen -------------------------------------------------------------- */ .db-idee { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--ring); } .db-idee:last-of-type { border-bottom: none; } .db-daumen { flex: none; width: 46px; text-align: center; cursor: pointer; border: 1px solid var(--ring); border-radius: 10px; background: var(--plane); padding: 5px 0; font: inherit; color: var(--ink); } .db-daumen:hover { border-color: var(--ut-gruen, #007A45); } .db-daumen.aktiv { background: color-mix(in srgb, var(--ut-gruen, #007A45) 14%, var(--plane)); border-color: var(--ut-gruen, #007A45); color: var(--ut-gruen-dunkel, #005C34); } :root[data-theme="dark"] .db-daumen.aktiv { color: var(--ut-gruen, #12A163); } .db-daumen-zahl { display: block; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } .db-daumen-l { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .db-idee-text { flex: 1; min-width: 0; } .db-idee-titel { font-size: 13.5px; font-weight: 700; } .db-idee-mehr { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; } .db-idee-fuss { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 5px; font-size: 11.5px; color: var(--muted); } .db-stand { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; background: var(--plane); border: 1px solid var(--ring); color: var(--ink-2); } /* Idee oder Lesson Learned – zwei verschiedene Dinge, deshalb sichtbar unterschieden. Die Erfahrung trägt die Hausfarbe: sie ist nichts, worüber entschieden werden muss, sie gilt schon. */ .db-art { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; background: var(--plane); border: 1px dashed var(--ring); color: var(--muted); } .db-art.lesson { border-style: solid; border-color: var(--ut-gruen, #007A45); color: var(--ut-gruen-dunkel, #005C34); } :root[data-theme="dark"] .db-art.lesson { color: var(--ut-gruen, #12A163); } @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .db-art.lesson { color: var(--ut-gruen, #12A163); } } .db-stand.eingegangen { color: var(--ut-graublau, #44546A); border-color: currentColor; } .db-stand.geprueft { color: var(--ut-orange, #ED7D31); border-color: currentColor; } .db-stand.umgesetzt { color: #fff; background: var(--ut-gruen, #007A45); border-color: transparent; } .db-stand.abgelehnt { color: var(--muted); } .db-antwort { margin-top: 6px; padding: 8px 11px; border-radius: 0 8px 8px 0; border-left: 3px solid var(--ut-gruen, #007A45); background: var(--plane); font-size: 12.5px; color: var(--ink-2); } /* --- Wirtschaftlichkeit einer Idee ------------------------------------- */ .db-rechnung { display: block; margin-top: 5px; font-size: 12px; color: var(--ink-2); padding: 6px 9px; border-radius: 8px; background: var(--plane); border: 1px solid var(--ring); } .db-rechnung strong { color: var(--ut-gruen-dunkel, #005C34); } :root[data-theme="dark"] .db-rechnung strong { color: var(--ut-gruen, #12A163); } @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .db-rechnung strong { color: var(--ut-gruen, #12A163); } } .db-rechnung.offen, .db-rechnung-offen { color: var(--muted); font-style: italic; } .db-rechnung-offen { display: block; margin-top: 3px; font-size: 11.5px; } /* --- Vision 2030: Nachbau der Strategiegrafik --------------------------- */ /* Aufbau wie auf der Folie: Vision und Mission oben, links die fünf Strategien als nummerierte Pillen, rechts die Zielkategorien als Spalten (oranger Kopf, darunter die operativen Ziele in Grün), unten die Werte. * * Nachgebaut und nicht als Bild eingebunden, damit der Text durchsuchbar und * vorlesbar bleibt, sich in beiden Helligkeiten liest und auf dem Telefon * umbricht. Das Bild selbst hängt als Knopf daneben – dort steht das Original. * * Die Farben kommen aus der Marke (--ut-gruen, --ut-orange) statt aus dem * Screenshot: so bleibt die Kachel mit dem Rest der App in einem Ton, auch * wenn die Vorlage einmal nachjustiert wird. */ .db-vs { --vs-flaeche: color-mix(in srgb, var(--ut-gruen, #007A45) 7%, #fff); --vs-ziel: color-mix(in srgb, var(--ut-gruen, #007A45) 88%, #fff); } :root[data-theme="dark"] .db-vs { --vs-flaeche: color-mix(in srgb, var(--ut-gruen, #12A163) 13%, var(--plane)); --vs-ziel: color-mix(in srgb, var(--ut-gruen, #12A163) 72%, #000); } @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .db-vs { --vs-flaeche: color-mix(in srgb, var(--ut-gruen, #12A163) 13%, var(--plane)); --vs-ziel: color-mix(in srgb, var(--ut-gruen, #12A163) 72%, #000); } } /* Die grüne Überschrift der Grafik – „Vision", „Strategien", „Werte". */ .db-vs-titel { display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--ut-gruen-dunkel, #005C34); margin-bottom: 6px; } :root[data-theme="dark"] .db-vs-titel { color: var(--ut-gruen, #12A163); } @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .db-vs-titel { color: var(--ut-gruen, #12A163); } } /* Kleines Zahnrad – dasselbe Zeichen wie in den Kreisen der Grafik. */ .db-vs-rad { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--ut-gruen, #007A45); } /* Vision und Mission oben, nebeneinander */ .db-vs-oben { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; } .db-vs-satz { display: flex; gap: 11px; align-items: flex-start; } .db-vs-satz .db-vs-rad { background: var(--vs-flaeche); margin-top: 3px; } .db-vs-satz p { margin: 0; font-size: 13.5px; line-height: 1.5; } /* Strategien links, Zielkategorien rechts */ .db-vs-mitte { display: grid; grid-template-columns: minmax(200px, 0.32fr) 1fr; gap: 16px; align-items: start; } .db-vs-strat { list-style: none; margin: 0; padding: 0; } .db-vs-strat li { display: flex; align-items: stretch; gap: 0; margin-bottom: 7px; } /* Nummernkreis 01…05 */ .db-vs-nr { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--surface-1); color: var(--ut-gruen-dunkel, #005C34); border: 2px solid var(--vs-flaeche); position: relative; z-index: 1; } :root[data-theme="dark"] .db-vs-nr { color: var(--ut-gruen, #12A163); } @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .db-vs-nr { color: var(--ut-gruen, #12A163); } } /* Die Pille mit dem Strategietext – abwechselnd orange und grün wie in der Vorlage. Der Einzug nach links legt sie hinter den Nummernkreis. */ .db-vs-pille { flex: 1; min-width: 0; margin-left: -14px; padding: 7px 12px 7px 22px; border-radius: 0 999px 999px 0; display: flex; align-items: center; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: #fff; } .db-vs-strat li:nth-child(odd) .db-vs-pille { background: var(--ut-orange, #ED7D31); } .db-vs-strat li:nth-child(even) .db-vs-pille { background: var(--vs-ziel); } /* Die große Fläche mit den Zielkategorien */ .db-vs-flaeche { background: var(--vs-flaeche); border-radius: 16px; padding: 14px 14px 10px; } .db-vs-flaeche > .db-vs-titel { text-align: center; } .db-vs-spalten { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .db-vs-spalte { display: flex; flex-direction: column; gap: 5px; } /* Oranger Kopf der Spalte */ .db-vs-kopf { background: var(--ut-orange, #ED7D31); color: #fff; border-radius: 11px; padding: 9px 9px 10px; text-align: center; font-size: 11.5px; font-weight: 700; line-height: 1.25; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 78px; } .db-vs-kopf .db-vs-rad { color: var(--ut-orange, #ED7D31); } /* Die operativen Ziele darunter */ .db-vs-ziel { background: var(--vs-ziel); color: #fff; border-radius: 9px; padding: 7px 8px; text-align: center; font-size: 10.5px; line-height: 1.3; font-weight: 500; } /* „Operative Ziele" mit den Pfeilen nach oben, wie in der Vorlage */ .db-vs-fuss { margin-top: 10px; text-align: center; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--ut-gruen-dunkel, #005C34); } /* Ein Pfeil je Spalte, im selben Raster wie die Spalten darüber – so sitzt er auch dann darunter, wenn das Fenster schmaler wird und aus fünf Spalten drei oder zwei werden. */ .db-vs-pfeile { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 8px; text-align: center; font-size: 15px; line-height: 1; color: color-mix(in srgb, var(--ut-gruen, #007A45) 45%, transparent); } :root[data-theme="dark"] .db-vs-fuss { color: var(--ut-gruen, #12A163); } @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .db-vs-fuss { color: var(--ut-gruen, #12A163); } } /* Werte unten, mit dem gemeinsamen Ziel daneben */ .db-vs-unten { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; margin-top: 16px; } .db-vs-werte { display: flex; gap: 11px; align-items: flex-start; } .db-vs-werte .db-vs-rad { background: var(--vs-flaeche); margin-top: 3px; } .db-vs-werte p { margin: 0; font-size: 13px; line-height: 1.5; } .db-vs-werte strong { color: var(--ut-gruen-dunkel, #005C34); } :root[data-theme="dark"] .db-vs-werte strong { color: var(--ut-gruen, #12A163); } @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .db-vs-werte strong { color: var(--ut-gruen, #12A163); } } .db-vs-ziel-gross { text-align: center; padding: 10px 18px; border-radius: 12px; background: var(--vs-flaeche); } .db-vs-ziel-gross .db-wert-w { font-size: 22px; } /* Schmale Fenster: erst vier, dann zwei, dann eine Spalte – und Vision, Mission, Strategien untereinander. */ @media (max-width: 1100px) { .db-vs-spalten, .db-vs-pfeile { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 820px) { .db-vs-oben, .db-vs-mitte, .db-vs-unten { grid-template-columns: 1fr; } .db-vs-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Untereinander gestapelt zeigen Pfeile nach oben nichts mehr an. */ .db-vs-pfeile { display: none; } } @media (max-width: 480px) { .db-vs-spalten { grid-template-columns: 1fr; } } /* --- Formulare in Kacheln ---------------------------------------------- */ .db-formular { display: grid; gap: 8px; margin-bottom: 14px; } .db-formular input, .db-formular select, .db-formular textarea { font: inherit; font-size: 13px; padding: 8px 11px; border-radius: 9px; border: 1px solid var(--ring); background: var(--plane); color: var(--ink); width: 100%; } .db-formular textarea { min-height: 62px; resize: vertical; } .db-formular-reihe { display: flex; gap: 8px; align-items: center; } .db-formular-reihe select { flex: 1; } /* --- Kleinteile --------------------------------------------------------- */ .db-leer { font-size: 13px; color: var(--ink-2); padding: 14px 0; text-align: center; } .db-laedt { font-size: 12.5px; color: var(--muted); padding: 10px 0; } /* Ein offener Punkt – dieselbe Optik wie im Handbuch und im Organigramm. */ .db-offener-punkt { border-left: 3px solid var(--warn, #fab219); background: var(--plane); padding: 9px 12px; border-radius: 0 8px 8px 0; font-size: 12.5px; color: var(--ink-2); margin-top: 12px; } .db-fuss-hinweis { font-size: 11.5px; color: var(--muted); margin-top: 12px; } .db-fuss-hinweis strong { color: var(--ink-2); } /* Wiedereinblenden ausgeblendeter Kacheln */ .db-versteckt { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin: 4px 0 16px; font-size: 12.5px; color: var(--ink-2); } .db-versteckt button { font: inherit; font-size: 12px; padding: 4px 11px; border-radius: 999px; border: 1px dashed var(--ring); background: transparent; color: var(--ink-2); cursor: pointer; } .db-versteckt button:hover { border-style: solid; border-color: var(--ut-gruen, #007A45); color: var(--ut-gruen, #007A45); } /* --- Schmale Fenster ---------------------------------------------------- */ @media (max-width: 1000px) { .db-kachel, .db-kachel[data-breite="2"], .db-kachel[data-breite="3"], .db-kachel[data-breite="4"] { grid-column: span 6; } } @media (max-width: 620px) { .db-buehne { min-height: 0; } .db-buehne-inhalt { padding: 18px 16px 16px; } .db-buehne h1 { font-size: 22px; } .db-buehne .ut-logo-hell { height: 30px; margin-bottom: 10px; } .db-portraet { width: 42px; height: 42px; } .db-gitter { gap: 12px; } .db-kachel { padding: 14px 14px 16px; } /* Werkzeuge sind auf dem Telefon nicht überfahrbar – dort immer sichtbar. */ .db-werkzeuge { opacity: 1; } }