:root {
    color-scheme: dark;

    --background: #0d0f11;
    --graphite: #14171a;
    --graphite-2: #1a1d21;
    --graphite-3: #22262b;
    --border: #2a2e34;

    --text: #f1f1ef;
    --muted: #949aa3;
    --quiet: #686e77;

    --orange: #ff8b2c;
    --orange-soft: rgba(255, 139, 44, .13);

    --universum: #df36d0;
    --arthouse: #70ceff;
    --private: #79c86b;
    --household: #d4a65c;

    --danger: #ff7070;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    background: var(--background);
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
    color: var(--text);

    background:
        radial-gradient(circle at 90% -5%, rgba(255,139,44,.09), transparent 28rem),
        var(--background);
}

button {
    font: inherit;
}

main {
    width: min(100%, 900px);
    margin: 0 auto;
    padding: 22px 14px 70px;
}


/* HERO */

.hero {
    padding: 23px;
    margin-bottom: 38px;

    border: 1px solid #292d32;
    border-radius: 28px;

    background:
        radial-gradient(circle at 95% 0%, rgba(255,139,44,.12), transparent 17rem),
        linear-gradient(145deg, #1b1e22, #121416);

    box-shadow:
        0 25px 70px rgba(0,0,0,.27),
        inset 0 1px rgba(255,255,255,.025);
}

.hero-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.brand,
.section-title > div > span {
    font-size: .67rem;
    letter-spacing: .15em;
    font-weight: 800;
    color: var(--orange);
}

.hero h1 {
    margin: 5px 0 0;
    font-size: clamp(2.2rem, 9vw, 3.6rem);
    letter-spacing: -.05em;
    line-height: .95;
}

.hero-head p {
    margin: 10px 0 0;
    color: var(--muted);
}

.open-count {
    width: 76px;
    height: 76px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,139,44,.30);
    border-radius: 50%;

    background: var(--orange-soft);
}

.open-count strong {
    font-size: 1.7rem;
    line-height: 1;
}

.open-count span {
    margin-top: 5px;
    color: #cf9563;
    font-size: .7rem;
}

.daily-comment {
    margin-top: 31px;
    font-size: 1.05rem;
    font-weight: 650;
}

.stats {
    display: flex;
    gap: 8px;
    margin-top: 19px;
    overflow-x: auto;
    scrollbar-width: none;
}

.stats::-webkit-scrollbar {
    display: none;
}

.stats div {
    flex: 0 0 auto;

    display: flex;
    align-items: baseline;
    gap: 6px;

    padding: 9px 12px;

    border: 1px solid var(--border);
    border-radius: 999px;

    background: rgba(0,0,0,.18);
}

.stats strong {
    font-size: .82rem;
}

.stats span {
    font-size: .7rem;
    color: var(--muted);
}


/* GENERAL */

section {
    margin-bottom: 35px;
}

.section-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin-bottom: 13px;
}

.section-title h2 {
    margin: 4px 0 0;
    font-size: 1.15rem;
    letter-spacing: -.02em;
}

.small-button,
.plus {
    border: 1px solid var(--border);
    background: var(--graphite-2);
}

.small-button {
    padding: 7px 11px;
    border-radius: 999px;

    color: var(--muted);
    font-size: .72rem;
}

.plus {
    width: 36px;
    height: 36px;

    border-radius: 12px;

    color: var(--orange);
    font-size: 1.3rem;
}

.stack {
    display: flex;
    flex-direction: column;
    gap: 9px;
}


/* AREA COLORS */

.area-private {
    --area: var(--private);
}

.area-household {
    --area: var(--household);
}

.area-universum {
    --area: var(--universum);
}

.area-arthouse {
    --area: var(--arthouse);
}


/* CALENDAR */

.appointment {
    position: relative;

    display: grid;
    grid-template-columns: 5px 57px 1fr;
    gap: 14px;
    align-items: center;

    min-height: 78px;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 19px;

    background:
        linear-gradient(
            110deg,
            color-mix(in srgb, var(--area) 4%, var(--graphite-2)),
            var(--graphite)
        );
}

.accent {
    width: 4px;
    height: 48px;

    border-radius: 0 5px 5px 0;

    background: var(--area);

    box-shadow: 0 0 19px color-mix(in srgb, var(--area) 40%, transparent);
}

.appointment time {
    color: var(--muted);
    font-size: .88rem;
}

