@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap");
/* Palette 0: Green */
/* Palette 1: Orange */
/* Palette 2: Blue */
/* Palette 1: Ocean Blue (Elegant, beruhigend, nicht zu kalt) */
/* Kräftig genug für gute Lesbarkeit auf Light */
/* Sehr sanfter, heller Hintergrund */
/* Palette 2: Amethyst (Warm, aber weit entfernt von Alert-Rot) */
/* Tiefes, sattes Lila für Akzente */
/* Angenehmer, weicher Hintergrund */
:root {
    /* Primary colors */
    --primary-color: #fff;
    --primary-color-1: #fbfbfb;
    --primary-color-2: #fff;
    --primary-color-3: #f8f8f8;
    --primary-color-4: #f8f8f8;
    --primary-color-5: #f5f5f5;
    --primary-color-6: #e5e5e5;
    --primary-color-7: #b0b0b0;
    /* Secondary colors */
    --secondary-color: #000;
    --secondary-color-1: #000;
    --secondary-color-2: #0d0d0d;
    --secondary-color-3: #2b2b2b;
    --secondary-color-4: #111;
    --secondary-color-5: #848484;
    --secondary-color-6: #d0d0d0;
    /* Year color pallets */
    --palette-0-accent: #56c280;
    --palette-0-accent-emph: #28b283;
    --palette-0-accent-light: #d3fade;
    --palette-1-accent: #5c9cbf;
    --palette-1-accent-emph: #327ba1;
    --palette-1-accent-light: #e1f0f7;
    --palette-2-accent: #a372bd;
    --palette-2-accent-emph: #804a9c;
    --palette-2-accent-light: #f2e8f5;
}

/* Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}
body {
    /* Improve text rendering */
    -webkit-font-smoothing: antialiased;
}

/* Improve media defaults */
img,
picture,
video,
canvas,
svg {
    max-width: 100%;
}

/* Inherit fonts for form controls */
input,
button,
textarea,
select {
    font: inherit;
}

/* Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/* Improve line wrapping */
p {
    text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

label {
    font-family:
        system-ui,
        -apple-system,
        sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    letter-spacing: 0.5px;
}
label::disabled {
    color: #999595;
}

/*
  Create a root stacking context
*/
#root,
#__next {
    isolation: isolate;
}

* {
    margin: 0;
    padding: 0;
    font-size: 17px;
    font-family: "Domine", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
}

strong {
    font-weight: 800;
}

input[type="color"] {
    /* Or, force a specific size if you want a custom square */
    height: 45px;
    border: none;
    cursor: pointer;
    background-color: #ffffff;
}

