/* ============================================================================
   Gym Tracker – gemeinsames Design für die drei Präsentationsseiten
   (nutzer.html · praesentation.html · portal.html)

   Schriften sind selbst gehostet (assets/fonts) – keine Verbindung zu Google,
   die Seiten laufen auch offline vom USB-Stick.
   ========================================================================== */

@font-face{font-family:Manrope;font-weight:400;font-display:swap;src:url("fonts/Manrope_400Regular.ttf") format("truetype")}
@font-face{font-family:Manrope;font-weight:500;font-display:swap;src:url("fonts/Manrope_500Medium.ttf") format("truetype")}
@font-face{font-family:Manrope;font-weight:600;font-display:swap;src:url("fonts/Manrope_600SemiBold.ttf") format("truetype")}
@font-face{font-family:Manrope;font-weight:700;font-display:swap;src:url("fonts/Manrope_700Bold.ttf") format("truetype")}
@font-face{font-family:Manrope;font-weight:800;font-display:swap;src:url("fonts/Manrope_800ExtraBold.ttf") format("truetype")}
@font-face{font-family:"Space Grotesk";font-weight:500;font-display:swap;src:url("fonts/SpaceGrotesk_500Medium.ttf") format("truetype")}
@font-face{font-family:"Space Grotesk";font-weight:700;font-display:swap;src:url("fonts/SpaceGrotesk_700Bold.ttf") format("truetype")}

/* ---------------------------------------------------------------- Farben */
:root{
  color-scheme: dark light;
  --bg:#0d0e12; --bg2:#121319; --panel:#181a21; --panel2:#1e2029;
  --ink:#f2f3f6; --ink2:#c6c9d2; --muted:#8c8f9b; --faint:#6c6f7a;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.15);
  --accent:#3b78e0; --accent2:#4f8ef7; --accent-ink:#8fb6ff;
  --accent-soft:rgba(79,142,247,.12); --accent-line:rgba(79,142,247,.32);
  --good:#2fbf8a; --good-soft:rgba(47,191,138,.12);
  --warn:#e0a33b; --warn-soft:rgba(224,163,59,.13);
  --bad:#e2574b; --bad-soft:rgba(226,87,75,.12);
  --shadow:0 30px 70px -32px rgba(0,0,0,.85);
  --shadow-sm:0 14px 34px -18px rgba(0,0,0,.7);
  --glow:rgba(59,120,224,.28);
  --radius:18px;
}
:root[data-theme="light"]{
  --bg:#f7f8fc; --bg2:#eef0f7; --panel:#ffffff; --panel2:#f4f5fa;
  --ink:#11121a; --ink2:#3a3c4b; --muted:#666977; --faint:#84879a;
  --line:rgba(16,18,32,.10); --line2:rgba(16,18,32,.18);
  --accent:#2f66cc; --accent2:#2f66cc; --accent-ink:#2a5cbb;
  --accent-soft:rgba(47,102,204,.09); --accent-line:rgba(47,102,204,.28);
  --good:#12805a; --good-soft:rgba(18,128,90,.10);
  --warn:#9a6a10; --warn-soft:rgba(154,106,16,.11);
  --bad:#c0392f; --bad-soft:rgba(192,57,47,.10);
  --shadow:0 26px 60px -30px rgba(20,24,50,.38);
  --shadow-sm:0 12px 28px -16px rgba(20,24,50,.30);
  --glow:rgba(47,102,204,.16);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:78px;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{margin:0;font-family:"Space Grotesk",Manrope,sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.1;text-wrap:balance;}
p{margin:0;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* ---------------------------------------------------------------- Raster */
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 24px;}
.wrap.narrow{max-width:900px;}
.band{padding:96px 0;position:relative;}
.band.alt{background:var(--bg2);}
.band.tight{padding:64px 0;}
@media (max-width:760px){.band{padding:64px 0}.wrap{padding:0 18px}body{font-size:16px}}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:16px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent2);border-radius:2px;}
h1.display{font-size:clamp(34px,4.6vw,55px);font-weight:700;line-height:1.05;}
h2.title{font-size:clamp(29px,4.4vw,46px);}
h3.sub{font-size:clamp(20px,2.6vw,25px);}
.lead{color:var(--ink2);font-size:clamp(17px,2.1vw,20px);max-width:64ch;margin-top:20px;}
.note{color:var(--muted);font-size:15px;max-width:70ch;margin-top:14px;}
.accent{color:var(--accent2);}
.center{text-align:center;}
.center .lead,.center .note{margin-left:auto;margin-right:auto;}
.head-block{max-width:780px;}
.head-block.center{margin:0 auto;}

