:root {
  --bg: #06101d;
  --bg-2: #0b1730;
  --panel: rgba(8, 22, 48, 0.68);
  --panel-strong: rgba(8, 22, 48, 0.88);
  --line: rgba(148, 163, 184, 0.16);
  --line-strong: rgba(191, 219, 254, 0.2);
  --text: #eef4ff;
  --muted: #8fa4c7;
  --primary: #6aa8ff;
  --primary-2: #2563eb;
  --danger: #ef4444;
  --success: #22c55e;
  --warning: #f59e0b;
  --violet: #9b8cff;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.22);
  --radius: 24px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.20), transparent 24%),
    radial-gradient(circle at 80% 0%, rgba(155, 140, 255, 0.16), transparent 18%),
    radial-gradient(circle at bottom center, rgba(37, 99, 235, 0.14), transparent 28%),
    linear-gradient(180deg, #04101d 0%, #07111f 100%);
  min-height: 100vh;
}

.ambient {
  position: fixed;
  width: 38vw;
  height: 38vw;
  filter: blur(70px);
  pointer-events: none;
  opacity: .5;
  z-index: 0;
}
.ambient-a { left: -8vw; top: -10vw; background: rgba(59, 130, 246, .18); }
.ambient-b { right: -10vw; top: 5vw; background: rgba(168, 85, 247, .12); }

.app-shell {
  position: relative;
  z-index: 1;
  max-width: 1640px;
  margin: 0 auto;
  padding: 28px;
}