.selectable-effect,
.weekday-bar .weekday-btn,
.btn-ghost,
.selectable-option,
.autosolver-rules-panel-content .rule-card,
.substplanner-task-card,
.substplanner-solution-panel .substplanner-teacher-card,
.class-header-line,
.side-menu-btn,
.segment-btn {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.selectable-effect:hover,
.weekday-bar .weekday-btn:hover,
.btn-ghost:hover,
.selectable-option:hover,
.autosolver-rules-panel-content .rule-card:hover,
.substplanner-task-card:hover,
.substplanner-solution-panel .substplanner-teacher-card:hover,
.class-header-line:hover,
.side-menu-btn:hover,
.segment-btn:hover {
    border-color: var(--accent-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.selectable-option:hover,
.autosolver-rules-panel-content .rule-card:hover,
.substplanner-task-card:hover,
.substplanner-solution-panel .substplanner-teacher-card:hover,
.class-header-line:hover,
.side-menu-btn:hover,
.segment-btn:hover {
    transform: translateY(-1px);
}
.selectable-option.active,
.autosolver-rules-panel-content .active.rule-card,
.active.substplanner-task-card,
.substplanner-solution-panel .active.substplanner-teacher-card,
.active.class-header-line,
.active.side-menu-btn,
.active.segment-btn {
    border-color: var(--accent-color);
    background-color: var(--accent-color-light);
    /* Ein schicker, moderner Akzent-Strich auf der linken Seite */
    border-left: 5px solid var(--accent-color);
    padding-left: calc(
        1rem - 4px
    ); /* Verhindert, dass der Inhalt beim Klicken wackelt */
}

h3 {
    font-size: 21;
    font-weight: 500;
}

.horizontal-line {
    width: 100%;
    border-bottom: 1px solid #444242;
}

h1 {
    font-size: 27px;
    font-weight: 1000;
}

h2 {
    font-size: 21px;
    font-weight: 600;
}

button {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

button a li {
    font-weight: 500;
}

.p-std {
    padding: 5px 1rem;
}

.bottom-space {
    margin-bottom: 5rem;
}

.vert-space {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.rounded,
.setup-btn,
.course-btn,
.add-semester-btn,
.setup-add-class-btn,
.setup-add-student-btn,
#nav-user-section,
.modal-button,
.modal-button-cancel,
.modal-button-save,
.modal-button-save-primary,
.menu,
.btn,
.hourtimes-bar th:last-child,
.class-header-line,
.select-btn,
.btn-autosolve,
.btn-remove {
    border-radius: 0;
}

.transition-transform,
.content-table-sortcursor,
.content-table-sortcursor-rotated,
.options .cursor,
.options .cursor-rotated,
.options-tt-focus .cursor,
.options-tt-focus .cursor-rotated,
.options-week-rhythms .cursor,
.options-week-rhythms .cursor-rotated,
.options-active-view .cursor,
.options-active-view .cursor-rotated {
    transition: transform 0.3s;
}

.rotated,
.content-table-sortcursor-rotated,
.options .cursor-rotated,
.options-tt-focus .cursor-rotated,
.options-week-rhythms .cursor-rotated,
.options-active-view .cursor-rotated {
    transform: rotate(180deg);
}

.grid,
.substitution-planner-main,
.tt-planner-grid,
.deputat-grid,
.setup-grid {
    display: grid;
}

@media only screen and (max-width: 800px) {
    .grid-small {
        display: grid;
    }
}
.grid-two {
    display: grid;
    grid-template-columns: auto auto;
}

.h-full,
.substitution-planner-main,
.deputat-grid,
.setup-grid {
    width: 100vw;
}

.full-width {
    width: 100%;
}

.full-height {
    height: 100%;
}

.m-btn {
    margin-bottom: 1rem;
}

.vertical-align {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

.flex-center,
.publish-btn,
.publish-btn-published,
.publish-btn-not-published,
.publish-btn-changed {
    display: flex;
    justify-content: center;
}

@media only screen and (min-width: 800px) {
    .flex-center-medium {
        display: flex;
        justify-content: center;
    }
}
.flex-start {
    display: flex;
    justify-content: flex-start;
}

@media only screen and (min-width: 800px) {
    .flex-start-medium {
        display: flex;
        justify-content: flex-start;
    }
}
.flex-end {
    display: flex;
    justify-content: flex-end;
}

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

.flex-gap {
    display: flex;
    gap: 0.5rem;
}

.flex-between,
.flex-between-gap {
    display: flex;
    justify-content: space-between;
}
.flex-between-gap {
    gap: 5px;
}

flex-around {
    display: flex;
    justify-content: space-around;
}

@media only screen and (min-width: 800px) {
    .flex-between-medium {
        display: flex;
        justify-content: space-between;
    }
}
.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-even {
    display: flex;
    justify-content: space-evenly;
}

.none {
    display: none;
}

.spaced {
    padding: 0 0.5rem;
}

.separated {
    margin: 0 1rem;
}

.padding-btn {
    padding-bottom: 0.5rem;
}

.padding,
.error-message {
    padding: 1rem;
}

.btn,
.hourtimes-bar th:last-child,
.class-header-line,
.select-btn,
.btn-autosolve,
.btn-remove {
    padding: 0.25rem 0.5rem;
    cursor: pointer;
}
.btn:hover,
.hourtimes-bar th:hover:last-child,
.class-header-line:hover,
.select-btn:hover,
.btn-autosolve:hover,
.btn-remove:hover {
    background-color: var(--accent-color-light);
}
.btn:disabled,
.hourtimes-bar th:disabled:last-child,
.class-header-line:disabled,
.select-btn:disabled,
.btn-autosolve:disabled,
.btn-remove:disabled {
    background-color: none;
    color: #444242;
}
.btn-text {
    padding: 5px;
    border-radius: 5px;
    background-color: #56c280;
}
.btn-text:hover {
    background-color: var(--accent-color-light);
}
.btn-circle,
.btn-circle-apply,
.btn-circle-remove {
    margin-left: 0.25rem;
    width: 27px;
    height: 27px;
}
.btn-circle svg,
.btn-circle-apply svg,
.btn-circle-remove svg {
    padding: 1px;
    border-radius: 50%;
}
.btn-circle svg:hover,
.btn-circle-apply svg:hover,
.btn-circle-remove svg:hover {
    background-color: #dbd1d1;
}
.btn-circle-remove {
    font-size: large;
    font-weight: 1000;
}
.btn-circle-remove svg {
    padding: 1px;
    border-radius: 50%;
    background-color: #f56161;
}
.btn-circle-remove svg:hover {
    background-color: #f59e0b;
    color: #444242;
}
.btn-circle-apply {
    font-size: large;
    font-weight: 1000;
}
.btn-circle-apply svg {
    padding: 1px;
    border-radius: 50%;
    background-color: #3498db;
}
.btn-circle-apply svg:hover {
    background-color: #a9fff4;
    color: #444242;
}
.btn-remove {
    color: #f56161;
    font-size: large;
    font-weight: 1000;
}
.btn-remove-circle {
    margin-left: 0.25rem;
    width: 27px;
    height: 27px;
}
.btn-remove-circle-icon {
    padding: 1px;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    min-width: 25px;
    min-height: 25px;
}
.btn-remove-circle-icon:hover {
    background-color: #f56161;
}

.btn-outline {
    background: transparent;
    color: #1e293b;
    border: 1px solid #e2e8f0;
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
}
.btn-outline:hover {
    background: #e2e8f0;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background-color: var(--accent-color-emph);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        background-color 0.2s,
        color 0.2s,
        transform 0.1s;
    box-shadow: 0 2px 4px rgba(40, 178, 131, 0.2);
    color: white;
}
.btn-primary:hover {
    background: var(--accent-color-light);
    color: var(--accent-color-emph);
}

.btn-danger-outline,
.btn-autosolve-danger {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background-color: transparent;
    color: #f56161;
    border: 1px solid #f56161;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-danger-outline:hover,
.btn-autosolve-danger:hover {
    background-color: rgb(254.1071428571, 240.8928571429, 240.8928571429);
}

.btn-edit {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #fe7743;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        background-color 0.2s,
        transform 0.1s;
    box-shadow: 0 2px 4px rgba(40, 178, 131, 0.2);
}
.btn-edit:hover {
    color: var(--accent-color-emph);
    background-color: var(--accent-color-light);
}

.focus,
.time-range-container:focus-within,
input:focus-within {
    outline: medium auto var(--accent-color) !important;
}

input {
    padding: 0.75rem 1.25rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    border: none;
    border: 1px solid #dbd1d1;
    outline: none;
}
.field-invalid {
    outline: medium auto #f56161 !important;
}

.margin-center,
.fit-size {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
}

.margin-vert-center,
.course-timeslot .btn,
.course-timeslot-available .btn,
.course-timeslot .hourtimes-bar th:last-child,
.hourtimes-bar .course-timeslot th:last-child,
.course-timeslot-available .hourtimes-bar th:last-child,
.hourtimes-bar .course-timeslot-available th:last-child,
.course-timeslot .class-header-line,
.course-timeslot-available .class-header-line,
.course-timeslot-blocked-icon svg,
.course-timeslot .select-btn,
.course-timeslot-available .select-btn,
.course-timeslot .btn-autosolve,
.course-timeslot-available .btn-autosolve,
.nav-hamburger-menu,
.btn-circle,
.btn-circle-remove,
.btn-circle-apply,
.btn-remove-circle {
    margin-top: auto;
    margin-bottom: auto;
}

.text-center {
    text-align: center;
}

.text-start {
    text-align: start;
}

.scroll {
    overflow: auto;
}

.container {
    overflow-y: auto;
}

.scroll-x,
.calendarweek-scroller {
    overflow-x: auto;
    overflow-y: hidden;
}

.scroll-y {
    overflow-x: hidden;
    overflow-y: auto;
}

.comma-separated:last-child:after {
    content: "";
}
.comma-separated:after {
    content: ",";
    padding-right: 0.25rem;
}

.button-group {
    float: left;
    width: 100%;
}
.button-group button {
    background-color: var(--accent-color);
    padding: 0.25rem;
    border-right: 1px solid #444242;
}
.button-group button:last-child {
    border-right: none;
}
.button-group button:hover {
    background-color: var(--accent-color-light);
}

.inline {
    display: inline;
}

.nowrap {
    white-space: nowrap;
}

.table-spaced tr td {
    padding: 5px;
}

.scrollbar {
    scrollbar-width: thin;
}

.hide-scrollbar,
.calendarweek-scroller,
.deputat-grid-menu,
.dropdown-options .dropdown-options-search-inner {
    /* Hide scrollbar for Chrome, Safari and Opera */
}
.hide-scrollbar::-webkit-scrollbar,
.calendarweek-scroller::-webkit-scrollbar,
.deputat-grid-menu::-webkit-scrollbar,
.dropdown-options .dropdown-options-search-inner::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar,
.calendarweek-scroller,
.deputat-grid-menu,
.dropdown-options .dropdown-options-search-inner {
    /* Hide scrollbar for IE, Edge and Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.table {
    display: table;
}

.cell-middle {
    display: table-cell;
    vertical-align: middle;
}

.menu {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    position: absolute;
    top: 100%;
    z-index: 100;
    background-color: var(--accent-color);
    width: 100%;
    left: 0;
}
.menu div {
    cursor: pointer;
    padding: 10px 1rem;
    border-top: solid 1px #444242;
}
.menu div:hover {
    background-color: var(--accent-color-light);
}
.menu div:first-child {
    border: none;
}

.relative {
    position: relative;
}

.loader div,
.loader-tiny div,
.loader-small div {
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}
.loader,
.loader-tiny,
.loader-small {
    margin-top: calc(50vh - 60px);
    height: 60px;
    position: relative;
}

.loader-small div {
    width: 25px;
    height: 25px;
    border: 5px solid #f3f3f3; /* Light grey */
    border-top: 5px solid #3498db; /* Blue */
    animation: spin 1s linear infinite;
    position: inherit;
    margin-bottom: auto;
    margin-top: auto;
}
.loader-small {
    margin-top: 0;
    margin-left: 5px;
    margin-right: 5px;
    height: 40px;
    width: 40px;
}

.loader-tiny div {
    width: 15px;
    height: 15px;
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid var(--accent-color-emph); /* Blue */
    animation: spin 1s linear infinite;
    position: inherit;
    margin-bottom: auto;
    margin-top: auto;
}
.loader-tiny {
    margin-top: auto;
    margin-left: 5px;
    margin-right: 2px;
    height: 27px;
    width: 27px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.loader-horizontal {
    width: 100%;
    height: 8px;
    background-color: #f3f3f3; /* Light grey */
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.loader-horizontal div {
    width: 40%;
    height: 100%;
    background-color: #3498db; /* Blue */
    border-radius: 4px;
    animation: slide 1.5s ease-in-out infinite;
}

@keyframes slide {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(250%);
    }
    100% {
        transform: translateX(-100%);
    }
}
.stacked-grid {
    width: 100%;
    display: grid;
    /* Creates a single 1x1 grid that children can occupy */
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}
.stacked-grid-content,
.course-timeslot,
.course-timeslot-available,
.course-timeslot-blocked,
.course-timeslot-blocked-icon {
    grid-column: 1/1;
    grid-row: 1/1;
}

.pointer {
    cursor: pointer;
}

.clickable {
    cursor: pointer;
}
.clickable:hover {
    background-color: var(--accent-color-light);
}

.no-wrap {
    text-wrap: nowrap;
}

.crossed {
    position: relative;
    overflow: hidden;
}

.fit-size {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

.segmented-control {
    display: flex;
    background-color: var(--accent-color-light);
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.15rem;
    gap: 0.15rem;
}

.segment-btn {
    background: transparent;
    border: none;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    height: 100%;
}

.btn-ghost {
    background: transparent;
    border: 1px solid transparent;
    color: #444242;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: all 0.2s;
}

.hide-native-picker::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.view-group {
    min-width: 250px;
    display: flex;
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.category-btn {
    background: var(--accent-color-light);
    border: none;
    border-right: 1px solid #e2e8f0;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 120px;
}

.entity-select,
.class-selection-btn {
    border: none;
    padding: 0.4rem 2rem 0.4rem 0.8rem;
    font-size: 0.95rem;
    font-weight: 600;
    min-width: 200px;
    color: #1e293b;
    background-color: transparent;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1em;
}

.css-arrow-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    width: 100%;
    /* DER MAGISCHE TRICK: Flexbox zentriert die Pseudo-Elemente nahtlos nebeneinander */
    display: flex;
    justify-content: center;
    align-items: center;
    /* NON-NEGOTIABLE ;) Funktioniert jetzt einwandfrei! */
    position: static;
    height: 25px;
    flex-shrink: 0;
}
.css-arrow-btn .css-arrow-inner {
    display: block; /* Keine absolute Positionierung mehr nötig! */
    width: 25px;
    min-width: 25px;
    height: 2px;
    background-color: #64748b;
    border-radius: 2px;
    transition:
        transform 0.3s ease,
        background-color 0.2s;
}
.css-arrow-btn .css-arrow-inner.left {
    transform-origin: right center;
    transform: rotate(8deg);
}
.css-arrow-btn .css-arrow-inner.right {
    transform-origin: left center;
    transform: rotate(-8deg);
}
.css-arrow-btn:hover .css-arrow-inner {
    background-color: #334155;
}
.css-arrow-btn {
    /* Ausgeklappter Zustand */
}
.css-arrow-btn.open .css-arrow-inner.left {
    transform: rotate(-8deg);
}
.css-arrow-btn.open .css-arrow-inner.right {
    transform: rotate(8deg);
}

/* =========================================
   DER TIME RANGE PICKER CONTAINER
   ========================================= */
.time-range-container {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    cursor: text;
}
/* --- DIE EINZELNEN INPUTS --- */
.time-input-group {
    display: flex;
    align-items: center;
    flex: 1;
    transition: background 0.2s;
    outline: none;
    border: none;
}

/* Der eigentliche native HTML5 Time-Picker */
.time-input {
    background: transparent;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    width: 100%;
    cursor: pointer;
    text-align: start;
    outline: none;
    border: none;
    /* Tabular Nums verhindert, dass das Input beim Tippen wackelt */
    font-variant-numeric: tabular-nums;
}
.time-input:focus-within {
    outline: none;
    border: none;
}
.time-input {
    /* Customizing des nativen Uhr-Icons (in Chrome/Edge) */
}
.time-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
    margin-left: 0;
}
.time-input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* --- DER SEPARATOR (PFEIL) --- */
.time-separator {
    color: #e2e8f0;
    font-weight: bold;
    padding: 0 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

/* Pfeil wird zur Akzentfarbe, wenn Container fokussiert ist */
.time-range-container:focus-within .time-separator {
    color: var(--accent-color-emph);
}

.time-input-openpicker {
    border: none;
    outline: none;
    padding: 0 0.5rem;
    transition: color 0.2s;
}
.time-input-openpicker:hover {
    color: var(--accent-color-emph);
}

.bool-input {
    zoom: 1.5;
    margin-right: 0.5rem;
}

.menu-form {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.menu-form .text-input {
    width: calc(100% - 40px);
    padding: 0.75rem 1.25rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    border: none;
    border: 1px solid #e2e8f0;
}
.menu-form .date-picker {
    border: 1px solid #e2e8f0;
}

.form-nav-add-icon {
    width: 30px;
    height: 30px;
    margin: 6px 6px;
    color: #56c280;
    cursor: pointer;
}
.form-nav-add-icon:hover {
    color: #f59e0b;
}

.form-input-box {
    position: relative;
    border: 1px solid #e2e8f0;
    font-size: 0.9rem;
    color: #1e293b;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.form-input-drag-table {
    width: 100%;
    background-color: #ffffff;
}
.form-input-drag-item {
    cursor: pointer;
    user-select: none;
}
.form-input-drag-item td {
    border: 1px solid #444242;
    padding: 0.5rem;
}
.form-input-label,
.form-input-label-disabled {
    font-family:
        system-ui,
        -apple-system,
        sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    letter-spacing: 0.5px;
}
.form-input-label-disabled {
    color: #999595;
}

.error-message {
    text-align: center;
    color: #f56161;
}

.dropdown-options {
    position: relative;
    min-width: 270px;
}
.dropdown-options .dropdown-options-item {
    font-size: 1rem;
    font-weight: normal;
    line-height: inherit;
    cursor: pointer;
    user-select: none;
    padding: 0.65rem 1.25rem;
    transition: all 0.2s ease-in-out;
    background-color: #ffffff;
    z-index: inherit;
}
.dropdown-options .dropdown-options-item:hover {
    color: #181717;
    background-color: #f8f0f0;
}
.dropdown-options .dropdown-options-item.is-important {
    border-left: 3px solid #f56161;
    border-right: 3px solid #f56161;
}
.dropdown-options .dropdown-options-item.is-select,
.dropdown-options .dropdown-options-item.is-select:hover {
    color: #181717;
    background-color: #dbd1d1;
}
.dropdown-options .dropdown-options-item.is-searched,
.dropdown-options .dropdown-options-item.is-searched:hover {
    color: #181717;
    background-color: var(--accent-color-light);
}
.dropdown-options .dropdown-options-item.is-active,
.dropdown-options .dropdown-options-item.is-active:hover {
    color: #181717;
    background-color: var(--accent-color-light);
}
.dropdown-options .dropdown-options-item.is-conflict {
    color: #181717;
    background-color: #f59e0b;
}
.dropdown-options .dropdown-options-item.is-conflict .progress-bar-overflow {
    background-color: #f56161;
}
.dropdown-options .dropdown-options-item.is-active.is-conflict,
.dropdown-options .dropdown-options-item.is-active.is-conflict:hover {
    color: #181717;
    background-color: #f56161;
}
.dropdown-options
    .dropdown-options-item.is-active.is-conflict
    .progress-bar-overflow,
.dropdown-options
    .dropdown-options-item.is-active.is-conflict:hover
    .progress-bar-overflow {
    background-color: #f59e0b;
}
.dropdown-options .dropdown-options-item.is-active.is-conflict-light {
    color: #181717;
    background-color: #f59e0b;
}
.dropdown-options
    .dropdown-options-item.is-active.is-conflict-light
    .progress-bar-overflow {
    background-color: #f56161;
}
.dropdown-options .dropdown-options-item.is-active.is-conflict-light,
.dropdown-options .dropdown-options-item.is-active.is-conflict:hover {
    color: #181717;
    background-color: #f56161;
}
.dropdown-options
    .dropdown-options-item.is-active.is-conflict-light
    .progress-bar-overflow,
.dropdown-options
    .dropdown-options-item.is-active.is-conflict:hover
    .progress-bar-overflow {
    background-color: #f59e0b;
}
.dropdown-options .dropdown-options-search-box {
    display: flex;
    background-color: #ffffff;
}
.dropdown-options .dropdown-options-search {
    display: block;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    width: 100%;
    height: auto;
    padding: 0.65rem 1.25rem;
    border: none;
    outline: none;
    color: #181717;
    background-clip: padding-box;
    background-color: #ffffff;
    border: 2px solid #e2e8f0;
}
.dropdown-options .dropdown-options-search-inner {
    max-height: 250px;
    overflow-y: scroll;
    overflow-x: hidden;
    border: 2px solid #e2e8f0;
    border-top: none;
    border-bottom-left-radius: 0.85rem;
    border-bottom-right-radius: 0.85rem;
}
.dropdown-options .dropdown-options-search-inner.inverted {
    border-radius: 0;
    border-top-left-radius: 0.85rem;
    border-top-right-radius: 0.85rem;
}
.dropdown-options .dropdown-options-field {
    position: relative;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
    user-select: none;
    width: calc(100% - 40px);
    height: auto;
    padding: 0.75rem 1.25rem;
    border: none;
    color: #181717;
    background-clip: padding-box;
    background-color: #ffffff;
    box-shadow: #f8f0f0;
}
.dropdown-options .dropdown-options-field.invalid {
    border: 2px solid #f56161;
}
.dropdown-options .dropdown-options-field.multi {
    padding-left: 1rem;
    padding-right: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.dropdown-options .dropdown-options-placeholder {
    opacity: 0.6;
}
.dropdown-options .dropdown-options-value {
    opacity: 1;
}
.dropdown-options .dropdown-options-badge {
    display: flex;
    border-radius: 1rem;
    padding: 0.25rem 0.5rem;
    background-color: color-mix(
        in srgb,
        var(--badge-color, #56c280) 15%,
        white
    );
    color: var(--badge-color, #28b283);
    border: 1px solid var(--badge-color, #28b283);
    font-weight: bold;
    height: 26px;
    gap: 0.4rem;
}
.dropdown-options .btn-remove-option {
    color: inherit;
    background: none;
    cursor: pointer;
    font-weight: bold;
    border: none;
    min-width: 15px;
    padding: 1px;
    color: #64748b;
}
.dropdown-options .btn-remove-option:hover {
    color: #1e293b;
}

.date-trigger {
    position: relative;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
    user-select: none;
    width: calc(100% - 40px);
    height: auto;
    padding: 0.75rem 1.25rem;
    border: none;
    color: #181717;
    background-clip: padding-box;
    background-color: #ffffff;
    box-shadow: #f8f0f0;
}
.date-trigger.invalid {
    border: 2px solid #f56161;
}

.no-semester-closed {
    display: none;
}

.no-semester {
    position: fixed;
    z-index: 19;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.options,
.options-week-rhythms,
.options-active-view,
.options-week-rhythms .opened,
.options-active-view .opened,
.options-tt-focus,
.options-tt-focus .opened,
.options .opened {
    display: inline-block;
    position: relative;
    background-color: #ffffff;
    padding-left: 8px;
    border-radius: 8px;
    color: var(--accent-color-emph);
    border: 1px solid var(--accent-color);
}
.options .cursor,
.options-week-rhythms .cursor,
.options-active-view .cursor,
.options-tt-focus .cursor,
.options .cursor-rotated,
.options-week-rhythms .cursor-rotated,
.options-active-view .cursor-rotated,
.options-tt-focus .cursor-rotated {
    display: inline;
    vertical-align: middle;
}
.options .cursor svg,
.options-week-rhythms .cursor svg,
.options-active-view .cursor svg,
.options-tt-focus .cursor svg,
.options .cursor-rotated svg,
.options-week-rhythms .cursor-rotated svg,
.options-active-view .cursor-rotated svg,
.options-tt-focus .cursor-rotated svg {
    width: 25px;
    min-width: 25px;
}
.options .label,
.options-week-rhythms .label,
.options-active-view .label,
.options-tt-focus .label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 800;
}
.options .label div,
.options-week-rhythms .label div,
.options-active-view .label div,
.options-tt-focus .label div {
    padding: 11px 1px;
    width: 200px;
}
.options .label button,
.options-week-rhythms .label button,
.options-active-view .label button,
.options-tt-focus .label button {
    height: 100%;
}
.options .opened,
.options-week-rhythms .opened,
.options-active-view .opened,
.options-tt-focus .opened {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.options .btn,
.options-week-rhythms .btn,
.options-active-view .btn,
.options-tt-focus .btn {
    border-left: 1px solid #444242;
    padding: 0 0.5em;
    width: 40px;
}
.options .btn:hover,
.options-week-rhythms .btn:hover,
.options-active-view .btn:hover,
.options-tt-focus .btn:hover {
    background-color: var(--accent-color-light);
}
.options .content,
.options-week-rhythms .content,
.options-active-view .content,
.options-tt-focus .content {
    flex-grow: 1;
    text-align: center;
    cursor: pointer;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 700;
}
.options .menu,
.options-week-rhythms .menu,
.options-active-view .menu,
.options-tt-focus .menu {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    position: absolute;
    top: 100%;
    z-index: 100;
    background-color: var(--accent-color);
    width: 100%;
    left: 0;
}
.options .menu div,
.options-week-rhythms .menu div,
.options-active-view .menu div,
.options-tt-focus .menu div {
    cursor: pointer;
    padding: 10px 1rem;
    border-top: solid 1px #444242;
}
.options .menu div:hover,
.options-week-rhythms .menu div:hover,
.options-active-view .menu div:hover,
.options-tt-focus .menu div:hover {
    background-color: var(--accent-color-light);
}
.options .menu div:first-child,
.options-week-rhythms .menu div:first-child,
.options-active-view .menu div:first-child,
.options-tt-focus .menu div:first-child {
    border: none;
}
.options-tt-focus {
    width: 100%;
    padding-left: 0;
}
.options-tt-focus .label div {
    width: 100%;
    padding: 5px 0;
}
.options-tt-focus .cursor,
.options-tt-focus .cursor-rotated {
    display: inline;
    vertical-align: middle;
}
.options-tt-focus .cursor svg,
.options-tt-focus .cursor-rotated svg {
    width: 25px;
    min-width: 25px;
}

.options-week-rhythms,
.options-active-view {
    width: 250px;
    max-width: 250px;
    min-width: 250px;
    margin: 0;
    border: 1px solid #444242;
    padding: 0;
}
.options-week-rhythms .label,
.options-active-view .label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}
.options-week-rhythms .label div,
.options-active-view .label div {
    padding: 0 1px;
}
.options-week-rhythms .label button,
.options-active-view .label button {
    height: 100%;
}

@media only screen and (max-width: 800px) {
    .options-week-rhythms,
    .options-active-view {
        width: 100%;
        max-width: 100%;
    }
}
.options-active-view {
    border-bottom: none;
}

.modal {
    position: fixed;
    z-index: 1200;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px); /* Schöner, moderner Unschärfe-Effekt */
    z-index: 9999; /* Sehr hoch, damit es über allem liegt */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Fade-In Animation für das Overlay */
    animation: fadeIn 0.2s ease-out;
}
.modal-content {
    background: #ffffff;
    max-height: 85vh;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Pop-In Animation für Desktop */
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.modal-header,
.modal h2 {
    padding: 0.5rem 0;
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background-color: var(--accent-color-light);
    border-bottom: 1px solid #e2e8f0;
}
.modal-header h2 {
    font-size: 1.15rem;
    color: var(--accent-color-emph);
    margin: 0;
    font-weight: 700;
}
.modal-header .close-btn {
    background: transparent;
    border: none;
    font-size: 1.25rem;
    color: var(--accent-color-emph);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 6px;
    line-height: 1;
    transition: background-color 0.2s;
}
.modal-header .close-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}
.modal-header-title h2 {
    font-size: 1.25rem;
    color: var(--accent-color-emph);
    margin: 0 0 0.25rem 0;
}
.modal-header-title p {
    font-size: 0.9rem;
    color: #1e293b;
    margin: 0;
}
.modal-header-action {
    cursor: pointer;
    padding: 6px;
    margin-left: 5px;
    border-radius: 4px;
    min-width: 20px;
}
.modal-header-action svg {
    margin-top: auto;
    margin-bottom: auto;
}
.modal-header-action:hover {
    background-color: #f8f0f0;
}
.modal-body {
    overflow-y: auto; /* Erlaubt das Scrollen, wenn Inhalt zu lang ist */
    display: flex;
    flex-direction: column;
    padding: 1rem;
    max-width: 800px;
}
.modal-footer {
    display: flex;
    justify-content: flex-end;
    padding: 1rem;
}
.modal-footer-rem {
    padding: 1rem;
}
.modal-button,
.modal-button-save,
.modal-button-save-primary,
.modal-button-cancel {
    border-radius: 8px;
    padding: 0.5rem;
    border: 1px solid #ffffff;
}
.modal-button:hover,
.modal-button-save:hover,
.modal-button-save-primary:hover,
.modal-button-cancel:hover {
    border: 1px solid var(--accent-color);
}
.modal-button-cancel {
    color: #f56161;
}
.modal-button-save-primary {
    color: #56c280;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes popIn {
    from {
        transform: scale(0.95);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}
.close-modal {
    cursor: pointer;
}

/* =========================================
   DROPDOWN MENÜ
   ========================================= */
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f8fafc;
    border: none;
    min-width: 150px;
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #1e293b;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s;
}
.dropdown-item:hover {
    background: var(--accent-color-light);
    color: var(--accent-color-emph);
}
.dropdown-item.danger {
    color: #f56161;
}
.dropdown-item.danger:hover {
    background: #fef2f2;
}

.dropdown-menu,
.help-menu {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    min-width: 180px;
    display: flex;
    flex-direction: column;
    padding: 0.4rem;
    transform: translateY(-5px);
    transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.dropdown-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 0.25rem 0;
}

.dropdown-menu-inner {
    max-height: 250px;
    overflow-y: scroll;
    border: 1px solid #444242;
}

.help-menu {
    max-width: 550px;
    padding: 1rem;
    margin: 0 auto;
    right: -15px;
    left: auto;
    min-width: 550px;
}

/* Ergibt rotiert exakt ~42.4px Höhe! */
.main {
    margin-top: 40px;
}

#navbar {
    display: flex;
    justify-content: space-between;
    text-decoration: none;
    width: 100vw;
    height: 40px;
    align-items: center;
    gap: 2rem;
    background-color: #f1eeee;
    position: fixed;
    top: 0;
    z-index: 1000;
}

.nav-hamburger-menu {
    padding: 0 0.5rem;
    background-color: var(--accent-color-light);
    height: 40px;
    z-index: 1001;
}
.nav-hamburger-menu:hover {
    background-color: var(--accent-color);
    color: #ffffff;
}
.nav-hamburger-menu-items {
    background: #ffffff;
    display: flex;
    flex-direction: column;
    padding: 0.4rem;
    border-radius: 8px;
    border: 3px solid var(--accent-color);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    min-width: 180px;
}
.nav-hamburger-menu-items .step-item {
    text-decoration: none;
    color: #181717;
    display: flex;
    align-items: start;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
}
.nav-hamburger-menu-items .step-item.active {
    background-color: var(--accent-color);
}
.nav-hamburger-menu-items .step-item:hover {
    background: var(--accent-color-light);
    color: var(--accent-color-emph);
}
.nav-hamburger-menu-items .step-item .step-icon {
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.nav-hamburger-menu-items .step-item .step-label {
    margin-left: 0.85rem;
    font-size: 0.9rem;
    font-weight: 600;
}
.nav-hamburger-menu-item,
.nav-hamburger-menu-item-active,
.nav-hamburger-menu-items .step-item.active {
    text-decoration: none;
    color: #181717;
}
.nav-hamburger-menu-item-active {
    background-color: var(--accent-color);
}

.nav-item,
.nav-item-active {
    display: inline-block;
    background-color: var(--accent-color);
    padding-left: 20px;
    text-decoration: none;
    padding: 10px 1rem 10px 2rem;
    height: 20px;
    color: #181717;
    position: relative;
}
.nav-item:hover,
.nav-item-active:hover {
    background-color: var(--accent-color-light);
}
.nav-item:hover::after,
.nav-item-active:hover::after {
    border-left: 20px solid var(--accent-color-light);
}
.nav-item::after,
.nav-item-active::after {
    content: "";
    position: absolute;
    left: 100%;
    width: 0;
    height: 0;
    top: 0px;
    border-top: 20px solid transparent;
    border-left: 20px solid var(--accent-color);
    border-bottom: 20px solid transparent;
    z-index: 2;
}
.nav-item::before,
.nav-item-active::before {
    content: "";
    position: absolute;
    left: 100%;
    width: 0;
    top: -4px;
    height: 0;
    border-top: 24px solid transparent;
    border-left: 24px solid #444242;
    border-bottom: 24px solid transparent;
    border-radius: 10px;
    z-index: 1;
}
.nav-item:first-child,
.nav-item-active:first-child {
    padding-left: 1rem;
}
.nav-item-active {
    background-color: var(--accent-color-emph);
    color: black;
    font-weight: 500;
}
.nav-item-active::after {
    border-left: 20px solid var(--accent-color-emph);
}

.justify-start {
    display: flex;
    justify-content: flex-start;
}

.justify-center {
    display: flex;
    justify-content: center;
}

.justify-end {
    display: flex;
    justify-content: flex-end;
}

#nav-user-section {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    display: flex;
    justify-items: center;
    background-color: var(--accent-color-light);
}

#nav-user-section button,
#nav-user-section div {
    border-left: 3px solid var(--accent-color-emph);
}

#nav-user-section button:first-child,
#nav-user-section div:first-child {
    border-left: none;
}

.undo-redo-btn {
    border-right: 2px solid #444242;
    padding: 0 0.5em;
    height: 40px;
    background-color: var(--accent-color-light);
    color: #181717;
}
.undo-redo-btn:hover {
    background-color: var(--accent-color);
    color: #ffffff;
}

#main {
    margin-top: 40px;
    height: calc(100vh - 40px);
    max-height: calc(100vh - 40px);
}

.user-session-circle {
    height: 20px;
    width: auto;
    line-height: 20px;
    text-align: center;
    padding: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background-color: #a9fff4;
    margin-top: 2.5px;
}

.logout-btn,
.settings-btn {
    height: 40px;
    padding: 10px 1rem;
}

.logout-btn:hover,
.settings-btn:hover {
    background-color: var(--accent-color);
    color: #ffffff;
}

.settings-btn {
    padding: 0 0.5em;
    color: #181717;
}
.settings-btn svg {
    margin-top: 6px;
}
.settings-btn {
    border-left: 3px solid var(--accent-color-emph);
}

.number-of-sessions {
    position: absolute;
    bottom: 0;
    right: 7px;
    font-weight: 700;
}

.user-session-div {
    position: relative;
    margin-left: 7px;
}

.nav-ws-reconnect {
    height: 40px;
}
.nav-ws-reconnect p {
    margin: 5px;
}

.ttstatus,
.ttstatus-changed,
.ttstatus-published,
.ttstatus-not-published {
    padding: 0 5px;
    margin-left: 1em;
}
.ttstatus-published {
    background-color: var(--accent-color);
}
.stepper-container {
    display: flex;
    height: 40px;
    flex-grow: 1;
    background: #f8fafc; /* Hintergrund für den leeren Bereich rechts */
    /* MAGIC TRICK: Schneidet die rotierte Box oben und unten passgenau ab,
      lässt sie aber rechts 50px aus dem Container ragen, damit
      der allerletzte Pfeil nicht abgeschnitten wird! */
    clip-path: inset(0 -50px 0 0);
}
.stepper-container .step-item {
    /* Lokale Custom Properties für geschmeidige Hover-Übergänge der ::after Elemente */
    --step-bg: #ffffff;
    --step-color: #64748b;
    text-decoration: none;
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    background: var(--accent-color-light);
    color: var(--step-color);
    /* PADDING FIX: 38px links geben dem Icon extrem viel Platz zum atmen,
      sodass der vorherige Pfeil nicht reinsticht! */
    padding: 0 15px 0 38px;
    /* Überlappung: Zieht das Element unter den vorherigen Pfeil */
    margin-left: -15px;
    cursor: pointer;
    transition:
        background 0.3s ease,
        color 0.3s ease;
    /* Der erste Schritt braucht links keinen Platz für einen Pfeil */
}
.stepper-container .step-item:first-child {
    padding-left: 15px;
    margin-left: 0;
}
.stepper-container .step-item {
    /* --- Z-INDEX KASKADE (SCSS Magic) --- */
    /* Damit die Pfeile immer schön übereinander liegen (links über rechts) */
}
.stepper-container .step-item:nth-child(1) {
    z-index: 19;
}
.stepper-container .step-item:nth-child(2) {
    z-index: 18;
}
.stepper-container .step-item:nth-child(3) {
    z-index: 17;
}
.stepper-container .step-item:nth-child(4) {
    z-index: 16;
}
.stepper-container .step-item:nth-child(5) {
    z-index: 15;
}
.stepper-container .step-item:nth-child(6) {
    z-index: 14;
}
.stepper-container .step-item:nth-child(7) {
    z-index: 13;
}
.stepper-container .step-item:nth-child(8) {
    z-index: 12;
}
.stepper-container .step-item:nth-child(9) {
    z-index: 11;
}
.stepper-container .step-item:nth-child(10) {
    z-index: 10;
}
.stepper-container .step-item {
    /* --- DIE ABGERUNDETE PFEILSPITZE (Rotated Square) --- */
}
.stepper-container .step-item::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -15px;
    width: 30px;
    height: 30px;
    /* Erbt die Hintergrundfarbe des Schrittes nahtlos (var(--step-bg))! */
    background: linear-gradient(
        45deg,
        rgba(0, 0, 0, 0) 50%,
        var(--accent-color-light) 50% 100%
    );
    /* DAS ABGERUNDETE ENDE! */
    border-top: 3px solid var(--accent-color);
    border-right: 3px solid var(--accent-color);
    border-top-right-radius: 6px;
    /* Box um 45 Grad drehen, um die Pfeilform zu bekommen */
    transform: translateY(-50%) rotate(45deg);
    z-index: 2;
}
.stepper-container .step-item {
    /* --- HOVER & ACTIVE ZUSTÄNDE --- */
}
.stepper-container .step-item:hover {
    --step-bg: var(--accent-color-light);
    --step-color: c.$clr-text;
}
.stepper-container .step-item.active {
    --step-bg: var(--accent-color-light);
    --step-color: c.$clr-text;
}
.stepper-container .step-item {
    /* --- FLIESSENDE TEXT-ANIMATION --- */
}
.stepper-container .step-item .step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.stepper-container .step-item .step-label {
    font-size: 0.9rem;
    font-weight: 600;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    /* Animiert die Breite butterweich auf */
    transition:
        max-width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
        opacity 0.3s ease,
        margin 0.3s ease;
}
.stepper-container .step-item {
    /* Ausklappen, wenn Aktiv oder Gehovert */
}
.stepper-container .step-item:hover .step-label,
.stepper-container .step-item.active .step-label {
    max-width: 150px;
    opacity: 1;
    margin-left: 0.6rem;
}

.sidebar,
.deputat-grid-menu,
.sidebar-small,
.sidebar-small-closed,
.sidebar-small-open {
    position: sticky;
    height: auto;
    box-sizing: border-box;
    width: 250px;
    overflow-y: auto;
    overflow-x: hidden;
}
.sidebar-small,
.sidebar-small-closed,
.sidebar-small-open {
    position: absolute;
    z-index: 15;
    background-color: #ffffff;
    height: calc(100vh - 40px);
    transition: width 0.1s ease-in-out;
}
.sidebar-small-arrow {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 50%;
    rotate: 270deg;
    left: -5px;
}
.sidebar-small-closed {
    width: 15px;
    padding-left: 15px;
    cursor: pointer;
}
.sidebar-small-closed:hover {
    background-color: #ececec;
}

.sidebar ul,
.deputat-grid-menu ul,
.sidebar-small ul,
.sidebar-small-open ul,
.sidebar-small-closed ul {
    list-style: none;
}

.side-menu-btn {
    display: flex;
    align-content: center;
    text-decoration: none;
    width: 100%;
    padding: 0.85rem;
    padding-left: 0.5rem;
    margin: 1rem 0;
    color: #181717;
    gap: 1rem;
    text-align: left;
    cursor: pointer;
}
.side-menu-btn svg {
    min-width: 30px;
}

.setup-grid {
    grid-template-columns: auto 1fr;
    height: calc(100vh - 40px);
    position: relative;
}

@media only screen and (max-width: 800px) {
    .setup-grid {
        grid-template-columns: 1fr;
    }
}
.show-color {
    min-height: 15px;
}

.setup-btn,
.setup-add-class-btn,
.add-semester-btn,
.course-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    cursor: pointer;
    background-color: var(--accent-color);
    padding: 0.85rem 0;
}
.setup-btn:hover,
.setup-add-class-btn:hover,
.add-semester-btn:hover,
.course-btn:hover {
    background-color: var(--accent-color-light);
}
.setup-btn:active,
.setup-add-class-btn:active,
.add-semester-btn:active,
.course-btn:active {
    background-color: var(--accent-color-emph);
}

.course-btn {
    width: 50%;
}

.add-semester-btn {
    padding: 5px 5px;
}

.setup-add-class {
    margin: 1rem;
    width: auto;
}
.setup-add-class-header,
.setup-add-class-header.open {
    display: flex;
    justify-content: space-between;
    padding: 1em;
    text-align: left;
    width: 100%;
    background-color: #dbd1d1;
    border-radius: 0.5rem;
    border: 1px solid #444242;
}
.setup-add-class-header.open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
}
.setup-add-class-body,
.setup-add-class-body-closed {
    overflow: hidden;
    padding: 1em;
    max-height: fit-content;
    transition: max-height 0.2s ease-out;
    background-color: #ececec;
    border: 1px solid #444242;
    border-top: none;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}
.setup-add-class-body-closed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border: none;
}
.setup-subjects {
    width: auto;
    margin: 1rem;
}

.setup-teachers {
    width: auto;
    margin: 1rem;
}
.setup-teachers-value-teaches {
    margin-right: 0.25em;
}
.setup-teachers-value-teaches:last-child::after {
    content: "";
}
.setup-teachers-value-teaches::after {
    content: ",";
}

.setup-events {
    width: auto;
    margin: 1rem;
}

.setup-rooms {
    width: auto;
    margin: 1rem;
}

.setup-remove-class-btn {
    border-radius: 30%;
}
.setup-remove-class-btn:hover {
    background-color: #f8f0f0;
    color: #f56161;
}

.setup-add-student-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    cursor: pointer;
    background-color: #a9fff4;
    padding: 0.5rem 0;
    margin-top: 1rem;
}
.setup-add-student-btn:hover {
    background-color: #befbff;
}

.holiday-table-cell {
    padding: 0 0.5rem;
}
.holiday-table-cell-date {
    text-align: center;
    padding: 0 0.5rem;
}
.holiday-table-cell-weeknr,
.holiday-table-cell-weeknr-transposed {
    text-align: right;
    font-weight: 1000;
}
.holiday-table-cell-weeknr-transposed {
    text-align: center;
}

.weekday-box-outer {
    width: 25px;
    height: 25px;
    background-color: #ffffff;
    border: 1px solid #444242;
    border-radius: 0.5rem;
    margin: 1px;
}
.weekday-box-inner {
    cursor: pointer;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    border: 4px solid #ffffff;
    border-radius: 0.5rem;
}
.weekday-box-inner.weekend {
    border: 4px solid var(--accent-color-emph);
}
.weekday-box-inner.holiday {
    background-color: var(--accent-color);
}
.weekday-box-inner.selected-adding {
    background-color: var(--accent-color) !important;
}
.weekday-box-inner.selected-removing {
    background-color: #f59e0b !important;
}
.weekday-box-inner:hover {
    background-color: #befbff;
    border: 4px solid #befbff;
}
.weekday-box-inner.disabled {
    background-color: #dbd1d1;
    border: 4px solid #dbd1d1;
    cursor: default;
}
.weekday-box-inner.public-holiday {
    border: 4px solid #fe7743 !important;
}

.content-table {
    border-collapse: collapse;
    width: 100%;
}
.content-table-actions {
    width: 60px;
    min-width: fit-content;
    border: none;
    padding-left: 8px;
}
.content-table-content {
    border: 1px solid #444242;
    padding: 8px;
}
.content-table-title {
    position: relative;
    cursor: pointer;
}
.content-table-subtitle {
    padding: 8px;
    font-weight: 800;
    border: 1px solid #444242;
    background-color: var(--accent-color-light);
}
.content-table-group {
    border-bottom: 8px solid var(--accent-color);
    border-left: 3px solid var(--accent-color);
}
.content-table tr:nth-child(even) {
    background-color: #f8f0f0;
}
.content-table th {
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 8px;
    text-align: left;
    border: 1px solid #444242;
    background-color: #a9fff4;
}
.content-table-no-data {
    text-align: center;
    background-color: #f8f0f0;
}
.content-table-unimportant {
    opacity: 0.4;
}
.content-table .selectable {
    cursor: pointer;
}
.content-table .selectable:hover {
    background-color: var(--accent-color-light);
}
.content-table .selected {
    background-color: var(--accent-color) !important;
}

/* =========================================
   TABELLEN CONTAINER
   ========================================= */
.table-card {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}
.table-card .table-card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.table-card .table-card-header h2 {
    font-size: 1.1rem;
    color: #1e293b;
    margin: 0;
}
.table-card .table-responsive {
    width: 100%;
    overflow-x: auto;
    max-height: 600px;
    scrollbar-width: thin;
}

/* =========================================
   DIE TABELLE SELBST
   ========================================= */
.data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    min-width: 300px;
    /* --- HEADERS --- */
}
.data-table th {
    position: sticky;
    top: 0;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.8rem 1rem;
    border-bottom: 2px solid #e2e8f0;
    z-index: 10;
}
.data-table th.sortable {
    cursor: pointer;
    transition:
        color 0.2s,
        background-color 0.2s;
    user-select: none;
}
.data-table th.sortable:hover {
    color: #1e293b;
    background-color: var(--accent-color-light);
}
.data-table th {
    /* Sortier-Icons */
}
.data-table th .sort-icon {
    display: inline-block;
    margin-right: 0.4rem;
    font-size: 0.9rem;
    color: #e2e8f0;
    transition:
        transform 0.2s,
        color 0.2s;
}
.data-table th {
    /* Aktiver Zustand */
}
.data-table th.active {
    color: var(--accent-color-emph);
}
.data-table th.active .sort-icon {
    color: var(--accent-color-emph);
}
.data-table th.active.desc .sort-icon {
    transform: rotate(180deg);
}
.data-table {
    /* --- ZELLEN & REIHEN --- */
}
.data-table td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    color: #1e293b;
    font-size: 0.95rem;
    vertical-align: middle;
}
.data-table td.unimportant {
    opacity: 0.4;
}
.data-table tbody tr {
    transition: background-color 0.2s;
}
.data-table tbody tr:hover {
    background-color: var(--accent-color-light);
}
.data-table tbody tr.selectable {
    cursor: pointer;
}
.data-table tbody tr {
    /* Visuelles Feedback für ausgewählte Reihen */
}
.data-table tbody tr.selected {
    background-color: var(--accent-color-light);
}
.data-table tbody tr.selected:hover {
    background-color: color-mix(in srgb, var(--accent-color-light) 80%, black);
}
.data-table tbody tr.category-header {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    background-color: #ececec;
    box-shadow: inset 7px 0 0 0 var(--accent-color-light);
}
.data-table tbody tr.category-header td {
    color: #1e293b;
    font-size: 0.9rem;
    font-weight: 700;
}
.data-table tbody tr.category-item {
    box-shadow: inset 7px 0 0 0 var(--accent-color-light);
}
.data-table tbody tr.category-item.last {
    border-bottom: 3px solid var(--accent-color-light);
}

/* =========================================
   AKTIONSSPALTE (Checkboxes & Kebab)
   ========================================= */
.col-actions {
    width: 80px;
    text-align: center;
}

.action-cell {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
}
.action-cell .row-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(
        --accent-color-emph
    ); /* Moderne Browser färben die Checkbox in Primary-Farbe! */
}
.action-cell .kebab-btn {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.action-cell .kebab-btn:hover {
    background: #e2e8f0;
    color: #1e293b;
}

/* =========================================
   EXTRAS (Badges)
   ========================================= */
.subject-badges {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.subject-badges .badge {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 0.1rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

.deputat-grid ul {
    list-style: none;
}
.deputat-grid {
    grid-template-columns: auto 1fr auto;
    height: calc(100vh - 60px);
    position: relative;
}
.deputat-grid.teacher-deputat {
    position: sticky;
    height: auto;
    box-sizing: border-box;
    width: 250px;
}

@media only screen and (max-width: 1300px) {
    .deputat-grid {
        grid-template-columns: 1fr auto;
    }
}
.teacher-deputat-menu,
.teacher-deputat-menu-open {
    position: relative;
    margin-top: 1rem;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.85rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
}
.teacher-deputat-menu-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background-color: #ffffff;
    padding-bottom: 0;
    border-bottom: 1px solid #e2e8f0;
}
.teacher-deputat-menu-header h2 {
    font-size: 1.25rem;
    color: #181717;
    padding: 0.5rem;
}
.teacher-deputat-menu-closed {
    width: 15px;
    position: absolute;
    right: 0;
    height: calc(100vh - 40px);
    transition: width 0.1s ease-in-out;
}
.teacher-deputat-menu-closed-arrow {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 50%;
    rotate: 90deg;
    right: -5px;
}
.teacher-deputat-menu-open {
    position: absolute;
    right: 0;
    transition: width 0.1s ease-in-out;
    width: 250px;
}

.global-workload {
    padding: 1rem;
    border-radius: 8px;
    margin: 0.5rem;
}
.global-workload .global-title {
    font-size: 1.1rem;
    color: #181717;
    font-weight: 600;
}
.global-workload .global-numbers {
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 0.2rem;
}
.global-workload.status-ok {
    background-color: #d3fade;
    border: 1px solid #56c280;
}
.global-workload.status-ok .global-numbers {
    color: #28b283;
}
.global-workload.status-over {
    background-color: #e1f0f7;
    border: 1px solid #5c9cbf;
}
.global-workload.status-over .global-numbers {
    color: #327ba1;
}

.workload-list {
    width: 100%;
    max-width: 265px;
    padding-top: 0;
    overflow-y: auto;
    max-height: calc(100vh - 260px);
    display: flex;
    flex-direction: column;
}
.workload-list-pinned {
    position: sticky;
    display: flex;
    flex-direction: column;
    top: 0;
    background-color: #ffffff;
    gap: 0.5rem;
}
.workload-list-pinned .teacher-workload {
    background-color: var(--accent-color-light);
    border: 1px solid var(--accent-color);
}
.workload-list-pinned:has(> *) {
    /* Styles applied if .container has at least one direct child */
    padding: 0.5rem 0;
    border-bottom: 2px solid #e2e8f0;
}

.teacher-workload {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.5rem;
    border-radius: 8px;
    cursor: pointer;
}
.teacher-workload .tw-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.teacher-workload .tw-header .tw-title {
    font-size: 0.95rem;
    color: #181717;
    font-weight: 600;
}
.teacher-workload .tw-header .tw-numbers {
    font-size: 1.2rem;
    font-weight: 700;
    color: #181717;
    margin-top: 0.2rem;
    white-space: nowrap;
}
.teacher-workload .tw-header .tw-numbers.status-over {
    color: #f56161;
}
.teacher-workload .progress-track {
    width: 100%;
    height: 8px;
    background-color: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}
.teacher-workload .progress-track .progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.status-ok .progress-fill {
    background-color: #56c280;
}

.status-over .tw-title {
    color: #f56161;
}
.status-over .tw-numbers {
    color: #f56161;
}
.status-over .progress-fill {
    background-color: #f56161;
}

.deputat-teacher {
    padding-top: 0.5rem;
    position: relative;
}
.deputat-teacher-box {
    width: 100%;
}
.deputat-teacher-list {
    padding: 25px 5px;
    padding-bottom: 150px;
}
.deputat-teacher-progress {
    width: 100%;
    display: flex;
    border: 1px solid #444242;
    position: relative;
}
.deputat-teacher-progress-not-assigned {
    height: 25px;
    background-color: var(--accent-color-light);
}
.deputat-teacher-progress-assigned {
    height: 25px;
    background-color: var(--accent-color);
}
.deputat-teacher-progress-assigned-overflow {
    height: 25px;
    background-color: #f59e0b;
}
.deputat-teacher-progress-over-assigned {
    height: 25px;
    background-color: #f56161;
}
.deputat-teacher-progress-label {
    position: absolute;
    right: 6px;
    margin-top: 2px;
    font-weight: 500;
    font-size: 20px;
}
.deputat-teacher-hover-box {
    display: none;
    position: absolute;
    z-index: 1;
    background-color: #ececec;
    min-width: 200px;
    padding: 4px;
    bottom: auto !important;
    top: auto !important;
    margin-bottom: var(--space-xs);
}
.deputat-teacher-hover-box table {
    width: 100%;
    border-collapse: collapse;
}
.deputat-teacher-hover-box table th {
    font-weight: 700;
}
.deputat-teacher:hover .deputat-teacher-hover-box {
    display: block;
}

.deputat-teaching {
    gap: 1rem;
}

.deputat-controls {
    position: sticky;
    background-color: #ffffff;
    width: 100%;
    top: 0;
    z-index: 15;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}
.deputat-controls .selector {
    max-width: 350px;
    width: 350px;
}

.deputat-selector {
    min-width: 250px;
    padding: 0;
}
.deputat-selector .dropdown-options-field {
    padding: 0.8rem 1rem;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    border-radius: 8px;
}

@media only screen and (max-width: 1300px) {
    .deputat-controls {
        flex-direction: column;
        gap: 0.5rem;
    }
}
.hours-pill {
    padding: 0.35rem 0.8rem;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
}

.deputat-preview {
    padding: 0.35rem;
    border: 1px solid var(--accent-color);
    border-radius: 6px;
}
.deputat-preview th {
    font-weight: 600;
}

.sort-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    padding-top: 0.25rem;
    padding-right: 0.5rem;
}

.sort-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sort-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

.sort-toggle-group {
    display: flex;
    background: #f8fafc;
    padding: 0.15rem;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.sort-btn {
    background: transparent;
    border: none;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
}
.sort-btn:hover {
    color: #1e293b;
}
.sort-btn.active {
    background: #ffffff;
    color: var(--accent-color-emph);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.sort-dir-btn {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #1e293b;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.config-line {
    margin-bottom: 5px;
    padding: 5px;
}

.warning-box {
    max-width: 500px;
}

.rhythm-name-box {
    position: relative;
    width: 150px;
    max-width: 150px;
    overflow: hidden;
    border: 1px solid #444242;
    background-color: var(--accent-color-light);
    padding: 0.35rem 0.8rem;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-right: 0.75rem;
    flex-shrink: 0;
    transition: all 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
.rhythm-name-box svg {
    position: absolute;
    right: 10px;
    transform: rotate(180deg);
}

.tt-planner-main {
    position: relative;
}
.tt-planner-grid {
    grid-template-columns: auto 1fr;
    height: calc(100vh - 105px);
    position: relative;
    padding-left: 0.5rem;
}
.tt-planner-classes {
    width: 200;
    min-width: 200;
    max-width: 200;
    padding-right: 0.5rem;
}
.tt-planner-classes-small,
.tt-planner-classes-small-closed,
.tt-planner-classes-small-open {
    position: absolute;
    z-index: 100;
    background-color: #ffffff;
    height: calc(100vh - 155px);
    transition: width 0.1s ease-in-out;
}
.tt-planner-classes-small-open {
    width: 175px;
}
.tt-planner-classes-small-closed {
    width: 15px;
    cursor: pointer;
}
.tt-planner-classes-small-closed:hover {
    background-color: #ececec;
}
.tt-planner-classes-focus-label {
    position: sticky;
    top: 0;
    z-index: 1;
}
.tt-planner-scroll {
    overflow-y: auto;
    max-height: calc(100vh - 95px);
}
.tt-planner-table {
    margin-top: 5px;
}
.tt-planner-table-container {
    display: flex;
    flex-direction: column;
}
.tt-planner-content-width {
    width: calc(100vw - 252px);
}
.tt-planner-pdf-view {
    width: calc(100vw - 5px);
    height: calc(100vh - 135px);
}
.tt-planner-blocked-day {
    z-index: 6;
    font-size: 24px;
    padding: 15px;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px); /* Schöner, moderner Unschärfe-Effekt */
    display: flex;
    justify-content: center;
}
.tt-planner-blocked-day h2 {
    margin-top: 90px;
    font-size: xx-large;
    background-color: #f8fafc;
    margin-bottom: auto;
    padding: 1rem;
    border-radius: 0.85rem;
    color: var(--accent-color-emph);
}

@media only screen and (max-width: 800px) {
    .tt-planner-grid {
        grid-template-columns: 1fr;
        padding-left: 5px;
        height: calc(100vh - 155px);
    }
    .tt-planner-content-width {
        width: 100%;
    }
}
.ttplanner-context-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Verteilt Links, Mitte, Rechts */
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.5rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    flex-shrink: 0;
    z-index: 9;
    gap: 1rem;
    min-width: 0;
}

@media only screen and (max-width: 800px) {
    .ttplanner-context-toolbar {
        flex-direction: column;
        gap: 0;
    }
}
.calendarweek-bar {
    font-size: medium;
    display: flex;
    width: 100%;
    padding-top: 0.5rem;
    min-width: 0;
}
.calendarweek-bar-sc-label {
    width: auto;
    border: none;
}

@media only screen and (max-width: 800px) {
    .calendarweek-bar {
        padding: 0.5rem;
        padding-bottom: 0;
        width: auto;
    }
}
.calendarweek-bar-weekbox,
.calendarweek-bar-sc-label {
    cursor: pointer;
    border: 1px solid #444242;
    min-width: 38px;
    height: 30px;
    font-size: larger;
    line-height: 1.5;
    user-select: none;
    min-width: 32px;
    height: 30px;
    border-radius: 6px;
    text-align: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.calendarweek-bar-weekbox.active,
.active.calendarweek-bar-sc-label {
    background-color: var(--accent-color-light);
    border: 1px solid var(--accent-color);
}
.calendarweek-bar-weekbox.inactive,
.inactive.calendarweek-bar-sc-label {
    background-color: #ffffff;
}
.calendarweek-bar-weekbox.preview,
.preview.calendarweek-bar-sc-label {
    background-color: #fef3c7;
    border: 1px solid #f59e0b;
}
.calendarweek-bar-weekbox.preview-selected,
.preview-selected.calendarweek-bar-sc-label {
    background-color: #befbff;
    border: 1px solid #3498db;
}
.calendarweek-bar-weekbox.preview-holiday,
.preview-holiday.calendarweek-bar-sc-label {
    background-color: #999595;
    opacity: 50%;
    border: 1px solid #fe7743;
}

.calendarweek-scroller {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.25rem;
    scrollbar-width: none;
    padding-bottom: 8px;
    padding-left: 0.25rem;
}

.weekday-bar {
    display: flex;
    border-radius: 8px;
    gap: 0.15rem;
    flex-shrink: 0;
    padding: 0.5rem;
    padding-left: 0;
}
.weekday-bar .active {
    background-color: var(--accent-color-light);
}
.weekday-bar .weekday-btn {
    border: 1px solid #444242;
    border-radius: 6px;
    position: relative;
    padding: 0.35rem 1rem;
    transition: all 0.2s;
}
.weekday-bar-conflict-icon {
    position: absolute;
    min-width: 25px;
    top: 2px;
    right: -5px;
}

@media only screen and (max-width: 800px) {
    .weekday-bar {
        padding-bottom: 0;
        padding-left: 0.5rem;
        padding-top: 0.25rem;
    }
}
.hourtimes-bar {
    position: sticky;
    top: 0;
    z-index: 1;
}
.hourtimes-bar th {
    background-color: #a9fff4;
    cursor: pointer;
}
.hourtimes-bar th:last-child {
    height: 100%;
    background-color: #ffffff;
    padding: 0 0.5rem;
}
.hourtimes-bar th:first-child,
.hourtimes-bar th:nth-child(2) {
    background-color: #ffffff;
    padding: 0;
    width: 200px;
    max-width: 250px;
}
.hourtimes-bar button {
    width: 40px;
    height: 40px;
}
.hourtimes-bar-header-content {
    padding: 0.5rem 0.5rem;
}
.hourtimes-bar p {
    padding: 0 0.1rem;
}

.class-header-line {
    position: sticky;
    cursor: pointer;
    margin-top: 1px;
    margin-bottom: 5px;
    border-radius: 6px;
}
.class-header-line h3 {
    margin-top: 4px;
    font-size: 20px;
}
.class-header-line.preview {
    background-color: #fef3c7;
    border: 1px solid #f59e0b;
}

.room-working-label {
    transform: rotate(-90deg);
    transform-origin: center;
    vertical-align: middle;
    width: 40px;
}
.room-working-line-title {
    padding: 5px 0;
}

.progress-bar {
    width: calc(100% - 8px);
    height: 5px;
    display: flex;
    border: 2px solid var(--accent-color-light);
    border-radius: 5px;
}
.progress-bar-used {
    border-radius: 5px;
    height: 100%;
    background-color: #56c280;
}
.progress-bar-available {
    border-radius: 5px;
    height: 100%;
    background-color: #ffffff;
}
.progress-bar-overflow {
    border-radius: 5px;
    height: 100%;
    background-color: #f59e0b;
}

.primary {
    background-color: var(--accent-color);
}

.secondary {
    background-color: var(--accent-color-light);
}

.conflict {
    background-color: #f59e0b;
    opacity: 0.7;
}

.course-timeslot,
.course-timeslot-available {
    display: flex;
    justify-content: center;
    position: relative;
    border-radius: 1rem;
}
.course-timeslot-available {
    cursor: pointer;
    border: 2px solid var(--accent-color-light);
}
.course-timeslot-available:hover {
    background-color: var(--accent-color-light);
}
.course-timeslot-empty {
    min-height: 33px;
    border: 1px solid #444242;
}
.course-timeslot .dropdown-menu,
.course-timeslot-available .dropdown-menu {
    width: 300px;
    left: auto;
    right: 0;
}
.course-timeslot .btn,
.course-timeslot .btn-autosolve,
.course-timeslot .select-btn,
.course-timeslot-available .btn,
.course-timeslot-available .btn-autosolve,
.course-timeslot-available .select-btn,
.course-timeslot .hourtimes-bar th:last-child,
.hourtimes-bar .course-timeslot th:last-child,
.course-timeslot-available .hourtimes-bar th:last-child,
.hourtimes-bar .course-timeslot-available th:last-child,
.course-timeslot .class-header-line,
.course-timeslot-available .class-header-line {
    width: 35px;
    min-width: 35px;
    height: 35px;
    min-height: 35px;
    border-radius: 1rem;
}
.course-timeslot .btn:hover,
.course-timeslot .btn-autosolve:hover,
.course-timeslot .select-btn:hover,
.course-timeslot-available .btn:hover,
.course-timeslot-available .btn-autosolve:hover,
.course-timeslot-available .select-btn:hover,
.course-timeslot .hourtimes-bar th:hover:last-child,
.hourtimes-bar .course-timeslot th:hover:last-child,
.course-timeslot-available .hourtimes-bar th:hover:last-child,
.hourtimes-bar .course-timeslot-available th:hover:last-child,
.course-timeslot .class-header-line:hover,
.course-timeslot-available .class-header-line:hover {
    background-color: var(--accent-color-light);
}
.course-timeslot .columns:first-child,
.course-timeslot-available .columns:first-child {
    border-start-end-radius: 1rem;
    border-start-start-radius: 1rem;
}
.course-timeslot .raws:first-child,
.course-timeslot-available .raws:first-child {
    border-start-start-radius: 1rem;
    border-end-start-radius: 1rem;
}
.course-timeslot .columns:last-child,
.course-timeslot-available .columns:last-child {
    border-end-start-radius: 1rem;
    border-end-end-radius: 1rem;
}
.course-timeslot .raws:last-child,
.course-timeslot-available .raws:last-child {
    border-end-end-radius: 1rem;
    border-start-end-radius: 1rem;
}
.course-timeslot .raws,
.course-timeslot-available .raws {
    width: 100%;
}
.course-timeslot-assigned-course,
.course-timeslot-assigned-course-conflicts-low,
.course-timeslot-assigned-course-conflicts,
.course-timeslot-assigned-course-conflicts-low-prim,
.course-timeslot-assigned-course-conflicts-prim {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem 0.5rem;
    border: 1px solid #444242;
}
.course-timeslot-assigned-course-conflicts,
.course-timeslot-assigned-course-conflicts-low-prim,
.course-timeslot-assigned-course-conflicts-prim {
    border: 2px solid #f56161;
    position: relative;
}
.course-timeslot-assigned-course-conflicts-prim {
    background-color: #f59e0b;
}
.course-timeslot-assigned-course-conflicts-low {
    border: 2px solid #f59e0b;
    position: relative;
}
.course-timeslot-assigned-course-conflicts-low-prim {
    background-color: #f59e0b;
}
.course-timeslot-assigned-course p,
.course-timeslot-assigned-course-conflicts p,
.course-timeslot-assigned-course-conflicts-prim p,
.course-timeslot-assigned-course-conflicts-low p,
.course-timeslot-assigned-course-conflicts-low-prim p {
    font-weight: 400;
    padding: 0.1rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.course-timeslot-blocked {
    background-color: #f59e0b;
    width: 100%;
    border-radius: 1rem;
    opacity: 80%;
}
.course-timeslot-blocked-icon {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 0.25rem 0;
    border-radius: 1rem;
    cursor: pointer;
}
.course-timeslot-blocked-icon:hover {
    background-color: #f56161;
}
.course-timeslot-blocked-hovermenu {
    padding: 0.2rem 0.5rem;
    border: 2px solid var(--accent-color-emph);
}
.course-timeslot-blocked-hovermenu h2 {
    font-weight: 800;
    font-size: 19px;
    padding-bottom: 15x;
}

.has-conflicts {
    color: #f59e0b;
}
.has-conflicts.hard {
    color: #f56161;
}

.finished-check {
    color: #28b283;
}

.auto-solve {
    border: 2px solid #3498db;
}

/* Define the animation steps */
@keyframes glow-out {
    from {
        background-color: var(--accent-color-light);
    }
    /* At the midpoint of the animation, the background is red */
    50% {
        background-color: #f56161;
    }
    to {
        background-color: #ffffff;
    }
    /* At 0% and 100%, the animation uses the element's actual background-color */
}
/* Animation for becoming active */
@keyframes glow-in {
    from {
        background-color: #ffffff;
    }
    50% {
        background-color: #f56161;
    }
    to {
        background-color: var(--accent-color-light);
    }
}
.select-btn {
    background-color: var(--accent-color-light);
    height: 100%;
}

.active {
    background-color: var(--accent-color-emph);
}

.btn-autosolve {
    padding: 0 0.5rem;
    border: 1px solid #444242;
    border-radius: 6px;
}
.btn-autosolve svg {
    margin-top: 3px;
}
.publish-section {
    padding: 0.5rem;
}

.publish-btn,
.publish-btn-changed,
.publish-btn-not-published,
.publish-btn-published {
    width: 164px;
    max-width: 164px;
    min-width: 164px;
    margin: 0;
    border-bottom: none;
    padding: 0.35rem 1rem;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
}
.publish-btn .label,
.publish-btn-changed .label,
.publish-btn-not-published .label,
.publish-btn-published .label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}
.publish-btn .label div,
.publish-btn-changed .label div,
.publish-btn-not-published .label div,
.publish-btn-published .label div {
    padding: 0 1px;
    font-weight: 800;
}
.publish-btn .label button,
.publish-btn-changed .label button,
.publish-btn-not-published .label button,
.publish-btn-published .label button {
    height: 100%;
}
.publish-btn-published {
    border: 1px solid #56c280;
    background-color: #d3fade;
}
.publish-btn-published:hover {
    background-color: rgb(233.8979591837, 252.6020408163, 239.1734693878);
}
.publish-btn-not-published {
    border: 1px solid #f56161;
    background-color: rgb(249.5535714286, 168.9464285714, 168.9464285714);
}
.publish-btn-not-published:hover {
    background-color: rgb(252.5892857143, 216.9107142857, 216.9107142857);
}
.publish-btn-changed {
    border: 1px solid #fe7743;
    background-color: rgb(254.4047619048, 174.0476190476, 143.0952380952);
}
.publish-btn-changed:hover {
    background-color: rgb(254.6746031746, 210.746031746, 193.8253968254);
}

@media only screen and (max-width: 800px) {
    .publish-section {
        padding-bottom: 0;
    }
    .publish-btn,
    .publish-btn-published,
    .publish-btn-not-published,
    .publish-btn-changed {
        width: 100%;
    }
}
.pdf-toolbar-actions {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    width: 100%;
}

.status-badge {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #28b283; /* Dunkles Orange für gute Lesbarkeit */
    border: 1px solid #56c280;
}
.status-badge.not-published {
    color: #f56161;
    border: 1px solid #f56161;
}
.status-badge.with-updates {
    color: #fe7743;
    border: 1px solid #fe7743;
}

.status-dot {
    width: 8px;
    height: 8px;
    background-color: #28b283;
    border-radius: 50%;
}
.status-dot.not-published {
    box-shadow: 0 0 0 0 #fe7743;
    background-color: #fe7743;
    animation: pulse-warning 2s infinite;
}
.status-dot.with-updates {
    box-shadow: 0 0 0 0 #f56161;
    background-color: #f56161;
    animation: pulse-warning 2s infinite;
}

@keyframes pulse-warning {
    0% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    }
    70% {
        box-shadow: 0 0 0 4px rgba(245, 158, 11, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    }
}
.ttplanner-header-bar {
    display: flex;
    justify-content: start;
    gap: 0.75rem;
    width: 100%;
    overflow: hidden;
}

@media only screen and (max-width: 800px) {
    .ttplanner-header-bar {
        flex-direction: column;
        gap: 0;
    }
}
.ttpublish-status-bar {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
    width: 100%;
}

.options-tt-focus {
    border-radius: 6px;
    color: #ffffff;
    font-weight: 500;
    background-color: var(--accent-color-emph);
}

.epoch-nav-group {
    display: flex;
    align-items: stretch;
}
.epoch-nav-group > div,
.epoch-nav-group > div > div {
    display: flex;
    flex-grow: 1;
}

/* Pfeile für einfaches Vor-/Zurückschalten */
.epoch-nav-arrow {
    background: transparent;
    border: none;
    padding: 0.35rem 0.5rem;
    color: #8b5cf6;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #444242;
}
.epoch-nav-arrow:hover {
    background: rgba(139, 92, 246, 0.1);
}
.epoch-nav-arrow.prev {
    border-right: 1px solid #ddd6fe;
    border-radius: 8px 0 0 8px;
}
.epoch-nav-arrow.prev svg {
    transform: rotate(90deg);
    height: 19px;
    width: 19px;
    min-height: 19px;
    min-width: 19px;
}
.epoch-nav-arrow.next {
    border-left: 1px solid #ddd6fe;
    border-radius: 0 8px 8px 0;
}
.epoch-nav-arrow.next svg {
    transform: rotate(270deg);
    height: 19px;
    width: 19px;
    min-height: 19px;
    min-width: 19px;
}

.epoch-btn {
    width: 100%;
    min-width: 240px;
    height: 100%;
    background: transparent;
    border: none;
    color: #8b5cf6;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    border-top: 1px solid #444242;
    border-bottom: 1px solid #444242;
    box-sizing: border-box;
}
.epoch-btn:hover {
    background: rgba(139, 92, 246, 0.05);
}
.epoch-btn .dropdown-icon {
    margin-left: 5px;
    min-width: 1rem;
}
.epoch-btn .dropdown-options-field {
    padding: 0 0.8rem;
}
.epoch-btn .dropdown-options-value {
    margin: 0;
    line-height: 1;
}

.epoch-dates {
    font-weight: normal;
    opacity: 0.8;
    font-size: 0.8rem;
}

.class-selection-btn {
    border: 1px solid #e2e8f0;
    min-width: 100px;
    margin-right: 0.25rem;
}

.conflict-info {
    position: absolute;
    padding: 0.5rem;
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #f56161;
    border-radius: 8px;
    bottom: 100%;
}

.ttplanner-extra-tools {
    position: fixed;
    display: flex;
    flex-direction: column;
    top: 124px;
    z-index: 5;
    background-color: white;
    max-width: calc(100vw - 0.5rem);
    width: calc(100vw - 0.5rem);
    padding: 0 0.25rem;
    transition: z-index 0s 0.2s;
}
.ttplanner-extra-tools.open {
    z-index: 15;
    transition: z-index 0s 0s;
}
.ttplanner-extra-tools-inner {
    height: 0;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
}
.ttplanner-extra-tools-inner.open {
    height: auto;
    padding-top: 0.5rem;
}

@media only screen and (max-width: 800px) {
    .ttplanner-header-bar {
        margin-bottom: 25px;
    }
}
/* Lokale Fallbacks, falls noch nicht in colors.scss integriert */
.yearplanner-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    padding: 1rem;
    gap: 1rem;
    background-color: #f8fafc;
}

.yearplanner-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* =========================================
   LINKE SPALTE: PLAN VERWALTUNG
   ========================================= */
.yearplanner-sidebar {
    width: 260px;
    flex-shrink: 0;
}
.yearplanner-sidebar-header {
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
    background: #fafafa;
}
.yearplanner-sidebar-header h3 {
    font-size: 0.95rem;
    color: #1e293b;
    margin: 0;
}
.yearplanner-sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.yearplanner-sidebar-card {
    padding: 0.75rem;
    border-radius: 8px;
    border: 2px solid transparent;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.yearplanner-sidebar-card:hover {
    background: var(--accent-color-light);
    border-color: #e2e8f0;
}
.yearplanner-sidebar-card.active {
    background: var(--accent-color-light);
    border-color: var(--accent-color-emph);
}
.yearplanner-sidebar-card .title {
    font-weight: 700;
    font-size: 0.9rem;
    color: #1e293b;
    margin-bottom: 0.2rem;
}
.yearplanner-sidebar-card .meta {
    font-size: 0.75rem;
    color: #64748b;
}
.yearplanner-sidebar-card .color-dot {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.yearplanner-sidebar-card {
    /* Standard Demo-Farben */
}
.yearplanner-sidebar-card:nth-child(1) .color-dot {
    background-color: var(--accent-color-emph);
}
.yearplanner-sidebar-card:nth-child(2) .color-dot {
    background-color: #3498db;
}
.yearplanner-sidebar-card:nth-child(3) .color-dot {
    background-color: #8b5cf6;
}
.yearplanner-sidebar .btn-add {
    width: calc(100% - 1.5rem);
    margin: 0.75rem;
    padding: 0.6rem;
    border: 1px dashed #e2e8f0;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.yearplanner-sidebar .btn-add:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: var(--accent-color-light);
}

/* =========================================
   MITTE: KALENDER
   ========================================= */
.yearplanner-main {
    flex: 1;
    min-width: 0;
    height: calc(100vh - 50px);
}
.yearplanner-main .yearplanner-toolbar {
    padding: 0.5rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.yearplanner-main .grid-wrapper,
.yearplanner-main .day-grid-wrapper {
    overflow-y: auto;
    padding: 0 1rem 1rem 1rem;
    background: #fafafa;
}
.yearplanner-main .day-grid-wrapper {
    flex: 1;
    padding: 0 1rem 0 1rem;
    overflow-y: visible;
}
.yearplanner-main .grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    position: relative;
}
.yearplanner-main .day-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fafafa;
    text-align: center;
    font-weight: 600;
    font-size: 0.85rem;
    color: #64748b;
    padding: 1rem 0 0.5rem 0;
    box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.05);
}
.yearplanner-main .month-separator {
    grid-column: 1/-1;
    font-size: 1.2rem;
    font-weight: 800;
    color: #1e293b;
    padding: 2rem 0 0.5rem 0;
    border-bottom: 2px solid #e2e8f0;
    background-color: #fafafa;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: -25px;
    z-index: 90;
}
.yearplanner-main .month-separator span {
    text-align: center;
}
.yearplanner-main .month-separator .stats {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    background: var(--accent-color-light);
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
}

@media only screen and (max-width: 800px) {
    .yearplanner-main .grid {
        grid-template-columns: 1fr;
    }
}
.rhythm-btn {
    border-right: 1px solid #e2e8f0;
    padding: 0.4rem 0.2rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 0;
    min-width: 30px;
}
.rhythm-btn:hover {
    background-color: var(--accent-color-light);
}

/* =========================================
   KALENDER KACHELN & EINTRÄGE
   ========================================= */
.yearplanner-tile {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 120px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    overflow: hidden;
    scroll-margin-top: 40px;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}
.yearplanner-tile:hover {
    border-color: var(--accent-color-emph);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
.yearplanner-tile.disabled {
    background: transparent;
    opacity: 0.5;
    pointer-events: none;
    border-style: dashed;
}
.yearplanner-tile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}
.yearplanner-tile.today {
    border: 2px solid var(--accent-color-emph);
    background: var(--accent-color-light);
}
.yearplanner-tile.today .date {
    color: var(--accent-color-emph);
}
.yearplanner-tile-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #e2e8f0;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.yearplanner-tile .date {
    font-size: 0.8rem;
    font-weight: 700;
    color: #64748b;
}

.yearplanner-lesson {
    display: flex;
    font-size: 0.75rem;
    padding: 0.2rem 0.3rem;
    border-radius: 4px;
    background: var(--accent-color-light);
    border: 1px solid var(--lesson-color);
    border-left: 4px solid var(--lesson-color);
    background-color: color-mix(in srgb, var(--lesson-color) 10%, white);
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.2rem;
    overflow: hidden;
}
.yearplanner-lesson .time {
    font-weight: 700;
    color: #64748b;
    min-width: 20px;
    overflow: hidden;
}
.yearplanner-lesson .subject {
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: visible;
    text-overflow: ellipsis;
}
.yearplanner-lesson .teacher {
    color: #64748b;
    margin-left: auto;
    overflow: hidden;
}
.yearplanner-lesson.subst {
    background: #fef3c7;
    border-left-color: #f59e0b;
}
.yearplanner-lesson.subst .subject,
.yearplanner-lesson.subst .teacher {
    color: color-mix(in srgb, #f59e0b 60%, black);
}
.yearplanner-lesson.cancelled {
    background: #fef2f2;
    border-left-color: #f56161;
    text-decoration: line-through;
    color: #f56161;
}

.yearplanner-event,
.yearplanner-holiday {
    background: #e0e7ff;
    color: #6366f1;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.4rem;
    border-radius: 6px;
    text-align: center;
    border: 1px solid color-mix(in srgb, #6366f1 30%, transparent);
    margin-bottom: 0.2rem;
    display: flex;
    position: relative;
    gap: 0.3rem;
}
.yearplanner-event .event-del-btn,
.yearplanner-holiday .event-del-btn,
.yearplanner-event .event-edit-btn,
.yearplanner-holiday .event-edit-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #f56161;
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
    font-weight: bold;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.yearplanner-event .event-edit-btn,
.yearplanner-holiday .event-edit-btn {
    right: 20px;
    background: #28b283;
}
.yearplanner-event:hover .event-del-btn,
.yearplanner-holiday:hover .event-del-btn,
.yearplanner-event:hover .event-edit-btn,
.yearplanner-holiday:hover .event-edit-btn {
    display: flex;
}
.yearplanner-event .time,
.yearplanner-holiday .time {
    font-weight: 500;
    color: #64748b;
    min-width: 20px;
    overflow: hidden;
}
.yearplanner-event .event,
.yearplanner-holiday .event {
    padding-left: 5px;
    font-weight: 700;
    color: #6366f1;
    white-space: nowrap;
    overflow: visible;
    text-overflow: ellipsis;
    text-align: center;
}
.yearplanner-event:hover,
.yearplanner-holiday:hover {
    border-color: var(--accent-color);
}

.yearplanner-holiday {
    align-items: center;
    text-align: center;
}

.yearplanner-add-event {
    border-radius: 8px;
    border: 2px dashed var(--accent-color-light);
    transition: all 0.2s;
    cursor: pointer;
    width: 100%;
    min-height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color-light);
    font-weight: 600;
    font-size: 1.5rem;
}
.yearplanner-add-event:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: rgba(86, 194, 128, 0.05); /* Leichter primary Schimmer */
}

.rhythm-modal-body {
    display: flex;
    flex: 1;
    overflow: hidden; /* Scrollen passiert intern */
}

.rhythm-modal-settings {
    width: 300px;
    padding: 1.5rem;
    background-color: var(--clr-hover);
    border-right: 1px solid var(--clr-border);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex-shrink: 0;
    overflow-y: auto;
}

.modal-assignment {
    flex: 1;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: #ffffff;
    scrollbar-width: thin;
}

.assignment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
.assignment-header p {
    font-size: 0.95rem;
    color: #64748b;
}

.select-year-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
}

.select-week-month-block {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.select-week-month-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.25rem;
}
.select-week-month-header h4 {
    font-size: 0.9rem;
    color: #1e293b;
    font-weight: 700;
}

.month-select-all {
    font-size: 0.75rem;
    color: var(--accent-color-emph);
    cursor: pointer;
    font-weight: 600;
    background: none;
    border: none;
}
.month-select-all:hover {
    text-decoration: underline;
}

.select-week-week-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.select-week-week-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}
.select-week-week-pill span.kw {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
}
.select-week-week-pill span.date {
    font-size: 0.6rem;
    color: #64748b;
    opacity: 0.7;
}
.select-week-week-pill:hover {
    border-color: var(--accent-color-emph);
    background: var(--accent-color-emph);
}
.select-week-week-pill.active {
    background-color: var(--accent-color-emph);
    border-color: var(--accent-color-emph);
    box-shadow: 0 2px 4px rgba(40, 178, 131, 0.3);
}
.select-week-week-pill.active span {
    color: white;
    opacity: 1;
}
.select-week-week-pill.holiday {
    background-color: #e2e8f0;
    border-style: dashed;
}
.select-week-week-pill.holiday span.kw {
    color: #999595;
}
.select-week-week-pill.occupied {
    background-color: #a9fff4;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.form-group label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.input-text {
    padding: 0.6rem 0.8rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.95rem;
    color: #1e293b;
    outline: none;
    transition: border-color 0.2s;
}
.input-text:focus {
    border-color: var(--accent-color-emph);
    box-shadow: 0 0 0 2px var(--accent-color-light);
}

