/* Studio-Leitzentrale V23.31 – Monatskalender mit Querformatkorrektur.
   Burgermenü samt Seitenleiste wieder wie V23.29.
   Reine Darstellung, keine Berechtigungs-/Datenänderungen. */
:root{
 --nba-menu-wash:#f8edeb;
 --nba-menu-line:#ead6d2;
 --nba-menu-ink:#75585f;
 --nba-menu-selected:#fffdfc;
 --nba-menu-focus:#9c6578;
}
/* Alle bestehenden Bereichsreiter orientieren sich an der Kalender-Navigation. */
#dashboard :is(.calendar-section-nav,.customer-tabs,.finance-workspace-tabs,.push-workspace-tabs,.gallery-section-tabs){
 display:flex;align-items:stretch;flex-wrap:wrap;gap:6px;
 background:var(--nba-menu-wash);border:1px solid var(--nba-menu-line);
 border-radius:16px;padding:6px;margin-block:12px 18px;min-width:0;
}
#dashboard :is(.calendar-section-tab,.customer-tab,.finance-workspace-tab,.push-workspace-tab,.gallery-section-tab){
 appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;
 flex:1 1 0;min-width:0;min-height:48px;margin:0;padding:10px 9px;
 border:1px solid transparent;border-radius:11px;background:transparent;
 color:var(--nba-menu-ink);font:650 13px/1.35 system-ui,sans-serif;
 cursor:pointer;text-align:center;overflow-wrap:anywhere;
}
#dashboard :is(.calendar-section-tab,.customer-tab,.finance-workspace-tab,.push-workspace-tab,.gallery-section-tab):is([aria-selected="true"],.active){
 border-color:#e7d3ce;background:var(--nba-menu-selected);color:#57383f;
 box-shadow:0 2px 9px #5e333d17;font-weight:750;
}
#dashboard :is(.calendar-section-tab,.customer-tab,.finance-workspace-tab,.push-workspace-tab,.gallery-section-tab):focus-visible,
.website-quick-button:focus-visible{
 outline:3px solid var(--nba-menu-focus);outline-offset:2px;
}
/* Website-Kurznavigation bleibt im Kalender-Look.
   Sidebar, Burgermenü und mobile Fußnavigation erben wieder ihre V23.29-Stile. */
