/* ============================================================
   TennisPilot — Öffentliche Website (Profi-Auftritt)
   Lädt NACH app-redesign.css und stylt nur die öffentlichen Seiten
   (Landing, Funktionen, Login, Rechtsseiten). Orientiert am Muster
   audit/CODEX_PUBLIC_WEBSITE_PRO_MUSTER.html. 2026-06-23.

   Farb-Logik:
   - Produkt-/Marken-Flächen (Hero, App-Fenster-Demo, Module, Status,
     Pyramide) nutzen FESTE semantische Farben (Blau-Haupt, Grün/Clay/Gold
     dosiert) -> professioneller, nicht eintöniger Look.
   - CTA-Buttons + Akzent-Elemente erben weiter var(--court) (die im
     Owner-Panel gewählte Plattform-Akzentfarbe). Setzt der Owner Blau,
     sind CTAs + Marke konsistent.
   ============================================================ */

body.page-landing,
body.page-auth,
body.page-legal {
  --pub-blue: #2367c9;
  --pub-blue-dark: #16407d;
  --pub-green: #2d8f63;
  --pub-clay: #c86b3d;
  --pub-gold: #d6a62f;
  --pub-soft: #f6f8fa;
  --pub-soft-2: #eaf0f6;
  --pub-ink: #16181d;
  --pub-muted: #68707d;
  --pub-line: #dfe4ea;
  background: var(--pub-soft);
}

/* ---------- main: volle Viewport-Breite auf den öffentlichen Seiten ----------
   app-redesign.css deckelt im Breit-Layout `[data-layout="wide"] main` auf
   min(1600px, ...) und zentriert. Die Landing-Seite erbt aber (über den
   Single-Tenant-Fallback) das „wide"-Layout des Vereins. Hero + Sektionen
   zentrieren ihren Inhalt über `calc((100vw - 1180px) / 2)`-Padding, also gegen
   die VOLLE Viewport-Breite — passt nur, wenn main auch voll breit ist. Sonst
   wird das 100vw-Padding in das 1600er-main gequetscht und der Inhalt schrumpft,
   je breiter der Bildschirm. Daher auf den öffentlichen Seiten den Cap aufheben
   (höhere Spezifität als `[data-layout="wide"] main`). Reine Public-Seiten ->
   App-/Admin-/Owner-Layout bleibt unberührt. */
body.page-landing main,
body.page-auth main,
body.page-legal main { width: auto; max-width: none; margin: 0; }

/* ---------- Öffentlicher Header ---------- */
body.page-landing .site-header,
body.page-auth .site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid rgba(22, 24, 29, .08);
  backdrop-filter: blur(14px);
}
/* Öffentliche Nav: ruhige graue Links, aktiver Eintrag NICHT schwarz gefüllt
   (sonst schwarzes Rechteck mit unlesbarem Text durch den --court-Default). */
