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

/* =====================================================================
   ONE Onboarding - Theme nach ONE Design Guide v1.3.1
   Kante statt Rundung, Linie statt Schatten, Ruhe vor Farbe,
   Monospace als Marke, Raum wirken lassen.

   Aufbau nach MIGRATION.md Schritt 2: Die Werte des Guides stehen oben,
   darunter liegt eine Aliasschicht, die alle gewachsenen Variablennamen
   dieser Anwendung auf die neuen Werte legt. Dadurch erbt der gesamte
   bestehende Code das neue Bild, ohne dass jede Regel angefasst wird.

   Vorgabe ist hell. Die Werte unter :root gelten fuer das dunkle Bild
   und werden von html[data-theme="light"] ueberschrieben.
   ===================================================================== */
:root,
:root[data-theme="dark"],
html[data-theme="dark"],
[data-theme="dark"]{
  /* ---- Marke ---- */
  --one-primary:        #17ac6c;
  --one-primary-rgb:    23,172,108;
  --one-primary-hover:  #1fc97c;
  --one-accent:         #8fd9ac;
  --one-soft:           #c9e8d4;
  --one-tint-08: rgba(143,217,172,.07);
  --one-tint-10: rgba(143,217,172,.10);
  --one-tint-15: rgba(143,217,172,.15);
  --one-tint-20: rgba(143,217,172,.22);

  /* ---- Flaechen ----
     Alles, was den Seitenfluss verlaesst, braucht eine deckende Flaeche.
     Siehe MIGRATION.md Fallen 1 bis 3. */
  --bg-page:        #0a100e;
  --bg-page-2:      #0d1512;
  --bg-card:        #101917;
  --bg-card-solid:  #101917;
  --bg-card-glass:  rgba(255,255,255,.028);
  --bg-glass:       rgba(8,13,11,.86);
  --bg-elev:        rgba(255,255,255,.05);
  --bg-input:       rgba(255,255,255,.035);
  --bg-input-solid: #16211d;
  --bg-float:       #16211d;
  --bg-table-stripe:rgba(255,255,255,.022);

  --border-subtle:  rgba(210,235,222,.13);
  --border-strong:  rgba(210,235,222,.26);
  --edge-light:     rgba(255,255,255,.07);
  --grid-line:      rgba(210,235,222,.055);

  --text-primary:   #eef4f1;
  --text-secondary: #a3b3ad;
  --text-muted:     #7e8f89;
  --text-inverse:   #0d2019;
  --link:           #8fd9ac;

  /* ---- Signalfarben: je Zustand Text, Flaeche, Rahmen, Marker ---- */
  --success:        #8fd9ac;
  --success-bg:     rgba(143,217,172,.12);
  --success-border: rgba(143,217,172,.42);
  --success-dot:    #6fcf97;

  --warning:        #e8c07a;
  --warning-bg:     rgba(232,192,122,.14);
  --warning-border: rgba(232,192,122,.45);
  --warning-dot:    #e0aa4f;

  --error:          #ef8a8a;
  --error-bg:       rgba(239,138,138,.12);
  --error-border:   rgba(239,138,138,.42);
  --error-dot:      #e06a6a;

  --info:           #7fc7d9;
  --info-bg:        rgba(127,199,217,.12);
  --info-border:    rgba(127,199,217,.42);
  --info-dot:       #5fb4c9;

  --neutral:        #a3b3ad;
  --neutral-bg:     rgba(163,179,173,.10);
  --neutral-border: rgba(163,179,173,.32);
  --neutral-dot:    #8b9a95;

  --data-1:#8fd9ac; --data-2:#e8c07a; --data-3:#7fc7d9; --data-4:#e0a0b0;
  --data-5:#a8d98f; --data-6:#d9b37f; --data-7:#8fd9c7; --data-8:#c0a8d9;

  /* ---- Scharfe Kanten sind das zentrale Formmerkmal ---- */
  --radius-sm: 0px;
  --radius:    0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;

  /* ---- Linie statt Schatten. --shadow-lg bleibt fuer echte
         Ueberlagerungen wie Dialoge. ---- */
  --shadow-sm: none;
  --shadow:    none;
  --shadow-lg: 0 24px 60px rgba(0,0,0,.45);
  --shadow-glow: none;

  /* Der Fokusring ist Bedienbarkeit, kein Schmuck, und bleibt erhalten. */
  --focus-ring: 0 0 0 2px var(--one-tint-15);

  --header-h: 62px;
  --ease: cubic-bezier(.32,.72,0,1);
  --mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: Roboto, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --tracking-label: .13em;

  /* =================================================================
     Aliasschicht: gewachsene Namen dieser Anwendung zeigen auf die
     neuen Werte. Aliase mit var() werden erst bei der Verwendung
     aufgeloest und gelten dadurch in beiden Bildern korrekt.
     ================================================================= */
  --accent:        var(--one-primary);
  --accent-strong: var(--one-primary-hover);
  --accent-bright: var(--one-accent);
  --accent-rgb:    23,172,108;
  --error-rgb:     239,138,138;
  --warning-rgb:   232,192,122;
  --success-rgb:   143,217,172;
  --knob:          #ffffff;
  --sig-surface:   #ffffff;
  --accent-soft:   var(--one-tint-10);
  --accent-glow:   var(--one-tint-20);
  --danger:        var(--error);

  --one-primary-tint-10: var(--one-tint-10);
  --one-primary-tint-20: var(--one-tint-20);
  --one-primary-tint-30: var(--one-tint-20);
  --one-primary-shadow:  none;

  --bg-0: var(--bg-page);
  --bg-1: var(--bg-page);
  --bg-2: var(--bg-card-solid);
  --bg-3: var(--bg-elev);
  /* Falle 4: Der Koerper bekommt die Flaeche, nicht den Verlauf. */
  --bg-page-grad: var(--bg-page);

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

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

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

  --glow: none;

  /* Diese vier Namen wurden im gewachsenen Stylesheet verwendet, waren
     aber nie definiert. Die betroffenen Elemente standen dadurch ohne
     Flaeche beziehungsweise ohne Textfarbe da. Jetzt zugeordnet. */
  --surface:      var(--bg-card-solid);
  --surface-soft: var(--bg-elev);
  --text-soft:    var(--text-secondary);
  --bg-muted:     var(--neutral-dot);

  --font-sans: var(--sans);
  --fs-display: clamp(24px, 1.9vw + 14px, 34px);
  --fs-xl:      clamp(19px, 1.0vw + 15px, 24px);

  --blur-glass: blur(16px) saturate(140%);
  --logo1: #fff;
}

/* Farbschema an das Bild koppeln. Ohne diese Angabe zeichnet der Browser
   Auswahllisten im Systemmodus, im dunklen Bild also hell mit hellem
   Text. Ergebnis: unlesbar. Siehe MIGRATION.md Falle 1. */
