@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

/* =====================================================================
   ONE HyperDash – Theme v4.19 (SAP Fiori Horizon)
   Designsprache: Fiori Horizon + Lufthansa 2025
   CI: ONE Green #17ac6c / #1fc97c / #2ee388
   Strategie: Hub-Tokens + Aliases auf die bestehenden HyperDash-Variablen,
   damit alle Custom-Komponenten (Donuts, KPI-Kacheln, planned-row, etc.)
   ohne Anpassung automatisch das neue Look erben.
   ===================================================================== */
:root,
:root[data-theme="dark"],
[data-theme="dark"]{
  /* ---- Brand ---- */
  --one-primary:        #17ac6c;
  --one-primary-hover:  #1fc97c;
  --one-accent:         #2ee388;
  --one-primary-tint-10: rgba(23,172,108,.10);
  --one-primary-tint-20: rgba(23,172,108,.20);
  --one-primary-tint-30: rgba(23,172,108,.30);
  --one-primary-shadow: 0 12px 32px rgba(23,172,108,.18);

  /* ---- Surface (Evening Horizon) ---- */
  --bg-page:        #0d1117;
  --bg-page-grad:   linear-gradient(180deg,#0f1f17 0%,#0d1117 35%,#0d1117 100%);
  --bg-card:        #161b22;
  --bg-glass:       rgba(22,27,34,.72);
  --bg-elev:        #1c2230;
  --bg-input:       #0f1419;
  --bg-table-stripe:#1a2029;
  --border-subtle:  #2a313a;
  --border-strong:  #3a424d;
  --text-primary:   #f0f6fc;
  --text-secondary: #9da7b1;
  --text-muted:     #6e7681;
  --text-inverse:   #ffffff;
  --link:           #2ee388;

  /* ---- Feedback ---- */
  --success:        #15803d;
  --success-bg:     #0f2418;
  --error:          #ff6b7c;
  --error-bg:       #2a1414;
  --warning:        #f59e0b;
  --warning-bg:     #2a1f0a;

  /* ---- Sizing ---- */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow:    0 1px 2px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.4);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.6);

  --blur-glass: blur(16px) saturate(140%);
  --header-h: 64px;

  /* ---- Aliases: alte HyperDash-Variablen → neues Token-System ---- */
  --accent:        var(--one-primary);
  --accent-strong: var(--one-primary-hover);
  --accent-bright: var(--one-accent);
  --accent-rgb:    23,172,108;
  --accent-soft:   var(--one-primary-tint-10);
  --accent-glow:   rgba(46,227,136,.28);
  --danger:        var(--error);

  --bg-0: var(--bg-page);
  --bg-1: var(--bg-page);
  --bg-2: var(--bg-card);
  --bg-3: var(--bg-elev);

  --panel:        var(--bg-card);
  --panel-strong: var(--bg-card);
  --panel-deep:   var(--bg-elev);
  --card:         var(--bg-card);
  --field:        var(--bg-input);

  --stroke:        var(--border-subtle);
  --stroke-strong: var(--border-strong);

  --text:  var(--text-primary);
  --muted: var(--text-secondary);

  --glow: 0 0 0 1px rgba(var(--accent-rgb),.28),0 12px 28px rgba(var(--accent-rgb),.18);

  --font-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-display: clamp(26px, 2.4vw + 14px, 44px);
  --fs-xl:      clamp(20px, 1.1vw + 16px, 26px);
  --tracking-label: .06em;

  --logo1: #fff;
}

/* ---- Light Theme (Morning Horizon) ---- */
:root[data-theme="light"],
[data-theme="light"]{
  --bg-page:        #f5f6f7;
  --bg-page-grad:   linear-gradient(180deg,#e9f7ef 0%,#f5f6f7 35%,#f5f6f7 100%);
  --bg-card:        #ffffff;
  --bg-glass:       rgba(255,255,255,.65);
  --bg-elev:        #fafbfc;
  --bg-input:       #ffffff;
  --bg-table-stripe:#fafbfc;
  --border-subtle:  #e5e7eb;
  --border-strong:  #d0d5db;
  --text-primary:   #1a1d21;
  --text-secondary: #5b6470;
  --text-muted:     #9099a3;
  --link:           #0d8a55;

  --success:    #15803d;
  --success-bg: #f0fdf4;
  --error:      #b91c1c;
  --error-bg:   #fef2f2;
  --warning:    #b45309;
  --warning-bg: #fffbeb;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow:    0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);

  /* Aliases */
  --danger: var(--error);
  --logo1:  var(--text-primary);
}

/* prefers-reduced-transparency Fallback */
@media (prefers-reduced-transparency: reduce){
  :root{ --bg-glass: var(--bg-card); --blur-glass: none; }
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; min-height:100%; }
html{ color-scheme: light dark; }
body{
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-page-grad);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: color .2s;
}
code{
  font-family: 'SF Mono', Consolas, 'Liberation Mono', monospace;
  font-size: .9em;
  background: var(--bg-elev);
  padding: .1em .35em;
  border-radius: 4px;
  color: var(--accent-strong);
}
em{ font-style: normal; }

/* Dezenter Sternennebel - jetzt fast unsichtbar (Fiori-Look ist clean) */
.bg-cosmos{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(2px 2px at 18% 28%,rgba(46,227,136,.18),transparent),
    radial-gradient(2px 2px at 72% 62%,rgba(33,215,147,.12),transparent),
    radial-gradient(1.5px 1.5px at 88% 22%,rgba(126,243,202,.10),transparent);
  opacity:.18}
[data-theme="light"] .bg-cosmos{opacity:.06}
.topbar,main{position:relative;z-index:1}

/* ===== Reveal ===== */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.reveal{animation:rise .55s cubic-bezier(.22,1,.36,1) both}
.reveal-d1{animation-delay:.07s}.reveal-d2{animation-delay:.14s}

/* ===== Login (auth-cosmos) ===== */
.auth-cosmos{position:fixed!important;inset:0!important;width:100vw;height:100vh;
  z-index:0;pointer-events:none;overflow:hidden}
.auth-cosmos canvas{position:fixed!important;inset:0!important;width:100vw;height:100vh;
  display:block;opacity:.65}
[data-theme="light"] .auth-cosmos canvas{opacity:.35}
.auth-cosmos::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at center,transparent 0%,transparent 42%,rgba(13,17,23,.16) 62%,rgba(13,17,23,.5) 100%)}
[data-theme="light"] .auth-cosmos::after{background:radial-gradient(circle at center,transparent 40%,rgba(245,246,247,.6) 100%)}
.auth-wrap{position:relative;z-index:2;display:grid;place-items:center;
  min-height:100vh;padding:24px}
.auth-card{position:relative;z-index:3;width:min(440px,94vw);padding:40px 38px;
  text-align:center;border:1px solid var(--border-subtle);border-radius:var(--radius-xl);
  background: var(--bg-glass);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  box-shadow:var(--shadow-lg)}
.brand-block{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:8px}
.auth-logo{height:64px;width:auto;object-fit:contain;
  filter:drop-shadow(0 6px 20px rgba(var(--accent-rgb),.22))}
.auth-word{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.02em;color:var(--text-primary)}
.auth-card .sub{color:var(--muted);font-size:13.5px;margin:10px 0 20px}
.auth-card form{display:flex;flex-direction:column;gap:12px}
.login-foot{margin-top:18px;display:flex;align-items:center;justify-content:center;gap:12px}
.ver{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;
  border:1px solid var(--stroke);border-radius:999px;padding:4px 10px;
  letter-spacing:.02em}

/* ===== Form Inputs ===== */
input,select,button,textarea{font-family:inherit}
input[type=password],input[type=text],input[type=number],
input[type=email],input[type=search],input[type=date],input[type=datetime-local],
input[type=url],input[type=color],select,textarea{
  padding:.65rem .8rem;border-radius:var(--radius-sm);
  border:1px solid var(--border-strong);background:var(--bg-input);color:var(--text-primary);
  font-size:14px;outline:none;transition:border-color .15s,box-shadow .15s;width:100%}
input:focus,select:focus,textarea:focus{
  border-color:var(--one-primary);
  box-shadow:0 0 0 3px var(--one-primary-tint-20)}
input[type=color]{padding:0;height:42px;cursor:pointer}
input[type=file]{padding:.55rem .65rem;border-radius:var(--radius-sm);
  border:1px solid var(--border-strong);background:var(--bg-input);color:var(--text-primary);
  font-size:13.5px;width:100%;cursor:pointer}
input[type=file]::file-selector-button{margin-right:12px;padding:.4rem .9rem;
  border:none;border-radius:6px;font-weight:500;font-size:13px;
  background:var(--one-primary-tint-10);color:var(--one-primary);cursor:pointer;
  transition:background .15s}
