/*
Theme Name: Sportlounge
Description: Marketing-Theme für sportlounge.com (Design A). Sektionen liegen als Block-Patterns in der Kategorie "Sportlounge" und werden im Editor in Seiten eingefügt.
Version: 1.0
Author: Sportlounge GmbH
Text Domain: sportlounge
*/

/* ============================================================
   SPORTLOUNGE — Website Stylesheet
   Brand: Rot #CC2119 · Hellrot #E8483A · Schwarz #0D0E0F · Offwhite #F4F2F0
   Typo:  IBM Plex Sans (Display/Body) · IBM Plex Mono (Labels/Daten)
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face { font-family:'IBM Plex Sans'; src:url('fonts/IBMPlexSans-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Sans'; src:url('fonts/IBMPlexSans-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Sans'; src:url('fonts/IBMPlexSans-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Sans'; src:url('fonts/IBMPlexSans-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('fonts/IBMPlexMono-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('fonts/IBMPlexMono-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('fonts/IBMPlexMono-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

/* ---------- Tokens ---------- */
:root{
  --red:#CC2119;
  --red-bright:#E8483A;
  --ink:#0D0E0F;
  --paper:#F4F2F0;
  --white:#FFFFFF;
  --text:#2E2F32;
  --text-soft:#55565A;
  --text-faint:#8B867F;
  --hairline:#DEDAD3;
  --dark-hairline:#2A2B2E;
  --dark-soft:#9A9B9E;
  --dark-card:#161719;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --maxw:1180px;
  --pad:24px;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--sans); color:var(--text); background:var(--paper);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
::selection{ background:var(--red); color:#fff; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

/* ---------- Type atoms ---------- */
.eyebrow{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--red);
}
.dark .eyebrow{ color:var(--red-bright); }
h1,h2,h3{ color:var(--ink); font-weight:700; letter-spacing:-.015em; line-height:1.05; text-wrap:balance; }
.dark h1,.dark h2{ color:var(--paper); }
.display{ font-size:clamp(38px,6vw,72px); text-transform:uppercase; }
.h2{ font-size:clamp(28px,3.6vw,44px); text-transform:uppercase; margin-top:14px; }
.lead{ font-size:clamp(17px,1.5vw,20px); color:var(--text-soft); max-width:62ch; }
.dark .lead{ color:var(--dark-soft); }
.mono-note{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; font-family:var(--mono); font-size:13px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; padding:15px 26px;
  border:1px solid transparent; transition:background .15s,color .15s,border-color .15s;
}
.btn-red{ background:var(--red); color:#fff; }
.btn-red:hover{ background:var(--red-bright); }
.btn-ghost{ border-color:var(--dark-hairline); color:var(--paper); }
.btn-ghost:hover{ border-color:var(--paper); }
.btn-ink{ border-color:var(--ink); color:var(--ink); }
.btn-ink:hover{ background:var(--ink); color:var(--paper); }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(244,242,240,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
}
.header-in{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  display:flex; align-items:center; gap:28px; height:72px;
}
.logo img{ height:30px; width:auto; }
.main-nav{ display:flex; gap:26px; margin-left:auto; }
.main-nav a{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-soft);
  padding:6px 0; border-bottom:2px solid transparent;
}
.main-nav a:hover{ color:var(--ink); }
.main-nav a.active{ color:var(--red); border-bottom-color:var(--red); }
.lang-nav{ text-transform: uppercase; display:flex; gap:2px; border-left:1px solid var(--hairline); padding-left:20px; list-style: none;}
.lang-nav a{
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.1em;
  color:var(--text-faint); padding:5px 7px;
}
.lang-nav a:hover{ color:var(--ink); }
.lang-nav a.active{ color:#fff; background:var(--red); }
.lang-nav a[aria-current="true"] {
    color: #fff;
    background: var(--red);
}

/* ---------- Hero ---------- */
.dark{ background:var(--ink); color:var(--dark-soft); }
.hero{ padding:96px 0 0; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:64px; align-items:start; }
.hero .display{ margin:22px 0 26px; }
.hero-ctas{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }

/* product index (hero right) */
.stack-index{ border-top:1px solid var(--dark-hairline); margin-top:8px; }
.stack-index-label{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-faint); padding:14px 0 10px; }
.stack-index li{ border-bottom:1px solid var(--dark-hairline); }
.stack-index a{
  display:flex; align-items:baseline; gap:14px; padding:11px 2px;
  font-size:15px; font-weight:500; color:var(--paper); transition:color .12s;
}
.stack-index a:hover{ color:var(--red-bright); }
.stack-index .idx{ font-family:var(--mono); font-size:11px; color:var(--text-faint); width:22px; flex:none; }
.stack-index .soon{
  margin-left:auto; font-family:var(--mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--red-bright); border:1px solid var(--red-bright);
  padding:2px 7px; white-space:nowrap;
}