.glass-card {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(10, 25, 52, 0.84), rgba(7, 18, 38, 0.76));
  backdrop-filter: blur(18px);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
  padding: 28px 30px;
  margin-bottom: 22px;
  overflow: hidden;
  position: relative;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,.05), transparent 30%, transparent 70%, rgba(255,255,255,.03));
  pointer-events: none;
}
.eyebrow { color: #9dc5ff; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
h1 { margin: 8px 0 8px; font-size: clamp(36px, 5vw, 50px); line-height: 1.02; }
.hero-copy { margin: 0; color: var(--muted); max-width: 840px; font-size: 16px; }
.hero-copy-wrap { display: grid; gap: 18px; }
.hero-actions, .form-actions, .toolbar, .dialog-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-actions { justify-content: flex-end; align-items: start; }
.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 12px; max-width: 860px; }
.stat-card {
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(15, 29, 58, .78), rgba(9, 19, 37, .62));
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-soft);
}
.stat-label { font-size: 12px; color: #9eb6d8; text-transform: uppercase; letter-spacing: .08em; }
.stat-value { font-size: 28px; font-weight: 800; margin-top: 8px; }

.layout { display: grid; grid-template-columns: 470px minmax(0,1fr); gap: 22px; align-items: start; }
.panel { padding: 24px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.panel-head h2 { margin: 2px 0 0; font-size: 28px; }
.panel-kicker { margin: 0; color: #8eb8ff; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; font-weight: 800; }
.muted { color: var(--muted); }
.badge, .tag, .hint-chip, .filter-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.24); font-size: 12px; font-weight: 800;
}
.badge.soft { background: rgba(96, 165, 250, 0.12); color: #bfdbfe; }
.entry-form, .delete-form { display: grid; gap: 14px; }
.grid { display: grid; gap: 12px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
label { display: grid; gap: 7px; }
label > span { font-size: 13px; color: #dbeafe; font-weight: 700; }
input, select, textarea {
  width: 100%; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 16px;
  background: rgba(7, 18, 38, 0.82); color: var(--text); padding: 13px 14px; outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: rgba(96, 165, 250, 0.8);
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.14);
}
textarea { resize: vertical; min-height: 124px; }
.btn {
  appearance: none; border: 1px solid rgba(148, 163, 184, 0.2); background: rgba(12, 23, 44, 0.8);
  color: var(--text); border-radius: 16px; padding: 12px 16px; font-weight: 800; cursor: pointer; text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.btn:hover { border-color: rgba(255,255,255,.34); transform: translateY(-1px); }
.btn-primary { background: linear-gradient(180deg, var(--primary), var(--primary-2)); border-color: transparent; color: white; }
.btn-danger { background: linear-gradient(180deg, #ef4444, #b91c1c); border-color: transparent; color: white; }
.file-btn { position: relative; overflow: hidden; }
.file-picker small { color: var(--muted); }
.quick-hints, .filter-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.hint-chip { background: rgba(96, 165, 250, .08); color: #cfe2ff; }
.filter-chip {
  background: rgba(15, 28, 52, .78);
  color: #dbeafe;
  cursor: pointer;
}
.filter-chip.active { background: linear-gradient(180deg, rgba(96, 165, 250, .24), rgba(37, 99, 235, .22)); border-color: rgba(147, 197, 253, .3); }
.filter-chip.priority-filter { color: #ffd18b; }
.selected-files { display: grid; gap: 10px; }
.selected-file {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(10, 22, 40, 0.8);
}
.sticky-actions {
  position: sticky;
  bottom: 0;
  padding-top: 8px;
  background: linear-gradient(180deg, transparent, rgba(7,17,31,.84) 25%, rgba(7,17,31,.96));
}

.toolbar-grid { display: grid; grid-template-columns: minmax(280px, 1fr) 240px; gap: 10px; }
.entry-list { display: grid; gap: 16px; }
.empty-state {
  border: 1px dashed rgba(148, 163, 184, 0.2);
  border-radius: 20px;
  min-height: 136px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: rgba(6, 18, 38, 0.45);
}
.entry-card {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) minmax(180px, 220px);
  gap: 16px;
  align-items: start;
  width: 100%;
  max-width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 24px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(8, 22, 46, 0.96), rgba(5, 14, 31, 0.9));
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}
.entry-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at top right, rgba(96, 165, 250, .08), transparent 20%);
}
.entry-meta {
  display: grid;
  gap: 8px;
  align-content: start;
  padding-right: 8px;
}
.entry-date { font-size: 24px; font-weight: 800; }
.entry-time { color: #c9dcff; font-size: 13px; }
.entry-main { display: grid; gap: 12px; min-width: 0; }
.entry-headline {
  display: flex; justify-content: space-between; gap: 14px; align-items: start;
}
.entry-subline { color: #92b6ea; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
.entry-main h3 { margin: 4px 0 0; font-size: 28px; line-height: 1.08; }
.entry-description {
  color: #e8f0fe; line-height: 1.6; white-space: pre-wrap;
  padding: 12px 14px; border-radius: 18px; background: rgba(9, 19, 36, .62); border: 1px solid rgba(148,163,184,.12);
}
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { background: rgba(12, 23, 44, .72); }
.priority-niedrig { color: #93c5fd; }
.priority-mittel { color: #fcd34d; }
.priority-hoch { color: #fca5a5; border-color: rgba(239,68,68,.28); background: rgba(127, 29, 29, .24); }
.attachments {
  display: grid; gap: 10px;
  padding: 14px; border: 1px solid rgba(148, 163, 184, .14); border-radius: 18px;
  background: rgba(6, 18, 38, .58);
}
.attachment-list { display: flex; gap: 10px; flex-wrap: wrap; }
.attachment-chip {
  border: 1px solid rgba(147, 197, 253, .2);
  background: rgba(15, 29, 58, .86);
  color: #eaf2ff;
  border-radius: 999px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 700;
}
.attachment-chip:hover { border-color: rgba(255,255,255,.34); }
.entry-side {
  display: grid; gap: 12px; justify-items: end; text-align: right; align-content: start;
}
.avatar {
  width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 50%; background: linear-gradient(180deg, #60a5fa, #1d4ed8); font-weight: 800;
  box-shadow: 0 8px 18px rgba(37,99,235,.28);
}
.entry-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.entry-actions .btn { padding: 10px 12px; border-radius: 14px; }

.dialog {
  width: min(1120px, calc(100vw - 24px));
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 24px;
  padding: 0;
  color: var(--text);
  background: linear-gradient(180deg, rgba(10,25,52,.98), rgba(5,14,31,.96));
}
.dialog::backdrop { background: rgba(2, 8, 18, .7); backdrop-filter: blur(4px); }
.dialog-head {
  display: flex; justify-content: space-between; gap: 16px; align-items: start;
  padding: 22px 24px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.dialog-head h3 { margin: 0 0 6px; font-size: 24px; }
.attachment-body, .print-content { padding: 20px 24px 24px; }
.attachment-body {
  min-height: 260px;
  max-height: 72vh;
  overflow: auto;
  display: grid;
  place-items: center;
}
.attachment-body iframe, .attachment-body img, .attachment-body pre {
  width: 100%; max-width: 100%; border: 0; border-radius: 18px; background: rgba(7, 17, 31, 0.9);
}
.attachment-body iframe { min-height: 70vh; }
.attachment-body img { max-height: 72vh; object-fit: contain; }
.attachment-body pre { padding: 18px; white-space: pre-wrap; }
.generic-preview {
  width: 100%; padding: 18px; border: 1px dashed rgba(148, 163, 184, 0.2); border-radius: 18px;
  background: rgba(6,18,38,.5);
}
.print-sheet {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 22px;
  padding: 22px;
  background: linear-gradient(180deg, rgba(11, 23, 42, 0.9), rgba(7, 17, 31, 0.86));
}
.print-sheet h4 { margin: 0 0 16px; font-size: 30px; }
.print-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-bottom: 14px; }
.print-box {
  padding: 14px; border-radius: 16px; background: rgba(15, 29, 58, 0.82); border: 1px solid rgba(148, 163, 184, 0.14);
}
.print-label { font-size: 12px; color: #8fb5eb; text-transform: uppercase; letter-spacing: .08em; }
.print-value { margin-top: 8px; font-weight: 700; }
.print-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.print-badge {
  display: inline-flex; align-items: center; padding: 9px 12px; border-radius: 999px; font-size: 12px; font-weight: 800;
  background: rgba(15, 29, 58, 0.82); border: 1px solid rgba(148,163,184,.16);
}
.print-badge.type { color: #bfdbfe; }
.print-description {
  padding: 16px; border-radius: 18px; background: rgba(7,17,31,.72); line-height: 1.6; white-space: pre-wrap; margin-bottom: 12px;
}
.toast-host {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: grid;
  gap: 10px;
  z-index: 1000;
}
.toast {
  min-width: 240px;
  max-width: 420px;
  padding: 14px 16px;
  border-radius: 16px;
  color: white;
  background: rgba(15, 23, 42, 0.94);
  border: 1px solid rgba(148,163,184,.18);
  box-shadow: var(--shadow-soft);
}
.toast.success { border-color: rgba(34, 197, 94, 0.3); }
.toast.error { border-color: rgba(239, 68, 68, 0.3); }

@media (max-width: 1180px) {
  .layout { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 1fr; }
  .hero-actions { justify-content: flex-start; }
  .entry-card { grid-template-columns: 1fr; }
  .entry-side { justify-items: start; text-align: left; }
  .entry-actions { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .app-shell { padding: 14px; }
  .panel, .hero { padding: 18px; }
  .hero-stats, .grid.two, .grid.three, .print-grid, .toolbar-grid { grid-template-columns: 1fr; }
  h1 { font-size: 34px; }
  .panel-head h2 { font-size: 24px; }
  .dialog { width: calc(100vw - 12px); }
  .dialog-head { padding: 18px 18px 12px; }
  .attachment-body, .print-content { padding: 16px 18px 18px; }
}

@media print {
  body { background: white; color: black; }
  .app-shell > :not(#printDialog) { display: none !important; }
  #printDialog { display: block !important; position: static; width: 100%; border: 0; box-shadow: none; background: white; color: black; }
  #printDialog .dialog-head { display: none; }
  #printContent, .print-sheet, .print-box, .print-description { background: white !important; color: black !important; box-shadow: none !important; }
}


/* Premium V2 */
.hero-stats-five { grid-template-columns: repeat(5, minmax(120px, 1fr)); }
.premium-hints .hint-chip { background: rgba(106,168,255,.12); border-color: rgba(106,168,255,.22); }
.btn-soft { background: rgba(255,255,255,.05); }
.premium-toolbar { align-items: end; }
.premium-entry-list { gap: 16px; }
.entry-card { position: relative; overflow: hidden; }
.entry-card::before { content: ''; position:absolute; inset:0 auto 0 0; width:4px; background: linear-gradient(180deg, rgba(106,168,255,.95), rgba(155,140,255,.8)); opacity:.95; }
.entry-card.is-done::before { background: linear-gradient(180deg, rgba(34,197,94,.95), rgba(45,212,191,.8)); }
.entry-card.is-high::before { background: linear-gradient(180deg, rgba(245,158,11,.95), rgba(239,68,68,.85)); }
.entry-main { display:grid; gap:12px; }
.entry-headline { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.entry-title-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.entry-title-row h3 { margin:0; }
.status-badge { padding:7px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.14); font-size:12px; font-weight:700; letter-spacing:.02em; }
.status-open { background: rgba(59,130,246,.14); color:#dbeafe; }
.status-done { background: rgba(34,197,94,.14); color:#dcfce7; }
.meta-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; }
.meta-pill { padding:10px 12px; border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); border-radius:16px; }
.meta-pill-label { color: var(--muted); font-size:12px; margin-bottom:4px; }
.meta-pill-value { font-weight:600; }
.attachments strong { display:block; margin-bottom:8px; }
.attachment-chip { display:inline-flex; align-items:center; gap:8px; }
.attachment-icon { font-size:15px; }
.entry-side { align-items:stretch; }
.entry-side-top { display:grid; gap:10px; justify-items:end; }
.entry-side-bottom { display:grid; gap:8px; margin-top:12px; }
.avatar.large { width:52px; height:52px; font-size:20px; box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 12px 30px rgba(0,0,0,.24); }
.btn-success { background: linear-gradient(180deg, rgba(34,197,94,.95), rgba(21,128,61,.95)); color:white; border-color: rgba(255,255,255,.12); }
.note-line { color: var(--muted); font-size: 13px; }
.print-status-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.empty-state { padding: 34px 22px; text-align:center; border:1px dashed rgba(255,255,255,.12); border-radius: 22px; color: var(--muted); background: rgba(255,255,255,.02); }
@media (max-width: 1180px){ .hero-stats-five{ grid-template-columns: repeat(3,minmax(120px,1fr)); } .meta-grid{ grid-template-columns:1fr; } }
@media (max-width: 720px){ .hero-stats-five{ grid-template-columns: repeat(2,minmax(120px,1fr)); } .entry-headline{ flex-direction:column; } .entry-side-top{ justify-items:start; } }


/* === Premium V3: Modal Entry Editor + robust filters === */
.layout{
  grid-template-columns: 1fr !important;
}

.icon-btn{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.icon-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); }

.modal-backdrop{
  position:fixed;
  inset:0;
  background: rgba(2,6,23,.58);
  backdrop-filter: blur(10px);
  z-index: 9998;
}

.modal{
  position:fixed;
  inset: 0;
  display:grid;
  place-items:center;
  z-index: 9999;
  padding: 18px;
}

.modal-inner{
  width: min(720px, 100%);
}

.modal .panel-form{
  box-shadow: 0 30px 120px rgba(0,0,0,.55);
}

body.modal-open{
  overflow:hidden;
}

@media (max-width: 900px){
  .modal{ padding: 12px; }
  .modal-inner{ width: 100%; }
}


.modal[hidden],
.modal-backdrop[hidden]{
  display:none !important;
}


/* ===== V4 Premium additions ===== */
.toolbar-note{
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
}
kbd{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font: inherit;
  font-size: 12px;
}

.entry-card{
  cursor: pointer;
}
.entry-card .entry-side-bottom button,
.entry-card .attachment-chip{
  cursor: pointer;
}

.detail-dialog{
  width: min(960px, calc(100vw - 40px));
}
.detail-body{
  display: grid;
  gap: 18px;
}
.detail-hero{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
}
.detail-panel{
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border-radius: 20px;
  padding: 18px;
  box-shadow: var(--shadow-soft);
}
.detail-panel h4{
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.detail-title{
  margin: 0;
  font-size: 32px;
  line-height: 1.05;
}
.detail-description{
  margin-top: 14px;
  white-space: pre-wrap;
  color: #d9e7ff;
  line-height: 1.65;
}
.detail-grid{
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
}
.detail-kv{
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 14px;
  background: rgba(255,255,255,.03);
}
.detail-kv-label{
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}
.detail-kv-value{
  font-size: 16px;
  font-weight: 700;
}
.detail-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 14px 0 0;
}
.detail-attachments{
  display:grid;
  gap: 12px;
}
.detail-attachments .attachment-list{
  gap: 10px;
}
.detail-attachments-empty{
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 16px;
  padding: 14px;
}
.detail-actions{
  justify-content: flex-end;
  margin-top: 20px;
  flex-wrap: wrap;
}

.print-sheet{
  position: relative;
  overflow: hidden;
}
.print-sheet::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, rgba(106,168,255,.95), rgba(155,140,255,.95), rgba(34,197,94,.9));
  border-radius: 999px;
}
.print-title-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  padding-top: 16px;
}
.print-title-row h4{
  margin: 0;
}
.print-meta-stack{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.print-badge.status-open{
  background: rgba(96,165,250,.16);
  color: #cfe1ff;
  border: 1px solid rgba(96,165,250,.35);
}
.print-badge.status-done{
  background: rgba(34,197,94,.16);
  color: #d9ffe8;
  border: 1px solid rgba(34,197,94,.35);
}

@media (max-width: 820px){
  .detail-hero{
    grid-template-columns: 1fr;
  }
  .detail-grid{
    grid-template-columns: 1fr;
  }
  .detail-title{
    font-size: 26px;
  }
}


/* === V5 additions === */
.btn-ghost{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);}
.btn-ghost:hover{background:rgba(255,255,255,.1);}


/* === V5.1 Fixes === */
.hero-actions{
  align-items:flex-start;
  gap:12px;
}
.hero-actions .btn{
  min-height:46px;
}
.import-picker{
  display:grid;
  gap:6px;
  min-width:170px;
}
.file-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.file-btn input{
  display:none !important;
}
.file-name{
  min-height:18px;
  padding:0 4px;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:190px;
}
.btn-ghost{
  min-width:98px;
}
.stat-card{
  display:grid;
  grid-template-rows:auto auto;
  align-content:start;
  min-height:106px;
}
.stat-label{
  min-height:32px;
  display:flex;
  align-items:flex-start;
}
.stat-value{
  margin-top:6px;
  line-height:1;
}
.entry-card{
  cursor:pointer;
}
.entry-card:focus-visible{
  outline:2px solid rgba(106,168,255,.8);
  outline-offset:2px;
}
@media (max-width: 1180px){
  .hero-actions{
    justify-content:flex-start;
  }
}
@media (max-width: 760px){
  .import-picker{
    min-width:100%;
  }
  .file-name{
    max-width:none;
  }
}


/* === V6 Premium === */
.attachment-dialog{
  width:min(1260px, calc(100vw - 20px));
}
.attachment-dialog.dialog-fullscreen{
  width:100vw;
  max-width:none;
  height:100vh;
  max-height:none;
  border-radius:0;
  margin:0;
}
.attachment-dialog.dialog-fullscreen::backdrop{
  background: rgba(1,6,16,.92);
}
.attachment-stage{
  width:100%;
  display:grid;
  gap:14px;
}
.attachment-stage-head{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}
.attachment-stage-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.attachment-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(15,29,58,.88);
  border:1px solid rgba(148,163,184,.18);
  color:#dbeafe;
  font-weight:700;
  font-size:12px;
}
.attachment-stage-note{
  color:var(--muted);
  font-size:13px;
}
.attachment-frame-shell,
.attachment-image-shell,
.attachment-text-shell,
.attachment-generic-shell{
  border:1px solid rgba(148,163,184,.14);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(8,19,37,.94), rgba(4,10,23,.96));
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}
.attachment-frame-shell{
  min-height:74vh;
}
.attachment-dialog.dialog-fullscreen .attachment-frame-shell{
  min-height:calc(100vh - 210px);
}
.attachment-pdf-toolbar{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  padding:12px 14px;
  border-bottom:1px solid rgba(148,163,184,.12);
  background:rgba(255,255,255,.03);
}
.attachment-pdf-toolbar strong{
  font-size:14px;
  color:#eef4ff;
}
.attachment-frame-shell iframe{
  min-height:74vh;
  width:100%;
  border:0;
  background:#0b1220;
}
.attachment-dialog.dialog-fullscreen .attachment-frame-shell iframe{
  min-height:calc(100vh - 260px);
}
.attachment-image-shell{
  display:grid;
  place-items:center;
  padding:22px;
}
.attachment-image-shell img{
  width:auto;
  max-width:100%;
  max-height:74vh;
  object-fit:contain;
  border-radius:18px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.attachment-dialog.dialog-fullscreen .attachment-image-shell img{
  max-height:calc(100vh - 250px);
}
.attachment-text-shell{
  padding:0;
}
.attachment-text-shell pre{
  margin:0;
  min-height:62vh;
  padding:22px;
  white-space:pre-wrap;
  overflow:auto;
  line-height:1.62;
  font-size:14px;
  color:#e8f0fe;
  background:radial-gradient(circle at top, rgba(28,65,126,.18), transparent 40%), rgba(7,17,31,.92);
}
.attachment-generic-shell{
  padding:20px;
}
.attachment-generic-shell p{
  margin:0 0 10px;
}
.print-sheet{
  padding:26px;
}
.print-sheet.priority-hoch::before{
  background: linear-gradient(90deg, rgba(239,68,68,.96), rgba(251,191,36,.92), rgba(106,168,255,.96));
}
.print-sheet.priority-mittel::before{
  background: linear-gradient(90deg, rgba(251,191,36,.96), rgba(106,168,255,.96), rgba(155,140,255,.95));
}
.print-sheet.priority-niedrig::before{
  background: linear-gradient(90deg, rgba(96,165,250,.96), rgba(155,140,255,.95), rgba(34,197,94,.9));
}
.print-topline{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  margin-bottom:14px;
}
.print-brand{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.print-brand small{
  color:#93c5fd;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:800;
}
.print-brand strong{
  font-size:15px;
  color:#eef4ff;
}
.print-status-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:14px;
  margin-bottom:14px;
}
.print-highlight{
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.print-highlight h5,
.print-attachments-card h5{
  margin:0 0 10px;
  font-size:12px;
  color:#8fb5eb;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.print-attachments-card{
  margin-top:14px;
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.14);
  background:rgba(7,17,31,.6);
}
.print-attachments-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}
.print-attachments-list li{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(148,163,184,.12);
}
.print-attachments-list span:last-child{
  color:var(--muted);
  white-space:nowrap;
}
.print-footer-note{
  margin-top:16px;
  color:var(--muted);
  font-size:12px;
  text-align:right;
}
@media (max-width: 820px){
  .print-status-grid{ grid-template-columns:1fr; }
  .attachment-stage-head{ align-items:flex-start; }
}
@media print {
  .print-sheet::before{ height:8px !important; }
  .print-badge, .print-box, .print-highlight, .print-attachments-card, .print-attachments-list li{
    border-color:#d1d5db !important;
  }
  .print-badge.status-open{ background:#e0f2fe !important; color:#0f172a !important; }
  .print-badge.status-done{ background:#dcfce7 !important; color:#0f172a !important; }
}


/* V6.1 month overview + i18n polish */
.layout{grid-template-columns:1fr;}
.panel-calendar{margin-bottom:22px;}
.calendar-head{align-items:center;}
.calendar-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end;}
.icon-only{min-width:48px;padding-inline:0;text-align:center;}
.month-label{min-width:220px;padding:12px 16px;border-radius:16px;border:1px solid var(--line-strong);background:rgba(10,22,40,.62);font-weight:800;text-align:center;color:#eaf2ff;}
.month-weekdays, .month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;}
.month-weekdays{margin-top:6px;margin-bottom:10px;}
.month-weekday{padding:10px 8px;text-align:center;color:#9eb6d8;font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;}
.month-day{min-height:96px;border-radius:18px;border:1px solid rgba(148,163,184,.14);background:linear-gradient(180deg, rgba(10,22,44,.86), rgba(6,16,31,.78));padding:12px;display:grid;align-content:space-between;gap:10px;cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;background-clip:padding-box;}
.month-day:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.28);}
.month-day.is-other{opacity:.42;}
.month-day.is-today{border-color:rgba(96,165,250,.45);box-shadow:0 0 0 1px rgba(96,165,250,.18) inset;}
.month-day.is-selected{border-color:rgba(96,165,250,.72);box-shadow:0 0 0 3px rgba(96,165,250,.14);}
.month-day.has-entries{background:linear-gradient(180deg, rgba(19,39,74,.96), rgba(8,22,46,.86));}
.month-day-top{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.month-day-number{font-size:18px;font-weight:800;}
.month-day-count{display:inline-flex;min-width:28px;height:28px;padding:0 8px;border-radius:999px;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--primary),var(--primary-2));color:#fff;font-size:12px;font-weight:800;}
.month-day-list{display:grid;gap:4px;font-size:12px;color:#cfe0ff;}
.month-day-list span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.active-day-info{margin:0 0 14px;padding:12px 14px;border-radius:16px;border:1px solid rgba(96,165,250,.22);background:rgba(15,29,58,.58);color:#dbeafe;font-weight:700;}
@media (max-width: 900px){.calendar-actions{justify-content:flex-start;}.month-label{min-width:0;flex:1 1 180px;}.month-day{min-height:84px;padding:10px;}.month-day-number{font-size:16px;}}
@media (max-width: 640px){.month-weekdays, .month-grid{gap:6px;}.month-day{min-height:74px;border-radius:14px;}.month-day-list{display:none;}}


/* ===== V6.2 Premium Glass / iPhone polish ===== */
.btn,
.filter-chip,
.attachment-chip,
.icon-btn,
.month-day,
.entry-card,
.stat-card,
.meta-pill,
.detail-panel,
.print-box,
.print-badge,
.hint-chip{
  position: relative;
  isolation: isolate;
}

.btn::before,
.filter-chip::before,
.attachment-chip::before,
.icon-btn::before,
.month-day::before,
.entry-card::after,
.stat-card::after{
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05) 24%, rgba(255,255,255,0) 54%);
  pointer-events: none;
  opacity: .9;
  z-index: -1;
}

.btn{
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(21,38,71,.92), rgba(9,19,38,.82));
  border-color: rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(255,255,255,.04),
    0 10px 24px rgba(2,8,23,.26);
  backdrop-filter: blur(14px) saturate(140%);
}
.btn:hover{
  transform: translateY(-2px) scale(1.01);
  border-color: rgba(191,219,254,.44);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 16px 36px rgba(2,8,23,.34),
    0 0 0 1px rgba(255,255,255,.05);
}
.btn:active{ transform: translateY(0) scale(.995); }
.btn:focus-visible,
.filter-chip:focus-visible,
.month-day:focus-visible,
.attachment-chip:focus-visible,
.icon-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(106,168,255,.18), 0 10px 24px rgba(2,8,23,.28);
}
.btn-primary{
  background: linear-gradient(180deg, rgba(114,177,255,1) 0%, rgba(70,132,255,1) 48%, rgba(37,99,235,1) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -2px 0 rgba(0,0,0,.12),
    0 14px 34px rgba(37,99,235,.34);
}
.btn-primary:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 18px 42px rgba(37,99,235,.4),
    0 0 0 1px rgba(255,255,255,.05);
}
.btn-success{
  background: linear-gradient(180deg, rgba(74,222,128,.98), rgba(34,197,94,.96) 55%, rgba(22,163,74,.96));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 14px 34px rgba(22,163,74,.24);
}
.btn-danger{
  background: linear-gradient(180deg, rgba(248,113,113,.98), rgba(239,68,68,.96) 52%, rgba(185,28,28,.96));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 14px 34px rgba(185,28,28,.24);
}
.btn-soft{
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
}

.filter-chip,
.attachment-chip,
.icon-btn{
  backdrop-filter: blur(14px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(2,8,23,.18);
}
.filter-chip:hover,
.attachment-chip:hover,
.icon-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(191,219,254,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 12px 28px rgba(2,8,23,.26);
}
.filter-chip.active{
  background: linear-gradient(180deg, rgba(106,168,255,.28), rgba(37,99,235,.22));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 30px rgba(37,99,235,.18);
}

.stat-card{
  backdrop-filter: blur(16px) saturate(130%);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.stat-card:hover{
  transform: translateY(-2px);
  border-color: rgba(191,219,254,.28);
  box-shadow: 0 16px 38px rgba(2,8,23,.28);
}

.entry-card{
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  backdrop-filter: blur(16px) saturate(128%);
}
.entry-card:hover{
  transform: translateY(-3px);
  border-color: rgba(191,219,254,.24);
  box-shadow: 0 24px 48px rgba(2,8,23,.34);
}
.entry-card.is-high{
  border-color: rgba(245,158,11,.22);
  box-shadow: 0 18px 40px rgba(245,158,11,.08);
}
.entry-card.is-done{
  border-color: rgba(34,197,94,.22);
}
.meta-pill{
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.month-day{
  overflow: hidden;
  backdrop-filter: blur(12px) saturate(126%);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.month-day:hover{
  transform: translateY(-3px) scale(1.01);
  border-color: rgba(191,219,254,.28);
  box-shadow: 0 18px 38px rgba(2,8,23,.28);
}
.month-day.has-entries{
  background: linear-gradient(180deg, rgba(22,40,74,.96), rgba(8,22,46,.88));
}
.month-day.priority-hoch{
  border-color: rgba(245,158,11,.4);
  background:
    radial-gradient(circle at top right, rgba(239,68,68,.16), transparent 28%),
    linear-gradient(180deg, rgba(46,24,24,.94), rgba(17,12,20,.88));
  box-shadow: 0 12px 30px rgba(239,68,68,.14);
}
.month-day.priority-hoch .month-day-count{
  background: linear-gradient(180deg, #fb923c, #ef4444);
}
.month-day.priority-mittel{
  border-color: rgba(245,158,11,.26);
  background:
    radial-gradient(circle at top right, rgba(245,158,11,.14), transparent 28%),
    linear-gradient(180deg, rgba(47,34,12,.92), rgba(14,18,34,.84));
}
.month-day.priority-mittel .month-day-count{
  background: linear-gradient(180deg, #fbbf24, #f59e0b);
}
.month-day.priority-niedrig{
  border-color: rgba(96,165,250,.2);
}
.month-day.is-selected{
  border-color: rgba(125,211,252,.78);
  box-shadow: 0 0 0 3px rgba(125,211,252,.14), 0 18px 38px rgba(2,8,23,.3);
}
.month-day-list .prio-dot{
  display:inline-block;
  width:8px;
  height:8px;
  margin-right:6px;
  border-radius:999px;
  vertical-align:middle;
  box-shadow: 0 0 0 3px rgba(255,255,255,.03);
}
.month-day-list .prio-hoch{ background: linear-gradient(180deg, #fb923c, #ef4444); }
.month-day-list .prio-mittel{ background: linear-gradient(180deg, #fde68a, #f59e0b); }
.month-day-list .prio-niedrig{ background: linear-gradient(180deg, #93c5fd, #2563eb); }

.priority-niedrig{
  color:#bfdbfe;
  border-color: rgba(96,165,250,.22);
  background: rgba(30,64,175,.14);
}
.priority-mittel{
  color:#fde68a;
  border-color: rgba(245,158,11,.24);
  background: rgba(120,53,15,.16);
}
.priority-hoch{
  color:#fecaca;
  border-color: rgba(239,68,68,.3);
  background: rgba(127,29,29,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(127,29,29,.12);
}

.month-legend{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.month-legend .legend-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:#dbeafe;
  font-size:12px;
  font-weight:700;
}
.month-legend .legend-dot{
  width:10px;
  height:10px;
  border-radius:999px;
}
.month-legend .legend-dot.high{ background: linear-gradient(180deg,#fb923c,#ef4444); }
.month-legend .legend-dot.medium{ background: linear-gradient(180deg,#fde68a,#f59e0b); }
.month-legend .legend-dot.low{ background: linear-gradient(180deg,#93c5fd,#2563eb); }

@media (prefers-reduced-motion: reduce){
  .btn,.filter-chip,.attachment-chip,.icon-btn,.month-day,.entry-card,.stat-card{ transition:none !important; }
}


/* ===== V6.2.1 Calendar polish ===== */
.month-day-number{
  color:#ffffff !important;
  text-shadow:0 1px 0 rgba(0,0,0,.28), 0 0 18px rgba(255,255,255,.08);
}
.month-day.is-today{
  border-color:rgba(125,211,252,.62);
  box-shadow:
    0 0 0 1px rgba(125,211,252,.18) inset,
    0 0 0 3px rgba(56,189,248,.08),
    0 18px 40px rgba(14,165,233,.16);
}
.month-day.is-today .month-day-number{
  color:#ffffff !important;
}
.month-day-today-clock{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  color:#ecfeff;
  background:linear-gradient(180deg, rgba(56,189,248,.28), rgba(37,99,235,.22));
  border:1px solid rgba(125,211,252,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 10px 24px rgba(14,165,233,.16);
  justify-self:start;
  width:max-content;
}
.month-day-today-clock::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:linear-gradient(180deg,#dbeafe,#38bdf8);
  box-shadow:0 0 10px rgba(56,189,248,.6);
}
.month-day.status-done{
  border-color:rgba(34,197,94,.42) !important;
  background:
    radial-gradient(circle at top right, rgba(74,222,128,.16), transparent 28%),
    linear-gradient(180deg, rgba(16,56,37,.94), rgba(8,31,24,.9)) !important;
  box-shadow:0 14px 34px rgba(22,163,74,.18);
}
.month-day.status-done .month-day-count{
  background:linear-gradient(180deg, #4ade80, #16a34a) !important;
}
.month-day.status-done .month-day-number{
  color:#f0fdf4 !important;
}
.month-day.status-done .month-day-list{
  color:#dcfce7;
}
.month-day.status-done .prio-dot{
  box-shadow:0 0 0 3px rgba(34,197,94,.14);
}
.month-day.status-done.is-selected{
  box-shadow:
    0 0 0 3px rgba(74,222,128,.16),
    0 18px 38px rgba(22,163,74,.2);
}


/* === V6.2.2: Kalenderwoche Ansicht === */
.month-grid.is-week-view{
  grid-template-columns: repeat(7, minmax(0,1fr));
}
.month-grid.is-week-view .month-day{
  min-height: 132px;
  border-radius: 22px;
}
.month-grid.is-week-view .month-day-list{
  gap: 6px;
}
.month-grid.is-week-view .month-day-list span{
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
#calendarViewToggleBtn{
  position: relative;
  overflow: hidden;
}
#calendarViewToggleBtn::after{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.12), transparent 42%, rgba(96,165,250,.08));
  opacity:.72;
  pointer-events:none;
}
@media (max-width: 900px){
  .month-grid.is-week-view .month-day{
    min-height: 112px;
  }
}


/* === V6.2.3: farbige KPI-Kacheln (Premium) =============================== */
.hero-stats .stat-card{ position: relative; overflow: hidden; }
.hero-stats .stat-card::before{
  content:"";
  position:absolute; inset:-1px;
  opacity:.55;
  filter: blur(0px);
  pointer-events:none;
}
.hero-stats .stat-card::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(800px 220px at 50% 0%, rgba(255,255,255,.10), transparent 60%);
  opacity:.9;
  pointer-events:none;
}
.hero-stats .stat-card .stat-value{ position: relative; z-index: 1; }
.hero-stats .stat-card .stat-label{ position: relative; z-index: 1; }

.hero-stats .stat-card.stat-total::before{
  background: radial-gradient(520px 180px at 20% 20%, rgba(96,165,250,.40), transparent 60%);
}
.hero-stats .stat-card.stat-today::before{
  background: radial-gradient(520px 180px at 20% 20%, rgba(34,211,238,.38), transparent 60%);
}
.hero-stats .stat-card.stat-high::before{
  background: radial-gradient(520px 180px at 20% 20%, rgba(251,113,133,.42), transparent 60%);
}
.hero-stats .stat-card.stat-done::before{
  background: radial-gradient(520px 180px at 20% 20%, rgba(34,197,94,.38), transparent 60%);
}
.hero-stats .stat-card.stat-att::before{
  background: radial-gradient(520px 180px at 20% 20%, rgba(168,85,247,.36), transparent 60%);
}

/* Stat-Zahl etwas prägnanter */
.hero-stats .stat-card.stat-high .stat-value{ letter-spacing: .2px; }

/* === V6.2.3: Kalenderwoche startet immer auf aktuelle Woche ============== */
/* (JS Fix, CSS hier nur als Marker) */


/* ===========================
   DEMO iPhone Look & Responsive
   =========================== */

:root{
  --radius-2xl: 22px;
  --radius-xl: 18px;
  --shadow-soft: 0 10px 30px rgba(0,0,0,.28);
  --shadow-btn: 0 10px 22px rgba(0,0,0,.22);
}

/* Better mobile text rendering + tap */
html, body{
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
body{
  -webkit-tap-highlight-color: transparent;
}

/* Safe areas (iPhone notch) */
.app{
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Responsive container: readable on all devices */
.container, .page, .wrap, main{
  max-width: none;
  width: 100%;
  margin: 0;
}
@media (max-width: 980px){
  .container, .page, .wrap, main{ padding-left: 14px; padding-right: 14px; }
}
@media (min-width: 981px){
  .container, .page, .wrap, main{ padding-left: 18px; padding-right: 18px; }
}

/* Typography scales like iOS */
h1, .hero-title{
  font-size: clamp(22px, 3.2vw, 34px);
  letter-spacing: -0.02em;
}
h2{
  font-size: clamp(18px, 2.4vw, 24px);
  letter-spacing: -0.015em;
}
body, input, button, textarea, select{
  font-size: 15.5px;
  line-height: 1.45;
}

/* Glass cards: more iPhone-like */
.card, .panel, .glass, .box{
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* Buttons: iOS pill + tactile */
.btn, button, .button{
  border-radius: 999px !important;
  min-height: 44px;               /* iOS touch target */
  padding: 10px 16px;
  font-weight: 650;
  letter-spacing: .01em;
  box-shadow: var(--shadow-btn);
  transform: translateZ(0);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover, button:hover, .button:hover{
  filter: brightness(1.08);
}
.btn:active, button:active, .button:active{
  transform: scale(.985);
  box-shadow: 0 6px 14px rgba(0,0,0,.22);
}

/* Inputs: iOS look */
input, select, textarea{
  border-radius: 16px !important;
  min-height: 44px;
  padding: 10px 12px;
}

/* Tables on mobile: horizontal scroll to avoid tiny text */
.table-wrap, .table-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-2xl);
}
table{
  min-width: 720px; /* keeps columns readable */
}
@media (max-width: 820px){
  table{ min-width: 640px; }
}

/* Sticky header for mobile (if you already have a header element) */
header, .topbar, .app-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}

/* Demo badge: looks like iOS chip */
#demoBadge{
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 750;
  letter-spacing: .02em;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}

/* Reduce motion if user prefers */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior: auto !important; }
}




/* === DEMO watermark (only when body has .demo-mode) === */
body.demo-mode::before{
  content: "DEMO";
  position: fixed;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  letter-spacing: .28em;
  font-size: min(18vw, 140px);
  color: rgba(238,244,255,.06);
  transform: rotate(-12deg);
  pointer-events: none;
  z-index: 0;
}
body.demo-mode > *{ position: relative; z-index: 1; }

/* === Mobile: Apple-like cards readability === */
@media (max-width: 720px){
  .entry-card{
    border-radius: 18px;
    padding: 14px 14px 12px;
  }
  .entry-headline h3{
    font-size: 16px;
    line-height: 1.25;
  }
  .entry-meta{
    gap: 6px;
    min-width: auto;
  }
  .entry-date{ font-size: 13px; }
  .entry-time{ font-size: 12px; }
  .badge{ font-size: 12px; }
  .note-line{ font-size: 12px; }
  .entry-actions{
    gap: 8px;
  }
  .entry-actions .btn{
    padding: 9px 10px;
    border-radius: 14px;
  }
}

/* === iPhone bottom-sheet dialogs (Details + Hilfe) === */
@media (max-width: 720px){
  dialog.dialog{
    width: calc(100% - 16px);
    max-width: 720px;
    margin: 0 auto;
    border-radius: 18px 18px 22px 22px;
  }
  dialog.detail-dialog,
  dialog.help-dialog{
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 8px;
    top: auto;
    max-height: 86vh;
    overflow: hidden;
    transform: translateY(8px);
    animation: sheetUp .18s ease-out;
  }
  @keyframes sheetUp{
    from{ transform: translateY(24px); opacity:.0; }
    to{ transform: translateY(8px); opacity:1; }
  }
  .dialog-head{
    position: sticky;
    top: 0;
    background: rgba(8, 22, 48, 0.78);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(191,219,254,.14);
    z-index: 2;
  }
  .detail-body{ padding-bottom: 10px; }
  .detail-actions{
    position: sticky;
    bottom: 0;
    background: rgba(8, 22, 48, 0.82);
    backdrop-filter: blur(16px);
    border-top: 1px solid rgba(191,219,254,.14);
    z-index: 2;
  }
}

/* === Help pill next to KPIs === */
.help-pill{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(191,219,254,.18);
  background: rgba(8, 22, 48, 0.55);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}
.help-pill .help-title{ font-weight: 700; }
.help-pill .help-sub{ color: var(--muted); font-size: 12px; line-height: 1.25; }
.help-pill .btn{
  padding: 8px 10px;
  border-radius: 14px;
}
@media (max-width: 720px){
  .help-pill{ grid-column: 1 / -1; }
}



/* === Demo UI fixes: consistent button text + locked badge === */
.btn, button.btn, .hero-actions .btn{
  font-size: 14px;
  line-height: 1.1;
  letter-spacing: .01em;
}

/* ensure icons/badges don't cut off */
.badge, .pill, .kpi-badge{
  box-sizing: border-box;
}

/* Locked buttons show a small lock glyph */
.btn[data-locked="1"]{
  position: relative;
  padding-left: 36px;
}

/* Dialog text not glued to left edge */
.modal .modal-body,
.modal .modal-content,
.dialog .dialog-body,
.dialog .dialog-content,
.sheet .sheet-body,
.sheet .sheet-content{
  padding-left: 18px !important;
  padding-right: 18px !important;
}
/* Buttons: gleiche Typo + sauberes Alignment */
.hero-actions .btn,
.hero-actions button,
.hero-actions label.btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  font-size: 14px !important;
  line-height: 1 !important;
  height: 38px;                 /* optional, sorgt für Gleichheit */
  padding: 0 14px !important;
  white-space: nowrap;
}

/* Lock-Buttons */

/* === FINAL FIX: Start oben + saubere Toolbar-Buttons ================== */

/* Kein global sticky auf allen headern */
header{
  position: static !important;
  top: auto !important;
}

/* Seite beim Laden optisch direkt oben */
html, body{
  margin: 0 !important;
  padding: 0 !important;
}

body.app{
  padding-top: 0 !important;
}

.app-shell{
  margin-top: 0 !important;
  padding-top: 14px !important;
}

/* obere Buttonleiste einheitlich */
.hero-actions{
  align-items: flex-start !important;
  gap: 10px !important;
}

.hero-actions .btn,
.hero-actions button,
.hero-actions label.btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
}

/* Import-Blöcke gleich hoch und sauber */
.import-picker{
  display: grid !important;
  gap: 6px !important;
  min-width: 170px !important;
}

.import-picker .file-name{
  font-size: 12px !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

/* Schloss links sauber platzieren */


/* falls alter Text mit > noch irgendwo gecacht ist, nicht vergrößern */
#exportBtn,
#exportCsvBtn{
  letter-spacing: 0 !important;
}
/* === Toolbar final fix ================================================== */
.hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

.hero-actions .btn,
.hero-actions button,
.hero-actions label.btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
}


.import-picker{
  display: grid !important;
  gap: 6px !important;
}

.import-picker .file-name{
  font-size: 12px !important;
  line-height: 1.2 !important;
  text-align: center !important;
}
/* === Toolbar fix ======================================================= */
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-start;
}

.hero-actions .btn,
.hero-actions button,
.hero-actions label.btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:44px !important;
  height:44px !important;
  padding:0 16px !important;
  font-size:14px !important;
  line-height:1 !important;
  font-weight:700 !important;
  white-space:nowrap !important;
  border-radius:999px !important;
  box-sizing:border-box !important;
  text-decoration:none !important;
}



.import-picker{
  display:grid !important;
  gap:6px !important;
}

.import-picker .file-name{
  font-size:12px !important;
  line-height:1.2 !important;
  text-align:center !important;
}

/* === packaged final toolbar fix (authoritative) ====================== */
.hero-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  align-items:flex-start !important;
}

.hero-actions .btn,
.hero-actions button,
.hero-actions label.btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:44px !important;
  height:44px !important;
  padding:0 16px !important;
  font-size:14px !important;
  line-height:1 !important;
  font-weight:700 !important;
  white-space:nowrap !important;
  border-radius:999px !important;
  box-sizing:border-box !important;
  text-decoration:none !important;
}



.import-picker{
  display:grid !important;
  gap:6px !important;
  min-width:170px !important;
}

.import-picker .file-name{
  font-size:12px !important;
  line-height:1.2 !important;
  text-align:center !important;
}
/* ========================================================================
   FINAL OVERRIDE – Demo-Hintergrund raus, Header nach oben, neue Toolbar
   ganz ans Dateiende setzen
   ======================================================================== */

/* DEMO-Schrift / Overlay sicher abschalten */
body::before,
body::after,
.app::before,
.app::after,
.app-shell::before,
.app-shell::after,
.hero::before,
.hero::after {
  content: none !important;
}

/* Ganz oben starten */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
}

body.app {
  padding-top: 0 !important;
}

.app-shell {
  margin-top: 0 !important;
  padding-top: 6px !important;
}

.hero {
  margin-top: 0 !important;
  padding-top: 18px !important;
}

/* Falls ambient-Layer die Fläche optisch aufblasen */
.ambient {
  pointer-events: none;
}

/* Toolbar komplett neu */
.hero-actions-new,
.hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

/* alte Toolbar-Styles hart überschreiben */
.hero-actions-new .btn-toolbar,
.hero-actions .btn-toolbar,
.hero-actions-new button,
.hero-actions-new label.btn,
.hero-actions button,
.hero-actions label.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(120, 160, 220, 0.34) !important;
  background: linear-gradient(180deg, rgba(33, 52, 92, 0.96), rgba(18, 33, 64, 0.96)) !important;
  color: #eef4ff !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 10px 24px rgba(0,0,0,0.24) !important;
  white-space: nowrap !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* Hover / Active */
.hero-actions-new .btn-toolbar:hover,
.hero-actions .btn-toolbar:hover,
.hero-actions-new button:hover,
.hero-actions-new label.btn:hover,
.hero-actions button:hover,
.hero-actions label.btn:hover {
  border-color: rgba(176, 205, 255, 0.58) !important;
  filter: none !important;
  transform: translateY(-1px) !important;
}

.hero-actions-new .btn-toolbar:active,
.hero-actions .btn-toolbar:active,
.hero-actions-new button:active,
.hero-actions-new label.btn:active,
.hero-actions button:active,
.hero-actions label.btn:active {
  transform: translateY(0) scale(0.99) !important;
}

/* Primary */
.btn-toolbar-primary {
  background: linear-gradient(180deg, #4f8dff, #2f6fe8) !important;
  border-color: rgba(133, 177, 255, 0.7) !important;
  color: #ffffff !important;
}

/* Lock links sauber platzieren */
.btn-toolbar-lock,
.hero-actions .btn-toolbar-lock {
  position: relative !important;
  padding-left: 38px !important;
}



/* Import-Blöcke */
.import-picker-new,
.import-picker {
  display: grid !important;
  gap: 6px !important;
  min-width: 170px !important;
}

.file-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.file-btn input {
  display: none !important;
}

.file-name {
  min-height: 18px !important;
  padding: 0 4px !important;
  color: rgba(214, 227, 255, 0.72) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 190px !important;
}

/* Hero etwas kompakter, damit Schichtbuch höher sitzt */
.hero-copy-wrap h1,
#appTitle {
  margin-top: 6px !important;
  margin-bottom: 8px !important;
}

.hero-copy,
#appSubtitle {
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}

/* Responsive */
@media (max-width: 760px) {
  .import-picker-new,
  .import-picker {
    min-width: 100% !important;
  }

  .file-name {
    max-width: none !important;
  }
}
/* ===== SCHICHTBUCH GANZ NACH OBEN ===== */

html,
body {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100% !important;
}

body.app {
  padding-top: 0 !important;
  margin-top: 0 !important;
  min-height: 100vh !important;
  display: block !important;
}

/* falls irgendein altes Demo-Layout den Inhalt vertikal nach unten schiebt */
.app-shell {
  position: relative !important;
  z-index: 1 !important;
  max-width: 1640px !important;
  margin: 0 auto !important;
  padding: 0 28px 28px !important;
  min-height: auto !important;
  display: block !important;
  place-content: unset !important;
  align-content: start !important;
  justify-content: flex-start !important;
}

/* Header wirklich direkt oben */
.hero {
  margin-top: 0 !important;
  padding-top: 18px !important;
}

/* erste Textzeile kompakter */
.hero-copy-wrap {
  gap: 10px !important;
}

.eyebrow {
  margin-top: 0 !important;
}

h1,
#appTitle {
  margin: 0 0 8px 0 !important;
}

/* DEMO-Overlay sicher aus */
body::before,
body::after,
.app::before,
.app::after,
.app-shell::before,
.app-shell::after,
.hero::before,
.hero::after {
  content: none !important;
}
body.app {
  display: block !important;
}

.app-shell {
  padding: 0 28px 28px !important;
  min-height: auto !important;
  display: block !important;
  place-content: unset !important;
  align-content: start !important;
  justify-content: flex-start !important;
}
/* ===== NUCLEAR FIX: APP GANZ NACH OBEN ===== */

html,
body {
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

body,
body.app {
  display: block !important;
  overflow-y: auto !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* alle möglichen Center/Bottom-Layouts killen */
.app,
.app-shell,
main,
.page,
.page-shell,
.shell {
  align-items: flex-start !important;
  align-content: flex-start !important;
  justify-content: flex-start !important;
  place-items: start !important;
  place-content: start !important;
}

/* wichtigster Block */
.app-shell {
  position: relative !important;
  top: 0 !important;
  inset: auto !important;
  margin: 0 auto !important;
  padding: 0 28px 28px !important;
  min-height: auto !important;
  height: auto !important;
  display: block !important;
  transform: none !important;
}

/* Header direkt oben */
.hero {
  margin: 0 !important;
  padding: 14px 24px 20px !important;
  transform: none !important;
}

/* Ambient darf keinen Platz erzeugen */
.ambient,
.ambient * {
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
}

/* Sicherheitsnetz gegen Pseudoelemente */
body::before,
body::after,
.app::before,
.app::after,
.app-shell::before,
.app-shell::after,
.hero::before,
.hero::after {
  content: none !important;
  display: none !important;
}
/* Schloss bei Export-Buttons genauso wie bei Datei auswählen */
#exportBtn,
#exportCsvBtn {
  position: relative !important;
  padding-left: 38px !important;
}



/* falls alte Lock-Regeln mittig setzen */
#exportBtn.btn-toolbar-lock::before,
#exportCsvBtn.btn-toolbar-lock::before,
#exportBtn[data-locked="1"]::before,
#exportCsvBtn[data-locked="1"]::before {
  left: 14px !important;
  top: 11px !important;
  transform: none !important;
}
.btn-toolbar-lock {
  position: relative !important;
  padding-left: 38px !important;
}
.hero-actions .btn[data-locked="1"],
.hero-actions label.btn[data-locked="1"],
#exportBtn,
#exportCsvBtn,
#importCsvTrigger,
#importJsonTrigger {
  position: relative !important;
  padding-left: 38px !important;
}

.hero-actions .btn[data-locked="1"]::before,
.hero-actions label.btn[data-locked="1"]::before,
#exportBtn::before,
#exportCsvBtn::before,
#importCsvTrigger::before,
#importJsonTrigger::before {
  content: "🔒" !important;
  position: absolute !important;
  left: 14px !important;
  top: 10px !important;
  transform: none !important;
  font-size: 12px !important;
  line-height: 1 !important;
  pointer-events: none !important;
}
.export-lock-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 16px !important;
}

.export-lock-btn::before {
  content: none !important;
  display: none !important;
}

.export-lock-icon {
  display: inline-block !important;
  font-size: 12px !important;
  line-height: 1 !important;
  transform: translateY(-1px) !important;
  flex: 0 0 auto !important;
}
.export-lock-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 16px !important;
}

.export-lock-icon {
  display: inline-block !important;
  font-size: 12px !important;
  line-height: 1 !important;
  transform: translateY(-1px) !important;
  flex: 0 0 auto !important;
}

.export-lock-btn::before,
#exportBtn::before,
#exportCsvBtn::before,
#importCsvTrigger::before,
#importJsonTrigger::before {
  content: none !important;
  display: none !important;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
}

.action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.action-group-premium {
  padding: 10px 12px;
  border: 1px solid rgba(120, 160, 220, 0.28);
  border-radius: 16px;
  background: rgba(10, 22, 48, 0.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.premium-label {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
  padding: 0 6px 0 2px;
  color: #f3c96a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.premium-btn {
  min-height: 44px;
}
.hero-actions-split {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 16px !important;
}

.action-group-main {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
}

.premium-panel {
  min-width: 430px !important;
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(120, 160, 220, 0.26) !important;
  background: linear-gradient(180deg, rgba(12, 24, 52, 0.58), rgba(8, 18, 40, 0.48)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 10px 26px rgba(0,0,0,0.16) !important;
}

.premium-panel-title {
  margin-bottom: 12px !important;
  color: #f6cc72 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.premium-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(160px, 1fr)) !important;
  gap: 10px !important;
}

.premium-btn {
  width: 100% !important;
  min-height: 44px !important;
  height: 44px !important;
}

.premium-btn::before,
#exportBtn::before,
#exportCsvBtn::before,
#importCsvTrigger::before,
#importJsonTrigger::before {
  content: none !important;
  display: none !important;
}

.premium-panel-note {
  margin-top: 10px !important;
  color: rgba(214, 227, 255, 0.68) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}

.file-btn input {
  display: none !important;
}

@media (max-width: 900px) {
  .premium-panel {
    min-width: 100% !important;
  }

  .premium-grid {
    grid-template-columns: 1fr !important;
  }
}
/* ===== Premium / Passwort-Dialog edler machen ===== */

dialog {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

dialog::backdrop {
  background:
    radial-gradient(circle at top, rgba(66, 120, 255, 0.16), transparent 38%),
    rgba(2, 8, 22, 0.72) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.dialog,
.help-dialog,
.unlock-dialog,
.password-dialog,
dialog.glass-card {
  width: min(560px, calc(100vw - 32px)) !important;
  max-width: 560px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(120, 160, 220, 0.26) !important;
  background:
    linear-gradient(180deg, rgba(10, 22, 50, 0.94), rgba(5, 14, 34, 0.96)) !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
  color: #eef4ff !important;
  overflow: hidden !important;
}

.dialog-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 22px 24px 14px !important;
  border-bottom: 1px solid rgba(120, 160, 220, 0.14) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)) !important;
}

.dialog-head h3 {
  margin: 0 0 6px 0 !important;
  color: #f4f7ff !important;
  font-size: 30px !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
}

.dialog-head p,
.dialog-head .muted {
  margin: 0 !important;
  color: rgba(214, 227, 255, 0.78) !important;
  font-size: 14px !important;
}

.dialog-body {
  padding: 20px 24px 24px !important;
}

.dialog label,
.dialog .field,
.dialog .form-row {
  display: block !important;
  margin-bottom: 16px !important;
}

.dialog label > span,
.dialog .field-label {
  display: block !important;
  margin-bottom: 8px !important;
  color: #dbe7ff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.dialog input[type="text"],
.dialog input[type="password"],
.dialog input[type="email"],
.dialog textarea {
  width: 100% !important;
  min-height: 54px !important;
  padding: 0 16px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(130, 170, 235, 0.34) !important;
  background: rgba(2, 10, 28, 0.92) !important;
  color: #f3f7ff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 0 0 1px rgba(255,255,255,0.02) !important;
  outline: none !important;
}

.dialog textarea {
  min-height: 120px !important;
  padding: 14px 16px !important;
}

.dialog input::placeholder,
.dialog textarea::placeholder {
  color: rgba(210, 222, 246, 0.42) !important;
}

.dialog input:focus,
.dialog textarea:focus {
  border-color: rgba(130, 179, 255, 0.72) !important;
  box-shadow:
    0 0 0 4px rgba(79, 141, 255, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

.dialog .dialog-actions,
.dialog .form-actions {
  display: flex !important;
  gap: 12px !important;
  justify-content: flex-end !important;
  margin-top: 18px !important;
}

.dialog .btn {
  min-width: 150px !important;
  height: 52px !important;
  border-radius: 16px !important;
  font-weight: 700 !important;
}

.dialog .btn-primary,
.dialog button[type="submit"],
.dialog .btn-confirm {
  background: linear-gradient(180deg, #5a93ff, #3a73ea) !important;
  border: 1px solid rgba(138, 181, 255, 0.58) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 12px 28px rgba(41, 99, 214, 0.30) !important;
}

.dialog .btn:not(.btn-primary):not([type="submit"]) {
  background: linear-gradient(180deg, rgba(24, 39, 73, 0.96), rgba(13, 24, 49, 0.96)) !important;
  border: 1px solid rgba(120, 160, 220, 0.24) !important;
  color: #eef4ff !important;
}

.dialog .btn:hover {
  transform: translateY(-1px) !important;
}

.dialog .glass-note {
  border-radius: 16px !important;
  border: 1px solid rgba(120, 160, 220, 0.16) !important;
  background: rgba(255,255,255,0.03) !important;
  padding: 14px 16px !important;
}

@media (max-width: 640px) {
  .dialog,
  .help-dialog,
  .unlock-dialog,
  .password-dialog,
  dialog.glass-card {
    width: calc(100vw - 18px) !important;
    border-radius: 20px !important;
  }

  .dialog-head {
    padding: 18px 18px 12px !important;
  }

  .dialog-body {
    padding: 16px 18px 18px !important;
  }

  .dialog .dialog-actions,
  .dialog .form-actions {
    flex-direction: column !important;
  }

  .dialog .btn {
    width: 100% !important;
    min-width: 0 !important;
  }
}
/* ===== Unlock Modal ===== */

.unlock-modal {
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  z-index: 10020 !important;
  padding: 18px !important;
}

.unlock-modal-inner {
  width: min(560px, 100%) !important;
}

.unlock-panel {
  border-radius: 24px !important;
  border: 1px solid rgba(120,160,220,.24) !important;
  background:
    linear-gradient(180deg, rgba(12,24,52,.96), rgba(5,14,34,.98)) !important;
  box-shadow:
    0 30px 100px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.unlock-head {
  align-items: center !important;
}

.unlock-brand {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.unlock-icon {
  width: 54px !important;
  height: 54px !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 26px !important;
  background: linear-gradient(180deg, rgba(79,141,255,.22), rgba(24,58,120,.18)) !important;
  border: 1px solid rgba(120,160,220,.24) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.unlock-head h2 {
  margin: 0 !important;
  font-size: 20px !important;
  line-height: 1.1 !important;
}

.unlock-body {
  padding: 22px 24px 24px !important;
}

.unlock-copy {
  margin: 0 0 14px !important;
  color: rgba(225,235,255,.88) !important;
  line-height: 1.5 !important;
}

.unlock-field {
  display: block !important;
  margin-top: 18px !important;
}

.unlock-field > span {
  display: block !important;
  margin-bottom: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #dbe7ff !important;
}

#unlockPasswordInput {
  width: 100% !important;
  height: 54px !important;
  padding: 0 16px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(130,170,235,.34) !important;
  background: rgba(2,10,28,.92) !important;
  color: #f3f7ff !important;
  outline: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

#unlockPasswordInput:focus {
  border-color: rgba(130,179,255,.72) !important;
  box-shadow: 0 0 0 4px rgba(79,141,255,.14) !important;
}

.unlock-actions {
  display: flex !important;
  gap: 12px !important;
  justify-content: flex-end !important;
  margin-top: 22px !important;
}

.unlock-actions .btn {
  min-width: 150px !important;
  height: 50px !important;
  border-radius: 16px !important;
}

@media (max-width: 640px) {
  .unlock-actions {
    flex-direction: column !important;
  }

  .unlock-actions .btn {
    width: 100% !important;
  }
}
#entryModal,
#unlockModal {
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 18px !important;
}

#entryModal .modal-inner,
#unlockModal .modal-inner {
  width: min(720px, 100%) !important;
  margin: 0 auto !important;
}
[hidden] {
  display: none !important;
}

#unlockModal[hidden],
#unlockModalBackdrop[hidden],
#entryModal[hidden],
#entryModalBackdrop[hidden] {
  display: none !important;
}

/* ===== WOW-Effekt: Schichtübergabe ===== */
.panel-handover{
  margin: 0;
}
.handover-head{
  align-items: end;
}
.handover-summary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(125, 211, 252, .24);
  background: linear-gradient(180deg, rgba(8, 145, 178, .18), rgba(37, 99, 235, .16));
  color:#e0f2fe;
  font-weight:800;
}
.handover-list{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:14px;
}
.handover-card{
  width:100%;
  text-align:left;
  border:1px solid rgba(125, 211, 252, .22);
  background: linear-gradient(180deg, rgba(8, 47, 73, .92), rgba(8, 22, 46, .92));
  border-radius:22px !important;
  padding:16px;
  display:grid;
  gap:10px;
}
.handover-card-top{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;}
.handover-card-badge,.handover-inline-badge,.tag-handover{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:999px;
  background: rgba(34,211,238,.12);
  color:#cffafe;border:1px solid rgba(103,232,249,.22);
  font-weight:800;font-size:12px;
}
.handover-card-title{font-size:20px;font-weight:800;line-height:1.15;}
.handover-card-meta,.handover-card-date{color:#bcd3f6;font-size:13px;}
.handover-card-owner,.handover-card-note{color:#e8f2ff;line-height:1.5;}
.handover-empty{
  border:1px dashed rgba(125,211,252,.22);
  border-radius:20px;
  padding:20px;
  color:var(--muted);
  background: rgba(8, 30, 58, .35);
}
.handover-grid{grid-template-columns: 1.1fr 1fr;align-items:start;}
.toggle-field{align-self:stretch;}
.switch-row{
  display:flex;align-items:center;gap:12px;
  min-height:54px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.18);
  background: rgba(7, 18, 38, 0.82);
}
.switch-row input{width:20px;height:20px;min-height:auto;}
.switch-text{font-weight:600;color:#dbeafe;}
.handover-inline{
  display:grid;gap:8px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(103,232,249,.18);
  background: linear-gradient(180deg, rgba(8, 47, 73, .72), rgba(8, 22, 46, .62));
}
.handover-inline-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:#cffafe;font-weight:700;}
.handover-inline-owner,.handover-inline-note{color:#eaf4ff;line-height:1.5;}
.detail-handover,.print-handover{
  margin: 14px 0 0;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(103,232,249,.18);
  background: linear-gradient(180deg, rgba(8, 47, 73, .54), rgba(8, 22, 46, .46));
}
.detail-handover-title,.print-handover-title{
  margin-bottom:10px;
  color:#cffafe;
  font-weight:800;
  letter-spacing:.02em;
}
.detail-handover-row,.print-handover div{line-height:1.55;color:#eaf4ff;}
@media (max-width: 820px){
  .handover-grid{grid-template-columns:1fr;}
  .handover-list{grid-template-columns:1fr;}
}

/* ===== Titel im Eintrag immer weiß ===== */
.entry-card h3,
.entry-title,
.entry-headline h3,
.detail-title{
  color:#f4f8ff !important;
}

/* ===== Detail-Dialog sauber ausrichten ===== */
#detailDialog{
  width:min(1120px, calc(100vw - 32px));
  max-width:1120px;
}

#detailDialog .detail-body{
  display:grid;
  gap:18px;
}

#detailDialog .detail-hero{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(300px,.95fr);
  gap:18px;
  align-items:start;
}

#detailDialog .detail-panel{
  min-width:0;
}

#detailDialog .detail-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
  align-items:start;
}

#detailDialog .detail-kv{
  min-height:90px;
  padding:14px 14px 12px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

#detailDialog .detail-kv-label{
  margin-bottom:8px;
  line-height:1.2;
}

#detailDialog .detail-kv-value{
  line-height:1.3;
  word-break:break-word;
  color:#f4f8ff;
}

#detailDialog h4,
#detailDialog h2,
#detailDialog h3{
  color:#f4f8ff;
}

/* ===== Tablet / kleinere Breiten ===== */
@media (max-width: 900px){
  #detailDialog .detail-hero{
    grid-template-columns:1fr;
  }

  #detailDialog .detail-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 640px){
  #detailDialog .detail-grid{
    grid-template-columns:1fr;
  }
}
/* ===== Feinschliff Abstand Header -> Monat ===== */
.panel-calendar{
  margin-top: 28px !important;
}

/* ===== Hauptseite: Eintragstitel immer weiß ===== */
.entry-card h3,
.entry-card .entry-title,
.entry-card .entry-headline,
.entry-card .entry-headline h3,
.entry-card .subject,
.entry-card .title {
  color: #f4f8ff !important;
  -webkit-text-fill-color: #f4f8ff !important;
}

/* ===== Detail-Dialog: Betreff kleiner und sauberer ===== */
#detailDialog .detail-title{
  font-size: clamp(1.35rem, 2vw, 2.05rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  margin: 4px 0 10px !important;
  color: #f4f8ff !important;
  word-break: break-word;
}

/* ===== Detail-Dialog: rechte Details sauberer ausrichten ===== */
#detailDialog .detail-grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

#detailDialog .detail-kv{
  min-height: 86px !important;
  padding: 14px 14px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

#detailDialog .detail-kv-label{
  font-size: .78rem !important;
  line-height: 1.2 !important;
  margin-bottom: 8px !important;
}

#detailDialog .detail-kv-value{
  font-size: 1.05rem !important;
  line-height: 1.25 !important;
  color: #f4f8ff !important;
  word-break: break-word !important;
}

/* ===== Mobile ===== */
@media (max-width: 640px){
  #detailDialog .detail-title{
    font-size: 1.15rem !important;
  }
}
/* ===== HOTFIX: Offene Übergaben Titel wirklich weiß, ohne Glas-Overlay-Effekt ===== */
.handover-card,
.handover-card * {
  position: relative;
  z-index: 1;
}

.handover-card-title,
.handover-card .handover-card-title,
.handover-card h3,
.handover-card .subject,
.handover-card .title {
  color: #f4f8ff !important;
  -webkit-text-fill-color: #f4f8ff !important;
  text-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

.handover-card::before,
.handover-card::after,
.handover-card-title::before,
.handover-card-title::after {
  content: none !important;
}

/* ===== Calendar day number inset fix ===== */
.month-day-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
  padding: 6px 8px 0 12px;
}

.month-day-number{
  display:inline-block;
  min-width: 1.6em;
  line-height:1.1;
  padding-top:0;
  padding-left:1px;
  font-size:18px;
  font-weight:800;
  text-align:left;
}

.month-day-count{
  flex: 0 0 auto;
}

@media (max-width: 900px){
  .month-day-top{
    padding: 6px 8px 0 11px;
  }

  .month-day-number{
    font-size:16px;
  }
}

@media (max-width: 640px){
  .month-day-top{
    padding: 5px 7px 0 10px;
  }

  .month-day-number{
    min-width: 1.5em;
    font-size:15px;
  }
}
/* === Confirm-/Reset-Dialog sauber zentrieren und erst bei offen anzeigen === */
#confirmModal[hidden],
#confirmModalBackdrop[hidden]{
  display:none !important;
}

#confirmModalBackdrop{
  position:fixed !important;
  inset:0 !important;
  background:rgba(5,10,22,.42) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
  z-index:9998 !important;
}

