:root{
--bg:#F4EEE1;
--bg-weekend:#E8DEC7;
--surface:#FFFFFF;
--surface-alt:#FBF8F2;
--text:#211D16;
--text-secondary:#726A59;
--border:#E3D9C4;
--border-strong:#D3C6A8;
--accent:#D2B75F;
--accent-hover:#E0C475;
--accent-active:#B89A45;
--accent-grad:linear-gradient(135deg,#E4C878 0%,#C9A24C 100%);
--accent-grad-hover:linear-gradient(135deg,#EBD48E 0%,#D2AC55 100%);
--accent-tint:#FBF3DC;
--accent-contrast:#2E2510;
--accent-text:#8E7226;
--danger:#C9524A;
--danger-hover:#B5443D;
--danger-tint:#FCEBE9;
--danger-text:#B8362E;
--edit:#4F7286;
--edit-hover:#436074;
--success-tint:#E7F7EC;
--success-text:#1C7A3D;
--warning-tint:#FEF2DF;
--warning-text:#A6570A;
--radius-xl:22px;
--radius-lg:18px;
--radius-md:13px;
--radius-sm:10px;
--sidebar-w:246px;
--shadow-xs:0 1px 2px rgba(30,22,6,.05);
--shadow-card:0 1px 1px rgba(30,22,6,.03),0 6px 20px -4px rgba(30,22,6,.07);
--shadow-md:0 4px 16px -2px rgba(30,22,6,.09);
--shadow-pop:0 16px 44px -8px rgba(30,22,6,.22),0 4px 14px rgba(30,22,6,.08);
--ease-out:cubic-bezier(.16,1,.3,1);
--ease-spring:cubic-bezier(.34,1.56,.64,1);
--glass:rgba(255,255,255,.72);
--glass-2:rgba(255,255,255,.82);
--glass-pop:rgba(255,255,255,.94);
--glass-border:rgba(255,255,255,.75);
--glass-grad:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.38));
--glass-shadow:0 10px 32px rgba(40,28,6,.16),0 1px 0 rgba(255,255,255,.9) inset,0 -1px 0 rgba(255,255,255,.35) inset;
--glass-active:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.6));
--glass-active-shadow:0 2px 10px rgba(40,28,6,.12),0 1px 0 rgba(255,255,255,1) inset;
--body-glow-1:rgba(226,196,118,.16);
--body-glow-2:rgba(210,183,95,.10);
--banner-bg:#FFF6D6;
--banner-text:#5C4A00;
color-scheme:light;
}
/* ── Dunkelmodus ─────────────────────────────────────────────────────────
Wird über geschaltet (assets/theme.js: System, Hell
oder Dunkel; Auswahl im Profil). Rechnungen/PDFs bleiben bewusst hell. */
:root[data-theme="dark"]{
--bg:#14110B;
--bg-weekend:#1D1910;
--surface:#1D1A13;
--surface-alt:#26221A;
--text:#F3ECDE;
--text-secondary:#A99F8A;
--border:#352F22;
--border-strong:#4B4231;
--accent-tint:#2F2813;
--accent-text:#E6CB7E;
--danger-tint:#3B201D;
--danger-text:#F28F86;
--edit:#6F9CB5;
--edit-hover:#82ADC5;
--success-tint:#15301F;
--success-text:#73D493;
--warning-tint:#35260F;
--warning-text:#F2B866;
--shadow-xs:0 1px 2px rgba(0,0,0,.4);
--shadow-card:0 1px 1px rgba(0,0,0,.3),0 6px 20px -4px rgba(0,0,0,.5);
--shadow-md:0 4px 16px -2px rgba(0,0,0,.55);
--shadow-pop:0 16px 44px -8px rgba(0,0,0,.7),0 4px 14px rgba(0,0,0,.45);
--glass:rgba(29,26,19,.74);
--glass-2:rgba(29,26,19,.84);
--glass-pop:rgba(36,32,24,.96);
--glass-border:rgba(255,255,255,.09);
--glass-grad:linear-gradient(180deg,rgba(48,43,32,.78),rgba(30,27,20,.62));
--glass-shadow:0 10px 32px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.07) inset;
--glass-active:linear-gradient(180deg,rgba(210,183,95,.26),rgba(210,183,95,.12));
--glass-active-shadow:0 2px 10px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.1) inset;
--body-glow-1:rgba(210,183,95,.07);
--body-glow-2:rgba(210,183,95,.04);
--banner-bg:#3A3010;
--banner-text:#F3DE94;
color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif;
background:
radial-gradient(1100px 620px at 12% -8%, var(--body-glow-1), transparent 60%),
radial-gradient(900px 700px at 100% 0%, var(--body-glow-2), transparent 55%),
var(--bg);
background-attachment:fixed;
color:var(--text);
min-height:100vh;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
letter-spacing:-.005em;
}
a{color:var(--accent-text)}
/* ── Bewegung (Apple-artige Easing-Kurven: gedämpft-elastisch für Eintritte,
sanft für Hover/Fokus) — respektiert prefers-reduced-motion global. ────── */
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.94) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(31,122,61,.35)}50%{box-shadow:0 0 0 7px rgba(31,122,61,0)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
/* ── App shell / sidebar ─────────────────────────────────────────────── */
.app-shell{display:flex;min-height:100vh}
.sidebar{
width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
background:var(--glass);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);
border-right:1px solid var(--border);
position:fixed;top:0;left:0;bottom:0;
display:flex;flex-direction:column;
padding:1.6rem 1.1rem 1.1rem;
overflow-y:auto;
}
.sidebar-brand{
display:flex;align-items:center;gap:.6rem;
font-size:1.22rem;font-weight:800;letter-spacing:-0.03em;
padding:.25rem .6rem;margin-bottom:2rem;color:var(--text);text-decoration:none;
}
.sidebar-brand .mark{
width:28px;height:28px;border-radius:9px;background:var(--accent-grad);
display:flex;align-items:center;justify-content:center;color:var(--accent-contrast);flex-shrink:0;
box-shadow:0 2px 6px rgba(184,154,69,.4),inset 0 1px 0 rgba(255,255,255,.35);
}
.sidebar-brand .mark svg{width:16px;height:16px}
.sidebar-nav{display:flex;flex-direction:column;gap:.15rem;flex:1}
.sidebar-nav .nav-section-label{
font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800;
color:var(--text-secondary);padding:1.2rem .7rem .5rem;opacity:.75;
}
.sidebar-nav .nav-section-label:first-child{padding-top:0}
.sidebar-nav a{
display:flex;align-items:center;gap:.7rem;
padding:.6rem .7rem;border-radius:var(--radius-sm);
color:var(--text);text-decoration:none;font-size:.89rem;font-weight:600;
transition:background .18s var(--ease-out),color .18s var(--ease-out),transform .1s ease,box-shadow .18s ease;
position:relative;
}
.sidebar-nav a svg{width:18px;height:18px;flex-shrink:0;color:var(--text-secondary);transition:color .18s ease,transform .18s var(--ease-spring)}
.sidebar-nav a:hover{background:var(--surface-alt)}
.sidebar-nav a:hover svg{transform:translateX(1px)}
.sidebar-nav a:active{transform:scale(.98)}
.sidebar-nav a.active{
background:var(--accent-grad);color:var(--accent-contrast);
box-shadow:0 3px 10px -2px rgba(184,154,69,.55),inset 0 1px 0 rgba(255,255,255,.3);
}
.sidebar-nav a.active svg{color:var(--accent-contrast)}
.nav-badge{margin-left:auto;background:var(--danger);color:#fff;font-size:.68rem;font-weight:800;line-height:1;padding:.26rem .46rem;border-radius:999px;flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.sidebar-nav a.active .nav-badge{background:rgba(255,255,255,.92);color:#B89A45}
.sidebar-footer{
border-top:1px solid var(--border);margin-top:.85rem;padding-top:.9rem;
display:flex;align-items:center;gap:.6rem;padding-left:.5rem;padding-right:.25rem;
}
.sidebar-footer .avatar{
width:31px;height:31px;border-radius:50%;background:var(--accent-tint);color:var(--accent-text);
display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;flex-shrink:0;
box-shadow:inset 0 0 0 1px rgba(184,154,69,.2);
}
.sidebar-footer .user-name{font-size:.83rem;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.sidebar-footer button{
background:none;border:none;color:var(--text-secondary);cursor:pointer;
font-size:.78rem;padding:.42rem;border-radius:var(--radius-sm);flex-shrink:0;
display:flex;align-items:center;justify-content:center;transition:background .15s ease,color .15s ease;
}
.sidebar-footer button:hover{background:var(--danger-tint);color:var(--danger)}
.sidebar-footer button svg{width:16px;height:16px}
.content{margin-left:var(--sidebar-w);flex:1;min-width:0;padding:2.9rem 3.2rem 4rem;max-width:1060px}
/* ── Bottom nav (mobile) ─────────────────────────────────────────────── */
.bottom-nav{
display:none;position:fixed;left:0;right:0;bottom:0;z-index:20;
background:var(--glass-2);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);
border-top:1px solid var(--border);
/* Zusätzlich zum reinen Safe-Area-Inset noch etwas extra Luft nach unten —
manche mobile Browser (z. B. Safari-Adressleiste unten) legen ihre eigene,
nicht per Safe-Area erfasste Bedienleiste über den unteren Rand, wodurch
die echten Tabs sonst schwer zu treffen sind. */
padding:.45rem .5rem calc(1.1rem + env(safe-area-inset-bottom));
box-shadow:0 -8px 24px rgba(30,22,6,.05);
}
.bottom-nav-inner{display:flex;align-items:center;justify-content:center;max-width:560px;margin:0 auto;width:100%}
/* .bn-main ist die "normale", unangetastete 5er-Leiste (Start/Arbeitsplan/
Abwesenheit/Mitteilungen/Mehr) — exakt wie sie ohne die Erweiterung aussehen
würde. Die Extra-Tabs stecken in einer separaten Gruppe DANEBEN statt
INNERHALB dieser Verteilung, damit .bn-main sich beim Auf-/Zuklappen der
Extra-Gruppe keinen Pixel verschiebt. `flex:1 1 0` auf den Tabs (statt einer
festen `min-width`) teilt die verfügbare Breite IMMER exakt gleichmäßig auf
— ein langes Label wie "Mitteilungen" kann dadurch nie mehr einen Nachbar-
Tab (z. B. "Abwesenheit") aus der Leiste hinausdrücken/verschwinden lassen. */
.bn-main{display:flex;justify-content:space-around;align-items:center;flex:1;min-width:0}
.bottom-nav a,.bottom-nav button{
position:relative;display:flex;flex-direction:column;align-items:center;gap:.2rem;
color:var(--text-secondary);text-decoration:none;font-size:.62rem;font-weight:700;
padding:.4rem .3rem;border-radius:var(--radius-md);
flex:1 1 0;min-width:0;max-width:88px;
transition:color .18s var(--ease-out),background .18s var(--ease-out),max-width .3s var(--ease-out),padding .3s var(--ease-out);
background:none;border:none;font-family:inherit;cursor:pointer;
}
.bottom-nav a span,.bottom-nav button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.bottom-nav a svg,.bottom-nav button svg{width:22px;height:22px;flex-shrink:0;transition:transform .3s var(--ease-spring)}
.bottom-nav a:active svg,.bottom-nav button:active svg{transform:scale(.88)}
.bottom-nav a.active,.bottom-nav button.active{color:var(--accent-text);background:var(--accent-tint)}
.bottom-nav a.active svg,.bottom-nav button.active svg{transform:translateY(-1px) scale(1.06)}
/* Zusätzliche Tabs (Übersicht/Team/Profil) — eigene Gruppe RECHTS NEBEN
.bn-main (nicht Teil von dessen Verteilung), stehen immer im DOM, sind aber
eingeklappt (0 Breite, unsichtbar, nicht klickbar) bis der Nutzer auf "Mehr"
tippt. Klappt dann direkt in der Leiste rechts von "Mehr" auf, statt als
Overlay zu erscheinen — bleibt ausgefahren, bis erneut auf "Mehr" getippt
wird. */
.bn-extra-group{
display:flex;align-items:center;max-width:0;opacity:0;overflow:hidden;
transition:max-width .35s var(--ease-out),opacity .22s ease;
}
.bottom-nav-inner.expanded .bn-extra-group{max-width:280px;opacity:1}
/* 8 Icons MIT Textlabel passen auf schmalen Handys nicht nebeneinander (das
führte zu Umbrüchen/Layoutsprüngen). Lösung: im ausgeklappten Zustand
schrumpft NUR .bn-main (die ursprünglichen Tabs vor "Mehr") auf reine,
kompakte Icons ohne Label — die neu aufgeklappte .bn-extra-group behält
ihre Beschriftung und bekommt dafür feste, kompakte Tab-Breiten plus
horizontales Scrollen bei Bedarf (unsichtbare Scrollbar), statt Text
abzuschneiden. Beim erneuten Zuklappen zeigt .bn-main wieder ganz normal
seine Labels. */
.bottom-nav-inner.expanded .bn-main a,.bottom-nav-inner.expanded .bn-main button{max-width:56px;padding-left:.4rem;padding-right:.4rem}
.bottom-nav-inner.expanded .bn-main a span,.bottom-nav-inner.expanded .bn-main button span{display:none}
.bottom-nav-inner.expanded .bn-extra-group{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.bottom-nav-inner.expanded .bn-extra-group::-webkit-scrollbar{display:none}
.bottom-nav-inner.expanded .bn-extra-group a,.bottom-nav-inner.expanded .bn-extra-group button{flex:0 0 auto;min-width:60px;max-width:64px;padding-left:.3rem;padding-right:.3rem}
.bottom-nav-inner.expanded .bn-extra-group a span,.bottom-nav-inner.expanded .bn-extra-group button span{font-size:.56rem}
/* ── Mobile (≤860px): eigener Modal-Bottom-Sheet-Stil, kompaktere Karten/
Typografie, feste 2-Spalten-Stats — fühlt sich nativer an als die 1:1
verkleinerte Desktop-Ansicht. Rein optisch, keine Funktionsänderung. ──── */
@media (max-width:860px){
.app-shell{flex-direction:column}
.sidebar{display:none}
.content{margin-left:0;padding:1rem 1rem calc(5.6rem + env(safe-area-inset-bottom))}
.bottom-nav{display:block}
h1{font-size:1.42rem}
h2{font-size:1rem}
.sub{font-size:.85rem;margin-bottom:.7rem}
input,select,textarea{margin-bottom:.65rem}
label{margin-bottom:.25rem}
/* Karten-Kopfzeilen (Titel + Aktions-Button, z. B. "Mitarbeiter" + "+ Mitarbeiter
anlegen") sind auf Desktop bewusst eine feste Zeile (space-between), auf
schmalen Handys reicht die Breite dafür aber oft nicht — Titel und Button
kollidierten/überlappten sich. Auf Mobile daher umbrechen lassen statt in
einer Zeile zu erzwingen. */
.card-header-row{flex-wrap:wrap;row-gap:.6rem}
/* min-width:0 ist hier der eigentliche Fix: Flexbox-Kinder verweigern per
Default (min-width:auto) das Schrumpfen unter ihre Textbreite, selbst mit
flex-wrap — ein langer Titel wie "Abwesenheitsanträge" schob sich auf
schmalen Handys (~320px) dadurch über den Kartenrand hinaus, statt im
Titel selbst umzubrechen. */
.card-header-row h1,.card-header-row h2{width:100%;min-width:0;overflow-wrap:break-word}
.card-header-row{min-width:0}
.card-header-row > *{min-width:0}
.card{padding:1.05rem 1rem;border-radius:var(--radius-lg);margin-bottom:.8rem}
/* .content-Präfix erhöht die Spezifität bewusst über die spätere, im
Quellcode nachfolgende allgemeine .stat-grid-Regel (Zeile ~522) —
bei gleicher Spezifität hätte sonst die Reihenfolge im CSS gewonnen,
nicht die Media Query, und die 2-Spalten-Regel hätte auf Mobile NIE
gegriffen (auto-fit ist dann je nach Kartenbreite mal 1-, mal
2-spaltig statt zuverlässig 2 Spalten zu zeigen). */
.content .stat-grid{grid-template-columns:repeat(2,1fr);gap:.55rem}
.content .stat-grid.stat-grid-3{grid-template-columns:repeat(3,1fr)}
.stat{padding:.7rem .55rem}
.stat .val{font-size:1.25rem}
.stat-grid-3 .stat .val{font-size:1rem;white-space:nowrap}
.stat-grid-3 .stat .lbl{font-size:.68rem}
.intro-text{display:none}
.clock-hero{padding:.7rem .85rem;gap:.7rem;margin:.5rem 0 .8rem}
.clock-hero-icon{width:38px;height:38px}
.clock-hero-time{font-size:1.15rem}
/* Modals werden zu Bottom-Sheets: fühlt sich auf einem Touch-Gerät deutlich
natürlicher an als ein zentriertes Desktop-Popup. */
.modal-backdrop{align-items:flex-end;padding:0}
.modal-card{
max-width:100%;width:100%;max-height:92vh;max-height:92dvh;border-radius:var(--radius-xl) var(--radius-xl) 0 0;
padding:1.1rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom));
animation:sheetUp .32s var(--ease-out) both;
}
.modal-backdrop.closing .modal-card{animation:sheetUp .18s ease reverse both}
.modal-actions{flex-wrap:wrap;gap:.5rem}
.modal-actions .btn{flex:1 1 40%}
.modal-card h3{margin-bottom:.8rem}
}
@keyframes sheetUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:400px){
.bottom-nav a,.bottom-nav button{padding:.4rem .3rem}
.bottom-nav a span,.bottom-nav button span{font-size:.58rem}
}
/* ── Arbeitsplan: Zeitachsen-Raster (Uhrzeiten links, 7 Tage nebeneinander) ─ */
.week-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.15rem;gap:.75rem;flex-wrap:wrap}
.week-nav .week-label{font-weight:700;font-size:.95rem;letter-spacing:-.01em}
.view-switch{display:inline-flex;background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-sm);padding:2px;gap:1px}
.view-switch button{
background:none;border:none;padding:.42rem .8rem;font-size:.8rem;font-weight:700;
color:var(--text-secondary);border-radius:8px;cursor:pointer;white-space:nowrap;
transition:background .2s var(--ease-out),color .2s ease,box-shadow .2s ease;
}
.view-switch button.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-xs)}
.timegrid-head-row{display:grid;grid-template-columns:34px repeat(7,1fr);gap:0;margin-bottom:.35rem}
.timegrid-head-row .day-head{
text-align:center;font-size:.62rem;font-weight:700;color:var(--text-secondary);
cursor:pointer;border-radius:7px;padding:.2rem 0;transition:background .15s ease;
}
.timegrid-head-row .day-head:hover{background:var(--surface-alt)}
.timegrid-head-row .day-head .num{display:block;font-size:.84rem;color:var(--text);font-weight:700;margin-top:1px}
.timegrid-head-row .day-head.is-today{color:var(--accent-text)}
.timegrid-head-row .day-head.is-today .num{color:var(--accent-text)}
.timegrid-scroll{overflow-y:auto;overflow-x:hidden;max-height:620px;border-top:1px solid var(--border);padding:8px 0}
.timegrid{
display:grid;grid-template-columns:34px repeat(7,1fr);position:relative;
background-image:linear-gradient(to bottom, var(--border) 1px, transparent 1px);
background-repeat:repeat-y;
}
.timegrid .time-axis{position:relative;background:var(--surface)}
.timegrid .time-axis .hour-label{
position:absolute;right:6px;transform:translateY(-50%);
font-size:.6rem;color:var(--text-secondary);white-space:nowrap;
}
.timegrid .day-col{position:relative;border-left:1px solid var(--border)}
/* "Jetzt"-Linie: rot, über die volle Breite, gleitet minütlich weiter statt zu
springen (transition:top macht aus dem 60s-Sprung der Ticker-Aktualisierung
eine sichtbar fließende Bewegung). */
.now-line{position:absolute;left:0;right:0;height:0;border-top:2px solid var(--danger);z-index:5;pointer-events:none;transition:top 1s linear}
.now-line::before{
content:'';position:absolute;left:29px;top:-4px;width:8px;height:8px;
border-radius:50%;background:var(--danger);box-shadow:0 0 0 3px rgba(201,82,74,.2);
}
/* Soll: deutlich erkennbare, farbig getönte Fläche mit kräftigerem Rahmen und
farbigem linkem Akzentstreifen (nur Orientierung, daher weiterhin gestrichelt/
gepunktet statt eines vollen Blocks wie beim Ist). Der vorherige, fast weiß-
transparente Look war zu unauffällig — Hintergrund mischt jetzt die
Schicht-Farbe (currentColor) mit der Kartenfarbe, statt pauschal Weiß. */
.plan-bar{
position:absolute;left:2px;right:2px;border-radius:6px;overflow:hidden;
border:2px dashed currentColor;background:color-mix(in srgb, currentColor 20%, var(--surface));
box-shadow:inset 3px 0 0 currentColor;
padding:1px 4px;cursor:pointer;z-index:1;line-height:1.15;font-weight:700;
transition:transform .15s var(--ease-out),box-shadow .15s ease,background .15s ease;
}
.plan-bar:hover{transform:scale(1.03);z-index:3;box-shadow:inset 3px 0 0 currentColor,0 3px 10px rgba(0,0,0,.16)}
.plan-bar .lbl{font-size:.6rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plan-bar .time{font-size:.52rem;font-weight:600;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plan-bar.is-self{border-style:dotted}
/* Nachträglich (per genehmigtem Verschiebungsantrag) verschobene Schicht:
kleines Rotations-Icon in der Ecke statt die Farbcodierung nach Label zu
überschreiben — bleibt so mit jeder Schicht-Farbe kombinierbar. */
.moved-badge{
position:absolute;top:0;right:1px;font-size:.55rem;font-weight:900;line-height:1;
color:var(--accent-contrast);opacity:.8;
}
/* Ist: dicker, durchgezogener Block — liegt über dem Soll und deckt ihn im
überlappenden Zeitraum ab (tatsächlich gestempelte Zeit gewinnt visuell). */
.ist-block{
--ist-color:var(--accent);
position:absolute;left:2px;right:2px;border-radius:5px;overflow:hidden;
padding:1px 3px;color:var(--accent-contrast);background:var(--ist-color);box-shadow:0 2px 6px rgba(0,0,0,.22);
cursor:pointer;z-index:2;line-height:1.1;
transition:transform .15s var(--ease-out),box-shadow .15s ease;
}
.ist-block:hover{transform:scale(1.03);z-index:4;box-shadow:0 4px 12px rgba(0,0,0,.28)}
.ist-block .time{font-size:.54rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ist-block.is-open{background:linear-gradient(to bottom, var(--ist-color) 0%, var(--ist-color) 80%, transparent 100%)}
@media (max-width:480px){
.timegrid-head-row .day-head .num{font-size:.72rem}
.plan-bar{padding:1px 2px}
.plan-bar .lbl{font-size:.5rem}
.ist-block{padding:1px 2px}
.ist-block .time{font-size:.48rem}
}
/* ── Modal ───────────────────────────────────────────────────────────── */
.modal-backdrop{
position:fixed;inset:0;background:rgba(24,18,6,.42);backdrop-filter:blur(3px);
display:flex;align-items:center;justify-content:center;z-index:50;padding:1.25rem;
animation:fadeIn .18s ease both;
}
.modal-card{max-height:calc(100vh - 2.5rem);max-height:calc(100dvh - 2.5rem);overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative;background:var(--surface);border-radius:var(--radius-xl);padding:1.6rem;max-width:380px;width:100%;box-shadow:var(--shadow-pop);animation:scaleIn .28s var(--ease-out) both}
.modal-close{
position:absolute;top:.85rem;right:.85rem;width:29px;height:29px;border-radius:50%;
background:var(--surface-alt);border:none;color:var(--text-secondary);font-size:1.3rem;line-height:1;
cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
transition:background .15s ease,color .15s ease,transform .12s ease;
}
.modal-close:hover{background:var(--border);color:var(--text)}
.modal-close:active{transform:scale(.9)}
.modal-backdrop.closing{animation:fadeIn .16s ease reverse both}
.modal-backdrop.closing .modal-card{animation:scaleIn .16s cubic-bezier(.4,0,.2,1) reverse both}
.modal-card h3{font-size:1.08rem;font-weight:700;letter-spacing:-.01em;margin:0 1.8rem 1.15rem 0}
.modal-actions{display:flex;gap:.6rem;margin-top:.5rem}
.modal-actions .btn{flex:1}
/* ── Mitteilungen ────────────────────────────────────────────────────── */
.ann-list{display:flex;flex-direction:column;gap:.7rem}
.announcement{
border:1px solid var(--border);border-radius:var(--radius-md);padding:1rem 1.1rem;
background:var(--surface);cursor:pointer;
transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .12s ease;
animation:fadeSlideUp .4s var(--ease-out) both;
}
.announcement:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.announcement:active{transform:scale(.99)}
.announcement:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.a-body-preview{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.announcement:nth-child(1){animation-delay:.03s}
.announcement:nth-child(2){animation-delay:.06s}
.announcement:nth-child(3){animation-delay:.09s}
.announcement:nth-child(n+4){animation-delay:.12s}
.announcement.is-unread{border-color:var(--accent);background:var(--accent-tint)}
.announcement .a-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.2rem}
.announcement .a-title{font-weight:700;font-size:.95rem;flex:1;min-width:0}
.announcement .a-badge{
background:var(--accent-grad);color:var(--accent-contrast);font-size:.62rem;font-weight:800;
padding:.16rem .55rem;border-radius:999px;flex-shrink:0;letter-spacing:.03em;text-transform:uppercase;
}
.announcement .a-date{font-size:.72rem;color:var(--text-secondary);margin-bottom:.5rem}
.announcement .a-body{font-size:.87rem;color:var(--text);line-height:1.55;white-space:pre-wrap}
/* Lese-Fortschritt (Admin-Sicht): wie viele Mitarbeiter eine Mitteilung schon
geöffnet haben, aus announcement_reads berechnet. */
.read-progress{display:flex;align-items:center;gap:.6rem;margin-top:.7rem}
.read-bar{flex:1;height:6px;border-radius:999px;background:var(--bg);overflow:hidden}
.read-bar-fill{height:100%;background:var(--accent-grad);border-radius:999px;transition:width .5s var(--ease-out)}
.read-label{font-size:.72rem;color:var(--text-secondary);white-space:nowrap;flex-shrink:0}
/* ── Profil ──────────────────────────────────────────────────────────── */
.profile-head{display:flex;align-items:center;gap:1.1rem;margin-bottom:.6rem}
.profile-head .avatar-lg{
width:58px;height:58px;border-radius:50%;background:var(--accent-grad);color:var(--accent-contrast);
display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:800;flex-shrink:0;
box-shadow:0 4px 14px rgba(184,154,69,.35),inset 0 1px 0 rgba(255,255,255,.3);
}
.profile-head .name{font-size:1.18rem;font-weight:800;letter-spacing:-.01em}
.profile-head .email{font-size:.85rem;color:var(--text-secondary)}
.info-list{display:flex;flex-direction:column}
.info-list .info-row{display:flex;justify-content:space-between;padding:.7rem 0;border-bottom:1px solid var(--border);font-size:.87rem}
.info-list .info-row:last-child{border-bottom:none}
.info-list .info-row .k{color:var(--text-secondary)}
.info-list .info-row .v{font-weight:700}
.admin-link-list{display:flex;flex-direction:column;gap:.4rem}
.admin-link-list a{
display:flex;align-items:center;gap:.7rem;padding:.7rem .8rem;border-radius:var(--radius-sm);
color:var(--text);text-decoration:none;font-size:.88rem;font-weight:700;background:var(--surface-alt);
border:1px solid var(--border);transition:background .15s ease,border-color .15s ease,transform .12s ease,box-shadow .15s ease;
}
.admin-link-list a:hover{background:var(--surface);border-color:var(--border-strong);box-shadow:var(--shadow-xs);transform:translateY(-1px)}
.admin-link-list a svg{width:18px;height:18px;color:var(--text-secondary)}
/* ── Typography ──────────────────────────────────────────────────────── */
h1{font-size:1.75rem;font-weight:800;letter-spacing:-0.03em;margin:0 0 .3rem}
h2{font-size:1.06rem;font-weight:700;letter-spacing:-.01em;margin:0 0 .9rem;color:var(--text)}
.sub{color:var(--text-secondary);font-size:.9rem;margin:0 0 1.25rem;line-height:1.5}
/* ── Cards ───────────────────────────────────────────────────────────── */
.card{
background:var(--surface);border-radius:var(--radius-xl);border:1px solid rgba(30,22,6,.045);
padding:1.8rem;margin-bottom:1.5rem;box-shadow:var(--shadow-card);
animation:fadeSlideUp .5s var(--ease-out) both;
}
/* Sanft gestaffelter Eintritt der ersten paar Karten pro Seite beim Laden. */
main.content>.card:nth-of-type(1){animation-delay:0s}
main.content>.card:nth-of-type(2){animation-delay:.06s}
main.content>.card:nth-of-type(3){animation-delay:.12s}
main.content>.card:nth-of-type(4){animation-delay:.18s}
/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
background:var(--accent-grad);color:var(--accent-contrast);border:none;border-radius:var(--radius-sm);
padding:.7rem 1.3rem;font-size:.9rem;font-weight:700;cursor:pointer;letter-spacing:-.005em;
box-shadow:0 1px 2px rgba(30,22,6,.06),inset 0 1px 0 rgba(255,255,255,.25);
text-decoration:none;transition:background .15s var(--ease-out),transform .12s var(--ease-out),box-shadow .15s ease,filter .15s ease;
}
.btn:hover{background:var(--accent-grad-hover);transform:translateY(-1px);box-shadow:0 6px 16px -2px rgba(184,154,69,.45)}
.btn:active{filter:brightness(.94);transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:var(--danger-hover);box-shadow:0 6px 16px -2px rgba(201,82,74,.45)}
.btn-edit{background:var(--edit);color:#fff}
.btn-edit:hover{background:var(--edit-hover);box-shadow:0 6px 16px -2px rgba(79,114,134,.4)}
.btn-gray{background:var(--surface-alt);color:var(--text);border:1px solid var(--border);box-shadow:none}
.btn-gray:hover{background:var(--border);box-shadow:none}
.btn-sm{padding:.42rem .85rem;font-size:.8rem;border-radius:8px}
/* ── Forms ───────────────────────────────────────────────────────────── */
label{display:block;font-size:.8rem;font-weight:700;color:var(--text-secondary);margin-bottom:.35rem}
input,select,textarea{
width:100%;padding:.68rem .85rem;border:1px solid var(--border);border-radius:var(--radius-sm);
font-size:.9rem;margin-bottom:.9rem;font-family:inherit;background:var(--surface-alt);color:var(--text);
transition:border-color .12s ease,box-shadow .12s ease,background .12s ease;
box-sizing:border-box;
}
/* iOS Safari lässt "datetime-local"/"date"-Felder (Datum + Uhrzeit-Segmente
+ Kalender-Icon) nicht zuverlässig auf die gesetzte Breite schrumpfen —
das native Eigen-Styling beansprucht dabei mehr Platz, als die Box hat,
und ragt über den Rand hinaus (z. B. im "Eintrag anlegen"-Modal bei Start/
Ende, während "Pause"-Feld daneben korrekt endet). -webkit-appearance:none
entfernt dieses Eigen-Styling; Tippen öffnet weiterhin denselben nativen
Picker. */
input[type="datetime-local"],input[type="date"],input[type="time"],input[type="month"]{
-webkit-appearance:none;appearance:none;
}
@media (max-width:480px){
input[type="datetime-local"]{font-size:.82rem;padding-left:.55rem;padding-right:.3rem}
}
input:hover,select:hover,textarea:hover{border-color:var(--border-strong)}
input:focus,select:focus,textarea:focus{
outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px rgba(210,183,95,.22);
}
/* flex-wrap + min-width:0 beheben den klassischen Flexbox-Überlauf: ohne das
verweigern Kinder (Selects/Inputs mit langem Inhalt) das Schrumpfen unter
ihre Inhaltsbreite und sprengen den Container, statt umzubrechen — genau
das war die Ursache für Text, der bei vielen Admin-Formularen/Filterzeilen
über den Rand hinauslief. */
.row-inline{display:flex;flex-wrap:wrap;gap:.85rem}
.row-inline > *{flex:1 1 160px;min-width:0}
/* Für Felder, die IMMER nebeneinander bleiben sollen (z. B. Von/Bis-Datum),
statt bei zu wenig Platz umzubrechen wie .row-inline es bewusst tut.
CSS-Grid mit fester 2-Spalten-Aufteilung + min-width:0 auf den Kindern
erzwingt das Nebeneinander auch dann, wenn ein natives
auf iOS eine größere intrinsische Mindestbreite hat, als noch Platz ist —
die Felder schrumpfen dann eben, statt umzubrechen. */
/* minmax(0,1fr) statt nur 1fr: Safari respektiert bei reinem "1fr" das
Schrumpfen von Grid-Kindern nicht zuverlässig (bekannter WebKit-Bug) —
ohne minmax(0,...) blieben die nativen -Felder auf
iOS in ihrer eigenen Mindestbreite und überlappten sich dadurch, obwohl
die Grid-Spalten selbst korrekt schmaler berechnet wurden. */
/* Explizites calc()-Fixmaß statt Grid/fr: bei manchen iOS-Safari-Versionen
wird die Breite von Grid-Spalten mit nativen -Kindern
trotz minmax(0,1fr) nicht zuverlässig neu berechnet — die Felder blieben
dann bei ihrer alten/intrinsischen Breite und überlappten sich weiterhin
in der Mitte. flex mit fester calc(50% - gap/2)-Basis (kein grow/shrink)
ist deterministisch und hängt nicht von der fr/minmax-Auflösung der
jeweiligen Engine ab. */
.row-2col{display:flex;gap:.4rem}
.row-2col > *{flex:0 0 calc(50% - .2rem);min-width:0;max-width:calc(50% - .2rem)}
/* KEIN overflow:hidden auf dem Input selbst: iOS Safari respektiert dabei
den border-radius des Feldes nicht (bekannter WebKit-Rendering-Bug bei
nativen Formularelementen) — das Feld wurde dadurch eckig abgeschnitten
statt die Ecken rund zu behalten. Stattdessen wird die Schrift/das Padding
klein genug gemacht, dass das native Datums-Widget gar nicht erst
schrumpfen/clippen muss. */
/* -webkit-appearance:none entfernt das native iOS-Eigen-Styling des
Datumsfelds (das reserviert intern Platz für Icon/Segmente unabhängig von
der gesetzten CSS-Breite und ignoriert dabei die Box — das war vermutlich
die eigentliche Ursache der Überlappung, nicht die Grid/Flex-Berechnung
selbst). Tippen öffnet weiterhin denselben nativen Datums-Picker. */
.row-2col input{min-width:0;width:100%;border-radius:var(--radius-sm);-webkit-appearance:none;appearance:none}
@media (max-width:480px){
.row-2col input[type="date"]{font-size:.68rem;padding-left:.35rem;padding-right:.15rem}
}
/* ── Tables ──────────────────────────────────────────────────────────── */
/* Breite Tabellen (mit Inline-Inputs o. Ä.) laufen auf schmalen Mobile-
Viewports sonst über den Rand hinaus, statt horizontal zu scrollen.
:has(table) statt :has(> table), da manche Tabellen (z. B. admin/zeiten.html)
zusätzlich in einen .screen-only/.print-only-Wrapper verschachtelt sind. */
.card:has(table){overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.86rem}
th,td{padding:.75rem .65rem;text-align:left;border-bottom:1px solid var(--border)}
th{color:var(--text-secondary);font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;border-bottom-color:var(--border-strong)}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .15s ease}
tbody tr:hover{background:var(--surface-alt)}
/* Ungelesene Benachrichtigungen (admin/benachrichtigungen.html) sollen sofort
auffallen, nicht nur durch fett — Akzent-Balken links + leichte Einfärbung. */
tbody tr.is-unseen{font-weight:600;background:var(--accent-tint);box-shadow:inset 3px 0 0 var(--accent)}
tbody tr.is-unseen:hover{background:var(--accent-tint)}
/* Stornierte Nachträge (admin/benachrichtigungen.html) bleiben sichtbar statt zu
verschwinden — rot + durchgestrichen macht auf einen Blick klar, dass der
Zeiteintrag storniert wurde. */
tbody tr.is-cancelled{color:var(--danger);text-decoration:line-through}
tbody tr.is-cancelled:hover{background:var(--danger-tint)}
/* Mehrere Buttons in einer Tabellenzelle (z. B. Bearbeiten/Deaktivieren/PW
zurücksetzen in admin/index.html) — sauber untereinander statt zufällig
umzubrechen, mit einheitlicher Breite/Ausrichtung. */
.row-actions{display:flex;flex-direction:column;align-items:stretch;gap:.4rem;min-width:9.5rem}
.row-actions .btn{white-space:nowrap;justify-content:center}
/* Zwei bis drei Buttons nebeneinander in einer Tabellenzelle (z. B. Bearbeiten/
Löschen, Genehmigen/Ablehnen) — bleiben als Gruppe zusammen und brechen bei
Platzmangel gemeinsam um, statt mitten im Button-Text umzubrechen. */
.row-actions-inline{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:flex-end}
.row-actions-inline .btn{white-space:nowrap}
/* ── Badges ──────────────────────────────────────────────────────────── */
.badge{display:inline-block;padding:.28rem .68rem;border-radius:999px;font-size:.73rem;font-weight:700;letter-spacing:-.005em}
.badge-beantragt{background:var(--warning-tint);color:var(--warning-text)}
.badge-genehmigt{background:var(--success-tint);color:var(--success-text)}
.badge-abgelehnt{background:var(--danger-tint);color:var(--danger-text)}
.badge-gray{background:var(--surface-alt);color:var(--text-secondary);border:1px solid var(--border)}
/* ── Stats ───────────────────────────────────────────────────────────── */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem;margin-bottom:.5rem}
.stat{
background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-md);
padding:1.15rem 1rem;text-align:center;animation:scaleIn .4s var(--ease-out) both;
transition:transform .15s ease,box-shadow .15s ease;
min-width:0;overflow:hidden;
}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-xs)}
.stat:nth-child(1){animation-delay:.05s}
.stat:nth-child(2){animation-delay:.1s}
.stat:nth-child(3){animation-delay:.15s}
.stat:nth-child(4){animation-delay:.2s}
.stat .val{font-size:1.65rem;font-weight:800;letter-spacing:-0.03em;color:var(--text);font-variant-numeric:tabular-nums}
.stat .val.neg{color:var(--danger)}
.stat .lbl{font-size:.76rem;color:var(--text-secondary);margin-top:.25rem;font-weight:600}
/* ── Messages ────────────────────────────────────────────────────────── */
.msg{padding:.7rem .95rem;border-radius:var(--radius-sm);font-size:.85rem;margin-bottom:1.1rem;font-weight:600;animation:fadeSlideUp .25s var(--ease-out) both}
.msg-ok{background:var(--success-tint);color:var(--success-text)}
.msg-err{background:var(--danger-tint);color:var(--danger-text)}
/* ── Stempeluhr ──────────────────────────────────────────────────────── */
.clock-hero{
display:flex;align-items:center;gap:1.1rem;margin:.9rem 0 1.4rem;
padding:1.1rem 1.2rem;background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-md);
}
.clock-hero-icon{
width:50px;height:50px;border-radius:50%;flex-shrink:0;
background:var(--surface);color:var(--text-secondary);border:1px solid var(--border);
display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.clock-hero-icon svg{width:23px;height:23px}
.clock-hero-icon.active{background:var(--success-tint);color:var(--success-text);border-color:transparent;animation:pulseGlow 2.4s ease-in-out infinite}
.clock-hero-info{flex:1;min-width:0}
.clock-hero-status{font-size:.82rem;color:var(--text-secondary);font-weight:700}
.clock-hero-time{font-size:1.4rem;font-weight:800;color:var(--text);letter-spacing:-.02em;margin-top:.1rem;font-variant-numeric:tabular-nums}
/* ── Auth pages (Login, Registrierung, Passwort vergessen/zurücksetzen, E-Mail bestätigen) ──
Zweigeteilt: links das Formular, rechts eine goldene Fläche mit laufender Uhr (assets/auth.js).
Schmal (Handy): Uhr als niedriger Kopfbereich, Formular als Blatt darunter. */
.auth-shell{
min-height:100vh;display:grid;grid-template-columns:minmax(380px,520px) 1fr;
background:var(--surface);
}
.auth-card{
grid-column:1;grid-row:1;position:relative;display:flex;flex-direction:column;
width:100%;min-height:100vh;padding:2.6rem clamp(1.6rem,5vw,4rem) 1.6rem;
background:var(--surface);border:0;border-radius:0;box-shadow:none;
}
.auth-card>*{max-width:420px;width:100%}
.auth-logo{display:flex;flex-direction:row;align-items:center;gap:.7rem;margin:0 0 2.6rem}
.auth-logo .mark{width:40px;height:40px;border-radius:12px;background:var(--accent-grad);display:flex;align-items:center;justify-content:center;color:var(--accent-contrast);box-shadow:0 6px 16px rgba(184,154,69,.38),inset 0 1px 0 rgba(255,255,255,.3)}
.auth-logo .mark svg{width:22px;height:22px}
.auth-logo h1{margin:0;font-size:1.3rem;font-weight:800;letter-spacing:-.02em}
.auth-h{margin:0 0 .35rem;font-size:1.95rem;line-height:1.15;font-weight:800;letter-spacing:-.025em}
.auth-sub{margin:0 0 1.8rem;color:var(--text-secondary);font-size:.96rem;line-height:1.5}
.auth-card label{font-size:.78rem;font-weight:700;color:var(--text-secondary);letter-spacing:.01em}
.auth-card input[type=text],.auth-card input[type=email],.auth-card input[type=password]{padding:.9rem 1rem;border-radius:var(--radius-md);font-size:1rem}
.auth-card .btn{padding:.95rem 1rem;border-radius:14px;font-size:1rem;font-weight:700}
.auth-card form .btn,.auth-card .btn[style*="width"]{box-shadow:0 10px 22px -10px rgba(201,162,76,.85)}
.switch-link{display:block;text-align:center;margin-top:1.4rem;font-size:.9rem;color:var(--text-secondary)}
.switch-link a{font-weight:700}
.auth-card .legal-links{margin-top:auto;padding-top:2.2rem;text-align:left}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:5.2rem!important}
.pw-toggle{position:absolute;right:.55rem;top:50%;transform:translateY(-50%);margin-top:-.45rem;background:none;border:0;font:inherit;font-size:.78rem;font-weight:700;color:var(--accent-text);cursor:pointer;padding:.35rem .5rem;border-radius:8px}
.pw-toggle:hover{background:var(--accent-tint)}
.caps-hint{display:none;margin:-.55rem 0 .9rem;font-size:.78rem;font-weight:600;color:var(--warning-text)}
.caps-hint.on{display:block}
.theme-btn{position:absolute;top:2.4rem;right:clamp(1.2rem,4vw,2.4rem);width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:var(--surface-alt);color:var(--text-secondary);cursor:pointer;display:grid;place-items:center;max-width:none;padding:0}
.theme-btn:hover{color:var(--text);border-color:var(--border-strong)}
.theme-btn svg{width:19px;height:19px}
.theme-btn .i-sun{display:none}
:root[data-theme="dark"] .theme-btn .i-sun{display:block}
:root[data-theme="dark"] .theme-btn .i-moon{display:none}
.auth-hero{
grid-column:2;grid-row:1;position:relative;overflow:hidden;display:grid;place-items:center;min-height:100vh;
background:radial-gradient(1200px 700px at 30% 18%,#F7E9BE 0%,#E9D08A 36%,#B98F3E 100%);color:#2E2510;
}
.auth-hero::before{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle at 50% 52%,rgba(255,255,255,.13) 0 1px,transparent 1px 46px)}
:root[data-theme="dark"] .auth-hero{background:radial-gradient(1200px 700px at 30% 18%,#5B4718 0%,#3A2E12 38%,#1B150A 100%);color:#F3ECDE}
:root[data-theme="dark"] .auth-hero::before{background:repeating-radial-gradient(circle at 50% 52%,rgba(226,196,118,.07) 0 1px,transparent 1px 46px)}
.hero-claim{position:absolute;top:2.8rem;left:3rem;right:3rem;max-width:420px;margin:0;font-size:1.55rem;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.hero-clock{position:relative;width:min(330px,56%);aspect-ratio:1;border-radius:50%;background:#FFFDF9;box-shadow:0 40px 80px -20px rgba(60,40,0,.5),inset 0 0 0 10px #F4EEE1,inset 0 0 0 11px #E3D9C4}
:root[data-theme="dark"] .hero-clock{background:#1D1A13;box-shadow:0 40px 80px -20px rgba(0,0,0,.7),inset 0 0 0 10px #26221A,inset 0 0 0 11px #4B4231}
.hero-clock .tk{position:absolute;left:50%;top:0;width:3px;height:100%;margin-left:-1.5px;transform:rotate(calc(var(--r)*1deg))}
.hero-clock .tk::before{content:"";position:absolute;top:7%;left:0;width:3px;height:4.2%;border-radius:2px;background:#CBBB90}
.hero-clock .tk.m::before{height:6.8%;background:#2E2510}
:root[data-theme="dark"] .hero-clock .tk::before{background:#6B5E3F}
:root[data-theme="dark"] .hero-clock .tk.m::before{background:#E6CB7E}
.hero-clock .hd{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:4px;background:#2E2510}
:root[data-theme="dark"] .hero-clock .hd{background:#F3ECDE}
.hero-clock .hd.h{width:2.4%;height:24%;margin-left:-1.2%;transform:rotate(var(--hr,0deg))}
.hero-clock .hd.mn{width:1.6%;height:35%;margin-left:-.8%;transform:rotate(var(--mr,0deg))}
.hero-clock .hd.s{width:.7%;height:39%;margin-left:-.35%;background:#C9524A!important;animation:heroSec 60s steps(60,end) infinite}
@keyframes heroSec{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.hero-clock .dot{position:absolute;left:50%;top:50%;width:5%;height:5%;margin:-2.5%;border-radius:50%;background:#2E2510;border:3px solid #C9524A}
:root[data-theme="dark"] .hero-clock .dot{background:#F3ECDE}
.hero-chip{position:absolute;display:flex;align-items:center;gap:.7rem;padding:.75rem 1rem;border-radius:16px;font-size:.82rem;line-height:1.3;color:#211D16;background:rgba(255,253,249,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 14px 30px -10px rgba(60,40,0,.42);animation:heroFloat 7s ease-in-out infinite}
.hero-chip b{display:block;font-size:.95rem}
.hero-chip i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-weight:800;flex:none;background:#E7F7EC;color:#1C7A3D}
.hero-chip.c2 i{background:#FBF3DC;color:#8E7226}
.hero-chip.c3 i{background:#E8EEF2;color:#4F7286}
:root[data-theme="dark"] .hero-chip{background:rgba(38,34,26,.9);color:#F3ECDE;box-shadow:0 14px 30px -10px rgba(0,0,0,.6)}
.hero-chip.c1{left:9%;top:17%}
.hero-chip.c2{right:7%;top:31%;animation-delay:-2.3s}
.hero-chip.c3{left:13%;bottom:13%;animation-delay:-4.6s}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.hero-stamp{position:absolute;right:11%;bottom:12%;border:3px solid currentColor;border-radius:10px;padding:.35rem .85rem;font-weight:800;letter-spacing:.12em;font-size:.9rem;transform:rotate(-8deg);opacity:.78}
.auth-hero.stamped .hero-stamp{animation:heroStamp .5s var(--ease-spring) both}
@keyframes heroStamp{0%{opacity:0;transform:rotate(-8deg) scale(2.6)}60%{opacity:1;transform:rotate(-8deg) scale(.94)}100%{opacity:1;transform:rotate(-8deg) scale(1)}}
.auth-hero.stamped .hero-clock{animation:heroThud .5s var(--ease-out)}
@keyframes heroThud{40%{transform:translateY(6px) scale(.985)}100%{transform:none}}
@media (max-width:900px){
.auth-shell{display:flex;flex-direction:column;background:var(--bg)}
.auth-hero{order:-1;min-height:0;height:210px;grid-column:auto}
.hero-claim,.hero-chip{display:none}
.hero-clock{width:132px;margin-top:-6px}
.hero-clock .tk::before{width:2px}
.hero-stamp{right:7%;bottom:auto;top:46%;font-size:.7rem;padding:.25rem .6rem;opacity:0}
.auth-card{min-height:calc(100vh - 182px);flex:1;margin-top:-28px;border-radius:28px 28px 0 0;padding:1.8rem 1.5rem 1.4rem;box-shadow:0 -10px 30px -12px rgba(30,22,6,.25);z-index:1}
.auth-card>*{max-width:none}
.auth-logo{margin-bottom:1.4rem}
.auth-h{font-size:1.65rem}
.auth-sub{margin-bottom:1.3rem}
.theme-btn{top:1.5rem;right:1.2rem}
.auth-card .legal-links{padding-top:1.6rem}
}
@media (min-width:901px) and (max-width:1100px){.hero-chip.c2{right:3%}.hero-claim{font-size:1.3rem}}
/* Eigene Vorschlagsliste fürs Firmen-Feld beim Login statt