/* ============================================================
   tunap. — Landingpage
   Kühles Slate-System + Orange-Akzent (verfeinert)
   Design-Tokens · Layout · Komponenten · Responsive
   ============================================================ */

:root{
  /* ---- Neutrale (kühles Slate) ---- */
  --ink:#0e1524;              /* Text / Dunkelflächen */
  --ink-2:#161f31;            /* dunkle Surface */
  --ink-70:rgba(14,21,36,0.70);
  --ink-62:rgba(14,21,36,0.62);
  --ink-55:rgba(14,21,36,0.55);
  --ink-14:rgba(14,21,36,0.14);
  --ink-10:rgba(14,21,36,0.10);
  --ink-07:rgba(14,21,36,0.07);
  --ink-04:rgba(14,21,36,0.04);

  /* Text auf dunklem Grund */
  --cream:#eef1f6;
  --cream-72:rgba(238,241,246,0.72);
  --cream-60:rgba(238,241,246,0.60);
  --cream-40:rgba(238,241,246,0.40);
  --cream-10:rgba(238,241,246,0.10);
  --cream-06:rgba(238,241,246,0.06);

  /* Flächen */
  --paper:#f6f7f9;            /* Seitenhintergrund */
  --paper-2:#edf0f4;          /* abgesetzte Sektion */
  --surface:#ffffff;          /* Cards */
  --white:#fff;

  /* ---- Akzent (Orange) ---- */
  --accent:#f97316;
  --accent-deep:#ea580c;
  --accent-text:#c2410c;      /* AA-tauglich auf hell */
  --accent-08:rgba(249,115,22,0.08);
  --accent-12:rgba(249,115,22,0.12);
  --accent-focus:rgba(249,115,22,0.40);

  /* ---- Radius ---- */
  --r-sm:10px;
  --r:14px;
  --r-lg:20px;
  --r-pill:999px;

  /* ---- Shadows (kühl getönt, geschichtet) ---- */
  --sh-sm:0 1px 2px rgba(14,21,36,0.06), 0 1px 1px rgba(14,21,36,0.04);
  --sh-md:0 6px 16px -6px rgba(14,21,36,0.14), 0 2px 6px -3px rgba(14,21,36,0.08);
  --sh-lg:0 24px 48px -28px rgba(14,21,36,0.34), 0 8px 20px -12px rgba(14,21,36,0.16);
  --sh-shot:0 40px 80px -40px rgba(14,21,36,0.42), 0 12px 28px -18px rgba(14,21,36,0.18);

  --font:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---- Schrift lokal gehostet (DSGVO: kein Google-Server-Kontakt) ---- */
@font-face{
  font-family:'Inter Tight';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('assets/fonts/InterTight-latin.woff2') format('woff2');
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  background:
    radial-gradient(38% 30% at 100% 1%, rgba(37,99,235,0.06), transparent 72%),
    radial-gradient(42% 32% at 0% 15%, rgba(249,115,22,0.07), transparent 72%),
    radial-gradient(46% 40% at 90% 74%, rgba(249,115,22,0.05), transparent 72%),
    radial-gradient(42% 36% at 4% 90%, rgba(37,99,235,0.05), transparent 72%),
    var(--paper);
  background-attachment:fixed;
  color:var(--ink);
  line-height:1.6;
  letter-spacing:0.003em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;}
h1,h2,h3{margin:0;}
img{max-width:100%;}
::selection{background:var(--accent);color:var(--white);}

/* Fokus-Sichtbarkeit (Tastatur) */
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--accent-focus);border-radius:8px;}

/* ---- Keyframes ---- */
@keyframes tnDot{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(.62);opacity:.5;}}
@keyframes tnPulse{0%{box-shadow:0 0 0 0 rgba(249,115,22,0.55);}70%{box-shadow:0 0 0 8px rgba(249,115,22,0);}100%{box-shadow:0 0 0 0 rgba(249,115,22,0);}}
@keyframes tnWordDot{0%{box-shadow:0 0 0 0 rgba(249,115,22,0.5);}70%{box-shadow:0 0 0 0.5em rgba(249,115,22,0);}100%{box-shadow:0 0 0 0 rgba(249,115,22,0);}}
@keyframes tnFloat{0%,100%{transform:translate(0,0);}50%{transform:translate(24px,-30px);}}

