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

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

/* ---------------------------------------------------------------
   Designtokens - dunkel
   --------------------------------------------------------------- */
:root{
  --one-primary:        #17ac6c;
  --one-primary-hover:  #1fc97c;
  --one-primary-rgb:    23,172,108;
  --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);

  --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;

  --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;
  --gefahr-text:    #2a0e12;

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

  --radius-sm: 0px;
  --radius:    0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;

  --shadow-sm: none;
  --shadow:    none;
  --shadow-lg: 0 24px 60px rgba(0,0,0,.45);
  --shadow-glow: none;
  --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;
}

/* Farbschema an das Bild koppeln, sonst zeichnet der Browser
   Auswahllisten im Systemmodus und sie werden unlesbar. */
:root,html[data-theme="dark"]{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}

/* ---------------------------------------------------------------
   Designtokens - hell (Vorgabe)
   --------------------------------------------------------------- */
html[data-theme="light"]{
  --one-primary:        #17ac6c;
  --one-primary-hover:  #1fc97c;
  --one-accent:         #2f7d63;
  --one-soft:           #cfe8d8;

  --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;

  --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);

  --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;
  --gefahr-text:    #ffffff;

  --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);
}

/* ---------------------------------------------------------------
   Grundlagen
   --------------------------------------------------------------- */
*{box-sizing:border-box}
/* Das Merkmal hidden muss staerker sein als jede eigene Anzeigeart.
   Ohne diese Zeile bleibt ein ausgeblendetes Formular sichtbar, sobald
   es display:flex oder display:grid traegt. Genau das ist bei den
   Reitern im Vorgang passiert. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
html{background:var(--bg-page)}
body{
  font-family:var(--sans);background-color:var(--bg-page);color:var(--text-primary);
  font-size:15px;line-height:1.55;min-height:100vh;display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
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%);
  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}

a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-weight:700;line-height:1.25;margin:0 0 12px}
p{margin:0 0 12px}
code,.kennung{
  font-family:var(--mono);font-size:.86em;letter-spacing:.02em;
  overflow-wrap:anywhere;
}
code{background:var(--bg-input);border:1px solid var(--border-subtle);padding:1px 6px;color:var(--one-accent)}
img,svg,video,iframe{max-width:100%}
img,svg,video{height:auto}
.muted{color:var(--text-secondary)}
.small{font-size:12.5px}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* Abschnittsmarke in Monospace */
.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);
}

/* ---------------------------------------------------------------
   Kopfzeile - Markenkonstante, in beiden Ansichten dunkel
   --------------------------------------------------------------- */
.shell-header{
  position:sticky;top:0;z-index:1000;height:var(--header-h);
  /* Feste Farben, unabhaengig vom gewaehlten Bild. Nichts hier darf
     von den Bildvariablen abgeleitet werden. */
  --kopf-flaeche:        #101917;
  --kopf-text:           #eef4f1;
  --kopf-text-leise:     #b9c9c2;
  --kopf-linie:          rgba(255,255,255,.12);
  --kopf-linie-stark:    rgba(255,255,255,.22);
  --kopf-feld:           rgba(255,255,255,.07);
  --kopf-feld-hover:     rgba(255,255,255,.11);
  --kopf-akzent:         #a8e0bf;
  --kopf-akzent-flaeche: rgba(143,217,172,.14);
  --kopf-marke:          #c9e8d4;
  --kopf-marke-text:     #0d2019;

  background:var(--kopf-flaeche);
  border-bottom:1px solid var(--kopf-linie);
  color:var(--kopf-text);
  backdrop-filter:saturate(1.4) blur(16px);
  -webkit-backdrop-filter:saturate(1.4) blur(16px);
}
.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}
.shell-header .brand{
  display:flex;align-items:center;gap:.65rem;flex:none;white-space:nowrap;
  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}

