/* Die Farb-, Radius- und Schattenvariablen der Anwendung standen früher hier.
   Sie liegen jetzt in css/app-tokens.css und sind dort auf die Tokens des
   Design-Systems abgebildet. Sie hier erneut zu setzen würde die Zuordnung
   wieder aushebeln, weil der spätere Block im CSS gewinnt. */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:var(--font-body);font-size:14.5px;background:var(--gray-50);color:var(--gray-800);min-height:100vh;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;}
::selection{background:var(--accent-light);}
button,a{touch-action:manipulation;}

/* kos-ai.de Design-Animationen */
@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.98);}to{opacity:1;transform:none;}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
@keyframes msgIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* LOGIN */
#login-screen{min-height:100vh;min-height:100dvh;background:linear-gradient(150deg,var(--navy) 0%,var(--navy-mid) 55%,#1c3f6e 100%);display:flex;align-items:center;justify-content:center;padding:20px;padding-top:calc(20px + env(safe-area-inset-top));padding-bottom:calc(20px + env(safe-area-inset-bottom));}
.login-card{background:var(--white);border-radius:18px;padding:44px 42px;width:420px;max-width:95vw;box-shadow:0 24px 64px rgba(0,0,0,0.22);animation:cardIn .45s var(--ease-out) both;}
.login-logo{display:block;margin:0 auto 30px;width:220px;height:auto;}
.login-subtitle{font-size:20px;font-weight:600;color:var(--navy);margin-bottom:4px;}
.login-desc{font-size:13px;color:var(--gray-600);margin-bottom:24px;}
.form-group{margin-bottom:16px;}
.form-group label{display:block;font-size:12px;font-weight:600;color:var(--gray-600);margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px;}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:11px 14px;border:1.5px solid var(--gray-200);border-radius:var(--radius-input);font-size:14px;font-family:var(--font-body);outline:none;transition:border-color .2s,box-shadow .2s;background:var(--white);color:var(--gray-800);}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);}
.btn-login{width:100%;padding:13px;background:var(--navy);color:var(--white);border:none;border-radius:var(--radius-input);font-size:15px;font-weight:600;cursor:pointer;transition:background .2s,transform .15s,box-shadow .2s;font-family:var(--font-body);margin-top:6px;}
.btn-login:hover{background:var(--navy-mid);transform:translateY(-1px);box-shadow:var(--shadow);}
.btn-login:active{transform:translateY(0);}

/* Microsoft-Login (M365) */
.ms-btn{display:none;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px;margin-bottom:4px;border:1px solid var(--gray-300);border-radius:var(--radius-input);background:var(--white);color:var(--gray-800);font-weight:600;font-size:14px;text-decoration:none;transition:border-color .2s,box-shadow .2s,transform .15s;cursor:pointer;font-family:var(--font-body);}
.ms-btn:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-1px);}
.ms-btn:active{transform:translateY(0);}
.ms-btn svg{width:18px;height:18px;flex-shrink:0;}
body.ms-enabled .ms-btn{display:flex;}
.login-divider{display:flex;align-items:center;gap:10px;color:var(--gray-400);font-size:12px;margin:14px 0;}
.login-divider::before,.login-divider::after{content:"";flex:1;height:1px;background:var(--gray-200);}
/* Lokale Anmeldung ist nur noch der Notausgang der IT: bei aktiver Microsoft-
   Anmeldung eingeklappt, per Link darunter aufklappbar. */
body.ms-enabled #local-login{display:none;}
body.ms-enabled.local-login-open #local-login{display:block;}
.login-local-toggle{display:none;width:100%;margin-top:14px;padding:6px;background:none;border:none;color:var(--gray-500);font-family:var(--font-body);font-size:12px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.login-local-toggle:hover{color:var(--navy);}
body.ms-enabled .login-local-toggle{display:block;}
.login-hotline{margin-top:18px;background:var(--gray-50);border-radius:var(--radius-input);padding:11px 14px;display:flex;align-items:center;gap:10px;}
.login-hotline-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0;}
.login-hotline p{font-size:12px;color:var(--gray-600);}
.login-hotline strong{color:var(--navy);}
.login-footer{text-align:center;font-size:11px;color:var(--gray-400);margin-top:20px;}

/* APP SHELL */
#app{display:none;height:100vh;height:100dvh;}

/* BOOT-LADESCREEN (sofort sichtbar, bis Bootstrap fertig ist) */
#boot-screen{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;background:linear-gradient(150deg,var(--navy) 0%,var(--navy-mid) 55%,#1c3f6e 100%);transition:opacity .4s ease;}
#boot-screen.hide{opacity:0;pointer-events:none;}
.boot-logo{width:210px;max-width:66vw;height:auto;animation:bootPulse 1.8s ease-in-out infinite;}
@keyframes bootPulse{0%,100%{opacity:.85;transform:scale(1);}50%{opacity:1;transform:scale(1.035);}}
.boot-bar{width:210px;max-width:60vw;height:4px;border-radius:3px;background:rgba(255,255,255,.15);overflow:hidden;position:relative;}
.boot-bar::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;border-radius:3px;background:var(--accent);animation:bootSlide 1.15s cubic-bezier(.55,.1,.45,.9) infinite;}
@keyframes bootSlide{0%{left:-40%;}100%{left:110%;}}
.boot-text{color:rgba(255,255,255,.7);font-size:13px;font-weight:500;letter-spacing:.3px;}
@media (prefers-reduced-motion: reduce){.boot-logo,.boot-bar::after{animation:none;}}

/* HEADER */
.header{position:fixed;top:0;left:0;right:0;height:var(--header-h);background:var(--navy);display:flex;align-items:center;padding:0 20px 0 0;padding-right:calc(20px + env(safe-area-inset-right));padding-left:env(safe-area-inset-left);z-index:100;}
.header-logo{width:var(--sidebar-w);flex-shrink:0;display:flex;align-items:center;padding:0 18px;border-right:1px solid rgba(255,255,255,0.08);}
.header-logo svg{height:34px;width:auto;}
.header-search{flex:1;display:flex;align-items:center;padding:0 20px;}
.search-wrap{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.10);border-radius:8px;padding:7px 14px;width:320px;max-width:100%;}
.search-wrap svg{width:15px;height:15px;opacity:.6;flex-shrink:0;}
.search-wrap input{background:none;border:none;outline:none;color:var(--white);font-size:14px;font-family:var(--font-body);width:100%;}
.search-wrap input::placeholder{color:rgba(255,255,255,.4);}
.header-right{display:flex;align-items:center;gap:14px;}
.header-hotline{display:flex;align-items:center;gap:7px;background:var(--accent);border-radius:8px;padding:7px 14px;cursor:pointer;text-decoration:none;transition:background .2s,transform .15s;}
a.header-hotline:hover{background:var(--accent-hover);transform:translateY(-1px);}
.login-hotline-number{text-decoration:none;}
.login-hotline-number strong{color:var(--navy);transition:color .15s;}
.login-hotline-number:hover strong{color:var(--accent-dark);text-decoration:underline;}
.header-hotline svg{width:14px;height:14px;}
.header-hotline-label{display:flex;flex-direction:column;line-height:1.2;}
.header-hotline-label span:first-child{font-size:9px;font-weight:500;color:rgba(255,255,255,.8);text-transform:uppercase;letter-spacing:.4px;}
.header-hotline-label span:last-child{font-size:13px;font-weight:700;color:var(--white);}
.role-badge{font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;background:rgba(255,255,255,.12);color:rgba(255,255,255,.85);}
.role-badge.manager{background:rgba(124,58,237,.25);color:#d6c2ff;}
.user-chip{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 10px 4px 6px;border-radius:8px;transition:background .2s;}
.user-chip:hover{background:rgba(255,255,255,.08);}
.user-avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--white);}
.user-name{font-size:13px;font-weight:500;color:rgba(255,255,255,.85);}
.edit-toggle{display:none;align-items:center;gap:7px;background:var(--manager);color:var(--white);border:none;border-radius:8px;padding:7px 14px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:var(--font-body);}
.edit-toggle:hover{filter:brightness(1.1);transform:translateY(-1px);}
.edit-toggle{transition:filter .2s,transform .15s,background .2s;}
/* Seiteninhalt: Einblendung beim Seitenwechsel wird vom BEWEGUNGSSYSTEM weiter
   unten gesteuert (gestaffelt, mit gemeinsamer Kurve, im Editor abgeschaltet). */
.edit-toggle svg{width:14px;height:14px;}
body.can-edit .edit-toggle{display:inline-flex;}
body.edit-mode .edit-toggle{background:var(--success);}

/* SIDEBAR */
.sidebar{position:fixed;top:var(--header-h);left:0;width:var(--sidebar-w);height:calc(100vh - var(--header-h));height:calc(100dvh - var(--header-h));background:var(--white);border-right:1px solid var(--gray-200);overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:50;padding:12px 0 calc(24px + env(safe-area-inset-bottom));}
.sidebar::-webkit-scrollbar{width:3px;}
.sidebar::-webkit-scrollbar-thumb{background:var(--gray-200);border-radius:2px;}
.nav-section-label{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--gray-400);padding:10px 16px 4px;}
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 16px;cursor:pointer;transition:background .15s;font-size:13.5px;font-weight:400;color:var(--gray-600);position:relative;-webkit-user-select:none;user-select:none;}
.nav-item:hover{background:var(--gray-50);color:var(--gray-800);}
.nav-item.active{background:var(--accent-light);color:var(--accent-dark);font-weight:600;}
.nav-item.active::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);border-radius:0 2px 2px 0;}
.nav-icon{width:16px;height:16px;flex-shrink:0;}
.nav-label{flex:1;}
.nav-chevron{width:13px;height:13px;margin-left:auto;transition:transform .2s;color:var(--gray-400);}
.nav-chevron.open{transform:rotate(90deg);}
.nav-sub{display:none;}
.nav-sub.open{display:block;}
.nav-sub-item{display:flex;align-items:center;gap:8px;padding:7px 16px 7px 38px;cursor:pointer;font-size:12.5px;color:var(--gray-600);transition:background .15s;position:relative;}
.nav-sub-item:hover{background:var(--gray-50);color:var(--gray-800);}
.nav-sub-item.active{color:var(--accent-dark);font-weight:600;background:var(--accent-light);}
.nav-sub-item.active::before{content:'';position:absolute;left:28px;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:var(--accent);}
.nav-sub-icon{width:13px;height:13px;flex-shrink:0;color:var(--gray-400);}
/* Dritte Ebene: Beiträge unter einem Untermenüpunkt. Eine Stufe weiter
   eingerückt, mit Führungslinie, damit die Zugehörigkeit ohne Rahmen erkennbar
   bleibt. Der Untermenüpunkt selbst trägt einen eigenen Aufklapp-Pfeil. */
.nav-sub-group > .nav-sub-item{font-weight:500;color:var(--gray-800);}
.nav-sub-chevron{width:11px;height:11px;margin-left:auto;transition:transform .2s;color:var(--gray-400);flex-shrink:0;}
.nav-sub-chevron.open{transform:rotate(90deg);}
body.edit-mode .nav-sub-chevron{display:none;}
.nav-sub2{display:none;margin-left:38px;border-left:1.5px solid var(--gray-200);}
.nav-sub2.open{display:block;}
.nav-sub2-item{display:flex;align-items:center;gap:8px;padding:6px 16px 6px 14px;cursor:pointer;font-size:12px;color:var(--gray-600);transition:background .15s;position:relative;}
.nav-sub2-item:hover{background:var(--gray-50);color:var(--gray-800);}
.nav-sub2-item.active{color:var(--accent-dark);font-weight:600;background:var(--accent-light);}
.nav-sub2-item.active::before{content:'';position:absolute;left:-1.5px;top:0;bottom:0;width:1.5px;background:var(--accent);}
.nav-sub2-icon{width:12px;height:12px;flex-shrink:0;color:var(--gray-400);}
.nav-sub2-item.active .nav-sub2-icon{color:var(--accent-dark);}
.add-sub-btn.add-sub-btn-deep{padding-left:52px;}
.nav-sub-item.active .nav-sub-icon{color:var(--accent-dark);}
.nav-sub-item.active::before{left:24px;}
.admin-section{border-top:1px solid var(--gray-200);margin-top:8px;padding-top:4px;}
.menu-actions{display:none;align-items:center;gap:4px;margin-left:auto;}
body.edit-mode .menu-actions{display:flex;}
body.edit-mode .nav-chevron{display:none;}
.icon-btn{background:none;border:none;cursor:pointer;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;color:var(--gray-400);transition:background .15s,color .15s;}
.icon-btn:hover{background:var(--gray-100);color:var(--navy);}
.icon-btn.danger:hover{background:#fcebeb;color:var(--danger);}
.icon-btn svg{width:13px;height:13px;}
.add-menu-btn{display:none;width:calc(100% - 24px);margin:8px 12px 0;padding:7px 12px;background:var(--accent-light);border:1.5px dashed var(--accent);color:var(--accent-dark);border-radius:var(--radius-input);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font-body);}
body.edit-mode .add-menu-btn{display:block;}
.add-menu-btn:hover{background:var(--accent);color:var(--white);}
.add-sub-btn{display:none;font-size:11px;color:var(--accent-dark);font-weight:500;padding:6px 16px 6px 38px;cursor:pointer;background:none;border:none;font-family:var(--font-body);text-align:left;width:100%;}
body.edit-mode .add-sub-btn{display:block;}
.add-sub-btn:hover{background:var(--gray-50);}

/* MAIN */
.main{margin-left:var(--sidebar-w);margin-top:var(--header-h);padding:26px 30px;min-height:calc(100vh - var(--header-h));}

/* PAGE HEADER */
.page-header{margin-bottom:24px;}
.page-header h1{font-size:24px;font-weight:700;color:var(--navy);letter-spacing:-.4px;}
.page-header p{font-size:13px;color:var(--gray-600);margin-top:3px;}
.breadcrumb{font-size:12px;color:var(--gray-400);margin-bottom:8px;}
.breadcrumb span{color:var(--accent-dark);font-weight:500;}

/* CARDS */
.card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);padding:20px;margin-bottom:18px;}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--gray-100);gap:8px;}
.card-title{font-size:14px;font-weight:600;color:var(--navy);}

/* TILES */
.tiles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:1fr;gap:12px;margin-bottom:24px;}
.tile{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);padding:18px 14px;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .15s;text-align:center;height:100%;display:flex;flex-direction:column;justify-content:center;}
.tile:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-2px);}
.tile-icon{width:40px;height:40px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;background:var(--accent-light);color:var(--accent-dark);}
.tile-icon svg{width:20px;height:20px;}
.tile h3{font-size:12.5px;font-weight:600;color:var(--gray-800);}
.tile p{font-size:11px;color:var(--gray-400);margin-top:2px;}

/* INFO ROWS */
.info-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--gray-100);font-size:13.5px;}
.info-row:last-child{border-bottom:none;}
.info-label{color:var(--gray-600);}
.info-value{font-weight:500;color:var(--gray-800);text-align:right;}

/* DOC ITEMS */
.doc-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-input);transition:background .15s;}
.doc-item:hover{background:var(--gray-50);}
.doc-icon{width:30px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--accent-light);color:var(--accent-dark);}
.doc-icon svg{width:15px;height:15px;}
.doc-name{font-size:13.5px;font-weight:500;color:var(--gray-800);}
.doc-meta{font-size:11.5px;color:var(--gray-400);}

/* BUTTONS – Animationen wie kos-ai.de: sanftes Anheben + Schatten beim Hover */
.btn{padding:9px 18px;border-radius:var(--radius-input);font-size:13.5px;font-weight:600;cursor:pointer;border:none;font-family:var(--font-body);transition:background .2s,filter .2s,transform .15s,box-shadow .2s,border-color .2s,color .2s;display:inline-flex;align-items:center;gap:6px;text-decoration:none;}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn:disabled{opacity:.5;pointer-events:none;}
.btn-primary{background:var(--navy);color:var(--white);}
.btn-primary:hover{background:var(--navy-mid);box-shadow:var(--shadow);}
.btn-ghost{background:none;border:1.5px solid var(--gray-200);color:var(--gray-600);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-dark);background:var(--accent-light);}
.btn-accent{background:var(--accent);color:var(--white);}
.btn-accent:hover{background:var(--accent-hover);box-shadow:var(--shadow);}
.btn-danger{background:var(--danger);color:var(--white);}
.btn-danger:hover{box-shadow:var(--shadow);}
.btn-success{background:var(--success);color:var(--white);}
.btn-success:hover{box-shadow:var(--shadow);}
.btn-manager{background:var(--manager);color:var(--white);}
.btn-manager:hover{filter:brightness(1.1);box-shadow:var(--shadow);}
.btn-sm{font-size:12px;padding:6px 12px;}