/* ---------------------------------------------------------------- Kopfleiste */
header.nav{
  position:sticky;top:0;z-index:60;backdrop-filter:saturate(1.5) blur(14px);
  background:color-mix(in srgb, var(--bg) 93%, transparent);border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:66px;gap:14px;}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:17px;letter-spacing:-.02em;flex:0 0 auto;}
.brand .glyph{
  width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(150deg,var(--accent2),var(--accent));box-shadow:0 8px 20px -8px var(--accent);
}
/* `min-width:0` + `overflow-x:auto`: die Reiter dürfen unter ihre Inhaltsbreite
   schrumpfen und dann in sich scrollen. Ohne das schob die Leiste auf dem Handy die
   rechte Gruppe aus dem Bild – gemessen 485 px Inhalt auf 375 px Fenster. Das war schon
   vor dem Sprachumschalter so, mit ihm wäre er schlicht unerreichbar gewesen.
   Der Scrollbalken bleibt unsichtbar; auf dem Schreibtisch ist ohnehin Platz. */
.nav-links{
  display:flex;align-items:center;gap:4px;margin-left:auto;
  min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  scroll-behavior:smooth;overscroll-behavior-x:contain;
}
.nav-links::-webkit-scrollbar{display:none;}
/* Auf dem Handy sind ~128 px der Leiste außerhalb des Bildes – ohne Hinweis merkt das
   niemand, und „Web-Portal" existiert für den Besucher schlicht nicht. Die Maske blendet
   die Kante aus, an der es weitergeht. Sie sitzt am ELEMENT, nicht am Inhalt, scrollt
   also nicht mit; die zwei Klassen setzt site.js nach Scrollstand. */
.nav-links.mehrRechts{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
          mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
}
.nav-links.mehrLinks{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 28px);
          mask-image:linear-gradient(to right,transparent,#000 28px);
}
.nav-links.mehrLinks.mehrRechts{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent);
          mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent);
}
@media (prefers-reduced-motion:reduce){.nav-links{scroll-behavior:auto;}}
.nav-links a{
  padding:8px 13px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--ink2);
  transition:background .16s,color .16s;white-space:nowrap;
}
.nav-links a:hover{background:var(--panel);color:var(--ink);}
.nav-links a.active{color:var(--accent-ink);background:var(--accent-soft);}
.theme-btn{
  width:38px;height:38px;flex:0 0 auto;border-radius:11px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);cursor:pointer;font-size:15px;line-height:1;
}
/* Sprachumschalter: ein echter Link auf die Schwesterseite, kein JS-Menü – bei zwei
   Sprachen ist eine Auswahlliste Aufwand ohne Gewinn, und ohne JS funktioniert er auch.
   Die Fahne ist ein Inline-SVG, KEIN Emoji: Windows zeigt 🇬🇧 als Buchstabenpaar „GB"
   (dieselbe Falle steckt im Portal, siehe panel.js → FLAGGEN). */
.lang-btn{
  display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;height:38px;padding:0 11px;
  border-radius:11px;border:1px solid var(--line);background:var(--panel);color:var(--ink);
  font-size:13px;font-weight:700;letter-spacing:.02em;
  transition:background .16s,border-color .16s,color .16s;
}
.lang-btn:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink);}
.lang-btn .flag{
  width:21px;height:13px;flex:0 0 auto;display:block;border-radius:2px;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent) inset;
}
@media (max-width:860px){.nav-links a{padding:7px 9px;font-size:13px}.brand span{display:none}}
@media (max-width:540px){
  .nav-in{height:58px;gap:6px;}
  .nav-links{gap:0;}
  .nav-links a{padding:6px 7px;font-size:12.5px;}
  .theme-btn{width:33px;height:33px;font-size:13px;border-radius:9px;}
  .lang-btn{height:33px;padding:0 8px;font-size:12px;gap:5px;border-radius:9px;}
  .lang-btn .flag{width:18px;height:11px;}
  .brand .glyph{width:29px;height:29px;border-radius:9px;}
}