.website-quick-nav{background:var(--nba-menu-wash);border:1px solid var(--nba-menu-line);border-radius:16px;padding:6px;gap:6px;margin-block:12px 20px}
.website-quick-button{border-radius:11px;min-height:44px;border:1px solid transparent;color:var(--nba-menu-ink);background:transparent;font-weight:650;padding:10px 13px}
.website-quick-button.active,.website-quick-button[aria-current="page"]{background:var(--nba-menu-selected);border-color:#e7d3ce;color:#57383f;box-shadow:0 2px 9px #5e333d17}
/* Monatsraster: kompakte Übersicht und vollständige, nie abgeschnittene Tagesliste. */
#panel-calendar .studio-calendar:not(.calendar-list-view){display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;width:100%;min-width:0}
#panel-calendar .studio-calendar:not(.calendar-list-view) .studio-day{min-width:0;max-width:100%;min-height:100px;padding:7px 6px;gap:4px;overflow:hidden;box-sizing:border-box}
#panel-calendar .studio-calendar:not(.calendar-list-view) .studio-day-num{font-size:13px;line-height:1.2}
#panel-calendar .studio-calendar:not(.calendar-list-view) .studio-day-count{position:absolute;right:4px;top:5px;min-width:18px;height:18px;padding:0 4px;border-radius:12px;background:#795066;color:#fff;font:700 10px/18px system-ui;text-align:center}
#panel-calendar .studio-calendar:not(.calendar-list-view) .studio-event{
 display:block;width:100%;min-width:0;max-width:100%;font-size:11px;line-height:1.25;
 white-space:normal;overflow-wrap:anywhere;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
 border-radius:6px;padding:4px;box-sizing:border-box;
}
#panel-calendar .studio-calendar:not(.calendar-list-view) .studio-day.selected{outline:2px solid #795066;outline-offset:-2px}
#panel-calendar .studio-calendar:not(.calendar-list-view) .studio-more{font-weight:700;color:#664255;font-size:10px}
#panel-calendar .studio-month-day-details{margin:14px 0 22px;padding:16px;border:1px solid #e7d3ce;border-radius:16px;background:#fff9fa;min-width:0}
#panel-calendar .studio-month-day-details[hidden]{display:none!important}
#panel-calendar .studio-month-detail-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:12px}
#panel-calendar .studio-month-detail-heading h4{font-size:17px;margin:0;color:#563647}
#panel-calendar .studio-month-detail-actions{display:flex;flex-wrap:wrap;gap:7px}
#panel-calendar .studio-month-detail-actions .button{min-height:42px}
#panel-calendar .studio-month-detail-record{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:13px;margin:8px 0;background:#fff;border:1px solid #ead9de;border-left:5px solid #baa4aa;border-radius:12px;min-width:0}
#panel-calendar .studio-month-detail-record.status-bestaetigt{border-left-color:#4b9275}
#panel-calendar .studio-month-detail-record.status-geplant{border-left-color:#d4a650}
#panel-calendar .studio-month-detail-record.status-erledigt{border-left-color:#a0a0a0}
#panel-calendar .studio-month-detail-record.status-storniert{border-left-color:#cc7777}
#panel-calendar .studio-month-detail-info{min-width:0;overflow-wrap:anywhere;flex:1 1 220px}
#panel-calendar .studio-month-detail-info p{margin:4px 0 0}
#panel-calendar .studio-month-detail-record .studio-record-actions{display:flex;flex-wrap:wrap;gap:6px;flex:0 1 auto}
#panel-calendar .studio-month-detail-record .studio-record-actions .button{min-height:42px;min-width:0;white-space:normal}
@media(max-width:700px){
 #dashboard :is(.calendar-section-nav,.customer-tabs,.finance-workspace-tabs,.push-workspace-tabs,.gallery-section-tabs){gap:4px;padding:4px;border-radius:12px}
 #dashboard :is(.calendar-section-tab,.customer-tab,.finance-workspace-tab,.push-workspace-tab,.gallery-section-tab){font-size:12px;min-height:46px;padding:8px 5px}
 #panel-calendar .studio-calendar:not(.calendar-list-view){gap:3px}
 #panel-calendar .studio-calendar:not(.calendar-list-view) .studio-day{min-height:73px;padding:5px 3px;gap:2px;border-radius:8px}
 #panel-calendar .studio-calendar:not(.calendar-list-view) .studio-day-num{font-size:12px}
 #panel-calendar .studio-calendar:not(.calendar-list-view) .studio-event{font-size:9px;line-height:1.1;padding:3px 2px;-webkit-line-clamp:1}
 #panel-calendar .studio-calendar:not(.calendar-list-view) .studio-day-count{font-size:9px;top:3px;right:3px;min-width:15px;height:15px;line-height:15px;padding:0 2px}
 #panel-calendar .studio-month-day-details{padding:11px}
 #panel-calendar .studio-month-detail-record{flex-direction:column;align-items:stretch;gap:9px}
 #panel-calendar .studio-month-detail-info{flex:0 1 auto}
 #panel-calendar .studio-month-detail-record .studio-record-actions{flex:0 0 auto}
 #panel-calendar .studio-month-detail-record .studio-record-actions{width:100%;display:flex;flex-wrap:wrap}
 #panel-calendar .studio-month-detail-record .studio-record-actions .button{flex:1 1 115px}
 #panel-calendar .studio-month-detail-actions{width:100%}
 #panel-calendar .studio-month-detail-actions .button{flex:1 1 auto}
}
@media (orientation:landscape) and (max-height:560px) and (max-width:1000px){
 /* Querformat: keine feste Kalenderhöhe, Platz für echte Termine und scrollbare Bedienung. */
 #dashboard,.main-column,#panel-calendar,.calendar-subpanel{min-width:0;max-height:none;overflow:visible}
 #panel-calendar .studio-calendar:not(.calendar-list-view) .studio-day{min-height:83px}
 #panel-calendar .studio-calendar:not(.calendar-list-view) .studio-event{-webkit-line-clamp:2;font-size:10px}
 #panel-calendar .studio-month-day-details{scroll-margin-top:70px}
 #panel-calendar .studio-month-detail-record .studio-record-actions{flex:0 1 auto}
}
@media (max-width:400px){
 #panel-calendar .studio-calendar:not(.calendar-list-view) .studio-day{min-height:64px;padding:4px 2px}
 #panel-calendar .studio-calendar:not(.calendar-list-view) .studio-event{font-size:8px}
}

