/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"Lato","arguments":[{"subsets":["latin"],"weight":["300","400","700","900"],"variable":"--font-lato","display":"swap"}],"variableName":"lato"} ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/9ce3050912c26948-s.woff2) format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/155cae559bbd1a77-s.p.woff2) format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/cce080f35d014443-s.woff2) format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/4de1fea1a954a5b6-s.p.woff2) format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/39969fcf98a3026e-s.woff2) format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/6d664cce900333ee-s.p.woff2) format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/_next/static/media/f97d1853053d8931-s.woff2) format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/_next/static/media/7ff6869a1704182a-s.p.woff2) format('woff2');
  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: 'Lato Fallback';src: local("Arial");ascent-override: 101.03%;descent-override: 21.80%;line-gap-override: 0.00%;size-adjust: 97.69%
}.__className_172376 {font-family: 'Lato', 'Lato Fallback';font-style: normal
}.__variable_172376 {--font-lato: 'Lato', 'Lato Fallback'
}

/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
:root {
  color-scheme: dark;

  /* -- Brand -- */
  --yellow: #ffce0a;
  --yellow-soft: #ffe066;
  --amber-deep: #ff9d0a;

  /* -- Surfaces -- */
  --ink: #09090b;
  --header: rgba(15, 15, 17, 0.72);
  --panel: rgba(255, 255, 255, 0.035);
  --panel-light: rgba(255, 255, 255, 0.055);
  --panel-solid: #141417;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  --text: #f5f4f1;
  --muted: #9a9ba3;

  /* -- Status (meaning only) -- */
  --green: #4fd18b;
  --amber: #ffb020;
  --red: #f0665c;
  --blue: #6fb1ea;

  /* -- Type -- */
  --font-body: var(--font-lato), -apple-system, BlinkMacSystemFont, sans-serif;

  /* -- Motion -- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* -- Chrome sizing -- */
  --sidebar-width: 216px;
  --topbar-height: 50px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

* {
  box-sizing: border-box;
  /* Scrollbars stay fully functional (wheel/touch/keyboard scrolling is
     untouched) — only the visual track/thumb is hidden, on every
     scrollable element, desktop and mobile alike. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  display: none;
}

html,
body {
  min-height: 100%;
}

body {
  position: relative;
  margin: 0;
  color: var(--text);
  background: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ambient living-interface glow: two slow-drifting radial blooms behind
   all content. Subtle and fixed so it never interferes with reading. */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: 0;
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.1;
  pointer-events: none;
}

body::before {
  top: -20vw;
  right: -15vw;
  background: radial-gradient(circle, var(--yellow) 0%, transparent 70%);
  animation: drift-a 26s ease-in-out infinite;
}

body::after {
  bottom: -25vw;
  left: -20vw;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, var(--blue) 0%, transparent 70%);
  opacity: 0.07;
  animation: drift-b 32s ease-in-out infinite;
}

@keyframes drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-4%, 3%) scale(1.08); }
}

@keyframes drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(3%, -4%) scale(1.06); }
}

h1,
h2,
h3 {
  font-family: var(--font-body);
  font-weight: 900;
  letter-spacing: -0.01em;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* a.button-secondary/-danger/-success: Links, die wie ein Button aussehen
   sollen (z. B. "Login" bei Studio-Geräten, "Öffnen" bei Benachrichtigungen)
   — brauchen dieselbe Basis-Optik wie <button>, bekommen sie aber nicht
   automatisch, da die Regeln unten sonst nur für <button> gelten. */
button,
a.button-secondary,
a.button-danger,
a.button-success {
  padding: 8px 15px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #16130a;
  background: linear-gradient(135deg, var(--yellow-soft), var(--yellow) 55%, var(--amber-deep));
  background-size: 160% 160%;
  background-position: 0% 50%;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition:
    transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease),
    background-position 0.4s var(--ease),
    opacity 0.15s ease;
}

button:hover,
a.button-secondary:hover,
a.button-danger:hover,
a.button-success:hover {
  transform: translateY(-1px);
}

button:hover {
  background-position: 100% 50%;
  box-shadow: 0 8px 22px -8px rgba(255, 206, 10, 0.55);
}

button:active,
a.button-secondary:active,
a.button-danger:active,
a.button-success:active {
  transform: translateY(0);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
  transform: none;
  box-shadow: none;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

input,
select,
textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 8px 11px;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  outline: none;
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--font-body);
  font-size: 13.5px;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease);
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.045);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(255, 206, 10, 0.14);
}

label {
  display: block;
  min-width: 0;
  margin-bottom: 10px;
  font-size: 12.5px;
  color: var(--muted);
}

/* Nachfahren- statt Kindselektor, robuster gegenüber zusätzlichen
   Wrapper-Elementen um ein Input herum (z. B. bei DateTimeField). */
label input,
label select,
label textarea {
  margin-top: 5px;
  color: var(--text);
  font-size: 13.5px;
}

textarea {
  resize: vertical;
}

/* ---------- App shell: sidebar + topbar + content ---------- */

.app-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

/* Sidebar — position:fixed and fully out of document flow, so it can never
   be stretched by flex/grid siblings (that broke "sticky" before: a tall
   page stretched this to match, burying the logout button far below the
   fold) and never scrolls with the page. On desktop it's the fixed rail
   (.app-main gets a matching margin-left); below 881px the very same markup
   becomes an off-canvas drawer, opened by .mobile-nav-toggle and positioned
   via the "mobile-open" class (see the Responsive section further down). */
.app-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: var(--sidebar-width);
  height: 100vh;
  padding: calc(14px + env(safe-area-inset-top)) 10px calc(14px + env(safe-area-inset-bottom));
  border-right: 1px solid var(--line);
  background: var(--header);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.2s var(--ease);
}

.mobile-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mobile-nav-close {
  display: none;
}

.mobile-nav-toggle {
  display: none;
}

.mobile-nav-backdrop {
  display: none;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  margin-bottom: 18px;
}

.sidebar-logo img {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 9px;
  object-fit: contain;
}

.sidebar-logo span {
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.app-nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-nav-icon {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 700;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}

.app-nav-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.nav-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

/* In der (breiten) Sidebar sitzt das Badge inline hinter dem Label statt
   in der Icon-Ecke. */
.app-nav-icon .nav-badge {
  position: static;
  margin-left: auto;
}

.app-nav-icon svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}