#confirmModal{
  position:fixed !important;
  inset:0 !important;
  display:grid !important;
  place-items:start center !important;
  padding-top:84px !important;   /* näher am Header */
  padding-left:18px !important;
  padding-right:18px !important;
  margin:0 !important;
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  max-height:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  transform:none !important;
  overflow:visible !important;
  z-index:9999 !important;
}

#confirmModal .modal-inner,
#confirmModal .premium-modal,
#confirmModal .dialog-card{
  width:min(460px, calc(100vw - 36px)) !important;
  max-width:460px !important;
  margin:0 auto !important;
  transform:none !important;
}

/* Sicherheit gegen alte Bottom-Sheet-/Dialog-Regeln */
dialog#confirmModal{
  left:0 !important;
  right:0 !important;
  top:0 !important;
  bottom:0 !important;
}

/* Mobile etwas tiefer und schmaler */
@media (max-width: 720px){
  #confirmModal{
    place-items:start center !important;
    padding-top:72px !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }

  #confirmModal .modal-inner,
  #confirmModal .premium-modal,
  #confirmModal .dialog-card{
    width:min(100%, 420px) !important;
    max-width:420px !important;
  }
}
/* ===== PRO-Erweiterung: Kategorie / Fälligkeit ===== */

.entry-card .tags .tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  line-height: 1.2;
  white-space: normal;
  text-align: center;
}

