/* FR-System — FR-CI über dem SAP-Layout: Schwarz, Weiß, FR-Orange, Fredericka für Titel. */
@font-face{font-family:'Fredericka';src:url('/fonts/FrederickatheGreat-Regular.ttf') format('truetype');font-display:swap}

:root{
  --primary:#C4520F; --primary-dark:#9E420C; --primary-light:#F06820;
  --leaf:#F06820;
  --font:Arial,'Helvetica Neue',Helvetica,sans-serif;
  --font-display:Arial,'Helvetica Neue',sans-serif;
  --bg:#F4F2EE; --bg-deep:#ECE8E1; --bg-surface:#FFFFFF; --bg-hover:#F7F5F1;
  --border:#E6E1D9; --border-light:#EFEBE4;
  --text:#141414; --text-muted:#5E5A55; --text-light:#8F8981;
  --sidebar-bg:#141414; --sidebar-hover:rgba(255,255,255,.07);
  --sidebar-active:rgba(240,104,32,.20); --sidebar-text:#A9A49C;
  --fr:#F06820; --fr-text:#C4520F; --ok:#2F7A3E; --ok-bg:#E3F1E4; --warn:#9A5B00; --warn-bg:#FBEFD9;
}
.btn{box-shadow:0 3px 10px rgba(196,82,15,.22)}
.feld input:focus,.feld select:focus,.feld textarea:focus{box-shadow:0 0 0 3px rgba(240,104,32,.16)}
.fr-titel,.topbar h1,.login-box h1{font-family:'Fredericka',Georgia,serif!important;font-weight:400!important;color:var(--fr)}
.topbar h1{font-size:24px}
.login-box .mark{color:var(--fr-text)}
#login-screen{background:#141414}