.appointment-text {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.appointment-text strong {
    font-size: .98rem;
}


/* BADGES */

.badge {
    display: inline-flex;

    width: fit-content;

    padding: 4px 8px;

    border-radius: 999px;

    background: color-mix(in srgb, var(--area) 12%, transparent);
    color: var(--area);

    font-size: .67rem;
    font-weight: 750;
}


/* TASKS */

.task {
    position: relative;

    width: 100%;

    display: flex;
    gap: 14px;
    align-items: flex-start;

    padding: 17px;

    border: 1px solid var(--border);
    border-radius: 20px;

    color: var(--text);
    text-align: left;

    background:
        linear-gradient(
            120deg,
            color-mix(in srgb, var(--area) 5%, var(--graphite-2)),
            var(--graphite)
        );

    transition: transform .12s ease, opacity .18s ease;
}

.task:active {
    transform: scale(.985);
}

.check {
    position: relative;

    width: 26px;
    height: 26px;

    flex: 0 0 26px;

    border: 2px solid color-mix(in srgb, var(--area) 60%, #555);
    border-radius: 9px;
}

.task-content {
    display: flex;
    flex-direction: column;
}

.task-content > strong {
    font-size: .95rem;
}

.task-info {
    display: flex;
    gap: 9px;
    align-items: center;

    margin-top: 7px;

    color: var(--muted);
    font-size: .71rem;
}

.comment {
    margin-top: 10px;

    color: var(--quiet);
    font-size: .78rem;
    line-height: 1.4;
}

.task.overdue {
    border-color: rgba(255,112,112,.26);
}

.task.overdue .task-info > span:last-child {
    color: #db8383;
}

.task.done {
    opacity: .43;
}

.task.done strong {
    text-decoration: line-through;
}

.task.done .check {
    border-color: var(--orange);
    background: var(--orange);
}

.task.done .check::after {
    content: "✓";

    position: absolute;
    inset: 0;

    display: grid;
    place-items: center;

    color: #121212;

    font-size: .85rem;
    font-weight: 900;
}


/* QUICK ACTIONS */

.actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.actions button {
    min-height: 112px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 12px 5px;

    border: 1px solid var(--border);
    border-radius: 20px;

    color: var(--text);

    background:
        radial-gradient(circle at 50% 0%, rgba(255,139,44,.04), transparent 60%),
        var(--graphite);

    transition:
        transform .12s ease,
        border-color .12s ease,
        background .12s ease;
}

.actions button:active {
    transform: scale(.94);

    border-color: rgba(255,139,44,.55);
    background: var(--graphite-3);
}

.actions button > span {
    margin-bottom: 7px;
    font-size: 1.75rem;
}

.actions strong {
    font-size: .79rem;
}

.actions small {
    margin-top: 4px;

    color: var(--quiet);
    font-size: .6rem;
}


/* QUOTE */

.quote {
    position: relative;

    min-height: 98px;

    display: flex;
    align-items: center;

    padding: 24px 24px 24px 57px;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 24px;

    background:
        linear-gradient(120deg, var(--graphite-2), #121416);
}

.quote div {
    position: absolute;

    left: 18px;
    top: -2px;

    font-family: Georgia, serif;
    font-size: 4.5rem;

    color: var(--orange);
    opacity: .62;
}

.quote p {
    margin: 0;

    color: #c1c4c8;

    font-size: .94rem;
    font-weight: 600;
}


/* TOAST */

#toast {
    position: fixed;

    left: 50%;
    bottom: max(25px, env(safe-area-inset-bottom));

    padding: 12px 17px;

    border: 1px solid rgba(255,139,44,.35);
    border-radius: 999px;

    background: rgba(28,31,35,.97);

    color: var(--text);

    box-shadow: 0 15px 50px rgba(0,0,0,.45);

    font-size: .82rem;
    font-weight: 650;

    opacity: 0;

    transform: translate(-50%, 18px);

    pointer-events: none;

    transition: .18s ease;
}

#toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}


/* PHONE */

@media (max-width: 550px) {
    main {
        padding-left: 13px;
        padding-right: 13px;
    }

    .hero {
        padding: 20px;
        border-radius: 25px;
    }

    .actions {
        gap: 7px;
    }

    .actions button {
        min-height: 101px;
        border-radius: 18px;
    }

    .actions button > span {
        font-size: 1.55rem;
    }

    .actions small {
        max-width: 74px;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}


/* IPAD */

@media (min-width: 700px) {
    main {
        padding-top: 35px;
    }

    .actions button {
        min-height: 130px;
    }
}


/* TASK MODAL */

.modal-backdrop[hidden] {
    display: none;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    padding: 14px;

    background: rgba(0, 0, 0, .68);
    backdrop-filter: blur(10px);
}

.task-modal {
    width: min(100%, 620px);
    max-height: 90vh;
    overflow-y: auto;

    padding: 21px;

    border: 1px solid #30343a;
    border-radius: 27px;

    background:
        radial-gradient(circle at 100% 0%, rgba(255,139,44,.09), transparent 18rem),
        linear-gradient(145deg, #1c1f23, #131518);

    box-shadow: 0 30px 90px rgba(0,0,0,.55);
}

.modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;

    margin-bottom: 24px;
}

.modal-kicker {
    color: var(--orange);

    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .15em;
}

.modal-head h2 {
    margin: 5px 0 0;

    font-size: 1.45rem;
    letter-spacing: -.03em;
}

.modal-close {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border: 1px solid var(--border);
    border-radius: 14px;

    background: var(--graphite-2);
    color: var(--muted);

    font-size: 1.55rem;
    line-height: 1;
}

.task-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.task-form > label {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.task-form > label > span,
.task-form legend {
    color: var(--muted);

    font-size: .75rem;
    font-weight: 700;
}

.task-form input[type="text"],
.task-form select {
    width: 100%;

    min-height: 50px;
    padding: 0 14px;

    border: 1px solid var(--border);
    border-radius: 15px;

    outline: none;

    background: #111316;
    color: var(--text);

    font-size: 16px;
}

.task-form input[type="text"]:focus,
.task-form select:focus {
    border-color: rgba(255,139,44,.7);

    box-shadow: 0 0 0 3px rgba(255,139,44,.08);
}

.task-form fieldset {
    margin: 0;
    padding: 0;

    border: 0;
}

.task-form legend {
    margin-bottom: 9px;
}

.planning-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.planning-options label {
    position: relative;
}

.planning-options input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.planning-options span {
    min-height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 10px 12px;

    border: 1px solid var(--border);
    border-radius: 15px;

    background: var(--graphite);

    color: var(--muted);

    text-align: center;
    font-size: .78rem;
    font-weight: 700;

    transition:
        border-color .14s ease,
        background .14s ease,
        color .14s ease,
        transform .12s ease;
}

.planning-options label:active span {
    transform: scale(.97);
}

.planning-options input:checked + span {
    border-color: rgba(255,139,44,.58);

    background: var(--orange-soft);
    color: #ffad67;
}

.planning-options label:last-child {
    grid-column: 1 / -1;
}

.create-task {
    min-height: 54px;

    border: 0;
    border-radius: 17px;

    background:
        linear-gradient(135deg, #ff9b45, var(--orange));

    color: #161616;

    font-weight: 850;
    font-size: .92rem;

    box-shadow: 0 12px 28px rgba(255,139,44,.13);
}

.create-task:active {
    transform: scale(.985);
}


@media (min-width: 700px) {
    .modal-backdrop {
        align-items: center;
    }
}


/* STRONGER AREA GRADIENTS */

.appointment {
    background:
        linear-gradient(
            105deg,
            color-mix(in srgb, var(--area) 17%, var(--graphite-2)) 0%,
            color-mix(in srgb, var(--area) 8%, var(--graphite-2)) 38%,
            var(--graphite) 82%
        );
}

.task {
    background:
        linear-gradient(
            110deg,
            color-mix(in srgb, var(--area) 15%, var(--graphite-2)) 0%,
            color-mix(in srgb, var(--area) 7%, var(--graphite-2)) 42%,
            var(--graphite) 85%
        );

    border-color:
        color-mix(in srgb, var(--area) 14%, var(--border));
}

.duration::before {
    content: "·";
    margin-right: 8px;
    color: var(--quiet);
}

.duration {
    color: #b2b6bd;
}


/* AREA COLOR TUNING */

:root {
    --private: #79c86b;
    --household: #d6a75c;
    --homelab: #4ec9b0;
}

.area-homelab {
    --area: var(--homelab);
}


/* SUBTLER AREA GRADIENTS */

.appointment {
    background:
        linear-gradient(
            105deg,
            color-mix(in srgb, var(--area) 10%, var(--graphite-2)) 0%,
            color-mix(in srgb, var(--area) 5%, var(--graphite-2)) 42%,
            var(--graphite) 86%
        );
}

.task {
    background:
        linear-gradient(
            110deg,
            color-mix(in srgb, var(--area) 9%, var(--graphite-2)) 0%,
            color-mix(in srgb, var(--area) 4%, var(--graphite-2)) 45%,
            var(--graphite) 88%
        );

    border-color:
        color-mix(in srgb, var(--area) 18%, var(--border));
}

/* AREA GRADIENTS – VERY SUBTLE */

.appointment {
    background:
        linear-gradient(
            105deg,
            color-mix(in srgb, var(--area) 6%, var(--graphite-2)) 0%,
            color-mix(in srgb, var(--area) 2%, var(--graphite-2)) 45%,
            var(--graphite) 88%
        );
}

.task {
    background:
        linear-gradient(
            110deg,
            color-mix(in srgb, var(--area) 5%, var(--graphite-2)) 0%,
            color-mix(in srgb, var(--area) 2%, var(--graphite-2)) 48%,
            var(--graphite) 90%
        );

    border-color:
        color-mix(in srgb, var(--area) 10%, var(--border));
}


/* PLAN PAGE */

.plan-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;

    padding: 23px;
    margin-bottom: 34px;

    border: 1px solid #292d32;
    border-radius: 28px;

    background:
        radial-gradient(circle at 95% 0%, rgba(255,139,44,.10), transparent 17rem),
        linear-gradient(145deg, #1b1e22, #121416);
}

.plan-hero h1 {
    margin: 5px 0 0;
    font-size: clamp(2.1rem, 9vw, 3.4rem);
    line-height: 1;
    letter-spacing: -.05em;
}

.plan-hero p {
    margin: 10px 0 0;
    color: var(--muted);
}

.plan-back {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 0 14px;

    border: 1px solid rgba(255,139,44,.28);
    border-radius: 14px;

    background: var(--orange-soft);
    color: #f0a262;

    font-size: .78rem;
    font-weight: 750;
    text-decoration: none;
}


/* PLAN GROUPS */

.plan-board {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.plan-group {
    padding: 18px;

    border: 1px solid var(--border);
    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            var(--graphite-2),
            var(--graphite)
        );
}

.plan-group .section-title {
    margin-bottom: 13px;
}

.plan-count {
    min-width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    padding: 0 9px;

    border: 1px solid var(--border);
    border-radius: 999px;

    background: rgba(0,0,0,.18);
    color: var(--muted);

    font-size: .75rem;
    font-weight: 750;
}

.plan-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


/* PLAN TASK */

.plan-task {
    position: relative;
    overflow: hidden;

    display: grid;
    grid-template-columns: 4px 1fr;
    gap: 13px;

    min-height: 68px;

    border: 1px solid
        color-mix(in srgb, var(--area) 10%, var(--border));

    border-radius: 17px;

    background:
        linear-gradient(
            110deg,
            color-mix(in srgb, var(--area) 5%, var(--graphite-2)) 0%,
            color-mix(in srgb, var(--area) 2%, var(--graphite-2)) 48%,
            var(--graphite) 90%
        );
}

.plan-task-accent {
    width: 4px;
    margin: 10px 0;

    border-radius: 0 5px 5px 0;

    background: var(--area);
}

.plan-task-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;

    min-width: 0;
    padding: 13px 14px 13px 0;
}

.plan-task-content strong {
    font-size: .92rem;
}

.plan-task-meta {
    display: flex;
    align-items: center;
    gap: 9px;

    color: var(--muted);
    font-size: .7rem;
}


/* EMPTY GROUP */

.plan-empty {
    padding: 14px;

    border: 1px dashed #292d32;
    border-radius: 15px;

    color: #555b63;

    font-size: .78rem;
    text-align: center;
}


/* SPECIAL BUCKETS */

.plan-group-today {
    border-color: rgba(255,139,44,.22);
}

.plan-group-today > .section-title > div > span {
    color: var(--orange);
}

.plan-group-hell {
    background:
        radial-gradient(circle at 100% 0%, rgba(255,80,55,.035), transparent 13rem),
        linear-gradient(145deg, var(--graphite-2), var(--graphite));
}

.plan-group-hell > .section-title > div > span {
    color: #c86a54;
}


/* IPAD */

@media (min-width: 700px) {
    .plan-board {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        align-items: start;
    }

    .plan-group-today {
        grid-column: 1 / -1;
    }
}


/* GLOBAL MENU */

.hero-actions {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.menu-button {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border: 1px solid var(--border);
    border-radius: 15px;

    background: var(--graphite-2);
    color: var(--orange);

    font-size: 1.15rem;
}

.menu-button:active {
    transform: scale(.95);
    background: var(--graphite-3);
}

.menu-backdrop[hidden] {
    display: none;
}

.menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 300;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    padding: 14px;

    background: rgba(0,0,0,.68);
    backdrop-filter: blur(10px);
}

.menu-sheet {
    width: min(100%, 560px);
    padding: 21px;

    border: 1px solid #30343a;
    border-radius: 27px;

    background:
        radial-gradient(circle at 100% 0%, rgba(255,139,44,.08), transparent 17rem),
        linear-gradient(145deg, #1c1f23, #131518);

    box-shadow: 0 30px 90px rgba(0,0,0,.55);
}

.menu-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    margin-bottom: 20px;
}

.menu-kicker {
    color: var(--orange);

    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .15em;
}

.menu-head h2 {
    margin: 4px 0 0;
    font-size: 1.45rem;
}

.menu-close {
    width: 42px;
    height: 42px;

    border: 1px solid var(--border);
    border-radius: 14px;

    background: var(--graphite-2);
    color: var(--muted);

    font-size: 1.5rem;
}

.menu-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.menu-links a {
    min-height: 68px;

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 12px 15px;

    border: 1px solid var(--border);
    border-radius: 18px;

    background:
        linear-gradient(110deg, rgba(255,139,44,.035), var(--graphite));

    color: var(--text);
    text-decoration: none;
}

.menu-links a:active {
    border-color: rgba(255,139,44,.35);
    background: var(--graphite-3);
}

.menu-icon {
    width: 38px;
    text-align: center;
    font-size: 1.4rem;
}

.menu-links a > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.menu-links strong {
    font-size: .92rem;
}

.menu-links small {
    color: var(--muted);
    font-size: .7rem;
}

.menu-coming {
    margin-top: 18px;
    color: var(--quiet);
    font-size: .7rem;
    text-align: center;
}

@media (min-width: 700px) {
    .menu-backdrop {
        align-items: center;
    }
}


/* PLAN TASK BUTTON RESET */

.plan-task {
    width: 100%;
    padding: 0;

    color: var(--text);
    text-align: left;
    font: inherit;

    cursor: pointer;
}

.plan-task:active {
    transform: scale(.99);
}


/* REPLAN MODAL */

.replan-backdrop[hidden] {
    display: none;
}

.replan-backdrop {
    position: fixed;
    inset: 0;
    z-index: 250;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    padding: 14px;

    background: rgba(0,0,0,.68);
    backdrop-filter: blur(10px);
}

.replan-sheet {
    width: min(100%, 560px);
    padding: 21px;

    border: 1px solid #30343a;
    border-radius: 27px;

    background:
        radial-gradient(circle at 100% 0%, rgba(255,139,44,.08), transparent 17rem),
        linear-gradient(145deg, #1c1f23, #131518);

    box-shadow: 0 30px 90px rgba(0,0,0,.55);
}

.replan-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;

    margin-bottom: 20px;
}

.replan-head > div {
    min-width: 0;
}

.replan-head span {
    color: var(--orange);

    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .15em;
}

.replan-head h2 {
    margin: 5px 0 0;

    font-size: 1.25rem;
    letter-spacing: -.025em;

    overflow: hidden;
    text-overflow: ellipsis;
}

#close-replan {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    border: 1px solid var(--border);
    border-radius: 14px;

    background: var(--graphite-2);
    color: var(--muted);

    font-size: 1.5rem;
}

.replan-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.replan-options button {
    min-height: 52px;
    padding: 10px 12px;

    border: 1px solid var(--border);
    border-radius: 15px;

    background: var(--graphite);
    color: var(--muted);

    font-size: .78rem;
    font-weight: 750;

    transition:
        transform .12s ease,
        border-color .12s ease,
        background .12s ease,
        color .12s ease;
}

.replan-options button:active {
    transform: scale(.97);

    border-color: rgba(255,139,44,.55);
    background: var(--orange-soft);
    color: #ffad67;
}

.replan-options button:last-child {
    grid-column: 1 / -1;
}

@media (min-width: 700px) {
    .replan-backdrop {
        align-items: center;
    }
}


/* CALENDAR SOURCES */

.calendar-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;

    padding: 23px;
    margin-bottom: 34px;

    border: 1px solid #292d32;
    border-radius: 28px;

    background:
        radial-gradient(circle at 95% 0%, rgba(255,139,44,.09), transparent 17rem),
        linear-gradient(145deg, #1b1e22, #121416);
}

.calendar-hero h1 {
    margin: 5px 0 0;

    font-size: clamp(2.1rem, 9vw, 3.4rem);
    line-height: 1;
    letter-spacing: -.05em;
}

.calendar-hero p {
    margin: 10px 0 0;
    color: var(--muted);
}

.calendar-accounts {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.calendar-account {
    padding: 18px;

    border: 1px solid var(--border);
    border-radius: 23px;

    background:
        linear-gradient(145deg, var(--graphite-2), var(--graphite));
}

.calendar-account-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;

    margin-bottom: 15px;
}

.calendar-provider {
    color: var(--orange);

    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.calendar-account h2 {
    margin: 4px 0 0;
    font-size: 1.1rem;
}

.calendar-account-state {
    padding: 6px 9px;

    border: 1px solid var(--border);
    border-radius: 999px;

    color: var(--quiet);
    font-size: .67rem;
}

.calendar-account-state.enabled {
    border-color: rgba(255,139,44,.25);
    background: var(--orange-soft);
    color: #e5a064;
}

.calendar-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.calendar-row {
    padding: 14px;

    border: 1px solid var(--border);
    border-radius: 16px;

    background: #121417;
}

.calendar-row.disabled {
    opacity: .55;
}

.calendar-row-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.calendar-row-main strong {
    font-size: .9rem;
}

.calendar-row-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;

    color: var(--muted);
    font-size: .69rem;
}

.calendar-enabled {
    color: #d99a63;
}

.calendar-empty,
.calendar-empty-state {
    color: var(--muted);
}

.calendar-empty {
    padding: 14px;

    border: 1px dashed var(--border);
    border-radius: 15px;

    font-size: .76rem;
    text-align: center;
}

.calendar-empty-state {
    padding: 34px 22px;

    border: 1px solid var(--border);
    border-radius: 24px;

    background:
        linear-gradient(145deg, var(--graphite-2), var(--graphite));

    text-align: center;
}

.calendar-empty-icon {
    margin-bottom: 12px;
    font-size: 2rem;
}

.calendar-empty-state h2 {
    margin: 0;
    color: var(--text);
    font-size: 1.15rem;
}

.calendar-empty-state p {
    max-width: 460px;
    margin: 10px auto 0;

    font-size: .8rem;
    line-height: 1.5;
}

@media (min-width: 700px) {
    .calendar-accounts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* AUFSCHIEBERITIS */

.history-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 28px;
}

.history-stats > div {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}

.history-stats strong {
    display: block;
    font-size: 1.6rem;
}

.history-stats span {
    color: var(--muted);
    font-size: .8rem;
}

.history-list {
    display: grid;
    gap: 10px;
}

.history-entry {
    display: flex;
    gap: 14px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}

.history-icon {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--orange-soft);
    color: var(--orange);
    font-weight: 800;
}

.history-text {
    min-width: 0;
    flex: 1;
}

.history-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.history-head time {
    color: var(--muted);
    font-size: .75rem;
    white-space: nowrap;
}

.history-text > span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: .88rem;
}


/* COMPLETED TASKS */

.completed-section {
    margin-top: 34px;
    border-top: 1px solid var(--line);
    padding-top: 18px;
}

.completed-section summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    list-style: none;
    padding: 10px 0 16px;
}

.completed-section summary::-webkit-details-marker {
    display: none;
}

.completed-section summary div {
    display: grid;
    gap: 3px;
}

.completed-section summary span:first-child {
    color: var(--muted);
    font-size: .72rem;
    letter-spacing: .1em;
}

.completed-section summary strong {
    font-size: 1.1rem;
}

.completed-stack {
    display: grid;
    gap: 9px;
}

.completed-task {
    --area: var(--private);

    width: 100%;
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 14px;

    border: 1px solid var(--line);
    border-radius: 15px;

    background: var(--surface);
    color: inherit;
    text-align: left;

    cursor: pointer;
    opacity: .7;
}

.completed-check {
    display: grid;
    place-items: center;

    flex: 0 0 26px;
    width: 26px;
    height: 26px;

    border-radius: 50%;
    background: var(--area);
    color: #0d0f11;

    font-weight: 900;
}

.completed-task-content {
    min-width: 0;
    flex: 1;
}

.completed-task-content > strong {
    display: block;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}


/* HERO HOME LINK */

.hero-home-link {
    color: inherit;
    text-decoration: none;
}

.hero-home-link:visited {
    color: inherit;
}

.hero-home-link:active {
    opacity: .7;
}


/* MACHINE ROOM STATUS */

