:root {
    --color-status-ruesten: #0756b3;
    --color-status-gutproduktion: #078517;
    --color-status-nachruesten: #ff7200;
    --color-status-stillstand: #e30613;
    --color-status-reinigung: #168e9d;
    --color-status-material: #e7a900;
    --color-status-pause: #707070;
    --color-status-auftrag-beendet: #24272b;

    --color-background: #eef2f5;
    --color-surface: #ffffff;
    --color-text: #24272b;
    --color-text-muted: #5d6670;
    --color-border: #d5dce3;
    --color-control-border: #7a8590;
    --color-focus: #0756b3;
    --color-error: #b0000b;
    --color-error-surface: #fff0f1;
    --color-success: #075f13;
    --color-success-surface: #eef9ef;
    --color-header: #031a3b;
    --color-dashboard-background: #f7f8fa;
    --color-navy: #0b2343;
    --color-card-border: #cfd5dc;

    --font-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --page-max-width: 120rem;
    --space-1: 0.5rem;
    --space-2: 0.75rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --radius-card: 1rem;
    --shadow-card: 0 0.5rem 1.5rem rgb(36 39 43 / 10%);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    color: var(--color-text);
    background: var(--color-background);
    font-family: var(--font-system);
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--color-background);
}

[hidden] {
    display: none !important;
}

button,
input,
select,
textarea {
    font: inherit;
}

:focus-visible {
    outline: 0.1875rem solid var(--color-focus);
    outline-offset: 0.1875rem;
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 0.5rem;
    left: 0.5rem;
    min-height: 3rem;
    padding: 0.7rem 1rem;
    color: var(--color-surface);
    background: var(--color-navy);
    border: 0.125rem solid var(--color-surface);
    border-radius: 0.5rem;
    font-weight: 800;
    transform: translateY(calc(-100% - 1rem));
}

.skip-link:focus-visible {
    outline-color: var(--color-surface);
    transform: none;
}

.page-shell {
    width: min(100% - 2rem, var(--page-max-width));
    margin-inline: auto;
}

.site-header {
    color: var(--color-surface);
    background: var(--color-status-auftrag-beendet);
    border-bottom: 0.25rem solid var(--color-status-ruesten);
}

.brand {
    margin: 0;
    padding-block: var(--space-3);
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
    font-weight: 800;
    letter-spacing: 0.05em;
}