.entry-card .tags .tag[data-overdue],
.entry-card .tags .tag.is-overdue {
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset;
}

.entry-card .meta-pro {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.entry-card .meta-pro .meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: .92rem;
  line-height: 1.2;
  color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.entry-card .meta-pro .meta-chip strong {
  font-weight: 700;
  color: #fff;
}

.entry-card .tags .tag,
.entry-card .meta-pro .meta-chip {
  max-width: 100%;
  word-break: break-word;
}
/* ===== Entry-Dialog: auf normalen Monitoren vollständig nutzbar ===== */

#entryModal .modal-card,
#entryModal .dialog,
#entryModal .premium-dialog,
#entryModal .entry-modal-card {
  max-height: min(92vh, 980px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#entryModal .modal-body,
#entryModal .dialog-body,
#entryModal .premium-dialog-body,
#entryModal form {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: calc(92vh - 120px) !important;
  padding-right: 8px !important;
  scrollbar-gutter: stable;
}

/* etwas Luft unten, damit Speichern / Zurücksetzen nie abgeschnitten wirkt */
#entryModal .modal-actions,
#entryModal .dialog-actions,
#entryModal .premium-dialog-actions,
#entryModal .form-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(4,18,45,0.20), rgba(4,18,45,0.92)) !important;
  padding-top: 12px !important;
}

