/* =========================================================
   FluxPike – gemeinsamer Arbeitsbereich für alle übrigen Seiten
   Orientierung: reduzierte Kartenansicht aus Probleme/Störungen.
   Gilt nur außerhalb bereits eigenständig gestalteter Fachbereiche.
   ========================================================= */

body.flux-arbeitsbereich{
  --arbeitsbereich-tinte:var(--fp-marke-dunkel-2);
  --arbeitsbereich-tinte-weich:var(--fp-marke-text);
  --arbeitsbereich-hintergrund:var(--fp-marke-flaeche);
  --arbeitsbereich-flaeche:var(--fp-weiss);
  --arbeitsbereich-flaeche-sanft:var(--fp-marke-flaeche-hell);
  --arbeitsbereich-linie:var(--fp-marke-rahmen);
  --arbeitsbereich-linie-stark:var(--fp-farbwert-bccbc8);
  --arbeitsbereich-dunkel:var(--fp-marke-dunkel);
  --arbeitsbereich-dunkel-2:var(--fp-marke-tief);
  --arbeitsbereich-blau:var(--fp-farbwert-167188);
  --arbeitsbereich-cyan:var(--fp-marke-tuerkis);
  --arbeitsbereich-signal:var(--fp-marke-limette);
  --arbeitsbereich-signal-dunkel:var(--fp-farbwert-6d920d);
  --arbeitsbereich-gruen:var(--fp-farbwert-238b5d);
  --arbeitsbereich-orange:var(--fp-farbwert-d97725);
  --arbeitsbereich-rot:var(--fp-farbwert-c84747);
  --arbeitsbereich-schatten:0 18px 46px var(--fp-farbwert-rgba-12-39-47-_10);
  --arbeitsbereich-schatten-klein:0 8px 24px var(--fp-farbwert-rgba-12-39-47-_075);
  --arbeitsbereich-radius:20px;
  --arbeitsbereich-radius-klein:12px;
  background:var(--fp-farbwert-e7eeec);
  color:var(--arbeitsbereich-tinte);
}

body.flux-arbeitsbereich main.container:not(.problem-bereich){
  position:relative;
  isolation:isolate;
  width:min(90vw,1400px);
  max-width:min(90vw,1400px);
  padding:18px 18px 40px;
  color:var(--arbeitsbereich-tinte);
}
body.flux-arbeitsbereich main.container:not(.problem-bereich)::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:78px -18px 0;
  border-radius:30px;
  background:
    linear-gradient(var(--fp-marke-schatten) 1px,transparent 1px),
    linear-gradient(90deg,var(--fp-marke-schatten) 1px,transparent 1px),
    radial-gradient(circle at 7% 1%,var(--fp-farbwert-rgba-39-189-208-_13),transparent 28%),
    radial-gradient(circle at 94% 5%,var(--fp-farbwert-rgba-183-232-62-_12),transparent 25%),
    var(--arbeitsbereich-hintergrund);
  background-size:30px 30px,30px 30px,auto,auto,auto;
}

body.flux-arbeitsbereich main.container:not(.problem-bereich) a:not(.btn):not(.nav-btn):not(.vh-pill-plus){
  color:var(--arbeitsbereich-blau);
}
body.flux-arbeitsbereich main.container:not(.problem-bereich) h1,
body.flux-arbeitsbereich main.container:not(.problem-bereich) h2,
body.flux-arbeitsbereich main.container:not(.problem-bereich) h3,
body.flux-arbeitsbereich main.container:not(.problem-bereich) h4,
body.flux-arbeitsbereich main.container:not(.problem-bereich) strong{
  color:var(--arbeitsbereich-tinte);
}
body.flux-arbeitsbereich main.container:not(.problem-bereich) .text-muted,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .muted,
body.flux-arbeitsbereich main.container:not(.problem-bereich) small{
  color:var(--arbeitsbereich-tinte-weich);
}