:root,html[data-theme="dark"]{ color-scheme: dark; }
html[data-theme="light"]{ color-scheme: light; }

/* =====================================================================
   Helles Bild - die Vorgabe
   ===================================================================== */
:root[data-theme="light"],
html[data-theme="light"],
[data-theme="light"]{
  --one-primary:        #17ac6c;
  --one-primary-rgb:    23,172,108;
  --one-primary-hover:  #1fc97c;
  --one-accent:         #2f7d63;
  --one-soft:           #cfe8d8;
  --one-tint-08: rgba(23,172,108,.06);
  --one-tint-10: rgba(23,172,108,.09);
  --one-tint-15: rgba(23,172,108,.13);
  --one-tint-20: rgba(23,172,108,.20);

  --bg-page:        #f7f7f4;
  --bg-page-2:      #f2f2ee;
  --bg-card:        #ffffff;
  --bg-card-solid:  #ffffff;
  --bg-card-glass:  #ffffff;
  --bg-glass:       rgba(255,255,255,.92);
  --bg-elev:        #f4f4f0;
  --bg-input:       #ffffff;
  --bg-input-solid: #ffffff;
  --bg-float:       #ffffff;
  --bg-table-stripe:#fafaf7;

  --border-subtle:  rgba(26,51,41,.13);
  --border-strong:  rgba(26,51,41,.28);
  --edge-light:     rgba(255,255,255,.9);
  --grid-line:      rgba(26,51,41,.055);

  --text-primary:   #1e3b31;
  --text-secondary: #4a615a;
  --text-muted:     #5c716a;
  --text-inverse:   #ffffff;
  --link:           #17795a;

  --success:        #17795a;
  --success-bg:     #e7f2ec;
  --success-border: #9ccbb5;
  --success-dot:    #17ac6c;

  --warning:        #8a6520;
  --warning-bg:     #fdf3d0;
  --warning-border: #e0b83c;
  --warning-dot:    #d99e12;

  --error:          #b5495a;
  --error-bg:       #fbeaec;
  --error-border:   #e0a3ad;
  --error-dot:      #c2273a;

  --info:           #1f6d80;
  --info-bg:        #e6f2f5;
  --info-border:    #9cc6d1;
  --info-dot:       #2b8ba3;

  --neutral:        #4a615a;
  --neutral-bg:     #f0f2f1;
  --neutral-border: #c8d2ce;
  --neutral-dot:    #6d827a;

  --data-1:#17ac6c; --data-2:#d99e12; --data-3:#2b8ba3; --data-4:#c2607a;
  --data-5:#5a9e3a; --data-6:#b07d2a; --data-7:#199e86; --data-8:#7a5fa8;

  --shadow-lg: 0 20px 50px rgba(20,45,36,.10);

  --error-rgb:   181,73,90;
  --warning-rgb: 138,101,32;
  --success-rgb: 23,121,90;

  --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(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-primary);
  /* Falle 4: Flaeche statt Verlauf, sonst verliert die Seite ihren Grund. */
  background-color: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height:100vh; display:flex; flex-direction:column;
}
/* Aurora nur im dunklen Bild */
html[data-theme="dark"] body{
  background-image:
    radial-gradient(1400px 700px at 78% -8%,  rgba(28,120,104,.42), transparent 62%),
    radial-gradient(1000px 620px at 6% 14%,   rgba(18,62,58,.40),  transparent 58%),
    radial-gradient(1500px 760px at 62% 104%, rgba(214,150,110,.16), transparent 60%);
  background-repeat:no-repeat; background-attachment:fixed;
}
/* Feines Raster in beiden Bildern, faengt keine Klicks ab */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:56px 56px;
}
main,header,footer{position:relative;z-index:1}
main{flex:1}
code{
  font-family: 'SF Mono', Consolas, 'Liberation Mono', monospace;
  font-size: .9em;
  background: var(--bg-elev);
  padding: .1em .35em;
  border-radius:0;
  color: var(--accent-strong);
}
em{ font-style: normal; }
.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}
.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:0;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:0;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:0;
  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:0;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)}
tr.open td{background:var(--one-primary-tint-10)}
.userform .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.userform label.span2{grid-column:span 2}
.userform .actions{margin-top:16px}

/* ===== Buttons (Fiori-Style) ===== */
/* Schaltflaechen nach Guide: Monospace, Versalien, gesperrt, scharfe
   Kante, ruhige Akzentflaeche mit dunkler Schrift. Die Regel gilt
   ausdruecklich auch fuer Verweise, die als Schaltflaeche auftreten,
   sonst stehen sie nebeneinander unterschiedlich hoch (Falle 5). */
button{
  cursor:pointer;border:1px solid var(--one-soft);border-radius:0;
  padding:11px 18px;font-family:var(--mono);font-size:.76rem;font-weight:500;
  line-height:1;text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-inverse);background:var(--one-soft);
  box-shadow:none;text-decoration:none;
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease);
  display:inline-flex;align-items:center;justify-content:center;gap:8px}
button:hover{background:var(--one-primary-hover);border-color:var(--one-primary-hover);
  filter:none;box-shadow:none}
/* Der Fokusring ist Bedienbarkeit und bleibt sichtbar. */
button:focus-visible{outline:none;box-shadow:var(--focus-ring)}
button.danger{
  background: var(--bg-card); color: var(--error); border-color:var(--error-border);
  box-shadow:none}