/* auf etwas kleineren Höhen enger setzen */
@media (max-height: 900px) {
  #entryModal .grid.two {
    gap: 10px !important;
  }

  #entryModal label > span,
  #entryModal .field-label {
    margin-bottom: 5px !important;
  }

  #entryModal textarea {
    min-height: 92px !important;
  }
}
/* ===== Filter: Kategorie + Überfällig ===== */

#filterCategory,
#filterOverdueBtn {
  min-width: 0;
}

#filterOverdueBtn.active,
#quickOverdueChip.active {
  box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 10px 24px rgba(0,0,0,.24);
}

.premium-toolbar {
  align-items: center;
}
/* ===== Offene Übergaben: Priorität farblich hervorheben ===== */

/* Hoch = rot / orange */
.handover-card.priority-hoch,
.handover-item.priority-hoch,
.open-handover-card.priority-hoch {
  border-color: rgba(255, 120, 70, 0.55) !important;
  box-shadow:
    0 0 0 1px rgba(255, 120, 70, 0.18) inset,
    0 12px 28px rgba(255, 90, 40, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(255, 120, 70, 0.10), rgba(255, 90, 40, 0.04)),
    rgba(9, 24, 52, 0.92) !important;
}

/* Mittel = amber / gold */
.handover-card.priority-mittel,
.handover-item.priority-mittel,
.open-handover-card.priority-mittel {
  border-color: rgba(255, 196, 92, 0.52) !important;
  box-shadow:
    0 0 0 1px rgba(255, 196, 92, 0.16) inset,
    0 12px 28px rgba(255, 196, 92, 0.12) !important;
  background:
    linear-gradient(180deg, rgba(255, 196, 92, 0.08), rgba(255, 196, 92, 0.03)),
    rgba(9, 24, 52, 0.92) !important;
}