/* Die Navigation ist das einzige nachgiebige Element und schiebt */
.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-radius:0;font-weight:400;font-size:.92rem;
  color:var(--kopf-text-leise);transition:background .15s,color .15s;
}
.shell-header .nav a:hover{color:var(--kopf-text);background:var(--kopf-feld-hover);text-decoration:none}
.shell-header .nav a.active{
  color:var(--kopf-akzent);background:var(--kopf-akzent-flaeche);
  box-shadow:inset 0 -2px 0 var(--kopf-akzent);
}
/* Klappmenue steht neben der Navigation, nicht darin */
.shell-header .menu{flex:none;position:relative}
.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;border-radius:0;
  font-family:inherit;font-weight:400;font-size:.92rem;letter-spacing:normal;
  text-transform:none;color:var(--kopf-text-leise);cursor:pointer;
}
.shell-header .menu-btn:hover{color:var(--kopf-text);background:var(--kopf-feld-hover)}
.shell-header .menu-btn.active{
  color:var(--kopf-akzent);background:var(--kopf-akzent-flaeche);
  box-shadow:inset 0 -2px 0 var(--kopf-akzent);
}
.menu-pop{
  display:none;position:absolute;top:calc(100% + 6px);right:0;min-width:220px;
  background:var(--bg-float);border:1px solid var(--border-subtle);
  box-shadow:var(--shadow-lg);z-index:1001;padding:4px 0;
}
.menu.open .menu-pop{display:block}
.menu-pop a{
  display:block;padding:.6rem 1rem;color:var(--text-primary);font-size:.92rem;
}
.menu-pop a:hover{background:var(--one-tint-10);text-decoration:none}
.menu-pop a.active{color:var(--one-accent);background:var(--one-tint-10)}

.topsearch{flex:none;width:200px;margin:0}
.shell-header .topsearch input{
  width:100%;padding:9px 14px;border-radius:0;
  border:1px solid var(--kopf-linie-stark);background:var(--kopf-feld);
  color:var(--kopf-text);font:inherit;font-size:14px;
}
.shell-header .topsearch input::placeholder{color:rgba(232,240,236,.55)}
.shell-header .topsearch input:focus{outline:none;border-color:var(--kopf-akzent);box-shadow:none}
.header-actions{display:flex;align-items:center;gap:.75rem;flex:none}

.user-menu{
  display:flex;align-items:center;gap:.65rem;flex:none;white-space:nowrap;
  padding:.3rem .3rem .3rem .85rem;
  border:1px solid var(--kopf-linie-stark);border-radius:0;background:var(--kopf-feld);
}
.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(--kopf-marke);color:var(--kopf-marke-text);
  font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.04em;border:none;
}
.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(--kopf-text-leise);
}
.user-menu .logout-btn:hover{color:var(--kopf-akzent)}
.admin-badge{
  display:inline-block;margin-left:.35rem;padding:.2em .55em;white-space:nowrap;
  background:var(--kopf-marke);color:var(--kopf-marke-text);border-radius:0;
  font-family:var(--mono);font-size:.65rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;
}

.theme-toggle{
  width:40px;height:40px;flex:none;display:grid;place-items:center;
  border:1px solid var(--kopf-linie-stark);border-radius:0;
  background:transparent;color:var(--kopf-text-leise);cursor:pointer;padding:0;
}
.theme-toggle:hover{color:var(--kopf-akzent);border-color:var(--kopf-akzent);background:var(--kopf-feld-hover)}
.theme-toggle svg{width:18px;height:18px;display:block}
.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}
.theme-toggle-float{
  position:fixed;top:14px;right:14px;z-index:60;
  border-color:var(--border-strong);color:var(--text-secondary);
}

/* ---------------------------------------------------------------
   Grundraster und Fusszeile
   --------------------------------------------------------------- */