/* Sanftes Einblenden beim Scrollen (JS setzt .is-visible) */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
.reveal.is-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
  .reveal{opacity:1;transform:none;}
}

/* ---- Punkt (Wortmarke-Akzent) ---- */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);}
.dot--pulse{margin-bottom:5px;animation:tnPulse 1.6s ease-out infinite;}
.dot--blink{width:8px;height:8px;animation:tnDot 1.4s ease-in-out infinite;}

/* ---- Buttons ---- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:inherit;font-size:15px;font-weight:600;letter-spacing:0.005em;
  padding:14px 24px;min-height:48px;border-radius:12px;border:1px solid transparent;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease;
}
.btn--accent{background:var(--accent);color:var(--white);box-shadow:0 8px 20px -10px rgba(249,115,22,0.7),inset 0 1px 0 rgba(255,255,255,0.18);}
.btn--accent:hover{background:var(--accent-deep);transform:translateY(-2px);box-shadow:0 14px 28px -12px rgba(249,115,22,0.75),inset 0 1px 0 rgba(255,255,255,0.18);}
.btn--accent:active{transform:translateY(0);}
.btn--dark{background:var(--ink);color:var(--cream);border-color:var(--ink);}
.btn--dark:hover{background:var(--ink-2);transform:translateY(-2px);box-shadow:var(--sh-md);}
.btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--ink-14);box-shadow:var(--sh-sm);}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--sh-md);}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--ink-14);}
.btn--outline:hover{border-color:var(--ink);transform:translateY(-2px);}
.btn--nav{font-size:14px;padding:9px 17px;min-height:40px;border-radius:10px;}
.btn--lg{font-size:16px;padding:16px 30px;min-height:54px;}

/* ---- Wortmarke ---- */
.wordmark{display:inline-flex;align-items:flex-end;gap:0.04em;font-weight:800;letter-spacing:-0.05em;line-height:0.9;color:var(--ink);text-decoration:none;}
.wordmark__dot{flex:none;width:0.16em;height:0.16em;border-radius:50%;background:var(--accent);margin-bottom:0.135em;animation:tnWordDot 1.6s ease-out infinite;}
.wordmark--nav{font-size:26px;}
.wordmark--hero{font-size:clamp(80px,15vw,196px);margin-top:22px;opacity:0.98;}
.wordmark--footer{font-size:26px;color:var(--cream);}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:24px;
  padding:14px 40px;
  background:rgba(246,247,249,0.82);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--ink-07);
}
.nav__links{display:none;gap:6px;margin-left:14px;}
.nav__links a{font-size:14.5px;font-weight:500;color:var(--ink-62);text-decoration:none;padding:7px 12px;border-radius:9px;transition:color .15s ease,background-color .15s ease;}
.nav__links a:hover{color:var(--ink);background:var(--ink-04);}
.nav__spacer{flex:1;}