/* Neutrale UI-Farben (kannst du auch in deine colors.scss verschieben) */
/* Container für die gesamte App (Toolbar + Split Screen) */
.substplanner-app-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    background-color: #f8fafc;
}

/* =========================================
   GLOBALE TOOLBAR
   ========================================= */
.substplanner-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    z-index: 50; /* Wichtig, damit sie über scrollenden Listen liegt */
}
.substplanner-toolbar .toolbar-title h1 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}
.substplanner-toolbar .toolbar-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* =========================================
   GENERISCHE BUTTONS (Card-Style)
   ========================================= */
.btn-card {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: #ffffff;
    color: #1e293b;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px; /* Gleicher Radius wie die Task-Cards */
    cursor: pointer;
    transition: all 0.2s ease;
    /* Schatten exakt wie bei den Task-Cards */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}
.btn-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    color: var(--accent-color-emph);
}
.btn-card {
    /* Primary Variante (für den Veröffentlichen Button) */
}
.btn-card-primary {
    background-color: #d3fade;
    color: #181717;
    border-color: #56c280;
}
.btn-card-primary:hover {
    background-color: #56c280;
    border-color: #d3fade;
    color: white; /* Überschreibt den Hover der Basis-Klasse */
}
.btn-card-remove {
    background-color: #fee5e8;
    color: #f56161;
    border-color: #f56161;
}
.btn-card-remove:hover {
    background-color: #f56161;
    border-color: #f56161;
    color: #ffffff; /* Überschreibt den Hover der Basis-Klasse */
}
.btn-card {
    /* Das kleine Badge im Button (z.B. für "3 ungespeicherte Änderungen") */
}
.btn-card .action-badge {
    background-color: #ffffff;
    color: var(--accent-color-emph);
    font-size: 0.75rem;
    font-weight: bold;
    padding: 0.1rem 0.5rem;
    border-radius: 12px;
    min-width: 20px;
    text-align: center;
}
.btn-card {
    /* Invertiertes Badge für Primary Buttons */
}
.btn-card-primary .action-badge {
    background-color: white;
    color: var(--accent-color-emph);
}

