/* ForstDesk – gemeinsame Basis aller Portalseiten.
   Teil 1 (:where, Spezifität 0): Farben und Bausteine. Seiteneigene Regeln gewinnen,
   bis sie in der jeweiligen Seite entfernt werden.
   Teil 2: Verhalten auf Handy und Tablet – gilt sofort für alle Seiten. */

/* ---------- Teil 1: Farben ---------- */
:where(:root){
  --bg-page:#f0f7f1; --bg-page2:#f6fbf7;
  --bg-side:#f0f7f1; --bd-side:#c8e6c9;
  --bg-head:#eef4ef; --bd-head:rgba(0,0,0,.07);
  --bg-card:#ffffff; --bd-card:rgba(0,0,0,.07); --sh-card:0 1px 10px rgba(0,0,0,.07);
  --bg-sub:#f4faf5; --bd-sub:rgba(0,0,0,.06);
  --bg-inp:#f8faf9; --bd-inp:#d1e8d3; --tx-inp:#1e293b;
  --tx1:#1e293b; --tx2:#4b5563; --tx3:#9ca3af;
  --divider:#d1fae5;
  --nav-tx:#2d5a2d; --nav-hbg:rgba(22,163,74,.09); --nav-htx:#14532d;
  --nav-abg:rgba(22,163,74,.14); --nav-atx:#166534; --nav-aline:#22c55e;
  --nav-sub:#4b7a4b;
  --th-bg:#f0f7f1; --th-tx:#6b7280; --row-hov:rgba(22,163,74,.04); --row-bd:rgba(0,0,0,.05);
  --form-lbl:#64748b; --form-sec-bd:#d1e8d3;
  --gruen:#16a34a; --gruen-d:#15803d; --rot:#dc2626; --gelb:#d97706; --blau:#2563eb;
  --radius:12px; --radius-s:8px;
}
:where(html.dark){
  --bg-page:#111; --bg-page2:#141414;
  --bg-side:#0d0d0d; --bd-side:rgba(255,255,255,.08);
  --bg-head:#141414; --bd-head:rgba(255,255,255,.07);
  --bg-card:rgba(24,24,24,.99); --bd-card:rgba(255,255,255,.08); --sh-card:0 4px 24px rgba(0,0,0,.45);
  --bg-sub:rgba(30,30,30,.99); --bd-sub:rgba(255,255,255,.06);
  --bg-inp:rgba(20,20,20,.99); --bd-inp:#333; --tx-inp:#e2e8f0;
  --tx1:#f1f5f9; --tx2:#9ca3af; --tx3:#6b7280;
  --divider:#252525;
  --nav-tx:rgba(255,255,255,.52); --nav-hbg:rgba(255,255,255,.07); --nav-htx:rgba(255,255,255,.9);
  --nav-abg:rgba(22,163,74,.22); --nav-atx:#4ade80; --nav-aline:#16a34a;
  --nav-sub:rgba(255,255,255,.38);
  --th-bg:rgba(18,18,18,.99); --th-tx:#6b7280; --row-hov:rgba(255,255,255,.03); --row-bd:rgba(255,255,255,.06);
  --form-lbl:#9ca3af; --form-sec-bd:#252525;
}