/* telemetry ticker — signature element */
.ticker{ border-top:1px solid var(--dark-hairline); margin-top:72px; overflow:hidden; }
.ticker-track{
  display:flex; gap:56px; width:max-content; padding:13px 0;
  animation:tick 46s linear infinite;
}
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker span{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-faint); white-space:nowrap;
}
.ticker b{ color:var(--red-bright); font-weight:500; }
@keyframes tick{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@media (prefers-reduced-motion:reduce){ .ticker-track{ animation:none; } }

/* ---------- Trust strip ---------- */
.trust{ border-bottom:1px solid var(--hairline); background:var(--paper); }
.trust-in{ padding:20px var(--pad); max-width:var(--maxw); margin:0 auto; }
.trust p{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); line-height:2.1; }
.trust b{ color:var(--text-soft); font-weight:500; }

/* ---------- Sections ---------- */
.section{ padding:96px 0; }
.section-head{ max-width:720px; margin-bottom:56px; }
.section-head .lead{ margin-top:18px; }

/* ---------- Product grid ---------- */
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pcard{
  background:var(--white); border:1px solid var(--hairline); padding:30px 28px 26px;
  display:flex; flex-direction:column; gap:14px; position:relative;
  transition:border-color .15s, transform .15s;
}
.pcard:hover{ border-color:var(--ink); transform:translateY(-2px); }
.pcard .motif{ height:56px; width:56px; color:var(--red); }
.pcard .pidx{ position:absolute; top:26px; right:26px; font-family:var(--mono); font-size:11px; color:var(--text-faint); letter-spacing:.1em; }
.pcard h3{ font-size:19px; letter-spacing:-.01em; }
.pcard .role{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--red); margin-top:-8px; }
.pcard p{ font-size:14.5px; line-height:1.55; color:var(--text-soft); flex:1; }
.pcard .more{ font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }
.pcard .more::after{ content:" →"; color:var(--red); }
.pcard:hover .more{ color:var(--red); }
.badge-soon{
  display:inline-block; font-family:var(--mono); font-size:9.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:#fff; background:var(--red);
  padding:3px 9px; margin-left:10px; vertical-align:middle;
}

/* ---------- Stats band ---------- */
.stats-band{ padding:80px 0; }
.stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:44px 32px; }
.stat .v{ font-family:var(--mono); font-weight:600; font-size:clamp(30px,3.4vw,44px); color:var(--paper); letter-spacing:-.01em; }
.stat .v em{ font-style:normal; color:var(--red-bright); }
.stat .k{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-faint); margin-top:10px; line-height:1.8; }
.stats-note{ margin-top:44px; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#5C5D61; }

/* ---------- Company / split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start; }
.split .bodycopy p+p{ margin-top:18px; }
.bodycopy b{ color:var(--ink); font-weight:600; }
.factlist{ border-top:1px solid var(--hairline); }
.factlist li{ display:flex; gap:20px; padding:16px 0; border-bottom:1px solid var(--hairline); }
.factlist .fk{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--red); width:150px; flex:none; padding-top:4px; }
.factlist .fv{ font-size:15px; color:var(--text-soft); }
.factlist .fv b{ color:var(--ink); }

/* ---------- References ---------- */
.ref-rows{ border-top:1px solid var(--hairline); }
.ref-row{ display:grid; grid-template-columns:220px 1fr; gap:32px; padding:26px 0; border-bottom:1px solid var(--hairline); }
.ref-row h3{ font-size:17px; text-transform:uppercase; letter-spacing:.02em; }
.ref-row .sub{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--red); margin-top:6px; }
.ref-row p{ font-size:15px; color:var(--text-soft); line-height:1.65; }
.ref-row p b{ color:var(--ink); font-weight:600; }
.ref-foot{ margin-top:26px; font-size:14px; color:var(--text-faint); }

/* ---------- Contact ---------- */
.contact-band{ padding:96px 0; }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.contact-list{ margin-top:8px; }
.contact-list li{ display:flex; gap:18px; padding:15px 0; border-bottom:1px solid var(--dark-hairline); align-items:baseline; }
.contact-list .ck{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-faint); width:110px; flex:none; }
.contact-list .cv{ font-family:var(--mono); font-size:15px; color:var(--paper); word-break:break-word; }
.contact-list a.cv:hover{ color:var(--red-bright); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); border-top:1px solid var(--dark-hairline); padding:34px 0; }
.footer-in{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.footer-in img{ height:22px; }
.footer-nav{ display:flex; gap:22px; margin-left:auto; flex-wrap:wrap; }
.footer-nav a,.footer-copy{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); }
.footer-nav a:hover{ color:var(--paper); }
.footer-copy{ width:100%; margin-top:18px; }

/* ============================================================
   PRODUCT PAGES
   ============================================================ */
.crumb{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-faint); }
.crumb a:hover{ color:var(--red); }
.product-hero{ padding:80px 0 64px; border-bottom:1px solid var(--hairline); background:var(--white); }
.product-hero-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:64px; align-items:center; }
.product-hero .display{ font-size:clamp(34px,4.6vw,58px); margin:20px 0 18px; }
.product-hero .lead{ max-width:56ch; }
.product-hero .motif{ width:min(260px,60%); color:var(--red); margin:0 auto; }
.price-tag{ margin-top:26px; font-family:var(--mono); font-size:14px; color:var(--ink); }
.price-tag b{ font-size:22px; font-weight:600; color:var(--red); }