.substplanner-split-layout {
    display: grid;
    width: 100%;
    grid-template-columns: 45% 55%;
    overflow: hidden;
}
.substplanner-split-layout .substplanner-master-view {
    width: 450px;
    min-width: 450px;
    height: 100%;
    overflow-y: auto;
    border-right: 1px solid #e2e8f0;
}
.substplanner-split-layout .substplanner-detail-view {
    flex-grow: 1;
    height: 100%;
    background: #f8fafc; /* Hier besser bg statt surface, damit sich das Panel abhebt */
    position: relative;
    padding: 1.5rem; /* Etwas Luft um das Panel herum, falls gewünscht */
    display: flex;
    justify-content: center; /* Zentriert das Lösungs-Panel auf sehr großen Bildschirmen */
    align-items: flex-start;
}

.substitution-planner-main {
    grid-template-columns: auto auto;
    height: calc(100vh - 60px);
}

.substitution-planner-tasks {
    height: calc(100vh - 140px);
    padding: 0 0.5rem; /* Etwas Luft an den Seiten für die Scrollbar */
}

/* Der Datums-Trenner (Sticky Header) */
.substitution-planner-date {
    position: sticky;
    top: 0;
    z-index: 10;
    width: 100%;
    padding: 0.75rem 0.5rem;
    background-color: #f8fafc; /* Verhindert, dass durchgescrollte Items sichtbar sind */
    color: var(--accent-color-emph);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    border-bottom: 2px solid var(--accent-color-light);
}

