/* BioPulse auf junevex.app (seit 2026-10-05). Gestaltung der frueheren Seite biopulse-health.de,
   umgebaut fuer die CSP von junevex.app: kein Inline-CSS, kein JavaScript. Was die alte Seite per
   Skript tat (Galerie einblenden, Sprache umschalten), macht hier CSS oder ein Link.
   Gebaut von biopulse_bauen.py -- diese Datei ist von Hand gepflegt, die HTML-Seiten nicht. */

:root {
  color-scheme: dark;
  --bg: #0A0A0C; --card: #161618; --border: #2A2A2C;
  --text: #FFFFFF; --text-sec: #8E8E93; --text-ter: #6C6C70;
  --sleep: #A78BFA; --move: #FF4559; --exercise: #9FE850; --stand: #50D2FF;
  --insights: #00D4FF; --journal: #FFB347; --fokus: #A78BFA;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Kein scroll-behavior: smooth (2026-10-05): Anker wie #terms, auf die die App verweist, muessen sofort
   springen; ein weicher Sprung blieb in einem Test-Tab bei 14 px stehen. */
body {
  background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 200; background: var(--card); padding: 8px 14px; border-radius: 10px; }

/* ---------- Kopf ---------- */
.kopf {
  position: sticky; top: 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 32px;
  background: rgba(10, 10, 12, 0.85);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.marke { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; text-decoration: none; }
.marke img { width: 30px; height: 30px; border-radius: 8px; }
.navi { display: flex; gap: 24px; list-style: none; }
.navi a { color: var(--text-sec); text-decoration: none; font-size: 14px; font-weight: 500; transition: color .2s; }
.navi a:hover { color: var(--text); }
.kopf-rechts { display: flex; align-items: center; gap: 14px; }
.kapsel-knopf {
  background: var(--sleep); color: #000; text-decoration: none;
  font-size: 12px; font-weight: 700; padding: 5px 13px; border-radius: 20px; white-space: nowrap;
}

/* Sprachwahl: <details> statt Skript, wie auf der Firmenseite */
.sprachwahl { position: relative; font-size: 13px; }
.sprachwahl summary {
  list-style: none; cursor: pointer; color: var(--text-sec);
  border: 1px solid var(--border); border-radius: 10px; padding: 4px 10px; white-space: nowrap;
}
.sprachwahl summary::-webkit-details-marker { display: none; }
.sprachwahl summary::after { content: " \25BE"; }
.sprachwahl[open] summary { color: var(--text); border-color: var(--text-ter); }
.sprachwahl ul {
  position: absolute; right: 0; top: calc(100% + 6px); list-style: none;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 6px; min-width: 170px; box-shadow: 0 18px 50px rgba(0,0,0,.55);
}
.sprachwahl li a { display: block; padding: 6px 10px; border-radius: 8px; text-decoration: none; color: var(--text-sec); }
.sprachwahl li a:hover { background: rgba(255,255,255,.06); color: var(--text); }
.sprachwahl li a[aria-current] { color: var(--text); font-weight: 600; }

/* ---------- Startbereich ---------- */
.hero {
  min-height: 92vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 96px 24px 72px; position: relative; overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .09; }
.blob-1 { width: 600px; height: 500px; background: var(--sleep); top: -100px; left: -100px; animation: schweben1 12s ease-in-out infinite; }
.blob-2 { width: 500px; height: 400px; background: var(--insights); bottom: -50px; right: -80px; animation: schweben2 10s ease-in-out infinite; }
@keyframes schweben1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, 30px) scale(1.1); } }
@keyframes schweben2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-30px, -20px) scale(1.08); } }
.kapsel {
  display: inline-flex; align-items: center; gap: 8px; position: relative;
  background: rgba(167, 139, 250, .1); border: 1px solid rgba(167, 139, 250, .25);
  border-radius: 20px; padding: 6px 16px; margin-bottom: 28px;
  font-size: 13px; font-weight: 600; color: var(--sleep);
}
.kapsel::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sleep); animation: puls 2s ease-in-out infinite; }
@keyframes puls { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.8); } }
h1 { font-size: clamp(36px, 7vw, 68px); font-weight: 800; line-height: 1.1; letter-spacing: -2px; margin-bottom: 24px; max-width: 860px; position: relative; text-wrap: balance; }
h1 span { display: block; }
.verlauf {
  background: linear-gradient(135deg, var(--sleep) 0%, var(--insights) 50%, var(--stand) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-text { font-size: clamp(16px, 2.5vw, 20px); color: var(--text-sec); max-width: 580px; margin-bottom: 44px; position: relative; text-wrap: pretty; }
.knoepfe { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; position: relative; margin-bottom: 20px; }
.knopf {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-size: 15px; font-weight: 700; padding: 14px 28px; border-radius: 14px;
  transition: transform .2s, opacity .2s, border-color .2s;
}
.knopf-haupt { background: var(--sleep); color: #000; }
.knopf-haupt:hover { transform: translateY(-2px); opacity: .92; }
.knopf-zweit { background: var(--card); color: var(--text); border: 1px solid var(--border); font-weight: 600; }
.knopf-zweit:hover { border-color: var(--text-sec); }
.hero-fuss { position: relative; font-size: 14px; color: var(--text-sec); margin-bottom: 72px; max-width: 640px; }

.kennzahlen {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: var(--border); border-radius: 20px; overflow: hidden;
  position: relative; width: min(100%, 680px);
}
.kennzahl { background: var(--card); padding: 26px 22px; text-align: center; }
.kennzahl b { display: block; font-size: 36px; font-weight: 800; margin-bottom: 4px; line-height: 1.2; }
.kennzahl:nth-child(1) b { color: var(--sleep); }
.kennzahl:nth-child(2) b { color: var(--insights); }
.kennzahl:nth-child(3) b { color: var(--exercise); }
.kennzahl span { font-size: 13px; color: var(--text-sec); }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: 100px 24px; max-width: 1100px; margin: 0 auto; scroll-margin-top: 70px; }
.kicker { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--sleep); margin-bottom: 16px; text-align: center; }
.abschnitt-titel { font-size: clamp(28px, 5vw, 44px); font-weight: 800; letter-spacing: -1px; text-align: center; margin-bottom: 16px; text-wrap: balance; }
.abschnitt-text { text-align: center; color: var(--text-sec); font-size: 17px; max-width: 560px; margin: 0 auto 64px; text-wrap: pretty; }

.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.karte {
  --farbe: var(--sleep); --farbe-leise: rgba(167, 139, 250, .1); --rand: rgba(167, 139, 250, .2);
  background: var(--card); border: 1px solid var(--rand); border-radius: 20px; padding: 28px;
  position: relative; overflow: hidden; transition: transform .3s;
}
.karte::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--farbe); }
.karte:hover { transform: translateY(-4px); }
.karte-symbol { width: 48px; height: 48px; border-radius: 14px; background: var(--farbe-leise); display: grid; place-items: center; margin-bottom: 18px; color: var(--farbe); }
.karte-symbol svg { width: 24px; height: 24px; }
.karte h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.karte p { font-size: 14px; color: var(--text-sec); line-height: 1.6; }
.karte-herz { --farbe: var(--move); --farbe-leise: rgba(255, 69, 89, .1); --rand: rgba(255, 69, 89, .2); }
.karte-training { --farbe: var(--exercise); --farbe-leise: rgba(159, 232, 80, .1); --rand: rgba(159, 232, 80, .2); }
.karte-journal { --farbe: var(--journal); --farbe-leise: rgba(255, 179, 71, .1); --rand: rgba(255, 179, 71, .2); }
.karte-dashboard { --farbe: var(--insights); --farbe-leise: rgba(0, 212, 255, .1); --rand: rgba(0, 212, 255, .2); }
.karte-daten { --farbe: var(--stand); --farbe-leise: rgba(80, 210, 255, .1); --rand: rgba(80, 210, 255, .2); }

