/* ==========================================================================
   Court Booking – Design-System
   Platzgrün · Kreideweiß · Tennisball-Gelb · Sandplatz
   Schriften lokal gehostet (keine Verbindung zu Drittanbietern → DSGVO-freundlich)
   ========================================================================== */

@font-face {
  font-family: "Barlow Condensed";
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/barlow-condensed-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
}

:root {
  /* Farben */
  --court-900: #0f2a21;
  --court-800: #14372b;
  --court-700: #1b4a39;
  --court-600: #236049;
  --court-500: #2d7a5c;
  --court-100: #e1efe8;
  --court-50:  #f0f7f3;

  --chalk:   #f7f9f5;
  --bg:      #edf1ec;
  --surface: #ffffff;
  --hair:    #d8dfd7;
  --hair-2:  #e8ede7;

  --ink:     #14231c;
  --ink-2:   #3d4c44;
  --muted:   #66746c;

  --ball:      #d8e83b;
  --ball-deep: #bfd021;
  --clay:      #b4532a;
  --clay-100:  #f7e4da;
  --clay-700:  #8a3d1c;

  --ok:   #1f7a4d;  --ok-bg:   #e3f3ea;
  --err:  #b3362f;  --err-bg:  #fbe8e6;
  --warn: #8a6100;  --warn-bg: #fdf2d3;
  --info: #25609e;  --info-bg: #e5eff9;

  /* Kategorien (Serientermine) */
  --cat-normal: #2f6fb5;
  --cat-abo: #6b4fa3;
  --cat-training: #2f8f5b;
  --cat-spiel: #b27a08;
  --cat-turnier: #cf5a22;
  --cat-veranstaltung: #b83a74;
  --cat-gesperrt: #a82f2a;

  /* Typografie */
  --font-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Form */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --shadow-1: 0 1px 2px rgba(15, 42, 33, .08);
  --shadow-2: 0 10px 30px -10px rgba(15, 42, 33, .35);
  --nav-h: 60px;
  --plan-nav-h: 60px;   /* Höhe der fixierten Datums-/Wochenleiste */
  --tab-h: 62px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
img, svg { max-width: 100%; }
a { color: var(--court-600); text-underline-offset: 3px; }
a:hover { color: var(--court-800); }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .005em;
  margin: 0 0 .5rem;
  color: var(--court-900);
}
h1 { font-size: clamp(2rem, 5vw, 2.9rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1rem; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.xs { font-size: .78rem; }
.num { font-family: var(--font-display); font-weight: 600; letter-spacing: .01em; }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
:focus-visible { outline: 3px solid var(--ball-deep); outline-offset: 2px; border-radius: 4px; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 1rem; }
.wrap-narrow { max-width: 760px; }
.stack > * + * { margin-top: 1rem; }
.row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.row-between { justify-content: space-between; }
.grow { flex: 1; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2.25rem; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .55rem 1.1rem;
  font: 600 .95rem/1.1 var(--font-body);
  border: 1.5px solid transparent; border-radius: var(--r-md);
  background: var(--court-700); color: #fff;
  cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s, transform .08s;
}
.btn:hover { background: var(--court-800); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn-ball { background: var(--ball); color: var(--court-900); }
.btn-ball:hover { background: var(--ball-deep); color: var(--court-900); }
.btn-ghost { background: transparent; color: var(--court-700); border-color: var(--hair); }
.btn-ghost:hover { background: var(--court-50); color: var(--court-800); border-color: var(--court-500); }
/* Ghost-Button für dunkle Flächen (Kopfleiste, Hero, Auswahl-Leiste): Text bleibt auch bei Hover/Fokus hell */
.btn-ghost-light, .btn-ghost-light:visited { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn-ghost-light:hover, .btn-ghost-light:focus-visible { background: rgba(255,255,255,.14); color: #fff; border-color: var(--ball); }
.btn-ghost-light:active { background: rgba(255,255,255,.22); color: #fff; }
.btn-danger { background: var(--err); }
.btn-danger:hover { background: #8f2923; }
.btn-danger-ghost { background: transparent; color: var(--err); border-color: #e7bcb8; }
.btn-danger-ghost:hover { background: var(--err-bg); color: var(--err); border-color: var(--err); }
.btn-sm { min-height: 36px; padding: .35rem .8rem; font-size: .85rem; border-radius: 8px; }
.btn-lg { min-height: 52px; padding: .75rem 1.5rem; font-size: 1.05rem; }
.btn-block { display: flex; width: 100%; }
.btn-icon { width: 44px; padding: 0; }
.btn-sm.btn-icon { width: 36px; }

/* ---------- Formulare ---------- */
.field { margin-bottom: 1.1rem; }
.field > label, .label {
  display: block; margin-bottom: .35rem;
  font-weight: 600; font-size: .9rem; color: var(--ink-2);
}
.input, .select, .textarea {
  width: 100%; min-height: 46px; padding: .6rem .85rem;
  font: 400 1rem var(--font-body); color: var(--ink);
  background: #fff; border: 1.5px solid var(--hair); border-radius: var(--r-md);
  transition: border-color .15s, box-shadow .15s;
}
.textarea { min-height: 96px; resize: vertical; }
.input:hover, .select:hover, .textarea:hover { border-color: #b9c4bb; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--court-500);
  box-shadow: 0 0 0 4px rgba(45, 122, 92, .18);
}
.input.is-invalid { border-color: var(--err); }
.hint { margin-top: .3rem; font-size: .82rem; color: var(--muted); }
.field-error { margin-top: .3rem; font-size: .85rem; color: var(--err); font-weight: 500; }
.input-group { position: relative; }
.input-group .input { padding-right: 3rem; }
.input-group .toggle-pw {
  position: absolute; right: 4px; top: 4px; bottom: 4px; width: 40px;
  border: 0; background: transparent; color: var(--muted); cursor: pointer; border-radius: 8px;
}
.input-group .toggle-pw:hover { background: var(--court-50); color: var(--court-700); }
.grid-2 { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.check { display: flex; gap: .65rem; align-items: flex-start; font-size: .92rem; cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--court-600); flex: none; }
.choice-set { display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .choice-set.two { grid-template-columns: 1fr 1fr; } }
.choice {
  display: flex; gap: .75rem; align-items: flex-start; padding: .85rem 1rem;
  border: 1.5px solid var(--hair); border-radius: var(--r-md); background: #fff; cursor: pointer;
}
.choice:has(input:checked) { border-color: var(--court-500); background: var(--court-50); box-shadow: 0 0 0 3px rgba(45,122,92,.12); }
.choice input { margin-top: 3px; accent-color: var(--court-600); width: 18px; height: 18px; }
.choice b { display: block; }
.choice span { font-size: .85rem; color: var(--muted); }
.pw-meter { height: 5px; background: var(--hair-2); border-radius: 4px; overflow: hidden; margin-top: .5rem; }
.pw-meter > i { display: block; height: 100%; width: 0; background: var(--err); transition: width .2s, background .2s; }

/* ---------- Meldungen ---------- */
.alert {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .85rem 1rem; margin-bottom: 1rem;
  border-radius: var(--r-md); border: 1px solid transparent; border-left-width: 5px;
  font-size: .95rem; transition: opacity .3s, transform .3s;
}
.alert > i { margin-top: .2rem; }
.alert-ok { background: var(--ok-bg); color: #145637; border-color: #b7dfc9; border-left-color: var(--ok); }
.alert-err { background: var(--err-bg); color: #7d221c; border-color: #efc4c0; border-left-color: var(--err); }
.alert-warn { background: var(--warn-bg); color: #5f4300; border-color: #efdc9d; border-left-color: #d0990c; }
.alert-info { background: var(--info-bg); color: #1b4a78; border-color: #bcd5ee; border-left-color: var(--info); }

/* ---------- Panels ---------- */
.panel {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
.panel-pad { padding: 1.25rem; }
@media (min-width: 720px) { .panel-pad { padding: 1.75rem; } }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--hair-2);
}
.panel-head h2, .panel-head h3 { margin: 0; }
.panel-body { padding: 1.25rem; }
.divider { height: 1px; background: var(--hair-2); margin: 1.25rem 0; border: 0; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .18rem .6rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; line-height: 1.4;
  background: var(--court-100); color: var(--court-700);
}
.badge-admin { background: #ece4f8; color: #52368f; }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-err { background: var(--err-bg); color: var(--err); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-muted { background: var(--hair-2); color: var(--muted); }
.badge-clay { background: var(--clay-100); color: var(--clay-700); }

/* ==========================================================================
   Navigation
   ========================================================================== */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: var(--court-800);
  color: #fff;
  border-bottom: 3px solid var(--ball);
}
.topbar .wrap { display: flex; align-items: center; gap: 1rem; min-height: var(--nav-h); }
.brand { display: flex; align-items: center; gap: .65rem; color: #fff; text-decoration: none; margin-right: auto; min-width: 0; }
.brand:hover { color: #fff; }
.brand svg { flex: none; }
.brand-name { font: 700 1.5rem/1 var(--font-display); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-sub { display: block; font: 500 .72rem/1 var(--font-body); color: #a9c4b8; margin-top: 3px; }
.nav { display: none; align-items: center; gap: .15rem; }
.nav a {
  display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .85rem;
  color: #d3e4db; text-decoration: none; font-weight: 600; font-size: .94rem; border-radius: 8px;
}
.nav a:hover { background: rgba(255,255,255,.09); color: #fff; }
.nav a[aria-current="page"] { background: rgba(216,232,59,.16); color: var(--ball); }
@media (min-width: 900px) { .nav { display: flex; } }

.usermenu { position: relative; }
.usermenu > button {
  display: flex; align-items: center; gap: .55rem; padding: .3rem .55rem .3rem .3rem;
  background: rgba(255,255,255,.08); color: #fff; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 .9rem var(--font-body);
}
.usermenu > button:hover { background: rgba(255,255,255,.15); }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--ball); color: var(--court-900);
  display: inline-flex; align-items: center; justify-content: center; font: 700 1.05rem var(--font-display);
}
.usermenu .uname { display: none; }
@media (min-width: 640px) { .usermenu .uname { display: inline; } }
.menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px;
  background: #fff; color: var(--ink); border-radius: var(--r-md); box-shadow: var(--shadow-2);
  border: 1px solid var(--hair); padding: .4rem; display: none;
}
.menu.open { display: block; }
.menu a, .menu button {
  display: flex; align-items: center; gap: .65rem; width: 100%; padding: .6rem .75rem;
  color: var(--ink); background: none; border: 0; border-radius: 8px; text-align: left;
  text-decoration: none; font: 500 .94rem var(--font-body); cursor: pointer;
}
.menu a:hover, .menu button:hover { background: var(--court-50); }
.menu i { width: 1.1rem; text-align: center; color: var(--court-500); }
.menu .sep { height: 1px; background: var(--hair-2); margin: .35rem 0; }
.menu .danger, .menu .danger i { color: var(--err); }

.auth-links { display: flex; gap: .5rem; }
/* Mobil/Tablet: „Anmelden“ steckt schon in der unteren Tab-Leiste (bis 899px) */
@media (max-width: 899px) { .auth-links .auth-login { display: none; } }

/* untere Tab-Leiste (mobil) */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: flex; height: calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: #fff; border-top: 1px solid var(--hair);
  box-shadow: 0 -6px 20px -12px rgba(15,42,33,.4);
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--muted); text-decoration: none; font-size: .72rem; font-weight: 600; position: relative;
}
.tabbar a i { font-size: 1.15rem; }
.tabbar a[aria-current="page"] { color: var(--court-700); }
.tabbar a[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px;
  background: var(--ball-deep); border-radius: 0 0 3px 3px;
}
body.has-tabbar { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); }
@media (min-width: 900px) {
  .tabbar { display: none; }
  body.has-tabbar { padding-bottom: 0; }
}

/* ==========================================================================
   Seitenkopf, Footer
   ========================================================================== */
.page-head { padding: 1.75rem 0 1.25rem; }
.page-head .row-between { align-items: flex-end; }
.page-head h1 { margin-bottom: .25rem; }
.page-head p { margin: 0; color: var(--muted); }
.crumb { font-size: .85rem; margin-bottom: .5rem; }
.crumb a { text-decoration: none; font-weight: 600; }

.footer { background: var(--court-900); color: #b7cdc2; margin-top: 3rem; }
.footer .wrap { padding-top: 2.5rem; padding-bottom: 2rem; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.footer h4 { color: #fff; font-size: 1.15rem; margin-bottom: .75rem; }
.footer a { color: #b7cdc2; text-decoration: none; }
.footer a:hover { color: var(--ball); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .45rem; }
.footer li i { width: 1.2rem; color: var(--ball); }
.footer-bottom {
  margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.1);
  font-size: .82rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
}
@media (max-width: 899px) { .footer { margin-bottom: 0; } }

/* ==========================================================================
   Wochen-/Tagesplan
   ========================================================================== */
.plan-bar {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between;
  padding: .85rem 1rem; margin-bottom: 1rem;
}
.seg { display: inline-flex; background: var(--hair-2); border-radius: var(--r-md); padding: 3px; }
.seg a, .seg button {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 38px; padding: .3rem .95rem; border: 0; background: transparent; border-radius: 8px;
  font: 600 .9rem var(--font-body); color: var(--ink-2); text-decoration: none; cursor: pointer;
}
.seg a[aria-current="true"], .seg a.on, .seg button.on { background: #fff; color: var(--court-800); box-shadow: var(--shadow-1); }
.seg a:hover { color: var(--court-800); }
.weeknav { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.weeknav .date-pick {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .75rem;
  background: #fff; border: 1.5px solid var(--hair); border-radius: var(--r-md);
}
.plan-nav {
  position: sticky; top: calc(var(--nav-h) + 3px); z-index: 6;
  height: var(--plan-nav-h); margin-bottom: 0;
  display: flex; align-items: center;
  background: var(--bg);
}
.plan-nav .weeknav { flex-wrap: nowrap; width: 100%; }
.plan-nav .weeknav .date-pick { flex: 1 1 auto; min-width: 0; }
.plan-nav .weeknav .date-pick input { min-width: 0; flex: 1 1 auto; }
.plan-nav .weeknav .btn { flex: none; }
@media (min-width: 720px) {
  .plan-nav .weeknav { width: auto; }
  .plan-nav .weeknav .date-pick { flex: none; }
}
.plan-quota { margin-bottom: .5rem; }
.weeknav .date-pick input { border: 0; background: transparent; font: 600 .95rem var(--font-body); color: var(--ink); outline: none; }
.week-title { font: 700 1.9rem/1 var(--font-display); color: var(--court-900); }
.week-title small { display: block; font: 500 .9rem/1.4 var(--font-body); color: var(--muted); margin-top: 4px; }
.quota {
  display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .75rem;
  background: var(--court-50); border: 1px solid var(--court-100); border-radius: 999px;
  font-size: .85rem; color: var(--court-700); font-weight: 600;
}
.quota i { color: var(--court-500); }

.court-chips { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.court-chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; padding: 0 .95rem;
  background: #fff; border: 1.5px solid var(--hair); border-radius: 999px; color: var(--ink-2);
  font: 600 .9rem var(--font-body); text-decoration: none;
}
.chip:hover { border-color: var(--court-500); color: var(--court-800); }
.chip.on { background: var(--court-800); border-color: var(--court-800); color: #fff; }

.court-card { margin-bottom: 1.25rem; overflow: hidden; }
.court-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
  padding: .9rem 1.1rem; background: var(--court-800); color: #fff;
  background-image:
    linear-gradient(90deg, transparent 0 calc(100% - 2px), rgba(247,249,245,.5) calc(100% - 2px)),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(247,249,245,.05) 79px 80px);
}
.court-card-head h3 { margin: 0; color: #fff; font-size: 1.6rem; }
.court-meta { display: flex; gap: .4rem; flex-wrap: wrap; }
.court-meta span {
  font-size: .78rem; font-weight: 600; padding: .2rem .65rem; border-radius: 999px;
  background: rgba(255,255,255,.12); color: #dbece3;
}
.sched-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sched {
  width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed;
  min-width: 640px;
}
.sched th { font-weight: 600; padding: .35rem 0; }
.sched .th-time, .sched .td-time { position: sticky; left: 0; z-index: 3; width: 74px; background: var(--surface); }
.sched .td-time {
  text-align: left; padding: 0 .4rem 0 .5rem; font-family: var(--font-display);
  font-weight: 600; font-size: 1.15rem; color: var(--court-800); line-height: 1.05;
}
.sched .td-time small { display: block; font: 500 .7rem var(--font-body); color: var(--muted); }
.th-day { text-align: center; border-radius: 8px; }
.th-day .dn { display: block; font: 600 .78rem var(--font-body); color: var(--muted); }
.th-day .dd { display: block; font: 700 1.5rem/1.1 var(--font-display); color: var(--court-900); }
.th-day.today { background: var(--ball); }
.th-day.today .dn, .th-day.today .dd { color: var(--court-900); }
.sched td { padding: 0; height: 52px; vertical-align: stretch; }
.sched td.is-today-col { background: linear-gradient(var(--court-50), var(--court-50)); border-radius: 8px; }

.slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: 100%; height: 100%; min-height: 48px; padding: 2px 3px; border-radius: 8px;
  font: 600 .78rem/1.15 var(--font-body); text-align: center; border: 1.5px solid transparent;
  overflow: hidden; text-decoration: none;
}
.slot i { font-size: .8rem; }
.slot .sub { font-weight: 500; font-size: .68rem; opacity: .85; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-free {
  background: #fff; border-color: var(--court-100); color: var(--court-600); cursor: pointer;
  background-image: linear-gradient(var(--court-50), var(--court-50));
  transition: background .12s, border-color .12s, transform .08s;
  font-family: inherit;
}
.slot-free:hover { border-color: var(--court-500); background-image: linear-gradient(var(--court-100), var(--court-100)); color: var(--court-800); }
.slot-free:active { transform: scale(.97); }
.slot-free .lbl { display: none; }
@media (min-width: 720px) { .slot-free .lbl { display: inline; } }
.slot-free.is-selected, .slot-free.is-selected:hover {
  background: var(--ball); background-image: none; border-color: var(--ball-deep); color: var(--court-900);
  box-shadow: inset 0 0 0 2px var(--court-900);
}
.slot-free.is-selected .lbl { display: inline; }
.slot-busy { background: #e5e9e4; color: #6a776f; border-color: #dce1db; cursor: default; }
.slot-own { background: var(--clay); color: #fff; border-color: var(--clay-700); }
.slot-past { background: transparent; color: #b4beb7; border: 1.5px dashed #e6ebe5; }
.slot-past i { display: none; }
/* Vergangene Buchung (nur für Admins sichtbar): gedämpft, nicht klickbar */
.slot-hist { opacity: .55; filter: saturate(.6); }
.slot-far { background: transparent; color: #b4beb7; border: 1.5px dashed #dfe5de; }
.slot-series {
  --c: var(--cat-normal);
  color: #fff; border-color: transparent;
  background: repeating-linear-gradient(135deg, var(--c) 0 9px, color-mix(in srgb, var(--c) 82%, #000) 9px 18px);
}
.slot-series .sub { opacity: .95; }
.cat-normal { --c: var(--cat-normal); } .cat-abo { --c: var(--cat-abo); } .cat-training { --c: var(--cat-training); }
.cat-spiel { --c: var(--cat-spiel); } .cat-turnier { --c: var(--cat-turnier); }
.cat-veranstaltung { --c: var(--cat-veranstaltung); } .cat-gesperrt { --c: var(--cat-gesperrt); }

/* Tagesansicht */
/* Tagesansicht: Platz-Köpfe bleiben beim Scrollen unter der Kopfleiste stehen.
   Dafür darf kein Elternelement ein Scroll-Container sein (overflow: hidden/auto),
   daher overflow: clip und kein horizontales Scrollen – 4 Plätze passen auch aufs Handy. */
.court-card.day-card { overflow: hidden; overflow: clip; }
.day-card .sched-scroll { overflow: visible; }
.day-grid { min-width: 0; border-spacing: 0; }
.day-grid td { padding: 2px; height: 56px; }
.day-grid thead th {
  position: sticky; top: calc(var(--nav-h) + 3px + var(--plan-nav-h)); z-index: 4;
  background: var(--surface); padding: .5rem .15rem .45rem;
  border-radius: 0; border-bottom: 1px solid var(--hair);
  box-shadow: 0 8px 10px -9px rgba(15,42,33,.35);
}
.day-grid thead th.th-time { left: 0; z-index: 5; }
.day-grid .th-date { display: block; text-align: left; padding-left: .5rem; font: 600 .72rem/1.15 var(--font-body); color: var(--muted); }
.day-grid .th-date b { display: block; font: 700 1.05rem/1.1 var(--font-display); color: var(--court-800); }
.day-grid th.court-col { padding: .5rem .15rem .45rem; }
.court-col .cn { display: block; font: 700 1.4rem/1.1 var(--font-display); color: var(--court-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.court-col .cs { display: block; font: 500 .74rem var(--font-body); color: var(--muted); }
@media (max-width: 559px) {
  .day-grid .td-time, .day-grid .th-time { width: 52px; }
  .day-grid .td-time { font-size: 1.05rem; padding: 0 .2rem 0 .4rem; }
  .court-col .cn { font-size: 1.02rem; letter-spacing: -.005em; }
  .court-col .cs { font-size: .68rem; }
  .day-grid td { padding: 2px; }
}
.day-nav-title { font: 700 1.9rem/1 var(--font-display); }
.now-row td.td-time { color: var(--clay); }
.now-row td { position: relative; }

/* Legende */
.legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding: .9rem 1.1rem; font-size: .86rem; }
.legend-item { display: inline-flex; align-items: center; gap: .5rem; }
.legend-swatch { width: 26px; height: 20px; border-radius: 5px; flex: none; border: 1.5px solid transparent; }

/* Auswahl-Leiste: zeigt die gewählten Termine (zusammengefasst), Details aufklappbar */
.pickbar {
  position: fixed; left: 0; right: 0; z-index: 54; bottom: 0;
  display: none; padding: 0 0 calc(.7rem + env(safe-area-inset-bottom));
  background: var(--court-900); color: #fff; border-top: 3px solid var(--ball);
  box-shadow: 0 -12px 30px -14px rgba(0,0,0,.5);
}
body.has-tabbar .pickbar { bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); padding-bottom: .7rem; }
@media (min-width: 900px) { body.has-tabbar .pickbar { bottom: 0; padding-bottom: calc(.7rem + env(safe-area-inset-bottom)); } }
.pickbar.show { display: block; animation: rise .22s ease-out; }
/* Platz am Seitenende, damit die letzten Zeilen nicht verdeckt werden */
body.has-tabbar.has-pick { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 84px); }
@media (min-width: 900px) { body.has-tabbar.has-pick { padding-bottom: calc(84px + env(safe-area-inset-bottom)); } }

.pick-main { display: flex; align-items: center; gap: .75rem; justify-content: space-between; padding-top: .7rem; }
.pickbar .btn { white-space: nowrap; }
.pickbar .actions { flex: none; display: flex; gap: .5rem; }
.pick-summary {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem; text-align: left;
  background: none; border: 0; color: inherit; font: inherit; padding: .1rem 0; cursor: pointer; border-radius: 8px;
}
.pick-summary:focus-visible { outline: 2px solid var(--ball); outline-offset: 3px; }
.pick-text { min-width: 0; display: block; }
.pick-l1 { display: block; font: 700 1.3rem/1.1 var(--font-display); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-l2 { display: block; font: 500 .8rem/1.3 var(--font-body); color: #a9c4b8; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-chev { flex: none; font-size: .8rem; color: var(--ball); transition: transform .2s; }
.pickbar.is-open .pick-chev { transform: rotate(180deg); }

.pick-panel { border-bottom: 1px solid rgba(255,255,255,.12); max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; }
.pick-panel[hidden] { display: none; }
.pick-panel-head { display: flex; justify-content: space-between; align-items: baseline; padding: .8rem 0 .4rem; font-size: .8rem; color: #a9c4b8; }
.pick-panel-head b { font: 700 .78rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ball); }
.pick-list { list-style: none; margin: 0; padding: 0 0 .7rem; display: grid; gap: .45rem; }
.pick-item { display: flex; align-items: stretch; background: rgba(255,255,255,.07); border-radius: 10px; overflow: hidden; }
.pick-go { flex: 1; min-width: 0; text-align: left; background: none; border: 0; color: #fff; font: inherit; padding: .6rem .8rem; cursor: pointer; }
.pick-go:hover, .pick-go:focus-visible { background: rgba(255,255,255,.07); outline: none; }
.pi-court { display: block; font: 700 1.15rem/1.15 var(--font-display); }
.pi-meta { display: block; font-size: .8rem; color: #a9c4b8; margin-top: 1px; }
.pick-del { flex: none; width: 48px; border: 0; border-left: 1px solid rgba(255,255,255,.1); background: none; color: #f0b3a8; font-size: 1rem; cursor: pointer; }
.pick-del:hover, .pick-del:focus-visible { background: rgba(179,54,47,.35); color: #fff; outline: none; }
@media (min-width: 900px) { .pick-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }

/* kurzes Aufleuchten beim Anspringen aus der Auswahl-Leiste */
.slot-free.pulse { animation: pulse 1.3s ease-out; }
@keyframes pulse { 0%, 60% { box-shadow: inset 0 0 0 2px var(--court-900), 0 0 0 4px var(--clay); } 100% { box-shadow: inset 0 0 0 2px var(--court-900), 0 0 0 0 transparent; } }
@keyframes rise { from { transform: translateY(100%); } to { transform: none; } }

/* Modal / Sheet */
.modal-back {
  position: fixed; inset: 0; z-index: 100; display: none; align-items: flex-end; justify-content: center;
  background: rgba(10, 28, 21, .6); padding: 0; backdrop-filter: blur(2px);
}
.modal-back.open { display: flex; animation: fade .18s ease-out; }
.modal {
  width: 100%; max-width: 640px; max-height: 92vh; overflow-y: auto;
  background: #fff; border-radius: 20px 20px 0 0; padding: 1.4rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
  animation: sheet .24s ease-out;
}
@media (min-width: 720px) {
  .modal-back { align-items: center; padding: 1.5rem; }
  .modal { border-radius: 20px; padding: 1.75rem; }
}
.modal h2 { margin-bottom: 1rem; }
.modal-actions {
  display: flex; gap: .6rem; margin-top: 1.25rem;
  position: sticky; bottom: calc(-1.25rem - env(safe-area-inset-bottom)); padding: .75rem 0 calc(1.25rem + env(safe-area-inset-bottom));
  margin-bottom: calc(-1.25rem - env(safe-area-inset-bottom));
  background: linear-gradient(rgba(255,255,255,0), #fff 22%);
}
@media (min-width: 720px) { .modal-actions { bottom: -1.75rem; margin-bottom: -1.75rem; padding-bottom: 1.75rem; } }
#bookForm { display: contents; }
.modal-actions .btn { flex: 1; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

.counter-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--hair-2); }
.counter-row:last-of-type { border-bottom: 0; }
.counter-row b { display: block; }
.counter-row span { font-size: .82rem; color: var(--muted); }
.counter { display: inline-flex; align-items: center; gap: .5rem; }
.counter button {
  width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--hair); background: #fff;
  color: var(--court-700); font-size: 1rem; cursor: pointer;
}
.counter button:hover:not(:disabled) { border-color: var(--court-500); background: var(--court-50); }
.counter button:disabled { opacity: .35; cursor: not-allowed; }
.counter output { min-width: 2ch; text-align: center; font: 700 1.6rem var(--font-display); }
.summary-row { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; border: 1px solid var(--hair); border-radius: var(--r-md); margin-bottom: .6rem; }
.summary-row .sr-court { font: 700 1.25rem/1.1 var(--font-display); color: var(--court-800); }
.summary-row .sr-meta { font-size: .85rem; color: var(--muted); }
.summary-row .sr-price { font: 700 1.35rem/1.1 var(--font-display); text-align: right; }
.total-row {
  display: flex; justify-content: space-between; align-items: baseline; padding: 1rem 1.1rem;
  background: var(--court-800); color: #fff; border-radius: var(--r-md); margin-top: .75rem;
}
.total-row b { font: 700 2rem/1 var(--font-display); color: var(--ball); }

.toast-host { position: fixed; z-index: 200; top: 14px; right: 14px; left: 14px; display: flex; flex-direction: column; gap: .5rem; align-items: flex-end; pointer-events: none; }
.toast {
  pointer-events: auto; max-width: 420px; padding: .8rem 1rem; border-radius: var(--r-md);
  background: var(--court-900); color: #fff; box-shadow: var(--shadow-2); font-size: .92rem; font-weight: 500;
  display: flex; gap: .6rem; align-items: center; animation: rise .2s ease-out;
}
.toast.err { background: var(--err); }
.toast.ok i { color: var(--ball); }

/* ==========================================================================
   Listen & Tabellen
   ========================================================================== */
.booking-list { display: grid; gap: .75rem; }
.bk {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1rem 1.1rem; align-items: center;
  background: #fff; border: 1px solid var(--hair); border-radius: var(--r-lg);
}
.bk-date {
  width: 64px; text-align: center; padding: .4rem 0; border-radius: 12px; background: var(--court-800); color: #fff;
}
.bk-date .d { font: 700 2rem/1 var(--font-display); display: block; }
.bk-date .m { font: 600 .75rem var(--font-body); color: #a9c4b8; display: block; }
.bk.is-past .bk-date { background: #8d9a93; }
.bk.is-today .bk-date { background: var(--ball); color: var(--court-900); }
.bk.is-today .bk-date .m { color: var(--court-700); }
.bk-main h3 { margin: 0 0 .1rem; font-size: 1.35rem; }
.bk-main .when { font-weight: 600; }
.bk-extra { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; padding-top: .75rem; border-top: 1px dashed var(--hair); }
.bk-extra .tags { display: flex; gap: .4rem; flex-wrap: wrap; }
@media (min-width: 720px) {
  .bk { grid-template-columns: auto 1fr auto; }
  .bk-extra { grid-column: auto; border: 0; padding: 0; justify-content: flex-end; flex-direction: column; align-items: flex-end; }
}

.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tbl th {
  text-align: left; padding: .7rem .9rem; font: 600 .8rem var(--font-body); color: var(--muted);
  background: var(--court-50); border-bottom: 1px solid var(--hair); white-space: nowrap;
}
.tbl td { padding: .75rem .9rem; border-bottom: 1px solid var(--hair-2); vertical-align: middle; }
.tbl tr:hover td { background: #fafcf9; }
.tbl tr.row-muted td { color: var(--muted); }
.tbl .actions { white-space: nowrap; text-align: right; }

.filters { display: grid; gap: .75rem; grid-template-columns: 1fr; padding: 1rem 1.1rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .filters { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .filters { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: end; } }
.filters .field { margin: 0; }

.pager { display: flex; gap: .3rem; justify-content: center; flex-wrap: wrap; padding: 1rem; }
.pager a, .pager span {
  min-width: 40px; height: 40px; padding: 0 .6rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--hair); background: #fff; text-decoration: none; font-weight: 600; color: var(--ink-2);
}
.pager a:hover { border-color: var(--court-500); }
.pager .on { background: var(--court-800); border-color: var(--court-800); color: #fff; }

/* Kennzahlen */
.stats { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { padding: 1.1rem 1.2rem; background: #fff; border: 1px solid var(--hair); border-radius: var(--r-lg); }
.stat .v { font: 700 2.6rem/1 var(--font-display); color: var(--court-800); }
.stat .l { font-size: .85rem; color: var(--muted); margin-top: .3rem; }
.stat.hl { background: var(--court-800); border-color: var(--court-800); }
.stat.hl .v { color: var(--ball); } .stat.hl .l { color: #a9c4b8; }

.barlist { display: grid; gap: .55rem; }
.barline { display: grid; grid-template-columns: 110px 1fr auto; gap: .75rem; align-items: center; font-size: .9rem; }
.barline .track { height: 12px; background: var(--hair-2); border-radius: 6px; overflow: hidden; }
.barline .fill { height: 100%; background: var(--court-500); border-radius: 6px; }
.barline .fill.alt { background: var(--clay); }

/* Admin */
.admin-tabs {
  display: flex; gap: .3rem; overflow-x: auto; padding: .35rem; margin-bottom: 1.25rem;
  background: #fff; border: 1px solid var(--hair); border-radius: var(--r-md); scrollbar-width: none;
}
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tabs a {
  flex: none; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .95rem; border-radius: 8px;
  color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .9rem;
}
.admin-tabs a:hover { background: var(--court-50); }
.admin-tabs a[aria-current="page"] { background: var(--court-800); color: #fff; }
.tile-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.tile {
  display: flex; gap: .9rem; align-items: center; padding: 1rem 1.1rem; background: #fff; text-decoration: none;
  border: 1px solid var(--hair); border-radius: var(--r-lg); color: var(--ink);
  transition: border-color .15s, transform .1s;
}
.tile:hover { border-color: var(--court-500); color: var(--ink); transform: translateY(-1px); }
.tile .ic { width: 46px; height: 46px; border-radius: 12px; background: var(--court-100); color: var(--court-700); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex: none; }
.tile b { display: block; font: 700 1.2rem/1.1 var(--font-display); }
.tile span { font-size: .82rem; color: var(--muted); }

.cat-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--cat-normal)); margin-right: .4rem; }
.cat-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; color: #fff; background: var(--c, var(--cat-normal)); }
.weekday-picks { display: flex; gap: .4rem; flex-wrap: wrap; }
.weekday-picks label { cursor: pointer; }
.weekday-picks input { position: absolute; opacity: 0; pointer-events: none; }
.weekday-picks span {
  display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: 50%;
  border: 1.5px solid var(--hair); font-weight: 700; background: #fff;
}
.weekday-picks input:checked + span { background: var(--court-700); color: #fff; border-color: var(--court-700); }
.weekday-picks input:focus-visible + span { outline: 3px solid var(--ball-deep); outline-offset: 2px; }

/* ==========================================================================
   Auth-Seiten
   ========================================================================== */
.auth { display: grid; min-height: calc(100vh - var(--nav-h)); grid-template-columns: 1fr; }
.auth-side { display: none; position: relative; overflow: hidden; background: var(--court-800); color: #fff; padding: 3rem; }
.auth-side h2 { color: #fff; font-size: 2.6rem; max-width: 12ch; }
.auth-side p { color: #d3e4db; max-width: 34ch; font-size: 1.05rem; }
.auth-side > * { position: relative; z-index: 1; }
.auth-side .court-art { position: absolute; z-index: 0; right: -6%; bottom: -5%; height: 66%; width: auto; max-width: none; opacity: .16; pointer-events: none; }
.auth-side::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: 48%; background: linear-gradient(var(--court-800) 55%, rgba(20, 55, 43, 0)); pointer-events: none; }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 2rem 1rem 3rem; }
.auth-box { width: 100%; max-width: 460px; }
.auth-box.wide { max-width: 640px; }
.auth-box h1 { font-size: 2.4rem; }
@media (min-width: 960px) {
  .auth { grid-template-columns: minmax(340px, 5fr) 7fr; }
  .auth-side { display: flex; flex-direction: column; justify-content: flex-start; }
}
.status-icon {
  width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem; margin: 0 auto 1.25rem;
}
.status-icon.ok { background: var(--ok-bg); color: var(--ok); }
.status-icon.err { background: var(--err-bg); color: var(--err); }
.status-icon.info { background: var(--info-bg); color: var(--info); }

/* Über uns / Rechtstexte */
.hero {
  position: relative; overflow: hidden; background: var(--court-800); color: #fff; padding: 3rem 0 3.5rem;
}
.hero h1 { color: #fff; font-size: clamp(2.6rem, 7vw, 4.6rem); max-width: 14ch; }
.hero p { color: #c3d8cd; font-size: 1.1rem; max-width: 48ch; }
.hero .court-art { position: absolute; z-index: 0; right: -60px; top: 50%; transform: translateY(-50%); width: min(70%, 760px); opacity: .16; pointer-events: none; }
.hero .wrap { position: relative; z-index: 1; }
.feature-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
.feature { padding: 1.4rem; background: #fff; border: 1px solid var(--hair); border-radius: var(--r-lg); }
.feature .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--ball); color: var(--court-900); display: flex; align-items: center; justify-content: center; margin-bottom: .9rem; font-size: 1.1rem; }
.court-tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.court-tile { padding: 1.25rem; background: #fff; border: 1px solid var(--hair); border-radius: var(--r-lg); border-top: 5px solid var(--clay); }
.court-tile h3 { margin-bottom: .2rem; }
.price-line { display: flex; justify-content: space-between; padding: .35rem 0; border-bottom: 1px dashed var(--hair); font-size: .92rem; }
.price-line:last-child { border: 0; }
.prose { max-width: 72ch; }
.prose h2 { margin-top: 2rem; font-size: 1.7rem; }
.prose h3 { margin-top: 1.25rem; font-size: 1.25rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .3rem; }

/* Ladeanzeige */
.spin { display: inline-block; width: 18px; height: 18px; border: 3px solid rgba(255,255,255,.35); border-top-color: currentColor; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media print {
  .topbar, .tabbar, .footer, .pickbar, .btn { display: none !important; }
  body { background: #fff; }
}

/* sehr schmale Handys (≈320 px) */
@media (max-width: 359px) {
  .court-col .cn { font-size: .9rem; }
  .pickbar .btn-ball i { display: none; }
  .pickbar .btn { padding-left: .8rem; padding-right: .8rem; }
  .pick-main { gap: .5rem; }
  .pick-l1 { font-size: 1.1rem; }
}

/* Wochenplan: je Stunde alle Plätze untereinander, Tageskopf bleibt beim Scrollen stehen
   (nutzt die Sticky-Regeln von .day-grid / .day-card, daher kein horizontales Scrollen) */
.week-grid { table-layout: fixed; }
.week-grid td { padding: 1px 2px; height: auto; }
.week-grid .th-time { width: 118px; }
.week-grid .th-day { padding: .4rem 0 .35rem; }
.week-grid .th-day .dd { font-size: 1.15rem; }
.week-grid thead th.today { background: var(--ball); }
.week-grid .wk-time { width: 54px; vertical-align: top; padding: .5rem .2rem 0 .5rem; border-top: 1px solid var(--hair); }
.week-grid .wk-to { display: none; }
.week-grid .wk-court {
  width: 64px; text-align: left; padding: 0 .3rem 0 .25rem; font: 600 .72rem/1.1 var(--font-body);
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.week-grid tr.hour-start > th, .week-grid tr.hour-start > td { border-top: 1px solid var(--hair); }
.week-grid tr.half-start > th, .week-grid tr.half-start > td { border-top-style: dotted; }
.week-grid td.is-today-col { border-radius: 0; }
.week-grid .slot { min-height: 34px; flex-direction: row; gap: .3rem; padding: 2px; border-radius: 6px; font-size: .74rem; }
.week-grid .slot i { font-size: .72rem; }
.week-grid .slot-past i { display: none; }
@media (max-width: 719px) {
  .week-grid .th-time { width: 100px; }
  .week-grid .wk-time { width: 46px; padding-left: .3rem; padding-right: .1rem; font-size: .88rem; line-height: 1.1; white-space: nowrap; overflow: hidden; }
  .week-grid .wk-time small { display: none; }
  /* Uhrzeit in zwei Zeilen: Beginn oben, Ende („–10:30“) darunter, damit nichts in die Platz-Spalte läuft */
  .week-grid .wk-time .wk-to { display: block; font-size: .72rem; font-weight: 500; opacity: .75; margin-top: .1rem; }
  .week-grid .wk-court { width: 54px; font-size: .64rem; }
  .week-grid .slot span { display: none; }
  .week-grid .slot { min-height: 32px; }
  .week-grid .th-day .dn { font-size: .66rem; }
  .week-grid .th-day .dd { font-size: .8rem; letter-spacing: -.02em; }
}

/* Wochenplan – Darstellung „Spalten“ (week_layout = columns): nur der Kopf ist anders –
   Tage nebeneinander, darunter je Platz eine Unterspalte. Felder und Farben wie im klassischen Plan. */
.wk2-grid { table-layout: fixed; }
.wk2-grid td { padding: 1px; height: 34px; }
.wk2-grid thead th { padding: .3rem 0 .2rem; }
/* Kopf als ein Block fixieren (zwei Zeilen) – so entsteht keine Lücke, durch die Felder durchscheinen */
.wk2-grid thead { position: sticky; top: calc(var(--nav-h) + 3px + var(--plan-nav-h)); z-index: 4; background: var(--surface); box-shadow: 0 8px 10px -9px rgba(15,42,33,.35); }
.wk2-grid thead th { position: static; background: var(--surface); box-shadow: none; border-bottom: 0; }
.wk2-grid .wk2-h2 th { padding: .1rem 0 .25rem; font: 700 .85rem/1.1 var(--font-display); color: var(--court-800); text-align: center; border-bottom: 1px solid var(--hair); }
.wk2-grid .th-time { width: 52px; }
.wk2-grid .th-day { border-radius: 0; }
.wk2-grid .th-day .dd { font-size: 1.15rem; }
.wk2-grid .th-day .d-short { display: none; }
@media (max-width: 1199px) { .wk2-grid .th-day .d-long { display: none; } .wk2-grid .th-day .d-short { display: inline; } }
.wk2-grid thead th.today { background: var(--ball); }
.wk2-grid thead .wk2-h2 th.today { background: #eef4a8; }
.wk2-grid .wk2-time { width: 52px; text-align: left; padding: 0 .2rem 0 .4rem; font-size: 1rem; border-top: 1px solid var(--hair); }
.wk2-grid tr.wk2-half .wk2-time { border-top-style: dotted; }
.wk2-grid td.day-first, .wk2-grid th.day-first { border-left: 2px solid var(--hair); }
.wk2-grid tr.hour-start > td { border-top: 1px solid var(--hair); }
.wk2-grid tr.wk2-half > td { border-top: 1px dotted var(--hair); }
.wk2-grid td.is-today-col { border-radius: 0; }
.wk2-grid .slot { min-height: 30px; flex-direction: row; gap: .25rem; padding: 1px; border-radius: 5px; font-size: .7rem; }
.wk2-grid .slot span { display: none; }
.wk2-grid .slot i { font-size: .7rem; }
.wk2-headwrap { display: none; }
.wk2-grid .wk2-c0 { width: 52px; }
@media (max-width: 899px) {
  /* Handy: Die Seite scrollt normal (senkrecht). Seitlich wischbar ist nur der Plan-Körper (.wk2-scroll).
     Weil ein seitlich scrollender Container den Kopf nicht per CSS am oberen Rand halten kann, ist der Kopf
     eine eigene Leiste (.wk2-headwrap), die an der Seite haftet; app.js führt sie beim seitlichen Wischen mit. */
  .court-card.wk2-card { overflow: visible; }
  .wk2-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .wk2-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .wk2-grid { min-width: 980px; }
  .wk2-scroll .wk2-grid thead { display: none; }
  .wk2-headwrap {
    display: block; overflow: hidden;
    position: sticky; top: calc(var(--nav-h) + 3px + var(--plan-nav-h)); z-index: 5;
    background: var(--surface); box-shadow: 0 8px 10px -9px rgba(15,42,33,.35);
  }
  .wk2-grid thead { position: static; box-shadow: none; }
  .wk2-headgrid thead th { position: static; top: auto; }
  .wk2-headgrid thead th.th-time { position: sticky; top: auto; left: 0; z-index: 6; }
  .wk2-grid .wk2-time { position: sticky; left: 0; z-index: 3; background: var(--surface); }
}

/* Dauer anpassen (Auswahl-Leiste) */
.pick-dur[hidden] { display: none; }
.pick-dur { border-bottom: 1px solid rgba(255,255,255,.12); }
.pick-dur-in { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-top: .55rem; padding-bottom: .55rem; }
.dur-label { font: 600 .82rem var(--font-body); color: #a9c4b8; letter-spacing: .04em; text-transform: uppercase; }
.dur-label small { display: block; text-transform: none; letter-spacing: 0; font-weight: 500; color: #f0b3a8; }
.dur-label small:empty { display: none; }
.stepper { display: inline-flex; align-items: center; gap: .25rem; background: rgba(255,255,255,.08); border-radius: 12px; padding: 3px; }
.stepper output { min-width: 5.2rem; text-align: center; font: 700 1.05rem var(--font-display); letter-spacing: .01em; }
.stepper button {
  width: 44px; height: 40px; border: 0; border-radius: 9px; cursor: pointer; font-size: .95rem;
  background: var(--ball); color: var(--court-900);
}
.stepper button:hover:not(:disabled) { background: var(--ball-deep); }
.stepper button:disabled { background: rgba(255,255,255,.1); color: rgba(255,255,255,.35); cursor: default; }
.stepper button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pick-step { flex: none; display: flex; align-items: center; gap: 4px; padding: 0 .4rem; }
.pick-step button {
  width: 36px; height: 36px; border: 0; border-radius: 8px; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; font-size: .8rem;
}
.pick-step button[data-ext] { background: var(--ball); color: var(--court-900); }
.pick-step button:disabled { background: rgba(255,255,255,.06); color: rgba(255,255,255,.3); cursor: default; }
body.has-tabbar.has-pick.has-dur { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 142px); }
@media (min-width: 900px) { body.has-tabbar.has-pick.has-dur { padding-bottom: calc(142px + env(safe-area-inset-bottom)); } }

/* Dauer-Zeile: immer sichtbar, nennt den betroffenen Termin */
.dur-label { flex: 1; min-width: 0; text-transform: none; letter-spacing: 0; }
.dur-label b { display: block; font: 700 1.05rem/1.15 var(--font-display); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dur-label small { display: block; margin-top: 1px; font: 500 .76rem/1.2 var(--font-body); color: #a9c4b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dur-label small.warn, .pick-dur.cant .dur-label small { color: #f0b3a8; }
.stepper { flex: none; }

/* "+" gesperrt: bleibt antippbar, damit der Hinweis hervorgehoben werden kann */
.stepper button.is-blocked { background: rgba(255,255,255,.1); color: rgba(255,255,255,.4); cursor: pointer; }
.pick-dur.cant .dur-label small { color: #ffb4a5; font-weight: 600; white-space: normal; line-height: 1.25; }
.pick-dur.nudge .dur-label small { animation: nudge .5s ease-in-out; }
@keyframes nudge { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-5px); } 40%,80% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .pick-dur.nudge .dur-label small { animation: none; background: rgba(255,180,165,.25); } }

.pi-meta.warn { color: #ffb4a5; font-weight: 600; white-space: normal; }

/* ==========================================================================
   Eigenes Logo (Kopfzeile, Fußzeile, Editor in den Einstellungen)
   ========================================================================== */
.brand-logo { flex: none; display: block; object-fit: cover; }
.logo-round { border-radius: 50%; }
.logo-soft { border-radius: 22%; }
.logo-square { border-radius: 0; }

.logo-current { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.logo-current-mark {
  flex: none; width: 88px; height: 88px; display: grid; place-items: center;
  background: var(--court-800); border-radius: 14px; border-bottom: 3px solid var(--ball);
}
.logo-current-text { flex: 1 1 220px; min-width: 0; display: grid; gap: .2rem; }
.logo-current-actions { flex: 1 1 100%; }
@media (min-width: 720px) { .logo-current-actions { flex: 0 0 auto; } }

.logo-editor[hidden], #logoMsg[hidden] { display: none !important; }
#logoMsg { margin-top: 1rem; }
.logo-editor-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .logo-editor-grid { grid-template-columns: minmax(0, 360px) 1fr; } }
.logo-stage {
  width: 100%; max-width: 360px; aspect-ratio: 1; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--hair);
  background-color: #fff;
  background-image: linear-gradient(45deg, #e4e9e3 25%, transparent 25%, transparent 75%, #e4e9e3 75%),
                    linear-gradient(45deg, #e4e9e3 25%, transparent 25%, transparent 75%, #e4e9e3 75%);
  background-size: 20px 20px; background-position: 0 0, 10px 10px;
}
.logo-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.logo-stage canvas.grabbing { cursor: grabbing; }
.logo-stage canvas:focus-visible { outline: 3px solid var(--ball-deep); outline-offset: -3px; }

.seg { display: inline-flex; border: 1px solid var(--hair); border-radius: 10px; overflow: hidden; background: var(--surface); }
.seg label { cursor: pointer; margin: 0; position: relative; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: .5rem .9rem; font-weight: 600; font-size: .9rem; color: var(--ink-2); border-right: 1px solid var(--hair); }
.seg label:last-child span { border-right: 0; }
.seg input:checked + span { background: var(--court-700); color: #fff; }
.seg input:focus-visible + span { outline: 3px solid var(--ball-deep); outline-offset: -3px; }

.logo-prevbar {
  display: flex; align-items: center; gap: .65rem; padding: .6rem .9rem; color: #fff;
  background: var(--court-800); border-bottom: 3px solid var(--ball); border-radius: 10px;
}

/* ---------- Bildergalerie (Über uns) ---------- */
.gallery-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.gallery-item {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--r-md); border: 1px solid var(--hair); background: var(--court-100);
}
.gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem .7rem .55rem;
  color: #fff; font-size: .85rem; line-height: 1.25;
  background: linear-gradient(rgba(10, 28, 21, 0), rgba(10, 28, 21, .8));
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Lightbox */
html.lb-open { overflow: hidden; }
.lb {
  position: fixed; inset: 0; z-index: 150; display: flex; align-items: center; justify-content: center;
  background: rgba(8, 20, 15, .94); padding: calc(3.5rem + env(safe-area-inset-top)) 0 calc(1rem + env(safe-area-inset-bottom));
  animation: fade .18s ease-out;
}
.lb[hidden] { display: none; }
.lb-top {
  position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between;
  padding: calc(.5rem + env(safe-area-inset-top)) .75rem .5rem 1rem; color: #c3d8cd; font-size: .9rem;
}
.lb-fig { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 100%; min-width: 0; padding: 0 .75rem; }
.lb-img {
  display: block; max-width: 100%; max-height: calc(100vh - 11rem); max-height: calc(100dvh - 11rem);
  object-fit: contain; border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); transition: opacity .2s;
}
.lb.is-loading .lb-img { opacity: .25; }
.lb-cap { margin-top: .75rem; max-width: 70ch; color: #e6efe9; text-align: center; font-size: .95rem; line-height: 1.4; }
.lb-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.1rem; cursor: pointer; flex: none;
}
.lb-btn:hover { background: rgba(255, 255, 255, .24); }
.lb-btn[hidden] { display: none; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lb-prev { left: .5rem; }
.lb-next { right: .5rem; }
@media (min-width: 900px) { .lb-prev { left: 1.5rem; } .lb-next { right: 1.5rem; } .lb-btn { width: 52px; height: 52px; } }

/* Galerie-Verwaltung */
.gal-drop {
  display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 1.75rem 1rem; text-align: center; cursor: pointer;
  border: 2px dashed #b9c4bb; border-radius: var(--r-lg); background: var(--court-50); transition: border-color .15s, background .15s;
}
.gal-drop:hover, .gal-drop.drag { border-color: var(--court-500); background: var(--court-100); }
.gal-drop.is-busy { opacity: .6; pointer-events: none; }
.gal-drop > i { font-size: 1.8rem; color: var(--court-500); }
.gal-drop:has(+ #galFiles:focus-visible) { outline: 3px solid var(--ball-deep); outline-offset: 2px; }
.gal-progress { height: 8px; margin-top: 1rem; background: var(--hair-2); border-radius: 99px; overflow: hidden; }
.gal-progress > span { display: block; height: 100%; width: 0; background: var(--court-500); transition: width .25s; }
.gal-admin-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.gal-card { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--hair); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.gal-card.is-missing { border-color: #efc4c0; }
.gal-thumb { position: relative; aspect-ratio: 4 / 3; background: var(--court-100); }
.gal-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gal-no {
  position: absolute; top: .5rem; left: .5rem; min-width: 26px; height: 26px; padding: 0 .45rem; border-radius: 13px;
  display: flex; align-items: center; justify-content: center; background: rgba(15, 42, 33, .85); color: #fff; font-size: .8rem; font-weight: 700;
}
.gal-missing { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; color: var(--err); font-size: .85rem; }
.gal-body { position: relative; padding: .75rem; }
.gal-cap { display: flex; gap: .4rem; margin-bottom: .6rem; }
.input-sm { min-height: 38px; padding: .4rem .65rem; font-size: .9rem; }
.gal-tools { display: flex; align-items: center; }
.gal-del { position: absolute; right: .75rem; bottom: .75rem; margin: 0; }

/* Hover-Hinweis für Plan-Felder (Platz, Uhrzeit, Status, Preis) */
.slot-tip {
  position: fixed; z-index: 90; max-width: 280px; padding: .5rem .7rem; border-radius: 10px; pointer-events: none;
  background: var(--court-900); color: #fff; box-shadow: var(--shadow-2); font: 500 .82rem/1.35 var(--font-body);
}
.slot-tip[hidden] { display: none; }
.slot-tip .st-head { font: 700 1.05rem/1.15 var(--font-display); letter-spacing: .01em; color: var(--ball); margin-bottom: .1rem; }
.slot-tip .st-line:nth-child(2) { font-weight: 600; }