/* Burger (mobil) */
.nav__burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:10px;border:1px solid var(--ink-14);border-radius:10px;background:var(--surface);cursor:pointer;}
.nav__burger span{display:block;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s ease,opacity .2s ease;}
.nav.is-open .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav.is-open .nav__burger span:nth-child(2){opacity:0;}
.nav.is-open .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Mobil: Links als aufklappbares Panel unter der Nav */
@media (max-width:879.98px){
  .nav{flex-wrap:wrap;}
  .nav__links{
    display:none;order:10;flex-basis:100%;flex-direction:column;gap:2px;
    margin:12px 0 4px;padding-top:12px;border-top:1px solid var(--ink-07);
  }
  .nav.is-open .nav__links{display:flex;}
  .nav__links a{font-size:16px;padding:11px 12px;}
}
@media (min-width:880px){
  .nav__links{display:flex;}
  .nav__burger{display:none;}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(48% 50% at 86% -4%, rgba(37,99,235,0.08), transparent 68%),
    radial-gradient(52% 55% at 14% 4%, rgba(249,115,22,0.10), transparent 70%),
    radial-gradient(60% 60% at 50% -8%, var(--accent-08), transparent 70%),
    linear-gradient(180deg, rgba(246,247,249,0) 0%, var(--paper) 62%, var(--surface) 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(to right, var(--ink-04) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ink-04) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(80% 60% at 50% 0%, #000 0%, transparent 72%);
          mask-image:radial-gradient(80% 60% at 50% 0%, #000 0%, transparent 72%);
}
.hero__inner{position:relative;max-width:1180px;margin:0 auto;padding:64px 40px 84px;text-align:center;}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:var(--r-pill);font-size:12.5px;font-weight:700;letter-spacing:0.02em;}
.pill--accent{background:var(--surface);color:var(--accent-text);border:1px solid var(--ink-10);box-shadow:var(--sh-sm);}
.pill--accent .dot{width:7px;height:7px;}
.hero__h1{margin:24px auto 0;max-width:720px;font-size:clamp(24px,3.4vw,36px);font-weight:700;letter-spacing:-0.03em;line-height:1.12;color:var(--ink-70);}
.hero__sub{margin:20px auto 0;max-width:640px;font-size:clamp(17px,2.2vw,20px);line-height:1.5;font-weight:500;color:var(--ink-70);}
.hero__cta{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:32px;}
.hero__facts{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 30px;margin-top:30px;font-size:13.5px;font-weight:500;color:var(--ink-55);}
.hero__facts strong{font-size:16px;font-weight:800;color:var(--ink);margin-right:5px;font-variant-numeric:tabular-nums;}
.hero__shot{position:relative;z-index:1;margin-top:60px;}

/* ============================================================
   APP-FENSTER-RAHMEN (winframe)
   ============================================================ */
.winframe{border-radius:var(--r-lg);overflow:hidden;background:var(--surface);border:1px solid var(--ink-10);box-shadow:var(--sh-shot);}
.winbar{display:flex;align-items:center;gap:8px;padding:7px 12px;background:var(--surface);border-bottom:1px solid var(--ink-07);}
.winbar__dots{display:inline-flex;gap:6px;flex:none;}
.winbar__dots i{width:9px;height:9px;border-radius:50%;}
.winbar__dots i:nth-child(1){background:#ff5f57;}
.winbar__dots i:nth-child(2){background:#febc2e;}
.winbar__dots i:nth-child(3){background:#28c840;}
.winbar__title{flex:1;text-align:center;font-size:11.5px;font-weight:600;color:var(--ink-55);letter-spacing:0.01em;margin-right:45px;}
.winframe .shot-img{border-radius:0;}

/* Screenshots (echte App-Aufnahmen, 16:9) */
.shot-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top center;background:var(--surface);}

/* ============================================================
   WERT-PFEILER
   ============================================================ */
.pillars-wrap{background:var(--surface);border-top:1px solid var(--ink-07);border-bottom:1px solid var(--ink-07);}
.pillars{max-width:1240px;margin:0 auto;padding:56px 40px;display:grid;grid-template-columns:1fr;gap:36px 0;counter-reset:pillar;}
.pillar{position:relative;display:flex;flex-direction:column;gap:12px;counter-increment:pillar;}
.pillar::after{content:"0" counter(pillar);position:absolute;top:4px;right:0;font-size:12px;font-weight:700;letter-spacing:0.06em;color:rgba(14,21,36,0.20);}
.pillar__ic{width:46px;height:46px;border-radius:13px;background:var(--accent-12);color:var(--accent-deep);display:flex;align-items:center;justify-content:center;}
.pillar__t{font-size:16.5px;font-weight:700;letter-spacing:-0.01em;color:var(--ink);}
.pillar__p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-62);}
@media (min-width:560px){.pillars{grid-template-columns:repeat(2,1fr);column-gap:44px;}}
@media (min-width:900px){
  .pillars{grid-template-columns:repeat(4,1fr);column-gap:0;}
  .pillar{padding:2px 34px;}
  .pillar::after{right:34px;}
  .pillar:not(:first-child){border-left:1px solid var(--ink-07);}
  .pillar:first-child{padding-left:0;}
  .pillar:last-child{padding-right:0;}
  .pillar:last-child::after{right:0;}
}

/* ============================================================
   ÜBERSCHRIFTEN / TEXT
   ============================================================ */
.eyebrow{font-size:12px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-deep);}
.eyebrow--dot,.eyebrow--accent{display:inline-flex;align-items:center;gap:8px;}
.eyebrow--dot .dot,.eyebrow--accent .dot{width:7px;height:7px;}
.eyebrow--accent{color:var(--accent);}
.h2{font-size:clamp(29px,4.4vw,40px);font-weight:800;letter-spacing:-0.035em;line-height:1.08;color:var(--ink);}
.h2--light{color:var(--cream);}
.lead{font-size:17px;line-height:1.6;color:var(--ink-62);}
.lead--center{margin-left:auto;margin-right:auto;}
.lead--light{color:var(--cream-72);}

/* ============================================================
   FUNKTIONEN — alternierende Reihen
   ============================================================ */
.flow-wrap{max-width:1240px;margin:0 auto;padding:92px 40px 40px;}
.flow-head{text-align:center;max-width:720px;margin:0 auto 64px;}
.flow-head .h2{margin-top:14px;}
.flow{display:flex;flex-direction:column;gap:72px;}
.flowrow{display:grid;grid-template-columns:1fr;gap:28px;align-items:center;}
.flowrow__shot{border-radius:var(--r);box-shadow:var(--sh-lg);transition:transform .2s ease,box-shadow .2s ease;}
.flowrow:hover .flowrow__shot{transform:translateY(-4px);box-shadow:var(--sh-shot);}
.flowrow__kicker{font-size:11.5px;font-weight:700;color:var(--accent-deep);letter-spacing:0.1em;text-transform:uppercase;}
.flowrow__title{margin-top:8px;font-size:clamp(21px,2.6vw,26px);font-weight:800;letter-spacing:-0.025em;line-height:1.15;color:var(--ink);}
.flowrow__p{margin:12px 0 0;font-size:15.5px;line-height:1.62;color:var(--ink-62);}
.flowrow__list{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;}
.flowrow__list li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.5;color:var(--ink-70);font-weight:500;}
.flowrow__list li::before{
  content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;
  background:var(--accent-12);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
  background-size:9px 9px;background-position:center;background-repeat:no-repeat;
}
@media (min-width:880px){
  .flowrow{grid-template-columns:7fr 5fr;gap:56px;}
  .flowrow--flip .flowrow__shot{order:2;}
  .flowrow--flip .flowrow__meta{order:1;}
}