button.danger:hover{background:var(--error-bg);border-color:var(--error);filter:none}
[data-theme="dark"] button.danger{border-color:rgba(var(--error-rgb),.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(var(--error-rgb),.4)}

.alert{background:var(--error-bg);border:1px solid rgba(var(--error-rgb),.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(var(--error-rgb),.4);color:var(--error)}
.ok{background:var(--success-bg);border:1px solid rgba(var(--success-rgb),.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) ===== */
/* =====================================================================
   Kopfzeile nach HEADER-FOOTER.md, eins zu eins wie im ONE SSO Hub.
   Sie ist die einzige Flaeche, die in BEIDEN Ansichten dunkel bleibt.
   ===================================================================== */
.shell-header{
  position:sticky; top:0; z-index:1000; height:var(--header-h);
  background:var(--bg-glass);
  backdrop-filter:saturate(1.4) blur(16px);
  -webkit-backdrop-filter:saturate(1.4) blur(16px);
  border-bottom:1px solid var(--border-subtle);
  /* Grundfarbe zentral setzen, damit jedes Kind ohne eigene Farbe die
     helle Schrift erbt. Ohne diese Zeile verschwindet der Namenszug auf
     dem dunklen Balken, siehe MIGRATION.md Falle 9. */
  color:var(--text-primary);
}
/* Im hellen Bild ausdruecklich dunkle Flaeche und helle Schrift. */
:root:not([data-theme="dark"]) .shell-header,
html[data-theme="light"] .shell-header{
  background:#101917; border-bottom-color:transparent; color:#e8f0ec;
}
/* Volle Breite, keine Begrenzung. Nichts darf umbrechen, sonst waechst
   die Kopfzeile in die Hoehe, siehe Falle 10. */
.shell-header-inner{
  width:100%; height:100%;
  display:flex; align-items:center; flex-wrap:nowrap; gap:1.25rem;
  padding:0 1.5rem; min-width:0;
}
.shell-header .spacer{flex:1 1 auto;min-width:0}

/* Fest: Marke, Aktionsbereich, Umschalter, Benutzermenue */
.shell-header .brand,
.shell-header .header-actions,
.shell-header .theme-toggle,
.shell-header .user-menu{flex:none;white-space:nowrap}

.shell-header .brand{
  display:flex; align-items:center; gap:.65rem;
  font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  font-size:15px; color:inherit; text-decoration:none;
}
.shell-header .brand:hover{text-decoration:none}
.brand-logo{height:26px;width:auto;display:block;flex:none}

/* Nachgiebig ist nur die Navigation, und zwar durch waagerechtes
   Schieben statt durch Umbrechen. */
.shell-header .nav{
  display:flex; gap:.25rem; flex:0 1 auto; min-width:0;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
}
.shell-header .nav::-webkit-scrollbar{display:none}
.shell-header .nav a{
  padding:.55rem .9rem; min-height:38px; display:inline-flex; align-items:center;
  flex:none; white-space:nowrap; border:none;
  border-radius:0; font-weight:400; font-size:.92rem; color:var(--text-secondary);
  text-decoration:none; transition:background .15s,color .15s;
}
.shell-header .nav a:hover{color:var(--text-primary);background:var(--bg-elev);text-decoration:none}
/* Aktiver Punkt: Unterstrich aus einem inneren Kastenschatten, kein
   Rahmen, damit die Hoehe nicht springt. */
.shell-header .nav a.active{
  color:var(--one-accent); background:var(--one-tint-10);
  box-shadow:inset 0 -2px 0 var(--one-accent);
}
:root:not([data-theme="dark"]) .shell-header .nav a{color:#b9c9c2}
:root:not([data-theme="dark"]) .shell-header .nav a:hover{background:rgba(255,255,255,.09);color:#fff}
:root:not([data-theme="dark"]) .shell-header .nav a.active{color:#a8e0bf;background:rgba(143,217,172,.14)}

.header-actions{display:flex;align-items:center;gap:.75rem;flex:none}

/* Benutzermenue: Kuerzel, Namenszug, Abmeldeknopf */
.user-menu{
  display:flex; align-items:center; gap:.65rem; flex:none; white-space:nowrap;
  padding:.3rem .3rem .3rem .85rem;
  border:1px solid var(--border-subtle); border-radius:0; background:var(--bg-elev);
}
:root:not([data-theme="dark"]) .shell-header .user-menu{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16)}
/* Der Namenszug erbt die helle Kopfzeilenfarbe, nie --text-primary. */
.user-menu .name{
  font-weight:500; font-size:.9rem; color:inherit; text-decoration:none;
  white-space:nowrap; flex:none; display:inline-flex; align-items:center;
}
.user-menu .name:hover{text-decoration:underline}
.user-menu .avatar{
  width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:0;
  background:var(--one-soft); color:#0d2019; border:none;
  font-family:var(--mono); font-weight:500; font-size:.72rem; letter-spacing:.04em;
}
.user-menu .logout-btn{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  background:transparent; border:none; cursor:pointer;
  padding:.4rem .7rem; min-height:34px; border-radius:0;
  color:var(--text-secondary); box-shadow:none;
}
.user-menu .logout-btn:hover{color:var(--one-accent);background:transparent}
:root:not([data-theme="dark"]) .shell-header .user-menu .logout-btn{color:#b9c9c2}
.admin-badge{
  display:inline-block; margin-left:.35rem; padding:.2em .55em; white-space:nowrap;
  background:var(--one-soft); color:#0d2019; border-radius:0;
  font-family:var(--mono); font-size:.65rem; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase;
}

main{max-width:1280px;margin:0 auto;padding:28px 20px 60px;width:100%}

/* ===== Modusumschalter: 40 mal 40, beide Sinnbilder uebereinander ===== */
.theme-toggle{
  width:40px; height:40px; flex:none; display:grid; place-items:center; padding:0;
  border:1px solid var(--border-strong); border-radius:0;
  background:transparent; color:var(--text-secondary); cursor:pointer;
  box-shadow:none; transition:color .15s,border-color .15s,background .15s;
}
.theme-toggle:hover{
  color:var(--one-accent); border-color:var(--one-accent);
  background:var(--one-tint-10); filter:none; transform:none;
}
:root:not([data-theme="dark"]) .shell-header .theme-toggle{
  border-color:rgba(255,255,255,.22); color:#cfded7}
.theme-toggle svg{width:18px;height:18px;display:block}
/* In heller Ansicht der Mond, weil er zur dunklen Ansicht fuehrt. */
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}
html[data-theme="dark"] .theme-toggle .icon-sun{display:block}
html[data-theme="dark"] .theme-toggle .icon-moon{display:none}
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:none}

/* ===== 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:0;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:var(--text-inverse);font-weight:600;border-color:transparent;
  background:linear-gradient(135deg,var(--one-primary),var(--one-primary-hover));
  box-shadow:none}

/* ===== 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 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}

/* ===== 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)}
.muted{color:var(--muted)}.small{font-size:13px}
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:none}
.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:var(--knob)}
.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}
.graph{margin-top:22px;border:1px solid var(--stroke);border-radius:var(--radius-md);
  padding:16px 16px 10px;background:var(--card)}
svg.chart .cg{stroke:var(--stroke)}
svg.chart .cl{fill:var(--muted);font-size:11px;font-family:var(--font-sans)}
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}
.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)}
.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:0;display:inline-block}
.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)}

.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:0;
  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:0;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}

body.layout-wide .panel{max-width:none}
.pruef-kw-form .kw-pick .lbl{color:var(--muted)}
.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(var(--error-rgb),.45);
  background:rgba(var(--error-rgb),.08)}

/* ===== EV-Zusatz-Kachel ganz rechts (DC Mat. / AC Mat. / DC Plan.)
 * Optisch klar abgesetzt vom Rest der Tabelle - eigene Akzent-Border
 * links und leichter Tint-Hintergrund, damit die drei Spalten wie
 * eine eigene Kachel innerhalb der Tabelle wirken. Hover-/Reihen-
 * Hintergrund wird in den Extra-Zellen unterdrueckt, damit der
 * Kachel-Tint nicht durch andere Farben gestoert wird. */
.pruef-table.has-extra .c-extra{
  width:3.2%; text-align:center;
  background: rgba(var(--accent-rgb), .08);
}
.pruef-table.has-extra th.c-extra{
  background: rgba(var(--accent-rgb), .14);
  color: var(--accent-strong);
}
.pruef-table.has-extra .c-extra-first{
  border-left: 3px double rgba(var(--accent-rgb), .55);
  padding-left: 8px;
}
.pruef-table.has-extra .c-extra-last{
  padding-right: 8px;
}
/* Beim Hover des Auftrags bleibt die Extra-Kachel ihre eigene Farbe. */
.pruef-table.has-extra tbody tr:hover .c-extra{
  background: rgba(var(--accent-rgb), .12);
}
.pruef-table.has-extra .pruef-row.is-rekla .c-extra,
.pruef-table.has-extra .pruef-row.is-rekla:hover .c-extra,
.pruef-table.has-extra .pruef-row.is-follow .c-extra,
.pruef-table.has-extra .pruef-row.is-follow:hover .c-extra{
  background: rgba(var(--accent-rgb), .10);
}
.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}
.modal-backdrop.is-open{display:flex}
@keyframes modal-fade-in{from{opacity:0}to{opacity:1}}
@keyframes modal-slide-in{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-head h2 .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);
  box-shadow:none;flex-shrink:0}
.instr-mail .addr{display:inline-block;color:var(--muted);width:62px}

/* 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:0;
  font-size:12px;font-family:inherit;
  transition:border-color .15s,background-color .15s}
.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}

[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 */

/* 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>")}
.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:0;background:var(--accent-soft);
  color:var(--accent-strong);vertical-align:middle}
.role-cfg-panels .check-row{font-size:12.5px;padding:4px 0}

.check-row{display:flex;align-items:center;gap:10px;padding:9px 12px;
  background:var(--card);border:1px solid var(--stroke);
  border-radius:0;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-num .muted{font-weight:500;font-size:14px}

/* ===== Karten-Grids (Kennzahlen GF) ===== */
.cards-6{grid-template-columns:repeat(3,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(var(--error-rgb),.45)}
.card.dz-warn b{color:var(--error)}
.card.dz-warn::after{background:var(--error)}

@media(max-width:760px){
  .cards{grid-template-columns:repeat(2,1fr)}.card.wide{grid-column:span 2}
  .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}
}

/* Auf schmaleren Bildschirmen mehr Zeilenraum statt Spaltenraum.
 * <= 1100 px: Datum kompakter (Wochentag ueber Datum, statt nebeneinander) */

/* <= 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. */

table.termine-grouped tbody tr.is-paid .muted{color:rgba(var(--warning-rgb),.75) !important}

/* 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(var(--error-rgb),.12);
  color:var(--error)}
table.termine-grouped tbody tr.is-warn-red:hover td{
  background:rgba(var(--error-rgb),.20)}
table.termine-grouped tbody tr.is-warn-red .lead-link{
  color:var(--error);border-bottom-color:rgba(var(--error-rgb),.5)}
table.termine-grouped tbody tr.is-warn-red .lead-link:hover{
  color:var(--error);border-bottom-color:var(--error)}
table.termine-grouped tbody tr.is-warn-red b{color:var(--error)}
table.termine-grouped tbody tr.is-warn-red .muted{
  color:rgba(var(--error-rgb),.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(var(--error-rgb),.12);color:var(--error)}

/* ===== 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);
}


/* 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}

/* ===== Skip-Warnung (X_AC-Eintraege ohne PLZ) ===== */
.alert.alert-warn{background:var(--warning-bg);border:1px solid var(--warning-border);color:var(--warning)}
.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}

/* ====================================================================
 * Read-Only-Modus (gesetzt via <html data-readonly="1"> aus page_top).
 *
 * Greift global: alle Submit-Buttons werden disabled, Form-Inputs
 * read-only und visuell ausgegraut. Damit sieht der Read-Only-User
 * sofort, was er nicht aendern kann - statt erst auf den 403-Fehler
 * vom require_writable() zu laufen.
 *
 * Ausnahme: GET-Navigation (ghost-Buttons mit <a>-Tag, Dropdowns die
 * nur die Ansicht filtern wie KW-Picker) bleiben funktionsfaehig.
 * ================================================================ */

html[data-readonly] form button[type="submit"],
html[data-readonly] form input[type="submit"] {
    opacity: 0.45;
    cursor: not-allowed !important;
    pointer-events: none;
}

html[data-readonly] form input[type="text"]:not([readonly]),
html[data-readonly] form input[type="number"]:not([readonly]),
html[data-readonly] form input[type="email"]:not([readonly]),
html[data-readonly] form textarea:not([readonly]) {
    background: rgba(255,255,255,0.02) !important;
    color: var(--muted) !important;
    cursor: not-allowed;
}

html[data-readonly] form input[type="checkbox"],
html[data-readonly] form input[type="radio"] {
    pointer-events: none;
    opacity: 0.55;
    cursor: not-allowed;
}

/* Datenschutz-Disclaimer MUSS auch fuer Read-Only-User klickbar
 * bleiben - sonst kommt der GF-User beim Erst-Login nie ins Tool
 * rein. Die Disclaimer-Akzeptanz ist kein "Daten speichern" im
 * Tool-Sinn, sondern eine reine Hub-Markierung. Auch im Server-
 * Handler ist deshalb KEIN require_writable() eingebaut. */
html[data-readonly] form.disc-actions button[type="submit"] {
    opacity: 1 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* =====================================================================
 *  ONE Onboarding - Komponenten (auf Basis des Fiori-Horizon-Themes)
 *  Light + Dark erben automatisch über die Tokens oben.
 * ===================================================================== */

/* ---- Content-Panels: .card als Panel nutzen (KPI-Deko neutralisieren) ---- */
.card{
  position:relative; overflow:visible; text-align:left;
  background:var(--bg-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); padding:clamp(18px,2.2vw,26px);
  margin-bottom:20px; box-shadow:var(--shadow); transition:none;
}
.card::after{ content:none !important; }
.card:hover{ transform:none; box-shadow:var(--shadow); border-color:var(--border-subtle); }
.card-title{
  font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--one-primary); margin-bottom:16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.card-title.small{ font-size:12px; text-transform:none; letter-spacing:0; }

/* Begrüßungs-Panel (Portal, ganz oben) */
.welcome-panel{ background:linear-gradient(135deg,var(--one-primary-tint-10),transparent 70%),var(--bg-card);
  border-color:rgba(var(--accent-rgb),.30); }
.welcome-panel .card-title{ color:var(--one-primary); }

/* ---- Buttons (.btn-Familie auf Fiori abbilden) ---- */
.btn,a.btn,button.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; border:1px solid var(--one-soft); border-radius:0;
  padding:11px 18px; font-family:var(--mono); font-size:.76rem; font-weight:500;
  line-height:1; text-transform:uppercase; letter-spacing:.1em; text-decoration:none;
  color:var(--text-inverse); background:var(--one-soft);
  box-shadow:none;
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease);
}
.btn:hover,a.btn:hover,button.btn:hover{
  background:var(--one-primary-hover); border-color:var(--one-primary-hover);
  filter:none; box-shadow:none; color:var(--text-inverse); text-decoration:none; }
.btn:focus-visible,a.btn:focus-visible,button.btn:focus-visible{
  outline:none; box-shadow:var(--focus-ring); }
.btn-primary{ background:var(--one-soft); border-color:var(--one-soft); color:var(--text-inverse); }
.btn-ghost,a.btn-ghost,button.btn-ghost{
  background:var(--bg-card); color:var(--text-secondary);
  border:1px solid var(--border-subtle); box-shadow:none; font-weight:500;
}
.btn-ghost:hover,a.btn-ghost:hover,button.btn-ghost:hover{
  background:var(--one-primary-tint-10); color:var(--one-primary); border-color:var(--one-primary); filter:none;
}
.btn-sm{ padding:.4rem .8rem; font-size:.8rem; }
.btn-lg{ padding:.8rem 1.5rem; font-size:1rem; }
.btn.danger,.btn-ghost.danger{ background:var(--bg-card); color:var(--error); border-color:rgba(var(--error-rgb),.4); box-shadow:none; }
.btn.danger:hover,.btn-ghost.danger:hover{ background:var(--error-bg); border-color:var(--error); color:var(--error); filter:none; }
.btn[disabled],.btn:disabled{ opacity:1; cursor:not-allowed; filter:none; box-shadow:none;
  background:transparent !important; border-color:var(--border-subtle) !important;
  color:var(--text-muted) !important; }
.btn-ghost[disabled],.btn-ghost:disabled{ background:transparent !important; color:var(--text-muted) !important; border-color:var(--border-subtle) !important; }
.portal-locked .card:not(.submit-card){ opacity:.75; }
.portal-locked input:disabled,.portal-locked select:disabled,.portal-locked textarea:disabled{ cursor:not-allowed; }
.iconbtn{ background:none; border:none; cursor:pointer; font-size:18px; line-height:1; color:var(--text-muted); padding:2px 6px; box-shadow:none; }
.iconbtn:hover{ color:var(--error); filter:none; }
.iconbtn.danger{ color:var(--error); }
.inline{ display:inline; }

/* ---- Flash-Meldungen ---- */
.flash{ padding:11px 14px; border-radius:var(--radius-sm); font-size:14px; margin-bottom:16px; border:1px solid transparent; }
.flash.small{ font-size:13px; }
.flash ul{ margin:6px 0 0 18px; }
.flash-ok{ background:var(--success-bg); color:var(--success); border-color:rgba(var(--success-rgb),.35); }
.flash-err{ background:var(--error-bg); color:var(--error); border-color:rgba(var(--error-rgb),.35); }
.flash-warn{ background:var(--warning-bg); color:var(--warning); border-color:rgba(180,83,9,.35); }
[data-theme="dark"] .flash-ok{ color:var(--success); }

/* ---- Formulare ---- */
.form-group{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.form-group > label{ font-size:13px; color:var(--text-secondary); font-weight:500; }
.form-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.form-actions{ display:flex; align-items:center; gap:14px; margin-top:18px; flex-wrap:wrap; }
.req{ color:var(--error); }
.fhint{ font-size:12px; color:var(--text-muted); }
fieldset.sec{ border:1px solid var(--border-subtle); border-radius:var(--radius); padding:14px 16px 4px; margin:0 0 16px; }
fieldset.sec legend{ padding:0 8px; font-weight:700; color:var(--text-primary); font-size:13px; }
.radio-row{ display:flex; flex-wrap:wrap; gap:8px 18px; padding-top:2px; }
.radio{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-weight:400; font-size:14px; }
.checkline{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:14px; }

/* Composite-Zeilen */
.composite .comp-rows{ display:flex; flex-direction:column; gap:8px; }
.comp-row{ display:flex; gap:8px; align-items:end; flex-wrap:wrap; }
.comp-cell{ display:flex; flex-direction:column; flex:1 1 140px; font-size:12px; color:var(--text-secondary); gap:3px; }
.comp-del{ flex:0 0 auto; }

/* ---- Uploads ---- */
.upload-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.upload-tile{ border:1px dashed var(--border-strong); border-radius:var(--radius); padding:14px; background:var(--bg-elev); display:flex; flex-direction:column; }
.upload-tile.req{ border-color:var(--warning); }
.upload-tile.done{ border-style:solid; border-color:var(--one-primary); background:var(--one-primary-tint-10); }
.ut-label{ font-weight:600; font-size:13px; }
.ut-label .pflicht{ color:var(--warning); font-weight:600; font-size:11px; }
.ut-sub{ font-size:11px; line-height:1.4; min-height:16px; margin:2px 0 10px; }
.ut-sub .opt{ color:var(--text-muted); font-weight:500; }
.upload-tile form{ margin-top:auto; display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.upload-tile form input[type="file"]{ width:100%; }
.ut-file{ font-size:15px; font-weight:600; margin-bottom:8px; word-break:break-word; color:var(--text-primary); }
.ut-file .muted{ font-weight:400; }
.ut-actions{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.upload-tile form{ display:flex; flex-direction:column; gap:8px; }

/* ---- Verträge ---- */
.contract-row{ border:1px solid var(--border-subtle); border-radius:var(--radius); padding:14px; margin-bottom:12px; background:var(--bg-elev); }
.cr-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.cr-head strong{ flex:1 1 auto; }
.cr-open-hint{ font-size:12px; color:var(--warning); margin:6px 0; }
.cr-signed{ color:var(--one-primary); font-size:13px; font-weight:600; }
.sign-form{ background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius); padding:12px; margin-top:8px; }
.sign-form.locked{ opacity:.55; pointer-events:none; }

/* ---- Signatur-Pad ---- */
.sig-area{ margin:4px 0; }
.sig-pad{ width:100%; height:150px; background:var(--sig-surface); border:1px solid var(--border-strong); border-radius:var(--radius-sm); touch-action:none; display:block; cursor:crosshair; }
.sig-actions{ display:flex; gap:10px; align-items:center; margin-top:6px; }
.sig-meta{ margin:8px 0; }
.sig-meta label{ display:inline-flex; flex-direction:column; gap:4px; font-size:13px; color:var(--text-secondary); }
.guardian{ margin-top:14px; padding-top:12px; border-top:1px dashed var(--border-strong); }

/* ---- Diverses Portal ---- */
.public-body{ background:var(--bg-page-grad); min-height:100vh; }
.pub-wrap{ max-width:860px; margin:0 auto; padding:24px 16px 60px; }
.pub-wrap.narrow{ max-width:560px; }
/* Begruessung steht im Inhalt, nicht in der Kopfzeile. */
.pub-greet{ font-size:1.6rem; font-weight:700; margin:0 0 18px; }
.instr .steps{ margin:6px 0 0 18px; line-height:1.7; }
.submit-card{ border-color:rgba(var(--accent-rgb),.30); }
.big-check{ font-size:48px; color:var(--one-primary); text-align:center; }
.card.center{ text-align:center; }
.center h2{ margin:8px 0; justify-content:center; }
.center h1{ justify-content:center; text-align:center; }
.muted{ color:var(--text-secondary); }
.small{ font-size:12px; }

/* ---- Management-Shell ---- */
.mng-body{ background:var(--bg-page-grad); min-height:100vh; }
.tb-left{ display:flex; align-items:center; gap:10px; }
.tb-logo{ height:28px; }
.tb-logo-txt{ font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--text-primary); }
.tb-title{ font-weight:700; color:var(--text-secondary); }
.tb-nav{ display:flex; gap:4px; flex-wrap:wrap; }
.tb-nav a{ padding:7px 13px; border-radius:var(--radius-sm); color:var(--text-secondary); text-decoration:none; font-size:14px; border:1px solid transparent; }
.tb-nav a:hover{ background:var(--one-primary-tint-10); color:var(--text-primary); }
.tb-nav a.active{ background:var(--one-primary-tint-10); color:var(--one-primary); font-weight:600; border-color:rgba(var(--accent-rgb),.35); }
.tb-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.tb-user{ font-size:13px; color:var(--text-secondary); text-align:right; }
.tb-user em{ font-style:normal; display:block; font-size:11px; color:var(--text-muted); }
.mng-main{ max-width:1180px; margin:0 auto; padding:clamp(18px,3vw,30px) clamp(14px,3vw,22px) 60px; }
.page-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.head-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.def-table{ width:100%; border-collapse:collapse; font-size:.9rem; }
.def-table th,.def-table td{ padding:.5rem .6rem; border-bottom:1px solid var(--border-subtle); text-align:left; }
.def-table th:nth-child(2),.def-table th:nth-child(3),.def-table td.center{ text-align:center; width:120px; }
.def-table input[type=checkbox]{ width:18px; height:18px; cursor:pointer; }
.page-head h1{ font-size:22px; margin:0; display:flex; align-items:center; gap:12px; }
.back{ color:var(--link); text-decoration:none; font-size:13px; }
.collapsible{ display:none; }
.collapsible.open{ display:block; }
.form-group.end{ display:flex; align-items:flex-end; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.col{ display:flex; flex-direction:column; gap:0; }
@media (max-width:880px){ .grid-2{ grid-template-columns:1fr; } }

/* ---- Tabellen ---- */
.tbl{ width:100%; border-collapse:collapse; }
.tbl th,.tbl td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--border-subtle); font-size:14px; vertical-align:middle; }
.tbl th{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); }
.tbl tr:hover td{ background:var(--bg-table-stripe); }
.lnk{ color:var(--link); text-decoration:none; font-weight:500; }
.lnk:hover{ text-decoration:underline; }