.app-nav-icon:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.app-nav-icon.active {
  color: #16130a;
  background: linear-gradient(135deg, var(--yellow-soft), var(--yellow));
}

.sidebar-spacer {
  flex: 1 1;
}

.sidebar-logout {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  font-size: 13.5px;
  font-weight: 700;
  text-align: left;
  box-shadow: none;
}

.sidebar-logout svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.sidebar-logout:hover {
  color: var(--red);
  background: rgba(240, 102, 98, 0.12);
  transform: none;
  box-shadow: none;
}

.app-nav-group {
  width: 100%;
}

.app-nav-group-label {
  margin: 14px 0 6px;
  padding: 0 12px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sidebar-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 2px;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
}

.sidebar-footer-avatar {
  flex: 0 0 auto;
}

.sidebar-footer-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.sidebar-footer-name {
  overflow: hidden;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sidebar-footer-role {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sidebar-collapse-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 38px;
  padding: 0 12px;
  margin-top: 4px;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  font-size: 12.5px;
  font-weight: 700;
  text-align: left;
  box-shadow: none;
}

.sidebar-collapse-toggle svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.sidebar-collapse-toggle:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  transform: none;
  box-shadow: none;
}

/* Collapsed state ist ein reines Desktop-Konzept (die Off-Canvas-Variante
   unten 881px zeigt immer alles aus) — Regeln dazu stehen entsprechend im
   @media(min-width:881px)-Block der Responsive-Sektion weiter unten. */

/* Column to the right of the sidebar. The sidebar is position:fixed (out
   of flow), so this just needs a matching margin-left on desktop instead
   of a flex-basis. */
.app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: margin-left 0.2s var(--ease);
}

.app-topbar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--topbar-height);
  padding: calc(10px + env(safe-area-inset-top)) 20px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--header);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.topbar-logo {
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  overflow: hidden;
}

.topbar-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.app-title {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}

.app-subtitle {
  min-width: 0;
  flex: 1 1 auto;
  margin: 0 0 0 8px;
  padding-left: 8px;
  color: var(--muted);
  border-left: 1px solid var(--line);
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-title-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1;
}

.topbar-title-row {
  display: flex;
  align-items: baseline;
  min-width: 0;
}

/* Zusätzliche Zeile unter Titel/Untertitel, noch innerhalb der Topbar
   (oberhalb von deren unterer Trennlinie) — z. B. "Hallo [Vorname]" im
   Dashboard. Bewusst etwas kleiner als die große Kachel-Schrift weiter
   unten im Seiteninhalt. */
.topbar-greeting {
  margin-top: 2px;
  color: var(--text);
  font-weight: 900;
  font-size: clamp(19px, 2.6vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-content {
  position: relative;
  width: min(1320px, 100%);
  margin: 0 auto;
  padding: 16px 20px 40px;
}

/* Dashboard-Begrüßung mit optionalem Hintergrundbild — siehe
   public/dashboard-hero.webp (Datei einfach dort ablegen, kein Code nötig).
   Ohne Bild bleibt es beim Verlauf als Hintergrund, kein kaputtes
   Bild-Icon. */
.dashboard-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 240px;
  margin: 0 0 20px;
  padding: 36px 24px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(10, 10, 14, 0.45), rgba(10, 10, 14, 0.65)),
    url("/dashboard-hero.webp") center / cover no-repeat,
    linear-gradient(135deg, var(--panel), var(--panel-light));
}

.dashboard-hero-greeting {
  margin: 0;
  color: #fff;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

@media (max-width: 640px) {
  .dashboard-hero {
    min-height: 170px;
    padding: 26px 18px;
    border-radius: 14px;
  }
}

/* Eingebettete externe Anwendung (z. B. Vaultwarden) — nimmt die restliche
   Bildschirmhöhe ein, statt wie normaler Inhalt mitzuscrollen. */
.app-content-embed {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--topbar-height) - 56px);
  padding-bottom: 16px;
}

.iframe-embed {
  flex: 1 1;
  min-height: 420px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--panel);
}

.iframe-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Content primitives ---------- */

.card {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}

.card.interactive:hover,
a.card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  background: var(--panel-light);
  box-shadow: 0 16px 40px -20px rgba(0, 0, 0, 0.6);
}

.card-title {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 900;
}

.card-link {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  padding-bottom: 1px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.card-link:hover {
  color: var(--yellow);
  border-bottom-color: var(--yellow);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  color: var(--yellow);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}

.back-link .arrow {
  display: inline-block;
  transition: transform 0.2s var(--ease);
}

.back-link:hover .arrow {
  transform: translateX(-3px);
}

.section-heading {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 900;
}

.toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

/* Wird ein .toolbar-link als <summary> genutzt (z. B. ein Karten-eigener
   "+ Hinzufügen"-Aufklapper statt eines Modals) — Standard-Dreiecksmarker
   ausblenden, das "+" im Label reicht als Hinweis. */
summary.toolbar-link {
  list-style: none;
}

summary.toolbar-link::-webkit-details-marker {
  display: none;
}

.toolbar-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  color: var(--text);
  background: var(--panel);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 700;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}

.toolbar-link:hover {
  transform: translateY(-1px);
  border-color: var(--yellow);
  background: var(--panel-light);
}

.toolbar-link.primary {
  color: #16130a;
  /* Bewusst nur zwei Farben (kein mittlerer "var(--yellow) 55%"-Stopp wie
     bei der ursprünglichen Fassung): der harte Steigungswechsel am
     mittleren Stopp erzeugte auf den kurzen/breiten "+ Neu …"-Buttons einen
     deutlich sichtbaren Mach-Band-Effekt (ein oranger und ein gelber
     Streifen direkt nebeneinander) — kein Rendering-Bug, sondern eine
     Eigenschaft des 3-Stopp-Verlaufs selbst. Ein reiner Zwei-Farben-Verlauf
     interpoliert glatt, ganz ohne Steigungswechsel.
     Gleiche Farbkombination bereits an anderer Stelle im CI im Einsatz
     (siehe weiter unten in dieser Datei). */
  background: linear-gradient(135deg, var(--yellow-soft), var(--amber-deep));
  border-color: transparent;
}

