/* ============================================================
   Schriften — zusammengeführt aus der früheren fonts.css.
   Als eigene Datei kostete sie auf gedrosseltem Mobilfunk einen
   kompletten Round-Trip (rund 180 ms), bevor die Schriften
   überhaupt angefragt wurden.

   Selbst gehostet statt über Google Fonts: Beim Hotlinking überträgt
   der Browser die IP-Adresse des Besuchers an Google — ohne Einwilligung
   ein DSGVO-Verstoß (LG München I, 20.01.2022, Az. 3 O 17493/20).

   Beides sind Variable Fonts — eine Datei deckt alle Schnitte ab.
   ============================================================ */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/cormorant-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/cormorant-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Lenis — zusammengeführt aus vendor/lenis/lenis.css (513 Bytes,
   ebenfalls ein eigener Round-Trip). */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* ============================================================
   Serve One Padel — Testumgebung
   Palette und Typografie folgen dem Logo (klassische Serif,
   Schwarz/Weiß) und der Bildsprache von Marco Meyer (Court-Blau).
   ============================================================ */

:root{
  --bg:        #0a0c0f;
  --bg-alt:    #0e1218;
  --surface:   #12171e;
  --surface-2: #182029;
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.20);

  --ink:       #f3f5f7;
  --ink-mid:   #a3aeb9;
  /* Der frühere Wert #6b7783 kam auf Grund #0a0c0f nur auf 4.28:1 und fiel damit
     durch WCAG AA (4.5:1 für Text dieser Größe). Er trägt an 16 Stellen Text —
     Formular-Labels, Preishinweise, Fußzeile. #78848f erreicht 5.12:1 und bleibt
     sichtbar gedämpft. Nicht wieder abdunkeln. */
  --ink-dim:   #78848f;

  /* Buttonblau. Der fruehere Wert #1585d8 kam mit weisser Schrift nur auf
     3.90:1 — durchgefallen bei WCAG AA, und das auf JEDEM "Platz buchen".
     #1379c4 erreicht 4.61 und hebt sich mit 4.25 weiter klar vom dunklen
     Seitengrund ab. Nicht wieder aufhellen. */
  --blue:      #1379c4;
  --blue-hover:#1170b6;   /* Hover verdunkelt: Aufhellen kippte den Kontrast auf 2.56 */
  --blue-soft: #4aa9ef;   /* nur fuer Text und Linien auf dunklem Grund */
  --blue-ink:  #ffffff;

  --r-sm: 4px;
  --r:    8px;
  --r-lg: 14px;

  --wrap: 1240px;
  --gut: clamp(20px, 4vw, 48px);
  --ease: cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:92px; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

/* ---------- Typografie ---------- */
/* Cormorant liefert von Haus aus Mediävalziffern — die lesen sich in
   Überschriften und Zahlen als Buchstaben ("I4" statt "14"). Überall dort,
   wo die Serif Ziffern zeigt, deshalb auf Versalziffern umstellen. */
.display, .stats dt, .price, .feat-num,
.loc-body h3, .price-card h3, .brand-word b, .ort h3{
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1, "onum" 0;
}

.display{
  font-family:"Cormorant Garamond", ui-serif, Georgia, serif;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.06em;
  line-height:1.04;
  text-wrap:balance;
  margin:0;
}
h1.display{ font-size:clamp(2.9rem, 8vw, 6.4rem); letter-spacing:.03em; }
h2.display{ font-size:clamp(2rem, 4.4vw, 3.4rem); }
h3{ margin:0 0 .4em; font-size:1.15rem; font-weight:600; letter-spacing:-.01em; }
p{ margin:0 0 1rem; }

.eyebrow{
  font-size:.72rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--blue-soft);
  margin:0 0 1.1rem;
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:""; width:30px; height:1px; background:currentColor; flex:0 0 auto; }
.eyebrow.centered{ justify-content:center; }

.lead{ font-size:clamp(1.02rem,1.5vw,1.2rem); color:var(--ink-mid); max-width:58ch; }
.muted{ color:var(--ink-dim); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.wrap-narrow{ max-width:840px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--ink); color:var(--bg);
  padding:12px 20px; font-weight:600;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2px solid var(--blue-soft); outline-offset:3px; }