/* ---------------------------------------------------------------- Knöpfe */
.btn{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;font:inherit;font-weight:700;font-size:16px;
  border-radius:14px;padding:14px 24px;border:1px solid transparent;transition:transform .16s,box-shadow .2s,background .2s;
}
.btn.primary{background:var(--accent);color:#fff;box-shadow:0 14px 30px -12px var(--accent);}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 20px 38px -14px var(--accent);}
.btn.ghost{background:var(--panel);color:var(--ink);border-color:var(--line2);}
.btn.ghost:hover{transform:translateY(-2px);border-color:var(--accent-line);}
.btn.sm{padding:10px 17px;font-size:14.5px;border-radius:11px;}
.cta-row{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px;}
/* Beide Schreibweisen: Klasse am Elternteil ODER an der Leiste selbst. Letztere steht
   so in nutzer.html/praesentation.html und war bis dahin wirkungslos. */
.center .cta-row,.cta-row.center{justify-content:center;}

/* ---------------------------------------------------------------- Hero */
.hero{position:relative;padding:82px 0 70px;overflow:hidden;}
.hero::before{
  content:"";position:absolute;inset:-30% -20% auto -20%;height:820px;z-index:0;pointer-events:none;
  background:radial-gradient(52% 52% at 68% 26%, var(--glow), transparent 72%);
}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;gap:52px;align-items:center;}
@media (max-width:940px){.hero-grid{grid-template-columns:1fr;gap:44px}.hero{padding:56px 0 40px}}

.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px;}
.chip{
  font-size:13px;font-weight:600;color:var(--ink2);border:1px solid var(--line);
  background:var(--panel);border-radius:999px;padding:7px 14px;
}
.chip b{color:var(--accent-ink);font-weight:800;}

/* ---------------------------------------------------------------- Kennzahlen */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:44px;}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px;}
.stats > *{min-width:0;}
.stat .n{font-family:"Space Grotesk";font-weight:700;font-size:clamp(28px,2.7vw,36px);line-height:1.08;color:var(--accent2);letter-spacing:-.03em;overflow-wrap:anywhere;hyphens:auto;}
.stat .l{color:var(--muted);font-size:14px;margin-top:9px;line-height:1.45;}

/* ---------------------------------------------------------------- Karten */
/* Raster-Kinder dürfen nicht am Inhalt kleben bleiben: sonst zwingt eine Tabelle mit
   min-width die ganze Spalte breiter als den Bildschirm (klassische Grid-Falle auf dem Handy). */
.grid > *, .feat > *, .hero-grid > *, .gallery > *, .steps > *{min-width:0;}
code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.92em;
     background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:1px 6px;
     overflow-wrap:anywhere;}

.grid{display:grid;gap:20px;}
.grid.two{grid-template-columns:repeat(2,1fr);}
.grid.three{grid-template-columns:repeat(3,1fr);}
.grid.four{grid-template-columns:repeat(4,1fr);}
@media (max-width:980px){.grid.three,.grid.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.grid.two,.grid.three,.grid.four{grid-template-columns:1fr}}

/* Feature-Karten haben auf breiten Ansichten gleich hohe Zeilen. So stehen kurze
   und längere Beschreibungen sauber untereinander; auf dem Handy bleibt jede Karte
   auf ihrer natürlichen Höhe. */
.feature-cards{grid-auto-rows:1fr;}
.feature-cards .card{height:100%;box-sizing:border-box;}
@media (max-width:680px){.feature-cards{grid-auto-rows:auto}.feature-cards .card{height:auto;}}

