*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    background:#52c9c7;
    color:#233042;
}

.app{
    display:flex;
    min-height:100vh;
}

/* ---------------- SIDEBAR ---------------- */

.sidebar{
    width:270px;
    background:#ffffff;
    padding:30px 20px;
    box-shadow:0 0 25px rgba(0,0,0,.08);
    display:flex;
    flex-direction:column;
}

.logo{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:40px;
}

.logo-icon{
    width:58px;
    height:58px;
    border-radius:18px;
    background:#52c9c7;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:28px;
}

.logo-icon-photo{
    background-image:url('rosi-avatar.jpg');
    background-size:cover;
    background-position:center;
    font-size:0;
}

.logo h2{
    font-size:38px;
    color:#233042;
}

.logo span{
    color:#52c9c7;
    font-size:18px;
}

nav{
    display:flex;
    flex-direction:column;
    gap:12px;
}

nav a{
    text-decoration:none;
    color:#233042;
    font-size:20px;
    padding:15px 18px;
    border-radius:14px;
    transition:.25s;
}

nav a:hover{
    background:#dff8f7;
    color:#14a89d;
}

.content{
    flex:1;
    padding:40px;
}
/* ---------------- CONTENT HEADER ---------------- */

.view-header{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-bottom:28px;
}

.view-header h1{
    font-size:32px;
    color:#233042;
}

.view-date{
    color:#7c8a9a;
    font-size:16px;
}

.placeholder{
    background:#ffffff;
    border-radius:20px;
    padding:60px;
    text-align:center;
    color:#7c8a9a;
    font-size:18px;
    box-shadow:0 0 25px rgba(0,0,0,.06);
}

/* ---------------- STATS ROW ---------------- */

.stats-row{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:18px;
    margin-bottom:28px;
}

.stat-card{
    background:#ffffff;
    border-radius:18px;
    padding:20px 22px;
    box-shadow:0 0 20px rgba(0,0,0,.06);
    display:flex;
    flex-direction:column;
    gap:6px;
}

.stat-value{
    font-size:32px;
    font-weight:700;
    color:#14a89d;
}

.stat-label{
    font-size:14px;
    color:#7c8a9a;
}

/* ---------------- TOUREN LAYOUT ---------------- */

.touren-layout{
    display:grid;
    grid-template-columns:340px 1fr;
    gap:24px;
    align-items:start;
}

/* Tourenliste (links) */

.touren-liste{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.tour-card{
    background:#ffffff;
    border-radius:16px;
    padding:16px 18px;
    box-shadow:0 0 18px rgba(0,0,0,.06);
    cursor:pointer;
    border:2px solid transparent;
    transition:.2s;
}

.tour-card:hover{
    border-color:#9fe6e2;
}

.tour-card.active{
    border-color:#14a89d;
    background:#f2fdfc;
}

.tour-card-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
}

.tour-card-head h4{
    font-size:17px;
    color:#233042;
}

.tour-meta{
    font-size:13px;
    color:#7c8a9a;
}

.tour-avatar{
    width:38px;
    height:38px;
    border-radius:12px;
    background:#52c9c7;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:700;
    flex-shrink:0;
}

.tour-card-sub{
    display:flex;
    gap:10px;
    margin-top:10px;
    font-size:13px;
    color:#7c8a9a;
}

.dot-warn{
    color:#c98a1f;
    font-weight:600;
}

/* Tour-Detail (rechts) */

.tour-detail{
    background:#ffffff;
    border-radius:20px;
    padding:24px;
    box-shadow:0 0 25px rgba(0,0,0,.06);
}

.tour-detail-head{
    margin-bottom:18px;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    flex-wrap:wrap;
}

.tour-detail-head h3{
    font-size:22px;
    color:#233042;
    margin-bottom:4px;
}

/* Mock-Karte */

.map-mock{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    background:#0d1113;
    border-radius:16px;
    overflow:hidden;
    margin-bottom:22px;
    border:1px solid #d7f1ef;
}