/* ACCORDION */
.accordion-item{border:1px solid var(--gray-200);border-radius:var(--radius);margin-bottom:10px;overflow:hidden;background:var(--white);}
.accordion-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;cursor:pointer;background:var(--white);transition:background .15s;font-size:14px;font-weight:600;color:var(--navy);}
.accordion-header:hover{background:var(--gray-50);}
.accordion-header svg.acc-chev{width:16px;height:16px;color:var(--gray-400);transition:transform .2s;}
.accordion-header.open svg.acc-chev{transform:rotate(180deg);}
.acc-header-tools{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.acc-img-btn{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--accent-dark);background:var(--accent-light);border:none;border-radius:6px;padding:4px 9px;cursor:pointer;font-family:var(--font-body);transition:background .15s,color .15s;}
.acc-img-btn svg{width:13px;height:13px;}
.acc-img-btn:hover{background:var(--accent);color:#fff;}
.accordion-body{display:none;padding:16px 18px;background:var(--white);border-top:1px solid var(--gray-100);}
.accordion-body.open{display:block;}
.accordion-body img{max-width:100%;height:auto;}

/* TABLES */
.data-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.data-table th{text-align:left;padding:10px 12px;font-weight:600;color:var(--gray-600);border-bottom:1.5px solid var(--gray-200);font-size:12px;text-transform:uppercase;letter-spacing:.3px;background:var(--gray-50);}
.data-table td{padding:10px 12px;border-bottom:1px solid var(--gray-100);}
.user-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.user-table th{text-align:left;padding:10px 12px;font-weight:600;color:var(--gray-600);border-bottom:1.5px solid var(--gray-200);font-size:12px;text-transform:uppercase;letter-spacing:.3px;}
.user-table td{padding:10px 12px;border-bottom:1px solid var(--gray-100);}
.user-table tr:last-child td{border-bottom:none;}
.user-table tr:hover td{background:var(--gray-50);}
.avatar-sm{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:white;}
.av-navy{background:var(--navy);}.av-accent{background:var(--accent-dark);}.av-teal{background:var(--success);}.av-purple{background:var(--manager);}

/* CHIPS / ALERTS */
.chip{font-size:11px;font-weight:600;padding:3px 8px;border-radius:9px;display:inline-flex;align-items:center;gap:3px;}
.chip-green{background:#eaf3de;color:#3b6d11;}
.chip-amber{background:#faeeda;color:#854f0b;}
.chip-blue{background:#e6f1fb;color:#185fa5;}
.chip-red{background:#fcebeb;color:#a32d2d;}
.chip-gray{background:var(--gray-100);color:var(--gray-600);}
.chip-accent{background:var(--accent-light);color:var(--accent-dark);}
.chip-admin{background:#f3e8ff;color:#5b21b6;}
.chip-manager{background:#f3e8ff;color:var(--manager);}
.alert{padding:12px 14px;border-radius:var(--radius-input);font-size:13px;display:flex;gap:9px;align-items:flex-start;margin-bottom:14px;}
.alert svg{width:15px;height:15px;flex-shrink:0;margin-top:1px;}
.alert-info{background:#e6f1fb;color:#185fa5;}
.alert-warning{background:#faeeda;color:#854f0b;}
.alert-success{background:#eaf3de;color:#3b6d11;}

/* FORM HELPERS */
.field-label{font-size:12px;font-weight:600;color:var(--gray-600);margin-bottom:5px;display:block;text-transform:uppercase;letter-spacing:.3px;}
.field-input{width:100%;padding:9px 12px;border:1.5px solid var(--gray-200);border-radius:var(--radius-input);font-size:13.5px;font-family:var(--font-body);outline:none;transition:border .2s;background:var(--white);}
.field-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);}
.field-textarea{min-height:120px;resize:vertical;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

/* ARBEITSANWEISUNGEN */
.wi-widget{border:1.5px solid var(--warning);background:#fffaf2;}
.wi-widget-title{display:flex;align-items:center;gap:8px;}
.wi-widget-icon{width:16px;height:16px;color:var(--warning);}
.wi-widget-intro{font-size:13px;color:var(--gray-600);margin-bottom:12px;}
.wi-widget-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--gray-200);border-radius:var(--radius-input);background:var(--white);margin-bottom:9px;cursor:pointer;transition:border-color .15s,box-shadow .15s;}
.wi-widget-item:last-child{margin-bottom:0;}
.wi-widget-item:hover{border-color:var(--accent);box-shadow:var(--shadow);}
.wi-widget-item-icon{width:34px;height:34px;border-radius:8px;background:var(--accent-light);color:var(--accent-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.wi-widget-item-icon svg{width:18px;height:18px;}
.wi-widget-item-main{flex:1;min-width:0;}
.wi-widget-item-title{font-size:14px;font-weight:600;color:var(--navy);}
.wi-widget-item-meta{font-size:11.5px;color:var(--gray-400);margin-top:2px;}
/* Leerzustand (keine offenen Anweisungen) */
.wi-widget-empty{border-color:var(--gray-200);background:var(--white);}
.wi-widget-done{display:flex;align-items:center;gap:10px;padding:6px 2px 2px;font-size:14px;color:var(--gray-700);font-weight:500;}
.wi-widget-done-icon{width:22px;height:22px;color:var(--success);flex-shrink:0;}
.wi-widget-foot{margin-top:12px;padding-top:10px;border-top:1px solid var(--gray-100);}
.wi-widget-foot a{font-size:12.5px;color:var(--accent-dark);font-weight:600;cursor:pointer;}
.wi-widget-foot a:hover{text-decoration:underline;}
/* ---- Neuigkeiten (informell) -------------------------------------------
   Bewusst ruhiger als Onboarding (Navy) und Arbeitsanweisungen (Amber):
   Akzentblau signalisiert "zur Information", nicht "zu erledigen".        */
.nw-widget{border:1.5px solid var(--accent);background:var(--accent-light);}
.nw-widget-title{display:flex;align-items:center;gap:8px;}
.nw-widget-icon{width:16px;height:16px;color:var(--accent-dark);}
.nw-widget-intro{font-size:13px;color:var(--gray-600);margin-bottom:12px;}
.nw-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid #cfe6ef;border-radius:var(--radius-input);background:var(--white);margin-bottom:9px;transition:border-color .15s,box-shadow .15s;}
.nw-item:last-child{margin-bottom:0;}
.nw-item:hover{border-color:var(--accent);box-shadow:var(--shadow);}
.nw-item-icon{width:34px;height:34px;border-radius:8px;background:var(--accent-light);color:var(--accent-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.nw-item-icon svg{width:18px;height:18px;}
.nw-item-main{flex:1;min-width:0;cursor:pointer;}
.nw-item-title{font-size:14px;font-weight:600;color:var(--navy);}
.nw-item-meta{font-size:11.5px;color:var(--gray-400);margin-top:2px;}
.nw-item-actions{display:flex;align-items:center;gap:7px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;}
.nw-item-text{font-size:12.5px;color:var(--gray-600);margin-top:5px;line-height:1.5;}
.nw-item-text p{margin:0 0 4px;}
.nw-view-body{font-size:14px;line-height:1.65;color:var(--gray-800);}
.nw-view-meta{font-size:12px;color:var(--gray-400);margin-bottom:10px;}
.nw-empty{font-size:13px;color:var(--gray-400);padding:8px 2px;}
/* "Mitarbeiter informieren" im Bearbeitungsmodus */
.nw-inform{display:none;align-items:flex-start;gap:10px;margin:0 0 16px;padding:12px 14px;border:1px dashed var(--accent);border-radius:var(--radius-input);background:var(--accent-light);}
body.edit-mode .nw-inform{display:flex;}
.nw-inform input[type=checkbox]{margin-top:2px;width:16px;height:16px;flex-shrink:0;cursor:pointer;}
.nw-inform-main{flex:1;min-width:0;}
.nw-inform-title{font-size:13.5px;font-weight:600;color:var(--navy);cursor:pointer;}
.nw-inform-hint{font-size:11.5px;color:var(--gray-600);margin-top:3px;}
/* Versand-Einstellungen + Postausgang */
.nw-cfg-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0;}
@media (max-width:700px){.nw-cfg-grid{grid-template-columns:1fr;}}
.nw-cron{font:12px/1.5 ui-monospace,Consolas,monospace;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:6px;padding:8px 10px;word-break:break-all;color:var(--gray-800);}
.nw-outbox{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 0;}
/* Ansicht-Modal */
.wi-view-meta{font-size:12px;color:var(--gray-500);margin-bottom:12px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.wi-view-body{font-size:14px;line-height:1.7;color:var(--gray-800);border:1px solid var(--gray-100);border-radius:var(--radius-input);padding:14px 16px;background:var(--gray-50);max-height:50vh;overflow-y:auto;}
.wi-view-body h3{font-size:17px;font-weight:700;color:var(--navy);margin:10px 0 6px;}
.wi-view-body p{margin-bottom:10px;}
.wi-view-body ul,.wi-view-body ol{padding-left:22px;margin-bottom:10px;}
.wi-view-file{margin-top:14px;}
.wi-confirm-box{margin-top:18px;padding-top:16px;border-top:1px solid var(--gray-100);}
.wi-confirm-text{font-size:14px;line-height:1.6;color:var(--gray-800);margin-bottom:14px;}
.wi-confirm-btn{min-width:160px;padding:12px 24px;font-size:14px;justify-content:center;}
@media (max-width:600px){
  .wi-confirm-btn{width:100%;padding:14px 20px;}
}
/* Editor-Modal */
.wi-form{display:flex;flex-direction:column;gap:14px;}
.wi-roles{display:flex;flex-wrap:wrap;gap:8px 16px;padding:4px 0;}
.wi-group-block{flex:1 1 100%;border:1px solid var(--gray-100);border-radius:var(--radius-input);padding:10px 12px;background:var(--gray-50);display:flex;flex-wrap:wrap;gap:8px 16px;}
.wi-group-head{flex:1 1 100%;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--gray-500);}
.wi-role-opt{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--gray-700);cursor:pointer;text-transform:none;font-weight:500;letter-spacing:0;}
.wi-role-opt input{width:auto;margin:0;}
.wi-toolbar{display:flex;align-items:center;gap:4px;padding:6px 8px;border:1.5px solid var(--gray-200);border-bottom:none;border-radius:var(--radius-input) var(--radius-input) 0 0;background:var(--gray-50);flex-wrap:wrap;}
.wi-tb-btn{width:28px;height:28px;border:none;background:none;border-radius:5px;cursor:pointer;font-size:13px;color:var(--gray-700);display:flex;align-items:center;justify-content:center;font-family:var(--font-body);}
.wi-tb-btn:hover{background:var(--gray-200);}
.wi-tb-div{width:1px;height:18px;background:var(--gray-200);margin:0 3px;}
.wi-editor{min-height:150px;max-height:40vh;overflow-y:auto;border-radius:0 0 var(--radius-input) var(--radius-input);line-height:1.6;}
.wi-editor:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);}
.wi-editor h3{font-size:17px;font-weight:700;margin:8px 0 4px;}
.wi-editor ul,.wi-editor ol{padding-left:22px;}
.wi-file-attached{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gray-700);}
.wi-file-attached svg{width:16px;height:16px;color:var(--accent-dark);flex-shrink:0;}
/* Admin-Übersicht */
.wi-pdf-tag{font-size:10px;font-weight:700;color:var(--accent-dark);background:var(--accent-light);padding:1px 5px;border-radius:4px;margin-left:5px;vertical-align:middle;}
.wi-ack-cell{display:flex;align-items:center;gap:8px;}
.wi-progress{width:60px;height:6px;background:var(--gray-200);border-radius:3px;overflow:hidden;flex-shrink:0;}
.wi-progress-bar{height:100%;background:var(--success);border-radius:3px;transition:width .3s;}
.wi-date-cell{white-space:nowrap;font-size:12px;color:var(--gray-500);}
/* Status-Modal */
.wi-status-summary{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.wi-status-group{margin-bottom:18px;}
.wi-status-group-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--gray-600);margin-bottom:8px;}
.wi-status-empty{font-size:13px;color:var(--gray-400);padding:6px 0;}
.wi-status-role{font-size:11px;color:var(--gray-400);}
.nav-badge{margin-left:auto;background:var(--warning);color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;padding:0 5px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.wi-mylist-empty{font-size:13px;color:var(--gray-500);padding:8px 2px;}
/* Schloss an Menüpunkten mit eingeschränkter Sichtbarkeit (nur im Bearbeitungsmodus) */
.nav-vis-badge{display:none;margin-left:6px;flex-shrink:0;color:var(--manager);opacity:.8;}
.nav-vis-badge svg{width:13px;height:13px;display:block;}
body.edit-mode .nav-vis-badge{display:inline-flex;}

/* ONBOARDING – Mitarbeiter-Karte auf dem Dashboard */
.ob-card{border:1.5px solid var(--accent);background:linear-gradient(180deg,var(--accent-light) 0,var(--white) 210px);}
.ob-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;}
.ob-head-icon{width:44px;height:44px;border-radius:12px;background:var(--navy);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ob-head-icon svg{width:24px;height:24px;}
.ob-head-main{flex:1;min-width:0;}
.ob-kicker{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--accent-dark);}
.ob-title{font-size:20px;font-weight:700;color:var(--navy);letter-spacing:-.3px;margin-top:3px;overflow-wrap:break-word;}
.ob-desc{font-size:13.5px;line-height:1.6;color:var(--gray-600);margin-top:7px;overflow-wrap:break-word;}
.ob-meter{margin-bottom:18px;}
.ob-meter-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:7px;}
.ob-meter-label{font-size:12.5px;font-weight:600;color:var(--gray-600);}
.ob-meter-count{font-size:12.5px;font-weight:700;color:var(--navy);white-space:nowrap;}
.ob-meter-track{height:10px;border-radius:6px;background:var(--gray-200);overflow:hidden;}
.ob-meter-bar{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--accent),var(--success));transition:width .45s cubic-bezier(.32,.72,0,1);}
.ob-steps{display:flex;flex-direction:column;gap:8px;}
.ob-step{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:1px solid var(--gray-200);border-radius:var(--radius-input);background:var(--white);cursor:pointer;text-align:left;font-family:var(--font-body);min-height:56px;transition:border-color .15s,box-shadow .15s,transform .15s;}
.ob-step:hover{border-color:var(--accent);box-shadow:var(--shadow);}
.ob-step:active{transform:scale(.994);}
.ob-step-num{width:30px;height:30px;border-radius:50%;background:var(--gray-100);color:var(--gray-600);font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ob-step-num svg{width:16px;height:16px;}
.ob-step.done .ob-step-num{background:#eaf3de;color:var(--success);}
.ob-step.next{border-color:var(--accent);background:var(--accent-light);}
.ob-step.next .ob-step-num{background:var(--navy);color:var(--white);}
.ob-step-main{flex:1;min-width:0;}
.ob-step-title{font-size:14px;font-weight:600;color:var(--navy);overflow-wrap:break-word;}
.ob-step-meta{font-size:11.5px;color:var(--gray-400);margin-top:2px;}
.ob-step-go{font-size:12px;font-weight:700;color:var(--accent-dark);flex-shrink:0;white-space:nowrap;}
.ob-step.missing{opacity:.55;cursor:default;}
.ob-step.missing:hover{border-color:var(--gray-200);box-shadow:none;}
/* Pflichtbeiträge (arbeitsrechtlich relevant) */
.ob-step-tag{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  background:#faeeda;color:#854f0b;padding:2px 6px;border-radius:4px;margin-left:6px;vertical-align:1px;white-space:nowrap;}
.ob-step-tag-icon{width:11px;height:11px;flex-shrink:0;}
.ob-step.needs-confirm{border-color:var(--warning);background:#fffaf2;}
.ob-step.needs-confirm .ob-step-num{background:#faeeda;color:var(--warning);}
.ob-step.needs-confirm .ob-step-go{color:var(--warning);}
.ob-finish{margin-top:20px;padding-top:16px;border-top:1px solid var(--gray-200);}
.ob-finish-text{font-size:13.5px;line-height:1.6;color:var(--gray-800);margin-bottom:14px;}
.ob-finish-btn{min-width:250px;padding:14px 26px;font-size:14.5px;justify-content:center;}
.ob-finish-btn:disabled{opacity:.5;cursor:not-allowed;}
.ob-finish-hint{font-size:12px;color:var(--gray-400);margin-top:10px;}
@media (max-width:600px){.ob-finish-btn{width:100%;}}

/* Fortschrittsleiste am unteren Rand, während ein Beitrag gelesen wird */
.ob-bar{display:none;}
/* Markierung am Ende des Beitrags für die Scroll-Prüfung (1px, damit sie in
   Safari eine echte Bounding-Box hat) */
#ob-scroll-end{height:1px;width:100%;pointer-events:none;}
@keyframes obBarIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
body.ob-bar-on .ob-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:95;align-items:center;gap:12px;flex-wrap:wrap;background:var(--navy);color:var(--white);box-shadow:0 -6px 24px rgba(26,46,74,.24);animation:obBarIn .32s cubic-bezier(.32,.72,0,1) both;
  padding:12px 20px calc(12px + env(safe-area-inset-bottom));
  padding-left:calc(20px + env(safe-area-inset-left));padding-right:calc(20px + env(safe-area-inset-right));}
.ob-bar-main{flex:1;min-width:0;}
.ob-bar-kicker{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--accent);}
.ob-bar-title{font-size:14px;font-weight:600;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ob-bar-dots{display:flex;gap:4px;margin-top:8px;flex-wrap:wrap;}
.ob-bar-dot{width:16px;height:4px;border-radius:2px;background:rgba(255,255,255,.22);}
.ob-bar-dot.done{background:var(--accent);}
.ob-bar-dot.cur{background:var(--white);}
/* Pflichtbestätigung in der Leiste – eigene Zeile, damit der Text lesbar bleibt */
.ob-confirm{flex:1 1 100%;order:2;background:rgba(250,238,218,.12);border:1px solid var(--warning);border-radius:var(--radius-input);padding:10px 12px;}
.ob-confirm-label{display:flex;align-items:flex-start;gap:11px;cursor:pointer;}
.ob-confirm.locked .ob-confirm-label{cursor:default;}
.ob-confirm-label input{width:22px;height:22px;min-width:22px;margin:0;flex-shrink:0;accent-color:var(--accent);cursor:pointer;}
.ob-confirm.locked .ob-confirm-label input{cursor:not-allowed;}
.ob-confirm-label span{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.82);}
.ob-confirm-label strong{color:#fff;font-weight:600;}
.ob-confirm-hint{display:flex;align-items:center;gap:6px;font-size:11.5px;line-height:1.4;color:var(--accent);margin-top:8px;padding-left:33px;}
.ob-confirm.locked .ob-confirm-hint{color:#fac775;}
.ob-confirm-hint-icon{width:13px;height:13px;flex-shrink:0;}
/* Hinterlegte Dokumente eines Pflichtbeitrags (in der Fortschrittsleiste) */
.ob-docs{margin-bottom:11px;padding-bottom:11px;border-bottom:1px solid rgba(255,255,255,.14);}
.ob-docs-head{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--accent);margin-bottom:8px;}
.ob-docs-head-icon{width:13px;height:13px;flex-shrink:0;}
.ob-docs-list{display:flex;flex-wrap:wrap;gap:8px;}
.ob-doc{display:inline-flex;align-items:center;gap:7px;min-height:38px;max-width:100%;padding:0 12px;border:1px solid var(--accent);border-radius:8px;
  background:rgba(103,190,217,.14);color:#fff;font:600 12.5px/1 var(--font-body);font-family:var(--font-body);cursor:pointer;text-align:left;}
.ob-doc svg{width:15px;height:15px;flex-shrink:0;color:var(--accent);}
.ob-doc-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px;}
.ob-doc-go{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--accent);flex-shrink:0;}
.ob-doc:active{opacity:.78;}
.ob-doc.done{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.07);}
.ob-doc.done svg{color:#8fe0c0;}
.ob-doc.done .ob-doc-name{color:rgba(255,255,255,.72);}
.ob-doc.done .ob-doc-go{color:#8fe0c0;}
/* Download-Knopf der Abschluss-Bestätigung */
.ob-cert-btn{display:inline-flex;align-items:center;gap:6px;text-decoration:none;}
.ob-cert-btn svg{width:14px;height:14px;}
@media (max-width:700px){
  .ob-doc-name{max-width:150px;}
  .ob-doc{flex:1 1 100%;justify-content:space-between;min-height:44px;}
}

.ob-bar-actions{display:flex;gap:8px;flex-shrink:0;order:3;}
.ob-bar-btn[disabled]{opacity:.5;cursor:not-allowed;}
.ob-bar-main{order:1;}
.ob-bar-btn{border:none;border-radius:8px;padding:0 16px;min-height:46px;font:600 13.5px/1 var(--font-body);font-family:var(--font-body);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;}
.ob-bar-btn.ghost{background:rgba(255,255,255,.13);color:var(--white);}
.ob-bar-btn.primary{background:var(--accent);color:var(--navy);}
.ob-bar-btn:active{opacity:.78;}
/* Der Innenabstand richtet sich nach der tatsächlichen Höhe der Leiste – mit
   Bestätigungszeile ist sie deutlich höher. --ob-bar-h setzt obSyncBar(). */
body.ob-bar-on .main{padding-bottom:calc(var(--ob-bar-h, 136px) + 28px);}
/* Mobile-App: die eingeschobene Seiten-Detailebene ist selbst der Scroll-Container */
body.ob-bar-on.mapp.mapp-detail-page .main{padding-bottom:calc(var(--ob-bar-h, 136px) + 32px + env(safe-area-inset-bottom));}
/* Toast über die Leiste heben, damit er nicht verdeckt wird */
body.ob-bar-on .toast{bottom:calc(120px + env(safe-area-inset-bottom));}
body.ob-bar-on.mapp .toast{bottom:calc(160px + env(safe-area-inset-bottom));}
@media (max-width:700px){
  body.ob-bar-on .ob-bar{flex-wrap:wrap;gap:10px;padding-left:calc(14px + env(safe-area-inset-left));padding-right:calc(14px + env(safe-area-inset-right));}
  .ob-bar-main{flex:1 1 100%;}
  .ob-bar-title{font-size:13px;white-space:normal;}
  .ob-bar-actions{width:100%;}
  .ob-bar-btn{flex:1;}
}

/* Telefon: die Leiste mit Dokumentenliste und Bestätigung wird sonst zu hoch */
@media (max-width:700px){
  body.ob-bar-on .ob-bar.has-confirm{max-height:58vh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
  .ob-bar.has-confirm .ob-bar-dots{display:none;}
  .ob-bar.has-confirm .ob-bar-title{margin-bottom:2px;}
  .ob-bar.has-confirm .ob-confirm{padding:9px 10px;}
  .ob-bar.has-confirm .ob-docs{margin-bottom:9px;padding-bottom:9px;}
  .ob-bar.has-confirm .ob-docs-head{margin-bottom:6px;font-size:10.5px;}
  .ob-bar.has-confirm .ob-docs-list{gap:6px;}
  .ob-bar.has-confirm .ob-doc{min-height:40px;padding:0 10px;font-size:12px;}
  .ob-bar.has-confirm .ob-confirm-label span{font-size:12px;}
  .ob-bar.has-confirm .ob-confirm-hint{margin-top:6px;padding-left:0;}
}

/* ---------------------------------------------------------------------------
   Onboarding-Abschluss: Begrüßungs-Animation (Vorlage aus Claude Design)
   Die drei Teile der KOS-KLIMA-Bildmarke fliegen ein, setzen sich zusammen und
   werden von zwei auslaufenden Ringen bestätigt; danach steigen Überschrift,
   Untertitel und Schaltflächen nacheinander ein. Farben und Zeiten stammen
   unverändert aus der Vorlage.
   --------------------------------------------------------------------------- */
@keyframes obcFade{from{opacity:0;}to{opacity:1;}}
@keyframes obcFadeOut{from{opacity:1;}to{opacity:0;}}
@keyframes obcP1{from{opacity:0;transform:translate3d(-90px,-70px,0) rotate(-38deg) scale(.55);}to{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1);}}
@keyframes obcP2{from{opacity:0;transform:translate3d(-70px,95px,0) rotate(30deg) scale(.55);}to{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1);}}
@keyframes obcP3{from{opacity:0;transform:translate3d(110px,-40px,0) rotate(26deg) scale(.6);}to{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1);}}
@keyframes obcSettle{0%{transform:scale(.94);}55%{transform:scale(1.045);}100%{transform:scale(1);}}
@keyframes obcRing{0%{opacity:.55;transform:scale(.55);}100%{opacity:0;transform:scale(1.9);}}
@keyframes obcRise{from{opacity:0;transform:translate3d(0,22px,0);}to{opacity:1;transform:translate3d(0,0,0);}}
@keyframes obcSweep{0%{opacity:0;transform:translate3d(-130%,0,0) skewX(-18deg);}35%{opacity:.85;}100%{opacity:0;transform:translate3d(130%,0,0) skewX(-18deg);}}
@keyframes obcDrift{0%{transform:translate3d(0,0,0);}50%{transform:translate3d(0,-7px,0);}100%{transform:translate3d(0,0,0);}}

.obc{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9998;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:#375374;-webkit-tap-highlight-color:transparent;animation:obcFade .3s ease both;
  padding:calc(24px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));}
.obc.out{animation:obcFadeOut .4s ease both;}
.obc-glow{position:absolute;top:50%;left:50%;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(108,173,198,.38) 0%,rgba(108,173,198,0) 68%);}
.obc-inner{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:520px;width:100%;max-height:100%;overflow-y:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.obc-inner::-webkit-scrollbar{width:0;height:0;}

/* Bildmarke: Einflug, Setzen, sanftes Schweben */
.obc-mark{position:relative;width:132px;height:132px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  animation:obcSettle .5s cubic-bezier(.22,1,.28,1) 1.05s both, obcDrift 5s ease-in-out 1.6s infinite;}
.obc-ring{position:absolute;top:50%;left:50%;width:132px;height:132px;margin:-66px 0 0 -66px;border-radius:50%;}
.obc-ring1{border:2px solid #6cadc6;animation:obcRing .9s ease-out 1s both;}
.obc-ring2{border:2px solid rgba(255,255,255,.45);animation:obcRing 1.1s ease-out 1.12s both;}
.obc-mark-in{position:relative;width:100px;height:97.5px;}
.obc-mark-in svg{position:absolute;left:0;top:0;overflow:visible;}
.obc-p3{z-index:0;animation:obcP3 .72s cubic-bezier(.2,.9,.25,1.06) .4s both;}
.obc-p1{z-index:1;animation:obcP1 .72s cubic-bezier(.2,.9,.25,1.06) .16s both;}
.obc-p2{z-index:1;animation:obcP2 .72s cubic-bezier(.2,.9,.25,1.06) .28s both;}

/* Text und Schaltflächen */
.obc-head-wrap{position:relative;overflow:hidden;margin-top:30px;animation:obcRise .6s cubic-bezier(.2,.8,.25,1) 1.2s both;}
.obc-head{margin:0;font:800 clamp(26px,7.2vw,34px)/1.2 var(--font-body);letter-spacing:-.025em;color:#fff;}
.obc-sweep{position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;animation:obcSweep .9s ease-out 1.55s both;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 100%);}
.obc-sub{margin:14px 0 0;font:400 17px/1.55 var(--font-body);color:rgba(255,255,255,.78);max-width:34ch;animation:obcRise .6s cubic-bezier(.2,.8,.25,1) 1.45s both;}
.obc-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:32px;animation:obcRise .6s cubic-bezier(.2,.8,.25,1) 1.85s both;}
.obc-btn{appearance:none;-webkit-appearance:none;border:0;border-radius:10px;font-family:var(--font-body);min-height:48px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.obc-btn-primary{background:#fff;color:#375374;font-size:16px;font-weight:700;padding:15px 26px;}
.obc-btn-primary:hover{background:#f2f7fa;}
.obc-btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.32);color:rgba(255,255,255,.86);font-size:15px;font-weight:600;padding:14px 20px;}
.obc-btn-ghost:hover{border-color:rgba(255,255,255,.6);}
.obc-btn:active{transform:translate3d(0,1px,0);}

/* Flache Displays (Querformat): Marke und Abstände verkleinern */
@media (max-height:520px){
  .obc-mark{width:96px;height:96px;}
  .obc-ring{width:96px;height:96px;margin:-48px 0 0 -48px;}
  .obc-mark-in{width:74px;height:72px;}
  .obc-mark-in svg{width:74px;height:72px;}
  .obc-head-wrap{margin-top:20px;}
  .obc-sub{margin-top:10px;font-size:15px;}
  .obc-cta{margin-top:20px;}
}

/* MICROSOFT 365 – KONFIGURATION (Benutzerverwaltung) */
.m365-toggle{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--navy);cursor:pointer;margin-bottom:16px;min-height:44px;}
.m365-toggle input{width:18px;height:18px;margin:0;flex-shrink:0;}
.m365-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.m365-secret-row{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;}
.m365-secret-info{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:38px;}
.m365-uri-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:14px;}
.m365-hint{font-size:12px;line-height:1.55;color:var(--gray-600);margin-top:7px;}
.m365-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;background:var(--gray-100);padding:2px 6px;border-radius:4px;overflow-wrap:anywhere;}
.m365-groups-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--gray-100);flex-wrap:wrap;}
.m365-grow{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.6fr) 140px 36px;gap:8px;align-items:center;margin-bottom:8px;}
.m365-grow .field-input{font-size:12.5px;min-height:40px;}
.m365-grow .m365-oid{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;}
.m365-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--gray-100);}
/* Sichtbarkeits-Matrix (Menüpunkte x Microsoft-365-Gruppen) */
.vis-matrix-wrap{overflow-x:auto;margin-top:14px;border:1px solid var(--gray-200);border-radius:var(--radius-input);}
.vis-matrix{border-collapse:collapse;width:100%;font-size:12.5px;}
.vis-matrix th,.vis-matrix td{border-bottom:1px solid var(--gray-100);padding:7px 8px;}
.vis-matrix thead th{background:var(--gray-50);position:sticky;top:0;z-index:1;vertical-align:bottom;font-weight:600;color:var(--gray-600);}
.vis-matrix-name{text-align:left;min-width:230px;position:sticky;left:0;background:var(--white);z-index:2;}
.vis-matrix thead .vis-matrix-name{background:var(--gray-50);z-index:3;}
.vis-matrix-col{width:38px;}
.vis-matrix-col span{display:block;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;max-height:150px;overflow:hidden;text-overflow:ellipsis;font-weight:600;}
.vis-matrix-cell{text-align:center;}
.vis-matrix-cell input{width:16px;height:16px;margin:0;cursor:pointer;}
.vis-matrix-act{text-align:right;white-space:nowrap;}
.vis-row-child .vis-matrix-name{color:var(--gray-600);font-weight:400;}
.vis-indent{display:inline-block;width:18px;}
.vis-indent-2{display:inline-block;width:36px;}
.vis-axis-switch{display:inline-flex;gap:4px;margin-left:auto;margin-right:10px;}
.vis-row-main .vis-matrix-name{font-weight:600;}
.vis-row-restricted .vis-matrix-name{color:var(--manager);}
.vis-row-hint{display:block;font-size:10.5px;font-weight:400;color:var(--gray-400);text-transform:uppercase;letter-spacing:.3px;}
.vis-row-restricted .vis-row-hint{color:var(--manager);}
@media (max-width:900px){
  .vis-matrix-name{min-width:170px;}
  .vis-matrix-act{display:none;}
  .vis-matrix thead .vis-matrix-act{display:none;}
}
@media (max-width:760px){
  .m365-grid{grid-template-columns:1fr;}
  .m365-grow{grid-template-columns:minmax(0,1fr) 44px;grid-template-areas:"oid del" "label label" "cap cap";}
  .m365-grow .m365-oid{grid-area:oid;}
  .m365-grow .ob-pick-btn{grid-area:del;width:44px;height:44px;}
  .m365-grow .m365-label{grid-area:label;}
  .m365-grow .m365-cap{grid-area:cap;}
  .m365-grow{padding:10px;border:1px solid var(--gray-200);border-radius:var(--radius-input);background:var(--gray-50);}
  .m365-secret-row .btn,.m365-uri-row .btn{min-height:44px;}
}