.toolbar-link.primary:hover {
  box-shadow: 0 8px 22px -8px rgba(255, 206, 10, 0.55);
}

/* Readout tiles: data-forward, frame-light */
.readout-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 18px;
}

.readout {
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), background 0.25s var(--ease);
}

.readout:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  background: var(--panel-light);
}

.readout-label {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.readout-value {
  display: block;
  margin-top: 4px;
  font-size: 21px;
  font-weight: 900;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--text);
  letter-spacing: -0.02em;
}

.readout-value.tone-yellow {
  background: linear-gradient(135deg, var(--yellow-soft), var(--amber-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.readout-value.tone-green { color: var(--green); }
.readout-value.tone-amber { color: var(--amber); }
.readout-value.tone-blue { color: var(--blue); }
.readout-value.tone-red { color: var(--red); }

.readout-note {
  display: block;
  margin-top: 2px;
  color: var(--red);
  font-size: 11px;
  font-weight: 700;
}

/* Readout-Kacheln, die zugleich als Filter dienen (z. B. Bug-Reports) */
.readout-filterable {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.readout-filterable.active {
  border-color: var(--yellow);
  background: color-mix(in srgb, var(--yellow) 10%, var(--panel));
}

/* ---------- Dense list (events, projects, resources, team, days) ---------- */

.list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.list-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: background 0.15s var(--ease);
}

.list-row:last-child {
  border-bottom: none;
}

/* Variant for rows that need a second, collapsible block below the main
   line (e.g. a <details> with description/edit/delete) — .list-row stays a
   plain one-line flex row for the common case. */
.list-row-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  transition: background 0.15s var(--ease);
}

.list-row-block:last-child {
  border-bottom: none;
}

.list-row-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

.list-row-block details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12.5px;
}

/* The whole visible row line doubles as the <details> toggle — clicking
   anywhere on it (not just a small "Bearbeiten" label) opens/closes the
   edit/detail panel below. a.list-row-line: derselbe Zeilen-Look für eine
   Liste, die statt einem <details>-Ausklappen direkt auf eine eigene
   Detailseite verlinkt (z. B. Kontakte) — dieselbe Polsterung/Hover-Fläche,
   ohne die reine <summary>-Semantik. */
summary.list-row-line,
a.list-row-line {
  cursor: pointer;
  list-style: none;
  display: flex;
  margin: -9px -14px;
  padding: 9px 14px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  transition: background 0.15s var(--ease);
}

summary.list-row-line::-webkit-details-marker {
  display: none;
}

summary.list-row-line:hover,
a.list-row-line:hover {
  background: var(--panel-light);
}

.list-row-block details[open] summary.list-row-line {
  border-radius: 10px 10px 0 0;
}

a.list-row:hover,
.list-row.interactive:hover {
  background: var(--panel-light);
}

.list-row-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--dot-color, var(--muted));
  box-shadow: 0 0 8px 1px var(--dot-color, transparent);
}

.list-row-bar {
  align-self: stretch;
  width: 3px;
  flex: 0 0 auto;
  margin: -9px 4px -9px -14px;
  background: var(--item-color, var(--muted));
}

.list-row-main {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.list-row-title {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-row-meta {
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-row-trailing {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding-left: 8px;
}

/* Spalten-Variante der dichten Liste oben (Kontakte/Ressourcen/Projekte) —
   echte, ausgerichtete Spalten statt eines einzeiligen "Titel · Meta ·
   Meta"-Strings. Jede Seite gibt ihr eigenes grid-template-columns per
   style vor (Kopf- und Datenzeilen müssen denselben Wert verwenden, damit
   sie sich ausrichten); diese Klassen liefern nur Abstände/Trennlinien/
   Hover, keine Spaltenzahl. */
.list-table-head,
.list-table-row {
  display: grid;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
}

.list-table-head {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.list-table-row {
  color: inherit;
  text-decoration: none;
  transition: background 0.15s var(--ease);
}

.list-table-row:last-child {
  border-bottom: none;
}

a.list-table-row:hover,
summary.list-table-row:hover {
  background: var(--panel-light);
}

summary.list-table-row {
  cursor: pointer;
  list-style: none;
  /* Innerhalb eines .list-row-block (Ressourcen: Zeile + ausklappbares
     Bearbeiten-/Beschreibungs-Feld) liegt die Polsterung schon auf dem
     Block selbst — dieselbe Neg.-Margin-Technik wie bei summary.list-row-line
     füllt die Hover-/Klickfläche trotzdem bis an den Kartenrand. */
  margin: -9px -14px;
  padding: 9px 14px;
}

summary.list-table-row::-webkit-details-marker {
  display: none;
}

.list-table-cell {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-table-cell-primary {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.list-table-cell-muted {
  color: var(--muted);
  font-size: 12px;
}

.list-section {
  margin-bottom: 20px;
}

.list-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.list-empty {
  padding: 16px 14px;
  color: var(--muted);
  font-size: 13px;
}

.avatar-sm {
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--avatar-color, var(--yellow));
  color: #16130a;
  font-weight: 900;
  font-size: 11.5px;
}

.empty-state {
  margin: 0;
  padding: 14px 0;
  color: var(--muted);
  font-size: 13px;
}

/* Status badge — pill, tinted by --badge-color */
.badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--badge-color, var(--muted)) 45%, transparent);
  background: color-mix(in srgb, var(--badge-color, var(--muted)) 16%, transparent);
  color: var(--badge-color, var(--text));
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* Projekt-Board (Kanban-Alternative zur Projektliste, siehe
   components/ProjectBoard.tsx) — eigenständig gestaltet, keine Kopie einer
   Referenz-UI, nutzt dieselben Panel-/Linien-Variablen wie der Rest der App. */
.project-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: 14px;
  gap: 14px;
  align-items: start;
}

.project-board-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--panel);
  border-top: 3px solid color-mix(in srgb, var(--column-color, var(--muted)) 65%, transparent);
}

.project-board-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.project-board-column-title {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--column-color, var(--text));
}

.project-board-column-count {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
}

.project-board-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--panel-light);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s var(--ease), border-color 0.15s var(--ease);
}

.project-board-card:hover {
  transform: translateY(-1px);
  border-color: var(--yellow);
}

.project-board-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.project-board-card-meta {
  font-size: 11.5px;
  color: var(--muted);
}

.project-board-card-pm {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--yellow);
}

