*{box-sizing:border-box;margin:0;padding:0;}
    body{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background:#f0ede8;color:#1a1a1a;height:100vh;display:flex;flex-direction:column;overflow:hidden;}
    .bg-blob{position:fixed;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;}
    .bg-blob-1{width:600px;height:600px;background:rgba(180,190,255,.14);top:-150px;right:-100px;}
    .bg-blob-2{width:500px;height:500px;background:rgba(255,220,180,.11);bottom:-50px;left:-80px;}
    .bg-blob-3{width:350px;height:350px;background:rgba(200,240,220,.14);bottom:120px;right:250px;}

    /* START SCREEN */
    .start-screen{position:fixed;inset:0;background:transparent;z-index:999;display:flex;align-items:center;justify-content:center;}
    .assessment-name-screen-wrap.start-screen{flex-direction:column;align-items:stretch;justify-content:flex-start;}
    .assessment-name-body{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;min-height:0;}
    /* Self-Assessment: Top-Leiste ohne separaten „Karten“-Look — gleicher Hintergrund wie die Fläche darunter */
    #assessment-name-screen .top-bar,
    .assessment-question-screen > .top-bar,
    .assessment-result-screen > .top-bar{
      background:transparent;
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
      border-bottom:none;
      box-shadow:none;
    }
    .start-box{background:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.92);border-radius:22px;padding:40px 48px;display:flex;flex-direction:column;align-items:center;gap:20px;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 20px 60px rgba(0,0,0,.1);backdrop-filter:blur(28px) saturate(1.4);-webkit-backdrop-filter:blur(28px) saturate(1.4);min-width:340px;}
    .start-box h2{font-size:18px;font-weight:800;color:#1a1a1a;letter-spacing:0.5px;}
    .start-box p{font-size:12px;color:#888;text-align:center;line-height:1.6;}
    .start-input{width:100%;padding:10px 14px;border:1px solid rgba(0,0,0,.1);border-radius:8px;font-size:14px;font-family:inherit;color:#1a1a1a;background:rgba(255,255,255,.7);outline:none;transition:border-color .15s,background .15s;}
    .start-input:focus{border-color:rgba(0,0,0,.28);background:#fff;}
    .start-btn{width:100%;padding:11px;border-radius:10px;border:none;background:#1a1a1a;color:#fff;font-size:13px;font-weight:700;cursor:pointer;letter-spacing:.3px;transition:opacity .15s;}
    .start-btn:hover:not(:disabled){opacity:0.8;}
    .start-btn:disabled{opacity:0.3;cursor:default;}
    .startup-signin-btn{width:auto;min-width:0;margin-top:0;padding:11px 14px;}

    /* SUCCESS PROFILES ENTRY (two columns) */
    .profile-name-screen-layout{display:flex;gap:32px;max-width:820px;width:100%;align-items:stretch;}
    .profile-name-screen-left{flex:1;min-width:200px;display:flex;flex-direction:column;background:#fff;border:1.5px solid #e0e0e0;border-radius:12px;padding:24px;box-shadow:0 8px 40px rgba(0,0,0,0.08);}
    .profile-name-screen-left h3{font-size:14px;font-weight:800;color:#1a1a1a;letter-spacing:0.5px;margin-bottom:14px;}
    .profile-name-screen-list{flex:1;min-height:120px;max-height:280px;overflow-y:auto;}
    .profile-name-screen-list::-webkit-scrollbar{width:6px;}
    .profile-name-screen-list::-webkit-scrollbar-thumb{background:#ddd;border-radius:3px;}
    .profile-name-screen-item{padding:12px 14px;border:1px solid #e0e0e0;border-radius:8px;font-size:13px;font-weight:400;color:#1a1a1a;cursor:pointer;transition:background 0.15s,color 0.15s,border-color 0.15s;margin-bottom:8px;}
    .profile-name-screen-item:last-child{margin-bottom:0;}
    .profile-name-screen-item:hover{background:#f0f0f0;}
    .profile-name-screen-item:active{background:#e5e5e5;}
    .profile-name-screen-item.selected{background:#1a1a1a;color:#fff;border-color:#1a1a1a;}
    .profile-name-screen-right{flex:1;min-width:240px;display:flex;flex-direction:column;background:#fff;border:1.5px solid #e0e0e0;border-radius:12px;padding:32px 28px;box-shadow:0 8px 40px rgba(0,0,0,0.08);}
    .profile-name-screen-variant-row{display:flex;gap:10px;margin-top:8px;}
    .profile-name-screen-variant-row button{flex:1;min-width:0;white-space:nowrap;}
    .profile-name-screen-right h3{font-size:14px;font-weight:800;color:#1a1a1a;letter-spacing:0.5px;margin-bottom:8px;}
    .profile-name-screen-right .start-input{margin-bottom:4px;}
    .profile-name-screen-right .start-btn{margin-top:8px;}
    .profile-name-screen-right .export-btn{margin-top:16px;}

    /* TOP BAR */
    .top-bar{background:rgba(255,255,255,.75);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border-bottom:1px solid rgba(0,0,0,.07);padding:10px 28px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:relative;z-index:20;}
    .top-bar h1{font-size:13px;font-weight:600;color:#555;letter-spacing:.2px;}
    .export-btn{padding:7px 16px;border-radius:8px;border:1px solid rgba(0,0,0,.1);background:rgba(255,255,255,.7);color:#1a1a1a;font-weight:600;cursor:pointer;font-size:12px;white-space:nowrap;}
    .export-btn:hover{background:rgba(255,255,255,.95);border-color:rgba(0,0,0,.18);}
    .export-btn:has(.btn-nav-icon-svg){display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:36px;padding:6px 12px;line-height:0;}
    .export-btn:has(.btn-nav-icon-svg) .btn-nav-icon-svg{display:block;width:20px;height:20px;flex-shrink:0;color:inherit;}
    .compare-result-top .export-btn:has(.btn-nav-icon-svg),
    .skill-radar-screen-top .export-btn:has(.btn-nav-icon-svg){min-width:40px;width:auto;flex:0 0 auto;}
    /* Home-Button im Framework-Overview-Header an die Größe und Position des
       Home-Buttons im Profile-History-Screen angleichen (height:40px statt
       min-height:36px, padding:0 10px statt 6px 12px, optisch um 3px nach
       oben verschoben — siehe #profile-history-screen .profile-history-back-btn). */
    #framework-overview-screen .framework-overview-top-actions .export-btn:has(.btn-nav-icon-svg){
      min-width:40px;width:auto;flex:0 0 auto;
      height:40px;min-height:0;padding:0 10px;
      transform:translateY(-3px);
    }
    .saved-interviews-list-actions{display:flex;justify-content:flex-end;margin-top:4px;}
    .experience-journal-screen-top .experience-journal-top-actions{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
      position:relative;
      z-index:2;
    }
    .progress-info{font-size:12px;color:#666;}

    /* THREE COLUMNS */
    .sort-area{display:flex;flex:1;min-height:0;}
    .cat-col{flex:1;display:flex;flex-direction:column;border-right:1px solid #e0e0e0;background:#fafafa;overflow:hidden;}
    .cat-col:last-child{border-right:none;}
    .cat-col.drag-over .cat-header{background:#1a1a1a;}
    .cat-col.drag-over .cat-header-label{color:#fff;}
    .cat-col.drag-over .cat-count{border-color:#fff;color:#fff;background:transparent;}

    .cat-header{padding:10px 14px;background:#fff;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;transition:background 0.15s;user-select:none;}
    .cat-header-label{font-size:12px;font-weight:700;color:#1a1a1a;letter-spacing:0.5px;}
    .cat-count{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;border:1.5px solid #1a1a1a;}
    .cat-count.ok{background:#1a1a1a;color:#fff;}
    .cat-count.bad{background:#fff;color:#c0392b;border-color:#c0392b;}

    .mini-stack{flex:1;overflow-y:auto;padding:10px;}
    .mini-stack::-webkit-scrollbar{width:3px;}
    .mini-stack::-webkit-scrollbar-thumb{background:#ddd;border-radius:2px;}

    .mini-card{width:100%;background:#fff;border:1.5px solid #ddd;border-radius:6px;padding:8px 10px 26px;font-size:11px;font-weight:600;color:#1a1a1a;cursor:pointer;margin-bottom:-18px;position:relative;box-shadow:0 1px 4px rgba(0,0,0,0.07);transition:border-color 0.15s, box-shadow 0.15s, transform 0.15s;}
    .mini-card:last-child{margin-bottom:0;}
    .mini-card:hover{border-color:#1a1a1a;z-index:10;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.12);}
    .mini-card-num{font-size:9px;color:#999;font-weight:400;margin-bottom:1px;}
    .mini-card-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .mini-card[draggable=true]{cursor:grab;}
    .mini-card.dragging{opacity:0.35;}

    /* BOTTOM AREA */
    .bottom-area{flex-shrink:0;background:#f0f0f0;border-top:2px solid #e0e0e0;display:flex;align-items:center;justify-content:center;padding:20px 24px;min-height:200px;}
    .bottom-empty{font-size:13px;color:#bbb;text-align:center;line-height:1.8;}
    .bottom-empty strong{display:block;font-size:15px;color:#ccc;margin-bottom:4px;}

    /* BOTTOM CARD (drag source) */
    .bottom-card-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;}
    .bottom-hint{font-size:10px;color:#bbb;letter-spacing:0.5px;}

    /* LANDSCAPE CARD */
    .card-container{perspective:1200px;width:560px;height:290px;flex-shrink:0;}
    .card-container.clickable{cursor:pointer;}
    .card-container.draggable-card{cursor:grab;}
    .card-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform 0.55s cubic-bezier(.4,0,.2,1);}
    .card-inner.flipped{transform:rotateY(180deg);}
    .card-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:12px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,0.12);}
    .card-front,.card-back{background:#fff;display:grid;grid-template-columns:1fr 1fr;border:1.5px solid #e0e0e0;}
    .card-back{transform:rotateY(180deg);}
    .card-front-left,.card-back-left{padding:20px;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;}
    .card-front-right,.card-back-right{padding:20px;background:#fafafa;overflow-y:auto;}
    .card-front-right::-webkit-scrollbar,.card-back-right::-webkit-scrollbar{width:3px;}
    .card-front-right::-webkit-scrollbar-thumb,.card-back-right::-webkit-scrollbar-thumb{background:#ddd;border-radius:2px;}
    .card-num{font-size:10px;font-weight:700;color:#999;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px;}
    .card-title{font-size:17px;font-weight:800;color:#1a1a1a;line-height:1.2;margin-bottom:8px;}
    .card-def{font-size:11px;color:#666;line-height:1.6;font-style:italic;}
    .card-section-title{font-size:15px;font-weight:800;color:#1a1a1a;margin-bottom:8px;display:flex;align-items:center;gap:7px;}
    .card-section-title::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:#1a1a1a;flex-shrink:0;}
    .card-bullets{list-style:none;}
    .card-bullets li{font-size:11px;color:#444;padding:2px 0 2px 14px;position:relative;line-height:1.5;}
    .card-bullets li::before{content:'–';position:absolute;left:0;color:#999;}

    /* Swipe */
    @keyframes swipeInRight{0%{transform:translateX(100px) rotate(3deg) scale(0.95);opacity:0;}60%{transform:translateX(-6px) rotate(-0.3deg) scale(1.01);opacity:1;}100%{transform:none;opacity:1;}}
    @keyframes swipeInLeft{0%{transform:translateX(-100px) rotate(-3deg) scale(0.95);opacity:0;}60%{transform:translateX(6px) rotate(0.3deg) scale(1.01);opacity:1;}100%{transform:none;opacity:1;}}
    .card-container.swipe-right .card-inner{animation:swipeInRight 0.45s cubic-bezier(.22,.68,0,1.2);}
    .card-container.swipe-left .card-inner{animation:swipeInLeft 0.45s cubic-bezier(.22,.68,0,1.2);}

    /*
      Card Sort + Success Profile: Blob-Hintergrund wie Home, keine Tabellen-Optik.
      Mini-Karten: Liquid-Glass wie .home-card; Spalten-Titel mittig, Zähler-Pill daneben.
      Große Karte unten nur #main-card-sort (siehe unten).
    */
    #main-card-sort,
    #main-success-profiles{
      position:relative;
      z-index:10;
      background:transparent;
      isolation:isolate;
    }
    #main-success-profiles{
      --version-history-label:#8a8a8a;
    }
    #main-card-sort > .top-bar,
    #main-success-profiles > .top-bar,
    #job-design-admin-screen > .top-bar{
      background:transparent;
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
      border-bottom:1px solid rgba(0,0,0,.06);
      box-shadow:none;
    }
    .success-profile-builder-layout{
      display:flex;
      flex:1;
      flex-direction:row;
      min-height:0;
      align-items:stretch;
    }
    .success-profile-builder-main{
      flex:1;
      display:flex;
      flex-direction:column;
      min-height:0;
      min-width:0;
    }
    .position-success-version-sidebar{
      --version-history-label:#8a8a8a;
      flex-shrink:0;
      width:min(260px,34vw);
      max-width:280px;
      display:none;
      flex-direction:column;
      border-right:1px solid rgba(0,0,0,.08);
      background:rgba(255,255,255,.42);
      backdrop-filter:blur(16px) saturate(1.2);
      -webkit-backdrop-filter:blur(16px) saturate(1.2);
      transition:width .22s ease, min-width .22s ease, max-width .22s ease;
      overflow:hidden;
    }
    .position-success-version-sidebar--collapsed{
      width:44px;
      min-width:44px;
      max-width:44px;
    }
    .position-success-version-sidebar-head{
      display:flex;
      flex-direction:row;
      align-items:center;
      gap:10px;
      padding:10px 6px 8px 8px;
      flex-shrink:0;
      width:100%;
      min-width:0;
    }
    .position-success-version-sidebar--collapsed .position-success-version-sidebar-head{
      flex:1;
      flex-direction:column;
      align-items:center;
      justify-content:flex-start;
      padding:12px 4px 8px;
      gap:4px;
      width:auto;
    }
    .position-success-version-toggle{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      margin:0 0 0 auto;
      padding:4px 6px;
      border:none;
      background:transparent;
      cursor:pointer;
      color:var(--version-history-label);
      border-radius:6px;
      flex-shrink:0;
      line-height:0;
    }
    .position-success-version-sidebar--collapsed .position-success-version-toggle{
      margin-left:0;
    }
    .position-success-version-toggle:hover{
      background:rgba(0,0,0,.05);
    }
    .position-success-version-chevron{
      display:flex;
      line-height:0;
    }
    .position-success-version-chevron-svg{
      display:block;
    }
    .position-success-version-chevron--points-right .position-success-version-chevron-svg{
      transform:scaleX(-1);
    }
    .position-success-version-sidebar-title{
      font-size:10px;
      font-weight:700;
      letter-spacing:0.12em;
      text-transform:uppercase;
      color:var(--version-history-label);
      padding:0;
      flex:1;
      min-width:0;
      text-align:left;
    }
    .position-success-version-sidebar--collapsed .position-success-version-sidebar-title,
    .position-success-version-sidebar--collapsed .position-success-version-list{
      display:none !important;
    }
    .position-success-version-list{
      flex:1;
      overflow-y:auto;
      padding:8px 8px 12px;
      display:flex;
      flex-direction:column;
      gap:8px;
      min-height:0;
    }
    .position-success-version-item{
      background:rgba(255,255,255,.65);
      border:1px solid rgba(255,255,255,.9);
      border-radius:12px;
      padding:10px 10px 8px;
      font-size:12px;
      line-height:1.35;
      color:#222;
      box-shadow:0 1px 0 rgba(255,255,255,.85) inset;
      cursor:pointer;
      transition:border-color .15s, box-shadow .15s, background .15s;
    }
    .position-success-version-item:hover{
      border-color:rgba(0,0,0,.1);
      background:rgba(255,255,255,.78);
    }
    .position-success-version-item--active{
      border-color:rgba(0,0,0,.14);
      box-shadow:0 1px 0 rgba(255,255,255,.55) inset;
      background:rgba(236,236,236,.92);
    }
    .position-success-version-item--active:hover{
      border-color:rgba(0,0,0,.18);
      background:rgba(228,228,228,.94);
    }
    .position-success-version-item-date{
      font-weight:700;
      color:#111;
      margin-bottom:4px;
    }
    .position-success-version-item-user{
      font-size:11px;
      color:#555;
      word-break:break-all;
      margin-bottom:8px;
    }
    .position-success-version-item-del{
      font-size:11px;
      padding:4px 10px;
      border-radius:8px;
      border:1px solid rgba(180,60,60,.35);
      background:rgba(255,248,248,.9);
      color:#a32020;
      cursor:pointer;
      width:auto;
      align-self:flex-start;
    }
    .position-success-version-item-del:hover{
      background:rgba(255,230,230,.95);
    }
    .position-success-version-empty,
    .position-success-version-loading{
      font-size:12px;
      color:#777;
      padding:8px 6px;
    }
    .position-success-version-create-btn{
      appearance:none;
      -webkit-appearance:none;
      display:block;
      width:100%;
      box-sizing:border-box;
      text-align:left;
      background:rgba(255,255,255,.65);
      border:1px solid rgba(255,255,255,.9);
      border-radius:12px;
      padding:6px 10px;
      font-size:12px;
      line-height:1.35;
      color:#111;
      font-weight:400;
      font-family:inherit;
      cursor:pointer;
      box-shadow:0 1px 0 rgba(255,255,255,.85) inset;
      transition:border-color .15s, box-shadow .15s, background .15s;
    }
    .position-success-version-create-btn:hover{
      border-color:rgba(0,0,0,.1);
      background:rgba(255,255,255,.78);
    }
    .position-success-version-create-btn:focus-visible{
      outline:2px solid rgba(0,0,0,.35);
      outline-offset:2px;
    }
    #main-card-sort .sort-area,
    #main-success-profiles .sort-area{
      gap:16px;
      padding:12px 20px 16px;
      background:transparent;
    }
    #main-card-sort .cat-col,
    #main-success-profiles .cat-col{
      border-right:none;
      background:transparent;
      border-radius:20px;
      min-width:0;
    }
    #main-card-sort .cat-header,
    #main-success-profiles .cat-header{
      padding:12px 8px 14px;
      background:transparent;
      border-bottom:none;
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      align-items:center;
      gap:12px;
    }
    #main-card-sort .cat-header-label,
    #main-success-profiles .cat-header-label{
      font-size:12px;
      font-weight:800;
      color:#0d0d0d;
      letter-spacing:.3px;
      text-align:center;
    }
    #main-card-sort .cat-col.drag-over,
    #main-success-profiles .cat-col.drag-over{
      background:rgba(255,255,255,.14);
      box-shadow:inset 0 0 0 2px rgba(26,26,26,.2);
      border-radius:20px;
    }
    /* Kein eigener hellerer Header beim Drag: nur Spalten-Hintergrund + feine Linie (inset box-shadow). */
    #main-card-sort .cat-col.drag-over .cat-header,
    #main-success-profiles .cat-col.drag-over .cat-header{
      background:transparent;
    }
    #main-card-sort .cat-col.drag-over .cat-header-label,
    #main-success-profiles .cat-col.drag-over .cat-header-label{color:#0d0d0d;}
    #main-card-sort .cat-col.drag-over .cat-count,
    #main-success-profiles .cat-col.drag-over .cat-count{
      border-color:#1a1a1a;
      color:#1a1a1a;
      background:rgba(255,255,255,.88);
    }
    #main-card-sort .mini-stack,
    #main-success-profiles .mini-stack,
    #framework-overview-screen .mini-stack{
      background:transparent;
      padding:10px 4px 14px;
    }
    #main-success-profiles .mini-stack{
      display:flex;
      flex-direction:column;
      align-items:stretch;
    }
    #main-success-profiles .mini-stack-dimension-group{
      display:flex;
      flex-direction:column;
      align-items:stretch;
      min-width:0;
    }
    #main-success-profiles .mini-stack-dimension-group + .mini-stack-dimension-group{
      margin-top:10px;
    }
    #main-success-profiles .mini-stack-dimension-title{
      font-size:10px;
      font-weight:700;
      letter-spacing:0.12em;
      text-transform:uppercase;
      color:var(--version-history-label);
      text-align:left;
      width:100%;
      padding:0 2px 8px;
      margin:0;
      flex-shrink:0;
      box-sizing:border-box;
    }
    #main-success-profiles .mini-stack-dimension-group:first-child .mini-stack-dimension-title{
      padding-top:2px;
    }
    #main-success-profiles .mini-stack-dimension-cards{
      display:flex;
      flex-direction:column;
      align-items:stretch;
      min-width:0;
    }
    #main-card-sort .mini-card,
    #main-success-profiles .mini-card{
      background:rgba(255,255,255,.55);
      border:1px solid rgba(255,255,255,.9);
      border-radius:14px;
      box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 8px 24px rgba(0,0,0,.07);
      backdrop-filter:blur(20px) saturate(1.35);
      -webkit-backdrop-filter:blur(20px) saturate(1.35);
      transition:border-color .15s,box-shadow .15s,transform .15s,background .15s;
    }
    #main-card-sort .mini-card:hover,
    #main-success-profiles .mini-card:hover{
      border-color:rgba(0,0,0,.12);
      background:rgba(255,255,255,.72);
      box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 14px 36px rgba(0,0,0,.1);
    }
    #main-card-sort .mini-card-num,
    #main-success-profiles .mini-card-num,
    #framework-overview-screen .mini-card-num{color:#8a8a8a;}
    #main-card-sort .bottom-area{
      background:transparent;
      border-top:1px solid rgba(0,0,0,.06);
      padding:24px 24px 28px;
    }
    #main-card-sort .bottom-empty{color:#9a9a9a;}
    #main-card-sort .bottom-empty strong{color:#b0b0b0;}
    #main-card-sort .bottom-hint{color:#9a9a9a;}
    #main-card-sort .card-face{
      border-radius:20px;
      box-shadow:0 12px 44px rgba(0,0,0,.1);
    }
    #main-card-sort .card-front,
    #main-card-sort .card-back{
      background:rgba(255,255,255,.55);
      border:1px solid rgba(255,255,255,.9);
      backdrop-filter:blur(24px) saturate(1.4);
      -webkit-backdrop-filter:blur(24px) saturate(1.4);
      box-shadow:0 1px 0 rgba(255,255,255,.9) inset;
    }
    #main-card-sort .card-front-left,
    #main-card-sort .card-back-left{
      border-right:1px solid rgba(0,0,0,.06);
    }
    #main-card-sort .card-front-right,
    #main-card-sort .card-back-right{
      background:rgba(255,255,255,.38);
    }

    /* Competency framework overview (home → dimensions) */
    #framework-overview-screen.framework-overview-screen{
      position:fixed;
      inset:0;
      z-index:998;
      flex-direction:column;
      min-height:0;
      overflow:hidden;
      background:transparent;
      isolation:isolate;
    }
    #framework-overview-screen .home-header.framework-overview-header{
      justify-content:space-between;
      align-items:center;
      gap:12px;
      flex-shrink:0;
      background:transparent;
      border-bottom:none;
      box-sizing:border-box;
    }
    /* Logo + Home bleiben links/rechts; Titel optisch mittig zur Viewport-Breite (h1 position:absolute) */
    #framework-overview-screen .home-header.framework-overview-header .home-logo{
      position:relative;
      z-index:2;
      flex-shrink:0;
    }
    #framework-overview-screen .framework-overview-leadership-toggle-row{
      flex-shrink:0;
      display:flex;
      justify-content:center;
      align-items:center;
      min-height:48px;
      box-sizing:border-box;
      padding:10px 20px 12px;
      background:transparent;
    }
    #framework-overview-screen .framework-overview-page-title{
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      margin:0;
      flex:none;
      width:max-content;
      max-width:min(100% - 120px,92vw);
      box-sizing:border-box;
      font-size:clamp(11px,2.1vw,15px);
      font-weight:800;
      color:#0d0d0d;
      letter-spacing:.02em;
      line-height:1.35;
      text-align:center;
      pointer-events:none;
      z-index:1;
    }
    #framework-overview-screen .framework-overview-leadership-toggle{
      padding:6px 12px;
      border-radius:10px;
      border:1px solid rgba(59,130,246,.35);
      background:rgba(59,130,246,.12);
      color:#1e3a5f;
      font-size:11px;
      font-weight:600;
      font-family:inherit;
      line-height:1.35;
      letter-spacing:.02em;
      cursor:pointer;
      white-space:normal;
      text-align:center;
      max-width:min(92vw,320px);
      box-sizing:border-box;
    }
    #framework-overview-screen .framework-overview-leadership-toggle:hover:not(:disabled){
      background:rgba(59,130,246,.2);
      color:#172554;
      border-color:rgba(59,130,246,.48);
    }
    #framework-overview-screen .framework-overview-top-actions{
      flex-shrink:0;
      min-width:0;
      position:relative;
      z-index:2;
      display:flex;
      align-items:center;
      gap:12px;
    }
    #framework-overview-screen .framework-overview-scroll{
      flex:1;
      min-height:0;
      overflow-y:auto;
      overflow-x:hidden;
      -webkit-overflow-scrolling:touch;
      /* Verhindert horizontales Springen, wenn die vertikale Scrollbar ein-/ausblendet (Leadership-Toggle). */
      scrollbar-gutter:stable;
    }
    #framework-overview-screen .framework-overview-footer{
      flex-shrink:0;
      margin:0;
      padding:8px 16px 16px;
      text-align:center;
      font-size:10px;
      font-weight:400;
      color:rgba(0,0,0,.34);
      letter-spacing:.02em;
      line-height:1.45;
    }
    #framework-overview-screen .framework-overview-grid{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:16px;
      padding:12px 20px 36px;
      align-items:start;
      max-width:1440px;
      margin:0 auto;
      box-sizing:border-box;
    }
    #framework-overview-screen .framework-overview-col{min-width:0;border-radius:20px;background:transparent;}
    #framework-overview-screen .framework-overview-col-header{
      padding:8px 4px 12px;
      text-align:center;
      background:transparent;
      border:none;
      box-shadow:none;
    }
    #framework-overview-screen .framework-overview-dim-title{
      display:block;
      font-size:11px;
      font-weight:800;
      color:#0d0d0d;
      letter-spacing:.35px;
      line-height:1.35;
    }
    /* Eigene Mini-Karten: kein globaler Stapel (margin-bottom:-18px), Platz für Definition */
    #framework-overview-screen .mini-card.framework-overview-mini-card{
      width:100%;
      box-sizing:border-box;
      margin-bottom:14px;
      position:relative;
      padding:12px 12px 14px;
      background:rgba(255,255,255,.55);
      border:1px solid rgba(255,255,255,.9);
      border-radius:14px;
      box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 8px 24px rgba(0,0,0,.07);
      backdrop-filter:blur(20px) saturate(1.35);
      -webkit-backdrop-filter:blur(20px) saturate(1.35);
      transition:border-color .15s,box-shadow .15s,background .15s;
    }
    #framework-overview-screen .mini-card.framework-overview-mini-card:last-child{margin-bottom:0;}
    #framework-overview-screen .mini-card.framework-overview-mini-card.framework-overview-mini-card--leadership{
      background:rgba(59,130,246,.06);
      border-color:rgba(59,130,246,.2);
    }
    #framework-overview-screen .mini-card.framework-overview-mini-card.framework-overview-mini-card--leadership:hover{
      background:rgba(59,130,246,.1);
      border-color:rgba(59,130,246,.28);
    }
    #framework-overview-screen.framework-overview-leadership-hidden .framework-overview-mini-card--leadership{
      display:none !important;
    }
    /*
      Leadership-only-Spalten nicht aus dem Grid nehmen (kein display:none), sonst ändern sich
      Spuranzahl/Verteilung und die Karten springen. Spur behalten, Inhalt unsichtbar + Höhe 0.
    */
    #framework-overview-screen.framework-overview-leadership-hidden .framework-overview-col--leadership-only{
      max-height:0 !important;
      min-height:0 !important;
      overflow:hidden !important;
      visibility:hidden !important;
      pointer-events:none !important;
      padding:0 !important;
      margin:0 !important;
      border:none !important;
      border-radius:0 !important;
    }
    #framework-overview-screen .mini-card.framework-overview-mini-card:hover{
      border-color:rgba(0,0,0,.12);
      background:rgba(255,255,255,.72);
      box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 14px 36px rgba(0,0,0,.1);
      transform:none;
      z-index:1;
    }
    #framework-overview-screen .framework-overview-mini-card{cursor:pointer;}
    #framework-overview-screen .mini-card-name{
      white-space:normal;
      font-size:12px;
      font-weight:700;
      line-height:1.3;
      color:#1a1a1a;
      word-break:break-word;
    }
    #framework-overview-screen .framework-overview-card-def{
      margin-top:8px;
      font-size:10px;
      font-weight:400;
      font-style:italic;
      line-height:1.45;
      color:#5c5c5c;
      overflow:hidden;
      display:-webkit-box;
      -webkit-line-clamp:4;
      -webkit-box-orient:vertical;
      word-break:break-word;
    }
    #framework-overview-screen .framework-overview-empty{
      grid-column:1/-1;
      text-align:center;
      color:#888;
      padding:28px 16px;
      font-size:14px;
    }
    @media (max-width:1100px){
      #framework-overview-screen .framework-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    }
    @media (max-width:560px){
      #framework-overview-screen .framework-overview-grid{grid-template-columns:1fr;}
      .home-framework-btn{max-width:min(78vw,260px);font-size:9px;padding:7px 10px;}
    }

    /* OVERLAY */
    .overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:1000;align-items:center;justify-content:center;}
    .overlay.active{display:flex;}
    .compare-ai-prompt-overlay{display:none;align-items:center;justify-content:center;padding:24px;}
    .compare-ai-prompt-box{position:relative;background:#fff;border-radius:12px;padding:24px;max-width:640px;width:100%;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 8px 40px rgba(0,0,0,0.2);}
    .compare-ai-prompt-title{font-size:18px;font-weight:800;color:#1a1a1a;margin:0 0 16px;padding-right:40px;}
    .compare-ai-prompt-content{flex:1;overflow-y:auto;font-size:14px;line-height:1.6;color:#1a1a1a;margin-bottom:20px;white-space:pre-wrap;word-break:break-word;}
    .compare-ai-prompt-content p{margin:0 0 1em;}
    .compare-ai-prompt-content p:last-child{margin-bottom:0;}
    .compare-ai-prompt-content strong{font-weight:700;color:#1a1a1a;}
    .compare-ai-prompt-content ul{margin:0.5em 0 1em 1.25em;padding-left:1em;list-style:disc;}
    .compare-ai-prompt-content li{margin-bottom:0.35em;}
    .compare-ai-prompt-close-btn{
      position:absolute;top:12px;right:12px;width:32px;height:32px;display:inline-flex;
      align-items:center;justify-content:center;padding:0;margin:0;
      border:1px solid rgba(0,0,0,.12);border-radius:50%;background:#fff;color:#1a1a1a;
      font-size:20px;line-height:1;font-weight:600;cursor:pointer;
      transition:background .15s,border-color .15s;
    }
    .compare-ai-prompt-close-btn:hover{background:#f4f4f4;border-color:rgba(0,0,0,.3);}
.compare-ai-prompt-actions{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap;}
.compare-ai-prompt-actions .compare-ai-prompt-copy-btn{height:40px;padding:0 24px;margin:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;}
.compare-ai-prompt-copy-btn{width:auto;border-radius:6px;border:1.5px solid #1a1a1a;background:#fff;color:#1a1a1a;font-size:13px;font-weight:700;cursor:pointer;}
.compare-ai-prompt-copy-btn:hover{opacity:0.85;}
.experience-unsaved-overlay{display:none;align-items:center;justify-content:center;padding:24px;}
.experience-unsaved-box{background:#fff;border-radius:12px;padding:24px;max-width:520px;width:100%;box-shadow:0 8px 40px rgba(0,0,0,0.2);}
.experience-unsaved-title{font-size:18px;font-weight:800;color:#1a1a1a;margin:0 0 10px;}
.experience-unsaved-text{font-size:13px;color:#555;line-height:1.5;margin:0 0 18px;}
    .experience-unsaved-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;}
    .profile-super-tenant-export-format-actions{justify-content:center;}
    .profile-super-tenant-delete-export-actions{justify-content:center;flex-wrap:wrap;}
    .profile-super-tenant-delete-user-box .profile-super-tenant-delete-confirm-input{width:100%;max-width:100%;margin-top:10px;box-sizing:border-box;}
    .profile-super-tenant-delete-export-skip{border-color:rgba(0,0,0,.2);color:#555;}
.experience-unsaved-actions .export-btn{min-width:130px;}
.experience-type-actions{display:flex;flex-direction:column;align-items:center;}
.experience-type-actions-primary{display:flex;gap:12px;justify-content:center;align-items:center;}
.experience-type-choice-btn{width:170px;}
.experience-type-cancel-btn{margin-top:14px;min-width:130px;}
.experience-loading-overlay{display:none;align-items:center;justify-content:center;padding:24px;}
.experience-loading-box{background:#fff;border-radius:12px;padding:20px 24px;min-width:220px;text-align:center;box-shadow:0 8px 40px rgba(0,0,0,0.2);}
.experience-loading-text{font-size:14px;font-weight:700;color:#1a1a1a;}
.experience-type-badge{display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;white-space:nowrap;}
.experience-type-badge-competency{background:rgba(34,197,94,.16);color:#166534;border:1px solid rgba(22,101,52,.22);}
.experience-type-badge-skill{background:rgba(59,130,246,.16);color:#1e40af;border:1px solid rgba(30,64,175,.22);}
.profile-name-screen-item.selected .experience-type-badge{background:#fff !important;color:#111 !important;border:1px solid #111 !important;}

    /* Card overlay */
    .card-overlay-wrapper{display:flex;flex-direction:row;align-items:flex-start;gap:24px;max-width:95vw;max-height:90vh;}
    .card-overlay-wrapper .card-overlay-inner{display:flex;flex-direction:column;align-items:center;gap:14px;position:relative;}
    .card-overlay-wrapper .card-overlay-inner.with-substitutes{flex:0 1 auto;}
    .card-overlay-substitutes-panel{flex:0 0 320px;height:465px;background:#fff;border-radius:12px;padding:28px;box-shadow:0 8px 32px rgba(0,0,0,0.2);overflow-y:auto;}
    .card-overlay-substitutes-panel .card-overlay-substitutes-title{font-size:16px;font-weight:800;color:#1a1a1a;margin:0 0 16px;}
    .card-overlay-wrapper .card-overlay-inner .card-container{cursor:pointer;width:870px;height:465px;}
    .card-overlay-inner .card-title{font-size:25.5px !important;}
    .card-overlay-inner .card-def{font-size:16.5px !important;}
    .card-overlay-inner .card-num{font-size:15px !important;}
    .card-overlay-inner .card-section-title{font-size:22.5px !important;}
    .card-overlay-inner .card-bullets li{font-size:16.5px !important;}
    .card-overlay-inner .card-front-left,
    .card-overlay-inner .card-back-left,
    .card-overlay-inner .card-front-right,
    .card-overlay-inner .card-back-right{padding:30px !important;}

    .overlay-close{position:absolute;top:-44px;right:0;background:#fff;border:none;border-radius:50%;width:36px;height:36px;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px rgba(0,0,0,0.2);color:#1a1a1a;}
    .overlay-close:hover{opacity:0.7;}
    /* Prev/Next-Pfeil-Buttons im Card-Overlay; nur sichtbar im
       Framework-Overview-Modus (display über JS gesteuert). Größe, Hinter-
       grund, Border, Backdrop-Filter, Schatten und Hover-Verhalten identisch
       zur effektiven .overlay-close-Regel im #cardOverlay-Scope (Glass-Effekt
       — halbtransparentes Weiß plus Blur, im Hover wird das Weiß opaker statt
       die Opacity zu reduzieren). Pfeil-Icons sind SVG-Chevrons, damit sie
       symmetrisch in der Mitte sitzen. */
    #cardOverlay .card-overlay-nav{
      position:fixed;top:50%;transform:translateY(-50%);
      width:36px;height:36px;border-radius:50%;
      background:rgba(255,255,255,.72);
      border:1px solid rgba(255,255,255,.95);
      backdrop-filter:blur(16px) saturate(1.35);
      -webkit-backdrop-filter:blur(16px) saturate(1.35);
      box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 8px 28px rgba(0,0,0,.12);
      color:#1a1a1a;
      cursor:pointer;z-index:5;padding:0;
      display:flex;align-items:center;justify-content:center;
      transition:background .15s;
    }
    #cardOverlay .card-overlay-nav:hover{background:rgba(255,255,255,.92);}
    #cardOverlay .card-overlay-nav-prev{left:24px;}
    #cardOverlay .card-overlay-nav-next{right:24px;}
    #cardOverlay .card-overlay-nav-icon{display:block;}
    .overlay-hint{font-size:10px;color:#ccc;letter-spacing:0.5px;}

    .overlay-assign-row{display:flex;gap:10px;}
    .overlay-assign-row button{padding:9px 22px;border-radius:6px;border:1.5px solid #fff;background:transparent;color:#fff;font-size:12px;font-weight:700;cursor:pointer;letter-spacing:0.5px;transition:all 0.15s;}
    .overlay-assign-row button:hover{background:#fff;color:#1a1a1a;}

    /* Nur #cardOverlay: warmer Ton wie body, aber stärker durchscheinend + Blur = klar Overlay, Hintergrund unscharf sichtbar */
    #cardOverlay.overlay{
      background:rgba(218,204,184,.30);
      backdrop-filter:blur(20px) saturate(1.18);
      -webkit-backdrop-filter:blur(20px) saturate(1.18);
    }
    #cardOverlay .overlay-close{
      top:-48px;
      background:rgba(255,255,255,.72);
      border:1px solid rgba(255,255,255,.95);
      backdrop-filter:blur(16px) saturate(1.35);
      -webkit-backdrop-filter:blur(16px) saturate(1.35);
      box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 8px 28px rgba(0,0,0,.12);
    }
    #cardOverlay .overlay-close:hover{
      opacity:1;
      background:rgba(255,255,255,.92);
    }
    #cardOverlay .card-container .card-face{
      border-radius:20px;
      box-shadow:0 14px 48px rgba(0,0,0,.11);
    }
    #cardOverlay .card-container .card-front,
    #cardOverlay .card-container .card-back{
      background:rgba(255,255,255,.55);
      border:1px solid rgba(255,255,255,.9);
      backdrop-filter:blur(24px) saturate(1.4);
      -webkit-backdrop-filter:blur(24px) saturate(1.4);
      box-shadow:0 1px 0 rgba(255,255,255,.9) inset;
    }
    #cardOverlay .card-container .card-front-left,
    #cardOverlay .card-container .card-back-left{
      border-right:1px solid rgba(0,0,0,.06);
    }
    #cardOverlay .card-container .card-front-right,
    #cardOverlay .card-container .card-back-right{
      background:rgba(255,255,255,.38);
    }
    #cardOverlay .overlay-hint{
      color:#8a8a8a;
      font-size:11px;
    }
    #cardOverlay .overlay-assign-row{
      flex-wrap:wrap;
      justify-content:center;
    }
    #cardOverlay .overlay-assign-row button.overlay-assign-btn{
      border:1px solid rgba(0,0,0,.1);
      background:rgba(255,255,255,.72);
      color:#1a1a1a;
      border-radius:10px;
      backdrop-filter:blur(12px) saturate(1.2);
      -webkit-backdrop-filter:blur(12px) saturate(1.2);
      box-shadow:0 1px 0 rgba(255,255,255,.85) inset;
    }
    #cardOverlay .overlay-assign-row button.overlay-assign-btn:hover{
      background:rgba(255,255,255,.95);
      border-color:rgba(0,0,0,.16);
      color:#1a1a1a;
    }
    #cardOverlay .overlay-assign-row button.overlay-assign-btn.overlay-assign-btn--active{
      background:rgba(26,26,26,.9);
      color:#fff;
      border-color:rgba(26,26,26,.95);
      box-shadow:none;
    }
    #cardOverlay .overlay-assign-row button.overlay-assign-btn.overlay-assign-btn--active:hover{
      background:rgba(26,26,26,.96);
      color:#fff;
      border-color:#1a1a1a;
    }
    #cardOverlay .overlay-assign-readonly{
      font-size:12px;
      color:#707070;
      margin:0;
      text-align:center;
      width:100%;
    }
    #cardOverlay .card-overlay-substitutes-panel{
      background:rgba(255,255,255,.55);
      border:1px solid rgba(255,255,255,.9);
      border-radius:20px;
      backdrop-filter:blur(24px) saturate(1.4);
      -webkit-backdrop-filter:blur(24px) saturate(1.4);
      box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 36px rgba(0,0,0,.08);
    }
    #cardOverlay .card-overlay-substitutes-panel .card-overlay-substitutes-title{
      color:#0d0d0d;
    }
    .bottom-zoom-btn{width:32px;height:32px;border-radius:6px;border:none;background:transparent;cursor:pointer;padding:4px;opacity:1;transition:opacity 0.15s;flex-shrink:0;color:#bbb;}
    .bottom-zoom-btn:hover{color:#888;}
    .bottom-zoom-btn svg{width:100%;height:100%;display:block;}

    .variant-btn{width:100%;min-height:56px;padding:0 20px;border-radius:8px;border:1.5px solid #e0e0e0;background:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;transition:border-color 0.15s,box-shadow 0.15s;text-align:left;}
    .variant-btn:hover{border-color:#1a1a1a;box-shadow:0 2px 12px rgba(0,0,0,0.08);}
    .variant-title{font-size:14px;font-weight:800;color:#1a1a1a;line-height:1;}
    .variant-sub{font-size:11px;color:#999;font-weight:400;line-height:1;}
    .variant-sub:empty{display:none;}

    /* HOME */
    .home-screen{position:fixed;inset:0;background:transparent;z-index:998;display:flex;flex-direction:column;overflow:hidden;}
    .home-screen-top{background:transparent;border-bottom:none;flex-shrink:0;}
    .home-screen-top .home-inner{padding-top:0;padding-left:24px;padding-right:24px;}
    .home-screen-bottom{flex:1;overflow-y:auto;display:flex;justify-content:center;}
    .home-screen-bottom .home-inner{padding:0 24px 48px;}
    .home-inner{width:100%;max-width:520px;margin:0 auto;}
    .home-header{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:28px 40px 0;}
    .home-logo{
      display:flex;align-items:center;gap:3.5px;
      cursor:pointer;
      user-select:none;
      border-radius:6px;
    }
    .home-logo:focus{outline:none;}
    .home-logo:focus-visible{outline:2px solid #3d3d3d;outline-offset:3px;}
    /* Header-Logo: viewBox ist tight auf die Tinte (Pure 161.244×30.906 bzw. Union 174.514×34.215).
       Höhe so, dass „growth" font-size 24px erreicht (Pure: 24*30.906/34, Union: 24*34.215/37.64 — beide ≈ 21.82px).
       margin-left = Sidebearing des „K"-Glyphen in Helvetica Neue Bold (xMin=69 / upem=1000) bei
       Headline-font-size 36px: 69/1000*36 = 2.484px — schiebt die U-Tinte (bzw. p-Tinte) genau auf die
       linke K-Tinten-Kante der „Know yourself."-Headline darunter. */
    .home-logo-login-svg{
      display:none;
      flex:0 0 auto;
      width:auto;
      height:calc(24px * 30.906 / 34);
      margin-left:calc(36px * 69 / 1000);
    }
    html[data-app-edition="puregrowth"] .home-logo-login-svg--puregrowth,
    html:not([data-app-edition]) .home-logo-login-svg--puregrowth{display:block;}
    html[data-app-edition="union"] .home-logo-login-svg--union{display:block;}
    /* Pure: ~0.27px weniger margin-left — Sub-Pixel-Snap zwischen -0.25 (rechts) und -0.3 (links).
       Falls -0.27 immer noch links zeigt, ist das Limit erreicht und wir müssen die SVG-Datei
       selbst auf Pixel-Boundary anpassen (z.B. inneres translate des p-Markers von 72 auf 72.5)
       statt mit CSS-margin-left zu kalibrieren. */
    .home-logo-login-svg--puregrowth{margin-left:calc(36px * 69 / 1000 - 0.27px);}
    /* Y-Konsistenz zwischen Home / Profile-History / Framework-Overview: in den letzten beiden
       Screens ist das größte rechts-seitige Header-Element 40px (Home-Icon-Btn bzw. Back/Logout-Btn),
       auf Home aber nur 38px (Avatar). align-items:center setzt das Logo entsprechend 1px tiefer dort.
       transform:translateY (statt margin-top) weil margin in flex-centering nur halb wirkt — die
       margin-box wird zentriert, also kompensiert sich ein Teil des negativen margins durch
       Re-Centering. Mit transform gibt es einen sauberen 1:1 Paint-Shift ohne Flex-Recompute. */
    #profile-history-screen .home-logo-login-svg,
    #framework-overview-screen .home-logo-login-svg{transform:translateY(-1px);}
    .home-header-right{display:flex;align-items:center;gap:12px;}
    .home-header-label{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#8f8f8f;}
    .home-framework-btn{
      margin:0;padding:8px 12px;max-width:min(46vw,260px);text-align:right;
      font-size:10px;font-weight:700;line-height:1.35;letter-spacing:.02em;color:#3d3d3d;
      background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.9);border-radius:12px;
      backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
      box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 6px 20px rgba(0,0,0,.06);
      cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;
    }
    .home-framework-btn:hover{border-color:rgba(0,0,0,.12);background:rgba(255,255,255,.78);box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 10px 28px rgba(0,0,0,.09);}
    .framework-edition-title--union{display:inline;}
    .framework-edition-title--pure{display:none !important;}
    html[data-app-edition="puregrowth"] .framework-edition-title--union{display:none !important;}
    html[data-app-edition="puregrowth"] .framework-edition-title--pure{display:inline !important;}
    .home-avatar{width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.07);border:1px solid rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:#666;cursor:pointer;}
    .home-lang-chip{padding:6px 12px;font-size:12px;font-weight:600;border-radius:999px;border:1px solid rgba(0,0,0,.12);background:rgba(255,255,255,.9);color:#444;cursor:pointer;}
    .home-lang-chip:hover{border-color:rgba(0,0,0,.2);color:#111;}
    .home-lang-chip-active{background:#1a1a1a;color:#fff;border-color:#1a1a1a;}
    .profile-history-header-actions{flex-wrap:wrap;justify-content:flex-end;gap:12px;align-items:center;}
    .profile-history-header-nav-btns{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
    .profile-history-library-lang{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0;}
    .profile-history-lang-segment{
      display:inline-flex;align-items:stretch;box-sizing:border-box;height:38px;
      border:1px solid rgba(0,0,0,.12);border-radius:8px;overflow:hidden;
      background:rgba(255,255,255,.9);transform:translateY(-3px);
    }
    .profile-history-lang-seg-btn{
      display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
      min-width:40px;padding:0 14px;height:100%;min-height:0;font-size:12px;font-weight:700;border:none;background:transparent;
      color:#555;cursor:pointer;transition:background .12s ease,color .12s ease;line-height:1;
    }
    .profile-history-lang-seg-btn:hover{background:rgba(0,0,0,.05);color:#111;}
    .profile-history-lang-seg-btn.profile-history-lang-seg-active{background:#1a1a1a;color:#fff;}
    .profile-history-lang-seg-btn.profile-history-lang-seg-active:hover{background:#2a2a2a;color:#fff;}
    .profile-history-super-tenants-wrap{margin-bottom:20px;}
    .profile-history-personio-sync-wrap{margin-bottom:20px;padding-bottom:16px;}
    .profile-history-tenant-hint{font-size:12px;color:#777;line-height:1.5;margin:0 0 12px;}
    .profile-super-tenant-create-row{flex-wrap:wrap;gap:8px;}
    .profile-super-tenant-card{border:1px solid rgba(0,0,0,.1);border-radius:12px;padding:14px 16px;margin-bottom:14px;background:rgba(255,255,255,.5);}
    .profile-super-tenant-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:4px;}
    .profile-super-tenant-head-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end;}
    .profile-super-tenant-card-footer{display:flex;justify-content:flex-end;margin-top:14px;}
    .profile-super-tenant-del{background:#fee2e2 !important;color:#991b1b !important;border:1px solid rgba(248,113,113,.4) !important;}
    .profile-super-tenant-del:hover:not(:disabled){opacity:1 !important;background:#fecaca !important;color:#7f1d1d !important;border-color:rgba(239,68,68,.45) !important;}
    .profile-history-admin-add-btn.profile-super-tenant-edit{background:rgba(59,130,246,.12) !important;color:#1e3a5f !important;border:1px solid rgba(59,130,246,.35) !important;border-radius:10px !important;font-weight:600 !important;}
    .profile-history-admin-add-btn.profile-super-tenant-edit:hover:not(:disabled){opacity:1 !important;background:rgba(59,130,246,.2) !important;color:#172554 !important;border-color:rgba(59,130,246,.48) !important;}
    .profile-super-tenant-slug{color:#999;font-size:12px;}
    .profile-super-tenant-sub{margin-top:10px;}
    .profile-super-tenant-invites-wrap{margin-top:4px;}
    .profile-super-tenant-invite-badge{font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.4px;}
    .profile-super-tenant-invite-badge-pending{background:rgba(245,158,11,.18);color:#92400e;border:1px solid rgba(217,119,6,.35);}
    .profile-super-tenant-invite-badge-accepted{background:rgba(34,197,94,.16);color:#166534;border:1px solid rgba(22,101,52,.22);}
    .profile-super-tenant-edit-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 12px;margin-bottom:12px;background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.35);border-radius:10px;font-size:14px;}
    .profile-super-tenant-edit-banner-text{font-weight:600;color:#1e3a5f;}
    .profile-super-tenant-edit-banner-main{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;flex:1 1 auto;}
    .profile-super-tenant-edit-banner-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
    .profile-super-tenant-edit-rename-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;}
    input.profile-super-tenant-edit-rename-input{min-width:220px;max-width:340px;}
    .home-hero{position:relative;z-index:10;padding:40px 40px 0;}
    /* width:fit-content schrumpft den Headline-Block auf seine Textbreite (statt
       voller Spaltenbreite). Visuell identisch zur vorherigen Darstellung, weil der
       Text eh links-bündig war — aber der Block ist jetzt textgenau und der
       Shimmer-Gradient (background-clip:text) trifft auch tatsächlich den Text. */
    .home-hero-headline{font-size:36px;font-weight:800;color:#0d0d0d;letter-spacing:-.5px;line-height:1.12;margin-bottom:18px;width:fit-content;max-width:100%;}
    .home-main{position:relative;z-index:10;padding:30px 40px 40px;display:grid;grid-template-columns:repeat(3,minmax(0,460px));gap:16px;justify-content:center;align-items:start;}
    .home-card{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.9);border-radius:20px;padding:26px 24px 22px;backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 36px rgba(0,0,0,.07);transition:transform .22s ease,box-shadow .22s ease;cursor:default;}
    #home-screen .home-card{min-height:461px;}
    .home-card:hover{transform:scale(1.01);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 18px 50px rgba(0,0,0,.1);}
    .home-card-title{font-size:24px;font-weight:800;color:#0d0d0d;letter-spacing:-.3px;margin-bottom:44px;}
    .home-card-desc{font-size:12px;color:#767676;line-height:1.5;margin-bottom:20px;}
    .home-module-list{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;}
    .home-module-btn{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;min-height:58px;background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.85);border-radius:12px;cursor:pointer;backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 2px 8px rgba(0,0,0,.04);transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .14s ease;text-decoration:none;box-sizing:border-box;}
    .home-module-btn:hover{background:rgba(255,255,255,.7);border-color:rgba(255,255,255,1);box-shadow:0 1px 0 rgba(255,255,255,1) inset,0 8px 20px rgba(0,0,0,.08);transform:translateY(-1px);}

    /* Home-Kategorie-Hover: JS setzt eine Klasse cat-active-{kategorie} auf
       .home-main (mit 120ms Hysterese um Flicker beim Modul-Wechsel zu
       vermeiden — siehe home-category-hover.js). Diese Regeln tönen dann alle
       Module deren data-cats die aktive Kategorie enthält. Farben sind subtil
       (Petrol/Lavendel/Bernstein/Indigo/Plum) und vermeiden Grün (positiv) und
       Rot (negativ), damit es nicht mit den Stärken/Schwächen-Skalen anderer
       Module verwechselt wird. */
    .home-main.cat-active-competencies .home-module-btn[data-cats~="competencies"]{
      background:rgba(204,148,60,.18);border-color:rgba(204,148,60,.6);
    }
    .home-main.cat-active-competencies .home-module-btn[data-cats~="competencies"]:hover{
      background:rgba(204,148,60,.3);border-color:rgba(204,148,60,.78);
    }
    .home-main.cat-active-skills .home-module-btn[data-cats~="skills"]{
      background:rgba(125,100,195,.16);border-color:rgba(125,100,195,.6);
    }
    .home-main.cat-active-skills .home-module-btn[data-cats~="skills"]:hover{
      background:rgba(125,100,195,.26);border-color:rgba(125,100,195,.75);
    }
    .home-main.cat-active-tasks .home-module-btn[data-cats~="tasks"]{
      background:rgba(46,138,178,.16);border-color:rgba(46,138,178,.6);
    }
    .home-main.cat-active-tasks .home-module-btn[data-cats~="tasks"]:hover{
      background:rgba(46,138,178,.26);border-color:rgba(46,138,178,.75);
    }
    .home-main.cat-active-ai-readiness .home-module-btn[data-cats~="ai-readiness"]{
      background:rgba(85,105,195,.16);border-color:rgba(85,105,195,.6);
    }
    .home-main.cat-active-ai-readiness .home-module-btn[data-cats~="ai-readiness"]:hover{
      background:rgba(85,105,195,.26);border-color:rgba(85,105,195,.75);
    }
    .home-main.cat-active-capabilities .home-module-btn[data-cats~="capabilities"]{
      background:rgba(170,95,155,.16);border-color:rgba(170,95,155,.6);
    }
    .home-main.cat-active-capabilities .home-module-btn[data-cats~="capabilities"]:hover{
      background:rgba(170,95,155,.26);border-color:rgba(170,95,155,.75);
    }
    /* Italic-Kategorie-Wort in der Hero-Headline. Die Schrift bleibt die gleiche
       Sans-Serif wie der umliegende Headline-Text — nur font-style:italic +
       Kategoriefarbe. Der Punkt am Ende kommt als reiner Text-Node außerhalb des
       <em>, bleibt also automatisch nicht-italic. */
    .home-hero-cat{font-style:italic;font-weight:inherit;}
    .home-hero-cat-competencies{color:#a5751f;}
    .home-hero-cat-skills{color:#6a52a8;}
    .home-hero-cat-tasks{color:#1d6a8a;}
    .home-hero-cat-ai-readiness{color:#4858a8;}
    .home-hero-cat-capabilities{color:#8d4a82;}
    /* Unsichtbares Hover-Rechteck, das home-category-hover.js dynamisch über das
       Textfeld "your AI readiness." (breiteste Variante der Headline-Zeile) legt.
       Position und Größe werden per JS gesetzt, hier nur die Grundregel. */
    .home-hero-hitbox{position:absolute;cursor:default;background:transparent;}
    /* Shimmer-Effekt auf der Headline im Default-Zustand ("Know yourself. Grow
       deliberately."). Ein heller diagonaler Streifen wandert von links nach rechts
       über beide Zeilen — der Sweep selbst dauert ca. 1.2s, der Rest des Cycles
       ist still. home-category-hover.js hängt die Klasse home-hero-idle initial
       an und entfernt sie sobald eine Kategorie aktiv ist — bei Modul-Hover oder
       Headline-Hitbox-Hover. animation-delay: 13s sorgt dafür, dass beim Anhängen
       der Klasse (= App-Boot wenn Home sichtbar wird, oder Modul-mouseleave +
       120ms-Hysterese) erstmal 13s nichts passiert und der erste Sweep nach dieser
       Wartezeit kommt. Danach wiederholt sich der Sweep alle 27s (animation-
       duration = 27s). Sweep liegt bei 0-4.5% des Cycles (= 1.215s bei 27s), damit
       der Streifen visuell die gleiche Geschwindigkeit hat wie zuvor mit kürzerem
       Cycle bei 9% Keyframe. Technik: linear-gradient + background-clip:text, so
       dass der Gradient genau auf den Glyphen sichtbar wird und background-
       position animierbar ist. */
    @keyframes home-hero-shimmer {
      0%    { background-position: 100% 0; }
      4.5%  { background-position: 0% 0; }
      100%  { background-position: 0% 0; }
    }
    .home-hero-headline.home-hero-idle{
      background-image:linear-gradient(110deg,
        #0d0d0d 0%,
        #0d0d0d 42%,
        rgba(220,220,220,0.95) 50%,
        #0d0d0d 58%,
        #0d0d0d 100%);
      background-size:300% 100%;
      background-position:0% 0;
      background-repeat:no-repeat;
      -webkit-background-clip:text;
      background-clip:text;
      -webkit-text-fill-color:transparent;
      color:transparent;
      animation:home-hero-shimmer 27s linear 13s infinite;
    }
    @media (prefers-reduced-motion: reduce){
      .home-hero-headline.home-hero-idle{animation:none;background-image:none;-webkit-text-fill-color:currentColor;color:#0d0d0d;}
    }
    .home-module-btn-left{display:flex;align-items:center;gap:10px;min-width:0;}
    .home-module-btn-icon{width:24px;height:24px;border-radius:7px;background:#1a1a1a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;flex-shrink:0;}
    .home-module-btn-text{display:flex;flex-direction:column;gap:2px;}
    .home-module-btn-label{font-size:13px;font-weight:700;color:#1a1a1a;white-space:nowrap;}
    .home-module-btn-sub{font-size:11px;color:#777;}
    .home-module-btn-arrow{font-size:14px;color:#ccc;transition:transform .15s,color .15s;flex-shrink:0;}
    .home-divider{height:1px;background:rgba(0,0,0,.06);margin:14px 0;}
    .home-saved-label{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#9a9a9a;margin-bottom:8px;}
    .home-saved-list{display:flex;flex-direction:column;gap:4px;}
    .home-saved-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.68);border:1px solid rgba(0,0,0,.07);cursor:pointer;transition:background .15s,border-color .15s,transform .12s ease;}
    .home-saved-item:hover{background:rgba(255,255,255,.95);border-color:rgba(0,0,0,.14);transform:scale(1.01);}
    .home-saved-item-name{font-size:12px;color:#666;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .home-saved-item-date{font-size:11px;color:#9a9a9a;flex-shrink:0;}
    .home-saved-empty{font-size:12px;color:#8d8d8d;padding:6px 10px;}
    /* Deckender Shell-Hintergrund: .home-screen ist transparent; ohne das würde bei gleichem z-index wie #home-screen die Startseite durchscheinen. */
    #profile-history-screen{background:#f0ede8;isolation:isolate;}
    .profile-history-main{align-content:start;align-items:start;}
    #profile-history-screen .home-main.profile-history-main{padding-top:49px;}
    #profile-history-screen .home-header.profile-history-header{
      background:transparent;
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
      border-bottom:none;
      padding:28px 40px 16px;
      align-items:center;
    }
    #profile-history-screen .profile-history-back-btn,
    #profile-history-screen .profile-history-logout-btn{
      height:40px;
      min-width:40px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:0 10px;
      transform:translateY(-3px);
    }
    /* Logout-Glyphe wirkt im ViewBox optisch leicht nach oben; nur hier nach unten schieben */
    #profile-history-screen .profile-history-logout-btn .btn-nav-icon-svg{
      transform:translateY(2px);
    }
    .profile-history-card{min-height:420px;display:flex;flex-direction:column;padding:26px 24px 22px;}
    .profile-history-module-list{margin:0;gap:10px;}
    .profile-history-card .home-card-title{margin-bottom:24px;}
    .profile-history-module-list .home-saved-label{margin-top:24px;margin-bottom:12px;}
    .profile-history-module-list .home-saved-label:first-child{margin-top:0;}
    .profile-history-module-list .home-saved-list{margin-bottom:22px;}
    .profile-history-module-list .home-saved-list:last-child{margin-bottom:0;}
    .profile-history-admin-card{min-height:0;}
    .profile-history-admin-card:hover{transform:none;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 36px rgba(0,0,0,.07);}
    .profile-history-admin-card .home-card-title{margin-bottom:24px;}
    .profile-history-admin-input-row{display:flex;gap:10px;align-items:center;margin-bottom:12px;}
    .profile-history-admin-all-user-entry-buttons{display:flex;flex-wrap:wrap;align-items:stretch;}
    .profile-history-admin-all-user-entry-buttons .profile-history-admin-add-btn{width:auto;}
    /* Admin „All user entries" als Segmented-Toggle im Stil des Interview-Guide-Hub-
       Toggles — kein margin-right (das ist nur für die Compare-Top-Bar relevant). */
    .profile-history-admin-all-toggle{margin-right:0;margin-bottom:12px;}
    .profile-history-admin-input{margin:0;flex:1;min-width:0;}
    /* External self-assessments: gleiche Typo wie „New position title“ (facet-add-input) */
    .profile-history-external-assessment-add-row .start-input.profile-history-admin-input{
      padding:6px 10px;
      font-size:12px;
      line-height:1.35;
      font-weight:500;
    }
    .profile-history-external-assessment-add-row .start-input.profile-history-admin-input::placeholder{
      color:#9a9a9a;
      font-weight:400;
    }
    /* Generate-code-Button auf gleiche Höhe wie die Inputs daneben: gleiche
       vertikale Padding/Font/Line-Height wie die start-input-Override darüber.
       Transparente 1px-Border kompensiert den 2px-Höhenunterschied gegen den
       Input (der eine 1px-Border hat); ohne diese Border wäre der Btn 2px kürzer. */
    .profile-history-external-assessment-add-row .start-btn.profile-history-admin-add-btn{
      padding:6px 14px;
      font-size:12px;
      line-height:1.35;
      font-weight:600;
      border:1px solid transparent;
    }
    .profile-history-admin-add-btn{width:auto;padding:10px 18px;margin:0;white-space:nowrap;}
    /* Pure Super-Admin „Edit tenant“: Abstand über „External self-assessments“ zum Block darüber (User sync / Directory) */
    html[data-app-edition="puregrowth"] #profile-history-external-self-assessment-wrap{margin-top:32px;}
    .profile-history-home-modules-wrap{margin-top:18px;padding-top:14px;}
    .profile-history-home-modules-wrap > .profile-history-admin-add-btn{margin-top:4px;margin-bottom:28px;}
    .profile-history-home-mod-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 16px;margin-bottom:14px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.5);border:1px solid rgba(0,0,0,.06);}
    .profile-history-home-mod-row-title{font-weight:600;font-size:13px;min-width:140px;padding-top:2px;}
    .profile-history-home-mod-row-opts{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;}
    .profile-history-home-mod-cb-label{font-size:12px;color:#444;display:inline-flex;align-items:center;gap:6px;cursor:pointer;}
    .profile-history-home-mod-cb{margin:0;accent-color:#1a1a1a;}
    .profile-history-admin-email-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.68);border:1px solid rgba(0,0,0,.07);}
    .profile-history-admin-value-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.68);border:1px solid rgba(0,0,0,.07);}
    .profile-super-tenant-invite-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;}
    .profile-history-admin-value-row-action{width:100%;text-align:left;cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;}
    .profile-history-admin-value-row-action:hover{transform:scale(1.01);border-color:rgba(0,0,0,.18);box-shadow:0 7px 16px rgba(0,0,0,.10);}
    .profile-history-admin-badge{margin-left:auto;font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap;}
    /* Sync-Status-Badges (Personio sync / App profile) bekommen feste Mindest-
       breite damit die drei Varianten visuell gleich breit sind — auch wenn
       sich der Text in der Länge unterscheidet, hat die Pille dasselbe
       Gesamtmaß und das Spalten-Layout der User-Zeilen läuft sauber. */
    .profile-history-admin-badge-sync-status{
      display:inline-flex;align-items:center;justify-content:center;
      min-width:90px;text-align:center;box-sizing:border-box;
    }
    .profile-history-admin-badge-ok{background:rgba(34,197,94,.16);color:#166534;border:1px solid rgba(22,101,52,.22);}
    .profile-history-admin-badge-personio-absent{background:rgba(248,113,113,.22);color:#991b1b;border:1px solid rgba(185,28,28,.35);cursor:help;}
    .profile-history-admin-badge-missing{background:rgba(245,158,11,.16);color:#92400e;border:1px solid rgba(146,64,14,.22);}
    .profile-history-admin-badge-info{background:rgba(59,130,246,.14);color:#1e3a8a;border:1px solid rgba(30,58,138,.2);}
    .profile-history-admin-badge-leadership{background:rgba(191,219,254,.55);color:#1d4ed8;border:1px solid rgba(96,165,250,.55);}
    .profile-history-admin-email{font-size:12px;color:#666;font-weight:500;word-break:break-all;}
    .profile-history-admin-user-sync-email{font-size:11px;color:#8a8a8a;min-width:220px;word-break:break-all;display:flex;flex-direction:column;align-items:flex-start;gap:2px;}
    .profile-history-admin-user-sync-supervisor{font-size:10px;color:#6b6b6b;word-break:break-all;}
    .profile-history-admin-user-sync-supervisor--placeholder{color:#9a9a9a;font-style:italic;}
    .profile-history-admin-user-sync-row{display:grid;grid-template-columns:180px 260px 1fr auto;align-items:center;justify-items:start;column-gap:10px;text-align:left;}
    .profile-history-admin-user-sync-badges{display:flex;align-items:center;justify-content:flex-end;justify-self:end;gap:8px;min-width:0;}
    .profile-history-admin-user-sync-row .profile-history-admin-badge{margin-left:0;}
    .profile-history-admin-user-sync-actions{display:flex;align-items:center;gap:8px;justify-self:end;flex-wrap:wrap;justify-content:flex-end;}
    .profile-history-pure-user-profile-row{
      grid-template-columns:minmax(140px,200px) minmax(160px,1fr) auto;
      align-items:center;
    }
    .profile-history-pure-user-profile-col-identity{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;}
    .profile-history-pure-user-profile-col-identity .profile-history-admin-user-sync-email{min-width:0;}
    .profile-history-pure-user-profile-meta{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;align-content:center;gap:4px 14px;min-width:0;}
    .profile-history-pure-user-profile-trailing{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:8px;
      flex-wrap:wrap;
      justify-self:end;
      align-self:center;
    }
    .profile-history-pure-user-profile-trailing-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
    .profile-history-pure-user-profile-trailing-tasks{display:flex;align-items:center;gap:8px;flex-shrink:0;}
    .profile-history-pure-user-edit-box{max-width:440px;width:92%;box-sizing:border-box;}
    .profile-history-pure-user-edit-email{font-size:13px;color:#555;margin:0 0 14px;word-break:break-all;line-height:1.4;}
    .profile-history-pure-user-edit-fields{display:flex;flex-direction:column;gap:12px;margin-bottom:18px;}
    .profile-history-pure-user-edit-label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:#333;}
    .profile-history-pure-user-edit-label > span:first-child{font-size:11px;font-weight:700;color:#666;}
    select.profile-history-pure-user-edit-select{width:100%;max-width:100%;box-sizing:border-box;}
    .profile-history-inactive-users{margin-top:14px;width:100%;max-width:100%;box-sizing:border-box;}
    .profile-history-inactive-users-summary{cursor:pointer;font-size:13px;font-weight:700;color:#555;list-style:none;padding:8px 0;user-select:none;}
    .profile-history-inactive-users-summary::-webkit-details-marker{display:none;}
    .profile-history-inactive-users-summary::marker{display:none;content:'';}
    .profile-history-inactive-users[open] .profile-history-inactive-users-summary{color:#1a1a1a;}
    .profile-history-inactive-users-inner{display:flex;flex-direction:column;gap:0;padding-top:0;border-top:none;}
    #profile-history-admin-email-list .profile-history-admin-additional-empty{margin-bottom:20px;}
    .profile-history-admin-ai-risk-toggle-row{margin-top:22px;}
    .profile-history-admin-all-entry-row{justify-content:space-between;align-items:flex-start;gap:12px;}
    .profile-history-admin-all-entry-row--clickable{cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;}
    .profile-history-admin-all-entry-row--clickable:hover{transform:scale(1.005);border-color:rgba(0,0,0,.18);box-shadow:0 6px 14px rgba(0,0,0,.09);}
    .profile-history-admin-all-entry-row--clickable:focus-visible{outline:2px solid rgba(0,0,0,.35);outline-offset:2px;}
    .profile-history-admin-all-entry-main{min-width:0;flex:1;}
    .profile-history-admin-all-entry-title{font-size:12px;font-weight:700;color:#2a2a2a;line-height:1.35;word-break:break-word;}
    .profile-history-admin-all-entry-sub{font-size:11px;color:#8a8a8a;line-height:1.3;margin-top:3px;word-break:break-word;}
    .profile-history-admin-all-entry-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:230px;}
    .profile-history-admin-all-entry-email{font-size:11px;color:#666;word-break:break-all;text-align:right;}
    .profile-history-admin-all-entry-updated{font-size:10px;color:#9a9a9a;white-space:nowrap;text-align:right;}
    .profile-history-admin-all-entry-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0;}
    .profile-history-admin-all-entry-actions{display:flex;align-items:center;justify-content:flex-end;}
    .profile-history-admin-all-entries-section-label{font-size:12px;font-weight:700;color:#555;margin:14px 0 6px;}
    .profile-history-admin-all-entries-section-label:first-child{margin-top:0;}
    .profile-history-admin-remove-btn{padding:6px 12px;border-radius:8px;border:1px solid rgba(0,0,0,.12);background:#fff;color:#1a1a1a;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;}
    .profile-history-external-invite-row .profile-history-external-view-btn{background:#1a1a1a;color:#fff;border-color:#1a1a1a;}
    .profile-history-external-invite-row .profile-history-external-view-btn:hover:not(:disabled){opacity:0.88;background:#1a1a1a;color:#fff;border-color:#1a1a1a;}
    .profile-pure-dir-user-row{min-width:0;}
    .profile-pure-dir-user-line{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:10px;width:100%;min-width:0;}
    .profile-pure-dir-user-identity{display:flex;align-items:center;gap:8px;min-width:0;flex:0 1 auto;max-width:min(260px,28vw);}
    .profile-pure-dir-user-identity .profile-history-admin-email{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%;}
    .profile-pure-dir-user-controls{display:flex;align-items:center;justify-content:flex-end;flex-wrap:nowrap;gap:6px;flex:1 1 auto;min-width:0;margin-left:auto;overflow-x:auto;-webkit-overflow-scrolling:touch;}
    select.profile-pure-dir-select{margin:0;width:138px;max-width:138px;min-width:118px;flex:0 0 auto;padding:6px 8px;font-size:11px;line-height:1.3;border-radius:8px;border:1px solid rgba(0,0,0,.1);background:rgba(255,255,255,.85);box-sizing:border-box;font-family:inherit;color:#1a1a1a;}
    select.profile-pure-dir-select:focus{outline:none;border-color:rgba(0,0,0,.22);}
    .profile-pure-dir-save-btn{padding:6px 12px;border-radius:8px;border:1px solid rgba(0,0,0,.12);background:#fff;color:#1a1a1a;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;flex:0 0 auto;flex-shrink:0;font-family:inherit;margin:0;}
    .profile-pure-dir-save-btn:hover{background:rgba(0,0,0,.04);}
    .profile-dept-sup-label{font-size:10px;font-weight:700;color:#888;margin-left:4px;text-transform:uppercase;letter-spacing:.04em;}
    select.profile-dept-sup-select{margin-left:2px;max-width:220px;padding:6px 10px;font-size:12px;border-radius:8px;border:1px solid rgba(0,0,0,.1);background:rgba(255,255,255,.85);}
    .profile-history-admin-facet-row{flex-wrap:wrap;align-items:center;}
    .profile-history-admin-facet-rename-row{display:none;flex:1 1 100%;align-items:center;gap:8px;margin-top:6px;}
    .profile-history-admin-facet-rename-input{flex:1 1 auto;min-width:140px;max-width:100%;margin:0;padding:6px 10px;font-size:12px;line-height:1.35;border-radius:8px;border:1px solid rgba(0,0,0,.18);background:#fff;color:#2a2a2a;font-weight:500;font-family:inherit;box-sizing:border-box;}
    .profile-history-admin-facet-rename-input:focus{outline:none;border-color:rgba(0,0,0,.32);}
    .profile-history-admin-facet-row--editing .profile-history-admin-email,
    .profile-history-admin-facet-row--editing .profile-history-admin-badge,
    .profile-history-admin-facet-row--editing .profile-history-catalog-rename,
    .profile-history-admin-facet-row--editing .profile-history-catalog-rm,
    .profile-history-admin-facet-row--editing .profile-dept-sup-label,
    .profile-history-admin-facet-row--editing .profile-dept-sup-select{display:none !important;}
    .profile-history-admin-facet-row--editing .profile-history-admin-facet-rename-row{display:flex !important;}
    .profile-history-admin-facets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start;}
    .profile-history-admin-facet .home-saved-label{margin-top:0;}
    .profile-history-admin-facet .home-saved-list{margin-bottom:0;max-height:none;overflow:visible;}
    .profile-history-admin-facet-column{display:flex;flex-direction:column;gap:8px;min-width:0;}
    .profile-history-admin-facet-add-row{display:flex;flex-direction:row;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.68);border:1px solid rgba(0,0,0,.07);box-sizing:border-box;}
    .profile-history-admin-facet-add-row .profile-history-admin-facet-add-input{flex:1;min-width:0;margin:0;padding:6px 10px;font-size:12px;line-height:1.35;border-radius:8px;border:1px solid rgba(0,0,0,.12);background:#fff;color:#2a2a2a;font-weight:500;font-family:inherit;box-sizing:border-box;}
    .profile-history-admin-facet-add-row .profile-history-admin-facet-add-input::placeholder{color:#9a9a9a;font-weight:400;}
    .profile-history-admin-facet-add-row .profile-history-admin-facet-add-input:focus{outline:none;border-color:rgba(0,0,0,.22);}
    .profile-history-admin-facet-add-row .profile-history-admin-facet-add-btn{padding:6px 12px;border-radius:8px;border:1px solid rgba(0,0,0,.12);background:#fff;color:#1a1a1a;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0;font-family:inherit;}
    .profile-history-admin-facet-add-row .profile-history-admin-facet-add-btn:hover{background:rgba(0,0,0,.04);}
    /* Union: Subcompanies / Departments / Positions nur über Personio-Sync, nicht manuell anlegen */
    html[data-app-edition="union"] #profile-history-admin-subcompany-add-row,
    html[data-app-edition="union"] #profile-history-admin-department-add-row,
    html[data-app-edition="union"] #profile-history-admin-position-add-row{display:none !important;}
    .profile-history-admin-positions-block{margin-top:18px;width:100%;max-width:100%;box-sizing:border-box;}
    .profile-history-admin-positions-block .home-saved-label{margin-top:0;}
    .profile-history-admin-positions-list{margin-bottom:8px;}
    .profile-history-admin-position-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.68);border:1px solid rgba(0,0,0,.07);margin-bottom:8px;}
    .profile-history-admin-position-row:last-child{margin-bottom:0;}
    .profile-history-admin-position-name{font-size:12px;color:#444;font-weight:600;line-height:1.3;min-width:0;word-break:break-word;}
    .profile-history-admin-position-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
    .profile-history-position-not-assigned-label{display:inline-flex;align-items:center;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700;color:#b91c1c;background:rgba(220,38,38,.1);border:1px solid rgba(185,28,28,.35);white-space:nowrap;}
    .profile-history-admin-remove-btn.profile-history-position-profile-btn--exists{
      background:rgba(34,197,94,.16);
      color:#166534;
      border:1px solid rgba(22,101,52,.22);
    }
    .profile-history-admin-remove-btn.profile-history-position-profile-btn--missing{
      background:rgba(245,158,11,.16);
      color:#92400e;
      border:1px solid rgba(146,64,14,.22);
    }
    .profile-history-admin-remove-btn.profile-history-position-profile-btn--exists:hover{
      background:rgba(34,197,94,.24);
      border-color:rgba(22,101,52,.35);
    }
    .profile-history-admin-remove-btn.profile-history-position-profile-btn--missing:hover{
      background:rgba(245,158,11,.24);
      border-color:rgba(146,64,14,.35);
    }
    .profile-history-admin-remove-btn.profile-history-position-profile-btn--stale{
      background:rgba(250,204,21,.22);
      color:#92400e;
      border:1px solid rgba(146,64,14,.28);
    }
    .profile-history-admin-remove-btn.profile-history-position-profile-btn--stale:hover{
      background:rgba(250,204,21,.34);
      border-color:rgba(146,64,14,.4);
    }
    .profile-history-admin-risk-edit{display:flex;align-items:center;gap:6px;padding:4px 6px;border:1px solid rgba(0,0,0,.08);border-radius:8px;background:rgba(255,255,255,.8);}
    .profile-history-admin-risk-label{font-size:10px;font-weight:700;color:#666;letter-spacing:.2px;white-space:nowrap;}
    .profile-history-admin-risk-input{width:60px;padding:5px 6px;border:1px solid rgba(0,0,0,.14);border-radius:6px;background:#fff;font-size:11px;color:#222;}
    .profile-history-admin-risk-input:focus{outline:none;border-color:rgba(0,0,0,.28);}
    .profile-history-ai-risk-warning{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:help;outline:none;}
    .profile-history-ai-risk-warning-icon{
      position:relative;
      width:20px;
      height:18px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }
    .profile-history-ai-risk-warning-icon::before{
      content:'';
      position:absolute;
      inset:0;
      background-repeat:no-repeat;
      background-position:center;
      background-size:contain;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M10 1.5L18.5 16.5H1.5L10 1.5Z' fill='%23ef444429' stroke='%23b91c1c66' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    .profile-history-ai-risk-warning-mark{
      position:absolute;
      left:50%;
      top:11px;
      transform:translate(-50%,-50%);
      font-size:10px;
      line-height:1;
      font-weight:800;
      color:#991b1b;
    }
    .profile-history-ai-risk-warning-tooltip{
      position:absolute;
      right:0;
      bottom:calc(100% + 8px);
      min-width:240px;
      max-width:320px;
      padding:8px 10px;
      border-radius:8px;
      background:rgba(26,26,26,.95);
      color:#fff;
      font-size:11px;
      line-height:1.35;
      white-space:normal;
      box-shadow:0 8px 20px rgba(0,0,0,.25);
      opacity:0;
      visibility:hidden;
      transform:translateY(4px);
      transition:opacity .15s ease,transform .15s ease,visibility .15s ease;
      z-index:20;
      pointer-events:none;
    }
    .profile-history-ai-risk-warning:hover .profile-history-ai-risk-warning-tooltip,
    .profile-history-ai-risk-warning:focus .profile-history-ai-risk-warning-tooltip{
      opacity:1;
      visibility:visible;
      transform:translateY(0);
    }
    .profile-history-ai-risk-row{display:grid;grid-template-columns:minmax(180px,1fr) minmax(200px,2fr) 60px;gap:10px;align-items:center;padding:8px 10px;border:1px solid rgba(0,0,0,.07);border-radius:9px;background:rgba(255,255,255,.68);margin-bottom:8px;}
    .profile-history-ai-risk-row:last-child{margin-bottom:0;}
    .profile-history-ai-risk-name{font-size:12px;font-weight:600;color:#333;word-break:break-word;}
    .profile-history-ai-risk-bar-wrap{height:10px;border-radius:999px;background:rgba(15,23,42,.10);overflow:hidden;}
    .profile-history-ai-risk-bar{height:100%;background:linear-gradient(90deg,#22c55e 0%,#f59e0b 55%,#ef4444 100%);}
    .profile-history-ai-risk-value{font-size:11px;font-weight:700;color:#444;text-align:right;}
    .skill-profile-box{min-width:860px;max-width:1080px;align-items:stretch;}
    .skill-profile-module-wrap{display:flex;flex-direction:column;align-items:stretch;min-width:860px;max-width:1080px;width:100%;}
    .skill-profile-module-title{font-size:22px;font-weight:800;color:#1a1a1a;letter-spacing:normal;margin:0 0 8px 0;text-align:center;}
    .skill-profile-module-subtitle{font-size:13px;color:#666;margin:0 0 20px 0;text-align:center;}
    /* Skill-Profile-Titel + Untertitel sollen optisch zu Success Profile passen,
       auch wenn sie in einer .start-box stehen (deren generische h2/p-Defaults
       sonst font-size überschreiben würden). */
    .skill-profile-box .card-sort-profile-title{
      font-size:22px;
      font-weight:800;
      color:#1a1a1a;
      letter-spacing:normal;
      margin-bottom:8px;
      text-align:center;
      align-self:center;
    }
    .skill-profile-box .card-sort-profile-subtitle{
      font-size:13px;
      color:#666;
      margin-bottom:20px;
      text-align:center;
      align-self:center;
    }
    .skill-profile-sections{display:flex;flex-direction:column;gap:14px;margin-bottom:14px;}
    .skill-profile-section{border:1px solid rgba(0,0,0,.09);border-radius:10px;background:rgba(255,255,255,.75);padding:10px;}
    .skill-profile-section-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
    .skill-profile-section-title{font-size:12px;font-weight:700;color:#444;flex:1;min-width:0;}
    .skill-profile-section--user{padding:14px 14px 12px;}
    .skill-profile-section--user > .skill-profile-section-head{margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid rgba(0,0,0,.08);}
    .skill-profile-section--user > .skill-profile-section-head > .skill-profile-section-title{font-size:16px;font-weight:800;color:#1a1a1a;letter-spacing:.1px;}
    .skill-profile-admin-section-name{font-size:15px;font-weight:700;color:#1a1a1a;}
    .skill-profile-skill-name{font-size:13px;font-weight:400;color:#333;min-width:0;word-break:break-word;}
    .skill-profile-rating-label{font-size:11px;font-weight:700;color:#666;letter-spacing:.4px;}
    .skill-profile-rating-boxes{display:inline-flex;gap:6px;}
    .skill-profile-rating-box{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #d6d6d6;border-radius:6px;background:#fff;color:#222;font-size:13px;font-weight:700;cursor:pointer;padding:0;line-height:1;transition:background .12s ease,color .12s ease,border-color .12s ease;}
    .skill-profile-rating-box:hover{background:#f1f1f1;}
    .skill-profile-rating-box.selected{background:#1a1a1a;color:#fff;border-color:#1a1a1a;}
    .skill-profile-rating-box.selected:hover{background:#1a1a1a;}
    .skill-profile-save-btn{width:auto;padding:7px 16px;font-size:12px;border-radius:8px;}
    .skill-profile-skill-row{display:grid;grid-template-columns:1fr 120px auto;gap:8px;align-items:center;margin-bottom:8px;}
    .skill-profile-section--user .skill-profile-skill-row{grid-template-columns:1fr auto;gap:14px;margin-bottom:14px;}
    .skill-profile-history-inline{display:none;justify-content:flex-end;align-items:center;width:170px;}
    .skill-profile-history-inline .skill-profile-history-sparkline{width:160px;height:32px;}
    .skill-profile-sections.skill-profile-history-mode .skill-profile-rating-boxes{display:none;}
    .skill-profile-sections.skill-profile-history-mode .skill-profile-history-inline{display:flex;}
    .skill-profile-skill-row:last-child{margin-bottom:0;}
    .skill-profile-rating-input{width:100%;padding:8px;border:1px solid #d8d8d8;border-radius:8px;font-size:12px;background:#fff;}
    .task-profile-view-section-title{font-size:12px;font-weight:800;color:#303030;margin-bottom:6px;}
    .task-profile-view-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;}
    .task-profile-view-item{font-size:12px;color:#3b3b3b;line-height:1.35;}
    .task-redesign-row{display:grid;grid-template-columns:minmax(0,1fr) 210px auto;gap:8px;align-items:center;margin-bottom:8px;}
    .task-redesign-row:last-child{margin-bottom:0;}
    .task-redesign-task-name{font-size:12px;font-weight:600;color:#333;min-width:0;word-break:break-word;}
    .task-redesign-select{max-width:210px;}
    .task-redesign-label-wrap{display:flex;justify-content:flex-start;}
    .task-redesign-label{display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;border-radius:999px;border:1px solid transparent;font-size:11px;font-weight:700;min-width:94px;}
    .task-redesign-label-empty{color:#64748b;background:rgba(148,163,184,.14);border-color:rgba(100,116,139,.22);}
    .task-redesign-label-eliminate{color:#991b1b;background:rgba(239,68,68,.14);border-color:rgba(153,27,27,.26);}
    .task-redesign-label-automate{color:#166534;background:rgba(34,197,94,.15);border-color:rgba(22,101,52,.24);}
    .task-redesign-label-augment{color:#1d4ed8;background:rgba(96,165,250,.2);border-color:rgba(29,78,216,.26);}
    .task-redesign-label-elevate{color:#6d28d9;background:rgba(168,85,247,.16);border-color:rgba(109,40,217,.24);}
    .task-redesign-label-emerge{color:#9a3412;background:rgba(249,115,22,.16);border-color:rgba(154,52,18,.24);}
    .task-redesign-label-btn{appearance:none;cursor:pointer;font-family:inherit;line-height:1;}
    .task-redesign-label-btn:hover{filter:brightness(.97);}
    .task-redesign-label-btn.is-selected{box-shadow:0 0 0 2px rgba(0,0,0,.65);}
    .task-redesign-label-overlay{padding:24px;}
    .task-redesign-label-overlay-box{background:#fff;border-radius:14px;padding:32px 28px 24px;max-width:1240px;width:100%;box-shadow:0 8px 30px rgba(0,0,0,.18);display:flex;flex-direction:column;gap:48px;align-items:stretch;max-height:calc(100vh - 48px);overflow-y:auto;}
    .task-redesign-label-overlay-task-name{font-size:18px;font-weight:800;color:#1a1a1a;text-align:center;margin:0;}
    .task-redesign-label-overlay-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:stretch;}
    .task-redesign-label-overlay-actions{display:flex;justify-content:center;gap:10px;}
    /* Task Redesign Cards — Replacement für die alten Pill-Buttons im Overlay.
       Pro Kategorie eine Karte mit Icon, Titel, farbigem Untertitel ("Time on task → 0" etc.),
       Beschreibung und ein-/ausklappbarem Example-Block. Klick auf die Karte selektiert die
       Kategorie und schließt das Overlay; Klick auf "Show example" toggelt nur den Beispiel-Block
       (Event-Bubbling wird via stopPropagation unterdrückt, damit der Toggle nicht selektiert).
       Farben pro Kategorie matchen die existierenden Pill-Farben (#991b1b / #166534 / #1d4ed8 /
       #6d28d9 / #9a3412) — Hintergrund der Karte ist ein helleres Tint, der Icon-Container
       ein mittleres Tint, Titel/Untertitel/Toggle nutzen die volle Akzentfarbe. */
    .task-redesign-card{
      position:relative;border-radius:16px;border:1.5px solid transparent;padding:18px 18px 14px;
      display:flex;flex-direction:column;gap:10px;cursor:pointer;text-align:left;
      transition:transform .12s ease, box-shadow .12s ease;
      background:#fff;
    }
    .task-redesign-card:hover{transform:translateY(-1px);}
    .task-redesign-card.is-selected{box-shadow:0 0 0 2px rgba(0,0,0,.65);}
    .task-redesign-card:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(0,0,0,.45);}
    .task-redesign-card-icon{
      width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
    }
    .task-redesign-card-icon svg{width:20px;height:20px;}
    .task-redesign-card-title{font-size:17px;font-weight:700;line-height:1.2;}
    .task-redesign-card-subtitle{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;line-height:1.3;}
    .task-redesign-card-subtitle svg{width:14px;height:14px;flex-shrink:0;}
    .task-redesign-card-description{font-size:12px;font-weight:400;color:#2b2b2b;line-height:1.5;min-height:108px;}
    /* Example-Box: dieselbe Hue wie die Karte aber merklich heller. Erreicht durch eine
       halbtransparente weiße Schicht über dem (bereits leicht getönten) Karten-Hintergrund —
       das blendet White über den Tint und ergibt für jede Kategorie automatisch einen
       "selbe Farbe, heller"-Effekt mit nur einer Regel. */
    .task-redesign-card-example{
      background:rgba(255,255,255,.55);border-radius:10px;padding:10px 12px;font-size:12px;
      font-weight:400;color:#2b2b2b;line-height:1.5;
    }
    .task-redesign-card-example strong{font-weight:700;color:#1a1a1a;}
    .task-redesign-card-example ul{margin:4px 0 0;padding-left:16px;}
    .task-redesign-card-example li{margin-bottom:4px;}
    .task-redesign-card-example li:last-child{margin-bottom:0;}
    /* Color variants — match existing pill colors */
    .task-redesign-card-eliminate{background:rgba(239,68,68,.07);border-color:rgba(153,27,27,.20);}
    .task-redesign-card-eliminate .task-redesign-card-icon{background:rgba(239,68,68,.16);color:#991b1b;}
    .task-redesign-card-eliminate .task-redesign-card-title,
    .task-redesign-card-eliminate .task-redesign-card-subtitle,
    .task-redesign-card-eliminate .task-redesign-card-example-toggle{color:#991b1b;}
    .task-redesign-card-automate{background:rgba(34,197,94,.07);border-color:rgba(22,101,52,.20);}
    .task-redesign-card-automate .task-redesign-card-icon{background:rgba(34,197,94,.18);color:#166534;}
    .task-redesign-card-automate .task-redesign-card-title,
    .task-redesign-card-automate .task-redesign-card-subtitle,
    .task-redesign-card-automate .task-redesign-card-example-toggle{color:#166534;}
    .task-redesign-card-augment{background:rgba(96,165,250,.10);border-color:rgba(29,78,216,.20);}
    .task-redesign-card-augment .task-redesign-card-icon{background:rgba(96,165,250,.22);color:#1d4ed8;}
    .task-redesign-card-augment .task-redesign-card-title,
    .task-redesign-card-augment .task-redesign-card-subtitle,
    .task-redesign-card-augment .task-redesign-card-example-toggle{color:#1d4ed8;}
    .task-redesign-card-elevate{background:rgba(168,85,247,.08);border-color:rgba(109,40,217,.20);}
    .task-redesign-card-elevate .task-redesign-card-icon{background:rgba(168,85,247,.18);color:#6d28d9;}
    .task-redesign-card-elevate .task-redesign-card-title,
    .task-redesign-card-elevate .task-redesign-card-subtitle,
    .task-redesign-card-elevate .task-redesign-card-example-toggle{color:#6d28d9;}
    .task-redesign-card-emerge{background:rgba(249,115,22,.08);border-color:rgba(154,52,18,.20);}
    .task-redesign-card-emerge .task-redesign-card-icon{background:rgba(249,115,22,.18);color:#9a3412;}
    .task-redesign-card-emerge .task-redesign-card-title,
    .task-redesign-card-emerge .task-redesign-card-subtitle,
    .task-redesign-card-emerge .task-redesign-card-example-toggle{color:#9a3412;}
    @media (max-width: 1100px){.task-redesign-label-overlay-options{grid-template-columns:repeat(3,minmax(0,1fr));}}
    @media (max-width: 720px){.task-redesign-label-overlay-options{grid-template-columns:repeat(2,minmax(0,1fr));} .task-redesign-card-description{min-height:0;}}
    @media (max-width: 480px){.task-redesign-label-overlay-options{grid-template-columns:1fr;}}
    /* Task Redesign – Split-View (analog zur Task-Profile-Twopane).
       Doppelte Klassen-Spezifität überschreibt .skill-profile-module-wrap (max-width:1080px),
       sodass der Twopane-Container die volle Module-Body-Breite nutzen kann. */
    .task-redesign-module-wrap.task-redesign-module-wrap{max-width:none;min-width:0;width:100%;}
    .task-redesign-twopane{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start;width:100%;min-width:0;}
    .task-redesign-twopane.is-single{grid-template-columns:minmax(0,1fr);}
    .task-redesign-pane{min-width:0;display:flex;flex-direction:column;gap:24px;}
    .task-redesign-pane-box{width:100%;min-width:0;box-sizing:border-box;}
    /* Buckets-Stack: 5 Buckets gestapelt mit min-height damit alle "von Anfang an gleich gross"
       sind, auch wenn noch keine Tasks zugeordnet wurden. Wachsen natürlich mit ihren Inhalten. */
    .task-redesign-buckets{display:flex;flex-direction:column;gap:12px;}
    .task-redesign-bucket{
      border-radius:16px;border:1.5px solid transparent;padding:16px 18px 18px;
      display:flex;flex-direction:column;gap:12px;min-height:180px;
    }
    .task-redesign-bucket-header{display:flex;align-items:center;gap:12px;}
    .task-redesign-bucket-icon{width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
    .task-redesign-bucket-icon svg{width:20px;height:20px;}
    .task-redesign-bucket-title{font-size:17px;font-weight:700;line-height:1.2;}
    .task-redesign-bucket-body{display:flex;flex-direction:column;gap:6px;}
    .task-redesign-bucket-task{
      display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;
      background:rgba(255,255,255,.55);cursor:pointer;
    }
    .task-redesign-bucket-task:hover{background:rgba(255,255,255,.85);}
    .task-redesign-bucket-task-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
    .task-redesign-bucket-task-name{font-size:13px;font-weight:600;color:#1a1a1a;line-height:1.35;word-break:break-word;}
    .task-redesign-bucket-task-section{font-size:11px;font-weight:400;color:#6b7280;line-height:1.3;}
    .task-redesign-bucket-task-remove{
      appearance:none;border:none;background:transparent;color:#6b7280;padding:4px;border-radius:6px;
      cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
      font-family:inherit;line-height:1;
    }
    .task-redesign-bucket-task-remove:hover{background:rgba(0,0,0,.06);color:#1a1a1a;}
    .task-redesign-bucket-task-remove svg{width:14px;height:14px;}
    /* Pencil-Icon im Elevate-Bucket Task-Entry: "nur das Symbol ohne Button drum herum" —
       transparenter Hintergrund auch im Hover (kein Box), nur Color-Wechsel auf Hover. */
    .task-redesign-bucket-task-edit{
      display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
      color:#6b7280;flex-shrink:0;padding:4px;line-height:1;
    }
    .task-redesign-bucket-task-edit:hover{color:#1a1a1a;}
    .task-redesign-bucket-task-edit-icon{width:14px;height:14px;display:block;}
    /* Inline-Edit-Input: ersetzt temporär den Task-Namen während des Bearbeitens. */
    .task-redesign-bucket-task-edit-input{
      appearance:none;border:1px solid rgba(0,0,0,.18);border-radius:6px;padding:4px 6px;
      font-size:13px;font-weight:600;color:#1a1a1a;background:#fff;font-family:inherit;
      width:100%;box-sizing:border-box;line-height:1.35;
    }
    .task-redesign-bucket-task-edit-input:focus{outline:none;border-color:rgba(0,0,0,.5);}
    /* Task-Redesign Row-Actions: Container für Label-Pill + Grip-Handle nebeneinander auf der
       rechten Seite jeder Task-Zeile. Das umliegende .skill-profile-skill-row ist ein grid mit
       1fr auto Spalten — die Actions stecken in der auto-Spalte und nutzen flex für die interne
       horizontale Anordnung. */
    .task-redesign-row-actions{display:flex;align-items:center;gap:10px;}
    /* Drag-and-Drop: tasks auf der linken Seite per Grip-Handle in die rechten Buckets ziehen.
       Der Cursor wird während des Drags auf grabbing umgestellt; das Bucket unter dem Cursor
       bekommt einen dunklen Outline-Ring (.is-drop-target) zur Sichtbarmachung des Drop-Targets. */
    body.task-redesign-dragging{cursor:grabbing;user-select:none;}
    body.task-redesign-dragging *{cursor:grabbing !important;}
    .task-redesign-bucket.is-drop-target{box-shadow:0 0 0 2px rgba(0,0,0,.65);}
    /* "Add newly emerging task"-Zeile im Emerge-Bucket. Optisch wie eine Task-Karte (gleicher
       Hintergrund-Tint und Padding) aber statt Task-Name + Section + × ein Plus-Icon in einem
       Kreis links und der Hinweistext rechts daneben. */
    .task-redesign-bucket-add{
      display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
      background:rgba(255,255,255,.55);cursor:pointer;min-height:50px;box-sizing:border-box;
    }
    .task-redesign-bucket-add:hover{background:rgba(255,255,255,.85);}
    .task-redesign-bucket-add-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit;}
    .task-redesign-bucket-add-icon svg{width:18px;height:18px;}
    .task-redesign-bucket-add-label{font-size:13px;font-weight:400;line-height:1.35;color:inherit;}
    /* Add-newly-emerging-task overlay — schmal und kompakt mit Task-Name-Input,
       Kategorie-Dropdown (inkl. "+ Add new category..."-Sentinel) und optionalem Inline-Input für
       eine neue Kategorie. */
    .task-redesign-emerge-add-overlay{padding:24px;}
    .task-redesign-emerge-add-overlay-box{
      background:#fff;border-radius:14px;padding:28px 28px 24px;max-width:480px;width:100%;
      box-shadow:0 8px 30px rgba(0,0,0,.18);display:flex;flex-direction:column;gap:24px;align-items:stretch;
    }
    .task-redesign-emerge-add-title{font-size:18px;font-weight:800;color:#1a1a1a;text-align:center;margin:0;}
    .task-redesign-emerge-add-fields{display:flex;flex-direction:column;gap:10px;}
    .task-redesign-emerge-add-label{font-size:12px;font-weight:700;color:#555;margin-top:6px;}
    .task-redesign-emerge-add-label:first-child{margin-top:0;}
    .task-redesign-emerge-add-input,
    .task-redesign-emerge-add-select{
      appearance:none;border:1px solid rgba(0,0,0,.18);border-radius:8px;padding:8px 10px;
      font-family:inherit;font-size:13px;color:#1a1a1a;background:#fff;width:100%;box-sizing:border-box;
    }
    .task-redesign-emerge-add-input:focus,
    .task-redesign-emerge-add-select:focus{outline:none;border-color:rgba(0,0,0,.5);}
    .task-redesign-emerge-add-actions{display:flex;justify-content:center;gap:10px;}
    /* Stack panes vertically on narrow viewports — left-pane (tasks) bleibt oben, buckets darunter. */
    @media (max-width: 1100px){
      .task-redesign-twopane{grid-template-columns:minmax(0,1fr);}
    }
    /* Task Profile – Inline-Add/Edit-Pattern (position-scoped, kein globaler Edit-Modus) */
    #task-profile-add-category-wrap{margin-top:12px;display:flex;flex-direction:column;gap:8px;}
    /* Add- und Save-Buttons im Task-Profile-Editor: gleiche Grösse wie die Cancel-Buttons
       (.export-btn = padding:7px 16px font-size:12px font-weight:600). Cancel-Buttons sind die
       visuelle Referenz für Action-Buttons im Inline-Edit-Pattern. Doppelte Klassen-Spezifität
       überschreibt .start-btn (padding:11px font-size:13px) und .profile-history-admin-add-btn
       (padding:10px 18px) ohne !important. Background/Color bleiben dunkel (Primär-Action). */
    .task-profile-add-category-btn.task-profile-add-category-btn,
    .task-profile-add-task-btn.task-profile-add-task-btn,
    .task-profile-inline-save-btn.task-profile-inline-save-btn{
      padding:7px 16px;font-size:12px;font-weight:600;border-radius:8px;white-space:nowrap;
      /* Cancel (.export-btn) hat 1px sichtbaren Border — hier 1px transparent damit Box-Sizing
         identisch ist und alle Buttons dieselbe rendere Höhe (~30px) bekommen. */
      border:1px solid transparent;
    }
    .task-profile-add-category-btn,.task-profile-add-task-btn{align-self:flex-start;}
    .task-profile-add-category-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
    .task-profile-edit-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:6px 0;}
    .task-profile-edit-input{flex:1;min-width:200px;padding:6px 10px;border:1px solid rgba(0,0,0,.18);border-radius:6px;font-size:12px;color:#1a1a1a;background:#fff;}
    .task-profile-edit-input:focus{outline:none;border-color:rgba(0,0,0,.36);}
    .task-profile-row-actions{display:inline-flex;gap:6px;align-items:center;margin-left:auto;}
    /* Icon-only Buttons: gleicher Look für Edit und Delete (Delete nicht mehr rot — User-Wunsch). */
    .task-profile-row-edit-btn,.task-profile-row-delete-btn{
      appearance:none;border:1px solid rgba(0,0,0,.12);background:#fff;color:#444;
      padding:4px 6px;border-radius:6px;cursor:pointer;font-family:inherit;
      display:inline-flex;align-items:center;justify-content:center;line-height:1;
    }
    .task-profile-row-edit-btn:hover,.task-profile-row-delete-btn:hover{background:rgba(0,0,0,.04);}
    .task-profile-row-icon{width:14px;height:14px;display:block;}
    .task-profile-my-team-wrap{margin-top:24px;}
    .task-profile-my-team-wrap .success-profile-position-my-label{margin-top:0;}
    .task-profile-my-team-wrap .success-profile-position-my-list{width:33.333%;}
    /* Aktuell angewählter Team-Eintrag: gleicher schwarzer Look wie .selected an anderen Stellen. */
    .profile-name-screen-item.is-current{background:#1a1a1a;color:#fff;border-color:#1a1a1a;}
    .profile-name-screen-item.is-current:hover,
    .profile-name-screen-item.is-current:active{background:#1a1a1a;color:#fff;border-color:#1a1a1a;}

    /* Task-Profile zweigeteilt: Skill Profile (links) + Task Profile (rechts) mit
       Drag-Connections über einem SVG-Overlay. CSS-Grid mit zwei gleich grossen
       Spalten und einem zentralen Gap — Bildschirmmitte dient als Trennlinie und
       der Gap-Bereich nimmt die diagonalen Verbindungslinien auf. minmax(0,1fr)
       erzwingt dass die Spalten unabhängig von Inhalts-Intrinsic-Width genau
       gleich gross bleiben — sonst können Boxen mit längeren Texten die andere
       Spalte überlappen. Wrap ohne max-width damit der zweispaltige Bereich die
       volle Module-Body-Breite (Viewport minus Padding) ausnutzen kann; doppelte
       Klassen-Spezifität überschreibt .skill-profile-module-wrap (max-width:1080px). */
    .task-profile-module-wrap.task-profile-module-wrap{max-width:none;min-width:0;width:100%;}
    .task-profile-toggle-bar{display:flex;justify-content:center;align-items:center;gap:10px;margin:0 0 16px;}
    .task-profile-toggle-text{font-size:12px;color:#555;font-weight:600;letter-spacing:.2px;}
    .task-profile-twopane{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:start;width:100%;min-width:0;}
    .task-profile-pane{min-width:0;}
    .task-profile-pane-box{width:100%;min-width:0;box-sizing:border-box;}
    .task-profile-pane-title{font-size:13px;font-weight:800;color:#1a1a1a;margin-bottom:12px;letter-spacing:.2px;}
    /* Skill-Profile-Pane: read-only, etwas dezenter */
    .task-profile-pane-skills .skill-profile-section-head{margin-bottom:6px;}
    .task-profile-pane-skills .skill-profile-skill-row{padding:6px 0;}
    /* Dots für Drag-Connections */
    .task-link-dot{
      position:relative;flex:0 0 12px;width:12px;height:12px;border-radius:50%;
      background:#fff;border:2px solid #1a1a1a;cursor:grab;
      transition:transform .12s ease, background .12s ease, border-color .12s ease;
      pointer-events:auto;
    }
    .task-link-dot:hover{transform:scale(1.25);}
    .task-link-dot.is-connected{background:#1a1a1a;}
    .task-link-dot.is-drop-target{transform:scale(1.45);background:#22c55e;border-color:#15803d;box-shadow:0 0 0 4px rgba(34,197,94,.22);}
    .task-link-dot.is-dragging{cursor:grabbing;}
    /* Skill-Dot rechts, Task-Dot links. Layout der Rows entsprechend angepasst. */
    .task-profile-pane-skills .skill-profile-skill-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
    .task-profile-pane-skills .skill-profile-skill-row .task-link-dot{margin-left:auto;}
    .task-profile-pane-tasks .skill-profile-skill-row{display:flex;align-items:center;gap:10px;}
    .task-profile-pane-tasks .skill-profile-skill-row > .task-link-dot{order:-1;}
    /* SVG-Overlay über beiden Spalten — Linien zeichnen, Maus-Events durchlassen
       (Dots haben pointer-events:auto im SVG-Bereich; Linien je nach Modus). */
    .task-profile-links-svg{
      position:absolute;inset:0;width:100%;height:100%;
      pointer-events:none;overflow:visible;
    }
    .task-link-line{
      stroke:#1a1a1a;stroke-width:2;fill:none;pointer-events:stroke;
      transition:opacity .15s ease;
    }
    .task-link-line.is-temp{stroke-dasharray:4 4;opacity:.7;}
    /* Show-Connections-Toggle aus: feste Linien werden unsichtbar, ausser sie
       sind via Hover-Highlight aktiv. Temp-Linie (während Drag) bleibt sichtbar. */
    .task-profile-twopane.connections-hidden .task-link-line:not(.is-hover-active):not(.is-temp){
      opacity:0;
    }
    .task-link-line.is-hover-active{opacity:1;stroke-width:2.5;}

    /* Grip-Handle für Drag-Reorder (Tasks und Kategorien). Bewusst OHNE Button-
       Optik (kein Border, kein Background, kein Padding-Box) — nur das Icon mit
       Grab-Cursor. User-Wunsch: 'einfach nur das icon'. */
    .task-profile-grip-handle{
      appearance:none;border:none;background:transparent;color:#444;
      padding:0;margin:0;cursor:grab;font-family:inherit;
      display:inline-flex;align-items:center;justify-content:center;line-height:1;
      touch-action:none;
    }
    .task-profile-grip-handle:hover{color:#1a1a1a;}
    .task-profile-grip-handle:active{cursor:grabbing;}
    body.task-profile-reordering{cursor:grabbing;user-select:none;}
    body.task-profile-reordering *{cursor:grabbing !important;}
    /* Drop-Indikator: dünne schwarze Linie absolut positioniert im Pane-Container. */
    .task-profile-drop-indicator{
      position:absolute;height:2px;background:#1a1a1a;border-radius:2px;
      pointer-events:none;z-index:5;box-shadow:0 0 0 2px rgba(26,26,26,.18);
    }
    .task-profile-empty-cat-zone{padding:14px 12px;border:1px dashed rgba(0,0,0,.12);border-radius:8px;}
    .skill-profile-history-item{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-bottom:1px solid rgba(0,0,0,.06);}
    .skill-profile-history-item:last-child{border-bottom:none;}
    .skill-profile-history-visual{display:flex;flex-direction:column;gap:10px;}
    .skill-profile-history-overview{border:1px solid rgba(0,0,0,.09);border-radius:10px;background:rgba(255,255,255,.82);padding:10px;}
    .skill-profile-history-overview-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
    .skill-profile-history-overview-title{font-size:12px;font-weight:700;color:#333;}
    .skill-profile-history-overview-meta{font-size:11px;color:#666;}
    .skill-profile-history-overview-chart{border:1px solid rgba(0,0,0,.08);border-radius:8px;background:rgba(255,255,255,.9);padding:4px;}
    .skill-profile-history-overview-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;font-size:11px;color:#666;}
    .skill-profile-history-overview-current{font-weight:700;color:#0f766e;}
    .skill-profile-history-sparkline{width:100%;height:36px;display:block;}
    .skill-profile-history-skill-list{display:flex;flex-direction:column;gap:8px;}
    .skill-profile-history-skill-row{display:grid;grid-template-columns:minmax(180px,1fr) minmax(150px,2fr) auto;align-items:center;gap:10px;padding:8px 10px;border:1px solid rgba(0,0,0,.07);border-radius:10px;background:rgba(255,255,255,.72);}
    .skill-profile-history-skill-name{font-size:12px;font-weight:700;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .skill-profile-history-skill-meta{display:flex;align-items:center;gap:8px;font-size:11px;}
    .skill-profile-history-latest{font-weight:700;color:#444;}
    .skill-profile-history-delta{font-weight:700;padding:2px 7px;border-radius:999px;border:1px solid transparent;}
    .skill-profile-history-delta-up{color:#166534;background:rgba(34,197,94,.15);border-color:rgba(22,101,52,.22);}
    .skill-profile-history-delta-down{color:#b91c1c;background:rgba(239,68,68,.14);border-color:rgba(185,28,28,.22);}
    .skill-profile-history-delta-flat{color:#475569;background:rgba(100,116,139,.14);border-color:rgba(71,85,105,.22);}
    #skill-radar-screen.start-screen,
    #skill-profile-screen.start-screen,
    #skill-profile-admin-screen.start-screen,
    #job-design-admin-screen.start-screen,
    #my-job-screen.start-screen,
    #growth-job-doability-screen.start-screen,
    #task-profile-screen.start-screen,
    #task-redesign-screen.start-screen,
    #implications-screen.start-screen,
    #capability-profile-screen.start-screen,
    #capability-profile-editor-screen.start-screen{flex-direction:column;align-items:stretch;justify-content:flex-start;padding:0;}
    /* Capability profile editor — Top-Bar ohne weißen Glass-Hintergrund, aber mit feiner Trennlinie (wie Success Profile) */
    #capability-profile-editor-screen > .top-bar{
      background:transparent;
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
      border-bottom:1px solid rgba(0,0,0,.07);
    }
    .my-job-body{flex:1;min-height:0;display:flex;align-items:flex-start;justify-content:center;padding:24px;overflow:auto;width:100%;box-sizing:border-box;}
    .my-job-box{width:100%;max-width:960px;display:flex;flex-direction:column;gap:20px;}
    .my-job-module-wrap{width:100%;max-width:960px;display:flex;flex-direction:column;align-items:stretch;gap:16px;}
    .my-job-module-wrap > .skill-profile-module-subtitle{margin-bottom:8px;}
    .my-job-section{display:flex;flex-direction:column;gap:12px;}
    .my-job-position-name{font-size:15px;font-weight:700;color:#1a1a1a;margin-bottom:4px;}
    .my-job-viz-grid{display:flex;flex-direction:column;gap:16px;align-items:stretch;}
    .my-job-viz-block{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.9);border-radius:16px;padding:16px 18px;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 8px 24px rgba(0,0,0,.07);backdrop-filter:blur(20px) saturate(1.35);-webkit-backdrop-filter:blur(20px) saturate(1.35);}
    .my-job-doability-chart-wrap{max-width:78%;margin:0 auto;}
    .my-job-viz-label{font-size:11px;font-weight:700;color:#555;letter-spacing:0.4px;text-transform:uppercase;margin-bottom:10px;}
    .my-job-viz-caption{font-size:11px;color:#888;margin-top:6px;}

    /* Capability Profile (person-bound IST) */
    .capability-profile-own-content{display:flex;flex-direction:column;gap:16px;}
    .capability-profile-empty{padding:18px 20px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.9);border-radius:14px;color:#666;font-size:13px;text-align:center;backdrop-filter:blur(20px) saturate(1.35);-webkit-backdrop-filter:blur(20px) saturate(1.35);}
    .capability-profile-blocks{display:flex;flex-direction:column;gap:14px;}
    .capability-profile-block{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.9);border-radius:16px;padding:14px 16px;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 8px 24px rgba(0,0,0,.07);backdrop-filter:blur(20px) saturate(1.35);-webkit-backdrop-filter:blur(20px) saturate(1.35);display:flex;flex-direction:column;gap:8px;}
    .capability-profile-block-title{font-size:13px;font-weight:800;color:#1a1a1a;letter-spacing:0.3px;}
    .capability-profile-block-value{font-size:22px;font-weight:800;color:#1a1a1a;line-height:1.1;}
    .capability-profile-bar{width:100%;height:8px;background:rgba(0,0,0,.06);border-radius:999px;overflow:hidden;}
    .capability-profile-bar-fill{height:100%;background:linear-gradient(90deg,#2563eb,#22c55e);border-radius:999px;}
    .capability-profile-sub-list{list-style:none;margin:6px 0 0 0;padding:0;display:flex;flex-direction:column;gap:4px;}
    .capability-profile-sub-list li{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;color:#555;}
    .capability-profile-sub-label{cursor:help;}
    .capability-profile-sub-value{font-weight:700;color:#1a1a1a;}
    .capability-profile-charts{display:flex;flex-direction:column;gap:14px;margin-top:4px;}

    /* Capability Profile – Team toggle (supervisors) */
    .capability-profile-team-toggle-wrap{margin-top:18px;display:flex;justify-content:flex-start;}
    .capability-profile-team-toggle-btn{width:auto !important;padding:10px 18px !important;}
    /* Capability Profile – Team section (supervisors) */
    .capability-profile-team-section{display:flex;flex-direction:column;gap:10px;margin-top:14px;}
    .capability-profile-team-title{font-size:13px;font-weight:800;color:#1a1a1a;letter-spacing:0.5px;text-transform:uppercase;}
    .capability-profile-team-list{display:flex;flex-direction:column;gap:6px;}
    .capability-profile-team-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:#fff;border:1px solid #e0e0e0;border-radius:8px;cursor:pointer;font-family:inherit;text-align:left;}
    .capability-profile-team-row:hover{background:#f5f5f5;border-color:#1a1a1a;}
    .capability-profile-team-row-name{font-size:13px;font-weight:700;color:#1a1a1a;flex:1;}
    .capability-profile-team-row-email{font-size:11px;color:#888;flex:1.4;}
    .capability-profile-team-row-arrow{font-size:18px;color:#888;}
    .capability-profile-team-editor{margin-top:12px;background:#fafafa;border:1px solid #e0e0e0;border-radius:10px;padding:14px;}

    /* Capability Profile – Status pills */
    .capability-profile-status-pill{font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;border:1px solid transparent;white-space:nowrap;}
    .capability-profile-status-pill--fresh{color:#166534;background:rgba(34,197,94,.15);border-color:rgba(22,101,52,.22);}
    .capability-profile-status-pill--stale{color:#92400e;background:rgba(250,204,21,.22);border-color:rgba(146,64,14,.28);}
    .capability-profile-status-pill--empty{color:#475569;background:rgba(100,116,139,.14);border-color:rgba(71,85,105,.22);}
    .profile-history-admin-capability-profile-editor{margin:14px 0 18px 0;background:#fafafa;border:1px solid #e0e0e0;border-radius:10px;padding:14px;}
    .growth-job-doability-editor{margin:14px 0 0 0;background:#fafafa;border:1px solid #e0e0e0;border-radius:10px;padding:14px;}
    .my-job-editor-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
    .my-job-editor-person{font-size:14px;font-weight:700;color:#1a1a1a;}
    .my-job-editor-position{font-size:12px;color:#666;}
    .job-design-admin-body{flex:1;min-height:0;display:flex;align-items:flex-start;justify-content:center;padding:24px 28px;overflow:auto;width:100%;box-sizing:border-box;}
    .job-design-admin-layout{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start;width:100%;max-width:1280px;}
    .job-design-admin-left{flex:1 1 440px;min-width:340px;display:flex;flex-direction:column;gap:14px;}
    .job-design-admin-editor{display:flex;flex-direction:column;gap:14px;}
    .job-design-admin-preview{flex:1 1 520px;min-width:340px;display:flex;flex-direction:column;gap:16px;position:sticky;top:24px;}
    .job-design-admin-preview-block{
      background:rgba(255,255,255,.55);
      border:1px solid rgba(255,255,255,.9);
      border-radius:16px;
      padding:16px 18px;
      box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 8px 24px rgba(0,0,0,.07);
      backdrop-filter:blur(20px) saturate(1.35);
      -webkit-backdrop-filter:blur(20px) saturate(1.35);
    }
    .job-design-admin-preview-title{font-size:11px;font-weight:700;color:#555;letter-spacing:0.4px;text-transform:uppercase;margin-bottom:10px;}
    /* Legende ist vertikal auf die Mitte des Kreises ausgerichtet, NICHT auf
       die Mitte des SVG (das unten noch das "Accountability dominant"-Label
       enthält). padding-top entspricht etwa dem Y-Offset zur Kreismitte. */
    .job-shape-with-legend{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;}
    .job-shape-with-legend-pie{flex:0 0 auto;max-width:240px;}
    .job-shape-with-legend-meta{flex:1 1 160px;min-width:0;padding-top:90px;}
    .job-shape-legend{display:flex;flex-direction:column;gap:6px;}
    .job-shape-legend-row{font-size:13px;font-weight:600;line-height:1.3;}
    .job-design-admin-factor{
      background:rgba(255,255,255,.55);
      border:1px solid rgba(255,255,255,.9);
      border-radius:16px;
      padding:14px 16px;
      display:flex;
      flex-direction:column;
      gap:6px;
      box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 8px 24px rgba(0,0,0,.07);
      backdrop-filter:blur(20px) saturate(1.35);
      -webkit-backdrop-filter:blur(20px) saturate(1.35);
    }
    .job-design-admin-factor-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;}
    .job-design-admin-factor-labels{display:flex;flex-direction:column;min-width:140px;flex:1;}
    .job-design-admin-factor-label{font-size:13px;font-weight:700;color:#1a1a1a;}
    .job-design-admin-factor-hint{font-size:11px;color:#888;}
    .job-design-admin-factor-value-display{font-size:22px;font-weight:700;color:#1a1a1a;font-variant-numeric:tabular-nums;min-width:28px;text-align:right;line-height:1;}
    .job-design-admin-factor-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px;}
    .job-design-admin-main-slider{width:100%;margin:4px 0 0 0;accent-color:#1a1a1a;}
    .job-design-admin-slider-scale{display:flex;justify-content:space-between;font-size:10px;color:#aaa;margin-top:-2px;}
    .job-design-admin-subtoggle{font-size:11px;color:#555;display:inline-flex;align-items:center;gap:5px;cursor:pointer;user-select:none;}
    .job-design-admin-subtoggle-input{margin:0;accent-color:#1a1a1a;}
    .job-design-admin-main-slider:disabled{opacity:.45;cursor:not-allowed;}
    .job-design-admin-factor-locked .job-design-admin-factor-value-display{color:#666;}
    .job-design-admin-main-locked-hint{font-size:11px;color:#888;font-style:italic;margin-top:2px;}
    .job-design-admin-sub-wrap{margin-top:10px;border-top:1px dashed #e0e0e0;padding-top:10px;display:flex;flex-direction:column;gap:8px;}
    .job-design-admin-sub-row{display:grid;grid-template-columns:1fr 1fr 28px;gap:10px;align-items:center;}
    .job-design-admin-sub-label{font-size:12px;color:#333;}
    .job-design-admin-sub-slider{width:100%;accent-color:#1a1a1a;}
    .job-design-admin-sub-value-display{font-size:14px;font-weight:700;color:#1a1a1a;font-variant-numeric:tabular-nums;text-align:right;line-height:1;}
    .job-design-admin-status{font-size:12px;font-weight:600;}
    .growth-job-doability-body{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;padding:24px;overflow:auto;width:100%;box-sizing:border-box;gap:14px;}
    .growth-job-doability-box{width:100%;max-width:1040px;display:flex;flex-direction:column;gap:16px;}
    .growth-job-doability-subtitle{font-size:13px;color:#555;margin:0;}
    .growth-job-doability-controls{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;}
    .growth-job-doability-filter-label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:700;color:#555;letter-spacing:0.4px;text-transform:uppercase;}
    .growth-job-doability-filter{padding:6px 10px;border:1px solid #ccc;border-radius:6px;font-size:13px;background:#fff;min-width:180px;}
    .growth-job-doability-chart-wrap{background:#fafafa;border:1px solid #e0e0e0;border-radius:10px;padding:12px;}
    .growth-job-doability-chart{width:100%;}
    .growth-job-doability-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:#555;}
    .growth-job-doability-legend-item{display:inline-flex;align-items:center;gap:6px;}
    .growth-job-doability-dot{display:inline-block;width:12px;height:12px;border-radius:50%;}
    .growth-job-doability-dot-filled{background:#1a1a1a;}
    .growth-job-doability-dot-ring{background:#fff;border:2px solid #1a1a1a;}
    .growth-job-doability-dot-green{background:#2e7d32;}
    .growth-job-doability-dot-red{background:#c0392b;}
    .growth-job-doability-list-wrap{display:flex;flex-direction:column;gap:6px;}
    .growth-job-doability-list{display:flex;flex-direction:column;gap:4px;}
    .growth-job-doability-list-header,
    .growth-job-doability-row{display:grid;grid-template-columns:minmax(140px,1.3fr) minmax(130px,1.3fr) minmax(110px,1fr) minmax(120px,1fr) minmax(120px,1fr);gap:12px;align-items:center;padding:10px 14px;}
    .growth-job-doability-list-header{font-size:11px;font-weight:700;color:#555;letter-spacing:0.4px;text-transform:uppercase;border-bottom:1px solid #e0e0e0;background:transparent;}
    .growth-job-doability-row{background:#fff;border:1px solid #e0e0e0;border-radius:8px;cursor:pointer;font-size:13px;}
    .growth-job-doability-row:hover{background:#f5f5f5;border-color:#1a1a1a;}
    .growth-job-col-name{font-weight:700;color:#1a1a1a;}
    .growth-job-col-position{color:#555;}
    .growth-job-col-shape{color:#1a1a1a;}
    .growth-job-badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;border:1px solid transparent;letter-spacing:0.3px;}
    .growth-job-badge-green{color:#166534;background:rgba(34,197,94,.15);border-color:rgba(22,101,52,.22);}
    .growth-job-badge-yellow{color:#a16207;background:rgba(250,204,21,.18);border-color:rgba(161,98,7,.22);}
    .growth-job-badge-red{color:#b91c1c;background:rgba(239,68,68,.14);border-color:rgba(185,28,28,.22);}
    .growth-job-badge-gray{color:#475569;background:rgba(100,116,139,.14);border-color:rgba(71,85,105,.22);}
    .job-shape-fit{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:8px;border:1px solid transparent;font-size:12px;line-height:1.4;}
    .job-shape-fit-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:0 0 auto;margin-top:3px;}
    .job-shape-fit-text{flex:1;color:#1a1a1a;}
    .job-shape-fit-green{background:rgba(34,197,94,.10);border-color:rgba(22,101,52,.25);}
    .job-shape-fit-green .job-shape-fit-dot{background:#2e7d32;}
    .job-shape-fit-yellow{background:rgba(250,204,21,.12);border-color:rgba(161,98,7,.25);}
    .job-shape-fit-yellow .job-shape-fit-dot{background:#d97706;}
    .job-shape-fit-red{background:rgba(239,68,68,.09);border-color:rgba(185,28,28,.25);}
    .job-shape-fit-red .job-shape-fit-dot{background:#c0392b;}
    .job-shape-fit-gray{background:rgba(100,116,139,.08);border-color:rgba(71,85,105,.18);}
    .job-shape-fit-gray .job-shape-fit-dot{background:#94a3b8;}
    .success-profile-fit-header{display:flex;align-items:center;justify-content:space-between;gap:12px;}
    .success-profile-fit-toggle{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:400;color:#475569;cursor:pointer;user-select:none;padding:2px 4px;border-radius:4px;text-transform:none;letter-spacing:0;}
    .success-profile-fit-toggle:hover{color:#1a1a1a;background:rgba(0,0,0,.04);}
    .success-profile-fit-toggle:focus-visible{outline:2px solid #1a1a1a;outline-offset:2px;}
    .success-profile-fit-toggle-arrow{display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;transition:transform 0.15s ease;}
    .success-profile-fit-toggle[data-state="hidden"] .success-profile-fit-toggle-arrow{transform:rotate(-90deg);}
    .job-shape-fit-clickable{cursor:pointer;transition:filter 0.15s ease, box-shadow 0.15s ease;}
    .job-shape-fit-clickable:hover{filter:brightness(0.97);box-shadow:0 1px 3px rgba(0,0,0,0.08);}
    .job-shape-fit-clickable:focus-visible{outline:2px solid #1a1a1a;outline-offset:2px;}
    .job-shape-fit-overlay{display:none;align-items:center;justify-content:center;padding:24px;}
    .job-shape-fit-overlay-box{position:relative;background:#fff;border-radius:12px;padding:24px 28px;max-width:680px;width:100%;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 8px 40px rgba(0,0,0,0.2);}
    .job-shape-fit-overlay-close{position:absolute;top:10px;right:12px;background:none;border:none;font-size:26px;line-height:1;color:#555;cursor:pointer;padding:4px 8px;}
    .job-shape-fit-overlay-close:hover{color:#1a1a1a;}
    .job-shape-fit-overlay-summary-wrap{margin:4px 28px 16px 0;}
    .job-shape-fit-overlay-body{flex:1;overflow-y:auto;font-size:13px;line-height:1.55;color:#1a1a1a;}
    .job-shape-fit-overlay-body p{margin:0 0 1em;}
    .job-shape-fit-overlay-body p:last-child{margin-bottom:0;}
    .job-shape-fit-overlay-body strong{font-weight:700;color:#1a1a1a;}
    .job-shape-fit-overlay-body ul{margin:0.5em 0 1em 1.25em;padding-left:1em;list-style:disc;}
    .job-shape-fit-overlay-body li{margin-bottom:0.7em;}
    .job-shape-fit-overlay-body li:last-child{margin-bottom:0;}
    .my-job-fit-block{margin-top:14px;}
    @media (max-width:640px){
      .growth-job-doability-list-header{display:none;}
      .growth-job-doability-row{grid-template-columns:1fr;gap:4px;}
    }
    /* Job doability — Picker buttons + selection summary */
    .growth-job-doability-body > .card-sort-profile-title{margin:0;}
    .growth-job-doability-pickers{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:6px;width:100%;max-width:1040px;}
    /* Direkt auf den Page-Hintergrund: Chart-Block + Shape-Grid bekommen die gleiche Maximalbreite wie die Pickers, kein zusätzlicher Outer-Container. */
    .growth-job-doability-body > .growth-job-doability-chart-block{width:100%;max-width:1040px;}
    .growth-job-doability-body > .growth-job-doability-shape-grid{width:100%;max-width:1040px;}
    .growth-job-doability-picker-btn{flex:0 1 240px;min-width:180px;width:auto !important;}
    .growth-job-doability-selection-summary{font-size:13px;color:#555;text-align:center;margin:0 0 10px 0;}
    /* Job doability — Shape grid (Capability actual | Job design target) */
    .growth-job-doability-shape-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px;}
    .growth-job-doability-shape-block{min-width:0;}
    .growth-job-doability-fit{margin-top:10px;}
    .growth-job-doability-fit:empty{display:none;}
    .growth-job-doability-fit-toggle-block{margin-top:10px;}
    @media (max-width:760px){
      .growth-job-doability-shape-grid{grid-template-columns:1fr;}
    }
    /* Job doability — Picker overlay (Choose position / Choose person) */
    .growth-job-doability-picker-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000;}
    .growth-job-doability-picker-panel{background:#fff;border-radius:12px;padding:18px 20px;width:min(560px,92vw);max-height:80vh;display:flex;flex-direction:column;gap:12px;box-shadow:0 12px 40px rgba(0,0,0,.25);}
    .growth-job-doability-picker-head{display:flex;justify-content:space-between;align-items:center;}
    .growth-job-doability-picker-title{font-size:16px;font-weight:800;color:#1a1a1a;margin:0;}
    .growth-job-doability-picker-close{background:transparent;border:none;font-size:22px;line-height:1;color:#555;cursor:pointer;padding:4px 8px;border-radius:6px;}
    .growth-job-doability-picker-close:hover{background:#f0f0f0;color:#1a1a1a;}
    .growth-job-doability-picker-search{padding:8px 10px;border:1px solid #ccc;border-radius:6px;font-size:13px;background:#fff;}
    .growth-job-doability-picker-search:focus{outline:none;border-color:#1a1a1a;}
    .growth-job-doability-picker-list{flex:1 1 auto;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding-right:2px;}
    .growth-job-doability-picker-item{padding:10px 12px;background:#fafafa;border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;text-align:left;font-family:inherit;font-size:13px;color:#1a1a1a;display:flex;flex-direction:column;gap:2px;}
    .growth-job-doability-picker-item:hover{background:#f0f0f0;border-color:#1a1a1a;}
    .growth-job-doability-picker-item-email{font-size:11px;color:#888;}
    .growth-job-doability-picker-item-meta{font-size:11px;color:#555;}
    .growth-job-doability-picker-item-meta--muted{color:#aaa;font-style:italic;}
    /* Skill/Task Profile + Task Redesign: scrollbarer Inhalt unter Kopfzeile (Home nur oben rechts) */
    .skill-profile-module-body{
      flex:1;
      min-height:0;
      display:flex;
      align-items:flex-start;
      justify-content:center;
      padding:24px;
      overflow:auto;
      width:100%;
      box-sizing:border-box;
    }
    /* Title-Subtitle-Alignment-Fix für Module mit zentriertem Position-Subtitle direkt unter
       dem Screen-Title. Der Screen-Title sitzt in .skill-radar-screen-top (keine Scrollbar)
       und ist auf 50% des Viewports zentriert. Der Subtitle sitzt innerhalb von
       .skill-profile-module-body (mit overflow:auto), und wenn dort eine vertikale Scrollbar
       erscheint, verschiebt sich der Body-Inhalt um ~7.5px nach links → Title und Subtitle
       stehen nicht mehr untereinander. scrollbar-gutter:stable both-edges reserviert auf
       beiden Seiten symmetrisch Platz für den Scrollbar (auch wenn keiner gerade sichtbar
       ist), wodurch der Body-Inhalt stabil zentriert bleibt. Anwendung gezielt auf die
       Module mit position-name-Subtitle direkt unter dem Title. */
    #implications-screen .skill-profile-module-body,
    #task-redesign-screen .skill-profile-module-body{scrollbar-gutter:stable both-edges;}
    /* Compare-Ergebnis + Skill-Radar: kein eigener Balken-Hintergrund; Titel mittig wie Skill-Radar-Typo */
    .compare-result-top,
    .skill-radar-screen-top{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:flex-end;
      flex-shrink:0;
      min-height:48px;
      padding:10px 28px;
      box-sizing:border-box;
      background:transparent;
      border-bottom:none;
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
      z-index:20;
    }
    /* Container für mehrere Action-Buttons rechts im Screen-Top (z.B. "View implications →" + Home).
       Sitzt anstelle eines einzelnen Buttons in der flex-end-Spalte und packt die Buttons selbst in
       einen flex-row mit kleinem gap. */
    .skill-radar-screen-top-actions{display:flex;align-items:center;gap:10px;}

    /* ===========================================================================
       IMPLICATIONS MODULE — abgeleitete Empfehlungen aus dem Task Redesign.
       Schritt 4: Skill-Section mit Status-Badges + Drill-Down.
       Schritt 5: Success-Section mit Pattern-Cards (folgt).
       =========================================================================== */
    .implications-view{display:flex;flex-direction:column;gap:24px;padding:8px 4px;}
    /* Summary-Banner oben (ohne Border-Bottom — sah aus wie eine fremde Trennlinie unter dem Toggle) */
    .implications-summary{display:flex;flex-direction:column;gap:6px;}
    .implications-summary-counts{margin:0;font-size:13px;font-weight:700;color:#1a1a1a;}
    .implications-summary-distribution{margin:0;display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:#555;}
    .implications-summary-distribution span{display:inline-flex;align-items:center;}
    /* Sections */
    .implications-section{display:flex;flex-direction:column;gap:8px;}
    .implications-section-title{margin:0;font-size:14px;font-weight:800;color:#1a1a1a;}
    .implications-section-help{margin:0 0 4px;font-size:12px;color:#666;line-height:1.4;}
    /* Skill list */
    .implications-skill-list{display:flex;flex-direction:column;gap:6px;}
    .implications-skill-row-wrap{display:flex;flex-direction:column;}
    .implications-skill-row{
      display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;
      background:#fafafa;border:1px solid rgba(0,0,0,.06);cursor:pointer;
      transition:background .12s ease;
    }
    .implications-skill-row:hover{background:#f3f3f3;}
    .implications-skill-row:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(0,0,0,.45);}
    .implications-skill-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
    .implications-skill-name{font-size:13px;font-weight:600;color:#1a1a1a;}
    .implications-skill-section{font-size:11px;font-weight:400;color:#6b7280;}
    .implications-skill-row-meta{display:flex;align-items:center;gap:10px;flex-shrink:0;}
    .implications-skill-linked-count{font-size:11px;color:#6b7280;white-space:nowrap;}
    .implications-skill-chev{width:14px;height:14px;color:#6b7280;transition:transform .15s ease;}
    .implications-skill-row.is-open .implications-skill-chev{transform:rotate(180deg);}
    /* Status-Badges — matchen die Task-Redesign-Pill-Farben für visuelle Konsistenz */
    .implications-skill-badge{
      display:inline-flex;align-items:center;justify-content:center;padding:3px 9px;border-radius:999px;
      border:1px solid transparent;font-size:11px;font-weight:700;white-space:nowrap;
    }
    .implications-skill-badge-wird-weniger-relevant{color:#991b1b;background:rgba(239,68,68,.14);border-color:rgba(153,27,27,.26);}
    .implications-skill-badge-wird-wichtiger{color:#6d28d9;background:rgba(168,85,247,.16);border-color:rgba(109,40,217,.24);}
    .implications-skill-badge-wandelt-sich{color:#1d4ed8;background:rgba(96,165,250,.2);border-color:rgba(29,78,216,.26);}
    .implications-skill-badge-im-wandel{color:#9a3412;background:rgba(249,115,22,.16);border-color:rgba(154,52,18,.24);}
    .implications-skill-badge-stabil{color:#166534;background:rgba(34,197,94,.15);border-color:rgba(22,101,52,.24);}
    .implications-skill-badge-datenlage-duenn{color:#6b7280;background:rgba(148,163,184,.14);border-color:rgba(100,116,139,.22);}
    .implications-skill-badge-no-signal{color:#9ca3af;background:rgba(148,163,184,.10);border-color:rgba(100,116,139,.16);}
    /* Drill-Down-Detail unter einem Skill-Row */
    .implications-skill-detail{
      margin:4px 0 8px 12px;padding:10px 12px;border-left:2px solid rgba(0,0,0,.08);
      background:rgba(0,0,0,.015);border-radius:0 8px 8px 0;
    }
    .implications-detail-task-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
    .implications-detail-task-row{display:flex;align-items:center;gap:10px;font-size:12px;}
    .implications-detail-task-name{color:#1a1a1a;}
    .implications-detail-empty{margin:0;font-size:12px;color:#6b7280;}
    /* Emerge-ohne-Skill-Warnung */
    .implications-emerge-warn{
      background:rgba(249,115,22,.08);border:1px solid rgba(154,52,18,.20);border-radius:10px;
      padding:12px 14px;margin-top:8px;
    }
    .implications-emerge-warn-title{margin:0 0 4px;font-size:12px;font-weight:700;color:#9a3412;}
    .implications-emerge-warn-body{margin:0 0 6px;font-size:12px;color:#1a1a1a;}
    .implications-emerge-warn ul{margin:0;padding-left:18px;font-size:12px;color:#1a1a1a;}
    .implications-emerge-warn li{margin-bottom:2px;}
    /* No-Signal-Skills (ausklappbarer Bereich am Ende) */
    .implications-no-signal{margin-top:8px;}
    .implications-no-signal summary{
      cursor:pointer;font-size:12px;font-weight:600;color:#6b7280;padding:6px 4px;
      list-style:none;outline:none;
    }
    .implications-no-signal summary::-webkit-details-marker{display:none;}
    .implications-no-signal summary::before{content:"▸ ";color:#9ca3af;}
    .implications-no-signal[open] summary::before{content:"▾ ";}
    .implications-no-signal summary:hover{color:#1a1a1a;}
    .implications-skill-list-no-signal{margin-top:6px;}
    /* Empty-State */
    .implications-empty{margin:0;padding:14px 16px;font-size:12px;color:#6b7280;background:rgba(0,0,0,.02);border-radius:8px;text-align:center;}
    /* Success-Profile Pattern-Cards — pro matchendes Pattern eine farbige Karte.
       Farb-Variants matchen die Task-Redesign-Karten-Farben (visuelle Kontinuität zum Klassifikations-Schritt). */
    .implications-pattern-grid{display:flex;flex-direction:column;gap:10px;}
    .implications-pattern-card{
      border-radius:14px;border:1.5px solid transparent;padding:16px 18px;
      display:flex;flex-direction:column;gap:6px;background:#fff;
    }
    .implications-pattern-title{margin:0;font-size:15px;font-weight:700;line-height:1.25;}
    .implications-pattern-reason{margin:0;font-size:12px;font-weight:600;}
    .implications-pattern-description{margin:4px 0 0;font-size:13px;font-weight:400;color:#2b2b2b;line-height:1.5;}
    .implications-pattern-comp-label{margin:8px 0 4px;font-size:12px;font-weight:700;color:#1a1a1a;}
    .implications-pattern-competencies{margin:0;padding-left:18px;font-size:13px;color:#1a1a1a;line-height:1.5;}
    .implications-pattern-competencies li{margin-bottom:3px;}
    .implications-pattern-competencies li:last-child{margin-bottom:0;}
    /* Reflexionsfrage pro Pattern-Card. Visuell etwas abgesetzt vom Description-Text (italic,
       leichter Border-Left in der Akzentfarbe der Card), damit klar wird: das ist die Frage zur
       HR-Reflexion, kein algorithmischer Vorschlag. */
    .implications-pattern-reflection{
      margin:10px 0 0;padding:8px 12px;border-left:3px solid currentColor;
      font-size:13px;font-weight:500;color:#1a1a1a;line-height:1.5;font-style:italic;
      background:rgba(255,255,255,.45);border-radius:0 8px 8px 0;
    }
    /* Vorläufigkeits-Banner: erscheint oben in der Implications-View wenn nicht alle Tasks der
       Position klassifiziert sind. Diskret aber lesbar, neutral grau (nicht alarmistisch).
       Zentriert auf View-Level über den Tab-Inhalten — width:fit-content damit es nicht die
       volle Breite einnimmt sondern nur seinem Inhalt entspricht. */
    .implications-preliminary-banner{
      padding:8px 12px;border-radius:8px;background:rgba(148,163,184,.12);
      border:1px solid rgba(100,116,139,.20);font-size:12px;color:#475569;line-height:1.4;
      width:fit-content;max-width:100%;margin:0 auto 16px;text-align:center;
    }
    .implications-preliminary-banner strong{color:#1a1a1a;}
    /* Toggle "Skills / Competencies" zentriert zwischen Header und Body. Verwendet die existierenden
       compare-view-toggle-Styles für identisches Look-and-Feel mit der Compare-Ansicht. */
    .implications-toggle-row{display:flex;justify-content:center;padding:4px 28px 12px;}
    /* Implications-Module-Wrap braucht volle Breite für die Split-View (Skills-Tab) — überschreibt
       das Standard-Max-Width:1080px des .skill-profile-module-wrap. */
    .implications-module-wrap.implications-module-wrap{max-width:none;min-width:0;width:100%;}
    /* Tab-Inhalts-Container — kein eigenes Styling, dient nur als logischer Wrapper. */
    .implications-tab-content{display:flex;flex-direction:column;gap:24px;}
    /* Skills-Tab Split-View: Task Profile links | SVG-Lücke | Skill Profile rechts. Gespiegelt
       zur Task-Profile-Twopane (dort Skills links, Tasks rechts) — im Implications-Kontext sind
       Tasks die "Quelle" und Skills die "Rückkopplung". */
    .implications-skills-twopane{
      position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
      gap:80px;align-items:start;width:100%;min-width:0;
    }
    .implications-skills-pane{min-width:0;}
    .implications-pane-box{width:100%;min-width:0;box-sizing:border-box;padding:18px 20px 20px;}
    .implications-pane-title{margin:0 0 12px;font-size:13px;font-weight:800;color:#1a1a1a;}
    /* SVG-Overlay zwischen den Panes — absolut positioniert, pointer-events:none damit Klicks
       auf die darunterliegenden Pane-Inhalte gehen. */
    .implications-skills-links-svg{
      position:absolute;left:0;top:0;width:100%;height:100%;
      pointer-events:none;z-index:1;overflow:visible;
    }
    /* Task-Row in der linken Pane: Name (flex:1) + Klassifikations-Pill + Dot rechts.
       Der Dot sitzt am rechten Rand, damit die SVG-Linie nach rechts zum Skill-Dot geht. */
    .implications-task-row{
      display:flex;align-items:center;gap:10px;padding:6px 0;min-height:32px;
    }
    .implications-task-row-name{flex:1;min-width:0;font-size:13px;font-weight:500;color:#1a1a1a;word-break:break-word;}
    .implications-task-row-label{font-size:10px;padding:2px 8px;min-width:auto;cursor:default;pointer-events:none;}
    .implications-task-row .task-link-dot{flex-shrink:0;}
    /* Skill-Row in der rechten Pane: Dot links + Name (flex:1) + Status-Badge rechts.
       Der Dot sitzt am linken Rand, damit die SVG-Linie vom Task-Dot nach links kommt. */
    .implications-skill-line-row{
      display:flex;align-items:center;gap:10px;padding:6px 0;min-height:32px;
    }
    .implications-skill-line-row .task-link-dot{flex-shrink:0;}
    .implications-skill-line-name{flex:1;min-width:0;font-size:13px;font-weight:500;color:#1a1a1a;word-break:break-word;}
    /* Section-Heads in den beiden Panes ein wenig kompakter als im Standard-Task-Profile */
    .implications-task-sections .skill-profile-section,
    .implications-skill-sections .skill-profile-section{margin-bottom:14px;}
    .implications-task-sections .skill-profile-section:last-child,
    .implications-skill-sections .skill-profile-section:last-child{margin-bottom:0;}
    .implications-task-sections .skill-profile-section-head,
    .implications-skill-sections .skill-profile-section-head{margin-bottom:4px;}
    /* Stack panes vertically on narrow viewports */
    @media (max-width: 1100px){
      .implications-skills-twopane{grid-template-columns:minmax(0,1fr);gap:24px;}
      .implications-skills-links-svg{display:none;}
    }
    /* ========================================================================
       COMPETENCY-DIRECTION-CARDS (Phase C) — exakt der Builder-Stil aus #main-success-profiles.
       Die Original-Builder-CSS ist auf #main-success-profiles gescoped, also re-applizieren wir
       die identischen Style-Regeln hier scoped auf #implications-screen. So sind die zwei
       Ansichten visuell deckungsgleich.
       ======================================================================== */
    #implications-screen .sort-area{
      gap:16px;padding:12px 20px 16px;background:transparent;
    }
    #implications-screen .cat-col{
      border-right:none;background:transparent;border-radius:20px;min-width:0;
    }
    #implications-screen .cat-col:last-child{border-right:none;}
    #implications-screen .cat-header{
      padding:12px 8px 14px;background:transparent;border-bottom:none;
      display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;
    }
    #implications-screen .cat-header-label{
      font-size:12px;font-weight:800;color:#0d0d0d;letter-spacing:.3px;text-align:center;
    }
    #implications-screen .mini-stack{
      background:transparent;padding:10px 4px 14px;
      display:flex;flex-direction:column;align-items:stretch;
    }
    #implications-screen .mini-stack-dimension-group{
      display:flex;flex-direction:column;align-items:stretch;min-width:0;
    }
    #implications-screen .mini-stack-dimension-group + .mini-stack-dimension-group{
      margin-top:10px;
    }
    #implications-screen .mini-stack-dimension-title{
      font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
      color:#8a8a8a;text-align:left;margin:0;
      flex-shrink:0;box-sizing:border-box;
      /* Titel und Karten haben jetzt volle Spalten-Breite (3-Col-Layout, Spalten ohnehin schmal) */
      width:100%;padding:0 2px 8px;
    }
    #implications-screen .mini-stack-dimension-group:first-child .mini-stack-dimension-title{
      padding-top:2px;
    }
    /* Cards füllen volle Spalten-Breite (3-Col-Grid → Spalten ohnehin schmal). */
    #implications-screen .mini-stack-dimension-cards{
      display:flex;flex-direction:column;align-items:stretch;min-width:0;
    }
    #implications-screen .mini-card{
      background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.9);border-radius:14px;
      box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 8px 24px rgba(0,0,0,.07);
      backdrop-filter:blur(20px) saturate(1.35);
      -webkit-backdrop-filter:blur(20px) saturate(1.35);
      transition:border-color .15s,box-shadow .15s,transform .15s,background .15s;
      /* Padding shorthand: top:14 right:120 (Direction-Label-Platz) bottom:14 left:10 */
      padding:14px 120px 14px 10px;
      /* Card-Stack ohne Overlap: kleine Lücke statt -18px Pull-Up */
      margin-bottom:6px;
      /* Volle Spalten-Breite */
      width:100%;
    }
    #implications-screen .mini-card:last-child{margin-bottom:0;}
    /* 3-Spalten-Grid für die Competencies-Tab: links Meta-Info, mitte In profile, rechts Not in profile.
       Drei gleich breite Spalten. */
    .implications-comp-3col{
      display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;align-items:start;width:100%;min-width:0;
    }
    /* Linke Spalte mit Padding-Top so dass der erste Pattern-Card oben auf gleicher Höhe wie der
       erste Dimension-Title in der Mitte/rechts ist. Dimension-Title startet ungefähr bei:
       cat-header (12+~14 height + 14 padding-bottom ≈ 40px) + mini-stack padding-top:10px ≈ 50px.
       Plus 2px Feintuning damit der erste Dimension-Title (font-size 10px) und der erste Pattern-
       Card (font-size 15px Title) sauber ausgerichtet sind. */
    .implications-comp-col-left{display:flex;flex-direction:column;gap:16px;min-width:0;padding-top:79px;}
    .implications-comp-col{min-width:0;}
    @media (max-width: 1100px){
      .implications-comp-3col{grid-template-columns:minmax(0,1fr);}
    }
    #implications-screen .mini-card:hover{
      border-color:rgba(0,0,0,.12);background:rgba(255,255,255,.72);
      box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 14px 36px rgba(0,0,0,.1);
    }
    #implications-screen .mini-card-num{color:#8a8a8a;}
    /* Direction-Label rechts oben absolute positioniert auf der mini-card. Die mini-card hat
       position:relative aus der Basis-CSS (Zeile 100). Der Label sitzt im rechten Padding-Bereich
       — deshalb haben wir oben padding-right:120px ergänzt damit Name + Label nicht kollidieren. */
    #implications-screen .mini-card .implications-competency-card-label{
      position:absolute;top:50%;right:10px;transform:translateY(-50%);
    }
    .implications-competency-card-label{
      display:inline-flex;align-items:center;flex-shrink:0;
      font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;
      padding:3px 8px;border-radius:999px;border:1px solid transparent;white-space:nowrap;
    }
    .implications-competency-card-label::before{margin-right:4px;font-size:11px;}
    .implications-competency-card-label-gains-significantly{
      color:#166534;background:rgba(34,197,94,.18);border-color:rgba(22,101,52,.30);
    }
    .implications-competency-card-label-gains-significantly::before{content:'⇈';}
    .implications-competency-card-label-gains{
      color:#166534;background:rgba(34,197,94,.12);border-color:rgba(22,101,52,.20);
    }
    .implications-competency-card-label-gains::before{content:'↑';}
    .implications-competency-card-label-loses{
      color:#991b1b;background:rgba(239,68,68,.10);border-color:rgba(153,27,27,.20);
    }
    .implications-competency-card-label-loses::before{content:'↓';}
    .implications-competency-card-label-loses-significantly{
      color:#991b1b;background:rgba(239,68,68,.18);border-color:rgba(153,27,27,.30);
    }
    .implications-competency-card-label-loses-significantly::before{content:'⇊';}
    /* Stack columns vertically on narrow viewports */
    @media (max-width: 1100px){
      .implications-competency-sort-area{flex-direction:column;}
    }
    /* Color-Variants — gleiche Hue-Werte wie die Task-Redesign-Cards für sofortige Wiedererkennbarkeit */
    .implications-pattern-card-eliminate{background:rgba(239,68,68,.07);border-color:rgba(153,27,27,.20);}
    .implications-pattern-card-eliminate .implications-pattern-title,
    .implications-pattern-card-eliminate .implications-pattern-reason{color:#991b1b;}
    .implications-pattern-card-automate{background:rgba(34,197,94,.07);border-color:rgba(22,101,52,.20);}
    .implications-pattern-card-automate .implications-pattern-title,
    .implications-pattern-card-automate .implications-pattern-reason{color:#166534;}
    .implications-pattern-card-augment{background:rgba(96,165,250,.10);border-color:rgba(29,78,216,.20);}
    .implications-pattern-card-augment .implications-pattern-title,
    .implications-pattern-card-augment .implications-pattern-reason{color:#1d4ed8;}
    .implications-pattern-card-elevate{background:rgba(168,85,247,.08);border-color:rgba(109,40,217,.20);}
    .implications-pattern-card-elevate .implications-pattern-title,
    .implications-pattern-card-elevate .implications-pattern-reason{color:#6d28d9;}
    .implications-pattern-card-emerge{background:rgba(249,115,22,.08);border-color:rgba(154,52,18,.20);}
    .implications-pattern-card-emerge .implications-pattern-title,
    .implications-pattern-card-emerge .implications-pattern-reason{color:#9a3412;}
    /* Footer-Hinweis am Ende */
    .implications-footer{
      margin:8px 0 0;padding:12px 14px;background:rgba(0,0,0,.02);border-radius:8px;
      font-size:12px;color:#6b7280;text-align:center;font-style:italic;
    }
    .compare-result-top h1,
    .skill-radar-screen-title{
      position:absolute;
      left:50%;
      transform:translateX(-50%);
      margin:0;
      max-width:min(100% - 100px,92vw);
      text-align:center;
      pointer-events:none;
      z-index:1;
      font-size:18px;
      font-weight:800;
      color:#1a1a1a;
      letter-spacing:0.5px;
    }
    .compare-result-top .export-btn,
    .skill-radar-screen-top .export-btn,
    .experience-journal-screen-top .export-btn{position:relative;z-index:2;}
    .skill-radar-screen-body{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto;width:100%;box-sizing:border-box;}
    .skill-radar-box{
      width:100%;
      min-width:0;
      max-width:1400px;
      align-items:stretch;
      background:transparent;
      border:none;
      box-shadow:none;
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
      padding:0;
    }
    .skill-radar-layout{
      --skill-radar-area-size: clamp(420px, 36vw, 680px);
      width:auto;
      margin:0 auto;
      display:grid;
      grid-template-columns:var(--skill-radar-area-size) var(--skill-radar-area-size);
      justify-content:center;
      align-items:stretch;
      column-gap:24px;
    }
    .skill-radar-values-panel{
      width:var(--skill-radar-area-size);
      max-width:var(--skill-radar-area-size);
      aspect-ratio:1/1;
      box-sizing:border-box;
      justify-self:stretch;
      grid-column:1;
      border:1px solid rgba(0,0,0,.08);
      border-radius:12px;
      background:rgba(255,255,255,.72);
      padding:14px 16px;
      overflow:hidden;
      display:flex;
      flex-direction:column;
      box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 30px rgba(0,0,0,.06);
    }
    .skill-radar-values-panel .skill-profile-section--user .skill-profile-skill-row{grid-template-columns:minmax(0,1fr) auto auto;gap:14px;}
    .skill-radar-value-pair{font-size:14px;font-weight:700;color:#1a1a1a;font-variant-numeric:tabular-nums;white-space:nowrap;}
    .skill-radar-delta{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;padding:3px 9px;border-radius:6px;border:1px solid transparent;min-width:54px;text-align:center;box-sizing:border-box;}
    .skill-radar-delta-up{color:#166534;background:rgba(34,197,94,.15);border-color:rgba(22,101,52,.22);}
    .skill-radar-delta-down{color:#b91c1c;background:rgba(239,68,68,.14);border-color:rgba(185,28,28,.22);}
    .skill-radar-delta-flat{color:#334155;background:rgba(100,116,139,.14);border-color:rgba(51,65,85,.22);}
    .skill-radar-values-panel .skill-profile-section--user .skill-profile-skill-row{padding:8px 10px;margin:0 -10px 6px;border-radius:8px;transition:background .15s ease;}
    .skill-profile-skill-row.skill-radar-row-highlight{background:rgba(217,119,6,.18);}
    .skill-radar-spoke{transition:stroke .12s ease,stroke-width .12s ease;}
    .skill-radar-spoke.highlighted{stroke:rgba(217,119,6,.9);stroke-width:2.5;}
    .skill-radar-hit{cursor:pointer;}
    .skill-radar-section-toggle{appearance:none;border:none;background:transparent;padding:2px;margin:0;cursor:pointer;display:inline-flex;align-items:center;flex:0 0 auto;}
    .skill-radar-section-toggle-track{width:36px;height:20px;border-radius:999px;background:#cfd5dc;position:relative;display:inline-block;transition:background .15s ease;}
    .skill-radar-section-toggle-thumb{width:16px;height:16px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s ease;}
    .skill-radar-section-toggle[aria-pressed="true"] .skill-radar-section-toggle-track{background:#1a1a1a;}
    .skill-radar-section-toggle[aria-pressed="true"] .skill-radar-section-toggle-thumb{left:18px;}
    .skill-radar-toggle-all-row{display:flex;justify-content:center;gap:10px;padding:14px 0 4px;}
    .skill-radar-toggle-all-btn{font-size:12px;padding:6px 14px;width:auto;}
    .skill-radar-values-title{font-size:12px;font-weight:700;color:#444;margin-bottom:8px;}
    .skill-radar-values-list{display:flex;flex-direction:column;gap:14px;overflow-y:auto;overflow-x:hidden;flex:1 1 auto;min-height:0;padding-right:6px;}
    .skill-radar-values-columns{
      display:grid;
      grid-template-columns:minmax(0,1fr) 28px 28px 36px;
      gap:6px;
      align-items:center;
      margin-bottom:4px;
      padding:7px 8px;
      border:1px solid transparent;
      border-radius:9px;
      font-size:10px;
      font-weight:800;
      color:#667085;
      letter-spacing:.2px;
      text-transform:uppercase;
    }
    .skill-radar-values-columns span:nth-child(n+2){
      display:inline-flex;
      align-items:center;
      justify-content:center;
      text-align:center;
    }
    .skill-radar-values-section{font-size:11px;font-weight:800;color:#666;letter-spacing:.3px;text-transform:uppercase;margin-top:6px;padding-top:6px;border-top:1px solid rgba(0,0,0,.08);}
    .skill-radar-values-section:first-child{margin-top:0;padding-top:0;border-top:none;}
    .skill-radar-values-row{display:grid;grid-template-columns:minmax(0,1fr) 28px 28px 36px;align-items:center;gap:6px;padding:7px 8px;border:1px solid rgba(0,0,0,.07);border-radius:9px;background:rgba(255,255,255,.8);}
    .skill-radar-values-skill{font-size:12px;font-weight:600;color:#333;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .skill-radar-value-badge{
      width:100%;
      height:20px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:10px;
      font-weight:700;
      border-radius:999px;
      padding:0;
      border:1px solid transparent;
      white-space:nowrap;
      font-variant-numeric:tabular-nums;
      text-align:center;
    }
    .skill-radar-value-badge-ist{background:rgba(96,165,250,.2);color:#1d4ed8;border-color:rgba(29,78,216,.28);}
    .skill-radar-value-badge-soll{background:rgba(30,58,138,.16);color:#1e3a8a;border-color:rgba(30,58,138,.32);}
    .skill-radar-value-badge-delta{font-variant-numeric:tabular-nums;}
    .skill-radar-value-badge-delta-up{background:rgba(34,197,94,.15);color:#166534;border-color:rgba(22,101,52,.22);}
    .skill-radar-value-badge-delta-down{background:rgba(239,68,68,.14);color:#b91c1c;border-color:rgba(185,28,28,.22);}
    .skill-radar-value-badge-delta-flat{background:rgba(100,116,139,.14);color:#334155;border-color:rgba(51,65,85,.22);}
    .skill-radar-chart-wrap{
      position:relative;
      width:var(--skill-radar-area-size);
      max-width:var(--skill-radar-area-size);
      grid-column:2;
      justify-self:stretch;
      aspect-ratio:1/1;
      border:1px solid rgba(0,0,0,.08);
      border-radius:12px;
      background:rgba(255,255,255,.7);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:10px;
      box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 30px rgba(0,0,0,.06);
    }
    #skill-radar-svg{width:100%;height:100%;}
    .skill-radar-legend{position:absolute;bottom:14px;left:14px;z-index:1;margin:0;padding:0;background:transparent;border:none;display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
    .skill-radar-legend-item{font-size:12px;color:#555;display:flex;align-items:center;gap:6px;}
    .skill-radar-legend-swatch{
      width:28px;
      height:0;
      display:inline-block;
      border-top:3px solid rgba(29,78,216,.9);
      border-radius:999px;
    }
    .skill-radar-legend-swatch-target{
      border-top-color:rgba(29,78,216,.5);
      border-top-style:dashed;
    }
    .skill-radar-legend-swatch-actual{
      border-top-color:rgba(29,78,216,.9);
      border-top-style:solid;
    }
    .home-compare-bar{position:relative;z-index:10;max-width:calc(3*460px + 2*16px);margin:0 auto 40px;padding:14px 20px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.88);border-radius:14px;backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:background .15s,transform .1s,box-shadow .15s;box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 4px 16px rgba(0,0,0,.05);}
    .home-compare-bar:hover{background:rgba(255,255,255,.82);transform:translateY(-1px);}
    .home-compare-bar-left{display:flex;align-items:center;gap:12px;}
    .home-compare-icon{width:30px;height:30px;border-radius:8px;background:#1a1a1a;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;flex-shrink:0;}
    .home-compare-text{font-size:13px;font-weight:700;color:#1a1a1a;}
    .home-compare-sub{font-size:11px;color:#bbb;}
    .home-compare-arrow{font-size:14px;color:#ccc;}
    .home-tabs{display:none;}
    .home-tab{display:none;}
    .home-title{display:none;}
    .home-content-area{padding-top:16px;}
    .home-option{width:100%;padding:18px 22px;border-radius:14px;border:1px solid rgba(255,255,255,.88);background:rgba(255,255,255,.55);backdrop-filter:blur(16px) saturate(1.2);cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:6px;transition:background .15s,transform .1s,box-shadow .15s;text-align:left;margin-bottom:12px;box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 4px 16px rgba(0,0,0,.05);}
    .home-option:last-child{margin-bottom:0;}
    .home-option:hover{background:rgba(255,255,255,.82);transform:translateY(-1px);}
    .home-option-title{font-size:15px;font-weight:800;color:#0d0d0d;}
    .home-option-desc{font-size:11px;color:#aaa;}
    .home-loading-message{text-align:center;padding-top:32px;}
    .home-content-panel{display:none;}
    .home-content-panel.home-content-visible{display:block;}

    @media (max-width: 1200px) {
      .home-main{grid-template-columns:repeat(2,minmax(0,460px));padding:24px 24px 32px;}
      .home-hero{padding:32px 24px 0;}
      .home-header{padding:20px 24px 0;}
      #profile-history-screen .home-header.profile-history-header{padding:20px 24px 14px;}
      #profile-history-screen .home-main.profile-history-main{padding-top:43px;}
      .home-compare-bar{max-width:100%;margin:0 0 24px;}
    }

    @media (max-width: 768px) {
      .home-main{grid-template-columns:1fr;gap:12px;padding:16px 14px 24px;}
      .home-header{padding:16px 14px 0;}
      #profile-history-screen .home-header.profile-history-header{padding:16px 14px 12px;}
      #profile-history-screen .home-main.profile-history-main{padding-top:35px;}
      .home-hero{padding:20px 14px 0;}
      .home-hero-headline{font-size:28px;line-height:1.18;}
      /* Sidebearing-Versatz an die kleinere Headline-font-size anpassen: 69/1000*28 = 1.932px */
      .home-logo-login-svg{margin-left:calc(28px * 69 / 1000);}
      /* Pure-Header: dieselbe 0.27px Sub-Pixel-Korrektur wie im Desktop */
      .home-logo-login-svg--puregrowth{margin-left:calc(28px * 69 / 1000 - 0.27px);}
      .home-card{padding:20px 18px 18px;}
      .home-card-title{font-size:22px;}
      .home-card:hover{transform:none;}
      .home-compare-bar{padding:12px 14px;margin:0 0 18px;}
      .profile-history-admin-facets{grid-template-columns:1fr;}
      .profile-history-admin-position-row{flex-direction:column;align-items:flex-start;}
      .profile-history-admin-position-actions{justify-content:flex-start;}
      .profile-history-admin-risk-edit{width:100%;justify-content:flex-start;}
      .profile-history-ai-risk-row{grid-template-columns:1fr;}
      .profile-history-ai-risk-value{text-align:left;}
      .skill-profile-box,.skill-radar-box{min-width:0;max-width:100%;}
      .skill-profile-module-wrap{min-width:0;max-width:100%;}
      .skill-radar-screen-body,
      .skill-profile-module-body{padding:16px 14px;}
      .compare-result-top,.skill-radar-screen-top,.experience-journal-screen-top{padding:10px 14px;}
      .skill-radar-layout{display:flex;flex-direction:column;align-items:stretch;}
      .skill-radar-chart-wrap{order:1;width:100%;max-width:100%;flex:0 0 auto;}
      .skill-radar-values-panel{order:2;width:100%;max-width:100%;aspect-ratio:auto;overflow:visible;display:block;}
      .skill-radar-values-list{max-height:none;overflow:visible;flex:none;min-height:auto;padding-right:0;}
      .skill-profile-skill-row{grid-template-columns:1fr;}
      .skill-profile-section--user .skill-profile-skill-row{grid-template-columns:1fr;gap:6px;}
      .skill-profile-rating-boxes{flex-wrap:wrap;}
      .skill-profile-history-inline{width:100%;justify-content:flex-start;}
      .skill-profile-history-inline .skill-profile-history-sparkline{width:100%;}
      .task-redesign-row{grid-template-columns:1fr;}
      .task-redesign-select{max-width:100%;}
      .skill-profile-history-skill-row{grid-template-columns:1fr;}
      .skill-profile-history-skill-meta{justify-content:flex-start;}
      .profile-history-admin-user-sync-row{grid-template-columns:1fr;}
      .profile-history-admin-user-sync-email{min-width:0;}
      .profile-history-admin-user-sync-badges{justify-content:flex-start;}
      .profile-history-admin-user-sync-actions{justify-self:start;justify-content:flex-start;}
      .profile-history-pure-user-profile-trailing{flex-direction:column;align-items:flex-start;justify-self:start;}
      .profile-history-pure-user-profile-trailing-tasks{flex-wrap:wrap;}
      .profile-pure-dir-user-line{flex-direction:column;align-items:stretch;}
      .profile-pure-dir-user-controls{width:100%;justify-content:flex-start;}
      select.profile-pure-dir-select{width:100%;max-width:100%;}
      .profile-pure-dir-save-btn{align-self:flex-end;}
      .profile-history-admin-all-entry-meta{min-width:0;align-items:flex-start;}
      .profile-history-admin-all-entry-right{align-items:flex-start;}
      .profile-history-admin-all-entry-actions{justify-content:flex-start;}
      .profile-history-admin-all-entry-email,.profile-history-admin-all-entry-updated{text-align:left;}
      .home-compare-bar-left{gap:10px;align-items:flex-start;}
      .home-compare-icon{width:26px;height:26px;font-size:12px;}
      .home-compare-text{font-size:12px;}
      .home-compare-sub{font-size:10px;line-height:1.4;}
      .home-compare-arrow{margin-top:2px;}
      .home-module-btn-label{white-space:normal;}
      .home-module-btn-sub{line-height:1.35;}
      .home-saved-item:hover{transform:none;}
    }

    @media (max-width: 430px) {
      .home-compare-bar{align-items:flex-start;}
      .home-compare-bar-left{flex:1;min-width:0;}
      .home-compare-text{font-size:11.5px;line-height:1.35;}
      .home-compare-sub{font-size:10px;line-height:1.35;}
      .home-compare-arrow{font-size:13px;line-height:1;align-self:center;}
    }

    /* SELF-ASSESSMENT */
    .assessment-question-screen{position:fixed;inset:0;background:#f5f5f5;z-index:997;display:none;flex-direction:column;align-items:stretch;padding:0;overflow:hidden;}
    .assessment-question-screen.active{display:flex;}
    .assessment-question-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:700px;padding:24px;margin:0 auto;min-height:0;box-sizing:border-box;}
    .assessment-progress-above{margin-bottom:20px;width:100%;}
    .assessment-progress-text{font-size:12px;color:#888;text-align:center;margin-bottom:8px;}
    .assessment-progress-bar-wrap{height:6px;background:#e0e0e0;border-radius:3px;overflow:hidden;}
    .assessment-progress-bar-fill{height:100%;background:#1a1a1a;border-radius:3px;transition:width 0.25s ease;}
    .assessment-prompt{font-size:14px;font-weight:700;color:#1a1a1a;margin-bottom:24px;text-align:center;}
    .assessment-prompt-highlight{padding:2px 8px;border-radius:6px;font-weight:800;}
    .assessment-prompt-highlight.assessment-prompt-most{border:2px solid #27ae60;background:#f0f9f4;color:#1a5c34;}
    .assessment-prompt-highlight.assessment-prompt-least{border:2px solid #c0392b;background:#fdf2f2;color:#a82828;}
    .assessment-choices{display:flex;flex-direction:column;align-items:stretch;gap:12px;width:100%;margin-bottom:28px;}
    .assessment-back-below{padding:8px 20px;border-radius:6px;border:1.5px solid #e0e0e0;background:#fff;font-size:12px;font-weight:700;color:#1a1a1a;cursor:pointer;}
    .assessment-back-below:hover:not(:disabled){border-color:#1a1a1a;background:#f5f5f5;}
    .assessment-back-below:disabled{opacity:0.5;cursor:not-allowed;}
    .assessment-choice-btn{flex:1;min-width:0;padding:20px 24px;border-radius:8px;border:1.5px solid #e0e0e0;background:#fff;cursor:pointer;text-align:left;font-size:13px;line-height:1.5;color:#1a1a1a;transition:border-color 0.2s,background 0.2s,box-shadow 0.2s;}
    .assessment-choice-btn:hover:not(:disabled){border-color:#1a1a1a;box-shadow:0 2px 12px rgba(0,0,0,0.08);}
    .assessment-choice-btn.assessment-most-picked{border-color:#27ae60;background:#f0f9f4;color:#1a5c34;cursor:default;}
    .assessment-choice-btn.assessment-least-picked{border-color:#c0392b;background:#fdf2f2;color:#a82828;cursor:default;}
    .assessment-result-screen{position:fixed;inset:0;background:linear-gradient(180deg,#f8f9fa 0%,#eef0f2 100%);z-index:997;display:none;flex-direction:column;align-items:stretch;padding:0;overflow:hidden;}
    .assessment-result-screen.active{display:flex;}
    .assessment-result-scroll{flex:1;min-height:0;overflow-y:auto;padding:32px 24px 48px;display:flex;flex-direction:column;align-items:center;box-sizing:border-box;}
    .assessment-result-inner{max-width:620px;width:100%;}
    .assessment-result-title-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;text-align:center;}
    .assessment-result-title-row .assessment-result-title{margin:0;font-size:22px;font-weight:800;color:#1a1a1a;}
    .assessment-result-title{font-size:22px;font-weight:800;color:#1a1a1a;margin-bottom:8px;text-align:center;}
    .assessment-result-info-wrap{position:relative;display:inline-flex;align-items:center;flex-shrink:0;}
    .assessment-result-info-i{width:18px;height:18px;padding:0;border-radius:50%;border:1px solid rgba(0,0,0,.2);background:rgba(255,255,255,.85);color:#555;font-size:11px;font-weight:800;font-style:italic;line-height:1;cursor:help;display:inline-flex;align-items:center;justify-content:center;font-family:Georgia,'Times New Roman',serif;transition:background .15s,border-color .15s,color .15s;}
    .assessment-result-info-i:hover,.assessment-result-info-i:focus-visible{background:#1a1a1a;color:#fff;border-color:#1a1a1a;outline:none;}
    .assessment-result-info-popover{position:absolute;left:50%;transform:translateX(-50%);top:100%;margin-top:8px;width:min(320px,calc(100vw - 48px));padding:12px 14px;background:#1a1a1a;color:#fff;font-size:12px;font-weight:400;font-style:normal;line-height:1.5;text-align:left;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.25);visibility:hidden;opacity:0;transition:opacity .2s,visibility .2s;z-index:30;pointer-events:none;}
    .assessment-result-info-wrap:hover .assessment-result-info-popover,.assessment-result-info-wrap:focus-within .assessment-result-info-popover{visibility:visible;opacity:1;}
    .assessment-result-subtitle{font-size:13px;color:#666;margin-bottom:28px;text-align:center;}
    .assessment-evaluator-indicator{margin-top:24px;margin-bottom:8px;padding:12px 16px;background:#f5f5f5;border:1px solid #e8e8e8;border-radius:8px;font-size:11px;color:#666;text-align:center;}
    .assessment-evaluator-value-wrap{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;}
    .assessment-evaluator-value{font-weight:700;color:#444;font-size:13px;}
    .assessment-evaluator-value.indicator-green{color:#1e7a4a;}
    .assessment-evaluator-value.indicator-yellow{color:#9a7b0a;}
    .assessment-evaluator-value.indicator-orange{color:#c05621;}
    .assessment-evaluator-value.indicator-red{color:#b03030;}
    .assessment-indicator-explainer{margin:10px auto 0;font-size:11px;line-height:1.5;color:#888;max-width:520px;text-align:center;}
    .assessment-result-box{width:100%;background:#fff;border:1.5px solid #e0e0e0;border-radius:12px;padding:24px 28px;margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,0.04);}
    .assessment-result-box h3{font-size:14px;font-weight:800;color:#1a1a1a;margin-bottom:14px;display:flex;align-items:center;gap:8px;}
    .assessment-result-box h3.strengths{color:#27ae60;}
    .assessment-result-box h3.weaknesses{color:#c0392b;}
    .assessment-result-list{list-style:none;}
    .assessment-result-list li{font-size:13px;color:#444;padding:10px 0;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;gap:0;}
    .assessment-result-list li:last-child{border-bottom:none;}
    .assessment-result-list.clickable li{cursor:pointer;}
    .assessment-result-list.clickable li:hover{background:#f8f8f8;}
    .assessment-result-score{font-size:11px;font-weight:700;color:#888;margin-left:1.5em;}
    .assessment-result-box.strengths .assessment-result-score{color:#27ae60;}
    .assessment-result-box.weaknesses .assessment-result-score{color:#c0392b;}
    .assessment-result-list .assessment-result-ddi{font-size:11px;font-weight:700;min-width:28px;text-align:right;color:#1a1a1a;margin-left:auto;}
    .assessment-factor-breakdown{width:100%;background:#fff;border:1.5px solid #e0e0e0;border-radius:12px;padding:20px 24px;margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,0.04);}
    .assessment-factor-breakdown h3{font-size:13px;font-weight:800;color:#1a1a1a;margin-bottom:12px;}
    .assessment-factor-table{width:100%;border-collapse:collapse;font-size:12px;}
    .assessment-factor-table th{text-align:left;padding:8px 12px 6px 0;font-weight:700;color:#444;border-bottom:1px solid #eee;}
    .assessment-factor-table td{padding:8px 12px 8px 0;border-bottom:1px solid #f5f5f5;}
    .assessment-factor-table tr:last-child td{border-bottom:none;}
    .assessment-factor-table .col-strengths{color:#27ae60;font-weight:700;}
    .assessment-factor-table .col-weaknesses{color:#c0392b;font-weight:700;}
    .btn-back-home{margin-top:16px;padding:10px 24px;border-radius:6px;border:none;background:#1a1a1a;color:#fff;font-size:13px;font-weight:700;cursor:pointer;}
    .btn-back-home:hover{opacity:0.85;}
    #btn-start-new-assessment{margin-right:8px;}
    .assessment-result-buttons{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;}
    .assessment-result-buttons .btn-back-home{margin-top:16px;}

    /* CARD SORT PROFILE (Strengths / Neutral / Development areas) */
    .card-sort-profile-screen{position:fixed;inset:0;background:linear-gradient(180deg,#f8f9fa 0%,#eef0f2 100%);z-index:997;display:none;flex-direction:column;align-items:center;padding:32px 24px 48px;overflow-y:auto;}
    .card-sort-profile-screen.active{display:flex;}
    .interview-profile-screen{position:fixed;inset:0;background:linear-gradient(180deg,#f8f9fa 0%,#eef0f2 100%);z-index:997;display:none;flex-direction:column;align-items:center;padding:32px 24px 48px;overflow-y:auto;}
    .interview-profile-screen.active{display:flex;}
    .card-sort-profile-inner{max-width:620px;width:100%;}
    .card-sort-profile-title{font-size:22px;font-weight:800;color:#1a1a1a;margin-bottom:8px;text-align:center;}
    .card-sort-profile-subtitle{font-size:13px;color:#666;margin-bottom:28px;text-align:center;}
    .card-sort-profile-box{width:100%;background:#fff;border:1.5px solid #e0e0e0;border-radius:12px;padding:24px 28px;margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,0.04);--version-history-label:#8a8a8a;}
    .card-sort-profile-box h3{font-size:14px;font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:8px;}
    .card-sort-profile-box.strengths h3{color:#27ae60;}
    .card-sort-profile-box.neutral h3{color:#666;}
    .card-sort-profile-box.development h3{color:#c0392b;}
    .card-sort-profile-list{list-style:none;}
    .card-sort-profile-list li{font-size:13px;color:#444;padding:10px 0;border-bottom:1px solid #f0f0f0;display:flex;justify-content:space-between;align-items:center;gap:12px;}
    .card-sort-profile-list li:last-child{border-bottom:none;}
    .card-sort-profile-ddi-label{font-size:11px;color:#888;margin-bottom:6px;text-align:right;}
    .card-sort-profile-ddi{font-size:11px;font-weight:700;min-width:28px;text-align:right;color:#1a1a1a;}
    .card-sort-profile-list.development-clickable li{cursor:pointer;}
    .card-sort-profile-list.development-clickable li:hover{background:#f8f8f8;}
    .success-profile-view-header-bar{width:100%;max-width:620px;display:flex;justify-content:flex-end;align-items:center;margin-bottom:8px;padding:0 4px;box-sizing:border-box;}
    /* Volle Viewport-Breite + ganz oben wie .top-bar: Screen hat 32px Top- und 24px Seitenpadding —
       alle drei negativ ausgleichen damit der Home-Btn an derselben Position landet wie im
       Interview-Guide-Hub (rechts 28px, oben innerhalb der 10px-Padding-Zeile). width:auto +
       align-self:stretch verhindert den Konflikt mit dem geerbten width:100%. */
    #success-profile-view-screen > .success-profile-view-header-bar{align-self:stretch;width:auto;max-width:none;margin-top:-32px;margin-left:-24px;margin-right:-24px;padding:10px 28px;}
    .success-profile-view-header-spacer{flex:1;min-width:0;}
    .success-profile-position-new-wrap{margin-top:12px;padding:14px 16px;background:#fff;border:1.5px solid #e0e0e0;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.04);}
    .success-profile-position-new-hint{font-size:12px;color:#888;margin:0 0 10px;}
    .success-profile-position-new-wrap .start-input{width:100%;box-sizing:border-box;margin-bottom:10px;}
    .success-profile-position-my-label{font-size:12px;font-weight:700;color:#555;margin:18px 0 8px;}
    .success-profile-position-my-list{width:100%;}
    .success-profile-position-my-list-msg{font-size:13px;color:#888;margin:0;}
    .success-profile-position-my-list-msg--err{color:#c00;}
    .success-profile-view-list-wrap{width:100%;background:#fff;border:1.5px solid #e0e0e0;border-radius:12px;padding:24px 28px;margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,0.04);--version-history-label:#8a8a8a;}
    .success-profile-view-dimension-root{width:100%;}
    .success-profile-view-dimension-group + .success-profile-view-dimension-group{margin-top:18px;}
    .success-profile-view-dimension-title{
      font-size:10px;
      font-weight:700;
      letter-spacing:0.12em;
      text-transform:uppercase;
      color:var(--version-history-label);
      text-align:left;
      padding:0 0 10px;
      margin:0;
      box-sizing:border-box;
    }
    .success-profile-view-dimension-group:first-child .success-profile-view-dimension-title{padding-top:2px;}
    .substitutes-overlay-list{list-style:none;}
    .substitutes-overlay-list li{font-size:13px;color:#444;padding:10px 0;border-bottom:1px solid #eee;}
    .substitutes-overlay-list li:last-child{border-bottom:none;}

    /* INTERVIEW GUIDE */
    /* Oberer Balken wie Experience Journal / Skill-Radar: kein helleres „Glas“, gleicher Screen-Hintergrund (#f5f5f5) */
    .interview-guide-screen > .top-bar{
      background:transparent;
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
      border-bottom:none;
      box-shadow:none;
    }
    .interview-guide-screen{position:fixed;inset:0;background:#f5f5f5;z-index:996;display:none;flex-direction:column;overflow:hidden;}
    .interview-guide-screen.active{display:flex;}
    .interview-guide-layout{display:flex;flex:1;min-height:0;width:100%;transition:all 0.25s ease;}
    .interview-guide-left{flex:1;min-width:0;display:flex;flex-direction:column;overflow-y:auto;padding:24px 24px 32px;transition:flex 0.25s ease;}
    .interview-guide-screen.has-detail .interview-guide-left{flex:0 0 42%;max-width:420px;}
    .interview-guide-inner{max-width:720px;width:100%;}
    .interview-guide-title{font-size:22px;font-weight:800;color:#1a1a1a;margin-bottom:8px;}
    .interview-guide-subtitle{font-size:12px;color:#888;margin-bottom:24px;}
    .interview-guide-competency{margin-bottom:24px;background:#fff;border:1.5px solid #e0e0e0;border-radius:12px;padding:20px 24px;box-shadow:0 2px 12px rgba(0,0,0,0.06);}
    .interview-guide-competency h4{font-size:15px;font-weight:800;color:#1a1a1a;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid #eee;}
    .interview-guide-competency h4 .comp-num{font-size:11px;color:#999;font-weight:700;margin-right:8px;}
    .interview-guide-questions{list-style:none;}
    .interview-guide-questions li{font-size:14px;color:#444;line-height:1.6;padding:10px 12px 10px 28px;position:relative;border-bottom:1px solid #f5f5f5;cursor:pointer;border-radius:6px;transition:background 0.15s;}
    .interview-guide-questions li:hover{background:#f0f0f0;}
    .interview-guide-questions li.selected{background:#e8e8e8;border-left:3px solid #1a1a1a;padding-left:25px;}
    .interview-guide-questions li:last-child{border-bottom:none;}
    .interview-guide-questions li::before{content:attr(data-num);position:absolute;left:10px;font-weight:700;color:#1a1a1a;font-size:12px;}
    /* Right panel: question detail + STAR sections */
    .interview-guide-right{flex:0 0 0;overflow:hidden;background:#fff;border-left:1px solid #e0e0e0;display:flex;flex-direction:column;transition:flex 0.25s ease;box-shadow:-4px 0 20px rgba(0,0,0,0.06);}
    .interview-guide-screen.has-detail .interview-guide-right{flex:1 1 58%;min-width:0;}
    .interview-guide-detail-inner{padding:24px 28px 32px;overflow-y:auto;flex:1;}
    .interview-guide-detail-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid #eee;}
    .interview-guide-detail-question{font-size:15px;font-weight:700;color:#1a1a1a;line-height:1.5;}
    .interview-guide-detail-close{flex-shrink:0;width:32px;height:32px;border:none;background:#f0f0f0;border-radius:6px;cursor:pointer;font-size:16px;color:#666;display:flex;align-items:center;justify-content:center;}
    .interview-guide-detail-close:hover{background:#e0e0e0;color:#1a1a1a;}
    .interview-guide-section{margin-bottom:24px;}
    .interview-guide-section-title{font-size:12px;font-weight:800;color:#1a1a1a;letter-spacing:0.5px;margin-bottom:6px;}
    .interview-guide-section-prompt{font-size:13px;color:#666;margin-bottom:8px;line-height:1.4;}
    .interview-guide-section textarea{width:100%;min-height:80px;max-height:320px;overflow-y:auto;padding:12px 14px;border:1.5px solid #e0e0e0;border-radius:8px;font-size:13px;font-family:inherit;color:#1a1a1a;resize:none;outline:none;transition:border-color 0.15s;box-sizing:border-box;}
    .interview-guide-section textarea:focus{border-color:#1a1a1a;}
    .interview-guide-section .interview-guide-text-field{
      width:100%;
      box-sizing:border-box;
      padding:12px 14px;
      border:1.5px solid #e0e0e0;
      border-radius:8px;
      font-size:13px;
      font-family:inherit;
      color:#1a1a1a;
      outline:none;
      transition:border-color 0.15s, background 0.15s;
    }
    .interview-guide-section .interview-guide-text-field::placeholder{color:#999;font-size:13px;}
    .interview-guide-section .interview-guide-text-field:focus{border-color:#1a1a1a;}
    .interview-guide-section .interview-guide-text-field--single{min-height:0;height:auto;}
    /* Overall rating */
    .interview-guide-rating{margin-top:28px;padding-top:24px;border-top:1px solid #e8e8e8;}
    .interview-guide-rating-title{font-size:12px;font-weight:800;color:#1a1a1a;letter-spacing:0.5px;margin-bottom:10px;}
    /* Segmented Control: 5 Buttons rendern als zusammenhängende Leiste.
       gap:0 + negative margin-left auf allen außer dem ersten lässt benachbarte
       Borders überlappen statt verdoppeln; nur erster/letzter Button bekommen
       die Außenradien. z-index hebt den aktiven Button visuell nach vorne. */
    .interview-guide-rating-options{display:flex;flex-wrap:wrap;gap:0;}
    .interview-guide-rating-btn{flex:1;min-width:120px;padding:10px 12px;border:1.5px solid #e0e0e0;border-radius:0;background:#fff;font-size:11px;font-weight:700;color:#444;cursor:pointer;transition:border-color 0.15s,background 0.15s;line-height:1.3;text-align:center;position:relative;}
    .interview-guide-rating-btn + .interview-guide-rating-btn{margin-left:-1.5px;}
    .interview-guide-rating-btn:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px;}
    .interview-guide-rating-btn:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px;}
    .interview-guide-rating-btn:hover{border-color:#1a1a1a;z-index:1;}
    .interview-guide-rating-btn.selected{border-color:#1a1a1a;background:#1a1a1a;color:#fff;z-index:2;}
    /* Selected + Hover: explizite höhere Spezifität (2 Klassen + 1 Pseudo) — sonst überschreibt
       der spätere Glass-Theme-:hover-Override den Selected-Background und der Text wird unlesbar. */
    .interview-guide-rating-btn.selected:hover{background:#000;color:#fff;border-color:#000;}
    /* No-evidence ist KEIN sechster Skalenwert: separates Element mit visuellem
       Bruch zur Skala, dezenter Checkbox-Stil. */
    .interview-guide-rating-options.disabled .interview-guide-rating-btn{opacity:0.4;cursor:not-allowed;}
    .interview-guide-rating-options.disabled .interview-guide-rating-btn:hover{border-color:#e0e0e0;}
    .interview-guide-no-evidence{margin-top:24px;display:flex;align-items:center;gap:8px;font-size:12px;color:#555;cursor:pointer;user-select:none;}
    .interview-guide-no-evidence-checkbox{width:14px;height:14px;cursor:pointer;accent-color:#1a1a1a;}
    .interview-guide-no-evidence-label{font-weight:600;}
    .interview-guide-no-evidence:hover .interview-guide-no-evidence-label{color:#1a1a1a;}
    /* 4. Bucket: Not assessable — visuell ruhig, gleiche Box-Struktur wie die anderen
       drei, aber gedämpfter (neutralgrauer Header, keine Strengths/Development-Akzentfarbe). */
    .card-sort-profile-box.not-assessable h3{color:#888;}
    @media print{.interview-guide-screen .top-bar,.interview-guide-screen .experience-journal-screen-top{display:none;}.interview-guide-screen{background:#fff;}.interview-guide-right{display:none !important;}.interview-guide-screen.has-detail .interview-guide-left{flex:1;max-width:none;}}

    /* SUCCESS PROFILES: two columns */
    .profile-area .cat-col{min-width:0;}
    .profile-col .cat-count.ok{background:#1a1a1a;color:#fff;}

    /* Toast notification (replaces alert for in-app messages) */
    .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);min-width:260px;max-width:90%;padding:14px 20px;border-radius:10px;background:#1a1a1a;color:#fff;font-size:13px;font-weight:600;text-align:center;box-shadow:0 6px 24px rgba(0,0,0,0.2);z-index:9999;opacity:0;transition:transform 0.25s ease,opacity 0.25s ease;pointer-events:none;}
    .toast.show{transform:translateX(-50%) translateY(0);opacity:1;}
    .toast.toast-error{background:#c0392b;}

    /* Compare: shared list + tab styles (reused by both picker overlays) */
    .compare-select-tabs{display:flex;gap:8px;margin-bottom:14px;}
    .compare-select-tab{padding:8px 14px;border-radius:6px;border:1.5px solid #e0e0e0;background:#fff;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;}
    .compare-select-tab:hover{border-color:#1a1a1a;}
    .compare-select-tab.selected{background:#1a1a1a;color:#fff;border-color:#1a1a1a;}
    /* Selected + Hover: dunklen Hintergrund + weiße Schrift behalten,
       sonst Weiß auf hellem Hover-Hintergrund (unleserlich). Specificity
       0,3,0 schlägt das Glass-Theme-Override .compare-select-tab:hover (0,2,0). */
    .compare-select-tab.selected:hover{background:#000 !important;color:#fff !important;border-color:#000 !important;}
    .compare-select-list{flex:1;min-height:160px;max-height:60vh;overflow-y:auto;list-style:none;margin:0;padding:0;}
    .compare-select-list li{padding:10px 12px;border-radius:8px;font-size:13px;cursor:pointer;transition:background 0.15s;}
    .compare-select-list li:hover{background:#f0f0f0;}
    .compare-select-list li.selected{background:#1a1a1a;color:#fff;}
    /* Selected + Hover: dunklen Hintergrund mit weißer Schrift behalten,
       sonst Weiß auf Hellgrau (unleserlich). */
    .compare-select-list li.selected:hover{background:#000;color:#fff;}
    .compare-select-list li.compare-select-subheading{font-weight:600;font-size:12px;color:#666;cursor:default;padding:10px 12px 4px;text-transform:uppercase;letter-spacing:.04em;}
    .compare-select-list li.compare-select-subheading:hover{background:transparent;}
    .compare-select-list li.compare-li-disabled{color:#bbb;cursor:not-allowed;pointer-events:none;}
    .compare-select-list li.compare-li-disabled:hover{background:transparent;}
    .compare-select-tab.compare-tab-disabled{opacity:.4;cursor:not-allowed;pointer-events:none;}

    /* Compare: top-bar "Choose profile" buttons (absolute-positioned at the
       horizontal centre of each half so they sit left/right of the centred
       "Compare" title without disturbing the existing home-button flex-end
       layout). Visually matched to the Skill-Radar "Show all" button (.export-btn
       + .skill-radar-toggle-all-btn): light translucent background, dark text,
       font-size 12px, padding 6px 14px, border-radius 8px. */
    .compare-choose-profile-btn{padding:6px 14px;border-radius:8px;border:1px solid rgba(0,0,0,.1);background:rgba(255,255,255,.7);color:#1a1a1a;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;width:auto;}
    .compare-choose-profile-btn:hover{background:rgba(255,255,255,.95);border-color:rgba(0,0,0,.18);}
    .compare-choose-profile-btn-top{position:absolute;top:50%;transform:translate(-50%,-50%);z-index:2;}
    .compare-choose-profile-btn-top-left{left:25%;}
    .compare-choose-profile-btn-top-right{left:75%;}

    /* Compare: picker overlays (one per side). Each overlay covers only its
       own bildschirmhälfte so both pickers can sit side by side simultaneously
       (left over the left half, right over the right half). The box is
       centered within its own half-backdrop. */
    .compare-picker-overlay{position:fixed;background:rgba(0,0,0,.4);z-index:998;display:none;padding:24px;box-sizing:border-box;}
    #compare-picker-overlay-left{inset:0 50% 0 0;}
    #compare-picker-overlay-right{inset:0 0 0 50%;}
    /* Solange die jeweilige Seite noch keine Auswahl hat (X versteckt), lässt
       der obere Streifen die Top-Leiste frei — damit ist der Home-Button oben
       rechts klickbar als einziger Exit-Pfad aus dem Initial-Zustand. */
    #compare-picker-overlay-left.compare-picker-allow-top-bar,
    #compare-picker-overlay-right.compare-picker-allow-top-bar{top:64px;}
    .compare-picker-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border:1.5px solid #e0e0e0;border-radius:12px;padding:40px 24px 20px;box-shadow:0 24px 80px rgba(0,0,0,0.18);width:min(540px,calc(100% - 48px));max-height:calc(100vh - 48px);display:flex;flex-direction:column;box-sizing:border-box;}
    .compare-picker-close-btn{position:absolute;top:10px;right:12px;width:32px;height:32px;border:none;background:transparent;font-size:24px;line-height:1;cursor:pointer;color:#666;}
    .compare-picker-close-btn:hover{color:#1a1a1a;}

    .compare-result-screen{position:fixed;inset:0;background:#f5f5f5;z-index:996;display:none;flex-direction:column;padding:0;}
    .compare-result-screen.active{display:flex;}
    .compare-result-body{flex:1;display:flex;min-height:0;overflow:hidden;}
    .compare-result-left{flex:1;overflow-y:auto;padding:24px;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;}
    .compare-result-right{flex:1;overflow-y:auto;padding:24px;background:#fafafa;display:flex;flex-direction:column;}
    .compare-result-left-inner,.compare-result-right-inner{max-width:520px;width:100%;margin:0 auto;flex:1;display:flex;flex-direction:column;}
    .compare-right-strength,.compare-left-strength{border:2px solid #27ae60 !important;background:#f0f9f4 !important;color:#1a5c34 !important;padding:8px 12px !important;margin:4px 0 !important;border-radius:6px !important;}
    .compare-right-development,.compare-left-development{border:2px solid #c0392b !important;background:#fdf2f2 !important;color:#a82828 !important;padding:8px 12px !important;margin:4px 0 !important;border-radius:6px !important;}
  .compare-result-footer{padding:16px 24px;background:#fff;border-top:1px solid #e0e0e0;display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;}
  .compare-result-footer[hidden]{display:none;}
  /* Footer-Buttons behalten die Farbe von .start-btn (dunkler Fill / weisser Text)
     bekommen aber die Grösse vom Skill-Radar "Show all"-Button. */
  .compare-result-footer .compare-btn-show-match,.compare-result-footer .compare-btn-ai-prompt{width:auto;flex:none;padding:6px 14px;font-size:12px;border-radius:8px;}

  /* Compare: View-Toggle (Split / Overview), oben rechts links neben dem Home-Button.
     Visuell ein dezenter Segmented-Switch in der gleichen Pill-Optik wie die
     .compare-choose-profile-btn / .export-btn / Skill-Radar-Show-all-Buttons. */
  .compare-view-toggle{display:inline-flex;align-items:center;gap:0;padding:2px;border:1px solid rgba(0,0,0,.1);background:rgba(255,255,255,.7);border-radius:10px;margin-right:8px;position:relative;z-index:2;}
  .compare-view-toggle-btn{padding:5px 12px;border-radius:8px;border:none;background:transparent;color:#555;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;}
  .compare-view-toggle-btn:hover{color:#1a1a1a;}
  .compare-view-toggle-btn.selected{background:#1a1a1a;color:#fff;}
  .compare-view-toggle-btn.selected:hover{background:#000;color:#fff;}

  /* Interview Guide Hub: full-page screen with toggle (Create new / Open existing),
     dynamic title and list. Wider central area replaces the old small popup. */
  .interview-guide-hub-screen{position:fixed;inset:0;z-index:998;background:transparent;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:0;}
  .interview-guide-hub-screen > .top-bar{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:none;position:relative;}
  .interview-guide-hub-screen > .top-bar .interview-guide-hub-toggle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;}
  .interview-guide-hub-screen > .top-bar > .export-btn{position:relative;z-index:2;margin-left:auto;}
  .interview-guide-hub-body{flex:1;min-height:0;display:flex;justify-content:center;align-items:flex-start;padding:32px 24px 64px;box-sizing:border-box;overflow-y:auto;width:100%;}
  .interview-guide-hub-inner{width:100%;max-width:540px;display:flex;flex-direction:column;align-items:center;}
  .interview-guide-hub-title{font-size:18px;font-weight:600;color:#1a1a1a;margin:0 0 18px 0;text-align:center;}
  .interview-guide-hub-list{width:100%;box-sizing:border-box;max-height:60vh;overflow-y:auto;}
  .interview-guide-hub-list .interview-guide-hub-subheading{font-size:12px;font-weight:700;color:#555;margin:18px 0 8px;}
  .interview-guide-hub-list .interview-guide-hub-subheading:first-child{margin-top:0;}
  .interview-guide-hub-row{padding:12px 14px;border:1px solid rgba(0,0,0,.06);border-radius:10px;background:rgba(255,255,255,.5);font-size:13px;font-weight:400;color:#1a1a1a;cursor:pointer;transition:background 0.15s,color 0.15s,border-color 0.15s;margin-bottom:8px;}
  .interview-guide-hub-row:last-child{margin-bottom:0;}
  .interview-guide-hub-row:hover{background:rgba(255,255,255,.85);border-color:rgba(0,0,0,.12);}
  .interview-guide-hub-row:active{background:#e5e5e5;}
  .interview-guide-hub-row:focus-visible{outline:2px solid #1a1a1a;outline-offset:2px;}
  .interview-guide-hub-empty{padding:16px;color:#888;font-size:13px;margin:0;text-align:center;}
  .interview-guide-hub-empty--err{color:#c00;}

  /* Candidate-Auswahl-Overlay (Interview Guide). Größer als die ursprüngliche
     start-box, enthält First+Last-Inputs + Add-Btn nebeneinander, darunter
     eine Liste der bestehenden Kandidaten im Tenant. */
  .interview-candidate-overlay{background:rgba(0,0,0,.45);z-index:1000;}
  .interview-candidate-box{position:relative;}
  .interview-candidate-box-wide{min-width:560px;max-width:680px;width:100%;align-items:stretch;gap:12px;}
  .interview-candidate-hint{font-size:12px;color:#666;margin:0 0 4px;text-align:center;}
  .interview-candidate-new-row{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap;}
  .interview-candidate-new-row .interview-candidate-name-input{flex:1 1 180px;min-width:0;padding:8px 12px;font-size:13px;}
  .interview-candidate-add-btn{flex:0 0 auto;padding:8px 18px;font-size:13px;font-weight:700;white-space:nowrap;width:auto;}
  /* Duplicate-Warning-Panel (Interview Guide) — visuell identisch zum Admin-
     Panel (#profile-history-external-invite-generated): helles Rot, dezenter
     Border, 14px Padding; Buttons im weißen Pill-Stil der .profile-history-
     admin-remove-btn (weiß / dunkler Text / 11px/700 / 8px Radius), Abstand
     zwischen msg und actions analog zum Admin-Panel via margin-top:10px auf
     der Actions-Reihe. */
  .interview-candidate-duplicate-panel{padding:12px 14px;border:1px solid rgba(0,0,0,.12);border-radius:8px;background:rgba(254,226,226,.7);font-size:14px;display:flex;flex-direction:column;}
  .interview-candidate-duplicate-msg{color:#1a1a1a;}
  .interview-candidate-duplicate-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px;}
  .interview-candidate-duplicate-use-btn,
  .interview-candidate-duplicate-new-btn,
  .interview-candidate-duplicate-cancel-btn{padding:6px 12px;border-radius:8px;border:1px solid rgba(0,0,0,.12);background:#fff;color:#1a1a1a;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;width:auto;}
  .interview-candidate-list-section{display:flex;flex-direction:column;gap:6px;margin-top:24px;}
  .interview-candidate-list-label{font-size:12px;font-weight:700;color:#555;margin:6px 0 4px;}
  .interview-candidate-list{display:flex;flex-direction:column;gap:6px;max-height:32vh;overflow-y:auto;}
  .interview-candidate-list-empty{font-size:13px;color:#888;padding:8px 4px;margin:0;text-align:center;}
  .interview-candidate-list-empty--err{color:#c00;}
  .interview-candidate-row{padding:10px 12px;border:1px solid rgba(0,0,0,.08);border-radius:8px;background:rgba(255,255,255,.6);font-size:13px;color:#1a1a1a;cursor:pointer;transition:background 0.15s,border-color 0.15s;}
  .interview-candidate-row:hover{background:rgba(255,255,255,.92);border-color:rgba(0,0,0,.16);}
  .interview-candidate-row:focus-visible{outline:2px solid #1a1a1a;outline-offset:2px;}
  .interview-candidate-close{position:absolute;top:10px;right:12px;background:transparent;border:none;font-size:20px;line-height:1;cursor:pointer;color:#1a1a1a;padding:4px 8px;border-radius:6px;}
  .interview-candidate-close:hover{background:rgba(0,0,0,.06);}
  .interview-candidate-close:focus-visible{outline:2px solid #1a1a1a;outline-offset:2px;}

  /* Compare-Overview: alternative compare view with framework grid */
  .compare-overview-screen{position:fixed;inset:0;background:transparent;z-index:996;display:none;flex-direction:column;padding:0;}
  .compare-overview-screen.active{display:flex;}
  .compare-overview-top{
    position:relative;display:flex;align-items:center;justify-content:flex-end;
    flex-shrink:0;min-height:48px;padding:10px 28px;box-sizing:border-box;
    background:transparent;border-bottom:none;z-index:20;
  }
  .compare-overview-top h1{
    position:absolute;left:50%;transform:translateX(-50%);
    margin:0;max-width:min(100% - 100px,92vw);text-align:center;pointer-events:none;
    z-index:1;font-size:18px;font-weight:800;color:#1a1a1a;letter-spacing:.5px;
  }
  .compare-overview-top .export-btn:has(.btn-nav-icon-svg){min-width:40px;width:auto;flex:0 0 auto;}
  .compare-overview-choose-btn{position:absolute;left:28px;top:50%;transform:translateY(-50%);z-index:2;}

  .compare-overview-scroll{flex:1;min-height:0;overflow-y:auto;padding:12px 20px 36px;box-sizing:border-box;}
  .compare-overview-grid{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;
    align-items:start;max-width:1440px;margin:0 auto;
  }
  .compare-overview-col{min-width:0;}
  .compare-overview-col-header{padding:8px 4px 12px;text-align:center;}
  .compare-overview-dim-title{display:block;font-size:11px;font-weight:800;color:#0d0d0d;letter-spacing:.35px;line-height:1.35;}
  .compare-overview-stack{display:flex;flex-direction:column;}

  /* Overschreibt das negative margin-bottom:-18px der .mini-card-Base-Regel,
     damit die Cards in dieser View tatsächlich Abstand haben — analog zum
     Framework-Overview-Stack. */
  .mini-card.compare-overview-mini-card{
    width:100%;box-sizing:border-box;position:relative;
    margin-bottom:14px;
    padding:10px 12px 12px;background:rgba(255,255,255,.7);
    border:1px solid rgba(255,255,255,.9);border-radius:14px;
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 8px 24px rgba(0,0,0,.07);
    backdrop-filter:blur(20px) saturate(1.35);-webkit-backdrop-filter:blur(20px) saturate(1.35);
    display:flex;flex-direction:column;gap:4px;
  }
  .mini-card.compare-overview-mini-card:last-child{margin-bottom:0;}
  .compare-overview-mini-card .mini-card-num{font-size:10px;font-weight:700;color:#8a8a8a;}
  .compare-overview-mini-card .mini-card-name{font-size:12px;font-weight:700;line-height:1.3;color:#1a1a1a;word-break:break-word;}

  /* Icon-Reihe unter Title: grüne (Strengths) zuerst, dann rote (Weaknesses).
     Feste min-height (= Icon-Höhe) reserviert den Platz auch wenn die Reihe
     leer ist — damit haben alle Cards in der Compare-Overview die gleiche Höhe. */
  .compare-overview-icon-row{display:flex;flex-wrap:wrap;gap:4px;min-height:22px;margin-top:2px;}

  .compare-overview-icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:22px;height:22px;border-radius:50%;
    font-size:9px;font-weight:800;color:#fff;letter-spacing:.02em;
    user-select:none;cursor:default;line-height:1;
  }
  .compare-overview-icon-strength{background:#27ae60;}
  .compare-overview-icon-weakness{background:#c0392b;}

  /* Im Karten-Overlay (geklickt aus Compare-Overview): rechtsbündig in der
     linken Hälfte, neben dem "Skilled"-/"Less Skilled"-Text. margin-left:auto
     schiebt im flex-Container der .card-section-title an den rechten Rand. */
  .compare-overview-overlay-icons{margin-left:auto;display:inline-flex;gap:4px;align-items:center;}
  .compare-overview-overlay-icons .compare-overview-icon{width:24px;height:24px;font-size:10px;}

  /* Multi-Select-Picker-Overlay: zentriert, Hint oben, Tabs, Liste mit Checkmark-rechts */
  .compare-overview-picker-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:998;display:none;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;}
  .compare-overview-picker-overlay[style*="display: flex"],
  .compare-overview-picker-overlay[style*="display:flex"]{display:flex;}
  .compare-overview-picker-box{
    position:relative;background:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.9);
    border-radius:20px;backdrop-filter:blur(24px);
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 24px 80px rgba(0,0,0,.18);
    padding:40px 24px 20px;width:min(540px,calc(100% - 48px));
    max-height:calc(100vh - 48px);display:flex;flex-direction:column;box-sizing:border-box;
  }
  .compare-overview-picker-hint{margin:0 0 12px;font-size:12px;color:#666;text-align:center;}
  /* Statisches "Card Sorts"-Label im Overview-Picker — visuell wie der frühere
     ausgewählte Tab, aber pointer-events:none macht es nicht-klickbar und
     verhindert Hover-State (es gibt nur eine Datenquelle, kein echter Tab). */
  .compare-overview-static-tab{pointer-events:none;cursor:default;}

  /* List-Items mit Checkmark rechts + Multi-Select-Färbung. Eigene Klassen statt
     .selected-Suffix, damit die Tab-Hover-Regeln aus .compare-select-list nicht
     stören (sind für single-select gemacht). */
  .compare-overview-list li{position:relative;padding-right:32px;}
  .compare-overview-list-label{display:inline-block;}
  .compare-overview-list-check{
    position:absolute;right:12px;top:50%;transform:translateY(-50%);
    font-size:14px;font-weight:800;opacity:0;color:#1a1a1a;
  }
  .compare-overview-list li.compare-overview-li-selected{background:rgba(0,0,0,.08);color:#1a1a1a;}
  .compare-overview-list li.compare-overview-li-selected:hover{background:rgba(0,0,0,.12);color:#1a1a1a;}
  .compare-overview-list li.compare-overview-li-selected .compare-overview-list-check{opacity:1;}
  .compare-overview-list li.compare-overview-li-disabled{opacity:.4;cursor:not-allowed;pointer-events:none;}
  .compare-overview-list li.compare-overview-li-disabled:hover{background:transparent;}

  /* NEW DESIGN OVERRIDES: remaining screens */
  .profile-name-screen-layout{display:flex;gap:24px;max-width:840px;width:100%;align-items:stretch;}
  .profile-name-screen-left{background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9);border-radius:20px;backdrop-filter:blur(24px);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 12px 40px rgba(0,0,0,.07);}
  .profile-name-screen-right{background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9);border-radius:20px;backdrop-filter:blur(24px);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 12px 40px rgba(0,0,0,.07);}
  .profile-name-screen-item{border:1px solid rgba(0,0,0,.06);border-radius:10px;background:rgba(255,255,255,.5);}
  .profile-name-screen-item:hover{background:rgba(255,255,255,.85);border-color:rgba(0,0,0,.12);}
  .profile-name-screen-item.selected:hover,
  .profile-name-screen-item.selected:active{background:#1a1a1a;color:#fff;border-color:#1a1a1a;}
  .variant-btn{border-radius:12px;border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.65);backdrop-filter:blur(12px);}
  .variant-btn:hover{border-color:rgba(0,0,0,.18);background:rgba(255,255,255,.92);box-shadow:0 4px 16px rgba(0,0,0,.06);}

  .assessment-question-screen{background:transparent;}
  .assessment-progress-text{color:#aaa;}
  .assessment-progress-bar-wrap{height:4px;background:rgba(0,0,0,.08);border-radius:2px;}
  .assessment-progress-bar-fill{border-radius:2px;}
  .assessment-prompt{color:#0d0d0d;}
  .assessment-choice-btn{border-radius:14px;border:1px solid rgba(255,255,255,.88);background:rgba(255,255,255,.58);backdrop-filter:blur(16px);}
  .assessment-choice-btn:hover:not(:disabled){border-color:rgba(0,0,0,.14);background:rgba(255,255,255,.86);transform:translateY(-1px);}
  .assessment-back-below{border-radius:8px;border:1px solid rgba(0,0,0,.1);background:rgba(255,255,255,.62);backdrop-filter:blur(8px);}
  .assessment-back-below:hover:not(:disabled){background:rgba(255,255,255,.9);}

  .assessment-result-screen,.card-sort-profile-screen,.interview-profile-screen{background:transparent;}
  .assessment-result-title,.card-sort-profile-title{color:#0d0d0d;}
  .assessment-result-info-i{background:rgba(255,255,255,.55);border-color:rgba(0,0,0,.12);color:#606060;}
  .assessment-result-info-i:hover,.assessment-result-info-i:focus-visible{background:rgba(26,26,26,.9);color:#fff;border-color:rgba(0,0,0,.2);}
  .assessment-result-info-popover{background:rgba(26,26,26,.94);backdrop-filter:blur(8px);}
  .assessment-result-subtitle,.card-sort-profile-subtitle{color:#707070;}
  .assessment-result-box,.card-sort-profile-box,.success-profile-view-list-wrap,.assessment-factor-breakdown{background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9);border-radius:16px;backdrop-filter:blur(20px) saturate(1.2);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 4px 20px rgba(0,0,0,.06);}
  .assessment-result-list li,.card-sort-profile-list li{border-bottom:1px solid rgba(0,0,0,.05);}
  .assessment-result-list.clickable li:hover,.card-sort-profile-list.development-clickable li:hover{background:rgba(255,255,255,.7);}
  .assessment-result-score,.card-sort-profile-ddi-label{color:#767676;}
  .assessment-factor-table th{color:#aaa;border-bottom:1px solid rgba(0,0,0,.07);}
  .assessment-factor-table td{border-bottom:1px solid rgba(0,0,0,.04);}
  .assessment-evaluator-indicator{background:rgba(255,255,255,.5);border:1px solid rgba(0,0,0,.05);color:#707070;}
  .assessment-evaluator-value{color:#5f5f5f;}
  .assessment-evaluator-value.indicator-green{color:#2d9d5e;}
  .assessment-evaluator-value.indicator-yellow{color:#c9a227;}
  .assessment-evaluator-value.indicator-orange{color:#e07a3a;}
  .assessment-evaluator-value.indicator-red{color:#e05555;}
  .assessment-indicator-explainer{color:#909090;}

  .interview-guide-screen{background:transparent;}
  .interview-guide-left{background:rgba(248,246,242,.6);backdrop-filter:blur(8px);}
  .interview-guide-subtitle{color:#777;}
  .interview-guide-competency{background:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.9);border-radius:14px;backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 4px 14px rgba(0,0,0,.05);}
  .interview-guide-competency h4{color:#0d0d0d;border-bottom:1px solid rgba(0,0,0,.06);}
  .interview-guide-competency h4 .comp-num{color:#8a8a8a;}
  .interview-guide-questions li{border-bottom:1px solid rgba(0,0,0,.05);border-radius:8px;}
  .interview-guide-questions li:hover{background:rgba(255,255,255,.7);}
  .interview-guide-questions li.selected{background:rgba(255,255,255,.88);border-left:2px solid #1a1a1a;padding-left:24px;}
  .interview-guide-questions li::before{color:#888;}
  .interview-guide-right{background:rgba(255,255,255,.75);border-left:1px solid rgba(0,0,0,.06);backdrop-filter:blur(20px);box-shadow:-4px 0 20px rgba(0,0,0,.04);}
  .interview-guide-detail-header{border-bottom:1px solid rgba(0,0,0,.06);}
  .interview-guide-detail-question{color:#0d0d0d;}
  .interview-guide-detail-close{border:1px solid rgba(0,0,0,.08);background:rgba(240,237,232,.6);color:#707070;}
  .interview-guide-detail-close:hover{background:rgba(240,237,232,.95);color:#1a1a1a;}
  .interview-guide-section-title{text-transform:uppercase;}
  .interview-guide-section-prompt{color:#707070;}
  .interview-guide-section textarea{border:1px solid rgba(0,0,0,.08);border-radius:10px;background:rgba(248,246,242,.7);backdrop-filter:blur(6px);}
  .interview-guide-section textarea:focus{border-color:rgba(0,0,0,.22);background:#fff;}
  .interview-guide-section .interview-guide-text-field{border:1px solid rgba(0,0,0,.08);border-radius:10px;background:rgba(248,246,242,.7);backdrop-filter:blur(6px);}
  .interview-guide-section .interview-guide-text-field:focus{border-color:rgba(0,0,0,.22);background:#fff;}
  .interview-guide-rating{border-top:1px solid rgba(0,0,0,.06);}
  .interview-guide-rating-title{text-transform:uppercase;}
  .interview-guide-rating-btn{border:1px solid rgba(0,0,0,.08);border-radius:0;background:rgba(255,255,255,.6);color:#5f5f5f;}
  .interview-guide-rating-btn + .interview-guide-rating-btn{margin-left:-1px;}
  .interview-guide-rating-btn:first-child{border-top-left-radius:10px;border-bottom-left-radius:10px;}
  .interview-guide-rating-btn:last-child{border-top-right-radius:10px;border-bottom-right-radius:10px;}
  .interview-guide-rating-btn:hover{border-color:rgba(0,0,0,.16);background:rgba(255,255,255,.92);}

  .compare-result-screen{background:transparent;}
  .compare-result-top h1,
  .skill-radar-screen-title{color:#0d0d0d;}
  /* Glass-Theme: Picker-Overlay-Karte hat dieselbe Glas-Optik wie zuvor die Panels. */
  .compare-picker-box{background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);border-radius:20px;backdrop-filter:blur(24px);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 24px 80px rgba(0,0,0,.12);}
  .compare-select-tab{padding:7px 12px;border-radius:8px;border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.6);color:#777;}
  .compare-select-tab:hover{border-color:rgba(0,0,0,.16);background:rgba(255,255,255,.9);}
  .compare-select-list li{color:#444;}
  .compare-select-list li:hover{background:rgba(255,255,255,.72);}
  .compare-select-list li.compare-select-subheading{color:#666;}
  .compare-select-list li.compare-select-subheading:hover{background:transparent;}
  .compare-result-left{border-right:1px solid rgba(0,0,0,.06);}
  .compare-result-right{background:rgba(248,246,242,.45);}
  .compare-right-strength,.compare-left-strength{background:rgba(39,174,96,.06) !important;border-radius:8px !important;}
  .compare-right-development,.compare-left-development{background:rgba(192,57,43,.06) !important;border-radius:8px !important;}
  .compare-result-footer{padding:14px 24px;background:rgba(255,255,255,.75);backdrop-filter:blur(20px);border-top:1px solid rgba(0,0,0,.06);}

  .toast{padding:12px 20px;border-radius:12px;background:rgba(26,26,26,.9);backdrop-filter:blur(12px);box-shadow:0 8px 30px rgba(0,0,0,.2);}
  .toast.toast-error{background:rgba(192,57,43,.92);}
  .substitutes-overlay-list li{border-bottom:1px solid rgba(0,0,0,.06);}
  #data-loading{background:transparent !important;}
  #data-loading .data-loading-center{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;}
  #data-loading .data-loading-logo-wrap{margin-bottom:0;display:flex;justify-content:center;align-items:center;width:100%;box-sizing:border-box;}
  #data-loading .data-loading-logo-svg{display:block;height:auto;max-width:100%;}
  /* viewBox ist tight auf die Tinte (Pure 161.244 wide, Union 174.514 wide).
     Sichtbare Tinten-Breite ist die Box-Breite — keine optische Mitte-Korrektur mehr nötig. */
  #data-loading .data-loading-logo-puregrowth{width:min(53vw,322px);}
  #data-loading .data-loading-logo-union{width:min(52vw,315px);display:none;}
  html[data-app-edition="union"] #data-loading .data-loading-logo-puregrowth{display:none !important;}
  html[data-app-edition="union"] #data-loading .data-loading-logo-union{display:block !important;}
  html[data-app-edition="puregrowth"] #data-loading .data-loading-logo-union{display:none !important;}
  html[data-app-edition="puregrowth"] #data-loading .data-loading-logo-puregrowth{display:block !important;}
  html:not([data-app-edition]) #data-loading .data-loading-logo-union{display:none !important;}
  html:not([data-app-edition]) #data-loading .data-loading-logo-puregrowth{display:block !important;}
  #data-loading .data-loading-action-slot{
    position:absolute;left:50%;transform:translateX(-50%);bottom:118px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
    min-height:44px;
  }
  #data-loading #data-loading-message{
    margin:0;font-size:14px;color:#aaa;line-height:1.35;
    text-align:center;word-wrap:break-word;overflow-wrap:break-word;
    max-width:min(92vw,280px);
  }
  #data-loading #data-loading-message.data-loading-message-magic-sent{
    color:#0d0d0d;
  }
  #data-loading .startup-magic-link-wrap{
    display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:280px;
  }
  #data-loading .startup-magic-email{width:100%;max-width:260px;box-sizing:border-box;}
  /* Pure Growth (Magic Link): Hinweistext darf breit bleiben; E-Mail ca. 1/3 schmaler als früher volle 560px; Button nur Textbreite. */
  html[data-app-edition="puregrowth"] #data-loading .data-loading-action-slot{
    align-items:center;width:min(92vw,560px);max-width:100%;box-sizing:border-box;
  }
  html[data-app-edition="puregrowth"] #data-loading #data-loading-message{max-width:100%;}
  html[data-app-edition="puregrowth"] #data-loading .startup-magic-link-wrap{
    align-items:center;max-width:min(calc(92vw * 2 / 3),373px);width:100%;box-sizing:border-box;
  }
  html[data-app-edition="puregrowth"] #data-loading .startup-magic-email{
    width:100%;max-width:100%;box-sizing:border-box;
  }
  html[data-app-edition="puregrowth"] #data-loading #startup-magic-primary-btn{
    width:auto;min-width:0;align-self:center;flex-shrink:0;padding-left:18px;padding-right:18px;box-sizing:border-box;
  }
  #data-loading .startup-magic-form{
    display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%;max-width:260px;
  }
  html[data-app-edition="puregrowth"] #data-loading .startup-magic-form{
    max-width:100%;
  }
  html[data-app-edition="puregrowth"] #data-loading .startup-pure-password-field{
    display:flex;width:100%;max-width:100%;box-sizing:border-box;
  }
  #data-loading .startup-magic-hint-line{
    margin:0;font-size:14px;line-height:1.35;text-align:center;color:#0d0d0d;max-width:100%;
  }
  #data-loading .startup-magic-hint-line--hidden{
    visibility:hidden;
  }
  #data-loading .startup-magic-form .start-input{
    text-align:left;font-size:14px;font-family:inherit;width:100%;box-sizing:border-box;
  }
  #data-loading .startup-forgot-password-btn{
    margin:2px 0 0;padding:0;border:none;background:none;font-size:13px;color:#333;text-decoration:none;cursor:pointer;align-self:center;font-family:inherit;
  }
  #data-loading .startup-forgot-password-btn:hover{color:#000;}
  #data-loading .startup-forgot-password-btn:disabled{opacity:0.55;cursor:wait;}
  #data-loading .startup-password-recovery-wrap{
    display:none;flex-direction:column;align-items:stretch;gap:10px;width:100%;max-width:320px;margin-top:4px;
  }
  html[data-app-edition="puregrowth"] #data-loading .startup-password-recovery-wrap{max-width:100%;}
  #data-loading .startup-recovery-intro{margin:0;font-size:14px;line-height:1.4;color:#222;text-align:center;}

  /* ======================================================================
   * Home-Module FOUC-Schutz
   * ----------------------------------------------------------------------
   * Module, die durch Home-Modules-Visibility-Einstellungen gefiltert
   * werden, bleiben verborgen, bis applyHomeModuleVisibility() gelaufen ist
   * und das Body-Attribut data-home-modules-applied="true" setzt.
   * Vermeidet, dass ein normaler User alle Module für ~100-300ms zu sehen
   * bekommt, bevor das JS sie ausblendet.
   * ====================================================================== */
  body:not([data-home-modules-applied="true"]) #home-btn-self-assessment,
  body:not([data-home-modules-applied="true"]) #home-btn-skill-profile,
  body:not([data-home-modules-applied="true"]) #home-btn-skill-radar,
  body:not([data-home-modules-applied="true"]) #home-btn-task-profile,
  body:not([data-home-modules-applied="true"]) #home-btn-task-redesign,
  body:not([data-home-modules-applied="true"]) #home-btn-capability-profile,
  body:not([data-home-modules-applied="true"]) #home-btn-my-job,
  body:not([data-home-modules-applied="true"]) #home-btn-growth-job-doability{
    display:none !important;
  }

  /* ======================================================================
   * Home-Screen Initial-Reveal-Gate
   * ----------------------------------------------------------------------
   * Bis Visibility-Settings und Avatar-Initialen geladen sind, bleiben die
   * Modul-Buttons in den Karten und die Top-Right-Buttons (Framework +
   * Avatar) unsichtbar UND nicht klickbar. Verhindert, dass ein Klick
   * während des Boots eine Screen öffnet und der Home-Screen danach noch
   * als zweite Ebene dahinter erscheint. Layout bleibt stabil (opacity
   * statt display:none → kein Sprung beim Einblenden).
   * ====================================================================== */
  body:not([data-app-ready="true"]) #home-screen .home-module-btn,
  body:not([data-app-ready="true"]) #home-screen .home-header-right{
    opacity:0;
    pointer-events:none;
  }

  /* ======================================================================
   * Admin Impersonation — Sticky-Banner + Read-only-Mode
   * ====================================================================== */
  #admin-impersonation-banner{
    display:none;
    position:fixed;top:0;left:0;right:0;
    align-items:center;justify-content:space-between;gap:14px;
    padding:10px 18px;
    background:linear-gradient(90deg,#b91c1c,#dc2626);
    color:#fff;font-size:13px;font-weight:600;letter-spacing:.2px;
    box-shadow:0 2px 12px rgba(0,0,0,.18);
    z-index:9999999;
  }
  body[data-impersonating="true"] #admin-impersonation-banner{display:flex;}
  body[data-impersonating="true"]{padding-top:48px;}
  /* Alle fixed-positionierten Top-Level-Screens bekommen top:48px statt 0,
     damit der Sticky-Banner nicht über deren Top-Buttons liegt. */
  body[data-impersonating="true"] .start-screen,
  body[data-impersonating="true"] .home-screen,
  body[data-impersonating="true"] .card-sort-profile-screen,
  body[data-impersonating="true"] .interview-profile-screen,
  body[data-impersonating="true"] .assessment-question-screen,
  body[data-impersonating="true"] .assessment-result-screen,
  body[data-impersonating="true"] .interview-guide-screen,
  body[data-impersonating="true"] .compare-result-screen,
  body[data-impersonating="true"] #login-screen,
  body[data-impersonating="true"] #data-loading{top:48px;}
  .admin-impersonation-banner-icon{font-size:16px;}
  .admin-impersonation-banner-text{flex:1;min-width:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
  .admin-impersonation-banner-expires{opacity:.85;font-weight:500;}
  #admin-impersonation-banner-stop{
    background:rgba(255,255,255,.18);
    color:#fff;
    border:1px solid rgba(255,255,255,.45);
    border-radius:6px;
    padding:6px 14px;
    font-size:12px;font-weight:700;
    cursor:pointer;
    transition:background .12s ease;
  }
  #admin-impersonation-banner-stop:hover{background:rgba(255,255,255,.32);}
  #admin-impersonation-banner-stop:focus-visible{outline:2px solid #fff;outline-offset:2px;}

  /* Voll-Impersonation: keine generelle Read-only-Sperre mehr — der Super-Admin
     agiert exakt wie der Ziel-User. Lediglich der Logout-Button bleibt
     deaktiviert, damit ein Klick darauf die Impersonation-Session nicht
     versehentlich invalidiert (würde die Original-Admin-Session aus
     localStorage nicht restoren). Wer „raus" will, nutzt den Stop-Button
     im roten Banner oben. */
  body[data-impersonating="true"] .profile-history-logout-btn{
    pointer-events:none !important;
    opacity:.45 !important;
    cursor:not-allowed !important;
    filter:saturate(.6);
  }

  /* ======================================================================
   * Admin-User-Liste — Icon-Buttons (Export / Impersonate)
   * ====================================================================== */
  .profile-history-admin-remove-btn.profile-history-admin-icon-btn{
    padding:6px 8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    min-width:30px;
  }
  .profile-history-admin-icon-svg{
    width:16px;
    height:16px;
    display:block;
    color:inherit;
  }
  .profile-history-admin-remove-btn.profile-history-admin-icon-btn:disabled,
  .profile-history-admin-remove-btn.profile-history-admin-icon-btn[disabled]{
    opacity:.45;
    cursor:not-allowed;
  }
  /* Impersonate-Button: gleiche Optik wie Export (white/neutral). Spacing
     kommt einheitlich vom flex gap des Action-Containers — kein zusätzlicher
     margin-left, damit Export/Impersonate/Eye-Buttons im gleichen Abstand
     stehen wie Capability-Profile→Export. */
  .profile-history-admin-remove-btn.profile-history-impersonate-btn:hover:not(:disabled):not([disabled]){
    background:#f5f5f5;
  }
  #profile-history-impersonate-confirm-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;
    align-items:center;justify-content:center;z-index:9999998;
  }
  #profile-history-impersonate-confirm-overlay.is-shown{display:flex;}
  .profile-history-impersonate-confirm-panel{
    background:#fff;border-radius:12px;padding:22px 26px;width:min(540px,92vw);
    display:flex;flex-direction:column;gap:14px;
    box-shadow:0 12px 40px rgba(0,0,0,.25);
  }
  .profile-history-impersonate-confirm-title{
    font-size:17px;font-weight:800;color:#1a1a1a;margin:0;
  }
  .profile-history-impersonate-confirm-lead{
    font-size:13px;color:#444;margin:0;
  }
  .profile-history-impersonate-confirm-target{
    background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.08);border-radius:8px;
    padding:10px 12px;display:flex;flex-direction:column;gap:2px;
  }
  .profile-history-impersonate-confirm-target strong{
    font-size:14px;font-weight:800;color:#1a1a1a;
  }
  .profile-history-impersonate-confirm-target span{
    font-size:12px;color:#666;
  }
  .profile-history-impersonate-confirm-bullets{
    font-size:12px;color:#555;list-style:disc;padding-left:18px;line-height:1.7;margin:0;
  }
  .profile-history-impersonate-confirm-actions{
    display:flex;justify-content:flex-end;gap:10px;
  }
  .profile-history-impersonate-confirm-actions button{
    font-family:inherit;padding:9px 16px;border-radius:7px;border:none;cursor:pointer;
    font-size:13px;font-weight:700;
  }
  .profile-history-impersonate-cancel-btn{background:#e5e7eb;color:#1a1a1a;}
  .profile-history-impersonate-cancel-btn:hover{background:#d1d5db;}
  .profile-history-impersonate-start-btn{background:#dc2626;color:#fff;}
  .profile-history-impersonate-start-btn:hover{background:#b91c1c;}
  .profile-history-impersonate-start-btn:disabled{opacity:.55;cursor:not-allowed;}

  /* Assign-Position-Overlay (Union Admin Bulk-Mapping) */
  #profile-history-assign-position-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;
    align-items:center;justify-content:center;z-index:9999998;
  }
  #profile-history-assign-position-overlay.is-shown{display:flex;}
  .profile-history-assign-position-panel{
    background:#fff;border-radius:12px;padding:22px 26px;width:min(480px,92vw);
    display:flex;flex-direction:column;gap:12px;
    box-shadow:0 12px 40px rgba(0,0,0,.25);
  }
  .profile-history-assign-position-title{
    font-size:17px;font-weight:800;color:#1a1a1a;margin:0;
  }
  .profile-history-assign-position-lead{
    font-size:13px;color:#444;margin:0;
  }
  .profile-history-assign-position-target{
    background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.08);border-radius:8px;
    padding:10px 12px;font-size:13px;color:#1a1a1a;
  }
  .profile-history-assign-position-label{
    font-size:11px;font-weight:700;color:#555;letter-spacing:.4px;text-transform:uppercase;margin:0;
  }
  .profile-history-assign-position-select{
    padding:8px 10px;border:1px solid #ccc;border-radius:6px;font-size:13px;
    font-family:inherit;background:#fff;color:#1a1a1a;
  }
  .profile-history-assign-position-select:focus{outline:none;border-color:#1a1a1a;}
  .profile-history-assign-position-actions{
    display:flex;justify-content:flex-end;gap:10px;margin-top:4px;
  }
  .profile-history-assign-position-actions button{
    font-family:inherit;padding:9px 16px;border-radius:7px;border:none;cursor:pointer;
    font-size:13px;font-weight:700;
  }
  .profile-history-assign-position-cancel-btn{background:#e5e7eb;color:#1a1a1a;}
  .profile-history-assign-position-cancel-btn:hover{background:#d1d5db;}
  .profile-history-assign-position-submit-btn{background:#1a1a1a;color:#fff;}
  .profile-history-assign-position-submit-btn:hover{background:#000;}
  .profile-history-assign-position-submit-btn:disabled{opacity:.55;cursor:not-allowed;}

  /* Framework Overview: Actions row (Development Resources button) */
  .framework-overview-actions-row{display:flex;justify-content:center;padding:18px 24px 12px;}
  /* Development-Resources-Button auf gleiche Höhe wie Home-Button und
     Sprach-Buttons im Header (40px). Show/Hide-Leadership-Toggle bleibt
     unangetastet. */
  .framework-overview-actions-row #development-resources-button{
    height:40px;min-height:0;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;line-height:1;
  }

  /* Development Resources Screen — Drei-Spalten-Layout */
  .development-resources-layout{display:flex;flex:1;min-height:0;width:100%;background:transparent;}
  .development-resources-col{display:flex;flex-direction:column;overflow-y:auto;border-right:1px solid rgba(0,0,0,.06);}
  .development-resources-col:last-child{border-right:none;}
  .development-resources-col-inner{padding:24px 24px 32px;flex:1;}
  .development-resources-col-left{flex:0 0 21%;min-width:200px;background:rgba(248,246,242,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
  .development-resources-col-mid{flex:0 0 26%;min-width:220px;background:rgba(248,246,242,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
  .development-resources-col-right{flex:1 1 auto;min-width:0;background:rgba(255,255,255,.55);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}
  .development-resources-col-right .development-resources-col-inner{max-width:880px;margin:0 auto;padding-left:48px;padding-right:48px;}

  /* Linke Spalte: Kompetenzen, gruppiert nach Dimension */
  .development-resources-list{display:flex;flex-direction:column;gap:18px;}
  .development-resources-dim-title{font-size:11px;font-weight:700;color:#555;letter-spacing:0.4px;text-transform:uppercase;margin-bottom:8px;}
  .development-resources-dim-list{display:flex;flex-direction:column;gap:4px;}
  .development-resources-comp-item{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border:1px solid transparent;border-radius:8px;background:transparent;cursor:pointer;text-align:left;font:inherit;color:#1a1a1a;transition:background 0.12s ease, border-color 0.12s ease;}
  .development-resources-comp-item:hover{background:rgba(255,255,255,.7);border-color:#e5e7eb;}
  .development-resources-comp-item.is-selected{background:#1a1a1a;border-color:#1a1a1a;color:#fff;}
  .development-resources-comp-num{flex:0 0 auto;font-size:11px;font-weight:700;color:#888;min-width:22px;}
  .development-resources-comp-item.is-selected .development-resources-comp-num{color:#cbd5e1;}
  .development-resources-comp-name{font-size:13px;font-weight:600;line-height:1.35;}

  /* Mittlere Spalte: Bereich-Buttons */
  .development-resources-section-list{display:flex;flex-direction:column;gap:8px;}
  .development-resources-section-item{padding:12px 14px;border:1px solid rgba(0,0,0,.06);border-radius:10px;background:rgba(255,255,255,.5);cursor:pointer;text-align:left;font:inherit;font-size:13px;font-weight:600;color:#1a1a1a;line-height:1.4;transition:background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;}
  .development-resources-section-item:hover{background:rgba(255,255,255,.85);border-color:rgba(0,0,0,.12);}
  .development-resources-section-item.is-selected{background:#1a1a1a;border-color:#1a1a1a;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.08);}

  /* Rechte Spalte: Inhaltsliste */
  .development-resources-content-intro{margin:0 0 16px;padding:12px 14px;background:#fff;border-left:3px solid rgba(26,26,26,.14);border-radius:4px;font-size:13px;line-height:1.55;color:#374151;font-style:italic;}
  .development-resources-content-list{margin:0 0 0 1.25em;padding:0;color:#1a1a1a;font-size:14px;line-height:1.6;}
  .development-resources-content-list li{margin-bottom:0.85em;}
  .development-resources-content-list li:last-child{margin-bottom:0;}
  .development-resources-content-list-bullet{list-style:disc;}
  .development-resources-content-list-numbered{list-style:decimal;}

  @media (max-width:900px){
    .development-resources-layout{flex-direction:column;overflow-y:auto;}
    .development-resources-col{flex:0 0 auto;border-right:none;border-bottom:1px solid #e5e7eb;}
    .development-resources-col-left,.development-resources-col-mid,.development-resources-col-right{min-width:0;width:100%;}
  }

  /* Experience Journal: Sektionen, die nur im 'design'-Modus relevant sind
     (How have you seen…?, When do you expect…?, 'After the Experience'-
     Title, 'Mark as completed'-Button), werden im 'record'-Modus per
     data-mode-Attribut auf #experience-editor-form ausgeblendet. */
  #experience-editor-form[data-mode="record"] .experience-design-only{display:none !important;}

  /* Delete-Button auf gleiche Höhe wie 'Save changes' / 'Mark as completed'
     bringen — der globale .btn-nav-icon-Stil (min-height:36px, padding:6px 12px)
     ist für Header-Icons gedacht; hier wollen wir die kleinere Footer-Größe
     matchen. */
  #experience-delete-btn{min-width:0;min-height:0;padding:5px 10px;}
  #experience-delete-btn .btn-nav-icon-svg{width:15px;height:15px;}

  /* Disabled Textarea/Input für die Per-Feld-Permission-Logik
     (applyExperienceFieldPermissions) — wenn z.B. der Supervisor die zweite
     Textarea (Lerneinträge) nicht editieren darf, wird sie ausgegraut. */
  textarea.experience-field-disabled,
  input.experience-field-disabled{
    background:#f3f3f3 !important;color:#666 !important;cursor:not-allowed;
  }
  /* Hinweistext 'Experience recorded by … for …' linksbündig in der Footer-
     Zeile, kursiv und dezent. */
  .experience-recorded-by-hint{display:block;}

  /* Experience Journal: Dropdown + 'Open development resources for this
     competency'-Button nebeneinander; Button erscheint nur, wenn eine
     Kompetenz gewählt ist (Sichtbarkeit über JS). Dropdown nimmt ca. die
     Hälfte der Zeile ein, Button steht direkt rechts daneben (kein wrap).
     Beide haben dieselbe Höhe (42px = .start-input mit padding 10px 14px +
     1px border). */
  .experience-competency-select-row{display:flex;gap:12px;align-items:center;flex-wrap:nowrap;}
  .experience-competency-select-row select{
    flex:0 0 50%;min-width:0;height:42px;box-sizing:border-box;
    /* Native Pfeil entfernen und durch eigenen SVG-Chevron ersetzen, damit
       zwischen Pfeil und rechtem Feldrand Luft bleibt (statt direkt am Rand
       zu kleben). */
    appearance:none;-webkit-appearance:none;-moz-appearance:none;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
    background-repeat:no-repeat;
    background-position:right 14px center;
    background-size:14px 14px;
    padding-right:40px;
    /* Vom geerbten transition:background .15s der .start-input nur den
       background-color-Anteil behalten — die Shorthand würde sonst auch
       background-image / background-position animieren, wodurch der Pfeil
       beim Fokus-Wechsel scheinbar von links 'reinfährt' bzw. kurz
       verschwindet. */
    transition:border-color .15s,background-color .15s;
  }
  /* .start-input:focus setzt 'background:#fff' (Shorthand) und löscht damit
     unser background-image. Hier den Pfeil im Fokus-Zustand erneut deklarieren,
     damit er auch nach Auswahl sichtbar bleibt. */
  .experience-competency-select-row select:focus{
    background-color:#fff;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
    background-repeat:no-repeat;
    background-position:right 14px center;
    background-size:14px 14px;
  }
  #experience-competency-definition-btn,
  #experience-development-resources-btn{flex:0 0 auto;white-space:nowrap;height:42px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;line-height:1;box-sizing:border-box;min-width:12rem;}

  /* Experience Journal: Development-Resources-Overlay für die im Dropdown
     gewählte Kompetenz (zwei Spalten: Sektion-Buttons links, Inhalt rechts).
     Fast vollflächig, aber als Overlay erkennbar (rgba-Backdrop, abgerundete
     Box mit Schatten). */
  .experience-development-resources-overlay{display:none;align-items:center;justify-content:center;padding:24px;background:rgba(218,204,184,.30);backdrop-filter:blur(20px) saturate(1.18);-webkit-backdrop-filter:blur(20px) saturate(1.18);}
  .experience-development-resources-overlay.active{display:flex !important;}
  .experience-development-resources-overlay-box{position:relative;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.9);border-radius:14px;width:92vw;height:90vh;max-width:1400px;display:flex;flex-direction:column;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 14px 48px rgba(0,0,0,.11);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);}
  .experience-development-resources-overlay-title{font-size:18px;font-weight:800;color:#1a1a1a;margin:0;padding:20px 24px 16px 24px;border-bottom:1px solid rgba(0,0,0,.08);flex-shrink:0;}
  .experience-development-resources-overlay-close{
    position:absolute;top:0;right:-48px;width:36px;height:36px;border:1px solid rgba(255,255,255,.95);border-radius:50%;
    background:rgba(255,255,255,.72);color:#1a1a1a;font-size:18px;line-height:1;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;padding:0;
    backdrop-filter:blur(16px) saturate(1.35);-webkit-backdrop-filter:blur(16px) saturate(1.35);
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 8px 28px rgba(0,0,0,.12);
    z-index:2;transition:opacity .15s,background .15s;
  }
  .experience-development-resources-overlay-close:hover{background:rgba(255,255,255,.92);opacity:1;}
  .experience-development-resources-overlay-layout{display:flex;flex:1;min-height:0;width:100%;background:transparent;border-bottom-left-radius:14px;border-bottom-right-radius:14px;overflow:hidden;}
  .experience-development-resources-overlay-col-mid,
  .experience-development-resources-overlay-col-right{display:flex;flex-direction:column;overflow-y:auto;}
  .experience-development-resources-overlay-col-mid{flex:0 0 32%;min-width:240px;background:transparent;border-right:1px solid rgba(0,0,0,.06);}
  .experience-development-resources-overlay-col-right{flex:1 1 auto;min-width:0;background:rgba(255,255,255,.38);}
  /* Intro-/Zitat-Block im Overlay auf Vollton-Weiß (gleich wie nicht-aktive
     Section-Buttons links), damit er sich vom Glas-Hintergrund klar abhebt.
     Im Standalone-Development-Resources-Screen bleibt der Creme-Ton #f8f7f4. */
  .experience-development-resources-overlay .development-resources-content-intro{background:#fff;}
  /* Section-Buttons (linke Spalte) im Overlay: Hintergrund auf gleichen Glas-
     Ton wie die rechte Spalte (rgba(255,255,255,.38)) und Border auf gleiche
     Stärke + Farbe wie der Spalten-Trenner (1px solid rgba(0,0,0,.06)).
     Standalone-Screen behält Vollton-Weiß und das hellere Grau. */
  .experience-development-resources-overlay .development-resources-section-item:not(.is-selected){background:rgba(255,255,255,.38);border:1px solid rgba(0,0,0,.06);}
  .experience-development-resources-overlay .development-resources-section-item:not(.is-selected):hover{background:rgba(0,0,0,.04);}
  .experience-development-resources-overlay-col-inner{padding:24px 24px 32px;flex:1;}
  .experience-development-resources-overlay-col-right .experience-development-resources-overlay-col-inner{max-width:880px;margin:0 auto;padding-left:48px;padding-right:48px;}

  @media (max-width:900px){
    .experience-development-resources-overlay-box{width:96vw;height:94vh;}
    .experience-development-resources-overlay-close{top:14px;right:14px;}
    .experience-development-resources-overlay-title{padding:20px 56px 16px 24px;}
    .experience-development-resources-overlay-layout{flex-direction:column;overflow-y:auto;}
    .experience-development-resources-overlay-col-mid,
    .experience-development-resources-overlay-col-right{flex:0 0 auto;min-width:0;width:100%;border-right:none;border-bottom:1px solid rgba(0,0,0,.06);}
    .experience-development-resources-overlay-col-right .experience-development-resources-overlay-col-inner{padding-left:24px;padding-right:24px;}
  }

    /* ======================================================================
     * Feature-Visibility-Override: Augen-Icon in den Subcompany-/Department-
     * Zeilen der Admin-Ansicht plus Overlay-Modal mit den drei Feature-Zeilen
     * (Skills, Tasks & AI readiness, Capabilities) für Show/Hide-Overrides.
     * Yellow-State signalisiert "individueller Override gesetzt" — siehe
     * profile-history.js und home-module-visibility.js (Cascade-Logik).
     * ====================================================================== */
    .profile-history-facet-eye-btn{
      margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
      width:30px;height:28px;cursor:pointer;color:#555;background:transparent;
      border:none;padding:0;border-radius:6px;flex-shrink:0;
      transition:color .12s ease,background .12s ease;
    }
    .profile-history-facet-eye-btn:hover{color:#111;background:rgba(0,0,0,.05);}
    .profile-history-facet-eye-btn:focus{outline:none;}
    .profile-history-facet-eye-btn:focus-visible{outline:2px solid #3d3d3d;outline-offset:2px;}
    .profile-history-facet-eye-btn--active{color:#c89313;}
    .profile-history-facet-eye-btn--active:hover{color:#a87a0e;background:rgba(200,147,19,.10);}
    .profile-history-facet-eye-btn svg{width:18px;height:18px;display:block;}

    .feature-visibility-overlay{padding:24px;}
    .feature-visibility-overlay-box{
      background:#fff;border-radius:14px;padding:24px 26px 20px;
      max-width:560px;width:100%;box-shadow:0 8px 30px rgba(0,0,0,.18);
      display:flex;flex-direction:column;gap:14px;
    }
    .feature-visibility-overlay-title{font-size:17px;font-weight:800;color:#1a1a1a;margin:0;}
    .feature-visibility-overlay-scope-label{font-size:13px;color:#666;margin:-6px 0 4px;}
    .feature-visibility-overlay-body{display:flex;flex-direction:column;gap:18px;}
    .feature-visibility-overlay-row{display:flex;flex-direction:column;gap:6px;}
    .feature-visibility-overlay-row-title{font-size:13px;font-weight:700;color:#1a1a1a;}
    .feature-visibility-overlay-row-opts{display:flex;gap:18px;flex-wrap:wrap;}
    .feature-visibility-overlay-row-opt-label{
      display:flex;align-items:center;gap:6px;font-size:13px;color:#1a1a1a;cursor:pointer;
      user-select:none;
    }
    .feature-visibility-overlay-row-opt-label input{cursor:pointer;}
    .feature-visibility-overlay-row-opt-label.is-greyed{opacity:.45;cursor:not-allowed;}
    .feature-visibility-overlay-row-opt-label.is-greyed input{cursor:not-allowed;pointer-events:none;}
    .feature-visibility-overlay-row-info{
      font-size:11px;color:#777;font-style:italic;line-height:1.45;
    }
    .feature-visibility-overlay-actions{display:flex;justify-content:flex-end;margin-top:2px;}

    /* Feature-Visibility-Button in den User-Zeilen — gleicher Frame wie
       Export/Impersonate-Button. yellow-Tönung wenn ein User-Override gesetzt
       ist (analog zum Eye-Icon in den Subcompany-/Department-Zeilen). Spacing
       kommt einheitlich aus dem flex gap des Action-Containers. */
    .profile-history-user-fv-btn{
      color:#555;
    }
    .profile-history-user-fv-btn:hover:not(:disabled):not([disabled]){
      background:#f5f5f5;color:#111;
    }
    .profile-history-user-fv-btn--active{
      color:#c89313;
    }
    .profile-history-user-fv-btn--active:hover:not(:disabled):not([disabled]){
      background:rgba(200,147,19,.10);color:#a87a0e;
    }