/* DATENSICHERUNG – Verwaltung (nur Vollzugriff) */
.bk-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0;}
.bk-intro{font-size:13px;line-height:1.6;color:var(--gray-600);margin:0 0 10px;}
.bk-note{font-size:11px;color:var(--gray-500);line-height:1.45;}
/* Auswahl beim Zurückspielen */
.bk-restore-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px;}
.bk-restore-head .field-input{flex:1;min-width:180px;}
.bk-restore-list{border:1.5px solid var(--gray-200);border-radius:var(--radius-input);background:var(--gray-50);
  max-height:340px;overflow-y:auto;padding:8px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.bk-restore-item{display:flex;align-items:center;gap:10px;min-height:46px;padding:8px 10px;background:var(--white);
  border:1px solid transparent;border-radius:var(--radius-input);margin-bottom:6px;cursor:pointer;}
.bk-restore-item:last-child{margin-bottom:0;}
.bk-restore-item:hover{border-color:var(--accent);}
.bk-restore-item input[type=checkbox]{width:16px;height:16px;flex-shrink:0;cursor:pointer;}
.bk-restore-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.bk-restore-title{font-size:13.5px;font-weight:600;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bk-restore-meta{font-size:11.5px;color:var(--gray-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ONBOARDING – Verwaltung (Manager/Admin) */
.ob-admin-empty{font-size:13px;color:var(--gray-500);padding:8px 2px;}
.ob-plan-sub{font-size:12px;color:var(--gray-500);margin-top:2px;}
.ob-assign-select{padding:8px 9px;border:1.5px solid var(--gray-200);border-radius:var(--radius-input);font-family:var(--font-body);font-size:13px;background:var(--white);color:var(--gray-800);min-height:40px;max-width:230px;width:100%;}
.ob-assign-select:focus{border-color:var(--accent);outline:none;}
.ob-form{display:flex;flex-direction:column;gap:14px;}
.ob-picker{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.ob-picker-col{border:1.5px solid var(--gray-200);border-radius:var(--radius-input);background:var(--gray-50);display:flex;flex-direction:column;min-width:0;}
.ob-picker-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--gray-500);padding:11px 12px 8px;}
.ob-picker-search{margin:0 12px 9px;}
.ob-picker-list{flex:1;overflow-y:auto;max-height:300px;min-height:160px;padding:0 8px 8px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.ob-pick{display:flex;align-items:center;gap:9px;width:100%;min-height:46px;padding:9px 10px;border:1px solid transparent;border-radius:var(--radius-input);background:var(--white);margin-bottom:6px;cursor:pointer;text-align:left;font-family:var(--font-body);}
.ob-pick:hover{border-color:var(--accent);}
.ob-pick > svg{width:16px;height:16px;color:var(--accent-dark);flex-shrink:0;}
.ob-pick-main{flex:1;min-width:0;}
/* break-word statt anywhere: "anywhere" senkt zusätzlich die min-content-Breite
   auf ein Zeichen – in einer engen Spalte wird der Titel dann senkrecht gesetzt. */
.ob-pick-t{font-size:13px;font-weight:600;color:var(--navy);overflow-wrap:break-word;}
.ob-pick-m{font-size:11px;color:var(--gray-400);overflow-wrap:break-word;}
.ob-pick.chosen{opacity:.42;}
.ob-pick-num{width:24px;height:24px;border-radius:50%;background:var(--navy);color:var(--white);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ob-pick-btn{width:32px;height:32px;border-radius:6px;border:none;background:var(--gray-100);color:var(--gray-600);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ob-pick-btn svg{width:14px;height:14px;}
.ob-pick-btn:hover{background:var(--gray-200);}
.ob-pick-btn.danger{color:var(--danger);}
.ob-picker-empty{font-size:12.5px;color:var(--gray-400);padding:16px 10px;text-align:center;}
.ob-hint{font-size:12px;line-height:1.55;color:var(--gray-600);background:var(--gray-50);border-radius:var(--radius-input);padding:10px 12px;}
/* „Wichtig"-Umschalter im Prozess-Editor */
.ob-imp-btn{display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:0 9px;border:1px solid var(--gray-200);border-radius:6px;
  background:var(--white);color:var(--gray-400);font:700 10px/1 var(--font-body);font-family:var(--font-body);text-transform:uppercase;
  letter-spacing:.4px;cursor:pointer;flex-shrink:0;transition:background .15s,color .15s,border-color .15s;}
.ob-imp-btn svg{width:13px;height:13px;flex-shrink:0;}
.ob-imp-btn:hover{border-color:var(--warning);color:var(--warning);}
.ob-imp-btn.on{background:#faeeda;border-color:var(--warning);color:#854f0b;}
.ob-pick-important{border-color:var(--warning);background:#fffaf2;}
/* Gewählte Beiträge: Titel in eigener Zeile, Schaltflächen darunter rechtsbündig */
.ob-chosen-row{display:grid;grid-template-columns:24px minmax(0,1fr);grid-template-areas:"num main" "acts acts";
  gap:8px 9px;align-items:center;cursor:default;}
.ob-chosen-row .ob-pick-num{grid-area:num;}
.ob-chosen-row .ob-pick-main{grid-area:main;}
.ob-row-acts{grid-area:acts;display:flex;align-items:center;gap:6px;justify-content:flex-end;flex-wrap:wrap;}
.ob-row-acts-sep{flex:1;}
@media (max-width:760px){
  .ob-picker{grid-template-columns:1fr;}
  .ob-picker-list{max-height:220px;}
  .ob-pick-btn{width:38px;height:38px;}
}

/* BLOCK GRID-SYSTEM (60 Spalten als Basis -> erlaubt 1/2, 1/3, 1/4, 1/5, 1/6 …) */
#blocks-host{display:grid;grid-template-columns:repeat(60,1fr);gap:18px;align-items:stretch;}
.block{grid-column:span 60;}
.block-w-12{grid-column:span 60;} /* 100% */
.block-w-9{grid-column:span 45;}  /* 75%  */
.block-w-8{grid-column:span 40;}  /* 2/3  */
.block-w-6{grid-column:span 30;}  /* 1/2  */
.block-w-4{grid-column:span 20;}  /* 1/3  */
.block-w-3{grid-column:span 15;}  /* 1/4  */
.block-w-5{grid-column:span 12;}  /* 1/5  */
.block-w-7{grid-column:span 10;}  /* 1/6  */
/* Innere Karten/Boxen: Margin entfernen, da Grid-Gap das Spacing übernimmt */
.block > .card, .block > .alert, .block > .image-block, .block > .btn-block-wrap { margin-bottom:0; }
/* Bei nebeneinander gestellten Blöcken sollen die Karten dieselbe Höhe haben */
.block > .card{height:100%;display:flex;flex-direction:column;}
.block > .card > .card-header{flex-shrink:0;}
/* Blöcke mit mehreren gestapelten Karten (z.B. Benutzerverwaltung): Karten an
   ihren Inhalt anpassen statt jede auf volle Blockhöhe zu strecken. */
.block-plain > .card{height:auto;display:block;margin-bottom:18px;}
.block-plain > .card:last-child{margin-bottom:0;}

/* MOBILE: Alle Blöcke einspaltig */
@media (max-width:900px){
  /* minmax(0,1fr) statt 1fr ist entscheidend: bei "1fr" (= minmax(auto,1fr))
     wächst die Grid-Spur auf die min-content-Breite des breitesten Kindes.
     Ein langes Wort, eine URL, eine breite Tabelle oder ein Bild mit fester
     Pixelbreite sprengt damit das Layout über den Viewport hinaus. */
  #blocks-host{grid-template-columns:minmax(0,1fr);gap:14px;}
  .block, .block-w-12, .block-w-9, .block-w-8, .block-w-6, .block-w-4, .block-w-3, .block-w-5, .block-w-7 {
    grid-column:1 / -1 !important;
    min-width:0;
  }

  /* ---- Inhalte telefonsicher: gilt für App- UND klassische Ansicht ---- */
  /* Lange Wörter/URLs umbrechen, statt den Rahmen zu sprengen */
  .card,.alert,.accordion-item,.info-row,.docs-item,.page-header{min-width:0;}
  .card [contenteditable],.accordion-body,.alert span,.acc-title,
  .info-label,.info-value,.docs-item-name,.docs-item-meta,
  .page-header h1,.page-header p,.breadcrumb{overflow-wrap:break-word;}
  /* Eingefügte Inhalte mit fester Pixelbreite (Bilder aus dem Text-Editor) */
  .accordion-body img,.card [contenteditable] img{max-width:100% !important;height:auto !important;}
  /* Tabellen in eingefügten Inhalten bekommen ihren eigenen Seitwärts-Scroll,
     damit sie lesbar bleiben statt abgeschnitten zu werden. display:block nur
     auf der Tabelle selbst – der Textblock bleibt ein normaler Fluss-Container. */
  .accordion-body table,.card [contenteditable] table{
    display:block;width:max-content;max-width:100%;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
  }
}

/* Block-Controls: zusätzlicher Width-Selector */
.bc-width-select{
  background:rgba(255,255,255,0.18);color:var(--white);border:none;font-size:11px;
  height:24px;border-radius:4px;padding:0 6px;cursor:pointer;font-family:var(--font-body);
  outline:none;font-weight:600;letter-spacing:.2px;
}
.bc-width-select:hover{background:rgba(255,255,255,0.30);}
.bc-width-select option{background:var(--white);color:var(--gray-800);}
/* Wenn der Width-Selector geöffnet ist, Controls sichtbar halten */
body.edit-mode .block:focus-within > .block-controls{display:inline-flex;}

/* BLOCK WRAPPER */
.block{position:relative;}
body.edit-mode .block{outline:1.5px dashed transparent;outline-offset:4px;border-radius:var(--radius);transition:outline-color .15s;}
body.edit-mode .block:hover{outline-color:var(--manager);}
.block-controls{display:none;position:absolute;top:-12px;right:8px;background:var(--manager);color:var(--white);border-radius:6px;padding:3px;gap:2px;z-index:5;box-shadow:var(--shadow);}
body.edit-mode .block:hover .block-controls{display:inline-flex;}
.block-controls button{background:none;border:none;color:var(--white);cursor:pointer;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;opacity:.85;}
.block-controls button:hover{background:rgba(255,255,255,.18);opacity:1;}
.block-controls svg{width:13px;height:13px;}
body.edit-mode [contenteditable="true"]{outline:1px dashed transparent;outline-offset:2px;border-radius:3px;transition:outline-color .15s,background .15s;}
body.edit-mode [contenteditable="true"]:hover{background:#fff7ed;}
body.edit-mode [contenteditable="true"]:focus{outline:1.5px solid var(--manager);background:#fff7ed;}
/* Großflächige Textbereiche: Inhalt mit Innenabstand, damit der Text innerhalb des markierten (orange) Bereichs beginnt und nicht am Rand klebt. Negative Margin gleicht den Versatz aus, damit das Layout nicht springt. */
body.edit-mode .card > [contenteditable="true"],
body.edit-mode .accordion-body[contenteditable="true"]{padding:6px 10px;margin:-6px -10px;border-radius:5px;}

/* ADD-BLOCK BAR */
.add-block-bar{display:none;flex-wrap:wrap;gap:6px;padding:14px;background:#faf5ff;border:1.5px dashed var(--manager);border-radius:var(--radius);margin-top:10px;margin-bottom:18px;align-items:center;}
body.edit-mode .add-block-bar{display:flex;}
.add-block-bar-label{font-size:12px;font-weight:700;color:var(--manager);text-transform:uppercase;letter-spacing:.4px;margin-right:6px;}

/* EINFÜGEN AN POSITION
   Der Auslöser sitzt IM Block (absolut positioniert), nicht als eigenes
   Element zwischen den Blöcken. Ein Element über die volle Breite zwischen
   zwei Blöcken wäre eine eigene Grid-Zeile und zwänge nebeneinander gelegte
   Blöcke (1/2, 1/3 …) auseinander. Angehängt wird weiterhin über die Leiste
   am Seitenende – damit ist jede Position erreichbar. */
.insert-here{display:none;position:absolute;left:-11px;top:-11px;z-index:6;}
body.edit-mode .block:hover > .insert-here,
body.edit-mode .block:focus-within > .insert-here,
body.edit-mode .insert-here:hover{display:block;}
.insert-here-btn{width:22px;height:22px;border-radius:50%;border:none;cursor:pointer;padding:0;
  background:var(--manager);color:var(--white);display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(124,58,237,.35);transition:transform .12s;}
.insert-here-btn:hover{transform:scale(1.15);}
.insert-here-btn svg{width:12px;height:12px;}

/* DRAG & DROP der Blöcke */
.block-drag{cursor:grab;}
.block-drag:active{cursor:grabbing;}
.block.dragging{opacity:.45;}
.block.drop-before{box-shadow:-3px 0 0 var(--manager);}
.block.drop-after{box-shadow:3px 0 0 var(--manager);}
@media(max-width:900px){
  .block.drop-before{box-shadow:0 -3px 0 var(--manager);}
  .block.drop-after{box-shadow:0 3px 0 var(--manager);}
}

/* SPEICHERANZEIGE im Bearbeitungs-Banner */
.edit-save-state{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;opacity:.85;white-space:nowrap;}
.edit-save-state.busy{opacity:1;}
.edit-save-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}
.edit-save-state.busy .edit-save-dot{animation:savePulse 1s ease-in-out infinite;}
@keyframes savePulse{0%,100%{opacity:.35;}50%{opacity:1;}}
.add-block-btn{padding:6px 12px;background:var(--white);border:1px solid #e5d6fa;color:var(--manager);border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font-body);display:inline-flex;align-items:center;gap:5px;}
.add-block-btn:hover{background:var(--manager);color:var(--white);}
.add-block-btn svg{width:13px;height:13px;}

/* MODAL */
.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(26,46,74,.55);z-index:200;align-items:center;justify-content:center;padding:20px;}
.modal-backdrop.open{display:flex;}
.modal{background:var(--white);border-radius:var(--radius);width:100%;max-width:560px;max-height:90vh;overflow:auto;box-shadow:var(--shadow-lg);animation:sheetIn var(--t-sheet) var(--ease-out) both;}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--gray-200);}
.modal-title{font-size:15px;font-weight:600;color:var(--navy);}
.modal-body{padding:18px 20px;}
.modal-footer{display:flex;gap:8px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--gray-200);background:var(--gray-50);}
.modal-close{background:none;border:none;cursor:pointer;color:var(--gray-400);font-size:22px;line-height:1;}
.modal-close:hover{color:var(--gray-800);}

/* ICON PICKER */
.icon-picker-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:6px;max-height:240px;overflow-y:auto;padding:6px;background:var(--gray-50);border-radius:var(--radius-input);border:1px solid var(--gray-200);}
.icon-picker-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--gray-200);background:var(--white);border-radius:6px;cursor:pointer;color:var(--gray-600);transition:all .15s;}
.icon-picker-cell:hover{border-color:var(--accent);color:var(--accent-dark);}
.icon-picker-cell.selected{border-color:var(--manager);background:#faf5ff;color:var(--manager);box-shadow:0 0 0 2px rgba(124,58,237,.15);}
.icon-picker-cell svg{width:18px;height:18px;}

/* TABLE EDITOR */
.editable-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.editable-table th,.editable-table td{padding:8px 10px;border:1px solid var(--gray-200);}
.editable-table th{background:var(--gray-50);font-weight:600;text-align:left;}

/* BENEFITS / SECTIONS */
.benefits-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;}
.benefit-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);padding:16px;}
.benefit-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;background:var(--accent-light);color:var(--accent-dark);}
.benefit-icon svg{width:18px;height:18px;}
.benefit-name{font-size:13.5px;font-weight:600;color:var(--navy);margin-bottom:3px;}
.benefit-desc{font-size:12px;color:var(--gray-600);line-height:1.5;}
.section-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-bottom:20px;}
.section-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:9px;}
.section-card-header{display:flex;align-items:center;gap:10px;}
.section-card-icon{width:38px;height:38px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--accent-light);color:var(--accent-dark);}
.section-card-icon svg{width:19px;height:19px;}
.section-card h3{font-size:14px;font-weight:600;color:var(--navy);}
.section-card p{font-size:12.5px;color:var(--gray-600);line-height:1.5;}