/* ---------- Buttons ---------- */
.btn{
  --bg-c:transparent; --fg-c:var(--ink); --bd-c:var(--line-2);
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  min-height:48px; padding:.8em 1.8em;
  font:inherit; font-size:.82rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  border:1px solid var(--bd-c); border-radius:var(--r-sm);
  background:var(--bg-c); color:var(--fg-c);
  transition:background-color .3s var(--ease), border-color .3s var(--ease),
             color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover{ transform:translateY(-1px); }

.btn-primary{ --bg-c:var(--blue); --fg-c:var(--blue-ink); --bd-c:var(--blue); }
.btn-primary:hover{ --bg-c:var(--blue-hover); --bd-c:var(--blue-hover); }

.btn-ghost:hover{ --bd-c:var(--ink); background:rgba(255,255,255,.06); }

.btn-light{ --bg-c:var(--ink); --fg-c:var(--bg); --bd-c:var(--ink); }
.btn-light:hover{ --bg-c:transparent; --fg-c:var(--ink); }

.btn-sm{ min-height:40px; padding:.6em 1.25em; font-size:.74rem; }

/* Am Finger sind 40 px zu knapp — die Richtlinie verlangt 44 px. Bedingung ist
   bewusst die Eingabeart, nicht die Fensterbreite: Ein Tablet im Querformat ist
   breit und wird trotzdem angetippt. Mit der Maus bleibt die kompakte Größe. */
@media (pointer: coarse){
  .btn-sm{ min-height:44px; }
}

.textlink{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mid); text-decoration:none;
  border-bottom:1px solid var(--line-2); padding-bottom:3px;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.textlink:hover{ color:var(--blue-soft); border-color:var(--blue-soft); }

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  border-bottom:1px solid transparent;
  transition:background-color .35s var(--ease), border-color .35s var(--ease);
}
.site-header.is-stuck{
  background:rgba(10,12,15,.85);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:84px; gap:20px; }

/* Das gelieferte Logo ist gestapelt (Schläger über Schriftzug). Für die
   schmale Kopfzeile wird daraus eine horizontale Marke: Bildmarke links,
   Schriftzug in der Hausschrift daneben. */
.brand{ display:inline-flex; align-items:center; gap:14px; text-decoration:none; flex:0 0 auto; }
.brand-mark{ height:38px; width:auto; }
.brand-word{ display:grid; gap:2px; line-height:1; }
.brand-word b{
  font-family:"Cormorant Garamond", serif; font-weight:600;
  font-size:1.32rem; letter-spacing:.13em; text-transform:uppercase;
}
.brand-word span{
  font-size:.6rem; font-weight:600; letter-spacing:.44em;
  text-transform:uppercase; color:var(--ink-dim); padding-left:.16em;
}

.nav{ display:flex; align-items:center; gap:.15rem; }
.nav a{
  padding:.6rem .9rem;
  font-size:.76rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mid); text-decoration:none;
  transition:color .25s var(--ease);
}
.nav a:hover, .nav a.is-current{ color:var(--ink); }
.nav .nav-cta{ margin-left:1rem; color:var(--blue-ink); }
.nav .nav-cta:hover{ color:var(--blue-ink); }

.nav-toggle{
  display:none; width:46px; height:46px; padding:0;
  background:transparent; border:1px solid var(--line-2); border-radius:var(--r-sm);
  cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{ display:block; width:18px; height:1.5px; background:var(--ink); transition:transform .3s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ---------- Hero ---------- */
/* Inhalt sitzt mittig statt am unteren Rand: Bei voller Bildschirmhoehe
   entstand darueber ein grosser leerer Block, in dem nur das Foto stand.
   Die Hoehe ist ausserdem etwas reduziert, damit der naechste Abschnitt
   schon anschneidet und zum Weiterlesen einlaedt. */
.hero{
  position:relative; min-height:min(88svh, 820px);
  display:flex; align-items:center;
  padding:calc(84px + 1.5vw) 0 clamp(28px,4vw,52px);
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; }
/* Zwei Verläufe: einer trägt die Textspalte links, einer bindet den
   Bildrand nach oben und unten an den Seitenhintergrund an. */
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(8,10,13,.88) 0%, rgba(8,10,13,.50) 40%, rgba(8,10,13,0) 78%),
    linear-gradient(to top, rgba(8,10,13,.97) 3%, rgba(8,10,13,.34) 46%, rgba(8,10,13,.74) 100%);
}
.hero-inner{ position:relative; z-index:1; width:100%; }
.hero h1{ max-width:15ch; }
.hero .eyebrow{ color:var(--ink); font-weight:600; }
.hero .eyebrow::before{ background:var(--blue-soft); }
.hero .lead{ color:#dfe5ea; }
.hero .lead{ margin-top:1.6rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.4rem; }

.stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; margin:clamp(48px,6vw,72px) 0 0; padding:0;
  background:var(--line); border-block:1px solid var(--line);
}
.stats div{ background:var(--bg); padding:22px 20px 20px; }
.stats dt{
  font-family:"Cormorant Garamond", serif; font-weight:500;
  font-size:clamp(1.9rem,3.2vw,2.7rem); line-height:1;
  font-variant-numeric:tabular-nums;
}
.stats dd{ margin:.5rem 0 0; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); }

/* ---------- Sections ---------- */
/* Der untere Wert gilt mobil. 80 px oben und unten mal neun Abschnitte waren
   allein 1440 px reine Luft — 62 px lassen die Seite noch atmen. */