.doclist{ list-style:none; margin:0; padding:0; }
.doclist li{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 0; border-bottom:1px solid var(--border-subtle); font-size:14px; }
.doclist li:last-child{ border-bottom:none; }
.doclist li > span:first-child{ flex:1 1 auto; }
.ok-tag{ color:var(--one-primary); font-size:12px; font-weight:700; }
.wait-tag{ color:var(--warning); font-size:12px; }
.linkbox{ display:flex; gap:8px; }
.linkbox input{ font-family:ui-monospace,monospace; font-size:12px; }
.tabbar{ display:flex; flex-wrap:wrap; gap:6px; align-items:flex-end; margin:0 0 18px; border-bottom:1px solid var(--border-subtle); }
.tabbar .tab{ display:inline-block; padding:.55rem 1rem; border:1px solid var(--border-subtle); border-bottom:none;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0; background:var(--bg-elev); color:var(--text-soft);
  text-decoration:none; font-size:.9rem; font-weight:600; margin-bottom:-1px; cursor:pointer; }
.tabbar a.tab:hover{ color:var(--text); }
.tabbar .tab.active{ background:var(--bg-card); color:var(--one-primary); border-bottom:1px solid var(--bg-card); }
.tabbar .tab-add{ margin:0; }
.tabbar button.tab.tab-plus{ background:transparent; border-style:dashed; color:var(--one-primary); box-shadow:none; }
.tabbar button.tab.tab-plus:hover{ background:var(--one-primary-tint-10); }
.contract-add{ display:flex; flex-direction:column; align-items:stretch; gap:10px; margin-top:10px; }
.contract-add .form-group{ width:100%; margin:0; }
.contract-add input[type=text], .contract-add input[type=file]{ width:100%; }
.contract-add button{ align-self:flex-start; }
.reject-form{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.reject-form input{ flex:1 1 220px; }
.danger-zone{ margin-top:14px; }

.timeline{ list-style:none; margin:0; padding:0; font-size:13px; }
.timeline li{ padding:6px 0; border-bottom:1px dotted var(--border-subtle); }
.tl-ts{ color:var(--text-muted); font-size:12px; margin-right:6px; }
.timeline em{ font-style:normal; color:var(--text-secondary); }

/* ---- Status-Badges ---- */
.status-badge{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:4px 10px; border-radius:0; border:1px solid var(--border-subtle); white-space:nowrap; }
.status-badge.st-draft{ background:var(--bg-elev); color:var(--text-secondary); }
.status-badge.st-open{ background:var(--one-primary-tint-10); color:var(--one-primary); }
.status-badge.st-submitted{ background:var(--warning-bg); color:var(--warning); }
.status-badge.st-approved{ background:var(--one-primary-tint-10); color:var(--one-primary); }
.status-badge.st-signed{ background:var(--one-primary-tint-20); color:var(--one-primary); }
.status-badge.st-sent{ background:var(--success-bg); color:var(--success); }
.status-badge.st-rejected{ background:var(--error-bg); color:var(--error); }
[data-theme="dark"] .status-badge.st-sent{ color:var(--success); }

/* ---- Rollen-/Rechte-Editor ---- */
.perm-table{ width:100%; border-collapse:collapse; }
.perm-table th,.perm-table td{ padding:10px 12px; border-bottom:1px solid var(--border-subtle); font-size:13.5px; text-align:center; }
.perm-table th:first-child,.perm-table td:first-child{ text-align:left; }
.perm-table thead th{ font-size:12px; color:var(--text-secondary); font-weight:600; }
.perm-role{ font-weight:600; }
.perm-desc{ font-size:12px; color:var(--text-muted); }

/* ---- Settings: Speichern-Leiste vom Panel lösen ---- */
.settings-actions{ position:sticky; bottom:0; margin-top:8px; padding:16px 0 4px;
  display:flex; gap:12px; align-items:center; }
.smtp-test{ display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; margin-top:6px; }
.smtp-test .form-group{ margin-bottom:0; flex:1 1 240px; }

/* ---- Stepper (Portal-Fortschritt) ---- */
.stepper{ display:flex; flex-wrap:wrap; gap:10px; margin:2px 0 4px; }
.step{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-secondary); }
.step .num{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700;
  background:var(--bg-elev); color:var(--text-muted); border:1px solid var(--border-subtle); }