/* ============================================================
   TURNIERMODI
   ============================================================ */
.modi-wrap{background:var(--paper-2);border-top:1px solid var(--ink-07);border-bottom:1px solid var(--ink-07);margin-top:52px;}
.modi-inner{max-width:1020px;margin:0 auto;padding:76px 40px;text-align:center;}
.modi-inner .h2{margin:12px auto 0;max-width:680px;}
.modi-inner .lead{margin:14px auto 0;max-width:600px;}
.modi{margin-top:36px;display:grid;grid-template-columns:1fr;gap:16px;text-align:left;}
.modi__card{position:relative;background:var(--surface);border:1px solid var(--ink-07);border-radius:var(--r);padding:24px;box-shadow:var(--sh-sm);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.modi__badge{position:absolute;top:16px;right:16px;font-size:10.5px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent-text);background:var(--accent-08);border:1px solid rgba(249,115,22,0.35);padding:3px 9px;border-radius:var(--r-pill);}
.modi__card:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--ink-10);}
.modi__ic{width:38px;height:38px;border-radius:10px;background:var(--ink);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.modi__t{font-size:16.5px;font-weight:700;letter-spacing:-0.01em;color:var(--ink);}
.modi__p{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--ink-62);}
@media (min-width:560px){.modi{grid-template-columns:repeat(2,1fr);}}
@media (min-width:880px){.modi{grid-template-columns:repeat(4,1fr);}}

/* ============================================================
   LIVE-DEMO
   ============================================================ */