/* Niedrig = blau / grau-blau */
.handover-card.priority-niedrig,
.handover-item.priority-niedrig,
.open-handover-card.priority-niedrig {
  border-color: rgba(112, 164, 255, 0.42) !important;
  box-shadow:
    0 0 0 1px rgba(112, 164, 255, 0.12) inset,
    0 12px 28px rgba(112, 164, 255, 0.10) !important;
  background:
    linear-gradient(180deg, rgba(112, 164, 255, 0.06), rgba(112, 164, 255, 0.02)),
    rgba(9, 24, 52, 0.92) !important;
}
/* ===== KPI-Kacheln klickbar / aktiv ===== */
#heroStats .stat-card {
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

#heroStats .stat-card:hover {
  transform: translateY(-1px);
}

#heroStats .stat-card.is-active-filter {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.22) inset,
    0 14px 32px rgba(0,0,0,.28);
}
#entryDueDate::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(2.4) contrast(1.2);
  opacity: 1;
}
/* ===== Kurznotiz Button ===== */
#quickNoteBtn {
  white-space: nowrap;
}

.btn-toolbar-secondary {
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(120,160,255,.16), rgba(120,160,255,.08));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 10px 24px rgba(8,18,40,.24);
  color: #fff;
}

.btn-toolbar-secondary:hover {
  border-color: rgba(255,255,255,.24);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 14px 28px rgba(8,18,40,.30);
}
/* ===== Kurznotiz oben statt unten ===== */
#quickNoteModal {
  position: fixed !important;
  inset: 88px auto auto 50% !important;
  transform: translateX(-50%) !important;
  width: min(560px, calc(100vw - 24px)) !important;
  max-width: 560px !important;
  margin: 0 !important;
  z-index: 1400 !important;
  display: block !important;
}

