/* Mobile-first interaction refinements layered over the desktop week. */
:root { --ease: cubic-bezier(.2,.8,.2,1); }
button { min-height: 44px; transition: background .18s, transform .18s, box-shadow .18s; }
button:active { transform: scale(.97); }
.ground-card { transition: border-color .2s, box-shadow .2s, transform .2s; }
.pitch { box-shadow: inset 0 0 18px #08130d40; }
.quarter { transition: background .2s, box-shadow .2s; }
.quarter.selected { box-shadow: inset 0 0 0 2px #efffa8; }
.day-pick { border: 0; background: none; padding: 0; width: 100%; font-weight: 500; }
.day-head { padding: 8px; }
.day-head.active-day { box-shadow: inset 0 -3px var(--primary); }
dialog[open] { animation: sheet-in .24s var(--ease); }
@keyframes sheet-in { from { opacity:0; transform:translateY(25px) } to { opacity:1; transform:translateY(0) } }
@keyframes feedback { from { transform:translateX(-3px) } to { transform:translateX(0) } }

@media(max-width:700px) {
  body { background: var(--bg-body); padding-bottom: 90px; }
  header { padding: 17px 16px; background: var(--header-mobile); color: var(--header-mobile-text); border: 0; height: 76px; }
  .brand { font-size: 21px; letter-spacing: -.5px; }
  .brand .badge { background: var(--primary); color: white; padding: 10px; font-size: 17px; }
  .brand small { display:block; color: var(--text-muted); font-size:8px; letter-spacing:1.7px; }
  .header-actions { gap: 6px; }
  .header-actions #logout, .header-actions #admin-open, .header-actions #install-app { font-size: 0; width: 44px; padding: 0; }
  .header-actions #logout:after { content:'↪'; font-size:18px; }
  .header-actions #admin-open:after { content:'👥'; font-size:16px; }
  .header-actions #install-app:after { content:'⬇'; font-size:18px; }
  .header-actions #new { display:none; }
  #theme-toggle { width:44px; padding:0; }
  main { padding:25px 16px 12px; }
  .intro { margin-bottom:22px; }
  .intro h1 { font-size:29px; letter-spacing:-1px; max-width:240px; }
  .intro p:not(.eyebrow) { font-size:13px; max-width:210px; line-height:1.5; }
  .eyebrow { font-size:10px; }
  .week-controls { display:flex; gap:8px; }
  .week-controls button { padding:7px 10px; min-width:44px; }
  .week-controls #today { font-size:12px; min-width:72px; }
  .grounds { gap:9px; margin-bottom:22px; }
  .ground-card,.ground-card.active { padding:11px 5px; gap:10px; border-radius:13px; flex-direction:column; text-align:center; }
  .ground-card.active { padding:10px 4px; box-shadow:0 4px 12px var(--shadow); }
  .ground-card .mini { width:100%; max-width:110px; height:64px; border-width:5px; }
  .ground-card h2 { font-size:16px; }
  .ground-card p { font-size:10px; line-height:1.5; }
  .schedule { border-radius:15px; box-shadow:0 5px 24px var(--shadow); }
  .calendar-heading { padding:17px 14px; display:grid; gap:12px; }
  .calendar-heading-main { gap:4px; }
  .calendar-heading h2 { font-size:16px; letter-spacing:-.3px; }
  .calendar-heading span { font-size:11px; }
  .calendar-tools { width:100%; }
  .calendar-week-controls { width:100%; justify-content:space-between; }
  .calendar-meta { gap:10px; font-size:11px; margin-top:6px; }
  .calendar-scroll { overflow:visible; }
  #calendar { min-width:0; grid-template-columns:38px repeat(7,minmax(0,1fr)); position:relative; }
  .day-head { padding:8px 0 10px; }
  .day-head:first-child { font-size:0; }
  .day-head strong { font-size:17px; margin-top:5px; }
  .day-pick { font-size:11px; min-height:50px; border-radius:10px; }
  .day-head.today strong { width:28px; line-height:28px; }
  .day-head.active-day { background:var(--primary-soft); box-shadow:inset 0 -3px var(--primary); }
  .day { display:none; }
  .day.active-day { display:block; grid-column:2 / 9; animation:sheet-in .2s var(--ease); }
  .times { grid-column:1; }
  .times span { font-size:10px; right:4px; }
  .slot { border-radius:8px; padding:7px; font-size:12px; border-left-width:4px; }
  .slot strong { font-size:13px; margin-bottom:3px; }
  .slot span { font-size:11px; }
  .mobile-nav { display:flex; position:fixed; bottom:0; left:0; right:0; z-index:10; padding:12px 20px max(12px,env(safe-area-inset-bottom)); gap:12px; background:var(--mobile-nav); backdrop-filter:blur(14px); border-top:1px solid var(--mobile-nav-border); box-shadow:0 -5px 25px var(--shadow); }
  .mobile-nav button { flex:1; height:48px; border-radius:13px; }
  .mobile-nav #mobile-week { border:0; background:var(--bg-subtle); }
  footer { font-size:11px; line-height:1.5; gap:8px; margin-top:14px; }
  footer button { padding:7px 12px; }
  dialog:not(.auth-dialog) { width:100%; max-width:100%; max-height:94dvh; margin:auto 0 0; border-radius:24px 24px 0 0; padding:25px 22px max(24px,env(safe-area-inset-bottom)); overflow-y:auto; box-shadow:0 -20px 70px #00000066; }
  dialog:not(.auth-dialog):before { content:''; display:block; height:4px; width:38px; background:var(--border-card); border-radius:4px; margin:-13px auto 20px; }
  .auth-dialog { width:calc(100% - 28px); max-width:420px; padding:24px; }
  .dialog-head { margin-bottom:20px; }
  .dialog-head h2 { font-size:24px; }
  .fields { gap:14px 12px; }
  .fields label { font-size:13px; }
  .fields input,.fields select { font-size:16px; min-height:46px; padding:9px; }
  .selectable { height:195px; border-radius:10px; }
  .presets button { min-height:44px; font-size:11px; }
  .form-actions { position:sticky; bottom:-24px; background:var(--bg-card); padding:12px 0 8px; margin-top:8px; }
  .form-actions { align-items: stretch; flex-wrap: wrap; }
  .delete-actions { width: 100%; margin-right: 0; }
  .delete-actions button { flex: 1 1 150px; }
  .form-actions > .primary { margin-left: auto; }
  .form-actions button { font-size:13px; }
  .hint { font-size:12px; }
  .area-head { margin-top:22px; }
  .quarter { min-height:44px; }
  #notice { font-size:13px; }
  #mobile-day-label { display:block; margin-top:7px; color:var(--text-muted); font-size:11px; }
}

@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

@media(max-width:700px) {
  .brand-logo { width: 48px; height: 48px; flex-basis: 48px; border-radius: 8px; }
  .recurrence-group { padding: 12px; }
  .recurrence-group > label:not(.check-row) { max-width: none; }
  .user-row { align-items: stretch; gap: 10px; flex-direction: column; }
  .user-row-side { align-items: flex-start; }
  .user-actions { justify-content: flex-start; }
  .admin-result { grid-template-columns: 1fr; }
  .admin-result code { overflow-wrap: anywhere; }
}

/* v4.2 */
@media(max-width:700px){
  .grounds{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ground-card:last-child{grid-column:auto;}
  .ground-info-card{margin-bottom:20px;}
  .ground-info-grid{grid-template-columns:1fr;}
  
  .header-actions{gap:7px;}
  #block-open{font-size:0;padding:8px;min-width:44px;}
  #block-open:after{content:'🔒';font-size:17px;}
}

@media(max-width:700px){.surface-view-wrap{margin:-8px 0 18px;display:grid;grid-template-columns:1fr;gap:7px;padding:10px 12px}.surface-view-wrap select{width:100%;min-width:0}.surface-view-wrap span{font-size:10px}.grounds{grid-template-columns:repeat(3,minmax(0,1fr))}.ground-card p{min-height:30px}}

/* v4.5.3 */
@media(max-width:700px){
  #site-notice-open{font-size:0;padding:8px;min-width:44px;}
  #site-notice-open:after{content:'📣';font-size:17px;}
  .site-notices-card{margin:-8px 0 20px;padding:13px;}
  .site-notice-row>div{display:block;}
  .site-notice-row span{display:block;margin-top:3px;}
}

@media(max-width:700px){
  .calendar-create-hint{font-size:11px;line-height:1.35}
  .site-notices-card{margin-bottom:16px;border-radius:14px}
  .site-notices-head{padding:14px 16px}
  .site-notice-item{padding:13px 15px;gap:9px}
}

/* v4.5.4: kompakter Mobile-Header */
.mobile-menu-trigger { display: none; }
@media(max-width:700px){
  header { gap: 10px; overflow: hidden; }
  .brand { min-width: 0; flex: 1 1 auto; gap: 10px; }
  .brand > span:last-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .header-actions { flex: 0 0 auto; margin-left: auto; gap: 7px; }
  .header-actions .session-user,
  .header-actions #admin-open,
  .header-actions #block-open,
  .header-actions #site-notice-open,
  .header-actions #requests-open,
  .header-actions #install-app,
  .header-actions #theme-toggle,
  .header-actions #logout,
  .header-actions #new { display: none !important; }
  .header-actions #notifications-open,
  .header-actions #mobile-menu-open { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; padding: 0; font-size: 18px; }
  .header-actions #mobile-menu-open { font-size: 22px; line-height: 1; }
  .mobile-menu-dialog { width: 100%; max-width: 100%; }
  .mobile-menu-head h2 { font-size: 18px; max-width: 250px; overflow-wrap: anywhere; }
  .mobile-menu-list { display: grid; gap: 9px; }
  .mobile-menu-list button { width: 100%; min-height: 50px; text-align: left; padding: 12px 14px; font-size: 15px; }
  .mobile-menu-list button.danger { color: var(--danger); }
}

@media(max-width:700px){
  .header-actions #my-bookings-open{display:none}
  .my-booking-row{align-items:flex-start;flex-direction:column}
  .wide-dialog{width:100%;max-width:100%}
  .audit-row{grid-template-columns:1fr}.audit-row strong,.audit-row p,.audit-row small{grid-column:1}
  .series-scope-wrap{padding:12px}
  .booking-status-actions button{flex:1 1 150px}
}

@media(max-width:700px){
  .admin-tabs{grid-template-columns:1fr;gap:7px}.admin-tabs button{text-align:left}
  .request-row{flex-direction:column}.request-actions{width:100%;justify-content:stretch}.request-actions button{flex:1}
  .section-head{flex-direction:column}.section-head>button{width:100%}
  #trainer-request-section .fields{grid-template-columns:1fr}
  .danger-zone #logout-all-users{width:100%}
}
@media(max-width:700px){.mobile-menu-list #mobile-requests-open{display:flex;align-items:center;gap:8px}.mobile-menu-list #mobile-requests-open .menu-badge{margin-left:auto}}

/* v4.8.1 */
@media(max-width:700px){
  .admin-tabs{grid-template-columns:repeat(var(--admin-tab-count,4),minmax(0,1fr));gap:6px}
  .admin-tabs button{min-width:0;padding:9px 5px;font-size:11px;line-height:1.2;text-align:center;justify-content:center}
  .user-list-head{align-items:stretch;flex-direction:column}
  .user-search-tools{grid-template-columns:1fr;min-width:0;width:100%}
  .user-list{max-height:58dvh}
  .user-row{padding:15px}
  .user-row-side{min-width:0;width:100%}
  .role-stack{justify-content:flex-start}
  .role-check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .place-management-actions{grid-template-columns:1fr}
}

/* v4.8.2 */
@media(max-width:700px){
  .admin-tabs button{font-size:10.5px;padding:9px 4px;white-space:normal}
}

@media(max-width:900px){.dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  .header-actions #damage-open{display:none!important}
  .dashboard{padding:14px;margin-bottom:20px}.dashboard-head h2{font-size:19px}.dashboard-grid{grid-template-columns:1fr 1fr;gap:8px}.dashboard-card{padding:11px;gap:8px}.dashboard-icon{font-size:18px}.dashboard-card strong{font-size:12px}.dashboard-value b{font-size:13px}.dashboard-value span{font-size:10.5px}.dashboard-head #dashboard-refresh{font-size:11px;padding:7px 9px;min-height:36px}
  .buffer-fields{grid-template-columns:1fr}.conflict-suggestion-list{display:grid}.conflict-suggestion-list button{width:100%;text-align:left}.request-detail-meta{align-items:flex-start;flex-direction:column}.request-comments article{grid-template-columns:1fr}.request-comments time,.request-comments p{grid-column:1}.block-actions{width:100%}.block-actions button{flex:1}
}

@media(max-width:700px){
  .time-entry{display:block}
  .time-quick{display:none}
  .place-damage-head{align-items:flex-start}
  .place-damage-list{max-height:none}
}

/* v4.9.3 */
@media(max-width:700px){
  .time-quick-panel{display:none}
  .time-field>input{font-size:16px;min-height:46px}
  .pitch.whole-only .whole-quarter{font-size:14px}
}

@media(max-width:700px){
  .exercise-filter-row{grid-template-columns:1fr 1fr}.exercise-filter-row input{grid-column:1/-1}
  .exercise-card{grid-template-columns:86px 1fr;padding:10px}.exercise-thumb{width:86px;height:76px}
  .exercise-card-head{display:block}.exercise-category{display:inline-block!important;margin-top:7px!important}
  .training-plan-item-fields{grid-template-columns:1fr}.plan-order-actions{flex-shrink:0}
  .game-profiles-grid,.sync-grid{grid-template-columns:1fr}.profile-fields{grid-template-columns:1fr 1fr}
  .block-row,.mapping-row{align-items:flex-start;flex-direction:column}.row-actions{width:100%}.row-actions button{flex:1}
  .exercise-card-actions{flex-wrap:wrap}.exercise-card-actions button{flex:1}
}

/* v1.0.8 */
@media (max-width: 720px){.exercise-filter-row-live{grid-template-columns:1fr 1fr}.exercise-filter-row-live input{grid-column:1/-1}}


/* v1.1.0: Mobile-Header – Markenname bleibt vollständig sichtbar. */
@media(max-width:520px){
  header { padding-left:10px; padding-right:10px; gap:8px; }
  .brand { flex:1 1 auto; min-width:0; gap:8px; font-size:19px; letter-spacing:-.35px; }
  .brand-logo-wrap { width:46px; height:46px; flex-basis:46px; }
  .club-logo { max-width:46px; max-height:46px; }
  .brand > span:last-child { min-width:max-content; overflow:visible; text-overflow:clip; white-space:nowrap; }
  .brand small { display:none; }
  .header-actions { gap:6px; }
  .header-actions #exercises-open { width:42px; min-width:42px; height:44px; padding:0; font-size:0; }
  .header-actions #exercises-open::before { content:'⚽'; font-size:19px; line-height:1; }
  .header-actions #notifications-open,
  .header-actions #mobile-menu-open { width:42px; min-width:42px; }
}
@media(max-width:350px){
  .brand { font-size:17px; gap:6px; }
  .brand-logo-wrap { width:42px; height:42px; flex-basis:42px; }
  .club-logo { max-width:42px; max-height:42px; }
  .header-actions #exercises-open,
  .header-actions #notifications-open,
  .header-actions #mobile-menu-open { width:40px; min-width:40px; }
}

/* v1.1.2: PDF + Übung auf kleinen Displays nebeneinander/sauber umbrechen. */
@media(max-width:640px){
  .section-head .section-actions{width:100%;display:grid;grid-template-columns:1fr 1fr;}
  .section-head .section-actions button{width:100%;min-width:0;}
}


/* v1.3.4: Desktop-Header bewusst reduzieren statt viele unterschiedlich breite Aktionen nebeneinander zu stapeln. */
@media(min-width:701px){
  .header-actions #my-bookings-open,
  .header-actions #admin-open,
  .header-actions #requests-open,
  .header-actions #damage-open,
  .header-actions #install-app,
  .header-actions #theme-toggle,
  .header-actions #logout { display:none !important; }
  .header-actions #notifications-open,
  .header-actions #mobile-menu-open {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    min-width:44px;
    height:44px;
    min-height:44px;
    padding:0;
    border-radius:10px;
  }
  .header-actions #mobile-menu-open { font-size:22px; line-height:1; }
  .header-actions #exercises-open,
  .header-actions #new { height:44px; min-height:44px; border-radius:10px; }
  .header-actions #exercises-open { padding:0 16px; }
  .header-actions #new { padding:0 18px; }
  .mobile-menu-dialog {
    width:min(420px,calc(100% - 32px));
    max-width:420px;
    max-height:80dvh;
    border-radius:18px;
    padding:24px;
  }
  .mobile-menu-list { display:grid; gap:8px; }
  .mobile-menu-list button {
    width:100%;
    min-height:48px;
    text-align:left;
    padding:11px 14px;
  }
  .mobile-menu-list button.danger { color:var(--danger); }
}

/* v1.4.0: Vereins-Setup mobil stapeln. */
@media(max-width:760px){
  .setup-grid{grid-template-columns:1fr}
  .rule-grid{grid-template-columns:1fr 1fr}
  #club-smtp-status{white-space:normal}
}
@media(max-width:420px){.rule-grid{grid-template-columns:1fr}}


/* v1.4.3: Admin-Tabs auf kleinen Displays als echte horizontale Tab-Leiste. */
@media(max-width:700px){
  .admin-tabs{
    display:flex;
    grid-template-columns:none;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    width:100%;
    padding:2px 1px 10px;
    margin:0 0 18px;
    scroll-snap-type:x proximity;
    scroll-padding-inline:1px;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .admin-tabs button{
    flex:0 0 112px;
    width:112px;
    min-width:112px;
    min-height:76px;
    padding:9px 7px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    text-align:center;
    white-space:normal;
    scroll-snap-align:start;
    line-height:1.15;
    font-size:11px;
  }
  .admin-tabs .admin-tab-icon{display:block;font-size:19px;line-height:1;}
  .admin-tabs .admin-tab-label{display:block;max-width:100%;overflow-wrap:anywhere;}
}

/* v1.4.3: Installieren bleibt als kompakter Icon-Button direkt im Header. */
.header-actions #install-app:not([hidden]){
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
  padding:0;
  border-radius:10px;
  font-size:18px;
  line-height:1;
}
@media(max-width:700px){
  .header-actions #install-app:not([hidden]){width:42px;min-width:42px;height:44px;}
}
@media(max-width:350px){
  .header-actions #install-app:not([hidden]){width:40px;min-width:40px;}
}