.wrap{max-width:1280px;margin:0 auto;padding:28px 20px 60px;width:100%;flex:1}
.wrap.schmal{max-width:780px}
.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 strong{color:var(--text-secondary);font-weight:500}
.pagetitle{font-size:26px;margin:8px 0 4px}
.sectiontitle{
  font-size:14px;margin:30px 0 12px;color:var(--text-muted);
  font-family:var(--mono);text-transform:uppercase;letter-spacing:var(--tracking-label);font-weight:500;
}
.karten-titel{font-size:14px;margin:0 0 12px;color:var(--text-muted);
  font-family:var(--mono);text-transform:uppercase;letter-spacing:var(--tracking-label);font-weight:500}
.crumbs{font-size:13px;color:var(--text-muted);margin:4px 0 10px}
.crumbs a{color:var(--text-secondary)}

/* ---------------------------------------------------------------
   Flaechen
   --------------------------------------------------------------- */
.card{
  background:var(--bg-card-solid);border:1px solid var(--border-subtle);
  padding:20px 22px;margin:0 0 16px;position:relative;
}
.card.empty{color:var(--text-secondary)}
.floating,.tooltip,.dropdown-menu,.popover{
  background:var(--bg-float);border:1px solid var(--border-subtle);box-shadow:var(--shadow-lg);
}

/* Kennzahlen der Übersicht */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:18px 0}
.kpi{display:block;margin:0;text-decoration:none;color:var(--text-primary);
  border-left:3px solid var(--neutral-dot);transition:border-color .15s,background .15s}
.kpi:hover{text-decoration:none;background:var(--one-tint-08)}
.kpi-zahl{font-size:30px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi-text{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;
  letter-spacing:var(--tracking-label);color:var(--text-muted);margin-top:6px}
.kpi-success{border-left-color:var(--success-dot)}
.kpi-warning{border-left-color:var(--warning-dot)}
.kpi-error{border-left-color:var(--error-dot)}
.kpi-info{border-left-color:var(--info-dot)}

/* ---------------------------------------------------------------
   Schaltflaechen - Monospace in Versalien, auch als Link
   --------------------------------------------------------------- */
.btn,a.btn,button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font-family:var(--mono);font-size:.76rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;padding:11px 18px;
  background:var(--one-soft);color:var(--text-inverse);
  border:1px solid var(--one-soft);border-radius:0;text-decoration:none;
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease);
}
.btn:hover,a.btn:hover,button:hover{
  background:var(--one-primary-hover);border-color:var(--one-primary-hover);text-decoration:none}
.btn.primary,button.primary{background:var(--one-primary);border-color:var(--one-primary);color:#fff}
.btn.primary:hover,button.primary:hover{background:var(--one-primary-hover);border-color:var(--one-primary-hover)}
.btn.ghost,a.btn.ghost,button.ghost{
  background:transparent;border-color:var(--border-strong);color:var(--text-secondary);
  font-family:var(--mono);padding:11px 18px}
.btn.ghost:hover,a.btn.ghost:hover,button.ghost:hover{
  border-color:var(--one-accent);color:var(--one-accent);background:transparent}
.btn.danger,a.btn.danger,button.danger{
  background:transparent;border-color:var(--error);color:var(--error)}
.btn.danger:hover,a.btn.danger:hover,button.danger:hover{background:var(--error-bg)}
/* Gefuellte rote Schaltflaeche, ausschliesslich fuer das Loeschen ganzer
   Bestaende. Bewusst die einzige Stelle mit voller Signalflaeche. */
.btn.danger.stark,a.btn.danger.stark,button.danger.stark{
  background:var(--error);border-color:var(--error);color:var(--gefahr-text)}
.btn.danger.stark:hover,a.btn.danger.stark:hover,button.danger.stark:hover{
  background:var(--error-dot);border-color:var(--error-dot);color:var(--gefahr-text)}
.card.gefahr{border-color:var(--error-border);border-left:3px solid var(--error-dot)}
.card.gefahr .karten-titel{color:var(--error)}
.btn.small,a.btn.small,button.small{padding:8px 13px;font-size:.7rem}
.btn:focus-visible,a.btn:focus-visible,button:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* ---------------------------------------------------------------
   Formulare
   --------------------------------------------------------------- */
label{display:block;margin-bottom:0;font-size:.88rem;color:var(--text-secondary)}
input[type=text],input[type=number],input[type=search],input[type=email],
input[type=password],input[type=tel],input[type=date],select,textarea{
  width:100%;padding:9px 12px;font-family:inherit;font-size:.95rem;
  color:var(--text-primary);background:var(--bg-input);
  border:1px solid var(--border-subtle);border-radius:0;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--one-primary);box-shadow:var(--focus-ring);
}
textarea{font-family:inherit;line-height:1.55;resize:vertical}
input[type=number]{appearance:textfield;-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Aufgeklappte Auswahlliste steht ausserhalb der Seite und braucht Deckung */
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)}