.feature-rows{ border-top:1px solid var(--hairline); }
.feature-row{ display:grid; grid-template-columns:280px 1fr; gap:32px; padding:26px 0; border-bottom:1px solid var(--hairline); }
.feature-row h3{ font-size:16px; }
.feature-row .fno{ font-family:var(--mono); font-size:11px; color:var(--red); letter-spacing:.14em; display:block; margin-bottom:8px; }
.feature-row p{ font-size:15px; color:var(--text-soft); }

.shot-placeholder{
  border:1px solid var(--hairline); background:var(--white);
  background-image:repeating-linear-gradient(-45deg,transparent 0 14px,#EFECE8 14px 15px);
  aspect-ratio:16/9; display:flex; align-items:center; justify-content:center;
  margin-top:56px;
}
.shot-placeholder span{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-faint); background:var(--white); border:1px solid var(--hairline); padding:10px 18px;
}

.inuse{ background:var(--white); border:1px solid var(--hairline); padding:30px 32px; margin-top:56px; }
.inuse .eyebrow{ margin-bottom:12px; }
.inuse p{ font-size:15.5px; color:var(--text-soft); }
.inuse p b{ color:var(--ink); }

.cta-band{ padding:80px 0; }
.cta-band .h2{ margin-bottom:14px; }
.cta-band .lead{ margin-bottom:34px; }

.prodnav{ display:flex; justify-content:space-between; gap:24px; padding:26px 0; border-top:1px solid var(--hairline); }
.prodnav a{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-soft); }
.prodnav a:hover{ color:var(--red); }

/* ---------- Legal ---------- */
.legal{ padding:80px 0; max-width:820px; }
.legal h1{ font-size:clamp(30px,4vw,44px); text-transform:uppercase; margin-bottom:36px; }
.legal h2{ font-size:19px; margin:36px 0 12px; }
.legal p, .legal li{ font-size:15.5px; color:var(--text-soft); margin-bottom:10px; }
.legal .todo{ background:#FBE9E8; border:1px solid var(--red); padding:14px 18px; font-family:var(--mono); font-size:12.5px; color:var(--red); margin:8px 0 18px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1020px){
  .product-grid{ grid-template-columns:repeat(2,1fr); }
  .hero-grid{ grid-template-columns:1fr; gap:56px; }
  .split{ grid-template-columns:1fr; gap:48px; }
  .contact-grid{ grid-template-columns:1fr; gap:40px; }
  .product-hero-grid{ grid-template-columns:1fr; gap:40px; }
  .product-hero .motif{ margin:0; width:180px; }
}
@media (max-width:720px){
  body{ font-size:16px; }
  .header-in{ height:auto; flex-wrap:wrap; padding-top:14px; padding-bottom:12px; gap:14px; }
  .main-nav{ order:3; width:100%; margin-left:0; overflow-x:auto; gap:20px; padding-bottom:2px; }
  .lang-nav{ margin-left:auto; }
  .section{ padding:64px 0; }
  .hero{ padding-top:64px; }
  .product-grid{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); gap:36px 20px; }
  .ref-row{ grid-template-columns:1fr; gap:10px; padding:22px 0; }
  .feature-row{ grid-template-columns:1fr; gap:8px; padding:22px 0; }
  .ticker{ margin-top:48px; }
  .hero-ctas .btn{ width:100%; text-align:center; }
}

/* ---------- Login button (header) ---------- */
.btn-login{
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; background:var(--red); color:#fff; padding:9px 16px;
  margin-left:16px; white-space:nowrap; transition:background .15s;
}
.btn-login:hover{ background:var(--red-bright); }
@media (max-width:720px){ .btn-login{ margin-left:8px; padding:8px 12px; } }

/* ---------- Product index: role labels ---------- */
.stack-index .irole{
  margin-left:auto; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-faint); text-align:right;
}
.stack-index a:hover .irole{ color:var(--dark-soft); }
.stack-index .soon{ margin-left:12px; flex:none; }
@media (max-width:720px){ .stack-index .irole{ display:none; } }

/* ---------- Screenshot gallery ---------- */
.gallery{ margin-top:56px; }
.gallery .shot-placeholder{ margin-top:0; }
.g-slide{ display:none; margin:0; }
.g-slide.is-active{ display:block; }
.g-thumbs{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.g-thumb{
  width:72px; height:44px; border:1px solid var(--hairline); cursor:pointer;
  background:var(--white); background-image:repeating-linear-gradient(-45deg,transparent 0 8px,#EFECE8 8px 9px);
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--text-faint);
  display:grid; place-items:center; padding:0; transition:border-color .12s,color .12s;
}
.g-thumb:hover{ border-color:var(--ink); color:var(--ink); }
.g-thumb.is-active{ border-color:var(--red); color:var(--red); box-shadow:inset 0 0 0 1px var(--red); }

/* Polylang language switcher: compact, list-free and design-matched */
.lang-nav{ align-items:center; margin:0; }
.lang-nav a{ text-decoration:none; line-height:1; }
.lang-nav a.active,.lang-nav a[aria-current="true"]{ color:#fff; background:var(--red); }