.eyebrow {
    margin: 0 0 var(--space-2);
    color: var(--color-status-ruesten);
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.auth-main {
    display: grid;
    min-height: calc(100vh - 4.25rem);
    place-items: center;
    padding-block: var(--space-5);
}

.auth-card {
    width: min(100%, 32rem);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background: var(--color-surface);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.auth-card h1 {
    margin: 0 0 var(--space-4);
    font-size: clamp(1.75rem, 1.45rem + 1.5vw, 2.5rem);
    line-height: 1.15;
}

.login-form {
    display: grid;
    gap: var(--space-4);
}

.form-field {
    display: grid;
    gap: var(--space-1);
}

.form-field label {
    font-weight: 750;
}

.form-field input {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.75rem 0.875rem;
    color: var(--color-text);
    background: var(--color-surface);
    border: 0.125rem solid var(--color-control-border);
    border-radius: 0.625rem;
}

.form-field input:hover {
    border-color: var(--color-text-muted);
}

.form-field input:focus-visible {
    border-color: var(--color-focus);
}

.primary-button,
.secondary-button {
    display: inline-flex;
    min-width: 8rem;
    min-height: 3.25rem;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.25rem;
    border: 0.125rem solid transparent;
    border-radius: 0.625rem;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
}

.primary-button {
    color: var(--color-surface);
    background: var(--color-status-ruesten);
}

.primary-button:hover {
    background: #064a99;
}

.primary-button:active {
    background: #043b7c;
    transform: translateY(0.0625rem);
}

.secondary-button {
    color: var(--color-surface);
    background: var(--color-status-auftrag-beendet);
}

.secondary-button:hover {
    background: #393d42;
}

.secondary-button:active {
    background: #111315;
    transform: translateY(0.0625rem);
}

.alert {
    margin: 0 0 var(--space-4);
    padding: 0.875rem 1rem;
    border: 0.0625rem solid currentcolor;
    border-radius: 0.625rem;
    font-weight: 650;
}

.alert-error {
    color: var(--color-error);
    background: var(--color-error-surface);
}

.alert-success {
    color: var(--color-success);
    background: var(--color-success-surface);
}

.message-card .alert {
    margin-bottom: var(--space-4);
}

.text-link {
    color: var(--color-status-ruesten);
    font-weight: 750;
    text-underline-offset: 0.2em;
}

.visually-hidden {
    position: absolute !important;
    width: 0.0625rem !important;
    height: 0.0625rem !important;
    padding: 0 !important;
    margin: -0.0625rem !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.dashboard-page {
    overflow-x: hidden;
    overflow-x: clip;
    color: var(--color-navy);
    background: var(--color-dashboard-background);
}

.dashboard-shell {
    width: min(calc(100% - clamp(2rem, 4vw, 3.75rem)), var(--page-max-width));
    margin-inline: auto;
}

.dashboard-header {
    color: var(--color-surface);
    background: var(--color-header);
    border-bottom: 0;
}

.dashboard-header-inner {
    display: grid;
    min-height: 6.625rem;
    grid-template-columns: minmax(18rem, 1fr) auto 4.5rem;
    gap: clamp(1rem, 2.25vw, 2.5rem);
    align-items: center;
}

.dashboard-header .brand {
    padding: 0;
    font-size: clamp(2rem, 3.15vw, 3.125rem);
    line-height: 1;
    letter-spacing: 0.018em;
    white-space: nowrap;
}

.header-session {
    min-width: 19rem;
    text-align: right;
}

.live-clock,
.header-identity {
    display: block;
    margin: 0;
    color: var(--color-surface);
    line-height: 1.25;
}

.live-clock {
    font-size: clamp(1.125rem, 1.6vw, 1.625rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.header-identity {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: flex-end;
    margin-top: 0.25rem;
    font-size: clamp(1rem, 1.45vw, 1.45rem);
    font-weight: 650;
}

.header-logout {
    margin: 0;
}

.logout-button {
    position: relative;
    display: inline-grid;
    width: 4.5rem;
    min-width: 4.5rem;
    height: 4.5rem;
    min-height: 4.5rem;
    padding: 0.5rem;
    place-items: center;
    color: var(--color-surface);
    background: transparent;
    border: 0.125rem solid transparent;
    border-radius: 0.75rem;
    cursor: pointer;
}

.logout-button img {
    display: block;
    width: 3.5rem;
    height: 3.5rem;
}

.logout-button:hover {
    background: rgb(255 255 255 / 12%);
}

.logout-button:active {
    background: rgb(255 255 255 / 20%);
    transform: translateY(0.0625rem);
}

.logout-button:focus-visible {
    outline-color: var(--color-surface);
}

.dashboard-main {
    display: grid;
    gap: 1rem;
    padding-block: clamp(1.25rem, 1.6vw, 1.5rem);
}

.information-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.875rem, 1.45vw, 1.375rem);
}

.information-card {
    display: flex;
    min-width: 0;
    min-height: 8.125rem;
    gap: clamp(0.75rem, 1.2vw, 1.25rem);
    align-items: center;
    padding: 1rem clamp(1rem, 1.25vw, 1.25rem);
    background: var(--color-surface);
    border: 0.1rem solid var(--color-card-border);
    border-radius: 0.9rem;
    box-shadow: 0 0.25rem 0.9rem rgb(11 35 67 / 7%);
}

.information-icon {
    display: grid;
    width: clamp(3.75rem, 4.8vw, 4.75rem);
    min-width: clamp(3.75rem, 4.8vw, 4.75rem);
    height: clamp(3.75rem, 4.8vw, 4.75rem);
    place-items: center;
}

.information-icon img {
    display: block;
    width: 100%;
    height: 100%;
}

.information-copy {
    display: grid;
    min-width: 0;
    gap: 0.125rem;
}

.information-label {
    color: var(--color-text-muted);
    font-size: clamp(1rem, 1.4vw, 1.45rem);
    font-weight: 650;
    line-height: 1.2;
}

.information-value,
.status-duration {
    overflow-wrap: anywhere;
    color: var(--color-navy);
    font-size: clamp(1.2rem, 1.65vw, 1.75rem);
    font-weight: 850;
    letter-spacing: -0.015em;
    line-height: 1.12;
}

.status-duration {
    font-variant-numeric: tabular-nums;
}

.status-ruesten {
    --status-color: var(--color-status-ruesten);
}

.status-gutproduktion {
    --status-color: var(--color-status-gutproduktion);
}

.status-nachruesten {
    --status-color: var(--color-status-nachruesten);
    --status-ui-color: #9b4300;
    --status-text-color: #9b4300;
    --status-on-color: var(--color-surface);
}

.status-stillstand {
    --status-color: var(--color-status-stillstand);
}

.status-reinigung {
    --status-color: var(--color-status-reinigung);
    --status-badge-color: #0f6d78;
}

.status-material {
    --status-color: var(--color-status-material);
    --status-ui-color: #715300;
    --status-text-color: #715300;
    --status-on-color: var(--color-surface);
}

.status-pause {
    --status-color: var(--color-status-pause);
}

.status-auftrag-beendet {
    --status-color: var(--color-status-auftrag-beendet);
}

.current-status-card {
    color: var(--status-color);
    border: 0.15rem solid var(--status-ui-color, var(--status-color));
    box-shadow:
        inset 0 0 0 0.08rem var(--status-color),
        0 0.25rem 0.9rem rgb(11 35 67 / 7%);
}

.current-status-card .information-value,
.current-status-card .status-duration {
    color: var(--status-ui-color, var(--status-color));
}

.current-status-icon {
    border: 0.2rem solid var(--status-color);
    background: var(--status-ui-color, var(--status-color));
    border-radius: 50%;
}

.current-status-icon img {
    width: 72%;
    height: 72%;
}

.status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 1.5vw, 1.5rem);
}

.status-button {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: clamp(11.5rem, 13.9vw, 13.3rem);
    flex-direction: column;
    gap: clamp(0.5rem, 0.8vw, 0.75rem);
    align-items: center;
    justify-content: center;
    padding: 1rem 0.75rem 0.875rem;
    color: var(--status-color);
    background: var(--color-surface);
    border: 0.18rem solid var(--status-ui-color, var(--status-color));
    border-radius: 1.1rem;
    box-shadow:
        inset 0 0 0 0.1rem var(--status-color),
        0 0.15rem 0.45rem rgb(11 35 67 / 5%);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow 120ms ease, transform 120ms ease, background-color 120ms ease;
}

.status-button.is-active {
    border-width: 0.31rem;
    box-shadow:
        inset 0 0 0 0.12rem var(--status-color),
        0 0.2rem 0.65rem rgb(11 35 67 / 12%);
}

.status-button-icon {
    display: grid;
    width: clamp(5.5rem, 7.8vw, 7.5rem);
    height: clamp(5.5rem, 7.8vw, 7.5rem);
    place-items: center;
    background: var(--status-ui-color, var(--status-color));
    border-radius: 50%;
    box-shadow: 0 0 0 0.2rem var(--status-color);
}

.status-button-icon img {
    display: block;
    width: 68%;
    height: 68%;
}

.status-button-label {
    max-width: 100%;
    color: var(--status-text-color, var(--status-color));
    font-size: clamp(1.65rem, 2.65vw, 2.55rem);
    font-weight: 850;
    line-height: 1.08;
    overflow-wrap: anywhere;
    text-align: center;
}

.status-auftrag-beendet .status-button-label {
    font-size: clamp(1.65rem, 2.15vw, 2.15rem);
}

.active-badge {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    padding: 0.3rem 0.65rem;
    color: var(--status-on-color, var(--color-surface));
    background: var(--status-badge-color, var(--status-ui-color, var(--status-color)));
    border-radius: 0.5rem;
    font-size: clamp(0.8rem, 1.25vw, 1.15rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 0.025em;
}

@media (hover: hover) {
    .status-button:not(:disabled):hover {
        background: color-mix(in srgb, var(--status-color) 5%, white);
        box-shadow:
            inset 0 0 0 0.1rem var(--status-color),
            0 0.45rem 1rem rgb(11 35 67 / 13%);
        transform: translateY(-0.125rem);
    }
}

.status-button:not(:disabled):active {
    background: color-mix(in srgb, var(--status-color) 10%, white);
    box-shadow:
        inset 0 0 0 0.1rem var(--status-color),
        0 0.12rem 0.3rem rgb(11 35 67 / 12%);
    transform: translateY(0.0625rem);
}

.status-button:focus-visible {
    outline: 0.22rem solid var(--color-navy);
    outline-offset: 0.2rem;
}

.status-button:disabled {
    cursor: not-allowed;
    background: color-mix(in srgb, var(--status-color) 3%, white);
    box-shadow: inset 0 0 0 0.1rem var(--status-color);
}

[data-status-section][aria-busy="true"] .status-button:disabled {
    cursor: progress;
}

.timeline-card {
    position: relative;
    min-width: 0;
    min-height: 11rem;
    padding: clamp(0.875rem, 1.3vw, 1.25rem) clamp(1rem, 1.8vw, 1.75rem);
    background: var(--color-surface);
    border: 0.1rem solid var(--color-card-border);
    border-radius: 0.9rem;
    box-shadow: 0 0.2rem 0.75rem rgb(11 35 67 / 6%);
}

.timeline-card h2 {
    margin: 0 0 0.35rem;
    padding-inline-end: min(22rem, 33vw);
    color: var(--color-navy);
    font-size: clamp(1.25rem, 1.75vw, 1.75rem);
    line-height: 1.2;
}

.timeline-scale {
    display: block;
    width: 100%;
    height: 1.65rem;
    overflow: visible;
}

.timeline-scale text {
    fill: var(--color-navy);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.timeline-track {
    position: relative;
    display: block;
    min-height: 1.625rem;
    overflow: hidden;
    color: #596573;
    background:
        repeating-linear-gradient(
            135deg,
            #e8edf2 0,
            #e8edf2 0.65rem,
            #f4f6f8 0.65rem,
            #f4f6f8 1.3rem
        );
    border: 0.0625rem solid #d3dae1;
    border-radius: 999px;
}

.timeline-graphic {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.timeline-segment {
    cursor: help;
}

.timeline-segment:hover {
    filter: brightness(1.08);
}

.timeline-segment:focus-visible {
    outline: 0.16rem solid var(--color-navy);
    outline-offset: 0.12rem;
    stroke: var(--color-surface);
    stroke-width: 0.18;
    filter: drop-shadow(0 0 0.08rem var(--color-navy));
}

.timeline-empty {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    padding-inline: 0.75rem;
    place-items: center;
    color: var(--color-text-muted);
    background: rgb(255 255 255 / 72%);
    font-size: 0.78rem;
    font-weight: 750;
}

.timeline-mode-note {
    position: absolute;
    top: 1rem;
    right: clamp(13rem, 16vw, 15rem);
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.timeline-mode-note::before {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    margin-right: 0.4rem;
    content: "";
    background: var(--color-status-gutproduktion);
    border-radius: 50%;
}

.timeline-details {
    position: absolute;
    z-index: 4;
    top: 0.45rem;
    right: clamp(1rem, 1.8vw, 1.75rem);
    color: var(--color-text);
}

.timeline-details summary {
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    padding: 0.55rem 0.75rem;
    color: var(--color-navy);
    background: var(--color-surface);
    border: 0.1rem solid var(--color-control-border);
    border-radius: 0.55rem;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    touch-action: manipulation;
}

.timeline-details summary::marker {
    color: var(--color-status-ruesten);
}

.timeline-details[open] > summary {
    border-color: var(--color-focus);
}

.timeline-details > ul {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    width: min(32rem, calc(100vw - 2rem));
    max-height: min(24rem, 60vh);
    margin: 0;
    padding: 0.9rem 1rem 0.9rem 2rem;
    overflow: auto;
    color: var(--color-text);
    background: var(--color-surface);
    border: 0.1rem solid var(--color-control-border);
    border-radius: 0.65rem;
    box-shadow: 0 0.75rem 2rem rgb(3 26 59 / 22%);
    font-size: 0.9rem;
}

.timeline-details > ul li + li {
    margin-top: 0.4rem;
}

.save-message {
    display: flex;
    min-height: 4rem;
    gap: 0.85rem;
    align-items: center;
    padding: 0.75rem 1.25rem;
    color: var(--color-success);
    background: var(--color-success-surface);
    border: 0.1rem solid var(--color-success);
    border-radius: 0.7rem;
}

.save-message-icon {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    place-items: center;
    background: var(--color-status-gutproduktion);
    border-radius: 50%;
}

.save-message-icon img {
    width: 100%;
    height: 100%;
    grid-area: 1 / 1;
    padding: 0.1rem;
}

.save-message p {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.6rem;
    margin: 0;
    font-size: clamp(0.95rem, 1.25vw, 1.2rem);
    line-height: 1.25;
}

.save-message strong {
    font-weight: 850;
}

.save-message p span {
    color: #315b37;
}

.save-message.is-saving {
    color: var(--color-status-ruesten);
    background: #eef5fd;
    border-color: var(--color-status-ruesten);
}

.save-message.is-saving .save-message-icon {
    background: var(--color-status-ruesten);
}

.save-message.is-saving p span {
    color: #315272;
}

.save-message.is-error {
    color: var(--color-error);
    background: var(--color-error-surface);
    border-color: var(--color-error);
}

.save-message.is-error .save-message-icon {
    background: var(--color-status-stillstand);
}

.save-message.is-error p span {
    color: #752a31;
}

.save-message.is-ended {
    color: var(--color-status-auftrag-beendet);
    background: #f0f2f4;
    border-color: var(--color-status-auftrag-beendet);
}

.save-message.is-ended .save-message-icon {
    background: var(--color-status-auftrag-beendet);
}

.save-message.is-ended p span {
    color: #4f555c;
}

.new-order-actions {
    display: flex;
    min-height: 4rem;
    gap: 1rem;
    align-items: center;
    padding: 0.75rem 1.25rem;
    color: var(--color-text);
    background: var(--color-surface);
    border: 0.1rem solid var(--color-card-border);
    border-radius: 0.7rem;
    box-shadow: 0 0.2rem 0.75rem rgb(11 35 67 / 6%);
}

.new-order-actions .secondary-button:disabled {
    color: var(--color-surface);
    background: #4b5056;
    cursor: not-allowed;
    opacity: 1;
}

.new-order-actions > span {
    color: var(--color-text-muted);
    font-weight: 650;
}

.end-order-dialog {
    width: min(calc(100% - 2rem), 34rem);
    max-width: none;
    padding: 0;
    color: var(--color-text);
    background: var(--color-surface);
    border: 0.125rem solid var(--color-status-auftrag-beendet);
    border-radius: 1rem;
    box-shadow: 0 1.5rem 4rem rgb(3 26 59 / 35%);
}

.end-order-dialog::backdrop {
    background: rgb(3 26 59 / 62%);
}

.end-order-dialog form {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: clamp(1.5rem, 4vw, 2.25rem);
    text-align: center;
}

.dialog-warning-icon {
    display: grid;
    width: 4rem;
    height: 4rem;
    place-self: center;
    place-items: center;
    padding: 0.35rem;
    background: var(--color-status-nachruesten);
    border-radius: 50%;
}

.dialog-warning-icon img {
    display: block;
    width: 100%;
    height: 100%;
}

.end-order-dialog h2 {
    margin: 0;
    color: var(--color-navy);
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.15;
}

.end-order-dialog p {
    max-width: 48ch;
    margin: 0 auto;
    color: var(--color-text-muted);
}

.dialog-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 0.5rem;
}

.danger-button {
    display: inline-flex;
    min-width: 10rem;
    min-height: 3.25rem;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.25rem;
    color: var(--color-surface);
    background: var(--color-status-stillstand);
    border: 0.125rem solid var(--color-status-stillstand);
    border-radius: 0.625rem;
    font-weight: 850;
    line-height: 1.2;
    cursor: pointer;
}

.danger-button:hover {
    background: #b8050f;
}

.danger-button:active {
    background: #8d030b;
    transform: translateY(0.0625rem);
}

@media (min-width: 68.0625rem) and (max-width: 96rem) {
    .status-material .status-button-label {
        font-size: clamp(1.75rem, 2.2vw, 2.15rem);
        white-space: nowrap;
    }
}

@media (min-width: 68.0625rem) and (max-height: 53.125rem) {
    .dashboard-header-inner {
        min-height: 5.5rem;
    }

    .dashboard-main {
        gap: 0.7rem;
        padding-block: 0.75rem;
    }

    .information-card {
        min-height: 6.5rem;
        padding-block: 0.7rem;
    }

    .information-icon {
        width: 3.75rem;
        min-width: 3.75rem;
        height: 3.75rem;
    }

    .status-grid {
        gap: 0.75rem 1rem;
    }

    .status-button {
        min-height: 9rem;
        gap: 0.35rem;
        padding-block: 0.6rem;
    }

    .status-button-icon {
        width: 4.75rem;
        height: 4.75rem;
    }

    .status-button-label,
    .status-material .status-button-label {
        font-size: clamp(1.55rem, 2.15vw, 1.95rem);
    }

    .status-auftrag-beendet .status-button-label {
        font-size: clamp(1.45rem, 1.85vw, 1.75rem);
    }

    .timeline-card {
        min-height: 8.6rem;
        padding-block: 0.65rem;
    }

    .timeline-card h2 {
        font-size: 1.35rem;
    }

    .timeline-scale {
        height: 1.35rem;
        margin-top: 1.25rem;
    }

    .timeline-scale text {
        font-size: 0.72rem;
    }

    .timeline-track {
        min-height: 1.4rem;
    }

    .save-message,
    .new-order-actions {
        min-height: 3.5rem;
        padding-block: 0.55rem;
    }
}

@media (max-width: 80rem) and (min-height: 53.1875rem) {
    .dashboard-header-inner {
        grid-template-columns: minmax(16rem, 1fr) auto 4rem;
    }

    .information-card {
        padding: 0.9rem;
    }

    .status-button {
        min-height: 11.25rem;
    }
}

@media (max-width: 68rem) {
    .information-grid,
    .status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .information-card {
        min-height: 7.5rem;
    }

    .status-button {
        min-height: 12rem;
    }

    .status-button-icon {
        width: 6.5rem;
        height: 6.5rem;
    }

    .timeline-mode-note {
        position: static;
        max-width: none;
        margin: 0 0 0.45rem;
        text-align: left;
    }

    .timeline-card h2 {
        padding-inline-end: 0;
    }

    .timeline-details {
        position: static;
        margin-top: 0.65rem;
    }

    .timeline-details > ul {
        position: static;
        width: 100%;
        max-height: 20rem;
        margin-top: 0.35rem;
    }
}

@media (max-width: 48rem) {
    .dashboard-shell {
        width: min(calc(100% - 1.5rem), var(--page-max-width));
    }

    .dashboard-header-inner {
        min-height: 7.5rem;
        grid-template-columns: minmax(0, 1fr) 3.5rem;
        grid-template-areas:
            "brand logout"
            "session session";
        gap: 0.25rem 0.75rem;
        padding-block: 0.75rem;
    }

    .dashboard-header .brand {
        grid-area: brand;
        font-size: clamp(1.45rem, 6.5vw, 2.25rem);
    }

    .header-session {
        min-width: 0;
        grid-area: session;
        text-align: left;
    }

    .live-clock {
        font-size: 1rem;
    }

    .header-identity {
        justify-content: flex-start;
        font-size: 0.95rem;
    }

    .header-logout {
        grid-area: logout;
    }

    .logout-button {
        width: 3.5rem;
        min-width: 3.5rem;
        height: 3.5rem;
        min-height: 3.5rem;
        padding: 0.35rem;
    }

    .logout-button img {
        width: 2.75rem;
        height: 2.75rem;
    }

    .information-grid {
        gap: 0.75rem;
    }

    .information-card {
        min-height: 6.75rem;
    }

    .status-button {
        min-height: 10.5rem;
    }

    .status-button-icon {
        width: 5.5rem;
        height: 5.5rem;
    }
}

@media (max-width: 36rem) {
    .information-grid,
    .status-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .information-card {
        min-height: 5.75rem;
    }

    .status-button {
        min-height: 9rem;
        gap: 0.4rem;
        padding-block: 0.65rem;
    }

    .status-button-icon {
        width: 4.65rem;
        height: 4.65rem;
    }

    .status-button-label,
    .status-material .status-button-label,
    .status-auftrag-beendet .status-button-label {
        font-size: clamp(1.35rem, 6.2vw, 1.7rem);
        white-space: normal;
    }

    .timeline-card h2 span {
        display: block;
        margin-top: 0.15rem;
    }

    .timeline-scale text:nth-of-type(even) {
        display: none;
    }

    .timeline-scale text:first-of-type,
    .timeline-scale text:last-of-type {
        display: block;
    }

    .save-message p {
        display: grid;
    }

    .new-order-actions,
    .dialog-actions {
        display: grid;
    }

    .new-order-actions .secondary-button,
    .dialog-actions button {
        width: 100%;
    }
}

@media (max-width: 22rem) {
    .dashboard-shell {
        width: min(calc(100% - 1rem), var(--page-max-width));
    }

    .dashboard-header-inner {
        grid-template-columns: minmax(0, 1fr) 3rem;
        column-gap: 0.5rem;
    }

    .dashboard-header .brand {
        font-size: clamp(1.15rem, 6.5vw, 1.35rem);
    }

    .logout-button {
        width: 3rem;
        min-width: 3rem;
        height: 3rem;
        min-height: 3rem;
    }

    .logout-button img {
        width: 2.25rem;
        height: 2.25rem;
    }

    .information-card {
        gap: 0.6rem;
        padding-inline: 0.75rem;
    }

    .information-icon {
        width: 3.25rem;
        min-width: 3.25rem;
        height: 3.25rem;
    }
}

@media (max-width: 30rem) {
    .page-shell {
        width: min(100% - 1rem, var(--page-max-width));
    }

    .auth-main {
        align-items: start;
        padding-block: var(--space-3);
    }

    .auth-card {
        padding: var(--space-4);
    }

    .primary-button,
    .secondary-button {
        width: 100%;
    }
}

/* Flexodruck-Ansicht: Die Maschine ist dekorativ, die Bedienelemente bleiben semantisches HTML. */
.dashboard-header {
    background-color: var(--color-header);
    background-image:
        linear-gradient(30deg, rgb(255 255 255 / 2.4%) 12%, transparent 12.5%, transparent 87%, rgb(255 255 255 / 2.4%) 87.5%),
        linear-gradient(150deg, rgb(255 255 255 / 2.4%) 12%, transparent 12.5%, transparent 87%, rgb(255 255 255 / 2.4%) 87.5%);
    background-position: 0 0, 1.4rem 0;
    background-size: 2.8rem 4.8rem;
}

.information-grid {
    width: min(100%, 69rem);
    margin-inline: auto;
    gap: clamp(1rem, 1.6vw, 1.5rem);
    justify-content: center;
}

.information-card {
    position: relative;
    min-height: 7.125rem;
    gap: clamp(0.7rem, 1vw, 0.95rem);
    padding-inline: clamp(0.8rem, 1vw, 1rem);
    overflow: hidden;
    background:
        linear-gradient(135deg, rgb(255 255 255 / 96%), rgb(249 250 251 / 98%)),
        var(--color-surface);
    border-color: #bfc5cb;
    border-radius: 0.35rem;
    clip-path: polygon(0.7rem 0, calc(100% - 0.7rem) 0, 100% 0.7rem, 100% calc(100% - 0.7rem), calc(100% - 0.7rem) 100%, 0.7rem 100%, 0 calc(100% - 0.7rem), 0 0.7rem);
    box-shadow: 0 0.35rem 1rem rgb(11 35 67 / 8%);
}

.information-icon {
    width: clamp(3.65rem, 4.25vw, 4.25rem);
    min-width: clamp(3.65rem, 4.25vw, 4.25rem);
    height: clamp(3.65rem, 4.25vw, 4.25rem);
}

.information-value,
.status-duration {
    font-size: clamp(1.15rem, 1.55vw, 1.6rem);
}

.information-card::after {
    position: absolute;
    inset: 0.35rem;
    z-index: -1;
    content: "";
    border: 0.0625rem solid rgb(255 255 255 / 85%);
    pointer-events: none;
}

.current-status-card {
    border-color: var(--status-ui-color, var(--status-color));
    box-shadow:
        inset 0 0 0 0.0625rem color-mix(in srgb, var(--status-color) 45%, white),
        0 0.35rem 1rem rgb(11 35 67 / 8%);
}

.press-stage {
    min-width: 0;
    padding-block: 0.35rem 0.9rem;
}

.press-assembly {
    --press-side-space: clamp(7.5rem, 10.5vw, 10rem);
    position: relative;
    min-width: 0;
    padding-inline: var(--press-side-space);
    isolation: isolate;
}

.press-decoration,
.press-decoration * {
    pointer-events: none;
}

.press-decoration {
    position: absolute;
    z-index: -1;
    inset: 0;
    overflow: hidden;
}

.press-web {
    position: absolute;
    z-index: -2;
    left: calc(var(--press-side-space) * 0.38);
    right: calc(var(--press-side-space) * 0.38);
    height: clamp(3.2rem, 5.4vw, 5.25rem);
    background:
        linear-gradient(180deg, rgb(255 255 255 / 96%), #f6f2e9 58%, #ddd8ce 100%);
    border: 0.0625rem solid #dad5cb;
    border-radius: 48% 52% 45% 55% / 28% 36% 64% 72%;
    box-shadow: 0 0.45rem 0.8rem rgb(15 25 35 / 15%);
}

.press-web-upper {
    top: 23%;
    transform: rotate(0.45deg);
}

.press-web-lower {
    top: 69%;
    transform: rotate(-0.4deg);
}

.press-roll {
    position: absolute;
    z-index: 0;
    top: 50%;
    width: clamp(6.75rem, 9.2vw, 9rem);
    height: clamp(12rem, 18.5vw, 17rem);
    transform: translateY(-50%);
}

.press-roll-left {
    left: clamp(0rem, 0.6vw, 0.6rem);
}

.press-roll-right {
    right: clamp(0rem, 0.6vw, 0.6rem);
}

.press-roll-disc {
    position: absolute;
    top: 24%;
    width: 100%;
    aspect-ratio: 1;
    background:
        radial-gradient(circle at center, #22282e 0 7%, #858a8d 7.5% 10%, #e9e5dc 10.5% 17%, transparent 17.5%),
        repeating-radial-gradient(circle at center, #fffdf7 0 0.23rem, #e8e3da 0.25rem 0.38rem, #f9f6ef 0.4rem 0.56rem);
    border: 0.1rem solid #c9c3b9;
    border-radius: 50%;
    box-shadow:
        inset -0.7rem -0.35rem 1.1rem rgb(104 99 91 / 20%),
        0 0.55rem 0.9rem rgb(11 24 38 / 20%);
}

.press-roll-disc::after {
    position: absolute;
    bottom: -41%;
    left: 50%;
    width: 0.78rem;
    height: 54%;
    content: "";
    background: linear-gradient(90deg, #1e2328, #858b90 47%, #20252a);
    border: 0.08rem solid #171b1f;
    border-radius: 0.2rem;
    box-shadow: 0 0.15rem 0.2rem rgb(0 0 0 / 25%);
    transform: translateX(-50%);
}

.press-roll-stand {
    position: absolute;
    bottom: 2%;
    left: 8%;
    width: 84%;
    height: 0.85rem;
    background: linear-gradient(180deg, #6e7479, #20252a 55%, #111417);
    border: 0.08rem solid #15191c;
    border-radius: 0.15rem;
    box-shadow: 0 0.35rem 0.5rem rgb(0 0 0 / 22%);
}

.status-grid {
    position: relative;
    z-index: 2;
    width: min(100%, 69rem);
    margin-inline: auto;
    gap: clamp(1rem, 1.55vw, 1.65rem);
    grid-auto-rows: 1fr;
}

.status-grid::before,
.status-grid::after {
    position: absolute;
    z-index: -1;
    right: -0.9rem;
    left: -0.9rem;
    height: 0.9rem;
    content: "";
    background: linear-gradient(180deg, #767d82, #242a2f 48%, #0e1114 52%, #545b60);
    border: 0.08rem solid #171b1f;
    border-radius: 0.18rem;
    box-shadow: 0 0.28rem 0.45rem rgb(0 0 0 / 23%);
}

.status-grid::before {
    top: calc(50% - 0.45rem);
}

.status-grid::after {
    bottom: -0.6rem;
}

.status-button {
    z-index: 1;
    min-height: clamp(10.75rem, 13.4vw, 12.875rem);
    gap: clamp(0.38rem, 0.65vw, 0.65rem);
    padding: 1.15rem 0.7rem 0.8rem;
    overflow: visible;
    color: var(--status-text-color, var(--status-color));
    background-color: var(--color-surface);
    background-image:
        radial-gradient(circle at 0.08rem 0.08rem, rgb(11 35 67 / 4%) 0 0.055rem, transparent 0.06rem);
    background-size: 0.65rem 0.65rem;
    border: 0.12rem solid #4f565c;
    border-top: 0.55rem solid var(--status-color);
    border-radius: 0.65rem 0.65rem 0.25rem 0.25rem;
    box-shadow:
        inset 0 0 0 0.08rem rgb(255 255 255 / 92%),
        inset 0 -0.25rem 0.35rem rgb(11 23 35 / 7%),
        0 0.68rem 0 #1f2428,
        0 0.82rem 0.28rem rgb(0 0 0 / 27%);
}

.status-button::after {
    position: absolute;
    right: 0.55rem;
    bottom: -0.76rem;
    left: 0.55rem;
    height: 0.42rem;
    content: "";
    background:
        radial-gradient(circle at 0.6rem 50%, #101316 0 0.12rem, #7d858a 0.14rem 0.2rem, transparent 0.22rem),
        radial-gradient(circle at calc(100% - 0.6rem) 50%, #101316 0 0.12rem, #7d858a 0.14rem 0.2rem, transparent 0.22rem);
}

.status-button.is-active {
    border-width: 0.12rem;
    border-top-width: 0.55rem;
    outline: 0.2rem solid var(--status-ui-color, var(--status-color));
    outline-offset: 0.1rem;
    box-shadow:
        inset 0 0 0 0.12rem color-mix(in srgb, var(--status-color) 46%, white),
        inset 0 -0.25rem 0.35rem rgb(11 23 35 / 7%),
        0 0.68rem 0 #1f2428,
        0 0.9rem 0.42rem rgb(0 0 0 / 29%);
}

.press-module-number {
    position: absolute;
    top: 0.55rem;
    left: 0;
    display: grid;
    min-width: 2.3rem;
    min-height: 2.25rem;
    padding-inline: 0.35rem;
    place-items: center;
    color: var(--color-navy);
    background: linear-gradient(145deg, #fff, #eceff1);
    border: 0.08rem solid #c5cbd0;
    border-radius: 0 0.45rem 0.45rem 0;
    box-shadow: 0 0.15rem 0.3rem rgb(11 35 67 / 10%);
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
}

.press-register-mark {
    position: absolute;
    top: 0.85rem;
    right: 0.8rem;
    width: 1.35rem;
    height: 1.35rem;
    background:
        linear-gradient(90deg, transparent 47%, #aab1b6 48% 52%, transparent 53%),
        linear-gradient(0deg, transparent 47%, #aab1b6 48% 52%, transparent 53%),
        radial-gradient(circle, transparent 0 38%, #aab1b6 40% 45%, transparent 47%);
    opacity: 0.8;
}

.status-button-icon {
    width: clamp(5.25rem, 7.25vw, 6.7rem);
    height: clamp(5.25rem, 7.25vw, 6.7rem);
}

.status-button-label {
    font-size: clamp(1.5rem, 2vw, 1.85rem);
}

.status-auftrag-beendet .status-button-label,
.status-material .status-button-label {
    font-size: clamp(1.4rem, 1.8vw, 1.65rem);
    white-space: normal;
}

.status-reinigung {
    --status-text-color: #0f6d78;
}

@media (hover: hover) {
    .status-button:not(:disabled):hover {
        background-color: color-mix(in srgb, var(--status-color) 5%, white);
        box-shadow:
            inset 0 0 0 0.1rem color-mix(in srgb, var(--status-color) 44%, white),
            inset 0 -0.25rem 0.35rem rgb(11 23 35 / 7%),
            0 0.68rem 0 #1f2428,
            0 0.95rem 0.55rem rgb(0 0 0 / 25%);
    }
}

.status-button:not(:disabled):active {
    background-color: color-mix(in srgb, var(--status-color) 10%, white);
    box-shadow:
        inset 0 0 0 0.1rem var(--status-color),
        0 0.56rem 0 #1f2428,
        0 0.65rem 0.2rem rgb(0 0 0 / 25%);
    transform: translateY(0.1rem);
}

.status-button:focus-visible {
    outline: 0.24rem solid var(--color-navy);
    outline-offset: 0.24rem;
}

.timeline-card {
    min-height: 9.5rem;
    overflow: visible;
}

.timeline-scale {
    width: calc(100% - clamp(5rem, 8vw, 7.25rem));
    margin-inline: auto;
}

.timeline-web {
    position: relative;
    padding-inline: clamp(2.5rem, 4vw, 3.625rem);
}

.timeline-track {
    min-height: 1.9rem;
    overflow: hidden;
    border-color: #bfc6cc;
    box-shadow:
        inset 0 0.12rem 0.25rem rgb(11 35 67 / 14%),
        0 0.25rem 0.45rem rgb(11 35 67 / 10%);
}

.timeline-roll {
    position: absolute;
    z-index: 3;
    top: 50%;
    width: clamp(3rem, 5.4vw, 4.7rem);
    aspect-ratio: 1.22;
    background:
        radial-gradient(circle at 50% 50%, #171c21 0 8%, #8c9194 9% 13%, #f7f3eb 14% 31%, transparent 32%),
        repeating-radial-gradient(ellipse at center, #fffdf8 0 0.18rem, #ded8ce 0.2rem 0.29rem, #f7f4ed 0.31rem 0.43rem);
    border: 0.08rem solid #c8c2b8;
    border-radius: 50%;
    box-shadow: 0 0.35rem 0.65rem rgb(11 24 38 / 18%);
    transform: translateY(-50%);
}

.timeline-roll-left {
    left: 0;
}

.timeline-roll-right {
    right: 0;
}

@media (min-width: 68.0625rem) and (max-height: 53.125rem) {
    .information-card {
        min-height: 6.25rem;
    }

    .press-stage {
        padding-block: 0.15rem 0.55rem;
    }

    .status-grid {
        gap: 0.85rem 1.1rem;
    }

    .status-button {
        min-height: 8.85rem;
        gap: 0.25rem;
        padding-block: 0.75rem 0.55rem;
    }

    .status-button-icon {
        width: 4.65rem;
        height: 4.65rem;
    }

    .status-button-label,
    .status-material .status-button-label,
    .status-auftrag-beendet .status-button-label {
        font-size: clamp(1.35rem, 1.9vw, 1.7rem);
    }

    .timeline-card {
        min-height: 8.1rem;
    }
}

@media (max-width: 68rem) {
    .information-grid {
        width: min(100%, 58rem);
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .press-assembly {
        padding-inline: 0;
    }

    .press-roll {
        display: none;
    }

    .press-web {
        right: 0;
        left: 0;
        opacity: 0.65;
    }

    .status-grid {
        width: min(100%, 52rem);
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .status-grid::before,
    .status-grid::after {
        right: 0;
        left: 0;
    }

    .status-button {
        min-height: 11.5rem;
    }
}

@media (max-width: 48rem) {
    .information-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .current-status-card {
        width: calc((100% - clamp(1rem, 1.6vw, 1.5rem)) / 2);
        grid-column: 1 / -1;
        justify-self: center;
    }

    .status-button {
        min-height: 10.25rem;
    }

    .status-button-icon {
        width: 5.25rem;
        height: 5.25rem;
    }

    .timeline-scale {
        width: calc(100% - 4.5rem);
    }

    .timeline-web {
        padding-inline: 2.25rem;
    }
}

@media (max-width: 36rem) {
    .information-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .current-status-card {
        width: 100%;
    }

    .press-decoration {
        display: none;
    }

    .status-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.15rem;
    }

    .status-grid::before,
    .status-grid::after {
        display: none;
    }

    .status-button {
        min-height: 8rem;
        flex-direction: row;
        gap: 1rem;
        padding: 0.8rem 1rem 0.8rem 3.1rem;
    }

    .status-button-icon {
        width: 4.6rem;
        min-width: 4.6rem;
        height: 4.6rem;
    }

    .status-button-label,
    .status-material .status-button-label,
    .status-auftrag-beendet .status-button-label {
        font-size: clamp(1.35rem, 6vw, 1.7rem);
        text-align: left;
    }

    .active-badge {
        top: 0.65rem;
        right: 0.65rem;
    }

    .timeline-roll {
        width: 3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}