.machine-status {
    margin-top: 36px;
}

.machine-sync-status {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 16px;
    padding: 16px;

    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}

.machine-sync-status > div {
    display: grid;
    gap: 4px;
}

.machine-sync-status span {
    color: var(--muted);
    font-size: .8rem;
}

.machine-status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #65d47e;
    box-shadow: 0 0 12px rgba(101, 212, 126, .45);
}

.machine-sync-status.failed .machine-status-dot {
    background: var(--danger);
    box-shadow: 0 0 12px rgba(255, 112, 112, .45);
}

.machine-errors {
    margin-bottom: 16px;
    padding: 14px;

    border: 1px solid rgba(255, 112, 112, .3);
    border-radius: 14px;

    color: var(--danger);
    font-size: .85rem;
}


/* HEUTE WIRD NIX MEHR */

.day-over-section {
    margin-top: 28px;
}

.day-over-button {
    width: 100%;
    display: grid;
    gap: 4px;

    padding: 18px;

    border: 1px solid rgba(255, 145, 45, .35);
    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 145, 45, .14),
            rgba(255, 145, 45, .04)
        );

    color: inherit;
    text-align: left;
    cursor: pointer;
}

.day-over-button strong {
    font-size: 1.2rem;
}

.day-over-button small {
    color: var(--muted);
}

.day-over-kicker {
    color: var(--orange);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.day-over-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;

    display: flex;
    align-items: flex-end;

    background: rgba(0, 0, 0, .68);
    backdrop-filter: blur(5px);
}

.day-over-backdrop[hidden] {
    display: none;
}

.day-over-sheet {
    width: min(100%, 620px);
    max-height: 85vh;
    overflow-y: auto;

    margin: 0 auto;
    padding: 22px;

    border: 1px solid var(--line);
    border-bottom: 0;

    border-radius: 24px 24px 0 0;
    background: var(--surface);
}

.day-over-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.day-over-head span {
    color: var(--orange);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.day-over-head h2 {
    margin: 4px 0 0;
}

.day-over-head button {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 1.8rem;
    cursor: pointer;
}

.day-over-copy {
    margin: 20px 0 12px;
    color: var(--muted);
}

.day-over-tasks {
    display: grid;
    gap: 8px;
}

.day-over-task {
    display: grid;
    gap: 3px;

    padding: 12px 14px;

    border: 1px solid var(--line);
    border-radius: 13px;

    background: rgba(255, 255, 255, .025);
}

.day-over-task span {
    color: var(--muted);
    font-size: .78rem;
}

.day-over-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;

    margin-top: 20px;
}

.day-over-options button,
.day-over-options a {
    min-height: 48px;

    display: grid;
    place-items: center;

    padding: 10px;

    border: 1px solid var(--line);
    border-radius: 13px;

    background: rgba(255, 255, 255, .04);
    color: inherit;

    font: inherit;
    font-weight: 700;
    text-decoration: none;
    text-align: center;

    cursor: pointer;
}

.day-over-options button:first-child {
    border-color: rgba(255, 145, 45, .45);
    background: rgba(255, 145, 45, .12);
}

.day-over-options button:disabled {
    opacity: .5;
}

.day-over-status,
.day-over-empty {
    padding: 16px 0;
    color: var(--muted);
}


/* QUICK EVENTS */

.quick-events-section {
    margin-top: 28px;
}

.quick-event-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
}

.quick-event-button {
    min-height: 74px;

    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;

    padding: 13px;

    border: 1px solid var(--line);
    border-radius: 16px;

    background: var(--surface);
    color: inherit;

    text-align: left;
    cursor: pointer;
}

.quick-event-button:active {
    transform: scale(.98);
}

.quick-event-button:disabled {
    opacity: .7;
}

.quick-event-icon {
    grid-row: 1 / 3;
    font-size: 1.6rem;
}

.quick-event-button strong {
    font-size: .95rem;
}

.quick-event-button small {
    color: var(--muted);
    font-size: .72rem;
}

.quick-event-add {
    width: 100%;
    margin-top: 9px;
    padding: 12px;

    border: 1px dashed var(--line);
    border-radius: 14px;

    background: transparent;
    color: var(--muted);

    font: inherit;
    cursor: pointer;
}

.quick-event-backdrop {
    position: fixed;
    inset: 0;
    z-index: 210;

    display: flex;
    align-items: flex-end;

    background: rgba(0, 0, 0, .68);
    backdrop-filter: blur(5px);
}

.quick-event-backdrop[hidden] {
    display: none;
}

.quick-event-sheet {
    width: min(100%, 620px);
    margin: 0 auto;

    padding: 22px;

    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;

    background: var(--surface);
}

.quick-event-field {
    display: grid;
    gap: 6px;
    margin-top: 16px;
}

.quick-event-field > span {
    color: var(--muted);
    font-size: .75rem;
}

.quick-event-field input,
.quick-event-field select {
    width: 100%;
    min-height: 46px;

    padding: 10px 12px;

    border: 1px solid var(--line);
    border-radius: 12px;

    background: rgba(255, 255, 255, .04);
    color: inherit;

    font: inherit;
}

.quick-event-save {
    width: 100%;
    min-height: 48px;

    margin-top: 20px;

    border: 1px solid rgba(255, 145, 45, .4);
    border-radius: 13px;

    background: rgba(255, 145, 45, .12);
    color: inherit;

    font: inherit;
    font-weight: 800;

    cursor: pointer;
}


/* MACHINE ROOM QUICK EVENTS */

.machine-quick-events {
    margin-top: 36px;
}

.machine-quick-event-list {
    display: grid;
    gap: 9px;
}

.machine-quick-event {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 14px;

    border: 1px solid var(--line);
    border-radius: 15px;

    background: var(--surface);
}

.machine-quick-event-info {
    display: grid;
    gap: 3px;
}

.machine-quick-event-info span {
    color: var(--muted);
    font-size: .78rem;
}

.machine-delete-button {
    padding: 8px 11px;

    border: 1px solid rgba(255, 112, 112, .35);
    border-radius: 10px;

    background: rgba(255, 112, 112, .08);
    color: #ff8c8c;

    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}

.machine-delete-button:disabled {
    opacity: .5;
}


/* QUICK EVENT OPTIONAL FIELDS */

.quick-field-builder {
    display: grid;
    gap: 10px;

    margin-top: 20px;
    padding: 14px;

    border: 1px solid var(--line);
    border-radius: 14px;

    background: rgba(255, 255, 255, .025);
}

.quick-field-builder-title {
    color: var(--muted);
    font-size: .75rem;
}

.quick-field-option {
    display: flex;
    align-items: center;
    gap: 9px;

    cursor: pointer;
}

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

.quick-field-builder > input[type="text"] {
    min-height: 42px;
    padding: 9px 11px;

    border: 1px solid var(--line);
    border-radius: 11px;

    background: rgba(255, 255, 255, .04);
    color: inherit;

    font: inherit;
}

.quick-field-builder > input:disabled {
    opacity: .4;
}

.quick-trigger-backdrop {
    position: fixed;
    inset: 0;
    z-index: 220;

    display: flex;
    align-items: flex-end;

    background: rgba(0, 0, 0, .68);
    backdrop-filter: blur(5px);
}

.quick-trigger-backdrop[hidden] {
    display: none;
}

.quick-trigger-fields {
    margin-top: 18px;
}


/* QUICK EVENT COUNTER */

.quick-counter-builder {
    display: grid;
    gap: 10px;

    margin-top: 20px;
    padding: 14px;

    border: 1px solid var(--line);
    border-radius: 14px;

    background: rgba(255, 145, 45, .04);
}

.quick-counter-builder select {
    min-height: 42px;
    padding: 9px 11px;

    border: 1px solid var(--line);
    border-radius: 11px;

    background: rgba(255, 255, 255, .04);
    color: inherit;

    font: inherit;
}

.quick-counter-builder select:disabled {
    opacity: .4;
}


/* MACHINE ROOM QUICK EVENT EDITING */

.machine-quick-event-actions {
    display: flex;
    gap: 7px;
    flex-shrink: 0;
}

.machine-edit-button {
    padding: 8px 11px;

    border: 1px solid var(--line);
    border-radius: 10px;

    background: rgba(255, 255, 255, .04);
    color: inherit;

    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}

.machine-quick-event.disabled {
    opacity: .55;
}

@media (max-width: 600px) {
    .machine-quick-event {
        align-items: flex-start;
        flex-direction: column;
    }

    .machine-quick-event-actions {
        width: 100%;
    }

    .machine-edit-button,
    .machine-delete-button {
        flex: 1;
    }
}


/* FACTSHEET */

.factsheet-grid {
    display: grid;
    gap: 14px;
}

.factsheet-card {
    padding: 17px;

    border: 1px solid var(--line);
    border-radius: 18px;

    background: var(--surface);
}

.factsheet-card.disabled {
    opacity: .55;
}

.factsheet-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.factsheet-title {
    display: flex;
    align-items: center;
    gap: 11px;
}

.factsheet-title > span {
    font-size: 1.8rem;
}

.factsheet-title div {
    display: grid;
    gap: 2px;
}

.factsheet-title strong {
    font-size: 1.05rem;
}

.factsheet-title small {
    color: var(--muted);
}

.factsheet-off {
    padding: 4px 7px;

    border: 1px solid var(--line);
    border-radius: 8px;

    color: var(--muted);
    font-size: .65rem;
    font-weight: 800;
}

.factsheet-counts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;

    margin-top: 16px;
}

.factsheet-counts > div {
    display: grid;
    gap: 2px;

    padding: 10px 8px;

    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
}

.factsheet-counts strong {
    font-size: 1.2rem;
}

.factsheet-counts span {
    color: var(--muted);
    font-size: .68rem;
}

.factsheet-extras {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;

    margin-top: 9px;
}

.factsheet-extras > div {
    display: grid;
    gap: 3px;

    padding: 11px;

    border: 1px solid var(--line);
    border-radius: 12px;

    background: rgba(255, 145, 45, .04);
}

.factsheet-extras span {
    color: var(--muted);
    font-size: .7rem;
}

.factsheet-latest {
    grid-column: 1 / -1;
}

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


/* FACTSHEET COMMENTS */

.factsheet-comment {
    margin-top: 13px;
    padding-top: 12px;

    border-top: 1px solid var(--line);

    font-size: .92rem;
    font-weight: 650;
}


/* FACTSHEET 2.0 */

.factsheet-card {
    position: relative;
    overflow: hidden;

    padding: 20px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(255, 145, 45, .07),
            transparent 42%
        ),
        var(--surface);
}

.factsheet-watermark {
    position: absolute;
    top: -10px;
    right: 8px;

    font-size: 6rem;
    line-height: 1;

    opacity: .055;

    pointer-events: none;
    user-select: none;

    transform: rotate(8deg);
}

.factsheet-primary {
    position: relative;
    z-index: 1;

    display: grid;
    gap: 0;

    margin-top: 20px;
}

.factsheet-primary > strong {
    font-size: clamp(2.7rem, 8vw, 4.5rem);
    line-height: .95;
    letter-spacing: -.04em;
}

.factsheet-primary > span {
    margin-top: 6px;

    color: var(--muted);
    font-size: .78rem;
}

.factsheet-ministats {
    position: relative;
    z-index: 1;

    display: flex;
    flex-wrap: wrap;
    gap: 7px 16px;

    margin-top: 18px;
    padding-top: 12px;

    border-top: 1px solid var(--line);

    color: var(--muted);
    font-size: .72rem;
}

.factsheet-ministats strong {
    margin-left: 3px;
    color: inherit;
}

.factsheet-comment {
    position: relative;
    z-index: 1;

    margin-top: 17px;
    padding-top: 0;

    border-top: 0;

    font-size: 1rem;
    font-weight: 700;
}

/* Der alte 4-Kästchen-Look wird nicht mehr gebraucht. */
.factsheet-counts {
    display: none;
}



/* FACTSHEET · DESKTOP LAYOUT */

