:root{
    --surface:#ffffff;
    --surface-soft:#f9fafb;
    --line:#e5e7eb;
    --text:#111827;
    --muted:#6b7280;
    --blue:#2563eb;
    --purple:#7c3aed;
    --shadow:0 10px 30px rgba(15,23,42,.06);
    --shadow-soft:0 4px 14px rgba(15,23,42,.06);
}

*{box-sizing:border-box}

body{
    font-family:Arial,sans-serif;
    background:linear-gradient(180deg,#f8fafc 0%,#eef2f7 100%);
    margin:0;
    padding:24px;
    color:var(--text);
}

.container{max-width:1280px;margin:auto}

h1{
    text-align:center;
    margin:4px 0 20px;
    font-size:32px;
}

.top-action{
    display:flex;
    justify-content:center;
    gap:12px;
    margin-bottom:22px;
    flex-wrap:wrap;
}

.whiteboard-page-link{
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.open-modal-btn{
    width:auto;
    padding:13px 22px;
    border:none;
    border-radius:999px;
    background:var(--text);
    color:white;
    font-size:15px;
    font-weight:bold;
    cursor:pointer;
    box-shadow:var(--shadow-soft);
}

.tabs{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-bottom:24px;
}

.tab-btn{
    width:auto;
    padding:11px 18px;
    border-radius:999px;
    background:#fff;
    color:#374151;
    border:1px solid var(--line);
    box-shadow:var(--shadow-soft);
}

.tab-btn.active{
    background:#111827;
    color:white;
}

.inbox-wrapper{margin-bottom:24px}

.inbox{
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(10px);
    border:1px solid rgba(148,163,184,.35);
    border-radius:24px;
    padding:20px;
    min-height:150px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:14px;
    align-items:start;
    box-shadow:var(--shadow);
}

.inbox h2,
.inbox-subtitle{
    grid-column:1/-1;
    text-align:center;
}

.inbox h2{
    margin:0;
    font-size:20px;
}

.inbox-subtitle{
    color:var(--muted);
    font-size:14px;
    margin-bottom:8px;
}

.board{
    display:grid;
    grid-template-columns:1fr 3fr;
    gap:18px;
    align-items:start;
}

.board.done-view{
    grid-template-columns:1fr;
}

.column{
    background:rgba(255,255,255,.7);
    border:1px solid rgba(148,163,184,.25);
    border-radius:24px;
    padding:16px;
    min-height:420px;
    box-shadow:var(--shadow);
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    align-content:start;
}

.column h2{
    grid-column:1/-1;
    text-align:center;
    margin:0 0 8px;
    font-size:18px;
}

.done-column{
    display:none;
    background:#ffffff;
}

.done-column.active{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.done-day-section{
    grid-column:1/-1;
    background:rgba(255,255,255,.72);
    border:1px solid rgba(148,163,184,.28);
    border-radius:22px;
    padding:16px;
    margin-bottom:12px;
    box-shadow:var(--shadow-soft);
}

.done-day-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:0;
    padding:14px 18px;
    font-size:16px;
    color:#166534;
    background:#ffffff;
    border:1px solid rgba(148,163,184,.18);
    border-radius:16px;
    box-shadow:0 4px 14px rgba(15,23,42,.04);
    cursor:pointer;
    user-select:none;
}

.done-day-title-left{
    display:flex;
    align-items:center;
    gap:8px;
}

.done-toggle{
    width:26px;
    height:26px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#dcfce7;
    color:#166534;
    font-weight:bold;
    font-size:18px;
    line-height:1;
    flex:0 0 26px;
}

.done-day-count{
    background:#dcfce7;
    color:#166534;
    padding:5px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:bold;
}

.done-day-cards{
    display:none;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-top:14px;
}

.done-day-section.open .done-day-cards{
    display:grid;
}

.done-day-section.open .done-toggle{
    background:#bbf7d0;
}

.done-day-section.open .done-toggle::before{
    content:"−";
}

.done-day-section:not(.open) .done-toggle::before{
    content:"+";
}

.ideen-column{
    grid-template-columns:1fr !important;
    padding:28px;
    padding-bottom:150px;
}

.tagesablauf-column{
    grid-template-columns:repeat(3,1fr) !important;
    position:relative;
    overflow:visible;
    padding-top:92px;
}

/* Ablauf-Leiste oben */

.tagesablauf-column::before{
    content:none;
    position:absolute;
    top:22px;
    left:50%;
    transform:translateX(-50%);
    background:rgba(255,255,255,0.88);
    border:1px solid rgba(34,197,94,0.18);
    color:#15803d;
    padding:14px 22px;
    border-radius:999px;
    font-size:14px;
    font-weight:700;
    letter-spacing:0.2px;
    box-shadow:0 6px 18px rgba(15,23,42,.06);
    z-index:5;
    white-space:nowrap;
}

/* Karten leicht modernisieren */

.tagesablauf-column .card{
    position:relative;
    z-index:2;
    transition:transform .18s ease, box-shadow .18s ease;
}

.tagesablauf-column .card:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 24px rgba(15,23,42,.10);
}





.active-column.hidden{
    display:none;
}

.card{
    position:relative;
    background:var(--surface);
    border-radius:18px;
    padding:14px;
    margin-bottom:0;
    box-shadow:var(--shadow-soft);
    cursor:grab;
    border:1px solid var(--line);
    border-left:5px solid #9ca3af;
    transition:.18s ease;
    display:flex;
    flex-direction:column;
    height:100%;
}


.card{
    user-select:none;
}

.card.dragging{
    opacity:.35;
    transform:scale(.98);
}

.card.dragging.dragging-hidden{
    display:none;
}

.drop-placeholder{
    border:2px dashed #94a3b8;
    background:rgba(148,163,184,.12);
    border-radius:18px;
    min-height:120px;
    box-shadow:inset 0 0 0 1px rgba(148,163,184,.2);
}

.column.drag-over{
    background:rgba(219,234,254,.45);
    border-color:#93c5fd;
}

.card:hover{transform:translateY(-2px)}

.card.pinned{border-top:3px solid #f59e0b}
.card.completed{
    opacity:1;
    filter:none;
    cursor:default;
}
.card.template-card{border-style:dashed}

.order-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:34px;
    height:24px;
    padding:0 8px;
    border-radius:999px;
    background:#eef2ff;
    color:#3730a3;
    font-size:12px;
    font-weight:bold;
    margin-bottom:10px;
    max-width:max-content;
}

.card h3{
    margin:0 0 8px;
    font-size:16px;
    padding-right:92px;
    line-height:1.25;
}

.card p{
    margin:6px 0;
    color:#374151;
    font-size:12px;
    line-height:1.4;
}

.pin-btn,.done-btn,.edit-btn,.whiteboard-btn{
    position:absolute;
    top:12px;
    width:28px;
    height:28px;
    border:none;
    border-radius:10px;
    background:#f3f4f6;
    cursor:pointer;
    font-size:14px;
    padding:0;
    color:#374151;
}

.pin-btn{right:10px}
.done-btn{right:44px}
.edit-btn{right:78px}
.pin-btn.active{background:#fef3c7}
.done-btn.active{background:#dcfce7;color:#166534}

.done-btn:hover{
    background:#dcfce7;
    color:#166534;
    transition:.15s ease;
}

.edit-btn:hover{
    background:#dbeafe;
    color:#1d4ed8;
    transition:.15s ease;
}

.badge{
    display:inline-block;
    margin-top:8px;
    padding:5px 10px;
    border-radius:999px;
    color:white;
    font-size:11px;
    font-weight:bold;
}

.category-a-card{border-left-color:#8b5e3c}
.category-a-card .badge{background:#8b5e3c}
.category-b-card{border-left-color:#16a34a}
.category-b-card .badge{background:#16a34a}
.category-c-card{border-left-color:#d4af37}
.category-c-card .badge{background:#d4af37}

.category-d-card{border-left-color:#7dd3fc}
.category-d-card .badge{
    background:#7dd3fc;
    color:#0f172a;
}

.timestamp{
    margin-top:8px;
    font-size:11px;
    color:var(--muted);
    background:var(--surface-soft);
    padding:7px 9px;
    border-radius:10px;
    line-height:1.35;
}

.done-timestamp{
    background:#dcfce7;
    color:#166534;
    font-weight:bold;
}

.checklist{
    margin-top:10px;
    padding-top:9px;
    border-top:none;
}

.checklist-title{
    font-weight:bold;
    margin-bottom:8px;
    font-size:12px;
}

.check-item{
    display:flex;
    align-items:center;
    gap:8px;
    margin:8px 0;
    font-size:12px;
}

.check-item input[type="checkbox"]{
    width:17px;
    height:17px;
    flex:0 0 17px;
    margin:0;
}

.check-item.done span{
    text-decoration:line-through;
    color:#9ca3af;
}

.delete-btn{
    position:absolute;
    top:10px;
    right:116px;
    width:28px;
    height:28px;
    border:none;
    border-radius:10px;
    background:#f3f4f6;
    color:#6b7280;
    cursor:pointer;
    font-size:16px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.15s ease;
}

.delete-btn:hover{
    background:#fee2e2;
    color:#991b1b;
}

.template-card .delete-btn{
    right:10px;
    left:auto;
}

.template-card .order-badge{
    display:none;
}



.modal-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.55);
    z-index:1000;
    align-items:center;
    justify-content:center;
    padding:18px;
}

.modal-overlay.active{display:flex}

.modal-box{
    background:white;
    width:100%;
    max-width:680px;
    max-height:90vh;
    border-radius:28px;
    padding:26px;
    box-shadow:0 30px 80px rgba(15,23,42,.25);
    display:flex;
    flex-direction:column;
    overflow:hidden;
}



.modal-content .accordion-item:first-of-type{
    margin-top:22px;
}

.modal-content{
    flex:1;
    overflow-y:auto;
    padding-right:4px;
}

.modal-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    margin-bottom:20px;
}

.modal-header h2{
    margin:0;
    font-size:24px;
}

.modal-header p{
    margin:6px 0 0;
    color:var(--muted);
    font-size:14px;
}

.close-btn{
    width:auto;
    padding:6px 10px;
    border-radius:999px;
    background:#f3f4f6;
    color:#111827;
    font-size:18px;
}

.form-grid{
    display:grid;
    gap:16px;
    width:100%;
}

input[type="text"],
textarea{
    padding:13px;
    border:1px solid var(--line);
    border-radius:12px;
    font-size:15px;
    background:#f9fafb;
    width:100%;
}

textarea{
    resize:vertical;
    min-height:90px;
}

input[type="text"]:focus,
textarea:focus{
    outline:none;
    box-shadow:none;
    border-color:var(--line);
}


/* Einheitlicher Abstand oberhalb und unterhalb von Kategorie auswählen */
.category-section{
    margin-top:24px;
    margin-bottom:24px;
}

.label-title{
    font-size:14px;
    font-weight:bold;
    color:#374151;
    margin-bottom:10px;
}

.label-options,


.category-label{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:auto;
    min-width:auto;
    max-width:100%;
    padding:10px 24px;
    margin-right:8px;
    margin-bottom:8px;
    border-radius:999px;
    background:#f3f4f6;
    color:#111827;
    font-size:14px;
    font-weight:bold;
    cursor:pointer;
    line-height:1.2;
    white-space:normal;
    border:1px solid transparent;
}

.category-label.active{color:white}

.modal-box .label-options{
    background:transparent;
    border-radius:0;
    padding:0;
}

.modal-box .category-label{
    flex:0 0 auto;
}

.modal-box .category-label.active{
    box-shadow:0 2px 8px rgba(15,23,42,.10);
}


.whiteboard-text-box,
.text-box{
    position:absolute;
    z-index:90;
    min-width:260px;
    background:#ffffff;
    border:1px solid rgba(37,99,235,.30);
    border-radius:14px;
    box-shadow:0 14px 34px rgba(15,23,42,.18);
    padding:10px;
}

.whiteboard-text-box textarea,
.text-box textarea{
    width:100%;
    min-height:90px;
    border:1px solid #e2e8f0;
    border-radius:10px;
    padding:10px;
    resize:both;
    outline:none;
    font-family:Arial,sans-serif;
    font-size:18px;
    color:#111827;
    background:#ffffff;
}

.whiteboard-text-box-actions,
.text-box-actions{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:8px;
}

.whiteboard-text-box-actions button,
.text-box-actions button{
    width:auto;
    min-height:30px;
    padding:6px 10px;
    border:none;
    border-radius:9px;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
}

.whiteboard-text-apply,
.text-apply{
    background:#2563eb;
    color:#fff;
}

.whiteboard-text-cancel,
.text-cancel{
    background:#f1f5f9;
    color:#334155;
}


.whiteboard-text-object{
    position:absolute;
    z-index:70;
    min-width:90px;
    min-height:34px;
    padding:6px 10px;
    border:1px dashed transparent;
    border-radius:10px;
    color:#111827;
    background:rgba(255,255,255,.18);
    cursor:move;
    white-space:pre-wrap;
    font-family:Arial,sans-serif;
    line-height:1.25;
}

.whiteboard-text-object:hover,
.whiteboard-text-object:focus{
    border-color:#2563eb;
    background:rgba(255,255,255,.78);
    box-shadow:0 6px 18px rgba(15,23,42,.10);
    outline:none;
}

.whiteboard-text-object[contenteditable="true"]{
    cursor:text;
}


.whiteboard-toolbar{
    display:grid;
    grid-template-columns:repeat(4,minmax(220px,1fr));
    gap:14px;
    align-items:stretch;
}

.whiteboard-tool-group{
    background:rgba(255,255,255,.82);
    border:1px solid rgba(148,163,184,.14);
    border-radius:18px;
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:10px;
    box-shadow:0 8px 22px rgba(15,23,42,.05);
    backdrop-filter:blur(10px);
}

.whiteboard-group-title{
    font-size:11px;
    font-weight:800;
    color:#64748b;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.whiteboard-inline-tools{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
}


.compact-toolbar{
    display:grid;
    grid-template-columns:repeat(4,minmax(120px,1fr));
    gap:10px;
}

.whiteboard-category-btn{
    border:none;
    border-radius:16px;
    padding:12px 14px;
    background:rgba(255,255,255,.82);
    border:1px solid rgba(148,163,184,.14);
    box-shadow:0 8px 22px rgba(15,23,42,.05);
    color:#334155;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    transition:.18s ease;
}

.whiteboard-category-btn:hover{
    transform:translateY(-1px);
}

.whiteboard-category-btn.active{
    background:linear-gradient(135deg,#2563eb,#3b82f6);
    color:#fff;
    box-shadow:0 12px 24px rgba(37,99,235,.22);
}

.whiteboard-panel-container{
    position:relative;
    min-height:120px;
    margin-top:12px;
}

.whiteboard-tool-group{
    display:none;
    background:rgba(255,255,255,.92);
    border:1px solid rgba(148,163,184,.14);
    border-radius:18px;
    padding:14px;
    box-shadow:0 14px 34px rgba(15,23,42,.08);
    backdrop-filter:blur(10px);
    animation:fadePanel .18s ease;
}

.whiteboard-tool-group.active{
    display:flex;
    flex-direction:column;
    gap:12px;
}

@keyframes fadePanel{
    from{
        opacity:0;
        transform:translateY(4px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

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

@media(max-width:1200px){
    .whiteboard-toolbar{
        grid-template-columns:repeat(2,minmax(220px,1fr));
    }
}

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

@media(max-width:600px){
    .modal-box .category-label{
        width:100%;
        justify-content:flex-start;
    }
}

.category-a.active{background:#8b5e3c}
.category-b.active{background:#16a34a}
.category-c.active{background:#d4af37}
.category-d.active{background:#7dd3fc}





.draft-option input{
    width:18px;
    height:18px;
}

.draft-help{
    margin-top:7px;
    margin-bottom:24px;
    font-size:12px;
    color:var(--muted);
}

.draft-badge{
    display:inline-block;
    margin-top:8px;
    margin-left:6px;
    padding:5px 10px;
    border-radius:999px;
    background:#f3f4f6;
    color:#374151;
    font-size:11px;
    font-weight:bold;
}

.priority-1.active{background:#111827}
.priority-2.active{background:#4b5563}
.priority-3.active{background:#9ca3af}


/* Abstand zwischen Beschreibung und Checkliste im Formular */
.expand-box + .expand-box{
    margin-top:24px;
}

.expand-box{
    background:#f9fafb;
    border-radius:16px;
    overflow:hidden;
    border:1px solid var(--line);
}

.expand-header{
    padding:14px;
    font-weight:bold;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.expand-content{
    display:none;
    padding:0 14px 22px;
}

.expand-content.active{display:block}

.modal-actions{
    width:100%;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:12px;
    margin-top:auto;
    padding-top:18px;
    border-top:none;
    background:white;
    position:sticky;
    bottom:0;
}

.whiteboard-modal{
    max-width:980px;
}

.whiteboard-overlay-fullscreen{
    padding:0;
}

.whiteboard-overlay-fullscreen .whiteboard-modal{
    width:100%;
    height:100vh;
    max-width:none;
    max-height:none;
    border-radius:0;
}

.whiteboard-overlay-fullscreen .modal-content,
.whiteboard-overlay-fullscreen .whiteboard-canvas-wrap{
    flex:1;
}

.whiteboard-overlay-fullscreen .whiteboard-canvas-wrap{
    height:calc(100vh - 210px);
}


.whiteboard-toolbar-group{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
}

.whiteboard-toolbar{
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(10px);
    border:1px solid rgba(148,163,184,.18);
    padding:12px;
    border-radius:16px;
    box-shadow:0 6px 18px rgba(15,23,42,.05);
}



.whiteboard-icon-btn{
    min-width:36px;
    padding:8px 10px !important;
    font-size:15px !important;
    font-weight:700;
}

.whiteboard-tool-active{
    background:linear-gradient(135deg,#2563eb,#3b82f6) !important;
    color:#ffffff !important;
    border-color:#2563eb !important;
    box-shadow:0 10px 24px rgba(37,99,235,.22);
}

.whiteboard-toolbar button{
    min-height:34px;
    padding:6px 10px;
    font-size:12px;
    border:1px solid rgba(148,163,184,.16);
    background:#ffffff;
    color:#334155;
    transition:.16s ease;
}

.whiteboard-toolbar button:hover{
    background:#f8fafc;
    border-color:#cbd5e1;
}

.whiteboard-zoom-control{
    display:flex;
    align-items:center;
    gap:8px;
    background:#f8fafc;
    border:1px solid rgba(148,163,184,.16);
    border-radius:999px;
    padding:6px 12px;
}

.whiteboard-zoom-control input{
    width:130px;
    accent-color:#2563eb;
}



.whiteboard-color-picker{
    width:42px;
    height:42px;
    border:none;
    border-radius:12px;
    overflow:hidden;
    background:#fff;
    padding:4px;
    cursor:pointer;
    box-shadow:0 4px 12px rgba(15,23,42,.08);
}

.whiteboard-color-picker::-webkit-color-swatch{
    border:none;
    border-radius:10px;
}

.whiteboard-color-picker::-webkit-color-swatch-wrapper{
    padding:0;
}

.whiteboard-size-wrap{
    display:flex;
    align-items:center;
    gap:8px;
    background:#f8fafc;
    border:1px solid rgba(148,163,184,.16);
    border-radius:999px;
    padding:6px 12px;
}

.whiteboard-size-label{
    font-size:12px;
    font-weight:700;
    color:#64748b;
    letter-spacing:.02em;
}

.whiteboard-size-value{
    min-width:36px;
    text-align:right;
    font-size:12px;
    font-weight:700;
    color:#0f172a;
}

.whiteboard-size{
    accent-color:#2563eb;
}

.whiteboard-zoom-control span{
    min-width:44px;
    text-align:right;
    font-size:12px;
    font-weight:700;
    color:#334155;
}




.whiteboard-text-input{
    position:absolute;
    z-index:80;
    min-width:220px;
    min-height:54px;
    padding:10px 12px;
    border:2px solid #2563eb;
    border-radius:12px;
    outline:none;
    font-size:22px;
    background:#ffffff;
    color:#111827;
    box-shadow:0 10px 24px rgba(15,23,42,.16);
    resize:both;
    overflow:auto;
    font-family:Arial,sans-serif;
}
.whiteboard-toolbar{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
    margin-bottom:14px;
}

.whiteboard-toolbar button{
    width:auto;
    padding:8px 12px;
    border-radius:999px;
    font-size:14px;
}

.whiteboard-color{
    width:42px;
    height:42px;
    border:none;
    background:transparent;
    padding:0;
    cursor:pointer;
}

.whiteboard-size{
    width:140px;
}

.whiteboard-canvas-wrap{
    width:100%;
    height:560px;
    background:#ffffff;
    border:1px solid var(--line);
    border-radius:16px;
    overflow:auto;
    box-shadow:inset 0 0 0 1px rgba(15,23,42,.03);
    touch-action:none;
    position:relative;
}

.whiteboard-stage{
    width:max-content;
    height:max-content;
    position:relative;
}


.whiteboard-cursor-pen{
    cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") 2 28, auto !important;
}

.whiteboard-cursor-eraser{
    cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M20 8.5 15.5 4a2.1 2.1 0 0 0-3 0L3.5 13a2.1 2.1 0 0 0 0 3L8 20.5h4L20 12.5a2.1 2.1 0 0 0 0-3Z'/%3E%3Cpath d='M12 7 17 12'/%3E%3C/svg%3E") 4 26, auto !important;
}

.whiteboard-cursor-pan{
    cursor:grab !important;
}

.whiteboard-cursor-text{
    cursor:text !important;
}

#whiteboardCanvas{
    display:block;
    background-color:#ffffff;
    background-image:
        linear-gradient(#eef2f7 1px, transparent 1px),
        linear-gradient(90deg, #eef2f7 1px, transparent 1px);
    background-size:28px 28px;
    cursor:crosshair;
    touch-action:none;
}




.card-footer{
    margin-top:auto;
    padding-top:15px;
}

.whiteboard-label-btn{
    width:100%;
    padding:11px 14px;
    border:none;
    border-radius:12px;
    background:#f1f5f9;
    color:#64748b;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
    transition:all .18s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.whiteboard-label-btn:hover{
    background:#e2e8f0;
    color:#334155;
}


.whiteboard-header-actions{
    display:flex;
    align-items:center;
    gap:8px;
}


.delete-whiteboard-top-btn{
    width:auto;
    border:none;
    background:#ef4444;
    color:#fff;
    padding:8px 12px;
    border-radius:12px;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
    transition:.18s ease;
    box-shadow:0 6px 18px rgba(239,68,68,.18);
}

.delete-whiteboard-top-btn:hover{
    transform:translateY(-1px);
    background:#dc2626;
}


.save-whiteboard-top-btn{
    width:auto;
    border:none;
    background:#2563eb;
    color:#fff;
    padding:8px 12px;
    border-radius:12px;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
    transition:.18s ease;
    box-shadow:0 6px 18px rgba(37,99,235,.18);
}

.save-whiteboard-top-btn:hover{
    transform:translateY(-1px);
    background:#1d4ed8;
}

@media(max-width:900px){
    .whiteboard-header-actions{
        width:100%;
        justify-content:space-between;
    }

    .save-whiteboard-top-btn,
    .delete-whiteboard-top-btn{
        flex:1;
    }

    #whiteboardCanvas{
        height:520px;
    }

    .whiteboard-toolbar{
        flex-direction:column;
        align-items:stretch;
    }

    .whiteboard-toolbar button,
    .whiteboard-size{
        width:100%;
    }

    .whiteboard-zoom-control{
        width:100%;
        justify-content:space-between;
    }

    .whiteboard-zoom-control input{
        flex:1;
        width:100%;
    }
}


button{
    width:100%;
    padding:14px;
    border:none;
    border-radius:12px;
    background:#8b5e3c;
    color:white;
    font-size:15px;
    font-weight:bold;
    cursor:pointer;
}

.cancel-btn{
    background:#f3f4f6;
    color:#111827;
}

@media(max-width:900px){
    body{padding:12px}
    h1{font-size:26px}
    .open-modal-btn{width:100%}
    .tabs{flex-direction:column}
    .tab-btn{width:100%}

    .inbox{
        grid-template-columns:1fr;
        border-radius:16px;
    }

    .board{
        display:flex;
        overflow-x:auto;
        gap:14px;
        padding-bottom:10px;
    }

    .column,
    .ideen-column,
    .tagesablauf-column,
    .done-column.active{
        min-width:85%;
        grid-template-columns:1fr !important;
    }

    .done-day-cards{
        grid-template-columns:1fr;
    }

    .tagesablauf-column::before{
        display:none;
    }

    .modal-box{
        max-height:90vh;
        overflow-y:auto;
        border-radius:22px;
        padding:20px;
    }

    .modal-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .modal-actions button{
        width:100%;
        max-width:none;
        min-width:0;
    }
}

/* === Karten-Whiteboard Popup/Vollbild Layout v46 === */

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-panel-container{
    max-width:480px !important;
    width:100% !important;
    margin:10px auto 0 !important;
    min-height:auto !important;
}

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-panel-container .whiteboard-tool-group{
    max-width:460px !important;
    margin:0 auto !important;
    padding:10px !important;
    border-radius:16px !important;
    background:rgba(255,255,255,.96) !important;
    border:1px solid rgba(148,163,184,.18) !important;
    box-shadow:0 10px 24px rgba(15,23,42,.07) !important;
}

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-panel-container .whiteboard-tool-group.active{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:8px !important;
}

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .compact-toolbar{
    max-width:820px !important;
    width:100% !important;
    margin:10px auto 0 !important;
    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
    gap:10px !important;
}

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-category-btn{
    min-height:44px !important;
    padding:10px 12px !important;
    border-radius:16px !important;
    background:rgba(255,255,255,.86) !important;
    color:#334155 !important;
    border:1px solid rgba(148,163,184,.18) !important;
    box-shadow:0 6px 16px rgba(15,23,42,.05) !important;
    font-size:13px !important;
    font-weight:800 !important;
}

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-category-btn.active{
    background:#eef2ff !important;
    color:#1d4ed8 !important;
    border-color:rgba(37,99,235,.32) !important;
    box-shadow:0 10px 22px rgba(37,99,235,.12) !important;
}

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-panel-container .whiteboard-size-wrap,
#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-panel-container .whiteboard-zoom-control{
    max-width:340px !important;
    width:100% !important;
    padding:6px 11px !important;
}

#whiteboardOverlay.whiteboard-overlay-fullscreen .whiteboard-panel-container{
    max-width:520px !important;
    margin:14px auto 0 !important;
}

#whiteboardOverlay.whiteboard-overlay-fullscreen .whiteboard-panel-container .whiteboard-tool-group{
    max-width:500px !important;
    padding:12px !important;
}

#whiteboardOverlay.whiteboard-overlay-fullscreen .compact-toolbar{
    max-width:980px !important;
    margin:12px auto 0 !important;
    grid-template-columns:repeat(4,1fr) !important;
    gap:14px !important;
}

#whiteboardOverlay.whiteboard-overlay-fullscreen .whiteboard-category-btn{
    min-height:54px !important;
    padding:14px 16px !important;
    border-radius:18px !important;
    font-size:14px !important;
}

@media(max-width:700px){
    #whiteboardOverlay .compact-toolbar{
        grid-template-columns:repeat(2,1fr) !important;
        max-width:100% !important;
    }

    #whiteboardOverlay .whiteboard-panel-container{
        max-width:100% !important;
    }

    #whiteboardOverlay .whiteboard-panel-container .whiteboard-tool-group{
        max-width:100% !important;
    }
}


/* === Karten-Whiteboard Popup: Bedienfeld links, Kategorien rechts v47 === */

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-popup-tools-row{
    display:grid;
    grid-template-columns:minmax(280px, 1fr) 170px;
    gap:12px;
    align-items:stretch;
    max-width:760px;
    width:100%;
    margin:10px auto 0;
}

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-panel-container{
    max-width:none !important;
    margin:0 !important;
    width:100% !important;
}

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-panel-container .whiteboard-tool-group{
    height:100%;
    min-height:118px;
    max-width:none !important;
    margin:0 !important;
    padding:10px !important;
    display:none;
}

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-panel-container .whiteboard-tool-group.active{
    display:flex !important;
    justify-content:center;
}

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .compact-toolbar{
    max-width:none !important;
    margin:0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    width:100% !important;
}

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-category-btn{
    min-height:0 !important;
    height:auto !important;
    padding:9px 10px !important;
    border-radius:14px !important;
    font-size:12px !important;
    text-align:center;
}

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-canvas-wrap{
    margin-top:12px !important;
}

/* Vollbild bleibt großzügig und horizontal */
#whiteboardOverlay.whiteboard-overlay-fullscreen .whiteboard-popup-tools-row{
    display:block;
    max-width:none;
    margin:0;
}

@media(max-width:760px){
    #whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-popup-tools-row{
        grid-template-columns:1fr;
    }

    #whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .compact-toolbar{
        grid-template-columns:repeat(2,1fr) !important;
    }
}


/* === Karten-Whiteboard Kategorien links v48 === */

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-popup-tools-row{
    display:grid;
    grid-template-columns:170px minmax(280px,1fr);
    gap:12px;
    align-items:stretch;
    max-width:760px;
    width:100%;
    margin:10px auto 0;
}

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .compact-toolbar{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    margin:0 !important;
    width:100% !important;
}

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-panel-container{
    margin:0 !important;
    width:100% !important;
    max-width:none !important;
}

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-panel-container .whiteboard-tool-group{
    max-width:none !important;
    min-height:118px;
    height:100%;
    margin:0 !important;
}

@media(max-width:760px){
    #whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-popup-tools-row{
        grid-template-columns:1fr;
    }

    #whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .compact-toolbar{
        grid-template-columns:repeat(2,1fr) !important;
    }
}


/* === Popup Boxen zentrieren v49 === */

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-popup-tools-row{
    justify-content:center !important;
    align-content:center !important;
    align-items:center !important;
    margin:14px auto 0 !important;
}

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .compact-toolbar,
#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-panel-container{
    align-self:center !important;
}

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-panel-container{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
}

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-panel-container .whiteboard-tool-group.active{
    width:100%;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
}


/* === Abstände optimiert v50 === */

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-popup-tools-row{
    margin:4px auto 0 !important;
}

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-canvas-wrap{
    margin-top:22px !important;
}


/* === Kategorie größer + Bedienelement vertikal mittig v51 === */

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-category-btn{
    font-size:14px !important;
    font-weight:800 !important;
    letter-spacing:.01em;
}

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-panel-container{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:100% !important;
}

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-panel-container .whiteboard-tool-group{
    min-height:132px !important;
    display:none;
}

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-panel-container .whiteboard-tool-group.active{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
    align-self:center !important;
}

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-inline-tools{
    align-items:center !important;
}


/* === Bedienelement horizontal zentriert v52 === */

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-popup-tools-row{
    grid-template-columns:170px 1fr !important;
    justify-content:center !important;
    align-items:center !important;
    max-width:760px !important;
}

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-panel-container{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    padding-left:22px !important;
}

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-panel-container .whiteboard-tool-group{
    width:100% !important;
    max-width:430px !important;
    margin:0 auto !important;
}

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-panel-container .whiteboard-tool-group.active{
    justify-content:center !important;
    align-items:center !important;
}


/* === Popup Elemente insgesamt weiter rechts / mittiger v53 === */

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-popup-tools-row{
    max-width:720px !important;
    margin:6px auto 0 !important;
    transform:translateX(34px);
}

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-panel-container{
    padding-left:10px !important;
}

@media(max-width:760px){
    #whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-popup-tools-row{
        transform:none;
        max-width:100% !important;
    }
}


/* === Whiteboard Workspace / Canvas UX v54 === */

/* Floating Workspace */
#whiteboardOverlay .whiteboard-modal{
    background:linear-gradient(180deg,#ffffff 0%, #f8fafc 100%) !important;
    border:1px solid rgba(148,163,184,.16) !important;
    box-shadow:
        0 30px 80px rgba(15,23,42,.18),
        0 10px 30px rgba(15,23,42,.08) !important;
    backdrop-filter:blur(14px) saturate(140%);
}

/* Canvas mehr Raum */
#whiteboardOverlay .whiteboard-canvas-wrap{
    margin-top:18px !important;
    border-radius:24px !important;
    overflow:hidden;
    border:1px solid rgba(148,163,184,.12);
    background:
        linear-gradient(rgba(148,163,184,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,.08) 1px, transparent 1px),
        #ffffff !important;
    background-size:28px 28px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8),
        0 10px 30px rgba(15,23,42,.06);
}

/* Canvas Workspace moderner */
#whiteboardOverlay canvas{
    background:transparent !important;
    cursor:crosshair;
}

/* Tools ruhiger eingebettet */
#whiteboardOverlay .whiteboard-panel-container .whiteboard-tool-group{
    backdrop-filter:blur(16px) saturate(150%);
    background:rgba(255,255,255,.84) !important;
    box-shadow:
        0 10px 28px rgba(15,23,42,.07),
        inset 0 1px 0 rgba(255,255,255,.6) !important;
}

/* Kategorien-Leiste hochwertiger */
#whiteboardOverlay .whiteboard-category-btn{
    backdrop-filter:blur(10px);
    transition:
        transform .14s ease,
        box-shadow .18s ease,
        background .18s ease;
}

#whiteboardOverlay .whiteboard-category-btn:hover{
    transform:translateY(-2px) scale(1.01);
}