input[type=file]::file-selector-button:hover{background:var(--one-primary-tint-20)}
/* Native Checkboxen / Radios komplett selbst gestylt - accent-color
 * allein reicht nicht: einige Browser rendern das Innere weiterhin
 * schwarz. Daher appearance:none + eigener Hintergrund + Haken.
 * Light: weisser Hintergrund mit schwarzem Haken.
 * Dark:  dunkler Hintergrund mit weissem Haken. */
input[type=checkbox],input[type=radio]{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:18px; height:18px; padding:0; margin:0;
  background: var(--bg-card);
  border:1.5px solid var(--border-strong);
  border-radius:4px;
  cursor:pointer;
  display:inline-grid; place-content:center;
  transition: background .15s, border-color .15s, box-shadow .15s;
  flex: none;
  vertical-align: middle;
}
input[type=radio]{border-radius:50%}
input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--one-primary)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{
  outline:none; box-shadow:0 0 0 3px var(--one-primary-tint-20)}
input[type=checkbox]::before{
  content:""; width:10px; height:10px;
  clip-path: polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);
  background: var(--text-primary);
  transform: scale(0);
  transition: transform .15s cubic-bezier(.2,.8,.2,1);
}
input[type=checkbox]:checked{
  background: var(--bg-card);
  border-color: var(--one-primary);
}
input[type=checkbox]:checked::before{ transform: scale(1); }
input[type=radio]::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background: var(--one-primary);
  transform: scale(0);
  transition: transform .15s cubic-bezier(.2,.8,.2,1);
}
input[type=radio]:checked{ border-color: var(--one-primary); }
input[type=radio]:checked::before{ transform: scale(1); }
input[type=checkbox]:disabled,input[type=radio]:disabled{
  opacity:.5; cursor:not-allowed;
}

/* Chrome/Edge Autofill ueberschreibt input-bg gelblich-grau - das hier
   neutralisiert das und behaelt unsere Token-Farben. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
  -webkit-text-fill-color: var(--text-primary);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset;
  caret-color: var(--text-primary);
  transition: background-color 5000s ease-in-out 0s;
}
/* Inputs auf der Login-Karte: explizit auf Card-Hintergrund, damit sie
   im Glas-Container der auth-card klar sichtbar sind. */
.auth-card input[type=text],
.auth-card input[type=password],
.auth-card input[type=email]{
  background: var(--bg-card);
  border-color: var(--border-strong);
}
.auth-card input:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 1000px var(--bg-card) inset;
}

.who{font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:7px;
  padding:0 6px}
.role-badge{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:3px 8px;border-radius:999px;background:var(--bg-elev);color:var(--muted);
  border:1px solid var(--stroke)}
.role-badge.adm{background:var(--one-primary-tint-10);color:var(--one-primary);
  border-color:rgba(var(--accent-rgb),.35)}
td.drillable{cursor:pointer;position:relative;transition:color .12s}
td.drillable:hover{color:var(--one-primary);text-decoration:underline}
tr.open td{background:var(--one-primary-tint-10)}
tr.drill td{padding:0;border-bottom:1px solid var(--stroke)}
.drillbox{padding:14px 16px;background:var(--bg-elev)}
.drillhead{font-size:12px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);margin-bottom:8px}
.drillgrp{margin:14px 0}
.drillgrp:first-child{margin-top:0}
.drillgrp .drillhead{color:var(--one-primary);font-weight:700}
tr.mine td{background:var(--one-primary-tint-10);font-weight:600}
.userform{margin-top:16px}
.userform .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.userform label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.userform label.span2{grid-column:span 2}
.userform .actions{margin-top:16px}
.userform form{display:inline}

/* ===== Buttons (Fiori-Style) ===== */
button{
  cursor:pointer;border:1px solid transparent;border-radius:var(--radius-sm);
  padding:.6rem 1.1rem;font-size:.9rem;font-weight:500;line-height:1;
  color:#fff;
  background: linear-gradient(135deg, var(--one-primary), var(--one-primary-hover));
  box-shadow: 0 2px 6px rgba(23,172,108,.25);
  transition: filter .15s, box-shadow .15s, transform .1s, background .15s;
  letter-spacing:.01em;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
button:hover{filter:brightness(1.05);box-shadow:0 4px 12px rgba(23,172,108,.35)}
button:active{transform:translateY(1px)}
button.danger{
  background: var(--bg-card); color: var(--error); border-color:#fecaca;
  box-shadow:none}
button.danger:hover{background:var(--error-bg);border-color:var(--error);filter:none}
[data-theme="dark"] button.danger{border-color:rgba(255,107,124,.4)}
button.ghost,a.ghost{
  color: var(--text-secondary); text-decoration:none; font-size:.85rem;
  padding:.45rem .9rem; border:1px solid var(--border-subtle); border-radius:var(--radius-sm);
  background: var(--bg-card); font-weight:500; transition:all .15s;
  display:inline-flex; align-items:center; gap:.4rem;
  box-shadow:none}
button.ghost:hover,a.ghost:hover{
  color: var(--one-primary); border-color: var(--one-primary);
  background: var(--one-primary-tint-10); filter:none}
a.ghost.is-active,button.ghost.is-active{
  color: var(--one-primary); border-color: rgba(var(--accent-rgb),.5);
  background: var(--one-primary-tint-10)}
button.ghost.danger{color:var(--error);border-color:transparent;background:transparent;box-shadow:none}
button.ghost.danger:hover{background:var(--error-bg);color:var(--error);border-color:var(--error)}
[data-theme="dark"] button.ghost.danger:hover{border-color:rgba(255,107,124,.4)}

.alert{background:var(--error-bg);border:1px solid rgba(185,28,28,.4);
  color:var(--error);padding:11px 14px;border-radius:var(--radius-sm);font-size:14px;
  margin:0 0 14px;text-align:left}
[data-theme="dark"] .alert{border-color:rgba(255,107,124,.4);color:#ff9aa6}
.ok{background:var(--success-bg);border:1px solid rgba(21,128,61,.35);
  color:var(--success);padding:11px 14px;border-radius:var(--radius-sm);font-size:14px;margin-bottom:16px}
[data-theme="dark"] .ok{color:var(--accent-strong);border-color:rgba(var(--accent-rgb),.35)}

/* ===== Topbar (Fiori shell-header) ===== */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding: .65rem clamp(16px,3vw,28px);
  min-height: var(--header-h);
  flex-wrap: wrap;
  background: var(--bg-glass);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border-bottom: 1px solid var(--border-subtle);
  position:sticky; top:0; z-index:50}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--text-primary)}
.brand-logo{height:32px;width:auto;object-fit:contain}
.brand-word{font-size:1rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-primary)}
nav{display:flex;gap:.25rem;align-items:center;flex-wrap:wrap;margin-left:1rem}

main{max-width:1200px;margin:0 auto;padding:clamp(20px,3vw,32px) clamp(16px,3vw,24px)}

/* ===== Theme-Toggle (Fiori icon-button, einheitlich Login + Topbar) ===== */
.theme-toggle{
  display:grid; place-items:center;
  width:38px; height:38px; padding:0;
  background:transparent; color:var(--text-secondary);
  border:1px solid var(--border-subtle); border-radius:50%;
  cursor:pointer; box-shadow:none; font-size:16px; line-height:1;
  transition: color .15s, border-color .15s, background .15s;
}
.theme-toggle:hover{
  color:var(--one-primary); border-color:var(--one-primary);
  background:var(--one-primary-tint-10);
  filter:none; transform:none;
}
.theme-toggle .ti{display:none}
[data-theme="dark"]  .theme-toggle .ti-sun {display:inline}
[data-theme="light"] .theme-toggle .ti-moon{display:inline}
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.25;color:var(--text-primary)}
h1{font-size:1.75rem;letter-spacing:-.01em;margin:0 0 .5em}
h2{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.02em;
  display:flex;align-items:center;gap:10px;margin:0 0 .5em}
h2 em{color:var(--muted);font-size:14px;font-weight:500;font-style:normal}
h3{font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;
  letter-spacing:var(--tracking-label);margin:24px 0 12px}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.dot{width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle,var(--one-accent),var(--one-primary));
  box-shadow:0 0 14px var(--one-primary-tint-30)}

/* ===== Tabs ===== */
.tabs{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}
.tab{background:var(--bg-card);border:1px solid var(--border-subtle);color:var(--muted);
  padding:.5rem 1rem;border-radius:999px;font-weight:500;font-size:13.5px;transition:.15s;
  text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.tab:hover{color:var(--text-primary);border-color:var(--one-primary)}
.tab.active{color:#fff;font-weight:600;border-color:transparent;
  background:linear-gradient(135deg,var(--one-primary),var(--one-primary-hover));
  box-shadow:0 2px 6px rgba(var(--accent-rgb),.25)}

/* ===== Panels (Fiori cards) ===== */
.panel{position:relative;
  background: var(--bg-card);
  border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  padding:clamp(20px,2.4vw,28px);margin-bottom:24px;
  box-shadow:var(--shadow)}
.panel-head{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:14px;margin-bottom:20px}

.seg{display:flex;background:var(--bg-input);border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);overflow:hidden}
.seg button{background:transparent;color:var(--muted);font-weight:500;
  border-radius:0;padding:.45rem .9rem;font-size:13px;box-shadow:none;border:none}