/* V23.31: Der Monatskalender und die Tagesliste als eine zusammengehörige Einheit. */
#panel-calendar .studio-month-workspace{min-width:0;max-width:100%;display:block;}
#panel-calendar .studio-month-workspace .studio-calendar{margin-top:0;}
#panel-calendar .studio-month-workspace .studio-month-day-details{min-width:0;}
/* In kurzen Handys gilt: sieben Wochentage, Datum und Terminanzahl im Raster;
   vollständige Namen, Leistungen und Aktionen in der Tagesliste. */
@media (orientation:landscape) and (min-width:650px) and (max-width:1024px) and (max-height:600px){
 #panel-calendar >.section-heading{display:none;}
 #panel-calendar .calendar-section-intro{margin-bottom:7px;}
 #panel-calendar .calendar-section-intro h3{font-size:17px;margin-bottom:0;}
 #panel-calendar .calendar-section-intro p{display:none;}
 #panel-calendar .calendar-section-intro .button{min-height:44px;}
 #panel-calendar .calendar-section-nav{margin:0 0 9px;}
 #panel-calendar .studio-toolbar{margin:5px 0 7px;gap:6px;}
 #panel-calendar .studio-toolbar .button{min-height:42px;}
 #panel-calendar .studio-view-toolbar{margin:5px 0 8px;padding:4px;gap:5px;}
 #panel-calendar .studio-view-toolbar button[data-studio-view]{min-height:42px;}
 #panel-calendar .studio-month-workspace{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start;gap:12px;}
 #panel-calendar .studio-calendar:not(.calendar-list-view){gap:3px;}
 #panel-calendar .studio-calendar:not(.calendar-list-view) .studio-day{min-height:47px;padding:5px 3px 3px;border-radius:7px;}
 #panel-calendar .studio-calendar:not(.calendar-list-view) .studio-day-num{font-size:12px;}
 #panel-calendar .studio-calendar:not(.calendar-list-view) .studio-event,
 #panel-calendar .studio-calendar:not(.calendar-list-view) .studio-more,
 #panel-calendar .studio-calendar:not(.calendar-list-view) .studio-closed{display:none;}
 #panel-calendar .studio-calendar:not(.calendar-list-view) .studio-day-count{top:auto;bottom:4px;right:4px;}
 #panel-calendar .studio-month-day-details{margin:0 0 16px;padding:10px;}
 #panel-calendar .studio-month-detail-heading{gap:6px;margin-bottom:8px;}
 #panel-calendar .studio-month-detail-heading h4{font-size:15px;}
 #panel-calendar .studio-month-detail-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:5px;}
 #panel-calendar .studio-month-detail-actions .button{min-width:0;padding:7px 4px;white-space:normal;font-size:11px;}
 #panel-calendar .studio-month-detail-record{display:block;padding:9px;margin:6px 0;}
 #panel-calendar .studio-month-detail-info{width:100%;font-size:12px;}
 #panel-calendar .studio-month-detail-info p{font-size:11px;}
 #panel-calendar .studio-month-detail-record .studio-record-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-top:8px;width:100%;}
 #panel-calendar .studio-month-detail-record .studio-record-actions .button{min-width:0;min-height:40px;width:100%;padding:7px 4px;font-size:11px;}
 #panel-calendar .studio-month-detail-record .studio-record-actions .button:nth-child(3):last-child{grid-column:1/-1;}
 #panel-calendar #calendar-section-appointments .studio-record{gap:8px;padding:11px;}
 #panel-calendar #calendar-section-appointments .studio-record-actions{display:flex;flex-wrap:wrap;gap:6px;}
 #panel-calendar #calendar-section-appointments .studio-record-actions .button{flex:1 1 135px;min-height:44px;}
 #panel-calendar .studio-month-day-details{scroll-margin-top:70px;overflow:visible;}
}
/* Kleine Querformatgeräte: eine Spalte ist zuverlässiger als zwei zu schmale. */
@media (orientation:landscape) and (max-width:649px) and (max-height:600px){
 #panel-calendar .studio-month-workspace{display:block;}
 #panel-calendar .studio-calendar:not(.calendar-list-view) .studio-event{display:none;}
 #panel-calendar .studio-calendar:not(.calendar-list-view) .studio-day{min-height:57px;}
 #panel-calendar .studio-month-day-details{margin-top:9px;}
}