#whiteboardOverlay .whiteboard-category-btn.active{
    background:linear-gradient(180deg,#f8fbff 0%, #eef4ff 100%) !important;
}

/* Canvas mehr Fläche */
#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-modal{
    padding-bottom:14px !important;
}

#whiteboardOverlay:not(.whiteboard-overlay-fullscreen) .whiteboard-canvas-wrap{
    min-height:460px !important;
}

/* Vollbild Workspace */
#whiteboardOverlay.whiteboard-overlay-fullscreen .whiteboard-modal{
    border-radius:0 !important;
    padding:20px !important;
    background:
        radial-gradient(circle at top left, rgba(59,130,246,.06), transparent 20%),
        #f8fafc !important;
}

#whiteboardOverlay.whiteboard-overlay-fullscreen .whiteboard-canvas-wrap{
    min-height:calc(100vh - 240px) !important;
    border-radius:28px !important;
}

/* Weicheres Raumgefühl */
#whiteboardOverlay .whiteboard-stage{
    transition:transform .08s linear;
}

/* Textfelder hochwertiger */
#whiteboardOverlay .whiteboard-text-object{
    background:rgba(255,255,255,.34) !important;
    backdrop-filter:blur(8px);
    border:1px dashed rgba(37,99,235,.14) !important;
}