/* Abstaende gemessen, nicht geschaetzt: Mit clamp(62px,11vw,150px) lagen auf
   1440 px 300 px zwischen zwei Bloecken — 27 % der Seite waren reiner Abstand.
   Auf 390 px waren es 124 px und 9 %, dort stimmte es also schon. Deshalb ein
   flacherer Anstieg (7vw statt 11vw) und eine deutlich niedrigere Obergrenze:
   der Desktop wird kompakter, das Handy kaum angefasst. */
.section{ padding:clamp(54px,7vw,96px) 0; position:relative; }
.section-alt{ background:var(--bg-alt); }
.section-head{ max-width:680px; margin-bottom:clamp(36px,4vw,56px); }
.section-head.centered{ margin-inline:auto; text-align:center; }
.section-head .lead{ margin-top:1.3rem; }
.section-head.centered .lead{ margin-inline:auto; }

/* ---------- Standorte ---------- */
.locations{ display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:clamp(18px,2.4vw,30px); }

.loc{ display:flex; flex-direction:column; }
.loc-media{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:var(--surface);
}
.loc-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease);
}
.loc:hover .loc-media img{ transform:scale(1.045); }
.loc-tag{
  position:absolute; top:0; left:0; z-index:1;
  padding:.5em 1em;
  background:rgba(10,12,15,.78); backdrop-filter:blur(8px);
  font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mid);
}

.loc-body{ padding:26px 0 0; display:flex; flex-direction:column; flex:1; }
.loc-body h3{
  font-family:"Cormorant Garamond", serif; font-weight:500;
  font-size:1.75rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.5rem;
}
.loc-address{ color:var(--ink-mid); font-size:.95rem; margin-bottom:1.3rem; }

.loc-facts{
  list-style:none; margin:0 0 1.8rem; padding:1.2rem 0 0;
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1.2rem;
  font-size:.88rem; color:var(--ink-mid);
}
.loc-facts strong{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }

.loc-actions{ display:flex; align-items:center; gap:1.4rem; margin-top:auto; flex-wrap:wrap; }

/* ---------- Buchung ---------- */
.booking{ border:1px solid var(--line); background:var(--surface); }
.booking-tabs{ display:flex; border-bottom:1px solid var(--line); }
.booking-tab{
  flex:1; min-height:60px; padding:.9em 1em;
  font:inherit; font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim); background:transparent; border:0; cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.booking-tab:hover{ color:var(--ink); }
.booking-tab.is-active{ color:var(--ink); border-bottom-color:var(--blue); }

.booking-panel{ display:none; }
.booking-panel.is-active{ display:block; animation:fade .4s var(--ease); }
@keyframes fade{ from{ opacity:0; transform:translateY(8px); } }

.booking-embed{ min-height:400px; display:grid; place-items:center; padding:clamp(40px,6vw,72px) var(--gut); }
.booking-embed iframe{ width:100%; min-height:680px; border:0; }

.embed-placeholder{ text-align:center; max-width:440px; }
.embed-placeholder h3{ font-size:1.05rem; }
.embed-placeholder p{ font-size:.94rem; color:var(--ink-dim); }
.embed-placeholder .btn{ margin-top:1.8rem; }
.embed-mark{
  width:52px; height:52px; margin:0 auto 1.6rem;
  border:1px solid var(--line-2);
  display:grid; place-items:center;
}
.embed-mark::after{
  content:""; width:14px; height:14px; border-radius:50%;
  border:1.5px solid var(--blue-soft);
}

/* Sticky Buchungsleiste (mobil) */
.sticky-cta{
  position:fixed; inset:auto 0 0 0; z-index:90;
  display:none; align-items:center; justify-content:space-between; gap:14px;
  /* Unten die iPhone-Safe-Area addieren, sonst liegt der Button unter dem
     Home-Indikator. Braucht viewport-fit=cover im <meta viewport>. */
  padding:12px var(--gut);
  padding-bottom:max(12px, env(safe-area-inset-bottom));
  background:rgba(10,12,15,.94); backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
}
.sticky-cta .sc-text{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mid); }

/* ---------- Angebot ---------- */
.features{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.feat{ background:var(--bg); padding:clamp(26px,3vw,38px); transition:background-color .3s var(--ease); }
.feat:hover{ background:var(--surface); }
.section-alt .feat{ background:var(--bg-alt); }
.section-alt .feat:hover{ background:var(--surface); }
.feat-num{
  font-family:"Cormorant Garamond", serif; font-size:.95rem;
  color:var(--blue-soft); letter-spacing:.1em; display:block; margin-bottom:1.4rem;
  font-variant-numeric:tabular-nums;
}
.feat h3{ font-size:1.08rem; }
.feat p{ color:var(--ink-mid); font-size:.94rem; margin:0; }

/* ---------- Bildstreifen ---------- */
.strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); }

