/* profilindo – Oberfläche im appsolvia Design (angelehnt an das JobSeek-Layout: Kopfband mit Verlauf, Karten, Zeitleisten). */

/* ── Syncfusion Fluent 2 auf appsolvia-Farben ─────────────────────────────── */
:root{
  --color-sf-primary:#1D9274;--color-sf-primary-light:#C7E4DD;--color-sf-primary-lighter:#F1F9F7;
  --color-sf-primary-dark:#0E644E;--color-sf-primary-darker:#0A3933;
  --color-sf-primary-bg-color-hover:#0E644E;--color-sf-primary-bg-color-pressed:#0A3933;--color-sf-primary-bg-color-selected:#0E644E;
  --color-sf-table-bg-color-selected:#F1F9F7;--color-sf-content-bg-color-selected:#F1F9F7;
  --color-sf-success:#007C25;--color-sf-info:#0061A7;--color-sf-warning:#7C6A00;--color-sf-danger:#A70000;
  --color-sf-content-text-color:#354345;--color-sf-content-bg-color:#FCFEFD;--color-sf-content-bg-color-alt1:#FCFEFD;
  --color-sf-border:#CFD8D9;--color-sf-border-light:#EAEFF0;
  --e-font-family:'Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}
.e-control,.e-css,.e-btn,.e-input-group input,.e-grid,.e-grid .e-headercell,.e-grid .e-rowcell,.e-tab .e-tab-header .e-tab-text,
.e-dialog,.e-toast,.e-chart,.e-listview,.e-dropdownbase,.e-popup{font-family:var(--font-body)!important}
.e-btn{border-radius:var(--radius-4);font-weight:700;text-transform:none}
.e-btn.e-primary{background:var(--primary-500);border-color:var(--primary-500)}
.e-btn.e-primary:hover{background:var(--primary-600);border-color:var(--primary-600)}
.e-input-group,.e-input-group.e-control-wrapper{border-radius:var(--radius-8)!important}
.e-dialog{border-radius:var(--radius-8);box-shadow:var(--shadow-10)}
.e-dialog .e-dlg-header{font-family:var(--font-heading)!important;font-weight:400;font-size:22px;color:var(--text-heading)}
.e-dialog .e-footer-content{display:flex;gap:8px;justify-content:flex-end}
.e-grid{border-radius:var(--radius-8);border-color:var(--border-default)}
.e-grid .e-headercell{background:var(--primary-50)}
.e-grid .e-headercelldiv{font-weight:700;color:var(--secondary-500)}
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text{color:var(--primary-600)}
.e-tab .e-tab-header .e-indicator{background:var(--primary-500)}
.e-toast-container .e-toast{border-radius:var(--radius-8);box-shadow:0 0 0 1.2px var(--primary-300),var(--shadow-5)}
.e-switch-wrapper .e-switch-inner.e-switch-active,.e-switch-wrapper .e-switch-on{background-color:var(--primary-500);border-color:var(--primary-500)}
.e-checkbox-wrapper .e-frame.e-check{background-color:var(--primary-500);border-color:var(--primary-500)}
.e-chip-list .e-chip{border-radius:27px}
.e-tab .e-tab-header .e-tab-text{text-transform:none!important}
.field .e-input-group,.field .e-control-wrapper,.field .e-multi-line-input{width:100%!important}
.e-chart text,.e-accumulationchart text{font-family:var(--font-body)!important}

/* ── Grundlagen ────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{font:400 16px/1.5 var(--font-body);color:var(--text-body);background:var(--gradient-app-bg);background-attachment:fixed;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:400;letter-spacing:-.015em;color:var(--text-heading);margin:0}
h1{font-size:clamp(26px,3.2vw,40px);line-height:1.2}
h2{font-size:clamp(22px,2.4vw,28px);line-height:1.3}
h3{font-size:20px;line-height:1.3}
p{margin:0 0 12px}
a{color:var(--link-color);font-weight:700;text-decoration:underline}
a:hover{color:var(--link-hover)}
:focus-visible{outline:none;box-shadow:var(--focus-ring)!important}
h1:focus,h1:focus-visible{outline:none;box-shadow:none!important}
code{font-size:14px;background:var(--primary-100);padding:1px 6px;border-radius:4px;color:var(--primary-700)}
.muted{color:var(--text-muted)}
.small{font-size:14px}
.nowrap{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.section-label{font:400 18px/26px var(--font-heading);text-transform:uppercase;letter-spacing:.06em;color:var(--secondary-500)}
.section-label.small{font-size:13px;line-height:20px}
.icon{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.icon.sm{width:18px;height:18px}
.icon.lg{width:32px;height:32px}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:4px;padding:12px 24px;min-height:44px;font:700 14px/1 var(--font-body);
  background:var(--primary-500);color:#FCFEFD;cursor:pointer;text-decoration:none;transition:background-color .25s ease,box-shadow .25s ease}
.btn:hover{background:var(--primary-600);color:#FCFEFD}
.btn:active{background:var(--primary-700)}
.btn:disabled,.btn[aria-disabled="true"]{background:var(--neutral-100);color:var(--neutral-300);cursor:not-allowed}
.btn-secondary{background:transparent;color:var(--primary-600);box-shadow:inset 0 0 0 1.2px var(--primary-600)}
.btn-secondary:hover{background:var(--primary-100);color:var(--primary-600)}
.btn-secondary:active{background:var(--primary-300)}
.btn-secondary:disabled{background:transparent;color:var(--neutral-300);box-shadow:inset 0 0 0 1.2px var(--neutral-300)}
.btn-on-dark{background:rgba(252,254,253,.12);color:#FCFEFD;box-shadow:inset 0 0 0 1.2px rgba(252,254,253,.6)}
.btn-on-dark:hover{background:rgba(252,254,253,.22);color:#FCFEFD}
.btn-light{background:#FCFEFD;color:var(--primary-600)}
.btn-light:hover{background:var(--primary-100);color:var(--primary-700)}
.btn-tertiary{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:6px 8px;border-radius:4px;font:700 14px/1 var(--font-body);color:var(--primary-600);cursor:pointer;text-decoration:none}
.btn-tertiary:hover{color:var(--primary-500);background:var(--primary-100)}
.btn-danger{background:var(--error-500)}
.btn-danger:hover{background:#7d0000}
.btn-block{width:100%}
.btn-sm{min-height:36px;padding:8px 16px}
.icon-btn{width:44px;height:44px;border:0;border-radius:32px;background:transparent;color:var(--secondary-500);display:inline-grid;place-items:center;cursor:pointer}
.icon-btn:hover{background:var(--primary-100);color:var(--primary-600)}
.icon-btn:disabled{color:var(--neutral-300);background:transparent;cursor:not-allowed}
.icon-btn.on-dark{color:#FCFEFD}
.icon-btn.on-dark:hover{background:rgba(252,254,253,.15)}
.icon-btn.danger:hover{background:var(--error-100);color:var(--error-500)}

/* ── App-Rahmen ────────────────────────────────────────────────────────────── */
.app-shell{display:grid;grid-template-columns:272px minmax(0,1fr);min-height:100vh;min-height:100dvh}
.sidebar{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;background:var(--surface-card);box-shadow:inset -1px 0 0 var(--border-default);z-index:20}
.sidebar-brand{display:flex;align-items:center;gap:12px;padding:24px 24px 16px;text-decoration:none;color:inherit}
.brand-name{font:600 22px/1 var(--font-heading);letter-spacing:-.01em;background:linear-gradient(90deg,#1e9375,#323161);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-tag{font:400 11px/1.4 var(--font-heading);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.nav{flex:1;overflow-y:auto;padding:8px 12px 16px}
.nav-group{margin-top:16px}
.nav-group-label{padding:8px 12px;font:400 12px/1 var(--font-heading);letter-spacing:.12em;text-transform:uppercase;color:var(--secondary-300)}
.nav-link{display:flex;align-items:center;gap:12px;padding:10px 12px;margin:2px 0;border-radius:8px;color:var(--secondary-500);font-weight:600;text-decoration:none;transition:var(--transition-fast)}
.nav-link:hover{background:var(--primary-100);color:var(--primary-600)}
.nav-link.active{background:var(--primary-100);color:var(--primary-600);box-shadow:inset 3px 0 0 var(--primary-500)}
.nav-link .nav-badge{margin-left:auto}
.sidebar-footer{padding:16px;border-top:1px solid var(--border-default)}
.user-chip{display:flex;align-items:center;gap:12px}
.user-chip .who{min-width:0;flex:1}
.user-chip .who div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-chip .role{font-size:13px;color:var(--text-muted)}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--primary-300);color:var(--primary-700);display:grid;place-items:center;font:700 15px/1 var(--font-body);flex:none;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.lg{width:88px;height:88px;font-size:28px;box-shadow:0 0 0 4px var(--surface-card)}
.version{margin-top:12px;font-size:12px;color:var(--text-muted)}
.main{min-width:0;display:flex;flex-direction:column}
.main-content{flex:1;padding:0 40px 48px}
.topbar{display:none}
.bottom-nav{display:none}
.nav-backdrop{display:none}

/* ── Kopfband (JobSeek-Stil) ───────────────────────────────────────────────── */
.page-hero{position:relative;margin:0 -40px 32px;padding:40px 40px 64px;background:var(--gradient-02);color:#FCFEFD;clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),0 100%);overflow:hidden}
.page-hero::after{content:"";position:absolute;right:-120px;top:-160px;width:520px;height:520px;border-radius:50%;border:56px solid rgba(252,254,253,.06);pointer-events:none}
.page-hero-inner{position:relative;display:flex;gap:24px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;max-width:1320px}
.page-hero h1{color:#FCFEFD}
.page-hero .eyebrow{font:400 13px/1 var(--font-heading);letter-spacing:.14em;text-transform:uppercase;opacity:.8;margin-bottom:12px}
.page-hero .lead{margin:8px 0 0;max-width:720px;opacity:.9;font-size:17px}
.page-hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.content{max-width:1320px}
.content-narrow{max-width:880px}

/* ── Karten und Raster ─────────────────────────────────────────────────────── */
.card{background:var(--surface-card);border-radius:8px;padding:24px;box-shadow:inset 0 0 0 1px var(--border-default)}
.card + .card{margin-top:24px}
.grid > .card + .card{margin-top:0}
.card.elevated{box-shadow:var(--shadow-5)}
.card.tint{background:var(--primary-50)}
.card-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.card-header h2,.card-header h3{font-size:20px}
.card-overlap{margin-top:-72px;position:relative;z-index:2}
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-12{grid-template-columns:repeat(12,minmax(0,1fr))}
.span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-6{grid-column:span 6}.span-7{grid-column:span 7}.span-8{grid-column:span 8}.span-12{grid-column:span 12}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.spacer{flex:1}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mb-0{margin-bottom:0}

/* ── Kennzahlen ────────────────────────────────────────────────────────────── */
.stat{background:var(--surface-card);border-radius:8px;padding:20px 24px;box-shadow:inset 0 0 0 1px var(--border-default);border-top:3px solid var(--primary-500);display:flex;flex-direction:column;gap:6px;min-width:0}
.stat.navy{border-top-color:var(--secondary-500)}
.stat.orange{border-top-color:var(--accent-orange-500)}
.stat.muted-top{border-top-color:var(--neutral-200)}
.stat-label{font-size:14px;color:var(--text-muted);display:flex;align-items:center;gap:8px}
.stat-value{font:400 34px/1.1 var(--font-heading);color:var(--secondary-500)}
.stat-value small{font-size:16px;color:var(--text-muted)}
.stat-delta{font-size:13px;font-weight:700}
.stat-delta.up{color:var(--success-500)}
.stat-delta.down{color:var(--error-500)}
.stat-delta.flat{color:var(--text-muted)}

/* ── Schnellaktionen ───────────────────────────────────────────────────────── */
.action-tile{display:flex;gap:16px;align-items:flex-start;padding:20px;border-radius:8px;background:var(--surface-card);box-shadow:inset 0 0 0 1px var(--border-default);text-decoration:none;color:var(--text-body);font-weight:400;cursor:pointer;border:0;text-align:left;width:100%;transition:box-shadow .25s ease,transform .25s ease}
.action-tile:hover{box-shadow:var(--shadow-5),inset 0 0 0 1px var(--primary-300);color:var(--text-body)}
.action-tile .tile-icon{width:48px;height:48px;border-radius:8px;display:grid;place-items:center;background:var(--primary-100);color:var(--primary-600);flex:none}
.action-tile.navy .tile-icon{background:var(--secondary-100);color:var(--secondary-500)}
.action-tile .tile-title{display:block;font:700 16px/1.3 var(--font-body);color:var(--secondary-500);margin-bottom:4px}
.action-tile .tile-text{display:block;font-size:14px;line-height:1.45;color:var(--text-muted)}

/* ── Hinweise, Tags, Badges ────────────────────────────────────────────────── */
.notice{padding:12px 16px;border-radius:8px;background:var(--info-100);color:var(--info-500);font-size:15px;margin-bottom:16px;display:flex;gap:12px;align-items:flex-start}
.notice-error{background:var(--error-100);color:var(--error-500)}
.notice-success{background:var(--success-100);color:var(--success-500)}
.notice-warning{background:var(--warning-100);color:var(--warning-500)}
.tag{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:27px;box-shadow:inset 0 0 0 1.2px var(--secondary-500);font:700 14px/1.2 var(--font-body);color:var(--secondary-500);background:transparent}
.tag.success{background:var(--success-100);color:var(--success-500);box-shadow:none}
.tag.info{background:var(--info-100);color:var(--info-500);box-shadow:none}
.tag.warning{background:var(--warning-100);color:var(--warning-500);box-shadow:none}
.tag.error{background:var(--error-100);color:var(--error-500);box-shadow:none}
.tag.neutral{background:var(--neutral-100);color:var(--neutral-500);box-shadow:none}
.tag.sm{padding:3px 10px;font-size:12px}
.badge-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--accent-orange-500);color:#fff;font:700 12px/1 var(--font-body)}
.availability-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:4px;background:var(--surface-card);color:var(--secondary-500);font-weight:700;box-shadow:var(--shadow-5)}
.availability-pill .dot{width:10px;height:10px;border-radius:50%;background:var(--success-500)}
.availability-pill.soon .dot{background:var(--warning-500)}
.availability-pill.later .dot{background:var(--neutral-400)}

/* ── Listen und Zeitleisten ────────────────────────────────────────────────── */
.list{list-style:none;margin:0;padding:0}
.list-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border-default)}
.list-item:last-child{border-bottom:0}
.list-item .grow{flex:1;min-width:0}
.list-item .title{font-weight:700;color:var(--secondary-500)}
.list-item .meta{font-size:14px;color:var(--text-muted)}
.timeline{position:relative;margin:0;padding:0 0 0 24px;list-style:none}
.timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--primary-300)}
.timeline li{position:relative;padding:0 0 16px}
.timeline li::before{content:"";position:absolute;left:-24px;top:6px;width:12px;height:12px;border-radius:2px;background:var(--primary-500)}
.timeline .when{font:700 13px/1.4 var(--font-body);color:var(--primary-600);text-transform:uppercase;letter-spacing:.04em}
.missing-list{margin:0;padding-left:20px;color:var(--text-body)}
.missing-list li{margin:4px 0}