/* Projekt-Übersicht-Grid auf der Detailseite (siehe
   app/projects/[id]/page.tsx) — mehrere Karten nebeneinander, Meilensteine
   nehmen volle Breite ein. */
.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 24px;
}

.overview-grid-full {
  grid-column: 1 / -1;
}

/* Avatar */
.avatar {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--avatar-color, var(--yellow));
  color: #16130a;
  font-weight: 900;
  font-size: 14px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
}

/* Field grid (meta key/value pairs) */
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin-top: 16px;
}

.field strong {
  display: block;
  margin-bottom: 3px;
  font-size: 12.5px;
}

.field p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 13px;
}

.hero-card {
  margin-bottom: 16px;
  border-left: 3px solid var(--accent-color, var(--yellow));
}

.hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.hero-title {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.notes-block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.notes-block p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 13px;
  white-space: pre-wrap;
}

.absence-chip {
  margin-top: 12px;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
  background: color-mix(in srgb, var(--amber) 14%, transparent);
  font-size: 12px;
}

.absence-chip strong {
  color: var(--amber);
  font-size: 11.5px;
}

.absence-chip p {
  margin: 4px 0 0;
  color: var(--text);
}

.split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  grid-gap: 16px;
  gap: 16px;
  align-items: start;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  grid-gap: 16px;
  gap: 16px;
  align-items: start;
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

/* ".button-secondary" etc. als reine Klassenselektoren haben eine NIEDRIGERE
   Spezifität als die frühere Basisregel "a.button-secondary" (Typ+Klasse,
   siehe oben) — bei einem <button> greift die Reihenfolge im Stylesheet
   also normal, bei einem <a class="button-secondary"> (z. B. ein
   Link-"Bearbeiten") gewinnt aber die Basisregel und der Link bleibt beim
   goldenen Grundlook hängen, unabhängig von Reihenfolge im Stylesheet. Die
   a.-Varianten hier explizit mit aufzunehmen behebt das für beide Fälle
   gleichermaßen. text-decoration:none, weil ein Link, der wie ein Button
   aussehen soll, keine Unterstreichung haben soll.
*/
.button-secondary,
a.button-secondary {
  color: var(--text);
  background: var(--panel-light);
  border: 1px solid var(--line-strong);
  box-shadow: none;
  text-decoration: none;
}

.button-secondary:hover,
a.button-secondary:hover {
  box-shadow: none;
  background: rgba(255, 255, 255, 0.09);
}

/* Aktiver Zustand für Umschalt-Buttons auf Basis von .button-secondary
   (z. B. die 2/4/8-Wochen-Zoomstufen in components/DayGrid.tsx) — dieselbe
   gelbe Hervorhebung wie .toolbar-link.primary, nur als Modifier statt
   eigener Basisklasse. */
.button-secondary.active {
  color: #16130a;
  background: var(--yellow);
  border-color: var(--yellow);
}

.button-secondary.active:hover {
  background: var(--yellow);
}

.button-danger,
a.button-danger {
  color: #fff;
  background: linear-gradient(135deg, #ff8a80, var(--red));
  text-decoration: none;
}

.button-danger:hover,
a.button-danger:hover {
  box-shadow: 0 8px 22px -8px rgba(240, 102, 98, 0.55);
}

.button-success,
a.button-success {
  color: #07120a;
  background: linear-gradient(135deg, #8ff0bc, var(--green));
  text-decoration: none;
}

.button-success:hover,
a.button-success:hover {
  box-shadow: 0 8px 22px -8px rgba(79, 209, 139, 0.5);
}

.notice {
  margin-bottom: 16px;
  padding: 9px 13px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
  color: #ffe396;
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  font-size: 12.5px;
}

.notice-error {
  border-color: color-mix(in srgb, var(--red) 45%, transparent);
  color: #ffcfca;
  background: color-mix(in srgb, var(--red) 12%, transparent);
}

/* ---------- Calendar board ---------- */

.cal-card {
  margin-bottom: 16px;
}

.cal-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.cal-toolbar-heading {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 900;
}

.cal-toolbar-range {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
}

.cal-toolbar-actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.cal-toolbar-actions button {
  padding: 7px 12px;
  font-size: 12px;
}

/* Schmale Kachel für die gemeinsame Zeitraum-Steuerung über allen drei
   Dispo-Kacheln (components/DispoTimelineGroup.tsx) — nur die Buttons,
   keine Überschrift, daher weniger Innenabstand als eine normale .card. */
.dispo-timeline-toolbar {
  padding: 10px 16px;
}

.cal-scroll {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
}

.cal-grid {
  display: grid;
}

.cal-cell {
  padding: 8px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  transition: background 0.2s var(--ease);
}

/* Projekt-Timeline (components/ProjectTimeline.tsx) — zweiter Tab neben
   der Termine-Ansicht (CalendarBoard), Wochenraster statt Tagesraster,
   siehe Plan für die Begründung. Eigenständig gestaltet, keine Kopie
   einer Referenz-UI. */
.timeline-label-spacer {
  height: 28px;
}

.timeline-row-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 40px;
  padding: 0 4px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

.timeline-row-label-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-row-label-meta {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-month-header {
  display: grid;
  height: 28px;
  align-items: center;
  border-bottom: 1px solid var(--line-strong);
}

.timeline-month-header span {
  padding-left: 6px;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  border-left: 1px solid var(--line);
}

.timeline-row-track {
  display: grid;
  height: 40px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.timeline-bar {
  display: flex;
  align-items: center;
  height: 22px;
  margin: 0 2px;
  padding: 0 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--bar-color, var(--muted)) 55%, var(--panel-solid));
  border: 1px solid color-mix(in srgb, var(--bar-color, var(--muted)) 70%, transparent);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  transition: transform 0.15s var(--ease);
}

.timeline-bar:hover {
  transform: translateY(-1px);
}

.timeline-today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--yellow);
  z-index: 1;
  pointer-events: none;
}

/* Gemeinsames Tages-Raster (components/DayGrid.tsx) für alle drei Dispo-
   Blöcke (Crew-Verfügbarkeit, Fahrzeuge, Arbeitsplätze) — schmale Spalten,
   damit möglichst viele Tage gleichzeitig sichtbar sind, echtes natives
   horizontales Scrollen statt Zoom-/Paging-Buttons. */