.step.done .num{ background:var(--one-soft); color:var(--text-inverse); border-color:var(--one-soft); }
.step.done{ color:var(--text-primary); }

.signin-help{ margin-top:16px; text-align:left; }
.signin-help summary{ cursor:pointer; font-size:13px; color:var(--link); }
.signin-help ul{ margin:6px 0 0 18px; }
.card.center code,.signin-help code{ background:var(--bg-elev); padding:1px 5px; border-radius:0; font-size:12px; }

/* Disclaimer über Unterschriftsfeldern */
.sign-disclaimer{ font-size:13px; color:var(--text-secondary); background:var(--one-primary-tint-10);
  border-left:3px solid var(--one-primary); padding:8px 12px; border-radius:var(--radius-sm); margin:0 0 10px; }

/* Live-Zähler offene AG-Pflichtfelder */
.ag-counter{ font-weight:700; }
.ag-counter.zero{ color:var(--one-primary); }
.ag-counter.open{ color:var(--warning); }

/* Vertragsvorlagen */
.tpl-cat{ margin-bottom:18px; }
.tpl-cat h3{ font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-secondary); margin:0 0 8px; }
.tpl-empty{ color:var(--text-muted); font-size:13px; }
.tpl-add{ display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; }
.tpl-add .form-group{ margin-bottom:0; }