.mapbox-container{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.mb-pin{
    width:28px;
    height:28px;
    border-radius:50%;
    background:#14a89d;
    color:#fff;
    font-size:13px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid #ffffff;
    box-shadow:0 2px 6px rgba(0,0,0,.4);
    cursor:pointer;
}

.mb-pin-kurzzeit{
    background:#e0982e;
}

.map-route{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.map-pin{
    position:absolute;
    width:26px;
    height:26px;
    background:#14a89d;
    color:#fff;
    border-radius:50% 50% 50% 0;
    transform:translate(-50%, -100%) rotate(-45deg);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:700;
    font-family:Arial, sans-serif;
    box-shadow:0 3px 8px rgba(0,0,0,.25);
    cursor:default;
}

.map-pin > span{
    transform:rotate(45deg);
}

.map-pin-kurzzeit{
    background:#e0982e;
}

.map-legend{
    position:absolute;
    bottom:14px;
    left:14px;
    z-index:5;
    background:rgba(255,255,255,.9);
    border-radius:12px;
    padding:8px 14px;
    display:flex;
    gap:16px;
    font-size:13px;
    color:#233042;
}

.legend-dot{
    display:inline-block;
    width:10px;
    height:10px;
    border-radius:50%;
    margin-right:6px;
}

.legend-fest{ background:#14a89d; }
.legend-kurzzeit{ background:#e0982e; }

/* Stopp-Liste */

.stop-liste{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.stop-row{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 16px;
    background:#f8fbfb;
    border-radius:14px;
}

.stop-edit-controls{
    display:flex;
    gap:6px;
    flex-shrink:0;
}

.stop-edit-btn{
    width:30px;
    height:30px;
    border-radius:8px;
    border:1px solid #e2e8e8;
    background:#ffffff;
    color:#5c6670;
    font-size:12px;
    cursor:pointer;
    transition:.2s;
}

.stop-edit-btn:hover:not(:disabled){
    border-color:#14a89d;
    color:#14a89d;
}

.stop-edit-btn:disabled{
    opacity:.3;
    cursor:default;
}

.stop-edit-remove:hover:not(:disabled){
    border-color:#c9433d;
    color:#c9433d;
}

.stop-hinzufuegen-panel{
    background:#f8fbfb;
    border-radius:14px;
    padding:16px 18px;
    margin-top:14px;
}

.stop-hinzufuegen-titel{
    font-size:13px;
    font-weight:700;
    color:#5c6670;
    margin-bottom:10px;
}

.kunden-checkbox-liste{
    max-height:220px;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:2px;
    margin-bottom:14px;
    background:#ffffff;
    border-radius:10px;
    padding:6px;
}

.kunden-checkbox-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    border-radius:8px;
    font-size:14px;
    color:#233042;
    cursor:pointer;
    transition:.15s;
}

.kunden-checkbox-row:hover{
    background:#f2fdfc;
}

.kunden-checkbox-row input{
    width:16px;
    height:16px;
    accent-color:#14a89d;
    cursor:pointer;
}

.tour-detail-actions{
    display:flex;
    gap:10px;
    flex-shrink:0;
}

.tour-edit-panel{
    background:#f8fbfb;
    border-radius:14px;
    padding:16px 18px;
    margin:16px 0;
}

.stop-num{
    width:30px;
    height:30px;
    border-radius:50%;
    background:#14a89d;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:700;
    flex-shrink:0;
}

.stop-num-kurzzeit{
    background:#e0982e;
}

.stop-info{
    flex:1;
}

.stop-name-line{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:2px;
}

.stop-address{
    font-size:14px;
    color:#7c8a9a;
}

.stop-leistung{
    font-size:13px;
    color:#14a89d;
    margin-top:2px;
}

/* Badges */

.badge{
    font-size:11px;
    padding:3px 9px;
    border-radius:20px;
    font-weight:600;
}

.badge-fest{
    background:#dff8f7;
    color:#14a89d;
}

.badge-kurzzeit{
    background:#fbead2;
    color:#c98a1f;
}

/* Sidebar active state */

nav a.active{
    background:#dff8f7;
    color:#14a89d;
}

/* ---------------- ÜBERSICHT / DASHBOARD ---------------- */

.schnellzugriff-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    gap:16px;
    margin-bottom:28px;
}

.qa-card{
    background:#ffffff;
    border-radius:16px;
    padding:18px 16px;
    box-shadow:0 0 18px rgba(0,0,0,.06);
    cursor:pointer;
    border:2px solid transparent;
    transition:.2s;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.qa-card:hover{
    border-color:#9fe6e2;
    transform:translateY(-2px);
}

.qa-icon{
    font-size:24px;
}

.qa-title{
    font-size:15px;
    font-weight:700;
    color:#233042;
}

.qa-sub{
    font-size:12.5px;
    color:#7c8a9a;
}

@media (max-width: 1200px){
    .schnellzugriff-grid{ grid-template-columns:repeat(3, 1fr); }
}

@media (max-width: 700px){
    .schnellzugriff-grid{ grid-template-columns:repeat(2, 1fr); }
}

.dash-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    align-items:start;
}

.dash-heading{
    font-size:17px;
    color:#233042;
    margin-bottom:14px;
    display:flex;
    align-items:center;
    gap:10px;
}

.dash-badge{
    background:#fbead2;
    color:#c98a1f;
    font-size:12px;
    font-weight:700;
    padding:3px 10px;
    border-radius:20px;
}

.dash-panel{
    background:#ffffff;
    border-radius:18px;
    padding:10px;
    box-shadow:0 0 20px rgba(0,0,0,.06);
    display:flex;
    flex-direction:column;
    gap:6px;
}

.tour-card-static{
    cursor:default;
}

.tour-card-static:hover{
    border-color:transparent;
}

.status-pill{
    font-size:12px;
    font-weight:700;
    padding:3px 10px;
    border-radius:20px;
}

.status-geplant{
    background:#eef1f4;
    color:#7c8a9a;
}

.status-aktiv{
    background:#dff8f7;
    color:#14a89d;
}

.status-abgeschlossen{
    background:#e9f7ec;
    color:#3ba55c;
}

/* Krankmeldungen */

.km-row{
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px 10px;
    border-radius:12px;
}

.km-row:hover{
    background:#f8fbfb;
}

.km-info{
    flex:1;
    display:flex;
    flex-direction:column;
}

.km-status{
    font-size:12px;
    font-weight:700;
    padding:3px 10px;
    border-radius:20px;
}

.km-status-offen{
    background:#fbead2;
    color:#c98a1f;
}

.km-status-frei{
    background:#e9f7ec;
    color:#3ba55c;
}

.km-btn{
    background:#14a89d;
    color:#fff;
    border:none;
    padding:8px 16px;
    border-radius:10px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:.2s;
}

.km-btn:hover{
    background:#0f8a80;
}

/* Hinweise */

.hinweis-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    font-size:14px;
    color:#233042;
}

.hinweis-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#e0982e;
    flex-shrink:0;
}

.hinweis-dot-warn{
    background:#d9544f;
}

.hinweis-warn{
    color:#a83f3b;
}

/* ---------------- MITARBEITER ---------------- */

.ma-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:18px;
}