/* =========================================
   DAS NEUE CARD-LAYOUT FÜR DIE LISTE
   ========================================= */
.substplanner-task-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Oben ausrichten, da die linke Seite höher sein kann */
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    /* Leichter Schatten für den "Card" Look */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    /* --- LINKE SEITE (INFO) --- */
}
.substplanner-task-card .task-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-right: 1rem;
}
.substplanner-task-card .task-card-info .task-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--accent-color-emph); /* Greift die Farbe deines Panels auf! */
}
.substplanner-task-card .task-card-info .task-subtitle {
    font-size: 0.9rem;
    font-weight: 500;
    color: #1e293b;
}
.substplanner-task-card .task-card-info .task-details {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.25rem;
}
.substplanner-task-card .task-card-info .task-details .separator {
    color: #e2e8f0;
}
.substplanner-task-card {
    /* --- RECHTE SEITE (STATUS & BADGES) --- */
}
.substplanner-task-card .task-card-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between; /* Icon oben, Badge unten */
    align-self: stretch; /* Nimmt die volle Höhe der Karte ein */
    gap: 1rem;
}
.substplanner-task-card .task-card-meta .substitute-teacher {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--accent-color-emph);
}
.substplanner-task-card .task-card-meta .status-icon {
    font-size: 1.25rem;
}
.substplanner-task-card .task-card-meta .reason-badge {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.7rem;
    color: #64748b;
    font-weight: 600;
    white-space: nowrap;
}
.substplanner-task-card.disabled {
    background-color: #dbd1d1;
}