.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.card:hover{transform:translateY(-3px);border-color:var(--accent-line);box-shadow:var(--shadow-sm);}
.card h3{font-size:19px;margin-bottom:9px;}
.card p{color:var(--ink2);font-size:15.5px;line-height:1.6;}
.card .ico{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin-bottom:16px;
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent2);
}
.card.plain:hover{transform:none;border-color:var(--line);box-shadow:none;}

/* Nutzen-Karte mit „Vorher / Nachher" */
.ba{display:grid;gap:14px;}
.ba > div{border-radius:14px;padding:16px 18px;border:1px solid var(--line);}
.ba .before{background:var(--bad-soft);border-color:rgba(226,87,75,.24);}
.ba .after{background:var(--good-soft);border-color:rgba(47,191,138,.24);}
.ba .tag{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px;}
.ba .before .tag{color:var(--bad);}
.ba .after .tag{color:var(--good);}
.ba p{font-size:15.5px;color:var(--ink2);}

/* ---------------------------------------------------------------- Schritte */
.steps{counter-reset:s;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;position:relative;}
.step::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:"Space Grotesk";font-weight:700;font-size:13px;letter-spacing:.1em;color:var(--accent2);
  display:block;margin-bottom:12px;
}
.step h3{font-size:18px;margin-bottom:8px;}
.step p{color:var(--ink2);font-size:15px;}

/* ---------------------------------------------------------------- Handy-Rahmen */
/* Breite über --w, Rundungen prozentual: so bleibt der Rahmen korrekt, auch wenn die
   Kachel schmaler ist als --w (Galerie-Raster). */
.phone{
  --w:290px;width:var(--w);max-width:100%;flex:0 1 auto;
  background:linear-gradient(170deg,#2b2d36,#0b0c10);
  border-radius:12% / 5.4%;padding:3.4%;
  box-shadow:var(--shadow),0 0 0 1px rgba(255,255,255,.06) inset;
}
.phone img{width:100%;border-radius:9.4% / 4.3%;display:block;}
.phone.lg{--w:326px;}
.phone.sm{--w:230px;}
.phone-stage{display:grid;place-items:center;position:relative;}
.phone-stage.pair{display:flex;justify-content:center;align-items:flex-start;gap:24px;}
.phone-stage.pair .phone{--w:255px;}
.phone-stage.pair .phone:nth-child(2){margin-top:42px;}
@media (max-width:760px){
  .phone{--w:246px}.phone.lg{--w:262px}
  .phone-stage.pair{gap:12px}.phone-stage.pair .phone{--w:170px}
}

/* Screenshot-Galerie */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:38px 26px;}
.gallery .phone{--w:248px;}
.shot{display:flex;flex-direction:column;align-items:center;gap:18px;}
.shot .cap{text-align:center;max-width:34ch;}
.shot .cap h3{font-size:17.5px;margin-bottom:6px;}
.shot .cap p{color:var(--muted);font-size:14.5px;line-height:1.55;}