.editform{display:flex;flex-direction:column;gap:14px}
.editform label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:500;
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}
.editform label input,.editform label select,.editform label textarea{
  font-family:var(--sans);text-transform:none;letter-spacing:normal;font-size:.95rem;font-weight:400;
  color:var(--text-primary)}
.formrow2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.formrow3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.formrow4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.formactions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.feldgruppe{display:flex;flex-direction:column;gap:8px}
.feldname{font-family:var(--mono);font-size:.66rem;font-weight:500;
  text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-muted)}
.chk{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--text-secondary);
  text-transform:none;font-family:var(--sans);letter-spacing:normal}
.chk input{width:auto;flex:none}
.chk-oben{display:flex;flex-direction:column;gap:6px}
.chk-oben input{width:auto}
.chk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
.inlineform{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.inlineform select{width:auto;min-width:130px}
.row-baseline{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.field-group{display:flex;flex-direction:column;gap:5px}
.card-head{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.postfach-zeile{margin:0 0 18px}
.postfach-zeile form{margin:0}

.filterleiste{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.filterleiste .feld{display:flex;flex-direction:column;gap:5px;min-width:150px}
.filterleiste .chk{margin-bottom:9px}

/* ---------------------------------------------------------------
   Tabellen
   --------------------------------------------------------------- */
.table-wrap{overflow-x:auto;border:1px solid var(--border-subtle);background:var(--bg-card-solid);margin:0 0 16px}
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)}
table.datatable tr.total td{background:var(--one-tint-15);font-weight:700}
tr.is-warning td{background:var(--warning-bg)}
tr.is-error td{background:var(--error-bg)}
tr.is-success td{background:var(--success-bg)}
tr.is-neutral td{color:var(--text-muted)}
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}
.aktionen{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.aktionen form{margin:0}

/* ---------------------------------------------------------------
   Marken und Signale
   --------------------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 18px}
.chip{
  display:inline-block;padding:7px 13px;font-size:.85rem;
  border:1px solid var(--border-subtle);background:transparent;color:var(--text-secondary);
}
.chip:hover{border-color:var(--one-primary);text-decoration:none}
.chip.active{background:var(--one-tint-10);border-color:var(--one-accent);color:var(--one-accent)}
.blaettern{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}

.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;white-space:nowrap;
  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)}
.state-neutral{border-color:var(--neutral-border);background:var(--neutral-bg);color:var(--neutral)}

.punkt{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--warning-dot);
  vertical-align:middle;margin-left:4px}

.flash{padding:11px 16px;margin:0 0 16px;font-size:14px;border:1px solid var(--neutral-border);
  background:var(--neutral-bg)}
.flash.ok{background:var(--success-bg);border-color:var(--success-border)}
.flash.warn{background:var(--warning-bg);border-color:var(--warning-border)}

.center-card{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.auth-card{max-width:420px;text-align:center;padding:38px 32px}
.auth-card h1{font-size:22px;margin:14px 0 8px}
.auth-card p{color:var(--text-secondary)}
.auth-logo{height:46px;width:auto;margin-bottom:10px}

/* ---------------------------------------------------------------
   Vorgangsansicht
   --------------------------------------------------------------- */
.ticket-kopf{margin:0 0 18px}
.kopfzeile-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:6px}
.ticket-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.ticket-seite .card{margin-bottom:14px}

.eintrag{
  border:1px solid var(--border-subtle);border-left-width:3px;border-left-color:var(--neutral-dot);
  background:var(--bg-card-solid);padding:14px 16px;margin:0 0 12px;
}
.eintrag-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:6px}
.eintrag-art{
  font-family:var(--mono);font-size:.64rem;font-weight:500;text-transform:uppercase;
  letter-spacing:var(--tracking-label);color:var(--text-muted);
}
.eintrag-autor{font-weight:500;font-size:.92rem}
.eintrag-zeit{margin-left:auto}
.eintrag-betreff{margin-bottom:4px}
.eintrag-text{white-space:normal;overflow-wrap:break-word;font-size:.95rem}
.eintrag-mail_ein{border-left-color:var(--info-dot);background:var(--info-bg)}
.eintrag-partner_ein{border-left-color:var(--data-4)}
.eintrag-mail_aus{border-left-color:var(--success-dot)}
.eintrag-partner_aus{border-left-color:var(--success-dot)}
.eintrag-notiz{border-left-color:var(--warning-dot);background:var(--warning-bg)}
.eintrag-system{border-left-color:var(--neutral-dot);background:transparent;
  color:var(--text-muted);font-size:.86rem;padding:8px 16px}