/* ---------- Galerie ---------- */
.galerie-hinweis { text-align: center; color: var(--text-ter); font-size: 13px; margin-top: 4px; }
.galerie {
  display: flex; gap: 20px; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 28px 4px 28px;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.galerie::-webkit-scrollbar { height: 8px; }
.galerie::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.bild { flex: 0 0 auto; width: 240px; scroll-snap-align: center; }
.bild-rahmen {
  border: 1px solid var(--border); border-radius: 26px; overflow: hidden; background: var(--card);
  box-shadow: 0 18px 50px rgba(0,0,0,.55); transition: transform .35s ease, border-color .35s ease;
}
.bild-rahmen:hover { transform: translateY(-6px); border-color: rgba(167,139,250,.45); }
.bild img { display: block; width: 100%; height: auto; }
.bild figcaption { margin-top: 14px; text-align: center; font-size: 14px; font-weight: 600; }
.bild figcaption small { display: block; font-size: 13px; font-weight: 400; color: var(--text-sec); margin-top: 2px; }
.galerie-fuss { max-width: 680px; margin: 28px auto 0; text-align: center; font-size: 13px; color: var(--text-ter); line-height: 1.7; }
/* EINBLENDEN OHNE SKRIPT (2026-10-05). Die alte Seite brauchte dafuer JavaScript und eine Klasse
   html.js; hier verbietet die CSP Skripte. Browser mit scroll-getriebenen Animationen blenden die
   Bilder beim Hereinscrollen ein, alle anderen zeigen sie einfach. Kein Startzustand ausserhalb
   von @supports -- ein Browser ohne die Funktion sieht also nie leere Kaesten. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bild { animation: einfahren linear both; animation-timeline: view(inline); animation-range: entry 0% entry 60%; }
    @keyframes einfahren { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  }
}

/* ---------- Streifen ---------- */
.streifen {
  background: linear-gradient(135deg, rgba(167, 139, 250, .06) 0%, rgba(0, 212, 255, .04) 100%);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 80px 24px;
}
.streifen-innen { max-width: 920px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.zitat { font-size: clamp(22px, 3.5vw, 32px); font-weight: 700; line-height: 1.35; letter-spacing: -.5px; text-wrap: balance; }
.zitat em { font-style: normal; background: linear-gradient(90deg, var(--sleep), var(--insights)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.haken { list-style: none; }
.haken li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--text-sec); margin-bottom: 16px; line-height: 1.5; }
.haken li::before { content: "\2713"; color: var(--exercise); font-weight: 800; flex-shrink: 0; margin-top: 1px; }
.hinweis-medizin { max-width: 760px; margin: 0 auto; padding: 36px 24px 0; text-align: center; font-size: 13px; color: var(--text-ter); }

/* ---------- Support ---------- */
.seitenkopf { text-align: center; padding: 80px 24px 60px; border-bottom: 1px solid var(--border); }
.seitenkopf h1 { font-size: clamp(30px, 5vw, 44px); letter-spacing: -1px; margin: 0 auto 12px; }
.seitenkopf p { font-size: 17px; color: var(--text-sec); max-width: 520px; margin: 0 auto 32px; }
.inhalt { max-width: 760px; margin: 0 auto; padding: 64px 24px 80px; }
.inhalt h2 { font-size: 22px; font-weight: 800; margin-bottom: 24px; }
.fragen { margin-bottom: 60px; }
.fragen details { border: 1px solid var(--border); border-radius: 14px; margin-bottom: 10px; overflow: hidden; transition: border-color .2s; }
.fragen details:hover { border-color: var(--text-ter); }
.fragen details[open] { border-color: var(--sleep); }
.fragen summary { padding: 18px 20px; font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; color: var(--text-sec); font-size: 20px; font-weight: 400; transition: transform .2s; }
.fragen details[open] summary::after { transform: rotate(45deg); }
.fragen p { padding: 0 20px 18px; font-size: 14px; color: var(--text-sec); line-height: 1.7; }
.fragen a, .rechtstext a { color: var(--sleep); }
.kontakt { background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 32px; text-align: center; }
.kontakt h2 { margin-bottom: 8px; }
.kontakt p { font-size: 14px; color: var(--text-sec); margin-bottom: 20px; }
.mail-knopf {
  display: inline-block; background: rgba(167,139,250,.1); border: 1px solid rgba(167,139,250,.25);
  color: var(--sleep); font-size: 14px; font-weight: 600; padding: 10px 20px; border-radius: 10px; text-decoration: none;
}

/* ---------- Rechtstexte ---------- */
.rechtstext { max-width: 760px; margin: 0 auto; padding: 56px 24px 80px; }
.rechtstext .sprachsprung { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; }
.rechtstext .sprachsprung a { text-decoration: none; color: var(--text-sec); border: 1px solid var(--border); border-radius: 10px; padding: 6px 12px; font-size: 14px; }
.rechtstext .sprachsprung a:hover { color: var(--text); border-color: var(--text-ter); }
.rechtstext section { scroll-margin-top: 80px; }
.rechtstext h2 { font-size: clamp(24px, 4vw, 32px); font-weight: 800; letter-spacing: -.5px; margin: 8px 0 6px; }
.rechtstext h3 { font-size: 18px; font-weight: 700; margin: 28px 0 8px; }
.rechtstext h4 { font-size: 15px; font-weight: 700; margin: 20px 0 6px; color: var(--text); }
.rechtstext p { font-size: 15px; color: #C7C7CC; margin-bottom: 10px; overflow-wrap: anywhere; }
.rechtstext .stand { color: var(--text-sec); font-size: 14px; margin-bottom: 18px; }
.rechtstext hr { border: 0; border-top: 1px solid var(--border); margin: 48px 0; scroll-margin-top: 80px; }
.rechtstext .sprachhinweis { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; margin-bottom: 24px; }

/* ---------- Fuss ---------- */
.fuss { padding: 48px 32px 32px; max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--border); }
.fuss .marke { font-size: 16px; }
.fuss .marke img { width: 26px; height: 26px; border-radius: 7px; }
.fuss-links { display: flex; gap: 22px; list-style: none; flex-wrap: wrap; }
.fuss-links a { font-size: 13px; color: var(--text-sec); text-decoration: none; transition: color .2s; }
.fuss-links a:hover { color: var(--text); }
/* Laenderhinweis (Sprachseiten ausser de/en): sitzt zwischen hero-fuss und Kennzahlen und uebernimmt deren Abstand */
.hero-fuss:has(+ .hero-laender) { margin-bottom: 0; }
.hero-laender { position: relative; max-width: 560px; margin: 12px auto 72px; font-size: 13px; line-height: 1.5; color: var(--text-ter); }
/* Kapsel ausgewogen umbrechen; Japanisch nur an Leerzeichen und Satzzeichen (sonst brach 対応 mitten durch) */
.kapsel { text-wrap: balance; }
:lang(ja) .kapsel, :lang(ja) h1 { word-break: keep-all; }
.fuss-rechtssprache { width: 100%; font-size: 12px; color: var(--text-ter); }
.fuss-firma { width: 100%; text-align: center; font-size: 12px; color: var(--text-ter); padding-top: 24px; border-top: 1px solid var(--border); margin-top: 8px; }
.fuss-firma a { color: var(--text-sec); text-decoration: none; }
.fuss-firma a:hover { color: var(--text); }

@media (max-width: 768px) {
  .kopf { padding: 12px 18px; }
  .navi { display: none; }
  .kennzahlen { grid-template-columns: 1fr; }
  .streifen-innen { grid-template-columns: 1fr; gap: 40px; }
  .fuss { flex-direction: column; align-items: flex-start; }
  .bild { width: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .blob, .kapsel::before { animation: none; }
  .karte, .karte:hover, .bild-rahmen, .bild-rahmen:hover, .knopf-haupt:hover { transition: none; transform: none; }
}