/* ---------------------------------------------------------------- Browser-Rahmen */
.browser{
  border-radius:16px;overflow:hidden;border:1px solid var(--line2);background:var(--panel);
  box-shadow:var(--shadow);
}
.browser .bar{
  display:flex;align-items:center;gap:8px;padding:11px 14px;background:var(--panel2);
  border-bottom:1px solid var(--line);
}
.browser .dots{display:flex;gap:6px;flex:0 0 auto;}
.browser .dots i{width:11px;height:11px;border-radius:50%;display:block;background:var(--line2);}
.browser .dots i:nth-child(1){background:#e2574b;} .browser .dots i:nth-child(2){background:#e0a33b;} .browser .dots i:nth-child(3){background:#2fbf8a;}
.browser .url{
  flex:1;background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:5px 12px;font-size:12.5px;color:var(--muted);
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.browser .view{position:relative;background:#101116;}
.browser .view img{width:100%;display:block;}
/* Jeder Portal-Screenshot trägt oben denselben Kopf (Titel, „Angemeldet", „‹ Start").
   `trim` schneidet ihn weg, damit im Rahmen der eigentliche Inhalt steht. Prozentwert,
   weil sich Prozent-Margins an der Breite orientieren – so sitzt der Schnitt in jeder
   Spaltenbreite gleich. */
.browser .view.trim{overflow:hidden;}
.browser .view.trim img{margin-top:-25%;}
.browser .view.trim.flach img{margin-top:-12%;}

/* Sehr lange Ansichten oben anschneiden – mit weichem Auslauf statt harter Kante. */
.browser .view.crop{max-height:var(--crop,620px);overflow:hidden;}
.browser .view.crop::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;
  background:linear-gradient(180deg,transparent,#101116);
}
.browser .view.crop .more{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;
  font-size:12.5px;font-weight:700;color:#cfd4e0;background:rgba(20,22,30,.9);
  border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px 15px;white-space:nowrap;
}
a.browser{display:block;transition:transform .2s,box-shadow .2s;}
a.browser:hover{transform:translateY(-3px);}

/* ---------------------------------------------------------------- Funktionsblock (Portal-Seite) */
.feat{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center;}
.feat.flip .txt{order:2;}
.feat + .feat{margin-top:88px;}
.feat .txt h3{font-size:clamp(23px,3vw,31px);margin-bottom:14px;}
.feat .txt p{color:var(--ink2);font-size:16.5px;}
@media (max-width:940px){.feat,.feat.flip{grid-template-columns:1fr;gap:28px}.feat.flip .txt{order:0}.feat + .feat{margin-top:64px}}

.ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:11px;}
.ul li{position:relative;padding-left:29px;color:var(--ink2);font-size:15.5px;line-height:1.55;}
.ul li::before{
  content:"";position:absolute;left:0;top:.52em;width:15px;height:15px;border-radius:5px;
  background:var(--accent-soft);border:1px solid var(--accent-line);
}
.ul li::after{
  content:"";position:absolute;left:4.5px;top:calc(.52em + 4px);width:6px;height:3.5px;
  border-left:2px solid var(--accent2);border-bottom:2px solid var(--accent2);transform:rotate(-45deg);
}
.ul li b{color:var(--ink);font-weight:700;}

.payoff{
  margin-top:24px;border-left:3px solid var(--accent2);background:var(--accent-soft);
  border-radius:0 12px 12px 0;padding:14px 18px;font-size:15.5px;color:var(--ink);
}
.payoff b{font-weight:800;}

/* ---------------------------------------------------------------- Tabelle */
.tblwrap{overflow-x:auto;max-width:100%;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);}
table{width:100%;border-collapse:collapse;min-width:480px;font-size:15.5px;}
th,td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--line);}
th{font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);background:var(--panel2);}
tr:last-child td{border-bottom:none;}
td b{font-weight:700;}
td.ok{color:var(--good);font-weight:700;}

/* ---------------------------------------------------------------- Zitat / Abschluss */
.quote{
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent2);
  border-radius:0 var(--radius) var(--radius) 0;padding:28px 32px;
}
.quote p{font-size:19px;line-height:1.6;color:var(--ink);font-weight:500;}
.quote .who{color:var(--muted);font-size:14.5px;margin-top:12px;}

.cta-band{
  position:relative;overflow:hidden;border-radius:26px;padding:60px 44px;text-align:center;
  background:linear-gradient(150deg,var(--panel),var(--panel2));border:1px solid var(--line2);
}
.cta-band::before{
  content:"";position:absolute;inset:auto -10% -60% -10%;height:340px;
  background:radial-gradient(50% 60% at 50% 100%, var(--glow), transparent 70%);pointer-events:none;
}
.cta-band > *{position:relative;z-index:1;}
@media (max-width:680px){.cta-band{padding:40px 22px}}

footer.foot{border-top:1px solid var(--line);padding:40px 0 56px;color:var(--muted);font-size:14.5px;}
.foot-in{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;}
.foot a{color:var(--ink2);font-weight:600;}
.foot a:hover{color:var(--accent-ink);}

