/* =====================================================================
   frachtwerk INSIDE — Stylesheet
   CI: Pink #E6007E / Schwarz
===================================================================== */
:root{
  --pink:#E6007E; --pink-dark:#C1006A; --pink-soft:#FFE6F3;
  --black:#000; --sidebar:#0A0A0A;
  --bg:#F2F2F4; --card:#fff; --border:#E5E5EA; --border-strong:#D2D2D8;
  --text:#141416; --muted:#77777F;
  --radius:10px; --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --st-arbeit-bg:#FFD9EC;    --st-arbeit-fg:#9E0055;
  --st-redigiert-bg:#DCDCFB; --st-redigiert-fg:#3B3BA8;
  --st-veroeff-bg:#CFF3DC;   --st-veroeff-fg:#136B36;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:"Inter","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  background:var(--bg);color:var(--text);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
form{margin:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--pink);outline-offset:2px;border-radius:4px}
[hidden]{display:none !important}

/* Logo */
.logo{line-height:1;display:block}
.logo b{display:block;font-weight:800;letter-spacing:-.035em;color:var(--pink);font-size:26px}
.logo span{display:block;color:#fff;font-weight:600;letter-spacing:.22em;font-size:11px;margin-top:3px}

/* ---------- Login ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:minmax(300px,42%) 1fr}
@media(max-width:820px){.login{grid-template-columns:1fr}}
.login-brand{background:var(--black);color:#fff;padding:46px 44px;display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.login-brand .logo b{font-size:42px}
.login-brand .logo span{font-size:13px;letter-spacing:.3em}
.login-claim{font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1.25;max-width:14ch}
.login-rule{width:46px;height:3px;background:var(--pink);margin-top:26px}
.login-url{color:var(--pink);font-size:13px;font-weight:600}
.login-panel{background:#FAFAFB;display:flex;align-items:center;justify-content:center;padding:40px 24px}
.login-box{width:100%;max-width:360px}
.login-box h1{font-size:28px;line-height:1.2;letter-spacing:-.02em;margin:0 0 8px}
.login-box p.sub{color:var(--muted);margin:0 0 26px}
.field{position:relative;margin-bottom:12px}
.field .ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#9A9AA2;display:flex}
.field input{width:100%;padding:12px 14px 12px 40px;border:1px solid var(--border-strong);border-radius:var(--radius);background:#fff}
.field .peek{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#9A9AA2;display:flex}
.btn-primary{width:100%;background:var(--pink);color:#fff;font-weight:600;padding:12px 18px;border-radius:var(--radius);transition:background .15s}
.btn-primary:hover{background:var(--pink-dark)}
.login-links{text-align:center;margin-top:14px}
.login-links a{font-size:13px;text-decoration:underline;text-underline-offset:3px}
.login-note{margin-top:24px;padding:12px 14px;border:1px dashed var(--border-strong);border-radius:var(--radius);color:var(--muted);font-size:12.5px;background:#fff}
.login-note strong{color:var(--text)}
.login-error{background:#FFE9EF;border:1px solid #F7C2D3;color:#9E0055;padding:11px 13px;border-radius:var(--radius);margin-bottom:16px;font-size:13.5px}

/* ---------- Shell ---------- */
#app{display:grid;grid-template-columns:224px 1fr;min-height:100vh}
@media(max-width:760px){#app{grid-template-columns:1fr}}
.sidebar{background:var(--sidebar);color:#fff;padding:26px 16px 20px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
@media(max-width:760px){.sidebar{position:static;height:auto}}
.sidebar .logo{padding:0 8px 26px}
.nav{display:flex;flex-direction:column;gap:2px;flex:1}
@media(max-width:760px){.nav{flex-direction:row;flex-wrap:wrap}}
.nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px;color:#C9C9CF;font-size:14px;transition:background .12s,color .12s}
.nav a:hover{background:#1C1C1F;color:#fff}
.nav a.active{background:var(--pink);color:#fff;font-weight:600}
.nav svg{flex:none}
.nav-foot{flex:none}
.nav-foot a{color:#9A9AA2}
.main{display:flex;flex-direction:column;min-width:0}

.topbar{display:flex;align-items:center;gap:12px;padding:12px 28px;background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:30}
.topbar .spacer{flex:1}
.searchbox{position:relative;width:250px;max-width:40vw}
.searchbox input{width:100%;padding:8px 12px 8px 34px;border:1px solid var(--border-strong);border-radius:999px;background:#fff}
.searchbox .ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:#9A9AA2;display:flex}
.btn-pill{background:var(--pink);color:#fff;font-weight:600;padding:9px 16px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;transition:background .15s}
.btn-pill:hover{background:var(--pink-dark)}
.btn-ghost{border:1px solid var(--border-strong);background:#fff;padding:8px 14px;border-radius:999px;font-weight:500;display:inline-flex;align-items:center;gap:7px}
.btn-ghost:hover{background:#F6F6F8}
.btn-danger{border:1px solid #F3C3CF;background:#fff;color:#B3003C;padding:8px 14px;border-radius:999px;font-weight:500}
.btn-danger:hover{background:#FFF1F5}
.dropdown{position:relative}
.bell{position:relative;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#45454C}
.bell:hover{background:#F2F2F4}
.bell .count{position:absolute;top:2px;right:1px;min-width:17px;height:17px;padding:0 4px;background:var(--pink);color:#fff;font-size:10.5px;font-weight:700;border-radius:999px;display:grid;place-items:center}
.me{display:flex;align-items:center;gap:9px;padding:4px 10px 4px 4px;border-radius:999px}
.me:hover{background:#F2F2F4}
.me small{color:var(--muted);display:block;font-size:11.5px;line-height:1.1}
.me .who{text-align:left;font-weight:600;font-size:13px;line-height:1.2;display:block}
@media(max-width:640px){.me span:not(.avatar){display:none}}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px;flex:none}
.avatar.sm{width:26px;height:26px;font-size:10.5px}
.panel{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);z-index:60;overflow:hidden;min-width:200px}
.notifpanel{width:330px}
.panel header{padding:12px 14px;border-bottom:1px solid var(--border);font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:10px}
.panel .item{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid #F4F4F6}
.panel .item:last-child{border-bottom:none}
.panel .item:hover{background:#FAFAFB}
.panel .item.unread{background:#FFF5FA}
.panel .item .tm{color:var(--muted);font-size:11.5px;margin-top:2px}
.linkish{color:var(--pink);font-weight:600;font-size:13px}
.linkish:hover{text-decoration:underline}

.page{padding:24px 28px 60px;max-width:1320px;width:100%}
.pagefoot{padding:16px 28px 26px;color:#A0A0A8;font-size:12px}
h1.page-title{font-size:27px;letter-spacing:-.02em;margin:0 0 4px;font-weight:700}
.page-sub{color:var(--muted);margin:0 0 22px;max-width:78ch}
h2.sec{font-size:18px;letter-spacing:-.01em;margin:30px 0 12px}

.alert{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline;padding:12px 15px;border-radius:var(--radius);margin-bottom:18px;border:1px solid}
.alert.ok{background:#EEFBF3;border-color:#BFE9CF;color:#0F5F30}
.alert.err{background:#FFE9EF;border-color:#F7C2D3;color:#9E0055}
.alert.info{background:#F4F4FB;border-color:#DCDCF2;color:#3B3BA8}
.alert span{font-weight:400}

/* Karten */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card.pad{padding:18px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border)}
.card-head h3{margin:0;font-size:16px;letter-spacing:-.01em}
.grid-stats{display:grid;grid-template-columns:repeat(3,1fr) 250px;gap:14px;align-items:start}
@media(max-width:1100px){.grid-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-stats{grid-template-columns:1fr}}
.stat{display:flex;flex-direction:column;gap:6px;padding:16px 18px}
.stat .hd{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:13px}
.stat .hd svg{color:var(--pink)}
.stat .val{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.05}
.stat .val.small{font-size:20px}
.stat .note{color:var(--muted);font-size:12.5px}
.legend{padding:14px 16px}
.legend h4{margin:0 0 10px;font-size:13px;color:var(--muted);font-weight:600}
.legend ul{list-style:none;margin:0;padding:0}
.legend li{display:flex;align-items:center;gap:9px;padding:3px 0;font-size:13px}
.dot{width:10px;height:10px;border-radius:50%;flex:none;display:inline-block}

/* Tabellen */
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{text-align:left;font-weight:600;color:var(--muted);font-size:12.5px;padding:11px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
tbody td{padding:11px 14px;border-bottom:1px solid #F0F0F3;vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr.clickable{cursor:pointer}
tbody tr.clickable:hover{background:#FAFAFB}
.cell-title{display:flex;align-items:center;gap:10px;font-weight:600}
.swatch{width:11px;height:22px;border-radius:3px;flex:none}
.person{display:flex;align-items:center;gap:8px;white-space:nowrap}
.badge{display:inline-block;padding:3px 10px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap}
.badge.arbeit{background:var(--st-arbeit-bg);color:var(--st-arbeit-fg)}
.badge.redigiert{background:var(--st-redigiert-bg);color:var(--st-redigiert-fg)}
.badge.veroeffentlicht{background:var(--st-veroeff-bg);color:var(--st-veroeff-fg)}
.badge.neutral{background:#EFEFF2;color:#5A5A62}
.empty{padding:34px 18px;text-align:center;color:var(--muted)}
.empty strong{display:block;color:var(--text);margin-bottom:4px}
.ficon{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;font-size:10px;font-weight:700;color:#fff;flex:none}

/* Redaktionsplan */
.plan-layout{display:grid;grid-template-columns:1fr 210px;gap:18px;align-items:start}
@media(max-width:960px){.plan-layout{grid-template-columns:1fr}}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.segmented{display:inline-flex;background:#EAEAEE;border-radius:8px;padding:3px;gap:3px}
.segmented a{padding:6px 14px;border-radius:6px;font-size:13px;display:inline-flex;align-items:center;gap:6px;color:#55555C}
.segmented a.active{background:var(--pink);color:#fff;font-weight:600}
.monthnav{display:flex;align-items:center;gap:4px;margin-left:6px}
.monthnav a{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#45454C}
.monthnav a:hover{background:#EAEAEE}
.monthnav .label{font-weight:600;min-width:150px;text-align:center}
.filters{padding:16px}
.filters h4{margin:0 0 8px;font-size:13px;font-weight:700}
.filters h4:not(:first-child){margin-top:16px}
.filters label{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:13px;cursor:pointer}
.filters input[type=checkbox]{accent-color:var(--pink);width:15px;height:15px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);border-left:1px solid var(--border);border-top:1px solid var(--border)}
.cal .dow{padding:8px;font-size:12px;font-weight:600;color:var(--muted);border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:#FAFAFB}
.cal .day{min-height:92px;padding:5px 6px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:4px}
.cal .day .n{font-size:12px;color:#8C8C94}
.cal .day.out{background:#FBFBFC}
.cal .day.out .n{color:#C9C9CF}
.cal .day.today .n{background:var(--pink);color:#fff;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-weight:700}
.chip{display:block;border-radius:5px;padding:4px 6px;font-size:11.5px;line-height:1.25;border-left:3px solid transparent}
.chip b{display:block;font-weight:600}
.chip span{color:rgba(0,0,0,.55)}

/* Formulare */
.form-grid{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
@media(max-width:960px){.form-grid{grid-template-columns:1fr}}
.form-row{margin-bottom:16px}
.form-row .lbl{display:block;font-weight:600;margin-bottom:6px;font-size:13.5px}
.form-row .req{color:var(--pink)}
.form-row input[type=text],.form-row input[type=email],.form-row input[type=password],
.form-row input[type=date],.form-row select,.form-row textarea{
  width:100%;padding:11px 13px;border:1px solid var(--border-strong);border-radius:var(--radius);background:#fff}
.form-row textarea{min-height:96px;resize:vertical}
.form-row input[type=color]{width:52px;height:38px;padding:2px;border:1px solid var(--border-strong);border-radius:8px;background:#fff}
.hint{color:var(--muted);font-size:12.5px;margin-top:6px}
.checkline{display:flex;align-items:center;gap:9px;font-size:13.5px;cursor:pointer}
.checkline input{accent-color:var(--pink);width:16px;height:16px}
.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;flex-wrap:wrap}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.cols2{grid-template-columns:1fr}}
.drop{border:1.5px dashed var(--border-strong);border-radius:var(--radius);background:#FAFAFB;padding:24px 18px;text-align:center;transition:border-color .15s,background .15s;cursor:pointer}
.drop.over{border-color:var(--pink);background:var(--pink-soft)}
.drop .cloud{color:#9A9AA2;margin-bottom:8px}
.drop p{margin:0 0 4px;font-size:13.5px}
.drop .types{color:var(--muted);font-size:12px}
.filelist{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.fileitem{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:#fff;font-size:13px}

/* Listen */
.idea{display:flex;gap:14px;padding:16px;border-bottom:1px solid #F0F0F3}
.idea:last-child{border-bottom:none}
.idea .body{flex:1;min-width:0}
.idea h4{margin:0 0 3px;font-size:15px}
.idea p{margin:6px 0 0;color:#4A4A52}
.meta{color:var(--muted);font-size:12.5px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.member{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid #F0F0F3}
.member:last-child{border-bottom:none}
.member .nm{font-weight:600}
.member .rl{color:var(--muted);font-size:13px}

/* Detail */
.detail-layout{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
@media(max-width:960px){.detail-layout{grid-template-columns:1fr}}
.crumb{color:var(--muted);font-size:13px;margin-bottom:10px}
.crumb a:hover{text-decoration:underline}
.kv{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid #F0F0F3}
.kv:last-child{border-bottom:none}
.kv svg{color:var(--pink);margin-top:2px;flex:none}
.kv .k{color:var(--muted);font-size:12.5px}
.kv .v{font-weight:600}
.note{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid #F0F0F3}
.note:last-of-type{border-bottom:none}
.note .who{font-weight:600;font-size:13px}
.note .tm{color:var(--muted);font-size:11.5px}
.note .txt{font-size:13px;white-space:pre-wrap}
.noteform{display:flex;gap:8px;padding-top:12px}
.noteform input{flex:1;padding:9px 12px;border:1px solid var(--border-strong);border-radius:999px}
.noteform button{width:36px;height:36px;border-radius:50%;background:var(--pink);color:#fff;display:grid;place-items:center;flex:none}
.statusbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.statusbar button{padding:7px 13px;border-radius:999px;border:1px solid var(--border-strong);background:#fff;font-size:13px;display:inline-flex;align-items:center;gap:7px}
.statusbar button:hover{background:#F6F6F8}
.statusbar button.on{border-color:transparent;font-weight:600}
.statusbar button.on.arbeit{background:var(--st-arbeit-bg);color:var(--st-arbeit-fg)}
.statusbar button.on.redigiert{background:var(--st-redigiert-bg);color:var(--st-redigiert-fg)}
.statusbar button.on.veroeffentlicht{background:var(--st-veroeff-bg);color:var(--st-veroeff-fg)}
.rowmenu{color:#A6A6AE;padding:2px 6px;border-radius:6px}
.rowmenu:hover{background:#EFEFF2;color:var(--text)}
.rolechip{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--pink-soft);color:var(--pink-dark)}
.rolechip.mitarbeiter{background:#EFEFF2;color:#5A5A62}

/* --- Version 2: Profilbilder, Upload-Felder, Personengruppen --- */
img.avatar{object-fit:cover;display:block;background:#EFEFF2}
.avatar.gross{width:88px;height:88px;font-size:28px}
.avatarstapel{display:inline-flex;align-items:center;margin-left:6px}
.avatarstapel .avatar{margin-left:-8px;box-shadow:0 0 0 2px #fff}
.avatarstapel img.avatar{box-shadow:0 0 0 2px #fff}
.avatarstapel .mehr{margin-left:4px;font-size:11.5px;color:var(--muted)}
.personen{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.personen .person{font-size:13px}

.uploadkopf{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.uploadfelder{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px}
@media(max-width:860px){.uploadfelder{grid-template-columns:1fr}}
.uploadfeld{border:1px solid var(--border);border-radius:var(--radius);padding:14px;background:#FCFCFD}
.uploadfeld .lbl{display:block;font-weight:600;font-size:13.5px}
.uploadfeld .hint{margin:4px 0 10px}
.drop.klein{padding:16px 12px}
.drop.klein .cloud{margin-bottom:4px}
.drop.klein p{font-size:13px;margin:0}
.fileitem .ficon{font-size:9px}

.personwahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px 14px;
  border:1px solid var(--border);border-radius:var(--radius);padding:12px;background:#FCFCFD}
.profilbild-zeile{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}

/* Personen-Chips mit Entfernen-Kreuz */
.badge.personchip{display:inline-flex;align-items:center;gap:6px}
.badge.personchip form{display:inline-flex}
.badge.personchip .x{color:inherit;opacity:.55;font-size:12px;line-height:1;padding:2px 3px;border-radius:4px}
.badge.personchip .x:hover{opacity:1;background:rgba(0,0,0,.07)}
.personen .person form{display:inline-flex}

/* Zuständigkeit direkt in der Kopfzeile wechseln */
.zustform{display:inline-flex;align-items:center;gap:6px}
.zustform select{padding:6px 10px;border:1px solid var(--border-strong);border-radius:999px;background:#fff;font-size:13px;max-width:230px}
.zustform button{padding:6px 13px;font-size:13px}
.personen .person .linkish{padding:0 2px}