#quickNoteModal[hidden] {
  display: none !important;
}

#quickNoteModal .quick-note-modal-card {
  width: 100% !important;
  max-width: none !important;
  max-height: min(78vh, 620px) !important;
  overflow: hidden !important;
  border-radius: 22px !important;
}

#quickNoteModal .quick-note-body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: calc(78vh - 132px) !important;
}

#quickNoteModal textarea {
  min-height: 110px !important;
  resize: none !important;
}

@media (max-width: 760px) {
  #quickNoteModal {
    inset: 72px auto auto 8px !important;
    transform: none !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
  }
}
/* ===== Kurznotiz eleganter / Checkbox sauber ===== */

#quickNoteModal .quick-note-modal-card {
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 18px 40px rgba(0,0,0,.28) !important;
}

#quickNoteModal .modal-header,
#quickNoteModal .modal-actions {
  border-color: rgba(255,255,255,.08) !important;
}

#quickNoteModal .quick-note-check {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#quickNoteModal .quick-note-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  margin: 0;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 8px 18px rgba(0,0,0,.20);
  cursor: pointer;
  position: relative;
  transition: all .18s ease;
}

#quickNoteModal .quick-note-check input[type="checkbox"]:hover {
  border-color: rgba(255,255,255,.34);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 10px 22px rgba(0,0,0,.24);
}

#quickNoteModal .quick-note-check input[type="checkbox"]:checked {
  background: linear-gradient(180deg, rgba(88,157,255,.95), rgba(53,114,236,.92));
  border-color: rgba(120,180,255,.75);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 10px 24px rgba(31,94,214,.34);
}

#quickNoteModal .quick-note-check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 5px;
  width: 7px;
  height: 13px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(45deg);
}
/* ===== Kurznotiz: weniger transparent, bessere Abstände ===== */

#quickNoteModal .quick-note-modal-card {
  background:
    linear-gradient(180deg, rgba(7, 22, 52, 0.98), rgba(4, 16, 40, 0.985)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 24px 48px rgba(0,0,0,.34) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#quickNoteModal .modal-header {
  padding: 18px 20px 12px !important;
}