@media (min-width: 760px) {
    .factsheet-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .factsheet-card--steam {
        grid-column: 1 / -1;
    }

    .factsheet-card--steam .factsheet-extras {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .factsheet-card--steam .factsheet-latest {
        grid-column: auto;
    }
}


/* MACHINE ROOM · MOVEMENTS COMPACT */

.machine-status {
    width: 100%;
    max-width: 780px;
    margin-top: 36px;
}

.machine-sync-status {
    justify-content: flex-start;
    gap: 14px;

    padding: 14px 16px;
}

.machine-status-dot {
    flex: 0 0 12px;
}

.machine-status .history-list {
    gap: 8px;
}

.machine-status .history-entry {
    padding: 12px 14px;
}

.machine-status .history-head {
    justify-content: flex-start;
    align-items: baseline;
    gap: 10px;
}

.machine-status .history-head time {
    margin-left: 0;
    font-size: .7rem;
}

.machine-status .history-text > span {
    margin-top: 3px;
    font-size: .8rem;
}

@media (max-width: 600px) {
    .machine-status .history-head {
        display: grid;
        gap: 2px;
    }
}


/* STEAM · ALL-TIME */

.steam-alltime {
    position: relative;
    z-index: 1;

    margin-top: 20px;
    padding-top: 15px;

    border-top: 1px solid var(--line);
}

.steam-alltime-head {
    display: grid;
    gap: 2px;
}

.steam-alltime-head span {
    color: var(--accent);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.steam-alltime-head strong {
    font-size: .95rem;
}

.steam-alltime-list {
    display: grid;
    gap: 7px;

    margin-top: 12px;
}

.steam-alltime-row {
    display: grid;
    grid-template-columns:
        24px
        minmax(0, 1fr)
        auto;

    gap: 8px;
    align-items: baseline;

    font-size: .82rem;
}

.steam-alltime-row > span {
    color: var(--muted);
}

.steam-alltime-row > span:last-child {
    white-space: nowrap;
    text-align: right;
}


/* DAMPFMASCHINE */

.steam-dashboard {
    display: grid;
    gap: 18px;
}

.steam-boiler {
    position: relative;
    overflow: hidden;

    display: flex;
    justify-content: space-between;
    align-items: center;

    min-height: 190px;
    padding: 25px;

    border: 1px solid var(--line);
    border-radius: 22px;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(255, 145, 45, .17),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(255, 145, 45, .055),
            transparent 55%
        ),
        var(--surface);
}

.steam-boiler > div:first-child {
    position: relative;
    z-index: 2;

    display: grid;
}

.steam-kicker {
    color: var(--accent);

    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .1em;
}

.steam-boiler strong {
    margin-top: 8px;

    font-size: clamp(3.4rem, 9vw, 6.4rem);
    line-height: .9;
    letter-spacing: -.055em;
}

.steam-boiler small {
    margin-top: 12px;

    color: var(--muted);
    font-size: .85rem;
}

.steam-boiler-icon {
    position: absolute;
    right: 15px;

    font-size: clamp(7rem, 18vw, 13rem);

    opacity: .055;

    transform: rotate(-12deg);
}

.steam-gauges {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.steam-gauges article {
    display: grid;
    gap: 5px;

    padding: 15px;

    border: 1px solid var(--line);
    border-radius: 14px;

    background: var(--surface);
}

.steam-gauges span {
    color: var(--muted);
    font-size: .7rem;
}

.steam-gauges strong {
    font-size: 1.15rem;
}

.steam-columns {
    display: grid;
    gap: 18px;
}

.steam-side {
    display: grid;
    gap: 18px;
}

.steam-panel {
    padding: 19px;

    border: 1px solid var(--line);
    border-radius: 18px;

    background: var(--surface);
}

.steam-panel header {
    margin-bottom: 15px;
}

.steam-panel header > span {
    color: var(--accent);

    font-size: .64rem;
    font-weight: 850;
    letter-spacing: .09em;
}

.steam-panel h2 {
    margin: 3px 0 0;

    font-size: 1.15rem;
}

.steam-ranking {
    display: grid;
}

.steam-rank-row {
    display: grid;
    grid-template-columns:
        28px
        minmax(0, 1fr)
        auto;

    gap: 10px;
    align-items: center;

    padding: 10px 0;

    border-top: 1px solid var(--line);
}

.steam-rank-row:first-child {
    border-top: 0;
}

.steam-rank {
    color: var(--muted);

    font-size: .75rem;
    font-weight: 800;
}

.steam-rank-row > div {
    display: grid;
    gap: 2px;
}

.steam-rank-row small,
.steam-simple-list small,
.steam-recent small {
    color: var(--muted);
}

.steam-rank-row > strong {
    white-space: nowrap;

    font-size: .82rem;
}

.steam-simple-list {
    display: grid;
}

.steam-simple-list > div {
    display: flex;
    justify-content: space-between;
    gap: 15px;

    padding: 10px 0;

    border-top: 1px solid var(--line);
}

.steam-simple-list > div:first-child {
    border-top: 0;
}

.steam-simple-list span {
    flex: 0 0 auto;

    color: var(--muted);
}

.steam-recent {
    display: grid;
    gap: 9px;
}

.steam-recent > div {
    display: grid;
    gap: 2px;

    padding: 12px;

    border-radius: 12px;

    background: rgba(255, 255, 255, .025);
}

.steam-recent span {
    color: var(--muted);
    font-size: .74rem;
}

.steam-empty {
    margin: 0;

    color: var(--muted);
}


@media (min-width: 850px) {
    .steam-columns {
        grid-template-columns:
            minmax(0, 1.35fr)
            minmax(300px, .65fr);
    }

    .steam-recent {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}


@media (max-width: 650px) {
    .steam-gauges {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .steam-boiler {
        min-height: 160px;
        padding: 20px;
    }
}


/* DAMPFMASCHINE · INSTRUMENTENTAFEL */

.steam-instrument-board {
    display: grid;
    gap: 14px;

    padding: 18px;

    border: 1px solid var(--line);
    border-radius: 22px;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, .012) 0,
            rgba(255, 255, 255, .012) 1px,
            transparent 1px,
            transparent 5px
        ),
        linear-gradient(
            145deg,
            rgba(255, 145, 45, .035),
            transparent 50%
        ),
        #111315;
}


.steam-dial-unit,
.steam-meter-unit {
    position: relative;

    padding: 16px;

    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;

    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(255, 255, 255, .035),
            transparent 45%
        ),
        #0b0d0f;

    box-shadow:
        inset 0 0 22px rgba(0, 0, 0, .65),
        0 1px 0 rgba(255, 255, 255, .025);
}


.steam-dial-label,
.steam-meter-label {
    display: block;

    color: var(--muted);

    font-size: .64rem;
    font-weight: 850;
    letter-spacing: .11em;
}


.steam-dial {
    position: relative;

    width: min(100%, 260px);
    aspect-ratio: 1;

    margin: 10px auto 0;

    border: 9px solid #24282b;
    border-radius: 50%;

    background:
        radial-gradient(
            circle at center,
            #111416 0 54%,
            #181c1f 55% 61%,
            #090b0c 62% 100%
        );

    box-shadow:
        inset 0 0 25px #000,
        0 0 0 1px rgba(255, 255, 255, .06),
        0 7px 18px rgba(0, 0, 0, .4);
}


.steam-dial::before {
    content: "";

    position: absolute;
    inset: 10%;

    border-radius: 50%;

    background:
        repeating-conic-gradient(
            from 240deg,
            rgba(255,255,255,.4) 0deg 1deg,
            transparent 1deg 12deg
        );

    mask:
        radial-gradient(
            circle,
            transparent 0 78%,
            #000 79% 100%
        );

    opacity: .55;
}


.steam-dial::after {
    content: "";

    position: absolute;
    inset: 16%;

    border-radius: 50%;

    border:
        1px solid rgba(255, 145, 45, .15);

    pointer-events: none;
}


.steam-needle {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 39%;
    height: 3px;

    transform-origin: 0 50%;
    transform:
        rotate(var(--needle-angle));

    background:
        linear-gradient(
            90deg,
            #f5f5f5,
            var(--accent)
        );

    box-shadow:
        0 0 7px rgba(255, 145, 45, .4);
}


.steam-hub {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 18px;
    height: 18px;

    border: 4px solid #252a2e;
    border-radius: 50%;

    background: #090a0b;

    transform:
        translate(-50%, -50%);

    box-shadow:
        0 2px 5px #000;
}


.steam-dial-value {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 19%;

    display: grid;
    gap: 2px;

    text-align: center;
}


.steam-dial-value strong {
    font-size: 1.15rem;
}


.steam-dial-value span {
    color: var(--muted);
    font-size: .62rem;
}


.steam-dial-scale span {
    position: absolute;

    color: var(--muted);

    font-size: .57rem;
    font-weight: 750;
}


.steam-scale-left {
    left: 16%;
    bottom: 24%;
}

.steam-scale-mid {
    left: 50%;
    top: 11%;

    transform: translateX(-50%);
}

.steam-scale-right {
    right: 14%;
    bottom: 24%;
}


.steam-warning-lamp {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;

    margin-top: 8px;

    color: var(--muted);

    font-size: .62rem;
    font-weight: 850;
    letter-spacing: .07em;
}


.steam-warning-lamp > span {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: var(--accent);

    box-shadow:
        0 0 8px rgba(255, 145, 45, .65);
}


.steam-meter-unit {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 165px;
}


.steam-odometer {
    display: inline-block;

    width: fit-content;

    margin-top: 15px;
    padding: 8px 11px;

    border: 1px solid #31363a;
    border-radius: 6px;

    background:
        repeating-linear-gradient(
            90deg,
            #090a0b 0,
            #090a0b 31px,
            #202428 32px,
            #202428 33px
        );

    font-family:
        "Courier New",
        monospace;

    font-size: clamp(2rem, 6vw, 3.6rem);
    letter-spacing: .08em;

    box-shadow:
        inset 0 2px 7px #000;
}


.steam-library-count {
    margin-top: 10px;

    font-size: clamp(3.7rem, 10vw, 6rem);
    line-height: .9;
}


.steam-meter-unit small {
    margin-top: 9px;

    color: var(--muted);
}


@media (min-width: 760px) {
    .steam-instrument-board {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (min-width: 1050px) {
    .steam-instrument-board {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }
}


/* DAMPFMASCHINE · 2.0 */

.steam-dial-zones {
    position: absolute;
    inset: 8%;

    border-radius: 50%;

    background:
        conic-gradient(
            from 240deg,
            rgba(75, 170, 105, .55) 0deg 110deg,
            rgba(225, 166, 65, .65) 110deg 190deg,
            rgba(210, 70, 55, .72) 190deg 240deg,
            transparent 240deg 360deg
        );

    mask:
        radial-gradient(
            circle,
            transparent 0 83%,
            #000 84% 100%
        );

    opacity: .7;
}


.steam-warning-lamp.danger {
    color: #d76758;
}


.steam-warning-lamp.danger > span {
    background: #d34b3d;

    box-shadow:
        0 0 11px rgba(211, 75, 61, .9);
}


.steam-odometer {
    display: flex;
    align-items: stretch;

    width: fit-content;

    margin-top: 16px;

    border: 1px solid #353a3e;
    border-radius: 7px;

    overflow: hidden;

    background: #050607;

    box-shadow:
        inset 0 3px 10px #000,
        0 1px 0 rgba(255, 255, 255, .04);
}


.steam-odometer > span {
    display: grid;
    place-items: center;

    min-width: .78em;
    padding: 8px 5px;

    border-right: 1px solid #303438;

    font-family:
        "Courier New",
        monospace;

    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1;

    background:
        linear-gradient(
            #090a0b 0 47%,
            #202326 49%,
            #090a0b 52% 100%
        );

    text-shadow:
        0 1px 4px #000;
}


.steam-odometer > small {
    display: grid;
    place-items: end center;

    padding: 0 9px 8px;

    color: var(--muted);

    font-size: .7rem;
    font-weight: 800;
}


.steam-control-strip {
    display: grid;
    gap: 12px;

    padding: 14px 18px;

    border: 1px solid var(--line);
    border-radius: 15px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.025),
            transparent
        ),
        #101214;
}


.steam-control-title {
    color: var(--muted);

    font-size: .62rem;
    font-weight: 850;
    letter-spacing: .12em;
}


.steam-control-lamps {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
}


.steam-control-lamps > div {
    display: flex;
    align-items: center;
    gap: 8px;

    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .05em;
}


.steam-status-light {
    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #292d30;

    box-shadow:
        inset 0 1px 3px #000;
}


.steam-status-light.on {
    background: #6ab37b;

    box-shadow:
        0 0 9px rgba(106, 179, 123, .75);
}


.steam-status-light.danger.on {
    background: #d34b3d;

    box-shadow:
        0 0 11px rgba(211, 75, 61, .9);
}


/* DAMPFMASCHINE · ODOMETER FIT */

.steam-odometer {
    width: 100%;
}

.steam-odometer > span {
    flex: 1 1 0;
    min-width: 0;

    padding-left: 2px;
    padding-right: 2px;

    font-size: clamp(1.45rem, 2.4vw, 2.35rem);
}

.steam-odometer > small {
    flex: 0 0 auto;
    padding-left: 7px;
    padding-right: 7px;
}


/* DAMPFMASCHINE · INSTRUMENTENTAFEL 3.0 */

@media (min-width: 950px) {
    .steam-instrument-board {
        grid-template-columns:
            minmax(230px, 1fr)
            minmax(230px, 1fr)
            minmax(310px, 1.35fr);

        gap: 16px;
        padding: 18px;
    }
}


.steam-machine-stack {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 12px;
}


.steam-hour-meter,
.steam-coal-bin {
    padding: 18px;

    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .025),
            transparent 45%
        ),
        #0b0d0f;

    box-shadow:
        inset 0 0 24px rgba(0, 0, 0, .55);
}


