/*
============================================================
Datei: assets/css/index_mob.css
Mobile Hauptseite / Empfangsansicht

Ziele:
- Buchungssystem auf Handy/Tablet zuerst und gut bedienbar
- Mitarbeiter als Registerkarten statt nur Select
- Zimmerübersicht mobil als 3-Stunden-Zeitfenster mit horizontalem Scroll
- Anwesenheit kompakt anzeigen
============================================================
*/

@media (max-width: 900px) {
    html, body {
        width: 100%;
        overflow-x: hidden;
    }

    body {
        background: #f3e9e3;
        font-size: 15px;
    }

    .navbar {
        min-height: 54px;
        padding: 6px 10px;
        gap: 8px;
    }

    .logo-img {
        max-height: 42px;
        width: auto;
    }

    .menu-actions {
        gap: 8px;
        font-size: 13px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .menu-icon {
        white-space: nowrap;
    }

    .login-form {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        gap: 6px;
        margin-top: 6px;
    }

    .login-form input,
    .login-form button {
        min-height: 34px;
        font-size: 13px;
    }

    .container {
        padding: 6px;
    }

    .frontend-pin-login,
    .testmodus-box {
        margin: 6px 0 !important;
        padding: 8px !important;
        font-size: 13px;
    }

    .date-time-container {
        display: flex;
        padding: 7px 9px;
        margin: 4px 0 8px 0;
        font-size: 14px;
        border-radius: 7px;
    }

    .navigation-container {
        position: sticky;
        top: 0;
        z-index: 30;
        background: rgba(243, 233, 227, 0.96);
        padding: 6px 0;
        margin: 0 0 8px 0;
    }

    .nav-button {
        padding: 8px 10px;
        font-size: 14px;
        border-radius: 7px;
    }

    .two-columns {
        display: block;
        margin: 0;
    }

    .left-container,
    .right-container {
        width: 100%;
        max-width: none;
        margin: 0 0 8px 0;
        padding: 12px;
        border-radius: 10px;
        max-height: none;
        overflow: visible;
        box-sizing: border-box;
    }

    .left-container h2,
    .right-container h2 {
        font-size: 22px;
        margin: 0 0 10px 0;
        text-align: left;
    }

    .left-container .form-group {
        margin-bottom: 9px;
    }

    .left-container label {
        font-size: 14px;
        margin-bottom: 4px;
    }

    .left-container input[type="date"],
    .left-container input[type="text"],
    .left-container input[type="password"],
    .left-container select {
        height: 42px;
        padding: 8px 10px;
        font-size: 16px;
        border-radius: 8px;
    }

    .left-container button[type="submit"] {
        min-height: 46px;
        font-size: 17px;
        border-radius: 9px;
        margin-top: 6px;
    }

    .left-container .checkbox-label {
        align-items: flex-start;
        gap: 8px;
        font-size: 14px;
    }

    .left-container input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin-top: 1px;
        flex: 0 0 auto;
    }

    /* Mitarbeiter-Registerkarten mobil */
    .mobile-employee-tabs {
        display: flex;
        gap: 7px;
        overflow-x: auto;
        padding: 3px 0 7px 0;
        margin-top: 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .mobile-employee-tab {
        flex: 0 0 auto;
        border: 1px solid #d0a57b;
        background: #fffaf3;
        color: #6e350b;
        border-radius: 999px;
        padding: 9px 12px;
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        cursor: pointer;
        user-select: none;
    }

    .mobile-employee-tab.is-active {
        background: #9b4a12;
        color: #fff;
        border-color: #9b4a12;
    }

    .mobile-employee-tab.is-auto {
        background: #102033;
        border-color: #102033;
        color: #fff;
    }

    .mobile-employee-tab.is-auto.is-active {
        background: #006b3a;
        border-color: #006b3a;
    }

    .mobile-select-hidden {
        position: absolute !important;
        left: -9999px !important;
        width: 1px !important;
        height: 1px !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Anwesenheit kompakter auf Mobile */
    .right-container {
        max-height: 310px;
        overflow: auto;
    }

    .attendance-table {
        margin: 0;
        font-size: 13px;
    }

    .attendance-table th,
    .attendance-table td {
        padding: 6px 7px;
        font-size: 12px;
        white-space: nowrap;
    }

    .attendance-table th:nth-child(5),
    .attendance-table td:nth-child(5),
    .attendance-table th:nth-child(6),
    .attendance-table td:nth-child(6) {
        display: none;
    }

    .color-circle {
        width: 15px;
        height: 15px;
    }

    /* Zimmerübersicht: mobiles 3-Stunden-Fenster */
    .zimmer-container {
        margin: 8px 0 0 0;
        padding: 12px 10px;
        border-radius: 10px;
        overflow: hidden;
    }

    .zimmer-container h2 {
        font-size: 21px;
        margin: 0 0 8px 0;
    }

    .zimmer-timeline-box {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .timeline-header,
    .zimmer-row {
        grid-template-columns: 94px calc(var(--timeline-hours, 12) * 112px);
        min-width: calc(94px + (var(--timeline-hours, 12) * 112px));
    }

    .timeline-header {
        position: sticky;
        top: 0;
        z-index: 12;
        background: #f7eadc;
        padding-top: 2px;
    }

    .timeline-label,
    .zimmer-label {
        position: sticky;
        left: 0;
        z-index: 15;
        background: #f7eadc;
    }

    .zimmer-label {
        font-size: 13px;
        padding-right: 6px;
        white-space: normal;
        line-height: 1.05;
    }

    .timeline-hours {
        height: 23px;
        font-size: 12px;
    }

    .zimmer-row {
        margin-bottom: 8px;
    }

    .timeline-line {
        height: 42px;
        border-radius: 7px;
    }

    .termin-balken {
        top: 5px;
        height: 32px;
        min-width: 44px;
        padding: 2px 5px;
        border-radius: 7px;
    }

    .termin-name {
        font-size: 11px;
        line-height: 12px;
    }

    .termin-time {
        font-size: 9px;
        line-height: 10px;
    }

    .now-line {
        width: 2px;
    }

    .pause-balken {
        font-size: 10px;
    }

    .footer {
        margin: 10px 0;
        padding: 10px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .timeline-header,
    .zimmer-row {
        grid-template-columns: 82px calc(var(--timeline-hours, 12) * 104px);
        min-width: calc(82px + (var(--timeline-hours, 12) * 104px));
    }

    .zimmer-label {
        font-size: 12px;
    }

    .attendance-table th:nth-child(4),
    .attendance-table td:nth-child(4) {
        display: none;
    }

    .login-form {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 900px) {
    .mobile-time-window-controls {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin: 8px 0 8px;
        padding: 8px 10px;
        background: #fffaf8;
        border: 1px solid #d9b58e;
        border-radius: 10px;
    }

    .mobile-time-window-controls button {
        border: 0;
        border-radius: 8px;
        background: #9a4b10;
        color: #fff;
        padding: 8px 10px;
        font-weight: 800;
    }

    .mobile-time-window-controls strong {
        color: #4a2300;
        font-size: 14px;
        white-space: nowrap;
    }

    .zimmer-timeline-box {
        scroll-behavior: smooth;
    }
}

@media (min-width: 901px) {
    .mobile-time-window-controls {
        display: none !important;
    }
}

/* ============================================================
   DESIGN-PHASE 1 / 25.06.2026
   Mobile: gleiche Schriftlogik, weniger Scrollen, keine iPhone-Zoom-Probleme
   ============================================================ */

@media (max-width: 900px) {
    body {
        font-size: var(--fs-base);
        line-height: var(--lh-base);
    }

    .navbar {
        min-height: 52px;
        padding: 6px 10px;
        gap: 8px;
    }

    .logo-img {
        max-height: 40px;
    }

    .menu-actions,
    .navbar .menu a,
    .menu-actions a {
        font-size: var(--fs-sm);
    }

    .login-form input,
    .login-form button {
        min-height: 36px;
        font-size: var(--fs-md);
    }

    .container {
        padding: 6px;
    }

    .frontend-pin-login,
    .testmodus-box {
        margin: 6px 0 !important;
        padding: 8px 10px !important;
        font-size: var(--fs-sm) !important;
    }

    .date-time-container {
        padding: 7px 10px;
        margin: 4px 0 7px;
        border-radius: var(--radius-md);
        font-size: var(--fs-sm);
        line-height: 1.15;
    }

    .navigation-container {
        padding: 5px 0;
        margin: 0 0 7px;
        gap: 6px;
    }

    .nav-button {
        min-height: 34px;
        padding: 7px 11px;
        font-size: var(--fs-sm);
    }

    .left-container,
    .right-container {
        margin: 0 0 8px;
        padding: 10px;
        border-radius: var(--radius-md);
    }

    .left-container h2,
    .right-container h2,
    .zimmer-container h2 {
        margin: 0 0 8px;
        font-size: var(--fs-lg);
        text-align: left;
    }

    .left-container .form-group {
        margin-bottom: 8px;
    }

    .left-container label,
    .left-container .checkbox-label {
        font-size: var(--fs-sm);
    }

    .left-container input[type="date"],
    .left-container input[type="text"],
    .left-container input[type="password"],
    .left-container select {
        height: 40px;
        padding: 7px 10px;
        font-size: var(--fs-md);
        border-radius: var(--radius-sm);
    }

    .left-container button[type="submit"] {
        min-height: 42px;
        margin-top: 4px;
        font-size: var(--fs-md);
        border-radius: 999px;
    }

    .mobile-employee-tabs {
        gap: 6px;
        padding: 2px 0 6px;
        margin-top: 4px;
    }

    .mobile-employee-tab {
        padding: 8px 11px;
        font-size: var(--fs-sm);
    }

    .right-container {
        max-height: 300px;
    }

    .attendance-table th,
    .attendance-table td {
        padding: 6px 7px;
        font-size: var(--fs-xs);
    }

    .zimmer-container {
        margin: 8px 0 0;
        padding: 10px 8px;
        border-radius: var(--radius-md);
    }

    .timeline-header,
    .zimmer-row {
        grid-template-columns: 88px calc(var(--timeline-hours, 12) * 104px);
        min-width: calc(88px + (var(--timeline-hours, 12) * 104px));
    }

    .timeline-header {
        background: var(--color-surface);
    }

    .timeline-label,
    .zimmer-label {
        background: var(--color-surface);
    }

    .zimmer-label {
        font-size: var(--fs-xs);
        line-height: 1.05;
    }

    .timeline-hours {
        height: 20px;
        font-size: var(--fs-xs);
    }

    .zimmer-row {
        margin-bottom: 6px;
    }

    .timeline-line {
        height: 38px;
    }

    .termin-balken {
        top: 4px;
        height: 30px;
        min-width: 42px;
        padding: 2px 5px;
    }

    .termin-name {
        font-size: 10px;
        line-height: 11px;
    }

    .termin-time {
        font-size: 9px;
        line-height: 10px;
    }

    .mobile-time-window-controls {
        margin: 6px 0;
        padding: 7px 9px;
        border-radius: var(--radius-md);
    }

    .mobile-time-window-controls button {
        min-height: 34px;
        padding: 7px 10px;
        font-size: var(--fs-sm);
        border-radius: var(--radius-sm);
    }

    .mobile-time-window-controls strong {
        font-size: var(--fs-sm);
    }

    .footer {
        margin: 8px 0 0;
        padding: 9px;
        font-size: var(--fs-xs);
    }
}

@media (max-width: 480px) {
    .timeline-header,
    .zimmer-row {
        grid-template-columns: 78px calc(var(--timeline-hours, 12) * 96px);
        min-width: calc(78px + (var(--timeline-hours, 12) * 96px));
    }

    .zimmer-label {
        font-size: 11px;
    }
}

/* ==========================================================
   Mobile: Mitarbeiterauswahl wieder als Dropdown
   ========================================================== */
@media screen and (max-width:680px){

    /* Durch JavaScript erzeugte Mitarbeiter-Tabs ausblenden */
    .mobile-employee-tabs,
    .mobile-employee-tab,
    .employee-chip-container{
        display:none !important;
    }

    /* Original-Auswahllisten wieder vollständig sichtbar machen */
    #bookingEmployee,
    #bookingEmployee2,
    #bookingEmployee.mobile-select-hidden,
    #bookingEmployee2.mobile-select-hidden{
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;

        position:static !important;
        left:auto !important;
        top:auto !important;

        width:100% !important;
        max-width:100% !important;
        height:42px !important;
        min-height:42px !important;

        padding:7px 10px !important;
        box-sizing:border-box !important;

        pointer-events:auto !important;
        z-index:auto !important;
    }

    /* Sauberer Abstand zur Wunsch-Mitarbeiter-Auswahl */
    .buchung-kunde-card .wunsch-ma-group{
        margin-top:8px !important;
    }
}


/* ==========================================================
   Mobile Anwesenheit – 2-spaltige Mitarbeiterkarten
   Zeigt: Farbe, Name, nächstmöglicher Termin, nächster Termin
   ========================================================== */
@media screen and (max-width:680px){

    .right-container{
        max-height:none !important;
        overflow:visible !important;
    }

    .attendance-table{
        display:block !important;
        width:100% !important;
        min-width:0 !important;
        border:0 !important;
        background:transparent !important;
    }

    .attendance-table thead{
        display:none !important;
    }

    .attendance-table tbody{
        display:grid !important;
        grid-template-columns:repeat(2, minmax(0,1fr)) !important;
        gap:8px !important;
        width:100% !important;
    }

    .attendance-table tbody tr{
        display:grid !important;
        grid-template-columns:22px minmax(0,1fr) !important;
        grid-template-areas:
            "color name"
            "free  free"
            "next  next";
        align-items:center !important;
        gap:4px 7px !important;

        width:100% !important;
        min-width:0 !important;
        box-sizing:border-box !important;

        padding:10px !important;
        border:1px solid #e2c09f !important;
        border-radius:12px !important;
        background:#fffaf6 !important;
        box-shadow:0 2px 7px rgba(74,35,0,.05) !important;
    }

    .attendance-table tbody td{
        display:block !important;
        width:auto !important;
        min-width:0 !important;
        padding:0 !important;
        border:0 !important;
        background:transparent !important;
        white-space:normal !important;
        text-align:left !important;
        box-sizing:border-box !important;
    }

    /* Farbe */
    .attendance-table tbody td:nth-child(1){
        grid-area:color;
        align-self:start;
        padding-top:2px !important;
    }

    /* Name */
    .attendance-table tbody td:nth-child(2){
        grid-area:name;
        color:#3f1d00 !important;
        font-size:14px !important;
        line-height:1.15 !important;
        font-weight:900 !important;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap !important;
    }

    /* Kunden und Arbeitszeit mobil ausblenden */
    .attendance-table tbody td:nth-child(3),
    .attendance-table tbody td:nth-child(4){
        display:none !important;
    }

    /* Nächstmöglicher Termin */
    .attendance-table tbody td:nth-child(5){
        grid-area:free;
        margin-top:4px;
        padding-top:7px !important;
        border-top:1px solid #edd8c6 !important;
        color:#1c5c34 !important;
        font-size:12px !important;
        line-height:1.25 !important;
        font-weight:800 !important;
    }

    .attendance-table tbody td:nth-child(5)::before{
        content:'Frei ab';
        display:block;
        margin-bottom:2px;
        color:#765037;
        font-size:10px;
        line-height:1.1;
        font-weight:900;
        text-transform:uppercase;
        letter-spacing:.25px;
    }

    /* Nächster Termin mit Dauer */
    .attendance-table tbody td:nth-child(6){
        grid-area:next;
        color:#51321c !important;
        font-size:11px !important;
        line-height:1.25 !important;
    }

    .attendance-table tbody td:nth-child(6)::before{
        content:'Nächster Termin';
        display:block;
        margin-bottom:2px;
        color:#765037;
        font-size:10px;
        line-height:1.1;
        font-weight:900;
        text-transform:uppercase;
        letter-spacing:.25px;
    }

    .attendance-table .color-circle{
        width:16px !important;
        height:16px !important;
        margin:0 !important;
        box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 1px 3px rgba(0,0,0,.22);
    }
}

@media screen and (max-width:390px){
    .attendance-table tbody{
        gap:7px !important;
    }

    .attendance-table tbody tr{
        padding:9px !important;
        grid-template-columns:19px minmax(0,1fr) !important;
        gap:4px 6px !important;
    }

    .attendance-table tbody td:nth-child(2){
        font-size:13px !important;
    }

    .attendance-table tbody td:nth-child(5){
        font-size:11.5px !important;
    }

    .attendance-table tbody td:nth-child(6){
        font-size:10.5px !important;
    }

    .attendance-table .color-circle{
        width:14px !important;
        height:14px !important;
    }
}


/* ==========================================================
   Mobile Timeline – Kundennummer und Name sauber trennen
   ========================================================== */
@media screen and (max-width:680px){

    /*
     * Der Terminblock selbst bekommt kein großes linkes Padding mehr.
     * Stattdessen reserviert .termin-content zuverlässig den Platz
     * für die runde Kundennummer.
     */
    .termin-balken{
        padding:3px 4px !important;
    }

    .termin-content{
        position:relative !important;
        display:block !important;
        width:100% !important;
        height:100% !important;
        min-width:0 !important;
        padding-left:18px !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
    }

    .termin-nummer{
        position:absolute !important;
        left:1px !important;
        top:50% !important;
        transform:translateY(-50%) !important;

        width:13px !important;
        height:13px !important;
        min-width:13px !important;

        border-width:1px !important;
        font-size:7px !important;
        line-height:1 !important;

        z-index:3 !important;
    }

    .termin-text{
        position:relative !important;
        z-index:2 !important;
        display:flex !important;
        flex-direction:column !important;
        justify-content:center !important;
        width:100% !important;
        height:100% !important;
        min-width:0 !important;
        overflow:hidden !important;
    }

    .termin-name{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        padding:0 !important;

        font-size:9px !important;
        line-height:9.5px !important;
        font-weight:900 !important;

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

    .termin-time{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        margin:1px 0 0 !important;
        padding:0 !important;

        font-size:7.5px !important;
        line-height:8px !important;

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

@media screen and (max-width:390px){
    .termin-content{
        padding-left:17px !important;
    }

    .termin-nummer{
        width:12px !important;
        height:12px !important;
        min-width:12px !important;
        font-size:6.5px !important;
    }

    .termin-name{
        font-size:8.5px !important;
    }

    .termin-time{
        font-size:7px !important;
    }
}


/* ==========================================================
   Mobile Zimmerübersicht V7
   - Zimmernamen scrollen nach links aus dem Bild
   - keine Überlagerung der Terminbalken
   - Wunsch-Stern wird per PHP hinter dem Namen ausgegeben
   ========================================================== */
@media screen and (max-width:680px){

    /*
     * Die komplette Zimmerzeile bleibt eine echte Timeline.
     * Zimmername und Zeitachse befinden sich im selben horizontalen
     * Scrollbereich. Beim Scrollen nach rechts verschwindet der
     * Zimmername deshalb sauber nach links.
     */
    .timeline-label,
    .zimmer-label{
        position:relative !important;
        left:auto !important;
        z-index:1 !important;
        box-shadow:none !important;
    }

    .zimmer-label{
        background:#f7eadc !important;
        padding:0 4px 0 1px !important;
        font-size:10px !important;
        line-height:1.05 !important;
        white-space:normal !important;
        overflow:visible !important;
    }

    /*
     * Die Zimmer-Spalte bleibt kompakt, damit beim Start ausreichend
     * Platz für die Terminbalken vorhanden ist.
     */
    .timeline-header,
    .zimmer-row{
        grid-template-columns:64px calc(var(--timeline-hours, 12) * 92px) !important;
        min-width:calc(64px + (var(--timeline-hours, 12) * 92px)) !important;
    }

    /*
     * Termintexte etwas ruhiger und besser lesbar.
     * Die Kundennummer bleibt links als eigener Badge.
     */
    .termin-balken{
        height:32px !important;
        padding:3px 4px !important;
    }

    .termin-content{
        padding-left:18px !important;
    }

    .termin-name{
        font-size:9.5px !important;
        line-height:10px !important;
        font-weight:900 !important;
    }

    .termin-time{
        margin-top:1px !important;
        font-size:7.5px !important;
        line-height:8px !important;
        opacity:.92 !important;
    }

    .termin-nummer{
        width:13px !important;
        height:13px !important;
        min-width:13px !important;
        font-size:7px !important;
    }
}

@media screen and (max-width:390px){
    .timeline-header,
    .zimmer-row{
        grid-template-columns:58px calc(var(--timeline-hours, 12) * 88px) !important;
        min-width:calc(58px + (var(--timeline-hours, 12) * 88px)) !important;
    }

    .zimmer-label{
        font-size:9.5px !important;
    }

    .termin-name{
        font-size:9px !important;
    }
}


/* 11.08.2026: Navbar/PIN-Trennung auch mobil erzwingen */
@media (max-width: 900px) {
    html, body {
        margin: 0 !important;
        padding: 0 !important;
    }

    body > .navbar:first-child {
        width: 100%;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .frontend-pin-login {
        width: 100%;
        margin: 6px 0 !important;
    }
}
\n\n/* ==========================================================\n   04.09.2026 – Mobile Mitarbeiterübersicht: echtes 3-Stunden-Fenster\n   ========================================================== */\n@media (max-width: 900px) {\n    /* Kein alter horizontaler Tages-Scroller mehr. */\n    .zimmer-timeline-box {\n        overflow-x: hidden !important;\n        max-width: 100%;\n    }\n\n    /* Alte mobile feste Stundenbreiten neutralisieren. */\n    .timeline-header,\n    .zimmer-row,\n    .mitarbeiter-row {\n        min-width: 0 !important;\n        width: 100% !important;\n        overflow: hidden;\n    }\n\n    .timeline-header {\n        grid-template-columns: 92px minmax(0, 1fr) !important;\n    }\n\n    .zimmer-row,\n    .mitarbeiter-row {\n        grid-template-columns: 92px minmax(0, 1fr) !important;\n    }\n\n    /* Ganze 12-h-Achse auf 4x Breite = sichtbar sind exakt 3 h.\n       Der Faktor kommt dynamisch aus index_mobile.js und funktioniert\n       auch bei abweichenden Oeffnungszeiten. */\n    .timeline-header .timeline-hours,\n    .zimmer-row .timeline-line,\n    .mitarbeiter-row .timeline-line {\n        width: calc(var(--mobile-window-scale, 4) * 100%) !important;\n        max-width: none !important;\n        transform: translateX(calc(var(--mobile-window-shift, 0) * -100%));\n        transform-origin: left center;\n    }\n\n    /* Linke Bezeichnung bleibt beim Verschieben sauber sichtbar. */\n    .timeline-label,\n    .zimmer-label,\n    .mitarbeiter-label {\n        position: relative;\n        z-index: 8;\n        background: var(--color-surface, #fff8ef);\n    }\n\n    /* Keine Ellipsen im Termin. Raum/Nummer haben Vorrang. */\n    .is-mitarbeiter-view .ma-termin-balken .termin-name {\n        overflow: hidden !important;\n        text-overflow: clip !important;\n        white-space: nowrap;\n    }\n\n    .is-mitarbeiter-view .ma-termin-balken .termin-time {\n        overflow: hidden !important;\n        text-overflow: clip !important;\n        white-space: nowrap;\n    }\n\n    /* 30-Minuten-Termine: Nummer + Raum, Zeit nur im Infokasten. */\n    .is-mitarbeiter-view .ma-termin-balken.is-ultra-compact .termin-time {\n        display: none !important;\n    }\n\n    .is-mitarbeiter-view .ma-termin-balken.is-ultra-compact .termin-name {\n        font-size: 10px;\n        line-height: 12px;\n    }\n}\n\n@media (max-width: 390px) {\n    .timeline-header,\n    .zimmer-row,\n    .mitarbeiter-row {\n        grid-template-columns: 82px minmax(0, 1fr) !important;\n    }\n}\n