/* =====================
   HAUPTMENUE
   ===================== */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
}

html {
    font-size: 20px;
}

body {
    margin: 0;
    padding: 12px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background: url('../images/background-portrait.png') center / cover no-repeat fixed;
    overflow: hidden;
    font-family: 'Orbitron', sans-serif;
    line-height: 1.2;
}

h1 {
    position: absolute;
    top: 20px;
    left: 30px;
    font-size: 1.4rem;
    text-align: center;
    margin: 10px 10px;
    color: antiquewhite;
}

/* =====================
   Login Page
   ===================== */
.login-error {
    color: #ff6b6b;
    font-size: .9rem;
    margin-top: 8px;
    display: none;
    text-align: center;
}

.logout-fab {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 3000;
}

#logoutBtn {
    pointer-events: auto;
    width: 42px;
    height: 42px;
    padding-left: 14px;
    border-radius: 50%;
    background: rgba(30, 30, 30, .85);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .15);
}

.form-row {
    margin: 0;
}

.form-row label {
    display: block;
    font-size: .75rem;
    opacity: .75;
    margin: 2px 6px;
}

.readonly-value {
    margin: 2px;
    width: 95%;
    padding: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: .9rem;
}

/* =====================
   Big Button Menu
   ===================== */
.menu {
    position: fixed;
    inset: 0;
}

.btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px)));
    padding: 0;
    background-color: transparent;
}

.edit-fab {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 3000;
}

/* Schloss */
.edit-toggle {
    width: 42px;
    height: 42px;
    padding-left: 14px;
    border-radius: 50%;
    background: rgba(30, 30, 30, .85);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .15);
}

/* Add-Button: startet “im Schloss” (unsichtbar) */
.edit-add {
    position: absolute;
    right: 0;
    bottom: 0;

    width: 42px;
    height: 42px;
    border-radius: 50%;

    background: rgba(30, 30, 30, .85);
    box-shadow: 0 0 0 2px rgba(255, 180, 0, 0.7);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .15);

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

    opacity: 0;
    pointer-events: none;

    /* “aus dem Schloss” */
    transform: translateY(0) scale(.9) rotate(-8deg);
    transition: transform 220ms ease, opacity 180ms ease;
}

/* Wenn EditMode ON -> Add schwingt nach oben raus */
.edit-toggle.is-on~.edit-add {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-64px) scale(1) rotate(0deg);
    box-shadow: 0 0 0 2px rgba(255, 180, 0, 0.7);
}

/* =====================
   Bottom Floating Menu
   ===================== */
#menuContainer {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000;
    pointer-events: auto;
}

#menuButton {
    width: 64px;
    height: 64px;
    font-size: 2.2rem;
    border-radius: 50%;
    border: none;
    background: #222;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    position: relative;
    z-index: 3000;
    pointer-events: auto;
}

#menuIcons {
    position: absolute;
    left: 100%;
    /* startet rechts vom Hauptbutton */
    top: 50%;
    display: flex;
    gap: 12px;
    /* Abstand zwischen allen Unterbuttons */
    margin-left: 12px;
    /* Abstand vom Hauptbutton */
    transform: translateY(-50%) translateX(-10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#menuContainer.open #menuIcons {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}

/* Untermenü-Buttons Styling */
#menuIcons button {
    width: 40px;
    height: 40px;
    font-size: 1.6rem;
    border-radius: 50%;
    border: none;
    background: #333;
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
}

#menuButton:hover,
#menuIcons button:hover {
    filter: brightness(1.2);
}

/* =====================
   Serien als Button
   ===================== */
/* Draggable Window */
.window {
    color: antiquewhite;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
    position: fixed;
    top: 2vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(92vw, 520px);
    border-radius: 18px;

    /* Glas */
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.14) 0%,
            rgba(255, 255, 255, 0.08) 35%,
            rgba(0, 0, 0, 0.28) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* Leuchtrand */
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.45),
        0 0 18px rgba(0, 220, 255, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);

    overflow: auto;
    z-index: 2001;
}

.window.hidden {
    display: none;
}

