:root{
    --bg:#0B1E13; --bg2:#0A1B11; --card:#11291B; --card2:#102721; --card3:#0E2417;
    --border:#1C3524; --border2:#2A4832; --border3:#20402A;
    --text:#F3EEE3; --muted:#AEBBA6; --muted2:#7E8C72;
    --lime:#D6F24B; --lime-hi:#E6FF7A;
    --teal:#5FB8AE;
    --purple:#967EE1;
    --tennis-orange:#E3A37E;
    --tennis-blue:#64A1DD;
    --danger:#C4573A;
    --light-bg:#F3EEE3; --light-text:#0B1E13; --light-muted:#4C5A45; --light-muted2:#8A8778;
    --light-border:#D5D2C8; --light-card:#FFFDF7; --light-badge:#EAE7DD;
    --serif:'Instrument Serif',Georgia,serif;
    --sans:'Archivo',Helvetica,sans-serif;
    --narrow:'Archivo Narrow','Archivo',Helvetica,sans-serif;
    --mono:'JetBrains Mono',monospace;
  }
  *{ box-sizing:border-box; }
  body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
  a{ color:var(--lime); text-decoration:none; }
  a:hover{ color:var(--lime-hi); }
  img{ max-width:100%; display:block; }
  button{ font-family:inherit; }
  h1,h2,h3,p{ margin:0; }

  .wrap{ max-width:1240px; margin:0 auto; padding-left:40px; padding-right:40px; }
  .section{ padding:104px 0; }
  .section-inner{ display:flex; flex-direction:column; gap:56px; }
  .light{ background:var(--light-bg); color:var(--light-text); }

  .kicker{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted2); }
  .kicker-narrow{ font-family:var(--narrow); font-weight:600; font-size:13px; letter-spacing:.2em; text-transform:uppercase; }
  h2.h-serif{ font-family:var(--serif); font-weight:400; font-size:clamp(38px,4.4vw,56px); line-height:1.03; letter-spacing:-.02em; }
  h2.h-serif-sm{ font-family:var(--serif); font-weight:400; font-size:clamp(34px,3.6vw,44px); line-height:1.06; letter-spacing:-.02em; }
  .sub{ font-size:18px; line-height:1.65; color:var(--muted); max-width:720px; }
  .light .sub{ color:var(--light-muted); }
  em.i{ font-style:italic; color:var(--lime); }
  .light em.i{ font-style:italic; color:var(--light-text); }
  .head{ display:flex; flex-direction:column; gap:18px; max-width:720px; }

  [data-reveal]{ opacity:0; }
  [data-reveal].mt-in{ animation:mt-rise .8s cubic-bezier(.2,.7,.2,1) forwards; }
  @keyframes mt-rise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
  @media (prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1; animation:none; } }

  /* ---------- announce bar ---------- */
  .announce{ background:#0F2B1B; border-bottom:1px solid var(--border); color:var(--text); display:flex; justify-content:center; align-items:center; gap:14px; padding:8px 24px; font-size:12.5px; font-weight:500; letter-spacing:.01em; text-align:center; flex-wrap:wrap; }
  .announce-label{ display:inline-flex; align-items:center; gap:9px; font-family:var(--narrow); font-weight:600; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; }
  .announce-dot{ width:5px; height:5px; border-radius:999px; background:var(--lime); display:inline-block; }
  .announce a{ font-family:var(--narrow); font-weight:700; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; }

  /* ---------- header ---------- */
  header{ position:sticky; top:0; z-index:80; backdrop-filter:blur(18px) saturate(140%); background:rgba(9,25,16,.78); border-bottom:1px solid rgba(28,53,36,.9); transition:box-shadow .3s ease, background .3s ease; }
  header.mt-compact{ box-shadow:0 14px 34px -28px rgba(0,0,0,.95); background:rgba(9,25,16,.92); }
  .nav-row{ max-width:1240px; margin:0 auto; padding:12px 40px; display:flex; align-items:center; gap:16px; transition:padding .3s ease; }
  header.mt-compact .nav-row{ padding-top:7px; padding-bottom:7px; }
  .brand{ display:flex; align-items:baseline; gap:7px; color:var(--text); flex:0 0 auto; font-family:var(--narrow); font-weight:700; font-size:19px; letter-spacing:.01em; text-transform:uppercase; }
  .brand span.hi{ color:var(--lime); }
  .mt-nav{ display:flex; align-items:center; gap:2px; margin-left:14px; margin-right:auto; flex:0 0 auto; font-family:var(--narrow); font-weight:600; font-size:13.5px; letter-spacing:.1em; text-transform:uppercase; }
  .mt-nav > a{ white-space:nowrap; position:relative; color:var(--muted); padding:8px 12px; border-radius:9px; transition:background .2s ease, color .2s ease; }
  .mt-nav > a:hover{ background:rgba(214,242,75,.1); color:var(--text); }
  .mt-nav > a.mt-active{ color:var(--text); background:rgba(214,242,75,.08); box-shadow:inset 0 0 0 1px rgba(214,242,75,.45); }
  .mt-burger{ display:none; position:relative; margin-right:auto; }
  .burger-btn{ display:inline-flex; align-items:center; gap:8px; background:transparent; border:1px solid var(--border2); color:var(--text); font-size:14px; font-weight:500; border-radius:10px; padding:8px 14px; cursor:pointer; transition:border-color .2s ease, background .2s ease; }
  .burger-btn.open{ background:rgba(214,242,75,.08); border-color:var(--lime); }
  .menu-panel{ position:absolute; top:calc(100% + 12px); left:0; width:212px; display:none; flex-direction:column; background:rgba(11,30,19,.97); backdrop-filter:blur(18px); border:1px solid var(--border); border-radius:18px; padding:10px; box-shadow:0 30px 60px -30px rgba(0,0,0,.9); z-index:60; }
  .menu-panel.open{ display:flex; }
  .menu-panel a{ font-size:15px; color:var(--muted); padding:10px 10px; border-radius:12px; }
  .menu-panel a:hover{ background:rgba(214,242,75,.08); color:var(--text); }
  .nav-actions{ display:flex; align-items:center; gap:10px; margin-left:auto; flex:0 0 auto; }
  .nav-cta{ font-size:14px; font-weight:600; color:var(--bg); background:var(--lime); border-radius:10px; padding:10px 18px; margin-right:4px; font-family:var(--narrow); font-weight:700; letter-spacing:.08em; text-transform:uppercase; transition:background .2s ease, transform .2s ease; box-shadow:0 10px 26px -16px rgba(214,242,75,.9); white-space:nowrap; }
  .nav-cta:hover{ background:var(--lime-hi); transform:translateY(-1px); color:var(--bg); }
  .icon-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; background:transparent; border:1px solid var(--border2); color:var(--text); border-radius:10px; cursor:pointer; transition:border-color .2s ease, background .2s ease; }
  .icon-btn:hover{ border-color:var(--lime); background:rgba(214,242,75,.08); }
  .cart-badge{ display:none; align-items:center; justify-content:center; position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:var(--lime); color:var(--bg); font-size:10.5px; font-weight:700; font-family:var(--mono); border:2px solid #0C1F14; box-sizing:content-box; }
  .divider-v{ width:1px; height:22px; background:var(--border); }
  .account-link{ display:inline-flex; align-items:center; gap:9px; background:transparent; border:1px solid var(--border2); color:var(--text); font-size:14px; font-weight:500; border-radius:10px; padding:5px 12px 5px 6px; transition:border-color .2s ease, background .2s ease; }
  .account-link:hover{ border-color:var(--lime); background:rgba(214,242,75,.08); color:var(--text); }
  .account-badge{ display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:7px; background:rgba(214,242,75,.16); color:var(--lime); font-size:13px; }

  /* ---------- buttons ---------- */
  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; font-size:15.5px; font-weight:600; padding:16px 30px; cursor:pointer; border:none; transition:transform .2s ease, background .2s ease, border-color .2s ease; text-align:center; }
  .btn-lime{ background:var(--lime); color:var(--bg); box-shadow:0 12px 34px -18px rgba(214,242,75,.75); }
  .btn-lime:hover{ background:var(--lime-hi); transform:translateY(-2px); color:var(--bg); }
  .btn-outline{ border:1px solid var(--border2); color:var(--text); background:transparent; font-weight:500; }
  .btn-outline:hover{ border-color:#41704C; transform:translateY(-2px); color:var(--text); }
  .btn-teal{ background:var(--teal); color:var(--bg); font-family:var(--narrow); font-weight:700; font-size:14px; letter-spacing:.1em; text-transform:uppercase; border-radius:10px; padding:14px 24px; }
  .btn-teal:hover{ transform:translateY(-2px); color:var(--bg); }
  .btn-dark-outline{ font-family:inherit; font-size:15px; font-weight:600; color:var(--light-text); background:transparent; border:1px solid var(--light-text); border-radius:999px; padding:14px 20px; cursor:pointer; transition:background .2s ease, color .2s ease; }
  .btn-dark-outline:hover{ background:var(--light-text); color:var(--light-bg); }
  .btn-lime-solid{ font-family:inherit; font-size:15px; font-weight:600; color:var(--bg); background:var(--lime); border:none; border-radius:999px; padding:14px 20px; cursor:pointer; transition:background .2s ease, transform .2s ease; }
  .btn-lime-solid:hover{ background:var(--lime-hi); transform:translateY(-2px); }
  .pill-outline{ font-size:14px; font-weight:600; color:var(--light-text); border:1px solid var(--light-text); border-radius:999px; padding:9px 16px; background:transparent; cursor:pointer; }
  .pill-outline:hover{ background:var(--light-text); color:var(--light-bg); }

  /* ---------- hero ---------- */
  .hero{ position:relative; overflow:hidden; }
  .hero-glow{ position:absolute; top:-320px; left:50%; transform:translateX(-60%); width:1100px; height:700px; background:radial-gradient(ellipse at center,rgba(214,242,75,.14),rgba(214,242,75,0) 65%); pointer-events:none; }
  .hero-grid{ position:relative; max-width:1240px; margin:0 auto; padding:120px 40px 104px; display:grid; grid-template-columns:1.05fr .95fr; gap:80px; align-items:center; }
  .eyebrow{ display:inline-flex; align-items:center; gap:9px; align-self:flex-start; font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--lime); border:1px solid rgba(214,242,75,.4); border-radius:999px; padding:7px 15px 7px 12px; }
  h1.hero-h1{ margin:0; font-family:var(--serif); font-weight:400; font-size:clamp(52px,7vw,92px); line-height:.95; letter-spacing:-.025em; color:var(--text); }
  .hero-lead{ margin:0; font-size:19px; line-height:1.65; color:var(--muted); max-width:560px; }
  .hero-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .hero-micro{ font-family:var(--mono); font-size:12.5px; color:var(--muted2); letter-spacing:.02em; }
  .hero-text{ display:flex; flex-direction:column; gap:32px; }
  .dash-card{ border:1px solid var(--border); border-radius:28px; background:linear-gradient(180deg,var(--card),var(--bg2)); padding:28px; display:flex; flex-direction:column; gap:22px; box-shadow:0 40px 80px -40px rgba(0,0,0,.9); }
  .dash-row{ display:flex; align-items:center; justify-content:space-between; }
  .dash-stats{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .dash-stat{ border:1px solid var(--border); border-radius:18px; padding:20px; display:flex; flex-direction:column; gap:8px; }
  .dash-label{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; color:var(--muted2); }
  .dash-val{ font-size:34px; font-weight:700; letter-spacing:-.03em; color:var(--text); }
  .dash-chart{ border:1px solid var(--border); border-radius:18px; padding:20px; display:flex; flex-direction:column; gap:14px; }
  .dash-bars{ display:flex; align-items:flex-end; gap:7px; height:74px; }
  .dash-bars span{ flex:1; border-radius:4px; }
  .dash-last{ border-top:1px solid var(--border); padding-top:18px; display:flex; align-items:center; justify-content:space-between; }

  /* ---------- trust bar ---------- */
  .trust{ background:var(--lime); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .trust-row{ max-width:1240px; margin:0 auto; padding:26px 40px; display:flex; flex-wrap:wrap; gap:40px; align-items:center; justify-content:space-between; font-size:14px; color:#123020; }
  .trust-row strong{ color:#08150E; font-weight:600; }

  /* ---------- sport cards ---------- */
  .mt-two{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  .sport-card{ border:1px solid var(--border); border-radius:24px; padding:40px; display:flex; flex-direction:column; gap:20px; background:linear-gradient(180deg,var(--card),var(--bg)); transition:border-color .25s ease, transform .25s ease; }
  .sport-card:hover{ border-color:rgba(214,242,75,.4); transform:translateY(-3px); }
  .sport-card.padel{ background:linear-gradient(180deg,var(--card2),var(--bg)); }
  .sport-card.padel:hover{ border-color:rgba(95,184,174,.5); }
  .sport-tag{ font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--lime); }
  .sport-card.padel .sport-tag{ color:var(--teal); }
  .sport-card h3{ font-family:var(--serif); font-weight:400; font-size:34px; line-height:1.1; color:var(--text); }
  .sport-card p{ font-size:17px; line-height:1.6; color:var(--muted); }
  .sport-card a{ font-size:15px; font-weight:600; margin-top:6px; }
  .sport-card.padel a{ color:var(--teal); }

  /* ---------- feature grid (light) ---------- */
  .mt-four{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--light-border); border-top:1px solid var(--light-border); border-bottom:1px solid var(--light-border); }
  .feature-cell{ background:var(--light-bg); padding:36px 28px 40px; display:flex; flex-direction:column; gap:14px; }
  .feature-num{ font-family:var(--mono); font-size:12px; color:var(--light-muted2); }
  .feature-cell h3{ font-size:20px; font-weight:600; letter-spacing:-.01em; }
  .feature-cell p{ font-size:16px; line-height:1.6; color:var(--light-muted); }

  /* ---------- numbered steps (tennis/padel pages) ---------- */
  .mt-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .step-cell{ border:1px solid var(--border); border-radius:24px; padding:36px 32px; display:flex; flex-direction:column; gap:16px; background:linear-gradient(180deg,var(--card),var(--bg)); }
  .step-num{ font-family:var(--mono); font-size:13px; letter-spacing:.14em; color:var(--muted2); }
  .step-cell h3{ font-family:var(--serif); font-weight:400; font-size:26px; line-height:1.15; color:var(--text); }
  .step-cell p{ font-size:16px; line-height:1.6; color:var(--muted); }

  /* ---------- product shots ---------- */
  .mt-three{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .shot-col{ display:flex; flex-direction:column; gap:18px; }
  .shot-frame{ border:1px solid var(--border); border-radius:24px; overflow:hidden; background:var(--card); aspect-ratio:0.51; display:flex; align-items:center; justify-content:center; }
  .shot-frame img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
  .shot-meta{ display:flex; flex-direction:column; gap:5px; }
  .shot-meta b{ font-size:16px; font-weight:600; color:var(--text); }
  .shot-meta small{ font-size:15px; color:var(--muted); }

  /* ---------- padel section ---------- */
  .padel-section{ border-top:1px solid var(--border); background:linear-gradient(180deg,var(--card2),var(--bg)); }
  .padel-head{ display:flex; flex-wrap:wrap; gap:40px; align-items:flex-end; justify-content:space-between; }
  .theme-toggle{ display:flex; width:fit-content; align-items:center; gap:4px; background:var(--card); border:1px solid var(--border); border-radius:999px; padding:5px; margin:28px auto 24px; }
  .theme-toggle-btn{ border:none; cursor:pointer; border-radius:999px; padding:9px 18px; font-family:inherit; font-size:14px; font-weight:500; background:transparent; color:var(--muted); transition:background .2s ease, color .2s ease; }
  .theme-toggle-btn.active{ background:var(--teal); color:var(--bg); font-weight:600; }
  .theme-toggle-btn.active[data-theme="winter"]{ background:var(--purple); }
  #produkt .theme-toggle-btn.active{ background:var(--tennis-orange); }
  #produkt .theme-toggle-btn.active[data-theme="winter"]{ background:var(--tennis-blue); }
  .mt-four-img{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  .img-col{ display:flex; flex-direction:column; gap:16px; }
  .img-frame{ border:1px solid var(--border); border-radius:22px; overflow:hidden; background:var(--card); }
  .img-frame img{ width:100%; height:auto; transition:transform .5s ease; }
  .img-frame:hover img{ transform:scale(1.03); }
  .img-meta{ display:flex; flex-direction:column; gap:5px; }
  .img-meta b{ font-family:var(--narrow); font-weight:700; font-size:15px; letter-spacing:.1em; text-transform:uppercase; color:var(--text); }
  .img-meta span{ font-size:15px; line-height:1.5; color:var(--muted); }

  /* ---------- rundgang / tour ---------- */
  .mt-tour{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start; }
  .tour-tabs{ display:flex; flex-direction:column; }
  .tour-tab{ display:flex; gap:18px; align-items:flex-start; width:100%; background:transparent; border:none; border-top:1px solid var(--border); border-left:2px solid transparent; padding:24px 20px; cursor:pointer; font-family:inherit; transition:background .2s ease, border-color .2s ease; text-align:left; }
  .tour-tab.active{ background:rgba(214,242,75,.06); border-left-color:var(--lime); }
  .tour-num{ font-family:var(--mono); font-size:12px; color:#4C6B50; padding-top:4px; flex:0 0 auto; }
  .tour-tab.active .tour-num{ color:var(--lime); }
  .tour-title{ font-size:19px; font-weight:600; letter-spacing:-.01em; color:var(--muted); }
  .tour-tab.active .tour-title{ color:var(--text); }
  .tour-desc{ font-size:15px; line-height:1.5; color:var(--muted2); }
  .tour-tab.active .tour-desc{ color:var(--muted); }
  .tour-panel{ border:1px solid var(--border); border-radius:26px; background:linear-gradient(180deg,var(--card),var(--bg2)); padding:36px; display:flex; flex-direction:column; gap:26px; min-height:340px; }
  .tour-panel-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
  .tour-panel-label{ font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--lime); }
  .tour-panel-headline{ font-family:var(--serif); font-size:clamp(30px,3.2vw,40px); line-height:1.12; letter-spacing:-.02em; color:var(--text); }
  .tour-stats{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .tour-stat{ border:1px solid var(--border); border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:7px; }
  .tour-stat-label{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted2); }
  .tour-stat-val{ font-size:22px; font-weight:600; letter-spacing:-.02em; color:var(--text); }
  .tour-stat-val.hi{ color:var(--lime); }
  .tour-panel-note{ font-size:16.5px; line-height:1.6; color:var(--muted); }

  /* ---------- spielpartner ---------- */
  .sp-section{ border-top:1px solid var(--border); background:linear-gradient(180deg,var(--card3),var(--bg)); }
  .sp-head{ display:flex; flex-wrap:wrap; gap:40px; align-items:flex-end; justify-content:space-between; }
  .sp-count{ display:flex; flex-direction:column; gap:6px; text-align:right; }
  .sp-count b{ font-family:var(--serif); font-weight:400; font-size:44px; line-height:1; color:var(--lime); }
  .sp-count span{ font-size:15px; color:var(--muted2); }
  .filter-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
  .filter-label{ font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted2); margin-right:6px; }
  .filter-sep{ width:1px; height:24px; background:var(--border); margin:0 8px; }
  .chip{ border:1px solid var(--border2); background:transparent; color:var(--muted); font-family:inherit; font-size:14px; font-weight:500; border-radius:999px; padding:9px 16px; cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease; }
  .chip.active{ border-color:transparent; background:var(--lime); color:var(--bg); font-weight:600; }
  .chip.active.padel-chip{ background:var(--teal); }
  .filter-bottom{ display:flex; flex-wrap:wrap; gap:20px; align-items:flex-end; justify-content:space-between; border-top:1px solid var(--border); padding-top:28px; }
  .radius-label{ display:flex; flex-direction:column; gap:12px; flex:1; min-width:280px; max-width:420px; }
  .radius-label > span{ display:flex; justify-content:space-between; font-size:15px; color:var(--muted); }
  .radius-label b{ font-family:var(--mono); color:var(--lime); font-weight:500; }
  .radius-label input[type=range]{ width:100%; accent-color:var(--lime); background:transparent; }
  .time-chips{ display:flex; flex-wrap:wrap; gap:8px; }
  .mt-players{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .player-card{ border:1px solid var(--border); border-radius:22px; padding:26px; background:var(--bg); display:flex; flex-direction:column; gap:18px; transition:border-color .25s ease, transform .25s ease; }
  .player-card:hover{ border-color:rgba(214,242,75,.4); transform:translateY(-3px); }
  .player-top{ display:flex; align-items:center; gap:14px; }
  .player-avatar{ display:flex; align-items:center; justify-content:center; width:42px; height:42px; flex:0 0 auto; border-radius:14px; background:rgba(214,242,75,.14); color:var(--lime); font-size:14.5px; font-weight:700; letter-spacing:-.01em; }
  .player-avatar.padel{ background:rgba(95,184,174,.16); color:var(--teal); }
  .player-name-box{ display:flex; flex-direction:column; gap:3px; min-width:0; }
  .player-name-box b{ font-size:16.5px; font-weight:600; color:var(--text); }
  .player-name-box span{ font-size:14px; color:var(--muted2); }
  .player-sport{ margin-left:auto; flex:0 0 auto; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--lime); border:1px solid rgba(214,242,75,.35); border-radius:999px; padding:5px 10px; }
  .player-sport.padel{ color:var(--teal); border-color:rgba(95,184,174,.35); }
  .player-tags{ display:flex; gap:8px; flex-wrap:wrap; }
  .player-tags span{ font-family:var(--mono); font-size:12.5px; color:var(--text); border:1px solid var(--border2); border-radius:999px; padding:6px 12px; }
  .player-tags span.dim{ color:var(--muted); }
  .player-note{ font-size:15px; line-height:1.55; color:var(--muted); flex:1; }
  .player-btn{ margin-top:auto; width:100%; cursor:pointer; font-family:inherit; font-size:14.5px; font-weight:600; border-radius:999px; padding:12px 18px; border:1px solid transparent; background:var(--lime); color:var(--bg); transition:background .2s ease, color .2s ease; }
  .player-btn.padel{ background:var(--teal); }
  .player-btn.done{ cursor:default; border-color:var(--border2); background:transparent; color:var(--muted2); }
  .no-players{ border:1px dashed var(--border2); border-radius:22px; padding:44px; text-align:center; display:flex; flex-direction:column; gap:10px; }
  .no-players b{ font-size:17px; font-weight:600; color:var(--text); }
  .no-players span{ font-size:15px; color:var(--muted); }
  .mt-mitspieler{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; border-top:1px solid var(--border); padding-top:44px; }
  .mt-mitspieler > div{ flex:0 0 calc((100% - 60px) / 4); display:flex; flex-direction:column; gap:16px; }
  .disclaimer{ font-family:var(--mono); font-size:12px; color:var(--muted2); }

  /* ---------- why split / list ---------- */
  .mt-split{ display:grid; gap:80px; align-items:start; }
  .mt-split-85{ grid-template-columns:.85fr 1.15fr; }
  .mt-split-70{ grid-template-columns:.7fr 1.3fr; }
  .mt-sticky{ position:sticky; top:110px; display:flex; flex-direction:column; gap:18px; }
  .mt-sticky .quote{ font-family:var(--serif); font-size:27px; line-height:1.35; color:var(--lime); }
  .why-item{ border-top:1px solid var(--border); padding:34px 0; display:grid; grid-template-columns:auto 1fr; gap:28px; }
  .why-item:last-child{ border-bottom:1px solid var(--border); }
  .why-num{ font-family:var(--mono); font-size:12px; color:var(--lime); padding-top:5px; }
  .why-item h3{ font-size:23px; font-weight:600; letter-spacing:-.01em; color:var(--text); margin-bottom:12px; }
  .why-item p{ font-size:17px; line-height:1.65; color:var(--muted); }

  /* ---------- metrics ---------- */
  .metrics-section{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:linear-gradient(180deg,var(--card3),var(--bg)); }
  .mt-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:56px; padding-top:88px; padding-bottom:88px; }
  .mt-metrics > div{ display:flex; flex-direction:column; gap:14px; }
  .mt-metrics > div:not(:first-child){ border-left:1px solid var(--border); padding-left:56px; }
  .metric-num{ font-family:var(--serif); font-size:56px; line-height:1; letter-spacing:-.03em; color:var(--text); }
  .metric-num.hi{ color:var(--lime); }
  .metric-text{ font-size:17px; line-height:1.55; color:var(--muted); }

  /* ---------- compare ---------- */
  .mt-compare{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .compare-col{ border:1px solid var(--border); border-radius:24px; padding:36px; display:flex; flex-direction:column; gap:22px; }
  .compare-col.hi{ border-color:rgba(214,242,75,.35); background:linear-gradient(180deg,#13301E,var(--bg)); position:relative; overflow:hidden; }
  .compare-glow{ position:absolute; right:-120px; top:-120px; width:340px; height:340px; border-radius:999px; background:radial-gradient(circle,rgba(214,242,75,.14),rgba(214,242,75,0) 70%); pointer-events:none; }
  .compare-label{ font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted2); position:relative; }
  .compare-col.hi .compare-label{ color:var(--lime); }
  .compare-list{ display:flex; flex-direction:column; gap:16px; position:relative; }
  .compare-list span{ font-size:16.5px; line-height:1.55; color:var(--muted2); border-bottom:1px solid var(--border); padding-bottom:16px; }
  .compare-list span:last-child{ border-bottom:none; padding-bottom:0; }
  .compare-col.hi .compare-list span{ color:var(--text); border-bottom-color:var(--border3); }
  .compare-col.hi .compare-list span:last-child{ border-bottom:none; }

  /* ---------- video ---------- */
  .video-frame{ display:block; border:1px solid var(--border); border-radius:26px; overflow:hidden; background:linear-gradient(160deg,#123020,var(--bg2)); position:relative; aspect-ratio:16/9; transition:border-color .25s ease; }
  .video-frame:hover{ border-color:rgba(214,242,75,.45); }
  .video-frame video{ width:100%; height:100%; object-fit:cover; background:#000; display:block; }

  /* ---------- pricing ---------- */
  .trial-card{ border:1px solid var(--light-border); border-radius:20px; padding:24px 28px; display:flex; flex-direction:column; gap:12px; max-width:400px; background:var(--light-badge); }
  .trial-card b{ font-size:16px; font-weight:600; }
  .trial-card p{ font-size:15px; line-height:1.6; color:var(--light-muted); }
  .period-tabs{ display:inline-flex; align-items:center; gap:4px; background:var(--light-badge); border:1px solid var(--light-border); border-radius:999px; padding:5px; }
  .period-tab{ display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer; border-radius:999px; padding:11px 20px; font-family:inherit; font-size:15px; font-weight:500; background:transparent; color:var(--light-muted); transition:background .2s ease, color .2s ease; }
  .period-tab.active{ background:var(--light-text); color:var(--light-bg); font-weight:600; box-shadow:0 6px 18px -10px rgba(11,30,19,.8); }
  .save-pill{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; background:var(--lime); color:var(--bg); border-radius:999px; padding:3px 7px; }
  .price-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .price-card{ background:var(--light-card); border:1px solid var(--light-border); border-radius:24px; padding:34px; display:flex; flex-direction:column; gap:26px; }
  .price-card.dark{ background:var(--bg); color:var(--text); position:relative; overflow:hidden; border:none; }
  .price-glow{ position:absolute; right:-120px; top:-120px; width:320px; height:320px; border-radius:999px; background:var(--lime); opacity:.10; }
  .price-title{ display:flex; flex-direction:column; gap:6px; position:relative; }
  .price-title span:first-child{ font-size:19px; font-weight:600; }
  .price-title span:last-child{ font-size:15px; color:var(--light-muted); }
  .price-card.dark .price-title span:last-child{ color:var(--lime); }
  .price-num-row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; border-bottom:1px solid #E5E1D6; padding-bottom:22px; position:relative; }
  .price-card.dark .price-num-row{ border-bottom-color:var(--border3); flex-direction:column; align-items:flex-start; gap:8px; }
  .price-big{ font-family:var(--serif); font-size:clamp(38px,3.6vw,52px); line-height:1.14; letter-spacing:-.02em; white-space:nowrap; }
  .price-card.dark .price-big{ color:var(--lime); }
  .price-per{ font-size:15px; color:var(--light-muted); }
  .price-card.dark .price-per{ color:var(--muted); }
  .price-full{ font-size:14px; color:var(--muted2); position:relative; }
  .price-feats{ flex:1; display:flex; flex-direction:column; gap:9px; font-size:15px; color:var(--light-muted); position:relative; }
  .price-card.dark .price-feats{ color:var(--muted); }
  .mt-trust{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--light-border); border-top:1px solid var(--light-border); border-bottom:1px solid var(--light-border); }
  .mt-trust > div{ background:var(--light-bg); display:flex; flex-direction:column; gap:7px; padding:24px; }
  .mt-trust > div:nth-child(4n+1){ padding-left:0; }
  .mt-trust > div:nth-child(4n){ padding-right:0; }
  .mt-trust b{ font-size:15.5px; font-weight:600; }
  .mt-trust span{ font-size:14.5px; line-height:1.5; color:var(--light-muted); }
  .vat-note{ font-family:var(--mono); font-size:12px; line-height:1.6; color:var(--light-muted2); }

  /* ---------- faq ---------- */
  .faq-item{ border-top:1px solid var(--border); padding:28px 0; }
  .faq-item:last-child{ border-bottom:1px solid var(--border); }
  .faq-q{ display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; background:transparent; border:none; cursor:pointer; text-align:left; padding:0; font-family:inherit; }
  .faq-q h3{ font-size:19px; font-weight:600; color:var(--text); }
  .faq-chevron{ flex:0 0 auto; color:var(--muted2); transition:transform .2s ease; }
  .faq-item.open .faq-chevron{ transform:rotate(180deg); }
  .faq-a{ font-size:16.5px; line-height:1.65; color:var(--muted); overflow:hidden; max-height:0; transition:max-height .3s ease, padding-top .3s ease; }
  .faq-item.open .faq-a{ max-height:220px; padding-top:14px; }

  /* ---------- final cta ---------- */
  .cta-box{ border:1px solid var(--border); border-radius:32px; background:linear-gradient(140deg,#123020,var(--bg)); padding:80px; display:flex; flex-wrap:wrap; gap:40px; align-items:center; justify-content:space-between; position:relative; overflow:hidden; }
  .cta-grid{ position:absolute; inset:0; background:linear-gradient(var(--border) 1px,transparent 1px) 0 0/100% 88px, linear-gradient(90deg,var(--border) 1px,transparent 1px) 0 0/88px 100%; opacity:.45; pointer-events:none; }
  .cta-glow{ position:absolute; right:-140px; bottom:-180px; width:520px; height:520px; border-radius:999px; background:radial-gradient(circle,rgba(214,242,75,.16),rgba(214,242,75,0) 70%); pointer-events:none; }
  .cta-left{ display:flex; flex-direction:column; gap:16px; max-width:620px; position:relative; }
  .cta-left h2{ font-family:var(--serif); font-weight:400; font-size:clamp(40px,5vw,62px); line-height:1; letter-spacing:-.025em; color:var(--text); }
  .cta-left p{ font-size:18px; line-height:1.6; color:var(--muted); }
  .cta-right{ display:flex; flex-direction:column; gap:14px; position:relative; align-items:center; }
  .cta-right .btn-lime{ padding:17px 34px; font-size:16px; box-shadow:0 14px 40px -20px rgba(214,242,75,.75); }
  .cta-video-link{ text-align:center; font-size:15px; color:var(--muted); background:transparent; border:none; cursor:pointer; font-family:inherit; }
  .cta-video-link:hover{ color:var(--lime-hi); }

  /* ---------- cart drawer ---------- */
  .scrim{ position:fixed; inset:0; background:rgba(4,12,7,.6); z-index:120; backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .3s ease; }
  .scrim.open{ opacity:1; pointer-events:auto; }
  .cart-drawer{ position:fixed; top:0; right:0; bottom:0; width:420px; max-width:92vw; background:var(--bg); border-left:1px solid var(--border); z-index:130; display:flex; flex-direction:column; transform:translateX(105%); transition:transform .35s cubic-bezier(.2,.7,.2,1); box-shadow:-40px 0 80px -40px rgba(0,0,0,.8); }
  .cart-drawer.open{ transform:none; }
  .cart-head{ display:flex; align-items:center; justify-content:space-between; padding:26px 28px; border-bottom:1px solid var(--border); }
  .cart-head span{ font-size:17px; font-weight:600; color:var(--text); }
  .cart-close{ background:transparent; border:none; color:var(--muted); font-size:22px; line-height:1; cursor:pointer; padding:4px 8px; }
  .cart-close:hover{ color:var(--text); }
  .cart-body{ flex:1; overflow-y:auto; padding:24px 28px; display:flex; flex-direction:column; gap:14px; }
  .cart-empty{ display:flex; flex-direction:column; gap:10px; padding:32px 0; }
  .cart-empty b{ font-size:16px; font-weight:600; color:var(--text); }
  .cart-empty p{ font-size:15px; line-height:1.6; color:var(--muted); }
  .cart-empty a{ align-self:flex-start; margin-top:6px; font-size:14px; font-weight:600; color:var(--bg); background:var(--lime); border-radius:999px; padding:10px 18px; }
  .cart-line{ border:1px solid var(--border); border-radius:18px; padding:20px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
  .cart-line-main{ display:flex; flex-direction:column; gap:5px; }
  .cart-line-name{ font-size:16px; font-weight:600; color:var(--text); }
  .cart-line-price{ font-size:14.5px; color:var(--muted2); font-family:var(--mono); }
  .cart-line-actions{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
  .cart-item-buy{ font-size:13.5px; font-weight:600; color:var(--bg); background:var(--lime); border-radius:999px; padding:8px 14px; white-space:nowrap; }
  .cart-item-buy:hover{ background:var(--lime-hi); color:var(--bg); }
  .cart-item-remove{ background:transparent; border:none; padding:0; font-family:inherit; font-size:13.5px; color:var(--muted); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
  .cart-item-remove:hover{ color:var(--lime); }
  .combo-hint{ margin-top:2px; padding:12px 14px; background:var(--card); border:1px solid var(--lime); border-radius:8px; font-size:13px; color:var(--muted); }
  .combo-hint a{ color:var(--lime); }
  .consent-row{ display:flex; align-items:flex-start; gap:8px; padding:0 28px; margin-top:6px; font-size:12px; color:var(--muted2); line-height:1.4; cursor:pointer; }
  .consent-row input{ margin-top:2px; flex-shrink:0; }
  .legal-note{ font-size:11px; color:var(--muted2); line-height:1.4; padding:10px 28px 0; }
  .cart-foot{ border-top:1px solid var(--border); padding:24px 28px; display:flex; flex-direction:column; gap:8px; }
  .cart-total{ display:flex; align-items:baseline; justify-content:space-between; padding:14px 0 4px; }
  .cart-total span:first-child{ font-size:15px; color:var(--muted); }
  .cart-total span:last-child{ font-family:var(--serif); font-size:34px; line-height:1; color:var(--text); }
  .cart-foot-note{ font-family:var(--mono); font-size:11px; line-height:1.6; color:var(--muted2); }

  /* ---------- footer ---------- */
  footer{ border-top:1px solid var(--border); }
  .footer-row{ max-width:1240px; margin:0 auto; padding:48px 40px; display:flex; flex-wrap:wrap; gap:32px; align-items:center; justify-content:space-between; }
  .footer-brand{ display:flex; flex-direction:column; gap:8px; }
  .footer-brand-row{ display:flex; align-items:center; gap:12px; }
  .footer-logo{ width:30px; height:30px; border-radius:9px; background:var(--lime); color:var(--bg); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; }
  .footer-brand span.name{ font-size:15.5px; font-weight:600; color:var(--text); }
  .footer-brand span.tag{ font-size:14px; color:var(--muted2); }
  .footer-links{ display:flex; flex-wrap:wrap; gap:24px; font-size:14px; }
  .footer-links a{ color:var(--muted); }
  .footer-links a:hover{ color:var(--lime); }

  #toast{ display:none; position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--card); border:1px solid var(--lime); color:var(--text); font-size:13px; padding:10px 18px; border-radius:8px; z-index:400; }

  /* ---------- responsive (ported from design source) ---------- */
  @media (max-width:1080px){
    .mt-players{ grid-template-columns:1fr 1fr; }
    .mt-tour{ grid-template-columns:1fr; gap:36px; }
    .mt-mitspieler > div{ flex:0 0 calc((100% - 20px) / 2); }
    .mt-trust{ grid-template-columns:1fr 1fr; }
    .mt-trust > div{ padding:24px; }
    .mt-trust > div:nth-child(2n+1){ padding-left:0; }
    .mt-trust > div:nth-child(2n){ padding-right:0; }
    .mt-compare{ grid-template-columns:1fr; }
    .mt-metrics > div:nth-child(2n+1){ border-left:0; padding-left:0; }
    .hero-grid{ grid-template-columns:1fr; gap:56px; padding-top:80px; }
    .mt-two{ grid-template-columns:1fr; }
    .mt-three, .mt-steps{ grid-template-columns:1fr 1fr; }
    .mt-four, .mt-four-img{ grid-template-columns:1fr 1fr; }
    .mt-split{ grid-template-columns:1fr; gap:44px; }
    .mt-sticky{ position:static; }
  }
  @media (max-width:1060px){ .mt-account-label{ display:none; } }
  @media (max-width:1240px){ .mt-nav > a:nth-child(n+5){ display:none; } }
  @media (max-width:1120px){ .mt-nav{ display:none; } .mt-burger{ display:inline-flex; } }
  @media (max-width:760px){
    .mt-three, .mt-four, .mt-four-img, .mt-steps{ grid-template-columns:1fr; }
    .wrap, .mt-pad{ padding-left:24px; padding-right:24px; }
    .nav-row{ padding-left:24px; padding-right:24px; }
    .mt-players{ grid-template-columns:1fr; }
    .mt-mitspieler > div{ flex:0 0 100%; }
    .mt-metrics > div{ border-left:0; padding-left:0; }
    .cta-box{ padding:44px 28px; }
    .price-cards{ grid-template-columns:1fr; }
  }
  @media (max-width:640px){
    .nav-row{ padding-left:16px; padding-right:16px; gap:8px; }
    .nav-actions{ gap:6px; }
    .nav-cta{ display:none; }
    .divider-v{ display:none; }
    .burger-btn span{ display:none; }
    .period-tabs{ flex-wrap:wrap; justify-content:center; row-gap:6px; width:100%; }
    .period-tab{ padding:9px 14px; font-size:13.5px; gap:6px; }
    .save-pill{ font-size:10px; padding:2px 6px; }
  }

  /* =========================================================
     ACCOUNT UI — shared component set for konto.html / kuendigen.html
     (and reusable by future account-adjacent pages, e.g. kontakt.html)
     ========================================================= */

  /* ---------- page intro (utility pages: konto / kuendigen / kontakt) ---------- */
  .page-intro{ padding:64px 0 40px; }
  .acct-col{ max-width:640px; margin:0 auto 100px; }

  /* ---------- gate / login card (replaces old .onboard) ---------- */
  .onboard{ max-width:400px; margin:0 auto; text-align:center; background:linear-gradient(180deg,var(--card),var(--bg2)); border:1px solid var(--border); border-radius:28px; padding:40px 36px; box-shadow:0 30px 70px -36px rgba(0,0,0,.85); }
  .onboard .sub{ max-width:100%; font-size:15.5px; }

  /* ---------- form inputs (email/text/textarea/select) ---------- */
  .mt-input{ width:100%; background:var(--card2); border:1px solid var(--border2); border-radius:12px; color:var(--text); padding:14px 16px; font-size:15px; font-family:var(--sans); transition:border-color .2s ease, background .2s ease; }
  .mt-input::placeholder{ color:var(--muted2); }
  .mt-input:focus{ outline:none; border-color:var(--lime); }
  textarea.mt-input{ resize:vertical; line-height:1.5; }
  select.mt-input{ cursor:pointer; }
  .mt-input.code-input{ text-align:center; letter-spacing:6px; font-size:22px; font-family:var(--mono); padding:14px 10px; }
  .mt-field{ display:flex; flex-direction:column; gap:8px; margin:16px 0; text-align:left; }
  .mt-field-label{ font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted2); }

  /* ---------- status text / link-as-button ---------- */
  .status-msg{ font-size:13px; color:var(--muted); margin-top:12px; min-height:16px; line-height:1.5; }
  .status-msg.err{ color:var(--danger); }
  .link{ cursor:pointer; color:var(--lime); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
  /* .link ist fuers dunkle Standard-Design gedacht (helles Lime auf dunklem
     Grund) -- auf hellen "light"-Abschnitten (siehe kontakt.html) waere das
     kaum lesbar, deshalb hier dunkel statt hell. */
  .light .link{ color:var(--light-text); }
  .link:hover{ color:var(--lime-hi); }
  .light .link:hover{ color:var(--light-muted); }

  /* ---------- subscription / info card (replaces old .card) ---------- */
  .card{ background:linear-gradient(180deg,var(--card),var(--bg2)); border:1px solid var(--border); border-radius:24px; padding:32px; margin-bottom:20px; }
  .card.card-danger{ border-color:rgba(196,87,58,.45); }
  .card h2, .card-label{ font-family:var(--serif); font-weight:400; font-size:24px; letter-spacing:-.01em; color:var(--text); margin-bottom:18px; }
  .row{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--border); font-size:15px; }
  .row:last-of-type{ border-bottom:none; }
  .row .label{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted2); flex-shrink:0; }
  .row > span:last-child{ text-align:right; color:var(--text); min-width:0; overflow-wrap:anywhere; }
  .actions{ display:flex; flex-direction:column; gap:10px; margin-top:20px; }
  .actions .btn, .actions .btn-outline, .actions .btn-danger{ width:100%; }

  /* ---------- status badges (tinted pills) ---------- */
  .badge{ display:inline-flex; align-items:center; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:6px 13px; border-radius:999px; }
  .badge.active{ background:rgba(214,242,75,.14); color:var(--lime); }
  .badge.cancelled{ background:rgba(196,87,58,.14); color:var(--danger); }
  .badge.none{ background:var(--card2); color:var(--muted2); }

  /* ---------- danger button (built from --danger, mirrors .btn-teal from --teal) ---------- */
  .btn-danger{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; font-size:15.5px; font-weight:600; padding:16px 30px; cursor:pointer; border:1px solid var(--danger); color:var(--danger); background:transparent; transition:transform .2s ease, background .2s ease, border-color .2s ease; text-align:center; }
  .btn-danger:hover{ background:rgba(196,87,58,.12); transform:translateY(-2px); color:var(--danger); }
  .btn:disabled, .btn-outline:disabled, .btn-danger:disabled{ opacity:.4; cursor:not-allowed; transform:none; }

  /* ---------- success confirmation box ---------- */
  .success-box{ background:rgba(214,242,75,.08); border:1px solid var(--lime); border-radius:16px; padding:18px 20px; font-size:14px; line-height:1.6; color:var(--text); margin-top:16px; }
  .success-box strong{ color:var(--lime); }

  /* ---------- modal / overlay (delete account, cancel subscription) ---------- */
  .modal-overlay{ position:fixed; inset:0; background:rgba(4,12,7,.72); backdrop-filter:blur(3px); z-index:300; align-items:center; justify-content:center; padding:20px; }
  .modal-card{ background:linear-gradient(180deg,var(--card),var(--bg2)); border:1px solid var(--border); border-radius:24px; max-width:400px; width:100%; padding:30px; box-shadow:0 40px 90px -30px rgba(0,0,0,.85); max-height:88vh; overflow-y:auto; }
  .modal-card.is-danger{ border-color:rgba(196,87,58,.5); }
  .modal-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
  .modal-icon{ width:36px; height:36px; border-radius:50%; background:rgba(196,87,58,.15); color:var(--danger); display:flex; align-items:center; justify-content:center; font-family:var(--narrow); font-weight:700; font-size:18px; flex-shrink:0; }
  .modal-title{ font-family:var(--serif); font-size:22px; font-weight:400; color:var(--text); }
  .modal-title.is-danger{ color:var(--danger); }
  .modal-card p{ font-size:14px; line-height:1.6; color:var(--text); margin-bottom:12px; }
  .modal-card ul{ color:var(--muted); font-size:14px; margin:0 0 16px; padding-left:20px; line-height:1.7; }
  .modal-note{ font-size:12px; color:var(--muted2); text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:8px; }
  .modal-actions{ display:flex; gap:10px; margin-top:8px; }
  .modal-actions .btn-outline, .modal-actions .btn-danger, .modal-actions .btn-lime{ flex:1; }

  @media (max-width:520px){
    .onboard{ padding:32px 24px; }
    .card{ padding:24px; }
    .modal-card{ padding:24px; }
  }

  /* =========================================================
     LEGAL CONTENT — shared component for impressum.html / agb.html /
     datenschutz.html (long-form legal text pages)
     ========================================================= */
  .legal-content{ max-width:680px; margin:0 auto; padding:64px 0 104px; }
  .legal-content h1{ font-family:var(--serif); font-weight:400; font-size:clamp(34px,4.4vw,44px); line-height:1.08; letter-spacing:-.02em; margin:0 0 30px; max-width:100%; color:var(--text); }
  .legal-content h2{ font-family:var(--serif); font-weight:400; font-size:23px; line-height:1.25; letter-spacing:-.01em; margin:38px 0 12px; color:var(--text); }
  .legal-content h3{ font-family:var(--narrow); font-weight:700; font-size:13.5px; letter-spacing:.08em; text-transform:uppercase; margin:22px 0 8px; color:var(--muted); }
  .legal-content p, .legal-content li{ color:var(--muted); font-size:15.5px; line-height:1.75; margin-bottom:10px; }
  .legal-content ul, .legal-content ol{ padding-left:20px; margin:0 0 14px; }
  .legal-content .section-num{ color:var(--text); font-weight:600; }
  .legal-content a{ color:var(--lime); text-decoration:underline; text-underline-offset:3px; }
  .legal-content a:hover{ color:var(--lime-hi); }
  .legal-content table{ width:100%; border-collapse:collapse; margin:14px 0 22px; font-size:14.5px; }
  .legal-content td{ border-bottom:1px solid var(--border); padding:11px 8px; color:var(--muted); vertical-align:top; }
  .legal-content td:first-child{ color:var(--text); white-space:nowrap; padding-right:16px; }

  /* ---------- kontakt.html: 3-column info grid (feature-cell reused) ---------- */
  .contact-info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--light-border); border:1px solid var(--light-border); }

  @media (max-width:760px){
    /* Rechtstexte: Tabellen (z.B. Zwecke/Rechtsgrundlagen in datenschutz.html)
       als gestapelte Blöcke statt enger 2-Spalten-Tabelle, sonst quetscht sich
       die zweite Spalte auf ein paar Wörter pro Zeile zusammen. */
    .legal-content table, .legal-content tbody, .legal-content tr, .legal-content td{
      display:block; width:100%;
    }
    .legal-content tr{ border-bottom:1px solid var(--border); padding-bottom:8px; margin-bottom:10px; }
    .legal-content td{ border-bottom:none; padding:2px 0; }
    .legal-content td:first-child{ white-space:normal; font-weight:600; color:var(--text); padding-right:0; }

    .contact-info-grid{ grid-template-columns:1fr; }
  }