/* Gestaltung des Büros (Florian 13.10.2026, mit dem Taste-Skill): ruhig, präzise, modern; Bauteile mit Varianten statt Einzelfällen, damit neue Seiten ohne eigenes CSS gut aussehen. Gilt nur im Büro, nicht in der Einrichtung (buero--fokus). Nur Tokens wie bauteile.css (tests/test_designsystem.py). Formregel: Knöpfe, Chips und Plaketten voll rund, Karten und Kacheln --r-l, Felder --r. Varianten, die jede Seite nutzen kann: .karte--hervor / .kennzahl--hervor / .uebersichtskachel--hervor gefüllt in der Akzentfarbe (das Wichtigste der Seite) .karte--betont / .kennzahl--betont leicht getönt (gehört dazu, ist aber nicht das Erste) .karte--ruhig ohne Fläche, nur gegliedert (Nebensachen) .kennzahl--warn Wert in Fehlerfarbe, kleiner Punkt am Namen */ .buero:not(.buero--fokus) { --schrift: "Geist", "Instrument Sans", "Segoe UI", system-ui, sans-serif; --anzeige: "Geist", "Instrument Sans", "Segoe UI", system-ui, sans-serif; --mono: "Geist Mono", "Martian Mono", ui-monospace, monospace; --b-kante: color-mix(in srgb, var(--tinte) 9%, transparent); --b-kante-stark: color-mix(in srgb, var(--tinte) 16%, transparent); --b-schatten: none; --b-schatten-hoch: 0 1px 0 color-mix(in srgb, var(--tinte) 5%, transparent), 0 18px 40px -22px color-mix(in srgb, var(--tinte) 32%, transparent); --b-weich: cubic-bezier(0.16, 1, 0.3, 1); font-family: var(--schrift); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; background: var(--grund); } /* Kopfleiste: leicht durchscheinend, eine Haarlinie */ .buero:not(.buero--fokus) .buero-kopf { background: color-mix(in srgb, var(--grund) 82%, transparent); backdrop-filter: saturate(1.4) blur(12px); border-bottom-color: var(--b-kante); } .buero:not(.buero--fokus) .kopfsuche { border-color: var(--b-kante-stark); border-radius: var(--r-pille); background: var(--flaeche); } .buero:not(.buero--fokus) .pfad b { font-weight: 600; } /* Arbeitsfläche: begrenzte Breite, damit Zeilen lesbar bleiben */ .buero:not(.buero--fokus) .buero__inhalt { gap: var(--s5); } .buero:not(.buero--fokus) .buero__inhalt > * { max-inline-size: 84rem; } /* Seitenkopf: klare Überschrift, Weg leise darüber, Handlungen rechts */ .buero:not(.buero--fokus) .buero__inhalt h1 { font-family: var(--anzeige); font-size: clamp(1.7rem, 2.4vw, 2.2rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; } .buero:not(.buero--fokus) .seitenkopf { gap: var(--s4); padding-block-end: 0; } .buero:not(.buero--fokus) .seitenkopf > div:first-child > p:first-child { font-family: var(--schrift); font-size: 0.8rem; letter-spacing: 0; } .buero:not(.buero--fokus) .seitenkopf > div:first-child > p:not(:first-child) { color: var(--leise); } .buero:not(.buero--fokus) .buero__inhalt h2 { font-family: var(--anzeige); letter-spacing: -0.02em; } .buero:not(.buero--fokus) .buero__inhalt :is(.karte > h2, section > h2, .karte__kopf h2, .kartenkopf h2) { font-size: 1.05rem; font-weight: 600; } /* Knöpfe: voll rund, Hauptknopf mit leichter Innenkante, spürbarer Druck */ .buero:not(.buero--fokus) .knopf { border-radius: var(--r-pille); padding-inline: var(--s5); font-weight: 600; letter-spacing: -0.005em; transition: transform 0.18s var(--b-weich), box-shadow 0.18s var(--b-weich), background-color 0.18s, border-color 0.18s; } .buero:not(.buero--fokus) .knopf:not(.knopf--zweit, .knopf--leise, :disabled) { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--aktion-auf) 22%, transparent), 0 6px 16px -8px color-mix(in srgb, var(--aktion) 60%, transparent); } .buero:not(.buero--fokus) .knopf:hover { filter: none; transform: translateY(-1px); } .buero:not(.buero--fokus) .knopf:active { transform: scale(0.98); } .buero:not(.buero--fokus) .knopf--zweit { background: var(--flaeche); border-color: var(--b-kante-stark); box-shadow: 0 1px 2px color-mix(in srgb, var(--tinte) 6%, transparent); } .buero:not(.buero--fokus) .knopf--zweit:hover { border-color: color-mix(in srgb, var(--tinte) 30%, transparent); } /* Auch der leise Knopf ist als Knopf zu erkennen: getönte Fläche statt bloßer Schrift (Florian: Textverweise als Knopf nie). */ .buero:not(.buero--fokus) .knopf--leise { background: color-mix(in srgb, var(--aktion-zart) 70%, transparent); color: var(--aktion); padding-inline: var(--s4); } .buero:not(.buero--fokus) .knopf--leise:hover { background: var(--aktion-zart); } .buero:not(.buero--fokus) .knopf--klein { border-radius: var(--r-pille); padding-inline: var(--s3); } .buero:not(.buero--fokus) .knopf:disabled { box-shadow: none; transform: none; } .buero:not(.buero--fokus) .buero__inhalt button:not([class]), .buero:not(.buero--fokus) .buero__inhalt input[type="file"]::file-selector-button { border-radius: var(--r-pille); border-color: var(--b-kante-stark); } /* Karten: Fläche, Haarlinie, getönter weicher Schatten */ .buero:not(.buero--fokus) .buero__inhalt .karte { border: 1px solid var(--b-kante); border-radius: var(--r-l); box-shadow: var(--b-schatten); padding: var(--s5); } .buero:not(.buero--fokus) .karte--hervor { background: var(--aktion); color: var(--aktion-auf); border-color: transparent; } .buero:not(.buero--fokus) .karte--hervor :is(h2, h3, p, small, b, dt, dd, a, span) { color: var(--aktion-auf); } .buero:not(.buero--fokus) .karte--betont { background: color-mix(in srgb, var(--aktion-zart) 70%, var(--flaeche)); border-color: color-mix(in srgb, var(--aktion) 22%, transparent); } .buero:not(.buero--fokus) .buero__inhalt .karte--ruhig { background: transparent; border-color: transparent; box-shadow: none; padding: 0; } .buero:not(.buero--fokus) .karte__kopf, .buero:not(.buero--fokus) .kartenkopf { gap: var(--s3); } .buero:not(.buero--fokus) .karte__kopf a { font-size: 0.875rem; font-weight: 600; text-decoration: none; } .buero:not(.buero--fokus) .karte__kopf a:hover { text-decoration: underline; } /* Symbole stehen frei, ohne Fläche dahinter (Florian 14.10.2026: „die Icons können selbstständig da stehen“). */ .buero:not(.buero--fokus) .buero__inhalt .karte :is(h2, h3) > .ph:first-child { display: inline-block; inline-size: auto; block-size: auto; margin-inline-end: var(--s2); border-radius: 0; background: none; color: var(--aktion); font-size: 1.15em; vertical-align: -0.15em; } /* Kennzahlen und Übersichtskacheln: große, ruhige Zahl, Name leise darüber */ .buero:not(.buero--fokus) .kennzahlen, .buero:not(.buero--fokus) .uebersichtskacheln { gap: var(--s3); } .buero:not(.buero--fokus) :is(.kennzahl, .uebersichtskachel) { gap: var(--s1); padding: var(--s4) var(--s5); border: 1px solid var(--b-kante); border-radius: var(--r-l); background: var(--flaeche); box-shadow: var(--b-schatten); color: var(--tinte); transition: transform 0.2s var(--b-weich), box-shadow 0.2s var(--b-weich), border-color 0.2s; } .buero:not(.buero--fokus) :is(.kennzahl, .uebersichtskachel) > small:first-child, .buero:not(.buero--fokus) .uebersichtskachel__kopf { font-size: 0.8rem; font-weight: 500; color: var(--leise); } .buero:not(.buero--fokus) .kennzahl b, .buero:not(.buero--fokus) .uebersichtskachel > b { font-family: var(--anzeige); font-size: 1.85rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1.15; font-variant-numeric: tabular-nums; } .buero:not(.buero--fokus) :is(.kennzahl, .uebersichtskachel) :is(small, span):not(:first-child) { font-size: 0.8rem; color: var(--leise); } .buero:not(.buero--fokus) :is(a.kennzahl, a.uebersichtskachel):hover { transform: translateY(-2px); box-shadow: var(--b-schatten-hoch); border-color: var(--b-kante-stark); } /* Hervorgehoben: die gewählte oder wichtigste Kachel, gefüllt in der Akzentfarbe */ .buero:not(.buero--fokus) :is(.kennzahl--hervor, .uebersichtskachel--hervor, .uebersichtskachel--aktiv) { background: var(--aktion); border-color: transparent; color: var(--aktion-auf); box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--aktion) 75%, transparent); } .buero:not(.buero--fokus) :is(.kennzahl--hervor, .uebersichtskachel--hervor, .uebersichtskachel--aktiv) :is(small, span, b, .uebersichtskachel__kopf, .ph) { color: var(--aktion-auf); } .buero:not(.buero--fokus) :is(.kennzahl--hervor, .uebersichtskachel--hervor, .uebersichtskachel--aktiv) :is(small, span):not(:first-child) { color: color-mix(in srgb, var(--aktion-auf) 82%, transparent); } .buero:not(.buero--fokus) .kennzahl--betont { background: color-mix(in srgb, var(--aktion-zart) 70%, var(--flaeche)); border-color: color-mix(in srgb, var(--aktion) 22%, transparent); } .buero:not(.buero--fokus) .kennzahl--offen b { color: var(--tinte); } .buero:not(.buero--fokus) .kennzahl--warn > small:first-child::before { content: ""; display: inline-block; inline-size: 6px; block-size: 6px; margin-inline-end: var(--s1); border-radius: var(--r-pille); background: var(--fehler); vertical-align: 2px; } .buero:not(.buero--fokus) .kennzahl--warn b { color: var(--fehler); } .buero:not(.buero--fokus) .uebersichtskachel--neu { background: transparent; box-shadow: none; border: 1px dashed var(--b-kante-stark); } .buero:not(.buero--fokus) .uebersichtskachel--neu > b { font-family: var(--schrift); font-size: 1rem; letter-spacing: -0.01em; } .buero:not(.buero--fokus) .uebersichtskachel--neu:hover { border-color: var(--aktion); background: var(--aktion-zart); } /* Aktionskacheln (Wege und Schritte): ruhige Karten; gefüllt nur, wer ausdrücklich hervorgehoben ist */ .buero:not(.buero--fokus) .aktionskacheln { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--s3); } .buero:not(.buero--fokus) .aktionskachel { border-radius: var(--r-l); border-color: var(--b-kante); background: var(--flaeche); color: var(--tinte); box-shadow: var(--b-schatten); padding: var(--s4); hyphens: manual; transition: transform 0.2s var(--b-weich), box-shadow 0.2s var(--b-weich), border-color 0.2s; } .buero:not(.buero--fokus) .aktionskachel:hover { border-color: var(--b-kante-stark); background: var(--flaeche); transform: translateY(-2px); box-shadow: var(--b-schatten-hoch); } .buero:not(.buero--fokus) .aktionskachel small { color: var(--leise); } .buero:not(.buero--fokus) .aktionskachel > .ph:first-child, .buero:not(.buero--fokus) .aktionskachel b > .ph:first-child { color: var(--aktion); } .buero:not(.buero--fokus) .aktionskachel--hervor { background: var(--aktion); color: var(--aktion-auf); border-color: transparent; } .buero:not(.buero--fokus) .aktionskachel--hervor :is(small, .ph) { color: var(--aktion-auf); } .buero:not(.buero--fokus) .aktionskachel--erledigt { box-shadow: none; background: var(--flaeche-2); color: var(--leise); } .buero:not(.buero--fokus) .aktionskachel--gefahr { border-color: color-mix(in srgb, var(--fehler) 35%, transparent); background: var(--fehler-zart); color: var(--fehler); } /* Tabellen: Haarlinien, leiser Kopf, Zeile hebt sich beim Zeigen */ .buero:not(.buero--fokus) .buero__inhalt .tabelle-rahmen { border-color: var(--b-kante); border-radius: var(--r-l); box-shadow: var(--b-schatten); } .buero:not(.buero--fokus) .buero__inhalt .karte > .tabelle-rahmen { box-shadow: none; } .buero:not(.buero--fokus) .buero__inhalt th { font-family: var(--schrift); font-size: 0.75rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--leise); background: transparent; border-bottom: 1px solid var(--b-kante); } .buero:not(.buero--fokus) .buero__inhalt .tabelle-rahmen td { border-top-color: var(--b-kante); padding-block: var(--s3); } .buero:not(.buero--fokus) .buero__inhalt :is(.tabelle-rahmen, table.tabelle) tbody tr { transition: background-color 0.15s; } .buero:not(.buero--fokus) .buero__inhalt :is(.tabelle-rahmen, table.tabelle) tbody tr:hover { background: color-mix(in srgb, var(--aktion-zart) 45%, transparent); } .buero:not(.buero--fokus) .buero__inhalt td a { font-weight: 600; } /* Zustände: weiche Plaketten ohne Punkt und ohne Rand (Florian: keine Punkte, keine Kästchen) */ .buero:not(.buero--fokus) .stempel { gap: var(--s1); padding: 0 var(--s2); min-height: 22px; border: 0; border-radius: var(--r-pille); background: color-mix(in srgb, currentColor 12%, transparent); font-family: var(--schrift); font-size: 0.75rem; font-weight: 600; letter-spacing: 0; text-transform: none; } .buero:not(.buero--fokus) .stempel:not([class*="stempel--"]) { color: var(--leise); } .buero:not(.buero--fokus) .stempel--gesperrt { border: 0; } .buero:not(.buero--fokus) .buero__inhalt .marke { min-height: 22px; padding: 0 var(--s2); font-size: 0.75rem; } /* Felder: weich, deutliche Fokuskante */ .buero:not(.buero--fokus) .buero__inhalt :is(.eingabe, input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="submit"], [type="color"], [type="range"]), select, textarea) { border-color: var(--b-kante-stark); border-radius: var(--r); background-color: var(--flaeche); transition: border-color 0.15s, box-shadow 0.15s; } .buero:not(.buero--fokus) .buero__inhalt :is(.eingabe, input, select, textarea):hover:not(:disabled, [type="checkbox"], [type="radio"]) { border-color: color-mix(in srgb, var(--tinte) 34%, transparent); } .buero:not(.buero--fokus) .buero__inhalt :is(.eingabe, input, select, textarea):focus-visible { outline: 0; border-color: var(--aktion); box-shadow: 0 0 0 4px color-mix(in srgb, var(--aktion) 18%, transparent); } .buero:not(.buero--fokus) .feld > label, .buero:not(.buero--fokus) .feld__titel, .buero:not(.buero--fokus) .buero__inhalt legend { font-weight: 600; letter-spacing: -0.005em; } .buero:not(.buero--fokus) .feld__stufe:not(.feld__stufe--pflicht, .feld__stufe--anlegen) { font-family: var(--schrift); font-size: 0.7rem; letter-spacing: 0; text-transform: none; border: 0; border-radius: var(--r-pille); padding: var(--s1) var(--s2); background: color-mix(in srgb, currentColor 10%, transparent); } /* Auswahl: Chips voll rund, gewählt gefüllt; Wahlkacheln wie Karten */ .buero:not(.buero--fokus) .chip { border-color: var(--b-kante-stark); transition: background-color 0.15s, border-color 0.15s, color 0.15s; } .buero:not(.buero--fokus) .chip:hover { border-color: var(--aktion); } .buero:not(.buero--fokus) :is(.chip[aria-pressed="true"], .chip:has(> input:checked)) { background: var(--aktion); border-color: var(--aktion); color: var(--aktion-auf); } .buero:not(.buero--fokus) .wahlkachel { border-color: var(--b-kante-stark); border-radius: var(--r-l); } .buero:not(.buero--fokus) :is(.wahlkachel[aria-pressed="true"], .wahlkachel[aria-checked="true"], .wahlkachel:has(> input:checked)) { border: 1px solid var(--aktion); background: var(--aktion-zart); box-shadow: 0 0 0 1px var(--aktion); } /* Reiter: als ruhige Segmente, der offene Teil hebt sich ab */ .buero:not(.buero--fokus) .buero__inhalt .reiter { display: flex; flex-wrap: wrap; gap: var(--s1); inline-size: fit-content; max-inline-size: 100%; padding: var(--s1); border: 1px solid var(--b-kante); border-bottom: 1px solid var(--b-kante); border-radius: var(--r-pille); background: color-mix(in srgb, var(--flaeche-2) 70%, transparent); overflow: visible; } .buero:not(.buero--fokus) .buero__inhalt .reiter > :is(a, button) { display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--s4); border: 0; border-radius: var(--r-pille); background: none; color: var(--leise); font-weight: 600; font-size: 0.875rem; text-decoration: none; box-shadow: none; } .buero:not(.buero--fokus) .buero__inhalt .reiter > :is(a, button):hover { color: var(--tinte); } .buero:not(.buero--fokus) .buero__inhalt .reiter > :is(a[aria-current="page"], button[aria-selected="true"]) { background: var(--flaeche); color: var(--tinte); box-shadow: 0 1px 3px color-mix(in srgb, var(--tinte) 12%, transparent); } .buero:not(.buero--fokus) .buero__inhalt .reiter > :is(a, button)::after { display: none; } /* Hinweise: getönte Fläche, Haarlinie in der Bedeutung */ .buero:not(.buero--fokus) .hinweis { border-left: 0; border: 1px solid color-mix(in srgb, var(--etikett) 45%, transparent); border-radius: var(--r-l); background: color-mix(in srgb, var(--etikett) 14%, var(--flaeche)); } .buero:not(.buero--fokus) .hinweis--aktion { border-color: color-mix(in srgb, var(--aktion) 25%, transparent); background: color-mix(in srgb, var(--aktion-zart) 70%, var(--flaeche)); } .buero:not(.buero--fokus) .hinweis--fehler { border-color: color-mix(in srgb, var(--fehler) 30%, transparent); background: var(--fehler-zart); } /* Leere Zustände und Zeilenlisten */ .buero:not(.buero--fokus) .leer { color: var(--leise); } .buero:not(.buero--fokus) .heute__zeile { border-top-color: var(--b-kante); } /* Ein einziger Bewegungsmoment: auf Heute treten die drei Kacheln oben nacheinander ein. Alles andere steht sofort. */ @media (prefers-reduced-motion: no-preference) { .buero:not(.buero--fokus) .heute__fokus > * { animation: buero-auf 0.5s var(--b-weich) both; } .buero:not(.buero--fokus) .heute__fokus > :nth-child(2) { animation-delay: 0.06s; } .buero:not(.buero--fokus) .heute__fokus > :nth-child(3) { animation-delay: 0.12s; } .buero:not(.buero--fokus) .heute__fokus > :nth-child(n+4) { animation-delay: 0.18s; } } @keyframes buero-auf { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } } /* Wegzeilen (etwa „Mieten · Leistungen · Objekte“): kleine runde Verweise statt unterstrichener Wörter */ .buero:not(.buero--fokus) .buero__inhalt nav.reihe > a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--s3); border: 1px solid var(--b-kante-stark); border-radius: var(--r-pille); background: var(--flaeche); color: var(--tinte); font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: border-color 0.15s, background-color 0.15s; } .buero:not(.buero--fokus) .buero__inhalt nav.reihe > a:hover { border-color: var(--aktion); background: var(--aktion-zart); } .buero:not(.buero--fokus) .buero__inhalt nav.reihe > a[aria-current="page"] { background: var(--aktion); border-color: var(--aktion); color: var(--aktion-auf); } /* Heute: Fokusband, Tageslauf mit „jetzt“, was Sie braucht, Woche als Balken */ .buero:not(.buero--fokus) .heute__fokus { display: flex; flex-wrap: wrap; } .buero:not(.buero--fokus) .heute__fokus > * { flex: 1 1 10rem; min-inline-size: 0; } .buero:not(.buero--fokus) .heute__fokus > .heute__naechster { flex: 1.8 1 16rem; } .buero:not(.buero--fokus) .heute__naechster b { font-size: 2.3rem; } .buero:not(.buero--fokus) .heute__naechster span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .buero:not(.buero--fokus) .zeitplan__jetzt { display: flex; align-items: center; gap: var(--s2); list-style: none; color: var(--fehler); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .buero:not(.buero--fokus) .zeitplan__jetzt::after { content: ""; flex: 1; block-size: 2px; border-radius: var(--r-pille); background: var(--fehler); } .buero:not(.buero--fokus) .zeitplan__eintrag--vorbei { opacity: 0.55; } .buero:not(.buero--fokus) .zeitplan__eintrag--naechster > a b { color: var(--aktion); } .buero:not(.buero--fokus) .heute__leer { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) 0; color: var(--leise); } .buero:not(.buero--fokus) .heute__leer > .ph { flex: none; color: var(--aktion); font-size: 1.5rem; } .buero:not(.buero--fokus) .heute__leer p { margin: 0; } .buero:not(.buero--fokus) .heute__leer b { color: var(--tinte); } .buero:not(.buero--fokus) .heute__filterklappe > summary { list-style: none; inline-size: fit-content; } .buero:not(.buero--fokus) .heute__filterklappe > summary::-webkit-details-marker { display: none; } .buero:not(.buero--fokus) .heute__filterklappe[open] > form { margin-top: var(--s3); } .buero:not(.buero--fokus) .braucht { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); } .buero:not(.buero--fokus) .braucht a { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s2) var(--s3); border-radius: var(--r); color: var(--tinte); text-decoration: none; transition: background-color 0.15s; } .buero:not(.buero--fokus) .braucht a:hover { background: var(--flaeche-2); } .buero:not(.buero--fokus) .braucht b { display: grid; place-items: center; block-size: 2.2rem; border-radius: var(--r); background: var(--fehler-zart); color: var(--fehler); font-variant-numeric: tabular-nums; } .buero:not(.buero--fokus) .braucht span { display: grid; font-weight: 600; } .buero:not(.buero--fokus) .braucht small { color: var(--leise); font-weight: 400; font-size: 0.8rem; } .buero:not(.buero--fokus) .braucht .ph { color: var(--leise); } .buero:not(.buero--fokus) .wochenbalken { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s2); block-size: 9rem; } .buero:not(.buero--fokus) .wochenbalken__tag a { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; justify-items: center; gap: var(--s1); block-size: 100%; color: var(--leise); text-decoration: none; font-size: 0.75rem; } .buero:not(.buero--fokus) .wochenbalken__tag a > :first-child { align-self: end; } .buero:not(.buero--fokus) .wochenbalken__balken { display: block; inline-size: 100%; max-inline-size: 2rem; border-radius: var(--r-s); background: color-mix(in srgb, var(--aktion) 28%, transparent); transition: background-color 0.15s; } .buero:not(.buero--fokus) .wochenbalken__tag a:hover .wochenbalken__balken { background: color-mix(in srgb, var(--aktion) 50%, transparent); } .buero:not(.buero--fokus) .wochenbalken__tag--heute .wochenbalken__balken { background: var(--aktion); } .buero:not(.buero--fokus) .wochenbalken__tag b { color: var(--tinte); font-variant-numeric: tabular-nums; } .buero:not(.buero--fokus) .wochenbalken__tag--heute small { color: var(--aktion); font-weight: 600; } .buero:not(.buero--fokus) .wochenbalken__balken--0 { block-size: 4%; } .buero:not(.buero--fokus) .wochenbalken__balken--1 { block-size: 10%; } .buero:not(.buero--fokus) .wochenbalken__balken--2 { block-size: 20%; } .buero:not(.buero--fokus) .wochenbalken__balken--3 { block-size: 30%; } .buero:not(.buero--fokus) .wochenbalken__balken--4 { block-size: 40%; } .buero:not(.buero--fokus) .wochenbalken__balken--5 { block-size: 50%; } .buero:not(.buero--fokus) .wochenbalken__balken--6 { block-size: 60%; } .buero:not(.buero--fokus) .wochenbalken__balken--7 { block-size: 70%; } .buero:not(.buero--fokus) .wochenbalken__balken--8 { block-size: 80%; } .buero:not(.buero--fokus) .wochenbalken__balken--9 { block-size: 90%; } .buero:not(.buero--fokus) .wochenbalken__balken--10 { block-size: 100%; } .buero:not(.buero--fokus) a:is(.kennzahl, .uebersichtskachel, .aktionskachel) { text-decoration: none; } .buero:not(.buero--fokus) :is(.kennzahl--hervor, .uebersichtskachel--hervor, .uebersichtskachel--aktiv) > small:first-child, .buero:not(.buero--fokus) :is(.uebersichtskachel--hervor, .uebersichtskachel--aktiv) .uebersichtskachel__kopf { color: color-mix(in srgb, var(--aktion-auf) 85%, transparent); } /* Tabellen mit höchstens vier Spalten (Florian 13.10.2026): Nebenangaben stehen leise unter dem Namen der ersten Zelle. */ .buero:not(.buero--fokus) .zelle { display: flex; align-items: flex-start; gap: var(--s3); min-width: 0; } .buero:not(.buero--fokus) .zelle > input[type="checkbox"] { margin-top: var(--s1); flex: none; } .buero:not(.buero--fokus) .zelle__text { display: grid; gap: var(--s1); min-width: 0; } .buero:not(.buero--fokus) .zelle__meta { color: var(--leise); font-size: 0.8rem; line-height: 1.35; } .buero:not(.buero--fokus) .zelle__meta .artmarke { font-size: 0.8rem; } /* Walk-in: eine Kachel mit Plus neben den Kennzahlen */ .buero:not(.buero--fokus) .heute__walkin b { display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border-radius: var(--r-pille); background: var(--aktion); color: var(--aktion-auf); font-size: 1.3rem; } .buero:not(.buero--fokus) .heute__walkin > small:first-child { color: var(--aktion); font-weight: 600; } /* Rundgang mit dem Taste-Skill (13.10.2026): eigenständiger, ohne lauter zu werden. */ /* Gewählte Filterkachel: getönt mit Akzentkante statt voll gefüllt; gefüllt bleibt nur, was ausdrücklich hervorgehoben ist. */ .buero:not(.buero--fokus) .uebersichtskachel--aktiv { background: color-mix(in srgb, var(--aktion-zart) 75%, var(--flaeche)); color: var(--tinte); border-color: color-mix(in srgb, var(--aktion) 45%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aktion) 45%, transparent); } .buero:not(.buero--fokus) .uebersichtskachel--aktiv :is(small, span, b, .uebersichtskachel__kopf, .ph) { color: var(--tinte); } .buero:not(.buero--fokus) .uebersichtskachel--aktiv .uebersichtskachel__kopf, .buero:not(.buero--fokus) .uebersichtskachel--aktiv .ph { color: var(--aktion); } .buero:not(.buero--fokus) .uebersichtskachel--aktiv :is(small, span):not(:first-child) { color: var(--leise); } /* Leere Zustände: ruhig gesetzt, mit Symbol, statt grauem Satz im Kasten */ .buero:not(.buero--fokus) :is(.leer, .leerzustand, .karte > p.feld__hilfe:only-child, .karte > h2 + p.feld__hilfe:last-child, .buero__inhalt > p.karte) { display: flex; align-items: center; gap: var(--s3); margin: 0; padding: var(--s3) 0; color: var(--leise); font-size: 0.925rem; } .buero:not(.buero--fokus) :is(.leer, .leerzustand, .karte > p.feld__hilfe:only-child, .karte > h2 + p.feld__hilfe:last-child, .buero__inhalt > p.karte)::before { content: "\e4aa"; font-family: "Phosphor"; flex: none; color: var(--aktion); font-size: 1.4rem; line-height: 1; } .buero:not(.buero--fokus) .heute__leer::before { content: none; } /* Walk-in am Handy als flache Zeile: Plus links, Text rechts */ @media (max-width: 40rem) { .buero:not(.buero--fokus) .heute__walkin { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "plus titel" "plus text"; column-gap: var(--s3); align-items: center; } .buero:not(.buero--fokus) .heute__walkin b { grid-area: plus; } .buero:not(.buero--fokus) .heute__walkin > small:first-child { grid-area: titel; } .buero:not(.buero--fokus) .heute__walkin span { grid-area: text; } } .buero:not(.buero--fokus) .buero__inhalt > p.karte { padding: var(--s4) var(--s5); } .buero:not(.buero--fokus) .formular-raster > :is(.eingabe, input, select, textarea) { inline-size: 100%; max-inline-size: none; } /* In Tabellen keine Kästchen und keine Punkte (Florian 13.10.2026): Zustände als Wort in weicher Fläche, Schalter als Chips. */ .buero:not(.buero--fokus) .buero__inhalt td :is(.stempel, .artmarke)::before { content: none; } .buero:not(.buero--fokus) .buero__inhalt td .artmarke { font-weight: 600; } .buero:not(.buero--fokus) .schalterchip { position: relative; } .buero:not(.buero--fokus) .schalterchip > input[type="checkbox"] { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; } .buero:not(.buero--fokus) .schalterchip:has(> input:focus-visible) { outline: 2px solid var(--aktion); outline-offset: 2px; } .buero:not(.buero--fokus) .buero__inhalt td :is(.marke, .stempel) { inline-size: fit-content; } /* Über der Überschrift nichts Klickbares: kein Rückweg-Link, keine Reiter (Florian 13.10.2026). */ .buero:not(.buero--fokus) .buero__inhalt > .seitenkopf { order: -1; } .buero:not(.buero--fokus) .seitenkopf > div:first-child > p:first-child:has(> a:only-child) { display: none; } .buero:not(.buero--fokus) .seitenkopf > :is(.ueberzeile, .ueber):has(a) { display: none; } /* Leiste einklappen: der Knopf sitzt in der Leiste selbst (sie ist am Desktop sticky und damit Bezugsrahmen), die Kopfzeile bleibt frei */ .buero:not(.buero--fokus) .leiste__klappe { display: none; } @media (min-width: 60rem) { .buero:not(.buero--fokus) .leiste__klappe { position: absolute; inset: var(--s4) var(--s3) auto auto; display: grid; place-items: center; inline-size: 32px; block-size: 32px; padding: 0; border: 0; border-radius: var(--r); background: color-mix(in srgb, var(--leiste-auf) 12%, transparent); color: var(--leiste-auf); cursor: pointer; } .buero:not(.buero--fokus) .leiste__klappe:hover { background: color-mix(in srgb, var(--leiste-auf) 22%, transparent); } .buero:not(.buero--fokus) .leiste__klappe:focus-visible { outline: 2px solid var(--leiste-auf); outline-offset: 2px; } :root[data-leiste="eng"] .buero:not(.buero--fokus) .leiste__klappe { position: static; justify-self: center; } .buero:not(.buero--fokus) .buero-leiste .marke { padding-inline-end: var(--s8); } :root[data-leiste="eng"] .buero:not(.buero--fokus) .buero-leiste .marke { padding-inline-end: var(--s1); } } /* Seitenkopf überall gleich (Florian 13.10.2026: „den Hero überall gleich clean“): links Titel und eine leise Zeile darunter, rechts die Knöpfe, oben bündig; nichts Kleines über dem Titel. */ .buero:not(.buero--fokus) .seitenkopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--s3) var(--s5); margin: 0; padding: 0 0 var(--s1); } .buero:not(.buero--fokus) .seitenkopf:has(> h1) { display: grid; justify-content: stretch; gap: var(--s1); } .buero:not(.buero--fokus) .seitenkopf > div:first-child { display: grid; gap: var(--s1); flex: 1 1 24rem; min-width: 0; } .buero:not(.buero--fokus) .seitenkopf :is(p, .ueberzeile):has(+ h1) { display: none; } .buero:not(.buero--fokus) .seitenkopf h1 { margin: 0; } .buero:not(.buero--fokus) .seitenkopf h1 ~ p { margin: 0; max-inline-size: 62ch; color: var(--leise); font-size: 0.975rem; line-height: 1.5; } .buero:not(.buero--fokus) .seitenkopf h1 ~ p:has(.artmarke, .stempel) { color: var(--leise); font-size: 0.875rem; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); } .buero:not(.buero--fokus) .seitenkopf > :is(.reihe, .knopf, form, a) { flex: 0 0 auto; margin-top: var(--s1); } .buero:not(.buero--fokus) .seitenkopf > .reihe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2); } .buero:not(.buero--fokus) .buero__inhalt > h1:first-child { margin: 0; } /* Lange Auswahllisten (etwa Ausstattung eines Mietwagens): erst das Gewählte und wenige, der Rest auf Wunsch. */ .buero:not(.buero--fokus) .chips:not(.chips--alle) > .chip--spaeter { display: none; } .buero:not(.buero--fokus) .chip--mehr { border-style: dashed; color: var(--aktion); font-weight: 600; background: transparent; } /* Seitenköpfe ohne Hülle um Titel und Zeile: Knöpfe trotzdem oben rechts neben dem Titel. */ .buero:not(.buero--fokus) .seitenkopf:has(> h1) { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s5); } .buero:not(.buero--fokus) .seitenkopf:has(> h1) > :not(.knopf, .reihe, form) { grid-column: 1; } .buero:not(.buero--fokus) .seitenkopf:has(> h1) > :is(.knopf, .reihe, form) { grid-column: 2; grid-row: 1 / span 3; align-self: start; } .buero:not(.buero--fokus) .seitenkopf > :is(.reihe, form) { flex: 0 1 auto; min-width: 0; max-inline-size: 100%; } /* Angebotsmaske nach dem Taste-Rundgang: Status im Kopf, „Online stellen“ mit Fortschritt, Bausteine als Badges. */ .buero:not(.buero--fokus) .statuschip { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s4); border-radius: var(--r-pille); font-weight: 600; font-size: 0.875rem; text-decoration: none; white-space: nowrap; } .buero:not(.buero--fokus) .statuschip--offen { background: var(--gehalten-zart); color: var(--gehalten); } .buero:not(.buero--fokus) .statuschip--bereit { background: var(--frei-zart); color: var(--frei); } .buero:not(.buero--fokus) .statuschip:hover { filter: brightness(0.97); } .buero:not(.buero--fokus) .fortschritt { block-size: 8px; border-radius: var(--r-pille); background: var(--flaeche-2); overflow: hidden; } .buero:not(.buero--fokus) .fortschritt__balken { display: block; block-size: 100%; border-radius: var(--r-pille); background: var(--aktion); } .buero:not(.buero--fokus) .fortschritt__balken--0 { inline-size: 0%; } .buero:not(.buero--fokus) .fortschritt__balken--1 { inline-size: 10%; } .buero:not(.buero--fokus) .fortschritt__balken--2 { inline-size: 20%; } .buero:not(.buero--fokus) .fortschritt__balken--3 { inline-size: 30%; } .buero:not(.buero--fokus) .fortschritt__balken--4 { inline-size: 40%; } .buero:not(.buero--fokus) .fortschritt__balken--5 { inline-size: 50%; } .buero:not(.buero--fokus) .fortschritt__balken--6 { inline-size: 60%; } .buero:not(.buero--fokus) .fortschritt__balken--7 { inline-size: 70%; } .buero:not(.buero--fokus) .fortschritt__balken--8 { inline-size: 80%; } .buero:not(.buero--fokus) .fortschritt__balken--9 { inline-size: 90%; } .buero:not(.buero--fokus) .fortschritt__balken--10 { inline-size: 100%; } .buero:not(.buero--fokus) .fortschritt__text { margin: 0; color: var(--leise); font-size: 0.875rem; } .buero:not(.buero--fokus) .fortschritt__text b { color: var(--tinte); } .buero:not(.buero--fokus) .pruefliste__punkte:empty { display: none; } .buero:not(.buero--fokus) .pruefliste__punkte li.offen { padding: var(--s2) var(--s3); border-radius: var(--r); background: var(--gehalten-zart); list-style: none; } .buero:not(.buero--fokus) .pruefliste__punkte li.offen small { color: var(--leise); } .buero:not(.buero--fokus) .pruefliste__erledigt > summary { color: var(--frei); font-size: 0.875rem; } .buero:not(.buero--fokus) .pruefliste__erledigt li.erfuellt { color: var(--leise); font-size: 0.875rem; } .buero:not(.buero--fokus) .bausteine { display: flex; flex-wrap: wrap; gap: var(--s2); } .buero:not(.buero--fokus) .bausteine > form { margin: 0; } .buero:not(.buero--fokus) .baustein { flex: 0 1 auto; } .buero:not(.buero--fokus) .baustein[open] { flex-basis: 100%; padding: var(--s3) var(--s4) var(--s4); border: 1px solid var(--b-kante); border-radius: var(--r-l); background: var(--flaeche); } .buero:not(.buero--fokus) .baustein__badge, .buero:not(.buero--fokus) .buero__inhalt details.baustein > summary.baustein__badge { display: inline-flex; align-items: center; gap: var(--s1); min-height: 36px; margin: 0; padding: 0 var(--s4); border: 1px solid color-mix(in srgb, var(--aktion) 35%, transparent); border-radius: var(--r-pille); background: var(--aktion-zart); color: var(--aktion); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; list-style: none; } .buero:not(.buero--fokus) details.baustein > summary.baustein__badge::before { content: none; } .buero:not(.buero--fokus) .baustein__badge small { color: inherit; opacity: 0.75; font-weight: 500; } .buero:not(.buero--fokus) .baustein__badge--neu { background: var(--flaeche); border-color: var(--b-kante-stark); border-style: dashed; color: var(--tinte); } .buero:not(.buero--fokus) .baustein__badge--neu:hover { border-color: var(--aktion); color: var(--aktion); } .buero:not(.buero--fokus) .hinzufuegen__gruppe { display: grid; gap: var(--s2); margin-top: var(--s3); } .buero:not(.buero--fokus) .hinzufuegen__gruppe > b { font-size: 0.8rem; color: var(--leise); font-weight: 600; } /* Kästchen gibt es im Büro nicht (Florian 13.10.2026): Ein beschriftetes Kästchen ist ein Badge, ein freies ein Schalter. */ .buero:not(.buero--fokus) .buero__inhalt label:has(> input[type="checkbox"]):not(.schalter, .chip, .schalterchip, .wahlkachel) { position: relative; display: inline-flex; align-items: center; gap: var(--s2); min-height: 36px; padding: 0 var(--s4); border: 1px solid var(--b-kante-stark); border-radius: var(--r-pille); background: var(--flaeche); color: var(--tinte); font-weight: 500; cursor: pointer; inline-size: fit-content; transition: background-color 0.15s, border-color 0.15s, color 0.15s; } .buero:not(.buero--fokus) .buero__inhalt label:has(> input[type="checkbox"]):not(.schalter, .chip, .schalterchip, .wahlkachel):hover { border-color: var(--aktion); } .buero:not(.buero--fokus) .buero__inhalt label:has(> input[type="checkbox"]:checked):not(.schalter, .chip, .schalterchip, .wahlkachel) { background: var(--aktion); border-color: var(--aktion); color: var(--aktion-auf); } .buero:not(.buero--fokus) .buero__inhalt label:has(> input[type="checkbox"]):not(.schalter, .chip, .schalterchip, .wahlkachel) > input[type="checkbox"] { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; } .buero:not(.buero--fokus) .buero__inhalt label:has(> input[type="checkbox"]:focus-visible):not(.schalter, .chip, .schalterchip, .wahlkachel) { outline: 2px solid var(--aktion); outline-offset: 2px; } .buero:not(.buero--fokus) .buero__inhalt input[type="checkbox"]:not(label > input) { appearance: none; position: relative; inline-size: 40px; block-size: 24px; margin: 0; border-radius: var(--r-pille); background: var(--b-kante-stark); cursor: pointer; transition: background-color 0.15s; flex: none; } .buero:not(.buero--fokus) .buero__inhalt input[type="checkbox"]:not(label > input)::after { content: ""; position: absolute; inset: 3px auto 3px 3px; inline-size: 18px; border-radius: var(--r-pille); background: var(--flaeche); transition: transform 0.15s; } .buero:not(.buero--fokus) .buero__inhalt input[type="checkbox"]:not(label > input):checked { background: var(--aktion); } .buero:not(.buero--fokus) .buero__inhalt input[type="checkbox"]:not(label > input):checked::after { transform: translateX(16px); } /* Auch Auswahlkreise mit Beschriftung sind Badges; gewählt ist gefüllt. */ .buero:not(.buero--fokus) .buero__inhalt label:has(> input[type="radio"]):not(.chip, .wahlkachel, .walkin__wahl, .seg, .eb-karte) { position: relative; display: inline-flex; align-items: center; gap: var(--s2); min-height: 36px; padding: 0 var(--s4); border: 1px solid var(--b-kante-stark); border-radius: var(--r-pille); background: var(--flaeche); color: var(--tinte); font-weight: 500; cursor: pointer; inline-size: fit-content; } .buero:not(.buero--fokus) .buero__inhalt label:has(> input[type="radio"]:checked):not(.chip, .wahlkachel, .walkin__wahl, .seg, .eb-karte) { background: var(--aktion); border-color: var(--aktion); color: var(--aktion-auf); } .buero:not(.buero--fokus) .buero__inhalt label:has(> input[type="radio"]):not(.chip, .wahlkachel, .walkin__wahl, .seg, .eb-karte) > input[type="radio"] { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; } .buero:not(.buero--fokus) .buero__inhalt label:has(> input[type="radio"]:focus-visible):not(.chip, .wahlkachel, .walkin__wahl, .seg, .eb-karte) { outline: 2px solid var(--aktion); outline-offset: 2px; } /* Wenige Badges stehen nebeneinander, nicht untereinander (Florian 13.10.2026): rahmen.js markiert Gruppen, deren Beschriftungen alle Auswahlen sind; Hinweise und Felder darin nehmen eine eigene Zeile. */ .buero:not(.buero--fokus) .buero__inhalt .auswahlzeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); } .buero:not(.buero--fokus) .buero__inhalt .auswahlzeile > :not(label, legend, input[type="hidden"]) { flex-basis: 100%; } /* Arbeitsübersicht Mieten: Kacheln je Angebot, Stücke als Badges (frei grün, belegt mit Zeit) */ .buero:not(.buero--fokus) .mietkacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: var(--s4); } .buero:not(.buero--fokus) .mietkachel h2 a { color: var(--tinte); text-decoration: none; } .buero:not(.buero--fokus) .mietkachel h2 a:hover { color: var(--aktion); } .buero:not(.buero--fokus) .mietkachel__zahl { color: var(--leise); font-size: 0.875rem; white-space: nowrap; } .buero:not(.buero--fokus) .mietkachel__zahl b { color: var(--frei); font-size: 1.1rem; } .buero:not(.buero--fokus) .mietkachel__stuecke { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); } .buero:not(.buero--fokus) .stueckbadge { display: grid; gap: 0; min-inline-size: 6.5rem; padding: var(--s2) var(--s3); border-radius: var(--r); background: var(--frei-zart); color: var(--frei); text-decoration: none; line-height: 1.25; transition: transform 0.15s var(--b-weich); } .buero:not(.buero--fokus) .stueckbadge b { font-size: 0.875rem; color: var(--tinte); } .buero:not(.buero--fokus) .stueckbadge small { font-size: 0.75rem; font-weight: 600; } .buero:not(.buero--fokus) .stueckbadge--belegt { background: var(--gehalten-zart); color: var(--gehalten); } .buero:not(.buero--fokus) .stueckbadge:hover { transform: translateY(-1px); } .buero:not(.buero--fokus) .mietkachel { align-content: start; } .buero:not(.buero--fokus) :is(.kennzahl, .uebersichtskachel) :is(small, span, .uebersichtskachel__kopf) { overflow-wrap: normal; word-break: normal; hyphens: auto; } /* Filterzeilen: Auswahlfelder so breit wie ihr Inhalt, alles in einer Zeile, solange Platz ist */ .buero:not(.buero--fokus) .buero__inhalt form[role="search"] select { field-sizing: content; min-inline-size: 10rem; max-inline-size: 18rem; } @media (min-width: 60rem) { .buero:not(.buero--fokus) .buero__inhalt .filterleiste { flex-wrap: nowrap; } .buero:not(.buero--fokus) .buero__inhalt .filterleiste > * { min-width: 0; } } /* Die Filterzeile ist eine Zeile, kein Formularraster: „Zurücksetzen“ steht rechts neben den Feldern. */ .buero:not(.buero--fokus) .buero__inhalt form.filterleiste { display: flex; align-items: end; } .buero:not(.buero--fokus) .buero__inhalt form.filterleiste > :is(button, .knopf) { grid-column: auto; } /* Formulare glatt (Rundgang 13.10.2026): Ein Formular mit eigenem Raster wird nicht noch einmal in Spalten gesetzt; eine Reihe von Feldern (etwa Von und Bis) nimmt die ganze Breite und steht nebeneinander. */ .buero:not(.buero--fokus) .buero__inhalt form:has(> .formular-raster) { display: block; max-width: none; } .buero:not(.buero--fokus) .buero__inhalt .formular-raster { grid-template-columns: minmax(9rem, 14rem) minmax(12rem, 32rem); } .buero:not(.buero--fokus) .buero__inhalt form:has(> label > :is(input, select, textarea)) > .reihe:has(> label) { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); } .buero:not(.buero--fokus) .buero__inhalt form:has(> label > :is(input, select, textarea)) > .reihe:has(> label) > label { flex: 1 1 12rem; } /* Leere Tabellen: der Satz in der einzigen Zeile wirkt wie ein leerer Zustand */ .buero:not(.buero--fokus) .buero__inhalt tbody tr:only-child > td:only-child, .buero:not(.buero--fokus) .buero__inhalt tbody tr:only-child > td[colspan] { color: var(--leise); padding-block: var(--s4); } /* Was heute dran ist: ohne Zeilen kein Kasten im Kasten */ .buero:not(.buero--fokus) #heute-liste :is(.karte, .leer) { box-shadow: none; } /* Lesemaß: Fließtext bleibt bei etwa 70 Zeichen, auch auf breiten Karten. */ .buero:not(.buero--fokus) .buero__inhalt :is(p:not(.hinweis, .reihe), .feld__hilfe, .rechtstext li) { max-inline-size: 62ch; } /* Mehr Luft über einer Zwischenüberschrift als darunter. */ .buero:not(.buero--fokus) .buero__inhalt .rechtstext > :is(h3, h4) { margin-block: var(--s4) var(--s1); font-size: 1rem; } .buero:not(.buero--fokus) .buero__inhalt .rechtstext > :first-child { margin-block-start: 0; } .buero:not(.buero--fokus) .buero__inhalt .rechtstext > :is(p, ul, ol) { margin-block: 0 var(--s2); } /* Was der Browser sonst selbst zeichnet, trägt die Farbe des Büros. */ .buero:not(.buero--fokus) ::selection { background: color-mix(in srgb, var(--aktion) 26%, transparent); color: var(--tinte); } .buero:not(.buero--fokus) :is(input, textarea) { caret-color: var(--aktion); } .buero:not(.buero--fokus) .buero__inhalt, .buero:not(.buero--fokus) .tabelle-rahmen { scrollbar-width: thin; scrollbar-color: var(--b-kante-stark) transparent; } .buero:not(.buero--fokus) .buero__inhalt a { text-underline-offset: 0.2em; text-decoration-thickness: 1px; } /* Zweizeilige Badges (Titel und Erklärung) sind keine Pillen, sondern weiche Flächen; die Erklärung bleibt auf Akzent lesbar. */ .buero:not(.buero--fokus) .buero__inhalt label:has(> input:is([type="checkbox"], [type="radio"])):has(small):not(.schalter, .chip, .schalterchip, .wahlkachel, .walkin__wahl, .seg, .eb-karte) { border-radius: var(--r); padding: var(--s2) var(--s4); } .buero:not(.buero--fokus) .buero__inhalt label:has(> input:is([type="checkbox"], [type="radio"]):checked) small { color: color-mix(in srgb, var(--aktion-auf) 82%, transparent); } /* Eingabe mit Einheit: die Einheit steht direkt hinter dem Feld, nicht darunter. */ .buero:not(.buero--fokus) .einheitfeld { display: inline-flex; align-items: center; gap: var(--s2); } .buero:not(.buero--fokus) .einheitfeld > .eingabe { inline-size: 8rem; } .buero:not(.buero--fokus) .einheitfeld > span { color: var(--leise); } /* Ausfallgebühr: nur das Feld zur gewählten Art ist zu sehen. */ .buero:not(.buero--fokus) .ausfall:not(:has(input[value="fest"]:checked)) [data-ausfall="fest"], .buero:not(.buero--fokus) .ausfall:not(:has(input[value="prozent"]:checked)) [data-ausfall="prozent"] { display: none; } .buero:not(.buero--fokus) .ausfall__wert { flex-basis: 100%; } /* Klappfelder mit Eingaben: das Feld wächst, der Knopf behält seine Breite. */ .buero:not(.buero--fokus) .chip-plus > .reihe { flex-wrap: wrap; inline-size: 100%; } .buero:not(.buero--fokus) .chip-plus > .reihe > .eingabe { flex: 1 1 12rem; min-inline-size: 0; } .buero:not(.buero--fokus) .chip-plus > .reihe > .knopf { flex: none; } /* Suchfeld der Filterzeile sieht aus wie die Auswahlfelder daneben: gleiche Kante, Schrift und Rundung. */ .buero:not(.buero--fokus) .buero__inhalt .filterleiste__suche { border-color: var(--b-kante-stark); border-radius: var(--r); font-size: 1rem; font-weight: 400; transition: border-color 0.15s, box-shadow 0.15s; } .buero:not(.buero--fokus) .buero__inhalt .filterleiste__suche:hover { border-color: color-mix(in srgb, var(--tinte) 34%, transparent); } .buero:not(.buero--fokus) .buero__inhalt .filterleiste__suche:focus-within { outline: 0; border-color: var(--aktion); box-shadow: 0 0 0 4px color-mix(in srgb, var(--aktion) 18%, transparent); } .buero:not(.buero--fokus) .buero__inhalt .filterleiste__suche input:focus-visible { box-shadow: none; } .buero:not(.buero--fokus) .buero__inhalt .filterleiste__suche input::placeholder { color: var(--leise); font-weight: 400; } /* Keine Karte in der Karte: ein leerer Zustand in einer Karte ist nur Zeile mit Symbol. */ .buero:not(.buero--fokus) .buero__inhalt .karte :is(.leer, .leerzustand) { border: 0; background: none; box-shadow: none; padding-inline: 0; } /* Einstellungen: Gruppen als Listen mit Trennlinien, zwei Spalten auf breiten Bildschirmen. */ .einstellungsgruppen { display: grid; gap: var(--s6) var(--s5); align-items: start; } @media (min-width: 64rem) { .einstellungsgruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .einstellungsabschnitt { display: grid; gap: var(--s3); } .einstellungsabschnitt > h2 { font-size: 0.95rem; font-weight: 600; color: var(--leise); letter-spacing: 0; } .einstellungsliste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--b-kante); border-radius: var(--r-l); background: var(--flaeche); overflow: hidden; } .einstellungsliste > li { display: grid; gap: var(--s2); } .einstellungsliste > li + li { border-top: 1px solid var(--b-kante); } .einstellungszeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3); min-height: 64px; padding: var(--s3) var(--s4); color: var(--tinte); text-decoration: none; transition: background-color 0.15s; } .einstellungszeile:hover { background: color-mix(in srgb, var(--aktion-zart) 55%, transparent); } .einstellungszeile > .ph:first-child { color: var(--aktion); font-size: 1.4rem; inline-size: 1.5rem; text-align: center; } .einstellungszeile > span { display: grid; gap: var(--s1); } .einstellungszeile b { font-weight: 600; } .einstellungszeile small { color: var(--leise); font-size: 0.82rem; line-height: 1.4; } .einstellungszeile__pfeil { color: var(--leise); transition: transform 0.2s var(--b-weich); } .einstellungszeile:hover .einstellungszeile__pfeil { transform: translateX(3px); color: var(--aktion); } .einstellungszeile__zusatz { justify-self: start; margin: 0 var(--s4) var(--s3) var(--s8); } /* Mehrteilige Felder (Steuer, Kaution) brechen um, bevor eine Auswahl abgeschnitten wird. */ .buero:not(.buero--fokus) .buero__inhalt .teile { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--s3); } /* Ein Feldname ist kein Verweis: „oder neue Kategorie“ steht in Textfarbe, nicht in Akzentblau. */ .buero:not(.buero--fokus) .buero__inhalt .eigener-wert label { color: var(--leise); font-weight: 500; } .buero:not(.buero--fokus) .hilfe__support { justify-self: start; } /* Keine Karte in der Karte: Kennzahlen innerhalb einer Karte sind schlichte Zahlen, getrennt durch eine Haarlinie. */ .buero:not(.buero--fokus) .buero__inhalt .karte .kennzahlen { gap: 0; } .buero:not(.buero--fokus) .buero__inhalt .karte .kennzahl { border: 0; border-radius: 0; background: none; box-shadow: none; padding: var(--s1) var(--s4); } .buero:not(.buero--fokus) .buero__inhalt .karte .kennzahl:first-child { padding-inline-start: 0; } .buero:not(.buero--fokus) .buero__inhalt .karte .kennzahl + .kennzahl { border-inline-start: 1px solid var(--b-kante); } /* Alle Knöpfe im Seitenkopf haben dieselbe Größe, auch wenn die Vorlage einen kleinen verlangt. */ .buero:not(.buero--fokus) .buero__inhalt .seitenkopf > .knopf, .buero:not(.buero--fokus) .buero__inhalt .seitenkopf > .reihe > .knopf, .buero:not(.buero--fokus) .buero__inhalt .seitenkopf > .reihe > .aktionen > summary.knopf { font-size: 1rem; min-height: 44px; padding-inline: var(--s5); } /* Durchsicht Florian 14.10.2026: eine Fläche für alle Kacheln, keine Karte in der Karte, Leiste bis unten. */ .buero:not(.buero--fokus) .uebersichtskachel--aktiv { background: var(--flaeche); border-color: var(--aktion); box-shadow: inset 0 0 0 1px var(--aktion); } .buero:not(.buero--fokus) .kennzahl--betont, .buero:not(.buero--fokus) .karte--betont { background: var(--flaeche); border-color: var(--b-kante); } .buero:not(.buero--fokus) .aktionskachel--erledigt { background: var(--flaeche); } .buero:not(.buero--fokus) .uebersichtskachel--neu:hover { background: var(--flaeche); } .buero:not(.buero--fokus) .buero__inhalt .karte .karte { border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 0; } .buero:not(.buero--fokus) .aktionskachel { align-content: start; } .buero:not(.buero--fokus) .aktionskachel:has(> .ph:first-child) { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s2); align-items: baseline; } .buero:not(.buero--fokus) .aktionskachel:has(> .ph:first-child) > small { grid-column: 2; } .wetterkarte__standort > span { display: grid; gap: var(--s1); } @media (min-width: 60rem) { /* Die Leiste klebt beim Scrollen; dahinter läuft ihre Farbe bis zum Seitenende weiter. */ .buero:not(.buero--fokus) { background: linear-gradient(to right, var(--leiste-grund, var(--aktion)) 16rem, transparent 16rem); } :root[data-leiste="eng"] .buero:not(.buero--fokus) { background: linear-gradient(to right, var(--leiste-grund, var(--aktion)) 4rem, transparent 4rem); } } /* Eine Auswahl und ihr Knopf stehen in einer Zeile. */ .buero:not(.buero--fokus) .buero__inhalt .formular--zeile { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s3); } .buero:not(.buero--fokus) .buero__inhalt .formular--zeile > .feld { flex: 1 1 18rem; max-inline-size: 28rem; } /* Geöffnete Maske in einer Karte: abgesetzt durch eine Linie statt durch einen zweiten Rahmen mit Leuchten. */ .buero:not(.buero--fokus) .buero__inhalt .maske { border-color: var(--b-kante); box-shadow: none; } .buero:not(.buero--fokus) .buero__inhalt .karte .maske { border: 0; border-block-start: 1px solid var(--b-kante); border-radius: 0; padding: var(--s5) 0 0; margin-block-start: var(--s4); } /* Etiketten in Tabellen brechen nicht mitten im Wort. */ .buero:not(.buero--fokus) .buero__inhalt td { hyphens: manual; } .buero:not(.buero--fokus) .buero__inhalt td :is(.chip, .plakette, .stempel, .badge) { white-space: nowrap; } .buero:not(.buero--fokus) .buero__inhalt td .aktionen--zeile { display: inline-block; } /* Freigabe und Speichern am Ende eines Formulars: untereinander mit Luft, nicht aneinandergeklebt. */ .buero:not(.buero--fokus) .formular__ende { display: grid; gap: var(--s4); margin-block-start: var(--s5); padding-block-start: var(--s4); border-block-start: 1px solid var(--b-kante); } /* Hilfe: Themen links (klebend), Artikel rechts als ruhige Abschnitte mit Linie dazwischen. */ .buero:not(.buero--fokus) .hilfe__suche { display: flex; align-items: center; gap: var(--s2); position: relative; } .buero:not(.buero--fokus) .hilfe__suche > .ph { position: absolute; inset-inline-start: var(--s3); color: var(--leise); pointer-events: none; } .buero:not(.buero--fokus) .hilfe__suche .eingabe { inline-size: min(22rem, 60vw); padding-inline-start: var(--s7); } .buero:not(.buero--fokus) .hilfe { display: grid; gap: var(--s6); align-items: start; } .buero:not(.buero--fokus) .hilfe__themen { display: grid; gap: var(--s2); } .buero:not(.buero--fokus) .hilfe__themen > p { margin: 0; font-size: 0.78rem; font-weight: 600; color: var(--leise); text-transform: uppercase; letter-spacing: 0.06em; } .buero:not(.buero--fokus) .hilfe__themen ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); } .buero:not(.buero--fokus) .hilfe__themen a { display: block; padding: var(--s2) var(--s3); border-radius: var(--r); color: var(--tinte); text-decoration: none; font-size: 0.92rem; } .buero:not(.buero--fokus) .hilfe__themen a:hover { background: var(--flaeche); color: var(--aktion); } .buero:not(.buero--fokus) .hilfe__artikel { display: grid; border: 1px solid var(--b-kante); border-radius: var(--r-l); background: var(--flaeche); } .buero:not(.buero--fokus) .hilfe__thema { display: grid; gap: var(--s3); padding: var(--s6); scroll-margin-top: var(--s6); } .buero:not(.buero--fokus) .hilfe__thema + .hilfe__thema { border-block-start: 1px solid var(--b-kante); } .buero:not(.buero--fokus) .hilfe__thema > h2 { margin: 0; font-size: 1.35rem; letter-spacing: -0.01em; } .buero:not(.buero--fokus) .hilfe__thema .rechtstext { display: grid; gap: var(--s2); } .buero:not(.buero--fokus) .hilfe__thema .rechtstext :is(h3, h4) { margin: var(--s3) 0 0; font-size: 1rem; } .buero:not(.buero--fokus) .hilfe__thema .rechtstext :is(p, ul, ol) { margin: 0; line-height: 1.6; } .buero:not(.buero--fokus) .hilfe__thema .hilfe__support { justify-self: start; margin-block-start: var(--s2); } @media (min-width: 64rem) { .buero:not(.buero--fokus) .hilfe { grid-template-columns: 15rem minmax(0, 1fr); } .buero:not(.buero--fokus) .hilfe__themen { position: sticky; top: var(--s6); } } /* Detailseiten: alle Kacheln eines Vorgangs in einer Reihe gleich breiter Kacheln; Hinweise und Klappen darunter. */ .buero:not(.buero--fokus) .akte__jetzt { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: stretch; } .buero:not(.buero--fokus) .akte__jetzt > ul.aktionskacheln { display: contents; } .buero:not(.buero--fokus) .akte__jetzt > ul.aktionskacheln > li { display: grid; flex: 1 1 12rem; max-inline-size: 18rem; list-style: none; } .buero:not(.buero--fokus) .akte__jetzt > :not(ul.aktionskacheln) { flex: 1 0 100%; order: 2; max-inline-size: none; } .buero:not(.buero--fokus) .akte__jetzt > .akte__jetzt-titel { order: 0; } .buero:not(.buero--fokus) .aktionskacheln > li > :is(.aktionskachel, .kachelmaske) { block-size: 100%; } /* Titelbild der Akte: im Inhalt, abgerundet, die Kacheln stehen darunter statt darüber. */ .buero:not(.buero--fokus) .titelband { margin-inline: 0; border-radius: var(--r-l); } .buero:not(.buero--fokus) .titelband > img { block-size: clamp(10rem, 22vw, 18rem); } .buero:not(.buero--fokus) .titelband + :not(.hinweis, [hidden]), .buero:not(.buero--fokus) .titelband:has(.titelband__leer) + :not(.hinweis, [hidden]) { margin-block-start: 0; } .buero:not(.buero--fokus) .sortiment__form > .sortiment__wahl { inline-size: 100%; max-inline-size: none; } .einstellungsliste > li.automationszeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s4); padding: var(--s4); } .automationszeile > span { display: grid; gap: var(--s1); } .automationszeile small { color: var(--leise); font-size: 0.85rem; line-height: 1.4; } .automationszeile .schalter { min-inline-size: 4.5rem; } .automationszeile > form { justify-self: end; } /* Sammelaktion unter der Liste: eine ruhige Zeile, gilt für alle gezeigten Angebote. */ .buero:not(.buero--fokus) .buero__inhalt .mehrfach { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-block-start: var(--s3); } .buero:not(.buero--fokus) .buero__inhalt .mehrfach label { font-size: 0.9rem; color: var(--leise); } .buero:not(.buero--fokus) .buero__inhalt .mehrfach .eingabe { inline-size: auto; min-inline-size: 14rem; } /* Unterseiten eines Bereichs: eine ruhige Zeile unter der Überschrift (statt Reitern darüber oder Kacheln darunter). */ .buero:not(.buero--fokus) .teilnav { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin-block: calc(-1 * var(--s2)) var(--s2); } .buero:not(.buero--fokus) .teilnav a { padding: var(--s1) var(--s3); border: 1px solid var(--b-kante); border-radius: var(--r-pille); background: var(--flaeche); color: var(--tinte); font-size: 0.875rem; font-weight: 500; text-decoration: none; } .buero:not(.buero--fokus) .teilnav a:hover { border-color: var(--aktion); color: var(--aktion); } /* Kein grauer Balken hinter Badges (Florian 14.10.2026): Auswahlgruppen und Umschalter sind freie Badges in einer Reihe; das gewählte ist gefüllt, die übrigen haben eine Kante. */ .buero:not(.buero--fokus) .buero__inhalt :is(.segment, .segment--verweise, .reiter) { display: flex; flex-wrap: wrap; gap: var(--s2); inline-size: auto; max-inline-size: 100%; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } .buero:not(.buero--fokus) .buero__inhalt :is(.segment > button, .segment--wahl > label, .segment--verweise > a, .reiter > a, .reiter > button) { display: inline-flex; align-items: center; justify-content: center; min-block-size: 36px; padding: 0 var(--s4); border: 1px solid var(--b-kante); border-radius: var(--r-pille); background: var(--flaeche); color: var(--tinte); font-weight: 500; text-decoration: none; box-shadow: none; } .buero:not(.buero--fokus) .buero__inhalt :is(.segment > button[aria-pressed="true"], .segment--wahl > label:has(> input:checked), .segment--verweise > a[aria-current="page"], .reiter > a[aria-current="page"], .reiter > button[aria-pressed="true"]) { background: var(--aktion); border-color: var(--aktion); color: var(--aktion-auf); font-weight: 600; } /* Dieselben Badges für Ansichtswahl im Kalender und die Ansichten von Gutscheinen und Postfach. */ .buero:not(.buero--fokus) .buero__inhalt :is(.kal-ansicht, .reiterleiste) { display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } .buero:not(.buero--fokus) .buero__inhalt :is(.kal-ansicht, .reiterleiste) > a { display: inline-flex; align-items: center; min-block-size: 36px; padding: 0 var(--s4); border: 1px solid var(--b-kante); border-radius: var(--r-pille); background: var(--flaeche); color: var(--tinte); font-weight: 500; text-decoration: none; box-shadow: none; } .buero:not(.buero--fokus) .buero__inhalt :is(.kal-ansicht, .reiterleiste) > a[aria-current="page"] { background: var(--aktion); border-color: var(--aktion); color: var(--aktion-auf); font-weight: 600; } /* (+)-Badge an jeder Kategorie-Auswahl; geöffnet steht das Feld darunter. */ .buero:not(.buero--fokus) .neu-plus { display: grid; gap: var(--s2); justify-items: start; } .buero:not(.buero--fokus) .neu-plus > summary { list-style: none; cursor: pointer; } .buero:not(.buero--fokus) .neu-plus > summary::-webkit-details-marker { display: none; } .buero:not(.buero--fokus) .neu-plus[open] > summary { display: none; } .buero:not(.buero--fokus) .neu-plus > :not(summary) { inline-size: 100%; } .buero:not(.buero--fokus) .feld__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); } /* Felder nebeneinander stehen auf einer Linie: Beschriftung oben bündig, Hinweise darunter verschieben nichts. */ .buero:not(.buero--fokus) .buero__inhalt :is(.felder--zwei, .felder, .mm-zwei) { align-items: start; } .buero:not(.buero--fokus) .buero__inhalt :is(.felder--zwei, .felder) > .feld { align-content: start; } .buero:not(.buero--fokus) .buero__inhalt .feld > :is(select.eingabe, input.eingabe:not([type="file"])) { block-size: 44px; } /* Bereichsmaske: Bereiche in einer Spalte, rechts klebend Bereichsliste und Online-Prüfung (Muster 14.10.2026). */ .buero:not(.buero--fokus) .bereichsmaske { display: grid; gap: var(--s5); align-items: start; } @media (min-width: 64rem) { .buero:not(.buero--fokus) .bereichsmaske { grid-template-columns: minmax(0, 1fr) 19rem; } } .buero:not(.buero--fokus) .bereichsmaske__haupt { display: grid; gap: var(--s5); min-inline-size: 0; } .buero:not(.buero--fokus) .bereichsmaske__schiene { display: grid; gap: var(--s3); align-content: start; } @media (min-width: 64rem) { .buero:not(.buero--fokus) .bereichsmaske__schiene { position: sticky; top: var(--s5); } } /* Bereiche stehen mit demselben Abstand wie alle Karten, auch mehrere in einem Formular (Florian 14.10.2026). */ .buero:not(.buero--fokus) .maske2.maske2--bereiche { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); align-content: start; } .buero:not(.buero--fokus) .maske2--bereiche > .maske2__links { display: grid; gap: var(--s5); } .buero:not(.buero--fokus) .maske2--bereiche > .maske2__rechts { display: none; } .buero:not(.buero--fokus) .buero__inhalt details.bereich { padding: 0; border: 1px solid var(--b-kante); border-radius: var(--r-l); background: var(--flaeche); } .buero:not(.buero--fokus) .buero__inhalt details.bereich > summary.bereich__kopf { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--s3); margin: 0; padding: var(--s4) var(--s5); inline-size: auto; border: 0; background: none; font: inherit; color: var(--tinte); } .buero:not(.buero--fokus) .buero__inhalt details.bereich > summary.bereich__kopf::-webkit-details-marker { display: none; } .buero:not(.buero--fokus) .buero__inhalt details.bereich > summary.bereich__kopf::before, .buero:not(.buero--fokus) .buero__inhalt details.bereich > summary.bereich__kopf::after { content: none; display: none; } .buero:not(.buero--fokus) .bereich__kopf > .ph:first-child { color: var(--aktion); font-size: 1.35rem; } .buero:not(.buero--fokus) .bereich__kopf b { display: block; font-size: 1.02rem; } .buero:not(.buero--fokus) .bereich__kopf small { display: block; overflow: hidden; color: var(--leise); font-size: 0.85rem; white-space: nowrap; text-overflow: ellipsis; } .buero:not(.buero--fokus) .bereich__pfeil { color: var(--leise); transition: transform 0.2s var(--b-weich); } .buero:not(.buero--fokus) details.bereich[open] > .bereich__kopf .bereich__pfeil { transform: rotate(180deg); } .buero:not(.buero--fokus) details.bereich[open] > .bereich__kopf { border-block-end: 1px solid var(--b-kante); } .buero:not(.buero--fokus) .bereich__inhalt { display: grid; gap: var(--s4); padding: var(--s5); } .buero:not(.buero--fokus) .bereich__stand { padding: var(--s1) var(--s3); border-radius: var(--r-pille); font-size: 0.75rem; font-weight: 600; white-space: nowrap; } .buero:not(.buero--fokus) .bereich__stand--ok { background: var(--frei-zart); color: var(--frei); } .buero:not(.buero--fokus) .bereich__stand--offen { background: var(--gehalten-zart); color: var(--tinte); } .buero:not(.buero--fokus) .bereich__stand--leise { background: var(--flaeche-2); color: var(--leise); } .buero:not(.buero--fokus) .bereichsliste { display: grid; gap: var(--s2); } .buero:not(.buero--fokus) .bereichsliste h2 { margin: 0; font-size: 1rem; } .buero:not(.buero--fokus) .bereichsliste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); } .buero:not(.buero--fokus) .bereichsliste a { display: grid; grid-template-columns: auto 1fr; gap: var(--s2); align-items: center; padding: var(--s2); border-radius: var(--r); color: var(--tinte); text-decoration: none; font-size: 0.9rem; } .buero:not(.buero--fokus) .bereichsliste a:hover { background: var(--flaeche-2); } .buero:not(.buero--fokus) .bereichsliste .ph-check-circle { color: var(--frei); } .buero:not(.buero--fokus) .bereichsliste .ph-warning-circle { color: var(--gehalten); } /* (+)-Badge ohne Rahmen und Pfeil der allgemeinen Klappen. */ .buero:not(.buero--fokus) .buero__inhalt .neu-plus { border: 0; padding: 0; background: none; } .buero:not(.buero--fokus) .buero__inhalt .neu-plus > summary::before, .buero:not(.buero--fokus) .buero__inhalt .neu-plus > summary::after { content: none; display: none; } /* Der Bereich übernimmt die Klassen der Karte; Abstand und Raster der Karte gelten für ihn nicht. */ .buero:not(.buero--fokus) .buero__inhalt details.bereich.karte { display: block; gap: 0; padding: 0; } .buero:not(.buero--fokus) .buero__inhalt details.bereich[open] > summary.bereich__kopf { border-block-end: 1px solid var(--b-kante); } .buero:not(.buero--fokus) .bereich__inhalt > :first-child { margin-block-start: 0; } /* Checkliste: „Pflicht“ und „Foto“ je Punkt nebeneinander. */ .buero:not(.buero--fokus) .buero__inhalt td .chips { display: flex; flex-wrap: nowrap; gap: var(--s2); } /* Löschen im Seitenkopf steht als Zweitknopf neben Speichern: helle Fläche, rote Schrift statt Weiß auf Weiß. */ .buero:not(.buero--fokus) .knopf--zweit.knopf--gefahr { background: var(--flaeche); color: var(--fehler); border-color: color-mix(in srgb, var(--fehler) 45%, transparent); } .buero:not(.buero--fokus) .knopf--zweit.knopf--gefahr:hover { border-color: var(--fehler); background: color-mix(in srgb, var(--fehler) 6%, var(--flaeche)); } /* Zuordnung als Badges: eine Reihe, die umbricht; jeder Badge ist ein kleines Formular. */ .buero:not(.buero--fokus) .zuordnung__badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); } .buero:not(.buero--fokus) .zuordnung__badges form { display: contents; } .buero:not(.buero--fokus) .zuordnung__badges .chip { display: inline-flex; align-items: center; gap: var(--s1); cursor: pointer; font: inherit; } .buero:not(.buero--fokus) .zuordnung__badges .chip[aria-pressed="false"] { background: var(--flaeche); color: var(--leise); border-style: dashed; } .buero:not(.buero--fokus) .zuordnung__badges .chip[aria-pressed="false"]:hover { color: var(--aktion); border-color: var(--aktion); } /* Der Buchen-Knopf sagt, was mit dem Geld passiert: Link, sofort kassieren oder nur buchen (vor Ort, Mehrfachkarte). */ .buero:not(.buero--fokus) .buchen__absenden [data-zahlung] { display: none; } .buero:not(.buero--fokus) .buchen__formular:not(:has(input[name="zahlung"]:is([value="zahlungslink"], [value="anzahlung"], [value="bar"], [value="karte"]):checked)) .buchen__absenden [data-zahlung="sonst"], .buero:not(.buero--fokus) .buchen__formular:has(input[name="zahlung"]:is([value="zahlungslink"], [value="anzahlung"]):checked) .buchen__absenden [data-zahlung="link"], .buero:not(.buero--fokus) .buchen__formular:has(input[name="zahlung"]:is([value="bar"], [value="karte"]):checked) .buchen__absenden [data-zahlung="jetzt"] { display: inline; } /* Am Ende einer Bereichsmaske stehen Abbrechen und Speichern rechts nebeneinander wie im Seitenkopf. */ .buero:not(.buero--fokus) .maske2 > .formular__ende { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s3); } /* Punkte einer Checkliste im Überblick: eine Zeile je Punkt, Pflicht und Foto als Plakette dahinter. */ .buero:not(.buero--fokus) .checkliste-uebersicht { margin: 0; padding-inline-start: var(--s5); display: grid; gap: var(--s2); } .buero:not(.buero--fokus) .checkliste-uebersicht li { padding-block: var(--s2); border-block-end: 1px solid var(--b-kante); } .buero:not(.buero--fokus) .checkliste-uebersicht li:last-child { border-block-end: 0; } .buero:not(.buero--fokus) .buero__inhalt a.chip { text-decoration: none; color: var(--tinte); } .buero:not(.buero--fokus) .buero__inhalt a.chip:hover { color: var(--aktion); } /* Arbeitszeiten je Wochentag: Tag, von, bis in festen Spalten, damit alle Zeilen bündig stehen. */ .buero:not(.buero--fokus) .arbeitszeiten { display: grid; gap: var(--s2); } .buero:not(.buero--fokus) .arbeitszeiten__tag { display: grid; grid-template-columns: 8rem 9rem auto 9rem; align-items: center; gap: var(--s3); } /* Ein Bereichsblock ohne Inhalt (etwa Fähigkeiten bei einem Gegenstand) lässt keine Lücke. */ .buero:not(.buero--fokus) .maske2:not(:has(*)) { display: none; } .buero:not(.buero--fokus) .bereichsmaske.bereichsmaske--einzeln { grid-template-columns: minmax(0, 1fr); }