/* ── Formulare ─────────────────────────────────────────────────────────────── */
.form-stack{display:flex;flex-direction:column;gap:16px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px}
.form-grid .full{grid-column:1/-1}
.form-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.field label,.field .label{display:block;font:700 14px/1.3 var(--font-body);color:var(--text-body);margin-bottom:6px}
.field .help{font:400 13px/1.4 var(--font-body);color:var(--text-muted);margin-top:4px}
.field-error,.validation-message{font-size:13px;color:var(--error-500);margin-top:4px}
.input{height:44px;width:100%;padding:8px 12px;border:0;border-radius:8px;background:var(--surface-card);box-shadow:inset 0 0 0 1px var(--neutral-200);font:400 16px var(--font-body);color:var(--text-body)}
.input:hover{box-shadow:inset 0 0 0 1px var(--neutral-400)}
.input:focus{outline:none;box-shadow:inset 0 0 0 1px var(--primary-500),var(--focus-ring)}
.check{display:inline-flex;align-items:center;gap:8px;font-size:15px;cursor:pointer}
input[type=checkbox],input[type=radio]{accent-color:var(--primary-500);width:16px;height:16px}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--border-default)}
.switch-row:last-child{border-bottom:0}
.switch-row .text{min-width:0}
.switch-row .text b{display:block;color:var(--secondary-500)}
.switch-row .text span{font-size:14px;color:var(--text-muted)}
.segmented{display:inline-flex;padding:4px;gap:4px;border-radius:8px;background:var(--neutral-100);flex-wrap:wrap}
.segmented button{border:0;background:transparent;padding:8px 14px;border-radius:4px;font:700 14px/1 var(--font-body);color:var(--neutral-500);cursor:pointer;min-height:36px}
.segmented button.active{background:var(--surface-card);color:var(--primary-600);box-shadow:var(--shadow-5)}
.chip-select{display:flex;flex-wrap:wrap;gap:8px}
.chip-select button{border:0;padding:8px 14px;border-radius:27px;background:transparent;box-shadow:inset 0 0 0 1.2px var(--neutral-300);font:700 14px/1 var(--font-body);color:var(--neutral-500);cursor:pointer;min-height:36px}
.chip-select button:hover{box-shadow:inset 0 0 0 1.2px var(--primary-500);color:var(--primary-600)}
.chip-select button.active{background:var(--primary-500);color:#FCFEFD;box-shadow:none}
.save-bar{position:sticky;bottom:0;z-index:15;display:flex;align-items:center;gap:12px;justify-content:flex-end;padding:16px 24px;margin:24px -24px -24px;background:var(--save-bar-bg,rgba(252,254,253,.96));backdrop-filter:blur(6px);box-shadow:inset 0 1px 0 var(--border-default);border-radius:0 0 8px 8px}
.save-bar .state{margin-right:auto;font-size:14px;color:var(--text-muted)}
.save-bar .state.dirty{color:var(--accent-orange-500);font-weight:700}

/* ── Bearbeitbare Listen ───────────────────────────────────────────────────── */
.edit-list{display:flex;flex-direction:column;gap:12px}
.edit-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start;padding:16px;border-radius:8px;background:var(--primary-50);box-shadow:inset 0 0 0 1px var(--border-default)}
.edit-row-tools{display:flex;gap:2px}
.edit-row .form-grid{gap:12px 16px}