.window-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    cursor: grab;
    user-select: none;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.window-header:active {
    cursor: grabbing;
}

.window-header button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    /* wichtig wegen globalem button padding */
    border: none;
    /* optional, passt zu deinem Glas-Look */
    line-height: 1;
    border-radius: 10px;
    background: rgba(255, 255, 255, .12);
}

.window-header button i {
    display: block;
    line-height: 1;
}

.window-body {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px;
}

/* Series Board + Buttons */
.mx-board,
.series-board {
    position: fixed;
    inset: 0;
    pointer-events: none;
    /* Board blockt nichts */
    z-index: 1500;
}

@keyframes badgeWiggle {
    0% {
        transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--rot, 0deg));
    }

    15% {
        transform: translate(var(--tx, 0), var(--ty, 0)) rotate(calc(var(--rot, 0deg) - 3deg));
    }

    35% {
        transform: translate(var(--tx, 0), var(--ty, 0)) rotate(calc(var(--rot, 0deg) + 3deg));
    }

    55% {
        transform: translate(var(--tx, 0), var(--ty, 0)) rotate(calc(var(--rot, 0deg) - 2deg));
    }

    75% {
        transform: translate(var(--tx, 0), var(--ty, 0)) rotate(calc(var(--rot, 0deg) + 2deg));
    }

    100% {
        transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--rot, 0deg));
    }
}

.mx-badge,
.series-btn {
    touch-action: manipulation;
    pointer-events: auto;
    position: absolute;
    top: 50%;
    left: 50%;

    width: clamp(60px, var(--bw, 100px), 180px);
    height: clamp(60px, var(--bh, 100px), 180px);

    /* ✨ Unperfekte Comic-Form */
    border-radius: 55% 45% 52% 48% / 48% 52% 46% 54%;

    border: 3px solid #ff7a00;
    background: transparent;
    padding: 0;
    cursor: grab;
    touch-action: none;

    /* ✅ Position in Variablen auslagern */
    --tx: calc(-50% + (var(--x, 0) * 1vw));
    --ty: calc(-50% + (var(--y, 0) * 1vh));
    transform: translate(var(--tx), var(--ty)) scale(var(--s, 1)) rotate(var(--rot, 0deg));
    transform-origin: center;

    /* kräftiger Comic-Schatten */
    box-shadow:
        0 12px 0 rgba(0, 0, 0, .25),
        0 18px 25px rgba(0, 0, 0, .35);

    overflow: hidden;
}

/* Mittlere Logos */
.mx-badge.is-medium,
.series-btn.is-medium {
    border-radius: 50% 50% 48% 52% / 52% 48% 54% 46%;
}

/* Schmale / ikonische Logos → runder */
.mx-badge.is-round,
.series-btn.is-round {
    border-radius: 60% 40% 58% 42% / 60% 40% 58% 42%;
}

/* Optional: fast Kreis */
.mx-badge.is-circle,
.series-btn.is-circle {
    border-radius: 999px;
}

/* Wackeln beim “Arming” */
.mx-badge.arming,
.series-btn.arming {
    animation: badgeWiggle 260ms ease-in-out 1;
}

/* Optional: beim echten Drag */
.mx-badge.dragging,
.series-btn.dragging {
    cursor: grabbing;
}

/* Innenfläche (creme + diagonal heller oben) */
.mx-badge::before,
.series-btn::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;

    background:
        /* Papier-Rauschen (Fake) */
        repeating-radial-gradient(circle at 30% 20%,
            rgba(255, 255, 255, .04),
            rgba(255, 255, 255, .04) 1px,
            rgba(255, 255, 255, 0) 2px),
        /* Marker-Verlauf */
        linear-gradient(135deg,
            #fff6d6 0%,
            #f7e6b0 40%,
            #e7c97c 100%);

    box-shadow:
        inset 0 -6px 10px rgba(0, 0, 0, .18),
        inset 0 6px 12px rgba(255, 255, 255, .45);

    pointer-events: none;
}

/* optional: kleiner “Glanz” am Rand */
.mx-badge::after,
.series-btn::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    border: 2px solid rgba(120, 40, 0, .6);
    pointer-events: none;
}