.steam-hour-meter {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.steam-odometer {
    width: fit-content;
    max-width: 100%;

    margin-top: 16px;
}


.steam-odometer > span {
    flex: none;

    width: clamp(30px, 3vw, 43px);
    min-width: 0;

    font-size: clamp(1.8rem, 3vw, 2.7rem);
}


.steam-life-burned {
    display: flex;
    align-items: baseline;
    gap: 7px;

    margin-top: 16px;
    padding-top: 13px;

    border-top: 1px solid var(--line);
}


.steam-life-burned strong {
    font-size: 1.35rem;
}


.steam-life-burned span {
    color: var(--muted);
    font-size: .72rem;
}


.steam-coal-bin {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: end;
    gap: 10px 8px;
}


.steam-coal-bin > div {
    align-self: center;
}


.steam-coal-bin > div small {
    display: block;
    margin-top: 3px;

    color: var(--muted);
}


.steam-coal-bin > strong {
    font-size: clamp(2.6rem, 5vw, 4.6rem);
    line-height: .8;
}


.steam-coal-bin > span {
    color: var(--muted);
    font-size: .78rem;
}


/* Die alten Einzel-Meter brauchen wir nicht mehr. */
.steam-meter-unit {
    display: none;
}


@media (max-width: 949px) {
    .steam-machine-stack {
        grid-column: 1 / -1;
    }
}


/* DAMPFMASCHINE · LEBENSZEITVERNICHTER */

.steam-life-destroyer {
    position: relative;
    overflow: hidden;

    display: grid;
    gap: 18px;

    padding: 22px;

    border: 1px solid rgba(211, 75, 61, .24);
    border-radius: 20px;

    background:
        radial-gradient(
            circle at 0 0,
            rgba(211, 75, 61, .09),
            transparent 35%
        ),
        linear-gradient(
            110deg,
            rgba(255, 145, 45, .025),
            transparent 55%
        ),
        #101214;
}


.steam-life-warning {
    display: flex;
    align-items: center;
    gap: 18px;
}


.steam-life-warning > span {
    flex: 0 0 auto;

    font-size: clamp(3rem, 7vw, 5rem);
    line-height: 1;

    opacity: .7;
}


.steam-life-warning > div {
    display: grid;
}


.steam-life-warning small {
    color: #d76758;

    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .12em;
}


.steam-life-warning strong {
    margin-top: 4px;

    font-size: clamp(2.1rem, 5vw, 4rem);
    line-height: 1;
    letter-spacing: -.04em;
}


.steam-life-warning p {
    margin: 7px 0 0;

    color: var(--muted);
    font-size: .8rem;
}


.steam-life-pipe {
    height: 8px;

    border: 1px solid #353a3d;
    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #24282b,
            #484d50 35%,
            #24282b 70%
        );

    box-shadow:
        inset 0 1px 2px #000;
}


.steam-life-consumers {
    display: grid;
    gap: 8px;
}


.steam-life-consumers > div {
    display: grid;
    grid-template-columns:
        28px
        minmax(0, 1fr)
        auto;

    gap: 10px;
    align-items: baseline;

    padding: 8px 0;

    border-bottom: 1px solid var(--line);
}


.steam-life-consumers > div:last-child {
    border-bottom: 0;
}


.steam-life-consumers span {
    color: #d76758;

    font-size: .7rem;
    font-weight: 900;
}


.steam-life-consumers em {
    color: var(--muted);

    font-style: normal;
    white-space: nowrap;
}


.steam-life-caption {
    color: var(--muted);

    font-size: .58rem;
    font-weight: 850;
    letter-spacing: .11em;
}


@media (min-width: 760px) {
    .steam-life-consumers {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .steam-life-consumers > div {
        grid-template-columns:
            22px
            minmax(0, 1fr);

        align-content: start;
    }

    .steam-life-consumers em {
        grid-column: 2;
    }
}


/* DAMPFMASCHINE · BIBLIOTHEKSSTAUB */

.steam-dust-machine {
    display: grid;
    gap: 14px;

    padding: 18px;

    border: 1px solid var(--line);
    border-radius: 20px;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.01) 0,
            rgba(255,255,255,.01) 1px,
            transparent 1px,
            transparent 5px
        ),
        #101214;
}


.steam-dust-gauge,
.steam-dust-readout {
    padding: 18px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 17px;

    background: #0b0d0f;
}


.steam-dust-dial {
    max-width: 250px;
}


.steam-dust-readout header > span {
    color: var(--accent);

    font-size: .64rem;
    font-weight: 850;
    letter-spacing: .1em;
}


.steam-dust-readout h2 {
    margin: 3px 0 0;

    font-size: 1.15rem;
}


.steam-dust-counters {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 8px;

    margin-top: 18px;
}


.steam-dust-counters > div {
    display: grid;
    gap: 3px;

    padding: 11px;

    border: 1px solid var(--line);
    border-radius: 11px;

    background:
        rgba(255,255,255,.018);
}


.steam-dust-counters span {
    color: var(--muted);
    font-size: .65rem;
}


.steam-dust-counters strong {
    font-size: 1.35rem;
}


.steam-sediment {
    display: grid;
    gap: 10px;

    margin-top: 20px;
}


.steam-sediment-row {
    display: grid;
    grid-template-columns:
        72px
        minmax(0, 1fr)
        34px;

    gap: 10px;
    align-items: center;

    font-size: .72rem;
}


.steam-sediment-row > span {
    color: var(--muted);
}


.steam-sediment-row > strong {
    text-align: right;
}


.steam-sediment-track {
    overflow: hidden;

    height: 8px;

    border: 1px solid #303438;
    border-radius: 999px;

    background: #090a0b;
}


.steam-sediment-track i {
    display: block;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            rgba(255,145,45,.35),
            var(--accent)
        );
}


.steam-dust-unknown {
    display: grid;
    gap: 2px;

    margin-top: 19px;
    padding-top: 14px;

    border-top: 1px solid var(--line);
}


.steam-dust-unknown > span {
    color: #d7a353;

    font-size: .62rem;
    font-weight: 850;
    letter-spacing: .09em;
}


.steam-dust-unknown strong {
    margin-top: 3px;
}


.steam-dust-unknown small {
    color: var(--muted);
}


@media (min-width: 760px) {
    .steam-dust-machine {
        grid-template-columns:
            minmax(250px, .7fr)
            minmax(0, 1.3fr);
    }
}


@media (max-width: 600px) {
    .steam-dust-counters {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* DAMPFMASCHINE · STAUBMESSUNG 2.0 */

.steam-dust-confidence {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;

    margin-top: 12px;
    padding-top: 11px;

    border-top: 1px solid var(--line);
}

.steam-dust-confidence strong {
    font-size: 1.3rem;
}

.steam-dust-confidence span {
    max-width: 180px;

    color: var(--muted);
    font-size: .65rem;
}


.steam-sediment-track {
    height: 12px;
}

.steam-sediment-track i {
    box-shadow:
        0 0 8px rgba(255, 145, 45, .22);
}

.steam-sediment-row > strong {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
    align-items: baseline;
}

.steam-sediment-row > strong small {
    color: var(--muted);
    font-size: .55rem;
    font-weight: 500;
}


/* DAMPFMASCHINE · WARTUNGSBUCH */

.steam-service-book {
    overflow: hidden;

    border: 1px solid rgba(255, 145, 45, .16);
    border-radius: 20px;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.012) 0,
            rgba(255,255,255,.012) 1px,
            transparent 1px,
            transparent 28px
        ),
        #111315;
}


.steam-service-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;

    padding: 20px;

    border-bottom: 1px solid var(--line);
}


.steam-service-head > div:first-child {
    display: grid;
    gap: 3px;
}


.steam-service-head > div:first-child > span {
    color: var(--accent);

    font-size: .63rem;
    font-weight: 900;
    letter-spacing: .1em;
}


.steam-service-head h2 {
    margin: 0;

    font-size: 1.25rem;
}


.steam-service-head small {
    color: var(--muted);
}


.steam-service-stamp {
    flex: 0 0 auto;

    padding: 8px 11px;

    border: 2px solid rgba(211, 75, 61, .55);
    border-radius: 5px;

    color: #d76758;

    font-size: .55rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-align: center;

    transform: rotate(-3deg);
}


.steam-service-stamp strong {
    display: block;

    margin-top: 2px;

    font-size: .72rem;
}


.steam-findings {
    display: grid;
}


.steam-finding {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 13px;

    padding: 14px 20px;

    border-bottom: 1px solid var(--line);
}


.steam-finding-code {
    width: fit-content;
    height: fit-content;

    padding: 4px 6px;

    border: 1px solid #353a3e;
    border-radius: 5px;

    color: var(--muted);

    font-family: monospace;
    font-size: .65rem;
    font-weight: 800;
}


.steam-finding > div {
    display: grid;
    gap: 3px;
}


.steam-finding p {
    margin: 0;

    color: var(--muted);
    font-size: .78rem;
    line-height: 1.45;
}


.steam-finding--danger .steam-finding-code {
    border-color: rgba(211, 75, 61, .5);
    color: #d76758;
}


.steam-finding--warn .steam-finding-code {
    border-color: rgba(215, 163, 83, .5);
    color: #d7a353;
}


.steam-finding--ok .steam-finding-code {
    border-color: rgba(106, 179, 123, .45);
    color: #6ab37b;
}


.steam-finding--sensor .steam-finding-code {
    border-color: rgba(215, 163, 83, .45);
    color: #d7a353;
}


.steam-service-footer {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 16px;

    padding: 17px 20px;
}


.steam-service-footer > div {
    display: grid;
}


.steam-service-footer span {
    color: var(--muted);

    font-size: .58rem;
    font-weight: 850;
    letter-spacing: .1em;
}


.steam-service-footer strong {
    font-size: 1.45rem;
}


.steam-service-footer small {
    color: var(--muted);
    text-align: right;
}


@media (max-width: 620px) {
    .steam-service-head {
        display: grid;
    }

    .steam-service-stamp {
        width: fit-content;
    }

    .steam-service-footer {
        display: grid;
    }

    .steam-service-footer small {
        text-align: left;
    }
}


/* DAMPFMASCHINE · BETRIEBSCHRONIK */

.steam-chronicle-machine {
    overflow: hidden;

    border: 1px solid var(--line);
    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,145,45,.025),
            transparent 45%
        ),
        #101214;
}


.steam-chronicle-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;

    padding: 20px;

    border-bottom: 1px solid var(--line);
}


.steam-chronicle-head > div:first-child {
    display: grid;
    gap: 2px;
}


.steam-chronicle-head > div:first-child > span {
    color: var(--accent);

    font-size: .63rem;
    font-weight: 900;
    letter-spacing: .1em;
}


.steam-chronicle-head h2 {
    margin: 0;
}


.steam-chronicle-head small {
    color: var(--muted);
}


.steam-log-counter {
    display: grid;

    text-align: right;
}


.steam-log-counter strong {
    font-size: 2rem;
    line-height: 1;
}


.steam-log-counter span {
    margin-top: 3px;

    color: var(--muted);
    font-size: .65rem;
}


.steam-record-board {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 1px;

    background: var(--line);
}


.steam-record-board article {
    display: grid;
    align-content: center;
    gap: 4px;

    min-height: 105px;
    padding: 16px;

    background: #0c0e10;
}


.steam-record-board article > span {
    color: var(--muted);

    font-size: .58rem;
    font-weight: 850;
    letter-spacing: .09em;
}


.steam-record-board article > strong {
    font-size: 1.5rem;
}


.steam-record-board article > small {
    color: var(--muted);
}


.steam-logbook {
    padding: 8px 20px 20px;
}


.steam-log-entry {
    display: grid;
    grid-template-columns:
        24px
        115px
        minmax(0, 1fr);

    gap: 13px;

    min-height: 80px;
}


.steam-log-pipe {
    position: relative;
}


.steam-log-pipe::before {
    content: "";

    position: absolute;
    left: 11px;
    top: 0;
    bottom: 0;

    width: 2px;

    background:
        linear-gradient(
            #353a3e,
            #212528
        );
}


.steam-log-pipe span {
    position: absolute;

    left: 6px;
    top: 22px;

    width: 12px;
    height: 12px;

    border: 2px solid #353a3e;
    border-radius: 50%;

    background: var(--accent);

    box-shadow:
        0 0 10px rgba(255,145,45,.35);
}


.steam-log-date {
    display: grid;
    align-content: start;
    gap: 2px;

    padding-top: 18px;
}


.steam-log-date strong {
    font-size: .8rem;
}


.steam-log-date span {
    color: var(--muted);
    font-size: .65rem;
}


.steam-log-content {
    display: grid;
    gap: 5px;

    padding: 14px 0;

    border-bottom: 1px solid var(--line);
}


.steam-log-total {
    margin-bottom: 2px;

    color: var(--accent);

    font-size: 1.05rem;
    font-weight: 850;
}


.steam-log-game {
    display: flex;
    justify-content: space-between;
    gap: 15px;

    font-size: .76rem;
}


.steam-log-game span {
    flex: 0 0 auto;

    color: var(--muted);
}


@media (min-width: 850px) {
    .steam-record-board {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }
}


@media (max-width: 580px) {
    .steam-chronicle-head {
        align-items: start;
    }

    .steam-log-entry {
        grid-template-columns:
            20px
            minmax(0, 1fr);
    }

    .steam-log-date {
        grid-column: 2;
    }

    .steam-log-content {
        grid-column: 2;
        padding-top: 0;
    }
}


/* FACTSHEET · DAMPFMASCHINE LINK */