/* Auto-Save-Statusanzeige */
.autosave-status{ font-size:12px; color:var(--text-muted); margin-left:6px; }
.autosave-status.ok{ color:var(--one-primary); }
.autosave-status.err{ color:var(--error); }
.autosave-status.saving,.autosave-status.pending{ color:var(--text-secondary); }

/* Vertragsvorlagen-Auswahl: kompakt, passt in die schmale Spalte */
.contract-pick{ display:flex; flex-direction:column; align-items:stretch; gap:8px; flex-wrap:nowrap; margin-bottom:10px; }
.contract-pick .form-group{ flex:0 0 auto; width:100%; margin:0; }
.contract-pick select{ flex:0 0 auto !important; width:100%; max-width:100%; height:auto; min-height:0; }
.contract-pick button{ align-self:flex-start; }

/* App-Footer mit Versionsnummer */
/* Fusszeile folgt dem Modus, eine Zeile, mittig, Version fett. */
.shell-footer{
  padding:2rem 1.5rem; text-align:center;
  border-top:1px solid var(--border-subtle); color:var(--text-muted);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.09em;
  text-transform:uppercase;
}
.shell-footer p{margin:0}
.shell-footer strong{color:var(--text-secondary);font-weight:500}

/* Benefits */
.benefit-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.benefit-row{ padding:8px 10px; border:1px solid var(--border-subtle); border-radius:var(--radius-sm); }
.benefit-row .checkline{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.benefit-type{ margin:8px 0 0 26px; }
.benefit-type input{ max-width:280px; }
.mini-tag{ font-size:11px; padding:1px 7px; border-radius:0; background:var(--one-primary-tint-10);
  color:var(--one-primary); border:1px solid var(--one-primary-tint-20); }
.benefit-row input[disabled] + *{ opacity:.5; }

/* SMTP-Test unter dem SMTP-Server-Block */
.smtp-test-wrap{ margin-top:16px; padding-top:14px; border-top:1px dashed var(--border-strong); }
.subhead{ font-weight:600; font-size:13px; margin-bottom:6px; color:var(--text-primary); }

/* Provisionsdaten-Bestätigung */
.prov-table{ width:100%; border-collapse:collapse; margin:6px 0 14px; }
.prov-table td{ padding:7px 10px; border-bottom:1px solid var(--border-subtle); font-size:14px; }
.prov-table td:first-child{ color:var(--text-secondary); }
.prov-table td:last-child{ text-align:right; }
.prov-confirm{ display:flex; gap:12px; flex-wrap:wrap; }
button.btn-confirm-ok{ background:var(--success-bg); border-color:var(--success-border); color:var(--success); box-shadow:none; }
button.btn-confirm-ok:hover{ filter:brightness(1.05); }
button.btn-confirm-no{ background:var(--error-bg); border-color:var(--error-border); color:var(--error); box-shadow:none; }
button.btn-confirm-no:hover{ filter:brightness(1.05); }
button.btn-confirm-ok.chosen, button.btn-confirm-no.chosen{ box-shadow:0 0 0 3px var(--one-primary-tint-20); font-weight:700; }
button.btn-confirm-ok.faded, button.btn-confirm-no.faded{ opacity:.18; }

/* Hilfe-Seite */
.help-steps{ margin:0; padding-left:22px; display:flex; flex-direction:column; gap:10px; }
.help-steps li{ line-height:1.5; }
.help-list{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px; }
.help-list li{ line-height:1.5; }


/* ---------------------------------------------------------------
   Guide-Bausteine: Abschnittsmarke, Signalmeldungen, Zustandsmarken
   --------------------------------------------------------------- */
.label{
  display:inline-block; padding:6px 12px; margin-bottom:12px;
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  text-transform:uppercase; letter-spacing:var(--tracking-label);
  color:var(--one-accent); background:var(--one-tint-10);
  border:1px solid var(--one-tint-20);
}
.signal{
  display:block; padding:12px 16px; margin:0 0 14px;
  border:1px solid var(--neutral-border); border-left-width:4px;
  background:var(--neutral-bg); color:var(--text-primary);
  font-size:.9rem; line-height:1.5;
}
.signal > strong{display:block;margin-bottom:3px}
.signal-success{background:var(--success-bg);border-color:var(--success-border);border-left-color:var(--success-dot)}
.signal-warning{background:var(--warning-bg);border-color:var(--warning-border);border-left-color:var(--warning-dot)}
.signal-error  {background:var(--error-bg);  border-color:var(--error-border);  border-left-color:var(--error-dot)}
.signal-info   {background:var(--info-bg);   border-color:var(--info-border);   border-left-color:var(--info-dot)}
.state{
  display:inline-flex; align-items:center; gap:6px; padding:3px 9px;
  font-family:var(--mono); font-size:.66rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.1em;
  border:1px solid var(--neutral-border); background:var(--neutral-bg); color:var(--neutral);
}
.state::before{content:"";width:6px;height:6px;background:currentColor;flex:0 0 auto}
.state-success{border-color:var(--success-border);background:var(--success-bg);color:var(--success)}
.state-warning{border-color:var(--warning-border);background:var(--warning-bg);color:var(--warning)}
.state-error  {border-color:var(--error-border);  background:var(--error-bg);  color:var(--error)}
.state-info   {border-color:var(--info-border);   background:var(--info-bg);   color:var(--info)}
/* Gemeinsame Unterkante statt Mitte (Falle 6) und fester Kartenkopf
   statt Umbruch (Falle 7). */
.row-baseline{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.field-group{display:flex;flex-direction:column;gap:5px}
.field-group > .field-label{
  font-family:var(--mono); font-size:.66rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.1em; line-height:1; color:var(--text-muted);
}
.card-head{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
/* Aufgeklappte Auswahlliste steht ausserhalb der Seite und braucht eine
   deckende Flaeche (Falle 1). */
select option,select optgroup{
  background-color:var(--bg-input-solid); color:var(--text-primary);
}
select optgroup{font-style:normal;font-weight:600;color:var(--text-secondary)}

/* ---------------------------------------------------------------
   Klappmenue in der Kopfzeile. Der Ausloeser sieht aus wie ein
   Navigationspunkt, nicht wie eine Schaltflaeche, sonst bricht er die
   Zeile optisch auf. Das Menue steht NEBEN der Navigation, weil diese
   waagerecht schiebbar ist und den Ueberlauf abschneidet.
   --------------------------------------------------------------- */
.shell-header .menu{position:relative;flex:none}
.shell-header .menu-btn{
  padding:.55rem .9rem; min-height:38px; display:inline-flex; align-items:center; gap:.35rem;
  flex:none; white-space:nowrap; border:none; background:transparent; box-shadow:none;
  border-radius:0; font-family:inherit; font-weight:400; font-size:.92rem;
  letter-spacing:normal; text-transform:none; color:var(--text-secondary); cursor:pointer;
}
.shell-header .menu-btn:hover{color:var(--text-primary);background:var(--bg-elev)}
.shell-header .menu-btn.active{
  color:var(--one-accent); background:var(--one-tint-10);
  box-shadow:inset 0 -2px 0 var(--one-accent);
}
:root:not([data-theme="dark"]) .shell-header .menu-btn{color:#b9c9c2}
:root:not([data-theme="dark"]) .shell-header .menu-btn:hover{background:rgba(255,255,255,.09);color:#fff}
:root:not([data-theme="dark"]) .shell-header .menu-btn.active{color:#a8e0bf;background:rgba(143,217,172,.14)}
.shell-header .menu .caret{font-size:.7em;opacity:.8}
/* Schwebende Flaeche: immer deckend, sonst scheint der Inhalt durch. */
.menu-pop{
  display:none; position:absolute; top:100%; left:0; min-width:220px; z-index:1000;
  background:var(--bg-float); border:1px solid var(--border-subtle);
  box-shadow:var(--shadow-lg); padding:6px 0;
}
.menu.open .menu-pop{display:block}
.menu-pop a{
  display:block; padding:9px 16px; font-size:.92rem;
  color:var(--text-primary); text-decoration:none; white-space:nowrap;
}
.menu-pop a:hover{background:var(--one-tint-10);color:var(--one-accent);text-decoration:none}
.menu-pop a.active{color:var(--one-accent);background:var(--one-tint-10)}

/* ---------------------------------------------------------------
   Restliche Guide-Bausteine, damit alle Anwendungen dieselben
   Grundformen verwenden.
   --------------------------------------------------------------- */
.chip{
  display:inline-block; padding:7px 13px; font-size:.85rem;
  border:1px solid var(--border-subtle); background:transparent; color:var(--text-secondary);
}
.chip.active{background:var(--one-tint-10);border-color:var(--one-accent);color:var(--one-accent)}
table.datatable{width:100%;border-collapse:collapse;font-size:.9rem}
table.datatable th,table.datatable td{
  padding:9px 12px;text-align:left;border-bottom:1px solid var(--border-subtle);vertical-align:top}
table.datatable thead th{
  font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-muted);
  background:var(--bg-elev); border-bottom:1px solid var(--border-strong);
}
table.datatable td.num,table.datatable th.num{
  text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
table.datatable tbody tr:hover{background:var(--one-tint-08)}
tr.is-warning td{background:var(--warning-bg)}
tr.is-error   td{background:var(--error-bg)}
tr.is-success td{background:var(--success-bg)}
td.is-warning,.val-warning{color:var(--warning);font-weight:600}
td.is-error,.val-error{color:var(--error);font-weight:600}
td.is-success,.val-success{color:var(--success);font-weight:600}

/* ---------------------------------------------------------------
   Einklappbare Abschnitte im Arbeitgeber-Formular. Offen ist, was noch
   Pflichtangaben vermisst. Das verkuerzt die Seite deutlich, ohne
   etwas zu verbergen.
   --------------------------------------------------------------- */
.ag-status{display:block;margin-bottom:14px}
.ag-status .signal{margin:0}
.sec-group{border:1px solid var(--border-subtle);margin:0 0 10px;background:var(--bg-card-solid)}
.sec-group > summary{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 14px; cursor:pointer; list-style:none;
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  text-transform:uppercase; letter-spacing:var(--tracking-label);
  color:var(--text-secondary); background:var(--bg-elev);
}
.sec-group > summary::-webkit-details-marker{display:none}
.sec-group > summary::before{
  content:"▸"; flex:none; font-family:var(--sans); font-size:.9rem;
  color:var(--text-muted); transition:transform .15s var(--ease);
}
.sec-group[open] > summary::before{transform:rotate(90deg)}
.sec-group > summary:hover{color:var(--text-primary);background:var(--one-tint-08)}
.sec-group > summary:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.sec-group .sec-name{flex:1 1 auto;min-width:0}
.sec-badge{
  flex:none; padding:2px 8px; font-size:.66rem; letter-spacing:.08em;
  border:1px solid var(--neutral-border); background:var(--neutral-bg); color:var(--neutral);
}
.sec-badge.open{border-color:var(--warning-border);background:var(--warning-bg);color:var(--warning)}
.sec-badge.done{border-color:var(--success-border);background:var(--success-bg);color:var(--success)}
.sec-group > fieldset.sec{border:none;margin:0;padding:14px}
.sec-group > fieldset.sec > legend{display:none}

/* Verlauf als einklappbarer Block, damit er die Seite nicht verlaengert. */
details.history > summary{
  display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none;
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  text-transform:uppercase; letter-spacing:var(--tracking-label);
  color:var(--text-secondary);
}
details.history > summary::-webkit-details-marker{display:none}
details.history > summary::before{
  content:"▸"; font-family:var(--sans); font-size:.9rem; color:var(--text-muted);
  transition:transform .15s var(--ease);
}
details.history[open] > summary::before{transform:rotate(90deg)}
details.history > summary:hover{color:var(--text-primary)}
details.history > summary:focus-visible{outline:none;box-shadow:var(--focus-ring)}