/* ONBOARDING */
.onboarding-steps{display:flex;flex-direction:column;gap:10px;}
.onboarding-step{display:flex;gap:12px;padding:14px;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);}
.step-num{width:30px;height:30px;border-radius:50%;background:var(--navy);color:white;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.step-num.done{background:var(--success);}
.step-title{font-size:13.5px;font-weight:600;color:var(--gray-800);margin-bottom:2px;}
.step-desc{font-size:12.5px;color:var(--gray-600);line-height:1.5;}

/* IMAGE BLOCK */
.image-block{display:flex;margin-bottom:18px;align-items:flex-start;}
.image-block.align-left{justify-content:flex-start;}
.image-block.align-center{justify-content:center;}
.image-block.align-right{justify-content:flex-end;}
.image-block.align-full{justify-content:stretch;}
.image-block.align-full > img{width:100%;max-width:100% !important;}
.image-block > img{max-width:100%;display:block;transition:filter .25s,transform .25s;}
/* Personen-Bild (Organigramm): klickbar, Badge, Name-Unterschrift */
.img-frame{position:relative;display:inline-block;max-width:100%;}
.img-frame > img{max-width:100%;display:block;}
.image-block.align-full .img-frame{display:block;width:100%;}
.image-block.align-full .img-frame > img{width:100%;}
.img-clickable{cursor:pointer;transition:filter .25s,transform .25s,box-shadow .15s;}
.img-clickable:hover{box-shadow:0 4px 16px rgba(26,46,74,0.20);}
.img-info-badge{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:rgba(26,46,74,0.82);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:background .15s;}
.img-info-badge:hover{background:var(--accent-dark);}
.img-info-badge svg{width:15px;height:15px;}
.img-person-name{text-align:center;font-size:15px;font-weight:700;color:var(--navy);margin-top:8px;}
.img-person-title{text-align:center;font-size:12.5px;color:var(--gray-600);margin-top:1px;}
.img-caption{text-align:center;font-size:12px;color:var(--gray-400);margin-top:6px;}
.person-modal-role{white-space:pre-wrap;font-size:14px;line-height:1.6;color:var(--gray-800);margin-top:4px;}

/* REVEAL-BLOCK: Bild wird durchsichtig und gibt Text frei (Hover / Klick / Tipp) */
.reveal-block{position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;background:var(--navy);outline:none;border:1px solid var(--gray-200);}
.reveal-block:focus-visible{box-shadow:0 0 0 3px rgba(103,190,217,.5);}
.reveal-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;transition:opacity .45s ease;}
.reveal-overlay{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;padding:24px;color:#fff;opacity:0;transition:opacity .45s ease;}
.reveal-title{font-size:22px;font-weight:700;line-height:1.2;}
.reveal-text{font-size:14px;line-height:1.6;}
.reveal-text p{margin:0 0 6px;}
.reveal-text p:last-child{margin-bottom:0;}
.reveal-hint{position:absolute;top:10px;right:10px;z-index:3;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,0.85);color:var(--navy);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:opacity .3s;}
.reveal-hint svg{width:15px;height:15px;}
/* Auslöser: Hover (Desktop) ODER Klick/Tipp (.active) */
.reveal-block:hover .reveal-img,
.reveal-block.active .reveal-img{opacity:.12;}
.reveal-block:hover .reveal-overlay,
.reveal-block.active .reveal-overlay{opacity:1;}
.reveal-block:hover .reveal-hint,
.reveal-block.active .reveal-hint{opacity:0;}
/* Bearbeitungsmodus: Text dauerhaft sichtbar, Bild gedimmt, kein Hover-Effekt nötig */
body.edit-mode .reveal-block{cursor:default;}
body.edit-mode .reveal-block .reveal-img{opacity:.20;}
body.edit-mode .reveal-block .reveal-overlay{opacity:1;}
body.edit-mode .reveal-hint{display:none;}
/* Überschriften (Absatzformat) im Reveal-Overlay: weiß statt navy, sonst unlesbar auf dunklem Grund */
#blocks-host .reveal-overlay [contenteditable] h1,#blocks-host .reveal-overlay [contenteditable] h2,
#blocks-host .reveal-overlay [contenteditable] h3,#blocks-host .reveal-overlay [contenteditable] h4{color:#fff;}