.factsheet-card-link {
    display: block;

    color: inherit;
    text-decoration: none;

    cursor: pointer;

    transition:
        border-color .15s ease,
        transform .15s ease,
        background-color .15s ease;
}

.factsheet-card-link:hover {
    border-color: rgba(255, 145, 45, .28);

    transform: translateY(-1px);
}

.factsheet-card-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}


/* DAMPFMASCHINE · PROZESSSCHEMA */

.steam-process-panel {
    overflow: hidden;

    border: 1px solid #2b3034;
    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.018),
            transparent 35%
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 27px,
            rgba(255,255,255,.012) 28px
        ),
        #0d0f11;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.015);
}


.steam-process-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;

    padding: 19px 21px;

    border-bottom: 1px solid #292e32;
}


.steam-process-head > div:first-child {
    display: grid;
    gap: 3px;
}


.steam-process-head span:first-child {
    color: var(--accent);

    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .11em;
}


.steam-process-head h2 {
    margin: 0;

    font-size: 1.25rem;
}


.steam-process-head small {
    color: var(--muted);
}


.steam-process-live {
    display: flex;
    align-items: center;
    gap: 8px;

    flex: 0 0 auto;

    color: var(--muted);

    font-size: .6rem;
    font-weight: 850;
    letter-spacing: .07em;
}


.steam-process-grid {
    display: grid;

    grid-template-columns:
        minmax(125px, 1fr)
        68px
        minmax(125px, 1fr)
        68px
        minmax(135px, 1fr)
        68px
        minmax(145px, 1.1fr);

    grid-template-rows:
        auto
        46px
        auto;

    align-items: center;

    padding: 28px 24px 22px;
}


/* Geräte */

.steam-process-unit {
    position: relative;

    display: grid;
    justify-items: center;
    align-content: center;
    gap: 5px;

    min-height: 170px;
    padding: 18px 12px;

    border: 1px solid #343a3f;
    border-radius: 13px;

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(255,255,255,.045),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #181b1e,
            #0d0f11
        );

    box-shadow:
        inset 0 0 18px rgba(0,0,0,.45),
        0 4px 15px rgba(0,0,0,.2);

    text-align: center;
}


.steam-process-unit::before,
.steam-process-unit::after {
    content: "";

    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #4a5054;

    box-shadow:
        calc(100% + 0px) 0 #4a5054;
}


.steam-process-unit::before {
    top: 7px;
    left: 7px;
    right: 7px;
}


.steam-process-unit::after {
    bottom: 7px;
    left: 7px;
}


.steam-process-tag {
    position: absolute;

    top: 9px;
    left: 10px;

    color: #737b80;

    font-family: monospace;
    font-size: .55rem;
    font-weight: 800;
}


.steam-process-symbol {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    border: 1px solid #3c4247;
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #24282b,
            #101214 68%
        );

    font-size: 1.45rem;

    box-shadow:
        inset 0 0 10px #000;
}


.steam-process-unit > small {
    margin-top: 5px;

    color: var(--muted);

    font-size: .56rem;
    font-weight: 900;
    letter-spacing: .08em;
}


.steam-process-unit > strong {
    max-width: 100%;

    font-size: 1.15rem;
    line-height: 1.05;
}


.steam-process-unit > em {
    color: #727a7f;

    font-size: .58rem;
    font-style: normal;
}


/* Rohranschlüsse */

.steam-process-port {
    position: absolute;

    z-index: 3;

    width: 12px;
    height: 28px;

    border: 2px solid #444b50;

    background:
        linear-gradient(
            90deg,
            #202428,
            #555c61,
            #202428
        );
}


.steam-process-port.left {
    left: -8px;
    top: calc(50% - 14px);
}


.steam-process-port.right {
    right: -8px;
    top: calc(50% - 14px);
}


.steam-process-port.bottom {
    left: calc(50% - 14px);
    bottom: -8px;

    width: 28px;
    height: 12px;

    background:
        linear-gradient(
            #202428,
            #555c61,
            #202428
        );
}


/* Hauptrohre */

.steam-process-pipe {
    position: relative;

    z-index: 1;

    height: 18px;

    border-top: 2px solid #43494e;
    border-bottom: 2px solid #171a1c;

    background:
        linear-gradient(
            #2b3034,
            #555c60 45%,
            #24282b 55%,
            #111315
        );

    box-shadow:
        0 3px 8px rgba(0,0,0,.35);
}


.steam-process-pipe::before,
.steam-process-pipe::after {
    content: "";

    position: absolute;
    top: -5px;

    width: 6px;
    height: 24px;

    border: 1px solid #4a5054;

    background: #24282b;
}


.steam-process-pipe::before {
    left: 4px;
}


.steam-process-pipe::after {
    right: 4px;
}


.steam-pipe-flow {
    position: absolute;

    z-index: 5;

    top: 5px;
    left: 8px;

    width: 7px;
    height: 4px;

    border-radius: 4px;

    background: var(--accent);

    opacity: 0;

    box-shadow:
        0 0 8px var(--accent);
}


.steam-process-pipe.active .steam-pipe-flow {
    opacity: .8;

    animation:
        steam-flow-pulse 1.8s linear infinite;
}


@keyframes steam-flow-pulse {
    from {
        left: 8px;
    }

    to {
        left: calc(100% - 15px);
    }
}


/* Ventil im Hauptrohr */

.steam-process-valve {
    position: absolute;

    z-index: 8;

    left: 50%;
    top: 50%;

    display: grid;
    place-items: center;

    width: 26px;
    height: 26px;

    border: 2px solid #596066;
    border-radius: 50%;

    background: #15181a;

    color: #8b949a;

    font-size: 1.1rem;
    font-weight: 900;

    transform:
        translate(-50%, -50%)
        rotate(45deg);

    box-shadow:
        0 0 0 3px #0d0f11;
}


/* Feuerung */

.steam-process-fire.active .steam-process-symbol {
    border-color: rgba(255,145,45,.5);

    box-shadow:
        inset 0 0 10px #000,
        0 0 15px rgba(255,145,45,.12);
}


/* Kessel / Gefahr */

.steam-process-boiler.danger {
    border-color: rgba(211,75,61,.55);

    box-shadow:
        inset 0 0 18px rgba(0,0,0,.45),
        0 0 18px rgba(211,75,61,.08);
}


.steam-process-pipe.danger {
    border-top-color: rgba(211,75,61,.55);
}


.steam-process-pipe.danger .steam-pipe-flow {
    background: #d76758;

    box-shadow:
        0 0 9px rgba(215,103,88,.7);
}


/* Mini-Betriebsstundenzähler */

.steam-process-mini-odometer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;

    margin: 3px 0;
}


.steam-process-mini-odometer span {
    min-width: 17px;
    padding: 4px 3px;

    border: 1px solid #34393d;
    border-radius: 3px;

    background: #050607;

    font-family: monospace;
    font-size: .82rem;
    font-weight: 900;
}


.steam-process-mini-odometer em {
    margin-left: 2px;

    color: var(--muted);

    font-size: .6rem;
    font-style: normal;
}


.steam-process-output {
    font-size: .72rem !important;
}


/* Sicherheitsabzweig */

.steam-process-drop {
    position: relative;

    grid-column: 5;
    grid-row: 2;

    justify-self: center;

    width: 18px;
    height: 46px;

    border-left: 2px solid #41474c;
    border-right: 2px solid #151719;

    background:
        linear-gradient(
            90deg,
            #272c2f,
            #4c5358,
            #202427
        );
}


.steam-process-drop::after {
    content: "";

    position: absolute;

    bottom: -5px;
    left: -5px;

    width: 24px;
    height: 7px;

    border: 1px solid #4a5054;

    background: #222629;
}


.steam-process-drop > span {
    position: absolute;

    left: 5px;
    top: 5px;

    width: 5px;
    height: 8px;

    border-radius: 4px;

    background: #d76758;

    opacity: 0;
}


.steam-process-drop.active > span {
    opacity: 1;

    animation:
        steam-flow-drop 1.2s linear infinite;
}


@keyframes steam-flow-drop {
    from {
        top: 4px;
    }

    to {
        top: 32px;
    }
}


.steam-process-drop.danger {
    border-color: rgba(211,75,61,.5);
}


/* Sicherheitsventil */

.steam-process-relief {
    grid-column: 5 / 8;
    grid-row: 3;

    display: grid;
    grid-template-columns:
        54px
        minmax(0,1fr)
        80px;

    align-items: center;
    gap: 13px;

    min-height: 82px;
    padding: 12px 14px;

    border: 1px solid #343a3f;
    border-radius: 12px;

    background:
        linear-gradient(
            100deg,
            #15181a,
            #0c0e10
        );
}


.steam-process-relief.danger {
    border-color: rgba(211,75,61,.55);
}


.steam-relief-valve {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border: 3px solid #535b60;
    border-radius: 50%;

    background: #101214;

    transform: rotate(45deg);
}


.steam-relief-valve span {
    color: #737b80;

    font-size: 1.55rem;
    font-weight: 900;
}


.steam-process-relief.danger
.steam-relief-valve {
    border-color: #a75047;

    box-shadow:
        0 0 12px rgba(211,75,61,.15);
}


.steam-process-relief > div:nth-child(2) {
    display: grid;
    gap: 3px;
}


.steam-process-relief small {
    color: var(--muted);

    font-size: .55rem;
    font-weight: 850;
    letter-spacing: .07em;
}


.steam-process-relief strong {
    font-size: .8rem;
}


.steam-process-relief em {
    color: #70787d;

    font-size: .6rem;
    font-style: normal;
}


/* Ablass */

.steam-relief-exhaust {
    position: relative;

    display: grid;
    justify-items: center;

    height: 48px;

    border-left: 8px solid #303539;
}


.steam-relief-exhaust::before {
    content: "";

    position: absolute;

    top: -3px;
    left: -13px;

    width: 18px;
    height: 7px;

    border: 1px solid #4a5054;

    background: #222629;
}


.steam-relief-exhaust > span {
    position: absolute;

    top: -4px;
    right: 17px;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    background: rgba(210,215,218,.15);

    opacity: 0;
}


.steam-relief-exhaust.active > span {
    opacity: 1;

    animation:
        steam-exhaust 1.8s ease-out infinite;
}


@keyframes steam-exhaust {
    from {
        transform:
            translateY(10px)
            scale(.5);

        opacity: .45;
    }

    to {
        transform:
            translateY(-28px)
            scale(1.6);

        opacity: 0;
    }
}


.steam-relief-exhaust small {
    position: absolute;

    bottom: -3px;

    color: #646c71;

    font-size: .47rem;
}


/* Fußzeile */

.steam-process-footer {
    display: flex;
    justify-content: space-between;
    gap: 18px;

    padding: 10px 20px;

    border-top: 1px solid #292e32;

    color: #646c71;

    font-family: monospace;
    font-size: .54rem;
}


.steam-process-footer strong {
    color: var(--accent);
}


/* Mobile: echte vertikale Rohrstrecke */

@media (max-width: 850px) {

    .steam-process-head {
        align-items: flex-start;
    }

    .steam-process-grid {
        display: flex;
        flex-direction: column;

        padding:
            22px
            max(16px, env(safe-area-inset-left))
            20px;
    }

    .steam-process-unit {
        width: min(100%, 340px);
    }

    .steam-process-pipe {
        width: 18px;
        height: 48px;

        border:
            0;
        border-left:
            2px solid #43494e;
        border-right:
            2px solid #171a1c;

        background:
            linear-gradient(
                90deg,
                #2b3034,
                #555c60 45%,
                #24282b 55%,
                #111315
            );
    }

    .steam-process-pipe::before,
    .steam-process-pipe::after {
        display: none;
    }

    .steam-pipe-flow {
        top: 5px;
        left: 5px;
    }

    .steam-process-pipe.active
    .steam-pipe-flow {
        animation:
            steam-flow-mobile 1.4s linear infinite;
    }

    @keyframes steam-flow-mobile {
        from {
            top: 4px;
            left: 5px;
        }

        to {
            top: 36px;
            left: 5px;
        }
    }

    .steam-process-valve {
        left: 50%;
        top: 50%;
    }

    .steam-process-port.left,
    .steam-process-port.right,
    .steam-process-port.bottom {
        display: none;
    }

    .steam-process-drop {
        width: 18px;
        height: 42px;

        flex: 0 0 42px;
    }

    .steam-process-relief {
        width: min(100%, 340px);

        grid-template-columns:
            48px
            minmax(0,1fr);

        margin-top: 0;
    }

    .steam-relief-exhaust {
        grid-column: 1 / 3;

        width: 100%;
        height: 34px;

        border-left: 0;
        border-top: 8px solid #303539;
    }

    .steam-process-footer {
        display: grid;
    }
}


@media (max-width: 540px) {

    .steam-process-head {
        display: grid;
    }

    .steam-process-live {
        margin-top: 4px;
    }
}


/* DAMPFMASCHINE · ABBLAS 2.0 */

.steam-relief-exhaust {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;

    height: 68px;

    border: 0;

    overflow: visible;
}


.steam-relief-exhaust::before {
    display: none;
}