.forecast-table {
  /* "separate" statt "collapse": bei collapse teilen sich Nachbarzellen
     einen gemeinsamen Rahmen, den der Browser bei einer sticky-
     positionierten Spalte nicht sauber fixieren kann — Reste des Rahmens
     der darunter wegscrollenden Zelle blieben sichtbar. Mit getrennten,
     je Zelle eigenen Rahmen tritt das nicht auf. */
  border-collapse: separate;
  border-spacing: 0;
}

/* Feste (nicht nur minimale) Breite für alle Tages-Spalten — sonst legt
   jede Tabelle (Crew/Fahrzeuge/Equipment-Forecast/Projekt-Timelines) ihre
   Spaltenbreite unabhängig anhand des eigenen Inhalts fest (ein langer
   Balken-Text macht "seine" Spalte breiter als in einer anderen Tabelle),
   wodurch Tage zwischen den Kacheln nicht mehr auf gleicher Breite lagen.
   Überlanger Text bricht stattdessen um (siehe .daygrid-bar), statt die
   Spalte zu verbreitern oder abgeschnitten zu werden. */
.forecast-table th,
.forecast-table td {
  padding: 4px 6px;
  /* Fallback 72px (Projekt-Timelines) — die Dispo-Kacheln setzen diese
     Variable dynamisch über die Zeitraum-Zoom-Buttons (siehe
     components/DayGrid.tsx), damit im sichtbaren Bereich genau 2/4/8 Wochen
     passen. Nur auf ihre eigene .cal-scroll gesetzt, wirkt also nicht auf
     die Projektseite zurück. */
  width: var(--day-col-width, 72px);
  min-width: var(--day-col-width, 72px);
  max-width: var(--day-col-width, 72px);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: center;
  font-size: 11px;
}

.forecast-table th {
  background: var(--panel-light);
  color: var(--muted);
  font-weight: 800;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.forecast-table th.forecast-today-col {
  color: var(--yellow);
}

/* Monats-Kopfzeile über der Tages-Kopfzeile (components/DayGrid.tsx) — jede
   Monats-Zelle bekommt per colSpan die Breite ihrer Tage. Wichtig: die th
   selbst bleibt beim horizontalen Scrollen normal (kein position:sticky mit
   left) — nur ihr Hintergrund dient als abwechselnd eingefärbter Streifen
   (siehe .forecast-month-col-b), der exakt an den Tagesgrenzen endet. Wäre
   stattdessen die ganze (u. U. sehr breite) Zelle sticky, würde beim
   Anpinnen ihre GESAMTE Breite mitverschoben und würde optisch über die
   Tage des Monats hinaus in den nächsten Monat hineinragen (genau der Bug,
   den das hier vermeidet). Das eigentliche Label steckt stattdessen in
   einem eigenen, schmalen sticky-<span> darin, siehe .forecast-month-label
   direkt darunter. */
th.forecast-month-col {
  padding: 0;
  text-align: left;
  background: var(--panel-light);
}

/* Abwechselnde Einfärbung je Monat (jede zweite Gruppe, siehe
   monthGroups-Index in DayGrid.tsx), damit ein Monatswechsel auch ohne
   sichtbares Label (z. B. mitten im Monat) erkennbar bleibt. Bewusst nur
   ein sehr dezenter Unterschied zu .forecast-month-col (var(--panel), statt
   z. B. dem viel dunkleren var(--panel-solid)) — beide sind naheliegende,
   halbtransparente Grautöne, nicht ein heller/dunkler Kontrast. */
th.forecast-month-col-b {
  background: var(--panel);
}

/* Das eigentliche, sticky angepinnte Monats-Label — bewusst ein eigenes
   Element statt direkt auf der th (siehe Kommentar oben): als Kind einer
   normal scrollenden Zelle ist sein sticky-Bewegungsspielraum auf die
   Breite SEINER ELTERN-ZELLE begrenzt (die exakt den Tagen des Monats
   entspricht) — es bleibt also nur so lange stehen, bis auch der letzte Tag
   dieses Monats nach links aus dem Sichtfeld gescrollt ist, statt
   unabhängig von den tatsächlichen Tagesgrenzen beliebig weit mitzuwandern.
   display:inline-block hält es dabei so schmal wie sein Text statt die
   volle Zellbreite einzunehmen — mit voller Breite gäbe es keinen
   Bewegungsspielraum und der Effekt bliebe aus. */
.forecast-month-label {
  position: -webkit-sticky;
  position: sticky;
  display: inline-block;
  z-index: 2;
  max-width: calc(100% - 8px);
  padding-left: 8px;
  color: var(--muted);
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Erste Spalte (Zeilen-Label) bleibt beim horizontalen Scrollen stehen —
   eigener, deckender Hintergrund nötig, sonst scrollen die Tages-Zellen
   optisch darunter durch. z-index 2, damit sie auch über der sticky
   Kopfzeile (z-index 1 implizit über th/thead) in der oberen linken Ecke
   gewinnt.
   Als th.forecast-sticky-col/td.forecast-sticky-col (statt nur
   .forecast-sticky-col) gebunden, damit die Regel höhere Spezifität als
   ".forecast-table th" hat — dessen background (var(--panel-light)) ist
   halbtransparent und ließ die darunter wegscrollenden Tages-Spalten in
   der Kopfzeile sichtbar durchscheinen. */
/* Feste (nicht nur minimale) Breite, abweichend von der 72px-Standardbreite
   der Tages-Spalten oben: die vier Buchungs-Timelines der Projektseite
   (Projektteam/Material/Fahrzeuge/Projektverlauf) sind separate
   <table>-Elemente, die ihre erste Spalte sonst unabhängig voneinander an
   den eigenen Inhalt anpassen (mal längerer Personenname+Rolle, mal kurzer
   Fahrzeugname) — dadurch lag Tag 1 nicht mehr auf gleicher Höhe
   untereinander. Mit fester Breite auf allen vieren identisch, überlanger
   Text wird abgeschnitten (siehe .forecast-row-label-text/-bestand). Gleiche
   Selektor-Spezifität wie ".forecast-table th/td" oben (ein Element + eine
   Klasse), gewinnt aber durch die spätere Reihenfolge im Stylesheet. */
th.forecast-sticky-col,
td.forecast-sticky-col {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
  width: 170px;
  min-width: 170px;
  max-width: 170px;
  background: var(--panel-solid);
  box-shadow: 2px 0 6px -2px rgba(0, 0, 0, 0.6);
}

/* Eckzelle über der Zeilen-Label-Spalte, in derselben Zeile wie die
   Monats-Kopfzeile — muss über den daran vorbeiscrollenden Monats-Zellen
   (th.forecast-month-col, position:static) und ihrem sticky-Label
   (.forecast-month-label, z-index 2) gewinnen, sonst scheinen diese durch
   die Ecke durch. Gleiche Selektor-Spezifität wie th.forecast-sticky-col,
   gewinnt aber durch die spätere Reihenfolge im Stylesheet. */
th.forecast-month-spacer {
  z-index: 3;
}

.forecast-row-label {
  text-align: left !important;
  font-weight: 700;
  color: var(--text);
}

/* Untergeordnete Zusatzzeile direkt unter einer Haupt-Zeile (z. B. die
   überlappende Zweitbuchung bei einer Doppelbuchung) — keine eigene,
   wiederholte Zeilenbeschriftung, nur optisch etwas zurückgenommen. */
.forecast-row-dim td.forecast-sticky-col {
  border-top: none;
}

.forecast-row-dim .forecast-cell {
  padding-top: 0;
}

.forecast-row-label-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forecast-row-bestand {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forecast-cell {
  color: var(--text);
}

/* Ein anklickbarer Balken (components/CrewAvailabilityGrid.tsx u. a.) ist
   ein <span class="daygrid-bar"> innerhalb eines <Link>/<a> ohne eigene
   Klasse — .daygrid-bar selbst hat zwar schon text-decoration:none, hier
   zusätzlich direkt auf den Link-Tag, damit der Browser-Standard-Unterstrich
   sicher nirgends durchscheint. */
.forecast-cell a {
  text-decoration: none;
  cursor: pointer;
}

.forecast-cell-warn {
  background: color-mix(in srgb, var(--red) 22%, transparent);
  color: var(--red);
  font-weight: 800;
}

/* Durchlaufender Belegungs-Balken für Crew/Fahrzeuge/Material-Zellen (statt
   einer Zahl wie beim Equipment-Forecast) — deckt per colSpan (siehe
   components/DayGrid.tsx) alle Tage einer zusammenhängenden Buchung als ein
   Element ab, mit Projektname/-nummer bzw. Abwesenheitsart als Beschriftung
   und Tooltip. Text bricht um (statt Ellipsis), wenn er auch über die volle
   colSpan-Breite nicht passt — die Zeile wird dann automatisch höher (native
   Tabellen-Zeilenhöhe), statt den Text abzuschneiden. */
.daygrid-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.25;
  color: #16130a;
  white-space: normal;
  overflow-wrap: break-word;
  text-decoration: none;
}

/* Ein absolut positioniertes Element (Konflikt-Overlay oder der Text unten)
   stapelt sich per CSS-Spezifikation IMMER über normalen, nicht
   positionierten Inhalt in derselben Stacking-Ebene — auch wenn es im
   Markup vor dem Text steht. Der Text braucht deshalb eine eigene
   Positionierung (höherer z-index als das Overlay unten), um zuverlässig
   darüber zu liegen. */
.daygrid-bar-text {
  position: relative;
  z-index: 1;
}

/* Ein Balken bleibt bei einer Doppelbuchung immer EIN durchgehendes Element
   über seine volle Länge (components/BookingBar.tsx berechnet dafür die
   ganze Buchung als ein colSpan) — nur der Teilbereich, der sich mit einer
   anderen Buchung überschneidet, bekommt diesen Streifen-Overlay, prozentual
   innerhalb des Balkens positioniert statt den Balken selbst aufzuteilen. */
.daygrid-bar-conflict-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 4px;
  background-image: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--red) 70%, transparent) 0 4px,
    transparent 4px 8px
  );
  pointer-events: none;
}