/* ── Skills ────────────────────────────────────────────────────────────────── */
.skill-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
.skill-group h3{font:700 15px/1.3 var(--font-body);color:var(--secondary-500);margin:0 0 12px;display:flex;justify-content:space-between}
.skill-chips{display:flex;flex-wrap:wrap;gap:8px}
.skill-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 8px 6px 14px;border-radius:27px;background:var(--surface-card);box-shadow:inset 0 0 0 1.2px var(--neutral-200);font:600 14px/1.2 var(--font-body);color:var(--secondary-500);cursor:pointer;border:0}
.skill-chip:hover{box-shadow:inset 0 0 0 1.2px var(--primary-500)}
.skill-chip.top{background:var(--primary-100);box-shadow:inset 0 0 0 1.2px var(--primary-500)}
.skill-chip.pending{box-shadow:inset 0 0 0 1.2px var(--warning-500);background:var(--warning-100)}
.level-dots{display:inline-flex;gap:3px}
.level-dots i{width:6px;height:6px;border-radius:50%;background:var(--neutral-200)}
.level-dots i.on{background:var(--primary-500)}
.level-bar{height:8px;border-radius:4px;background:var(--neutral-100);overflow:hidden}
.level-bar span{display:block;height:100%;background:var(--primary-500)}

/* ── Projekte ──────────────────────────────────────────────────────────────── */
.project-card{position:relative;padding:20px 24px 20px 28px;border-radius:8px;background:var(--surface-card);box-shadow:inset 0 0 0 1px var(--border-default)}
.project-card::before{content:"";position:absolute;left:0;top:20px;width:6px;height:28px;background:var(--primary-500);border-radius:0 2px 2px 0}
.project-card.hidden-project{opacity:.6}
.project-card .when{font:700 13px/1.4 var(--font-body);color:var(--primary-600);letter-spacing:.04em}
.project-card h3{font:700 18px/1.35 var(--font-body);color:var(--secondary-500);margin:4px 0}
.project-card .meta{font-size:14px;color:var(--text-muted)}
.tech-line{margin-top:12px;padding:8px 12px;border-left:3px solid var(--primary-500);background:var(--primary-50);font-size:14px}
.tech-line b{color:var(--secondary-500)}

