/* Verhindert automatische Dark/Light-Theme-Anpassung */
:root { color-scheme: light; }


/* ==========
   Design-Variablen
   ========== */


:root{
  --bg: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --surface: #fafafa;

  --primary: #2563eb;
  --primary-weak: #eff6ff;
  --accent: #16a34a;
  --warn: #d97706;
  --danger: #dc2626;

  --radius: 12px;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 24px rgba(0,0,0,.06);

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --maxw: 1100px;
 
}




/* Reset & Grundlayout */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
hr{border:0;border-top:1px solid var(--border);margin:var(--space-6) 0}

.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--space-4)}
main{padding:var(--space-6) 0}

/* Erzwinge Light-Rendering für UI-Controls in allen Browsern (auch Chrome/macOS) */
:root,
html, body,
input, select, textarea, button {
  color-scheme: light !important;
}



/* Topbar */
nav.app{
  position:sticky; top:0; z-index:50;
  background:#0b0f19; color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}
nav.app .bar{display:flex;align-items:center;gap:var(--space-3);max-width:var(--maxw);margin:0 auto;padding:var(--space-3) var(--space-4)}
nav.app .brand{font-weight:700; letter-spacing:.2px; margin-right:var(--space-4)}
nav.app a{opacity:.9; padding:6px 10px; border-radius:8px}
nav.app a:hover{opacity:1; background:rgba(255,255,255,.08)}
nav.app .spacer{margin-left:auto}
.badge{display:inline-block; padding:2px 10px; border-radius:999px; background:rgba(255,255,255,.12); color:#fff; font-size:.9rem}

/* Typografie */
h1{font-size:1.7rem; line-height:1.2; margin:0 0 var(--space-4)}
h2{font-size:1.35rem; margin:var(--space-6) 0 var(--space-3)}
h3{font-size:1.1rem; margin:var(--space-4) 0 var(--space-2)}
p{margin:.6rem 0}
.muted{color:var(--muted)}

/* Karten & Blöcke */
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:var(--space-6);
}
.card.full{padding:var(--space-6)}
.grid{display:grid; gap:var(--space-4); grid-template-columns:1fr}
@media (min-width:900px){
  .grid.cols-2{grid-template-columns:1fr 1fr}
  .grid.cols-3{grid-template-columns:repeat(3,1fr)}
}

/* Tabs */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:var(--space-4)}
.tabs a{
  display:inline-block; padding:10px 14px; border:1px solid transparent; border-bottom:0;
  color:#374151; background:transparent; border-top-left-radius:10px; border-top-right-radius:10px;
}
.tabs a:hover{background:#f3f4f6}
.tabs a.active{
  background:#fff; border-color:var(--border); border-bottom-color:#fff;
  color:#111827;
}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* Tabellen */
.table-wrap{overflow:auto; border:1px solid var(--border); border-radius:var(--radius); background:#fff;margin-bottom: 20px;}
.table{width:100%; border-collapse:collapse; min-width:740px}
.table th,.table td{padding:12px 12px; text-align:left; border-bottom:1px solid var(--border)}
.table th{font-weight:600; color:#111827; background:#f8fafc; position:sticky; top:0}
.table tr:hover td{background:#fafafa}

th.asc::after  { content: " ▲"; color: #111827; }
th.desc::after { content: " ▼"; color: #111827; }


/* Formulare */
form label{display:block; margin:.4rem 0}
input,select,textarea{
  width:100%; padding:6px; border:1px solid var(--border); border-radius:8px; background:#fff; font:inherit; color:inherit; outline:none;
}
input[type="checkbox"],input[type="radio"]{width:auto}
textarea{min-height:120px; resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-weak)}
.form-row{display:grid; gap:var(--space-3)}
@media (min-width:700px){.form-row.cols-2{grid-template-columns:1fr 1fr}}
.help{font-size:.9rem; color:var(--muted)}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:10px; border:1px solid var(--border);
  background:#fff; color:var(--text); cursor:pointer; text-decoration:none; user-select:none;
}
.btn:hover{background:#f8fafc}
.btn.primary{background:var(--primary); color:#fff; border-color:var(--primary)}
.btn.primary:hover{filter:brightness(.98)}
.btn.success{background:var(--accent); color:#fff; border-color:var(--accent)}
.btn.warn{background:var(--warn); color:#fff; border-color:var(--warn)}
.btn.danger{background:var(--danger); color:#fff; border-color:var(--danger)}
.btn.ghost{background:transparent; border-color:transparent}
.btn.small{padding:8px 10px; font-size:.92rem}
.btn.block{display:flex; width:100%}  /* <— für volle Breite */

/* Hinweise / KPIs */
.alert{padding:12px 14px; border-radius:10px; border:1px solid var(--border); background:#fff}
.alert.ok{border-color:#bbf7d0; background:#f0fdf4; color:#166534}
.alert.warn{border-color:#fde68a; background:#fffbeb; color:#92400e}
.alert.err{border-color:#fecaca; background:#fef2f2; color:#991b1b}

/* Utilities */
.mt-2{margin-top:var(--space-2)} .mt-4{margin-top:var(--space-4)} .mt-6{margin-top:var(--space-6)}
.mb-2{margin-bottom:var(--space-2)} .mb-4{margin-bottom:var(--space-4)} .mb-6{margin-bottom:var(--space-6)}
.pad{padding:var(--space-4)} .pad-6{padding:var(--space-6)}
.right{margin-left:auto}
.noprint{display:block} .print{display:none}

/* Druck */
@media print{
  nav.app, .noprint{display:none!important}
  .print{display:block!important}
  body{background:#fff}
  .card,.table-wrap{box-shadow:none;border-color:#ddd}
}

/* Dark Mode (optional) */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0f14; --text:#e5e7eb; --muted:#9ca3af; --border:#1f2937; --surface:#0f141b;
    --primary:#3b82f6; --primary-weak:#0b1730;
  }
  nav.app{background:#070a10; box-shadow:none}
  a:hover{text-decoration:none}
  .card,.table-wrap{background:#0f141b; border-color:var(--border)}
  .table th{background:#0b1118; color:#e5e7eb}
  input,select,textarea{background:#0f141b; border-color:var(--border); color:var(--text)}
  .btn{background:#0f141b; border-color:var(--border); color:var(--text)}
  .btn:hover{background:#111827}
}




/* Filterbar – kompakt, einzeilig, responsive */
.filter-bar{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:.75rem;
  padding:.5rem; border:1px solid #e5e7eb; border-radius:10px; background:#fff;margin-bottom: 20px;
}
.filter-bar .field{
  display:flex; flex-direction:column; gap:.25rem; min-width:180px;
}
.filter-bar .field.small{ min-width:120px; }
.filter-bar .grow{ flex:1 1 260px; min-width:240px; }
.filter-bar label{ font-size:.85rem; color:#6b7280; }
.filter-bar input[type="text"],
.filter-bar input[type="date"],
.filter-bar input[type="number"],
.filter-bar select{
  padding:.5rem .6rem; border:1px solid #d1d5db; border-radius:8px; background:#fff;
}
.filter-bar .actions{ margin-left:auto; display:flex; gap:.5rem; align-items:flex-end; }
.filter-bar .checkbox{ display:flex; align-items:center; gap:.5rem; padding:.35rem .5rem; border:1px dashed #e5e7eb; border-radius:8px; }
@media (max-width: 860px){
  .filter-bar .actions{ margin-left:0; width:100%; justify-content:flex-end; }
}

/* Einheitliche Feldhöhe in Filterbar */
.filter-bar input[type="text"],
.filter-bar input[type="date"],
.filter-bar input[type="number"],
.filter-bar select {
  display:inline-block;
  height:2.4rem;                 /* Einheitliche Höhe */
  line-height:2.4rem;
  padding:0 .6rem;
  border:1px solid #d1d5db;
  border-radius:8px;
  background-color:#fff;
  font-size:0.95rem;
  box-sizing:border-box;
  appearance:none;               /* Entfernt Browser-Spezialstile */
}

.filter-bar select {
  padding-right:2rem;            /* Platz für Pfeil */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='none' stroke='%23999' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .7rem center;
  background-size:12px 8px;
}

/* Einheitlicher Button-Stil in Filterleiste */
.filter-bar .btn {
  height:2.4rem;
  line-height:2.4rem;
  padding:0 1rem;
  font-size:0.95rem;
  cursor:pointer;
}




/* === BUTTONS ==================================================== */

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  height:2.4rem;
  line-height:2.4rem;
  padding:0 1rem;
  border:1px solid transparent;
  border-radius:8px;
  font-size:.95rem;
  font-weight:500;
  cursor:pointer;
  text-decoration:none;
  transition:all .15s ease-in-out;
  background:#1e90ff;
  border-color:#1e90ff;
  color:#fff;
}
.btn:hover {
  background:#1c86ee;
  border-color:#1c86ee;
}
/* Primärblauer Button */
.btn.primary {
  background:#1e90ff;
  border-color:#1e90ff;
  color:#fff;
}
.btn.primary:hover {
  background:#1c86ee;
  border-color:#1c86ee;
}

/* Sekundärblauer (abgeschwächter) Button */
.btn.secondary {
  background:#eff6ff;
  border-color:#bfdbfe;
  color:#1e3a8a;
}
.btn.secondary:hover {
  background:#dbeafe;
  border-color:#93c5fd;
}

/* Gefahren-/Löschen-Button */
.btn.danger {
  background:#dc2626;
  border-color:#dc2626;
  color:#fff;
}
.btn.danger:hover {
  background:#b91c1c;
}

/* Kleinere Varianten */
.btn.small {
  height:2rem;
  line-height:2rem;
  padding:0 .7rem;
  font-size:.85rem;
}


.badge.blue {
  background:#1e90ff;
  color:#fff;
}
.badge.gray {
  background:#f3f4f6;
  color:#111;
}



.links .btn {margin:10px;}


/* Autocomplete-Auswahlhinweis ausblenden */
.chosen { 
  display: none !important;
}