#whiteboardOverlay .whiteboard-text-object:hover,
#whiteboardOverlay .whiteboard-text-object:focus{
    background:rgba(255,255,255,.86) !important;
    box-shadow:
        0 10px 24px rgba(15,23,42,.10),
        0 0 0 4px rgba(37,99,235,.06);
}

/* Scrollbars dezenter */
#whiteboardOverlay *::-webkit-scrollbar{
    width:10px;
    height:10px;
}

#whiteboardOverlay *::-webkit-scrollbar-thumb{
    background:rgba(148,163,184,.35);
    border-radius:999px;
}

#whiteboardOverlay *::-webkit-scrollbar-track{
    background:transparent;
}


/* === Vollbildmodus 1:1 Richtung eigenständiges Whiteboard v55 === */

#whiteboardOverlay.whiteboard-overlay-fullscreen{
    padding:0 !important;
}

#whiteboardOverlay.whiteboard-overlay-fullscreen .whiteboard-modal{
    width:100vw !important;
    height:100vh !important;
    max-width:none !important;
    max-height:none !important;
    border-radius:0 !important;
    padding:18px !important;
    background:linear-gradient(180deg,#f8fafc 0%,#eef2f7 100%) !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
}

#whiteboardOverlay.whiteboard-overlay-fullscreen .modal-header{
    flex:0 0 auto !important;
    margin-bottom:10px !important;
}