/* ---------------------------------------------------------------- Einblenden beim Scrollen
   Bewusst an `.js` gebunden: ohne (oder vor) JavaScript ist alles sichtbar. Sonst stünde
   jemand, der die Datei vom Stick öffnet, im Zweifel vor einer halb leeren Seite. */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
.js .reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){.js .reveal{opacity:1;transform:none}}

/* Sprungmarken-Leiste (Portal-Seite) */
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px;}
.jump a{
  font-size:13.5px;font-weight:600;color:var(--ink2);background:var(--panel);
  border:1px solid var(--line);border-radius:999px;padding:8px 15px;transition:all .16s;
}
.jump a:hover{border-color:var(--accent-line);color:var(--accent-ink);background:var(--accent-soft);}

/* Bildunterschrift unter Screenshots */
.figcap{color:var(--faint);font-size:13.5px;margin-top:12px;text-align:center;}

/* ---------------------------------------------------------------- Preistafeln (Startseite) */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;align-items:start;}
@media (max-width:940px){.tiers{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}
.tier{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:30px 26px;display:flex;flex-direction:column;height:100%;
}
.tier.featured{border-color:var(--accent-line);box-shadow:var(--shadow-sm);}
.tier .badge{
  position:absolute;top:-11px;left:26px;background:var(--accent);color:#fff;
  font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  border-radius:999px;padding:4px 12px;
}
.tier .t-name{font-family:"Space Grotesk",sans-serif;font-size:20px;font-weight:700;}
.tier .t-for{color:var(--muted);font-size:14.5px;margin-top:4px;min-height:2.8em;}
.tier .t-price{font-family:"Space Grotesk",sans-serif;font-size:38px;font-weight:700;margin-top:16px;letter-spacing:-.03em;}
.tier .t-price small{font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0;}
.tier .t-setup{color:var(--faint);font-size:13.5px;margin-top:2px;}
.tier ul{list-style:none;padding:0;margin:22px 0 26px;display:grid;gap:10px;flex:1;}
.tier ul li{position:relative;padding-left:26px;color:var(--ink2);font-size:15px;}
.tier ul li::before{
  content:"";position:absolute;left:0;top:.45em;width:14px;height:14px;border-radius:5px;
  background:var(--accent-soft);border:1px solid var(--accent-line);
}
.tier ul li::after{
  content:"";position:absolute;left:4px;top:calc(.45em + 4px);width:6px;height:3.5px;
  border-left:2px solid var(--accent2);border-bottom:2px solid var(--accent2);transform:rotate(-45deg);
}
.tier .btn{width:100%;justify-content:center;}
.tiers-note{color:var(--faint);font-size:13.5px;margin-top:16px;}

/* ---------------------------------------------------------------- Kontaktformular */
.form{display:grid;gap:12px;max-width:440px;margin:26px auto 0;text-align:left;}
.form input{
  width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--panel2);
  border:1px solid var(--line2);border-radius:12px;padding:13px 16px;
}
.form input::placeholder{color:var(--faint);}
.form input:focus{outline:none;border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft);}
.form .btn{justify-content:center;margin-top:4px;}
/* Honigtopf: für Menschen unsichtbar, Bots füllen ihn aus. Nicht display:none –
   manche Bots überspringen genau das. */
.form .honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.form .legal{color:var(--faint);font-size:13px;line-height:1.5;text-align:center;margin-top:6px;}
.form .legal a{color:var(--ink2);text-decoration:underline;}

/* ---------------------------------------------- Rechtsseiten (Impressum, Datenschutz)
   Lange Fließtexte brauchen andere Maße als die Marketing-Abschnitte: schmalere Spalte
   für die Zeilenlänge, engere Abstände, nummerierte Überschriften. */