.seg button:hover{background:var(--bg-elev);filter:none}
.seg button.active{background:var(--one-primary-tint-10);color:var(--one-primary)}
.select{background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);padding:.55rem .8rem;font-size:14px;outline:none}
.select:focus{border-color:var(--one-primary);box-shadow:0 0 0 3px var(--one-primary-tint-20)}

/* ===== KPI Cards ===== */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{position:relative;overflow:hidden;
  background:var(--bg-card);
  border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  padding:20px 20px 22px;
  transition:transform .18s,box-shadow .18s,border-color .18s;
  text-align:center;
  box-shadow:var(--shadow-sm)}
.card:hover{transform:translateY(-3px);border-color:var(--one-primary);
  box-shadow:var(--shadow-lg)}
.card::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--one-primary),var(--one-accent))}
.card.accent{background:linear-gradient(180deg,var(--one-primary-tint-10),var(--bg-card))}
.card.gradient{background:
  linear-gradient(135deg,var(--one-primary-tint-10),transparent 70%),var(--bg-card)}
.card.wide{grid-column:span 2}
.card .k{display:block;font-size:11.5px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:12px;min-height:calc(2 * 1.25em);
  line-height:1.25}
.card b{font-size:clamp(26px,2vw + 14px,34px);font-weight:700;line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.card i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:7px}

/* ===== Durchlaufzeit-Kachel: "Werktage" rechts neben der zentrierten Zahl ===== */
.dz-wrap{position:relative;display:inline-block;line-height:1}
.dz-wrap .dz-unit{position:absolute;left:100%;bottom:.18em;margin-left:8px;
  font-size:12px;color:var(--muted);white-space:nowrap;font-weight:400;
  letter-spacing:0;font-variant-numeric:normal}

/* ===== Tables ===== */
table.grid{width:100%;border-collapse:collapse;font-size:14px}
table.grid th{text-align:left;color:var(--muted);font-weight:600;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.05em;padding:11px 12px;
  border-bottom:1px solid var(--stroke)}
table.grid td{padding:13px 12px;border-bottom:1px solid var(--stroke);
  font-variant-numeric:tabular-nums}
table.grid tr:last-child td{border-bottom:none}
table.grid .r,th.r{text-align:right}
table.grid tbody tr{transition:background .12s}
table.grid tbody tr:hover{background:rgba(var(--accent-rgb),.06)}
.board>tbody>tr:nth-child(1)>td{color:var(--accent-strong);font-weight:700}
.board tr.drill td,.board tr.drill .grid.mini td{color:var(--text);font-weight:400}
.grid.mini tbody tr:nth-child(1) td{color:var(--text);font-weight:400}
table.grid tbody tr.sum td{border-top:2px solid var(--stroke-strong);
  border-bottom:none;font-weight:700;color:var(--text);
  background:var(--accent-soft);font-size:14.5px}
table.grid tbody tr.sum:hover{background:var(--accent-soft)}
.rankmedal{display:inline-grid;place-items:center;width:26px;height:26px;
  border-radius:50%;font-size:12px;font-weight:700;background:var(--accent-soft);
  color:var(--accent-strong)}
.rank1{background:linear-gradient(180deg,#ffe27a,#e0a300);color:#3a2b00}
.rank2{background:linear-gradient(180deg,#e8edf2,#aab4c0);color:#26303a}
.rank3{background:linear-gradient(180deg,#f0b483,#bd7434);color:#3a2207}
.muted{color:var(--muted)}.small{font-size:13px}
.diagfield{border:1px solid var(--stroke);border-radius:12px;padding:14px 16px;margin:12px 0}
table.grid.mini{margin-top:10px;font-size:13px}

/* ===== Settings switches ===== */
.settings{display:flex;flex-direction:column;gap:18px;margin-top:18px}
.switch{display:flex;align-items:flex-start;gap:14px;cursor:pointer}
/* Die input innerhalb des Switch wird durch das Custom-Track-Element
 * dargestellt - der native Checkbox-Look muss hier komplett ausgeblendet
 * werden (ueberschreibt unseren globalen Custom-Checkbox-Stil oben). */
.switch input{position:absolute;opacity:0;width:0;height:0;
  appearance:auto;-webkit-appearance:auto;border:none;background:transparent}
.switch input::before{content:none!important}
.switch .track{flex:none;width:46px;height:26px;border-radius:999px;
  background:var(--bg-elev);border:1px solid var(--border-strong);position:relative;
  transition:.18s;margin-top:2px}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;
  border-radius:50%;background:var(--text-secondary);transition:.18s;
  box-shadow:0 1px 2px rgba(0,0,0,.15)}
.switch input:checked + .track{background:linear-gradient(135deg,var(--one-primary),var(--one-primary-hover));
  border-color:transparent}
.switch input:checked + .track::after{transform:translateX(20px);background:#ffffff}
.switch input:focus-visible + .track{box-shadow:0 0 0 3px var(--one-primary-tint-20)}
.switch .lbl{font-size:14.5px;line-height:1.5}
.switch .lbl em{display:block;margin-top:2px}
.settings .actions{margin-top:8px}
.cyclebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.graph{margin-top:22px;border:1px solid var(--stroke);border-radius:var(--radius-md);
  padding:16px 16px 10px;background:var(--card)}
.graph-h{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:10px}
.graph-c{min-height:60px}
svg.chart{width:100%;height:auto;display:block}
svg.chart .cg{stroke:var(--stroke)}
svg.chart .cl{fill:var(--muted);font-size:11px;font-family:var(--font-sans)}
svg.chart .xrot{font-size:10px}
body{-webkit-user-select:none;-moz-user-select:none;user-select:none}
input,textarea,select,[contenteditable]{-webkit-user-select:text;-moz-user-select:text;user-select:text}
.numfield{display:flex;flex-direction:column;gap:7px;margin:4px 0}
.numfield input{max-width:200px}
.userform .chkrow{flex-direction:row;align-items:flex-start;gap:10px}
.userform .chkrow input{width:auto;margin-top:3px}
.userform .chkrow span{color:var(--text)}
.hvbox{border:1px solid var(--stroke);border-radius:var(--radius-sm);
  padding:14px;background:var(--panel-deep);margin-top:4px}
.legend{display:flex;gap:18px;justify-content:center;margin-top:8px;
  font-size:12px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.charttip{position:fixed;z-index:9999;pointer-events:none;background:var(--bg-3);
  color:var(--text);border:1px solid var(--stroke-strong);border-radius:8px;
  padding:8px 11px;font-size:12.5px;line-height:1.5;box-shadow:var(--shadow-lg);
  max-width:240px}
svg.chart rect.hot{cursor:crosshair}
.rowact{display:flex;gap:8px;justify-content:flex-end}
.rowact form{display:inline}
.disclaimer{background:var(--panel-deep);border:1px solid var(--stroke);
  border-radius:var(--radius-sm);padding:16px 18px;margin:6px 0 18px;
  font-size:14px;line-height:1.6;text-align:left}
.disclaimer p{margin:0 0 10px}.disclaimer p:last-child{margin:0}
.disc-actions{display:flex;gap:12px;flex-direction:column}
#newpw{font-size:15px;font-weight:700;letter-spacing:.03em}

/* ===== Panel-Header mit Aktionen ===== */
.panel-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.panel-actions a.ghost{padding:6px 14px;font-size:13px;
  color:var(--accent-strong);border-color:rgba(var(--accent-rgb),.32)}
.panel-actions a.ghost:hover{background:var(--accent-soft);
  border-color:rgba(var(--accent-rgb),.55)}

/* ===== Termine-Tabelle: KW-Gruppen-Trennzeilen ===== */
table.termine-grouped tbody tr.kw-sep td{
  background:linear-gradient(90deg,var(--accent-soft),transparent 65%);
  border-top:1px solid var(--stroke-strong);
  border-bottom:1px solid var(--stroke);
  padding:10px 14px;
  font-variant-numeric:tabular-nums}
table.termine-grouped tbody tr.kw-sep:first-child td{border-top:none}
table.termine-grouped tbody tr.kw-sep:hover td{
  background:linear-gradient(90deg,var(--accent-soft),transparent 65%)}
.kw-tag{display:inline-block;background:rgba(var(--accent-rgb),.18);
  color:var(--accent-strong);border-radius:6px;padding:3px 10px;
  font-size:11.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;margin-right:10px}

/* Folgetermin-Hervorhebung */
table.termine-grouped tbody tr.is-followup td{
  background:rgba(var(--accent-rgb),.04)}
table.termine-grouped tbody tr.is-followup:hover td{
  background:rgba(var(--accent-rgb),.09)}

/* Luecken-Hervorhebung (Team hat zwischen min/max-Termin einen leeren Werktag) */
table.termine-grouped tbody tr.is-gap td{
  background:rgba(255,107,124,.08);color:#ff8c97}
table.termine-grouped tbody tr.is-gap:hover td{
  background:rgba(255,107,124,.14)}
table.termine-grouped tbody tr.is-gap[title]{cursor:help}

/* Dickere Trennlinie zwischen verschiedenen Tagen (innerhalb der gleichen KW) */
table.termine-grouped tbody tr.is-day-start td{
  border-top:2px solid var(--stroke)}

/* Klare aber dezente Trennlinie zwischen verschiedenen Teams
 * innerhalb derselben Kalenderwoche. Etwas kraeftiger als der
 * Tages-Trenner, damit der Team-Sprung visuell hoeher wiegt
 * als der Tages-Sprung innerhalb desselben Teams. Zusaetzliches
 * Spacing ueber und unter der Linie macht den Wechsel deutlich
 * sichtbar, ohne den Tabellenrhythmus zu sprengen. */
table.termine-grouped tbody tr.is-team-start td{
  border-top:3px solid var(--stroke-strong);
  padding-top:13px}
table.termine-grouped tbody tr:has(+ tr.is-team-start) td{
  padding-bottom:13px}

/* Lead-Link in Tabellen-Zellen */
.lead-link{color:var(--accent-strong);text-decoration:none;font-weight:600;
  border-bottom:1px dotted rgba(var(--accent-rgb),.5);
  transition:color .15s,border-color .15s}
.lead-link:hover{color:var(--accent-bright);border-bottom-color:var(--accent-bright)}
table.termine-grouped tbody tr.is-gap .lead-link{color:#ff8c97;
  border-bottom-color:rgba(255,107,124,.5)}

/* ===== Partner-Switch (Header + Upload) ===== */
.partner-switch-form{margin:0;display:inline-flex}
.partner-switch-form select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background:transparent;color:var(--accent-strong);
  font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  padding:7px 32px 7px 14px;
  border:1px solid rgba(var(--accent-rgb),.45);border-radius:10px;
  background-color:var(--accent-soft);transition:.15s;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2317ac6c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5l3 3 3-3'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center;background-size:11px 11px;
  max-width:260px}
.partner-switch-form select:hover{filter:brightness(1.1)}
.partner-switch-form select:focus{outline:none;
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18)}
.partner-switch-form select option{background:var(--bg-3);color:var(--text);padding:8px 12px}

.upload-partner-banner{display:flex;justify-content:space-between;align-items:center;
  gap:14px;flex-wrap:wrap;
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.10),rgba(var(--accent-rgb),.03));
  border:1px solid rgba(var(--accent-rgb),.45);border-radius:10px;
  padding:12px 16px;margin:6px 0}
.upload-partner-banner strong{color:var(--accent-strong);font-size:16px;font-weight:600;margin-left:10px}
.upload-partner-banner code{margin-left:8px}
.upload-partner-label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);font-weight:600}

/* ===== Datenupload-Karten ===== */
.upload-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:16px}
@media(max-width:760px){.upload-grid{grid-template-columns:1fr}}
.upload-card{background:var(--panel);border:1px solid var(--stroke);
  border-radius:10px;padding:16px 18px;
  display:flex;flex-direction:column;gap:10px}
.upload-card-info{background:rgba(var(--accent-rgb),.04)}
.upload-card h3{margin:0;font-size:15px;font-weight:600;color:var(--text)}
.upload-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.upload-status{font-size:12px;color:var(--muted);font-weight:500}
.upload-status-ok{color:var(--accent-strong)}
.upload-status-empty{font-style:italic}
.upload-download{align-self:flex-start;font-size:12.5px;padding:5px 10px}
.upload-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}
.upload-form input[type=file]{font-size:13px;color:var(--text);flex:1;min-width:0}
.upload-form button{padding:7px 14px;font-size:13.5px;white-space:nowrap}
.upload-reset{margin:0}
.upload-reset button{font-size:12px;padding:5px 10px}