/* Vollbild: Popup-Zeile wird wieder vertikal wie eigenständige Seite */
#whiteboardOverlay.whiteboard-overlay-fullscreen .whiteboard-popup-tools-row{
    display:flex !important;
    flex-direction:column !important;
    max-width:980px !important;
    width:100% !important;
    margin:0 auto 12px !important;
    transform:none !important;
    gap:12px !important;
    flex:0 0 auto !important;
}

/* Vollbild: Bedienfeld oben */
#whiteboardOverlay.whiteboard-overlay-fullscreen .whiteboard-panel-container{
    order:1 !important;
    max-width:520px !important;
    width:100% !important;
    margin:0 auto !important;
    padding:0 !important;
    display:block !important;
}

#whiteboardOverlay.whiteboard-overlay-fullscreen .whiteboard-panel-container .whiteboard-tool-group{
    max-width:480px !important;
    margin:0 auto !important;
    padding:12px !important;
    border-radius:18px !important;
    background:rgba(255,255,255,.96) !important;
    border:1px solid rgba(148,163,184,.18) !important;
    box-shadow:0 12px 28px rgba(15,23,42,.07) !important;
    min-height:auto !important;
    height:auto !important;
}

#whiteboardOverlay.whiteboard-overlay-fullscreen .whiteboard-panel-container .whiteboard-tool-group.active{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
}