.livedemo-wrap{background:var(--surface);scroll-margin-top:70px;}
.livedemo-inner{max-width:1180px;margin:0 auto;padding:76px 40px;text-align:center;}
.livedemo-inner .h2{margin:14px 0 0;}
.livedemo-inner .lead{margin:16px auto 0;max-width:600px;color:var(--ink-62);}
.livedemo{margin-top:38px;text-align:left;}
.livedemo__cols{display:flex;flex-wrap:wrap;align-items:flex-start;gap:24px;}
.livedemo__col{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;}
.livedemo__label{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:12px;}
.livedemo__label .dot{width:7px;height:7px;}
.livedemo__screen{aspect-ratio:8/5;container-type:size;background:#0a0d14;border-radius:8px;overflow:hidden;}

/* ---- Geräte-Gehäuse (TV + Tablet) ---- */
.device{display:flex;flex-direction:column;align-items:center;width:100%;}

/* Court-Monitor als Fernseher mit Standfuß */
.device--tv .device__frame{width:100%;padding:13px;border-radius:16px;background:linear-gradient(180deg,#222a3a 0%,#0f141d 100%);box-shadow:var(--sh-lg),inset 0 0 0 1px rgba(255,255,255,0.06);}
.device--tv .livedemo__screen{border-radius:5px;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.7);}
.device__neck{width:52px;height:20px;background:linear-gradient(180deg,#1b2130 0%,#141a25 100%);}
.device__base{width:190px;max-width:62%;height:13px;border-radius:0 0 12px 12px;background:linear-gradient(180deg,#222a3a 0%,#10151e 100%);box-shadow:0 10px 18px -10px rgba(10,13,20,0.6);}

/* Schiedsrichter-Tablet */
.device--tablet{position:relative;padding:20px;border-radius:30px;background:linear-gradient(155deg,#242c3c 0%,#111722 100%);box-shadow:var(--sh-lg),inset 0 0 0 1px rgba(255,255,255,0.06);}
.device--tablet .livedemo__screen{width:100%;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.7);}
.device__cam{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:#394252;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1);}
.livedemo__controls{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:20px;}
.livedemo__btn{flex:0 0 auto;font-size:13px;font-weight:600;padding:9px 18px;min-height:40px;border-radius:10px;border:1px solid var(--ink-14);background:var(--surface);color:var(--ink-62);cursor:pointer;font-family:inherit;transition:all .15s ease;}
.livedemo__btn:hover{border-color:var(--ink);color:var(--ink);}
.livedemo__btn.is-active{border-color:var(--ink);background:var(--ink);color:var(--cream);}

/* ============================================================
   FUNKTIONSUMFANG (Raster)
   ============================================================ */
.featgrid-wrap{background:var(--paper-2);border-top:1px solid var(--ink-07);border-bottom:1px solid var(--ink-07);}
.featgrid-inner{max-width:1240px;margin:0 auto;padding:80px 40px;}
.featgrid-head{text-align:center;max-width:600px;margin:0 auto 44px;}
.featgrid-head .h2{margin-top:14px;}
.featgrid{display:grid;grid-template-columns:1fr;gap:16px;}
.feat{background:var(--surface);border:1px solid var(--ink-07);border-radius:var(--r);padding:26px;box-shadow:var(--sh-sm);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.feat:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--ink-10);}
.feat__ic{width:40px;height:40px;border-radius:11px;background:var(--ink);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:15px;}
.feat__t{font-size:16.5px;font-weight:700;letter-spacing:-0.01em;color:var(--ink);}
.feat__p{margin:7px 0 0;font-size:14px;line-height:1.55;color:var(--ink-62);}
@media (min-width:560px){.featgrid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:860px){.featgrid{grid-template-columns:repeat(3,1fr);}}

/* ============================================================
   PILOTVEREINE
   ============================================================ */
.pilot-wrap{background:var(--surface);border-top:1px solid var(--ink-07);}
.pilot-inner{max-width:1180px;margin:0 auto;padding:84px 40px;display:grid;grid-template-columns:1fr;gap:44px;align-items:center;}
.pilot__text .h2{margin-top:14px;max-width:480px;}
.pilot__text .lead{margin:16px 0 0;max-width:520px;}
.pilot__text .btn{margin-top:28px;}
.pilot__perks{display:flex;flex-direction:column;gap:14px;}
.perk{background:var(--paper-2);border:1px solid var(--ink-07);border-radius:var(--r);padding:20px 22px;position:relative;padding-left:56px;}
.perk::before{
  content:"";position:absolute;left:22px;top:24px;width:18px;height:18px;border-radius:50%;
  background:var(--accent-12);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
  background-size:10px 10px;background-position:center;background-repeat:no-repeat;
}
.perk__t{font-size:15.5px;font-weight:700;letter-spacing:-0.01em;color:var(--ink);}
.perk__p{margin:5px 0 0;font-size:14px;line-height:1.55;color:var(--ink-62);}
@media (min-width:880px){.pilot-inner{grid-template-columns:1.1fr 1fr;gap:64px;}}

/* ============================================================
   ROADMAP
   ============================================================ */
.roadmap-wrap{
  background:
    radial-gradient(46% 60% at 88% 0%, rgba(249,115,22,0.14), transparent 68%),
    radial-gradient(40% 50% at 6% 100%, rgba(37,99,235,0.12), transparent 70%),
    linear-gradient(165deg,#0e1524 0%,#141d30 100%);
  color:var(--cream);border-top:1px solid var(--cream-06);scroll-margin-top:70px;
}
.roadmap-inner{max-width:1120px;margin:0 auto;padding:84px 40px;}
.roadmap-head{text-align:center;max-width:640px;margin:0 auto 44px;}
.roadmap-head .h2{margin-top:14px;}
.roadmap-head .lead{margin:14px auto 0;max-width:560px;}
.roadmap{display:grid;grid-template-columns:1fr;gap:16px;}
.rmap{position:relative;background:var(--cream-06);border:1px solid var(--cream-10);border-radius:var(--r);padding:26px;transition:transform .18s ease,border-color .18s ease,background-color .18s ease;}
.rmap:hover{transform:translateY(-3px);border-color:rgba(249,115,22,0.4);background:rgba(238,241,246,0.09);}
.rmap__badge{position:absolute;top:18px;right:18px;font-size:10.5px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);background:rgba(249,115,22,0.12);border:1px solid rgba(249,115,22,0.4);padding:3px 9px;border-radius:var(--r-pill);}
.rmap__ic{width:40px;height:40px;border-radius:11px;background:var(--accent);color:var(--white);display:flex;align-items:center;justify-content:center;margin-bottom:15px;box-shadow:0 8px 18px -8px rgba(249,115,22,0.7);}
.rmap__t{font-size:16.5px;font-weight:700;letter-spacing:-0.01em;color:var(--cream);padding-right:64px;}
.rmap__p{margin:7px 0 0;font-size:14px;line-height:1.55;color:var(--cream-72);}
@media (min-width:860px){.roadmap{grid-template-columns:repeat(3,1fr);}}

/* ============================================================
   FAQ
   ============================================================ */
.faq-wrap{background:var(--paper-2);border-top:1px solid var(--ink-07);border-bottom:1px solid var(--ink-07);scroll-margin-top:70px;}
.faq-inner{max-width:820px;margin:0 auto;padding:84px 40px;}
.faq-head{text-align:center;margin-bottom:40px;}
.faq-head .h2{margin-top:14px;}
.faq{display:flex;flex-direction:column;gap:12px;}
.faq__item{background:var(--surface);border:1px solid var(--ink-07);border-radius:var(--r);box-shadow:var(--sh-sm);overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease;}
.faq__item:hover{border-color:var(--ink-10);box-shadow:var(--sh-md);}
.faq__item[open]{border-color:var(--ink-10);}
.faq__q{
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;cursor:pointer;font-size:15.5px;font-weight:700;letter-spacing:-0.01em;color:var(--ink);
}
.faq__q::-webkit-details-marker{display:none;}
.faq__q::after{
  content:"";flex:none;width:22px;height:22px;border-radius:7px;background:var(--accent-12);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  background-size:12px 12px;background-position:center;background-repeat:no-repeat;
  transition:transform .2s ease;
}
.faq__item[open] .faq__q::after{transform:rotate(45deg);}
.faq__a{padding:0 22px 20px;}
.faq__a p{margin:0;font-size:14.5px;line-height:1.65;color:var(--ink-70);}
.faq__a a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px;}

/* ============================================================
   PREISE
   ============================================================ */
.pricing-wrap{background:var(--surface);scroll-margin-top:70px;}
.pricing-inner{max-width:1120px;margin:0 auto;padding:88px 40px;}
.pricing-head{text-align:center;max-width:640px;margin:0 auto;}
.pricing-head .h2{margin-top:14px;}
.pricing-head .lead{margin:14px auto 0;max-width:560px;}
.pricing-toggle{display:inline-flex;margin-top:28px;border:1px solid var(--ink-14);border-radius:var(--r-pill);overflow:hidden;background:var(--paper);padding:4px;gap:4px;}
.pricing-toggle__btn{border:none;background:transparent;color:var(--ink-55);padding:9px 20px;cursor:pointer;font-family:inherit;font-weight:700;font-size:13.5px;border-radius:var(--r-pill);transition:color .15s ease,background-color .15s ease,box-shadow .15s ease;}
.pricing-toggle__btn:hover{color:var(--ink);}
.pricing-toggle__btn.is-active{background:var(--ink);color:var(--cream);box-shadow:var(--sh-sm);}

.plans{margin-top:44px;display:grid;grid-template-columns:1fr;gap:20px;align-items:stretch;}
.plan{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--ink-10);border-radius:var(--r-lg);
  padding:30px 28px;box-shadow:var(--sh-sm);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.plan:hover{transform:translateY(-4px);box-shadow:var(--sh-md);}
.plan--featured{border-color:rgba(249,115,22,0.45);box-shadow:0 0 0 1px rgba(249,115,22,0.25),var(--sh-lg);}
.plan__badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent);color:var(--white);font-size:11.5px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;padding:5px 14px;border-radius:var(--r-pill);box-shadow:0 6px 14px -6px rgba(249,115,22,0.7);}
.plan__name{font-size:18px;font-weight:800;letter-spacing:-0.02em;color:var(--ink);}
.plan__desc{margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--ink-62);min-height:40px;}
.plan__price{margin-top:20px;display:flex;flex-direction:column;gap:3px;}
.plan__amount{font-size:38px;font-weight:800;letter-spacing:-0.04em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;}
.plan__per{font-size:12.5px;font-weight:600;color:var(--ink-55);letter-spacing:0.02em;}
.plan__list{margin:22px 0 26px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;flex:1;}
.plan__list li{position:relative;padding-left:26px;font-size:14px;line-height:1.5;color:var(--ink-70);}
.plan__list li strong{color:var(--ink);}
.plan__list li::before{
  content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;
  background:var(--accent-12);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
  background-size:9px 9px;background-position:center;background-repeat:no-repeat;
}
.plan__cta{width:100%;}
.pricing-note{margin:26px auto 0;max-width:560px;text-align:center;font-size:13px;line-height:1.6;color:var(--ink-55);}
@media (min-width:820px){.plans{grid-template-columns:repeat(3,1fr);}}

/* ---- Tarifseite (preise.html): vier Stufen + Sonderfall ---- */
@media (min-width:820px){.plans--four{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1160px){.plans--four{grid-template-columns:repeat(4,1fr);}}
.plans--four .plan{padding:26px 22px;}
.plans--four .plan__amount{font-size:32px;}
.plan__staffel{margin:12px 0 0;}
.plan__staffel summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--accent-text);list-style:none;}
.plan__staffel summary::-webkit-details-marker{display:none;}
.plan__staffel summary::after{content:" ▾";}
.plan__staffel[open] summary::after{content:" ▴";}
.plan__staffel summary:focus-visible{outline:2px solid var(--accent-focus);outline-offset:3px;border-radius:var(--r-sm);}
.plan__staffel-list{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink-62);}
.plan__staffel-list li{display:flex;justify-content:space-between;gap:12px;padding-bottom:5px;border-bottom:1px dashed var(--ink-10);}
.plan__staffel-list li:last-child{border-bottom:none;}

.pricing-extra{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;background:var(--surface);border:1px solid var(--ink-10);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:22px 26px;}
.pricing-extra__body{flex:1 1 320px;}
.pricing-extra__t{font-size:15.5px;font-weight:800;letter-spacing:-0.01em;color:var(--ink);}
.pricing-extra__p{margin:4px 0 0;font-size:14px;line-height:1.55;color:var(--ink-62);}

.cmp{margin-top:30px;}
.cmp>summary{cursor:pointer;list-style:none;font-size:14px;font-weight:700;color:var(--ink);background:var(--surface);border:1px solid var(--ink-10);border-radius:var(--r);box-shadow:var(--sh-sm);padding:14px 18px;}
.cmp>summary::-webkit-details-marker{display:none;}
.cmp>summary::after{content:" ▾";color:var(--accent-text);}
.cmp[open]>summary::after{content:" ▴";}
.cmp>summary:focus-visible{outline:2px solid var(--accent-focus);outline-offset:3px;}
.cmp__scroll{overflow-x:auto;margin-top:14px;}
.cmp table{width:100%;min-width:640px;border-collapse:collapse;background:var(--surface);border:1px solid var(--ink-10);border-radius:var(--r);font-size:13.5px;}
.cmp th,.cmp td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--ink-07);color:var(--ink-70);}
.cmp thead th{font-weight:800;color:var(--ink);background:var(--ink-04);}
.cmp tbody th{font-weight:600;color:var(--ink);}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:none;}