/* Logo oben drauf */
.mx-badge__icon {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;

    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    transform: scale(0.82) rotate(var(--rot, -0.8deg));
    filter:
        drop-shadow(2px 4px 0 rgba(0, 0, 0, .35)) drop-shadow(0 6px 8px rgba(0, 0, 0, .35));
}

.mx-badge:active,
.series-btn:active {
    cursor: grabbing;
}

/* =====================
   MX-Badge für bikes
   ===================== */
.mx-badge.mx-badge--bike {
    /* eigene Limits, damit 868x769 nicht zum Quadrat gekappt wird */
    width: clamp(80px, var(--bw, 132px), 202px);
    height: clamp(70px, var(--bh, 110px), 180px);
}

.mx-badge--bike .mx-badge__icon {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
}

/* Nummern-Layer */
.mx-badge--bike .mx-num {
    position: absolute;
    transform: translate(-50%, -50%);
    text-align: center;
    white-space: nowrap;
    font-family: Impact, sans-serif;
    font-weight: 900;
    font-size: 13px;
    color: #2e2e2e;
    line-height: 1;
    pointer-events: none;
    width: 30px;
}

/* Beispielpositionen (musst du 1x feinjustieren) */
.mx-badge--bike .mx-num--front {
    top: 35px;
    right: 61.53px;
    transform: rotate(-4deg);
    z-index: 2;
    pointer-events: none;
}

.mx-badge--bike .mx-num--side {
    top: 55px;
    left: 45.5px;
    transform: rotate(32deg);
    z-index: 2;
    pointer-events: none;
}

.mx-badge--bike {
    position: absolute;
    border: none;
    /* optional */
    box-shadow: none;
    /* optional, je nach Stil */
    overflow: visible;
    /* oft besser bei freigestellten PNGs */
}

.mx-badge--bike::before,
.mx-badge--bike::after {
    display: none;
}

.mx-badge--bike .mx-grip {
    position: absolute;
    right: 60px;
    top: 15px;
    width: 110px;
    height: 70px;
    border-radius: 18px;
    pointer-events: auto;
    touch-action: none;
    z-index: 5;
    /* Debug: zum Einrichten einschalten, danach wieder aus */
    /* border: 1px solid #fff;
    background: rgba(255, 0, 0, .15); */
}

/* ================================
   Layout for Maintenance and more
   ================================ */
.mx-list {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    padding: 12px;
    z-index: 1400;
}

.item-card {
    border-radius: 16px;
    margin: 10px auto;
    padding: 12px 14px;
    width: min(92vw, 680px);

    background: rgba(0, 0, 0, .85);
    border: 1px solid rgba(255, 255, 255, .15);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .35);
    color: antiquewhite;
}

.item-card--open {
    background: rgba(79, 0, 0, 0.85);
    border: 1px solid rgba(255, 120, 120, .25);
}

.mx-done {
    float: right;
}

.mx-done-check {
    width: 22px;
    height: 22px;
    accent-color: #ff7a00;
}

.item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.item-check {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
}

.item-check input[type="checkbox"] {
    width: 22px;
    height: 22px;
}

.item-title {
    font-weight: 700;
}

.item-dates {
    float: right;
    margin: 0;
}


.item-notes {
    margin-top: 8px;
    opacity: .85;
}

.item-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.mx-copy {
    margin-right: 20px;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 4px;
    color: #666;
}

.mx-copy:hover {
    color: antiquewhite;
}

#sessionBar {
    position: fixed;
    left: 12px;
    right: 12px;
    top: 12px;
    pointer-events: auto;
}

#sessionBar button,
#sessionBar div {
    pointer-events: auto;
    color: antiquewhite;
}

/* Optional: damit Board nicht darunter verdeckt */
#mainpage-board {
    padding-bottom: 90px;
    /* Platz für SessionBar unten */
}

/* =====================
   Calendar (Scheduler)
   ===================== */
.mx-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 10px 0 2px;
    margin-top: 10px;

    /* Glas-Hintergrund, damit es nicht "über" Text schwebt */
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, .55) 30%,
            rgba(0, 0, 0, .75) 100%);
    backdrop-filter: blur(6px);
}