/* Anklickbare Tages-Kachel (components/ProjectDayToggleGrid.tsx) — Projekt-
   Buchung für Personal/Material/Fahrzeuge, ein Tag pro Zelle. */
.daytoggle-cell {
  position: relative;
  display: block;
  width: 100%;
  height: 22px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.1s var(--ease);
}

.daytoggle-cell:hover {
  border-color: var(--yellow);
  transform: none;
  box-shadow: none;
}

.daytoggle-cell:disabled {
  opacity: 0.5;
  cursor: wait;
}

.daytoggle-cell-active {
  background: color-mix(in srgb, var(--green) 55%, transparent);
  border-color: var(--green);
}

/* Person/Material/Fahrzeug ist an diesem Tag anderweitig gebucht (anderes
   Projekt, Kalendertermin oder Abwesenheit) — Warnung per eigenem
   Pseudo-Element statt über background-image, damit das unabhängig von der
   (per Inline-Style gesetzten) aktiven Buchungsfarbe darüber sichtbar
   bleibt. */
.daytoggle-cell-conflict::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background-image: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--red) 70%, transparent) 0 4px,
    transparent 4px 8px
  );
  pointer-events: none;
}

/* Projektverlauf (components/ProjectDayPlanGrid.tsx) — select/time-Felder
   müssen in dieselbe schmale Tagesspalte passen wie die Toggle-Zellen. */
.daytoggle-select-cell {
  padding: 3px 2px !important;
}

.daytoggle-select-cell select,
.daytoggle-select-cell input[type="time"] {
  width: 100%;
  min-width: 0;
  padding: 3px 2px;
  font-size: 10.5px;
  border-radius: 4px;
}

/* ---------- Monats-Schnellwechsel (Arbeitszeit) ---------- */

.month-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  overflow-x: auto;
}

.month-switch-yearlabel {
  flex: 0 0 auto;
  margin-right: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.month-switch-year {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 13px;
  box-shadow: none;
}

.month-switch-year:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  transform: none;
  box-shadow: none;
}

.month-switch-btn {
  flex: 0 0 auto;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
}

.month-switch-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  transform: none;
  box-shadow: none;
}

.month-switch-btn.active {
  color: #16130a;
  border-color: transparent;
  background: linear-gradient(135deg, var(--yellow-soft), var(--yellow));
}

/* ---------- Arbeitszeit: Tages-Grid ---------- */

