:root {
  /* Brand: #ff376ab2 (with alpha). Use solid for base and darker hover */
  --primary: #ff376a;
  --primary-600: #e43668;
  --primary-700: #d12f5f;
  --text: #111827;
  --text-muted: #4b5563;
  --bg: #f9fafb;
  --card: #ffffff;
  --border: #e5e7eb;
  --success: #16a34a;
  --warning: #f59e0b;
  --danger: #dc2626;
  --info: #2563eb;
  --shadow: 0 4px 16px rgba(0,0,0,.08);
}
.primary:disabled,
.secondary:disabled,
.btn:disabled,
button:disabled {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: default;
  box-shadow: none;
  transform: none;
  pointer-events: none;
  opacity: .8;
}
.primary:disabled:hover,
.secondary:disabled:hover,
.btn:disabled:hover,
button:disabled:hover {
  background: #e5e7eb;
  box-shadow: none;
  transform: none;
}

/* Theme overrides: normal users get a blue primary, admins keep default (redish) */
.theme-user {
  --primary: #2563eb;     /* base blue */
  --primary-600: #1d4ed8; /* hover */
  --primary-700: #1e40af; /* darker */
}

*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; }
body { font-family: system-ui, sans-serif; margin: 0; color: var(--text); background: var(--bg); overflow-x: hidden; }
.topbar { display:flex; gap:1rem; padding:0.75rem 1rem; background: var(--primary-700); color:white; align-items:center; position:sticky; top:0; z-index:1000; }
.topbar a { color:white; text-decoration:none; font-weight:600; padding:.35rem .5rem; border-radius:6px; }
.topbar a:hover { text-decoration: underline; }
.topbar a.active { background: rgba(255,255,255,.15); text-decoration: none; }
.topbar .spacer { flex:1; }
.topbar .nav-toggle { display:none; background: transparent; color: white; border: none; font-size: 1.4rem; line-height:1; padding:.25rem .5rem; border-radius:6px; cursor:pointer; }
.nav-links { display:flex; gap:1rem; align-items:center; flex:1; }
@media (max-width: 768px) {
  .topbar { gap:.5rem; }
  .topbar .nav-toggle { display:block; }
  .nav-links { display:none; position:absolute; left:0; right:0; top:56px; background: var(--primary-700); padding:.5rem 1rem; flex-direction: column; gap:.25rem; border-bottom:1px solid rgba(255,255,255,.25); }
  .nav-links.open { display:flex; }
  .nav-links .spacer { display:none; }
}
.container { padding: 1rem; width: 100%; max-width: 1200px; margin-inline: auto; }
.footer { padding: 1rem; color:#666; border-top:1px solid #eee; margin-top:2rem; display:flex; align-items:center; gap:.5rem; justify-content:space-between; }
.login-body { display:grid; place-items:center; min-height:100vh; background:#f6f6f6; }
.login-card { background:white; padding:2rem; border-radius:12px; box-shadow: var(--shadow); width:min(420px, 92vw); }
.cards-grid { display:grid; gap: 1rem; grid-template-columns: 1fr; grid-auto-flow: row; }
/* Base order utilities (apply at all sizes) */
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-6 { order: 6; }
@media (min-width: 768px) { .cards-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .5rem; } }
@media (min-width: 1024px) { .cards-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: .5rem; } }
.span-1 { grid-column: span 1; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
@media (max-width: 767px) { .span-1, .span-2, .span-3 { grid-column: 1 / -1; } }
@media (min-width: 768px) and (max-width: 1023px) {
  .md-span-1 { grid-column: span 1; }
  .md-span-2 { grid-column: span 2; }
  .md-span-3 { grid-column: span 3; }
}
/* Full-width only at the first breakpoint (768–1023px) – placed after other md spans for precedence */
@media (min-width: 768px) and (max-width: 1023px) {
  .cards-grid > .md-span-full { grid-column: 1 / -1; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .md-row-1 { grid-row: 1; }
  .md-row-2 { grid-row: 2; }
  .md-row-3 { grid-row: 3; }
  .md-col-1 { grid-column: 1 / span 1; }
  .md-col-2 { grid-column: 2 / span 1; }
  .md-col-3 { grid-column: 3 / span 1; }
}
@media (min-width: 1024px) {
  .lg-row-1 { grid-row: 1; }
  .lg-row-2 { grid-row: 2; }
  .lg-row-3 { grid-row: 3; }
  .lg-col-1 { grid-column: 1 / span 1; }
  .lg-col-2 { grid-column: 2 / span 1; }
  .lg-col-3 { grid-column: 3 / span 1; }
}
/* Prevent intrinsic min-content from forcing column expansion */
.cards-grid > * { min-width: 0; }
.card { min-width: 0; }
.help-box { overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .cards-grid { align-content: start; }
  .cards-grid > * { order: 0; }
  .order-md-1 { order: 1; }
  .order-md-2 { order: 2; }
  .order-md-3 { order: 3; }
  .order-md-4 { order: 4; }
  .order-md-5 { order: 5; }
  .order-md-6 { order: 6; }
}
@media (min-width: 1024px) {
  .order-lg-1 { order: 1; }
  .order-lg-2 { order: 2; }
  .order-lg-3 { order: 3; }
  .order-lg-4 { order: 4; }
  .order-lg-5 { order: 5; }
  .order-lg-6 { order: 6; }
}
.info-row { display:grid; grid-template-columns: auto 1fr 1fr; gap:.75rem; align-items:center; margin:.5rem 0 1rem; color:#555; }
.info-row .label { font-weight:600; color:#222; }
.form-grid { display:grid; gap:0.75rem; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
.form-grid .button-link { display:inline-block; padding:.6rem 1rem; background:#eee; border-radius:8px; text-decoration:none; color:#222; }
.table { width:100%; border-collapse: collapse; max-width: 100%; }
.table { display: block; overflow-x: auto; }
.table th, .table td { padding:.6rem .75rem; border:1px solid #ddd; vertical-align: top; }
/* Clickable table rows (e.g., calendar events) */
.table tr.pointer { cursor: pointer; }
.table tr.pointer:hover td { background: #f3f4f6; }
@media (max-width: 576px) {
  .table th, .table td { padding:.5rem .6rem; font-size: .95rem; }
}
/* Breite Tabellen bekommen Abstand zum vorherigen Button */
.button-link + .table, .btn + .table { margin-top: .5rem; }
.signature-box { border:1px dashed #ccc; padding:1rem; background:#fff; }
.flashes { list-style:none; padding:0; }
.flashes li { margin:.25rem 0; padding:.6rem .75rem; border-radius:8px; border:1px solid var(--border); background:#fff; }
.flashes .success { border-color: #d1fae5; background:#ecfdf5; color: var(--success); }
.flashes .warning { border-color: #fef3c7; background:#fffbeb; color: var(--warning); }
.flashes .info { border-color: #dbeafe; background:#eff6ff; color: var(--info); }
.flashes .danger { border-color: #fee2e2; background:#fef2f2; color: var(--danger); }

.help-text { color: var(--text-muted); font-size: .95rem; }
.help-box { background:#f8fafc; border:1px solid var(--border); padding:.75rem 1rem; border-radius:8px; }
.text-muted { color: var(--text-muted); }
/* Help box enhancements */
.help-title { margin:0 0 .35rem 0; font-weight:600; display:flex; align-items:center; gap:.5rem; color:#111; }
.help-list { margin:.25rem 0 0 1.25rem; padding:0; }
.help-list li { margin:.25rem 0; }
.badge { display:inline-block; padding:.15rem .5rem; background:#eef2ff; color:#1e40af; border:1px solid #c7d2fe; border-radius:999px; font-size:.85rem; }

.button-link, .btn, .primary, .secondary {
  display:inline-block;
  padding:.6rem 1rem;
  background: var(--primary-600);
  color:#fff;
  text-decoration:none;
  border-radius:8px;
  border:none;
  cursor:pointer;
  transition: background-color .15s ease, box-shadow .2s ease, transform .1s ease;
}
.button-link:hover, .btn:hover, .primary:hover, .secondary:hover { background: var(--primary-700); box-shadow: 0 2px 10px rgba(0,0,0,.08); transform: translateY(-1px); }
.button-link:active, .btn:active, .primary:active, .secondary:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.btn.secondary, .secondary { background:#eee; color:#222; }
.btn.secondary:hover, .secondary:hover { background:#e2e8f0; color:#111; }
.btn.danger { background: var(--danger); color:#fff; }
.btn.danger:hover { background:#b91c1c; }
/* Active state for tab-like buttons */
.btn.active,
.primary.active,
.secondary.active {
  background: var(--primary-600);
  color: #fff;
}
.btn.active:hover,
.primary.active:hover,
.secondary.active:hover { background: var(--primary-700); }
/* Link-style buttons for inline actions */
.btn.btn-link, .link-like {
  background: transparent;
  color: var(--primary-600);
  padding: .25rem .25rem;
  border: none;
  border-radius: 6px;
  transition: color .15s ease, background-color .15s ease;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  text-decoration: none;
  font: inherit; /* match table text */
}
.btn.btn-link:hover, .link-like:hover { color: var(--primary-700); text-decoration: underline; background: rgba(255,55,106,.06); }
.btn.btn-link:focus, .link-like:focus { outline: none; box-shadow: 0 0 0 3px rgba(255,55,106,.15); }

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .button-link, .btn { transition: none; }
  .btn.btn-link, .link-like { transition: none; }
}

.w-8em { width: 8em; }
.w-16em { width: 16em; }
.ml-1 { margin-left: 1em; }
.input-with-affix { display:flex; align-items:center; gap:.5rem; }
.input-with-affix .prefix,
.input-with-affix .suffix {
  background:#f5f5f5;
  padding:.25rem .5rem;
  border:1px solid #ddd;
  border-radius:6px;
  font-size:.9rem;
  color:#555;
}

.form-actions { display:flex; gap:.5rem; align-items:center; margin-bottom:1rem; flex-wrap:wrap; }
.card > .form-actions:last-child { margin-top: max(1rem, auto); justify-content: flex-end; }
.form-actions--sticky { position: sticky; top: 56px; /* below topbar */ background: rgba(255,255,255,.85); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding:.5rem .25rem; z-index:900; border-bottom: 1px solid var(--border); }
.form-actions .primary { background: var(--primary-600); color:#fff; border:none; padding:.6rem 1rem; border-radius:8px; cursor:pointer; }
.form-actions .primary:hover { background: var(--primary-700); }
.form-actions .secondary { display:inline-block; padding:.6rem 1rem; background:#eee; border-radius:8px; text-decoration:none; color:#222; }
.form-actions .danger { background: var(--danger); color:#fff; }

.form-section { grid-column: 1 / -1; }
.form-cards { display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
.card { background: var(--card); border:1px solid var(--border); border-radius:10px; padding:1rem 1rem 1.5rem; box-shadow:0 1px 2px rgba(0,0,0,.03); display:flex; flex-direction:column; }
.card .card-body { flex: 1 1 auto; display:flex; flex-direction:column; gap:.5rem; }
.card h3 { margin:0 0 .5rem 0; font-size:1.05rem; color:#111; }
.card--full { grid-column: 1 / -1; }
.form-field { display:flex; flex-direction:column; gap:.35rem; }
.form-row { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.form-row > .form-field { flex: 1 1 220px; min-width: 0; }
.form-field label { font-weight:600; color:#222; font-size:.95rem; }
.form-field input[type="text"],
.form-field input[type="time"],
.form-field input[type="url"],
.form-field input[type="email"],
.form-field select { appearance:none; width:100%; padding:.5rem .6rem; border:1px solid #d6d6d6; border-radius:8px; background:#fff; color:#222; font-size:.95rem; line-height:1.2; }
.form-field select { background-image: linear-gradient(45deg, transparent 50%, #999 50%), linear-gradient(135deg, #999 50%, transparent 50%), linear-gradient(to right, #ddd, #ddd); background-position: calc(100% - 18px) calc(1rem - 2px), calc(100% - 12px) calc(1rem - 2px), calc(100% - 2.2rem) 50%; background-size: 6px 6px, 6px 6px, 1px 60%; background-repeat: no-repeat; }
.form-field input:focus, .form-field select:focus { outline:none; border-color: var(--primary); box-shadow:0 0 0 3px rgba(255,55,106,.15); }
.choice-group { display:flex; align-items:center; gap:1.25rem; }

/* Mobile: increase vertical spacing so labels don't look like they belong to the next field */
@media (max-width: 576px) {
  .card .card-body { gap: .75rem; }
  .form-field { gap: .55rem; }
  .form-row { gap: .6rem; }
}

/* Sprechzeiten Tageszeilen als Grid */
.sprechzeiten-days { display:grid; gap:.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (min-width: 768px) {
  .sprechzeiten-days { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (min-width: 1024px) {
  .sprechzeiten-days { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}

/* Sprechzeiten – tabellarisches Layout */
.sprechzeiten-table {
  border-collapse: separate;
  border-spacing: 6px 6px; /* kompakter */
  display: inline-table;   /* verhindert Vollbreite, hält Start/Ende zusammen */
}
.sprechzeiten-day-label { width: 34px; white-space: nowrap; }
.sprechzeiten-sep { padding: 0 4px; color: #666; }

/* Headings */
h1 { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.8rem); margin: 0 0 .75rem 0; color: var(--text); }
h2 { font-size: clamp(1.1rem, 1rem + .8vw, 1.4rem); margin: .5rem 0; color: var(--text); }
h3 { font-size: 1.05rem; margin: .5rem 0; color: var(--text); }

/* Responsive container paddings */
@media (min-width: 768px) {
  .container { padding: 1.25rem; }
}
@media (min-width: 1200px) {
  .container { padding: 1.5rem; }
}

/* Utilities */
.justify-end { justify-content: flex-end; }
.mt-1 { margin-top: 1rem; }
.mb-0 { margin-bottom: 0 !important; }
.col-span-full { grid-column: 1 / -1; }
.flex-1 { flex: 1 1 auto; }

/* Inline form utility (use instead of inline style attributes) */
.inline-form { display:inline; margin:0; }
.hidden { display: none !important; }

/* Media elements */
img, video, canvas { max-width: 100%; height: auto; }

/* Signature preview utilities (do not affect inner signature HTML) */
.signature-preview.bordered { border: 1px solid #eee; border-radius: 8px; background: #fff; }
.signature-preview.padded { padding: 12px; }
.signature-preview.scrollable { max-height: 60vh; overflow: auto; }
.signature-preview.max-600 { max-width: 600px; }
.signature-preview.max-800 { max-width: 800px; }

/* Default submit buttons (without classes) get primary styling */
button[type="submit"]:not([class]),
input[type="submit"]:not([class]) {
  display:inline-block;
  padding:.6rem 1rem;
  background: var(--primary-600);
  color:#fff;
  border:none;
  border-radius:8px;
  cursor:pointer;
  transition: background-color .15s ease, box-shadow .2s ease, transform .1s ease;
}
button[type="submit"]:not([class]):hover,
input[type="submit"]:not([class]):hover {
  background: var(--primary-700);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
button[type="submit"]:not([class]):active,
input[type="submit"]:not([class]):active { transform: translateY(0); box-shadow: 0 1px 4px rgba(0,0,0,.06); }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  display: none; align-items: center; justify-content: center; z-index: 2000;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: #fff; border-radius: 10px; box-shadow: var(--shadow);
  width: min(520px, 92vw); padding: 1rem; border:1px solid var(--border);
}
.modal h4 { margin: 0 0 .5rem 0; }
.modal .modal-actions { display:flex; gap:.5rem; justify-content:flex-end; margin-top: 1rem; }
.modal .modal-actions.single { justify-content: center; }
/* Menu grid for multi-action dialogs */
.modal .modal-menu { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:.5rem; margin-top: 1rem; }
.modal .modal-menu > button { width: 100%; }
@media (max-width: 460px) {
  .modal .modal-menu { grid-template-columns: 1fr; }
}

/* Page header tabs */
.page-tabs { display:flex; gap:.5rem; align-items:center; margin:.5rem 0 1rem; flex-wrap:wrap; }
.page-tab {
  display:inline-block;
  text-decoration:none;
  background:#eee;
  color:#222;
  padding:.75rem 1.1rem;
  border-radius:10px;
  font-weight:600;
  font-size:1rem;
  transition: background-color .15s ease, color .15s ease;
}
.page-tab:hover { background:#e2e8f0; }
.page-tab.active { background: var(--primary-600); color:#fff; }
.page-tab.active:hover { background: var(--primary-700); }
@media (min-width: 768px) { .page-tab { font-size:1.05rem; padding:.8rem 1.2rem; } }
@media (min-width: 1024px) { .page-tab { font-size:1.1rem; padding:.85rem 1.25rem; } }