.eintrag-system .eintrag-text{font-size:.86rem}

.zitat-schalter{
  background:transparent;border:none;color:var(--text-muted);padding:6px 0;
  font-family:var(--mono);font-size:.64rem;text-transform:uppercase;
  letter-spacing:var(--tracking-label);cursor:pointer;
}
.zitat-schalter:hover{background:transparent;color:var(--one-accent);border:none}
.zitat{
  border-left:2px solid var(--border-strong);padding:8px 12px;margin-top:6px;
  color:var(--text-muted);font-size:.86rem;max-height:340px;overflow:auto;
}
.anhaenge{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.anhang{
  display:inline-flex;align-items:center;gap:6px;padding:6px 10px;font-size:.85rem;
  border:1px solid var(--border-subtle);background:var(--bg-elev);color:var(--text-secondary);
}
.anhang:hover{border-color:var(--one-primary);color:var(--one-accent);text-decoration:none}

.antwortbox{padding:0}
.reiter{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--border-subtle)}
.reiter-btn{
  background:transparent;border:none;border-bottom:2px solid transparent;
  color:var(--text-secondary);padding:12px 16px;border-radius:0;
}
.reiter-btn:hover{background:var(--one-tint-08);border-color:transparent;
  border-bottom:2px solid var(--border-strong);color:var(--text-primary)}
.reiter-btn.active{color:var(--one-accent);border-bottom:2px solid var(--one-accent);background:transparent}
.reiter-inhalt{padding:18px 22px}

.daten{display:grid;grid-template-columns:minmax(90px,auto) 1fr;gap:6px 14px;margin:0}
.daten dt{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;
  letter-spacing:var(--tracking-label);color:var(--text-muted);padding-top:3px}
.daten dd{margin:0;overflow-wrap:anywhere}
.kundenform{margin-top:14px}
.kundenform summary{cursor:pointer;color:var(--text-secondary);font-size:.86rem}
.kundenform .editform{margin-top:12px}

.log{
  font-family:var(--mono);font-size:.75rem;line-height:1.6;color:var(--text-secondary);
  white-space:pre-wrap;overflow-wrap:anywhere;margin:0;max-height:420px;overflow:auto;
}

/* Balken der Auswertung */
.balken{display:flex;flex-direction:column;gap:8px}
.balken-zeile{display:grid;grid-template-columns:180px 1fr 60px;gap:12px;align-items:center}
.balken-name{font-size:.88rem;color:var(--text-secondary);overflow-wrap:anywhere}
.balken-spur{display:block;height:12px;background:var(--bg-elev);border:1px solid var(--border-subtle)}
.balken-wert{display:block;height:100%;background:var(--one-primary)}
.balken-zahl{font-variant-numeric:tabular-nums;color:var(--text-primary)}