/* IFRAME-BLOCK (z.B. öffentliche Wrike-Formulare) */
.iframe-block{border:1px solid var(--gray-200);border-radius:var(--radius);overflow:hidden;background:var(--white);}
.iframe-block iframe{display:block;width:100%;border:none;}
.iframe-empty{border:1.5px dashed var(--gray-300);border-radius:var(--radius);padding:28px 18px;text-align:center;color:var(--gray-400);font-size:13px;background:var(--gray-50);}

/* HTML-BLOCK (freier HTML-Code; wird beim Anzeigen über sanitizeUserHtml bereinigt)
   Die Regeln für .html-block-content gelten auch für die Vorschau im Modal –
   dort trägt der Vorschau-Kasten dieselbe Klasse, damit beide identisch aussehen.
   Der globale Reset (*{margin:0;padding:0}) nimmt HTML-Standardelementen ihre
   Abstände; hier bekommen sie sinnvolle Vorgaben zurück. Eigene style-Attribute
   des Bearbeiters gewinnen immer, weil Inline-Styles stärker sind. */
.html-block{overflow-x:auto;}
.html-block-content{font-size:14px;line-height:1.65;color:var(--gray-800);}
.html-block-content > *:first-child{margin-top:0;}
.html-block-content > *:last-child{margin-bottom:0;}
.html-block-content h1,.html-block-content h2,.html-block-content h3,
.html-block-content h4,.html-block-content h5,.html-block-content h6{color:var(--navy);font-weight:700;line-height:1.25;margin:18px 0 9px;}
.html-block-content h1{font-size:30px;}
.html-block-content h2{font-size:24px;}
.html-block-content h3{font-size:20px;}
.html-block-content h4{font-size:17px;}
.html-block-content p{margin:0 0 10px;}
.html-block-content ul,.html-block-content ol{padding-left:22px;margin:0 0 10px;}
.html-block-content li{margin-bottom:3px;}
.html-block-content a{color:var(--accent-dark);}
.html-block-content img{max-width:100%;height:auto;}
.html-block-content figure{margin:0 0 10px;}
.html-block-content figcaption{font-size:11.5px;color:var(--gray-500);margin-top:5px;}
.html-block-content blockquote{margin:0 0 10px;padding:8px 14px;border-left:3px solid var(--accent);background:var(--gray-50);}
.html-block-content pre{background:var(--gray-50);border-radius:var(--radius-input);padding:12px;margin:0 0 10px;overflow-x:auto;}
.html-block-content code,.html-block-content pre{font-family:'Courier New',Courier,monospace;font-size:12.5px;}
.html-block-content hr{border:none;border-top:1px solid var(--gray-200);margin:14px 0;}
.html-block-content table{border-collapse:collapse;margin:0 0 10px;}
.html-block-content th,.html-block-content td{border:1px solid var(--gray-200);padding:7px 10px;text-align:left;}
.html-block-content th{background:var(--gray-50);font-weight:600;color:var(--navy);}
.html-block-empty{border:1.5px dashed var(--gray-300);border-radius:var(--radius);padding:28px 18px;text-align:center;color:var(--gray-400);font-size:13px;background:var(--gray-50);}
/* Kennzeichnung im Bearbeitungsmodus + Klickschutz (Bearbeiten läuft über das Modal) */
/* align-self: in der Karte (Flex-Spalte, siehe ".block > .card") würde das
   Kennzeichen sonst auf die volle Breite gestreckt */
.html-block-tag{display:none;align-self:flex-start;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--manager);background:var(--gray-50);border:1px solid var(--gray-200);border-radius:5px;padding:2px 7px;margin-bottom:10px;}
body.edit-mode .html-block-tag{display:inline-block;}
body.edit-mode .html-block-content{pointer-events:none;}
/* Quellcode-Feld und Live-Vorschau im Bearbeiten-Modal */
/* pre-wrap: eingegebene Zeilenumbrüche bleiben erhalten, lange Zeilen (typisch
   bei kopiertem HTML) brechen trotzdem um – kein seitliches Scrollen nötig */
.html-code-input{font-family:'Courier New',Courier,monospace;font-size:12.5px;line-height:1.55;min-height:190px;white-space:pre-wrap;overflow-wrap:anywhere;resize:vertical;}
.html-code-preview{border:1px solid var(--gray-200);border-radius:var(--radius-input);padding:14px;background:var(--white);max-height:260px;overflow:auto;}
.html-code-preview-empty{color:var(--gray-400);font-size:13px;}
.html-code-note{display:none;margin-top:8px;font-size:12px;line-height:1.5;background:#faeeda;color:#854f0b;border-radius:var(--radius-input);padding:9px 12px;}

/* BILD-RESIZE (Edit-Modus: Griff unten rechts zum Ziehen) */
.img-resize-handle{position:absolute;right:-8px;bottom:-8px;width:20px;height:20px;border-radius:50%;background:var(--manager);border:2.5px solid #fff;cursor:nwse-resize;z-index:6;box-shadow:0 1px 5px rgba(0,0,0,.30);touch-action:none;}
.img-resize-handle:hover{transform:scale(1.15);}
.img-resize-badge{position:absolute;top:-28px;right:0;background:var(--navy);color:#fff;font-size:11px;font-weight:700;padding:3px 9px;border-radius:5px;z-index:7;pointer-events:none;}

/* BILD-KARTE: Rahmen (Karte) trägt die Breite und skaliert sichtbar mit dem Bild */
.image-card{max-width:100%;}
.image-card.align-center{margin-left:auto;margin-right:auto;}
.image-card.align-right{margin-left:auto;}
.image-card > .image-block{display:block;}
.image-card .img-frame{display:block;width:100%;}

/* Eckenradius */
.img-radius-none{border-radius:0 !important;}
.img-radius-sm{border-radius:4px !important;}
.img-radius-md{border-radius:var(--radius) !important;}
.img-radius-lg{border-radius:20px !important;}
.img-radius-full{border-radius:50% !important;}

/* Rahmen */
.img-border-none{border:none !important;}
.img-border-light{border:1px solid var(--gray-200) !important;}
.img-border-medium{border:2px solid var(--gray-400) !important;}
.img-border-dark{border:3px solid var(--navy) !important;}
.img-border-accent{border:3px solid var(--accent) !important;}

/* Schatten */
.img-shadow-none{box-shadow:none !important;}
.img-shadow-light{box-shadow:0 2px 8px rgba(0,0,0,0.10) !important;}
.img-shadow-medium{box-shadow:0 4px 16px rgba(0,0,0,0.16) !important;}
.img-shadow-heavy{box-shadow:0 10px 32px rgba(0,0,0,0.25) !important;}

/* Seitenverhältnis-Beschneidung */
.img-aspect-1-1{aspect-ratio:1/1;object-fit:cover;width:100%;}
.img-aspect-4-3{aspect-ratio:4/3;object-fit:cover;width:100%;}
.img-aspect-16-9{aspect-ratio:16/9;object-fit:cover;width:100%;}
.img-aspect-3-2{aspect-ratio:3/2;object-fit:cover;width:100%;}

/* BILDERGALERIE (mehrere Bilder pro Reihe, Rahmen = Bildzelle) */
.gallery-toolbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--gray-100);}
.gallery-perrow{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--gray-600);text-transform:uppercase;letter-spacing:.3px;}
.gallery-perrow select{padding:6px 10px;border:1.5px solid var(--gray-200);border-radius:var(--radius-input);font-family:var(--font-body);font-size:13px;background:var(--white);cursor:pointer;text-transform:none;}
.gallery-empty{font-size:13px;color:var(--gray-400);padding:10px 2px;}
.gallery-grid{display:grid;gap:12px;}
.gallery-cols-2{grid-template-columns:repeat(2,1fr);}
.gallery-cols-3{grid-template-columns:repeat(3,1fr);}
.gallery-cols-4{grid-template-columns:repeat(4,1fr);}
.gallery-cols-5{grid-template-columns:repeat(5,1fr);}
.gallery-cols-6{grid-template-columns:repeat(6,1fr);}
.gallery-cols-7{grid-template-columns:repeat(7,1fr);}
.gallery-cols-8{grid-template-columns:repeat(8,1fr);}
.gallery-item{position:relative;margin:0;min-width:0;}
.gallery-item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:var(--radius-input);border:1px solid var(--gray-200);background:var(--gray-50);}
.gallery-item figcaption{font-size:11.5px;color:var(--gray-500);margin-top:5px;text-align:center;line-height:1.3;}
.gallery-item-tools{position:absolute;top:6px;right:6px;display:flex;gap:4px;opacity:0;transition:opacity .15s;}
.gallery-item:hover .gallery-item-tools{opacity:1;}
.gallery-item-tools button{width:24px;height:24px;border:none;border-radius:6px;background:rgba(26,46,74,.85);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;padding:0;font-family:var(--font-body);}
.gallery-item-tools button:hover{background:var(--navy);}
.gallery-item-tools button svg{width:13px;height:13px;}
.gallery-item-tools button.danger{background:rgba(226,75,74,.9);}
.gallery-item-tools button.danger:hover{background:var(--danger);}
@media (max-width:900px){
  .gallery-cols-4,.gallery-cols-5,.gallery-cols-6,.gallery-cols-7,.gallery-cols-8{grid-template-columns:repeat(3,1fr) !important;}
}
@media (max-width:600px){
  .gallery-grid{grid-template-columns:repeat(2,1fr) !important;}
}

/* Text-Block, der nur ein verkleinertes Bild enthält: Karte umschließt das Bild */
.text-imgonly{margin-left:auto;margin-right:auto;max-width:100%;}
.text-imgonly img{width:100% !important;height:auto;display:block;}
.text-imgonly p{margin:0;}