/* substplanner-panel.scss */
.substplanner-solution-panel {
    background: #ffffff;
    width: 100%;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family:
        system-ui,
        -apple-system,
        sans-serif;
    /* Header */
}
.substplanner-solution-panel .substplanner-panel-header {
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    background-color: var(--accent-color-light);
}
.substplanner-solution-panel .substplanner-panel-header h2 {
    font-size: 1.25rem;
    color: var(--accent-color-emph);
    margin: 0 0 0.25rem 0;
}
.substplanner-solution-panel .substplanner-panel-header p {
    font-size: 0.9rem;
    color: #1e293b;
    margin: 0;
}
.substplanner-solution-panel {
    /* Content */
}
.substplanner-solution-panel .substplanner-panel-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex-grow: 1;
    overflow-y: auto;
}
@media only screen and (max-width: 800px) {
    .substplanner-solution-panel .substplanner-panel-content {
        overflow-y: none;
    }
}
.substplanner-solution-panel {
    /* Action Selector (Tabs) */
}
.substplanner-solution-panel .substplanner-action-selector {
    display: flex;
    gap: 0.5rem;
    background: #f8fafc;
    padding: 0.25rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}
.substplanner-solution-panel .substplanner-action-selector .substplanner-tab {
    flex: 1;
    text-align: center;
    padding: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
    /* Aktive Stati steuern wir jetzt direkt aus Rust */
}
.substplanner-solution-panel
    .substplanner-action-selector
    .substplanner-tab.active-sub {
    background: var(--accent-color);
    color: white;
}
.substplanner-solution-panel
    .substplanner-action-selector
    .substplanner-tab.active-cancel {
    background: #f56161;
    color: white;
}
.substplanner-solution-panel
    .substplanner-action-selector
    .substplanner-tab.active-indep {
    background: #f59e0b;
    color: #1e293b;
}
.substplanner-solution-panel {
    /* Sektionen & Labels */
}
.substplanner-solution-panel .substplanner-form-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.substplanner-solution-panel {
    /* Lehrerliste */
}
.substplanner-solution-panel .substplanner-teacher-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 250px;
    overflow-y: auto;
    padding-top: 1px;
}
.substplanner-solution-panel .substplanner-teacher-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
}
.substplanner-solution-panel
    .substplanner-teacher-card
    .substplanner-teacher-info {
    display: flex;
    flex-direction: column;
}
.substplanner-solution-panel
    .substplanner-teacher-card
    .substplanner-teacher-info
    .substplanner-teacher-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1e293b;
}
.substplanner-solution-panel
    .substplanner-teacher-card
    .substplanner-teacher-info
    .substplanner-teacher-context {
    font-size: 0.75rem;
    color: #64748b;
}
.substplanner-solution-panel
    .substplanner-teacher-card
    .substplanner-fit-badge {
    background: var(--accent-color);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: bold;
}
.substplanner-solution-panel
    .substplanner-teacher-card
    .substplanner-fit-badge.warn {
    background: #f59e0b;
    color: #1e293b;
}
.substplanner-solution-panel {
    /* Layout Hilfsklassen */
}
.substplanner-solution-panel .substplanner-flex-row {
    display: flex;
    gap: 1rem;
}
.substplanner-solution-panel .substplanner-flex-row .form-input-box {
    margin-bottom: 0;
}
.substplanner-solution-panel .flex-1 {
    flex: 1;
}
.substplanner-solution-panel {
    /* Inputs (Select, Textarea) */
}
.substplanner-solution-panel .substplanner-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #1e293b;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.substplanner-solution-panel .substplanner-input:focus {
    border-color: var(--accent-color);
}
.substplanner-solution-panel textarea.substplanner-input {
    resize: vertical;
    min-height: 80px;
}
.substplanner-solution-panel {
    /* Checkbox */
}
.substplanner-solution-panel .substplanner-checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #1e293b;
    cursor: pointer;
}
.substplanner-solution-panel .substplanner-checkbox-group input {
    width: 1.2rem;
    height: 1.2rem;
    accent-color: var(--accent-color);
}
.substplanner-solution-panel {
    /* Footer & Buttons */
}
.substplanner-solution-panel .substplanner-panel-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    background-color: #f8fafc;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}
.substplanner-solution-panel .substplanner-panel-footer .substplanner-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s;
}