.day-grid-scroll {
  overflow-x: auto;
  border-radius: 14px;
}

/* Die feste Spalten-Tabelle (Kommen/Gehen/Pause/Ist/Notiz nebeneinander)
   braucht Platz und lohnt sich erst ab Tablet-Breite aufwärts — auf dem
   Handy würde sie in den min-width-Scrollcontainer auch das aufgeklappte
   Formular mit hineinziehen. Darum: mobil eine kompakte Zeile (wie die
   frühere Liste), ab 641px die volle Tabelle. */
.day-grid-row-desktop {
  display: none;
}

.day-grid-row-mobile {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}

.day-grid-head-row {
  display: none;
}

@media (min-width: 641px) {
  .day-grid-inner {
    min-width: 640px;
  }

  .day-grid-row-desktop {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
  }

  .day-grid-row-mobile {
    display: none;
  }

  .day-grid-head-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--line);
  }
}

.day-grid-head-row span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.day-col-day {
  width: 78px;
  flex: 0 0 auto;
}

.day-col-type {
  flex: 1 1 160px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.day-col-time {
  width: 52px;
  flex: 0 0 auto;
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.day-col-km {
  width: 76px;
  flex: 0 0 auto;
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.day-col-status {
  width: 100px;
  flex: 0 0 auto;
}

.day-col-notes {
  flex: 1 1 170px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.day-row-weekend {
  opacity: 0.55;
}

/* Rahmt das aufgeklappte Bearbeiten-/Anlegen-Formular sichtbar ein, statt
   die Felder nahtlos in die Zeile übergehen zu lassen — sonst wirken die
   auf volle Breite gehenden Formularfelder auf schmalen Bildschirmen
   "randlos" und dadurch gefühlt zu breit. */
.day-row-panel {
  margin-top: 10px;
  padding: 12px;
  border-radius: 10px;
  background: var(--panel-light);
}

.day-row-entries {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.day-row-entry {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.day-row-entry:first-child {
  padding-top: 0;
  border-top: none;
}

.day-row-entry-heading {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
}

.cal-cell.today {
  background: color-mix(in srgb, var(--yellow) 8%, transparent);
}

.cal-cell-label {
  display: block;
  margin-bottom: 7px;
  color: var(--text);
  font-size: 11.5px;
  font-weight: 700;
}

.cal-cell.today .cal-cell-label {
  color: var(--yellow);
}

.cal-weekday-head {
  padding: 8px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.cal-event {
  display: block;
  padding: 5px 7px;
  border-left: 3px solid var(--item-color, var(--yellow));
  border-radius: 7px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
  font-size: 11.5px;
  line-height: 1.35;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}

.cal-event:hover {
  background: rgba(255, 255, 255, 0.09);
  transform: translateX(1px);
}

.cal-event strong {
  display: block;
  font-weight: 700;
}

.cal-event.compact {
  overflow: hidden;
  padding: 3px 5px;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-more {
  color: var(--muted);
  font-size: 10.5px;
}

/* ---------- Auth ---------- */

.auth-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
}

.auth-card {
  width: 100%;
  max-width: 380px;
  padding: 28px 26px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--panel);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.auth-brand .logo-wrap {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  overflow: hidden;
}

.auth-brand .logo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.auth-eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
}

.auth-heading {
  margin: 2px 0 0;
  font-size: 20px;
  font-weight: 900;
}

.auth-error {
  margin: 0 0 16px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--red) 45%, transparent);
  background: color-mix(in srgb, var(--red) 12%, transparent);
  color: #ffcfca;
  font-size: 13px;
}

.auth-card button {
  width: 100%;
  margin-top: 6px;
}

/* ---------- Responsive ---------- */

/* Fixe Sidebar-Spalte ab hier; darunter wird dieselbe Navigation zum per
   Hamburger ausklappbaren Off-Canvas-Menü (siehe @media(max-width:880px)). */
@media (min-width: 881px) {
  .app-main {
    margin-left: var(--sidebar-width);
  }

  .app-content {
    padding-bottom: 40px;
  }

  /* Eingeklappt: nur Icons, zentriert — ein reines Desktop-Konzept, die
     mobile Drawer-Variante zeigt immer alles aus. */
  .app-sidebar.collapsed {
    align-items: center;
  }

  .app-sidebar.collapsed .sidebar-logo {
    justify-content: center;
    padding: 0;
  }

  .app-sidebar.collapsed .sidebar-logo span {
    display: none;
  }

  .app-sidebar.collapsed .app-nav-icon,
  .app-sidebar.collapsed .sidebar-logout,
  .app-sidebar.collapsed .sidebar-collapse-toggle,
  .app-sidebar.collapsed .sidebar-footer {
    justify-content: center;
    padding: 0;
  }

  .app-sidebar.collapsed .app-nav-label,
  .app-sidebar.collapsed .app-nav-group-label,
  .app-sidebar.collapsed .sidebar-footer-text {
    display: none;
  }
}

@media (max-width: 880px) {
  .app-content {
    padding: 12px 14px calc(env(safe-area-inset-bottom) + 20px);
  }

  .split-grid,
  .form-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Nav-Punkte, die auf dem Handy von der Darstellung her nicht taugen
     (z. B. eingebettetes Vaultwarden). */
  .nav-item-desktop-only {
    display: none;
  }

  /* Auf dem Handy nur die Überschrift — der Untertitel passt bei den langen
     Seitentiteln (z. B. "Arbeitszeit | timr-Zeiterfassung, ...") von der
     Breite nicht mehr sinnvoll daneben. */
  .app-subtitle {
    display: none;
  }

  /* Normales Flex-Kind der Topbar (nicht mehr position:fixed) — dadurch
     zentriert er sich exakt wie der Titel über align-items:center, statt
     über einen geschätzten, auf echten Geräten abweichenden Offset. */
  .mobile-nav-toggle {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    margin-left: -6px;
    padding: 0;
    border: none;
    border-radius: 10px;
    color: var(--text);
    background: transparent;
    box-shadow: none;
  }

  .mobile-nav-toggle:hover {
    transform: none;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.07);
  }

  .mobile-nav-toggle svg {
    width: 21px;
    height: 21px;
  }

  .mobile-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(0, 0, 0, 0.55);
  }

  /* Dieselbe Navigation wie auf dem Desktop, hier aber als Off-Canvas-Drawer:
     standardmäßig nach links aus dem Bild geschoben, "mobile-open" fährt sie
     ein. Das Ein-/Ausklappen der Desktop-Sidebar (collapsed) spielt hier
     keine Rolle — die JSX rendert ohnehin immer alle Labels aus, und die
     collapsed-Regeln dafür stehen nur im Desktop-Media-Query oben. */
  .app-sidebar {
    width: min(84vw, 300px);
    transform: translateX(-100%);
    transition: transform 0.25s var(--ease);
    box-shadow: 24px 0 60px -24px rgba(0, 0, 0, 0.6);
  }

  .app-sidebar.mobile-open {
    transform: translateX(0);
  }

  .app-sidebar .sidebar-collapse-toggle {
    display: none;
  }

  .mobile-nav-close {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 9px;
    color: var(--muted);
    background: transparent;
    box-shadow: none;
  }

  .mobile-nav-close:hover {
    transform: none;
    box-shadow: none;
    color: var(--text);
    background: rgba(255, 255, 255, 0.07);
  }

  .mobile-nav-close svg {
    width: 17px;
    height: 17px;
  }
}

@media (max-width: 640px) {
  .card {
    padding: 12px 14px;
  }

  .readout-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .list-row {
    padding: 8px 12px;
  }
}

/* ---------- Custom Datum-/Uhrzeit-Auswahl ---------- */

.dtf-hidden-value {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.dtf-wrap > input[type="text"]:not(.dtf-hidden-value) {
  cursor: pointer;
}

/* Wird per Portal direkt in document.body gerendert (siehe DateTimeField)
   und über style="top/left" in Viewport-Koordinaten positioniert — so kann
   kein Vorfahre (z. B. .list mit overflow:hidden) es abschneiden, egal wo
   im DOM das Feld eingebettet ist. */
.dtf-popover {
  position: fixed;
  /* Höher als .modal-backdrop (210) — DateTimeField/TogglePickerField werden
     auch innerhalb von Modals genutzt (z. B. "Aufgabe erstellen" bei
     grandMA3) und müssen dort über dem Modal schweben, sonst landet das
     Popover unsichtbar/unklickbar hinter dem abdunkelnden Modal-Hintergrund. */
  z-index: 300;
  width: 272px;
  max-width: calc(100vw - 16px);
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--panel-solid);
  box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.75);
}

.dtf-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.dtf-cal-title {
  color: var(--text);
  font-size: 13.5px;
  font-weight: 800;
  text-transform: capitalize;
}

.dtf-cal-nav {
  display: flex;
  gap: 4px;
}

.dtf-cal-nav button {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font-size: 15px;
  font-weight: 700;
  box-shadow: none;
}

.dtf-cal-nav button:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  transform: none;
  box-shadow: none;
}