.mx-form-actions button {
    width: calc(95% - 4px);
    /* gleiche Breite wie Inputs */
    margin: 4px 2px;
}

.mx-cal-scroll {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    padding: 12px;
    z-index: 1400;
}

.mx-year {
    width: min(96vw, 980px);
    margin: 0 auto 18px auto;
}

.mx-year-title {
    color: antiquewhite;
    margin: 8px 8px 12px;
    font-weight: 800;
    letter-spacing: .08em;
}

.mx-month-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.mx-month {
    border-radius: 16px;
    background: rgba(0, 0, 0, .78);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .28);
    padding: 10px;
    color: antiquewhite;
}

.mx-month-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}

.mx-month-name {
    font-weight: 800;
}

.mx-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.mx-day {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
}

.mx-day.is-outside {
    opacity: .25;
}

.mx-day.is-today {
    outline: 2px solid rgba(255, 180, 0, 0.7);
}

.mx-day .mx-day-num {
    position: static !important;
    font-size: .7rem;
    line-height: 1;
    opacity: .9;
    transform: translateY(1px);
    /* optischer Ausgleich auf Mobile */
}

/* sichtbarer Terminmarker */
.mx-day.has-event .mx-dot {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--c, #ff7a00);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .35);
}

/* wenn Termin existiert aber user nicht editieren darf */
.mx-day.is-readonly {
    filter: saturate(.8);
}

/* ===== Scheduler DOT hard override ===== */
.mx-day {
    position: relative !important;
}

.mx-dot {
    position: absolute !important;
    right: 4px !important;
    bottom: 4px !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 999px !important;

    background: var(--c, #ff7a00) !important;
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;

    z-index: 9999 !important;
    pointer-events: none !important;
}

/* mehrere Dots unten rechts */
.mx-dots {
    position: absolute;
    right: 4px;
    bottom: 4px;
    display: flex;
    gap: 3px;
    z-index: 9999;
    pointer-events: none;
}

.mx-dots .mx-dot {
    position: static !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 999px !important;
    background: var(--c, #ff7a00) !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .35);
}

/* ===== Scheduler Info Window (readonly) ===== */
#scheduler-info .window-body {
    color: antiquewhite;
    max-height: 68vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* Container wird Layer-Host */
#scheduler-info {
    color: antiquewhite;
    position: relative;
    background-image: var(--bg-image, none);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    --bg-alpha: 0.35;
    --img-alpha: 0.60;
    --bg-image: none;
}

/* Bild-Layer (eigene Opacity!) */
#scheduler-info::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--bg-image);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: var(--img-alpha);
    z-index: 0;
    pointer-events: none;
}

/* Overlay-Layer */
#scheduler-info::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--bg-alpha));
    z-index: 1;
    pointer-events: none;
}

/* Content immer oben */
#scheduler-info .window-header,
#scheduler-info .window-body {
    position: relative;
    z-index: 2;
}

/* Textboxen über allem */
#scheduler-info .readonly-value,
#scheduler-info #si-url-wrap {
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, .45);
    border: 1px solid rgba(255, 255, 255, .14);
}

#scheduler-day.window {
    z-index: 2005;
}

/* DayList */
#scheduler-info.window {
    z-index: 2010;
}

/* Info darüber */
#scheduler-window.window {
    z-index: 2020;
}

/* Editor ganz oben */

#scheduler-day-list .sd-item {
    margin: 8px 2px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .55);
    border: 1px solid rgba(255, 255, 255, .14);
    color: antiquewhite;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

#scheduler-day-list .sd-item.is-readonly {
    opacity: .6;
}

#scheduler-day-list .sd-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#scheduler-day-list .sd-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

#scheduler-day-list .sd-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--c, #ff7a00);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .35);
}

.sd-item {
    position: relative;
    cursor: pointer;
}

.sd-right {
    position: relative;
}

/* Copy soll über dem Row-Klick liegen */
.sd-copy {
    position: relative;
    z-index: 5;
}

.sd-item:hover {
    filter: brightness(1.03);
}