.steam-exhaust-pipe {
    position: relative;

    width: 18px;
    height: 42px;

    border-left: 2px solid #50575c;
    border-right: 2px solid #202427;

    background:
        linear-gradient(
            90deg,
            #262b2e,
            #5b6368 45%,
            #2b3033 58%,
            #131517
        );

    box-shadow:
        2px 2px 5px rgba(0,0,0,.35);
}


.steam-exhaust-pipe::before {
    content: "";

    position: absolute;

    left: -7px;
    top: -5px;

    width: 28px;
    height: 8px;

    border: 1px solid #555d62;

    background:
        linear-gradient(
            #454c50,
            #1d2124
        );
}


.steam-exhaust-pipe span {
    position: absolute;

    left: 5px;
    top: 5px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #23272a;
}


.steam-relief-exhaust.active
.steam-exhaust-pipe {
    border-color: rgba(215,103,88,.55);
}


.steam-relief-exhaust.active
.steam-exhaust-pipe::before {
    border-color: rgba(215,103,88,.65);
}


/* sichtbarer Dampfaustritt */

.steam-exhaust-cloud {
    position: absolute;

    left: 50%;
    top: -16px;

    width: 48px;
    height: 35px;

    transform: translateX(-50%);

    pointer-events: none;
}


.steam-exhaust-cloud i {
    position: absolute;

    display: block;

    width: 16px;
    height: 16px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(220,225,228,.55),
            rgba(180,190,195,.18) 55%,
            transparent 72%
        );

    opacity: 0;
}


.steam-relief-exhaust.active
.steam-exhaust-cloud i {
    animation:
        steam-cloud-rise 2.2s ease-out infinite;
}


.steam-exhaust-cloud i:nth-child(1) {
    left: 15px;
    bottom: 0;
}


.steam-exhaust-cloud i:nth-child(2) {
    left: 5px;
    bottom: 2px;

    animation-delay: .55s !important;
}


.steam-exhaust-cloud i:nth-child(3) {
    right: 4px;
    bottom: 1px;

    animation-delay: 1.1s !important;
}


@keyframes steam-cloud-rise {
    0% {
        transform:
            translateY(8px)
            scale(.5);

        opacity: 0;
    }

    20% {
        opacity: .65;
    }

    100% {
        transform:
            translateY(-28px)
            scale(1.7);

        opacity: 0;
    }
}


.steam-relief-exhaust small {
    position: static;

    margin-top: 5px;

    color: #687176;

    font-size: .48rem;
    font-weight: 850;
    letter-spacing: .06em;

    white-space: nowrap;
}


.steam-relief-exhaust.active small {
    color: #d76758;
}


@media (max-width: 850px) {

    .steam-relief-exhaust {
        grid-column: 1 / 3;

        width: auto;
        height: 78px;

        border: 0;
    }
}


/* DAMPFMASCHINE · PROZESSSCHEMA LEGENDE */

.steam-process-legend {
    padding: 16px 20px 18px;

    border-top: 1px solid #23282c;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.01),
            transparent 50%
        );
}

.steam-process-legend-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;

    margin-bottom: 12px;
}

.steam-process-legend-head strong {
    color: var(--accent);

    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .11em;
}

.steam-process-legend-head small {
    color: var(--muted);
    font-size: .62rem;
}

.steam-process-legend-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.steam-process-legend-grid > div {
    display: grid;
    gap: 2px;

    padding: 10px 11px;

    border: 1px solid #2a3034;
    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.02),
            rgba(0,0,0,.08)
        );
}

.steam-process-legend-grid span {
    color: #aeb6bb;

    font-family: monospace;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .06em;
}

.steam-process-legend-grid strong {
    font-size: .82rem;
}

.steam-process-legend-grid small {
    color: var(--muted);
    font-size: .64rem;
    line-height: 1.35;
}

.steam-process-legend-note {
    margin-top: 12px;

    color: #697177;

    font-size: .58rem;
    font-style: italic;
    letter-spacing: .03em;
}

@media (max-width: 850px) {
    .steam-process-legend-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .steam-process-legend-head {
        display: grid;
    }

    .steam-process-legend-grid {
        grid-template-columns: 1fr;
    }
}


/* DAMPFMASCHINE · MESSSTELLEN */

.steam-process-sensor {
    position: absolute;
    z-index: 12;

    left: 50%;
    top: 28px;

    display: grid;
    place-items: center;
    align-content: center;

    width: 52px;
    height: 52px;

    border: 2px solid #4a5156;
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #171a1d 0,
            #0b0d0f 72%
        );

    box-shadow:
        0 0 0 3px #0d0f11,
        inset 0 0 10px #000;

    transform: translateX(-50%);
}


.steam-process-sensor::before {
    content: "";

    position: absolute;

    top: -12px;

    width: 1px;
    height: 11px;

    background: #4a5156;
}


.steam-process-sensor span {
    color: #899298;

    font-family: monospace;
    font-size: .48rem;
    font-weight: 900;
}


.steam-process-sensor strong {
    margin-top: 1px;

    font-size: .7rem;
    line-height: 1;
}


.steam-process-sensor small {
    margin-top: 2px;

    color: #687177;

    font-size: .38rem;
    font-weight: 850;
    letter-spacing: .05em;
}


.steam-process-pipe.active
.steam-process-sensor {
    border-color: rgba(255,145,45,.42);

    box-shadow:
        0 0 0 3px #0d0f11,
        inset 0 0 10px #000,
        0 0 10px rgba(255,145,45,.08);
}


/* Hochdruckwächter */

.steam-process-sensor--pressure {
    left: -55px;
    top: 3px;
}


.steam-process-sensor--pressure::before {
    top: 50%;
    right: -14px;
    left: auto;

    width: 13px;
    height: 1px;
}


.steam-process-drop.danger
.steam-process-sensor--pressure {
    border-color: rgba(215,103,88,.7);

    box-shadow:
        0 0 0 3px #0d0f11,
        inset 0 0 10px #000,
        0 0 12px rgba(215,103,88,.15);
}


.steam-process-drop.danger
.steam-process-sensor--pressure strong {
    color: #d76758;
}


/* Zeitindikator an der Turbine */

.steam-turbine-sensor {
    position: absolute;

    right: 8px;
    top: 8px;

    display: grid;

    padding: 4px 5px;

    border: 1px solid #343a3e;
    border-radius: 5px;

    background: rgba(7,8,9,.75);

    text-align: right;
}


.steam-turbine-sensor span {
    color: #737c82;

    font-family: monospace;
    font-size: .42rem;
    font-weight: 900;
}


.steam-turbine-sensor strong {
    font-family: monospace;
    font-size: .52rem;
}


/* Mobile: Messstellen an vertikalen Rohren */

@media (max-width: 850px) {

    .steam-process-sensor {
        left: 38px;
        top: 50%;

        transform:
            translateY(-50%);
    }

    .steam-process-sensor::before {
        top: 50%;
        left: -14px;

        width: 13px;
        height: 1px;
    }

    .steam-process-sensor--pressure {
        left: 45px;
        top: 50%;
    }
}


/* STARTSEITE · TASK DIREKT ANLEGEN */

.plan-create-wrap {
    position: relative;
}

.plan-create-wrap > .section-title {
    padding-right: 58px;
}


/* Nativer Details-Schalter, optisch wie der alte Plus-Button */

.task-create-inline {
    margin: 0 0 14px;
}

.task-create-inline > summary {
    position: absolute;
    top: 0;
    right: 0;

    display: block;

    width: 44px;
    height: 44px;
    min-height: 44px;

    padding: 0;

    border: 1px solid var(--border);
    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            var(--graphite-2),
            var(--graphite)
        );

    cursor: pointer;
    list-style: none;

    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.task-create-inline > summary::-webkit-details-marker {
    display: none;
}

.task-create-inline > summary::marker {
    content: "";
}


/* Plus komplett per CSS gezeichnet:
   keine auswählbare Textnode mehr */

.task-create-inline > summary::before,
.task-create-inline > summary::after {
    content: "";

    position: absolute;
    left: 50%;
    top: 50%;

    width: 18px;
    height: 2px;

    border-radius: 999px;

    background: var(--orange);

    pointer-events: none;

    transform: translate(-50%, -50%);
}

.task-create-inline > summary::after {
    transform:
        translate(-50%, -50%)
        rotate(90deg);
}


/* Offen: Plus wird zum Minus */

.task-create-inline[open] > summary::after {
    opacity: 0;
}

.task-create-inline[open] > summary {
    border-color: rgba(255, 139, 44, .40);
}


/* Formular klappt unter DER PLAN auf */

.task-create-panel {
    margin-bottom: 14px;
    padding: 18px;

    border: 1px solid var(--border);
    border-radius: 22px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(255,139,44,.07),
            transparent 16rem
        ),
        linear-gradient(
            145deg,
            #1b1e22,
            #121416
        );

    box-shadow:
        0 18px 45px rgba(0,0,0,.18);
}

.task-create-panel .task-form {
    margin: 0;
}


@media (max-width: 600px) {

    .plan-create-wrap > .section-title {
        padding-right: 60px;
    }

    .task-create-inline > summary {
        width: 48px;
        height: 48px;
        min-height: 48px;
    }

    .task-create-panel {
        padding: 15px;
    }
}

/* ===== Steam Schichtbuch ===== */

.steam-shift-book {
    margin-top: 28px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.012)
        );
}

.steam-shift-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.steam-shift-head > div:first-child > span {
    display: block;
    margin-bottom: 5px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: #d98b3e;
}

.steam-shift-head h2 {
    margin: 0;
    font-size: 1.45rem;
}

.steam-shift-head small {
    display: block;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.5);
}

.steam-shift-status {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 4px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.62);
}

.steam-shift-table {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
}

.steam-shift-table-head,
.steam-shift-row {
    display: grid;
    grid-template-columns:
        minmax(115px, 0.7fr)
        minmax(105px, 0.55fr)
        minmax(0, 4fr);
    align-items: center;
}

.steam-shift-table-head {
    padding: 10px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(0, 0, 0, 0.14);
    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    color: rgba(255, 255, 255, 0.36);
}

.steam-shift-row {
    position: relative;
    min-height: 58px;
    padding: 8px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.steam-shift-row:last-child {
    border-bottom: 0;
}

.steam-shift-row::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    opacity: 0;
}

.steam-shift-row--activity::before {
    opacity: 1;
    background: #d98b3e;
}

.steam-shift-row--danger::before {
    opacity: 1;
    background: #d95757;
}

.steam-shift-row--ok::before {
    opacity: 1;
    background: #61a971;
}

.steam-shift-row--info::before {
    opacity: 1;
    background: rgba(255, 255, 255, 0.22);
}

.steam-shift-row:hover {
    background: rgba(255, 255, 255, 0.022);
}

.steam-shift-row time {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.steam-shift-row time strong {
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.9);
}

.steam-shift-row time small {
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.34);
}

.steam-shift-code {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-width: 54px;
    padding: 4px 7px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.22);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.72);
}

.steam-shift-row--activity .steam-shift-code {
    border-color: rgba(217, 139, 62, 0.35);
    color: #e5a15f;
}

.steam-shift-row--danger .steam-shift-code {
    border-color: rgba(217, 87, 87, 0.4);
    color: #e87878;
}

.steam-shift-row--ok .steam-shift-code {
    border-color: rgba(97, 169, 113, 0.4);
    color: #7cc38c;
}

.steam-shift-message {
    min-width: 0;
    font-size: 0.77rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
}

.steam-shift-empty {
    padding: 32px 24px;
    text-align: center;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.42);
}

.steam-shift-footer {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.065);
    background: rgba(0, 0, 0, 0.12);
}

.steam-shift-footer span {
    font-size: 0.59rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    color: rgba(255, 255, 255, 0.35);
}

.steam-shift-footer small {
    font-size: 0.62rem;
    text-align: right;
    color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 720px) {

    .steam-shift-head {
        flex-direction: column;
        gap: 12px;
        padding: 18px;
    }

    .steam-shift-status {
        padding-top: 0;
    }

    .steam-shift-table-head {
        display: none;
    }

    .steam-shift-row {
        grid-template-columns: 75px 65px minmax(0, 1fr);
        gap: 8px;
        min-height: 62px;
        padding: 10px 14px;
    }

    .steam-shift-row time strong {
        font-size: 0.8rem;
    }

    .steam-shift-row time small {
        font-size: 0.56rem;
    }

    .steam-shift-code {
        min-width: 0;
        padding: 4px 5px;
        font-size: 0.61rem;
    }

    .steam-shift-message {
        font-size: 0.69rem;
        overflow-wrap: anywhere;
    }

    .steam-shift-footer {
        flex-direction: column;
        gap: 4px;
        padding: 10px 14px;
    }

    .steam-shift-footer small {
        text-align: left;
    }
}



/* ===== BassOS Login ===== */

.login-body {
    min-height: 100vh;
}

.login-main {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.login-card {
    width: min(100%, 420px);
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.015)
        );
    box-shadow:
        0 22px 70px rgba(0, 0, 0, 0.28);
}

.login-brand > span {
    display: block;
    margin-bottom: 10px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: #d98b3e;
}

.login-brand h1 {
    margin: 0;
    font-size: clamp(1.7rem, 7vw, 2.35rem);
    line-height: 1.05;
}

.login-brand p {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.52);
}