@media only screen and (max-width: 800px) {
    .substplanner-split-layout {
        grid-template-columns: 1fr;
    }
}
/* =========================================
   OVERLAY & MODAL CONTAINER
   ========================================= */
.substplanner-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px); /* Schöner, moderner Unschärfe-Effekt */
    z-index: 9999; /* Sehr hoch, damit es über allem liegt */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Fade-In Animation für das Overlay */
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.substplanner-modal-content {
    background: #ffffff;
    width: 100%;
    max-width: 550px;
    max-height: 85vh; /* Verhindert, dass das Modal größer als der Bildschirm wird */
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Pop-In Animation für Desktop */
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    from {
        transform: scale(0.95);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}
/* =========================================
   HEADER
   ========================================= */
.substplanner-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background-color: var(--accent-color-light);
    border-bottom: 1px solid #e2e8f0;
}
.substplanner-modal-header h2 {
    font-size: 1.15rem;
    color: var(--accent-color-emph);
    margin: 0;
    font-weight: 700;
}
.substplanner-modal-header .close-btn {
    background: transparent;
    border: none;
    font-size: 1.25rem;
    color: var(--accent-color-emph);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 6px;
    line-height: 1;
    transition: background-color 0.2s;
}
.substplanner-modal-header .close-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* =========================================
   BODY & FORMULAR
   ========================================= */
.substplanner-modal-body {
    padding: 1.5rem;
    overflow-y: auto; /* Erlaubt das Scrollen, wenn Inhalt zu lang ist */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.substplanner-absence-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.substplanner-absence-form .form-row {
    display: flex;
    gap: 1rem;
}
.substplanner-absence-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}
.substplanner-absence-form .form-group.full-width {
    flex: none;
    width: 100%;
}
.substplanner-absence-form .form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    justify-content: flex-end;
    /* Macht den primären Button breit, wenn er alleine steht */
}
.substplanner-absence-form .form-actions .full-width {
    width: 100%;
    justify-content: center;
}

/* Der visuelle Trenner */
.substplanner-divider {
    height: 1px;
    background-color: #e2e8f0;
    width: 100%;
    margin: 0.5rem 0;
}

/* =========================================
   LISTEN BEREICH
   ========================================= */