.sd-item.is-readonly {
    cursor: default;
}

.sd-item.is-readonly:hover {
    filter: none;
}

/* ================================
   Bike Users Selection
   ================================ */
/* ========== Bike Users Layout ========== */

.bu-layout {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 12px;

    overflow: auto;
    z-index: 1400;
}

.bu-col h2 {
    color: antiquewhite;
    margin: 6px 6px 10px;
    font-size: 1rem;
}

.bu-board {
    min-height: 60vh;
    border-radius: 16px;
    background: rgba(0, 0, 0, .55);
    border: 1px solid rgba(255, 255, 255, .12);
    padding: 10px;
}

/* ========== Cards ========== */

.bu-card {
    border-radius: 14px;
    padding: 10px;
    margin: 8px 0;
    background: rgba(0, 0, 0, .70);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .28);
    color: antiquewhite;
}

.bu-img {
    width: 100%;
    height: 120px;
    border-radius: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(255, 255, 255, .06);
    margin-bottom: 8px;
}

.bu-title {
    font-weight: 800;
}

.bu-hint {
    opacity: .7;
    font-size: .8rem;
    margin-top: 4px;
}

/* Drop highlight */
.bu-bike.is-over .bu-bikehead {
    outline: 2px solid rgba(255, 180, 0, .7);
}

/* ========== Linkcard (Bike ↔ User) ========== */

.bu-linkcard {
    position: relative;
    height: 110px;
    margin: 10px 0;
    border-radius: 14px;
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(0, 0, 0, .55);
}

/* Background bike image layer (must NOT block clicks) */
.bu-linkcard-bike {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: saturate(.9) contrast(.95);

    pointer-events: none;
    /* ✅ wichtig */
    z-index: 0;
}

/* User avatar layer (also must NOT block clicks) */
.bu-linkcard-user {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 60px;
    height: 60px;
    border-radius: 999px;

    background-size: cover;
    background-position: center;
    border: 2px solid rgba(255, 255, 255, .35);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .35);

    pointer-events: none;
    /* ✅ wichtig */
    z-index: 1;
}

/* Content area (clickable controls live here) */
.bu-linkcard-main {
    position: relative;
    z-index: 2;
    padding: 14px 54px 12px 84px;
    /* left space for avatar, right space for unlink button */
}

.bu-linkcard-name {
    font-weight: 800;
    color: antiquewhite;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .7);
    margin-bottom: 10px;
}

/* Meta row: badge + role */
.bu-linkcard-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Unlink button must be clickable */
.bu-unlink {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 42px;
    height: 42px;
    border-radius: 12px;

    background: rgba(0, 0, 0, .55);
    border: 1px solid rgba(255, 255, 255, .14);
    padding: 0;

    z-index: 3;
    cursor: pointer;
}

.bu-unlink i {
    font-size: 1.3rem;
}

/* ========== Startnumber Badge Inline Edit ========== */

.bu-startbadge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .55);
    border: 1px solid rgba(255, 255, 255, .18);

    color: antiquewhite;
    font-weight: 800;
    font-size: 0.85rem;

    cursor: pointer;
    user-select: none;

    position: relative;
    z-index: 3;
    /* ✅ über layers */
}

.bu-startbadge:hover {
    background: rgba(0, 0, 0, .75);
}

.bu-startedit {
    width: 4.8em;
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(0, 0, 0, .55);

    color: antiquewhite;
    font-weight: 800;
    font-size: 0.85rem;

    outline: none;

    position: relative;
    z-index: 3;
    /* ✅ über layers */
}

/* Role select styling (optional but consistent) */
.bu-role {
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(0, 0, 0, .55);
    color: antiquewhite;
    padding: 4px 8px;
    font-weight: 700;

    position: relative;
    z-index: 3;
    /* ✅ über layers */
}

/* =====================
   Table Ansicht in z.B. maintenance_templates
   ===================== */
/* Papier-Container */
.mx-paper {
    max-width: 1100px;
    margin: 14px auto;
    padding: 10px;
}