.login-form {
    display: grid;
    gap: 18px;
    margin-top: 30px;
}

.login-form > label:not(.login-remember) {
    display: grid;
    gap: 7px;
}

.login-form > label > span {
    font-size: 0.74rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
}

.login-form input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 11px;
    background: rgba(0, 0, 0, 0.22);
    color: inherit;
    font: inherit;
    outline: none;
}

.login-form input[type="password"]:focus {
    border-color: rgba(217, 139, 62, 0.6);
}

.login-remember {
    display: flex;
    align-items: center;
    gap: 10px;
}

.login-remember input {
    width: 18px;
    height: 18px;
}

.login-form button {
    padding: 14px 18px;
    border: 0;
    border-radius: 11px;
    background: #d98b3e;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.login-error {
    padding: 11px 13px;
    border: 1px solid rgba(220, 80, 80, 0.28);
    border-radius: 9px;
    background: rgba(220, 80, 80, 0.08);
    font-size: 0.78rem;
}

.login-note {
    display: block;
    margin-top: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.28);
}


/* ===== BassOS Tageschronik ===== */

.timeline-day-nav {
    display: grid;
    grid-template-columns: 52px 1fr 52px;
    align-items: center;
    gap: 14px;
    margin: 8px 0 30px;
}

.timeline-day-nav > a {
    display: grid;
    place-items: center;
    min-height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
    color: inherit;
    text-decoration: none;
    font-size: 1.2rem;
}

.timeline-day-nav > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.timeline-day-nav strong {
    font-size: 1.05rem;
}

.timeline-day-nav span {
    margin-top: 2px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
}

.timeline-today-link {
    margin-top: 5px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #d98b3e;
    text-decoration: none;
}

.timeline-list {
    position: relative;
}

.timeline-entry {
    display: grid;
    grid-template-columns:
        68px
        20px
        minmax(0, 1fr);
    gap: 10px;
    min-height: 76px;
}

.timeline-entry > time {
    padding-top: 16px;
    text-align: right;
    font-size: 0.72rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.42);
}

.timeline-track {
    position: relative;
}

.timeline-track::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 9px;
    width: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.timeline-track span {
    position: absolute;
    top: 20px;
    left: 5px;
    z-index: 1;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d98b3e;
    box-shadow:
        0 0 0 4px #0d0f11;
}

.timeline-entry-body {
    margin-bottom: 12px;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 14px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.012)
        );
}

.timeline-entry-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.timeline-entry-icon {
    display: grid;
    place-items: center;
    flex: 0 0 29px;
    width: 29px;
    height: 29px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.95rem;
}

.timeline-entry-head > div {
    min-width: 0;
}

.timeline-entry-head small {
    display: block;
    margin-bottom: 3px;
    font-size: 0.56rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    color: rgba(255, 255, 255, 0.34);
}

.timeline-entry-head strong {
    display: block;
    line-height: 1.28;
}

.timeline-entry-body > .badge {
    display: inline-block;
    margin-top: 9px;
}

.timeline-entry-body > p {
    margin: 8px 0 0;
    font-size: 0.72rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.48);
}

.timeline-entry--task .timeline-track span {
    background: #6eb27d;
}

.timeline-entry--reopened .timeline-track span {
    background: #d96b5f;
}

.timeline-entry--steam .timeline-track span {
    background: #6b94c9;
}

.timeline-entry--nope .timeline-track span {
    background: #d98b3e;
}

.timeline-area--arthouse .timeline-entry-body {
    border-left:
        3px solid rgba(126, 198, 230, 0.75);
}

.timeline-area--universum .timeline-entry-body {
    border-left:
        3px solid rgba(214, 65, 157, 0.75);
}

.timeline-area--private .timeline-entry-body {
    border-left:
        3px solid rgba(217, 139, 62, 0.65);
}

@media (max-width: 600px) {

    .timeline-day-nav {
        margin-bottom: 24px;
    }

    .timeline-entry {
        grid-template-columns:
            51px
            16px
            minmax(0, 1fr);
        gap: 7px;
    }

    .timeline-entry > time {
        padding-top: 17px;
        font-size: 0.64rem;
    }

    .timeline-track::before {
        left: 7px;
    }

    .timeline-track span {
        left: 3px;
    }

    .timeline-entry-body {
        padding: 12px;
    }
}


/* ===== BassOS Chronik V2 ===== */

.timeline-summary {
    display: flex;
    gap: 8px;
    margin: -8px 0 30px;
    padding: 2px 0 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

.timeline-summary::-webkit-scrollbar {
    display: none;
}

.timeline-summary-chip {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    column-gap: 7px;
    flex: 0 0 auto;
    min-width: 96px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.025);
}

.timeline-summary-chip > span {
    grid-row: 1 / 3;
    align-self: center;
    font-size: 1rem;
}

.timeline-summary-chip > strong {
    font-size: 0.85rem;
    line-height: 1;
}

.timeline-summary-chip > small {
    margin-top: 4px;
    white-space: nowrap;
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.4);
}

.timeline-summary-chip--warn {
    border-color: rgba(217, 107, 95, 0.22);
}

.timeline-entry--calendar .timeline-entry-body {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.018)
        );
}

.timeline-entry--calendar .timeline-entry-icon {
    background: rgba(255, 255, 255, 0.075);
}

.timeline-calendar-state {
    margin-left: 5px;
    padding: 2px 5px;
    border: 1px solid rgba(217, 139, 62, 0.25);
    border-radius: 5px;
    color: #d98b3e;
    font-size: 0.5rem;
    letter-spacing: 0.07em;
}

.timeline-entry--quick {
    min-height: 60px;
}

.timeline-entry--quick > time {
    padding-top: 12px;
}

.timeline-entry--quick .timeline-track span {
    top: 16px;
}

.timeline-entry--quick .timeline-entry-body {
    margin-bottom: 8px;
    padding: 9px 12px;
}

.timeline-entry--quick .timeline-entry-head {
    align-items: center;
}

.timeline-entry--quick .timeline-entry-icon {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
}

.timeline-entry--quick .timeline-entry-head small {
    display: none;
}

.timeline-entry--quick .timeline-entry-body > p {
    margin-top: 4px;
}

@media (max-width: 600px) {

    .timeline-summary {
        margin-bottom: 24px;
        margin-right: -16px;
        padding-right: 16px;
    }

    .timeline-summary-chip {
        min-width: 88px;
        padding: 9px 10px;
    }
}


/* ===== Chronik V2 Feinschliff ===== */

.timeline-entry--task,
.timeline-entry--reopened {
    min-height: 68px;
}

.timeline-entry--task .timeline-entry-body,
.timeline-entry--reopened .timeline-entry-body {
    padding-top: 11px;
    padding-bottom: 11px;
}

.timeline-entry--task .timeline-entry-body > p,
.timeline-entry--reopened .timeline-entry-body > p {
    margin-top: 5px;
}


/* ===== Chronik Tagesfazit ===== */

.timeline-day-note {
    position: relative;
    margin: -6px 0 32px;
    padding: 15px 17px 16px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-left: 3px solid #d98b3e;
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            rgba(217, 139, 62, 0.055),
            rgba(255, 255, 255, 0.018)
        );
}

.timeline-day-note-kicker {
    display: block;
    margin-bottom: 6px;
    font-size: 0.56rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    color: #d98b3e;
}

.timeline-day-note strong {
    display: block;
    font-size: 1rem;
    line-height: 1.25;
}

.timeline-day-note p {
    margin: 6px 0 0;
    max-width: 760px;
    font-size: 0.76rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.55);
}

.timeline-day-note--productive {
    border-left-color: #6eb27d;
}

.timeline-day-note--busy {
    border-left-color: #d98b3e;
}

.timeline-day-note--leisure {
    border-left-color: #6b94c9;
}

.timeline-day-note--mixed {
    border-left-color: #d96b5f;
}

.timeline-day-note--quiet {
    border-left-color: rgba(255, 255, 255, 0.22);
}

@media (max-width: 600px) {

    .timeline-day-note {
        margin-bottom: 25px;
        padding: 13px 14px;
    }

    .timeline-day-note p {
        font-size: 0.72rem;
    }
}


/* ===== BassOS Chronik Wochenansicht ===== */

.timeline-view-switch {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin: -14px 0 24px;
}

.timeline-view-switch a,
.timeline-view-switch span {
    padding: 5px 11px;
    border-radius: 8px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.timeline-view-switch a {
    color: rgba(255, 255, 255, 0.42);
    text-decoration: none;
}

.timeline-view-switch span {
    background: rgba(217, 139, 62, 0.12);
    color: #d98b3e;
}

.timeline-week-grid {
    display: grid;
    gap: 10px;
}

.timeline-week-day {
    display: block;
    padding: 15px 17px;
    border: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 15px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.012)
        );
    color: inherit;
    text-decoration: none;
}

.timeline-week-day--today {
    border-color: rgba(217, 139, 62, 0.34);
    box-shadow:
        inset 3px 0 0 #d98b3e;
}

.timeline-week-day--future {
    opacity: 0.48;
}

.timeline-week-day-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.timeline-week-day-head small {
    display: block;
    margin-bottom: 3px;
    font-size: 0.56rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
}

.timeline-week-day-head strong {
    font-size: 0.95rem;
}

.timeline-week-day-head > span {
    display: grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding: 0 7px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.045);
    font-size: 0.68rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.55);
}

.timeline-week-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 11px;
}

.timeline-week-mini span {
    padding: 4px 7px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.035);
    font-size: 0.61rem;
    color: rgba(255, 255, 255, 0.52);
}

.timeline-week-note {
    margin-top: 12px;
}

.timeline-week-note strong {
    display: block;
    font-size: 0.82rem;
}

.timeline-week-note p {
    margin: 4px 0 0;
    font-size: 0.7rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.45);
}

@media (min-width: 850px) {

    .timeline-week-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .timeline-week-day:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {

    .timeline-week-day {
        padding: 13px 14px;
    }

    .timeline-week-note p {
        font-size: 0.68rem;
    }
}


/* ===== Quick Events V2 ===== */

.machine-order-button {
    min-width: 34px;
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
}

.machine-order-button:hover:not(:disabled) {
    border-color: rgba(217, 139, 62, 0.35);
    color: #d98b3e;
}

.machine-order-button:disabled {
    opacity: 0.22;
    cursor: default;
}

@media (max-width: 600px) {

    .machine-quick-event-actions {
        flex-wrap: wrap;
    }

    .machine-order-button {
        min-width: 38px;
    }
}


/* ===== Maschinenraum Störungsprotokoll ===== */

.history-entry--resolved .history-icon {
    background: rgba(110, 178, 125, 0.13);
    color: #6eb27d;
}

.history-entry--resolved .history-text strong {
    color: rgba(255, 255, 255, 0.82);
}

.history-entry--resolved .history-text > span {
    color: rgba(255, 255, 255, 0.42);
}

.history-entry--open .history-icon {
    background: rgba(217, 139, 62, 0.16);
    color: #d98b3e;
}

.history-entry--open .history-text strong {
    color: #f0c08a;
}


/* ===== BassOS Today Engine ===== */

.today-briefing-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.today-brief-card {
    position: relative;
    min-height: 118px;
    padding: 16px 17px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 16px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.012)
        );
}

.today-brief-card--now {
    border-left:
        3px solid #d98b3e;
}

.today-brief-kicker {
    display: block;
    margin-bottom: 8px;
    font-size: 0.56rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    color: #d98b3e;
}

.today-brief-card > strong {
    display: block;
    font-size: 1rem;
    line-height: 1.3;
}

.today-brief-card > p {
    margin: 7px 0 0;
    font-size: 0.74rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.5);
}

.today-brief-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 8px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
}

.today-reality {
    grid-column: 1 / -1;
    min-height: auto;
}

.today-reality--good {
    border-left:
        3px solid #6eb27d;
}

.today-reality--warn {
    border-left:
        3px solid #d98b3e;
}

.today-reality--danger {
    border-left:
        3px solid #d96b5f;
}

.today-reality--easy {
    border-left:
        3px solid #6b94c9;
}

.today-later-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 18px 0 34px;
    padding: 15px 17px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.02);
    color: inherit;
    text-decoration: none;
}

.today-later-card span {
    display: block;
    margin-bottom: 4px;
    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    color: rgba(255, 255, 255, 0.32);
}

.today-later-card strong {
    display: block;
    font-size: 0.88rem;
}

.today-later-card small {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.4);
}

.today-later-card b {
    font-size: 1.15rem;
    color: #d98b3e;
}


@media (max-width: 700px) {

    .today-briefing-grid {
        grid-template-columns: 1fr;
    }

    .today-reality {
        grid-column: auto;
    }

    .today-brief-card {
        min-height: auto;
        padding: 14px;
    }
}


/* ===== Überfällige Tasks ===== */

.today-stat-overdue > a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.today-stat-overdue:hover {
    border-color: rgba(217, 107, 95, 0.32);
}

.today-stat-overdue strong,
.plan-overdue-label {
    color: #d96b5f;
}

.plan-group-overdue {
    scroll-margin-top: 20px;
}

.plan-group-overdue .section-title > div > span {
    color: #d96b5f;
}