/* Gemeinsamer Kopf */
body.flux-arbeitsbereich main.container:not(.problem-bereich) > .view-head,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .view-head:first-child{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  min-height:58px;
  margin:16px 0 16px;
  padding:13px 16px;
  overflow:hidden;
  border:1px solid var(--fp-weiss-alpha-09);
  border-left:5px solid var(--arbeitsbereich-signal);
  border-radius:14px 14px 10px 4px;
  background:
    linear-gradient(110deg,var(--fp-weiss-alpha-055),transparent 42%),
    linear-gradient(135deg,var(--arbeitsbereich-dunkel-2),var(--arbeitsbereich-dunkel));
  box-shadow:0 18px 40px var(--fp-farbwert-rgba-7-29-36-_18);
}
body.flux-arbeitsbereich main.container:not(.problem-bereich) .view-head .title{
  min-width:0;
  overflow:hidden;
  color:var(--fp-weiss);
  font-size:clamp(1.05rem,1.7vw,1.28rem);
  font-weight:900;
  letter-spacing:-.018em;
  line-height:1.16;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.flux-arbeitsbereich main.container:not(.problem-bereich) .view-head .actions{
  display:flex;
  flex-wrap:nowrap;
  justify-content:flex-end;
  gap:6px;
}
body.flux-arbeitsbereich main.container:not(.problem-bereich) .view-head .btn{
  display:inline-grid;
  place-items:center;
  width:36px;
  min-width:36px;
  height:36px;
  min-height:36px;
  padding:0;
  border:1px solid var(--fp-farbwert-rgba-255-255-255-_16);
  border-radius:10px 10px 10px 4px;
  background:var(--fp-weiss-alpha-08);
  color:var(--fp-weiss);
  box-shadow:none;
}
body.flux-arbeitsbereich main.container:not(.problem-bereich) .view-head .btn:hover{
  border-color:var(--arbeitsbereich-cyan);
  background:var(--fp-farbwert-rgba-39-189-208-_18);
  transform:translateY(-1px);
}
body.flux-arbeitsbereich main.container:not(.problem-bereich) .view-head .btn.success,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .view-head .btn.btn-dark{
  border-color:var(--arbeitsbereich-signal);
  background:var(--arbeitsbereich-signal);
  color:var(--fp-marke-gruen-tief);
}
body.flux-arbeitsbereich main.container:not(.problem-bereich) .view-head .btn.danger{
  border-color:var(--fp-farbwert-e57979);
  background:var(--fp-farbwert-b83d3d);
  color:var(--fp-weiss);
}
main.container:not(.problem-bereich) .view-head .btn svg,
main.container:not(.problem-bereich) .view-head .btn img{
  display:block;
  width:18px;
  height:18px;
}

/* Karten und Inhaltsflächen */
body.flux-arbeitsbereich main.container:not(.problem-bereich) .card,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .panel,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .box,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .content-box,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .admin-card,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .guide-card,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .settings-section,
body.flux-arbeitsbereich main.container:not(.problem-bereich) fieldset{
  border:1px solid var(--arbeitsbereich-linie);
  border-radius:var(--arbeitsbereich-radius);
  background:var(--arbeitsbereich-flaeche);
  box-shadow:var(--arbeitsbereich-schatten-klein);
}
body.flux-arbeitsbereich main.container:not(.problem-bereich) .card,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .panel,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .box,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .content-box,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .admin-card,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .guide-card,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .settings-section{
  margin-bottom:16px;
  padding:21px;
}
body.flux-arbeitsbereich main.container:not(.problem-bereich) .card-body{
  padding:0;
}
body.flux-arbeitsbereich main.container:not(.problem-bereich) .panel > h2,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .panel > h3,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .card-body > h2,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .card-body > h3,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .box > h2,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .box > h3{
  position:relative;
  margin-top:0;
  padding-left:16px;
}
body.flux-arbeitsbereich main.container:not(.problem-bereich) .panel > h2::before,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .panel > h3::before,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .card-body > h2::before,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .card-body > h3::before,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .box > h2::before,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .box > h3::before{
  content:"";
  position:absolute;
  left:0;
  top:.12em;
  width:5px;
  height:1.05em;
  border-radius:3px;
  background:var(--arbeitsbereich-cyan);
}

/* Formulare */
body.flux-arbeitsbereich main.container:not(.problem-bereich) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.flux-arbeitsbereich main.container:not(.problem-bereich) select,
body.flux-arbeitsbereich main.container:not(.problem-bereich) textarea,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .form-control{
  max-width:100%;
  border:1px solid var(--arbeitsbereich-linie-stark);
  border-radius:10px;
  background:var(--fp-weiss);
  color:var(--arbeitsbereich-tinte);
  box-shadow:0 1px 0 var(--fp-farbwert-rgba-16-36-45-_025);
}
body.flux-arbeitsbereich main.container:not(.problem-bereich) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
body.flux-arbeitsbereich main.container:not(.problem-bereich) select:focus,
body.flux-arbeitsbereich main.container:not(.problem-bereich) textarea:focus,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .form-control:focus{
  border-color:var(--arbeitsbereich-cyan);
  outline:none;
  box-shadow:0 0 0 3px var(--fp-farbwert-rgba-39-189-208-_17);
}
body.flux-arbeitsbereich main.container:not(.problem-bereich) fieldset{
  min-width:0;
  margin:0 0 16px;
  padding:18px;
}
body.flux-arbeitsbereich main.container:not(.problem-bereich) legend{
  padding:0 8px;
  color:var(--arbeitsbereich-tinte);
  font-weight:800;
}

/* Filter */
body.flux-arbeitsbereich main.container:not(.problem-bereich) .filter-tabbar,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .standard-filterbar,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .filter-tabbar{
  position:relative;
  margin:0 0 18px;
  padding:18px 15px 14px;
  border:1px solid var(--arbeitsbereich-linie);
  border-radius:16px;
  background:var(--fp-farbwert-e8efed);
  box-shadow:none;
}
body.flux-arbeitsbereich main.container:not(.problem-bereich) .filter-tabbar::before,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .standard-filterbar::before,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .filter-tabbar::before{
  content:"FILTER";
  position:absolute;
  left:15px;
  top:-9px;
  padding:3px 9px;
  border-radius:6px;
  background:var(--arbeitsbereich-dunkel);
  color:var(--fp-weiss);
  font-size:.58rem;
  font-weight:900;
  letter-spacing:.14em;
}

/* Tabellen */
body.flux-arbeitsbereich main.container:not(.problem-bereich) table{
  border:1px solid var(--arbeitsbereich-linie);
  border-radius:14px;
  background:var(--fp-weiss);
  box-shadow:0 5px 16px var(--fp-farbwert-rgba-12-39-47-_045);
}
main.container:not(.problem-bereich) table thead th{
  border-bottom:1px solid var(--arbeitsbereich-linie);
  background:var(--fp-farbwert-e8efed);
  color:var(--arbeitsbereich-tinte);
}
main.container:not(.problem-bereich) table tbody td{
  border-bottom-color:var(--fp-farbwert-edf2f1);
}
main.container:not(.problem-bereich) table tbody tr:hover{
  background:var(--fp-marke-flaeche-sanft);
}

/* Meldungen und Hinweise */
body.flux-arbeitsbereich main.container:not(.problem-bereich) .alert,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .notice,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .hinweis,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .message{
  padding:12px 14px;
  border:1px solid var(--fp-farbwert-c9dfe1);
  border-radius:12px 12px 12px 4px;
  background:var(--fp-farbwert-eff8f8);
  color:var(--fp-farbwert-3f5d65);
  box-shadow:var(--arbeitsbereich-schatten-klein);
}
body.flux-arbeitsbereich main.container:not(.problem-bereich) .alert.success,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .notice.success{
  border-color:var(--fp-farbwert-9ed8b8);
  background:var(--fp-farbwert-eefaf3);
  color:var(--fp-farbwert-17653d);
}
body.flux-arbeitsbereich main.container:not(.problem-bereich) .alert.error,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .alert.danger,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .notice.error{
  border-color:var(--fp-farbwert-f4b9b9);
  background:var(--fp-gefahr-hintergrund);
  color:var(--fp-farbwert-8a1f1f);
}
body.flux-arbeitsbereich main.container:not(.problem-bereich) .alert.warn,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .alert.warning,
body.flux-arbeitsbereich main.container:not(.problem-bereich) .notice.warning{
  border-color:var(--fp-farbwert-e7c46e);
  background:var(--fp-farbwert-fff8e5);
  color:var(--fp-farbwert-7a5200);
}

/* Modale: nur das eigentliche Inhaltsfenster ist eine Karte.
   Der äußere .dialog-Wrapper bleibt transparent, damit keine zweite „Platte“ entsteht. */
body.flux-arbeitsbereich dialog,
body.flux-arbeitsbereich .modal .panel{
  border:1px solid var(--arbeitsbereich-linie);
  border-radius:18px;
  background:var(--fp-weiss);
  box-shadow:0 28px 70px var(--fp-farbwert-rgba-7-29-36-_24);
}
body.flux-arbeitsbereich .modal .dialog{
  border:0;
  border-radius:0;
  outline:0;
  background:transparent;
  box-shadow:none;
}
body.flux-arbeitsbereich .modal-header,
body.flux-arbeitsbereich .dialog__kopf{
  border-bottom:1px solid var(--arbeitsbereich-linie);
  background:linear-gradient(135deg,var(--fp-farbwert-f8fbfa),var(--fp-farbwert-eef4f2));
}

/* Responsiv */
@media (max-width:760px){
  body.flux-arbeitsbereich main.container:not(.problem-bereich){
    width:94vw;
    max-width:94vw;
    padding-inline:10px;
  }
  body.flux-arbeitsbereich main.container:not(.problem-bereich)::before{
    inset:72px -6px 0;
    border-radius:22px;
  }
  body.flux-arbeitsbereich main.container:not(.problem-bereich) > .view-head,
  body.flux-arbeitsbereich main.container:not(.problem-bereich) .view-head:first-child{
    grid-template-columns:minmax(0,1fr) auto;
    padding:12px;
  }
  body.flux-arbeitsbereich main.container:not(.problem-bereich) .view-head .title{
    font-size:1rem;
  }
  body.flux-arbeitsbereich main.container:not(.problem-bereich) .view-head .btn{
    width:34px;
    min-width:34px;
    height:34px;
    min-height:34px;
  }
  body.flux-arbeitsbereich main.container:not(.problem-bereich) .card,
  body.flux-arbeitsbereich main.container:not(.problem-bereich) .panel,
  body.flux-arbeitsbereich main.container:not(.problem-bereich) .box,
  body.flux-arbeitsbereich main.container:not(.problem-bereich) .content-box,
  body.flux-arbeitsbereich main.container:not(.problem-bereich) .admin-card,
  body.flux-arbeitsbereich main.container:not(.problem-bereich) .guide-card,
  body.flux-arbeitsbereich main.container:not(.problem-bereich) .settings-section{
    padding:15px;
    border-radius:15px;
  }
}

/* Gemeinsame Zustandsklassen ohne Inline-Stile */
.ist-ausgeblendet{display:none;}