/* ===== Datenupload — Import-Diagnose nach Upload ===== */
.upload-diag{margin-top:12px;padding:12px 16px;
  background:rgba(var(--accent-rgb),.04);
  border:1px solid rgba(var(--accent-rgb),.30);
  border-radius:10px}
.upload-diag-head{display:flex;align-items:baseline;gap:10px;
  margin-bottom:6px}
.upload-diag-title{font-size:13px;font-weight:600;color:var(--accent-strong);
  text-transform:uppercase;letter-spacing:.04em}
.upload-diag-sub{font-size:12px;color:var(--muted)}
.upload-diag-table{width:100%;border-collapse:collapse;font-size:13px}
.upload-diag-table td{padding:4px 0;vertical-align:top}
.upload-diag-table tr td:first-child{color:var(--muted);width:42%;padding-right:14px}
.upload-diag-table tr td:nth-child(2){color:var(--text)}

/* ===== Team-Umbenennung ===== */
.team-rename-grid{display:grid;grid-template-columns:1fr 1fr;
  gap:8px 14px;margin:8px 0 14px}
@media (max-width:780px){.team-rename-grid{grid-template-columns:1fr}}
.team-rename-row{display:grid;grid-template-columns:1fr auto 1fr;
  gap:6px;align-items:center;padding:6px 10px;background:var(--surface-soft);
  border:1px solid var(--stroke);border-radius:8px;font-size:13px}
.team-rename-orig{font-family:var(--mono);font-size:12px;color:var(--text);
  overflow-wrap:anywhere}
.team-rename-arrow{color:var(--muted);font-weight:600;text-align:center}
.team-rename-input{font-size:13px;padding:5px 8px;border:1px solid var(--stroke);
  border-radius:6px;background:var(--surface);color:var(--text)}
.team-rename-input::placeholder{color:var(--muted);font-style:italic;font-size:12px}
.team-rename-input:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-glow)}

/* ===== AC-Auftragspruefung ===== */
/* Full-width Layout fuer die Pruefungs-Seite (sonst max-width 1180px) */
body.layout-wide main{max-width:none;padding:clamp(12px,1.5vw,24px) clamp(16px,2vw,32px)}
body.layout-wide .panel{max-width:none}

.pruef-kw-form{margin:0;display:inline-flex;align-items:center;gap:10px}
.pruef-kw-form .kw-pick{display:flex;flex-direction:column;gap:4px}
.pruef-kw-form .kw-pick .lbl{color:var(--muted)}
.pruef-kw-form select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-color:transparent;color:var(--text);font-family:inherit;cursor:pointer;
  font-size:13.5px;font-weight:500;padding:7px 34px 7px 14px;
  border:1px solid var(--stroke);border-radius:10px;transition:.15s;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2382909a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5l3 3 3-3'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px 12px;
  max-width:340px}
.pruef-kw-form select:hover,
.pruef-kw-form select:focus{border-color:var(--accent);outline:none}
.pruef-kw-form select option{background:var(--bg-3);color:var(--text);padding:8px 12px}

/* Auto-Save-Status */
.auto-save-status{padding:6px 10px;border-radius:8px;font-size:12px;
  background:rgba(255,255,255,.03);border:1px solid var(--stroke);
  white-space:nowrap;transition:.2s}
.auto-save-status.is-saving{color:var(--accent-strong);
  border-color:rgba(var(--accent-rgb),.35)}
.auto-save-status.is-ok{color:var(--accent-strong);
  border-color:rgba(var(--accent-rgb),.45);
  background:var(--accent-soft)}
.auto-save-status.is-err{color:var(--danger);
  border-color:rgba(255,107,124,.45);
  background:rgba(255,107,124,.08)}

/* Tabelle - skaliert auf volle Breite, ohne horizontalem Scroll */
.pruef-table{width:100%;border-collapse:separate;border-spacing:0;
  font-size:12px;font-variant-numeric:tabular-nums;table-layout:fixed;
  border:1px solid var(--stroke);border-radius:var(--radius-sm);
  overflow:hidden;background:rgba(0,0,0,.12)}
.pruef-table th{position:sticky;top:0;background:var(--panel-strong);color:var(--muted);
  font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;
  padding:8px 5px;border-bottom:1px solid var(--stroke);text-align:left;
  z-index:2;line-height:1.15}
.pruef-table td{padding:5px;border-bottom:1px solid var(--stroke);
  vertical-align:top;color:var(--text);overflow-wrap:anywhere;
  word-break:break-word;line-height:1.3}