/* Vollbild: Kategorien darunter und breit */
#whiteboardOverlay.whiteboard-overlay-fullscreen .compact-toolbar{
    order:2 !important;
    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
    gap:14px !important;
    max-width:980px !important;
    width:100% !important;
    margin:0 auto !important;
}

#whiteboardOverlay.whiteboard-overlay-fullscreen .whiteboard-category-btn{
    min-height:54px !important;
    padding:14px 16px !important;
    border-radius:18px !important;
    font-size:14px !important;
    font-weight:800 !important;
    background:rgba(255,255,255,.86) !important;
    color:#334155 !important;
    border:1px solid rgba(148,163,184,.18) !important;
    box-shadow:0 8px 22px rgba(15,23,42,.06) !important;
}

#whiteboardOverlay.whiteboard-overlay-fullscreen .whiteboard-category-btn.active{
    background:#eef2ff !important;
    color:#1d4ed8 !important;
    border-color:rgba(37,99,235,.32) !important;
    box-shadow:0 10px 24px rgba(37,99,235,.12) !important;
}

/* Canvas im Vollbild groß und stabil */
#whiteboardOverlay.whiteboard-overlay-fullscreen .whiteboard-canvas-wrap{
    flex:1 1 auto !important;
    min-height:0 !important;
    height:auto !important;
    margin-top:0 !important;
    border-radius:24px !important;
    overflow:auto !important;
    background:#ffffff !important;
    border:1px solid rgba(148,163,184,.18) !important;
    box-shadow:0 10px 30px rgba(15,23,42,.08) !important;
}