/* Der Bildstreifen laeuft randlos von Kante zu Kante und wirkt damit selbst
   schon als Zaesur. Die vollen Abschnittsabstaende davor und danach ergaben
   rund 190 px leeres Dunkel um ein Band, das keine Trennung mehr braucht —
   gemessen war das die groesste Luecke der ganzen Seite.
   :has() faellt in alten Browsern einfach auf den normalen Abstand zurueck. */
.section:has(+ .strip){ padding-bottom:clamp(32px,4vw,52px); }
.strip + .section{ padding-top:clamp(32px,4vw,52px); }
.strip figure{ margin:0; position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--bg); }
.strip img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.strip figure:hover img{ transform:scale(1.06); }

/* ---------- Preise ---------- */
.pricing{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.price-card{ background:var(--bg); padding:clamp(28px,3vw,40px); display:flex; flex-direction:column; position:relative; }
.section-alt .price-card{ background:var(--bg-alt); }
.price-card.is-featured{ background:var(--surface); }
.ribbon{
  position:absolute; top:0; right:0;
  padding:.4em 1em; background:var(--blue); color:var(--blue-ink);
  font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.price-card h3{
  font-family:"Cormorant Garamond", serif; font-weight:500;
  font-size:1.5rem; text-transform:uppercase; letter-spacing:.08em;
}
.price{
  font-family:"Cormorant Garamond", serif; font-weight:500;
  font-size:3.4rem; line-height:1; margin:1.2rem 0 .3rem;
  font-variant-numeric:tabular-nums;
}
.price small{ font-family:"Archivo",sans-serif; font-size:.85rem; font-weight:500; color:var(--ink-dim); letter-spacing:0; }
.price-note{ color:var(--ink-dim); font-size:.85rem; }
.price-card ul{
  list-style:none; margin:1.8rem 0 2rem; padding:1.4rem 0 0;
  border-top:1px solid var(--line);
  display:grid; gap:.7rem; font-size:.92rem; color:var(--ink-mid);
}
.price-card li{ padding-left:1.5rem; position:relative; }
.price-card li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:8px; height:1px; background:var(--blue-soft);
}
.price-card .btn{ margin-top:auto; width:100%; }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:26px 44px 26px 0; position:relative;
  font-size:1.05rem; font-weight:500;
  transition:color .25s var(--ease);
}
.faq summary:hover{ color:var(--blue-soft); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after,
.faq summary::before{
  content:""; position:absolute; right:6px; top:50%; background:var(--ink-dim);
  transition:transform .3s var(--ease), background-color .3s var(--ease);
}
.faq summary::after{ width:14px; height:1px; margin-top:-.5px; }
.faq summary::before{ width:1px; height:14px; margin-top:-7px; right:12px; }
.faq details[open] summary::before{ transform:rotate(90deg); }
.faq details[open] summary::after,
.faq details[open] summary::before{ background:var(--blue-soft); }
.faq details p{ color:var(--ink-mid); font-size:.97rem; padding:0 3rem 26px 0; margin:0; max-width:72ch; }

/* ---------- Kontakt ---------- */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,90px); align-items:start; }
.contact-list{ list-style:none; margin:2.4rem 0 0; padding:0; display:grid; gap:0; border-top:1px solid var(--line); }
.contact-list li{ display:grid; gap:.2rem; padding:18px 0; border-bottom:1px solid var(--line); }
.contact-list a{ text-decoration:none; font-size:1.02rem; transition:color .25s var(--ease); }
.contact-list a:hover{ color:var(--blue-soft); }
.ci-label{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim); }

.contact-form{ display:grid; gap:18px; }
.field{ display:grid; gap:.5rem; }
.field label{ font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); }
.field input, .field select, .field textarea{
  font:inherit; font-size:.98rem; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--line-2);
  padding:.7em 0; width:100%; resize:vertical; border-radius:0;
  transition:border-color .25s var(--ease);
}
.field select{ background:var(--bg); }
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-dim); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-bottom-color:var(--blue-soft);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{ border-bottom-color:#e2725b; }
.contact-form .btn{ justify-self:start; margin-top:.6rem; }
.form-note{ font-size:.9rem; color:var(--blue-soft); margin:0; min-height:1.2em; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--line); padding-top:clamp(56px,7vw,84px); }
.footer-inner{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; padding-bottom:56px; }
.footer-brand img{ height:52px; width:auto; filter:invert(1); }
.footer-brand p{ margin-top:1.4rem; font-size:.92rem; color:var(--ink-dim); max-width:32ch; }
.footer-col{ display:grid; gap:.7rem; align-content:start; }
.footer-col h3{ margin:0 0 .5rem; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim); font-weight:600; }
.footer-col a{ text-decoration:none; color:var(--ink-mid); font-size:.94rem; transition:color .25s var(--ease); }
.footer-col a:hover{ color:var(--blue-soft); }
.footer-bottom{
  display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between;
  border-top:1px solid var(--line); padding-block:24px;
  font-size:.82rem; color:var(--ink-dim);
}
.footer-bottom p{ margin:0; }