/* ---------------------------------------------------------------
   Klappmenue fuer schmale Geraete
   --------------------------------------------------------------- */
.nav-burger{
  display:none;width:38px;height:38px;flex:none;color:var(--kopf-text-leise);
  background:transparent;border:1px solid var(--kopf-linie-stark);border-radius:0;
  padding:9px;cursor:pointer;flex-direction:column;justify-content:space-between;
}
.nav-burger:hover{background:var(--kopf-feld-hover);border-color:var(--kopf-linie-stark)}
.nav-burger span{display:block;width:100%;height:2px;background:currentColor;
  border-radius:0;transition:transform .2s ease,opacity .2s ease}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2),
.nav-burger[aria-expanded="true"] span:nth-child(3){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(4){transform:translateY(-13px) rotate(-45deg)}
.nav-backdrop{display:none;position:fixed;inset:0;background:rgba(6,12,10,.5);z-index:900}
.nav-backdrop.active{display:block}
.nav-sep,.shell-header .nav a.nav-tool{display:none}

/* ---------------------------------------------------------------
   Anpassung an die Fensterbreite
   --------------------------------------------------------------- */
@media (max-width:1600px){
  .topsearch{display:none}
}
@media (max-width:1400px){
  .ticket-layout{grid-template-columns:minmax(0,1fr) 300px}
}
@media (max-width:1280px){
  .nav-burger{display:flex}
  .shell-header .menu{display:none}
  .nav-sep{
    display:block;padding:.9rem 1.25rem .4rem;
    font-family:var(--mono);font-size:.62rem;letter-spacing:var(--tracking-label);
    text-transform:uppercase;color:rgba(232,240,236,.5);
  }
  .shell-header .nav a.nav-tool{display:flex}
  /* Der Glaseffekt erzeugt einen eigenen Bezugsrahmen und wuerde das
     ausgerollte Menue einsperren, deshalb feste Flaeche. */
  .shell-header{backdrop-filter:none;-webkit-backdrop-filter:none;z-index:1000}
  .shell-header .nav{
    position:fixed;top:var(--header-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;padding:0;
    background:var(--kopf-flaeche);
    border-bottom:1px solid var(--kopf-linie);box-shadow:var(--shadow-lg);
    overflow-x:hidden;overflow-y:auto;max-height:calc(100vh - var(--header-h));
    transform:translateY(-100%);opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .25s ease,opacity .2s ease,visibility 0s linear .2s;z-index:1001;
  }
  .shell-header .nav.active{
    transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;
    transition:transform .25s ease,opacity .2s ease,visibility 0s linear 0s;
  }
  .shell-header .nav a{
    width:100%;padding:.85rem 1.25rem;border-bottom:1px solid var(--kopf-linie);
    color:var(--kopf-text);background:transparent;box-shadow:none;font-size:.95rem;
  }
  .shell-header .nav a:last-child{border-bottom:none}
  .shell-header .nav a:hover{background:var(--kopf-feld-hover);color:var(--kopf-text)}
  .shell-header .nav a.active{
    color:var(--kopf-akzent);background:var(--kopf-akzent-flaeche);
    box-shadow:inset 3px 0 0 var(--kopf-akzent);
  }
  .nav-backdrop{z-index:999}
}
@media (max-width:1024px){
  .ticket-layout{grid-template-columns:1fr}
}
@media (max-width:768px){
  .brand-logo{height:22px}
  .shell-header .brand span{display:none}
  .user-menu .name{max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* =====================================================================
   Lesbarkeit auf dem Handy (MOBIL.md des ONE Design Guide)
   Steht am Dateiende, damit die Regeln nicht von spaeteren gleicher
   Gewichtung ausgehebelt werden.
   ===================================================================== */
.kennung,.pfad,code,a[href^="http"],a[href^="mailto"]{overflow-wrap:anywhere}

@media (max-width:768px){
  /* Fliesstext mindestens 16px */
  body{font-size:16px}
  /* Eingabefelder mindestens 16px, sonst zoomt iOS beim Antippen hinein */
  input,select,textarea{font-size:16px}
  /* Bedienflaechen fuer den Finger */
  .btn,a.btn,button,.theme-toggle,.nav-burger,.menu-btn,.reiter-btn{min-height:44px}
  .theme-toggle,.nav-burger{min-width:44px}
  .shell-header .nav a{min-height:44px}
  .user-menu .logout-btn{min-height:44px;min-width:44px}
  .chk{min-height:44px}
  /* Mehrspaltiges wird einspaltig */
  .formrow2,.formrow3,.formrow4,.chk-grid,.kpi-grid,.ticket-layout,.daten{
    grid-template-columns:1fr;
  }
  .balken-zeile{grid-template-columns:1fr;gap:4px}
  .balken-zahl{text-align:left}
  .formactions,.aktionen{flex-direction:column;align-items:stretch}
  .formactions .btn,.aktionen .btn,.aktionen form,.aktionen form button{width:100%}
  /* Abstaende zurueckhaltender, der Platz ist knapp */
  .wrap{padding:1rem}
  .card,.auth-card,.reiter-inhalt{padding:1rem}
  h1,h2,h3,h4,p,li,td,th,dd,dt{overflow-wrap:break-word}
  .pagetitle{font-size:22px}
  .user-menu .name{display:none}
  .user-menu{padding-left:.3rem}
  /* Tabellen als Karten: jede Zeile ein Block, jeder Wert mit Beschriftung */
  table.datatable[data-karten]{display:block}
  table.datatable[data-karten] thead{display:none}
  table.datatable[data-karten] tbody,
  table.datatable[data-karten] tr,
  table.datatable[data-karten] td{display:block;width:100%}
  table.datatable[data-karten] tr{
    margin-bottom:.75rem;border:1px solid var(--border-subtle);background:var(--bg-card-solid);
  }
  table.datatable[data-karten] td{
    display:flex;justify-content:space-between;gap:1rem;text-align:right;
    padding:.6rem .85rem;border-bottom:1px solid var(--border-subtle);
  }
  table.datatable[data-karten] td:last-child{border-bottom:none}
  table.datatable[data-karten] td::before{
    content:attr(data-spalte);flex:none;text-align:left;
    font-family:var(--mono);font-size:.68rem;letter-spacing:var(--tracking-label);
    text-transform:uppercase;color:var(--text-muted);
  }
  table.datatable[data-karten] td:empty{display:none}
  .table-wrap{overflow-x:auto}
}

/* ---------------------------------------------------------------
   Hilfe
   --------------------------------------------------------------- */
.hilfe-suche{position:sticky;top:calc(var(--header-h) + 12px);z-index:2}
.hilfe-suche input[type=search]{font-size:1rem;padding:11px 14px}
.hilfe-suche .chips{margin:12px 0 6px}
.hilfe-suche .chip{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.1em;padding:7px 12px;cursor:pointer;border-radius:0}
.hilfe-block{scroll-margin-top:90px}
.hilfe-kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.hilfe-titel{font-size:1.15rem;margin:0}
.hilfe-block p{max-width:78ch}
.hilfe-liste,.hilfe-schritte{margin:0 0 12px;padding-left:20px;max-width:78ch}
.hilfe-liste li,.hilfe-schritte li{margin-bottom:6px}
.hilfe-schritte li{padding-left:4px}
.hilfe-block .signal{margin-top:14px}
.hilfe-block .table-wrap{margin:4px 0 14px}
.hilfe-leer{padding:24px 0;text-align:center}

@media (max-width:768px){
  .hilfe-suche{position:static}
  .hilfe-suche .chip{min-height:44px;display:inline-flex;align-items:center}
}