.rechts{max-width:74ch;}
.rechts h2{font-size:clamp(21px,2.4vw,26px);margin:44px 0 14px;scroll-margin-top:86px;}
.rechts h2:first-of-type{margin-top:0;}
.rechts h3{font-size:18px;margin:28px 0 10px;scroll-margin-top:86px;}
.rechts p{color:var(--ink2);font-size:15.5px;line-height:1.68;margin:0 0 14px;}
.rechts p b,.rechts li b{color:var(--ink);}
.rechts ul{margin:0 0 16px;padding-left:22px;}
.rechts li{color:var(--ink2);font-size:15.5px;line-height:1.68;margin-bottom:8px;}
.rechts a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px;}
.rechts dl{margin:0 0 18px;display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:15.5px;}
.rechts dt{color:var(--muted);}
.rechts dd{color:var(--ink);margin:0;font-weight:600;}
@media (max-width:520px){.rechts dl{grid-template-columns:1fr;gap:2px 0;}.rechts dd{margin-bottom:10px;}}
.rechts .stand{color:var(--muted);font-size:14px;margin-top:40px;padding-top:18px;border-top:1px solid var(--line);}
/* Inhaltsverzeichnis einer Rechtsseite – benutzt die vorhandene .jump-Optik. */
.rechts .jump{margin:26px 0 8px;}

/* ═══════════════════════════════════════════════════ Bewegung (05.09.2026)
   Drei Zutaten, bewusst sparsam. Die Seiten sind textlastig und werden oft auf dem
   Handy gelesen; die Bilder wiegen zusammen 17 MB. Alles hier läuft deshalb entweder
   EINMAL beim Laden oder auf dem Compositor (transform/opacity) – nichts, was beim
   Scrollen Layout neu rechnet.
   Der ganze Block steht in `prefers-reduced-motion: no-preference`: wer Bewegung
   abbestellt hat, bekommt die Seite ohne jede Animation, ohne Sonderregeln. */
@media (prefers-reduced-motion: no-preference){

  /* 1. Hero-Einstieg. Bis hierher war oberhalb der Falz NICHTS animiert – .reveal
     greift erst beim Scrollen, der erste Eindruck war also statisch.
     `backwards` blendet die Elemente schon vor ihrer Verzögerung aus; deshalb gibt es
     kein Aufblitzen, und es braucht kein JavaScript dafür. */
  .hero-grid > div:not(.phone-stage) > *,
  .hero-grid > .phone-stage,
  .hero > .wrap > .head-block > *,
  .hero > .wrap > .jump{
    animation:heroAuf .72s cubic-bezier(.22,.7,.3,1) backwards;
  }
  .hero-grid > div:not(.phone-stage) > *:nth-child(1),
  .hero > .wrap > .head-block > *:nth-child(1){animation-delay:.06s}
  .hero-grid > div:not(.phone-stage) > *:nth-child(2),
  .hero > .wrap > .head-block > *:nth-child(2){animation-delay:.12s}
  .hero-grid > div:not(.phone-stage) > *:nth-child(3),
  .hero > .wrap > .head-block > *:nth-child(3){animation-delay:.18s}
  .hero-grid > div:not(.phone-stage) > *:nth-child(4),
  .hero > .wrap > .head-block > *:nth-child(4){animation-delay:.24s}
  .hero-grid > div:not(.phone-stage) > *:nth-child(5),
  .hero > .wrap > .head-block > *:nth-child(5){animation-delay:.30s}
  .hero-grid > .phone-stage,
  .hero > .wrap > .jump{animation-delay:.34s}

  /* 2. Der Akzent-Schimmer atmet. Nur `transform` – die Fläche wird nicht neu gemalt.
     22 s, damit es niemandem auffällt, solange er nicht hinsieht. */
  .hero::before{animation:heroSchimmer 22s ease-in-out infinite alternate;}
}

@keyframes heroAuf{
  from{opacity:0;transform:translateY(16px);}
}
@keyframes heroSchimmer{
  from{transform:translate3d(-2.5%,-1.5%,0) scale(1);}
  to  {transform:translate3d(2.5%,1.5%,0) scale(1.06);}
}

/* 3. Kennzahlen zählen hoch (siehe site.js). Solange JS nicht gelaufen ist, steht der
   Endwert im Markup – ohne JS bleibt die Zahl also einfach stehen. `tabular-nums`
   verhindert, dass die Kachel beim Zählen zappelt. */
.stat .n{font-variant-numeric:tabular-nums;}