/* BILD-EDITOR Modal: aufklappbare Sektionen */
.img-editor-section{border:1px solid var(--gray-200);border-radius:var(--radius-input);margin-bottom:8px;background:var(--white);}
.img-editor-section summary{padding:10px 36px 10px 14px;cursor:pointer;font-size:13px;font-weight:600;color:var(--navy);list-style:none;position:relative;user-select:none;}
.img-editor-section summary::-webkit-details-marker{display:none;}
.img-editor-section summary::after{content:"";position:absolute;right:14px;top:50%;width:9px;height:9px;border-right:2px solid var(--gray-400);border-bottom:2px solid var(--gray-400);transform:translateY(-70%) rotate(45deg);transition:transform .2s;}
.img-editor-section[open] > summary::after{transform:translateY(-30%) rotate(225deg);}
.img-editor-section[open] > summary{border-bottom:1px solid var(--gray-100);}
.img-editor-section-body{padding:12px 14px;}
.img-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.img-editor-grid > .full{grid-column:1/-1;}
.img-slider-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.img-slider-row label{flex-shrink:0;width:90px;font-size:12.5px;color:var(--gray-600);font-weight:500;}
.img-slider-row input[type="range"]{flex:1;}
.img-slider-row .ie-val{flex-shrink:0;width:48px;text-align:right;font-size:12px;color:var(--gray-800);font-variant-numeric:tabular-nums;font-weight:500;}
.img-preview-wrap{background:repeating-conic-gradient(#f0f2f6 0% 25%,#fff 0% 50%) 50% / 16px 16px;border:1px solid var(--gray-200);border-radius:var(--radius-input);padding:14px;min-height:120px;max-height:280px;overflow:hidden;display:flex;align-items:center;}
.img-preview-wrap.align-left{justify-content:flex-start;}
.img-preview-wrap.align-center{justify-content:center;}
.img-preview-wrap.align-right{justify-content:flex-end;}
.img-preview-wrap.align-full{justify-content:stretch;}
.img-preview-wrap img{max-width:100%;max-height:240px;display:block;}
.img-preview-wrap.align-full img{width:100%;}
.rotation-row{display:flex;gap:4px;}
.rotation-row button{flex:1;padding:6px 4px;border:1px solid var(--gray-200);background:var(--white);border-radius:5px;cursor:pointer;font-family:var(--font-body);font-size:12px;font-weight:600;color:var(--gray-600);}
.rotation-row button:hover{border-color:var(--accent);color:var(--accent-dark);}
.rotation-row button.active{background:var(--accent-light);border-color:var(--accent);color:var(--accent-dark);}
.flip-row{display:flex;gap:14px;align-items:center;font-size:13px;color:var(--gray-600);}
.flip-row label{display:flex;align-items:center;gap:6px;cursor:pointer;text-transform:none;font-weight:500;font-size:13px;}
.flip-row input{width:auto;}

/* TOAST */
.toast{position:fixed;bottom:24px;right:24px;background:var(--navy);color:var(--white);padding:12px 18px;border-radius:var(--radius-input);font-size:13px;box-shadow:var(--shadow-lg);z-index:300;display:none;align-items:center;gap:8px;}
.toast.show{display:flex;}
.toast.success{background:var(--success);}
.toast.error{background:var(--danger);}

/* FORMAT-TOOLBAR (erscheint im Edit-Modus, fixiert unter Edit-Banner) */
.format-toolbar{display:none;position:fixed;top:calc(var(--header-h) + var(--edit-banner-h));left:var(--sidebar-w);right:0;z-index:75;background:var(--white);border-bottom:1.5px solid var(--gray-200);padding:6px 12px;align-items:center;gap:3px;flex-wrap:wrap;box-shadow:0 2px 8px rgba(0,0,0,0.05);}
body.edit-mode .format-toolbar{display:flex;}
.ft-btn{background:var(--white);border:1px solid var(--gray-200);color:var(--gray-800);cursor:pointer;min-width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:5px;font-family:var(--font-body);font-size:13px;padding:0 8px;transition:all .12s;}
.ft-btn:hover{background:var(--gray-50);border-color:var(--accent);color:var(--accent-dark);}
.ft-btn.active{background:var(--accent-light);border-color:var(--accent);color:var(--accent-dark);}
.ft-btn b,.ft-btn i,.ft-btn u,.ft-btn s{font-style:normal;}
.ft-btn b{font-weight:800;}
.ft-btn i{font-style:italic;}
.ft-btn u{text-decoration:underline;}
.ft-btn s{text-decoration:line-through;}
.ft-select{height:32px;border:1px solid var(--gray-200);background:var(--white);border-radius:5px;font-family:var(--font-body);font-size:12.5px;padding:0 8px;color:var(--gray-800);cursor:pointer;outline:none;}
.ft-select:hover{border-color:var(--accent);}
.ft-select:focus{border-color:var(--accent);}
.ft-select-wide{font-weight:600;color:var(--navy);border-color:var(--gray-300);}
.ft-color{height:32px;width:36px;border:1px solid var(--gray-200);border-radius:5px;cursor:pointer;background:var(--white);padding:2px;}
.ft-divider{display:inline-block;width:1px;height:22px;background:var(--gray-200);margin:0 4px;flex-shrink:0;}
.ft-label{font-size:11px;color:var(--gray-400);font-weight:600;text-transform:uppercase;letter-spacing:.4px;margin-right:4px;}
@media(max-width:900px){
  /* Mobil: Toolbar einzeilig, seitlich wischbar (Safari/iOS) */
  .format-toolbar{left:0;top:calc(var(--header-h) + var(--edit-banner-h));flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .format-toolbar .ft-btn,.format-toolbar .ft-select,.format-toolbar .ft-color{flex-shrink:0;}
}

/* EMOJI-AUSWAHL (Format-Leiste) */
.ft-emoji-wrap{position:relative;display:inline-flex;}
/* right:0 – der Knopf sitzt im rechten Teil der Leiste, nach links öffnend
   bleibt das Panel im Bild. Unter 900px greift die feste Positionierung unten. */
.emoji-panel{display:none;position:absolute;top:38px;right:0;z-index:90;width:328px;background:var(--white);border:1.5px solid var(--gray-200);border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,0.14);padding:10px;}
.emoji-panel.open{display:block;}
.emoji-search{width:100%;height:32px;border:1px solid var(--gray-200);border-radius:5px;padding:0 9px;font-family:var(--font-body);font-size:13px;color:var(--gray-800);outline:none;margin-bottom:8px;}
.emoji-search:focus{border-color:var(--accent);}
.emoji-tabs{display:flex;gap:2px;margin-bottom:8px;flex-wrap:wrap;}
.emoji-tab{background:none;border:1px solid transparent;border-radius:5px;cursor:pointer;font-size:15px;line-height:1;padding:4px 6px;transition:all .12s;}
.emoji-tab:hover{background:var(--gray-50);}
.emoji-tab.active{background:var(--accent-light);border-color:var(--accent);}
.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;max-height:196px;overflow-y:auto;}
.emoji-cell{background:none;border:none;cursor:pointer;font-size:20px;line-height:1;padding:5px 0;border-radius:5px;transition:background .1s;}
.emoji-cell:hover{background:var(--accent-light);}
.emoji-empty{grid-column:1/-1;font-size:12.5px;color:var(--gray-400);padding:14px 4px;text-align:center;}
.emoji-hint{font-size:11px;color:var(--gray-400);margin-top:8px;padding-top:8px;border-top:1px solid var(--gray-100);line-height:1.45;}
@media(max-width:900px){
  /* Auf dem Telefon würde das Panel sonst über den Bildschirmrand hinauslaufen */
  .emoji-panel{position:fixed;left:8px;right:8px;width:auto;top:calc(var(--header-h) + var(--edit-banner-h) + 46px);}
}

/* Überschriften aus dem Absatzformat-Dropdown (formatBlock erzeugt echte h1-h4) */
#blocks-host [contenteditable] h1,#blocks-host [contenteditable] h2,
#blocks-host [contenteditable] h3,#blocks-host [contenteditable] h4{color:var(--navy);line-height:1.2;margin:14px 0 8px;font-weight:700;}
#blocks-host [contenteditable] h1{font-size:48px;}
#blocks-host [contenteditable] h2{font-size:36px;}
#blocks-host [contenteditable] h3{font-size:28px;}
#blocks-host [contenteditable] h4{font-size:22px;}
@media(max-width:600px){
  #blocks-host [contenteditable] h1{font-size:34px;}
  #blocks-host [contenteditable] h2{font-size:28px;}
  #blocks-host [contenteditable] h3{font-size:23px;}
  #blocks-host [contenteditable] h4{font-size:19px;}
}

/* BUTTON-GRÖSSEN (Block-Editor) */
.btn-size-sm{font-size:12px;padding:5px 12px;}
.btn-size-md{}
.btn-size-lg{font-size:15px;padding:11px 22px;}
.btn-size-xl{font-size:17px;padding:14px 30px;}
.btn-block-wrap{margin:14px 0;}
.btn-block-wrap.align-left{text-align:left;}
.btn-block-wrap.align-center{text-align:center;}
.btn-block-wrap.align-right{text-align:right;}
.btn-block-wrap.align-full .btn{display:flex;width:100%;justify-content:center;}

/* BUTTONS MIT UNTERBUTTONS */
.btn-block-wrap.has-subs{display:flex;flex-direction:column;gap:8px;align-items:flex-start;}
.btn-block-wrap.has-subs.align-center{align-items:center;}
.btn-block-wrap.has-subs.align-right{align-items:flex-end;}
.btn-block-wrap.has-subs.align-full{align-items:stretch;}
.btn-parent .sub-chev{width:15px;height:15px;transition:transform .2s;margin-left:2px;}
.btn-block-wrap.subs-open .btn-parent .sub-chev{transform:rotate(180deg);}
.sub-btn-panel{display:none;flex-direction:column;gap:6px;padding-left:14px;border-left:2px solid var(--gray-200);margin-left:4px;}
.sub-btn-panel.open{display:flex;}
.btn-block-wrap.has-subs.align-full .sub-btn-panel{align-self:stretch;}
.sub-btn-panel .btn{align-self:flex-start;}
.btn-block-wrap.has-subs.align-center .sub-btn-panel .btn{align-self:center;}
.btn-block-wrap.has-subs.align-right .sub-btn-panel .btn{align-self:flex-end;}
.btn-block-wrap.has-subs.align-full .sub-btn-panel .btn{align-self:stretch;width:100%;justify-content:center;}
/* Sub-Button-Editor im Modal */
.subbtn-row{display:flex;gap:6px;margin-bottom:6px;align-items:center;}
.subbtn-row .subbtn-label{flex:1;}
.subbtn-row .subbtn-href{flex:1;}

/* BANNER-TICKER (Dashboard, durchlaufende Nachrichten) */
.banner-ticker{position:relative;display:flex;align-items:stretch;border-radius:var(--radius);margin-bottom:18px;overflow:hidden;box-shadow:0 4px 16px rgba(186,117,23,0.20);color:var(--white);}
.banner-ticker.variant-info{background:linear-gradient(90deg,#185fa5 0%,#2a7bc8 50%,#185fa5 100%);box-shadow:0 4px 16px rgba(24,95,165,0.20);}
.banner-ticker.variant-warning{background:linear-gradient(90deg,#ba7517 0%,#d68a1f 50%,#ba7517 100%);box-shadow:0 4px 16px rgba(186,117,23,0.20);}
.banner-ticker.variant-danger{background:linear-gradient(90deg,#a32d2d 0%,#c14242 50%,#a32d2d 100%);box-shadow:0 4px 16px rgba(163,45,45,0.25);}
.banner-ticker.variant-accent{background:linear-gradient(90deg,#1a6e88 0%,#2691b4 50%,#1a6e88 100%);box-shadow:0 4px 16px rgba(26,110,136,0.20);}
.banner-ticker{background-size:200% 100%;animation:banner-bg-flow 12s linear infinite;}
@keyframes banner-bg-flow{0%{background-position:0% 0%;}100%{background-position:200% 0%;}}
.banner-ticker-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0 18px;background:rgba(0,0,0,0.18);}
.banner-ticker-icon svg{width:22px;height:22px;animation:bell-shake 2.5s ease infinite;transform-origin:top center;}
@keyframes bell-shake{0%,88%,100%{transform:rotate(0);}90%{transform:rotate(-14deg);}94%{transform:rotate(14deg);}97%{transform:rotate(-7deg);}}
.banner-ticker-viewport{flex:1;overflow:hidden;white-space:nowrap;padding:13px 0;mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);}
.banner-ticker-track{display:inline-block;white-space:nowrap;will-change:transform;}
.banner-ticker-track.scrolling{animation:ticker-scroll linear infinite;}
@keyframes ticker-scroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
.banner-ticker-message{display:inline-block;padding:0 28px;font-weight:600;font-size:14.5px;letter-spacing:.1px;}
.banner-ticker-sep{display:inline-block;opacity:0.45;font-weight:400;}
.banner-ticker-edit{position:absolute;top:6px;right:6px;background:rgba(0,0,0,0.18);border:none;color:var(--white);cursor:pointer;width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:background .15s;}
.banner-ticker-edit:hover{background:rgba(0,0,0,0.35);}
.banner-ticker-edit svg{width:13px;height:13px;}
.banner-ticker-placeholder{background:#faf5ff;border:1.5px dashed var(--manager);color:var(--manager);padding:12px 18px;border-radius:var(--radius);margin-bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:13px;font-weight:600;}
.banner-message-row{display:flex;gap:6px;align-items:center;padding:8px;background:var(--gray-50);border-radius:var(--radius-input);margin-bottom:6px;}
.banner-message-row input{flex:1;border:1.5px solid var(--gray-200);background:var(--white);padding:7px 10px;border-radius:5px;font-family:var(--font-body);font-size:13.5px;outline:none;}
.banner-message-row input:focus{border-color:var(--accent);}
.banner-message-row button{background:none;border:none;color:var(--gray-400);cursor:pointer;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:5px;}
.banner-message-row button:hover{background:#fcebeb;color:var(--danger);}
.banner-message-row button svg{width:14px;height:14px;}

/* NEWS-BOX (Letzte Aktualisierungen auf dem Dashboard) */
.news-box-item{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid var(--gray-100);cursor:pointer;transition:background .15s,padding .15s;border-radius:var(--radius-input);}
.news-box-item:hover{background:var(--gray-50);padding-left:10px;padding-right:10px;}
.news-box-item:last-child{border-bottom:none;}
.news-box-icon{width:38px;height:38px;border-radius:9px;background:var(--accent-light);color:var(--accent-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.news-box-icon svg{width:18px;height:18px;}
.news-box-content{flex:1;min-width:0;}
.news-box-title-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:2px;}
.news-box-title{font-size:13.5px;font-weight:600;color:var(--gray-800);}
.news-box-meta{font-size:12px;color:var(--gray-400);}
.news-box-type{font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;text-transform:uppercase;letter-spacing:.4px;}
.news-box-type-edit{background:#e6f1fb;color:#185fa5;}
.news-box-type-create{background:#eaf3de;color:#3b6d11;}
.news-box-empty{text-align:center;padding:18px;color:var(--gray-400);font-size:13px;}

/* LOGO-WRAPPER (Login + Header) */
.login-logo-wrap{display:flex;align-items:center;justify-content:center;margin:0 auto 30px;min-height:80px;}
.login-logo-custom{max-width:240px;max-height:80px;display:block;object-fit:contain;}
.header-logo-custom{max-height:42px;max-width:200px;display:block;object-fit:contain;}
/* Für dunkle/farbige Logos auf Navy-Header: optionale helle Karte */
body.logo-light-on-dark .header-logo-custom{background:var(--white);padding:4px 10px;border-radius:8px;}

/* BRANDING – FAVICON-Vorschau */
.favicon-preview-group{display:flex;gap:14px;align-items:flex-end;}
.favicon-preview-cell{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--gray-50);border:1.5px solid var(--gray-200);border-radius:var(--radius-input);padding:10px 14px;}
.favicon-preview-cell img{display:block;}
.favicon-preview-cell span{font-size:10.5px;color:var(--gray-400);font-weight:600;text-transform:uppercase;letter-spacing:.3px;}

/* BRANDING-CARD (Admin-Seite) */
.branding-preview{display:flex;align-items:center;justify-content:center;background:var(--gray-50);border:1.5px dashed var(--gray-200);border-radius:var(--radius);padding:12px;min-height:72px;margin-bottom:10px;}
.branding-preview-dark{background:var(--navy);}
.branding-preview img{max-width:200px;max-height:52px;object-fit:contain;}
.branding-preview-empty{font-size:13px;color:var(--gray-400);text-align:center;}
.branding-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
.branding-grid-caption{font-size:11px;font-weight:600;color:var(--gray-400);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px;text-align:center;}
@media(max-width:700px){.branding-grid{grid-template-columns:1fr;}}

/* HAMBURGER (Mobile-Menü-Toggle) */
.hamburger{display:none;background:none;border:none;color:var(--white);cursor:pointer;width:40px;height:40px;align-items:center;justify-content:center;border-radius:8px;margin-left:6px;}
.hamburger:hover{background:rgba(255,255,255,.08);}
.hamburger svg{width:22px;height:22px;}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(26,46,74,0.45);z-index:90;}
.sidebar-backdrop.open{display:block;}

/* PIN-BUTTON (Schnellzugriff) */
.pin-btn{background:none;border:1.5px solid var(--gray-200);color:var(--gray-400);cursor:pointer;padding:6px 10px;border-radius:var(--radius-input);font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:5px;font-family:var(--font-body);transition:all .15s;}
.pin-btn:hover{border-color:var(--accent);color:var(--accent-dark);}
.pin-btn.pinned{background:#fff7d6;border-color:#f0c64a;color:#8a6500;}
.pin-btn.pinned:hover{filter:brightness(0.97);}
.pin-btn svg{width:13px;height:13px;}

/* SECTION OVERVIEW (Hauptmenüpunkt-Seite) */
/* grid-auto-rows:1fr + height:100% => alle Kacheln gleich hoch, unabhängig von Zeile/Textlänge */
.section-overview{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));grid-auto-rows:1fr;gap:12px;margin-bottom:24px;}
.section-overview-tile{background:var(--white);border:1.5px solid var(--gray-200);border-radius:var(--radius);padding:18px 14px;cursor:pointer;text-align:center;transition:border-color .2s,box-shadow .2s,transform .15s;text-decoration:none;color:inherit;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;height:100%;min-height:118px;}
.section-overview-tile:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-2px);}
.section-overview-tile-icon{width:48px;height:48px;border-radius:10px;background:var(--accent-light);color:var(--accent-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.section-overview-tile-icon svg{width:24px;height:24px;}
.section-overview-tile-label{font-size:13.5px;font-weight:600;color:var(--navy);display:flex;align-items:center;flex:1;}

/* QUICK ACCESS (Dashboard-Schnellzugriff) */
.quick-access-section{margin-bottom:24px;}
.quick-access-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.quick-access-title{font-size:14px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.5px;}
.quick-access-empty{background:var(--accent-light);border:1.5px dashed var(--accent);border-radius:var(--radius);padding:16px 18px;font-size:13px;color:var(--accent-dark);}
.quick-tile{position:relative;}
.quick-tile-remove{position:absolute;top:4px;right:4px;background:rgba(255,255,255,0.9);border:1px solid var(--gray-200);color:var(--gray-400);cursor:pointer;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;}
.quick-tile:hover .quick-tile-remove{opacity:1;}
.quick-tile-remove:hover{color:var(--danger);border-color:var(--danger);}
.quick-tile-remove svg{width:11px;height:11px;}

/* DOCS BLOCK: PDF-Upload */
.docs-file-row{display:none;align-items:center;gap:8px;padding:8px 12px 0;font-size:11.5px;color:var(--gray-400);}
body.edit-mode .docs-file-row{display:flex;}
.docs-file-row .btn-sm{font-size:11px;padding:4px 10px;}
.doc-pdf-badge{display:inline-flex;align-items:center;gap:4px;background:#fcebeb;color:#a32d2d;padding:2px 7px;border-radius:4px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;}

/* MOBILE LAYOUT ============================================================ */
@media (max-width: 900px){
  .header-logo{width:auto;border-right:none;padding:0 12px;}
  .header-logo svg{height:28px;}
  .header-search{display:none;}
  .header-hotline-label{display:none;}
  .user-name{display:none;}
  .hamburger{display:inline-flex;order:-1;}

  /* Sidebar slidet ein */
  .sidebar{transform:translateX(-100%);transition:transform .25s ease;z-index:110;box-shadow:4px 0 16px rgba(0,0,0,0.15);width:280px;}
  .sidebar.mobile-open{transform:translateX(0);}

  .main{margin-left:0;padding:18px 16px;padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right));padding-bottom:calc(24px + env(safe-area-inset-bottom));}
  .edit-banner{left:0;}

  /* iOS Safari: Eingabefelder mit mind. 16px, sonst zoomt Safari beim Antippen */
  input,select,textarea,.field-input,.form-group input,.form-group select,.form-group textarea{font-size:16px !important;}

  .page-header h1{font-size:20px;}
  .tiles-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
  .section-overview{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
  .section-grid{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}

  /* Modal: Vollbild (dvh = korrekte Höhe in Safari mit ein-/ausblendender Adressleiste) */
  .modal{max-width:100%;border-radius:0;max-height:100vh;max-height:100dvh;height:100vh;height:100dvh;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom);}
  .modal-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .modal-backdrop{padding:0;}

  .icon-picker-grid{grid-template-columns:repeat(6,1fr);}
}

@media (max-width: 600px){
  .header-hotline{display:none;}
  .role-badge{display:none;}
  .edit-toggle span{display:none;}
  .header{padding:0 8px 0 0;}
  .header-right{gap:6px;}

  .tiles-grid{grid-template-columns:repeat(2,1fr);}
  .section-overview{grid-template-columns:repeat(2,1fr);}
  .icon-picker-grid{grid-template-columns:repeat(5,1fr);}

  .page-header h1{font-size:18px;}
  .info-row{flex-direction:column;align-items:flex-start;gap:3px;}
  .info-value{text-align:left;}
}

/* EDIT BANNER */
.edit-banner{display:none;position:fixed;top:var(--header-h);left:var(--sidebar-w);right:0;background:linear-gradient(90deg,var(--manager) 0%,#9061f4 100%);color:var(--white);padding:8px 20px;font-size:12.5px;font-weight:600;z-index:80;align-items:center;gap:14px;}
body.edit-mode .edit-banner{display:flex;}
.edit-banner svg{width:14px;height:14px;}
.edit-banner-spacer{flex:1;}
/* Beide Höhen werden in measureEditBanner() gemessen. Die Vorgabewerte gelten,
   solange JS sie noch nicht gesetzt hat. Fest verdrahtete Werte reichen hier
   nicht: der Entwurfstext im Banner und die Format-Leiste brechen je nach
   Fensterbreite um. */
/* --edit-banner-h / --edit-toolbar-h stehen jetzt in css/app-tokens.css.
   measureEditBanner() überschreibt sie zur Laufzeit am Wurzelelement. */

/* Der Seiteninhalt beginnt unter Kopfzeile + Banner + Format-Leiste. Bewusst
   nur DIESE eine Regel: vorher gab es vier, von denen zwei durch spätere
   überschrieben wurden – dadurch fehlte der Zuschlag für die Leiste. */
body.edit-mode .main{margin-top:calc(var(--header-h) + var(--edit-banner-h) + var(--edit-toolbar-h));}
/* Entwurfszustand im Bearbeitungs-Banner. Der Balken wechselt die Farbe, damit
   auf einen Blick erkennbar ist, ob der eigene Stand schon live ist. */
.edit-banner.has-draft{background:linear-gradient(90deg,#b45309 0%,#d97706 100%);}
.edit-banner.is-preview{background:linear-gradient(90deg,#0f766e 0%,#0d9488 100%);}
.edit-banner button.primary{background:var(--white);color:var(--navy);}
.edit-banner button.primary:hover{background:rgba(255,255,255,.85);}
.edit-banner-state{display:inline-flex;align-items:center;gap:6px;font-weight:700;}
/* Kennzeichen "Entwurf" an Menüeinträgen mit unveröffentlichtem Stand */
.nav-draft-badge{display:none;flex-shrink:0;width:7px;height:7px;border-radius:50%;background:#d97706;box-shadow:0 0 0 2px rgba(217,119,6,.22);}
/* AKTIONSSPALTE (Neuigkeiten, Arbeitsanweisungen)
   Fünf bis sechs Textknöpfe pro Zeile haben die Tabelle über den Bildschirm
   hinaus gedehnt. Stattdessen Symbolknöpfe in einer Flex-Reihe: gleich hoch
   (Textknöpfe standen auf der Grundlinie, ein Knopf mit Symbol sackte dadurch
   ab), gleich breit und rund ein Drittel des Platzbedarfs. */
.row-actions{display:flex;align-items:center;gap:4px;justify-content:flex-end;}
.row-action{width:30px;height:30px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--gray-200);background:var(--white);color:var(--gray-600);border-radius:6px;cursor:pointer;
  padding:0;transition:all .12s;text-decoration:none;}
.row-action svg{width:15px;height:15px;}
.row-action:hover{background:var(--gray-50);border-color:var(--accent);color:var(--accent-dark);}
.row-action.primary{background:var(--accent);border-color:var(--accent);color:var(--white);}
.row-action.primary:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:var(--white);}
.row-action.danger:hover{background:#fef2f2;border-color:var(--danger);color:var(--danger);}
.row-action:disabled,.row-action.is-disabled{opacity:.4;cursor:not-allowed;pointer-events:none;}
.row-action-sep{width:1px;height:18px;background:var(--gray-200);flex-shrink:0;margin:0 2px;}
@media(max-width:900px){
  .row-actions{justify-content:flex-start;}
}

/* Schloss statt Werkzeugen an Bereichen ohne Bearbeitungsfreigabe */
.menu-locked{display:inline-flex;align-items:center;color:var(--gray-400);}
.menu-locked svg{width:13px;height:13px;}
body.edit-mode .nav-draft-badge{display:inline-block;}
/* Hinweisleiste über der Seite, wenn ein Entwurf vorliegt */
.draft-note{display:flex;align-items:center;gap:10px;background:#fffbeb;border:1.5px solid #fcd34d;color:#92400e;border-radius:var(--radius);padding:10px 14px;font-size:13px;margin-bottom:16px;}
.draft-note svg{width:16px;height:16px;flex-shrink:0;}
.draft-note-spacer{flex:1;}
.draft-note strong{font-weight:700;}
.preview-note{background:#f0fdfa;border-color:#5eead4;color:#115e59;}
.edit-banner button{background:rgba(255,255,255,.18);color:var(--white);border:none;padding:4px 12px;border-radius:5px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font-body);}
.edit-banner button:hover{background:rgba(255,255,255,.3);}

/* ======================================================================== */
/* BEWEGUNGSSYSTEM (Desktop)                                                */
/* Eine einzige Easing-Familie, eine Dauern-Skala, Bewegung nur dort, wo sie */
/* Hierarchie erklärt. Rein gestalterisch – Editor, Blockdaten und alle      */
/* Klick-Handler bleiben unberührt. Entrance-Animationen sind bewusst aus:   */
/*   - im Bearbeitungsmodus (body.edit-mode) – sonst zappelt der Editor      */
/*   - in der Telefon-App (body.mapp) – die hat ihre eigene Choreografie     */
/* ======================================================================== */
/* Die Bewegungs-Variablen (--ease-* und --t-*) stehen jetzt in
   css/app-tokens.css und zeigen dort auf die Kurven des Design-Systems.
   Dadurch greift auch die Rücksicht auf "prefers-reduced-motion", die das
   Design-System mitbringt: Bei reduzierter Bewegung setzt es alle Dauern auf
   nahezu null, was vorher nur für einzelne Animationen galt. */
@keyframes appearUp{from{opacity:0;transform:translate3d(0,10px,0);}to{opacity:1;transform:none;}}
@keyframes appearIn{from{opacity:0;transform:scale(.97);}to{opacity:1;transform:none;}}
@keyframes sheetIn{from{opacity:0;transform:translate3d(0,12px,0) scale(.97);}to{opacity:1;transform:none;}}
@keyframes backdropIn{from{opacity:0;}to{opacity:1;}}
@keyframes navSubIn{from{opacity:0;transform:translate3d(-6px,0,0);}to{opacity:1;transform:none;}}
@keyframes toastIn{from{opacity:0;transform:translate3d(0,14px,0) scale(.96);}to{opacity:1;transform:none;}}
@keyframes accBodyIn{from{opacity:0;transform:translate3d(0,-4px,0);}to{opacity:1;transform:none;}}
@keyframes railIn{from{transform:scaleY(0);}to{transform:scaleY(1);}}

/* ---- Einheitliches Druck-/Hover-Feedback ---- */
/* Nur transform/opacity/Farben – niemals width/height, damit der Bild-Zieh-
   griff im Editor weiterhin ruckelfrei skaliert. */
.btn,.ms-btn,.btn-login,.pin-btn,.icon-btn,.modal-close,
.tile,.section-overview-tile,.quick-tile,.news-box-item,.wi-widget-item,
.accordion-header,.user-chip,.nav-item,.nav-sub-item,.acc-img-btn,.ft-btn{
  transition:background var(--t-state) var(--ease-io),
             color var(--t-state) var(--ease-io),
             border-color var(--t-state) var(--ease-io),
             box-shadow var(--t-state) var(--ease-io),
             filter var(--t-state) var(--ease-io),
             transform var(--t-press) var(--ease-press);
}
/* Schaltflächen heben sich nicht an, sie geben unter dem Finger nach */
.btn:hover,.btn-login:hover,.ms-btn:hover{transform:none;}
.btn:hover{filter:brightness(1.05);}
.btn:active,.ms-btn:active,.btn-login:active,.pin-btn:active,
.icon-btn:active,.acc-img-btn:active{transform:scale(.97);}
/* Karten behalten das Anheben, der Druck drückt sie hinein */
.tile:active,.quick-tile:active{transform:translateY(-2px) scale(.985);}
.section-overview-tile:active{transform:translateY(-2px) scale(.985);}
.news-box-item:active,.wi-widget-item:active{transform:scale(.99);}
/* Sichtbarer Fokusring (Tastatur) – einheitlich statt browserabhängig */
.btn:focus-visible,.ms-btn:focus-visible,.btn-login:focus-visible,
.pin-btn:focus-visible,.icon-btn:focus-visible,.tile:focus-visible,
.section-overview-tile:focus-visible,.accordion-header:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}
/* Pfeile/Chevrons auf die gemeinsame Kurve */
.nav-chevron,.acc-chev,.sub-chev{transition:transform var(--t-state) var(--ease-out);}

/* ---- Dialoge, Hinweise, Navigation ---- */
.modal-backdrop.open{animation:backdropIn var(--t-state) var(--ease-io) both;}
.toast.show{animation:toastIn var(--t-state) var(--ease-out) both;}
body:not(.mapp) .nav-item.active::before{animation:railIn var(--t-state) var(--ease-out) both;}
/* Untermenü fächert auf, statt hart umzuschalten */
body:not(.mapp) .nav-sub.open > *{animation:navSubIn .26s var(--ease-out) both;}
body:not(.mapp) .nav-sub.open > *:nth-child(1){animation-delay:.01s;}
body:not(.mapp) .nav-sub.open > *:nth-child(2){animation-delay:.03s;}
body:not(.mapp) .nav-sub.open > *:nth-child(3){animation-delay:.05s;}
body:not(.mapp) .nav-sub.open > *:nth-child(4){animation-delay:.07s;}
body:not(.mapp) .nav-sub.open > *:nth-child(5){animation-delay:.09s;}
body:not(.mapp) .nav-sub.open > *:nth-child(6){animation-delay:.11s;}
body:not(.mapp) .nav-sub.open > *:nth-child(n+7){animation-delay:.13s;}
/* Akkordeon-Inhalt blendet ein (Höhe bleibt unangetastet – kein Layout-Risiko) */
body:not(.edit-mode) .accordion-body.open{animation:accBodyIn .26s var(--ease-out) both;}

/* ---- Inhalt erscheint gestaffelt (nur Desktop-Leseansicht) ---- */
/* Reihenfolge ist hier bewusst: Grundregel -> Verzögerungen -> Ausnahmen.
   Kein :not(#id) verwenden – das hebt die Spezifität auf ID-Niveau und die
   Kurzschreibweise "animation" würde die Verzögerungen wieder auf 0 setzen. */
body:not(.mapp):not(.edit-mode) #page-host > *{
  animation:appearUp var(--t-enter) var(--ease-out) both;
}
body:not(.mapp):not(.edit-mode) #page-host > *:nth-child(1){animation-delay:0s;}
body:not(.mapp):not(.edit-mode) #page-host > *:nth-child(2){animation-delay:.05s;}
body:not(.mapp):not(.edit-mode) #page-host > *:nth-child(3){animation-delay:.1s;}
body:not(.mapp):not(.edit-mode) #page-host > *:nth-child(4){animation-delay:.15s;}
body:not(.mapp):not(.edit-mode) #page-host > *:nth-child(n+5){animation-delay:.2s;}
/* Ausnahmen: eigene Choreografie (Blöcke, Kacheln) bzw. Editor-Leiste */
body:not(.mapp):not(.edit-mode) #page-host > #blocks-host,
body:not(.mapp):not(.edit-mode) #page-host > .add-block-bar,
body:not(.mapp):not(.edit-mode) #page-host > .section-overview{animation:none;}
/* Blöcke einzeln – #blocks-host selbst bleibt ohne Animation, damit sich
   Eltern- und Kind-Eintritt nicht überlagern */
body:not(.mapp):not(.edit-mode) #blocks-host > .block{
  animation:appearUp var(--t-enter) var(--ease-out) both;
}
body:not(.mapp):not(.edit-mode) #blocks-host > .block:nth-child(1){animation-delay:.06s;}
body:not(.mapp):not(.edit-mode) #blocks-host > .block:nth-child(2){animation-delay:.11s;}
body:not(.mapp):not(.edit-mode) #blocks-host > .block:nth-child(3){animation-delay:.16s;}
body:not(.mapp):not(.edit-mode) #blocks-host > .block:nth-child(4){animation-delay:.21s;}
body:not(.mapp):not(.edit-mode) #blocks-host > .block:nth-child(5){animation-delay:.26s;}
body:not(.mapp):not(.edit-mode) #blocks-host > .block:nth-child(n+6){animation-delay:.3s;}
/* Bereichsübersicht: Kacheln einzeln staffeln */
body:not(.mapp):not(.edit-mode) .section-overview > *{animation:appearIn .3s var(--ease-out) both;}
body:not(.mapp):not(.edit-mode) .section-overview > *:nth-child(1){animation-delay:.04s;}
body:not(.mapp):not(.edit-mode) .section-overview > *:nth-child(2){animation-delay:.08s;}
body:not(.mapp):not(.edit-mode) .section-overview > *:nth-child(3){animation-delay:.12s;}
body:not(.mapp):not(.edit-mode) .section-overview > *:nth-child(4){animation-delay:.16s;}
body:not(.mapp):not(.edit-mode) .section-overview > *:nth-child(5){animation-delay:.2s;}
body:not(.mapp):not(.edit-mode) .section-overview > *:nth-child(6){animation-delay:.24s;}
body:not(.mapp):not(.edit-mode) .section-overview > *:nth-child(n+7){animation-delay:.28s;}

/* ---- Bewegung reduzieren: systemweit respektieren ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-delay:0s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ======================================================================== */
/* MOBILE APP (body.mapp) – eigenständige, app-artige Oberfläche für Telefone */
/* Aktiv bei <=900px, angemeldetem Benutzer und ausgeschaltetem Bearbeitungs- */
/* modus. Im Bearbeitungsmodus greift automatisch das klassische Layout.      */
/* ======================================================================== */
@keyframes mRise{from{opacity:0;transform:translateY(13px);}to{opacity:1;transform:none;}}
@keyframes mTabIn{from{opacity:0;transform:translateY(7px) scale(.995);}to{opacity:1;transform:none;}}
@keyframes mPush{from{opacity:.55;transform:translateX(30px);}to{opacity:1;transform:none;}}
@keyframes mHeadIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
@keyframes mBadgePop{0%{transform:scale(0);}62%{transform:scale(1.2);}100%{transform:scale(1);}}
@keyframes mBell{0%,88%,100%{transform:rotate(0);}90%{transform:rotate(-14deg);}94%{transform:rotate(14deg);}97%{transform:rotate(-7deg);}}
@keyframes mTicker{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes mSuccessIn{0%{opacity:0;transform:scale(.93);}58%{transform:scale(1.02);}100%{opacity:1;transform:none;}}
@keyframes mCheckDraw{from{stroke-dashoffset:22;}to{stroke-dashoffset:0;}}

#mapp,#mapp-bar,#mapp-wi{display:none;}
body.mapp{background:#f7f9fb;overflow:hidden;}
/* 100dvh statt bottom:0 – in iOS Safari bezieht sich position:fixed auf den
   großen Viewport, die Tab-Leiste läge sonst hinter der Browser-Werkzeugleiste. */
body.mapp #mapp{position:fixed;top:0;left:0;right:0;height:100vh;height:100dvh;z-index:70;display:flex;flex-direction:column;background:#f7f9fb;}
body.mapp .header,body.mapp .sidebar,body.mapp .sidebar-backdrop,
body.mapp .edit-banner,body.mapp .format-toolbar{display:none !important;}
body.mapp .main{display:none;}
body.mapp .toast{left:16px;right:16px;bottom:calc(78px + env(safe-area-inset-bottom));justify-content:center;}

/* Scrollbereiche ohne sichtbare Scrollbar; overscroll-behavior verhindert das
   Mitziehen der Seite (Rubber-Banding) am Listenende in iOS Safari. */
.mapp-sc{scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.mapp-sc::-webkit-scrollbar{width:0;height:0;}

/* ---------- Kopfbereich ---------- */
.mhead{flex:none;background:var(--white);border-bottom:1px solid var(--gray-100);padding:calc(env(safe-area-inset-top) + 10px) 20px 12px;}
.mhead-start{background:var(--navy);border-bottom:none;border-radius:0 0 22px 22px;padding:calc(env(safe-area-inset-top) + 8px) 18px 18px;}
.mhead-top{display:flex;align-items:center;gap:8px;padding-bottom:12px;}
.mhead-logo{display:flex;align-items:center;height:20px;}
.mhead-logo svg,.mhead-logo img{height:20px;width:auto;display:block;}
.mhead-spacer{flex:1;}
.mhead-icon{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.10);border:none;display:flex;align-items:center;justify-content:center;color:var(--white);cursor:pointer;flex-shrink:0;}
.mhead-icon svg{width:18px;height:18px;}
.mhead-ava{width:38px;height:38px;border-radius:50%;background:var(--accent);border:none;color:var(--white);font:700 13px/1 var(--font-body);cursor:pointer;flex-shrink:0;}
.mhead-greet{animation:mHeadIn .5s cubic-bezier(.32,.72,0,1) both;}
.mhead-date{font:400 13px/1.3 var(--font-body);color:rgba(255,255,255,.6);}
.mhead-hi{font:700 23px/1.25 var(--font-body);color:var(--white);letter-spacing:-.3px;margin-top:2px;}
.mhead-title{font:700 24px/1.2 var(--font-body);color:var(--navy);letter-spacing:-.4px;}
.mhead-sub{font:400 13px/1.4 var(--font-body);color:var(--gray-600);margin-top:2px;}

/* Segmented Control (Offen / Archiv) */
.mseg{position:relative;display:flex;background:var(--gray-100);border-radius:9px;padding:3px;margin-top:14px;height:40px;}
.mseg-thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:7px;background:var(--white);box-shadow:0 1px 3px rgba(26,46,74,.16);transition:transform .38s cubic-bezier(.32,.72,0,1);}
.mseg-thumb.right{transform:translateX(100%);}
.mseg button{flex:1;position:relative;border:none;background:none;color:var(--gray-600);font:600 13.5px/1 var(--font-body);font-family:var(--font-body);cursor:pointer;transition:color .28s ease;}
.mseg button.on{color:var(--navy);}

/* Suchfeld */
.msearch{display:flex;align-items:center;gap:9px;background:var(--gray-100);border-radius:10px;padding:0 13px;margin-top:14px;min-height:46px;}
.msearch svg{width:17px;height:17px;color:var(--gray-400);flex-shrink:0;}
.msearch input{flex:1;min-width:0;border:none;background:none;outline:none;font:400 16px/1 var(--font-body);color:var(--gray-800);padding:0;}

/* ---------- Scroll-Fläche ---------- */
#mapp-screen{flex:1;overflow-y:auto;padding:14px 16px 22px;animation:mTabIn .36s cubic-bezier(.32,.72,0,1) both;}
#mapp-screen.flush{padding-top:0;}
.mrise{animation:mRise .52s cubic-bezier(.32,.72,0,1) both;}
.md1{animation-delay:.03s;}.md2{animation-delay:.08s;}.md3{animation-delay:.13s;}.md4{animation-delay:.18s;}.md5{animation-delay:.23s;}

/* ---------- Bausteine ---------- */
.mcard{background:var(--white);border:1px solid var(--gray-200);border-radius:12px;overflow:hidden;}
.mcard.shadow{box-shadow:0 2px 12px rgba(26,46,74,.06);border-color:var(--gray-200);}
.mcard-head{display:flex;align-items:center;gap:8px;padding:14px 16px 12px;}
.mcard-cap{font:700 12px/1 var(--font-body);color:var(--navy);text-transform:uppercase;letter-spacing:.6px;}
.mlbl{font:700 11.5px/1 var(--font-body);color:var(--gray-400);text-transform:uppercase;letter-spacing:.7px;padding:18px 4px 9px;}
.mbadge{background:var(--danger);color:var(--white);font:700 11px/1 var(--font-body);min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 6px;animation:mBadgePop .42s cubic-bezier(.32,.72,0,1) both;}
.mempty{text-align:center;padding:40px 20px;font:400 14px/1.6 var(--font-body);color:var(--gray-400);}
.mhint{font:400 12.5px/1.55 var(--font-body);color:var(--gray-600);padding:0 4px 10px;}

.mrow{display:flex;align-items:center;gap:12px;padding:14px 16px;min-height:58px;border-top:1px solid var(--gray-100);cursor:pointer;background:var(--white);text-decoration:none;color:inherit;transition:background .18s ease,transform .3s cubic-bezier(.32,.72,0,1);}
.mrow:first-child{border-top:none;}
.mrow:active{background:#eef1f6;transform:scale(.988);}
.mrow-main{flex:1;min-width:0;}
.mrow-t{font:600 14.5px/1.3 var(--font-body);color:var(--navy);}
.mrow-m{font:400 11.5px/1.35 var(--font-body);color:var(--gray-400);margin-top:2px;}
.mchip{width:38px;height:38px;border-radius:10px;background:var(--accent-light);color:var(--accent-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mchip svg{width:19px;height:19px;}
.mchip.warn{background:#faeeda;color:var(--warning);}
.mchip.pdf{background:#fcebeb;color:#a32d2d;border-radius:8px;font:700 10px/1 var(--font-body);}
.mchev{width:16px;height:16px;color:var(--gray-300);flex-shrink:0;transition:transform .3s cubic-bezier(.32,.72,0,1);}
.mrow:active .mchev{transform:translateX(2px);}
.mok{width:20px;height:20px;color:var(--success);flex-shrink:0;}
.mpill{font:700 10.5px/1 var(--font-body);padding:5px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;}
.mpill-open{background:#faeeda;color:#854f0b;}
.mpill-done{background:#eaf3de;color:#3b6d11;}
.mpill-must{background:#faeeda;color:#854f0b;border:1px solid #ba7517;}
.mtag{font:600 11px/1 var(--font-body);color:var(--gray-600);background:var(--gray-100);padding:5px 9px;border-radius:6px;white-space:nowrap;}

/* Ticker */
.mticker{display:flex;align-items:center;gap:10px;background:#fffaf2;border:1px solid #f0d8b4;border-radius:10px;padding:10px 12px;margin-bottom:14px;}
.mticker > svg{width:16px;height:16px;color:var(--warning);flex-shrink:0;animation:mBell 2.5s ease infinite;transform-origin:top center;}
.mticker-vp{flex:1;overflow:hidden;white-space:nowrap;}
.mticker-track{display:inline-block;white-space:nowrap;animation:mTicker 22s linear infinite;}
.mticker-track span{display:inline-block;padding-right:40px;font:600 13px/1 var(--font-body);color:#854f0b;}

/* Alles-erledigt-Zeile */
.mdone{display:flex;align-items:center;gap:10px;padding:4px 16px 16px;}
.mdone svg{width:22px;height:22px;color:var(--success);flex-shrink:0;}
.mdone span{font:500 14px/1.3 var(--font-body);color:var(--gray-600);}
.mfoot-link{display:block;width:100%;text-align:left;background:none;border:none;border-top:1px solid var(--gray-100);padding:13px 16px;font:600 13px/1 var(--font-body);font-family:var(--font-body);color:var(--accent-dark);cursor:pointer;}

/* Schnellzugriff-Kacheln */
.mtiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.mqt{background:var(--white);border:1px solid var(--gray-200);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:9px;min-height:98px;text-align:left;cursor:pointer;font-family:var(--font-body);text-decoration:none;transition:transform .3s cubic-bezier(.32,.72,0,1),background .2s ease,border-color .22s ease;}
.mqt:active{transform:scale(.965);background:var(--gray-50);}
.mqt-t{font:600 13.5px/1.3 var(--font-body);color:var(--navy);}
.mqt-dark{background:var(--navy);border-color:var(--navy);}
.mqt-dark .mchip{background:rgba(103,190,217,.22);color:var(--accent);}
.mqt-dark .mqt-t{color:var(--white);display:block;}
.mqt-m{display:block;font:400 11.5px/1.3 var(--font-body);color:rgba(255,255,255,.55);margin-top:1px;}

/* Onboarding auf der App-Startseite */
.mob-hero{background:var(--navy);border-radius:14px;padding:18px;color:#fff;}
.mob-hero-cap{font:700 11px/1 var(--font-body);color:var(--accent);text-transform:uppercase;letter-spacing:.7px;}
.mob-hero-t{font:700 21px/1.25 var(--font-body);margin-top:8px;letter-spacing:-.3px;overflow-wrap:break-word;}
.mob-hero-p{font:400 13px/1.55 var(--font-body);color:rgba(255,255,255,.72);margin-top:8px;overflow-wrap:break-word;}
.mob-hero-meter{display:flex;align-items:center;gap:10px;margin-top:16px;}
.mob-hero-track{flex:1;min-width:0;height:8px;border-radius:5px;background:rgba(255,255,255,.18);overflow:hidden;}
.mob-hero-bar{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--accent),#8fe0c0);transition:width .45s cubic-bezier(.32,.72,0,1);}
.mob-hero-n{font:700 12.5px/1 var(--font-body);color:#fff;flex-shrink:0;}
.mob-finish{margin-top:18px;background:var(--white);border:1px solid var(--gray-200);border-radius:12px;padding:16px;}
.mob-finish p{font:400 12.5px/1.55 var(--font-body);color:var(--gray-600);margin:0 0 12px;}
.mob-finish-hint{font:400 12px/1.4 var(--font-body);color:var(--gray-400);text-align:center;margin-top:10px;}

/* Benutzerkarte (Mehr) */
.muser{display:flex;align-items:center;gap:13px;background:var(--white);border:1px solid var(--gray-200);border-radius:12px;padding:14px;margin-top:16px;}
.muser-ava{width:46px;height:46px;border-radius:50%;background:var(--navy);color:var(--white);display:flex;align-items:center;justify-content:center;font:700 15px/1 var(--font-body);flex-shrink:0;}
.muser-n{font:600 15px/1.3 var(--font-body);color:var(--navy);}
.muser-btn{background:var(--gray-100);border:none;color:var(--gray-600);font:600 11px/1 var(--font-body);font-family:var(--font-body);padding:7px 10px;border-radius:6px;cursor:pointer;flex-shrink:0;}
.mapp-legal{text-align:center;font:400 11px/1.5 var(--font-body);color:var(--gray-400);padding:22px 0 4px;}

/* Dashboard-Blöcke innerhalb der App-Startseite */
.mapp-blocks{display:flex;flex-direction:column;gap:14px;margin-top:18px;}
.mapp-blocks .block{grid-column:auto;}
.mapp-blocks .card,.mapp-blocks .alert,.mapp-blocks .image-block,.mapp-blocks .btn-block-wrap{margin-bottom:0;}

/* ---------- Tab-Leiste ---------- */
.mtabs{flex:none;background:rgba(255,255,255,.96);border-top:1px solid var(--gray-200);display:flex;padding:8px 4px calc(10px + env(safe-area-inset-bottom));z-index:55;}
.mtab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:52px;padding:0;background:none;border:none;cursor:pointer;position:relative;color:var(--gray-400);font-family:var(--font-body);transition:color .28s ease,opacity .2s ease;}
.mtab.on{color:var(--accent-dark);}
.mtab svg{width:21px;height:21px;transition:transform .34s cubic-bezier(.32,.72,0,1);}
.mtab:active{opacity:.55;}
.mtab:active svg{transform:scale(.88);}
.mtab span{font:600 10.5px/1 var(--font-body);}
.mtab-badge{position:absolute;top:-1px;right:18px;background:var(--danger);color:var(--white);font:700 10px/1 var(--font-body);min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px;animation:mBadgePop .42s cubic-bezier(.32,.72,0,1) both;}

/* ---------- Detailebene (Push-Navigation) ---------- */
body.mapp.mapp-detail #mapp-bar{display:block;position:fixed;top:0;left:0;right:0;z-index:92;background:var(--white);border-bottom:1px solid var(--gray-100);padding-top:env(safe-area-inset-top);}
.mbar-back{display:flex;align-items:center;gap:2px;height:46px;padding:0 12px 0 8px;background:none;border:none;color:var(--accent-dark);font:600 15px/1 var(--font-body);font-family:var(--font-body);cursor:pointer;}
.mbar-back svg{width:20px;height:20px;}
.mbar-back:active{opacity:.55;}

/* Seiten-Detail: der bestehende Renderer (#page-host in .main) wird eingeschoben */
body.mapp.mapp-detail-page .main{display:block;position:fixed;top:0;left:0;right:0;height:100vh;height:100dvh;margin:0;min-height:0;z-index:90;background:var(--white);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;animation:mPush .44s cubic-bezier(.32,.72,0,1);
  padding:calc(env(safe-area-inset-top) + 58px) 18px calc(30px + env(safe-area-inset-bottom));
  padding-left:calc(18px + env(safe-area-inset-left));padding-right:calc(18px + env(safe-area-inset-right));}
body.mapp.mapp-detail-page .page-header{margin-bottom:18px;}
body.mapp.mapp-detail-page .page-header h1{font-size:25px;letter-spacing:-.5px;line-height:1.2;}
body.mapp.mapp-detail-page .breadcrumb{margin-bottom:4px;}
body.mapp.mapp-detail-page .section-overview{grid-template-columns:1fr 1fr;gap:11px;}

/* Arbeitsanweisung-Detail */
body.mapp.mapp-detail-wi #mapp-wi{display:flex;flex-direction:column;position:fixed;top:0;left:0;right:0;height:100vh;height:100dvh;z-index:90;background:var(--white);animation:mPush .44s cubic-bezier(.32,.72,0,1);padding-top:calc(env(safe-area-inset-top) + 46px);}
.mwi-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:16px 20px 12px;}
.mwi-scroll,.mwi-scroll *{overflow-wrap:break-word;}
.mwi-text img{max-width:100% !important;height:auto !important;}
.mwi-text table{display:block;width:max-content;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.mwi-title{font:700 26px/1.2 var(--font-body);color:var(--navy);letter-spacing:-.5px;margin:12px 0 6px;}
.mwi-meta{font:400 12.5px/1.5 var(--font-body);color:var(--gray-400);margin-bottom:16px;}
.mwi-text{font:400 15px/1.7 var(--font-body);color:var(--gray-800);}
.mwi-text p{margin:0 0 12px;}
.mwi-text ul,.mwi-text ol{padding-left:22px;margin:0 0 12px;}
.mwi-text h1,.mwi-text h2,.mwi-text h3{font-size:18px;font-weight:700;color:var(--navy);margin:16px 0 8px;line-height:1.3;}
.mwi-pdf{display:flex;align-items:center;gap:12px;border:1px solid var(--gray-200);border-radius:10px;padding:13px 14px;margin-top:14px;background:var(--gray-50);text-decoration:none;}
.mwi-pdf-open{font:600 12.5px/1 var(--font-body);color:var(--accent-dark);flex-shrink:0;}
.mwi-pdf .mrow-t,.mwi-pdf .mrow-m{display:block;}
.mwi-foot{flex:none;border-top:1px solid var(--gray-200);background:var(--white);padding:14px 20px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(26,46,74,.06);}
.mwi-foot p{font:400 12.5px/1.55 var(--font-body);color:var(--gray-600);margin:0 0 12px;}
.mwi-btn{width:100%;min-height:54px;border:none;border-radius:12px;background:var(--navy);color:var(--white);font:600 16px/1 var(--font-body);font-family:var(--font-body);display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:transform .3s cubic-bezier(.32,.72,0,1),background .2s ease;}
.mwi-btn:active{background:var(--navy-mid);transform:scale(.985);}
.mwi-btn:disabled{opacity:.6;}
.mwi-ok{display:flex;align-items:center;gap:12px;min-height:54px;border-radius:12px;background:#eaf3de;padding:0 16px;animation:mSuccessIn .5s cubic-bezier(.32,.72,0,1) both;}
.mwi-ok svg{width:24px;height:24px;color:var(--success);flex-shrink:0;}
.mwi-ok-t{font:600 15px/1.2 var(--font-body);color:#3b6d11;}
.mwi-ok-m{font:400 12px/1.3 var(--font-body);color:var(--gray-600);}
.mwi-ok path{stroke-dasharray:22;animation:mCheckDraw .45s cubic-bezier(.32,.72,0,1) .12s both;}

@media (prefers-reduced-motion: reduce){
  #mapp-screen,.mrise,.mhead-greet,.mticker > svg,.mticker-track,.mwi-ok,.mwi-ok path,
  body.mapp.mapp-detail-page .main,body.mapp.mapp-detail-wi #mapp-wi{animation:none !important;}
}