.pruef-table tr:last-child td{border-bottom:none}
.pruef-table tbody tr:hover td{background:rgba(var(--accent-rgb),.05)}
.pruef-table .pruef-row.is-rekla td{background:rgba(255,140,90,.06)}
.pruef-table .pruef-row.is-rekla:hover td{background:rgba(255,140,90,.10)}
.pruef-table .pruef-row.is-follow td{background:rgba(80,160,200,.06)}
.pruef-table .pruef-row.is-follow:hover td{background:rgba(80,160,200,.10)}

/* Spaltenbreiten als Prozent - addieren sich auf ~100% */
.pruef-table .c-date  {width:3.5%}
.pruef-table .c-pnr   {width:5.5%}
.pruef-table .c-name  {width:7%}
.pruef-table .c-art   {width:8%;color:var(--accent-strong);font-weight:500}
.pruef-table .c-info  {width:9%}
.pruef-table .c-chk   {width:2.5%;text-align:center}
.pruef-table .c-num   {width:3.5%;text-align:center}
.pruef-table .c-chknum{width:4%;text-align:center}
.pruef-table .c-txt   {width:5.5%}
.pruef-table .c-meta  {width:5.5%;font-size:11px;color:var(--muted)}

/* Kombinierte ZwZ-/eHZ-Zelle: Checkbox oben, Anzahl direkt darunter
   (legacy - falls in alten Templates noch genutzt). Aktuell nur noch
   reine Number-Inputs in der c-num-Spalte. */
.pruef-table .c-chknum{padding:4px;text-align:center}
.pruef-table .c-chknum input[type=checkbox]{display:block;margin:0 auto 4px}
.pruef-table .c-chknum input[type=number].num{
  width:42px;padding:3px 4px;font-size:11px;text-align:center;
  margin:0 auto;display:block}

/* Reine Anzahl-Spalte (ZwZ/eHZ ohne Bool) */
.pruef-table .c-num input[type=number].num{
  width:60px;margin:0 auto;display:block}

/* ===== Arbeitsanweisungs-Modal ===== */
.modal-backdrop{position:fixed;inset:0;z-index:1000;
  background:rgba(3,6,11,.72);backdrop-filter:blur(8px);
  display:none;align-items:flex-start;justify-content:center;
  padding:clamp(20px,4vh,60px) clamp(16px,4vw,40px);
  overflow-y:auto;animation:modal-fade-in .25s ease-out}
.modal-backdrop.is-open{display:flex}
@keyframes modal-fade-in{from{opacity:0}to{opacity:1}}
.modal{
  width:min(780px,100%);background:
    linear-gradient(180deg,rgba(var(--accent-rgb),.06),transparent 60%),
    var(--panel);
  border:1px solid rgba(var(--accent-rgb),.35);border-radius:var(--radius-md);
  box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.02);
  overflow:hidden;animation:modal-slide-in .3s cubic-bezier(.2,.7,.2,1)}
@keyframes modal-slide-in{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-head{padding:24px 28px 16px;border-bottom:1px solid var(--stroke);
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.08),transparent)}
.modal-head h2{margin:0;font-size:20px;display:flex;align-items:center;gap:12px}
.modal-head h2 .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 12px rgba(var(--accent-rgb),.6);flex-shrink:0}
.modal-head p{margin:8px 0 0;font-size:13px}
.modal-body{padding:20px 28px 8px;max-height:78vh;overflow-y:auto;
  /* Ausnahmsweise text-selectable: damit der Nutzer z. B. die
   * Mail-Adresse aus der Arbeitsanweisung herauskopieren kann.
   * Greift auch fuer das drill-modal, das ohnehin keine
   * sensitiven Daten zeigt. */
  -webkit-user-select:text;-moz-user-select:text;user-select:text}
.modal-body .lead-line{margin:0 0 16px;font-size:14px;color:var(--text)}
.instr-list{margin:0;padding-left:24px;display:flex;flex-direction:column;gap:12px}
.instr-list li{font-size:13.5px;line-height:1.55;color:var(--text);
  padding-left:6px}
.instr-list li::marker{color:var(--accent-strong);font-weight:700}
.instr-list b{color:var(--accent-strong);font-weight:600}
.instr-list em{font-style:italic;color:var(--text);font-weight:500}
.instr-mail{margin-top:8px;padding:10px 14px;background:rgba(0,0,0,.18);
  border:1px solid var(--stroke);border-radius:8px;font-size:12.5px;
  line-height:1.7;font-family:ui-monospace,'SF Mono',Monaco,Consolas,monospace}
.instr-mail .addr{display:inline-block;color:var(--muted);width:62px}
.instr-mail code{color:var(--accent-strong);background:none;padding:0;font-size:12.5px}
.instr-hint{margin:16px 0 8px;font-size:12.5px;color:var(--muted);
  padding:10px 14px;background:rgba(var(--accent-rgb),.06);
  border-left:3px solid var(--accent);border-radius:0 6px 6px 0}
.instr-extras{margin-top:10px;padding:10px 14px;
  background:rgba(255,180,90,.08);
  border-left:3px solid #ffb95a;border-radius:0 6px 6px 0;
  font-size:12.5px;line-height:1.55}
.instr-extras b{color:#ffd089}
[data-theme="light"] .instr-extras{background:rgba(200,120,30,.08);}
[data-theme="light"] .instr-extras b{color:#a06014}
.modal-foot{padding:16px 28px 22px;display:flex;justify-content:flex-end;
  border-top:1px solid var(--stroke);background:rgba(0,0,0,.12)}
.modal-foot button{font-size:14px;padding:12px 24px}

[data-theme="light"] .modal-backdrop{background:rgba(255,255,255,.6)}
[data-theme="light"] .instr-mail{background:rgba(16,33,26,.04)}

/* Lead-Link in der Projektnr-Spalte */
.pruef-table a.lead-link{color:var(--accent-strong);text-decoration:none;
  font-family:ui-monospace,'SF Mono',Monaco,Consolas,monospace;
  font-weight:600;font-size:11.5px;border-bottom:1px dotted rgba(var(--accent-rgb),.4)}
.pruef-table a.lead-link:hover{color:var(--accent-bright);
  border-bottom-color:var(--accent)}
.pruef-table code{font-family:ui-monospace,'SF Mono',Monaco,Consolas,monospace;
  font-size:11.5px;color:var(--text)}

/* Inputs in der Tabelle - dezent angedeutete Felder (sichtbar, nicht dominant) */
.pruef-table textarea,
.pruef-table input[type=text],
.pruef-table input[type=number].num{
  width:100%;padding:5px 7px;
  background:rgba(255,255,255,.025);color:var(--text);
  border:1px solid rgba(255,255,255,.07);border-radius:6px;
  font-size:12px;font-family:inherit;
  transition:border-color .15s,background-color .15s}
.pruef-table textarea{display:block;resize:none;overflow:hidden;
  min-height:28px;line-height:1.4}
.pruef-table input[type=number].num{
  font-variant-numeric:tabular-nums}
.pruef-table textarea:hover,
.pruef-table input[type=text]:hover,
.pruef-table input[type=number].num:hover{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.04)}
.pruef-table textarea:focus,
.pruef-table input[type=text]:focus,
.pruef-table input[type=number].num:focus{
  outline:none;border-color:var(--accent);
  background:rgba(var(--accent-rgb),.07)}
.pruef-table input[type=number].num::-webkit-outer-spin-button,
.pruef-table input[type=number].num::-webkit-inner-spin-button{appearance:none;margin:0}
.pruef-table input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}

[data-theme="light"] .pruef-table textarea,
[data-theme="light"] .pruef-table input[type=text],
[data-theme="light"] .pruef-table input[type=number].num{
  background:rgba(16,33,26,.025);border-color:rgba(16,33,26,.10)}
[data-theme="light"] .pruef-table textarea:hover,
[data-theme="light"] .pruef-table input[type=text]:hover,
[data-theme="light"] .pruef-table input[type=number].num:hover{
  background:rgba(16,33,26,.04);border-color:rgba(16,33,26,.22)}

/* Bei kleineren Bildschirmen wird die Schrift etwas reduziert */
@media (max-width: 1700px){
  .pruef-table{font-size:11px}
  .pruef-table th{font-size:10px;padding:7px 4px}
  .pruef-table textarea,
  .pruef-table input[type=text]{font-size:11px;padding:4px 6px}
}

/* ===== Admin-Rollen-Vorschau ===== */
.view-as-form{margin:0;display:inline-flex}
.view-as-form select{
  /* Visuelle Anlehnung an a.ghost / button.ghost */
  color:var(--muted);font-size:13.5px;font-weight:500;font-family:inherit;
  padding:8px 34px 8px 14px;border:1px solid var(--stroke);border-radius:10px;
  background:transparent;transition:.15s;cursor:pointer;line-height:1.2;
  /* Native Caret entfernen, eigenes SVG-Chevron einsetzen */
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2382909a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5l3 3 3-3'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px 12px;
  max-width:260px;text-overflow:ellipsis}
