@font-face {
font-family: "Jost";
src: url("fonts/jost-latin-wght-normal.woff2") format("woff2-variations");
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Jost";
src: url("fonts/jost-latin-ext-wght-normal.woff2") format("woff2-variations");
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Jost";
src: url("fonts/jost-latin-wght-italic.woff2") format("woff2-variations");
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Cormorant Garamond";
src: url("fonts/cormorant-garamond-latin-300-italic.woff2") format("woff2");
font-weight: 300;
font-style: italic;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Cormorant Garamond";
src: url("fonts/cormorant-garamond-latin-ext-300-italic.woff2") format("woff2");
font-weight: 300;
font-style: italic;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}
:root {
color-scheme: light;
--color-bg: #fdfcfa;
--color-bg-alt: #f3f1ec;
--color-surface: #ffffff;
--color-surface-2: #fbfaf7;
--color-border: #ebe8e2;
--color-border-strong: #d9d5cd;
--chart-grid: #efece6;
--color-text: #161512;
--color-text-muted: #66635d;
--color-text-faint: #85827b;
--color-accent: #0a6b4f;
--color-accent-hover: #08573f;
--color-accent-strong: #053d2c;
--color-accent-soft: #d7ece3;
--color-accent-2: #1f8a66;
--color-success: #21c45d;
--color-success-soft: #d5f5da;
--color-warning: #f59f0a;
--color-warning-soft: #ffe7cb;
--color-danger: #ef4343;
--color-danger-soft: #ffdfda;
--stufe-1: #a78be0; --stufe-1-flaeche: #ede6fb; --stufe-1-schrift: #4b2a8f;
--stufe-2: #8360ce; --stufe-2-flaeche: #e2d8f8; --stufe-2-schrift: #3d1f7d;
--stufe-3: #4b8de8; --stufe-3-flaeche: #dfeafc; --stufe-3-schrift: #17457f;
--stufe-4: #2b6bc9; --stufe-4-flaeche: #d3e2fa; --stufe-4-schrift: #123a6e;
--stufe-5: #1b4e9e; --stufe-5-flaeche: #c6d9f7; --stufe-5-schrift: #0d2f5c;
--stufe-6: #21a05b; --stufe-6-flaeche: #d3f2df; --stufe-6-schrift: #0d5b33;
--stufe-7: #8d93ac; --stufe-7-flaeche: #e7e9f1; --stufe-7-schrift: #41465e;
--stufe-ring: rgba(6, 40, 49, 0.16);
--color-violet-soft: #dcf7fb;
--color-danger-soft-strong: #ffcac2;
--color-tone-blue: #3a5a8c;
--color-tone-blue-soft: #dde6f4;
--color-tone-purple: #6b4f96;
--color-tone-purple-soft: #e8dff2;
--color-tone-rose: #9c4f68;
--color-tone-rose-soft: #f5dfe5;
--color-tone-amber: #8a6a2a;
--color-tone-amber-soft: #f2e8cf;
--color-tone-teal: #2f7d6e;
--color-tone-teal-soft: #d9f0e9;
--color-tone-slate: #55606e;
--color-tone-slate-soft: #e3e6ea;
--sidebar-bg: #f6f3ee;
--sidebar-text: #66635d;
--sidebar-text-active: #161512;
--sidebar-border: #e7e5e0;
--sidebar-hover: #eeeae3;
--sidebar-hover-strong: #e6e1d8;
--sidebar-active: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-2) 130%);
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 22px;
--radius-full: 999px;
--shadow-sm: 0 1px 1px rgba(16, 24, 40, 0.025);
--shadow-md: 0 6px 20px -6px rgba(16, 24, 40, 0.10);
--shadow-lg: 0 20px 48px -16px rgba(16, 24, 40, 0.16);
--shadow-glow: 0 0 0 3px var(--color-accent-soft);
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-8: 48px;
--text-page-title: 23px;
--text-section-title: 16px;
--text-entity-title: 14px;
--text-body: 13px;
--text-meta: 11.5px;
--text-small: 10.5px;
--weight-text: 400;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--sidebar-width: 252px;
--sidebar-width-collapsed: 68px;
--rail-width: 56px;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--dur-fast: 120ms;
--dur-base: 180ms;
--dur-slow: 240ms;
--font: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-marke: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
--font-alt: var(--font);
}
html[data-theme="dark"] {
color-scheme: dark;
--color-bg: #100f0d;
--color-bg-alt: #161513;
--color-surface: #1a1917;
--color-surface-2: #22211e;
--color-border: #2e2c28;
--color-border-strong: #403d37;
--chart-grid: #282622;
--color-text: #ece9e3;
--color-text-muted: #a6a29a;
--color-text-faint: #86827b;
--color-accent: #4cc79a;
--color-accent-hover: #86dcbb;
--color-accent-strong: #d2f1e4;
--color-accent-soft: #0b2a20;
--color-accent-2: #7fd6b5;
--color-success: #4dcb70;
--color-success-soft: #102b16;
--color-warning: #faab3f;
--color-warning-soft: #382409;
--stufe-1: #bba3f0; --stufe-1-flaeche: #241a3d; --stufe-1-schrift: #bba3f0;
--stufe-2: #a487e8; --stufe-2-flaeche: #1f1436; --stufe-2-schrift: #a487e8;
--stufe-3: #7cb0f2; --stufe-3-flaeche: #12233d; --stufe-3-schrift: #7cb0f2;
--stufe-4: #5e97e8; --stufe-4-flaeche: #0f1e36; --stufe-4-schrift: #5e97e8;
--stufe-5: #5590ea; --stufe-5-flaeche: #0c192e; --stufe-5-schrift: #5590ea;
--stufe-6: #54ce86; --stufe-6-flaeche: #0f2c1a; --stufe-6-schrift: #54ce86;
--stufe-7: #a8aec6; --stufe-7-flaeche: #242838; --stufe-7-schrift: #a8aec6;
--stufe-ring: rgba(255, 255, 255, 0.14);
--color-danger: #ff6b64;
--color-danger-soft: #421c19;
--color-violet-soft: #002a32;
--color-danger-soft-strong: #522420;
--color-tone-blue: #9db8e0;
--color-tone-blue-soft: #1c2a3d;
--color-tone-purple: #cbb3e6;
--color-tone-purple-soft: #2a2036;
--color-tone-rose: #e3aebb;
--color-tone-rose-soft: #34212a;
--color-tone-amber: #e3c98a;
--color-tone-amber-soft: #362c17;
--color-tone-teal: #8fd4c1;
--color-tone-teal-soft: #16302a;
--color-tone-slate: #b7bfc9;
--color-tone-slate-soft: #23262d;
--sidebar-bg: #141311;
--sidebar-text: #a8a49c;
--sidebar-text-active: #f6f3ee;
--sidebar-border: #262420;
--sidebar-hover: #201e1b;
--sidebar-hover-strong: #2c2a26;
-webkit-font-smoothing: antialiased;
--shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.20);
--shadow-md: 0 6px 20px -6px rgba(0, 0, 0, 0.45);
--shadow-lg: 0 20px 48px -16px rgba(0, 0, 0, 0.60);
}
html[data-accent="violet"] {
--color-accent: #96407c;
--color-accent-hover: #793465;
--color-accent-strong: #5f254e;
--color-accent-soft: #deced9;
--color-accent-2: #9a50a5;
}
html[data-theme="dark"][data-accent="violet"] {
--color-accent: #c889b5;
--color-accent-hover: #d9b5ce;
--color-accent-strong: #eddee8;
--color-accent-soft: #3a1d31;
--color-accent-2: #caa4d0;
}
html[data-accent="forest"] {
--color-accent: #397f52;
--color-accent-hover: #2c6340;
--color-accent-strong: #1e482d;
--color-accent-soft: #bdd1c4;
--color-accent-2: #548e48;
}
html[data-theme="dark"][data-accent="forest"] {
--color-accent: #76bc90;
--color-accent-hover: #a2cdb2;
--color-accent-strong: #cce1d3;
--color-accent-soft: #1d3928;
--color-accent-2: #9ac492;
}
html[data-accent="sunset"] {
--color-accent: #c15e33;
--color-accent-hover: #a14e2b;
--color-accent-strong: #843d1f;
--color-accent-soft: #efe2dc;
--color-accent-2: #c89e4c;
}
html[data-theme="dark"][data-accent="sunset"] {
--color-accent: #dea891;
--color-accent-hover: #ebcec2;
--color-accent-strong: #f9f3f0;
--color-accent-soft: #422215;
--color-accent-2: #e4d2af;
}
html[data-accent="berry"] {
--color-accent: #c44565;
--color-accent-hover: #ab3653;
--color-accent-strong: #8f2842;
--color-accent-soft: #f5ebed;
--color-accent-2: #c67162;
}
html[data-theme="dark"][data-accent="berry"] {
--color-accent: #dfa4b3;
--color-accent-hover: #eed3da;
--color-accent-strong: #ffffff;
--color-accent-soft: #3f1721;
--color-accent-2: #e7c6c1;
}
html[data-accent="slate"] {
--color-accent: #4d6389;
--color-accent-hover: #3e506f;
--color-accent-strong: #2d3d58;
--color-accent-soft: #d1d5db;
--color-accent-2: #5e8297;
}
html[data-theme="dark"][data-accent="slate"] {
--color-accent: #93a3bd;
--color-accent-hover: #bcc4d2;
--color-accent-strong: #e1e4ea;
--color-accent-soft: #222935;
--color-accent-2: #acbec8;
}
html[data-accent="olive"] {
--color-accent: #717f39;
--color-accent-hover: #58632c;
--color-accent-strong: #40481e;
--color-accent-soft: #cdd1bd;
--color-accent-2: #5b8e48;
}
html[data-theme="dark"][data-accent="olive"] {
--color-accent: #aebc76;
--color-accent-hover: #c4cda2;
--color-accent-strong: #dde1cc;
--color-accent-soft: #34391d;
--color-accent-2: #9fc492;
}
html[data-accent="sand"] {
--color-accent: #b08245;
--color-accent-hover: #936c39;
--color-accent-strong: #79572a;
--color-accent-soft: #ece6df;
--color-accent-2: #b7715c;
}
html[data-theme="dark"][data-accent="sand"] {
--color-accent: #d4bb9b;
--color-accent-hover: #e5d8c8;
--color-accent-strong: #f8f5f2;
--color-accent-soft: #3c2e1b;
--color-accent-2: #ddbfb6;
}
* { box-sizing: border-box; }
svg { width: 1em; height: 1em; flex-shrink: 0; }
span:has(> svg) { display: inline-flex; }
html, body {
margin: 0;
padding: 0;
height: 100%;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
font-family: var(--font);
background: var(--color-bg);
color: var(--color-text);
font-size: var(--text-entity-title);
line-height: 1.55;
text-rendering: auto;
font-weight: var(--weight-text);
-webkit-font-smoothing: antialiased;
letter-spacing: -0.005em;
}
table,
.num,
[data-num] {
font-variant-numeric: tabular-nums;
}
::selection { background: var(--color-accent-soft); color: var(--color-accent-strong); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-faint); }
h1, h2, h3, h4 { margin: 0; font-weight: var(--weight-medium); letter-spacing: -0.015em; }
h1 { font-size: var(--text-page-title); letter-spacing: -0.022em; }
h2 { font-size: var(--text-section-title); font-weight: var(--weight-medium); }
h3 { font-size: 13.5px; }
p { margin: 0; }
.label,
.overline {
font-size: var(--text-small);
font-weight: var(--weight-semibold);
letter-spacing: 0.075em;
text-transform: uppercase;
color: var(--color-text-muted);
line-height: 1.4;
}
.prod-color-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: var(--radius-full);
margin-right: 6px;
vertical-align: 1px;
flex: none;
}
.overline-accent {
font-size: var(--text-small);
font-weight: var(--weight-semibold);
letter-spacing: 0.075em;
text-transform: uppercase;
color: var(--color-accent);
line-height: 1.4;
}
a { color: inherit; text-decoration: none; }
button {
font-family: inherit;
font-size: var(--text-body);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
border: none;
background: none;
color: inherit;
margin: 0;
}
#app { min-height: 100%; }
.app-shell {
display: grid;
grid-template-columns: var(--sidebar-width) 1fr var(--rail-width);
min-height: 100vh;
min-height: 100dvh;
}
.app-shell-col { min-width: 0; }
.sidebar {
background: var(--sidebar-bg);
padding: var(--space-4) var(--space-3);
display: flex;
flex-direction: column;
position: sticky;
top: 0;
height: 100vh;
height: 100dvh;
overflow: hidden;
z-index: 50;
}
.nav-groups-container {
flex: 1;
min-height: 0;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: transparent transparent;
transition: scrollbar-color var(--dur-base) var(--ease);
}
.nav-groups-container:hover,
.nav-groups-container:focus-within {
scrollbar-color: var(--sidebar-border) transparent;
}
.nav-groups-container::-webkit-scrollbar { width: 6px; }
.nav-groups-container::-webkit-scrollbar-track { background: transparent; }
.nav-groups-container::-webkit-scrollbar-thumb {
background: transparent;
border-radius: var(--radius-full);
transition: background var(--dur-base) var(--ease);
}
.nav-groups-container:hover::-webkit-scrollbar-thumb,
.nav-groups-container:focus-within::-webkit-scrollbar-thumb {
background: var(--sidebar-border);
}
.nav-groups-container::-webkit-scrollbar-thumb:hover { background: var(--color-border-strong); }
.sidebar-brand {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
font-size: 15px;
color: var(--sidebar-text-active);
padding: 0 var(--space-2) 18px;
letter-spacing: -0.01em;
}
.sidebar-brand-mark {
width: 32px;
height: 32px;
border-radius: 10px;
background: var(--sidebar-active);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 14px -2px rgba(10, 107, 79, 0.4);
}
.sidebar-brand-mark svg { width: 100%; height: 100%; display: block; }
.sidebar-brand span.dim { color: var(--sidebar-text); font-weight: 500; }
.shy-wortmarke {
font-family: var(--font-marke);
font-style: italic;
font-weight: 300;
line-height: 1;
letter-spacing: -0.01em;
white-space: nowrap;
user-select: none;
-webkit-user-select: none;
}
.sidebar-wortmarke {
font-size: 40px;
color: var(--sidebar-text-active);
padding-left: 6px;
margin: -8px 0 -4px;
}
.topbar-wortmarke { font-size: 32px; color: var(--color-text); margin-top: -6px; }
.login-wortmarke { font-size: 72px; color: #ffffff; }
.sidebar-search-trigger {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 10px;
margin-bottom: 12px;
background: var(--sidebar-hover);
border: 1px solid var(--sidebar-border);
border-radius: var(--radius-sm);
color: var(--sidebar-text);
font-size: 12.5px;
cursor: pointer;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.sidebar-search-trigger:hover {
background: var(--sidebar-hover-strong);
border-color: var(--color-text-faint);
color: var(--sidebar-text-active);
}
.sidebar-search-trigger svg { width: 14px; height: 14px; flex-shrink: 0; }
.sidebar-search-label { flex: 1; text-align: left; }
.sidebar-search-kbd {
font-family: inherit;
font-size: var(--text-small);
font-weight: 600;
padding: 2px 5px;
border-radius: 4px;
background: var(--sidebar-bg);
border: 1px solid var(--sidebar-border);
color: inherit;
}
.nav-group { margin-bottom: var(--space-3); }
.nav-group-label {
display: flex;
align-items: center;
gap: 7px;
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: 0.11em;
color: var(--nav-tone, var(--color-text-faint));
padding: 0 var(--space-3);
margin-bottom: 6px;
font-weight: var(--weight-medium);
}
.nav-group-label::before {
content: '';
width: 5px;
height: 5px;
border-radius: var(--radius-full);
background: var(--nav-tone, var(--sidebar-text));
flex: none;
}
.nav-link {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
padding: 6.32px var(--space-3);
border-radius: var(--radius-sm);
color: var(--sidebar-text);
font-size: 13.5px;
font-weight: 500;
margin-bottom: 0.9px;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-link:hover { background: var(--sidebar-hover); color: var(--sidebar-text-active); }
.nav-link-label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nav-link.active {
position: relative;
background: var(--sidebar-hover);
background: color-mix(in srgb, var(--color-accent) 9%, transparent);
color: var(--sidebar-text-active);
font-weight: var(--weight-medium);
box-shadow: none;
}
.nav-link.active::before {
content: '';
position: absolute;
left: 0;
top: 50%;
translate: 0 -50%;
width: 2.5px;
height: 15px;
border-radius: 0 var(--radius-full) var(--radius-full) 0;
background: var(--color-accent);
}
.nav-link.active svg { color: var(--color-accent); }
.nav-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav-link svg { color: var(--color-text-faint); transition: color var(--dur-fast) var(--ease); }
.nav-link:hover svg { color: inherit; }
.nav-link-editable {
display: flex;
align-items: center;
gap: 8px;
cursor: grab;
}
.nav-link-editable:active { cursor: grabbing; }
.nav-link-grip {
display: flex;
color: var(--sidebar-text);
opacity: 0.6;
flex-shrink: 0;
}
.nav-link-grip svg { width: 13px; height: 13px; }
.nav-link-hide-btn {
margin-left: auto;
flex-shrink: 0;
width: 19px;
height: 19px;
border-radius: 50%;
background: none;
border: none;
color: var(--sidebar-text);
display: flex;
align-items: center;
justify-content: center;
}
.nav-link-hide-btn:hover { background: var(--sidebar-hover); color: var(--sidebar-text-active); }
.nav-link-hide-btn svg { width: 11px; height: 11px; }
.nav-link-editable.is-hidden-item { opacity: 0.45; }
.nav-link-editable.is-hidden-item .nav-link-hide-btn { color: var(--color-accent-2); }
.nav-group-label-editable {
display: flex;
align-items: center;
gap: 8px;
cursor: grab;
padding: 0 var(--space-3);
border-radius: var(--radius-sm);
margin: 0 0 var(--space-2);
}
.nav-group-label-editable:hover { background: var(--sidebar-hover); }
.nav-group-label-editable:active { cursor: grabbing; }
.nav-group-grip { display: flex; color: var(--sidebar-text); opacity: 0.6; flex-shrink: 0; }
.nav-group-grip svg { width: 12px; height: 12px; }
.nav-link-editable.is-dragover,
.nav-group-label-editable.is-dragover {
outline: 2px dashed var(--color-accent-2);
outline-offset: -2px;
border-radius: var(--radius-sm);
}
.sidebar-footer {
position: relative;
margin-top: auto;
padding-top: var(--space-3);
border-top: 1px solid var(--sidebar-border);
display: flex;
flex-direction: column;
gap: 10px;
}
.sidebar-footer-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sidebar-footer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.avatar {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--sidebar-active);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 12.5px;
flex-shrink: 0;
cursor: pointer;
}
.avatar-image { background-size: cover; background-position: center; }
.avatar-wrap { position: relative; flex-shrink: 0; }
.avatar-wrap .avatar { position: relative; z-index: 1; }
.avatar-remove-btn {
position: absolute;
bottom: -4px;
right: -7px;
width: 15px;
height: 15px;
border-radius: 50%;
background: var(--color-danger);
color: #fff;
border: 2px solid var(--sidebar-bg);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
z-index: 0;
transition: opacity var(--dur-fast) var(--ease);
}
.avatar-remove-btn svg { width: 8px; height: 8px; }
.avatar-wrap:hover .avatar-remove-btn,
.avatar-remove-btn:focus-visible { opacity: 1; pointer-events: auto; }
.sidebar-user-block { flex: 1; min-width: 0; }
.sidebar-user {
font-size: 12.5px;
font-weight: 600;
color: var(--sidebar-text-active);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-user-role {
font-size: 11px;
color: var(--sidebar-text);
}
.btn-logout {
background: none;
border: none;
border-radius: var(--radius-sm);
padding: 8px;
color: var(--sidebar-text);
flex-shrink: 0;
display: flex;
}
.btn-logout:hover { background: var(--sidebar-hover); color: var(--sidebar-text-active); }
.btn-logout svg { width: 16px; height: 16px; }
.btn-logout.active { background: var(--sidebar-hover); color: var(--color-accent); }
.accent-swatch-dot {
width: 15px;
height: 15px;
border-radius: 50%;
border: 1.5px solid var(--sidebar-border);
display: block;
}
.accent-popover {
position: absolute;
bottom: calc(100% + 8px);
left: 0;
display: none;
gap: 7px;
padding: 9px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
z-index: 60;
transform-origin: bottom left;
}
.accent-popover.is-open { display: flex; animation: panel-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.accent-swatch-btn {
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid var(--color-border-strong);
cursor: pointer;
transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.accent-swatch-btn:hover { transform: scale(1.12); border-color: var(--color-text); }
.sidebar-brand-text { flex: 1; }
.sidebar-collapse-toggle {
background: none;
border: none;
border-radius: var(--radius-sm);
padding: 6px;
color: var(--sidebar-text);
flex-shrink: 0;
display: flex;
}
.sidebar-collapse-toggle:hover { background: var(--sidebar-hover); color: var(--sidebar-text-active); }
.sidebar-collapse-toggle svg { width: 14px; height: 14px; }
.right-rail {
background: var(--sidebar-bg);
border-left: 1px solid var(--sidebar-border);
position: sticky;
top: 0;
height: 100vh;
overflow: visible;
z-index: 45;
display: flex;
flex-direction: column;
}
.right-rail-icons {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: var(--space-4) 0;
}
.right-rail-icons-bottom { padding-bottom: var(--space-4); }
.right-rail-mitte { margin-top: auto; margin-bottom: auto; }
.rail-panel-anzahl {
font-weight: 600;
color: var(--color-text-faint);
font-variant-numeric: tabular-nums;
text-transform: none;
letter-spacing: 0;
}
.rail-panel-fuss {
margin: 8px 10px 4px;
font-size: 11px;
line-height: 1.45;
color: var(--color-text-faint);
}
.rail-neu-feld {
width: calc(100% - 20px);
margin: 4px 10px 0;
padding: 8px 10px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
font: inherit;
font-size: 13px;
}
.rail-neu-feld:focus { outline: none; border-color: var(--color-accent); }
.rail-neu-marken { position: relative; display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 10px 0; }
.rail-neu-marke {
border: 1px solid var(--color-border);
background: var(--color-surface-2);
color: var(--color-text-muted);
border-radius: var(--radius-full);
padding: 3px 9px;
font: inherit;
font-size: 11.5px;
cursor: pointer;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rail-neu-marke:hover {
background: var(--color-bg-alt);
border-color: var(--color-text-faint);
color: var(--color-text);
}
.rail-neu-marke:active {
transform: scale(0.93);
background: var(--color-accent-soft);
border-color: var(--color-accent);
color: var(--color-accent);
}
.rail-neu-marke { transition: transform 0.08s var(--ease), background 0.12s var(--ease), border-color 0.12s var(--ease); }
.rail-neu-marke:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.rail-neu-marke.is-gesetzt {
border-color: var(--color-accent);
background: var(--color-accent-soft);
color: var(--color-accent);
font-weight: 600;
}
.rail-neu-marke.is-gesetzt:hover { background: var(--color-accent-soft); border-color: var(--color-accent-strong); color: var(--color-accent-strong); }
.rail-neu-marke.is-offen {
border-color: var(--color-accent);
color: var(--color-accent-strong);
box-shadow: 0 0 0 2px var(--color-accent-soft);
}
.rail-neu-marke-x {
display: inline-block;
margin-left: 5px;
padding: 0 2px;
opacity: 0.65;
font-weight: 600;
line-height: 1;
}
.rail-neu-marke-x:hover { opacity: 1; }
.rail-neu-kalender {
margin: 8px 6px 0;
border-top: 1px solid var(--color-border);
padding-top: 8px;
}
.rail-neu-kal-kopf {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
margin-bottom: 6px;
}
.rail-neu-kal-monat { font-size: 12.5px; font-weight: var(--weight-semibold, 600); }
.rail-neu-kal-pfeil {
border: 0;
background: none;
cursor: pointer;
font-size: 17px;
line-height: 1;
padding: 2px 8px;
border-radius: var(--radius-sm);
color: var(--color-text-muted);
}
.rail-neu-kal-pfeil:hover { background: var(--color-bg-alt); color: var(--color-text); }
.rail-neu-kal-gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.rail-neu-kal-wt {
text-align: center;
font-size: 10px;
font-weight: var(--weight-semibold, 600);
color: var(--color-text-faint);
padding-bottom: 3px;
}
.rail-neu-kal-leer { display: block; }
.rail-neu-kal-tag {
border: 0;
background: none;
cursor: pointer;
font: inherit;
font-size: 12px;
color: var(--color-text);
aspect-ratio: 1;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
min-height: 30px;
}
.rail-neu-kal-tag:hover { background: var(--color-bg-alt); }
.rail-neu-kal-tag.is-heute { font-weight: var(--weight-bold, 700); color: var(--color-accent); }
.rail-neu-kal-tag.is-gewaehlt { background: var(--color-accent); color: #fff; font-weight: var(--weight-semibold, 600); }
.rail-neu-kal-heute {
display: block;
width: 100%;
margin-top: 6px;
border: 0;
background: none;
cursor: pointer;
font: inherit;
font-size: 12px;
color: var(--color-accent);
padding: 5px 0;
border-radius: var(--radius-sm);
}
.rail-neu-kal-heute:hover { background: var(--color-bg-alt); }
.rail-neu-waehler {
margin: 8px 6px 0;
border-top: 1px solid var(--color-border);
padding-top: 6px;
}
.rail-neu-suche {
width: 100%;
box-sizing: border-box;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 6px 9px;
font: inherit;
font-size: 12.5px;
background: var(--color-surface);
color: var(--color-text);
}
.rail-neu-suche:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: var(--shadow-glow);
}
.rail-neu-treffer {
max-height: 190px;
overflow-y: auto;
margin-top: 4px;
}
.rail-neu-leer {
margin: 6px 4px;
font-size: 12.5px;
color: var(--color-text-muted);
}
.rail-neu-anlegen {
display: block;
width: calc(100% - 12px);
margin: 8px 6px 0;
}
.rail-neu-wahl {
display: block;
width: 100%;
text-align: left;
border: 0;
background: none;
color: var(--color-text);
font: inherit;
font-size: 12.5px;
padding: 7px 8px;
border-radius: var(--radius-sm);
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rail-neu-wahl { transition: background 0.12s var(--ease); }
.rail-neu-wahl:hover { background: var(--sidebar-hover); }
.rail-neu-wahl:active { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.rail-neu-wahl.is-leer {
color: var(--color-text-muted);
font-style: italic;
border-bottom: 1px solid var(--color-border);
border-radius: 0;
}
.rail-neu-wahl.is-leer.is-selected { color: var(--color-accent-strong); font-style: normal; }
.rail-uhr {
width: 46px;
padding: 5px 0;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-muted);
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
cursor: pointer;
}
.rail-uhr:hover { background: var(--sidebar-hover); }
.rail-uhr-zeit:empty { display: none; }
.rail-uhr-zeit {
font-size: 12px;
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: -.03em;
}
.rail-uhr-zeichen { display: flex; }
.rail-uhr-zeichen svg { width: 14px; height: 14px; }
.rail-uhr.is-laeuft {
background: var(--color-success-soft);
color: var(--color-success);
}
.rail-uhr.is-ueberlauf {
background: var(--color-danger-soft);
color: var(--color-danger);
}
.rail-uhr-nachfrage {
margin: 4px 10px 10px;
padding: 9px 10px;
border-radius: var(--radius-sm);
background: var(--color-danger-soft);
font-size: 12px;
line-height: 1.45;
color: var(--color-text);
}
.rail-uhr-nachfrage p { margin: 0; }
.rail-uhr-frage { margin-top: 6px !important; font-weight: 600; }
.rail-uhr-vorschlaege { display: flex; gap: 5px; margin-top: 7px; }
.rail-uhr-vorschlag {
flex: 1;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text);
border-radius: var(--radius-sm);
padding: 5px 0;
font: inherit;
font-size: 12px;
font-variant-numeric: tabular-nums;
cursor: pointer;
}
.rail-uhr-dauer {
flex: none;
font-size: var(--text-meta);
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
.rail-panel-row.is-laeuft .rail-panel-row-title { color: var(--color-success); }
.rail-uhr-stop, .rail-uhr-start {
border: 0;
font: inherit;
cursor: pointer;
border-radius: var(--radius-sm);
}
.rail-uhr-stop {
flex: none;
background: none;
color: var(--color-accent);
font-size: 11.5px;
font-weight: 600;
padding: 2px 4px;
}
.rail-uhr-start {
display: block;
width: calc(100% - 20px);
margin: 10px 10px 0;
padding: 8px;
background: var(--color-success);
color: #fff;
font-size: 12.5px;
font-weight: 600;
}
.wetter-knopf {
width: 46px;
padding: 6px 0;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
font-family: inherit;
transition: background var(--dur-fast) var(--ease);
}
.wetter-knopf:hover { background: var(--color-accent-soft); }
.wetter-leiste { display: flex; flex-direction: column; align-items: center; }
.wetter-heute { display: flex; flex-direction: column; align-items: center; }
.wetter-heute .wetter-grad { font-size: 12.5px; font-weight: 600; color: var(--color-text); }
.wetter-folge-gruppe {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 5px;
padding-top: 5px;
border-top: 1px solid var(--sidebar-border);
width: 32px;
}
.wetter-folge { display: flex; align-items: center; justify-content: center; gap: 3px; }
.wetter-folge .wetter-grad { font-size: 10px; font-weight: 500; color: var(--color-text-muted); }
.wetter-grad { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.wetter-bild { display: inline-flex; }
.wetter-svg.is-sonne, .wetter-svg.is-wolkig { color: var(--color-warning); }
.wetter-svg.is-regen, .wetter-svg.is-schnee { color: #3d7fb8; }
.wetter-svg.is-gewitter { color: var(--color-accent-2, #615cdc); }
.wetter-svg.is-wolken { color: var(--color-text-muted); }
.wetter-panel { width: 316px; }
.rail-nas { position: relative; }
.rail-nas-punkt { position: absolute; right: 9px; bottom: 9px; width: 7px; height: 7px; border-radius: 50%;
background: var(--color-border-strong); box-shadow: 0 0 0 2px var(--sidebar-bg, var(--color-surface)); }
.rail-nas-punkt.ist-wach { background: var(--color-success); }
.rail-nas-punkt.ist-fehler { background: var(--color-danger); }
.rail-nas-punkt.ist-weckt { background: var(--color-warning); animation: nasl-puls 1.2s ease-in-out infinite; }
@keyframes nasl-puls { 50% { opacity: .35; } }
.nasl-panel { width: 280px; }
.nasl-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.nasl-zustand { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: var(--weight-medium); }
.nasl-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border-strong); }
.nasl-zustand.ist-wach .nasl-punkt { background: var(--color-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 22%, transparent); }
.nasl-zustand.ist-fehler { color: var(--color-danger); }
.nasl-zustand.ist-fehler .nasl-punkt { background: var(--color-danger); }
.nasl-zustand.ist-weckt .nasl-punkt { background: var(--color-warning); animation: nasl-puls 1.2s ease-in-out infinite; }
.nasl-zahlen { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 12.5px; }
.nasl-zahlen dt { color: var(--color-text-muted); }
.nasl-zahlen dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.nasl-an { align-self: stretch; justify-content: center; }
.nasl-an svg { width: 14px; height: 14px; }
.nasl-weckt { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--color-text-muted); }
.nasl-weckt .spinner { margin: 0; width: 18px; height: 18px; flex-shrink: 0; }
.nasl-fehler { font-size: 12px; color: var(--color-danger); }
.nasl-hinweis { margin: 0; font-size: 11.5px; color: var(--color-text-faint); line-height: 1.45; }
.topbar-nas .rail-nas-punkt { right: 5px; bottom: 5px; }
.rail-stationen { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 2px 0 6px; }
.rail-stationen[hidden] { display: none; }
.rail-station { display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: default; }
.rail-station-bild { position: relative; width: 36px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--sidebar-text); }
.rail-station-bild svg { width: 17px; height: 17px; }
.rail-station-bild .rail-nas-punkt { right: 9px; bottom: 6px; }
.rail-station-kuerzel { font-size: 9px; font-weight: 500; letter-spacing: 0.06em; color: var(--color-text-muted); line-height: 1; }
.modal.nasl-modal { max-width: 360px; }
.nasl-fenster .nasl-body { padding: 16px 20px 8px; }
.nasl-fenster .rail-panel-header { display: flex; justify-content: flex-end; padding: 0 20px 16px; border: 0; }
.nasl-fenster .rail-panel-header > span:first-child { display: none; }
.sammler-panel { width: 320px; }
.sammler-body { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.sammler-liste { display: flex; flex-direction: column; max-height: 38vh; overflow-y: auto; margin: -4px -4px 0; }
.sammler-zeile { display: flex; align-items: center; gap: 9px; padding: 6px 4px; border-radius: var(--radius-sm); }
.sammler-zeile:hover { background: var(--color-bg-alt); }
.sammler-symbol { display: flex; color: var(--color-accent); flex-shrink: 0; }
.sammler-symbol svg { width: 15px; height: 15px; }
.sammler-text { flex: 1; min-width: 0; }
.sammler-name { font-size: 12.5px; font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sammler-unter { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sammler-weg { border: 0; background: none; color: var(--color-text-faint); display: flex; padding: 4px; border-radius: var(--radius-sm); cursor: pointer; }
.sammler-weg:hover { color: var(--color-danger); background: var(--color-danger-soft); }
.sammler-weg svg { width: 13px; height: 13px; }
.sammler-fuss { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--color-border); }
.sammler-summe { font-size: 12px; color: var(--color-text-muted); }
.sammler-titel { font-size: 12.5px; }
.sammler-los { justify-content: center; }
.sammler-los svg { width: 14px; height: 14px; }
.sammler-hinweis, .sammler-leer { margin: 0; font-size: 11.5px; color: var(--color-text-faint); line-height: 1.45; }
.sammler-abschnitt { font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-faint); }
.sammler-sendungen { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--color-border); }
.sammler-sendung { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.sammler-sendung.ist-fertig { border-color: color-mix(in srgb, var(--color-success) 35%, var(--color-border)); }
.sammler-sendung .spinner { margin: 4px auto; width: 16px; height: 16px; }
.sammler-sendung-kopf { display: flex; align-items: center; gap: 6px; }
.sammler-sendung-titel { flex: 1; min-width: 0; font-size: 12.5px; font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sammler-sendung-knoepfe { display: flex; gap: 2px; }
.sammler-sendung-knoepfe .btn { padding: 3px 6px; }
.sammler-sendung-knoepfe svg { width: 13px; height: 13px; }
.sammler-knopf { padding: 4px 7px; color: var(--color-text-muted); }
.sammler-knopf svg { width: 15px; height: 15px; }
.sammler-knopf.ist-drin { color: var(--color-success); background: var(--color-success-soft); }
.nb-reihe { display: flex; align-items: center; border-top: 1px solid var(--chart-grid); }
.nb-reihe > .nb-zeile { border-top: 0; flex: 1; min-width: 0; }
.nb-reihe > .nas-zeile-knoepfe { padding-right: 10px; }
.nb-baum > .nb-ast:first-child > .nb-reihe { border-top: 0; }
.nas-pfad .sammler-knopf { margin-left: 2px; }
.nas-baum-kopf .sammler-knopf { margin-left: -6px; }
.wetter-jetzt { font-size: 11.5px; font-weight: 400; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.wetter-tage { padding: 4px 6px 6px; }
.wetter-tag {
display: grid;
grid-template-columns: 46px 20px 1fr 52px;
align-items: center;
gap: 8px;
padding: 5px 7px;
border-radius: 7px;
}
.wetter-tag.ist-dreh { background: var(--color-accent-soft); }
.wetter-tag.in-leiste { box-shadow: inset 2px 0 0 var(--color-accent); }
.wetter-tag-name { font-size: 12px; font-weight: 600; color: var(--color-text); }
.wetter-tag.ist-dreh .wetter-tag-name { color: var(--color-accent-strong); }
.wetter-tag-datum { display: block; font-size: 10px; font-weight: 400; color: var(--color-text-faint); font-variant-numeric: tabular-nums; }
.wetter-tag-bild { display: flex; justify-content: center; }
.wetter-band { position: relative; height: 5px; background: var(--color-bg-alt); border-radius: var(--radius-full); }
.wetter-band i {
position: absolute;
top: 0;
height: 5px;
border-radius: var(--radius-full);
background: linear-gradient(90deg, #3d7fb8, var(--color-warning));
}
.wetter-grade { font-size: 11.5px; color: var(--color-text-muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wetter-grade b { color: var(--color-text); font-weight: 600; }
.wetter-dreh {
grid-column: 1 / -1;
margin-left: 54px;
font-size: 10.5px;
font-weight: 600;
color: var(--color-accent-strong);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wetter-standort {
width: calc(100% - 12px);
margin: 2px 6px 8px;
padding: 6px;
border: 1px dashed var(--color-border);
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-muted);
font-family: inherit;
font-size: 11.5px;
cursor: pointer;
}
.wetter-standort:hover { border-color: var(--color-accent); color: var(--color-accent-strong); }
.rail-item { position: relative; }
.rail-btn {
position: relative;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
border-radius: var(--radius-sm);
color: var(--sidebar-text);
cursor: pointer;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.rail-btn svg { width: 17px; height: 17px; }
.rail-btn:hover:not(:disabled) { background: var(--sidebar-hover); color: var(--sidebar-text-active); }
.rail-btn.has-pin { color: var(--color-accent); }
.rail-btn.is-active { color: var(--color-accent); background: var(--color-accent-soft); }
.rail-btn.is-active:hover:not(:disabled) { color: var(--color-accent); background: var(--color-accent-soft); }
.rail-btn.is-disabled,
.rail-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.rail-badge {
position: absolute;
top: 2px;
right: 2px;
min-width: 15px;
height: 15px;
padding: 0 3px;
border-radius: var(--radius-full);
background: var(--color-danger);
color: #fff;
font-size: 9.5px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
@keyframes badge-pulse {
0% { transform: scale(1) rotate(0deg); }
30% { transform: scale(1.9) rotate(-8deg); }
55% { transform: scale(0.85) rotate(6deg); }
80% { transform: scale(1.15) rotate(0deg); }
100% { transform: scale(1) rotate(0deg); }
}
.rail-badge.is-pulsing { animation: badge-pulse 0.7s var(--ease); }
.rail-panel {
position: absolute;
top: -6px;
right: calc(100% + 8px);
display: none;
width: 300px;
max-height: 70vh;
overflow-y: auto;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
z-index: 60;
transform-origin: top right;
animation: panel-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rail-panel.is-open { display: block; }
@keyframes panel-in {
from { opacity: 0; transform: scale(0.8) translateY(-16px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.rail-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 12px 14px;
font-size: 12.5px;
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: 1px solid var(--color-border);
}
.rail-panel-mark-all {
background: none;
border: none;
color: var(--color-accent);
font-size: 11px;
font-weight: 600;
text-transform: none;
letter-spacing: normal;
cursor: pointer;
padding: 2px 4px;
}
.rail-panel-mark-all:hover { text-decoration: underline; }
.rail-panel-mark-all:disabled { opacity: 0.5; cursor: default; text-decoration: none; }
.rail-panel-body { padding: 6px; }
.rail-panel-empty {
padding: 20px 14px;
text-align: center;
color: var(--color-text-faint);
font-size: 12.5px;
}
.rail-panel-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 10px;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background var(--dur-fast) var(--ease);
}
.rail-panel-row:hover { background: var(--color-bg-alt); }
.rail-panel-row-title {
font-size: var(--text-body);
font-weight: 600;
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rail-panel-row-sub { font-size: var(--text-meta); color: var(--color-text-muted); margin-top: 1px; }
.rail-panel-row.is-overdue .rail-panel-row-sub { color: var(--color-danger); }
.rail-panel-pin-current {
display: flex;
align-items: center;
gap: 8px;
width: calc(100% - 12px);
margin: 6px 6px 0;
padding: 9px 10px;
border: 1px dashed var(--color-border-strong);
border-radius: var(--radius-sm);
background: none;
color: var(--color-text-muted);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.rail-panel-pin-current svg { width: 14px; height: 14px; }
.rail-panel-pin-current:hover { background: var(--color-accent-soft); color: var(--color-accent-strong); border-color: transparent; }
.rail-panel-pin-current.is-pinned { color: var(--color-accent-strong); background: var(--color-accent-soft); border-style: solid; border-color: transparent; }
.rail-fav-row { padding-right: 6px; }
.rail-fav-row .rail-panel-row-title { flex: 1; min-width: 0; }
.rail-panel-row-text { flex: 1; min-width: 0; }
.rail-fav-remove {
flex-shrink: 0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
border-radius: 50%;
color: var(--color-text-faint);
}
.rail-fav-remove svg { width: 10px; height: 10px; }
.rail-fav-remove:hover { background: var(--color-danger-soft); color: var(--color-danger); }
.topbar {
display: none;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
padding-top: max(var(--space-3), env(safe-area-inset-top));
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
position: sticky;
top: 0;
z-index: 40;
}
.topbar-toggle {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text);
}
.topbar-toggle svg { width: 18px; height: 18px; }
.topbar-toggle { position: relative; }
.topbar-seite { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: var(--space-3); }
.topbar-seite.ist-rechts { justify-content: flex-end; }
.topbar-mitte { flex: none; display: flex; align-items: center; justify-content: center; }
.sidebar-backdrop { display: none; }
.production-tab-bar {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
overflow-x: auto;
scrollbar-width: none;
}
.production-tab-bar::-webkit-scrollbar { display: none; }
.production-tab-bar.is-empty { display: none; }
.production-tab-bar { position: sticky; top: 0; z-index: 39; }
@media (max-width: 900px) {
.production-tab-bar { top: calc(max(var(--space-3), env(safe-area-inset-top)) + 36px + var(--space-3) + 1px); }
}
.production-tab {
display: flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
padding: 6px 8px 6px 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
background: var(--color-bg);
color: var(--color-text-muted);
font-size: 0.82rem;
line-height: 1.2;
white-space: nowrap;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.production-tab:hover { color: var(--color-text); }
.production-tab.is-dragging { opacity: 0.55; }
.production-tab.is-dragover { background: var(--color-accent-soft); border-color: var(--color-accent); }
.production-tab.is-active {
background: color-mix(in srgb, var(--color-accent) 12%, var(--color-bg));
border-color: var(--color-accent);
color: var(--color-text);
}
.production-tab-health {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
background: var(--color-success);
}
.production-tab-health.is-amber { background: var(--color-warning); }
.production-tab-health.is-red { background: var(--color-danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-danger) 25%, transparent); }
.production-tab-label { display: flex; align-items: baseline; gap: 6px; max-width: 260px; overflow: hidden; }
.production-tab-number { font-weight: 600; flex-shrink: 0; }
.production-tab-client { flex-shrink: 0; opacity: 0.9; }
.production-tab-client::before,
.production-tab-title::before { content: "·"; margin-right: 5px; opacity: 0.45; }
.production-tab-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.8; min-width: 0; }
.production-tab.is-active .production-tab-label { max-width: none; }
.production-tab-close {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
color: inherit;
opacity: 0.6;
}
.production-tab-close:hover { opacity: 1; background: var(--color-border); }
.production-tab-close svg { width: 12px; height: 12px; }
.pd-loading { padding: var(--space-6); color: var(--color-text-muted); }
.pd-geruest { display: flex; flex-direction: column; gap: 16px; }
.pd-geruest-kopf { display: flex; flex-direction: column; gap: 4px; }
.pd-geruest-nummer { color: var(--color-text-muted); font-size: 13px; min-height: 18px; }
.pd-geruest-titel { margin: 0; font-size: 26px; font-weight: 500; }
.pd-geruest-phasen { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.pd-geruest-balken { display: block; height: 8px; border-radius: 4px; background: var(--color-bg-alt); }
.pd-geruest-balken.ist-titel { width: 40%; height: 28px; border-radius: 8px; }
.pd-geruest-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pd-geruest-spalte { display: flex; flex-direction: column; gap: 16px; }
.pd-geruest-kachel { height: 180px; border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: linear-gradient(90deg, var(--color-surface) 0%, var(--color-bg-alt) 50%, var(--color-surface) 100%); background-size: 200% 100%; animation: pd-geruest-glanz 1.4s ease-in-out infinite; }
.pd-geruest-kachel.ist-1 { height: 240px; }
.pd-geruest-kachel.ist-2 { height: 140px; }
@keyframes pd-geruest-glanz { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .pd-geruest-kachel { animation: none; } }
@media (max-width: 900px) { .pd-geruest-raster { grid-template-columns: minmax(0, 1fr); } .pd-geruest-phasen { display: none; } }
.pd-header { position: relative; }
.pd-header-main { display: flex; align-items: center; gap: var(--space-6); }
.pd-header-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.pd-header-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
}
.pd-header-top h1 { margin: 0; }
.pd-header-title { min-width: 0; flex: 1; }
.pd-header-mobile-wrap { display: none; }
.pd-header-mobile-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.pd-health-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--color-success);
flex-shrink: 0;
}
.pd-health-dot.is-amber { background: var(--color-warning); }
.pd-health-dot.is-red { background: var(--color-danger); }
.pd-header-mobile-title {
flex: 1;
min-width: 0;
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--color-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pd-header-mobile-progress {
flex-shrink: 0;
font-size: 11px;
font-weight: 600;
padding: 3px 8px;
border-radius: 999px;
background: var(--color-accent-soft);
color: var(--color-accent-strong);
}
.pd-header-mobile-toggle {
flex-shrink: 0;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--color-text-faint);
cursor: pointer;
}
.pd-header-mobile-toggle svg { transition: transform var(--dur-fast) var(--ease); }
.pd-header-mobile-toggle.is-expanded svg { transform: rotate(180deg); }
.pd-mobile-overview { max-height: 0; overflow: hidden; padding: 0 12px; transition: max-height var(--dur-slow) var(--ease); }
.pd-mobile-overview.is-open { max-height: 60vh; overflow-y: auto; padding: 10px 12px 12px; border-top: 1px solid var(--color-border); }
.pd-mobile-overview .expand-panel-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.pd-mobile-overview .expand-panel-field-label { font-size: 10px; }
.pd-mobile-overview .expand-panel-field-value { font-size: 12.5px; }
.pd-header.has-hero {
border-radius: var(--radius-md);
padding: var(--space-6) var(--space-5);
margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 0;
overflow: hidden;
}
.pd-header.has-hero::before {
content: '';
position: absolute;
inset: -20px;
background-image: var(--pd-hero-image);
background-size: cover;
background-position: center;
filter: blur(28px) brightness(0.45) saturate(1.2);
transform: scale(1.15);
z-index: 0;
}
.pd-header.has-hero > * { position: relative; z-index: 1; }
.pd-header.has-hero .pd-header-top h1 { color: #fff; }
.pd-header.has-hero .pd-health-badge {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.28);
color: #fff;
backdrop-filter: blur(6px);
}
.pd-header.has-hero .pd-ring-track { stroke: rgba(255, 255, 255, 0.25); }
.pd-header.has-hero .pd-ring-stage-label { color: rgba(255, 255, 255, 0.82); }
.pd-header.has-hero .pd-hero-drop-hint {
position: absolute;
inset: var(--space-3);
z-index: 3;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
border: 2px dashed rgba(255, 255, 255, 0.7);
border-radius: var(--radius-md);
background: rgba(0, 0, 0, 0.35);
color: #fff;
font-size: 13px;
font-weight: 600;
pointer-events: none;
}
.pd-hero-drop-hint svg { width: 22px; height: 22px; }
.pd-header.has-hero.is-hero-dragover .pd-hero-drop-hint { display: flex; }
.pd-header.has-hero.is-hero-uploading { opacity: 0.7; pointer-events: none; }
.pd-ring-wrap {
display: grid;
place-items: center;
flex-shrink: 0;
width: clamp(130px, 12.5vw, 180px);
height: clamp(130px, 12.5vw, 180px);
margin: var(--space-3) 0;
opacity: 0;
transform: scale(0.72);
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.pd-ring-wrap.is-in { opacity: 1; transform: scale(1); }
.pd-ring-svg { grid-area: 1 / 1; width: 100%; height: 100%; }
.pd-ring-svg svg { width: 100%; height: 100%; display: block; }
.pd-ring-track { stroke: var(--color-border); }
.pd-ring-fill {
stroke-linecap: round;
transition: stroke-dashoffset 0.9s cubic-bezier(0.16, 1, 0.3, 1);
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
.pd-ring-center {
grid-area: 1 / 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
max-width: 68%;
}
.pd-ring-percent { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 700; line-height: 1; color: var(--color-text); }
.pd-ring-stage { font-size: clamp(0.7rem, 1vw, 0.8rem); font-weight: 600; color: var(--color-text-muted); line-height: 1.25; text-align: center; }
.pd-header.has-hero .pd-ring-percent { color: #fff; }
.pd-header.has-hero .pd-ring-stage { color: rgba(255, 255, 255, 0.82); }
.pd-ring-step {
border: none;
background: none;
color: var(--color-text-muted);
font-size: 15px;
font-weight: 600;
line-height: 1;
padding: 2px 10px;
cursor: pointer;
opacity: 0.35;
border-radius: var(--radius-sm);
transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pd-ring-step:hover:not(:disabled),
.pd-ring-step:focus-visible:not(:disabled) {
opacity: 1;
background: var(--color-bg-alt);
color: var(--color-text);
}
.pd-ring-step:disabled { opacity: 0; cursor: default; pointer-events: none; }
.pd-header.has-hero .pd-ring-step { color: rgba(255, 255, 255, 0.75); }
.pd-header.has-hero .pd-ring-step:hover:not(:disabled),
.pd-header.has-hero .pd-ring-step:focus-visible:not(:disabled) {
background: rgba(255, 255, 255, 0.16);
color: #fff;
}
.pd-presence-cluster { display: flex; align-items: center; flex-shrink: 0; }
.pd-presence-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
color: #fff;
border: 2px solid var(--color-surface-2);
margin-left: -8px;
}
.pd-presence-cluster .pd-presence-avatar:first-child { margin-left: 0; }
.pd-header.has-hero .pd-presence-avatar { border-color: rgba(255, 255, 255, 0.5); }
.pd-celebrate { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.pd-confetti {
position: absolute;
top: -10px;
width: 7px;
height: 7px;
border-radius: 2px;
opacity: 0.9;
animation: pd-confetti-fall 1.6s ease-in forwards;
}
@keyframes pd-confetti-fall {
to { transform: translateY(220px) rotate(280deg); opacity: 0; }
}
.pd-health-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px 4px 8px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
color: var(--color-text-muted);
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
flex-shrink: 0;
}
.pd-health-badge .pd-health-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); flex-shrink: 0; }
.pd-health-badge.is-amber { color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 40%, var(--color-border)); }
.pd-health-badge.is-amber .pd-health-dot { background: var(--color-warning); }
.pd-health-badge.is-red { color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 40%, var(--color-border)); }
.pd-health-badge.is-red .pd-health-dot { background: var(--color-danger); }
.pd-client-link-btn {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid var(--color-border);
background: var(--color-bg-alt);
color: var(--color-text-muted);
cursor: pointer;
flex-shrink: 0;
padding: 0;
}
.pd-client-link-btn svg { width: 15px; height: 15px; }
.pd-client-link-btn:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.pd-client-link-btn.is-active { color: var(--color-accent); }
.pd-client-link-dot {
position: absolute;
top: 0;
right: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-success);
border: 2px solid var(--color-bg-alt);
}
.pd-header.has-hero .pd-client-link-btn {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.28);
color: #fff;
backdrop-filter: blur(6px);
}
.pd-header.has-hero .pd-client-link-btn.is-active { color: #fff; }
.pd-header.has-hero .pd-client-link-dot { border-color: rgba(255, 255, 255, 0.9); }
.pd-client-link-btn.is-mobile {
width: 28px;
height: 28px;
border: none;
background: transparent;
color: var(--color-text-faint);
}
.pd-client-link-btn.is-mobile.is-active { color: var(--color-accent); }
.pd-client-link-btn.is-mobile .pd-client-link-dot { border-color: var(--color-surface-2); }
.pd-timer-btn.is-running { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.pd-timer-btn.is-running:hover { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.pd-timer-btn.is-disabled { opacity: 0.4; cursor: not-allowed; }
.pd-timer-btn.is-disabled:hover { color: var(--color-text-muted); border-color: var(--color-border); }
.pd-header.has-hero .pd-timer-btn.is-running { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.pd-header.has-hero .pd-timer-btn.is-disabled:hover { color: #fff; }
.pd-timer-inline { margin-bottom: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.pd-timer-inline-row { display: flex; align-items: center; gap: 8px; }
.pd-timer-inline-input { flex: 1; min-width: 0; }
.pd-timer-inline-row .pd-timer-inline-input { width: auto; }
.pd-timer-inline-billable { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--color-text-muted); white-space: nowrap; flex-shrink: 0; }
.pd-timer-inline-note { font-size: 12px; margin-bottom: 6px; }
.pd-category { margin-bottom: var(--space-6); }
.pd-category:last-child { margin-bottom: 0; }
.pd-category-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: var(--space-3);
font-size: 13px;
font-weight: 600;
}
.pd-category-header svg { width: 16px; height: 16px; }
.pd-category.cat-creative .pd-category-header { color: var(--color-accent); }
.pd-category.cat-team .pd-category-header { color: var(--color-success); }
.pd-category.cat-admin .pd-category-header { color: var(--color-warning); }
.pd-critical-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 600;
margin-bottom: var(--space-5);
}
.pd-critical-bar svg { width: 15px; height: 15px; flex-shrink: 0; }
.pd-critical-bar.is-red { background: var(--color-danger-soft); color: var(--color-danger); }
.pd-critical-bar.is-amber { background: var(--color-warning-soft); color: var(--color-warning); }
.mig-mandanten:empty { display: none; }
.mig-mandanten { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.mig-abschnitt { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.mig-liste { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.mig-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--color-border); }
.mig-zeile:last-child { border-bottom: 0; }
.mig-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mig-text b { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.mig-text small { color: var(--color-text-faint); font-size: 12px; }
.mig-meldung { margin: 4px 0 0; font-size: 12.5px; color: var(--color-danger); overflow-wrap: anywhere; }
.mig-status { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; background: var(--color-surface-2); color: var(--color-text-muted); }
.mig-status.ist-offen { background: var(--color-warning-soft); color: var(--color-warning); }
.mig-status.ist-ok, .mig-status.ist-markiert { background: var(--color-accent-soft); color: var(--color-accent); }
.mig-status.ist-fehler { background: var(--color-danger-soft); color: var(--color-danger); }
.modal.migp-fenster { max-width: 520px; }
.migp-inhalt { display: flex; flex-direction: column; gap: 12px; }
.migp-liste { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.migp-zeile { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-bottom: 1px solid var(--color-border); }
.migp-zeile:last-child { border-bottom: 0; }
.migp-zeile b { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.migp-zeile small { color: var(--color-text-faint); font-size: 12px; }
.migp-zeile.ist-ok { background: var(--color-accent-soft); }
.migp-zeile.ist-ok small::after { content: ' · eingespielt'; color: var(--color-accent); font-weight: 600; }
.migp-zeile.ist-fehler { background: var(--color-danger-soft); }
.migp-hinweis { margin: 0; font-size: 13px; color: var(--color-text-muted); }
.migp-hinweis.ist-fehler { color: var(--color-danger); overflow-wrap: anywhere; }
.migp-links { margin-right: auto; display: flex; align-self: center; }
.migp-titel { margin: 16px 0 6px; font-size: 14px; font-weight: 600; }
.migp-titel:first-child { margin-top: 0; }
.mig-knoepfe { display: flex; gap: 6px; align-items: center; }
.mig-sql { margin: 0; max-height: 60vh; overflow: auto; font-size: 12px; line-height: 1.5; white-space: pre-wrap; background: var(--color-surface-2); padding: 12px; border-radius: 8px; }
@media (max-width: 640px) { .mig-zeile { grid-template-columns: minmax(0, 1fr) auto; } .mig-knoepfe { grid-column: 1 / -1; justify-content: flex-end; } }
.todo-feld-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.todo-ohne-faellig { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 500; color: var(--color-accent); cursor: pointer; }
.todo-ohne-faellig:hover { text-decoration: underline; }
.fa-ansicht { position: fixed; inset: 0; z-index: 400; background: #2b2a27; }
.fa-buehne { position: absolute; inset: 0; display: grid; place-items: center; }
.fa-rahmen { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.fa-seiten { position: absolute; inset: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-x pan-y;
padding: calc(env(safe-area-inset-top, 0px) + 64px) 12px calc(env(safe-area-inset-bottom, 0px) + 16px); }
.fa-innen { display: flex; flex-direction: column; align-items: center; gap: 14px; width: max-content; min-width: 100%; will-change: transform; }
.fa-seite { flex: none; background: #fff; box-shadow: 0 2px 14px rgba(0, 0, 0, .35); }
.fa-zu { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); right: calc(env(safe-area-inset-right, 0px) + 12px); width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: rgba(22, 21, 18, .78); color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.fa-zu svg { width: 18px; height: 18px; }
.fa-zu:hover { background: rgba(22, 21, 18, .92); }
.fa-zu:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.fa-lade { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); right: calc(env(safe-area-inset-right, 0px) + 60px); width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: rgba(22, 21, 18, .78); color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.fa-lade svg { width: 18px; height: 18px; }
.fa-lade:hover { background: rgba(22, 21, 18, .92); }
.fa-lade[hidden] { display: none; }
.fa-lade:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
body.fa-offen { overflow: hidden; }
@media (min-width: 641px) { .pd-critical-bar { display: none; } }
.pd-header.has-hero.pd-kopf-b { padding: 26px 28px 24px; display: flex; flex-direction: column; gap: 20px; }
.pd-kopf-zeile { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; min-width: 0; }
.pd-kopf-titel { margin: 0; font-size: 25px; font-weight: 600; letter-spacing: .01em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; }
.pd-kopf-titel small { font-size: 16px; font-weight: 500; opacity: .7; margin-right: 8px; }
.pd-kopf-meta { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 14px; color: rgba(255, 255, 255, .78); margin-left: 12px; }
.pd-kopf-meta b { color: #fff; font-weight: 600; }
.pd-kopf-luft { flex: 1; }
.pd-kopf-hinweis { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; font-weight: 600; padding: 6px 13px; border-radius: 999px; white-space: nowrap; cursor: pointer; background: #f7dcd8; color: #9c2b24; border: 1px solid #f0bdb6; max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
.pd-kopf-hinweis i { width: 7px; height: 7px; border-radius: 50%; background: #c8423b; flex: none; }
.pd-kopf-hinweis.is-amber { background: #fbeedd; color: #8a4a0c; border-color: #f1d3ad; }
.pd-kopf-hinweis.is-amber i { background: #d98a1f; }
.pd-phasen { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.pd-phase { font: inherit; font-size: 13px; font-weight: 600; text-align: left; padding: 12px 14px 13px; border: 0; border-top: 3px solid transparent; border-radius: 10px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .6); overflow: hidden; cursor: pointer; min-width: 0; }
.pd-phase:hover:not(.ist-jetzt) { background: rgba(255, 255, 255, .18); color: #fff; }
.pd-phase-name { display: block; overflow-wrap: anywhere; }
.pd-phase small { display: block; font-weight: 500; font-size: 11.5px; opacity: .75; margin-top: 2px; }
.pd-phase:not(:has(small))::after { content: "\00a0"; display: block; font-size: 11.5px; margin-top: 2px; }
.pd-kopf-b ~ .tp-wurzel:not(.ist-leer) { margin-top: 28px; }
.pd-phase.ist-fertig { background: rgba(111, 176, 127, .25); color: #fff; border-top-color: #6fb07f; }
.pd-phase.ist-jetzt { background: #fff; color: #1c1b18; border-top-color: #6fb07f; cursor: default; }
html[data-theme="dark"] .pd-phase.ist-jetzt { background: var(--color-accent-soft); color: var(--color-accent-strong); border-top-color: var(--color-accent); }
@keyframes pd-kopf-blink { 0%, 100% { box-shadow: 0 0 0 0 rgba(10, 107, 79, 0); } 30% { box-shadow: 0 0 0 4px rgba(10, 107, 79, .45); } }
.pd-kopf-blink { animation: pd-kopf-blink 1.4s ease-out 1; }
.pd-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
align-items: start;
}
.pd-column { display: flex; flex-direction: column; gap: var(--space-4); min-height: 40px; min-width: 0; }
.pd-column.is-dragover-empty { outline: 2px dashed var(--color-border); outline-offset: -2px; border-radius: var(--radius-md); }
.pd-widget {
background: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
}
.pd-widget.is-dragging { opacity: 0.5; }
.pd-widget.is-dragover { outline: 2px dashed var(--color-accent); outline-offset: -2px; }
.pd-widget.cat-creative { box-shadow: inset 3px 0 0 0 var(--color-accent); }
.pd-widget.cat-team { box-shadow: inset 3px 0 0 0 var(--color-success); }
.pd-widget.cat-admin { box-shadow: inset 3px 0 0 0 var(--color-warning); }
.pd-widget.flag-danger { border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-border)); box-shadow: inset 3px 0 0 0 var(--color-danger), 0 0 0 1px color-mix(in srgb, var(--color-danger) 20%, transparent); }
.pd-widget.flag-warning { border-color: color-mix(in srgb, var(--color-warning) 45%, var(--color-border)); box-shadow: inset 3px 0 0 0 var(--color-warning), 0 0 0 1px color-mix(in srgb, var(--color-warning) 20%, transparent); }
.pd-widget-header {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border);
background: var(--color-surface);
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
}
.pd-widget-grip {
display: flex;
color: var(--color-text-faint);
cursor: grab;
flex-shrink: 0;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
touch-action: none;
}
.pd-widget-grip svg { width: 14px; height: 14px; }
.pd-widget-hide-btn {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin-left: auto;
border: none;
background: transparent;
color: var(--color-text-muted);
border-radius: var(--radius-sm);
cursor: pointer;
flex-shrink: 0;
}
.pd-widget-hide-btn:hover { background: var(--color-danger-soft, #fde8e8); color: var(--color-danger); }
.pd-widget-hide-btn svg { width: 13px; height: 13px; }
.pd-auswahl {
margin-top: var(--space-5);
padding: 4px var(--space-4) var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
}
.pd-auswahl.ist-leer { display: none; }
.pd-auswahl-kopf {
display: flex;
align-items: center;
gap: 8px;
padding: var(--space-3) 0 10px;
font-size: var(--text-meta);
font-weight: var(--weight-semibold);
color: var(--color-text);
}
.pd-auswahl-kopf svg { width: 15px; height: 15px; color: var(--color-text-muted); }
.pd-auswahl-kopf-text { white-space: nowrap; }
.pd-auswahl-zahl { font-variant-numeric: tabular-nums; }
.pd-auswahl-gruppe { margin-top: 10px; }
.pd-auswahl-gruppe.ist-leer { display: none; }
.pd-auswahl-gruppe-titel {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 7px;
font-size: 10.5px;
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-faint);
}
.pd-auswahl-gruppe-titel::before {
content: '';
width: 6px;
height: 6px;
border-radius: var(--radius-full);
background: var(--color-border-strong);
flex: none;
}
.pd-auswahl-gruppe.cat-creative .pd-auswahl-gruppe-titel::before { background: var(--color-tone-purple); }
.pd-auswahl-gruppe.cat-team .pd-auswahl-gruppe-titel::before { background: var(--color-tone-teal); }
.pd-auswahl-gruppe.cat-admin .pd-auswahl-gruppe-titel::before { background: var(--color-tone-amber); }
.pd-auswahl-reihe { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-auswahl-karte {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 12px 7px 9px;
border: 1px solid var(--color-border);
background: var(--color-bg-alt);
border-radius: var(--radius-md);
font: inherit;
font-size: 12px;
color: inherit;
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.pd-auswahl-karte:hover { border-color: var(--color-accent); background: var(--color-surface); }
.pd-auswahl-karte svg { width: 14px; height: 14px; color: var(--color-text-muted); flex: none; }
.pd-auswahl-titel { font-weight: var(--weight-medium); }
.pd-auswahl-grund { color: var(--color-text-faint); font-size: 10.5px; }
@media (max-width: 640px) {
.pd-auswahl { padding-left: var(--space-3); padding-right: var(--space-3); }
}
.termin-liste { display: flex; flex-direction: column; }
.termin-zeile {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 7px 0;
border-bottom: 1px solid var(--color-border);
min-width: 0;
}
.termin-zeile:last-child { border-bottom: 0; padding-bottom: 0; }
.termin-zeile:first-child { padding-top: 0; }
.termin-punkt {
width: 8px;
height: 8px;
margin-top: 5px;
border-radius: 50%;
background: var(--tl-art, var(--color-text-faint));
flex: none;
}
.termin-zeile.ist-jetzt .termin-punkt {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--tl-art, var(--color-accent)) 25%, transparent);
}
.termin-text { flex: 1; min-width: 0; }
.termin-kopf { display: flex; align-items: center; gap: 6px; min-width: 0; }
.termin-name {
font-size: 12.5px;
font-weight: var(--weight-medium);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.termin-fuehrend svg, .termin-kunde svg { width: 12px; height: 12px; display: block; }
.termin-fuehrend { color: var(--color-warning); flex: none; line-height: 0; }
.termin-kunde { color: var(--color-text-faint); flex: none; line-height: 0; }
.termin-meta { font-size: 11px; color: var(--color-text-muted); margin-top: 1px; }
.termin-zeile.ist-vorbei .termin-name { color: var(--color-text-muted); }
.termin-zeile.ist-vorbei .termin-punkt { opacity: 0.45; }
.termin-aktionen {
display: flex;
align-items: center;
gap: 2px;
flex: none;
opacity: 0;
transition: opacity var(--dur-fast) var(--ease);
}
.termin-zeile:hover .termin-aktionen,
.termin-zeile:focus-within .termin-aktionen { opacity: 1; }
.termin-aktionen .btn-ghost { padding: 2px 4px; }
.termin-aktionen svg { width: 13px; height: 13px; }
.termin-aktionen .ist-gefahr:hover { color: var(--color-danger); }
.termin-zeile .termin-kunde-knopf { flex: none; padding: 2px 4px; margin-left: -8px; color: var(--color-text-faint); opacity: .6; }
.termin-zeile .termin-kunde-knopf.is-client-shared { color: var(--color-accent); opacity: 1; }
.termin-zeile:hover .termin-kunde-knopf { opacity: 1; }
.empty-state.ist-klein { padding: var(--space-3) 0; text-align: left; }
.empty-state.ist-klein p { margin: 0; font-size: 12px; }
.empty-state.ist-klein p + p { margin-top: 2px; font-size: 11px; }
.termin-schalter {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: var(--space-3);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
}
.stock-liste { display: flex; flex-direction: column; }
.stock-zeile {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 7px 0;
border-bottom: 1px solid var(--color-border);
min-width: 0;
}
.stock-zeile:last-child { border-bottom: 0; padding-bottom: 0; }
.stock-zeile:first-child { padding-top: 0; }
.stock-zeile.ist-archiviert { opacity: 0.55; }
.stock-symbol {
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
background: var(--color-bg-alt);
color: var(--color-text-muted);
flex: none;
}
.stock-symbol svg { width: 13px; height: 13px; }
.stock-symbol.ist-ton-purple { background: var(--color-tone-purple-soft); color: var(--color-tone-purple); }
.stock-symbol.ist-ton-teal   { background: var(--color-tone-teal-soft);   color: var(--color-tone-teal); }
.stock-symbol.ist-ton-blue   { background: var(--color-tone-blue-soft);   color: var(--color-tone-blue); }
.stock-symbol.ist-ton-amber  { background: var(--color-tone-amber-soft);  color: var(--color-tone-amber); }
.stock-symbol.ist-ton-rose   { background: var(--color-tone-rose-soft);   color: var(--color-tone-rose); }
.stock-symbol.ist-ton-slate  { background: var(--color-tone-slate-soft);  color: var(--color-tone-slate); }
.stock-text { flex: 1; min-width: 0; }
.stock-kopf { display: flex; align-items: center; gap: 6px; min-width: 0; }
.stock-name {
font-size: 12.5px;
font-weight: var(--weight-medium);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.stock-kopf .badge { flex: none; }
.stock-meta { font-size: 11px; color: var(--color-text-muted); margin-top: 1px; }
.stock-aktionen {
display: flex;
align-items: center;
gap: 2px;
flex: none;
opacity: 0;
transition: opacity var(--dur-fast) var(--ease);
}
.stock-zeile:hover .stock-aktionen,
.stock-zeile:focus-within .stock-aktionen { opacity: 1; }
.stock-aktionen .btn-ghost { padding: 2px 4px; }
.stock-aktionen svg { width: 13px; height: 13px; }
.stock-aktionen .ist-gefahr:hover { color: var(--color-danger); }
.stock-abschnitt {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-text-muted);
margin: var(--space-4) 0 var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
}
.stock-abschnitt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.stock-datei {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: var(--space-3);
}
.stock-datei-name { font-size: 12px; color: var(--color-text-muted); }
.stock-treffer {
max-height: 260px;
overflow-y: auto;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
margin-bottom: var(--space-3);
}
.stock-treffer-zeile {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 7px 10px;
border: 0;
border-bottom: 1px solid var(--color-border);
background: none;
font: inherit;
font-size: 12.5px;
color: inherit;
text-align: left;
cursor: pointer;
}
.stock-treffer-zeile:last-child { border-bottom: 0; }
.stock-treffer-zeile:hover { background: var(--color-bg-alt); }
.stock-treffer-zeile.ist-gewaehlt { background: var(--color-accent-soft); }
.stock-treffer-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.stock-seite {
display: grid;
grid-template-columns: var(--stock-spalte, 320px) 1fr;
gap: 0;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
align-items: start;
overflow: hidden;
}
@media (min-width: 1200px) { .stock-seite { --stock-spalte: 400px; } }
@media (min-width: 1400px) { .stock-seite { --stock-spalte: 480px; } }
.stock-seite-spalte {
display: flex;
flex-direction: column;
position: sticky;
top: 0;
max-height: 100vh;
min-height: 0;
border-right: 1px solid var(--color-border);
background: var(--color-surface-2);
}
.stock-seite-suche {
position: relative;
padding: 12px 12px 8px;
flex-shrink: 0;
}
.stock-seite-suche input {
width: 100%;
padding: 7px 10px 7px 32px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text);
font: inherit;
font-size: 13px;
}
.stock-seite-suche span {
position: absolute;
left: 22px;
top: 20px;
color: var(--color-text-faint);
pointer-events: none;
}
.stock-seite-suche svg { width: 14px; height: 14px; }
.stock-seite-chips {
display: flex;
flex-wrap: wrap;
gap: 5px;
padding: 4px 12px 10px;
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
.stock-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-surface);
color: var(--color-text-muted);
font: inherit;
font-size: 12px;
cursor: pointer;
}
.stock-chip:hover { border-color: var(--color-border-strong); }
.stock-chip.ist-aktiv {
border-color: var(--color-accent);
background: var(--color-accent-soft);
color: var(--color-accent);
}
.stock-chip-zahl { font-size: 11px; color: var(--color-text-faint); }
.stock-chip.ist-aktiv .stock-chip-zahl { color: inherit; }
.stock-chip.ist-warnung { margin-left: auto; border-color: var(--color-tone-rose); color: var(--color-tone-rose); }
.stock-chip.ist-warnung .stock-chip-zahl { color: inherit; }
.stock-chip.ist-warnung.ist-aktiv { background: var(--color-tone-rose-soft); }
.stock-seite-liste { overflow-y: auto; flex: 1; min-height: 0; padding-bottom: 8px; }
.stock-seite-gruppe {
padding: 10px 14px 4px;
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-faint);
font-weight: 600;
}
.stock-seite-zeile {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 14px;
cursor: pointer;
border-left: 2px solid transparent;
}
.stock-seite-zeile:hover { background: var(--color-surface); }
.stock-seite-zeile.ist-gewaehlt {
background: var(--color-surface);
border-left-color: var(--color-accent);
}
.stock-seite-zeile-text { min-width: 0; flex: 1; }
.stock-seite-zeile-name {
font-size: 12.8px;
font-weight: 600;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.stock-seite-zeile-unten {
font-size: 11px;
color: var(--color-text-faint);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.stock-seite-mal {
font-size: 11px;
color: var(--color-text-muted);
background: var(--color-bg-alt);
border-radius: 999px;
padding: 1px 7px;
flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
.stock-seite-punkt {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-tone-rose);
flex-shrink: 0;
}
.stock-seite-detail { padding: 20px 22px; overflow-y: auto; min-height: 0; }
.stock-seite-kopf { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 4px; }
.stock-symbol.ist-gross { width: 56px; height: 56px; border-radius: 12px; }
.stock-symbol.ist-gross svg { width: 24px; height: 24px; }
.stock-seite-kopf-text { min-width: 0; flex: 1; }
.stock-seite-kopf-text h2 { margin: 0 0 2px; font-size: 18px; letter-spacing: -0.2px; }
.stock-seite-urheber { margin: 0 0 8px; color: var(--color-text-muted); font-size: 13px; }
.stock-seite-abzeichen { display: flex; gap: 6px; flex-wrap: wrap; }
.stock-seite-kopf-knoepfe { display: flex; gap: 6px; flex-shrink: 0; }
.stock-ablage { position: relative; }
.stock-ablage-hinweis {
position: absolute;
inset: -6px;
display: flex;
align-items: center;
justify-content: center;
border: 2px dashed var(--color-accent);
border-radius: var(--radius-md);
background: var(--color-accent-soft);
color: var(--color-accent);
font-size: 12.5px;
font-weight: 600;
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-fast) var(--ease);
}
.stock-ablage.is-dragover .stock-ablage-hinweis { opacity: 1; }
.stock-widget-fortschritt { margin-bottom: 8px; }
.stock-widget-fortschritt.ist-leer { display: none; }
.stock-widget-fortschritt-text { font-size: 11.5px; color: var(--color-text-muted); }
.stock-widget-fortschritt-bahn {
display: block;
height: 3px;
margin-top: 4px;
border-radius: var(--radius-full);
background: var(--color-bg-alt);
overflow: hidden;
}
.stock-widget-fortschritt-balken {
display: block;
height: 100%;
background: var(--color-accent);
transition: width var(--dur-fast) linear;
}
.stock-seite-ablage {
max-height: 0;
overflow: hidden;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
border: 0 dashed var(--color-accent);
border-radius: var(--radius-lg);
background: var(--color-accent-soft);
color: var(--color-accent);
font-size: 14px;
font-weight: 600;
transition: max-height var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease),
margin-bottom var(--dur-fast) var(--ease), padding var(--dur-fast) var(--ease),
border-width var(--dur-fast) var(--ease);
padding: 0;
margin-bottom: 0;
}
.stock-seite-huelle.is-dragover .stock-seite-ablage {
max-height: 120px;
opacity: 1;
border-width: 2px;
padding: var(--space-5) var(--space-4);
margin-bottom: var(--space-3);
}
.stock-seite-ablage svg { width: 22px; height: 22px; }
.stock-seite-huelle.is-dragover .stock-seite { opacity: 0.5; }
.stock-seite-fortschritt { margin-bottom: var(--space-3); }
.stock-seite-fortschritt.ist-leer { display: none; }
.stock-seite-fortschritt-text { font-size: 12.5px; color: var(--color-text-muted); }
.stock-seite-fortschritt-bahn {
display: block;
height: 4px;
margin-top: 5px;
border-radius: var(--radius-full);
background: var(--color-bg-alt);
overflow: hidden;
}
.stock-seite-fortschritt-balken {
display: block;
height: 100%;
background: var(--color-accent);
transition: width var(--dur-fast) linear;
}
.stock-sammel-kopf,
.stock-sammel-zeile {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1fr) 132px 20px;
gap: 8px;
align-items: center;
}
.stock-sammel-kopf {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-faint);
font-weight: 600;
padding: 10px 0 5px;
border-bottom: 1px solid var(--color-border);
}
.stock-sammel-liste { max-height: 46vh; overflow-y: auto; padding-top: 6px; }
.stock-sammel-zeile { padding: 4px 0; }
.stock-sammel-zeile input, .stock-sammel-zeile select {
width: 100%;
padding: 5px 8px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text);
font: inherit;
font-size: 12.5px;
}
.stock-sammel-datei {
font-size: 12px;
color: var(--color-text-faint);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.stock-sammel-zustand { font-size: 13px; text-align: center; color: var(--color-text-faint); }
.stock-sammel-zeile.ist-fertig .stock-sammel-zustand { color: var(--color-success); }
.stock-sammel-zeile.ist-fehler .stock-sammel-zustand { color: var(--color-danger); }
.stock-sammel-zeile.ist-fertig { opacity: 0.55; }
@media (max-width: 720px) {
.stock-sammel-kopf { display: none; }
.stock-sammel-zeile {
grid-template-columns: 1fr 24px;
padding: 8px 0;
border-bottom: 1px solid var(--color-border);
}
.stock-sammel-datei { grid-column: 1 / -1; }
.stock-sammel-zustand { grid-row: 2; grid-column: 2; }
}
.stock-nachreichen {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
margin: 16px 0 0;
padding: 16px;
border: 1px dashed var(--color-border-strong);
border-radius: var(--radius-md);
background: var(--color-surface-2);
color: var(--color-text-muted);
font-size: 13px;
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease);
}
.stock-nachreichen:hover { border-color: var(--color-accent); color: var(--color-accent); }
.stock-nachreichen.is-dragover {
border-color: var(--color-accent);
border-style: solid;
background: var(--color-accent-soft);
color: var(--color-accent);
}
.stock-nachreichen svg { width: 18px; height: 18px; }
.stock-seite-zeile.kann-datei.ist-dropziel {
background: var(--color-accent-soft);
border-left-color: var(--color-accent);
outline: 1px dashed var(--color-accent);
outline-offset: -3px;
}
.stock-spieler {
display: flex;
align-items: center;
gap: 12px;
margin: 16px 0 0;
padding: 10px 14px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface-2);
}
.stock-spieler audio { display: none; }
.stock-spieler-knopf {
width: 34px;
height: 34px;
flex-shrink: 0;
border: 0;
border-radius: var(--radius-full);
background: var(--color-accent);
color: #fff;
display: grid;
place-items: center;
cursor: pointer;
transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
html[data-theme="dark"] .stock-spieler-knopf { color: #04252c; }
.stock-spieler-knopf:hover { background: var(--color-accent-hover); }
.stock-spieler-knopf:active { transform: scale(0.94); }
.stock-spieler-knopf:disabled { opacity: 0.5; cursor: default; }
.stock-spieler-knopf svg { width: 15px; height: 15px; }
.stock-spieler-zeit {
font-size: 12px;
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
min-width: 34px;
text-align: center;
flex-shrink: 0;
}
.stock-spieler-bahn {
flex: 1;
min-width: 0;
height: 24px;
cursor: pointer;
position: relative;
display: flex;
align-items: center;
}
.stock-spieler-bahn::before {
content: '';
position: absolute;
left: 0;
right: 0;
height: 6px;
border-radius: var(--radius-full);
background: var(--color-border-strong);
opacity: 0.55;
}
.stock-spieler-bahn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.stock-spieler-fuellung {
position: absolute;
left: 0;
height: 6px;
width: 0;
border-radius: var(--radius-full);
background: var(--color-accent);
pointer-events: none;
}
.stock-seite-zeilen {
display: grid;
grid-template-columns: 148px 1fr;
gap: 7px 16px;
font-size: 13px;
margin: 16px 0 20px;
padding: 14px 0;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.stock-seite-zeilen dt { color: var(--color-text-faint); font-size: 12px; }
.stock-seite-zeilen dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.stock-seite-zeilen a { color: var(--color-accent); text-decoration: none; }
.stock-seite-zeilen a:hover { text-decoration: underline; }
.stock-seite-abschnitt {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-faint);
font-weight: 600;
margin-bottom: 8px;
}
.stock-seite-verwendungen { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.stock-seite-verwendung {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-bottom: 1px solid var(--color-border);
font-size: 13px;
}
.stock-seite-verwendung:last-child { border-bottom: 0; }
.stock-seite-verwendung.ist-summe { background: var(--color-surface-2); font-weight: 600; }
.stock-seite-verwendung-p { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.stock-seite-verwendung-zweck { color: var(--color-text-muted); font-size: 12px; }
.stock-seite-verwendung-k { margin-left: auto; font-size: 12.5px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.stock-seite-verwendung-k.ist-leer { color: var(--color-text-faint); }
.stock-seite-leer { padding: 22px 14px; text-align: center; color: var(--color-text-muted); font-size: 13px; }
@media (max-width: 860px) {
.stock-seite { grid-template-columns: 1fr; }
.stock-seite-spalte {
border-right: 0;
border-bottom: 1px solid var(--color-border);
position: static;
max-height: none;
}
.stock-seite-liste { max-height: 240px; }
.stock-seite-detail { padding: 16px 14px; }
.stock-seite-kopf-knoepfe { flex-direction: column; }
.stock-seite-zeilen { grid-template-columns: 1fr; gap: 2px 0; }
.stock-seite-zeilen dt { margin-top: 8px; }
}
.pd-widget-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
flex: 1;
min-width: 0;
}
.pd-widget-title svg { width: 14px; height: 14px; color: var(--color-accent); flex-shrink: 0; }
.pd-widget-header-extra { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.pd-widget-body { padding: var(--space-4); min-width: 0; }
.pd-widget-body > .expand-panel-section { background: none; border: none; padding: 0; }
.pd-widget-body > .expand-panel-section > h3,
.pd-widget-body > .expand-panel-section > .asset-abschnitt-kopf > h3 { display: none; }
.asset-umschalter { margin-left: auto; }
.pd-widget-body > .expand-panel-section > .asset-abschnitt-kopf {
margin: 0 0 var(--space-3);
padding: 0;
background: none;
border-bottom: 0;
}
.pd-simple-list { display: flex; flex-direction: column; gap: 2px; }
.pd-widget[data-widget="assets"] .expand-documents-list { max-height: 260px; overflow-y: auto; }
.pd-widget[data-widget="filetransfer"] .pd-simple-list { max-height: 260px; overflow-y: auto; }
.pd-simple-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 6px;
border-radius: var(--radius-sm);
cursor: pointer;
}
.pd-simple-row:hover { background: var(--color-bg-alt); }
.pd-simple-row svg { width: 16px; height: 16px; color: var(--color-text-faint); flex-shrink: 0; }
.pd-simple-thumb { width: 36px; height: 24px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.pd-simple-thumb.pm-file-thumb-empty { width: 36px; height: 24px; border: 1px dashed var(--color-border); background: var(--color-bg-alt); cursor: pointer; }
.pd-simple-row-title { font-size: var(--text-body); color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-simple-row-sub { font-size: 12px; color: var(--color-text-faint); }
.pd-simple-row.is-master { background: var(--color-warning-soft); }
.pd-simple-row.is-master:hover { background: color-mix(in srgb, var(--color-warning-soft) 70%, var(--color-bg-alt)); }
.pd-simple-row-delete {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
flex-shrink: 0;
border: none;
background: transparent;
border-radius: 50%;
color: var(--color-text-faint);
cursor: pointer;
opacity: 0.55;
transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.pd-simple-row-delete svg { width: 13px; height: 13px; }
.pd-simple-row:hover .pd-simple-row-delete,
.pd-simple-row-delete:hover,
.pd-simple-row-delete:focus-visible { opacity: 1; }
.pd-simple-row-delete:hover { color: var(--color-danger); background: var(--color-danger-soft); }
.pd-storage-pane { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-2) 4px; }
.pd-storage-stat-value { font-size: 22px; font-weight: var(--weight-medium); color: var(--color-text); }
.pd-storage-stat-label { font-size: 12px; color: var(--color-text-faint); margin-top: 2px; }
.pd-master-badge {
display: inline-flex;
align-items: center;
background: var(--color-warning);
color: #fff;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: 999px;
margin-right: 7px;
vertical-align: middle;
position: relative;
top: -1px;
}
.pd-chat-list {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 220px;
overflow-y: auto;
overscroll-behavior: contain;
padding: 2px 2px 6px;
}
.pd-chat-msg {
display: flex;
flex-direction: column;
align-items: flex-start;
max-width: 85%;
align-self: flex-start;
}
.pd-chat-msg.is-mine { align-items: flex-end; align-self: flex-end; }
.pd-chat-msg-meta {
display: flex;
align-items: baseline;
gap: 6px;
margin: 0 2px 2px;
}
.pd-chat-msg-sender {
font-size: 10.5px;
font-weight: 600;
color: var(--color-text-faint);
}
.pd-chat-msg-time {
font-size: 10px;
color: var(--color-text-faint);
opacity: 0.75;
}
.pd-chat-msg-body {
background: var(--color-bg-alt);
color: var(--color-text);
border-radius: var(--radius-md);
padding: 6px 10px;
font-size: 12.5px;
line-height: 1.4;
white-space: pre-wrap;
word-break: break-word;
}
.pd-chat-msg.is-mine .pd-chat-msg-body { background: var(--color-accent); color: #fff; }
.pd-chat-msg.is-pending .pd-chat-msg-body { opacity: 0.6; }
.pd-chat-composer { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.pd-chat-input {
flex: 1;
min-width: 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
padding: 6px 12px;
font-size: 12.5px;
background: var(--color-surface);
color: var(--color-text);
}
.pd-chat-input:focus { outline: none; border-color: var(--color-accent); box-shadow: var(--shadow-glow); }
.pd-chat-channel-tabs {
display: flex;
gap: 4px;
padding: 12px var(--space-4) 8px;
}
.pd-chat-channel-tab {
display: inline-flex;
align-items: center;
gap: 5px;
border: none;
background: transparent;
color: var(--color-text-faint);
font-size: 12px;
font-weight: 600;
padding: 4px 10px;
border-radius: var(--radius-full);
cursor: pointer;
}
.pd-chat-channel-tab:hover { background: var(--color-bg-alt); color: var(--color-text); }
.pd-chat-channel-tab.is-active { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.pd-chat-unread-badge {
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: var(--radius-full);
background: var(--color-danger);
color: #fff;
font-size: 10px;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.pd-chat-input-wrap { position: relative; flex: 1; min-width: 0; }
.pd-chat-input-wrap .pd-chat-input { width: 100%; }
.chat-mention {
font-weight: var(--weight-semibold, 600);
color: var(--color-accent-strong);
}
.chat-message.is-mine .chat-mention,
.pd-chat-msg.is-mine .chat-mention {
color: inherit;
font-weight: var(--weight-bold, 700);
}
.erw-liste {
position: absolute;
bottom: calc(100% + 4px);
left: 0;
right: 0;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
max-height: 160px;
overflow-y: auto;
z-index: 20;
}
.erw-option {
padding: 6px 10px;
font-size: 12.5px;
color: var(--color-text);
cursor: pointer;
}
.erw-option.is-active, .erw-option:hover { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.pd-chat-mention {
color: var(--color-accent);
font-weight: 600;
}
.pd-chat-msg.is-mine .pd-chat-mention { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.pd-mail-meta {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 13px;
color: var(--color-text-muted);
margin-bottom: 12px;
}
.pd-mail-text {
white-space: pre-wrap;
word-break: break-word;
font-size: 13.5px;
line-height: 1.55;
color: var(--color-text);
max-height: 50vh;
overflow-y: auto;
}
.pd-activity-layout { display: flex; gap: var(--space-4); align-items: stretch; }
.pd-heatmap-col { flex-shrink: 0; display: flex; }
.pd-activity-list-col { flex: 1; min-width: 0; }
.pd-activity-list { display: flex; flex-direction: column; gap: var(--space-2); max-height: 192px; overflow-y: auto; }
.pd-activity-row { display: flex; align-items: flex-start; gap: 10px; }
.pd-activity-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--color-bg-alt);
color: var(--color-accent);
flex-shrink: 0;
margin-top: 1px;
}
.pd-activity-icon svg { width: 12px; height: 12px; }
.pd-activity-title { font-size: var(--text-body); color: var(--color-text); line-height: 1.3; }
.pd-activity-sub { font-size: 12px; color: var(--color-text-faint); margin-top: 1px; }
.pd-heatmap {
display: grid;
grid-template-rows: repeat(7, 11px);
grid-auto-flow: column;
grid-auto-columns: 11px;
justify-content: start;
align-content: space-between;
column-gap: 3px;
}
.pd-heat-cell { width: 11px; height: 11px; border-radius: 3px; background: var(--color-border); flex-shrink: 0; }
.pd-heat-cell.is-level-1 { background: color-mix(in srgb, var(--color-accent) 35%, var(--color-bg)); }
.pd-heat-cell.is-level-2 { background: color-mix(in srgb, var(--color-accent) 68%, var(--color-bg)); }
.pd-heat-cell.is-level-3 { background: var(--color-accent); }
.pd-dropzone {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: var(--space-4) var(--space-3);
margin-bottom: var(--space-3);
border: 1.5px dashed var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-bg-alt);
color: var(--color-text-faint);
font-size: 12.5px;
text-align: center;
cursor: pointer;
}
.pd-dropzone svg { width: 14px; height: 14px; }
.pd-dropzone.is-dragover { color: var(--color-accent); border-color: var(--color-accent); }
.pd-upload-progress { display: flex; flex-direction: column; gap: 6px; }
.pd-upload-progress:not(:empty) { margin-bottom: var(--space-3); }
.pd-upload-progress-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 7px 9px;
background: var(--color-accent-soft);
border: 1px solid var(--color-accent);
border-radius: var(--radius-sm);
font-size: 12.5px;
}
.pd-upload-progress-pct { color: var(--color-accent); font-weight: 600; flex-shrink: 0; }
.pd-billing-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.pd-kind-toggle { display: flex; gap: 6px; margin-bottom: var(--space-2); }
.pd-kind-toggle .btn.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.main {
padding: var(--space-6) var(--space-8);
width: 100%;
}
@keyframes page-in {
from { opacity: 0; transform: translateY(20px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.main.page-enter { animation: page-in 0.5s var(--ease); }
svg.line-chart { width: 100%; height: auto; display: block; }
svg.line-chart:last-child { flex: 1 1 auto; min-height: 0; height: 100%; }
@keyframes line-chart-draw {
from { stroke-dashoffset: 1000; }
to { stroke-dashoffset: 0; }
}
@keyframes line-chart-fade {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes line-chart-pop {
from { opacity: 0; transform: scale(0.4); }
to { opacity: 1; transform: scale(1); }
}
.line-chart-path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: line-chart-draw 900ms var(--ease) forwards;
}
.line-chart-area {
opacity: 0;
animation: line-chart-fade 700ms ease 400ms forwards;
}
.line-chart-dot {
opacity: 0;
transform-box: fill-box;
transform-origin: center;
animation: line-chart-pop 380ms ease forwards;
stroke: var(--color-surface);
}
.line-chart-grid { stroke: var(--chart-grid); }
.line-chart-axis { fill: var(--color-text-faint); }
.donut-chart-track { stroke: var(--chart-grid); }
.balken-liste { display: flex; flex-direction: column; }
.balken-zeile {
display: grid;
grid-template-columns: minmax(96px, 150px) 1fr minmax(62px, auto);
align-items: center;
gap: 12px;
padding: 5px 0;
}
.balken-zeile + .balken-zeile { border-top: 1px solid var(--chart-grid); }
.balken-name {
display: flex;
align-items: center;
gap: 7px;
min-width: 0;
font-size: 11.5px;
font-weight: 500;
}
.balken-punkt { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.balken-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balken-bahn {
height: 2px;
background: var(--chart-grid);
overflow: hidden;
}
.balken-fuell {
height: 100%;
transition: width 700ms var(--ease);
}
.balken-wert {
font-size: 11.5px;
color: var(--color-text-muted);
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.balken-wert b { color: var(--color-text); font-weight: 600; }
.phasen-gesamt { font-size: 12px; color: var(--color-text-muted); }
.phasen-gesamt b { color: var(--color-text); font-size: 12px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
.balken-fuell { transition: none; }
}
.donut-chart-segment {
transition: stroke-dasharray 700ms var(--ease);
}
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
}
.page-header p { color: var(--color-text-muted); margin-top: 4px; }
#outlet > .page-header { margin-bottom: 14px; }
.page-header-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.dashboard-welcome-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
margin-bottom: var(--space-6);
}
.dashboard-welcome-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dashboard-welcome-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.dashboard-welcome-status {
font-size: var(--text-body);
color: var(--color-text-muted);
}
.dashboard-welcome-title {
font-size: 21px;
font-weight: var(--weight-medium);
letter-spacing: -0.022em;
color: var(--color-text);
}
.tl-card { padding: var(--space-4) 0 var(--space-4) 0; overflow: hidden; }
.tl-legend {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
padding: 0 var(--space-5) var(--space-4);
font-size: var(--text-meta);
color: var(--color-text-muted);
}
.tl-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.tl-legend-bar { width: 22px; height: 8px; border-radius: 3px; background: var(--color-accent); opacity: 0.85; }
.tl-scroll { overflow-x: auto; overflow-y: hidden; }
.tl-card { --tl-label-breite: clamp(230px, 21vw, 340px); }
.tl-grid { min-width: 720px; }
.tl-grid.hat-heute-linie { position: relative; }
.tl-grid.hat-heute-linie::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: calc(
var(--tl-label-breite)
+ (100% - var(--tl-label-breite)) * var(--tl-heute-spalte, 0) / var(--tl-spalten, 28)
);
width: 2px;
background: var(--color-accent);
opacity: 0.55;
pointer-events: none;
}
.tl-kw-zeile .tl-track { min-height: 0; }
.tl-kw {
font-size: 12px;
font-weight: var(--weight-semibold);
color: var(--color-text-muted);
padding: 5px 8px;
border-left: 1px solid var(--color-border);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tl-kopf-titel {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-faint);
}
.tl-track { min-height: 32px; }
.tl-row { display: flex; align-items: stretch; }
.tl-row-label {
flex: none;
width: var(--tl-label-breite);
padding: 0 var(--space-3) 0 var(--space-4);
display: flex;
align-items: center;
gap: 7px;
min-width: 0;
font-size: var(--text-body);
color: inherit;
text-decoration: none;
position: sticky;
left: 0;
z-index: 2;
background: var(--color-surface);
}
a.tl-row-label:hover .tl-row-title { color: var(--color-accent); }
.tl-row-dot { width: 7px; height: 7px; border-radius: var(--radius-full); flex: none; }
.tl-row-text { min-width: 0; display: flex; flex-direction: column; justify-content: center; line-height: 1.25; }
.tl-row-code {
font-size: var(--text-small);
color: var(--color-text-faint);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tl-row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-row-kopf { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tl-row-kopf .tl-row-code { min-width: 0; }
.tl-rental-marke {
flex: none;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 1px 7px 1px 6px;
border-radius: var(--radius-full);
border: 1px solid var(--color-warning);
background: var(--color-warning-soft);
color: var(--color-warning);
font-size: 9.5px;
font-weight: var(--weight-semibold);
letter-spacing: 0.05em;
text-transform: uppercase;
line-height: 1.6;
}
.tl-rental-marke::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
flex: none;
}
.tl-track { flex: 1; display: grid; position: relative; min-height: 38px; }
.tl-head .tl-track { min-height: 34px; }
.tl-head .tl-row-label { background: var(--color-surface); }
.tl-day, .tl-cell { grid-row: 1; border-left: 1px solid transparent; }
.tl-day.is-weekend, .tl-cell.is-weekend { background: var(--color-bg-alt); }
.tl-day.is-weekstart, .tl-cell.is-weekstart { border-left-color: var(--color-border); }
.tl-day {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
padding: 4px 0;
font-size: var(--text-small);
color: var(--color-text-faint);
}
.tl-day-weekday { font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; }
.tl-day-num { font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.tl-day.is-today { color: var(--color-accent); }
.tl-day.is-today .tl-day-num { font-weight: var(--weight-semibold); }
.tl-cell.is-today, .tl-day.is-today {
box-shadow: inset 1px 0 0 var(--color-accent);
background: color-mix(in srgb, var(--color-accent) 6%, transparent);
}
.tl-bar {
grid-row: 1;
align-self: center;
height: 20px;
border-radius: var(--radius-sm);
background: var(--tl-bar, var(--color-accent));
opacity: 0.9;
display: flex;
align-items: center;
padding: 0 7px;
z-index: 1;
min-width: 0;
}
.tl-bar-label {
font-size: 10px;
font-weight: var(--weight-semibold);
letter-spacing: 0.05em;
text-transform: uppercase;
color: #fff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tl-bar.is-clipped-left { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.tl-bar.is-clipped-right { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tl-marker {
grid-row: 1;
align-self: center;
display: flex;
align-items: center;
z-index: 3;
pointer-events: none;
white-space: nowrap;
justify-self: stretch;
position: relative;
}
.tl-marker-dot {
flex: 1;
min-width: 6px;
height: 20px;
border-radius: var(--radius-sm);
opacity: 0.9;
}
.ist-art-shoot    { --tl-art: var(--color-accent); }
.ist-art-delivery { --tl-art: var(--color-tone-blue); }
.ist-art-internal { --tl-art: var(--color-tone-amber); }
.ist-art-review   { --tl-art: var(--color-tone-purple); }
.ist-art-client   { --tl-art: var(--color-tone-teal); }
.ist-art-travel   { --tl-art: var(--color-tone-slate); }
.ist-art-permit   { --tl-art: var(--color-tone-rose); }
.ist-art-other    { --tl-art: var(--color-text-faint); }
.tl-bar.ist-art-shoot, .tl-bar.ist-art-delivery, .tl-bar.ist-art-internal,
.tl-bar.ist-art-review, .tl-bar.ist-art-client, .tl-bar.ist-art-travel,
.tl-bar.ist-art-permit, .tl-bar.ist-art-other { --tl-bar: var(--tl-art); }
.tl-marker[class*='ist-art-'] .tl-marker-dot { background: var(--tl-art); }
.tl-legend-bar[class*='ist-art-'] { background: var(--tl-art); }
.tl-marker-dot.is-delivery { background: var(--color-tone-blue); }
.tl-marker-dot.is-deadline { background: var(--color-tone-amber); }
.tl-marker.is-overdue .tl-marker-dot { background: var(--color-danger); }
.tl-marker-label {
font-size: 10px;
color: var(--color-text-muted);
position: absolute;
left: 100%;
margin-left: 5px;
overflow: visible;
}
.tl-marker.is-overdue .tl-marker-label { color: var(--color-danger); font-weight: var(--weight-medium); }
.tl-bar.ist-rental { --tl-bar: var(--color-warning); }
.tl-legend-bar.ist-rental { background: var(--color-warning); }
.tl-row-trenner { border-top: 1px solid var(--color-border); margin-top: 6px; }
.tl-row-trenner .tl-row-label { padding-top: 9px; padding-bottom: 3px; align-items: flex-end; }
.tl-row-trenner .tl-track { min-height: 0; }
.tl-blocktitel {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-faint);
display: inline-flex;
align-items: center;
gap: 6px;
}
.tl-blocktitel::before {
content: '';
width: 7px;
height: 7px;
border-radius: var(--radius-full);
background: var(--color-warning);
flex: none;
}
.tl-blockzahl { font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.tl-steuerung {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
padding: 0 var(--space-5) var(--space-3);
}
.tl-nav {
display: inline-flex;
align-items: stretch;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
overflow: hidden;
}
.tl-nav-knopf {
font: inherit;
font-size: var(--text-meta);
font-weight: var(--weight-semibold);
border: 0;
background: none;
color: var(--color-text-muted);
padding: 5px 9px;
display: inline-flex;
align-items: center;
cursor: pointer;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tl-nav-knopf svg { width: 15px; height: 15px; }
.tl-nav-knopf:hover:not(:disabled) { background: var(--color-bg-alt); color: var(--color-text); }
.tl-nav-heute {
border-left: 1px solid var(--color-border);
border-right: 1px solid var(--color-border);
padding: 5px 12px;
color: var(--color-text);
}
.tl-nav-heute:disabled { color: var(--color-text-faint); cursor: default; }
.tl-spanne { font-size: var(--text-meta); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.tl-umschalter { margin-left: auto; }
.zs-seite { --zs-links: 270px; --zs-rechts: 250px; --zs-rot: var(--color-danger); --zs-miete: color-mix(in srgb, var(--color-warning) 70%, var(--color-text)); }
.ist-art-rental { --tl-art: var(--zs-miete, var(--color-warning)); }
.zs-schalter .sa-schalter-knopf { height: 30px; }
.zs-steuerung { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.zs-steuerung .tl-nav { height: 32px; }
.zs-luft { flex: 1; }
.zs-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.zs-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); font: inherit; font-size: 12.5px; color: var(--color-text); cursor: pointer; }
.zs-chip-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--tl-art); flex: none; }
.zs-chip.ist-aus { color: var(--color-text-faint); background: none; }
.zs-chip.ist-aus .zs-chip-punkt { background: none; box-shadow: inset 0 0 0 1.5px var(--color-text-faint); }
.zs-trenner { width: 1px; height: 22px; background: var(--color-border); }
.zs-leads { display: flex; gap: 4px; }
.zs-lead { border: 0; padding: 0; background: none; border-radius: 50%; cursor: pointer; }
.zs-lead .lead-avatar { width: 26px; height: 26px; font-size: 10.5px; }
.zs-lead.ist-aktiv .lead-avatar { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3.5px currentColor; }
.zs-lead.ist-blass { opacity: .4; }
.zs-scroll { overflow-x: auto; }
.zs-karte { padding: 14px 16px 10px; overflow: visible; border-radius: 14px; }
.zs-innen { position: relative; min-width: 980px; }
.zs-gruppe { display: flex; align-items: center; gap: 8px; padding: 14px 0 8px; font-size: 12px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.zs-gruppe span { font-weight: 400; }
.zs-leer { padding: 14px 0; color: var(--color-text-muted); font-size: 13px; margin: 0; border-top: 1px solid var(--color-border); }
.zs-name { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--color-text); text-decoration: none; }
.zs-name .lead-avatar { width: 26px; height: 26px; font-size: 10.5px; }
.zs-name .lead-avatar.is-empty svg { width: 13px; height: 13px; }
.zs-name-text { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.zs-name-text small { font-size: 11.5px; color: var(--color-text-muted); flex: none; }
.zs-name-text b { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zs-name-text.ist-zwei { flex-direction: column; align-items: flex-start; gap: 0; }
.zs-name-text.ist-zwei b { font-size: 13.5px; max-width: 100%; }
a.zs-name:hover b { text-decoration: underline; }
.zs-zeile { display: grid; grid-template-columns: var(--zs-links) minmax(0, 1fr) var(--zs-rechts); border-top: 1px solid var(--color-border); min-height: 40px; }
.zs-zeile.ist-alt { background: color-mix(in srgb, var(--color-bg-alt) 40%, var(--color-surface)); }
.zs-zeile.zs-kopf { border-top: 0; min-height: 40px; }
.zs-zeile > .zs-name { padding-right: 10px; }
.zs-spur { position: relative; border-left: 1px solid var(--color-border); }
.zs-kopf .zs-spur { border-left: 0; }
.zs-rechts { display: flex; align-items: center; gap: 8px; padding-left: 16px; border-left: 1px solid var(--color-border); min-width: 0; font-size: 12.5px; }
.zs-rechts-kopf { border-left: 0; font-size: 12px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; align-items: flex-start; padding-top: 2px; }
.zs-kw { position: absolute; top: 0; font-size: 12px; font-weight: 600; padding-left: 6px; border-left: 1px solid var(--color-border); line-height: 16px; }
.zs-tag { position: absolute; top: 20px; text-align: center; font-size: 11px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.zs-tag span { display: inline-block; padding: 1px 4px; border-radius: 6px; }
.zs-tag.ist-we { color: var(--color-text-faint); }
.zs-tag.ist-heute span { background: var(--color-accent); color: #fff; font-weight: 600; }
.zs-we { position: absolute; top: 0; bottom: 0; background: var(--color-bg-alt); opacity: .7; }
.zs-wl { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--color-border); }
.zs-heute { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--color-accent); opacity: .55; z-index: 1; }
.zs-band { position: absolute; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: color-mix(in srgb, var(--color-text) 12%, var(--color-surface)); z-index: 1; }
.zs-dreh, .zs-miete { position: absolute; top: 50%; height: 12px; margin-top: -6px; border-radius: 4px; background: var(--color-accent); z-index: 2; box-sizing: border-box; border: 1px solid var(--color-surface); cursor: default; }
.zs-miete { height: 14px; margin-top: -7px; background: var(--zs-miete); }
.zs-miete.ist-option { background: none; border: 1.5px dashed var(--zs-miete); }
.zs-dreh.ist-links, .zs-miete.ist-links { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.zs-dreh.ist-rechts, .zs-miete.ist-rechts { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.zs-marke { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--tl-art); box-shadow: 0 0 0 2px var(--color-surface); z-index: 3; cursor: default; }
.zs-marke.ist-raute { border-radius: 2px; transform: rotate(45deg); width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; }
.zs-marke.ist-ueber { background: var(--zs-rot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--zs-rot) 18%, var(--color-surface)); }
.zs-marke.ist-mehr::after { content: ''; position: absolute; right: -5px; top: -5px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-text-muted); }
.zs-marke.ist-raute.ist-mehr::after { transform: rotate(-45deg); }
.zs-naechstes { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.zs-naechstes small { font-size: 11.5px; font-weight: 500; color: var(--tl-art); }
.zs-naechstes.ist-ueber small { color: var(--zs-rot); }
.zs-naechstes span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zs-zustand { font-size: 11px; color: var(--zs-miete); background: color-mix(in srgb, var(--color-warning) 16%, var(--color-surface)); padding: 1px 7px; border-radius: 999px; }
.zs-legende { display: flex; flex-wrap: wrap; gap: 16px; padding: 14px 0 4px; font-size: 12px; color: var(--color-text-muted); border-top: 1px solid var(--color-border); }
.zs-legende > span { display: inline-flex; align-items: center; gap: 6px; }
.zs-leg { width: 10px; height: 10px; border-radius: 50%; background: var(--tl-art); }
.zs-leg.ist-raute { border-radius: 2px; transform: rotate(45deg); width: 9px; height: 9px; }
.zs-leg.ist-balken { width: 16px; border-radius: 3px; }
.zs-leg-rot { color: var(--zs-rot); }
.zs-tip { position: absolute; z-index: 20; width: 240px; background: #1d1b18; color: #fff; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; box-shadow: 0 8px 24px rgba(0,0,0,.2); display: flex; flex-direction: column; pointer-events: none; }
.zs-tip[hidden] { display: none; }
.zs-tip b { font-weight: 600; }
.zs-tip-eintrag { display: flex; flex-direction: column; }
.zs-tip-eintrag + .zs-tip-eintrag { margin-top: 6px; }
.zs-tip-fuss { color: #bdb8ae; margin-top: 2px; }
.zs-wzeile { display: grid; grid-template-columns: var(--zs-links) repeat(var(--zs-wochen, 4), minmax(0, 1fr)); border-top: 1px solid var(--color-border); }
.zs-wzeile.zs-wkopf { border-top: 0; }
.zs-wzeile > .zs-name { padding: 8px 12px 8px 0; }
.zs-woche { padding: 0 10px 8px; border-left: 1px solid var(--color-border); font-size: 12px; color: var(--color-text-muted); }
.zs-woche b { font-size: 12.5px; color: var(--color-text); }
.zs-woche.ist-jetzt, .zs-wzelle.ist-jetzt { background: color-mix(in srgb, var(--color-accent) 5%, var(--color-surface)); }
.zs-woche.ist-jetzt { background: color-mix(in srgb, var(--color-accent) 9%, var(--color-surface)); padding-top: 4px; }
.zs-jetzt { font-size: 11px; color: #fff; background: var(--color-accent); padding: 1px 6px; border-radius: 999px; margin-left: 6px; }
.zs-wzelle { padding: 8px 10px; border-left: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.zs-eintrag { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; line-height: 1.35; }
.zs-eintrag i { width: 7px; height: 7px; border-radius: 50%; background: var(--tl-art); flex: none; transform: translateY(-1px); }
.zs-wann { color: var(--tl-art); font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.zs-was { min-width: 0; }
.zs-eintrag.ist-ueber i { background: var(--zs-rot); }
.zs-eintrag.ist-ueber .zs-wann { color: var(--zs-rot); }
.zs-eintrag.ist-vorbei { opacity: .45; }
.zs-wzeile.ist-buchung .zs-wzelle { padding-top: 8px; padding-bottom: 8px; }
.zs-zeile.ist-teil, .zs-wzeile.ist-teil { border-top-color: color-mix(in srgb, var(--color-border) 55%, transparent); }
.zs-zeile.ist-teil { min-height: 34px; }
.zs-name.ist-teil { padding-left: 13px; gap: 8px; }
.zs-teil-ecke { width: 9px; height: 10px; margin-top: -8px; border-left: 1.5px solid var(--color-border); border-bottom: 1.5px solid var(--color-border); border-bottom-left-radius: 3px; flex: none; }
.zs-name.ist-teil .zs-name-text b { font-size: 12.5px; font-weight: 400; }
.zs-wzeile.ist-teil > .zs-name { padding-top: 6px; padding-bottom: 6px; }
@media (max-width: 640px) {
.tl-steuerung { padding-left: var(--space-4); padding-right: var(--space-4); }
.tl-umschalter { margin-left: 0; width: 100%; }
}
.spotify-popover {
position: absolute;
bottom: calc(100% + 8px);
left: 0;
right: 0;
display: none;
flex-direction: column;
gap: 10px;
padding: 12px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
z-index: 60;
transform-origin: bottom left;
}
.spotify-popover.is-open { display: flex; animation: panel-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.spotify-popover-body { display: flex; flex-direction: column; gap: 10px; }
.spotify-hint { font-size: var(--text-meta); color: var(--color-text-muted); }
.spotify-now { display: flex; align-items: center; gap: 9px; min-width: 0; }
.spotify-now.is-idle { font-size: var(--text-meta); color: var(--color-text-muted); }
.spotify-cover { width: 38px; height: 38px; border-radius: var(--radius-sm); flex: none; object-fit: cover; }
.spotify-meta { min-width: 0; line-height: 1.3; }
.spotify-title,
.spotify-artist { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spotify-title { font-size: var(--text-body); font-weight: var(--weight-medium); }
.spotify-artist { font-size: var(--text-meta); color: var(--color-text-muted); }
.spotify-controls { display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.spotify-btn {
background: none;
border: 0;
padding: 7px;
border-radius: var(--radius-full);
color: var(--color-text-muted);
cursor: pointer;
display: flex;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.spotify-btn:hover { background: var(--color-bg-alt); color: var(--color-text); }
.spotify-btn svg { width: 16px; height: 16px; }
.spotify-connect {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
background: none;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
padding: 7px 11px;
font: inherit;
font-size: var(--text-meta);
color: var(--color-text-muted);
cursor: pointer;
}
.spotify-connect:hover { border-color: var(--color-text-muted); color: var(--color-text); }
.spotify-connect svg { width: 13px; height: 13px; }
.spotify-account {
font-size: var(--text-small);
color: var(--color-text-faint);
text-align: center;
}
.sysstat-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-5) var(--space-4);
}
@media (max-width: 700px) {
.sysstat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sysstat-module {
min-width: 0;
color: inherit;
text-decoration: none;
border-radius: var(--radius-md);
padding: 4px 6px;
margin: -4px -6px;
transition: background var(--dur-fast) var(--ease);
}
a.sysstat-module:hover { background: var(--color-bg-alt); }
.sysstat-head { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.sysstat-dot { width: 7px; height: 7px; border-radius: var(--radius-full); flex: none; }
.sysstat-dot.is-ok { background: var(--color-success); }
.sysstat-dot.is-warn { background: var(--color-warning); }
.sysstat-dot.is-danger { background: var(--color-danger); }
.sysstat-dot.is-neutral { background: var(--color-border-strong); }
.sysstat-label {
font-size: var(--text-small);
font-weight: var(--weight-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.sysstat-value {
font-size: 17px;
font-weight: var(--weight-medium);
letter-spacing: -0.015em;
line-height: 1.2;
}
.sysstat-detail {
font-size: var(--text-meta);
color: var(--color-text-faint);
margin-top: 2px;
}
.production-header-actions { display: flex; align-items: center; gap: var(--space-3); }
.main > * + * { margin-top: var(--space-5); }
@media (max-width: 900px) {
input, select, textarea { font-size: 16px !important; }
.main .grid-3, .main .grid-4 { grid-template-columns: repeat(2, 1fr); }
.app-shell { grid-template-columns: 1fr; }
.right-rail { display: none; }
.sidebar {
position: fixed;
inset: 0 auto 0 0;
width: min(var(--sidebar-width), 84vw);
transform: translateX(-100%);
transition: transform var(--dur-base) var(--ease);
}
body.sidebar-open { overflow: hidden; }
body.sidebar-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-lg); }
body.sidebar-open .sidebar-backdrop {
display: block;
position: fixed;
inset: 0;
background: rgba(15, 15, 35, 0.45);
z-index: 45;
}
.topbar { display: flex; }
.sidebar-collapse-toggle { display: none; }
.main { padding: var(--space-4) var(--space-4) var(--space-8); }
}
.card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 18px;
box-shadow: var(--shadow-sm);
min-width: 0;
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-4);
gap: var(--space-3);
flex-wrap: wrap;
}
.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.entity-card-grid > * { min-width: 0; }
.stat-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-4) var(--space-4) var(--space-4) var(--space-4);
box-shadow: var(--shadow-sm);
transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
display: flex;
align-items: center;
gap: var(--space-3);
min-width: 0;
}
.stat-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: var(--shadow-lg); border-color: var(--color-accent); }
.stat-icon {
width: 34px;
height: 34px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: linear-gradient(150deg, var(--color-accent-soft) 0%, transparent 100%);
color: var(--color-accent);
border: 1.5px solid var(--color-accent-soft);
}
.stat-icon svg { width: 16px; height: 16px; }
.stat-icon.tone-success { color: var(--color-success); border-color: var(--color-success-soft); background: linear-gradient(150deg, var(--color-success-soft) 0%, transparent 100%); }
.stat-icon.tone-warning { color: var(--color-warning); border-color: var(--color-warning-soft); background: linear-gradient(150deg, var(--color-warning-soft) 0%, transparent 100%); }
.stat-icon.tone-danger { color: var(--color-danger); border-color: var(--color-danger-soft); background: linear-gradient(150deg, var(--color-danger-soft) 0%, transparent 100%); }
.stat-icon.tone-violet { color: var(--color-accent-2); border-color: var(--color-violet-soft); background: linear-gradient(150deg, var(--color-violet-soft) 0%, transparent 100%); }
.stat-body { min-width: 0; }
.stat-card .stat-value { font-size: 24px; font-weight: var(--weight-medium); letter-spacing: -0.02em; line-height: 1.15; }
.stat-card .stat-label { color: var(--color-text-muted); font-size: var(--text-meta); margin-top: 3px; font-weight: 500; }
.dashboard-tile .stat-card .stat-value { font-size: var(--text-section-title); font-weight: var(--weight-medium); }
.dashboard-tile .stat-card .stat-label { font-size: var(--text-meta); }
.dashboard-tile .stat-icon { width: 28px; height: 28px; }
.dashboard-tile .stat-icon svg { width: 13px; height: 13px; }
.dashboard-tile .stat-card {
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 8px;
}
.dashboard-tile .stat-body { text-align: center; }
.dashboard-tile .stat-card .stat-label { margin-top: 1px; }
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 15px;
border-radius: var(--radius-sm);
border: 1px solid transparent;
font-weight: 600;
font-size: var(--text-body);
transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.btn svg { width: 15px; height: 15px; }
.btn:hover:not(:disabled) { transform: translateY(-3px) scale(1.03); box-shadow: var(--shadow-md); }
.btn:active:not(:disabled) { transform: translateY(0) scale(0.97); box-shadow: none; }
.btn-primary {
background: var(--color-accent);
color: #fff;
box-shadow: none;
}
.btn-primary:hover { background: var(--color-accent-hover); box-shadow: none; }
.btn-secondary { background: var(--color-surface); border-color: var(--color-border-strong); color: var(--color-text); }
.btn-secondary:hover { background: var(--color-bg); border-color: var(--color-text-faint); }
.btn-danger { background: var(--color-danger-soft); color: var(--color-danger); }
.btn-danger:hover { background: var(--color-danger-soft-strong); }
.btn-success-soft { background: var(--color-success-soft); color: var(--color-success); }
.btn-success-soft:hover { background: var(--color-success-soft); filter: brightness(0.94); }
.btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: var(--color-text-muted);
padding: 7px;
border-radius: var(--radius-sm);
}
.btn-ghost:hover:not(:disabled) { background: var(--color-bg-alt); color: var(--color-text); }
.btn-ghost:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-ghost svg { width: 15px; height: 15px; }
.btn-sm { padding: 6px 11px; font-size: 12px; }
.page-header-actions,
.production-header-actions { align-items: stretch; }
.page-header-actions > .btn,
.production-header-actions > .btn { align-items: center; }
.btn-compact-label { font-size: 11px; padding: 6px 10px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.field { margin-bottom: var(--space-3); }
.field label {
display: block;
font-size: 12.5px;
font-weight: 600;
color: var(--color-text-muted);
margin-bottom: 6px;
}
.field small {
display: block;
margin: 6px 0 0;
font-size: 12px;
line-height: 1.4;
color: var(--color-text-faint);
}
.field input, .field select, .field textarea,
.pd-timer-inline-input,
.mki-thema input, .mki-thema textarea,
.cs-neu input, .cs-neu select,
.ra-pos input,
.pl-form input, .pl-form select, .pl-form textarea {
width: 100%;
padding: 9px 11px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
font-size: 13.5px;
font-family: inherit;
background: var(--color-surface-2);
color: var(--color-text);
transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.field select, .cs-neu select, .pl-form select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 34px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239598ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 15px 15px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="search"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="number"],
.field input[type="date"],
.field input[type="time"],
.field input[type="datetime-local"],
.field select,
.pl-form input, .pl-form select {
height: 38px;
}
.field input[type="date"],
.field input[type="time"],
.field input[type="datetime-local"] {
-webkit-appearance: none;
appearance: none;
text-align: left;
min-width: 0;
max-width: 100%;
}
.field-row > .field { min-width: 0; }
.field input::placeholder, .field textarea::placeholder,
.pd-timer-inline-input::placeholder,
.pl-form input::placeholder, .pl-form textarea::placeholder { color: var(--color-text-faint); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus,
.pd-timer-inline-input:focus, .ra-pos input:focus,
.pl-form input:focus, .pl-form select:focus, .pl-form textarea:focus {
outline: none;
border-color: var(--color-accent);
background-color: var(--color-surface);
box-shadow: var(--shadow-glow);
}
:where(
input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="image"]),
select,
textarea
) {
background: var(--color-surface);
color: var(--color-text);
border: 1px solid var(--color-border);
}
:where(input, textarea)::placeholder { color: var(--color-text-faint); opacity: 1; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
input.is-invalid {
border-color: var(--color-danger) !important;
background: var(--color-danger-soft) !important;
}
.field-warning {
display: block;
margin-top: 5px;
font-size: var(--text-meta);
line-height: 1.3;
color: var(--color-danger);
font-weight: 500;
}
.booking-item-days-warning {
font-size: var(--text-small);
line-height: 1.25;
color: var(--color-danger);
font-weight: 500;
margin-top: 3px;
}
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--color-text);
-webkit-box-shadow: 0 0 0px 1000px var(--color-surface-2) inset;
box-shadow: 0 0 0px 1000px var(--color-surface-2) inset;
transition: background-color 9999s ease-in-out 0s;
}
.field input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0px 1000px var(--color-surface) inset;
box-shadow: 0 0 0px 1000px var(--color-surface) inset;
}
.share-modal { display: flex; flex-direction: column; gap: var(--space-3); }
.share-modal-lead { margin: 0; font-size: 13.5px; }
.share-modal-facts {
margin: 0;
padding-left: 17px;
display: flex;
flex-direction: column;
gap: 5px;
font-size: 12.5px;
color: var(--color-text-muted);
line-height: 1.5;
}
.share-modal-linkrow { display: flex; align-items: center; gap: 8px; }
.share-modal-linkrow .btn { flex-shrink: 0; }
.share-modal-link {
flex: 1;
min-width: 0;
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
font-size: 12px;
}
.share-modal-notice {
margin: 0;
display: flex; align-items: center; gap: 6px;
font-size: 12px; color: #854F0B; background: #FAEEDA;
border-radius: var(--radius-sm); padding: 8px 12px;
}
.share-modal-notice svg { width: 13px; height: 13px; flex-shrink: 0; }
.share-modal-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 16px;
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
}
.share-modal-meta .portfolio-password-row { margin: 0; }
.share-invite {
display: flex;
flex-direction: column;
gap: 10px;
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
}
.share-invite-head { font-size: 13px; font-weight: 600; }
.share-invite-lead { margin: 0; font-size: 12.5px; color: var(--color-text-muted); line-height: 1.5; }
.share-invite-row { display: flex; align-items: center; gap: 8px; }
.share-invite-row .btn { flex-shrink: 0; }
.share-invite-input {
flex: 1;
min-width: 0;
padding: 8px 11px;
font-size: 13px;
font-family: inherit;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
}
.share-invite-note {
width: 100%;
padding: 8px 11px;
font-size: 13px;
font-family: inherit;
line-height: 1.5;
resize: vertical;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
}
.share-invite-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.share-invite-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 6px 4px 10px;
border-radius: var(--radius-full);
background: var(--color-accent-soft);
color: var(--color-accent-strong);
font-size: 12px;
font-weight: 500;
}
.share-lang {
display: inline-flex;
flex-shrink: 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
overflow: hidden;
background: var(--color-bg);
}
.share-lang-btn {
border: 0;
background: transparent;
color: var(--color-text-muted);
font: inherit;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.03em;
padding: 2px 8px;
cursor: pointer;
line-height: 1.6;
}
.share-lang-btn + .share-lang-btn { border-left: 1px solid var(--color-border); }
.share-lang-btn:hover:not(:disabled):not(.is-an) { background: var(--color-bg-subtle); color: var(--color-text); }
.share-lang-btn.is-an {
background: var(--color-accent);
color: #fff;
}
.share-lang-btn:disabled { cursor: default; }
.share-lang.is-gesperrt { opacity: 0.65; }
.share-invite-item .share-lang { align-self: center; }
.share-invite-chip button {
border: 0;
background: none;
cursor: pointer;
font-family: inherit;
font-size: 14px;
line-height: 1;
padding: 0 3px;
color: inherit;
opacity: 0.65;
}
.share-invite-chip button:hover { opacity: 1; }
.share-invite-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.share-invite-suggest-label { font-size: 12px; color: var(--color-text-faint); }
.share-invite-suggest-btn {
padding: 4px 10px;
border-radius: var(--radius-full);
border: 1px dashed var(--color-border);
background: none;
color: var(--color-text-muted);
font-family: inherit;
font-size: 12px;
cursor: pointer;
}
.share-invite-suggest-btn:hover { border-style: solid; color: var(--color-text); }
.share-invite-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.share-invite-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 0;
border-top: 1px solid var(--color-border-soft, var(--color-border));
}
.share-invite-item.is-off { opacity: 0.55; }
.share-invite-item-main { flex: 1; min-width: 0; }
.share-invite-item-name { font-size: 13px; font-weight: 500; }
.share-invite-item-sub {
display: flex;
flex-wrap: wrap;
gap: 4px 10px;
font-size: 11.5px;
color: var(--color-text-faint);
margin-top: 2px;
}
.share-invite-item-actions { display: flex; gap: 2px; flex-shrink: 0; }
.share-invite-state.is-good { color: var(--color-success, #1f8a52); }
.share-invite-state.is-wait { color: var(--color-text-faint); }
.share-invite-state.is-bad { color: var(--color-danger, #a33a3a); }
.share-invite-state.is-off { color: var(--color-text-faint); }
.share-invite-suggest-btn.is-nomail {
border-style: dashed;
color: var(--color-text-faint);
}
.share-invite-suggest-btn.is-nomail:hover { border-style: dashed; color: var(--color-text-muted); }
.share-invite-waiting {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
font-size: 12.5px;
color: var(--color-accent-strong);
background: var(--color-accent-soft);
border-radius: var(--radius-sm);
padding: 7px 11px;
}
.share-invite-chip.is-known { box-shadow: inset 0 0 0 1px var(--color-accent); }
.share-updates {
display: flex;
align-items: flex-start;
gap: 14px;
flex-wrap: wrap;
margin-top: 4px;
padding: 12px 14px;
border-radius: var(--radius-md);
border: 1px solid var(--color-accent);
background: var(--color-accent-soft);
}
.share-updates-main { flex: 1 1 260px; min-width: 0; }
.share-updates-head { font-size: 13px; font-weight: 600; color: var(--color-accent-strong); }
.share-updates-sub { margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--color-text-muted); }
.share-updates-list {
list-style: none;
margin: 8px 0 0;
padding: 0;
font-size: 12.5px;
color: var(--color-text);
}
.share-updates-list li { padding: 2px 0; }
.share-updates-list li::before { content: '· '; color: var(--color-text-muted); }
.share-updates-aktionen {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
flex: 0 0 auto;
}
.share-updates-anders { white-space: nowrap; }
.modal.is-teilen { max-width: 940px; }
.share-modal-info {
flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
border: 1px solid var(--color-border); background: var(--color-surface);
color: var(--color-text-muted); font-size: 12px; font-weight: 600;
font-style: italic; cursor: pointer; line-height: 1;
}
.share-modal-info:hover { color: var(--color-text); border-color: var(--color-text-faint); }
.share-modal-info[aria-expanded="true"] {
background: var(--color-accent-soft); border-color: var(--color-accent);
color: var(--color-accent-strong);
}
.share-falten { display: flex; flex-direction: column; gap: 8px; margin-top: var(--space-4); }
.share-falte { border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.share-falte-kopf {
display: flex; align-items: center; gap: 8px; width: 100%;
padding: 10px 12px; border: 0; background: none; cursor: pointer;
font-size: 13px; color: var(--color-text); text-align: left;
}
.share-falte-kopf:hover { background: var(--color-surface-hover, rgba(0,0,0,.03)); }
.share-falte-titel { font-weight: 600; }
.share-falte-wert {
flex: 1 1 auto; min-width: 0; color: var(--color-text-muted); font-size: 12.5px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.share-falte-pfeil { flex: 0 0 auto; display: inline-flex; color: var(--color-text-faint); transition: transform .15s ease; }
.share-falte-pfeil svg { width: 16px; height: 16px; }
.share-falte.ist-offen .share-falte-pfeil { transform: rotate(180deg); }
.share-falte-koerper { display: grid; max-height: 0; overflow: hidden; transition: max-height .2s ease; }
.share-falte.ist-offen .share-falte-koerper { max-height: 600px; }
.share-falte-koerper > * { padding: 0 12px 12px; }
.share-invite-head.ist-zweit { margin-top: var(--space-4); }
.share-invite-promote {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 10px;
width: 100%;
order: 3;
margin-top: 6px;
padding: 7px 10px;
border-radius: var(--radius-sm);
background: var(--color-bg-alt);
font-size: 12px;
color: var(--color-text-muted);
}
.share-invite-sprachnotiz {
width: 100%;
order: 4;
margin-top: 4px;
padding: 5px 10px;
border-radius: var(--radius-sm);
background: var(--color-bg-alt);
font-size: 11.5px;
color: var(--color-text-faint);
cursor: help;
}
.share-invite-link {
border: 0;
background: none;
padding: 0;
cursor: pointer;
font-family: inherit;
font-size: 12px;
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 2px;
}
.share-invite-link:hover { color: var(--color-accent-hover); }
.share-invite-select {
font-family: inherit;
font-size: 12px;
padding: 3px 6px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text);
}
.share-invite-item { flex-wrap: wrap; }
.share-invite-item-actions .btn-ghost.is-danger { color: var(--color-danger); }
.share-invite-item-actions .btn-ghost.is-danger:hover { color: var(--color-danger); opacity: 0.75; }
.field-row { display: flex; gap: var(--space-3); }
.field-row > .field { flex: 1; }
.checkbox-field { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-3); }
.checkbox-field input { width: auto; accent-color: var(--color-accent); }
.checkbox-field label { margin: 0; font-weight: 500; color: var(--color-text); }
table { width: 100%; border-collapse: collapse; }
thead th {
text-align: left;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-faint);
font-weight: 600;
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--color-border);
}
tbody td {
padding: 12px var(--space-3);
border-bottom: 1px solid var(--color-border);
vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--dur-fast) var(--ease); }
tbody tr:hover { background: var(--color-bg-alt); }
.table-actions { display: flex; gap: 2px; justify-content: flex-end; }
@media (min-width: 721px) {
table.responsive-table td.karte-umbruch { display: none; }
table.liste-kompakt > tbody > tr:not(.datatable-expanded-row) > td {
padding: 8px var(--space-3);
white-space: nowrap;
}
table.liste-kompakt thead th { padding: 7px var(--space-3); white-space: nowrap; }
table.liste-kompakt tbody tr > td.col-actions,
table.liste-kompakt tbody tr > td.expand-col,
table.liste-kompakt tbody tr > td.spalte-eng { max-width: none; width: 1%; }
table.liste-kompakt > tbody > tr:not(.datatable-expanded-row) .table-cell-sub {
margin-top: 0;
line-height: 1.35;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
table.liste-kompakt > tbody > tr:not(.datatable-expanded-row) > td > div { min-width: 0; }
table.liste-kompakt td.text-right,
table.liste-kompakt th.text-right,
table.liste-kompakt td.spalte-zahl,
table.liste-kompakt th.spalte-zahl { text-align: right; }
table.liste-kompakt td.text-right,
table.liste-kompakt td.text-center,
table.liste-kompakt td.spalte-zahl { font-variant-numeric: tabular-nums; }
table.liste-kompakt tbody tr > td.spalte-breit,
table.liste-kompakt thead th.spalte-breit { width: 100%; max-width: 0; }
table.liste-kompakt tbody tr > td.spalte-breit { overflow: hidden; text-overflow: ellipsis; }
table.liste-kompakt thead th.spalte-breit { overflow: hidden; text-overflow: ellipsis; }
table.liste-kompakt tbody tr.zeile-gut > td:first-child { box-shadow: inset 3px 0 0 var(--color-success); }
table.liste-kompakt tbody tr.zeile-warn > td:first-child { box-shadow: inset 3px 0 0 var(--color-warning); }
table.liste-kompakt tbody tr.zeile-fehler > td:first-child { box-shadow: inset 3px 0 0 var(--color-danger); }
table.liste-kompakt tbody tr.zeile-still > td:first-child { box-shadow: none; }
table.liste-kompakt .zellen-titel { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.liste-kompakt .zellen-titel.hat-marke {
display: flex; align-items: center; gap: 8px; min-width: 0; overflow: visible;
}
table.liste-kompakt .zellen-titel.hat-marke > .zellen-titel-text {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
table.liste-kompakt .zellen-titel.hat-marke > .badge { flex-shrink: 0; }
table.liste-kompakt thead th.col-pdf,
table.liste-kompakt tbody tr > td.col-pdf {
width: 1%;
padding-left: 2px;
padding-right: 2px;
}
table.liste-kompakt tbody tr > td.col-pdf .btn-ghost {
padding-left: 4px;
padding-right: 4px;
}
}
tr.gruppen-kopf { cursor: pointer; }
tr.gruppen-kopf > td.gruppen-kopf-zelle {
padding: 0;
border-bottom: 1px solid var(--color-border);
background: var(--color-bg-alt);
}
tr.gruppen-kopf.is-zu > td.gruppen-kopf-zelle { background: var(--color-surface); }
tr.gruppen-kopf:hover > td.gruppen-kopf-zelle { background: var(--color-accent-soft); }
.gruppen-kopf-inhalt {
display: flex;
align-items: center;
gap: 9px;
padding: 8px var(--space-3);
}
.gruppen-pfeil {
display: flex;
color: var(--color-text-faint);
transform: rotate(-90deg);
transition: transform var(--dur-fast) var(--ease);
}
.gruppen-pfeil.is-offen { transform: rotate(0deg); }
.gruppen-pfeil svg { width: 15px; height: 15px; }
.gruppen-titel { font-weight: 600; font-size: 13.5px; }
tr.gruppen-kopf.is-zu .gruppen-titel { font-weight: 500; color: var(--color-text-muted); }
.gruppen-anzahl { font-size: 11.5px; color: var(--color-text-faint); }
.gruppen-rechts {
margin-left: auto;
display: flex;
align-items: center;
gap: 11px;
font-size: 12px;
color: var(--color-text-muted);
}
.gruppen-summe {
font-weight: 600;
font-size: 13.5px;
color: var(--color-text);
font-variant-numeric: tabular-nums;
}
.gruppen-balken {
width: 92px;
height: 5px;
border-radius: 99px;
background: var(--color-bg-alt);
overflow: hidden;
display: flex;
flex: 0 0 auto;
}
.gruppen-balken > i { display: block; height: 100%; }
.liste-kuerzel {
display: inline-grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--color-accent-soft);
color: var(--color-accent-strong);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.02em;
}
@media (max-width: 720px) {
table.responsive-table tr.gruppen-kopf {
display: block;
width: 100%;
padding: 0;
margin: 8px 0 4px;
border: 0;
background: none;
box-shadow: none;
}
table.responsive-table tr.gruppen-kopf > td.gruppen-kopf-zelle {
display: block;
width: 100%;
border-radius: var(--radius-sm);
border-bottom: 0;
}
table.responsive-table tr.gruppen-kopf > td.gruppen-kopf-zelle::before { content: none; }
.gruppen-kopf-inhalt {
padding: 7px 10px;
gap: 4px 7px;
flex-wrap: wrap;
align-items: baseline;
}
.gruppen-titel { font-size: 13px; white-space: nowrap; }
.gruppen-anzahl { white-space: nowrap; }
.gruppen-rechts {
flex: 0 0 100%;
margin-left: 0;
padding-left: 22px;
}
.gruppen-balken { display: none; }
}
.table-scroll { overflow-x: auto; }
.col-actions { position: sticky; right: 0; background: var(--color-surface); z-index: 1; }
thead th.col-actions { z-index: 2; }
tbody tr:hover td.col-actions { background: var(--color-bg-alt); }
tbody tr.is-expanded td.col-actions,
tbody tr.is-expanded:hover td.col-actions { background: var(--color-accent-soft); }
tbody tr.datatable-expanded-row td.col-actions,
tbody tr.datatable-expanded-row:hover td.col-actions { background: var(--color-surface-2); }
table.liste-kompakt tbody tr > td .feedback-inhalt { white-space: normal; }
.feedback-inhalt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.feedback-text { white-space: pre-wrap; line-height: 1.45; }
.feedback-sub {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px;
font-size: 11.5px;
color: var(--color-text-faint);
}
.feedback-punkt { color: var(--color-border-strong, var(--color-border)); }
.feedback-anhang {
display: inline-flex;
align-items: center;
gap: 3px;
color: var(--color-accent-strong);
}
.feedback-anhang svg { width: 11px; height: 11px; }
.feedback-inhalt.ist-erledigt .feedback-text { text-decoration: line-through; opacity: 0.6; }
@media (max-width: 720px) {
table.responsive-table.feedback-table td.karte-titel,
table.responsive-table.feedback-table td.karte-titel > *,
table.responsive-table.feedback-table td.karte-titel > * > * {
overflow: visible;
text-overflow: clip;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
table.responsive-table.feedback-table td.karte-titel .feedback-sub { white-space: normal; }
}
.feedback-table .col-actions { position: static; background: transparent; }
.feedback-table tbody tr:hover td.col-actions { background: transparent; }
.feedback-table .table-actions { gap: 10px; padding-right: 4px; }
.datatable-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-4);
flex-wrap: wrap;
}
.archive-search-bar {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-4);
flex-wrap: wrap;
}
.archive-search-bar .datatable-search { max-width: 360px; }
.archive-filter-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.archive-filter-wrap .year-pills { margin-bottom: 0; }
.archive-filter-wrap > .year-pills + .year-pills {
padding-left: 10px;
border-left: 1px solid var(--color-border);
}
.archive-filter-wrap > .year-pills + .archive-filter-hinweis {
padding-left: 10px;
border-left: 1px solid var(--color-border);
}
.archive-filter-hinweis {
display: flex;
align-items: center;
padding: 7px 0;
border: 1px solid transparent;
font-size: 12.5px;
line-height: normal;
color: var(--color-text-muted);
}
.datatable-search {
position: relative;
flex: 1;
min-width: 200px;
max-width: 320px;
}
.datatable-search svg {
position: absolute;
left: 11px;
top: 50%;
transform: translateY(-50%);
width: 15px;
height: 15px;
color: var(--color-text-faint);
pointer-events: none;
}
.datatable-search input {
width: 100%;
padding: 8px 11px 8px 34px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
font-size: var(--text-body);
font-family: inherit;
background: var(--color-surface-2);
color: var(--color-text);
transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.datatable-search input:focus {
outline: none;
border-color: var(--color-accent);
background: var(--color-surface);
box-shadow: var(--shadow-glow);
}
.datatable-count { font-size: 12px; color: var(--color-text-faint); white-space: nowrap; }
.catalog-search-input {
padding: 8px 11px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
font-size: var(--text-body);
font-family: inherit;
background: var(--color-surface-2);
color: var(--color-text);
transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.catalog-search-input::placeholder { color: var(--color-text-faint); opacity: 1; }
.catalog-search-input:focus {
outline: none;
border-color: var(--color-accent);
background: var(--color-surface);
box-shadow: var(--shadow-glow);
}
th.sortable { cursor: pointer; user-select: none; }
th.sortable .th-inner { display: inline-flex; align-items: center; gap: 4px; }
th.sortable:hover { color: var(--color-text-muted); }
th.sortable .sort-icon {
display: inline-flex;
width: 11px;
height: 11px;
opacity: 0.35;
transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
th.sortable .sort-icon svg { width: 11px; height: 11px; }
th.sorted .sort-icon { opacity: 1; color: var(--color-accent); }
th.sorted.sort-desc .sort-icon { transform: rotate(180deg); }
.datatable-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
}
.datatable-pagination .pagination-info { font-size: 12.5px; color: var(--color-text-muted); }
.pagination-pages { display: flex; align-items: center; gap: 2px; }
.pagination-page {
min-width: 28px;
height: 28px;
padding: 0 6px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-muted);
font-size: 12.5px;
font-family: inherit;
cursor: pointer;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pagination-page:hover:not(:disabled) { background: var(--color-surface-2); color: var(--color-text); }
.pagination-page.is-current { background: var(--color-accent); color: #fff; font-weight: 600; cursor: default; }
.pagination-ellipsis { min-width: 18px; text-align: center; color: var(--color-text-faint); font-size: 12.5px; }
.lead-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 600;
font-size: 11px;
flex-shrink: 0;
}
.lead-avatar.ist-blass { font-weight: 600; }
.produktion-nummer { color: var(--color-accent-strong); }
.pm-share-warten { display: flex; align-items: center; gap: 14px; padding: 6px 0; }
.pm-share-warten .spinner { flex: 0 0 auto; margin: 0; }
table.responsive-table tr.hat-karte .zellen-titel > .produktion-nummer {
display: inline-block;
line-height: inherit;
vertical-align: baseline;
}
.lead-avatar.is-empty {
background: var(--color-bg-alt);
color: var(--color-text-faint);
border: 1.5px dashed var(--color-border-strong);
}
.lead-avatar.is-empty svg { width: 15px; height: 15px; }
.lead-avatar.is-rental {
background: var(--color-warning-soft);
color: var(--color-warning);
border: 1.5px solid var(--color-warning);
}
.lead-avatar.is-rental svg { width: 15px; height: 15px; }
.set-status { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.set-status-icon {
width: 26px;
height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 1.5px solid var(--color-border-strong);
background: var(--color-surface);
color: var(--color-text-faint);
padding: 0;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.set-status-icon svg { width: 12.5px; height: 12.5px; }
.set-status-icon.done { background: var(--color-accent-soft); border-color: transparent; color: var(--color-accent-strong); }
.set-status.is-finished .set-status-icon.done { background: var(--color-success-soft); color: var(--color-success); }
.set-status-icon.done:hover {
background: var(--color-accent);
border-color: transparent;
color: #fff;
transform: translateY(-1px);
box-shadow: 0 4px 10px -2px rgba(10, 107, 79, 0.4);
}
.set-status-icon.current {
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-2) 130%);
border-color: transparent;
color: #fff;
box-shadow: 0 4px 10px -2px rgba(10, 107, 79, 0.4);
cursor: default;
}
.set-status-icon.pending:hover { border-color: var(--color-accent); color: var(--color-accent); transform: translateY(-1px); }
.set-status.ist-punkte { gap: 5px; }
.set-status.ist-punkte .set-status-icon {
position: relative;
width: 14px;
height: 14px;
border-width: 1.5px;
border-color: var(--color-border-strong);
background: var(--color-surface);
box-shadow: none;
transform: none;
}
.set-status.ist-punkte .set-status-icon::before {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
}
.set-status.ist-punkte .set-status-icon.done {
background: var(--color-border-strong);
border-color: transparent;
}
.set-status.ist-punkte.is-finished .set-status-icon.done {
background: var(--color-success-soft);
border-color: transparent;
}
.set-status.ist-punkte .set-status-icon.current {
background: var(--color-accent);
border-color: transparent;
box-shadow: none;
transform: none;
}
.set-status.ist-punkte .set-status-icon.current.ton-success { background: var(--color-success); }
.set-status.ist-punkte .set-status-icon.current.ton-warning { background: var(--color-warning); }
.set-status.ist-punkte .set-status-icon.current.ton-neutral { background: var(--color-text-muted); }
.set-status.ist-punkte .set-status-icon.current.ton-danger { background: var(--color-danger); }
.set-status.ist-punkte .set-status-icon.current.stufe-1 { background: var(--stufe-1); }
.set-status.ist-punkte .set-status-icon.current.stufe-2 { background: var(--stufe-2); }
.set-status.ist-punkte .set-status-icon.current.stufe-3 { background: var(--stufe-3); }
.set-status.ist-punkte .set-status-icon.current.stufe-4 { background: var(--stufe-4); }
.set-status.ist-punkte .set-status-icon.current.stufe-5 { background: var(--stufe-5); }
.set-status.ist-punkte .set-status-icon.current.stufe-6 { background: var(--stufe-6); }
.set-status.ist-punkte .set-status-icon.current.stufe-7 { background: var(--stufe-7); }
.set-status.ist-punkte .set-status-icon.done.stufe-1 { background: var(--stufe-1); }
.set-status.ist-punkte .set-status-icon.done.stufe-2 { background: var(--stufe-2); }
.set-status.ist-punkte .set-status-icon.done.stufe-3 { background: var(--stufe-3); }
.set-status.ist-punkte .set-status-icon.done.stufe-4 { background: var(--stufe-4); }
.set-status.ist-punkte .set-status-icon.done.stufe-5 { background: var(--stufe-5); }
.set-status.ist-punkte .set-status-icon.done.stufe-6 { background: var(--stufe-6); }
.set-status.ist-punkte .set-status-icon.done.stufe-7 { background: var(--stufe-7); }
.set-status.ist-punkte .set-status-icon.done { opacity: 0.42; }
.set-status.ist-punkte .set-status-icon.current,
.set-status.ist-punkte .set-status-icon.done {
box-shadow: inset 0 0 0 1px var(--stufe-ring);
}
.set-status.ist-punkte .set-status-icon.done:hover { opacity: 1; }
.set-status.ist-punkte .set-status-icon.done:hover,
.set-status.ist-punkte .set-status-icon.pending:hover {
background: var(--color-accent);
border-color: transparent;
transform: none;
box-shadow: none;
}
.donut-chart { flex-shrink: 0; width: auto; height: auto; }
.donut-legend-row {
display: flex;
align-items: center;
gap: var(--space-2);
padding: 5px 0;
font-size: 12.5px;
}
.rental-booking-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.rental-booking-title { font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rental-booking-sub { font-size: var(--text-meta); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.rental-booking-dates { font-size: var(--text-meta); color: var(--color-text-muted); white-space: nowrap; flex-shrink: 0; }
.vm-zeile { display: flex; flex-direction: column; gap: 3px; padding: 6px 0; }
.vm-kopf { display: flex; align-items: center; gap: 10px; }
.vm-titel {
font-weight: 600;
font-size: 13px;
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vm-meta {
display: flex;
align-items: baseline;
gap: 6px;
min-width: 0;
font-size: var(--text-meta);
color: var(--color-text-muted);
}
.vm-kunde { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-nr { flex-shrink: 0; white-space: nowrap; }
.vm-datum {
margin-left: auto;
flex-shrink: 0;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.rental-hint { font-size: var(--text-meta); color: var(--color-text-muted); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border); }
.changelog-panel {
position: relative;
}
.changelog-panel-close {
position: absolute;
top: 14px; right: 14px;
width: 26px; height: 26px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: transparent;
border: none;
color: var(--color-text-faint);
font-size: 12px;
cursor: pointer;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
z-index: 1;
}
.changelog-panel-close:hover { background: var(--color-bg-alt); color: var(--color-text); }
.changelog-panel-list {
max-height: 260px;
overflow-y: auto;
display: flex;
flex-direction: column;
margin: 0 calc(var(--space-5) * -1);
padding: 0 var(--space-5);
}
.changelog-panel-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 0;
}
.changelog-panel-item-date {
flex-shrink: 0;
width: 68px;
font-size: 11px;
color: var(--color-text-faint);
white-space: nowrap;
align-self: flex-start;
margin-top: 1px;
}
.changelog-panel-item-body { flex: 1; min-width: 0; }
.changelog-panel-item-title { font-weight: 600; font-size: 12.5px; }
.changelog-panel-item-desc {
font-size: 12px;
color: var(--color-text-muted);
line-height: 1.4;
margin: 2px 0 0;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.changelog-panel-item.is-expanded .changelog-panel-item-desc {
-webkit-line-clamp: unset;
display: block;
}
.changelog-panel-item.is-linked { cursor: pointer; border-radius: var(--radius-sm); }
.changelog-panel-item.is-linked:hover { background: var(--color-bg-alt); }
.changelog-panel-item.is-linked:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
.changelog-panel-item-expand {
flex-shrink: 0;
align-self: flex-start;
margin-top: 1px;
background: none;
border: 0;
padding: 4px;
border-radius: var(--radius-sm);
color: var(--color-text-faint);
cursor: pointer;
display: flex;
transition: background var(--dur-fast) var(--ease), transform var(--dur-base) var(--ease), color var(--dur-fast) var(--ease);
}
.changelog-panel-item-expand:hover { background: var(--color-bg-alt); color: var(--color-text); }
.changelog-panel-item-expand svg { width: 13px; height: 13px; }
.changelog-panel-item.is-expanded .changelog-panel-item-expand { transform: rotate(180deg); }
.changelog-panel-item-try {
flex-shrink: 0;
display: flex; align-items: center; gap: 3px;
font-size: var(--text-meta); font-weight: 600;
color: var(--color-accent);
text-decoration: none;
white-space: nowrap;
padding: 5px 9px;
border-radius: var(--radius-sm);
transition: background var(--dur-fast) var(--ease);
}
.changelog-panel-item.is-linked:hover .changelog-panel-item-try { background: var(--color-accent-soft); }
.changelog-panel-item-try svg { width: 12px; height: 12px; }
.changelog-panel-list.is-compact { flex: 1; max-height: 420px; min-height: 0; }
.changelog-panel-list.is-compact .changelog-panel-item { padding: 6px 0; }
.dashboard-page {
background-color: var(--color-bg);
border-radius: var(--radius-md);
margin: 0 calc(-1 * var(--space-5));
padding: var(--space-4) calc(var(--space-4) + var(--space-5));
}
.dashboard-top-row {
display: flex;
gap: var(--space-4);
align-items: stretch;
margin-bottom: var(--space-4);
}
.dashboard-top-row > * { flex: 1; min-width: 0; }
.dashboard-top-left {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.dashboard-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--space-4);
align-items: stretch;
}
.dashboard-tile { display: flex; flex-direction: column; min-height: 0; container-type: inline-size; }
.dashboard-tile > * { flex: 0 0 auto; }
.dashboard-tile > *:last-child { flex: 1 1 auto; min-height: 0; }
.dashboard-tile-body { display: flex; flex-direction: column; }
.dashboard-tile-body > * { flex: 1 1 auto; min-height: 0; }
.dashboard-tile.size-sm { grid-column: span 4; }
.dashboard-tile.size-md { grid-column: span 6; }
.dashboard-tile.size-lg { grid-column: span 12; }
@container (max-width: 420px) {
.dashboard-tile .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
.dashboard-tile-toolbar {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
margin-bottom: 6px;
background: var(--color-bg-alt);
border: 1px dashed var(--color-border);
border-radius: var(--radius-sm);
font-size: 12px;
}
.dashboard-tile-grip {
display: flex;
cursor: grab;
color: var(--color-text-muted);
flex-shrink: 0;
}
.dashboard-tile-grip svg { width: 15px; height: 15px; }
.dashboard-tile-grip:active { cursor: grabbing; }
.dashboard-tile-title {
font-weight: 600;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dashboard-tile-sizes {
display: flex;
gap: 2px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 2px;
flex-shrink: 0;
}
.dashboard-tile-size-btn {
border: none;
background: transparent;
color: var(--color-text-muted);
font-size: 11px;
font-weight: 600;
width: 20px;
height: 20px;
border-radius: 4px;
cursor: pointer;
}
.dashboard-tile-size-btn:hover { background: var(--color-bg-alt); }
.dashboard-tile-size-btn.active { background: var(--color-accent); color: #fff; }
.dashboard-tile-hide-btn {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border: none;
background: transparent;
color: var(--color-text-muted);
border-radius: var(--radius-sm);
cursor: pointer;
flex-shrink: 0;
}
.dashboard-tile-hide-btn:hover { background: var(--color-danger-soft, #fde8e8); color: var(--color-danger); }
.dashboard-tile-hide-btn svg { width: 13px; height: 13px; }
.dashboard-tile.is-dragover { outline: 2px dashed var(--color-accent); outline-offset: 4px; border-radius: var(--radius-md); }
.dashboard-hidden-tray {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-bottom: var(--space-4);
font-size: 12.5px;
}
.dashboard-hidden-tray-label { color: var(--color-text-muted); }
.dashboard-hidden-chip {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 8px 4px 10px;
border: 1px solid var(--color-border);
background: var(--color-surface);
border-radius: var(--radius-full);
font-size: 12px;
cursor: pointer;
}
.dashboard-hidden-chip:hover { border-color: var(--color-accent); color: var(--color-accent); }
.dashboard-hidden-chip svg { width: 12px; height: 12px; }
.dashboard-invoices-card { display: flex; flex-direction: column; position: relative; }
.dashboard-invoices-card .card-header h2 { padding-right: 150px; }
.dashboard-tile-no-height-sync { align-self: start; }
.dashboard-invoices-list {
--rechnung-zeilen: 6;
--rechnung-zeilenhoehe: 40px;
flex: 1;
max-height: calc(var(--rechnung-zeilen) * var(--rechnung-zeilenhoehe) + 12px);
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
scrollbar-width: none;
}
.dashboard-invoices-list::-webkit-scrollbar { display: none; }
.briefing-row.is-invoice-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding: 9px 8px;
}
.dashboard-invoice-line {
display: flex;
align-items: baseline;
gap: 7px;
min-width: 0;
flex: 1;
overflow: hidden;
}
.dashboard-invoice-label {
font-size: 12px;
font-weight: 600;
color: var(--color-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 1;
}
.dashboard-invoice-meta {
font-size: 11px;
color: var(--color-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 3;
min-width: 40px;
}
.briefing-row.is-invoice-row .briefing-row-due {
flex-shrink: 0;
font-size: 11px;
white-space: nowrap;
}
.dashboard-invoices-switch {
display: inline-flex;
position: absolute;
top: var(--space-5);
right: var(--space-5);
background: var(--color-bg-alt);
border-radius: var(--radius-full);
padding: 3px;
gap: 2px;
flex-shrink: 0;
}
.dashboard-invoices-switch-btn {
border: none;
background: transparent;
padding: 5px 12px;
border-radius: var(--radius-full);
font-size: var(--text-meta);
font-weight: 600;
color: var(--color-text-muted);
cursor: pointer;
white-space: nowrap;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.dashboard-invoices-switch-btn.is-active {
background: var(--color-surface);
color: var(--color-text);
box-shadow: var(--shadow-sm);
}
.dashboard-invoices-switch-icon { display: none; }
.dashboard-invoices-switch-icon svg { width: 16px; height: 16px; display: block; }
.dashboard-invoice-amount { font-size: 12px; font-weight: 600; color: var(--color-text); white-space: nowrap; }
.dashboard-split-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.dashboard-split-col { min-width: 0; padding-right: var(--space-5); }
.dashboard-split-col .briefing-row { margin: 0; }
.dashboard-split-col + .dashboard-split-col {
border-left: 1px solid var(--color-border);
padding-left: var(--space-5);
}
.dashboard-split-col-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: var(--space-4);
}
.dashboard-split-col-header h3 { font-size: var(--text-entity-title); font-weight: 600; margin: 0; }
.dashboard-split-col-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dashboard-todo-switch {
display: none;
gap: 2px;
padding: 2px;
margin-bottom: var(--space-4);
width: fit-content;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg-alt);
}
.dashboard-todo-switch-btn {
border: none;
background: transparent;
color: var(--color-text-muted);
font-size: 12px;
font-weight: 600;
padding: 6px 14px;
border-radius: calc(var(--radius-md) - 2px);
cursor: pointer;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.dashboard-todo-switch-btn:hover { color: var(--color-text); }
.dashboard-todo-switch-btn.is-active { background: var(--color-surface); color: var(--color-accent-strong); box-shadow: var(--shadow-sm); }
@container (max-width: 640px) {
.dashboard-todo-switch { display: inline-flex; }
.dashboard-split-grid { grid-template-columns: 1fr; }
.dashboard-split-col { display: none; }
.dashboard-split-col.is-active-day { display: block; }
.dashboard-split-col + .dashboard-split-col {
border-left: none;
padding-left: 0;
}
}
.briefing-clear { display: flex; align-items: center; gap: 12px; }
.briefing-clear-icon { color: var(--color-success); flex-shrink: 0; display: flex; }
.briefing-clear-icon svg { width: 24px; height: 24px; }
.briefing-clear-title { font-weight: 600; font-size: var(--text-entity-title); }
.briefing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-5);
}
.briefing-section-label {
display: flex;
align-items: center;
gap: 7px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--color-warning);
margin-bottom: 8px;
}
.briefing-section-label svg { width: 13px; height: 13px; flex-shrink: 0; }
.briefing-section-count {
margin-left: auto;
background: var(--color-warning-soft);
color: var(--color-warning);
border-radius: var(--radius-full);
padding: 1px 8px;
font-size: var(--text-small);
}
.briefing-section-rows {
--briefing-zeilen: 5;
--briefing-zeilenhoehe: 51px;
max-height: calc(var(--briefing-zeilen) * var(--briefing-zeilenhoehe) + 14px);
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
}
.briefing-section-rows::-webkit-scrollbar { display: none; }
.briefing-row { padding: 7px 8px; border-radius: var(--radius-sm); cursor: pointer; margin: 0 -8px; }
.briefing-row:hover { background: var(--color-bg-alt); }
.briefing-row-title { font-size: 12.5px; font-weight: 600; color: var(--color-text); }
.briefing-row-sub {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 8px;
font-size: 11px;
color: var(--color-text-muted);
margin-top: 1px;
}
.briefing-row-due.is-today { color: var(--color-accent); font-weight: 600; }
.briefing-row-due.is-overdue { color: var(--color-danger); font-weight: 600; }
.donut-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.donut-legend-label { flex: 1; font-weight: 600; }
.donut-legend-value { color: var(--color-text-muted); white-space: nowrap; }
.consolidation-card { margin-bottom: var(--space-4); border-color: var(--color-accent); border-width: 1.5px; }
.consolidation-list { display: flex; flex-direction: column; gap: var(--space-2); }
.consolidation-row {
display: flex;
align-items: center;
gap: var(--space-3);
padding: 10px 12px;
background: var(--color-bg-alt);
border-radius: var(--radius-md);
flex-wrap: wrap;
}
.consolidation-row-title { font-weight: 600; font-size: var(--text-body); color: var(--color-text); }
.consolidation-row-sub { font-size: var(--text-meta); color: var(--color-text-muted); margin-top: 2px; }
.consolidation-row-rec {
display: flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
font-weight: 600;
color: var(--color-accent-strong);
white-space: nowrap;
}
.consolidation-row-rec svg { width: 14px; height: 14px; }
.backup-entry-chip {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--color-bg-alt);
border-radius: var(--radius-sm);
padding: 2px 4px 2px 8px;
margin: 2px 4px 2px 0;
font-size: 12px;
}
.backup-entry-delete-btn {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
color: var(--color-text-faint);
background: none;
border: none;
cursor: pointer;
}
.backup-entry-delete-btn svg { width: 11px; height: 11px; }
.backup-entry-delete-btn:hover { color: var(--color-danger, #d64545); background: var(--color-danger-soft, rgba(214, 69, 69, 0.1)); }
.tape-kopf {
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-border);
}
.tape-kopf-zahlen {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px;
font-size: 13px;
color: var(--color-text-muted);
}
.tape-kopf-zahlen strong { color: var(--color-text); font-weight: 600; }
.tape-kopf-punkt { color: var(--color-text-faint); }
.tape-liste { display: flex; flex-direction: column; }
.tape-zeile {
display: grid;
grid-template-columns: 28px minmax(140px, 1fr) minmax(200px, 260px) 120px 96px auto;
align-items: center;
gap: var(--space-3);
padding: 10px 0;
border-bottom: 1px solid var(--color-border);
border-left: 3px solid transparent;
padding-left: var(--space-3);
margin-left: calc(var(--space-3) * -1);
}
.tape-zeile:last-child { border-bottom: none; }
.tape-zeile.ist-fastvoll { border-left-color: var(--color-warning, #d9a441); }
.tape-zeile.ist-voll { border-left-color: var(--color-warning, #d9a441); }
.tape-zeile.ist-gesperrt .tape-name,
.tape-zeile.ist-gesperrt .tape-fuellung,
.tape-zeile.ist-gesperrt .tape-anzahl { opacity: 0.62; }
.tape-zeile:not(.ist-kopf):hover { background: var(--color-surface-2); }
.tape-zeile.ist-aufgeklappt { background: var(--color-accent-soft); }
.tape-zeile.ist-kopf {
padding-top: 0;
padding-bottom: 7px;
font-size: 11px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-text-faint);
}
.tape-zeile.ist-kopf:hover { background: none; }
.tape-pfeilspalte {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: none;
border-radius: 50%;
background: none;
color: var(--color-text-faint);
cursor: pointer;
}
button.tape-pfeilspalte:hover { background: var(--color-bg-alt); color: var(--color-text); }
.tape-pfeil { display: inline-flex; transition: transform var(--dur-base) var(--ease); }
.tape-pfeil svg { width: 13px; height: 13px; }
.tape-pfeil.is-open { transform: rotate(180deg); }
.tape-name { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tape-titel {
font-weight: 600;
font-size: 14px;
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tape-sub {
font-size: 11px;
color: var(--color-text-faint);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tape-fuellung { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tape-balken {
display: block;
height: 6px;
border-radius: 3px;
background: var(--color-bg-alt);
overflow: hidden;
}
.tape-balken-fuell { display: block; height: 100%; border-radius: 3px; background: var(--color-accent); }
.tape-balken-fuell.ton-success { background: var(--color-success, #3f9d6d); }
.tape-balken-fuell.ton-warning { background: var(--color-warning, #d9a441); }
.tape-balken-fuell.ton-neutral { background: var(--color-text-faint); }
.tape-balken-text {
font-size: 11px;
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tape-anzahl {
font-size: 12px;
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.tape-zustand { white-space: nowrap; }
.tape-aktionen { display: flex; align-items: center; gap: 2px; justify-content: flex-end; }
.tape-icon-btn { flex-shrink: 0; }
.tape-inhalt {
display: none;
padding: var(--space-3) 0 var(--space-4) 28px;
border-bottom: 1px solid var(--color-border);
}
.tape-inhalt.is-open { display: block; }
.tape-block:last-child .tape-inhalt { border-bottom: none; }
@media (max-width: 860px) {
.tape-zeile {
grid-template-columns: 28px minmax(0, 1fr) auto auto;
grid-template-areas:
'pfeil name zustand aktionen'
'.     fuell fuell   anzahl';
row-gap: 6px;
}
.tape-pfeilspalte { grid-area: pfeil; }
.tape-name { grid-area: name; }
.tape-fuellung { grid-area: fuell; }
.tape-anzahl { grid-area: anzahl; text-align: right; }
.tape-zustand { grid-area: zustand; }
.tape-aktionen { grid-area: aktionen; }
.tape-zeile.ist-kopf { display: none; }
.tape-inhalt { padding-left: 0; }
}
.papierkorb-zelle { min-width: 0; }
.papierkorb-titel {
display: flex;
align-items: center;
gap: 7px;
min-width: 0;
}
.papierkorb-typ { flex-shrink: 0; }
.papierkorb-titel .zellen-titel { min-width: 0; }
.chip-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: var(--radius-full);
background: var(--color-accent-soft);
color: var(--color-accent-strong);
font-weight: var(--weight-semibold);
font-size: var(--text-meta);
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chip-btn:hover { background: var(--color-accent); color: #fff; }
.chip-btn svg { width: 12px; height: 12px; opacity: 0.7; }
.number-copy-btn {
display: inline-flex;
align-items: center;
gap: 4px;
background: none;
border: none;
padding: 0;
color: var(--color-text-muted);
font-weight: var(--weight-semibold);
font-size: var(--text-meta);
font-variant-numeric: tabular-nums;
cursor: pointer;
}
.number-copy-btn:hover { color: var(--color-accent-strong); }
.number-copy-btn svg { width: 11px; height: 11px; opacity: 0.6; }
.number-copy-btn.produktion-kopieren {
position: relative;
margin-left: 8px;
width: 16px;
height: 16px;
justify-content: center;
vertical-align: middle;
border-radius: var(--radius-sm);
color: var(--color-text-faint);
}
.number-copy-btn.produktion-kopieren::before {
content: '';
position: absolute;
inset: -4px;
border-radius: var(--radius-sm);
}
.number-copy-btn.produktion-kopieren svg { width: 14px; height: 14px; opacity: 1; }
.number-copy-btn.produktion-kopieren:hover,
.number-copy-btn.produktion-kopieren:focus-visible {
background: var(--color-bg-alt);
color: var(--color-accent-strong);
}
.entity-name-btn {
display: inline-flex;
align-items: center;
gap: 5px;
background: none;
border: none;
padding: 0;
color: var(--color-text);
font-weight: var(--weight-semibold);
font-size: inherit;
cursor: pointer;
}
.entity-name-btn:hover { color: var(--color-accent-strong); }
.entity-name-btn svg { width: 13px; height: 13px; opacity: 0.55; flex-shrink: 0; }
.entity-name-btn { max-width: 100%; }
.entity-name-btn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.to-invoice-card { display: flex; flex-direction: column; }
.to-invoice-list { display: flex; flex-direction: column; }
.to-invoice-row {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: var(--space-3);
padding: 7px 2px;
}
.to-invoice-main { flex: 1 1 auto; min-width: 0; }
.to-invoice-title {
font-size: var(--text-body);
font-weight: var(--weight-semibold);
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.to-invoice-meta {
display: flex;
align-items: center;
gap: 5px;
margin-top: 2px;
font-size: var(--text-meta);
color: var(--color-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.to-invoice-row .btn { flex-shrink: 0; }
.badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: var(--radius-full);
font-size: var(--text-meta);
font-weight: var(--weight-semibold);
}
.badge::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.zellen-kennung {
font-weight: 600;
letter-spacing: .01em;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.zellen-kennung-kuerzel { color: var(--color-accent-strong); }
.zellen-kennung-nummer  { color: var(--color-tone-blue); }
.zellen-kennung.ist-inaktiv { color: var(--color-text-faint); font-weight: 500; }
.badge-success { background: var(--color-success-soft); color: var(--color-success); }
.badge-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge-danger { background: var(--color-danger-soft); color: var(--color-danger); }
.badge-accent { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.badge-neutral { background: var(--color-bg-alt); color: var(--color-text-muted); }
.badge-stufe-1 { background: var(--stufe-1-flaeche); color: var(--stufe-1-schrift); }
.badge-stufe-2 { background: var(--stufe-2-flaeche); color: var(--stufe-2-schrift); }
.badge-stufe-3 { background: var(--stufe-3-flaeche); color: var(--stufe-3-schrift); }
.badge-stufe-4 { background: var(--stufe-4-flaeche); color: var(--stufe-4-schrift); }
.badge-stufe-5 { background: var(--stufe-5-flaeche); color: var(--stufe-5-schrift); }
.badge-stufe-6 { background: var(--stufe-6-flaeche); color: var(--stufe-6-schrift); }
.badge-stufe-7 { background: var(--stufe-7-flaeche); color: var(--stufe-7-schrift); }
.badge-rental { background: var(--color-warning-soft); color: var(--color-warning); border: 1px solid var(--color-warning); font-weight: 600; }
.table-icon-btn {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
border: 1px solid var(--color-border);
background: var(--color-bg);
color: var(--color-text-muted);
}
.table-icon-btn svg { width: 14px; height: 14px; }
.table-icon-btn:hover { background: var(--color-accent-soft); color: var(--color-accent-strong); border-color: var(--color-accent-strong); }
.table-icon-btn.is-done { background: var(--color-success-soft); color: var(--color-success); border-color: var(--color-success); }
.rabatt-feld {
display: flex;
align-items: stretch;
gap: 4px;
}
.rabatt-feld input { flex: 1 1 auto; min-width: 0; }
.rabatt-feld .rabatt-modus {
flex: 0 0 34px;
padding: 0;
font-size: 14px;
font-weight: 600;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface-alt, var(--color-surface));
cursor: pointer;
}
.rabatt-feld .rabatt-modus:hover { border-color: var(--color-accent); color: var(--color-accent); }
.buchung-abweichung {
border-left: 3px solid var(--color-warning);
padding-left: var(--space-3);
}
.buchung-abweichung h3 { color: var(--color-warning); }
.buchung-abweichung p { margin: 4px 0 0; font-size: var(--text-small); }
.table-icon-btn.is-arbeit { background: var(--color-warning-soft); color: var(--color-warning); border-color: var(--color-warning); }
.badge-tone-blue { background: var(--color-tone-blue-soft); color: var(--color-tone-blue); }
.badge-tone-purple { background: var(--color-tone-purple-soft); color: var(--color-tone-purple); }
.badge-tone-rose { background: var(--color-tone-rose-soft); color: var(--color-tone-rose); }
.badge-tone-amber { background: var(--color-tone-amber-soft); color: var(--color-tone-amber); }
.badge-tone-teal { background: var(--color-tone-teal-soft); color: var(--color-tone-teal); }
.badge-tone-slate { background: var(--color-tone-slate-soft); color: var(--color-tone-slate); }
.switch-row { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.switch { position: relative; display: inline-block; width: 36px; height: 21px; flex-shrink: 0; }
.switch input {
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
margin: 0;
cursor: pointer;
}
.switch-slider {
position: absolute;
inset: 0;
background: var(--color-border-strong);
border-radius: var(--radius-full);
transition: background var(--dur-base) var(--ease);
pointer-events: none;
}
.switch-slider::before {
content: '';
position: absolute;
width: 17px;
height: 17px;
left: 2px;
top: 2px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
transition: transform var(--dur-base) var(--ease);
}
.switch input:checked + .switch-slider { background: var(--color-success); }
.switch input:checked + .switch-slider::before { transform: translateX(15px); }
.switch input:disabled + .switch-slider { opacity: 0.5; cursor: not-allowed; }
.switch-label { font-size: 12.5px; color: var(--color-text-muted); }
.progress-track {
width: 100%;
height: 7px;
border-radius: var(--radius-full);
background: var(--color-bg-alt);
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2));
border-radius: var(--radius-full);
transition: width var(--dur-base) var(--ease);
}
.progress-fill.warning { background: var(--color-warning); }
.progress-fill.danger { background: var(--color-danger); }
.progress-fill.success { background: var(--color-success); }
.progress-fill.neutral { background: var(--color-text-faint); }
.status-cell { min-width: 0; }
.status-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
margin-bottom: 7px;
}
.status-percent { font-size: var(--text-meta); font-weight: var(--weight-semibold); color: var(--color-text-faint); }
.status-stepper {
display: inline-flex;
align-items: center;
gap: 2px;
margin-top: 8px;
}
.status-stepper button {
border: none;
background: transparent;
color: var(--color-text-faint);
width: 22px;
height: 22px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.status-stepper button:hover:not(:disabled) { background: var(--color-bg-alt); color: var(--color-text); }
.status-stepper button:disabled { opacity: 0.3; cursor: not-allowed; }
.status-stepper button svg { width: 11px; height: 11px; }
.status-stepper-divider { width: 1px; height: 12px; background: var(--color-border); }
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(14, 15, 30, 0.5);
backdrop-filter: blur(2px);
display: flex;
align-items: flex-start;
justify-content: center;
padding: var(--space-8) var(--space-4);
overflow-y: auto;
z-index: 100;
animation: fade-in 0.14s var(--ease);
}
.modal {
background: var(--color-surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
width: 100%;
max-width: 560px;
padding: var(--space-5);
animation: modal-in 0.22s var(--ease);
}
.modal-backdrop.is-wide {
padding-top: var(--space-4);
padding-bottom: var(--space-4);
padding-right: var(--space-3);
padding-left: calc(var(--sidebar-width) + var(--space-3));
}
.modal.is-wide { max-width: none; width: 100%; margin: 0; }
.modal-backdrop:not(.pos-blatt-modal):not(.is-fullscreen) > .modal { margin-top: auto; margin-bottom: auto; }
.modal-backdrop.is-wide.is-mittig { padding-left: var(--space-4); padding-right: var(--space-4); }
.modal.is-wide.is-mittig { max-width: 1120px; margin-left: auto; margin-right: auto; }
.modal.is-document { max-width: 1456px; }
.modal.is-aufgabe { max-width: 880px; }
.pm-picker { max-height: 60vh; overflow-y: auto; }
.pm-picker-search {
width: 100%;
padding: var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg-alt);
color: var(--color-text);
font-size: var(--text-body);
margin-bottom: var(--space-3);
}
.pm-picker-search:focus { outline: none; border-color: var(--color-accent); }
.pm-picker-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.pm-picker-item {
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
padding: var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
text-align: left;
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.pm-picker-item:hover { border-color: var(--color-accent); }
.pm-picker-item.is-selected { border-color: var(--color-accent); background: var(--color-accent-soft); }
.pm-picker-item-nr {
flex: 0 0 72px;
text-align: center;
color: var(--color-accent);
background: var(--color-accent-soft);
border-radius: 6px;
padding: 3px 8px;
font-size: var(--text-small);
font-weight: 600;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.pm-picker-item-mitte {
flex: 1 1 auto;
min-width: 0;
}
.pm-picker-item-client {
display: block;
color: var(--color-text-muted);
font-size: var(--text-small);
margin-top: 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pm-picker-item-title {
display: block;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes action-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-4);
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: var(--space-2);
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
}
.modal.action-sheet { max-width: 320px; padding: var(--space-3); }
.action-sheet-list { display: flex; flex-direction: column; gap: 2px; }
.action-sheet-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 11px 12px;
border: none;
background: none;
border-radius: var(--radius-sm);
font-size: var(--text-entity-title);
font-family: inherit;
color: var(--color-text);
text-align: left;
cursor: pointer;
}
.action-sheet-item:hover { background: var(--color-bg-alt); }
.action-sheet-item-icon { display: flex; flex-shrink: 0; width: 18px; height: 18px; color: var(--color-text-muted); }
.action-sheet-item-icon svg { width: 100%; height: 100%; }
.action-sheet-item-punkt { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--color-text-faint); }
.action-sheet-item-punkt.ist-tone-blue { background: var(--color-tone-blue); }
.action-sheet-item-punkt.ist-tone-purple { background: var(--color-tone-purple); }
.action-sheet-item-punkt.ist-tone-teal { background: var(--color-tone-teal); }
.action-sheet-item-punkt.ist-tone-amber { background: var(--color-tone-amber); }
.action-sheet-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.action-sheet-item-hinweis { font-size: var(--text-meta); color: var(--color-text-muted); line-height: 1.35; }
.action-sheet-item.hat-hinweis { align-items: flex-start; }
.action-sheet-item.hat-hinweis .action-sheet-item-punkt { margin-top: 7px; }
.action-sheet-item.is-danger { color: var(--color-danger); }
.action-sheet-item.is-danger .action-sheet-item-icon { color: var(--color-danger); }
.table-actions-mobile-trigger { display: none; }
.quickadd-trigger-mobile { display: none; }
.toast-container {
position: fixed;
bottom: var(--space-5);
right: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-2);
z-index: 200;
}
.toast {
background: var(--color-text);
color: #fff;
padding: 11px 16px;
border-radius: var(--radius-sm);
font-size: var(--text-body);
font-weight: 500;
box-shadow: var(--shadow-lg);
animation: toast-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toast.error { background: var(--color-danger); }
.toast.success { background: var(--color-success); }
@keyframes toast-in {
from { opacity: 0; transform: translate(56px, 24px) scale(0.85); }
to { opacity: 1; transform: translate(0, 0) scale(1); }
}
.login-screen {
min-height: 100vh;
min-height: 100dvh;
display: grid;
grid-template-columns: 1.1fr 1fr;
background: var(--color-surface);
}
.login-hero {
background-color: #161512;
background-image: linear-gradient(rgba(14, 13, 11, 0.6), rgba(14, 13, 11, 0.6)), url("../assets/transfer-background.jpg");
background-size: cover;
background-position: center;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: var(--space-8);
color: #fff;
overflow: hidden;
}
.login-hero::before {
content: '';
position: absolute;
width: 480px;
height: 480px;
border-radius: 50%;
background: radial-gradient(circle, rgba(10, 107, 79, 0.35), transparent 70%);
top: -160px;
right: -160px;
}
.login-hero::after {
content: '';
position: absolute;
width: 360px;
height: 360px;
border-radius: 50%;
background: radial-gradient(circle, rgba(6, 182, 212, 0.25), transparent 70%);
bottom: -140px;
left: -100px;
}
.login-hero-brand { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.login-hero-quote {
position: relative;
z-index: 1;
font-size: 24px;
font-weight: 300;
letter-spacing: 0;
line-height: 1.45;
max-width: 420px;
}
.login-hero-quote span { color: #86dcbb; }
.login-hero::before, .login-hero::after { display: none; }
.login-hero-foot { position: relative; z-index: 1; font-size: 12.5px; color: var(--sidebar-text); }
.login-form-side {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-6);
}
.login-card {
width: 100%;
max-width: 360px;
}
.login-card h1 { margin-bottom: 4px; }
.login-card p.subtitle { color: var(--color-text-muted); margin-bottom: var(--space-6); }
.form-error {
display: flex;
align-items: center;
gap: 8px;
background: var(--color-danger-soft);
color: var(--color-danger);
border-radius: var(--radius-sm);
padding: 10px 12px;
font-size: 12.5px;
font-weight: 500;
margin-bottom: var(--space-3);
}
.form-error svg { width: 15px; height: 15px; flex-shrink: 0; }
.text-muted { color: var(--color-text-muted); font-size: 12.5px; margin: 0 0 10px; }
.text-faint { color: var(--color-text-faint); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.table-cell-sub { font-size: var(--text-meta); color: var(--color-text-muted); margin-top: 2px; }
.text-nowrap { white-space: nowrap; }
.produktion-extras { display: inline-flex; align-items: center; gap: 6px; }
.music-indicator, .lto-indicator {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-text-faint);
cursor: help;
}
.music-indicator svg, .lto-indicator svg { width: 15px; height: 15px; }
.lto-indicator.is-on { color: var(--color-success); }
.feedback-indicator {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: help;
}
.feedback-indicator svg { width: 15px; height: 15px; }
.feedback-indicator.is-confirmed { color: var(--color-success); }
.feedback-indicator.is-note { color: var(--color-accent); }
[data-tooltip] { position: relative; }
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 9px);
left: 50%;
transform: translateX(-50%);
background: var(--color-text);
color: #fff;
padding: 7px 11px;
border-radius: var(--radius-sm);
font-size: var(--text-meta);
font-weight: 500;
line-height: 1.4;
width: max-content;
max-width: 240px;
white-space: normal;
text-align: left;
box-shadow: var(--shadow-md);
z-index: 60;
pointer-events: none;
}
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
content: '';
position: absolute;
bottom: calc(100% + 3px);
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: var(--color-text);
z-index: 60;
pointer-events: none;
}
[data-tooltip]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.empty-state {
text-align: center;
padding: var(--space-8) var(--space-4);
color: var(--color-text-muted);
}
.empty-state svg { width: 32px; height: 32px; color: var(--color-text-faint); margin-bottom: var(--space-3); }
.empty-state-icon {
display: block;
margin-bottom: var(--space-3);
color: var(--color-text-faint);
opacity: 0.55;
}
.empty-state-icon svg { width: 26px; height: 26px; margin: 0 auto; }
.empty-state-text {
margin: 0;
font-size: 13.5px;
color: var(--color-text-muted);
max-width: 42ch;
margin-inline: auto;
line-height: 1.5;
}
.empty-state-hint {
margin: 5px 0 0;
font-size: 12px;
color: var(--color-text-faint);
max-width: 42ch;
margin-inline: auto;
}
.page-load-error .btn { margin-top: var(--space-3); }
.spinner {
width: 22px;
height: 22px;
border: 2.5px solid var(--color-border);
border-top-color: var(--color-accent);
border-radius: 50%;
animation: spin 0.6s linear infinite;
margin: var(--space-6) auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
.spinner-sm { width: 16px; height: 16px; border-width: 2px; margin: var(--space-3) auto; }
.expand-col { width: 32px; }
.expand-chevron { display: inline-flex; color: var(--color-text-faint); transition: transform var(--dur-base) var(--ease); }
.expand-chevron svg { width: 14px; height: 14px; }
.expand-chevron.is-open { transform: rotate(180deg); color: var(--color-accent); }
.mobile-only-toggle { display: none; }
.is-expandable-row { cursor: pointer; }
.is-expandable-row:hover { background: var(--color-bg-alt); }
.is-expandable-row.is-expanded { background: var(--color-accent-soft); }
.datatable-expanded-row { background: var(--color-surface-2); }
.datatable-expanded-row:hover { background: var(--color-surface-2); }
.datatable-expanded-cell { padding: 0 !important; }
.datatable-expanded-grid {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--dur-slow) var(--ease);
}
.datatable-expanded-grid.is-open { grid-template-rows: 1fr; }
.datatable-expanded-inner {
overflow: hidden;
min-height: 0;
}
.datatable-expanded-content {
padding: var(--space-5) var(--space-5);
border-top: 1px solid var(--color-border);
}
.expand-panel { display: flex; flex-direction: column; gap: var(--space-4); }
.expand-panel-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--space-4);
}
.expand-panel-field { min-width: 0; }
.expand-panel-field-label {
font-size: var(--text-small);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-text-faint);
margin-bottom: 3px;
}
.expand-panel-field-value { font-size: var(--text-body); color: var(--color-text); overflow-wrap: break-word; }
.expand-panel-field-value.is-empty { color: var(--color-text-faint); }
.spinner-row-refresh {
display: inline-block; width: 9px; height: 9px; border-radius: 50%;
border: 1.5px solid var(--color-border); border-top-color: var(--color-accent);
animation: spin 0.6s linear infinite; margin-right: 5px; vertical-align: 0px;
}
.doc-totals-strip {
display: flex;
gap: var(--space-5);
padding: var(--space-3) var(--space-4);
background: var(--color-surface-2);
border-radius: var(--radius-sm);
}
.doc-totals-item { display: flex; flex-direction: column; gap: 2px; }
.doc-totals-item span { font-size: var(--text-small); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-faint); }
.doc-totals-item strong { font-size: var(--text-entity-title); }
.doc-totals-item.is-grand strong { color: var(--color-accent-strong); }
.doc-items-table tbody tr > td:first-child,
.doc-items-table thead tr > th:first-child {
overflow-wrap: anywhere;
white-space: normal;
}
.doc-items-table tr.doc-item-header td {
font-weight: 600;
font-size: var(--text-meta);
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--color-text-faint);
background: var(--color-surface-2);
padding-top: 8px;
padding-bottom: 8px;
}
.expand-panel-section {
background: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-4);
}
.expand-panel-section h3 {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-4) calc(var(--space-4) * -1);
padding: var(--space-3) var(--space-4);
display: flex;
align-items: center;
gap: 8px;
color: var(--color-accent-strong);
background: var(--color-accent-soft);
border-radius: var(--radius-md) var(--radius-md) 0 0;
border-bottom: 1px solid var(--color-border);
}
.expand-panel-section h3 svg { width: 14px; height: 14px; color: var(--color-accent); flex-shrink: 0; }
.pd-uebersicht { display: flex; flex-direction: column; gap: var(--space-3); }
.pd-termine { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.pd-termin {
background: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 8px 10px;
min-width: 0;
}
.pd-termin-lab {
font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
color: var(--color-text-faint); margin-bottom: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pd-termin-wert { font-size: 13px; font-weight: 600; line-height: 1.25; }
.pd-termin-zus { font-size: 11px; color: var(--color-text-muted); margin-top: 1px; }
.pd-termin.ist-nah { border-color: #f6d3a6; background: #fff8ec; }
.pd-termin.ist-nah .pd-termin-lab { color: #8a5a12; }
.pd-marken { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pd-marke {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11.5px; padding: 4px 10px; border-radius: var(--radius-full);
background: var(--color-bg-alt); color: var(--color-text-muted);
border: 0; text-decoration: none; max-width: 100%;
}
.pd-marke b { font-weight: 600; color: var(--color-text); }
.pd-marke svg { width: 12px; height: 12px; flex-shrink: 0; }
.pd-marke.ist-warn {
background: var(--color-danger-soft); color: var(--color-danger);
}
.pd-marke.ist-weg {
background: var(--color-accent-soft); color: var(--color-accent-strong); font-weight: 600;
cursor: pointer;
}
.pd-marke.ist-weg:hover { background: var(--color-accent); color: #fff; }
.pd-marke.ist-mehr {
background: none; border: 1px dashed var(--color-border-strong);
color: var(--color-text-muted); cursor: pointer;
}
.pd-marke.ist-mehr:hover { border-color: var(--color-accent); color: var(--color-accent); }
.pd-alle-felder { margin-top: var(--space-2); }
.pd-aktionen {
display: flex; flex-wrap: wrap; gap: 6px;
margin: var(--space-4) 0 0;
padding-top: var(--space-3);
border-top: 1px dashed var(--color-border);
}
.pd-akt {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 600; color: var(--color-text-muted);
background: var(--color-surface-2); border: 1px solid var(--color-border);
border-radius: var(--radius-sm); padding: 7px 11px; cursor: pointer;
transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease);
}
.pd-akt svg { width: 13px; height: 13px; color: var(--color-accent); }
.pd-akt:hover { border-color: var(--color-accent); color: var(--color-text); }
.pd-akt.ist-haupt {
background: var(--color-accent-soft);
border-color: var(--color-accent-soft); color: var(--color-accent-strong);
}
.pd-akt.ist-haupt svg { color: var(--color-accent-strong); }
.pd-akt.ist-haupt:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.pd-akt.ist-haupt:hover svg { color: #fff; }
.pd-akt.ist-offen { border-color: var(--color-accent); color: var(--color-text); }
.pd-abr-unter {
display: flex; flex-wrap: wrap; gap: 6px;
flex: 1 0 100%;
margin-top: var(--space-2); padding-left: var(--space-3);
border-left: 2px solid var(--color-border);
}
.pd-abr-unter[hidden] { display: none; }
.pd-akt-unter {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 600; color: var(--color-text-muted);
background: transparent; border: 1px solid var(--color-border);
border-radius: var(--radius-sm); padding: 6px 10px; text-decoration: none;
transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pd-akt-unter svg { width: 13px; height: 13px; color: var(--color-accent); }
.pd-akt-unter:hover { border-color: var(--color-accent); color: var(--color-text); }
.pd-raster { display: grid; grid-template-columns: 1fr; gap: var(--space-3); align-items: start; }
.pd-raster.hat-inhalt { margin-top: var(--space-4); }
.pd-spalte { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.pd-summe { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-bottom: var(--space-3); }
.pd-summe-lab {
font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
color: var(--color-text-faint);
}
.pd-summe-wert { font-size: 15px; font-weight: 600; }
.pd-summe-wert.ist-offen { color: #8a5a12; }
.pd-mehr {
align-self: flex-start;
margin-top: 4px;
background: none;
border: 0;
padding: 4px 2px;
font-size: 12px;
font-weight: 600;
color: var(--color-text-muted);
cursor: pointer;
}
.pd-mehr:hover { color: var(--color-accent); }
.asset-auge {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 0;
border-radius: var(--radius-sm);
background: none;
color: var(--color-text-faint);
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.asset-auge svg { width: 15px; height: 15px; }
.asset-auge:hover { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.modal-backdrop.is-asset-ansicht { align-items: center; }
.modal.is-asset-ansicht { max-width: min(1100px, 94vw); margin: auto; }
.asset-ansicht { padding: 0; }
.asset-ansicht-rahmen {
display: block;
width: 100%;
height: min(70vh, 820px);
border: 0;
border-radius: var(--radius-sm);
background: var(--color-bg-alt);
}
.asset-ansicht-bild {
display: block;
max-width: 100%;
max-height: min(70vh, 820px);
margin: 0 auto;
object-fit: contain;
}
.asset-ansicht-office {
height: min(72vh, 820px);
overflow: auto;
background: var(--color-bg-alt);
border-radius: var(--radius-sm);
padding: var(--space-3);
}
.office-laedt {
display: flex; align-items: center; justify-content: center; gap: var(--space-3);
height: 100%; color: var(--color-text-muted); font-size: 13px;
}
.office-laedt .spinner { margin: 0; }
.office-fehler { padding: var(--space-6); text-align: center; color: var(--color-text); }
.office-fehler-rat { color: var(--color-text-muted); font-size: 13px; margin-top: var(--space-2); }
.office-word { display: flex; justify-content: center; }
.office-word .docx-wrapper { background: transparent; padding: 0; }
.office-word .docx-wrapper > section.docx {
box-shadow: 0 1px 4px rgb(0 0 0 / 12%);
margin-bottom: var(--space-4);
max-width: 100%;
}
.office-blaetter { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--space-2); }
.office-blatt {
font-size: 12px; font-weight: 600; color: var(--color-text-muted);
background: var(--color-surface); border: 1px solid var(--color-border);
border-radius: var(--radius-sm); padding: 5px 10px; cursor: pointer;
}
.office-blatt.ist-an { color: var(--color-accent-strong); border-color: var(--color-accent); background: var(--color-accent-soft); }
.office-hinweis { font-size: 11.5px; color: var(--color-text-muted); margin: 0 0 var(--space-2); }
.office-tabelle { overflow: auto; background: var(--color-surface); border-radius: var(--radius-sm); }
.office-tabelle table { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 13px; }
.office-tabelle td, .office-tabelle th {
border: 1px solid var(--color-border); padding: 5px 9px; white-space: nowrap;
color: var(--color-text); text-align: left;
}
.office-tabelle tr:first-child td { font-weight: 600; background: var(--color-surface-2); position: sticky; top: 0; }
.asset-ansicht-office.ist-folien {
display: flex; flex-direction: column; justify-content: center;
overflow: hidden;
}
.office-folie {
display: block; width: auto; height: auto;
max-width: 100%; max-height: calc(100% - 56px);
margin: 0 auto; object-fit: contain;
background: #fff; border-radius: var(--radius-sm);
box-shadow: 0 1px 4px rgb(0 0 0 / 12%);
}
.office-leiste {
display: flex; align-items: center; justify-content: center; gap: var(--space-3);
margin-top: var(--space-3);
}
.office-zaehler { font-size: 12px; font-weight: 600; color: var(--color-text-muted); min-width: 64px; text-align: center; }
.office-blaettern {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; cursor: pointer;
background: var(--color-surface); border: 1px solid var(--color-border);
border-radius: var(--radius-sm); color: var(--color-text-muted);
}
.office-blaettern:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-text); }
.office-blaettern:disabled { opacity: 0.4; cursor: default; }
.office-blaettern svg { width: 16px; height: 16px; }
.asset-ansicht-film {
display: block;
width: 100%;
max-height: min(70vh, 820px);
background: #000;
border-radius: var(--radius-sm);
}
.asset-ansicht-ton {
display: block;
width: 100%;
margin: var(--space-4) 0;
}
.pd-widget.ist-angeflogen {
box-shadow: 0 0 0 2px var(--color-accent), var(--shadow-md);
transition: box-shadow var(--dur-slow, 320ms) var(--ease);
}
.expand-panel-subsection { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px dashed var(--color-border); }
.expand-panel-subsection h4 {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-text-faint);
margin: 0 0 var(--space-3) 0;
display: flex;
align-items: center;
gap: 6px;
}
.expand-panel-subsection h4 svg { width: 13px; height: 13px; color: var(--color-text-faint); }
.client-contacts-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-3); }
.client-contact-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 7px 10px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 12.5px;
}
.expand-documents-list { display: flex; flex-direction: column; gap: 6px; }
.expand-documents-row {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 12.5px;
cursor: pointer;
}
.expand-documents-row:hover { border-color: var(--color-accent); }
.expand-documents-row svg { width: 14px; height: 14px; color: var(--color-text-faint); flex-shrink: 0; }
.asset-vorschau {
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
}
.asset-vorschau img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset-vorschau.ist-typ {
border: 0;
color: #fff;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.03em;
}
.asset-vorschau.ist-gross {
width: 100%;
height: 104px;
border-radius: 0;
border: 0;
}
.asset-vorschau.ist-gross.ist-typ { font-size: 15px; letter-spacing: 0.04em; }
.asset-vorschau.ist-pdf { background: #c05252; }
.asset-vorschau.ist-doc { background: #3a6ea5; }
.asset-vorschau.ist-xls { background: #3f8f5f; }
.asset-vorschau.ist-audio { background: #7a5ca8; }
.asset-vorschau.ist-video { background: #2f3b4a; }
.asset-vorschau.ist-archiv { background: #7c7160; }
.asset-vorschau.ist-design { background: #b7791f; }
.asset-vorschau.ist-bild,
.asset-vorschau.ist-sonst { background: var(--color-text-faint); }
.asset-notiz {
display: flex;
align-items: flex-start;
gap: 5px;
margin-top: 3px;
font-size: 12px;
line-height: 1.4;
color: var(--color-text-muted);
}
.asset-notiz svg {
width: 12px !important;
height: 12px !important;
margin-top: 2px;
opacity: 0.7;
}
.asset-abschnitt-kopf {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.expand-panel-section > .asset-abschnitt-kopf {
margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-4);
padding: var(--space-3) var(--space-4);
background: var(--color-accent-soft);
border-radius: var(--radius-md) var(--radius-md) 0 0;
border-bottom: 1px solid var(--color-border);
}
.expand-panel-section > .asset-abschnitt-kopf > h3 {
margin: 0;
padding: 0;
background: none;
border-bottom: 0;
border-radius: 0;
}
.asset-abschnitt-kopf h3 { margin: 0; }
.asset-umschalter {
display: flex;
background: var(--color-bg-alt);
border-radius: var(--radius-sm);
padding: 2px;
flex-shrink: 0;
}
.asset-umschalter-knopf {
border: 0;
background: none;
padding: 4px 9px;
border-radius: 6px;
cursor: pointer;
color: var(--color-text-muted);
display: flex;
align-items: center;
}
.asset-umschalter-knopf svg { width: 15px; height: 15px; }
.asset-umschalter-knopf:hover { color: var(--color-text); }
.asset-umschalter-knopf.ist-an {
background: var(--color-surface);
color: var(--color-text);
box-shadow: 0 1px 2px rgba(17, 21, 28, 0.10);
}
.asset-raster {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
}
.asset-kachel {
position: relative;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
background: var(--color-surface);
cursor: pointer;
}
.asset-kachel:hover { border-color: var(--color-accent); }
.asset-kachel-bild { background: var(--color-bg-alt); }
.asset-kachel-fuss { padding: 8px 10px; }
.asset-kachel-name {
font-size: 12.5px;
font-weight: 650;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.asset-kachel-meta {
font-size: var(--text-meta);
color: var(--color-text-muted);
margin-top: 1px;
}
.asset-kachel-tasten {
position: absolute;
top: 6px;
right: 6px;
display: flex;
gap: 4px;
opacity: 0;
transition: opacity 0.12s ease;
}
.asset-kachel:hover .asset-kachel-tasten { opacity: 1; }
.asset-kachel-taste {
width: 24px;
height: 24px;
border: 0;
border-radius: 50%;
background: rgba(17, 21, 28, 0.62);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.asset-kachel-taste:hover { background: rgba(17, 21, 28, 0.82); }
.asset-kachel-taste svg { width: 13px !important; height: 13px !important; color: #fff !important; }
.asset-lupe {
position: fixed;
top: 0;
left: 0;
z-index: 300;
padding: 6px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: 0 12px 34px rgba(17, 21, 28, 0.20);
pointer-events: none;
opacity: 0;
transition: opacity 0.12s ease;
visibility: hidden;
}
.asset-lupe.ist-da { opacity: 1; visibility: visible; }
.asset-lupe-bild {
display: block;
max-width: 44vmin;
max-height: 44vmin;
border-radius: var(--radius-sm);
}
.asset-dialog-datei { margin-top: 0 !important; }
.pd-mail-attach-list { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow-y: auto; }
.pd-mail-attach-row { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: var(--radius-sm); cursor: pointer; }
.pd-mail-attach-row:hover { background: var(--color-bg-alt); }
.pd-mail-attach-row svg { width: 16px; height: 16px; color: var(--color-text-faint); flex-shrink: 0; }
.pd-mail-attach-row.is-select-all { font-weight: 600; border-bottom: 1px solid var(--color-border); border-radius: 0; margin-bottom: 4px; padding-bottom: 10px; }
.pd-simple-row-note {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
flex-shrink: 0;
border: none;
background: transparent;
border-radius: 50%;
color: var(--color-text-faint);
cursor: pointer;
opacity: 0.55;
transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.pd-simple-row-note svg { width: 13px; height: 13px; }
.pd-simple-row:hover .pd-simple-row-note,
.pd-simple-row-note:focus-visible { opacity: 1; }
.pd-simple-row-note.has-note,
.pd-simple-row-note.is-client-shared { opacity: 1; color: var(--color-accent); }
.pd-simple-row-note:hover { opacity: 1; color: var(--color-accent); background: var(--color-bg-alt); }
.pd-mail-note { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--color-text-muted); font-style: italic; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-mail-note svg { width: 12px; height: 12px; flex-shrink: 0; }
.pd-voice-recorder { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 0 6px; }
.pd-voice-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-muted); }
.pd-voice-rec-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--color-danger);
animation: pd-voice-pulse 1.4s ease-in-out infinite;
}
@keyframes pd-voice-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.8); }
}
.pd-voice-timer { font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: 34px; font-weight: 600; letter-spacing: 0.02em; }
.pd-voicenote-list { display: flex; flex-direction: column; gap: 10px; }
.pd-voicenote-row { padding: 10px 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.pd-voicenote-row:hover .pd-simple-row-note,
.pd-voicenote-row:hover .pd-simple-row-delete { opacity: 1; }
.pd-voicenote-head { display: flex; align-items: center; gap: 8px; }
.pd-voicenote-head > svg { width: 15px; height: 15px; color: var(--color-text-faint); flex-shrink: 0; }
.pd-voicenote-meta { flex: 1; min-width: 0; font-size: 12px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-voicenote-audio { width: 100%; height: 32px; margin-top: 8px; }
.pd-voicenote-transcript { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--color-text); }
.pd-voicenote-transcript.is-empty { color: var(--color-text-faint); font-style: italic; }
.expand-documents-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.expand-documents-sub { font-size: 11px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.expand-documents-origin { font-size: 10.5px; font-weight: 400; color: var(--color-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.expand-todo-list { display: flex; flex-direction: column; gap: 6px; }
.expand-todo-row {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 12.5px;
}
.expand-todo-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.expand-todo-due { color: var(--color-text-muted); font-size: var(--text-meta); flex-shrink: 0; }
.expand-todo-due.is-overdue { color: var(--color-danger); font-weight: 600; }
.expand-todo-row.ist-erledigt { opacity: 0.45; }
.expand-todo-row.ist-klickbar { cursor: pointer; }
.expand-todo-row.ist-klickbar:hover { border-color: var(--color-border-strong); background: var(--color-surface-2); }
.expand-todo-row.ist-klickbar:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.expand-todo-row.ist-erledigt .expand-todo-title { text-decoration: line-through; }
.expand-todo-row.ist-erledigt .kanban-card-check {
border-color: var(--color-accent);
background: var(--color-accent);
color: #fff;
}
.expand-todo-stapel { display: inline-flex; flex-shrink: 0; }
.expand-todo-stapel .expand-todo-assignee { margin-left: -7px; box-shadow: 0 0 0 2px var(--color-surface); }
.expand-todo-stapel .expand-todo-assignee:first-child { margin-left: 0; }
.expand-todo-assignee.ist-mehr { background: var(--color-bg-alt); color: var(--color-text-muted); }
.expand-todo-assignee {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--color-accent-soft);
color: var(--color-accent-strong);
font-size: 10px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.beleg-festwert {
display: flex; align-items: center;
min-height: 38px; padding: 0 10px;
border: 1px solid var(--color-border); border-radius: var(--radius-sm);
background: var(--color-bg-subtle, var(--color-bg));
color: var(--color-text-muted); font-size: 13px;
}
.zeit-vorschau { display: flex; flex-direction: column; }
.zeit-vorschau-zeile {
display: flex; justify-content: space-between; gap: var(--space-4);
padding: 6px 0; border-bottom: 1px solid var(--color-border);
}
.zeit-vorschau-text { font-size: 13.5px; }
.zeit-vorschau-arbeiten { margin: 4px 0 4px; padding-left: 16px; font-size: 12.5px; color: var(--color-text-muted); }
.zeit-vorschau-betrag { font-variant-numeric: tabular-nums; white-space: nowrap; }
.zeit-vorschau-summe {
display: flex; justify-content: space-between;
padding-top: 10px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.zeit-vorschau-warnung {
color: var(--color-danger); font-size: 12.5px; margin-top: var(--space-3);
}
.fahrt-hinweis {
margin: var(--space-3) 0 0; font-size: 12.5px; color: var(--color-text-muted);
}
.fahrt-form .field-checkbox.is-disabled { color: var(--color-text-faint); }
.fahrt-satz { font-variant-numeric: tabular-nums; }
.fahrt-liste {
max-height: 260px; overflow-y: auto;
border: 1px solid var(--color-border); border-radius: var(--radius-sm);
padding: 0 var(--space-3);
}
.fahrt-wahl {
display: flex; align-items: center; gap: var(--space-3);
padding: 8px 0; border-bottom: 1px solid var(--color-border); cursor: pointer;
}
.fahrt-wahl:last-child { border-bottom: none; }
.fahrt-wahl input { flex: none; accent-color: var(--color-accent); }
.fahrt-positionen-titel {
margin-top: var(--space-4); font-size: 11px; font-weight: 600; letter-spacing: .06em;
text-transform: uppercase; color: var(--color-text-muted);
}
.pd-fahrt-summe {
display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px var(--space-3);
margin-top: var(--space-3); padding-top: var(--space-2);
border-top: 1px solid var(--color-border);
font-size: 12.5px; color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}
.zeit-auflistung { display: flex; flex-direction: column; gap: var(--space-4); }
.zeit-block { display: flex; flex-direction: column; gap: 6px; }
.zeit-block-kopf {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--space-3); padding-bottom: 2px;
}
.zeit-block-titel {
font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
color: var(--color-text-muted);
}
.zeit-block-summe {
display: flex; gap: var(--space-3); align-items: baseline;
font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.zeit-block-euro { color: var(--color-text-muted); }
.zeit-block.ist-gedaempft { opacity: .72; }
.zeit-gruppe { border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
.zeit-gruppe-kopf {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 8px 10px; background: none; border: 0; cursor: pointer;
font-size: 12.5px; color: var(--color-text); text-align: left;
}
.zeit-gruppe-kopf:hover { background: var(--color-surface-hover, rgba(0,0,0,.03)); }
.zeit-gruppe-pfeil { display: inline-flex; flex: 0 0 auto; transition: transform .15s ease; }
.zeit-gruppe-pfeil svg { width: 15px; height: 15px; }
.zeit-gruppe.ist-offen .zeit-gruppe-pfeil { transform: rotate(180deg); }
.zeit-gruppe-titel { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeit-gruppe-anzahl { flex: 0 0 auto; color: var(--color-text-muted); font-size: 11.5px; }
.zeit-gruppe-dauer,
.zeit-gruppe-betrag { flex: 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.zeit-gruppe-betrag { min-width: 84px; text-align: right; }
.zeit-gruppe-dauer { min-width: 62px; text-align: right; }
.zeit-eintraege {
display: grid; max-height: 0; overflow: hidden;
transition: max-height .18s ease;
}
.zeit-gruppe.ist-offen .zeit-eintraege { max-height: 2000px; }
.zeit-eintrag {
display: flex; align-items: baseline; gap: 10px;
padding: 6px 10px 6px 33px; border-top: 1px solid var(--color-border);
font-size: 12px;
}
.zeit-datum { flex: 0 0 auto; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.zeit-taetigkeit {
flex: 0 0 auto; padding: 1px 7px; border-radius: 999px;
background: var(--color-bg); border: 1px solid var(--color-border);
font-size: 11px; color: var(--color-text-muted); white-space: nowrap;
}
.zeit-text {
flex: 1 1 auto; min-width: 0; color: var(--color-text); font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zeit-dauer { flex: 0 0 auto; min-width: 62px; text-align: right; font-variant-numeric: tabular-nums; }
.zeit-betrag { flex: 0 0 auto; min-width: 84px; text-align: right; font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.zeit-betrag.ohne-satz { font-variant-numeric: normal; font-style: italic; color: var(--color-text-faint); }
.zeit-eintraege.ist-flach {
max-height: none;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
}
.zeit-eintraege.ist-flach .zeit-eintrag { padding-left: 10px; }
.zeit-stift, .zeit-stift-platz { flex: 0 0 26px; width: 26px; }
.zeit-stift {
height: 24px; margin: -4px 0; padding: 0; border: 0; border-radius: var(--radius-sm);
background: none; color: var(--color-text-faint); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; align-self: center;
}
.zeit-stift svg { width: 14px; height: 14px; }
.zeit-stift:hover, .zeit-stift:focus-visible { background: var(--color-bg-alt); color: var(--color-text); }
.zeit-eintraege.ist-flach .zeit-eintrag:first-child { border-top: 0; }
@media (max-width: 720px) {
.zeit-eintrag { flex-wrap: wrap; padding-left: 12px; }
.zeit-text { flex: 1 1 100%; order: 3; }
.zeit-dauer { margin-left: auto; }
}
.expand-fastbill-list { display: flex; flex-direction: column; gap: 6px; }
.expand-fastbill-row {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 10px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 12.5px;
flex-wrap: wrap;
}
.expand-fastbill-date { color: var(--color-text-muted); }
.expand-fastbill-nr {
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--color-tone-blue);
white-space: nowrap;
}
.expand-fastbill-total { font-weight: 600; margin-left: auto; }
.expand-fastbill-link { color: var(--color-accent); text-decoration: none; }
.expand-fastbill-link:hover { text-decoration: underline; }
.expand-fastbill-link.is-empty { color: var(--color-text-faint); }
.expand-fastbill-by {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--color-accent-soft);
color: var(--color-accent-strong);
font-size: 10px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.billing-items-table { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-3); }
.billing-item-header, .billing-item-row {
display: grid;
grid-template-columns: 18px 74px 84px 84px minmax(160px, 1fr) 96px 68px 84px 28px;
gap: 6px;
align-items: start;
}
.billing-item-header {
align-items: center;
font-size: var(--text-small);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-text-faint);
padding: 0 2px;
}
.billing-item-row input { width: 100%; }
.billing-item-row textarea {
width: 100%;
height: 38px;
min-height: 38px;
resize: none;
overflow-y: auto;
font-family: inherit;
font-size: 13.5px;
line-height: 1.3;
}
.billing-item-bez { position: relative; min-width: 0; }
.billing-item-bez::before {
content: "·";
position: absolute;
left: 9px;
top: 10px;
font-size: 13.5px;
line-height: 1.3;
color: var(--color-text-faint);
pointer-events: none;
}
.billing-item-bez textarea { padding-left: 18px; }
.billing-item-row-vat { display: flex; align-items: center; gap: 3px; }
.billing-item-row-vat::after { content: "%"; color: var(--color-text-muted); font-size: var(--text-meta); }
.billing-items-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.billing-item-grip {
cursor: grab;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-faint);
touch-action: none;
align-self: center;
}
.billing-item-row > button { align-self: center; }
.billing-item-grip:active { cursor: grabbing; }
.billing-item-row.is-dragging { opacity: 0.4; }
.billing-item-row.is-dragover { box-shadow: inset 0 2px 0 var(--color-accent); }
.billing-item-row.is-group {
background: var(--color-accent-soft);
border-left: 3px solid var(--color-accent);
border-radius: 6px;
padding: 6px 6px 6px 3px;
margin: 14px 0 4px;
}
.billing-items-table > .billing-item-row.is-group:first-child { margin-top: 2px; }
.billing-group-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.billing-group-main input { flex: 1; min-width: 0; }
.billing-group-sum {
flex: none;
font-size: 12.5px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--color-accent-strong, var(--color-text));
padding-left: 8px;
white-space: nowrap;
}
.billing-group-badge {
flex: none;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: var(--radius-full);
background: var(--color-accent-strong);
color: var(--color-accent-soft);
white-space: nowrap;
}
.billing-item-row.is-group input {
border: none;
background: transparent;
font-weight: 600;
font-size: 13.5px;
color: var(--color-accent-strong, var(--color-text));
padding-left: 2px;
}
.billing-item-row.is-group input::placeholder { color: var(--color-text-faint); font-weight: 500; }
.billing-totals {
display: flex;
flex-direction: column;
gap: 3px;
margin: 4px 0 var(--space-3);
padding: 8px 10px;
background: var(--color-bg-subtle);
border-radius: 8px;
font-size: 12.5px;
}
.billing-totals-row { display: flex; justify-content: space-between; gap: var(--space-3); }
.billing-totals-row.is-grand {
font-weight: 600;
font-size: 13.5px;
margin-top: 3px;
padding-top: 5px;
border-top: 1px dashed var(--color-border);
}
.billing-group-subtotals {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 3px;
padding-bottom: 5px;
border-bottom: 1px dashed var(--color-border);
}
.billing-totals-row.billing-group-subtotal { color: var(--color-text-muted); font-size: var(--text-meta); }
.import-log {
font-size: 12px;
font-family: var(--font-mono, ui-monospace, monospace);
max-height: 240px;
overflow-y: auto;
background: var(--color-bg-subtle);
border-radius: 8px;
padding: 10px 12px;
margin-top: 8px;
white-space: pre-line;
color: var(--color-text-muted);
}
.catalog-group { margin-bottom: var(--space-5); }
.catalog-group:last-child { margin-bottom: 0; }
.catalog-group-header {
font-size: 12px;
color: var(--color-accent-strong);
background: var(--color-accent-soft);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
margin-bottom: var(--space-3);
cursor: default;
}
.catalog-group-links { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; }
.catalog-group-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.catalog-group-name {
font-size: 12.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-accent-strong);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.catalog-group-zahlen {
display: flex;
align-items: baseline;
gap: 6px;
font-size: 11.5px;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
color: var(--color-accent-strong);
opacity: 0.78;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.catalog-group-header .table-actions { flex: none; }
.catalog-group-punkt { opacity: 0.55; }
.catalog-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--text-body); }
.catalog-table th {
text-align: left;
font-size: var(--text-small);
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-text-faint);
padding: 4px 10px;
font-weight: 600;
}
.catalog-table td { padding: 4px 10px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.catalog-table tr:last-child td { border-bottom: none; }
.catalog-table th.text-right, .catalog-table td.text-right { text-align: right; }
.catalog-grip-cell { width: 26px; padding-left: 4px !important; padding-right: 0 !important; }
.catalog-grip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
color: var(--color-text-faint);
cursor: grab;
border-radius: var(--radius-sm);
}
.catalog-grip:hover { color: var(--color-text-muted); background: var(--color-surface-hover); }
.catalog-grip svg { width: 15px; height: 15px; }
.catalog-row.is-dragging, .catalog-group-header.is-dragging { opacity: 0.4; }
.catalog-row.is-dragover { box-shadow: inset 0 2px 0 var(--color-accent); }
.catalog-group-header.is-dragover { box-shadow: inset 0 0 0 2px var(--color-accent); }
.catalog-group-dropzone { height: 10px; }
.catalog-group-dropzone.is-dragover { height: 26px; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 2px var(--color-accent); background: var(--color-accent-soft); }
.catalog-group-collapse {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--dur-slow) var(--ease);
}
.catalog-group-collapse.is-open { grid-template-rows: 1fr; }
.catalog-group-collapse-inner { overflow: hidden; min-height: 0; }
.catalog-chevron { display: inline-flex; flex-shrink: 0; color: var(--color-text-faint); }
.catalog-chevron svg { width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease); }
.catalog-chevron.is-collapsed svg { transform: rotate(-90deg); }
.catalog-inline-input {
width: 100%;
border: 1px solid transparent;
background: transparent;
font: inherit;
color: inherit;
padding: 2px 4px;
border-radius: var(--radius-sm);
}
.catalog-num-cell { display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px; white-space: nowrap; }
.catalog-num-cell .catalog-inline-input { width: 56px; text-align: right; flex: none; }
.catalog-num-cell > span { color: var(--color-text-faint); font-size: 12px; }
select.catalog-inline-input {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.catalog-num-cell select.catalog-inline-input {
width: auto;
min-width: 0;
padding-right: 2px;
text-align: right;
text-align-last: right;
}
.catalog-inline-input:hover { background: var(--color-surface-hover); }
.catalog-inline-input:focus {
outline: none;
border-color: var(--color-accent);
background: var(--color-bg);
}
td.text-right .catalog-inline-input { text-align: right; }
.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.no-spinner[type='number'] { -moz-appearance: textfield; appearance: textfield; }
.expand-approval-occurrence {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
color: var(--color-text-muted);
font-size: 10px;
font-weight: 600;
}
.expand-approval-list { position: relative; padding: 4px 4px 4px 34px; margin-bottom: var(--space-3); }
.expand-approval-line { position: absolute; left: 15px; top: 14px; bottom: 14px; width: 2px; background: var(--color-border); }
.expand-approval-row { position: relative; padding-bottom: 16px; }
.expand-approval-row:last-child { padding-bottom: 0; }
.expand-approval-icon {
position: absolute;
left: -34px;
top: 0;
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--color-surface);
box-shadow: 0 0 0 1px var(--color-border);
}
.expand-approval-icon svg { width: 13px; height: 13px; }
.expand-approval-icon.tone-accent { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.expand-approval-icon.tone-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.expand-approval-icon.tone-success { background: var(--color-success-soft); color: var(--color-success); }
.expand-approval-icon.tone-neutral { background: var(--color-bg-alt); color: var(--color-text-muted); }
.expand-approval-body { flex: 1; min-width: 0; }
.expand-approval-toprow { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.expand-approval-top { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12.5px; }
.expand-approval-kind { font-weight: 600; color: var(--color-text); }
.expand-approval-time { color: var(--color-text-faint); font-size: 11.5px; }
.expand-approval-by {
flex-shrink: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-bg-alt);
color: var(--color-text-muted);
font-size: 9.5px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.expand-approval-actions { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; margin-left: auto; }
.expand-approval-note { margin-top: 4px; font-size: 12.5px; color: var(--color-text-muted); overflow-wrap: break-word; }
.expand-approval-count {
font-weight: 600;
font-size: 11px;
padding: 1px 7px;
border-radius: 999px;
line-height: 1.5;
background: var(--color-accent-soft);
color: var(--color-accent-strong);
}
.expand-approval-toggle svg { transition: transform var(--dur-fast) var(--ease); }
.expand-approval-toggle.is-expanded svg { transform: rotate(180deg); }
.expand-approval-subgroup { margin-top: 6px; padding-left: 14px; border-left: 2px solid var(--color-border); display: flex; flex-direction: column; gap: 12px; }
.expand-approval-subgroup .expand-approval-row { padding-bottom: 0; }
.expand-approval-form {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.75fr);
align-items: center;
gap: 8px;
padding-top: var(--space-3);
border-top: 1px dashed var(--color-border);
}
.expand-approval-form .approval-f-note { grid-column: 1 / 3; }
.expand-approval-form .approval-f-add { grid-column: 3 / 4; justify-content: center; }
@media (max-width: 520px) {
.expand-approval-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.expand-approval-form .approval-f-kind { grid-column: 1 / -1; }
.expand-approval-form .approval-f-note { grid-column: 1 / -1; }
.expand-approval-form .approval-f-add { grid-column: 1 / -1; }
}
.expand-approval-form select,
.expand-approval-form input[type="date"],
.expand-approval-form input[type="time"],
.expand-approval-form input[type="text"],
.expand-approval-form .approval-f-add {
box-sizing: border-box;
height: 34px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
font-size: 12.5px;
font-family: inherit;
padding: 0 9px;
background: var(--color-surface-2);
color: var(--color-text);
transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.expand-approval-form select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 30px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239598ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 9px center;
background-size: 13px 13px;
cursor: pointer;
}
.expand-approval-form input[type="date"],
.expand-approval-form input[type="time"] {
-webkit-appearance: none;
appearance: none;
text-align: left;
min-width: 0;
max-width: 100%;
}
.expand-approval-form select:hover,
.expand-approval-form input[type="date"]:hover,
.expand-approval-form input[type="time"]:hover,
.expand-approval-form input[type="text"]:hover {
border-color: var(--color-accent);
}
.expand-approval-form select:focus,
.expand-approval-form input[type="date"]:focus,
.expand-approval-form input[type="time"]:focus,
.expand-approval-form input[type="text"]:focus {
outline: none;
border-color: var(--color-accent);
background-color: var(--color-surface);
box-shadow: var(--shadow-glow);
}
.expand-item-groups { display: flex; flex-direction: column; gap: 14px; }
.expand-item-group-header {
font-size: var(--text-small);
font-weight: 600;
letter-spacing: 0.03em;
color: var(--color-text-faint);
margin-bottom: 6px;
}
.expand-item-list { display: flex; flex-direction: column; gap: 6px; }
.expand-item-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 7px 10px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 12.5px;
}
.expand-item-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.expand-item-name-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.expand-item-client-note {
display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: var(--text-meta); font-style: italic;
color: var(--color-text-muted); white-space: normal;
}
.expand-item-client-note svg { width: 12px; height: 12px; flex-shrink: 0; }
.is-resolved-note { color: var(--color-text-faint); text-decoration: line-through; text-decoration-color: var(--color-border-strong); }
.expand-panel-field-value span.is-empty { color: var(--color-text-faint); }
.expand-item-status { flex-shrink: 0; display: flex; gap: 6px; }
.expand-item-block:has(.expand-item-kit-contents) .expand-item-row {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.expand-item-kit-contents {
padding: 6px 10px 8px;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-top: none;
border-bottom-left-radius: var(--radius-sm);
border-bottom-right-radius: var(--radius-sm);
font-size: 11px;
color: var(--color-text-faint);
}
.expand-item-kit-contents-label { font-weight: 600; color: var(--color-text-muted); margin-bottom: 2px; }
.expand-item-kit-contents-list { margin: 0; padding-left: 16px; list-style: disc; }
.expand-item-kit-contents-list li { padding: 1px 0; }
.tabs { display: flex; gap: var(--space-2); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-4); }
.tab {
padding: var(--space-2) var(--space-3);
font-weight: 600;
color: var(--color-text-muted);
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color var(--dur-fast) var(--ease);
}
.tab.active { color: var(--color-accent); border-color: var(--color-accent); }
.year-pills { display: flex; gap: 6px; margin-bottom: var(--space-4); }
.year-pill {
padding: 7px 15px;
border-radius: var(--radius-full);
font-weight: 600;
font-size: 12.5px;
background: var(--color-surface);
border: 1px solid var(--color-border-strong);
color: var(--color-text-muted);
transition: all var(--dur-fast) var(--ease);
}
.year-pill:hover { border-color: var(--color-accent); color: var(--color-accent); }
.year-pill.active {
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-2) 130%);
border-color: transparent;
color: #fff;
box-shadow: 0 6px 14px -4px rgba(10, 107, 79, 0.38);
}
.kanban-board {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-4);
align-items: stretch;
min-height: calc(100vh - 260px);
}
.kanban-board.kanban-board-single { grid-template-columns: 1fr; max-width: 640px; }
.kanban-column {
container-type: inline-size;
min-width: 0;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-top: 3px solid var(--kanban-accent, var(--color-border-strong));
border-radius: var(--radius-lg);
padding: var(--space-3);
display: flex;
flex-direction: column;
box-shadow: var(--shadow-sm);
}
.kanban-column-eigene { --kanban-accent: var(--color-accent); }
.kanban-column-team { --kanban-accent: var(--color-accent-2); }
.kanban-column-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-2) var(--space-2) var(--space-3);
font-weight: 600;
font-size: 13.5px;
color: var(--color-text);
}
.kanban-column-count {
background: var(--color-bg-alt);
border: 1px solid var(--color-border-strong);
color: var(--color-text-muted);
font-size: var(--text-meta);
font-weight: 600;
padding: 1px 8px;
border-radius: var(--radius-full);
}
.kanban-column-body {
display: flex;
flex-direction: column;
gap: var(--space-2);
flex: 1;
min-height: 40px;
overflow-y: auto;
padding-right: 2px;
}
.kanban-column-empty {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--color-text-faint);
font-size: 12.5px;
padding: var(--space-4) 0;
}
.kanban-column-body.kanban-column-body-grouped { overflow-y: visible; }
.todo-group { margin-bottom: var(--space-3); }
.todo-group:last-child { margin-bottom: 0; }
.todo-group-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
padding: 6px 4px 8px;
}
.todo-group-name {
display: flex;
align-items: center;
gap: 7px;
font-size: 13.5px;
font-weight: 600;
}
.todo-group-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.todo-group-empty {
font-size: 12px;
color: var(--color-text-faint);
padding: var(--space-2) 4px var(--space-3);
}
.kanban-column-body-grouped > .kanban-column-body { flex: 0 0 auto; overflow-y: visible; }
.todo-privat-block {
margin-top: var(--space-4);
padding-top: var(--space-2);
border-top: 1px solid var(--color-border);
}
.todo-privat-kopf {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
padding: 4px 4px 8px;
}
.todo-privat-marke {
display: flex;
align-items: center;
gap: 7px;
font-size: 13.5px;
font-weight: 600;
color: var(--color-text-muted);
}
.todo-privat-marke svg { width: 13px; height: 13px; }
.todo-done-strip-wrap:empty { display: none; }
.todo-done-strip {
margin-top: var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.todo-done-strip-toggle {
width: 100%;
display: flex;
align-items: center;
gap: 6px;
padding: var(--space-3);
background: none;
border: none;
cursor: pointer;
font-size: var(--text-body);
font-weight: 600;
color: var(--color-text-muted);
text-align: left;
}
.todo-done-strip-toggle:hover { color: var(--color-text); }
.todo-done-strip-toggle svg { width: 14px; height: 14px; }
.todo-done-strip-body {
display: flex;
flex-direction: column;
padding: 0 var(--space-3) var(--space-3);
}
.todo-done-row {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) 0;
border-top: 1px solid var(--color-border);
}
.todo-done-row-title {
flex: 1;
min-width: 0;
font-size: var(--text-body);
color: var(--color-text-muted);
text-decoration: line-through;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.todo-done-row .kanban-card-delete { opacity: 0.5; }
.todo-done-row:hover .kanban-card-delete { opacity: 1; }
.kanban-card {
background: transparent;
border: 0;
border-bottom: 1px solid var(--color-border-soft, var(--color-border));
border-radius: var(--radius-sm);
padding: 6px 8px;
cursor: grab;
transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.kanban-card:hover { background: var(--color-bg-alt); }
.kanban-card:last-child { border-bottom: 0; }
.todo-zeile-haupt {
display: flex;
align-items: center;
gap: 8px;
min-height: 22px;
}
.todo-zeile-mitte {
flex: 1;
min-width: 0;
display: flex;
align-items: baseline;
gap: 8px;
}
.todo-zeile-prod { display: contents; }
.todo-zeile-titel {
font-size: 13.5px;
font-weight: 500;
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kanban-card.is-done .todo-zeile-titel { text-decoration: line-through; color: var(--color-text-muted); }
.todo-zeile-datum {
flex: none;
text-align: right;
font-size: 11.5px;
color: var(--color-text-faint);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.todo-zeile-datum.is-overdue { color: var(--color-danger); font-weight: 600; }
.todo-zeile-datum.is-leer { color: transparent; }
.todo-zeile-inhalt {
margin: 2px 0 0 74px;
font-size: 11.5px;
line-height: 1.45;
color: var(--color-text-muted);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
overflow-wrap: anywhere;
white-space: pre-line;
}
.todo-prio-punkt {
flex: none;
width: 8px;
height: 8px;
border-radius: 50%;
display: block;
}
.todo-checklist-badge {
flex: none;
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: var(--color-text-faint);
font-variant-numeric: tabular-nums;
}
.todo-checklist-badge svg { width: 12px; height: 12px; }
.todo-repeat-badge {
flex: none;
display: inline-flex;
align-items: center;
color: var(--color-text-faint);
}
.todo-repeat-badge svg { width: 12px; height: 12px; }
.todo-privat-badge {
flex: none;
display: inline-flex;
align-items: center;
color: var(--color-accent);
}
.todo-privat-badge svg { width: 12px; height: 12px; }
.todo-privat-feld {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
cursor: pointer;
}
.todo-privat-feld input { width: auto; margin: 0; }
.todo-privat-feld span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-small); }
.todo-privat-feld svg { width: 14px; height: 14px; }
.field.ist-gesperrt { opacity: 0.45; pointer-events: none; }
.todo-repeat-hinweis {
margin: -4px 0 0;
font-size: 12px;
line-height: 1.4;
color: var(--color-text-muted);
}
.todo-repeat-hinweis[hidden] { display: none; }
.todo-zeile-wer {
flex: none;
width: 33px;
display: inline-flex;
align-items: center;
justify-content: flex-end;
}
.todo-assignee-stapel {
flex: none;
display: inline-flex;
align-items: center;
}
.todo-assignee-plus {
flex: none;
display: inline-flex;
align-items: center;
margin-right: 3px;
color: var(--color-text-muted);
}
.todo-assignee-plus svg {
width: 9px;
height: 9px;
stroke-width: 3.2;
}
.todo-assignee-stapel .todo-assignee {
margin-left: -7px;
box-shadow: 0 0 0 2px var(--color-surface);
}
.todo-assignee-stapel .todo-assignee:first-child { margin-left: 0; }
.todo-assignee-stapel .todo-assignee-plus + .todo-assignee { margin-left: 0; }
.todo-assignee.ist-mehr {
background: var(--color-bg-subtle, #eef1f5);
color: var(--color-text-muted);
}
.todo-assignee.is-leer {
background: transparent;
color: var(--color-text-faint);
box-shadow: inset 0 0 0 1px var(--color-border);
}
.kanban-card .kanban-card-delete { opacity: 0; flex: none; }
.kanban-card:hover .kanban-card-delete,
.kanban-card .kanban-card-delete:focus-visible { opacity: 1; }
.todo-gruppierung {
display: flex;
gap: 2px;
margin-left: 12px;
padding: 2px;
background: var(--color-bg-alt);
border-radius: var(--radius-full);
}
.todo-gruppierung-knopf {
border: 0;
background: transparent;
color: var(--color-text-muted);
font-size: 11.5px;
font-weight: 500;
font-family: inherit;
padding: 3px 10px;
border-radius: var(--radius-full);
cursor: pointer;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.todo-gruppierung-knopf:hover { color: var(--color-text); }
.todo-gruppierung-knopf.is-aktiv {
background: var(--color-surface);
color: var(--color-text);
font-weight: 600;
box-shadow: var(--shadow-sm);
}
.kanban-card.is-dragging { opacity: 0.4; }
.kanban-card.is-file-dragover { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-soft); }
.kanban-card-delete {
background: none;
border: none;
color: var(--color-text-faint);
cursor: pointer;
padding: 2px;
display: inline-flex;
border-radius: var(--radius-sm);
opacity: 0;
transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.kanban-card:hover .kanban-card-delete { opacity: 1; }
.kanban-card-delete:hover { color: var(--color-danger); }
.kanban-card-delete svg { width: 14px; height: 14px; }
.kanban-card-production .prod-trenner { margin: 0 0.34em; }
.kanban-card-production {
display: inline-flex;
align-self: flex-start;
max-width: 100%;
align-items: center;
padding: 2px 9px;
border-radius: var(--radius-full);
font-size: var(--text-meta);
font-weight: 560;
letter-spacing: -0.005em;
background: hsl(var(--prod-hue, 210) 62% 93%);
color: hsl(var(--prod-hue, 210) 65% 30%);
margin-bottom: var(--space-2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
html[data-theme="dark"] .kanban-card-production {
background: hsl(var(--prod-hue, 210) 42% 24%);
color: hsl(var(--prod-hue, 210) 72% 79%);
}
@container (max-width: 520px) {
.todo-zeile-mitte { flex-wrap: wrap; }
.todo-zeile-prod {
display: block;
flex-basis: 100%;
margin-top: 4px;
}
.todo-zeile-haupt { align-items: flex-start; }
.kanban-card-check,
.todo-prio-punkt,
.todo-assignee,
.todo-zeile-datum,
.kanban-card-delete { margin-top: 1px; }
.kanban-card-production { margin-bottom: 0; }
}
.todo-heute-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 12px;
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text);
font-size: var(--text-body);
font-weight: 520;
cursor: pointer;
transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.todo-heute-btn svg { width: 15px; height: 15px; color: var(--color-text-muted); }
.todo-heute-btn:hover { border-color: var(--color-accent); }
.todo-heute-btn.is-active {
background: var(--color-accent-soft);
border-color: var(--color-accent);
color: var(--color-accent-strong);
}
.todo-heute-btn.is-active svg { color: var(--color-accent-strong); }
.todo-heute-zahl {
min-width: 20px;
padding: 0 5px;
height: 18px;
border-radius: var(--radius-full);
background: var(--color-bg-alt);
color: var(--color-text-muted);
font-size: var(--text-small);
font-weight: 650;
font-variant-numeric: tabular-nums;
display: inline-flex;
align-items: center;
justify-content: center;
}
.todo-heute-btn.is-active .todo-heute-zahl { background: var(--color-accent); color: #fff; }
.todo-checklist-items {
display: flex;
flex-direction: column;
gap: 1px;
margin: 5px 0 2px;
padding-left: 34px;
position: relative;
}
.todo-checklist-items::before {
content: '';
position: absolute;
left: 23px;
top: 4px;
bottom: 4px;
width: 2px;
border-radius: 2px;
background: var(--color-border);
}
.todo-checklist-item {
display: flex;
align-items: center;
gap: 8px;
padding: 2px 0;
font-size: var(--text-meta);
color: var(--color-text-muted);
cursor: pointer;
}
.todo-checklist-item input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
flex-shrink: 0;
width: 13px;
height: 13px;
margin: 0;
border: 1.5px solid var(--color-border-strong);
border-radius: 50%;
background: var(--color-surface);
cursor: pointer;
transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.todo-checklist-item input[type="checkbox"]:checked {
background: var(--color-accent);
border-color: var(--color-accent);
}
.todo-checklist-item input[type="checkbox"]:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
.todo-checklist-item.ist-fertig span { text-decoration: line-through; color: var(--color-text-faint); }
.todo-checklist-mehr {
align-self: flex-start;
margin-top: 2px;
padding: 2px 0;
border: 0;
background: none;
font-size: var(--text-meta);
font-family: inherit;
color: var(--color-accent);
cursor: pointer;
}
.todo-checklist-mehr:hover { text-decoration: underline; }
.todo-files-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: var(--color-text-faint);
}
.todo-files-badge svg { width: 12px; height: 12px; }
.todo-assignee {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--color-accent-soft);
color: var(--color-accent-strong);
font-size: var(--text-small);
font-weight: 600;
}
.kanban-card-check {
background: none;
border: 1.5px solid var(--color-border-strong);
color: transparent;
cursor: pointer;
width: 18px;
height: 18px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
flex-shrink: 0;
transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.kanban-card-check svg { width: 11px; height: 11px; stroke-width: 3; }
.kanban-card-check:hover { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent); }
.kanban-card-check { position: relative; }
.kanban-card-check::before {
content: '';
position: absolute;
top: -9px;
bottom: -9px;
left: -14px;
right: -9px;
border-radius: var(--radius-sm);
}
.view-toggle {
display: inline-flex;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 3px;
gap: 2px;
}
.view-toggle-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: none;
color: var(--color-text-muted);
font-size: 12.5px;
font-weight: 600;
padding: 7px 12px;
border-radius: calc(var(--radius-md) - 3px);
cursor: pointer;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.view-toggle-btn svg { width: 14px; height: 14px; }
.view-toggle-btn:hover { color: var(--color-text); }
.view-toggle-btn.is-active { background: var(--color-surface); color: var(--color-accent-strong); box-shadow: var(--shadow-sm); }
.cal-controls {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.cal-mode-switch {
display: inline-flex;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 3px;
gap: 2px;
}
.cal-mode-btn {
background: none;
border: none;
color: var(--color-text-muted);
font-size: 12.5px;
font-weight: 600;
padding: 7px 14px;
border-radius: calc(var(--radius-md) - 3px);
cursor: pointer;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cal-mode-btn:hover { color: var(--color-text); }
.cal-mode-btn.is-active { background: var(--color-surface); color: var(--color-accent-strong); box-shadow: var(--shadow-sm); }
.cal-nav { display: flex; align-items: center; gap: var(--space-2); }
.cal-nav svg { width: 15px; height: 15px; }
.cal-range-label { font-weight: 600; font-size: var(--text-entity-title); color: var(--color-text); margin-left: 6px; min-width: 150px; }
.cal-body { display: grid; grid-template-columns: 1fr 240px; gap: var(--space-4); align-items: stretch; min-height: calc(100vh - 340px); }
.cal-body-day { grid-template-columns: 1fr 280px; }
.cal-month, .cal-week, .cal-day-view {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
display: flex;
flex-direction: column;
}
.cal-weekday-row { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--color-border); flex: 0 0 auto; }
.cal-weekday { padding: 9px 0; text-align: center; font-size: var(--text-small); font-weight: 600; color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.03em; }
.cal-month-row { display: grid; grid-template-columns: repeat(7, 1fr); flex: 1; }
.cal-month-row + .cal-month-row { border-top: 1px solid var(--color-border); }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: 1fr; }
.cal-day {
border-right: 1px solid var(--color-border);
padding: 8px 7px;
min-height: 100px;
display: flex;
flex-direction: column;
gap: 4px;
transition: background var(--dur-fast) var(--ease);
}
.cal-day:last-child { border-right: none; }
.cal-week .cal-day { min-height: 420px; padding: 12px 10px; gap: 6px; }
.cal-day.is-muted { background: var(--color-bg-alt); }
.cal-day.is-muted .cal-day-number { color: var(--color-text-faint); }
.cal-day.is-dragover { background: var(--color-accent-soft); }
.cal-day-head { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; }
.cal-day-weekday { font-size: var(--text-small); font-weight: 600; color: var(--color-text-faint); text-transform: uppercase; }
.cal-day-number { font-size: var(--text-body); font-weight: 600; color: var(--color-text); }
.cal-day.is-today .cal-day-number {
background: var(--color-accent);
color: #fff;
width: 21px; height: 21px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
}
.cal-day-chips { display: flex; flex-direction: column; gap: 5px; flex: 1; overflow-y: auto; }
.cal-day-empty { color: var(--color-text-faint); font-size: var(--text-meta); }
.cal-day-more { font-size: var(--text-small); color: var(--color-text-muted); font-weight: 600; padding: 1px 2px; }
.cal-chip {
--chip-color: var(--color-accent);
display: flex;
align-items: center;
gap: 8px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 4px solid var(--chip-color);
border-radius: 8px;
padding: 10px 9px;
min-height: 44px;
box-sizing: border-box;
font-size: 12.5px;
font-weight: 600;
color: var(--color-text);
line-height: 1.3;
cursor: grab;
box-shadow: var(--shadow-sm);
transition: box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.cal-chip:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-strong); border-left-color: var(--chip-color); }
.cal-chip.is-dragging { opacity: 0.4; }
.cal-chip.is-sm { gap: 5px; padding: 4px 6px; min-height: 0; border-left-width: 3px; font-size: var(--text-small); }
.cal-chip.is-sm .cal-chip-check { width: 14px; height: 14px; }
.cal-chip.is-sm .cal-chip-check svg { width: 8px; height: 8px; }
.cal-chip-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.cal-chip-check {
background: none;
border: 1.5px solid var(--color-border-strong);
color: transparent;
width: 19px;
height: 19px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
flex-shrink: 0;
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cal-chip-check svg { width: 11px; height: 11px; stroke-width: 3.5; }
.cal-chip-check:hover { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent); }
.cal-day-view { padding: var(--space-4); flex: 1; }
.cal-day-list { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; min-height: 120px; border-radius: var(--radius-md); transition: background var(--dur-fast) var(--ease); }
.cal-day-list.is-dragover { background: var(--color-accent-soft); }
.cal-day-empty-state { text-align: center; color: var(--color-text-faint); font-size: var(--text-meta); padding: var(--space-6) 0; }
.cal-unscheduled {
background: var(--color-bg-alt);
border: 1px dashed var(--color-border-strong);
border-radius: var(--radius-lg);
padding: var(--space-3);
display: flex;
flex-direction: column;
}
.cal-unscheduled-header { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: var(--text-body); margin-bottom: 6px; flex: 0 0 auto; }
.cal-unscheduled-list { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 60px; border-radius: var(--radius-md); transition: background var(--dur-fast) var(--ease); overflow-y: auto; }
.cal-unscheduled-list.is-dragover { background: var(--color-accent-soft); }
.timer-card.is-running { border-color: var(--color-accent); box-shadow: var(--shadow-glow), var(--shadow-sm); }
.timer-elapsed {
font-size: 40px;
font-weight: 700;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
color: var(--color-accent-strong);
}
.field-checkbox input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--color-accent); }
.avail-months {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space-4);
}
.avail-month-title { font-weight: 600; font-size: var(--text-body); margin-bottom: 8px; }
.avail-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 3px;
margin-bottom: 3px;
}
.avail-weekdays span { text-align: center; font-size: 10px; color: var(--color-text-faint); font-weight: 600; }
.avail-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 3px; }
.avail-day {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
font-size: var(--text-small);
font-weight: 600;
cursor: default;
}
.avail-day.is-empty { visibility: hidden; }
.avail-booking-row {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--space-3);
align-items: center;
padding: 7px 0;
border-bottom: 1px solid var(--color-border);
font-size: 12px;
}
.avail-booking-row:last-child { border-bottom: none; }
.booking-items-list {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
max-height: 58vh;
overflow-y: auto;
overflow-x: auto;
}
.booking-item-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 50px 40px 68px 76px 50px 50px 30px;
align-items: center;
gap: var(--space-2);
padding: 9px 12px;
}
.booking-item-row input[type="number"] { width: 100%; padding: 5px 6px; font-size: 12px; text-align: center; }
.booking-item-name { display: flex; align-items: center; gap: 5px; min-width: 0; font-weight: 600; font-size: 12.5px; }
.booking-item-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.booking-item-group-price { text-align: right; font-size: 12px; font-weight: 600; }
.booking-item-row > div:last-child { text-align: center; }
.booking-item-block {
border-bottom: 1px solid var(--color-border);
cursor: grab;
}
.booking-item-block:active { cursor: grabbing; }
.booking-item-block:last-child { border-bottom: none; }
.booking-item-block.is-dragging { opacity: 0.4; }
.booking-item-grip {
flex-shrink: 0;
display: inline-flex;
color: var(--color-text-faint);
}
.booking-item-grip svg { width: 13px; height: 13px; }
.booking-item-row.is-header {
background: var(--color-bg-alt);
font-size: var(--text-small);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-text-faint);
padding: 7px 12px;
text-align: center;
}
.booking-item-row.is-header > div:first-child { text-align: left; }
.booking-item-kit-contents {
padding: 0 12px 9px 12px;
font-size: 11px;
line-height: 1.5;
color: var(--color-text-faint);
}
.booking-item-kit-contents-label { font-weight: 600; color: var(--color-text-muted); margin-bottom: 2px; }
.booking-item-kit-contents-list { margin: 0; padding-left: 16px; list-style: disc; }
.booking-item-kit-contents-list li { padding: 1px 0; }
.booking-items-total {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
border-top: 2px solid var(--color-border-strong);
background: var(--color-bg-alt);
font-size: var(--text-body);
font-weight: 600;
color: var(--color-text);
}
.booking-items-totals {
display: flex;
flex-direction: column;
border-top: 2px solid var(--color-border-strong);
background: var(--color-bg-alt);
}
.booking-items-total-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 12px;
font-size: var(--text-body);
color: var(--color-text-faint);
}
.booking-items-total-row.is-grand {
font-weight: 600;
color: var(--color-text);
font-size: var(--text-entity-title);
border-top: 1px solid var(--color-border);
padding-top: 10px;
}
.booking-items-total-row.is-hint {
padding-top: 0;
padding-bottom: 4px;
padding-left: 24px;
font-size: var(--text-meta);
color: var(--color-text-muted);
}
.booking-items-total-row.is-discount input {
width: 56px;
text-align: right;
margin: 0 4px;
display: inline-block;
}
.booking-material-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
.material-panel { display: flex; flex-direction: column; min-width: 0; }
.material-panel h3 {
font-size: var(--text-body);
font-weight: 600;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 6px;
}
.material-panel-count { color: var(--color-text-faint); font-weight: 500; }
.material-panel-collapse-links {
margin-left: auto;
display: flex;
gap: 10px;
font-size: 11px;
font-weight: 500;
text-transform: none;
letter-spacing: normal;
}
.material-panel-collapse-link { color: var(--color-text-faint); text-decoration: none; cursor: pointer; }
.material-panel-collapse-link:hover { color: var(--color-text); text-decoration: underline; }
.material-catalog {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
max-height: 58vh;
overflow: hidden;
}
.material-catalog-search { position: relative; padding: 8px; border-bottom: 1px solid var(--color-border); flex-shrink: 0; }
.material-catalog-search svg {
position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
width: 14px; height: 14px; color: var(--color-text-faint); pointer-events: none;
}
.material-catalog-search input {
width: 100%;
padding: 8px 10px 8px 32px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
background: var(--color-surface-2);
font-size: var(--text-body);
font-family: inherit;
color: var(--color-text);
}
.material-catalog-list { flex: 1; overflow-y: auto; padding: 4px; }
.material-catalog-group { border-left: 3px solid var(--cat-color, transparent); border-radius: var(--radius-sm); margin-bottom: 2px; }
.material-catalog-group summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 9px;
font-size: var(--text-meta);
font-weight: 600;
letter-spacing: 0.03em;
color: var(--color-text-muted);
border-radius: var(--radius-sm);
}
.material-catalog-group summary::-webkit-details-marker { display: none; }
.material-catalog-group summary:hover { background: var(--color-bg-alt); }
.material-catalog-group-name { display: flex; align-items: center; gap: 7px; color: var(--cat-color); }
.material-catalog-group-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cat-color); flex-shrink: 0; }
.material-catalog-count { font-weight: 600; color: var(--color-text-faint); text-transform: none; letter-spacing: normal; }
.material-catalog-items { padding-left: 6px; }
.material-catalog-item {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
padding: 7px 9px;
border: none;
background: none;
border-radius: var(--radius-sm);
font-size: 12.5px;
font-family: inherit;
color: var(--color-text);
text-align: left;
cursor: pointer;
}
.material-catalog-item-label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.material-catalog-item .badge { flex-shrink: 0; }
.material-catalog-item:hover { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.material-catalog-item svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--color-text-faint); }
.material-catalog-item:hover svg { color: var(--color-accent-strong); }
.booking-items-groups { display: flex; flex-direction: column; }
.booking-items-group.is-dragging { opacity: 0.4; }
.booking-items-group-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 12px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.03em;
color: var(--color-text-muted);
background: var(--color-bg-alt);
border-bottom: 1px solid var(--color-border);
cursor: grab;
}
.booking-items-group-header:active { cursor: grabbing; }
.booking-items-group-grip {
display: inline-flex;
vertical-align: middle;
margin-right: 6px;
color: var(--color-text-faint);
}
.booking-items-group-grip svg { width: 13px; height: 13px; }
.booking-items-group-meta { display: flex; align-items: center; gap: 10px; }
.booking-items-group-count { font-weight: 600; color: var(--color-text-faint); text-transform: none; letter-spacing: normal; }
.booking-items-group-subtotal { font-weight: 600; color: var(--color-text); text-transform: none; letter-spacing: normal; }
.booking-items-group-toggle {
display: inline-flex;
align-items: center;
vertical-align: middle;
margin-right: 4px;
padding: 0;
border: none;
background: none;
color: var(--color-text-faint);
cursor: pointer;
}
.booking-items-group-toggle svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease); }
.booking-items-group-toggle:hover { color: var(--color-text); }
.booking-items-group.is-collapsed .booking-items-group-toggle svg { transform: rotate(-90deg); }
.booking-items-group-collapse {
display: grid;
grid-template-rows: 1fr;
transition: grid-template-rows var(--dur-slow) var(--ease);
}
.booking-items-group.is-collapsed .booking-items-group-collapse { grid-template-rows: 0fr; }
.booking-items-group-body { overflow: hidden; min-height: 0; }
.searchselect { position: relative; display: block; width: 100%; }
.searchselect-trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 11px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
background: var(--color-surface-2);
color: var(--color-text);
font-size: 13.5px;
font-family: inherit;
text-align: left;
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.searchselect-trigger:hover { border-color: var(--color-text-faint); }
.searchselect-trigger:focus-visible,
.searchselect.is-open .searchselect-trigger {
outline: none;
border-color: var(--color-accent);
background-color: var(--color-surface);
box-shadow: var(--shadow-glow);
}
.searchselect-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.searchselect-label.is-placeholder { color: var(--color-text-faint); }
.searchselect-chevron { flex-shrink: 0; color: var(--color-text-faint); display: inline-flex; }
.searchselect-chevron svg { width: 14px; height: 14px; }
.searchselect-panel {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
min-width: 280px;
background: var(--color-surface);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
z-index: 150;
overflow: hidden;
display: flex;
flex-direction: column;
}
.searchselect-search {
position: relative;
padding: 8px;
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
.searchselect-search svg {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
width: 14px;
height: 14px;
color: var(--color-text-faint);
pointer-events: none;
}
.searchselect-search input,
.searchselect-search input:focus {
width: 100%;
padding: 8px 10px 8px 32px !important;
border: 1px solid var(--color-border-strong) !important;
border-radius: var(--radius-sm) !important;
background: var(--color-surface-2) !important;
font-size: var(--text-body);
font-family: inherit;
color: var(--color-text);
outline: none !important;
box-shadow: none !important;
transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.searchselect-search input:focus {
border-color: var(--color-accent) !important;
background: var(--color-surface) !important;
}
.searchselect-list { max-height: 240px; overflow-y: auto; padding: 4px; }
.searchselect-group {
position: sticky;
top: 0;
z-index: 1;
margin: 4px -4px 2px;
padding: 5px 13px;
font-size: var(--text-small);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-accent-strong);
background: var(--color-accent-soft);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.searchselect-group:first-child { margin-top: -4px; border-top: none; }
.searchselect-option {
padding: 8px 9px;
border-radius: var(--radius-sm);
font-size: var(--text-body);
line-height: 1.35;
cursor: pointer;
white-space: normal;
overflow-wrap: break-word;
}
.searchselect-option:hover { background: var(--color-bg-alt); }
.searchselect-option.is-selected { background: var(--color-accent-soft); color: var(--color-accent-strong); font-weight: 600; }
.searchselect-option.is-leer {
color: var(--color-text-muted);
font-style: italic;
border-bottom: 1px solid var(--color-border);
}
.searchselect-option.is-leer.is-selected { color: var(--color-accent-strong); font-style: normal; }
.searchselect-empty { padding: var(--space-4); text-align: center; font-size: 12.5px; color: var(--color-text-faint); }
.multiselect { width: auto; min-width: 200px; }
.multiselect-trigger { min-width: 200px; }
.multiselect-panel { left: 0; right: auto; min-width: 230px; }
.multiselect-list { max-height: 260px; padding: 6px; }
.multiselect-option {
display: flex;
align-items: center;
gap: 9px;
padding: 8px 9px;
border-radius: var(--radius-sm);
font-size: var(--text-body);
cursor: pointer;
}
.multiselect-option:hover { background: var(--color-bg-alt); }
.multiselect-option.is-selected { background: var(--color-accent-soft); color: var(--color-accent-strong); font-weight: 600; }
.multiselect-option input[type="checkbox"] {
flex-shrink: 0;
width: 16px;
height: 16px;
accent-color: var(--color-accent);
cursor: pointer;
}
.multiselect-option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multiselect-clear {
flex-shrink: 0;
width: 100%;
padding: 9px;
border: none;
border-top: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text-muted);
font-size: 12.5px;
font-family: inherit;
cursor: pointer;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.multiselect-clear:hover { background: var(--color-bg-alt); color: var(--color-text); }
.multiselect-clear.is-hidden { display: none; }
.inventory-category-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 6px 18px;
}
.inventory-category-grid .field-checkbox { white-space: nowrap; }
.inventory-category-all {
grid-column: 1 / -1;
font-weight: 600;
padding-bottom: 8px;
margin-bottom: 4px;
border-bottom: 1px dashed var(--color-border);
}
.inventory-category-count { color: var(--color-text-faint); font-size: var(--text-meta); }
.inventory-session-list { display: flex; flex-direction: column; gap: 10px; }
.inventory-session-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
.inventory-session-info { min-width: 0; flex: 1; }
.inventory-session-cats { font-weight: 600; font-size: 13.5px; }
.inventory-session-meta { font-size: var(--text-meta); color: var(--color-text-muted); margin-top: 2px; }
.inventory-session-progress {
height: 5px;
background: var(--color-bg-alt);
border-radius: var(--radius-full);
margin-top: 8px;
max-width: 240px;
overflow: hidden;
}
.inventory-session-progress-bar {
height: 100%;
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-2) 130%);
border-radius: var(--radius-full);
}
.inventory-session-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.inventory-count-card {
max-width: 440px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 16px;
}
.inventory-count-top { display: flex; align-items: center; justify-content: space-between; }
.inventory-count-progress-label {
font-size: 12px;
font-weight: 600;
color: var(--color-text-faint);
font-variant-numeric: tabular-nums;
}
.inventory-count-progress-bar-track {
height: 4px;
background: var(--color-bg-alt);
border-radius: var(--radius-full);
overflow: hidden;
margin-top: -8px;
}
.inventory-count-progress-bar-fill {
height: 100%;
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-2) 130%);
transition: width var(--dur-slow) var(--ease);
}
.inventory-count-item-header { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.inventory-count-mismatch { display: none; }
.inventory-count-item-name { font-size: 20px; line-height: 1.3; margin: 0; }
.inventory-count-soll { font-size: var(--text-meta); color: var(--color-text-muted); font-weight: 500; margin-top: -10px; }
.inventory-count-actions { display: flex; gap: 8px; margin-top: 4px; }
.inventory-count-actions .btn { flex: 1; justify-content: center; }
.inventory-count-next svg { width: 14px; height: 14px; }
.inventory-qty-slider { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 6px 0 2px; }
.inventory-qty-display { display: flex; align-items: baseline; gap: 6px; }
.inventory-qty-number {
font-size: 50px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-text);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.inventory-qty-unit { font-size: 15px; color: var(--color-text-faint); font-weight: 600; }
.inventory-qty-track-wrap { position: relative; width: 100%; }
.inventory-qty-center-line {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
background: var(--color-accent);
border-radius: 2px;
transform: translateX(-50%);
pointer-events: none;
z-index: 1;
}
.inventory-qty-track {
display: flex;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
touch-action: pan-x;
user-select: none;
cursor: grab;
}
.inventory-qty-track::-webkit-scrollbar { display: none; }
.inventory-qty-track:active { cursor: grabbing; }
.inventory-qty-tick {
flex-shrink: 0;
width: 32px;
height: 54px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
scroll-snap-align: center;
cursor: pointer;
}
.inventory-qty-tick-mark { width: 2px; height: 12px; background: var(--color-border-strong); border-radius: 1px; }
.inventory-qty-tick.is-major .inventory-qty-tick-mark { height: 22px; background: var(--color-text-faint); }
.inventory-qty-tick-label {
font-size: var(--text-small);
margin-top: 5px;
color: var(--color-text-faint);
font-variant-numeric: tabular-nums;
}
.inventory-qty-controls { display: flex; align-items: center; gap: 10px; }
.inventory-qty-btn {
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid var(--color-border-strong);
background: var(--color-surface);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: var(--color-text);
line-height: 1;
}
.inventory-qty-btn:active { background: var(--color-bg-alt); }
.inventory-qty-input {
width: 64px;
text-align: center;
padding: 8px 4px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
font-size: 15px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.inventory-report-list { display: flex; flex-direction: column; }
.inventory-report-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--color-border);
}
.inventory-report-row:last-child { border-bottom: none; }
.inventory-report-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; font-weight: 600; font-size: var(--text-body); }
.inventory-report-cat { font-size: var(--text-meta); font-weight: 500; color: var(--color-text-faint); letter-spacing: 0.02em; }
.inventory-report-values {
display: flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.inventory-report-arrow { color: var(--color-text-faint); }
.inventory-report-diff { font-weight: 600; padding: 2px 7px; border-radius: var(--radius-full); font-size: var(--text-meta); }
.inventory-report-diff.is-plus { background: var(--color-success-soft); color: var(--color-success); }
.inventory-report-diff.is-minus { background: var(--color-danger-soft); color: var(--color-danger); }
.inventory-report-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.quicksearch-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 18, 32, 0.5);
backdrop-filter: blur(2px);
z-index: 200;
display: flex;
justify-content: center;
padding: 12vh var(--space-4) var(--space-4);
}
.quicksearch-palette {
width: 100%;
max-width: 620px;
max-height: 70vh;
background: var(--color-surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
display: flex;
flex-direction: column;
overflow: hidden;
}
.quicksearch-input-row {
display: flex;
align-items: center;
gap: 10px;
padding: var(--space-4);
border-bottom: 1px solid var(--color-border);
color: var(--color-text-faint);
}
.quicksearch-input-row svg { width: 17px; height: 17px; flex-shrink: 0; }
.quicksearch-input {
flex: 1;
border: none;
outline: none;
background: none;
font-size: 15px;
color: var(--color-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.quicksearch-results { flex: 1; overflow-y: auto; padding: var(--space-2); }
.quicksearch-empty { padding: var(--space-5); text-align: center; color: var(--color-text-faint); font-size: var(--text-body); }
.quicksearch-group { margin-bottom: 4px; }
.quicksearch-group-label {
display: flex;
align-items: center;
gap: 7px;
padding: 7px 10px 4px;
font-size: var(--text-small);
font-weight: 600;
letter-spacing: 0.03em;
color: var(--color-text-faint);
}
.quicksearch-group-label svg { width: 12px; height: 12px; }
.quicksearch-row {
padding: 8px 12px;
border-radius: var(--radius-sm);
cursor: pointer;
}
.quicksearch-row.is-active { background: var(--color-accent-soft); }
.quicksearch-row-title { font-size: 13.5px; font-weight: 600; color: var(--color-text); }
.quicksearch-row-sub { font-size: var(--text-meta); color: var(--color-text-muted); margin-top: 1px; }
.quicksearch-hint {
display: flex;
gap: var(--space-4);
padding: 9px var(--space-4);
border-top: 1px solid var(--color-border);
font-size: 11px;
color: var(--color-text-faint);
}
.quicksearch-hint kbd {
font-family: inherit;
font-size: var(--text-small);
font-weight: 600;
padding: 1px 5px;
border-radius: 4px;
background: var(--color-bg-alt);
margin-right: 3px;
}
body.quicksearch-open { overflow: hidden; }
.documents-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
gap: var(--space-4);
}
.documents-box {
background: var(--color-surface);
border: 2px dashed var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-4);
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
min-width: 0;
}
.documents-box.is-dragover { border-color: var(--color-accent); background: var(--color-accent-soft); }
.documents-box.is-uploading { border-color: var(--color-accent); }
.documents-box.has-files { border-color: var(--color-accent); }
.documents-box-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: var(--space-3); }
.documents-box-number { font-size: var(--text-meta); font-weight: var(--weight-semibold); color: var(--color-text-faint); letter-spacing: 0.02em; }
.documents-box-title { font-size: var(--text-entity-title); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.documents-box-client { font-size: var(--text-meta); color: var(--color-text-muted); margin-top: 1px; }
.documents-box-count {
flex-shrink: 0;
background: var(--color-bg-alt);
color: var(--color-text-muted);
border-radius: var(--radius-full);
padding: 2px 9px;
font-size: 11px;
font-weight: 600;
}
.assets-leer-gruppe { margin-top: var(--space-4); }
.assets-leer-titel {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-faint);
margin-bottom: 6px;
}
.assets-leer-liste {
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--color-surface);
}
.assets-leerzeile {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
border-bottom: 1px solid var(--color-border);
cursor: pointer;
min-width: 0;
}
.assets-leerzeile:last-child { border-bottom: 0; }
.assets-leerzeile:hover { background: var(--color-bg-alt); }
.assets-leerzeile.is-dragover { background: var(--color-accent-soft); }
.assets-leerzeile-plus { display: inline-flex; color: var(--color-text-faint); }
.assets-leerzeile-plus svg { width: 14px; height: 14px; }
.assets-leerzeile-nr { color: var(--color-accent-strong); font-weight: var(--weight-semibold); }
.assets-leerzeile-titel {
font-weight: var(--weight-semibold);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.assets-leerzeile-kunde { color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assets-leerzeile-hinweis {
margin-left: auto;
color: var(--color-text-faint);
font-size: var(--text-meta);
white-space: nowrap;
}
.documents-dropzone-hint.ist-schmal {
padding: 7px 0;
border: 0;
border-top: 1px dashed var(--color-border);
margin-top: 8px;
font-size: var(--text-meta);
color: var(--color-text-faint);
min-height: 0;
}
.documents-box.is-dragover .documents-dropzone-hint.ist-schmal {
border: 1.5px dashed var(--color-accent);
border-radius: var(--radius-md);
padding: 18px 0;
color: var(--color-accent-strong);
}
.documents-dropzone-hint {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: var(--space-4) var(--space-3);
margin-bottom: var(--space-3);
border-radius: var(--radius-sm);
background: var(--color-bg-alt);
color: var(--color-text-faint);
font-size: 12px;
text-align: center;
}
.documents-dropzone-hint svg { width: 14px; height: 14px; }
.documents-box.is-dragover .documents-dropzone-hint { color: var(--color-accent); }
.documents-uploading { display: flex; flex-direction: column; gap: 6px; }
.documents-uploading:not(:empty) { margin-bottom: 6px; }
.documents-uploading-row {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 9px;
background: var(--color-accent-soft);
border: 1px solid var(--color-accent);
border-radius: var(--radius-sm);
font-size: 12.5px;
}
.documents-uploading-row svg { width: 14px; height: 14px; color: var(--color-accent); flex-shrink: 0; }
.documents-uploading-row .documents-row-name { margin-bottom: 4px; }
.documents-uploading-row .progress-track { height: 5px; }
.documents-uploading-percent { flex-shrink: 0; font-size: var(--text-meta); font-weight: var(--weight-semibold); color: var(--color-accent-strong); font-variant-numeric: tabular-nums; }
.documents-list { display: flex; flex-direction: column; gap: 14px; }
.documents-empty { font-size: var(--text-meta); color: var(--color-text-faint); text-align: center; margin: 0; }
.documents-group { display: flex; flex-direction: column; gap: 6px; }
.documents-group-label {
align-self: flex-start;
font-size: var(--text-small);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-accent-strong);
background: var(--color-accent-soft);
padding: 3px 9px;
border-radius: var(--radius-full);
}
.documents-group-list { display: flex; flex-direction: column; gap: 6px; max-height: 480px; overflow-y: auto; padding-right: 2px; }
.documents-row {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 9px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 12.5px;
cursor: pointer;
}
.documents-row:hover { border-color: var(--color-accent); }
.documents-row svg { width: 14px; height: 14px; color: var(--color-text-faint); flex-shrink: 0; }
.documents-row .is-client-shared svg { color: var(--color-accent); }
.documents-row-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.documents-row-sub { font-size: var(--text-meta); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.documents-row-batch { cursor: default; }
.filetransfer-dropzone {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: var(--space-6) var(--space-4);
margin-bottom: var(--space-3);
border: 2px dashed var(--color-border-strong);
border-radius: var(--radius-lg);
background: var(--color-bg-alt);
color: var(--color-text-muted);
text-align: center;
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.filetransfer-dropzone.is-dragover, .filetransfer-dropzone.is-uploading {
border-color: var(--color-accent);
background: var(--color-accent-soft);
color: var(--color-accent);
}
.filetransfer-dropzone-icon { width: 34px; height: 34px; }
.filetransfer-dropzone-icon svg { width: 100%; height: 100%; }
.filetransfer-dropzone-text { font-size: var(--text-entity-title); font-weight: 600; }
.filetransfer-dropzone-hint { font-size: var(--text-meta); color: var(--color-text-faint); }
.filetransfer-ordner-knopf {
border: 0; background: none; padding: 4px 6px; font: inherit; font-size: var(--text-meta);
color: var(--color-accent); text-decoration: underline; cursor: pointer;
}
.inspo-dropzone-body.is-loading { min-height: 70px; display: flex; align-items: center; justify-content: center; }
.inspo-dropzone-zone {
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: var(--space-6) var(--space-4);
border: 2px dashed var(--color-border-strong);
border-radius: var(--radius-lg);
background: var(--color-bg-alt);
color: var(--color-text-muted);
text-align: center;
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.inspo-dropzone-zone.is-focused,
.inspo-dropzone-zone.is-dragover,
.inspo-dropzone-zone.is-busy {
outline: none;
border-color: var(--color-accent);
background: var(--color-accent-soft);
color: var(--color-accent);
box-shadow: var(--shadow-glow);
}
.inspo-dropzone-zone.is-flash {
border-color: var(--color-success);
background: var(--color-success-soft);
color: var(--color-success);
animation: inspoDropzoneFlash 0.9s ease;
}
@keyframes inspoDropzoneFlash {
0% { transform: scale(1); }
30% { transform: scale(1.015); }
100% { transform: scale(1); }
}
.inspo-dropzone-icon { width: 30px; height: 30px; }
.inspo-dropzone-icon svg { width: 100%; height: 100%; }
.inspo-dropzone-text { font-size: 13.5px; font-weight: 600; }
.inspo-dropzone-hint { font-size: var(--text-meta); color: var(--color-text-faint); }
.inspo-dropzone-zone.is-dragover .inspo-dropzone-hint,
.inspo-dropzone-zone.is-busy .inspo-dropzone-hint,
.inspo-dropzone-zone.is-focused .inspo-dropzone-hint { color: inherit; opacity: 0.75; }
.inspo-dropzone-fallback { display: flex; gap: 8px; margin-top: 10px; }
.inspo-dropzone-fallback input { flex: 1; min-width: 0; }
.inspo-dropzone-layout { display: flex; gap: 20px; align-items: flex-start; }
.inspo-dropzone-main,
.inspo-dropzone-recent-panel { flex: 1 1 0; min-width: 0; }
.inspo-dropzone-recent-title {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-text-faint);
margin-bottom: 10px;
}
.inspo-dropzone-recent { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 96px)); gap: 12px; }
.inspo-dropzone-recent-item { display: flex; flex-direction: column; gap: 6px; cursor: pointer; min-width: 0; }
.inspo-dropzone-recent-thumb {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
background: var(--color-surface-2) center/cover no-repeat;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-faint);
transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.inspo-dropzone-recent-item:hover .inspo-dropzone-recent-thumb { transform: translateY(-2px); border-color: var(--color-accent); }
.inspo-dropzone-recent-thumb svg { width: 18px; height: 18px; }
.inspo-dropzone-recent-label {
font-size: var(--text-small);
color: var(--color-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
}
.filetransfer-link-box {
margin-top: var(--space-3);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-sm);
background: var(--color-success-soft);
border: 1px solid var(--color-success);
}
.filetransfer-link-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
font-weight: 600;
color: var(--color-success);
margin-bottom: 8px;
}
.filetransfer-link-label svg { width: 14px; height: 14px; }
.filetransfer-edit-filenames { display: flex; flex-direction: column; gap: 6px; }
.filetransfer-pending-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
cursor: pointer;
}
.filetransfer-pending-row input[type="checkbox"] { flex: none; width: auto; }
.filetransfer-pending-row + .filetransfer-pending-row { border-top: 1px solid var(--color-border); }
.filetransfer-pending-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-groups { display: flex; flex-direction: column; gap: var(--space-6); }
.board-group-header {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: var(--space-3);
padding-bottom: 8px;
border-bottom: 1px solid var(--color-border);
}
.board-group-number { font-size: var(--text-body); font-weight: 600; color: var(--color-accent); flex-shrink: 0; }
.board-group-title { font-size: 15px; font-weight: 600; color: var(--color-text); }
.board-group-anzahl { margin-left: auto; font-size: 12px; color: var(--color-text-faint); }
.board-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.board-picker-card {
position: relative;
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-text);
text-decoration: none;
transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.board-picker-card:hover { border-color: var(--color-accent); transform: translateY(-5px) scale(1.015); box-shadow: var(--shadow-lg); }
.board-picker-thumb {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-bottom: 1px solid var(--color-border);
overflow: hidden;
background: var(--color-bg-alt);
display: flex; align-items: center; justify-content: center;
}
.board-picker-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.board-picker-thumb.is-empty { background: var(--color-accent-soft); color: var(--color-accent); }
.board-picker-thumb.is-empty svg { width: 38px; height: 38px; }
.board-picker-body {
min-width: 0;
padding: 11px 13px 13px;
display: flex;
flex-direction: column;
gap: 3px;
}
.board-picker-number { font-size: var(--text-meta); color: var(--color-text-faint); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-picker-title {
font-weight: 600;
font-size: 15px;
line-height: 1.3;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
word-break: break-word;
}
.board-picker-client { font-size: var(--text-meta); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-picker-meta { font-size: var(--text-meta); color: var(--color-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-picker-lock {
display: inline-flex; align-items: center; gap: 4px;
align-self: flex-start;
margin-top: 3px;
padding: 2px 8px;
border-radius: var(--radius-full);
background: var(--color-warning-soft);
font-size: 11px; font-weight: 600;
color: var(--color-warning, #a06a00);
}
.board-picker-lock svg { width: 11px; height: 11px; }
.board-picker-actions {
position: absolute;
top: 7px;
right: 7px;
z-index: 2;
display: flex;
gap: 4px;
opacity: 0;
transition: opacity var(--dur-fast) var(--ease);
}
.board-picker-card:hover .board-picker-actions,
.board-picker-actions:focus-within { opacity: 1; }
.board-picker-action {
width: 26px; height: 26px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--color-surface);
border: 1px solid var(--color-border);
color: var(--color-text-muted);
cursor: pointer;
transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.board-picker-action svg { width: 13px; height: 13px; }
.board-picker-action:hover { color: var(--color-accent-strong); border-color: var(--color-accent); }
.board-picker-action.is-danger:hover { color: var(--color-danger); border-color: var(--color-danger); }
.board-picker-action.is-client-shared { color: var(--color-accent); border-color: var(--color-accent); }
.main:has(.board-page) {
padding: 0;
height: 100vh;
height: 100dvh;
overflow: hidden;
display: flex;
flex-direction: column;
min-width: 0;
}
.board-page { position: relative; flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.board-header {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border);
background: var(--color-surface);
flex-shrink: 0;
}
.board-header-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow: hidden; }
.board-header-name-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.board-header-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-header-sub { font-size: var(--text-meta); color: var(--color-text-faint); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-title-edit-btn {
flex-shrink: 0;
width: 22px; height: 22px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: transparent;
border: none;
color: var(--color-text-faint);
cursor: pointer;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.board-title-edit-btn svg { width: 12px; height: 12px; }
.board-title-edit-btn:hover { background: var(--color-bg-alt); color: var(--color-text); }
.board-presence-bar { display: flex; align-items: center; flex-shrink: 0; }
.board-presence-avatar {
width: 26px; height: 26px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 11px; font-weight: 600;
border: 2px solid var(--color-surface);
margin-left: -8px;
}
.board-presence-avatar:first-child { margin-left: 0; }
.board-lock-banner {
display: flex; align-items: center; gap: 10px;
padding: 9px 16px; background: var(--color-warning-soft); border-bottom: 1px solid var(--color-warning); color: var(--color-warning);
font-size: var(--text-body); flex-shrink: 0;
}
.board-lock-banner svg { width: 15px; height: 15px; flex-shrink: 0; }
.board-lock-banner span:nth-child(2) { flex: 1; }
.board-lock-banner .btn { flex-shrink: 0; }
.board-toolbar-wrap {
position: absolute; top: var(--space-4); left: 50%; transform: translateX(-50%);
z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 8px;
pointer-events: none;
}
.board-toolbar-wrap.ist-verschoben { transform: none; }
.board-toolbar-griff {
pointer-events: auto;
width: 46px; height: 16px;
display: flex; align-items: center; justify-content: center;
gap: 3px;
border-radius: var(--radius-full);
background: var(--color-surface);
border: 1px solid var(--color-border);
box-shadow: 0 6px 18px -8px rgba(20, 21, 43, 0.22);
cursor: grab;
opacity: 0.55;
transition: opacity var(--dur-fast) var(--ease);
}
.board-toolbar-griff:hover { opacity: 1; }
.board-toolbar-griff.zieht { cursor: grabbing; opacity: 1; }
.board-toolbar-griff span {
width: 3px; height: 3px; border-radius: 50%;
background: var(--color-text-faint);
}
.board-toolbar-wrap > * { pointer-events: auto; }
.board-toolbar {
display: flex; align-items: center; gap: 2px;
padding: 5px; background: var(--color-surface); border: 1px solid var(--color-border);
border-radius: var(--radius-lg); box-shadow: 0 8px 24px -8px rgba(20, 21, 43, 0.18);
}
.board-tool-btn {
width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
border-radius: var(--radius-sm); border: none; background: transparent; color: var(--color-text-muted);
cursor: pointer;
}
.board-tool-btn svg { width: 17px; height: 17px; }
.board-tool-btn:hover { background: var(--color-bg-alt); color: var(--color-text); }
.board-tool-btn.active { background: var(--color-accent-soft); color: var(--color-accent); }
.board-toolbar-sep { width: 1px; height: 22px; background: var(--color-border-strong); margin: 0 4px; flex-shrink: 0; }
.board-zoom-label { font-size: var(--text-meta); color: var(--color-text-faint); min-width: 34px; text-align: center; }
.board-color-row {
display: flex; gap: 6px; padding: 6px 8px; background: var(--color-surface);
border: 1px solid var(--color-border); border-radius: var(--radius-full); box-shadow: 0 8px 24px -8px rgba(20, 21, 43, 0.18);
}
.board-color-swatch {
width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer;
}
.board-color-swatch.active { border-color: var(--color-text); }
.board-format-row {
display: flex; align-items: center; gap: 2px; padding: 5px; background: var(--color-surface);
border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: 0 8px 24px -8px rgba(20, 21, 43, 0.18);
}
.board-format-btn {
min-width: 28px; height: 28px; padding: 0 6px; display: flex; align-items: center; justify-content: center;
border-radius: var(--radius-sm); border: none; background: transparent; color: var(--color-text-muted);
cursor: pointer; font-size: var(--text-body);
}
.board-format-btn:hover { background: var(--color-bg-alt); color: var(--color-text); }
.board-format-toggle.active { background: var(--color-accent-soft); color: var(--color-accent); }
.board-format-size { font-size: var(--text-meta); color: var(--color-text-faint); min-width: 34px; text-align: center; }
.board-viewport {
position: relative; flex: 1; min-width: 0; min-height: 0; overflow: hidden; cursor: grab;
background-color: var(--color-bg-alt);
background-image: radial-gradient(circle, var(--color-border-strong) 1px, transparent 1px);
background-size: 22px 22px;
}
.board-viewport.panning { cursor: grabbing; }
.board-viewport.tool-crosshair { cursor: crosshair; }
.board-viewport.board-dropzone-active {
outline: 3px dashed var(--color-accent);
outline-offset: -3px;
background-color: var(--color-accent-soft);
}
.board-viewport.board-dropzone-active::after {
content: 'Bild hier ablegen';
position: absolute;
top: var(--space-4);
left: 50%;
transform: translateX(-50%);
background: var(--color-accent);
color: #fff;
font-size: var(--text-body);
font-weight: 600;
padding: 6px 14px;
border-radius: var(--radius-md);
pointer-events: none;
z-index: 50;
}
.board-canvas { position: relative; transform-origin: 0 0; }
.board-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.board-element-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.board-guide-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }
.board-guide-line { position: absolute; background: #ff3d92; }
.board-guide-line.is-vertical { width: 1px; }
.board-guide-line.is-horizontal { height: 1px; }
.board-marquee-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 55; }
.board-marquee {
position: absolute;
border: 1px solid var(--color-accent);
background: var(--color-accent-soft);
opacity: 0.55;
}
.board-el { position: absolute; cursor: grab; pointer-events: auto; }
.board-el.dragging { cursor: grabbing; opacity: 0.92; }
.board-el.selected { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 2px; }
.board-preview { pointer-events: none; opacity: 0.7; }
.board-el.is-locked { cursor: default; }
.board-el.is-locked.selected { outline-style: dashed; }
.board-lock-badge {
position: absolute;
top: 6px;
right: 6px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--color-text);
color: var(--color-bg);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
pointer-events: none;
z-index: 5;
}
.board-lock-badge svg { width: 10px; height: 10px; }
.eml-preview-text { min-height: 160px; font-size: var(--text-body); line-height: 1.5; }
.eml-image-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 10px;
max-height: 320px;
overflow-y: auto;
padding: 2px;
}
.eml-image-item {
display: block;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
overflow: hidden;
cursor: pointer;
background: var(--color-surface-2);
}
.eml-image-item img { display: block; width: 100%; height: 90px; object-fit: cover; }
.eml-image-item-foot {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
font-size: var(--text-meta);
color: var(--color-text-muted);
}
.eml-image-item-foot input[type="checkbox"] { flex-shrink: 0; }
.eml-image-item-foot span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.eml-ai-toolbar { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 6px; }
.eml-ai-blocks { display: flex; flex-direction: column; gap: 10px; }
.eml-ai-block { display: flex; flex-direction: column; gap: 4px; }
.eml-ai-block-label { font-size: var(--text-meta); color: var(--color-text-muted); font-weight: 600; }
.eml-link-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.eml-link-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
background: var(--color-surface-2);
cursor: pointer;
}
.eml-link-item-host { font-weight: 600; font-size: 12.5px; flex-shrink: 0; }
.eml-link-item-url {
font-size: var(--text-meta);
color: var(--color-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.board-sticky {
background: #fef08a; border-radius: 14px;
box-shadow: 0 1px 2px rgba(20, 21, 43, 0.06), 0 10px 24px -12px rgba(20, 21, 43, 0.22);
padding: 12px 14px; overflow: hidden;
}
.board-sticky-text {
width: 100%; height: 100%; font-size: var(--text-body); line-height: 1.4; color: #1a1a1a;
outline: none; overflow: auto; word-break: break-word; white-space: pre-wrap;
cursor: grab;
user-select: none;
}
.board-sticky-text[contenteditable="true"] { cursor: text; user-select: text; }
.board-shape {
border-radius: 14px;
box-shadow: 0 1px 2px rgba(20, 21, 43, 0.05), 0 8px 20px -12px rgba(20, 21, 43, 0.18);
}
.board-shape-ellipse { border-radius: 50%; }
.board-image {
border-radius: 16px; overflow: hidden; background: #fff; padding: 8px; box-sizing: border-box;
box-shadow: 0 1px 3px rgba(20, 21, 43, 0.08), 0 14px 28px -14px rgba(20, 21, 43, 0.28);
}
.board-image img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; border-radius: 10px; }
.board-link {
display: flex; align-items: center; gap: 8px; padding: 12px 14px;
background: #fff; border: 1px solid rgba(20, 21, 43, 0.06); border-radius: 14px;
box-shadow: 0 1px 2px rgba(20, 21, 43, 0.05), 0 10px 24px -12px rgba(20, 21, 43, 0.2);
}
.board-link-icon { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent); display: flex; align-items: center; justify-content: center; }
.board-link-icon svg { width: 13px; height: 13px; }
.board-link-body { min-width: 0; flex: 1; }
.board-link-title { font-size: 12.5px; font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-link-url { font-size: var(--text-meta); color: var(--color-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-link-open { flex-shrink: 0; color: var(--color-text-faint); display: flex; }
.board-link-open svg { width: 14px; height: 14px; }
.board-link-open:hover { color: var(--color-accent); }
.board-resize-handle {
display: none; position: absolute; right: -5px; bottom: -5px; width: 12px; height: 12px;
border-radius: 50%; background: var(--color-accent); border: 2px solid var(--color-surface);
cursor: nwse-resize;
}
.board-el.selected .board-resize-handle { display: block; }
.board-path { pointer-events: stroke; cursor: pointer; }
.board-line-hit {
fill: none; stroke: var(--color-accent); stroke-width: 20; stroke-linecap: round; stroke-linejoin: round;
opacity: 0; pointer-events: stroke; cursor: pointer; transition: opacity var(--dur-fast) var(--ease);
}
.board-line.selected .board-line-hit { opacity: 0.16; }
.board-line-dot { pointer-events: none; }
.board-text { padding: 6px 8px; cursor: grab; }
.board-text-content {
width: 100%; height: 100%; line-height: 1.3; outline: none; overflow: auto;
word-break: break-word; white-space: pre-wrap;
font-family: var(--font);
font-weight: 400;
cursor: grab;
user-select: none;
}
.board-text-content[contenteditable="true"] { cursor: text; user-select: text; }
.board-connector-port {
position: absolute; width: 10px; height: 10px; border-radius: 50%;
background: var(--color-accent); border: 2px solid var(--color-surface);
opacity: 0; transition: opacity var(--dur-fast) var(--ease); cursor: crosshair; z-index: 6; pointer-events: auto;
}
.board-connector-port-top { top: 0; left: 50%; transform: translate(-50%, -50%); }
.board-connector-port-bottom { top: 100%; left: 50%; transform: translate(-50%, -50%); }
.board-connector-port-left { top: 50%; left: 0; transform: translate(-50%, -50%); }
.board-connector-port-right { top: 50%; left: 100%; transform: translate(-50%, -50%); }
.board-el:hover .board-connector-port,
.board-el.selected .board-connector-port { opacity: 1; }
.board-viewport.board-ports-hidden .board-connector-port { display: none; }
.board-el.connector-target-hover {
outline: 2px dashed var(--color-accent); outline-offset: 3px;
}
.shotdoc-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); align-items: stretch; }
.shotdoc-picker-card {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-5) var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-text);
text-decoration: none;
transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.shotdoc-picker-card:hover { border-color: var(--color-accent); transform: translateY(-1px); }
.shotdoc-picker-body { min-width: 0; }
.shotdoc-badge-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
table.liste-kompakt th.spalte-dokumente,
table.liste-kompakt tbody tr > td.spalte-dokumente { min-width: 330px; }
table.liste-kompakt tbody tr > td.spalte-dokumente .shotdoc-badge-row {
white-space: normal;
margin-top: 0;
}
.shotdoc-zeile-link { display: block; color: inherit; text-decoration: none; min-width: 0; }
.shotdoc-zeile-link:hover .zellen-titel { color: var(--color-accent-strong); }
.shotdoc-badge {
display: flex; align-items: center; gap: 5px;
padding: 4px 9px;
border-radius: var(--radius-full);
font-size: var(--text-small); font-weight: 600;
background: var(--color-bg-alt); color: var(--color-text-faint);
}
.shotdoc-badge svg { width: 13px; height: 13px; }
.shotdoc-badge.is-active { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.shotdoc-badge.is-active.tone-success { background: var(--color-success-soft); color: var(--color-success); }
.shotdoc-badge.is-active.tone-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.shotdoc-badge.is-active.tone-danger { background: var(--color-danger-soft); color: var(--color-danger); }
.shotdoc-badge.is-active.tone-violet { background: var(--color-violet-soft); color: var(--color-accent-2); }
.shotdoc-badge-count { opacity: 0.7; }
.shotdoc-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.shotdoc-concept-form h3 { margin: 0 0 4px; }
.shotdoc-slot-card {
display: flex; align-items: center; gap: var(--space-3);
text-decoration: none; color: var(--color-text);
transition: border-color var(--dur-fast) var(--ease);
}
.shotdoc-slot-card:hover { border-color: var(--color-accent); }
.shotdoc-slot-card.is-empty { cursor: default; }
.shotdoc-slot-icon {
width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-sm);
background: var(--color-accent-soft); color: var(--color-accent);
display: flex; align-items: center; justify-content: center;
}
.shotdoc-slot-icon svg { width: 20px; height: 20px; }
.shotdoc-slot-title { font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.shotdoc-gen-badge { font-size: var(--text-small); font-weight: 600; padding: 2px 7px; border-radius: var(--radius-full); background: var(--color-bg-alt); color: var(--color-text-muted); }
.shotdoc-gen-badge.is-generating { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.shotdoc-gen-badge.is-failed { background: var(--color-danger-soft); color: var(--color-danger); }
.shotdoc-slot-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.shotdoc-manual-link {
background: none; border: none; padding: 0; margin: 0;
font-size: 12px; color: var(--color-text-faint); text-decoration: underline;
cursor: pointer;
}
.shotdoc-manual-link:hover { color: var(--color-accent); }
.shotdoc-bd-kopie { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.shotdoc-bd-kopie-zeile { display: flex; gap: var(--space-2); }
.shotdoc-bd-kopie-zeile .input { flex: 1; min-width: 0; }
.shotdoc-concept-drop {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-4);
border: 1.5px dashed var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg-alt);
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.shotdoc-concept-drop.is-dragover { border-color: var(--color-accent); background: var(--color-accent-soft); }
.shotdoc-concept-drop.has-file { border-style: solid; border-color: var(--color-accent); }
.shotdoc-concept-drop-icon {
width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--radius-sm);
background: var(--color-accent-soft); color: var(--color-accent);
display: flex; align-items: center; justify-content: center;
}
.shotdoc-concept-drop-icon svg { width: 18px; height: 18px; }
.shotdoc-concept-drop-text { min-width: 0; flex: 1; }
.shotdoc-concept-drop-title { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shotdoc-concept-drop-hint { font-size: var(--text-meta); color: var(--color-text-muted); margin-top: 2px; }
.shotdoc-concept-drop-remove { flex-shrink: 0; }
.shotdoc-batch-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-top: 10px; }
.shotdoc-batch-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-bottom: 1px solid var(--color-border); }
.shotdoc-batch-row:last-child { border-bottom: none; }
.shotdoc-batch-filename { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.shotdoc-batch-row select { width: 240px; max-width: 55%; flex-shrink: 0; }
.spinner-inline {
display: inline-block; width: 12px; height: 12px; border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff;
animation: spin 0.7s linear infinite; margin-right: 4px; vertical-align: -1px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.shotdoc-header { align-items: flex-start; flex-wrap: wrap; gap: var(--space-3); }
.shotdoc-title-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.shotdoc-title-input {
font-size: 20px; font-weight: 600; border: none; background: transparent;
padding: 2px 4px; border-radius: 6px; color: var(--color-text);
width: 200px; max-width: 100%;
}
.shotdoc-title-input:hover, .shotdoc-title-input:focus { background: var(--color-bg-alt); outline: none; }
.shotdoc-type-pill { font-size: var(--text-small); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 9px; border-radius: var(--radius-full); background: var(--color-accent-soft); color: var(--color-accent-strong); }
.shotdoc-type-pill-row { text-align: center; margin: 14px 0 6px; }
.shotdoc-header .field-row input { max-width: 220px; font-size: 12.5px; padding: 6px 9px; }
.shotdoc-scale-toggle {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg-alt);
}
.shotdoc-scale-btn {
border: none;
background: transparent;
color: var(--color-text-muted);
font-size: var(--text-meta);
font-weight: 600;
padding: 5px 10px;
border-radius: calc(var(--radius-md) - 2px);
cursor: pointer;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.shotdoc-scale-btn:hover { color: var(--color-text); }
.shotdoc-scale-btn.is-active { background: var(--color-surface); color: var(--color-accent-strong); box-shadow: var(--shadow-sm); }
.shotdoc-scale-toggle { height: 32px; }
.shotdoc-scale-symbol { display: inline-flex; align-items: center; padding: 0 6px 0 8px; color: var(--color-text-faint); }
.shotdoc-scale-symbol svg { width: 14px; height: 14px; }
.shotdoc-scale-btn { min-width: 28px; padding: 4px 8px; text-align: center; letter-spacing: .04em; }
.shotdoc-table { margin-top: var(--space-4); overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.shotdoc-row {
display: grid;
align-items: stretch;
border-bottom: 1px solid var(--color-border);
}
.shotdoc-row:last-child { border-bottom: none; }
.shotdoc-row.is-dragover { background: var(--color-accent-soft); }
.shotdoc-row.is-dragging { opacity: 0.4; }
.shotdoc-progress-status { justify-content: center; }
.shotdoc-row-delete-btn { border-left: 1px solid var(--color-border); border-radius: 0; color: var(--color-text-faint); }
.shotdoc-row-delete-btn:hover { color: var(--color-danger, #d64545); background: var(--color-danger-soft, rgba(214, 69, 69, 0.1)); }
.shotdoc-row-delete-label { display: none; }
.shotdoc-header-row { position: sticky; top: 0; background: var(--color-surface-2); z-index: 1; }
.shotdoc-th { position: relative; padding: 8px 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-faint); display: flex; align-items: center; justify-content: center; }
.shotdoc-th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 100%; text-align: center; }
.shotdoc-th-icon-label { display: flex; align-items: center; justify-content: center; }
.shotdoc-th-icon-label svg { width: 14px; height: 14px; }
.shotdoc-col-actions {
position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
display: flex; align-items: center; gap: 1px; padding-left: 10px;
background: linear-gradient(to right, transparent, var(--color-surface-2) 30%, var(--color-surface-2));
opacity: 0;
transition: opacity var(--dur-fast) var(--ease);
}
.shotdoc-th:hover .shotdoc-col-actions { opacity: 1; }
.shotdoc-col-menu-btn { flex-shrink: 0; }
.shotdoc-col-delete-btn:hover { color: var(--color-danger, #d64545); }
.shotdoc-col-grip {
position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
display: flex; align-items: center; justify-content: center; cursor: grab; color: var(--color-text-faint); opacity: 0; transition: opacity var(--dur-fast) var(--ease);
}
.shotdoc-col-grip svg { width: 12px; height: 12px; }
.shotdoc-th:hover .shotdoc-col-grip { opacity: 1; }
.shotdoc-col-grip:active { cursor: grabbing; }
.shotdoc-th.is-dragover { background: var(--color-accent-soft); }
.shotdoc-th.is-dragging { opacity: 0.4; }
.shotdoc-grip { display: flex; align-items: center; justify-content: center; cursor: grab; color: var(--color-text-faint); }
.shotdoc-grip svg { width: 14px; height: 14px; }
.shotdoc-grip:active { cursor: grabbing; }
.shotdoc-select-cell { display: flex; align-items: center; justify-content: center; }
.shotdoc-select-cell input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; }
.shotdoc-row.is-selected { background: var(--color-accent-soft); }
.shotdoc-row.ist-erledigt { background: color-mix(in srgb, var(--color-accent-soft) 45%, transparent); }
.shotdoc-row.ist-erledigt textarea, .shotdoc-row.ist-erledigt input:not([type]), .shotdoc-row.ist-erledigt input[type="text"],
.shotdoc-row.ist-erledigt .shotdoc-lesen, .shotdoc-row.ist-erledigt .kamera-feld { color: var(--color-text-muted); }
.shotdoc-merge-toggle-btn.is-active { background: var(--color-accent-soft); color: var(--color-accent-strong); border-color: var(--color-accent); }
.shotdoc-row input, .shotdoc-row textarea {
width: 100%; border: 1px solid transparent; background: transparent;
font-size: 12.5px; padding: 8px 9px; border-radius: 0; color: var(--color-text);
min-height: 36px; font-family: inherit;
}
.shotdoc-row textarea { resize: none; overflow: hidden; line-height: 1.4; }
.shotdoc-row input { min-height: auto; }
.shotdoc-row input:hover, .shotdoc-row textarea:hover,
.shotdoc-row input:focus, .shotdoc-row textarea:focus { border-color: var(--color-border-strong); background: var(--color-bg-alt); outline: none; }
.shotdoc-cell > input, .shotdoc-cell > textarea { border-right: 1px solid var(--color-border); }
.shotdoc-cell { display: contents; }
.shotdoc-shotnr-cell {
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 600; color: var(--color-text-faint);
border-right: 1px solid var(--color-border); padding: 8px 4px;
}
.shotdoc-section-row { grid-template-columns: 32px 1fr 36px !important; background: var(--color-bg-alt); }
.shotdoc-section-label { display: flex; align-items: center; padding: 4px 0; }
.shotdoc-section-row.hat-zeit .shotdoc-section-label { justify-content: center; }
.shotdoc-section-row.hat-zeit .shotdoc-section-label textarea, .shotdoc-section-row.hat-zeit .shotdoc-section-label .shotdoc-lesen { text-align: center; }
.shotdoc-section-zeit { display: flex; align-items: center; border-right: 1px solid var(--color-border); font-weight: 600; }
.shotdoc-section-label input, .shotdoc-section-label textarea { font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 11.5px !important; }
.shotdoc-image-cell { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px; border-right: 1px solid var(--color-border); transition: background var(--dur-fast) var(--ease); }
.shotdoc-image-cell.is-dragover { background: var(--color-accent-soft); }
.shotdoc-image-cell:focus,
.shotdoc-image-cell:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.shotdoc-tile { position: relative; }
.shotdoc-tile-add-btn {
position: absolute; top: var(--space-5); right: var(--space-5);
width: 30px; height: 30px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
border: 1.5px solid var(--color-border-strong);
background: var(--color-surface);
color: var(--color-accent);
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.shotdoc-tile-add-btn svg { width: 15px; height: 15px; }
.shotdoc-tile-add-btn:hover { background: var(--color-accent); border-color: transparent; color: #fff; transform: translateY(-1px); }
.shotdoc-tile-title { display: flex; align-items: center; gap: 10px; }
.shotdoc-tile-title .stat-icon { width: 30px; height: 30px; }
.shotdoc-tile-title .stat-icon svg { width: 14px; height: 14px; }
.shotdoc-image-thumb {
position: relative; width: 100%; height: 128px; border-radius: 8px; overflow: hidden;
border: 1px solid var(--color-border); cursor: pointer;
}
.shotdoc-image-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shotdoc-image-cell:not(.is-versioned) .shotdoc-image-thumb { height: auto; aspect-ratio: 16 / 9; }
.shotdoc-image-del {
position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%;
background: rgba(0,0,0,0.6); color: #fff; display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity var(--dur-fast) var(--ease); cursor: pointer;
}
.shotdoc-image-del svg { width: 11px; height: 11px; }
.shotdoc-image-thumb:hover .shotdoc-image-del { opacity: 1; }
.shotdoc-image-regen {
position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%;
background: rgba(0,0,0,0.6); color: #fff; display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity var(--dur-fast) var(--ease); cursor: pointer; font-size: 11px; border: none; padding: 0;
}
.shotdoc-image-thumb:hover .shotdoc-image-regen { opacity: 1; }
.shotdoc-image-regen:hover:not(:disabled) { background: rgba(0,0,0,0.85); }
.shotdoc-image-regen:disabled,
.shotdoc-image-thumb:hover .shotdoc-image-regen:disabled { opacity: 0; pointer-events: none; }
.shotdoc-image-add {
flex: 1; height: 60px; border-radius: 8px; border: 1.5px dashed var(--color-border-strong);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
color: var(--color-text-faint); font-size: 11px; font-weight: 600;
cursor: pointer; background: transparent;
}
.shotdoc-image-add:hover { border-color: var(--color-accent); color: var(--color-accent); }
.shotdoc-image-add svg { width: 15px; height: 15px; }
.shotdoc-image-gen {
flex-shrink: 0; width: 32px; height: 60px; border-radius: 8px; border: 1.5px dashed var(--color-border-strong);
display: flex; align-items: center; justify-content: center; font-size: 15px;
color: var(--color-text-faint); cursor: pointer; background: transparent;
}
.shotdoc-image-gen:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-soft); }
.shotdoc-image-gen:disabled { opacity: 0.3; cursor: not-allowed; }
.shotdoc-image-cell:not(.is-versioned) .shotdoc-image-regen,
.shotdoc-image-cell:not(.is-versioned) .shotdoc-image-del {
top: 6px; width: 26px; height: 26px; border-radius: 7px; background: rgba(22,21,18,.72);
}
.shotdoc-image-cell:not(.is-versioned) .shotdoc-image-del { right: 6px; }
.shotdoc-image-cell:not(.is-versioned) .shotdoc-image-regen { left: auto; right: 36px; font-size: 12.5px; }
.shotdoc-image-cell.hat-unter { flex-direction: column; align-items: stretch; gap: 8px; }
.shotdoc-image-thumb.ist-fassung img { opacity: .92; }
.bk-fassungen { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--color-text-muted); }
.bk-blaettern { display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: 7px; background: var(--color-surface, #fff); }
.bk-blaettern button { width: 26px; height: 24px; border: 0; background: none; padding: 0; display: flex; align-items: center; justify-content: center; color: var(--color-text); cursor: pointer; }
.bk-blaettern button:disabled { color: var(--color-text-faint); cursor: default; }
.bk-blaettern svg { width: 14px; height: 14px; }
.bk-zahl { font-variant-numeric: tabular-nums; color: var(--color-text); padding: 0 2px; }
.bk-verwendet { font-size: 11.5px; color: var(--color-accent); background: var(--color-accent-soft); padding: 1px 7px; border-radius: 999px; }
.bk-verwenden { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--color-accent); text-decoration: underline; cursor: pointer; }
.bk-info { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.4; }
.bk-laeuft { position: absolute; inset: 0; background: rgba(250,249,247,.72); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--color-text); cursor: default; }
.shotdoc-image-thumb.bk-platzhalter { cursor: default; background: var(--color-bg-alt); }
.bk-punkte { display: flex; gap: 5px; }
.bk-punkte i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); animation: bk-puls 1.1s infinite ease-in-out; }
.bk-punkte i:nth-child(2) { animation-delay: .18s; }
.bk-punkte i:nth-child(3) { animation-delay: .36s; }
@keyframes bk-puls { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.bk-pop { position: fixed; z-index: 120; width: 360px; background: var(--color-surface, #fff); border: 1px solid var(--color-border); border-radius: 14px; box-shadow: 0 12px 40px rgba(22,21,18,.16); padding: 16px; box-sizing: border-box; }
.bk-feld { display: flex; flex-direction: column; gap: 12px; }
.shotdoc-image-cell .bk-feld { padding: 14px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface, #fff); cursor: default; }
.bk-feld-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bk-feld-titel { font-size: 15px; font-weight: 600; }
.bk-zu { border: 0; background: none; padding: 4px; color: var(--color-text-faint); cursor: pointer; display: flex; }
.bk-zu svg { width: 15px; height: 15px; }
.bk-hinweis { width: 100%; box-sizing: border-box; min-height: 78px; border: 1.5px solid var(--color-accent); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px; line-height: 1.45; resize: vertical; }
.bk-hinweis:focus { outline: none; box-shadow: 0 0 0 3px var(--color-accent-soft); }
.bk-knoepfe { display: flex; gap: 8px; }
.bk-knoepfe .btn { flex: 1; justify-content: center; }
.bk-knoepfe .btn svg { width: 15px; height: 15px; }
.bk-erklaerung { margin: 0; font-size: 12px; color: var(--color-text-muted); line-height: 1.45; }
.bk-erklaerung b { color: var(--color-text); font-weight: 500; }
.sa-detail-bild .shotdoc-image-cell.hat-unter { aspect-ratio: auto; }
:root { --tbd-rot: #b42318; --tbd-hell: #fdecea; --tbd-linie: #f4c5bf; }
.tbd-huelle { display: flex; flex-direction: column; min-width: 0; position: relative; }
.tbd-huelle > textarea, .tbd-huelle > .shotdoc-lesen, .tbd-huelle > .kamera-feld, .tbd-huelle > .shotdoc-done-cell { flex: 1 1 auto; }
@media (min-width: 901px) { .shotdoc-cell > .tbd-huelle:not(.ist-bild) { border-right: 1px solid var(--color-border); } }
.tbd-huelle > textarea { border-right: 0 !important; }
.tbd-huelle.ist-tbd:not(.ist-bild) { background: var(--tbd-hell); box-shadow: inset 0 0 0 1.5px var(--tbd-linie); }
.tbd-huelle.ist-tbd:not(.ist-bild) textarea, .tbd-huelle.ist-tbd:not(.ist-bild) textarea:hover { background: transparent; }
.tbd-huelle.ist-bild.ist-tbd .shotdoc-image-thumb { outline: 2px solid var(--tbd-rot); outline-offset: -2px; }
.tbd-huelle.ist-bild.ist-tbd .shotdoc-image-thumb::before {
content: 'TBD'; position: absolute; left: 6px; top: 6px; z-index: 1; font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
color: #fff; background: var(--tbd-rot); padding: 1px 6px; border-radius: 5px; pointer-events: none;
}
.tbd-chip {
display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; line-height: 1.5;
color: #fff; background: var(--tbd-rot); padding: 0 6px; border-radius: 5px; border: 0; white-space: nowrap; font-family: inherit;
}
button.tbd-chip { cursor: pointer; }
.tbd-notiz { display: flex; gap: 6px; align-items: baseline; text-align: left; border: 0; background: none; padding: 2px 9px 8px; font: inherit; font-size: 12px; line-height: 1.4; color: var(--tbd-rot); cursor: pointer; }
.tbd-huelle.ist-bild .tbd-notiz { padding: 2px 6px 6px; }
.shotdoc-row.ist-tbd-zeile { background: var(--tbd-hell); box-shadow: inset 4px 0 0 var(--tbd-rot); }
.shotdoc-row .shotdoc-shotnr-cell:has(.tbd-chip) { flex-direction: column; justify-content: center; gap: 4px; }
.shotdoc-shotnr-cell .tbd-chip, .shotdoc-kennung .tbd-chip { width: auto; flex: none; }
.shotdoc-kennung .tbd-chip { align-self: flex-start; }
.tbd-zaehler { display: inline-flex; align-items: center; gap: 2px; height: 30px; padding: 0 3px 0 4px; border: 1px solid var(--tbd-linie); background: var(--tbd-hell); border-radius: 9px; vertical-align: middle; margin-left: 8px; }
.tbd-zaehler-zahl { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--tbd-rot); padding: 0 6px; cursor: pointer; white-space: nowrap; }
.tbd-pfeil { width: 24px; height: 24px; border: 0; background: none; color: var(--tbd-rot); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; border-radius: 6px; }
.tbd-pfeil:hover { background: rgba(180,35,24,.08); }
.tbd-pfeil svg { width: 15px; height: 15px; }
.tbd-blitz { animation: tbd-blitz 1.2s ease; }
@keyframes tbd-blitz { 0%, 40% { box-shadow: 0 0 0 3px var(--tbd-rot); } 100% { box-shadow: 0 0 0 0 transparent; } }
.tbd-menue { position: fixed; z-index: 130; width: 250px; background: var(--color-surface, #fff); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: 0 12px 40px rgba(22,21,18,.16); padding: 6px; display: flex; flex-direction: column; }
.tbd-menue-eintrag { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; background: none; border-radius: 8px; font: inherit; font-size: 14px; color: var(--color-text); text-align: left; cursor: pointer; }
.tbd-menue-eintrag svg { width: 15px; height: 15px; }
.tbd-menue-eintrag:hover { background: var(--color-bg-alt); }
.tbd-menue-eintrag.ist-tbd { color: var(--tbd-rot); font-weight: 500; }
.tbd-menue-eintrag.ist-tbd:hover { background: var(--tbd-hell); }
.tbd-menue-eintrag.ist-leise { color: var(--color-text-muted); }
.tbd-trenner { height: 1px; background: var(--color-border); margin: 4px 6px; }
.tbd-pop { position: fixed; z-index: 130; width: 300px; background: var(--color-surface, #fff); border: 1px solid var(--color-border); border-radius: 14px; box-shadow: 0 12px 40px rgba(22,21,18,.16); padding: 14px; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; }
.tbd-pop-kopf { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; }
.tbd-notiz-feld { width: 100%; box-sizing: border-box; min-height: 64px; border: 1.5px solid var(--tbd-rot); border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 14px; resize: vertical; }
.tbd-notiz-feld:focus { outline: none; box-shadow: 0 0 0 3px var(--tbd-hell); }
.tbd-pop-knoepfe { display: flex; gap: 8px; }
.tbd-pop-knoepfe .btn { flex: 1; justify-content: center; }
.btn.tbd-markieren { background: var(--tbd-rot); border-color: var(--tbd-rot); color: #fff; }
.tbd-pop-hinweis { font-size: 12px; color: var(--color-text-muted); }
.tbd-geklaert { position: fixed; z-index: 130; display: flex; align-items: center; gap: 8px; background: var(--color-surface, #fff); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(22,21,18,.14); padding: 6px 8px 6px 10px; font-size: 13px; max-width: 360px; }
.tbd-geklaert-notiz { color: var(--color-text-muted); }
.tbd-geklaert .btn svg { width: 13px; height: 13px; }
.kz-tbd { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--color-text-muted); margin-top: 4px; cursor: pointer; }
.tbd-export-haken { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.tbd-export-haken input { margin-top: 3px; }
.tbd-export-sub { display: block; font-size: 12.5px; color: var(--color-text-muted); margin-top: 2px; }
.sa-karte.ist-tbd-zeile { box-shadow: inset 4px 0 0 var(--tbd-rot); border-color: var(--tbd-linie); }
.sa-karte-bild { position: relative; }
.tbd-chip.ist-im-bild { position: absolute; right: 8px; top: 8px; z-index: 1; }
.sa-tbd { display: flex; gap: 6px; align-items: baseline; font-size: 13px; color: var(--tbd-rot); margin-bottom: 4px; }
.sa-zeile.ist-tbd-zeile { box-shadow: inset 3px 0 0 var(--tbd-rot); }
@media (max-width: 640px) {
.tbd-pop { left: 12px !important; right: 12px; bottom: 16px; top: auto !important; width: auto; }
.tbd-pfeil { display: none; }
.tbd-zaehler { margin-left: 0; }
}
@media (hover: none) {
.shotdoc-image-cell:not(.is-versioned) .shotdoc-image-regen,
.shotdoc-image-cell:not(.is-versioned) .shotdoc-image-del { opacity: 1; }
}
.shotdoc-done-cell { display: flex; align-items: center; justify-content: center; align-self: stretch; border-right: 1px solid var(--color-border); }
.shotdoc-done-cell input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; }
.done-kreis { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; border: 1.5px solid var(--color-border-strong); background: var(--color-surface);
display: inline-flex; align-items: center; justify-content: center; padding: 0; color: transparent; cursor: pointer;
transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.done-kreis:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-accent-soft); }
.done-kreis.an { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.done-kreis.an:hover:not(:disabled) { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: #fff; }
.done-kreis:disabled { cursor: default; }
.done-kreis:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.shotdoc-image-cell.is-versioned { flex-direction: column; align-items: stretch; gap: 4px; transition: background var(--dur-fast) var(--ease); border-radius: 6px; }
.shotdoc-image-cell.is-versioned.is-dragover { background: var(--color-accent-soft); }
.shotdoc-image-cell.is-versioned .shotdoc-image-thumb { flex: 0 0 auto; height: 234px; }
.shotdoc-image-cell.is-versioned.shotdoc-result-scale-small .shotdoc-image-thumb { height: 156px; }
.shotdoc-image-cell.is-versioned.shotdoc-result-scale-large .shotdoc-image-thumb { height: 268px; }
.shotdoc-image-cell.is-versioned .shotdoc-image-add { flex: 0 0 auto; width: 70%; height: 56px; margin: 0 auto; }
.shotdoc-image-cell.is-versioned .shotdoc-image-add svg { width: 22px; height: 22px; }
.shotdoc-image-version-select {
width: 100%;
font-size: var(--text-meta);
font-weight: 600;
padding: 6px 26px 6px 10px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
background-color: var(--color-surface);
color: var(--color-text-muted);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239598ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 13px 13px;
transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.shotdoc-image-version-select:hover { border-color: var(--color-border-strong); }
.shotdoc-image-version-select:focus {
outline: none;
border-color: var(--color-accent);
background-color: var(--color-surface-2);
}
.inspiration-board-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--space-4);
}
.inspiration-board-card {
position: relative;
display: block;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.inspiration-board-card:hover {
border-color: var(--color-accent-strong);
box-shadow: var(--shadow-md);
}
.inspiration-board-cover {
aspect-ratio: 4 / 3;
background: var(--color-bg-alt);
overflow: hidden;
}
.inspiration-board-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inspiration-board-cover.is-empty {
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-faint);
}
.inspiration-board-cover.is-empty svg { width: 30px; height: 30px; }
.inspiration-board-body { padding: 12px 14px; }
.inspiration-board-title {
font-weight: 600;
font-size: var(--text-entity-title);
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inspiration-board-meta { font-size: 12px; color: var(--color-text-muted); margin-top: 3px; }
.inspiration-board-menu-btn {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
color: var(--color-text);
box-shadow: var(--shadow-sm);
}
.inspiration-board-menu-btn svg { width: 14px; height: 14px; }
html[data-theme="dark"] .inspiration-board-menu-btn { background: rgba(21, 23, 28, 0.9); }
.inspiration-board-menu {
position: absolute;
top: 38px;
right: 8px;
z-index: 3;
display: none;
flex-direction: column;
min-width: 150px;
padding: 6px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-lg);
}
.inspiration-board-menu.is-open { display: flex; }
.inspiration-board-menu button {
text-align: left;
padding: 8px 9px;
border: none;
background: none;
border-radius: 6px;
font-size: var(--text-body);
color: var(--color-text);
cursor: pointer;
}
.inspiration-board-menu button:hover { background: var(--color-bg-alt); }
.inspiration-board-menu button.is-danger { color: var(--color-danger); }
.inspiration-board-menu button.is-danger:hover { background: var(--color-danger-soft); }
.inspiration-add-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.inspiration-add-row input {
flex: 1;
min-width: 220px;
padding: 9px 12px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
font-size: 13.5px;
font-family: inherit;
background: var(--color-surface-2);
color: var(--color-text);
}
.inspiration-add-row input:focus {
outline: none;
border-color: var(--color-accent);
background: var(--color-surface);
box-shadow: var(--shadow-glow);
}
.inspiration-masonry {
display: flex;
align-items: flex-start;
column-gap: var(--space-4);
gap: var(--space-4);
margin-top: var(--space-5);
}
.inspiration-spalte {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.inspiration-masonry > .empty-state { flex: 1 1 100%; }
.inspiration-card {
position: relative;
display: block;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
cursor: pointer;
box-shadow: var(--shadow-sm);
transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.inspiration-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.inspiration-card.is-loading {
display: flex;
align-items: center;
justify-content: center;
height: 140px;
cursor: default;
}
.inspiration-card img { width: 100%; display: block; }
.inspiration-card-noimage {
display: flex;
align-items: center;
justify-content: center;
height: 120px;
background: var(--color-bg-alt);
color: var(--color-text-faint);
}
.inspiration-card-noimage svg { width: 26px; height: 26px; }
.inspiration-card-body { padding: 10px 12px; }
.inspiration-card-title {
font-size: var(--text-body);
font-weight: 600;
color: var(--color-text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.inspiration-card-domain { font-size: var(--text-meta); color: var(--color-text-muted); margin-top: 3px; }
.inspiration-card-remove {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(15, 15, 20, 0.55);
border: none;
border-radius: 50%;
color: #fff;
opacity: 0;
cursor: pointer;
transition: opacity var(--dur-fast) var(--ease),
background-color var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease);
}
.inspiration-card-remove svg { width: 11px; height: 11px; }
.inspiration-card:hover .inspiration-card-remove { opacity: 1; }
.inspiration-card-remove:hover,
.inspiration-card-remove:focus-visible {
opacity: 1;
background: rgba(15, 15, 20, 0.78);
box-shadow: 0 0 0 1px var(--color-accent-strong);
outline: none;
}
.inspiration-lightbox img {
width: 100%;
border-radius: var(--radius-md);
margin-bottom: var(--space-4);
}
.inspiration-lightbox-body h3 { margin: 0 0 6px; }
.inspiration-lightbox-body .btn { margin-top: 10px; }
.branding-sections { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-5); }
.branding-section {
border: 1.5px dashed transparent;
border-radius: var(--radius-lg);
padding: var(--space-3);
margin: calc(var(--space-3) * -1);
transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.branding-section.is-dragover {
border-color: var(--color-accent);
background: var(--color-accent-soft);
}
.branding-section-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.branding-section-header h3 { margin: 0 0 2px; font-size: 15px; }
.branding-section-header p { margin: 0; font-size: 12.5px; }
.branding-ordnerleiste {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: var(--space-3);
}
.branding-chip {
display: inline-flex;
align-items: center;
gap: 7px;
max-width: 100%;
padding: 6px 10px 6px 9px;
border: 1px solid var(--color-border);
border-radius: 9px;
background: var(--color-bg-alt);
color: var(--color-text);
text-decoration: none;
font-size: 12.5px;
cursor: pointer;
transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.branding-chip:hover { background: var(--color-surface); border-color: var(--color-border-strong, var(--color-text-faint)); }
.branding-chip.is-dragover { border-color: var(--color-accent); background: var(--color-accent-soft); }
.branding-chip-symbol { display: inline-flex; color: var(--color-accent); flex-shrink: 0; }
.branding-chip-symbol svg { width: 14px; height: 14px; }
.branding-chip-name {
font-weight: 600;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.branding-chip-zahl {
flex-shrink: 0;
font-size: 11px;
color: var(--color-text-muted);
background: var(--color-surface);
border-radius: var(--radius-full);
padding: 1px 6px;
}
.branding-chip-zahl.is-leer { color: var(--color-text-faint); background: none; padding: 0; font-style: italic; }
.branding-chip-aktionen {
display: none;
align-items: center;
gap: 2px;
margin-left: 2px;
}
.branding-chip:hover .branding-chip-aktionen,
.branding-chip:focus-within .branding-chip-aktionen { display: inline-flex; }
.branding-chip-action {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
border-radius: var(--radius-sm);
background: none;
color: var(--color-text-faint);
cursor: pointer;
}
.branding-chip-action:hover { background: var(--color-bg-alt); color: var(--color-text); }
.branding-chip-action.is-danger:hover { background: var(--color-danger-soft); color: var(--color-danger); }
.branding-chip-action svg { width: 12px; height: 12px; }
.branding-section-titelzeile { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.branding-kopf-zahlen { font-size: 12px; color: var(--color-text-faint); }
.branding-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: var(--space-3);
}
.branding-empty {
grid-column: 1 / -1;
padding: var(--space-5);
text-align: center;
font-size: var(--text-body);
color: var(--color-text-muted);
background: var(--color-bg-alt);
border: 1px dashed var(--color-border);
border-radius: var(--radius-lg);
}
.branding-tile {
position: relative;
display: block;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
text-decoration: none;
color: inherit;
transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
cursor: pointer;
}
.branding-tile:hover { transform: translateY(-4px) scale(1.01); box-shadow: var(--shadow-lg); }
.branding-tile img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--color-bg-alt); }
.branding-tile-noimage {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
aspect-ratio: 16 / 9;
background: var(--color-bg-alt);
color: var(--color-text-faint);
}
.branding-tile-noimage svg { width: 30px; height: 30px; }
.branding-tile-ext { font-size: var(--text-small); font-weight: 600; letter-spacing: 0.03em; color: var(--color-text-muted); }
.branding-tile-body { padding: 9px 11px 10px; }
.branding-tile-title {
font-size: 13px;
font-weight: 600;
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.branding-tile-meta { font-size: var(--text-meta); color: var(--color-text-muted); margin-top: 2px; }
.branding-tile-actions {
position: absolute;
top: 6px;
right: 6px;
z-index: 2;
display: flex;
gap: 4px;
opacity: 0;
transition: opacity var(--dur-fast) var(--ease);
}
.branding-tile:hover .branding-tile-actions { opacity: 1; }
.branding-tile-action {
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(15, 15, 20, 0.55);
border: none;
border-radius: 50%;
color: #fff;
cursor: pointer;
transition: background var(--dur-fast) var(--ease);
}
.branding-tile-action:hover { background: rgba(15, 15, 20, 0.8); }
.branding-tile-action svg { width: 10px; height: 10px; }
.branding-tile-action.is-danger:hover { background: var(--color-danger, #d9483f); }
.branding-section-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.branding-select-toggle-btn.is-active { background: var(--color-accent-soft); color: var(--color-accent-strong); border-color: var(--color-accent); }
.branding-bulk-bar {
display: none;
align-items: center;
gap: 10px;
padding: 8px 12px;
margin: 10px 0;
background: var(--color-accent-soft);
border: 1px solid var(--color-accent);
border-radius: var(--radius-md);
font-size: 12.5px;
}
.branding-bulk-count { color: var(--color-accent-strong); font-weight: 600; margin-right: auto; }
.branding-tile.is-selected { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.branding-tile-select {
position: absolute;
top: 6px;
left: 6px;
z-index: 2;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(15, 15, 20, 0.55);
border-radius: 50%;
}
.branding-tile-select input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; }
.branding-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.branding-breadcrumb-item {
background: none; border: none; padding: 0; margin: 0;
color: var(--color-text-muted); font-size: 12.5px; cursor: pointer;
}
.branding-breadcrumb-item:hover { color: var(--color-accent); text-decoration: underline; }
.branding-breadcrumb-sep { color: var(--color-text-faint); font-size: 12.5px; }
.branding-breadcrumb-current { color: var(--color-text); font-size: 12.5px; font-weight: 600; }
.branding-tile-folder .branding-tile-noimage { color: var(--color-accent); background: var(--color-accent-soft); }
.branding-tile-folder .branding-tile-noimage svg { width: 30px; height: 30px; }
.branding-tile-folder.is-dragover { outline: 2px solid var(--color-accent); outline-offset: -2px; background: var(--color-accent-soft); }
.branding-tile-pdf-preview { object-fit: contain; background: var(--color-bg-alt); padding: 6px; box-sizing: border-box; }
.chat-page {
display: grid;
grid-template-columns: var(--chat-spalte, 280px) 1fr;
gap: var(--space-4);
min-height: 0;
position: relative;
}
.chat-griff {
position: absolute;
top: 0;
bottom: 0;
left: var(--chat-spalte, 280px);
width: var(--space-4);
cursor: col-resize;
z-index: 2;
touch-action: none;
}
.chat-griff::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
margin-left: -1px;
border-radius: var(--radius-full);
background: transparent;
transition: background 0.12s ease;
}
.chat-griff:hover::before { background: var(--color-border-strong); }
.chat-griff.ist-aktiv::before { background: var(--color-primary); }
.chat-page.ist-am-ziehen { user-select: none; }
.chat-page.ist-am-ziehen .chat-sidebar,
.chat-page.ist-am-ziehen .chat-thread { pointer-events: none; }
.app-shell-col:has(.chat-page) {
display: flex;
flex-direction: column;
height: 100vh;
height: 100dvh;
overflow: hidden;
}
.app-shell-col:has(.chat-page) > .main { flex: 1; min-height: 0; height: auto; }
.main:has(.chat-page) { display: flex; flex-direction: column; overflow: hidden; }
.main:has(.chat-page) > .chat-page { flex: 1; min-height: 0; }
.chat-sidebar {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
.chat-sidebar-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 10px 6px;
flex-shrink: 0;
}
.chat-sidebar-toolbar-title {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-muted);
}
.chat-new-channel-btn {
display: flex;
align-items: center;
gap: 4px;
padding: 5px 10px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
background: var(--color-bg-alt);
color: var(--color-text);
font-size: var(--text-meta);
font-weight: 600;
cursor: pointer;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.chat-new-channel-btn:hover { background: var(--color-accent-soft); color: var(--color-accent-strong); border-color: var(--color-accent-strong); }
.chat-new-channel-btn svg { width: 13px; height: 13px; }
.chat-conv-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 6px 6px; }
.chat-conv-section-label {
padding: 10px 10px 4px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-muted);
}
.chat-conv-section-label.is-toggle {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
border-radius: var(--radius-sm);
}
.chat-conv-section-label.is-toggle:hover { background: var(--color-bg-alt); }
.chat-conv-section-label.is-toggle svg { width: 12px; height: 12px; transition: transform var(--dur-fast) var(--ease); }
.chat-conv-section-label.is-toggle.is-expanded svg { transform: rotate(180deg); }
.chat-conv-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: var(--radius-md);
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease);
}
.chat-conv-item:hover { background: var(--color-bg-alt); }
.chat-conv-item.is-active { background: var(--color-bg-alt); }
.chat-conv-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--sidebar-active, var(--color-accent));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 12.5px;
flex-shrink: 0;
background-size: cover;
background-position: center;
}
.chat-conv-avatar-team { background: var(--color-accent); }
.chat-conv-avatar-team svg { width: 17px; height: 17px; }
.chat-conv-meta { min-width: 0; flex: 1; }
.chat-conv-name {
font-size: 13.5px;
font-weight: 600;
color: var(--color-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chat-conv-preview {
font-size: 12px;
color: var(--color-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 1px;
}
.chat-conv-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.chat-conv-time { font-size: var(--text-small); color: var(--color-text-muted); }
.chat-conv-unread-badge {
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: var(--radius-full);
background: var(--color-accent);
color: #fff;
font-size: var(--text-small);
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.chat-thread {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
}
.chat-thread-header {
padding: 14px var(--space-4);
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.chat-thread-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chat-thread-title-col { min-width: 0; }
.chat-thread-title {
font-weight: 600;
font-size: 14.5px;
color: var(--color-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
a.chat-thread-title {
display: block;
text-decoration: none;
}
a.chat-thread-title.ist-link { cursor: pointer; }
a.chat-thread-title.ist-link:hover { color: var(--color-accent); text-decoration: underline; }
a.chat-thread-title.ist-link:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
border-radius: 3px;
}
.chat-thread-subtitle { font-size: var(--text-meta); color: var(--color-text-muted); margin-top: 1px; }
.chat-back-btn {
display: none;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--color-bg-alt);
color: var(--color-text-muted);
border: 1px solid var(--color-border);
align-items: center;
justify-content: center;
flex-shrink: 0;
cursor: pointer;
}
.chat-back-btn svg { width: 15px; height: 15px; }
.chat-thread-options-wrap { position: relative; flex-shrink: 0; }
.chat-thread-options-btn {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
color: var(--color-text-muted);
cursor: pointer;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chat-thread-options-btn:hover { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.chat-thread-options-btn svg { width: 16px; height: 16px; }
.chat-thread-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
display: none;
width: 220px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
z-index: 60;
padding: 6px;
transform-origin: top right;
animation: panel-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chat-thread-menu.is-open { display: block; }
.chat-kontext { position: fixed; z-index: 300; width: 200px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 6px; }
.chat-thread-menu-item {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 9px 10px;
border-radius: var(--radius-sm);
background: none;
border: none;
text-align: left;
font-size: var(--text-body);
font-weight: 600;
color: var(--color-text);
cursor: pointer;
transition: background var(--dur-fast) var(--ease);
}
.chat-thread-menu-item:hover { background: var(--color-bg-alt); }
.chat-thread-menu-item svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--color-text-muted); }
.chat-thread-menu-item.is-danger { color: var(--color-danger); }
.chat-thread-menu-item.is-danger svg { color: var(--color-danger); }
.chat-thread-menu-divider { height: 1px; background: var(--color-border); margin: 6px 4px; }
.chat-member-picker {
display: grid;
grid-template-columns: repeat(auto-fill, 76px);
justify-content: start;
gap: 10px 6px;
max-height: 260px;
overflow-y: auto;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 10px;
}
.chat-member-picker .chat-member-picker-row {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
margin: 0;
padding: 8px 4px;
border: 1px solid transparent;
border-radius: var(--radius-md);
cursor: pointer;
text-align: center;
transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.chat-member-picker-row:hover { background: var(--color-bg-alt); }
.chat-member-picker-row:has(input:checked) {
background: var(--color-accent-soft);
border-color: var(--color-accent);
}
.chat-member-picker-row input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.chat-member-picker-avatar {
position: relative;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--color-accent);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-entity-title);
font-weight: 600;
flex-shrink: 0;
background-size: cover;
background-position: center;
}
.chat-member-picker-row:has(input:checked) .chat-member-picker-avatar::after {
content: '✓';
position: absolute;
bottom: -2px;
right: -2px;
width: 17px;
height: 17px;
border-radius: 50%;
background: var(--color-accent);
color: #fff;
font-size: 10px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--color-surface);
}
.chat-member-picker-name {
width: 100%;
font-size: 11px;
font-weight: 600;
color: var(--color-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chat-group-rename-row { display: flex; gap: 8px; }
.chat-group-rename-row input { flex: 1; }
.chat-messages {
flex: 1;
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: 10px;
}
.chat-messages-empty {
margin: auto;
color: var(--color-text-muted);
font-size: var(--text-body);
}
@keyframes chat-message-in {
from { opacity: 0; transform: translateY(8px) scale(0.97); }
to { opacity: 1; transform: none; }
}
.chat-message.is-new { animation: chat-message-in 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
.chat-message { display: flex; align-items: flex-end; gap: 8px; max-width: 70%; align-self: flex-start; }
.chat-message.is-mine { display: flex; flex-direction: column; align-items: flex-end; align-self: flex-end; gap: 0; }
.chat-message-col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.chat-message-avatar {
width: 26px;
height: 26px;
border-radius: 50%;
flex-shrink: 0;
background: hsl(var(--sender-hue, 210) 55% 45%);
background-size: cover;
background-position: center;
color: #fff;
font-size: 10px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.chat-message-sender {
font-size: 11px;
font-weight: 600;
color: hsl(var(--sender-hue, 210) 58% 40%);
margin: 0 4px 3px;
}
html[data-theme="dark"] .chat-message-sender { color: hsl(var(--sender-hue, 210) 65% 72%); }
.chat-message-bubble {
position: relative;
background: var(--color-bg-alt);
border-radius: var(--radius-md);
padding: 8px 12px;
box-shadow: var(--shadow-sm);
transition: opacity var(--dur-fast) var(--ease);
}
.chat-message.is-mine .chat-message-bubble {
background: var(--color-accent);
color: #fff;
padding-right: 30px;
}
@keyframes chat-message-pending-pulse {
0%, 100% { opacity: 0.6; }
50% { opacity: 0.85; }
}
.chat-message-bubble.is-pending {
animation: chat-message-pending-pulse 1.4s ease-in-out infinite;
box-shadow: none;
}
.chat-message-bubble.is-pending .chat-message-delete-btn { display: none; }
.chat-message-delete-btn {
position: absolute;
top: 4px;
right: 4px;
width: 20px;
height: 20px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.18);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0.55;
transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.chat-message-delete-btn:hover, .chat-message-delete-btn:focus-visible {
opacity: 1;
background: rgba(255, 255, 255, 0.32);
}
.chat-message-delete-btn svg { width: 11px; height: 11px; }
.chat-message-text { font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.chat-message-time {
font-size: 10px;
opacity: 0.65;
margin-top: 3px;
text-align: right;
}
.chat-composer {
display: flex;
align-items: flex-end;
gap: 8px;
padding: 10px var(--space-4);
border-top: 1px solid var(--color-border);
flex-shrink: 0;
}
.chat-input-wrap { position: relative; flex: 1; min-width: 0; display: flex; }
.chat-input-wrap .chat-input { flex: 1; width: 100%; }
.chat-input {
flex: 1;
resize: none;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 9px 12px;
font: inherit;
font-size: 13.5px;
color: var(--color-text);
background: var(--color-bg-alt);
max-height: 140px;
overflow-y: hidden;
}
.chat-input:focus { outline: none; border-color: var(--color-accent); }
.chat-send-btn {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--color-accent);
color: #fff;
border: none;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform var(--dur-fast) var(--ease);
}
.chat-send-btn:hover:not(:disabled) { transform: translateY(-1px); }
.chat-send-btn:disabled { opacity: 0.5; }
.chat-send-btn svg { width: 16px; height: 16px; }
.chat-draft-bar {
display: flex;
gap: 8px;
padding: 10px var(--space-4) 0;
overflow-x: auto;
overflow-y: hidden;
flex-shrink: 0;
}
.chat-draft-item {
display: flex;
align-items: center;
gap: 8px;
flex: none;
max-width: 260px;
padding: 6px 8px 6px 6px;
border-radius: var(--radius-md);
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
}
.chat-draft-thumb {
width: 34px; height: 34px; flex: none;
object-fit: cover;
border-radius: var(--radius-sm);
background: var(--color-surface-2);
}
.chat-draft-icon {
width: 34px; height: 34px; flex: none;
display: flex; align-items: center; justify-content: center;
border-radius: var(--radius-sm);
background: var(--color-surface-2);
color: var(--color-text-faint);
}
.chat-draft-icon svg { width: 17px; height: 17px; }
.chat-draft-name {
font-size: 12.5px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
min-width: 0;
}
.chat-draft-size { font-size: 11.5px; color: var(--color-text-faint); flex: none; font-variant-numeric: tabular-nums; }
.chat-draft-remove {
flex: none;
width: 20px; height: 20px;
display: flex; align-items: center; justify-content: center;
border: 0; padding: 0;
border-radius: 50%;
cursor: pointer;
font-size: 11px;
color: var(--color-text-faint);
background: transparent;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chat-draft-remove:hover { background: var(--color-danger-soft); color: var(--color-danger); }
.chat-thread.is-dropping,
.pd-chat-messages.is-dropping,
.pd-widget-body .is-dropping {
outline: 2px dashed var(--color-accent);
outline-offset: -6px;
background: var(--color-accent-soft);
}
.chat-attach-btn {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--color-bg-alt);
color: var(--color-text-muted);
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
cursor: pointer;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chat-attach-btn:hover:not(:disabled) { background: var(--color-accent-soft); color: var(--color-accent); }
.chat-attach-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.chat-attach-btn svg { width: 16px; height: 16px; }
.chat-emoji-wrap { position: relative; flex-shrink: 0; }
.chat-emoji-panel {
display: none;
position: absolute;
left: 0;
bottom: calc(100% + 8px);
width: 280px;
max-height: 320px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
flex-direction: column;
z-index: 40;
animation: panel-in 0.16s ease;
}
.chat-emoji-panel.is-open { display: flex; }
.chat-emoji-tabs {
display: flex;
gap: 2px;
padding: 6px;
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
overflow-x: auto;
}
.chat-emoji-tab {
border: none;
background: transparent;
border-radius: var(--radius-sm);
font-size: 15px;
line-height: 1;
padding: 6px;
cursor: pointer;
flex-shrink: 0;
opacity: 0.55;
transition: background var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.chat-emoji-tab:hover { opacity: 0.85; background: var(--color-bg-alt); }
.chat-emoji-tab.is-active { opacity: 1; background: var(--color-accent-soft); }
.chat-emoji-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
padding: 8px;
overflow-y: auto;
}
.chat-emoji-btn {
border: none;
background: transparent;
border-radius: var(--radius-sm);
font-size: 19px;
line-height: 1;
padding: 5px 0;
cursor: pointer;
transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.chat-emoji-btn:hover { background: var(--color-bg-alt); transform: scale(1.15); }
.chat-message-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.lv {
display: block;
margin-top: 7px;
border: 0;
border-left: 3px solid currentColor;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
background: rgba(0, 0, 0, .045);
color: inherit;
text-decoration: none;
transition: background var(--dur-fast) var(--ease);
}
.chat-message.is-mine .lv { background: rgba(255, 255, 255, .14); }
html[data-theme="dark"] .lv { background: rgba(255, 255, 255, .06); }
.lv:hover { background: rgba(0, 0, 0, .075); }
.chat-message.is-mine .lv:hover { background: rgba(255, 255, 255, .2); }
.lv.ist-eigen { border-left-color: hsl(var(--prod-hue, 210) 62% 48%); }
.chat-message.is-mine .lv.ist-eigen { border-left-color: rgba(255, 255, 255, .85); }
.lv-koerper { padding: 7px 10px 8px; min-width: 0; }
.lv-herkunft { font-size: 10.5px; font-weight: 600; letter-spacing: .02em; opacity: .62; }
.lv-titel {
font-size: 12.5px;
font-weight: 650;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: anywhere;
}
.lv-text {
font-size: 11.5px;
line-height: 1.4;
opacity: .72;
margin-top: 2px;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.lv-zahlen { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 11px; opacity: .8; margin-top: 4px; }
.lv-zahlen b { font-weight: 650; opacity: 1; }
.chat-menue-schicht { position: fixed; inset: 0; z-index: 3000; }
.chat-menue-schleier {
position: absolute;
inset: 0;
background: rgba(17, 21, 28, .2);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
animation: chat-menue-auf var(--dur-fast) var(--ease);
}
@keyframes chat-menue-auf { from { opacity: 0; } to { opacity: 1; } }
.chat-menue-saeule {
position: absolute;
display: flex;
flex-direction: column;
gap: 9px;
align-items: flex-start;
max-width: min(76vw, 420px);
animation: chat-menue-heben var(--dur-fast) var(--ease);
}
.chat-menue-saeule.ist-eigen { align-items: flex-end; }
@keyframes chat-menue-heben {
from { opacity: 0; transform: scale(.96); }
to   { opacity: 1; transform: scale(1); }
}
.chat-menue-saeule > .chat-message-bubble {
box-shadow: 0 14px 38px rgba(0, 0, 0, .28);
max-width: 100%;
}
.chat-menue-saeule .chat-message-delete-btn { display: none; }
.chat-menue-pille {
display: inline-flex;
align-items: center;
gap: 2px;
background: var(--color-surface);
border-radius: var(--radius-full);
box-shadow: 0 8px 26px rgba(0, 0, 0, .22);
padding: 5px 6px;
}
.chat-menue-pille button {
border: 0;
background: none;
font-size: 21px;
line-height: 1;
padding: 5px 6px;
border-radius: 50%;
cursor: pointer;
min-width: 34px;
min-height: 34px;
}
.chat-menue-pille button:hover { background: var(--color-bg-alt); }
.chat-menue-pille button.ist-meine { background: var(--color-accent-soft); }
.chat-menue {
min-width: 190px;
background: var(--color-surface);
border-radius: 13px;
box-shadow: 0 10px 30px rgba(0, 0, 0, .24);
overflow: hidden;
}
.chat-menue button {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
gap: 12px;
border: 0;
background: none;
padding: 11px 13px;
font-size: 13.5px;
font-family: inherit;
color: var(--color-text);
cursor: pointer;
text-align: left;
}
.chat-menue button + button { border-top: 1px solid var(--color-border); }
.chat-menue button:hover { background: var(--color-bg-alt); }
.chat-menue button.ist-rot { color: var(--color-danger); }
.chat-menue svg { width: 15px; height: 15px; opacity: .7; }
.chat-blasen-spalte { display: flex; flex-direction: column; min-width: 0; align-items: flex-start; }
.chat-message.is-mine .chat-blasen-spalte { align-items: flex-end; }
.chat-reaktionen {
display: inline-flex;
gap: 3px;
margin-top: -9px;
margin-left: 9px;
position: relative;
z-index: 1;
}
.chat-message.is-mine .chat-reaktionen { margin-left: 0; margin-right: 9px; }
.chat-reaktion {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 1px 7px 2px;
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
background: var(--color-surface);
box-shadow: var(--shadow-sm);
font-size: 12px;
font-family: inherit;
cursor: pointer;
}
.chat-reaktion b { font-size: 10.5px; font-weight: 650; color: var(--color-text-muted); }
.chat-reaktion.ist-meine { border-color: var(--color-accent); background: var(--color-accent-soft); }
.chat-reaktion.ist-meine b { color: var(--color-accent-strong); }
.chat-zitat {
max-width: 76%;
align-self: flex-start;
margin-left: 10px;
background: var(--color-bg-alt);
border-radius: var(--radius-md);
padding: 5px 9px;
opacity: .66;
transform: scale(.92);
transform-origin: left bottom;
}
.chat-message.is-mine .chat-zitat {
align-self: flex-end;
margin-left: 0;
margin-right: 10px;
transform-origin: right bottom;
}
.chat-zitat-wer { font-size: 10px; font-weight: 600; color: var(--color-text-muted); }
.chat-zitat-was {
font-size: 11.5px;
line-height: 1.35;
color: var(--color-text-muted);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: anywhere;
}
.chat-zitat.ist-weg .chat-zitat-was { font-style: italic; }
.chat-zitat-strich {
width: 2px;
height: 15px;
margin-left: 24px;
border-radius: 2px;
background: var(--color-border-strong);
opacity: .85;
flex: none;
}
.chat-message.is-mine .chat-zitat-strich {
align-self: flex-end;
margin-left: 0;
margin-right: 24px;
}
.chat-antwort-leiste {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 12px;
border-top: 1px solid var(--color-border);
background: var(--color-bg-alt);
}
.chat-antwort-zitat { flex: 1; min-width: 0; border-left: 3px solid var(--color-accent); padding-left: 8px; }
.chat-antwort-wer { font-size: 10.5px; font-weight: 600; color: var(--color-accent-strong); }
.chat-antwort-was {
font-size: 12px;
color: var(--color-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chat-antwort-weg {
flex: none;
width: 26px;
height: 26px;
border: 0;
border-radius: 50%;
background: none;
color: var(--color-text-faint);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.chat-antwort-weg:hover { background: var(--color-border); color: var(--color-text); }
.chat-antwort-weg svg { width: 14px; height: 14px; }
.chat-thread.hat-grund { position: relative; isolation: isolate; }
.chat-grund {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
border-radius: inherit;
}
.chat-grund-bild {
position: absolute;
inset: -40px;
background-size: cover;
background-position: center;
filter: blur(20px) saturate(.85);
transform: scale(1.06);
}
.chat-grund::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(rgba(255, 255, 255, .84), rgba(255, 255, 255, .93));
}
.chat-thread.hat-grund .chat-message:not(.is-mine) .chat-message-bubble {
background: var(--color-surface);
box-shadow: 0 2px 8px rgba(16, 24, 40, 0.16);
}
html[data-theme="dark"] .chat-thread.hat-grund .chat-message:not(.is-mine) .chat-message-bubble {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] .chat-grund::after {
background: linear-gradient(rgba(14, 17, 22, .82), rgba(14, 17, 22, .9));
}
.chat-message:not(.is-mine) .chat-message-link { color: var(--color-accent-strong); }
.pd-chat-msg:not(.is-mine) .chat-message-link { color: var(--color-accent-strong); }
.chat-message-image { display: block; margin-bottom: 6px; border: 0; padding: 0; background: none; border-radius: var(--radius-md); overflow: hidden; max-width: 260px; cursor: pointer; }
.chat-message-image img { display: block; width: 100%; max-height: 280px; object-fit: cover; }
.modal-backdrop.chat-image-modal { align-items: center; }
.modal.chat-image-modal { max-width: min(760px, 92vw); }
.chat-image-lightbox-img { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--radius-md); }
.chat-message-file {
display: flex;
align-items: center;
gap: 10px;
min-width: 200px;
border-radius: var(--radius-md);
padding: 8px 10px;
margin-bottom: 6px;
text-decoration: none;
color: inherit;
background: rgba(255, 255, 255, 0.16);
}
.chat-message:not(.is-mine) .chat-message-file { background: var(--color-surface); border: 1px solid var(--color-border); }
.chat-message-file-icon { flex-shrink: 0; display: flex; }
.chat-message-file-icon svg { width: 20px; height: 20px; }
.chat-message-file-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.chat-message-file-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-message-file-size { font-size: var(--text-small); opacity: 0.75; }
.chat-message-file-download { flex-shrink: 0; display: flex; cursor: pointer; opacity: 0.75; }
.chat-message-file-download svg { width: 14px; height: 14px; }
.chat-message-file-download:hover { opacity: 1; }
.chat-message-file.is-expired {
background: transparent;
border: 1px dashed var(--color-border);
opacity: 0.7;
cursor: default;
}
.chat-message:not(.is-mine) .chat-message-file.is-expired { background: transparent; }
.chat-message-file.is-expired .chat-message-file-name { font-weight: 500; text-decoration: line-through; }
.chat-push-banner {
display: flex;
align-items: center;
gap: 10px;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 10px 14px;
margin-bottom: var(--space-3);
font-size: var(--text-body);
color: var(--color-text);
}
.chat-push-banner svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-accent); }
.chat-push-banner .btn { margin-left: auto; flex-shrink: 0; }
.games-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 1100px) { .games-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .games-grid { grid-template-columns: 1fr; } }
.game-tile {
cursor: pointer;
padding: 0;
overflow: hidden;
transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.game-tile:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px -14px color-mix(in srgb, var(--spiel) 55%, transparent);
border-color: var(--spiel);
}
.game-tile-screen { position: relative; aspect-ratio: 3 / 2; background: #12141c; }
.game-tile-preview { position: absolute; inset: 0; }
.game-tile-preview svg { display: block; width: 100%; height: 100%; }
.game-tile-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.game-tile-neu {
position: absolute;
top: 8px;
left: 8px;
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 50%;
background: rgba(0, 0, 0, 0.45);
color: #fff;
cursor: pointer;
opacity: 0;
transition: opacity var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.game-tile:hover .game-tile-neu { opacity: 1; }
.game-tile-neu:hover { border-color: var(--spiel); }
.game-tile-neu:focus-visible { opacity: 1; outline: 2px solid var(--spiel); outline-offset: 2px; }
.game-tile-neu svg { width: 14px; height: 14px; }
.game-tile.ist-am-bauen .game-tile-preview { opacity: 0.35; }
.game-tile.ist-am-bauen .game-tile-neu { opacity: 1; pointer-events: none; }
.game-tile.ist-am-bauen .game-tile-neu svg { animation: game-tile-dreht 1.1s linear infinite; }
@keyframes game-tile-dreht { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.game-tile.ist-am-bauen .game-tile-neu svg { animation: none; }
}
.game-tile-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--spiel); flex: none; }
.game-tile-name { font-size: 14px; font-weight: 590; letter-spacing: -0.012em; margin-right: auto; }
.game-tile-play {
position: absolute; top: 10px; right: 10px;
width: 30px; height: 30px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--spiel) 88%, #000);
color: #fff;
opacity: 0; transform: scale(0.7);
transition: opacity var(--dur-fast) var(--ease), transform var(--dur-base) var(--ease);
}
.game-tile-play svg { width: 16px; height: 16px; }
.game-tile:hover .game-tile-play { opacity: 1; transform: scale(1); }
.game-tile-foot {
display: flex; align-items: center; gap: 8px;
padding: 13px 15px;
font-size: 12.5px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.game-tile-stat {
flex: none;
color: var(--color-text-faint);
max-width: 46%;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.game-tile-stat.is-leer { font-style: italic; opacity: 0.7; }
.game-tile-own {
flex: none;
min-width: 26px;
padding: 1px 7px;
border-radius: var(--radius-full);
text-align: center;
font-weight: 600;
font-size: 11.5px;
font-variant-numeric: tabular-nums;
color: var(--color-text);
background: color-mix(in srgb, var(--color-text) 10%, transparent);
}
.modal.is-game { max-width: 1120px; }
.game-modal-body { display: flex; gap: var(--space-5); align-items: flex-start; position: relative; }
.game-play-area { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.game-host { width: 100%; }
.game-stats-bar { display: flex; gap: var(--space-5); padding: 0 2px; }
.game-stat { display: flex; flex-direction: column; gap: 1px; }
.game-stat-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-text-faint); }
.game-stat-value { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.game-canvas-wrap {
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
background: linear-gradient(180deg, #16181e 0%, #0d0f14 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 22px;
padding: 18px;
isolation: isolate;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 32px 64px -32px rgba(0, 0, 0, 0.85);
}
.game-canvas-wrap > * { position: relative; z-index: 1; }
.game-crt {
position: absolute;
inset: 0;
z-index: 5;
pointer-events: none;
overflow: hidden;
border-radius: 22px;
background: #05060a;
animation: crt-an 0.62s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes crt-an {
0%   { clip-path: inset(0 0 0 0); }
55%  { clip-path: inset(0 0 0 0); }
100% { clip-path: inset(50% 0 50% 0); }
}
.game-crt-strahl {
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 2px;
transform: translateY(-50%) scaleX(0);
background: linear-gradient(90deg, transparent, #fff 12%, #fff 88%, transparent);
box-shadow: 0 0 18px 4px rgba(255, 255, 255, 0.55);
animation: crt-strahl 0.62s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes crt-strahl {
0%   { transform: translateY(-50%) scaleX(0);    opacity: 0; }
18%  { transform: translateY(-50%) scaleX(1);    opacity: 1; }
55%  { transform: translateY(-50%) scaleX(1);    opacity: 1; }
100% { transform: translateY(-50%) scaleX(1);    opacity: 0; }
}
.game-crt-titel {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: clamp(26px, 7vw, 52px);
font-weight: 600;
letter-spacing: -0.03em;
color: var(--spiel, #fff);
text-shadow: 0 0 24px color-mix(in srgb, var(--spiel, #fff) 60%, transparent);
animation: crt-titel 0.88s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.game-crt-titel::before,
.game-crt-titel::after {
content: attr(data-text);
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
mix-blend-mode: screen;
}
.game-crt-titel::before { color: #00e5ff; animation: crt-glitch-a 0.34s steps(2, end) 2; }
.game-crt-titel::after  { color: #ff2f6d; animation: crt-glitch-b 0.34s steps(2, end) 2; }
@keyframes crt-titel {
0%   { opacity: 0; transform: scale(1.14); }
22%  { opacity: 1; transform: scale(1); }
62%  { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(0.98); }
}
@keyframes crt-glitch-a {
0%, 100% { transform: translate(0, 0); opacity: 0; }
50%      { transform: translate(-3px, 1px); opacity: 0.75; }
}
@keyframes crt-glitch-b {
0%, 100% { transform: translate(0, 0); opacity: 0; }
50%      { transform: translate(3px, -1px); opacity: 0.75; }
}
.game-canvas-wrap.ist-angegangen {
animation: game-faehrt-hoch 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes game-faehrt-hoch {
0% {
transform: scale(0.96);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 32px 64px -32px rgba(0, 0, 0, 0.85);
}
45% {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 0 0 1px var(--spiel, transparent),
0 0 44px -6px var(--spiel, transparent),
0 32px 64px -32px rgba(0, 0, 0, 0.85);
}
100% {
transform: scale(1);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 32px 64px -32px rgba(0, 0, 0, 0.85);
}
}
@media (prefers-reduced-motion: reduce) {
.game-crt, .game-crt-strahl, .game-crt-titel,
.game-crt-titel::before, .game-crt-titel::after,
.game-canvas-wrap.ist-angegangen { animation: none; }
.game-crt { display: none; }
}
.game-drehen { display: none; }
.game-drehen.is-an {
position: absolute;
inset: 0;
z-index: 40;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
text-align: center;
padding: var(--space-5);
border-radius: var(--radius-lg);
background: rgba(10, 12, 16, 0.82);
backdrop-filter: blur(24px) saturate(140%);
-webkit-backdrop-filter: blur(24px) saturate(140%);
}
.game-drehen-geraet {
width: 54px;
height: 92px;
border: 2.5px solid rgba(255, 255, 255, 0.9);
border-radius: 11px;
padding: 7px 5px;
animation: dreh-geraet 2.4s var(--ease) infinite;
}
.game-drehen-schirm {
width: 100%;
height: 100%;
border-radius: 4px;
background: var(--spiel, #22b8d1);
opacity: 0.55;
}
@keyframes dreh-geraet {
0%, 22%   { transform: rotate(0deg); }
45%, 78%  { transform: rotate(-90deg); }
100%      { transform: rotate(0deg); }
}
.game-drehen-titel {
font-size: 19px;
font-weight: 650;
color: #fff;
letter-spacing: -0.01em;
}
.game-drehen-text {
font-size: 13.5px;
color: rgba(255, 255, 255, 0.62);
max-width: 260px;
}
.game-drehen-trotzdem {
margin-top: 4px;
background: none;
border: none;
padding: 8px 12px;
font-size: 12.5px;
color: rgba(255, 255, 255, 0.5);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.game-drehen-trotzdem:hover { color: rgba(255, 255, 255, 0.85); }
@media (prefers-reduced-motion: reduce) {
.game-drehen-geraet { animation: none; transform: rotate(-90deg); }
}
.game-pad {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 10px;
pointer-events: none;
}
.game-pad-seite { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.game-pad-reihe { display: flex; gap: 8px; }
.game-pad-taste {
pointer-events: auto;
touch-action: none;
-webkit-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
width: 52px;
height: 52px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.28);
background: rgba(12, 14, 20, 0.42);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: rgba(255, 255, 255, 0.88);
font-size: 20px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.game-pad-taste.is-gedrueckt {
background: color-mix(in srgb, var(--spiel, #22b8d1) 55%, rgba(12, 14, 20, 0.5));
border-color: var(--spiel, #22b8d1);
transform: scale(0.94);
}
@media (hover: hover) and (pointer: fine) {
.game-pad { display: none; }
}
.game-score {
display: flex;
align-items: center;
gap: 9px;
font-size: 13px;
font-weight: 590;
letter-spacing: -0.005em;
color: #fff;
font-variant-numeric: tabular-nums;
}
.game-score::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--spiel);
flex: none;
}
.game-canvas-wrap > .g2048-grid,
.game-canvas-wrap > .mine-grid,
.game-canvas-wrap > .chess-board {
width: min(100%, 62vh, 560px);
margin-inline: auto;
}
.chess-status-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chess-resign-btn { flex-shrink: 0; }
.game-canvas {
max-width: min(100%, var(--spiel-breite, 100%));
margin-left: auto;
margin-right: auto;
}
.game-canvas {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius-sm);
touch-action: none;
cursor: crosshair;
}
.game-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
border-radius: var(--radius-md);
text-align: center;
padding: var(--space-5);
overflow: hidden;
border-radius: 22px;
background: rgba(10, 12, 16, 0.52);
backdrop-filter: blur(30px) saturate(150%);
-webkit-backdrop-filter: blur(30px) saturate(150%);
animation: panel-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.game-overlay > * { position: relative; z-index: 1; }
.game-overlay-title {
font-size: 30px;
font-weight: 600;
letter-spacing: -0.026em;
color: #fff;
}
.game-overlay-subtitle {
font-size: 13px;
line-height: 2;
color: rgba(255, 255, 255, 0.74);
max-width: 400px;
}
.game-key {
display: inline-block;
font-family: inherit;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.01em;
padding: 3px 8px;
margin: 0 2px;
border-radius: 6px;
color: #fff;
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.16);
white-space: nowrap;
}
.game-start-btn {
font: inherit;
font-weight: 590;
font-size: 14px;
letter-spacing: -0.01em;
padding: 11px 30px;
border: 0;
border-radius: var(--radius-full);
cursor: pointer;
color: #0c0e14;
background: #fff;
box-shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.9);
transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.game-start-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 32px -12px rgba(0, 0, 0, 0.95); }
.game-start-btn:active { transform: translateY(0); }
.game-leaderboard-panel {
width: 260px;
flex-shrink: 0;
align-self: stretch;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-4);
}
.game-leaderboard-panel h3 {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--color-text-faint);
margin-bottom: var(--space-3);
}
.game-leaderboard-list { display: flex; flex-direction: column; gap: 3px; max-height: 460px; overflow-y: auto; }
.game-leaderboard-row {
display: flex;
align-items: center;
gap: 9px;
padding: 6px 8px;
border-radius: var(--radius-sm);
font-size: 13px;
}
.game-leaderboard-row.is-own { background: var(--color-accent-soft); font-weight: 600; }
.game-leaderboard-rank {
flex: none;
width: 21px; height: 21px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
font-size: 11px;
font-weight: 600;
color: var(--color-text-faint);
}
.game-leaderboard-row.is-gold .game-leaderboard-rank { background: linear-gradient(150deg, #f5d47a, #d9a520); color: #3d2c00; }
.game-leaderboard-row.is-silber .game-leaderboard-rank { background: linear-gradient(150deg, #e2e6ec, #a8b0bd); color: #2b3038; }
.game-leaderboard-row.is-bronze .game-leaderboard-rank { background: linear-gradient(150deg, #e0a97a, #b57140); color: #3a1f0a; }
.game-leaderboard-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-leaderboard-score { font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.g2048-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2.4%;
aspect-ratio: 1;
background: #0a0c11;
border-radius: 16px;
padding: 2.4%;
container-type: inline-size;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.g2048-cell {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 11%;
background: rgba(255, 255, 255, 0.035);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
font-size: 7.4cqi;
font-weight: 600;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
color: #fff;
transition: background 90ms var(--ease), color 90ms var(--ease), box-shadow 90ms var(--ease);
}
.g2048-cell[class*="v"] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.g2048-cell.v2    { background: #2f3440; }
.g2048-cell.v4    { background: #3d4454; }
.g2048-cell.v8    { background: #3a5ba8; }
.g2048-cell.v16   { background: #4a76d4; }
.g2048-cell.v32   { background: #7059d8; }
.g2048-cell.v64   { background: #9358e0; }
.g2048-cell.v128  { background: #c94fb4; font-size: 6.4cqi; }
.g2048-cell.v256  { background: #e0475f; font-size: 6.4cqi; }
.g2048-cell.v512  { background: #f0913a; font-size: 6.4cqi; color: #1a1206; }
.g2048-cell.v1024 { background: #f5c542; font-size: 5.4cqi; color: #1a1400; }
.g2048-cell.v2048 { background: #37d99b; font-size: 5.4cqi; color: #05231a; }
.g2048-cell.vmax  { background: #ffffff; font-size: 5.4cqi; color: #0a0c11; }
@keyframes g2048-neu {
from { transform: scale(0.55); opacity: 0; }
to   { transform: scale(1); opacity: 1; }
}
@keyframes g2048-verschmolzen {
0%   { transform: scale(1); }
55%  { transform: scale(1.13); }
100% { transform: scale(1); }
}
.g2048-cell.is-neu { animation: g2048-neu 140ms cubic-bezier(0.22, 1.2, 0.36, 1); }
.g2048-cell.is-verschmolzen { animation: g2048-verschmolzen 180ms cubic-bezier(0.34, 1.5, 0.64, 1); }
@media (prefers-reduced-motion: reduce) {
.g2048-cell.is-neu, .g2048-cell.is-verschmolzen { animation: none; }
}
.mine-grid {
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: 1.1%;
aspect-ratio: 1;
background: #0a0c11;
border-radius: 16px;
padding: 1.6%;
container-type: inline-size;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.mine-cell {
aspect-ratio: 1;
border: none;
border-radius: 14%;
background: linear-gradient(180deg, #333a4a 0%, #2a303e 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
color: #fff;
font-weight: 650;
font-size: 5.6cqi;
font-variant-numeric: tabular-nums;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background 90ms var(--ease), box-shadow 90ms var(--ease);
}
.mine-cell:hover { background: linear-gradient(180deg, #3d4557 0%, #333a4a 100%); }
.mine-cell.is-revealed {
background: rgba(255, 255, 255, 0.035);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
cursor: default;
}
.mine-cell.is-revealed:hover { background: rgba(255, 255, 255, 0.035); }
.mine-cell.is-mine {
background: #e0455f;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
color: #fff;
}
.mine-cell.is-flagged { background: linear-gradient(180deg, #3f4657 0%, #343b4c 100%); }
.mine-cell.n1 { color: #6fa8ff; }
.mine-cell.n2 { color: #4ed88a; }
.mine-cell.n3 { color: #ff7a6b; }
.mine-cell.n4 { color: #b78cff; }
.mine-cell.n5 { color: #ffb454; }
.mine-cell.n6 { color: #45d6e0; }
.mine-cell.n7 { color: #ff5fa8; }
.mine-cell.n8 { color: #ffffff; }
.chess-board {
display: grid;
grid-template-columns: repeat(8, 1fr);
aspect-ratio: 1;
border-radius: var(--radius-sm);
overflow: hidden;
border: 1px solid var(--color-border);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.chess-cell {
aspect-ratio: 1;
border: none;
display: flex;
align-items: center;
justify-content: center;
font-size: clamp(20px, 4vw, 34px);
line-height: 1;
cursor: pointer;
padding: 0;
}
.chess-cell.is-light {
background:
repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.045) 0px, rgba(255, 255, 255, 0.045) 1px, transparent 1px, transparent 6px),
radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.16), transparent 66%),
#d9c3a0;
box-shadow: inset 0 0 12px rgba(90, 60, 30, 0.14);
}
.chess-cell.is-dark {
background:
repeating-linear-gradient(115deg, rgba(0, 0, 0, 0.14) 0px, rgba(0, 0, 0, 0.14) 1px, transparent 1px, transparent 6px),
radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.07), transparent 66%),
#7d5a3c;
box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.3);
}
.chess-cell.is-selected {
background: #b9d98a;
box-shadow: inset 0 0 0 3px rgba(90, 130, 40, 0.7);
}
.chess-cell.is-target { position: relative; box-shadow: none; }
.chess-cell.is-target::after {
content: "";
position: absolute;
width: 26%; height: 26%;
border-radius: 50%;
background: rgba(30, 45, 20, 0.42);
pointer-events: none;
}
.chess-cell.is-target:not(:empty)::after {
width: 84%; height: 84%;
background: transparent;
border: 4px solid rgba(30, 45, 20, 0.4);
}
.chess-cell.is-check {
background: radial-gradient(circle, #ff8a8a 15%, #e0455f 78%);
}
.chess-piece {
width: 78%;
height: 78%;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.45));
}
.chess-piece img { width: 100%; height: 100%; object-fit: contain; }
.chess-setup-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.chess-setup-option {
padding: 7px 14px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.8);
font-size: var(--text-body);
font-weight: 600;
cursor: pointer;
}
.chess-setup-option:hover { background: rgba(255, 255, 255, 0.12); }
.chess-setup-option.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.chess-board.is-computer-turn { opacity: 0.6; pointer-events: none; }
.chess-game-list { display: flex; flex-direction: column; gap: 6px; max-height: 180px; overflow-y: auto; width: 100%; max-width: 320px; }
.chess-game-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.05);
color: #fff;
font-size: var(--text-body);
cursor: pointer;
text-align: left;
}
.chess-game-row:hover { background: rgba(255, 255, 255, 0.1); }
.chess-game-row-name { font-weight: 600; }
.chess-game-row-badge { font-size: var(--text-meta); color: rgba(255, 255, 255, 0.6); flex-shrink: 0; }
.chess-game-row-badge.is-your-turn { color: #2fbf8f; font-weight: 600; }
.chess-game-row-badge.is-done { color: rgba(255, 255, 255, 0.4); }
.chess-game-list-empty { font-size: var(--text-meta); color: rgba(255, 255, 255, 0.55); }
.receipt-supplier-cell {
display: inline-block;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: bottom;
}
.receipt-paid-btn.is-paid {
color: var(--color-success);
background: transparent;
border: 1px solid var(--color-success);
}
.receipt-preview-cell { display: flex; align-items: center; justify-content: center; gap: 2px; }
.receipt-qr-btn { opacity: 0.34; transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.receipt-qr-btn:hover { opacity: 1; }
.receipt-qr-btn.is-bereit { opacity: 0.75; color: var(--color-success); }
.receipt-qr-btn.is-bereit:hover { opacity: 1; }
.receipt-qr-btn.is-warnung { opacity: 1; color: var(--color-danger); }
.receipt-bank-intro { margin-bottom: var(--space-3); }
.receipt-iban-input {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
.receipt-iban-input.is-fehler { border-color: var(--color-danger); }
.receipt-iban-pruef { font-size: 12px; margin-top: 4px; color: var(--color-text-faint); }
.receipt-iban-pruef.is-ok { color: var(--color-success); }
.receipt-iban-pruef.is-fehler { color: var(--color-danger); }
.receipt-iban-hinweis {
font-size: 12.5px;
line-height: 1.6;
padding: 10px 12px;
border-radius: var(--radius-sm);
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
margin-bottom: var(--space-3);
}
.receipt-iban-hinweis.is-warnung {
background: var(--color-danger-soft);
border-color: var(--color-danger);
color: var(--color-text);
}
.receipt-iban-paar { margin: 7px 0; display: flex; flex-direction: column; gap: 3px; }
.receipt-iban-paar code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-variant-numeric: tabular-nums;
font-size: 12.5px;
}
.modal.is-receipt { max-width: 680px; }
.receipt-modal-grid { display: grid; grid-template-columns: minmax(0, 200px) 1fr; gap: var(--space-4); align-items: start; }
.receipt-modal-preview { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; }
.receipt-preview-img { width: 100%; max-height: 260px; object-fit: contain; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-bg-alt); }
.receipt-modal-form { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.bf { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bf-feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bf .bf-feld.field { margin-bottom: 0; }
.bf .bf-feld > label { font-size: 13px; font-weight: 500; color: var(--color-text); margin-bottom: 0; }
.bf-pflicht { color: var(--color-text-muted); }
.bf input[type="text"], .bf input[type="date"], .bf select { width: 100%; height: 42px; box-sizing: border-box; min-width: 0; }
.bf-reihe { display: flex; gap: 10px; align-items: center; min-width: 0; }
.bf-reihe > input { flex: 1 1 0; }
.bf-reihe.ist-gleich > * { flex: 1 1 0; min-width: 0; }
.bf-reihe > .bf-art { flex: 0 0 108px; width: 108px; }
.bf-einheit { flex: 1 1 0; min-width: 0; display: flex; height: 42px; box-sizing: border-box; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface); }
.bf-einheit:last-child { flex: 0 0 108px; }
.bf .bf-einheit input, .bf .bf-einheit input:focus { border: 0; border-radius: 0; height: 40px; flex: 1; min-width: 0; background: transparent; box-shadow: none; }
.bf-einheit:focus-within { border-color: var(--color-accent); }
.bf-einheit-zeichen { flex: 0 0 38px; display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--color-border); color: var(--color-text-muted); background: var(--color-bg-alt); font-size: 14px; }
.bf-einheit.ist-gerechnet, .bf input.ist-gerechnet { border-color: var(--color-accent); background: var(--color-accent-soft, #e7f2ec); }
.bf-posten-liste { display: flex; flex-direction: column; gap: 12px; }
.bf-posten { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-alt); }
.bf-posten-weg { position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; border: 0; background: none; color: var(--color-text-faint); cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); }
.bf-posten-weg:hover { color: var(--color-danger); }
.bf-posten-weg svg { width: 16px; height: 16px; }
.bf-posten-neu { align-self: flex-start; }
.bf-summe { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--color-text-muted); flex-wrap: wrap; }
.bf-summe-wert { color: var(--color-text); text-align: right; }
.bf-trenner { height: 1px; background: var(--color-border); }
.bf-unten { align-items: flex-end; }
.bf-privat { display: flex; align-items: center; gap: 8px; height: 42px; font-size: 14px; cursor: pointer; }
.bf-laedt { font-size: 12.5px; color: var(--color-text-muted); padding: 8px 0; }
.bf input[type="date"].ist-leer:not(:focus)::-webkit-datetime-edit { color: transparent; }
#outlet > .page-header + .year-pills { margin-top: var(--space-4); }
.receipt-filter-bar { margin: 0 0 var(--space-4); }
.receipt-filter-bar > .year-pills { margin-bottom: var(--space-4); }
.beleg-archiv.ist-geteilt .filetransfer-dropzone {
padding: var(--space-3);
min-height: 0;
}
.beleg-archiv.ist-geteilt .filetransfer-dropzone svg { width: 20px; height: 20px; }
.beleg-archiv.ist-geteilt .filetransfer-dropzone .text-muted { display: none; }
.beleg-archiv.ist-geteilt .receipt-filter-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4) var(--space-3);
}
.beleg-archiv.ist-geteilt .receipt-filter-bar > * { margin: 0; }
.beleg-archiv.ist-geteilt .receipt-filter-bar > .filter-bar { flex: 1 1 100%; }
.beleg-geteilt {
display: grid;
grid-template-columns: minmax(380px, 1fr) 1fr;
gap: var(--space-4);
height: 60vh;
min-height: 420px;
}
.beleg-liste {
overflow-y: auto;
border-right: 1px solid var(--color-border);
padding-right: var(--space-3);
}
.beleg-tafel {
display: grid;
grid-template-rows: minmax(0, 1fr) auto auto;
gap: var(--space-3);
min-height: 0;
overflow: hidden;
}
.beleg-monat {
position: sticky;
top: 0;
z-index: 1;
display: block;
width: 100%;
padding: 8px 8px;
background: var(--color-bg-alt);
border: none;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
cursor: pointer;
text-align: left;
font-size: var(--text-meta);
font-weight: var(--weight-semibold);
color: var(--color-text);
}
.beleg-liste > .beleg-monat:first-child { border-top: none; }
.beleg-monat:hover { background: var(--color-border); }
.beleg-monat-z1 { display: flex; align-items: baseline; gap: 8px; }
.beleg-monat-z2 {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
padding-left: 22px;
margin-top: 2px;
font-size: 11px;
font-weight: var(--weight-regular);
color: var(--color-text-faint);
}
.beleg-monat-pfeil { display: inline-flex; align-self: center; transform: rotate(-90deg); transition: transform 120ms ease; color: var(--color-text-faint); }
.beleg-monat-pfeil svg { width: 14px; height: 14px; }
.beleg-monat.is-offen .beleg-monat-pfeil { transform: none; }
.beleg-monat-titel {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 11px;
font-weight: var(--weight-bold, 700);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.beleg-monat-punkt { color: var(--color-text-faint); opacity: .55; }
.beleg-monat-offen { color: var(--color-warning); font-weight: var(--weight-semibold); }
.beleg-monat-zw { font-variant-numeric: tabular-nums; }
.beleg-monat-summe { font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); white-space: nowrap; font-size: 12.5px; }
.beleg-suche { flex: 1 1 220px; min-width: 170px; max-width: 420px; }
.beleg-zeile {
display: block;
width: 100%;
padding: 8px 10px;
border: none;
border-bottom: 1px solid var(--color-border);
background: none;
text-align: left;
cursor: pointer;
}
.beleg-zeile:hover { background: var(--color-bg-alt); }
.beleg-zeile.is-aktiv { background: var(--color-accent-soft); }
.beleg-zeile.is-ungeprueft { box-shadow: inset 3px 0 0 var(--color-warning); }
.beleg-zeile-kopf { display: flex; align-items: baseline; gap: 10px; }
.beleg-zeile-titel {
flex: 1;
min-width: 0;
font-weight: var(--weight-semibold);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.beleg-zeile-betrag { font-variant-numeric: tabular-nums; white-space: nowrap; }
.beleg-zeile-qr {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: -4px 0;
border-radius: 7px; color: var(--color-accent); cursor: pointer;
}
.beleg-zeile-qr svg { width: 16px; height: 16px; }
.beleg-zeile-qr:hover, .beleg-zeile-qr:focus-visible { background: color-mix(in srgb, var(--color-accent) 12%, transparent); outline: none; }
.beleg-zeile-qr.is-warnung { color: var(--color-danger, #c2412d); }
.modal.zahlcode-modal { max-width: 340px; }
.zahlcode-ansicht { display: flex; flex-direction: column; gap: 12px; }
.zahlcode-bild { width: 100%; border-radius: 10px; background: #fff; display: block; }
.zahlcode-hinweis { margin: 0; font-size: 12px; color: var(--color-text-muted); text-align: center; }
.zahlcode-speichern { width: 100%; justify-content: center; }
.beleg-zeile-sub {
font-size: var(--text-meta); color: var(--color-text-muted); margin-top: 2px;
display: flex; align-items: baseline; gap: var(--space-2);
}
.beleg-zeile-sub > span:first-child {
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.beleg-zeile-offen {
margin-left: auto; flex: 0 0 auto; font-weight: var(--weight-semibold, 600);
color: var(--color-warning-strong, #b26a00);
}
.beleg-zeile-bezahlt {
margin-left: auto; flex: 0 0 auto; color: var(--color-text-faint);
}
.beleg-fastbill-zeichen {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
color: var(--color-success);
}
.beleg-fastbill-zeichen svg { width: 14px; height: 14px; }
.beleg-zeile-sub .beleg-fastbill-zeichen { margin-left: auto; }
.beleg-zeile-sub .beleg-fastbill-zeichen + .beleg-zeile-bezahlt,
.beleg-zeile-sub .beleg-fastbill-zeichen + .beleg-zeile-offen {
margin-left: 6px;
}
.beleg-kopf-aktionen { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.beleg-ueber-hinweis { font-size: 12px; color: var(--color-text-muted); text-align: right; }
.beleg-ueber-wahl {
display: inline-flex; align-items: center; gap: 2px; padding: 3px;
background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md, 10px);
}
.beleg-ueber-knopf {
height: 32px; padding: 0 11px; border: 0; border-radius: 8px; background: transparent;
font: inherit; font-size: 13px; color: var(--color-text-muted); cursor: pointer; white-space: nowrap;
}
.beleg-ueber-knopf:hover { color: var(--color-text); }
.beleg-ueber-knopf[aria-pressed="true"] {
background: var(--color-surface); color: var(--color-text); font-weight: 600; box-shadow: var(--shadow-sm);
}
.beleg-ueber {
flex: 0 0 auto; display: inline-flex; align-items: center;
padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 18px;
border: 1px solid transparent; white-space: nowrap;
}
.beleg-ueber.ist-bar   { color: var(--color-tone-amber);  background: var(--color-tone-amber-soft);  border-color: color-mix(in srgb, var(--color-tone-amber) 30%, transparent); }
.beleg-ueber.ist-kk_rg { color: var(--color-tone-purple); background: var(--color-tone-purple-soft); border-color: color-mix(in srgb, var(--color-tone-purple) 30%, transparent); }
.beleg-ueber.ist-kk_fb { color: var(--color-tone-blue);   background: var(--color-tone-blue-soft);   border-color: color-mix(in srgb, var(--color-tone-blue) 30%, transparent); }
.beleg-feld.beleg-ueber-feld { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px;
padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 10px; }
.beleg-ueber-feld .beleg-feld-label { grid-column: 1; }
.beleg-ueber-feld .beleg-feld-wert { grid-column: 1; font-weight: 600; }
.beleg-ueber-feld .beleg-ueber-auswahl { grid-column: 2; grid-row: 1 / span 2; width: auto; }
.beleg-ueber-feld.ist-bar   { background: var(--color-tone-amber-soft); }
.beleg-ueber-feld.ist-kk_rg { background: var(--color-tone-purple-soft); }
.beleg-ueber-feld.ist-kk_fb { background: var(--color-tone-blue-soft); }
.beleg-tafel-steuerbuero {
display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px;
border-radius: 10px; background: var(--color-bg-alt); color: var(--color-text-muted); font-size: 13px;
}
.beleg-hochladen-inhalt { display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; }
.beleg-hochladen-label { font-size: 12px; letter-spacing: .06em; color: var(--color-text-muted); }
.beleg-hochladen-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
.beleg-hochladen-knopf {
min-height: 44px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-surface);
font: inherit; font-size: 14px; color: var(--color-text);
}
.beleg-hochladen-knopf[aria-pressed="true"] {
border: 1.5px solid var(--color-accent); background: var(--color-accent-soft); font-weight: 600;
}
.beleg-hochladen-gross { min-height: 48px; justify-content: center; width: 100%; }
.modal.steuer-paket { max-width: 640px; }
.steuer-inhalt { display: flex; flex-direction: column; gap: 16px; }
.steuer-kopf { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.steuer-feld { display: flex; flex-direction: column; gap: 6px; }
.steuer-feld > span { font-size: 12px; letter-spacing: .06em; color: var(--color-text-muted); }
.steuer-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.steuer-chip { min-height: 40px; padding: 0 14px; font-size: 13.5px; cursor: pointer; font-family: inherit; }
.steuer-chip[aria-pressed="false"] { background: var(--color-surface); color: var(--color-text-muted); border-color: var(--color-border); font-weight: 400; }
.steuer-chip:disabled { opacity: .5; cursor: default; }
.steuer-liste { border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; max-height: 46vh; overflow-y: auto; }
.steuer-liste > p { margin: 0; padding: 12px 14px; }
.steuer-gruppe, .steuer-zeile { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; font-size: 14px; }
.steuer-gruppe { font-size: 13px; font-weight: 600; }
.steuer-gruppe.ist-bar   { color: var(--color-tone-amber);  background: var(--color-tone-amber-soft); }
.steuer-gruppe.ist-kk_rg { color: var(--color-tone-purple); background: var(--color-tone-purple-soft); }
.steuer-gruppe.ist-kk_fb { color: var(--color-tone-blue);   background: var(--color-tone-blue-soft); }
.steuer-zeile + .steuer-zeile { border-top: 1px solid var(--color-border); }
.steuer-erklaerung { margin: 0; font-size: 13px; color: var(--color-text-muted); }
.beleg-tafel-bildbereich {
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-3);
display: flex;
justify-content: center;
min-height: 0;
overflow: hidden;
}
.beleg-tafel-bild { max-width: 100%; max-height: 100%; object-fit: contain; }
.beleg-tafel-pdf { width: 100%; height: 100%; border: none; }
.beleg-tafel-werte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--space-4); }
.beleg-feld { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.beleg-feld-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-faint); }
.beleg-feld-wert { font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beleg-feld-leer { color: var(--color-warning); font-style: italic; }
.beleg-tafel-knoepfe {
display: flex;
gap: var(--space-2);
justify-content: flex-end;
padding: var(--space-2) 0;
margin-top: auto;
background: var(--color-surface);
border-top: 1px solid var(--color-border);
}
.beleg-tafel-knoepfe .beleg-tafel-loeschen { color: var(--color-danger, #c2412d); margin-right: auto; gap: 5px; }
.beleg-tafel-loeschen svg { width: 15px; height: 15px; }
.receipt-settlement-rows { display: flex; flex-direction: column; }
.receipt-settlement-row {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border);
}
.receipt-settlement-row:last-child { border-bottom: none; }
.receipt-settlement-row-main { flex: 1; min-width: 0; text-align: left; background: none; border: none; padding: 0; cursor: pointer; }
.receipt-settlement-row-name { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.receipt-settlement-row-sub { font-size: var(--text-meta); margin-top: 2px; }
.receipt-settlement-row-amount { text-align: right; white-space: nowrap; font-size: 13.5px; }
.receipt-settlement-summary {
background: var(--color-bg-alt);
border-radius: var(--radius-lg);
padding: var(--space-4);
margin-top: var(--space-4);
}
.receipt-settlement-summary-row { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 6px; }
.receipt-settlement-summary-result { padding-top: var(--space-3); margin-top: 6px; border-top: 1px solid var(--color-border-strong); }
.receipt-camera-frame {
border-radius: var(--radius-md);
overflow: hidden;
background: #000;
aspect-ratio: 4 / 3;
display: flex;
align-items: center;
justify-content: center;
}
.receipt-camera-video { width: 100%; height: 100%; object-fit: cover; }
.receipt-scanner-overlay {
position: fixed;
inset: 0;
z-index: 150;
background: #000;
}
body.receipt-scanner-open { overflow: hidden; }
.receipt-scanner-screen {
position: absolute;
inset: 0;
flex-direction: column;
}
.receipt-scanner-frame { position: relative; flex: 1; overflow: hidden; background: #000; }
.receipt-scanner-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.receipt-scanner-hint {
position: absolute;
left: 50%;
bottom: 132px;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.55);
color: #fff;
font-size: 13px;
font-weight: 500;
padding: 8px 16px;
border-radius: 999px;
white-space: nowrap;
pointer-events: none;
}
.receipt-scanner-controls {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 28px);
}
.receipt-scanner-shutter {
width: 68px;
height: 68px;
border-radius: 50%;
background: #fff;
border: 4px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
cursor: pointer;
}
.receipt-scanner-shutter:active { transform: scale(0.92); }
.receipt-scanner-close {
position: absolute;
top: calc(env(safe-area-inset-top, 0px) + 14px);
right: 16px;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
}
.receipt-scanner-close svg { width: 18px; height: 18px; }
.client-dupes-card { margin-bottom: var(--space-4); border-color: var(--color-warning, #d9a441); }
.client-dupe-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--color-border);
}
.client-dupe-row:last-child { border-bottom: none; }
.client-merge-field-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
align-items: center;
padding: 7px 0;
border-bottom: 1px solid var(--color-border);
font-size: 13px;
}
.client-merge-field-row.is-header { font-weight: 600; font-size: 12px; color: var(--color-text-faint); }
.client-merge-field-row:last-child { border-bottom: none; }
.client-merge-field-label { color: var(--color-text-faint); }
.client-merge-field-option { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.receipt-crop-wrap { position: relative; touch-action: none; }
.receipt-crop-img { display: block; border-radius: var(--radius-md); user-select: none; -webkit-user-drag: none; pointer-events: none; }
.receipt-crop-overlay { position: absolute; left: 0; top: 0; pointer-events: none; }
.receipt-crop-handle {
position: absolute;
width: 22px;
height: 22px;
margin-left: -11px;
margin-top: -11px;
border-radius: 50%;
background: var(--color-accent);
border: 2px solid #fff;
box-shadow: var(--shadow-sm);
cursor: grab;
touch-action: none;
}
.receipt-crop-handle:active { cursor: grabbing; transform: scale(1.15); }
@media (max-width: 640px) {
.main .grid-2, .main .grid-3, .main .grid-4 { grid-template-columns: 1fr; }
.dashboard-tile .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-tile .stat-card {
flex-direction: row;
align-items: center;
justify-content: flex-start;
text-align: left;
padding: 10px 12px;
gap: 10px;
}
.dashboard-tile .stat-body { text-align: left; min-width: 0; }
.dashboard-tile .stat-icon { width: 26px; height: 26px; }
.dashboard-tile .stat-icon svg { width: 12px; height: 12px; }
.dashboard-tile .stat-card .stat-value { font-size: 15px; line-height: 1.2; }
.dashboard-tile .stat-card .stat-label {
font-size: 11px;
margin-top: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.main { padding: var(--space-3) var(--space-3) var(--space-8); }
.main > * + * { margin-top: var(--space-4); }
:root { --text-page-title: 20px; }
.page-header > div:first-child > p { display: none; }
.page-header .btn:not(.btn-icon-header) { width: auto; justify-content: center; }
.page-header > div:first-child { min-width: 0; }
.page-header > div:first-child > h1 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.page-header-actions { margin-left: auto; padding-left: var(--space-3); }
.production-header-actions { width: 100%; justify-content: space-between; }
.production-header-actions .switch-row { flex: 1 1 auto; min-width: 0; }
.btn-icon-header { flex: 0 0 auto; padding: 8px; }
.btn-icon-header .btn-label-text { display: none; }
.card { padding: var(--space-4); border-radius: var(--radius-md); }
.field-row { flex-direction: column; gap: 0; }
.field-row > .field { width: 100%; }
.field { margin-bottom: 5px; }
.field label { margin-bottom: 2px; font-size: var(--text-meta); }
.field input, .field select, .field textarea { padding: 6px 8px; }
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="search"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="number"],
.field input[type="date"],
.field input[type="time"],
.field input[type="datetime-local"],
.field select {
height: 35px;
}
.shotdoc-header .shotdoc-meta-row { flex-direction: row; gap: 8px; }
.shotdoc-header .shotdoc-meta-row input {
max-width: none;
width: auto;
flex: 1 1 0%;
min-width: 0;
padding: 6px 8px;
}
.modal-backdrop { padding: var(--space-3); align-items: center; }
.modal { padding: var(--space-4); max-height: 88vh; overflow-y: auto; }
.year-pills { flex-wrap: wrap; }
.login-form-side { padding: var(--space-4); }
.table-actions-desktop { display: none; }
.table-actions-mobile-trigger { display: inline-flex; }
.changelog-panel-list.is-compact { max-height: 190px; }
.modal-backdrop.action-sheet,
.modal-backdrop.pos-blatt-modal { align-items: flex-end; padding: 0; }
.modal.pos-blatt-modal {
max-width: none;
width: 100%;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
animation: action-sheet-up 0.18s var(--ease);
}
.modal.action-sheet {
max-width: none;
width: 100%;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
padding: var(--space-4) var(--space-3) max(var(--space-4), env(safe-area-inset-bottom));
animation: action-sheet-up 0.18s var(--ease);
}
.pm-section:has(.pm-empty):not(.is-uploading) {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: var(--space-2);
padding: 8px 10px;
}
.pm-section:has(.pm-empty):not(.is-uploading) .pm-section-header {
order: 1;
margin-bottom: 0;
flex: 0 0 auto;
}
.pm-section:has(.pm-empty):not(.is-uploading) .pm-section-count { display: none; }
.pm-section:has(.pm-empty):not(.is-uploading) .pm-file-list {
order: 2;
flex: 1 1 auto;
min-width: 0;
}
.pm-section:has(.pm-empty):not(.is-uploading) .pm-empty {
margin: 0;
text-align: left;
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pm-section:has(.pm-empty):not(.is-uploading) .pm-dropzone-hint {
order: 3;
flex: 0 0 auto;
margin-bottom: 0;
padding: 5px 9px;
white-space: nowrap;
}
.pm-section:has(.pm-empty):not(.is-uploading) .pm-dropzone-hint span:last-child { display: none; }
.pm-section:has(.pm-empty):not(.is-uploading) .pm-dropzone-hint::after { content: '+ Upload'; }
.pm-section:has(.pm-file-row) .pm-dropzone-hint { display: none; }
.pm-card { padding: var(--space-3); }
.pm-sections { gap: var(--space-2); }
.pm-section { padding: 8px 10px; }
.pm-file-list { gap: 4px; }
.pm-file-row { padding: 6px 8px; }
.pm-file-row .pm-file-sub.text-muted { display: none; }
.quickadd-card { display: none !important; }
.quickadd-trigger-mobile { display: flex; width: 100%; justify-content: center; }
.quicksearch-hint { display: none; }
.portfolio-detail { display: flex; flex-direction: column; }
.portfolio-videos-card { order: 1; }
.portfolio-meta-card { order: 2; }
.portfolio-share-card { order: 3; }
}
@media (max-width: 640px), (max-height: 640px) and (orientation: landscape) {
.modal-backdrop.pm-video-modal {
align-items: center;
padding: max(var(--space-3), env(safe-area-inset-top)) max(var(--space-3), env(safe-area-inset-right)) max(var(--space-3), env(safe-area-inset-bottom)) max(var(--space-3), env(safe-area-inset-left));
}
.modal.pm-video-modal {
position: relative;
width: fit-content;
max-width: 100%;
height: fit-content;
max-height: 100%;
border-radius: var(--radius-md);
overflow: hidden;
padding: 0;
background: #000;
}
.modal.pm-video-modal .modal-header {
position: absolute;
top: var(--space-2);
right: var(--space-2);
z-index: 2;
margin-bottom: 0;
width: auto;
}
.modal.pm-video-modal .modal-header h2 { display: none; }
.modal.pm-video-modal .modal-header .btn-ghost {
background: rgba(0, 0, 0, 0.55);
color: #fff;
border-radius: var(--radius-full);
width: 32px;
height: 32px;
justify-content: center;
}
.modal.pm-video-modal .pm-video-modal-player {
display: flex;
border-radius: 0;
}
.modal.pm-video-modal .pm-video-modal-player video {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: calc(100dvh - max(var(--space-3), env(safe-area-inset-top)) - max(var(--space-3), env(safe-area-inset-bottom)));
object-fit: contain;
}
}
.pm-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: var(--space-4);
}
.pm-tabs, .booking-view-tabs {
display: inline-flex;
gap: 2px;
padding: 2px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg-alt);
}
.pm-tab, .booking-view-tab {
border: none;
background: transparent;
color: var(--color-text-muted);
font-size: 12.5px;
font-weight: 600;
padding: 7px 14px;
border-radius: calc(var(--radius-md) - 2px);
cursor: pointer;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
white-space: nowrap;
flex-shrink: 0;
}
.pm-tab:hover, .booking-view-tab:hover { color: var(--color-text); }
.pm-tab.is-active, .booking-view-tab.is-active { background: var(--color-surface); color: var(--color-accent-strong); box-shadow: var(--shadow-sm); }
.booking-calendar { min-height: 120px; }
.booking-calendar:empty::before {
content: 'Kalender wird geladen…';
display: block;
padding: 40px 0;
text-align: center;
color: var(--color-text-faint);
font-size: 13px;
}
.booking-calendar .fc { font-family: inherit; }
.booking-calendar .fc-event { cursor: pointer; border: none; font-size: 11.5px; font-weight: 600; padding: 1px 4px; }
.booking-calendar .fc-toolbar-title { font-size: 16px; font-weight: 600; }
.booking-calendar .fc-button-primary {
background: var(--color-surface);
border-color: var(--color-border-strong);
color: var(--color-text);
box-shadow: none;
text-transform: none;
}
.booking-calendar .fc-button-primary:hover { background: var(--color-surface-hover); }
.booking-calendar .fc-button-primary:not(:disabled).fc-button-active {
background: var(--color-accent);
border-color: var(--color-accent);
color: #fff;
}
.booking-calendar .fc-daygrid-day.fc-day-today { background: var(--color-accent-soft); }
.pm-search {
position: relative;
display: flex;
align-items: center;
flex: 1 1 260px;
min-width: 200px;
}
.pm-search svg {
position: absolute;
left: 11px;
top: 50%;
transform: translateY(-50%);
width: 14px;
height: 14px;
color: var(--color-text-faint);
pointer-events: none;
}
.pm-search-input {
width: 100%;
padding: 8px 11px 8px 32px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
font-size: 12.5px;
background: var(--color-surface);
color: var(--color-text);
}
.pm-search-input:focus { outline: none; border-color: var(--color-accent); box-shadow: var(--shadow-glow); }
.pm-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
}
.pm-card { padding: var(--space-4); }
.pm-card.has-files { border-color: var(--color-accent); }
.pm-card-header {
margin-bottom: var(--space-3);
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
}
.pm-thumb-backfill { flex: none; white-space: nowrap; }
.pm-card-number { font-size: var(--text-meta); font-weight: var(--weight-semibold); color: var(--color-text-faint); letter-spacing: 0.02em; }
.pm-card-title { font-size: var(--text-entity-title); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-card-client { font-size: var(--text-meta); color: var(--color-text-muted); margin-top: 1px; }
.pm-sections {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3);
}
.pm-section {
min-width: 0;
background: var(--color-bg-alt);
border: 2px dashed var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-3);
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.pm-section.is-dragover { border-color: var(--color-accent); background: var(--color-accent-soft); }
.pm-section.is-uploading { border-color: var(--color-accent); }
.pm-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.pm-section-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--text-meta);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-muted);
}
.pm-section-label svg { width: 13px; height: 13px; }
.pm-section-count {
flex-shrink: 0;
background: var(--color-surface);
color: var(--color-text-muted);
border-radius: var(--radius-full);
padding: 1px 8px;
font-size: var(--text-small);
font-weight: 600;
}
.pm-dropzone-hint {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px;
margin-bottom: var(--space-2);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text-faint);
font-size: 11px;
text-align: center;
}
.pm-dropzone-hint svg { width: 13px; height: 13px; }
.pm-section.is-dragover .pm-dropzone-hint { color: var(--color-accent); }
.pm-uploading { display: flex; flex-direction: column; gap: 6px; }
.pm-uploading:not(:empty) { margin-bottom: 6px; }
.pm-uploading-row {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 9px;
background: var(--color-accent-soft);
border: 1px solid var(--color-accent);
border-radius: var(--radius-sm);
font-size: 12px;
}
.pm-uploading-row svg { width: 13px; height: 13px; color: var(--color-accent); flex-shrink: 0; }
.pm-uploading-row .pm-file-name { margin-bottom: 4px; }
.pm-uploading-row .progress-track { height: 5px; }
.pm-uploading-percent { flex-shrink: 0; font-size: var(--text-meta); font-weight: var(--weight-semibold); color: var(--color-accent-strong); font-variant-numeric: tabular-nums; }
.pm-file-list { display: flex; flex-direction: column; gap: 6px; }
.pm-empty { font-size: var(--text-meta); color: var(--color-text-faint); text-align: center; margin: 4px 0; }
.pm-file-row {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 9px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 12px;
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.pm-file-row:hover { border-color: var(--color-accent); }
.pm-delivery {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg-alt);
overflow: hidden;
}
.pm-delivery-head {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
cursor: pointer;
user-select: none;
}
.pm-delivery-head:hover { background: var(--color-surface); }
.pm-delivery-caret {
display: inline-flex;
color: var(--color-text-muted);
transition: transform var(--dur-fast) var(--ease);
}
.pm-delivery-caret svg { width: 15px; height: 15px; }
.pm-delivery-head.is-open .pm-delivery-caret { transform: rotate(90deg); }
.pm-delivery-text { flex: 1; min-width: 0; }
.pm-delivery-titel-zeile { display: flex; align-items: center; gap: 4px; min-width: 0; }
.pm-delivery-umbenennen {
flex-shrink: 0;
width: 22px; height: 22px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: transparent;
border: none;
color: var(--color-text-faint);
cursor: pointer;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pm-delivery-umbenennen svg { width: 12px; height: 12px; }
.pm-delivery-umbenennen:hover,
.pm-delivery-umbenennen:focus-visible { background: var(--color-bg-alt); color: var(--color-text); }
.pm-delivery-titel {
font-size: 12px;
font-weight: 590;
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pm-delivery-anzahl {
font-size: var(--text-meta);
color: var(--color-text-muted);
}
.pm-delivery-flags { display: flex; gap: 6px; }
.pm-delivery-flag {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 9px;
border-radius: var(--radius-full);
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text-muted);
font-size: var(--text-meta);
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pm-delivery-flag svg { width: 14px; height: 14px; }
.pm-delivery-flag:hover { border-color: var(--color-accent); }
.pm-delivery-flag.is-an {
background: var(--color-accent-soft);
border-color: var(--color-accent);
color: var(--color-accent-strong);
}
.pm-delivery-flag.is-gemischt {
background: var(--color-warning-soft, #fdf3e0);
border-color: var(--color-warning, #d97706);
color: var(--color-warning-strong, #92590b);
}
.pm-delivery-body {
display: flex;
flex-direction: column;
gap: 6px;
padding: 0 10px 10px;
}
.pm-file-group { display: flex; flex-direction: column; gap: 6px; }
.pm-file-versions { display: flex; flex-direction: column; gap: 6px; }
[hidden] { display: none !important; }
.pm-file-row.is-version-child {
margin-left: 26px;
background: var(--color-bg);
border-style: dashed;
}
.pm-file-row.is-version-child .pm-file-name { font-weight: 400; }
.pm-tag-version-btn {
display: inline-flex;
align-items: center;
gap: 3px;
font: inherit;
cursor: pointer;
}
.pm-tag-version-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.pm-tag-version-pfeil { display: inline-block; transition: transform var(--dur-fast) var(--ease); }
.pm-tag-version-btn[aria-expanded="true"] .pm-tag-version-pfeil { transform: rotate(90deg); }
.pm-file-row.is-version-dragover {
border-color: var(--color-accent);
background: var(--color-accent-soft);
box-shadow: 0 0 0 2px var(--color-accent) inset;
}
.pm-file-icon { display: flex; flex-shrink: 0; color: var(--color-text-faint); }
.pm-file-icon svg { width: 14px; height: 14px; }
.pm-file-thumb {
flex-shrink: 0;
width: 40px;
height: 23px;
object-fit: cover;
border-radius: 4px;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
}
.pm-file-thumb-lg { width: 120px; height: 68px; border-radius: 6px; }
.pm-file-icon-lg {
width: 120px;
height: 68px;
justify-content: center;
align-items: center;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: 6px;
}
.pm-file-icon-lg svg { width: 28px; height: 28px; }
.pm-archived-thumb-col { width: 168px; }
.pm-archived-thumb-col .pm-file-thumb-lg,
.pm-archived-thumb-col .pm-file-icon-lg { width: 160px; height: 90px; }
.pm-archived-thumb-wrap { position: relative; display: inline-block; }
.pm-thumb-pick-btn {
position: absolute;
top: 4px;
right: 4px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.55);
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
padding: 0;
}
.pm-thumb-pick-btn svg { width: 14px; height: 14px; }
.pm-thumb-pick-btn:hover { background: rgba(0, 0, 0, 0.75); }
.pm-thumbnail-picker { min-height: 80px; }
.pm-thumbnail-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
}
.pm-thumbnail-candidate {
padding: 0;
border: 2px solid var(--color-border);
border-radius: 6px;
overflow: hidden;
cursor: pointer;
background: var(--color-bg-alt);
line-height: 0;
}
.pm-thumbnail-candidate img { width: 100%; height: auto; display: block; }
.pm-thumbnail-candidate.is-selected { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent); }
.pm-archived-name {
font-weight: 600;
font-size: var(--text-body);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
max-width: 100%;
}
.pm-archived-name-sub {
display: none;
font-size: var(--text-small);
color: var(--color-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pm-archived-previews {
display: flex;
flex-direction: column;
gap: 4px;
padding: 4px 2px;
}
.pm-archived-preview-item {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 8px;
border: 1px solid var(--color-border);
border-radius: 8px;
cursor: pointer;
background: var(--color-surface);
transition: border-color var(--dur-fast) var(--ease);
}
.pm-archived-preview-item:hover { border-color: var(--color-accent); }
.pm-archived-preview-thumb-wrap { flex-shrink: 0; display: flex; }
.pm-archived-preview-thumb-pickable { cursor: pointer; }
.pm-file-thumb-empty {
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-faint);
border-style: dashed;
}
.pm-file-thumb-empty svg { width: 12px; height: 12px; }
.pm-archived-preview-thumb-pickable:hover .pm-file-thumb,
.pm-archived-preview-thumb-pickable:hover .pm-file-icon { border-color: var(--color-accent); }
.pm-file-thumb-empty:hover { border-color: var(--color-accent); color: var(--color-accent); }
.pm-file-thumb-set {
padding: 0;
overflow: hidden;
cursor: pointer;
line-height: 0;
}
.pm-file-thumb-set img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-file-thumb-set:hover { border-color: var(--color-accent); }
.pm-file-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-file-name.is-geteilt { display: flex; }
.pm-file-name-kopf {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pm-file-name-schwanz { flex: none; white-space: nowrap; }
.pm-version-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-version-badge {
display: inline-flex;
align-items: stretch;
overflow: hidden;
border-radius: var(--radius-full);
border: 1px solid var(--color-border);
background: var(--color-bg-alt);
transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.pm-version-badge:hover { border-color: var(--color-accent); background: var(--color-surface); }
.pm-version-badge > button {
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background: none;
font: inherit;
font-size: 11px;
font-weight: 600;
line-height: 1;
color: var(--color-text);
cursor: pointer;
}
.pm-version-badge-play { padding: 5px 9px; }
.pm-version-badge-dl {
padding: 5px 8px;
border-left: 1px solid var(--color-border) !important;
color: var(--color-text-faint);
}
.pm-version-badge > button:hover { background: var(--color-surface-2, rgba(0, 0, 0, 0.05)); }
.pm-version-badge-dl:hover { color: var(--color-accent-strong); }
.pm-version-badge-dl svg { width: 12px; height: 12px; display: block; }
@media (max-width: 900px) {
.pm-version-badge > button { min-height: 34px; }
.pm-version-badge-play { padding: 6px 13px; font-size: 12px; }
.pm-version-badge-dl { padding: 6px 12px; }
.pm-version-badge-dl svg { width: 14px; height: 14px; }
}
.pm-archived-expanded {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-2) 2px;
}
.pm-archived-expanded-section {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.pm-archived-expanded-heading {
font-size: var(--text-small);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-text-faint);
}
.pm-archived-expanded-footer {
display: flex;
justify-content: flex-end;
}
.pm-file-sub { font-size: var(--text-small); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-file-tags { display: flex; gap: 4px; flex-shrink: 0; }
.pm-tag {
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--color-accent-strong);
background: var(--color-accent-soft);
border-radius: 5px;
padding: 2px 6px;
}
.pm-tag-lang { color: var(--color-text-muted); background: var(--color-bg-alt); }
.pm-tag-version { color: #fff; background: var(--color-text-faint); }
.pm-file-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.pm-file-delete-btn { padding: 4px; }
.pm-file-actions .is-shared { color: var(--color-accent-strong); }
.pm-schalter-gruppe { display: flex; align-items: center; gap: 4px; padding-right: 7px; margin-right: 5px; border-right: 1px solid var(--color-border); }
.pm-file-actions .pm-schalter { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; color: var(--color-text-faint); }
.pm-file-actions .pm-schalter:hover { color: var(--color-text-muted); background: var(--color-bg-alt); }
.pm-file-actions .pm-schalter.ist-an {
color: var(--color-accent);
background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-accent) 38%, transparent);
}
.pm-file-actions .pm-schalter.ist-an svg { stroke-width: 2.1; }
.pm-archived-wrap:not(.has-items) { display: none; }
.pm-archived-toggle {
display: flex;
align-items: center;
gap: 4px;
width: 100%;
margin-top: 8px;
padding: 4px 2px;
border: none;
background: transparent;
color: var(--color-text-faint);
font-size: 11px;
font-weight: 600;
cursor: pointer;
}
.pm-archived-toggle:hover { color: var(--color-text-muted); }
.pm-archived-toggle::before {
content: '';
display: inline-block;
width: 0;
height: 0;
border-left: 4px solid currentColor;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
transition: transform var(--dur-fast) var(--ease);
}
.pm-archived-toggle.is-expanded::before { transform: rotate(90deg); }
.pm-archived-collapse {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--dur-slow) var(--ease);
}
.pm-archived-collapse.is-open { grid-template-rows: 1fr; }
.pm-archived-collapse > .pm-file-list { overflow: hidden; min-height: 0; padding-top: 6px; }
.pm-assign-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
padding: 10px 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
.pm-assign-meta { min-width: 0; flex: 1 1 220px; }
.pm-assign-name { font-weight: 600; font-size: var(--text-body); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pm-kind-switch { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-alt); }
.pm-kind-switch-btn {
border: none;
background: transparent;
color: var(--color-text-muted);
font-size: var(--text-meta);
font-weight: 600;
padding: 5px 10px;
border-radius: calc(var(--radius-sm) - 1px);
cursor: pointer;
}
.pm-kind-switch-btn.is-active { background: var(--color-surface); color: var(--color-accent-strong); box-shadow: var(--shadow-sm); }
.modal-backdrop.pm-video-modal { align-items: center; }
.modal.pm-video-modal {
max-width: min(900px, 92vw, calc(72vh * var(--pm-video-ratio, 1.7778)));
}
.pm-video-modal-player { border-radius: var(--radius-md); overflow: hidden; background: #000; }
.portfolio-list-view > * + * { margin-top: var(--space-5); }
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
}
.portfolio-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
cursor: pointer;
transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.portfolio-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.portfolio-card-thumb.ist-169 {
position: relative;
aspect-ratio: 16 / 9;
padding: 0;
overflow: hidden;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.portfolio-card-thumb.ist-169 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portfolio-card-aktionen {
position: absolute;
inset: auto 8px 8px auto;
display: flex;
gap: 6px;
opacity: 0;
transition: opacity var(--dur-fast) var(--ease);
}
.portfolio-card:hover .portfolio-card-aktionen,
.portfolio-card:focus-within .portfolio-card-aktionen { opacity: 1; }
.portfolio-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.portfolio-card-thumb {
position: relative;
aspect-ratio: 16 / 9;
background: var(--color-bg-alt);
display: flex;
align-items: center;
justify-content: center;
}
.portfolio-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portfolio-thumb-icon { color: var(--color-text-faint); display: inline-flex; }
.portfolio-thumb-icon svg { width: 28px; height: 28px; }
.portfolio-status-badge {
display: inline-flex;
align-items: center;
flex-shrink: 0;
font-size: var(--text-small);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 3px 8px;
border-radius: var(--radius-full);
background: rgba(20,21,43,0.72);
color: #fff;
}
.portfolio-status-badge.is-published { background: var(--color-accent); }
.portfolio-card-body { padding: 12px 14px; }
.portfolio-card-title { font-weight: 600; font-size: var(--text-entity-title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portfolio-card-sub { font-size: var(--text-meta); color: var(--color-text-faint); }
.portfolio-detail-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.portfolio-share-row { display: flex; gap: 8px; align-items: center; }
.portfolio-share-row input { flex: 1; padding: 8px 11px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font-size: 12.5px; background: var(--color-bg-alt); color: var(--color-text-muted); }
.portfolio-password-row { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12.5px; color: var(--color-text-muted); }
.portfolio-password-row svg { width: 15px; height: 15px; }
.portfolio-videos-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.portfolio-videos-header h3 { margin: 0; font-size: var(--text-entity-title); }
.portfolio-video-list { display: flex; flex-direction: column; gap: 6px; }
.portfolio-video-row {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 8px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
}
.portfolio-video-row.is-dragging { opacity: 0.4; }
.portfolio-drag-handle { color: var(--color-text-faint); cursor: grab; display: inline-flex; flex-shrink: 0; }
.portfolio-drag-handle svg { width: 16px; height: 16px; }
.portfolio-video-row .portfolio-thumb-img,
.portfolio-video-row .portfolio-thumb-icon { width: 56px; height: 32px; border-radius: 4px; flex-shrink: 0; }
.portfolio-video-row .portfolio-thumb-icon { display: flex; align-items: center; justify-content: center; background: var(--color-bg-alt); }
.portfolio-video-meta { min-width: 0; flex: 1; }
.portfolio-video-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portfolio-picker-search {
position: relative; display: flex; align-items: center; margin-bottom: 12px;
}
.portfolio-picker-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--color-text-faint); pointer-events: none; }
.portfolio-picker-search input {
width: 100%; padding: 8px 11px 8px 32px; border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm); font-size: 12.5px; background: var(--color-surface); color: var(--color-text);
}
.portfolio-picker-list { display: flex; flex-direction: column; gap: 4px; max-height: 55vh; overflow-y: auto; }
.portfolio-picker-row {
display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer;
}
.portfolio-picker-row:hover { background: var(--color-bg-alt); }
.portfolio-picker-row.is-selected { background: var(--color-accent-soft); }
.portfolio-picker-row .portfolio-thumb-img,
.portfolio-picker-row .portfolio-thumb-icon { width: 56px; height: 32px; border-radius: 4px; flex-shrink: 0; }
.portfolio-picker-row .portfolio-thumb-icon { display: flex; align-items: center; justify-content: center; background: var(--color-bg-alt); }
.portfolio-vimeo-row { cursor: default; align-items: flex-start; }
.portfolio-vimeo-row:hover { background: none; }
.portfolio-picker-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.portfolio-picker-row-status { font-size: var(--text-meta); color: var(--color-text-muted); }
.portfolio-vimeo-unmatched { margin: 4px 0 0; padding-left: 16px; font-size: var(--text-meta); color: var(--color-text-muted); }
.portfolio-vimeo-unmatched li { margin-bottom: 2px; display: flex; align-items: center; gap: 4px; }
.portfolio-vimeo-unmatched a { display: inline-flex; color: var(--color-text-faint); }
.portfolio-vimeo-unmatched svg { width: 12px; height: 12px; }
.pm-video-modal-player video { display: block; width: 100%; max-height: 72vh; }
.pm-video-modal-player .plyr--fullscreen-active video,
.pm-video-modal-player :fullscreen video,
.pm-video-modal-player :-webkit-full-screen video {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.pd-simple-row-note svg,
.pd-simple-row-delete svg {
color: inherit;
}
.filter-bar {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
align-items: center;
margin-bottom: var(--space-4);
}
.filter-bar select,
.filter-bar input {
box-sizing: border-box;
height: 36px;
padding: 0 11px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
font-size: 13.5px;
font-family: inherit;
line-height: normal;
background: var(--color-surface-2);
color: var(--color-text);
transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.filter-bar select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
min-width: 170px;
padding-right: 34px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239598ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 15px 15px;
}
.filter-bar input[type='date'],
.filter-bar input[type='time'],
.filter-bar input[type='datetime-local'] {
-webkit-appearance: none;
appearance: none;
text-align: left;
min-width: 0;
max-width: 100%;
}
.filter-bar input[type='search'] { flex: 1 1 220px; min-width: 200px; }
.filter-bar input::placeholder { color: var(--color-text-faint); opacity: 1; }
.filter-bar input[type='search'] {
appearance: none;
-webkit-appearance: none;
}
.filter-bar input[type='search']::-webkit-search-decoration,
.filter-bar input[type='search']::-webkit-search-cancel-button,
.filter-bar input[type='search']::-webkit-results-button,
.filter-bar input[type='search']::-webkit-results-decoration {
-webkit-appearance: none;
appearance: none;
}
.filter-bar input[type='date'] {
min-width: 150px;
padding-right: 8px;
}
.filter-bar input[type='date']::-webkit-calendar-picker-indicator {
opacity: 0.55;
cursor: pointer;
}
.filter-bar input[type='date']::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.filter-bar input[type='date']::-webkit-date-and-time-value { text-align: left; }
.filter-bar select:hover,
.filter-bar input:hover { border-color: var(--color-accent); }
.filter-bar select:focus,
.filter-bar input:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px var(--color-accent-soft);
}
.link {
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 2px;
}
.link:hover { color: var(--color-accent-hover); }
.audit-change-from { color: var(--color-text-muted); }
.audit-detail-list {
display: grid;
grid-template-columns: minmax(120px, auto) 1fr;
gap: var(--space-2) var(--space-4);
margin: 0;
}
.audit-detail-list dt {
font-weight: var(--weight-semibold);
color: var(--color-text-muted);
font-size: var(--text-small);
}
.audit-detail-list dd { margin: 0; word-break: break-word; }
.audit-detail-json {
margin: 0;
padding: var(--space-2);
background: var(--color-bg-alt);
border-radius: var(--radius-sm);
font-size: var(--text-small);
white-space: pre-wrap;
word-break: break-word;
}
.audit-more { display: flex; justify-content: center; margin-top: var(--space-4); }
.audit-section-list { display: flex; flex-direction: column; gap: var(--space-2); }
.audit-section-row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-2);
font-size: var(--text-small);
}
.audit-section-action { font-weight: var(--weight-semibold); }
.audit-section-meta { color: var(--color-text-muted); }
.audit-section-detail { color: var(--color-text-muted); }
.ap-filterleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: var(--space-3) 0 var(--space-5); }
.ap-suchfeld { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; box-sizing: border-box; min-width: 0; }
.ap-suchfeld:focus-within { border-color: var(--color-border-strong); }
.ap-such-symbol { display: flex; color: var(--color-text-faint); }
.ap-such-symbol svg { width: 16px; height: 16px; }
.ap-suchfeld input, .ap-suchfeld input:focus { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; box-shadow: none; padding: 0; font: inherit; color: inherit; }
.ap-segment { display: flex; padding: 3px; gap: 2px; background: var(--color-bg-alt); border-radius: 10px; }
.ap-seg-knopf { height: 34px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--color-text-muted); font: inherit; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.ap-seg-knopf:hover { color: var(--color-text); }
.ap-seg-knopf.ist-aktiv { background: var(--color-surface); color: var(--color-text); font-weight: 500; box-shadow: 0 1px 2px rgba(22, 21, 18, 0.08); }
.ap-pfeil-unten { display: flex; }
.ap-pfeil-unten svg { width: 12px; height: 12px; }
.ap-zeitraum { position: relative; display: flex; }
.ap-zeitraum-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; padding: 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: 0 8px 24px rgba(22, 21, 18, 0.10); }
.ap-zeitraum-pop[hidden] { display: none; }
.ap-vonbis { display: flex; gap: 10px; }
.ap-vonbis label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--color-text-muted); }
.ap-personen { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 6px; box-sizing: border-box; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; }
.ap-personen:empty { display: none; }
.ap-person { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.ap-person .liste-kuerzel { width: 28px; height: 28px; }
.ap-personen.hat-auswahl .ap-person:not(.ist-aktiv) { opacity: 0.4; }
.ap-person.ist-aktiv .liste-kuerzel { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent); }
select.ap-bereich { height: 40px; width: auto; border-radius: 10px; }
.ap-nurweg { height: 40px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; color: var(--color-text-muted); font: inherit; font-size: 14px; cursor: pointer; }
.ap-nurweg-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--color-danger); }
.ap-nurweg.ist-aktiv { color: var(--color-text); border-color: var(--color-danger); background: var(--color-danger-soft); }
.liste-kuerzel.ap-ton-0 { background: #d7ece3; color: #053d2c; }
.liste-kuerzel.ap-ton-1 { background: #dfe6f5; color: #22386b; }
.liste-kuerzel.ap-ton-2 { background: #f5e3d3; color: #6b3a12; }
.liste-kuerzel.ap-ton-3 { background: #ebe1f3; color: #4a2a66; }
.liste-kuerzel.ap-ton-4 { background: #d8eef0; color: #12505a; }
.liste-kuerzel.ap-ton-5 { background: #f6dde3; color: #6e1f35; }
html[data-theme="dark"] .liste-kuerzel.ap-ton-0 { background: #12382b; color: #9fdcc2; }
html[data-theme="dark"] .liste-kuerzel.ap-ton-1 { background: #1a2742; color: #a9c0ee; }
html[data-theme="dark"] .liste-kuerzel.ap-ton-2 { background: #3a2614; color: #f0c39b; }
html[data-theme="dark"] .liste-kuerzel.ap-ton-3 { background: #2c1f3d; color: #cfb6ea; }
html[data-theme="dark"] .liste-kuerzel.ap-ton-4 { background: #12343a; color: #9fd8df; }
html[data-theme="dark"] .liste-kuerzel.ap-ton-5 { background: #3d1a25; color: #f0b1c2; }
.ap-rahmen { display: flex; align-items: flex-start; gap: 20px; }
.ap-liste { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; max-width: 1120px; }
.ap-details { display: none; }
.ap-rahmen.hat-details .ap-liste { flex: 999 1 560px; }
.ap-rahmen.hat-details .ap-details { display: block; flex: 1 1 340px; max-width: 420px; min-width: 0; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; }
.ap-tag { display: flex; flex-direction: column; gap: 10px; }
.ap-tag + .ap-tag, .ap-tag + .ap-tag-zu, .ap-tag-zu + .ap-tag { margin-top: 12px; }
.ap-tag-kopf, .ap-tag-zu { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; font: inherit; color: var(--color-text); text-align: left; cursor: pointer; }
.ap-tag-kopf { min-height: 32px; align-items: center; padding: 0 4px; border: 0; background: none; }
.ap-tag-zu { padding: 14px 20px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; }
.ap-tag-zu:hover { border-color: var(--color-border-strong); }
.ap-tag-links { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.ap-tag-haupt { margin: 0; font-size: 17px; font-weight: 600; }
.ap-tag-datum { color: var(--color-text-muted); }
.ap-tag-zahl { color: var(--color-text-faint); font-size: 13px; white-space: nowrap; }
.ap-tag-pfeil { display: flex; align-self: center; color: var(--color-text-muted); }
.ap-tag-pfeil svg { width: 14px; height: 14px; }
.ap-tag-karte { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 8px 0; overflow: hidden; }
.ap-tag-karte.ist-ladend { display: flex; justify-content: center; padding: 24px; }
.ap-aeltere { align-self: center; margin-top: 8px; }
.ap-fehler { padding: 16px 20px; color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; }
.ap-zeile { position: relative; display: grid; grid-template-columns: 64px 40px minmax(0, 1fr); column-gap: 8px; padding: 12px 24px 12px 16px; cursor: pointer; outline: none; }
.ap-zeile::before { content: ""; position: absolute; left: 107px; top: 0; bottom: 0; width: 1px; background: var(--color-border); }
.ap-zeile:first-child::before { top: 24px; }
.ap-zeile:last-child::before { bottom: calc(100% - 24px); }
.ap-zeile:hover { background: var(--color-surface-2); }
.ap-zeile:focus-visible { box-shadow: inset 0 0 0 2px var(--color-accent); }
.ap-zeile.ist-weg { background: color-mix(in srgb, var(--color-danger-soft) 35%, var(--color-surface)); }
.ap-zeile.ist-gewaehlt { background: color-mix(in srgb, var(--color-accent-soft) 55%, var(--color-surface)); box-shadow: inset 3px 0 0 var(--color-accent); }
.ap-zeit { text-align: right; padding-top: 5px; color: var(--color-text-faint); font-size: 13px; font-variant-numeric: tabular-nums; }
.ap-symbol { position: relative; justify-self: center; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 4px var(--color-surface); }
.ap-symbol svg { width: 14px; height: 14px; }
.ap-symbol.ist-neu { background: var(--color-accent-soft); color: var(--color-accent); }
.ap-symbol.ist-aend { background: var(--color-bg-alt); color: var(--color-text-muted); }
.ap-symbol.ist-aend svg { width: 13px; height: 13px; }
.ap-symbol.ist-weg { background: var(--color-danger-soft); color: #b4291f; }
.ap-symbol.ist-status { background: var(--color-accent); color: #fff; }
html[data-theme="dark"] .ap-symbol.ist-weg { color: #ff9b8f; }
.ap-wer-spalte { display: none !important; }
.ap-inhalt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ap-satzzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; line-height: 1.45; }
.ap-satz { font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
.ap-ziel { font-weight: 500; }
a.ap-ziel { text-decoration: none; }
a.ap-ziel:hover { text-decoration: underline; }
.ap-zeile.ist-weg .ap-satz { color: var(--color-text); }
.ap-prod { display: inline-flex; align-items: center; gap: 6px; height: 24px; max-width: 100%; padding: 0 10px; border-radius: 999px; background: var(--color-bg-alt); color: var(--color-text-muted); font-size: 12.5px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-prod:hover { color: var(--color-text); text-decoration: none; }
.ap-prod-punkt { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--color-text-faint); }
.ap-prod-punkt.stufe-1 { background: var(--stufe-1); } .ap-prod-punkt.stufe-2 { background: var(--stufe-2); }
.ap-prod-punkt.stufe-3 { background: var(--stufe-3); } .ap-prod-punkt.stufe-4 { background: var(--stufe-4); }
.ap-prod-punkt.stufe-5 { background: var(--stufe-5); } .ap-prod-punkt.stufe-6 { background: var(--stufe-6); }
.ap-prod-punkt.stufe-7 { background: var(--stufe-7); }
.ap-unter { font-size: 13px; color: var(--color-text-muted); }
.ap-unter-telefon { display: none; }
.ap-dateien { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-datei { display: inline-flex; align-items: center; gap: 6px; height: 28px; max-width: 100%; padding: 0 10px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-2); font-size: 12.5px; color: var(--color-text); }
.ap-datei.ist-mehr { color: var(--color-text-muted); }
.ap-datei-symbol { display: flex; color: var(--color-text-faint); }
.ap-datei-symbol svg { width: 13px; height: 13px; }
.ap-datei-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-datei-groesse { color: var(--color-text-faint); white-space: nowrap; }
.ap-wechsel-liste { display: flex; flex-direction: column; gap: 2px; }
.ap-wechsel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-muted); }
.ap-von { color: var(--color-text-faint); text-decoration: line-through; overflow-wrap: anywhere; }
.ap-pfeil { display: flex; color: var(--color-text-faint); }
.ap-pfeil svg { width: 14px; height: 14px; }
.ap-nach { color: var(--color-text); font-weight: 500; }
.ap-d { display: flex; flex-direction: column; }
.ap-d-zurueck { align-self: flex-start; margin: 12px 0 0 12px; display: inline-flex; align-items: center; gap: 4px; }
.ap-d-zurueck svg { width: 14px; height: 14px; }
.ap-d-kopf { padding: 20px 20px 12px; display: flex; flex-direction: column; gap: 12px; }
.ap-d-kopf > .ap-prod { align-self: flex-start; }
.ap-d-oben { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ap-d-art { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-faint); }
.ap-d-zu { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; color: var(--color-text-faint); }
.ap-d-zu svg { width: 16px; height: 16px; }
.ap-d-titel { font-size: 20px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.ap-d-wer { display: flex; align-items: center; gap: 10px; color: var(--color-text-muted); }
.ap-d-knopf { padding: 0 20px 16px; border-bottom: 1px solid var(--color-border); }
.ap-d-knopf:empty { padding-bottom: 4px; }
.ap-d-oeffnen { display: inline-flex; align-items: center; gap: 6px; }
.ap-d-oeffnen svg { width: 13px; height: 13px; }
.ap-d-abschnitt { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.ap-d-abschnitt + .ap-d-abschnitt { border-top: 1px solid var(--color-border); }
.ap-d-abschnitt h3 { margin: 0; font-size: 13px; font-weight: 500; }
.ap-d-felder { display: grid; grid-template-columns: minmax(80px, auto) minmax(0, 1fr) 16px minmax(0, 1fr); align-items: center; row-gap: 10px; column-gap: 8px; font-size: 13.5px; }
.ap-d-feld { display: contents; }
.ap-d-feldname { color: var(--color-text-muted); }
.ap-d-wert { overflow-wrap: anywhere; justify-self: start; }
.ap-d-feld > .ap-d-wert:not(.ist-neu) { grid-column: 2 / -1; }
.ap-d-feld > span:empty { display: none; }
.ap-d-wert.ist-neu { font-weight: 500; padding: 2px 8px; border-radius: 6px; background: color-mix(in srgb, var(--color-accent-soft) 60%, var(--color-surface)); }
.ap-d-leer { margin: 0; color: var(--color-text-muted); font-size: 13px; }
.ap-d-verlauf { display: flex; flex-direction: column; gap: 2px; }
.ap-d-verlauf-zeile { display: grid; grid-template-columns: 84px 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 6px; margin: 0 -6px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; text-align: left; color: var(--color-text-muted); cursor: pointer; }
.ap-d-verlauf-zeile:hover { background: var(--color-bg-alt); }
.ap-d-verlauf-zeile.ist-aktuell { color: var(--color-text); }
.ap-d-verlauf-zeile .liste-kuerzel { width: 22px; height: 22px; font-size: 9.5px; }
.ap-d-wann { color: var(--color-text-faint); font-variant-numeric: tabular-nums; }
.ap-d-verlauf-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-d-verlauf-text.ist-name { grid-column: 2 / 4; color: var(--color-text); }
.ap-d-groesse { color: var(--color-text-faint); }
.ap-d-verlauf-kurz { display: none; }
.modal.action-sheet.ap-blatt { max-width: 520px; width: 100%; padding: 0; }
.ap-blatt .modal-header { padding: 8px 12px 0; min-height: 0; }
.ap-blatt .ap-d-zu { display: none; }
.ap-blatt-inhalt { max-height: calc(100vh - 140px); overflow-y: auto; }
.pd-chat-composer .chat-emoji-panel { width: min(280px, calc(100vw - 64px)); }
.pd-chat-msg .chat-message-image img { max-height: 140px; }
.pd-chat-msg .chat-message-file { font-size: 12px; padding: 6px 8px; }
.pd-chat-list.is-dropping {
outline: 2px dashed var(--color-accent);
outline-offset: -2px;
border-radius: var(--radius-md);
background: var(--color-accent-soft);
}
.pm-tag.pm-tag-open {
background: var(--color-danger-soft);
color: var(--color-danger);
font-weight: 600;
}
button.pm-tag.pm-tag-todo {
border: 1px solid transparent;
font-family: inherit;
cursor: pointer;
line-height: 1.4;
}
button.pm-tag.pm-tag-todo:hover {
filter: brightness(0.96);
}
.pd-open-comments {
margin: 0 0 var(--space-4);
padding: 10px 12px 10px 14px;
border-left: 2.5px solid var(--color-accent);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
background: var(--color-accent-soft);
display: flex;
flex-direction: column;
gap: 8px;
}
.pd-open-comments-head {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: var(--weight-medium);
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--color-accent-strong);
}
.pd-open-comments-head svg { width: 13px; height: 13px; }
.pd-open-comment {
display: flex;
align-items: flex-start;
gap: 10px;
}
.pd-open-comment-meta {
font-size: 11px;
color: var(--color-text-muted);
}
.pd-open-comment-body {
font-size: 13px;
line-height: 1.45;
white-space: pre-wrap;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pd-previews-body {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.po-inhalt { display: flex; flex-direction: column; gap: 14px; }
.po-status {
display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-full);
font-size: 11px; font-weight: var(--weight-semibold); white-space: nowrap;
background: var(--color-bg-alt); color: var(--color-text-muted);
}
.po-status .po-punkt { width: 6px; height: 6px; border-radius: 50%; background: var(--color-border-strong); }
.po-status.ist-live { background: var(--color-success-soft); color: color-mix(in srgb, var(--color-success) 55%, var(--color-text)); }
.po-status.ist-live .po-punkt { background: var(--color-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 22%, transparent); }
.po-alt {
display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm);
background: var(--color-bg-alt); font-size: 12px; color: var(--color-text-muted); line-height: 1.5;
}
.po-alt svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
.po-alt b { color: var(--color-text); font-weight: var(--weight-semibold); }
.po-pfad { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 11px; color: var(--color-text-muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-weitere { font-size: 11.5px; color: var(--color-warning); }
.ft-kopf-extra { display: flex; align-items: center; gap: 8px; }
.ft-zaehler { font-size: 11.5px; color: var(--color-text-muted); background: var(--color-bg-alt); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.ft-schalter { height: 30px; padding: 0 10px; border-radius: 8px; border: 0; display: inline-flex; align-items: center; gap: 6px; font: inherit;
font-size: 12.5px; font-weight: var(--weight-medium); color: var(--color-text-faint); background: var(--color-bg-alt); cursor: pointer; white-space: nowrap; }
.ft-schalter svg { width: 14px; height: 14px; }
.ft-schalter.ist-an { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-accent) 38%, transparent); }
.ft-body { display: flex; flex-direction: column; gap: 10px; }
.ft-lieferung { border: 1px solid var(--color-border); border-radius: 11px; padding: 11px 12px; display: flex; flex-direction: column; gap: 8px; }
.ft-lieferung-kopf { display: flex; align-items: center; gap: 10px; }
.ft-lieferung-symbol { color: var(--color-text-muted); display: inline-flex; }
.ft-lieferung-symbol svg { width: 16px; height: 16px; }
.ft-lieferung-text { flex: 1; min-width: 0; }
.ft-lieferung-name { font-size: 13.5px; font-weight: var(--weight-semibold); }
.ft-lieferung-meta { font-size: 12px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-kosten { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 11.5px; color: var(--color-text-faint); font-variant-numeric: tabular-nums; cursor: help; }
.ft-kosten > span:first-child { display: inline-flex; flex: none; }
.ft-kosten svg { width: 12px; height: 12px; }
.ft-kosten-summe { cursor: help; }
.ft-lieferung-knoepfe { display: flex; gap: 6px; }
.ft-icon-knopf { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted);
display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ft-icon-knopf svg { width: 14px; height: 14px; }
.ft-icon-knopf.ist-rot { color: var(--color-danger, #c2412d); }
.ft-stand { display: grid; grid-template-columns: 16px 150px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12.5px; color: var(--color-text-muted); padding-left: 26px; }
.ft-stand > span:first-child svg { width: 14px; height: 14px; }
.ft-stand-ort { color: var(--color-text); }
.ft-stand-text { text-align: right; display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.ft-stand.ist-fehler .ft-stand-text { color: var(--color-danger, #c2412d); }
.ft-stand.ist-gelb .ft-stand-text { color: var(--color-warning-strong, #8a4a0c); }
.ft-stand.ist-grau { opacity: .7; }
.ft-bahn { display: block; height: 4px; border-radius: 999px; background: var(--chart-grid); overflow: hidden; }
.ft-bahn > span { display: block; height: 100%; background: var(--color-accent); border-radius: 999px; }
.ft-ziel { font-size: 12px; color: var(--color-text-muted); line-height: 1.5; }
.ft-ziel b { color: var(--color-text); font-weight: var(--weight-medium); }
.ft-leer { border: 1.5px dashed var(--color-border); border-radius: 12px; padding: 22px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 13px; color: var(--color-text-muted); }
.ft-leer > span:first-child svg { width: 22px; height: 22px; color: var(--color-text-faint); }
.ft-leer b { color: var(--color-text); font-size: 14px; }
.ft-dateiliste { max-height: 60vh; overflow: auto; }
.ft-dateizeile { display: grid; grid-template-columns: minmax(0, 1fr) 70px 32px; gap: 8px; align-items: center; padding: 5px 0; border-top: 1px solid var(--color-border); font-size: 13px; }
.ft-dateizeile-pfad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-dateizeile-groesse { text-align: right; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
.ft-stand { grid-template-columns: 16px minmax(0, 1fr) auto; padding-left: 0; }
.ft-stand .ft-bahn { display: none; }
.ft-schalter { font-size: 0; gap: 0; width: 34px; justify-content: center; padding: 0; }
.ft-zaehler { display: none; }
}
.po-karten { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(140px, 1fr); gap: 8px; overflow-x: auto; }
.po-karten:has(> :nth-child(4)) { grid-auto-columns: minmax(150px, calc((100% - 16px) / 3)); padding-bottom: 4px; }
.po-karte { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 11px; border-radius: var(--radius-md, 11px);
border: 1px solid var(--color-border); background: var(--color-surface); }
.po-karte.ist-haupt { border: 1.5px solid var(--color-accent); padding: 9.5px 10.5px; }
.po-karte.ist-eigen { background: var(--color-bg-alt); }
.po-karte-kopf { display: flex; align-items: center; gap: 6px; height: 18px; color: var(--color-text-muted); }
.po-karte-kopf svg { width: 14px; height: 14px; }
.po-karte-luft { flex: 1; }
.po-karte-du { font-size: 11px; line-height: 16px; font-weight: var(--weight-medium); color: var(--color-text-muted); background: var(--color-bg-alt); border: 1px solid var(--color-border); padding: 0 7px; border-radius: 999px; }
.po-karte-name { font-size: 13px; font-weight: var(--weight-semibold); line-height: 1.25; min-height: 2.5em;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.po-karte-groesse { font-size: 20px; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.po-karte-groesse.ist-leer { color: var(--color-text-faint); }
.po-karte-bahn { display: block; height: 4px; border-radius: 999px; background: var(--chart-grid); overflow: hidden; }
.po-karte-bahn span { display: block; height: 100%; background: var(--color-accent); border-radius: 999px; }
.po-karte-meta { font-size: 12px; color: var(--color-text-muted); }
.po-karte-fuss { border-top: 1px solid var(--color-border); padding-top: 7px; margin-top: auto; }
.po-karte-link { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: var(--weight-medium); color: var(--color-accent); text-decoration: none; }
.po-karte-link:hover { text-decoration: underline; }
.po-karte-link.ist-finder { color: var(--color-text-muted); gap: 4px; }
.po-karte-link svg { width: 13px; height: 13px; }
.po-rechner-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--color-text-faint); flex-shrink: 0; }
.po-rechner-punkt.ist-live { background: var(--color-accent); }
.po-inhalt-titel { margin-top: 2px; }
.po-angelegt { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: var(--weight-medium); color: var(--color-accent);
background: color-mix(in srgb, var(--color-accent) 12%, transparent); padding: 2px 8px; border-radius: 999px; }
.po-angelegt svg { width: 11px; height: 11px; }
.po-hinweis.ist-fehler .po-hinweis-unter { white-space: normal; }
.nb-zeile.ist-ziel { background: color-mix(in srgb, var(--color-accent) 12%, transparent); border-radius: var(--radius-sm); }
.nb-zeile.ist-ziel .nb-name { font-weight: var(--weight-semibold); }
.po-kennzahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 112px; gap: 10px; }
.po-kennzahl { padding: 9px 11px; border-radius: var(--radius-sm); background: var(--color-surface); border: 1px solid var(--color-border);
display: flex; flex-direction: column; justify-content: space-between; gap: 4px; min-width: 0; }
.po-kennzahl-titel { font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-faint); }
.po-kennzahl-wert { font-size: 16px; font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-spark { display: flex; align-items: flex-end; gap: 2px; height: 22px; }
.po-spark span { flex: 1; min-width: 2px; border-radius: 1px; background: var(--color-accent); }
.po-spark span.ist-null { background: var(--chart-grid); }
.po-spark.ist-alt span:not(.ist-null) { background: var(--color-text-faint); }
.po-unter { display: flex; flex-direction: column; }
.po-unter-zeile { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 70px 92px; gap: 12px; align-items: center;
padding: 6px 0; border-top: 1px solid var(--chart-grid); font-size: 11.5px; }
.po-unter-name { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-unter-bahn { height: 2px; background: var(--chart-grid); display: block; }
.po-unter-bahn span { display: block; height: 2px; background: var(--color-accent); }
.po-unter-groesse { text-align: right; font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }
.po-unter-zeit { color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-hinweise { display: flex; flex-direction: column; gap: 6px; }
.po-hinweis { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm);
background: var(--color-surface); border: 1px solid var(--color-border); }
.po-hinweis-symbol { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
background: var(--color-accent-soft); color: var(--color-accent-strong); }
.po-hinweis-symbol svg { width: 14px; height: 14px; }
.po-hinweis.ist-fehler .po-hinweis-symbol { background: var(--color-danger-soft); color: var(--color-danger); }
.po-hinweis.ist-fertig .po-hinweis-symbol { background: var(--color-success-soft); color: var(--color-success); }
.po-hinweis.ist-warn .po-hinweis-symbol { background: var(--color-warning-soft); color: var(--color-warning); }
.po-reste { background: var(--color-warning-soft); margin-bottom: 10px; }
.po-reste .po-hinweis-symbol { background: var(--color-surface); }
.po-einsortieren { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.po-einsortieren svg { width: 14px; height: 14px; }
.po-hinweis-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.po-hinweis-titel { font-size: 12.5px; font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-hinweis-unter { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-hinweis-still { font-size: 11px; color: var(--color-text-faint); white-space: nowrap; }
.po-balken { height: 3px; border-radius: 2px; background: var(--chart-grid); overflow: hidden; }
.po-balken span { display: block; height: 100%; background: var(--color-accent); transition: width var(--dur-slow) var(--ease); }
.po-neueste { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--radius-sm);
background: var(--color-surface); border: 1px solid var(--color-border); }
.po-neueste > span:first-child { color: var(--color-text-muted); display: flex; }
.po-neueste > span:first-child svg { width: 15px; height: 15px; }
.po-neueste > div { flex: 1; min-width: 0; }
.po-neueste-name { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-neueste-meta { font-size: 11px; color: var(--color-text-muted); text-align: right; white-space: nowrap; }
.po-fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px dashed var(--color-border);
font-size: 11px; color: var(--color-text-faint); }
.po-finder { text-decoration: none; }
.po-leer-text { margin: 0; font-size: 13px; color: var(--color-text-muted); }
.po-anlegen { display: flex; justify-content: flex-start; }
.po-block { margin-top: var(--space-4); padding: 14px 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.po-block > .pd-widget-body { padding: 0; }
.po-block-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.po-block-titel { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: var(--weight-medium); }
.po-block-titel svg { width: 15px; height: 15px; color: var(--color-accent); }
.po-liste { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.po-liste .po-spark { height: 16px; width: 70px; gap: 1.5px; }
.po-liste-still { color: var(--color-warning); }
.po-nas-liste { display: flex; flex-direction: column; gap: 6px; }
.po-nas { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm);
background: var(--color-bg-alt); }
.po-nas-symbol { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
background: var(--color-surface); color: var(--color-accent-strong); }
.po-nas-symbol svg { width: 14px; height: 14px; }
.po-nas-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.po-nas-titel { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-nas-titel b { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.po-nas-unter { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nas-fenster { display: flex; flex-direction: column; gap: 12px; }
.modal-backdrop.nas-modal { align-items: center; }
.modal.nas-modal { max-width: 820px; }
.nas-modal .nas-liste { max-height: 60vh; }
.nas-pfad { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; font-size: 12.5px; }
.nas-pfad-teil { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: var(--radius-sm);
background: none; border: 0; color: var(--color-text-muted); font: inherit; cursor: pointer; max-width: 100%;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nas-pfad-teil:hover { background: var(--color-bg-alt); color: var(--color-text); }
.nas-pfad-teil.ist-aktuell { color: var(--color-text); font-weight: var(--weight-medium); cursor: default; }
.nas-pfad-teil.ist-aktuell:hover { background: none; }
.nas-pfad-teil svg { width: 14px; height: 14px; color: var(--color-accent); flex-shrink: 0; }
.nas-pfad-trenner { display: inline-flex; color: var(--color-text-faint); }
.nas-pfad-trenner svg { width: 12px; height: 12px; }
.nas-liste { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-md);
max-height: 52vh; overflow-y: auto; background: var(--color-surface); }
.nas-zeile { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 0; border-top: 1px solid var(--chart-grid);
background: none; font: inherit; color: inherit; text-align: left; width: 100%; min-height: 46px; }
.nas-zeile:first-child { border-top: 0; }
.nas-zeile.ist-ordner { cursor: pointer; }
.nas-zeile.ist-ordner:hover { background: var(--color-bg-alt); }
.nas-zeile-symbol { display: flex; color: var(--color-text-muted); flex-shrink: 0; }
.nas-zeile.ist-ordner .nas-zeile-symbol { color: var(--color-accent); }
.nas-zeile-symbol svg { width: 16px; height: 16px; }
.nas-zeile-name { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nas-zeile-meta { font-size: 11.5px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nas-zeile-pfeil { display: flex; color: var(--color-text-faint); }
.nas-zeile-pfeil svg { width: 14px; height: 14px; }
.nas-zeile-knoepfe { display: flex; gap: 6px; flex-shrink: 0; }
.nas-warten, .nas-fehler { display: flex; align-items: center; gap: 14px; padding: 36px 20px; justify-content: center; }
.nas-warten .spinner { margin: 0; flex-shrink: 0; }
.nas-warten-titel { font-size: 13.5px; font-weight: var(--weight-medium); }
.nas-warten-unter { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.nas-fehler { color: var(--color-danger); font-size: 13px; }
.nas-fehler > span { display: flex; }
.nas-fehler svg { width: 16px; height: 16px; }
.nas-leer { margin: 0; padding: 28px 20px; text-align: center; font-size: 13px; color: var(--color-text-muted); }
.nas-abrufe { display: flex; flex-direction: column; gap: 6px; }
.nas-abrufe:empty { display: none; }
.nas-abrufe-titel { font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-faint); }
.nas-abruf { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm);
background: var(--color-surface); border: 1px solid var(--color-border); }
.nas-abruf > .nas-zeile-symbol { width: 26px; height: 26px; border-radius: 7px; align-items: center; justify-content: center;
background: var(--color-accent-soft); color: var(--color-accent-strong); }
.nas-abruf > .nas-zeile-symbol svg { width: 14px; height: 14px; }
.nas-abruf.ist-fertig > .nas-zeile-symbol { background: var(--color-success-soft); color: var(--color-success); }
.nas-abruf.ist-fehler > .nas-zeile-symbol { background: var(--color-danger-soft); color: var(--color-danger); }
.nas-abruf-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nas-abruf-name { font-size: 12.5px; font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nas-abruf-unter { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nas-abruf.ist-fehler .nas-abruf-unter { color: var(--color-danger); }
.nas-abruf-fortschritt { display: flex; flex-direction: column; gap: 4px; }
.nas-abruf-aktion { display: flex; gap: 6px; flex-shrink: 0; }
.nas-abruf .btn svg, .nas-zeile-knoepfe .btn svg { width: 14px; height: 14px; }
.pdat-zentralen { display: grid; gap: var(--space-4); }
.pdat-zentrale { display: flex; flex-direction: column; gap: 16px; }
.pdat-zentrale-kopf { display: flex; align-items: center; gap: 12px; }
.pdat-zentrale-symbol { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
background: var(--color-accent-soft); color: var(--color-accent-strong); }
.pdat-zentrale-symbol svg { width: 18px; height: 18px; }
.pdat-zentrale-name { font-size: 15px; font-weight: var(--weight-medium); }
.pdat-zentrale-unter { font-size: 12px; color: var(--color-text-muted); margin-top: 3px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pdat-zustand { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--weight-semibold); }
.pdat-zustand .po-punkt { width: 6px; height: 6px; border-radius: 50%; background: var(--color-border-strong); }
.pdat-zustand.ist-live { color: color-mix(in srgb, var(--color-success) 60%, var(--color-text)); }
.pdat-zustand.ist-live .po-punkt { background: var(--color-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 22%, transparent); }
.pdat-zustand.ist-schlaf { color: var(--color-text-muted); }
.pdat-zustand.ist-fehler { color: var(--color-danger); }
.pdat-zustand.ist-fehler .po-punkt { background: var(--color-danger); }
.pdat-laufwerke { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 24px; }
.pdat-laufwerk { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pdat-laufwerk-kopf { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.pdat-laufwerk-name { font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdat-laufwerk-wert { color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pdat-laufwerk.ist-weg .pdat-laufwerk-name { color: var(--color-text-muted); }
.pdat-balken { height: 4px; border-radius: 2px; background: var(--chart-grid); overflow: hidden; }
.pdat-balken span { display: block; height: 100%; background: var(--color-accent); }
.pdat-balken.ist-voll span { background: var(--color-danger); }
.pdat-anzahl { margin-left: 6px; font-size: 11px; opacity: .65; font-variant-numeric: tabular-nums; }
.pdat-nas { white-space: nowrap; }
.pdat-nas + .pdat-nas { margin-top: 3px; }
.pdat-fehlt { font-size: 12px; color: var(--color-warning); white-space: nowrap; }
.pdat-rechner { display: flex; flex-wrap: wrap; gap: 4px; }
.pdat-person { display: inline-flex; padding: 2px 8px; border-radius: var(--radius-full); background: var(--color-bg-alt);
font-size: 11.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pdat-person.ist-rest { background: var(--color-warning-soft); color: color-mix(in srgb, var(--color-warning) 70%, var(--color-text)); }
.pdat-aktionen { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.pdat-aktionen .btn svg { width: 14px; height: 14px; }
.pdat-abschnitt { font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: .08em; text-transform: uppercase;
color: var(--color-text-faint); margin-bottom: 4px; }
.pdat-verknuepft, .pdat-speicher { display: flex; flex-direction: column; }
.pdat-vzeile { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: center;
padding: 7px 0; border-top: 1px solid var(--chart-grid); font-size: 12.5px; }
.pdat-vname { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--weight-medium); min-width: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdat-vname svg { width: 14px; height: 14px; color: var(--color-accent); flex-shrink: 0; }
.pdat-vzahl { color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pdat-vstand { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--color-text-muted); white-space: nowrap; }
.pdat-vstand .pdat-balken { flex: 1; min-width: 60px; }
.pdat-vstand.ist-fertig { color: var(--color-success); }
.pdat-vzeile.ist-weg .pdat-vname, .pdat-vzeile.ist-weg .pdat-vzahl { color: var(--color-text-faint); }
.pdat-speicher .pdat-laufwerk { padding: 7px 0; border-top: 1px solid var(--chart-grid); }
.pdat-speicher .pdat-laufwerk-name { font-weight: var(--weight-regular, 400); color: var(--color-text-muted); }
.nb-baum { display: flex; flex-direction: column; }
.nb-zeile { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 5px 10px;
padding-left: calc(var(--nb-einzug, 0px) + var(--nb-tiefe, 0) * 16px + 8px);
border: 0; border-top: 1px solid var(--chart-grid); background: none; font: inherit; color: inherit; text-align: left; font-size: 12.5px; }
.nb-baum > .nb-ast:first-child > .nb-zeile, .nb-baum > .nb-zeile:first-child { border-top: 0; }
.nb-zeile.ist-ordner { cursor: pointer; }
.nb-zeile.ist-ordner:hover:not(:disabled) { background: var(--color-bg-alt); }
.nb-zeile:disabled { cursor: default; opacity: .7; }
.nb-pfeil { width: 12px; flex-shrink: 0; display: flex; color: var(--color-text-faint); transition: transform var(--dur-fast) var(--ease); }
.nb-pfeil svg { width: 12px; height: 12px; }
.nb-zeile[aria-expanded="true"] > .nb-pfeil { transform: rotate(90deg); }
.nb-symbol { display: flex; flex-shrink: 0; color: var(--color-text-muted); }
.nb-symbol svg { width: 15px; height: 15px; }
.nb-zeile.ist-ordner .nb-symbol { color: var(--color-accent); }
.nb-zeile.ist-sequenz .nb-symbol { color: var(--color-accent-strong); }
.nb-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-zeile.ist-gruppe .nb-name, .nb-zeile.ist-projekt .nb-name { font-weight: var(--weight-medium); }
.nb-marke { margin-left: 8px; font-size: 11px; font-weight: var(--weight-regular, 400); color: var(--color-text-faint); }
.nb-meta { font-size: 11.5px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nb-zeile.ist-mehr { color: var(--color-text-faint); font-style: italic; }
.nb-zeile .nas-zeile-knoepfe { margin-left: 4px; }
.nb-zeile .btn svg { width: 14px; height: 14px; }
.nb-projekt { display: flex; align-items: center; border-top: 1px solid var(--chart-grid); }
.nb-projekt > .nb-zeile { border-top: 0; }
.nb-aktion { padding-right: 10px; flex-shrink: 0; }
.nb-aktion .btn svg { width: 14px; height: 14px; }
.nb-laedt { padding: 10px; padding-left: calc(var(--nb-tiefe, 0) * 16px + 30px); }
.nb-laedt .spinner { margin: 0; width: 18px; height: 18px; }
.pdat-baum { margin: calc(var(--space-2) * -1) 0; }
.pdat-b-reiter { display: flex; gap: 4px; border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-3); overflow-x: auto; }
.pdat-b-tab { display: flex; align-items: center; gap: 9px; padding: 10px 16px; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
background: transparent; color: var(--color-text-muted); font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; }
.pdat-b-tab:hover { color: var(--color-text); }
.pdat-b-tab.ist-an { color: var(--color-text); border-bottom-color: var(--color-text); font-weight: 500; }
.pdat-b-tab-bild { position: relative; display: flex; }
.pdat-b-tab-bild svg { width: 17px; height: 17px; }
.pdat-b-tab-bild .rail-nas-punkt { right: -3px; bottom: -2px; box-shadow: 0 0 0 2px var(--color-bg, var(--color-surface)); }
.pdat-b { display: flex; gap: 28px; align-items: stretch; }
.pdat-b-links { width: 440px; flex-shrink: 0; min-width: 0; }
.pdat-b-rechts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; border-left: 1px solid var(--color-border); padding-left: 28px; }
.pdat-b-werkzeug { display: flex; gap: 10px; align-items: center; }
.pdat-b-suche { flex: 1; min-width: 0; max-width: none; }
.pdat-b-baum { max-height: 620px; overflow: auto; }
.pdat-b-baum > .nb-baum > .nb-ast:first-child > .nb-zeile { border-top: 0; }
.pdat-b-laedt { display: flex; justify-content: center; padding: var(--space-5) 0; }
.pdat-b-leer { color: var(--color-text-muted); margin: var(--space-3) 0; }
.pdat-b-treffer-zeile { --nb-tiefe: 0; cursor: default; }
.pdat-b-pfad { color: var(--color-text-muted); }
.nb-zeile.ist-cache { cursor: default; }
@media (max-width: 900px) {
.pdat-b { flex-direction: column; gap: var(--space-4); }
.pdat-b-links { width: auto; }
.pdat-b-rechts { border-left: 0; padding-left: 0; border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
}
.pdat-b-kurz { display: none; }
@media (max-width: 640px) {
.pdat-b-reiter { border-bottom: 0; gap: 8px; margin-bottom: var(--space-3); padding-bottom: 2px; }
.pdat-b-tab { height: 38px; padding: 0 14px; border: 1px solid var(--color-border); border-radius: 999px; margin: 0; background: var(--color-surface); color: var(--color-text); font-weight: 400; }
.pdat-b-tab.ist-an { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); font-weight: 500; }
.pdat-b-tab .rail-nas-punkt { box-shadow: 0 0 0 2px var(--color-surface); }
.pdat-b-tab.ist-an .rail-nas-punkt { box-shadow: 0 0 0 2px var(--color-text); }
.pdat-b { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.pdat-b-kurz { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; background: transparent;
text-align: left; color: var(--color-text); font: inherit; cursor: pointer; }
.pdat-b-kurz .pdat-zentrale-symbol { width: 36px; height: 36px; }
.pdat-b-kurz-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pdat-b-kurz-name { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdat-b-kurz-unter { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdat-b-kurz-unter .pdat-zustand { font-weight: 500; }
.pdat-b-kurz-mehr { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--color-text-muted); flex-shrink: 0; }
.pdat-b-kurz-mehr svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease); }
.pdat-b.ist-details .pdat-b-kurz-mehr svg { transform: rotate(180deg); }
.pdat-b-links { display: none; width: auto; padding: 0 14px 12px; }
.pdat-b.ist-details .pdat-b-links { display: block; }
.pdat-b-links .pdat-zentrale-kopf { display: none; }
.pdat-b-rechts { border: 0; padding: 0; gap: 0; }
.pdat-b-werkzeug { padding: 0 14px 12px; }
.pdat-b-suche { min-height: 44px; }
.pdat-b-zuklappen { display: none; }
.pdat-b-baum { max-height: none; overflow: visible; }
.pdat-b .nb-zeile { display: grid; grid-template-columns: 14px 18px minmax(0, 1fr); column-gap: 8px; row-gap: 1px; align-items: center;
min-height: 48px; padding: 6px 12px 6px calc(12px + var(--nb-tiefe, 0) * 16px); border-top: 1px solid var(--chart-grid); }
.pdat-b .nb-zeile > .nb-pfeil { grid-row: 1 / span 2; }
.pdat-b .nb-zeile > .nb-symbol { grid-row: 1 / span 2; }
.pdat-b .nb-zeile > .nb-name { grid-column: 3; font-size: 14px; }
.pdat-b .nb-zeile > .nb-meta { grid-column: 3; font-size: 12px; justify-self: start; text-align: left; margin: 0; padding: 0; }
.pdat-b-links .pdat-vzeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px; align-items: center; }
.pdat-b-links .pdat-vstand { grid-column: 1 / -1; }
.pdat-b-links .pdat-vstand.ist-fertig { grid-column: auto; grid-row: 1; grid-column-start: 2; display: none; }
.pdat-b .nb-baum > .nb-ast:first-child > .nb-zeile, .pdat-b .nb-baum > .nb-ast:first-child > .nb-projekt { border-top: 1px solid var(--chart-grid); }
.pdat-b .nb-projekt { border-top: 1px solid var(--chart-grid); }
.pdat-b .nb-projekt > .nb-zeile { border-top: 0; }
.pdat-b .nb-aktion { padding-right: 12px; }
.pdat-b .nb-aktion .btn { width: 36px; height: 36px; min-height: 36px; padding: 0; justify-content: center; }
.pdat-b .nb-aktion .nb-knopf-text { display: none; }
.pdat-b .nb-marke { display: none; }
}
.nb-symbol[class*="art-"] { width: 22px; height: 22px; border-radius: 6px; align-items: center; justify-content: center; }
.nb-symbol[class*="art-"] svg { width: 14px; height: 14px; }
.nb-symbol.art-video { background: #e8eef5; color: #2f5f8f; }
.nb-symbol.art-bild, .nb-symbol.art-sequenz { background: #f6ece1; color: #9a5a1c; }
.nb-symbol.art-ton { background: #efeaf6; color: #5e4b8b; }
.nb-symbol.art-schnitt, .nb-symbol.art-projekt { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent); }
.nb-symbol.art-dok, .nb-symbol.art-datei { background: var(--color-bg-alt); color: var(--color-text-muted); }
.nb-symbol.art-output { color: var(--color-accent); width: auto; height: auto; }
.nb-symbol.art-output svg { width: 15px; height: 15px; }
.nb-symbol.art-cache { color: var(--color-text-faint); width: auto; height: auto; }
.nb-symbol.art-cache svg { width: 15px; height: 15px; }
.nl-block { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; max-width: 560px; white-space: normal; }
.nl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.nl-chips:empty { display: none; }
.nl-chip { font-size: 11.5px; font-weight: 500; padding: 2px 9px; border-radius: 999px; background: var(--color-bg-alt); color: var(--color-text-muted); }
.nl-chip.ist-gruen { background: var(--color-accent-soft); color: var(--color-accent); }
.nl-pfad { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 10px; border-radius: 10px; background: var(--color-bg-alt); }
.nl-pfad-wert { flex: 1; min-width: 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; }
.nl-stand { display: flex; flex-direction: column; gap: 5px; }
.nl-kopf { display: flex; align-items: baseline; gap: 10px; font-weight: 500; }
.nl-kopf > span:first-child { flex: 1; }
.nl-zahlen { font-size: 12.5px; font-weight: 400; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.nl-balken { height: 7px; border-radius: 999px; background: var(--color-bg-alt); overflow: hidden; }
.nl-balken > span { display: block; height: 100%; background: var(--color-accent); border-radius: 999px; transition: width .4s ease; }
.nl-zeile { font-size: 12.5px; color: var(--color-text-faint); }
.nl-zeile.ist-fehler { color: var(--color-danger, #b42318); }
.nl-fertig { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--color-accent-soft); }
.nl-haken { width: 28px; height: 28px; border-radius: 50%; background: var(--color-accent); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nl-haken svg { width: 15px; height: 15px; }
.nl-fertig .nl-zeile { color: var(--color-text-muted); }
.nl-gerade { border-top: 1px solid var(--color-border-light, #ebe8e2); margin-top: 6px; padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.nl-gerade-kopf { display: flex; align-items: baseline; gap: 10px; }
.nl-gerade-titel { flex: 1; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.nl-gerade-datei { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto; align-items: center; gap: 12px; }
.nl-gerade-pfad { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl-balken.ist-klein { height: 5px; }
@media (max-width: 640px) { .nl-gerade-datei { grid-template-columns: minmax(0, 1fr) auto; } .nl-gerade-datei .nl-balken { grid-column: 1 / -1; grid-row: 2; } }
.nl-meldung { padding: 10px 12px; border-radius: 10px; background: #fff1f0; color: #a3271b; font-size: 13px; }
.modal.ak-dialog { max-width: 540px; }
.ak-inhalt { display: flex; flex-direction: column; gap: 6px; }
.ak-unter { margin: 0 0 var(--space-3); font-size: 13.5px; color: var(--color-text-muted); }
.ak-eintrag { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface, #fff); margin-bottom: var(--space-3); }
.ak-symbol { width: 20px; height: 20px; color: var(--color-accent); flex-shrink: 0; display: flex; }
.ak-symbol svg { width: 20px; height: 20px; }
.ak-eintrag-text { display: flex; flex-direction: column; min-width: 0; }
.ak-eintrag-text b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-eintrag-text small { font-size: 12.5px; color: var(--color-text-faint); }
.ak-zugang { margin-top: var(--space-3); padding: 14px; border: 1px solid #a9d5c3; border-radius: 12px; background: var(--color-accent-soft); display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.ak-zugang-text { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ak-zugang-text b { font-weight: 600; }
.ak-zugang-text small { font-size: 12.5px; color: var(--color-text-muted); }
.ak-zugang .switch { margin-top: 2px; }
.ak-fuss { margin: var(--space-3) 0 0; font-size: 12.5px; color: var(--color-text-faint); }
html[data-theme="dark"] .ak-zugang { border-color: rgba(76,199,154,0.35); }
.ba-haken { display: flex; align-items: center; flex-shrink: 0; padding: 0 2px; cursor: pointer; }
.ba-haken input { width: 15px; height: 15px; margin: 0; accent-color: var(--color-accent); cursor: pointer; }
.pdat-b .nb-reihe > .ba-haken, .pdat-b .nb-projekt > .ba-haken { padding-left: calc(10px + var(--nb-tiefe, 0) * 16px); }
.pdat-b .nb-reihe > .ba-haken + .nb-zeile, .pdat-b .nb-projekt > .ba-haken + .nb-zeile { padding-left: 6px; }
.ba-akt { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: 6px; }
.ba-knoepfe { display: flex; gap: 4px; opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease); }
.nb-zeile:hover .ba-knoepfe, .nb-reihe:hover .ba-knoepfe, .ba-knoepfe:focus-within { opacity: 1; pointer-events: auto; }
.ba-knopf, .ba-knoepfe .sammler-knopf { width: 30px; height: 30px; min-height: 30px; padding: 0; border-radius: 8px; border: 1px solid var(--color-border);
background: var(--color-surface); color: var(--color-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ba-knopf svg, .ba-knoepfe .sammler-knopf svg { width: 15px; height: 15px; }
.ba-knopf:hover, .ba-knoepfe .sammler-knopf:hover { border-color: var(--color-text-faint); }
.ba-knopf:disabled { opacity: .45; cursor: default; }
.ba-knoepfe .sammler-knopf.ist-drin { color: var(--color-accent); border-color: var(--color-accent); }
.ba-live { margin-right: 4px; }
.ba-mehr { display: none; }
.ba-stand:empty { display: none; }
.ba-stand { display: flex; align-items: center; font-size: 12px; white-space: nowrap; }
.ba-wartet { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-muted); }
.ba-punkt { width: 6px; height: 6px; border-radius: 50%; background: var(--color-warning); animation: nasl-puls 1.2s ease-in-out infinite; }
.ba-fortschritt { display: inline-flex; align-items: center; gap: 8px; color: var(--color-accent); }
.ba-fortschritt .po-balken { width: 80px; }
.ba-fertig { display: inline-flex; align-items: center; gap: 5px; color: var(--color-accent); font: inherit; font-size: 12.5px;
background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.ba-fertig svg, .ba-fehler svg { width: 14px; height: 14px; }
.ba-fehler { display: inline-flex; align-items: center; gap: 5px; color: var(--color-danger); font: inherit; font-size: 12px; background: none; border: 0; padding: 0; cursor: pointer; }
.ba-leiste { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 10px;
padding: 10px 12px 10px 18px; background: var(--color-text); color: var(--color-bg); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.ba-leiste[hidden] { display: none; }
.ba-leiste-text { font-size: 14px; white-space: nowrap; margin-right: 6px; }
.ba-leiste-text b { font-weight: 600; }
.ba-leiste-knopf { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 8px; cursor: pointer;
border: 1px solid color-mix(in srgb, var(--color-bg) 30%, transparent); background: transparent; color: var(--color-bg); font: inherit; font-size: 13px; white-space: nowrap; }
.ba-leiste-knopf svg { width: 15px; height: 15px; }
.ba-leiste-knopf.ist-primaer { background: var(--color-bg); color: var(--color-text); border-color: var(--color-bg); font-weight: 500; }
.ba-leiste-zu { width: 34px; height: 34px; border: 0; background: transparent; color: color-mix(in srgb, var(--color-bg) 70%, transparent); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ba-leiste-zu svg { width: 16px; height: 16px; }
.ba-modus-kopf { display: none; }
.ba-sammler { border: 1px dashed var(--color-border-strong); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; margin-top: 18px; font-size: 13px; }
.ba-sammler[hidden] { display: none; }
.ba-sammler-titel { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.ba-sammler-titel svg { width: 15px; height: 15px; }
.ba-sammler-zeile { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ba-sammler-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ba-sammler-weg { width: 26px; height: 26px; border: 0; background: transparent; color: var(--color-text-faint); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ba-sammler-weg svg { width: 13px; height: 13px; }
.ba-sammler-mehr { color: var(--color-text-muted); font-size: 12px; }
.pdat-b-sammler-mobil { display: none; }
.ba-blatt-grund { position: fixed; inset: 0; z-index: 95; background: rgba(22,21,18,.35); display: flex; align-items: flex-end; }
.ba-blatt { width: 100%; background: var(--color-surface); color: var(--color-text); border-radius: 18px 18px 0 0; padding: 8px 0 calc(18px + env(safe-area-inset-bottom));
box-shadow: 0 -8px 30px rgba(0,0,0,.15); }
.ba-blatt-griff { width: 40px; height: 5px; border-radius: 3px; background: var(--color-border); margin: 4px auto 14px; }
.ba-blatt-kopf { display: flex; align-items: center; gap: 12px; padding: 0 20px 14px; min-width: 0; }
.ba-blatt-titel { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ba-blatt-titel b { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ba-blatt-titel small, .ba-blatt-text small { font-size: 12px; color: var(--color-text-muted); }
.ba-blatt-zeile { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 0 20px; border: 0; border-top: 1px solid var(--color-border);
background: transparent; color: var(--color-text); font: inherit; text-align: left; cursor: pointer; }
.ba-blatt-ic { display: flex; color: var(--color-accent); }
.ba-blatt-ic svg { width: 20px; height: 20px; }
.ba-blatt-text { display: flex; flex-direction: column; gap: 1px; font-size: 15px; }
@media (max-width: 640px) {
.pdat-b .ba-haken { display: none; }
.pdat-b.ist-auswahl .ba-haken { display: flex; }
.pdat-b .ba-knoepfe { display: none; }
.pdat-b .ba-mehr { display: flex; width: 40px; height: 40px; border: 0; background: transparent; color: var(--color-text-muted); align-items: center; justify-content: center; }
.pdat-b .ba-mehr svg { width: 18px; height: 18px; }
.pdat-b.ist-auswahl .ba-mehr { display: none; }
.pdat-b .ba-live { width: 40px; height: 40px; border: 0; background: transparent; color: var(--color-text-muted); }
.pdat-b .nb-zeile { grid-template-columns: auto 14px 18px minmax(0, 1fr) auto; }
.pdat-b .nb-zeile > .ba-haken { grid-column: 1; grid-row: 1 / span 2; }
.pdat-b .nb-zeile > .nb-pfeil { grid-column: 2; }
.pdat-b .nb-zeile > .nb-symbol { grid-column: 3; grid-row: 1 / span 2; }
.pdat-b .nb-zeile > .nb-name, .pdat-b .nb-zeile > .nb-meta { grid-column: 4; }
.pdat-b .nb-zeile > .ba-akt { grid-column: 5; grid-row: 1 / span 2; }
.pdat-b .ba-akt { flex-direction: column; align-items: flex-end; gap: 2px; }
.pdat-b .ba-stand { font-size: 11px; }
.pdat-b .ba-fortschritt .po-balken { width: 50px; }
.pdat-b .nb-reihe > .ba-haken, .pdat-b .nb-projekt > .ba-haken { padding-left: calc(12px + var(--nb-tiefe, 0) * 16px); }
.ba-leiste { left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); transform: none; padding: 8px; gap: 6px; }
.ba-leiste-text, .ba-leiste-zu { display: none; }
.ba-leiste-knopf { flex: 1; flex-direction: column; height: auto; padding: 8px 0; gap: 3px; border: 0; font-size: 11.5px; }
.ba-leiste-knopf svg { width: 19px; height: 19px; }
.ba-leiste-knopf.ist-primaer { border-radius: 10px; }
.pdat-b.ist-auswahl .ba-modus-kopf { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px;
border-top: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-accent) 7%, transparent); font-size: 13px; color: var(--color-accent); font-weight: 500; }
.ba-modus-kopf button { border: 0; background: transparent; color: var(--color-accent); font: inherit; cursor: pointer; padding: 6px 0 6px 12px; }
.pdat-b-sammler-mobil { display: block; padding: 0 14px; }
.pdat-b-sammler-mobil .ba-sammler { margin: 0 0 12px; }
}
.pdat-baum > .nb-ast:first-child > .nb-zeile { border-top: 0; }
.nas-liste.ist-baum { padding: 0; }
.nas-baum-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; width: 100%; }
.nas-baum-stand { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.nas-baum-stand svg { width: 14px; height: 14px; color: var(--color-accent); }
.nas-baum-stand b { font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nas-baum-info { color: var(--color-text-muted); flex: 1; }
.nas-baum-kopf .btn svg, .nas-zum-baum svg { width: 14px; height: 14px; }
.nas-zum-baum { margin-left: auto; }
.po-status.ist-nas { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.po-status.ist-nas .po-punkt { background: var(--color-accent); }
.po-kennzahlen.ist-nas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.po-baum { border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface);
max-height: 420px; overflow-y: auto; }
.po-baum .spinner { margin: 14px auto; }
.sidebar-brand { justify-content: center; padding: 10px 0 22px; }
.sidebar-wortmarke { font-size: 50px; padding: 0 2px 0 0; margin: -6px 0 -6px; }
.nav-group-label { color: var(--color-text-faint); }
.nav-group-label::before { display: none; }
.nav-groups-container { padding-left: 10px; margin-left: -10px; }
.nav-link.active { background: #ffffff; color: var(--sidebar-text-active); box-shadow: 0 1px 2px rgba(22, 21, 18, 0.05); }
.nav-link.active::before {
left: -10px;
width: 6px;
height: 6px;
border-radius: 50%;
}
html[data-theme="dark"] .nav-link.active { background: #25231f; box-shadow: none; }
.sidebar-footer-user .sidebar-collapse-toggle { margin-left: auto; }
.sidebar-user-block { min-width: 0; }
.number-copy-btn { color: var(--color-accent); }
.reste-hinweis {
margin: calc(-1 * var(--space-2)) 0 var(--space-5);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 18px;
padding: 22px 24px 24px;
display: flex; flex-direction: column; gap: 20px;
transition: opacity var(--dur-fast) var(--ease);
}
.reste-hinweis.ist-weg { opacity: 0; pointer-events: none; }
.reste-kopf { display: flex; align-items: center; gap: 14px; }
.reste-symbol {
width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
background: var(--color-warning-soft); color: var(--color-warning);
}
.reste-symbol svg { width: 20px; height: 20px; }
.reste-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.reste-titel { margin: 0; font-size: 18px; font-weight: 600; color: var(--color-text); }
.reste-unter { font-size: 13px; color: var(--color-text-muted); }
.reste-aktionen { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.reste-umschalter { display: flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--color-bg-alt); }
.reste-umschalter[hidden] { display: none; }
.reste-umschalter button {
height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: none;
font: inherit; font-size: 13px; color: var(--color-text-muted); cursor: pointer; white-space: nowrap;
}
.reste-umschalter button[aria-pressed="true"] { background: var(--color-surface); color: var(--color-text); font-weight: var(--weight-medium); }
.reste-erinnern { gap: 6px; white-space: nowrap; }
.reste-erinnern svg { width: 15px; height: 15px; }
.reste-zu { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; color: var(--sidebar-text); }
.reste-zu svg { width: 16px; height: 16px; }
.reste-personen { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.reste-person {
display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 14px; min-width: 0;
background: color-mix(in srgb, var(--reste-farbe) 8%, var(--color-surface));
border: 1px solid color-mix(in srgb, var(--reste-farbe) 18%, var(--color-surface));
}
.reste-person-kopf { display: flex; align-items: center; gap: 10px; padding: 0 2px 6px; }
.reste-person-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.reste-person-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reste-person-geraet { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reste-ordner-marken { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.reste-person-summe { font-size: 13px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.reste-zeile {
display: flex; align-items: center; gap: 10px; padding: 9px 10px; min-height: 44px; box-sizing: border-box;
border-radius: 10px; background: var(--color-surface); min-width: 0;
}
.reste-nas {
flex: none; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
display: inline-flex; align-items: center; white-space: nowrap;
background: var(--color-bg-alt); color: var(--color-text-muted);
}
.reste-nas.ist-fehler { background: var(--color-danger-soft); color: var(--color-danger); }
.reste-nas.ist-warn { background: var(--color-warning-soft); color: color-mix(in srgb, var(--color-warning) 72%, var(--color-text)); }
.reste-ordner { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--color-text); text-decoration: none; }
.reste-ordner:hover .reste-ordner-name { color: var(--color-accent); }
.reste-avatar {
flex: none; width: 26px; height: 26px; border-radius: 50%; color: #fff;
font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center;
}
.reste-ordner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.reste-ordner-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reste-ordner-name b { font-weight: 600; }
.reste-ordner-meta { font-size: 11.5px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.reste-marke {
flex: none; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--color-bg-alt); color: var(--color-text-muted);
font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.reste-marke svg { width: 11px; height: 11px; }
.reste-marke.ist-fehler { background: var(--color-danger-soft); color: var(--color-danger); }
.reste-einsortieren {
flex: none; width: 30px; height: 30px; padding: 0; border: 1px solid var(--color-border); border-radius: 8px;
background: var(--color-surface); color: var(--color-text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.reste-einsortieren:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.reste-einsortieren.ist-fehler { border-color: var(--color-danger); color: var(--color-danger); }
.reste-einsortieren svg { width: 14px; height: 14px; }
.modal.is-eingang { max-width: 760px; }
.eingang-knopf { position: relative; }
.eingang-zahl {
position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
border-radius: 999px; background: var(--color-accent); color: #fff; font-size: 10px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.eingang-zahl[hidden] { display: none; }
.eingang { display: flex; flex-direction: column; gap: 12px; }
.eingang-einleitung { margin: 0; font-size: 13px; color: var(--color-text-muted); }
.eingang-liste { display: flex; flex-direction: column; gap: 10px; }
.eingang-karte { display: flex; gap: 14px; padding: 12px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.eingang-karte.ist-fertig { opacity: .6; }
.eingang-bild, .eingang-symbol {
flex: none; width: 88px; height: 88px; border-radius: 9px; object-fit: cover; background: var(--color-bg-alt);
display: flex; align-items: center; justify-content: center; color: var(--color-text-muted);
}
.eingang-symbol svg { width: 28px; height: 28px; }
.eingang-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.eingang-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eingang-meta { font-size: 12px; color: var(--color-text-muted); margin-top: -4px; }
.eingang-ziele { display: flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--color-bg-alt); align-self: flex-start; }
.eingang-ziele button {
height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px;
color: var(--color-text-muted); cursor: pointer; white-space: nowrap;
}
.eingang-ziele button[aria-pressed="true"] { background: var(--color-surface); color: var(--color-text); font-weight: var(--weight-medium); }
.eingang-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.eingang-feld[hidden] { display: none; }
.eingang-hinweis { font-size: 12.5px; color: var(--color-text-muted); display: flex; align-items: center; min-height: 36px; }
.eingang-aktionen { display: flex; align-items: center; gap: 10px; }
.eingang-status { font-size: 12.5px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.eingang-luft { flex: 1; }
.eingang-weg svg { width: 16px; height: 16px; }
.eingang-einrichtung { display: flex; flex-direction: column; gap: 18px; font-size: 13.5px; }
.eingang-schritt h3 { margin: 0 0 8px; font-size: 14px; }
.eingang-schritt ol, .eingang-schritt ul { margin: 0 0 10px; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.eingang-schritt code { font-size: 12px; background: var(--color-bg-alt); padding: 1px 5px; border-radius: 5px; overflow-wrap: anywhere; }
.eingang-neu { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.eingang-neu p { margin: 0; }
.eingang-code { display: block; font-size: 13px !important; padding: 8px 10px !important; user-select: all; }
.eingang-schluessel { list-style: none; padding: 0 !important; margin-top: 10px !important; }
.eingang-schluessel li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--color-text-muted); }
.eingang-schritt .btn svg { width: 14px; height: 14px; }
.pd-category {
--pd-ton: var(--color-accent);
--pd-flaeche: color-mix(in srgb, var(--color-accent) 6%, var(--color-bg));
background: var(--pd-flaeche);
border-radius: 20px;
padding: 18px;
margin-bottom: 18px;
}
.pd-category.cat-team { --pd-ton: var(--color-tone-slate); --pd-flaeche: color-mix(in srgb, var(--color-tone-slate) 8%, var(--color-bg)); }
.pd-category.cat-admin { --pd-ton: var(--color-tone-amber); --pd-flaeche: color-mix(in srgb, var(--color-tone-amber) 8%, var(--color-bg)); }
.pd-category .pd-category-header,
.pd-category.cat-creative .pd-category-header,
.pd-category.cat-team .pd-category-header,
.pd-category.cat-admin .pd-category-header { color: var(--color-text); gap: 10px; margin-bottom: 14px; font-size: 16px; font-weight: 600; flex-wrap: wrap; }
.pd-category-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--pd-ton); flex: none; }
.pd-category-satz { font-size: 13px; font-weight: 400; color: var(--color-text-muted); }
.pd-category-satz:empty { display: none; }
.pd-category .pd-grid { gap: 12px; }
.pd-category .pd-column { gap: 12px; }
.pd-widget,
.pd-widget.cat-creative,
.pd-widget.cat-team,
.pd-widget.cat-admin { box-shadow: none; border-radius: 14px; transition: border-color .15s, box-shadow .15s; }
.pd-widget.flag-danger { box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-danger) 20%, transparent); }
.pd-widget.flag-warning { box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-warning) 20%, transparent); }
.pd-widget-header { border-bottom: none; background: transparent; padding: 14px 16px 4px; }
.pd-widget-title { text-transform: none; letter-spacing: 0; font-size: 15px; }
.pd-widget-title svg { width: 15px; height: 15px; color: var(--pd-ton, var(--color-accent)); }
.pd-widget-zahl,
.dw .pd-widget-title .dw-zahl { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--color-text-muted); }
.pd-widget-body { padding: 10px 16px 16px; }
.pd-widget-grip { order: 5; margin-left: 2px; }
.pd-widget-hide-btn { order: 6; margin-left: 0; }
@media (hover: hover) and (pointer: fine) {
.pd-widget-grip,
.pd-widget-hide-btn,
.pd-widget-header :is(button, a):not(.btn-primary):not(.pd-widget-title *) { opacity: 0; transition: opacity .15s; }
.pd-widget:hover .pd-widget-grip,
.pd-widget:hover .pd-widget-hide-btn,
.pd-widget:hover .pd-widget-header :is(button, a),
.pd-widget:focus-within .pd-widget-header :is(button, a),
.pd-widget-header :is(button, a):focus-visible { opacity: 1; }
.pd-widget:hover { border-color: var(--color-border-strong); box-shadow: 0 4px 14px rgba(0, 0, 0, .06); }
}
.pd-auswahl-gruppe.cat-creative .pd-auswahl-gruppe-titel::before { background: var(--color-accent); }
.pd-auswahl-gruppe.cat-team .pd-auswahl-gruppe-titel::before { background: var(--color-tone-slate); }
.pd-auswahl-gruppe.cat-admin .pd-auswahl-gruppe-titel::before { background: var(--color-tone-amber); }
.wk { display: flex; flex-direction: column; gap: var(--space-3); }
.wk-chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; font-weight: 500; white-space: nowrap;
background: color-mix(in srgb, var(--color-warning) 14%, var(--color-surface)); color: color-mix(in srgb, var(--color-warning) 50%, var(--color-text)); }
.wk-chip.ist-fertig { background: var(--color-accent-soft); color: var(--color-accent); }
.wk-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wk-kachel { background: var(--color-bg-alt); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wk-kachel-titel { font-size: 12px; color: var(--color-text-muted); }
.wk-kachel-wert { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-kachel-unter { font-size: 12px; color: var(--color-text-faint); }
.wk-kachel.ist-kosten .wk-kachel-wert { color: var(--color-tone-amber); }
.wk-kachel.ist-gut .wk-kachel-wert { color: var(--color-accent); }
.wk-kachel.ist-schlecht .wk-kachel-wert { color: var(--color-danger); }
.wk-balken { height: 10px; border-radius: 6px; background: var(--color-bg-alt); overflow: hidden; display: flex; }
.wk-balken > span { background: var(--color-tone-amber); }
.wk-balken.ist-ueber > span { background: var(--color-danger); }
.wk-legende { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--color-text-muted); }
.wk-legende > span { display: inline-flex; align-items: center; gap: 6px; }
.wk-legende i { width: 9px; height: 9px; border-radius: 3px; background: var(--color-bg-alt); border: 1px solid var(--color-border); }
.wk-legende i.ist-kosten { background: var(--color-tone-amber); border-color: var(--color-tone-amber); }
.wk-trenner { height: 1px; background: var(--color-border); }
.wk-zeile { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 14px; }
.wk-zeile > span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wk-zeile.ist-klein { font-size: 13px; }
.wk-zeile.ist-klein > span:first-child { color: var(--color-text-muted); }
.wk-zeile.ist-eingerueckt { padding-left: 14px; }
.wk-hinweis { padding: 10px 12px; border-radius: 10px; font-size: 13px;
background: color-mix(in srgb, var(--color-warning) 14%, var(--color-surface)); color: color-mix(in srgb, var(--color-warning) 50%, var(--color-text)); }
.wk-notiz { font-size: 12.5px; color: var(--color-text-faint); line-height: 1.45; }
@media (max-width: 640px) {
.wk-kacheln { grid-template-columns: minmax(0, 1fr); }
}
.ra-karte { padding: 16px 18px 6px; }
.ra-monat { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ra-monat-name { font-size: 13px; color: var(--color-text-muted); }
.ra-monat-summe { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ra-monat-rest { font-size: 13px; color: var(--color-text-faint); }
.ra-zeile { display: grid; grid-template-columns: 1.6fr 1fr 1fr .9fr 1.1fr .8fr 34px; gap: 14px; align-items: center;
padding: 12px 4px; border-top: 1px solid var(--color-border); cursor: pointer; }
.ra-zeile:hover { background: color-mix(in srgb, var(--color-bg-alt) 60%, transparent); }
.ra-zeile.ist-still { color: var(--color-text-faint); }
.ra-zeile-kopf { border-top: 0; padding-top: 0; padding-bottom: 8px; cursor: default; font-size: 11px; font-weight: 600;
letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-faint); }
.ra-zeile-kopf:hover { background: none; }
.ra-rechts { text-align: right; }
.ra-name-titel { font-weight: 600; font-size: 14px; }
.ra-unter { font-size: 12px; color: var(--color-text-muted); }
.ra-zahl { font-variant-numeric: tabular-nums; }
.ra-fett { font-weight: 600; }
.ra-rhythmus { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.ra-rhythmus svg, .ra-chip svg, .ra-naechste svg { width: 14px; height: 14px; color: var(--color-text-muted); }
.ra-leadzelle { display: flex; align-items: center; gap: 8px; }
.ra-lead { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--color-bg-alt); display: inline-flex;
align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--color-text); }
.ra-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 9px; border-radius: 999px;
background: var(--color-bg-alt); color: var(--color-text-muted); font-weight: 500; white-space: nowrap; }
.ra-chip svg { width: 11px; height: 11px; }
.ra-chip.ist-aktiv { background: var(--color-accent-soft); color: var(--color-accent); }
.ra-chip.ist-aktiv svg { color: var(--color-accent); }
.table-cell-sub .ra-marke { margin-right: 6px; padding: 1px 7px; font-size: 11px; vertical-align: 1px; }
.ra-mehr { justify-self: end; }
.ra-modal .modal { max-width: 820px; }
.ra-dialog { display: flex; flex-direction: column; gap: 14px; }
.ra-ueber { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--color-text-faint); text-transform: uppercase; }
.ra-trenner { height: 1px; background: var(--color-border); }
.ra-reihe { display: flex; gap: 12px; align-items: flex-start; }
.ra-reihe > .ra-feld { flex: 1; min-width: 0; }
.ra-reihe > .ra-schmal { flex: 0 0 140px; }
.ra-reihe > .ra-drittel { flex: 0 0 33%; }
.ra-feld { margin: 0; }
.ra-feld select { width: 100%; }
.ra-einfuegen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: -8px; font-size: 12.5px; color: var(--color-text-muted); }
.ra-einfuegen b { color: var(--color-text); }
.ra-flex { flex: 1; }
.ra-platzhalter { font-size: 12px; padding: 1px 7px; border-radius: 6px; background: var(--color-accent-soft); color: var(--color-accent);
font-weight: 500; border: 0; cursor: pointer; font-family: inherit; }
span.ra-platzhalter { cursor: default; }
.ra-segment { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--color-bg-alt); }
.ra-segment-teil { padding: 6px 13px; border-radius: 8px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 500;
color: var(--color-text-muted); cursor: pointer; }
.ra-segment-teil.ist-an { background: var(--color-surface); color: var(--color-text); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.ra-ende { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ra-ende-extra { display: inline-flex; align-items: center; gap: 8px; }
.ra-ende-extra input[type="date"] { width: auto; }
.ra-klein { width: 80px; }
.ra-zeitraum-text { font-size: 12.5px; color: var(--color-text-faint); display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ra-pos { display: grid; grid-template-columns: 1fr 80px 90px 110px 110px 32px; gap: 10px; align-items: center; }
.ra-titel-symbol { display: inline-flex; vertical-align: -3px; margin-right: 8px; color: var(--color-accent); }
.ra-titel-symbol svg { width: 18px; height: 18px; }
.ra-pos-kopf { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: -6px; }
.ra-pos-liste { display: flex; flex-direction: column; gap: 8px; }
.ra-pos input.ra-zahl { text-align: right; }
.ra-pos > span.ra-zahl { text-align: right; font-size: 13.5px; }
.ra-pos-fuss { display: flex; align-items: center; gap: 12px; }
.ra-katalog { min-width: 240px; }
.ra-textknopf { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--color-accent); cursor: pointer; }
.ra-summe { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ra-hinweis { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 12px; }
.ra-hinweis .ra-lead { width: 30px; height: 30px; font-size: 12px; }
.ra-hinweis-titel { font-weight: 600; }
.ra-naechste { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--color-bg-alt);
font-size: 13px; font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.ra-pausieren { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-muted); }
.ra-pausieren svg { width: 14px; height: 14px; }
.ra-versand-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ra-versand-posten { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--color-bg-alt); }
.ra-versand-zeile { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.ra-versand-zeile.ist-summe { font-weight: 600; }
.ra-dialog textarea { width: 100%; min-height: 110px; }
.ra-satz { margin: 0; color: var(--color-text-muted); }
.ra-offen { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 12px; }
.ra-offen-symbol { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none;
border-radius: 10px; background: var(--color-accent-soft); color: var(--color-accent); }
.ra-offen-symbol svg { width: 16px; height: 16px; }
.ra-offen-text { flex: 1; min-width: 0; }
@media (max-width: 720px) {
.ra-zeile { grid-template-columns: 1fr auto; gap: 4px 12px; }
.ra-zeile-kopf { display: none; }
.ra-zeile > :nth-child(2), .ra-zeile > :nth-child(5) { display: none; }
.ra-zeile > :nth-child(6) { grid-column: 1; }
.ra-reihe { flex-direction: column; }
.ra-reihe > .ra-schmal, .ra-reihe > .ra-drittel { flex: 1 1 auto; width: 100%; }
.ra-pos { grid-template-columns: 1fr 64px 90px 32px; }
.ra-pos > :nth-child(3), .ra-pos > :nth-child(5) { display: none; }
.ra-pos-kopf { display: none; }
.ra-offen { flex-wrap: wrap; }
}
.pd-dok-zeile { align-items: center; gap: 14px; }
.pd-dok-art-spalte { flex: none; width: 124px; display: flex; }
.pd-dok-art {
--art: var(--color-tone-slate);
display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
font-size: 12px; font-weight: 600; letter-spacing: .02em; line-height: 1.2;
padding: 4px 9px; border-radius: 7px; white-space: nowrap;
color: color-mix(in srgb, var(--art) 72%, var(--color-text));
background: color-mix(in srgb, var(--art) 14%, var(--color-surface));
}
.pd-dok-art > span { display: flex; flex: none; }
.pd-simple-row .pd-dok-art svg { width: 14px; height: 14px; color: inherit; }
.pd-dok-art.ist-konzept { --art: var(--color-tone-purple); }
.pd-dok-art.ist-storyboard { --art: var(--color-warning); }
.pd-dok-art.ist-breakdown { --art: var(--color-success); }
.pd-dok-art.ist-shotlist { --art: var(--color-tone-blue); }
.pd-dok-art.ist-renderlist { --art: var(--color-danger); }
.pd-dok-art.ist-props { --art: var(--color-tone-teal); }
@media (max-width: 1199px) {
.pd-akt.ist-haupt { flex: 1 0 100%; justify-content: center; }
}
@media (min-width: 900px) {
.pd-raster { grid-template-columns: 1fr 1fr; }
.pd-raster.ist-eins { grid-template-columns: 1fr; }
}
@media (min-width: 1200px) {
.expand-panel.ist-produktion { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.expand-panel.ist-produktion > .pd-uebersicht { grid-column: 1; }
.expand-panel.ist-produktion > .pd-aktionen {
grid-column: 2; align-self: start; justify-content: flex-end;
max-width: 720px; margin: 0; padding-top: 0; border-top: 0;
}
.expand-panel.ist-produktion > .pd-raster,
.expand-panel.ist-produktion > .po-block { grid-column: 1 / -1; }
.pd-termine { grid-template-columns: repeat(3, minmax(130px, 200px)); }
.pd-abr-unter {
justify-content: flex-end;
padding-left: 0; padding-right: var(--space-3);
border-left: 0; border-right: 2px solid var(--color-border);
}
}
@media (min-width: 901px) {
body.sidebar-collapsed .app-shell { grid-template-columns: var(--sidebar-width-collapsed) 1fr var(--rail-width); }
body.sidebar-collapsed .sidebar { padding-left: var(--space-2); padding-right: var(--space-2); }
body.sidebar-collapsed .sidebar-brand { justify-content: center; padding-left: 0; padding-right: 0; }
body.sidebar-collapsed .sidebar-brand-text,
body.sidebar-collapsed .sidebar-search-label,
body.sidebar-collapsed .sidebar-search-kbd,
body.sidebar-collapsed .nav-group-label,
body.sidebar-collapsed .nav-link-label,
body.sidebar-collapsed .sidebar-user-block { display: none; }
body.sidebar-collapsed .sidebar-brand { flex-direction: column; gap: 6px; }
body.sidebar-collapsed .sidebar-wortmarke { flex: none; font-size: 30px; padding-left: 0; margin: -4px 0 0; }
body.sidebar-collapsed .sidebar-footer-user .sidebar-collapse-toggle { margin-left: 0; }
body.sidebar-collapsed .nav-groups-container { padding-left: 0; margin-left: 0; }
body.sidebar-collapsed .sidebar-search-trigger,
body.sidebar-collapsed .nav-link { justify-content: center; padding-left: 0; padding-right: 0; }
body.sidebar-collapsed .sidebar-footer { gap: 10px; padding-top: var(--space-4); }
body.sidebar-collapsed .sidebar-footer-user,
body.sidebar-collapsed .sidebar-footer-actions { justify-content: center; flex-wrap: wrap; }
}
@media (max-width: 900px) {
.production-tab-label { max-width: 140px; }
.pd-grid { grid-template-columns: 1fr; }
.login-screen { grid-template-columns: 1fr; }
.login-hero { display: none; }
}
@media (max-width: 900px) {
.dashboard-page { margin: 0 calc(-1 * var(--space-2)); padding: var(--space-4) calc(var(--space-4) + var(--space-2)); }
}
@media (max-width: 900px) {
.dashboard-tile.size-sm, .dashboard-tile.size-md { grid-column: span 6; }
}
@media (max-width: 900px) {
.modal-backdrop.is-wide { padding-left: var(--space-3); }
}
@media (max-width: 900px) {
.catalog-inline-input:not(:focus) { font-size: var(--text-body) !important; }
}
@media (max-width: 900px) {
.main .kanban-board { grid-template-columns: 1fr; min-height: 0; }
}
@media (max-width: 900px) {
.cal-body, .cal-body-day { grid-template-columns: 1fr; min-height: 0; }
.cal-week { grid-template-columns: repeat(7, minmax(130px, 1fr)); overflow-x: auto; }
}
@media (max-width: 900px) {
.booking-material-layout { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.board-toolbar { flex-wrap: wrap; max-width: calc(100vw - 32px); justify-content: center; }
}
@media (max-width: 900px) {
.shotdoc-badge-row { gap: 4px; }
.shotdoc-header-row { display: none !important; }
.shotdoc-table { border: none; background: transparent; border-radius: 0; }
.shotdoc-row:not(.shotdoc-section-row) {
display: flex;
flex-wrap: wrap;
column-gap: 14px;
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-border-strong);
border-radius: var(--radius-sm);
background: var(--color-surface);
box-shadow: var(--shadow-sm);
padding: 8px 10px;
margin-bottom: 6px;
}
.shotdoc-row:not(.shotdoc-section-row):last-child { margin-bottom: 0; }
.shotdoc-section-row { border-radius: var(--radius-md); margin-bottom: 6px; }
.shotdoc-grip { visibility: hidden; height: 0; overflow: hidden; }
.shotdoc-select-cell { justify-content: flex-start; margin-bottom: var(--space-2); }
.shotdoc-cell {
flex: 1 1 100%;
min-width: 0;
padding: 5px 0;
border-bottom: 1px solid var(--color-border);
}
.shotdoc-cell:last-child { border-bottom: none; }
.shotdoc-cell:has(> input) { flex: 1 1 150px; }
.shotdoc-cell:has(> .shotdoc-shotnr-cell),
.shotdoc-cell:has(> .shotdoc-done-cell),
.shotdoc-cell:has(> .shotdoc-progress-status) { flex: 0 1 auto; min-width: 90px; }
.shotdoc-cell:has(> textarea),
.shotdoc-cell:has(> .shotdoc-image-cell) { flex: 1 1 100%; }
.shotdoc-cell[data-label]::before {
content: attr(data-label);
display: block;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-faint);
margin-bottom: 3px;
}
.shotdoc-cell > input, .shotdoc-cell > textarea,
.shotdoc-cell .shotdoc-shotnr-cell,
.shotdoc-cell .shotdoc-image-cell,
.shotdoc-cell .shotdoc-done-cell {
border-right: none;
}
.shotdoc-image-thumb { height: auto !important; aspect-ratio: 16 / 9; }
.shotdoc-image-thumb img { object-fit: contain; background: var(--color-bg-alt); }
.shotdoc-row input, .shotdoc-row textarea { min-height: 44px; padding: 10px 4px; }
.shotdoc-section-label input, .shotdoc-section-label textarea { min-height: auto; padding: 5px 4px; }
.shotdoc-row:not(.shotdoc-section-row) .shotdoc-row-delete-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
margin-top: var(--space-2);
padding: 10px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-size: 12.5px;
font-weight: 600;
}
.shotdoc-row-delete-label { display: inline; }
.shotdoc-section-row .shotdoc-row-delete-btn { padding: 7px; }
}
@media (max-width: 900px) {
}
@media (max-width: 900px) {
.main:has(.chat-page) { display: flex; flex-direction: column; overflow: hidden; padding-bottom: max(var(--space-6), calc(var(--space-4) + env(safe-area-inset-bottom))); }
.chat-page { flex: 1; min-height: 0; display: flex; grid-template-columns: 1fr; height: auto; }
.chat-griff { display: none; }
.chat-sidebar, .chat-thread { display: none; width: 100%; }
.chat-page:not(.is-thread-active) .chat-sidebar { display: flex; flex: 1; min-height: 0; max-height: none; }
.chat-page.is-thread-active .chat-thread { display: flex; flex: 1; min-height: 0; height: auto; }
.chat-back-btn { display: flex; }
.chat-thread-header { display: flex; align-items: center; gap: 10px; }
}
@media (max-width: 900px) {
.app-shell-col:has(.board-page) {
display: flex;
flex-direction: column;
height: 100vh;
height: 100dvh;
overflow: hidden;
}
.app-shell-col:has(.board-page) > .main { flex: 1; min-height: 0; height: auto; }
}
@media (max-height: 500px) and (pointer: coarse) {
.main:has(.chat-page) > .page-header { display: none; }
.main:has(.chat-page) > .chat-push-banner { display: none; }
.main:has(.chat-page) { padding: var(--space-2) var(--space-2) max(var(--space-2), env(safe-area-inset-bottom)); }
.main:has(.chat-page) > * + * { margin-top: var(--space-2); }
}
@media (max-width: 720px) {
.entity-name-btn,
.branding-tile-action,
.backup-entry-delete-btn {
min-width: 28px;
min-height: 28px;
}
.entity-name-btn, .backup-entry-delete-btn {
display: inline-flex;
align-items: center;
justify-content: center;
}
}
.nur-am-telefon { display: none; }
.btn-warning {
background: var(--color-warning);
border-color: transparent;
color: #fff;
}
.btn-warning:hover { background: var(--color-warning-strong, #d98806); }
.beleg-pruefleiste {
display: flex;
align-items: center;
gap: var(--space-3);
padding: 10px 12px;
margin-bottom: var(--space-4);
border: 1px solid var(--color-warning-soft);
border-radius: var(--radius-md);
background: var(--color-warning-soft);
}
.beleg-pruefleiste-symbol { display: inline-flex; color: var(--color-warning); flex: none; }
.beleg-pruefleiste-symbol svg { width: 17px; height: 17px; }
.beleg-pruefleiste-text {
flex: 1;
min-width: 0;
font-size: 12.5px;
line-height: 1.45;
color: #7a4d00;
}
.beleg-pruefleiste-text strong { color: #5c3a00; }
.beleg-pruefleiste .btn { flex: none; }
.beleg-pruef { display: flex; flex-direction: column; }
.beleg-pruef-balken { height: 3px; background: var(--color-bg-alt); border-radius: var(--radius-full); overflow: hidden; }
.beleg-pruef-balken > i {
display: block;
height: 100%;
background: var(--color-warning);
transition: width var(--dur-base) var(--ease);
}
.beleg-pruef-kopf {
display: flex;
justify-content: flex-end;
padding: 7px 0 10px;
}
.beleg-pruef-zaehler { font-size: 12px; color: var(--color-text-faint); font-variant-numeric: tabular-nums; }
.beleg-pruef-bild {
aspect-ratio: 4 / 3;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--color-bg-alt);
display: grid;
place-items: center;
}
.beleg-pruef-bild img { width: 100%; height: 100%; object-fit: contain; display: block; }
.beleg-pruef-bild object { width: 100%; height: 100%; border: none; }
.beleg-pruef-bild.ist-leer { color: var(--color-text-faint); font-size: 12.5px; }
.beleg-pruef-felder {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 11px var(--space-4);
padding: 13px 0;
}
.beleg-pruef-feld { min-width: 0; }
.beleg-pruef-feld label {
display: block;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-faint);
font-weight: 600;
margin-bottom: 2px;
}
.beleg-pruef-feld .v {
font-size: 13.5px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.beleg-pruef-feld .v.ist-leer { color: var(--color-warning); font-style: italic; font-weight: 500; }
.beleg-pruef-fuss {
display: flex;
gap: var(--space-2);
padding-top: 12px;
border-top: 1px solid var(--color-border);
}
.beleg-pruef-fuss .btn { flex: 1; justify-content: center; }
.beleg-pruef-fuss .btn-primary { flex: 1.3; }
.modal-backdrop.beleg-pruef-modal { padding: 12px; overflow: hidden; align-items: stretch; }
.modal.beleg-pruef-modal { max-width: none; max-height: none; width: 100%; height: calc(100dvh - 24px); margin: 0 !important;
display: flex; flex-direction: column; padding: var(--space-4) var(--space-5); box-sizing: border-box; }
.modal.beleg-pruef-modal > .beleg-pruef { flex: 1; min-height: 0; }
.beleg-pruef-inhalt { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 420px;
grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "bild kopf" "bild felder" "bild fuss"; column-gap: var(--space-5); padding-top: 12px; }
.beleg-pruef-inhalt > .beleg-pruef-felder.ist-formular { display: block; overflow-y: auto; min-height: 0; padding: 4px 4px 16px 0; overscroll-behavior: contain; }
.beleg-pruef-kopf.ist-bearbeiten { gap: 10px; flex-wrap: wrap; }
.beleg-bearb-knoepfe { display: flex; gap: 6px; }
.beleg-pruef-felder.ist-formular > .field { margin: 18px 0 0; }
.beleg-pruef-inhalt > .beleg-pruef-bild { grid-area: bild; aspect-ratio: auto; height: auto; min-height: 0; }
.beleg-pruef-inhalt > .beleg-pruef-kopf { grid-area: kopf; justify-content: space-between; align-items: center; padding-top: 0; }
.beleg-pruef-inhalt > .beleg-pruef-felder { grid-area: felder; grid-template-columns: 1fr; align-content: start; }
.beleg-pruef-inhalt > .beleg-pruef-fuss { grid-area: fuss; }
.beleg-pruef-inhalt .beleg-pruef-feld .v { white-space: normal; font-size: 15px; }
.beleg-pruef-inhalt > .beleg-pruef-fuss .beleg-pruef-loeschen { color: var(--color-danger, #c2412d); flex: 0 0 auto; }
.beleg-pruef-inhalt > .beleg-pruef-fuss .btn-primary { flex: 1.6; }
.beleg-pruef-loeschen svg { width: 15px; height: 15px; }
.beleg-pruef-bild.ist-pdf { position: relative; display: block; }
.beleg-pruef-seiten { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px; }
.beleg-pruef-seiten > :first-child { margin-top: auto; }
.beleg-pruef-seiten > :last-child { margin-bottom: auto; }
.beleg-pruef-seite { flex-shrink: 0; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.beleg-pruef-pdf { width: 100%; height: 100%; border: 0; display: block; }
.beleg-pruef-bild.ist-drehbar { position: relative; display: block; }
.beleg-pruef-bild.ist-drehbar img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: none; }
.beleg-pruef-drehen { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 10px; border: 0;
background: rgba(22, 21, 18, .68); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.beleg-pruef-drehen:hover { background: rgba(22, 21, 18, .85); }
.beleg-pruef-drehen svg { width: 20px; height: 20px; }
@media (max-width: 720px) {
.beleg-pruefleiste { flex-wrap: wrap; }
.beleg-pruefleiste-text { flex: 1 1 100%; order: 1; }
.beleg-pruefleiste-symbol { order: 0; }
.beleg-pruefleiste .btn { order: 2; flex: 1; justify-content: center; }
.beleg-pruef-bild { aspect-ratio: auto; height: 34vh; }
.modal-backdrop.beleg-pruef-modal { padding: 0; }
.modal-backdrop.beleg-pruef-modal > .modal.beleg-pruef-modal { max-height: none; overflow: hidden; }
.modal.beleg-pruef-modal { height: 100dvh; border-radius: 0; padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); }
.beleg-pruef-inhalt { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 30vh minmax(0, 1fr) auto;
grid-template-areas: "kopf" "bild" "felder" "fuss"; }
.beleg-pruef-inhalt > .beleg-pruef-felder.ist-formular { padding: 12px 0 16px; }
.beleg-pruef-inhalt > .beleg-pruef-felder { grid-template-columns: 1fr 1fr; }
.beleg-pruef-inhalt .beleg-pruef-feld .v { white-space: nowrap; font-size: 13.5px; }
.beleg-pruef-inhalt > .beleg-pruef-fuss { flex-direction: row; }
.beleg-pruef-inhalt > .beleg-pruef-fuss .btn { min-width: 0; padding-left: 8px; padding-right: 8px; }
.beleg-pruef-inhalt > .beleg-pruef-fuss .beleg-pruef-loeschen { flex: 0 0 44px; margin-bottom: 0; font-size: 0; padding: 0; justify-content: center; }
.beleg-pruef-inhalt > .beleg-pruef-fuss .beleg-pruef-loeschen svg { width: 18px; height: 18px; }
.beleg-pruef-inhalt > .beleg-pruef-kopf { padding-bottom: 8px; }
}
@media (max-width: 720px) {
table.responsive-table tr.hat-karte .receipt-paid-btn {
padding: 4px 9px;
min-height: 24px;
border-radius: var(--radius-full);
font-size: 11px;
font-weight: 600;
background: var(--color-danger-soft);
color: var(--color-danger);
}
table.responsive-table tr.hat-karte .receipt-paid-btn.is-paid {
background: var(--color-success-soft);
color: var(--color-success);
}
table.responsive-table tr.hat-karte.zeile-warn { box-shadow: inset 3px 0 0 var(--color-warning); }
table.responsive-table tr.hat-karte.zeile-fehler { box-shadow: inset 3px 0 0 var(--color-danger); }
table.responsive-table tr.hat-karte.zeile-gut { box-shadow: inset 3px 0 0 var(--color-success); }
table.responsive-table tr.hat-karte.zeile-still { box-shadow: inset 3px 0 0 var(--color-border-strong); }
}
@media (max-width: 720px) {
.catalog-table { min-width: 0; }
.table-scroll:has(.catalog-table) { overflow-x: visible; }
.catalog-group-header { padding: 9px 11px; }
.catalog-group-header .catalog-grip { display: none; }
.catalog-group-zahlen { flex-wrap: wrap; white-space: normal; overflow: visible; }
.catalog-group-links { align-items: flex-start; }
.catalog-group-header .catalog-chevron { margin-top: 1px; }
.catalog-group-header .table-actions { gap: 0; }
.catalog-group-header .table-actions .btn-ghost { padding: 3px 4px; min-width: 26px; min-height: 26px; }
.catalog-table thead { display: none; }
.catalog-table, .catalog-table tbody { display: block; }
.catalog-table tr.catalog-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 4px 10px;
padding: 9px 0;
border-bottom: 1px solid var(--color-border);
}
.catalog-table tr.catalog-row:last-child { border-bottom: none; }
.catalog-table tr.catalog-row > td { display: block; padding: 0; border: none; }
.catalog-table tr.catalog-row > td.catalog-grip-cell { display: none; }
.catalog-table tr.catalog-row > td:nth-child(2) { grid-column: 1; grid-row: 1; }
.catalog-table tr.catalog-row > td:nth-child(3) { grid-column: 1; grid-row: 2; }
.catalog-table tr.catalog-row > td:nth-child(4) { grid-column: 2; grid-row: 1; text-align: right; }
.catalog-table tr.catalog-row > td:nth-child(5) { grid-column: 2; grid-row: 2; text-align: right; }
.catalog-table tr.catalog-row > td:nth-child(5) .table-actions { justify-content: flex-end; }
.catalog-num-cell .catalog-inline-input { width: 74px; }
}
@media (max-width: 720px) {
.consolidation-row { align-items: stretch; flex-direction: column; gap: var(--space-2); }
.consolidation-row > div:first-child { flex: none; }
.consolidation-row-rec { width: auto !important; }
.consolidation-row-rec > *:last-child { flex: 1; min-width: 0; }
.consolidation-row > .btn { width: 100%; justify-content: center; }
}
@media (max-width: 720px) {
.branding-tile img,
.branding-tile .branding-tile-noimage {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
flex: none;
}
}
@media (max-width: 720px) {
.tape-sub { font-size: 10.5px; }
.tape-zeile { row-gap: 4px; }
}
@media (max-width: 720px) {
.board-picker-thumb.is-empty { aspect-ratio: auto; height: 92px; }
}
@media (max-width: 720px) {
.card:has(table.responsive-table) { padding: var(--space-2); }
div.card.to-invoice-card,
div.card.productions-table-card { padding: var(--space-3); }
div.card.to-invoice-card.ist-leer { display: none; }
table.responsive-table thead { display: none; }
table.responsive-table, table.responsive-table tbody { display: block; width: 100%; }
table.responsive-table tr:not(.datatable-expanded-row) {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 12px;
row-gap: 2px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-border-strong);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
margin-bottom: 6px;
padding: 8px 10px;
}
table.responsive-table tbody tr:last-child { margin-bottom: 0; }
table.responsive-table tbody tr:hover { background: var(--color-surface); }
table.responsive-table tr.is-expanded { background: var(--color-accent-soft); }
table.responsive-table tr.datatable-expanded-row { display: block; width: 100%; }
table.responsive-table td.datatable-expanded-cell { display: block; width: 100%; }
table.responsive-table td.col-actions {
margin-left: auto;
position: static;
}
table.responsive-table td {
display: inline-flex;
align-items: baseline;
gap: 4px;
border-bottom: none;
padding: 1px 0;
font-size: var(--text-body);
line-height: 1.35;
}
table.responsive-table td.text-right { text-align: left; }
table.responsive-table td.mobile-truncate {
flex: 1 1 0%;
min-width: 70px;
overflow: hidden;
}
table.responsive-table td.mobile-truncate .cell-value-truncate {
display: inline-block;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: bottom;
}
table.responsive-table td.mobile-truncate .zellen-titel,
table.responsive-table td.mobile-truncate .table-cell-sub {
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
table.responsive-table tr.hat-karte .zellen-titel.hat-marke { display: flex; align-items: center; gap: 6px; }
table.responsive-table tr.hat-karte .zellen-titel.hat-marke > .zellen-titel-text {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
table.responsive-table tr.hat-karte .zellen-titel.hat-marke > .badge { flex-shrink: 0; }
table.responsive-table tr.hat-karte .zellen-titel > a,
table.responsive-table tr.hat-karte .zellen-titel > strong,
table.responsive-table tr.hat-karte .zellen-titel > span:not(.badge):not(.produktion-nummer) {
display: inline-block;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: bottom;
}
table.responsive-table tr.hat-karte > td.karte-titel {
overflow: hidden;
text-overflow: ellipsis;
}
table.responsive-table td.mobile-separator::before {
content: '·';
color: var(--color-text-faint);
font-weight: 400;
}
table.responsive-table td[data-label]:not([data-label=""])::before {
content: attr(data-label) ':';
font-size: var(--text-small);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-text-faint);
}
table.responsive-table td.mobile-only-toggle,
table.responsive-table th.mobile-only-toggle {
display: inline-flex;
align-items: center;
}
table.responsive-table td.expand-col { display: none; }
table.responsive-table td.mobile-secondary { display: none; }
table.responsive-table tr.is-expanded td.mobile-secondary,
table.responsive-table tr.is-mobile-open td.mobile-secondary {
display: inline-flex;
}
table.responsive-table tr.is-mobile-toggle-row:hover,
table.responsive-table tr.is-mobile-open { background: var(--color-accent-soft); }
.receipt-table td.col-supplier.mobile-truncate { flex-basis: 100%; min-width: 0; }
.receipt-table td.col-amount { margin-left: auto; text-align: right; }
.equipment-table td.col-eq-name.mobile-truncate { min-width: 0; }
.pm-file-row { flex-wrap: wrap; row-gap: 6px; }
.pm-file-hauptteil { flex-basis: 100%; }
.pm-file-actions {
flex: 1 0 100%;
display: flex;
justify-content: space-between;
padding-top: 5px;
border-top: 1px solid var(--color-border);
}
.pm-file-actions > * { min-width: 38px; min-height: 34px; }
.pm-file-actions > .pm-schalter-gruppe { min-width: 0; }
.pm-file-actions .pm-schalter { width: 38px; height: 34px; }
table.responsive-table tr.hat-karte {
align-items: baseline;
row-gap: 1px;
padding: 6px 10px;
margin-bottom: 4px;
}
table.responsive-table tr.hat-karte > td { padding: 0; }
table.responsive-table td.karte-vorn {
flex: 0 0 auto;
align-self: flex-start;
padding-right: 2px;
}
table.responsive-table td.karte-titel {
order: 1;
flex: 1 1 0%;
min-width: 0;
font-size: var(--text-entity-title, 14.5px);
font-weight: 600;
letter-spacing: -.01em;
color: var(--color-text);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
}
table.responsive-table td.karte-titel .cell-value-truncate,
table.responsive-table td.karte-titel > *,
table.responsive-table td.karte-titel > * > * {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
table.responsive-table td.karte-wert {
order: 2;
flex: none;
font-size: var(--text-entity-title, 14.5px);
font-weight: 600;
letter-spacing: -.015em;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
table.responsive-table td.karte-umbruch {
flex: 0 0 100%;
height: 0;
padding: 0;
margin: 0;
border: 0;
}
table.responsive-table td.karte-zeile1,
table.responsive-table td.karte-zeile2,
table.responsive-table td.karte-zeile3 {
flex: 0 1 auto;
min-width: 0;
font-size: var(--text-meta);
color: var(--color-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
table.responsive-table tr.hat-karte > td[class*="karte-zeile"] > div:not(.nur-am-rechner) { display: inline; }
table.responsive-table tr.hat-karte > td[class*="karte-zeile"] > div > div:not(.nur-am-rechner) { display: inline; }
table.responsive-table tr.hat-karte > td .set-status,
table.responsive-table tr.hat-karte > td .produktion-extras,
table.responsive-table tr.hat-karte > td .table-actions,
table.responsive-table tr.hat-karte > td .shotdoc-badge,
table.responsive-table tr.hat-karte > td .shotdoc-badge-row { display: flex !important; }
table.responsive-table tr.hat-karte > td[class*="karte-zeile"] > div:not(.nur-am-rechner) ~ div:not(.nur-am-rechner),
table.responsive-table tr.hat-karte > td[class*="karte-zeile"] > div > div:not(.nur-am-rechner) ~ div:not(.nur-am-rechner) { margin-left: 6px; }
table.responsive-table tr.hat-karte > td .badge + div,
table.responsive-table tr.hat-karte > td .badge ~ span:not(:empty) { margin-left: 6px; }
table.responsive-table td.karte-trenner::before {
content: '·';
color: var(--color-text-faint);
margin-right: 5px;
}
table.responsive-table tr.hat-karte > td.col-actions {
padding-top: 2px;
margin-left: auto;
}
.set-status.ist-punkte { gap: 4px; }
.set-status.ist-punkte .set-status-icon { width: 10px; height: 10px; border-width: 1.5px; }
.set-status.ist-punkte .set-status-icon::before { inset: -6px; }
.set-status.ist-punkte .set-status-icon { overflow: visible; }
table.responsive-table tr.hat-karte > td.col-actions .btn-ghost,
table.responsive-table tr.hat-karte > td.col-actions .table-icon-btn {
padding: 4px 6px;
min-height: 30px;
}
table.responsive-table tr.hat-karte > td[class*="karte-zeile"] { line-height: 1.35; }
table.responsive-table tr.hat-karte .badge::before { display: none; }
table.responsive-table tr.hat-karte { column-gap: 4px; }
table.responsive-table tr.hat-karte td.karte-trenner::before { margin-right: 2px; }
table.responsive-table tr.hat-karte .badge { padding: 3px 8px; }
table.responsive-table tr.hat-karte > td.karte-leer { display: none; }
.transfer-nicht-geholt { color: var(--color-warning); font-weight: 600; }
.transfer-geholt { color: var(--color-success); font-weight: 600; }
.nur-am-rechner { display: none; }
.nur-am-telefon { display: inline; }
.booking-table tr.hat-karte > td.col-actions {
flex: 1 0 100%;
margin-top: 6px;
padding-top: 7px !important;
border-top: 1px solid var(--color-border);
}
.booking-table tr.hat-karte .table-actions { justify-content: space-between; width: 100%; }
.booking-table tr.hat-karte .table-actions > * { color: var(--color-text-faint); }
.productions-table-card td.col-title .cell-value-truncate { font-size: 15px; font-weight: var(--weight-semibold); }
.productions-table-card td.col-status .status-cell {
width: 100%;
display: flex;
flex-direction: column;
}
.productions-table-card td.col-status .progress-track { order: 1; }
.productions-table-card td.col-status .status-top { order: 2; justify-content: flex-start; margin-bottom: 0; margin-top: 7px; }
.productions-table-card td.col-status .status-stepper { display: none; }
.invoicing-table-card td.col-status { flex-basis: 100%; justify-content: flex-end; }
.invoicing-table-card td.col-pdf { flex: 0 0 28px; width: 28px; min-width: 28px; justify-content: center; }
.invoicing-table-card td.col-production { flex: 1 1 0%; min-width: 0; }
}
@media (max-width: 720px), (max-height: 500px) and (pointer: coarse) {
.modal-backdrop.is-fullscreen { padding: 0; align-items: stretch; }
.modal.is-fullscreen {
max-width: none;
width: 100%;
height: 100%;
max-height: none;
border-radius: 0;
margin: 0;
display: flex;
flex-direction: column;
padding: 0;
}
.modal.is-fullscreen .modal-header {
padding: var(--space-5) var(--space-5) var(--space-3);
margin-bottom: 0;
flex: 0 0 auto;
}
.modal.is-fullscreen .modal-footer {
padding: var(--space-3) var(--space-5) var(--space-5);
flex: 0 0 auto;
}
.modal.is-fullscreen .pm-picker {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 0 var(--space-5);
display: flex;
flex-direction: column;
}
}
@media (max-width: 720px) {
.game-modal-body { flex-direction: column; }
.game-leaderboard-panel { width: 100%; }
.game-leaderboard-list { max-height: 200px; }
}
@media (max-width: 720px), (max-height: 500px) and (pointer: coarse) {
.modal.is-game { max-width: none; }
.modal.is-game .game-modal-body {
align-items: stretch;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
gap: var(--space-4);
padding: 0 var(--space-4) var(--space-4);
}
.modal.is-game .game-canvas-wrap {
padding: 10px;
border-radius: 14px;
}
.modal.is-game .game-canvas-wrap > .g2048-grid,
.modal.is-game .game-canvas-wrap > .mine-grid,
.modal.is-game .game-canvas-wrap > .chess-board {
width: 100%;
max-width: none;
margin-inline: 0;
}
.modal.is-game .game-canvas { max-width: 100%; }
.modal.is-game .modal-header {
padding: var(--space-3) var(--space-4);
align-items: center;
}
.modal.is-game .modal-header h2 { font-size: 16px; }
.modal.is-game .modal-header button {
width: 32px;
height: 32px;
padding: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
}
.modal.is-game .game-leaderboard-panel { display: none; }
.modal.is-game .game-modal-body:not(.spielt) .game-leaderboard-panel { display: block; }
}
@media (max-height: 500px) and (pointer: coarse) {
.modal.is-game .game-modal-body { flex-direction: row; align-items: stretch; }
.modal.is-game .game-leaderboard-panel { width: 240px; overflow-y: auto; }
.modal.is-game .game-stats-bar { display: none; }
.modal.is-game .modal-header {
position: absolute;
top: 0;
right: 0;
z-index: 60;
margin: 0;
padding: 6px;
}
.modal.is-game .modal-header h2 { display: none; }
.modal.is-game .modal-header button {
background: rgba(12, 14, 20, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.22);
color: rgba(255, 255, 255, 0.9);
}
.modal.is-game .game-modal-body { padding: var(--space-2); gap: var(--space-2); }
.modal.is-game .game-canvas-wrap { padding: 6px; border-radius: 10px; }
.modal.is-game .game-canvas { max-width: min(100%, var(--spiel-breite, 100%)); }
.modal.is-game .game-canvas-wrap > .g2048-grid,
.modal.is-game .game-canvas-wrap > .mine-grid,
.modal.is-game .game-canvas-wrap > .chess-board {
width: min(100%, calc(100vh - 66px));
margin-inline: auto;
}
.modal.is-game .game-canvas,
.modal.is-game .game-canvas-wrap > .g2048-grid,
.modal.is-game .game-canvas-wrap > .mine-grid,
.modal.is-game .game-canvas-wrap > .chess-board {
box-shadow:
0 0 0 1.5px color-mix(in srgb, var(--spiel, #22b8d1) 60%, transparent),
0 0 34px -12px var(--spiel, #22b8d1);
}
.modal.is-game .game-pad {
position: absolute;
inset: 0;
z-index: 30;
align-items: center;
padding: 0 8px;
}
.modal.is-game .game-modal-body:not(.spielt) .game-pad { display: none; }
.modal.is-game .game-modal-body.spielt .game-canvas-wrap.hat-pad > .game-canvas,
.modal.is-game .game-modal-body.spielt .game-canvas-wrap.hat-pad > .g2048-grid,
.modal.is-game .game-modal-body.spielt .game-canvas-wrap.hat-pad > .mine-grid,
.modal.is-game .game-modal-body.spielt .game-canvas-wrap.hat-pad > .chess-board {
max-width: min(var(--spiel-breite, 100%), calc(100% - 264px));
}
.modal.is-game .game-modal-body.spielt .game-canvas-wrap.hat-pad > .game-score { padding-inline: 132px; }
}
@media (max-width: 720px) {
.receipt-row-actions { width: 100%; justify-content: flex-end; gap: 8px; }
.receipt-row-actions button {
width: 30px;
height: 30px;
padding: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-bg-alt);
}
table.receipt-table td.mobile-secondary {
align-items: center;
min-height: 30px;
}
}
@media (max-width: 720px) {
table.responsive-table.pm-archived-table td .pm-archived-name-sub { display: block; }
table.responsive-table.pm-archived-table td.pm-archived-thumb-col {
width: auto;
flex: 0 0 auto;
}
table.responsive-table.pm-archived-table td.pm-archived-thumb-col .pm-file-thumb-lg,
table.responsive-table.pm-archived-table td.pm-archived-thumb-col .pm-file-icon-lg {
width: 44px;
height: 44px;
}
table.responsive-table.pm-archived-table td.mobile-truncate {
min-width: 0;
}
table.responsive-table.pm-archived-table .pm-thumb-pick-btn { display: none; }
table.responsive-table.pm-archived-table tr.is-expanded td.mobile-secondary {
display: none;
}
}
@media (max-width: 640px) {
.pd-header.has-hero { display: none; }
}
@media (max-width: 640px) {
.pd-header-mobile-wrap {
display: block;
background: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
margin-bottom: var(--space-4);
overflow: hidden;
}
}
@media (max-width: 640px) {
.pd-widget-grip { display: none; }
.pd-widget-hide-btn { width: 34px; height: 34px; margin-right: -6px; }
.pd-widget-hide-btn svg { width: 15px; height: 15px; }
.pd-auswahl-karte { min-height: 40px; }
.pd-category { padding: 10px; border-radius: 16px; margin-bottom: 14px; }
.pd-category .pd-category-header { margin: 4px 4px 10px; row-gap: 2px; }
.pd-category-satz { flex-basis: 100%; padding-left: 20px; }
}
@media (max-width: 640px) {
.termin-aktionen { opacity: 1; }
.termin-aktionen .btn-ghost { padding: 6px 8px; }
.termin-zeile .termin-kunde-knopf { padding: 6px 8px; }
.stock-aktionen { opacity: 1; flex-wrap: wrap; justify-content: flex-end; }
.stock-aktionen .btn-ghost { padding: 6px 8px; }
}
@media (max-width: 640px) {
.pd-activity-layout { flex-direction: column; }
}
@media (max-width: 640px) {
.datatable-search { max-width: none; }
}
@media (max-width: 640px) {
.dashboard-page { margin: 0 -6px; padding: var(--space-4) 22px; }
}
@media (max-width: 640px) {
.dashboard-top-row { flex-direction: column; }
}
@media (max-width: 640px) {
.dashboard-tile.size-sm, .dashboard-tile.size-md, .dashboard-tile.size-lg { grid-column: span 12; }
}
@media (max-width: 640px) {
.dashboard-invoices-card .card-header h2 { padding-right: 0; }
.dashboard-invoices-switch {
position: static;
display: flex;
width: 100%;
margin-top: var(--space-2);
}
.dashboard-invoices-switch-btn { flex: 1; text-align: center; }
.dashboard-invoices-switch-label { display: none; }
.dashboard-invoices-switch-icon { display: flex; align-items: center; justify-content: center; }
.dashboard-invoices-switch-btn[data-dir="out"] { color: var(--color-success); }
.dashboard-invoices-switch-btn[data-dir="in"] { color: var(--color-danger); }
.dashboard-invoices-switch-btn[data-dir="out"].is-active { background: var(--color-success-soft); color: var(--color-success); }
.dashboard-invoices-switch-btn[data-dir="in"].is-active { background: var(--color-danger-soft); color: var(--color-danger); }
}
@media (max-width: 640px) {
.briefing-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}
@media (max-width: 640px) {
.expand-approval-form { flex-direction: column; align-items: stretch; }
.expand-approval-form select,
.expand-approval-form input[type="date"],
.expand-approval-form input[type="time"],
.expand-approval-form input[type="text"] {
width: 100%;
max-width: none;
}
.expand-approval-form button { width: 100%; justify-content: center; }
}
@media (max-width: 640px) {
.inventory-report-row { flex-direction: column; align-items: flex-start; gap: 6px; }
.inventory-report-actions .btn, .inventory-report-actions .btn-ghost { flex: 1; justify-content: center; }
.inventory-count-item-name { font-size: 18px; }
.inventory-qty-number { font-size: 44px; }
}
@media (max-width: 640px) {
.quicksearch-backdrop { padding-top: 8vh; }
}
@media (max-width: 640px) {
.receipt-modal-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.pm-tabs, .booking-view-tabs {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.pm-tabs::-webkit-scrollbar, .booking-view-tabs::-webkit-scrollbar { display: none; }
}
@media (max-width: 640px) {
.pm-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.entity-card-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.main.page-enter { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
.line-chart-path { animation: none; stroke-dashoffset: 0; }
.line-chart-area { animation: none; opacity: 1; }
.line-chart-dot { animation: none; opacity: 1; }
.donut-chart-segment { transition: none var(--ease); }
}
.pd-visit-status {
font-size: 13px;
line-height: 1.45;
font-weight: 500;
padding: 9px 11px;
border-radius: var(--radius-sm);
background: var(--color-bg-alt);
color: var(--color-text);
}
.pd-visit-status.is-warn {
background: color-mix(in srgb, var(--color-warning) 14%, transparent);
color: var(--color-text);
box-shadow: inset 2px 0 0 0 var(--color-warning);
}
.pd-visit-status.is-ok { color: var(--color-text-muted); }
.pd-visit-status.is-idle { color: var(--color-text-muted); }
.pd-visit-list { margin-top: 10px; display: flex; flex-direction: column; }
.pd-visit {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 7px 0;
border-top: 1px solid var(--color-border);
}
.pd-visit:first-child { border-top: 0; }
.pd-visit.is-off { opacity: 0.5; }
.pd-visit-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; flex: none; }
.pd-visit-dot.is-seen { background: var(--color-success); }
.pd-visit-dot.is-unseen { background: var(--color-border-strong, var(--color-border)); box-shadow: inset 0 0 0 1px var(--color-text-faint); }
.pd-visit-dot.is-off { background: var(--color-text-faint); }
.pd-visit-main { flex: 1; min-width: 0; }
.pd-visit-name { font-size: 13px; font-weight: 500; }
.pd-visit-sub { font-size: 12px; color: var(--color-text-faint); margin-top: 1px; }
.pd-visit-anon { margin-top: 9px; font-size: 12px; color: var(--color-text-faint); }
.pd-visit-log { margin-top: 10px; }
.pd-visit-log > summary {
cursor: pointer;
font-size: 12px;
color: var(--color-text-muted);
list-style: none;
}
.pd-visit-log > summary::-webkit-details-marker { display: none; }
.pd-visit-log > summary::before { content: '▸ '; }
.pd-visit-log[open] > summary::before { content: '▾ '; }
.pd-visit-log-list { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.pd-visit-log-row { display: flex; gap: 9px; font-size: 12px; color: var(--color-text-muted); line-height: 1.45; }
.pd-visit-log-when { flex: none; width: 76px; color: var(--color-text-faint); }
.theme-popover { flex-direction: column; gap: 2px; padding: 6px; min-width: 156px; left: auto; right: 0; transform-origin: bottom right; }
.theme-mode-btn {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 7px 9px;
border: 0;
border-radius: var(--radius-sm);
background: none;
color: var(--color-text);
font: inherit;
font-size: 13px;
text-align: left;
cursor: pointer;
}
.theme-mode-btn:hover { background: var(--color-bg-alt); }
.theme-mode-btn.is-on { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.theme-mode-btn svg { width: 15px; height: 15px; flex: none; }
.rental-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rental-kennzahlen { display: flex; gap: var(--space-2); max-width: 560px; }
.rental-kennzahl { flex: 1; min-width: 0; }
.rental-kennzahl b {
display: block;
font-size: 21px;
font-weight: 600;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
.rental-kennzahl span { display: block; font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.rental-bahn {
height: 10px;
border-radius: 999px;
background: var(--color-bg-alt);
overflow: hidden;
margin-top: 12px;
}
.rental-fuell {
height: 100%;
border-radius: 999px;
background: #0071e3;
transition: width 700ms var(--ease);
}
.rental-bookings { display: flex; flex-direction: column; }
.branding-section-actions { position: relative; flex-wrap: nowrap; }
.branding-mehr-btn {
display: inline-flex;
flex: none;
width: 40px;
align-items: center;
justify-content: center;
font-size: 18px;
line-height: 1;
}
.branding-section-actions-mehr {
display: none;
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 20;
flex-direction: column;
gap: 6px;
padding: 8px;
min-width: 210px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
.branding-section-actions.is-offen .branding-section-actions-mehr { display: flex; }
.branding-section-actions-mehr > .btn { width: 100%; justify-content: flex-start; }
@media (max-width: 640px) {
.branding-section-header { flex-direction: column; align-items: stretch; gap: var(--space-2); }
.branding-section-titel { min-width: 0; }
.branding-section-actions > .btn:first-child { flex: 1; justify-content: center; }
.branding-mehr-btn { width: 44px; }
.branding-tile img,
.branding-tile .branding-tile-noimage { height: 84px; }
.branding-tile-folder { display: flex; align-items: center; gap: 10px; padding: 10px 11px; }
.branding-tile-folder .branding-tile-noimage {
height: auto;
width: 26px;
flex: none;
background: none;
padding: 0;
}
.branding-tile-folder .branding-tile-noimage svg { width: 24px; height: 24px; }
.branding-tile-folder .branding-tile-body { padding: 0; min-width: 0; flex: 1; }
}
.branding-tile-meta.is-leer { opacity: .55; }
.catalog-einheit .catalog-inline-input {
font-size: var(--text-meta);
color: var(--color-text-muted);
}
.catalog-zeile { display: flex; align-items: center; gap: 8px; min-width: 0; }
.catalog-zeile .catalog-inline-input { flex: 0 0 auto; }
.catalog-notiz {
flex: 0 1 auto;
min-width: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 11.5px;
line-height: 1.75;
color: var(--color-text-muted);
background: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: 999px;
padding: 0 9px;
}
.catalog-messlatte {
position: absolute;
top: -9999px;
left: -9999px;
visibility: hidden;
white-space: pre;
padding: 2px 4px;
pointer-events: none;
}
.catalog-inline-input.ist-gekuerzt {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
}
.catalog-inline-input.ist-gefaltet { cursor: pointer; }
.catalog-inline-input.ist-gefaltet:hover {
border-color: var(--color-border);
background: var(--color-surface-hover);
}
@media (max-width: 720px) {
.catalog-zeile { flex-wrap: wrap; gap: 3px 8px; }
.catalog-zeile .catalog-inline-input { flex: 1 1 100%; width: auto !important; }
}
.catalog-group-meta { font-size: 11.5px; color: var(--color-text-faint); }
.catalog-group-spanne {
font-size: 12px;
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
margin-left: 4px;
}
.share-layout { margin: var(--space-4) 0; }
.share-layout-kopf {
font-size: 12px;
font-weight: var(--weight-semibold);
color: var(--color-text-muted);
margin-bottom: var(--space-2);
}
.share-layout-reihe { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.share-layout-opt {
flex: 1 1 240px;
min-width: 0;
text-align: left;
padding: 11px 13px;
border: 2px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text);
cursor: pointer;
font: inherit;
}
.share-layout-opt:hover { border-color: var(--color-border-strong); }
.share-layout-opt.ist-aktiv { border-color: var(--color-accent); background: var(--color-accent-soft); }
.share-layout-titel {
display: flex;
align-items: center;
gap: 8px;
font-weight: var(--weight-semibold);
font-size: 13px;
}
.share-layout-titel i {
width: 13px;
height: 13px;
border-radius: 50%;
border: 2px solid var(--color-border-strong);
flex: none;
}
.share-layout-opt.ist-aktiv .share-layout-titel i {
border-color: var(--color-accent);
background: var(--color-accent);
box-shadow: inset 0 0 0 2.5px var(--color-surface);
}
.share-layout-text {
display: block;
font-size: 11.5px;
color: var(--color-text-faint);
margin-top: 3px;
padding-left: 21px;
}
.share-layout-auto {
display: block;
font-size: 11px;
font-weight: var(--weight-semibold);
color: var(--color-accent-strong, var(--color-accent));
margin-top: 5px;
padding-left: 21px;
}
.pm-file-actions .pm-download-btn { position: relative; margin-right: 7px; }
.pm-file-actions .pm-download-btn::after {
content: '';
position: absolute;
right: -4px;
top: 20%;
bottom: 20%;
width: 1px;
background: var(--color-border);
}
@media (max-width: 720px) {
table.responsive-table tr.is-expanded {
background: var(--color-surface);
border-left-color: var(--color-accent);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
margin-bottom: 0;
}
table.responsive-table tr.is-expanded:hover { background: var(--color-surface); }
table.responsive-table tr.datatable-expanded-row {
background: var(--color-surface);
border-left: 3px solid var(--color-accent);
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
box-shadow: var(--shadow-sm);
margin-bottom: 6px;
}
table.responsive-table .datatable-expanded-content { padding: 4px 12px 14px; }
table.responsive-table tbody tr.is-expanded td.col-actions,
table.responsive-table tbody tr.is-expanded:hover td.col-actions { background: transparent; }
}
@media (max-width: 1200px) {
table.liste-produktionen th.spalte-ab-1200,
table.liste-produktionen td.spalte-ab-1200 { display: none; }
table.liste-produktionen .table-actions-desktop { display: none; }
table.liste-produktionen .table-actions-mobile-trigger { display: inline-flex; }
table.liste-produktionen .stufe-lang { display: none; }
table.liste-produktionen .stufe-kurz { display: inline; }
}
.table-scroll:has(> table.liste-produktionen) { container-type: inline-size; container-name: prodliste; }
@container prodliste (max-width: 1100px) {
table.liste-produktionen th.spalte-ab-1200,
table.liste-produktionen td.spalte-ab-1200 { display: none; }
table.liste-produktionen .table-actions-desktop { display: none; }
table.liste-produktionen .table-actions-mobile-trigger { display: inline-flex; }
table.liste-produktionen .stufe-lang { display: none; }
table.liste-produktionen .stufe-kurz { display: inline; }
}
.stufe-kurz { display: none; }
.stufe-lang { display: inline; }
.produktion-unterzeile { display: flex; align-items: center; gap: var(--space-2); }
.produktion-unterzeile .produktion-wer {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.produktion-unterzeile .produktion-extras { flex: 0 0 auto; display: inline-flex; gap: 5px; }
.todo-titel-eingabe {
width: 100%;
border: 0;
border-bottom: 2px solid transparent;
background: none;
font: inherit;
font-size: 19px;
font-weight: 600;
color: var(--color-text);
padding: 2px 0 6px;
margin-bottom: 16px;
}
.todo-titel-eingabe::placeholder { color: var(--color-text-faint); font-weight: 500; }
.todo-titel-eingabe:focus { outline: none; border-bottom-color: var(--color-accent); }
.todo-feldname,
.modal.is-aufgabe .todo-spalte-seite .field > label,
.modal.is-aufgabe .todo-spalte-inhalt .field > label {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-text-faint);
margin-bottom: 5px;
}
.todo-steuerleiste {
display: flex;
align-items: flex-end;
gap: 26px;
flex-wrap: wrap;
padding: 14px 16px;
background: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
margin-bottom: 18px;
}
.todo-steuerleiste-status { min-width: 150px; }
.todo-steuerleiste-prio { flex: 1; min-width: 230px; }
.todo-schalter { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.todo-schalter-box { position: absolute; opacity: 0; width: 42px; height: 24px; margin: 0; cursor: pointer; }
.todo-schalter-bahn {
width: 42px; height: 24px; border-radius: 999px;
background: var(--color-border-strong);
position: relative; flex: 0 0 auto;
transition: background var(--dur-fast) var(--ease);
}
.todo-schalter-knopf {
position: absolute; top: 3px; left: 3px;
width: 18px; height: 18px; border-radius: 50%;
background: #fff; box-shadow: 0 1px 3px rgba(17,21,28,0.28);
transition: left var(--dur-fast) var(--ease);
}
.todo-schalter.ist-an .todo-schalter-bahn { background: var(--color-success); }
.todo-schalter.ist-an .todo-schalter-knopf { left: 21px; }
.todo-schalter-text { font-size: 13px; font-weight: 500; color: var(--color-text-muted); }
.todo-schalter.ist-an .todo-schalter-text { color: var(--color-success); }
.todo-schalter-box:focus-visible + .todo-schalter-bahn {
outline: 2px solid var(--color-accent); outline-offset: 2px;
}
.todo-prio { padding-top: 2px; --todo-prio: var(--color-accent); }
.todo-prio-bahn { position: relative; height: 26px; }
.todo-prio-linie {
position: absolute; left: 7px; right: 7px; top: 11px; height: 4px; border-radius: 2px;
background: linear-gradient(90deg, #9598ae 0%, #0071e3 33%, #f59f0a 66%, #ef4343 100%);
opacity: 0.30;
}
.todo-prio-aktiv {
position: absolute; left: 7px; top: 11px; height: 4px; border-radius: 2px;
background: var(--todo-prio);
transition: width var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.todo-prio-stufen { position: relative; display: flex; justify-content: space-between; padding: 0 7px; }
.todo-prio-stufe {
width: 9px; height: 9px; border-radius: 50%;
background: var(--color-surface); border: 2px solid var(--color-border-strong);
margin-top: 8px; padding: 0; cursor: pointer; position: relative; z-index: 2;
transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
width var(--dur-fast) var(--ease), height var(--dur-fast) var(--ease), margin-top var(--dur-fast) var(--ease);
}
.todo-prio-stufe:hover { border-color: var(--todo-prio); }
.todo-prio-stufe.ist-voll { background: var(--todo-prio); border-color: var(--todo-prio); }
.todo-prio-stufe.ist-griff {
width: 18px; height: 18px; margin-top: 4px;
background: var(--color-surface); border: 3px solid var(--todo-prio);
box-shadow: 0 1px 4px rgba(17,21,28,0.22); z-index: 3; cursor: grab;
}
.todo-prio-stufe:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.todo-prio-namen {
display: flex; justify-content: space-between; margin-top: 4px;
font-size: 11px; color: var(--color-text-faint);
}
.todo-prio-namen .ist-an { color: var(--todo-prio); font-weight: 600; }
.todo-zweispalt {
display: grid;
grid-template-columns: minmax(0, 1fr) 258px;
gap: 22px;
align-items: start;
}
.todo-spalte-inhalt { min-width: 0; }
.todo-beschreibung-eingabe {
line-height: 1.55;
max-height: 45vh;
overflow-y: auto;
resize: vertical;
}
.todo-spalte-seite {
background: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 14px 14px 4px;
}
.todo-spalte-seite .field { margin-bottom: 13px; }
.todo-spalte-seite input,
.todo-spalte-seite select,
.todo-spalte-seite .searchselect-trigger { font-size: 13px; }
.todo-seite-trenner { height: 1px; background: var(--color-border); margin: 2px 0 13px; }
.todo-spalte-seite > .todo-repeat-hinweis { margin: -8px 0 13px; }
.todo-spalte-seite .field > .todo-repeat-hinweis { margin: 5px 0 0; }
.todo-checkliste { margin: 18px 0 0; }
.todo-checkliste-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.todo-checkliste-kopf h3 {
font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--color-text-faint); margin: 0;
}
.todo-checkliste-fortschritt {
flex: 1; max-width: 130px; height: 5px; border-radius: 3px;
background: var(--color-bg-alt); overflow: hidden;
}
.todo-checkliste-fortschritt i {
display: block; height: 100%; width: 0; border-radius: 3px;
background: var(--color-success);
transition: width var(--dur-fast) var(--ease);
}
.todo-checkliste-zahl {
font-size: 11.5px; color: var(--color-text-faint); font-variant-numeric: tabular-nums;
}
.todo-checkliste-liste {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
background: var(--color-surface);
}
.todo-checkliste-zeile {
display: flex; align-items: center; gap: 9px;
padding: 4px 10px;
border-bottom: 1px solid var(--color-bg-alt);
}
.todo-checkliste-zeile:last-child { border-bottom: 0; }
.todo-checkliste-zeile:hover { background: var(--color-surface-2); }
.todo-checkliste-griff {
display: flex; align-items: center; justify-content: center;
flex: 0 0 auto; width: 22px; min-height: 28px; margin-left: -5px;
color: var(--color-border-strong); cursor: grab; touch-action: none;
}
.todo-checkliste-zeile:hover .todo-checkliste-griff { color: var(--color-text-faint); }
.todo-checkliste-griff:active { cursor: grabbing; }
.todo-checkliste-griff svg { width: 14px; height: 14px; }
.todo-checkliste-zeile input[type="checkbox"] {
width: 15px; height: 15px; flex-shrink: 0; accent-color: var(--color-success); margin: 0;
}
.todo-checkliste-text {
flex: 1; min-width: 0;
border: 0; background: none; padding: 6px 0;
font: inherit; font-size: 13px; color: var(--color-text);
}
.todo-checkliste-text:focus { outline: none; }
.todo-checkliste-zeile:focus-within { background: var(--color-accent-soft); }
.todo-checkliste-zeile.ist-erledigt .todo-checkliste-text {
color: var(--color-text-faint); text-decoration: line-through;
}
.todo-checkliste-x {
border: 0; background: none; padding: 2px; cursor: pointer; line-height: 0;
color: transparent; flex: 0 0 auto;
}
.todo-checkliste-x svg { width: 13px; height: 13px; }
.todo-checkliste-zeile:hover .todo-checkliste-x,
.todo-checkliste-zeile:focus-within .todo-checkliste-x { color: var(--color-text-faint); }
.todo-checkliste-x:hover { color: var(--color-danger) !important; }
.todo-checkliste-neu {
display: flex; align-items: center; gap: 9px; width: 100%;
padding: 7px 10px; border: 0; border-top: 1px dashed var(--color-border);
background: none; font: inherit; font-size: 12.5px; color: var(--color-text-faint);
cursor: pointer; text-align: left;
}
.todo-checkliste-neu svg { width: 13px; height: 13px; }
.todo-checkliste-neu:hover { background: var(--color-surface-2); color: var(--color-accent); }
.multiselect-chips {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
min-height: 38px; padding: 5px 6px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
background: var(--color-surface);
cursor: pointer;
}
.multiselect-chips:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.multiselect-chip {
display: inline-flex; align-items: center; gap: 6px;
background: var(--color-accent-soft); color: var(--color-accent-strong);
border-radius: 999px; padding: 3px 8px 3px 3px;
font-size: 12px; font-weight: 600;
}
.multiselect-chip-av {
width: 19px; height: 19px; border-radius: 50%;
background: var(--color-surface); color: var(--color-accent-strong);
font-size: 8.5px; font-weight: 600;
display: flex; align-items: center; justify-content: center;
}
.multiselect-chip-x { color: var(--color-accent); opacity: 0.6; cursor: pointer; font-size: 13px; line-height: 1; }
.multiselect-chip-x:hover { opacity: 1; color: var(--color-danger); }
.multiselect-chip-plus { font-size: 12.5px; color: var(--color-text-faint); padding: 0 6px; }
.multiselect-chip-leer { font-size: 13px; color: var(--color-text-faint); padding-left: 4px; }
.modal.is-aufgabe .todo-privat-feld {
display: flex; align-items: center; gap: 9px;
padding: 9px 11px; margin-bottom: 8px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
cursor: pointer;
}
.modal.is-aufgabe .todo-privat-feld:hover { border-color: var(--color-border-strong); }
@media (max-width: 900px) {
.todo-zweispalt { grid-template-columns: minmax(0, 1fr); }
.todo-spalte-seite { order: -1; }
.todo-steuerleiste { gap: 16px; }
}
.beleg-titelfeld { margin-bottom: 18px; }
.beleg-titelfeld > label { display: flex; align-items: center; gap: 8px; }
.beleg-titel-eing {
width: 100%;
border: 0;
border-bottom: 2px solid var(--color-border-strong);
border-radius: 0;
background: none;
font: inherit;
font-size: 19px;
font-weight: 600;
color: var(--color-text);
padding: 3px 0 8px;
outline: none;
}
.beleg-titel-eing:focus { border-bottom-color: var(--color-accent); }
.beleg-auto {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: none;
color: var(--color-accent);
background: var(--color-accent-soft);
border-radius: 4px;
padding: 1px 6px;
}
.beleg-zweispalt {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 26px;
align-items: start;
}
.beleg-spalte-text { min-width: 0; }
.beleg-spalte-seite {
border-left: 1px solid var(--color-border);
padding-left: 22px;
min-width: 0;
}
.beleg-spalte-seite > div { margin-bottom: 15px; }
.beleg-spalte-seite > div:last-child { margin-bottom: 0; }
.beleg-text {
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md, 9px);
background: var(--color-surface);
overflow: hidden;
}
.beleg-text-leiste {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 9px;
border-bottom: 1px solid var(--color-border);
background: var(--color-surface-2);
}
.beleg-text textarea {
width: 100%;
border: 0;
border-radius: 0;
padding: 11px 12px;
font: inherit;
font-size: 13.5px;
line-height: 1.65;
resize: vertical;
outline: none;
background: none;
color: inherit;
display: block;
}
@media (max-width: 900px) {
.beleg-zweispalt { grid-template-columns: minmax(0, 1fr); }
.beleg-spalte-seite {
order: -1;
border-left: 0;
padding-left: 0;
border-bottom: 1px solid var(--color-border);
padding-bottom: 14px;
}
}
.karte-stand { display: none; }
.nur-am-telefon-knopf { display: none; }
@media (max-width: 720px) {
.nur-am-telefon-knopf { display: inline-flex; }
.rw-kopf .page-header-actions { gap: 6px; flex-wrap: nowrap; }
.archive-search-bar .year-pills {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-right: 10px;
}
.archive-search-bar .year-pills::-webkit-scrollbar { display: none; }
.archive-search-bar .year-pill { flex: 0 0 auto; }
.archive-filter-hinweis { display: none; }
.rw-liste .card {
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
padding: 0;
}
table.invoicing-table-card tr.hat-karte {
margin-bottom: 0;
border: 0;
border-top: 1px solid var(--color-border);
border-radius: 0;
padding: 9px 12px;
background: var(--color-surface);
}
table.invoicing-table-card tr.hat-karte + tr.gruppen-kopf { border-top: 1px solid var(--color-border); }
table.invoicing-table-card td.karte-titel,
table.invoicing-table-card td.karte-titel > *,
table.invoicing-table-card td.karte-titel > * > * {
white-space: normal;
}
table.invoicing-table-card td.karte-titel .zellen-titel {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
table.invoicing-table-card tr.gruppen-kopf {
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
table.invoicing-table-card tr.gruppen-kopf > td.gruppen-kopf-zelle {
background: none;
border-radius: 0;
}
table.invoicing-table-card .gruppen-kopf-inhalt {
flex-wrap: nowrap;
gap: 7px;
padding: 13px 12px 5px;
}
table.invoicing-table-card .gruppen-titel {
font-size: 12px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
}
table.invoicing-table-card .gruppen-anzahl { white-space: nowrap; }
table.invoicing-table-card .gruppen-rechts {
flex: 0 0 auto;
margin-left: auto;
padding-left: 0;
}
table.invoicing-table-card .gruppen-summe { font-size: 13px; }
table.invoicing-table-card .gruppen-pfeil svg { width: 13px; height: 13px; }
table.invoicing-table-card td.karte-wert { text-align: right; }
table.invoicing-table-card .karte-stand {
display: block;
margin-top: 2px;
font-size: var(--text-meta);
font-weight: 600;
letter-spacing: 0;
color: var(--color-text-faint);
}
table.invoicing-table-card .karte-stand.ist-spaet { color: var(--color-danger); }
table.invoicing-table-card .karte-stand.ist-offen { color: var(--color-warning); }
table.invoicing-table-card .karte-stand.karte-weg { margin-top: 6px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
table.invoicing-table-card .karte-weg .weg { align-items: flex-end; gap: 4px; }
table.invoicing-table-card .karte-weg .weg-punkt { width: 6px; height: 6px; }
table.invoicing-table-card .karte-weg .weg-punkt.ist-aktuell { width: 12px; height: 12px; }
table.invoicing-table-card .karte-weg .weg-punkt.ist-aktuell svg { width: 8px; height: 8px; }
table.invoicing-table-card .karte-weg .weg-strich { width: 10px; }
table.invoicing-table-card .karte-weg .weg-label { font-size: 12px; }
table.invoicing-table-card .karte-weg .weg-frist { font-size: 11px; font-weight: 500; color: var(--weg); }
}
@media (max-width: 720px) {
.card.kunden-karte {
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
padding: 0;
}
table.kunden-table-card tr.hat-karte {
margin-bottom: 0;
border: 0;
border-top: 1px solid var(--color-border);
border-radius: 0;
padding: 8px 12px;
background: var(--color-surface);
}
table.kunden-table-card tr.hat-karte .switch-row { pointer-events: none; gap: 0; }
table.kunden-table-card tr.hat-karte .switch-row .switch { display: none; }
table.kunden-table-card tr.hat-karte .switch-label {
font-size: var(--text-meta);
color: var(--color-text-faint);
}
table.kunden-table-card td.karte-wert {
text-align: right;
font-size: 13.5px;
font-weight: 650;
}
table.kunden-table-card td.karte-wert .table-cell-sub {
font-weight: 500;
font-size: var(--text-meta);
color: var(--color-text-faint);
}
table.kunden-table-card tr.hat-karte > td.col-actions {
order: 3 !important;
flex: 0 0 auto;
align-self: flex-start;
margin-left: 4px;
}
table.kunden-table-card tr.hat-karte > td.expand-col { display: none; }
table.kunden-table-card tr.gruppen-kopf {
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
table.kunden-table-card tr.gruppen-kopf > td.gruppen-kopf-zelle {
background: none;
border-radius: 0;
}
table.kunden-table-card .gruppen-kopf-inhalt {
flex-wrap: nowrap;
gap: 7px;
padding: 12px 12px 4px;
}
table.kunden-table-card .gruppen-titel {
font-size: 12px;
font-weight: 600;
letter-spacing: .06em;
color: var(--color-text-faint);
}
table.kunden-table-card .gruppen-anzahl { display: none; }
table.kunden-table-card .gruppen-pfeil svg { width: 12px; height: 12px; }
}
@media (max-width: 720px) {
.page-header.kunden-kopf .page-header-actions .btn {
font-size: 0;
gap: 0;
padding-left: 13px;
padding-right: 13px;
}
.page-header.kunden-kopf .page-header-actions .btn > span { font-size: 14px; }
}
.todo-zeile-neben { display: contents; }
.todo-zeile-haupt > .kanban-card-check { order: -4; }
.todo-zeile-haupt > .todo-prio-punkt { order: -3; }
.todo-zeile-neben > .todo-zeile-wer { order: -2; }
.todo-zeile-haupt > .todo-zeile-mitte { order: -1; }
.todo-zeile-neben > * { order: 0; }
.todo-zeile-haupt > .kanban-card-delete { order: 1; }
@container (max-width: 520px) {
.todo-zeile-haupt { flex-wrap: wrap; row-gap: 2px; }
.todo-zeile-neben {
display: flex;
align-items: center;
flex: 0 0 100%;
gap: 7px;
padding-left: 26px;
order: 2;
font-size: var(--text-meta);
color: var(--color-text-muted);
}
.todo-zeile-neben > .todo-zeile-wer {
order: 0;
width: auto;
justify-content: flex-start;
}
.todo-zeile-neben > .todo-zeile-datum { order: 1; }
.todo-zeile-neben > .todo-files-badge,
.todo-zeile-neben > .todo-privat-badge,
.todo-zeile-neben > .todo-repeat-badge,
.todo-zeile-neben > .todo-checklist-badge { order: 2; }
.todo-zeile-datum { min-width: 0; text-align: left; }
.todo-zeile-haupt > .todo-prio-punkt { order: 1; margin-left: auto; align-self: flex-start; margin-top: 4px; }
.todo-zeile-haupt > .todo-zeile-mitte { order: 0; flex: 1 1 0%; min-width: 0; }
.todo-zeile-prod { max-width: 100%; }
.todo-zeile-prod .kanban-card-production {
display: block;
max-width: 100%;
background: none;
border: 0;
padding: 0;
color: var(--color-text-faint);
font-size: var(--text-meta);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kanban-card.hat-produktion {
position: relative;
padding-left: 14px;
}
.kanban-card.hat-produktion::before {
content: '';
position: absolute;
left: 0; top: 5px; bottom: 5px;
width: 3px;
border-radius: var(--radius-full);
background: hsl(var(--prod-hue, 210) 62% 52%);
}
.todo-zeile-prod .kanban-card-production {
display: flex;
align-items: baseline;
gap: 6px;
color: var(--color-text-faint);
}
.todo-zeile-prod .prod-marke {
flex: none;
color: hsl(var(--prod-hue, 210) 55% 38%);
font-weight: 650;
}
.todo-zeile-prod .prod-trenner { display: none; }
.todo-zeile-prod .prod-titel {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.todo-zeile-inhalt { margin-left: 26px; margin-top: 3px; }
}
@container (max-width: 520px) {
html[data-theme="dark"] .kanban-card.hat-produktion::before {
background: hsl(var(--prod-hue, 210) 55% 45%);
}
html[data-theme="dark"] .todo-zeile-prod .prod-marke {
color: hsl(var(--prod-hue, 210) 72% 74%);
}
html[data-theme="dark"] .todo-zeile-prod .kanban-card-production {
background: none;
color: var(--color-text-faint);
}
}
.pos-lese { display: none; }
@media (max-width: 720px) {
.billing-item-row {
grid-template-columns: auto 1fr;
align-items: start;
gap: 8px;
}
.billing-item-row > input,
.billing-item-row > textarea,
.billing-item-row > .billing-item-bez,
.billing-item-row > .billing-item-row-vat,
.billing-item-row > .btn-ghost { display: none; }
.billing-item-row.is-group > .btn-ghost { display: inline-flex; }
.pos-lese {
display: flex;
align-items: baseline;
gap: 10px;
min-width: 0;
padding: 2px 0;
cursor: pointer;
}
.pos-lese-haupt { flex: 1; min-width: 0; }
.pos-lese-bez {
font-size: 14px;
font-weight: 600;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pos-lese-bez.ist-leer { color: var(--color-text-faint); font-weight: 500; }
.pos-lese-rechnung {
margin-top: 3px;
font-size: var(--text-meta);
color: var(--color-text-muted);
}
.pos-lese-rabatt { color: var(--color-danger); }
.pos-lese-summe {
flex: none;
font-size: 13.5px;
font-weight: 650;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.billing-items-table { min-width: 0; }
}
.pos-blatt-feld { display: block; }
.pos-blatt-feld > span {
display: block;
margin-bottom: 4px;
font-size: 10.5px;
font-weight: 650;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--color-text-faint);
}
.pos-blatt-feld + .pos-blatt-gitter { margin-top: 10px; }
.pos-blatt-gitter {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.pos-blatt-summe {
display: flex;
align-items: baseline;
margin-top: 14px;
padding-top: 10px;
border-top: 1px solid var(--color-border);
font-size: 12.5px;
color: var(--color-text-muted);
}
.pos-blatt-summe strong {
margin-left: auto;
font-size: 15px;
font-weight: 650;
color: var(--color-text);
font-variant-numeric: tabular-nums;
}
.beleg-leiste {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 20px;
margin: -2px 0 2px;
padding: 12px 14px;
background: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
.beleg-block { display: flex; flex-direction: column; min-width: 0; }
.beleg-marke {
font-size: 10.5px;
font-weight: 650;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--color-text-faint);
}
.beleg-wert { margin-top: 3px; font-size: 12.5px; }
.beleg-art { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.beleg-nummer { margin-top: 1px; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
.beleg-nummer.ist-leer { font-size: 13px; font-weight: 500; color: var(--color-text-faint); }
.beleg-trenner { width: 1px; align-self: stretch; background: var(--color-border); }
.beleg-block .badge { margin-top: 3px; align-self: flex-start; }
.beleg-geld { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.beleg-brutto {
margin-top: 1px;
font-size: 19px;
font-weight: 600;
color: var(--color-accent-strong);
font-variant-numeric: tabular-nums;
}
.beleg-geld-klein { margin-top: 1px; font-size: 11.5px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.beleg-weiter { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.beleg-weiter .beleg-marke { margin-right: 4px; }
.doc-items-table tr.doc-item-header td {
background: var(--color-accent-soft);
color: var(--color-accent-strong);
}
.doc-items-table tr.doc-item-header td:first-child { box-shadow: inset 3px 0 0 var(--color-accent); }
.doc-items-table tr.doc-item-header td.gruppen-summe-zelle {
font-size: 13px;
letter-spacing: 0;
text-transform: none;
}
@media (max-width: 720px) {
.beleg-leiste { gap: 10px 16px; }
.beleg-trenner { display: none; }
.beleg-geld { margin-left: 0; align-items: flex-start; text-align: left; flex-basis: 100%; }
}
.pos-zusatz {
margin-top: 3px;
display: flex;
flex-wrap: wrap;
gap: 4px 14px;
font-size: var(--text-meta);
color: var(--color-text-faint);
}
.pos-zusatz b { font-weight: 600; color: var(--color-text-muted); }
.ist-abzug, .pos-zusatz b.ist-abzug { color: var(--color-danger); }
.pos-summen { display: flex; justify-content: flex-end; padding: 12px 4px 2px; }
.pos-summen-block { min-width: 260px; }
.pos-summen-reihe {
display: flex;
align-items: baseline;
padding: 2px 0;
font-size: 12.5px;
color: var(--color-text-muted);
}
.pos-summen-reihe .zahl { margin-left: auto; color: var(--color-text); font-variant-numeric: tabular-nums; }
.pos-summen-reihe.ist-abzug .zahl { color: var(--color-danger); }
.pos-summen-strich { margin: 6px 0; border-top: 1px solid var(--color-border); }
.pos-summen-reihe.ist-gross { font-size: 14px; font-weight: 650; color: var(--color-text); }
.pos-summen-reihe.ist-gross .zahl { font-size: 17px; font-weight: 600; color: var(--color-accent-strong); }
.pos-rechnung { display: none; }
@media (max-width: 720px) {
.doc-items-table,
.doc-items-table tbody,
.doc-items-table tr,
.doc-items-table td { display: block; }
.doc-items-table thead,
.doc-items-table colgroup { display: none; }
table.catalog-table.doc-items-table tr {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
gap: 0 10px;
padding: 9px 2px;
background: none;
border: 0;
border-bottom: 1px solid var(--color-border);
border-radius: 0;
box-shadow: none;
margin: 0;
}
table.catalog-table.doc-items-table tr:last-child { border-bottom: 0; }
table.catalog-table.doc-items-table td { display: block; padding: 0; border: 0; }
.doc-items-table tbody td:nth-child(2),
.doc-items-table tbody td:nth-child(3),
.doc-items-table tbody td:nth-child(4),
.doc-items-table tbody td:nth-child(6) { display: none; }
.doc-items-table tbody td:nth-child(5) {
grid-column: 2;
grid-row: 1;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.doc-items-table .pos-bez { font-weight: 500; }
.doc-items-table .pos-rechnung {
display: block;
margin-top: 2px;
font-size: var(--text-meta);
color: var(--color-text-muted);
}
table.catalog-table.doc-items-table tr.doc-item-header {
padding: 8px 10px;
background: var(--color-accent-soft);
box-shadow: inset 3px 0 0 var(--color-accent);
}
table.catalog-table.doc-items-table tr.doc-item-header td,
table.catalog-table.doc-items-table tr.doc-item-header td:first-child { background: none; box-shadow: none; }
table.catalog-table.doc-items-table tr.doc-item-header td.gruppen-summe-zelle {
display: block;
grid-column: 2;
grid-row: 1;
font-weight: 650;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.pos-summen { padding: 12px 0 2px; }
.pos-summen-block { min-width: 0; width: 100%; }
.expand-panel .table-actions {
flex-wrap: wrap;
gap: 6px;
justify-content: flex-start;
}
}
.expand-fastbill-row.hat-sprung { position: relative; transition: background .12s, border-color .12s; }
.expand-fastbill-row.hat-sprung:hover {
border-color: var(--color-accent);
background: var(--color-surface-2);
}
.beleg-sprung { color: inherit; text-decoration: none; }
.beleg-sprung::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
}
.expand-fastbill-row.hat-sprung:hover .beleg-sprung { text-decoration: underline; }
.expand-fastbill-row.hat-sprung .expand-fastbill-link,
.expand-fastbill-row.hat-sprung .vorlage-wahl,
.expand-fastbill-row.hat-sprung .expand-fastbill-by { position: relative; z-index: 1; }
button.vorlage-textknopf {
border: 0;
background: none;
padding: 0;
font: inherit;
color: var(--color-accent);
cursor: pointer;
}
button.vorlage-textknopf:hover { text-decoration: underline; }
.beleg-sprung:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 3px; }
tr.ist-angesprungen > td {
background: var(--color-accent-soft) !important;
animation: sprungBlitz 2.4s ease-out;
}
@keyframes sprungBlitz {
0%, 55% { background: var(--color-accent-soft); }
100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
tr.ist-angesprungen > td { animation: none; }
}
.sprung-hinweis {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: var(--space-2);
padding: 8px 12px;
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-accent);
border-radius: var(--radius-sm);
background: var(--color-surface-2);
font-size: 12.5px;
color: var(--color-text-muted);
}
.sprung-hinweis > span:first-child { display: flex; color: var(--color-accent); }
.sprung-hinweis > span:first-child svg { width: 16px; height: 16px; }
.sprung-hinweis .btn { margin-left: auto; flex-shrink: 0; }
.pm-mehr {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
margin-top: 4px;
padding: 7px 10px;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-muted);
font: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.pm-mehr:hover { background: var(--color-surface-2); color: var(--color-text); }
.pm-mehr svg { width: 14px; height: 14px; transition: transform .15s; }
.pm-mehr.ist-offen svg { transform: rotate(180deg); }
.pm-mehr:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.assets-zwei {
display: grid;
grid-template-columns: fit-content(40%) minmax(0, 1fr);
gap: var(--space-4);
align-items: start;
}
.assets-liste {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
min-width: 280px;
overflow: hidden;
max-height: calc(100vh - 220px);
overflow-y: auto;
}
.assets-l-zeile {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-bottom: 1px solid var(--color-border);
cursor: pointer;
}
.assets-l-zeile:last-child { border-bottom: 0; }
.assets-l-zeile:hover { background: var(--color-surface-2); }
.assets-l-zeile.is-dragover { background: var(--color-accent-soft); }
.assets-l-zeile.ist-gewaehlt {
background: var(--color-accent-soft);
box-shadow: inset 3px 0 0 var(--color-accent);
}
.assets-l-zeile:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.assets-l-titel {
display: flex;
align-items: baseline;
gap: 6px;
min-width: 0;
font-size: 12.5px;
}
.assets-l-nr { color: var(--color-accent-strong); font-weight: 650; font-variant-numeric: tabular-nums; flex: none; }
.assets-l-kuerzel { color: var(--color-text-muted); font-weight: 600; flex: none; }
.assets-l-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assets-l-zaehler { display: flex; gap: 3px; align-items: center; flex: none; }
.quelle-direct { --quelle: var(--color-tone-slate); --quelle-soft: var(--color-tone-slate-soft); }
.quelle-client { --quelle: var(--color-tone-amber); --quelle-soft: var(--color-tone-amber-soft); }
.quelle-filetransfer { --quelle: var(--color-tone-teal); --quelle-soft: var(--color-tone-teal-soft); }
.quelle-preview { --quelle: var(--color-tone-blue); --quelle-soft: var(--color-tone-blue-soft); }
.quelle-master { --quelle: var(--color-accent); --quelle-soft: var(--color-accent-soft); }
.pm-zwei .pm-detail { min-width: 0; }
.pm-grid:has(> .pm-zwei) { display: block; }
.pm-zwei .pm-detail > .pm-card { margin: 0; }
.assets-zaehler {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 4px;
background: var(--quelle-soft, var(--color-surface-2));
color: var(--quelle, var(--color-text-muted));
font-size: 10.5px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.assets-zaehler.ist-null { background: transparent; color: var(--color-border-strong); }
.assets-punkt {
width: 7px; height: 7px; border-radius: 50%;
background: var(--quelle, var(--color-text-muted)); flex: none;
}
.assets-detail {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
}
.assets-detail.is-dragover { border-color: var(--color-accent); }
.assets-d-kopf {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px 12px;
border-bottom: 1px solid var(--color-border);
}
.assets-d-titel {
display: flex; align-items: baseline; gap: 8px; min-width: 0;
font-size: var(--text-entity-title); font-weight: 600;
}
.assets-d-titel > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assets-d-kunde { font-size: var(--text-meta); color: var(--color-text-muted); margin-top: 2px; }
.assets-d-tasten { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.assets-reiter { display: flex; gap: 4px; padding: 10px 16px 0; flex-wrap: wrap; }
.assets-reiter-knopf {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 12px;
border: 0;
border-bottom: 2px solid transparent;
background: none;
font: inherit;
font-size: 12.5px;
font-weight: 600;
color: var(--color-text-muted);
cursor: pointer;
}
.assets-reiter-knopf:hover { color: var(--color-text); }
.assets-reiter-knopf.ist-an { color: var(--quelle); border-bottom-color: var(--quelle); }
.assets-reiter-knopf:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.assets-reiter-kurz { display: none; }
.assets-tabelle { padding: 4px 16px 0; }
.assets-kopf,
.assets-zeile {
display: grid;
grid-template-columns: 38px minmax(0, 1fr) 90px 150px 70px 148px;
align-items: center;
gap: 10px;
}
.assets-kopf {
padding: 6px 0 5px;
border-bottom: 1px solid var(--color-border);
}
.assets-kopf-zelle {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 0;
border: 0;
background: none;
font: inherit;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-text-faint);
cursor: pointer;
white-space: nowrap;
}
.assets-kopf-zelle.ist-rechts { justify-content: flex-end; }
.assets-kopf-zelle:hover { color: var(--color-text-muted); }
.assets-kopf-zelle.ist-sortiert { color: var(--color-accent-strong); }
.assets-kopf-zelle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.assets-pfeil { display: inline-flex; width: 12px; opacity: 0; transition: transform .12s; }
.assets-pfeil svg { width: 12px; height: 12px; }
.assets-pfeil.ist-an { opacity: 1; }
.assets-pfeil.ist-an:not(.ist-ab) { transform: rotate(180deg); }
.assets-zeile {
padding: 9px 0;
border-bottom: 1px solid var(--color-border);
cursor: pointer;
}
.assets-zeile:last-of-type { border-bottom: 0; }
.assets-zeile:hover { background: var(--color-surface-2); }
.assets-zeile.ist-paket { cursor: default; }
.assets-zeile:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.assets-zeile-sym { display: flex; color: var(--color-text-faint); }
.assets-zeile-sym svg { width: 16px; height: 16px; }
.assets-zeile-haupt { min-width: 0; }
.assets-zeile-name { font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assets-zeile-unter { font-size: var(--text-meta); color: var(--color-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assets-zeile-zahl { font-size: var(--text-meta); color: var(--color-text-muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.assets-zeile-wer { font-size: var(--text-meta); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assets-zeile-tasten { display: flex; justify-content: flex-end; gap: 2px; }
.assets-leer { padding: 24px 16px; text-align: center; font-size: 12.5px; color: var(--color-text-muted); }
.assets-herkunft { margin: 0; padding: 4px 16px 18px; font-size: var(--text-meta); color: var(--color-text-faint); }
.assets-ablage {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
margin: 12px 16px 16px;
padding: 14px;
border: 1px dashed var(--color-border-strong);
border-radius: var(--radius-sm);
font-size: 12.5px;
color: var(--color-text-muted);
cursor: pointer;
}
.assets-ablage:hover { border-color: var(--color-accent); color: var(--color-text); }
.assets-ablage svg { width: 15px; height: 15px; }
.assets-laedt:not(:empty) { padding: 8px 16px 0; }
.assets-zeile-meta { display: none; }
.assets-l-pfeil { display: none; }
.assets-sortleiste { display: none; }
.assets-tabelle.mit-wahl .assets-kopf,
.assets-tabelle.mit-wahl .assets-zeile { grid-template-columns: 18px 38px minmax(0, 1fr) 90px 150px 70px 148px; }
.assets-wahl { display: flex; align-items: center; }
.assets-wahl input { width: 15px; height: 15px; margin: 0; accent-color: var(--color-accent); cursor: pointer; }
.assets-zeile.ist-gewaehlt { background: var(--color-accent-soft); }
.assets-zeile.ist-gezogen { opacity: .5; }
.asset-vorschau.ist-ordner { background: var(--color-accent-soft); color: var(--color-accent-strong); border: 0; }
.asset-vorschau.ist-ordner svg { width: 18px; height: 18px; }
.assets-zeile.is-dragover,
.assets-ob.is-dragover { background: var(--color-accent-soft); box-shadow: inset 0 0 0 1px var(--color-accent); }
.assets-pfadzeile { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 10px 16px 0; }
.assets-pfad { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 13px; }
.assets-pfad button { border: 0; background: none; padding: 0; font: inherit; color: var(--color-text-faint); cursor: pointer; }
.assets-pfad button:hover { color: var(--color-accent-strong); }
.assets-pfad b { font-weight: 600; }
.assets-pfad-trenner { color: var(--color-text-faint); }
.assets-auswahl-zahl { font-size: 12.5px; font-weight: 600; color: var(--color-accent-strong); white-space: nowrap; }
.assets-pfadzeile .btn-sm svg,
.assets-neuer-ordner svg { width: 14px; height: 14px; }
.assets-pfadzeile .btn-secondary,
.assets-neuer-ordner { display: inline-flex; align-items: center; gap: 6px; }
.assets-ob-baum {
display: flex; flex-direction: column; gap: 2px;
padding: 6px 8px 10px; border-bottom: 1px solid var(--color-border); background: var(--color-surface);
}
.assets-ob {
display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px 6px 12px;
border: 0; border-radius: 8px; background: none; font: inherit; font-size: 12.5px; color: var(--color-text); text-align: left; cursor: pointer;
}
.assets-ob:hover { background: var(--color-surface-2); }
.assets-ob.ist-an { background: var(--color-accent-soft); color: var(--color-accent-strong); font-weight: 600; }
.assets-ob-sym { display: flex; flex: none; color: var(--color-text-muted); }
.assets-ob.ist-an .assets-ob-sym { color: inherit; }
.assets-ob-sym svg { width: 14px; height: 14px; }
.assets-ob-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assets-ob-zahl { font-size: 11.5px; font-weight: 400; color: var(--color-text-faint); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
.assets-zwei { display: block; }
.assets-liste {
min-width: 0;
max-height: none;
overflow: visible;
}
.assets-l-zeile { padding: 11px 12px; }
.assets-l-pfeil { display: inline-flex; color: var(--color-text-faint); transition: transform .15s; }
.assets-l-pfeil svg { width: 15px; height: 15px; }
.assets-l-pfeil.ist-offen { transform: rotate(180deg); }
.assets-l-zeile.ist-gewaehlt { background: transparent; box-shadow: none; }
.assets-liste .pm-detail > .pm-card { border: 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); border-radius: 0; box-shadow: none; background: var(--color-surface-2); }
.assets-detail {
border: 0;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
border-radius: 0;
background: var(--color-surface-2);
}
.assets-d-titel { display: none; }
.assets-d-kopf { padding: 10px 12px; align-items: center; }
.assets-d-kunde { margin-top: 0; }
.assets-d-tasten { margin-left: auto; }
.assets-reiter { padding: 10px 12px 0; gap: 5px; }
.assets-reiter-knopf {
padding: 6px 10px;
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-surface);
font-size: 11.5px;
}
.assets-reiter-knopf.ist-an {
border-color: var(--quelle);
background: var(--quelle-soft);
}
.assets-reiter-lang { display: none; }
.assets-reiter-kurz { display: inline; }
.assets-kopf { display: none; }
.assets-sortleiste {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px 6px;
font-size: var(--text-meta);
color: var(--color-text-muted);
}
.assets-sortknopf {
display: inline-flex;
align-items: center;
gap: 5px;
margin-left: auto;
padding: 6px 10px;
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-surface);
font: inherit;
font-size: 11.5px;
font-weight: 600;
color: var(--color-text);
cursor: pointer;
}
.assets-sortknopf .assets-pfeil { width: 12px; }
.assets-tabelle { padding: 0 12px; }
.assets-kopf,
.assets-zeile { grid-template-columns: 34px minmax(0, 1fr) auto; align-items: start; }
.assets-tabelle.mit-wahl .assets-kopf,
.assets-tabelle.mit-wahl .assets-zeile { grid-template-columns: 18px 34px minmax(0, 1fr) auto; }
.assets-wahl { margin-top: 9px; }
.assets-pfadzeile { padding: 10px 12px 0; flex-wrap: wrap; }
.assets-zeile { padding: 10px 0; }
.assets-zeile-sym { margin-top: 2px; }
.assets-zeile .asset-vorschau { width: 34px; height: 34px; }
.assets-zeile-zahl,
.assets-zeile-wer { display: none; }
.assets-zeile-meta { display: block; margin-top: 2px; font-size: var(--text-meta); color: var(--color-text-faint); }
.assets-zeile-tasten .btn-ghost { min-width: 32px; min-height: 32px; }
.assets-ablage { margin: 12px; }
.assets-herkunft { padding: 4px 12px 14px; }
}
.st-koerper { display: flex; flex-direction: column; gap: var(--space-3); }
.st-schritt {
margin: 0;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-faint);
}
.st-block { transition: opacity 0.15s ease; }
.st-block.is-aus { opacity: 0.45; }
.st-kanaele { display: flex; flex-wrap: wrap; gap: 2px 16px; }
.st-kanal { margin-bottom: 0; }
.st-kanal.ist-zusatz { margin-left: -6px; }
.st-kanal.ist-gesperrt,
.checkbox-field.ist-gesperrt { opacity: 0.4; cursor: not-allowed; }
.st-kanal.ist-gesperrt input,
.checkbox-field.ist-gesperrt input { cursor: not-allowed; }
.st-vorschau-label {
display: block;
font-size: 12.5px;
font-weight: 600;
color: var(--color-text-muted);
margin: var(--space-3) 0 6px;
}
.st-vorschau {
white-space: pre-wrap;
font-size: 12.5px;
line-height: 1.5;
color: var(--color-text);
background: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 10px 12px;
}
.st-posten {
display: flex;
flex-direction: column;
max-height: 340px;
overflow-y: auto;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 6px 10px;
}
.st-posten-zeile {
align-items: flex-start;
margin-bottom: 0;
padding: 6px 2px;
font-size: 12.5px;
line-height: 1.45;
}
.st-posten-zeile + .st-posten-zeile { border-top: 1px solid var(--color-border); }
.st-posten-zeile input { flex: none; margin-top: 2px; }
.feld-hinweis,
.feld-optional {
margin-left: 8px;
font-size: 11px;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
color: var(--color-text-faint);
}
.feld-hinweis { color: var(--color-accent); }
.feld-optional::before { content: '· '; }
.fb-herkunft {
flex: none;
font-size: 11px;
font-weight: 600;
padding: 1px 7px;
border-radius: 999px;
background: var(--color-surface);
border: 1px solid var(--color-border);
color: var(--color-text-muted);
white-space: nowrap;
}
.fb-antwort {
margin: 8px 0 0 14px;
padding: 7px 11px;
border-left: 2px solid var(--color-accent);
background: var(--color-surface);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.fb-antwort-kopf {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 12px;
color: var(--color-text-muted);
}
.fb-umgesetzt {
font-size: 11px;
font-weight: 600;
padding: 1px 7px;
border-radius: 999px;
background: rgba(22, 120, 80, 0.10);
color: #167850;
white-space: nowrap;
}
html[data-theme="dark"] .fb-umgesetzt { background: rgba(52, 199, 133, 0.14); color: #34c785; }
.fb-form {
margin: 8px 0 0 14px;
padding: 9px 11px;
border-left: 2px solid var(--color-accent);
background: var(--color-surface);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.fb-form textarea {
width: 100%;
resize: vertical;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 7px 9px;
font: inherit;
font-size: 12.5px;
background: var(--color-surface);
color: var(--color-text);
}
.fb-form-reihe { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.fb-form-reihe > label {
display: flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 600;
color: var(--color-text-muted);
}
.fb-form-reihe select {
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 5px 8px;
font: inherit;
font-size: 12.5px;
background: var(--color-surface);
color: var(--color-text);
}
.satz-feld { display: flex; align-items: center; gap: 8px; }
.satz-feld .form-control { max-width: 160px; }
.satz-einheit { font-size: var(--text-meta); color: var(--color-text-muted); }
.satz-hinweis {
margin: 14px 0 0; font-size: var(--text-meta); line-height: 1.5;
color: var(--color-text-muted);
}
.satz-hinweis.ist-leise { margin-top: 6px; opacity: .8; }
.zeit-satz-badge { margin-left: 8px; vertical-align: middle; }
.inspo-kachel { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.inspo-kachel.ist-leer { display: none; }
.inspo-kachel .spass { transition: opacity .45s ease; }
.inspo-kachel .spass.kommt-herein, .inspo-kachel .spass.geht-raus { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.inspo-kachel .spass { transition: none; }
.inspo-kachel .spass.kommt-herein { opacity: 1; }
}
.inspo-leer { margin: 0; padding: 14px; font-size: var(--text-meta); }
.spass {
position: relative; overflow: hidden;
display: flex; flex-direction: column;
height: 100%; min-height: 150px; flex: 1 1 auto;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
text-decoration: none; color: inherit;
transition: opacity .25s ease, border-color .2s ease;
}
.spass:hover { border-color: var(--color-text-muted); }
.spass.ist-weg { opacity: 0; pointer-events: none; }
.spass-rahmen {
position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden;
background-size: cover; background-position: center;
background-color: var(--color-bg-alt);
}
.spass-bild {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; display: block;
background: var(--color-bg-alt);
}
.spass-unterschrift {
flex: 0 0 auto;
padding: 9px 12px 10px;
border-top: 1px solid var(--color-border);
background: var(--color-surface);
}
.spass-titel {
font-size: var(--text-body); font-weight: var(--weight-medium);
line-height: 1.3; color: var(--color-text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spass-nachweis {
margin-top: 2px; font-size: var(--text-meta); color: var(--color-text-muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@container (max-width: 380px) {
.spass-unterschrift { padding: 7px 10px 8px; }
.spass-nachweis { display: none; }
}
@media (max-width: 640px) {
.inspo-kachel .spass { min-height: 0; }
.inspo-kachel .spass-rahmen { aspect-ratio: 16 / 9; flex: 0 0 auto; }
}
.schoner {
position: fixed; inset: 0; z-index: 9000;
background: #05060a;
overflow: hidden;
cursor: none;
animation: schoner-auf .5s ease both;
}
.schoner.geht-raus { animation: schoner-zu .3s ease both; }
@keyframes schoner-auf { from { opacity: 0; } to { opacity: 1; } }
@keyframes schoner-zu  { from { opacity: 1; } to { opacity: 0; } }
body.schoner-laeuft { overflow: hidden; }
.schoner-buehne {
position: absolute; inset: 0;
opacity: 1; transition: opacity .9s ease;
}
.schoner-buehne.kommt-herein, .schoner-buehne.geht-raus { opacity: 0; }
.schoner-bild {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
display: block;
}
.schoner-angaben {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 0 52px 44px;
color: #fff;
pointer-events: none;
text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 2px 28px rgba(0, 0, 0, .75);
}
.schoner-titel {
font-size: 25px; font-weight: 300; line-height: 1.22;
letter-spacing: .005em;
}
.schoner-nachweis {
margin-top: 7px; font-size: 14px; font-weight: 300;
letter-spacing: .04em;
color: rgba(255, 255, 255, .78);
}
@media (max-width: 720px) {
.schoner-angaben { padding: 0 22px 26px; }
.schoner-titel { font-size: 19px; }
.schoner-nachweis { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
.schoner, .schoner.geht-raus { animation: none; }
.schoner-buehne { transition: none; }
.schoner-buehne.kommt-herein { opacity: 1; }
}
.budget-liste { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-3); }
.budget-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 104px 108px 28px; gap: 6px; align-items: center; }
.budget-zeile input,
.budget-zeile select {
width: 100%;
min-width: 0;
padding: 7px 9px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
font-size: 13px;
font-family: inherit;
background: var(--color-surface-2);
color: var(--color-text);
transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.budget-zeile select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 28px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239598ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 14px 14px;
}
.budget-betrag { text-align: right; font-variant-numeric: tabular-nums; }
.budget-zeile > .btn-ghost { justify-self: center; padding: 4px; }
.budget-summen { border-top: 1px solid var(--color-border); padding-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.budget-summe { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 13px; }
.budget-summe > span:first-child { color: var(--color-text-muted); }
.budget-summe > span:last-child { font-variant-numeric: tabular-nums; }
.budget-summe.ist-ergebnis { font-weight: var(--weight-semibold, 600); border-top: 1px solid var(--color-border); padding-top: 6px; margin-top: 3px; }
.budget-summe.ist-ergebnis > span:first-child { color: var(--color-text); }
.budget-knoepfe { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-3); }
.budget-hinweis {
display: flex; align-items: flex-start; gap: 8px;
font-size: 12.5px; color: var(--color-text-muted);
background: var(--color-bg-alt); border-radius: var(--radius-sm);
padding: 8px 10px; margin-bottom: var(--space-3);
}
.budget-hinweis .badge { flex: 0 0 auto; }
.budget-ctrl { display: flex; flex-direction: column; }
.budget-ctrl-zeile {
display: grid; grid-template-columns: minmax(0, 1fr) 120px 120px;
gap: var(--space-3); align-items: baseline;
padding: 7px 0; border-bottom: 1px solid var(--color-border-subtle, var(--color-border));
color: inherit; text-decoration: none; font-size: 13px;
}
a.budget-ctrl-zeile:hover { background: var(--color-bg-alt); }
.budget-ctrl-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.budget-ctrl-wert, .budget-ctrl-kosten { text-align: right; font-variant-numeric: tabular-nums; }
.budget-ctrl-kosten { color: var(--color-text-muted); }
.budget-ctrl-zeile.ist-summe { font-weight: var(--weight-semibold, 600); border-bottom: none; }
.budget-ctrl-zeile.ist-summe:first-of-type { border-top: 2px solid var(--color-border); margin-top: 4px; }
@media (max-width: 640px) {
.budget-zeile { grid-template-columns: minmax(0, 1fr) 28px; grid-template-areas: "titel weg" "art betrag"; }
.budget-titel { grid-area: titel; }
.budget-art { grid-area: art; }
.budget-betrag { grid-area: betrag; }
.budget-zeile > .btn-ghost { grid-area: weg; }
.budget-zeile input, .budget-zeile select { padding: 6px 8px; }
.budget-ctrl-zeile { grid-template-columns: minmax(0, 1fr) 110px; }
.budget-ctrl-kosten { grid-column: 2; }
}
.inspo-kachel { position: relative; }
.spass-knoepfe {
position: absolute;
right: 11px;
bottom: 11px;
display: flex;
align-items: center;
gap: 8px;
z-index: 2;
}
.inspo-kachel .spass-unterschrift { padding-right: 102px; }
.spass-knopf {
display: inline-flex; align-items: center; justify-content: center;
border: 0;
background: none;
color: var(--color-text-faint);
cursor: pointer;
padding: 5px;
margin: -5px;
line-height: 0;
transition: color .15s ease, opacity .15s ease;
}
.spass-knopf svg { width: 16px; height: 16px; display: block; }
.spass-knopf:hover { color: var(--color-text); }
.spass-knopf:disabled { opacity: .55; cursor: default; }
.spass-knopf.ist-gemerkt { color: var(--color-accent); }
.spass-knopf.ist-gemerkt svg { fill: currentColor; }
.spass-wolke {
position: absolute;
inset: 0;
z-index: 5;
background: rgba(9, 11, 16, .52);
backdrop-filter: blur(9px) saturate(.9);
border-radius: inherit;
overflow: hidden;
}
.spass-wolke-titel {
position: absolute; left: 14px; top: 12px;
font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
color: rgba(255, 255, 255, .52);
}
.spass-wolke-zu {
position: absolute; right: 9px; top: 8px;
background: none; border: 0; padding: 5px; cursor: pointer; line-height: 0;
color: rgba(255, 255, 255, .6);
}
.spass-wolke-zu:hover { color: #fff; }
.spass-wolke-zu svg { width: 15px; height: 15px; display: block; }
.spass-wolke-woerter { position: absolute; inset: 30px 10px 92px; }
.spass-wolke-wort {
position: absolute;
background: none; border: 0; padding: 0; cursor: pointer;
color: #fff; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
font-family: inherit; line-height: 1.1;
text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
transition: color .2s ease;
}
.spass-wolke-wort .x {
display: inline-block; margin-left: 5px; font-weight: 400;
opacity: 0; transition: opacity .18s ease;
}
.spass-wolke-wort:hover { color: #ff9a8f; }
.spass-wolke-wort:hover .x { opacity: .8; }
.spass-wolke:hover .spass-wolke-wort,
.spass-wolke:focus-within .spass-wolke-wort { animation-play-state: paused; }
@keyframes spass-treiben-1 { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(11px, -9px); } 66% { transform: translate(-7px, 7px); } }
@keyframes spass-treiben-2 { 0%, 100% { transform: translate(0, 0); } 40% { transform: translate(-13px, 8px); } 75% { transform: translate(6px, -11px); } }
@keyframes spass-treiben-3 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(9px, 12px); } }
.spass-wolke-wort.bahn-1 { animation: spass-treiben-1 17s ease-in-out infinite; }
.spass-wolke-wort.bahn-2 { animation: spass-treiben-2 21s ease-in-out infinite; }
.spass-wolke-wort.bahn-3 { animation: spass-treiben-3 14s ease-in-out infinite; }
.spass-wolke-zeile {
position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%);
width: min(300px, calc(100% - 40px));
display: flex; align-items: center; gap: 9px;
padding: 8px 14px; border-radius: 999px;
background: rgba(255, 255, 255, .1);
border: 1px solid rgba(255, 255, 255, .26);
backdrop-filter: blur(8px);
}
.spass-wolke-eingabe {
flex: 1; min-width: 0;
background: none; border: 0; outline: none; padding: 0;
color: #fff; font: inherit; font-size: 13px;
}
.spass-wolke-eingabe::placeholder { color: rgba(255, 255, 255, .5); }
.spass-wolke-eingabe:disabled { cursor: not-allowed; }
.spass-wolke-zeile .taste {
flex: none; font-size: 10px; color: rgba(255, 255, 255, .45);
border: 1px solid rgba(255, 255, 255, .24); border-radius: 4px; padding: 1px 5px;
}
.spass-wolke-fuss {
position: absolute; left: 12px; right: 12px; bottom: 15px;
text-align: center; font-size: 10.5px; letter-spacing: .04em;
color: rgba(255, 255, 255, .42);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spass-wolke.ist-schief .spass-wolke-fuss { color: #ff9a8f; }
.spass-wolke.ist-schief .spass-wolke-fuss::after { content: ' · nicht gespeichert'; }
@media (prefers-reduced-motion: reduce) {
.spass-wolke-wort { animation: none !important; }
}
@media (max-width: 640px) {
.spass-wolke-wort { animation: none !important; }
.spass-wolke-woerter { inset: 28px 8px 86px; }
}
.inspiration-board-card.ist-likes .inspiration-board-cover.is-empty { color: var(--color-accent); }
a.inspiration-card.ist-like { text-decoration: none; color: inherit; display: block; }
a.inspiration-card.ist-like video { width: 100%; height: auto; display: block; }
.vorlage-wahl { display: inline-flex; }
.vorlage-feld {
position: fixed;
left: 0;
top: 0;
min-width: 300px;
max-width: calc(100vw - 16px);
background: var(--color-surface);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
z-index: 150;
padding: 6px;
}
.vorlage-feld-titel {
font-size: 10.5px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--color-text-faint);
padding: 7px 10px 6px;
}
.vorlage-feld-eintrag {
display: flex;
align-items: flex-start;
gap: 10px;
width: 100%;
padding: 9px 10px;
border: 0;
background: none;
border-radius: var(--radius-sm);
font-family: inherit;
font-size: var(--text-body);
text-align: left;
cursor: pointer;
color: var(--color-text);
}
.vorlage-feld-eintrag:hover { background: var(--color-bg-alt); }
.vorlage-feld-eintrag:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.vorlage-feld-text { display: flex; flex-direction: column; min-width: 0; }
.vorlage-feld-text .n { font-weight: 600; line-height: 1.3; }
.vorlage-feld-text .h { font-size: var(--text-meta); font-weight: 400; color: var(--color-text-muted); margin-top: 2px; line-height: 1.35; }
.vorlage-feld-gleich { margin-left: auto; font-size: 10.5px; color: var(--color-text-faint); white-space: nowrap; padding-top: 4px; }
.vorlage-punkt { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--color-text-faint); margin-top: 6px; }
.vorlage-punkt.ist-tone-blue { background: var(--color-tone-blue); }
.vorlage-punkt.ist-tone-purple { background: var(--color-tone-purple); }
.vorlage-punkt.ist-tone-teal { background: var(--color-tone-teal); }
.vorlage-punkt.ist-tone-amber { background: var(--color-tone-amber); }
.vorlage-feld-fuss {
border-top: 1px solid var(--color-border);
margin-top: 5px;
padding: 8px 10px 6px;
font-size: var(--text-meta);
color: var(--color-text-muted);
line-height: 1.5;
}
.vorlage-feld-fuss b { color: var(--color-text); font-weight: 600; }
.beleg-aktionen { margin-top: var(--space-3); }
.beleg-vorwaerts {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 10px 12px;
}
.beleg-vorwaerts .beleg-marke { margin-right: 4px; }
.beleg-vorwaerts-hinweis {
margin-left: auto;
font-size: var(--text-meta);
color: var(--color-text-muted);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.beleg-leise {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 16px;
justify-content: flex-end;
margin-top: 10px;
}
.beleg-leise-aktion {
display: inline-flex;
align-items: center;
gap: 5px;
border: 0;
background: none;
padding: 2px 0;
font-family: inherit;
font-size: 12.5px;
line-height: 1.3;
color: var(--color-accent);
text-decoration: none;
cursor: pointer;
}
.beleg-leise-aktion:hover { text-decoration: underline; }
.beleg-leise-aktion:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 3px; }
.beleg-leise-aktion svg { width: 14px; height: 14px; }
.beleg-leise-aktion.ist-gefahr { color: var(--color-danger); margin-left: 8px; }
@media (max-width: 640px) {
.beleg-leise { justify-content: flex-start; gap: 10px 14px; }
.beleg-vorwaerts-hinweis { display: none; }
.beleg-leise-aktion { padding: 6px 0; }
}
.spotify-karte { display: none; }
.spotify-karte.ist-da {
display: flex;
flex-direction: column;
gap: 9px;
background: var(--color-bg-alt);
border-radius: 12px;
padding: 10px;
}
.spotify-karte-oben { display: flex; align-items: center; gap: 10px; min-width: 0; }
.spotify-karte-cover {
width: 42px; height: 42px;
border-radius: var(--radius-sm);
flex: none;
object-fit: cover;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
}
.spotify-karte-meta { min-width: 0; line-height: 1.3; }
.spotify-karte-titel,
.spotify-karte-kuenstler { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spotify-karte-titel { font-size: 12.5px; font-weight: var(--weight-medium); }
.spotify-karte-kuenstler { font-size: 11px; color: var(--color-text-muted); }
.spotify-karte-fortschritt {
height: 3px;
border-radius: 2px;
background: var(--color-border);
overflow: hidden;
}
.spotify-karte-fortschritt i {
display: block;
height: 100%;
width: 0;
background: var(--color-accent);
border-radius: 2px;
transition: width 0.9s linear;
}
@media (prefers-reduced-motion: reduce) {
.spotify-karte-fortschritt i { transition: none; }
}
.spotify-karte-tasten { display: flex; align-items: center; gap: 6px; }
.spotify-karte-tasten { position: relative; justify-content: center; min-height: 28px; }
.spotify-karte-zeit {
position: absolute;
left: 0;
font-size: 10.5px;
color: var(--color-text-faint);
font-variant-numeric: tabular-nums;
pointer-events: none;
}
.spotify-karte-knoepfe { display: flex; align-items: center; gap: 4px; }
.spotify-karte-knoepfe .spotify-btn { padding: 5px; }
.spotify-karte-knoepfe .spotify-btn svg { width: 16px; height: 16px; }
.spotify-karte-knoepfe .spotify-btn:nth-child(2) svg { width: 19px; height: 19px; }
.spotify-karte-knoepfe .spotify-btn:nth-child(2) { color: var(--color-text); }
body.sidebar-collapsed .spotify-karte { display: none; }
.wr { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.wr-buehne {
position: relative;
flex: 1;
min-height: 150px;
border-radius: var(--radius-md);
overflow: hidden;
background:
radial-gradient(120% 90% at 50% 8%, #f4f6f9 0%, #e7ebf1 55%, #dde3ea 100%);
cursor: grab;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .wr-buehne {
background:
radial-gradient(120% 90% at 50% 8%, #1b2430 0%, #0e141c 55%, #090d13 100%);
}
}
:root[data-theme="dark"] .wr-buehne {
background:
radial-gradient(120% 90% at 50% 8%, #1b2430 0%, #0e141c 55%, #090d13 100%);
}
.wr-karte { display: block; width: 100%; height: 100%; }
.wr-hinweis {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #8b94a3;
font-size: 13px;
pointer-events: none;
}
.wr-fahne {
position: absolute;
top: 0;
left: 0;
padding: 3px 8px;
border-radius: var(--radius-full);
background: rgba(9, 13, 19, 0.88);
color: #e8ebf0;
font-size: 11.5px;
font-weight: 600;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.1s ease;
}
.wr-fahne.ist-da { opacity: 1; }
.wr-leiste {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.wr-text { flex: 1; min-width: 0; }
.wr-titel {
font-size: 14px;
font-weight: 650;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wr-ort {
font-size: var(--text-meta);
color: var(--color-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 1px;
}
.wr-play, .wr-weiter, .wr-zufall {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text);
border-radius: 50%;
cursor: pointer;
}
.wr-play { width: 40px; height: 40px; }
.wr-play svg { width: 16px; height: 16px; }
.wr-weiter, .wr-zufall { width: 32px; height: 32px; color: var(--color-text-muted); }
.wr-weiter svg, .wr-zufall svg { width: 14px; height: 14px; }
.wr-play:hover:not(:disabled), .wr-weiter:hover:not(:disabled), .wr-zufall:hover {
border-color: var(--color-accent);
color: var(--color-accent);
}
.wr-play:disabled, .wr-weiter:disabled { opacity: 0.4; cursor: default; }
.wr.ist-an .wr-play {
background: var(--color-accent);
border-color: var(--color-accent);
color: #fff;
}
@media (max-width: 640px) {
.nb-zeile.ist-datei, .nb-zeile.ist-ordner { flex-wrap: wrap; row-gap: 2px; }
.nb-zeile .nb-name { flex-basis: calc(100% - 40px); }
.nb-zeile .nb-meta { padding-left: 40px; flex: 1; }
.pdat-vzeile { grid-template-columns: minmax(0, 1fr) auto; }
.pdat-vstand { grid-column: 1 / -1; }
.pdat-nas .table-cell-sub { display: none; }
.nas-zeile:not(.ist-ordner) { flex-wrap: wrap; row-gap: 6px; }
.nas-zeile:not(.ist-ordner) .nas-zeile-name { flex-basis: calc(100% - 30px); }
.nas-zeile:not(.ist-ordner) .nas-zeile-meta { flex: 1; padding-left: 28px; }
.nas-knopf-text { display: none; }
.po-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.po-unter-zeile { grid-template-columns: minmax(0, 1fr) 60px 70px; }
.po-unter-bahn { display: none; }
.wr-buehne { min-height: 180px; }
.reste-hinweis { padding: 16px; }
.reste-titel { font-size: 16px; }
.reste-kopf { flex-wrap: wrap; }
.reste-aktionen { width: 100%; justify-content: flex-end; }
.reste-umschalter { margin-right: auto; }
.eingang-felder { grid-template-columns: minmax(0, 1fr); }
.eingang-bild, .eingang-symbol { width: 64px; height: 64px; }
}
body.dok-seite { margin: 0; background: #f6f3ee; color: var(--color-text); font-family: var(--font); min-height: 100vh; }
.dok-kopf {
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
padding: 14px 24px; background: #fff; border-bottom: 1px solid #e7e5e0; position: sticky; top: 0; z-index: 30;
}
.dok-zurueck { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text-muted); text-decoration: none; justify-self: start; }
.dok-zurueck:hover { color: var(--color-text); }
.dok-zurueck svg { width: 16px; height: 16px; }
.dok-kopf-mitte { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.dok-marke { font-size: 30px; color: #161512; }
.dok-produktion { font-size: 13px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.dok-kette { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 18px 24px 4px; }
.dok-kette-glied {
padding: 6px 14px; border-radius: 999px; border: 1px solid #e0ddd6; background: #fff;
font-size: 13px; color: var(--color-text-muted); text-decoration: none;
}
.dok-kette-glied:hover { color: var(--color-text); border-color: #cfccc4; }
.dok-kette-glied.ist-aktiv { background: #0a6b4f; border-color: #0a6b4f; color: #fff; }
.dok-kette-pfeil { color: #b9b5ad; font-size: 16px; }
.dok-modus { text-align: center; font-size: 12.5px; color: var(--color-text-muted); margin: 6px 24px 0; }
.main.dok-main { max-width: none; margin: 0 auto; padding: 18px 24px 64px; min-height: 0; }
.dok-leer { max-width: 520px; margin: 80px auto; text-align: center; color: var(--color-text-muted); padding: 0 24px; }
.dok-leer h1 { font-size: 20px; color: var(--color-text); }
.dok-gast-typ { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: #0a6b4f; font-weight: var(--weight-medium, 500); }
.dok-gast-titel { margin: 2px 0 0; font-size: 24px; }
.shotdoc-lesen { padding: 8px 10px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; border-right: 1px solid var(--color-border); min-height: 36px; }
.shotdoc-row-kommentar-btn { position: relative; border-left: 1px solid var(--color-border); border-radius: 0; color: var(--color-text-faint); }
.shotdoc-row-kommentar-btn:hover { color: var(--color-accent); background: var(--color-accent-soft); }
.shotdoc-row-kommentar-btn.hat-kommentare { color: var(--color-text-muted); }
.shotdoc-row-kommentar-btn.hat-offene { color: var(--color-accent); }
.shotdoc-row-kommentar-btn svg { width: 15px; height: 15px; }
.shotdoc-row-kommentar-btn .dokk-zahl { position: absolute; top: 6px; right: 3px; }
.shotdoc-row-kommentar-label { display: none; }
.dokk-zahl {
display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px;
border-radius: 999px; background: var(--color-accent); color: #fff; font-size: 10px; font-weight: 600; line-height: 1; margin-left: 4px;
}
.dokk { display: flex; flex-direction: column; gap: 12px; }
.dokk-liste { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow-y: auto; }
.dokk-eintrag { padding: 10px 12px; border-radius: var(--radius-md); background: var(--color-surface-2); border: 1px solid var(--color-border); }
.dokk-eintrag.vom-kunden { border-left: 3px solid var(--color-accent); }
.dokk-eintrag.ist-erledigt { opacity: .55; }
.dokk-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; margin-bottom: 4px; }
.dokk-autor { font-weight: var(--weight-medium, 500); color: var(--color-text); }
.dokk-marke { font-size: 10.5px; padding: 1px 6px; border-radius: 999px; background: var(--color-accent-soft); color: var(--color-accent-strong); }
.dokk-zeile { font-size: 11px; color: var(--color-text-muted); }
.dokk-zeit { color: var(--color-text-faint); }
.dokk-status { margin-left: auto; font-size: 11px; color: var(--color-text-faint); }
.dokk-abhaken { margin-left: auto; font-size: 11.5px; color: var(--color-text-muted); background: none; border: 1px solid var(--color-border); border-radius: 999px; padding: 2px 9px; cursor: pointer; }
.dokk-abhaken:hover { color: var(--color-accent); border-color: var(--color-accent); }
.dokk-text { font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.dokk-leer { margin: 0; font-size: 12.5px; color: var(--color-text-faint); }
.dokk-eingabe { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.dokk-feld { width: 100%; resize: none; font-family: inherit; font-size: 13px; }
.modal.dokk-modal { max-width: 560px; }
.konzept-raster { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; margin-top: var(--space-4, 16px); }
.konzept-papier { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); min-width: 0; }
.konzept-leiste {
display: flex; align-items: center; gap: 2px; padding: 6px 10px; border-bottom: 1px solid var(--color-border);
position: sticky; top: 0; background: var(--color-surface); border-radius: var(--radius-md) var(--radius-md) 0 0; z-index: 2;
}
body.dok-seite .konzept-leiste { top: 61px; }
.konzept-werkzeug {
min-width: 32px; height: 30px; padding: 0 8px; border: none; background: none; border-radius: var(--radius-sm);
color: var(--color-text-muted); font-size: 13px; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.konzept-werkzeug:hover { background: var(--color-surface-2); color: var(--color-text); }
.konzept-werkzeug svg { width: 15px; height: 15px; }
.konzept-trenner { width: 1px; height: 18px; background: var(--color-border); margin: 0 6px; }
.konzept-leiste-rest { flex: 1; }
.konzept-status { font-size: 11.5px; color: var(--color-text-faint); white-space: nowrap; }
.konzept-blatt { padding: 44px 56px 64px; min-height: 60vh; font-size: 15px; line-height: 1.7; outline: none; max-width: 820px; margin: 0 auto; }
.konzept-blatt h1 { font-size: 24px; line-height: 1.3; margin: 28px 0 10px; font-weight: var(--weight-medium, 500); }
.konzept-blatt h2 { font-size: 18px; line-height: 1.35; margin: 22px 0 8px; font-weight: var(--weight-medium, 500); }
.konzept-blatt h3 { font-size: 15.5px; margin: 18px 0 6px; font-weight: var(--weight-medium, 500); }
.konzept-blatt > :first-child { margin-top: 0; }
.konzept-blatt p { margin: 0 0 12px; }
.konzept-blatt ul, .konzept-blatt ol { margin: 0 0 12px; padding-left: 24px; }
.konzept-blatt blockquote { margin: 0 0 12px; padding-left: 14px; border-left: 2px solid var(--color-border); color: var(--color-text-muted); }
.konzept-blatt.ist-leer::before { content: attr(data-leer); color: var(--color-text-faint); pointer-events: none; }
.konzept-konflikt {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px;
background: #fff6e5; border-bottom: 1px solid #f0dcb2; font-size: 13px; color: #6b4a07;
}
.konzept-konflikt span { flex: 1 1 200px; }
.konzept-seite { position: sticky; top: 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px; }
body.dok-seite .konzept-seite { top: 80px; }
.konzept-seite-titel { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 10px; }
.shotdoc-briefing { margin: var(--space-3, 12px) 0 0; display: flex; flex-direction: column; gap: 6px; max-width: 960px; }
.shotdoc-briefing-titel { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.shotdoc-briefing-titel svg { width: 14px; height: 14px; }
.shotdoc-briefing-feld { width: 100%; resize: none; font-family: inherit; font-size: 13px; line-height: 1.5; }
.kz { display: flex; flex-direction: column; gap: 10px; }
.kz-abschnitt { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 6px; }
.kz-doks { display: flex; flex-direction: column; gap: 4px; }
.kz-dok { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 6px 0; cursor: pointer; }
.kz-dok svg { width: 15px; height: 15px; color: var(--color-text-muted); }
.kz-links { display: flex; flex-direction: column; gap: 2px; }
.kz-zeile { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.kz-zeile:last-child { border-bottom: none; }
.kz-wer { flex: 1; min-width: 0; }
.kz-name { font-size: 13.5px; }
.kz-sub { font-size: 11.5px; color: var(--color-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kz-modus { width: auto; min-width: 200px; }
.kz-hinweis { margin: 6px 0 0; font-size: 12px; color: var(--color-text-faint); }
@media (max-width: 900px) {
.konzept-raster { grid-template-columns: 1fr; }
.konzept-seite { position: static; }
.konzept-blatt { padding: 28px 22px 48px; }
.dok-kopf { grid-template-columns: auto 1fr; padding: 10px 16px; }
.dok-kopf-rechts { display: none; }
.dok-kopf-mitte { justify-content: flex-end; }
.dok-produktion { max-width: 45vw; }
body.dok-seite .konzept-leiste { top: 57px; }
.main.dok-main { padding: 14px 12px 48px; }
.shotdoc-row:not(.shotdoc-section-row) .shotdoc-row-kommentar-btn {
display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
margin-top: var(--space-2); padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md);
font-size: 12.5px; font-weight: 600;
}
.shotdoc-row-kommentar-label { display: inline; }
.shotdoc-row-kommentar-btn .dokk-zahl { position: static; }
.shotdoc-lesen { border-right: none; padding: 4px 0; }
.shotdoc-cell:has(> textarea.ist-einzeilig) { flex: 1 1 150px; }
.kz-zeile { flex-wrap: wrap; }
.kz-modus { min-width: 0; width: 100%; }
}
@media (max-width: 640px) {
.dok-marke { font-size: 24px; }
.dok-produktion { display: none; }
.dok-kette { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding: 12px 12px 4px; }
.dok-gast-titel { font-size: 20px; }
.dok-gast-kopf { flex-direction: column; align-items: stretch; gap: 10px; }
.dok-gast-kopf .page-header-actions { justify-content: flex-start; }
}
.dokv-badge { border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; }
.dokv-badge:hover:not(:disabled) { filter: brightness(.96); }
.dokv-badge:disabled { cursor: default; opacity: 1; }
.dokv-pfeil { display: inline-flex; line-height: 1; }
.dokv-pfeil svg { display: block; }
.dok-kette-glied.hat-versionen { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; padding-right: 11px; box-shadow: 0 1px 3px rgba(10,107,79,.25); transition: background .15s, box-shadow .15s; }
.dok-kette-glied.hat-versionen:hover { background: #085a42; border-color: #085a42; color: #fff; box-shadow: 0 2px 8px rgba(10,107,79,.35); }
.dok-kette-glied.hat-versionen .dokv-pfeil { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.2); }
.dokv-menue { position: absolute; z-index: 1200; background: var(--color-surface, #fff); border: 1px solid var(--color-border); border-radius: var(--radius-md, 10px); box-shadow: 0 10px 30px rgba(0,0,0,.14); padding: 6px; max-height: 60vh; overflow-y: auto; }
.dokv-eintrag { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; background: none; border: 0; border-radius: 7px; padding: 7px 10px; cursor: pointer; font-family: inherit; color: var(--color-text); }
.dokv-eintrag:hover { background: var(--color-surface-2); }
.dokv-eintrag.ist-aktiv { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.dokv-eintrag-text { font-size: 13px; font-weight: var(--weight-medium, 500); }
.dokv-eintrag-unter { font-size: 11.5px; color: var(--color-text-muted); }
.dokv-trenner { height: 1px; background: var(--color-border); margin: 4px 2px; }
.dokv-hinweis { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 12px; padding: 9px 14px; border-radius: var(--radius-md, 10px); background: #fff6df; border: 1px solid #f0d99a; color: #6b5000; font-size: 13px; }
.dokv-hinweis.ist-entsperrt { background: #e8f4ee; border-color: #b5d9c6; color: #0a5a42; }
.dokv-hinweis-knoepfe { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.dokv-hinweis-knoepfe svg { width: 13px; height: 13px; vertical-align: -2px; }
.shotdoc-bild-weg { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--color-danger, #c0392b); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.shotdoc-bild-weg svg { width: 14px; height: 14px; }
.shotdoc-bild-weg:hover { background: #fff; }
.dokv-md { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.dokv-md-text { margin: 0; font-size: 13px; color: var(--color-text-muted); line-height: 1.5; }
.dokv-md-wahl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dokv-md-datei { font-size: 12.5px; color: var(--color-text-muted); }
.dokv-md-feld { width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: 12px; resize: vertical; }
.dokv-md .btn svg { width: 14px; height: 14px; vertical-align: -2px; }
.dokv-zeile { display: flex; align-items: center; gap: 2px; border-radius: 7px; }
.dokv-zeile .dokv-eintrag { flex: 1; min-width: 0; }
.dokv-zeile.ist-aktiv { background: var(--color-accent-soft); }
.dokv-zeile.ist-aktiv .dokv-eintrag { background: none; }
.dokv-aktion { flex: none; width: 28px; height: 28px; border: 0; background: none; border-radius: 6px; color: var(--color-text-faint); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .12s; }
.dokv-zeile:hover .dokv-aktion, .dokv-aktion:focus-visible { opacity: 1; }
.dokv-aktion:hover { background: var(--color-surface-2); color: var(--color-text); }
.dokv-aktion svg { width: 13px; height: 13px; }
@media (hover: none) { .dokv-aktion { opacity: 1; } }
.mki { display: flex; flex-direction: column; gap: 12px; }
.mki-einleitung { margin: 0; font-size: 13px; color: var(--color-text-muted); }
.mki-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.mki-thema { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md, 10px); background: var(--color-surface); }
.mki-thema .mki-titel { padding: 6px 9px; font-size: 14px; }
.mki-thema textarea { resize: vertical; font-family: inherit; font-size: 13px; }
.mki-thema-kopf { display: flex; align-items: center; gap: 8px; }
.mki-nr { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent-strong); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.mki-titel { flex: 1; font-weight: 600; }
.mki-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-faint); margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.mki-label svg { width: 12px; height: 12px; }
.mki-warten { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px 10px; text-align: center; }
.mki-warten p { margin: 0; font-size: 13px; color: var(--color-text-muted); }
.mki-balken { width: min(420px, 100%); height: 6px; border-radius: 999px; background: var(--color-surface-2); overflow: hidden; }
.mki-balken-innen { height: 100%; width: 0; background: var(--color-accent); transition: width .4s ease; }
.mki-stand { font-weight: 500; color: var(--color-text) !important; }
.mki-hinweis { font-size: 12px !important; }
.mki-fehler { margin: 0; color: var(--color-danger); }
.shotdoc-table[hidden], .sa-wurzel[hidden] { display: none !important; }
.shotdoc-werkzeuge { margin-top: var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 10px; background: var(--color-surface); border: 1px solid var(--color-border); border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.shotdoc-werkzeuge ~ .shotdoc-table { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.shotdoc-werkzeuge ~ .sa-wurzel { margin-top: 0; }
.shotdoc-werkzeuge-links, .shotdoc-werkzeuge-rechts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.shotdoc-werkzeuge-label { font-size: 12px; color: var(--color-text-muted); margin-left: 8px; }
.shotdoc-werkzeuge-strich { width: 1px; height: 20px; background: var(--color-border); margin: 0 4px; }
.shotdoc-werkzeuge-rechts .btn { background: transparent; border-color: transparent; color: var(--color-accent); font-weight: 500; box-shadow: none; }
.shotdoc-werkzeuge-rechts .btn:hover { background: var(--color-surface-2); }
.shotdoc-werkzeuge-rechts .btn:last-child:not(.btn-compact-label) { color: var(--color-text-muted); }
.shotdoc-plus { display: inline-flex; margin-right: 4px; }
.dt-huelle:empty { display: none; }
.dt-huelle { margin-top: var(--space-4); }
.dt-huelle + .shotdoc-werkzeuge { margin-top: 0; border-radius: 0; }
.dt-wurzel { display: flex; flex-direction: column; }
.dt-leiste { display: flex; align-items: flex-end; gap: 4px; overflow-x: auto; scrollbar-width: thin; border-bottom: 1px solid var(--color-border); }
.dt-reiter { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 9px 14px 10px; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; background: none; font-family: inherit; cursor: pointer; color: var(--color-text-muted); text-align: left; }
.dt-reiter:hover { color: var(--color-text); background: var(--color-surface-2); }
.dt-reiter.ist-aktiv { background: var(--color-surface); border-color: var(--color-border); margin-bottom: -1px; padding-bottom: 11px; color: var(--color-text); }
.dt-reiter-titel { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.dt-reiter-unter { font-size: 11.5px; color: var(--color-text-faint); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.dt-reiter.ist-ungeplant .dt-reiter-titel { color: #9b4d12; }
.dt-leiste-luft { flex: 1 0 8px; }
.dt-neu { flex: none; display: inline-flex; align-items: center; gap: 5px; margin-bottom: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; font-weight: 500; color: var(--color-accent); cursor: pointer; }
.dt-neu:hover { background: var(--color-surface-2); }
.dt-neu svg { width: 14px; height: 14px; }
.dt-kopf { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; padding: 10px 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-top: 0; }
.dt-kopf.ist-hinweis { font-size: 13px; color: var(--color-text-muted); }
.dt-kopf-luft { flex: 1; }
.dt-feld { display: flex; flex-direction: column; gap: 2px; }
.dt-feld-label { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-faint); }
.dt-feld-wert { font-size: 13.5px; font-weight: 600; }
.dt-feld-input { height: 32px; box-sizing: border-box; padding: 0 8px; border: 1px solid var(--color-border); border-radius: 7px; background: var(--color-surface); font: inherit; font-size: 13.5px; font-weight: 500; color: var(--color-text); width: 150px; }
.dt-feld-input.ist-breit { width: 240px; }
.dt-feld-input.ist-schmal { width: 84px; }
.dt-weg svg { width: 16px; height: 16px; }
.ist-zeitvorschlag::placeholder { color: var(--color-text); opacity: .38; }
.shotdoc-lesen.ist-zeitvorschlag { opacity: .45; }
.dt-zeitzelle { display: flex; flex-direction: column; align-items: stretch; }
.dt-tagwahl { align-self: flex-start; display: inline-flex; align-items: center; gap: 2px; margin: 0 6px 6px; height: 22px; padding: 0 6px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); font: inherit; font-size: 11px; color: var(--color-text-muted); cursor: pointer; white-space: nowrap; }
.dt-tagwahl:hover { color: var(--color-text); border-color: var(--color-border-strong, #c9c3b8); }
.dt-tagwahl svg { width: 11px; height: 11px; }
.dt-start svg { width: 14px; height: 14px; }
.shotdoc-menue-eintrag.ist-trenner { border-top: 1px solid var(--color-border); margin-top: 4px; padding-top: 10px; }
.dt-teil-huelle { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; grid-column: 1 / -1; min-width: 0; }
.dt-teil { height: 20px; padding: 0 7px; border-radius: 999px; background: var(--color-warning-soft); color: color-mix(in srgb, var(--color-warning) 72%, var(--color-text)); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; white-space: nowrap; }
.dt-teil-notiz { font-size: 12px; color: var(--color-text-muted); }
.dt-teil-eingabe { width: 100%; min-width: 0; box-sizing: border-box; height: 28px; padding: 0 7px; border: 1px solid var(--color-border); border-radius: 7px; background: var(--color-surface); font: inherit; font-size: 12px; color: var(--color-text); }
.modal.is-drehplan { display: flex; flex-direction: column; max-height: calc(100vh - 2 * var(--space-4)); }
.modal-backdrop.is-drehplan { align-items: center; padding-top: var(--space-4); padding-bottom: var(--space-4); }
.dt-assistent-huelle { display: flex; flex-direction: column; gap: 14px; min-height: 0; flex: 1; }
.dt-assistent { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: auto; }
.dt-assistent-fuss { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--color-border); }
.dt-luft { flex: 1; }
.dt-a-info { font-size: 13px; color: var(--color-text-muted); }
.dt-a-hinweis { margin: 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--color-accent-soft); color: var(--color-accent); font-size: 13px; }
.dt-a-hinweis svg { width: 16px; height: 16px; flex: none; }
.dt-a-kopfzeile, .dt-a-zeile { display: grid; grid-template-columns: 56px 170px minmax(0, 1fr) 110px 40px; gap: 10px; align-items: center; }
.dt-a-kopfzeile { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-faint); padding: 0 10px; }
.dt-a-liste { display: flex; flex-direction: column; gap: 8px; }
.dt-a-zeile { padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 12px; }
.dt-a-nr { font-weight: 700; }
.dt-a-input { height: 36px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--color-border); border-radius: 8px; font: inherit; font-size: 14px; width: 100%; background: var(--color-surface); color: var(--color-text); }
.dt-a-neu { height: 42px; border: 1px dashed var(--color-border-strong, #c9c3b8); border-radius: 12px; background: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--color-accent); display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.dt-a-neu svg { width: 15px; height: 15px; }
.dt-a-haken, .dt-a-termine { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; }
.dt-a-termine { align-items: center; font-size: 13px; color: var(--color-text-muted); }
.dt-a-haken span { display: flex; flex-direction: column; gap: 2px; }
.dt-a-haken small { font-size: 12.5px; color: var(--color-text-muted); }
.dt-spalten { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.dt-spalte { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; border: 1px solid var(--color-border); background: var(--color-surface); min-height: 260px; }
.dt-spalte.ist-ungeplant { border-style: dashed; background: var(--color-surface-2); }
.dt-spalte-kopf { display: flex; flex-direction: column; gap: 1px; padding: 2px 4px 8px; border-bottom: 1px solid var(--color-border); font-size: 14px; }
.dt-spalte-kopf span { font-size: 12px; color: var(--color-accent); font-weight: 500; }
.dt-spalte-liste { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 60px; }
.dt-karte { display: flex; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); cursor: grab; }
.dt-karte-bild { flex: none; width: 64px; height: 36px; border-radius: 6px; object-fit: cover; background: var(--color-surface-2); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--color-text-faint); }
.dt-karte-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dt-karte-titel { font-size: 12.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dt-karte-szene { font-weight: 700; }
.dt-karte-unter { font-size: 11.5px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-karte.sortable-ghost { opacity: .4; }
.shotdoc-header.ist-mittig { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; margin-bottom: 0; }
.shotdoc-header.ist-mittig .shotdoc-kopf-links { justify-self: start; }
.shotdoc-header.ist-mittig .page-header-actions { justify-self: end; flex-wrap: wrap; justify-content: flex-end; }
.shotdoc-header.ist-mittig .page-header-actions .btn { white-space: nowrap; }
.shotdoc-kopf-mitte { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.shotdoc-kopf-mitte .shotdoc-title-input { text-align: center; max-width: 520px; }
.shotdoc-briefing-btn { position: relative; }
.shotdoc-briefing-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); margin-left: 5px; }
.shotdoc-briefing-popup .shotdoc-briefing-feld { width: 100%; min-height: 180px; box-sizing: border-box; }
.shotdoc-plus svg { width: 14px; height: 14px; }
.shotdoc-pfeil { display: inline-flex; margin-left: 4px; }
.shotdoc-pfeil svg { width: 12px; height: 12px; }
.shotdoc-menue-eintrag { flex-direction: row !important; align-items: center !important; gap: 10px !important; text-decoration: none; }
.shotdoc-menue-icon { display: inline-flex; color: var(--color-text-muted); }
.shotdoc-menue-icon svg { width: 16px; height: 16px; }
.shotdoc-menue-eintrag.ist-gefahr, .shotdoc-menue-eintrag.ist-gefahr .shotdoc-menue-icon { color: var(--color-danger, #b3261e); }
.sa-wurzel { margin-top: var(--space-4); }
.kamera-feld { min-width: 0; border-right: 1px solid var(--color-border); }
.kamera-zeilen { display: flex; flex-direction: column; gap: 5px; padding: 8px 9px; font-size: 12.5px; line-height: 1.4; }
.kamera-zeilen.ist-bearbeitbar { cursor: text; border-radius: 6px; }
.kamera-zeilen.ist-bearbeitbar:hover, .kamera-zeilen.ist-bearbeitbar:focus-visible { background: var(--color-bg-alt); outline: none; }
.kamera-zeile { display: flex; gap: 7px; align-items: flex-start; }
.kamera-marke { flex: none; min-width: 46px; height: 19px; padding: 0 5px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; background: var(--color-accent-soft); color: var(--color-accent-strong); font-size: 10px; font-weight: 600; letter-spacing: .02em; }
.kamera-marke.ist-bts { background: var(--color-text); color: var(--color-surface); }
.kamera-marke.ist-leer { background: none; }
.kamera-text { min-width: 0; color: var(--color-text); }
.shotdoc-kennung { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; align-items: center; gap: 4px 6px; padding: 10px 6px 6px 10px; border-right: 1px solid var(--color-border); min-width: 0; }
.shotdoc-szene-badge { display: inline-flex; align-items: center; max-width: 100%; min-height: 22px; padding: 3px 8px; border-radius: 11px; background: var(--color-accent-soft, #dcede5); color: var(--color-accent, #0a6b4f); font-size: 12px; font-weight: 700; line-height: 16px; white-space: normal; overflow-wrap: anywhere; box-sizing: border-box; }
.shotdoc-szene-badge.ist-bearbeitbar { cursor: text; }
.shotdoc-szene-badge.ist-bearbeitbar:hover { box-shadow: inset 0 0 0 1px var(--color-accent, #0a6b4f); }
.shotdoc-szene-badge.ist-leer { background: transparent; color: var(--color-text-faint); box-shadow: inset 0 0 0 1px var(--color-border); }
.shotdoc-kennung-feld.ist-laenge { grid-column: 1 / -1; }
.shotdoc-kennung-nr { font-size: 12px; font-weight: 700; color: var(--color-text); padding: 0 2px; line-height: 22px; }
.shotdoc-kennung-feld textarea, .shotdoc-kennung-feld .shotdoc-lesen { min-height: 0 !important; padding: 2px 5px !important; border-right: 0 !important; }
.shotdoc-kennung-feld.ist-szene textarea, .shotdoc-kennung-feld.ist-szene .shotdoc-lesen { font-weight: 600; }
.shotdoc-kennung-feld.ist-laenge textarea, .shotdoc-kennung-feld.ist-laenge .shotdoc-lesen { font-size: 11.5px !important; color: var(--color-text-muted); }
.shotdoc-info { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-right: 1px solid var(--color-border); min-width: 0; }
.shotdoc-info-feld { display: flex; flex-direction: column; min-width: 0; }
.shotdoc-info-label { padding: 2px 9px 0; font-size: 9.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-faint); }
.shotdoc-info-feld textarea, .shotdoc-info-feld .shotdoc-lesen, .shotdoc-info-feld .kamera-feld { min-height: 0 !important; padding-top: 2px !important; border-right: 0 !important; }
.sa-info-spalte { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--color-border); font-size: 14px; }
.sa-info-schalter { display: flex; align-items: flex-start; gap: 10px; margin-top: 4px; cursor: pointer; }
.sa-info-schalter input { margin-top: 3px; flex: none; }
.sa-info-schalter span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.sa-info-schalter small { font-size: 12.5px; color: var(--color-text-muted); }
.sa-info-spalte .shotdoc-col-actions { position: static; transform: none; opacity: 1; background: none; padding: 0; }
.sa-schalter { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 3px; border-radius: 10px; background: var(--color-bg-alt); }
.sa-schalter-knopf { height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; color: var(--color-text-muted); cursor: pointer; }
.sa-schalter-knopf.ist-aktiv { background: var(--color-surface); color: var(--color-text); font-weight: 500; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.sa-schalter.ist-klein .sa-schalter-knopf { height: 26px; padding: 0 10px; font-size: 12px; }
.sa-leer { color: var(--color-text-muted); font-size: 14px; }
.sa-label { margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-faint); }
.sa-tag { height: 20px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--color-bg-alt); font-size: 11px; color: var(--color-text-muted); }
.sa-luft { flex: 1 1 auto; }
.sa-komm { display: inline-flex; align-items: center; gap: 3px; color: var(--color-accent); font-size: 11.5px; font-weight: 600; }
.sa-komm svg { width: 13px; height: 13px; }
.sa-teile { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0 2px; scrollbar-width: none; }
.sa-teil { flex: none; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); font: inherit; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.sa-teil-kopf { padding: 16px 4px 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); scroll-margin-top: 70px; }
.sa-mobil > .sa-schalter { width: 100%; }
.sa-karten { display: flex; flex-direction: column; gap: 14px; }
.sa-karte { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; }
.sa-karte-bild { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.sa-bild { display: flex; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.sa-bild.ist-leer { align-items: center; justify-content: center; background: var(--color-bg-alt); color: var(--color-text-faint); font-size: 12px; }
.sa-marke { position: absolute; top: 10px; height: 26px; padding: 0 10px; display: flex; align-items: center; border-radius: 999px; font-size: 12px; font-weight: 600; }
.sa-marke.ist-links { left: 10px; background: rgba(20,19,18,.78); color: #fff; }
.sa-marke.ist-rechts { right: 10px; background: rgba(255,255,255,.92); color: #1d1c1a; font-weight: 500; }
.sa-karte-inhalt { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 12px; }
.sa-text { margin: 0; font-size: 15px; line-height: 1.45; white-space: pre-line; }
.sa-vo { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: var(--color-bg-alt); border-radius: 10px; }
.sa-vo-text { font-size: 14.5px; font-style: italic; line-height: 1.4; white-space: pre-line; }
.sa-kamera-text { margin: 0; font-size: 13px; color: var(--color-text-muted); white-space: pre-line; }
.sa-karte .kamera-zeilen { padding: 0; font-size: 13px; }
.sa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-chip { min-height: 26px; padding: 3px 10px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; border: 1px solid var(--color-border); font-size: 12px; color: var(--color-text-muted); }
.sa-chip svg { width: 13px; height: 13px; flex: none; }
.sa-chip.ist-flach { border-color: transparent; background: var(--color-bg-alt); }
.sa-karte-fuss { display: flex; border-top: 1px solid var(--color-border); }
.sa-fuss-knopf { flex: 1 1 auto; height: 46px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--color-text-muted); cursor: pointer; }
.sa-fuss-knopf svg { width: 16px; height: 16px; }
.sa-fuss-knopf.ist-schmal { flex: none; width: 56px; border-left: 1px solid var(--color-border); }
.sa-kasten { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; }
.sa-zeile { width: 100%; display: flex; gap: 12px; padding: 12px 14px; border: 0; border-top: 1px solid var(--color-border); background: none; font: inherit; color: var(--color-text); text-align: left; cursor: pointer; }
.sa-kasten > .sa-zeile:first-child { border-top: 0; }
.sa-zeile.ist-aktiv { background: var(--color-accent-soft); box-shadow: inset 3px 0 0 var(--color-accent); }
.sa-mini { flex: none; width: 112px; height: 63px; object-fit: cover; border-radius: 8px; display: flex; }
.sa-mini.ist-leer { align-items: center; justify-content: center; background: var(--color-bg-alt); color: var(--color-text-faint); font-size: 11px; }
.sa-zeile-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sa-zeile-kopf { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.sa-zeile-beschr { font-size: 13px; line-height: 1.35; color: var(--color-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sa-zeile-motiv { font-size: 11.5px; color: var(--color-text-faint); }
.sa-detail { display: flex; flex-direction: column; gap: 16px; }
.sa-detail-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sa-detail-titel { font-size: 20px; font-weight: 600; }
.sa-detail-motiv { font-size: 13px; color: var(--color-text-muted); }
.sa-detail-pos { font-size: 12.5px; color: var(--color-text-muted); }
.sa-nav { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sa-nav:disabled { opacity: .35; cursor: default; }
.sa-nav svg { width: 18px; height: 18px; }
.sa-detail-oben { display: flex; flex-direction: column; gap: 16px; }
.sa-detail-bilder { display: flex; flex-direction: column; gap: 12px; }
.sa-detail-bild .shotdoc-image-cell { border: 0 !important; padding: 0; }
.sa-detail-bild .shotdoc-image-cell, .sa-detail-bild .shotdoc-image-thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.sa-detail-nav { flex: none; display: flex; align-items: center; gap: 6px; }
.sa-overlay .sa-detail-nav { position: fixed; z-index: 2; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 12px; }
.sa-detail-haupt { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sa-detail-rest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.sa-feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sa-feld-wert textarea, .sa-feld-wert input { width: 100%; box-sizing: border-box; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); padding: 8px 10px; font: inherit; font-size: 14px; line-height: 1.45; color: var(--color-text); resize: none; overflow: hidden; }
.sa-feld-wert textarea:focus { border-color: var(--color-accent); outline: none; }
.sa-feld-wert .shotdoc-lesen { font-size: 14.5px; line-height: 1.45; white-space: pre-line; }
.sa-feld.ist-vo .shotdoc-lesen { font-style: italic; }
.sa-feld-wert .kamera-feld { border: 0; }
.sa-feld-wert .kamera-zeilen { padding: 4px 0; font-size: 13.5px; }
.sa-detail-fuss { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding-top: 6px; border-top: 1px solid var(--color-border); }
.sa-detail-fuss .btn svg { width: 15px; height: 15px; vertical-align: -3px; }
.sa-loeschen { color: var(--color-text-faint); }
.sa-loeschen:hover { color: var(--color-danger); }
.sa-loeschen svg { width: 14px; height: 14px; vertical-align: -2px; }
.sa-overlay { position: fixed; inset: 0; z-index: 90; background: var(--color-surface); display: flex; flex-direction: column; }
.sa-overlay-kopf { flex: none; padding: calc(env(safe-area-inset-top, 0px) + 8px) 8px 6px; border-bottom: 1px solid var(--color-border); }
.sa-zurueck { min-height: 44px; display: inline-flex; align-items: center; gap: 4px; padding: 0 10px 0 4px; border: 0; background: none; font: inherit; font-size: 15px; color: var(--color-text-muted); cursor: pointer; }
.sa-zurueck svg { width: 18px; height: 18px; }
.sa-overlay-inhalt { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px calc(env(safe-area-inset-bottom, 0px) + 24px); }
body.sa-overlay-offen { overflow: hidden; }
.sa-split { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); min-height: 70vh; }
.sa-split-liste { background: var(--color-bg-alt); border-right: 1px solid var(--color-border); overflow-y: auto; max-height: calc(100vh - 220px); padding: 0 10px 12px; position: sticky; top: 0; }
.sa-split-liste .sa-teil-kopf { padding-top: 14px; }
.sa-split-detail { padding: 22px 28px; min-width: 0; }
.sa-detail.ist-breit .sa-detail-titel { font-size: 24px; }
.sa-detail.ist-breit .sa-detail-oben { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.sa-detail.ist-breit .sa-detail-rest { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 16px; border-top: 1px solid var(--color-border); }
.sa-detail.ist-breit .sa-feld.ist-vo .shotdoc-lesen, .sa-detail.ist-breit .sa-feld.ist-vo textarea { font-size: 16px; }
.sa-split.ist-c { grid-template-columns: 200px minmax(0, 1fr); }
.sa-split.ist-c .sa-split-liste { padding: 0; background: var(--color-surface); }
.sa-split.ist-c .sa-teil-kopf { padding: 14px 12px 6px; }
.sa-c-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: baseline; width: 100%; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--color-border); background: none; font: inherit; text-align: left; color: var(--color-text); cursor: pointer; }
.sa-c-zeile.ist-aktiv { background: var(--color-accent-soft); box-shadow: inset 3px 0 0 var(--color-accent); }
.sa-c-zeile.ist-tbd-zeile { box-shadow: inset 3px 0 0 var(--color-danger); }
.sa-c-zeile.ist-erledigt .sa-c-t { opacity: .55; }
.sa-c-n { font-size: 12px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-c-z { font-size: 12px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; text-align: right; }
.sa-c-t { grid-column: 1 / -1; font-size: 13px; line-height: 1.3; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-split.ist-c .sa-split-detail { padding: 20px; }
.sa-detail.ist-c { gap: 14px; }
.sa-c-kopf { display: flex; align-items: center; gap: 10px; }
.sa-c-titelblock { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sa-c-titel { font-size: 22px; font-weight: 600; }
.sa-c-unter { font-size: 13px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-c-done { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--color-border-strong); border-radius: 18px; background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 13.5px; cursor: pointer; flex: none; }
.sa-c-done:disabled { cursor: default; }
.sa-c-kreis { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--color-text-muted); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; color: transparent; }
.sa-c-done.ist-an { border-color: var(--color-accent); color: var(--color-accent); }
.sa-c-done.ist-an .sa-c-kreis { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.sa-detail.ist-c .sa-nav { width: 36px; height: 36px; border-radius: 9px; flex: none; }
.sa-c-raster { display: grid; gap: 10px; }
.sa-c-feld { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sa-c-feld:focus-within { border-color: var(--color-accent); }
.sa-c-feld .sa-label { display: flex; align-items: center; gap: 6px; }
.sa-c-marke { font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--color-accent); background: var(--color-accent-soft); border-radius: 6px; padding: 2px 7px; }
.sa-c-feld .sa-feld-wert textarea, .sa-c-feld .sa-feld-wert input { border: 0; background: transparent; padding: 0; border-radius: 0; font-size: 15px; }
.sa-c-feld .sa-feld-wert .shotdoc-lesen { font-size: 15px; }
.sa-c-feld.ist-vo .shotdoc-lesen { font-style: italic; }
.sa-c-feld.ist-eine-marke .kamera-marke { display: none; }
.sa-c-feld .kamera-zeilen { padding: 0; font-size: 15px; }
.sa-c-feld .shotdoc-nurlesen { padding: 0; font-size: 15px; color: var(--color-text); }
.sa-detail.ist-c .sa-detail-bild .shotdoc-image-cell { align-items: stretch; }
.sa-detail.ist-c .sa-detail-bild .shotdoc-image-add, .sa-detail.ist-c .sa-detail-bild .shotdoc-image-gen { height: auto; }
@media (max-width: 900px) {
.reste-personen { grid-template-columns: minmax(0, 1fr); }
.sa-desktop-schalter { display: none; }
.sa-wurzel { margin-top: var(--space-2); }
.shotdoc-werkzeuge { margin-top: var(--space-2); border-bottom: 1px solid var(--color-border); border-radius: var(--radius-md); }
.shotdoc-header.ist-mittig { grid-template-columns: minmax(0, 1fr) auto; }
.shotdoc-header.ist-mittig .shotdoc-kopf-mitte { grid-column: 1 / -1; grid-row: 2; }
.dt-huelle { margin-top: var(--space-2); }
.dt-huelle + .shotdoc-werkzeuge { margin-top: var(--space-2); border-radius: var(--radius-md); }
.dt-kopf { border-radius: 0 0 var(--radius-md) var(--radius-md); gap: 10px; }
.dt-feld-input, .dt-feld-input.ist-breit { width: 100%; }
.dt-feld { flex: 1 1 40%; }
.dt-kopf:not(.ist-hinweis) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.dt-kopf-luft { display: none; }
.dt-reiter { padding: 8px 11px 9px; }
.dt-reiter-unter { max-width: 140px; }
.dt-a-kopfzeile { display: none; }
.dt-a-zeile { grid-template-columns: 44px minmax(0, 1fr) 40px; }
.dt-a-zeile .dt-a-input.ist-breit, .dt-a-zeile .dt-a-input.ist-schmal { grid-column: 2; }
.shotdoc-werkzeuge ~ .sa-wurzel { margin-top: var(--space-2); }
.sa-detail-rest { grid-template-columns: minmax(0, 1fr); }
}
.tp-wurzel { margin: 0 0 var(--space-5); }
.tp-wurzel.ist-leer { display: flex; justify-content: flex-end; margin: 14px 0 var(--space-4); }
.tp-start, .tp-neu { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--color-accent); cursor: pointer; padding: 4px 8px; border-radius: 8px; white-space: nowrap; }
.tp-start { color: var(--color-text-muted); font-size: 13px; padding: 7px 14px; border: 1px solid var(--color-border-strong); border-radius: 999px; background: var(--color-surface); }
.tp-start:hover { border-color: var(--color-accent); }
.tp-start:hover, .tp-neu:hover { background: var(--color-surface-2); color: var(--color-accent); }
.tp-start svg, .tp-neu svg { width: 13px; height: 13px; }
.tp-neu { align-self: center; margin-left: 4px; }
.tp-leiste { display: flex; align-items: flex-end; gap: 4px; overflow-x: auto; scrollbar-width: thin; border-bottom: 1px solid var(--color-border); }
.tp-reiter { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 9px 14px 10px; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; background: none; font: inherit; color: var(--color-text-muted); cursor: pointer; text-align: left; }
.tp-reiter:hover { background: var(--color-surface-2); color: var(--color-text); }
.tp-reiter.ist-aktiv { background: var(--color-surface); border-color: var(--color-border); margin-bottom: -1px; padding-bottom: 11px; color: var(--color-text); }
.tp-reiter b { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.tp-reiter small { font-size: 11.5px; color: var(--color-text-faint); white-space: nowrap; }
.tp-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #c9c3b8; display: inline-block; }
.tp-dot.ist-s2 { background: #5b7fb5; } .tp-dot.ist-s3 { background: #b25e09; } .tp-dot.ist-s4 { background: #7a62ad; }
.tp-dot.ist-s5 { background: var(--color-accent); } .tp-dot.ist-s6 { background: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-soft); }
.tp-status { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--color-surface-2); color: var(--color-text-muted); white-space: nowrap; }
.tp-status.ist-s2 { background: #e6eefb; color: #3b5c8f; } .tp-status.ist-s3 { background: #fbeedd; color: #9b4d12; } .tp-status.ist-s4 { background: #efe8f7; color: #6d5a9e; }
.tp-status.ist-s5 { background: var(--color-accent-soft); color: var(--color-accent); } .tp-status.ist-s6 { background: var(--color-accent); color: #fff; }
.tp-flaeche { background: var(--color-surface); border: 1px solid var(--color-border); border-top: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); padding: 14px; }
.tp-flaeche-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.tp-flaeche-kopf > b { font-size: 15px; font-weight: 600; }
.tp-leise { color: var(--color-text-faint); font-size: 12.5px; }
.tp-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tp-kachel { border: 1px solid var(--color-border); border-radius: 12px; padding: 11px 13px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.tp-kachel h5 { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--color-text-faint); }
.tp-mini { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--color-accent); cursor: pointer; }
.tp-li { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.tp-li-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-li small { color: var(--color-text-faint); white-space: nowrap; font-size: 12px; }
.tp-zahl { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tp-zahl small { font-size: 12px; font-weight: 400; color: var(--color-text-muted); }
.tp-flaeche.ist-gesamt { background: var(--color-bg-alt); padding: 18px; }
.tp-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.tp-karte { display: flex; flex-direction: column; gap: 10px; text-align: left; padding: 14px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); font: inherit; color: inherit; cursor: pointer; min-width: 0; }
.tp-karte:hover { border-color: var(--color-accent); }
.tp-karte-kopf { display: flex; align-items: flex-start; gap: 8px; }
.tp-karte-kopf b { flex: 1; font-size: 14px; font-weight: 600; min-width: 0; }
.tp-karte-kz { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--color-text-faint); }
.tp-karte-meta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 10px; font-size: 12px; color: var(--color-text-muted); }
.tp-karte-meta > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-karte-meta b { font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }
.tp-plan { margin-top: 18px; display: grid; grid-template-columns: 200px minmax(0, 1fr); font-size: 12px; }
.tp-plan-kw { display: grid; grid-template-columns: repeat(var(--wochen), minmax(0, 1fr)); color: var(--color-text-faint); font-size: 10.5px; font-weight: 600; border-bottom: 1px solid var(--color-border-strong); padding-bottom: 4px; font-variant-numeric: tabular-nums; }
.tp-plan-kw span { text-align: center; }
.tp-plan-monate { position: relative; height: 24px; }
.tp-plan-monat { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding-left: 8px; font-size: 11.5px; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; box-sizing: border-box; }
.tp-plan-monat:nth-child(even) { background: color-mix(in srgb, var(--color-text) 4%, transparent); border-radius: 6px 6px 0 0; }
.tp-plan-monatslinie { position: absolute; top: 0; bottom: -1px; width: 0; border-left: 1.5px solid var(--color-text-faint); opacity: .55; z-index: 1; }
.tp-plan-name { display: flex; align-items: center; gap: 7px; font: inherit; font-size: 12.5px; font-weight: 500; color: inherit; background: none; border: 0; border-bottom: 1px solid var(--color-border-strong); padding: 9px 8px 9px 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; cursor: pointer; }
.tp-plan-name:hover { color: var(--color-accent); }
.tp-plan-spur { position: relative; min-height: 34px; border-bottom: 1px solid var(--color-border-strong);
background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / var(--wochen) - 1px), var(--color-border-strong) calc(100% / var(--wochen) - 1px), var(--color-border-strong) calc(100% / var(--wochen))); }
.tp-plan-balken { position: absolute; top: 9px; height: 16px; border-radius: 8px; opacity: .85; }
.tp-plan-balken.ist-vorbei { background: var(--color-text-faint); opacity: .35; }
.tp-plan-ring { position: absolute; top: 11px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--color-surface); border: 3px solid #c8423b; z-index: 1; }
.tp-plan-heute { position: absolute; top: 0; bottom: -1px; width: 2px; margin-left: -1px; background: var(--color-accent); z-index: 2; }
.tp-dialog { display: flex; flex-direction: column; gap: 12px; }
.tp-vorlagen { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-vorlage { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 12.5px; cursor: pointer; }
.tp-vorlage:hover { border-color: var(--color-accent); color: var(--color-accent); }
.tp-haken { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.tp-weg { color: var(--color-danger); }
.tp-zuordnen { display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow-y: auto; }
.tp-zeile { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--color-border); cursor: pointer; }
.tp-zeile.ist-erledigt .tp-zeile-text b { color: var(--color-text-faint); text-decoration: line-through; }
.tp-zeile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tp-zeile-text b { font-weight: 500; font-size: 13.5px; }
.tp-zeile-text small, .tp-anders { font-size: 12px; color: var(--color-text-faint); }
.tp-wahl { border: 1px solid var(--color-accent); background: var(--color-accent-soft); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 6px; }
.tp-wahl-titel { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--color-accent); }
.tp-wahl-liste { display: flex; flex-direction: column; gap: 4px; }
.tp-wahl-zeile { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.tp-wahl-zeile b { font-weight: 600; }
.tp-wahl-hinweis { margin: 0; font-size: 12.5px; color: var(--color-text-muted); }
.tp-wahl-allgemein { font-size: 12.5px; color: var(--color-text-muted); padding-top: 2px; border-top: 1px dashed var(--color-accent); margin-top: 2px; }
.tp-wz { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 12.5px; color: var(--color-text-muted); }
.tp-wz b { text-align: right; color: var(--color-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.tp-wz .tp-wz-summe { border-top: 1px solid var(--color-border); padding-top: 3px; margin-top: 2px; color: var(--color-text); font-weight: 600; }
.tp-wz b.tp-wz-summe.ist-minus { color: var(--color-danger); }
.pd-teile-marke { flex: none; display: inline-flex; align-items: center; gap: 3px; font: inherit; font-size: 10.5px; font-weight: 600; padding: 1px 8px 1px 5px; border: 0; border-radius: 999px; background: var(--color-bg-alt); color: var(--color-text-muted); white-space: nowrap; cursor: pointer; }
.pd-teile-marke:hover, .pd-teile-marke.ist-offen { background: var(--color-accent-soft); color: var(--color-accent); }
.pd-teile-pfeil { display: inline-flex; transform: rotate(-90deg); transition: transform .15s ease; }
.pd-teile-pfeil svg { width: 11px; height: 11px; }
.pd-teile-marke.ist-offen .pd-teile-pfeil { transform: none; }
.liste-produktionen tr.pd-teil-zeile > td { background: var(--color-bg-alt); padding-top: 7px; padding-bottom: 7px; font-size: 13px; cursor: pointer; }
.liste-produktionen tr.pd-teil-zeile:hover > td { background: var(--color-accent-soft); }
.liste-produktionen tr.pd-teil-zeile.ist-treffer > td { box-shadow: inset 0 0 0 9999px rgba(10, 107, 79, .08); }
.pd-teil-titel { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pd-teil-nr { flex: none; min-width: 38px; font-weight: 600; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.pd-teil-name { position: relative; padding-left: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-teil-name::before { content: ""; position: absolute; left: 3px; top: -6px; width: 9px; height: 14px; border-left: 1.5px solid var(--color-border-strong); border-bottom: 1.5px solid var(--color-border-strong); border-bottom-left-radius: 4px; }
.pd-teil-name.ist-leise { color: var(--color-text-muted); }
.pd-teil-rest-innen { display: flex; align-items: center; gap: 16px; }
.pd-teil-zeit { flex: 1; min-width: 0; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-teil-geld { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-text-muted); }
@media (max-width: 720px) {
.liste-produktionen tr.pd-teil-zeile:not([hidden]) { display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: var(--color-bg-alt); }
.liste-produktionen tr.pd-teil-zeile > td { padding: 0; border: 0; background: none; }
.liste-produktionen tr.pd-teil-zeile > td.pd-teil-vorn, .pd-teil-geld { display: none; }
.liste-produktionen tr.pd-teil-zeile > td:nth-child(2) { flex: 1; min-width: 0; }
.pd-teil-rest-innen { gap: 8px; }
}
@media (max-width: 900px) {
.tp-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tp-plan { grid-template-columns: 120px minmax(0, 1fr); }
}
@media (max-width: 640px) {
.tp-kacheln { grid-template-columns: minmax(0, 1fr); }
.tp-wurzel.ist-leer { margin-top: 0; }
}
.dt-reiter-kurz, .dt-kurz, .sa-mobil-werkzeug { display: none; }
.dt-blatt { display: flex; flex-direction: column; gap: 12px; }
.dt-blatt-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dt-blatt-feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dt-blatt-input, .dt-blatt-input.dt-feld-input { width: 100%; height: 40px; font-size: 16px; }
.dt-blatt-fertig { width: 100%; justify-content: center; }
.dt-blatt-weg { border: 0; background: none; font: inherit; font-size: 14px; color: var(--color-danger); padding: 6px; cursor: pointer; }
@media (max-width: 640px) {
.shotdoc-header.ist-mittig { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; }
.shotdoc-header.ist-mittig .shotdoc-kopf-mitte { grid-column: 2; grid-row: 1; }
.shotdoc-header.ist-mittig .nur-breit { display: none; }
.dt-leiste { border-bottom: 0; gap: 6px; padding-bottom: 2px; }
.dt-reiter, .dt-reiter.ist-aktiv { border: 1px solid var(--color-border); border-radius: 12px; padding: 6px 11px; margin: 0; background: var(--color-surface); }
.dt-reiter.ist-aktiv { background: var(--color-text); border-color: var(--color-text); color: var(--color-surface); }
.dt-reiter-titel, .dt-reiter-unter { display: none; }
.dt-reiter-kurz { display: flex; flex-direction: column; line-height: 1.25; font-size: 13px; white-space: nowrap; }
.dt-reiter-kurz b { font-weight: 600; }
.dt-reiter-kurz small { font-size: 11px; opacity: .7; }
.dt-reiter.ist-ungeplant:not(.ist-aktiv) .dt-reiter-kurz b { color: var(--color-danger); }
.dt-neu { margin-bottom: 0; align-self: center; }
.dt-kopf:not(.ist-hinweis) { display: none; }
.dt-kopf.ist-hinweis { margin-top: 8px; border-top: 1px solid var(--color-border); border-radius: var(--radius-md); }
.dt-kurz { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; padding: 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.dt-kurz-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 14px; color: var(--color-text-muted); }
.dt-kurz-meta b { font-weight: 600; color: var(--color-text); }
.dt-kurz-bearbeiten { margin-left: auto; border: 0; background: none; padding: 0; font: inherit; font-weight: 500; color: var(--color-accent); cursor: pointer; }
.dt-kurz-knoepfe { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.dt-kurz-knopf { width: 100%; justify-content: center; }
.dt-kurz-knopf svg { width: 16px; height: 16px; }
.shotdoc-werkzeuge { display: none; }
.sa-mobil-kopf { display: flex; align-items: center; gap: 8px; }
.sa-mobil-kopf > .sa-schalter { flex: 1; }
.sa-mobil-werkzeug { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; min-height: 40px; padding: 0; }
.sa-mobil-werkzeug svg { width: 18px; height: 18px; }
}
.beleg-text-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.beleg-text-kopf > label { margin-bottom: 0; }
.eb-schalter {
display: flex; gap: 2px; padding: 3px; margin-left: auto;
border-radius: 10px; background: var(--color-bg-alt);
}
.eb-modus {
height: 32px; padding: 0 16px; border: 0; border-radius: 8px;
background: transparent; color: var(--color-text-muted, #57534c);
font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.eb-modus:hover { color: var(--color-text); }
.eb-modus.ist-an { background: var(--color-surface); color: var(--color-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.eb-platz:empty { display: none; }
.eb-platz { margin-bottom: 12px; }
.eb-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .eb-karten { grid-template-columns: minmax(0, 1fr); } }
.eb-karte {
display: flex; flex-direction: column; gap: 14px; padding: 14px 16px;
border-radius: 14px; background: var(--color-surface-2); border: 1px solid var(--color-border);
min-width: 0;
}
.eb-karte.ist-film { background: var(--color-accent-soft); border-color: color-mix(in srgb, var(--color-accent) 25%, transparent); }
.eb-karte-kopf { display: flex; align-items: center; min-height: 28px; }
.eb-karte-titel { font-size: 13px; font-weight: 600; flex: 1 1 auto; }
.eb-karte.ist-film .eb-karte-titel { color: var(--color-accent); }
.eb-weg {
width: 28px; height: 28px; border: 0; border-radius: 8px; background: none;
color: var(--color-text-faint); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.eb-weg:hover { background: var(--color-bg-alt); color: var(--color-text); }
.eb-weg svg { width: 14px; height: 14px; }
.eb-feld { display: flex; flex-direction: column; gap: 6px; }
.eb-feld-titel {
font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
color: var(--color-text-faint);
}
.eb-reihe { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.eb-auswahl, .eb-zahl {
height: 34px; box-sizing: border-box; padding: 0 8px; font: inherit; font-size: 13px;
border: 1px solid var(--color-border-strong); border-radius: 8px;
background: var(--color-surface); color: var(--color-text);
}
.eb-auswahl.ist-breit { flex: 1 1 120px; min-width: 0; }
.eb-zahl { width: 52px; text-align: center; }
.eb-strich { color: var(--color-text-faint); font-size: 13px; }
.eb-wort { font-size: 13px; }
.eb-formate { display: flex; gap: 4px; flex-wrap: wrap; }
.eb-format {
height: 32px; padding: 0 11px; border-radius: 7px; cursor: pointer;
border: 1px solid var(--color-border-strong); background: var(--color-surface);
color: var(--color-text); font: inherit; font-size: 12px; font-weight: 600;
}
.eb-format.ist-an { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.eb-plus {
min-height: 120px; border: 1.5px dashed var(--color-border-strong); border-radius: 14px;
background: none; color: var(--color-text); font: inherit; font-size: 13px; font-weight: 500;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
}
.eb-plus:hover { background: var(--color-surface-2); }
.eb-plus svg { width: 18px; height: 18px; }
.eb-karten .eb-auswahl { width: auto; min-height: 0; }
.eb-karten .eb-auswahl.ist-breit { width: auto; flex: 1 1 120px; }
.eb-karten .eb-zahl { width: 52px; min-height: 0; flex: none; }
.dz-zwei { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 20px; align-items: start; }
.dz-liste {
display: flex; flex-direction: column; gap: 6px; padding: 12px;
position: sticky; top: 12px; max-height: calc(100vh - 170px); overflow: auto;
}
.dz-suche {
display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; margin-bottom: 4px;
border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-2); color: var(--color-text-faint);
}
.dz-suche svg { width: 15px; height: 15px; flex: none; }
.dz-suche input { border: 0; outline: none; background: none; font: inherit; font-size: 13px; flex: 1 1 auto; min-width: 0; color: var(--color-text); padding: 0; height: auto; }
.dz-liste-zeilen { display: flex; flex-direction: column; gap: 2px; }
.dz-liste-leer { font-size: 12.5px; color: var(--color-text-faint); padding: 8px 4px; margin: 0; }
.dz-prod {
display: flex; align-items: center; gap: 12px; padding: 10px 12px; width: 100%;
border: 1px solid transparent; border-radius: 11px; background: none; text-align: left;
font: inherit; color: inherit; cursor: pointer;
}
.dz-prod:hover { background: var(--color-surface-2); }
.dz-prod.ist-aktiv { background: var(--color-accent-soft); border-color: color-mix(in srgb, var(--color-accent) 28%, transparent); }
.dz-prod[hidden] { display: none; }
.dz-prod-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dz-prod-titel { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-prod-titel b { font-weight: 600; }
.dz-prod-kunde { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-prod-rechts { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.dz-prod-datum { font-size: 11px; color: var(--color-text-faint); }
.dz-marken { display: flex; gap: 4px; }
.shotdoc-badge.ist-kurz { padding: 2px 6px; gap: 3px; font-size: 11px; font-weight: 700; }
.shotdoc-badge.ist-kurz svg { width: 11px; height: 11px; }
.dz-detail { padding: 22px 26px 24px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.dz-kopf { display: flex; align-items: flex-start; gap: 10px; }
.dz-kopf-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dz-kopf-zeile { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); }
.dz-kopf h2 { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.15; }
.dz-gruppen { display: flex; flex-direction: column; gap: 18px; }
.dz-gruppe { display: flex; flex-direction: column; gap: 8px; }
.dz-gruppe-kopf { display: flex; align-items: center; gap: 10px; }
.dz-gruppe-kopf .stat-icon { width: 28px; height: 28px; border-radius: 8px; }
.dz-gruppe-kopf .stat-icon svg { width: 15px; height: 15px; }
.dz-gruppe-titel { font-size: 14px; font-weight: 600; }
.dz-gruppe-zahl { font-size: 12px; color: var(--color-text-faint); flex: 1 1 auto; }
.dz-neu { color: var(--color-accent); }
.dz-zeile {
display: flex; align-items: center; gap: 12px; padding: 11px 14px;
border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface-2);
color: inherit; text-decoration: none;
}
.dz-zeile:hover { border-color: var(--color-border-strong); background: var(--color-surface); }
.dz-zeile-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dz-zeile-titel { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.dz-zeile-meta { font-size: 12px; color: var(--color-text-muted); }
.dz-zeile-pfeil { color: var(--color-text-faint); display: flex; }
.dz-zeile-pfeil svg { width: 16px; height: 16px; }
.dz-chip {
flex: none; height: 24px; padding: 0 9px; border-radius: 999px; display: flex; align-items: center; gap: 5px;
background: var(--color-accent-soft); color: var(--color-accent); font-size: 11.5px; font-weight: 600;
}
.dz-chip svg { width: 11px; height: 11px; }
.dz-leer { margin: 0; font-size: 13px; }
.dz-fehlend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--color-border); }
.dz-fehlend-text { font-size: 12.5px; color: var(--color-text-muted); margin-right: 4px; }
.dz-fehlend-knopf {
height: 32px; padding: 0 11px; border: 1px dashed var(--color-border-strong); border-radius: 9px;
background: none; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--color-text);
display: flex; align-items: center; gap: 6px; cursor: pointer;
}
.dz-fehlend-knopf:hover { background: var(--color-surface-2); }
.dz-fehlend-knopf svg { width: 13px; height: 13px; color: var(--color-accent); }
.dz-fehlend-knopf.tone-success svg { color: var(--color-success); }
.dz-fehlend-knopf.tone-warning svg { color: var(--color-warning); }
.dz-fehlend-knopf.tone-danger svg { color: var(--color-danger); }
.dz-fehlend-knopf.tone-violet svg { color: var(--color-accent-2); }
.eg-hg {
position: fixed; inset: 0; z-index: 95; background: rgba(20, 18, 15, 0); transition: background .2s ease;
display: flex; flex-direction: column; justify-content: flex-end;
}
.eg-hg.ist-offen { background: rgba(20, 18, 15, .45); }
.eg-blatt {
background: var(--color-surface); color: var(--color-text); border-radius: 22px 22px 0 0;
padding: 8px 20px calc(22px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 16px;
max-height: calc(100dvh - 40px); overflow-y: auto; box-shadow: 0 -10px 40px rgba(0,0,0,.18);
transform: translateY(100%); transition: transform .22s ease;
}
.eg-hg.ist-offen .eg-blatt { transform: none; }
.eg-hg.ist-hoch .eg-blatt { height: calc(100dvh - 54px); padding: 10px 0 0; gap: 0; }
.eg-griff { align-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--color-border-strong); flex: none; }
.eg-kopf { display: flex; align-items: center; gap: 10px; }
.eg-kopf h2 { margin: 0; font-size: 19px; font-weight: 600; flex: 1 1 auto; line-height: 1.25; }
.eg-zu {
width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; background: var(--color-bg-alt); color: var(--color-text-muted);
display: flex; align-items: center; justify-content: center;
}
.eg-zu svg { width: 15px; height: 15px; }
.eg-inhalt { display: flex; flex-direction: column; gap: 18px; }
.eg-datei { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--color-surface-2); }
.eg-datei-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.eg-datei-text strong { font-size: 14.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.eg-datei-text small, .eg-hinweis { font-size: 12.5px; color: var(--color-text-muted); }
.eg-hinweis { margin: 6px 0 0; }
.eg-vorschau { width: 48px; height: 60px; flex: none; border-radius: 8px; object-fit: cover; background: var(--color-bg-alt); }
.eg-vorschau.ist-typ {
display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
color: var(--color-text-muted); border: 1px solid var(--color-border); box-sizing: border-box; background: var(--color-surface);
}
.eg-vorschau.ist-pdf { color: var(--color-danger); }
.eg-vorschau.ist-gross { width: 100%; height: 100%; }
.eg-streifen { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 2px; }
.eg-streifen-kachel {
position: relative; flex: none; width: 104px; display: flex; flex-direction: column; gap: 5px; padding: 0; border: 0; background: none;
text-align: left; font: inherit; color: inherit; opacity: .45;
}
.eg-streifen-kachel.ist-an { opacity: 1; }
.eg-streifen-kachel > .eg-vorschau { height: 104px; border-radius: 12px; }
.eg-streifen-kachel small { font-size: 11.5px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eg-streifen-haken {
position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box;
border: 2px solid #fff; background: rgba(0,0,0,.25); color: #fff; display: flex; align-items: center; justify-content: center;
}
.eg-streifen-kachel.ist-an .eg-streifen-haken { background: var(--color-accent); }
.eg-streifen-haken svg { width: 11px; height: 11px; }
.eg-streifen-kachel:not(.ist-an) .eg-streifen-haken svg { visibility: hidden; }
.eg-abschnitt { display: flex; flex-direction: column; gap: 8px; }
.eg-label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.eg-ziele { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; padding: 4px; gap: 4px; border-radius: 12px; background: var(--color-bg-alt); }
.eg-ziele button {
height: 44px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 14px; color: var(--color-text-muted);
}
.eg-ziele button[aria-pressed="true"] { background: var(--color-surface); color: var(--color-text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.eg-ziele button:disabled { opacity: .4; }
.eg-zeile {
display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 6px 14px; border: 1px solid var(--color-border-strong);
border-radius: 12px; background: var(--color-surface); text-align: left; font: inherit; color: inherit; width: 100%;
}
.eg-zeile-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.eg-zeile-text strong { font-size: 15px; font-weight: 600; }
.eg-zeile-text small { font-size: 12.5px; color: var(--color-text-muted); }
.eg-zeile-leer { font-size: 15px; color: var(--color-text-muted); }
.eg-zeile-pfeil { color: var(--color-text-faint); display: flex; }
.eg-zeile-pfeil svg { width: 16px; height: 16px; }
.eg-fuss { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.eg-los {
height: 52px; border: 0; border-radius: 14px; background: var(--color-accent); color: #fff; font: inherit; font-size: 16px; font-weight: 600;
padding: 0 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.eg-los:disabled { opacity: .55; }
.eg-fuss-zeile { display: flex; justify-content: space-between; }
.eg-text { height: 40px; border: 0; background: none; font: inherit; font-size: 14px; color: var(--color-text-muted); padding: 0 4px; }
.eg-text.ist-gefahr { color: var(--color-danger); }
.eg-text:disabled { opacity: .5; }
.eg-wahl-leiste { display: flex; align-items: center; padding: 4px 12px 10px; }
.eg-wahl-leiste h2 { margin: 0; font-size: 17px; font-weight: 600; flex: 1 1 auto; text-align: center; padding-right: 84px; }
.eg-zurueck {
display: flex; align-items: center; gap: 2px; height: 40px; padding: 0 8px; border: 0; background: none;
font: inherit; font-size: 15px; font-weight: 500; color: var(--color-accent); width: 84px;
}
.eg-zurueck svg { width: 16px; height: 16px; }
.eg-suche {
display: flex; align-items: center; gap: 8px; height: 44px; margin: 0 16px 8px; padding: 0 14px; border-radius: 12px;
background: var(--color-bg-alt); color: var(--color-text-muted); flex: none;
}
.eg-suche svg { width: 16px; height: 16px; flex: none; }
.eg-suche input { border: 0; outline: none; background: none; font: inherit; font-size: 16px; flex: 1 1 auto; min-width: 0; color: var(--color-text); padding: 0; height: auto; }
.eg-wahl-liste { flex: 1 1 auto; overflow-y: auto; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.eg-wahl-kopf { padding: 14px 20px 6px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.eg-wahl-zeile {
display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 6px 20px; border: 0;
border-bottom: 1px solid var(--color-border); background: none; text-align: left; font: inherit; color: inherit;
}
.eg-wahl-zeile.ist-an { background: var(--color-accent-soft); }
.eg-wahl-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.eg-wahl-text strong { font-size: 15px; font-weight: 600; }
.eg-wahl-text small { font-size: 12.5px; color: var(--color-text-muted); }
.eg-haken { color: var(--color-accent); display: flex; }
.eg-haken svg { width: 18px; height: 18px; }
.eg-leer { padding: 20px; margin: 0; color: var(--color-text-muted); font-size: 14px; }
@media (min-width: 901px) and (pointer: coarse) {
.termin-aktionen, .stock-aktionen, .asset-kachel-tasten, .kanban-card-delete,
.board-picker-actions, .shotdoc-image-del, .inspiration-card-remove,
.branding-tile-actions, .portfolio-card-aktionen, .dokv-aktion,
.avatar-remove-btn { opacity: 1; pointer-events: auto; }
.shotdoc-image-regen:not(:disabled) { opacity: 1; }
.branding-chip-aktionen { display: inline-flex; }
.termin-zeile .termin-kunde-knopf, .pd-simple-row-delete, .pd-simple-row-note,
.chat-message-delete-btn, .production-tab-close { opacity: 1; }
.btn { min-height: 44px; }
.btn-ghost { min-height: 44px; min-width: 44px; justify-content: center; }
.table-scroll tbody tr:not(.datatable-expanded-row) > td:not(.karte-umbruch) { height: 44px; }
.table-scroll td.text-right { white-space: nowrap; }
.shotdoc-header.ist-mittig { grid-template-columns: auto minmax(0, 1fr) auto; }
.shotdoc-header.ist-mittig .page-header-actions { flex-wrap: nowrap; }
}
@media (min-width: 901px) and (pointer: coarse) and (orientation: portrait) {
.app-shell, body.sidebar-collapsed .app-shell { grid-template-columns: 1fr; }
.right-rail { display: none; }
.sidebar {
position: fixed;
inset: 0 auto 0 0;
width: var(--sidebar-width);
transform: translateX(-100%);
transition: transform var(--dur-base) var(--ease);
}
body.sidebar-open { overflow: hidden; }
body.sidebar-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-lg); }
body.sidebar-open .sidebar-backdrop {
display: block;
position: fixed;
inset: 0;
background: rgba(15, 15, 35, 0.45);
z-index: 45;
}
.topbar { display: flex; }
.sidebar-collapse-toggle { display: none; }
.table-actions-desktop { display: none; }
.table-actions-mobile-trigger { display: inline-flex; }
.table-scroll td.col-actions.hat-karte-mehr { width: 1%; white-space: nowrap; text-align: right; }
.table-scroll td.col-actions.hat-karte-mehr > :not(.karte-mehr-knopf) { display: none !important; }
td.col-actions > .karte-mehr-knopf {
display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
border: 0; background: none; color: var(--color-text-muted); cursor: pointer; padding: 0; border-radius: var(--radius-sm);
}
td.col-actions > .karte-mehr-knopf svg { width: 18px; height: 18px; }
.shotdoc-header.ist-mittig .page-header-actions .btn-label-text { display: none; }
.shotdoc-header.ist-mittig .page-header-actions .btn { padding-inline: 12px; }
.assets-liste { min-width: 220px; }
.assets-kopf, .assets-zeile { grid-template-columns: 38px minmax(0, 1fr) 70px auto; }
.assets-kopf > :nth-child(3), .assets-kopf > :nth-child(4),
.assets-zeile > :nth-child(3), .assets-zeile > :nth-child(4) { display: none; }
.assets-zeile-meta { display: block; margin-top: 2px; font-size: var(--text-meta); color: var(--color-text-faint); }
.table-scroll .tablet-aus { display: none; }
}
.shy-punkt {
display: inline-block;
width: 0.16em;
height: 0.16em;
margin-left: 0.03em;
border-radius: 50%;
background: var(--color-accent);
vertical-align: baseline;
}
.login-wortmarke .shy-punkt { background: #4cc79a; }
@keyframes shy-puls {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.7); opacity: 0.55; }
}
body.shy-arbeitet .sidebar-wortmarke .shy-punkt,
body.shy-arbeitet .topbar-wortmarke .shy-punkt { animation: shy-puls 0.9s ease-in-out infinite; }
.shy-satzpunkt {
display: inline-block;
width: max(0.2em, 5px);
height: max(0.2em, 5px);
margin-left: 0.04em;
border-radius: 50%;
background: var(--color-accent);
vertical-align: baseline;
position: relative;
}
.shy-satzpunkt-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.empty-state-text .shy-satzpunkt, .briefing-clear-title .shy-satzpunkt { width: max(0.24em, 5px); height: max(0.24em, 5px); }
.empty-state:not(.ist-klein):not(.page-load-error)::before {
content: "shy";
display: block;
width: max-content;
margin: 0 auto 10px;
padding-right: 0.19em;
font-family: var(--font-marke);
font-style: italic;
font-weight: 300;
font-size: 52px;
line-height: 1;
letter-spacing: -0.01em;
color: var(--color-border-strong);
background: radial-gradient(circle, var(--color-accent) 0 48%, transparent 52%) no-repeat right 0 bottom 0.21em / 0.16em 0.16em;
}
.empty-state:not(.ist-klein):not(.page-load-error) > .empty-state-icon,
.empty-state:not(.ist-klein):not(.page-load-error) > svg:first-child { display: none; }
.spinner, .spinner-sm, .spinner-row-refresh, .spinner-inline {
border: 0 !important;
background: none !important;
animation: none !important;
position: relative;
}
.spinner::before, .spinner-row-refresh::before, .spinner-inline::before {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--color-accent);
animation: shy-puls 0.9s ease-in-out infinite;
}
.spinner-sm::before { width: 7px; height: 7px; }
.spinner-row-refresh::before { width: 6px; height: 6px; }
.spinner-inline::before { width: 7px; height: 7px; background: currentColor; }
.app-start { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.app-start .shy-wortmarke { font-size: 64px; color: var(--color-text); }
.app-start .shy-punkt { animation: shy-puls 0.9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
body.shy-arbeitet .sidebar-wortmarke .shy-punkt, body.shy-arbeitet .topbar-wortmarke .shy-punkt,
.spinner::before, .spinner-row-refresh::before, .spinner-inline::before, .app-start .shy-punkt { animation: none; }
}
.prod-ampel { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; flex: none; background: var(--color-accent); }
.prod-ampel.ist-amber { background: #e8912d; }
.prod-ampel.ist-red { background: var(--color-danger); }
.prod-ampel.ist-offen { background: transparent; box-shadow: inset 0 0 0 1.5px var(--color-border-strong); }
.prod-color-dot.ist-hinten { margin: 0 0 0 7px; }
.chat-conv-punkt { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); margin-left: auto; }
.chat-conv-item.ist-ungelesen .chat-conv-name { font-weight: 600; }
.todo-faellig-punkt { width: 8px; height: 8px; border-radius: 50%; background: #e8912d; flex: none; }
.kanban-card-check.ist-erledigt { border-color: var(--color-accent); background: var(--color-accent); color: #fff; cursor: default; }
.kanban-card-check.ist-erledigt:hover { background: var(--color-accent); color: #fff; }
.rail-badge.ist-punkt {
min-width: 0; width: 8px; height: 8px; padding: 0; top: 6px; right: 6px;
font-size: 0; color: transparent; overflow: hidden;
background: var(--color-accent);
box-shadow: 0 0 0 2px var(--color-surface, #f6f3ee);
}
.rail-badge.ist-punkt.ist-wartet { background: #e8912d; }
.toast.moment { display: flex; align-items: center; gap: 10px; }
.moment-punkt { position: relative; width: 9px; height: 9px; flex: none; }
.moment-kern, .moment-ring { position: absolute; inset: 0; border-radius: 50%; }
.moment-kern { background: #4cc79a; animation: shy-spring .7s cubic-bezier(.3,1.6,.5,1) 1; }
.moment-ring { border: 2px solid #4cc79a; opacity: 0; animation: shy-ring .8s ease-out .05s 1; }
.toast.moment .shy-satzpunkt { background: #4cc79a; }
@keyframes shy-spring { 0% { transform: scale(0); } 60% { transform: scale(2.2); } 100% { transform: scale(1); } }
@keyframes shy-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .moment-kern, .moment-ring { animation: none; } }
.mb { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--space-6); min-width: 0; }
.mb-zeile { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.mb-gruss { margin: 0; font-size: 23px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-text); }
.mb-datum { margin: 0; }
.mb-rechts { margin-left: auto; align-self: center; }
.mb-text { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--color-text); }
.mb-text b { font-weight: 600; }
.mb-laedt { color: var(--color-text-muted); display: inline-flex; align-items: center; gap: 8px; }
.mb-laedt-punkt { font-size: 40px; margin: 0; animation: shy-puls 0.9s ease-in-out infinite; }
.mb-griffe { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.mb.ohne-griffe .mb-griffe { display: none; }
.mb-griff { display: flex; align-items: flex-start; gap: 9px; padding: 8px 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; min-width: 0; color: inherit; text-decoration: none; height: 100%; }
.mb-griff:hover { border-color: var(--color-accent); }
.mb-griff.ist-haupt { border-color: var(--color-accent); }
.mb-punkt { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 6px; background: var(--color-accent); }
.mb-punkt.ist-orange { background: #e8912d; }
.mb-punkt.ist-rot { background: var(--color-danger); }
.mb-griff-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.mb-griff-text b { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-griff-text span { font-size: 12px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
.mb-griffe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mb-zeile { flex-wrap: wrap; row-gap: 2px; }
.mb-gruss { font-size: 21px; }
.mb-text { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .mb-laedt-punkt { animation: none; } }
.cs { display: flex; flex-direction: column; gap: 18px; }
.cs-kopf { display: flex; flex-direction: column; gap: 10px; }
.cs-titel { display: flex; flex-direction: column; gap: 2px; }
.cs-titel b { font-size: 17px; font-weight: 600; }
.cs-titel span { font-size: 13px; color: var(--color-text-muted); }
.cs-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cs-kachel { background: var(--color-surface-2); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; min-width: 0; }
.cs-kachel span { font-size: 12px; color: var(--color-text-faint); }
.cs-kachel b { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cs-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; align-items: start; }
.cs-angaben { display: flex; flex-direction: column; gap: 10px; }
.cs-angaben .field { display: flex; flex-direction: column; gap: 4px; }
.cs-angaben .field span { font-size: 12px; font-weight: 600; color: var(--color-text-muted); }
.cs-technik { margin: -4px 0 0; font-size: 12.5px; color: var(--color-text-muted); }
.cs-crew { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cs-crew-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cs-crew-kopf b { font-weight: 600; }
.cs-crew-zeile { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 10px; min-width: 0; }
.cs-punkt { width: 9px; height: 9px; border-radius: 50%; flex: none; background: #e8912d; }
.cs-punkt.ist-bestaetigt { background: var(--color-accent); }
.cs-punkt.ist-abgesagt { background: var(--color-danger); }
.cs-crew-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cs-crew-name b { font-weight: 600; font-size: 13.5px; }
.cs-crew-name span { font-size: 12px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-status { font-size: 12px; font-weight: 600; color: #a8570a; white-space: nowrap; }
.cs-status.ist-bestaetigt { color: var(--color-accent); }
.cs-status.ist-abgesagt { color: var(--color-danger); }
.cs-crew-tasten { display: flex; gap: 2px; }
.cs-leer { margin: 0; font-size: 13px; color: var(--color-text-muted); }
.cs-neu { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cs-neu select, .cs-neu input { flex: 1 1 150px; min-width: 0; width: auto; }
.cs-frei { display: flex; gap: 6px; flex-basis: 100%; }
.cs-frei[hidden] { display: none; }
.cs-frei input { flex: 1 1 0; }
.cs-fuss { display: flex; justify-content: flex-end; }
.dt-set, .dt-cs { flex: none; }
@media (max-width: 720px) { .cs-spalten { grid-template-columns: minmax(0, 1fr); } }
body.sm-offen { overflow: hidden; }
.sm-huelle { position: fixed; inset: 0; z-index: 95; background: var(--color-bg); display: flex; justify-content: center; }
.sm { width: 100%; max-width: 520px; height: 100%; display: flex; flex-direction: column; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px max(34px, calc(env(safe-area-inset-bottom, 0px) + 14px)); }
.sm-kopf { display: flex; gap: 8px; align-items: stretch; }
.sm-zeitbalken { flex: 1; min-width: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-radius: 12px; padding: 10px 14px; font-weight: 600; font-size: 14px; }
.sm-zeitbalken span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-zeitbalken.ist-spaet { background: #fbead3; color: #8a4507; }
.sm-zeitbalken.ist-plan { background: var(--color-accent-soft); color: var(--color-accent); }
.sm-verzug { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sm-zu { width: 46px; flex: none; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); color: var(--color-text); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sm-zu svg { width: 18px; height: 18px; }
.sm-hinweise { display: flex; gap: 8px; overflow-x: auto; flex: none; }
.sm-hinweis { flex: 1 0 200px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--color-text-muted); }
.sm-hinweis b { color: var(--color-text); font-weight: 600; }
.sm-hinweis.ist-knapp { border-color: #f1c58b; }
.sm-gross { font-size: 22px; font-variant-numeric: tabular-nums; }
.sm-hinweis-tasten { display: flex; gap: 6px; margin-top: 6px; }
.sm-klein { font: inherit; font-size: 13px; font-weight: 600; border-radius: 9px; padding: 7px 12px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.sm-klein.ist-gruen { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.sm-liste { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; min-height: 0; padding: 2px; }
.sm-szene { font: inherit; text-align: left; display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 14px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); cursor: pointer; min-height: 52px; }
.sm-szene b { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-szene.ist-fertig { opacity: 0.5; }
.sm-szene.ist-fertig b { text-decoration: line-through; text-decoration-thickness: 1px; }
.sm-szene.ist-jetzt { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.sm-n { font-family: ui-monospace, "SF Mono", monospace; font-size: 12px; color: var(--color-text-faint); min-width: 28px; }
.sm-zeit { font-size: 13px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.sm-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); flex: none; }
.sm-punkt.ist-puls { animation: shy-puls 0.9s ease-in-out infinite; }
.sm-trenner { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-faint); padding: 4px 6px 0; }
.sm-unten { flex: none; }
.sm-wisch { position: relative; width: 100%; height: 60px; border: 0; border-radius: 16px; background: var(--color-accent); color: #fff; font: inherit; font-weight: 600; font-size: 16px; cursor: pointer; touch-action: none; overflow: hidden; }
.sm-griff { position: absolute; left: 6px; top: 6px; width: 48px; height: 48px; border-radius: 12px; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; transition: transform .2s ease; }
.sm-wisch:active .sm-griff { transition: none; }
.sm-griff svg { width: 20px; height: 20px; }
.sm-wisch-text { display: block; padding-left: 40px; }
.sm-fertig { text-align: center; padding: 18px; border-radius: 16px; background: var(--color-accent-soft); color: var(--color-accent); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .sm-punkt.ist-puls { animation: none; } }
.sm.ist-breit { max-width: 1000px; gap: 14px; padding-left: 20px; padding-right: 20px; padding-bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 14px)); }
.sm-kopf-breit { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto auto 44px; gap: 10px; align-items: stretch; }
.sm-kopf-breit .sm-zu { width: auto; }
.sm-tag { border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sm-tag.ist-plan { background: var(--color-accent-soft); color: var(--color-accent); }
.sm-tag.ist-spaet { background: #fbead3; color: #8a4507; }
.sm-tag-titel { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-tag-unter { font-size: 13px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; justify-content: center; }
.sm-box-l { font-size: 12px; color: var(--color-text-muted); }
.sm-box-w { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sm-box.ist-klein .sm-box-w { font-size: 14px; font-weight: 500; line-height: 1.6; }
.sm-l { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 500; }
.sm-v { font-size: 14.5px; line-height: 1.45; color: var(--color-text); }
.sm-jetzt { flex: none; background: var(--color-surface); border: 1px solid var(--color-accent); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.sm-jetzt-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sm-jetzt-marke { font-size: 12px; font-weight: 600; color: var(--color-accent); letter-spacing: .08em; text-transform: uppercase; }
.sm-jetzt-nr { font-size: 28px; font-weight: 600; }
.sm-jetzt-plan { font-size: 15px; color: var(--color-text-muted); }
.sm-jetzt-mitte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.sm-jetzt-mitte.ist-eins { grid-template-columns: minmax(0, 1fr); }
.sm-jetzt-bild { width: 100%; height: 230px; object-fit: cover; border-radius: 10px; background: var(--color-surface-2); display: block; }
.sm-jetzt-text { font-size: 17px; line-height: 1.5; max-height: 230px; overflow-y: auto; }
.sm-jetzt-felder { display: grid; gap: 14px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.sm-jetzt-feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sm.ist-breit .sm-wisch { height: 76px; font-size: 20px; flex: none; }
.sm.ist-breit .sm-griff { display: none; }
.sm.ist-breit .sm-wisch-text { padding-left: 0; }
.sm.ist-breit .sm-fertig { flex: none; }
.sm-naechste-kopf { flex: none; display: flex; align-items: baseline; gap: 10px; }
.sm-naechste-zahl { font-size: 12.5px; color: var(--color-text-muted); margin-right: -6px; }
.sm-plan-link { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; color: var(--color-text-muted); cursor: pointer; }
.sm-plan-link:hover { color: var(--color-accent); }
.sm-kacheln { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
.sm-k { font: inherit; text-align: left; color: inherit; width: 100%; cursor: pointer; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 8px; }
.sm-k-bildhuelle { position: relative; display: block; width: 84px; height: 56px; }
.sm-haken { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--color-accent); color: #fff; flex: none; }
.sm-k-bildhuelle .sm-haken { position: absolute; left: 6px; top: 6px; }
.sm-k.ist-fertig { opacity: .55; background: var(--color-bg-alt); }
.sm-k.ist-fertig .sm-k-bild { filter: grayscale(1); }
.sm-k.ist-fertig .sm-k-n { color: var(--color-text-muted); }
.sm-k.ist-fertig .sm-k-t, .sm-z.ist-fertig .sm-z-t { text-decoration: line-through; }
.sm-k.ist-jetzt { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-soft); }
.sm-k.ist-jetzt .sm-k-n { color: var(--color-accent); }
.sm-z.ist-fertig { background: var(--color-bg-alt); }
.sm-z.ist-fertig .sm-z-u, .sm-z.ist-fertig .sm-z-n, .sm-z.ist-fertig .sm-z-t { color: var(--color-text-faint); }
.sm-z-u { display: inline-flex; align-items: center; gap: 4px; }
.sm-z .sm-haken { width: 14px; height: 14px; background: none; color: var(--color-accent); }
.sm-z.ist-jetzt { background: var(--color-accent-soft); border-radius: 8px; border-bottom-color: transparent; }
.sm-z.ist-jetzt .sm-z-u, .sm-z.ist-jetzt .sm-z-n { color: var(--color-accent); }
.sm-z.ist-jetzt .sm-z-t { color: var(--color-text); }
.sm-k-bild { width: 84px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--color-surface-2); display: block; }
.sm-k-inhalt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sm-k-n { font-size: 12.5px; font-weight: 600; }
.sm-k-t { font-size: 13px; line-height: 1.35; color: var(--color-text-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sm.ist-schmal { gap: 10px; }
.sm.ist-schmal .sm-kopf { flex: none; }
.sm-tag.ist-zeile { flex: 1; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 13px; }
.sm-tag.ist-zeile .sm-tag-titel { font-size: 14.5px; min-width: 0; }
.sm-tag.ist-zeile .sm-tag-unter { font-size: 12.5px; flex: none; }
.sm.ist-schmal .sm-jetzt { padding: 12px; gap: 10px; }
.sm.ist-schmal .sm-jetzt-nr { font-size: 22px; }
.sm.ist-schmal .sm-jetzt-plan { font-size: 13px; }
.sm.ist-schmal .sm-jetzt-mitte { grid-template-columns: 128px minmax(0, 1fr); gap: 12px; }
.sm.ist-schmal .sm-jetzt-mitte.ist-eins { grid-template-columns: minmax(0, 1fr); }
.sm.ist-schmal .sm-jetzt-bild { height: 96px; }
.sm.ist-schmal .sm-jetzt-text { font-size: 14.5px; line-height: 1.4; max-height: none; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.sm.ist-schmal .sm-jetzt-felder { grid-template-columns: auto minmax(0, 1fr) !important; gap: 6px 12px; padding-top: 10px; align-items: baseline; }
.sm.ist-schmal .sm-jetzt-feld { display: contents; }
.sm.ist-schmal .sm-v { font-size: 14px; }
.sm.ist-schmal .sm-wisch { height: 64px; font-size: 18px; flex: none; }
.sm.ist-schmal .sm-griff { display: none; }
.sm.ist-schmal .sm-wisch-text { padding-left: 0; }
.sm.ist-schmal .sm-fertig { flex: none; }
.sm-zeitplan { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.sm-z { font: inherit; text-align: left; color: inherit; width: 100%; cursor: pointer; background: none; border: 0; display: grid; grid-template-columns: 62px 52px minmax(0, 1fr); gap: 8px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--color-border); font-size: 13px; }
.sm-k:active, .sm-z:active { background: var(--color-accent-soft); }
.sm-z-u { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.sm-z-n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-z-t { color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-lunch { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, #e0a83a 14%, var(--color-surface)); border: 1px solid color-mix(in srgb, #e0a83a 45%, var(--color-border)); color: color-mix(in srgb, #b07a12 70%, var(--color-text)); }
.sm-lunch-symbol { width: 40px; height: 40px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, #e0a83a 24%, var(--color-surface)); }
.sm-lunch-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sm-lunch-titel { font-size: 15px; font-weight: 600; }
.sm-lunch-unter, .sm-lunch-wann { font-size: 12.5px; opacity: .8; }
.sm-lunch-wann { flex: none; white-space: nowrap; }
.sm-lunch.ist-vorbei { opacity: .55; }
.sm-zeitplan .sm-lunch { margin: 6px 0; padding: 10px 12px; gap: 10px; }
.sm-zeitplan .sm-lunch-symbol { width: 32px; height: 32px; }
.sm-zeitplan .sm-lunch-titel { font-size: 14px; }
.sm > .sm-hinweis, .sm-d-mitte > .sm-hinweis { flex: none; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 14px; }
.sm > .sm-hinweis > span, .sm-d-mitte > .sm-hinweis > span { flex: 1 1 220px; min-width: 0; }
.sm > .sm-hinweis .sm-hinweis-tasten, .sm-d-mitte > .sm-hinweis .sm-hinweis-tasten { margin-top: 0; margin-left: auto; }
.sm.ist-desktop { max-width: 1600px; display: grid; grid-template-columns: 340px minmax(0, 1fr) 280px; grid-template-rows: minmax(0, 1fr); gap: 20px; padding: 24px 32px; }
.sm-d-ablauf { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.sm-d-ablauf .sm-naechste-kopf { padding: 4px 6px; }
.sm-d-ablauf .sm-zeitplan, .sm-d-ablauf .sm-liste { flex: 1; min-height: 0; overflow-y: auto; }
.sm-d-ablauf .sm-z { padding: 10px; font-size: 13.5px; grid-template-columns: 62px 58px minmax(0, 1fr); }
.sm-d-mitte { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.sm-d-mitte .sm-jetzt { flex: 1; min-height: 0; padding: 20px; gap: 16px; }
.sm-d-mitte .sm-jetzt-nr { font-size: 30px; }
.sm-d-mitte .sm-jetzt-mitte { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 16px; }
.sm-d-mitte .sm-jetzt-bild { flex: 1; min-height: 160px; height: auto; }
.sm-d-mitte .sm-jetzt-text { font-size: 18px; max-height: none; flex: none; }
.sm-d-mitte .sm-jetzt-felder { gap: 16px; padding-top: 14px; }
.sm-d-mitte .sm-wisch { height: 76px; font-size: 20px; flex: none; }
.sm-d-mitte .sm-griff { display: none; }
.sm-d-mitte .sm-wisch-text { padding-left: 0; }
.sm-d-mitte .sm-fertig { flex: none; }
.sm-d-rechts { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; }
.sm-d-tagzeile { display: flex; gap: 10px; align-items: stretch; }
.sm-d-tagzeile .sm-tag { flex: 1; min-width: 0; }
.sm-d-tagzeile .sm-zu { width: 46px; }
.sm-d-wetter { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
.sm-d-fortschritt { gap: 8px; }
.sm-d-fzeile { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }
.sm-d-balken { height: 6px; border-radius: 3px; background: var(--color-border); overflow: hidden; }
.sm-d-balken span { display: block; height: 100%; background: var(--color-accent); border-radius: 3px; }
.sm-d-rechts > .sm-l { margin-top: 6px; }
.sm-d-danach { font: inherit; color: inherit; text-align: left; cursor: pointer; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.sm-d-danach:active { background: var(--color-accent-soft); }
.sm-d-danach-bild { width: 100%; height: 120px; object-fit: cover; border-radius: 10px; background: var(--color-surface-2); display: block; }
.sm-d-danach-t { font-size: 13px; line-height: 1.35; color: var(--color-text-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
@media (display-mode: standalone) and (min-width: 641px) {
.sm { padding-top: calc(max(env(safe-area-inset-top, 0px), 36px) + 12px); }
}
.cst-abschnitt:empty { display: none; }
.cst-abschnitt { margin-bottom: var(--space-6); display: flex; flex-direction: column; gap: 12px; }
.cst-abschnitt-kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cst-abschnitt-kopf h2 { margin: 0; font-size: 17px; font-weight: 600; }
.cst-abschnitt-kopf span { font-size: 13px; color: var(--color-text-muted); }
.cst-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.cst-karte { position: relative; aspect-ratio: 16 / 10; border: 0; border-radius: 14px; overflow: hidden; background: #2a2e31 center / cover no-repeat; color: #fff; text-align: left; font: inherit; cursor: pointer; padding: 0; }
.cst-karte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 35%, rgba(0,0,0,.72) 100%); }
.cst-karte-text { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 12px; display: flex; flex-direction: column; }
.cst-karte-text b { font-size: 16px; font-weight: 600; line-height: 1.2; }
.cst-karte-text span { font-size: 12.5px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cst-karte-status { position: absolute; z-index: 1; top: 10px; left: 10px; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: rgba(0,0,0,.45); }
.cst-karte-status.ist-online { background: var(--color-accent); }
.cst-karte.ist-vorschlag { background: var(--color-surface); border: 1.5px dashed var(--color-border-strong); color: var(--color-text); }
.cst-karte.ist-vorschlag::after { display: none; }
.cst-karte-plus { position: absolute; top: 12px; left: 12px; width: 30px; height: 30px; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent); display: flex; align-items: center; justify-content: center; }
.cst-karte-plus svg { width: 16px; height: 16px; }
.cst-karte.ist-vorschlag .cst-karte-text span { opacity: 1; color: var(--color-text-muted); }
.cst-karte-los { position: absolute; top: 16px; right: 14px; font-size: 12px; font-weight: 600; color: var(--color-accent); }
.cst { display: flex; flex-direction: column; gap: 16px; }
.cst-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.cst-form { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cst-form .field { display: flex; flex-direction: column; gap: 4px; }
.cst-form .field > span, .cst-label { font-size: 12px; font-weight: 600; color: var(--color-text-muted); }
.cst-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cst-bilder { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.cst-bild { flex: none; width: 96px; aspect-ratio: 16 / 9; border-radius: 8px; border: 2px solid transparent; background: var(--color-surface-2) center / cover no-repeat; cursor: pointer; padding: 0; }
.cst-bild.ist-an { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-soft); }
.cst-hinweis { margin: 0; font-size: 12.5px; color: var(--color-text-muted); }
.cst-zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cst-zahl { display: flex; flex-direction: column; gap: 3px; }
.cst-zahl input { width: 100%; padding: 8px 10px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface-2); color: var(--color-text); font: inherit; font-size: 16px; font-weight: 600; }
.cst-zahl span { font-size: 11.5px; color: var(--color-text-muted); }
.cst-zitate { display: flex; flex-direction: column; gap: 6px; }
.cst-zitat { text-align: left; font: inherit; font-size: 12.5px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.cst-zitat small { color: var(--color-text-faint); }
.cst-zitat:hover { border-color: var(--color-accent); }
.cst-rechts { position: sticky; top: 0; }
.cst-vorschau { display: grid; grid-template-columns: 1.1fr .9fr; border-radius: 14px; overflow: hidden; background: #161512; color: #f6f3ee; min-height: 260px; }
.cst-v-bild { position: relative; background: #2a2e31 center / cover no-repeat; min-height: 260px; }
.cst-v-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.65) 100%); }
.cst-v-marke { position: absolute; z-index: 1; left: 12px; top: 10px; font-family: var(--font-marke); font-style: italic; font-weight: 300; font-size: 24px; line-height: 1; }
.cst-v-marke .shy-punkt { background: #4cc79a; }
.cst-v-ti { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 12px; display: flex; flex-direction: column; }
.cst-v-ti b { font-size: 20px; font-weight: 500; line-height: 1.15; }
.cst-v-ti span { font-size: 13px; opacity: .8; }
.cst-v-rechts { padding: 14px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.cst-v-kennz { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cst-v-kennz div { border: 1px solid #2e2c28; border-radius: 9px; padding: 6px 8px; }
.cst-v-kennz b { display: block; font-size: 20px; font-weight: 600; line-height: 1.1; }
.cst-v-kennz span { font-size: 10.5px; color: #a39d92; }
.cst-v-zitat { font-family: var(--font-marke); font-style: italic; font-size: 16px; line-height: 1.3; color: #e8e4dd; }
.cst-v-von { font-size: 11px; color: #a39d92; }
.cst-fuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--color-border); padding-top: 14px; }
.cst-luft { flex: 1; }
.cst-schalter { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13.5px; }
.cst-portfolio select { min-width: 190px; }
@media (max-width: 860px) {
.cst-spalten { grid-template-columns: minmax(0, 1fr); }
.cst-rechts { position: static; order: -1; }
.cst-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pd-phasen-mobil { display: none; }
.pd-blatt-grund { position: fixed; inset: 0; z-index: 1200; background: rgba(22, 21, 18, .42); display: flex; align-items: flex-end; }
.pd-blatt { width: 100%; max-height: 85vh; overflow-y: auto; background: var(--color-surface); border-radius: 20px 20px 0 0; padding: 8px 0 calc(env(safe-area-inset-bottom, 0px) + 22px); box-shadow: 0 -8px 30px rgba(0, 0, 0, .15); }
.pd-blatt-griff { display: block; width: 38px; height: 5px; border-radius: 3px; background: var(--color-border-strong, #d6d1c8); margin: 0 auto 12px; }
.pd-blatt-kopf { display: flex; flex-direction: column; gap: 2px; padding: 0 20px 10px; }
.pd-blatt-kopf b { font-size: 17px; font-weight: 600; }
.pd-blatt-kopf span { font-size: 12.5px; color: var(--color-text-muted); }
.pd-blatt-phase { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 20px; border: 0; background: transparent; font: inherit; text-align: left; color: var(--color-text); cursor: pointer; }
.pd-blatt-phase.ist-jetzt { background: var(--color-bg-alt); cursor: default; }
.pd-blatt-phase.ist-offen { color: var(--color-text-muted); }
.pd-blatt-kreis { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 13px; box-sizing: border-box; border: 1.5px solid var(--color-border-strong, #d6d1c8); color: var(--color-text-muted); }
.pd-blatt-kreis svg { width: 14px; height: 14px; stroke-width: 2.4; }
.ist-fertig > .pd-blatt-kreis { background: #6fb07f; border-color: #6fb07f; color: #fff; }
.ist-jetzt > .pd-blatt-kreis { background: var(--color-text); border-color: var(--color-text); color: var(--color-surface); font-weight: 600; }
.pd-blatt-name { flex: 1; min-width: 0; font-size: 15px; }
.ist-jetzt > .pd-blatt-name { font-weight: 600; }
.pd-blatt-aktuell { font-size: 12px; font-weight: 500; color: var(--color-accent); }
.pd-blatt-datum { font-size: 12.5px; color: var(--color-text-muted); }
@media (max-width: 640px) {
.pd-critical-bar { display: none; }
.pd-header.has-hero.pd-kopf-b { display: flex; padding: 18px 16px 16px; gap: 14px; margin: 0 calc(-1 * var(--space-3)) var(--space-4); border-radius: 0; }
.pd-kopf-b .pd-kopf-zeile { gap: 14px 8px; }
.pd-kopf-b .pd-kopf-titel { flex-basis: 100%; white-space: normal; font-size: 26px; line-height: 1.15; }
.pd-kopf-b .pd-kopf-titel small { display: block; font-size: 13px; margin: 0 0 2px; opacity: .65; font-variant-numeric: tabular-nums; }
.pd-kopf-b .pd-kopf-meta { flex-basis: 100%; margin: -6px 0 0; gap: 0; font-size: 13.5px; }
.pd-kopf-b .pd-kopf-meta > span + span::before { content: "\00a0·\00a0"; }
.pd-kopf-b .pd-kopf-luft, .pd-kopf-b .pd-presence-cluster { display: none; }
.pd-kopf-b .pd-kopf-hinweis { flex-basis: 100%; max-width: none; justify-content: flex-start; }
.pd-kopf-b .pd-health-badge { height: 40px; padding: 0 14px; margin-right: auto; font-size: 13.5px; box-sizing: border-box; }
.pd-kopf-b .pd-client-link-btn { width: 40px; height: 40px; }
.pd-kopf-b .pd-phasen { display: none; }
.pd-phasen-mobil { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 12px 14px 13px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .1); color: #fff; font: inherit; text-align: left; cursor: pointer; }
.pd-phasen-segmente { display: flex; gap: 4px; }
.pd-phasen-segmente i { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .2); }
.pd-phasen-segmente i.ist-fertig { background: #6fb07f; }
.pd-phasen-segmente i.ist-jetzt { background: #fff; }
.pd-phasen-mobil-zeile { display: flex; align-items: center; gap: 10px; }
.pd-phasen-mobil-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pd-phasen-mobil-text small { font-size: 12px; color: rgba(255, 255, 255, .6); }
.pd-phasen-mobil-text b { font-size: 16px; font-weight: 600; }
.pd-phasen-mobil-text span { font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.pd-phasen-mobil-pfeil { display: flex; color: rgba(255, 255, 255, .7); }
.pd-phasen-mobil-pfeil svg { width: 18px; height: 18px; }
.pd-header-mobile-wrap { display: block; position: fixed; left: 0; right: 0; top: 0; z-index: 39; margin: 0; border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0;
background: var(--color-surface); box-shadow: 0 4px 14px rgba(0, 0, 0, .06); padding: 8px 12px 0;
transform: translateY(-110%); opacity: 0; pointer-events: none; transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.pd-header-mobile-wrap.ist-sichtbar { transform: none; opacity: 1; pointer-events: auto; }
.pd-header-mobile-bar { height: 40px; padding: 0; gap: 6px; }
.pd-header-mobile-title { font-size: 15px; }
.pd-header-mobile-bar .pd-client-link-btn.is-mobile { width: 32px; height: 32px; }
.pd-header-mobile-phase { display: flex; align-items: center; gap: 8px; padding: 2px 2px 9px; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; }
.pd-header-mobile-segmente { display: flex; gap: 3px; width: 112px; flex: none; }
.pd-header-mobile-segmente i { flex: 1; height: 4px; border-radius: 2px; background: var(--color-border); }
.pd-header-mobile-segmente i.ist-fertig { background: #6fb07f; }
.pd-header-mobile-segmente i.ist-jetzt { background: var(--color-accent); }
}
.tp-kopf-mobil, .tp-kopf-karte, .tp-plan-mobil, .tp-karte-punkt, .tp-karte-pfeil, .tp-reiter-nr, .tp-neu-kurz, .tp-kachel-pfeil, .tp-kachel-kurz { display: none; }
.tp-kachel-titel { border: 0; background: none; padding: 0; margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: default; display: flex; align-items: center; gap: 8px; text-align: left; }
@media (max-width: 640px) {
.tp-kopf-mobil { display: flex; align-items: baseline; justify-content: space-between; padding: 0 0 10px; }
.tp-kopf-mobil b { font-size: 20px; font-weight: 600; }
.tp-kopf-mobil span { font-size: 13px; color: var(--color-text-muted); }
.tp-leiste { gap: 8px; border-bottom: 0; padding-bottom: 2px; scrollbar-width: none; }
.tp-leiste::-webkit-scrollbar { display: none; }
.tp-reiter, .tp-reiter.ist-aktiv { flex-direction: row; align-items: center; height: 36px; padding: 0 14px; margin: 0; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text); }
.tp-reiter.ist-aktiv { background: var(--color-text); border-color: var(--color-text); color: var(--color-surface); }
.tp-reiter.ist-aktiv .tp-dot { background: var(--color-surface) !important; }
.tp-reiter b { font-size: 14px; font-weight: 400; gap: 7px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; display: block; }
.tp-reiter b .tp-dot { margin-right: 7px; vertical-align: 1px; }
.tp-reiter small { display: none; }
.tp-reiter-nr { display: inline; }
.tp-neu { flex: none; height: 36px; padding: 0 12px; margin: 0; border: 1px dashed var(--color-border-strong); border-radius: 999px; font-size: 14px; color: var(--color-text-muted); }
.tp-neu-lang { display: none; }
.tp-neu-kurz { display: inline; }
.tp-flaeche, .tp-flaeche.ist-gesamt { background: none; border: 0; border-radius: 0; padding: 12px 0 0; }
.tp-karten { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.tp-karte { padding: 13px 14px; gap: 8px; }
.tp-karte-kopf { align-items: center; }
.tp-karte-kopf b { font-size: 15px; }
.tp-karte-punkt, .tp-karte-pfeil { display: flex; }
.tp-karte-pfeil { color: var(--color-text-faint); }
.tp-karte-pfeil svg { width: 15px; height: 15px; }
.tp-karte-kz { display: none; }
.tp-karte-meta { grid-template-columns: none; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: max-content; gap: 2px 18px; padding-left: 16px; font-size: 12.5px; }
.tp-plan { display: none; }
.tp-plan-mobil { display: block; margin-top: 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 12px 14px 4px; }
.tp-pm-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tp-pm-kopf b { font-size: 14px; font-weight: 600; }
.tp-pm-legende { display: flex; gap: 10px; font-size: 11.5px; color: var(--color-text-muted); }
.tp-pm-legende > span { display: flex; align-items: center; gap: 4px; }
.tp-pm-heute-zeichen { width: 2px; height: 10px; background: var(--color-accent); }
.tp-pm-ring-zeichen { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--color-danger); box-sizing: border-box; }
.tp-pm-monate { position: relative; height: 18px; }
.tp-pm-monate span { position: absolute; top: 0; padding-left: 4px; box-sizing: border-box; font-size: 11.5px; color: var(--color-text-muted); }
.tp-pm-zeile { display: block; width: 100%; padding: 10px 0 12px; border: 0; border-top: 1px solid var(--color-border); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.tp-pm-name { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; min-width: 0; }
.tp-pm-name b { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-pm-name small { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.tp-pm-spur { display: block; position: relative; height: 14px; }
.tp-pm-linie { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--color-border); }
.tp-pm-balken { position: absolute; top: 2px; height: 10px; border-radius: 5px; }
.tp-pm-balken.ist-vorbei { background: var(--color-text-faint); opacity: .35; }
.tp-pm-ring { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 2.5px solid var(--color-danger); background: var(--color-surface); box-sizing: border-box; }
.tp-pm-heute { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--color-accent); }
.tp-flaeche-kopf { display: none; }
.tp-kopf-karte { display: flex; flex-direction: column; gap: 6px; padding: 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; margin-bottom: 10px; }
.tp-kopf-karte-zeile { display: flex; align-items: center; gap: 8px; }
.tp-kopf-karte-zeile b { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; }
.tp-kopf-karte-stift { width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; color: var(--color-text-muted); cursor: pointer; }
.tp-kopf-karte-stift svg { width: 15px; height: 15px; }
.tp-kacheln { gap: 8px; }
.tp-kachel { background: var(--color-surface); border-radius: 14px; padding: 0 14px 12px; gap: 8px; }
.tp-kachel h5 { min-height: 46px; letter-spacing: 0; text-transform: none; font-size: 14px; color: var(--color-text); justify-content: flex-start; }
.tp-kachel-titel { flex: 1; min-width: 0; font-weight: 600; cursor: pointer; min-height: 46px; }
.tp-kachel-pfeil { display: flex; color: var(--color-text-faint); transition: transform var(--dur-fast) var(--ease); }
.tp-kachel-pfeil svg { width: 14px; height: 14px; }
.tp-kachel-kurz { display: inline; font-size: 12.5px; font-weight: 400; color: var(--color-text-muted); }
.tp-kachel:not(.ist-zu) .tp-kachel-kurz { display: none; }
.tp-kachel.ist-zu { padding-bottom: 0; }
.tp-kachel.ist-zu > :not(h5) { display: none; }
.tp-kachel.ist-zu .tp-kachel-pfeil { transform: rotate(-90deg); }
.tp-mini { font-size: 12.5px; }
}
@media (max-width: 640px) {
div.card.productions-table-card { background: none; border: 0; box-shadow: none; padding: 0; }
.card.productions-table-card > h2 { display: none; }
.productions-table-card .year-pills { display: flex; flex-wrap: nowrap; gap: 2px; padding: 3px; margin-bottom: 4px !important; background: var(--color-bg-alt); border-radius: 10px; }
.productions-table-card .year-pill, .productions-table-card .year-pill.active { flex: 1; padding: 7px 0; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--color-text-muted); font-size: 13.5px; font-weight: 400; white-space: nowrap; }
.productions-table-card .year-pill.active { background: var(--color-surface); color: var(--color-text); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
table.responsive-table.liste-produktionen > tbody { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; }
table.responsive-table.liste-produktionen tr.hat-karte { position: relative; display: grid; grid-template-columns: 34px minmax(0, auto) auto minmax(0, 1fr) 32px; grid-template-rows: auto auto;
column-gap: 0; row-gap: 4px; align-items: center; margin: 0; padding: 12px 6px 12px 14px; border: 0; border-top: 1px solid var(--color-border); border-radius: 0; box-shadow: none; }
table.responsive-table.liste-produktionen > tbody > tr.hat-karte:first-child { border-top: 0; }
table.responsive-table.liste-produktionen tr.hat-karte > td.karte-vorn { grid-column: 1; grid-row: 1 / span 2; align-self: start; margin-right: 12px; padding: 0; }
table.responsive-table.liste-produktionen tr.hat-karte .lead-avatar { width: 34px; height: 34px; font-size: 12px; }
table.responsive-table.liste-produktionen tr.hat-karte > td.karte-titel,
table.responsive-table.liste-produktionen tr.hat-karte > td.karte-titel > .cell-value-truncate,
table.responsive-table.liste-produktionen tr.hat-karte > td.karte-titel > .cell-value-truncate > div { display: contents; }
table.responsive-table.liste-produktionen tr.hat-karte .zellen-titel { grid-column: 2 / 5; grid-row: 1; margin-left: 12px; padding-right: 22px; font-size: 15px; font-weight: 500; line-height: 1.45; white-space: normal;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
table.responsive-table.liste-produktionen tr.hat-karte .zellen-titel .produktion-nummer { font-weight: 600; }
table.responsive-table.liste-produktionen tr.hat-karte .zellen-titel > span:not(.badge):not(.produktion-nummer) { display: inline; white-space: normal; }
table.responsive-table.liste-produktionen tr.hat-karte .produktion-kopieren { display: none; }
table.responsive-table.liste-produktionen tr.hat-karte .prod-ampel { position: absolute; top: 18px; right: 17px; width: 9px; height: 9px; margin: 0; }
table.responsive-table.liste-produktionen tr.hat-karte .produktion-unterzeile { grid-column: 2; grid-row: 2; margin: 0 0 0 12px; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
table.responsive-table.liste-produktionen tr.hat-karte .produktion-unterzeile { font-weight: 400; color: var(--color-text-muted); }
table.responsive-table.liste-produktionen tr.hat-karte .produktion-wer { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.responsive-table.liste-produktionen tr.hat-karte > td.col-status { grid-column: 3; grid-row: 2; margin-left: 8px; }
table.responsive-table.liste-produktionen tr.hat-karte > td.col-status .badge { font-size: 11.5px; padding: 2px 8px; }
table.responsive-table.liste-produktionen tr.hat-karte > td.spalte-ab-1200,
table.responsive-table.liste-produktionen tr.hat-karte > td.karte-umbruch { display: none; }
table.responsive-table.liste-produktionen tr.hat-karte > td.col-actions { grid-column: 5; grid-row: 2; margin: 0; padding: 0; justify-self: center; }
table.responsive-table.liste-produktionen tr.hat-karte > td.col-actions .btn-ghost { color: var(--color-text-faint); }
}
.pdat-pille-kurz { display: none; }
@media (max-width: 640px) {
.year-pills.pdat-ansicht { display: flex; flex-wrap: nowrap; gap: 2px; padding: 3px; background: var(--color-bg-alt); border-radius: 10px; }
.pdat-ansicht .year-pill, .pdat-ansicht .year-pill.active { flex: 1; padding: 7px 0; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--color-text-muted); font-size: 13.5px; font-weight: 400; white-space: nowrap; }
.pdat-ansicht .year-pill.active { background: var(--color-surface); color: var(--color-text); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.pdat-ansicht .pdat-pille-lang, .pdat-ansicht .pdat-anzahl { display: none; }
.pdat-ansicht .pdat-pille-kurz { display: inline; }
div.card.pdat-liste { background: none; border: 0; box-shadow: none; padding: 0; margin-top: 10px; }
.pdat-liste table.responsive-table > tbody { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; }
.pdat-liste table.responsive-table tr.hat-karte { margin: 0; border: 0; border-top: 1px solid var(--color-border); border-radius: 0; box-shadow: none; padding: 12px 14px; }
.pdat-liste table.responsive-table > tbody > tr.hat-karte:first-child { border-top: 0; }
.pdat-liste .mobile-only-toggle { display: none !important; }
table.responsive-table.pdat-produktionen tr.hat-karte { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 5px 10px; align-items: center; }
table.responsive-table.pdat-produktionen tr.hat-karte > td.karte-titel,
table.responsive-table.pdat-produktionen tr.hat-karte > td.karte-titel > div { display: contents; }
table.responsive-table.pdat-produktionen tr.hat-karte .zellen-titel { grid-column: 1 / 5; grid-row: 1; font-size: 14.5px; font-weight: 500; line-height: 1.3; white-space: normal; color: var(--color-text);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
table.responsive-table.pdat-produktionen tr.hat-karte .zellen-titel .pdat-nummer { color: var(--color-accent-strong); font-weight: 600; }
table.responsive-table.pdat-produktionen tr.hat-karte > td.karte-titel .table-cell-sub { grid-column: 1; grid-row: 2; margin: 0; }
table.responsive-table.pdat-produktionen tr.hat-karte .badge { font-size: 11.5px; padding: 2px 8px; }
table.responsive-table.pdat-produktionen tr.hat-karte > td.karte-wert { grid-column: 5; grid-row: 1; align-self: start; text-align: right; }
table.responsive-table.pdat-produktionen tr.hat-karte > td.karte-wert .zellen-titel { display: inline; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
table.responsive-table.pdat-produktionen tr.hat-karte > td.karte-wert .table-cell-sub { display: none; }
table.responsive-table.pdat-produktionen tr.hat-karte > td.karte-wert .pdat-fehlt { font-size: 12.5px; }
table.responsive-table.pdat-produktionen tr.hat-karte > td.karte-zeile1 { grid-row: 2; margin: 0; }
table.responsive-table.pdat-produktionen tr.hat-karte > td.karte-zeile1::before { display: none; }
table.responsive-table.pdat-produktionen tr.hat-karte > td.karte-zeile1:nth-of-type(4) { grid-column: 2; }
table.responsive-table.pdat-produktionen tr.hat-karte > td.karte-zeile1:nth-of-type(5) { grid-column: 3; }
table.responsive-table.pdat-produktionen .pdat-person { padding: 0; background: none; color: var(--color-text-muted); font-size: 12.5px; gap: 5px; align-items: center; }
table.responsive-table.pdat-produktionen .pdat-person::before { content: ""; width: 13px; height: 13px; flex: none; background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E") center / contain no-repeat; }
table.responsive-table.pdat-produktionen .pdat-person.ist-rest { background: none; color: color-mix(in srgb, var(--color-warning) 80%, var(--color-text)); }
table.responsive-table.pdat-produktionen tr.hat-karte > td.col-actions { grid-column: 5; grid-row: 2; margin: 0; padding: 0; justify-self: end; }
table.responsive-table.pdat-produktionen tr.hat-karte > td.col-actions .btn { width: 34px; height: 30px; min-height: 30px; padding: 0; justify-content: center; }
table.responsive-table.pdat-produktionen tr.hat-karte > td.col-actions .nb-knopf-text { display: none; }
table.responsive-table.pdat-produktionen tr.hat-karte > td.karte-umbruch { display: none; }
}
.karte-mehr-knopf { display: none; }
@media (max-width: 640px) {
.page-header { align-items: center; }
.page-header-actions { gap: 8px; }
.page-header .page-header-actions .btn:has(svg) { font-size: 0; gap: 0; width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; border-radius: 11px; flex: none; }
.page-header .page-header-actions .btn:has(svg) svg { width: 18px; height: 18px; }
.page-header .page-header-actions .btn:has(svg) > span { font-size: 0; }
.year-pills { flex-wrap: nowrap; overflow-x: auto; gap: 8px; scrollbar-width: none; }
.year-pills::-webkit-scrollbar { display: none; }
.year-pill { flex: none; height: 34px; padding: 0 13px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text); font-size: 13.5px; font-weight: 400; box-shadow: none; white-space: nowrap; }
.year-pill.active { background: var(--color-text); border-color: var(--color-text); color: var(--color-surface); box-shadow: none; }
.year-pills.ist-segment { gap: 2px; padding: 3px; background: var(--color-bg-alt); border-radius: 10px; overflow: hidden; }
.year-pills.ist-segment .year-pill { flex: 1; height: auto; padding: 7px 0; border: 0; border-radius: 8px; background: transparent; color: var(--color-text-muted); }
.year-pills.ist-segment .year-pill.active { background: var(--color-surface); color: var(--color-text); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.card:has(table.responsive-table) { background: none; border: 0; box-shadow: none; padding: 0; }
table.responsive-table tbody > tr.hat-karte { margin: 0; padding: 12px 14px; position: relative; border: 1px solid var(--color-border); border-radius: 0; box-shadow: none; }
table.responsive-table tbody > tr.hat-karte:not(:first-child):not(tr.gruppen-kopf + tr) { margin-top: -1px; }
table.responsive-table tbody > tr.hat-karte:first-child,
table.responsive-table tbody > tr.gruppen-kopf + tr.hat-karte { border-top-left-radius: 14px; border-top-right-radius: 14px; }
table.responsive-table tbody > tr.hat-karte:last-child,
table.responsive-table tbody > tr.hat-karte:has(+ tr.datatable-expanded-row:last-child),
table.responsive-table tbody > tr.hat-karte:has(+ tr.gruppen-kopf),
table.responsive-table tbody > tr.hat-karte:has(+ tr.datatable-expanded-row + tr.gruppen-kopf) { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }
table.responsive-table tbody > tr.datatable-expanded-row { margin: 0 !important; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); }
table.responsive-table tr.hat-karte.zeile-warn, table.responsive-table tr.hat-karte.zeile-fehler,
table.responsive-table tr.hat-karte.zeile-gut, table.responsive-table tr.hat-karte.zeile-still { box-shadow: none; }
table.responsive-table tbody > tr.gruppen-kopf { background: transparent; border: 0; box-shadow: none; margin: 0; padding: 0; }
table.responsive-table tbody > tr.gruppen-kopf:not(:first-child) { margin-top: 10px; }
table.responsive-table tr.gruppen-kopf > td.gruppen-kopf-zelle { background: transparent !important; padding: 4px 4px 6px; border: 0; }
table.responsive-table .gruppen-kopf-inhalt { font-size: 12.5px; }
table.responsive-table .gruppen-titel { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
table.responsive-table tr.hat-karte > td.karte-titel { white-space: normal; }
table.responsive-table:not(.liste-produktionen) tr.hat-karte > td.karte-titel .zellen-titel,
table.responsive-table:not(.liste-produktionen) tr.hat-karte > td.karte-titel > .zellen-titel { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; }
table.responsive-table:not(.liste-produktionen) tr.hat-karte > td.karte-titel .zellen-titel > *:not(.produktion-nummer) { white-space: normal; display: inline; }
table.responsive-table tr.hat-karte > td.karte-titel,
table.responsive-table tr.hat-karte > td.karte-titel > *,
table.responsive-table tr.hat-karte > td.karte-titel > * > *:not(.badge) { white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }
table.responsive-table:not(.liste-produktionen) tr.hat-karte:has(.karte-mehr-knopf),
table.responsive-table:not(.liste-produktionen) tr.hat-karte:has(.table-actions-mobile-trigger) { padding-right: 46px; }
table.responsive-table tr.hat-karte > td.col-actions.hat-karte-mehr > :not(.karte-mehr-knopf) { display: none !important; }
table.responsive-table tr.hat-karte > td.col-actions.hat-karte-mehr { position: static; margin: 0; padding: 0; }
.karte-mehr-knopf, table.responsive-table:not(.liste-produktionen) tr.hat-karte .table-actions-mobile-trigger {
display: flex !important; align-items: center; justify-content: center; position: absolute; right: 4px; top: 50%; margin-top: -18px; width: 36px; height: 36px;
border: 0; background: none; color: var(--color-text-faint); cursor: pointer; padding: 0; }
.karte-mehr-knopf svg { width: 16px; height: 16px; }
table.responsive-table:not(.liste-produktionen) tr.hat-karte > td.col-actions:has(.table-actions-mobile-trigger) { position: static; margin: 0; padding: 0; }
}
.nur-telefon, .nur-telefon-pill, .mobil-filter-knopf { display: none; }
@media (max-width: 640px) {
.nicht-telefon { display: none !important; }
.nur-telefon { display: inline-flex; }
.year-pill.nur-telefon-pill { display: inline-flex; align-items: center; justify-content: center; }
.mobil-filter-knopf { display: flex; align-items: center; justify-content: center; position: relative; flex: none; width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-text); cursor: pointer; padding: 0; }
.mobil-filter-knopf svg { width: 17px; height: 17px; }
.mobil-filter-knopf.ist-aktiv::after { content: ""; position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); }
.datatable-toolbar:has(.mobil-filter-knopf) { gap: 8px; }
.mobil-filter-blatt { display: flex; flex-direction: column; gap: 10px; }
.mobil-filter-blatt select, .mobil-filter-blatt input { width: 100%; height: 44px; font-size: 16px; }
.receipt-filter-bar .filter-bar { display: none; }
.beleg-pruefleiste { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; }
.beleg-pruefleiste-text { flex: 1; min-width: 0; font-size: 13px; }
.beleg-pruefleiste-text > :not(strong) { display: none; }
.beleg-pruefleiste-text { font-size: 0; }
.beleg-pruefleiste-text strong { font-size: 13px; font-weight: 500; }
.beleg-pruefleiste > .btn-ghost { display: none; }
.beleg-pruefleiste > .btn-warning { background: none; border: 0; color: var(--color-warning-strong, #8a4a0c); font-weight: 600; padding: 0 6px; min-height: 32px; box-shadow: none; }
}
@media (max-width: 640px) {
.buchungen-kopfzeile { margin-bottom: 10px !important; }
.buchungen-kopfzeile > h2 { display: none; }
.buchungen-kopfzeile > div { flex: 1; }
.buchungen-kopfzeile .booking-view-tabs { flex: 1; display: flex; padding: 3px; border-radius: 10px; background: var(--color-bg-alt); }
.buchungen-kopfzeile .booking-view-tab { flex: 1; text-align: center; padding: 7px 0; font-size: 13.5px; border-radius: 8px; }
.buchungen-kopfzeile .booking-view-tab.is-active { color: var(--color-text); font-weight: 600; }
.card:has(> .buchungen-kopfzeile) > .year-pills { margin-bottom: 10px; }
}
.nur-telefon-block { display: none !important; }
@media (max-width: 640px) {
.nur-telefon-block { display: flex !important; }
select.als-chips { display: none !important; }
.year-pills.mobil-chips { display: flex; }
.im-blatt-am-telefon:not(.ist-im-blatt) { display: none !important; }
.am-telefon-zu { display: none !important; }
.mobil-blatt-inhalt > * { margin: 0 !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; background: none !important; }
.modal.mobil-blatt { max-width: none; }
}
@media (max-width: 640px) {
.grid:has(> .stat-card) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
.stat-card { padding: 12px 14px; border-radius: 14px; gap: 0; min-height: 0; }
.stat-card:hover { transform: none; box-shadow: none; }
.stat-card .stat-icon { display: none; }
.stat-card .stat-value { font-size: 19px; font-weight: 600; }
.stat-card .stat-label { font-size: 12px; }
.entity-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
.archive-filter-wrap { min-width: 0; max-width: 100%; }
.ap-filterleiste { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 8px; margin-bottom: var(--space-4); }
.ap-suchfeld { height: 44px; border-radius: 12px; }
.ap-filterleiste .mobil-filter-knopf { width: 44px; height: 44px; border-radius: 12px; }
.ap-filterleiste > .ap-segment { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 11px; }
.ap-filterleiste .ap-zeitraum, .ap-filterleiste > .ap-personen, .ap-filterleiste > .ap-bereich, .ap-filterleiste > .ap-nurweg { display: none; }
.ap-seg-knopf { padding: 0 4px; }
.mobil-filter-blatt .ap-personen { flex-wrap: wrap; height: auto; padding: 6px; }
.mobil-filter-blatt .ap-vonbis input { width: 100%; }
.mobil-filter-blatt .ap-vonbis label { flex: 1; }
.ap-tag-zu { padding: 12px 14px; }
.ap-tag-haupt { font-size: 15px; }
.ap-tag-links { gap: 6px; }
.ap-tag-karte { padding: 0; }
.ap-zeile { grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 10px; padding: 12px 14px; }
.ap-zeile + .ap-zeile { border-top: 1px solid var(--color-bg-alt); }
.ap-zeile::before, .ap-symbol, .ap-wer-inline, .ap-satzzeile > .ap-prod, .ap-unter-breit { display: none !important; }
.ap-wer-spalte { display: inline-grid !important; grid-column: 1; grid-row: 1; width: 28px; height: 28px; }
.ap-inhalt { grid-column: 2; grid-row: 1; gap: 4px; }
.ap-zeit { grid-column: 3; grid-row: 1; padding-top: 2px; font-size: 12px; }
.ap-satz { font-size: 14px; line-height: 1.4; }
.ap-zeile.ist-weg .ap-satz { color: var(--color-text); }
.ap-unter-telefon { display: block; font-size: 12.5px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal.action-sheet.ap-blatt { max-width: none; }
.modal-backdrop.ap-blatt > .modal.ap-blatt { margin: auto 0 0; }
.ap-blatt-inhalt { max-height: calc(100vh - 120px); }
.ap-blatt .ap-d { display: flex; flex-direction: column; }
.ap-blatt .ap-d-kopf { padding: 4px 20px 12px; }
.ap-blatt .ap-d-knopf { order: 10; border-bottom: 0; padding: 4px 20px 20px; }
.ap-blatt .ap-d-oeffnen { display: flex; justify-content: center; width: 100%; height: 48px; border-radius: 12px; background: var(--color-accent); border-color: var(--color-accent); color: #fff; font-size: 15px; }
.ap-blatt .ap-d-felder { display: flex; flex-direction: column; align-items: stretch; text-align: left; gap: 0; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; }
.ap-blatt .ap-d-feld { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 3px 8px; padding: 10px 14px; }
.ap-blatt .ap-d-feld + .ap-d-feld { border-top: 1px solid var(--color-bg-alt); }
.ap-blatt .ap-d-feldname { flex-basis: 100%; font-size: 12.5px; }
.ap-blatt .ap-d-verlauf-abschnitt .ap-d-verlauf, .ap-blatt .ap-d-verlauf-abschnitt h3 { display: none; }
.ap-blatt .ap-d-verlauf-kurz { display: block; margin: 0; font-size: 13px; color: var(--color-text-muted); }
.ap-blatt .ap-d-abschnitt + .ap-d-abschnitt { border-top: 0; padding-top: 0; }
.papierkorb-leeren { background: none !important; border: 0 !important; color: var(--color-danger) !important; font-size: 13.5px; font-weight: 500; padding: 0 6px !important; min-height: 36px; box-shadow: none; }
.card:has(table.responsive-table) > .card-header h2, .card:has(table.responsive-table) > h2 { font-size: 12.5px; font-weight: 600; color: var(--color-text-muted); }
}
.tape-kpi, .tape-abschnitt, .tape-mehr { display: none; }
@media (max-width: 640px) {
.grid.tape-kpi { display: grid; margin-bottom: 4px; }
.tape-abschnitt { display: flex; justify-content: space-between; padding: 14px 4px 6px; font-size: 12.5px; color: var(--color-text-muted); }
.tape-abschnitt > span:first-child { font-weight: 600; }
.card.tape-karte { background: none; border: 0; box-shadow: none; padding: 0; }
.tape-karte .tape-kopf, .tape-karte .tape-zeile.ist-kopf { display: none; }
.tape-karte .tape-liste { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; }
.tape-karte .tape-zeile:not(.ist-kopf) { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 32px; grid-template-areas: "pf name zu mehr" "pf fu fu mehr"; column-gap: 8px; row-gap: 6px; align-items: center; padding: 12px 6px 12px 8px; border-left: 0; box-shadow: none; }
.tape-karte .tape-block + .tape-block .tape-zeile { border-top: 1px solid var(--color-border); }
.tape-karte .tape-pfeilspalte { grid-area: pf; }
.tape-karte .tape-name { grid-area: name; min-width: 0; }
.tape-karte .tape-sub { display: none; }
.tape-karte .tape-zustand { grid-area: zu; }
.tape-karte .tape-fuellung { grid-area: fu; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tape-karte .tape-anzahl, .tape-karte .tape-aktionen { display: none; }
.tape-mehr { grid-area: mehr; display: flex; align-items: center; justify-content: center; width: 32px; height: 36px; border: 0; background: none; color: var(--color-text-faint); cursor: pointer; padding: 0; }
.tape-mehr svg { width: 16px; height: 16px; }
}
.catalog-suche-mobil, .catalog-mehr { display: none; }
@media (max-width: 640px) {
.page-header-actions .catalog-search-input { display: none; }
.catalog-suche-mobil { display: flex; margin-bottom: 10px; }
.card.catalog-karte { background: none; border: 0; box-shadow: none; padding: 0; }
.catalog-group-header { background: none; padding: 12px 4px 6px; margin: 0; color: var(--color-text-muted); border-radius: 0; }
.catalog-group-header .catalog-group-titel, .catalog-group-header b, .catalog-group-header strong { text-transform: none; letter-spacing: 0; }
.catalog-table { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; }
.catalog-table tr.catalog-row { padding: 12px 6px 12px 14px; grid-template-columns: minmax(0, 1fr) auto 32px; }
.catalog-table tr.catalog-row > td:nth-child(5) { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.catalog-table tr.catalog-row > td.catalog-aktionen .table-actions > :not(.catalog-mehr) { display: none; }
.catalog-mehr { display: flex; align-items: center; justify-content: center; width: 32px; height: 36px; border: 0; background: none; color: var(--color-text-faint); padding: 0; cursor: pointer; }
.catalog-mehr svg { width: 16px; height: 16px; }
}
@media (max-width: 640px) {
.branding-section-header { flex-direction: row !important; align-items: center; flex-wrap: nowrap; gap: 8px; }
.branding-section-titel { flex: 1; min-width: 0; }
.branding-section-info { display: none; }
.branding-section-actions { flex: none; gap: 6px; flex-wrap: nowrap; }
.branding-section-actions > .btn-sm:first-child { font-size: 0; gap: 0; width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 11px; }
.branding-section-actions > .btn-sm:first-child svg { width: 17px; height: 17px; }
.branding-section-actions .branding-mehr-btn { width: 40px; height: 40px; padding: 0; border-radius: 11px; justify-content: center; }
.branding-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
.branding-ordnerleiste:not([style*="none"]) { display: flex; flex-direction: column; gap: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; margin-bottom: 10px; }
.branding-ordnerleiste .branding-chip { width: 100%; box-sizing: border-box; border: 0; border-radius: 0; border-top: 1px solid var(--color-border); padding: 12px 14px; background: none; justify-content: flex-start; min-height: 48px; }
.branding-ordnerleiste .branding-chip:first-child { border-top: 0; }
.branding-ordnerleiste .branding-chip-name { flex: 1; font-size: 14.5px; }
}
.tl-agenda { display: none; }
@media (max-width: 640px) {
.tl-card { display: none !important; }
.zs-seite { display: none; }
.tl-agenda { display: block; }
.tl-ag-woche { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tl-ag-woche > b { flex: 1; text-align: center; font-size: 14.5px; font-weight: 600; }
.tl-ag-woche .tl-ag-pfeil { width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: 11px; background: var(--color-surface); display: grid; place-items: center; }
.tl-ag-chips { margin-bottom: 4px; }
.tl-ag-kopf { padding: 14px 4px 6px; font-size: 12.5px; font-weight: 600; color: var(--color-text-muted); }
.tl-ag-kasten { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; }
.tl-ag-zeile { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; color: var(--color-text); text-decoration: none; }
.tl-ag-zeile + .tl-ag-zeile { border-top: 1px solid var(--color-border); }
.tl-ag-strich { width: 4px; align-self: stretch; border-radius: 2px; background: var(--tl-art, var(--color-accent)); flex: none; }
.tl-ag-zeile.ist-vermietung .tl-ag-strich { background: var(--color-warning); }
.tl-ag-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tl-ag-text b { font-size: 14.5px; font-weight: 500; }
.tl-ag-text small { font-size: 12.5px; color: var(--color-text-muted); }
.tl-agenda[data-filter="produktion"] .tl-ag-zeile.ist-vermietung,
.tl-agenda[data-filter="vermietung"] .tl-ag-zeile.ist-produktion { display: none; }
.tl-agenda[data-filter="produktion"] .tl-ag-tag:not(:has(.ist-produktion)),
.tl-agenda[data-filter="vermietung"] .tl-ag-tag:not(:has(.ist-vermietung)) { display: none; }
.tl-ag-leer { padding: 20px 4px; }
}
.todo-mobil { display: none; }
@media (max-width: 640px) {
.todos-kopf .page-header-actions > :not(.btn-primary) { display: none !important; }
.todo-mobil { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.todo-mobil .datatable-toolbar { margin: 0; gap: 8px; }
.todo-mobil .datatable-search { flex: 1; }
.kanban-board[data-spalte="eigene"] > .kanban-column-team,
.kanban-board[data-spalte="team"] > .kanban-column-eigene { display: none; }
}
@media (max-width: 640px) {
.page-header:has(.kopf-zaehler) { flex-wrap: wrap; row-gap: 2px; }
.page-header:has(.kopf-zaehler) > div:first-child { flex-basis: 100%; }
.page-header:has(.kopf-zaehler) .page-header-actions { margin-left: 0; padding-left: 0; }
}
@media (max-width: 640px) {
.chat-push-banner { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; border-radius: 12px; background: var(--color-bg-alt); font-size: 13px; color: var(--color-text-muted); margin-bottom: 10px; }
.chat-push-banner > span:nth-child(2) { flex: 1; min-width: 0; }
.chat-push-banner .btn { background: none; border: 0; box-shadow: none; padding: 0; min-height: 0; color: var(--color-accent); font-weight: 600; }
.chat-page:not(.is-thread-active) .chat-sidebar { background: none; border: 0; box-shadow: none; padding: 0; }
.chat-sidebar .chat-new-channel-btn { display: none; }
.chat-sidebar-toolbar { padding: 4px 4px 6px; }
.chat-sidebar-toolbar-title { font-size: 12.5px; font-weight: 600; color: var(--color-text-muted); text-transform: none; letter-spacing: 0; }
.chat-page:not(.is-thread-active) .chat-conv-list { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; overflow-x: hidden; overflow-y: auto; padding: 0; }
.chat-conv-list .chat-conv-item { border-radius: 0; padding: 12px 14px; margin: 0; }
.chat-conv-list .chat-conv-item + .chat-conv-item { border-top: 1px solid var(--color-border); }
.chat-conv-list .chat-conv-item.is-active { background: none; }
.chat-conv-list .chat-conv-section-label { padding: 14px 14px 6px; margin: 0; border-top: 1px solid var(--color-border); background: var(--color-bg); font-size: 12.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--color-text-muted); }
}
@media (max-width: 640px) {
.zeit-eintraege-karte.nur-meine tr.ist-fremd, .zeit-eintraege-karte.nur-meine tr.ist-fremd + tr.datatable-expanded-row { display: none !important; }
.zeit-eintraege-karte > h2 { display: none; }
.zeit-segment { margin: 12px 0 10px; }
}
@media (max-width: 640px) {
.recht-chips { margin-bottom: 10px; }
.rechte-karte[data-filter="gut"] tr.hat-karte:not(.zeile-gut),
.rechte-karte[data-filter="warn"] tr.hat-karte:not(.zeile-warn),
.rechte-karte[data-filter="fehler"] tr.hat-karte:not(.zeile-fehler) { display: none !important; }
}
.mb-griffe-kopf { display: none; }
@media (max-width: 640px) {
.mb-zeile { flex-wrap: wrap; }
.mb-zeile .mb-datum { order: 3; flex-basis: 100%; }
.mb-rechts .btn:has(svg) { font-size: 0; gap: 0; width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 11px; }
.mb-rechts .btn:has(svg) svg { width: 17px; height: 17px; }
.mb-text { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 14px; font-size: 14.5px; }
.mb:not(.ohne-griffe) .mb-griffe-kopf { display: flex; justify-content: space-between; padding: 14px 4px 0; font-size: 12.5px; font-weight: 600; color: var(--color-text-muted); }
.mb-griffe-kopf .mb-griffe-zahl { font-weight: 400; }
.mb-griffe { display: flex; flex-direction: column; gap: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; }
.mb-griffe > li + li .mb-griff { border-top: 1px solid var(--color-border); }
.mb-griff, .mb-griff.ist-haupt { border: 0; border-radius: 0; padding: 12px 14px; position: relative; padding-right: 36px; }
.mb-griff::after { content: "›"; position: absolute; right: 14px; top: 50%; transform: translateY(-55%); font-size: 18px; color: var(--color-text-faint); }
.mb-griff-text b { font-size: 14.5px; font-weight: 500; white-space: normal; }
}
@media (max-width: 640px) {
.chat-page:not(.is-thread-active) { background: none; border: 0; box-shadow: none; }
}
.ul-segment { display: flex; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 10px; background: var(--color-bg-alt); overflow-x: auto; }
.ul-segment-knopf { border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--color-text-muted); padding: 6px 14px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.ul-segment-knopf:hover { color: var(--color-text); }
.ul-segment-knopf.ist-an { background: var(--color-surface); color: var(--color-text); font-weight: var(--weight-medium); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.ul-segment-zahl { font-weight: 500; opacity: .6; margin-left: 2px; font-variant-numeric: tabular-nums; }
.ul-segment-zahl:empty { display: none; }
.ul-lieferungen { display: flex; flex-direction: column; gap: 10px; padding: 6px 0 10px; }
.ul-leer { font-size: 13px; color: var(--color-text-muted); padding: 6px 2px; }
.ul-dialog .ul-erklaerung { font-size: 13px; color: var(--color-text-muted); margin: 0 0 14px; line-height: 1.5; }
.ul-dialog textarea { width: 100%; resize: vertical; }
.ul-gueltig { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-muted); margin-top: 4px; }
.ul-gueltig svg { width: 15px; height: 15px; }
.ul-linkfeld { display: flex; gap: 6px; align-items: center; border: 1px solid var(--color-accent); border-radius: 10px; padding: 4px 4px 4px 10px; }
.ul-linkfeld input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--color-text); padding: 6px 0; outline: none; }
.ul-ziel { font-size: 13px; color: var(--color-text-muted); margin: 14px 0; line-height: 1.5; }
.ul-ziel b { color: var(--color-text); font-weight: var(--weight-medium); word-break: break-word; }
.ul-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.weg { display: inline-flex; flex-direction: column; gap: 4px; --weg: var(--color-text-muted); vertical-align: middle; }
.weg-grau { --weg: var(--color-text-muted); }
.weg-blau { --weg: var(--color-tone-blue); }
.weg-amber { --weg: var(--color-warning); }
.weg-rot { --weg: var(--color-danger); }
.weg-gruen { --weg: var(--color-success); }
.weg-violett { --weg: var(--color-tone-purple); }
.weg-punkte { display: flex; align-items: center; height: 16px; }
.weg-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border-strong); flex-shrink: 0; }
.weg-punkt.ist-voll { background: var(--weg); }
.weg-punkt.ist-aktuell { width: 14px; height: 14px; background: var(--weg); color: #fff; display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--weg) 18%, transparent); }
.weg-punkt.ist-aktuell svg { width: 9px; height: 9px; stroke-width: 3; }
.weg-strich { width: 18px; height: 2px; background: var(--color-border-strong); flex-shrink: 0; }
.weg-strich.ist-voll { background: var(--weg); }
.weg-label { font-size: 12.5px; font-weight: 600; color: var(--weg); white-space: nowrap; line-height: 1.2; }
.weg-zusatz { font-weight: 400; font-size: 11.5px; }
.weg.ist-durch .weg-wort { text-decoration: line-through; }
.zellen-art { color: var(--color-text-muted); font-size: 13px; }
.kit-bereich { display: flex; flex-direction: column; gap: 18px; padding: 20px 24px 24px; margin: 4px 0; background: color-mix(in srgb, var(--color-bg-alt) 45%, var(--color-surface));
border: 1px solid var(--color-border); border-radius: 14px; transition: border-color .15s ease, background .15s ease; }
.kit-bereich.ist-drueber { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface)); }
.kit-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kit-titel { font-size: 17px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; color: var(--color-text); }
.kit-titel svg { width: 17px; height: 17px; color: var(--color-accent); }
.kit-kopf-text { font-size: 13px; color: var(--color-text-muted); }
.kit-kopf-luecke, .kit-w-luecke { flex: 1; }
.kit-bereich .btn-sm svg, .kit-w .btn-sm svg, .kit-leiste .btn-sm svg, .assets-ins-kit svg { width: 14px; height: 14px; }
.kit-zip, .kit-hochladen, .kit-neuer-ordner, .kit-w-fuss .btn-sm, .kit-leiste-kopf .btn-sm { display: inline-flex; align-items: center; gap: 6px; }
.kit-hochladen-text { font-variant-numeric: tabular-nums; }
.kit-farbe-erste { align-self: flex-start; }
.kit-kachel { position: relative; flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kit-kachel-bild { position: relative; width: 100%; border: 1px solid var(--color-border); border-radius: 9px; overflow: hidden; background: var(--color-bg-alt);
display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.kit-vs-bild { max-width: 78%; max-height: 72%; object-fit: contain; display: block; }
.kit-vs-voll { width: 100%; height: 100%; object-fit: cover; display: block; background: #fff; }
.kit-vs-typ { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 600; letter-spacing: -.01em; }
.kit-marke.ist-grau { background: var(--color-surface); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.kit-kachel-notiz { display: flex; gap: 5px; align-items: flex-start; font-size: 11.5px; color: var(--color-text-muted); line-height: 1.35; }
.kit-kachel-notiz svg { width: 12px; height: 12px; color: var(--color-text-faint); margin-top: 1px; flex-shrink: 0; }
.kit-marke { position: absolute; top: 6px; left: 6px; font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: #fff3dc; color: #8f5500; }
.kit-kachel-mehr { position: absolute; top: 5px; right: 5px; width: 28px; height: 28px; border-radius: 7px; border: 0; background: var(--color-surface);
color: var(--color-text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; box-shadow: 0 1px 4px rgba(0,0,0,.12); transition: opacity .12s ease; }
.kit-kachel-mehr svg { width: 16px; height: 16px; }
.kit-kachel:hover .kit-kachel-mehr, .kit-kachel-mehr:focus-visible { opacity: 1; }
@media (pointer: coarse) { .kit-kachel-mehr { opacity: 1; } }
.kit-kachel-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kit-kachel-sub { font-size: 11px; color: var(--color-text-faint); margin-top: -4px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kit-farbe { flex-shrink: 0; border: 1px solid var(--color-border); border-radius: 9px; overflow: hidden; background: var(--color-surface); display: flex; flex-direction: column; }
.kit-farbe-flaeche { height: 64px; border: 0; padding: 0; cursor: pointer; display: block; width: 100%; }
.kit-farbe-text { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.kit-farbe-name { font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 2px; }
.kit-farbe-name > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-farbe-kopie, .kit-farbe-mehr { border: 0; background: none; padding: 2px; color: var(--color-text-faint); cursor: pointer; display: inline-flex; }
.kit-farbe-kopie svg, .kit-farbe-mehr svg { width: 13px; height: 13px; }
.kit-farbe-kopie:hover, .kit-farbe-mehr:hover { color: var(--color-accent); }
.kit-farbe-wert { font-size: 11.5px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.kit-farbe-neu { width: 150px; min-height: 120px; border: 1.5px dashed var(--color-border); border-radius: 9px; background: none; color: var(--color-text-muted);
font: inherit; font-size: 13px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.kit-farbe-neu svg { width: 15px; height: 15px; }
.kit-farbe-neu:hover { border-color: var(--color-accent); color: var(--color-accent); }
.kit-a { display: flex; gap: 18px; align-items: flex-start; }
.kit-baum { width: 236px; flex-shrink: 0; display: flex; flex-direction: column; gap: 1px; padding: 8px; background: var(--color-surface);
border: 1px solid var(--color-border); border-radius: 12px; }
.kit-bz { display: flex; align-items: center; gap: 6px; padding: 7px 10px 7px 8px; border-radius: 8px; font: inherit; font-size: 13.5px; color: var(--color-text);
background: none; border: 0; text-align: left; cursor: pointer; width: 100%; box-sizing: border-box; }
.kit-bz:hover { background: var(--color-bg-alt); }
.kit-bz.ist-an { background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface)); color: var(--color-accent); font-weight: 600; }
.kit-bz.ist-leise { color: var(--color-text-muted); font-size: 13px; }
.kit-bz-pfeil { width: 13px; height: 13px; display: flex; color: var(--color-text-faint); flex-shrink: 0; }
.kit-bz-pfeil svg { width: 13px; height: 13px; }
.kit-bz-ordner { display: flex; color: var(--color-text-muted); flex-shrink: 0; }
.kit-bz-ordner svg { width: 15px; height: 15px; }
.kit-bz.ist-an .kit-bz-ordner { color: var(--color-accent); }
.kit-bz-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-bz-zahl { font-size: 12px; color: var(--color-text-faint); font-weight: 500; }
.kit-bz-trenner { height: 1px; background: var(--color-border); margin: 6px 4px; }
.kit-bz-farben { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; background: var(--color-bg-alt); }
.kit-rechts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; background: var(--color-surface); border: 1px solid var(--color-border);
border-radius: 12px; padding: 18px 20px; min-height: 360px; box-sizing: border-box; }
.kit-pfadzeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kit-pfadzeile .btn-sm { display: inline-flex; align-items: center; gap: 6px; }
.kit-pfadzeile .btn-sm svg { width: 14px; height: 14px; }
.kit-pfad { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--color-text-muted); flex-wrap: wrap; }
.kit-pfad button { border: 0; background: none; padding: 2px 4px; margin: -2px -4px; border-radius: 6px; font: inherit; color: var(--color-text-muted); cursor: pointer; }
.kit-pfad button:hover { color: var(--color-accent); }
.kit-pfad b { color: var(--color-text); font-weight: 600; }
.kit-pfad svg { width: 12px; height: 12px; color: var(--color-text-faint); }
.kit-ordnerkacheln { display: flex; gap: 12px; flex-wrap: wrap; }
.kit-ordnerkachel { width: 240px; display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 12px; border: 1px solid var(--color-border); border-radius: 10px;
background: var(--color-surface); cursor: pointer; box-sizing: border-box; }
.kit-ordnerkachel:hover { border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border)); }
.kit-ok-symbol { display: flex; color: var(--color-accent); }
.kit-ok-symbol svg { width: 22px; height: 22px; }
.kit-ok-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kit-ok-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-ok-zahl { font-size: 11.5px; color: var(--color-text-faint); }
.kit-ok-mehr { border: 0; background: none; color: var(--color-text-faint); cursor: pointer; padding: 4px; display: flex; border-radius: 6px; }
.kit-ok-mehr svg { width: 15px; height: 15px; }
.kit-kacheln { display: flex; gap: 16px; flex-wrap: wrap; }
.kit-kacheln .kit-kachel { cursor: pointer; }
.kit-kachel.ist-gewaehlt .kit-kachel-bild { box-shadow: 0 0 0 2px var(--color-accent); border-color: var(--color-accent); }
.kit-kachel.ist-gezogen { opacity: .35; }
.kit-bz.ist-ziel, .kit-ordnerkachel.ist-ziel, .kit-pfad button.ist-ziel { box-shadow: inset 0 0 0 2px var(--color-accent); color: var(--color-accent); font-weight: 600;
background: var(--color-surface); }
.kit-rechts.ist-ziel { box-shadow: 0 0 0 2px var(--color-accent); }
.kit-ablegen { margin-top: auto; border: 1.5px dashed var(--color-border); border-radius: 10px; padding: 10px 12px; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 2px; }
.kit-ablegen:hover { border-color: var(--color-accent); }
.kit-ablegen button { border: 0; background: none; font: inherit; cursor: pointer; padding: 2px 6px; }
.kit-ablegen-text { font-size: 13px; color: var(--color-text-muted); }
.kit-ablegen-text:hover { color: var(--color-accent); }
.kit-ablegen-ordner { font-size: 12.5px; color: var(--color-accent); }
.kit-farben { display: flex; gap: 14px; flex-wrap: wrap; }
.kit-geist { position: fixed; top: -100px; left: -100px; padding: 8px 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px;
font-size: 13px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.kit-dlg-inhalt { display: flex; gap: 24px; padding: 4px 0; }
.kit-dlg-links { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }
.kit-dlg-bild { border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--color-bg-alt); }
.kit-dlg-meta { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.5; }
.kit-dlg-fassungen { border-top: 1px solid var(--color-border); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.kit-dlg-fassungen-titel { font-size: 12.5px; font-weight: 600; color: var(--color-text-muted); }
.kit-dlg-fassung { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.kit-dlg-fassung.ist-alt { color: var(--color-text-muted); }
.kit-dlg-fassung span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-dlg-rechts { flex: 1; min-width: 0; }
.kit-dlg-rechts textarea { width: 100%; box-sizing: border-box; }
.kit-dlg-original { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 9px; background: var(--color-bg-alt);
font-size: 14px; color: var(--color-text-muted); word-break: break-all; }
.kit-dlg-original svg { width: 15px; height: 15px; flex-shrink: 0; }
.kit-w { display: flex; flex-direction: column; gap: 16px; }
.kit-w-kunde { font-size: 12.5px; font-weight: 600; color: var(--color-text-muted); }
.kit-w-logos { display: flex; gap: 10px; flex-wrap: wrap; }
.kit-w-farben { display: flex; gap: 8px; flex-wrap: wrap; }
.kit-pille { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 5px; border: 1px solid var(--color-border); border-radius: 999px;
background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums; cursor: pointer; }
.kit-pille-punkt { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--color-border); }
.kit-w-rest { font-size: 13px; color: var(--color-text-muted); }
.kit-w-rest b { color: var(--color-text); }
.kit-w-fuss { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--color-border); padding-top: 12px; flex-wrap: wrap; }
.kit-w-ordner { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--color-text-muted); }
.kit-w-ordner svg { width: 14px; height: 14px; color: var(--color-accent); }
.kit-leiste { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; border-bottom: 1px solid var(--color-border); }
.kit-leiste:empty { display: none; }
.kit-leiste-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kit-leiste-titel { font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.kit-leiste-titel svg { width: 16px; height: 16px; color: var(--color-accent); }
.kit-leiste-text { font-size: 12.5px; color: var(--color-text-muted); }
.kit-leiste-inhalt { display: flex; gap: 12px; overflow-x: auto; }
.assets-ins-kit { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
@media (max-width: 900px) {
.kit-bereich { padding: 16px; }
.kit-kopf-luecke { flex-basis: 100%; height: 0; }
.kit-a { flex-direction: column; align-items: stretch; }
.kit-baum { width: auto; }
.kit-rechts { padding: 14px; min-height: 0; }
.kit-kacheln, .kit-farben { gap: 10px; }
.kit-kacheln > .kit-kachel, .kit-farben > .kit-farbe, .kit-farben > .kit-farbe-neu { width: calc((100% - 20px) / 3) !important; }
.kit-kacheln .kit-kachel-bild { height: 68px !important; }
.kit-ordnerkachel { width: 100%; }
.kit-dlg-inhalt { flex-direction: column; }
.kit-dlg-links { width: auto; }
.kit-pfadzeile .btn-secondary { font-size: 0; gap: 0; }
.assets-ins-kit { font-size: 0; gap: 0; padding: 0 8px; }
}
.mt-seite { display: flex; flex-direction: column; gap: 18px; max-width: 1100px; }
.mt-kopf { display: flex; flex-direction: column; gap: 4px; }
.mt-kopf h1 { margin: 0; font-size: 30px; font-weight: var(--weight-semibold); }
.mt-eyebrow, .mt-gruppe, .mt-tabellenkopf { font-size: 12px; color: var(--color-text-muted); letter-spacing: .04em; }
.mt-eyebrow { font-size: 13px; }
.mt-sub { font-size: 14px; color: var(--color-text-muted); }
.mt-kacheln { display: flex; gap: 14px; }
.mt-kachel { flex: 1 1 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 14px 18px;
display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mt-kachel-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mt-kachel-titel { font-weight: var(--weight-medium); }
.mt-kachel-sub { font-size: 13px; color: var(--color-text-muted); }
.mt-tabelle { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; }
.mt-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 120px 120px 140px; gap: 12px; padding: 10px 18px; align-items: center; font-size: 14px; }
.mt-tabellenkopf { padding: 12px 18px; background: var(--color-bg-alt); border-bottom: 1px solid var(--color-border); font-size: 12px; }
.mt-gruppe { padding: 10px 18px 4px; text-transform: uppercase; }
.mt-leer { color: var(--color-text-faint); }
.mt-fuss { font-size: 13px; color: var(--color-text-muted); }
.mt-schalter { padding: 5px 12px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-bg-alt); color: var(--color-text-faint);
font: inherit; font-size: 13px; cursor: pointer; min-width: 48px; }
.mt-schalter.ist-an { border-color: var(--color-accent); color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface)); }
.mt-schalter:disabled { opacity: .6; cursor: progress; }
@media (max-width: 760px) {
.mt-kacheln { flex-direction: column; }
.mt-tabellenkopf { display: none; }
.mt-zeile { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px 14px; border-top: 1px solid var(--color-border); }
.mt-anlass { grid-column: 1 / -1; font-weight: var(--weight-medium); }
.mt-zelle { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.mt-zelle::before { content: attr(data-label); color: var(--color-text-muted); }
.mt-schalter { min-height: 40px; }
}
.erinnern-knopf { height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-surface);
color: var(--color-text); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.erinnern-knopf.ist-erst { border-color: var(--color-accent); color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface)); }
.erinnern-knopf:hover { border-color: var(--color-accent); }
.modal.ze-modal { max-width: 680px; }
.ze-body { display: flex; flex-direction: column; gap: 14px; }
.ze-stufen { display: flex; gap: 8px; flex-wrap: wrap; }
.ze-stufe { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface);
color: var(--color-text); font: inherit; font-size: 14px; cursor: pointer; }
.ze-stufe.ist-an { border-color: var(--color-accent); color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface)); font-weight: var(--weight-medium); }
.ze-label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--color-text-muted); }
.ze-feld { height: 40px; border: 1px solid var(--color-border-strong, var(--color-border)); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 14px;
color: var(--color-text); background: var(--color-surface); }
.ze-text { height: auto; min-height: 150px; padding: 10px 12px; line-height: 1.45; resize: vertical; }
.ze-schalterzeile { display: flex; gap: 8px; flex-wrap: wrap; }
.ze-schalter { display: inline-flex; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-bg-alt);
color: var(--color-text-faint); font: inherit; font-size: 13px; cursor: pointer; }
.ze-schalter.ist-an { border-color: var(--color-accent); color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface)); }
.modal.ze-modal .modal-footer { justify-content: space-between; align-items: center; flex-wrap: wrap; }
.ze-hinweis { flex: 1 1 220px; font-size: 13px; color: var(--color-text-muted); }
.ze-knoepfe { display: flex; gap: 8px; }
@media (max-width: 760px) {
.ze-knoepfe { width: 100%; }
.ze-knoepfe .btn { flex: 1; min-height: 44px; }
}
.po-karte.ist-gesichert { border: 1.5px solid var(--color-success); padding: 9.5px 10.5px; background: color-mix(in srgb, var(--color-success) 7%, var(--color-surface)); }
.zf-karte { border: 1px solid var(--color-border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--color-surface); }
.zf-vorschlag { border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border)); }
.zf-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.zf-titel { font-size: 13.5px; font-weight: var(--weight-semibold); }
.zf-unter { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.zf-hinweis, .zf-fuss { font-size: 12px; color: var(--color-text-muted); line-height: 1.45; }
.zf-fuss { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.zf-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.zf-zahl { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 9px; background: var(--color-bg-alt); font-size: 11.5px; color: var(--color-text-muted); }
.zf-zahl-wert { font-size: 18px; font-weight: var(--weight-semibold); color: var(--color-text); font-variant-numeric: tabular-nums; }
.zf-zahl.ist-warn .zf-zahl-wert { color: var(--color-warning-strong, #8a4a0c); }
.zf-abschnitt { font-size: 11px; color: var(--color-text-muted); letter-spacing: .04em; text-transform: uppercase; }
.zf-konflikte { border: 1px solid var(--color-border); border-radius: 9px; overflow: hidden; }
.zf-konflikt { display: grid; gap: 10px; padding: 8px 10px; align-items: center; font-size: 12.5px; border-top: 1px solid var(--color-border); }
.zf-konflikt:first-child { border-top: 0; }
.zf-konflikt-kopf { background: var(--color-bg-alt); font-size: 11px; color: var(--color-text-muted); letter-spacing: .04em; }
.zf-konflikt-datei { display: flex; flex-direction: column; min-width: 0; }
.zf-konflikt-pfad { font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zf-konflikt-nas { font-size: 11.5px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zf-konflikt-zelle { white-space: nowrap; font-variant-numeric: tabular-nums; }
.zf-neuer { margin-left: 6px; font-size: 10.5px; padding: 1px 6px; border-radius: 5px; color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface)); }
.zf-mehr { padding: 6px 10px; font-size: 12px; color: var(--color-text-muted); border-top: 1px solid var(--color-border); }
.zf-regeln { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.zf-regeln > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; }
.zf-regeln > div > span:first-child { color: var(--color-text-muted); }
.zf-jobs { display: flex; flex-direction: column; gap: 6px; }
.zf-job { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 12.5px; }
.zf-job .po-balken { grid-column: 2; }
.zf-job-name { font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zf-job-text { color: var(--color-text-muted); text-align: right; grid-column: 3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.zf-job.ist-fertig .zf-job-text { color: var(--color-success); }
.zf-job.ist-fehler .zf-job-text { color: var(--color-danger, #c2412d); }
@media (max-width: 760px) {
.zf-kopf { flex-direction: column; }
.zf-kopf .btn { min-height: 40px; }
.zf-konflikt { grid-template-columns: minmax(0, 1fr) !important; gap: 2px; }
.zf-konflikt-kopf { display: none; }
.zf-job { grid-template-columns: minmax(0, 1fr) auto; }
.zf-job .po-balken { grid-column: 1 / -1; grid-row: 2; }
.zf-job-text { grid-column: 2; }
}
.dw .pd-widget-title .dw-zahl { margin-left: 8px; font-size: 12.5px; font-weight: 400; color: var(--color-text-muted); text-transform: none; letter-spacing: 0; }
.dw-body { display: flex; flex-direction: column; gap: 12px; }
.dw-kunde { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.dw-kunde-titel, .dw-kunde-hinweis { color: var(--color-text-muted); }
.dw-leiste { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dw-filter { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; }
.dw-chip { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface);
color: var(--color-text); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.dw-chip.ist-an { border-color: var(--color-accent); color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface)); font-weight: var(--weight-medium); }
.dw-suche { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--color-border); border-radius: 10px;
width: 200px; color: var(--color-text-muted); background: var(--color-surface); }
.dw-suche svg { width: 14px; height: 14px; flex: none; }
.dw-suche-feld { border: 0; outline: 0; background: none; font: inherit; font-size: 13px; width: 100%; color: var(--color-text); }
.dw-abschnitt { display: flex; flex-direction: column; gap: 6px; }
.dw-gruppe { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-muted); }
.dw-gruppe[hidden] { display: none; }
.dw-gruppe svg { width: 14px; height: 14px; }
.dw-gruppe.ist-an { color: var(--color-accent); }
.dw-chip-trenner { width: 1px; align-self: stretch; margin: 4px 4px; background: var(--color-border); }
.dw-leiste { flex-wrap: nowrap; }
.dw-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--color-bg-alt); border-radius: 10px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.dw-seg::-webkit-scrollbar { display: none; }
.dw-seg-knopf { border: 0; background: none; font: inherit; font-size: 13px; color: var(--color-text-muted); padding: 6px 12px; border-radius: 8px; white-space: nowrap; cursor: pointer; display: inline-flex; gap: 6px; align-items: baseline; }
.dw-seg-knopf.ist-an { background: var(--color-surface); color: var(--color-text); font-weight: var(--weight-medium); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.dw-seg-zahl { font-size: 12px; color: var(--color-text-faint); font-weight: 400; }
.dw-lupe { margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.dw-lupe svg { width: 15px; height: 15px; }
.dw-lupe.ist-an { border-color: var(--color-accent); color: var(--color-accent); }
.dw-suche[hidden] { display: none; }
.dw-body > .dw-suche { width: auto; }
.dw-kunde .ft-schalter { height: 28px; }
.dw-lf-neu { margin-left: auto; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: var(--weight-medium); color: var(--color-accent); cursor: pointer; padding: 0; }
.dw-lf-liste { display: flex; flex-direction: column; gap: 8px; }
.dw-lf { border: 1px solid var(--color-border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--color-surface); }
.dw-lf-oben { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dw-lf-text { flex: 1 1 220px; min-width: 0; }
.dw-lf-name { font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.dw-lf-meta { font-size: 12.5px; color: var(--color-text-muted); }
.dw-lf-marke { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--color-accent-soft); color: var(--color-accent); font-weight: var(--weight-medium); white-space: nowrap; }
.dw-lf .nl-block { margin-top: 0; max-width: none; }
.dw-lf-leer { font-size: 13px; color: var(--color-text-faint); padding: 4px 0; }
.action-sheet-abschnitt { font-size: 11px; font-weight: 600; letter-spacing: .07em; color: var(--color-text-muted); padding: 10px 12px 2px; }
.action-sheet-notiz { font-size: 12.5px; color: var(--color-text-faint); padding: 8px 12px 4px; border-top: 1px solid var(--color-border); margin-top: 6px; }
.nl-fuer b { color: var(--color-text); }
.dw-abschnitt[hidden], .dw-abschnitt.dw-weg { display: none; }
.dw-abschnitt-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dw-abschnitt-titel { font-size: 12px; color: var(--color-text-muted); letter-spacing: .05em; }
.dw-abschnitt-hinweis { font-size: 12px; color: var(--color-text-faint); }
.dw-abschnitt-extra { margin-left: auto; }
.dw .pm-section-header { display: none; }
.dw-kasten { border: 1px solid var(--color-border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.dw-assets-liste > .expand-panel-section { background: none; border: none; padding: 0; margin: 0; }
.dw-assets-liste > .expand-panel-section > .asset-abschnitt-kopf { margin: 0 0 var(--space-2); padding: 0; background: none; border-bottom: 0; justify-content: flex-end; }
.dw-assets-liste > .expand-panel-section > .asset-abschnitt-kopf > h3 { display: none; }
.dw-assets-liste .expand-documents-list { max-height: none; }
.dw-asset.is-dragover .dw-asset-ablage { color: var(--color-accent); border-color: var(--color-accent); }
.dw-asset .assets-ins-kit { flex: none; }
.dw-mehr { margin-top: 4px; }
.dw-ordner-liste { display: flex; flex-direction: column; margin-bottom: var(--space-2); }
.dw-o-zeile {
display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 4px;
border: 0; border-top: 1px solid var(--color-border); background: none;
font: inherit; font-size: 13.5px; color: var(--color-text); text-align: left; cursor: pointer;
}
.dw-o-zeile:hover { background: var(--color-surface-2); }
.dw-o-pfeil { display: flex; color: var(--color-text-faint); flex: none; }
.dw-o-pfeil svg { width: 14px; height: 14px; }
.dw-o-sym { display: flex; color: var(--color-accent); flex: none; }
.dw-o-sym svg { width: 16px; height: 16px; }
.dw-o-name { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-o-zahl { font-size: 12px; color: var(--color-text-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dw-o-inhalt { padding-left: 26px; }
.dw-o-inhalt > .expand-panel-section { background: none; border: none; padding: 0; margin: 0 0 var(--space-2); }
.dw-o-inhalt > .expand-panel-section > .asset-abschnitt-kopf { display: none; }
.dw-o-link { align-self: flex-start; margin-top: var(--space-2); padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--color-accent-strong); cursor: pointer; }
.dw-o-link:hover { text-decoration: underline; }
.dw-ablage { border: 1.5px dashed var(--color-border); border-radius: 12px; padding: 14px; text-align: center; font-size: 13px; color: var(--color-text-muted); cursor: pointer; }
.dw-ziele { display: none; gap: 10px; }
.dw-ziel { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; padding: 16px 14px; border-radius: 12px; border: 2px dashed var(--color-border);
background: var(--color-bg-alt); text-align: left; font-size: 12.5px; color: var(--color-text-muted); }
.dw-ziel b { font-size: 16px; color: var(--color-text); }
.dw-ziel.ist-drueber { border-style: solid; border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface)); }
.dw-ziel.ist-drueber b { color: var(--color-accent); }
.dw.ist-ziehen .dw-ablage { border-color: transparent; padding: 0; cursor: default; }
.dw.ist-ziehen .dw-ablage-text { display: none; }
.dw.ist-ziehen .dw-ziele { display: flex; }
@media (max-width: 640px) {
.dw-suche { width: 100%; }
.dw-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.dw-kunde-hinweis { display: none; }
.dw-ablage { display: none; }
}
.bb-kacheln { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-kachel { position: relative; width: 112px; height: 84px; padding: 0; border: 1px solid var(--color-border); border-radius: 10px;
overflow: hidden; background: var(--color-bg-alt); cursor: zoom-in; }
.bb-kachel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-kachel:hover { border-color: var(--color-accent); }
.bb-lupe { position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; border-radius: 999px; display: flex; align-items: center;
justify-content: center; background: rgba(4, 5, 9, .62); color: #fff; }
.bb-lupe svg { width: 14px; height: 14px; }
.bb { position: fixed; inset: 0; z-index: 300; background: rgba(4, 5, 9, .94); display: flex; flex-direction: column; }
.bb-kopf { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: #fff; font-size: 14px; }
.bb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bb-zahl { margin-left: auto; color: rgba(255, 255, 255, .55); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bb-laden { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .8); font-size: 13px; white-space: nowrap; text-decoration: none; }
.bb-laden svg { width: 14px; height: 14px; }
.bb-zu { background: none; border: 0; color: rgba(255, 255, 255, .7); font-size: 28px; line-height: 1; cursor: pointer; padding: 0 4px; font-family: inherit; }
.bb-zu:hover, .bb-laden:hover { color: #fff; }
.bb-buehne { flex: 1; min-height: 0; display: flex; align-items: center; gap: 8px; padding: 0 8px 16px; }
.bb-bild { flex: 1 1 auto; min-width: 0; max-width: calc(100% - 112px); max-height: 100%; object-fit: contain; margin: 0 auto; border-radius: 6px; }
.bb-pfeil { flex: none; width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06);
color: #fff; font-size: 28px; line-height: 1; cursor: pointer; font-family: inherit; }
.bb-pfeil:hover { background: rgba(255, 255, 255, .14); }
.bb-pfeil[hidden] { display: none; }
@media (max-width: 640px) {
.bb-bild { max-width: 100%; }
.bb-pfeil { position: absolute; bottom: 24px; }
.bb-pfeil.ist-links { left: 24px; }
.bb-pfeil.ist-rechts { right: 24px; }
.bb-laden { font-size: 0; }
}
.nuradmin-feld { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 14px; }
.nuradmin-schloss { display: inline-flex; vertical-align: -2px; margin-right: 5px; }
.nuradmin-schloss svg { width: 13px; height: 13px; }
.nuradmin-zugang { display: flex; flex-direction: column; gap: 8px; }
.nuradmin-zugang[hidden] { display: none; }
.nuradmin-hinweis { margin: 0; font-size: var(--text-meta); color: var(--color-text-muted); }
.nuradmin-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nuradmin-chip {
min-height: 32px; padding: 5px 12px; border-radius: var(--radius-full);
border: 1px solid var(--color-border); background: var(--color-surface);
color: var(--color-text-muted); font-size: var(--text-meta); cursor: pointer;
}
.nuradmin-chip[aria-pressed="true"] {
border-color: var(--color-accent); background: var(--color-accent-soft);
color: var(--color-accent-strong); font-weight: var(--weight-semibold);
}
.pd-nuradmin-btn.is-active { color: var(--color-accent); border-color: var(--color-accent); }
.pd-header.has-hero .pd-nuradmin-btn.is-active { background: var(--color-accent); border-color: var(--color-accent); }
.nuradmin-marke { display: inline-flex; margin-left: 6px; color: var(--color-text-muted); vertical-align: -1px; }
.nuradmin-marke svg { width: 12px; height: 12px; }
:root {
--ct-orange: #c2620f;
--ct-orange-text: #9a4a08;
--ct-orange-soft: #fdf1e4;
--ct-orange-flaeche: #fffaf3;
--ct-orange-rand: #f2dfc4;
--ct-gruen-flaeche: #f6faf8;
--ct-gruen-chip: #eef6f2;
--ct-rot: #b4291f;
--ct-linie: #f0ede7;
--ct-vorjahr: #c9c5bc;
}
html[data-theme="dark"] {
--ct-orange: #e08a3c;
--ct-orange-text: #f0a868;
--ct-orange-soft: #3a2614;
--ct-orange-flaeche: #241a10;
--ct-orange-rand: #4a3420;
--ct-gruen-flaeche: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
--ct-gruen-chip: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface));
--ct-rot: #f07a6e;
--ct-linie: var(--color-border);
--ct-vorjahr: #5c5a55;
}
.ct-seite, .pa-seite, .ma-seite { display: flex; flex-direction: column; gap: 20px; font-variant-numeric: tabular-nums; }
.ct-seite .page-header, .pa-seite .page-header, .ma-seite .page-header { margin-bottom: 0; }
.ct-seite .year-pills.ist-segment, .pa-seite .year-pills.ist-segment, .ma-seite .year-pills.ist-segment {
margin: 0; gap: 2px; padding: 3px; background: var(--color-bg-alt); border-radius: 10px;
}
.ct-seite .year-pills.ist-segment .year-pill, .pa-seite .year-pills.ist-segment .year-pill, .ma-seite .year-pills.ist-segment .year-pill {
height: 34px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--color-text-muted);
}
.ct-seite .year-pills.ist-segment .year-pill.active, .pa-seite .year-pills.ist-segment .year-pill.active, .ma-seite .year-pills.ist-segment .year-pill.active {
background: var(--color-surface); color: var(--color-text); font-weight: var(--weight-medium); box-shadow: 0 1px 2px rgba(22, 21, 18, .08);
}
.ct-seite .year-pills.ist-segment .year-pill, .pa-seite .year-pills.ist-segment .year-pill, .ma-seite .year-pills.ist-segment .year-pill { display: inline-flex; align-items: center; text-decoration: none; }
.ct-tabelle th, .fk-tabelle th, .pa-tabelle th, .ma-tabelle th { text-transform: none; letter-spacing: normal; }
.fk-tabelle th.fk-zahl, .pa-tabelle th.pa-zahl, .ma-tabelle th.ma-zahl { text-align: right; }
.ct-held { padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 22px; }
.ct-held-zeile { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-start; }
.ct-held-text { display: flex; flex-direction: column; gap: 8px; flex: 1 1 420px; min-width: 0; max-width: 760px; }
.ct-marke { display: inline-flex; align-items: center; gap: 8px; color: var(--color-accent); font-weight: var(--weight-medium); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.ct-marke-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); flex: none; }
.ct-satz { font-size: 30px; font-weight: var(--weight-medium); line-height: 1.2; letter-spacing: -.01em; }
.ct-akzent { color: var(--color-accent); }
.ct-warn { color: var(--ct-orange-text); }
.ct-erklaerung { margin: 0; color: var(--color-text-muted); font-size: 15px; line-height: 1.5; }
.ct-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; flex: 1 1 380px; max-width: 460px; }
.ct-kachel { background: var(--color-surface-2); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ct-kachel.ist-gruen { background: var(--ct-gruen-flaeche); }
.ct-kachel-titel { color: var(--color-text-muted); font-size: 13px; }
.ct-kachel-wert { font-size: 22px; font-weight: var(--weight-medium); }
.ct-kachel.ist-gruen .ct-kachel-wert { color: var(--color-accent); }
.ct-kachel:first-child.ist-gruen .ct-kachel-wert { color: var(--color-text); }
.ct-kachel-unter { color: var(--color-text-muted); font-size: 12.5px; }
.ct-kachel:first-child .ct-kachel-unter { color: var(--color-accent); }
.ct-fortschritt { display: flex; flex-direction: column; gap: 8px; }
.ct-fortschritt-text { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--color-text-muted); }
.ct-balken { height: 12px; border-radius: 999px; background: var(--color-bg-alt); overflow: hidden; display: flex; }
.ct-balken-fuell { background: var(--color-accent); border-radius: 999px; }
.ct-diagramm { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.ct-karten-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: baseline; }
.ct-karten-kopf h2 { margin: 0; font-size: 17px; font-weight: var(--weight-semibold); }
.ct-karten-kopf h3 { margin: 0; font-size: 15px; font-weight: var(--weight-semibold); }
.ct-karten-kopf a { font-size: 13px; }
.ct-legende { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--color-text-muted); }
.ct-legende span { display: inline-flex; align-items: center; gap: 6px; }
.ct-legende i { width: 18px; display: inline-block; }
.ct-l-ist { height: 3px; background: var(--color-accent); border-radius: 2px; }
.ct-l-hr { height: 0; border-top: 3px dashed var(--color-accent); }
.ct-l-vj { height: 2px; background: var(--ct-vorjahr); }
.ct-l-kosten { height: 0; border-top: 2px solid var(--ct-orange); }
.ct-svg { width: 100%; min-width: 0; }
.ct-diagramm .ct-svg > svg { display: block; width: 100% !important; height: auto !important; max-width: none; flex: none; }
.ct-svg .ct-gitter { stroke: var(--ct-linie); stroke-width: 1; }
.ct-svg .ct-achse { font-size: 12px; fill: var(--color-text-faint); font-family: inherit; }
.ct-svg .ct-zukunft { fill: var(--color-surface-2); }
.ct-svg .ct-heute { stroke: var(--ct-vorjahr); stroke-dasharray: 3 4; }
.ct-svg .ct-linie-vj { fill: none; stroke: var(--ct-vorjahr); stroke-width: 2; }
.ct-svg .ct-linie-kosten { stroke: var(--ct-orange); stroke-width: 2; }
.ct-svg .ct-text-kosten { font-size: 12px; fill: var(--ct-orange-text); font-family: inherit; font-weight: 500; }
.ct-svg .ct-linie-ist { fill: none; stroke: var(--color-accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ct-svg .ct-linie-hr { fill: none; stroke: var(--color-accent); stroke-width: 2.5; stroke-dasharray: 6 5; stroke-linejoin: round; }
.ct-svg .ct-punkt { fill: var(--color-surface); stroke: var(--color-accent); stroke-width: 2.5; }
.ct-svg .ct-fahne { fill: var(--color-accent); }
.ct-svg .ct-fahne-text { font-size: 12px; fill: #fff; font-weight: 500; font-family: inherit; }
.ct-drei { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.ct-klein { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.ct-leise { color: var(--color-text-muted); font-size: 13px; }
.ct-kv { display: flex; justify-content: space-between; gap: 12px; }
.ct-kv > :last-child { white-space: nowrap; text-align: right; }
.ct-kv > span:first-child { color: var(--color-text-muted); }
.ct-kv strong { font-weight: var(--weight-medium); }
.ct-kv.ist-summe { border-top: 1px solid var(--color-border); padding-top: 10px; }
.ct-kv.ist-summe > span:first-child { color: var(--color-text); }
.ct-kv.ist-summe strong { font-weight: var(--weight-semibold); }
.ct-tabelle-karte { padding: 8px 0 4px; }
.ct-tabelle-rahmen { overflow-x: auto; }
.ct-tabelle { width: 100%; min-width: 760px; border-collapse: collapse; }
.ct-tabelle th { color: var(--color-text-muted); font-size: 12.5px; font-weight: var(--weight-medium); text-align: right; padding: 12px; }
.ct-tabelle td { text-align: right; padding: 10px 12px; border-top: 1px solid var(--ct-linie); }
.ct-tabelle th:first-child, .ct-tabelle td:first-child { text-align: left; padding-left: 24px; }
.ct-tabelle th:last-child, .ct-tabelle td:last-child { padding-right: 24px; }
.ct-tabelle tr.ist-laeuft, .ct-tabelle tr.ist-prognose { color: var(--color-text-muted); }
.ct-tabelle tr.ist-prognose td { font-style: italic; }
.ct-tabelle td.ist-plus { color: var(--color-accent); }
.ct-tabelle td.ist-minus { color: var(--ct-rot); }
.ct-marke-klein { font-size: 11.5px; color: var(--color-text-faint); font-style: normal; margin-left: 6px; }
.ct-daten { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--color-text-muted); font-size: 13px; }
.ct-daten-titel { font-weight: var(--weight-medium); color: var(--color-text); }
.ct-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--ct-gruen-chip); color: var(--color-accent); text-decoration: none; }
.ct-chip.ist-warn { background: var(--ct-orange-soft); color: var(--ct-orange-text); }
a.ct-chip:hover { text-decoration: underline; }
.fk-zurueck { font-size: 13px; margin-bottom: -16px; align-self: flex-start; }
.fk-spalten { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.fk-liste { flex: 999 1 600px; min-width: 0; padding: 8px 0 4px; }
.fk-tabelle { width: 100%; min-width: 600px; border-collapse: collapse; }
.fk-tabelle th { color: var(--color-text-muted); font-size: 12.5px; font-weight: var(--weight-medium); text-align: left; padding: 12px 10px; }
.fk-tabelle td { padding: 9px 10px; vertical-align: middle; }
.fk-tabelle th:first-child, .fk-tabelle td:first-child { padding-left: 22px; }
.fk-tabelle th:last-child, .fk-tabelle td:last-child { padding-right: 22px; }
.fk-tabelle .fk-zahl { text-align: right; white-space: nowrap; }
.fk-tabelle td.fk-leise { color: var(--color-text-muted); }
.fk-personal td { padding-top: 12px; padding-bottom: 12px; border-top: 1px solid var(--ct-linie); background: var(--ct-gruen-flaeche); }
.fk-titel { display: flex; flex-direction: column; gap: 2px; }
.fk-titel strong { font-weight: var(--weight-medium); }
.fk-titel .fk-leise { font-size: 12.5px; color: var(--color-text-muted); }
.fk-gruppe td { padding: 14px 22px 6px; border-top: 1px solid var(--ct-linie); font-size: 12.5px; color: var(--color-text-muted); font-weight: var(--weight-medium); letter-spacing: .03em; text-transform: uppercase; }
.fk-summe td { padding-top: 14px; padding-bottom: 14px; border-top: 1px solid var(--color-border); font-weight: var(--weight-semibold); }
.fk-aktionen { white-space: nowrap; text-align: right; width: 1%; }
.fk-tabelle tr:not(:hover) .fk-aktionen .btn-ghost { opacity: .35; }
.fk-rechts { flex: 1 1 340px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fk-rechenweg, .fk-fehlt { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.fk-rechenweg h2, .fk-fehlt h2 { margin: 0; font-size: 16px; font-weight: var(--weight-semibold); }
.fk-absatz { display: flex; flex-direction: column; gap: 4px; }
.fk-absatz strong { font-weight: var(--weight-medium); }
.fk-absatz span { color: var(--color-text-muted); line-height: 1.5; }
.fk-fehlt { gap: 10px; background: var(--ct-orange-flaeche); border-color: var(--ct-orange-rand); }
.fk-fehlt-zeile { display: flex; justify-content: space-between; gap: 12px; }
.fk-fehlt-zeile a { white-space: nowrap; }
@media (hover: none) {
.fk-tabelle tr:not(:hover) .fk-aktionen .btn-ghost { opacity: 1; }
}
@media (min-width: 1500px) {
.ct-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 0 1 820px; max-width: 820px; }
}
@media (max-width: 640px) {
.ct-held { padding: 20px 18px; gap: 18px; }
.ct-satz { font-size: 23px; }
.ct-erklaerung { font-size: 14px; }
.ct-kacheln { max-width: none; flex-basis: 100%; }
.ct-kachel-wert { font-size: 19px; }
.ct-diagramm { padding: 16px; }
.ct-drei { grid-template-columns: 1fr; }
.fk-zurueck { margin-bottom: -8px; }
}
.pa-inhalt { display: flex; flex-direction: column; gap: 16px; }
.pa-leise { color: var(--color-text-muted); font-size: 13px; }
.pa-plus { color: var(--color-accent); }
.pa-minus { color: var(--ct-rot); }
.pa-hinweis { padding: 12px 16px; border-radius: 12px; background: var(--ct-orange-flaeche); border: 1px solid var(--ct-orange-rand); color: var(--ct-orange-text); }
.pa-drei { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.pa-karte { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pa-stempel { gap: 16px; }
.pa-kopfzeile { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pa-kopfzeile h2 { margin: 0; font-size: 16px; font-weight: var(--weight-semibold); }
.pa-stempel .pa-kopfzeile { align-items: center; }
.pa-zustand { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text-muted); font-weight: var(--weight-medium); }
.pa-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border-strong); flex: none; }
.pa-zustand.ist-da { color: var(--color-accent); }
.pa-zustand.ist-da .pa-punkt { background: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-soft); }
.pa-zustand.ist-warn { color: var(--ct-orange-text); }
.pa-zustand.ist-warn .pa-punkt { background: var(--ct-orange); box-shadow: 0 0 0 4px var(--ct-orange-soft); }
.pa-gross-zahl { font-size: 44px; font-weight: var(--weight-medium); letter-spacing: -.02em; line-height: 1.1; }
.pa-gross-zahl small { font-size: 18px; color: var(--color-text-muted); font-weight: 400; }
.pa-gross-zahl.ist-plus { color: var(--color-accent); }
.pa-gross-zahl.ist-minus { color: var(--ct-rot); }
.btn.pa-gross { height: 52px; border-radius: 12px; font-size: 16px; font-weight: var(--weight-medium); justify-content: center; gap: 10px; }
.btn.pa-gross svg { width: 18px; height: 18px; }
.btn.pa-gross.ist-gehen { background: var(--color-text); color: var(--color-surface); border: 0; }
.btn.pa-gross.ist-gehen:hover { background: color-mix(in srgb, var(--color-text) 85%, var(--color-surface)); }
.pa-link { font-size: 13px; align-self: flex-start; color: var(--color-accent); padding: 0; }
.pa-stempel .field { margin: 0; }
.pa-fortschritt { display: flex; flex-direction: column; gap: 6px; }
.pa-fortschritt-text { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: 13px; color: var(--color-text-muted); }
.pa-fortschritt-text span { white-space: nowrap; }
.pa-balken { height: 10px; border-radius: 999px; background: var(--color-bg-alt); overflow: hidden; }
.pa-balken > div { height: 100%; background: var(--color-accent); }
.pa-wochen { display: flex; gap: 6px; align-items: flex-end; height: 56px; }
.pa-woche { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 56px; min-width: 0; }
.pa-woche span { font-size: 10.5px; color: var(--color-text-faint); white-space: nowrap; }
.pa-woche-balken { width: 100%; border-radius: 4px; background: var(--color-accent); }
.pa-woche-balken.ist-minus { background: var(--ct-orange); }
.pa-zahl-zeile { display: flex; align-items: baseline; gap: 10px; }
.pa-zahl-zeile .pa-leise { font-size: 14px; }
.pa-urlaub-balken { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--color-bg-alt); }
.pa-urlaub-balken .ist-genommen { background: var(--color-accent); }
.pa-urlaub-balken .ist-beantragt { background: color-mix(in srgb, var(--color-accent) 40%, var(--color-surface)); }
.pa-liste { display: flex; flex-direction: column; gap: 8px; }
.pa-liste-zeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pa-rechts { display: inline-flex; align-items: center; gap: 10px; }
.pa-status { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; background: var(--color-bg-alt); color: var(--color-text-muted); white-space: nowrap; }
.pa-status.ist-warten { background: var(--ct-orange-soft); color: var(--ct-orange-text); }
.pa-status.ist-ok { background: var(--ct-gruen-chip); color: var(--color-accent); }
.pa-status.ist-nein { background: var(--color-danger-soft); color: var(--ct-rot); }
.pa-status.ist-leise { text-decoration: line-through; }
.pa-marke { margin-left: 6px; font-size: 12px; color: var(--color-text-faint); }
.pa-marke.ist-warten { color: var(--ct-orange-text); }
.pa-zwei { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.pa-woche-karte { flex: 999 1 560px; min-width: 0; padding: 8px 0 4px; }
.pa-woche-karte > .pa-kopfzeile { padding: 14px 22px 6px; }
.pa-woche-karte > .pa-kopfzeile > span { font-size: 13px; font-weight: var(--weight-medium); }
.pa-woche-karte > .pa-leise { padding: 0 22px 14px; margin: 0; }
.pa-lohn-karte { flex: 1 1 300px; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.pa-lohn-karte h2 { margin: 0; font-size: 16px; font-weight: var(--weight-semibold); }
.pa-lohn-liste { display: flex; flex-direction: column; gap: 12px; }
.pa-lohn-zeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 10px; color: var(--color-text); text-decoration: none; }
.pa-lohn-zeile:hover { border-color: var(--color-accent); text-decoration: none; }
.pa-lohn-name { display: inline-flex; align-items: center; gap: 10px; }
.pa-lohn-name svg { width: 16px; height: 16px; color: var(--color-text-faint); }
.pa-tabelle-rahmen { overflow-x: auto; }
.pa-tabelle { width: 100%; min-width: 520px; border-collapse: collapse; }
.pa-tabelle th { color: var(--color-text-muted); font-size: 12.5px; font-weight: var(--weight-medium); text-align: left; padding: 10px; }
.pa-tabelle td { padding: 10px; border-top: 1px solid var(--ct-linie); }
.pa-tabelle th:first-child, .pa-tabelle td:first-child { padding-left: 22px; }
.pa-tabelle th:last-child, .pa-tabelle td:last-child { padding-right: 22px; }
.pa-tabelle .pa-zahl { text-align: right; white-space: nowrap; }
.pa-tabelle td.pa-leise { font-size: 14px; }
.pa-inhalt > .card { padding: 8px 0 4px; }
.pa-inhalt > .card > .pa-liste { padding: 14px 22px; }
.pa-inhalt > .card > .pa-leise { padding: 14px 22px; margin: 0; }
.pa-inhalt > .card.pa-offen { padding: 18px 22px; display: flex; flex-direction: column; gap: 10px; }
.pa-offen h2 { margin: 0; font-size: 16px; font-weight: var(--weight-semibold); }
.pa-inhalt > .card.pa-lohn-karte { padding: 20px 22px; }
.pa-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pa-leiste > .pa-leise { flex: 1 1 auto; }
.pa-monat { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 6px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; }
.pa-monat > span { min-width: 120px; text-align: center; font-weight: var(--weight-medium); }
.pa-monat button { width: 30px; height: 30px; border: 0; background: transparent; border-radius: 6px; display: grid; place-items: center; color: var(--color-text-muted); cursor: pointer; }
.pa-monat button:hover { background: var(--color-bg-alt); }
.pa-monat button svg { width: 14px; height: 14px; }
.pa-check { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 12px; }
.pa-check[hidden] { display: none; }
.pa-telefon { flex-direction: column; gap: 14px; }
.pa-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pa-kachel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.pa-kachel .pa-leise { font-size: 12.5px; }
.pa-kachel-wert { font-size: 22px; font-weight: var(--weight-medium); }
.pa-kachel-wert.ist-plus { color: var(--color-accent); }
.pa-kachel-wert.ist-minus { color: var(--ct-rot); }
.pa-verweise { padding: 4px 0; }
.pa-verweis { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; color: var(--color-text); text-decoration: none;
border: 0; border-bottom: 1px solid var(--ct-linie); background: none; font: inherit; text-align: left; cursor: pointer; }
.pa-verweis:last-child { border-bottom: 0; }
.pa-verweis .pa-leise { color: var(--color-text-faint); font-size: 14px; }
.pa-verweis-warn { color: var(--ct-orange-text); font-size: 13px; }
.ma-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ma-kopf-links { display: flex; flex-direction: column; gap: 10px; }
.ma-kopf-links .year-pills { align-self: flex-start; }
.ma-kopf-rechts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ma-kopf-rechts .btn { height: 40px; }
.btn.ma-symbol { width: 40px; padding: 0; justify-content: center; }
.btn.ma-symbol svg { width: 16px; height: 16px; }
.ma-inhalt { display: flex; flex-direction: column; gap: 20px; }
.ma-leise { color: var(--color-text-muted); font-size: 13px; }
.ma-plus { color: var(--color-accent); }
.ma-minus { color: var(--ct-rot); }
.ma-avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-size: 10.5px; font-weight: var(--weight-semibold); }
.ma-avatar.ist-gross { width: 36px; height: 36px; font-size: 12px; }
html[data-theme="dark"] .ma-avatar { filter: brightness(.85); }
.ma-person { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.ma-person > div { display: flex; flex-direction: column; min-width: 0; }
.ma-person strong { font-weight: var(--weight-medium); }
.ma-person .ma-leise { font-size: 12px; color: var(--color-text-faint); display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.ma-marke { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; background: var(--color-bg-alt); color: var(--color-text-muted); white-space: nowrap; }
.ma-person .ma-marke { height: 20px; padding: 0 8px; font-size: 11.5px; }
.ma-marke.ist-ok { background: var(--ct-gruen-chip); color: var(--color-accent); }
.ma-marke.ist-warn { background: var(--ct-orange-soft); color: var(--ct-orange-text); }
.ma-marke.ist-leise { background: transparent; border: 1px solid var(--color-border); }
.ma-tabelle-karte { padding: 8px 0 4px; }
.ma-tabelle-rahmen { overflow-x: auto; }
.ma-tabelle { width: 100%; min-width: 720px; border-collapse: collapse; }
.ma-tabelle th { color: var(--color-text-muted); font-size: 12.5px; font-weight: var(--weight-medium); text-align: left; padding: 12px 10px; }
.ma-tabelle td { padding: 12px 10px; border-top: 1px solid var(--ct-linie); vertical-align: middle; }
.ma-tabelle th:first-child, .ma-tabelle td:first-child { padding-left: 22px; }
.ma-tabelle th:last-child, .ma-tabelle td:last-child { padding-right: 22px; }
.ma-tabelle .ma-zahl { text-align: right; white-space: nowrap; }
.ma-tabelle td.ma-zahl strong { font-weight: var(--weight-medium); }
.ma-tabelle td.ma-zahl svg { width: 14px; height: 14px; color: var(--color-text-faint); }
.ma-tabelle.ist-klein { min-width: 480px; }
.ma-tabelle.ist-klein th, .ma-tabelle.ist-klein td { padding: 8px 10px; }
.ma-tabelle.ist-klein th:first-child, .ma-tabelle.ist-klein td:first-child { padding-left: 0; }
.ma-tabelle.ist-klein th:last-child, .ma-tabelle.ist-klein td:last-child { padding-right: 0; }
.ma-klickbar { cursor: pointer; }
.ma-klickbar:hover td { background: var(--color-surface-2); }
.ma-klickbar:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.ma-heute { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-faint); white-space: nowrap; }
.ma-heute::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ma-heute.ist-da { color: var(--color-accent); }
.ma-heute.ist-warn { color: var(--ct-orange-text); }
.ma-karten-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: baseline; }
.ma-karten-kopf h2 { margin: 0; font-size: 16px; font-weight: var(--weight-semibold); }
.ma-pruefen { padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; background: var(--ct-orange-flaeche); border-color: var(--ct-orange-rand); }
.ma-pruef-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: var(--color-surface); border: 1px solid var(--ct-orange-rand); border-radius: 12px; padding: 12px 14px; }
.ma-pruef-zeile > .ma-avatar { width: 30px; height: 30px; font-size: 11px; }
.ma-pruef-text { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ma-pruef-text strong { font-weight: var(--weight-medium); }
.ma-pruef-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ma-pruef-knoepfe .btn { height: 36px; padding: 0 14px; border-radius: 9px; }
.ma-pruef-knoepfe input[type="datetime-local"] { height: 36px; }
.ma-kalender-karte { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.ma-legende { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--color-text-muted); }
.ma-legende span { display: inline-flex; align-items: center; gap: 6px; }
.ma-legende .ma-k { width: 12px; height: 12px; border-radius: 3px; }
.ma-kalender { min-width: 900px; display: flex; flex-direction: column; gap: 6px; }
.ma-kal-zeile { display: grid; grid-template-columns: 44px repeat(var(--tage, 31), minmax(0, 1fr)); gap: 3px; align-items: center; }
.ma-kal-zeile.ist-kopf { gap: 3px; }
.ma-kal-tag { font-size: 10.5px; color: var(--color-text-faint); text-align: center; }
.ma-kal-name { font-size: 12px; color: var(--color-text-muted); font-weight: var(--weight-medium); }
.ma-k { display: block; height: 22px; border-radius: 4px; box-sizing: border-box; }
.ma-k.ist-leer { background: var(--color-surface-2); border: 1px solid var(--ct-linie); }
.ma-k.ist-frei { background: var(--color-bg-alt); }
.ma-k.ist-urlaub { background: var(--color-accent); }
.ma-k.ist-beantragt { background: var(--color-surface); border: 1.5px dashed var(--color-accent); }
.ma-k.ist-krank { background: #d98a4e; }
.ma-k.ist-sonstiges { background: var(--color-tone-slate); }
.ma-person-monat { display: flex; flex-direction: column; gap: 14px; }
.ma-person-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.ma-person-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.ma-abw-liste { display: flex; flex-direction: column; gap: 6px; }
.ma-abw { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--color-surface-2); }
.ma-zeit { display: inline-flex; align-items: center; height: 26px; padding: 0 8px; margin: 2px 6px 2px 0; border-radius: 7px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 13px; cursor: pointer; font-variant-numeric: tabular-nums; }
.ma-zeit:hover { border-color: var(--color-accent); }
.ma-zeit.ist-pruefen { border-color: var(--ct-orange-rand); background: var(--ct-orange-soft); color: var(--ct-orange-text); }
.ma-zeit.ist-abgelehnt { text-decoration: line-through; color: var(--color-text-faint); }
.ma-protokoll { font-size: 13px; }
.ma-protokoll summary { cursor: pointer; color: var(--color-text-muted); }
.ma-protokoll > div { padding: 3px 0; }
.ma-form h3 { margin: 18px 0 10px; font-size: 14px; font-weight: var(--weight-semibold); }
.ma-form h3:first-child { margin-top: 0; }
.ma-form .field small { display: block; margin-top: 4px; font-size: 12px; }
.ma-check { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 10px; cursor: pointer; }
.ma-formate { display: flex; flex-direction: column; gap: 8px; }
.ma-form .ma-formate { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.btn.ma-loeschen { color: var(--ct-rot); margin-right: auto; }
.ma-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.ma-kachel { padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.ma-kachel > .ma-leise:first-child { font-size: 13px; }
.ma-kachel > .ma-leise:last-child { font-size: 12.5px; }
.ma-kachel strong { font-size: 26px; font-weight: var(--weight-medium); }
.ma-lohn-spalten { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.ma-lohn-links { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ma-lohn-rechts { flex: 1 1 320px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ma-ablage { border: 1.5px dashed var(--ct-vorjahr); border-radius: 16px; padding: 18px 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; color: var(--color-text-muted); background: var(--color-surface-2); cursor: pointer; }
.ma-ablage > span:nth-child(2) { flex: 1 1 auto; }
.ma-ablage svg { width: 20px; height: 20px; color: var(--color-text-faint); }
.ma-ablage:hover, .ma-ablage.ist-ueber { border-color: var(--color-accent); background: var(--ct-gruen-flaeche); }
.ma-ablage:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ma-ueberweisung { display: inline-flex; align-items: center; gap: 8px; }
.ma-ueberweisung .btn-ghost { width: 32px; height: 32px; padding: 0; border: 1px solid var(--color-border); border-radius: 8px; display: grid; place-items: center; }
.ma-ueberweisung .btn-ghost svg { width: 15px; height: 15px; }
.ma-bezahlt { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--ct-orange-text); cursor: pointer; }
.ma-bezahlt.ist-an { color: var(--color-accent); }
.ma-bezahlt:hover { text-decoration: underline; }
.ma-tabelle-fuss { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 12px 22px 14px; border-top: 1px solid var(--ct-linie); }
.ma-tabelle-fuss .btn { height: 40px; }
.ma-leer { padding: 22px; }
.ma-leer p { margin: 0; }
.ma-klein { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.ma-klein h2 { margin: 0; font-size: 16px; font-weight: var(--weight-semibold); }
.ma-kv { display: flex; justify-content: space-between; gap: 12px; }
.ma-kv.ist-summe { border-top: 1px solid var(--color-border); padding-top: 8px; }
.ma-abschluss { gap: 12px; }
.ma-abschluss > .btn { height: 44px; justify-content: center; }
.ma-abschluss > small { font-size: 12.5px; line-height: 1.45; }
.ma-abschluss-stand { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ma-abschluss-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.ma-check-liste { display: flex; flex-direction: column; gap: 12px; }
.ma-check-punkt { display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; }
.ma-check-kreis { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ct-orange); color: #fff; }
.ma-check-punkt.ist-ok .ma-check-kreis { background: var(--color-accent); }
.ma-check-kreis svg { width: 11px; height: 11px; stroke-width: 3; }
.ma-abschluss .ma-formate { padding-top: 4px; }
.ma-abschluss .ma-formate > .ma-leise:first-child { font-size: 13px; }
.ma-format { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ma-format a { font-size: 13px; }
.ma-abschluss .ma-check { margin: 0; height: 32px; padding: 0 10px; border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-text-muted); font-size: 13px; }
.ma-abschluss .ma-check:has(input:checked) { border-color: var(--color-accent); background: var(--ct-gruen-chip); color: var(--color-accent); }
.ma-abschluss .ma-check input { accent-color: var(--color-accent); }
.ma-giro { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ma-giro-bild { width: min(320px, 100%); height: auto; border-radius: 8px; }
.ma-versand { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.ma-versand-mail { border: 1px solid var(--color-border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.ma-versand-mail.ist-gesperrt { background: var(--ct-orange-flaeche); border-color: var(--ct-orange-rand); }
.ma-versand-mail .ma-check { margin: 0; }
.ma-versand-mail .ma-marke { align-self: flex-start; }
.ma-versand-mail details summary { cursor: pointer; color: var(--color-text-muted); font-size: 13px; }
.ma-versand-mail details p { margin: 6px 0; }
.st-knopf { height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--color-bg-alt); color: var(--color-text);
font: inherit; font-size: 13px; font-weight: var(--weight-medium); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-knopf[hidden] { display: none; }
.st-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--color-text-faint); flex: none; }
.st-knopf.ist-da { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.st-knopf.ist-da .st-punkt { background: var(--color-accent); }
.st-knopf.ist-vergessen { background: var(--ct-orange-soft); color: var(--ct-orange-text); }
.st-knopf.ist-vergessen .st-punkt { background: var(--ct-orange); }
.sidebar-footer > .st-knopf { align-self: stretch; justify-content: center; margin: 0; height: 36px; }
.sidebar-footer > .st-knopf:not(.ist-da):not(.ist-vergessen) { background: var(--sidebar-hover); color: var(--sidebar-text-active); }
.sidebar-collapsed .sidebar-footer > .st-knopf .st-text { display: none; }
.sidebar-collapsed .sidebar-footer > .st-knopf { padding: 0; width: 34px; align-self: center; }
html[data-theme="dark"] .st-knopf.ist-da { color: var(--color-accent); }
.st-uhr[hidden] { display: none; }
.st-uhr { cursor: pointer; color: var(--color-text-muted); font: inherit; }
.st-uhr.ist-da { background: var(--color-accent-soft); border-color: color-mix(in srgb, var(--color-accent) 25%, var(--color-border)); color: var(--color-accent-strong); }
html[data-theme="dark"] .st-uhr.ist-da { color: var(--color-accent); }
.st-uhr.ist-vergessen { background: var(--ct-orange-soft); border-color: color-mix(in srgb, var(--ct-orange) 35%, var(--color-border)); color: var(--ct-orange-text); }
.st-uhr-zeit { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.st-blatt-grund { position: fixed; inset: 0; z-index: 1200; background: rgba(22, 21, 18, .42); display: flex; align-items: flex-end; }
.st-blatt { width: 100%; background: var(--color-surface); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .25);
padding: 12px 18px calc(env(safe-area-inset-bottom, 0px) + 22px); display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; }
.st-blatt-griff { align-self: center; width: 40px; height: 4px; border-radius: 4px; background: var(--color-border-strong); }
.st-blatt-kopf { display: flex; align-items: baseline; gap: 10px; }
.st-blatt-kopf b { flex: 1; font-size: 17px; font-weight: 600; }
.st-blatt-zeit { font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.st-blatt-zeile { font-size: 13px; color: var(--color-text-muted); }
.st-blatt-knopf { height: 48px; border: 0; border-radius: 12px; background: var(--color-text); color: var(--color-surface); font: inherit; font-weight: var(--weight-medium);
display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; }
.st-blatt-knopf:disabled { opacity: .6; }
.st-blatt-link { align-self: center; font-size: 13px; color: var(--color-accent); text-decoration: none; padding: 4px 8px; }
.st-hinweis { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 300; display: flex; align-items: center; gap: 14px;
padding: 10px 12px 10px 16px; border-radius: 12px; background: var(--color-text); color: var(--color-surface); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); font-size: 14px; }
.st-hinweis button { border: 0; background: none; color: var(--color-accent-soft); font: inherit; font-weight: var(--weight-medium); cursor: pointer; padding: 4px 6px; }
@media (max-width: 900px) {
.sidebar-footer > .st-knopf { display: none; }
}
@media (max-width: 640px) {
.pa-stempel { border-radius: 18px; padding: 20px; gap: 14px; }
.pa-stempel .pa-kopfzeile > .pa-leise, .pa-stempel .pa-link { display: none; }
.pa-stempel .pa-gross-zahl { font-size: 52px; }
.btn.pa-gross { height: 56px; border-radius: 14px; font-size: 17px; }
.pa-drei { grid-template-columns: 1fr; gap: 14px; }
.pa-karte { padding: 18px; }
.pa-monat > span { min-width: 100px; }
.ma-kopf { align-items: stretch; }
.ma-kopf-rechts { justify-content: flex-start; }
.ma-pruef-knoepfe { width: 100%; }
.ma-pruef-knoepfe .btn { flex: 1; }
.ma-kachel strong { font-size: 21px; }
.ma-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ma-kachel > .ma-leise:last-child { display: none; }
.st-hinweis { bottom: 16px; width: calc(100% - 32px); justify-content: space-between; }
}
.ma-seitenbild { position: relative; display: block; width: 120px; aspect-ratio: 210 / 297; padding: 0; border: 1px solid var(--color-border); border-radius: 8px;
overflow: hidden; background: #fff; cursor: zoom-in; flex: none; }
.ma-seitenbild:disabled { cursor: progress; }
.ma-seitenbild:not(:disabled):hover { border-color: var(--color-accent); }
.ma-seitenbild img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.ma-seitenbild-leer { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; color: var(--color-text-faint); background: var(--color-surface-2); }
.ma-seitenbild.ist-fehler .ma-seitenbild-leer { color: var(--ct-orange-text); }
.ma-seitenbild .bb-lupe { right: 5px; bottom: 5px; }
.ma-tabelle .ma-seitenbild { width: 56px; border-radius: 6px; }
.ma-tabelle .ma-seitenbild .bb-lupe { width: 20px; height: 20px; right: 3px; bottom: 3px; }
.ma-tabelle .ma-seitenbild .bb-lupe svg { width: 11px; height: 11px; }
.ma-versand-mail { flex-direction: row; align-items: flex-start; gap: 16px; }
.ma-versand-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ma-versand-text details[open] summary { margin-bottom: 4px; }
.ma-import { display: flex; flex-direction: column; gap: 18px; }
.ma-import > p { margin: 0; }
.ma-import-monat { display: flex; flex-direction: column; gap: 8px; }
.ma-import-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ma-import-kopf h3 { margin: 0; font-size: 15px; font-weight: var(--weight-semibold); }
.ma-import-kopf input[type="month"] { height: 34px; }
.ma-import .ma-tabelle td { vertical-align: middle; }
.ma-import .ma-tabelle small { display: block; font-size: 11.5px; }
.modal-footer > .ma-leise:first-child { margin-right: auto; }
@media (max-width: 640px) {
.pd-dok-art-spalte { width: auto; }
.pd-dok-art { font-size: 11.5px; padding: 3px 7px; }
}
@media (max-width: 640px) {
.ma-versand-mail { flex-direction: column; }
.ma-versand-mail > .ma-seitenbild { width: 96px; }
}
.fk-import { display: flex; flex-direction: column; gap: 12px; }
.fk-import > p { margin: 0; }
.fk-import .fk-tabelle { min-width: 640px; }
.fk-import .fk-tabelle td { vertical-align: middle; }
.fk-import .fk-tabelle select { height: 32px; }
.fk-import tr.ist-aus td:not(:first-child) { opacity: .5; }
.modal-footer > .fk-leise:first-child { margin-right: auto; }
.shotdoc-tile.ist-props { grid-column: 1 / -1; }
.pl-seite { display: flex; flex-direction: column; gap: var(--space-4); }
.pl-banner { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; border-radius: 10px; background: var(--color-accent-soft); color: var(--color-accent-strong); }
.pl-banner-zeile { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13.5px; }
.pl-banner-namen { color: var(--color-accent); min-width: 0; flex: 1 1 240px; }
.pl-banner-knoepfe { display: flex; gap: 8px; margin-left: auto; }
.pl-vorschlaege { display: flex; flex-direction: column; border-top: 1px solid rgba(10, 107, 79, .18); }
.pl-vorschlag { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(10, 107, 79, .12); }
.pl-vorschlag .pl-name { flex: 1; }
.pl-leiste { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pl-umschalter { display: inline-flex; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; }
.pl-umschalter button { border: 0; background: var(--color-surface); font: inherit; font-size: 13px; padding: 6px 14px; color: var(--color-text-muted); cursor: pointer; }
.pl-umschalter button.ist-an { background: var(--color-text); color: var(--color-surface); }
.pl-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.pl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pl-chip { height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid var(--color-border); background: var(--color-surface); font: inherit; font-size: 13px; color: var(--color-text-muted); cursor: pointer; }
.pl-chip.ist-an { background: var(--color-text); border-color: var(--color-text); color: var(--color-surface); }
.pl-zahlen { margin-left: auto; font-size: 13px; color: var(--color-text-faint); }
.pl-tabelle { border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); overflow: hidden; }
.pl-zeile { display: grid; grid-template-columns: 40px minmax(0, 1.4fr) 64px minmax(0, 1fr) 176px minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--color-border); font-size: 14px; }
.pl-kopf { background: var(--color-surface-2); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-faint); }
.pl-prop { cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.pl-prop:hover { background: var(--color-surface-2); }
.pl-prop.ist-fertig .pl-name b { color: var(--color-text-muted); }
.pl-gruppe { display: flex; gap: 10px; padding: 9px 16px; background: var(--color-bg-alt); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); }
.pl-gruppe-zahl { font-weight: 400; color: var(--color-text-faint); }
.pl-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-name b { font-weight: 500; overflow-wrap: anywhere; }
.pl-name small { font-size: 12px; color: var(--color-text-faint); }
.pl-menge { color: var(--color-text-muted); }
.pl-notiz { font-size: 13px; color: var(--color-text-muted); overflow-wrap: anywhere; }
.pl-szenen { display: flex; flex-wrap: wrap; gap: 4px; }
.pl-szene { font-size: 12px; font-weight: 600; color: var(--color-accent); background: var(--color-accent-soft); border-radius: 10px; padding: 2px 8px; }
.pl-von { display: inline-flex; border: 1px solid var(--color-border); border-radius: 7px; overflow: hidden; justify-self: start; }
.pl-von-knopf { border: 0; background: var(--color-surface); font: inherit; font-size: 12px; padding: 4px 9px; color: var(--color-text-muted); cursor: pointer; }
.pl-von-knopf.ist-an { background: var(--color-accent-soft); color: var(--color-accent-strong); font-weight: 500; }
.pl-person { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pl-person-name { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-niemand { font-size: 13px; color: var(--color-text-faint); }
.pl-avatar { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--color-accent); color: #fff; font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.pl-avatar.ist-kunde { background: #3f6fb5; }
.pl-kreis { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--color-border-strong); background: var(--color-surface); padding: 0; display: inline-flex; align-items: center; justify-content: center; color: transparent; cursor: pointer; }
.pl-kreis svg { width: 12px; height: 12px; }
.pl-kreis.st-1 { border-color: var(--color-warning); background: var(--color-warning-soft); color: #a3630a; }
.pl-kreis.st-2 { border-color: var(--color-accent); background: var(--color-accent); color: #fff; }
.pl-leer, .pl-leer-filter { padding: 28px 16px; text-align: center; color: var(--color-text-muted); font-size: 14px; }
.pl-leer { border: 1px dashed var(--color-border-strong); border-radius: 12px; }
.pl-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; align-items: start; }
.pl-spalte { display: flex; flex-direction: column; gap: 10px; background: var(--color-bg-alt); border-radius: 12px; padding: 14px; }
.pl-spalte-kopf { display: flex; align-items: center; gap: 10px; }
.pl-spalte-titel { display: flex; flex-direction: column; }
.pl-spalte-titel b { font-weight: 500; font-size: 14.5px; }
.pl-spalte-titel small { font-size: 12px; color: var(--color-text-faint); }
.pl-karte { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.pl-karte:hover { border-color: var(--color-border-strong); }
.pl-karte-kopf { display: flex; align-items: flex-start; gap: 10px; }
.pl-karte-kopf b { flex: 1; font-weight: 500; font-size: 14px; }
.pl-form { display: flex; flex-direction: column; gap: 16px; }
.pl-reihe { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 12px; }
.pl-feld { display: flex; flex-direction: column; gap: 6px; }
.pl-label { font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-faint); }
.pl-hinweis { font-size: 12.5px; color: var(--color-text-faint); }
.pl-wahl { display: grid; gap: 8px; }
.pl-wahl-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pl-wahl-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pl-wahl-knopf { height: 40px; border-radius: 9px; border: 1px solid var(--color-border-strong); background: var(--color-surface); font: inherit; font-size: 14px; color: var(--color-text-muted); cursor: pointer; }
.pl-wahl-knopf.ist-an { border: 1.5px solid var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent-strong); font-weight: 500; }
.pl-loeschen { margin-right: auto; color: var(--color-danger); }
.sz-ansicht { margin-top: var(--space-4); display: flex; flex-direction: column; gap: 14px; }
.sz-werkzeuge { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.sz-karte { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; }
.sz-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; background: color-mix(in srgb, var(--color-warning-soft) 45%, var(--color-surface)); border-bottom: 1px solid var(--color-border); }
.sz-nr { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #a3630a; white-space: nowrap; }
.sz-motiv { font: inherit; font-size: 15px; font-weight: 500; color: var(--color-text); border: 1px solid transparent; border-radius: 6px; background: transparent; padding: 3px 6px; max-width: 100%; }
.sz-motiv:hover:not(:disabled), .sz-motiv:focus { border-color: var(--color-border-strong); background: var(--color-surface); outline: none; }
.sz-chip { font: inherit; font-size: 11.5px; font-weight: 600; color: var(--color-text-faint); border: 1px solid var(--color-border); border-radius: 8px; padding: 1px 6px; background: var(--color-surface); cursor: pointer; }
.sz-chip.ist-an { color: var(--color-text-muted); }
.sz-chip:disabled { cursor: default; opacity: 1; }
.sz-einst { margin-left: auto; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.sz-einst-label { font-size: 12.5px; color: var(--color-text-faint); }
.sz-einst-nr { font: inherit; font-size: 11.5px; font-weight: 600; color: var(--color-accent); background: var(--color-accent-soft); border: 0; border-radius: 9px; padding: 1px 7px; }
button.sz-einst-nr { cursor: pointer; }
button.sz-einst-nr:hover { background: color-mix(in srgb, var(--color-accent-soft) 70%, var(--color-accent)); color: #fff; }
.sz-mehr { border: 0; background: transparent; color: var(--color-text-faint); cursor: pointer; padding: 2px; display: inline-flex; }
.sz-mehr svg { width: 16px; height: 16px; }
.sz-felder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; padding: 12px 16px; }
.sz-feld { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sz-feld-label { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-faint); }
.sz-feld-text { font: inherit; font-size: 13px; line-height: 1.45; color: var(--color-text); border: 1px solid transparent; border-radius: 6px; background: transparent; padding: 3px 5px; margin: -3px -5px; resize: none; overflow: hidden; }
.sz-feld-text:hover:not(:disabled), .sz-feld-text:focus { border-color: var(--color-border-strong); background: var(--color-surface-2); outline: none; }
.sz-feld-text:disabled { color: var(--color-text); }
.shotdoc-th-mither { display: flex; flex-direction: column; min-width: 0; }
.shotdoc-th-her { font-size: 9.5px; font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--color-text-faint); }
.shotdoc-nurlesen { font-size: 13px; color: var(--color-text-muted); padding: 6px 8px; overflow-wrap: anywhere; }
.sd-props-rahmen { display: flex; gap: var(--space-4); align-items: flex-start; }
.sd-props-haupt { flex: 1 1 0; min-width: 0; }
.sd-props { width: 330px; flex: none; margin-top: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); display: flex; flex-direction: column; position: sticky; top: 72px; max-height: calc(100vh - 96px); overflow: hidden; }
.sd-props[hidden] { display: none; }
.sd-props-kopf { display: flex; align-items: flex-start; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--color-border); }
.sd-props-kopf-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.sd-props-titel { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent); }
.sd-props-unter { font-size: 13.5px; color: var(--color-text-muted); }
.sd-props-zu { border: 0; background: transparent; color: var(--color-text-faint); cursor: pointer; padding: 4px; margin-left: auto; display: inline-flex; }
.sd-props-zu svg { width: 14px; height: 14px; }
.sd-props-liste { overflow-y: auto; }
.sd-props-zeile { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--color-border); }
.sd-props-name { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sd-props-name b { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.sd-props-name small { font-size: 12px; color: var(--color-text-faint); }
.sd-props-zeile.ist-fertig .sd-props-name b { color: var(--color-text-muted); }
.sd-props-zeile .pl-szenen { flex: none; max-width: 92px; justify-content: flex-end; }
.sd-props-leer { margin: 0; padding: 18px 16px; font-size: 13.5px; color: var(--color-text-muted); }
.sd-props-fuss { padding: 12px 16px; border-top: 1px solid var(--color-border); display: flex; }
.sd-props-fuss .btn { flex: 1; justify-content: center; }
.shotdoc-props-btn.ist-an { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-accent-strong); }
.pl-tabelle.mit-tagen .pl-zeile { grid-template-columns: 40px minmax(0, 1.5fr) 60px minmax(0, 0.9fr) minmax(0, 0.9fr) 170px minmax(0, 1fr); }
.pl-gruppe.ist-tag { align-items: center; gap: 12px; color: var(--color-text); }
.pl-gruppe-info { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--color-text-muted); }
.pl-gruppe-rechts { margin-left: auto; font-size: 12.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--color-text-faint); }
.pl-gruppe .btn { text-transform: none; letter-spacing: 0; }
.pl-tage { display: flex; flex-wrap: wrap; gap: 4px; }
.pl-tag { font-size: 11.5px; font-weight: 600; color: var(--color-text-muted); background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 10px; padding: 1px 7px; white-space: nowrap; }
.pl-tage-leer { font-size: 12.5px; color: var(--color-text-faint); }
.pl-chip.ist-fest { background: var(--color-accent-soft); border-color: var(--color-accent-soft); color: var(--color-accent-strong); cursor: default; }
.pl-zuordnen { display: flex; flex-direction: column; gap: 14px; }
.pl-zuordnen-zeile { display: flex; flex-direction: column; gap: 8px; }
.pl-zuordnen-zeile b { font-weight: 500; }
@media (max-width: 900px) {
.pl-zeile, .pl-tabelle.mit-tagen .pl-zeile { grid-template-columns: 34px minmax(0, 1fr) auto; row-gap: 6px; }
.pl-gruppe.ist-tag { flex-wrap: wrap; row-gap: 4px; }
.sz-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sz-einst { margin-left: 0; width: 100%; }
.sd-props-rahmen { flex-direction: column-reverse; align-items: stretch; }
.sd-props { width: auto; position: static; max-height: none; }
.pl-kopf { display: none; }
.pl-zeile > :nth-child(n+4) { grid-column: 2 / -1; }
.pl-zahlen { margin-left: 0; width: 100%; }
}
.rz-kreis { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 8px); z-index: 300; width: 40px; height: 40px; border-radius: 50%;
background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.12)); color: var(--color-text-muted);
display: flex; align-items: center; justify-content: center; transform: translate(-50%, -56px); opacity: 0; pointer-events: none; }
.rz-kreis svg { width: 20px; height: 20px; transition: transform 160ms ease; }
.rz-kreis.ist-bereit { color: var(--color-accent); border-color: var(--color-accent); }
.rz-kreis.ist-bereit svg { transform: rotate(180deg); }
.rz-kreis.ist-zurueck { transition: transform 200ms ease, opacity 200ms ease; }
.rz-kreis.ist-laedt svg { animation: rz-dreh 0.8s linear infinite; }
@keyframes rz-dreh { to { transform: rotate(360deg); } }
.chat-tag-trenner, .pd-chat-tag-trenner {
align-self: center;
margin: 6px 0 2px;
}
.chat-tag-trenner span, .pd-chat-tag-trenner span {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
background: var(--color-surface);
border: 1px solid var(--color-border);
color: var(--color-text-muted);
font-size: 11px;
font-weight: 600;
line-height: 1.4;
}
.chat-ungelesen-trenner, .pd-chat-ungelesen-trenner {
align-self: stretch;
text-align: center;
margin: 4px calc(-1 * var(--space-4));
padding: 4px 0;
background: var(--color-accent-soft);
}
.pd-chat-ungelesen-trenner { margin: 4px -2px; }
.chat-ungelesen-trenner span, .pd-chat-ungelesen-trenner span {
color: var(--color-accent-strong);
font-size: 11px;
font-weight: 600;
}
.pf-seite { display: flex; flex-direction: column; gap: 18px; }
.pf-kopf { display: flex; flex-direction: column; gap: 4px; }
.pf-kopf h1 { margin: 0; font-size: 30px; font-weight: var(--weight-semibold); }
.pf-eyebrow { font-size: 13px; color: var(--color-text-muted); letter-spacing: .04em; }
.pf-sub { font-size: 14px; color: var(--color-text-muted); }
.pf-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pf-karte { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 22px 24px;
display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pf-karte.pf-breit { grid-column: 1 / -1; }
.pf-titel { margin: 0; font-size: 17px; font-weight: var(--weight-medium); }
.pf-zeile { display: flex; align-items: center; gap: 14px; }
.pf-zt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pf-zt b { font-size: 14.5px; font-weight: var(--weight-medium); }
.pf-zt small { font-size: 13px; color: var(--color-text-muted); }
.pf-geraet { font-size: 11px; font-weight: 600; color: var(--color-text-muted); background: var(--color-bg-alt); border-radius: 10px;
padding: 1px 8px; margin-left: 6px; vertical-align: 1px; white-space: nowrap; }
.pf-block { display: flex; flex-direction: column; gap: 10px; }
.pf-konto { display: flex; align-items: center; gap: 18px; }
.pf-avatar { width: 72px; height: 72px; border-radius: 50%; flex: none; background: var(--color-accent) center / cover no-repeat;
color: #fff; font-size: 24px; font-weight: var(--weight-medium); display: flex; align-items: center; justify-content: center; }
.pf-name { font-size: 17px !important; }
.pf-knoepfe { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.pf-umschalter { display: inline-flex; border: 1px solid var(--color-border); border-radius: 9px; overflow: hidden; flex: none; }
.pf-umschalter button { border: 0; background: var(--color-surface); font: inherit; font-size: 13.5px; padding: 0 16px; height: 34px;
color: var(--color-text-muted); cursor: pointer; }
.pf-umschalter button.ist-an { background: var(--color-text); color: var(--color-surface); }
.pf-farben { display: flex; gap: 10px; flex-wrap: wrap; }
.pf-farbe { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--color-surface); box-shadow: 0 0 0 1px var(--color-border);
cursor: pointer; padding: 0; }
.pf-farbe.ist-an { box-shadow: 0 0 0 2px var(--color-text); }
.pf-schalter { width: 42px; height: 24px; border-radius: 12px; border: 0; background: var(--color-border-strong); position: relative;
cursor: pointer; flex: none; padding: 0; transition: background .15s; }
.pf-schalter span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.pf-schalter.ist-an { background: var(--color-accent); }
.pf-schalter.ist-an span { left: 21px; }
.pf-schalter:disabled { opacity: .6; cursor: progress; }
.pf-verbindungen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; }
.pf-verbindung { display: flex; flex-direction: column; gap: 10px; }
.pf-leise { font-size: 13px; color: var(--color-text-muted); }
.pf-inspo { display: flex; flex-direction: column; gap: 6px; }
.pf-inspo-welten { display: flex; flex-direction: column; margin-top: 8px; }
.pf-inspo-welt { display: flex; flex-direction: column; gap: 10px; padding: 10px 0; border-top: 1px solid var(--color-border); }
.pf-inspo-reihe { display: grid; grid-template-columns: 280px minmax(0, 1fr) 56px; gap: 18px; align-items: center; }
.pf-inspo-trenner { padding-top: 12px; border-top: 1px solid var(--color-border); }
.pf-inspo-auf { border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: var(--weight-medium); color: var(--color-text);
display: flex; align-items: center; gap: 8px; padding: 0; text-align: left; cursor: pointer; min-height: 32px; }
.pf-inspo-auf small { font-size: 12.5px; font-weight: 400; color: var(--color-text-muted); }
.pf-inspo-pfeil { display: flex; color: var(--color-text-muted); transition: transform .15s; }
.pf-inspo-pfeil svg { width: 14px; height: 14px; }
.pf-inspo-pfeil.ist-offen { transform: rotate(90deg); }
.pf-inspo-regler { width: 100%; margin: 0; accent-color: var(--color-accent); }
.pf-inspo-anteil { font-size: 14.5px; text-align: right; font-variant-numeric: tabular-nums; }
.pf-inspo-quellen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-left: 22px; }
.pf-inspo-chip { height: 30px; border-radius: 15px; border: 1px solid var(--color-border-strong); background: var(--color-surface); font: inherit;
font-size: 13px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-muted); cursor: pointer; }
.pf-inspo-chip svg { width: 13px; height: 13px; }
.pf-inspo-chip.ist-an { border-color: var(--color-accent); color: var(--color-accent);
background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface)); }
.pf-inspo-chip.ist-ohne { border-style: dashed; }
.pf-inspo-marke { font-size: 11.5px; font-weight: 500; border-radius: 7px; padding: 2px 8px;
color: color-mix(in srgb, var(--color-warning) 60%, var(--color-text)); background: color-mix(in srgb, var(--color-warning) 16%, var(--color-surface)); }
@media (max-width: 760px) {
.pf-inspo-reihe { grid-template-columns: minmax(0, 1fr) 48px; gap: 6px 12px; }
.pf-inspo-reihe > :first-child { grid-column: 1 / -1; }
.pf-inspo-quellen { padding-left: 0; }
.pf-raster { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.pf-karte { padding: 16px; }
.pf-zeile { flex-wrap: wrap; }
.pf-umschalter { width: 100%; }
.pf-umschalter button { flex: 1; height: 40px; }
.pf-verbindungen { gap: 18px; }
}
.sidebar-profil-link { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 4px 6px; margin: -4px -6px;
border-radius: 10px; color: inherit; text-decoration: none; }
.sidebar-profil-link:hover, .sidebar-profil-link.active { background: var(--sidebar-hover); }
body.sidebar-collapsed .sidebar-profil-link { flex: none; margin: 0; }
.nav-anpassen-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; margin: 0 0 10px;
border-radius: 10px; background: var(--color-accent-soft); font-size: 13px; font-weight: var(--weight-medium); color: var(--color-accent-strong); }
.sdk-seite { display: flex; flex-direction: column; gap: 10px; }
.sdk-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.sdk-kopf-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sdk-kopf-text h1 { margin: 0; font-size: 26px; font-weight: var(--weight-medium); }
.sdk-kopf-text span { font-size: 13px; color: var(--color-text-muted); }
.sdk-kopfknopf { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-surface);
color: var(--color-text); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; flex: none; }
.sdk-kopfknopf svg { width: 18px; height: 18px; }
.sdk-kopfknopf.ist-haupt { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.sdk-suche { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 1px solid var(--color-border); border-radius: 12px;
background: var(--color-surface); color: var(--color-text-muted); }
.sdk-suche[hidden] { display: none; }
.sdk-suche svg { width: 16px; height: 16px; flex: none; }
.sdk-suche-feld { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--color-text); }
.sdk-liste { display: flex; flex-direction: column; gap: 10px; }
.sdk-karte { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: 14px;
background: var(--color-surface); color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.sdk-karte:active { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 5%, var(--color-surface)); }
.sdk-karte-kopf { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.sdk-nr { font-size: 13px; font-weight: 600; color: var(--color-accent); flex: none; }
.sdk-titel { font-size: 15.5px; font-weight: var(--weight-medium); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sdk-datum { font-size: 12.5px; color: var(--color-text-muted); flex: none; }
.sdk-kunde { font-size: 13px; color: var(--color-text-muted); }
.sdk-pillen { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.sdk-pille { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 14px; background: var(--color-bg-alt);
font-size: 12.5px; color: var(--color-text); }
.sdk-pille i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.sdk-leer { color: var(--color-text-muted); font-size: 14px; padding: 12px 2px; }
.pl-name-zelle { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pl-bild { width: 40px; height: 40px; flex: none; border-radius: 8px; background: var(--color-bg-alt) center / cover no-repeat; color: var(--color-text-faint);
display: inline-flex; align-items: center; justify-content: center; }
.pl-bild svg { width: 16px; height: 16px; }
.pl-karte-kopf .pl-bild { width: 32px; height: 32px; }
.sd-props-zeile .pl-bild { width: 32px; height: 32px; }
.pl-prop.ist-aktiv { background: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface)); }
.pl-karte.ist-aktiv { border-color: var(--color-accent); }
.pl-vomkunde { margin-left: 8px; font-size: 11px; font-weight: 600; color: #3f6fb5; background: #e3ecf8; border-radius: 8px; padding: 1px 7px; }
.pl-kunde-leiste { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); flex-wrap: wrap; }
.pl-kunde-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 200px; }
.pl-kunde-text b { font-size: 14px; font-weight: var(--weight-medium); }
.pl-kunde-text small, .pl-summe small { font-size: 12.5px; color: var(--color-text-muted); }
.pl-summe { display: flex; flex-direction: column; align-items: flex-end; }
.pl-summe b { font-size: 16px; font-weight: 600; }
.pb-schalter { width: 42px; height: 24px; border-radius: 12px; border: 0; background: var(--color-border-strong); position: relative; cursor: pointer; flex: none; padding: 0; transition: background .15s; }
.pb-schalter span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.pb-schalter.ist-an { background: var(--color-accent); }
.pb-schalter.ist-an span { left: 21px; }
.pb-kulisse { display: none; }
.pb-blatt { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100vw; z-index: 90; background: var(--color-surface);
border-left: 1px solid var(--color-border); box-shadow: -12px 0 32px rgba(0,0,0,.06); display: flex; flex-direction: column; }
.pb-blatt.ist-am-laden { cursor: progress; }
.pb-blatt.ist-am-laden .pb-knoepfe { opacity: .5; pointer-events: none; }
.pb-kopf { display: flex; align-items: flex-start; gap: 8px; padding: 20px 22px 14px; border-bottom: 1px solid var(--color-border); }
.pb-kopf-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pb-titel { font-size: 20px; font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.pb-meta { font-size: 13px; color: var(--color-text-muted); }
.pb-zu svg { width: 16px; height: 16px; }
.pb-inhalt { flex: 1; overflow-y: auto; padding: 16px 22px 28px; display: flex; flex-direction: column; gap: 22px; }
.pb-umsch { display: inline-flex; border: 1px solid var(--color-border-strong); border-radius: 8px; overflow: hidden; align-self: flex-start; }
.pb-umsch button { border: 0; background: var(--color-surface); font: inherit; font-size: 12.5px; padding: 0 12px; height: 30px; color: var(--color-text-muted); cursor: pointer; }
.pb-umsch button.ist-an { background: var(--color-text); color: var(--color-surface); }
.pb-abschnitt { display: flex; flex-direction: column; gap: 10px; }
.pb-abschnitt-kopf { display: flex; align-items: center; gap: 10px; }
.pb-abschnitt-titel { flex: 1; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 500; }
.pb-hinweis { font-size: 12.5px; color: var(--color-text-faint); }
.pb-buehne { position: relative; height: 230px; border-radius: 12px; background: var(--color-bg-alt); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pb-buehne img { width: 100%; height: 100%; object-fit: contain; }
.pb-leer { font-size: 13px; color: var(--color-text-muted); }
.pb-marke { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 6px; align-items: center; background: rgba(255,255,255,.92); color: #3d3a35; border-radius: 8px; padding: 4px 9px; font-size: 12px; }
.pb-vomkunde { font-size: 10.5px; font-weight: 600; color: #3f6fb5; background: #e3ecf8; border-radius: 8px; padding: 1px 7px; }
.pb-versionen { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pb-version { width: 58px; height: 44px; border-radius: 7px; border: 2px solid transparent; background: var(--color-bg-alt) center / cover no-repeat; padding: 0;
display: flex; align-items: flex-end; cursor: pointer; font: inherit; }
.pb-version.ist-an { border-color: var(--color-text); }
.pb-version span { background: rgba(255,255,255,.88); color: #3d3a35; border-radius: 5px; padding: 0 4px; margin: 3px; font-size: 10.5px; font-weight: 600; }
.pb-weg svg { width: 14px; height: 14px; }
.pb-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.pb-knoepfe label { cursor: pointer; }
.pb-kamera svg { width: 15px; height: 15px; }
.pb-option { display: grid; grid-template-columns: 22px 52px minmax(0, 1fr) auto 32px; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.pb-radio { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--color-border-strong); background: var(--color-surface); padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pb-radio.ist-an { border-color: var(--color-accent); }
.pb-radio.ist-an span { width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); }
.pb-link-bild { width: 52px; height: 40px; border-radius: 7px; background: var(--color-bg-alt); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--color-text-faint); }
.pb-link-bild img { width: 100%; height: 100%; object-fit: cover; }
.pb-link-bild svg { width: 14px; height: 14px; }
.pb-option-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pb-option-titel { font-size: 13.5px; font-weight: var(--weight-medium); color: var(--color-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-option-titel:hover { text-decoration: underline; }
.pb-option-text small { font-size: 12px; color: var(--color-text-muted); overflow-wrap: anywhere; }
.pb-option-preis { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; white-space: nowrap; }
.pb-option-preis b { font-size: 13.5px; font-weight: 600; }
.pb-gewaehlt { font-size: 11.5px; color: var(--color-accent); }
.pb-option-mehr svg { width: 14px; height: 14px; }
.pb-link-form { display: flex; gap: 8px; }
.pb-link-form .input { flex: 1; min-width: 0; }
.pb-kommentar { font-size: 13.5px; line-height: 1.45; }
.pb-kommentar-kopf { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--color-text-muted); }
.pb-kommentar-kopf b { color: var(--color-text); font-size: 13.5px; font-weight: 600; }
.pb-kommentar-text { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 900px) {
.pb-kulisse { display: block; position: fixed; inset: 0; z-index: 89; background: rgba(0,0,0,.25); }
.pb-blatt { top: auto; left: 0; width: auto; max-height: 88vh; border-left: 0; border-radius: 18px 18px 0 0; }
.pb-kopf { padding-top: 16px; }
.pb-option { grid-template-columns: 22px 44px minmax(0, 1fr) auto 32px; gap: 8px; }
.pb-link-form .input { font-size: 16px; }
}
.ftk-liste, .ftk-suche { display: none; }
.ftk-leiste { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.ftk-leiste .ul-segment { margin-bottom: 0; }
@media (min-width: 721px) {
.ftk-liste { display: block; }
.ftk-suche { display: flex; align-items: center; gap: 8px; width: 320px; height: 38px; padding: 0 12px; border: 1px solid var(--color-border-strong); border-radius: 8px; background: var(--color-surface); color: var(--color-text-faint); }
.ftk-suche[hidden] { display: none; }
.ftk-suche svg { width: 16px; height: 16px; flex-shrink: 0; }
.ftk-suche input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--color-text); flex: 1; min-width: 0; padding: 0; height: 100%; }
.ftk-huelle { background: none; border: 0; box-shadow: none; padding: 0; }
.ftk-huelle > h2, .ftk-huelle > .ft-tabelle { display: none; }
}
.ftk-spalten, .ftk-kopf { display: grid; grid-template-columns: 36px minmax(0, 1fr) 150px 120px 150px 176px; gap: 16px; align-items: center; }
.ftk-spalten { padding: 0 21px 10px; }
.ftk-lbl { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-faint); }
.ftk-sortier { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font-family: inherit; }
.ftk-sortier:hover, .ftk-sortier.ist-an { color: var(--color-text); }
.ftk-karten { display: flex; flex-direction: column; gap: 12px; }
.ftk-leer { padding: 24px 20px; }
.ftk { background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(22, 21, 18, .04); }
.ftk.ist-still { opacity: .6; }
.ftk-kopf { padding: 16px 20px; }
.ftk-symbol { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--color-bg-alt); color: var(--color-text-muted); }
.ftk-symbol svg { width: 18px; height: 18px; }
.ftk-symbol.ist-laedt { background: var(--color-accent-soft); color: var(--color-accent); }
.ftk-symbol.ist-fertig { background: var(--color-accent); color: #fff; }
.ftk-titelblock { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ftk-titelzeile { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ftk-titel { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ftk-chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--color-bg-alt); color: var(--color-text-muted); white-space: nowrap; flex-shrink: 0; }
.ftk-chip.ist-laedt, .ftk-chip.ist-fertig { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.ftk-chip.ist-weiss { background: var(--color-surface); border: 1px solid var(--color-border); }
.ftk-sub { font-size: 13px; color: var(--color-text-muted); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ftk-sub.ist-blass, .ftk-blass { color: var(--color-text-faint); }
.ftk-wert { display: flex; flex-direction: column; gap: 1px; font-size: 14px; font-variant-numeric: tabular-nums; min-width: 0; }
.ftk-inhalt { background: none; border: 0; padding: 0; margin: 0; text-align: left; font: inherit; font-size: 14px; color: inherit; cursor: pointer; }
.ftk-inhalt > span:first-child { text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 3px; }
.ftk-inhalt:hover > span:first-child, .ftk-inhalt.ist-offen > span:first-child { text-decoration-color: currentColor; }
.ftk-frist { font-weight: 500; }
.ftk-frist.ist-gut { color: var(--color-accent); }
.ftk-frist.ist-warn { color: #a35a00; }
.ftk-frist.ist-heute { color: #c2410c; }
.ftk-frist.ist-still { color: var(--color-text-muted); font-weight: 400; }
.ftk-kopf .table-actions { display: flex; justify-content: flex-end; gap: 2px; opacity: 1; }
.ftk-fuss { border-top: 1px solid var(--color-border); background: var(--color-surface-2); padding: 12px 20px 12px 72px; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--color-text-muted); min-width: 0; }
.ftk-fuss.ist-gross { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; padding: 16px 20px 18px 72px; }
.ftk-fuss.ist-gross.ist-einspaltig { grid-template-columns: minmax(0, 1fr); }
.ftk-fuss.ist-einspaltig .ftk-spalte { max-width: 640px; }
.ftk-spalte { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ftk-zeile { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-muted); min-width: 0; flex-wrap: wrap; }
.ftk-zeile.ist-verteilt { justify-content: space-between; flex-wrap: nowrap; }
.ftk-zeile.ist-dunkel { color: var(--color-text); }
.ftk-mono, .ftk-pfad-wert { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ftk-pfad { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ftk-pfad.ist-kasten { justify-content: space-between; padding: 4px 4px 4px 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; }
.ftk-kopie svg { width: 15px; height: 15px; }
.ftk-rechts { margin-left: auto; text-align: right; }
.ftk-rechts.ist-fehler { color: var(--color-danger, #b42318); }
.ftk-balken { height: 6px; border-radius: 3px; background: var(--color-border); overflow: hidden; }
.ftk-balken > span { display: block; height: 100%; background: var(--color-accent); border-radius: 3px; transition: width .4s ease; }
.ftk-balken.ist-hell > span { background: var(--color-accent-2); }
.ftk-datei { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ftk-dateien { border-top: 1px solid var(--color-border); padding: 10px 20px 12px 72px; display: flex; flex-direction: column; gap: 4px; }
.ftk-datei-zeile { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; padding: 4px 0; }
.ftk-datei-zeile svg { width: 15px; height: 15px; color: var(--color-text-faint); }
.ftk-datei-name { overflow-wrap: anywhere; }
@media (min-width: 721px) and (max-width: 1100px) {
.ftk-spalten, .ftk-kopf { grid-template-columns: 36px minmax(0, 1fr) 110px 90px 120px auto; gap: 12px; }
.ftk-fuss.ist-gross { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}