.dtf-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}

.dtf-cal-weekdays span {
  display: block;
  text-align: center;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dtf-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 2px;
  gap: 2px;
}

.dtf-cal-day {
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 999px;
  color: var(--text);
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: none;
}

.dtf-cal-day:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: none;
  box-shadow: none;
}

.dtf-cal-day.today {
  color: var(--yellow);
  font-weight: 800;
}

.dtf-cal-day.active {
  color: #16130a;
  background: linear-gradient(135deg, var(--yellow-soft), var(--yellow));
  font-weight: 800;
}

.dtf-time-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 160px;
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.dtf-time-highlight {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 34px;
  transform: translateY(-50%);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.dtf-time-col {
  position: relative;
  width: 54px;
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}

.dtf-time-col::-webkit-scrollbar {
  display: none;
}

.dtf-time-col-pad {
  height: 63px;
  flex-shrink: 0;
}

.dtf-time-item {
  display: block;
  width: 100%;
  height: 34px;
  padding: 0;
  border-radius: 0;
  color: var(--muted);
  background: transparent;
  font-size: 15px;
  font-weight: 700;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  scroll-snap-align: center;
  box-shadow: none;
}

.dtf-time-item:hover {
  color: var(--text);
  transform: none;
  box-shadow: none;
}

.dtf-time-item.active {
  color: var(--yellow);
}

.dtf-time-sep {
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
}

.dtf-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.dtf-actions .button-secondary {
  padding: 8px 14px;
  font-size: 12.5px;
}

.dtf-confirm {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  color: #16130a;
  font-size: 14px;
}

/* ---------- TogglePickerField: Mehrfachauswahl per Klick/Tap ---------- */

.dtf-option-empty {
  margin: 0;
  padding: 9px 10px;
  color: var(--muted);
  font-size: 12.5px;
}

.dtf-option-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 260px;
  overflow-y: auto;
}

.dtf-option-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 9px;
  color: var(--text);
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  box-shadow: none;
}

/* Optionale zweite Spalte je Option (siehe ToggleOption.meta), z. B. die
   Anschrift bei einer Kunden-Auswahl — label schrumpft/kürzt zuerst, damit
   meta an derselben Stelle bleibt und nichts von Zeile zu Zeile springt. */
.dtf-option-label {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dtf-option-meta {
  flex: 0 0 auto;
  max-width: 45%;
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 400;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dtf-option-item:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: none;
  box-shadow: none;
}

.dtf-option-item.active {
  color: #16130a;
  background: linear-gradient(135deg, var(--yellow-soft), var(--yellow));
  font-weight: 800;
}

.dtf-option-check {
  flex: 0 0 auto;
  font-size: 12px;
}

/* ---------- Bug report: context menu + modal ---------- */

.context-menu {
  position: fixed;
  z-index: 200;
  min-width: 170px;
  padding: 4px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--panel-solid);
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.7);
}

.context-menu-item {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  box-shadow: none;
}

.context-menu-item:hover {
  background: var(--panel-light);
  transform: none;
  box-shadow: none;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
}

.modal-card {
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 20px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--panel-solid);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
}

/* Größere Variante für Eingabemasken mit mehr Feldern (z. B. Projekt/Termin
   anlegen) — mehr Platz zum Ausfüllen statt des engen 440px-Standardmaßes. */
.modal-card-lg {
  max-width: 640px;
}

.modal-close {
  padding: 5px 11px;
  font-size: 12px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  box-shadow: none;
}

.modal-close:hover {
  color: var(--text);
  transform: none;
  box-shadow: none;
}