.view-as-form select:hover{color:var(--text);border-color:var(--accent)}
.view-as-form select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15)}
/* Wenn eine Vorschau aktiv ist, hebt sich das Dropdown deutlicher ab */
.view-as-form.is-active select{color:var(--accent-strong);
  border-color:rgba(var(--accent-rgb),.5);background-color:var(--accent-soft);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2317ac6c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5l3 3 3-3'/></svg>")}
.view-as-form select option{background:var(--bg-3);color:var(--text);
  padding:8px 12px}
[data-theme="light"] .view-as-form select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23556' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5l3 3 3-3'/></svg>")}

.view-as-banner{display:flex;justify-content:space-between;align-items:center;
  gap:12px;flex-wrap:wrap;
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.10),rgba(var(--accent-rgb),.03));
  border:1px solid rgba(var(--accent-rgb),.45);border-radius:var(--radius-sm);
  padding:10px 16px;margin:0 0 16px;font-size:13px}
.view-as-banner b{color:var(--accent-strong)}

/* ===== Frisch generiertes Passwort (Benutzer-Verwaltung) ===== */
.fresh-pw{border:1px solid rgba(var(--accent-rgb),.45);border-radius:var(--radius-sm);
  padding:14px 18px;margin:0 0 18px;
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.08),rgba(var(--accent-rgb),.02))}
.fresh-pw .fp-head{font-weight:600;font-size:13px;margin-bottom:8px}
.fresh-pw .fp-head code{color:var(--accent-strong);font-size:13px}
.fresh-pw .fp-body{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fresh-pw .fp-body code{font-size:16px;font-weight:600;color:var(--accent-bright);
  background:rgba(0,0,0,.25);border:1px solid var(--stroke);
  padding:7px 12px;border-radius:6px;letter-spacing:.02em;
  font-family:ui-monospace,'SF Mono',Monaco,Consolas,monospace;
  user-select:all}
.fresh-pw .fp-body button{padding:7px 14px;font-size:12.5px}
.fresh-pw .fp-foot{margin-top:8px}

/* ===== Rollen-Konfiguration im Backend ===== */
.role-cfg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:14px;margin:8px 0 18px}
.role-cfg-box{border:1px solid var(--stroke);border-radius:var(--radius-sm);
  padding:12px 14px;background:rgba(255,255,255,.015);min-width:0}
.role-cfg-box.role-cfg-admin{border-color:rgba(var(--accent-rgb),.45);
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.04),transparent)}
.role-cfg-box .badge-admin{display:inline-block;font-size:9.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;background:var(--accent-soft);
  color:var(--accent-strong);vertical-align:middle}
.role-cfg-box legend{padding:0 6px;font-weight:700;letter-spacing:.02em;font-size:13px}
.role-cfg-box legend code{margin-left:6px;font-size:11px;font-weight:400}
.role-cfg-weeks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 10px}
.role-cfg-weeks .numfield{margin:0}
.role-cfg-weeks .numfield input{padding:6px 8px;font-size:13px}
.role-cfg-panels .check-row{font-size:12.5px;padding:4px 0}

/* Rollen-Dropdown (Tabelle + Anlegen-Formular): gemeinsamer CI-Stil */
.role-inline{margin:0}
.role-inline select,
.userform select{
  /* Native Caret entfernen, eigenes SVG-Chevron */
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-color:transparent;color:var(--text);font-family:inherit;cursor:pointer;
  transition:.15s;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2382909a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5l3 3 3-3'/></svg>");
  background-repeat:no-repeat}
.role-inline select{
  border:1px solid var(--stroke);border-radius:8px;
  padding:6px 28px 6px 10px;font-size:12.5px;
  background-position:right 10px center;background-size:11px 11px}
.userform select{
  border:1px solid var(--stroke-strong);border-radius:var(--radius-sm);
  padding:14px 38px 14px 16px;font-size:15px;width:100%;
  background-color:var(--field);
  background-position:right 14px center;background-size:13px 13px}
.role-inline select:hover,
.userform select:hover{border-color:var(--accent)}
.role-inline select:focus,
.userform select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22)}
.role-inline select option,
.userform select option{background:var(--bg-3);color:var(--text);padding:8px 12px}
[data-theme="light"] .role-inline select,
[data-theme="light"] .userform select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23556' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5l3 3 3-3'/></svg>")}

/* ===== Datenstand-Zeile (zwischen Topbar und erstem Panel) ===== */
.data-stand{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;
  padding:10px 18px;margin:0 0 14px 0;
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.05),transparent);
  border:1px solid var(--stroke);border-radius:var(--radius-sm);
  font-size:12.5px}
.data-stand .ds-label{font-weight:700;color:var(--text);text-transform:uppercase;
  letter-spacing:.06em;font-size:11px}
.data-stand .ds-item b{color:var(--accent-strong);font-weight:600}
.data-stand .ds-item em{font-style:italic;opacity:.7}
.data-stand .ds-sep{opacity:.4}
@media(max-width:640px){
  .data-stand{flex-direction:column;align-items:flex-start;gap:4px}
  .data-stand .ds-sep{display:none}
}

/* ===== Phasen-Ausschluss (Multi-Checkbox-Grid) ===== */
.phases-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:8px;margin-top:6px}
.check-row{display:flex;align-items:center;gap:10px;padding:9px 12px;
  background:var(--card);border:1px solid var(--stroke);
  border-radius:8px;cursor:pointer;transition:border-color .15s,background .15s}
.check-row:hover{border-color:rgba(var(--accent-rgb),.4);
  background:rgba(var(--accent-rgb),.04)}
.check-row input[type=checkbox]{width:16px;height:16px;flex:none;
  accent-color:var(--accent-strong);cursor:pointer}
.check-row span{font-size:13.5px;color:var(--text);line-height:1.3}
.check-row:has(input:checked){border-color:rgba(var(--accent-rgb),.55);
  background:rgba(var(--accent-rgb),.07)}

/* ===== Page-Footer mit Copyright ===== */
.page-footer{margin:30px 0 8px;padding-top:18px;
  border-top:1px solid var(--stroke);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  text-align:center}
.page-footer .copyright{font-size:11.5px;color:var(--muted);
  letter-spacing:.04em}
.login-copy{margin-top:12px;font-size:11px;color:var(--muted);
  letter-spacing:.04em;opacity:.8}

/* ===== Donut-Charts (Soll/Ist) ===== */
.donut-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:6px}
.donut{display:flex;align-items:center;gap:14px;padding:16px 18px;
  background:var(--card);border:1px solid var(--stroke);
  border-radius:var(--radius-md);transition:transform .18s,border-color .18s}
.donut:hover{transform:translateY(-2px);border-color:rgba(var(--accent-rgb),.4)}
.donut svg{width:84px;height:84px;flex:none}
.donut-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.donut-lbl{font-size:14.5px;color:var(--text);font-weight:700;
  letter-spacing:-.01em;line-height:1.2}
.donut-num{font-size:17px;font-weight:600;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;line-height:1.2;color:var(--muted)}
.donut-num .muted{font-weight:500;font-size:14px}

/* ===== Karten-Grids (Kennzahlen GF) ===== */
.cards-6{grid-template-columns:repeat(3,1fr)}
@media(min-width:1100px){
  .cards-6{grid-template-columns:repeat(6,1fr)}
}
.cards-3{grid-template-columns:repeat(3,1fr)}
.cards-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){
  .cards-3{grid-template-columns:repeat(1,1fr)}
  .cards-2{grid-template-columns:repeat(1,1fr)}
}
.cards-4{grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){
  .cards-4{grid-template-columns:repeat(4,1fr)}
}

/* "davon Zählerwechsel: X" eine Spur kleiner als die anderen Sublines */
.card i.zw-sub{font-size:11.5px;opacity:.88}
.card i.zw-sub b{font-size:13px;color:var(--accent-strong);font-weight:700;
  font-variant-numeric:tabular-nums;line-height:1}