/* Grid wieder über Canvas selbst, nicht doppelt über Wrapper */
#whiteboardOverlay.whiteboard-overlay-fullscreen #whiteboardCanvas{
    background-color:#ffffff !important;
    background-image:
        linear-gradient(#eef2f7 1px, transparent 1px),
        linear-gradient(90deg, #eef2f7 1px, transparent 1px) !important;
    background-size:28px 28px !important;
}

/* Popup-Modus bleibt unverändert von v54/v53 */
@media(max-width:760px){
    #whiteboardOverlay.whiteboard-overlay-fullscreen .compact-toolbar{
        grid-template-columns:repeat(2,1fr) !important;
    }

    #whiteboardOverlay.whiteboard-overlay-fullscreen .whiteboard-popup-tools-row{
        max-width:100% !important;
    }
}


/* === Canvas-Stabilisierung v55 === */
#whiteboardCanvas{
    background-color:#ffffff !important;
    background-image:
        linear-gradient(#eef2f7 1px, transparent 1px),
        linear-gradient(90deg, #eef2f7 1px, transparent 1px) !important;
    background-size:28px 28px !important;
}


/* === Dashboard Header v57 === */

.dashboard-header{
    position:sticky;
    top:0;
    z-index:1000;
    max-width:1180px;
    margin:0 auto 18px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(14px);
    border:1px solid rgba(148,163,184,.18);
    border-radius:22px;
    box-shadow:0 12px 32px rgba(15,23,42,.08);
    padding:14px 18px;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:14px;
}

.dashboard-header-spacer{
    min-height:1px;
}

.dashboard-title{
    text-align:center;
    font-size:24px;
    font-weight:800;
    color:#0f172a;
    letter-spacing:-.02em;
}

.dashboard-menu{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    align-items:center;
}

.dashboard-menu a{
    text-decoration:none;
    padding:9px 13px;
    border-radius:999px;
    background:#f1f5f9;
    color:#334155;
    font-size:13px;
    font-weight:700;
    border:1px solid rgba(148,163,184,.16);
    transition:.18s ease;
}

.dashboard-menu a:hover{
    background:#e2e8f0;
    color:#0f172a;
}

.dashboard-menu a.active{
    background:#eef2ff;
    color:#1d4ed8;
    border-color:rgba(37,99,235,.25);
}

@media(max-width:760px){
    .dashboard-header{
        grid-template-columns:1fr;
        text-align:center;
        border-radius:18px;
    }

    .dashboard-menu{
        justify-content:center;
        flex-wrap:wrap;
    }

    .dashboard-header-spacer{
        display:none;
    }
}


.dashboard-header + .container h1:first-child{
    display:none;
}


/* === Header Sichtbarkeitsfix v58 === */

body{
    padding-top:12px !important;
}

.dashboard-header{
    position:relative !important;
    z-index:9999 !important;
    width:calc(100% - 40px);
    max-width:1200px;
    margin:0 auto 18px auto !important;
    display:grid !important;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    background:rgba(255,255,255,.94);
    border:1px solid rgba(148,163,184,.18);
    border-radius:22px;
    padding:16px 18px;
    box-shadow:0 12px 32px rgba(15,23,42,.08);
    backdrop-filter:blur(14px);
}

.dashboard-title{
    text-align:center;
    font-size:26px;
    font-weight:800;
    color:#0f172a;
    letter-spacing:-0.02em;
}

.dashboard-menu{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
}

.dashboard-menu a{
    text-decoration:none;
    padding:10px 14px;
    border-radius:999px;
    background:#f1f5f9;
    color:#334155;
    border:1px solid rgba(148,163,184,.16);
    font-size:13px;
    font-weight:700;
    transition:.18s ease;
}

.dashboard-menu a:hover{
    background:#e2e8f0;
    color:#0f172a;
}

.dashboard-menu a.active{
    background:#eef2ff;
    color:#1d4ed8;
    border-color:rgba(37,99,235,.24);
}

.container > h1:first-child{
    display:none !important;
}

@media(max-width:760px){
    .dashboard-header{
        grid-template-columns:1fr;
        gap:14px;
        text-align:center;
    }

    .dashboard-menu{
        justify-content:center;
        flex-wrap:wrap;
    }
}


/* === Header an Karten-Design angepasst v59 === */

.dashboard-header{
    background:#ffffff !important;
    border:1px solid rgba(226,232,240,.9) !important;
    border-radius:24px !important;
    box-shadow:
        0 10px 24px rgba(15,23,42,.06),
        0 1px 0 rgba(255,255,255,.9) inset !important;
    backdrop-filter:none !important;
    padding:18px 22px !important;
}

.dashboard-title{
    color:#0f172a !important;
    font-size:24px !important;
    font-weight:800 !important;
}

.dashboard-menu a{
    background:#ffffff !important;
    border:1px solid rgba(226,232,240,.95) !important;
    box-shadow:
        0 4px 10px rgba(15,23,42,.04),
        0 1px 0 rgba(255,255,255,.8) inset !important;
    color:#475569 !important;
    border-radius:16px !important;
}

.dashboard-menu a:hover{
    background:#f8fafc !important;
    color:#0f172a !important;
    transform:translateY(-1px);
}

.dashboard-menu a.active{
    background:#eef2ff !important;
    color:#1d4ed8 !important;
    border-color:rgba(37,99,235,.18) !important;
    box-shadow:
        0 8px 18px rgba(37,99,235,.10),
        0 1px 0 rgba(255,255,255,.8) inset !important;
}


/* === Header Breite an Karten angleichen v60 === */

.dashboard-header{
    width:100% !important;
    max-width:1100px !important;
    box-sizing:border-box !important;
    margin:0 auto 18px auto !important;
}

.container{
    max-width:1100px !important;
}


/* === Stabiler Header + Menü v74 === */

.dashboard-header{
    width:100% !important;
    max-width:1100px !important;
    box-sizing:border-box !important;
    margin:0 auto 18px auto !important;
    background:#ffffff !important;
    border:1px solid rgba(226,232,240,.9) !important;
    border-radius:24px !important;
    box-shadow:
        0 10px 24px rgba(15,23,42,.06),
        0 1px 0 rgba(255,255,255,.9) inset !important;
    padding:22px 24px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:18px !important;
    position:relative !important;
    z-index:10 !important;
}

.dashboard-title{
    width:100%;
    text-align:center !important;
    font-size:28px !important;
    font-weight:800 !important;
    color:#0f172a !important;
    letter-spacing:-0.03em;
}

.dashboard-menu{
    width:100%;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:12px !important;
    flex-wrap:wrap;
}

.dashboard-menu a{
    min-width:140px;
    text-align:center;
    text-decoration:none;
    padding:12px 18px !important;
    border-radius:18px !important;
    font-size:14px !important;
    font-weight:700 !important;
    background:#ffffff !important;
    border:1px solid rgba(226,232,240,.95) !important;
    box-shadow:
        0 4px 10px rgba(15,23,42,.04),
        0 1px 0 rgba(255,255,255,.8) inset !important;
    color:#475569 !important;
    transition:.18s ease;
}

.dashboard-menu a:hover{
    background:#f8fafc !important;
    color:#0f172a !important;
    transform:translateY(-1px);
}

.dashboard-menu a.active{
    background:#eef2ff !important;
    color:#1d4ed8 !important;
    border-color:rgba(37,99,235,.18) !important;
    box-shadow:
        0 8px 18px rgba(37,99,235,.10),
        0 1px 0 rgba(255,255,255,.8) inset !important;
}

.container{
    max-width:1100px !important;
}

.container > h1:first-child{
    display:none !important;
}

/* === Modal/Header Fix v74 === */
.modal-overlay{
    position:fixed !important;
    inset:0 !important;
    z-index:99999 !important;
    background:rgba(15,23,42,.42) !important;
    backdrop-filter:blur(6px);
}

.modal-overlay.active{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

.modal-box{
    position:relative !important;
    z-index:100000 !important;
}

/* === Karten Action-Bar stabil, unten und zentriert v74 === */
.card-action-bar{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
    width:fit-content !important;
    margin:12px auto 10px auto !important;
    padding:5px !important;
    border-radius:999px !important;
    background:rgba(248,250,252,.92) !important;
    border:1px solid rgba(226,232,240,.92) !important;
    box-shadow:
        0 8px 18px rgba(15,23,42,.06),
        inset 0 1px 0 rgba(255,255,255,.75) !important;
    backdrop-filter:blur(10px);
    z-index:3;
}

.card-action-btn,
.card-action-bar .delete-btn,
.card-action-bar .edit-btn,
.card-action-bar .done-btn,
.card-action-bar .pin-btn{
    position:static !important;
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:none !important;
    border-radius:999px !important;
    background:transparent !important;
    color:#64748b !important;
    font-size:14px !important;
    line-height:1 !important;
    box-shadow:none !important;
    cursor:pointer;
    transition:
        background .16s ease,
        color .16s ease,
        transform .16s ease;
}

.card-action-btn:hover,
.card-action-bar .delete-btn:hover,
.card-action-bar .edit-btn:hover,
.card-action-bar .done-btn:hover,
.card-action-bar .pin-btn:hover{
    background:#e2e8f0 !important;
    color:#0f172a !important;
    transform:translateY(-1px);
}

.card-action-bar .delete-btn:hover{
    background:#fee2e2 !important;
    color:#dc2626 !important;
}

.card-action-bar .edit-btn:hover{
    background:#dbeafe !important;
    color:#1d4ed8 !important;
}

.card-action-bar .done-btn.active{
    background:#dcfce7 !important;
    color:#15803d !important;
}

.card-action-bar .pin-btn.active{
    background:#fef3c7 !important;
    color:#b45309 !important;
}

.delete-btn,
.edit-btn,
.done-btn,
.pin-btn{
    top:auto;
    right:auto;
}

@media(max-width:760px){
    .dashboard-header{
        gap:14px !important;
        padding:18px 16px !important;
    }

    .dashboard-menu a{
        min-width:unset;
        width:calc(50% - 10px);
        font-size:13px !important;
        padding:11px 14px !important;
    }
}


/* === Drag & Drop Stabilisierung v81 === */

.card[draggable="true"]{
    cursor:grab;
}

.card.dragging{
    opacity:.55;
    transform:scale(.985);
}

[data-column]{
    min-height:220px;
    padding-bottom:34px !important;
}


/* === Smooth Drag & Drop mit Platzhalter v82 === */

.card[draggable="true"]{
    cursor:grab;
}

.card.dragging{
    opacity:.38;
    transform:scale(.985);
}

.card.drag-copy{
    box-shadow:0 18px 36px rgba(37,99,235,.16) !important;
}

.card-drop-placeholder{
    border:2px dashed rgba(37,99,235,.28);
    background:rgba(37,99,235,.055);
    border-radius:18px;
    margin:12px 0;
    transition:
        height .16s ease,
        background .16s ease,
        border-color .16s ease;
}

[data-column]{
    min-height:220px;
    padding-bottom:34px !important;
    transition:outline-color .16s ease, background .16s ease;
}

[data-column].drag-column-active{
    outline:2px dashed rgba(37,99,235,.16);
    outline-offset:6px;
    background:rgba(37,99,235,.025);
}


/* === Grid-aware Drag & Drop v83 === */

.card-drop-placeholder{
    min-height:92px;
    width:100%;
    box-sizing:border-box;
    grid-column:auto;
}

[data-column] .card,
[data-column] .card-drop-placeholder{
    transition:
        transform .14s ease,
        opacity .14s ease,
        box-shadow .14s ease;
}

.card.dragging{
    opacity:.34 !important;
    transform:scale(.98) !important;
}


/* === Grid-Mitte + Vorlagenkopie Fix v84 === */

.card-drop-placeholder{
    min-height:96px;
    width:100%;
    box-sizing:border-box;
    border:2px dashed rgba(37,99,235,.32);
    background:rgba(37,99,235,.07);
    border-radius:18px;
}

.card.drag-copy{
    outline:2px solid rgba(37,99,235,.18);
}

[data-column="planung"] .card[data-template="true"]{
    cursor:copy;
}


/* === Exakte Grid-Slot Positionierung v85 === */

.card-drop-placeholder{
    min-height:110px !important;
    width:100% !important;
    box-sizing:border-box !important;
    border:2px dashed rgba(37,99,235,.36) !important;
    background:rgba(37,99,235,.075) !important;
    border-radius:18px !important;
    margin:10px 0 !important;
}

[data-column]{
    align-content:start;
}


/* === 3er-Grid Slot-Erkennung v86 === */

.card-drop-placeholder{
    min-height:120px !important;
    width:100% !important;
    box-sizing:border-box !important;
    border:2px dashed rgba(37,99,235,.42) !important;
    background:rgba(37,99,235,.08) !important;
    border-radius:18px !important;
    margin:0 !important;
}

[data-column]{
    align-items:start;
}


/* === Tagesablauf echte 3-Spalten Drop-Struktur v87 === */

[data-column="arbeit"]{
    display:block !important;
}

.tagesablauf-grid-zones{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px;
    width:100%;
    align-items:start;
}

.tagesablauf-drop-zone{
    min-height:190px;
    border:1px dashed rgba(148,163,184,.30);
    border-radius:22px;
    background:rgba(248,250,252,.58);
    padding:12px;
    transition:
        background .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}

.tagesablauf-drop-zone.active-drop-zone{
    background:rgba(37,99,235,.08);
    border-color:rgba(37,99,235,.45);
    box-shadow:0 12px 28px rgba(37,99,235,.10), inset 0 0 0 1px rgba(37,99,235,.12);
    transform:translateY(-1px);
}

.tages-slot-label{
    font-size:11px;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:#64748b;
    margin-bottom:10px;
    text-align:center;
}

.tages-slot-cards{
    display:flex;
    flex-direction:column;
    gap:12px;
    min-height:140px;
}

.tages-slot-cards .card{
    width:100%;
    margin:0 !important;
}

.tagesablauf-drop-zone .card-drop-placeholder{
    min-height:120px !important;
    margin:0 !important;
}

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


/* === Tagesablauf Reload-Speicherfix v89 === */

[data-column="arbeit"] > .card{
    margin-top:12px;
}

/* Sobald die Zonen vorhanden sind, werden Karten optisch nur in den Slots geführt. */
[data-column="arbeit"] .tagesablauf-grid-zones .card{
    margin-top:0 !important;
}


/* === Fix v91: Keine Tagesablauf-Boxen bei Abgeschlossen === */

[data-column="erledigt"] .tagesablauf-grid-zones,
[data-column="erledigt"] .tagesablauf-drop-zone,
[data-column="erledigt"] .tages-slot-label,
[data-column="erledigt"] .tages-slot-cards{
    display:none !important;
}


/* === v92: Abgeschlossen darf keine Tagesablauf-Struktur besitzen === */
[data-column="erledigt"] .tagesablauf-grid-zones{
    display:none !important;
    visibility:hidden !important;
    height:0 !important;
    min-height:0 !important;
    overflow:hidden !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
}


/* === v94: Nur falsche Tagesablauf-Box in Abgeschlossen entfernen === */

[data-column="erledigt"] .tagesablauf-grid-zones{
    display:none !important;
}

[data-column="erledigt"] .done-day-section{
    display:block !important;
}


/* === v95 Fix: Tagesablauf-Headerbox bei Abgeschlossen entfernen === */

[data-column="erledigt"] .tagesablauf-header,
[data-column="erledigt"] .timeline-header,
[data-column="erledigt"] .timeline-bar,
[data-column="erledigt"] .tagesablauf-topbar{
    display:none !important;
}


/* === v96: Abgeschlossene Karten ausgelagert === */
[data-column="erledigt"]{
    display:none !important;
}


/* === v100 Eingang expandierbar === */

[data-column="eingang"]{
    transition:
        max-height .28s ease,
        min-height .28s ease,
        padding .22s ease,
        box-shadow .22s ease;
    overflow:hidden;
    max-height:220px;
    position:relative;
}

[data-column="eingang"].expanded{
    max-height:1400px;
}

.eingang-expand-btn{
    width:34px;
    height:34px;
    border:none;
    border-radius:12px;
    background:#eef2ff;
    color:#1d4ed8;
    font-size:22px;
    font-weight:700;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:.18s ease;
    box-shadow:0 4px 10px rgba(37,99,235,.10);
}

.eingang-expand-btn:hover{
    transform:translateY(-1px);
    background:#dbeafe;
}

.eingang-expand-btn.active{
    background:#1d4ed8;
    color:white;
}


/* === v104 Rennstrecken-Nummerierung stabil === */

/* Alte Karten-Nr. bleibt im Code, wird aber nicht mehr angezeigt */
.order-badge{
    display:none !important;
}

/* Start-/Ziel-Leiste wird nur optisch ausgeblendet, ohne HTML/JS zu zerstören */
.timeline-header,
.timeline-bar,
.tagesablauf-header,
.start-ziel-bar,
.start-finish-bar{
    display:none !important;
}


.race-order-badge{
    position:absolute;
    top:12px;
    right:12px;
    min-width:30px;
    height:30px;
    padding:0 8px;
    border-radius:999px;
    background:#f1f5f9;
    border:1px solid rgba(203,213,225,.95);
    color:#64748b;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:700;
    box-shadow:
        0 2px 6px rgba(15,23,42,.04),
        inset 0 1px 0 rgba(255,255,255,.9);
    z-index:5;
    letter-spacing:.01em;
    backdrop-filter:blur(4px);
}
.tages-slot-cards .card{
    position:relative;
    overflow:visible;
}


.race-order-badge:hover{
    background:#e2e8f0;
    color:#475569;
    transition:.18s ease;
}


/* === v106 Tagesablauf-Startleiste entfernen === */

.tagesablauf-column .timeline-header,
.tagesablauf-column .timeline-bar,
.tagesablauf-column .start-ziel-bar,
.tagesablauf-column .start-finish-bar,
.tagesablauf-column .tagesablauf-header,
[data-column="arbeit"] .timeline-header,
[data-column="arbeit"] .timeline-bar,
[data-column="arbeit"] .start-ziel-bar,
[data-column="arbeit"] .start-finish-bar,
[data-column="arbeit"] .tagesablauf-header{
    display:none !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    visibility:hidden !important;
}


/* === v107 ::before Startleiste deaktivieren === */

.tagesablauf-column::before,
[data-column="arbeit"]::before{
    content:none !important;
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    height:0 !important;
    width:0 !important;
    background:none !important;
    border:none !important;
    box-shadow:none !important;
}


/* === v108 Abstand über Tagesablauf korrigieren === */

.tagesablauf-column,
[data-column="arbeit"]{
    margin-top:0 !important;
    padding-top:0 !important;
}

.tagesablauf-column::before,
[data-column="arbeit"]::before{
    margin:0 !important;
    padding:0 !important;
    height:0 !important;
}


/* === v109 Tagesablauf Padding UX Fix === */

.tagesablauf-column,
[data-column="arbeit"]{
    padding:28px !important;
}


/* === v110 Tagesablauf vollständiges Padding === */

.tagesablauf-column,
[data-column="arbeit"]{
    padding:28px !important;
    box-sizing:border-box !important;
}


/* === v111 Tagesablauf Überschrift Abstand === */

.tagesablauf-column h2,
[data-column="arbeit"] h2{
    padding-bottom:20px !important;
}


/* === v112 Tagesablauf Überschrift Padding === */

.tagesablauf-column h2,
[data-column="arbeit"] h2{
    padding-bottom:20px !important;
    margin-bottom:0 !important;
    box-sizing:border-box !important;
}


/* === v113 Tagesablauf Überschrift Padding 20px === */

.tagesablauf-column h2,
[data-column="arbeit"] h2{
    padding-bottom:20px !important;
}