.substplanner-absence-list-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.substplanner-absence-list-section h3 {
    font-size: 1rem;
    color: #1e293b;
    margin: 0;
    font-weight: 600;
}
.substplanner-absence-list-section .absence-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.substplanner-absence-list-section {
    /* Ähnlich wie deine Task-Cards aufgebaut */
}
.substplanner-absence-list-section .absence-list-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1rem;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.substplanner-absence-list-section .absence-list-card:hover {
    border-color: var(--accent-color);
    background-color: #f8fafc;
}
.substplanner-absence-list-section .absence-list-card.active {
    border-color: var(--accent-color);
    background-color: var(--accent-color-light);
    border-left: 4px solid var(--accent-color);
}
.substplanner-absence-list-section .absence-list-card .absence-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.substplanner-absence-list-section
    .absence-list-card
    .absence-info
    .teacher-name {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.95rem;
}
.substplanner-absence-list-section
    .absence-list-card
    .absence-info
    .absence-meta {
    font-size: 0.8rem;
    color: #64748b;
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.substplanner-absence-list-section
    .absence-list-card
    .absence-info
    .absence-meta
    .separator {
    color: #e2e8f0;
}
.substplanner-absence-list-section .absence-list-card .absence-action {
    color: #64748b;
    font-size: 1.1rem;
}

/* =========================================
   📱 RESPONSIVE: MOBILE BOTTOM SHEET
   ========================================= */
@media (max-width: 768px) {
    .substplanner-modal-overlay {
        align-items: flex-end; /* Schiebt das Modal an den unteren Rand */
    }
    .substplanner-modal-content {
        max-width: 100%;
        border-radius: 20px 20px 0 0; /* Nur oben abgerundet */
        max-height: 90vh; /* Nimmt fast den ganzen Screen ein */
        /* Ersetze das Pop-In durch ein Slide-Up */
        animation: slideUp 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    @keyframes slideUp {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }
    /* Form Inputs auf dem Handy untereinander stapeln (Datum Start/Ende) */
    .substplanner-absence-form .form-row {
        flex-direction: column;
        gap: 1rem;
    }
}
/* =========================================
   HEADER BEREICH
   ========================================= */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    margin-bottom: 1rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}
.app-header .header-title {
    font-weight: 700;
    color: #1e293b;
    font-size: 1.1rem;
}
.app-header .active-class-badge {
    background: var(--accent-color-light);
    color: var(--accent-color-emph);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
}

/* =========================================
   DIE GRID TABELLE
   ========================================= */
.timetable-wrapper {
    flex-grow: 1;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    scrollbar-width: thin;
    position: relative;
}
.timetable-wrapper .timetable-grid {
    display: grid;
    /* Erste Spalte auf 100px verbreitert für die neuen Buttons */
    overflow: auto;
    max-height: calc(100vh - 95px);
}

/* =========================================
   ZELLEN & STICKY HEADERS
   ========================================= */
.grid-cell {
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.5rem;
    min-height: 100px;
    display: flex;
    gap: 0.25rem;
    position: relative;
    min-width: 0;
    scroll-margin-top: 90px;
}
.grid-cell.epoch {
    background-color: #f5f3ff;
}
.grid-cell {
    /* Sticky Columns / Rows */
}
.grid-cell.col-header {
    background: #f8fafc;
    position: sticky;
    top: 0;
    z-index: 9;
    font-weight: 600;
    color: #181717;
    text-align: center;
    padding: 0.75rem;
    border-bottom: 2px solid #e2e8f0;
    min-width: 0;
    overflow: hidden;
    min-height: 0;
    display: block;
}
.grid-cell.col-header.active {
    border-bottom: 2px solid var(--accent-color);
    background-color: var(--accent-color-light);
    cursor: pointer;
}
.grid-cell.col-header.epoche {
    color: #8b5cf6;
    border-bottom: 2px solid #8b5cf6;
    background-color: #f5f3ff;
}
.grid-cell.col-header .epochen-star {
    position: absolute;
    left: 15px;
    width: 20px;
    height: 20px;
}
.grid-cell.row-header {
    background: #f8fafc;
    position: sticky;
    left: 0;
    z-index: 5;
    font-weight: 700;
    color: #1e293b;
    align-items: center;
    justify-content: center;
    border-right: 2px solid #e2e8f0;
}
.grid-cell.row-header.active {
    background-color: var(--accent-color-light);
}
.grid-cell.corner-header {
    z-index: 20;
    background: #f8fafc;
    border-right: 2px solid #e2e8f0;
    border-bottom: 2px solid #e2e8f0;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    right: 0;
    z-index: 10;
    min-height: 0;
}
.grid-cell .header-edit-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 0.7rem;
    font-weight: bold;
    cursor: pointer;
    opacity: 0;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s;
    z-index: 15;
}
.grid-cell .header-edit-btn:hover {
    transform: scale(1.1);
}
.grid-cell.col-header:hover .header-edit-btn {
    opacity: 1;
}
.grid-cell {
    /* Leere Zelle Interaktion */
}
.grid-cell .cell-empty {
    border-radius: 8px;
    border: 2px dashed transparent;
    transition: all 0.2s;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-weight: 600;
    font-size: 1.5rem;
    flex: 1;
}
.grid-cell:hover .cell-empty {
    border-color: var(--accent-color-light);
    color: var(--accent-color);
    background: rgba(86, 194, 128, 0.05); /* Leichter primary Schimmer */
}
.grid-cell {
    /* Add-Bar Interaktion (Für belegte Zellen) */
}
.grid-cell .cell-add-bar {
    width: 100%;
    height: 20px;
    margin-top: 0.25rem;
    border-radius: 4px;
    border: 1px dashed #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    opacity: 0;
    transition:
        opacity 0.2s,
        background-color 0.2s,
        border-color 0.2s;
    flex-shrink: 0;
}
.grid-cell .cell-add-bar:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background-color: var(--accent-color-light);
}
.grid-cell:hover .cell-add-bar {
    opacity: 1;
}
.grid-cell {
    /* Layout-Anpassung, wenn Inhalte da sind */
}
.grid-cell.has-content {
    flex-direction: column;
    justify-content: flex-start;
}
.grid-cell.has-content .cards-container {
    display: flex;
    gap: 0.25rem;
    width: 100%;
    flex: 1;
}
.grid-cell.has-content .cards-container.layout-stacked {
    flex-direction: column;
}
.grid-cell.has-content .cards-container.layout-alternating {
    flex-direction: row;
}
.grid-cell.has-content
    .cards-container.layout-alternating
    .lesson-card-wrapper {
    width: 100%;
}

/* =========================================
   NAVIGATION & TAGESAKTIONEN (Corner)
   ========================================= */
.corner-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 9px 0;
}
.corner-actions .grid-nav-group {
    display: flex;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.corner-actions .grid-nav-group .nav-btn {
    background: transparent;
    border: none;
    color: #64748b;
    width: 32px; /* Etwas breiter als vorher */
    min-width: 30px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.95rem;
    transition: all 0.2s;
}
.corner-actions .grid-nav-group .nav-btn:first-child {
    border-right: 1px solid #e2e8f0;
}
.corner-actions .grid-nav-group .nav-btn:hover {
    background: var(--accent-color-light);
    color: var(--accent-color-emph);
}
.corner-actions .grid-nav-group .nav-btn:active {
    background: var(--accent-color-light);
    color: var(--accent-color);
}
.corner-actions .grid-nav-group .nav-btn:disabled {
    cursor: default;
    background-color: #999595;
}
.corner-actions .grid-nav-group .nav-btn {
    /* Spezial-Hover für die Action-Buttons */
}
.corner-actions .grid-nav-group .nav-btn.action-block:hover {
    color: #f59e0b;
    background: #fff7ed;
}
.corner-actions .grid-nav-group .nav-btn.action-clear:hover {
    color: #f56161;
    background: #fef2f2;
}

/* =========================================
   DIE STUNDEN-KARTEN
   ========================================= */
.lesson-card {
    flex: 1;
    border-radius: 8px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition:
        transform 0.1s,
        box-shadow 0.1s;
}
.lesson-card .lesson-title {
    font-weight: 700;
    font-size: 0.95rem;
}
.lesson-card .lesson-teacher {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.2rem;
}
.lesson-card {
    /* Variante A: Aktive Klasse */
}
.lesson-card.active-class {
    background-color: var(--accent-color-light);
    border: 1px solid var(--accent-color);
    color: #1e293b;
    box-shadow: 0 2px 4px rgba(86, 194, 128, 0.15);
}
.lesson-card.active-class.from-autosolve {
    background-color: #befbff;
}
.lesson-card.active-class::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    /* In Dioxus überschreibst du diese Variable via Inline-Style pro Fach */
    background-color: var(--subject-color, #64748b);
    border-radius: 8px 0 0 8px;
    opacity: 0.5;
    transition: transform 0.3s ease-in-out;
}
.lesson-card.active-class:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(86, 194, 128, 0.25);
}
.lesson-card.active-class:hover .delete-btn {
    display: flex;
}
.lesson-card.active-class:hover .import-autosolv-btn {
    display: flex;
}
.lesson-card.active-class:hover .global-epoch-btn {
    display: flex;
}
.lesson-card {
    /* Variante B: Inaktive Klasse */
}
.lesson-card.inactive-class,
.lesson-card.across-class {
    background-color: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #64748b;
}
.lesson-card.inactive-class.from-autosolve,
.lesson-card.from-autosolve.across-class {
    background-color: rgb(235.9, 253.8246153846, 255);
}
.lesson-card.inactive-class::before,
.lesson-card.across-class::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    /* In Dioxus überschreibst du diese Variable via Inline-Style pro Fach */
    background-color: var(--subject-color, #64748b);
    border-radius: 8px 0 0 8px;
    opacity: 0.5;
    transition: transform 0.3s ease-in-out;
}
.lesson-card.inactive-class:hover,
.lesson-card.across-class:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(86, 194, 128, 0.25);
}
.lesson-card.inactive-class .global-epoch-btn.fixed,
.lesson-card.across-class .global-epoch-btn.fixed {
    background-color: rgba(0, 0, 0, 0.03);
    color: #64748b;
    border: 1px solid #64748b;
}
.lesson-card.across-class:hover {
    background-color: var(--accent-color);
}
.lesson-card.conflict {
    border-color: #f56161;
    background-color: #fef2f2; /* Sehr helles Rot / Alert-Farbe */
    box-shadow: 0 2px 4px rgba(245, 97, 97, 0.15);
}
.lesson-card.conflict .lesson-title {
    color: #f56161;
}
.lesson-card.conflict.light {
    border-color: #f59e0b;
    background-color: #fefbf2; /* Sehr helles Rot / Alert-Farbe */
}
.lesson-card.active-class.conflict {
    background-color: var(--accent-color-light);
}

.lesson-card-wrapper {
    position: relative;
    scroll-margin-top: 90px;
    /* Der Löschen-Button */
}
.lesson-card-wrapper .delete-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #f56161;
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 1.3rem;
    transform: rotate(45deg);
    font-weight: bold;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s;
    z-index: 5;
}
.lesson-card-wrapper .import-autosolv-btn {
    position: absolute;
    top: -5px;
    right: 20px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 1.3rem;
    font-weight: bold;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s;
    z-index: 5;
}
.lesson-card-wrapper .global-epoch-btn {
    position: absolute;
    top: -12px;
    left: 20px;
    background: #ffffff;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 0.85rem;
    cursor: pointer;
    display: none; /* Erst beim Hover zeigen */
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    z-index: 5;
    transition: all 0.2s;
}
.lesson-card-wrapper .global-epoch-btn:hover {
    border-color: #f59e0b;
}
.lesson-card-wrapper .global-epoch-btn.fixed {
    display: flex;
    background-color: #f59e0b;
    color: #ffffff;
    border-color: #f59e0b;
}
.lesson-card-wrapper .conflict-badge {
    position: absolute;
    top: -6px;
    left: -6px;
    background: #f56161;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: help; /* Ändert den Mauszeiger zu einem Fragezeichen */
    z-index: 5;
    transition: transform 0.1s;
}
.lesson-card-wrapper .conflict-badge .conflict-tooltip {
    position: absolute;
    bottom: 130%;
    left: 0;
    background: #1e293b;
    color: white;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    width: max-content;
    max-width: 200px;
    line-height: 1.3;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: all 0.2s;
    font-weight: normal;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: left;
    /* Kleines Dreieck unten am Tooltip */
}
.lesson-card-wrapper .conflict-badge .conflict-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 6px;
    border-width: 4px;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
}
.lesson-card-wrapper .conflict-badge {
    /* Hover Effekt für das Tooltip */
}
.lesson-card-wrapper .conflict-badge:hover .conflict-tooltip {
    opacity: 1;
    transform: translateY(0);
}
.lesson-card-wrapper:hover .delete-btn {
    display: flex;
}
.lesson-card-wrapper:hover .import-autosolv-btn {
    display: flex;
}
.lesson-card-wrapper:hover .global-epoch-btn {
    display: flex;
}
.lesson-card-wrapper:hover .conflict-badge {
    transform: translateY(-2px);
}

.config-box {
    display: flex;
    padding: 1rem;
    gap: 1rem;
    justify-content: center;
    align-items: flex-start;
    height: calc(100vh - 40px - 2rem);
}
.config-box .config-panel {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}
.config-box .config-panel.panel-left {
    flex: 1;
    max-width: 450px;
}
.config-box .config-panel.panel-right {
    flex: 2;
    max-width: 800px;
}
.config-box .config-panel.panel-center {
    flex: 1;
    max-width: 900px;
}
.config-box .config-panel.scroll-y {
    overflow-y: auto;
}

.config-panel-header {
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    background-color: var(--accent-color-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.config-panel-header.neutral {
    background-color: #ffffff;
}
.config-panel-header h2 {
    font-size: 1.25rem;
    color: var(--accent-color-emph);
    margin-bottom: 0.25rem;
}
.config-panel-header p {
    font-size: 0.9rem;
    color: #64748b;
}
.config-panel-header .badge-count {
    background: var(--accent-color-emph);
    color: #ffffff;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: bold;
}

.autosolver-rules-panel-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    overflow-y: auto;
}
.autosolver-rules-panel-content .rule-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.autosolver-rules-panel-content .rule-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.autosolver-rules-panel-content .rule-info {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.autosolver-rules-panel-content .rule-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1e293b;
}
.autosolver-rules-panel-content .rule-context {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
}
.autosolver-rules-panel-content .fit-badge {
    background: #f56161;
    color: #ffffff;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: bold;
    white-space: nowrap;
}
.autosolver-rules-panel-content .fit-badge.warn {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    color: #181717;
}

.autosolver-rules-panel-footer {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    background-color: #f8fafc;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: auto;
}

.autosolver-form-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.autosolver-form-section .sentence-builder-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.5rem;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #1e293b;
}
.autosolver-form-section .sentence-builder-box.invalid {
    outline: medium auto #f56161;
}
.autosolver-form-section .action-selector {
    display: flex;
    gap: 0.5rem;
    background: #f8fafc;
    padding: 0.25rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}
.autosolver-form-section .action-selector label {
    flex: 1;
    text-align: center;
    padding: 0.6rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
}
.autosolver-form-section .action-selector label.soft {
    background: #f59e0b;
    color: #ffffff;
}
.autosolver-form-section .action-selector label.hard {
    background: #f56161;
    color: white;
}
.autosolver-form-section .counter-badge {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: bold;
    color: #1e293b;
}
.autosolver-form-section .range-selector {
    accent-color: var(--accent-color);
    cursor: pointer;
}

.weekday-grid {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}
.weekday-grid .checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    cursor: pointer;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 0.5rem 1rem;
    border-radius: 8px;
}

/*# sourceMappingURL=main.css.map */