/* ── Export ────────────────────────────────────────────────────────────────── */
.choice-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.choice-card{display:flex;gap:16px;padding:20px;border:0;border-radius:8px;background:var(--surface-card);box-shadow:inset 0 0 0 1.2px var(--neutral-200);text-align:left;cursor:pointer;font:inherit;color:inherit}
.choice-card:hover{box-shadow:inset 0 0 0 1.2px var(--primary-500)}
.choice-card.active{box-shadow:inset 0 0 0 2px var(--primary-500);background:var(--primary-50)}
.choice-card .doc{width:56px;height:72px;border-radius:4px;background:var(--gradient-03);box-shadow:inset 0 0 0 1px var(--primary-300);display:grid;place-items:center;color:var(--primary-600);flex:none}
.choice-card .doc.short{height:56px}
.choice-card b{display:block;color:var(--secondary-500);margin-bottom:4px}
.choice-card span{font-size:14px;color:var(--text-muted)}
.pdf-frame{width:100%;height:78vh;min-height:520px;border:0;border-radius:8px;background:#525659;box-shadow:inset 0 0 0 1px var(--border-default)}

/* ── Ring (Vollständigkeit) ────────────────────────────────────────────────── */
.ring-wrap{position:relative;display:grid;place-items:center}
.ring-label{position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none}
.ring-label b{font:400 30px/1 var(--font-heading);color:var(--secondary-500)}
.ring-label span{display:block;font-size:12px;color:var(--text-muted);margin-top:4px}

/* ── Leerzustand, Laden, Zugriff ───────────────────────────────────────────── */
.empty{padding:40px 24px;text-align:center;color:var(--text-muted)}
.empty .icon{width:40px;height:40px;color:var(--primary-500);margin-bottom:12px}
.empty b{display:block;color:var(--secondary-500);font-size:17px;margin-bottom:6px}
.page-loading{min-height:50vh;display:grid;place-items:center;color:var(--text-muted)}
.spinner{width:36px;height:36px;border-radius:50%;border:3px solid var(--primary-300);border-top-color:var(--primary-500);animation:spin 1s linear infinite;margin:0 auto 12px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:3s}}