#quickNoteModal .quick-note-body {
  padding: 8px 20px 18px !important;
}

#quickNoteModal .modal-actions {
  padding: 14px 20px 18px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: flex-end !important;
  background: linear-gradient(180deg, rgba(6,18,44,.96), rgba(6,18,44,.99)) !important;
}

#quickNoteModal .grid,
#quickNoteModal .grid.two {
  gap: 14px !important;
}

#quickNoteModal label > span {
  display: inline-block;
  margin-bottom: 8px !important;
}

#quickNoteModal textarea,
#quickNoteModal select {
  background: rgba(3, 15, 38, 0.92) !important;
}

#quickNoteModal textarea {
  min-height: 120px !important;
}

#quickNoteModal .quick-note-check {
  justify-content: flex-end;
}

#quickNoteModal .quick-note-check input[type="checkbox"] {
  width: 24px;
  height: 24px;
  border-radius: 8px;
}

#quickNoteModal .quick-note-check input[type="checkbox"]:checked::after {
  left: 7px;
  top: 3px;
  width: 6px;
  height: 12px;
}

#quickNoteModal .btn {
  min-height: 44px !important;
}

#quickNoteModal .icon-btn {
  flex: 0 0 auto;
}

@media (max-width: 760px) {
  #quickNoteModal .modal-header,
  #quickNoteModal .quick-note-body,
  #quickNoteModal .modal-actions {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #quickNoteModal .modal-actions .btn {
    flex: 1 1 auto;
  }
}
/* ===== Meine Schicht-Notizen ===== */
.quick-notes-panel {
  margin-top: 16px;
}

.quick-notes-list {
  display: grid;
  gap: 12px;
}

.quick-notes-empty {
  padding: 14px 16px;
  border: 1px dashed rgba(255,255,255,.14);
  border-radius: 16px;
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.03);
}

.quick-note-item {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(8,24,54,.96), rgba(5,18,42,.98));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 12px 24px rgba(0,0,0,.18);
}

.quick-note-item.priority-hoch {
  border-color: rgba(255,120,70,.32);
}

.quick-note-item.priority-mittel {
  border-color: rgba(255,196,92,.28);
}

.quick-note-item.priority-niedrig {
  border-color: rgba(112,164,255,.24);
}

.quick-note-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.quick-note-text {
  font-size: 0.98rem;
  line-height: 1.45;
  color: #fff;
  white-space: pre-wrap;
  word-break: break-word;
}

.quick-note-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.quick-note-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .86rem;
  line-height: 1.2;
  color: #fff;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
}

.quick-note-time {
  color: rgba(255,255,255,.62);
  font-size: .84rem;
  white-space: nowrap;
}



/* ===== Kurznotiz fertig ===== */
.quick-note-item.is-done {
  opacity: .88;
  border-color: rgba(90, 210, 140, .26);
}

.quick-note-chip-success {
  background: rgba(34,197,94,.16);
  border-color: rgba(34,197,94,.28);
}

.quick-note-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.quick-note-action-btn {
  min-height: 38px;
  padding: 9px 12px;
  border-radius: 12px;
}

.quick-note-delete-btn {
  border-color: rgba(239,68,68,.22);
}

.quick-note-delete-btn:hover {
  border-color: rgba(239,68,68,.38);
}

.quick-note-item.is-done .quick-note-text {
  opacity: .78;
  text-decoration: line-through;
}
/* ===== Footer modern / responsive ===================================== */

.ops-footer{
  margin: 28px auto 18px;
  padding: 0 4px env(safe-area-inset-bottom);
}

.ops-footer-inner{
  max-width: 1640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 20px;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background:
    linear-gradient(180deg, rgba(18, 31, 56, 0.92), rgba(8, 16, 32, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 14px 34px rgba(0,0,0,0.24);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
}

.ops-footer-brand{
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ops-footer-name{
  color: #f8fbff;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.ops-footer-title{
  color: rgba(214, 227, 255, 0.78);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
}

.ops-footer-links{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.ops-footer-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(120, 160, 220, 0.26);
  background: rgba(255,255,255,0.04);
  color: #eef4ff;
  text-decoration: none;
  transition:
    transform .12s ease,
    border-color .12s ease,
    background .12s ease,
    box-shadow .12s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.ops-footer-link:hover{
  transform: translateY(-1px);
  border-color: rgba(176, 205, 255, 0.52);
  background: rgba(255,255,255,0.07);
  color: #ffffff;
}

.ops-footer-label{
  color: rgba(170, 196, 235, 0.82);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ops-footer-value{
  color: #f3f7ff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  word-break: break-word;
}

@media (max-width: 820px){
  .ops-footer{
    margin-top: 22px;
  }

  .ops-footer-inner{
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
  }

  .ops-footer-links{
    justify-content: stretch;
    flex-direction: column;
  }

  .ops-footer-link{
    width: 100%;
    justify-content: space-between;
  }

  .ops-footer-value{
    text-align: right;
    max-width: 68%;
  }
}

@media (max-width: 520px){
  .ops-footer-inner{
    border-radius: 18px;
    padding: 14px;
  }

  .ops-footer-name{
    font-size: 15px;
  }

  .ops-footer-title{
    font-size: 12.5px;
  }

  .ops-footer-link{
    align-items: flex-start;
    gap: 8px;
    border-radius: 16px;
    padding: 12px 13px;
  }

  .ops-footer-value{
    max-width: 70%;
    font-size: 13px;
    line-height: 1.3;
  }
}

/* ===== Einträge-Bereich bündig und sauber ===== */

.panel.panel-list.glass-card{
  overflow: hidden;
}

.panel.panel-list.glass-card #toolbarNote{
  margin: 0;
  padding: 8px 18px 6px;
}

.panel.panel-list.glass-card #quickFilterBar{
  margin: 0;
  padding: 0 18px 14px;
}

.panel.panel-list.glass-card #entryList{
  margin: 0;
  padding: 0;
}

#entryList.entry-list,
#entryList.premium-entry-list{
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 100%;
}

#entryList .entry-card{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 760px){
  .panel.panel-list.glass-card #toolbarNote{
    padding: 8px 14px 6px;
  }

  .panel.panel-list.glass-card #quickFilterBar{
    padding: 0 14px 12px;
  }
}
/* ===== ALLE HAUPTBEREICHE GLEICH BREIT (außer Footer) ===== */
.app-shell{
  max-width: 1640px !important;
  margin: 0 auto !important;
  padding: 0 28px 28px !important;
  box-sizing: border-box !important;
}

main,
.container,
.page,
.wrap{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* alle Hauptsektionen innerhalb des Hauptfensters */
main > *,
.app-shell > *:not(.ops-footer){
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
/* ===== Unteren Entries-Bereich wieder sauber in den Hauptcontainer zwingen ===== */

.panel.panel-list,
.panel.panel-list.glass-card,
#entryList,
#entryList.entry-list,
#entryList.premium-entry-list{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#entryList{
  display: grid !important;
  gap: 16px !important;
  padding: 0 !important;
}

#entryList .entry-card,
#entryList .premium-entry,
#entryList .shift-entry,
#entryList article{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.entry-main,
.entry-content,
.entry-grid,
.entry-body{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* falls innen Grid/Flex die Karte auseinanderdrückt */
#entryList .entry-card > *,
#entryList .premium-entry > *{
  min-width: 0 !important;
}
/* ===== Notfall-Fix für zu breite untere Karten ===== */
#entryList .entry-card,
#entryList .premium-entry{
  overflow: hidden !important;
}

#entryList .entry-card * ,
#entryList .premium-entry *{
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.entry-meta,
.entry-main,
.entry-actions,
.entry-side,
.entry-right {
  min-width: 0 !important;
}

.entry-card > * {
  min-width: 0 !important;
}
/* ===== Demo Premium Dialog ===== */
#demoLoadBackdrop{
  position: fixed;
  inset: 0;
  background: rgba(2, 8, 23, 0.58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 3000;
}

#demoLoadModal{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 3001;
}

#demoLoadModal[hidden],
#demoLoadBackdrop[hidden]{
  display: none !important;
}

.premium-dialog-card{
  width: min(560px, calc(100vw - 32px));
  border-radius: 24px;
  padding: 20px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background:
    linear-gradient(180deg, rgba(10, 26, 54, 0.96), rgba(5, 15, 34, 0.94));
  box-shadow:
    0 22px 60px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.08);
}

#demoLoadModal .modal-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

#demoLoadModal .modal-head h3{
  margin: 4px 0 0;
}

#demoLoadModal .modal-body{
  color: var(--text-soft, rgba(226,232,240,.88));
  line-height: 1.55;
  margin-bottom: 18px;
}

.premium-dialog-actions{
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

#demoLoadModal .icon-btn{
  min-width: 40px;
  min-height: 40px;
  border-radius: 999px;
}
/* ===== Demo-Modal sicher sichtbar, wenn hidden entfernt ist ===== */
#demoLoadModal{
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 20px !important;
  z-index: 3001 !important;
}

#demoLoadBackdrop{
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  background: rgba(2, 8, 23, 0.58) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 3000 !important;
}

#demoLoadModal[hidden],
#demoLoadBackdrop[hidden]{
  display: none !important;
}
#demoLoadModal:not([hidden]){
  display: grid !important;
}

#demoLoadBackdrop:not([hidden]){
  display: block !important;
}
/* ===== Demo-Wasserzeichen ===== */
body::after{
  content: "DEMOVERSION";
  position: fixed;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%) rotate(-18deg);
  font-size: clamp(42px, 8vw, 110px);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.06);
  pointer-events: none;
  user-select: none;
  z-index: 1;
  white-space: nowrap;
}

/* wichtige Dialoge / Header / Panels weiter darüber */
.app-shell,
header,
.modal,
.modal-backdrop,
.panel,
.glass-card,
.hero-card{
  position: relative;
  z-index: 2;
}
/* ===== Demo-Badge oben rechts ===== */
body::after{
  content: "DEMOVERSION";
  position: fixed;
  top: 14px;
  right: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.96);
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.92), rgba(153, 27, 27, 0.92));
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  pointer-events: none;
  user-select: none;
  z-index: 5000;
}
background: linear-gradient(180deg, rgba(37, 99, 235, 0.92), rgba(29, 78, 216, 0.92));
/* ===== Datum/Uhrzeit Icons im Eintrag-Dialog hell darstellen ===== */
#entryModal input[type="date"],
#entryModal input[type="time"],
#quickNoteModal input[type="date"],
#quickNoteModal input[type="time"]{
  color-scheme: dark;
}

/* Chrome / Edge / Safari */
#entryModal input[type="date"]::-webkit-calendar-picker-indicator,
#entryModal input[type="time"]::-webkit-calendar-picker-indicator,
#quickNoteModal input[type="date"]::-webkit-calendar-picker-indicator,
#quickNoteModal input[type="time"]::-webkit-calendar-picker-indicator{
  filter: invert(1) brightness(1.8);
  opacity: 1;
  cursor: pointer;
}

/* optional: Uhr- / Kalenderfeld innen heller */
#entryModal input[type="date"],
#entryModal input[type="time"]{
  color: #f4f7ff;
}