/* Seitenleiste */
.fr-logo{display:block;padding:18px 18px 8px}
.fr-logo img{height:46px;filter:brightness(0) invert(1)}
.fr-logo .s{color:#8F8981;font-size:11px;margin-top:6px;letter-spacing:.08em;text-transform:uppercase}
.fr-modus{margin:6px 10px 2px;padding:8px 10px;border-radius:9px;background:rgba(240,104,32,.14);color:#F4C7AE;font-size:12px;line-height:1.35}
.fr-modus b{color:#fff;display:block;font-size:13px}
.fr-zurueck{margin:8px 10px;width:calc(100% - 20px);background:var(--fr);color:#fff;border:0;border-radius:9px;padding:9px 10px;font-weight:700;cursor:pointer;text-align:left}
.fr-ansicht{margin:8px 0 4px}
.fr-ansicht label{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8F8981;margin-bottom:4px}
.fr-ansicht select{width:100%;background:#222;color:#fff;border:1px solid #333;border-radius:7px;padding:6px 8px}
.nav-item .zahl.fr-rot{background:var(--fr);color:#fff}

/* Bausteine */
.fr-chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--bg-deep);color:var(--text-muted);white-space:nowrap}
.fr-chip.anfrage{background:#EEE9F6;color:#5B3E8C}.fr-chip.angebot,.fr-chip.abgegeben{background:#E3EEF7;color:#2C6C9C}
.fr-chip.zusage,.fr-chip.ok,.fr-chip.gültig,.fr-chip.bestätigt,.fr-chip.angenommen,.fr-chip.verfügbar{background:var(--ok-bg);color:var(--ok)}
.fr-chip.durchfuehrung,.fr-chip.bestellt,.fr-chip.versendet{background:#FDE3D3;color:var(--fr-text)}
.fr-chip.ruecklauf,.fr-chip.abrechnung,.fr-chip.Entwurf,.fr-chip.warn,.fr-chip.bald{background:var(--warn-bg);color:var(--warn)}
.fr-chip.absage,.fr-chip.rot,.fr-chip.überfällig,.fr-chip.abgesagt,.fr-chip.Werkstatt{background:var(--danger-bg);color:var(--danger)}
.fr-chip.aenderung,.fr-chip.Änderung{background:var(--fr);color:#fff}
.fr-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:18px}
.fr-grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.fr-tab{width:100%;border-collapse:collapse;font-size:13px}
.fr-tab th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-light);padding:9px 12px;border-bottom:1px solid var(--border);background:var(--bg-hover);white-space:nowrap}
.fr-tab td{padding:8px 12px;border-bottom:1px solid var(--border-light);vertical-align:top}
.fr-tab tr.klick{cursor:pointer}.fr-tab tr.klick:hover td{background:#FFF6F0}
.fr-tab td.r,.fr-tab th.r{text-align:right;font-variant-numeric:tabular-nums}
.fr-tab tr.warn td{background:#FFF8EC}.fr-tab tr.rot td{background:#FDF0EF}
.fr-hinweis{display:flex;gap:10px;padding:11px 16px;border-bottom:1px solid var(--border-light);align-items:flex-start}
.fr-hinweis:last-child{border-bottom:0}
.fr-hinweis .p{width:9px;height:9px;border-radius:50%;background:var(--fr);margin-top:6px;flex:none}
.fr-hinweis.warnung .p{background:var(--danger)}.fr-hinweis.entscheidung .p{background:#2C6C9C}.fr-hinweis.aenderung .p{background:var(--fr)}
.fr-hinweis .t{font-weight:700}.fr-hinweis .x{color:var(--text-muted);font-size:13px}
.fr-hinweis .rechts{margin-left:auto}
.fr-pipe{display:grid;grid-template-columns:repeat(6,minmax(150px,1fr));gap:10px;overflow-x:auto}
.fr-pipe h4{margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-light)}
.fr-karte{background:var(--bg-hover);border-left:3px solid #F6A47E;border-radius:6px;padding:8px 10px;margin-bottom:8px;cursor:pointer;font-size:13px;line-height:1.3}
.fr-karte:hover{background:#FFF0E6}
.fr-karte.sap{border-left-color:var(--fr);background:#FDF0E8}
.fr-karte b{display:block}.fr-karte i{font-style:normal;color:var(--text-muted);font-size:12px}
.fr-kanban{display:grid;grid-template-columns:repeat(5,minmax(170px,1fr));gap:12px;overflow-x:auto}
.fr-kanban .spalte{background:var(--bg-hover);border-radius:10px;padding:10px}
.fr-kanban h4{margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-light)}
.fr-kanban .k{background:#fff;border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin-bottom:8px;font-size:13px}
.fr-zeile{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.fr-zeile .feld{margin:0}
.fr-zeile input,.fr-zeile select{padding:7px 9px;border:1px solid var(--border);border-radius:7px;background:#fff}
.fr-gross{font-family:'Fredericka',Georgia,serif;color:var(--fr);font-size:30px;line-height:1.1}
.fr-meldung{border-left:3px solid var(--fr);background:#FFF6F0;padding:10px 14px;border-radius:6px;margin:8px 0;font-size:13px}
.fr-meldung b{display:block;margin-bottom:3px}
.fr-mail{white-space:pre-wrap;font-family:ui-monospace,Menlo,monospace;font-size:12px;background:var(--bg-hover);border-radius:8px;padding:10px 12px;margin-top:8px}
.fr-dp{border-collapse:collapse;font-size:12px;width:100%}
.fr-dp th,.fr-dp td{border:1px solid var(--border-light);padding:5px 6px;vertical-align:top}
.fr-dp th{background:var(--bg-hover);font-size:11px;white-space:nowrap}
.fr-dp th.we,.fr-dp td.we{background:#FAF8F4}
.fr-dp .s{background:#FDE3D3;border-radius:4px;padding:2px 5px;margin:1px 0;color:#7A3409;white-space:nowrap}
.fr-dp .s.p{background:#E3EEF7;color:#24557A}
.fr-demo{margin:14px 18px 6px;font-size:10.5px;line-height:1.4;color:#77726B}

/* Frag die Krabbe */
#krabbe-knopf{position:fixed;right:22px;bottom:22px;z-index:60;background:var(--fr);color:#fff;border:0;border-radius:999px;padding:13px 20px;font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 8px 24px rgba(240,104,32,.4)}
#krabbe{position:fixed;right:22px;bottom:80px;width:min(440px,calc(100vw - 32px));max-height:70vh;z-index:61;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.22);display:flex;flex-direction:column;overflow:hidden}
#krabbe .kopf{background:#141414;color:#fff;padding:12px 16px;display:flex;align-items:center;gap:10px}
#krabbe .kopf b{font-family:'Fredericka',Georgia,serif;font-weight:400;font-size:20px;color:var(--fr)}
#krabbe .kopf button{margin-left:auto;background:none;border:0;color:#aaa;font-size:20px;cursor:pointer}
#krabbe .verlauf{padding:12px 14px;overflow-y:auto;flex:1;font-size:13.5px}
#krabbe .frage{background:var(--bg-hover);border-radius:10px;padding:8px 11px;margin:6px 0 6px 40px}
#krabbe .antwort{border-left:3px solid var(--fr);padding:4px 10px;margin:6px 0;white-space:pre-wrap}
#krabbe .eingabe{display:flex;gap:6px;padding:10px;border-top:1px solid var(--border)}
#krabbe .eingabe input{flex:1;padding:9px 11px;border:1px solid var(--border);border-radius:9px}
.mic{background:#141414;color:#fff;border:0;border-radius:9px;padding:0 12px;cursor:pointer;font-size:15px}
.mic.an{background:var(--danger);animation:puls 1s infinite}
@keyframes puls{50%{opacity:.6}}
@media (max-width:900px){.fr-pipe,.fr-kanban{grid-template-columns:repeat(6,200px)}}
[id^="s-fr_"] .klappleiste{display:none}
.fr-logo{text-decoration:none}
body[data-frmodus=system] #uhren{display:none!important}
/* Ausbaustufe 2 */
.fr-tabs,.fr-filter{display:flex;gap:6px;flex-wrap:wrap}
.fr-filter{margin-bottom:12px}
.fr-tabbtn{border:1px solid var(--border);background:#fff;border-radius:999px;padding:6px 13px;font-weight:600;font-size:12.5px;cursor:pointer;color:var(--text-muted)}
.fr-tabbtn.an{background:#141414;border-color:#141414;color:#fff}
.fr-ampel{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--ok);vertical-align:middle}
.fr-ampel.gelb{background:#E0A100}.fr-ampel.rot{background:var(--danger)}
.fr-wz{display:flex;gap:8px;align-items:center;font-size:12.5px;padding:3px 0;border-top:1px dashed var(--border-light)}
.fr-wz span{margin-left:auto;color:var(--text-muted)}
.fr-verlauf{border-left:2px solid var(--border);margin-left:8px}
.fr-vz{display:flex;gap:10px;padding:8px 0 8px 14px;position:relative}
.fr-vz .i{position:absolute;left:-11px;top:8px;background:#fff;color:var(--fr);font-size:12px;width:20px;text-align:center}
.fr-vz .m{font-size:11.5px;color:var(--text-light)}
.fr-vz .t{white-space:pre-wrap;font-size:13px}
.fr-vz.status .t{font-weight:700}
.fr-post{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:18px;align-items:start}
.fr-postliste{max-height:75vh;overflow-y:auto}
.fr-pm{padding:10px 14px;border-bottom:1px solid var(--border-light);cursor:pointer;font-size:13px}
.fr-pm:hover{background:#FFF6F0}.fr-pm.an{background:#FDF0E8;box-shadow:inset 3px 0 0 var(--fr)}
.fr-pm.neu b{color:var(--fr-text)}.fr-pm.erl{opacity:.55}
.fr-pm .o{display:flex;justify-content:space-between;gap:8px}.fr-pm .o span{color:var(--text-light);font-size:12px}
.fr-pm .b{font-weight:600;margin:2px 0}.fr-pm .z{color:var(--text-muted);font-size:12px}
.fr-stufen{display:flex;gap:4px;flex-wrap:wrap;margin-top:14px}
.fr-stufe{border:1px solid var(--border);background:#fff;padding:6px 10px;border-radius:6px;font-size:12px;cursor:pointer;color:var(--text-muted)}
.fr-stufe.fertig{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-bg)}
.fr-stufe.an{background:var(--fr);color:#fff;border-color:var(--fr);font-weight:700}
#krabbe .quellen{margin-top:6px;font-size:11.5px;color:var(--text-light)}
#krabbe .quellen a{color:var(--fr-text)}
#krabbe .vorschlag{border:1px solid var(--border);border-radius:10px;padding:9px 11px;margin:8px 0;background:var(--bg-hover);white-space:normal}
#krabbe .vorschlag select{width:100%;margin:6px 0;padding:5px;border:1px solid var(--border);border-radius:6px}
#krabbe .vorschlag .ok{color:var(--ok);font-weight:700;margin-top:6px}
#krabbe{width:min(520px,calc(100vw - 32px));max-height:78vh}
@media (max-width:900px){.fr-post{grid-template-columns:1fr}}