/* ===== Durchlaufzeit-Karten: Ziel-Status farbig ===== */
.card.dz-ok{border-color:rgba(var(--accent-rgb),.45)}
.card.dz-ok b{color:var(--accent-strong)}
.card.dz-ok::after{background:linear-gradient(90deg,var(--accent),var(--accent-bright))}
.card.dz-warn{border-color:rgba(255,107,124,.45)}
.card.dz-warn b{color:#ff6b7c}
.card.dz-warn::after{background:linear-gradient(90deg,#ff6b7c,#ff8c5a)}

/* ===== Wochenbalken (KW-Histogramm) ===== */
.weekbars{display:flex;gap:8px;align-items:flex-end;
  border:1px solid var(--stroke);border-radius:var(--radius-md);
  padding:18px 14px 10px;background:var(--card);margin:14px 0 4px;
  overflow-x:auto;min-height:140px}
.wb{flex:1 1 0;min-width:42px;display:flex;flex-direction:column;
  align-items:center;gap:6px;justify-content:flex-end;position:relative}
.wb-bar{width:100%;max-width:36px;border-radius:6px 6px 2px 2px;
  background:linear-gradient(180deg,var(--accent-bright),var(--accent));
  box-shadow:0 4px 12px rgba(var(--accent-rgb),.18);
  transition:transform .15s,filter .15s}
.wb:hover .wb-bar{filter:brightness(1.1);transform:scaleY(1.04)}
.wb.future .wb-bar{background:repeating-linear-gradient(135deg,
  var(--accent-soft) 0,var(--accent-soft) 6px,
  rgba(var(--accent-rgb),.32) 6px,rgba(var(--accent-rgb),.32) 12px);
  box-shadow:none;border:1px solid rgba(var(--accent-rgb),.32)}
.wb-n{font-size:13px;font-weight:700;color:var(--text);
  font-variant-numeric:tabular-nums;line-height:1}
.wb-lbl{font-size:10.5px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;font-weight:600;white-space:nowrap}

@media(max-width:760px){
  .cards{grid-template-columns:repeat(2,1fr)}.card.wide{grid-column:span 2}
  .cards-6{grid-template-columns:repeat(2,1fr)}
  .cards-4{grid-template-columns:repeat(2,1fr)}
  .cards-3{grid-template-columns:repeat(1,1fr)}
  nav{gap:6px}a.ghost,button.ghost{padding:7px 10px;font-size:12.5px}
  .userform .grid2{grid-template-columns:1fr}.userform label.span2{grid-column:span 1}
  .who{display:none}
  .donut-grid{grid-template-columns:repeat(2,1fr)}
  .donut svg{width:72px;height:72px}
  .donut-lbl{font-size:13.5px}
  .donut-num{font-size:15px}
}

/* ===== Terminierungs-Seite: breiterer Container und fluide Tabelle ===== */

/* Desktop-optimiert: auf grossen Bildschirmen darf die Terminierungs-Seite
 * deutlich breiter werden als das uebliche Dashboard-Layout, damit die
 * Tabelle (Pos./Kunde/Ort/Hinweis) komfortabel nebeneinander Platz hat.
 * Unterhalb des Caps skaliert main ohnehin fluide ueber die Viewport-Breite. */
body.page-termin main{max-width:1640px}

/* Team-Trennzeile innerhalb einer KW. */
table.termine-grouped tbody tr.team-sep td{
  background:linear-gradient(90deg,rgba(var(--accent-rgb),.06),transparent 70%);
  border-top:1px solid var(--stroke);
  padding:8px 14px;
  font-variant-numeric:tabular-nums}
table.termine-grouped tbody tr.team-sep:hover td{
  background:linear-gradient(90deg,rgba(var(--accent-rgb),.06),transparent 70%)}
table.termine-grouped tbody tr.team-sep .team-sep-row{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;flex-wrap:wrap}
table.termine-grouped tbody tr.team-sep .team-sep-meta{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
table.termine-grouped tbody tr.team-sep .kw-tag.team-tag{
  background:rgba(var(--accent-rgb),.10);color:var(--text)}
table.termine-grouped tbody tr.team-sep b{color:var(--text)}
table.termine-grouped tbody tr.team-sep .team-sep-maps{
  font-weight:500;border-bottom:none;text-decoration:underline dotted;
  text-underline-offset:3px;white-space:nowrap}

/* Tabellen-Wrapper: Safety-Net mit horizontalem Scroll, falls die Spalten
 * trotz aller Wrap-Versuche nicht mehr in den Viewport passen (sehr enge
 * mobile Ansichten). Auf Desktop ist der Wrapper unsichtbar. */
.termin-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Plan-Tabelle: fluide Spaltenverteilung.
 *  - table-layout:auto lässt die Browser-Heuristik die Spalten gemaess
 *    Inhalt aufteilen (lange Inhalte bekommen Platz; lange Texte wrappen
 *    auf die zweite Zeile).
 *  - Datum + Pos. + Kundennr. sollen NIEMALS wrappen (sind kurze, atomare
 *    Strings) - per nowrap erzwingen, damit der Browser zuerst Kunde,
 *    PLZ/Ort und Hinweis wrappt.
 *  - Lange Inhalte (Kunde, Hinweis) duerfen via word-break vorgreifen,
 *    wenn ein Wort die Spalte komplett ausfuellt. */
table.termin-plan{table-layout:auto;width:100%}
table.termin-plan td,
table.termin-plan th{vertical-align:top;word-break:normal;overflow-wrap:anywhere}
table.termin-plan th{white-space:nowrap}
table.termin-plan .col-datum,
table.termin-plan .col-pos,
table.termin-plan .col-kdnr{white-space:nowrap}
table.termin-plan .col-datum .wd{font-weight:600}
table.termin-plan .col-datum .wd-date{margin-left:6px;white-space:nowrap}

/* Auf schmaleren Bildschirmen mehr Zeilenraum statt Spaltenraum.
 * <= 1100 px: Datum kompakter (Wochentag ueber Datum, statt nebeneinander) */
@media (max-width:1100px){
  table.termin-plan .col-datum .wd-date{display:block;margin-left:0;
    font-variant-numeric:tabular-nums}
  table.termin-plan td,
  table.termin-plan th{padding:10px 8px;font-size:13.5px}
}

/* <= 760 px: ganz schmaler Bildschirm - Hinweis-Spalte schrumpft auf 3em-min
 * damit sie das Layout nicht sprengt. Sollte in der Praxis selten gebraucht
 * werden (Terminierung ist eine Backend-Funktion), aber Maps-Link nicht
 * komplett rauswerfen. */
@media (max-width:760px){
  table.termine-grouped tbody tr.team-sep .team-sep-maps{
    margin-top:6px;float:none}
}

/* ===== Bezahlte Reklamation: feiner Gold-Tint ===== */
/* Pattern analog zu .is-followup (gruen), .is-gap (rot) - hier feines Gold
 * fuer Reklamationen/Einsaetze, die der Admin als bezahlt markiert hat. */
table.termine-grouped tbody tr.is-paid td{
  background:rgba(212,175,55,.10);
  color:#d4af37}
table.termine-grouped tbody tr.is-paid:hover td{
  background:rgba(212,175,55,.18)}
table.termine-grouped tbody tr.is-paid .lead-link{
  color:#d4af37;border-bottom-color:rgba(212,175,55,.5)}
table.termine-grouped tbody tr.is-paid .lead-link:hover{
  color:#e8c558;border-bottom-color:#e8c558}
table.termine-grouped tbody tr.is-paid b{color:#d4af37}
table.termine-grouped tbody tr.is-paid .muted{color:rgba(212,175,55,.75) !important}
.paid-tag{color:#d4af37;font-weight:600;letter-spacing:.01em}

/* is-followup hat Vorrang bei der Schriftfarbe, aber bei is-paid ueberschreiben
 * wir das (bezahlt sticht hervor; Folgetermin-Hervorhebung bleibt als
 * Hintergrund-Layer erhalten, nicht als Farbe). */
table.termine-grouped tbody tr.is-followup.is-paid td{color:#d4af37}

/* Rote Markierung fuer Auftrage, die Admin-konfigurierte Keywords
 * (z. B. "RCD", "FI") im Hinweis oder in der Zusammenfassung
 * tragen. Soll deutlich, aber nicht aggressiv sein - aehnlich
 * .is-paid, nur in Rot. */
table.termine-grouped tbody tr.is-warn-red td{
  background:rgba(220,53,69,.12);
  color:#e95d6b}
table.termine-grouped tbody tr.is-warn-red:hover td{
  background:rgba(220,53,69,.20)}
table.termine-grouped tbody tr.is-warn-red .lead-link{
  color:#e95d6b;border-bottom-color:rgba(220,53,69,.5)}
table.termine-grouped tbody tr.is-warn-red .lead-link:hover{
  color:#f47785;border-bottom-color:#f47785}
table.termine-grouped tbody tr.is-warn-red b{color:#e95d6b}
table.termine-grouped tbody tr.is-warn-red .muted{
  color:rgba(220,53,69,.75) !important}
/* Wenn beide Markierungen zugleich greifen (selten), gewinnt rot -
 * eine Warnung ist relevanter als die Zahlungs-Hervorhebung. */
table.termine-grouped tbody tr.is-paid.is-warn-red td{
  background:rgba(220,53,69,.12);color:#e95d6b}

/* ===== Terminierungs-Seite: CI fuer Form-Controls ===== */
/* Globaler Style deckt nur input[type=text|number|...] ab. Hier
 * ergaenzen wir select und input[type=date] sowie textarea fuer die
 * Terminierungs-Maske, damit Dropdown, Datumswahl und Textfelder
 * dasselbe Aussehen wie die uebrigen Inputs haben. */
/* Termin-Maske-Optik fuer alle Form-Felder INNERHALB von <main> -
 * die Topbar-Selects (Partner-Switch, Rollen-Switch) sollen davon
 * NICHT betroffen sein, damit sie wie im Dashboard aussehen. */
body.page-termin main select,
body.page-termin main input[type=date]{
  padding:14px 16px;
  border-radius:var(--radius-sm);
  border:1px solid var(--stroke-strong);
  background:var(--field);
  color:var(--text);
  font-family:inherit;
  font-size:15px;
  outline:none;
  transition:.15s;
  width:100%;
  appearance:none;
  -webkit-appearance:none}
body.page-termin main select:focus,
body.page-termin main input[type=date]:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22)}
body.page-termin main select{
  /* Eigene Chevron-Grafik in CI-Farbe, da das native Caret nicht
   * stylebar ist. Zwei kleine diagonale Striche bilden ein Caret. */
  background-image:
    linear-gradient(45deg,transparent 50%,var(--accent) 50%),
    linear-gradient(135deg,var(--accent) 50%,transparent 50%);
  background-position:calc(100% - 18px) 53%,calc(100% - 13px) 53%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:38px;
  cursor:pointer}
body.page-termin main select:hover{border-color:var(--stroke-strong);
  box-shadow:0 0 0 1px var(--stroke-strong)}

/* Date-Picker-Icon einfärben (Webkit/Chromium). */
body.page-termin main input[type=date]::-webkit-calendar-picker-indicator{
  cursor:pointer;
  filter:invert(.55) sepia(1) saturate(7) hue-rotate(105deg);
  opacity:.8}
body.page-termin main input[type=date]::-webkit-calendar-picker-indicator:hover{
  opacity:1}
[data-theme="light"] body.page-termin main input[type=date]::-webkit-calendar-picker-indicator{
  filter:invert(.45) sepia(1) saturate(5) hue-rotate(110deg)}

/* Phase-/Verursacher-Spalten in der Plan-Tabelle: optisch dezenter */
table.termin-plan .col-phase,
table.termin-plan .col-verursacher{font-size:13.5px;color:var(--muted)}

/* ===== Terminierungs-Seite: durchgängige CI für Form-Felder ===== */

/* Die Settings-Form auf der Terminierungs-Seite zieht alle Form-
 * elemente in die CI: Select-Dropdowns, Datums-Eingaben und Checkboxen
 * bekommen denselben Rahmen / dieselbe Hintergrundfarbe / denselben
 * Focus-Ring wie die Text-/Number-Inputs (Browser-Default-Stilen entfernen). */

body.page-termin form.settings select,
body.page-termin form.settings input[type=date]{
  padding:14px 16px;
  border-radius:var(--radius-sm);
  border:1px solid var(--stroke-strong);
  background:var(--field);
  color:var(--text);
  font-family:inherit;
  font-size:15px;
  line-height:1.2;
  outline:none;
  transition:.15s;
  width:100%;
  /* Native Select-Pfeil ausblenden, eigenen einbauen */
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}

/* Eigener Caret fuer Selects (SVG inline) */
body.page-termin form.settings select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%2317AC6C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:38px;
  cursor:pointer;
}
body.page-termin form.settings select:hover{filter:brightness(1.05)}

/* Datums-Eingabe: Indicator (Pfeil oben rechts) farblich einfärben */
body.page-termin form.settings input[type=date]::-webkit-calendar-picker-indicator{
  filter:invert(54%) sepia(64%) saturate(409%) hue-rotate(110deg) brightness(94%) contrast(86%);
  cursor:pointer;
  opacity:.85;
}
body.page-termin form.settings input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1}

/* Focus: gleicher Ring wie bei Text-Inputs */
body.page-termin form.settings select:focus,
body.page-termin form.settings input[type=date]:focus,
body.page-termin form.settings input[type=number]:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22);
}

/* Select-Dropdown-Liste: dunkler Hintergrund im aktiven Theme */
body.page-termin form.settings select option{
  background:var(--bg-3);
  color:var(--text);
  padding:8px 12px;
}

/* Number-Inputs auf der Terminierungs-Seite duerfen mitwachsen
 * (Standard-Limit von 200px fuer .numfield input ist eng) */
body.page-termin form.settings .numfield input[type=number]{max-width:none}

/* ===== Terminierungs-Maske: Form-Parameter kompakt ===== */
/* Die Zahl-Eingaben (Aufträge/Woche, Max. km/Woche) enthalten maximal
 * 4 Ziffern - die Felder waren bisher viel zu breit. Mit .num-narrow
 * sind sie nur so breit wie noetig, der Wert bleibt lesbar mittig.
 * Die Felder werden an der UNTERKANTE der Inputs ausgerichtet, damit
 * unterschiedlich hohe Labels (mit/ohne <em>-Beschreibung) optisch
 * sauber auf einer Linie sitzen. */
body.page-termin form.settings .termin-params{
  display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end}
body.page-termin form.settings .termin-params .numfield{
  flex:0 0 auto;display:flex;flex-direction:column;justify-content:flex-end}
/* Labels + Number-Inputs der Wochenplanungs-Felder zentriert,
 * damit die Werte unter ihren Beschriftungen sauber zentriert
 * sitzen. Datum bleibt links-bündig (üblich für Date-Inputs). */
body.page-termin form.settings .termin-params .numfield .lbl{
  text-align:center}
body.page-termin form.settings input.num-narrow{
  max-width:110px;text-align:center;font-variant-numeric:tabular-nums}
body.page-termin form.settings input[type=date]{max-width:200px}
body.page-termin form.settings select{max-width:520px}
body.page-termin form.settings .numfield .lbl em{display:block;
  margin-top:2px;font-style:italic;font-weight:400}

/* ===== Drillthrough-Modal (Klick auf Vorschlagszeile) ===== */
body.page-termin tr.has-drill{cursor:pointer;transition:background .12s ease}
body.page-termin tr.has-drill:hover{background:rgba(23,172,108,.07)}
.drill-modal{position:fixed;inset:0;display:flex;align-items:center;
  justify-content:center;z-index:1000;pointer-events:none;opacity:0;
  transition:opacity .15s ease}
.drill-modal[aria-hidden="false"]{pointer-events:auto;opacity:1}
.drill-backdrop{position:absolute;inset:0;background:rgba(8,18,12,.55);
  backdrop-filter:blur(2px)}
.drill-dialog{position:relative;background:#fff;color:#111;border-radius:12px;
  box-shadow:0 24px 80px rgba(0,0,0,.32),0 2px 8px rgba(0,0,0,.16);
  max-width:680px;width:calc(100% - 40px);max-height:80vh;
  display:flex;flex-direction:column;padding:18px 22px 20px}
.drill-dialog header{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:6px}
.drill-dialog h3{margin:0;font-size:1.06rem;font-weight:600}
.drill-close{appearance:none;border:0;background:transparent;font-size:26px;
  line-height:1;cursor:pointer;color:#666;padding:4px 8px;border-radius:6px}
.drill-close:hover{background:rgba(0,0,0,.06);color:#111}
.drill-meta{margin:0 0 10px}
.drill-body{margin:0;font-family:inherit;font-size:.96rem;white-space:pre-wrap;
  word-break:break-word;overflow:auto;max-height:60vh;padding:12px 14px;
  background:#f6f8f7;border-radius:8px;line-height:1.5}

/* ===== Auto-Save-Block: Status + "Zuletzt geprueft" untereinander ===== */
.auto-save-block{display:flex;flex-direction:column;align-items:flex-end;
  gap:2px;line-height:1.3}
.auto-save-block .auto-save-status{order:1}
.auto-save-block .last-save-info{order:2;font-size:.82rem;opacity:.85}
.auto-save-block .last-save-info:empty{display:none}
@media (max-width:600px){
  .auto-save-block{align-items:flex-start}
}

/* ===== Skip-Warnung (X_AC-Eintraege ohne PLZ) ===== */
.alert.alert-warn{background:#fff7e6;border:1px solid #f6c46b;color:#5a3a00}
.alert.alert-warn .skip-list{margin:8px 0 0;padding-left:20px;
  max-height:200px;overflow:auto}
.alert.alert-warn .skip-list li{margin:2px 0;line-height:1.4}

/* Native Spinner-Pfeile bei <input type=number> ausblenden - sie sehen
 * je nach Browser unterschiedlich aus und koennen im Sperrbildschirm-
 * Konfigurationsfeld faelschlich wie ein "Timer" wirken. */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}