:root{--bg:#f6f7fb;--card:#fff;--text:#14151a;--muted:#6b7280;--line:#e7e9ef;--accent:#111827;--green:#187c68;--green-soft:#e4f1ec;--time-accent:#0f766e;--sage-mid:#66b59b;--sage-strong:#278e72;--danger:#d33b3b;--shadow:0 18px 60px rgba(20,25,35,.08)}*{box-sizing:border-box}html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--bg)}body{margin:0}button,input,select{font:inherit}.shell{max-width:1180px;margin:0 auto;padding:24px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:32px}.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.03em}.logo{width:34px;height:34px;border-radius:11px;background:linear-gradient(145deg,#111827,#3b4252);display:grid;place-items:center;color:#fff;box-shadow:0 8px 20px rgba(17,24,39,.22)}.pill{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 12px;color:var(--muted);font-size:14px}.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;padding:44px 0 24px}.eyebrow{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--green)}h1{font-size:clamp(42px,7vw,78px);line-height:.96;letter-spacing:-.06em;margin:12px 0 20px;max-width:760px}.lead{font-size:20px;line-height:1.55;color:#555b66;max-width:680px}.hero-card,.card{background:var(--card);border:1px solid rgba(226,229,236,.9);border-radius:28px;box-shadow:var(--shadow)}.hero-card{padding:24px;transform:rotate(1.2deg)}.mini-grid{display:grid;grid-template-columns:70px repeat(5,1fr);gap:5px}.mini-grid span{height:28px;border-radius:7px;background:#eef0f4}.mini-grid .g1{background:#e4f1ec}.mini-grid .g2{background:#b8ddcf}.mini-grid .g3{background:#66b59b}.mini-grid .g4{background:#278e72}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 44px}.step{padding:18px;border-radius:20px;border:1px solid var(--line);background:rgba(255,255,255,.72)}.step strong{display:block;margin-bottom:6px}.step span{color:var(--muted);font-size:14px}.creator{padding:28px;margin-bottom:60px}.creator h2,.card h2{margin:0 0 6px;letter-spacing:-.03em}.sub{color:var(--muted);margin:0 0 22px}.form-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px}.field{display:flex;flex-direction:column;gap:7px}.field label{font-size:13px;font-weight:700;color:#464b55}.field input,.field select{width:100%;border:1px solid var(--line);background:#fbfbfd;border-radius:14px;padding:13px 14px;outline:none;transition:.2s}.dates{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}.date-chip{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;padding:10px 12px;border-radius:14px}.primary,.secondary,.danger,.ghost{border:0;border-radius:14px;padding:12px 16px;font-weight:750;cursor:pointer;transition:.18s}.primary{background:var(--accent);color:#fff}.primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(17,24,39,.18)}.secondary{background:#eff1f5;color:#20232a}.danger{background:#fff0f0;color:var(--danger)}.ghost{background:transparent;color:var(--muted)}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.between{display:flex;justify-content:space-between;gap:16px;align-items:center}.event-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:20px}.event-title h1{font-size:clamp(34px,6vw,58px);margin:6px 0 8px}.event-title p{margin:0;color:var(--muted)}.actions{display:flex;gap:8px;flex-wrap:wrap}.grid-layout{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}.card{padding:20px}.join-box{padding:18px;background:#f8f9fb;border:1px solid var(--line);border-radius:20px;margin-bottom:16px}.join-box input{flex:1;min-width:160px;border:1px solid var(--line);border-radius:13px;padding:11px 12px}.schedule-wrap{overflow:auto;border:1px solid var(--line);border-radius:18px;background:white;max-height:68vh}.schedule{display:grid;min-width:max-content;user-select:none}.cell,.time-label,.date-label{border-right:1px solid #edf0f3;border-bottom:1px solid #edf0f3}.date-label{position:sticky;top:0;z-index:5;background:#fff;padding:12px 10px;text-align:center;font-size:13px;font-weight:800;min-width:95px}.time-label{position:sticky;left:0;z-index:4;background:#fff;padding:6px 10px;color:var(--muted);font-size:12px;width:68px;min-width:68px}.corner{z-index:7}.cell{height:30px;min-width:95px;cursor:pointer;background:#fff;transition:background .06s}.cell.mine{background:#278e72}.cell.heat{position:relative}.cell.heat:hover{outline:2px solid #111827;outline-offset:-2px;z-index:3}.hint{font-size:13px;color:var(--muted);margin:10px 2px 0}.legend{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-top:12px}.legend i{display:block;width:28px;height:10px;border-radius:999px}.participant-list{display:flex;flex-direction:column;gap:8px;margin-top:14px}.participant{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:11px 12px;border-radius:14px;background:#f8f9fb}.participant small{color:var(--muted)}.admin-banner{display:none;background:#111827;color:#fff;border-radius:20px;padding:16px 18px;margin-bottom:18px}.admin-banner.show{display:flex;justify-content:space-between;align-items:center;gap:12px}.admin-panel{display:none;margin-top:18px}.admin-panel.show{display:block}.admin-participant{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}.admin-participant input{border:1px solid var(--line);border-radius:12px;padding:10px 11px}.toast{position:fixed;right:20px;bottom:20px;background:#111827;color:#fff;padding:12px 15px;border-radius:14px;box-shadow:var(--shadow);opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s;z-index:99}.toast.show{opacity:1;transform:translateY(0)}.empty{padding:22px;text-align:center;color:var(--muted)}.footer{color:var(--muted);font-size:13px;padding:30px 0 50px}.modal{position:fixed;inset:0;background:rgba(16,18,24,.42);display:none;place-items:center;padding:20px;z-index:100}.modal.show{display:grid}.modal-card{width:min(520px,100%);background:#fff;border-radius:22px;padding:22px;box-shadow:0 30px 100px rgba(0,0,0,.2)}.modal-card h3{margin:0 0 8px}.share-url{display:flex;gap:8px}.share-url input{flex:1;border:1px solid var(--line);border-radius:12px;padding:11px}.admin-edit-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:10px}.sr{position:absolute;left:-9999px}@media(max-width:900px){.hero,.grid-layout{grid-template-columns:1fr}.hero-card{transform:none}.form-grid,.admin-edit-grid{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr}.event-head{flex-direction:column}.shell{padding:16px}.grid-layout{gap:14px}.schedule-wrap{max-height:60vh}}@media(max-width:560px){.form-grid,.admin-edit-grid{grid-template-columns:1fr}.topbar{margin-bottom:10px}.creator{padding:20px}.card{padding:14px}.event-title h1{font-size:38px}.actions{width:100%}.actions button{flex:1}.cell,.date-label{min-width:80px}}
.email-field{margin-top:16px;max-width:560px}.email-field small{color:var(--muted);font-size:12px}.mode-switch{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 14px}.mode-btn,.mark-btn{border:1px solid var(--line);background:#fff;color:#30343b;border-radius:14px;padding:11px 14px;font-weight:750;cursor:pointer}.mode-btn.active,.mark-btn.active{background:#111827;color:#fff;border-color:#111827}.weekday-picker{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}.weekday-chip select,.date-chip select{border:0;background:transparent;font:inherit;font-weight:700;outline:none}.settings-row{margin-top:18px}.mark-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}.mark-btn.preferred{color:#6b5200}.mark-btn.preferred.active{background:#d4a72c;border-color:#d4a72c;color:#6b5200}.cell.mine-preferred{background:#d4a72c}.cell.heat{background:rgba(24,124,104,var(--heat-alpha,0))}.pref-count{display:grid;place-items:center;height:100%;font-size:11px;font-weight:900;color:#6b5200}.legend-low{background:#e4f1ec}.legend-high{background:#278e72}.star-key{margin-left:8px;font-weight:700;color:#6b5200}.admin-note{font-size:13px;opacity:.72}.admin-mode-switch{margin-top:16px}
@media(max-width:560px){.mode-switch,.mark-toolbar{display:grid;grid-template-columns:1fr 1fr}.mark-toolbar .mark-btn:last-child{grid-column:1/-1}.email-field{max-width:none}}
.choice-help{margin:4px 0 10px;color:var(--muted);font-size:14px}
.weekday-toggle-picker{gap:8px}
.weekday-toggle{border:1px solid var(--line);background:#fff;color:#30343b;border-radius:14px;padding:11px 15px;font-weight:750;cursor:pointer;min-width:72px;transition:.16s}
.weekday-toggle:hover{border-color:#b9bec7}
.weekday-toggle.active{background:#111827;color:#fff;border-color:#111827}
@media(max-width:560px){.weekday-toggle-picker{display:grid;grid-template-columns:repeat(2,1fr)}.weekday-toggle{width:100%}}
.single-title{grid-template-columns:minmax(0,560px)}
.time-section{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.section-label{font-size:14px;font-weight:800;margin-bottom:10px;color:#343943}
.time-grid{display:grid;grid-template-columns:repeat(2,minmax(0,180px));gap:12px}
@media(max-width:560px){.time-grid{grid-template-columns:1fr 1fr}}
.email-field-bottom{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.dimension-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0}
.weekday-dimension{opacity:.48}
.weekday-dimension.active{opacity:1}
.day-time{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:13px}
.day-time input,.dimension-row>.dim-date,.admin-weekday-dim>select{border:1px solid var(--line);background:#fbfbfd;border-radius:12px;padding:10px 11px;font:inherit}
.weekday-dimension:not(.active) .day-time{pointer-events:none}
.cell-disabled{background:#f2f3f6;cursor:default}
@media(max-width:560px){.dimension-row{align-items:stretch}.weekday-toggle{min-width:100%}.day-time{width:100%}.day-time input{min-width:0;flex:1}}
.admin-title-row{display:grid;grid-template-columns:minmax(0,560px) auto;gap:10px;align-items:end;margin-top:16px}
@media(max-width:560px){.admin-title-row{grid-template-columns:1fr}.admin-title-row .primary{width:100%}}
.saved-access{margin:18px 0;padding:16px;background:#f8f9fb;border:1px solid var(--line);border-radius:18px}
.saved-access p{margin:0 0 12px}
.saved-access>button{width:100%;margin-top:8px}
.edit-mail-box{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:10px}
.edit-mail-box[hidden]{display:none}
.edit-mail-box input{min-width:0;border:1px solid var(--line);border-radius:12px;padding:11px 12px}
.saved-done{width:100%}
@media(max-width:560px){.edit-mail-box{grid-template-columns:1fr}.edit-mail-box button{width:100%}}
/* v3.5: vereinfachte Wochentagsauswahl */
.weekday-toggle-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-items:start}
.weekday-dimension{display:block;margin:0;opacity:1}
.weekday-toggle{width:100%;min-width:0;background:#eef0f3;color:#7a808b;border-color:#e3e6eb}
.weekday-toggle:hover{background:#e7e9ee;border-color:#d7dbe2}
.weekday-toggle.active{background:#111827;color:#fff;border-color:#111827}
.day-time-panel{display:none;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:7px;margin-top:8px;padding:10px;border:1px solid var(--line);border-radius:14px;background:#fff}
.weekday-dimension.active .day-time-panel{display:grid}
.time-caption{grid-column:1/-1;font-size:12px;font-weight:800;color:#555b66;margin-bottom:1px}
.day-time-panel input{width:100%;min-width:0;border:1px solid var(--line);background:#fbfbfd;border-radius:10px;padding:9px 8px;font:inherit}
.time-dash{color:var(--muted);font-weight:700}
@media(max-width:800px){.weekday-toggle-picker{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.weekday-toggle-picker{grid-template-columns:1fr}.weekday-toggle{min-width:0}.day-time-panel{grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr)}}
/* v3.7: Datumsauswahl analog zu Wochentagen */
#dates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0 12px}
.date-dimension{border:1px solid var(--line);border-radius:16px;background:#f7f8fa;padding:10px}
.date-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center}
.date-head .dim-date{width:100%;min-width:0;border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 11px;font:inherit}
.date-head .remove-dim{padding:8px 10px}
.date-dimension .day-time-panel{display:grid;margin-top:8px}
@media(max-width:800px){#dates{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){#dates{grid-template-columns:1fr}}
/* v3.8: Zeitwahl bei Datum genauso kompakt wie bei Wochentagen */
.date-dimension .day-time-panel{
grid-template-columns:auto auto auto;
justify-content:start;
column-gap:10px;
}
.date-dimension .day-time-panel .time-caption{
grid-column:1/-1;
}
.date-dimension .day-time-panel input{
width:112px;
flex:none;
}
@media(max-width:560px){
.date-dimension .day-time-panel{
grid-template-columns:auto auto auto;
justify-content:start;
}
.date-dimension .day-time-panel input{
width:112px;
flex:none;
}
}
/* v3.9: Datums-Zeitfeld exakt wie bei Wochentagen */
.date-dimension .day-time-panel{
display:grid;
grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);
justify-content:stretch;
align-items:center;
gap:7px;
margin-top:8px;
padding:10px;
border:1px solid var(--line);
border-radius:14px;
background:#fff;
}
.date-dimension .day-time-panel .time-caption{
grid-column:1/-1;
}
.date-dimension .day-time-panel input{
width:100%;
min-width:0;
border:1px solid var(--line);
background:#fbfbfd;
border-radius:10px;
padding:9px 8px;
font:inherit;
}
@media(max-width:560px){
.date-dimension .day-time-panel{
grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);
justify-content:stretch;
}
.date-dimension .day-time-panel input{
width:100%;
min-width:0;
}
}
/* v4.0: Datumskarten verwenden exakt dieselbe Spaltenbreite wie Wochentage */
#dates{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:10px;
align-items:start;
margin:10px 0 12px;
}
.date-dimension{
display:block;
min-width:0;
margin:0;
padding:0;
border:0;
background:transparent;
border-radius:0;
}
.date-head{
position:relative;
display:block;
}
.date-head .dim-date{
display:block;
width:100%;
min-width:0;
height:auto;
border:1px solid #e3e6eb;
background:#eef0f3;
color:#30343b;
border-radius:14px;
padding:11px 38px 11px 12px;
font:inherit;
font-weight:750;
}
.date-head .remove-dim{
position:absolute;
right:4px;
top:50%;
transform:translateY(-50%);
padding:7px 9px;
}
.date-dimension .day-time-panel{
display:grid;
grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);
align-items:center;
gap:7px;
margin-top:8px;
padding:10px;
border:1px solid var(--line);
border-radius:14px;
background:#fff;
}
.date-dimension .day-time-panel input{
width:100%;
min-width:0;
padding:9px 8px;
}
@media(max-width:800px){
#dates{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:560px){
#dates{grid-template-columns:1fr}
}
.admin-fields-section{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.admin-fields-section h3{margin:0 0 5px}
.admin-fields-section .sub{margin-bottom:0}
#adminFields{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.admin-field-row{display:flex;align-items:center;border:1px solid var(--line);border-radius:13px;background:#f8f9fb;padding:3px 4px 3px 10px}
.admin-field-row input{border:0;background:transparent;outline:none;min-width:130px;font-weight:700}
.admin-fields-empty{font-size:13px;color:var(--muted);padding:8px 0}
.admin-person-card{padding:14px 0;border-bottom:1px solid var(--line)}
.admin-person-top{display:grid;grid-template-columns:minmax(180px,1fr) auto;gap:10px;align-items:center}
.admin-name-input{width:100%;border:1px solid var(--line);border-radius:12px;padding:10px 11px;font-weight:700}
.admin-person-actions{display:flex;gap:8px}
.admin-meta-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px;padding-left:4px}
.admin-meta-field{display:flex;flex-direction:column;gap:5px}
.admin-meta-field span{font-size:12px;font-weight:750;color:var(--muted)}
.admin-meta-field input{width:100%;min-width:0;border:1px solid var(--line);border-radius:11px;padding:9px 10px;background:#fbfbfd}
@media(max-width:760px){.admin-meta-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.admin-person-top{grid-template-columns:1fr}.admin-person-actions{width:100%}.admin-person-actions button{flex:1}.admin-meta-grid{grid-template-columns:1fr}.admin-fields-section .between{align-items:flex-start;flex-direction:column}}
.me-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.edit-link-small{padding:7px 9px;font-size:12px;text-decoration:underline;text-underline-offset:3px}
.edit-link-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin:8px 0 10px}
.edit-link-row input{width:100%;min-width:0;border:1px solid var(--line);border-radius:12px;padding:11px 12px;background:#fff;color:#555b66;font-size:13px}
@media(max-width:560px){.edit-link-row{grid-template-columns:1fr}.edit-link-row button{width:100%}}
/* v4.4: zuverlässiges Klick-und-Ziehen */
#myGrid .cell{touch-action:none;-webkit-user-select:none;user-select:none}
.admin-banner .admin-manage-btn{white-space:nowrap}
.admin-banner strong{font-size:15px}
.admin-banner .admin-note{margin-top:3px}
@media(max-width:560px){.admin-banner{align-items:flex-start;gap:12px}.admin-banner .admin-manage-btn{width:100%}}
/* v5.6: Admin-Verwaltung direkt sichtbar und einklappbar */
.admin-banner{justify-content:flex-start}
.admin-panel-head{align-items:flex-start}
.admin-collapse{white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.admin-panel.collapsed{padding-bottom:14px}
.admin-panel.collapsed .admin-panel-head .sub{display:none}
#adminPanelBody[hidden]{display:none}
#adminPanelBody.admin-body-animating{overflow:hidden;transition:height .32s cubic-bezier(.22,.8,.25,1),opacity .22s ease,transform .32s cubic-bezier(.22,.8,.25,1);will-change:height,opacity,transform}
@media(max-width:560px){.admin-panel-head{flex-direction:row;align-items:flex-start}.admin-collapse{width:auto}}
/* v6.0 KI-Auswertung */
.ai-section{margin-top:28px;padding:22px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#fbfcff,#f7f8fb)}
.ai-title-line{display:flex;align-items:center;gap:9px}
.ai-title-line h3{margin:0}
.premium-badge{font-size:10px;font-weight:900;letter-spacing:.08em;padding:4px 7px;border-radius:999px;background:#111827;color:#fff}
.ai-prompt-wrap{position:relative;margin-top:14px}
.ai-prompt-wrap textarea{width:100%;min-height:112px;resize:vertical;border:1px solid var(--line);border-radius:15px;padding:14px 48px 14px 14px;font:inherit;line-height:1.45;background:#fff}
.ai-prompt-wrap textarea:focus{outline:2px solid rgba(15,118,110,.16);border-color:#0f766e}
.ai-mic{position:absolute;right:8px;bottom:8px;width:36px;height:36px;padding:0;border-radius:50%}
.ai-mic.listening{transform:scale(1.08);box-shadow:0 0 0 4px rgba(0,0,0,.08)}
.ai-actions{display:flex;align-items:center;gap:12px;margin-top:10px}
.ai-status{font-size:13px;color:var(--muted)}
.ai-result{margin-top:14px;padding:16px;border:1px solid var(--line);border-radius:15px;background:#fff}
#aiResultText{white-space:pre-wrap;line-height:1.55;margin-top:12px}
/* v6.2 KI-Credits & Stripe */
.credit-badge{font-size:11px;font-weight:850;padding:5px 8px;border-radius:999px;background:#eef4ef;color:#245b39;border:1px solid #d8e8dc}
.credit-packages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.credit-packages[hidden]{display:none}
.credit-package{display:flex;flex-direction:column;gap:3px;text-align:left;border:1px solid var(--line);background:#fff;border-radius:14px;padding:12px;cursor:pointer;font:inherit}
.credit-package:hover{border-color:#aeb5bf;transform:translateY(-1px)}
.credit-package strong{font-size:13px}
.credit-package span{font-size:12px;color:var(--muted)}
.credit-packages small{grid-column:1/-1;color:var(--muted);font-size:11px}
@media(max-width:620px){.credit-packages{grid-template-columns:1fr}.ai-actions{align-items:stretch;flex-direction:column}.ai-actions button{width:100%}}
/* v6.4 Teilnehmer-Vorschau in der Heatmap */
.participant{cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.participant:hover,.participant.participant-preview{background:#eef7f1;box-shadow:inset 0 0 0 1px #cfe7d7}
.participant:hover strong,.participant.participant-preview strong{color:#176b5b}
/* v6.6 minimaler Hilfe-Link */
.footer{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}
.footer-link{appearance:none;border:0;background:none;padding:0;color:inherit;font:inherit;cursor:pointer;text-decoration:none}
.footer-link:hover{text-decoration:underline}
.footer-dot{opacity:.55}
/* v6.7 bessere KI-Ausgabe */
#aiResultText{white-space:normal}
.ai-output-heading{margin:16px 0 6px;font-size:15px;line-height:1.35}
.ai-output-heading:first-child{margin-top:0}
.ai-output-line{line-height:1.55;margin:3px 0}
.ai-gap{height:8px}
/* v7.0 Stundenplan + PDF */
.ai-result-actions{display:flex;align-items:center;gap:8px}
/* v7.6 ruhigere Teilnehmer-Vorschau */
.participant{min-height:48px;box-sizing:border-box}
.participant:hover,.participant.participant-preview{transform:none}
/* v7.7 beide Zeitfelder gleich hoch */
.grid-layout{align-items:stretch}
.grid-layout>.card{height:100%;box-sizing:border-box}
@media(max-width:900px){.grid-layout>.card{height:auto}}
/* v7.8 stabile Teilnehmer-Vorschau */
.participant.participant-preview{transform:none}
/* v7.9 ruhigere Raster-Ausrichtung */
.topbar{justify-content:flex-start}
.grid-layout>.card{display:flex;flex-direction:column}
.grid-layout>.card>.between{min-height:54px}
.mark-toolbar{min-height:44px;display:flex;align-items:center}
.heat-legend{
min-height:44px;
margin-top:0;
display:flex;
align-items:center;
justify-content:flex-start;
}
.grid-layout .schedule-wrap{margin-top:0}
/* v7.12 Kopfbereich wieder kompakt und ruhig */
.event-head{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:end;
gap:18px;
}
.event-head .actions{
display:flex;
flex-direction:row;
align-items:center;
gap:8px;
width:auto;
margin:0;
}
.event-head .actions button{
flex:none;
width:auto;
white-space:nowrap;
}
.admin-banner{
border-radius:16px;
padding:10px 14px;
margin-bottom:14px;
}
@media(max-width:760px){
.event-head{
grid-template-columns:1fr;
align-items:start;
}
.event-head .actions{
width:100%;
flex-wrap:wrap;
}
.event-head .actions button{
flex:1 1 auto;
}
}
/* v7.13 stabiler Hinweis bei Einzelansicht */
#groupSub{
min-height:22px;
margin-bottom:0;
}
/* v7.14 hochwertigere Stundenplan-Ausgabe */
.ai-result{padding:18px}
.ai-result-actions{display:flex;gap:8px;align-items:center}
.ai-pdf-btn{font-size:12px;padding:8px 10px}
#aiResultText{margin-top:16px}
.schedule-section{
margin:0 0 12px;
padding:14px 15px;
border:1px solid var(--line);
border-radius:16px;
background:#fff;
}
.schedule-section h4{
margin:0 0 9px;
font-size:15px;
letter-spacing:-.02em;
}
.schedule-section-day{border-left:4px solid var(--green)}
.schedule-section-break{background:#f8f9fb}
.schedule-section-problem{background:#fff8f6;border-color:#f0ddd7}
.schedule-section-hint{background:#fbfaf6}
.schedule-item{
display:grid;
grid-template-columns:minmax(110px,.42fr) minmax(0,1fr);
gap:12px;
padding:7px 0;
line-height:1.45;
font-size:13px;
}
.schedule-item+ .schedule-item{border-top:1px solid #f0f1f3}
.schedule-item strong{font-weight:800}
.schedule-item span{color:#525a66}
@media(max-width:560px){
.schedule-item{grid-template-columns:1fr;gap:2px}
.ai-result-actions{flex-wrap:wrap;justify-content:flex-end}
}
/* v7.15 direkte Interaktionen */
.admin-panel.collapsed{cursor:pointer}
.admin-panel.collapsed:hover{border-color:#d6dbe3}
.admin-panel:not(.collapsed){cursor:default}
/* v7.17 schulische Stundenplan-Übersicht */
.school-timetable-wrap{
margin:0 0 18px;
border:1px solid var(--line);
border-radius:18px;
overflow:hidden;
background:#fff;
}
.school-timetable-title{
padding:14px 16px 11px;
font-size:13px;
font-weight:850;
letter-spacing:.01em;
border-bottom:1px solid var(--line);
background:#fafbfc;
}
.school-timetable{
display:grid;
min-width:max-content;
}
.school-head,.school-time,.school-cell{
border-right:1px solid #edf0f3;
border-bottom:1px solid #edf0f3;
}
.school-head{
padding:11px 10px;
text-align:center;
font-size:13px;
font-weight:850;
background:#f8f9fb;
}
.school-time-head{
text-align:left;
}
.school-time{
padding:13px 10px;
font-size:12px;
color:var(--muted);
font-weight:750;
background:#fbfbfc;
}
.school-cell{
min-height:72px;
padding:7px;
background:#fff;
}
.school-lesson{
display:flex;
flex-direction:column;
gap:3px;
padding:9px 10px 9px 12px;
border:1px solid #dfe8e2;
border-left:4px solid var(--green);
border-radius:12px;
background:#f7fbf8;
box-shadow:0 3px 10px rgba(25,164,99,.05);
}
.school-lesson strong{
font-size:13px;
line-height:1.25;
}
.school-lesson span{
font-size:12px;
font-weight:800;
color:#365847;
}
.school-lesson small{
font-size:11px;
line-height:1.3;
color:var(--muted);
}
.schedule-details{
margin-top:4px;
}
@media(max-width:760px){
.school-timetable-wrap{overflow:auto}
.school-timetable{min-width:720px}
}
/* v7.19 klassischer Stundenplan – angelehnt an die hochgeladene Referenz */
.school-real{position:relative;border:1.75px solid #151821;border-radius:14px;background:#fff;overflow:auto}
.school-timetable-titlebar{
min-width:760px;display:flex;justify-content:space-between;align-items:center;
padding:12px 14px;border-bottom:1.5px solid #151821;background:#fff
}
.school-timetable-titlebar>div{display:flex;flex-direction:column;gap:2px}
.school-timetable-titlebar strong{font-size:16px}
.school-timetable-titlebar span,.school-timetable-titlebar small{font-size:11px;color:var(--muted)}
.school-real-grid{display:grid;position:relative;min-width:760px;background:#fff}
.school-real-corner,.school-real-day,.school-real-time,.school-real-cell{
border-right:.75px solid #30343a;border-bottom:.5px solid #cfd3d8
}
.school-real-corner{
border-right-width:1px;
display:flex;align-items:center;padding:8px;font-size:11px;font-weight:800;background:#fafafa
}
.school-real-day{
display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;
letter-spacing:-.03em;background:#fff;border-bottom:1.25px solid #151821
}
.school-real-time{
border-right-width:1px;
display:flex;align-items:center;padding:0 8px;font-size:11px;font-weight:800;background:#fafafa;
white-space:nowrap
}
.school-real-cell{background:#fff}
.school-real-lesson{
z-index:3;margin:calc(var(--start-frac,0) * var(--school-row-height,42px)) 1px calc(var(--end-frac,0) * var(--school-row-height,42px)) 1px;
min-height:0;padding:6px 8px;box-sizing:border-box;
display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
border:.75px solid #176b5b;border-left:3.5px solid var(--green);border-radius:3px;
background:#eef8f2;color:#13231a;text-align:center;overflow:hidden
}
.school-real-lesson strong{font-size:11px;line-height:1.2;white-space:nowrap;max-width:100%}
.school-real-lesson .school-lesson-name-text{display:inline-block}
.school-real-lesson.dense{padding:2px 5px;flex-wrap:nowrap}
.school-real-lesson.dense strong{font-size:9px;line-height:1.05;white-space:nowrap;max-width:100%}
.school-real-lesson.wrap-fallback strong{white-space:normal;overflow-wrap:normal;word-break:normal;hyphens:none}
.school-real-grid-adaptive .school-real-time{font-size:10px;font-weight:800}
.school-real-grid-adaptive .school-real-time.minor{color:transparent}
.school-real-grid-adaptive .school-real-time.major,
.school-real-grid-adaptive .school-real-cell.major{border-bottom-color:#b8bec6}
.school-real-grid-adaptive .school-real-time.minor,
.school-real-grid-adaptive .school-real-cell.minor{border-bottom-color:#e8ebef}
.school-real-lesson small{font-size:9px;color:#176b5b;font-weight:850;white-space:nowrap}
.school-real-lesson.preferred{background:#f7edc8}
.schedule-decoration{
--schedule-decoration-accent:#6b7280;--schedule-decoration-fill:#f4f5f7;
position:absolute;z-index:8;pointer-events:none;user-select:none;color:var(--schedule-decoration-accent)
}
.schedule-decoration-bottom-right{right:10px;bottom:8px}.schedule-decoration-bottom-left{left:10px;bottom:8px}
.schedule-decoration-top-right{right:10px;top:58px}.schedule-decoration-top-left{left:10px;top:58px}
.schedule-decoration-small{width:34px;height:34px}.schedule-decoration-medium{width:48px;height:48px}.schedule-decoration-large{width:64px;height:64px}
.schedule-decoration-glyph{display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:900;text-shadow:0 1px 0 rgba(255,255,255,.8)}
.schedule-decoration-small.schedule-decoration-glyph{font-size:22px}.schedule-decoration-large.schedule-decoration-glyph{font-size:38px}
.schedule-decoration-bunny span{position:absolute;display:block;box-sizing:border-box;background:var(--schedule-decoration-fill);border:2px solid var(--schedule-decoration-accent)}
.schedule-decoration-bunny .bunny-body{width:56%;height:46%;left:19%;bottom:7%;border-radius:52% 52% 45% 45%}
.schedule-decoration-bunny .bunny-head{width:43%;height:39%;left:38%;top:28%;border-radius:50%}
.schedule-decoration-bunny .bunny-ear{width:17%;height:43%;top:1%;border-radius:70% 70% 45% 45%;transform-origin:bottom center}
.schedule-decoration-bunny .bunny-ear-left{left:43%;transform:rotate(-12deg)}.schedule-decoration-bunny .bunny-ear-right{left:62%;transform:rotate(12deg)}
.schedule-decoration-bunny .bunny-tail{width:22%;height:22%;left:7%;bottom:18%;border-radius:50%}
.schedule-decoration-bunny .bunny-eye{width:5px;height:5px;left:68%;top:44%;border:0;border-radius:50%;background:var(--schedule-decoration-accent)}
.schedule-decoration-wing .wing-feather{position:absolute;display:block;box-sizing:border-box;background:var(--schedule-decoration-fill);border:2px solid var(--schedule-decoration-accent);border-radius:85% 20% 80% 22%;transform-origin:85% 80%}
.schedule-decoration-wing .wing-feather-1{width:72%;height:26%;left:5%;top:42%;transform:rotate(-28deg)}
.schedule-decoration-wing .wing-feather-2{width:68%;height:24%;left:13%;top:30%;transform:rotate(-18deg)}
.schedule-decoration-wing .wing-feather-3{width:61%;height:22%;left:23%;top:20%;transform:rotate(-8deg)}
.schedule-decoration-wing .wing-feather-4{width:50%;height:20%;left:36%;top:14%;transform:rotate(3deg)}
@media(max-width:760px){.school-real-grid,.school-timetable-titlebar{min-width:700px}}
/* v7.28 Einleitung zu den drei Schritten */
.steps-intro{
margin:0 0 12px;
color:var(--muted);
font-size:14px;
line-height:1.45;
}
/* v7.32 Logo-Hover */
.logo{
transition:transform .45s cubic-bezier(.2,.8,.2,1);
transform-origin:center;
}
.brand:hover .logo{
transform:rotate(360deg) scale(1.08);
}
/* v7.33 Logo zeigt auf allen Seiten Hover-Interaktion */
.brand,.brand .logo{cursor:pointer}
/* v7.44: sichtbarer KI-Arbeitsstatus + Superadmin-Guthaben */
.ai-working{margin-top:12px;display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid #cfe7da;border-radius:15px;background:#f1fbf6;color:#243c31}
.ai-working[hidden]{display:none}
.ai-working div{display:flex;flex-direction:column;gap:2px}
.ai-working div span{font-size:13px;color:var(--muted)}
.ai-spinner{width:22px;height:22px;flex:0 0 22px;border-radius:50%;border:3px solid #cce8d8;border-top-color:#187c68;animation:zf-spin .8s linear infinite}
.ai-section.is-working{border-color:#a9dcc1;box-shadow:0 0 0 4px rgba(25,164,99,.08),0 12px 32px rgba(25,164,99,.08)}
.ai-section.is-working .ai-actions .primary{position:relative;overflow:hidden}
.ai-section.is-working .ai-actions .primary:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.28) 50%,transparent 80%);transform:translateX(-120%);animation:zf-shimmer 1.35s ease-in-out infinite}
@keyframes zf-spin{to{transform:rotate(360deg)}}
@keyframes zf-shimmer{to{transform:translateX(120%)}}
.gift-section{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.gift-section h3{margin:0 0 4px}
.gift-section .sub{margin-bottom:14px}
.gift-grid{display:grid;grid-template-columns:minmax(220px,2fr) minmax(100px,.65fr) auto;gap:10px;align-items:end}
.gift-grid .primary{height:46px}
.gift-status{min-height:20px;margin:9px 0 0;color:#25764d;font-size:13px}
@media(max-width:700px){.gift-grid{grid-template-columns:1fr}.gift-grid .primary{width:100%}}
/* v7.45 polish */
.ai-working{align-items:flex-start}.ai-working-copy{flex:1;min-width:0}.ai-progress{height:7px;margin-top:8px;overflow:hidden;border-radius:999px;background:#dceee4}.ai-progress i{display:block;width:38%;height:100%;border-radius:inherit;background:currentColor;animation:zfAiProgress 1.25s ease-in-out infinite}.ai-working small{font-size:12px;color:var(--muted)}@keyframes zfAiProgress{0%{transform:translateX(-105%)}100%{transform:translateX(365%)}}
.admin-person-card{padding:16px 0;border-bottom:1px solid var(--line)}.admin-person-card:last-child{border-bottom:0}.admin-person-top{display:flex;justify-content:space-between;gap:12px;align-items:center}.admin-person-name{font-size:17px}.admin-person-actions{display:flex;gap:8px;flex-wrap:wrap}.admin-person-editor{margin-top:12px;padding:14px;border-radius:16px;background:#f8f9fb}.admin-person-editor[hidden]{display:none}.admin-add-person{margin-top:22px;padding-top:20px}.admin-add-person h3{margin:0 0 10px}.admin-add-row{display:flex;gap:10px}.admin-add-row input{flex:1;border:1px solid var(--line);border-radius:14px;padding:12px 14px}.gift-section{border-top:0}.admin-fields-section{border-bottom:0}.admin-add-person{border-top:0}
@media(max-width:700px){.admin-person-top,.admin-add-row{align-items:stretch;flex-direction:column}.admin-person-actions button{flex:1}.admin-add-row button{width:100%}}
/* v7.48: native hidden must always win over layout display rules */
[hidden]{display:none !important;}
/* v7.50: Zusatzparameter bleiben im Adminbereich direkt unter jeder Person sichtbar. */
.admin-meta-always{margin-top:12px}
.created-modal-card{width:min(640px,100%)}
.created-access{margin-bottom:18px}
.created-share-title{margin-top:20px!important}
.created-link-help{margin:7px 2px 0!important;color:var(--muted);font-size:13px}
.created-modal-card .edit-link-row{display:flex;gap:8px}
.created-modal-card .edit-link-row input{min-width:0;flex:1;border:1px solid var(--line);border-radius:12px;padding:11px;background:#fff}
@media(max-width:560px){.created-modal-card .edit-link-row{flex-direction:column}.created-modal-card .edit-link-row button{width:100%}}
/* v7.53: Speicherbestätigung schwebt immer im sichtbaren Browserfenster */
.me-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.save-status{position:fixed;right:22px;bottom:76px;z-index:98;min-width:116px;text-align:center;font-size:13px;font-weight:750;color:var(--muted);background:rgba(255,255,255,.96);border:1px solid rgba(226,229,236,.95);border-radius:999px;padding:9px 13px;box-shadow:0 10px 30px rgba(20,25,35,.10);opacity:0;transform:translateY(8px) scale(.98);transition:opacity .24s ease,transform .24s ease,color .24s ease;pointer-events:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.save-status.show{opacity:1;transform:translateY(0) scale(1)}
.save-status.saving{color:var(--muted)}
.save-status.saved{color:var(--green)}
.save-status.error{color:var(--danger)}
.save-status.fade{opacity:0;transform:translateY(5px) scale(.98)}
@media(max-width:560px){.save-status{right:14px;bottom:72px;min-width:104px;font-size:12px;padding:8px 11px}}
/* v7.54 Mobile robustness + date options */
.date-options{display:grid;gap:10px;margin:16px 0 4px}.option-check{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fbfbfd;font-size:14px}.option-check input{margin-top:2px}.fixed-date-time .time-dash,.fixed-date-time .dim-end{display:none!important}.fixed-date-time .day-time-panel{grid-template-columns:auto minmax(0,1fr)}
.grid-layout,.grid-layout>.card,.admin-panel,.schedule-wrap{min-width:0;width:100%}.schedule-wrap{max-width:100%;overflow-x:auto;overflow-y:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}.schedule{width:max-content}.date-label small{display:block;font-size:9px;color:var(--green);font-weight:700;margin-top:3px;white-space:nowrap}
.participant-extra-fields,.date-suggestion-box{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}.participant-extra-fields h3,.date-suggestion-box h3{margin:0 0 10px}.participant-extra-field{display:flex;flex-direction:column;gap:7px}.participant-extra-field span{font-size:13px;font-weight:700;color:#464b55}.participant-extra-field textarea{width:100%;min-height:86px;resize:vertical;border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:#fbfbfd}.date-suggestion-form{display:grid;grid-template-columns:1.2fr 1fr 1fr auto;gap:10px;align-items:end;margin-top:10px}.date-suggestion-form .field{min-width:0}.date-suggestion-form input{width:100%;border:1px solid var(--line);border-radius:12px;padding:10px 11px;background:#fff}.admin-suggested-dates{margin:18px 0}.admin-suggested-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;background:#f8f9fb;margin-top:8px}.admin-suggested-row small{color:var(--muted)}
.native-share-btn{width:100%;margin-top:10px}.duration-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}.duration-option{border:1px solid var(--line);background:#fff;color:var(--text);border-radius:14px;padding:12px;font-weight:750;cursor:pointer}.duration-option.active{border-color:#111827;background:#f1f3f6}.duration-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.duration-custom{margin-top:10px}.duration-custom input{border:1px solid var(--line);border-radius:12px;padding:10px 11px}
#myGrid .cell{touch-action:auto;-webkit-user-select:none;user-select:none}
@media(max-width:900px){.grid-layout{display:block}.grid-layout>.card{margin-bottom:14px}.admin-panel{max-width:100%}}
@media(max-width:760px){body{overflow-x:hidden}.shell{width:100%;max-width:100%;overflow-x:hidden}.card,.admin-panel{max-width:100%;overflow:hidden}.schedule-wrap{overflow-x:auto!important;overflow-y:auto!important}.cell,.date-label{min-width:96px}.time-label{width:64px;min-width:64px}.date-suggestion-form{grid-template-columns:1fr 1fr}.date-suggestion-form .primary{grid-column:1/-1}.duration-options{grid-template-columns:1fr 1fr}.admin-panel-head,.admin-fields-section .between{max-width:100%}.admin-title-row,.admin-meta-grid,.gift-grid{width:100%}}
@media(max-width:520px){.date-suggestion-form{grid-template-columns:1fr}.date-suggestion-form .primary{grid-column:auto}.admin-suggested-row{align-items:flex-start;flex-direction:column}.admin-suggested-row button{width:100%}}
.admin-meta-field textarea{width:100%;min-height:76px;resize:vertical;border:1px solid var(--line);border-radius:12px;padding:10px 11px;background:#fff;font:inherit}
@media(max-width:760px){.schedule-wrap{max-height:none!important}}
/* v7.59 — „Andere Dauer“ direkt rechts neben der Auswahl */
.term-duration-field{
flex:1 1 460px;
}
.term-duration-row{
display:flex;
align-items:center;
gap:10px;
}
.term-duration-row > select{
flex:1 1 260px;
min-width:220px;
}
.custom-term-duration-side{
display:flex;
align-items:center;
gap:8px;
flex:0 0 auto;
}
.custom-term-duration-side[hidden]{
display:none;
}
.custom-term-duration-side input{
width:125px;
min-width:0;
}
.custom-term-duration-side span{
color:var(--muted);
font-weight:700;
white-space:nowrap;
}
@media(max-width:640px){
.term-duration-row{
gap:8px;
}
.term-duration-row > select{
min-width:0;
}
.custom-term-duration-side input{
width:100px;
}
}
/* v7.60 — Zeitraster und Termindauer gleich breit, mobil robust */
#slotSettings{
align-items:flex-start;
gap:16px;
}
#slotSettings > .field:first-child{
flex:0 0 320px;
width:320px;
min-width:0!important;
}
#slotSettings > .field:first-child select{
width:100%;
}
.term-duration-field{
flex:0 0 auto;
min-width:0!important;
}
.term-duration-row{
display:flex;
align-items:flex-start;
gap:10px;
flex-wrap:nowrap;
}
.term-duration-row > select{
flex:0 0 320px;
width:320px;
min-width:0;
}
.custom-term-duration-side{
display:flex;
align-items:center;
gap:7px;
flex:0 0 auto;
}
.custom-term-duration-side input{
width:110px;
min-width:0;
}
.custom-term-duration-side span{
font-size:14px;
}
@media(max-width:760px){
#slotSettings{
display:grid;
grid-template-columns:1fr;
gap:14px;
}
#slotSettings > .field:first-child,
.term-duration-field{
width:100%;
max-width:100%;
flex:none;
}
#slotSettings > .field:first-child select{
width:100%;
}
.term-duration-row{
width:100%;
}
.term-duration-row > select{
flex:1 1 auto;
width:auto;
min-width:0;
}
.custom-term-duration-side input{
width:96px;
}
}
@media(max-width:430px){
.term-duration-row{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:8px;
}
.term-duration-row > select{
width:100%;
}
.custom-term-duration-side{
gap:5px;
}
.custom-term-duration-side input{
width:86px;
padding-left:10px;
padding-right:8px;
}
.custom-term-duration-side span{
font-size:13px;
}
}
/* v7.62 — nur die besprochenen Mobile-Korrekturen */
@media(max-width:760px){
/* „1 Person“ / „x Personen“ bleibt horizontal. */
#countPill{
white-space:nowrap;
flex:0 0 auto;
width:auto;
min-width:max-content;
}
/* Native iOS date/time inputs dürfen die Karte nicht verbreitern. */
.date-suggestion-form,
.date-suggestion-form > *,
.date-suggestion-form .field{
min-width:0!important;
max-width:100%;
width:100%;
}
.date-suggestion-form input,
.date-suggestion-form button{
box-sizing:border-box;
width:100%;
min-width:0!important;
max-width:100%;
}
/* Teilen-Modal mit identischem Abstand links/rechts. */
#shareModal{
padding-left:16px;
padding-right:16px;
}
#shareModal .modal-card{
width:100%;
max-width:520px;
min-width:0;
margin-left:auto;
margin-right:auto;
}
#shareModal .between,
#shareModal .share-url{
width:100%;
min-width:0;
max-width:100%;
}
#shareModal .share-url input{
min-width:0!important;
max-width:100%;
}
#shareModal .share-url button{
flex:0 0 auto;
}
}
@media(max-width:430px){
#shareModal .modal-card{
width:100%;
max-width:100%;
}
}
/* v7.63 – gezielte Mobile-/Termin-Korrekturen */
.fixed-options-grid{display:grid!important;width:100%!important;min-width:0!important;gap:8px;padding:8px}
.fixed-option{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px;background:#fff}
.fixed-option-meta{display:flex;flex-direction:column;gap:3px;min-width:0}.fixed-option-meta span{color:var(--muted);font-size:13px}.fixed-option-meta small{color:var(--green);font-size:11px}.fixed-option-choice{border:1px solid var(--line);background:#f8f9fb;border-radius:12px;padding:9px 12px;font-weight:800;white-space:nowrap}.fixed-option-choice.mine{background:#278e72;color:#fff;border-color:#278e72}.fixed-option-choice.mine-preferred{background:#d4a72c;color:#6b5200;border-color:#d4a72c}.fixed-option-choice.heat{display:flex;flex-direction:column;gap:2px;color:#25302a}.fixed-option-choice.heat span{font-size:11px;color:#6b5200}
/* Zeitfelder: beide gleich breit, Trennstrich exakt in der Mitte. */
.day-time-panel,.date-dimension .day-time-panel{
grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr)!important;
column-gap:10px!important;
justify-content:stretch!important;
}
.day-time-panel .time-caption,.date-dimension .day-time-panel .time-caption{grid-column:1/-1!important}
.day-time-panel .time-dash,.date-dimension .day-time-panel .time-dash{text-align:center;width:26px;justify-self:center}
.day-time-panel input,.date-dimension .day-time-panel input{width:100%!important;min-width:0!important;max-width:100%!important}
.date-head,.date-head .dim-date{min-width:0!important;max-width:100%!important}
.date-head .dim-date{box-sizing:border-box}
/* KI-Titel bleibt auf einer Zeile. */
.ai-title-line{flex-wrap:nowrap;min-width:0}.ai-title-line h3{white-space:nowrap;flex:0 0 auto}.credit-badge{flex:0 1 auto}
@media(max-width:760px){
/* Markierungsbuttons über die komplette Kartenbreite, etwas kompakter. */
.mark-toolbar{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:14px!important;width:100%!important;min-height:0!important}
.mark-toolbar .mark-btn{width:100%!important;min-width:0!important;padding:10px 8px!important;min-height:48px!important;font-size:16px;white-space:nowrap}
/* Vorschlagsformular robust gegen native iOS-Mindestbreiten. */
.date-suggestion-box,.date-suggestion-form,.date-suggestion-form .field{min-width:0!important;max-width:100%!important;width:100%!important;overflow:hidden}
.date-suggestion-form{grid-template-columns:1fr!important}
.date-suggestion-form input[type="date"],.date-suggestion-form input[type="time"]{display:block!important;box-sizing:border-box!important;inline-size:100%!important;width:100%!important;min-inline-size:0!important;min-width:0!important;max-inline-size:100%!important;max-width:100%!important}
.date-suggestion-form .primary{grid-column:auto!important;width:100%!important}
.fixed-option{grid-template-columns:1fr}.fixed-option-choice{width:100%}
.ai-title-line{gap:8px}.ai-title-line h3{font-size:18px}.credit-badge{font-size:10px;padding:5px 7px}
}
@media(max-width:430px){
.mark-toolbar{gap:12px!important}
.mark-toolbar .mark-btn{font-size:15px;padding:9px 6px!important;min-height:46px!important}
}
/* v7.63 fixed-date range must remain visible despite legacy fixed-date CSS. */
.fixed-date-time .time-dash,.fixed-date-time .dim-end{display:block!important}
.fixed-date-time .day-time-panel{grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr)!important}
/* v7.64 – kleine UX-Korrekturen */
/* Verfügbar und Bevorzugt exakt gleich breit, ohne zusätzliche Umrahmung. */
.mark-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:min(100%,540px)}
.mark-toolbar .mark-btn{width:100%;min-width:0}
/* Klickbare Elemente klar als solche kennzeichnen. */
.fixed-option-choice:not(:disabled),#adminPanel.collapsed,#toggleAdminPanel,.admin-panel button,.admin-panel .ghost{cursor:pointer}
/* Auswertung bei Raster „Ohne“: statt irreführender Quote die Namen zeigen. */
.fixed-option-people{display:flex;align-items:baseline;justify-content:flex-end;gap:6px;max-width:360px;text-align:right;color:#25302a}
.fixed-option-can-label{color:var(--muted);font-size:12px;font-weight:700}
.fixed-option-people strong{font-size:13px;line-height:1.35}
.fixed-options-empty{grid-column:1/-1;width:100%}
/* Vorgeschlagene Daten gleich wie reguläre Termine: Datum, Zeit, Herkunft. */
.admin-suggested-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.admin-suggested-copy>strong{font-weight:800}
.admin-suggested-copy>span{color:var(--muted)}
.admin-suggested-copy>small{color:var(--muted)}
@media(max-width:760px){
.mark-toolbar{width:100%!important}
.fixed-option-people{justify-content:flex-start;text-align:left;max-width:none}
}
/* v7.65 — kleine Dialogkorrektur */
#showEditMail{text-align:left}
/* v7.66 — KI Spracheingabe */
.ai-title-line + .sub,
#aiIntro{
margin-top:10px;
}
.ai-prompt-wrap{
padding-top:2px;
}
.ai-listening-indicator{
position:absolute;
left:12px;
bottom:10px;
display:inline-flex;
align-items:center;
gap:7px;
max-width:calc(100% - 66px);
padding:6px 10px;
border-radius:999px;
background:#eef7f1;
color:#176b5b;
font-size:12px;
font-weight:850;
pointer-events:none;
}
.ai-listening-indicator[hidden]{display:none}
.ai-listening-indicator i{
width:8px;
height:8px;
border-radius:50%;
background:#24a865;
box-shadow:0 0 0 0 rgba(36,168,101,.32);
animation:aiListenPulse 1.25s infinite;
}
.ai-mic.listening{
background:#111827;
color:#fff;
transform:none;
box-shadow:0 0 0 4px rgba(36,168,101,.18);
}
@keyframes aiListenPulse{
0%{box-shadow:0 0 0 0 rgba(36,168,101,.34)}
70%{box-shadow:0 0 0 8px rgba(36,168,101,0)}
100%{box-shadow:0 0 0 0 rgba(36,168,101,0)}
}
@media(max-width:620px){
#aiIntro{margin-top:12px}
.ai-listening-indicator{font-size:11px}
}
/* v7.71 — reduzierte Dauer pro Person-Auswahl */
.duration-options:has(.lesson-duration-option){grid-template-columns:1fr 1fr}
.lesson-duration-option{min-height:68px;text-align:center;line-height:1.25;padding:14px 18px}
@media(max-width:560px){
.duration-options:has(.lesson-duration-option){grid-template-columns:1fr}
.lesson-duration-option{min-height:58px}
}
/* v7.75 — klare Führung bei fehlenden Pflichtangaben */
.create-attention{
outline:3px solid rgba(15,118,110,.42);
outline-offset:5px;
border-radius:18px;
animation:createAttentionPulse .9s ease-in-out 2;
}
@keyframes createAttentionPulse{
0%,100%{box-shadow:0 0 0 0 rgba(15,118,110,0)}
50%{box-shadow:0 0 0 7px rgba(15,118,110,.12)}
}
/* v7.77 — präzise Pflichtfeld-Markierung */
.weekday-toggle.create-attention,
#addDate.create-attention,
.dim-date.create-attention,
#creatorEmail.create-attention,
#title.create-attention,
#customTermDuration.create-attention{
outline:3px solid rgba(15,118,110,.42);
outline-offset:4px;
border-radius:14px;
}
/* v7.82 — individuelle Dauer pro Person direkt führen */
.admin-meta-field input.duration-input-attention,
.admin-field-row input.duration-input-attention{
outline:3px solid rgba(15,118,110,.46);
outline-offset:3px;
box-shadow:0 0 0 7px rgba(15,118,110,.10);
animation:durationInputPulse .9s ease-in-out 2;
}
@keyframes durationInputPulse{
0%,100%{box-shadow:0 0 0 7px rgba(15,118,110,.08)}
50%{box-shadow:0 0 0 10px rgba(15,118,110,.16)}
}
/* v7.85 — konsistente Verfügbarkeitsbegriffe in der Auswertung */
.fixed-option-people{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.fixed-option-people-line{display:flex;align-items:baseline;justify-content:flex-end;gap:8px}
.fixed-option-people-line.preferred .fixed-option-can-label{font-weight:700}
/* v7.95 — ausschliesslich die besprochenen Mobile-/Auswertungs-Korrekturen */
.fixed-option.fixed-option-heat{
transition:background-color .15s ease;
}
.fixed-option-people-line.preferred .fixed-option-can-label{
color:#6b5200;
font-size:16px;
line-height:1;
}
@media(max-width:760px){
/* Verfügbar + Bevorzugt immer auf gleicher Höhe nebeneinander. */
.mark-toolbar{
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
gap:12px!important;
width:100%!important;
}
.mark-toolbar .mark-btn,
.mark-toolbar .mark-btn:last-child{
grid-column:auto!important;
width:100%!important;
min-width:0!important;
min-height:48px!important;
margin:0!important;
}
/* Trennstrich exakt im geometrischen Zentrum der beiden gleich breiten Zeitfelder. */
.day-time-panel,
.date-dimension .day-time-panel,
.fixed-date-time .day-time-panel{
grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr)!important;
column-gap:6px!important;
}
.day-time-panel .time-dash,
.date-dimension .day-time-panel .time-dash,
.fixed-date-time .day-time-panel .time-dash{
width:28px!important;
text-align:center!important;
justify-self:center!important;
align-self:center!important;
}
/* Beispieltext der KI auf dem Handy ohne internes Scrollen lesbar. */
.ai-prompt-wrap textarea{
min-height:270px!important;
}
}
/* v7.99 – mobile: Teilnehmername/Adminlink kompakter,
danach minimal mehr Luft zu Verfügbar/Bevorzugt */
@media(max-width:560px){
.grid-layout .card>.between{align-items:flex-start}
.grid-layout .card>.between .me-tools{gap:2px}
.grid-layout .card>.between .edit-link-small{margin-top:-2px}
.grid-layout .card>.mark-toolbar{margin-top:16px}
}
/* v8.02 — Mobile: Zeit-Trennstrich exakt geometrisch zentriert */
@media(max-width:760px){
.day-time-panel,
.date-dimension .day-time-panel,
.fixed-date-time .day-time-panel{
position:relative!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
column-gap:34px!important;
}
.day-time-panel .time-caption,
.date-dimension .day-time-panel .time-caption,
.fixed-date-time .day-time-panel .time-caption{
grid-column:1/-1!important;
}
.day-time-panel .time-dash,
.date-dimension .day-time-panel .time-dash,
.fixed-date-time .day-time-panel .time-dash{
position:absolute!important;
left:50%!important;
top:calc(50% + 10px)!important;
transform:translate(-50%,-50%)!important;
width:auto!important;
margin:0!important;
padding:0!important;
text-align:center!important;
pointer-events:none!important;
}
.day-time-panel input,
.date-dimension .day-time-panel input,
.fixed-date-time .day-time-panel input{
width:100%!important;
min-width:0!important;
max-width:100%!important;
box-sizing:border-box!important;
}
}
/* v8.04 — Mobile: Zeitfelder wirklich symmetrisch, Trennstrich dazwischen */
@media(max-width:760px){
.day-time-panel,
.date-dimension .day-time-panel,
.fixed-date-time .day-time-panel{
position:relative!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr)!important;
column-gap:8px!important;
align-items:center!important;
}
.day-time-panel .time-caption,
.date-dimension .day-time-panel .time-caption,
.fixed-date-time .day-time-panel .time-caption{
grid-column:1/-1!important;
}
.day-time-panel .time-dash,
.date-dimension .day-time-panel .time-dash,
.fixed-date-time .day-time-panel .time-dash{
position:static!important;
left:auto!important;
top:auto!important;
transform:none!important;
grid-column:2!important;
justify-self:center!important;
align-self:center!important;
width:24px!important;
margin:0!important;
padding:0!important;
text-align:center!important;
line-height:1!important;
}
.day-time-panel .dim-start,
.date-dimension .day-time-panel .dim-start,
.fixed-date-time .day-time-panel .dim-start{
grid-column:1!important;
}
.day-time-panel .dim-end,
.date-dimension .day-time-panel .dim-end,
.fixed-date-time .day-time-panel .dim-end{
grid-column:3!important;
}
.day-time-panel input,
.date-dimension .day-time-panel input,
.fixed-date-time .day-time-panel input{
width:100%!important;
min-width:0!important;
max-width:100%!important;
box-sizing:border-box!important;
}
}
/* v8.05 — exakt der Legenden-Grünton bei einer einzigen verfügbaren Person */
.fixed-option.fixed-option-heat.single-available{
background:#e4f1ec !important;
}
/* v8.06 — Teilnehmerfilter ohne vertikales Rest-Hüpfen */
.fixed-options-grid.participant-empty-result{
align-content:start;
}
.fixed-options-grid.participant-empty-result .fixed-options-empty{
box-sizing:border-box;
width:100%;
}
/* v8.07 — ausschliesslich Mobile: Zeitzeile kompakter und optisch sauber */
@media(max-width:760px){
.day-time-panel,
.date-dimension .day-time-panel,
.fixed-date-time .day-time-panel{
display:grid!important;
grid-template-columns:minmax(0,142px) 22px minmax(0,142px)!important;
justify-content:center!important;
column-gap:14px!important;
align-items:center!important;
width:100%!important;
}
.day-time-panel .time-caption,
.date-dimension .day-time-panel .time-caption,
.fixed-date-time .day-time-panel .time-caption{
grid-column:1/-1!important;
justify-self:stretch!important;
}
.day-time-panel .dim-start,
.date-dimension .day-time-panel .dim-start,
.fixed-date-time .day-time-panel .dim-start{
grid-column:1!important;
justify-self:end!important;
}
.day-time-panel .time-dash,
.date-dimension .day-time-panel .time-dash,
.fixed-date-time .day-time-panel .time-dash{
grid-column:2!important;
justify-self:center!important;
align-self:center!important;
width:22px!important;
position:static!important;
transform:none!important;
margin:0!important;
padding:0!important;
text-align:center!important;
line-height:1!important;
}
.day-time-panel .dim-end,
.date-dimension .day-time-panel .dim-end,
.fixed-date-time .day-time-panel .dim-end{
grid-column:3!important;
justify-self:start!important;
}
.day-time-panel input,
.date-dimension .day-time-panel input,
.fixed-date-time .day-time-panel input{
width:142px!important;
min-width:142px!important;
max-width:142px!important;
box-sizing:border-box!important;
}
}
@media(max-width:390px){
.day-time-panel,
.date-dimension .day-time-panel,
.fixed-date-time .day-time-panel{
grid-template-columns:minmax(0,132px) 20px minmax(0,132px)!important;
column-gap:10px!important;
}
.day-time-panel input,
.date-dimension .day-time-panel input,
.fixed-date-time .day-time-panel input{
width:132px!important;
min-width:132px!important;
max-width:132px!important;
}
}
/* v8.08 — nur Mobile: etwas Luft links/rechts innerhalb der weißen Zeitbox */
@media(max-width:760px){
.day-time-panel,
.date-dimension .day-time-panel,
.fixed-date-time .day-time-panel{
padding-left:10px!important;
padding-right:10px!important;
box-sizing:border-box!important;
}
}
@media(max-width:390px){
.day-time-panel,
.date-dimension .day-time-panel,
.fixed-date-time .day-time-panel{
padding-left:8px!important;
padding-right:8px!important;
}
}
/* v8.09 — nur Handy: Zeitfelder mit echter Innenluft + Modusbuttons sicher im Viewport */
@media(max-width:560px){
/* Wochentage / Daten dürfen niemals über den Kartenrand hinausragen. */
.creator .mode-switch{
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
gap:10px!important;
width:100%!important;
max-width:100%!important;
box-sizing:border-box!important;
}
.creator .mode-switch .mode-btn{
width:100%!important;
max-width:100%!important;
min-width:0!important;
box-sizing:border-box!important;
padding-left:10px!important;
padding-right:10px!important;
white-space:nowrap!important;
}
/* Die gesamte Zeit-Gruppe ist schmaler als die weiße Box.
Dadurch ist links UND rechts sichtbar Luft – unabhängig von iOS-input-Breiten. */
.day-time-panel,
.date-dimension .day-time-panel,
.fixed-date-time .day-time-panel{
width:calc(100% - 28px)!important;
max-width:calc(100% - 28px)!important;
margin-left:auto!important;
margin-right:auto!important;
padding-left:0!important;
padding-right:0!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr)!important;
column-gap:10px!important;
justify-content:stretch!important;
align-items:center!important;
box-sizing:border-box!important;
}
.day-time-panel .time-caption,
.date-dimension .day-time-panel .time-caption,
.fixed-date-time .day-time-panel .time-caption{
grid-column:1/-1!important;
}
.day-time-panel .dim-start,
.date-dimension .day-time-panel .dim-start,
.fixed-date-time .day-time-panel .dim-start{
grid-column:1!important;
}
.day-time-panel .time-dash,
.date-dimension .day-time-panel .time-dash,
.fixed-date-time .day-time-panel .time-dash{
grid-column:2!important;
position:static!important;
transform:none!important;
width:20px!important;
justify-self:center!important;
text-align:center!important;
margin:0!important;
padding:0!important;
}
.day-time-panel .dim-end,
.date-dimension .day-time-panel .dim-end,
.fixed-date-time .day-time-panel .dim-end{
grid-column:3!important;
}
.day-time-panel input,
.date-dimension .day-time-panel input,
.fixed-date-time .day-time-panel input{
width:100%!important;
min-width:0!important;
max-width:100%!important;
box-sizing:border-box!important;
}
}
/* v8.10 — Korrektur Mobile-Zeitbox:
weiße Box bleibt voll breit; nur die inneren Zeitfelder rücken nach innen */
@media(max-width:560px){
.day-time-panel,
.date-dimension .day-time-panel,
.fixed-date-time .day-time-panel{
width:100%!important;
max-width:100%!important;
margin-left:0!important;
margin-right:0!important;
padding-left:18px!important;
padding-right:18px!important;
box-sizing:border-box!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr)!important;
column-gap:12px!important;
align-items:center!important;
}
.day-time-panel .time-caption,
.date-dimension .day-time-panel .time-caption,
.fixed-date-time .day-time-panel .time-caption{
grid-column:1/-1!important;
}
.day-time-panel .dim-start,
.date-dimension .day-time-panel .dim-start,
.fixed-date-time .day-time-panel .dim-start,
.day-time-panel .dim-end,
.date-dimension .day-time-panel .dim-end,
.fixed-date-time .day-time-panel .dim-end{
width:100%!important;
min-width:0!important;
max-width:100%!important;
box-sizing:border-box!important;
}
.day-time-panel .time-dash,
.date-dimension .day-time-panel .time-dash,
.fixed-date-time .day-time-panel .time-dash{
width:20px!important;
justify-self:center!important;
text-align:center!important;
}
}
@media(max-width:390px){
.day-time-panel,
.date-dimension .day-time-panel,
.fixed-date-time .day-time-panel{
padding-left:14px!important;
padding-right:14px!important;
column-gap:10px!important;
}
}
/* v8.11 — nur Handy: Datumszeile sicher innerhalb der Karte halten */
@media(max-width:560px){
#dates,
.date-dimension,
.date-head{
width:100%!important;
max-width:100%!important;
min-width:0!important;
box-sizing:border-box!important;
}
#dates{
overflow:hidden!important;
}
.date-dimension{
overflow:hidden!important;
}
.date-head{
position:relative!important;
overflow:hidden!important;
}
.date-head .dim-date{
display:block!important;
box-sizing:border-box!important;
inline-size:100%!important;
width:100%!important;
min-inline-size:0!important;
min-width:0!important;
max-inline-size:100%!important;
max-width:100%!important;
padding-left:14px!important;
padding-right:50px!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.date-head .remove-dim{
right:8px!important;
max-width:38px!important;
box-sizing:border-box!important;
}
}
/* v8.12 — finaler Mobile-Feinschliff nach abgestimmter Darstellung */
@media(max-width:560px){
/* Datumszeile: vollständig abgerundet, Datum exakt mittig, × rechts innerhalb der Karte */
.date-head{
position:relative!important;
display:grid!important;
grid-template-columns:42px minmax(0,1fr) 42px!important;
align-items:center!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
box-sizing:border-box!important;
overflow:hidden!important;
border:1px solid #e3e6eb!important;
border-radius:16px!important;
background:#eef0f3!important;
}
.date-head .dim-date{
grid-column:2!important;
justify-self:stretch!important;
display:block!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
box-sizing:border-box!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
padding:13px 0!important;
text-align:center!important;
font-weight:750!important;
color:#30343b!important;
}
.date-head .remove-dim{
grid-column:3!important;
position:static!important;
transform:none!important;
justify-self:center!important;
align-self:center!important;
width:36px!important;
min-width:36px!important;
max-width:36px!important;
height:36px!important;
padding:0!important;
margin:0!important;
display:grid!important;
place-items:center!important;
background:transparent!important;
border:0!important;
box-sizing:border-box!important;
}
/* Zeitbox bleibt voll breit und rund. */
.date-dimension .day-time-panel,
.day-time-panel,
.fixed-date-time .day-time-panel{
width:100%!important;
max-width:100%!important;
min-width:0!important;
margin-left:0!important;
margin-right:0!important;
padding:12px 18px 16px!important;
box-sizing:border-box!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr)!important;
column-gap:14px!important;
align-items:center!important;
border-radius:16px!important;
}
.date-dimension .day-time-panel .time-caption,
.day-time-panel .time-caption,
.fixed-date-time .day-time-panel .time-caption{
grid-column:1/-1!important;
margin-bottom:2px!important;
}
/* Zeitfelder haben sichtbar Luft zum Rand der weißen Box. */
.date-dimension .day-time-panel .dim-start,
.day-time-panel .dim-start,
.fixed-date-time .day-time-panel .dim-start{
grid-column:1!important;
}
.date-dimension .day-time-panel .time-dash,
.day-time-panel .time-dash,
.fixed-date-time .day-time-panel .time-dash{
grid-column:2!important;
position:static!important;
transform:none!important;
justify-self:center!important;
align-self:center!important;
width:22px!important;
margin:0!important;
padding:0!important;
text-align:center!important;
line-height:1!important;
}
.date-dimension .day-time-panel .dim-end,
.day-time-panel .dim-end,
.fixed-date-time .day-time-panel .dim-end{
grid-column:3!important;
}
.date-dimension .day-time-panel input,
.day-time-panel input,
.fixed-date-time .day-time-panel input{
width:100%!important;
min-width:0!important;
max-width:100%!important;
box-sizing:border-box!important;
}
}
@media(max-width:390px){
.date-dimension .day-time-panel,
.day-time-panel,
.fixed-date-time .day-time-panel{
padding-left:14px!important;
padding-right:14px!important;
column-gap:10px!important;
}
}
/* v8.13 — nur Handy: Wochentage kompakt als Accordion */
@media(max-width:560px){
.weekday-toggle-picker{
display:grid!important;
grid-template-columns:1fr!important;
gap:10px!important;
}
.weekday-dimension{
width:100%!important;
margin:0!important;
}
.weekday-dimension .weekday-toggle{
width:100%!important;
min-width:0!important;
margin:0!important;
}
/* Auf dem Handy reicht "active" nicht zum Öffnen:
nur der aktuell angetippte Tag zeigt seine Zeiten. */
.weekday-dimension .day-time-panel{
display:none!important;
}
.weekday-dimension.mobile-open .day-time-panel{
display:grid!important;
margin-top:10px!important;
}
/* Bereits ausgewählte, aber geschlossene Tage bleiben klar markiert. */
.weekday-dimension.active .weekday-toggle{
background:#111827!important;
color:#fff!important;
border-color:#111827!important;
}
}
/* v8.14 — nur Handy: Zeitfelder optisch wie auf Mac */
@media(max-width:560px){
.weekday-dimension.mobile-open .day-time-panel{
/* Zeit-Titel bleibt links; die Zeitzeile selbst wird kompakt zentriert. */
display:grid!important;
}
.weekday-dimension.mobile-open .day-time-panel .time-row{
display:grid!important;
grid-template-columns:108px 28px 108px!important;
justify-content:center!important;
align-items:center!important;
column-gap:10px!important;
width:100%!important;
}
.weekday-dimension.mobile-open .day-time-panel .time-row input,
.weekday-dimension.mobile-open .day-time-panel input[type="time"]{
width:108px!important;
min-width:108px!important;
max-width:108px!important;
box-sizing:border-box!important;
}
.weekday-dimension.mobile-open .day-time-panel .time-separator,
.weekday-dimension.mobile-open .day-time-panel .dash{
width:28px!important;
min-width:28px!important;
text-align:center!important;
justify-self:center!important;
margin:0!important;
}
}
/* v8.14 correction: tatsächliche Struktur von .day-time-panel */
@media(max-width:560px){
.weekday-dimension.mobile-open .day-time-panel{
grid-template-columns:108px 28px 108px!important;
grid-template-areas:
"caption caption caption"
"start dash end"!important;
justify-content:center!important;
align-items:center!important;
column-gap:10px!important;
row-gap:8px!important;
padding-left:16px!important;
padding-right:16px!important;
box-sizing:border-box!important;
}
.weekday-dimension.mobile-open .day-time-panel .time-caption{
grid-area:caption!important;
justify-self:start!important;
width:100%!important;
}
.weekday-dimension.mobile-open .day-time-panel .dim-start{
grid-area:start!important;
}
.weekday-dimension.mobile-open .day-time-panel .time-dash{
grid-area:dash!important;
width:28px!important;
min-width:28px!important;
text-align:center!important;
justify-self:center!important;
margin:0!important;
}
.weekday-dimension.mobile-open .day-time-panel .dim-end{
grid-area:end!important;
}
.weekday-dimension.mobile-open .day-time-panel .dim-start,
.weekday-dimension.mobile-open .day-time-panel .dim-end{
width:108px!important;
min-width:108px!important;
max-width:108px!important;
justify-self:center!important;
box-sizing:border-box!important;
}
}
/* v8.15 — Mobile-Funktion exakt wie Desktop:
Jeder Wochentag öffnet/schließt unabhängig. */
@media(max-width:560px){
.weekday-dimension .day-time-panel{
display:none!important;
}
.weekday-dimension.active .day-time-panel{
display:grid!important;
grid-template-columns:108px 28px 108px!important;
grid-template-areas:
"caption caption caption"
"start dash end"!important;
justify-content:center!important;
align-items:center!important;
column-gap:10px!important;
row-gap:8px!important;
margin-top:10px!important;
padding-left:16px!important;
padding-right:16px!important;
box-sizing:border-box!important;
}
.weekday-dimension.active .day-time-panel .time-caption{
grid-area:caption!important;
justify-self:start!important;
width:100%!important;
}
.weekday-dimension.active .day-time-panel .dim-start{
grid-area:start!important;
}
.weekday-dimension.active .day-time-panel .time-dash{
grid-area:dash!important;
width:28px!important;
min-width:28px!important;
text-align:center!important;
justify-self:center!important;
margin:0!important;
}
.weekday-dimension.active .day-time-panel .dim-end{
grid-area:end!important;
}
.weekday-dimension.active .day-time-panel .dim-start,
.weekday-dimension.active .day-time-panel .dim-end{
width:108px!important;
min-width:108px!important;
max-width:108px!important;
justify-self:center!important;
box-sizing:border-box!important;
}
}
/* v8.16 — Mobile-Wochentage: unabhängiges Öffnen/Schließen zuverlässig erzwingen */
@media(max-width:560px){
.weekday-dimension .day-time-panel[hidden]{
display:none!important;
}
.weekday-dimension.active .day-time-panel:not([hidden]){
display:grid!important;
}
}
/* v8.17 — Superadmin: Live-Verbreitungsdashboard unter „Guthaben verschenken“ */
.platform-stats{
margin-top:26px;
padding-top:24px;
border-top:1px solid var(--line);
}
.platform-stats h3{margin:0 0 4px}
.platform-stats-head{align-items:flex-start}
.platform-live-dot{
display:inline-flex;align-items:center;gap:7px;
padding:6px 9px;border-radius:999px;
background:#eef7f1;color:#176b5b;
font-size:11px;font-weight:850;white-space:nowrap;
}
.platform-live-dot i{
width:7px;height:7px;border-radius:50%;background:#278e72;
box-shadow:0 0 0 4px rgba(34,165,101,.12);
}
.platform-kpis{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;margin-top:16px;
}
.platform-kpi{
padding:14px;border:1px solid var(--line);border-radius:16px;background:#fff;
min-width:0;
}
.platform-kpi span,.platform-kpi small{display:block;color:var(--muted)}
.platform-kpi span{font-size:12px;font-weight:750}
.platform-kpi strong{display:block;font-size:26px;line-height:1.1;margin:5px 0 3px;letter-spacing:-.5px}
.platform-kpi small{font-size:11px}
.platform-stats-grid{
display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
gap:12px;margin-top:12px;
}
.platform-stat-card{
border:1px solid var(--line);border-radius:18px;background:#fff;padding:15px;min-width:0;
}
.platform-stat-card>.between small{color:var(--muted);font-size:11px}
.timezone-visual{
position:relative;height:88px;margin:12px 0 8px;
border-radius:14px;background:linear-gradient(180deg,#f8faf9,#f3f6f4);
overflow:hidden;display:grid;place-items:center;
}
.tz-core{
position:relative;z-index:2;display:grid;place-items:center;
width:38px;height:38px;border-radius:50%;background:#111827;color:#fff;font-size:12px;font-weight:900;
}
.tz-orbit{position:absolute;border:1px solid #d8e8de;border-radius:50%}
.tz-orbit.one{width:92px;height:34px;transform:rotate(12deg)}
.tz-orbit.two{width:150px;height:50px;transform:rotate(-18deg)}
.tz-orbit.three{width:220px;height:70px;transform:rotate(8deg)}
.tz-orbit:after{
content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#278e72;top:50%;right:-3px;
}
.timezone-list{display:flex;flex-direction:column;gap:7px}
.timezone-row{display:grid;grid-template-columns:minmax(100px,1fr) minmax(60px,1fr) auto;gap:9px;align-items:center}
.timezone-copy{min-width:0}.timezone-copy strong,.timezone-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.timezone-copy strong{font-size:12px}.timezone-copy small{font-size:9px;color:var(--muted)}
.timezone-meter{height:6px;border-radius:999px;background:#eef1f2;overflow:hidden}
.timezone-meter i{display:block;height:100%;border-radius:999px;background:#278e72}
.timezone-row b{font-size:11px}
.platform-empty{font-size:12px;color:var(--muted);padding:8px 0}
.platform-trend{
height:190px;display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:5px;
align-items:end;padding:22px 2px 24px;margin-top:10px;border-bottom:1px solid var(--line);
}
.trend-bar{position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center}
.trend-bar i{display:block;width:100%;max-width:18px;min-height:3px;border-radius:5px 5px 2px 2px;background:#111827}
.trend-bar span{position:absolute;bottom:calc(var(--bar-h,0px) + 2px);font-size:9px;color:var(--muted)}
.trend-bar small{position:absolute;bottom:-19px;font-size:8px;color:var(--muted);white-space:nowrap}
.platform-updated{margin:10px 2px 0;color:var(--muted);font-size:10px;text-align:right}
@media(max-width:760px){
.platform-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.platform-stats-grid{grid-template-columns:1fr}
.platform-trend{height:150px}
}
/* v8.18 — Dashboard hängt direkt am sichtbaren Superadmin-Bereich */
#giftCreditsSection > #platformStatsSection{
display:block;
width:100%;
}
/* v8.19 — Superadmin-Dashboard immer sichtbar, sobald der Geschenk-Bereich sichtbar ist */
#giftCreditsSection:not([hidden]) #platformStatsSection{
display:block!important;
visibility:visible!important;
opacity:1!important;
height:auto!important;
overflow:visible!important;
}
/* v8.25 — nur Darstellung der Zeitfelder korrigiert */
/* Mac/Desktop: Uhrzeiten wieder vollständig lesbar wie im früheren Layout */
@media(min-width:761px){
.day-time-panel{
grid-template-columns:140px 34px 140px!important;
justify-content:start!important;
column-gap:14px!important;
align-items:center!important;
}
.day-time-panel .dim-start,
.day-time-panel .dim-end{
width:140px!important;
min-width:140px!important;
max-width:140px!important;
box-sizing:border-box!important;
}
.day-time-panel .time-dash{
width:34px!important;
min-width:34px!important;
justify-self:center!important;
text-align:center!important;
margin:0!important;
}
}
/* Handy – Datenmodus:
exakt dieselbe kompakte Zeitdarstellung wie im gewünschten Beispiel:
[18:00] – [22:00], sauber zentriert mit Luft zum Außenrahmen. */
@media(max-width:560px){
.date-dimension .day-time-panel,
.fixed-date-time .day-time-panel{
display:grid!important;
grid-template-columns:108px 28px 108px!important;
grid-template-areas:
"caption caption caption"
"start dash end"!important;
justify-content:center!important;
align-items:center!important;
column-gap:10px!important;
row-gap:8px!important;
width:100%!important;
max-width:100%!important;
padding:14px 18px 16px!important;
box-sizing:border-box!important;
}
.date-dimension .day-time-panel .time-caption,
.fixed-date-time .day-time-panel .time-caption{
grid-area:caption!important;
justify-self:start!important;
width:100%!important;
margin:0 0 2px!important;
}
.date-dimension .day-time-panel .dim-start,
.fixed-date-time .day-time-panel .dim-start{
grid-area:start!important;
}
.date-dimension .day-time-panel .time-dash,
.fixed-date-time .day-time-panel .time-dash{
grid-area:dash!important;
width:28px!important;
min-width:28px!important;
max-width:28px!important;
justify-self:center!important;
align-self:center!important;
text-align:center!important;
margin:0!important;
padding:0!important;
position:static!important;
transform:none!important;
}
.date-dimension .day-time-panel .dim-end,
.fixed-date-time .day-time-panel .dim-end{
grid-area:end!important;
}
.date-dimension .day-time-panel .dim-start,
.date-dimension .day-time-panel .dim-end,
.fixed-date-time .day-time-panel .dim-start,
.fixed-date-time .day-time-panel .dim-end{
width:108px!important;
min-width:108px!important;
max-width:108px!important;
justify-self:center!important;
box-sizing:border-box!important;
}
}
/* v8.27 — Admin: Termine nur löschen oder neu hinzufügen, nie bearbeiten */
.admin-dates-section{
margin-top:24px;
padding:18px;
border:1px solid var(--line);
border-radius:18px;
background:#fafbfc;
}
.admin-dates-section h3{margin:0 0 4px}
.admin-dates-list{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.admin-date-row{
display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;
}
.admin-date-copy{display:flex;flex-direction:column;min-width:0}
.admin-date-copy strong{font-size:14px}
.admin-date-copy span{font-size:13px;color:var(--muted);margin-top:2px}
.admin-date-copy small{font-size:11px;color:var(--muted);margin-top:3px}
.admin-add-date-form{
display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) auto;
gap:10px;align-items:end;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
}
@media(max-width:700px){
.admin-dates-section>.between{align-items:flex-start;gap:12px;flex-direction:column}
.admin-dates-section>.between button{width:100%}
.admin-date-row{align-items:flex-start}
.admin-add-date-form{grid-template-columns:1fr 1fr}
.admin-add-date-form .field:first-child{grid-column:1/-1}
.admin-add-date-form>button{grid-column:1/-1;width:100%}
}
/* v8.28 — Desktop-Wochentage: kein Überlaufen/Überlappen mehr */
@media(min-width:761px){
/* Die Wochentagsliste darf niemals breiter als ihr Container werden. */
.weekdays-grid,
#weekdays,
.weekday-dimensions{
width:100%!important;
max-width:100%!important;
min-width:0!important;
overflow:visible!important;
box-sizing:border-box!important;
}
/* Drei Spalten sauber innerhalb des verfügbaren Platzes. */
.weekdays-grid,
#weekdays{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:16px 18px!important;
}
.weekday-dimension{
min-width:0!important;
max-width:100%!important;
width:auto!important;
overflow:visible!important;
}
.weekday-dimension .weekday-toggle,
.weekday-dimension > button{
width:100%!important;
max-width:100%!important;
min-width:0!important;
box-sizing:border-box!important;
}
/* Zeitbox immer innerhalb der Tages-Spalte halten. */
.weekday-dimension .day-time-panel{
width:100%!important;
max-width:100%!important;
min-width:0!important;
box-sizing:border-box!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr)!important;
column-gap:10px!important;
align-items:center!important;
padding:14px 16px 16px!important;
}
.weekday-dimension .day-time-panel .dim-start,
.weekday-dimension .day-time-panel .dim-end{
width:100%!important;
min-width:0!important;
max-width:100%!important;
box-sizing:border-box!important;
}
.weekday-dimension .day-time-panel .time-dash{
width:28px!important;
min-width:28px!important;
max-width:28px!important;
justify-self:center!important;
text-align:center!important;
margin:0!important;
}
}
/* Mittlere Desktop-Breiten: lieber zwei Spalten statt Überlauf. */
@media(min-width:761px) and (max-width:1180px){
.weekdays-grid,
#weekdays{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
}
/* v8.29 — "+ Anderen Termin hinzufügen" wieder klar oberhalb der Terminliste */
.admin-add-date-top{
margin-top:14px;
}
@media(max-width:700px){
.admin-add-date-top{
width:100%;
}
}
/* v8.30 — Wochentage: nur markierte Tage zeigen ihre Zeitfelder */
.weekday-dimension .day-time-panel[hidden]{
display:none!important;
}
/* v8.31 — Date/Time Inputs browserübergreifend näher an Safari
Native Picker bleiben erhalten; Safari/iOS werden nicht überschrieben. */
/* Chromium / Edge / Chrome auf Desktop */
@supports selector(input::-webkit-calendar-picker-indicator) {
@media (hover:hover) and (pointer:fine) {
input[type="date"],
input[type="time"] {
box-sizing:border-box;
font-family:inherit;
font-size:inherit;
font-weight:inherit;
line-height:1.2;
}
/* Chromium fügt intern eigene Abstände um die Segmente ein.
Diese werden reduziert, damit die Werte wie in Safari vollständig
und ruhig im bestehenden ZeitFinder-Feld stehen. */
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit {
padding:0;
margin:0;
}
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="time"]::-webkit-datetime-edit-fields-wrapper {
padding:0;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
margin:0;
padding:0;
flex:0 0 auto;
cursor:pointer;
}
}
}
/* Firefox: äussere Darstellung angleichen, nativen Picker unangetastet lassen. */
@supports (-moz-appearance:none) {
@media (hover:hover) and (pointer:fine) {
input[type="date"],
input[type="time"] {
box-sizing:border-box;
font-family:inherit;
font-size:inherit;
font-weight:inherit;
line-height:1.2;
}
}
}
/* v8.32 — Chrome Desktop, Datenmodus: vollständige Uhrzeiten wie in Safari */
@media (hover:hover) and (pointer:fine) and (min-width:561px){
html.browser-chromium .date-dimension .day-time-panel,
html.browser-chromium .fixed-date-time .day-time-panel{
display:grid!important;
grid-template-columns:158px 28px 158px!important;
grid-template-areas:
"caption caption caption"
"start dash end"!important;
justify-content:center!important;
column-gap:12px!important;
row-gap:8px!important;
padding:14px 16px 16px!important;
box-sizing:border-box!important;
}
html.browser-chromium .date-dimension .day-time-panel .time-caption,
html.browser-chromium .fixed-date-time .day-time-panel .time-caption{
grid-area:caption!important;
}
html.browser-chromium .date-dimension .day-time-panel .dim-start,
html.browser-chromium .fixed-date-time .day-time-panel .dim-start{
grid-area:start!important;
}
html.browser-chromium .date-dimension .day-time-panel .time-dash,
html.browser-chromium .fixed-date-time .day-time-panel .time-dash{
grid-area:dash!important;
width:28px!important;
min-width:28px!important;
max-width:28px!important;
margin:0!important;
padding:0!important;
text-align:center!important;
justify-self:center!important;
}
html.browser-chromium .date-dimension .day-time-panel .dim-end,
html.browser-chromium .fixed-date-time .day-time-panel .dim-end{
grid-area:end!important;
}
html.browser-chromium .date-dimension .day-time-panel .dim-start,
html.browser-chromium .date-dimension .day-time-panel .dim-end,
html.browser-chromium .fixed-date-time .day-time-panel .dim-start,
html.browser-chromium .fixed-date-time .day-time-panel .dim-end{
width:158px!important;
min-width:158px!important;
max-width:158px!important;
padding-left:16px!important;
padding-right:10px!important;
box-sizing:border-box!important;
}
}
/* v8.34 — eigener Name direkt über Namens-Pill änderbar */
#mePill:not([hidden]){
cursor:pointer;
}
#mePill:not([hidden]):hover{
border-color:#b8c0cc;
}
#mePill:not([hidden]):focus-visible{
outline:2px solid #0b63ce;
outline-offset:2px;
}
/* v8.35 — Superadmin: durchsuchbare Admin-Nutzungsübersicht unter ZeitFinder live */
.platform-admins-card{
margin-top:18px;
padding:18px;
border:1px solid var(--line);
border-radius:18px;
background:#fff;
}
.platform-admins-head{
gap:16px;
align-items:center;
margin-bottom:14px;
}
.platform-admins-head>div{
display:flex;
flex-direction:column;
gap:3px;
}
.platform-admins-head small{color:var(--muted)}
#statAdminSearch{
width:min(360px,100%);
min-height:42px;
padding:10px 13px;
border:1px solid var(--line);
border-radius:12px;
background:#fafbfc;
font:inherit;
}
.platform-admin-table-wrap{
width:100%;
overflow-x:auto;
border:1px solid var(--line);
border-radius:14px;
}
.platform-admin-table{
width:100%;
min-width:760px;
border-collapse:collapse;
font-size:14px;
}
.platform-admin-table th,
.platform-admin-table td{
padding:12px 14px;
text-align:left;
border-bottom:1px solid var(--line);
white-space:nowrap;
}
.platform-admin-table th{
color:var(--muted);
font-size:12px;
font-weight:700;
background:#fafbfc;
}
.platform-admin-table tbody tr:last-child td{border-bottom:0}
.platform-admin-table td:nth-child(3),
.platform-admin-table td:nth-child(4),
.platform-admin-table td:nth-child(5){
text-align:right;
font-variant-numeric:tabular-nums;
}
.platform-admin-email{font-weight:650}
.platform-admin-empty{
text-align:center!important;
color:var(--muted);
padding:24px!important;
}
@media(max-width:700px){
.platform-admins-head{
align-items:stretch;
flex-direction:column;
}
#statAdminSearch{width:100%}
}
/* v8.36 — Verbreitung nach Land oder Stadt */
.platform-location-head{gap:14px}
.platform-location-toggle{
display:inline-flex;
gap:4px;
padding:3px;
border:1px solid var(--line);
border-radius:10px;
background:#f5f6f8;
}
.platform-location-toggle button{
border:0;
background:transparent;
color:var(--muted);
font:inherit;
font-size:12px;
font-weight:700;
padding:5px 9px;
border-radius:7px;
cursor:pointer;
}
.platform-location-toggle button.active{
background:#fff;
color:var(--text);
box-shadow:0 1px 3px rgba(15,23,42,.08);
}
.tz-core{
letter-spacing:0!important;
}
/* v8.37 — sichtbare Kopierbestätigung direkt am Button */
button.copy-confirmed{
box-shadow:inset 0 0 0 2px rgba(34,197,94,.28);
}
/* v8.38 — Modal "Name ändern" ruhiger und kompakter */
#renameParticipantModal .modal-card{
width:min(560px, calc(100vw - 32px));
max-width:560px;
padding:28px 30px 30px;
border-radius:26px;
}
#renameParticipantModal .between{
align-items:flex-start;
gap:20px;
margin-bottom:22px;
}
#renameParticipantModal h3{
margin:0 0 6px;
font-size:28px;
line-height:1.15;
}
#renameParticipantModal .sub{
margin:0;
max-width:430px;
line-height:1.45;
}
#renameParticipantModal #closeRenameParticipant{
flex:0 0 auto;
width:38px;
height:38px;
min-width:38px;
padding:0;
display:grid;
place-items:center;
border-radius:50%;
font-size:22px;
line-height:1;
}
#renameParticipantModal .field{
margin:0 0 16px;
}
#renameParticipantModal .field label{
display:block;
margin-bottom:8px;
}
#renameParticipantModal #renameParticipantInput{
width:100%;
min-height:54px;
padding:12px 16px;
border-radius:16px;
box-sizing:border-box;
}
#renameParticipantModal #saveRenameParticipant{
width:100%;
min-height:54px;
margin-top:0;
border-radius:16px;
}
@media(max-width:560px){
#renameParticipantModal .modal-card{
width:calc(100vw - 24px);
padding:22px 20px 20px;
border-radius:22px;
}
#renameParticipantModal h3{
font-size:24px;
}
#renameParticipantModal .between{
gap:12px;
margin-bottom:18px;
}
#renameParticipantModal #renameParticipantInput,
#renameParticipantModal #saveRenameParticipant{
min-height:52px;
}
}
/* v8.39 — Superadmin-Tabelle: Überschriften und Zahlen exakt spaltenbündig */
.platform-admin-table{
table-layout:fixed;
}
.platform-admin-table th:nth-child(1),
.platform-admin-table td:nth-child(1){ width:42%; }
.platform-admin-table th:nth-child(2),
.platform-admin-table td:nth-child(2){ width:12%; }
.platform-admin-table th:nth-child(3),
.platform-admin-table td:nth-child(3){ width:14%; }
.platform-admin-table th:nth-child(4),
.platform-admin-table td:nth-child(4){ width:16%; }
.platform-admin-table th:nth-child(5),
.platform-admin-table td:nth-child(5){ width:16%; }
.platform-admin-table th:nth-child(3),
.platform-admin-table th:nth-child(4),
.platform-admin-table th:nth-child(5),
.platform-admin-table td:nth-child(3),
.platform-admin-table td:nth-child(4),
.platform-admin-table td:nth-child(5){
text-align:right!important;
}
.platform-admin-table th:nth-child(2),
.platform-admin-table td:nth-child(2){
text-align:left!important;
}
.platform-admin-table td:nth-child(3),
.platform-admin-table td:nth-child(4),
.platform-admin-table td:nth-child(5){
font-variant-numeric:tabular-nums;
}
/* v8.42 — Chrome/Chromium: Zeitfelder im Datenmodus bleiben im weißen Zeit-Container */
@supports selector(input::-webkit-calendar-picker-indicator) {
@media (hover:hover) and (pointer:fine) {
.date-dimension .day-time-panel,
.fixed-date-time .day-time-panel{
grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr)!important;
column-gap:12px!important;
width:100%!important;
max-width:100%!important;
box-sizing:border-box!important;
overflow:hidden!important;
}
.date-dimension .day-time-panel .dim-start,
.date-dimension .day-time-panel .dim-end,
.fixed-date-time .day-time-panel .dim-start,
.fixed-date-time .day-time-panel .dim-end{
width:100%!important;
min-width:0!important;
max-width:100%!important;
box-sizing:border-box!important;
padding-left:14px!important;
padding-right:10px!important;
}
.date-dimension .day-time-panel .time-dash,
.fixed-date-time .day-time-panel .time-dash{
width:30px!important;
min-width:30px!important;
max-width:30px!important;
margin:0!important;
justify-self:center!important;
text-align:center!important;
}
/* Chrome reserviert rechts Platz für das native Uhr-Symbol.
Die innere Anzeige wird kompakt gehalten, ohne die äußere Feldbreite zu sprengen. */
.date-dimension input[type="time"]::-webkit-datetime-edit,
.fixed-date-time input[type="time"]::-webkit-datetime-edit{
min-width:0!important;
padding:0!important;
margin:0!important;
}
.date-dimension input[type="time"]::-webkit-calendar-picker-indicator,
.fixed-date-time input[type="time"]::-webkit-calendar-picker-indicator{
margin-left:6px!important;
flex:0 0 auto!important;
}
}
}
/* v8.43 — kurze Ausfüllhilfe erst nach gespeichertem Namen */
.availability-help{
margin:16px 0 12px;
padding:13px 15px;
border:1px solid var(--line);
border-radius:14px;
background:#fafbfc;
}
.availability-help[hidden]{display:none!important}
.availability-help strong{
display:block;
margin-bottom:3px;
font-size:14px;
}
.availability-help p{
margin:0;
color:var(--muted);
font-size:13px;
line-height:1.45;
}
/* v8.44 — Ausfüllhilfe ohne zusätzliche Überschrift */
.availability-help{
padding:12px 15px;
}
.availability-help p{
margin:0;
}
/* v8.45 — „Bevorzugt“ klarer als klickbare Option erkennbar */
.mark-toolbar button{
cursor:pointer;
}
@media (hover:hover) and (pointer:fine){
.mark-toolbar button:nth-child(2):hover{
background:#fff9e8;
border-color:#d4a72c;
box-shadow:0 4px 14px rgba(17,24,39,.10);
transform:translateY(-1px);
}
}
.mark-toolbar button:nth-child(2):focus-visible{
outline:3px solid rgba(197,138,42,.28);
outline-offset:2px;
}
.mark-toolbar button{
transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
/* v8.47 — Superadmin: Teilnehmende im Überblick */
.platform-participants-card{
margin-top:18px;
}
.platform-participant-table{
min-width:620px;
}
.platform-participant-table th:nth-child(1),
.platform-participant-table td:nth-child(1){
width:46%;
text-align:left!important;
}
.platform-participant-table th:nth-child(2),
.platform-participant-table td:nth-child(2){
width:34%;
text-align:left!important;
}
.platform-participant-table th:nth-child(3),
.platform-participant-table td:nth-child(3){
width:20%;
text-align:right!important;
font-variant-numeric:tabular-nums;
}
/* v8.48 — wenn „Bevorzugt“ aktiv ist, ist „Verfügbar“ beim Hover ebenfalls klar klickbar */
@media (hover:hover) and (pointer:fine){
.mark-toolbar:has(.mark-btn.preferred.active) .mark-btn:not(.preferred):hover{
background:#eef2f7;
border-color:#9aa4b2;
box-shadow:0 4px 14px rgba(17,24,39,.10);
transform:translateY(-1px);
}
}
.mark-toolbar:has(.mark-btn.preferred.active) .mark-btn:not(.preferred):focus-visible{
outline:3px solid rgba(15,23,42,.16);
outline-offset:2px;
}
/* v8.49 — Suche bei „Teilnehmende im Überblick“ exakt wie bei „Admins im Überblick“ */
#statParticipantSearch{
width:min(360px,100%);
min-height:42px;
padding:10px 13px;
border:1px solid var(--line);
border-radius:12px;
background:#fafbfc;
font:inherit;
box-sizing:border-box;
}
@media(max-width:700px){
#statParticipantSearch{
width:100%;
}
}
/* v8.50 — dezente, einheitliche Hover-Effekte für klickbare Buttons */
@media (hover:hover) and (pointer:fine){
button:not(:disabled),
.btn:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
.mark-btn:not(:disabled){
transition:
transform .14s ease,
box-shadow .14s ease,
filter .14s ease,
background-color .14s ease,
border-color .14s ease;
}
button:not(:disabled):hover,
.btn:not(:disabled):hover,
[role="button"]:not([aria-disabled="true"]):hover,
.mark-btn:not(:disabled):hover{
transform:translateY(-1px);
box-shadow:0 4px 12px rgba(17,24,39,.09);
filter:brightness(.985);
}
button:not(:disabled):active,
.btn:not(:disabled):active,
[role="button"]:not([aria-disabled="true"]):active,
.mark-btn:not(:disabled):active{
transform:translateY(0);
box-shadow:0 2px 6px rgba(17,24,39,.07);
}
}
/* Keine Hover-Bewegung auf Touch-Geräten */
@media (hover:none){
button,
.btn,
[role="button"],
.mark-btn{
transform:none;
}
}
/* v8.51 — auch aktive Auswahl-Buttons behalten einen klaren Hover-Effekt */
@media (hover:hover) and (pointer:fine){
.mark-btn.active:hover,
.mark-btn.preferred.active:hover{
transform:translateY(-1px);
box-shadow:0 5px 15px rgba(17,24,39,.13);
filter:brightness(.96);
cursor:pointer;
}
.mark-btn.active:active,
.mark-btn.preferred.active:active{
transform:translateY(0);
box-shadow:0 2px 7px rgba(17,24,39,.09);
filter:brightness(.94);
}
}
/* v8.52 — Wochentage auf grossem Desktop wieder kompakt:
Mo–Fr in einer Zeile, Sa/So darunter. */
@media(min-width:1181px){
.weekday-toggle-picker,
.weekdays-grid,
#weekdays{
grid-template-columns:repeat(5,minmax(0,1fr))!important;
gap:10px 12px!important;
}
.weekday-toggle{
min-height:48px!important;
padding:10px 12px!important;
}
}
/* Aktive Auswahl ist bereits eindeutig markiert:
kein zusätzlicher Hover/Lift auf dem gerade gewählten Modus. */
@media (hover:hover) and (pointer:fine){
.mark-toolbar .mark-btn.active:hover,
.mark-toolbar .mark-btn.preferred.active:hover{
transform:none!important;
box-shadow:none!important;
filter:none!important;
cursor:default;
}
.mark-toolbar .mark-btn.active:active,
.mark-toolbar .mark-btn.preferred.active:active{
transform:none!important;
box-shadow:none!important;
filter:none!important;
}
}
/* v8.53 — Admin-Aktionsbuttons: Teilnehmerlink / CSV klarer hoverbar */
@media (hover:hover) and (pointer:fine){
#shareParticipantBtn:hover,
#exportCsvBtn:hover,
[data-action="share-participant"]:hover,
[data-action="export-csv"]:hover{
background:#e3e7ed!important;
border-color:#d2d7df!important;
transform:translateY(-1px)!important;
box-shadow:0 5px 14px rgba(17,24,39,.10)!important;
filter:none!important;
cursor:pointer;
}
}
/* v8.55 — aktive Auswahl bleibt klickbar erkennbar */
.mark-toolbar .mark-btn{
cursor:pointer!important;
}
@media (hover:hover) and (pointer:fine){
/* Auch der aktuell aktive Modus bekommt wieder einen sehr dezenten Hover.
Farbe/Zustand bleiben erhalten; nur Schatten und minimaler Lift zeigen Klickbarkeit. */
.mark-toolbar .mark-btn.active:hover,
.mark-toolbar .mark-btn.preferred.active:hover{
cursor:pointer!important;
transform:translateY(-1px)!important;
box-shadow:0 5px 14px rgba(17,24,39,.11)!important;
filter:brightness(.985)!important;
}
.mark-toolbar .mark-btn.active:active,
.mark-toolbar .mark-btn.preferred.active:active{
transform:translateY(0)!important;
box-shadow:0 2px 6px rgba(17,24,39,.07)!important;
filter:brightness(.97)!important;
}
}
/* v8.56 — Verfügbar/Bevorzugt erst nach gespeichertem Namen interaktiv */
.mark-toolbar:not(.participant-ready) .mark-btn{
cursor:default!important;
}
/* Alle Hover-/Lift-Effekte der beiden Auswahlbuttons erst nach Namensspeicherung. */
@media (hover:hover) and (pointer:fine){
.mark-toolbar:not(.participant-ready) .mark-btn:hover,
.mark-toolbar:not(.participant-ready) .mark-btn.active:hover,
.mark-toolbar:not(.participant-ready) .mark-btn.preferred:hover,
.mark-toolbar:not(.participant-ready) .mark-btn.preferred.active:hover{
transform:none!important;
box-shadow:none!important;
filter:none!important;
}
}
/* Zentraler Hinweis direkt am Namensfeld */
#joinBox.name-required-attention{
border-color:#d63b3b!important;
box-shadow:0 0 0 3px rgba(214,59,59,.10)!important;
}
#joinBox.name-required-attention #nameInput{
border-color:#d63b3b!important;
box-shadow:0 0 0 3px rgba(214,59,59,.12)!important;
}
/* v8.57 — vor Namensspeicherung wirklich KEIN Hover auf Verfügbar/Bevorzugt */
@media (hover:hover) and (pointer:fine){
.mark-toolbar:not(.participant-ready) .mark-btn,
.mark-toolbar:not(.participant-ready) .mark-btn:hover,
.mark-toolbar:not(.participant-ready) .mark-btn:active,
.mark-toolbar:not(.participant-ready) .mark-btn.active:hover,
.mark-toolbar:not(.participant-ready) .mark-btn.preferred:hover,
.mark-toolbar:not(.participant-ready) .mark-btn.preferred.active:hover{
transform:none!important;
box-shadow:none!important;
filter:none!important;
cursor:default!important;
}
/* Bestehende Spezial-Hoverfarben vollständig neutralisieren */
.mark-toolbar:not(.participant-ready) .mark-btn:hover{
background:inherit!important;
border-color:inherit!important;
}
.mark-toolbar:not(.participant-ready) .mark-btn.preferred:hover{
background:inherit!important;
border-color:inherit!important;
}
}
/* v8.62 — vor gespeichertem Namen keinerlei Hover bei Verfügbar/Bevorzugt/Auswählen.
Die Ausgangsfarben bleiben dabei exakt erhalten. */
@media (hover:hover) and (pointer:fine){
/* Verfügbar / Bevorzugt: keine Bewegung, kein Schatten, keine Helligkeitsänderung,
aber die normalen aktiven/inaktiven Farben unverändert lassen. */
.mark-toolbar:not(.participant-ready) .mark-btn,
.mark-toolbar:not(.participant-ready) .mark-btn:hover,
.mark-toolbar:not(.participant-ready) .mark-btn:active{
transform:none!important;
box-shadow:none!important;
filter:none!important;
cursor:default!important;
}
.mark-toolbar:not(.participant-ready) .mark-btn:hover{
border-color:var(--line)!important;
}
.mark-toolbar:not(.participant-ready) .mark-btn.active:hover{
background:#111827!important;
color:#fff!important;
border-color:#111827!important;
}
.mark-toolbar:not(.participant-ready) .mark-btn.preferred:not(.active):hover{
background:#fff!important;
color:#6b5200!important;
border-color:var(--line)!important;
}
.mark-toolbar:not(.participant-ready) .mark-btn.preferred.active:hover{
background:#d4a72c!important;
color:#6b5200!important;
border-color:#d4a72c!important;
}
/* Terminabfrage ohne Raster: auch „Auswählen“ vor dem Namen komplett ohne Hover. */
.card:not(.participant-ready) .fixed-option-choice,
.card:not(.participant-ready) .fixed-option-choice:hover,
.card:not(.participant-ready) .fixed-option-choice:active{
transform:none!important;
box-shadow:none!important;
filter:none!important;
cursor:default!important;
}
.card:not(.participant-ready) .fixed-option-choice:hover{
background:#f8f9fb!important;
color:inherit!important;
border-color:var(--line)!important;
}
.card:not(.participant-ready) .fixed-option-choice.mine:hover{
background:#278e72!important;
color:#fff!important;
border-color:#278e72!important;
}
.card:not(.participant-ready) .fixed-option-choice.mine-preferred:hover{
background:#d4a72c!important;
color:#6b5200!important;
border-color:#d4a72c!important;
}
}
/* v8.63 — Namenshinweis ruhiger: kein roter Außenrahmen mehr */
#joinBox.name-required-attention{
border-color:var(--line)!important;
box-shadow:none!important;
}
#joinBox.name-required-attention #nameInput{
border-color:#0f766e!important;
box-shadow:0 0 0 3px rgba(15,118,110,.16)!important;
}
.name-required-hint{
grid-column:1/-1;
margin-top:8px;
color:var(--muted);
font-size:13px;
font-weight:650;
line-height:1.35;
}
.name-required-hint[hidden]{
display:none!important;
}
/* v8.65 — Verfügbar / Bevorzugt wieder ohne vollflächigen Cover.
Auswahl nur über Rahmen/Text kennzeichnen. */
.mark-toolbar .mark-btn.active{
background:#fff!important;
color:#111827!important;
border-color:#111827!important;
box-shadow:none!important;
}
.mark-toolbar .mark-btn.preferred.active{
background:#fff!important;
color:#6b5200!important;
border-color:#d4a72c!important;
box-shadow:none!important;
}
/* Auch beim Hover bleibt die aktive Auswahl ohne Cover. */
@media (hover:hover) and (pointer:fine){
.mark-toolbar.participant-ready .mark-btn.active:hover{
background:#fff!important;
color:#111827!important;
}
.mark-toolbar.participant-ready .mark-btn.preferred.active:hover{
background:#fff!important;
color:#6b5200!important;
border-color:#d4a72c!important;
}
}
/* v8.67 — Verfügbar / Bevorzugt exakt im ruhigen Online-Stil:
nie vollflächig gefüllt, weder aktiv noch beim Hover. */
.mark-toolbar .mark-btn,
.mark-toolbar .mark-btn.active,
.mark-toolbar .mark-btn:hover,
.mark-toolbar .mark-btn.active:hover{
background:#fff!important;
box-shadow:none!important;
}
.mark-toolbar .mark-btn:not(.preferred),
.mark-toolbar .mark-btn:not(.preferred).active,
.mark-toolbar .mark-btn:not(.preferred):hover,
.mark-toolbar .mark-btn:not(.preferred).active:hover{
color:#111827!important;
border-color:var(--line)!important;
}
.mark-toolbar .mark-btn.preferred,
.mark-toolbar .mark-btn.preferred.active,
.mark-toolbar .mark-btn.preferred:hover,
.mark-toolbar .mark-btn.preferred.active:hover{
background:#fff!important;
color:#6b5200!important;
border-color:var(--line)!important;
box-shadow:none!important;
}
/* Nach gespeichertem Namen darf weiterhin nur ein sehr leichter Bewegungs-Hover
stattfinden – niemals ein Farb-Cover. Vor dem Namen weiterhin gar kein Hover. */
@media (hover:hover) and (pointer:fine){
.mark-toolbar.participant-ready .mark-btn:hover{
transform:translateY(-1px)!important;
}
.mark-toolbar:not(.participant-ready) .mark-btn:hover{
transform:none!important;
}
}
/* v8.74 — Verfügbar / Bevorzugt wieder als echter Umschalter, ohne Hover */
.mark-toolbar .mark-btn{
transform:none!important;
filter:none!important;
box-shadow:none!important;
transition:none!important;
}
/* Inaktiv: weiss */
.mark-toolbar .mark-btn:not(.active){
background:#fff!important;
border-color:var(--line)!important;
color:#30343b!important;
}
/* Verfügbar aktiv: dunkel */
.mark-toolbar .mark-btn.active:not(.preferred){
background:#111827!important;
border-color:#111827!important;
color:#fff!important;
}
/* Bevorzugt inaktiv: weiss mit goldener Schrift */
.mark-toolbar .mark-btn.preferred:not(.active){
background:#fff!important;
border-color:var(--line)!important;
color:#6b5200!important;
}
/* Bevorzugt aktiv: gold */
.mark-toolbar .mark-btn.preferred.active{
background:#d4a72c!important;
border-color:#d4a72c!important;
color:#6b5200!important;
}
/* Bewusst keinerlei Hover-/Scroll-over-Effekt */
@media (hover:hover) and (pointer:fine){
.mark-toolbar .mark-btn:hover,
.mark-toolbar .mark-btn:active{
transform:none!important;
filter:none!important;
box-shadow:none!important;
}
.mark-toolbar .mark-btn:not(.active):not(.preferred):hover{
background:#fff!important;
border-color:var(--line)!important;
color:#30343b!important;
}
.mark-toolbar .mark-btn.active:not(.preferred):hover{
background:#111827!important;
border-color:#111827!important;
color:#fff!important;
}
.mark-toolbar .mark-btn.preferred:not(.active):hover{
background:#fff!important;
border-color:var(--line)!important;
color:#6b5200!important;
}
.mark-toolbar .mark-btn.preferred.active:hover{
background:#d4a72c!important;
border-color:#d4a72c!important;
color:#6b5200!important;
}
}
/* v8.75 — Verfügbar / Bevorzugt: keinerlei Cover-/Hover-Effekt */
@media (hover:hover) and (pointer:fine){
.mark-toolbar .mark-btn:hover,
.mark-toolbar .mark-btn:focus,
.mark-toolbar .mark-btn:focus-visible{
transform:none!important;
filter:none!important;
box-shadow:none!important;
outline:none!important;
}
.mark-toolbar .mark-btn.active:not(.preferred):hover{
background:#111827!important;
border-color:#111827!important;
color:#fff!important;
}
.mark-toolbar .mark-btn:not(.active):not(.preferred):hover{
background:#fff!important;
border-color:var(--line)!important;
color:#30343b!important;
}
.mark-toolbar .mark-btn.preferred:not(.active):hover{
background:#fff!important;
border-color:var(--line)!important;
color:#6b5200!important;
}
.mark-toolbar .mark-btn.preferred.active:hover{
background:#d4a72c!important;
border-color:#d4a72c!important;
color:#6b5200!important;
}
}
/* v8.76 — Ausblenden + Adminlink ohne Cover-/Hover-Effekt */
a.edit-link:hover,
a.edit-link:focus,
a.edit-link:focus-visible,
.edit-link:hover,
.edit-link:focus,
.edit-link:focus-visible,
button.hide-btn:hover,
button.hide-btn:focus,
button.hide-btn:focus-visible,
.hide-btn:hover,
.hide-btn:focus,
.hide-btn:focus-visible,
[data-action="hide"]:hover,
[data-action="hide"]:focus,
[data-action="hide"]:focus-visible{
transform:none!important;
filter:none!important;
box-shadow:none!important;
background:inherit!important;
color:inherit!important;
opacity:1!important;
}
/* v8.77 — finaler Mac/Safari-Zeitfeld-Fix.
Keine Änderung an Wochentagskarten, Grid oder äußeren Abmessungen.
Nur die native Safari-Zeitsteuerung wird innerhalb des vorhandenen Feldes
neutralisiert, damit 08:00 / 18:00 vollständig sichtbar sind. */
@media (min-width:761px){
html.browser-safari .weekday-dimension .day-time-panel input[type="time"]{
-webkit-appearance:none!important;
appearance:none!important;
display:block!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
box-sizing:border-box!important;
padding:9px 8px!important;
font:inherit!important;
font-variant-numeric:tabular-nums!important;
text-align:left!important;
overflow:visible!important;
}
html.browser-safari .weekday-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit{
display:block!important;
padding:0!important;
margin:0!important;
min-width:0!important;
width:auto!important;
overflow:visible!important;
}
html.browser-safari .weekday-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit-fields-wrapper{
padding:0!important;
margin:0!important;
}
html.browser-safari .weekday-dimension .day-time-panel input[type="time"]::-webkit-calendar-picker-indicator{
display:none!important;
-webkit-appearance:none!important;
width:0!important;
min-width:0!important;
margin:0!important;
padding:0!important;
}
}
/* v8.78 — bewusst keine Hover-/Scroll-over-Effekte
bei Verfügbar, Bevorzugt und Adminlink. */
@media (hover:hover) and (pointer:fine){
.mark-toolbar .mark-btn,
.mark-toolbar .mark-btn:hover,
.mark-toolbar .mark-btn:active,
.mark-toolbar .mark-btn:focus,
.mark-toolbar .mark-btn:focus-visible{
transform:none!important;
filter:none!important;
box-shadow:none!important;
transition:none!important;
}
/* Verfügbar: Zustand bleibt beim Darüberfahren exakt gleich */
.mark-toolbar .mark-btn.active:not(.preferred):hover{
background:#111827!important;
border-color:#111827!important;
color:#fff!important;
}
.mark-toolbar .mark-btn:not(.active):not(.preferred):hover{
background:#fff!important;
border-color:var(--line)!important;
color:#30343b!important;
}
/* Bevorzugt: Zustand bleibt beim Darüberfahren exakt gleich */
.mark-toolbar .mark-btn.preferred:not(.active):hover{
background:#fff!important;
border-color:var(--line)!important;
color:#6b5200!important;
}
.mark-toolbar .mark-btn.preferred.active:hover{
background:#d4a72c!important;
border-color:#d4a72c!important;
color:#6b5200!important;
}
/* Adminlink: keinerlei visuelle Hover-Reaktion */
.edit-link,
.edit-link:hover,
.edit-link:active,
.edit-link:focus,
.edit-link:focus-visible,
a.edit-link,
a.edit-link:hover,
a.edit-link:active,
a.edit-link:focus,
a.edit-link:focus-visible{
transform:none!important;
filter:none!important;
box-shadow:none!important;
background:transparent!important;
opacity:1!important;
}
}
/* v8.79 — Ausblenden ebenfalls ohne Hover-/Scroll-over-Effekt */
@media (hover:hover) and (pointer:fine){
#toggleResults,
#toggleResults:hover,
#toggleResults:active,
#toggleResults:focus,
#toggleResults:focus-visible,
.toggle-results,
.toggle-results:hover,
.toggle-results:active,
.toggle-results:focus,
.toggle-results:focus-visible{
transform:none!important;
filter:none!important;
box-shadow:none!important;
transition:none!important;
}
}
/* v8.80 — einheitliche Hover-Regel:
Keine Farb- oder Rahmenänderung. Nur leichtes Anheben, wo gewünscht. */
@media (hover:hover) and (pointer:fine){
/* Allgemeine klickbare Buttons: nur minimal anheben, sonst visuell unverändert. */
button:not(:disabled):hover,
.btn:not(:disabled):hover,
[role="button"]:not([aria-disabled="true"]):hover{
transform:translateY(-1px)!important;
filter:none!important;
}
/* Verfügbar / Bevorzugt: Zustand und Farben beim Hover exakt beibehalten. */
.mark-toolbar .mark-btn:hover{
box-shadow:none!important;
}
.mark-toolbar .mark-btn.active:not(.preferred):hover{
background:#111827!important;
border-color:#111827!important;
color:#fff!important;
}
.mark-toolbar .mark-btn:not(.active):not(.preferred):hover{
background:#fff!important;
border-color:var(--line)!important;
color:#30343b!important;
}
.mark-toolbar .mark-btn.preferred:not(.active):hover{
background:#fff!important;
border-color:var(--line)!important;
color:#6b5200!important;
}
.mark-toolbar .mark-btn.preferred.active:hover{
background:#d4a72c!important;
border-color:#d4a72c!important;
color:#6b5200!important;
}
/* Teilnehmerlink teilen: nur leicht anheben, keine Farb-/Rahmenänderung. */
#shareBtn:hover{
background:#eff1f5!important;
color:#20232a!important;
border-color:transparent!important;
box-shadow:none!important;
}
/* Explizit NICHT animieren: Name, Adminlink, CSV und Ausblenden/Einblenden. */
#mePill,
#mePill:hover,
#openEditAccess,
#openEditAccess:hover,
#openEditAccess:active,
#openEditAccess:focus,
#csvBtn,
#csvBtn:hover,
#csvBtn:active,
#csvBtn:focus,
#toggleAdminPanel,
#toggleAdminPanel:hover,
#toggleAdminPanel:active,
#toggleAdminPanel:focus{
transform:none!important;
filter:none!important;
box-shadow:none!important;
transition:none!important;
}
#csvBtn:hover{
background:#eff1f5!important;
color:#20232a!important;
}
#openEditAccess:hover,
#toggleAdminPanel:hover{
background:transparent!important;
color:var(--muted)!important;
}
}
/* v8.81 — CSV herunterladen wieder wie Teilnehmerlink animieren */
@media (hover:hover) and (pointer:fine){
#csvBtn{
transition:transform .14s ease!important;
}
#csvBtn:hover{
transform:translateY(-1px)!important;
filter:none!important;
box-shadow:none!important;
background:#eff1f5!important;
color:#20232a!important;
border-color:transparent!important;
}
#csvBtn:active{
transform:translateY(0)!important;
}
}
/* v8.83 — finale Zustände Verfügbar / Bevorzugt */
.mark-toolbar .mark-btn{
transition:transform .14s ease, background-color .14s ease!important;
}
/* Verfügbar */
.mark-toolbar .mark-btn:not(.preferred):not(.active){
background:#fff!important;
color:#30343b!important;
border-color:var(--line)!important;
}
.mark-toolbar .mark-btn:not(.preferred).active{
background:#111827!important;
color:#fff!important;
border-color:#111827!important;
}
/* Bevorzugt */
.mark-toolbar .mark-btn.preferred:not(.active){
background:#fff!important;
color:#6b5200!important;
border-color:var(--line)!important;
}
.mark-toolbar .mark-btn.preferred.active{
background:#d4a72c!important;
color:#6b5200!important;
border-color:#d4a72c!important;
}
/* Desktop-Hover erst nach gespeichertem Namen:
Bevorzugt wird beim Darüberfahren vollständig gold – genau wie im aktiven Zustand. */
@media (hover:hover) and (pointer:fine){
.mark-toolbar.participant-ready .mark-btn:hover{
transform:translateY(-1px)!important;
filter:none!important;
box-shadow:none!important;
}
.mark-toolbar.participant-ready .mark-btn.preferred:hover{
background:#d4a72c!important;
color:#6b5200!important;
border-color:#d4a72c!important;
}
/* Verfügbar verändert beim Hover seine Farben nicht. */
.mark-toolbar.participant-ready .mark-btn:not(.preferred):not(.active):hover{
background:#fff!important;
color:#30343b!important;
border-color:var(--line)!important;
}
.mark-toolbar.participant-ready .mark-btn:not(.preferred).active:hover{
background:#111827!important;
color:#fff!important;
border-color:#111827!important;
}
/* Vor gespeichertem Namen weiterhin überhaupt kein Hover. */
.mark-toolbar:not(.participant-ready) .mark-btn:hover{
transform:none!important;
filter:none!important;
box-shadow:none!important;
}
.mark-toolbar:not(.participant-ready) .mark-btn.preferred:hover{
background:#fff!important;
color:#6b5200!important;
border-color:var(--line)!important;
}
}
/* v8.86 — Bevorzugt bleibt IMMER vollständig gold, auch bei Hover/Focus/Active */
.mark-toolbar .mark-btn.preferred.active,
.mark-toolbar .mark-btn.preferred.active:hover,
.mark-toolbar .mark-btn.preferred.active:focus,
.mark-toolbar .mark-btn.preferred.active:focus-visible,
.mark-toolbar .mark-btn.preferred.active:active{
background:#d4a72c!important;
background-color:#d4a72c!important;
color:#6b5200!important;
border-color:#d4a72c!important;
box-shadow:none!important;
filter:none!important;
}
/* Nach gespeichertem Namen darf es beim Hover höchstens minimal hochgehen.
Die goldene Fläche bleibt dabei unverändert. */
@media (hover:hover) and (pointer:fine){
.mark-toolbar.participant-ready .mark-btn.preferred.active:hover{
transform:translateY(-1px)!important;
background:#d4a72c!important;
background-color:#d4a72c!important;
color:#6b5200!important;
border-color:#d4a72c!important;
box-shadow:none!important;
filter:none!important;
}
}
/* Vor gespeichertem Namen weiterhin keinerlei Hover-Bewegung. */
@media (hover:hover) and (pointer:fine){
.mark-toolbar:not(.participant-ready) .mark-btn.preferred.active:hover{
transform:none!important;
}
}
/* v8.87 — ruhiger Hinweis unter „Name der Abfrage“ */
.field.title-required-attention #title{
border-color:#0f766e!important;
box-shadow:0 0 0 3px rgba(15,118,110,.16)!important;
}
.title-required-hint{
margin-top:8px;
color:var(--muted);
font-size:13px;
font-weight:650;
line-height:1.35;
}
.title-required-hint[hidden]{
display:none!important;
}
/* v8.88 — Bevorzugt wird beim Darüberfahren bereits gold.
Klick setzt weiterhin den aktiven Zustand. */
@media (hover:hover) and (pointer:fine){
.mark-toolbar.participant-ready .mark-btn.preferred:not(.active):hover{
background:#d4a72c!important;
background-color:#d4a72c!important;
color:#6b5200!important;
border-color:#d4a72c!important;
box-shadow:none!important;
filter:none!important;
transform:translateY(-1px)!important;
}
.mark-toolbar.participant-ready .mark-btn.preferred.active:hover{
background:#d4a72c!important;
background-color:#d4a72c!important;
color:#6b5200!important;
border-color:#d4a72c!important;
box-shadow:none!important;
filter:none!important;
transform:translateY(-1px)!important;
}
/* Ohne eingetragenen Namen weiterhin kein Hover-Effekt. */
.mark-toolbar:not(.participant-ready) .mark-btn.preferred:hover{
transform:none!important;
}
}
/* v8.89 — Feld „Andere Dauer“ / Minuten gleich hoch wie das Select daneben */
#customTermDuration{
height:46px!important;
min-height:46px!important;
box-sizing:border-box!important;
padding-top:0!important;
padding-bottom:0!important;
line-height:44px!important;
}
/* v8.90 — endgültiges Verhalten für „Bevorzugt“
NICHT gewählt: weiß — auch bei Hover/Focus.
Gewählt: gold — auch bei Hover/Focus. */
@media (hover:hover) and (pointer:fine){
.mark-toolbar.participant-ready .mark-btn.preferred:not(.active),
.mark-toolbar.participant-ready .mark-btn.preferred:not(.active):hover,
.mark-toolbar.participant-ready .mark-btn.preferred:not(.active):focus,
.mark-toolbar.participant-ready .mark-btn.preferred:not(.active):focus-visible,
.mark-toolbar.participant-ready .mark-btn.preferred:not(.active):active{
background:#fff!important;
background-color:#fff!important;
color:#806000!important;
border-color:var(--line)!important;
box-shadow:none!important;
filter:none!important;
}
.mark-toolbar.participant-ready .mark-btn.preferred:not(.active):hover{
transform:translateY(-1px)!important;
}
.mark-toolbar.participant-ready .mark-btn.preferred.active,
.mark-toolbar.participant-ready .mark-btn.preferred.active:hover,
.mark-toolbar.participant-ready .mark-btn.preferred.active:focus,
.mark-toolbar.participant-ready .mark-btn.preferred.active:focus-visible,
.mark-toolbar.participant-ready .mark-btn.preferred.active:active{
background:#d4a72c!important;
background-color:#d4a72c!important;
color:#6b5200!important;
border-color:#d4a72c!important;
box-shadow:none!important;
filter:none!important;
}
}
/* Touch / allgemeiner Fallback: Farbe ebenfalls ausschließlich vom active-State. */
.mark-toolbar .mark-btn.preferred:not(.active){
background:#fff!important;
background-color:#fff!important;
color:#806000!important;
border-color:var(--line)!important;
}
.mark-toolbar .mark-btn.preferred.active{
background:#d4a72c!important;
background-color:#d4a72c!important;
color:#6b5200!important;
border-color:#d4a72c!important;
}
/* v8.94 — Mobile: nächstes Minutenfeld dezent hervorheben,
aber die iOS-Tastatur nicht automatisch erzwingen. */
@media (hover:none), (pointer:coarse){
#customTermDuration.mobile-next-input{
border-color:#0f766e!important;
box-shadow:0 0 0 3px rgba(15,118,110,.14)!important;
}
}
/* v8.96 — Mobile-Schutz vor gedrücktem Markierungszustand ohne Teilnehmername.
Solange kein Teilnehmer eingetragen ist, bleiben die Markierbuttons optisch
exakt in ihrem neutralen Zustand — auch während :active/touch. */
.mark-toolbar:not(.participant-ready) .mark-btn:not(.preferred),
.mark-toolbar:not(.participant-ready) .mark-btn:not(.preferred):hover,
.mark-toolbar:not(.participant-ready) .mark-btn:not(.preferred):focus,
.mark-toolbar:not(.participant-ready) .mark-btn:not(.preferred):focus-visible,
.mark-toolbar:not(.participant-ready) .mark-btn:not(.preferred):active{
background:#fff!important;
background-color:#fff!important;
color:var(--ink)!important;
border-color:var(--line)!important;
box-shadow:none!important;
filter:none!important;
transform:none!important;
}
/* v8.97 — Mobile: komplette Linkbereiche sind große Tap-Ziele. */
@media (hover:none), (pointer:coarse){
.mobile-copy-area{
cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.mobile-copy-area .edit-link-row,
.mobile-copy-area.share-url{
min-height:56px;
}
}
/* v8.98 — iPhone/Touch: finale Markierbutton-Zustände.
Kein verzögerter schwarzer/leer wirkender Pressed-State mehr. */
@media (hover:none), (pointer:coarse){
.mark-toolbar .mark-btn{
-webkit-appearance:none!important;
appearance:none!important;
transition:none!important;
transform:none!important;
filter:none!important;
box-shadow:none!important;
-webkit-tap-highlight-color:transparent!important;
}
/* Verfügbar NICHT aktiv */
.mark-toolbar.participant-ready .mark-btn:not(.preferred):not(.active),
.mark-toolbar.participant-ready .mark-btn:not(.preferred):not(.active):active,
.mark-toolbar.participant-ready .mark-btn:not(.preferred):not(.active):focus{
background:#fff!important;
background-color:#fff!important;
color:#30343b!important;
-webkit-text-fill-color:#30343b!important;
border-color:var(--line)!important;
}
/* Verfügbar aktiv */
.mark-toolbar.participant-ready .mark-btn:not(.preferred).active,
.mark-toolbar.participant-ready .mark-btn:not(.preferred).active:active,
.mark-toolbar.participant-ready .mark-btn:not(.preferred).active:focus{
background:#111827!important;
background-color:#111827!important;
color:#fff!important;
-webkit-text-fill-color:#fff!important;
border-color:#111827!important;
}
/* Bevorzugt NICHT aktiv */
.mark-toolbar.participant-ready .mark-btn.preferred:not(.active),
.mark-toolbar.participant-ready .mark-btn.preferred:not(.active):active,
.mark-toolbar.participant-ready .mark-btn.preferred:not(.active):focus{
background:#fff!important;
background-color:#fff!important;
color:#806000!important;
-webkit-text-fill-color:#806000!important;
border-color:var(--line)!important;
}
/* Bevorzugt aktiv */
.mark-toolbar.participant-ready .mark-btn.preferred.active,
.mark-toolbar.participant-ready .mark-btn.preferred.active:active,
.mark-toolbar.participant-ready .mark-btn.preferred.active:focus{
background:#d4a72c!important;
background-color:#d4a72c!important;
color:#6b5200!important;
-webkit-text-fill-color:#6b5200!important;
border-color:#d4a72c!important;
}
/* Repaint-Hilfsklasse verändert optisch nichts, erzeugt aber eine neue Paint-Phase. */
.mark-toolbar .mark-btn.touch-repaint{
isolation:isolate!important;
}
}
/* v9.03.2 — Superadmin-Übersichten: maximal 5 Zeilen sichtbar,
weitere Einträge scrollen innerhalb des Tabellenfelds. */
.platform-admin-table-wrap{
max-height:250px;
overflow-y:auto;
overflow-x:auto;
scrollbar-gutter:stable;
}
/* Tabellenkopf bleibt beim internen Scrollen sichtbar. */
.platform-admin-table thead th{
position:sticky;
top:0;
z-index:2;
background:#fff;
}
/* Beide Übersichten verwenden denselben Wrapper / dieselbe Höhe. */
.platform-participants-card .platform-admin-table-wrap{
max-height:250px;
}
/* v9.03.3 – anonymisierte Nutzungsanalyse */
.platform-analytics-card{margin-top:12px}
.analytics-funnel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
.analytics-funnel>div{border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff}
.analytics-funnel span,.analytics-funnel small{display:block;color:var(--muted);font-size:11px}
.analytics-funnel strong{display:block;font-size:23px;margin:4px 0 2px}
.analytics-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.analytics-bars{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.analytics-bar-row{display:grid;grid-template-columns:72px minmax(60px,1fr) 42px;gap:8px;align-items:center;font-size:11px}
.analytics-bar-row>span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.analytics-bar-row>i{height:7px;border-radius:999px;background:#eef0f4;overflow:hidden}
.analytics-bar-row>i>b{display:block;height:100%;border-radius:inherit;background:#278e72}
.analytics-bar-row>strong{text-align:right;font-size:11px}
@media(max-width:760px){.analytics-funnel{grid-template-columns:repeat(2,minmax(0,1fr))}.analytics-grid{grid-template-columns:1fr}}
/* v9.03.4 — ZeitFinder live + alles darunter erst nach Master-Keyword */
.superadmin-lock{margin-top:24px;padding:22px;border:1px solid var(--line);border-radius:22px;background:#fff}
.superadmin-lock-row{display:flex;gap:12px;align-items:center;margin-top:14px}
.superadmin-lock-row input{flex:1;min-width:0}
@media(max-width:760px){.superadmin-lock-row{flex-direction:column;align-items:stretch}}
/* v9.03.5 — Mobile: Karten bleiben vollständig innerhalb des Viewports.
Breite Tabellen/Grids scrollen nur innerhalb ihrer Karte horizontal. */
@media(max-width:760px){
html,body{
max-width:100%;
overflow-x:hidden;
}
.shell,
main,
.card,
.admin-panel,
.join-box,
.availability-help,
.schedule-wrap,
.platform-admins-card,
.platform-stat-card{
max-width:100%;
box-sizing:border-box;
}
.card,
.admin-panel{
width:100%;
min-width:0;
}
.schedule-wrap{
width:100%;
min-width:0;
overflow-x:auto;
overflow-y:visible;
-webkit-overflow-scrolling:touch;
}
.schedule{
max-width:none;
}
.between,
.row,
.admin-title-row,
.admin-add-row,
.gift-grid{
min-width:0;
}
.between>*,
.row>*,
.admin-title-row>*,
.admin-add-row>*,
.gift-grid>*{
min-width:0;
}
}
/* v9.03.9 — KI-Terminfindung */
#aiResultText .schedule-section-best-date{margin:0 0 14px;padding:18px 20px;border:1px solid #1aa463;border-radius:16px;background:linear-gradient(180deg,#f3fff8,#edfbf3)}
#aiResultText .schedule-section-best-date h4{margin:0 0 10px;color:#187c68;font-size:18px}
#aiResultText .schedule-section-best-date h4::before{content:"★ "}
#aiResultText .schedule-section-best-date .schedule-item{color:#187c68;font-size:18px;font-weight:700;border-bottom:0;padding:3px 0}
#aiResultText .schedule-section-available .schedule-item,
#aiResultText .schedule-section-problem .schedule-item,
#aiResultText .schedule-section-available .schedule-item strong,
#aiResultText .schedule-section-problem .schedule-item strong{font-weight:400}
/* v9.04.0 — kompakte KI-Empfehlung */
#aiResultText .schedule-section-best-date .best-date-note{
margin:14px 0 0;
padding-top:14px;
border-top:1px solid rgba(22,139,80,.16);
color:#303740;
font-size:16px;
font-weight:400;
line-height:1.45;
}
/* v9.04.1 — Daten → Termin finden: Empfehlung wie geplant */
#aiResultText .schedule-section-best-date h4{
color:#187c68;
font-weight:700;
}
#aiResultText .schedule-section-best-date .best-date-value{
position:relative;
padding-left:34px;
color:#187c68;
font-size:20px;
font-weight:700;
line-height:1.35;
}
#aiResultText .schedule-section-best-date .best-date-calendar::before,
#aiResultText .schedule-section-best-date .best-date-time::before{
position:absolute;
left:0;
top:0;
width:26px;
text-align:center;
font-size:20px;
}
#aiResultText .schedule-section-best-date .best-date-calendar::before{content:"📅";}
#aiResultText .schedule-section-best-date .best-date-time::before{content:"🕒";}
#aiResultText .schedule-section-best-date .best-date-note{
color:#303740;
font-size:15px;
font-weight:400;
}
/* v9.04.8 — Entfernen-× in Datumszeile bleibt beim Hover positionsstabil. */
@media (hover:hover) and (pointer:fine) and (min-width:561px){
.date-head .remove-dim:hover,
.date-head .remove-dim:active,
.date-head .remove-dim:focus-visible{
transform:translateY(-50%)!important;
}
}
@media (hover:hover) and (pointer:fine) and (max-width:560px){
.date-head .remove-dim:hover,
.date-head .remove-dim:active,
.date-head .remove-dim:focus-visible{
transform:none!important;
}
}
/* v9.04.10 — individuelle Termindauer als gleich hohes, ruhiges Freitextfeld */
.custom-term-duration-side{
height:46px;
min-height:46px;
border:1px solid var(--line);
background:#fbfbfd;
border-radius:14px;
padding:0 14px;
box-sizing:border-box;
transition:.2s;
}
.custom-term-duration-side:focus-within{
border-color:var(--zf-focus-border);
box-shadow:0 0 0 4px var(--zf-focus-glow);
}
.custom-term-duration-side #customTermDuration{
width:104px;
height:44px!important;
min-height:44px!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
padding:0!important;
outline:none!important;
box-shadow:none!important;
line-height:normal!important;
}
.custom-term-duration-side span{
font-size:inherit;
}
@media(max-width:760px){
.custom-term-duration-side{padding:0 12px}
.custom-term-duration-side #customTermDuration{width:88px}
}
@media(max-width:430px){
.custom-term-duration-side{padding:0 10px}
.custom-term-duration-side #customTermDuration{width:76px;padding:0!important}
}
/* v9.04.11 — „Andere Dauer“ ersetzt das Select an derselben Position */
.term-duration-row{
width:320px;
max-width:100%;
}
.term-duration-row > select{
width:100%;
flex:0 0 100%;
}
.custom-term-duration-inline{
width:100%;
height:46px;
min-height:46px;
display:flex;
align-items:center;
border:1px solid var(--line);
border-radius:12px;
background:#fbfbfd;
padding:0 8px 0 14px;
box-sizing:border-box;
transition:border-color .2s,box-shadow .2s,background .2s;
}
.custom-term-duration-inline[hidden]{display:none!important}
.custom-term-duration-inline:focus-within{
border-color:var(--zf-focus-border);
box-shadow:0 0 0 4px var(--zf-focus-glow);
background:#fff;
}
.custom-term-duration-inline #customTermDuration{
flex:1 1 auto;
width:0!important;
min-width:0;
height:44px!important;
min-height:44px!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
padding:0!important;
outline:none!important;
box-shadow:none!important;
line-height:normal!important;
font:inherit;
}
.custom-duration-unit{
flex:0 0 auto;
margin-left:10px;
color:var(--muted);
font-weight:700;
white-space:nowrap;
}
.custom-duration-back{
flex:0 0 32px;
width:32px;
height:32px;
min-height:32px;
margin-left:8px;
padding:0;
border:0;
border-radius:50%;
background:transparent;
color:var(--muted);
font-size:22px;
line-height:1;
cursor:pointer;
box-shadow:none;
transform:none!important;
}
.custom-duration-back:hover,.custom-duration-back:focus-visible{
background:#eef0f4;
color:#303740;
transform:none!important;
}
@media(max-width:760px){
.term-duration-row{width:100%}
}
/* v9.04.12 — individuelle Dauer: Einheit im Label, × direkt im Eingabefeld */
.custom-term-duration-inline{
padding-right:7px;
}
.custom-term-duration-inline .custom-duration-back{
margin-left:6px;
cursor:pointer!important;
}
/* v9.04.13 — Label nur bei freier Dauer erweitern; × fest im Eingabefeld rechts */
.custom-term-duration-inline{
position:relative;
padding:0 48px 0 14px!important;
}
.custom-term-duration-inline .custom-duration-back{
position:absolute!important;
right:8px!important;
top:50%!important;
transform:translateY(-50%)!important;
margin:0!important;
width:32px!important;
height:32px!important;
min-height:32px!important;
display:grid!important;
place-items:center!important;
cursor:pointer!important;
z-index:2;
}
.custom-term-duration-inline .custom-duration-back:hover,
.custom-term-duration-inline .custom-duration-back:focus-visible,
.custom-term-duration-inline .custom-duration-back:active{
transform:translateY(-50%)!important;
}
/* v9.04.14 — freie Termindauer linksbündig; × wirklich im Feld */
.term-duration-field .term-duration-row{
width:320px!important;
max-width:100%;
margin:0!important;
padding:0!important;
}
.term-duration-field .custom-term-duration-inline{
position:relative!important;
width:320px!important;
max-width:100%;
margin:0!important;
box-sizing:border-box!important;
padding:0 46px 0 14px!important;
}
.term-duration-field .custom-term-duration-inline #customTermDuration{
width:100%!important;
min-width:0!important;
}
.term-duration-field .custom-term-duration-inline .custom-duration-back{
-webkit-appearance:none!important;
appearance:none!important;
position:absolute!important;
right:9px!important;
top:50%!important;
transform:translateY(-50%)!important;
width:30px!important;
height:30px!important;
min-width:30px!important;
min-height:30px!important;
margin:0!important;
padding:0!important;
border:0!important;
outline:0!important;
border-radius:50%!important;
background:transparent!important;
box-shadow:none!important;
color:var(--muted)!important;
font:inherit!important;
font-size:22px!important;
font-weight:500!important;
line-height:30px!important;
text-align:center!important;
cursor:pointer!important;
}
.term-duration-field .custom-term-duration-inline .custom-duration-back:hover,
.term-duration-field .custom-term-duration-inline .custom-duration-back:focus-visible,
.term-duration-field .custom-term-duration-inline .custom-duration-back:active{
transform:translateY(-50%)!important;
border:0!important;
background:#eef0f4!important;
box-shadow:none!important;
color:#303740!important;
}
@media(max-width:760px){
.term-duration-field .term-duration-row,
.term-duration-field .custom-term-duration-inline{width:100%!important}
}
/* v9.04.15 — Termindauer: sauberes 2-Spalten-Layout und integriertes Zurück-X */
#slotSettings{
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
column-gap:16px!important;
row-gap:14px!important;
align-items:start!important;
width:100%!important;
}
#slotSettings > .field:first-child,
#slotSettings > .term-duration-field{
width:100%!important;
min-width:0!important;
max-width:none!important;
flex:none!important;
}
#slotSettings > .field:first-child select,
.term-duration-field .term-duration-row,
.term-duration-field .term-duration-row > select,
.term-duration-field .custom-term-duration-inline{
width:100%!important;
max-width:none!important;
min-width:0!important;
margin:0!important;
}
.term-duration-field .term-duration-row{
display:block!important;
padding:0!important;
}
.term-duration-field .term-duration-row > select{
display:block;
flex:none!important;
}
/* Eigene Dauer: der Rahmen gehört ausschließlich zum gemeinsamen Container. */
.term-duration-field .custom-term-duration-inline{
position:relative!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) 38px!important;
align-items:center!important;
gap:4px!important;
height:auto!important;
min-height:46px!important;
padding:0 8px 0 14px!important;
overflow:hidden!important;
border:1px solid var(--line)!important;
border-radius:14px!important;
background:#fbfbfd!important;
box-shadow:none!important;
box-sizing:border-box!important;
transition:border-color .2s,box-shadow .2s,background .2s!important;
}
.term-duration-field .custom-term-duration-inline[hidden]{
display:none!important;
}
.term-duration-field .custom-term-duration-inline:focus-within{
border-color:var(--zf-focus-border)!important;
box-shadow:0 0 0 4px var(--zf-focus-glow)!important;
background:#fff!important;
}
.term-duration-field .custom-term-duration-inline #customTermDuration{
grid-column:1!important;
width:100%!important;
min-width:0!important;
height:44px!important;
min-height:44px!important;
margin:0!important;
padding:0!important;
border:0!important;
border-radius:0!important;
outline:0!important;
background:transparent!important;
box-shadow:none!important;
color:var(--text)!important;
font:inherit!important;
line-height:44px!important;
}
.term-duration-field .custom-term-duration-inline #customTermDuration:focus{
border:0!important;
outline:0!important;
box-shadow:none!important;
}
.term-duration-field .custom-term-duration-inline .custom-duration-back{
-webkit-appearance:none!important;
appearance:none!important;
position:static!important;
grid-column:2!important;
align-self:center!important;
justify-self:center!important;
display:grid!important;
place-items:center!important;
width:32px!important;
height:32px!important;
min-width:32px!important;
min-height:32px!important;
margin:0!important;
padding:0 0 2px!important;
border:0!important;
border-radius:50%!important;
outline:0!important;
background:transparent!important;
box-shadow:none!important;
color:var(--muted)!important;
font-family:inherit!important;
font-size:25px!important;
font-weight:500!important;
line-height:1!important;
text-align:center!important;
cursor:pointer!important;
transform:none!important;
transition:background .16s,color .16s!important;
}
.term-duration-field .custom-term-duration-inline .custom-duration-back:hover,
.term-duration-field .custom-term-duration-inline .custom-duration-back:focus-visible,
.term-duration-field .custom-term-duration-inline .custom-duration-back:active{
position:static!important;
transform:none!important;
background:#eef0f4!important;
color:#303740!important;
border:0!important;
box-shadow:none!important;
}
@media(max-width:760px){
#slotSettings{
grid-template-columns:minmax(0,1fr)!important;
}
}
/* v9.04.16 — kompakte, gleich breite Zeitfelder; Optionen darüber unverändert */
#slotSettings{
grid-template-columns:repeat(2, minmax(0, 320px))!important;
justify-content:start!important;
column-gap:28px!important;
width:100%!important;
}
#slotSettings > .field:first-child,
#slotSettings > .term-duration-field{
width:320px!important;
max-width:320px!important;
}
#slotSettings > .field:first-child select,
.term-duration-field .term-duration-row,
.term-duration-field .term-duration-row > select,
.term-duration-field .custom-term-duration-inline{
width:320px!important;
max-width:320px!important;
}
@media(max-width:760px){
#slotSettings{
grid-template-columns:minmax(0,1fr)!important;
column-gap:0!important;
}
#slotSettings > .field:first-child,
#slotSettings > .term-duration-field,
#slotSettings > .field:first-child select,
.term-duration-field .term-duration-row,
.term-duration-field .term-duration-row > select,
.term-duration-field .custom-term-duration-inline{
width:100%!important;
max-width:100%!important;
}
}
/* v9.04.17 — klare Mauszeiger für interaktive Einstellungen */
/* Ganze Checkbox-Zeilen sind klickbar. */
.date-options .option-check,
.date-options .option-check input,
.date-options .option-check span{
cursor:pointer!important;
}
/* Zeitraster (Wochentage + Daten) und Termindauer sind Auswahlfelder. */
#slotSettings #slot,
#slotSettings #termDuration{
cursor:pointer!important;
}
/* Bei der freien Dauer bleibt im Eingabebereich der Text-Cursor sinnvoll. */
#slotSettings #customTermDuration{
cursor:text!important;
}
#slotSettings .custom-duration-back{
cursor:pointer!important;
}
/* v9.04.22 — Mobile: freie Termindauer als naechsten Schritt markieren, ohne Keyboard-Fokus */
.custom-term-duration-inline.custom-duration-ready{
border-color:var(--zf-focus-border);
box-shadow:0 0 0 4px var(--zf-focus-glow);
background:#fff;
}
/* KI-Nachricht an Teilnehmende */
.ai-message-composer{
margin-top:16px;
padding-top:16px;
border-top:1px solid var(--line);
}
.ai-message-create-row{
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
}
.ai-message-create{
font-weight:700;
}
.ai-message-status{
color:var(--muted);
font-size:14px;
}
.ai-message-output{
margin-top:14px;
padding:16px;
border:1px solid var(--line);
border-radius:14px;
background:#f8fafc;
}
.ai-message-output-head{
margin-bottom:10px;
}
#aiMessageText{
width:100%;
min-height:150px;
resize:vertical;
line-height:1.5;
}
.ai-message-output small{
display:block;
margin-top:8px;
color:var(--muted);
}
@media(max-width:620px){
.ai-message-create{width:100%}
.ai-message-output-head{align-items:center}
}
/* v9.04.41 – participant settings in admin area */
.admin-participant-settings{
margin:22px 0 24px;
padding:20px 0 22px;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}
.admin-participant-settings-head h3{margin:0 0 5px}
.admin-participant-settings-head .sub{margin:0 0 14px}
.admin-setting-list{display:grid;gap:10px}
.admin-setting-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:14px 15px;
border:1px solid var(--line);
border-radius:16px;
background:#fbfbfd;
cursor:pointer;
}
.admin-setting-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.admin-setting-copy strong{font-size:14px}
.admin-setting-copy small{color:var(--muted);line-height:1.4}
.admin-switch{position:relative;display:block;width:46px;height:26px;flex:0 0 46px;cursor:pointer}
.admin-switch input{position:absolute;opacity:0;pointer-events:none}
.admin-switch i{
position:absolute;inset:0;
border-radius:999px;
background:#d9dde5;
transition:.18s ease;
}
.admin-switch i::after{
content:"";
position:absolute;
width:20px;height:20px;
left:3px;top:3px;
border-radius:50%;
background:#fff;
box-shadow:0 1px 4px rgba(17,24,39,.22);
transition:.18s ease;
}
.admin-switch input:checked+i{background:var(--green)}
.admin-switch input:checked+i::after{transform:translateX(20px)}
.admin-switch input:focus-visible+i{outline:3px solid rgba(17,24,39,.12);outline-offset:2px}
.admin-setting-row:has(input:disabled){opacity:.6;cursor:wait}
.admin-fixed-appointments-toggle-control{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.admin-fixed-appointments-state{min-width:24px;text-align:right;font-size:12px;font-weight:750;color:var(--muted)}
.admin-setting-status{min-height:18px;margin-top:7px;font-size:13px;color:var(--muted)}
.admin-setting-status.saved{color:#176b5b}
.admin-setting-status.error{color:var(--danger)}
@media(max-width:560px){
.admin-setting-row{align-items:flex-start}
.admin-switch{margin-top:2px}
}
/* v9.04.47 – Superadmin product intelligence only */
.insight-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
.insight-kpis>div{padding:15px;border:1px solid var(--line);border-radius:15px;background:#fbfbfd;display:flex;flex-direction:column;gap:4px}
.insight-kpis span{font-size:12px;color:var(--muted)}
.insight-kpis strong{font-size:24px;letter-spacing:-.03em}
.insight-kpis small{font-size:11px;color:var(--muted)}
.compact-insights{margin-top:16px;max-width:680px}
.insight-note{margin:14px 0 0;padding:12px 14px;border-radius:13px;background:#f6f7f9;color:var(--muted);font-size:12px;line-height:1.5}
@media(max-width:760px){.insight-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* v9.04.49 – Superadmin participant search without visible full list */
.platform-participant-empty{
margin:14px 0 0;
padding:12px 14px;
border-radius:12px;
background:#f6f7f9;
color:var(--muted);
font-size:13px;
}
#statParticipantResults[hidden],
#statParticipantEmpty[hidden]{display:none}
/* v9.04.55 – Superadmin popular time windows */
#insWeekdayTimes .analytics-bar-row,
#insDateTimes .analytics-bar-row{
grid-template-columns:minmax(190px,1.35fr) minmax(160px,2fr) auto;
}
#insWeekdayTimes .analytics-bar-row > span,
#insDateTimes .analytics-bar-row > span{
overflow:visible;
text-overflow:clip;
white-space:nowrap;
}
@media(max-width:760px){
#insWeekdayTimes .analytics-bar-row,
#insDateTimes .analytics-bar-row{
grid-template-columns:minmax(145px,1.4fr) minmax(90px,1fr) auto;
}
}
/* v9.04.58 – Superadmin popular inputs polish */
.platform-popular-inputs .platform-admins-head{
margin-bottom:18px;
}
.platform-popular-inputs .platform-admins-head strong{
display:block;
}
.platform-popular-inputs .platform-admins-head small{
display:block;
margin-top:4px;
line-height:1.4;
}
.popular-time-grid{
align-items:stretch;
}
.platform-popular-inputs .platform-stat-card{
padding:20px 22px;
}
.insight-card-head{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:4px;
margin-bottom:16px;
}
.insight-card-head strong{
display:block;
font-size:18px;
line-height:1.2;
}
.insight-card-head small{
display:block;
color:var(--muted);
font-size:12px;
line-height:1.35;
}
.popular-time-bars .analytics-bar-row{
grid-template-columns:minmax(125px,1fr) minmax(150px,1.65fr) auto;
gap:14px;
}
.popular-time-bars .analytics-bar-row > span{
white-space:nowrap;
overflow:visible;
text-overflow:clip;
}
.raster-choice-card{
margin-top:14px;
}
.raster-choice-bars{
max-width:760px;
}
.raster-choice-bars .analytics-bar-row{
grid-template-columns:minmax(105px,150px) minmax(220px,1fr) auto;
gap:14px;
}
@media(max-width:760px){
.platform-popular-inputs .platform-stat-card{padding:16px}
.popular-time-bars .analytics-bar-row,
.raster-choice-bars .analytics-bar-row{
grid-template-columns:minmax(105px,1.15fr) minmax(90px,1fr) auto;
gap:10px;
}
}
/* v9.04.59 – KI duration intent */
.duration-option-maximum{
grid-column:1 / -1;
min-height:70px;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center;
gap:3px;
text-align:left;
padding:14px 18px;
}
.duration-option-maximum strong{
font-size:15px;
line-height:1.25;
}
.duration-option-maximum small{
font-size:12px;
font-weight:650;
color:var(--muted);
}
.duration-option-maximum.active small{
color:inherit;
opacity:.72;
}
/* v9.04.67 – mehrere KI-Terminempfehlungen */
#aiResultText .schedule-section-best-date{
display:grid;
grid-template-columns:minmax(0,1.8fr) minmax(210px,.72fr);
column-gap:28px;
align-items:start;
overflow:hidden;
}
#aiResultText .schedule-section-best-date > h4,
#aiResultText .schedule-section-best-date > .best-date-value{
grid-column:1;
}
#aiResultText .schedule-section-best-date > .best-date-summary{
grid-column:2;
grid-row:1 / span 2;
align-self:start;
min-height:54px;
padding:2px 0 10px 22px;
border-left:1px solid rgba(22,139,80,.22);
display:grid;
grid-template-columns:34px minmax(0,1fr);
gap:10px;
align-items:center;
color:#187c68;
}
#aiResultText .schedule-section-best-date > .best-date-summary .best-date-summary-icon{
width:34px;
height:34px;
border-radius:50%;
display:grid;
place-items:center;
background:rgba(22,139,80,.10);
font-size:17px;
}
#aiResultText .schedule-section-best-date > .best-date-summary strong{
font-size:14px;
line-height:1.35;
}
#aiResultText .schedule-section-best-date > .best-date-note{
grid-column:2;
margin:8px 0 0!important;
padding:12px 0 0 22px!important;
border-top:1px solid rgba(22,139,80,.13)!important;
border-left:1px solid rgba(22,139,80,.22);
color:#303740!important;
line-height:1.45;
}
#aiResultText .schedule-section-alternative-date{
background:linear-gradient(180deg,#f7fff9,#f1fbf5);
border-color:#39ad72;
}
#aiResultText .schedule-section-alternative-date h4::before{
content:"☆ ";
}
#aiResultText .schedule-section-best-date:not(.schedule-section-alternative-date) h4::before{
content:"★ ";
}
#aiResultText .schedule-section-best-date + .schedule-section-best-date{
margin-top:0;
}
@media(max-width:760px){
#aiResultText .schedule-section-best-date{
grid-template-columns:minmax(0,1fr);
row-gap:0;
}
#aiResultText .schedule-section-best-date > h4,
#aiResultText .schedule-section-best-date > .best-date-value,
#aiResultText .schedule-section-best-date > .best-date-summary,
#aiResultText .schedule-section-best-date > .best-date-note{
grid-column:1;
}
#aiResultText .schedule-section-best-date > .best-date-summary{
grid-row:auto;
margin-top:12px;
padding:12px 0 0;
border-left:0;
border-top:1px solid rgba(22,139,80,.18);
}
#aiResultText .schedule-section-best-date > .best-date-note{
padding:10px 0 0!important;
border-left:0;
}
}
/* v9.04.69 – Datum der KI-Terminempfehlung immer in einer Zeile */
#aiResultText .schedule-section-best-date > .best-date-calendar{
display:flex !important;
align-items:center;
flex-wrap:nowrap !important;
white-space:nowrap !important;
width:max-content;
max-width:100%;
}
#aiResultText .schedule-section-best-date > .best-date-calendar::before{
flex:0 0 auto;
}
/* v9.04.70 – Zeitachse: Uhrzeit markiert den BEGINN des Intervalls */
.schedule .time-label.grid-time-start{
box-sizing:border-box;
height:30px;
padding:2px 10px 0;
display:flex;
align-items:flex-start;
justify-content:flex-start;
line-height:1.05;
font-variant-numeric:tabular-nums;
}
.schedule .time-label.grid-time-hour{
color:#3f4753;
font-weight:800;
}
.schedule .grid-slot-hour,
.schedule .time-label.grid-time-hour{
box-shadow:inset 0 1px 0 #d9dee6;
}
/* Die Beschriftung sitzt bewusst direkt unter der oberen Rasterlinie:
12:00 bezeichnet damit eindeutig das Feld 12:00–12:15 usw. */
.schedule .time-label.grid-time-start{
transform:translateY(-1px);
}
@media(max-width:760px){
.schedule .time-label.grid-time-start{
padding-top:2px;
}
}
/* v9.04.71 – Uhrzeiten direkt auf der horizontalen Startlinie */
.schedule .time-label.grid-time-start{
position:sticky;
left:0;
z-index:6;
overflow:visible;
padding:0 10px;
height:30px;
display:flex;
align-items:flex-start;
justify-content:flex-start;
line-height:1;
transform:none;
}
/* Text sitzt mittig auf der oberen Rasterlinie.
Weisser Hintergrund hinter der Zahl trennt Beschriftung und Linie sauber. */
.schedule .time-label.grid-time-start{
text-indent:0;
color:transparent;
}
.schedule .time-label.grid-time-start::after{
content:attr(title);
position:absolute;
left:9px;
top:0;
transform:translateY(-50%);
background:#fff;
color:var(--muted);
padding:0 3px;
line-height:1.15;
white-space:nowrap;
font-size:12px;
font-weight:inherit;
font-variant-numeric:tabular-nums;
pointer-events:none;
}
/* Im title steht "Beginn des Zeitfensters: 12:00 Uhr"; für die sichtbare
Beschriftung verwenden wir deshalb zusätzlich data-time (siehe event.js). */
.schedule .time-label.grid-time-start::after{
content:attr(data-time);
}
.schedule .time-label.grid-time-hour::after{
color:#3f4753;
font-weight:800;
}
/* Die horizontale Linie beginnt sichtbar rechts neben der Zeitachse. */
.schedule .grid-slot{
border-top:0;
}
/* v9.04.72 – erste Uhrzeit (z.B. 08:00) vollständig sichtbar */
.schedule{
overflow:visible;
}
.schedule .time-label.grid-time-start{
z-index:8;
}
.schedule .time-label.grid-time-start::after{
z-index:9;
}
/* Nur die allererste Zeitbeschriftung braucht Abstand zur Kopfzeile,
weil sie mittig auf der ersten horizontalen Linie sitzt. */
.schedule .time-label.grid-time-start:nth-child(1){
margin-top:8px;
}
/* v9.04.73 – keine Linienfragmente links neben den Uhrzeiten */
.schedule .time-label.grid-time-start,
.schedule .time-label.grid-time-hour{
border-top-color:transparent !important;
box-shadow:none !important;
}
.schedule .time-label.grid-time-start::before{
display:none !important;
content:none !important;
}
/* v9.04.74 – finale Zeitachse: links ruhig, Raster nur rechts der Uhrzeit */
.schedule .time-label.grid-time-start,
.schedule .time-label.grid-time-hour{
border-top:0 !important;
border-bottom:0 !important;
background-image:none !important;
box-shadow:none !important;
}
.schedule .time-label.grid-time-start::before,
.schedule .time-label.grid-time-hour::before{
content:none !important;
display:none !important;
}
/* Uhrzeit frei auf der Grenzhöhe; keine künstliche Linie hinter dem Text */
.schedule .time-label.grid-time-start::after{
background:#fff;
padding:0 4px 0 0;
}
/* Das eigentliche Raster beginnt erst rechts von der Zeitspalte. */
.schedule .grid-slot{
border-top:1px solid var(--line) !important;
}
/* Volle Stunden rechts etwas stärker als Orientierung. */
.schedule .grid-slot.grid-hour-start{
border-top-width:2px !important;
}
/* v9.04.75 – feines Raster zurück; Uhrzeit bleibt sichtbar; links kein Linienfragment */
/* Zeitspalte wieder sticky und ruhig/weiß */
.schedule .time-label.grid-time-start{
position:sticky !important;
left:0 !important;
z-index:8 !important;
overflow:visible !important;
background:#fff !important;
border-top:0 !important;
border-bottom:0 !important;
box-shadow:none !important;
}
/* Keine horizontale Linie links bzw. innerhalb der Zeitspalte */
.schedule .time-label.grid-time-start::before,
.schedule .time-label.grid-time-hour::before{
content:none !important;
display:none !important;
}
/* Uhrzeit weiterhin exakt auf der Startlinie */
.schedule .time-label.grid-time-start::after{
content:attr(data-time) !important;
position:absolute !important;
left:18px !important;
top:0 !important;
transform:translateY(-50%) !important;
z-index:9 !important;
background:#fff !important;
padding:0 5px 0 0 !important;
line-height:1.15 !important;
white-space:nowrap !important;
color:var(--muted) !important;
font-size:12px !important;
font-variant-numeric:tabular-nums !important;
pointer-events:none !important;
}
/* Volle Stunden nur typografisch hervorheben */
.schedule .time-label.grid-time-hour::after{
color:#3f4753 !important;
font-weight:800 !important;
}
/* Feines ursprüngliches Raster rechts der Zeitspalte */
.schedule .grid-slot{
border-top:1px solid var(--line) !important;
}
/* Volle Stunden nicht mehr mit der groben 2px-Linie aus v9.04.74 */
.schedule .grid-slot.grid-hour-start{
border-top:1px solid var(--line) !important;
}
/* Erste Uhrzeit darf nicht unter der Kopfzeile verschwinden */
.schedule .time-label.grid-time-start:nth-child(1){
margin-top:8px !important;
}
/* v9.04.80 – Zeitachse wie v9.04.75, Rasterlinien sanft wie v9.04.69 */
/* Eine einzige, feine horizontale Linie pro 15-Minuten-Grenze.
Die Zeitpositionierung aus v9.04.75 bleibt unverändert. */
.schedule .grid-slot,
.schedule .grid-slot.grid-hour-start{
border-top:1px solid #edf0f3 !important;
border-bottom:0 !important;
box-shadow:none !important;
}
/* Vertikale Linien ebenfalls in der ursprünglichen, sanften Rasterfarbe. */
.schedule .grid-slot{
border-right:1px solid #edf0f3 !important;
}
/* v9.04.81 – finale Zeitachse nach Referenzbild
Die Uhrzeiten markieren die Grenzen der 15-Minuten-Felder.
Links von der Uhrzeit bleibt die Zeitspalte ruhig; die horizontale Linie
beginnt direkt rechts neben der Uhrzeit und läuft durch das Tagesraster. */
.schedule .corner{
position:sticky !important;
top:0 !important;
left:0 !important;
z-index:12 !important;
background:#fff !important;
}
/* Etwas Luft unter der Kopfzeile, damit 08:00 sauber unter "Zeit" / Wochentagen sitzt. */
.schedule .date-label{
min-height:44px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
}
.schedule .time-label.grid-time-start{
position:sticky !important;
left:0 !important;
z-index:8 !important;
width:68px !important;
min-width:68px !important;
height:30px !important;
padding:0 !important;
margin:0 !important;
overflow:visible !important;
background:#fff !important;
border-top:0 !important;
border-bottom:0 !important;
border-right:1px solid #edf0f3 !important;
box-shadow:none !important;
color:transparent !important;
}
/* sichtbare Uhrzeit exakt auf der horizontalen Rastergrenze */
.schedule .time-label.grid-time-start::after{
content:attr(data-time) !important;
position:absolute !important;
left:18px !important;
top:0 !important;
transform:translateY(-50%) !important;
z-index:10 !important;
display:block !important;
width:auto !important;
background:#fff !important;
padding:0 5px 0 0 !important;
color:var(--muted) !important;
font-size:12px !important;
font-weight:400 !important;
line-height:1.15 !important;
white-space:nowrap !important;
font-variant-numeric:tabular-nums !important;
pointer-events:none !important;
}
.schedule .time-label.grid-time-hour::after{
color:#3f4753 !important;
font-weight:800 !important;
}
/* Nur RECHTS der Uhrzeit ein kurzes Liniensegment bis zur Montag-Spalte.
Links von der Zahl gibt es bewusst keine horizontale Linie. */
.schedule .time-label.grid-time-start::before{
content:"" !important;
display:block !important;
position:absolute !important;
top:0 !important;
left:54px !important;
right:-1px !important;
height:0 !important;
border-top:1px solid #edf0f3 !important;
background:none !important;
pointer-events:none !important;
z-index:9 !important;
}
/* Tagesraster: dieselbe sanfte Linie setzt das Segment nahtlos fort. */
.schedule .grid-slot,
.schedule .grid-slot.grid-slot-hour{
border-top:1px solid #edf0f3 !important;
border-bottom:0 !important;
border-right:1px solid #edf0f3 !important;
box-shadow:none !important;
}
/* Kein Sonderversatz für die erste Uhrzeit. */
.schedule .time-label.grid-time-start:first-of-type,
.schedule .time-label.grid-time-start:nth-child(1){
margin-top:0 !important;
}
/* v9.04.82 – erste Zeitmarke vollständig unterhalb der Kopfzeile */
.schedule .time-axis-start-spacer,.schedule .grid-start-spacer{height:18px!important;min-height:18px!important;background:#fff!important;border-bottom:0!important;box-shadow:none!important;pointer-events:none!important}
.schedule .time-axis-start-spacer{position:sticky!important;left:0!important;z-index:8!important;width:68px!important;min-width:68px!important;border-right:1px solid #edf0f3!important}
.schedule .grid-start-spacer{min-width:96px!important;border-right:1px solid #edf0f3!important}
/* v9.04.84 – Raster direkt in den Einstellungen ändern */
.admin-setting-control{flex:0 0 auto;min-width:150px}
.admin-setting-control select{width:100%;min-width:150px;height:42px;padding:0 38px 0 12px;border:1px solid var(--line);border-radius:11px;background:#fff;font:inherit;font-weight:700;color:var(--text);cursor:pointer}
.admin-setting-row:has(select:disabled){opacity:.6;cursor:wait}
.admin-raster-setting{cursor:default}
@media(max-width:560px){
.admin-raster-setting{flex-direction:column;align-items:stretch}
.admin-setting-control,.admin-setting-control select{width:100%;min-width:0}
}
/* v9.04.94 – clearer notification section in survey settings */
.admin-setting-section-label{
display:flex;
align-items:center;
gap:12px;
margin:14px 2px 2px;
color:var(--ink);
}
.admin-setting-section-label::after{
content:"";
height:1px;
flex:1;
background:var(--line);
}
.admin-setting-section-label strong{
flex:0 0 auto;
font-size:15px;
letter-spacing:-.01em;
}
.admin-notification-row{
background:#fff;
}
.admin-notification-row .admin-setting-copy strong{
font-size:13.5px;
}
@media(max-width:560px){
.admin-setting-section-label{margin-top:12px}
.admin-setting-section-label strong{font-size:14px}
}
/* Teilnehmerverwaltung: Admin-Kennzeichnung und E-Mail direkt in der Kopfzeile */
.admin-person-identity{
display:flex;
align-items:center;
gap:.55rem;
min-width:0;
}
.admin-owner-badge{
display:inline-flex;
align-items:center;
flex:0 0 auto;
padding:.2rem .52rem;
border-radius:999px;
background:#eef2f7;
color:#667085;
font-size:.72rem;
font-weight:750;
line-height:1.2;
letter-spacing:.01em;
}
.admin-person-actions{
align-items:center;
flex-wrap:wrap;
}
.admin-person-email-wrap{
position:relative;
display:flex;
align-items:center;
}
.admin-person-email{
width:230px;
height:44px;
padding:0 .85rem;
border:1px solid #dfe4ec;
border-radius:14px;
background:#f4f7fa;
color:#171923;
font:inherit;
font-size:.9rem;
outline:none;
transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.admin-person-email::placeholder{color:#98a2b3}
.admin-person-email:focus{
background:#fff;
border-color:#8cb4ff;
box-shadow:0 0 0 3px rgba(59,130,246,.10);
}
.admin-person-email:disabled{opacity:.7}
.admin-person-email-status{
position:absolute;
left:8px;
top:calc(100% + 3px);
font-size:.68rem;
color:#667085;
white-space:nowrap;
}
.admin-person-email-status.saved{color:#12834a}
.admin-person-email-status.error{color:#c53030}
@media (max-width:1100px){
.admin-person-top{align-items:flex-start}
.admin-person-actions{justify-content:flex-start}
.admin-person-email{width:210px}
}
@media (max-width:720px){
.admin-person-top{display:block}
.admin-person-actions{margin-top:.8rem}
.admin-person-email-wrap{width:100%}
.admin-person-email{width:100%}
}
.rename-email-field{margin-top:1rem}
.rename-email-field label{display:flex;align-items:center;gap:.45rem}
.rename-email-field small{display:block;margin-top:.45rem;color:#7a8290;line-height:1.4}
.optional-label{font-size:.72rem;font-weight:700;color:#7c8492;background:#f1f3f6;border-radius:999px;padding:.15rem .45rem}
/* Sichtbarkeit von Zusatzangaben direkt am Feldtitel */
.admin-meta-caption{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:.45rem;
}
.field-visibility-badge{
display:inline-flex;
align-items:center;
padding:.16rem .46rem;
border-radius:999px;
font-size:.68rem;
font-weight:700;
line-height:1.2;
letter-spacing:.005em;
white-space:nowrap;
}
.field-visibility-badge.participant-visible{
background:#eef4ff;
color:#49617f;
}
.field-visibility-badge.admin-only{
background:#f1f3f6;
color:#737b89;
}
/* KI-Auftrag: klare Führung, wenn die Auswertung ohne Auftrag gestartet wird */
#aiPrompt.ai-prompt-attention{
border-color:#8fb5ff;
box-shadow:0 0 0 4px rgba(66,133,244,.12);
transition:border-color .18s ease,box-shadow .18s ease;
}
/* v9.04.107 – Kauf zuerst, E-Mail-Bestätigung danach */
.credit-verification-notice{margin-top:12px;padding:14px 16px;border:1px solid #d8e8dc;border-radius:14px;background:#f3fbf6}
.credit-verification-notice[hidden]{display:none}.credit-verification-notice strong{display:block;margin-bottom:5px}.credit-verification-notice p{margin:0 0 10px;color:var(--muted);font-size:13px;line-height:1.45}.credit-verification-notice button{font-size:12px}
/* v9.04.109 — Phase 3: eigener Superadmin-Bereich */
.superadmin-page{margin-top:28px}
.superadmin-page>.gift-section{margin-top:24px}
.superadmin-balance-section{display:flex;flex-direction:column;gap:18px}
.superadmin-balance-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.superadmin-balance-total{min-width:min(100%,280px);padding:16px 18px;border:1px solid var(--line);border-radius:18px;background:#f8fafc}
.superadmin-balance-total span,.superadmin-balance-total small{display:block;color:var(--muted)}
.superadmin-balance-total span{font-size:12px;font-weight:750}
.superadmin-balance-total strong{display:block;margin:6px 0 4px;font-size:34px;line-height:1.05;letter-spacing:-.6px}
.superadmin-balance-total small{font-size:12px}
.superadmin-balance-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.superadmin-finance-kpi,.superadmin-balance-card{padding:18px;border:1px solid var(--line);border-radius:18px;background:#fff;min-width:0}
.superadmin-finance-kpi span,.superadmin-finance-kpi small{display:block;color:var(--muted)}
.superadmin-finance-kpi span{font-size:12px;font-weight:750}
.superadmin-finance-kpi strong{display:block;margin:7px 0 4px;font-size:28px;line-height:1.08;letter-spacing:-.5px}
.superadmin-finance-kpi small{font-size:12px}
.superadmin-balance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.superadmin-balance-card-head{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.superadmin-balance-card-head strong{font-size:18px;line-height:1.2}
.superadmin-balance-card-head small{color:var(--muted);font-size:12px;line-height:1.4}
.superadmin-finance-list{display:flex;flex-direction:column;gap:12px}
.superadmin-finance-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.superadmin-finance-row:first-child{border-top:0;padding-top:0}
.superadmin-finance-row>div{min-width:0}
.superadmin-finance-row span,.superadmin-finance-row small{display:block}
.superadmin-finance-row span{font-weight:700;line-height:1.3}
.superadmin-finance-row small{margin-top:4px;color:var(--muted);font-size:12px;line-height:1.45}
.superadmin-finance-row strong{flex:0 0 auto;font-size:18px;line-height:1.2;text-align:right}
.superadmin-finance-row.total-row{margin-top:2px;padding-top:14px;border-top:1px solid #d6dce3}
.superadmin-finance-row.total-row span{font-size:15px}
.superadmin-finance-row.total-row strong{font-size:22px}
.superadmin-balance-note{margin:0;color:var(--muted);font-size:12px;line-height:1.45}
.superadmin-usage-section{display:flex;flex-direction:column;gap:16px}
.superadmin-usage-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.superadmin-usage-card{padding:18px;border:1px solid var(--line);border-radius:18px;background:#fff;min-width:0}
.superadmin-usage-card span,.superadmin-usage-card small{display:block;color:var(--muted)}
.superadmin-usage-card span{font-size:12px;font-weight:750;line-height:1.35}
.superadmin-usage-card strong{display:block;margin:7px 0 4px;font-size:28px;line-height:1.08;letter-spacing:-.5px}
.superadmin-usage-card small{font-size:12px;line-height:1.4}
@media(max-width:1200px){.superadmin-usage-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:980px){.superadmin-balance-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.superadmin-balance-grid{grid-template-columns:1fr}.superadmin-usage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){#superadminLogout{padding:10px 14px}.superadmin-page{margin-top:18px}.superadmin-balance-total strong{font-size:30px}}
@media(max-width:560px){.superadmin-balance-kpis{grid-template-columns:1fr}.superadmin-balance-total{width:100%}.superadmin-finance-row{flex-direction:column;align-items:flex-start}.superadmin-finance-row strong{text-align:left}.superadmin-usage-grid{grid-template-columns:1fr}}
/* v9.04.111: Identische Start-/Endzeit bedeutet einen einzelnen Startzeit-Termin. */
.single-start-hint{grid-column:1/-1;margin-top:2px;color:var(--muted);font-size:12px;line-height:1.35}
/* v9.04.113 — gemischte Datenumfragen: fixe Starttermine oberhalb,
echte Von-bis-Zeitfenster darunter weiterhin im Raster. */
.schedule.mixed-schedule{display:block!important;width:100%!important;min-width:0!important}
.mixed-fixed-section{display:grid;width:100%;min-width:0;gap:8px;padding:8px;border-bottom:1px solid var(--line)}
.mixed-raster-grid{display:grid;width:max-content;min-width:max-content}
/* v9.04.120 — KI-Ergebnisaktionen auf kleinen Displays sauber anordnen */
@media(max-width:560px){
.ai-result > .between{
min-height:0;
align-items:flex-start;
flex-direction:column;
gap:10px;
}
.ai-result-actions{
width:100%;
display:flex;
align-items:center;
justify-content:flex-start;
gap:14px;
flex-wrap:wrap;
}
.ai-result-actions .ghost{
width:auto;
flex:0 0 auto;
padding:6px 0;
white-space:nowrap;
text-align:left;
}
.ai-result-actions .ai-pdf-btn{
flex:0 0 auto;
white-space:nowrap;
}
}
@media(max-width:390px){
.ai-result-actions{
flex-direction:column;
align-items:flex-start;
gap:2px;
}
}
/* v9.04.121 — KI-Terminvorschlag: Datum und Uhrzeit auf Smartphones kompakter */
@media(max-width:560px){
#aiResultText .schedule-section-best-date{
padding:16px 14px;
}
#aiResultText .schedule-section-best-date > h4{
margin-bottom:8px;
font-size:17px;
line-height:1.3;
}
#aiResultText .schedule-section-best-date > .best-date-value,
#aiResultText .schedule-section-best-date > .best-date-calendar,
#aiResultText .schedule-section-best-date > .best-date-time{
display:flex !important;
align-items:center;
gap:8px;
width:100%;
max-width:100%;
padding:3px 0;
font-size:clamp(16px,4.7vw,18px);
line-height:1.3;
white-space:nowrap !important;
overflow:visible;
}
#aiResultText .schedule-section-best-date > .best-date-calendar::before,
#aiResultText .schedule-section-best-date > .best-date-time::before{
position:static;
flex:0 0 24px;
width:24px;
font-size:18px;
line-height:1;
text-align:center;
}
#aiResultText .schedule-section-best-date > .best-date-summary{
margin-top:10px;
}
}
@media(max-width:360px){
#aiResultText .schedule-section-best-date > .best-date-value,
#aiResultText .schedule-section-best-date > .best-date-calendar,
#aiResultText .schedule-section-best-date > .best-date-time{
gap:6px;
font-size:15px;
}
#aiResultText .schedule-section-best-date > .best-date-calendar::before,
#aiResultText .schedule-section-best-date > .best-date-time::before{
flex-basis:22px;
width:22px;
font-size:17px;
}
}
/* v9.04.122 — Namensfeld kompakter, Button bleibt direkt daneben */
#joinBox .row{
justify-content:flex-start;
}
#joinBox #nameInput{
flex:0 1 620px;
width:min(620px, 100%);
max-width:620px;
}
@media(max-width:760px){
#joinBox #nameInput{
flex:1 1 100%;
width:100%;
max-width:none;
}
}
/* v9.05 — Admin-Titel direkt oben bearbeiten */
#eventTitle.admin-editable-title{cursor:text;border-radius:10px;transition:background .16s ease,box-shadow .16s ease}
#eventTitle.admin-editable-title:hover{background:rgba(17,24,39,.045);box-shadow:0 0 0 8px rgba(17,24,39,.045)}
#eventTitle.admin-editable-title.editing{outline:2px solid #111827;outline-offset:6px;background:#fff}
.admin-more-toggle-wrap{margin-top:24px;padding-top:20px;border-top:1px solid #e6e9ef}
.admin-more-toggle{width:100%;justify-content:center}
.admin-more-settings{margin-top:18px}
/* v9.06 — Namenseingabe optisch kompakter und ausgewogener */
#joinBox{
padding:16px 18px;
}
#joinBox .row{
display:grid;
grid-template-columns:minmax(260px, 500px) auto;
justify-content:start;
align-items:center;
gap:12px;
}
#joinBox #nameInput{
width:100%;
max-width:500px;
min-width:0;
padding:13px 16px;
}
#joinBox #joinBtn{
width:auto;
min-width:112px;
white-space:nowrap;
padding:13px 20px;
}
@media(max-width:680px){
#joinBox .row{
grid-template-columns:1fr;
}
#joinBox #nameInput,
#joinBox #joinBtn{
width:100%;
max-width:none;
}
}
/* v9.07 — Namenseingabe als kompakte, elegante Einheit */
#joinBox{
width:min(940px, 100%);
max-width:940px;
box-sizing:border-box;
margin:0 0 22px;
padding:6px;
background:#fff;
border:1px solid #dde2e9;
border-radius:18px;
box-shadow:0 8px 28px rgba(17,24,39,.055);
transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#joinBox:focus-within{
border-color:#aeb7c5;
box-shadow:0 10px 34px rgba(17,24,39,.09), 0 0 0 4px rgba(17,24,39,.035);
}
#joinBox .row{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:6px;
width:100%;
}
#joinBox #nameInput{
width:100%;
max-width:none;
min-width:0;
padding:14px 16px;
border:0;
border-radius:13px;
background:transparent;
box-shadow:none;
outline:none;
font-size:16px;
}
#joinBox #nameInput:focus{
border:0;
box-shadow:none;
outline:none;
}
#joinBox #joinBtn{
width:auto;
min-width:122px;
margin:0;
padding:14px 22px;
border-radius:13px;
white-space:nowrap;
}
@media(max-width:560px){
#joinBox{
width:100%;
max-width:none;
padding:6px;
}
#joinBox .row{
grid-template-columns:1fr;
gap:6px;
}
#joinBox #nameInput,
#joinBox #joinBtn{
width:100%;
max-width:none;
}
}
/* v9.06 — Name-Fokus: deutlich subtiler. Solange kein Name eingegeben ist,
tritt die restliche Oberfläche nur leicht zurück. Der Eintragen-Button
erscheint erst, sobald im Namensfeld Text steht. */
body.participant-name-focus .admin-banner,
body.participant-name-focus .event-head .actions,
body.participant-name-focus #eventMeta,
body.participant-name-focus .availability-help,
body.participant-name-focus .mark-toolbar,
body.participant-name-focus .schedule-wrap,
body.participant-name-focus .participant-extra-fields,
body.participant-name-focus .date-suggestion-box,
body.participant-name-focus #groupAvailabilityCard,
body.participant-name-focus #adminPanel,
body.participant-name-focus .footer{
filter:blur(1.35px) saturate(.94);
opacity:.66;
pointer-events:none;
user-select:none;
transition:filter .3s ease,opacity .3s ease,transform .3s ease;
}
body.participant-name-focus .grid-layout>.card:first-child{
position:relative;
overflow:hidden;
}
body.participant-name-focus .grid-layout>.card:first-child::after{
content:"";
position:absolute;
z-index:2;
left:0;right:0;
top:176px;bottom:0;
pointer-events:none;
background:
radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.02) 0%,rgba(248,250,253,.16) 48%,rgba(241,245,250,.34) 100%),
linear-gradient(135deg,rgba(239,244,251,.12),rgba(255,255,255,.24) 50%,rgba(235,241,249,.16));
-webkit-backdrop-filter:blur(1.2px);
backdrop-filter:blur(1.2px);
mask-image:linear-gradient(to bottom,transparent 0,#000 96px,#000 100%);
-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 96px,#000 100%);
}
body.participant-name-focus #joinBox{
position:relative;
z-index:4;
background:rgba(255,255,255,.94);
border-color:rgba(184,198,222,.52);
box-shadow:0 10px 28px rgba(26,38,62,.055);
-webkit-backdrop-filter:blur(4px);
backdrop-filter:blur(4px);
}
#joinBox #joinBtn{
transition:opacity .22s ease,transform .22s ease,width .24s ease,padding .24s ease,border-width .24s ease;
}
/* Eintragen bleibt auch bei leerem Namensfeld vollständig sichtbar. */
body.participant-name-focus #joinBtn,
body.participant-name-entered #joinBtn,
#joinBtn.name-ready{
opacity:1;
transform:none;
pointer-events:auto;
width:auto;
min-width:122px;
padding-left:22px;
padding-right:22px;
border-width:0;
overflow:visible;
position:relative;
z-index:5;
}
body.participant-name-focus #nameInput{
position:relative;
z-index:5;
background:#fff;
box-shadow:0 0 0 3px rgba(105,153,235,.09),0 8px 22px rgba(36,61,103,.055);
transition:box-shadow .22s ease,border-color .22s ease;
}
body.participant-name-focus #nameInput:focus{
box-shadow:0 0 0 4px rgba(105,153,235,.13),0 10px 26px rgba(36,61,103,.075);
}
@media(max-width:760px){
body.participant-name-focus .grid-layout>.card:first-child::after{top:168px}
}
@media(prefers-reduced-motion:reduce){
body.participant-name-focus *,#joinBox #joinBtn{transition:none!important}
}
}
/* v9.08 — Admin: Namensfokus bleibt in „Wann kannst du?“ aktiv.
Nur die Admin-relevanten Bereiche bleiben vollständig sichtbar und bedienbar. */
body.participant-name-focus:has(#adminBanner.show) .admin-banner,
body.participant-name-focus:has(#adminBanner.show) .event-head .actions,
body.participant-name-focus:has(#adminBanner.show) #eventMeta,
body.participant-name-focus:has(#adminBanner.show) #groupAvailabilityCard,
body.participant-name-focus:has(#adminBanner.show) #groupAvailabilityCard .schedule-wrap,
body.participant-name-focus:has(#adminBanner.show) #adminPanel,
body.participant-name-focus:has(#adminBanner.show) .footer{
filter:none;
opacity:1;
pointer-events:auto;
user-select:auto;
}
/* v9.09 — Im Admin-Modus sitzt der Name-Fokus ausschliesslich in der
Karte „Wann kannst du?“. Dort bleiben Erklärung/Toolbar/Raster weich
zurückgesetzt; Admin-Hinweis, Teilen, Gruppenergebnis, Auswertung und
der restliche Seitenrahmen bleiben vollständig scharf. */
/* v9.10 — Admin: blur exclusively inside “Wann kannst du?”. */
body.participant-name-focus:has(#adminBanner.show) .admin-banner,
body.participant-name-focus:has(#adminBanner.show) .event-head,
body.participant-name-focus:has(#adminBanner.show) .event-head *,
body.participant-name-focus:has(#adminBanner.show) #groupAvailabilityCard,
body.participant-name-focus:has(#adminBanner.show) #groupAvailabilityCard *,
body.participant-name-focus:has(#adminBanner.show) #adminPanel,
body.participant-name-focus:has(#adminBanner.show) #adminPanel *,
body.participant-name-focus:has(#adminBanner.show) .footer,
body.participant-name-focus:has(#adminBanner.show) .footer *{
filter:none !important; opacity:1 !important; pointer-events:auto; user-select:auto;
}
body.participant-name-focus:has(#adminBanner.show) .grid-layout>.card:first-child .between,
body.participant-name-focus:has(#adminBanner.show) .grid-layout>.card:first-child .between *,
body.participant-name-focus:has(#adminBanner.show) .grid-layout>.card:first-child #joinBox,
body.participant-name-focus:has(#adminBanner.show) .grid-layout>.card:first-child #joinBox *{
filter:none !important; opacity:1 !important; pointer-events:auto; user-select:auto;
}
body.participant-name-focus:has(#adminBanner.show) .grid-layout>.card:first-child .availability-help,
body.participant-name-focus:has(#adminBanner.show) .grid-layout>.card:first-child .mark-toolbar,
body.participant-name-focus:has(#adminBanner.show) .grid-layout>.card:first-child>.schedule-wrap,
body.participant-name-focus:has(#adminBanner.show) .grid-layout>.card:first-child .participant-extra-fields,
body.participant-name-focus:has(#adminBanner.show) .grid-layout>.card:first-child .date-suggestion-box{
filter:blur(1.35px) saturate(.94) !important; opacity:.66 !important; pointer-events:none; user-select:none;
}
/* v9.11 — Startseite: gleicher subtile Blur für „Neue Zeitumfrage“. */
.create-poll-focus{position:relative;isolation:isolate}
.create-poll-focus>form{filter:blur(1.35px) saturate(.94);opacity:.66}
.create-poll-focus::after{content:"";position:absolute;left:0;right:0;top:3.4rem;bottom:0;z-index:2;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.22) 48%,rgba(255,255,255,.07))}
@media(prefers-reduced-motion:no-preference){.create-poll-focus>form{transition:filter .25s ease,opacity .25s ease}}
/* v9.12 — Startseite: Überschrift + „Name der Umfrage“ + Eingabefeld bleiben scharf. */
.create-poll-focus>form{filter:none!important;opacity:1!important}
.create-poll-focus>form>*:not(.create-poll-title-focus){filter:blur(1.35px) saturate(.94);opacity:.66}
.create-poll-focus .create-poll-title-focus,
.create-poll-focus .create-poll-title-focus *{filter:none!important;opacity:1!important}
.create-poll-focus::after{top:10.9rem}
/* v9.13 — Startseite wieder komplett scharf. */
.create-poll-focus>form,
.create-poll-focus>form>*,
.create-poll-focus .create-poll-title-focus,
.create-poll-focus .create-poll-title-focus *{
filter:none!important;
opacity:1!important;
}
.create-poll-focus::after{display:none!important}
/* v9.13 — Sehr leichter Hintergrund-Blur hinter allen Popups/Modals. */
.modal-backdrop,
.modal-overlay,
.dialog-backdrop,
.popup-backdrop,
.overlay,
[role="dialog"]::backdrop,
dialog::backdrop{
-webkit-backdrop-filter:blur(2px)!important;
backdrop-filter:blur(2px)!important;
}
/* v9.14 — Leere Toasts dürfen nie als weißes/ovales UI-Fragment erscheinen. */
.toast:empty,
.toast:not(.show){
visibility:hidden !important;
}
.toast.show:not(:empty){
visibility:visible !important;
}
/* v9.15 — Toast-/Hinweis-Meldungen zentral statt unten rechts. */
.toast{
position:fixed !important;
left:50% !important;
right:auto !important;
top:50% !important;
bottom:auto !important;
transform:translate(-50%,-50%) scale(.98) !important;
max-width:min(90vw,520px);
width:max-content;
text-align:center;
z-index:9999;
}
.toast.show{
transform:translate(-50%,-50%) scale(1) !important;
}
@media (max-width:640px){
.toast{
max-width:calc(100vw - 32px);
}
}
/* v9.16 — Tatsächlicher leichter Blur hinter den verwendeten Popups. */
.modal{
-webkit-backdrop-filter:blur(2px) !important;
backdrop-filter:blur(2px) !important;
}
/* Popup selbst bleibt vollständig scharf. */
.modal .modal-card{
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
filter:none !important;
}
/* v9.18 — Fix: leere Speicherstatus-Pill unten rechts darf niemals sichtbar sein.
Frühere Admin-Schärferegeln dürfen opacity:0 nicht mehr überschreiben. */
.save-status:not(.show),
.save-status:empty{
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
}
.save-status.show:not(:empty){
visibility:visible !important;
}
/* Auch im Admin-Fokusmodus nur aktive Speicherstatus-Meldungen sichtbar machen. */
body.participant-name-focus:has(#adminBanner.show) .save-status:not(.show),
body.participant-name-focus:has(#adminBanner.show) .save-status:empty{
opacity:0 !important;
visibility:hidden !important;
}
body.participant-name-focus:has(#adminBanner.show) .save-status.show:not(:empty){
visibility:visible !important;
}
/* v9.19 — Sexy Toggle für „Wann können die meisten?“ */
.group-availability-actions{
display:flex;
align-items:center;
justify-content:flex-end;
gap:10px;
flex-wrap:wrap;
}
.group-toggle{
appearance:none;
border:1px solid rgba(17,24,39,.10);
background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(241,244,248,.96));
color:#151b27;
min-height:42px;
padding:0 14px 0 16px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
font:inherit;
font-weight:800;
cursor:pointer;
box-shadow:0 7px 20px rgba(17,24,39,.08),inset 0 1px 0 rgba(255,255,255,.9);
transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.group-toggle-chevron{
width:24px;
height:24px;
border-radius:50%;
display:grid;
place-items:center;
background:rgba(17,24,39,.07);
font-size:17px;
line-height:1;
transition:transform .28s cubic-bezier(.2,.8,.2,1),background .18s ease;
}
.group-toggle:focus-visible{
outline:3px solid rgba(59,130,246,.25);
outline-offset:3px;
}
@media (hover:hover) and (pointer:fine){
.group-toggle:hover{
transform:translateY(-1px);
border-color:rgba(17,24,39,.17);
box-shadow:0 10px 26px rgba(17,24,39,.11),inset 0 1px 0 rgba(255,255,255,.95);
}
}
.group-toggle:active{transform:translateY(0) scale(.985)}
.group-collapse-shell{
display:grid;
grid-template-rows:1fr;
opacity:1;
transition:grid-template-rows .34s cubic-bezier(.2,.8,.2,1),opacity .23s ease,margin-top .34s ease;
}
.group-collapse-inner{
min-height:0;
overflow:hidden;
}
.group-availability-card.is-collapsed .group-collapse-shell{
grid-template-rows:0fr;
opacity:0;
}
.group-availability-card.is-collapsed .group-toggle-chevron{
transform:rotate(0deg);
}
@media (max-width:640px){
.group-availability-head{
align-items:flex-start;
gap:12px;
}
.group-availability-actions{
width:100%;
justify-content:space-between;
}
.group-toggle{
min-height:40px;
}
}
@media (prefers-reduced-motion:reduce){
.group-toggle,
.group-toggle-chevron,
.group-collapse-shell{
transition:none!important;
}
}
/* v9.20 — Einheitliche hochwertige Collapse-/Action-Buttons. */
.group-toggle,
.sexy-collapse-btn{
appearance:none;
border:1px solid rgba(17,24,39,.10) !important;
background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(241,244,248,.96)) !important;
color:#151b27 !important;
min-height:42px;
padding:0 10px 0 16px !important;
border-radius:999px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:9px;
font:inherit;
font-weight:800 !important;
text-decoration:none !important;
cursor:pointer;
box-shadow:0 7px 20px rgba(17,24,39,.08),inset 0 1px 0 rgba(255,255,255,.9);
}
.group-toggle-chevron,
.sexy-collapse-chevron{
flex:0 0 28px;
width:28px;
height:28px;
border-radius:50%;
display:flex !important;
align-items:center !important;
justify-content:center !important;
background:rgba(17,24,39,.07);
font-size:0; /* Symbol wird geometrisch gezeichnet, dadurch exakt zentriert. */
line-height:1;
position:relative;
}
.group-toggle-chevron::before,
.sexy-collapse-chevron::before{
content:"";
width:8px;
height:8px;
border-right:2px solid currentColor;
border-bottom:2px solid currentColor;
transform:translateY(-2px) rotate(45deg);
transform-origin:center;
}
.group-toggle[aria-expanded="true"] .group-toggle-chevron::before,
.sexy-collapse-btn[aria-expanded="true"] .sexy-collapse-chevron::before{
transform:translateY(2px) rotate(225deg);
}
/* Bestehenden Admin-Ein-/Ausblenden-Link optisch an den neuen Toggle angleichen. */
#toggleAdminPanel{
min-width:auto;
}
/* Sekundäre Aktionsbuttons bekommen dieselbe weiche Pill-Sprache. */
.admin-panel-actions .secondary,
.event-head .secondary{
border-radius:999px;
border:1px solid rgba(17,24,39,.06);
box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
@media (hover:hover) and (pointer:fine){
.group-toggle:hover,
.sexy-collapse-btn:hover{
transform:translateY(-1px);
border-color:rgba(17,24,39,.17) !important;
box-shadow:0 10px 26px rgba(17,24,39,.11),inset 0 1px 0 rgba(255,255,255,.95);
}
}
/* v9.21 — Hierarchie: Share + CSV prominent, Ein-/Ausblenden bewusst subtil. */
/* Prominente Aktionsbuttons */
#shareBtn,
#csvBtn{
appearance:none;
border:1px solid rgba(17,24,39,.10) !important;
background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(239,243,248,.98)) !important;
color:#151b27 !important;
min-height:46px;
padding:0 20px !important;
border-radius:999px !important;
font-weight:850 !important;
box-shadow:
0 8px 24px rgba(17,24,39,.10),
inset 0 1px 0 rgba(255,255,255,.95);
transition:
transform .18s ease,
box-shadow .18s ease,
border-color .18s ease,
background .18s ease;
}
#shareBtn:focus-visible,
#csvBtn:focus-visible{
outline:3px solid rgba(59,130,246,.22);
outline-offset:3px;
}
@media (hover:hover) and (pointer:fine){
#shareBtn:hover,
#csvBtn:hover{
transform:translateY(-1px);
border-color:rgba(17,24,39,.18) !important;
box-shadow:
0 12px 30px rgba(17,24,39,.14),
inset 0 1px 0 rgba(255,255,255,.98);
}
}
#shareBtn:active,
#csvBtn:active{
transform:translateY(0) scale(.985);
}
/* Ein-/Ausblenden deutlich zurücknehmen */
.group-toggle,
.sexy-collapse-btn{
min-height:36px !important;
padding:0 10px 0 12px !important;
gap:7px !important;
border:1px solid rgba(17,24,39,.07) !important;
background:rgba(245,247,250,.72) !important;
color:rgba(21,27,39,.66) !important;
font-size:.92rem !important;
font-weight:700 !important;
box-shadow:none !important;
}
.group-toggle-chevron,
.sexy-collapse-chevron{
flex-basis:24px !important;
width:24px !important;
height:24px !important;
background:rgba(17,24,39,.045) !important;
opacity:.78;
}
.group-toggle-chevron::before,
.sexy-collapse-chevron::before{
width:7px !important;
height:7px !important;
border-width:0 1.6px 1.6px 0 !important;
}
@media (hover:hover) and (pointer:fine){
.group-toggle:hover,
.sexy-collapse-btn:hover{
transform:none !important;
color:rgba(21,27,39,.86) !important;
border-color:rgba(17,24,39,.11) !important;
background:rgba(241,244,248,.94) !important;
box-shadow:none !important;
}
}
.group-toggle:active,
.sexy-collapse-btn:active{
transform:scale(.985) !important;
}
@media (max-width:640px){
#shareBtn,
#csvBtn{
min-height:44px;
padding-inline:16px !important;
}
}
/* v9.23 — Premium Look für den gesamten KI-Auswertungsbereich. */
.ai-premium{
position:relative;
isolation:isolate;
margin-top:18px;
padding:24px;
border-radius:28px;
border:1px solid rgba(17,24,39,.08);
background:
radial-gradient(circle at 14% 0%, rgba(255,255,255,.96), rgba(255,255,255,0) 36%),
linear-gradient(180deg, rgba(251,252,254,.98), rgba(241,244,248,.96));
box-shadow:
0 18px 48px rgba(17,24,39,.10),
inset 0 1px 0 rgba(255,255,255,.95);
overflow:hidden;
}
.ai-premium::before{
content:"";
position:absolute;
inset:0 auto auto 0;
width:100%;
height:1px;
background:linear-gradient(90deg,transparent,rgba(17,24,39,.13),transparent);
pointer-events:none;
}
.ai-premium::after{
content:"";
position:absolute;
width:240px;
height:240px;
right:-90px;
top:-110px;
border-radius:50%;
background:radial-gradient(circle,rgba(17,24,39,.055),transparent 70%);
pointer-events:none;
z-index:-1;
}
.ai-premium .ai-title-line{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}
.ai-premium .ai-title-line h3{
margin:0;
font-size:1.35rem;
letter-spacing:-.02em;
}
.ai-premium .credit-badge{
border:1px solid rgba(17,24,39,.08);
background:rgba(255,255,255,.78);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
border-radius:999px;
padding:7px 11px;
font-weight:800;
box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.ai-premium .ai-prompt-wrap{
margin-top:18px;
padding:10px;
border-radius:22px;
border:1px solid rgba(17,24,39,.08);
background:rgba(255,255,255,.72);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.96),
0 8px 24px rgba(17,24,39,.05);
}
.ai-premium #aiPrompt{
min-height:132px;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
resize:vertical;
padding:14px 54px 14px 14px;
font-size:1rem;
line-height:1.5;
}
.ai-premium #aiPrompt:focus{
outline:none !important;
}
.ai-premium .ai-prompt-wrap:focus-within{
border-color:rgba(17,24,39,.17);
box-shadow:
0 0 0 4px rgba(17,24,39,.035),
0 12px 30px rgba(17,24,39,.07),
inset 0 1px 0 rgba(255,255,255,.98);
}
.ai-premium .ai-mic{
width:42px;
height:42px;
min-width:42px;
border-radius:50% !important;
border:1px solid rgba(17,24,39,.08) !important;
background:linear-gradient(180deg,#fff,#eef2f6) !important;
box-shadow:0 7px 18px rgba(17,24,39,.08);
}
/* Admin: während der Spracheingabe bleibt der Mikrofon-Button dunkel und das Stoppsymbol klar sichtbar. */
#adminPanel .ai-premium .ai-mic.listening{
background:linear-gradient(180deg,#1b2230,#111827) !important;
color:#fff !important;
border-color:#111827 !important;
box-shadow:0 0 0 4px rgba(36,168,101,.18),0 7px 18px rgba(17,24,39,.16);
font-size:18px;
line-height:1;
}
.ai-premium .ai-actions{
margin-top:16px;
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}
.ai-premium #aiRun,
.ai-premium #aiSchedule,
.ai-premium #buyCredits{
min-height:46px;
border-radius:999px !important;
padding:0 18px !important;
font-weight:850 !important;
transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
}
.ai-premium #aiRun{
border:1px solid rgba(17,24,39,.12) !important;
background:linear-gradient(180deg,#1b2230,#111827) !important;
color:white !important;
box-shadow:
0 10px 26px rgba(17,24,39,.20),
inset 0 1px 0 rgba(255,255,255,.12);
}
.ai-premium #aiSchedule,
.ai-premium #buyCredits{
border:1px solid rgba(17,24,39,.10) !important;
background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(239,243,248,.98)) !important;
color:#151b27 !important;
box-shadow:
0 8px 24px rgba(17,24,39,.09),
inset 0 1px 0 rgba(255,255,255,.95);
}
@media (hover:hover) and (pointer:fine){
.ai-premium #aiRun:hover,
.ai-premium #aiSchedule:hover,
.ai-premium #buyCredits:hover,
.ai-premium .ai-mic:hover{
transform:translateY(-1px);
}
.ai-premium #aiRun:hover{
box-shadow:
0 14px 32px rgba(17,24,39,.26),
inset 0 1px 0 rgba(255,255,255,.14);
}
.ai-premium #aiSchedule:hover,
.ai-premium #buyCredits:hover{
border-color:rgba(17,24,39,.17) !important;
box-shadow:
0 12px 30px rgba(17,24,39,.12),
inset 0 1px 0 rgba(255,255,255,.98);
}
}
.ai-premium .ai-status{
color:rgba(21,27,39,.62);
font-weight:700;
}
.ai-premium .ai-working,
.ai-premium .ai-result,
.ai-premium .ai-output{
border-radius:20px;
}
@media (max-width:640px){
.ai-premium{
padding:18px;
border-radius:22px;
}
.ai-premium .ai-actions{
align-items:stretch;
}
.ai-premium #aiRun,
.ai-premium #aiSchedule,
.ai-premium #buyCredits{
width:100%;
justify-content:center;
}
}
/* v9.25 — Premium Inline-Titelbearbeitung für Admins. */
#eventTitle[contenteditable="true"],
.event-title [contenteditable="true"],
.admin-title-premium:not([type="hidden"]){
display:inline-block;
width:min(100%, 980px);
min-height:64px;
padding:10px 18px 12px;
margin:0;
border:1px solid rgba(17,24,39,.10) !important;
border-radius:22px !important;
background:
linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,248,251,.96)) !important;
color:#111827 !important;
font:inherit;
font-weight:850;
letter-spacing:-.035em;
box-shadow:
0 10px 28px rgba(17,24,39,.08),
inset 0 1px 0 rgba(255,255,255,.95);
outline:none !important;
transition:
border-color .18s ease,
box-shadow .18s ease,
background .18s ease,
transform .18s ease;
}
#eventTitle[contenteditable="true"]:focus,
.event-title [contenteditable="true"]:focus,
.admin-title-premium:not([type="hidden"]):focus{
border-color:rgba(17,24,39,.18) !important;
background:
linear-gradient(180deg,#fff,rgba(248,250,252,.98)) !important;
box-shadow:
0 0 0 4px rgba(17,24,39,.035),
0 14px 34px rgba(17,24,39,.10),
inset 0 1px 0 rgba(255,255,255,1);
}
#eventTitle[contenteditable="true"]::selection,
.event-title [contenteditable="true"]::selection{
background:rgba(17,24,39,.12);
}
/* Falls die bestehende JS-Logik beim Editieren ein echtes Text-Input verwendet. */
.event-title input[type="text"],
.event-head input[type="text"].title-input,
#adminTitle:not([type="hidden"]){
width:min(100%, 980px);
min-height:64px;
padding:10px 18px 12px;
border:1px solid rgba(17,24,39,.10) !important;
border-radius:22px !important;
background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,248,251,.96)) !important;
color:#111827 !important;
font-size:clamp(2rem,4vw,3.7rem) !important;
font-weight:850 !important;
letter-spacing:-.04em;
line-height:1.03;
box-shadow:
0 10px 28px rgba(17,24,39,.08),
inset 0 1px 0 rgba(255,255,255,.95);
outline:none !important;
}
.event-title input[type="text"]:focus,
.event-head input[type="text"].title-input:focus,
#adminTitle:not([type="hidden"]):focus{
border-color:rgba(17,24,39,.20) !important;
box-shadow:
0 0 0 4px rgba(17,24,39,.035),
0 14px 34px rgba(17,24,39,.11),
inset 0 1px 0 rgba(255,255,255,1);
}
/* Titelbereich selbst etwas luftiger und hochwertiger. */
.event-head .event-title{
min-width:0;
}
.event-head .event-title h1{
letter-spacing:-.04em;
}
@media (max-width:640px){
#eventTitle[contenteditable="true"],
.event-title [contenteditable="true"],
.event-title input[type="text"],
.event-head input[type="text"].title-input,
#adminTitle:not([type="hidden"]){
width:100%;
min-height:56px;
border-radius:18px !important;
padding:9px 14px 10px;
}
}
/* v9.26 — Titelbearbeitung bewusst subtiler: hochwertig, aber nicht „Premium“. */
#eventTitle[contenteditable="true"],
.event-title [contenteditable="true"],
.admin-title-premium:not([type="hidden"]),
.event-title input[type="text"],
.event-head input[type="text"].title-input,
#adminTitle:not([type="hidden"]){
min-height:56px !important;
padding:8px 14px 9px !important;
border:1px solid rgba(17,24,39,.08) !important;
border-radius:16px !important;
background:rgba(255,255,255,.78) !important;
box-shadow:
0 3px 10px rgba(17,24,39,.035),
inset 0 1px 0 rgba(255,255,255,.82) !important;
font-weight:800 !important;
transition:border-color .16s ease,box-shadow .16s ease,background .16s ease !important;
}
#eventTitle[contenteditable="true"]:focus,
.event-title [contenteditable="true"]:focus,
.admin-title-premium:not([type="hidden"]):focus,
.event-title input[type="text"]:focus,
.event-head input[type="text"].title-input:focus,
#adminTitle:not([type="hidden"]):focus{
border-color:rgba(17,24,39,.15) !important;
background:#fff !important;
box-shadow:
0 0 0 3px rgba(17,24,39,.025),
0 5px 14px rgba(17,24,39,.045) !important;
}
@media (max-width:640px){
#eventTitle[contenteditable="true"],
.event-title [contenteditable="true"],
.admin-title-premium:not([type="hidden"]),
.event-title input[type="text"],
.event-head input[type="text"].title-input,
#adminTitle:not([type="hidden"]){
min-height:52px !important;
border-radius:14px !important;
padding:7px 12px 8px !important;
}
}
/* v9.27 — Cleaner Seitentitel + dezenter Bearbeiten-Trigger. */
.event-title-line{
display:flex;
align-items:center;
gap:10px;
min-width:0;
}
.title-edit-trigger{
appearance:none;
width:34px;
height:34px;
flex:0 0 34px;
border:1px solid rgba(17,24,39,.07);
border-radius:50%;
background:rgba(255,255,255,.68);
color:rgba(17,24,39,.58);
display:grid;
place-items:center;
cursor:pointer;
font-size:16px;
line-height:1;
opacity:.72;
box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
transition:opacity .16s ease,background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease;
}
.title-edit-trigger[hidden]{display:none!important}
@media (hover:hover) and (pointer:fine){
.event-title-line:hover .title-edit-trigger{opacity:1}
.title-edit-trigger:hover{
background:#fff;
color:#111827;
border-color:rgba(17,24,39,.13);
transform:translateY(-1px);
}
}
.title-edit-trigger:focus-visible{
outline:3px solid rgba(59,130,246,.18);
outline-offset:2px;
}
/* Popup */
.title-edit-modal-card{
width:min(92vw,520px);
padding:22px;
border-radius:22px;
border:1px solid rgba(17,24,39,.08);
background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(247,249,252,.98));
box-shadow:
0 24px 70px rgba(17,24,39,.20),
inset 0 1px 0 rgba(255,255,255,.95);
}
.title-edit-modal-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
margin-bottom:18px;
}
.title-edit-modal-head h3{
margin:0 0 4px;
font-size:1.35rem;
letter-spacing:-.02em;
}
.modal-close{
appearance:none;
width:36px;
height:36px;
flex:0 0 36px;
border:1px solid rgba(17,24,39,.07);
border-radius:50%;
background:rgba(245,247,250,.9);
color:#4b5563;
display:grid;
place-items:center;
font-size:22px;
line-height:1;
cursor:pointer;
}
.title-edit-modal-card .field{
display:grid;
gap:8px;
}
.title-edit-modal-card .field label{
font-weight:800;
color:#303746;
}
#titleEditInput{
width:100%;
min-height:52px;
padding:0 14px;
border:1px solid rgba(17,24,39,.10);
border-radius:15px;
background:#fff;
color:#111827;
font:inherit;
font-weight:700;
box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
outline:none;
}
#titleEditInput:focus{
border-color:rgba(17,24,39,.18);
box-shadow:0 0 0 4px rgba(17,24,39,.035);
}
.title-edit-modal-actions{
display:flex;
justify-content:flex-end;
gap:10px;
margin-top:20px;
flex-wrap:wrap;
}
.title-edit-modal-actions button{
min-height:44px;
border-radius:999px!important;
padding:0 18px!important;
font-weight:800!important;
}
.title-save-btn{
background:linear-gradient(180deg,#1b2230,#111827)!important;
color:#fff!important;
box-shadow:0 8px 22px rgba(17,24,39,.18);
}
/* Inline-Titelbearbeitung aus früheren Versionen neutralisieren. */
#eventTitle{
border:0!important;
background:transparent!important;
box-shadow:none!important;
padding:0!important;
min-height:auto!important;
}
@media (max-width:640px){
.title-edit-modal-card{
width:calc(100vw - 28px);
padding:18px;
border-radius:20px;
}
}
/* v9.28 — Premium/exklusive Startseite im Stil des KI-Bereichs. */
body:has(.home-premium-hero){
background:
radial-gradient(circle at 14% 8%, rgba(255,255,255,.96), transparent 30%),
radial-gradient(circle at 88% 16%, rgba(17,24,39,.035), transparent 26%),
#f5f7fb;
}
/* Hero */
.home-premium-hero{
position:relative;
isolation:isolate;
margin-top:22px;
padding:34px 34px 30px;
border:1px solid rgba(17,24,39,.07);
border-radius:30px;
background:
radial-gradient(circle at 12% 0%, rgba(255,255,255,1), rgba(255,255,255,0) 38%),
linear-gradient(180deg,rgba(252,253,255,.98),rgba(242,245,249,.97));
box-shadow:
0 20px 54px rgba(17,24,39,.09),
inset 0 1px 0 rgba(255,255,255,.95);
overflow:hidden;
}
.home-premium-hero::before{
content:"";
position:absolute;
top:-120px;
right:-70px;
width:290px;
height:290px;
border-radius:50%;
background:radial-gradient(circle,rgba(17,24,39,.055),transparent 70%);
pointer-events:none;
z-index:-1;
}
.home-premium-hero::after{
content:"";
position:absolute;
left:0;
right:0;
top:0;
height:1px;
background:linear-gradient(90deg,transparent,rgba(17,24,39,.12),transparent);
pointer-events:none;
}
.home-premium-hero h1{
letter-spacing:-.045em;
line-height:1.02;
}
.home-premium-hero p{
color:rgba(48,55,70,.72);
}
/* Demo/visual panel inside hero */
.home-premium-hero .preview,
.home-premium-hero .demo,
.home-premium-hero .mockup,
.home-premium-hero .hero-demo{
border-radius:22px;
border:1px solid rgba(17,24,39,.07);
background:rgba(255,255,255,.70);
box-shadow:
0 10px 30px rgba(17,24,39,.06),
inset 0 1px 0 rgba(255,255,255,.92);
}
/* Steps */
.home-premium-steps{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
margin-top:18px;
}
.home-premium-steps .step{
position:relative;
padding:18px 18px 17px;
border-radius:20px;
border:1px solid rgba(17,24,39,.065);
background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(247,249,252,.84));
box-shadow:
0 8px 24px rgba(17,24,39,.045),
inset 0 1px 0 rgba(255,255,255,.92);
}
.home-premium-steps .step strong{
display:block;
margin-bottom:6px;
color:#151b27;
font-weight:850;
letter-spacing:-.015em;
}
.home-premium-steps .step span{
color:rgba(48,55,70,.70);
line-height:1.45;
}
/* Creator / main action card */
.home-premium-creator{
position:relative;
isolation:isolate;
margin-top:20px;
padding:28px;
border-radius:30px !important;
border:1px solid rgba(17,24,39,.075) !important;
background:
radial-gradient(circle at 10% 0%, rgba(255,255,255,.98), rgba(255,255,255,0) 34%),
linear-gradient(180deg,rgba(251,252,254,.99),rgba(241,244,248,.97)) !important;
box-shadow:
0 22px 58px rgba(17,24,39,.10),
inset 0 1px 0 rgba(255,255,255,.96) !important;
overflow:hidden;
}
.home-premium-creator::before{
content:"";
position:absolute;
inset:0 0 auto 0;
height:1px;
background:linear-gradient(90deg,transparent,rgba(17,24,39,.12),transparent);
pointer-events:none;
}
.home-premium-creator h2{
margin-bottom:20px;
letter-spacing:-.035em;
}
/* Inputs */
.home-premium-creator .field label{
color:#303746;
font-weight:800;
}
.home-premium-creator input,
.home-premium-creator select,
.home-premium-creator textarea{
border:1px solid rgba(17,24,39,.085) !important;
background:rgba(255,255,255,.88) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
0 5px 16px rgba(17,24,39,.035);
}
.home-premium-creator input:focus,
.home-premium-creator select:focus,
.home-premium-creator textarea:focus{
border-color:rgba(17,24,39,.17) !important;
box-shadow:
0 0 0 4px rgba(17,24,39,.03),
0 8px 22px rgba(17,24,39,.05) !important;
}
/* Mode switch as premium segmented pills */
.home-premium-creator .mode-switch{
gap:10px;
padding:6px;
border-radius:999px;
border:1px solid rgba(17,24,39,.065);
background:rgba(235,239,244,.72);
width:max-content;
max-width:100%;
}
.home-premium-creator .mode-btn{
border-radius:999px !important;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
min-height:42px;
padding:0 16px !important;
color:rgba(21,27,39,.62) !important;
font-weight:800 !important;
}
.home-premium-creator .mode-btn.active{
background:linear-gradient(180deg,#fff,#f1f4f8) !important;
color:#151b27 !important;
box-shadow:
0 6px 18px rgba(17,24,39,.08),
inset 0 1px 0 rgba(255,255,255,.95) !important;
}
/* Weekday/date controls */
.home-premium-creator .weekday-picker,
.home-premium-creator .dates,
.home-premium-creator .date-options,
.home-premium-creator .weekday-options{
border-radius:20px;
}
/* Main CTA */
.home-premium-creator button.primary,
.home-premium-creator #createBtn,
.home-premium-creator button[type="submit"]{
min-height:48px;
padding:0 22px !important;
border-radius:999px !important;
border:1px solid rgba(17,24,39,.12) !important;
background:linear-gradient(180deg,#1b2230,#111827) !important;
color:#fff !important;
font-weight:850 !important;
box-shadow:
0 11px 28px rgba(17,24,39,.20),
inset 0 1px 0 rgba(255,255,255,.12);
transition:transform .18s ease,box-shadow .18s ease;
}
.home-premium-creator button.secondary{
border-radius:999px !important;
border:1px solid rgba(17,24,39,.08) !important;
background:linear-gradient(180deg,#fff,#f0f3f7) !important;
color:#151b27 !important;
font-weight:800 !important;
box-shadow:0 7px 20px rgba(17,24,39,.06),inset 0 1px 0 rgba(255,255,255,.92);
}
@media (hover:hover) and (pointer:fine){
.home-premium-creator button.primary:hover,
.home-premium-creator #createBtn:hover,
.home-premium-creator button[type="submit"]:hover{
transform:translateY(-1px);
box-shadow:
0 15px 34px rgba(17,24,39,.25),
inset 0 1px 0 rgba(255,255,255,.14);
}
.home-premium-steps .step{
transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.home-premium-steps .step:hover{
transform:translateY(-2px);
border-color:rgba(17,24,39,.10);
box-shadow:
0 12px 30px rgba(17,24,39,.065),
inset 0 1px 0 rgba(255,255,255,.95);
}
}
@media (max-width:820px){
.home-premium-hero{
padding:26px 22px 24px;
border-radius:22px;
}
.home-premium-steps{
grid-template-columns:1fr;
}
.home-premium-creator{
padding:22px;
border-radius:24px !important;
}
}
@media (max-width:560px){
.home-premium-hero{
padding:22px 18px;
}
.home-premium-creator{
padding:18px;
border-radius:22px !important;
}
.home-premium-creator .mode-switch{
width:100%;
}
.home-premium-creator .mode-btn{
flex:1 1 0;
}
}
/* v9.29 — Titel bleibt optisch ein Titel; Bearbeitung fühlt sich inline an. */
#eventTitle.inline-title-editable{
cursor:text;
outline:none !important;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
padding:0 !important;
min-height:auto !important;
border-radius:0 !important;
transition:opacity .15s ease, text-shadow .15s ease;
}
#eventTitle.inline-title-editable:hover{
opacity:.94;
}
/* Titel im Ruhezustand nicht wie normalen Seitentext markieren; während der Bearbeitung bleibt Textauswahl möglich. */
#eventTitle:not([contenteditable="true"]){
-webkit-user-select:none;
user-select:none;
}
#eventTitle[contenteditable="true"]{
-webkit-user-select:text;
user-select:text;
}
#eventTitle.inline-title-editable:focus{
outline:none !important;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
text-shadow:0 0 0 rgba(0,0,0,0);
}
/* Verhindert frühere Inline-Editor-Flächen vollständig. */
#eventTitle[contenteditable="true"]{
width:auto !important;
display:inline !important;
min-height:auto !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
}
/* Alte Popup-Bearbeitung nicht mehr anzeigen, falls Browser gecachten HTML-Stand mischt. */
#openTitleEdit,
#titleEditModal{
display:none !important;
}
/* v9.37 — Speicherstatus etwas tiefer: ungefähr 1/3 der Bildschirmhöhe vom unteren Rand. */
.save-status{
position:fixed !important;
left:50% !important;
right:auto !important;
top:66.666vh !important;
bottom:auto !important;
transform:translate(-50%,-50%) scale(.98) !important;
z-index:10000 !important;
width:max-content;
max-width:calc(100vw - 32px);
text-align:center;
}
.save-status.show:not(:empty){
transform:translate(-50%,-50%) scale(1) !important;
visibility:visible !important;
}
/* v9.31 — „+ Datum hinzufügen“ optisch wie ein Wochentag-Button. */
#addDate{
width:100%;
min-width:0;
border:1px solid #e3e6eb;
border-radius:14px;
background:#eef0f3;
color:#7a808b;
padding:11px 15px;
font-weight:750;
cursor:pointer;
transition:.16s;
box-shadow:none;
}
#addDate:hover{
background:#e7e9ee;
border-color:#d7dbe2;
}
/* v9.32 — „+ Datum hinzufügen“ kompakt wie im gewünschten Beispiel. */
#addDate{
width:auto !important;
display:inline-flex;
align-items:center;
justify-content:center;
min-width:0;
max-width:100%;
white-space:nowrap;
}
/* v9.33 — Event-Titel bleibt immer gross, auch während der Inline-Bearbeitung. */
#eventTitle,
#eventTitle.inline-title-editable,
#eventTitle[contenteditable="true"]{
font-size:clamp(34px,6vw,58px) !important;
line-height:.96 !important;
font-weight:850 !important;
letter-spacing:-.04em !important;
}
@media(max-width:560px){
#eventTitle,
#eventTitle.inline-title-editable,
#eventTitle[contenteditable="true"]{
font-size:38px !important;
}
}
/* v9.30 — Mobile Admin-Auswertung kompakt; Desktop bleibt unverändert. */
.admin-mobile-toggle{display:none}
.admin-panel-mobile-content{display:block}
@media(max-width:640px){
#adminPanel{
padding:0 !important;
border-radius:24px !important;
overflow:hidden;
}
#adminPanel .admin-panel-head{
display:grid;
grid-template-columns:minmax(0,1fr) 46px;
gap:10px;
align-items:center;
padding:20px 18px;
margin:0;
}
#adminPanel .admin-panel-title-wrap{
min-width:0;
}
#adminPanel .admin-panel-head h2{
margin:0;
font-size:clamp(1.3rem,6vw,1.5rem);
line-height:1.05;
letter-spacing:-.035em;
white-space:nowrap;
}
#adminPanel .admin-panel-head .sub{
display:none;
}
.admin-mobile-toggle{
appearance:none;
display:grid;
place-items:center;
width:44px;
height:44px;
min-width:44px;
padding:0;
border:1px solid rgba(17,24,39,.08);
border-radius:50%;
background:linear-gradient(180deg,#fff,#eef2f6);
color:#151b27;
box-shadow:0 7px 18px rgba(17,24,39,.08),inset 0 1px 0 rgba(255,255,255,.95);
}
.admin-mobile-toggle span{
width:10px;
height:10px;
border-right:2px solid currentColor;
border-bottom:2px solid currentColor;
transform:translateY(-2px) rotate(45deg);
transition:transform .2s ease;
}
.admin-mobile-toggle[aria-expanded="true"] span{
transform:translateY(2px) rotate(225deg);
}
#adminPanel .admin-panel-actions{
display:none;
grid-column:1 / -1;
width:100%;
padding-top:4px;
}
#adminPanel.mobile-expanded .admin-panel-actions{
display:block;
}
#adminPanel #csvBtn{
width:100%;
min-height:46px;
white-space:normal;
}
.admin-panel-mobile-content{
display:none;
padding:0 14px 18px;
}
#adminPanel.mobile-expanded .admin-panel-mobile-content{
display:block;
}
#adminPanelBody{
min-width:0;
}
#adminPanel .ai-premium{
margin-top:2px;
padding:18px 14px 16px;
border-radius:20px;
}
#adminPanel .ai-premium>.between{
display:block;
}
#adminPanel .ai-premium .ai-title-line{
gap:8px;
align-items:flex-start;
}
#adminPanel .ai-premium .ai-title-line h3{
width:100%;
font-size:1.45rem;
line-height:1.1;
}
#adminPanel .ai-premium .credit-badge{
max-width:100%;
padding:6px 10px;
font-size:.82rem;
line-height:1.2;
white-space:normal;
}
#adminPanel .ai-premium #aiIntro{
margin-top:12px;
font-size:1rem;
line-height:1.45;
}
#adminPanel .ai-premium .ai-prompt-wrap{
margin-top:14px;
padding:7px;
border-radius:18px;
}
#adminPanel .ai-premium #aiPrompt{
width:100%;
min-width:0;
min-height:150px;
padding:12px 48px 12px 12px;
font-size:16px; /* verhindert iOS-Zoom beim Fokus */
line-height:1.45;
box-sizing:border-box;
}
#adminPanel .ai-premium .ai-mic{
width:40px;
height:40px;
min-width:40px;
}
#adminPanel .ai-premium .ai-actions{
gap:9px;
}
#adminPanel .ai-premium #aiRun,
#adminPanel .ai-premium #aiSchedule,
#adminPanel .ai-premium #buyCredits{
min-height:48px;
padding-inline:14px !important;
}
#adminPanel .admin-fields-section,
#adminPanel .admin-add-person,
#adminPanel #adminParticipants,
#adminPanel #adminSuggestedDates{
max-width:100%;
min-width:0;
box-sizing:border-box;
}
}
/* v9.18 — „Wann kannst du?“ bleibt vollständig scharf. */
body.participant-name-focus .grid-layout>.card:first-child .availability-help,
body.participant-name-focus .grid-layout>.card:first-child .mark-toolbar,
body.participant-name-focus .grid-layout>.card:first-child>.schedule-wrap,
body.participant-name-focus .grid-layout>.card:first-child .participant-extra-fields,
body.participant-name-focus .grid-layout>.card:first-child .date-suggestion-box,
body.participant-name-focus:has(#adminBanner.show) .grid-layout>.card:first-child .availability-help,
body.participant-name-focus:has(#adminBanner.show) .grid-layout>.card:first-child .mark-toolbar,
body.participant-name-focus:has(#adminBanner.show) .grid-layout>.card:first-child>.schedule-wrap,
body.participant-name-focus:has(#adminBanner.show) .grid-layout>.card:first-child .participant-extra-fields,
body.participant-name-focus:has(#adminBanner.show) .grid-layout>.card:first-child .date-suggestion-box{
filter:none !important;
opacity:1 !important;
pointer-events:auto !important;
user-select:auto !important;
}
body.participant-name-focus .grid-layout>.card:first-child::after{
display:none !important;
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
}
/* v9.35 — Mobile: die gesamte Kopfzeile „Zeitumfrage auswerten“ ist tappbar. */
@media(max-width:640px){
#adminPanel .admin-panel-head{
cursor:pointer;
-webkit-tap-highlight-color:transparent;
touch-action:manipulation;
}
}
/* v9.36 — Admin: eigene Verfügbarkeit erst nach bestätigtem Namen zeigen. */
#myAvailabilityCard.admin-awaiting-name > .availability-help,
#myAvailabilityCard.admin-awaiting-name > .mark-toolbar,
#myAvailabilityCard.admin-awaiting-name > .schedule-wrap,
#myAvailabilityCard.admin-awaiting-name > .participant-extra-fields,
#myAvailabilityCard.admin-awaiting-name > .date-suggestion-box{
display:none !important;
}
#myAvailabilityCard.admin-awaiting-name > .join-box{
margin-bottom:0;
}
/* v9.38 — Admin Wochentage: nachträglich Tage und Zeitfenster verwalten. */
.admin-weekdays-section{
margin-top:24px;
padding:18px;
border:1px solid var(--line);
border-radius:18px;
background:#fafbfc;
}
.admin-weekdays-section h3{margin:0 0 4px}
.admin-weekdays-section>.admin-add-date-top{margin-top:14px}
.admin-add-weekday-form select{
width:100%;
min-height:44px;
box-sizing:border-box;
}
@media(max-width:700px){
.admin-weekdays-section{padding:15px}
.admin-weekdays-section>.admin-add-date-top{width:100%}
.admin-add-weekday-form{grid-template-columns:1fr 1fr}
.admin-add-weekday-form .field:first-child{grid-column:1/-1}
.admin-add-weekday-form>button{grid-column:1/-1;width:100%}
.admin-weekday-row{align-items:center}
}
/* v9.39 — Admin-Wochentage: Auswahl identisch zur Startseite. */
.admin-weekday-startstyle-form{
margin-top:14px;
padding:14px;
border:1px solid var(--line);
border-radius:16px;
background:#fff;
}
.admin-weekday-startstyle-form .weekday-toggle-picker{
margin:0;
}
.admin-weekday-startstyle-form .weekday-dimension{
opacity:1;
}
.admin-weekday-startstyle-form .day-time-panel[hidden]{
display:none !important;
}
.admin-weekday-startstyle-form .weekday-dimension.active .day-time-panel{
display:grid;
}
.admin-weekday-form-actions{
margin-top:14px;
}
@media(max-width:560px){
.admin-weekday-form-actions .primary{width:100%}
}
/* v9.45 — schnelle weisse Verfügbarkeitsbox; niemals vom Kalender verdeckt. */
#heatGrid .cell.heat{position:relative;overflow:visible}
.heat-hover-result{
position:fixed;left:0;top:0;z-index:2147483647;
display:flex;flex-direction:column;gap:2px;width:max-content;max-width:min(420px,calc(100vw - 16px));
padding:6px 8px;border:1px solid rgba(17,24,39,.12);border-radius:9px;
background:rgba(255,255,255,.98);box-shadow:0 5px 14px rgba(17,24,39,.10);
color:#171b23;font-size:11px;line-height:1.2;text-align:left;pointer-events:none;
opacity:0;visibility:hidden;transition:none
}
.heat-hover-result.is-visible{opacity:1;visibility:visible}
.heat-hover-result strong{font-size:11px;white-space:nowrap}
.heat-hover-result small{
max-width:400px;overflow:visible;white-space:normal;overflow-wrap:anywhere;
color:#4f5662;font-size:10px
}
/* Bevorzugende Personen im bestehenden Hover-/Tap-Tooltip markieren.
Stern und Name dürfen weder auf Desktop noch auf Touch getrennt umbrechen. */
.heat-hover-result .heat-preferred-person{
display:inline-block;
white-space:nowrap;
}
.heat-hover-result .heat-preferred-name-star{
color:#6a4f00;
font-size:.95em;
font-weight:800;
}
@media(max-width:640px){.heat-hover-result{display:none}}
/* v9.41 — Admin-Wochentage: nur fehlende Tage + klarere Zeitfenster. */
.admin-weekday-startstyle-form .weekday-toggle-picker{
display:flex;
flex-direction:column;
gap:10px;
}
.admin-weekday-startstyle-form .weekday-dimension{
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:12px;
align-items:center;
}
.admin-weekday-startstyle-form .weekday-toggle{
min-width:88px;
}
.admin-weekday-startstyle-form .admin-day-time-panel{
display:grid;
grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
gap:10px;
align-items:end;
padding:10px 12px;
border:1px solid #dfe3e8;
border-radius:14px;
background:#f7f8fa;
}
.admin-weekday-startstyle-form .admin-day-time-panel[hidden]{
display:none !important;
}
.admin-time-field{
display:flex;
flex-direction:column;
gap:5px;
}
.admin-time-field>span{
font-size:11px;
font-weight:800;
color:var(--muted);
text-transform:uppercase;
letter-spacing:.04em;
}
.admin-time-field input{
width:100%;
min-width:0;
min-height:42px;
padding:8px 10px;
border:1px solid #d9dde3;
border-radius:10px;
background:#fff;
font-weight:750;
box-sizing:border-box;
}
.admin-time-arrow{
align-self:center;
margin-top:17px;
color:#7a808b;
font-weight:800;
}
.admin-weekday-picker-empty{
padding:12px 14px;
border:1px dashed #d7dbe1;
border-radius:12px;
color:var(--muted);
background:#fafbfc;
font-size:14px;
}
@media(max-width:560px){
.admin-weekday-startstyle-form .weekday-dimension{
grid-template-columns:1fr;
}
.admin-weekday-startstyle-form .weekday-toggle{
width:100%;
}
.admin-weekday-startstyle-form .admin-day-time-panel{
grid-template-columns:1fr auto 1fr;
}
}
/* v9.42 — Admin Wochentag hinzufügen: bewusst simpel gehalten. */
.admin-weekday-simple-form{
margin-top:14px;
padding:14px;
border:1px solid var(--line);
border-radius:16px;
background:#fff;
}
.admin-weekday-select-field{
margin-bottom:12px;
}
.admin-weekday-simple-form select,
.admin-weekday-simple-form input[type="time"]{
width:100%;
min-height:44px;
box-sizing:border-box;
}
.admin-simple-time-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
margin-bottom:14px;
}
.admin-weekday-simple-form>.primary{
width:100%;
}
@media(max-width:480px){
.admin-simple-time-row{grid-template-columns:1fr 1fr}
}
/* v9.43 — einfache Eingabe individueller Dauern pro Person. */
.individual-duration-modal-card{
width:min(620px,100%);
max-height:min(82vh,760px);
display:flex;
flex-direction:column;
}
.individual-duration-modal-card>.sub{
margin-bottom:14px;
}
.individual-duration-list{
display:flex;
flex-direction:column;
gap:8px;
overflow:auto;
padding:2px 2px 4px;
}
.individual-duration-row{
display:grid;
grid-template-columns:minmax(0,1fr) 150px;
gap:14px;
align-items:center;
padding:10px 12px;
border:1px solid var(--line);
border-radius:14px;
background:#fafbfc;
}
.individual-duration-name{
min-width:0;
font-weight:750;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.individual-duration-input-wrap{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:7px;
align-items:center;
color:var(--muted);
font-size:13px;
}
.individual-duration-input-wrap input{
width:100%;
min-width:0;
border:1px solid var(--line);
background:#fff;
border-radius:11px;
padding:10px 10px;
outline:none;
font-weight:750;
}
.individual-duration-input-wrap input:focus{
border-color:var(--zf-focus-border);
box-shadow:0 0 0 4px var(--zf-focus-glow);
}
.individual-duration-note{
padding:14px;
border-radius:12px;
background:#f8f9fb;
color:var(--muted);
}
.individual-duration-modal-card .duration-actions{
margin-top:16px;
}
@media(max-width:560px){
.individual-duration-modal-card{
max-height:88vh;
padding:18px;
}
.individual-duration-row{
grid-template-columns:minmax(0,1fr) 128px;
gap:10px;
padding:9px 10px;
}
.individual-duration-modal-card .duration-actions{
display:grid;
grid-template-columns:1fr 1fr;
}
}
/* v9.45 — Umfrage verriegeln / fixieren. */
.admin-lock-toggle{
white-space:nowrap;
}
.admin-lock-toggle.is-locked{
border-color:rgba(140,86,0,.22);
background:#fff7e8;
color:#6f4a00;
}
.poll-lock-notice{
display:flex;
gap:12px;
align-items:flex-start;
margin:0 0 16px;
padding:13px 14px;
border:1px solid #e3d3ad;
border-radius:14px;
background:#fff9ec;
color:#5c470e;
}
.poll-lock-notice[hidden]{display:none !important}
.poll-lock-icon{
font-size:20px;
line-height:1.2;
}
.poll-lock-notice strong{
display:block;
margin-bottom:2px;
}
.poll-lock-notice p{
margin:0;
font-size:13px;
line-height:1.4;
}
body.poll-is-locked:not(.admin-mode) #myAvailabilityCard .join-box,
body.poll-is-locked:not(.admin-mode) #myAvailabilityCard .mark-toolbar,
body.poll-is-locked:not(.admin-mode) #myAvailabilityCard .schedule-wrap,
body.poll-is-locked:not(.admin-mode) #myAvailabilityCard .participant-extra-fields,
body.poll-is-locked:not(.admin-mode) #myAvailabilityCard .date-suggestion-box{
pointer-events:none;
}
body.poll-is-locked:not(.admin-mode) #myAvailabilityCard .mark-toolbar,
body.poll-is-locked:not(.admin-mode) #myAvailabilityCard .schedule-wrap,
body.poll-is-locked:not(.admin-mode) #myAvailabilityCard .participant-extra-fields,
body.poll-is-locked:not(.admin-mode) #myAvailabilityCard .date-suggestion-box{
opacity:.48;
}
@media(max-width:640px){
#adminPanel .admin-panel-actions{
gap:8px;
}
#adminPanel .admin-lock-toggle{
width:100%;
min-height:46px;
margin-bottom:8px;
}
}
/* v9.46 — Schloss-Schalter optisch als eigener Status statt normaler Aktionsbutton. */
#adminPanel .admin-lock-toggle{
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
min-height:42px;
padding:9px 15px;
border:1px solid #d8dde5;
border-radius:999px;
background:#f7f8fa;
color:#333a46;
font-weight:750;
box-shadow:none;
white-space:nowrap;
transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
#adminPanel .admin-lock-toggle:hover{
background:#f0f2f5;
border-color:#cbd1da;
}
#adminPanel .admin-lock-toggle:active{
transform:translateY(1px);
}
#adminPanel .admin-lock-toggle .lock-toggle-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:20px;
font-size:18px;
line-height:1;
}
#adminPanel .admin-lock-toggle .lock-open-icon{
transform:translateY(-1px);
}
#adminPanel .admin-lock-toggle.is-locked{
border-color:#e2c98f;
background:#fff8e8;
color:#684b08;
}
#adminPanel .admin-panel-actions{
align-items:center;
}
@media(max-width:640px){
#adminPanel .admin-lock-toggle{
min-height:44px;
padding:10px 14px;
}
}
/* v9.47 — Schloss-Status kleiner, klarer und mittig zwischen Titel und CSV. */
@media(min-width:641px){
#adminPanel .admin-panel-head{
display:grid;
grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
align-items:center;
gap:16px;
}
#adminPanel .admin-panel-title-wrap{
grid-column:1;
justify-self:start;
}
#adminPanel .admin-panel-actions{
grid-column:2 / 4;
display:grid;
grid-template-columns:minmax(150px,auto) minmax(0,1fr);
align-items:center;
width:100%;
gap:14px;
}
#adminPanel .admin-lock-toggle{
grid-column:1;
justify-self:center;
min-height:36px;
padding:7px 12px;
gap:7px;
font-size:14px;
}
#adminPanel #csvBtn{
grid-column:2;
justify-self:end;
}
}
#adminPanel .admin-lock-toggle .lock-toggle-icon{
width:18px;
font-size:16px;
line-height:1;
}
#adminPanel .admin-lock-toggle .lock-open-icon{
/* Offenes Schloss optisch klarer: etwas angehoben und leicht gedreht. */
display:inline-block;
transform:translateY(-1px) rotate(-5deg);
}
/* v9.48 — Schloss übernimmt rechts die frühere CSV-Position.
CSV sitzt nun direkt bei KI-Credits in den KI-Aktionen. */
@media(min-width:641px){
#adminPanel .admin-panel-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
}
#adminPanel .admin-panel-title-wrap{
flex:1 1 auto;
}
#adminPanel .admin-panel-actions{
display:flex;
width:auto;
margin-left:auto;
justify-content:flex-end;
}
#adminPanel .admin-lock-toggle{
min-height:38px;
padding:8px 13px;
font-size:14px;
}
}
#adminPanel .ai-actions #csvBtn{
order:99;
}
/* v9.49 — CSV ist keine KI-Funktion: innerhalb der Aktionszeile ganz nach rechts. */
#adminPanel .ai-actions{
display:flex;
align-items:center;
}
#adminPanel .ai-actions #csvBtn{
order:999;
margin-left:auto;
}
@media(max-width:640px){
#adminPanel .ai-actions #csvBtn{
margin-left:0;
}
}
/* v9.50 — Wochentag-Auswahl kompakter; Desktop ca. ein Drittel Breite. */
@media(min-width:641px){
.admin-weekday-simple-form .admin-weekday-select-field{
width:33.333%;
min-width:220px;
max-width:420px;
}
}
/* v9.51 — Alle kurzen Systemmeldungen an derselben Position wie „Gespeichert“. */
.toast{
position:fixed !important;
left:50% !important;
right:auto !important;
top:66.666vh !important;
bottom:auto !important;
transform:translate(-50%,-50%) scale(.98) !important;
z-index:10001 !important;
width:max-content;
max-width:calc(100vw - 32px);
text-align:center;
}
.toast.show:not(:empty){
transform:translate(-50%,-50%) scale(1) !important;
}
/* v9.52 — Wochentag hinzufügen: Tag, Von/Bis und Button einheitlich ca. 1/3 breit. */
@media(min-width:641px){
.admin-weekday-simple-form{
display:flex;
flex-direction:column;
align-items:flex-start;
}
.admin-weekday-simple-form .admin-weekday-select-field,
.admin-weekday-simple-form .admin-simple-time-row,
.admin-weekday-simple-form > #adminAddWeekdaySubmit{
width:33.333% !important;
min-width:220px;
max-width:420px;
box-sizing:border-box;
}
.admin-weekday-simple-form .admin-simple-time-row{
grid-template-columns:1fr 1fr;
}
}
/* v9.53 — Footer / „Problem melden“ niemals durch Teilnehmer-Fokus verwischen. */
.footer,
.footer *,
.report-problem{
filter:none !important;
-webkit-filter:none !important;
opacity:1 !important;
visibility:visible !important;
pointer-events:auto !important;
user-select:auto !important;
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
}
/* Auch während des Namens-/Teilnehmer-Fokus bleibt der Footer vollständig scharf. */
body.participant-name-focus .footer,
body.participant-name-focus .footer *,
body.participant-name-entered .footer,
body.participant-name-entered .footer *{
filter:none !important;
-webkit-filter:none !important;
opacity:1 !important;
visibility:visible !important;
pointer-events:auto !important;
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
}
/* Ein möglicher Fokus-Overlay darf den Footer nicht überdecken. */
.footer{
position:relative;
z-index:20;
}
/* v9.55 — optionale Zweispalten-Ansicht der beiden Verfügbarkeitskarten */
@media (min-width:901px){
.grid-layout.side-by-side{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.grid-layout.side-by-side>#myAvailabilityCard,
.grid-layout.side-by-side>#groupAvailabilityCard{min-width:0;}
.grid-layout.side-by-side>#groupAvailabilityCard[hidden]{display:none;}
.grid-layout.side-by-side:has(>#groupAvailabilityCard[hidden]){grid-template-columns:minmax(0,1fr);}
}
/* v9.52 — Mobile: KI-Status (z. B. „Fertig ✓“) immer unterhalb des CSV-Buttons. */
@media(max-width:640px){
#adminPanel .ai-actions .ai-status{
order:1000;
width:100%;
display:block;
margin-top:2px;
}
}
/* v9.50 — Mobile Safari: Admin-Terminformular darf niemals seitlich überlaufen. Desktop unverändert. */
@media(max-width:700px){
#adminAddDateForm.admin-add-date-form{
width:100%;
max-width:100%;
min-width:0;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
box-sizing:border-box;
}
#adminAddDateForm.admin-add-date-form > *,
#adminAddDateForm.admin-add-date-form .field{
min-width:0;
max-width:100%;
}
#adminAddDateForm.admin-add-date-form input[type="date"],
#adminAddDateForm.admin-add-date-form input[type="time"]{
display:block;
width:100%;
min-width:0 !important;
max-width:100%;
box-sizing:border-box;
}
#adminAddDateForm.admin-add-date-form .field:first-child{
grid-column:1/-1;
min-width:0;
}
#adminAddDateForm.admin-add-date-form > button{
grid-column:1/-1;
width:100%;
max-width:100%;
}
}
/* v9.51 — Mobile: Umfrage-Status unterhalb der tappbaren Auswertungs-Kopfzeile. */
@media(max-width:640px){
#adminPanel .admin-panel-mobile-content > .admin-panel-actions{
display:none;
width:100%;
padding:10px 0 14px;
margin:0;
box-sizing:border-box;
}
#adminPanel.mobile-expanded .admin-panel-mobile-content > .admin-panel-actions{
display:block;
}
#adminPanel .admin-panel-mobile-content > .admin-panel-actions .admin-lock-toggle{
width:100%;
min-height:48px;
margin:0;
touch-action:manipulation;
}
}
/* v9.56 — NUR Chrome/Chromium Desktop: Wochentags-Zeitfelder vollständig geschlossen
und Uhrzeit ohne abgeschnittene Minuten. Safari und Mobile bleiben unverändert. */
@media (min-width:761px) and (hover:hover) and (pointer:fine){
html.browser-chromium .weekday-dimension .day-time-panel input[type="time"]{
-webkit-appearance:none!important;
appearance:none!important;
display:block!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
box-sizing:border-box!important;
border:1px solid var(--line)!important;
border-radius:10px!important;
background:#fbfbfd!important;
background-clip:padding-box!important;
padding:9px 10px!important;
font:inherit!important;
font-variant-numeric:tabular-nums!important;
line-height:1.2!important;
overflow:visible!important;
box-shadow:none!important;
}
html.browser-chromium .weekday-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit{
display:block!important;
width:auto!important;
min-width:0!important;
padding:0!important;
margin:0!important;
overflow:visible!important;
}
html.browser-chromium .weekday-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit-fields-wrapper{
padding:0!important;
margin:0!important;
}
/* Das native Chrome-Uhrsymbol nimmt in den schmalen Feldern den Platz der Minuten ein.
Ohne Symbol bleibt 08:00 / 20:00 vollständig sichtbar und der Rahmen geschlossen. */
html.browser-chromium .weekday-dimension .day-time-panel input[type="time"]::-webkit-calendar-picker-indicator{
display:none!important;
-webkit-appearance:none!important;
width:0!important;
min-width:0!important;
margin:0!important;
padding:0!important;
}
}
/* v10 — Chrome Desktop: Checkbox kompakt wie Safari, Rahmen vollständig geschlossen.
Absichtlich nur Chromium + Desktop; Safari und Mobile bleiben unverändert. */
@media (min-width:761px) and (hover:hover) and (pointer:fine){
html.browser-chromium .date-options .option-check input[type="checkbox"]{
-webkit-appearance:none!important;
appearance:none!important;
box-sizing:border-box!important;
inline-size:14px!important;
block-size:14px!important;
width:14px!important;
height:14px!important;
min-width:14px!important;
min-height:14px!important;
margin:2px 0 0!important;
flex:0 0 14px!important;
border:1px solid #73777f!important;
border-radius:3px!important;
background:#fff!important;
box-shadow:none!important;
vertical-align:middle!important;
position:relative!important;
}
html.browser-chromium .date-options .option-check input[type="checkbox"]:checked{
background-color:#111827!important;
border-color:#111827!important;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E")!important;
background-repeat:no-repeat!important;
background-position:center!important;
background-size:11px 11px!important;
}
html.browser-chromium .date-options .option-check input[type="checkbox"]:focus-visible{
outline:2px solid #111827!important;
outline-offset:2px!important;
}
}
/* v12.10 solver v6: lesbare Stundenplan-Zeilen */
#aiResultText .schedule-section-day .schedule-lesson-item{
grid-template-columns:132px minmax(0,1fr);
gap:18px;
align-items:baseline;
}
#aiResultText .schedule-section-day .schedule-lesson-time{
font-variant-numeric:tabular-nums;
white-space:nowrap;
letter-spacing:.01em;
}
#aiResultText .schedule-section-day .schedule-lesson-name{
color:#525a66;
min-width:0;
}
@media(max-width:560px){
#aiResultText .schedule-section-day .schedule-lesson-item{
grid-template-columns:118px minmax(0,1fr);
gap:10px;
}
}
/* Solver v7 — Hinweise als ruhige Infokarte */
#aiResultText .schedule-section-hint{
position:relative;
background:#fffdf7;
border-color:#eadfbd;
border-left:4px solid #d5a72f;
}
#aiResultText .schedule-section-hint > h4{
display:flex;
align-items:center;
gap:10px;
margin-bottom:10px;
}
#aiResultText .schedule-hint-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:30px;
height:30px;
flex:0 0 30px;
border-radius:9px;
background:#fff4c7;
font-size:18px;
line-height:1;
}
#aiResultText .schedule-section-hint .schedule-hint-item{
display:grid;
grid-template-columns:minmax(210px, .42fr) minmax(0,1fr);
gap:22px;
align-items:start;
padding:11px 0;
font-size:15px;
line-height:1.45;
}
#aiResultText .schedule-section-hint .schedule-hint-label{
font-weight:700;
color:#25282d;
}
#aiResultText .schedule-section-hint .schedule-hint-text{
color:#59616d;
}
#aiResultText .schedule-section-hint .schedule-hint-item-plain{
grid-template-columns:1fr;
}
@media(max-width:700px){
#aiResultText .schedule-section-hint .schedule-hint-item{
grid-template-columns:1fr;
gap:3px;
}
}
/* Solver v8 — Umschalter zwischen grafischer/PDF- und Textansicht */
#aiResultText .schedule-view-switch{
display:inline-flex;
align-items:center;
gap:3px;
margin:4px 0 14px;
padding:3px;
border:1px solid #dfe4ea;
border-radius:12px;
background:#f6f7f8;
}
#aiResultText .schedule-view-btn{
appearance:none;
border:0;
border-radius:9px;
background:transparent;
color:#66707c;
padding:8px 13px;
font:inherit;
font-size:13px;
font-weight:700;
line-height:1;
cursor:pointer;
}
#aiResultText .schedule-view-btn:hover{color:#22272e}
#aiResultText .schedule-view-btn.active{
background:#fff;
color:#187c68;
box-shadow:0 1px 3px rgba(20,31,43,.10);
}
/* Standard: grafischer Plan + Hinweise. Die langen Tageslisten bleiben verborgen. */
#aiResultText.schedule-pdf-view .schedule-details .schedule-section-day,
#aiResultText.schedule-pdf-view .schedule-details .schedule-section-break,
#aiResultText.schedule-pdf-view .schedule-details .schedule-section-normal{
display:none;
}
/* Textansicht: die grafische/PDF-nahe Tabelle ausblenden, Tageslisten zeigen. */
#aiResultText.schedule-text-view .school-timetable-wrap{display:none}
#aiResultText.schedule-text-view .schedule-details .schedule-section-day,
#aiResultText.schedule-text-view .schedule-details .schedule-section-break,
#aiResultText.schedule-text-view .schedule-details .schedule-section-normal{
display:block;
}
/* Hinweise und echte Probleme bleiben in beiden Ansichten sichtbar. */
#aiResultText .schedule-details .schedule-section-hint,
#aiResultText .schedule-details .schedule-section-problem{display:block}
@media(max-width:560px){
#aiResultText .schedule-view-switch{display:flex;width:100%}
#aiResultText .schedule-view-btn{flex:1;padding:10px 12px}
}
/* v9.04.128 — Mobile: Personenliste einer Gruppen-Zelle nur nach bewusstem Tap. */
@media(max-width:640px){
.heat-hover-result.touch-visible{display:flex}
}
/* v9.04.130 — Mobile/Touch: aufgehobene Namensauswahl darf nicht durch
Safaris sticky :hover optisch grün bleiben. Grün bedeutet auf Touch nur
noch den echten JS-Pin (.participant-preview). */
@media (hover:none), (pointer:coarse){
#participants .participant:hover:not(.participant-preview){
background:#f8f9fb!important;
box-shadow:none!important;
}
#participants .participant:hover:not(.participant-preview) strong{
color:var(--text)!important;
}
#participants .participant.participant-preview,
#participants .participant.participant-preview:hover{
background:#eef7f1!important;
box-shadow:inset 0 0 0 1px #cfe7d7!important;
}
#participants .participant.participant-preview strong,
#participants .participant.participant-preview:hover strong{
color:#176b5b!important;
}
}
/* v9.04.132 — Mobile: Zell-Tap ist ein eigener Zustand, kein Safari-Hover. */
@media (hover:none), (pointer:coarse){
#heatGrid .cell.heat:hover{
outline:none!important;
z-index:auto!important;
}
#heatGrid .cell.heat.touch-cell-selected,
#heatGrid .cell.heat.touch-cell-selected:hover{
outline:2px solid #111827!important;
outline-offset:-2px!important;
z-index:3!important;
}
.heat-hover-result.touch-visible{
position:absolute!important;
}
}
/* v9.4.138 — „Anderen Termin vorschlagen“: dieselbe Datum-/Zeit-Komponente wie
auf der Startseite. Keine Sondergestaltung der Inputs; nur Formular-Layout. */
#dateSuggestionForm[hidden]{display:none!important}
#dateSuggestionForm:not([hidden]){
display:flex!important;
align-items:flex-end;
gap:16px;
flex-wrap:wrap;
width:100%;
min-width:0;
margin:14px 0 0;
padding:0;
}
#dateSuggestionForm .suggestion-date-dimension{
flex:0 1 208px;
width:208px;
min-width:0;
margin:0;
}
#dateSuggestionForm #submitDateSuggestion{
flex:0 0 auto;
min-width:190px;
margin:0;
padding:12px 18px;
}
/* Das Event-Formular benutzt bewusst die globalen Startseiten-Regeln für
.date-dimension, .date-head, .dim-date und .day-time-panel. */
@media(max-width:560px){
#dateSuggestionForm:not([hidden]){
display:grid!important;
grid-template-columns:1fr!important;
gap:12px;
width:100%;
margin-top:12px;
}
#dateSuggestionForm .suggestion-date-dimension,
#dateSuggestionForm #submitDateSuggestion{
width:100%;
max-width:100%;
min-width:0;
}
#dateSuggestionForm .suggestion-date-dimension{
flex:none;
}
#dateSuggestionForm #submitDateSuggestion{
min-height:50px;
}
}
/* v9.4.142 — Mobile/Touch: Datumszeile im Terminvorschlag exakt wie auf der Startseite.
Die native iOS-Datumseingabe bleibt als transparente Klickfläche erhalten;
die sichtbare Beschriftung wird stabil und exakt zentriert gerendert. */
#dateSuggestionForm .suggestion-date-head .suggest-date-placeholder{
display:none;
}
@media(max-width:560px){
#dateSuggestionForm .suggestion-date-head{
position:relative!important;
display:grid!important;
grid-template-columns:42px minmax(0,1fr) 42px!important;
align-items:center!important;
width:100%!important;
height:60px!important;
min-height:60px!important;
max-height:60px!important;
overflow:hidden!important;
border:1px solid #e3e6eb!important;
border-radius:16px!important;
background:#eef0f3!important;
}
#dateSuggestionForm .suggestion-date-head #suggestDate{
position:absolute!important;
inset:0!important;
z-index:2!important;
width:100%!important;
height:100%!important;
min-height:0!important;
max-height:none!important;
margin:0!important;
padding:0!important;
border:0!important;
border-radius:16px!important;
background:transparent!important;
opacity:0!important;
cursor:pointer!important;
}
#dateSuggestionForm .suggestion-date-head .suggest-date-placeholder{
grid-column:2!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
align-self:stretch!important;
justify-self:stretch!important;
min-width:0!important;
margin:0!important;
padding:0!important;
color:#30343b!important;
font:inherit!important;
font-weight:750!important;
line-height:1.2!important;
text-align:center!important;
pointer-events:none!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
z-index:1!important;
}
#dateSuggestionForm .suggestion-date-head .suggest-date-placeholder.is-empty{
color:#7b8391!important;
}
#dateSuggestionForm .suggestion-date-head .remove-dim{
grid-column:3!important;
position:relative!important;
z-index:3!important;
width:36px!important;
min-width:36px!important;
max-width:36px!important;
height:36px!important;
margin:0!important;
padding:0!important;
justify-self:center!important;
align-self:center!important;
display:grid!important;
place-items:center!important;
transform:none!important;
background:transparent!important;
border:0!important;
}
}
/* v9.4.142 — Mobile: nur das × im Feld „Datum auswählen“
von „Anderen Termin vorschlagen“ ausblenden. */
@media (hover: none) and (pointer: coarse), (max-width: 700px) {
#clearSuggestDate {
display: none !important;
}
}
/* v9.4.144 — Mobile: Teilnehmerfilter ohne Layout-Hüpfer. */
@media (hover:none), (pointer:coarse){
#groupSub{height:22px;min-height:22px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#participants .participant{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
}
/* v9.4.145 — Mobile/iOS: keine angeschnittene ×-/Picker-Markierung im Feld
„Datum auswählen“. Die komplette transparente Date-Input-Fläche bleibt klickbar. */
@media (max-width:700px), (hover:none) and (pointer:coarse) {
#dateSuggestionForm #clearSuggestDate {
display:none!important;
visibility:hidden!important;
opacity:0!important;
pointer-events:none!important;
}
#dateSuggestionForm .suggestion-date-head #suggestDate {
-webkit-appearance:none!important;
appearance:none!important;
color:transparent!important;
caret-color:transparent!important;
}
#dateSuggestionForm .suggestion-date-head #suggestDate::-webkit-calendar-picker-indicator,
#dateSuggestionForm .suggestion-date-head #suggestDate::-webkit-clear-button,
#dateSuggestionForm .suggestion-date-head #suggestDate::-webkit-inner-spin-button {
-webkit-appearance:none!important;
appearance:none!important;
display:none!important;
visibility:hidden!important;
opacity:0!important;
width:0!important;
height:0!important;
margin:0!important;
padding:0!important;
pointer-events:none!important;
}
}
/* v10.1 — Chrome/Chromium Desktop: native Zeitfelder brauchen intern mehr Platz.
Betrifft bewusst nur Chrome Desktop. Safari und Mobile bleiben unverändert. */
@media (min-width:761px) and (hover:hover) and (pointer:fine){
html.browser-chromium .day-time-panel input[type="time"],
html.browser-chromium .admin-weekday-simple-form input[type="time"],
html.browser-chromium #adminAddDateForm.admin-add-date-form input[type="time"]{
-webkit-appearance:none!important;
appearance:none!important;
display:block!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
box-sizing:border-box!important;
padding-right:10px!important;
overflow:visible!important;
font-variant-numeric:tabular-nums!important;
}
html.browser-chromium .day-time-panel input[type="time"]::-webkit-datetime-edit,
html.browser-chromium .admin-weekday-simple-form input[type="time"]::-webkit-datetime-edit,
html.browser-chromium #adminAddDateForm.admin-add-date-form input[type="time"]::-webkit-datetime-edit{
display:block!important;
width:auto!important;
min-width:0!important;
padding:0!important;
margin:0!important;
overflow:visible!important;
}
html.browser-chromium .day-time-panel input[type="time"]::-webkit-datetime-edit-fields-wrapper,
html.browser-chromium .admin-weekday-simple-form input[type="time"]::-webkit-datetime-edit-fields-wrapper,
html.browser-chromium #adminAddDateForm.admin-add-date-form input[type="time"]::-webkit-datetime-edit-fields-wrapper{
padding:0!important;
margin:0!important;
}
/* Der native Chrome-Picker beansprucht in schmalen Feldern Platz und schneidet
dadurch die Minuten ab. Das Feld bleibt weiterhin direkt editierbar. */
html.browser-chromium .day-time-panel input[type="time"]::-webkit-calendar-picker-indicator,
html.browser-chromium .admin-weekday-simple-form input[type="time"]::-webkit-calendar-picker-indicator,
html.browser-chromium #adminAddDateForm.admin-add-date-form input[type="time"]::-webkit-calendar-picker-indicator{
display:none!important;
-webkit-appearance:none!important;
width:0!important;
min-width:0!important;
margin:0!important;
padding:0!important;
}
}
/* v9.57 — Chrome/Chromium Desktop: Daten-Zeitfelder exakt wie Wochentage.
Gleiche native Behandlung wie v9.56: vollständige Uhrzeit, kein Chrome-Uhrsymbol,
identische Innenabstände und geschlossener Rahmen. Safari und Mobile bleiben unverändert. */
@media (min-width:761px) and (hover:hover) and (pointer:fine){
html.browser-chromium .date-dimension .day-time-panel input[type="time"],
html.browser-chromium .fixed-date-time .day-time-panel input[type="time"]{
-webkit-appearance:none!important;
appearance:none!important;
display:block!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
box-sizing:border-box!important;
border:1px solid var(--line)!important;
border-radius:10px!important;
background:#fbfbfd!important;
background-clip:padding-box!important;
padding:9px 10px!important;
font:inherit!important;
font-variant-numeric:tabular-nums!important;
line-height:1.2!important;
overflow:visible!important;
box-shadow:none!important;
}
html.browser-chromium .date-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit,
html.browser-chromium .fixed-date-time .day-time-panel input[type="time"]::-webkit-datetime-edit{
display:block!important;
width:auto!important;
min-width:0!important;
padding:0!important;
margin:0!important;
overflow:visible!important;
}
html.browser-chromium .date-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit-fields-wrapper,
html.browser-chromium .fixed-date-time .day-time-panel input[type="time"]::-webkit-datetime-edit-fields-wrapper{
padding:0!important;
margin:0!important;
}
html.browser-chromium .date-dimension .day-time-panel input[type="time"]::-webkit-calendar-picker-indicator,
html.browser-chromium .fixed-date-time .day-time-panel input[type="time"]::-webkit-calendar-picker-indicator{
display:none!important;
-webkit-appearance:none!important;
width:0!important;
min-width:0!important;
margin:0!important;
padding:0!important;
}
}
/* v10.2 — Chrome/Desktop: Daten-Zeitbox strukturell 1:1 wie Wochentage.
Der vorherige Fix behandelte nur das native . Tatsächlich
kam das Abschneiden von den festen 140px-Spalten der Daten-Zeitbox. Daher
übernimmt der Datenmodus hier exakt die bewährte Desktop-Geometrie der
Wochentags-Zeitbox (v8.28). */
@media (min-width:761px) and (hover:hover) and (pointer:fine){
html.browser-chromium .date-dimension .day-time-panel,
html.browser-chromium .fixed-date-time .day-time-panel{
width:100%!important;
max-width:100%!important;
min-width:0!important;
box-sizing:border-box!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr)!important;
column-gap:10px!important;
align-items:center!important;
justify-content:stretch!important;
padding:14px 16px 16px!important;
overflow:visible!important;
}
html.browser-chromium .date-dimension .day-time-panel .dim-start,
html.browser-chromium .date-dimension .day-time-panel .dim-end,
html.browser-chromium .fixed-date-time .day-time-panel .dim-start,
html.browser-chromium .fixed-date-time .day-time-panel .dim-end{
width:100%!important;
min-width:0!important;
max-width:100%!important;
box-sizing:border-box!important;
justify-self:stretch!important;
}
html.browser-chromium .date-dimension .day-time-panel .time-dash,
html.browser-chromium .fixed-date-time .day-time-panel .time-dash{
width:28px!important;
min-width:28px!important;
max-width:28px!important;
justify-self:center!important;
text-align:center!important;
margin:0!important;
}
}
/* v9.4.166 — iOS/Safari: Bemerkungsfeld ohne Fokus-Zoom oder horizontalen Überlauf.
Textareas erben in der Basis-CSS bewusst noch nicht `font: inherit`; iOS Safari
behandelt sie deshalb als kleines natives Form-Control und zoomt beim Fokus.
Eine echte 16px-Schrift verhindert diesen automatischen Fokus-Zoom. */
.participant-extra-field textarea{
display:block;
min-width:0;
max-width:100%;
box-sizing:border-box;
font:inherit;
font-size:16px;
line-height:1.4;
overflow-wrap:anywhere;
}
@media (max-width:700px), (hover:none) and (pointer:coarse){
.participant-extra-field{
min-width:0;
max-width:100%;
}
.participant-extra-field textarea{
width:100%;
min-width:0;
max-width:100%;
font-size:16px;
-webkit-text-size-adjust:100%;
resize:none;
}
}
/* v10.10.14 — Startseite bewusst schlank halten.
Diese Optionen bleiben funktional vorhanden und sind später in den Einstellungen änderbar. */
.create-page #slotSettings,
.create-page #weekdayOptions,
.create-page #dateOptions {
display: none !important;
}
/* v10.10.36 — Datumsmodus: ungültige Von-bis-Zeit direkt am betroffenen Termin erklären */
.date-time-error{grid-column:1/-1;margin-top:5px;font-size:12px;line-height:1.35;font-weight:700;color:#b42318}
.day-time-panel.date-time-invalid{outline:3px solid rgba(180,35,24,.22);outline-offset:5px;border-radius:14px}
.day-time-panel .date-time-invalid-field{border-color:#d92d20!important;box-shadow:0 0 0 3px rgba(217,45,32,.10)!important}
/* v10.10.39 — schreibgeschützte Ergebnisansicht */
body.result-only-view #myAvailabilityCard,body.result-only-view #adminPanel,body.result-only-view .event-head .actions,body.result-only-view #adminBanner,body.result-only-view .footer{display:none!important}
body.result-only-view .grid-layout{grid-template-columns:1fr!important;max-width:1100px;margin-inline:auto}
body.result-only-view #groupAvailabilityCard{display:block!important}
.admin-result-link-row .admin-setting-control{display:flex;align-items:center;justify-content:flex-end}
/* v10.10.43 — Ergebnislink bleibt unabhängig von Schloss-/Namensstatus vollständig scharf. */
body.result-only-view #groupAvailabilityCard,
body.result-only-view #groupAvailabilityCard *{
filter:none!important;
opacity:1!important;
pointer-events:auto!important;
user-select:auto!important;
}
/* v10.10.45 — Ergebnislink: Teilnehmerauswahl verhält sich wie in der normalen Gruppenansicht. */
body.result-only-view #participants .participant{cursor:pointer!important;pointer-events:auto!important;touch-action:manipulation}
body.result-only-view #participants .participant-preview{pointer-events:auto!important}
/* v10.10.58 — KI-Aktionsbuttons in Daten/Wochentage exakt identisch.
Die beiden Modi unterscheiden sich nur durch Reihenfolge + Primary-Zuweisung. */
.ai-premium .ai-actions #aiFindBest,
.ai-premium .ai-actions #aiSchedule,
.ai-premium .ai-actions #buyCredits{
min-height:46px;
border-radius:999px !important;
padding:0 18px !important;
font-weight:850 !important;
transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
}
/* Primärbutton: unabhängig davon, ob es Termin finden oder Stundenplan ist. */
.ai-premium .ai-actions #aiFindBest.primary,
.ai-premium .ai-actions #aiSchedule.primary{
border:1px solid rgba(17,24,39,.12) !important;
background:linear-gradient(180deg,#1b2230,#111827) !important;
color:#fff !important;
box-shadow:
0 10px 26px rgba(17,24,39,.20),
inset 0 1px 0 rgba(255,255,255,.12) !important;
}
/* Sekundärbutton: exakt dieselbe weisse Darstellung in beiden Modi. */
.ai-premium .ai-actions #aiFindBest.secondary,
.ai-premium .ai-actions #aiSchedule.secondary,
.ai-premium .ai-actions #buyCredits{
border:1px solid rgba(17,24,39,.10) !important;
background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(239,243,248,.98)) !important;
color:#151b27 !important;
box-shadow:
0 8px 24px rgba(17,24,39,.09),
inset 0 1px 0 rgba(255,255,255,.95) !important;
}
@media (hover:hover) and (pointer:fine){
.ai-premium .ai-actions #aiFindBest:hover,
.ai-premium .ai-actions #aiSchedule:hover,
.ai-premium .ai-actions #buyCredits:hover{
transform:translateY(-1px);
}
.ai-premium .ai-actions #aiFindBest.primary:hover,
.ai-premium .ai-actions #aiSchedule.primary:hover{
box-shadow:
0 14px 32px rgba(17,24,39,.26),
inset 0 1px 0 rgba(255,255,255,.14) !important;
}
.ai-premium .ai-actions #aiFindBest.secondary:hover,
.ai-premium .ai-actions #aiSchedule.secondary:hover,
.ai-premium .ai-actions #buyCredits:hover{
border-color:rgba(17,24,39,.17) !important;
box-shadow:
0 12px 30px rgba(17,24,39,.12),
inset 0 1px 0 rgba(255,255,255,.98) !important;
}
}
@media(max-width:640px){
#adminPanel .ai-premium .ai-actions #aiFindBest,
#adminPanel .ai-premium .ai-actions #aiSchedule,
#adminPanel .ai-premium .ai-actions #buyCredits{
width:100%;
min-height:48px;
padding-inline:14px !important;
justify-content:center;
}
}
/* v10.10.59 — Linker KI-Button: exakt dieselbe Form wie der weisse Button.
Primary unterscheidet sich ausschliesslich durch die schwarze Farbgebung. */
.ai-premium .ai-actions #aiFindBest,
.ai-premium .ai-actions #aiSchedule{
min-height:46px !important;
height:auto !important;
border-radius:999px !important;
padding:0 18px !important;
font:inherit !important;
font-weight:850 !important;
line-height:1.2 !important;
letter-spacing:normal !important;
box-shadow:
0 8px 24px rgba(17,24,39,.09),
inset 0 1px 0 rgba(255,255,255,.95) !important;
transform:none;
}
/* Weiss = gemeinsame Basis. */
.ai-premium .ai-actions #aiFindBest.secondary,
.ai-premium .ai-actions #aiSchedule.secondary{
border:1px solid rgba(17,24,39,.10) !important;
background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(239,243,248,.98)) !important;
color:#151b27 !important;
}
/* Schwarz = exakt dieselbe Basis; nur Farben werden geändert. */
.ai-premium .ai-actions #aiFindBest.primary,
.ai-premium .ai-actions #aiSchedule.primary{
border:1px solid #111827 !important;
background:#111827 !important;
color:#fff !important;
box-shadow:
0 8px 24px rgba(17,24,39,.09),
inset 0 1px 0 rgba(255,255,255,.12) !important;
}
@media (hover:hover) and (pointer:fine){
.ai-premium .ai-actions #aiFindBest:hover,
.ai-premium .ai-actions #aiSchedule:hover{
transform:translateY(-1px);
box-shadow:
0 12px 30px rgba(17,24,39,.12),
inset 0 1px 0 rgba(255,255,255,.18) !important;
}
}
/* v10.10.60 — Primärbutton exakt gleich dreidimensional wie Sekundärbutton.
Gleiche Licht-/Schatten-Geometrie; nur die Farbpalette ist dunkel. */
.ai-premium .ai-actions #aiFindBest.primary,
.ai-premium .ai-actions #aiSchedule.primary{
border:1px solid rgba(17,24,39,.18) !important;
background:linear-gradient(
180deg,
rgba(42,51,67,.99) 0%,
rgba(17,24,39,.99) 100%
) !important;
color:#fff !important;
box-shadow:
0 8px 24px rgba(17,24,39,.09),
inset 0 1px 0 rgba(255,255,255,.32) !important;
}
@media (hover:hover) and (pointer:fine){
.ai-premium .ai-actions #aiFindBest.primary:hover,
.ai-premium .ai-actions #aiSchedule.primary:hover{
border-color:rgba(17,24,39,.24) !important;
background:linear-gradient(
180deg,
rgba(48,58,76,.99) 0%,
rgba(17,24,39,.99) 100%
) !important;
box-shadow:
0 12px 30px rgba(17,24,39,.12),
inset 0 1px 0 rgba(255,255,255,.34) !important;
}
}
/* v10.10.61 — Schwarzer und weisser KI-Button haben exakt denselben
äusseren Hintergrund-Schatten. Nur Fläche/Textfarbe unterscheiden sich. */
.ai-premium .ai-actions #aiFindBest.primary,
.ai-premium .ai-actions #aiSchedule.primary,
.ai-premium .ai-actions #aiFindBest.secondary,
.ai-premium .ai-actions #aiSchedule.secondary{
box-shadow:
0 8px 24px rgba(17,24,39,.09),
inset 0 1px 0 rgba(255,255,255,.32) !important;
}
/* Beim weissen Button darf der innere Glanz heller bleiben; der äussere
Schatten bleibt trotzdem pixelgleich zum schwarzen Button. */
.ai-premium .ai-actions #aiFindBest.secondary,
.ai-premium .ai-actions #aiSchedule.secondary{
box-shadow:
0 8px 24px rgba(17,24,39,.09),
inset 0 1px 0 rgba(255,255,255,.95) !important;
}
@media (hover:hover) and (pointer:fine){
.ai-premium .ai-actions #aiFindBest.primary:hover,
.ai-premium .ai-actions #aiSchedule.primary:hover,
.ai-premium .ai-actions #aiFindBest.secondary:hover,
.ai-premium .ai-actions #aiSchedule.secondary:hover{
box-shadow:
0 12px 30px rgba(17,24,39,.12),
inset 0 1px 0 rgba(255,255,255,.34) !important;
}
.ai-premium .ai-actions #aiFindBest.secondary:hover,
.ai-premium .ai-actions #aiSchedule.secondary:hover{
box-shadow:
0 12px 30px rgba(17,24,39,.12),
inset 0 1px 0 rgba(255,255,255,.98) !important;
}
}
/* Interaktive Admin-Elemente klar als klickbar kennzeichnen. */
.admin-editable-title,#mePill[role="button"],#editLinkField{cursor:pointer}
.edit-mail-status{display:block;grid-column:1/-1;min-height:1.25em;margin-top:2px;color:var(--muted);font-size:13px;font-weight:650}
.edit-mail-status.success{color:#137a4b}.edit-mail-status.error{color:var(--danger)}
#sendEditMail:disabled{opacity:.72;cursor:wait}
/* Admin ohne Namen: E-Mail als visueller Fallback in derselben Pillen-Optik wie später der Name. */
.admin-email-pill{
cursor:pointer;
}
.admin-email-pill:hover{
color:var(--text);
}
.admin-email-pill:focus-visible{
outline:2px solid currentColor;
outline-offset:3px;
}
.admin-email-pill{
max-width:min(360px,42vw);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
@media(max-width:700px){
.admin-email-pill{max-width:44vw}
}
.superadmin-backup-card{margin:22px 0;padding:20px}
.superadmin-backup-head{gap:18px;align-items:center}
.superadmin-backup-head>div{display:flex;flex-direction:column;gap:4px}
.superadmin-backup-head small{color:var(--muted,#6b7280);font-weight:400}
.superadmin-backup-note{margin:12px 0 0;color:var(--muted,#6b7280);font-size:.88rem}
@media(max-width:700px){.superadmin-backup-head{align-items:stretch;flex-direction:column}.superadmin-backup-head button{width:100%}}
/* Admin: erklärt vor der ersten eigenen Teilnahme klar den nötigen Ablauf. */
.admin-participation-intro{
margin:18px 0 12px;
padding:18px 20px;
border:1px solid rgba(15,23,42,.12);
border-radius:18px;
background:linear-gradient(180deg,rgba(248,250,252,.98),rgba(255,255,255,.98));
box-shadow:0 8px 24px rgba(15,23,42,.05);
}
.admin-participation-copy strong{
display:block;
color:#111827;
font-size:1rem;
line-height:1.35;
}
.admin-participation-copy p{
margin:5px 0 0;
color:#667085;
font-size:.93rem;
line-height:1.5;
}
.admin-participation-steps{
display:flex;
align-items:center;
gap:9px;
flex-wrap:wrap;
margin-top:14px;
color:#344054;
font-size:.88rem;
font-weight:650;
}
.admin-participation-steps span{
display:inline-flex;
align-items:center;
gap:7px;
}
.admin-participation-steps b{
display:inline-grid;
place-items:center;
width:24px;
height:24px;
border-radius:999px;
background:#111827;
color:#fff;
font-size:.76rem;
line-height:1;
}
.admin-participation-steps i{
color:#98a2b3;
font-style:normal;
}
.admin-mode #adminParticipationIntro + #joinBox{
margin-top:0;
}
@media(max-width:560px){
.admin-participation-intro{padding:16px}
.admin-participation-steps{gap:7px}
.admin-participation-steps i{display:none}
.admin-participation-steps span{width:100%}
}
/* Verfügbarkeit: kurze, scanbare Schritt-für-Schritt-Hilfe. */
.availability-help{
padding:18px 20px;
border:1px solid rgba(15,23,42,.12);
border-radius:18px;
background:linear-gradient(180deg,rgba(248,250,252,.98),rgba(255,255,255,.98));
box-shadow:0 8px 24px rgba(15,23,42,.05);
}
.availability-help-title{
display:block;
margin-bottom:13px;
color:#111827;
font-size:1rem;
line-height:1.35;
}
.availability-help-steps{
display:grid;
gap:10px;
}
.availability-help-step{
display:flex;
align-items:flex-start;
gap:10px;
}
.availability-help-step>b{
flex:0 0 auto;
display:inline-grid;
place-items:center;
width:25px;
height:25px;
border-radius:999px;
background:#111827;
color:#fff;
font-size:.76rem;
line-height:1;
}
.availability-help-step>div{
min-width:0;
display:flex;
flex-direction:column;
gap:1px;
}
.availability-help-step strong{
color:#344054;
font-size:.9rem;
line-height:1.35;
}
.availability-help-step span{
color:#667085;
font-size:.87rem;
line-height:1.42;
}
.availability-help-tip{
margin:13px 0 0;
padding-top:11px;
border-top:1px solid rgba(15,23,42,.08);
color:#667085;
font-size:.84rem;
line-height:1.4;
}
@media(max-width:560px){
.availability-help{padding:16px}
}
/* Kompakte Verfügbarkeitshilfe: klar, aber bewusst nicht als Schritt-für-Schritt-Karte. */
.availability-help-text{
margin:6px 0 0;
color:#667085;
font-size:.93rem;
line-height:1.52;
}
.availability-help-text strong{
color:#344054;
font-weight:700;
}
.availability-help-action{
margin:11px 0 0;
padding-top:10px;
border-top:1px solid rgba(15,23,42,.08);
color:#344054;
font-size:.86rem;
font-weight:650;
line-height:1.4;
}
/* Eigene Verfügbarkeit: Überschrift bewusst in einer Zeile halten. */
#myAvailabilityCard > .between > div:first-child{
min-width:max-content;
}
#myAvailabilityCard > .between h2{
white-space:nowrap;
}
/* Verfügbarkeitshilfe bewusst dezent; nur die beiden Auswahlarten leicht betonen. */
.availability-help-text .availability-choice{
color:#344054;
font-weight:650;
}
/* Hilfe vollständig ohne Fettschrift. */
.availability-help-text,
.availability-help-text .availability-choice,
.availability-help-action{
font-weight:400;
}
/* Admin-Eigenverfügbarkeit: gleicher ruhiger Hinweisstil wie die Verfügbarkeitshilfe. */
.admin-participation-intro{
padding:18px 20px;
border:1px solid rgba(15,23,42,.12);
border-radius:18px;
background:linear-gradient(180deg,rgba(248,250,252,.98),rgba(255,255,255,.98));
box-shadow:0 8px 24px rgba(15,23,42,.05);
}
.admin-participation-intro > p{
margin:0;
color:#667085;
font-size:.93rem;
font-weight:400;
line-height:1.52;
}
/* Admin-Hinweis exakt im selben Box-/Schriftstil wie „Wähle zuerst …“. */
.admin-participation-intro{
padding:18px 20px;
border:1px solid rgba(15,23,42,.12);
border-radius:18px;
background:linear-gradient(180deg,rgba(248,250,252,.98),rgba(255,255,255,.98));
box-shadow:0 8px 24px rgba(15,23,42,.05);
}
.admin-participation-intro > p{
margin:0;
color:#667085;
font-size:.93rem;
font-weight:400;
line-height:1.52;
}
/* Beide Hinweisboxen bewusst mit exakt denselben berechneten Werten.
Wichtig: frühere .availability-help p-Regeln hatten höhere Spezifität
und machten den Text dort kleiner als im Admin-Hinweis. */
.availability-help,
.admin-participation-intro{
margin:16px 0 12px;
padding:18px 20px;
border:1px solid rgba(15,23,42,.12);
border-radius:18px;
background:linear-gradient(180deg,rgba(248,250,252,.98),rgba(255,255,255,.98));
box-shadow:0 8px 24px rgba(15,23,42,.05);
box-sizing:border-box;
}
.availability-help p,
.admin-participation-intro > p{
margin:0;
color:#667085;
font-size:13px;
font-weight:400;
line-height:1.45;
}
.availability-help-text .availability-choice{
color:inherit;
font-weight:400;
}
/* Teilnehmerlink teilen: Hover exakt wie „+ KI-Credits“ (#buyCredits). */
@media (hover:hover) and (pointer:fine){
#shareBtn:hover{
transform:translateY(-1px) !important;
background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(239,243,248,.98)) !important;
color:#151b27 !important;
border-color:rgba(17,24,39,.17) !important;
box-shadow:
0 12px 30px rgba(17,24,39,.12),
inset 0 1px 0 rgba(255,255,255,.98) !important;
filter:none !important;
}
}
/* v016 — compact result feedback */
.ai-feedback{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.ai-feedback-main{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ai-feedback-rating{display:flex;align-items:center;gap:4px}
.ai-feedback-rating button{appearance:none;border:1px solid transparent;background:transparent;border-radius:9px;padding:5px 6px;font-size:20px;line-height:1;cursor:pointer;filter:grayscale(.18);transition:transform .12s ease,background .12s ease,border-color .12s ease,filter .12s ease}
.ai-feedback-rating button:hover,.ai-feedback-rating button:focus-visible{transform:translateY(-1px);background:#f5f7fa;border-color:var(--line);filter:none;outline:none}
.ai-feedback-rating button.selected{background:#eef2f7;border-color:#cfd6df;filter:none}
.ai-feedback-detail{margin-top:10px}
.ai-feedback-detail label{display:block;margin-bottom:5px;color:var(--text);font-weight:600}
.ai-feedback-detail label small{font-weight:400;color:var(--muted)}
.ai-feedback-detail-row{display:flex;gap:8px;align-items:center}
.ai-feedback-detail-row input{min-width:0;flex:1}
.ai-feedback-thanks{display:block;margin-top:7px;color:var(--muted)}
@media(max-width:600px){.ai-feedback-main{align-items:flex-start;flex-direction:column;gap:7px}.ai-feedback-detail-row{align-items:stretch;flex-direction:column}.ai-feedback-detail-row button{align-self:flex-start}}
/* v030: KI-Rückfragen direkt unter dem Prompt */
.ai-clarification{margin-top:10px;padding:14px;border:1px solid var(--line);border-radius:15px;background:var(--panel,#fff)}
.ai-clarification[hidden]{display:none}
.ai-clarification-head{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.ai-clarification p{margin:0 0 10px;line-height:1.45}
.ai-clarification-answer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:end}
.ai-clarification-answer textarea{width:100%;min-height:62px;resize:vertical;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;padding:10px 11px;font:inherit;line-height:1.4;background:#fff}
.ai-clarification-answer textarea:focus{outline:2px solid rgba(15,118,110,.16);border-color:#0f766e}
.ai-clarification small{display:block;margin-top:8px;color:var(--muted);line-height:1.35}
@media(max-width:620px){.ai-clarification-answer{grid-template-columns:1fr}.ai-clarification-answer button{width:100%}}
/* v031: ruhiger Kommunikationsbereich direkt unter dem Prompt */
.ai-prompt-help{display:block;margin-top:7px;color:var(--muted);line-height:1.35}
.ai-communication{margin-top:10px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel,#fff)}
.ai-communication[hidden]{display:none}
.ai-communication-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ai-communication-body,.ai-communication #aiCommunicationBody{line-height:1.45}
.ai-communication #aiCommunicationBody p{margin:0;white-space:pre-line}
.ai-communication #aiCommunicationBody ul{margin:6px 0 0;padding-left:20px}
.ai-communication #aiCommunicationBody li+li{margin-top:3px}
.ai-understanding #aiUnderstandingBody{line-height:1.45}
.ai-understanding #aiUnderstandingBody ul{margin:6px 0 0;padding-left:20px}
.ai-understanding #aiUnderstandingBody li+li{margin-top:3px}
.ai-clarification-choices{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ai-clarification-choices[hidden]{display:none}
.ai-clarification-choices button{min-width:0}
/* v034: Frage zum fertigen Ergebnis als eigener Kommunikationsort */
.ai-result-question{margin-top:10px;padding:14px;border:1px solid var(--line);border-radius:15px;background:var(--panel,#fff)}
.ai-result-question[hidden]{display:none}
.ai-result-question-head{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.ai-result-question-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:end}
.ai-result-question textarea{width:100%;min-height:62px;resize:vertical;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;padding:10px 11px;font:inherit;line-height:1.4;background:#fff}
.ai-result-question textarea:focus{outline:2px solid rgba(15,118,110,.16);border-color:#0f766e}
.ai-result-question small{display:block;margin-top:8px;color:var(--muted);line-height:1.35}
.ai-actions .ai-csv-quiet{margin-left:auto;padding-left:10px;padding-right:10px;font-weight:700}
@media(max-width:620px){
.ai-result-question-row{grid-template-columns:1fr}
.ai-result-question-row button{width:100%}
.ai-actions .ai-csv-quiet{margin-left:0}
}
.ai-result-question-answer{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);line-height:1.5}
.ai-result-question-answer[hidden]{display:none}
.ai-result-question-answer strong{display:block;margin-bottom:6px}
.ai-result-question-answer #aiResultQuestionAnswerText{white-space:pre-line}
.ai-result-recalculate-action{margin-top:12px}
.ai-result-recalculate-action[hidden]{display:none}
.ai-result-recalculate-btn{border:0;border-radius:14px;padding:12px 16px;font:inherit;font-weight:800;cursor:pointer;background:var(--green);color:#fff;transition:.18s}
.ai-result-recalculate-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(25,164,99,.24)}
.ai-result-recalculate-btn:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}
.ai-result-question .ai-result-change-action{background:var(--green);color:#fff}
.ai-result-question .ai-result-change-action:hover{box-shadow:0 8px 20px rgba(25,164,99,.24)}
/* v041 — CSV-Hover exakt wie „+ KI-Credits“. */
@media (hover:hover) and (pointer:fine){
#adminPanel .ai-premium .ai-actions #csvBtn:hover{
transform:translateY(-1px) !important;
border-color:rgba(17,24,39,.17) !important;
background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(239,243,248,.98)) !important;
color:#151b27 !important;
box-shadow:
0 12px 30px rgba(17,24,39,.12),
inset 0 1px 0 rgba(255,255,255,.98) !important;
filter:none !important;
}
}
/* v043 – letzte Zeitgrenze der Verfügbarkeits-Skala sichtbar machen.
Das zusätzliche Achsenfeld ist kein auswählbarer Slot: Es zeigt nur die
Endzeit (z. B. 20:00) auf der unteren Grenze des letzten 15-Minuten-Felds. */
.schedule .time-label.time-axis-end-label{
height:18px !important;
min-height:18px !important;
border-right:1px solid #edf0f3 !important;
background:#fff !important;
}
.schedule .time-label.time-axis-end-label::before{
content:"" !important;
display:block !important;
position:absolute !important;
top:0 !important;
left:54px !important;
right:-1px !important;
height:0 !important;
border-top:1px solid #edf0f3 !important;
background:none !important;
pointer-events:none !important;
z-index:9 !important;
}
.schedule .grid-end-spacer{
height:18px !important;
min-height:18px !important;
background:#fff !important;
border-top:1px solid #edf0f3 !important;
border-right:1px solid #edf0f3 !important;
border-bottom:0 !important;
box-shadow:none !important;
pointer-events:none !important;
}
/* v044 — Fixierungsstatus auch im Dialog für individuelle Dauern pro Person sichtbar. */
.individual-duration-lock-notice{
margin:-2px 0 12px;
}
/* v047: KI-Fehler bleiben sichtbar im Auswertungsbereich statt als flüchtiger Toast. */
.ai-persistent-error{
margin-top:10px;
padding:12px 14px;
border:1px solid rgba(145,64,64,.24);
border-radius:14px;
background:rgba(145,64,64,.055);
line-height:1.45;
}
.ai-persistent-error[hidden]{display:none}
.ai-persistent-error-head{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.ai-persistent-error-head span{
display:inline-grid;place-items:center;
width:20px;height:20px;border-radius:999px;
border:1px solid currentColor;font-size:12px;font-weight:800;
}
.ai-persistent-error-text{white-space:pre-line}
/* v049 — eine eindeutige KI-Hauptaktion, drei helle Direktaktionen. */
#adminPanel .ai-premium .ai-actions #aiRun,
#adminPanel .ai-premium .ai-actions #aiSchedule,
#adminPanel .ai-premium .ai-actions #aiFindBest,
#adminPanel .ai-premium .ai-actions #aiQuestion,
#adminPanel .ai-premium .ai-actions #buyCredits,
#adminPanel .ai-premium .ai-actions #csvBtn{
min-height:46px;
height:auto;
border-radius:999px !important;
padding:0 18px !important;
font:inherit !important;
font-weight:850 !important;
line-height:1.2 !important;
transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
}
#adminPanel .ai-premium .ai-actions #aiRun{
border:1px solid rgba(17,24,39,.18) !important;
background:linear-gradient(180deg,rgba(42,51,67,.99),rgba(17,24,39,.99)) !important;
background-color:#111827 !important;
color:#fff !important;
box-shadow:0 8px 24px rgba(17,24,39,.09),inset 0 1px 0 rgba(255,255,255,.32) !important;
}
#adminPanel .ai-premium .ai-actions #aiSchedule,
#adminPanel .ai-premium .ai-actions #aiFindBest,
#adminPanel .ai-premium .ai-actions #aiQuestion,
#adminPanel .ai-premium .ai-actions #buyCredits,
#adminPanel .ai-premium .ai-actions #csvBtn{
border:1px solid rgba(17,24,39,.10) !important;
background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(239,243,248,.98)) !important;
color:#151b27 !important;
box-shadow:0 8px 24px rgba(17,24,39,.09),inset 0 1px 0 rgba(255,255,255,.95) !important;
}
@media (hover:hover) and (pointer:fine){
#adminPanel .ai-premium .ai-actions #aiRun:hover,
#adminPanel .ai-premium .ai-actions #aiSchedule:hover,
#adminPanel .ai-premium .ai-actions #aiFindBest:hover,
#adminPanel .ai-premium .ai-actions #aiQuestion:hover,
#adminPanel .ai-premium .ai-actions #buyCredits:hover,
#adminPanel .ai-premium .ai-actions #csvBtn:hover{
transform:translateY(-1px) !important;
}
#adminPanel .ai-premium .ai-actions #aiRun:hover{
border-color:rgba(17,24,39,.24) !important;
background:linear-gradient(180deg,rgba(48,58,76,.99),rgba(17,24,39,.99)) !important;
background-color:#111827 !important;
box-shadow:0 12px 30px rgba(17,24,39,.12),inset 0 1px 0 rgba(255,255,255,.34) !important;
}
#adminPanel .ai-premium .ai-actions #aiSchedule:hover,
#adminPanel .ai-premium .ai-actions #aiFindBest:hover,
#adminPanel .ai-premium .ai-actions #aiQuestion:hover,
#adminPanel .ai-premium .ai-actions #buyCredits:hover,
#adminPanel .ai-premium .ai-actions #csvBtn:hover{
border-color:rgba(17,24,39,.17) !important;
background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(239,243,248,.98)) !important;
color:#151b27 !important;
box-shadow:0 12px 30px rgba(17,24,39,.12),inset 0 1px 0 rgba(255,255,255,.98) !important;
}
}
@media(max-width:640px){
#adminPanel .ai-premium .ai-actions #aiRun,
#adminPanel .ai-premium .ai-actions #aiSchedule,
#adminPanel .ai-premium .ai-actions #aiFindBest,
#adminPanel .ai-premium .ai-actions #aiQuestion,
#adminPanel .ai-premium .ai-actions #buyCredits,
#adminPanel .ai-premium .ai-actions #csvBtn{
width:100%;
min-height:48px;
justify-content:center;
margin-left:0;
}
}
/* v051 — Prompt und Ergebnisfragen klar trennen. */
.ai-schedule-explanation{
margin-top:16px;
padding:15px 16px;
border-top:1px solid var(--line);
background:transparent;
line-height:1.5;
}
.ai-schedule-explanation[hidden]{display:none}
.ai-schedule-explanation>strong{display:block;margin-bottom:7px}
.ai-schedule-explanation p{margin:0;color:#3f4652}
.ai-schedule-explanation ul{margin:0;padding-left:20px;color:#3f4652}
.ai-schedule-explanation li+li{margin-top:5px}
.ai-result-question-create{font-weight:700}
.ai-result-question-modal-card{width:min(620px,100%)}
.ai-result-question-modal-head{align-items:flex-start}
.ai-result-question-modal-head .sub{margin-bottom:14px}
#aiResultQuestionInput{
width:100%;
min-height:120px;
resize:vertical;
box-sizing:border-box;
border:1px solid var(--line);
border-radius:14px;
padding:12px 13px;
font:inherit;
line-height:1.5;
background:#fbfbfd;
outline:none;
}
#aiResultQuestionInput:focus{border-color:var(--zf-focus-border);box-shadow:0 0 0 4px var(--zf-focus-glow);background:#fff}
.ai-result-question-modal-help{display:block;margin-top:7px;color:var(--muted);line-height:1.35}
#aiResultQuestionModal .duration-actions{margin-top:16px}
@media(max-width:620px){
.ai-message-create-row{align-items:stretch}
.ai-message-create,.ai-result-question-create{width:100%}
#aiResultQuestionModal .duration-actions{display:grid;grid-template-columns:1fr;gap:8px}
#aiResultQuestionModal .duration-actions button{width:100%}
}
/* v058 — KI-Aktionen zusammenhalten; Status als eigene Ergebniszeile. */
#adminPanel .ai-actions #csvBtn{
order:0;
margin-left:0;
}
#adminPanel .ai-status-row{
display:flex;
align-items:center;
justify-content:flex-start;
width:100%;
margin-top:10px;
text-align:left;
}
#adminPanel .ai-status-row:has(.ai-status:empty){
display:none;
}
#adminPanel .ai-status-row .ai-status{
display:block;
width:100%;
font-size:13px;
color:var(--muted);
text-align:left;
}
@media(max-width:640px){
#adminPanel .ai-actions #csvBtn{
order:0;
margin-left:0;
}
#adminPanel .ai-status-row{
margin-top:8px;
}
}
/* v091: ruhiger Klick-Status direkt in „ZeitFinder hat verstanden“.
Keine Animation: die Box ändert nur dezent ihren Zustand. */
.ai-understanding{transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}
.ai-understanding.is-finalizing{border-color:rgba(25,164,99,.55);background:#f7fcf9;box-shadow:0 0 0 3px rgba(25,164,99,.06)}
.ai-understanding.is-ready{border-color:rgba(25,164,99,.7);background:var(--green-soft);box-shadow:none}
.ai-understanding.is-finalizing .ai-communication-head>span,
.ai-understanding.is-ready .ai-communication-head>span{color:var(--green)}
.ai-understanding-status{display:flex;align-items:center;gap:7px;margin-top:8px;padding-top:8px;border-top:1px solid rgba(25,164,99,.16);font-size:13px;font-weight:700;color:#397456;line-height:1.35}
.ai-understanding-status[hidden]{display:none}
/* v044 — sofort sichtbares, ruhiges Live-Verständnis. */
.ai-understanding.is-updating{border-color:rgba(25,164,99,.42);background:#f9fcfa;box-shadow:0 0 0 3px rgba(25,164,99,.045)}
.ai-understanding.is-updating #aiUnderstandingBody{opacity:.46;transition:opacity .16s ease}
.ai-understanding:not(.is-updating) #aiUnderstandingBody{opacity:1;transition:opacity .16s ease}
.ai-understanding.is-updating #aiUnderstandingIcon{display:inline-block;width:15px;height:13px;border:2px solid rgba(25,164,99,.22);border-top-color:var(--green);border-radius:50%;animation:ai-understanding-spin .72s linear infinite;flex:0 0 15px}
.ai-understanding.is-ready #aiUnderstandingIcon{width:auto;height:auto;border:0;animation:none}
.ai-understanding.is-updating .ai-understanding-status{color:#4a725d;border-top-color:rgba(25,164,99,.12)}
@keyframes ai-understanding-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ai-understanding.is-updating #aiUnderstandingIcon{animation:none}}
/* v044 — freie Sol-/DateFinder-Antworten nutzen dieselbe ruhige grüne Ergebnissprache. */
.ai-free-text-result-card,
.ai-result-question-answer{
margin-top:14px;
border:1px solid rgba(25,164,99,.72);
border-radius:18px;
background:linear-gradient(180deg,rgba(239,252,245,.98),rgba(246,253,249,.98));
box-shadow:0 1px 0 rgba(255,255,255,.9) inset;
color:#18231d;
}
.ai-free-text-result-card{padding:18px 20px}
.ai-free-text-result-head{display:flex;align-items:center;gap:9px;color:#187c68;margin-bottom:12px}
.ai-free-text-result-head>span{font-size:19px;line-height:1}
.ai-free-text-result-head>strong{font-size:1.05em}
.ai-free-text-result-body>.schedule-section{margin:0;padding:0;border:0;background:transparent;box-shadow:none}
.ai-free-text-result-body>.schedule-section+.schedule-section{margin-top:14px;padding-top:14px;border-top:1px solid rgba(25,164,99,.16)}
.ai-free-text-result-body>.schedule-section>h4{color:#187c68}
.ai-result-question-answer{
padding:16px 18px;
border-top:1px solid rgba(25,164,99,.72);
}
.ai-result-question-answer>strong{color:#187c68;margin-bottom:7px}
.ai-result-question-answer #aiResultQuestionAnswerText{color:#24332b}
/* v107 — verstandene KI-Regeln transparent nach Ausführbarkeit gruppieren. */
.ai-understanding-group+.ai-understanding-group{margin-top:12px;padding-top:10px;border-top:1px solid rgba(25,164,99,.14)}
.ai-understanding-label{margin:0 0 5px;font-size:12px;font-weight:800;letter-spacing:.02em;color:#356b50;text-transform:uppercase}
.ai-understanding-group ul{margin:0;padding-left:24px}
.ai-understanding-group.is-unsupported{margin-left:-2px;margin-right:-2px;padding:10px 12px;border:1px solid rgba(188,123,28,.28);border-radius:12px;background:rgba(255,248,235,.76)}
.ai-understanding-group.is-unsupported .ai-understanding-label{color:#8b5b17}
.ai-understanding-group.is-unsupported li{color:#5f451f}
/* v10.11.04 — Gratis-Solver klar von der kostenpflichtigen KI-Auswertung trennen. */
.deterministic-section{
margin:0 0 18px;
padding:20px 22px;
border:1px solid rgba(17,24,39,.08);
border-radius:22px;
background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,249,252,.96));
box-shadow:0 8px 26px rgba(17,24,39,.06),inset 0 1px 0 rgba(255,255,255,.96);
}
.deterministic-title-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.deterministic-title-line h3{margin:0}
.free-badge{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;border:1px solid rgba(25,135,84,.16);background:rgba(25,135,84,.07);color:#237a4b;font-weight:850;font-size:.88rem}
.deterministic-section .sub{margin:7px 0 0}
.deterministic-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.deterministic-actions button{min-height:46px;border-radius:999px!important;padding:0 18px!important;font-weight:850!important}
.deterministic-actions .primary{background:linear-gradient(180deg,#1b2230,#111827)!important;color:#fff!important;border:1px solid rgba(17,24,39,.15)!important}
.deterministic-status{margin-top:10px;color:rgba(21,27,39,.62);font-weight:700;min-height:1.2em}
@media(max-width:640px){.deterministic-section{padding:17px}.deterministic-actions{align-items:stretch;flex-direction:column}.deterministic-actions button{width:100%;justify-content:center}}
/* v10.11.05 — Gratis-Aktionen nutzen wieder den vollständigen bestehenden Ergebnis-Renderer. */
#deterministicResultHost>.ai-result{margin-top:14px}
/* v10.11.06 — Gratis-Aktionen ohne Erklärblock; optisch exakt wie „KI-Credits“. */
.deterministic-section{
margin:14px 0 18px;
padding:0;
border:0;
border-radius:0;
background:none;
box-shadow:none;
}
.deterministic-actions{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-top:0}
.deterministic-schedule-stack{display:flex;flex-direction:column;align-items:stretch;gap:10px;min-width:max-content}
#adminPanel .deterministic-actions #aiSchedule,
#adminPanel .deterministic-actions #aiFindBest,
#adminPanel .deterministic-actions #csvBtn{
min-height:46px;
height:auto;
border-radius:999px !important;
padding:0 18px !important;
font:inherit !important;
font-weight:850 !important;
line-height:1.2 !important;
border:1px solid rgba(17,24,39,.10) !important;
background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(239,243,248,.98)) !important;
color:#151b27 !important;
box-shadow:0 8px 24px rgba(17,24,39,.09),inset 0 1px 0 rgba(255,255,255,.95) !important;
transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease !important;
}
@media (hover:hover) and (pointer:fine){
#adminPanel .deterministic-actions #aiSchedule:hover,
#adminPanel .deterministic-actions #aiFindBest:hover,
#adminPanel .deterministic-actions #csvBtn:hover{
transform:translateY(-1px) !important;
border-color:rgba(17,24,39,.17) !important;
background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(239,243,248,.98)) !important;
color:#151b27 !important;
box-shadow:0 12px 30px rgba(17,24,39,.12),inset 0 1px 0 rgba(255,255,255,.98) !important;
filter:none !important;
}
}
.lesson-duration-info{margin:0;max-width:440px}
.deterministic-status{margin-top:10px;color:rgba(21,27,39,.62);font-weight:700;min-height:1.2em}
@media(max-width:640px){
.deterministic-section{padding:0}
.deterministic-actions{align-items:stretch;flex-direction:column}
.deterministic-schedule-stack{min-width:0;width:100%}
#adminPanel .deterministic-actions #aiSchedule,
#adminPanel .deterministic-actions #aiFindBest,
#adminPanel .deterministic-actions #csvBtn{width:100%;min-height:48px;justify-content:center;margin-left:0}
.lesson-duration-info{max-width:none}
}
/* v10.11.07 — Deterministische Aktionen wieder in gemeinsamer Box, auf Desktop in einer Zeile. */
.deterministic-section{
margin:14px 0 18px;
padding:18px 20px;
border:1px solid rgba(17,24,39,.08);
border-radius:22px;
background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(247,249,252,.97));
box-shadow:0 8px 26px rgba(17,24,39,.06),inset 0 1px 0 rgba(255,255,255,.98);
}
.deterministic-actions{
display:grid;
grid-template-columns:max-content max-content max-content;
align-items:start;
justify-content:start;
gap:12px;
margin:0;
}
.deterministic-schedule-stack{
display:flex;
flex-direction:column;
align-items:stretch;
gap:10px;
min-width:0;
}
#adminPanel .deterministic-actions #aiSchedule,
#adminPanel .deterministic-actions #aiFindBest,
#adminPanel .deterministic-actions #csvBtn{
white-space:nowrap;
}
@media(max-width:1050px){
.deterministic-actions{
grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
}
#adminPanel .deterministic-actions #aiSchedule,
#adminPanel .deterministic-actions #aiFindBest{
width:100%;
justify-content:center;
}
}
@media(max-width:720px){
.deterministic-section{padding:16px}
.deterministic-actions{display:flex;flex-direction:column;align-items:stretch}
.deterministic-schedule-stack{width:100%}
#adminPanel .deterministic-actions #aiSchedule,
#adminPanel .deterministic-actions #aiFindBest,
#adminPanel .deterministic-actions #csvBtn{width:100%;justify-content:center}
}
/* v10.11.08 — Deterministische Aktionsbox aufgeräumt: drei Aktionen in einer Zeile,
Dauern pro Person elegant darunter, Schatten wie die KI-Auswertung. */
#adminPanel .deterministic-section{
margin:14px 0 18px;
padding:18px 20px 16px;
border:1px solid rgba(17,24,39,.08);
border-radius:22px;
background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(247,249,252,.97));
box-shadow:0 10px 28px rgba(17,24,39,.07),inset 0 1px 0 rgba(255,255,255,.98);
}
#adminPanel .deterministic-actions{
display:flex;
align-items:stretch;
gap:14px;
flex-wrap:nowrap;
width:100%;
margin:0;
}
#adminPanel .deterministic-actions #aiSchedule,
#adminPanel .deterministic-actions #aiFindBest,
#adminPanel .deterministic-actions #csvBtn{
min-height:52px;
}
#adminPanel .deterministic-actions #aiSchedule,
#adminPanel .deterministic-actions #aiFindBest{
flex:1 1 0;
min-width:0;
justify-content:center;
}
#adminPanel .deterministic-actions #csvBtn{
flex:0 0 auto;
min-width:166px;
padding-left:22px !important;
padding-right:22px !important;
justify-content:center;
}
#adminPanel .lesson-duration-slot{
margin-top:14px;
}
#adminPanel .lesson-duration-info{
margin:0;
max-width:min(760px,100%);
border-radius:18px;
padding:14px 16px;
background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.96));
box-shadow:0 8px 22px rgba(17,24,39,.05),inset 0 1px 0 rgba(255,255,255,.97);
}
#adminPanel .lesson-duration-info .ai-communication-head{
margin-bottom:8px;
}
#adminPanel .lesson-duration-info #lessonDurationInfoBody{
color:#2a3341;
}
#adminPanel .deterministic-status{
margin-top:14px;
}
@media(max-width:960px){
#adminPanel .deterministic-actions{
gap:10px;
}
#adminPanel .deterministic-actions #csvBtn{
min-width:136px;
}
}
@media(max-width:780px){
#adminPanel .deterministic-section{
padding:16px;
}
#adminPanel .deterministic-actions{
flex-direction:column;
align-items:stretch;
}
#adminPanel .deterministic-actions #aiSchedule,
#adminPanel .deterministic-actions #aiFindBest,
#adminPanel .deterministic-actions #csvBtn{
width:100%;
min-width:0;
justify-content:center;
}
}
/* v10.11.09 — KI-Hinweis direkt im Promptfeld; ruhiger Premium-Header. */
#adminPanel .ai-premium .ai-title-line{margin-bottom:14px}
#adminPanel .ai-premium #aiPrompt::placeholder{
color:rgba(82,92,109,.72);
opacity:1;
line-height:1.48;
}
/* v10.11.10 — Gratis-Aktionen Größenlogik wie KI-Aktionen: zwei große Hauptbuttons, ein kompakter CSV-Button. */
#adminPanel .deterministic-section{box-shadow:0 12px 32px rgba(17,24,39,.08),inset 0 1px 0 rgba(255,255,255,.98);}
#adminPanel .deterministic-actions{display:flex;align-items:center;justify-content:flex-start;gap:18px;flex-wrap:nowrap;width:100%;margin:0;}
#adminPanel .deterministic-actions #aiSchedule,
#adminPanel .deterministic-actions #aiFindBest,
#adminPanel .deterministic-actions #csvBtn{min-height:46px;height:auto;}
#adminPanel .deterministic-actions #aiSchedule,
#adminPanel .deterministic-actions #aiFindBest{flex:0 1 auto;min-width:0;width:auto;padding-left:26px !important;padding-right:26px !important;justify-content:center;}
#adminPanel .deterministic-actions #csvBtn{flex:0 0 auto;min-width:0;width:auto;padding-left:26px !important;padding-right:26px !important;justify-content:center;}
#adminPanel .lesson-duration-slot{margin-top:16px;max-width:min(520px,100%);}
#adminPanel .lesson-duration-info{max-width:100%;}
@media(max-width:1180px){#adminPanel .deterministic-actions{gap:12px;}#adminPanel .deterministic-actions #aiSchedule,#adminPanel .deterministic-actions #aiFindBest{padding-left:20px !important;padding-right:20px !important;}#adminPanel .deterministic-actions #csvBtn{padding-left:20px !important;padding-right:20px !important;}}
@media(max-width:900px){#adminPanel .deterministic-actions{flex-wrap:wrap;}#adminPanel .deterministic-actions #aiSchedule,#adminPanel .deterministic-actions #aiFindBest{flex:1 1 calc(50% - 8px);min-width:260px;}#adminPanel .deterministic-actions #csvBtn{flex:0 0 auto;}}
@media(max-width:780px){#adminPanel .deterministic-actions{flex-direction:column;align-items:stretch;gap:10px;}#adminPanel .deterministic-actions #aiSchedule,#adminPanel .deterministic-actions #aiFindBest,#adminPanel .deterministic-actions #csvBtn{width:100%;min-width:0;justify-content:center;}#adminPanel .lesson-duration-slot{max-width:none;}}
/* v10.11.11 — Gratis-Planung: volle Dauer pro Person-Zeile + deterministischer Regel-Builder. */
#adminPanel .lesson-duration-slot{max-width:none;width:100%;margin-top:16px}
#adminPanel .lesson-duration-info{max-width:none;width:100%;box-sizing:border-box}
#adminPanel .schedule-rule-builder{
margin-top:14px;
padding:16px;
border:1px solid rgba(17,24,39,.09);
border-radius:18px;
background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.96));
box-shadow:0 8px 22px rgba(17,24,39,.045),inset 0 1px 0 rgba(255,255,255,.98);
}
#adminPanel .schedule-rule-builder[hidden]{display:none}
.schedule-rule-builder-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.schedule-rule-builder-head>div{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.schedule-rule-builder-head strong{font-size:1rem;color:#1f2937}
.schedule-rule-builder-head span{font-size:.82rem;color:#7b8493}
.schedule-rule-row{display:grid;grid-template-columns:minmax(150px,.9fr) minmax(140px,.85fr) minmax(150px,.9fr) minmax(220px,1.4fr) auto;gap:10px;align-items:end}
.schedule-rule-row>label,.schedule-rule-inline-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.schedule-rule-row label>span,.schedule-rule-inline-field>span{font-size:.76rem;font-weight:800;color:#6b7280}
.schedule-rule-row select,.schedule-rule-row input{
width:100%;min-height:42px;box-sizing:border-box;border:1px solid rgba(17,24,39,.12);border-radius:12px;background:#fff;color:#1f2937;padding:0 11px;font:inherit;
}
.schedule-rule-values{display:flex;gap:8px;align-items:end;min-width:0}
.schedule-rule-values .schedule-rule-inline-field{flex:1 1 0}
.schedule-rule-add{min-height:42px!important;white-space:nowrap!important;padding-left:15px!important;padding-right:15px!important}
.schedule-rule-list{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.schedule-rule-chip{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border:1px solid rgba(17,24,39,.08);border-radius:12px;background:#fff;color:#374151;font-size:.89rem}
.schedule-rule-chip .ghost{width:28px;height:28px;min-width:28px;padding:0;border-radius:9px;font-size:18px;line-height:1}
.schedule-rule-footer{display:flex;justify-content:flex-end;margin-top:12px;padding-top:12px;border-top:1px solid rgba(17,24,39,.07)}
#scheduleRecalculate{min-height:42px;border-radius:999px!important;font-weight:850!important}
#adminPanel .ai-premium #aiIntro{margin:7px 0 0;color:#667085;line-height:1.48}
@media(max-width:1180px){.schedule-rule-row{grid-template-columns:repeat(3,minmax(0,1fr));}.schedule-rule-values{grid-column:1/3}.schedule-rule-add{grid-column:3}}
@media(max-width:780px){.schedule-rule-row{display:flex;flex-direction:column;align-items:stretch}.schedule-rule-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.schedule-rule-add{width:100%}.schedule-rule-footer{justify-content:stretch}#scheduleRecalculate{width:100%}}
/* v10.11.12 — Ruhigere Stundenplan-Zeitachse: feines Raster bleibt, Nebenzeiten verschwinden. */
#aiResultText.schedule-pdf-view .school-real-time.minor{
color:transparent;
font-size:0;
}
#aiResultText.schedule-pdf-view .school-real-time.major{
color:#151b27;
font-weight:800;
}
/* v10.11.13 — Gratis-Stundenplan Live-Editor + klare Trennung vom Termin-Finder. */
#adminPanel .lesson-duration-slot[hidden]{display:none!important}
#adminPanel .schedule-quick-editor{margin-top:14px}
#adminPanel .schedule-quick-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
#adminPanel .schedule-quick-head strong{font-size:1rem;color:#1f2937}
#adminPanel .schedule-quick-head span{font-size:.82rem;color:#7b8493}
#adminPanel .schedule-quick-row{display:grid;grid-template-columns:minmax(135px,.8fr) minmax(210px,1.2fr) minmax(210px,1.2fr) minmax(175px,1fr) minmax(155px,.9fr);gap:10px;align-items:end}
#adminPanel .schedule-quick-row>label{display:flex;flex-direction:column;gap:5px;min-width:0}
#adminPanel .schedule-quick-row>label>span{font-size:.76rem;font-weight:800;color:#6b7280}
#adminPanel .schedule-quick-row select,
#adminPanel .schedule-quick-row input{width:100%;min-height:42px;box-sizing:border-box;border:1px solid rgba(17,24,39,.12);border-radius:12px;background:#fff;color:#1f2937;padding:0 11px;font:inherit}
#adminPanel .schedule-quick-combo>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:center}
#adminPanel .schedule-quick-combo input[type=time]{width:106px}
#adminPanel .schedule-quick-combo input[hidden]{display:none!important}
#adminPanel .schedule-advanced-toggle-row{display:flex;justify-content:flex-start;margin-top:12px;padding-top:10px;border-top:1px solid rgba(17,24,39,.07)}
#adminPanel .schedule-advanced-toggle{padding:6px 8px;font-weight:800;color:#566173}
#adminPanel .schedule-advanced-panel{margin-top:10px}
#adminPanel .schedule-advanced-panel[hidden]{display:none!important}
@media(max-width:1180px){#adminPanel .schedule-quick-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:780px){#adminPanel .schedule-quick-row{display:flex;flex-direction:column;align-items:stretch}#adminPanel .schedule-quick-combo>div{grid-template-columns:minmax(0,1fr) 112px}}
/* v10.11.15 — CSV im Gratis-Aktionsbereich rechtsbündig. */
@media(min-width:781px){
#adminPanel .deterministic-actions #csvBtn{
margin-left:auto !important;
}
}
@media(max-width:780px){
#adminPanel .deterministic-actions #csvBtn{
margin-left:0 !important;
}
}
/* v10.11.14 — Neuer deterministischer Stundenplan-Editor: Tage, globale Regeln, individuelle Regeln. */
#adminPanel .schedule-settings-editor{
margin-top:14px;
padding:18px;
border:1px solid rgba(17,24,39,.08);
border-radius:20px;
background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(248,250,252,.97));
box-shadow:0 8px 24px rgba(17,24,39,.055),inset 0 1px 0 rgba(255,255,255,.98);
}
#adminPanel .schedule-settings-head{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
margin-bottom:14px;
}
#adminPanel .schedule-settings-head strong{font-size:1.05rem;color:#1f2937}
#adminPanel .schedule-settings-head span{font-size:.84rem;color:#7b8493}
#adminPanel .schedule-settings-card{
padding:15px 16px;
border:1px solid rgba(17,24,39,.075);
border-radius:16px;
background:rgba(255,255,255,.82);
}
#adminPanel .schedule-settings-card+.schedule-settings-card{margin-top:12px}
#adminPanel .schedule-settings-card-title{
display:flex;
align-items:baseline;
gap:10px;
flex-wrap:wrap;
margin-bottom:11px;
}
#adminPanel .schedule-settings-card-title strong{font-size:.92rem;color:#273244}
#adminPanel .schedule-settings-card-title span{font-size:.78rem;color:#8a93a2}
#adminPanel .schedule-day-toggles{display:flex;gap:8px;flex-wrap:wrap}
#adminPanel .schedule-day-toggle{
min-width:74px;
min-height:40px;
padding:0 14px;
border:1px solid rgba(17,24,39,.11);
border-radius:999px;
background:linear-gradient(180deg,#fff,#f3f6f9);
color:#4b5563;
font:inherit;
font-weight:800;
cursor:pointer;
transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,background .15s ease,color .15s ease;
}
#adminPanel .schedule-day-toggle.is-active{
color:#176b43;
border-color:rgba(25,135,84,.24);
background:linear-gradient(180deg,rgba(241,252,246,.98),rgba(229,247,237,.98));
box-shadow:inset 0 0 0 1px rgba(25,135,84,.08);
}
@media(hover:hover) and (pointer:fine){
#adminPanel .schedule-day-toggle:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(17,24,39,.08)}
}
#adminPanel .schedule-sentence-list{display:flex;flex-direction:column;gap:9px}
#adminPanel .schedule-sentence-row{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
min-height:44px;
color:#374151;
}
#adminPanel .schedule-sentence-prefix{min-width:136px;font-weight:750;color:#303a49}
#adminPanel .schedule-sentence-row select,
#adminPanel .schedule-sentence-row input,
#adminPanel .schedule-individual-row select,
#adminPanel .schedule-individual-row input{
min-height:40px;
box-sizing:border-box;
border:1px solid rgba(17,24,39,.12);
border-radius:11px;
background:#fff;
color:#1f2937;
padding:0 10px;
font:inherit;
}
#adminPanel .schedule-sentence-row select{min-width:146px}
#adminPanel .schedule-sentence-row input[type=time]{width:118px}
#adminPanel .schedule-sentence-row input[type=number]{width:88px}
#adminPanel .schedule-sentence-pause .schedule-sentence-prefix{min-width:64px}
#adminPanel .schedule-individual-row{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
}
#adminPanel .schedule-individual-row select{min-width:126px}
#adminPanel .schedule-individual-row input[type=time]{width:118px}
#adminPanel .schedule-individual-add{
min-height:40px!important;
border-radius:999px!important;
padding:0 16px!important;
font-weight:850!important;
}
#adminPanel .schedule-rule-list{display:flex;flex-direction:column;gap:7px;margin-top:12px}
#adminPanel .schedule-rule-chip{padding:10px 12px;border-radius:12px;background:#fff}
@media(max-width:850px){
#adminPanel .schedule-settings-editor{padding:14px}
#adminPanel .schedule-settings-card{padding:13px}
#adminPanel .schedule-sentence-row{align-items:stretch}
#adminPanel .schedule-sentence-prefix{width:100%;min-width:0}
#adminPanel .schedule-sentence-pause .schedule-sentence-prefix{width:100%;min-width:0}
#adminPanel .schedule-sentence-row select{flex:1 1 180px;min-width:0}
#adminPanel .schedule-sentence-row input[type=time]{flex:0 0 118px}
#adminPanel .schedule-individual-row{align-items:stretch}
#adminPanel .schedule-individual-row select{flex:1 1 150px;min-width:0}
}
@media(max-width:560px){
#adminPanel .schedule-day-toggles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
#adminPanel .schedule-day-toggle{width:100%}
#adminPanel .schedule-sentence-row{display:grid;grid-template-columns:1fr 1fr;gap:7px}
#adminPanel .schedule-sentence-prefix{grid-column:1/-1}
#adminPanel .schedule-sentence-row>span:not(.schedule-sentence-prefix){align-self:center}
#adminPanel .schedule-sentence-row select,
#adminPanel .schedule-sentence-row input[type=time],
#adminPanel .schedule-sentence-row input[type=number]{width:100%;min-width:0}
#adminPanel .schedule-individual-row{display:grid;grid-template-columns:1fr 1fr}
#adminPanel .schedule-individual-row>span{align-self:center}
#adminPanel .schedule-individual-row select,
#adminPanel .schedule-individual-row input[type=time],
#adminPanel .schedule-individual-add{width:100%;min-width:0}
#adminPanel .schedule-individual-add{grid-column:1/-1}
}
/* v10.11.15 — Individuelle Stundenplanregeln: Start/Ende plus zwei eigenständige Pausenzeilen. */
#adminPanel .schedule-individual-card .schedule-individual-row + .schedule-individual-row{
margin-top:10px;
padding-top:10px;
border-top:1px solid rgba(17,24,39,.07);
}
#adminPanel .schedule-individual-pause-row{
min-height:44px;
}
#adminPanel .schedule-individual-pause-row input[type=number]{
width:88px;
min-height:40px;
box-sizing:border-box;
border:1px solid rgba(17,24,39,.12);
border-radius:11px;
background:#fff;
color:#1f2937;
padding:0 10px;
font:inherit;
}
#adminPanel .schedule-individual-pause-row select{
min-width:132px;
}
@media(max-width:850px){
#adminPanel .schedule-individual-pause-row input[type=number]{flex:0 0 88px}
}
@media(max-width:560px){
#adminPanel .schedule-individual-pause-row input[type=number]{width:100%;min-width:0}
}
/* v10.11.21 — Stundenplan anpassen standardmässig kompakt einklappbar; KI-Header ohne Titel. */
#adminPanel .schedule-settings-editor{padding:0;overflow:hidden;}
#adminPanel .schedule-settings-toggle{
appearance:none;width:100%;min-height:58px;border:0;background:transparent;color:#172033;
display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 17px;
text-align:left;font:inherit;cursor:pointer;border-radius:16px;transition:background .16s ease;
}
#adminPanel .schedule-settings-toggle>span{display:flex;align-items:baseline;gap:10px;min-width:0;flex-wrap:wrap;}
#adminPanel .schedule-settings-toggle strong{font-size:1rem;font-weight:850;}
#adminPanel .schedule-settings-toggle small{font-size:.82rem;font-weight:600;color:rgba(72,82,98,.65);}
#adminPanel .schedule-settings-toggle i{position:relative;width:18px;height:18px;flex:0 0 18px;}
#adminPanel .schedule-settings-toggle i::before,#adminPanel .schedule-settings-toggle i::after{content:"";position:absolute;left:3px;right:3px;top:8px;height:2px;border-radius:2px;background:#7b8492;transition:transform .18s ease;}
#adminPanel .schedule-settings-toggle i::after{transform:rotate(90deg);}
#adminPanel .schedule-settings-toggle.is-open i::after{transform:rotate(0deg);}
#adminPanel .schedule-settings-toggle:hover{background:rgba(17,24,39,.035);}
#adminPanel .schedule-settings-body{padding:0 14px 14px;}
#adminPanel .schedule-settings-body[hidden]{display:none!important;}
#adminPanel .ai-title-line.ai-title-line-badge-only{margin-bottom:14px;min-height:32px;}
#adminPanel .ai-title-line.ai-title-line-badge-only .credit-badge{margin:0;}
@media(max-width:560px){
#adminPanel .schedule-settings-toggle{padding:14px;}
#adminPanel .schedule-settings-toggle>span{align-items:flex-start;flex-direction:column;gap:3px;}
#adminPanel .schedule-settings-body{padding:0 10px 10px;}
}
/* v10.11.22 — Statuszeilen Gratis/Premium bewusst identisch und klein. */
#adminPanel .ai-status-row .ai-status,
#adminPanel .deterministic-status{
font-size:12px !important;
line-height:1.35;
font-weight:650 !important;
color:rgba(82,92,109,.72) !important;
letter-spacing:0;
}
#adminPanel .deterministic-status{min-height:0;}
/* v10.11.22 — Individuelle Regeln: Aktion konsequent unterhalb der Eingabezeile. */
#adminPanel .schedule-individual-rule-block{
padding:0;
}
#adminPanel .schedule-individual-rule-block + .schedule-individual-rule-block{
margin-top:14px;
padding-top:14px;
border-top:1px solid rgba(17,24,39,.07);
}
#adminPanel .schedule-individual-action-row{
display:flex;
justify-content:flex-start;
align-items:center;
margin-top:10px;
}
#adminPanel .schedule-individual-action-row .schedule-individual-add{
width:auto !important;
min-width:0 !important;
min-height:40px !important;
padding:0 18px !important;
}
/* Die alten Trenner zwischen direkten .schedule-individual-row-Geschwistern werden durch Rule-Blocks ersetzt. */
#adminPanel .schedule-individual-card .schedule-individual-row + .schedule-individual-row{
margin-top:0;
padding-top:0;
border-top:0;
}
@media(max-width:560px){
#adminPanel .schedule-individual-action-row .schedule-individual-add{
width:auto !important;
max-width:100%;
}
}
/* v10.11.18 — Gratis-Aktionsbox: Buttons vertikal sauber mittig im oberen Bereich. */
#adminPanel .deterministic-section{
display:flex;
flex-direction:column;
justify-content:center;
row-gap:14px;
min-height:136px;
padding-top:22px;
padding-bottom:22px;
}
#adminPanel .deterministic-actions{
align-items:center;
}
#adminPanel .deterministic-actions #aiSchedule,
#adminPanel .deterministic-actions #aiFindBest,
#adminPanel .deterministic-actions #csvBtn{
display:inline-flex;
align-items:center;
justify-content:center;
align-self:center;
margin-top:0;
margin-bottom:0;
line-height:1.1 !important;
}
#adminPanel .deterministic-section > :first-child{margin-top:0}
#adminPanel .deterministic-section > :last-child{margin-bottom:0}
@media(max-width:780px){
#adminPanel .deterministic-section{
min-height:0;
padding-top:16px;
padding-bottom:16px;
}
}
/* v10.11.24 — Aufgeräumte Stundenplan-Einstellungen + einklappbare abweichende Tagesregeln. */
#adminPanel .schedule-global-card{padding-top:15px;}
#adminPanel .schedule-individual-collapsible{padding:0;overflow:hidden;}
#adminPanel .schedule-settings-subtoggle{
appearance:none;width:100%;min-height:52px;border:0;background:transparent;color:#273244;
display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 15px;
text-align:left;font:inherit;cursor:pointer;border-radius:16px;transition:background .16s ease;
}
#adminPanel .schedule-settings-subtoggle>span{display:flex;align-items:center;min-width:0;}
#adminPanel .schedule-settings-subtoggle strong{font-size:.92rem;font-weight:850;}
#adminPanel .schedule-settings-subtoggle i{position:relative;width:18px;height:18px;flex:0 0 18px;}
#adminPanel .schedule-settings-subtoggle i::before,
#adminPanel .schedule-settings-subtoggle i::after{content:"";position:absolute;left:3px;right:3px;top:8px;height:2px;border-radius:2px;background:#7b8492;transition:transform .18s ease;}
#adminPanel .schedule-settings-subtoggle i::after{transform:rotate(90deg);}
#adminPanel .schedule-settings-subtoggle.is-open i::after{transform:rotate(0deg);}
#adminPanel .schedule-settings-subtoggle:hover{background:rgba(17,24,39,.035);}
#adminPanel .schedule-individual-body{padding:0 15px 15px;}
#adminPanel .schedule-individual-body[hidden]{display:none!important;}
#adminPanel .schedule-individual-body .schedule-individual-rule-block:first-child{padding-top:2px;}
/* v10.11.26 — Gratis-Aktionsbox kompakter: leere Slots kollabieren, kein unnötiger Unterraum. */
#adminPanel .deterministic-section{
min-height:0;
padding-top:18px;
padding-bottom:18px;
row-gap:12px;
justify-content:flex-start;
}
#adminPanel .lesson-duration-slot{
margin-top:0;
}
#adminPanel .lesson-duration-slot:has(.lesson-duration-info[hidden]){
display:none;
}
@media(max-width:780px){
#adminPanel .deterministic-section{
padding-top:14px;
padding-bottom:14px;
row-gap:10px;
}
}
/* v10.11.28 — Gratis-Aktionsbox: exakt symmetrischer Abstand um die Button-Zeile. */
#adminPanel .deterministic-section{
padding-top:18px;
padding-bottom:18px;
}
#adminPanel .deterministic-status:empty,
#adminPanel #deterministicResultHost:empty{
display:none;
}
@media(max-width:780px){
#adminPanel .deterministic-section{
padding-top:14px;
padding-bottom:14px;
}
}
/* V157 — frei definierbare Pause mit Von-bis-Zeitfenster. */
#adminPanel .schedule-sentence-pause input[type="time"]{min-width:112px;}
#adminPanel .schedule-individual-pause-row input[type="time"]{min-width:108px;}
@media(max-width:1100px){
#adminPanel .schedule-sentence-row{flex-wrap:wrap;}
#adminPanel .schedule-individual-row{flex-wrap:wrap;}
}
/* V170: ältere Tagesregeln derselben Familie bleiben sichtbar, sind aber klar als überschrieben markiert. */
#adminPanel .schedule-rule-chip.is-overridden{opacity:.58}
#adminPanel .schedule-rule-chip.is-overridden > span{text-decoration:line-through;text-decoration-thickness:1px}
/* V170 — klare On/Off-Semantik für globale Stundenplanregeln. */
.schedule-rule-switch{position:relative;flex:0 0 auto;width:42px;height:24px;border:0;border-radius:999px;background:#cbd2dc;padding:0;cursor:pointer;transition:background .16s ease,box-shadow .16s ease}
.schedule-rule-switch>span{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(28,39,57,.28);transition:transform .16s ease}
.schedule-rule-switch.is-on{background:#2f7de1}
.schedule-rule-switch.is-on>span{transform:translateX(18px)}
.schedule-rule-switch:focus-visible{outline:3px solid rgba(47,125,225,.28);outline-offset:2px}
.schedule-sentence-row.is-rule-off> :not(.schedule-rule-switch){opacity:.42}
.schedule-sentence-row.is-rule-off select,.schedule-sentence-row.is-rule-off input{pointer-events:none}
@media (max-width:760px){.schedule-rule-switch{width:40px;height:23px}.schedule-rule-switch>span{width:17px;height:17px}.schedule-rule-switch.is-on>span{transform:translateX(17px)}}
/* V176 / 9.4.279 — Datumszeile bleibt einzeilig, damit „+ Datum hinzufügen“
nach dem ersten Eintrag an derselben Stelle unter der ersten Kartenzeile bleibt.
Weitere Daten laufen horizontal statt die Schaltfläche nach unten zu verschieben. */
#createForm #dates{
display:flex!important;
flex-wrap:nowrap!important;
gap:10px!important;
align-items:flex-start!important;
overflow-x:auto;
overflow-y:hidden;
width:100%;
max-width:100%;
padding:0 0 4px;
margin:10px 0 12px;
scrollbar-width:thin;
-webkit-overflow-scrolling:touch;
}
#createForm #dates > .date-dimension{
flex:0 0 calc((100% - 40px)/5);
width:calc((100% - 40px)/5);
min-width:0;
}
@media(max-width:800px){
#createForm #dates > .date-dimension{
flex-basis:calc((100% - 10px)/2);
width:calc((100% - 10px)/2);
}
}
@media(max-width:560px){
/* V182 — Mobile: Datums-Karten untereinander statt horizontaler Ein-Karten-Ansicht.
Neue Karten landen direkt oberhalb von „+ Datum hinzufügen“. */
#createForm #dates{
flex-direction:column!important;
overflow:visible;
width:100%;
max-width:none;
padding-bottom:0;
}
#createForm #dates > .date-dimension{
flex:0 0 auto;
width:100%;
}
}
/* V183 / 9.4.286 — Stundenplan anpassen: ruhiger, direkter Regel-Editor ohne Popup-Zwang. */
#adminPanel .schedule-settings-editor{
border-color:rgba(25,37,58,.07);
border-radius:22px;
background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%);
box-shadow:0 18px 50px rgba(31,45,68,.055),inset 0 1px 0 #fff;
}
#adminPanel .schedule-settings-toggle{
min-height:66px;
padding:18px 22px;
}
#adminPanel .schedule-settings-toggle strong{
font-size:1.12rem;
letter-spacing:-.015em;
}
#adminPanel .schedule-settings-body{
padding:0 18px 18px;
}
#adminPanel .schedule-settings-card{
padding:20px;
border:1px solid rgba(25,37,58,.075);
border-radius:20px;
background:rgba(255,255,255,.96);
box-shadow:0 8px 24px rgba(31,45,68,.035);
}
#adminPanel .schedule-settings-card + .schedule-settings-card{margin-top:16px}
#adminPanel .schedule-section-heading{
display:flex;
align-items:flex-start;
gap:12px;
margin-bottom:16px;
}
#adminPanel .schedule-section-heading-inline{margin:0;align-items:center;min-width:0}
#adminPanel .schedule-section-step{
display:inline-flex;
align-items:center;
justify-content:center;
width:32px;
height:32px;
flex:0 0 32px;
border-radius:50%;
background:#e8f3f0;
color:#0f766e;
font-size:.88rem;
font-weight:900;
}
#adminPanel .schedule-settings-card-title{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:3px;
margin:0;
}
#adminPanel .schedule-settings-card-title strong,
#adminPanel .schedule-section-heading-copy strong{
font-size:1rem;
line-height:1.25;
font-weight:900;
color:#172033;
letter-spacing:-.01em;
}
#adminPanel .schedule-settings-card-title span,
#adminPanel .schedule-section-heading-copy small{
font-size:.79rem;
line-height:1.35;
font-weight:600;
color:#858f9f;
}
#adminPanel .schedule-section-heading-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
#adminPanel .schedule-day-toggles{gap:9px}
#adminPanel .schedule-day-toggle{
min-width:86px;
min-height:42px;
padding:0 17px;
border-color:#dfe4eb;
background:#f8fafc;
color:#505b6c;
box-shadow:none;
}
#adminPanel .schedule-day-toggle.is-active{
color:#176c45;
border-color:#b8e0ca;
background:#edf9f2;
box-shadow:inset 0 0 0 1px rgba(24,126,78,.045);
}
#adminPanel .schedule-sentence-list{gap:10px}
#adminPanel .schedule-rule-card{
position:relative;
display:flex;
align-items:center;
gap:10px;
min-height:64px;
padding:11px 13px;
border:1px solid #e7eaf0;
border-radius:16px;
background:#fff;
color:#3b4657;
box-shadow:0 3px 12px rgba(29,43,64,.025);
transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
@media(hover:hover) and (pointer:fine){
#adminPanel .schedule-rule-card:not([hidden]):hover{
border-color:#d9e1eb;
box-shadow:0 8px 22px rgba(29,43,64,.055);
}
}
#adminPanel .schedule-rule-card[hidden]{display:none!important}
#adminPanel .schedule-rule-icon{
width:36px;
height:36px;
flex:0 0 36px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:12px;
font-size:18px;
font-weight:800;
}
#adminPanel .schedule-rule-icon-start{background:#fff5db;color:#d89300}
#adminPanel .schedule-rule-icon-end{background:#f0edff;color:#6359ce}
#adminPanel .schedule-rule-icon-lunch{background:#eef9f2;color:#23825b}
#adminPanel .schedule-rule-icon-window{background:#e8f3f0;color:#0f766e}
#adminPanel .schedule-rule-icon-recurring{background:#e8f3f0;color:#0f766e}
#adminPanel .schedule-rule-card .schedule-sentence-prefix{
min-width:164px;
font-weight:900;
color:#263246;
}
#adminPanel .schedule-rule-card select,
#adminPanel .schedule-rule-card input{
min-height:42px;
border-color:#dfe4eb;
border-radius:12px;
background:#fafbfd;
box-shadow:inset 0 1px 2px rgba(31,45,68,.025);
}
#adminPanel .schedule-rule-card select:focus,
#adminPanel .schedule-rule-card input:focus,
#adminPanel .schedule-individual-row select:focus,
#adminPanel .schedule-individual-row input:focus{
outline:none;
border-color:#6bb0a5;
box-shadow:0 0 0 3px rgba(47,125,225,.12);
}
#adminPanel .schedule-rule-card .schedule-joiner{color:#596578;font-weight:650}
#adminPanel .schedule-rule-switch{
width:40px;
height:23px;
background:#d6dce5;
box-shadow:inset 0 1px 2px rgba(31,45,68,.08);
}
#adminPanel .schedule-rule-switch>span{width:17px;height:17px}
#adminPanel .schedule-rule-switch.is-on{background:#16865a}
#adminPanel .schedule-rule-switch.is-on>span{transform:translateX(17px)}
#adminPanel .schedule-sentence-row.is-rule-off{background:#fafbfc}
#adminPanel .schedule-sentence-row.is-rule-off> :not(.schedule-rule-switch){opacity:.43}
#adminPanel .schedule-inline-advanced{
margin-left:auto;
position:relative;
}
#adminPanel .schedule-inline-advanced summary{
list-style:none;
cursor:pointer;
min-height:34px;
display:inline-flex;
align-items:center;
padding:0 10px;
border-radius:10px;
color:#8a93a2;
font-size:.75rem;
font-weight:800;
user-select:none;
}
#adminPanel .schedule-inline-advanced summary::-webkit-details-marker{display:none}
#adminPanel .schedule-inline-advanced summary::after{content:'›';margin-left:5px;transform:rotate(90deg);font-size:15px}
#adminPanel .schedule-inline-advanced[open] summary{background:#f1f5f9;color:#596578}
#adminPanel .schedule-inline-advanced select{margin-top:7px;min-width:118px}
#adminPanel .schedule-rule-adders{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin-top:12px;
padding:13px 14px;
border-radius:15px;
background:#f7f9fc;
border:1px solid #edf0f4;
}
#adminPanel .schedule-rule-adders[hidden]{display:none!important}
#adminPanel .schedule-rule-adders-copy{display:flex;flex-direction:column;gap:2px;min-width:160px}
#adminPanel .schedule-rule-adders-copy strong{font-size:.82rem;color:#374255}
#adminPanel .schedule-rule-adders-copy span{font-size:.72rem;color:#929baa}
#adminPanel .schedule-rule-adders-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
#adminPanel .schedule-add-rule{
appearance:none;
border:1px solid #dfe6ef;
border-radius:11px;
background:#fff;
color:#0f766e;
min-height:38px;
padding:0 13px;
font:inherit;
font-size:.78rem;
font-weight:850;
cursor:pointer;
}
#adminPanel .schedule-add-rule:hover{background:#f4faf8;border-color:#b8d8d1}
#adminPanel .schedule-add-rule[hidden]{display:none!important}
#adminPanel .schedule-individual-collapsible{padding:0;overflow:hidden}
#adminPanel .schedule-settings-subtoggle{
min-height:76px;
padding:17px 20px;
border-radius:20px;
}
#adminPanel .schedule-settings-subtoggle>span:first-child{flex:1}
#adminPanel .schedule-add-exception-label{
margin-left:auto;
min-height:38px;
display:inline-flex;
align-items:center;
padding:0 14px;
border-radius:11px;
background:#edf5ff;
color:#2d73ca;
font-size:.78rem;
font-weight:900;
white-space:nowrap;
}
#adminPanel .schedule-settings-subtoggle i{display:none}
#adminPanel .schedule-rule-list{
gap:8px;
margin:0;
padding:0 20px 18px;
}
#adminPanel .schedule-rule-chip{
min-height:54px;
padding:10px 12px;
border-color:#e8ebf0;
border-radius:14px;
background:#fff;
box-shadow:0 2px 8px rgba(29,43,64,.02);
}
#adminPanel .schedule-rule-chip>span{font-size:.82rem;font-weight:720;color:#354155}
#adminPanel .schedule-rule-chip .ghost{color:#9aa3b0;background:#f7f8fa;border:0}
#adminPanel .schedule-individual-body{
padding:0 20px 20px;
border-top:1px solid #eef0f3;
}
#adminPanel .schedule-individual-intro{
padding:15px 0 4px;
color:#8b95a4;
font-size:.78rem;
font-weight:650;
}
#adminPanel .schedule-individual-rule-block{
padding:14px 0 0;
}
#adminPanel .schedule-individual-rule-block + .schedule-individual-rule-block{
margin-top:12px;
padding-top:14px;
border-top:1px solid #eef0f3;
}
#adminPanel .schedule-individual-row{
gap:8px;
color:#536073;
font-size:.86rem;
}
#adminPanel .schedule-individual-row select,
#adminPanel .schedule-individual-row input{
min-height:40px;
border-color:#e0e5ec;
border-radius:11px;
background:#fafbfd;
}
#adminPanel .schedule-individual-action-row{margin-top:9px}
#adminPanel .schedule-individual-action-row .schedule-individual-add{
min-height:38px!important;
border-radius:11px!important;
padding:0 13px!important;
border-color:#dce6f2!important;
background:#f6faff!important;
color:#2e73c8!important;
font-size:.78rem!important;
box-shadow:none!important;
}
@media(max-width:900px){
#adminPanel .schedule-rule-card{flex-wrap:wrap}
#adminPanel .schedule-rule-card .schedule-sentence-prefix{min-width:145px}
#adminPanel .schedule-rule-adders{align-items:flex-start;flex-direction:column}
#adminPanel .schedule-rule-adders-actions{justify-content:flex-start}
}
@media(max-width:620px){
#adminPanel .schedule-settings-editor{border-radius:20px}
#adminPanel .schedule-settings-toggle{min-height:58px;padding:15px 16px}
#adminPanel .schedule-settings-toggle strong{font-size:1rem}
#adminPanel .schedule-settings-body{padding:0 10px 10px}
#adminPanel .schedule-settings-card{padding:15px;border-radius:17px}
#adminPanel .schedule-section-heading{gap:10px;margin-bottom:13px}
#adminPanel .schedule-section-step{width:28px;height:28px;flex-basis:28px;font-size:.79rem}
#adminPanel .schedule-settings-card-title strong,
#adminPanel .schedule-section-heading-copy strong{font-size:.93rem}
#adminPanel .schedule-settings-card-title span,
#adminPanel .schedule-section-heading-copy small{font-size:.73rem}
#adminPanel .schedule-day-toggles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#adminPanel .schedule-day-toggle{min-width:0;width:100%;min-height:40px;padding:0 9px;font-size:.86rem}
#adminPanel .schedule-rule-card{
display:grid;
grid-template-columns:40px 38px minmax(0,1fr);
gap:8px;
padding:11px;
min-height:0;
}
#adminPanel .schedule-rule-card .schedule-rule-switch{grid-column:1;grid-row:1;align-self:center}
#adminPanel .schedule-rule-card .schedule-rule-icon{grid-column:2;grid-row:1;width:34px;height:34px;flex-basis:34px}
#adminPanel .schedule-rule-card .schedule-sentence-prefix{grid-column:3;grid-row:1;min-width:0;width:auto;align-self:center;font-size:.9rem}
#adminPanel .schedule-rule-card select,
#adminPanel .schedule-rule-card input[type=time],
#adminPanel .schedule-rule-card input[type=number],
#adminPanel .schedule-rule-card .schedule-joiner,
#adminPanel .schedule-rule-card .schedule-inline-advanced{
grid-column:auto;
}
#adminPanel .schedule-rule-card select{min-width:0;width:100%}
#adminPanel .schedule-rule-card input[type=time],
#adminPanel .schedule-rule-card input[type=number]{width:100%;min-width:0}
#adminPanel .schedule-rule-card > :nth-child(n+4){grid-row:auto}
#adminPanel .schedule-rule-card > select:first-of-type{grid-column:1/3}
#adminPanel .schedule-rule-card .schedule-joiner{align-self:center;text-align:center;font-size:.78rem}
#adminPanel .schedule-inline-advanced{margin-left:0;grid-column:1/-1!important}
#adminPanel .schedule-inline-advanced summary{padding-left:0}
#adminPanel .schedule-rule-adders{padding:11px;margin-top:10px}
#adminPanel .schedule-rule-adders-copy span{display:none}
#adminPanel .schedule-rule-adders-actions{display:grid;grid-template-columns:1fr;width:100%}
#adminPanel .schedule-add-rule{width:100%;text-align:left;padding:0 12px}
#adminPanel .schedule-settings-subtoggle{min-height:70px;padding:14px 15px;align-items:center}
#adminPanel .schedule-add-exception-label{width:34px;height:34px;min-height:34px;padding:0;justify-content:center;font-size:0;border-radius:10px}
#adminPanel .schedule-add-exception-label::before{content:'+';font-size:20px;line-height:1}
#adminPanel .schedule-rule-list{padding:0 15px 15px}
#adminPanel .schedule-rule-chip{min-height:50px}
#adminPanel .schedule-rule-chip>span{font-size:.77rem;line-height:1.35}
#adminPanel .schedule-individual-body{padding:0 15px 15px}
#adminPanel .schedule-individual-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#adminPanel .schedule-individual-row>span{align-self:center;font-size:.78rem}
#adminPanel .schedule-individual-row select,
#adminPanel .schedule-individual-row input[type=time],
#adminPanel .schedule-individual-row input[type=number]{width:100%;min-width:0}
#adminPanel .schedule-individual-row .schedule-inline-advanced{grid-column:1/-1}
#adminPanel .schedule-individual-action-row .schedule-individual-add{width:100%!important}
}
/* V184 – vereinfachte Pausenbearbeitung */
#adminPanel .schedule-hidden-control{display:none!important}
#adminPanel .schedule-window-remove{
appearance:none;
width:34px;
height:34px;
flex:0 0 34px;
display:inline-flex;
align-items:center;
justify-content:center;
border:0;
border-radius:10px;
background:#f7f8fa;
color:#8e98a7;
font:800 20px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
cursor:pointer;
}
#adminPanel .schedule-window-remove:hover{background:#fff0f0;color:#c94a4a}
#adminPanel [data-extra-window-pause] .schedule-rule-icon{margin-left:50px}
@media(max-width:620px){
#adminPanel [data-extra-window-pause]{grid-template-columns:38px minmax(0,1fr)}
#adminPanel [data-extra-window-pause] .schedule-rule-icon{grid-column:1;grid-row:1;margin-left:0}
#adminPanel [data-extra-window-pause] .schedule-sentence-prefix{grid-column:2;grid-row:1}
#adminPanel [data-extra-window-pause] .schedule-window-remove{grid-column:2;justify-self:end;grid-row:1}
}
/* V185 – Stundenplan-Editor weiter reduziert: Tage + Kernregeln + optionale Regeln */
#adminPanel .schedule-section-heading-plain{margin-bottom:14px}
#adminPanel .schedule-section-heading-plain .schedule-settings-card-title strong{font-size:1rem}
#adminPanel .schedule-global-card{padding-top:18px}
#adminPanel .schedule-global-card .schedule-sentence-list{gap:10px}
/* Start, Ende und Mittagspause bilden immer die sichtbare Grundausstattung. */
#adminPanel [data-schedule-rule-row="lunch"]{display:flex}
#adminPanel [data-schedule-rule-row="lunch"][hidden]{display:flex!important}
/* Optionale Aktionen: drei gleichwertige, ruhige Add-Buttons. */
#adminPanel .schedule-rule-adders{align-items:center}
#adminPanel .schedule-rule-adders-actions{align-items:center}
#adminPanel .schedule-add-rule.schedule-add-exception{
border-color:#cfe3de;
background:#f4faf8;
color:#0f766e;
}
#adminPanel .schedule-add-rule.schedule-add-exception:hover{background:#e8f3f0;border-color:#b8d8d1}
/* Tages-/Datumsabweichungen erscheinen nur noch als modaler Editor. */
#adminPanel .schedule-exception-modal[hidden]{display:none!important}
#adminPanel .schedule-exception-modal.is-modal-open{
display:block!important;
position:fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:min(900px,calc(100vw - 36px));
max-height:min(820px,calc(100vh - 44px));
overflow:auto;
z-index:1200;
margin:0;
padding:0;
border-radius:22px;
border:1px solid #e0e6ee;
background:#fff;
box-shadow:0 28px 90px rgba(20,31,49,.24),0 0 0 9999px rgba(18,27,41,.28);
}
html.schedule-exception-open{overflow:hidden}
#adminPanel .schedule-exception-modal-head{
position:sticky;
top:0;
z-index:2;
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
padding:20px 22px 16px;
border-bottom:1px solid #edf0f4;
background:rgba(255,255,255,.97);
backdrop-filter:blur(14px);
}
#adminPanel .schedule-exception-modal-head>div{display:flex;flex-direction:column;gap:4px}
#adminPanel .schedule-exception-modal-head strong{font-size:1.02rem;color:#253145}
#adminPanel .schedule-exception-modal-head small{font-size:.76rem;color:#8a94a3;font-weight:650}
#adminPanel .schedule-exception-close{
appearance:none;
width:38px;
height:38px;
flex:0 0 38px;
border:0;
border-radius:12px;
background:#f3f5f8;
color:#657184;
font:inherit;
font-size:1.45rem;
line-height:1;
cursor:pointer;
}
#adminPanel .schedule-exception-close:hover{background:#e9edf2;color:#334054}
#adminPanel .schedule-exception-modal .schedule-rule-list{padding:16px 22px 0}
#adminPanel .schedule-exception-modal .schedule-individual-body{padding:0 22px 22px;border-top:0}
#adminPanel .schedule-exception-modal .schedule-individual-intro{padding:18px 0 2px;font-size:.8rem}
#adminPanel .schedule-exception-modal .schedule-individual-rule-block{
margin-top:12px;
padding:14px;
border:1px solid #edf0f4;
border-radius:15px;
background:#fbfcfe;
}
#adminPanel .schedule-exception-modal .schedule-individual-rule-block + .schedule-individual-rule-block{
margin-top:10px;
padding-top:14px;
border-top:1px solid #edf0f4;
}
@media(max-width:620px){
#adminPanel .schedule-section-heading-plain{margin-bottom:12px}
#adminPanel .schedule-global-card{padding-top:13px}
#adminPanel .schedule-rule-adders-actions{display:grid;grid-template-columns:1fr;width:100%}
#adminPanel .schedule-exception-modal.is-modal-open{
left:0;
right:0;
top:auto;
bottom:0;
transform:none;
width:100%;
max-height:88vh;
border-radius:22px 22px 0 0;
border-left:0;
border-right:0;
border-bottom:0;
}
#adminPanel .schedule-exception-modal-head{padding:17px 16px 14px}
#adminPanel .schedule-exception-modal .schedule-rule-list{padding:14px 15px 0}
#adminPanel .schedule-exception-modal .schedule-individual-body{padding:0 15px 18px}
#adminPanel .schedule-exception-modal .schedule-individual-rule-block{padding:12px}
}
/* V186 – optionale Regeln: Ausschalten ist nicht Löschen; vereinfachter Tages-/Datumsdialog */
#adminPanel .schedule-optional-remove{margin-left:auto}
#adminPanel [data-extra-window-pause] .schedule-rule-icon{margin-left:0}
#adminPanel [data-extra-window-pause].is-rule-off,
#adminPanel .schedule-rule-chip.is-rule-off{opacity:.58}
#adminPanel [data-extra-window-pause].is-rule-off input,
#adminPanel [data-extra-window-pause].is-rule-off select{opacity:.72}
#adminPanel .schedule-individual-summary-list{
display:flex;
flex-direction:column;
gap:8px;
margin-top:12px;
padding:0;
}
#adminPanel .schedule-individual-summary-list[hidden]{display:none!important}
#adminPanel .schedule-individual-summary-list .schedule-rule-chip{
display:grid;
grid-template-columns:46px minmax(0,1fr) 34px;
align-items:center;
gap:10px;
min-height:56px;
padding:9px 11px;
border:1px solid #e7ebf0;
border-radius:14px;
background:#fff;
}
#adminPanel .schedule-rule-chip .schedule-rule-switch{justify-self:start}
#adminPanel .schedule-rule-chip-text{min-width:0;font-size:.81rem;font-weight:760;color:#354155;line-height:1.35}
#adminPanel .schedule-rule-chip-delete{justify-self:end}
#adminPanel .schedule-exception-type-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
padding:20px 0 6px;
}
#adminPanel .schedule-exception-type{
appearance:none;
min-height:88px;
border:1px solid #e2e7ee;
border-radius:16px;
background:#fff;
color:#2d394c;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:8px;
font:inherit;
cursor:pointer;
box-shadow:0 3px 12px rgba(31,45,65,.025);
}
#adminPanel .schedule-exception-type>span{
width:34px;height:34px;border-radius:11px;background:#e8f3f0;color:#0f766e;
display:inline-flex;align-items:center;justify-content:center;font-size:1rem;
}
#adminPanel .schedule-exception-type strong{font-size:.9rem}
#adminPanel .schedule-exception-type:hover,
#adminPanel .schedule-exception-type.is-active{border-color:#a8cec5;background:#f4faf8;color:#176b5b}
#adminPanel .schedule-exception-editor[hidden]{display:none!important}
#adminPanel .schedule-exception-modal .schedule-exception-editor{margin-top:12px}
@media(max-width:620px){
#adminPanel .schedule-optional-remove{grid-column:3;grid-row:1;justify-self:end;margin-left:0}
#adminPanel [data-extra-window-pause]{grid-template-columns:40px 38px minmax(0,1fr)}
#adminPanel [data-extra-window-pause] .schedule-rule-switch{grid-column:1;grid-row:1}
#adminPanel [data-extra-window-pause] .schedule-rule-icon{grid-column:2;grid-row:1}
#adminPanel [data-extra-window-pause] .schedule-sentence-prefix{grid-column:3;grid-row:1}
#adminPanel [data-extra-window-pause] .schedule-window-remove{grid-column:3;grid-row:1;justify-self:end}
#adminPanel .schedule-exception-type-grid{gap:8px;padding-top:16px}
#adminPanel .schedule-exception-type{min-height:76px;border-radius:14px}
#adminPanel .schedule-individual-summary-list .schedule-rule-chip{grid-template-columns:44px minmax(0,1fr) 32px}
}
/* V187 / 9.4.290 — Planungsstil: kompakt ↔ ausgewogen. */
.schedule-planning-style{padding:2px 2px 18px;margin:0 0 8px;border-bottom:1px solid rgba(17,24,39,.07)}
.schedule-planning-style-control{display:grid;grid-template-columns:auto minmax(180px,420px) auto;align-items:center;gap:14px;max-width:620px;color:#313743;font-size:14px;font-weight:750}
.schedule-planning-style-control input[type="range"]{width:100%;height:28px;margin:0;accent-color:#111827;cursor:pointer}
.schedule-planning-style-control input[type="range"]::-webkit-slider-runnable-track{height:5px;border-radius:999px;background:linear-gradient(90deg,#111827 0%,#8fa79b 48%,#d8e9df 100%)}
.schedule-planning-style-control input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid #111827;box-shadow:0 2px 8px rgba(17,24,39,.2);margin-top:-7.5px}
.schedule-planning-style-control input[type="range"]::-moz-range-track{height:5px;border:0;border-radius:999px;background:linear-gradient(90deg,#111827 0%,#8fa79b 48%,#d8e9df 100%)}
.schedule-planning-style-control input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #111827;box-shadow:0 2px 8px rgba(17,24,39,.2)}
@media(max-width:620px){.schedule-planning-style-control{grid-template-columns:auto 1fr auto;gap:10px;max-width:none}.schedule-planning-style-control{font-size:13px}.schedule-planning-style{padding-bottom:14px}}
/* V188 / 9.4.291 — Tagesregel-Dialog wirklich am Viewport verankern. */
body > #scheduleExceptionModal[hidden]{display:none!important}
body > #scheduleExceptionModal.is-modal-open{
display:block!important;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
width:min(900px,calc(100vw - 36px));max-height:min(820px,calc(100dvh - 44px));overflow:auto;
z-index:5000;margin:0;padding:0;border-radius:22px;border:1px solid #e0e6ee;background:#fff;
box-shadow:0 28px 90px rgba(20,31,49,.24),0 0 0 9999px rgba(18,27,41,.28);
}
body > #scheduleExceptionModal .schedule-exception-modal-head{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:20px 22px 16px;border-bottom:1px solid #edf0f4;background:rgba(255,255,255,.97);backdrop-filter:blur(14px)}
body > #scheduleExceptionModal .schedule-exception-modal-head>div{display:flex;flex-direction:column;gap:4px}
body > #scheduleExceptionModal .schedule-exception-modal-head strong{font-size:1.02rem;color:#253145}
body > #scheduleExceptionModal .schedule-exception-close{appearance:none;width:38px;height:38px;flex:0 0 38px;border:0;border-radius:12px;background:#f3f5f8;color:#657184;font:inherit;font-size:1.45rem;line-height:1;cursor:pointer}
body > #scheduleExceptionModal .schedule-exception-close:hover{background:#e9edf2;color:#334054}
body > #scheduleExceptionModal .schedule-rule-list{padding:16px 22px 0}
body > #scheduleExceptionModal .schedule-individual-body{padding:0 22px 22px;border-top:0}
body > #scheduleExceptionModal .schedule-individual-intro{padding:18px 0 2px;font-size:.8rem}
body > #scheduleExceptionModal .schedule-individual-rule-block{margin-top:12px;padding:14px;border:1px solid #edf0f4;border-radius:15px;background:#fbfcfe}
body > #scheduleExceptionModal .schedule-exception-type-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:20px 0 6px}
body > #scheduleExceptionModal .schedule-exception-type{appearance:none;min-height:88px;border:1px solid #e2e7ee;border-radius:16px;background:#fff;color:#2d394c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font:inherit;cursor:pointer;box-shadow:0 3px 12px rgba(31,45,65,.025)}
body > #scheduleExceptionModal .schedule-exception-type>span{width:34px;height:34px;border-radius:11px;background:#e8f3f0;color:#0f766e;display:inline-flex;align-items:center;justify-content:center;font-size:1rem}
body > #scheduleExceptionModal .schedule-exception-type strong{font-size:.9rem}
body > #scheduleExceptionModal .schedule-exception-type:hover,body > #scheduleExceptionModal .schedule-exception-type.is-active{border-color:#a8cec5;background:#f4faf8;color:#176b5b}
body > #scheduleExceptionModal .schedule-exception-editor[hidden]{display:none!important}
body > #scheduleExceptionModal .schedule-exception-editor{margin-top:12px}
@media(max-width:620px){
body > #scheduleExceptionModal.is-modal-open{left:0;right:0;top:auto;bottom:0;transform:none;width:100%;max-height:88dvh;border-radius:22px 22px 0 0;border-left:0;border-right:0;border-bottom:0}
body > #scheduleExceptionModal .schedule-exception-modal-head{padding:17px 16px 14px}
body > #scheduleExceptionModal .schedule-rule-list{padding:14px 15px 0}
body > #scheduleExceptionModal .schedule-individual-body{padding:0 15px 18px}
body > #scheduleExceptionModal .schedule-individual-rule-block{padding:12px}
body > #scheduleExceptionModal .schedule-exception-type-grid{gap:8px;padding-top:16px}
body > #scheduleExceptionModal .schedule-exception-type{min-height:76px;border-radius:14px}
}
/* V191 / 9.4.294 — Tages-/Datumsregeln direkt, natürlich und inline bearbeiten. */
body > #scheduleExceptionModal .schedule-individual-rule-block{
margin-top:14px;
padding:14px 16px;
border:1px solid #e7ebf1;
border-radius:16px;
background:#fbfcfe;
}
body > #scheduleExceptionModal .schedule-individual-inline-editor{
display:flex;
align-items:center;
flex-wrap:nowrap;
gap:10px;
width:100%;
color:#344054;
font-size:.92rem;
}
body > #scheduleExceptionModal .schedule-individual-inline-editor .schedule-individual-lead{
flex:0 0 auto;
font-weight:800;
color:#253145;
white-space:nowrap;
}
body > #scheduleExceptionModal .schedule-individual-inline-editor > span{
white-space:nowrap;
}
body > #scheduleExceptionModal .schedule-individual-inline-editor select,
body > #scheduleExceptionModal .schedule-individual-inline-editor input{
min-height:42px;
border:1px solid #dfe5ec;
border-radius:12px;
background:#fff;
color:#1f2937;
padding:0 11px;
font:inherit;
box-sizing:border-box;
}
body > #scheduleExceptionModal .schedule-individual-inline-editor select{min-width:140px}
body > #scheduleExceptionModal .schedule-individual-inline-editor input[type=time]{width:126px;flex:0 0 126px}
body > #scheduleExceptionModal .schedule-individual-inline-editor input[type=number]{width:88px;flex:0 0 88px}
body > #scheduleExceptionModal .schedule-individual-inline-add{
margin-left:auto;
min-height:42px!important;
padding:0 18px!important;
border-radius:12px!important;
border-color:#dce6f2!important;
background:#f2f7fd!important;
color:#236bbb!important;
font-weight:850!important;
white-space:nowrap;
box-shadow:none!important;
}
body > #scheduleExceptionModal .schedule-individual-inline-add:hover{background:#e8f2fd!important}
@media(max-width:900px){
body > #scheduleExceptionModal .schedule-individual-inline-editor{flex-wrap:wrap}
body > #scheduleExceptionModal .schedule-individual-inline-add{margin-left:0}
}
@media(max-width:620px){
body > #scheduleExceptionModal .schedule-individual-rule-block{padding:12px}
body > #scheduleExceptionModal .schedule-individual-inline-editor{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:8px;
}
body > #scheduleExceptionModal .schedule-individual-inline-editor .schedule-individual-lead,
body > #scheduleExceptionModal .schedule-individual-inline-editor > span{font-size:.8rem;align-self:center}
body > #scheduleExceptionModal .schedule-individual-inline-editor select,
body > #scheduleExceptionModal .schedule-individual-inline-editor input[type=time],
body > #scheduleExceptionModal .schedule-individual-inline-editor input[type=number]{width:100%;min-width:0;flex:auto}
body > #scheduleExceptionModal .schedule-individual-inline-add{grid-column:1/-1;width:100%!important;margin-left:0}
}
/* V192 / 9.4.295 — Zusatzregeln kompakter: Desktop einzeilig, Tages-/Datumsregeln vor den Add-Buttons. */
@media(min-width:901px){
#adminPanel [data-schedule-rule-row="window"],
#adminPanel [data-extra-window-pause],
#adminPanel [data-schedule-rule-row="recurring"]{
flex-wrap:nowrap;
gap:8px;
min-height:64px;
padding-top:10px;
padding-bottom:10px;
}
#adminPanel [data-schedule-rule-row="window"] .schedule-sentence-prefix,
#adminPanel [data-extra-window-pause] .schedule-sentence-prefix,
#adminPanel [data-schedule-rule-row="recurring"] .schedule-sentence-prefix{
min-width:0;
width:auto;
flex:0 0 auto;
white-space:nowrap;
}
#adminPanel [data-schedule-rule-row="window"] .schedule-joiner,
#adminPanel [data-extra-window-pause] .schedule-joiner,
#adminPanel [data-schedule-rule-row="recurring"] .schedule-joiner{
white-space:nowrap;
flex:0 0 auto;
}
#adminPanel [data-schedule-rule-row="window"] input[type="time"],
#adminPanel [data-extra-window-pause] input[type="time"]{
width:112px;
flex:0 0 112px;
}
#adminPanel [data-schedule-rule-row="window"] select,
#adminPanel [data-extra-window-pause] select,
#adminPanel [data-schedule-rule-row="recurring"] select{
min-width:140px;
width:auto;
flex:0 1 auto;
}
#adminPanel [data-schedule-rule-row="window"] input[type="number"],
#adminPanel [data-extra-window-pause] input[type="number"],
#adminPanel [data-schedule-rule-row="recurring"] input[type="number"]{
width:82px;
flex:0 0 82px;
}
#adminPanel [data-schedule-rule-row="window"] .schedule-window-remove,
#adminPanel [data-extra-window-pause] .schedule-window-remove,
#adminPanel [data-schedule-rule-row="recurring"] .schedule-window-remove{
margin-left:auto;
}
}
#adminPanel .schedule-individual-summary-list{
margin-top:10px;
margin-bottom:10px;
}
#adminPanel .schedule-individual-summary-list + .schedule-rule-adders{
margin-top:0;
}
/* V193 – Tages-/Datumsregeln direkt als kompakte Overrides unter der Hauptregel */
#adminPanel .schedule-sentence-list{gap:10px}
#adminPanel .schedule-rule-adders{margin-top:10px}
#adminPanel .schedule-inline-overrides{
display:flex;
flex-direction:column;
gap:5px;
margin:-5px 12px 0 52px;
}
#adminPanel .schedule-individual-override-row{
display:flex;
align-items:center;
gap:7px;
min-height:44px;
padding:7px 9px;
border:1px solid #e9edf2;
border-left:3px solid #dbe6f3;
border-radius:12px;
background:#fbfcfe;
color:#4a5668;
font-size:.78rem;
line-height:1.2;
box-shadow:0 2px 7px rgba(29,43,64,.018);
}
#adminPanel .schedule-individual-override-row.is-rule-off{opacity:.58}
#adminPanel .schedule-individual-override-row.is-overridden{opacity:.46}
#adminPanel .schedule-individual-override-row.is-overridden .schedule-override-kind{text-decoration:line-through}
#adminPanel .schedule-override-switch{width:34px;height:20px;flex:0 0 34px}
#adminPanel .schedule-override-switch>span{top:3px;left:3px;width:14px;height:14px}
#adminPanel .schedule-override-switch.is-on>span{transform:translateX(14px)}
#adminPanel .schedule-override-arrow{color:#9aa6b6;font-size:.95rem;font-weight:900;margin-left:1px}
#adminPanel .schedule-override-am{font-weight:700;color:#667386}
#adminPanel .schedule-override-colon{margin-left:-4px;color:#667386;font-weight:700}
#adminPanel .schedule-override-kind{font-size:.8rem;color:#344155;font-weight:850;white-space:nowrap}
#adminPanel .schedule-individual-override-row select,
#adminPanel .schedule-individual-override-row input{
min-height:32px;
height:32px;
border:1px solid #e0e5ec;
border-radius:9px;
background:#fff;
color:#334054;
font:inherit;
padding:0 8px;
}
#adminPanel .schedule-individual-override-row select:focus,
#adminPanel .schedule-individual-override-row input:focus{outline:none;border-color:#6bb0a5;box-shadow:0 0 0 3px rgba(47,125,225,.10)}
#adminPanel .schedule-override-scope{width:auto;min-width:104px;font-weight:800}
#adminPanel .schedule-override-mode{min-width:126px}
#adminPanel .schedule-override-time{width:92px}
#adminPanel .schedule-override-duration{min-width:116px}
#adminPanel .schedule-override-minutes{width:64px}
#adminPanel .schedule-override-joiner,#adminPanel .schedule-override-dot{color:#687587;font-weight:650;white-space:nowrap}
#adminPanel .schedule-override-delete{margin-left:auto;width:30px;height:30px;flex-basis:30px;font-size:18px}
#adminPanel .schedule-override-legacy{font-weight:700;color:#536073;min-width:0}
/* Der Auswahl-Dialog ist jetzt wirklich nur die Auswahl Start / Ende / Pause. */
body > #scheduleExceptionModal .schedule-exception-editor{display:none!important}
body > #scheduleExceptionModal .schedule-individual-body{padding-bottom:22px}
body > #scheduleExceptionModal .schedule-exception-type-grid{padding-bottom:20px}
@media(max-width:900px){
#adminPanel .schedule-inline-overrides{margin-left:28px;margin-right:6px}
#adminPanel .schedule-individual-override-row{flex-wrap:wrap}
#adminPanel .schedule-override-delete{margin-left:auto}
}
@media(max-width:620px){
#adminPanel .schedule-inline-overrides{margin:-3px 0 0 12px;gap:6px}
#adminPanel .schedule-individual-override-row{
display:grid;
grid-template-columns:30px 18px auto minmax(82px,1fr) auto;
gap:6px;
padding:8px;
font-size:.76rem;
}
#adminPanel .schedule-override-switch{grid-column:1}
#adminPanel .schedule-override-arrow{grid-column:2}
#adminPanel .schedule-override-am{grid-column:3}
#adminPanel .schedule-override-scope{grid-column:4;min-width:0;width:100%}
#adminPanel .schedule-override-colon{grid-column:5}
#adminPanel .schedule-override-kind{grid-column:2/4;margin-top:2px}
#adminPanel .schedule-individual-override-row .schedule-override-mode{grid-column:4/6;width:100%;min-width:0}
#adminPanel .schedule-individual-override-row .schedule-override-time{width:100%;min-width:0}
#adminPanel .schedule-individual-override-row .schedule-override-duration{min-width:0;width:100%}
#adminPanel .schedule-individual-override-row .schedule-override-minutes{width:100%}
#adminPanel .schedule-override-delete{grid-column:5;grid-row:1;margin:0;justify-self:end}
}
/* v9.4.298 — Ergebnisaktionen: PDF bleibt als letzte Aktion ganz rechts. */
.ai-result-actions .ai-pdf-btn{order:99}
/* v9.4.299 — Pausen-Ausnahmen für einzelne Tage/Daten gesammelt ganz unten. */
#adminPanel .schedule-bottom-pause-overrides{
margin:10px 12px 0 52px;
}
#adminPanel .schedule-bottom-pause-overrides + .schedule-rule-adders{
margin-top:10px;
}
@media(max-width:900px){
#adminPanel .schedule-bottom-pause-overrides{margin-left:28px;margin-right:6px}
}
@media(max-width:620px){
#adminPanel .schedule-bottom-pause-overrides{margin:7px 0 0 12px}
}
/* v211 – klare Hierarchie: Stundenplanumfang → globale Regeln → Tagesregeln */
#adminPanel .schedule-days-card .schedule-settings-card-title{display:flex;flex-direction:column;gap:5px}
#adminPanel .schedule-days-card .schedule-settings-card-title small,
#adminPanel .schedule-subsection-heading small{display:block;color:#8a94a3;font-size:.75rem;font-weight:650;line-height:1.35}
#adminPanel .schedule-subsection-heading{display:flex;flex-direction:column;gap:4px;margin:2px 2px 12px}
#adminPanel .schedule-subsection-heading strong{font-size:.9rem;color:#2f3b4e}
#adminPanel .schedule-global-rules-heading{margin-top:16px;padding-top:16px;border-top:1px solid rgba(17,24,39,.07)}
#adminPanel .schedule-planning-style{padding-bottom:10px;margin-bottom:0;border-bottom:0}
#adminPanel .schedule-rule-adders-global{margin-top:12px}
#adminPanel .schedule-individual-section{margin-top:18px;padding-top:18px;border-top:1px solid rgba(17,24,39,.09)}
#adminPanel .schedule-individual-summary-list{display:flex;flex-direction:column;gap:6px;margin:0 0 10px}
#adminPanel .schedule-individual-summary-list[hidden]{display:none!important}
#adminPanel .schedule-individual-summary-list .schedule-individual-override-row{margin:0}
#adminPanel .schedule-rule-adders-individual{margin-top:8px;padding:0;border:0;background:transparent;box-shadow:none;justify-content:flex-start}
#adminPanel .schedule-rule-adders-individual .schedule-rule-adders-actions{justify-content:flex-start}
@media(max-width:620px){
#adminPanel .schedule-rule-adders-individual .schedule-rule-adders-actions{display:grid;grid-template-columns:1fr;width:100%}
}
/* v213: globale Zusatzregeln wie Einzel-Tages-Regeln darstellen */
#adminPanel .schedule-rule-adders-global{
margin-top:8px;
padding:0;
border:0;
background:transparent;
box-shadow:none;
justify-content:flex-start;
}
#adminPanel .schedule-rule-adders-global .schedule-rule-adders-actions{justify-content:flex-start}
@media (max-width:700px){
#adminPanel .schedule-rule-adders-global{padding:0;margin-top:8px}
#adminPanel .schedule-rule-adders-global .schedule-rule-adders-actions{display:grid;grid-template-columns:1fr;width:100%}
}
/* v215: klarere Erklärung und fünf Stufen für Kompakt ↔ Ausgewogen. */
/* v215: fünf klar definierte Planungsstil-Stufen. */
.schedule-planning-style-readout{margin-top:2px;max-width:620px;text-align:center;color:#7b8798;font-size:.78rem;font-weight:750;letter-spacing:.01em}
@media(max-width:620px){.schedule-planning-style-readout{font-size:.74rem}}
/* v220 – globale Regeln deutlich kompakter und mobiltauglicher. */
#adminPanel .schedule-global-card .schedule-subsection-heading{margin-bottom:10px}
#adminPanel .schedule-global-card .schedule-global-rules-heading{margin-top:12px;padding-top:12px}
#adminPanel .schedule-global-card .schedule-sentence-list{gap:8px}
#adminPanel .schedule-global-card .schedule-rule-card,
#adminPanel .schedule-global-card [data-extra-window-pause]{
min-height:54px;
padding:9px 10px;
gap:8px;
border-radius:14px;
}
#adminPanel .schedule-global-card .schedule-rule-icon,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-icon{
width:32px;
height:32px;
flex:0 0 32px;
border-radius:10px;
font-size:16px;
}
#adminPanel .schedule-global-card .schedule-rule-switch,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-switch{
width:38px;
height:22px;
}
#adminPanel .schedule-global-card .schedule-rule-switch>span,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-switch>span{
width:16px;height:16px;top:3px;left:3px;
}
#adminPanel .schedule-global-card .schedule-rule-switch.is-on>span,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-switch.is-on>span{transform:translateX(16px)}
#adminPanel .schedule-global-card .schedule-rule-card .schedule-sentence-prefix,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-sentence-prefix{
min-width:128px;
width:auto;
font-size:.84rem;
line-height:1.15;
}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] .schedule-sentence-prefix,
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] .schedule-sentence-prefix,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-sentence-prefix{min-width:72px}
#adminPanel .schedule-global-card .schedule-rule-card select,
#adminPanel .schedule-global-card .schedule-rule-card input,
#adminPanel .schedule-global-card [data-extra-window-pause] select,
#adminPanel .schedule-global-card [data-extra-window-pause] input{
min-height:38px;
height:38px;
padding:0 10px;
border-radius:10px;
font-size:.88rem;
}
#adminPanel .schedule-global-card .schedule-rule-card select,
#adminPanel .schedule-global-card [data-extra-window-pause] select{min-width:124px}
#adminPanel .schedule-global-card .schedule-rule-card input[type=time],
#adminPanel .schedule-global-card [data-extra-window-pause] input[type=time]{width:100px;flex:0 0 100px}
#adminPanel .schedule-global-card .schedule-rule-card input[type=number],
#adminPanel .schedule-global-card [data-extra-window-pause] input[type=number]{width:72px;flex:0 0 72px}
#adminPanel .schedule-global-card .schedule-rule-card .schedule-joiner,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-joiner{
white-space:nowrap;
font-size:.78rem;
color:#667386;
}
#adminPanel .schedule-global-card .schedule-rule-adders-global{margin-top:8px}
#adminPanel .schedule-global-card .schedule-rule-adders-global .schedule-add-rule{min-height:38px;padding:0 12px;font-size:.84rem}
@media(max-width:980px){
#adminPanel .schedule-global-card .schedule-rule-card,
#adminPanel .schedule-global-card [data-extra-window-pause]{
flex-wrap:wrap;
}
#adminPanel .schedule-global-card .schedule-rule-card .schedule-sentence-prefix,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-sentence-prefix{
flex:1 1 calc(100% - 84px);
min-width:0;
}
#adminPanel .schedule-global-card .schedule-rule-card select,
#adminPanel .schedule-global-card [data-extra-window-pause] select{flex:1 1 128px;min-width:0}
#adminPanel .schedule-global-card .schedule-rule-card input[type=time],
#adminPanel .schedule-global-card [data-extra-window-pause] input[type=time]{flex:1 1 96px;width:auto;min-width:0}
#adminPanel .schedule-global-card .schedule-rule-card input[type=number],
#adminPanel .schedule-global-card [data-extra-window-pause] input[type=number]{flex:0 0 68px}
#adminPanel .schedule-global-card .schedule-rule-card .schedule-window-remove,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-window-remove{margin-left:auto}
}
@media(max-width:620px){
#adminPanel .schedule-global-card .schedule-rule-card,
#adminPanel .schedule-global-card [data-extra-window-pause]{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:7px;
min-height:0;
padding:9px;
}
#adminPanel .schedule-global-card .schedule-rule-card .schedule-rule-switch,
#adminPanel .schedule-global-card .schedule-rule-card .schedule-rule-icon,
#adminPanel .schedule-global-card .schedule-rule-card .schedule-sentence-prefix,
#adminPanel .schedule-global-card .schedule-rule-card select,
#adminPanel .schedule-global-card .schedule-rule-card input[type=time],
#adminPanel .schedule-global-card .schedule-rule-card input[type=number],
#adminPanel .schedule-global-card .schedule-rule-card .schedule-joiner,
#adminPanel .schedule-global-card .schedule-rule-card .schedule-window-remove,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-switch,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-icon,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-sentence-prefix,
#adminPanel .schedule-global-card [data-extra-window-pause] select,
#adminPanel .schedule-global-card [data-extra-window-pause] input[type=time],
#adminPanel .schedule-global-card [data-extra-window-pause] input[type=number],
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-joiner,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-window-remove{grid-column:auto;grid-row:auto}
#adminPanel .schedule-global-card .schedule-rule-card .schedule-sentence-prefix,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-sentence-prefix{
width:auto;
flex:1 1 calc(100% - 78px);
min-width:0;
font-size:.85rem;
}
#adminPanel .schedule-global-card .schedule-rule-card select,
#adminPanel .schedule-global-card [data-extra-window-pause] select{flex:1 1 118px;min-width:0;width:auto}
#adminPanel .schedule-global-card .schedule-rule-card input[type=time],
#adminPanel .schedule-global-card [data-extra-window-pause] input[type=time]{flex:1 1 88px;min-width:0;width:auto}
#adminPanel .schedule-global-card .schedule-rule-card input[type=number],
#adminPanel .schedule-global-card [data-extra-window-pause] input[type=number]{flex:0 0 64px;min-width:0;width:auto}
#adminPanel .schedule-global-card .schedule-rule-card .schedule-joiner,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-joiner{font-size:.74rem}
#adminPanel .schedule-global-card .schedule-rule-adders-global .schedule-rule-adders-actions{display:grid;grid-template-columns:1fr;width:100%}
#adminPanel .schedule-global-card .schedule-rule-adders-global .schedule-add-rule{width:100%;text-align:left}
}
/* v221 – globale Regeln noch kompakter; Mittagspause mit Modus sichtbar. */
#adminPanel .schedule-global-card .schedule-rule-card .schedule-sentence-prefix,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-sentence-prefix{
min-width:104px;
font-size:.82rem;
}
#adminPanel .schedule-global-card [data-schedule-rule-row="lunch"] .schedule-sentence-prefix{min-width:104px}
#adminPanel .schedule-global-card [data-schedule-rule-row="lunch"] select{min-width:105px;max-width:126px}
#adminPanel .schedule-global-card [data-schedule-rule-row="lunch"] input[type=number]{width:68px;flex-basis:68px}
#adminPanel .schedule-global-card [data-schedule-rule-row="start"] .schedule-sentence-prefix,
#adminPanel .schedule-global-card [data-schedule-rule-row="end"] .schedule-sentence-prefix{min-width:78px}
#adminPanel .schedule-global-card [data-schedule-rule-row="start"] select,
#adminPanel .schedule-global-card [data-schedule-rule-row="end"] select{min-width:122px;max-width:150px}
#adminPanel .schedule-global-card [data-schedule-rule-row="start"] input[type=time],
#adminPanel .schedule-global-card [data-schedule-rule-row="end"] input[type=time]{width:94px;flex-basis:94px}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] select,
#adminPanel .schedule-global-card [data-extra-window-pause] select{min-width:112px;max-width:132px}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] input[type=time],
#adminPanel .schedule-global-card [data-extra-window-pause] input[type=time]{width:92px;flex-basis:92px}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] select{min-width:110px;max-width:132px}
@media(max-width:620px){
#adminPanel .schedule-global-card .schedule-subsection-heading small{font-size:.72rem;line-height:1.3}
#adminPanel .schedule-global-card .schedule-rule-card,
#adminPanel .schedule-global-card [data-extra-window-pause]{padding:8px;gap:6px}
#adminPanel .schedule-global-card .schedule-rule-icon,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-icon{width:30px;height:30px;flex-basis:30px;font-size:15px}
#adminPanel .schedule-global-card .schedule-rule-switch,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-switch{width:36px;height:21px}
#adminPanel .schedule-global-card .schedule-rule-switch>span,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-switch>span{width:15px;height:15px}
#adminPanel .schedule-global-card .schedule-rule-switch.is-on>span,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-switch.is-on>span{transform:translateX(15px)}
#adminPanel .schedule-global-card .schedule-rule-card .schedule-sentence-prefix,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-sentence-prefix{font-size:.8rem;flex-basis:calc(100% - 72px)}
#adminPanel .schedule-global-card .schedule-rule-card select,
#adminPanel .schedule-global-card .schedule-rule-card input,
#adminPanel .schedule-global-card [data-extra-window-pause] select,
#adminPanel .schedule-global-card [data-extra-window-pause] input{height:36px;min-height:36px;font-size:.84rem;padding:0 8px}
#adminPanel .schedule-global-card [data-schedule-rule-row="start"] select,
#adminPanel .schedule-global-card [data-schedule-rule-row="end"] select{flex:1 1 132px;max-width:none}
#adminPanel .schedule-global-card [data-schedule-rule-row="start"] input[type=time],
#adminPanel .schedule-global-card [data-schedule-rule-row="end"] input[type=time]{flex:0 1 104px;width:auto}
#adminPanel .schedule-global-card [data-schedule-rule-row="lunch"] select{flex:1 1 110px;max-width:none}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] select,
#adminPanel .schedule-global-card [data-extra-window-pause] select{flex:1 1 112px;max-width:none}
#adminPanel .schedule-global-card .schedule-rule-adders-global .schedule-rule-adders-actions{grid-template-columns:1fr 1fr;gap:7px}
#adminPanel .schedule-global-card .schedule-rule-adders-global .schedule-add-rule{font-size:.78rem;padding:0 8px;text-align:center}
}
@media(max-width:420px){
#adminPanel .schedule-global-card .schedule-rule-adders-global .schedule-rule-adders-actions{grid-template-columns:1fr}
#adminPanel .schedule-global-card .schedule-rule-card .schedule-joiner,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-joiner{font-size:.7rem}
}
/* V222 / 9.4.304 — Globale Unterrichtstags-Regeln gleich kompakt wie Tagesregeln. */
#adminPanel .schedule-global-card .schedule-sentence-list{
gap:6px;
}
#adminPanel .schedule-global-card .schedule-rule-card,
#adminPanel .schedule-global-card [data-extra-window-pause]{
min-height:56px;
padding:8px 10px;
gap:8px;
border-radius:14px;
box-shadow:none;
}
#adminPanel .schedule-global-card .schedule-rule-icon,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-icon{
width:32px;
height:32px;
flex:0 0 32px;
border-radius:10px;
font-size:16px;
}
#adminPanel .schedule-global-card .schedule-rule-switch,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-switch{
width:38px;
height:22px;
}
#adminPanel .schedule-global-card .schedule-rule-switch>span,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-switch>span{
width:16px;
height:16px;
}
#adminPanel .schedule-global-card .schedule-rule-switch.is-on>span,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-switch.is-on>span{
transform:translateX(16px);
}
#adminPanel .schedule-global-card .schedule-rule-card .schedule-sentence-prefix,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-sentence-prefix{
min-width:0;
font-size:.8rem;
line-height:1.15;
font-weight:820;
}
#adminPanel .schedule-global-card [data-schedule-rule-row="start"] .schedule-sentence-prefix,
#adminPanel .schedule-global-card [data-schedule-rule-row="end"] .schedule-sentence-prefix,
#adminPanel .schedule-global-card [data-schedule-rule-row="lunch"] .schedule-sentence-prefix{
min-width:118px;
}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] .schedule-sentence-prefix,
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] .schedule-sentence-prefix,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-sentence-prefix{
min-width:62px;
}
#adminPanel .schedule-global-card .schedule-rule-card select,
#adminPanel .schedule-global-card .schedule-rule-card input,
#adminPanel .schedule-global-card [data-extra-window-pause] select,
#adminPanel .schedule-global-card [data-extra-window-pause] input{
min-height:38px;
border-radius:11px;
font-size:.8rem;
}
#adminPanel .schedule-global-card .schedule-rule-card select,
#adminPanel .schedule-global-card [data-extra-window-pause] select{
min-width:112px;
}
#adminPanel .schedule-global-card .schedule-rule-card input[type=time],
#adminPanel .schedule-global-card [data-extra-window-pause] input[type=time]{
width:92px;
flex:0 0 92px;
}
#adminPanel .schedule-global-card .schedule-rule-card input[type=number],
#adminPanel .schedule-global-card [data-extra-window-pause] input[type=number]{
width:64px;
flex:0 0 64px;
}
#adminPanel .schedule-global-card .schedule-rule-card .schedule-joiner,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-joiner{
font-size:.8rem;
line-height:1.1;
}
#adminPanel .schedule-global-card .schedule-rule-adders-global{
margin-top:6px;
}
#adminPanel .schedule-global-card .schedule-rule-adders-global .schedule-add-rule{
min-height:36px;
padding:0 12px;
font-size:.82rem;
border-radius:12px;
}
@media(max-width:920px){
#adminPanel .schedule-global-card .schedule-rule-card,
#adminPanel .schedule-global-card [data-extra-window-pause]{
flex-wrap:wrap;
row-gap:6px;
}
#adminPanel .schedule-global-card .schedule-rule-card select,
#adminPanel .schedule-global-card [data-extra-window-pause] select{
flex:1 1 130px;
min-width:0;
}
#adminPanel .schedule-global-card .schedule-rule-card input[type=time],
#adminPanel .schedule-global-card [data-extra-window-pause] input[type=time]{
flex:1 1 96px;
width:auto;
min-width:0;
}
}
@media(max-width:620px){
#adminPanel .schedule-global-card .schedule-sentence-list{
gap:8px;
}
#adminPanel .schedule-global-card .schedule-rule-card,
#adminPanel .schedule-global-card [data-extra-window-pause]{
min-height:auto;
padding:8px 9px;
display:grid;
grid-template-columns:38px 32px minmax(92px,1fr) minmax(0,1fr);
align-items:center;
column-gap:7px;
row-gap:6px;
}
#adminPanel .schedule-global-card .schedule-rule-switch,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-switch{grid-column:1;grid-row:1}
#adminPanel .schedule-global-card .schedule-rule-icon,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-icon{grid-column:2;grid-row:1}
#adminPanel .schedule-global-card .schedule-rule-card .schedule-sentence-prefix,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-sentence-prefix{grid-column:3 / 5;grid-row:1}
#adminPanel .schedule-global-card .schedule-rule-card select,
#adminPanel .schedule-global-card .schedule-rule-card input[type=time],
#adminPanel .schedule-global-card .schedule-rule-card input[type=number],
#adminPanel .schedule-global-card .schedule-rule-card .schedule-joiner,
#adminPanel .schedule-global-card [data-extra-window-pause] select,
#adminPanel .schedule-global-card [data-extra-window-pause] input[type=time],
#adminPanel .schedule-global-card [data-extra-window-pause] input[type=number],
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-joiner{
grid-column:auto;
grid-row:auto;
width:100%;
min-width:0;
}
#adminPanel .schedule-global-card .schedule-rule-card select,
#adminPanel .schedule-global-card [data-extra-window-pause] select{flex:none}
#adminPanel .schedule-global-card .schedule-rule-card input[type=time],
#adminPanel .schedule-global-card [data-extra-window-pause] input[type=time],
#adminPanel .schedule-global-card .schedule-rule-card input[type=number],
#adminPanel .schedule-global-card [data-extra-window-pause] input[type=number]{flex:none}
#adminPanel .schedule-global-card .schedule-rule-adders-global .schedule-rule-adders-actions{
display:grid;
grid-template-columns:1fr;
gap:8px;
width:100%;
}
#adminPanel .schedule-global-card .schedule-rule-adders-global .schedule-add-rule{
width:100%;
text-align:left;
}
}
/* V225 — Globale Regel-Felder verwenden exakt die kompakte Höhe der Tagesregeln. */
#adminPanel .schedule-global-card .schedule-rule-card,
#adminPanel .schedule-global-card [data-extra-window-pause]{
min-height:44px;
padding:6px 9px;
gap:7px;
}
#adminPanel .schedule-global-card .schedule-rule-card select,
#adminPanel .schedule-global-card .schedule-rule-card input[type="time"],
#adminPanel .schedule-global-card .schedule-rule-card input[type="number"],
#adminPanel .schedule-global-card [data-extra-window-pause] select,
#adminPanel .schedule-global-card [data-extra-window-pause] input[type="time"],
#adminPanel .schedule-global-card [data-extra-window-pause] input[type="number"]{
min-height:32px;
height:32px;
border-radius:9px;
padding-top:0;
padding-bottom:0;
font-size:.78rem;
line-height:30px;
box-sizing:border-box;
}
#adminPanel .schedule-global-card .schedule-rule-icon,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-icon{
width:30px;
height:30px;
flex-basis:30px;
border-radius:9px;
font-size:15px;
}
#adminPanel .schedule-global-card .schedule-rule-switch,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-switch{
width:34px;
height:20px;
}
#adminPanel .schedule-global-card .schedule-rule-switch>span,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-switch>span{
width:14px;
height:14px;
top:3px;
left:3px;
}
#adminPanel .schedule-global-card .schedule-rule-switch.is-on>span,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-switch.is-on>span{
transform:translateX(14px);
}
#adminPanel .schedule-global-card .schedule-rule-card .schedule-sentence-prefix,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-sentence-prefix,
#adminPanel .schedule-global-card .schedule-rule-card .schedule-joiner,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-joiner{
font-size:.78rem;
}
@media(max-width:620px){
#adminPanel .schedule-global-card .schedule-rule-card,
#adminPanel .schedule-global-card [data-extra-window-pause]{padding:7px 8px;row-gap:6px}
#adminPanel .schedule-global-card .schedule-rule-card select,
#adminPanel .schedule-global-card .schedule-rule-card input[type="time"],
#adminPanel .schedule-global-card .schedule-rule-card input[type="number"],
#adminPanel .schedule-global-card [data-extra-window-pause] select,
#adminPanel .schedule-global-card [data-extra-window-pause] input[type="time"],
#adminPanel .schedule-global-card [data-extra-window-pause] input[type="number"]{
min-height:32px;
height:32px;
font-size:.78rem;
}
}
/* V228 — Mobile Darstellung der Stundenplan-Einstellungen: lesbare, kompakte Kontrollzeilen. */
@media(max-width:620px){
#adminPanel .schedule-global-card{padding-left:11px;padding-right:11px}
#adminPanel .schedule-global-card .schedule-sentence-list{gap:8px}
#adminPanel .schedule-global-card .schedule-rule-card,
#adminPanel .schedule-global-card [data-extra-window-pause]{
display:grid;
grid-template-columns:34px 30px minmax(0,1fr) 34px;
gap:7px;
padding:9px;
min-height:0;
align-items:center;
}
#adminPanel .schedule-global-card .schedule-rule-switch,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-switch{grid-column:1;grid-row:1}
#adminPanel .schedule-global-card .schedule-rule-icon,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-icon{grid-column:2;grid-row:1}
#adminPanel .schedule-global-card .schedule-rule-card .schedule-sentence-prefix,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-sentence-prefix{
grid-column:3/5;grid-row:1;min-width:0!important;width:auto!important;font-size:.84rem;
}
/* Start / Ende: Modus vollständig lesbar + Uhrzeit in derselben zweiten Zeile. */
#adminPanel .schedule-global-card [data-schedule-rule-row="start"] select,
#adminPanel .schedule-global-card [data-schedule-rule-row="end"] select{
grid-column:1/3;grid-row:2;width:100%!important;min-width:0!important;
}
#adminPanel .schedule-global-card [data-schedule-rule-row="start"] .schedule-joiner,
#adminPanel .schedule-global-card [data-schedule-rule-row="end"] .schedule-joiner{
grid-column:3;grid-row:2;width:auto!important;text-align:center;
}
#adminPanel .schedule-global-card [data-schedule-rule-row="start"] input[type="time"],
#adminPanel .schedule-global-card [data-schedule-rule-row="end"] input[type="time"]{
grid-column:4;grid-row:2;width:108px!important;min-width:108px!important;justify-self:end;
}
#adminPanel .schedule-global-card [data-schedule-rule-row="start"],
#adminPanel .schedule-global-card [data-schedule-rule-row="end"]{
grid-template-columns:34px 98px minmax(28px,1fr) 108px;
}
/* Mittagspause: Modus + Minuten + Label sauber auf einer Zeile. */
#adminPanel .schedule-global-card [data-schedule-rule-row="lunch"]{
grid-template-columns:34px 30px minmax(100px,1fr) 70px;
}
#adminPanel .schedule-global-card [data-schedule-rule-row="lunch"] #scheduleLunchDurationMode{
display:block!important;grid-column:1/3;grid-row:2;width:100%!important;min-width:0!important;
}
#adminPanel .schedule-global-card [data-schedule-rule-row="lunch"] #scheduleLunchMinutes{
grid-column:3;grid-row:2;width:70px!important;min-width:70px!important;justify-self:end;
}
#adminPanel .schedule-global-card [data-schedule-rule-row="lunch"] .schedule-joiner{
grid-column:4;grid-row:2;width:auto!important;text-align:left;
}
/* Pause im Zeitfenster: Zeitfenster oben, Dauer unten. */
#adminPanel .schedule-global-card [data-schedule-rule-row="window"],
#adminPanel .schedule-global-card [data-extra-window-pause]{
grid-template-columns:minmax(84px,1fr) 18px minmax(84px,1fr) 34px;
}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] .schedule-rule-switch,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-switch{grid-column:1;grid-row:1;justify-self:start}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] .schedule-rule-icon,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-icon{grid-column:1;grid-row:1;margin-left:42px}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] .schedule-sentence-prefix,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-sentence-prefix{grid-column:2/4;grid-row:1;margin-left:22px}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] input[type="time"]:first-of-type,
#adminPanel .schedule-global-card [data-extra-window-pause] input[type="time"]:first-of-type{grid-column:1;grid-row:2;width:100%!important;min-width:0!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] input[type="time"]:nth-of-type(2),
#adminPanel .schedule-global-card [data-extra-window-pause] input[type="time"]:nth-of-type(2){grid-column:3;grid-row:2;width:100%!important;min-width:0!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] .schedule-joiner:first-of-type,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-joiner:first-of-type{grid-column:2;grid-row:2;width:auto!important;text-align:center}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] .schedule-joiner:nth-of-type(2),
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-joiner:nth-of-type(2){display:none}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] select,
#adminPanel .schedule-global-card [data-extra-window-pause] select{grid-column:1/3;grid-row:3;width:100%!important;min-width:0!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] input[type="number"],
#adminPanel .schedule-global-card [data-extra-window-pause] input[type="number"]{grid-column:3;grid-row:3;width:100%!important;min-width:0!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] .schedule-joiner:last-of-type,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-joiner:last-of-type{grid-column:4;grid-row:3;width:auto!important;text-align:left}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] .schedule-window-remove,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-window-remove{grid-column:4;grid-row:1;justify-self:end}
/* Wiederkehrende Pause: keine Mini-Selects; zwei klare Kontrollzeilen. */
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"]{
grid-template-columns:minmax(92px,1fr) auto minmax(72px,1fr) 58px;
}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] .schedule-rule-switch{grid-column:1;grid-row:1;justify-self:start}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] .schedule-rule-icon{grid-column:1;grid-row:1;margin-left:42px}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] .schedule-sentence-prefix{grid-column:2/4;grid-row:1;margin-left:22px}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] #scheduleRecurringMode{grid-column:1;grid-row:2;width:100%!important;min-width:0!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] .schedule-joiner:nth-of-type(1){grid-column:2;grid-row:2;width:auto!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] #scheduleRecurringHours{grid-column:3;grid-row:2;width:100%!important;min-width:0!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] .schedule-joiner:nth-of-type(2){grid-column:4;grid-row:2;width:auto!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] #scheduleRecurringDurationMode{grid-column:1/3;grid-row:3;width:100%!important;min-width:0!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] #scheduleRecurringMinutes{grid-column:3;grid-row:3;width:100%!important;min-width:0!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] .schedule-joiner:nth-of-type(3){grid-column:4;grid-row:3;width:auto!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] .schedule-window-remove{grid-column:4;grid-row:1;justify-self:end}
/* Tagesregeln: Kopf kompakt, Inhalt darunter statt zerstreut über mehrere Zeilen. */
#adminPanel .schedule-individual-override-row{
display:grid;
grid-template-columns:34px 16px auto minmax(112px,1fr) 32px;
gap:7px;
padding:9px;
min-height:0;
}
#adminPanel .schedule-individual-override-row .schedule-override-switch{grid-column:1;grid-row:1}
#adminPanel .schedule-individual-override-row .schedule-override-arrow{grid-column:2;grid-row:1}
#adminPanel .schedule-individual-override-row .schedule-override-am{grid-column:3;grid-row:1}
#adminPanel .schedule-individual-override-row .schedule-override-scope{grid-column:4;grid-row:1;width:100%;min-width:0}
#adminPanel .schedule-individual-override-row .schedule-override-colon{display:none}
#adminPanel .schedule-individual-override-row .schedule-override-delete{grid-column:5;grid-row:1;margin:0;justify-self:end}
#adminPanel .schedule-individual-override-row .schedule-override-kind{grid-column:1/3;grid-row:2;align-self:center;margin:0;text-align:right;padding-right:3px}
#adminPanel .schedule-individual-override-row .schedule-override-mode{grid-column:3/5;grid-row:2;width:100%;min-width:0}
#adminPanel .schedule-individual-override-row .schedule-override-joiner{grid-column:1/3;grid-row:3;text-align:right;padding-right:3px}
#adminPanel .schedule-individual-override-row .schedule-override-time{grid-column:3/5;grid-row:3;width:112px;min-width:112px}
#adminPanel .schedule-individual-override-row:has(.schedule-override-duration) .schedule-override-kind{grid-column:1/3;grid-row:2}
#adminPanel .schedule-individual-override-row:has(.schedule-override-duration) .schedule-override-time:nth-of-type(1){grid-column:3;grid-row:2;width:100%;min-width:0}
#adminPanel .schedule-individual-override-row:has(.schedule-override-duration) .schedule-override-time:nth-of-type(2){grid-column:4;grid-row:2;width:100%;min-width:0}
#adminPanel .schedule-individual-override-row:has(.schedule-override-duration) .schedule-override-dot{display:none}
#adminPanel .schedule-individual-override-row:has(.schedule-override-duration) .schedule-override-duration{grid-column:1/3;grid-row:3;width:100%;min-width:0}
#adminPanel .schedule-individual-override-row:has(.schedule-override-duration) .schedule-override-minutes{grid-column:3;grid-row:3;width:100%;min-width:0}
#adminPanel .schedule-individual-override-row:has(.schedule-override-duration) .schedule-override-joiner:last-of-type{grid-column:4/6;grid-row:3;text-align:left;padding:0}
#adminPanel .schedule-rule-adders-individual .schedule-rule-adders-actions{gap:8px}
#adminPanel .schedule-rule-adders-individual .schedule-add-rule{min-height:42px}
}
/* V230 — fluid responsive polish for schedule settings + AI mobile text. */
#adminPanel .schedule-settings-editor,
#adminPanel .schedule-settings-body,
#adminPanel .schedule-settings-card,
#adminPanel .schedule-global-card,
#adminPanel .schedule-individual-section,
#adminPanel .schedule-sentence-list,
#adminPanel .schedule-rule-card,
#adminPanel .schedule-rule-adders,
#adminPanel .schedule-rule-adders-actions,
#adminPanel .schedule-rule-list,
#adminPanel .schedule-individual-override-row,
#adminPanel .ai-premium,
#adminPanel .ai-prompt-wrap,
#adminPanel .ai-communication,
#adminPanel #aiCommunicationBody,
#adminPanel .ai-result,
#adminPanel #aiResultText{
min-width:0;
max-width:100%;
box-sizing:border-box;
}
/* Add-actions stay visually attached to the left edge at every width. */
#adminPanel .schedule-rule-adders-global,
#adminPanel .schedule-rule-adders-individual{
width:100%;
align-items:flex-start!important;
justify-content:flex-start!important;
}
#adminPanel .schedule-rule-adders-global .schedule-rule-adders-actions,
#adminPanel .schedule-rule-adders-individual .schedule-rule-adders-actions{
display:flex!important;
flex-wrap:wrap!important;
align-items:center!important;
justify-content:flex-start!important;
gap:clamp(6px,1.7vw,10px)!important;
width:100%!important;
}
#adminPanel .schedule-rule-adders-global .schedule-add-rule,
#adminPanel .schedule-rule-adders-individual .schedule-add-rule{
width:auto!important;
max-width:100%;
min-height:clamp(36px,8vw,40px)!important;
padding-inline:clamp(10px,2.5vw,14px)!important;
text-align:left!important;
justify-content:flex-start!important;
white-space:normal;
line-height:1.2;
}
/* Controls scale fluidly instead of jumping between oversized layouts. */
#adminPanel .schedule-global-card .schedule-rule-card select,
#adminPanel .schedule-global-card .schedule-rule-card input[type="time"],
#adminPanel .schedule-global-card .schedule-rule-card input[type="number"],
#adminPanel .schedule-global-card [data-extra-window-pause] select,
#adminPanel .schedule-global-card [data-extra-window-pause] input[type="time"],
#adminPanel .schedule-global-card [data-extra-window-pause] input[type="number"],
#adminPanel .schedule-individual-override-row select,
#adminPanel .schedule-individual-override-row input{
font-size:clamp(.76rem,2.8vw,.82rem);
min-height:clamp(32px,8vw,36px);
height:clamp(32px,8vw,36px);
max-width:100%;
box-sizing:border-box;
}
@media(max-width:760px){
#adminPanel .schedule-settings-body{padding-inline:clamp(6px,2.2vw,10px)}
#adminPanel .schedule-settings-card{padding:clamp(11px,3.5vw,15px)}
#adminPanel .schedule-global-card{padding-inline:clamp(8px,2.8vw,12px)}
#adminPanel .schedule-global-card .schedule-sentence-list{gap:8px}
#adminPanel .schedule-global-card .schedule-rule-card,
#adminPanel .schedule-global-card [data-extra-window-pause]{
width:100%;
min-width:0;
min-height:0;
padding:clamp(7px,2.5vw,10px);
column-gap:clamp(5px,1.7vw,8px);
row-gap:7px;
align-items:center;
overflow:visible;
}
#adminPanel .schedule-global-card .schedule-rule-switch,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-switch{
width:34px!important;height:20px!important;min-width:34px;
}
#adminPanel .schedule-global-card .schedule-rule-icon,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-icon{
width:30px!important;height:30px!important;min-width:30px;flex-basis:30px!important;
}
#adminPanel .schedule-global-card .schedule-rule-card .schedule-sentence-prefix,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-sentence-prefix{
min-width:0!important;
width:auto!important;
font-size:clamp(.8rem,3.4vw,.88rem)!important;
line-height:1.15;
overflow-wrap:anywhere;
}
/* Start / Ende: header + one fluid control row. */
#adminPanel .schedule-global-card [data-schedule-rule-row="start"],
#adminPanel .schedule-global-card [data-schedule-rule-row="end"]{
display:grid!important;
grid-template-columns:34px 30px minmax(0,1fr) auto minmax(92px,108px)!important;
}
#adminPanel .schedule-global-card [data-schedule-rule-row="start"] .schedule-rule-switch,
#adminPanel .schedule-global-card [data-schedule-rule-row="end"] .schedule-rule-switch{grid-column:1;grid-row:1}
#adminPanel .schedule-global-card [data-schedule-rule-row="start"] .schedule-rule-icon,
#adminPanel .schedule-global-card [data-schedule-rule-row="end"] .schedule-rule-icon{grid-column:2;grid-row:1}
#adminPanel .schedule-global-card [data-schedule-rule-row="start"] .schedule-sentence-prefix,
#adminPanel .schedule-global-card [data-schedule-rule-row="end"] .schedule-sentence-prefix{grid-column:3/6;grid-row:1}
#adminPanel .schedule-global-card [data-schedule-rule-row="start"] select,
#adminPanel .schedule-global-card [data-schedule-rule-row="end"] select{
grid-column:1/4!important;grid-row:2!important;width:100%!important;min-width:0!important;max-width:none!important;
}
#adminPanel .schedule-global-card [data-schedule-rule-row="start"] .schedule-joiner,
#adminPanel .schedule-global-card [data-schedule-rule-row="end"] .schedule-joiner{
grid-column:4!important;grid-row:2!important;width:auto!important;text-align:center!important;white-space:nowrap;
}
#adminPanel .schedule-global-card [data-schedule-rule-row="start"] input[type="time"],
#adminPanel .schedule-global-card [data-schedule-rule-row="end"] input[type="time"]{
grid-column:5!important;grid-row:2!important;width:100%!important;min-width:0!important;justify-self:stretch!important;
}
/* Mittagspause: mode + minutes + label, no squeezed controls. */
#adminPanel .schedule-global-card [data-schedule-rule-row="lunch"]{
display:grid!important;
grid-template-columns:34px 30px minmax(0,1fr) minmax(58px,72px) auto!important;
}
#adminPanel .schedule-global-card [data-schedule-rule-row="lunch"] .schedule-rule-switch{grid-column:1;grid-row:1}
#adminPanel .schedule-global-card [data-schedule-rule-row="lunch"] .schedule-rule-icon{grid-column:2;grid-row:1}
#adminPanel .schedule-global-card [data-schedule-rule-row="lunch"] .schedule-sentence-prefix{grid-column:3/6;grid-row:1}
#adminPanel .schedule-global-card [data-schedule-rule-row="lunch"] #scheduleLunchDurationMode{
display:block!important;grid-column:1/4!important;grid-row:2!important;width:100%!important;min-width:0!important;max-width:none!important;
}
#adminPanel .schedule-global-card [data-schedule-rule-row="lunch"] #scheduleLunchMinutes{
grid-column:4!important;grid-row:2!important;width:100%!important;min-width:0!important;
}
#adminPanel .schedule-global-card [data-schedule-rule-row="lunch"] .schedule-joiner{
grid-column:5!important;grid-row:2!important;width:auto!important;white-space:nowrap;text-align:left!important;
}
/* Window pause: header, two times, then duration row. */
#adminPanel .schedule-global-card [data-schedule-rule-row="window"],
#adminPanel .schedule-global-card [data-extra-window-pause]{
display:grid!important;
grid-template-columns:34px 30px minmax(70px,1fr) auto minmax(70px,1fr) 32px!important;
}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] .schedule-rule-switch,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-switch{grid-column:1!important;grid-row:1!important;justify-self:start!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] .schedule-rule-icon,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-icon{grid-column:2!important;grid-row:1!important;margin-left:0!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] .schedule-sentence-prefix,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-sentence-prefix{grid-column:3/6!important;grid-row:1!important;margin-left:0!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] .schedule-window-remove,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-window-remove{grid-column:6!important;grid-row:1!important;justify-self:end!important;margin:0!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] input[type="time"]:first-of-type,
#adminPanel .schedule-global-card [data-extra-window-pause] input[type="time"]:first-of-type{grid-column:1/4!important;grid-row:2!important;width:100%!important;min-width:0!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] .schedule-joiner:first-of-type,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-joiner:first-of-type{grid-column:4!important;grid-row:2!important;width:auto!important;text-align:center!important;display:block!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] input[type="time"]:nth-of-type(2),
#adminPanel .schedule-global-card [data-extra-window-pause] input[type="time"]:nth-of-type(2){grid-column:5/7!important;grid-row:2!important;width:100%!important;min-width:0!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] .schedule-joiner:nth-of-type(2),
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-joiner:nth-of-type(2){display:none!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] select,
#adminPanel .schedule-global-card [data-extra-window-pause] select{grid-column:1/4!important;grid-row:3!important;width:100%!important;min-width:0!important;max-width:none!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] input[type="number"],
#adminPanel .schedule-global-card [data-extra-window-pause] input[type="number"]{grid-column:4/6!important;grid-row:3!important;width:100%!important;min-width:0!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] .schedule-joiner:last-of-type,
#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-joiner:last-of-type{grid-column:6!important;grid-row:3!important;width:auto!important;white-space:nowrap;text-align:left!important}
/* Recurring pause: two clear control rows, fluid at 320px and up. */
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"]{
display:grid!important;
grid-template-columns:34px 30px minmax(0,1fr) auto minmax(58px,72px) 32px!important;
}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] .schedule-rule-switch{grid-column:1!important;grid-row:1!important;justify-self:start!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] .schedule-rule-icon{grid-column:2!important;grid-row:1!important;margin-left:0!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] .schedule-sentence-prefix{grid-column:3/6!important;grid-row:1!important;margin-left:0!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] .schedule-window-remove{grid-column:6!important;grid-row:1!important;justify-self:end!important;margin:0!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] #scheduleRecurringMode{grid-column:1/4!important;grid-row:2!important;width:100%!important;min-width:0!important;max-width:none!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] .schedule-joiner:nth-of-type(1){grid-column:4!important;grid-row:2!important;width:auto!important;white-space:nowrap}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] #scheduleRecurringHours{grid-column:5!important;grid-row:2!important;width:100%!important;min-width:0!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] .schedule-joiner:nth-of-type(2){grid-column:6!important;grid-row:2!important;width:auto!important;white-space:nowrap}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] #scheduleRecurringDurationMode{grid-column:1/4!important;grid-row:3!important;width:100%!important;min-width:0!important;max-width:none!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] #scheduleRecurringMinutes{grid-column:4/6!important;grid-row:3!important;width:100%!important;min-width:0!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] .schedule-joiner:nth-of-type(3){grid-column:6!important;grid-row:3!important;width:auto!important;white-space:nowrap}
/* Individual rules: compact but readable, no clipped select or time fields. */
#adminPanel .schedule-individual-override-row{
width:100%;
min-width:0;
display:grid!important;
grid-template-columns:34px 16px auto minmax(0,1fr) 32px!important;
gap:7px!important;
padding:9px!important;
overflow:visible;
}
#adminPanel .schedule-individual-override-row .schedule-override-switch{grid-column:1!important;grid-row:1!important}
#adminPanel .schedule-individual-override-row .schedule-override-arrow{grid-column:2!important;grid-row:1!important}
#adminPanel .schedule-individual-override-row .schedule-override-am{grid-column:3!important;grid-row:1!important}
#adminPanel .schedule-individual-override-row .schedule-override-scope{grid-column:4!important;grid-row:1!important;width:100%!important;min-width:0!important}
#adminPanel .schedule-individual-override-row .schedule-override-colon{display:none!important}
#adminPanel .schedule-individual-override-row .schedule-override-delete{grid-column:5!important;grid-row:1!important;margin:0!important;justify-self:end!important}
#adminPanel .schedule-individual-override-row .schedule-override-kind{grid-column:1/3!important;grid-row:2!important;text-align:right!important;padding-right:2px!important;margin:0!important;align-self:center}
#adminPanel .schedule-individual-override-row .schedule-override-mode{grid-column:3/6!important;grid-row:2!important;width:100%!important;min-width:0!important}
#adminPanel .schedule-individual-override-row .schedule-override-joiner{grid-column:1/3!important;grid-row:3!important;text-align:right!important;padding-right:2px!important;align-self:center}
#adminPanel .schedule-individual-override-row .schedule-override-time{grid-column:3/6!important;grid-row:3!important;width:min(118px,100%)!important;min-width:0!important}
/* Pause override uses two fluid time fields + one fluid duration row. */
#adminPanel .schedule-individual-override-row:has(.schedule-override-duration) .schedule-override-kind{grid-column:1/3!important;grid-row:2!important}
#adminPanel .schedule-individual-override-row:has(.schedule-override-duration) .schedule-override-time:nth-of-type(1){grid-column:3!important;grid-row:2!important;width:100%!important;min-width:0!important}
#adminPanel .schedule-individual-override-row:has(.schedule-override-duration) .schedule-override-time:nth-of-type(2){grid-column:4/6!important;grid-row:2!important;width:100%!important;min-width:0!important}
#adminPanel .schedule-individual-override-row:has(.schedule-override-duration) .schedule-override-dot{display:none!important}
#adminPanel .schedule-individual-override-row:has(.schedule-override-duration) .schedule-override-duration{grid-column:1/4!important;grid-row:3!important;width:100%!important;min-width:0!important}
#adminPanel .schedule-individual-override-row:has(.schedule-override-duration) .schedule-override-minutes{grid-column:4!important;grid-row:3!important;width:100%!important;min-width:0!important}
#adminPanel .schedule-individual-override-row:has(.schedule-override-duration) .schedule-override-joiner:last-of-type{grid-column:5/6!important;grid-row:3!important;text-align:left!important;padding:0!important;white-space:nowrap}
}
@media(max-width:430px){
#adminPanel .schedule-global-card [data-schedule-rule-row="start"],
#adminPanel .schedule-global-card [data-schedule-rule-row="end"]{
grid-template-columns:34px 30px minmax(0,1fr) auto minmax(88px,96px)!important;
}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"],
#adminPanel .schedule-global-card [data-extra-window-pause]{
grid-template-columns:34px 30px minmax(62px,1fr) auto minmax(62px,1fr) 30px!important;
}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"]{
grid-template-columns:34px 30px minmax(0,1fr) auto minmax(52px,64px) 30px!important;
}
#adminPanel .schedule-rule-adders-global .schedule-rule-adders-actions,
#adminPanel .schedule-rule-adders-individual .schedule-rule-adders-actions{
flex-direction:column!important;
align-items:flex-start!important;
}
#adminPanel .schedule-rule-adders-global .schedule-add-rule,
#adminPanel .schedule-rule-adders-individual .schedule-add-rule{
width:auto!important;
min-width:0!important;
}
}
@media(max-width:350px){
#adminPanel .schedule-settings-card{padding-inline:9px}
#adminPanel .schedule-global-card{padding-inline:7px}
#adminPanel .schedule-global-card .schedule-rule-card,
#adminPanel .schedule-global-card [data-extra-window-pause]{column-gap:5px;padding:7px}
#adminPanel .schedule-global-card [data-schedule-rule-row="start"],
#adminPanel .schedule-global-card [data-schedule-rule-row="end"]{grid-template-columns:34px 28px minmax(0,1fr) auto 88px!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="lunch"]{grid-template-columns:34px 28px minmax(0,1fr) 56px auto!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"],
#adminPanel .schedule-global-card [data-extra-window-pause]{grid-template-columns:34px 28px minmax(54px,1fr) auto minmax(54px,1fr) 28px!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"]{grid-template-columns:34px 28px minmax(0,1fr) auto 52px 28px!important}
#adminPanel .schedule-individual-override-row{grid-template-columns:32px 14px auto minmax(0,1fr) 30px!important;gap:5px!important;padding:7px!important}
}
/* AI evaluation: never clip user prompt/understanding text on narrow phones. */
#adminPanel .ai-premium,
#adminPanel .ai-premium *{box-sizing:border-box}
#adminPanel .ai-premium .ai-prompt-wrap,
#adminPanel .ai-premium #aiPrompt,
#adminPanel .ai-premium .ai-communication,
#adminPanel .ai-premium #aiCommunicationBody,
#adminPanel .ai-premium #aiCommunicationBody p,
#adminPanel .ai-premium #aiCommunicationBody ul,
#adminPanel .ai-premium #aiCommunicationBody li,
#adminPanel .ai-premium .ai-understanding,
#adminPanel .ai-premium #aiUnderstandingBody,
#adminPanel .ai-premium #aiUnderstandingBody li,
#adminPanel .ai-result,
#adminPanel #aiResultText,
#adminPanel #aiResultText p,
#adminPanel #aiResultText li,
#adminPanel .ai-result-question-answer,
#adminPanel .ai-result-question-answer #aiResultQuestionAnswerText{
min-width:0;
max-width:100%;
overflow-wrap:anywhere;
word-break:normal;
}
#adminPanel .ai-premium #aiPrompt{
width:100%!important;
max-width:100%!important;
resize:vertical;
overflow-x:hidden;
white-space:pre-wrap;
}
#adminPanel .ai-premium .ai-communication #aiCommunicationBody p,
#adminPanel .ai-premium .ai-communication #aiCommunicationBody li,
#adminPanel .ai-premium .ai-understanding #aiUnderstandingBody li,
#adminPanel #aiResultText p,
#adminPanel #aiResultText li{
white-space:normal!important;
hyphens:auto;
}
@media(max-width:560px){
#adminPanel .ai-premium{min-width:0;overflow:visible}
#adminPanel .ai-premium .ai-prompt-wrap{width:100%;min-width:0}
#adminPanel .ai-premium #aiPrompt{font-size:clamp(.94rem,4vw,1rem);line-height:1.45;padding-right:46px!important}
#adminPanel .ai-premium .ai-communication{width:100%;padding:11px 12px;margin-inline:0;overflow:hidden}
#adminPanel .ai-premium .ai-communication-head{min-width:0;align-items:flex-start}
#adminPanel .ai-premium .ai-communication-head strong{min-width:0;overflow-wrap:anywhere}
#adminPanel .ai-premium #aiCommunicationBody{font-size:.88rem;line-height:1.42}
#adminPanel .ai-premium #aiCommunicationBody ul,
#adminPanel .ai-premium #aiUnderstandingBody ul{padding-left:18px;margin-right:0}
#adminPanel .ai-premium #aiCommunicationBody li,
#adminPanel .ai-premium #aiUnderstandingBody li{padding-right:0;margin-right:0}
#adminPanel .ai-result{overflow:hidden}
#adminPanel #aiResultText{font-size:.92rem;line-height:1.45}
}
/* V232 / 10.11.41 — Stundenplan-Einstellungen: container-responsive, kompakte Controls,
sichere Delete-Touchziele. Nur Darstellung; Solver-/Regellogik bleibt unverändert. */
#adminPanel .schedule-settings-editor{
--zf-rule-control-h:38px;
--zf-rule-radius:11px;
--zf-rule-gap:8px;
--zf-rule-delete:38px;
}
#adminPanel .schedule-global-card,
#adminPanel .schedule-individual-section{container-type:inline-size}
#adminPanel .schedule-global-card .schedule-rule-card,
#adminPanel .schedule-global-card [data-extra-window-pause],
#adminPanel .schedule-individual-override-row{overflow:visible!important;min-width:0!important;box-sizing:border-box!important}
#adminPanel .schedule-global-card .schedule-rule-card select,
#adminPanel .schedule-global-card .schedule-rule-card input[type="time"],
#adminPanel .schedule-global-card .schedule-rule-card input[type="number"],
#adminPanel .schedule-global-card [data-extra-window-pause] select,
#adminPanel .schedule-global-card [data-extra-window-pause] input[type="time"],
#adminPanel .schedule-global-card [data-extra-window-pause] input[type="number"],
#adminPanel .schedule-individual-override-row select,
#adminPanel .schedule-individual-override-row input{
min-height:var(--zf-rule-control-h)!important;height:var(--zf-rule-control-h)!important;border-radius:var(--zf-rule-radius)!important;
padding-inline:10px!important;font-size:.82rem!important;line-height:1.1!important;box-sizing:border-box!important
}
/* Desktop/tablet: content-sized controls instead of stretched pills. */
#adminPanel .schedule-global-card [data-schedule-rule-row="start"] select,
#adminPanel .schedule-global-card [data-schedule-rule-row="end"] select{width:148px!important;min-width:148px!important;max-width:148px!important;flex:0 0 148px!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="start"] input[type="time"],
#adminPanel .schedule-global-card [data-schedule-rule-row="end"] input[type="time"]{width:106px!important;min-width:106px!important;max-width:106px!important;flex:0 0 106px!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="lunch"] #scheduleLunchDurationMode{width:124px!important;min-width:124px!important;max-width:124px!important;flex:0 0 124px!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="lunch"] #scheduleLunchMinutes{width:70px!important;min-width:70px!important;max-width:70px!important;flex:0 0 70px!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] input[type="time"],
#adminPanel .schedule-global-card [data-extra-window-pause] input[type="time"]{width:104px!important;min-width:104px!important;max-width:104px!important;flex:0 0 104px!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] select,
#adminPanel .schedule-global-card [data-extra-window-pause] select{width:138px!important;min-width:138px!important;max-width:138px!important;flex:0 0 138px!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] input[type="number"],
#adminPanel .schedule-global-card [data-extra-window-pause] input[type="number"]{width:66px!important;min-width:66px!important;max-width:66px!important;flex:0 0 66px!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] #scheduleRecurringMode,
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] #scheduleRecurringDurationMode{width:132px!important;min-width:132px!important;max-width:132px!important;flex:0 0 132px!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] #scheduleRecurringHours,
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] #scheduleRecurringMinutes{width:64px!important;min-width:64px!important;max-width:64px!important;flex:0 0 64px!important}
/* Delete remains a real touch target even while a rule is off. */
#adminPanel .schedule-window-remove,#adminPanel .schedule-optional-remove,#adminPanel .schedule-override-delete{
width:var(--zf-rule-delete)!important;height:var(--zf-rule-delete)!important;min-width:var(--zf-rule-delete)!important;min-height:var(--zf-rule-delete)!important;
flex:0 0 var(--zf-rule-delete)!important;position:relative!important;z-index:8!important;pointer-events:auto!important;touch-action:manipulation!important;-webkit-tap-highlight-color:transparent
}
#adminPanel .schedule-sentence-row.is-rule-off .schedule-window-remove,
#adminPanel .schedule-sentence-row.is-rule-off .schedule-optional-remove{opacity:.72!important;pointer-events:auto!important}
/* Add actions stay left and compact. */
#adminPanel .schedule-rule-adders-global,#adminPanel .schedule-rule-adders-individual{justify-content:flex-start!important;align-items:flex-start!important}
#adminPanel .schedule-rule-adders-global .schedule-rule-adders-actions,
#adminPanel .schedule-rule-adders-individual .schedule-rule-adders-actions{width:100%!important;display:flex!important;flex-wrap:wrap!important;justify-content:flex-start!important;align-items:center!important;gap:8px!important}
#adminPanel .schedule-rule-adders-global .schedule-add-rule,
#adminPanel .schedule-rule-adders-individual .schedule-add-rule{width:auto!important;min-width:0!important;min-height:38px!important;height:auto!important;padding:8px 12px!important;line-height:1.15!important;white-space:normal!important}
@container (max-width:620px){
#adminPanel .schedule-global-card .schedule-sentence-list{gap:8px!important}
#adminPanel .schedule-global-card .schedule-rule-card,#adminPanel .schedule-global-card [data-extra-window-pause]{padding:9px!important;gap:7px!important;min-height:0!important;border-radius:14px!important}
#adminPanel .schedule-global-card .schedule-rule-switch,#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-switch{width:36px!important;height:21px!important;min-width:36px!important}
#adminPanel .schedule-global-card .schedule-rule-switch>span,#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-switch>span{width:15px!important;height:15px!important;top:3px!important;left:3px!important}
#adminPanel .schedule-global-card .schedule-rule-switch.is-on>span,#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-switch.is-on>span{transform:translateX(15px)!important}
#adminPanel .schedule-global-card .schedule-rule-icon,#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-icon{width:31px!important;height:31px!important;min-width:31px!important;flex-basis:31px!important;border-radius:10px!important}
#adminPanel .schedule-global-card .schedule-rule-card .schedule-sentence-prefix,#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-sentence-prefix{font-size:.86rem!important;line-height:1.15!important;min-width:0!important;width:auto!important}
/* Start / End */
#adminPanel .schedule-global-card [data-schedule-rule-row="start"],#adminPanel .schedule-global-card [data-schedule-rule-row="end"]{display:grid!important;grid-template-columns:36px 31px minmax(0,1fr) auto 106px!important;column-gap:7px!important;row-gap:8px!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="start"] .schedule-rule-switch,#adminPanel .schedule-global-card [data-schedule-rule-row="end"] .schedule-rule-switch{grid-column:1!important;grid-row:1!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="start"] .schedule-rule-icon,#adminPanel .schedule-global-card [data-schedule-rule-row="end"] .schedule-rule-icon{grid-column:2!important;grid-row:1!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="start"] .schedule-sentence-prefix,#adminPanel .schedule-global-card [data-schedule-rule-row="end"] .schedule-sentence-prefix{grid-column:3/6!important;grid-row:1!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="start"] select,#adminPanel .schedule-global-card [data-schedule-rule-row="end"] select{grid-column:1/4!important;grid-row:2!important;justify-self:start!important;width:clamp(122px,42cqi,148px)!important;min-width:0!important;max-width:148px!important;flex:none!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="start"] .schedule-joiner-um,#adminPanel .schedule-global-card [data-schedule-rule-row="end"] .schedule-joiner-um{grid-column:4!important;grid-row:2!important;width:auto!important;justify-self:center!important;white-space:nowrap!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="start"] input[type="time"],#adminPanel .schedule-global-card [data-schedule-rule-row="end"] input[type="time"]{grid-column:5!important;grid-row:2!important;width:106px!important;min-width:106px!important;max-width:106px!important;justify-self:start!important;flex:none!important}
/* Lunch */
#adminPanel .schedule-global-card [data-schedule-rule-row="lunch"]{display:grid!important;grid-template-columns:36px 31px minmax(0,1fr) 70px auto!important;column-gap:7px!important;row-gap:8px!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="lunch"] .schedule-rule-switch{grid-column:1!important;grid-row:1!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="lunch"] .schedule-rule-icon{grid-column:2!important;grid-row:1!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="lunch"] .schedule-sentence-prefix{grid-column:3/6!important;grid-row:1!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="lunch"] #scheduleLunchDurationMode{display:block!important;grid-column:1/4!important;grid-row:2!important;justify-self:start!important;width:clamp(108px,36cqi,124px)!important;min-width:0!important;max-width:124px!important;flex:none!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="lunch"] #scheduleLunchMinutes{grid-column:4!important;grid-row:2!important;width:70px!important;min-width:70px!important;max-width:70px!important;flex:none!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="lunch"] .schedule-min-label{grid-column:5!important;grid-row:2!important;width:auto!important;white-space:nowrap!important}
/* Window pause */
#adminPanel .schedule-global-card [data-schedule-rule-row="window"],#adminPanel .schedule-global-card [data-extra-window-pause]{display:grid!important;grid-template-columns:36px 31px minmax(0,1fr) auto 70px 38px!important;column-gap:7px!important;row-gap:8px!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] .schedule-rule-switch,#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-switch{grid-column:1!important;grid-row:1!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] .schedule-rule-icon,#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-rule-icon{grid-column:2!important;grid-row:1!important;margin:0!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] .schedule-sentence-prefix,#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-sentence-prefix{grid-column:3/6!important;grid-row:1!important;margin:0!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] .schedule-window-remove,#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-window-remove{grid-column:6!important;grid-row:1!important;justify-self:end!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] input[type="time"]:first-of-type,#adminPanel .schedule-global-card [data-extra-window-pause] input[type="time"]:first-of-type{grid-column:1/3!important;grid-row:2!important;justify-self:start!important;width:clamp(94px,29cqi,104px)!important;min-width:0!important;max-width:104px!important;flex:none!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] .schedule-window-dash,#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-window-dash{grid-column:3!important;grid-row:2!important;display:block!important;width:auto!important;justify-self:start!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] input[type="time"]:nth-of-type(2),#adminPanel .schedule-global-card [data-extra-window-pause] input[type="time"]:nth-of-type(2){grid-column:4/6!important;grid-row:2!important;justify-self:start!important;width:clamp(94px,29cqi,104px)!important;min-width:0!important;max-width:104px!important;flex:none!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] .schedule-window-dot,#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-window-dot{display:none!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] select,#adminPanel .schedule-global-card [data-extra-window-pause] select{grid-column:1/4!important;grid-row:3!important;justify-self:start!important;width:clamp(122px,40cqi,138px)!important;min-width:0!important;max-width:138px!important;flex:none!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] input[type="number"],#adminPanel .schedule-global-card [data-extra-window-pause] input[type="number"]{grid-column:4/6!important;grid-row:3!important;justify-self:start!important;width:66px!important;min-width:66px!important;max-width:66px!important;flex:none!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] .schedule-min-label,#adminPanel .schedule-global-card [data-extra-window-pause] .schedule-min-label{grid-column:6!important;grid-row:3!important;width:auto!important;white-space:nowrap!important;justify-self:start!important}
/* Recurring */
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"]{display:grid!important;grid-template-columns:36px 31px minmax(0,1fr) auto 64px 38px!important;column-gap:7px!important;row-gap:8px!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] .schedule-rule-switch{grid-column:1!important;grid-row:1!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] .schedule-rule-icon{grid-column:2!important;grid-row:1!important;margin:0!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] .schedule-sentence-prefix{grid-column:3/6!important;grid-row:1!important;margin:0!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] .schedule-window-remove{grid-column:6!important;grid-row:1!important;justify-self:end!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] #scheduleRecurringMode{grid-column:1/4!important;grid-row:2!important;justify-self:start!important;width:clamp(122px,40cqi,132px)!important;min-width:0!important;max-width:132px!important;flex:none!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] .schedule-recurring-all{grid-column:4!important;grid-row:2!important;width:auto!important;white-space:nowrap!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] #scheduleRecurringHours{grid-column:5!important;grid-row:2!important;width:64px!important;min-width:64px!important;max-width:64px!important;flex:none!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] .schedule-recurring-hours-label{grid-column:6!important;grid-row:2!important;width:auto!important;white-space:nowrap!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] #scheduleRecurringDurationMode{grid-column:1/4!important;grid-row:3!important;justify-self:start!important;width:clamp(108px,36cqi,124px)!important;min-width:0!important;max-width:124px!important;flex:none!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] #scheduleRecurringMinutes{grid-column:4/6!important;grid-row:3!important;justify-self:start!important;width:64px!important;min-width:64px!important;max-width:64px!important;flex:none!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] .schedule-min-label{grid-column:6!important;grid-row:3!important;width:auto!important;white-space:nowrap!important}
}
@container (max-width:620px){
#adminPanel .schedule-individual-override-row{display:grid!important;grid-template-columns:36px 16px auto minmax(118px,1fr) 38px!important;gap:7px!important;padding:9px!important;min-height:0!important;border-radius:14px!important}
#adminPanel .schedule-individual-override-row .schedule-override-switch{grid-column:1!important;grid-row:1!important;width:36px!important;height:21px!important;min-width:36px!important}
#adminPanel .schedule-individual-override-row .schedule-override-switch>span{width:15px!important;height:15px!important;top:3px!important;left:3px!important}
#adminPanel .schedule-individual-override-row .schedule-override-switch.is-on>span{transform:translateX(15px)!important}
#adminPanel .schedule-individual-override-row .schedule-override-arrow{grid-column:2!important;grid-row:1!important}
#adminPanel .schedule-individual-override-row .schedule-override-am{grid-column:3!important;grid-row:1!important}
#adminPanel .schedule-individual-override-row .schedule-override-scope{grid-column:4!important;grid-row:1!important;width:clamp(118px,42cqi,176px)!important;min-width:0!important;max-width:176px!important;justify-self:start!important}
#adminPanel .schedule-individual-override-row .schedule-override-colon{display:none!important}
#adminPanel .schedule-individual-override-row .schedule-override-delete{grid-column:5!important;grid-row:1!important;justify-self:end!important;margin:0!important}
#adminPanel .schedule-individual-override-row:not(:has(.schedule-override-duration)) .schedule-override-kind{grid-column:1/3!important;grid-row:2!important;text-align:right!important;padding-right:2px!important;margin:0!important}
#adminPanel .schedule-individual-override-row:not(:has(.schedule-override-duration)) .schedule-override-mode{grid-column:3/6!important;grid-row:2!important;width:clamp(126px,42cqi,154px)!important;min-width:0!important;max-width:154px!important;justify-self:start!important}
#adminPanel .schedule-individual-override-row:not(:has(.schedule-override-duration)) .schedule-override-um{grid-column:1/3!important;grid-row:3!important;text-align:right!important;padding-right:2px!important}
#adminPanel .schedule-individual-override-row:not(:has(.schedule-override-duration)) .schedule-override-time{grid-column:3/6!important;grid-row:3!important;width:106px!important;min-width:106px!important;max-width:106px!important;justify-self:start!important}
#adminPanel .schedule-individual-override-row:has(.schedule-override-duration) .schedule-override-kind{grid-column:1/3!important;grid-row:2!important;text-align:right!important;padding-right:2px!important;margin:0!important}
#adminPanel .schedule-individual-override-row:has(.schedule-override-duration) .schedule-override-time:nth-of-type(1){grid-column:3!important;grid-row:2!important;width:94px!important;min-width:94px!important;max-width:94px!important;justify-self:start!important}
#adminPanel .schedule-individual-override-row:has(.schedule-override-duration) .schedule-override-dash{grid-column:4!important;grid-row:2!important;display:block!important;text-align:center!important;padding:0!important;justify-self:center!important}
#adminPanel .schedule-individual-override-row:has(.schedule-override-duration) .schedule-override-time:nth-of-type(2){grid-column:5!important;grid-row:2!important;width:94px!important;min-width:94px!important;max-width:94px!important;justify-self:end!important}
#adminPanel .schedule-individual-override-row:has(.schedule-override-duration) .schedule-override-dot{display:none!important}
#adminPanel .schedule-individual-override-row:has(.schedule-override-duration) .schedule-override-duration{grid-column:1/4!important;grid-row:3!important;width:clamp(122px,40cqi,138px)!important;min-width:0!important;max-width:138px!important;justify-self:start!important}
#adminPanel .schedule-individual-override-row:has(.schedule-override-duration) .schedule-override-minutes{grid-column:4!important;grid-row:3!important;width:66px!important;min-width:66px!important;max-width:66px!important;justify-self:start!important}
#adminPanel .schedule-individual-override-row:has(.schedule-override-duration) .schedule-override-min-label{grid-column:5!important;grid-row:3!important;display:block!important;text-align:left!important;padding:0!important;white-space:nowrap!important}
}
@container (max-width:340px){
#adminPanel .schedule-global-card [data-schedule-rule-row="start"],#adminPanel .schedule-global-card [data-schedule-rule-row="end"]{grid-template-columns:36px 31px minmax(0,1fr) auto 98px!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="start"] select,#adminPanel .schedule-global-card [data-schedule-rule-row="end"] select{width:118px!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="start"] input[type="time"],#adminPanel .schedule-global-card [data-schedule-rule-row="end"] input[type="time"]{width:98px!important;min-width:98px!important;max-width:98px!important}
#adminPanel .schedule-individual-override-row{grid-template-columns:34px 14px auto minmax(110px,1fr) 38px!important;gap:5px!important;padding:8px!important}
#adminPanel .schedule-individual-override-row:has(.schedule-override-duration) .schedule-override-time:nth-of-type(1),#adminPanel .schedule-individual-override-row:has(.schedule-override-duration) .schedule-override-time:nth-of-type(2){width:88px!important;min-width:88px!important;max-width:88px!important}
}
@media(max-width:620px){
#adminPanel .schedule-settings-editor{--zf-rule-control-h:40px;--zf-rule-delete:40px}
#adminPanel .schedule-rule-adders-global .schedule-add-rule,#adminPanel .schedule-rule-adders-individual .schedule-add-rule{min-height:40px!important;padding:9px 12px!important}
}
/* V232 QA refinement — individual rule wrappers + narrow-phone corrections. */
#adminPanel .schedule-override-head,
#adminPanel .schedule-override-body{display:contents}
#adminPanel .schedule-rule-adders-global,
#adminPanel .schedule-rule-adders-individual{margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}
#adminPanel .schedule-rule-adders-global .schedule-rule-adders-actions,
#adminPanel .schedule-rule-adders-individual .schedule-rule-adders-actions{margin:0!important;padding:0!important;flex-direction:row!important}
@container (max-width:620px){
/* Give text labels their actual content width instead of squeezing them into the delete column. */
#adminPanel .schedule-global-card [data-schedule-rule-row="window"],
#adminPanel .schedule-global-card [data-extra-window-pause]{grid-template-columns:36px 31px minmax(0,1fr) auto 60px max-content!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"] input[type="number"],
#adminPanel .schedule-global-card [data-extra-window-pause] input[type="number"]{width:60px!important;min-width:60px!important;max-width:60px!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"]{grid-template-columns:36px 31px minmax(0,1fr) auto 56px max-content!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] #scheduleRecurringMode{width:clamp(104px,36cqi,122px)!important;max-width:122px!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] #scheduleRecurringHours,
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] #scheduleRecurringMinutes{width:56px!important;min-width:56px!important;max-width:56px!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"] #scheduleRecurringDurationMode{width:clamp(104px,34cqi,120px)!important;max-width:120px!important}
/* Individual rules are composed from a header and a control body. This keeps dates,
delete, labels and controls independent instead of fighting for the same grid track. */
#adminPanel .schedule-individual-override-row{display:block!important;padding:9px!important}
#adminPanel .schedule-individual-override-row .schedule-override-head{
display:grid!important;
grid-template-columns:36px 16px auto minmax(0,1fr) 40px!important;
align-items:center!important;
column-gap:7px!important;
min-width:0!important;
}
#adminPanel .schedule-individual-override-row .schedule-override-head .schedule-override-switch{grid-column:1!important;grid-row:1!important}
#adminPanel .schedule-individual-override-row .schedule-override-head .schedule-override-arrow{grid-column:2!important;grid-row:1!important}
#adminPanel .schedule-individual-override-row .schedule-override-head .schedule-override-am{grid-column:3!important;grid-row:1!important}
#adminPanel .schedule-individual-override-row .schedule-override-head .schedule-override-scope{
grid-column:4!important;grid-row:1!important;width:100%!important;min-width:0!important;max-width:176px!important;justify-self:start!important
}
#adminPanel .schedule-individual-override-row .schedule-override-head .schedule-override-colon{display:none!important}
#adminPanel .schedule-individual-override-row .schedule-override-head .schedule-override-delete{grid-column:5!important;grid-row:1!important;justify-self:end!important;margin:0!important}
#adminPanel .schedule-individual-override-row .schedule-override-body{margin-top:8px!important;min-width:0!important;width:100%!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-boundary{
display:grid!important;grid-template-columns:54px max-content minmax(0,1fr)!important;align-items:center!important;column-gap:7px!important;row-gap:7px!important
}
#adminPanel .schedule-individual-override-row .schedule-override-body-boundary .schedule-override-kind{grid-column:1!important;grid-row:1!important;text-align:right!important;padding:0!important;margin:0!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-boundary .schedule-override-mode{
grid-column:2!important;grid-row:1!important;width:clamp(122px,40cqi,148px)!important;min-width:0!important;max-width:148px!important;justify-self:start!important
}
#adminPanel .schedule-individual-override-row .schedule-override-body-boundary .schedule-override-um{grid-column:1!important;grid-row:2!important;text-align:right!important;padding:0!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-boundary .schedule-override-time{grid-column:2!important;grid-row:2!important;width:106px!important;min-width:106px!important;max-width:106px!important;justify-self:start!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause{
display:grid!important;grid-template-columns:54px 92px 16px 92px minmax(0,1fr)!important;align-items:center!important;column-gap:7px!important;row-gap:7px!important
}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause .schedule-override-kind{grid-column:1!important;grid-row:1!important;text-align:right!important;padding:0!important;margin:0!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause .schedule-override-time:nth-of-type(1){grid-column:2!important;grid-row:1!important;width:92px!important;min-width:92px!important;max-width:92px!important;justify-self:start!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause .schedule-override-dash{grid-column:3!important;grid-row:1!important;display:block!important;text-align:center!important;padding:0!important;justify-self:center!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause .schedule-override-time:nth-of-type(2){grid-column:4!important;grid-row:1!important;width:92px!important;min-width:92px!important;max-width:92px!important;justify-self:start!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause .schedule-override-dot{display:none!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause .schedule-override-duration{grid-column:1/3!important;grid-row:2!important;width:132px!important;min-width:0!important;max-width:132px!important;justify-self:start!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause .schedule-override-minutes{grid-column:3/5!important;grid-row:2!important;width:66px!important;min-width:66px!important;max-width:66px!important;justify-self:start!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause .schedule-override-min-label{grid-column:5!important;grid-row:2!important;display:block!important;text-align:left!important;padding:0!important;white-space:nowrap!important}
#adminPanel .schedule-rule-adders-global .schedule-rule-adders-actions,
#adminPanel .schedule-rule-adders-individual .schedule-rule-adders-actions{align-items:flex-start!important;justify-content:flex-start!important;gap:8px!important}
}
@container (max-width:340px){
/* On very narrow devices only the pause label moves to its own line. Controls keep
comfortable widths; no clipping and no overlap with the delete button. */
#adminPanel .schedule-individual-override-row .schedule-override-body-pause{
grid-template-columns:88px 16px 88px minmax(0,1fr)!important
}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause .schedule-override-kind{grid-column:1/5!important;grid-row:1!important;text-align:left!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause .schedule-override-time:nth-of-type(1){grid-column:1!important;grid-row:2!important;width:88px!important;min-width:88px!important;max-width:88px!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause .schedule-override-dash{grid-column:2!important;grid-row:2!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause .schedule-override-time:nth-of-type(2){grid-column:3!important;grid-row:2!important;width:88px!important;min-width:88px!important;max-width:88px!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause .schedule-override-duration{grid-column:1/3!important;grid-row:3!important;width:118px!important;max-width:118px!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause .schedule-override-minutes{grid-column:3!important;grid-row:3!important;width:62px!important;min-width:62px!important;max-width:62px!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause .schedule-override-min-label{grid-column:4!important;grid-row:3!important}
#adminPanel .schedule-rule-adders-global .schedule-rule-adders-actions,
#adminPanel .schedule-rule-adders-individual .schedule-rule-adders-actions{flex-direction:column!important;align-items:flex-start!important}
}
/* V232 final wrapper layout — makes the rule controls a real responsive group. */
#adminPanel .schedule-rule-controls{
display:flex;align-items:center;justify-content:flex-start;gap:8px;min-width:0;max-width:100%;box-sizing:border-box;flex:0 1 auto
}
#adminPanel .schedule-rule-controls .schedule-joiner{flex:0 0 auto;white-space:nowrap}
#adminPanel .schedule-rule-controls-boundary{flex-wrap:nowrap}
#adminPanel .schedule-rule-controls-lunch{flex-wrap:nowrap}
#adminPanel .schedule-rule-controls-window,#adminPanel .schedule-rule-controls-recurring{flex-wrap:wrap}
#adminPanel .schedule-global-card .schedule-rule-card>.schedule-sentence-prefix{min-width:128px!important;width:128px!important;flex:0 0 128px!important}
#adminPanel .schedule-global-card .schedule-rule-card>.schedule-rule-controls{margin-left:0!important}
#adminPanel .schedule-global-card .schedule-rule-controls-boundary select{width:148px!important;min-width:148px!important;max-width:148px!important;flex:0 0 148px!important}
#adminPanel .schedule-global-card .schedule-rule-controls-boundary input[type="time"]{width:106px!important;min-width:106px!important;max-width:106px!important;flex:0 0 106px!important}
#adminPanel .schedule-global-card .schedule-rule-controls-lunch #scheduleLunchDurationMode{width:124px!important;min-width:124px!important;max-width:124px!important;flex:0 0 124px!important}
#adminPanel .schedule-global-card .schedule-rule-controls-lunch #scheduleLunchMinutes{width:70px!important;min-width:70px!important;max-width:70px!important;flex:0 0 70px!important}
#adminPanel .schedule-global-card .schedule-rule-controls-window input[type="time"]{width:104px!important;min-width:104px!important;max-width:104px!important;flex:0 0 104px!important}
#adminPanel .schedule-global-card .schedule-rule-controls-window select{width:138px!important;min-width:138px!important;max-width:138px!important;flex:0 0 138px!important}
#adminPanel .schedule-global-card .schedule-rule-controls-window input[type="number"]{width:66px!important;min-width:66px!important;max-width:66px!important;flex:0 0 66px!important}
#adminPanel .schedule-global-card .schedule-rule-controls-recurring #scheduleRecurringMode{width:132px!important;min-width:132px!important;max-width:132px!important;flex:0 0 132px!important}
#adminPanel .schedule-global-card .schedule-rule-controls-recurring #scheduleRecurringHours,
#adminPanel .schedule-global-card .schedule-rule-controls-recurring #scheduleRecurringMinutes{width:64px!important;min-width:64px!important;max-width:64px!important;flex:0 0 64px!important}
#adminPanel .schedule-global-card .schedule-rule-controls-recurring #scheduleRecurringDurationMode{width:124px!important;min-width:124px!important;max-width:124px!important;flex:0 0 124px!important}
/* Keep individual controls compact at tablet widths where legacy media queries used to stretch them. */
#adminPanel .schedule-individual-override-row .schedule-override-mode{width:148px!important;min-width:0!important;max-width:148px!important}
#adminPanel .schedule-individual-override-row .schedule-override-time{width:106px!important;min-width:0!important;max-width:106px!important}
#adminPanel .schedule-individual-override-row .schedule-override-duration{width:132px!important;min-width:0!important;max-width:132px!important}
#adminPanel .schedule-individual-override-row .schedule-override-minutes{width:66px!important;min-width:0!important;max-width:66px!important}
@container (max-width:620px){
/* All global rule cards use the same header rhythm. Controls are grouped on the next line. */
#adminPanel .schedule-global-card [data-schedule-rule-row="start"],
#adminPanel .schedule-global-card [data-schedule-rule-row="end"],
#adminPanel .schedule-global-card [data-schedule-rule-row="lunch"],
#adminPanel .schedule-global-card [data-schedule-rule-row="window"],
#adminPanel .schedule-global-card [data-extra-window-pause],
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"]{
display:grid!important;grid-template-columns:36px 31px minmax(0,1fr) 40px!important;column-gap:7px!important;row-gap:8px!important
}
#adminPanel .schedule-global-card .schedule-rule-card>.schedule-rule-switch,
#adminPanel .schedule-global-card [data-extra-window-pause]>.schedule-rule-switch{grid-column:1!important;grid-row:1!important}
#adminPanel .schedule-global-card .schedule-rule-card>.schedule-rule-icon,
#adminPanel .schedule-global-card [data-extra-window-pause]>.schedule-rule-icon{grid-column:2!important;grid-row:1!important;margin:0!important}
#adminPanel .schedule-global-card .schedule-rule-card>.schedule-sentence-prefix,
#adminPanel .schedule-global-card [data-extra-window-pause]>.schedule-sentence-prefix{
grid-column:3/5!important;grid-row:1!important;min-width:0!important;width:auto!important;flex:none!important;margin:0!important;align-self:center!important
}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"]>.schedule-sentence-prefix,
#adminPanel .schedule-global-card [data-extra-window-pause]>.schedule-sentence-prefix,
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"]>.schedule-sentence-prefix{grid-column:3!important}
#adminPanel .schedule-global-card .schedule-rule-card>.schedule-rule-controls,
#adminPanel .schedule-global-card [data-extra-window-pause]>.schedule-rule-controls{
grid-column:1/5!important;grid-row:2!important;justify-self:start!important;width:auto!important;max-width:100%!important;margin:0!important
}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"]>.schedule-window-remove,
#adminPanel .schedule-global-card [data-extra-window-pause]>.schedule-window-remove,
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"]>.schedule-window-remove{grid-column:4!important;grid-row:1!important;justify-self:end!important;margin:0!important}
#adminPanel .schedule-global-card .schedule-rule-controls{gap:7px!important}
#adminPanel .schedule-global-card .schedule-rule-controls-boundary select{width:clamp(116px,36cqi,132px)!important;min-width:0!important;max-width:132px!important;flex:0 0 auto!important}
#adminPanel .schedule-global-card .schedule-rule-controls-boundary input[type="time"]{width:100px!important;min-width:100px!important;max-width:100px!important;flex:0 0 100px!important}
#adminPanel .schedule-global-card .schedule-rule-controls-lunch #scheduleLunchDurationMode{width:clamp(106px,34cqi,120px)!important;min-width:0!important;max-width:120px!important;flex:0 0 auto!important}
#adminPanel .schedule-global-card .schedule-rule-controls-lunch #scheduleLunchMinutes{width:66px!important;min-width:66px!important;max-width:66px!important;flex:0 0 66px!important}
#adminPanel .schedule-global-card .schedule-rule-controls-window{row-gap:7px!important}
#adminPanel .schedule-global-card .schedule-rule-controls-window input[type="time"]{width:clamp(92px,29cqi,100px)!important;min-width:0!important;max-width:100px!important;flex:0 0 auto!important}
#adminPanel .schedule-global-card .schedule-rule-controls-window .schedule-window-dot{display:none!important}
#adminPanel .schedule-global-card .schedule-rule-controls-window select{width:clamp(116px,38cqi,132px)!important;min-width:0!important;max-width:132px!important;flex:0 0 auto!important}
#adminPanel .schedule-global-card .schedule-rule-controls-window input[type="number"]{width:62px!important;min-width:62px!important;max-width:62px!important;flex:0 0 62px!important}
#adminPanel .schedule-global-card .schedule-rule-controls-recurring{row-gap:7px!important}
#adminPanel .schedule-global-card .schedule-rule-controls-recurring #scheduleRecurringMode{width:clamp(104px,35cqi,120px)!important;min-width:0!important;max-width:120px!important;flex:0 0 auto!important}
#adminPanel .schedule-global-card .schedule-rule-controls-recurring #scheduleRecurringHours,
#adminPanel .schedule-global-card .schedule-rule-controls-recurring #scheduleRecurringMinutes{width:56px!important;min-width:56px!important;max-width:56px!important;flex:0 0 56px!important}
#adminPanel .schedule-global-card .schedule-rule-controls-recurring #scheduleRecurringDurationMode{width:clamp(104px,34cqi,118px)!important;min-width:0!important;max-width:118px!important;flex:0 0 auto!important}
#adminPanel .schedule-global-card .schedule-rule-controls-recurring .schedule-recurring-all,
#adminPanel .schedule-global-card .schedule-rule-controls-recurring .schedule-recurring-hours-label,
#adminPanel .schedule-global-card .schedule-rule-controls-recurring .schedule-min-label{
display:inline-flex!important;grid-column:auto!important;grid-row:auto!important;width:auto!important;align-items:center!important;white-space:nowrap!important;padding:0!important;margin:0!important
}
/* Individual wrapper rules win over legacy tablet grids. */
#adminPanel .schedule-individual-override-row .schedule-override-body-boundary .schedule-override-mode{width:clamp(122px,40cqi,148px)!important;max-width:148px!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-boundary .schedule-override-time{width:106px!important;min-width:106px!important;max-width:106px!important}
}
@container (max-width:300px){
#adminPanel .schedule-global-card .schedule-rule-controls{gap:6px!important}
#adminPanel .schedule-global-card .schedule-rule-controls-boundary select{width:108px!important}
#adminPanel .schedule-global-card .schedule-rule-controls-boundary input[type="time"]{width:92px!important;min-width:92px!important;max-width:92px!important}
#adminPanel .schedule-global-card .schedule-rule-controls-window input[type="time"]{width:88px!important}
#adminPanel .schedule-global-card .schedule-rule-controls-window select{width:112px!important}
#adminPanel .schedule-global-card .schedule-rule-controls-recurring #scheduleRecurringMode{width:100px!important}
#adminPanel .schedule-global-card .schedule-rule-controls-recurring #scheduleRecurringDurationMode{width:100px!important}
}
/* V232 final QA: close the 620–760px legacy-media gap and tighten grouped labels. */
@container (min-width:621px) and (max-width:760px){
#adminPanel .schedule-global-card [data-schedule-rule-row="start"],
#adminPanel .schedule-global-card [data-schedule-rule-row="end"],
#adminPanel .schedule-global-card [data-schedule-rule-row="lunch"],
#adminPanel .schedule-global-card [data-schedule-rule-row="window"],
#adminPanel .schedule-global-card [data-extra-window-pause],
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"]{
display:grid!important;grid-template-columns:38px 32px minmax(0,1fr) 40px!important;column-gap:8px!important;row-gap:8px!important;padding:9px 10px!important;min-height:0!important
}
#adminPanel .schedule-global-card .schedule-rule-card>.schedule-rule-switch,
#adminPanel .schedule-global-card [data-extra-window-pause]>.schedule-rule-switch{grid-column:1!important;grid-row:1!important}
#adminPanel .schedule-global-card .schedule-rule-card>.schedule-rule-icon,
#adminPanel .schedule-global-card [data-extra-window-pause]>.schedule-rule-icon{grid-column:2!important;grid-row:1!important;margin:0!important}
#adminPanel .schedule-global-card .schedule-rule-card>.schedule-sentence-prefix,
#adminPanel .schedule-global-card [data-extra-window-pause]>.schedule-sentence-prefix{grid-column:3/5!important;grid-row:1!important;min-width:0!important;width:auto!important;flex:none!important;margin:0!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"]>.schedule-sentence-prefix,
#adminPanel .schedule-global-card [data-extra-window-pause]>.schedule-sentence-prefix,
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"]>.schedule-sentence-prefix{grid-column:3!important}
#adminPanel .schedule-global-card .schedule-rule-card>.schedule-rule-controls,
#adminPanel .schedule-global-card [data-extra-window-pause]>.schedule-rule-controls{grid-column:1/5!important;grid-row:2!important;justify-self:start!important;width:auto!important;max-width:100%!important;margin:0!important}
#adminPanel .schedule-global-card [data-schedule-rule-row="window"]>.schedule-window-remove,
#adminPanel .schedule-global-card [data-extra-window-pause]>.schedule-window-remove,
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"]>.schedule-window-remove{grid-column:4!important;grid-row:1!important;justify-self:end!important;margin:0!important}
#adminPanel .schedule-individual-override-row{display:block!important;padding:9px!important;min-height:0!important}
#adminPanel .schedule-individual-override-row .schedule-override-head{display:grid!important;grid-template-columns:38px 16px auto minmax(0,1fr) 40px!important;align-items:center!important;column-gap:8px!important}
#adminPanel .schedule-individual-override-row .schedule-override-head .schedule-override-switch{grid-column:1!important;grid-row:1!important}
#adminPanel .schedule-individual-override-row .schedule-override-head .schedule-override-arrow{grid-column:2!important;grid-row:1!important}
#adminPanel .schedule-individual-override-row .schedule-override-head .schedule-override-am{grid-column:3!important;grid-row:1!important}
#adminPanel .schedule-individual-override-row .schedule-override-head .schedule-override-scope{grid-column:4!important;grid-row:1!important;width:clamp(128px,32cqi,180px)!important;min-width:0!important;max-width:180px!important;justify-self:start!important}
#adminPanel .schedule-individual-override-row .schedule-override-head .schedule-override-colon{display:none!important}
#adminPanel .schedule-individual-override-row .schedule-override-head .schedule-override-delete{grid-column:5!important;grid-row:1!important;justify-self:end!important;margin:0!important}
#adminPanel .schedule-individual-override-row .schedule-override-body{margin-top:8px!important;min-width:0!important;width:100%!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-boundary{display:grid!important;grid-template-columns:54px max-content minmax(0,1fr)!important;align-items:center!important;column-gap:8px!important;row-gap:7px!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-boundary .schedule-override-kind{grid-column:1!important;grid-row:1!important;text-align:right!important;padding:0!important;margin:0!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-boundary .schedule-override-mode{grid-column:2!important;grid-row:1!important;width:148px!important;min-width:148px!important;max-width:148px!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-boundary .schedule-override-um{grid-column:1!important;grid-row:2!important;text-align:right!important;padding:0!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-boundary .schedule-override-time{grid-column:2!important;grid-row:2!important;width:106px!important;min-width:106px!important;max-width:106px!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause{display:grid!important;grid-template-columns:54px 92px 16px 66px max-content minmax(0,1fr)!important;align-items:center!important;column-gap:8px!important;row-gap:7px!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause .schedule-override-kind{grid-column:1!important;grid-row:1!important;text-align:right!important;padding:0!important;margin:0!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause .schedule-override-time:nth-of-type(1){grid-column:2!important;grid-row:1!important;width:92px!important;min-width:92px!important;max-width:92px!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause .schedule-override-dash{grid-column:3!important;grid-row:1!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause .schedule-override-time:nth-of-type(2){grid-column:4/6!important;grid-row:1!important;width:92px!important;min-width:92px!important;max-width:92px!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause .schedule-override-dot{display:none!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause .schedule-override-duration{grid-column:1/3!important;grid-row:2!important;width:132px!important;min-width:132px!important;max-width:132px!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause .schedule-override-minutes{grid-column:4!important;grid-row:2!important;width:66px!important;min-width:66px!important;max-width:66px!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause .schedule-override-min-label{grid-column:5!important;grid-row:2!important;white-space:nowrap!important;padding:0!important}
}
@container (min-width:341px) and (max-width:620px){
#adminPanel .schedule-individual-override-row .schedule-override-body-pause{grid-template-columns:54px 92px 16px 66px max-content minmax(0,1fr)!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause .schedule-override-time:nth-of-type(2){grid-column:4/6!important;grid-row:1!important;width:92px!important;min-width:92px!important;max-width:92px!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause .schedule-override-minutes{grid-column:4!important;grid-row:2!important;width:66px!important;min-width:66px!important;max-width:66px!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause .schedule-override-min-label{grid-column:5!important;grid-row:2!important}
}
@container (max-width:300px){
#adminPanel .schedule-global-card .schedule-rule-controls-recurring{gap:5px!important}
#adminPanel .schedule-global-card .schedule-rule-controls-recurring #scheduleRecurringMode{width:116px!important;max-width:116px!important}
#adminPanel .schedule-global-card .schedule-rule-controls-recurring #scheduleRecurringHours,
#adminPanel .schedule-global-card .schedule-rule-controls-recurring #scheduleRecurringMinutes{width:50px!important;min-width:50px!important;max-width:50px!important}
#adminPanel .schedule-global-card .schedule-rule-controls-recurring #scheduleRecurringDurationMode{width:106px!important;max-width:106px!important}
#adminPanel .schedule-global-card .schedule-rule-controls-recurring .schedule-recurring-all,
#adminPanel .schedule-global-card .schedule-rule-controls-recurring .schedule-recurring-hours-label,
#adminPanel .schedule-global-card .schedule-rule-controls-recurring .schedule-min-label{font-size:.72rem!important}
}
/* V232 final polish — group individual pause controls so labels never drift. */
#adminPanel .schedule-override-pause-times,
#adminPanel .schedule-override-pause-duration{display:contents}
@container (max-width:760px){
#adminPanel .schedule-individual-override-row .schedule-override-body-pause{
display:grid!important;grid-template-columns:54px minmax(0,1fr)!important;align-items:center!important;column-gap:8px!important;row-gap:7px!important
}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause>.schedule-override-kind{
grid-column:1!important;grid-row:1!important;text-align:right!important;padding:0!important;margin:0!important
}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause>.schedule-override-pause-times{
grid-column:2!important;grid-row:1!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:7px!important;min-width:0!important
}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause>.schedule-override-pause-times .schedule-override-time{
width:92px!important;min-width:92px!important;max-width:92px!important;flex:0 0 92px!important
}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause>.schedule-override-pause-times .schedule-override-dash{
display:inline-flex!important;width:auto!important;min-width:0!important;grid-column:auto!important;grid-row:auto!important;padding:0!important;margin:0!important;flex:0 0 auto!important
}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause>.schedule-override-dot{display:none!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause>.schedule-override-pause-duration{
grid-column:1/3!important;grid-row:2!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:7px!important;min-width:0!important
}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause>.schedule-override-pause-duration .schedule-override-duration{
width:132px!important;min-width:0!important;max-width:132px!important;flex:0 1 132px!important;grid-column:auto!important;grid-row:auto!important
}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause>.schedule-override-pause-duration .schedule-override-minutes{
width:66px!important;min-width:66px!important;max-width:66px!important;flex:0 0 66px!important;grid-column:auto!important;grid-row:auto!important
}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause>.schedule-override-pause-duration .schedule-override-min-label{
display:inline-flex!important;width:auto!important;grid-column:auto!important;grid-row:auto!important;white-space:nowrap!important;padding:0!important;margin:0!important;flex:0 0 auto!important
}
}
@container (max-width:300px){
#adminPanel .schedule-individual-override-row .schedule-override-body-pause{grid-template-columns:1fr!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause>.schedule-override-kind{grid-column:1!important;grid-row:1!important;text-align:left!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause>.schedule-override-pause-times{grid-column:1!important;grid-row:2!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause>.schedule-override-pause-times .schedule-override-time{width:88px!important;min-width:88px!important;max-width:88px!important;flex-basis:88px!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause>.schedule-override-pause-duration{grid-column:1!important;grid-row:3!important;gap:6px!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause>.schedule-override-pause-duration .schedule-override-duration{width:118px!important;max-width:118px!important;flex-basis:118px!important}
#adminPanel .schedule-individual-override-row .schedule-override-body-pause>.schedule-override-pause-duration .schedule-override-minutes{width:62px!important;min-width:62px!important;max-width:62px!important;flex-basis:62px!important}
}
/* V233 / 10.11.42 — Optionale Pausen immer löschbar; Mittagspause bewusst nicht. */
#adminPanel [data-schedule-rule-row="window"] .schedule-window-remove,
#adminPanel [data-schedule-rule-row="recurring"] .schedule-window-remove,
#adminPanel [data-extra-window-pause] .schedule-window-remove{
display:inline-flex!important;
visibility:visible!important;
opacity:1!important;
pointer-events:auto!important;
cursor:pointer!important;
}
#adminPanel [data-schedule-rule-row="window"].is-rule-off .schedule-window-remove,
#adminPanel [data-schedule-rule-row="recurring"].is-rule-off .schedule-window-remove,
#adminPanel [data-extra-window-pause].is-rule-off .schedule-window-remove{
opacity:.78!important;
pointer-events:auto!important;
}
#adminPanel [data-schedule-rule-row="lunch"] .schedule-window-remove{display:none!important}
/* V234 — Premium-Stundenplan: Begründung separat, Hauptergebnis bleibt reiner Plan. */
#adminPanel .ai-schedule-explanation{
margin-top:14px;
padding:16px 17px;
border:1px solid #dfe7ef;
border-radius:16px;
background:#f8fbfd;
color:#405066;
}
#adminPanel .ai-schedule-explanation[hidden]{display:none!important}
#adminPanel .ai-schedule-explanation-head{
display:flex;
align-items:center;
gap:8px;
margin-bottom:9px;
color:#263246;
}
#adminPanel .ai-schedule-explanation-head>span{
width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
border-radius:9px;background:#edf5ff;color:#2f73c9;font-weight:900;
}
#adminPanel .ai-schedule-explanation-head strong{font-size:.92rem}
#adminPanel .ai-schedule-explanation-text{display:flex;flex-direction:column;gap:8px}
#adminPanel .ai-schedule-explanation-text p{
margin:0;
padding-top:8px;
border-top:1px solid rgba(72,94,121,.10);
font-size:.84rem;
line-height:1.45;
}
#adminPanel .ai-schedule-explanation-text p:first-child{padding-top:0;border-top:0}
@media(max-width:620px){
#adminPanel .ai-schedule-explanation{padding:14px;border-radius:15px}
#adminPanel .ai-schedule-explanation-head strong{font-size:.88rem}
#adminPanel .ai-schedule-explanation-text p{font-size:.82rem;line-height:1.42}
}
/* V235 / 10.11.44 — Ergebnisbereich: Wörter nie mitten im Wort brechen;
Titel/Aktionen wechseln als ganze Gruppen stufenlos in die nächste Zeile. */
#adminPanel .ai-result > .between{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:clamp(10px,2vw,18px);
flex-wrap:wrap;
}
#adminPanel #aiResultTitle,
#adminPanel .school-timetable-titlebar strong,
#adminPanel .schedule-section > h4{
overflow-wrap:normal!important;
word-break:keep-all!important;
hyphens:none!important;
}
#adminPanel #aiResultTitle{
flex:0 0 auto;
white-space:nowrap;
min-width:max-content;
}
#adminPanel .ai-result-actions{
min-width:0;
max-width:100%;
display:flex;
align-items:center;
justify-content:flex-end;
gap:8px;
flex-wrap:wrap;
}
#adminPanel .ai-result-actions button{
white-space:nowrap;
overflow-wrap:normal!important;
word-break:keep-all!important;
}
#adminPanel .school-timetable-titlebar>div{min-width:0}
#adminPanel .school-timetable-titlebar strong{white-space:nowrap}
#adminPanel .school-timetable-titlebar span{
overflow-wrap:break-word;
word-break:normal;
}
/* Schedule text rows keep time/name balanced on medium widths, then stack cleanly on phones. */
#adminPanel #aiResultText .schedule-section-day .schedule-lesson-item{
grid-template-columns:minmax(118px,132px) minmax(0,1fr);
gap:clamp(10px,2vw,18px);
}
#adminPanel #aiResultText .schedule-section-day .schedule-lesson-time{
white-space:nowrap;
overflow-wrap:normal!important;
word-break:keep-all!important;
}
#adminPanel #aiResultText .schedule-section-day .schedule-lesson-name{
overflow-wrap:break-word;
word-break:normal;
}
@media(max-width:700px){
#adminPanel .ai-result-actions{justify-content:flex-start}
}
@media(max-width:520px){
#adminPanel .ai-result > .between{
display:grid;
grid-template-columns:1fr;
gap:10px;
}
#adminPanel #aiResultTitle{justify-self:start}
#adminPanel .ai-result-actions{width:100%;justify-content:flex-start;gap:8px 12px}
}
@media(max-width:430px){
#adminPanel #aiResultText .schedule-section-day .schedule-lesson-item{
grid-template-columns:1fr;
gap:2px;
padding-block:8px;
}
#adminPanel #aiResultText .schedule-section-day .schedule-lesson-time,
#adminPanel #aiResultText .schedule-section-day .schedule-lesson-name{
width:100%;
min-width:0;
}
}
/* V236 — + Datum hinzufügen: kein iOS-Doppeltipp-Zoom, schnelle Serien-Taps ohne Ruckeln.
Pinch-Zoom der Seite bleibt erhalten; nur dieses Bedienelement nutzt manipulation. */
#addDate{
touch-action:manipulation;
-webkit-user-select:none;
user-select:none;
-webkit-touch-callout:none;
min-height:44px;
will-change:auto;
}
@media(hover:none) and (pointer:coarse){
#addDate{
transition:background-color .10s ease,border-color .10s ease;
transform:none!important;
}
#addDate:active{background:#e7e9ee}
#dateArea .date-dimension{contain:layout paint style;}
}
/* V238 / 10.10.75 — Datum hinzufügen: iOS-Serien-Taps + robuste Datums-Zeitfelder. */
#createForm #addDate{
touch-action:manipulation!important;
-ms-touch-action:manipulation;
-webkit-user-select:none!important;
user-select:none!important;
-webkit-touch-callout:none!important;
-webkit-tap-highlight-color:transparent!important;
cursor:pointer;
}
#createForm #dateArea,
#createForm #dates,
#createForm #addDate{overflow-anchor:none}
/* Unabhaengig vom Breakpoint darf ein natives time-input niemals seine
Datums-Karte verbreitern. So bleibt auch der Zwischenbereich sauber. */
.create-page .home-premium-creator #createForm .date-dimension{
container-type:inline-size;
min-width:0!important;
}
.create-page .home-premium-creator #createForm .date-dimension .day-time-panel{
display:grid!important;
grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr)!important;
column-gap:8px!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
box-sizing:border-box!important;
overflow:hidden!important;
}
.create-page .home-premium-creator #createForm .date-dimension .day-time-panel .time-caption{grid-column:1/-1!important}
.create-page .home-premium-creator #createForm .date-dimension .day-time-panel .dim-start{grid-column:1!important}
.create-page .home-premium-creator #createForm .date-dimension .day-time-panel .time-dash{
grid-column:2!important;position:static!important;transform:none!important;
width:20px!important;min-width:20px!important;max-width:20px!important;
justify-self:center!important;margin:0!important;text-align:center!important;
}
.create-page .home-premium-creator #createForm .date-dimension .day-time-panel .dim-end{grid-column:3!important}
.create-page .home-premium-creator #createForm .date-dimension .day-time-panel input[type="time"]{
display:block!important;
inline-size:100%!important;width:100%!important;
min-inline-size:0!important;min-width:0!important;
max-inline-size:100%!important;max-width:100%!important;
box-sizing:border-box!important;
padding-inline:clamp(6px,2.5cqi,12px)!important;
font-size:clamp(.84rem,5.2cqi,1rem)!important;
}
@supports selector(input::-webkit-calendar-picker-indicator){
.create-page .home-premium-creator #createForm .date-dimension input[type="time"]::-webkit-datetime-edit{
min-width:0!important;padding:0!important;margin:0!important;
}
.create-page .home-premium-creator #createForm .date-dimension input[type="time"]::-webkit-date-and-time-value{
min-width:0!important;text-align:center!important;
}
}
/* V242 / 10.10.79 — Startseite zurück auf die bewährte Kachel-Logik.
Nur erste Seite. Keine Änderungen an Event/Admin/Solver.
Eine Desktop-Kachel behält immer dieselbe ideale Grösse; der Browser
legt davon einfach so viele nebeneinander, wie wirklich Platz haben. */
.create-page .home-premium-creator{container-type:inline-size}
/* Wochentage */
.create-page .home-premium-creator .weekday-toggle-picker{
display:grid!important;
grid-template-columns:repeat(auto-fill,390px)!important;
gap:14px!important;
justify-content:start!important;
align-items:start!important;
}
.create-page .home-premium-creator .weekday-dimension{
display:block!important;
width:390px!important;
min-width:390px!important;
max-width:390px!important;
margin:0!important;
opacity:1!important;
}
.create-page .home-premium-creator .weekday-toggle{
width:390px!important;
min-width:390px!important;
max-width:390px!important;
}
/* Zeit bei Wochentagen erscheint erst nach Auswahl. */
.create-page .home-premium-creator .weekday-dimension .day-time-panel{
display:none!important;
width:390px!important;
min-width:390px!important;
max-width:390px!important;
grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr)!important;
column-gap:10px!important;
box-sizing:border-box!important;
overflow:hidden!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel{display:grid!important}
.create-page .home-premium-creator .weekday-dimension .day-time-panel .time-caption{grid-column:1/-1!important}
.create-page .home-premium-creator .weekday-dimension .day-time-panel .dim-start{grid-column:1!important}
.create-page .home-premium-creator .weekday-dimension .day-time-panel .time-dash{
grid-column:2!important;width:24px!important;min-width:24px!important;position:static!important;
transform:none!important;justify-self:center!important;margin:0!important
}
.create-page .home-premium-creator .weekday-dimension .day-time-panel .dim-end{grid-column:3!important}
.create-page .home-premium-creator .weekday-dimension .day-time-panel input[type="time"]{
width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important
}
/* Daten: exakt dieselbe Standard-Kachelbreite. */
.create-page .home-premium-creator #createForm #dates{
display:grid!important;
grid-template-columns:repeat(auto-fill,390px)!important;
gap:14px!important;
justify-content:start!important;
align-items:start!important;
width:100%!important;
max-width:100%!important;
overflow:visible!important;
}
.create-page .home-premium-creator #createForm #dates > .date-dimension{
width:390px!important;min-width:390px!important;max-width:390px!important
}
.create-page .home-premium-creator .date-dimension .date-head{
width:390px!important;min-width:390px!important;max-width:390px!important;box-sizing:border-box!important
}
.create-page .home-premium-creator .date-dimension .day-time-panel{
width:390px!important;min-width:390px!important;max-width:390px!important;
grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr)!important;
column-gap:10px!important;box-sizing:border-box!important;overflow:hidden!important
}
.create-page .home-premium-creator .date-dimension .day-time-panel .time-caption{grid-column:1/-1!important}
.create-page .home-premium-creator .date-dimension .day-time-panel .dim-start{grid-column:1!important}
.create-page .home-premium-creator .date-dimension .day-time-panel .time-dash{
grid-column:2!important;width:24px!important;min-width:24px!important;position:static!important;
transform:none!important;justify-self:center!important;margin:0!important
}
.create-page .home-premium-creator .date-dimension .day-time-panel .dim-end{grid-column:3!important}
.create-page .home-premium-creator .date-dimension .day-time-panel input[type="time"]{
width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important
}
/* Nur wenn selbst 390 px nicht mehr hineinpassen, wird die Karte flüssig. */
@container (max-width:430px){
.create-page .home-premium-creator .weekday-toggle-picker,
.create-page .home-premium-creator #createForm #dates{grid-template-columns:1fr!important;gap:10px!important}
.create-page .home-premium-creator .weekday-dimension,
.create-page .home-premium-creator .weekday-toggle,
.create-page .home-premium-creator .weekday-dimension .day-time-panel,
.create-page .home-premium-creator #createForm #dates > .date-dimension,
.create-page .home-premium-creator .date-dimension .date-head,
.create-page .home-premium-creator .date-dimension .day-time-panel{
width:100%!important;min-width:0!important;max-width:100%!important
}
}
/* V243 / 2026-09-06 — Startseite: Datumskachel = aktive Wochentagskachel.
Mobile dient als Referenz; Desktop nutzt dieselben Proportionen, aber schmaler. */
.create-page .home-premium-creator{
--zf-home-dimension-width:320px;
}
.create-page .home-premium-creator .weekday-toggle-picker,
.create-page .home-premium-creator #createForm #dates{
grid-template-columns:repeat(auto-fill,var(--zf-home-dimension-width))!important;
gap:14px!important;
}
.create-page .home-premium-creator .weekday-dimension,
.create-page .home-premium-creator .weekday-toggle,
.create-page .home-premium-creator .weekday-dimension .day-time-panel,
.create-page .home-premium-creator #createForm #dates > .date-dimension,
.create-page .home-premium-creator .date-dimension .date-head,
.create-page .home-premium-creator .date-dimension .day-time-panel{
width:var(--zf-home-dimension-width)!important;
min-width:var(--zf-home-dimension-width)!important;
max-width:var(--zf-home-dimension-width)!important;
}
/* Datumskopf exakt wie ein ausgewählter Wochentag: schwarz, weiss, gleiche Höhe/Typo. */
.create-page .home-premium-creator .date-dimension .date-head{
position:relative!important;
display:block!important;
height:auto!important;
padding:0!important;
border:0!important;
border-radius:14px!important;
background:#111827!important;
overflow:hidden!important;
}
.create-page .home-premium-creator .date-dimension .date-head .dim-date{
display:block!important;
width:100%!important;
min-width:0!important;
min-height:0!important;
height:auto!important;
margin:0!important;
border:1px solid #111827!important;
border-radius:14px!important;
background:#111827!important;
color:#fff!important;
padding:11px 50px 11px 15px!important;
font:inherit!important;
font-weight:750!important;
line-height:normal!important;
box-shadow:none!important;
outline:none;
color-scheme:dark;
}
.create-page .home-premium-creator .date-dimension .date-head .dim-date:focus-visible{
outline:3px solid rgba(17,24,39,.18)!important;
outline-offset:2px!important;
}
.create-page .home-premium-creator .date-dimension .date-head .remove-dim{
position:absolute!important;
right:5px!important;
left:auto!important;
top:50%!important;
transform:translateY(-50%)!important;
width:38px!important;
min-width:38px!important;
height:38px!important;
margin:0!important;
padding:0!important;
display:grid!important;
place-items:center!important;
border:0!important;
border-radius:10px!important;
background:transparent!important;
color:#fff!important;
font-size:22px!important;
line-height:1!important;
z-index:3!important;
}
.create-page .home-premium-creator .date-dimension .date-head .remove-dim:hover,
.create-page .home-premium-creator .date-dimension .date-head .remove-dim:focus-visible{
background:rgba(255,255,255,.12)!important;
color:#fff!important;
}
/* Zeitteil: exakt dieselbe Geometrie wie bei einem aktiven Wochentag. */
.create-page .home-premium-creator .date-dimension .day-time-panel{
display:grid!important;
grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr)!important;
column-gap:10px!important;
margin-top:8px!important;
padding:10px!important;
border:1px solid var(--line)!important;
border-radius:14px!important;
background:#fff!important;
box-sizing:border-box!important;
overflow:hidden!important;
}
.create-page .home-premium-creator .date-dimension .day-time-panel input[type="time"]{
padding:9px 8px!important;
font:inherit!important;
}
/* Handy: Wochentagkachel bleibt die Referenz; Datum übernimmt exakt ihre volle Breite. */
@container (max-width:430px){
.create-page .home-premium-creator{
--zf-home-dimension-width:100%;
}
.create-page .home-premium-creator .weekday-toggle-picker,
.create-page .home-premium-creator #createForm #dates{
grid-template-columns:1fr!important;
gap:10px!important;
}
.create-page .home-premium-creator .weekday-dimension,
.create-page .home-premium-creator .weekday-toggle,
.create-page .home-premium-creator .weekday-dimension .day-time-panel,
.create-page .home-premium-creator #createForm #dates > .date-dimension,
.create-page .home-premium-creator .date-dimension .date-head,
.create-page .home-premium-creator .date-dimension .day-time-panel{
width:100%!important;
min-width:0!important;
max-width:100%!important;
}
}
/* V244 / 2026-09-06 — Mobile zuerst: Datumskachel 1:1 nach der aktiven
Wochentag-Kachel. Keine Desktop-Aenderung in diesem Patch. */
@media(max-width:560px){
/* Kopf: exakt dieselbe Box-Geometrie/Typografie wie .weekday-toggle.active. */
.create-page .home-premium-creator .date-dimension .date-head{
width:100%!important;
min-width:0!important;
max-width:100%!important;
height:auto!important;
min-height:0!important;
margin:0!important;
padding:0!important;
border:0!important;
border-radius:14px!important;
background:#111827!important;
box-sizing:border-box!important;
}
.create-page .home-premium-creator .date-dimension .date-head .dim-date{
-webkit-appearance:none!important;
appearance:none!important;
display:block!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
height:auto!important;
min-height:0!important;
margin:0!important;
padding:11px 50px 11px 15px!important;
border:1px solid #111827!important;
border-radius:14px!important;
background:#111827!important;
color:#fff!important;
box-sizing:border-box!important;
font:inherit!important;
font-weight:750!important;
line-height:normal!important;
text-align:center!important;
}
.create-page .home-premium-creator .date-dimension .date-head .remove-dim{
right:5px!important;
top:50%!important;
width:38px!important;
min-width:38px!important;
height:38px!important;
transform:translateY(-50%)!important;
}
/* Zeitbox: dieselben Mobile-Werte wie beim aktiven Wochentag. */
.create-page .home-premium-creator .date-dimension .day-time-panel{
display:grid!important;
grid-template-columns:108px 28px 108px!important;
grid-template-areas:"caption caption caption" "start dash end"!important;
justify-content:center!important;
align-items:center!important;
column-gap:10px!important;
row-gap:8px!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
margin-top:10px!important;
padding:10px 16px!important;
border:1px solid var(--line)!important;
border-radius:14px!important;
background:#fff!important;
box-sizing:border-box!important;
overflow:hidden!important;
}
.create-page .home-premium-creator .date-dimension .day-time-panel .time-caption{
grid-area:caption!important;
grid-column:auto!important;
justify-self:start!important;
width:100%!important;
}
.create-page .home-premium-creator .date-dimension .day-time-panel .dim-start{grid-area:start!important;grid-column:auto!important}
.create-page .home-premium-creator .date-dimension .day-time-panel .time-dash{
grid-area:dash!important;grid-column:auto!important;
width:28px!important;min-width:28px!important;max-width:28px!important;
justify-self:center!important;text-align:center!important;margin:0!important;
}
.create-page .home-premium-creator .date-dimension .day-time-panel .dim-end{grid-area:end!important;grid-column:auto!important}
.create-page .home-premium-creator .date-dimension .day-time-panel .dim-start,
.create-page .home-premium-creator .date-dimension .day-time-panel .dim-end{
width:108px!important;
min-width:108px!important;
max-width:108px!important;
justify-self:center!important;
box-sizing:border-box!important;
padding:9px 8px!important;
font:inherit!important;
}
}
/* V245 / 2026-09-06 — Mobile final alignment against the weekday card. */
@media(max-width:560px){
/* Datum bleibt optisch exakt mittig, unabhaengig vom × rechts. */
.create-page .home-premium-creator .date-dimension .date-head .dim-date{
padding-left:50px!important;
padding-right:50px!important;
text-align:center!important;
text-align-last:center!important;
}
.create-page .home-premium-creator .date-dimension .date-head .dim-date::-webkit-date-and-time-value{
text-align:center!important;
}
/* ×: fester Touch-Target, kein Doppeltipp-Zoom. */
.create-page .home-premium-creator .date-dimension .date-head .remove-dim{
touch-action:manipulation!important;
-webkit-user-select:none!important;
user-select:none!important;
}
/* Datum-Zeitbox verwendet exakt dieselben Mobile-Masse wie der aktive Wochentag. */
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel,
.create-page .home-premium-creator .date-dimension .day-time-panel{
grid-template-columns:108px 28px 108px!important;
grid-template-areas:"caption caption caption" "start dash end"!important;
justify-content:center!important;
align-items:center!important;
column-gap:10px!important;
row-gap:8px!important;
margin-top:10px!important;
padding:10px 16px!important;
box-sizing:border-box!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel .time-caption,
.create-page .home-premium-creator .date-dimension .day-time-panel .time-caption{
grid-area:caption!important;
grid-column:auto!important;
justify-self:start!important;
width:100%!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel .dim-start,
.create-page .home-premium-creator .date-dimension .day-time-panel .dim-start{grid-area:start!important;grid-column:auto!important}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel .time-dash,
.create-page .home-premium-creator .date-dimension .day-time-panel .time-dash{
grid-area:dash!important;grid-column:auto!important;
width:28px!important;min-width:28px!important;max-width:28px!important;
justify-self:center!important;text-align:center!important;margin:0!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel .dim-end,
.create-page .home-premium-creator .date-dimension .day-time-panel .dim-end{grid-area:end!important;grid-column:auto!important}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel .dim-start,
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel .dim-end,
.create-page .home-premium-creator .date-dimension .day-time-panel .dim-start,
.create-page .home-premium-creator .date-dimension .day-time-panel .dim-end{
width:108px!important;min-width:108px!important;max-width:108px!important;
justify-self:center!important;box-sizing:border-box!important;
padding:9px 8px!important;font:inherit!important;
}
/* Mobile: beide Aktionsbuttons horizontal mittig. */
.create-page .home-premium-creator #addDate,
.create-page .home-premium-creator #createSubmit{
margin-left:auto!important;
margin-right:auto!important;
}
}
/* V246 / 2026-09-06 — Mobile Feinschliff: Datum-Zeitbox exakt wie Wochentage
und kein Doppeltipp-Zoom auf Wochentage. */
@media(max-width:560px){
.create-page .home-premium-creator .weekday-toggle{
touch-action:manipulation!important;
-webkit-user-select:none!important;
user-select:none!important;
-webkit-touch-callout:none!important;
-webkit-tap-highlight-color:transparent!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel,
.create-page .home-premium-creator .date-dimension .day-time-panel{
display:grid!important;
grid-template-columns:108px 28px 108px!important;
grid-template-areas:"caption caption caption" "start dash end"!important;
justify-content:center!important;
align-items:center!important;
column-gap:10px!important;
row-gap:8px!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
margin-top:10px!important;
padding:10px 16px!important;
border:1px solid var(--line)!important;
border-radius:14px!important;
background:#fff!important;
box-sizing:border-box!important;
overflow:hidden!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel .time-caption,
.create-page .home-premium-creator .date-dimension .day-time-panel .time-caption{
grid-area:caption!important;
grid-column:auto!important;
justify-self:start!important;
width:100%!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel .dim-start,
.create-page .home-premium-creator .date-dimension .day-time-panel .dim-start{grid-area:start!important;grid-column:auto!important}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel .time-dash,
.create-page .home-premium-creator .date-dimension .day-time-panel .time-dash{
grid-area:dash!important;
grid-column:auto!important;
width:28px!important;
min-width:28px!important;
max-width:28px!important;
justify-self:center!important;
text-align:center!important;
margin:0!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel .dim-end,
.create-page .home-premium-creator .date-dimension .day-time-panel .dim-end{grid-area:end!important;grid-column:auto!important}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel input[type="time"],
.create-page .home-premium-creator .date-dimension .day-time-panel input[type="time"]{
-webkit-appearance:none!important;
appearance:none!important;
display:block!important;
width:108px!important;
min-width:108px!important;
max-width:108px!important;
height:auto!important;
min-height:0!important;
box-sizing:border-box!important;
border:1px solid var(--line)!important;
border-radius:10px!important;
background:#fbfbfd!important;
background-clip:padding-box!important;
padding:9px 8px!important;
font:inherit!important;
font-variant-numeric:tabular-nums!important;
line-height:1.2!important;
text-align:center!important;
justify-self:center!important;
overflow:visible!important;
box-shadow:none!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel input[type="time"]::-webkit-datetime-edit,
.create-page .home-premium-creator .date-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit{
display:block!important;
min-width:0!important;
width:auto!important;
padding:0!important;
margin:0!important;
text-align:center!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel input[type="time"]::-webkit-datetime-edit-fields-wrapper,
.create-page .home-premium-creator .date-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit-fields-wrapper{
padding:0!important;
margin:0!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel input[type="time"]::-webkit-date-and-time-value,
.create-page .home-premium-creator .date-dimension .day-time-panel input[type="time"]::-webkit-date-and-time-value{
text-align:center!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel input[type="time"]::-webkit-calendar-picker-indicator,
.create-page .home-premium-creator .date-dimension .day-time-panel input[type="time"]::-webkit-calendar-picker-indicator{
display:none!important;
-webkit-appearance:none!important;
width:0!important;
min-width:0!important;
margin:0!important;
padding:0!important;
}
}
/* V247 / 2026-09-06 — Mobile: + Datum hinzufügen wirklich mittig. */
@media(max-width:560px){
.create-page .home-premium-creator #addDate{
display:block!important;
width:max-content!important;
max-width:100%!important;
margin-left:auto!important;
margin-right:auto!important;
}
}
/* V249 / 2026-09-06 — Mobile: weisse Datums-Zeitbox 1:1 wie Wochentage. */
@media(max-width:560px){
.create-page .home-premium-creator .weekday-dimension.active,
.create-page .home-premium-creator .date-dimension{
display:block!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
margin:0!important;
padding:0!important;
box-sizing:border-box!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel,
.create-page .home-premium-creator .date-dimension .day-time-panel{
display:grid!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
margin:10px 0 0 0!important;
padding:10px 16px!important;
box-sizing:border-box!important;
border:1px solid var(--line)!important;
border-radius:14px!important;
background:#fff!important;
overflow:hidden!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel .time-caption,
.create-page .home-premium-creator .date-dimension .day-time-panel .time-caption{
margin:0!important;
padding:0!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel input[type="time"],
.create-page .home-premium-creator .date-dimension .day-time-panel input[type="time"]{
margin:0!important;
}
}
/* V250 / 2026-09-06 — Mobile final: Datums-Zeitbox übernimmt links/rechts
exakt die Geometrie der Wochentags-Zeitbox. Höhere Spezifität als die
älteren #createForm-Datumsregeln verhindert, dass native time-Inputs wieder
auf 100% Breite wachsen. Desktop bleibt unberührt. */
@media(max-width:560px){
.create-page .home-premium-creator #createForm .date-dimension .day-time-panel,
.create-page .home-premium-creator #createForm .weekday-dimension.active .day-time-panel{
display:grid!important;
grid-template-columns:108px 28px 108px!important;
grid-template-areas:"caption caption caption" "start dash end"!important;
justify-content:center!important;
align-items:center!important;
column-gap:10px!important;
row-gap:8px!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
margin:10px 0 0!important;
padding:10px 16px!important;
box-sizing:border-box!important;
border:1px solid var(--line)!important;
border-radius:14px!important;
background:#fff!important;
overflow:hidden!important;
}
.create-page .home-premium-creator #createForm .date-dimension .day-time-panel .time-caption,
.create-page .home-premium-creator #createForm .weekday-dimension.active .day-time-panel .time-caption{
grid-area:caption!important;
grid-column:auto!important;
justify-self:start!important;
width:100%!important;
margin:0!important;
padding:0!important;
}
.create-page .home-premium-creator #createForm .date-dimension .day-time-panel .dim-start,
.create-page .home-premium-creator #createForm .weekday-dimension.active .day-time-panel .dim-start{
grid-area:start!important;
grid-column:auto!important;
}
.create-page .home-premium-creator #createForm .date-dimension .day-time-panel .time-dash,
.create-page .home-premium-creator #createForm .weekday-dimension.active .day-time-panel .time-dash{
grid-area:dash!important;
grid-column:auto!important;
width:28px!important;
min-width:28px!important;
max-width:28px!important;
justify-self:center!important;
text-align:center!important;
margin:0!important;
}
.create-page .home-premium-creator #createForm .date-dimension .day-time-panel .dim-end,
.create-page .home-premium-creator #createForm .weekday-dimension.active .day-time-panel .dim-end{
grid-area:end!important;
grid-column:auto!important;
}
.create-page .home-premium-creator #createForm .date-dimension .day-time-panel input[type="time"],
.create-page .home-premium-creator #createForm .weekday-dimension.active .day-time-panel input[type="time"]{
-webkit-appearance:none!important;
appearance:none!important;
display:block!important;
inline-size:108px!important;
width:108px!important;
min-inline-size:108px!important;
min-width:108px!important;
max-inline-size:108px!important;
max-width:108px!important;
flex:none!important;
box-sizing:border-box!important;
border:1px solid var(--line)!important;
border-radius:10px!important;
background:#fbfbfd!important;
padding:9px 8px!important;
margin:0!important;
font:inherit!important;
font-variant-numeric:tabular-nums!important;
line-height:1.2!important;
text-align:center!important;
justify-self:center!important;
box-shadow:none!important;
}
.create-page .home-premium-creator #createForm #addDate{
display:table!important;
width:auto!important;
max-width:calc(100% - 32px)!important;
margin-left:auto!important;
margin-right:auto!important;
touch-action:manipulation!important;
}
}
/* V251 / 2026-09-06 — Mobile: grosser sicherer Touchbereich rund um das ×.
Optik bleibt gleich; der rechte Bereich des schwarzen Datumskopfs gehoert
zum Entfernen-Button, damit Taps knapp unter/neben dem × nicht den nativen
Datumskalender des darunterliegenden input[type=date] oeffnen. */
@media(max-width:560px){
.create-page .home-premium-creator #createForm .date-dimension .date-head{
position:relative!important;
overflow:hidden!important;
}
.create-page .home-premium-creator #createForm .date-dimension .date-head .remove-dim{
position:absolute!important;
z-index:6!important;
top:0!important;
right:0!important;
bottom:0!important;
left:auto!important;
transform:none!important;
width:58px!important;
min-width:58px!important;
max-width:58px!important;
height:100%!important;
min-height:100%!important;
margin:0!important;
padding:0!important;
display:grid!important;
place-items:center!important;
border:0!important;
border-radius:0 14px 14px 0!important;
background:transparent!important;
color:#fff!important;
font-size:22px!important;
line-height:1!important;
touch-action:manipulation!important;
-webkit-user-select:none!important;
user-select:none!important;
-webkit-touch-callout:none!important;
-webkit-tap-highlight-color:transparent!important;
}
/* Datum bleibt trotz groesserem Touchziel exakt visuell zentriert. */
.create-page .home-premium-creator #createForm .date-dimension .date-head .dim-date{
padding-left:58px!important;
padding-right:58px!important;
text-align:center!important;
text-align-last:center!important;
}
}
/* V252 / 2026-09-06 — 2026 Farbwelt für die Startseite.
Ruhiges Teal für Zeitangaben, weichere Sage/Teal-Grüntöne für Visuals. */
.create-page{
--green:#187c68;
--zf-time-accent:#0f766e;
--zf-green-softest:#e4f1ec;
--zf-green-soft:#b8ddcf;
--zf-green-mid:#66b59b;
--zf-green-strong:#278e72;
}
.create-page .home-premium-hero .mini-grid .g1{background:var(--zf-green-softest)!important}
.create-page .home-premium-hero .mini-grid .g2{background:var(--zf-green-soft)!important}
.create-page .home-premium-hero .mini-grid .g3{background:var(--zf-green-mid)!important}
.create-page .home-premium-hero .mini-grid .g4{background:var(--zf-green-strong)!important}
.create-page .home-premium-creator input[type="time"]{
color:var(--zf-time-accent)!important;
accent-color:var(--zf-time-accent)!important;
caret-color:var(--zf-time-accent)!important;
}
@supports selector(input::-webkit-calendar-picker-indicator){
.create-page .home-premium-creator input[type="time"]::-webkit-datetime-edit,
.create-page .home-premium-creator input[type="time"]::-webkit-datetime-edit-fields-wrapper,
.create-page .home-premium-creator input[type="time"]::-webkit-datetime-edit-hour-field,
.create-page .home-premium-creator input[type="time"]::-webkit-datetime-edit-minute-field,
.create-page .home-premium-creator input[type="time"]::-webkit-datetime-edit-text{
color:var(--zf-time-accent)!important;
}
}
/* V253 / 2026-09-06 — globale ZeitFinder-Farbwelt nach der finalen Startseite.
Teal = Interaktion/Zeit/Fokus, Sage = Verfügbarkeit/positive Zustände,
Navy = Primäraktionen und Struktur, Gold bleibt exklusiv für „Bevorzugt“. */
:root{
--zf-teal:#0f766e;
--zf-teal-dark:#176b5b;
--zf-teal-soft:#e8f3f0;
--zf-sage-softest:#e4f1ec;
--zf-sage-soft:#b8ddcf;
--zf-sage-mid:#66b59b;
--zf-sage-strong:#278e72;
--zf-focus-ring:rgba(15,118,110,.16);
}
/* Fokus und interaktive Eingaben websiteweit in derselben Teal-Sprache. */
input:focus,select:focus,textarea:focus{accent-color:var(--zf-teal)}
.field input:focus,.field select:focus,
.join-box input:focus,.share-url input:focus,
.admin-participant input:focus,.admin-meta-field input:focus,
.edit-mail-box input:focus,.edit-link-row input:focus{
border-color:var(--zf-teal)!important;
box-shadow:0 0 0 3px var(--zf-focus-ring)!important;
}
/* Zeitangaben auch ausserhalb der Startseite im neuen Akzent. */
input[type="time"]{
accent-color:var(--zf-teal);
caret-color:var(--zf-teal);
}
.event-page input[type="time"],
.admin-panel input[type="time"],
.modal input[type="time"]{color:var(--zf-teal)}
/* Verfügbarkeiten / Heatmap / positive Zustände. */
.cell.mine{background:var(--zf-sage-strong)!important}
.cell.heat{background:rgba(24,124,104,var(--heat-alpha,0))}
.legend-low{background:var(--zf-sage-softest)!important}
.legend-high{background:var(--zf-sage-strong)!important}
.fixed-option-choice.mine{background:var(--zf-sage-strong)!important;border-color:var(--zf-sage-strong)!important}
.analytics-bar-row>i>b,.timezone-meter i{background:var(--zf-sage-strong)!important}
/* Blaue Hinweis-/Fokuszustände werden zu Teal. */
#joinBox.name-required-attention #nameInput,
.field.title-required-attention #title,
#customTermDuration.mobile-next-input{
border-color:var(--zf-teal)!important;
box-shadow:0 0 0 3px var(--zf-focus-ring)!important;
}
/* Admin-Regeln: wiederkehrende/Zeitfenster-Funktionen passen zur Markenfarbe. */
#adminPanel .schedule-rule-icon-window,
#adminPanel .schedule-rule-icon-recurring{background:var(--zf-teal-soft)!important;color:var(--zf-teal)!important}
#adminPanel .schedule-rule-card select:focus,
#adminPanel .schedule-rule-card input:focus,
#adminPanel .schedule-individual-row select:focus,
#adminPanel .schedule-individual-row input:focus{border-color:#6bb0a5!important;box-shadow:0 0 0 3px var(--zf-focus-ring)!important}
/* Erfolgs-/KI-Akzente ruhig und konsistent. */
#aiResultText .schedule-section-best-date h4,
#aiResultText .schedule-section-best-date .schedule-item,
.ai-free-text-result-head,
.ai-free-text-result-body>.schedule-section>h4,
.ai-result-question-answer>strong,
.admin-setting-status.saved{color:var(--zf-teal)!important}
/* V254 / 2026-09-06 — Desktop-Startseite aus der finalen Mobile-Version skaliert.
Nur .create-page / Startseite. Mobile <= 760 px bleibt unverändert. */
@media (min-width:761px){
.create-page .shell{
width:min(100% - 48px,1220px)!important;
max-width:1220px!important;
margin-inline:auto!important;
padding:28px 0 56px!important;
}
.create-page .topbar{
margin-bottom:clamp(34px,4vw,58px)!important;
}
.create-page .brand{
font-size:1.05rem!important;
}
/* Hero: dieselbe ruhige Mobile-Hierarchie, auf Desktop als ausgewogene 2-Spalten-Komposition. */
.create-page .home-premium-hero{
display:grid!important;
grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr)!important;
gap:clamp(42px,6vw,84px)!important;
align-items:center!important;
padding:12px 0 34px!important;
}
.create-page .home-premium-hero h1{
max-width:760px!important;
margin:12px 0 18px!important;
font-size:clamp(3.65rem,5.9vw,5.35rem)!important;
line-height:.95!important;
letter-spacing:-.06em!important;
}
.create-page .home-premium-hero .lead{
max-width:680px!important;
margin:0!important;
font-size:clamp(1.08rem,1.6vw,1.28rem)!important;
line-height:1.56!important;
}
.create-page .home-premium-hero .hero-card{
width:100%!important;
max-width:470px!important;
justify-self:end!important;
padding:24px!important;
border-radius:24px!important;
transform:rotate(.8deg)!important;
}
/* Drei Erklärschritte: gleiche Kartenwirkung wie Mobile, nur nebeneinander. */
.create-page .home-premium-steps{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:14px!important;
margin:22px 0 38px!important;
}
.create-page .home-premium-steps .step{
min-height:104px!important;
padding:18px 20px!important;
border-radius:18px!important;
}
.create-page .home-premium-steps .step strong{
margin-bottom:7px!important;
font-size:.98rem!important;
}
.create-page .home-premium-steps .step span{
display:block!important;
font-size:.9rem!important;
line-height:1.42!important;
}
/* Formular: Mobile-Karte skaliert, aber nicht über die ganze Desktop-Breite gestreckt. */
.create-page .home-premium-creator{
width:min(100%,1040px)!important;
margin:0 auto 54px!important;
padding:clamp(26px,3vw,34px)!important;
border-radius:24px!important;
container-type:inline-size!important;
}
.create-page .home-premium-creator h2{
font-size:clamp(1.45rem,2vw,1.7rem)!important;
margin-bottom:18px!important;
}
.create-page .home-premium-creator .single-title{
grid-template-columns:minmax(0,620px)!important;
}
.create-page .home-premium-creator .mode-switch{
display:flex!important;
width:max-content!important;
max-width:100%!important;
gap:8px!important;
margin:20px 0 13px!important;
}
.create-page .home-premium-creator .mode-btn{
min-width:142px!important;
padding:11px 16px!important;
}
.create-page .home-premium-creator .choice-help{
margin:4px 0 14px!important;
font-size:.92rem!important;
line-height:1.45!important;
}
/* Wochentage/Daten: Mobile-Proportionen in kompakter Desktop-Grösse.
Drei Kacheln passen bequem in die Formularkarte; bei weniger Platz wird responsiv umgebrochen. */
.create-page .home-premium-creator{
--zf-desktop-tile:min(292px,calc((100cqi - 28px - 68px)/3));
}
.create-page .home-premium-creator .weekday-toggle-picker,
.create-page .home-premium-creator #createForm #dates{
display:grid!important;
grid-template-columns:repeat(auto-fit,minmax(250px,var(--zf-desktop-tile)))!important;
gap:14px!important;
justify-content:start!important;
align-items:start!important;
width:100%!important;
max-width:100%!important;
}
.create-page .home-premium-creator .weekday-dimension,
.create-page .home-premium-creator .weekday-toggle,
.create-page .home-premium-creator .weekday-dimension .day-time-panel,
.create-page .home-premium-creator #createForm #dates > .date-dimension,
.create-page .home-premium-creator .date-dimension .date-head,
.create-page .home-premium-creator .date-dimension .day-time-panel{
width:var(--zf-desktop-tile)!important;
min-width:0!important;
max-width:var(--zf-desktop-tile)!important;
}
/* Kopf und Zeitbox übernehmen dieselbe vertikale Geometrie wie Mobile. */
.create-page .home-premium-creator .weekday-toggle,
.create-page .home-premium-creator .date-dimension .date-head .dim-date{
min-height:44px!important;
padding-top:11px!important;
padding-bottom:11px!important;
border-radius:14px!important;
font-size:.98rem!important;
line-height:1.2!important;
}
.create-page .home-premium-creator .date-dimension .date-head .dim-date{
padding-left:48px!important;
padding-right:48px!important;
text-align:center!important;
text-align-last:center!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel,
.create-page .home-premium-creator .date-dimension .day-time-panel{
display:grid!important;
grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr)!important;
grid-template-areas:"caption caption caption" "start dash end"!important;
column-gap:9px!important;
row-gap:8px!important;
margin-top:10px!important;
padding:10px 12px!important;
border:1px solid var(--line)!important;
border-radius:14px!important;
background:#fff!important;
box-sizing:border-box!important;
overflow:hidden!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel .time-caption,
.create-page .home-premium-creator .date-dimension .day-time-panel .time-caption{
grid-area:caption!important;
grid-column:auto!important;
width:100%!important;
margin:0!important;
padding:0!important;
justify-self:start!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel .dim-start,
.create-page .home-premium-creator .date-dimension .day-time-panel .dim-start{grid-area:start!important;grid-column:auto!important}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel .time-dash,
.create-page .home-premium-creator .date-dimension .day-time-panel .time-dash{
grid-area:dash!important;
grid-column:auto!important;
width:24px!important;
min-width:24px!important;
max-width:24px!important;
justify-self:center!important;
text-align:center!important;
margin:0!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel .dim-end,
.create-page .home-premium-creator .date-dimension .day-time-panel .dim-end{grid-area:end!important;grid-column:auto!important}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel input[type="time"],
.create-page .home-premium-creator .date-dimension .day-time-panel input[type="time"]{
width:100%!important;
min-width:0!important;
max-width:100%!important;
margin:0!important;
box-sizing:border-box!important;
padding:9px 8px!important;
border-radius:10px!important;
}
/* Untere Formularbereiche bleiben kompakt statt übertrieben breit. */
.create-page .home-premium-creator .email-field-bottom{
width:min(100%,620px)!important;
max-width:620px!important;
margin-top:26px!important;
}
.create-page .home-premium-creator #addDate{
display:block!important;
width:max-content!important;
margin:14px 0 0!important;
}
.create-page .home-premium-creator #createSubmit{
min-width:250px!important;
padding-inline:20px!important;
}
.create-page .footer{
width:min(100%,1040px)!important;
margin-inline:auto!important;
}
}
/* Kleiner Desktop / Tablet quer: zwei statt drei Kacheln, ohne horizontales Quetschen. */
@media (min-width:761px) and (max-width:1040px){
.create-page .home-premium-hero{
grid-template-columns:minmax(0,1fr) minmax(320px,.85fr)!important;
gap:36px!important;
}
.create-page .home-premium-hero h1{font-size:clamp(3.25rem,6vw,4.55rem)!important}
.create-page .home-premium-creator{
--zf-desktop-tile:min(300px,calc((100cqi - 14px - 60px)/2));
}
.create-page .home-premium-creator .weekday-toggle-picker,
.create-page .home-premium-creator #createForm #dates{
grid-template-columns:repeat(auto-fit,minmax(260px,var(--zf-desktop-tile)))!important;
}
}
/* Breite Desktops: etwas mehr Luft, aber keine übergrossen Formularelemente. */
@media (min-width:1280px){
.create-page .home-premium-hero{padding-top:20px!important;padding-bottom:42px!important}
.create-page .home-premium-steps{margin-bottom:42px!important}
.create-page .home-premium-creator{width:min(100%,1060px)!important}
}
/* V255 / 2026-09-06 — Preferred-Farbwelt: modernes Ochre / Caramel Gold. */
:root{
--preferred:#d4a72c;
--preferred-ink:#6b5200;
--preferred-soft:#f7edc8;
}
.mark-btn.preferred{color:var(--preferred-ink)!important}
.mark-btn.preferred.active,
.mark-toolbar .mark-btn.preferred.active,
.cell.mine-preferred,
.fixed-option-choice.mine-preferred{
background:var(--preferred)!important;
background-color:var(--preferred)!important;
border-color:var(--preferred)!important;
color:var(--preferred-ink)!important;
}
.pref-count,.star-key,
.fixed-option-choice.heat span,
.fixed-option-people-line.preferred .fixed-option-can-label{color:var(--preferred-ink)!important}
.school-real-lesson.preferred{background:var(--preferred-soft)!important}
/* V256 / 2026-09-06 — Desktop: Löschkreuz bei Regeln für einzelne Tage/Daten
immer als letztes Element ganz rechts. Mobile/Tablet bleiben unverändert. */
@media (min-width:761px){
#adminPanel .schedule-individual-override-row .schedule-override-delete{
order:99!important;
margin-left:auto!important;
margin-right:0!important;
flex:0 0 40px!important;
width:40px!important;
min-width:40px!important;
height:40px!important;
align-self:center!important;
}
}
/* V257 / 2026-09-06 — Regel-Buttons farblich an die neue Teal/Sage-Palette angleichen. */
#adminPanel .schedule-rule-adders-global .schedule-add-rule,
#adminPanel .schedule-rule-adders-individual .schedule-add-rule{
color:#0F766E!important;
border-color:#B8D8D1!important;
background:#F8FCFA!important;
}
@media (hover:hover) and (pointer:fine){
#adminPanel .schedule-rule-adders-global .schedule-add-rule:hover,
#adminPanel .schedule-rule-adders-individual .schedule-add-rule:hover{
color:#0F766E!important;
border-color:#8EC5B5!important;
background:#E4F1EC!important;
}
}
#adminPanel .schedule-rule-adders-global .schedule-add-rule:focus-visible,
#adminPanel .schedule-rule-adders-individual .schedule-add-rule:focus-visible{
outline:3px solid rgba(15,118,110,.16)!important;
outline-offset:2px!important;
}
/* V258 / 2026-09-06 — Desktop Startseite: kompakte Karten statt gestreckter Reihen.
Mobile <= 760 px bleibt unverändert. */
@media (min-width:761px){
.create-page .home-premium-creator{
width:min(100%,980px)!important;
max-width:980px!important;
--zf-desktop-tile:286px;
}
.create-page .home-premium-creator .weekday-toggle-picker,
.create-page .home-premium-creator #createForm #dates{
display:grid!important;
grid-template-columns:repeat(auto-fill,var(--zf-desktop-tile))!important;
grid-auto-flow:row!important;
gap:16px!important;
justify-content:start!important;
align-items:start!important;
width:100%!important;
max-width:100%!important;
overflow:visible!important;
}
.create-page .home-premium-creator .weekday-dimension,
.create-page .home-premium-creator #createForm #dates > .date-dimension{
display:block!important;
width:var(--zf-desktop-tile)!important;
min-width:var(--zf-desktop-tile)!important;
max-width:var(--zf-desktop-tile)!important;
margin:0!important;
padding:0!important;
box-sizing:border-box!important;
}
.create-page .home-premium-creator .weekday-toggle,
.create-page .home-premium-creator .date-dimension .date-head,
.create-page .home-premium-creator .weekday-dimension .day-time-panel,
.create-page .home-premium-creator .date-dimension .day-time-panel{
width:100%!important;
min-width:0!important;
max-width:100%!important;
box-sizing:border-box!important;
}
/* Jeder aktive Wochentag bleibt eine eigenständige Karte. */
.create-page .home-premium-creator .weekday-toggle{
display:block!important;
min-height:46px!important;
margin:0!important;
padding:11px 14px!important;
border-radius:14px!important;
text-align:center!important;
white-space:nowrap!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel,
.create-page .home-premium-creator .date-dimension .day-time-panel{
display:grid!important;
grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr)!important;
grid-template-areas:"caption caption caption" "start dash end"!important;
column-gap:10px!important;
row-gap:8px!important;
margin:10px 0 0!important;
padding:10px 12px!important;
overflow:hidden!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel input[type="time"],
.create-page .home-premium-creator .date-dimension .day-time-panel input[type="time"]{
display:block!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
margin:0!important;
padding:9px 8px!important;
box-sizing:border-box!important;
}
/* Datumskopf: nativen Desktop-Input vollständig in die schwarze Karte zwingen. */
.create-page .home-premium-creator .date-dimension .date-head{
position:relative!important;
display:block!important;
height:46px!important;
min-height:46px!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
border:0!important;
border-radius:14px!important;
background:#111827!important;
}
.create-page .home-premium-creator .date-dimension .date-head .dim-date{
-webkit-appearance:none!important;
appearance:none!important;
display:block!important;
inline-size:100%!important;
width:100%!important;
min-inline-size:0!important;
min-width:0!important;
max-inline-size:100%!important;
max-width:100%!important;
height:46px!important;
min-height:46px!important;
margin:0!important;
padding:11px 48px!important;
box-sizing:border-box!important;
border:0!important;
border-radius:14px!important;
background:#111827!important;
color:#fff!important;
font:inherit!important;
font-weight:750!important;
line-height:24px!important;
text-align:center!important;
text-align-last:center!important;
overflow:hidden!important;
}
.create-page .home-premium-creator .date-dimension .date-head .dim-date::-webkit-date-and-time-value,
.create-page .home-premium-creator .date-dimension .date-head .dim-date::-webkit-datetime-edit{
width:100%!important;
min-width:0!important;
margin:0!important;
padding:0!important;
text-align:center!important;
color:#fff!important;
}
.create-page .home-premium-creator .date-dimension .date-head .dim-date::-webkit-calendar-picker-indicator{
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
margin:0!important;
padding:0!important;
opacity:0!important;
cursor:pointer!important;
}
.create-page .home-premium-creator .date-dimension .date-head .remove-dim{
position:absolute!important;
z-index:8!important;
top:0!important;
right:0!important;
bottom:0!important;
left:auto!important;
width:46px!important;
min-width:46px!important;
max-width:46px!important;
height:46px!important;
margin:0!important;
padding:0!important;
transform:none!important;
display:grid!important;
place-items:center!important;
border:0!important;
border-radius:0 14px 14px 0!important;
background:transparent!important;
color:#fff!important;
}
.create-page .home-premium-creator .email-field-bottom{
width:min(100%,620px)!important;
}
}
@media (min-width:761px) and (max-width:1020px){
.create-page .home-premium-creator{
width:min(100%,720px)!important;
--zf-desktop-tile:calc((100% - 16px) / 2);
}
}
/* V259 / 2026-09-06 — Desktop-Kacheln exakt nach Mobile-Referenz:
fixe Kachelgrösse, bei mehr Platz einfach mehr Spalten. Mobile <=760px bleibt unverändert. */
@media (min-width:761px){
/* Die Startseite darf auf grossen Bildschirmen breiter werden, damit statt
gestreckter Karten einfach mehr identische Mobile-Karten nebeneinander passen. */
.create-page .shell{
max-width:1440px!important;
}
.create-page .home-premium-creator{
width:100%!important;
max-width:100%!important;
--zf-desktop-tile:320px!important;
}
.create-page .home-premium-creator .weekday-toggle-picker,
.create-page .home-premium-creator #createForm #dates{
display:grid!important;
grid-template-columns:repeat(auto-fill,320px)!important;
grid-auto-columns:320px!important;
gap:14px!important;
justify-content:start!important;
align-items:start!important;
width:100%!important;
max-width:100%!important;
}
.create-page .home-premium-creator .weekday-dimension,
.create-page .home-premium-creator #createForm #dates > .date-dimension{
width:320px!important;
min-width:320px!important;
max-width:320px!important;
}
.create-page .home-premium-creator .weekday-toggle,
.create-page .home-premium-creator .date-dimension .date-head,
.create-page .home-premium-creator .weekday-dimension .day-time-panel,
.create-page .home-premium-creator .date-dimension .day-time-panel{
width:320px!important;
min-width:320px!important;
max-width:320px!important;
}
/* Kopf und Zeitteil behalten dieselben Proportionen wie Mobile. */
.create-page .home-premium-creator .weekday-toggle,
.create-page .home-premium-creator .date-dimension .date-head,
.create-page .home-premium-creator .date-dimension .date-head .dim-date{
min-height:46px!important;
height:46px!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel,
.create-page .home-premium-creator .date-dimension .day-time-panel{
grid-template-columns:108px 28px 108px!important;
grid-template-areas:"caption caption caption" "start dash end"!important;
justify-content:center!important;
align-items:center!important;
column-gap:10px!important;
row-gap:8px!important;
margin-top:10px!important;
padding:10px 16px!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel input[type="time"],
.create-page .home-premium-creator .date-dimension .day-time-panel input[type="time"]{
width:108px!important;
min-width:108px!important;
max-width:108px!important;
padding:9px 8px!important;
justify-self:center!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel .time-dash,
.create-page .home-premium-creator .date-dimension .day-time-panel .time-dash{
width:28px!important;
min-width:28px!important;
max-width:28px!important;
justify-self:center!important;
}
}
/* Kein Zwischen-Breakpoint darf die Karten wieder flexibel verbreitern. */
@media (min-width:761px) and (max-width:1020px){
.create-page .home-premium-creator{
width:100%!important;
max-width:100%!important;
--zf-desktop-tile:320px!important;
}
.create-page .home-premium-creator .weekday-toggle-picker,
.create-page .home-premium-creator #createForm #dates{
grid-template-columns:repeat(auto-fill,320px)!important;
}
}
/* V262 / 2026-09-06 — Desktop-Startseite zurück zur ursprünglichen ruhigen Komposition.
Mobile bleibt Referenz. Farbkonzept bleibt unverändert. Auf Desktop ändern sich nur
Anordnung/Proportionen; Kacheln behalten eine fixe Mobile-nahe Größe. */
@media (min-width:761px){
/* Äußere Seite darf breit sein, aber Hero/Steps bleiben wie in der ersten Version kompakt. */
.create-page .shell{
width:min(calc(100% - 48px),1440px)!important;
max-width:1440px!important;
margin-inline:auto!important;
padding:24px 0 56px!important;
}
.create-page .home-premium-hero,
.create-page .home-premium-steps{
width:min(100%,1180px)!important;
max-width:1180px!important;
margin-left:auto!important;
margin-right:auto!important;
}
.create-page .home-premium-hero{
display:grid!important;
grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr)!important;
gap:42px!important;
align-items:center!important;
margin-top:22px!important;
padding:34px 34px 30px!important;
border-radius:30px!important;
}
.create-page .home-premium-hero h1{
max-width:700px!important;
margin:12px 0 20px!important;
font-size:clamp(3rem,4.25vw,4.85rem)!important;
line-height:1.02!important;
letter-spacing:-.045em!important;
}
.create-page .home-premium-hero .lead{
max-width:680px!important;
margin:0!important;
font-size:1.15rem!important;
line-height:1.55!important;
}
.create-page .home-premium-hero .hero-card{
width:100%!important;
max-width:470px!important;
justify-self:end!important;
padding:24px!important;
border-radius:24px!important;
transform:rotate(1.2deg)!important;
}
.create-page .home-premium-steps{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:14px!important;
margin-top:18px!important;
margin-bottom:44px!important;
}
.create-page .home-premium-steps .step{
min-height:0!important;
padding:18px!important;
border-radius:20px!important;
}
.create-page .home-premium-steps .step strong{
margin-bottom:6px!important;
font-size:1rem!important;
}
.create-page .home-premium-steps .step span{
font-size:.9rem!important;
line-height:1.45!important;
}
/* Creator bleibt großzügig, aber nicht als ein gestrecktes Kachel-Layout. */
.create-page .home-premium-creator{
width:100%!important;
max-width:100%!important;
margin:0 auto 54px!important;
padding:28px!important;
border-radius:30px!important;
container-type:inline-size!important;
--zf-desktop-tile:320px!important;
}
.create-page .home-premium-creator h2{
margin-bottom:20px!important;
font-size:1.7rem!important;
}
.create-page .home-premium-creator .single-title{
grid-template-columns:minmax(0,760px)!important;
}
/* FIXE KACHELLOGIK: dieselbe Kachelgröße unabhängig vom Fenster.
Mehr Platz = mehr Kacheln pro Reihe, niemals breitere Kacheln. */
.create-page .home-premium-creator .weekday-toggle-picker,
.create-page .home-premium-creator #createForm #dates{
display:grid!important;
grid-template-columns:repeat(auto-fill,320px)!important;
grid-auto-columns:320px!important;
grid-auto-flow:row!important;
gap:14px!important;
justify-content:start!important;
align-items:start!important;
width:100%!important;
max-width:100%!important;
margin-left:0!important;
margin-right:0!important;
overflow:visible!important;
}
.create-page .home-premium-creator .weekday-dimension,
.create-page .home-premium-creator #createForm #dates > .date-dimension{
position:relative!important;
display:block!important;
inline-size:320px!important;
width:320px!important;
min-inline-size:320px!important;
min-width:320px!important;
max-inline-size:320px!important;
max-width:320px!important;
margin:0!important;
padding:0!important;
opacity:1!important;
box-sizing:border-box!important;
}
.create-page .home-premium-creator .weekday-toggle,
.create-page .home-premium-creator .date-dimension .date-head,
.create-page .home-premium-creator .weekday-dimension .day-time-panel,
.create-page .home-premium-creator .date-dimension .day-time-panel{
inline-size:320px!important;
width:320px!important;
min-inline-size:320px!important;
min-width:320px!important;
max-inline-size:320px!important;
max-width:320px!important;
box-sizing:border-box!important;
}
/* Kopf = Mobile-Proportion. */
.create-page .home-premium-creator .weekday-toggle,
.create-page .home-premium-creator .date-dimension .date-head,
.create-page .home-premium-creator .date-dimension .date-head .dim-date{
height:46px!important;
min-height:46px!important;
max-height:46px!important;
border-radius:14px!important;
}
.create-page .home-premium-creator .weekday-toggle{
display:block!important;
margin:0!important;
padding:11px 14px!important;
text-align:center!important;
white-space:nowrap!important;
}
.create-page .home-premium-creator .date-dimension .date-head{
position:relative!important;
display:block!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
background:#111827!important;
}
.create-page .home-premium-creator .date-dimension .date-head .dim-date{
-webkit-appearance:none!important;
appearance:none!important;
display:block!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
margin:0!important;
padding:11px 50px!important;
border:0!important;
background:#111827!important;
color:#fff!important;
text-align:center!important;
text-align-last:center!important;
font:inherit!important;
font-weight:750!important;
line-height:24px!important;
box-sizing:border-box!important;
}
.create-page .home-premium-creator .date-dimension .date-head .remove-dim{
position:absolute!important;
z-index:8!important;
top:0!important;
right:0!important;
bottom:0!important;
left:auto!important;
width:46px!important;
min-width:46px!important;
max-width:46px!important;
height:46px!important;
margin:0!important;
padding:0!important;
transform:none!important;
display:grid!important;
place-items:center!important;
border-radius:0 14px 14px 0!important;
}
/* Weiße Zeitbox ebenfalls 1:1 in derselben fixen Kachelbreite. */
.create-page .home-premium-creator .weekday-dimension .day-time-panel{
display:none!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel,
.create-page .home-premium-creator .date-dimension .day-time-panel{
display:grid!important;
grid-template-columns:108px 28px 108px!important;
grid-template-areas:"caption caption caption" "start dash end"!important;
justify-content:center!important;
align-items:center!important;
column-gap:10px!important;
row-gap:8px!important;
margin:10px 0 0!important;
padding:10px 16px!important;
border-radius:14px!important;
box-sizing:border-box!important;
overflow:hidden!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel .time-caption,
.create-page .home-premium-creator .date-dimension .day-time-panel .time-caption{
grid-area:caption!important;
grid-column:auto!important;
width:100%!important;
margin:0!important;
padding:0!important;
justify-self:start!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel .dim-start,
.create-page .home-premium-creator .date-dimension .day-time-panel .dim-start{
grid-area:start!important;
grid-column:auto!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel .time-dash,
.create-page .home-premium-creator .date-dimension .day-time-panel .time-dash{
grid-area:dash!important;
grid-column:auto!important;
width:28px!important;
min-width:28px!important;
max-width:28px!important;
justify-self:center!important;
text-align:center!important;
margin:0!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel .dim-end,
.create-page .home-premium-creator .date-dimension .day-time-panel .dim-end{
grid-area:end!important;
grid-column:auto!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel input[type="time"],
.create-page .home-premium-creator .date-dimension .day-time-panel input[type="time"]{
display:block!important;
width:108px!important;
min-width:108px!important;
max-width:108px!important;
margin:0!important;
padding:9px 8px!important;
justify-self:center!important;
box-sizing:border-box!important;
}
/* Untere Elemente wie in der ursprünglichen Desktop-Version kompakt halten. */
.create-page .home-premium-creator .email-field-bottom{
width:min(100%,760px)!important;
max-width:760px!important;
}
.create-page .home-premium-creator #addDate{
display:block!important;
width:max-content!important;
margin:14px 0 0!important;
}
}
/* Kleine Desktops: die Kachel wird nicht skaliert; es passen einfach weniger nebeneinander. */
@media (min-width:761px) and (max-width:1040px){
.create-page .shell{
width:min(calc(100% - 32px),960px)!important;
}
.create-page .home-premium-hero{
grid-template-columns:minmax(0,1fr) minmax(300px,.86fr)!important;
gap:32px!important;
padding:28px 26px!important;
}
.create-page .home-premium-hero h1{
font-size:clamp(2.75rem,5vw,3.75rem)!important;
}
}
/* V263 / 2026-09-06 — NUR Desktop, 1. Seite.
Gesamtproportionen nach V224; Mobile bleibt unangetastet.
Kacheln behalten eine feste Mobile-nahe Größe. Mehr Platz = mehr Kacheln. */
@media (min-width:821px){
.create-page .shell{
width:min(calc(100% - 48px),1440px)!important;
max-width:1440px!important;
margin:0 auto!important;
padding:24px 0 56px!important;
}
/* Hero wieder in den ruhigeren V224-Proportionen. */
.create-page .home-premium-hero{
width:min(100%,1180px)!important;
max-width:1180px!important;
margin:22px auto 0!important;
padding:34px 34px 30px!important;
display:grid!important;
grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr)!important;
gap:34px!important;
align-items:center!important;
border-radius:30px!important;
}
.create-page .home-premium-hero h1{
max-width:690px!important;
margin:12px 0 20px!important;
font-size:clamp(3rem,4.2vw,4.35rem)!important;
line-height:1.02!important;
letter-spacing:-.045em!important;
}
.create-page .home-premium-hero .lead{
max-width:650px!important;
margin:0!important;
font-size:1.12rem!important;
line-height:1.55!important;
}
.create-page .home-premium-hero .hero-card{
width:100%!important;
max-width:450px!important;
justify-self:end!important;
padding:24px!important;
border-radius:24px!important;
transform:rotate(1.2deg)!important;
}
/* Drei Schritte ebenfalls wie V224: kompakt und ruhig. */
.create-page .home-premium-steps{
width:min(100%,1180px)!important;
max-width:1180px!important;
margin:18px auto 44px!important;
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:14px!important;
}
.create-page .home-premium-steps .step{
min-height:0!important;
padding:18px 18px 17px!important;
border-radius:20px!important;
}
.create-page .home-premium-steps .step strong{
margin-bottom:6px!important;
font-size:1rem!important;
}
.create-page .home-premium-steps .step span{
font-size:.9rem!important;
line-height:1.45!important;
}
/* Formular darf breiter werden, damit bei großen Monitoren einfach mehr
identische Kacheln nebeneinander erscheinen. */
.create-page .home-premium-creator{
width:100%!important;
max-width:1440px!important;
margin:0 auto 54px!important;
padding:28px!important;
border-radius:30px!important;
container-type:normal!important;
}
.create-page .home-premium-creator h2{
margin-bottom:20px!important;
font-size:1.7rem!important;
}
.create-page .home-premium-creator .single-title{
grid-template-columns:minmax(0,760px)!important;
}
/* Eine einzige feste Desktop-Kachelgröße. */
.create-page .home-premium-creator .weekday-toggle-picker,
.create-page .home-premium-creator #createForm #dates{
display:grid!important;
grid-template-columns:repeat(auto-fill,320px)!important;
grid-auto-columns:320px!important;
gap:14px!important;
justify-content:start!important;
align-items:start!important;
width:100%!important;
max-width:100%!important;
margin:10px 0 12px!important;
padding:0!important;
overflow:visible!important;
}
.create-page .home-premium-creator .weekday-dimension,
.create-page .home-premium-creator #createForm #dates > .date-dimension{
display:block!important;
width:320px!important;
min-width:320px!important;
max-width:320px!important;
margin:0!important;
padding:0!important;
box-sizing:border-box!important;
opacity:1!important;
}
.create-page .home-premium-creator .weekday-toggle,
.create-page .home-premium-creator .date-dimension .date-head,
.create-page .home-premium-creator .weekday-dimension .day-time-panel,
.create-page .home-premium-creator .date-dimension .day-time-panel{
width:320px!important;
min-width:320px!important;
max-width:320px!important;
box-sizing:border-box!important;
}
/* Kopf exakt gleich groß bei Wochentag und Datum. */
.create-page .home-premium-creator .weekday-toggle,
.create-page .home-premium-creator .date-dimension .date-head,
.create-page .home-premium-creator .date-dimension .date-head .dim-date{
height:46px!important;
min-height:46px!important;
max-height:46px!important;
border-radius:14px!important;
}
.create-page .home-premium-creator .weekday-toggle{
margin:0!important;
padding:11px 14px!important;
text-align:center!important;
}
.create-page .home-premium-creator .date-dimension .date-head{
position:relative!important;
display:block!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
background:#111827!important;
}
.create-page .home-premium-creator .date-dimension .date-head .dim-date{
-webkit-appearance:none!important;
appearance:none!important;
display:block!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
margin:0!important;
padding:11px 50px!important;
border:0!important;
background:#111827!important;
color:#fff!important;
text-align:center!important;
text-align-last:center!important;
font:inherit!important;
font-weight:750!important;
line-height:24px!important;
box-sizing:border-box!important;
}
.create-page .home-premium-creator .date-dimension .date-head .remove-dim{
position:absolute!important;
top:0!important;
right:0!important;
bottom:0!important;
left:auto!important;
width:46px!important;
min-width:46px!important;
max-width:46px!important;
height:46px!important;
margin:0!important;
padding:0!important;
transform:none!important;
display:grid!important;
place-items:center!important;
border-radius:0 14px 14px 0!important;
z-index:8!important;
}
/* Weiße Zeitbox: gleiche feste Geometrie wie auf Mobile. */
.create-page .home-premium-creator .weekday-dimension .day-time-panel{
display:none!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel,
.create-page .home-premium-creator .date-dimension .day-time-panel{
display:grid!important;
grid-template-columns:108px 28px 108px!important;
grid-template-areas:"caption caption caption" "start dash end"!important;
justify-content:center!important;
align-items:center!important;
column-gap:10px!important;
row-gap:8px!important;
margin:10px 0 0!important;
padding:10px 16px!important;
border-radius:14px!important;
box-sizing:border-box!important;
overflow:hidden!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel .time-caption,
.create-page .home-premium-creator .date-dimension .day-time-panel .time-caption{
grid-area:caption!important;
grid-column:auto!important;
width:100%!important;
margin:0!important;
padding:0!important;
justify-self:start!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel .dim-start,
.create-page .home-premium-creator .date-dimension .day-time-panel .dim-start{
grid-area:start!important;
grid-column:auto!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel .time-dash,
.create-page .home-premium-creator .date-dimension .day-time-panel .time-dash{
grid-area:dash!important;
grid-column:auto!important;
width:28px!important;
min-width:28px!important;
max-width:28px!important;
justify-self:center!important;
text-align:center!important;
margin:0!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel .dim-end,
.create-page .home-premium-creator .date-dimension .day-time-panel .dim-end{
grid-area:end!important;
grid-column:auto!important;
}
.create-page .home-premium-creator .weekday-dimension.active .day-time-panel input[type="time"],
.create-page .home-premium-creator .date-dimension .day-time-panel input[type="time"]{
display:block!important;
width:108px!important;
min-width:108px!important;
max-width:108px!important;
margin:0!important;
padding:9px 8px!important;
justify-self:center!important;
box-sizing:border-box!important;
}
.create-page .home-premium-creator .email-field-bottom{
width:min(100%,760px)!important;
max-width:760px!important;
}
}
/* V264 / 2026-09-06 — NUR Desktop, 1. Seite.
Formular-Proportionen wieder wie V224; Mobile bleibt unangetastet.
Kacheln sind feste Mobile-nahe Module: mehr Platz = mehr Kacheln, nie Stretching. */
@media (min-width:821px){
/* Der Creator folgt wieder der ruhigen V224-Gesamtbreite statt der vollen 1440px-Shell. */
.create-page .home-premium-creator{
width:min(100%,1180px)!important;
max-width:1180px!important;
margin:0 auto 54px!important;
padding:28px!important;
container-type:normal!important;
}
/* Titelbereich wieder kompakter wie in der früheren Desktop-Version. */
.create-page .home-premium-creator .single-title{
display:grid!important;
grid-template-columns:minmax(0,760px)!important;
width:100%!important;
}
/* Modusschalter bleibt kompakt und wächst nicht mit dem Formular. */
.create-page .home-premium-creator .mode-switch{
width:max-content!important;
max-width:100%!important;
}
/* Verbindliche Kachel-Logik: fixe 320px, niemals 1fr/Stretch. */
.create-page .home-premium-creator #weekdays.weekday-toggle-picker,
.create-page .home-premium-creator #createForm #dates{
display:grid!important;
grid-template-columns:repeat(auto-fill,320px)!important;
grid-auto-columns:320px!important;
grid-auto-flow:row!important;
gap:14px!important;
justify-content:start!important;
align-items:start!important;
width:100%!important;
max-width:100%!important;
margin:10px 0 12px!important;
padding:0!important;
overflow:visible!important;
}
.create-page .home-premium-creator #weekdays > .weekday-dimension,
.create-page .home-premium-creator #createForm #dates > .date-dimension{
width:320px!important;
min-width:320px!important;
max-width:320px!important;
inline-size:320px!important;
flex:0 0 320px!important;
margin:0!important;
padding:0!important;
box-sizing:border-box!important;
}
.create-page .home-premium-creator #weekdays > .weekday-dimension > .weekday-toggle,
.create-page .home-premium-creator #weekdays > .weekday-dimension > .day-time-panel,
.create-page .home-premium-creator #createForm #dates > .date-dimension > .date-head,
.create-page .home-premium-creator #createForm #dates > .date-dimension > .day-time-panel{
width:320px!important;
min-width:320px!important;
max-width:320px!important;
inline-size:320px!important;
box-sizing:border-box!important;
}
/* Die aktive Kachel bleibt als Kopf + Zeitbox exakt ein Modul. */
.create-page .home-premium-creator #weekdays > .weekday-dimension.active > .day-time-panel,
.create-page .home-premium-creator #createForm #dates > .date-dimension > .day-time-panel{
margin:10px 0 0!important;
}
/* Unterer Formularteil nicht unnötig über die ganze Karte ziehen. */
.create-page .home-premium-creator .email-field-bottom{
width:min(100%,760px)!important;
max-width:760px!important;
}
}
/* V265 / 2026-09-06 — websiteweit einheitlicher Teal-Fokus.
Der Browser-Standard (blauer Outline/Ring) wird entfernt und durch den
Fokus der Startseite ersetzt: feiner Teal-Rahmen + weicher Sage/Teal-Glow. */
:root{
--zf-focus-border:#0f766e;
--zf-focus-glow:rgba(15,118,110,.16);
--zf-focus-glow-strong:rgba(15,118,110,.22);
}
/* Formfelder: exakt die gewünschte grüne Fokus-Sprache, ohne blauen Browserring. */
input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible,
[contenteditable="true"]:focus,
[contenteditable="true"]:focus-visible{
outline:none!important;
border-color:var(--zf-focus-border)!important;
box-shadow:0 0 0 4px var(--zf-focus-glow)!important;
accent-color:var(--zf-focus-border)!important;
}
/* Interaktive Controls: gleicher Farbton, etwas kompakterer Ring. */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible{
outline:2px solid var(--zf-focus-border)!important;
outline-offset:2px!important;
box-shadow:0 0 0 3px var(--zf-focus-glow)!important;
}
/* Checkboxen / Radios / Switches: ebenfalls kein Rest-Blau. */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
.admin-switch input:focus-visible + i,
.schedule-rule-switch:focus-visible{
outline:2px solid var(--zf-focus-border)!important;
outline-offset:2px!important;
box-shadow:0 0 0 3px var(--zf-focus-glow)!important;
}
/* Spezifische alte blaue Fokuszustände sicher überstimmen. */
#joinBox:focus-within,
.custom-term-duration-side:focus-within,
.custom-term-duration-inline:focus-within,
.term-duration-field .custom-term-duration-inline:focus-within,
.ai-premium .ai-prompt-wrap:focus-within,
body.participant-name-focus #nameInput:focus,
.admin-person-email:focus,
#titleEditInput:focus,
.individual-duration-input-wrap input:focus,
#aiResultQuestionInput:focus,
#adminPanel .schedule-rule-card select:focus,
#adminPanel .schedule-rule-card input:focus,
#adminPanel .schedule-individual-row select:focus,
#adminPanel .schedule-individual-row input:focus,
#adminPanel .schedule-individual-override-row select:focus,
#adminPanel .schedule-individual-override-row input:focus{
outline:none!important;
border-color:var(--zf-focus-border)!important;
box-shadow:0 0 0 4px var(--zf-focus-glow)!important;
}
/* V266 / 2026-09-06 — Startseite: Haupttitel auf allen Groessen immer nach "FINDET DIE" umbrechen. */
.create-page .home-premium-hero h1 .hero-title-line-1,
.create-page .home-premium-hero h1 .hero-title-line-2{
display:block!important;
}
/* V268 / 2026-09-06 — Korrektur nach V267.
Nur Desktop, nur 1. Seite: bestehende kompakte Kacheln beibehalten.
Keine Skalierung. Datum/Wochentag geometrisch angleichen und Zeitwerte zentrieren. */
@media (min-width:821px){
.create-page .home-premium-creator #weekdays > .weekday-dimension > .weekday-toggle,
.create-page .home-premium-creator #createForm #dates > .date-dimension > .date-head{
height:48px!important;
min-height:48px!important;
max-height:48px!important;
box-sizing:border-box!important;
}
.create-page .home-premium-creator #weekdays > .weekday-dimension > .weekday-toggle{
padding-top:0!important;
padding-bottom:0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
}
.create-page .home-premium-creator #createForm #dates > .date-dimension > .date-head .dim-date{
height:48px!important;
min-height:48px!important;
max-height:48px!important;
padding-top:0!important;
padding-bottom:0!important;
line-height:48px!important;
text-align:center!important;
text-align-last:center!important;
}
.create-page .home-premium-creator #weekdays > .weekday-dimension > .day-time-panel,
.create-page .home-premium-creator #createForm #dates > .date-dimension > .day-time-panel{
margin-top:10px!important;
padding:10px!important;
border-radius:14px!important;
}
.create-page .home-premium-creator #weekdays input[type="time"],
.create-page .home-premium-creator #dates input[type="time"]{
text-align:center!important;
text-align-last:center!important;
}
.create-page .home-premium-creator #weekdays input[type="time"]::-webkit-date-and-time-value,
.create-page .home-premium-creator #dates input[type="time"]::-webkit-date-and-time-value{
text-align:center!important;
}
.create-page .home-premium-creator #weekdays input[type="time"]::-webkit-datetime-edit,
.create-page .home-premium-creator #dates input[type="time"]::-webkit-datetime-edit{
text-align:center!important;
}
}
/* V269 / 2026-09-06 — Focus cleanup: nur noch Teal/Sage, kein Browser-Blau. */
:root{
--zf-focus-border:#0f766e;
--zf-focus-glow:rgba(15,118,110,.16);
}
/* Alte Browser-/Komponenten-Outlines auf allen Form-Controls neutralisieren. */
input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible,
button:focus,
button:focus-visible,
[role="button"]:focus,
[role="button"]:focus-visible{
outline:none!important;
}
/* Text-/Select-Felder: einheitlicher grüner Fokus. */
input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible,
[contenteditable="true"]:focus,
[contenteditable="true"]:focus-visible{
border-color:var(--zf-focus-border)!important;
box-shadow:0 0 0 4px var(--zf-focus-glow)!important;
accent-color:var(--zf-focus-border)!important;
}
/* Interaktive Buttons/Kacheln: gleicher Teal-Ring statt Blau. */
button:focus-visible,
[role="button"]:focus-visible,
.weekday-toggle:focus-visible,
#addDate:focus-visible{
outline:2px solid var(--zf-focus-border)!important;
outline-offset:2px!important;
box-shadow:0 0 0 3px var(--zf-focus-glow)!important;
}
/* E-Mail / Safari-Autofill: kein gelbes/blaues Zwischenbild mehr. */
#creatorEmail:-webkit-autofill,
#creatorEmail:-webkit-autofill:hover{
-webkit-text-fill-color:#14151a!important;
-webkit-box-shadow:0 0 0 1000px #fbfbfd inset!important;
box-shadow:0 0 0 1000px #fbfbfd inset!important;
caret-color:#14151a!important;
}
#creatorEmail:-webkit-autofill:focus,
#creatorEmail:-webkit-autofill:focus-visible{
-webkit-text-fill-color:#14151a!important;
border-color:var(--zf-focus-border)!important;
-webkit-box-shadow:0 0 0 1000px #fbfbfd inset,0 0 0 4px var(--zf-focus-glow)!important;
box-shadow:0 0 0 1000px #fbfbfd inset,0 0 0 4px var(--zf-focus-glow)!important;
caret-color:#14151a!important;
}
/* Kein blauer Tap-Flash auf Safari/iOS. */
button,input,select,textarea,[role="button"]{
-webkit-tap-highlight-color:transparent;
}
/* V269 / 2026-09-06 — Feinschliff Desktop Startseite.
Daten-Zeitbox bekommt exakt den kompakten Außenabstand der Wochentage.
Fokus bleibt ausschließlich Teal/Sage; kein alter blauer Zwischenring. */
@media (min-width:821px){
html.browser-chromium body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel,
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel{
padding:10px!important;
gap:7px!important;
column-gap:10px!important;
row-gap:7px!important;
}
}
/* Fokus auf der Startseite sofort in Teal, auch bei älteren komponentenspezifischen Regeln. */
body.create-page #createForm .weekday-toggle:focus,
body.create-page #createForm .weekday-toggle:focus-visible,
body.create-page #createForm #addDate:focus,
body.create-page #createForm #addDate:focus-visible,
body.create-page #createForm input:focus,
body.create-page #createForm input:focus-visible,
body.create-page #createForm select:focus,
body.create-page #createForm select:focus-visible{
outline:none!important;
border-color:var(--zf-focus-border,#0f766e)!important;
box-shadow:0 0 0 4px var(--zf-focus-glow,rgba(15,118,110,.16))!important;
}
/* Buttons/Kacheln behalten einen sichtbaren, aber ausschließlich grünen Fokus. */
body.create-page #createForm .weekday-toggle:focus-visible,
body.create-page #createForm #addDate:focus-visible{
outline:2px solid var(--zf-focus-border,#0f766e)!important;
outline-offset:2px!important;
box-shadow:0 0 0 3px var(--zf-focus-glow,rgba(15,118,110,.16))!important;
}
/* Safari-Autofill: Hintergrund sofort neutral, Fokus sofort Teal. */
body.create-page #creatorEmail:-webkit-autofill,
body.create-page #creatorEmail:-webkit-autofill:hover{
-webkit-text-fill-color:#14151a!important;
-webkit-box-shadow:0 0 0 1000px #fbfbfd inset!important;
box-shadow:0 0 0 1000px #fbfbfd inset!important;
transition:background-color 9999s ease-out 0s!important;
}
body.create-page #creatorEmail:-webkit-autofill:focus,
body.create-page #creatorEmail:-webkit-autofill:focus-visible{
-webkit-text-fill-color:#14151a!important;
border-color:var(--zf-focus-border,#0f766e)!important;
-webkit-box-shadow:0 0 0 1000px #fbfbfd inset,0 0 0 4px var(--zf-focus-glow,rgba(15,118,110,.16))!important;
box-shadow:0 0 0 1000px #fbfbfd inset,0 0 0 4px var(--zf-focus-glow,rgba(15,118,110,.16))!important;
}
/* V271 / 2026-09-06 — Desktop 1. Seite: letzter Feinschliff.
1) Pflichtfeld-/Guidance-Ringe ausschliesslich Teal statt altem Blau.
2) Daten-Zeitbox vertikal exakt auf die perfekte Wochentag-Zeitbox trimmen. */
.create-attention,
.weekday-toggle.create-attention,
#addDate.create-attention,
.dim-date.create-attention,
#creatorEmail.create-attention,
#title.create-attention,
#customTermDuration.create-attention{
outline-color:rgba(15,118,110,.42)!important;
}
@keyframes createAttentionPulse{
0%,100%{box-shadow:0 0 0 0 rgba(15,118,110,0)}
50%{box-shadow:0 0 0 7px rgba(15,118,110,.12)}
}
.admin-meta-field input.duration-input-attention,
.admin-field-row input.duration-input-attention{
outline-color:rgba(15,118,110,.46)!important;
box-shadow:0 0 0 7px rgba(15,118,110,.10)!important;
}
@keyframes durationInputPulse{
0%,100%{box-shadow:0 0 0 7px rgba(15,118,110,.08)}
50%{box-shadow:0 0 0 10px rgba(15,118,110,.16)}
}
@media (min-width:821px){
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel{
height:84px!important;
min-height:84px!important;
max-height:84px!important;
padding:10px!important;
row-gap:7px!important;
box-sizing:border-box!important;
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel input[type="time"]{
height:40px!important;
min-height:40px!important;
max-height:40px!important;
padding:9px 8px!important;
line-height:1.2!important;
box-sizing:border-box!important;
}
}
/* V273 / 2026-09-06 — Wochentage per Ziehen mehrfach aus-/abwaehlen.
Klick/Tap bleibt als barrierearme Alternative erhalten. */
.create-page #weekdays .weekday-toggle{
touch-action:none!important;
-webkit-user-select:none!important;
user-select:none!important;
-webkit-touch-callout:none!important;
-webkit-tap-highlight-color:transparent!important;
}
/* Beim "Malen" die Zeitboxen kurz nicht aufklappen: so bleibt die Geometrie
der Wochentage unter Maus/Finger stabil. Nach Loslassen erscheinen alle
Zeitboxen der ausgewaehlten Tage wieder normal. */
.create-page #weekdays.weekday-painting .weekday-dimension .day-time-panel{
display:none!important;
}
/* V274 / 2026-09-06 — Desktop-Startseite: Mobile-Kachel als echte Geometrie-Referenz.
296px = 108 + 28 + 108 + 2*10 Gap + 2*16 Padding.
Dadurch sind Wochentag und Datum im Zeitbereich pixelgleich; bei mehr Platz
erscheinen lediglich mehr Kacheln nebeneinander. Mobile bleibt unverändert. */
@media (min-width:821px){
body.create-page .home-premium-creator{
--zf-desktop-tile:296px;
}
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker,
body.create-page .home-premium-creator #dateArea #dates{
grid-template-columns:repeat(auto-fill,var(--zf-desktop-tile))!important;
grid-auto-columns:var(--zf-desktop-tile)!important;
gap:14px!important;
justify-content:start!important;
}
body.create-page .home-premium-creator #weekdays > .weekday-dimension,
body.create-page .home-premium-creator #dateArea #dates > .date-dimension,
body.create-page .home-premium-creator #weekdays > .weekday-dimension > .weekday-toggle,
body.create-page .home-premium-creator #weekdays > .weekday-dimension > .day-time-panel,
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .date-head,
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel{
inline-size:var(--zf-desktop-tile)!important;
width:var(--zf-desktop-tile)!important;
min-inline-size:var(--zf-desktop-tile)!important;
min-width:var(--zf-desktop-tile)!important;
max-inline-size:var(--zf-desktop-tile)!important;
max-width:var(--zf-desktop-tile)!important;
box-sizing:border-box!important;
}
/* Exakt dieselbe Zeitbox für Wochentag und Datum. */
body.create-page .home-premium-creator #weekdays > .weekday-dimension > .day-time-panel,
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel,
html.browser-chromium body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel{
display:grid!important;
grid-template-columns:108px 28px 108px!important;
grid-template-areas:
"caption caption caption"
"start dash end"!important;
justify-content:center!important;
align-items:center!important;
column-gap:10px!important;
row-gap:8px!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
margin:10px 0 0!important;
padding:10px 16px!important;
border:1px solid var(--line)!important;
border-radius:14px!important;
background:#fff!important;
}
body.create-page .home-premium-creator #weekdays .day-time-panel .time-caption,
body.create-page .home-premium-creator #dateArea #dates .day-time-panel .time-caption{
grid-area:caption!important;
grid-column:auto!important;
width:100%!important;
margin:0!important;
justify-self:start!important;
}
body.create-page .home-premium-creator #weekdays .day-time-panel .dim-start,
body.create-page .home-premium-creator #dateArea #dates .day-time-panel .dim-start{
grid-area:start!important;
}
body.create-page .home-premium-creator #weekdays .day-time-panel .time-dash,
body.create-page .home-premium-creator #dateArea #dates .day-time-panel .time-dash{
grid-area:dash!important;
width:28px!important;
min-width:28px!important;
max-width:28px!important;
justify-self:center!important;
text-align:center!important;
margin:0!important;
}
body.create-page .home-premium-creator #weekdays .day-time-panel .dim-end,
body.create-page .home-premium-creator #dateArea #dates .day-time-panel .dim-end{
grid-area:end!important;
}
body.create-page .home-premium-creator #weekdays .day-time-panel input[type="time"],
body.create-page .home-premium-creator #dateArea #dates .day-time-panel input[type="time"]{
inline-size:108px!important;
width:108px!important;
min-inline-size:108px!important;
min-width:108px!important;
max-inline-size:108px!important;
max-width:108px!important;
height:auto!important;
min-height:0!important;
padding:9px 8px!important;
margin:0!important;
justify-self:center!important;
text-align:center!important;
text-align-last:center!important;
box-sizing:border-box!important;
}
}
/* Während der Pinselgeste bleibt die Geometrie fest, damit Maus/Finger mehrere
Wochentage zuverlässig treffen kann. Aus-/Abwahl nutzt denselben Mechanismus. */
.create-page #weekdays.weekday-painting .weekday-dimension .day-time-panel{
display:none!important;
}
/* V276 / 2026-09-06 — Wochentage: Zeitboxen nur bei Auswahl sichtbar.
Während Drag/Swipe bleibt die bestehende Geometrie stabil; erst beim Loslassen
werden alle Panels gemeinsam synchronisiert. Desktop-Fokus einheitlich Teal. */
/* hidden muss auch gegen ältere display:grid !important Regeln gewinnen. */
.create-page #weekdays .weekday-dimension .day-time-panel[hidden]{
display:none!important;
}
/* Nur wirklich ausgewählte Wochentage zeigen ihre Zeitbox. */
.create-page #weekdays .weekday-dimension.active .day-time-panel:not([hidden]){
display:grid!important;
}
/* Während der Pinselgeste niemals Panels spontan ein-/ausblenden. */
.create-page #weekdays.weekday-painting .weekday-dimension .day-time-panel{
display:none!important;
}
/* Desktop: Fokus/Guidance auf ALLEN Wochentag-Kacheln identisch Teal.
Kein einzelner Tag soll einen abweichenden blauen Ring bekommen. */
@media (min-width:821px){
body.create-page #createForm #weekdays .weekday-toggle:focus,
body.create-page #createForm #weekdays .weekday-toggle:focus-visible,
body.create-page #createForm #weekdays .weekday-toggle.create-attention{
outline:2px solid #0f766e!important;
outline-offset:2px!important;
border-color:#0f766e!important;
box-shadow:0 0 0 4px rgba(15,118,110,.16)!important;
}
body.create-page #createForm #weekdays .weekday-toggle:not(:focus):not(:focus-visible):not(.create-attention){
outline:none!important;
box-shadow:none!important;
}
}
/* V277 / 2026-09-06 — Wochentage initial geschlossen + stabile Drag-Geometrie.
Wichtig: Die sehr spezifische Desktop-Geometrie aus V274 darf [hidden]
nicht mehr ueberstimmen. Beim Malen bleibt der bisherige Panelzustand bis
pointerup bestehen; erst danach synchronisiert JS sichtbar/unsichtbar. */
.create-page #weekdays .weekday-dimension .day-time-panel[hidden]{
display:none!important;
}
.create-page #weekdays.weekday-painting .weekday-dimension .day-time-panel[hidden]{
display:none!important;
}
.create-page #weekdays.weekday-painting .weekday-dimension .day-time-panel:not([hidden]){
display:grid!important;
}
@media (min-width:821px){
body.create-page .home-premium-creator #weekdays > .weekday-dimension > .day-time-panel[hidden]{
display:none!important;
}
body.create-page .home-premium-creator #weekdays > .weekday-dimension.active > .day-time-panel:not([hidden]){
display:grid!important;
}
body.create-page .home-premium-creator #weekdays.weekday-painting > .weekday-dimension > .day-time-panel[hidden]{
display:none!important;
}
body.create-page .home-premium-creator #weekdays.weekday-painting > .weekday-dimension > .day-time-panel:not([hidden]){
display:grid!important;
}
}
/* V278 / 2026-09-06 — Preferred test: exklusiver Goldverlauf nur für aktive Preferred-Zustände. */
:root{
--preferred-gradient:linear-gradient(135deg,#B88924 0%,#E9D37A 28%,#C69A2B 52%,#F1DF92 76%,#A97718 100%);
--preferred-gradient-border:#B88924;
}
.mark-btn.preferred.active,
.mark-toolbar .mark-btn.preferred.active,
.mark-toolbar .mark-btn.preferred.active:hover,
.mark-toolbar .mark-btn.preferred.active:focus,
.mark-toolbar .mark-btn.preferred.active:focus-visible,
.mark-toolbar .mark-btn.preferred.active:active,
.mark-toolbar.participant-ready .mark-btn.preferred.active,
.mark-toolbar.participant-ready .mark-btn.preferred.active:hover,
.mark-toolbar.participant-ready .mark-btn.preferred.active:focus,
.mark-toolbar.participant-ready .mark-btn.preferred.active:focus-visible,
.mark-toolbar.participant-ready .mark-btn.preferred.active:active,
.cell.mine-preferred,
.fixed-option-choice.mine-preferred{
background:var(--preferred-gradient)!important;
background-color:#C69A2B!important;
border-color:var(--preferred-gradient-border)!important;
color:#5C4700!important;
-webkit-text-fill-color:#5C4700!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 2px 8px rgba(92,71,0,.10)!important;
}
/* Sekundäre Preferred-Darstellungen bleiben bewusst ruhig und flach. */
.pref-count,
.star-key,
.fixed-option-choice.heat span,
.fixed-option-people-line.preferred .fixed-option-can-label{
color:#5C4700!important;
}
/* V279 / 2026-09-06 — Preferred: sehr subtiler Goldverlauf statt sichtbarer Streifen. */
:root{
--preferred-gradient:linear-gradient(
135deg,
#D1A52D 0%,
#D8B342 38%,
#D4AA32 62%,
#D9B64A 100%
);
--preferred-gradient-border:#C99C25;
}
.mark-btn.preferred.active,
.mark-toolbar .mark-btn.preferred.active,
.mark-toolbar .mark-btn.preferred.active:hover,
.mark-toolbar .mark-btn.preferred.active:focus,
.mark-toolbar .mark-btn.preferred.active:focus-visible,
.mark-toolbar .mark-btn.preferred.active:active,
.mark-toolbar.participant-ready .mark-btn.preferred.active,
.mark-toolbar.participant-ready .mark-btn.preferred.active:hover,
.mark-toolbar.participant-ready .mark-btn.preferred.active:focus,
.mark-toolbar.participant-ready .mark-btn.preferred.active:focus-visible,
.mark-toolbar.participant-ready .mark-btn.preferred.active:active,
.cell.mine-preferred,
.fixed-option-choice.mine-preferred{
background:var(--preferred-gradient)!important;
background-color:#D4A72C!important;
border-color:var(--preferred-gradient-border)!important;
color:#654C00!important;
-webkit-text-fill-color:#654C00!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.16)!important;
}
/* Im Raster bewusst praktisch flach: Gradient bleibt sichtbar, aber nicht gestreift. */
.cell.mine-preferred{
background-image:linear-gradient(135deg,#D2A62D 0%,#D7B13D 48%,#D3A72E 100%)!important;
box-shadow:none!important;
}
/* V281 / 2026-09-06 — subtile Material-Tiefe für Schwarz, Grün und Gold.
Keine sichtbaren Streifen: nur minimale Lichtbewegung. */
:root{
--zf-black-gradient:linear-gradient(135deg,#101827 0%,#151e2e 52%,#111827 100%);
--zf-green-gradient:linear-gradient(135deg,#2b9276 0%,#31997d 50%,#298f74 100%);
}
/* Schwarze Primär-/Auswahlbuttons: fast flach, nur ein Hauch Tiefe. */
.primary,
.mode-btn.active,
.weekday-toggle.active,
.mark-btn.active:not(.preferred),
.mark-toolbar .mark-btn.active:not(.preferred){
background-image:var(--zf-black-gradient)!important;
background-color:#111827!important;
}
/* Aktive Verfügbarkeit im Raster: ebenso subtiler grüner Verlauf. */
.cell.mine:not(.mine-preferred){
background-image:var(--zf-green-gradient)!important;
background-color:#278e72!important;
}
/* Preferred-Raster: Verlauf behalten, aber jede Zelle klar weiß trennen. */
.cell.mine-preferred{
border-right-color:#fff!important;
border-bottom-color:#fff!important;
}
/* Auch bei Heat/Overlay-Zuständen bleibt die Trennung sichtbar. */
.schedule .cell.mine-preferred,
.schedule .cell.mine:not(.mine-preferred){
background-clip:padding-box!important;
}
/* V282 / 2026-09-06 — Materialsystem verfeinert:
Verfügbar = grüner Verlauf, Bevorzugt = Gold, dunkle Aktionen/Balken/Logo = minimaler Navy-Verlauf. */
:root{
--zf-black-gradient:linear-gradient(180deg,#111827 0%,#0f172a 100%);
--zf-black-gradient-diagonal:linear-gradient(135deg,#0d1524 0%,#141d2d 52%,#101827 100%);
--zf-green-gradient:linear-gradient(135deg,#278e72 0%,#2f977a 50%,#247d68 100%);
--zf-green-border:#247d68;
}
/* Verfügbar: funktional klar grün, mit nur minimaler Tiefe. */
.mark-btn.active:not(.preferred),
.mark-toolbar .mark-btn.active:not(.preferred),
.mark-toolbar .mark-btn.active:not(.preferred):hover,
.mark-toolbar .mark-btn.active:not(.preferred):focus,
.mark-toolbar .mark-btn.active:not(.preferred):focus-visible,
.mark-toolbar .mark-btn.active:not(.preferred):active,
.mark-toolbar.participant-ready .mark-btn.active:not(.preferred),
.mark-toolbar.participant-ready .mark-btn.active:not(.preferred):hover,
.mark-toolbar.participant-ready .mark-btn.active:not(.preferred):focus,
.mark-toolbar.participant-ready .mark-btn.active:not(.preferred):focus-visible,
.mark-toolbar.participant-ready .mark-btn.active:not(.preferred):active{
background:var(--zf-green-gradient)!important;
background-color:#278e72!important;
border-color:var(--zf-green-border)!important;
color:#fff!important;
-webkit-text-fill-color:#fff!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;
}
/* Schwarze Primäraktionen: fast flacher Navy-Verlauf. */
.primary,
.mode-btn.active,
.weekday-toggle.active{
background:var(--zf-black-gradient)!important;
background-color:#111827!important;
color:#fff!important;
}
/* Schwarze Kopf-/Balkenflächen ebenfalls nur ganz leicht modellieren. */
.create-page .date-dimension .date-head,
.admin-banner,
.premium-badge{
background:var(--zf-black-gradient)!important;
background-color:#111827!important;
}
/* Logo: gleiche Materialidee, bewusst sehr subtil. */
.logo{
background:var(--zf-black-gradient-diagonal)!important;
background-color:#111827!important;
}
/* Grüne Rasterzellen behalten ihren dezenten Verlauf und klare Trennung. */
.cell.mine:not(.mine-preferred){
background:var(--zf-green-gradient)!important;
background-color:#278e72!important;
border-right-color:#fff!important;
border-bottom-color:#fff!important;
}
/* Gold bleibt subtil; weiße Zelltrennung bleibt bestehen. */
.cell.mine-preferred{
border-right-color:#fff!important;
border-bottom-color:#fff!important;
}
/* V283 / 2026-09-06 — Goldene Kacheln ebenfalls mit klarer weißer Kacheltrennung wie die grünen. */
.cell.mine-preferred,
.schedule .cell.mine-preferred{
border-right-color:#fff!important;
border-bottom-color:#fff!important;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.96)!important;
background-clip:padding-box!important;
}
/* V284 / 2026-09-06 — Einheitliche dunkle Materialsprache.
Alle dunklen Hauptflächen verwenden exakt denselben sehr subtilen Navy-Verlauf. */
:root{
--zf-dark-surface:linear-gradient(180deg,#111827 0%,#0f172a 100%);
}
.primary,
.mode-btn.active,
.weekday-toggle.active,
.create-page .date-dimension .date-head,
.admin-banner,
.premium-badge,
.logo{
background:var(--zf-dark-surface)!important;
background-color:#111827!important;
color:#fff!important;
}
/* Nur eine minimale Lichtkante – keine zusätzliche Glanzwirkung. */
.primary,
.mode-btn.active,
.weekday-toggle.active,
.create-page .date-dimension .date-head,
.admin-banner,
.premium-badge{
box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
}
.logo{
box-shadow:0 8px 20px rgba(17,24,39,.18)!important;
}
/* V292 / 2026-09-06 — Preferred-Raster exakt wie Verfügbar rahmen.
Entfernt den zusätzlichen Inset-Rahmen aus V283 (iOS-Seam/"komischer Strich")
und verwendet dieselbe Zellgeometrie wie Grün. Nur der Fill bleibt Gold. */
.cell.mine-preferred,
.schedule .cell.mine-preferred{
box-shadow:none!important;
border-right:1px solid #fff!important;
border-bottom:1px solid #fff!important;
background-clip:padding-box!important;
overflow:hidden!important;
}
/* Gleiche Rasterbreite/-box wie jede andere Schedule-Zelle. */
.schedule .cell.mine-preferred{
min-width:95px!important;
width:auto!important;
}
@media (max-width:560px){
.schedule .cell.mine-preferred{
min-width:80px!important;
}
}
/* V293 / 2026-09-06 — Fehlende Wochentage: alle sieben Kacheln sehen exakt wie der normale Montag-Fokus aus.
Kein dicker Attention-Ring / kein Pulsieren auf Mobile. */
body.create-page #createForm #weekdays .weekday-toggle.create-attention{
outline:none!important;
outline-offset:0!important;
border-color:var(--zf-focus-border,#0f766e)!important;
box-shadow:0 0 0 4px var(--zf-focus-glow,rgba(15,118,110,.16))!important;
animation:none!important;
}
/* V294 / 2026-09-06 — Gold-Raster wirklich 1:1 wie Grün.
Alte Preferred-Regeln setzten border-color auf ALLE Seiten und erzeugten damit
oben/links einen goldenen 1px-Seam. Preferred erhält nun exakt die normale
.cell-Geometrie; nur der Fill unterscheidet sich. */
.cell.mine-preferred,
.schedule .cell.mine-preferred{
box-sizing:border-box!important;
border-top:0!important;
border-left:0!important;
border-right:1px solid #fff!important;
border-bottom:1px solid #fff!important;
box-shadow:none!important;
overflow:visible!important;
background-clip:border-box!important;
width:auto!important;
}
/* Gleiche Zell-Mindestbreite wie Grün – keine Preferred-Sonderbreite mehr. */
.schedule .cell.mine-preferred{
min-width:95px!important;
}
@media (max-width:760px){
.schedule .cell.mine-preferred{
min-width:96px!important;
}
}
/* V295 / 2026-09-06 — Admin + ChatGPT minimal exklusiver, bewusst sehr subtil. */
:root{
--zf-admin-premium-dark:linear-gradient(180deg,#151e2e 0%,#111827 48%,#0d1524 100%);
}
#adminBanner,
#aiRun{
background:var(--zf-admin-premium-dark)!important;
background-color:#111827!important;
color:#fff!important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.085),
inset 0 -1px 0 rgba(0,0,0,.12),
0 5px 16px rgba(15,23,42,.07)!important;
}
/* Keine zusätzliche Show: nur eine minimale Materialreaktion bei Hover. */
@media (hover:hover) and (pointer:fine){
#aiRun:hover{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.10),
inset 0 -1px 0 rgba(0,0,0,.12),
0 7px 18px rgba(15,23,42,.10)!important;
}
}
/* V296 / 2026-09-06 — kompletter Auswertungsblock animiert als Einheit. */
#adminPanelMobileContent[hidden]{display:none!important;}
#adminPanelMobileContent.admin-body-animating{
overflow:hidden;
transition:height .32s cubic-bezier(.22,.8,.25,1),opacity .22s ease,transform .32s cubic-bezier(.22,.8,.25,1);
will-change:height,opacity,transform;
}
@media(min-width:641px){
#adminPanel.collapsed #adminPanelMobileContent{display:none!important;}
}
/* V297 / 2026-09-06 — Mobile Wochentage: normales Wischen auf einer Kachel muss scrollen.
Mehrfachauswahl übernimmt erst nach dem Long-Press aus home.js. */
@media (max-width:820px){
body.create-page #weekdays .weekday-toggle{
touch-action:manipulation!important;
-ms-touch-action:manipulation!important;
}
}
/* V298 / 2026-09-06 — Auswertung exklusiver/ruhiger auf- und zuklappen. */
#adminPanelMobileContent.admin-body-animating{
transition:
height .52s cubic-bezier(.22,.78,.24,1),
opacity .34s ease,
transform .52s cubic-bezier(.22,.78,.24,1)!important;
}
/* V299 / 2026-09-06 — Gold: weißen horizontalen Zelltrenner optisch 1px nach unten setzen.
Nur Preferred-Raster; Grün bleibt unverändert. */
.schedule .cell.mine-preferred{
position:relative!important;
border-bottom-color:transparent!important;
}
.schedule .cell.mine-preferred::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:-1px;
height:1px;
background:#fff;
pointer-events:none;
z-index:2;
}
/* V302 / 2026-09-06 — Gold und Grün verwenden exakt dieselbe Rastergeometrie.
Alte Preferred-Pseudo-Trenner/1px-Versätze werden vollständig neutralisiert. */
.schedule .cell.mine-preferred{
position:relative!important;
box-sizing:border-box!important;
border-top:0!important;
border-left:0!important;
border-right:1px solid #fff!important;
border-bottom:1px solid #fff!important;
box-shadow:none!important;
overflow:hidden!important;
background-clip:border-box!important;
min-width:95px!important;
}
.schedule .cell.mine-preferred::before,
.schedule .cell.mine-preferred::after{
content:none!important;
display:none!important;
}
@media(max-width:760px){
.schedule .cell.mine-preferred{
min-width:96px!important;
}
}
/* Mobile: Tap + Scroll + Long-Press koexistieren. */
@media(max-width:820px){
body.create-page #weekdays .weekday-toggle{
touch-action:manipulation!important;
-ms-touch-action:manipulation!important;
}
}
/* V303 — Wochentage Mobile: Browser darf vor Long-Press vertikal scrollen. */
@media(max-width:820px){
body.create-page #weekdays .weekday-toggle{
touch-action:pan-y!important;
-ms-touch-action:pan-y!important;
}
}
/* V304 / 2026-09-06 — EIN Rastermodell für Verfügbar und Bevorzugt.
Beide Zelltypen haben exakt dieselbe Geometrie. Preferred unterscheidet sich
ausschließlich durch seinen Gold-Fill. Keine Sonderbreite, kein Pseudo-Trenner. */
.schedule .cell.mine,
.schedule .cell.mine-preferred{
position:relative!important;
box-sizing:border-box!important;
border-top:0!important;
border-left:0!important;
border-right:1px solid #fff!important;
border-bottom:1px solid #fff!important;
box-shadow:none!important;
overflow:hidden!important;
background-clip:border-box!important;
width:auto!important;
min-width:95px!important;
}
.schedule .cell.mine-preferred::before,
.schedule .cell.mine-preferred::after{
content:none!important;
display:none!important;
}
@media(max-width:760px){
.schedule .cell.mine,
.schedule .cell.mine-preferred{
min-width:96px!important;
}
}
/* Mobile: vertikales Scrollen bleibt Browser-nativ. Erst die Long-Press-Logik
in home.js übernimmt die Geste für Mehrfachauswahl. */
@media(max-width:820px){
body.create-page #weekdays .weekday-toggle{
touch-action:pan-y!important;
-ms-touch-action:pan-y!important;
}
}
/* V306 / 2026-09-06 — Belegte Rasterzellen optisch minimal flacher.
Keine Änderung an Zeitlogik oder Zellgeometrie: Nur die farbige Füllfläche
von Verfügbar (grün) und Bevorzugt (gold) wird vertikal leicht insettet,
damit die Belegung nicht mehr wie "eine Linie zu hoch" wirkt. */
.schedule .cell.mine,
.schedule .cell.mine-preferred{
background:#fff !important;
isolation:isolate;
}
.schedule .cell.mine::before,
.schedule .cell.mine-preferred::before{
content:"" !important;
display:block !important;
position:absolute !important;
left:0 !important;
right:0 !important;
top:0 !important;
bottom:1px !important;
pointer-events:none !important;
z-index:1 !important;
}
.schedule .cell.mine::before{
background:var(--zf-green-gradient) !important;
}
.schedule .cell.mine-preferred::before{
background:var(--preferred-gradient) !important;
}
.schedule .cell.mine > *,
.schedule .cell.mine-preferred > *{
position:relative;
z-index:2;
}
/* V307 / 2026-09-06 — Chrome: kein Klick-Fokus-Ring auf Wochentag-Kacheln.
Der Validierungszustand .create-attention bleibt bewusst sichtbar. */
body.create-page #createForm #weekdays .weekday-toggle:focus:not(.create-attention),
body.create-page #createForm #weekdays .weekday-toggle:focus-visible:not(.create-attention){
outline:none!important;
outline-offset:0!important;
box-shadow:none!important;
}
body.create-page #createForm #weekdays .weekday-toggle.active:focus:not(.create-attention),
body.create-page #createForm #weekdays .weekday-toggle.active:focus-visible:not(.create-attention){
border-color:#111827!important;
}
body.create-page #createForm #weekdays .weekday-toggle:not(.active):focus:not(.create-attention),
body.create-page #createForm #weekdays .weekday-toggle:not(.active):focus-visible:not(.create-attention){
border-color:#e3e6eb!important;
}
/* V308 / 2026-09-06 — Slot-Fill feinjustiert: nicht oben UND unten insetten.
Farbe beginnt bündig oben und endet nur 1px früher unten. Dadurch bleibt
die gewünschte feine Trennlinie, ohne die zu breiten weißen Balken aus V306. */
.schedule .cell.mine::before,
.schedule .cell.mine-preferred::before{
top:0!important;
bottom:1px!important;
}
/* V309 / 2026-09-06 — Exakte Slot-Trennlinie: keine weisse Zusatzlücke.
Grün und Gold füllen bis an die Zellgrenze; die vorhandene 1px-Rasterlinie
bleibt als feine graue Linie (#edf0f3) sichtbar. */
.schedule .cell.mine,
.schedule .cell.mine-preferred{
border-bottom:1px solid #edf0f3!important;
}
.schedule .cell.mine::before,
.schedule .cell.mine-preferred::before{
top:0!important;
bottom:0!important;
}
/* V310 / 2026-09-06 — Raster um exakt 1px nach unten ausrichten.
Die Trennlinie gehört nun zur Oberkante der folgenden belegten Zelle:
1px graue Linie oben, Farbfläche direkt darunter. Gold und Grün identisch. */
.schedule .cell.mine,
.schedule .cell.mine-preferred{
border-bottom:0!important;
}
.schedule .cell.mine::before,
.schedule .cell.mine-preferred::before{
top:1px!important;
bottom:0!important;
}
.schedule .cell.mine::after,
.schedule .cell.mine-preferred::after{
content:""!important;
display:block!important;
position:absolute!important;
left:0!important;
right:0!important;
top:0!important;
height:1px!important;
background:#edf0f3!important;
pointer-events:none!important;
z-index:3!important;
}
/* v10.2 — „Anderen Termin vorschlagen“ im Stil der Formulare unter
„Weitere Einstellungen“: ruhige Felder mit Labels, bewusst auf zwei Zeilen. */
#dateSuggestionForm[hidden]{display:none!important}
#dateSuggestionForm:not([hidden]){
display:grid!important;
grid-template-columns:1fr!important;
gap:12px!important;
width:100%;
min-width:0;
margin:14px 0 0;
padding:14px 0 0;
border-top:1px solid var(--line);
}
#dateSuggestionForm .date-suggestion-date-row,
#dateSuggestionForm .date-suggestion-time-row{
min-width:0;
width:100%;
}
#dateSuggestionForm .date-suggestion-date-row{
display:grid;
grid-template-columns:minmax(0,420px);
}
#dateSuggestionForm .date-suggestion-time-row{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
gap:10px;
align-items:end;
}
#dateSuggestionForm .field{
min-width:0;
width:100%;
overflow:visible;
}
#dateSuggestionForm .field label{
font-size:13px;
font-weight:700;
color:#464b55;
}
#dateSuggestionForm input[type="date"],
#dateSuggestionForm input[type="time"]{
display:block!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
box-sizing:border-box!important;
border:1px solid var(--line)!important;
background:#fbfbfd!important;
border-radius:14px!important;
padding:13px 14px!important;
min-height:48px;
color:var(--text)!important;
font:inherit!important;
outline:none;
}
#dateSuggestionForm input[type="date"]:focus,
#dateSuggestionForm input[type="time"]:focus{
border-color:var(--green)!important;
box-shadow:0 0 0 3px rgba(24,124,104,.12)!important;
}
#dateSuggestionForm #submitDateSuggestion{
min-width:190px;
min-height:48px;
margin:0;
padding:12px 18px;
}
@media(max-width:700px){
#dateSuggestionForm:not([hidden]){
gap:12px!important;
width:100%!important;
overflow:visible!important;
}
#dateSuggestionForm .date-suggestion-date-row{
grid-template-columns:1fr;
}
#dateSuggestionForm .date-suggestion-time-row{
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:10px;
}
#dateSuggestionForm .date-suggestion-time-row > .field{
width:100%!important;
max-width:100%!important;
overflow:visible!important;
}
#dateSuggestionForm #submitDateSuggestion{
grid-column:1/-1;
width:100%!important;
max-width:100%!important;
min-width:0;
}
}
@media(max-width:430px){
#dateSuggestionForm .date-suggestion-time-row{
grid-template-columns:1fr;
}
#dateSuggestionForm #submitDateSuggestion{
grid-column:auto;
}
}
/* v10.3 — Einstellungen / Termine: Mobile-Eingabefelder etwas kompakter.
Nur Datum, Von und Bis im Formular „Termin hinzufügen“; Desktop bleibt unverändert. */
@media(max-width:700px){
#adminAddDateForm.admin-add-date-form input[type="date"],
#adminAddDateForm.admin-add-date-form input[type="time"]{
min-height:44px!important;
height:44px!important;
padding:9px 12px!important;
line-height:1.15!important;
}
}
/* v9.31 — Mobile: Name und Admin-/Bearbeitungslink im Teilnehmerbereich sauber zentrieren. */
@media(max-width:700px){
#myAvailabilityCard > .between{
align-items:flex-start;
}
#myAvailabilityCard .me-tools{
flex-direction:column;
align-items:center;
justify-content:flex-start;
gap:6px;
flex:0 0 auto;
min-width:136px;
text-align:center;
}
#myAvailabilityCard .save-status{
width:100%;
text-align:center;
min-height:1.1em;
}
#myAvailabilityCard #mePill,
#myAvailabilityCard #adminEmailPill{
display:inline-flex;
align-items:center;
justify-content:center;
text-align:center;
min-width:136px;
max-width:min(46vw,220px);
min-height:44px;
padding:10px 16px;
line-height:1.22;
white-space:normal;
word-break:break-word;
}
#myAvailabilityCard #openEditAccess{
display:inline-flex;
align-items:center;
justify-content:center;
width:auto;
margin:0;
padding:0;
text-align:center;
align-self:center;
}
}
/* v9.35 — Mobile: Name bleibt rechts neben „Wann kannst du?“, solange er passt.
Erst bei zu wenig Platz springt der gesamte Namens-/Linkblock in die nächste Zeile. */
@media(max-width:700px){
#myAvailabilityCard > .between{
flex-direction:row;
flex-wrap:wrap;
align-items:flex-start;
}
#myAvailabilityCard > .between > :first-child{
flex:1 1 auto;
min-width:145px;
}
#myAvailabilityCard .me-tools{
flex:0 0 auto;
width:max-content;
max-width:100%;
min-width:0;
margin-left:auto;
align-items:center;
}
#myAvailabilityCard #mePill,
#myAvailabilityCard #adminEmailPill{
width:max-content;
min-width:0;
max-width:calc(100vw - 60px);
white-space:normal;
overflow-wrap:break-word;
word-break:normal;
}
}
/* v9.36 — Mobile: Wenn der Namensbereich unter „Wann kannst du?“ umbricht,
stehen Name und Admin-/Bearbeitungslink gemeinsam in derselben Zeile. */
@media(max-width:700px){
#myAvailabilityCard .me-tools{
display:grid;
grid-template-columns:max-content max-content;
align-items:center;
justify-content:end;
column-gap:10px;
row-gap:4px;
width:max-content;
max-width:100%;
margin-left:auto;
}
#myAvailabilityCard .save-status{
grid-column:1/-1;
width:auto;
min-height:0;
text-align:right;
}
#myAvailabilityCard #mePill,
#myAvailabilityCard #adminEmailPill{
grid-column:1;
margin:0;
}
#myAvailabilityCard #openEditAccess{
grid-column:2;
margin:0;
align-self:center;
white-space:nowrap;
}
}
/* v9.36 — Finale Link-Hierarchie: bei „Wann kannst du?“ nur die Identität;
Admin-/Bearbeitungszugänge liegen in den dafür vorgesehenen Popups. */
#myAvailabilityCard #openEditAccess{
display:none!important;
}
#shareModal .share-links-modal-card{
width:min(660px,100%);
}
#shareModal .share-link-section{
margin-top:18px;
padding:16px;
border:1px solid var(--line);
border-radius:18px;
background:#f8f9fb;
}
#shareModal .share-link-section>p{
margin:0 0 12px;
}
#shareModal .share-link-section .native-share-btn,
#shareModal .share-link-section>button{
width:100%;
margin-top:10px;
}
#shareModal .admin-share-access{
margin-top:14px;
}
#renameParticipantModal .rename-admin-access{
margin:16px 0 0;
}
@media(max-width:700px){
#shareModal .share-links-modal-card{
width:100%;
}
#shareModal .share-link-section{
padding:14px;
}
#myAvailabilityCard .me-tools{
gap:0!important;
}
}
/* v9.35 — Mobile: Personenanzahl unter „Wann können die meisten?“ statt daneben. */
@media(max-width:640px){
.group-availability-head{
flex-direction:column;
align-items:flex-start;
gap:8px;
}
.group-availability-actions{
width:auto;
justify-content:flex-start;
}
#countPill{
margin:0;
}
}
/* v9.35 — Mobile/iOS: Textcursor im Namensfeld vollständig innerhalb des Feldes halten. */
@media(max-width:700px), (hover:none) and (pointer:coarse){
#joinBox #nameInput{
-webkit-appearance:none!important;
appearance:none!important;
display:block!important;
height:54px!important;
min-height:54px!important;
padding:15px 16px!important;
line-height:24px!important;
overflow:hidden!important;
box-sizing:border-box!important;
}
}
/* v9.37 — Mobile: Name und Personenzahl optisch sauber zentrieren. */
@media(max-width:700px){
#myAvailabilityCard .me-tools{
justify-items:center;
}
#myAvailabilityCard #mePill,
#myAvailabilityCard #adminEmailPill{
display:inline-flex;
align-items:center;
justify-content:center;
text-align:center;
}
}
@media(max-width:640px){
.group-availability-actions{
width:100%;
justify-content:center;
}
#countPill{
display:inline-flex;
align-items:center;
justify-content:center;
text-align:center;
margin-inline:auto;
}
}
/* v9.38 — Mobile/iOS: optionale Pausen-Delete-Buttons bleiben klar tappable. */
#adminPanel .schedule-window-remove,
#adminPanel .schedule-optional-remove{
position:relative;
z-index:3;
touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
}
@media(max-width:760px){
#adminPanel .schedule-window-remove,
#adminPanel .schedule-optional-remove{
min-width:40px;
min-height:40px;
}
}
/* v9.39 — Mobile: Name und Personenzahl links unter der jeweiligen Überschrift. */
@media(max-width:700px){
#myAvailabilityCard > .between{
flex-direction:column;
flex-wrap:nowrap;
align-items:flex-start;
gap:10px;
}
#myAvailabilityCard > .between > :first-child{
width:100%;
}
#myAvailabilityCard .me-tools{
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:flex-start;
justify-items:start;
width:auto;
max-width:100%;
margin:0 0 18px 0;
gap:0!important;
text-align:left;
}
#myAvailabilityCard #mePill,
#myAvailabilityCard #adminEmailPill{
display:inline-flex;
align-items:center;
justify-content:flex-start;
width:auto;
max-width:100%;
margin:0;
text-align:left;
}
}
@media(max-width:640px){
.group-availability-head{
align-items:flex-start;
gap:10px;
}
.group-availability-actions{
width:auto;
justify-content:flex-start;
margin:0 0 18px 0;
}
#countPill{
display:inline-flex;
align-items:center;
justify-content:flex-start;
width:auto;
margin:0;
text-align:left;
}
}
/* v9.39 — Mobile/iOS: auch im Admin-Modus bleibt der Textcursor sauber im Namensfeld. */
@media(max-width:700px), (hover:none) and (pointer:coarse){
body.participant-name-focus #joinBox,
body.participant-name-focus:has(#adminBanner.show) #joinBox{
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
transform:none !important;
}
#joinBox #nameInput,
#joinBox #nameInput:focus,
body.participant-name-focus #joinBox #nameInput,
body.participant-name-focus:has(#adminBanner.show) #joinBox #nameInput{
-webkit-appearance:none !important;
appearance:none !important;
display:block !important;
box-sizing:border-box !important;
height:52px !important;
min-height:52px !important;
padding:14px 16px !important;
line-height:1.2 !important;
font-size:16px !important;
border-radius:13px !important;
background:#fff !important;
background-clip:padding-box !important;
overflow:hidden !important;
-webkit-transform:translateZ(0) !important;
transform:translateZ(0) !important;
caret-color:#3b82f6;
}
}
/* v9.40 — Mobile/iOS: Löschbuttons für optionale Pausen sicher tappable. */
@media(max-width:760px), (hover:none) and (pointer:coarse){
#adminPanel .schedule-window-remove,
#adminPanel .schedule-optional-remove{
position:relative;
z-index:6;
min-width:44px;
min-height:44px;
touch-action:manipulation;
-webkit-user-select:none;
user-select:none;
}
}
/* v351 — Mobile: gelöschte optionale Pausen wirklich ausblenden.
Mobile Grid-Regeln mit display:grid!important dürfen [hidden] nicht überschreiben. */
#adminPanel .schedule-global-card [data-schedule-rule-row="window"][hidden],
#adminPanel .schedule-global-card [data-schedule-rule-row="recurring"][hidden]{
display:none!important;
}
/* v356 — Mobile Feinjustierungen: Teilen-Schliessen + Ergebnislink-Text */
@media(max-width:700px), (hover:none) and (pointer:coarse){
/* Teilnehmerlink-Popup: Schliessen-Kreuz auf dem Handy etwas grösser. */
#shareModal #closeShare{
font-size:28px!important;
line-height:1!important;
min-width:42px!important;
min-height:42px!important;
padding:4px 8px!important;
}
/* Ergebnislink-Zeile: Text auf dem Handy leicht vom linken Rand abrücken. */
.admin-result-link-row .admin-setting-copy{
padding-left:4px;
}
}
/* v358 — Desktop: „Zeitumfrage auswerten“ als zentralen Bereich ruhig hervorheben.
Nur Geräte mit echter Maus/Hover-Funktion; Mobile/Touch bleibt unverändert. */
@media (hover:hover) and (pointer:fine) and (min-width:761px){
#adminPanel{
transition:transform .34s cubic-bezier(.22,.61,.36,1),
box-shadow .34s ease,
border-color .34s ease;
transform-origin:50% 0;
}
#adminPanel:hover{
transform:translateY(-3px);
border-color:rgba(24,124,104,.22);
box-shadow:0 24px 68px rgba(20,25,35,.12),
0 0 0 1px rgba(24,124,104,.035);
}
#adminPanel .admin-panel-head{
transition:transform .34s cubic-bezier(.22,.61,.36,1);
}
#adminPanel.collapsed:hover .admin-panel-head{
transform:translateY(1px);
}
}
/* v359 — Desktop: Auswertungsbereich sichtbar hochwertiger, aber ohne Bewegungs-Ruckeln.
Der Container selbst wird nicht mehr verschoben; dadurch bleiben Titel und
Status „Umfrage offen/fixiert“ beim Aufklappen stabil an derselben Position. */
@media (hover:hover) and (pointer:fine) and (min-width:761px){
#adminPanel{
transform:none !important;
transition:
box-shadow .28s ease,
border-color .28s ease,
background-color .28s ease !important;
}
#adminPanel:hover{
transform:none !important;
border-color:rgba(15,118,110,.42) !important;
background-color:rgba(255,255,255,.985);
box-shadow:
0 22px 58px rgba(20,25,35,.15),
0 0 0 3px rgba(15,118,110,.07),
inset 0 1px 0 rgba(255,255,255,.85) !important;
}
#adminPanel .admin-panel-head,
#adminPanel.collapsed:hover .admin-panel-head{
transform:none !important;
}
#adminPanel .admin-panel-title-wrap h2{
transition:color .24s ease, text-shadow .24s ease;
}
#adminPanel:hover .admin-panel-title-wrap h2{
color:#0f766e;
text-shadow:0 0 18px rgba(15,118,110,.12);
}
#adminPanel .admin-lock-toggle{
transition:
background .2s ease,
border-color .2s ease,
box-shadow .24s ease !important;
}
#adminPanel:hover .admin-lock-toggle{
box-shadow:0 5px 16px rgba(15,23,42,.08);
}
/* Nur Höhe + Deckkraft animieren: keine vertikale Inhaltsverschiebung mehr. */
#adminPanelMobileContent.admin-body-animating{
transform:none !important;
transition:
height .42s cubic-bezier(.22,.72,.26,1),
opacity .24s ease !important;
will-change:height,opacity;
}
}
/* v361 — Desktop: Auswertungsbereich beim Auf-/Zuklappen positionsstabil.
Scroll-Anker soll die Karte beim animierten Höhenwechsel nicht versetzen. */
@media (hover:hover) and (pointer:fine) and (min-width:761px){
#adminPanel,
#adminPanelMobileContent{
overflow-anchor:none;
}
}
/* v362 — Stundenplan-Einstellungen: ausschliesslich Farbkonzept vereinheitlicht. */
#adminPanel .schedule-day-toggle{
border-color:#dfe5e7;
background:linear-gradient(180deg,#ffffff,#f7f9f9);
color:#4f5b68;
}
#adminPanel .schedule-day-toggle.is-active{
color:#176b4a;
border-color:#a9d9c4;
background:linear-gradient(180deg,#f3fbf7,#e8f6ef);
box-shadow:inset 0 0 0 1px rgba(23,107,74,.06);
}
#adminPanel .schedule-planning-style-control input[type="range"]{
accent-color:#16865a;
}
#adminPanel .schedule-planning-style-control input[type="range"]::-webkit-slider-runnable-track{
background:linear-gradient(90deg,#176b4a 0%,#7eaa96 48%,#dcebe4 100%);
}
#adminPanel .schedule-planning-style-control input[type="range"]::-webkit-slider-thumb{
background:#ffffff;
border-color:#176b4a;
box-shadow:0 2px 8px rgba(23,107,74,.18);
}
#adminPanel .schedule-planning-style-control input[type="range"]::-moz-range-track{
background:linear-gradient(90deg,#176b4a 0%,#7eaa96 48%,#dcebe4 100%);
}
#adminPanel .schedule-planning-style-control input[type="range"]::-moz-range-thumb{
background:#ffffff;
border-color:#176b4a;
box-shadow:0 2px 8px rgba(23,107,74,.18);
}
/* Eine ruhige, gemeinsame Farbwelt für alle Regel-Icons. */
#adminPanel .schedule-rule-icon-start,
#adminPanel .schedule-rule-icon-end,
#adminPanel .schedule-rule-icon-lunch,
#adminPanel .schedule-rule-icon-window,
#adminPanel .schedule-rule-icon-recurring{
background:#edf7f2;
color:#176b4a;
}
#adminPanel .schedule-rule-card select,
#adminPanel .schedule-rule-card input,
#adminPanel [data-extra-window-pause] select,
#adminPanel [data-extra-window-pause] input{
border-color:#dfe6e3;
background:#fbfcfc;
color:#253145;
}
#adminPanel .schedule-rule-card select:focus,
#adminPanel .schedule-rule-card input:focus,
#adminPanel .schedule-individual-row select:focus,
#adminPanel .schedule-individual-row input:focus{
border-color:#68aa8e;
box-shadow:0 0 0 3px rgba(22,134,90,.11);
}
#adminPanel .schedule-rule-switch{
background:#d7dee0;
}
#adminPanel .schedule-rule-switch.is-on{
background:#16865a;
}
#adminPanel .schedule-rule-switch:focus-visible{
outline-color:rgba(22,134,90,.26);
}
#adminPanel .schedule-sentence-row.is-rule-off{
background:#fafbfb;
}
#adminPanel .schedule-rule-adders{
background:#f8faf9;
border-color:#e8eeeb;
}
#adminPanel .schedule-add-rule{
border-color:#b9d8cc;
background:#ffffff;
color:#0f766e;
}
#adminPanel .schedule-add-rule:hover{
background:#f1f8f5;
border-color:#8fc6b0;
}
/* v363 — Desktop: Kopfzeile beim Hover-Aufklappen positionsstabil.
Der leere Untertitel darf im offenen Zustand keine unsichtbare Höhe erzeugen;
sonst werden Titel und Schlossstatus durch align-items:center gegeneinander verschoben. */
#adminPanel .admin-panel-title-wrap .sub:empty{
display:none !important;
}
/* v386 — Vorschlagskennzeichnung direkt unter dem Datum. */
.schedule .date-label.has-suggestion{flex-direction:column;}
/* v393 — Datumsüberschrift inkl. Jahr auf einer Zeile. */
.schedule .date-label{min-width:110px!important;}
.schedule .cell,.schedule .grid-start-spacer{min-width:110px!important;}
.schedule .date-label>span{white-space:nowrap;}
/* v397 — Nur die linke „Zeit“-Ecke wieder auf die ursprüngliche Breite setzen.
Die breiteren Datumsüberschriften mit Jahreszahl bleiben unverändert. */
.schedule .corner{
width:68px!important;
min-width:68px!important;
}
/* v418 — Vorschlagslabel klein unter dem Datum, ohne Raster-/Scrolllayout anzufassen. */
.schedule .date-label.has-suggestion{
position:sticky;
}
.schedule .date-label.has-suggestion small{
position:absolute;
left:50%;
bottom:3px;
transform:translateX(-50%);
display:block;
margin:0;
font-size:8px;
line-height:1;
white-space:nowrap;
}
/* v12 — Mobile only: Ergebnislink teilen sauber untereinander anordnen. */
@media (max-width:560px){
.admin-result-link-row{
flex-direction:column;
align-items:stretch;
gap:12px;
}
.admin-result-link-row .admin-setting-copy{padding-left:0;}
.admin-result-link-row .admin-setting-control{
width:100%;
min-width:0;
display:block;
}
.admin-result-link-row #copyResultLink{width:100%;}
}
/* v13 — Mobile only: Admin-Termin + Teilnehmenden-Terminvorschlag kompakt.
Keine Desktop-/HTML-/JS-Änderungen. */
@media (max-width:700px){
/* Admin: Datum oben, Von/Bis nebeneinander, Button darunter. */
#adminAddDateForm.admin-add-date-form{
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
gap:10px!important;
}
#adminAddDateForm.admin-add-date-form .field:first-child{
grid-column:1/-1!important;
}
#adminAddDateForm.admin-add-date-form input[type="date"],
#adminAddDateForm.admin-add-date-form input[type="time"]{
width:100%!important;
min-width:0!important;
height:48px!important;
min-height:48px!important;
max-height:48px!important;
box-sizing:border-box!important;
padding:0 12px!important;
border-radius:12px!important;
font-size:16px!important;
line-height:48px!important;
}
#adminAddDateForm.admin-add-date-form > button{
grid-column:1/-1!important;
width:100%!important;
min-height:48px!important;
}
/* Teilnehmende: gleiche mobile Anordnung. */
#dateSuggestionForm:not([hidden]){
display:grid!important;
grid-template-columns:1fr!important;
gap:10px!important;
}
#dateSuggestionForm .date-suggestion-date-row{
display:grid!important;
grid-template-columns:1fr!important;
width:100%!important;
}
#dateSuggestionForm .date-suggestion-time-row{
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
gap:10px!important;
width:100%!important;
}
#dateSuggestionForm input[type="date"],
#dateSuggestionForm input[type="time"]{
width:100%!important;
min-width:0!important;
height:48px!important;
min-height:48px!important;
max-height:48px!important;
box-sizing:border-box!important;
padding:0 12px!important;
border-radius:12px!important;
font-size:16px!important;
line-height:48px!important;
}
#dateSuggestionForm #submitDateSuggestion{
grid-column:1/-1!important;
width:100%!important;
min-width:0!important;
min-height:48px!important;
}
}
/* Bestehende <=430px-Regel gezielt überstimmen:
Von/Bis bleiben auch auf schmalen Handys nebeneinander. */
@media (max-width:430px){
#dateSuggestionForm .date-suggestion-time-row{
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
}
#dateSuggestionForm #submitDateSuggestion{
grid-column:1/-1!important;
}
}
/* v14 — Exakt besprochene UI-Feinheiten. */
/* Name-ändern-Modal: allgemein etwas ausgewogener und kompakter proportioniert. */
#renameParticipantModal .modal-card{
width:min(620px, calc(100vw - 32px));
max-width:620px;
padding:26px 28px 28px;
}
#renameParticipantModal .between{
margin-bottom:18px;
}
#renameParticipantModal .field{
margin-bottom:14px;
}
#renameParticipantModal .rename-email-field{
margin-top:0;
}
#renameParticipantModal #renameParticipantInput,
#renameParticipantModal #renameParticipantEmail{
width:100%;
min-height:50px;
height:50px;
box-sizing:border-box;
padding:10px 14px;
border-radius:14px;
}
#renameParticipantModal .rename-email-field small{
margin-top:7px;
}
#renameParticipantModal .rename-admin-access{
margin:14px 0 0;
padding:14px;
border-radius:16px;
}
#renameParticipantModal .rename-admin-access .edit-link-row{
margin:8px 0 0;
grid-template-columns:minmax(0,1fr) auto;
gap:8px;
}
#renameParticipantModal .rename-admin-access .edit-link-row input,
#renameParticipantModal .rename-admin-access .edit-link-row button{
min-height:44px;
box-sizing:border-box;
}
#renameParticipantModal #saveRenameParticipant{
min-height:50px;
border-radius:14px;
}
/* Wochentage: nur auf dem Handy die beiden Zeitfenster kompakter. */
@media(max-width:640px){
.admin-weekday-simple-form .admin-simple-time-row input[type="time"]{
height:48px!important;
min-height:48px!important;
max-height:48px!important;
padding:0 10px!important;
border-radius:12px!important;
box-sizing:border-box!important;
font-size:16px!important;
line-height:48px!important;
}
}
/* Name-ändern-Modal auf schmalen Geräten weiterhin sauber kompakt. */
@media(max-width:560px){
#renameParticipantModal .modal-card{
width:calc(100vw - 24px);
padding:20px 18px 18px;
}
#renameParticipantModal #renameParticipantInput,
#renameParticipantModal #renameParticipantEmail,
#renameParticipantModal #saveRenameParticipant{
min-height:48px;
height:48px;
}
#renameParticipantModal .rename-admin-access .edit-link-row{
grid-template-columns:1fr;
}
#renameParticipantModal .rename-admin-access .edit-link-row button{
width:100%;
}
}
/* v15 — Mobile only: kompakte Datum-/Zeitfelder in genau zwei Formularen.
Betrifft nur:
1. Weitere Einstellungen > Termine > Anderen Termin hinzufügen
2. Teilnehmende > Anderes Datum vorschlagen
Buttons und alle übrigen Formulare bleiben unverändert. */
@media (max-width:700px){
#adminAddDateForm.admin-add-date-form input[type="date"],
#adminAddDateForm.admin-add-date-form input[type="time"],
#dateSuggestionForm input[type="date"],
#dateSuggestionForm input[type="time"]{
display:block!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
height:40px!important;
min-height:40px!important;
max-height:40px!important;
box-sizing:border-box!important;
padding:0 10px!important;
border-radius:11px!important;
font-size:16px!important;
line-height:1.2!important;
}
/* Von/Bis bleiben auf Mobile nebeneinander. */
#adminAddDateForm.admin-add-date-form{
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
gap:10px!important;
}
#adminAddDateForm.admin-add-date-form .field:first-child{
grid-column:1/-1!important;
}
#dateSuggestionForm .date-suggestion-time-row{
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
gap:10px!important;
}
}
/* v16 — NUR HANDY: finale Kompakthöhe der Datum-/Zeitfelder.
Ausschliesslich:
- Einstellungen > Termine > Anderen Termin hinzufügen
- Anderes Datum vorschlagen
Keine Desktop-/Tablet-/Button-/Logikänderung. */
@media (max-width:560px) and (pointer:coarse){
#adminAddDateForm.admin-add-date-form input[type="date"],
#adminAddDateForm.admin-add-date-form input[type="time"],
#dateSuggestionForm input[type="date"],
#dateSuggestionForm input[type="time"]{
height:36px!important;
min-height:36px!important;
max-height:36px!important;
padding-top:0!important;
padding-bottom:0!important;
line-height:1.15!important;
}
}
/* v17 — NUR HANDY: finale Feldhöhe 32px in den zwei besprochenen Formularen. */
@media (max-width:560px) and (pointer:coarse){
#adminAddDateForm.admin-add-date-form input[type="date"],
#adminAddDateForm.admin-add-date-form input[type="time"],
#dateSuggestionForm input[type="date"],
#dateSuggestionForm input[type="time"]{
height:32px!important;
min-height:32px!important;
max-height:32px!important;
}
}
/* v18 — NUR HANDY, NUR die zwei besprochenen Termin-Formulare.
Datum leicht kompakter; Zeitfelder deutlich kompakter und exakt zentriert. */
@media (max-width:560px) and (pointer:coarse){
/* Datum: nur leicht kleiner, nicht so flach wie die Zeitfelder. */
#adminAddDateForm.admin-add-date-form input[type="date"],
#dateSuggestionForm input[type="date"]{
height:38px!important;
min-height:38px!important;
max-height:38px!important;
padding:0 10px!important;
line-height:38px!important;
border-radius:11px!important;
box-sizing:border-box!important;
}
/* Von/Bis: kompaktere Boxen, aber wieder etwas höher als 32px. */
#adminAddDateForm.admin-add-date-form input[type="time"],
#dateSuggestionForm input[type="time"]{
-webkit-appearance:none!important;
appearance:none!important;
display:block!important;
width:100%!important;
min-width:0!important;
height:36px!important;
min-height:36px!important;
max-height:36px!important;
padding:0 8px!important;
line-height:36px!important;
text-align:center!important;
border-radius:11px!important;
box-sizing:border-box!important;
font-size:16px!important;
}
/* iOS/Safari: den internen nativen Zeitinhalt wirklich mittig setzen. */
#adminAddDateForm.admin-add-date-form input[type="time"]::-webkit-datetime-edit,
#dateSuggestionForm input[type="time"]::-webkit-datetime-edit{
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
height:100%!important;
padding:0!important;
margin:0!important;
text-align:center!important;
}
#adminAddDateForm.admin-add-date-form input[type="time"]::-webkit-datetime-edit-fields-wrapper,
#dateSuggestionForm input[type="time"]::-webkit-datetime-edit-fields-wrapper{
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
height:100%!important;
padding:0!important;
margin:0!important;
}
/* Picker-Symbol darf auf iOS keinen seitlichen Platz klauen. */
#adminAddDateForm.admin-add-date-form input[type="time"]::-webkit-calendar-picker-indicator,
#dateSuggestionForm input[type="time"]::-webkit-calendar-picker-indicator{
margin:0!important;
padding:0!important;
}
/* Labels etwas näher an die kompakteren Zeitboxen. */
#adminAddDateForm.admin-add-date-form .field,
#dateSuggestionForm .field{
gap:4px!important;
}
}
/* v19 — NUR HANDY:
Datumsfeld im Formular „Termin hinzufügen“ exakt auf die gleiche sichtbare Breite
wie der Button „Termin hinzufügen“ bringen. Sonst nichts ändern. */
@media (max-width:560px) and (pointer:coarse){
#adminAddDateForm.admin-add-date-form .field:first-child{
width:100%!important;
max-width:100%!important;
box-sizing:border-box!important;
}
#adminAddDateForm.admin-add-date-form input[type="date"]{
width:100%!important;
max-width:100%!important;
box-sizing:border-box!important;
}
#adminAddDateForm.admin-add-date-form > #adminAddDateSubmit{
width:100%!important;
max-width:100%!important;
box-sizing:border-box!important;
}
}
/* v20 — NUR HANDY: Datumsfeld etwas schmaler als in v19, sauber zentriert. */
@media (max-width:560px) and (pointer:coarse){
#adminAddDateForm.admin-add-date-form .field:first-child{
width:calc(100% - 20px)!important;
max-width:calc(100% - 20px)!important;
margin-left:auto!important;
margin-right:auto!important;
}
}
/* v21 — NUR HANDY:
Datumsfeld exakt an denselben linken/rechten Kanten wie „Termin hinzufügen“. */
@media (max-width:560px) and (pointer:coarse){
#adminAddDateForm.admin-add-date-form .field:first-child{
width:100%!important;
max-width:100%!important;
margin-left:0!important;
margin-right:0!important;
padding-left:0!important;
padding-right:0!important;
box-sizing:border-box!important;
}
#adminAddDateForm.admin-add-date-form input[type="date"]{
width:100%!important;
max-width:100%!important;
margin-left:0!important;
margin-right:0!important;
box-sizing:border-box!important;
}
#adminAddDateForm.admin-add-date-form > #adminAddDateSubmit{
width:100%!important;
max-width:100%!important;
margin-left:0!important;
margin-right:0!important;
box-sizing:border-box!important;
}
}
/* v22 — NUR HANDY:
Linke Kante des Datumsfelds bleibt exakt wie in v21.
Nur die rechte Kante wird 20px nach innen gezogen. */
@media (max-width:560px) and (pointer:coarse){
#adminAddDateForm.admin-add-date-form .field:first-child{
width:calc(100% - 20px)!important;
max-width:calc(100% - 20px)!important;
margin-left:0!important;
margin-right:20px!important;
}
#adminAddDateForm.admin-add-date-form input[type="date"]{
width:100%!important;
max-width:100%!important;
margin-left:0!important;
margin-right:0!important;
}
}
/* v23 — NUR HANDY:
Linke Kante bleibt exakt unverändert.
Rechte Kante des Datumsfelds nochmals 20px nach innen,
damit sie mit „Termin hinzufügen“ fluchtet. */
@media (max-width:560px) and (pointer:coarse){
#adminAddDateForm.admin-add-date-form .field:first-child{
width:calc(100% - 40px)!important;
max-width:calc(100% - 40px)!important;
margin-left:0!important;
margin-right:40px!important;
}
#adminAddDateForm.admin-add-date-form input[type="date"]{
width:100%!important;
max-width:100%!important;
margin-left:0!important;
margin-right:0!important;
}
}
/* v24 — NUR HANDY:
Feinabstimmung zwischen v22 (zu breit) und v23 (zu schmal).
Linke Kante unverändert; rechte Kante 10px weiter rechts als v23. */
@media (max-width:560px) and (pointer:coarse){
#adminAddDateForm.admin-add-date-form .field:first-child{
width:calc(100% - 30px)!important;
max-width:calc(100% - 30px)!important;
margin-left:0!important;
margin-right:30px!important;
}
#adminAddDateForm.admin-add-date-form input[type="date"]{
width:100%!important;
max-width:100%!important;
margin-left:0!important;
margin-right:0!important;
}
}
/* v25 — NUR HANDY:
„Anderes Datum vorschlagen“: Datumsfeld erhält exakt dieselbe horizontale
Länge/Ausrichtung wie das abgestimmte Datumsfeld bei „Termin hinzufügen“. */
@media (max-width:560px) and (pointer:coarse){
#dateSuggestionForm > .field:first-child{
width:calc(100% - 30px)!important;
max-width:calc(100% - 30px)!important;
margin-left:0!important;
margin-right:30px!important;
box-sizing:border-box!important;
}
#dateSuggestionForm > .field:first-child input[type="date"]{
width:100%!important;
max-width:100%!important;
margin-left:0!important;
margin-right:0!important;
box-sizing:border-box!important;
}
}
/* v26 — NUR HANDY:
Beide abgestimmten Datumsfelder rechts exakt 3px breiter.
Linke Kante bleibt unverändert. */
@media (max-width:560px) and (pointer:coarse){
#adminAddDateForm.admin-add-date-form .field:first-child,
#dateSuggestionForm > .field:first-child{
width:calc(100% - 27px)!important;
max-width:calc(100% - 27px)!important;
margin-left:0!important;
margin-right:27px!important;
}
}
/* v27 — NUR HANDY:
„Anderes Datum vorschlagen“: Datumsfeld rechts ca. 10px einziehen.
Linke Kante bleibt unverändert. Nur dieses Feld. */
@media (max-width:560px) and (pointer:coarse){
#dateSuggestionForm .date-suggestion-date-row{
width:calc(100% - 10px)!important;
max-width:calc(100% - 10px)!important;
margin-left:0!important;
margin-right:10px!important;
box-sizing:border-box!important;
}
#dateSuggestionForm .date-suggestion-date-row .field,
#dateSuggestionForm .date-suggestion-date-row input[type="date"]{
width:100%!important;
max-width:100%!important;
margin-left:0!important;
margin-right:0!important;
box-sizing:border-box!important;
}
}
/* v29 — NUR HANDY:
Korrigiert ausschliesslich das Datumsfeld bei
„Anderes Datum vorschlagen“, damit es rechts nicht mehr aus dem Handy läuft. */
@media (max-width:560px) and (pointer:coarse){
#dateSuggestionForm .date-suggestion-date-row{
width:100%!important;
max-width:100%!important;
min-width:0!important;
box-sizing:border-box!important;
overflow:visible!important;
}
#dateSuggestionForm .date-suggestion-date-row .field{
width:100%!important;
max-width:100%!important;
min-width:0!important;
box-sizing:border-box!important;
}
#dateSuggestionForm .date-suggestion-date-row input[type="date"]{
display:block!important;
width:calc(100% - 12px)!important;
max-width:calc(100% - 12px)!important;
min-width:0!important;
margin-left:0!important;
margin-right:12px!important;
box-sizing:border-box!important;
}
}
/* v30 — NUR HANDY, NUR „Anderes Datum vorschlagen“:
Rechte Kante zuverlässig über den Wrapper einziehen.
Das native iOS-Datumsfeld bleibt intern 100% breit. */
@media (max-width:560px) and (pointer:coarse){
#dateSuggestionForm .date-suggestion-date-row{
width:100%!important;
max-width:100%!important;
min-width:0!important;
padding-left:0!important;
padding-right:5px!important;
margin-left:0!important;
margin-right:0!important;
box-sizing:border-box!important;
justify-self:start!important;
}
#dateSuggestionForm .date-suggestion-date-row .field{
width:100%!important;
max-width:100%!important;
min-width:0!important;
margin:0!important;
box-sizing:border-box!important;
}
#dateSuggestionForm .date-suggestion-date-row input[type="date"]{
width:100%!important;
max-width:100%!important;
min-width:0!important;
margin:0!important;
box-sizing:border-box!important;
}
}
/* v32 — NUR HANDY, NUR das sichtbare Datums-Eingabefeld unter „Datum“
bei „Anderes Datum vorschlagen“.
Linke Kante bleibt unverändert, rechte Kante exakt 10px kürzer. */
@media (max-width:560px) and (pointer:coarse){
#dateSuggestionForm #suggestDate{
display:block!important;
width:calc(100% - 10px)!important;
max-width:calc(100% - 10px)!important;
min-width:0!important;
margin-left:0!important;
margin-right:10px!important;
box-sizing:border-box!important;
justify-self:start!important;
}
}
/* v33 — NUR HANDY / iOS, NUR „Anderes Datum vorschlagen“:
Das native date-Input darf seine 100%-Breite durch WebKit-Padding nicht
ueber die rechte Kartenkante hinaus vergroessern. Sonst nichts aendern. */
@media (max-width:560px) and (pointer:coarse){
@supports (-webkit-touch-callout:none){
#dateSuggestionForm .date-suggestion-date-row,
#dateSuggestionForm .date-suggestion-date-row .field{
width:100%!important;
max-width:100%!important;
min-width:0!important;
margin-left:0!important;
margin-right:0!important;
padding-left:0!important;
padding-right:0!important;
box-sizing:border-box!important;
}
#dateSuggestionForm #suggestDate{
-webkit-appearance:none!important;
appearance:none!important;
display:block!important;
inline-size:100%!important;
width:100%!important;
max-inline-size:100%!important;
max-width:100%!important;
min-inline-size:0!important;
min-width:0!important;
margin:0!important;
padding-left:10px!important;
padding-right:10px!important;
box-sizing:border-box!important;
justify-self:stretch!important;
overflow:hidden!important;
}
}
}
/* V270 / 2026-09-08 — Startseite: reine Oberflächen-Erweiterung für die Produktdemo.
Bestehende Logik bleibt unverändert. Rechts im Hero ersetzt ein Geräte-Mockup
die bisherige statische Stundenplan-Karte. Ein Play-Button steuert beide Videos. */
.create-page .home-premium-hero .hero-device-demo{
position:relative;
width:min(100%,780px);
min-height:390px;
align-self:center;
isolation:isolate;
}
.create-page .home-premium-hero .hero-demo-glow{
position:absolute;
inset:8% 2% 4% 8%;
border-radius:50%;
background:radial-gradient(circle at 55% 55%,rgba(116,211,179,.20),rgba(192,215,242,.14) 40%,rgba(255,255,255,0) 72%);
filter:blur(8px);
pointer-events:none;
z-index:-1;
}
.create-page .home-premium-hero .hero-laptop{
position:absolute;
left:1%;
right:15%;
top:6%;
aspect-ratio:1.62/1;
z-index:1;
}
.create-page .home-premium-hero .hero-laptop-screen{
position:absolute;
inset:0 2.3% 7.5%;
overflow:hidden;
border:9px solid #111318;
border-bottom-width:12px;
border-radius:20px 20px 11px 11px;
background:#f8fafb;
box-shadow:0 22px 44px rgba(25,38,52,.16),0 3px 8px rgba(25,38,52,.12);
}
.create-page .home-premium-hero .hero-laptop-screen::before{
content:"";
position:absolute;
top:3px;
left:50%;
width:52px;
height:9px;
transform:translateX(-50%);
border-radius:0 0 8px 8px;
background:#0b0d10;
z-index:4;
}
.create-page .home-premium-hero .hero-laptop-base{
position:absolute;
left:0;
right:0;
bottom:0;
height:8.2%;
border-radius:2px 2px 22px 22px;
background:linear-gradient(#aeb5bd,#e0e3e6 35%,#969da5 90%);
box-shadow:0 8px 9px rgba(22,32,43,.16);
}
.create-page .home-premium-hero .hero-laptop-base::before{
content:"";
position:absolute;
left:2.5%;
right:2.5%;
top:0;
height:3px;
background:#6f7780;
opacity:.45;
}
.create-page .home-premium-hero .hero-laptop-base span{
position:absolute;
left:43%;
width:14%;
top:0;
height:34%;
background:rgba(70,78,86,.28);
border-radius:0 0 8px 8px;
}
.create-page .home-premium-hero .hero-phone{
position:absolute;
right:1%;
top:22%;
width:25.5%;
aspect-ratio:390/844;
z-index:3;
border:5px solid #111318;
border-radius:29px;
background:#111318;
box-shadow:0 22px 42px rgba(25,38,52,.19),0 4px 9px rgba(25,38,52,.14);
overflow:hidden;
}
.create-page .home-premium-hero .hero-phone-screen{
position:absolute;
inset:3px;
overflow:hidden;
border-radius:22px;
background:#fff;
}
.create-page .home-premium-hero .hero-phone-speaker{
position:absolute;
top:7px;
left:50%;
width:34%;
height:13px;
transform:translateX(-50%);
border-radius:10px;
background:#07090b;
z-index:5;
}
.create-page .home-premium-hero .hero-demo-video{
display:block;
width:100%;
height:100%;
object-fit:cover;
background:#fff;
}
.create-page .home-premium-hero .hero-screen-shine{
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(120deg,rgba(255,255,255,.14),rgba(255,255,255,0) 34%);
}
.create-page .home-premium-hero .hero-demo-play{
position:absolute;
left:50%;
top:50%;
width:76px;
height:76px;
margin-left:-38px;
margin-top:-34px;
transform:none!important;
z-index:6;
display:grid;
place-items:center;
border:1px solid rgba(255,255,255,.72)!important;
border-radius:50%;
padding:0;
cursor:pointer;
background:rgba(17,24,39,.60);
box-shadow:0 10px 26px rgba(17,24,39,.20),inset 0 0 0 1px rgba(255,255,255,.13);
-webkit-backdrop-filter:blur(7px);
backdrop-filter:blur(7px);
transition:background .18s ease,box-shadow .18s ease,border-color .18s ease,opacity .18s ease;
}
.create-page .home-premium-hero .hero-demo-play:hover{
transform:none!important;
background:rgba(15,118,110,.78)!important;
border-color:rgba(255,255,255,.88)!important;
box-shadow:0 15px 34px rgba(17,24,39,.28),0 0 0 7px rgba(15,118,110,.08),inset 0 0 0 1px rgba(255,255,255,.16)!important;
}
.create-page .home-premium-hero .hero-demo-play-icon{
width:0;
height:0;
border-top:12px solid transparent;
border-bottom:12px solid transparent;
border-left:19px solid #fff;
margin-left:5px;
}
.create-page .home-premium-hero .hero-device-demo.is-playing .hero-demo-play{
opacity:0;
pointer-events:none;
}
.create-page .home-premium-hero .hero-device-demo.is-paused .hero-demo-play{
opacity:1;
pointer-events:auto;
}
@media (max-width:1000px){
.create-page .home-premium-hero .hero-device-demo{
min-height:330px;
}
}
@media (max-width:760px){
.create-page .home-premium-hero .hero-device-demo{
width:100%;
min-height:270px;
margin-top:8px;
}
.create-page .home-premium-hero .hero-laptop{
left:0;
right:18%;
top:4%;
}
.create-page .home-premium-hero .hero-phone{
width:27%;
right:1%;
top:20%;
border-width:4px;
border-radius:22px;
}
.create-page .home-premium-hero .hero-phone-screen{border-radius:17px;}
.create-page .home-premium-hero .hero-phone-speaker{top:5px;height:9px;}
.create-page .home-premium-hero .hero-demo-play{
width:58px;
height:58px;
left:50%;
top:50%;
margin-left:-29px;
margin-top:-26px;
}
.create-page .home-premium-hero .hero-demo-play-icon{
border-top-width:9px;
border-bottom-width:9px;
border-left-width:15px;
}
}
@media (max-width:430px){
.create-page .home-premium-hero .hero-device-demo{min-height:225px;}
.create-page .home-premium-hero .hero-laptop-screen{border-width:6px;border-bottom-width:9px;border-radius:14px 14px 8px 8px;}
.create-page .home-premium-hero .hero-laptop-screen::before{width:36px;height:6px;}
.create-page .home-premium-hero .hero-phone{border-width:3px;border-radius:19px;}
.create-page .home-premium-hero .hero-demo-play{width:50px;height:50px;margin-left:-25px;margin-top:-22px;}
}
/* V271 — Hero Playbutton: exakt in der Mitte des Laptop-Bildschirms.
Hover färbt den Button wieder grün, ohne ihn zu verschieben; Position und bestehende Logik bleiben unverändert. */
.create-page .home-premium-hero .hero-demo-play,
.create-page .home-premium-hero .hero-demo-play:hover,
.create-page .home-premium-hero .hero-demo-play:focus,
.create-page .home-premium-hero .hero-demo-play:focus-visible,
.create-page .home-premium-hero .hero-demo-play:active{
transform:none!important;
}
@media (max-width:760px){
.create-page .home-premium-hero .hero-demo-play{
left:50%!important;
top:50%!important;
}
}
@media (max-width:430px){
.create-page .home-premium-hero .hero-demo-play{
left:50%!important;
top:50%!important;
}
}
/* V284 / 2026-09-08 — Desktop/Laptop: ausgewählter Wochentag wird zur vollen Zeile.
Mobile bleibt bewusst unverändert. Nur Layout: keine Formular-/Auswahllogik geändert. */
@media (min-width:821px){
/* Ein aktiver Wochentag belegt eine komplette Grid-Zeile. Die folgenden
Kacheln bleiben in ihrer bisherigen Reihenfolge und rutschen darunter. */
body.create-page .home-premium-creator #weekdays > .weekday-dimension.active{
grid-column:1 / -1!important;
inline-size:100%!important;
width:100%!important;
min-inline-size:0!important;
min-width:0!important;
max-inline-size:none!important;
max-width:none!important;
}
body.create-page .home-premium-creator #weekdays > .weekday-dimension.active > .weekday-toggle,
body.create-page .home-premium-creator #weekdays > .weekday-dimension.active > .day-time-panel:not([hidden]){
inline-size:100%!important;
width:100%!important;
min-inline-size:0!important;
min-width:0!important;
max-inline-size:none!important;
max-width:none!important;
box-sizing:border-box!important;
}
/* Zeitbereich skaliert proportional mit der vollen Kachelbreite. */
body.create-page .home-premium-creator #weekdays > .weekday-dimension.active > .day-time-panel:not([hidden]){
grid-template-columns:minmax(180px,1fr) 34px minmax(180px,1fr)!important;
grid-template-areas:
"caption caption caption"
"start dash end"!important;
column-gap:16px!important;
row-gap:10px!important;
padding:12px 16px!important;
}
body.create-page .home-premium-creator #weekdays > .weekday-dimension.active > .day-time-panel:not([hidden]) .dim-start,
body.create-page .home-premium-creator #weekdays > .weekday-dimension.active > .day-time-panel:not([hidden]) .dim-end{
inline-size:100%!important;
width:100%!important;
min-inline-size:0!important;
min-width:0!important;
max-inline-size:none!important;
max-width:none!important;
}
body.create-page .home-premium-creator #weekdays > .weekday-dimension.active > .day-time-panel:not([hidden]) input[type="time"]{
inline-size:100%!important;
width:100%!important;
min-inline-size:0!important;
min-width:0!important;
max-inline-size:none!important;
max-width:none!important;
min-height:48px!important;
padding:10px 14px!important;
font-size:18px!important;
border-radius:13px!important;
}
}
/* V286 / 2026-09-08 — Desktop/Laptop: drei gleich breite Wochentage pro Zeile.
Beim Öffnen bleibt die Tageskachel exakt gleich breit und an derselben Position;
nur ihre Zeitbox klappt darunter auf und vergrößert die betreffende Grid-Zeile.
Die nächste Zeile rutscht dadurch nach unten. Mobile bleibt unverändert. */
@media (min-width:821px){
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
grid-auto-columns:minmax(0,1fr)!important;
grid-auto-flow:row!important;
gap:14px!important;
align-items:start!important;
justify-content:stretch!important;
width:100%!important;
max-width:100%!important;
}
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension{
grid-column:auto!important;
inline-size:100%!important;
width:100%!important;
min-inline-size:0!important;
min-width:0!important;
max-inline-size:none!important;
max-width:none!important;
flex:0 1 auto!important;
box-sizing:border-box!important;
}
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension > .weekday-toggle,
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension > .day-time-panel{
inline-size:100%!important;
width:100%!important;
min-inline-size:0!important;
min-width:0!important;
max-inline-size:none!important;
max-width:none!important;
box-sizing:border-box!important;
}
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension.active > .day-time-panel:not([hidden]){
grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr)!important;
grid-template-areas:
"caption caption caption"
"start dash end"!important;
column-gap:8px!important;
row-gap:8px!important;
padding:12px!important;
margin-top:10px!important;
}
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension.active > .day-time-panel:not([hidden]) .dim-start{grid-area:start!important;}
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension.active > .day-time-panel:not([hidden]) .time-dash{grid-area:dash!important;align-self:center!important;justify-self:center!important;}
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension.active > .day-time-panel:not([hidden]) .dim-end{grid-area:end!important;}
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension.active > .day-time-panel:not([hidden]) .time-caption{grid-area:caption!important;}
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension.active > .day-time-panel:not([hidden]) input[type="time"]{
inline-size:100%!important;
width:100%!important;
min-inline-size:0!important;
min-width:0!important;
max-width:100%!important;
box-sizing:border-box!important;
}
}
/* V287 / 2026-09-08 — Wochentage responsiv: klar 3-spaltig oder 1-spaltig.
Desktop/Laptop: drei gleich breite Spalten; Öffnen ändert die Kachelbreite nicht.
Schmale Screens: eine Kachel pro Zeile über die volle Inhaltsbreite.
Reine Darstellung, keine Logikänderung. */
@media (min-width:821px){
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:14px!important;
align-items:start!important;
width:100%!important;
}
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension,
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension.active{
grid-column:auto!important;
width:100%!important;
inline-size:100%!important;
min-width:0!important;
min-inline-size:0!important;
max-width:none!important;
max-inline-size:none!important;
}
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension > .weekday-toggle,
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension.active > .weekday-toggle,
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension > .day-time-panel,
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension.active > .day-time-panel:not([hidden]){
width:100%!important;
inline-size:100%!important;
max-width:100%!important;
box-sizing:border-box!important;
}
}
@media (max-width:820px){
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker{
display:grid!important;
grid-template-columns:minmax(0,1fr)!important;
grid-auto-flow:row!important;
gap:14px!important;
width:100%!important;
max-width:100%!important;
}
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension,
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension.active{
grid-column:1!important;
width:100%!important;
inline-size:100%!important;
min-width:0!important;
max-width:100%!important;
}
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension > .weekday-toggle,
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension > .day-time-panel,
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension.active > .day-time-panel:not([hidden]){
width:100%!important;
inline-size:100%!important;
max-width:100%!important;
box-sizing:border-box!important;
}
}
/* V288 / 2026-09-08 — Wochentage responsiv in drei Stufen.
Breit: 3 Spalten. Mittel: 2 Spalten. Erst auf wirklich schmalen Screens: 1 Spalte.
Geöffnete Tage behalten immer exakt ihre aktuelle Spaltenbreite; nur die Zeitbox klappt darunter auf.
Reine Darstellung, keine Logikänderung. */
@media (min-width:1001px){
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
}
@media (min-width:641px) and (max-width:1000px){
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
grid-auto-flow:row!important;
gap:14px!important;
width:100%!important;
max-width:100%!important;
align-items:start!important;
}
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension,
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension.active{
grid-column:auto!important;
width:100%!important;
inline-size:100%!important;
min-width:0!important;
min-inline-size:0!important;
max-width:none!important;
max-inline-size:none!important;
}
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension > .weekday-toggle,
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension > .day-time-panel,
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension.active > .day-time-panel:not([hidden]){
width:100%!important;
inline-size:100%!important;
max-width:100%!important;
box-sizing:border-box!important;
}
}
@media (max-width:640px){
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker{
display:grid!important;
grid-template-columns:minmax(0,1fr)!important;
grid-auto-flow:row!important;
gap:14px!important;
width:100%!important;
max-width:100%!important;
}
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension,
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension.active{
grid-column:1!important;
width:100%!important;
inline-size:100%!important;
min-width:0!important;
max-width:100%!important;
}
}
/* V289 / 2026-09-08 — sauberer Übergang 2 → 1 Spalte.
Im mittleren 2-Spalten-Bereich dürfen die Zeitfelder keine intrinsische
Mindestbreite erzwingen. Erst wenn zwei Karten wirklich zu eng werden,
wechselt das Raster auf eine Spalte. Nur Darstellung. */
@media (min-width:721px) and (max-width:1000px){
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension,
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension.active,
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension > .weekday-toggle,
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension > .day-time-panel,
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension.active > .day-time-panel:not([hidden]),
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension.active > .day-time-panel:not([hidden]) .dim-start,
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension.active > .day-time-panel:not([hidden]) .dim-end,
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension.active > .day-time-panel:not([hidden]) input[type="time"]{
min-width:0!important;
min-inline-size:0!important;
max-width:100%!important;
max-inline-size:100%!important;
width:100%!important;
inline-size:100%!important;
box-sizing:border-box!important;
}
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension.active > .day-time-panel:not([hidden]){
grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr)!important;
grid-template-areas:
"caption caption caption"
"start dash end"!important;
column-gap:6px!important;
padding:10px!important;
overflow:hidden!important;
}
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension.active > .day-time-panel:not([hidden]) input[type="time"]{
padding-left:10px!important;
padding-right:10px!important;
font-size:clamp(16px,2vw,18px)!important;
}
}
@media (max-width:720px){
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker{
grid-template-columns:minmax(0,1fr)!important;
}
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension,
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension.active{
grid-column:1!important;
min-width:0!important;
width:100%!important;
max-width:100%!important;
}
}
/* V290 / 2026-09-08 — Einspaltig wirklich erst ganz am Schluss.
2 Spalten bleiben bis 561px erhalten; erst auf sehr schmalen Screens <=560px
wird auf eine volle Kachel pro Zeile gewechselt. Reine Darstellung. */
@media (min-width:561px) and (max-width:1000px){
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
grid-auto-flow:row!important;
gap:14px!important;
width:100%!important;
max-width:100%!important;
align-items:start!important;
}
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension,
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension.active{
grid-column:auto!important;
width:100%!important;
inline-size:100%!important;
min-width:0!important;
min-inline-size:0!important;
max-width:none!important;
max-inline-size:none!important;
}
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension > .weekday-toggle,
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension > .day-time-panel,
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension.active > .day-time-panel:not([hidden]),
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension.active > .day-time-panel:not([hidden]) .dim-start,
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension.active > .day-time-panel:not([hidden]) .dim-end,
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension.active > .day-time-panel:not([hidden]) input[type="time"]{
min-width:0!important;
min-inline-size:0!important;
max-width:100%!important;
max-inline-size:100%!important;
width:100%!important;
inline-size:100%!important;
box-sizing:border-box!important;
}
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension.active > .day-time-panel:not([hidden]){
grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr)!important;
grid-template-areas:
"caption caption caption"
"start dash end"!important;
column-gap:5px!important;
padding:9px!important;
overflow:hidden!important;
}
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension.active > .day-time-panel:not([hidden]) input[type="time"]{
padding-left:8px!important;
padding-right:8px!important;
font-size:clamp(15px,2vw,18px)!important;
}
}
@media (max-width:560px){
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker{
grid-template-columns:minmax(0,1fr)!important;
}
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension,
body.create-page .home-premium-creator #weekdays.weekday-toggle-picker > .weekday-dimension.active{
grid-column:1!important;
width:100%!important;
inline-size:100%!important;
min-width:0!important;
max-width:100%!important;
}
}
/* V291 / 2026-09-08 — Wochentage: Uhrzeit in den weissen Zeitfeldern exakt zentrieren.
Reine Darstellung; gilt fuer Desktop, Tablet und Mobile. */
body.create-page .home-premium-creator #weekdays input[type="time"]{
text-align:center!important;
text-align-last:center!important;
padding-left:0!important;
padding-right:0!important;
}
/* Safari / WebKit: den nativen Zeitinhalt horizontal und vertikal zentrieren. */
body.create-page .home-premium-creator #weekdays input[type="time"]::-webkit-datetime-edit{
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
height:100%!important;
padding:0!important;
margin:0!important;
text-align:center!important;
}
body.create-page .home-premium-creator #weekdays input[type="time"]::-webkit-datetime-edit-fields-wrapper{
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
height:100%!important;
padding:0!important;
margin:0!important;
}
body.create-page .home-premium-creator #weekdays input[type="time"]::-webkit-datetime-edit-hour-field,
body.create-page .home-premium-creator #weekdays input[type="time"]::-webkit-datetime-edit-minute-field,
body.create-page .home-premium-creator #weekdays input[type="time"]::-webkit-datetime-edit-text{
padding:0!important;
margin:0!important;
}
/* v8.78 — Zeitfelder bleiben auch in schmaleren Desktop-/Tablet-Breiten mittig.
Nur visuelle Zentrierung der Uhrzeit; keine Layout- oder Funktionsänderung. */
@media (min-width:561px){
.weekday-dimension .day-time-panel input[type="time"]{
text-align:center!important;
font-variant-numeric:tabular-nums!important;
}
.weekday-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit,
.weekday-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit-fields-wrapper{
width:100%!important;
min-width:100%!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
padding:0!important;
margin:0!important;
box-sizing:border-box!important;
}
.weekday-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit-hour-field,
.weekday-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit-minute-field,
.weekday-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit-text{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
padding:0!important;
margin:0!important;
}
html.browser-safari .weekday-dimension .day-time-panel input[type="time"]{
text-align:center!important;
}
html.browser-safari .weekday-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit,
html.browser-safari .weekday-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit-fields-wrapper{
width:100%!important;
min-width:100%!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
}
}
/* V292 / 2026-09-08 — grosse Bildschirme: Uhrzeit auch vertikal exakt zentriert.
Nur Darstellung der Zeitinputs; keine Layout- oder Funktionsänderung. */
@media (min-width:1024px){
body.create-page .home-premium-creator #weekdays .day-time-panel input[type="time"]{
height:58px!important;
min-height:58px!important;
padding-top:0!important;
padding-bottom:0!important;
line-height:58px!important;
text-align:center!important;
font-variant-numeric:tabular-nums!important;
box-sizing:border-box!important;
}
body.create-page .home-premium-creator #weekdays .day-time-panel input[type="time"]::-webkit-datetime-edit,
body.create-page .home-premium-creator #weekdays .day-time-panel input[type="time"]::-webkit-datetime-edit-fields-wrapper{
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
height:100%!important;
min-height:100%!important;
padding:0!important;
margin:0!important;
line-height:1!important;
box-sizing:border-box!important;
}
body.create-page .home-premium-creator #weekdays .day-time-panel input[type="time"]::-webkit-datetime-edit-hour-field,
body.create-page .home-premium-creator #weekdays .day-time-panel input[type="time"]::-webkit-datetime-edit-minute-field,
body.create-page .home-premium-creator #weekdays .day-time-panel input[type="time"]::-webkit-datetime-edit-text{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
height:100%!important;
line-height:1!important;
padding:0!important;
margin:0!important;
}
}
/* V293 / 2026-09-08 — Zeitfelder auf Desktop mit konstanter, mittlerer Höhe.
Dadurch bleibt die Uhrzeit auch auf grossen Bildschirmen optisch sauber mittig. */
@media (min-width:761px) and (max-width:1023px){
body.create-page .home-premium-creator #weekdays .day-time-panel input[type="time"]{
height:54px!important;
min-height:54px!important;
max-height:54px!important;
padding:0 8px!important;
line-height:54px!important;
font-size:27px!important;
text-align:center!important;
box-sizing:border-box!important;
}
}
@media (min-width:1024px){
body.create-page .home-premium-creator #weekdays .day-time-panel input[type="time"]{
height:56px!important;
min-height:56px!important;
max-height:56px!important;
padding:0 8px!important;
line-height:56px!important;
font-size:29px!important;
text-align:center!important;
box-sizing:border-box!important;
}
}
@media (min-width:761px){
body.create-page .home-premium-creator #weekdays .day-time-panel input[type="time"]::-webkit-datetime-edit,
body.create-page .home-premium-creator #weekdays .day-time-panel input[type="time"]::-webkit-datetime-edit-fields-wrapper{
display:flex!important;
align-items:center!important;
justify-content:center!important;
height:100%!important;
min-height:100%!important;
padding:0!important;
margin:0!important;
line-height:1!important;
}
body.create-page .home-premium-creator #weekdays .day-time-panel input[type="time"]::-webkit-datetime-edit-hour-field,
body.create-page .home-premium-creator #weekdays .day-time-panel input[type="time"]::-webkit-datetime-edit-minute-field,
body.create-page .home-premium-creator #weekdays .day-time-panel input[type="time"]::-webkit-datetime-edit-text{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
height:100%!important;
padding:0!important;
margin:0!important;
line-height:1!important;
}
}
/* V294 / 2026-09-08 — sehr sanfte proportionale Seitenluft in den Wochentags-Zeitboxen.
Zeit-Label und äußere Zeitfelder rücken nur minimal mit der verfügbaren Breite ein. */
@media (min-width:761px){
body.create-page .home-premium-creator #weekdays .weekday-dimension .day-time-panel{
padding-left:clamp(14px,3%,20px)!important;
padding-right:clamp(14px,3%,20px)!important;
}
body.create-page .home-premium-creator #weekdays .weekday-dimension .day-time-panel .time-caption{
padding-left:clamp(0px,.35%,2px)!important;
padding-right:clamp(0px,.35%,2px)!important;
box-sizing:border-box!important;
}
}
/* V305 / 2026-09-08 — Datenkarten erhalten dieselbe Kachel-Logik wie Wochentage.
Breite nur visuell anpassen; Logik und Funktionen bleiben unverändert. */
@media (min-width:761px){
body.create-page .home-premium-creator #createForm #dates{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:16px 18px!important;
justify-content:stretch!important;
align-items:start!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
overflow:visible!important;
box-sizing:border-box!important;
}
body.create-page .home-premium-creator #createForm #dates > .date-dimension{
width:auto!important;
min-width:0!important;
max-width:100%!important;
box-sizing:border-box!important;
overflow:visible!important;
}
body.create-page .home-premium-creator .date-dimension .date-head,
body.create-page .home-premium-creator .date-dimension .day-time-panel{
width:100%!important;
min-width:0!important;
max-width:100%!important;
box-sizing:border-box!important;
}
body.create-page .home-premium-creator .date-dimension .date-head .dim-date{
width:100%!important;
min-width:0!important;
max-width:100%!important;
box-sizing:border-box!important;
}
body.create-page .home-premium-creator .date-dimension .day-time-panel{
display:grid!important;
grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr)!important;
column-gap:10px!important;
align-items:center!important;
padding:14px 16px 16px!important;
}
body.create-page .home-premium-creator .date-dimension .day-time-panel .dim-start,
body.create-page .home-premium-creator .date-dimension .day-time-panel .dim-end{
width:100%!important;
min-width:0!important;
max-width:100%!important;
box-sizing:border-box!important;
}
body.create-page .home-premium-creator .date-dimension .day-time-panel .time-dash{
width:28px!important;
min-width:28px!important;
max-width:28px!important;
justify-self:center!important;
text-align:center!important;
margin:0!important;
}
}
@media (min-width:761px) and (max-width:1180px){
body.create-page .home-premium-creator #createForm #dates{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
}
@media (max-width:560px){
body.create-page .home-premium-creator #createForm #dates{
grid-template-columns:1fr!important;
gap:10px!important;
}
body.create-page .home-premium-creator #createForm #dates > .date-dimension,
body.create-page .home-premium-creator .date-dimension .date-head,
body.create-page .home-premium-creator .date-dimension .day-time-panel{
width:100%!important;
min-width:0!important;
max-width:100%!important;
}
}
/* V306 / 2026-09-08 — Daten: alte feste Desktop-Kachelbreite vollständig neutralisieren.
Daten folgen jetzt exakt derselben responsiven Spaltenlogik wie Wochentage:
3 Spalten breit, 2 Spalten mittel, 1 Spalte ganz schmal. Nur Oberfläche. */
@media (min-width:1181px){
body.create-page .home-premium-creator #dateArea #dates{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
grid-auto-columns:auto!important;
gap:16px 18px!important;
justify-content:stretch!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
}
}
@media (min-width:561px) and (max-width:1180px){
body.create-page .home-premium-creator #dateArea #dates{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
grid-auto-columns:auto!important;
gap:16px 18px!important;
justify-content:stretch!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
}
}
@media (max-width:560px){
body.create-page .home-premium-creator #dateArea #dates{
display:grid!important;
grid-template-columns:1fr!important;
grid-auto-columns:auto!important;
gap:10px!important;
justify-content:stretch!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
}
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension,
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .date-head,
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel{
inline-size:auto!important;
width:100%!important;
min-inline-size:0!important;
min-width:0!important;
max-inline-size:100%!important;
max-width:100%!important;
box-sizing:border-box!important;
}
@media (min-width:561px){
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel,
html.browser-chromium body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel{
display:grid!important;
grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr)!important;
grid-template-areas:
"caption caption caption"
"start dash end"!important;
justify-content:stretch!important;
align-items:center!important;
column-gap:10px!important;
padding:14px 16px 16px!important;
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel .dim-start,
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel .dim-end{
width:100%!important;
min-width:0!important;
max-width:100%!important;
}
}
/* V308 / 2026-09-08 — Daten-Zeitfelder exakt wie Wochentage.
Keine eigene Typografie mehr: gleiche Höhe, Schriftgrösse, Zentrierung und
dieselbe sehr sanfte proportionale Seitenluft wie im Wochentage-Modus. */
@media (min-width:561px){
body.create-page .home-premium-creator #dateArea #dates .date-dimension .day-time-panel input[type="time"]{
text-align:center!important;
text-align-last:center!important;
font-variant-numeric:tabular-nums!important;
}
body.create-page .home-premium-creator #dateArea #dates .date-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit,
body.create-page .home-premium-creator #dateArea #dates .date-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit-fields-wrapper{
width:100%!important;
min-width:100%!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
padding:0!important;
margin:0!important;
box-sizing:border-box!important;
}
body.create-page .home-premium-creator #dateArea #dates .date-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit-hour-field,
body.create-page .home-premium-creator #dateArea #dates .date-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit-minute-field,
body.create-page .home-premium-creator #dateArea #dates .date-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit-text{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
padding:0!important;
margin:0!important;
}
}
@media (min-width:761px) and (max-width:1023px){
body.create-page .home-premium-creator #dateArea #dates .date-dimension .day-time-panel input[type="time"]{
height:54px!important;
min-height:54px!important;
max-height:54px!important;
padding:0 8px!important;
line-height:54px!important;
font-size:27px!important;
text-align:center!important;
box-sizing:border-box!important;
}
}
@media (min-width:1024px){
body.create-page .home-premium-creator #dateArea #dates .date-dimension .day-time-panel input[type="time"]{
height:56px!important;
min-height:56px!important;
max-height:56px!important;
padding:0 8px!important;
line-height:56px!important;
font-size:29px!important;
text-align:center!important;
box-sizing:border-box!important;
}
}
@media (min-width:761px){
body.create-page .home-premium-creator #dateArea #dates .date-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit,
body.create-page .home-premium-creator #dateArea #dates .date-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit-fields-wrapper{
display:flex!important;
align-items:center!important;
justify-content:center!important;
height:100%!important;
min-height:100%!important;
padding:0!important;
margin:0!important;
line-height:1!important;
}
body.create-page .home-premium-creator #dateArea #dates .date-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit-hour-field,
body.create-page .home-premium-creator #dateArea #dates .date-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit-minute-field,
body.create-page .home-premium-creator #dateArea #dates .date-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit-text{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
height:100%!important;
padding:0!important;
margin:0!important;
line-height:1!important;
}
body.create-page .home-premium-creator #dateArea #dates .date-dimension .day-time-panel{
padding-left:clamp(14px,3%,20px)!important;
padding-right:clamp(14px,3%,20px)!important;
}
body.create-page .home-premium-creator #dateArea #dates .date-dimension .day-time-panel .time-caption{
padding-left:clamp(0px,.35%,2px)!important;
padding-right:clamp(0px,.35%,2px)!important;
box-sizing:border-box!important;
}
}
/* V309 / 2026-09-08 — Daten-Uhrzeiten: exakt dieselbe Typografie wie Wochentage.
Die vorherige vergrößerte Daten-Schrift wird neutralisiert; Breiten-/Grid-Fixes bleiben erhalten. */
@media (min-width:561px){
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel input[type="time"]{
font-size:18px!important;
padding:10px 14px!important;
border-radius:13px!important;
text-align:center!important;
text-align-last:center!important;
font-variant-numeric:tabular-nums!important;
}
}
@media (min-width:761px) and (max-width:1023px){
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel input[type="time"]{
height:54px!important;
min-height:54px!important;
max-height:54px!important;
line-height:normal!important;
font-size:18px!important;
}
}
@media (min-width:1024px){
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel input[type="time"]{
height:56px!important;
min-height:56px!important;
max-height:56px!important;
line-height:normal!important;
font-size:18px!important;
}
}
/* V310 / 2026-09-08 — Daten: der komplette Zeitbereich unter der schwarzen
Titel-Kachel soll EXAKT dieselben Werte wie bei Wochentage erhalten.
Also gleiche Textgröße, gleiche Höhen, gleiche Abstände, gleiche Zentrierung
und dieselbe sanfte Außenluft. */
@media (min-width:561px){
body.create-page .home-premium-creator #dateArea #dates .date-dimension .day-time-panel input[type="time"]{
text-align:center!important;
text-align-last:center!important;
font-variant-numeric:tabular-nums!important;
}
body.create-page .home-premium-creator #dateArea #dates .date-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit,
body.create-page .home-premium-creator #dateArea #dates .date-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit-fields-wrapper{
width:100%!important;
min-width:100%!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
padding:0!important;
margin:0!important;
box-sizing:border-box!important;
}
body.create-page .home-premium-creator #dateArea #dates .date-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit-hour-field,
body.create-page .home-premium-creator #dateArea #dates .date-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit-minute-field,
body.create-page .home-premium-creator #dateArea #dates .date-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit-text{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
padding:0!important;
margin:0!important;
}
}
@media (min-width:761px) and (max-width:1023px){
body.create-page .home-premium-creator #dateArea #dates .date-dimension .day-time-panel input[type="time"]{
height:54px!important;
min-height:54px!important;
max-height:54px!important;
padding:0 8px!important;
line-height:54px!important;
font-size:27px!important;
text-align:center!important;
box-sizing:border-box!important;
}
}
@media (min-width:1024px){
body.create-page .home-premium-creator #dateArea #dates .date-dimension .day-time-panel input[type="time"]{
height:56px!important;
min-height:56px!important;
max-height:56px!important;
padding:0 8px!important;
line-height:56px!important;
font-size:29px!important;
text-align:center!important;
box-sizing:border-box!important;
}
}
@media (min-width:761px){
body.create-page .home-premium-creator #dateArea #dates .date-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit,
body.create-page .home-premium-creator #dateArea #dates .date-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit-fields-wrapper{
display:flex!important;
align-items:center!important;
justify-content:center!important;
height:100%!important;
min-height:100%!important;
padding:0!important;
margin:0!important;
line-height:1!important;
}
body.create-page .home-premium-creator #dateArea #dates .date-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit-hour-field,
body.create-page .home-premium-creator #dateArea #dates .date-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit-minute-field,
body.create-page .home-premium-creator #dateArea #dates .date-dimension .day-time-panel input[type="time"]::-webkit-datetime-edit-text{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
height:100%!important;
padding:0!important;
margin:0!important;
line-height:1!important;
}
body.create-page .home-premium-creator #dateArea #dates .date-dimension .day-time-panel{
padding-left:clamp(14px,3%,20px)!important;
padding-right:clamp(14px,3%,20px)!important;
}
body.create-page .home-premium-creator #dateArea #dates .date-dimension .day-time-panel .time-caption{
padding-left:clamp(0px,.35%,2px)!important;
padding-right:clamp(0px,.35%,2px)!important;
box-sizing:border-box!important;
}
}
/* V311 / 2026-09-08 — Daten verwenden exakt die bestehende Wochentag-Kachelvorlage.
Nur Oberfläche: gleiche responsive Spalten, gleiche Außenabstände und exakt
dieselbe Geometrie des weißen Zeitbereichs. Wochentage selbst bleiben unverändert. */
body.create-page .home-premium-creator #dateArea #dates{
display:grid!important;
grid-auto-flow:row!important;
gap:14px!important;
align-items:start!important;
justify-content:stretch!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
margin:10px 0 12px!important;
padding:0!important;
overflow:visible!important;
box-sizing:border-box!important;
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension,
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .date-head,
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel{
inline-size:100%!important;
width:100%!important;
min-inline-size:0!important;
min-width:0!important;
max-inline-size:100%!important;
max-width:100%!important;
box-sizing:border-box!important;
}
@media (min-width:1001px){
body.create-page .home-premium-creator #dateArea #dates{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel{
display:grid!important;
grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr)!important;
grid-template-areas:
"caption caption caption"
"start dash end"!important;
justify-content:stretch!important;
align-items:center!important;
column-gap:8px!important;
row-gap:8px!important;
margin-top:10px!important;
padding-top:12px!important;
padding-bottom:12px!important;
padding-left:clamp(14px,3%,20px)!important;
padding-right:clamp(14px,3%,20px)!important;
overflow:hidden!important;
}
}
@media (min-width:561px) and (max-width:1000px){
body.create-page .home-premium-creator #dateArea #dates{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel{
display:grid!important;
grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr)!important;
grid-template-areas:
"caption caption caption"
"start dash end"!important;
justify-content:stretch!important;
align-items:center!important;
column-gap:5px!important;
row-gap:8px!important;
margin-top:10px!important;
padding:9px!important;
overflow:hidden!important;
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel input[type="time"]{
min-inline-size:0!important;
min-width:0!important;
max-inline-size:100%!important;
max-width:100%!important;
inline-size:100%!important;
width:100%!important;
padding-left:8px!important;
padding-right:8px!important;
font-size:clamp(15px,2vw,18px)!important;
box-sizing:border-box!important;
}
}
@media (min-width:761px) and (max-width:1000px){
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel{
padding-left:clamp(14px,3%,20px)!important;
padding-right:clamp(14px,3%,20px)!important;
}
}
@media (max-width:560px){
body.create-page .home-premium-creator #dateArea #dates{
grid-template-columns:minmax(0,1fr)!important;
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension{
grid-column:1!important;
}
/* Mobile exakt wie die bestehende aktive Wochentag-Kachel. */
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel{
display:grid!important;
grid-template-columns:108px 28px 108px!important;
grid-template-areas:
"caption caption caption"
"start dash end"!important;
justify-content:center!important;
align-items:center!important;
column-gap:10px!important;
row-gap:8px!important;
margin:10px 0 0!important;
padding:10px 16px!important;
border:1px solid var(--line)!important;
border-radius:14px!important;
background:#fff!important;
overflow:hidden!important;
box-sizing:border-box!important;
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel .dim-start,
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel .dim-end{
width:108px!important;
min-width:108px!important;
max-width:108px!important;
justify-self:center!important;
box-sizing:border-box!important;
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel .time-dash{
width:28px!important;
min-width:28px!important;
max-width:28px!important;
justify-self:center!important;
align-self:center!important;
text-align:center!important;
margin:0!important;
padding:0!important;
}
}
/* Gemeinsame Detailgeometrie des Zeitbereichs: identisch zum Wochentag. */
body.create-page .home-premium-creator #dateArea #dates .day-time-panel .time-caption{
grid-area:caption!important;
grid-column:auto!important;
width:100%!important;
margin:0!important;
justify-self:start!important;
box-sizing:border-box!important;
}
body.create-page .home-premium-creator #dateArea #dates .day-time-panel .dim-start{grid-area:start!important;}
body.create-page .home-premium-creator #dateArea #dates .day-time-panel .time-dash{grid-area:dash!important;justify-self:center!important;text-align:center!important;margin:0!important;}
body.create-page .home-premium-creator #dateArea #dates .day-time-panel .dim-end{grid-area:end!important;}
body.create-page .home-premium-creator #dateArea #dates input[type="time"]{
text-align:center!important;
text-align-last:center!important;
font-variant-numeric:tabular-nums!important;
}
body.create-page .home-premium-creator #dateArea #dates input[type="time"]::-webkit-datetime-edit,
body.create-page .home-premium-creator #dateArea #dates input[type="time"]::-webkit-datetime-edit-fields-wrapper{
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
height:100%!important;
min-height:100%!important;
padding:0!important;
margin:0!important;
text-align:center!important;
line-height:1!important;
box-sizing:border-box!important;
}
body.create-page .home-premium-creator #dateArea #dates input[type="time"]::-webkit-datetime-edit-hour-field,
body.create-page .home-premium-creator #dateArea #dates input[type="time"]::-webkit-datetime-edit-minute-field,
body.create-page .home-premium-creator #dateArea #dates input[type="time"]::-webkit-datetime-edit-text{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
height:100%!important;
padding:0!important;
margin:0!important;
line-height:1!important;
text-align:center!important;
}
@media (min-width:761px) and (max-width:1023px){
body.create-page .home-premium-creator #dateArea #dates .day-time-panel input[type="time"]{
height:54px!important;
min-height:54px!important;
max-height:54px!important;
padding:0 8px!important;
line-height:54px!important;
font-size:27px!important;
}
}
@media (min-width:1024px){
body.create-page .home-premium-creator #dateArea #dates .day-time-panel input[type="time"]{
height:56px!important;
min-height:56px!important;
max-height:56px!important;
padding:0 8px!important;
line-height:56px!important;
font-size:29px!important;
}
}
/* V312 / 2026-09-08 — Feinabgleich Datenkachel 1:1 zur bestehenden Wochentag-Kachel.
Ausschließlich Darstellung der Datenkarten; keinerlei Logikänderung. */
/* Die Detailfelder übernehmen wieder die unveränderte Wochentag-Geometrie. */
@media (max-width:560px){
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel input[type="time"]{
-webkit-appearance:none!important;
appearance:none!important;
display:block!important;
width:108px!important;
min-width:108px!important;
max-width:108px!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
box-sizing:border-box!important;
border:1px solid var(--line)!important;
border-radius:10px!important;
background:#fbfbfd!important;
background-clip:padding-box!important;
padding:9px 8px!important;
font:inherit!important;
font-variant-numeric:tabular-nums!important;
line-height:1.2!important;
text-align:center!important;
text-align-last:center!important;
justify-self:center!important;
overflow:visible!important;
box-shadow:none!important;
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel input[type="time"]::-webkit-datetime-edit{
display:block!important;
min-width:0!important;
width:auto!important;
height:auto!important;
min-height:0!important;
padding:0!important;
margin:0!important;
text-align:center!important;
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel input[type="time"]::-webkit-datetime-edit-fields-wrapper{
display:block!important;
width:auto!important;
height:auto!important;
min-height:0!important;
padding:0!important;
margin:0!important;
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel input[type="time"]::-webkit-calendar-picker-indicator{
display:none!important;
-webkit-appearance:none!important;
width:0!important;
min-width:0!important;
margin:0!important;
padding:0!important;
}
}
/* Zwischenbreiten: exakt dieselben Abstände und Feldformen wie Wochentage. */
@media (min-width:561px) and (max-width:760px){
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel{
margin-top:8px!important;
row-gap:7px!important;
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel .time-caption{
grid-area:auto!important;
grid-column:1 / -1!important;
width:100%!important;
margin:0 0 1px!important;
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel .time-dash{
grid-area:auto!important;
grid-column:2!important;
width:24px!important;
min-width:24px!important;
max-width:none!important;
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel input[type="time"]{
height:auto!important;
min-height:0!important;
max-height:none!important;
padding:9px 8px!important;
border-radius:10px!important;
line-height:1.2!important;
}
}
/* Tablet / schmaler Desktop: die Daten-Zeitbox nutzt exakt die Wochentag-Innenbreite. */
@media (min-width:761px) and (max-width:1000px){
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel{
padding:9px!important;
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel .time-dash{
width:28px!important;
min-width:28px!important;
max-width:28px!important;
}
}
@media (min-width:761px) and (max-width:820px){
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel input[type="time"]{
border-radius:10px!important;
padding:0 8px!important;
}
}
@media (min-width:821px) and (max-width:1000px){
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel .time-caption{
grid-area:caption!important;
grid-column:caption!important;
width:100%!important;
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel input[type="time"]{
padding:10px 8px!important;
border-radius:13px!important;
}
}
/* Breite Ansichten: dieselbe Wochentag-Typografie und dieselben Innenabstände. */
@media (min-width:1001px){
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel{
padding:12px!important;
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel .time-caption{
grid-area:caption!important;
grid-column:caption!important;
width:100%!important;
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel .time-dash{
width:28px!important;
min-width:28px!important;
max-width:28px!important;
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel input[type="time"]{
padding:10px 14px!important;
font-size:18px!important;
border-radius:13px!important;
}
}
/* V313 / 2026-09-08 — Datenkachel übernimmt 1:1 die sichtbare Wochentag-Kachelvorlage.
Nur Startseiten-Oberfläche: Kopf-Geometrie/Material sowie mobile Zeitfelder.
Datums-/Zeitlogik und bestehende Interaktionen bleiben unverändert. */
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .date-head{
position:relative!important;
display:block!important;
margin:0!important;
padding:0!important;
box-sizing:border-box!important;
overflow:hidden!important;
border:1px solid #111827!important;
border-radius:14px!important;
background:var(--zf-dark-surface,linear-gradient(180deg,#111827 0%,#0f172a 100%))!important;
background-color:#111827!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .date-head > .dim-date{
-webkit-appearance:none!important;
appearance:none!important;
display:block!important;
inline-size:100%!important;
width:100%!important;
min-inline-size:0!important;
min-width:0!important;
max-inline-size:100%!important;
max-width:100%!important;
height:100%!important;
min-height:100%!important;
max-height:100%!important;
margin:0!important;
box-sizing:border-box!important;
border:0!important;
border-radius:13px!important;
background:transparent!important;
color:#fff!important;
box-shadow:none!important;
font:inherit!important;
font-size:.98rem!important;
font-weight:750!important;
line-height:1.2!important;
text-align:center!important;
text-align-last:center!important;
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .date-head > .dim-date::-webkit-date-and-time-value,
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .date-head > .dim-date::-webkit-datetime-edit{
text-align:center!important;
padding:0!important;
margin:0!important;
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .date-head > .remove-dim{
position:absolute!important;
z-index:8!important;
top:0!important;
right:0!important;
bottom:0!important;
left:auto!important;
height:100%!important;
margin:0!important;
padding:0!important;
transform:none!important;
border:0!important;
background:transparent!important;
color:#fff!important;
display:grid!important;
place-items:center!important;
}
/* Dieselben drei Kopf-Höhen, die die bestehende Wochentag-Kachel aktuell nutzt. */
@media (max-width:760px){
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .date-head{
height:44px!important;
min-height:44px!important;
max-height:44px!important;
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .date-head > .dim-date{
padding:11px 50px!important;
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .date-head > .remove-dim{
width:44px!important;
min-width:44px!important;
max-width:44px!important;
}
}
@media (min-width:761px) and (max-width:820px){
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .date-head{
height:46px!important;
min-height:46px!important;
max-height:46px!important;
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .date-head > .dim-date{
padding:11px 50px!important;
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .date-head > .remove-dim{
width:46px!important;
min-width:46px!important;
max-width:46px!important;
}
}
@media (min-width:821px){
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .date-head{
height:48px!important;
min-height:48px!important;
max-height:48px!important;
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .date-head > .dim-date{
padding:0 50px!important;
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .date-head > .remove-dim{
width:48px!important;
min-width:48px!important;
max-width:48px!important;
}
}
/* Mobile: native Time-Input-Innengeometrie auf dieselbe sichtbare Höhe wie Wochentage bringen. */
@media (max-width:560px){
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel input[type="time"]{
height:calc(1.2em + 22px)!important;
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel input[type="time"]::-webkit-datetime-edit{
display:block!important;
min-width:0!important;
width:auto!important;
height:revert!important;
min-height:revert!important;
padding:0!important;
margin:0!important;
text-align:center!important;
align-items:revert!important;
justify-content:revert!important;
line-height:revert!important;
box-sizing:revert!important;
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel input[type="time"]::-webkit-datetime-edit-fields-wrapper{
display:revert!important;
width:revert!important;
height:revert!important;
min-height:revert!important;
padding:0!important;
margin:0!important;
align-items:revert!important;
justify-content:revert!important;
line-height:revert!important;
box-sizing:revert!important;
}
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel input[type="time"]::-webkit-datetime-edit-hour-field,
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel input[type="time"]::-webkit-datetime-edit-minute-field,
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel input[type="time"]::-webkit-datetime-edit-text{
display:revert!important;
align-items:revert!important;
justify-content:revert!important;
height:revert!important;
padding:revert!important;
margin:revert!important;
line-height:revert!important;
text-align:revert!important;
}
}
/* Zwischenbreiten: auch die berechneten Textmetriken entsprechen der Wochentag-Vorlage. */
@media (min-width:561px) and (max-width:760px){
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel input[type="time"]{
min-height:auto!important;
line-height:normal!important;
}
}
@media (min-width:821px){
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .day-time-panel input[type="time"]{
min-height:48px!important;
}
}
/* V313 Feinabgleich: Material/Typografie folgen an den jeweiligen Breakpoints exakt dem Wochentag. */
@media (max-width:560px){
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .date-head{
background:#111827!important;
background-image:none!important;
}
}
@media (max-width:760px){
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .date-head > .dim-date{
font-size:inherit!important;
line-height:normal!important;
}
}
@media (min-width:821px){
body.create-page .home-premium-creator #dateArea #dates > .date-dimension > .date-head{
box-shadow:none!important;
}
}
/* v8.59 — Startseite: Wochentage und Daten nutzen dieselbe responsive Kachelanzahl.
Nur Layout/Oberfläche: 5 → 4 → 3 → 2 → 1 Spalten mit kleiner werdendem Viewport. */
@media (min-width:1181px){
body.create-page .home-premium-creator #weekdays,
body.create-page .home-premium-creator #dates{
grid-template-columns:repeat(5,minmax(0,1fr))!important;
}
}
@media (min-width:981px) and (max-width:1180px){
body.create-page .home-premium-creator #weekdays,
body.create-page .home-premium-creator #dates{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
}
@media (min-width:761px) and (max-width:980px){
body.create-page .home-premium-creator #weekdays,
body.create-page .home-premium-creator #dates{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
}
@media (min-width:561px) and (max-width:760px){
body.create-page .home-premium-creator #weekdays,
body.create-page .home-premium-creator #dates{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
}
@media (max-width:560px){
body.create-page .home-premium-creator #weekdays,
body.create-page .home-premium-creator #dates{
grid-template-columns:1fr!important;
}
}
/* v8.60 — Startseite: responsive Kachelanzahl wirklich durchsetzen + Datum vertikal zentrieren.
Nur Oberfläche. Keine Formular-, Datums- oder Zeitlogik geändert. */
/* Die vorherigen 5→4→3→2→1 Regeln wurden von spezifischeren Altregeln überstimmt.
Mit den vollständigen Selektoren gilt dieselbe Staffelung nun tatsächlich für beide Modi. */
@media (min-width:1181px){
body.create-page .home-premium-creator #createForm #weekdays.weekday-toggle-picker,
body.create-page .home-premium-creator #createForm #dateArea #dates{
grid-template-columns:repeat(5,minmax(0,1fr))!important;
}
}
@media (min-width:981px) and (max-width:1180px){
body.create-page .home-premium-creator #createForm #weekdays.weekday-toggle-picker,
body.create-page .home-premium-creator #createForm #dateArea #dates{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
}
@media (min-width:761px) and (max-width:980px){
body.create-page .home-premium-creator #createForm #weekdays.weekday-toggle-picker,
body.create-page .home-premium-creator #createForm #dateArea #dates{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
}
@media (min-width:561px) and (max-width:760px){
body.create-page .home-premium-creator #createForm #weekdays.weekday-toggle-picker,
body.create-page .home-premium-creator #createForm #dateArea #dates{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
}
@media (max-width:560px){
body.create-page .home-premium-creator #createForm #weekdays.weekday-toggle-picker,
body.create-page .home-premium-creator #createForm #dateArea #dates{
grid-template-columns:minmax(0,1fr)!important;
}
}
/* Datum im dunklen Kopf horizontal UND vertikal mittig halten.
Der unsichtbare native Kalender-Klickbereich und das × bleiben unverändert nutzbar. */
body.create-page .home-premium-creator #createForm #dateArea #dates > .date-dimension > .date-head > .dim-date{
padding-top:0!important;
padding-bottom:0!important;
line-height:normal!important;
}
body.create-page .home-premium-creator #createForm #dateArea #dates > .date-dimension > .date-head > .dim-date::-webkit-date-and-time-value,
body.create-page .home-premium-creator #createForm #dateArea #dates > .date-dimension > .date-head > .dim-date::-webkit-datetime-edit,
body.create-page .home-premium-creator #createForm #dateArea #dates > .date-dimension > .date-head > .dim-date::-webkit-datetime-edit-fields-wrapper{
height:100%!important;
min-height:100%!important;
margin:0!important;
padding:0!important;
box-sizing:border-box!important;
text-align:center!important;
}
body.create-page .home-premium-creator #createForm #dateArea #dates > .date-dimension > .date-head > .dim-date::-webkit-date-and-time-value,
body.create-page .home-premium-creator #createForm #dateArea #dates > .date-dimension > .date-head > .dim-date::-webkit-datetime-edit,
body.create-page .home-premium-creator #createForm #dateArea #dates > .date-dimension > .date-head > .dim-date::-webkit-datetime-edit-fields-wrapper{
display:flex!important;
align-items:center!important;
justify-content:center!important;
}
/* v8.61 — Daten, 5er-Ansicht: Uhrzeiten vollständig sichtbar halten.
Nur Oberfläche. Die Daten-/Zeitlogik und die Kachelgrößen bleiben unverändert.
Bei fünf Spalten übernimmt das native Time-Control dieselbe knappe Innenluft
wie die Wochentagsfelder; WebKit/Chromium darf die Minuten nicht abschneiden. */
@media (min-width:1181px){
body.create-page .home-premium-creator #createForm #dateArea #dates > .date-dimension > .day-time-panel input[type="time"]{
padding-left:8px!important;
padding-right:8px!important;
overflow:visible!important;
}
body.create-page .home-premium-creator #createForm #dateArea #dates > .date-dimension > .day-time-panel input[type="time"]::-webkit-datetime-edit,
body.create-page .home-premium-creator #createForm #dateArea #dates > .date-dimension > .day-time-panel input[type="time"]::-webkit-datetime-edit-fields-wrapper{
display:block!important;
width:auto!important;
min-width:0!important;
max-width:100%!important;
padding:0!important;
margin:0!important;
overflow:visible!important;
text-align:center!important;
box-sizing:border-box!important;
}
body.create-page .home-premium-creator #createForm #dateArea #dates > .date-dimension > .day-time-panel input[type="time"]::-webkit-calendar-picker-indicator{
display:none!important;
-webkit-appearance:none!important;
width:0!important;
min-width:0!important;
margin:0!important;
padding:0!important;
}
}
/* v8.62 — Startseite: Zeitfelder in allen Kachelbreiten so kompakt wie auf dem kleinsten Bildschirm.
Nur Oberfläche. Höhe und Uhrzeit-Typografie werden für Wochentage und Daten vereinheitlicht;
Grid, Kachelgrößen, Datums-/Zeitlogik und Interaktionen bleiben unverändert. */
@media (min-width:561px){
body.create-page .home-premium-creator #createForm #weekdays.weekday-toggle-picker > .weekday-dimension > .day-time-panel input[type="time"],
body.create-page .home-premium-creator #createForm #dateArea #dates > .date-dimension > .day-time-panel input[type="time"]{
height:calc(1.2em + 22px)!important;
min-height:calc(1.2em + 22px)!important;
max-height:calc(1.2em + 22px)!important;
padding-top:9px!important;
padding-bottom:9px!important;
font-size:16px!important;
line-height:1.2!important;
box-sizing:border-box!important;
}
}
/* v8.65 — Startseite: schwarze Titelzeile bleibt beim horizontalen Skalieren
vertikal an derselben Position innerhalb des Erstellbereichs.
Kachelhöhe/-typografie bleiben wie in v563; nur der Platz oberhalb des
Kachelrasters wird über die responsiven Breiten stabilisiert. */
@media (max-width:760px){
body.create-page .home-premium-creator #weekdayArea > .choice-help,
body.create-page .home-premium-creator #dateArea > .choice-help{
min-height:34px!important;
box-sizing:border-box!important;
}
}
@media (max-width:560px){
body.create-page .home-premium-creator #weekdayArea > .choice-help,
body.create-page .home-premium-creator #dateArea > .choice-help{
margin-bottom:14px!important;
}
}
/* v8.66 — Admin > Wochentage: „Löschen“ darf das Zeitfenster beim Hover nicht
optisch verschieben oder vergrößern. Nur die Hover-Darstellung des Löschbuttons
wird stabilisiert; Größe, Inhalt und Löschlogik bleiben unverändert. */
@media (hover:hover) and (pointer:fine){
#adminWeekdaysSection .admin-weekday-row > button.danger,
#adminWeekdaysSection .admin-weekday-row > button.danger:hover,
#adminWeekdaysSection .admin-weekday-row > button.danger:active,
#adminWeekdaysSection .admin-weekday-row > button.danger:focus-visible{
transform:none!important;
box-shadow:none!important;
filter:none!important;
}
#adminWeekdaysSection .admin-weekday-row > button.danger{
transition:background-color .14s ease,color .14s ease!important;
}
}
/* V306 / 2026-09-08 — Drag-Abwahl: sichtbare Zeitbox behält bis mouseup exakt
die Geometrie eines aktiven Tages. JS lässt das Panel mit deferPanel bewusst
sichtbar; diese Regeln verhindern, dass beim vorläufigen Entfernen von .active
ältere/inaktive Layoutregeln die Zeitfelder vergrößern oder verschieben. */
body.create-page .home-premium-creator #weekdays.weekday-painting.weekday-toggle-picker
> .weekday-dimension:not(.active) > .day-time-panel:not([hidden]){
display:grid!important;
width:100%!important;
inline-size:100%!important;
min-width:0!important;
min-inline-size:0!important;
max-width:100%!important;
max-inline-size:100%!important;
box-sizing:border-box!important;
grid-template-areas:
"caption caption caption"
"start dash end"!important;
}
body.create-page .home-premium-creator #weekdays.weekday-painting.weekday-toggle-picker
> .weekday-dimension:not(.active) > .day-time-panel:not([hidden]) .time-caption{
grid-area:caption!important;
}
body.create-page .home-premium-creator #weekdays.weekday-painting.weekday-toggle-picker
> .weekday-dimension:not(.active) > .day-time-panel:not([hidden]) .dim-start{
grid-area:start!important;
}
body.create-page .home-premium-creator #weekdays.weekday-painting.weekday-toggle-picker
> .weekday-dimension:not(.active) > .day-time-panel:not([hidden]) .time-dash{
grid-area:dash!important;
align-self:center!important;
justify-self:center!important;
}
body.create-page .home-premium-creator #weekdays.weekday-painting.weekday-toggle-picker
> .weekday-dimension:not(.active) > .day-time-panel:not([hidden]) .dim-end{
grid-area:end!important;
}
body.create-page .home-premium-creator #weekdays.weekday-painting.weekday-toggle-picker
> .weekday-dimension:not(.active) > .day-time-panel:not([hidden]) .dim-start,
body.create-page .home-premium-creator #weekdays.weekday-painting.weekday-toggle-picker
> .weekday-dimension:not(.active) > .day-time-panel:not([hidden]) .dim-end,
body.create-page .home-premium-creator #weekdays.weekday-painting.weekday-toggle-picker
> .weekday-dimension:not(.active) > .day-time-panel:not([hidden]) input[type="time"]{
min-width:0!important;
min-inline-size:0!important;
max-width:100%!important;
max-inline-size:100%!important;
width:100%!important;
inline-size:100%!important;
box-sizing:border-box!important;
}
@media (min-width:1001px){
body.create-page .home-premium-creator #weekdays.weekday-painting.weekday-toggle-picker
> .weekday-dimension:not(.active) > .day-time-panel:not([hidden]){
grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr)!important;
column-gap:8px!important;
row-gap:8px!important;
padding:12px!important;
margin-top:10px!important;
}
}
@media (min-width:561px) and (max-width:1000px){
body.create-page .home-premium-creator #weekdays.weekday-painting.weekday-toggle-picker
> .weekday-dimension:not(.active) > .day-time-panel:not([hidden]){
grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr)!important;
column-gap:5px!important;
row-gap:8px!important;
padding:9px!important;
margin-top:10px!important;
overflow:hidden!important;
}
}
/* V307 / v572 — grosse Bildschirme: maximal 4 Kacheln pro Reihe.
Responsive Staffelung der Startseite: 4 → 3 → 2 → 1.
Gilt identisch fuer Wochentage und Daten; nur Layout, keine Interaktionslogik. */
@media (min-width:981px){
body.create-page .home-premium-creator #createForm #weekdays.weekday-toggle-picker,
body.create-page .home-premium-creator #createForm #dateArea #dates{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
}
@media (min-width:761px) and (max-width:980px){
body.create-page .home-premium-creator #createForm #weekdays.weekday-toggle-picker,
body.create-page .home-premium-creator #createForm #dateArea #dates{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
}
@media (min-width:561px) and (max-width:760px){
body.create-page .home-premium-creator #createForm #weekdays.weekday-toggle-picker,
body.create-page .home-premium-creator #createForm #dateArea #dates{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
}
@media (max-width:560px){
body.create-page .home-premium-creator #createForm #weekdays.weekday-toggle-picker,
body.create-page .home-premium-creator #createForm #dateArea #dates{
grid-template-columns:minmax(0,1fr)!important;
}
}
/* V573 / 2026-09-08 — Hero-Geräte auf schmaleren Bildschirmen proportional skalieren.
Normale Desktop-Breite bleibt unverändert. In Zwischen-/Mobile-Breiten werden
Rahmen dünner und der Demo-Bereich bekommt unten genügend Luft, damit Laptop
und Smartphone nicht vom overflow:hidden des Hero abgeschnitten werden. */
@media (min-width:761px) and (max-width:1040px){
.create-page .home-premium-hero .hero-device-demo{
min-height:360px;
}
.create-page .home-premium-hero .hero-laptop-screen{
border-width:6px;
border-bottom-width:9px;
border-radius:15px 15px 9px 9px;
}
.create-page .home-premium-hero .hero-laptop-screen::before{
width:40px;
height:7px;
}
.create-page .home-premium-hero .hero-phone{
border-width:3px;
border-radius:22px;
}
.create-page .home-premium-hero .hero-phone-screen{
inset:2px;
border-radius:18px;
}
.create-page .home-premium-hero .hero-phone-speaker{
top:5px;
height:9px;
}
}
@media (max-width:760px){
.create-page .home-premium-hero .hero-device-demo{
min-height:clamp(330px,72vw,430px);
margin-bottom:10px;
}
.create-page .home-premium-hero .hero-laptop-screen{
border-width:6px;
border-bottom-width:9px;
border-radius:14px 14px 8px 8px;
}
.create-page .home-premium-hero .hero-laptop-screen::before{
width:36px;
height:6px;
}
.create-page .home-premium-hero .hero-phone{
border-width:3px;
border-radius:20px;
}
.create-page .home-premium-hero .hero-phone-screen{
inset:2px;
border-radius:16px;
}
}
@media (max-width:430px){
.create-page .home-premium-hero .hero-device-demo{
min-height:290px;
margin-bottom:8px;
}
}
/* V275 — Hero-Demo: Poster bleibt beim Start über dem