/* ---------- Rechtstexte ---------- */
.legal{ padding:160px 0 110px; }
.legal h1{ font-size:clamp(2.2rem,5vw,3.4rem); margin-bottom:2.4rem; }
.legal h2{ font-size:1.15rem; margin:2.6rem 0 .6rem; letter-spacing:.02em; }
.legal p, .legal li{ color:var(--ink-mid); font-size:1rem; max-width:70ch; }
.legal .note{
  border-left:2px solid var(--blue); background:var(--surface);
  padding:18px 22px; color:var(--ink); font-size:.95rem;
}

/* ---------- Reveal ----------
   Der versteckte Zustand gilt nur, wenn JavaScript ihn auch wieder aufheben
   kann: main.js setzt .js auf <html>. Ohne JS bleibt alles sichtbar. */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-in{ opacity:1; transform:none; }

/* Der Hero steht beim Laden bereits im Bild und wartet deshalb nicht auf
   einen Scroll-Trigger, sondern blendet direkt ein. */
.js .hero .reveal{ opacity:0; transform:translateY(20px); animation:heroIn .9s var(--ease) forwards; }
.js .hero .eyebrow{ animation-delay:.05s; }
.js .hero h1{ animation-delay:.15s; }
.js .hero .lead{ animation-delay:.28s; }
.js .hero .hero-actions{ animation-delay:.4s; }
.js .hero .stats{ animation-delay:.52s; }
@keyframes heroIn{ to{ opacity:1; transform:none; } }

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .contact{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
  .strip{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:820px){
  .nav-toggle{ display:flex; }
  .nav{
    position:fixed; inset:84px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    padding:12px var(--gut) 28px;
    background:rgba(10,12,15,.97); backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
    transform:translateY(-10px); opacity:0; pointer-events:none;
    transition:opacity .28s var(--ease), transform .28s var(--ease);
  }
  .nav.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .nav a{ padding:1rem 0; border-bottom:1px solid var(--line); font-size:.86rem; }
  .nav .nav-cta{ margin:1.4rem 0 0; border:1px solid var(--blue); background:var(--blue); text-align:center; justify-content:center; }

  .stats{ grid-template-columns:1fr 1fr; }
  /* Zwei Spalten statt einer: Gestapelt war die Fusszeile mobil 1279 px hoch,
     also 1,5 Bildschirme fuer reine Navigation. Die Listen sind kurz genug. */
  .footer-inner{ grid-template-columns:1fr 1fr; gap:28px; }
  .footer-brand{ grid-column:1 / -1; }
  .sticky-cta{ display:flex; }

  /* Die Leiste liegt fix ueber dem Inhalt und wuerde sonst das Seitenende
     verdecken. Der Zuschlag entspricht ihrer Hoehe plus Safe-Area. */
  .site-footer{ padding-bottom:calc(80px + env(safe-area-inset-bottom)); }

  /* Reine Textlinks sind mit dem Finger sonst zu knapp: auf rund 44 px bringen. */
  .footer-col a{ padding-block:.55rem; }
  .contact-list a{ padding-block:.35rem; }
  .textlink{ padding-block:.5rem; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .js .reveal, .js .hero .reveal{ opacity:1 !important; transform:none !important; animation:none !important; }
}

/* ============================================================
   Freie Zeiten (aus der Playtomic-API, siehe api/availability.js)
   Wird nur eingeblendet, wenn echte Daten vorliegen — das Element
   startet mit [hidden] und JS entfernt es erst nach dem Rendern.
   ============================================================ */

.slots{ padding:clamp(28px,4vw,44px) var(--gut); }

/* --- Tag-Auswahl --- */
.slots-days{
  display:flex; flex-wrap:wrap; gap:.5rem;
  padding-bottom:1.4rem; margin-bottom:1.6rem;
  border-bottom:1px solid var(--line);
}
.slots-day{
  min-height:44px; padding:.55em 1.15em;
  font:inherit; font-size:.8rem; font-weight:600; letter-spacing:.04em;
  color:var(--ink-mid); background:transparent;
  border:1px solid var(--line); border-radius:var(--r);
  cursor:pointer;
  transition:color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.slots-day:hover{ color:var(--ink); border-color:var(--line-2); }
.slots-day[aria-selected="true"]{
  color:var(--blue-ink); background:var(--blue); border-color:var(--blue);
}

/* --- Slot-Raster --- */
.slot-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.6rem;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
}
.slot{
  display:flex; flex-direction:column; gap:.15rem;
  min-height:64px; padding:.75em 1em;
  text-decoration:none; color:inherit;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  transition:border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
.slot:hover{ border-color:var(--blue); background:var(--surface); }
.slot-time{ font-size:1.15rem; font-weight:600; letter-spacing:.01em; }
.slot-free{ font-size:.76rem; color:var(--ink-dim); }
.slot:hover .slot-free{ color:var(--blue-soft); }

/* --- Ehrlichkeitshinweis zum Datenstand --- */
.slots-note{
  margin:1.8rem 0 0;
  font-size:.78rem; color:var(--ink-dim);
}

/* Bewegung nur, wenn der Besucher sie nicht abbestellt hat. */
@media (prefers-reduced-motion:no-preference){
  .slot:hover{ transform:translateY(-2px); }
}

/* ---------- Hero-Typografie auf schmalen Schirmen ----------
   Gemessen bei 360/390/430 px: Eyebrow lief auf zwei Zeilen, die Ueberschrift
   auf drei, der Lead auf vier. Gewuenscht sind eine, zwei und zwei.

   Die Ueberschrift stand auf clamp(2.9rem, 8vw, …) — unter 580 px greift
   immer der Mindestwert, die 8vw kamen nie zum Zug. Deshalb hier ein eigener,
   kleinerer Satz statt an der globalen clamp zu drehen; die bleibt fuer
   Desktop unveraendert.

   Beim Eyebrow entfaellt mobil zusaetzlich der Strich davor. Er kostet mit
   Abstand rund 42 px — bei 320 px Textbreite ist das der Unterschied zwischen
   einer und zwei Zeilen. */
@media (max-width:560px){
  .hero h1.display{ font-size:clamp(2.1rem, 9.2vw, 2.9rem); letter-spacing:.02em; }
  /* .hero h1 steht global auf max-width:15ch. Bei 34 px Schriftgroesse zwingt
     das die Zeile nach rund 15 Zeichen um — die Ueberschrift blieb deshalb
     dreizeilig, obwohl die Schrift laengst klein genug war. Mobil die volle
     Breite freigeben; auf dem Desktop bleibt die 15ch-Begrenzung, dort sorgt
     sie fuer die gewollte schmale Satzfahne. */
  .hero h1{ max-width:none; }
  .hero .eyebrow{ font-size:.64rem; letter-spacing:.10em; gap:0; }
  .hero .eyebrow::before{ display:none; }
  .hero .lead{ font-size:.97rem; }
}

@media (max-width:520px){
  .slot-list{ grid-template-columns:repeat(auto-fill, minmax(112px, 1fr)); }
  .slot{ min-height:58px; }
  .slot-time{ font-size:1.02rem; }
}
/* ============================================================
   Standorte (#standorte)
   Groessere Karten als zuvor: Jede traegt Adresse, Kennzahlen und
   Ausstattung. Die Deckenhoehe steht bewusst bei den Kennzahlen —
   bei Padel entscheidet sie ueber hohe Baelle und unterscheidet eine
   gebaute Halle von einer umgenutzten.

   Jeder Eintrag traegt seinen Status sichtbar. Die Liste ist eine <ol>,
   weil die Reihenfolge die zeitliche Abfolge ist.
   ============================================================ */

.orte{
  list-style:none; margin:clamp(36px,5vw,60px) 0 0; padding:0;
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line);
}

.ort{
  display:flex; flex-direction:column;
  background:var(--bg);
  padding:clamp(30px,3vw,44px) clamp(26px,2.6vw,38px);
}

.ort-status{
  margin:0 0 .7rem;
  font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
}
.ort.is-open    .ort-status{ color:var(--blue-soft); }
.ort.is-soon    .ort-status{ color:var(--ink-mid); }
.ort.is-planned .ort-status{ color:var(--ink-dim); }

/* Statuspunkt: gefuellt = offen, hohl = kommt noch. Die Information steht
   immer auch im Text daneben, nie nur in der Farbe. */
.ort-status::before{
  content:""; display:inline-block;
  width:7px; height:7px; margin-right:.6em; border-radius:50%;
  vertical-align:.08em; background:currentColor;
}
.ort.is-soon .ort-status::before,
.ort.is-planned .ort-status::before{
  background:transparent; box-shadow:inset 0 0 0 1.5px currentColor;
}

.ort h3{
  margin:0 0 .55rem;
  font-family:"Cormorant Garamond", ui-serif, Georgia, serif;
  font-weight:500; font-size:clamp(1.45rem,2.4vw,1.95rem); line-height:1.12;
}

.ort-adresse{
  margin:0 0 1.5rem;
  font-size:.95rem; line-height:1.5; color:var(--ink-mid);
  /* Zwei Zeilen reservieren, damit die Trennlinien aller Karten fluchten. */
  min-height:3em;
}

/* Kennzahlen — das, was den Standort ausmacht.
   min-height reserviert Platz fuer eine umbrechende Zeile: Bei Langweid
   passt die Oeffnungszeit nicht auf eine Zeile, wodurch die Trennlinie
   dieser Karte 23 px tiefer sass als bei den anderen beiden. */
.ort-zahlen{
  margin:0 0 1.5rem; padding:0 0 1.3rem;
  border-bottom:1px solid var(--line);
}

/* Nur wenn Karten nebeneinander stehen: Einspaltig sieht niemand zwei Karten
   gleichzeitig, dort waere die reservierte Hoehe blosser Leerraum. */
@media (min-width:700px){
  .ort-zahlen{ min-height:9.7rem; }
}
.ort-zahlen > div{
  display:grid; grid-template-columns:7.2rem 1fr; gap:.9rem;
  padding:.42rem 0;
  font-size:.9rem;
}
.ort-zahlen dt{ color:var(--ink-dim); }
.ort-zahlen dd{ margin:0; color:var(--ink-mid); }
.ort-zahlen strong{
  color:var(--ink); font-weight:600;
  font-variant-numeric:lining-nums tabular-nums;
}

.ort-ausstattung{
  list-style:none; margin:0 0 1.8rem; padding:0;
  font-size:.9rem; color:var(--ink-mid);
}
.ort-ausstattung li{
  position:relative; padding:.3rem 0 .3rem 1.1rem;
}
.ort-ausstattung li::before{
  content:""; position:absolute; left:0; top:1.05em;
  width:5px; height:1px; background:var(--line-2);
}

/* margin-top:auto haelt die Aktionen am unteren Kartenrand. */
.ort-aktion{
  margin-top:auto;
  display:flex; align-items:center; flex-wrap:wrap; gap:1.1rem;
}

@media (min-width:700px) and (max-width:1059px){
  .orte{ grid-template-columns:repeat(2, 1fr); }
}
@media (min-width:1060px){
  .orte{ grid-template-columns:repeat(3, 1fr); }
}

/* ============================================================
   Ballwechsel — Scroll-Fortschritt am linken Rand

   Ein Padel-Ball, der sich über die Seitenhöhe durchspielt. Die Linie
   zeichnet sich mit dem Scrollverlauf, der Ball sitzt an ihrer Spitze.

   Bewusst am äusseren Rand: kreuzt nie Text, kollidiert mit keinem Layout
   und kostet nur die Rasterfläche eines schmalen Streifens statt der
   ganzen Seite. Ohne JavaScript bleibt sie unsichtbar — der Startzustand
   steckt in motion.js, nicht im CSS.
   ============================================================ */

.rally{
  position:fixed; inset:0; z-index:5;
  display:none;                 /* JS blendet ein, sobald es zeichnet */
  pointer-events:none;          /* fängt niemals einen Klick ab */
}

/* Der Ball. Position, Größe, Drehung und Deckkraft setzt motion.js — hier
   steht nur, was sich nie ändert. `will-change` hebt ihn auf eine eigene
   Compositor-Ebene, damit das Verschieben kein Neuzeichnen der Seite auslöst. */
.rally-ball{
  position:absolute; top:0; left:0;
  width:72px; height:72px;
  /* Ursprung in der Mitte, damit Skalierung und Drehung um den Ballmittelpunkt
     laufen und nicht um die linke obere Ecke. */
  margin:-36px 0 0 -36px;
  will-change:transform, opacity;
}
.rally svg{ width:100%; height:100%; display:block; overflow:visible; }

/* Erst ab genug Rand einblenden. Die Textspalte ist max. 1240 px breit;
   darunter gäbe es keinen freien Streifen und die Linie liefe über Inhalt. */
@media (min-width:1000px) and (pointer:fine){
  .js .rally{ display:block; }
}

/* Dekoration ist das Erste, was bei Bewegungsreduzierung entfällt. */
@media (prefers-reduced-motion:reduce){
  .rally{ display:none !important; }
}

/* ============================================================
   Einwilligungsbanner (#consentBanner)
   Liegt über allem — auch über der sticky Buchungsleiste, sonst
   verdeckt die den Ablehnen-Knopf. Startet mit [hidden]; erst
   consent.js blendet es ein.
   ============================================================ */

.consent{
  position:fixed; inset:auto 0 0 0; z-index:200;
  background:rgba(10,12,15,.97);
  backdrop-filter:blur(16px);
  border-top:1px solid var(--line-2);
  padding-bottom:env(safe-area-inset-bottom);
}
.consent[hidden]{ display:none; }

.consent-inner{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:clamp(18px,2.4vw,26px) var(--gut);
  display:flex; align-items:center; gap:clamp(20px,3vw,44px);
  flex-wrap:wrap;
}

.consent-text{ flex:1 1 380px; min-width:0; }
.consent-text p{ margin:0; font-size:.88rem; color:var(--ink-mid); line-height:1.55; }
.consent-text p:first-child{ margin-bottom:.35rem; color:var(--ink); font-size:.94rem; }
.consent-text a{ color:var(--blue-soft); }

/* Beide Schaltflächen gleich breit: Eine hervorgehobene Zustimmung wäre
   keine freie Einwilligung im Sinne der DSGVO. */
.consent-aktion{
  flex:0 0 auto;
  display:flex; gap:.7rem;
}
.consent-aktion .btn{ min-width:132px; }

@media (max-width:560px){
  .consent-aktion{ width:100%; }
  .consent-aktion .btn{ flex:1 1 0; min-width:0; }
}

/* Aktionszeile in den Angebots-Karten. margin-top:auto braucht die Karte als
   Flex-Spalte, sonst klebt der Button direkt am Text. */
.feat{ display:flex; flex-direction:column; }
.feat-aktion{ margin:1.6rem 0 0; }

/* ============================================================
   Vertrauensband — echte Google-Bewertungen
   Sitzt direkt unter dem Hero: Der Beweis kommt, bevor der Besucher
   das erste Mal ans Zahlen denkt.
   ============================================================ */

.trust{
  border-block:1px solid var(--line);
  background:var(--bg-alt);
  padding:clamp(28px,4vw,44px) 0;
}
.trust-inner{
  display:grid; gap:.4rem 2.6rem; align-items:baseline;
  grid-template-columns:1fr;
}

.trust-score{
  margin:0;
  font-family:"Cormorant Garamond", ui-serif, Georgia, serif;
  font-size:1.6rem; line-height:1;
  font-variant-numeric:lining-nums tabular-nums;
}
.trust-score strong{ font-weight:600; font-size:2.1rem; }
.trust-sterne{
  color:#e2b53f; letter-spacing:.1em; margin-right:.5rem;
  font-family:"Archivo", sans-serif; font-size:1.05rem;
}

.trust-quelle{ margin:0; font-size:.86rem; color:var(--ink-mid); }
.trust-quelle a{ color:var(--blue-soft); }

.trust-stimmen{
  list-style:none; margin:1.4rem 0 0; padding:0;
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  font-size:.9rem; line-height:1.55; color:var(--ink-mid);
}
.trust-stimmen li{
  padding-left:1rem;
  border-left:2px solid var(--line-2);
}

@media (min-width:860px){
  .trust-inner{ grid-template-columns:auto 1fr; }
  .trust-stimmen{ grid-column:1 / -1; margin-top:1.8rem; }
}

/* ============================================================
   Buchungs-Panel — ersetzt den frueheren leeren Platzhalterkasten.
   Zwei Spalten: links die Fakten, rechts die Handlung. Damit ist der
   wichtigste Bereich der Seite kein Loch mehr, sondern beantwortet
   die Fragen, die vor dem Klick offen sind.
   ============================================================ */

.booking-panel{
  display:grid; gap:0;
  grid-template-columns:1fr;
}

.booking-info,
.booking-cta{ padding:clamp(26px,3.2vw,40px); }

.booking-info h3{
  margin:0 0 1.4rem;
  font-size:.72rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--blue-soft);
}

.booking-fakten{ margin:0; }
.booking-fakten > div{
  display:grid; grid-template-columns:9.5rem 1fr; gap:1rem;
  padding:.72rem 0;
  border-top:1px solid var(--line);
  font-size:.92rem;
}
.booking-fakten > div:first-child{ border-top:0; padding-top:0; }
.booking-fakten dt{ color:var(--ink-dim); }
.booking-fakten dd{ margin:0; color:var(--ink-mid); }
.booking-fakten strong{
  color:var(--ink); font-weight:600;
  font-variant-numeric:lining-nums tabular-nums;
}

.booking-cta{
  display:flex; flex-direction:column; justify-content:center;
  gap:1.1rem;
  background:var(--surface);
  border-top:1px solid var(--line);
}
.booking-hinweis{ margin:0; font-size:.95rem; color:var(--ink-mid); }
.booking-cta .btn{ align-self:flex-start; }
.booking-klein{ margin:0; font-size:.82rem; color:var(--ink-dim); }

@media (min-width:820px){
  .booking-panel{ grid-template-columns:1.15fr .85fr; }
  .booking-cta{ border-top:0; border-left:1px solid var(--line); }
}

/* Der Dreiklang „Noch mehr Sport…" ist der Markensatz des Standort-Abschnitts
   und soll sich von den beiden Fließtexten darum abheben. */
.lead-betont{
  color:var(--ink);
  font-family:"Cormorant Garamond", ui-serif, Georgia, serif;
  font-size:clamp(1.25rem,2.2vw,1.7rem);
  line-height:1.35;
  margin-top:1.5rem;
}
.section-head.centered .lead-betont{ margin-inline:auto; }

/* ---------- Fehlerseite (404) ----------
   Als style-Attribute geschrieben wurden diese drei Regeln von der eigenen
   Content-Security-Policy verworfen (style-src 'self', kein 'unsafe-inline') —
   die Seite kam linksbuendig heraus. Inline-Styles gehoeren deshalb nirgends
   ins Markup; das faellt nur nicht auf, solange man ohne die echten Header testet. */
.fehlerseite{ text-align:center; }
.fehlerseite .lead{ margin-inline:auto; }
.fehlerseite .hero-actions{ justify-content:center; }