/* ============================================================
   KONTAKT / CTA
   ============================================================ */
.contact{
  background:linear-gradient(165deg,#0e1524 0%,#141d30 100%);
  color:var(--cream);position:relative;overflow:hidden;scroll-margin-top:70px;
}
.contact__glow{position:absolute;top:-100px;right:-60px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle at center,rgba(249,115,22,0.24),transparent 68%);pointer-events:none;animation:tnFloat 15s ease-in-out infinite;}
.contact__inner{max-width:840px;margin:0 auto;padding:92px 40px;position:relative;text-align:center;}
.contact__inner .h2{margin-top:16px;}
.contact__inner .lead{margin:18px auto 0;max-width:560px;}
.contact__cta{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:36px;}
.contact__mail{font-size:15px;font-weight:600;color:var(--cream-72);text-decoration:none;border-bottom:1px solid var(--cream-10);padding-bottom:2px;transition:color .15s ease,border-color .15s ease;}
.contact__mail:hover{color:var(--cream);border-color:var(--cream-40);}
.contact__steps{margin-top:48px;display:grid;grid-template-columns:1fr;gap:14px;text-align:left;}
.cstep{display:flex;align-items:center;gap:13px;background:var(--cream-06);border:1px solid var(--cream-10);border-radius:14px;padding:16px 20px;font-size:14px;line-height:1.5;color:var(--cream-72);}
.cstep__n{width:28px;height:28px;border-radius:9px;background:var(--accent);color:var(--white);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13.5px;flex-shrink:0;box-shadow:0 6px 14px -6px rgba(249,115,22,0.7);}
@media (min-width:760px){.contact__steps{grid-template-columns:repeat(3,1fr);}.cstep{flex-direction:column;align-items:flex-start;gap:12px;}}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink);color:var(--cream-60);border-top:1px solid var(--cream-06);}
.footer__inner{max-width:1240px;margin:0 auto;padding:52px 40px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;}
.footer__tag{margin-top:7px;font-size:13.5px;color:var(--cream-60);}
.footer__links{display:flex;gap:8px;font-size:14px;flex-wrap:wrap;}
.footer__links a{color:var(--cream-60);text-decoration:none;padding:6px 10px;border-radius:8px;transition:color .15s ease,background-color .15s ease;}
.footer__links a:hover{color:var(--cream);background:var(--cream-06);}
.footer__copy{font-size:12.5px;color:var(--cream-40);}