/* ── Anmeldung ─────────────────────────────────────────────────────────────── */
.auth-shell{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;background:var(--gradient-02)}
.auth-card{width:min(440px,100%);background:var(--surface-card);border-radius:8px;padding:32px;box-shadow:var(--shadow-10)}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.auth-title{font:600 24px/1 var(--font-heading);background:linear-gradient(90deg,#1e9375,#323161);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-tagline{font:400 12px/1.6 var(--font-heading);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.auth-heading{font-size:28px;margin:0 0 8px}
.auth-intro{color:var(--text-muted);margin-bottom:20px}
.auth-footer{margin-top:24px;color:rgba(252,254,253,.8);font-size:14px}
.auth-demo{margin-top:24px;padding:16px;border-radius:8px;background:var(--primary-100);font-size:14px}
.auth-demo p{margin:6px 0 0}

/* ── Dashboard ─────────────────────────────────────────────────────────────── */
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.chart-card{min-height:360px}
.chart-card .e-chart,.chart-card .e-accumulationchart{width:100%}
.legend-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.legend-list li{display:grid;grid-template-columns:12px minmax(0,1fr) auto auto;gap:10px;align-items:center;font-size:14px}
.legend-list .swatch{width:12px;height:12px;border-radius:3px}
.legend-list .value{font-weight:700;color:var(--secondary-500);text-align:right}
.legend-list .share{color:var(--text-muted);min-width:44px;text-align:right}
.legend-inline{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--text-muted)}
.legend-inline i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:middle}
.feed-time{font-size:13px;color:var(--text-muted);white-space:nowrap}
.platform-icon{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--secondary-100);color:var(--secondary-500);flex:none}