/* Tabelle wie Wartungsblatt */
.mx-paper-table {
    width: 100%;
    border-collapse: collapse;
    border: 2px solid #111;
    background: #fff;
    font-size: 15px;
}

/* Header: leicht grau, starke Linie */
.mx-paper-table thead th {
    background: #d9d9d9;
    border-bottom: 2px solid #111;
    padding: 10px 12px;
    text-align: left;
    font-weight: 700;
    white-space: nowrap;
}

/* Zellen: klare Rasterlinien */
.mx-paper-table td {
    border-top: 1px solid #111;
    padding: 9px 12px;
    vertical-align: middle;
}

/* leichte Zebra-Optik (optional) */
.mx-paper-table tbody tr:nth-child(even) td {
    background: #f6f6f6;
}

/* Aktiv-Spalte zentrieren */
.mx-paper-table td:last-child,
.mx-paper-table th:last-child {
    text-align: center;
    width: 90px;
}

/* Klickbar im Edit Mode */
.mx-paper-row.is-clickable:hover td {
    background: #e9eefc;
    cursor: pointer;
}


/* Druckfreundlich */
@media print {
    body {
        background: #fff;
    }

    .logout-fab,
    .edit-fab,
    #menuContainer {
        display: none !important;
    }

    .mx-paper {
        max-width: none;
        padding: 0;
        margin: 0;
    }

    .mx-paper-table {
        page-break-inside: avoid;
    }
}

/* =====================
   Inputs & Buttons
   ===================== */

input,
select,
button {
    font-size: 1.0rem;
}

button {
    margin: 3px 2px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #007bff;
    color: #fff;
    border: none;
}

button.danger {
    background: #c62828;
}

button.danger:hover {
    filter: brightness(1.1);
}

.serieItem {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px;
    border-radius: 12px;
}

.serieItem button {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.series-thumb {
    width: 80px;
    height: 80px;
    object-fit: contain;
    /* proportional, nichts abgeschnitten */
    display: block;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
select {
    margin: 2px;
    width: 95%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #ccc;
}

select {
    margin: 2px;
    width: 95%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #ccc;
}

input[type="color"] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type="file"] {
    margin: 2px 2px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid #ccc;
    background: #f7f7f7;
    cursor: pointer;
    width: 95%;
}

input[type="file"]::-webkit-file-upload-button {
    background: #007bff;
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 12px;
    cursor: pointer;
}

.hidden {
    display: none;
}

/* =====================
   TABLET
   ===================== */
@media (max-width: 480px) {
    .window {
        top: 2vh;
        max-height: 70vh;
    }

    .window-body {
        padding: 10px;
    }

    .serieItem {
        padding: 6px;
    }

    #scheduler-info.window {
        top: 2vh;
    }

    input[type="text"],
    input[type="date"],
    input[type="number"],
    select {
        padding: 6px;
    }
}

/* =====================
   DESKTOP
   ===================== */

@media (min-width: 800px) {
    body {
        margin: 0;
        padding: 14px;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
        background: url('../images/background-landscape.png') center / cover no-repeat fixed;
        overflow: hidden;
        font-family: 'Orbitron', sans-serif;
        line-height: 1.4;
    }

    html {
        font-size: 16px;
    }

    .mx-day .mx-day-num {
        font-size: 1.6rem;
    }

    .window {
        top: 2vh;
        max-height: 90vh;
    }
}

/* Mobile: Monate untereinander (1 Spalte) */
@media (max-width: 700px) {
    .bu-layout {
        grid-template-columns: 1fr;
    }

    .mx-month-grid {
        grid-template-columns: 1fr;
    }

    /* Optional: Tage/Buttons größer und besser tappbar */
    .mx-days {
        gap: 8px;
    }

    .mx-day {
        border-radius: 10px;
        border-width: 1px;
    }

    .mx-day .mx-day-num {
        font-size: 1rem;
    }

    .mx-dot {
        width: 12px !important;
        height: 12px !important;
    }
}


.mbt-points,
.mbt-days {
    margin: 0px !important;
    padding: 0px 5px !important;
    width: 70px !important;
    height: 35px !important;
    font-size: 14px !important;
    text-align: right !important;
}