/* ---------- Teil 1: Bausteine ---------- */
:where(.btn){display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;border-radius:var(--radius-s);padding:7px 14px;font:600 13px/1.25 Inter,system-ui,sans-serif;cursor:pointer;text-decoration:none;white-space:nowrap;transition:filter .15s,background .15s,border-color .15s,color .15s}
:where(.btn:hover){filter:brightness(.96)}
:where(.btn:disabled,.btn[aria-disabled="true"]){opacity:.5;cursor:not-allowed;filter:none}
:where(.btn-green,.btn-primary){background:var(--gruen);color:#fff}
:where(.btn-ghost){background:var(--bg-sub);color:var(--tx2);border-color:var(--bd-card)}
:where(.btn-red,.btn-danger){background:var(--rot);color:#fff}
:where(.btn-blue){background:var(--blau);color:#fff}
:where(.btn-amber){background:var(--gelb);color:#fff}
:where(.btn-sm){padding:5px 10px;font-size:12px}
:where(.btn-lg){padding:10px 18px;font-size:14px}
:where(.btn-icon){padding:0;width:34px;height:34px}

:where(.card){background:var(--bg-card);border:1px solid var(--bd-card);box-shadow:var(--sh-card);border-radius:var(--radius)}
:where(.card-sub){background:var(--bg-sub);border:1px solid var(--bd-sub);border-radius:10px}

:where(.f-label){display:block;font-size:11.5px;font-weight:600;color:var(--form-lbl);margin-bottom:4px}
:where(.f-input){width:100%;background:var(--bg-inp);border:1.5px solid var(--bd-inp);border-radius:var(--radius-s);padding:7px 11px;font:13px Inter,system-ui,sans-serif;color:var(--tx-inp);transition:border-color .15s,box-shadow .15s}
:where(.f-input:focus){outline:none;border-color:var(--gruen);box-shadow:0 0 0 3px rgba(22,163,74,.12)}

:where(.badge){display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:700;white-space:nowrap}

:where(.kpi){background:var(--bg-card);border:1px solid var(--bd-card);border-radius:var(--radius);box-shadow:var(--sh-card);padding:14px 16px;display:flex;flex-direction:column;gap:2px}

:where(.leer){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:32px 16px;text-align:center;color:var(--tx3);font-size:13px}
:where(.leer > i){font-size:26px;opacity:.55}

:where(.zeilen){border:1px solid var(--bd-card);border-radius:var(--radius);background:var(--bg-card)}
:where(.zeile){display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 16px}
:where(.zeile + .zeile){border-top:1px solid var(--bd-card)}
:where(.zeile b){display:block;font-size:13.5px;font-weight:600;color:var(--tx1)}
:where(.zeile small){display:block;margin-top:2px;font-size:11.5px;color:var(--tx3)}

:where(.schalter){position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0}
:where(.schalter input){position:absolute;opacity:0;width:0;height:0}
:where(.schalter span){position:absolute;inset:0;border-radius:999px;background:#cbd5e1;cursor:pointer;transition:background .2s}
:where(html.dark .schalter span){background:#3f3f46}
:where(.schalter span)::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
:where(.schalter input:checked + span){background:var(--fd-acc,var(--gruen))}
:where(.schalter input:checked + span)::after{transform:translateX(18px)}

:where(.seg){display:inline-flex;background:var(--bg-sub);border:1px solid var(--bd-card);border-radius:9px;padding:3px;gap:3px;max-width:100%;overflow-x:auto}
:where(.seg > button){display:inline-flex;align-items:center;gap:6px;border:none;background:none;border-radius:7px;padding:6px 14px;font:600 12.5px Inter,system-ui,sans-serif;color:var(--tx2);cursor:pointer;white-space:nowrap}
:where(.seg > button.on,.seg > button.active){background:var(--bg-card);color:var(--tx1);box-shadow:0 1px 4px rgba(0,0,0,.12)}

/* Hinweis zum Aufklappen: kleine, gedämpfte Zeile am Seitenende statt Erklärblock */
.fbg-hinweis{display:flex;flex-direction:column;align-items:center;padding-top:8px}
.fbg-hinweis.hidden,.fbg-hinweis.hidden-view{display:none!important}
.fbg-hinweis > summary{list-style:none;display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font:500 11px/1.3 Inter,system-ui,sans-serif;color:var(--tx2);background:rgba(255,255,255,.72);cursor:pointer;user-select:none}
html.dark .fbg-hinweis > summary{background:rgba(0,0,0,.4)}
.fbg-hinweis > summary:hover,.fbg-hinweis[open] > summary{color:var(--tx1);background:var(--bg-card)}
.fbg-hinweis > summary::-webkit-details-marker{display:none}
.fbg-hinweis > summary > i{font-size:10px}
.fbg-hinweis-text{align-self:stretch;margin-top:6px;background:var(--bg-card);border:1px solid var(--bd-card);border-radius:12px;padding:12px 14px;font-size:12px;line-height:1.55;color:var(--tx2)}
.fbg-hinweis-text b,.fbg-hinweis-text strong{color:var(--tx1)}
@media print{.fbg-hinweis{display:none!important}}

/* Seitenleiste – auf allen Seiten gleich, Farben über die --nav-*-Variablen */
#sidebar{background:#eef4ef!important;border-right:1px solid var(--bd-side)}
html.dark #sidebar{background:#0d0d0d!important}
#sidebar .logo-box{border-bottom:1px solid var(--bd-side)}
#sidebar .user-area{border-top:1px solid var(--bd-side)}
#sidebar .user-name{color:var(--tx1)}
#sidebar .user-sub{color:var(--tx3);font-size:11px;background:none;border:none;cursor:pointer}
#sidebar .nav-sec{color:var(--tx3);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;padding:12px 12px 4px}
#sidebar .nav-group{display:flex;flex-direction:column}
#sidebar .nav-link{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:9px;color:var(--nav-tx);font-size:13.5px;font-weight:500;cursor:pointer;border:none;background:none;width:100%;text-align:left;border-left:3px solid transparent;text-decoration:none;transition:background .15s,color .15s;margin-bottom:1px}
#sidebar .nav-link:hover{background:var(--nav-hbg);color:var(--nav-htx)}
#sidebar .nav-link.active{background:var(--nav-abg);color:var(--nav-atx);border-left-color:var(--nav-aline);font-weight:600}
#sidebar .nav-link i.ic{width:16px;text-align:center;font-size:13px;flex-shrink:0}
#sidebar .nav-link .chv{margin-left:auto;font-size:10px;transition:transform .25s;flex-shrink:0}
#sidebar .nav-link .chv.open{transform:rotate(180deg)}
#sidebar .nav-sub{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 16px;border-radius:7px;color:var(--nav-sub);font-size:12.5px;font-weight:500;text-decoration:none;transition:background .15s,color .15s;margin-bottom:1px}
#sidebar .nav-sub:hover{background:var(--nav-hbg);color:var(--nav-htx)}
#sidebar .nav-sub.active{background:var(--nav-abg);color:var(--nav-atx);border-left:2px solid var(--nav-aline)}
#sidebar .nav-sub-ic{width:13px;font-size:11px;text-align:center;flex-shrink:0;opacity:.75}
#sidebar .submenu{max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1);padding-left:4px}
#sidebar .submenu.open{max-height:640px}

/* Meldungen (fbgToast) */
#fbg-toasts{position:fixed;top:18px;right:18px;z-index:2147482000;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.fbg-toast{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;font:500 13.5px/1.4 Inter,system-ui,sans-serif;box-shadow:0 8px 28px rgba(0,0,0,.18);pointer-events:auto;min-width:260px;max-width:380px;background:#14532d;color:#d1fae5;border-left:4px solid #22c55e;animation:fbgToastRein .28s cubic-bezier(.16,1,.3,1)}
.fbg-toast.err{background:#7f1d1d;color:#fee2e2;border-left-color:#f87171}
.fbg-toast.warn{background:#78350f;color:#fef3c7;border-left-color:#fbbf24}
.fbg-toast.info{background:#134e4a;color:#ccfbf1;border-left-color:#2dd4bf}
.fbg-toast span{flex:1;min-width:0}
.fbg-toast button{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:inherit;border-radius:7px;padding:4px 10px;font:600 12px Inter,system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.fbg-toast.raus{animation:fbgToastRaus .2s ease forwards}
@keyframes fbgToastRein{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes fbgToastRaus{to{opacity:0;transform:translateY(-8px)}}

/* ---------- Teil 2: Seitenleiste als Schublade unter 1024 px ---------- */
#fbg-nav-ov{position:fixed;inset:0;z-index:59;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .25s}
@media (max-width:1023.98px){
  #sidebar{position:fixed!important;top:0;bottom:0;left:0;height:100%!important;z-index:60!important;transform:translateX(-105%)!important;transition:transform .28s cubic-bezier(.2,.8,.2,1)!important;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);max-width:85vw}
  html.fbg-nav-offen #sidebar{transform:none!important;box-shadow:0 0 44px rgba(0,0,0,.28)!important}
  html.fbg-nav-offen #fbg-nav-ov{opacity:1;pointer-events:auto}
  html.fbg-nav-offen #fdu-bug{display:none!important}
  #btn-ham{display:inline-flex!important;align-items:center;justify-content:center;min-width:40px;min-height:40px;margin-left:-6px}
  #mob-ov{display:none!important}
}
@media (min-width:1024px){#fbg-nav-ov{display:none}}

/* ---------- Teil 2: Kopfzeile ---------- */
@media (max-width:639.98px){
  main > header .conn-badge{display:none!important}
  main > header button[onclick*="toggleTheme"],main > header #btn-theme{display:none!important}
  main > header select{max-width:112px;font-size:12px!important;padding-left:8px!important;padding-right:22px!important}
  main > header{padding-left:12px!important;padding-right:12px!important;gap:8px!important}
}
@media (pointer:coarse){
  main > header button, main > header a[class*="btn"]{min-height:36px;min-width:36px}
  main .btn{min-height:36px}
  main .btn.btn-sm{min-height:34px;min-width:34px}
}

/* ---------- Teil 2: Raster auf schmalen Handys ---------- */
@media (max-width:429px){
  .grid-cols-2:not(:has(input,select,textarea)),
  .grid-cols-3:not(:has(input,select,textarea)),
  .grid-cols-4:not(:has(input,select,textarea)),
  .grid-cols-5:not(:has(input,select,textarea)),
  .grid-cols-6:not(:has(input,select,textarea)){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:639.98px){
  .flex:has(> .kpi-pill){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible!important}
  .kpi-pill{min-width:0!important;padding:10px 8px!important}
}

/* ---------- Teil 2: Dialoge als Blatt von unten ---------- */
@media (max-width:639.98px){
  .fixed.inset-0.items-center.justify-center:has(> .card),.modal-overlay:has(> .card){align-items:flex-end!important;padding:0!important}
  .fixed.inset-0.items-center.justify-center > .card,.modal-overlay > .card{width:100%!important;max-width:none!important;margin:0!important;border-radius:18px 18px 0 0!important;border-bottom:0!important;max-height:92dvh!important;overflow-y:auto!important;padding-bottom:env(safe-area-inset-bottom);animation:fbgBlatt .26s cubic-bezier(.16,1,.3,1)}
  .fdu-ov:has(> .fdu-frage){align-items:flex-end;padding:0}
  .fdu-ov > .fdu-frage{max-width:none!important;border-radius:18px 18px 0 0;padding-bottom:calc(18px + env(safe-area-inset-bottom));animation:fbgBlatt .26s cubic-bezier(.16,1,.3,1)}
  #fbg-toasts{top:calc(64px + env(safe-area-inset-top));left:12px;right:12px;align-items:stretch}
  .fbg-toast{min-width:0;max-width:none}
  #toasts{top:calc(64px + env(safe-area-inset-top))!important;left:12px!important;right:12px!important;align-items:stretch}
  #toasts .toast{min-width:0!important;max-width:none!important}
}
@keyframes fbgBlatt{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}

/* ---------- Teil 2: Platz für den Käfer-Knopf ---------- */
@media (max-width:767.98px){
  main > .overflow-y-auto, main.mx-auto{padding-bottom:calc(76px + env(safe-area-inset-bottom))!important}
}

/* ---------- Dialoge fbgFrage / fbgEingabe ---------- */
.fdu-frage h3{margin:0 0 6px;font-size:16px;font-weight:700;letter-spacing:-.01em}
.fdu-frage p{margin:0;color:var(--tx2);font-size:13.5px;line-height:1.5;white-space:pre-line}
.fdu-frage .fdu-knoepfe{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.fdu-frage .fdu-btn{padding:9px 16px;font-size:13px}
.fdu-frage .fdu-btn.gefahr{background:var(--rot);border-color:transparent;color:#fff}
@media (max-width:639.98px){
  .fdu-frage .fdu-knoepfe{flex-direction:column-reverse}
  .fdu-frage .fdu-btn{width:100%;padding:12px 16px;font-size:14px}
}

@media print{#fbg-nav-ov,#fbg-toasts{display:none!important}}