/* ── Responsiv ─────────────────────────────────────────────────────────────── */
@media (max-width:1200px){
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .span-4,.span-5,.span-7,.span-8{grid-column:span 12}
  .span-6{grid-column:span 12}
}
@media (max-width:900px){
  .app-shell{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:min(300px,86vw);transform:translateX(-105%);transition:transform .25s ease;box-shadow:var(--shadow-10)}
  .app-shell.nav-open .sidebar{transform:none}
  .app-shell.nav-open .nav-backdrop{display:block;position:fixed;inset:0;background:rgba(5,14,24,.35);z-index:19}
  .topbar{display:flex;position:sticky;top:0;z-index:18;align-items:center;gap:8px;padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top));background:var(--topbar-bg,#14385F);color:#FCFEFD}
  .topbar .title{flex:1;font:600 18px/1 var(--font-heading);color:#FCFEFD}
  .main-content{padding:0 16px 32px}
  .page-hero{margin:0 -16px 24px;padding:24px 16px 48px}
  .page-hero::after{display:none}
  .grid-2,.grid-3,.form-grid,.form-grid-3,.choice-cards{grid-template-columns:minmax(0,1fr)}
  .card{padding:20px 16px}
  .save-bar{margin:24px -16px -20px;padding:12px 16px}
}
@media (max-width:560px){
  .kpi-grid,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{padding:16px}
  .stat-value{font-size:28px}
  .page-hero-actions{width:100%}
  .page-hero-actions .btn{flex:1}
}

/* ── Apps auf Android/iOS: Tab-Leiste unten statt Seitenleiste ─────────────── */
.app-shell.mobile{grid-template-columns:minmax(0,1fr)}
.app-shell.mobile .sidebar{display:none}
.app-shell.mobile .topbar{display:flex;position:sticky;top:0;z-index:18;align-items:center;gap:8px;padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top));background:var(--topbar-bg,#14385F);color:#FCFEFD}
.app-shell.mobile .topbar .title{flex:1;font:600 18px/1 var(--font-heading);color:#FCFEFD}
.app-shell.mobile .main-content{padding:0 16px calc(88px + env(safe-area-inset-bottom))}
.app-shell.mobile .page-hero{margin:0 -16px 24px;padding:24px 16px 48px}
.app-shell.mobile .page-hero::after{display:none}
.app-shell.mobile .grid-2,.app-shell.mobile .grid-3,.app-shell.mobile .form-grid,.app-shell.mobile .choice-cards{grid-template-columns:minmax(0,1fr)}
.app-shell.mobile .card{padding:20px 16px}
.bottom-nav.show{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:18;background:var(--surface-card);box-shadow:0 -1px 0 var(--border-default),0 -4px 16px rgba(20,56,95,.08);padding-bottom:env(safe-area-inset-bottom)}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;font:700 11px/1 var(--font-body);color:var(--neutral-400);text-decoration:none;min-height:56px}
.bottom-nav a.active{color:var(--primary-600)}
.bottom-nav a.active .icon{stroke-width:2}
.chart-box{position:relative;overflow:hidden}

/* ── Einstellungen ─────────────────────────────────────────────────────────── */
.settings-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.settings-option{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px;border:0;border-radius:8px;background:var(--surface-card);box-shadow:inset 0 0 0 1.2px var(--neutral-200);text-align:left;cursor:pointer;font:inherit;color:inherit}
.settings-option:hover{box-shadow:inset 0 0 0 1.2px var(--primary-500)}
.settings-option.active{box-shadow:inset 0 0 0 2px var(--primary-500);background:var(--primary-50)}
.settings-option b{color:var(--secondary-500)}
.settings-option span{font-size:14px;color:var(--text-muted)}
.settings-option .icon{color:var(--primary-600)}
.theme-preview{width:100%;height:52px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--neutral-200);display:grid;grid-template-columns:28% 1fr;overflow:hidden}
.theme-preview i{display:block}
.theme-preview.light i:first-child{background:#FCFEFD}.theme-preview.light i:last-child{background:linear-gradient(119deg,#1D9274,#14385F)}
.theme-preview.dark i:first-child{background:#111C26}.theme-preview.dark i:last-child{background:linear-gradient(119deg,#0E644E,#0B1622)}
.theme-preview.system i:first-child{background:linear-gradient(90deg,#FCFEFD 50%,#111C26 50%)}.theme-preview.system i:last-child{background:linear-gradient(119deg,#1D9274,#0B1622)}
.sidebar-tools{display:flex;gap:4px;margin-top:8px}
@media (max-width:560px){.settings-options{grid-template-columns:minmax(0,1fr)}}

/* ── Dunkel: Stellen, an denen Füll- und Textfarbe dieselbe Stufe nutzen ───── */
:root[data-theme="dark"]{
  --topbar-bg:#0F2235;--save-bar-bg:rgba(17,28,38,.96);
  --color-sf-primary:#1D9274;--color-sf-primary-light:#2B6253;--color-sf-primary-lighter:#152E27;
  --color-sf-primary-dark:#5FC9AC;--color-sf-primary-darker:#A6E3D2;
  --color-sf-primary-bg-color-hover:#177A61;--color-sf-primary-bg-color-pressed:#125F4B;--color-sf-primary-bg-color-selected:#177A61;
  --color-sf-table-bg-color-selected:#152E27;--color-sf-content-bg-color-selected:#152E27;
  --color-sf-success:#55C985;--color-sf-info:#74B9EC;--color-sf-warning:#E2C653;--color-sf-danger:#FF8A8A;
  --color-sf-content-text-color:#DDE5E8;--color-sf-content-bg-color:#111C26;--color-sf-content-bg-color-alt1:#16232F;
  --color-sf-border:#324049;--color-sf-border-light:#22303A;
}
:root[data-theme="dark"] .btn:hover{background:#177A61}
:root[data-theme="dark"] .btn:active{background:#125F4B}
:root[data-theme="dark"] .btn:disabled,:root[data-theme="dark"] .btn[aria-disabled="true"]{background:var(--neutral-100);color:var(--neutral-300)}
:root[data-theme="dark"] .btn-light{color:#0E644E}
:root[data-theme="dark"] .btn-light:hover{background:#E2F2EE;color:#0A3933}
:root[data-theme="dark"] .btn-danger{background:#B3261E}
:root[data-theme="dark"] .btn-danger:hover{background:#8C1D18}
:root[data-theme="dark"] .e-btn.e-primary:hover{background:#177A61;border-color:#177A61}
:root[data-theme="dark"] .brand-name,:root[data-theme="dark"] .auth-title{background:linear-gradient(90deg,#3CC19E,#9DB8D6);-webkit-background-clip:text;background-clip:text}
:root[data-theme="dark"] .badge-count{color:#0B141C}
:root[data-theme="dark"] .chip-select button.active{color:#FCFEFD}
:root[data-theme="dark"] .card,:root[data-theme="dark"] .stat,:root[data-theme="dark"] .action-tile,:root[data-theme="dark"] .project-card{box-shadow:inset 0 0 0 1px var(--neutral-100)}
:root[data-theme="dark"] .auth-shell{background:linear-gradient(119.358deg,#0E644E 0%,#0B1622 100%)}

/* ── Info-i (Versioning/AppInfoButton) in Kopf- und Seitenleiste ────────────── */
.app-shell .topbar .app-info-button{color:#FCFEFD}
.app-shell .topbar .app-info-button:hover{background:rgba(252,254,253,.15);color:#FCFEFD}
.sidebar-tools{align-items:center}
.sidebar-tools .version{margin:0 0 0 8px;flex:1;min-width:0;line-height:1.3}
.sidebar-tools .icon-btn.active{background:var(--primary-100);color:var(--primary-600)}

/* ── Anmeldung: Hinweis und Sprachwahl ─────────────────────────────────────── */
.auth-hint{margin:20px 0 0;font-size:14px;color:var(--text-muted)}
.auth-meta{margin:8px 0 0;font-size:12px;color:var(--text-muted)}
.auth-languages{display:flex;gap:4px;justify-content:center;margin-top:20px;padding-top:16px;border-top:1px solid var(--border-default)}
.auth-languages a,.auth-languages button{padding:6px 12px;border:0;border-radius:4px;background:none;font:700 14px/1 var(--font-body);color:var(--primary-600);text-decoration:none;cursor:pointer}
.auth-languages a:hover,.auth-languages button:hover{background:var(--primary-100)}
.auth-languages [aria-current="true"]{color:var(--text-muted);pointer-events:none}
.auth-footer a{color:inherit;font-weight:400;text-decoration:none}
.auth-footer a:hover{color:#FCFEFD;text-decoration:underline}

/* ── Übersetzungen: Prüfansicht ────────────────────────────────────────────── */
.translation-editor{border-top:1px solid var(--border-default);padding-top:16px}
.translation-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 16px;padding:12px 0;border-bottom:1px solid var(--border-default)}
.translation-label{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:14px;color:var(--secondary-500)}
.translation-source{white-space:pre-wrap;font-size:14px;line-height:1.5;color:var(--text-muted);padding:8px 12px;border-radius:8px;background:var(--primary-50)}
.translation-text{height:auto;min-height:44px;resize:vertical;font-size:14px;line-height:1.5;white-space:pre-wrap}
.translation-row.outdated .translation-text{box-shadow:inset 0 0 0 1px var(--warning-500)}
@media (max-width:900px){.translation-row{grid-template-columns:minmax(0,1fr)}}
/* Kopfleiste steht im DOM vor Seitenleiste und Inhalt: auf schmalen Bildschirmen über die ganze Breite. */
.app-shell > .topbar{grid-column:1/-1}
@media (min-width:901px){
  .app-shell{position:relative}
  .app-shell:not(.mobile) > .topbar{display:flex;position:absolute;top:16px;right:24px;z-index:21;padding:0;background:transparent;box-shadow:none}
  .app-shell:not(.mobile) > .topbar > :not(.app-info-button){display:none}
  .app-shell:not(.mobile) > .topbar .app-info-button{background:rgba(5,14,24,.22);color:#FCFEFD}
  .app-shell:not(.mobile) > .topbar .app-info-button:hover{background:rgba(5,14,24,.38);color:#FCFEFD}
}