/* ============================================================
   RECHTSSEITEN (Impressum / Datenschutz)
   ============================================================ */
.legal{max-width:760px;margin:0 auto;padding:64px 40px 88px;}
.legal h1{font-size:clamp(30px,4.4vw,40px);font-weight:800;letter-spacing:-0.035em;line-height:1.08;color:var(--ink);margin:10px 0 0;}
.legal h2{font-size:20px;font-weight:700;letter-spacing:-0.02em;color:var(--ink);margin:40px 0 0;}
.legal h3{font-size:16px;font-weight:700;color:var(--ink);margin:26px 0 0;}
.legal p,.legal ul{margin:12px 0 0;font-size:15px;line-height:1.7;color:var(--ink-70);}
.legal ul{padding-left:22px;}
.legal li{margin-top:6px;}
.legal a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px;}
.legal a:hover{color:var(--accent-deep);}
.legal__updated{margin-top:28px;font-size:13px;color:var(--ink-55);}
.legal__address{margin-top:12px;font-size:15px;line-height:1.7;color:var(--ink-70);font-style:normal;}

/* ============================================================
   RESPONSIVE FEINSCHLIFF
   ============================================================ */
@media (max-width:600px){
  .nav{padding:12px 20px;gap:14px;}
  .hero__inner{padding:48px 20px 0;}
  .pillars,.flow-wrap,.modi-inner,.livedemo-inner,.featgrid-inner,.roadmap-inner,.pricing-inner,.contact__inner,.footer__inner,.legal{padding-left:20px;padding-right:20px;}
  .hero__shot{margin-top:44px;}
  .footer__inner{flex-direction:column;align-items:flex-start;}
}