.ma-card{
    background:#ffffff;
    border-radius:18px;
    padding:20px;
    box-shadow:0 0 20px rgba(0,0,0,.06);
}

.ma-card-head{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:14px;
}

.ma-avatar{
    width:44px;
    height:44px;
    font-size:15px;
}

.ma-card-head h4{
    font-size:17px;
    color:#233042;
}

.ma-status{
    display:inline-block;
    margin-bottom:14px;
}

.status-ma-dienst{
    background:#dff8f7;
    color:#14a89d;
}

.status-ma-frei{
    background:#e9f7ec;
    color:#3ba55c;
}

.status-ma-krank{
    background:#fbead2;
    color:#c98a1f;
}

.ma-details{
    border-top:1px solid #eef1f4;
    padding-top:12px;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.ma-detail-row{
    font-size:14px;
    color:#5c6670;
}

.ma-detail-row .label{
    display:inline-block;
    width:52px;
    color:#7c8a9a;
    font-weight:600;
}

@media (max-width: 1100px){
    .ma-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 700px){
    .ma-grid{ grid-template-columns:1fr; }
}

@media (max-width: 900px){
    .touren-layout{ grid-template-columns:1fr; }
    .stats-row{ grid-template-columns:repeat(2,1fr); }
    .dash-layout{ grid-template-columns:1fr; }
}

/* ---------------- DIENSTPLAN ---------------- */

.dp-panel{
    background:#ffffff;
    border-radius:18px;
    padding:16px;
    box-shadow:0 0 20px rgba(0,0,0,.06);
    overflow-x:auto;
}

.dp-table{
    min-width:820px;
}

.dp-row{
    display:grid;
    grid-template-columns:220px repeat(7, 1fr);
    align-items:center;
    padding:10px 6px;
    border-bottom:1px solid #f1f4f4;
}

.dp-row:last-child{
    border-bottom:none;
}

.dp-head{
    color:#7c8a9a;
    font-size:13px;
    font-weight:700;
    border-bottom:2px solid #eef1f4;
}

.dp-name-col{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:14px;
    color:#233042;
    font-weight:600;
}

.dp-avatar{
    width:32px;
    height:32px;
    font-size:12px;
    flex-shrink:0;
}

.dp-day-col{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    padding:4px 0;
    border-radius:10px;
}

.dp-today{
    background:#f2fdfc;
}

.dp-date{
    font-size:11px;
    color:#a7b2bc;
}

.dp-cell{
    width:32px;
    height:32px;
    border-radius:9px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:700;
    color:#fff;
}

.dp-status-hint{
    font-size:14px;
    color:#7c8a9a;
    min-height:20px;
    margin-bottom:16px;
    transition:.2s;
}

.dp-status-hint.dp-status-done{
    color:#14a89d;
    font-weight:600;
}

/* Auswahl-Leiste: Monat / Ansicht / Woche als Dropdowns */

.dp-auswahl-leiste{
    display:flex;
    gap:20px;
    margin-bottom:20px;
    flex-wrap:wrap;
}

.dp-auswahl-feld{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.dp-select{
    padding:9px 12px;
    font-size:14px;
    min-width:190px;
    border-radius:10px;
}

.dp-zeitraum-select{
    padding:8px 12px;
    font-size:13px;
    width:auto;
}

/* Monatsansicht: mehrere Wochenbloecke gestapelt */

.dp-monats-woche-label{
    font-size:13px;
    font-weight:700;
    color:#7c8a9a;
    padding:10px 10px 4px;
}

.dp-cell-leer{
    background:transparent;
    color:#d5dcdc;
}

.dp-cell-F{ background:#14a89d; }
.dp-cell-S{ background:#233042; }
.dp-cell-frei{ background:#eef1f4; color:#a7b2bc; }
.dp-cell-K{ background:#e0982e; }
.dp-cell-U{ background:#7c6fd6; }

.dp-cell-editable{
    cursor:pointer;
    transition:.15s;
}

.dp-cell-editable:hover{
    transform:scale(1.12);
    box-shadow:0 2px 8px rgba(0,0,0,.25);
}

.dp-legend{
    display:flex;
    gap:22px;
    margin-top:16px;
    font-size:14px;
    color:#5c6670;
    align-items:center;
}

.dp-legend-swatch{
    width:18px;
    height:18px;
    border-radius:5px;
    display:inline-flex;
    margin-right:8px;
    vertical-align:middle;
}

@media (max-width: 900px){
    .touren-layout{ grid-template-columns:1fr; }
    .stats-row{ grid-template-columns:repeat(2,1fr); }
    .dash-layout{ grid-template-columns:1fr; }
}

/* ---------------- KUNDEN ---------------- */

.ku-table{
    min-width:760px;
}

.ku-row{
    display:grid;
    grid-template-columns:1.4fr 1.8fr 0.8fr 1fr 1fr;
    align-items:center;
    gap:12px;
    padding:12px 10px;
    border-bottom:1px solid #f1f4f4;
}

.ku-row:last-child{
    border-bottom:none;
}

.ku-head{
    color:#7c8a9a;
    font-size:13px;
    font-weight:700;
    border-bottom:2px solid #eef1f4;
}

.ku-name{
    font-size:14px;
    font-weight:600;
    color:#233042;
}

.ku-address{
    font-size:14px;
    color:#5c6670;
}

.pg-pill{
    display:inline-block;
    background:#eef1f4;
    color:#5c6670;
    font-size:12px;
    font-weight:700;
    padding:3px 10px;
    border-radius:20px;
}

/* ---------------- STATISTIKEN ---------------- */

.stat-panel{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.bar-row{
    display:grid;
    grid-template-columns:120px 1fr 50px;
    align-items:center;
    gap:12px;
}

.bar-label{
    font-size:14px;
    color:#5c6670;
    font-weight:600;
}

.bar-track{
    height:14px;
    background:#eef1f4;
    border-radius:8px;
    overflow:hidden;
}

.bar-fill{
    height:100%;
    border-radius:8px;
    transition:width .4s ease;
}

.bar-teal{ background:#14a89d; }
.bar-navy{ background:#233042; }
.bar-orange{ background:#e0982e; }
.bar-grau{ background:#a7b2bc; }

.bar-value{
    font-size:14px;
    font-weight:700;
    color:#233042;
    text-align:right;
}


/* ---------------- ROSI (KI-ASSISTENT) ---------------- */

.rosi-panel{
    background:#ffffff;
    border-radius:20px;
    padding:26px;
    box-shadow:0 0 25px rgba(0,0,0,.06);
}

.rosi-intro{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:22px;
    padding-bottom:20px;
    border-bottom:1px solid #eef1f4;
}

.rosi-avatar{
    width:52px;
    height:52px;
    border-radius:16px;
    background:#14a89d;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    flex-shrink:0;
}

.rosi-intro h3{
    font-size:19px;
    color:#233042;
    margin-bottom:4px;
}

.rosi-verlauf{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-bottom:20px;
}

.chat-bubble-row{
    display:flex;
    justify-content:flex-start;
}

.chat-row-pdl{
    justify-content:flex-end;
}

.chat-bubble{
    max-width:70%;
    padding:12px 16px;
    border-radius:16px;
    font-size:14px;
    line-height:1.5;
}

.chat-bubble-ma{
    background:#f1f5f5;
    color:#233042;
    border-bottom-left-radius:4px;
}

.chat-bubble-pdl{
    background:#14a89d;
    color:#fff;
    border-bottom-right-radius:4px;
}

.rosi-avatar-photo{
    background-image:url('rosi-avatar.jpg');
    background-size:cover;
    background-position:center;
    border:2px solid #14a89d;
}

.rosi-vorschlaege{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:20px;
}

.rosi-chip{
    background:#f2fdfc;
    color:#14a89d;
    border:1px solid #cdeee9;
    padding:8px 14px;
    border-radius:20px;
    font-size:13px;
    font-weight:600;
    cursor:default;
}

.chat-input-row{
    display:flex;
    gap:10px;
    border-top:1px solid #eef1f4;
    padding-top:18px;
}

.chat-input{
    flex:1;
    border:1px solid #e2e8e8;
    border-radius:12px;
    padding:12px 14px;
    font-size:14px;
    font-family:inherit;
    background:#f8fbfb;
    color:#7c8a9a;
}

/* ---------------- ABWESENHEITEN ---------------- */

.abw-formular-card{
    background:#ffffff;
    border-radius:18px;
    padding:22px 24px;
    box-shadow:0 0 20px rgba(0,0,0,.06);
    margin-bottom:20px;
}

.abw-formular-row{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    gap:20px;
    align-items:start;
    margin-top:14px;
}

.abw-formular-actions{
    grid-column:1 / -1;
    display:flex;
    gap:12px;
    margin-top:6px;
}

.abw-formular-actions .km-btn{
    flex:1;
    text-align:center;
    padding:11px 18px;
}

.abw-formular-actions .btn-secondary{
    flex:1;
    text-align:center;
    padding:11px 18px;
}

@media (max-width: 900px){
    .abw-formular-row{ grid-template-columns:1fr; }
}

.abw-ergebnis{
    background:#f2fdfc;
    border:1px solid #cdeee9;
    border-radius:16px;
    padding:20px 22px;
    margin-top:22px;
    margin-bottom:16px;
}

.abw-ergebnis h3{
    font-size:19px;
    color:#0f8a80;
    margin-bottom:6px;
}

.abw-ergebnis-sub{
    font-size:14px;
    color:#4a7d78;
}

.abw-tag-card{
    background:#ffffff;
    border-radius:16px;
    padding:18px 20px;
    box-shadow:0 0 18px rgba(0,0,0,.06);
    margin-bottom:14px;
}

.abw-tag-card h4{
    font-size:16px;
    color:#233042;
    margin-bottom:6px;
}

.abw-tag-info{
    font-size:14px;
    color:#5c6670;
    margin-bottom:14px;
}

.abw-tag-erledigt{
    background:#f0faf3;
}

.abw-tag-erledigt .abw-tag-info{
    color:#2f8f52;
    font-weight:600;
    margin-bottom:0;
}

.abw-vorschlag-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:12px 14px;
    background:#f8fbfb;
    border-radius:12px;
    margin-bottom:10px;
}

.abw-vorschlag-row:last-child{
    margin-bottom:0;
}

.abw-vorschlag-info{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    font-size:14px;
    color:#233042;
}

.abw-medaille{
    font-size:18px;
}

.abw-vorschlag-meta{
    font-size:13px;
    color:#7c8a9a;
}

.abw-keine-vorschlaege{
    font-size:13px;
    color:#a7b2bc;
    font-style:italic;
}

/* ---------------- KUNDE HINZUFÜGEN / ENTFERNEN ---------------- */

.view-header-right{
    display:flex;
    align-items:center;
    gap:16px;
}

.ku-table-editable .ku-row{
    grid-template-columns:1.4fr 1.8fr 0.8fr 1fr 1fr 40px;
}

.ku-delete{
    width:28px;
    height:28px;
    border-radius:8px;
    border:none;
    background:#fbeceb;
    color:#c9433d;
    font-size:16px;
    line-height:1;
    cursor:pointer;
    transition:.2s;
}

.ku-delete:hover{
    background:#f5d3d1;
}

.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,26,.45);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:100;
}

.modal-box{
    background:#ffffff;
    border-radius:20px;
    padding:28px;
    width:420px;
    max-width:90vw;
    box-shadow:0 20px 50px rgba(0,0,0,.25);
}

.modal-box h3{
    font-size:19px;
    color:#233042;
    margin-bottom:18px;
}

.form-row{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:14px;
}

.form-label{
    font-size:13px;
    font-weight:600;
    color:#5c6670;
}

.form-input{
    border:1px solid #e2e8e8;
    border-radius:10px;
    padding:10px 12px;
    font-size:14px;
    font-family:inherit;
    color:#233042;
    background:#f8fbfb;
}

.form-input:focus{
    outline:none;
    border-color:#14a89d;
}

.form-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:20px;
}

.btn-secondary{
    background:#eef1f4;
    color:#5c6670;
    border:none;
    padding:10px 18px;
    border-radius:10px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
}

.btn-secondary:hover{
    background:#e2e8e8;
}

/* ---------------- EINSTELLUNGEN ---------------- */

.settings-layout{
    display:grid;
    grid-template-columns:230px 1fr;
    gap:24px;
    align-items:start;
}

.settings-tabs{
    display:flex;
    flex-direction:column;
    gap:6px;
    background:#ffffff;
    border-radius:16px;
    padding:10px;
    box-shadow:0 0 20px rgba(0,0,0,.06);
}

.settings-tab{
    padding:12px 14px;
    border-radius:12px;
    font-size:14px;
    font-weight:600;
    color:#5c6670;
    cursor:pointer;
    transition:.2s;
}

.settings-tab:hover{
    background:#f8fbfb;
}

.settings-tab.active{
    background:#dff8f7;
    color:#14a89d;
}

.settings-panel{
    padding:24px;
}

.settings-hint{
    font-size:13px;
    color:#a7b2bc;
    margin-top:6px;
    font-style:italic;
}

.settings-text{
    font-size:14px;
    color:#5c6670;
    line-height:1.6;
    margin-bottom:18px;
}

.toggle-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:16px 4px;
    border-bottom:1px solid #eef1f4;
}

.toggle-row:last-child{
    border-bottom:none;
}

.toggle-row strong{
    font-size:14px;
    color:#233042;
}

.toggle-switch{
    width:46px;
    height:26px;
    border-radius:20px;
    background:#eef1f4;
    position:relative;
    cursor:pointer;
    flex-shrink:0;
    transition:.2s;
}

.toggle-switch::after{
    content:"";
    position:absolute;
    top:3px;
    left:3px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#ffffff;
    box-shadow:0 1px 3px rgba(0,0,0,.3);
    transition:.2s;
}

.toggle-switch.on{
    background:#14a89d;
}

.toggle-switch.on::after{
    left:23px;
}

@media (max-width: 900px){
    .settings-layout{ grid-template-columns:1fr; }
}