body.page-landing .primary-nav a,
body.page-auth .primary-nav a { color: var(--pub-muted); background: transparent; font-weight: 700; }
body.page-landing .primary-nav a:hover,
body.page-auth .primary-nav a:hover { background: #eef2f7; color: var(--pub-ink); }
body.page-landing .primary-nav a.active,
body.page-auth .primary-nav a.active { background: transparent; color: var(--pub-ink); font-weight: 800; }

/* ---------- Layout-Container ---------- */
/* Public-Seiten (Landing, Funktionen) nutzen 1400px statt der App-1180px,
   damit die Inhaltsbreite zur Navbar passt (die bei „Breit" 1600px hat). */
.pub-section {
  padding: 64px max(20px, calc((100vw - 1400px) / 2));
}
body.page-landing .site-header {
  padding: 0 max(16px, calc((100vw - 1400px) / 2));
}
.pub-band { background: #fff; }
.pub-head { max-width: 760px; margin-bottom: 26px; }
.pub-head h2 {
  margin: 8px 0 10px;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.01em;
}
.pub-head .lead { max-width: 680px; }

/* ---------- HERO ---------- */
body.page-landing main > .landing-hero,
.pub-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center;
  gap: 44px;
  /* WICHTIG: app-redesign.css setzt .landing-hero auf max-width:1180px + margin
     auto. Zusammen mit dem (100vw-1180px)/2-Padding wuerde das doppelt begrenzen
     und den Inhalt quetschen. Daher hier explizit aufheben -> Hero volle Breite,
     das Padding zentriert den Inhalt auf 1180px (Codex-Modell). */
  max-width: none;
  margin: 0;
  padding: 52px max(20px, calc((100vw - 1400px) / 2)) 44px;
  text-align: left;
  background:
    linear-gradient(115deg, #f8fafb 0 52%, var(--pub-soft-2) 52% 100%);
}
.pub-hero .hero-copy { min-width: 0; }
.pub-hero h1 {
  margin: 12px 0 14px;
  max-width: 100%;
  font-size: clamp(2.05rem, 3.4vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -.015em;
  overflow-wrap: break-word;
}
.pub-hero .lead {
  max-width: 600px;
  margin: 0;
  color: var(--pub-muted);
  font-size: 1.06rem;
}
.pub-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* Trust-Proof-Leiste */
.pub-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 640px;
  margin-top: 24px;
}
.pub-proof .proof {
  padding: 11px 12px;
  border: 1px solid var(--pub-line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .72);
}
.pub-proof .proof strong { display: block; font-size: .96rem; color: var(--pub-ink); }
.pub-proof .proof span { display: block; color: var(--pub-muted); font-size: .76rem; }

/* ---------- App-Fenster-Demo (Produktvorschau) ---------- */
.pub-stage { position: relative; min-width: 0; }
.app-shot {
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(22, 24, 29, .1);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(22, 24, 29, .14);
}
.app-shot .shot-top {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  border-bottom: 1px solid var(--pub-line);
  background: #fbfcfd;
}
.shot-dots { display: flex; gap: 6px; }
.shot-dots span { width: 10px; height: 10px; border-radius: 50%; background: #c9d1db; }
.shot-pill {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: #eef4ff;
  color: var(--pub-blue-dark);
  font-size: .76rem;
  font-weight: 800;
}
.app-shot .shot-body { display: grid; grid-template-columns: 168px minmax(0, 1fr); }
.shot-side { padding: 16px; border-right: 1px solid var(--pub-line); background: #f6f8fa; }
.shot-side strong { display: block; margin-bottom: 10px; font-size: .86rem; color: var(--pub-ink); }
.shot-side a {
  display: block;
  margin-bottom: 6px;
  padding: 8px 10px;
  border-radius: var(--radius);
  color: var(--pub-muted);
  font-size: .84rem;
  font-weight: 700;
}
.shot-side a.active { background: var(--pub-blue); color: #fff; }
.shot-work { padding: 16px; min-width: 0; }
.shot-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.shot-stat { padding: 11px; border: 1px solid var(--pub-line); border-radius: var(--radius); background: #fff; }
.shot-stat span { display: block; color: var(--pub-muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.shot-stat strong { display: block; margin-top: 2px; font-size: 1.4rem; color: var(--pub-ink); }
.shot-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shot-panel { padding: 12px; border: 1px solid var(--pub-line); border-radius: var(--radius); background: #fff; min-width: 0; }
.shot-panel h4 { margin: 0 0 9px; font-size: .9rem; color: var(--pub-ink); }
.court-row {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 38px;
  margin-bottom: 6px;
  padding: 6px 8px;
  border-radius: var(--radius);
  background: #f4f7fa;
  font-size: .8rem;
}
.court-row strong { color: var(--pub-ink); }
.court-row span:not(.court-tag) { color: var(--pub-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.court-row.is-free { border-left: 4px solid var(--pub-green); }
.court-row.is-booked { border-left: 4px solid var(--pub-blue); }
.court-row.is-training { border-left: 4px solid var(--pub-clay); }
.court-tag {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 6px;
  background: var(--pub-blue);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
}
.shot-pyramid { display: grid; gap: 6px; justify-items: center; }
/* Echte Pyramide: 1/2/3-Reihen duerfen NIE umbrechen (sonst wird aus der
   3er-Reihe ein 2+1-Knick und die Dreiecksform geht verloren). Tiles schrumpfen
   stattdessen mit -> Reihe passt immer in die schmale Panel-Spalte. */
.pyr-row { display: flex; gap: 5px; justify-content: center; flex-wrap: nowrap; }
.pyr-tile {
  min-width: 0;
  padding: 7px 5px;
  border: 1px solid var(--pub-line);
  border-radius: 7px;
  background: #f6f8fa;
  text-align: center;
  font-size: .68rem;
  font-weight: 800;
  white-space: nowrap;
  color: var(--pub-ink);
}
.pyr-tile.is-top { background: #fff2cc; border-color: var(--pub-gold); }
.pyr-tile.is-me { background: #e7f0ff; border-color: var(--pub-blue); color: var(--pub-blue-dark); }
.shot-float {
  position: absolute;
  right: 44px;
  bottom: -38px;
  width: 260px;
  padding: 14px 16px;
  border: 1px solid rgba(22, 24, 29, .1);
  border-radius: 10px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 16px 36px rgba(22, 24, 29, .18);
}
.shot-float strong { display: block; color: var(--pub-ink); }
.shot-float span { display: block; margin-top: 3px; color: var(--pub-muted); font-size: .84rem; }

/* ---------- Kernmodule ---------- */
.pub-modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pub-module { padding: 22px; border: 1px solid var(--pub-line); border-radius: var(--radius); background: #fff; }
.pub-module .mod-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  margin-bottom: 14px;
  border-radius: 10px;
}
.pub-module .mod-icon svg { width: 22px; height: 22px; }
.pub-module:nth-child(1) .mod-icon { background: #E6F1FB; color: #185FA5; }
.pub-module:nth-child(2) .mod-icon { background: #E1F5EE; color: #0F6E56; }
.pub-module:nth-child(3) .mod-icon { background: #FAEEDA; color: #854F0B; }
.pub-module h3 { margin: 0 0 7px; font-size: 1.16rem; color: var(--pub-ink); }
.pub-module p { margin: 0; color: var(--pub-muted); }

/* ---------- Ablauf / Onboarding + Trust ---------- */
.pub-workflow { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 40px; align-items: start; }
.pub-steps { display: grid; gap: 12px; }
.pub-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 13px; padding: 14px; border: 1px solid var(--pub-line); border-radius: var(--radius); background: #fff; }
.pub-step .step-n { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius); background: var(--pub-blue); color: #fff; font-weight: 900; }
.pub-step strong { display: block; color: var(--pub-ink); }
.pub-step span { display: block; color: var(--pub-muted); font-size: .92rem; }
.pub-trust { padding: 22px; border: 1px solid var(--pub-line); border-radius: var(--radius); background: #fff; }
.pub-trust h3 { margin: 0 0 14px; font-size: 1.3rem; color: var(--pub-ink); }
.pub-trust ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pub-trust li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 9px; align-items: start; color: var(--pub-muted); }
.pub-trust .ck { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #eaf7ef; color: var(--pub-green); font-weight: 900; font-size: .8rem; }

/* ---------- Preise (dunkle Sektion) ---------- */
.pub-pricing { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, .58fr); gap: 32px; align-items: center; background: #10141a; color: #fff; }
.pub-pricing h2 { color: #fff; }
.pub-pricing .lead, .pub-pricing .kicker { color: rgba(255, 255, 255, .72); }
.pub-pricing .kicker::before { background: var(--pub-blue); }
.price-card { padding: 24px; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius); background: rgba(255, 255, 255, .07); }
.price-card .pc-eyebrow { color: rgba(255, 255, 255, .7); font-size: .72rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.price-card .pc-amount { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 4px; }
.price-card .pc-amount strong { font-size: 2.3rem; line-height: 1; }
.price-card .pc-amount span { color: rgba(255, 255, 255, .7); }
.price-card .pc-note { color: rgba(255, 255, 255, .6); font-size: .85rem; }
.price-card ul { display: grid; gap: 8px; margin: 16px 0 20px; padding-left: 18px; color: rgba(255, 255, 255, .8); }

/* ---------- Signup-Strip ---------- */
.pub-signup-card { max-width: 1180px; margin: 0 auto; border: 1px solid var(--pub-line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.pub-signup-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
.pub-signup-copy { padding: 30px 28px; }
.pub-signup-copy h2 { margin: 6px 0 8px; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.pub-signup-copy p { margin: 0; color: var(--pub-muted); }
.pub-signup-form-wrap { padding: 30px 28px; border-left: 1px solid var(--pub-line); background: var(--pub-soft); }
.pub-signup-form-wrap .signup-form { max-width: none; }

/* ---------- Login (an Website angeglichen) ---------- */
body.page-auth { background: linear-gradient(115deg, #f8fafb 0 50%, var(--pub-soft-2) 50% 100%); }
body.page-auth .auth-main { display: grid; place-items: center; min-height: calc(100vh - 76px); padding: 32px 16px; }
body.page-auth .auth-card { width: 100%; max-width: 420px; border: 1px solid var(--pub-line); box-shadow: var(--shadow); }
body.page-auth .auth-note { margin: 14px 0 0; padding: 11px 13px; border: 1px solid #d7e4f6; border-radius: var(--radius); background: #eef4ff; color: var(--pub-blue-dark); font-size: .84rem; }

/* ---------- Rechtsseiten (professionell) ----------
   Die Struktur .legal-wrap bleibt erhalten: der Server (main.py _LEGAL_RE)
   ersetzt den Inhalt durch den im Owner-Panel gepflegten Rechtstext, falls
   gesetzt. Hier nur als ruhige, seriöse Karte gestylt. */
body.page-legal { background: var(--pub-soft); }
body.page-legal main { padding: 0; }
.legal-wrap {
  max-width: 860px;
  margin: 30px auto 56px;
  padding: 32px 34px 40px;
  border: 1px solid var(--pub-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
}
.legal-wrap h1 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin: 0 0 14px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.legal-wrap h2 { font-size: 1.08rem; margin: 1.6rem 0 .5rem; color: var(--pub-ink); }
.legal-wrap p, .legal-wrap li { line-height: 1.65; color: #3a414c; }
.legal-wrap a { color: var(--pub-blue-dark); font-weight: 600; }
.legal-text { color: #3a414c; }
.legal-tbd { color: var(--pub-muted); font-style: italic; font-weight: 400; }
@media (max-width: 620px) { .legal-wrap { margin: 18px 12px 40px; padding: 24px 20px 30px; } }

/* ---------- Footer ---------- */
body.page-landing .landing-footer { background: #fff; border-top: 1px solid var(--pub-line); }
body.page-landing .footer-grid,
body.page-landing .footer-bottom { width: min(1400px, calc(100% - 32px)); }

/* ============================================================
   Mobile — kein horizontaler Overflow, Header sauber
   ============================================================ */
@media (max-width: 980px) {
  body.page-landing main > .landing-hero,
  .pub-hero,
  .pub-workflow,
  .pub-pricing,
  .pub-signup-grid { grid-template-columns: 1fr; }
  .app-shot { max-width: 560px; }
  .pub-proof,
  .pub-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub-signup-form-wrap { border-left: 0; border-top: 1px solid var(--pub-line); }
  .shot-float { position: static; width: auto; margin-top: 14px; }
}

@media (max-width: 620px) {
  .pub-section { padding: 44px 16px; }
  body.page-landing main > .landing-hero,
  .pub-hero { padding: 34px 16px 30px; gap: 26px; }
  .pub-hero h1 { font-size: 2.2rem; }
  .pub-proof,
  .pub-modules,
  .shot-stats,
  .shot-split { grid-template-columns: 1fr; }
  .app-shot .shot-body { grid-template-columns: 1fr; }
  .shot-side { display: none; }
  .court-row { grid-template-columns: 46px minmax(0, 1fr); }
  .court-row .court-tag { grid-column: 1 / -1; justify-self: start; }
  .pub-hero .hero-actions .btn { flex: 1 1 100%; }
  .pub-signup-copy, .pub-signup-form-wrap { padding: 22px 18px; }
}

/* Signup-Zustimmungen (versionierte Rechtsdokumente, Phase 4 — 2026-06-28) */
.signup-consents { display: flex; flex-direction: column; gap: .6rem; margin: .4rem 0 .2rem; }
.signup-consents .signup-rep-field { margin: 0; }
.signup-check { display: flex; align-items: flex-start; gap: .55rem; font-size: .85rem; line-height: 1.4; cursor: pointer; }
.signup-check input[type="checkbox"] { margin-top: .15rem; flex: 0 0 auto; width: 1.05rem; height: 1.05rem; }
.signup-check a { text-decoration: underline; }
.signup-check--optional { opacity: .85; }