@media (orientation:landscape) and (min-width:650px) and (max-width:1024px) and (max-height:600px){
 /* Tag/Woche erhalten die volle Breite und werden nicht neben einer leeren Karte dargestellt. */
 #panel-calendar .studio-month-workspace:has(.calendar-list-view){display:block;}
}
/* Im sehr niedrigen Handy-Querformat überdeckt die feste Fußnavigation
   bis zu ein Viertel des nutzbaren Bildschirms. Dort ist die alte
   Burgermenü-Navigation erreichbar und übernimmt vollständig. */
@media (orientation:landscape) and (max-width:860px) and (max-height:600px){
 #dashboard .studio-mobile-bottom-nav{display:none!important;}
 #dashboard{padding-bottom:24px;}
 #panel-calendar .studio-month-workspace{padding-bottom:12px;}
}
/* Querformat: Datum und Ansicht nebeneinander statt vier Toolbar-Zeilen vor
   dem Monatskalender. Die Termine beginnen dadurch wesentlich weiter oben. */
@media (orientation:landscape) and (min-width:650px) and (max-width:1024px) and (max-height:600px){
 .topbar{min-height:56px;padding-top:5px;padding-bottom:5px;margin-bottom:8px;}
 .topbar .kicker{display:none;}
 .topbar h1{font-size:20px;}
 #panel-calendar{padding:9px 12px 14px;}
 #panel-calendar .calendar-section-tab{min-height:41px;padding:7px 6px;}
 #panel-calendar .calendar-section-nav{padding:3px;margin:0 0 5px;}
 #panel-calendar .calendar-section-intro{margin-bottom:3px;min-height:38px;}
 #panel-calendar #calendar-section-calendar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:8px;align-items:center;}
 #panel-calendar #calendar-section-calendar>.calendar-section-intro{grid-column:1/-1;}
 #panel-calendar #calendar-section-calendar>.studio-toolbar{grid-column:1;margin:0 0 5px;gap:3px;}
 #panel-calendar #calendar-section-calendar>.studio-view-toolbar{grid-column:2;margin:0 0 5px;padding:4px;gap:4px;}
 #panel-calendar #calendar-section-calendar>.studio-view-toolbar label{min-width:0;margin:0;}
 #panel-calendar:has([data-studio-view="month"][aria-pressed="true"]) .studio-view-toolbar label{display:none;}
 #panel-calendar #calendar-section-calendar>.ux27-calendar-context{grid-column:1/-1;position:absolute;width:1px;height:1px;padding:0;margin:-1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap;}
 #panel-calendar #calendar-section-calendar>.studio-month-workspace,
 #panel-calendar #calendar-section-calendar>.p2-cal-extra,
 #panel-calendar #calendar-section-calendar>.calendar-inline-note{grid-column:1/-1;}
 #panel-calendar .studio-toolbar .button{min-width:0;padding:4px 6px;}
 #panel-calendar .studio-toolbar label{min-width:0;}
 #panel-calendar .studio-toolbar input{width:100%;min-width:0;padding-inline:5px;}
 #panel-calendar .studio-view-toolbar button[data-studio-view]{min-width:0;flex:1 1 0;padding:8px 5px;}
}
/* Termine-Tab: die fünf Aktionsbuttons hatten bei 932 px zusammen ~900 px
   feste Mindestbreite. Karten legen Aktionen nun innerhalb ihrer Breite um. */
#panel-calendar #studio-appointment-list .studio-record{display:flex;flex-direction:column;align-items:stretch;min-width:0;max-width:100%;gap:10px;}
#panel-calendar #studio-appointment-list .studio-record>div:first-child{min-width:0;max-width:100%;overflow-wrap:anywhere;}
#panel-calendar #studio-appointment-list .studio-record-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(145px,100%),1fr));gap:6px;flex:none;min-width:0;width:100%;max-width:100%;}
#panel-calendar #studio-appointment-list .studio-record-actions .button,
#panel-calendar #studio-appointment-list .studio-record-actions a{min-width:0;width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:center;}