/* Zeiterfassung – eigene Bausteine auf Basis von klarglas.css (nur Variablen von dort, keine neuen Farben) */ /* ---------- Kopf und Navigation ---------- */ .kopf { position: sticky; margin-left: max(16px, env(safe-area-inset-left)); margin-right: max(16px, env(safe-area-inset-right)); } .marke:hover { text-decoration: none; } @media (min-width: 1272px) { .kopf { margin-left: auto; margin-right: auto; } } .marke { display: flex; align-items: center; gap: 14px; flex: none; } /* das Logo schrumpft nie, sonst rutscht es unter die Reiter */ .marke img { height: 26px; width: auto; display: block; } .marke .produkt { font-size: 0.8125rem; font-weight: 600; color: var(--muted); padding-left: 14px; border-left: 1px solid var(--hair); white-space: nowrap; } .nav { display: inline-flex; gap: 2px; padding: 4px; background: rgba(110, 122, 160, .14); border-radius: var(--kapsel); } .nav.nav-unten { display: none; } /* Notbremse: reicht der Platz nicht, scrollt die Reiterleiste seitlich, statt sich über Logo oder Konto zu legen */ .nav.nav-oben { min-width: 0; overflow-x: auto; scrollbar-width: none; } .nav.nav-oben::-webkit-scrollbar { display: none; } .nav.nav-oben a.tab { flex: none; } @media (max-width: 1100px) { .marke .produkt { display: none; } } /* Logo in der Mitte: drei Spalten (links frei, Mitte Logo, rechts Konto), die Reiter darunter über die ganze Breite. Gleich breite Außenspalten halten das Logo genau in der Mitte, auch wenn das Konto rechts breiter wird */ .kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 8px; } .kopf .marke { grid-row: 1; grid-column: 2; justify-self: center; position: relative; } .kopf .marke .produkt { position: absolute; left: 100%; margin-left: 14px; } /* hängt rechts am Logo, das Logo selbst bleibt genau in der Mitte */ @media (min-width: 901px) { .kopf { padding-top: 10px; padding-bottom: 10px; row-gap: 6px; } } .kopf .konto { grid-row: 1; grid-column: 3; justify-self: end; } .kopf .nav-oben { grid-row: 2; grid-column: 1 / -1; justify-self: center; max-width: 100%; } a.tab { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 16px; border-radius: var(--kapsel); color: var(--muted); font-weight: 500; font-size: 0.8125rem; text-decoration: none; transition: background-color .15s ease, color .15s ease; } a.tab svg { width: 16px; height: 16px; flex: none; } a.tab:hover { background: rgba(255, 255, 255, .5); color: var(--ink); text-decoration: none; } /* Touch: kein „hängender“ Hover-Zustand nach dem Antippen */ @media (hover: none) { .nav a.tab:hover:not(.on), .tabs a.tab:hover:not(.on) { background: transparent; color: var(--muted); } } a.tab.on { background: rgba(255, 255, 255, .94); color: var(--ink); font-weight: 600; box-shadow: var(--glas-licht), 0 1px 3px rgba(28, 36, 68, .14), var(--glas-aussen); } .konto-knopf.sec { height: 40px; padding: 0 14px 0 5px; gap: 10px; font-weight: 500; } .avatar { width: 30px; height: 30px; border-radius: 99px; display: grid; place-items: center; font-size: 0.75rem; font-weight: 650; letter-spacing: 0; color: #174AA8; background: rgba(var(--akzent), .12); box-shadow: inset 0 0 0 1px rgba(var(--akzent), .18); flex: none; } .avatar.gross { width: 48px; height: 48px; font-size: 1rem; } .menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; padding: 6px; border-radius: 18px; z-index: 45; animation: menu-ein .22s var(--ease) both; } /* Das Menü liegt im gläsernen Kopf: Glas auf Glas wird in Safari durchsichtig (der Unschärfefilter greift nur im Kopf), daher fast deckend */ .konto .menu { background: rgba(250, 251, 253, .97); } @keyframes menu-ein { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } } .menu .wer { padding: 10px 12px 8px; border-bottom: 1px solid var(--hair); margin-bottom: 4px; } .menu .wer b { display: block; } .menu .wer span { font-size: 0.8125rem; color: var(--muted); } .menu button { width: 100%; justify-content: flex-start; height: 40px; padding: 0 12px; border-radius: 12px; background: transparent; color: var(--ink); font-weight: 500; text-shadow: none; box-shadow: none; } .menu button::after { display: none; } .menu button:hover { background: var(--fill); transform: none; } .menu button.rot { color: #BC3624; } .menu button svg { width: 18px; height: 18px; color: var(--muted); } .menu button.rot svg { color: currentColor; } .konto { position: relative; } /* Schalter „Dunkles Design“ im Kontomenü: Regler wie am iPhone, an = Blau (Auswahl) */ .regler { position: relative; flex: none; width: 44px; height: 26px; margin-left: auto; border-radius: 99px; background: var(--fill-2); box-shadow: inset 0 0 0 1px var(--hair); transition: background-color .25s var(--ease); } .regler::before { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 0 0 .5px rgba(0, 0, 0, .06); transition: transform .35s var(--spring-sheet); } [aria-checked="true"] > .regler { background: rgb(var(--akzent)); box-shadow: none; } [aria-checked="true"] > .regler::before { transform: translateX(18px); } /* Handy und Tablet hochkant: Navigation als schwebende Glasleiste unten (mit fünf Reitern passt sie oben erst ab 900 px) */ @media (max-width: 900px) { .kopf { top: 8px; padding: 8px; } /* gleich viel Rand links und rechts, sonst sitzt das Logo schief */ .marke .produkt { display: none; } .marke img { height: 22px; } .nav.nav-oben { display: none; } .nav.nav-unten { position: fixed; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 40; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 6px; border-radius: 26px; background: var(--glas-fuellung-dicht); -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur); box-shadow: var(--glas-licht), var(--glas-aussen), var(--shadow-2); } /* auch für :hover festlegen – sonst greift nach dem Antippen die kleine Reitergröße aus klarglas.css (.tab:hover) */ .nav a.tab, .nav a.tab:hover { flex-direction: column; justify-content: center; gap: 2px; height: 52px; padding: 0 4px; border-radius: 20px; font-size: 0.6875rem; } .nav a.tab svg { width: 22px; height: 22px; } .konto-knopf .name { display: none; } .konto-knopf.sec { padding: 0 5px; } .seite { padding-bottom: 120px; } } /* Symbole in Schaltflächen */ button svg, .btn svg { width: 16px; height: 16px; flex: none; } /* ---------- Seitenaufbau ---------- */ .seite { padding-top: 28px; } .seiten-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 22px; } .seiten-kopf p { margin: 6px 0 0; } .werkzeuge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .abschnitt { margin: 30px 0 10px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 12px; padding: 0 4px; } /* passt der Knopf nicht daneben, rutscht er in die nächste Zeile, statt die Überschrift zu quetschen */ .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; } @media (max-width: 980px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .kpis.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Handy: zwei Kacheln nebeneinander, bei großer Schrift (Browser-Einstellung, rem) eine – dann bleiben Überschriften lesbar */ @media (max-width: 640px) { .kpis, .kpis.zwei { grid-template-columns: repeat(auto-fit, minmax(max(8.5rem, calc((100% - 16px) / 2)), 1fr)); } } .kpi .n small { font-size: 1rem; font-weight: 600; color: var(--muted); letter-spacing: -.01em; margin-left: 4px; } .kpi .n.plus { color: #1D7A4B; } .kpi .n.minus { color: #B83A27; } .kpi .kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .kpi .kopfzeile h3 { margin: 0; white-space: nowrap; } /* Schmale Kacheln (z. B. vier Kennzahlen am kleinen Handy): erst fällt das Schmucksymbol weg, dann wird die Sperrung enger – die Überschrift bleibt einzeilig und schiebt nichts in die Nachbarkachel */ .kpi { container-type: inline-size; } @container (max-width: 150px) { .kpi .kopfzeile .ikon { display: none; } } @container (max-width: 112px) { .kpi .kopfzeile h3 { letter-spacing: 0; } } .ikon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; color: #174AA8; background: rgba(var(--akzent), .11); } .ikon svg { width: 17px; height: 17px; } .ikon.gruen { color: #1D7A4B; background: rgba(var(--gruen), .13); } .ikon.gold { color: #7A5200; background: rgba(var(--warn), .2); } .ikon.rot { color: #B83A27; background: rgba(214, 80, 63, .12); } .ikon.grau { color: var(--muted); background: rgba(110, 122, 160, .13); } /* ---------- Heute ---------- */ .heute-raster { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 16px; align-items: start; } @media (max-width: 980px) { .heute-raster { grid-template-columns: minmax(0, 1fr); } } .seitenspalte { display: grid; gap: 16px; } .stempel { padding: 26px 28px 24px; } .status-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; min-height: 28px; } .status { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; } .status .dot.gruen { box-shadow: 0 0 0 4px rgba(var(--gruen), .16); animation: puls 2.4s ease-in-out infinite; } .status .dot.gelb { box-shadow: 0 0 0 4px rgba(var(--warn), .22); } @keyframes puls { 50% { box-shadow: 0 0 0 7px rgba(var(--gruen), .06); } } .uhr { font-family: var(--font-display); font-size: clamp(3.25rem, 9vw, 5.25rem); font-weight: 650; letter-spacing: -.045em; line-height: 1; margin: 22px 0 8px; font-variant-numeric: tabular-nums; } .uhr .sek { color: var(--faint); font-weight: 500; } .uhr-l { color: var(--muted); font-size: 0.875rem; } .zeitleiste { position: relative; height: 34px; margin: 26px 0 6px; border-radius: 12px; background: var(--fill); overflow: hidden; box-shadow: inset 0 1px 2px rgba(30, 40, 70, .08); } .zeitleiste .seg { position: absolute; top: 5px; bottom: 5px; border-radius: 7px; min-width: 3px; } .zeitleiste .seg.arbeit { background: rgba(var(--akzent), .78); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); } .zeitleiste .seg.pause { background: repeating-linear-gradient(135deg, rgba(110, 122, 160, .38) 0 5px, rgba(110, 122, 160, .2) 5px 10px); } .zeitleiste .seg.laeuft { animation: laeuft 2.4s ease-in-out infinite; } @keyframes laeuft { 50% { opacity: .72; } } .zeitleiste .jetzt { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink); opacity: .5; border-radius: 2px; } .skala { position: relative; height: 18px; font-size: 0.75rem; color: var(--faint); font-variant-numeric: tabular-nums; } .skala span { position: absolute; transform: translateX(-50%); } .skala span:first-child { transform: none; } .skala span:last-child { transform: translateX(-100%); } .legende { display: flex; gap: 16px; font-size: 0.75rem; color: var(--muted); margin-top: 2px; } .legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; } .legende i.arbeit { background: rgba(var(--akzent), .78); } .legende i.pause { background: rgba(110, 122, 160, .38); } .aktionen { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; } .aktionen button { height: 52px; padding: 0 26px; font-size: 1rem; flex: 1 1 180px; max-width: 280px; } .aktionen button svg { width: 20px; height: 20px; } .hinweise { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .hinweise:empty { display: none; } .wochen-balken { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 64px; margin-top: 14px; } .wochen-balken .b { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; } .wochen-balken .saeule { width: 100%; max-width: 26px; border-radius: 6px; background: var(--fill-2); position: relative; overflow: hidden; height: 44px; } .wochen-balken .saeule i { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(var(--akzent), .75); border-radius: 6px; transition: height .5s var(--ease); } .wochen-balken .saeule.voll i { background: rgba(var(--gruen), .8); } .wochen-balken .saeule.frei { background: transparent; box-shadow: inset 0 0 0 1px var(--hair); } .wochen-balken span { font-size: 0.75rem; color: var(--muted); } .wochen-balken .b.heute span { color: var(--ink); font-weight: 650; } .fortschritt { height: 6px; border-radius: 99px; background: var(--fill-2); overflow: hidden; margin-top: 12px; } .fortschritt i { display: block; height: 100%; border-radius: 99px; background: rgb(var(--akzent)); transition: width .5s var(--ease); } .warnkarte { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; margin-bottom: 16px; } .warnkarte .text { flex: 1 1 240px; } .warnkarte .text b { display: block; } .warnkarte .ende-feld { display: flex; gap: 10px; align-items: center; } .warnkarte input { width: 110px; } /* ---------- Listen (Glaskarte je Gruppe, Symbolkasten vorn, Linie ab Text) ---------- */ .liste { padding: 0; overflow: clip; } .zeile-l { position: relative; display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 10px 18px; } .zeile-l + .zeile-l::before { content: ""; position: absolute; top: 0; left: 62px; right: 0; height: 1px; background: var(--hair); } .zeile-l.klick { cursor: pointer; transition: background-color .12s ease; } .zeile-l.klick:hover { background: rgba(255, 255, 255, .5); } .zeile-l.klick:active { background: rgba(var(--akzent), .1); transition-duration: 0s; } .zeile-l .haupt { flex: 1; min-width: 0; } .zeile-l .haupt b { display: block; font-weight: 600; font-size: 1rem; } .zeile-l .haupt span { font-size: 0.8125rem; color: var(--muted); } .zeile-l .haupt > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Unterzeile bleibt einzeilig, auch am Handy */ .zeile-l .rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } .zeile-l .pfeil { color: var(--faint); width: 16px; height: 16px; } .leer { padding: 26px 22px; display: flex; align-items: center; gap: 14px; color: var(--muted); } .leer b { color: var(--ink); display: block; } /* ---------- Tabellen ---------- */ .tabelle, .card.tabelle { overflow-x: auto; } /* .card.tabelle schlägt klarglas „.card:has(> table) { overflow: clip }“ – sonst wird die Tabelle abgeschnitten statt seitlich scrollbar */ .tabelle table { min-width: 760px; } .tabelle td { padding: 12px 16px; height: 52px; } .tabelle td.r { white-space: nowrap; } .tabelle th { padding: 12px 16px; } .tabelle tr.frei td { color: var(--faint); background: rgba(110, 122, 160, .04); } .tabelle tr.heute td { background: rgba(var(--akzent), .06); } .tabelle tr.heute td:first-child { box-shadow: inset 3px 0 0 rgb(var(--akzent)); } .tabelle .tagzelle b { font-weight: 600; margin-right: 6px; } .tabelle .tagzelle span { color: var(--muted); font-variant-numeric: tabular-nums; } .tabelle .chips { display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; } .tabelle tfoot td { font-weight: 650; border-top: 1px solid var(--hair); border-bottom: 0; background: rgba(255, 255, 255, .35); } .plus { color: #1D7A4B; } .minus { color: #B83A27; } .person { display: flex; align-items: center; gap: 12px; min-width: 0; } .person b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .person span:not(.avatar) { font-size: 0.75rem; color: var(--muted); } /* nicht das Initialen-Kästchen, das bleibt blau */ .statuszelle { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } /* Aufklappmenü „Tage“ (wie im Leads-Cockpit): die Kopfzeile ist ein Knopf, die Tabelle fährt mit einer Feder aus und denselben Weg zurück */ .drop { padding: 0; overflow: clip; } .drop-h { margin: 0; font: inherit; letter-spacing: inherit; } button.drop-kopf { display: flex; align-items: center; gap: 14px; width: 100%; height: auto; min-height: 64px; padding: 12px 18px; border-radius: 0; background: transparent; color: var(--ink); font-weight: inherit; text-align: left; white-space: normal; text-shadow: none; box-shadow: none; } button.drop-kopf::after { display: none; } button.drop-kopf:hover { background: rgba(255, 255, 255, .5); transform: none; } button.drop-kopf:active { background: rgba(var(--akzent), .1); transform: none; box-shadow: none; } button.drop-kopf:focus-visible { outline-offset: -3px; } .drop-kopf .haupt { flex: 1; min-width: 0; } .drop-kopf .haupt b { display: block; font-weight: 600; font-size: 1.0625rem; } .drop-kopf .haupt span { display: block; font-size: 0.8125rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .drop-pfeil { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--fill-2); } .drop-pfeil svg { width: 16px; height: 16px; color: var(--muted); transition: transform .45s var(--spring-sheet); } .drop.on .drop-pfeil svg { transform: rotate(180deg); } .drop-inhalt { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .45s var(--spring-sheet), visibility 0s .45s; } .drop.on .drop-inhalt { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .45s var(--spring-sheet), visibility 0s; } .drop-inhalt > div { min-height: 0; overflow: hidden; } .drop .tabelle { border-top: 1px solid var(--hair); } .tabelle table { width: 100%; border-collapse: collapse; } .drop-skel { min-height: 64px; align-content: center; border: 0; } /* ---------- Backend ---------- */ .backend-tabs { display: inline-flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin-bottom: 4px; } .backend-tabs::-webkit-scrollbar { display: none; } .backend-tabs a.tab { flex: none; } /* schmale Fenster: alle sechs Bereiche sichtbar als Raster statt einer Leiste, deren Ende man nicht sieht (in einer Zeile brauchen sie gut 660 px) */ @media (max-width: 720px) { .backend-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(6.5rem, calc((100% - 4px) / 3)), 1fr)); width: 100%; border-radius: 20px; } /* höchstens 3 Spalten; bei großer Schrift (rem) weniger */ .backend-tabs a.tab { justify-content: center; padding: 0 6px; min-width: 0; } } .backend-fuss { margin: 12px 4px 0; } .liste a.zeile-l { color: var(--ink); text-decoration: none; } .zeile-l.aus { opacity: .6; } .zeile-l .zeit-rechts { font-size: 0.8125rem; font-weight: 500; color: var(--muted); } .zeile-l .haupt b .fuer { display: inline; font-weight: 500; color: var(--muted); font-size: inherit; } .export-karte { display: flex; align-items: center; gap: 16px; padding: 18px 20px; flex-wrap: wrap; } .export-karte .haupt { flex: 1 1 260px; min-width: 0; } .export-karte .haupt b { display: block; font-weight: 600; font-size: 1rem; } .export-karte .haupt span { display: block; font-size: 0.8125rem; color: var(--muted); margin-top: 2px; } /* Einstellungen im Backend: Zeilen wie die Listen, Schalter wie im Kontomenü */ .einstellungen { padding: 0; overflow: clip; } .einst-zeile { position: relative; display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 12px 18px; margin: 0; font-size: inherit; font-weight: inherit; color: var(--ink); letter-spacing: inherit; } label.einst-zeile { cursor: pointer; } .einst-zeile + .einst-zeile::before { content: ""; position: absolute; top: 0; left: 62px; right: 0; height: 1px; background: var(--hair); } .einst-zeile .haupt { flex: 1; min-width: 0; } .einst-zeile .haupt b { display: block; font-weight: 600; font-size: 1rem; } .einst-zeile .haupt span { display: block; font-size: 0.8125rem; color: var(--muted); } .einst-zeile input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; } .einst-zeile input:checked + .regler { background: rgb(var(--akzent)); box-shadow: none; } .einst-zeile input:checked + .regler::before { transform: translateX(18px); } .einst-zeile input:focus-visible + .regler { outline: 2px solid rgba(var(--akzent), .7); outline-offset: 2px; } .einst-zeile input[type="date"] { flex: none; width: 170px; } .einst-fuss { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--hair); } .einst-fuss .formular-fehler { flex: 1; min-height: 0; } @media (max-width: 640px) { .einst-zeile { flex-wrap: wrap; } .einst-zeile input[type="date"] { width: calc(100% - 44px); margin-left: 44px; } } /* ---------- Monatsauswahl, Personenauswahl ---------- */ .monat-nav { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--kapsel); background: rgba(110, 122, 160, .14); } .monat-nav b { min-width: 150px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; } .monat-nav button { width: 34px; height: 34px; padding: 0; background: transparent; color: var(--ink); box-shadow: none; text-shadow: none; } .monat-nav button::after { display: none; } .monat-nav button:hover { background: rgba(255, 255, 255, .7); transform: none; } .monat-nav button svg { width: 16px; height: 16px; } select.person-wahl { min-width: 200px; border-radius: var(--kapsel); height: 42px; } /* ---------- Formulare in Sheet und Dialog ---------- */ .sheet h2 { margin: 2px 0 4px; } .sheet-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .schliessen { width: 36px; height: 36px; padding: 0; flex: none; } .schliessen svg { width: 16px; height: 16px; } .knopfreihe .schliessen { width: auto; padding: 0 18px; } /* „Abbrechen“ schließt auch, ist aber ein Textknopf */ .feld { display: block; } .feld input, .feld select, .feld textarea { width: 100%; } .feld .fehler { margin-top: 4px; } .feld-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .formular-k { display: grid; gap: 14px; } .wahl-tage { display: flex; gap: 6px; flex-wrap: wrap; } .wahl-tage label { margin: 0; } .wahl-tage input { position: absolute; opacity: 0; pointer-events: none; } .wahl-tage span { display: inline-grid; place-items: center; width: 42px; height: 36px; border-radius: var(--kapsel); font-size: 0.8125rem; font-weight: 600; cursor: pointer; color: var(--muted); background: rgba(255, 255, 255, .5); box-shadow: var(--glas-aussen); transition: background-color .15s ease, color .15s ease; user-select: none; } .wahl-tage input:checked + span { background: rgba(var(--akzent), .14); color: #174AA8; box-shadow: 0 0 0 1px rgba(var(--akzent), .4); } .wahl-tage input:focus-visible + span { outline: 2px solid rgba(var(--akzent), .7); outline-offset: 2px; } .schalter { display: flex; align-items: center; gap: 10px; font-size: 0.9375rem; color: var(--ink); font-weight: 500; margin: 0; cursor: pointer; } .knopfreihe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .knopfreihe .rechtsbuendig { margin-left: auto; } .trenner { height: 1px; background: var(--hair); margin: 22px 0; border: 0; } .formular-fehler { color: var(--err); font-size: 0.875rem; min-height: 20px; } .bloecke { margin: 0 0 6px; } .block-zeile .zeit { font-variant-numeric: tabular-nums; } .block-zeile .aktion { display: flex; gap: 8px; } .block-zeile.bearbeiten { background: rgba(var(--akzent), .06); } .stat-reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 4px; } .stat { padding: 12px 14px; border-radius: var(--r-m); background: rgba(255, 255, 255, .5); box-shadow: var(--glas-aussen); } .stat .n { font-size: 1.25rem; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .stat .l { font-size: 0.75rem; color: var(--muted); } /* ---------- Datenschutz und rechtliche Links ---------- */ .datenschutz { max-width: 74ch; } .datenschutz h2 { font-size: 1.0625rem; margin: 22px 0 6px; letter-spacing: -.01em; } .datenschutz h2:first-child { margin-top: 0; } .datenschutz p, .datenschutz li { line-height: 1.6; } .datenschutz p { margin: 0 0 6px; } .datenschutz ul { margin: 0 0 6px; padding-left: 1.2em; display: grid; gap: 4px; } .anmelde-karte.datenschutz-karte { width: min(760px, 100%); } .datenschutz-karte .datenschutz { margin: 18px 0 22px; } .rechtliches { display: flex; gap: 18px; margin-top: 14px; font-size: 0.8125rem; } .rechtliches a { color: var(--muted); } .rechtliches a:hover { color: var(--ink); } /* ---------- Anmeldung ---------- */ .anmelde-seite { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; } .anmelde-karte { width: min(420px, 100%); padding: 34px 32px 28px; border-radius: var(--r-xl); } .anmelde-karte .logo { height: 34px; width: auto; display: block; margin-bottom: 26px; } .anmelde-karte h1 { font-size: 1.75rem; margin-bottom: 6px; } .anmelde-karte p { margin: 0 0 22px; } .anmelde-karte button[type="submit"] { width: 100%; height: 48px; margin-top: 6px; } .dreifarb { display: flex; gap: 6px; margin: 24px 0 0; } .dreifarb i { width: 30px; height: 4px; border-radius: 4px; } .dreifarb i:nth-child(1) { background: var(--blue); } .dreifarb i:nth-child(2) { background: var(--navy); } .dreifarb i:nth-child(3) { background: var(--gold); } /* ---------- Platzhalter ---------- */ .skel-karte { height: 180px; } .skel-gross { height: 64px; width: 60%; border-radius: 14px; margin: 22px 0 14px; } /* Am Handy stempeln */ .handy-karte { display: flex; align-items: center; gap: 24px; padding: 22px 24px; flex-wrap: wrap; } .handy-karte .qr { width: 144px; height: 144px; padding: 10px; flex: none; image-rendering: pixelated; background: #fff; border-radius: 16px; box-shadow: var(--glas-aussen); } .handy-text { flex: 1 1 280px; min-width: 0; } .handy-text b { display: block; font-size: 1.0625rem; } .handy-text p { margin: 6px 0 12px; } .adresse { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .adresse code { font: 600 0.9375rem/1.4 ui-monospace, "SF Mono", Menlo, monospace; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .6); box-shadow: var(--glas-aussen); word-break: break-all; user-select: all; } .klein-text { font-size: 0.8125rem; margin: 0; } .handy-text .klein-text { margin-top: 10px; } .anmelde-karte button.ghost { width: 100%; } /* Klarglas kennt „ghost“ und „klein“ nur für