Neues Design: echte App-Screens, Equilo 2.0, Rechtstexte aktualisiert

- Editorial-Design mit selbst gehosteten Schriften (Newsreader, Hanken Grotesk)
- Echte Screenshots aus der App (WebP), Apple Watch und iPad-Arztbericht
- Datenschutz für App 2.0 (Health lesen/schreiben, Hörtests, Augen-Video,
  Standort nur für Notfall-Nachricht, Apple Intelligence on-device, MetricKit)
- Impressum ohne eingestellten EU-OS-Link
- nginx-Konfiguration mit Sicherheits-Headern und Asset-Caching

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WT5AWHW7UkHrBjhNyA2y8X

Dockerfile

@@ -1,5 +1,7 @@
-# Statische Equilo-Landingpage über nginx (für Coolify Dockerfile-Build).
+# Statische Equilo-Website über nginx (Coolify, Dockerfile-Build).
 FROM nginx:1.27-alpine
+COPY nginx.conf /etc/nginx/conf.d/default.conf
 COPY *.html /usr/share/nginx/html/
+COPY assets/ /usr/share/nginx/html/assets/
 EXPOSE 80
 HEALTHCHECK CMD wget -qO- http://localhost/ >/dev/null 2>&1 || exit 1

assets/img/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" xmlns:c2pa="http://c2pa.org/manifest"><metadata><c2pa:manifest>AAAWgmp1bWIAAAAeanVtZGMycGEAEQAQgAAAqgA4m3EDYzJwYQAAABZcanVtYgAAAEdqdW1kYzJtYQARABCAAACqADibcQN1cm46YzJwYToyOTkxYzMwNS03MjQ0LTQ2ZGYtYmQyYy01ZDY5YmM5Yjc2MTAAAAADl2p1bWIAAAApanVtZGMyYXMAEQAQgAAAqgA4m3EDYzJwYS5hc3NlcnRpb25zAAAAALxqdW1iAAAARGp1bWRjYm9yABEAEIAAAKoAOJtxE2MycGEuaW5ncmVkaWVudC52MwAAAAAYYzJzaIjR3OKNoc/m7q6D6w65CZcAAABwY2JvcqNpZGM6Zm9ybWF0bWltYWdlL3N2Zyt4bWxqaW5zdGFuY2VJRHgseG1wOmlpZDo5N2Q3Y2VhNC1hNzYzLTRkZTktODA5YS0zMjlmZTU5MmFmZDhscmVsYXRpb25zaGlwaHBhcmVudE9mAAAB4mp1bWIAAABBanVtZGNib3IAEQAQgAAAqgA4m3ETYzJwYS5hY3Rpb25zLnYyAAAAABhjMnNoTgvcWHZUtf01a+seTmlQ/QAAAZljYm9yomdhY3Rpb25zgqJmYWN0aW9ua2MycGEub3BlbmVkanBhcmFtZXRlcnOha2luZ3JlZGllbnRzgaJjdXJseC1zZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmluZ3JlZGllbnQudjNkaGFzaFggUgildgydb2LVQQlZV3SkwCrfuFa/EdMwt5qh8rZ55UqkZmFjdGlvbngdY29tLmFudGhyb3BpYy5jbGF1ZGUucHJvdmlkZWRqcGFyYW1ldGVyc6F4H2NvbS5hbnRocm9waWMub3JpZ2luLWNvbmZpZGVuY2VndW5rbm93bmtkZXNjcmlwdGlvbnhmQ2xhdWRlIHByb3ZpZGVkIHRoaXMgZmlsZSBhdCB0aGUgcmVxdWVzdCBvZiBhIHVzZXIgYW5kIG1heSBoYXZlIGNyZWF0ZWQgb3IgbW9kaWZpZWQgdGhlIGZpbGUgY29udGVudHMubXNvZnR3YXJlQWdlbnShZG5hbWVmQ2xhdWRlcmFsbEFjdGlvbnNJbmNsdWRlZPUAAADIanVtYgAAAEBqdW1kY2JvcgARABCAAACqADibcRNjMnBhLmhhc2guZGF0YQAAAAAYYzJzaPYp4JZ0K1oduo1svTP+KYoAAACAY2JvcqVjYWxnZnNoYTI1NmNwYWRNAAAAAAAAAAAAAAAAAGRoYXNoWCDcOxEZ80nVRTudCJdDIzWiO9AKRaVKH0P65/t+swkMXmRuYW1lbmp1bWJmIG1hbmlmZXN0amV4Y2x1c2lvbnOBomVzdGFydBh7Zmxlbmd0aBkeBAAAAj5qdW1iAAAAJ2p1bWRjMmNsABEAEIAAAKoAOJtxA2MycGEuY2xhaW0udjIAAAACD2Nib3KlY2FsZ2ZzaGEyNTZpc2lnbmF0dXJleE1zZWxmI2p1bWJmPS9jMnBhL3VybjpjMnBhOjI5OTFjMzA1LTcyNDQtNDZkZi1iZDJjLTVkNjliYzliNzYxMC9jMnBhLnNpZ25hdHVyZWppbnN0YW5jZUlEeCx4bXA6aWlkOjc0YzhlMWYyLWViZjYtNDQ4Mi05ZTRkLWNiOGQ4YTgyNWI1ZnJjcmVhdGVkX2Fzc2VydGlvbnODomN1cmx4LXNlbGYjanVtYmY9YzJwYS5hc3NlcnRpb25zL2MycGEuaW5ncmVkaWVudC52M2RoYXNoWCBSCKV2DJ1vYtVBCVlXdKTAKt+4Vr8R0zC3mqHytnnlSqJjdXJseCpzZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmFjdGlvbnMudjJkaGFzaFggzer8Ti41AH6UWJ57D5Po6Ht0ktgk1rcCG45eAZvp8geiY3VybHgpc2VsZiNqdW1iZj1jMnBhLmFzc2VydGlvbnMvYzJwYS5oYXNoLmRhdGFkaGFzaFggVWqM8uvvORaiNFTZVDDeXthiRaKzwMjy5HIMNZbM7s90Y2xhaW1fZ2VuZXJhdG9yX2luZm+jZG5hbWVvQW50aHJvcGljIEZpbGVzZ3ZlcnNpb25lMS4wLjBrc3BlY1ZlcnNpb25lMi40LjAAABA4anVtYgAAAChqdW1kYzJjcwARABCAAACqADibcQNjMnBhLnNpZ25hdHVyZQAAABAIY2JvctKEWQISogEmGCFZAgowggIGMIIBjaADAgECAhRA5aAK7sI50L64g/oGQgU9Z1UTADAKBggqhkjOPQQDAzBJMRcwFQYDVQQKEw5BbnRocm9waWMsIFBCQzEuMCwGA1UEAxMlQW50aHJvcGljIENvbnRlbnQgQ3JlZGVudGlhbHMgUm9vdCBDQTAeFw0yNjA4MDcxODQzNTZaFw0yODA4MDYxOTQzNTZaMEQxFzAVBgNVBAoTDkFudGhyb3BpYywgUEJDMSkwJwYDVQQDEyBBbnRocm9waWMgQ2xhdWRlIENvbnRlbnQgU2lnbmluZzBZMBMGByqGSM49AgEGCCqGSM49AwEHA0IABJh6CmvLUBgFFNU0vUKlOVtE6djd17L5SuwX0LemFisBM3dkd/3cyjxFA3Qo5S46fX0/ihY0VZ7mfb9KF703t5OjWDBWMA4GA1UdDwEB/wQEAwIHgDAVBgNVHSUEDjAMBgorBgEEAYPoXgIBMAwGA1UdEwEB/wQCMAAwHwYDVR0jBBgwFoAUzlHiBIFOZFsj+OPEz5o+nMHXXMIwCgYIKoZIzj0EAwMDZwAwZAIwMXMdFJ4BetLLVY7ORuE9noqbbAZOZn/aArXyTwFAZfKrPzxF2vPoJNf1+UCdg1XGAjBwX1zd9WGqYkqmL5SFqw1QySjr1zJfpJM9+1rdDwSPLMOPOjKuiXjoU/pUUeG9RwmhY3BhZFkNngAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALine truncated

assets/site.css

@@ -0,0 +1,259 @@
+/* Equilo · Website · Editorial-Warm. Keine externen Ressourcen, Schriften selbst gehostet (OFL). */
+@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-latin-opsz-normal.woff2) format("woff2")}
+@font-face{font-family:"Newsreader";font-style:italic;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-latin-opsz-italic.woff2) format("woff2")}
+@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2")}
+
+:root{
+  --bg:#FBF7EF; --bg2:#F4EDE0; --paper:#FFFDF8;
+  --ink:#16302F; --ink2:#3B504E; --muted:#5E716F; --hair:rgba(22,48,47,.10);
+  --teal:#1F4848; --teal-deep:#0F2B2B; --coral:#E89B7B; --coral-ink:#A3401F; --coral-soft:#F8E1D5;
+  --sage:#6FA086; --sage-soft:#E3EDE6;
+  --serif:"Newsreader","Iowan Old Style","New York",Georgia,serif;
+  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
+  --ease:cubic-bezier(.22,1,.36,1);
+  --ease-soft:cubic-bezier(.32,.72,0,1);
+  --r-xl:2rem; --r-lg:1.5rem;
+  --shadow-float:0 30px 80px -30px rgba(15,43,43,.28),0 12px 30px -18px rgba(15,43,43,.22);
+}
+*{box-sizing:border-box;margin:0;padding:0}
+html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
+body{font-family:var(--sans);font-size:1.0625rem;line-height:1.62;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
+img{display:block;max-width:100%;height:auto}
+a{color:inherit}
+::selection{background:var(--coral-soft)}
+:focus-visible{outline:2px solid var(--coral-ink);outline-offset:3px;border-radius:6px}
+
+/* Filmkorn – fixiert, ohne Klicks */
+body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:1;
+  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
+
+.wrap{width:min(1180px,100% - 3rem);margin-inline:auto}
+@media(max-width:767px){.wrap{width:calc(100% - 2rem)}}
+
+h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.04;letter-spacing:-.022em;color:var(--teal-deep);font-optical-sizing:auto}
+h1{font-size:clamp(2.7rem,6.2vw,5.3rem);font-weight:450}
+h2{font-size:clamp(2.2rem,4.8vw,3.9rem)}
+h3{font-size:clamp(1.35rem,2vw,1.6rem);line-height:1.15;letter-spacing:-.012em}
+h1 em,h2 em{font-style:italic;font-weight:400;color:var(--coral-ink)}
+p{color:var(--ink2)}
+.lede{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.55;color:var(--ink2);max-width:36ch}
+
+.eyebrow{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:.38rem .85rem;font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);background:rgba(31,72,72,.06);box-shadow:inset 0 0 0 1px var(--hair)}
+.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--coral);display:block}
+
+/* ---------- Navigation: schwebende Insel ---------- */
+.nav{position:fixed;top:1.1rem;left:50%;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:1.6rem;padding:.45rem .5rem .45rem 1.1rem;border-radius:999px;background:rgba(251,247,239,.72);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 0 0 1px var(--hair),0 18px 40px -24px rgba(15,43,43,.35);transition:transform .7s var(--ease)}
+.brand{display:flex;align-items:center;gap:.55rem;font-family:var(--serif);font-size:1.3rem;font-weight:500;text-decoration:none;color:var(--teal-deep)}
+.brand svg{width:28px;height:28px}
+.nav-links{display:flex;gap:1.4rem;list-style:none}
+.nav-links a{text-decoration:none;font-size:.92rem;color:var(--ink2);transition:color .4s var(--ease)}
+.nav-links a:hover{color:var(--teal-deep)}
+.menu-btn{display:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--teal-deep);cursor:pointer;position:relative}
+.menu-btn span{position:absolute;left:14px;right:14px;height:1.5px;background:#fff;border-radius:2px;transition:transform .55s var(--ease),opacity .3s}
+.menu-btn span:first-child{top:18px}.menu-btn span:last-child{top:25px}
+.menu-open .menu-btn span:first-child{transform:translateY(3.5px) rotate(45deg)}
+.menu-open .menu-btn span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
+.overlay{position:fixed;inset:0;z-index:15;background:var(--bg);display:flex;flex-direction:column;justify-content:center;padding:6rem 2rem 3rem;gap:1.2rem;opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
+.overlay a{font-family:var(--serif);font-size:2.6rem;text-decoration:none;color:var(--teal-deep);transform:translateY(24px);opacity:0;transition:transform .7s var(--ease),opacity .7s var(--ease)}
+.menu-open .overlay{opacity:1;pointer-events:auto}
+.menu-open .overlay a{transform:none;opacity:1}
+.menu-open .overlay a:nth-child(2){transition-delay:.05s}.menu-open .overlay a:nth-child(3){transition-delay:.1s}
+.menu-open .overlay a:nth-child(4){transition-delay:.15s}.menu-open .overlay a:nth-child(5){transition-delay:.2s}
+@media(max-width:860px){.nav-links{display:none}.menu-btn{display:block}.nav{gap:.8rem;width:calc(100% - 2rem);justify-content:space-between}}
+
+/* ---------- Knöpfe: Pille mit Icon-Insel ---------- */
+.btn{display:inline-flex;align-items:center;gap:.9rem;padding:.5rem .55rem .5rem 1.35rem;border-radius:999px;text-decoration:none;font-weight:600;font-size:.98rem;transition:transform .5s var(--ease),background .4s var(--ease),box-shadow .5s var(--ease)}
+.btn .ico{width:2.3rem;height:2.3rem;border-radius:50%;display:grid;place-items:center;transition:transform .5s var(--ease)}
+.btn svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
+.btn:hover .ico{transform:translate(3px,-1px) scale(1.05)}
+.btn:active{transform:scale(.98)}
+.btn-primary{background:var(--teal-deep);color:#FBF7EF;box-shadow:0 14px 30px -16px rgba(15,43,43,.7)}
+.btn-primary .ico{background:rgba(251,247,239,.14)}
+.btn-primary:hover{background:var(--teal)}
+.btn-ghost{color:var(--teal-deep);box-shadow:inset 0 0 0 1px rgba(22,48,47,.18)}
+.btn-ghost .ico{background:rgba(31,72,72,.08)}
+.btn-ghost:hover{background:rgba(31,72,72,.05)}
+.btn-sm{padding:.35rem .4rem .35rem 1rem;font-size:.88rem}
+.btn-sm .ico{width:1.9rem;height:1.9rem}
+
+/* ---------- Telefon-Rahmen (echte App-Screens) ---------- */
+.phone{position:relative;border-radius:3rem;padding:.55rem;background:linear-gradient(160deg,#2a3a39,#0d1a1a 55%,#243433);box-shadow:var(--shadow-float),inset 0 0 0 1.5px rgba(255,255,255,.06)}
+.phone img{border-radius:2.5rem;width:100%;background:#FDFAF4}
+.phone::before{content:"";position:absolute;top:1.15rem;left:50%;width:28%;height:1.55rem;transform:translateX(-50%);border-radius:999px;background:#0b1414;z-index:2}
+.watch{border-radius:2.6rem;padding:.75rem;background:linear-gradient(150deg,#3a3f3d,#121515);box-shadow:var(--shadow-float)}
+.watch img{border-radius:1.9rem}
+
+/* ---------- Hero ---------- */
+.hero{min-height:100dvh;padding:8.5rem 0 5rem;display:grid;align-items:center;position:relative}
+.hero{overflow:clip}
+.hero::before{content:"";position:absolute;inset:-10% 0 auto auto;width:70vw;height:70vw;max-width:900px;max-height:900px;border-radius:50%;background:radial-gradient(circle at 40% 40%,rgba(232,155,123,.24),rgba(111,160,134,.12) 45%,transparent 70%);filter:blur(10px);z-index:-1}
+.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:3rem;align-items:center}
+.hero h1{margin:1.4rem 0 1.6rem}
+.hero .cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem}
+.hero .note{margin-top:1.3rem;font-size:.86rem;color:var(--muted)}
+.stage{position:relative;height:min(78vh,720px);min-height:560px}
+.stage .phone{position:absolute;width:min(300px,62%)}
+.stage .p1{right:14%;top:0;width:min(280px,56%);transform:rotate(3deg);z-index:2}
+.stage .p2{left:-4%;top:22%;width:min(230px,46%);transform:rotate(-6deg);z-index:1}
+.stage .watch{position:absolute;right:-2%;bottom:6%;width:min(160px,32%);z-index:3;transform:rotate(-2deg)}
+.chip{position:absolute;z-index:4;display:flex;align-items:center;gap:.6rem;padding:.65rem .9rem;border-radius:1.1rem;background:rgba(255,253,248,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 0 0 1px var(--hair),0 18px 40px -20px rgba(15,43,43,.4);font-size:.84rem;color:var(--ink2);line-height:1.3}
+.chip b{display:block;color:var(--teal-deep);font-weight:650}
+.chip .dot{width:2rem;height:2rem;border-radius:.7rem;display:grid;place-items:center;background:var(--coral-soft)}
+.chip .dot svg{width:1.05rem;height:1.05rem;fill:none;stroke:var(--coral-ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
+.chip.c1{left:-8%;top:-1%}
+.chip.c2{right:26%;bottom:-3%}
+@media(max-width:960px){
+  .hero{padding-top:7rem}
+  .hero-grid{grid-template-columns:1fr}
+  .stage{height:auto;min-height:0;display:flex;gap:1rem;justify-content:center;align-items:flex-end;margin-top:1rem}
+  .stage .phone,.stage .watch{position:relative;inset:auto;transform:none;opacity:1}
+  .stage .p1{width:min(260px,58%)}
+  .stage .p2{display:none}
+  .stage .watch{width:min(140px,32%)}
+  .chip{display:none}
+}
+
+/* ---------- Sektionen ---------- */
+section{padding:clamp(6rem,11vw,10rem) 0;position:relative}
+.head{max-width:46rem}
+.head h2{margin:1.2rem 0 1.2rem}
+.head p{font-size:1.12rem;max-width:40rem}
+
+/* Geschichte */
+.story{padding-top:4rem}
+.story-card{display:grid;grid-template-columns:auto 1fr;gap:2.4rem;align-items:start}
+.story blockquote{font-family:var(--serif);font-size:clamp(1.6rem,3.2vw,2.6rem);line-height:1.18;color:var(--teal-deep);letter-spacing:-.015em;font-weight:400}
+.story blockquote em{color:var(--coral-ink)}
+.story .by{margin-top:1.4rem;font-size:.95rem;color:var(--muted)}
+.mark{font-family:var(--serif);font-size:6rem;line-height:.7;color:var(--coral)}
+@media(max-width:767px){.story-card{grid-template-columns:1fr;gap:.6rem}.mark{font-size:4rem}}
+
+/* Doppelrahmen-Karten */
+.shell{border-radius:var(--r-xl);padding:.4rem;background:rgba(22,48,47,.035);box-shadow:inset 0 0 0 1px var(--hair)}
+.core{border-radius:calc(var(--r-xl) - .4rem);background:var(--paper);box-shadow:inset 0 1px 1px rgba(255,255,255,.9),0 1px 2px rgba(15,43,43,.04);height:100%;overflow:hidden}
+
+/* Akut: Split */
+.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
+.split.rev{grid-template-columns:1.1fr .9fr}
+.split.rev .media{order:-1}
+.phones-duo{display:flex;gap:1.4rem;align-items:flex-start;justify-content:center}
+.phones-duo .phone{width:min(260px,48%)}
+.phones-duo .phone:nth-child(2){margin-top:4rem}
+.points{list-style:none;margin-top:2rem;display:grid;gap:1.1rem}
+.points li{display:grid;grid-template-columns:2.4rem 1fr;gap:.9rem;align-items:start}
+.points .pi{width:2.4rem;height:2.4rem;border-radius:.85rem;display:grid;place-items:center;background:var(--sage-soft)}
+.points .pi svg{width:1.15rem;height:1.15rem;fill:none;stroke:var(--teal);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
+.points b{display:block;color:var(--teal-deep);font-weight:650;margin-bottom:.1rem}
+.points span{color:var(--ink2);font-size:.98rem}
+@media(max-width:960px){.split,.split.rev{grid-template-columns:1fr}.split.rev .media{order:0}}
+
+/* Sprechstunde: Bento */
+.band-doc{background:var(--bg2)}
+.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:1.1rem;margin-top:3.5rem}
+.b-report{grid-column:span 7;grid-row:span 2}
+.b-hear{grid-column:span 5;grid-row:span 2}
+.b-small{grid-column:span 4}
+.tile{padding:1.8rem;display:flex;flex-direction:column;gap:.7rem}
+.tile h3{margin-top:.2rem}
+.tile p{font-size:.98rem}
+.tile .ti{width:2.6rem;height:2.6rem;border-radius:.9rem;display:grid;place-items:center;background:var(--coral-soft)}
+.tile .ti svg{width:1.2rem;height:1.2rem;fill:none;stroke:var(--coral-ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
+.tile .shot{margin-top:auto;padding-top:1.4rem}
+.b-report .shot img{border-radius:1rem;box-shadow:0 0 0 1px var(--hair),0 20px 40px -26px rgba(15,43,43,.45)}
+.b-hear .shot{display:flex;justify-content:center}
+.b-hear .phone{width:min(250px,82%)}
+.tag{align-self:flex-start;font-size:.72rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);background:var(--sage-soft);border-radius:999px;padding:.28rem .7rem}
+@media(max-width:960px){.b-report,.b-hear,.b-small{grid-column:1/-1;grid-row:auto}}
+
+/* Ehrlich: dunkles Band */
+.honest{background:var(--teal-deep);color:#E8EFEC;border-radius:clamp(1.5rem,4vw,3rem);margin:0 clamp(.5rem,2vw,1.5rem)}
+.honest h2,.honest h3{color:#FBF7EF}
+.honest h2 em{color:var(--coral)}
+.honest p{color:rgba(232,239,236,.78)}
+.honest .eyebrow{color:#E8EFEC;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
+.honest .phone{background:linear-gradient(160deg,#0b1414,#1d2d2c)}
+.facts{display:grid;gap:.8rem;margin-top:2.4rem}
+.fact{display:grid;grid-template-columns:5.5rem 1fr;gap:1rem;align-items:center;border-radius:1.4rem;padding:1.1rem 1.4rem;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
+.fact strong{display:block;font-family:var(--serif);font-size:2.4rem;font-weight:400;color:#FBF7EF;line-height:1}
+.fact span{display:block;font-size:.92rem;color:rgba(232,239,236,.72)}
+.src{margin-top:1.4rem;font-size:.8rem;color:rgba(232,239,236,.55)}
+@media(max-width:767px){.facts{grid-template-columns:1fr}}
+
+/* Familie */
+.family .phone{width:min(290px,80%);margin-inline:auto}
+
+/* Wissen */
+.myths{display:grid;gap:.8rem;margin-top:2.4rem}
+.myth{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:baseline;padding:1.1rem 1.3rem;border-radius:1.2rem;background:var(--paper);box-shadow:inset 0 0 0 1px var(--hair)}
+.myth .v{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--coral-ink)}
+.myth p{color:var(--ink);font-family:var(--serif);font-size:1.18rem;line-height:1.35}
+.myth small{display:block;font-family:var(--sans);font-size:.88rem;color:var(--muted);margin-top:.25rem}
+
+/* Datenschutz */
+.privacy-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:3rem}
+.pv{padding:1.5rem}
+.pv h3{font-size:1.25rem;margin:.9rem 0 .4rem}
+.pv p{font-size:.95rem}
+@media(max-width:960px){.privacy-grid{grid-template-columns:1fr 1fr}}
+@media(max-width:600px){.privacy-grid{grid-template-columns:1fr}}
+
+/* Preise */
+.pricing{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:3rem}
+.plan .core{padding:2.2rem}
+.plan .price{font-family:var(--serif);font-size:3rem;line-height:1;color:var(--teal-deep);margin:.9rem 0 .2rem}
+.plan .price small{font-family:var(--sans);font-size:1rem;color:var(--muted)}
+.plan ul{list-style:none;margin-top:1.4rem;display:grid;gap:.65rem}
+.plan li{display:grid;grid-template-columns:1.3rem 1fr;gap:.6rem;font-size:.98rem;color:var(--ink2)}
+.plan li svg{width:1.1rem;height:1.1rem;margin-top:.25rem;fill:none;stroke:var(--sage);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
+.plan.plus .core{background:linear-gradient(180deg,#FFFDF8,#FBF1EA)}
+.opts{display:grid;gap:.5rem;margin-top:1.4rem}
+.opt{display:flex;justify-content:space-between;align-items:baseline;padding:.75rem 1rem;border-radius:1rem;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px var(--hair);font-size:.95rem}
+.opt b{white-space:nowrap;font-family:var(--serif);font-size:1.25rem;font-weight:500;color:var(--teal-deep)}
+@media(max-width:860px){.pricing{grid-template-columns:1fr}}
+
+/* FAQ */
+.faq{max-width:52rem;margin-top:2.6rem}
+.faq details{border-bottom:1px solid var(--hair);padding:1.2rem 0}
+.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;font-family:var(--serif);font-size:1.3rem;color:var(--teal-deep)}
+.faq summary::-webkit-details-marker{display:none}
+.faq summary::after{content:"+";font-family:var(--sans);font-weight:300;font-size:1.6rem;line-height:1;transition:transform .5s var(--ease)}
+.faq details[open] summary::after{transform:rotate(45deg)}
+.faq details p{margin-top:.8rem;max-width:44rem}
+
+/* Abschluss & Fußzeile */
+.closing{text-align:center}
+.closing h2{max-width:16ch;margin:1.2rem auto 1.4rem}
+.closing p{margin:0 auto;max-width:38rem}
+.closing .cta-row{display:flex;justify-content:center;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem}
+footer{padding:3.5rem 0 4rem;border-top:1px solid var(--hair);font-size:.92rem;color:var(--muted)}
+.foot{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}
+.foot nav{display:flex;gap:1.4rem;flex-wrap:wrap}
+.foot a{text-decoration:none}
+.foot a:hover{color:var(--teal-deep)}
+.disclaimer{max-width:40rem;margin-top:.6rem}
+
+/* Einblenden beim Scrollen */
+.reveal{opacity:0;transform:translateY(3rem);filter:blur(8px);transition:opacity 1s var(--ease),transform 1.1s var(--ease),filter 1s var(--ease)}
+.reveal.in{opacity:1;transform:none;filter:none}
+.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
+.stage .reveal.in.p1{transform:rotate(3deg)}
+.stage .reveal.in.p2{transform:rotate(-6deg)}
+.stage .reveal.in.watch{transform:rotate(-2deg)}
+@media(max-width:960px){.stage .reveal.in.p1,.stage .reveal.in.p2,.stage .reveal.in.watch{transform:none}}
+@media(prefers-reduced-motion:reduce){
+  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
+  .reveal{opacity:1;transform:none;filter:none}
+}
+
+/* Rechtstexte */
+.legal{padding:9rem 0 5rem}
+.legal .wrap{max-width:46rem}
+.legal h1{font-size:clamp(2.4rem,5vw,3.6rem);margin:1rem 0 1.4rem}
+.legal h2{font-size:1.7rem;margin:2.6rem 0 .8rem}
+.legal h3{font-family:var(--sans);font-size:1.05rem;font-weight:650;letter-spacing:0;color:var(--teal-deep);margin:1.6rem 0 .4rem}
+.legal p,.legal li{color:var(--ink2);margin-top:.6rem}
+.legal ul{padding-left:1.2rem}
+.legal .box{margin-top:1.6rem;padding:1.4rem 1.6rem;border-radius:1.4rem;background:var(--paper);box-shadow:inset 0 0 0 1px var(--hair)}
+.legal a{color:var(--teal);text-underline-offset:3px}
+
+@media(max-width:600px){.myth{grid-template-columns:1fr;gap:.3rem}}

datenschutz.html

@@ -1,149 +1,87 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="de">
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Datenschutzerklärung · Equilo</title>
+<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
+<title>Datenschutz · Equilo</title>
+<meta name="description" content="Datenschutzerklärung für die Website und die iOS-App Equilo.">
 <meta name="robots" content="index,follow">
-<style>
-  :root{
-    --font-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
-    --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
-    --cream:#FDFAF4; --cream2:#FAF5EB; --teal:#1F4848; --teal900:#0E2A2A;
-    --coral:#E89B7B; --ink:#23302E; --ink-soft:#4A5654; --ink-muted:#6B7E7E; --border:#E4DCCB;
-  }
-  *{box-sizing:border-box;margin:0;padding:0}
-  body{font-family:var(--font-sans);color:var(--ink);background:var(--cream);line-height:1.65}
-  a{color:var(--teal)}
-  .wrap{max-width:760px;margin:0 auto;padding:0 24px}
-  nav{border-bottom:1px solid var(--border);background:var(--cream)}
-  nav .wrap{display:flex;align-items:center;gap:10px;height:64px}
-  .brand{display:flex;align-items:center;gap:10px;font-family:var(--font-serif);font-weight:600;font-size:1.25rem;color:var(--teal900)}
-  .brand svg{width:28px;height:28px}
-  main{padding:56px 0 72px}
-  h1{font-family:var(--font-serif);font-size:2.2rem;color:var(--teal900);margin-bottom:8px}
-  .lead{color:var(--ink-soft);margin-bottom:8px}
-  .stand{color:var(--ink-muted);font-size:.9rem;margin-bottom:28px}
-  h2{font-family:var(--font-serif);font-size:1.3rem;color:var(--teal900);margin:34px 0 8px}
-  h3{font-size:1.02rem;color:var(--teal);margin:18px 0 6px}
-  p{margin:8px 0}
-  ul{margin:8px 0 8px 22px}
-  li{margin:5px 0}
-  .highlight{background:var(--cream2);border:1px solid var(--border);border-radius:16px;padding:22px;margin-top:14px}
-  footer{border-top:1px solid var(--border);padding:28px 0;color:var(--ink-muted);font-size:.9rem}
-  footer a{color:var(--ink-soft)}
-</style>
+<link rel="icon" href="assets/img/favicon.svg" type="image/svg+xml">
+<link rel="stylesheet" href="assets/site.css">
 </head>
 <body>
-<nav><div class="wrap">
-  <a class="brand" href="index.html">
-    <svg viewBox="0 0 64 64" aria-hidden="true"><circle cx="32" cy="33" r="22" fill="none" stroke="#1F4848" stroke-width="5" stroke-dasharray="105 60" stroke-linecap="round" transform="rotate(40 32 33)"/><circle cx="36" cy="40" r="4.4" fill="#E89B7B"/></svg>
+<header class="nav">
+  <a class="brand" href="./" aria-label="Equilo, zur Startseite">
+    <svg viewBox="0 0 64 64" aria-hidden="true"><circle cx="32" cy="33" r="22" fill="none" stroke="#1F4848" stroke-width="5" stroke-dasharray="105 60" stroke-linecap="round" transform="rotate(40 32 33)"/><circle cx="30" cy="31" r="11" fill="none" stroke="#1F4848" stroke-width="4.5" stroke-dasharray="50 35" stroke-linecap="round" transform="rotate(60 30 31)"/><circle cx="36" cy="40" r="4.4" fill="#E89B7B"/></svg>
     Equilo
   </a>
-</div></nav>
+  <a class="btn btn-ghost btn-sm" href="./">Startseite<span class="ico"><svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg></span></a>
+</header>
 
-<main><div class="wrap">
-  <h1>Datenschutzerklärung</h1>
-  <p class="lead">Diese Erklärung gilt für diese Website (equilo) und für die iOS-App Equilo.</p>
-  <p class="stand">Stand: Oktober 2026</p>
+<main class="legal">
+  <div class="wrap">
+    <span class="eyebrow"><i></i>Stand: Oktober 2026 · App-Version 2.0</span>
+    <h1>Datenschutz&shy;erklärung</h1>
+    <p>Diese Erklärung gilt für diese Website und für die iOS-, iPadOS- und watchOS-App Equilo.</p>
 
-  <div class="highlight">
-    <p><strong>Das Wichtigste vorweg:</strong> Equilo ist als App bewusst <em>local-first</em>.
-    Deine Tagebuch-Daten liegen auf deinem Gerät und, wenn du es möchtest, in deiner
-    <strong>privaten iCloud</strong>. Es gibt <strong>kein Nutzerkonto</strong>, <strong>keinen
-    eigenen Server</strong>, der deine Gesundheitsdaten speichert, <strong>kein Tracking</strong>
-    und <strong>keine Werbung</strong>. Daten aus Apple Health bleiben ausschließlich auf deinem
-    Gerät.</p>
+    <div class="box">
+      <p><strong>Das Wichtigste zuerst:</strong> Deine Tagebuch-Daten liegen auf deinem Gerät und, wenn du willst, in deiner privaten iCloud. Es gibt kein Nutzerkonto und keinen eigenen Server, der deine Gesundheitsdaten speichert. Equilo enthält keine Werbung und kein Analyse- oder Tracking-Werkzeug von Drittanbietern. Wir als Anbieter sehen deine Einträge nicht.</p>
+    </div>
+
+    <h2>1. Verantwortlicher</h2>
+    <p>Till Heidrich – Content Creation<br>Till Heidrich<br>Rotdornweg 17, 21255 Tostedt, Deutschland<br>E-Mail: <a href="mailto:website@tillheidrich.de">website@tillheidrich.de</a><br>Telefon: +49 1577 3953819</p>
+
+    <h2>2. Diese Website</h2>
+    <h3>Hosting und Server-Logfiles</h3>
+    <p>Die Website läuft auf einem Server in Deutschland (Hetzner Online GmbH, betrieben über eine selbst gehostete Coolify-Instanz). Beim Aufruf verarbeitet der Server technisch notwendige Zugriffsdaten in Logfiles: IP-Adresse, Datum und Uhrzeit, aufgerufene Adresse, übertragene Datenmenge und den anfragenden Browser. Das dient der Auslieferung und Sicherheit der Website und beruht auf unserem berechtigten Interesse (Art. 6 Abs. 1 lit. f DSGVO). Die Logs werden nur kurz aufbewahrt und nicht mit anderen Daten zusammengeführt.</p>
+    <h3>Keine Cookies, kein Tracking, keine externen Dienste</h3>
+    <p>Diese Website setzt keine Cookies, nutzt keine Analyse- oder Tracking-Werkzeuge und lädt keine Inhalte von fremden Servern. Schriften und Bilder liegen auf unserem eigenen Server.</p>
+    <h3>Kontakt per E-Mail</h3>
+    <p>Wenn du uns schreibst, etwa für die Beta, verarbeiten wir deine Angaben nur, um deine Anfrage zu beantworten (Art. 6 Abs. 1 lit. b und f DSGVO), und löschen sie, sobald sie nicht mehr gebraucht werden.</p>
+
+    <h2>3. Die App Equilo</h2>
+    <h3>Was du einträgst und wo es liegt</h3>
+    <p>Du gibst deine Daten selbst ein: Schwindelanfälle mit Art, Stärke, Dauer, Symptomen, Warnzeichen und vermuteten Auslösern, Tageseinträge (zum Beispiel Gleichgewicht, Stimmung, Belastung, Schlaf, Tinnitus), Vorzeichen, Medikamente und Einnahmen, Therapie-Ereignisse, Hörtests, Fragen für den Arzttermin, Notizen sowie optionale Anhänge wie Fotos von Befunden oder Augen-Videos. Diese Daten speichert Equilo lokal auf deinem Gerät.</p>
+    <h3>iCloud (optional)</h3>
+    <p>Wenn du es eingeschaltet lässt, gleicht Equilo deine Daten über Apples iCloud (CloudKit, private Datenbank) zwischen deinen eigenen Geräten ab. Die Daten liegen dann in deiner persönlichen iCloud, auf die nur du Zugriff hast. Anbieter ist Apple; es gelten die <a href="https://www.apple.com/de/legal/privacy/">Datenschutzrichtlinien von Apple</a>. Wir haben keinen Zugriff. Du kannst den Abgleich in den Einstellungen jederzeit ausschalten.</p>
+    <h3>Apple Health (optional)</h3>
+    <p>Nur mit deiner ausdrücklichen Erlaubnis liest Equilo Werte aus Apple Health: Schlaf, Herzfrequenzvariabilität, Ruhepuls, Atemfrequenz, Gefühlslage (State of Mind), Zeit bei Tageslicht, Kopfhörerpegel und Hörtests (zum Beispiel den AirPods-Hörtest). Vitalwerte wertet die App nur auf deinem Gerät aus, etwa für die Musteranalyse, und speichert sie nicht in ihrer Datenbank. Übernommene Hörtests legt Equilo als Eintrag in deinem Tagebuch ab; sie werden dann wie deine anderen Einträge gegebenenfalls über deine iCloud abgeglichen.</p>
+    <p>Nur wenn du es in den Einstellungen einschaltest, trägt Equilo beendete Anfälle als Symptom „Schwindel“ (mit Stärke) und gegebenenfalls Übelkeit in Apple Health ein. Du kannst diese Berechtigungen jederzeit in den iOS-Einstellungen unter Health widerrufen.</p>
+    <h3>Wetter und Standort</h3>
+    <p>Wenn du die Wetter-Funktion nutzt, ruft die App Luftdruck- und Wetterdaten vom Dienst Open-Meteo (Schweiz/EU) ab. Dafür werden die Koordinaten des von dir eingegebenen Orts übertragen, ohne Konto und ohne Angaben, die dich identifizieren. Die Funktion ist optional.</p>
+    <p>Deinen genauen Standort fragt Equilo nur ab, wenn du im Akut-Modus auf „Nachricht mit Standort senden“ tippst. Er wird dann als Kartenlink in eine Nachricht eingefügt, die du selbst an deine Vertrauensperson schickst. Equilo speichert den Standort nicht und überträgt ihn nicht an uns.</p>
+    <h3>Kamera, Mikrofon und Kontakte</h3>
+    <p>Kamera und Mikrofon nutzt Equilo nur, wenn du ein Augen-Video aufnimmst. Das Video liegt in deinem Tagebuch und wird von der App nicht ausgewertet. Für die Vertrauensperson kannst du einen Kontakt über die Kontaktauswahl von iOS wählen; Equilo erhält dabei nur Name und Telefonnummer dieses einen Kontakts und keinen Zugriff auf dein Adressbuch.</p>
+    <h3>Apple Intelligence</h3>
+    <p>Auf Geräten mit Apple Intelligence kann Equilo aus deiner Beschreibung einen Eintrag vorschlagen oder Fragen für den Arzttermin formulieren. Das passiert mit Apples Sprachmodell direkt auf deinem Gerät. Es werden dafür keine Daten an uns oder an einen Server gesendet. Jeder Vorschlag ist ein Entwurf, den du prüfst.</p>
+    <h3>„So geht's mir“ und Exporte</h3>
+    <p>Bilder für Familie und Partner, PDF-Berichte, CSV-Dateien und Backups erzeugt Equilo auf deinem Gerät. Sie verlassen das Gerät nur, wenn du sie selbst teilst. Temporäre Exportdateien werden nach dem Teilen gelöscht.</p>
+    <h3>In-App-Käufe (Equilo Plus)</h3>
+    <p>Plus kaufst du optional als Abo oder Einmalkauf. Der Kauf läuft vollständig über den App Store von Apple; Zahlungsdaten erhalten wir nicht. Die App prüft den Kaufstatus über Apples StoreKit auf deinem Gerät. Abos verwaltest und kündigst du in den Einstellungen deines Apple-Accounts.</p>
+    <h3>Fehlerprotokoll und Absturzberichte</h3>
+    <p>Equilo führt ein technisches Fehlerprotokoll nur auf deinem Gerät. Dazu gehören von iOS bereitgestellte Diagnosedaten (MetricKit) zu Abstürzen, ohne Gesundheitsdaten. Das Protokoll verlässt das Gerät nur, wenn du es selbst exportierst oder uns schickst.</p>
+    <h3>Mitteilungen</h3>
+    <p>Erinnerungen plant Equilo lokal auf deinem Gerät. Es gibt keinen Push-Server.</p>
+    <h3>Rechtsgrundlage für Gesundheitsdaten</h3>
+    <p>Gesundheitsdaten sind besondere Kategorien personenbezogener Daten (Art. 9 DSGVO). Du gibst sie freiwillig selbst ein; die Verarbeitung auf deinem Gerät erfolgt auf Grundlage deiner Einwilligung (Art. 9 Abs. 2 lit. a DSGVO) und ausschließlich zu deinem eigenen Zweck der Dokumentation.</p>
+
+    <h2>4. Deine Rechte</h2>
+    <p>Du hast das Recht auf Auskunft, Berichtigung, Löschung, Einschränkung der Verarbeitung, Datenübertragbarkeit und Widerspruch sowie das Recht, eine Einwilligung jederzeit zu widerrufen.</p>
+    <p>Weil deine App-Daten auf deinem Gerät und in deiner privaten iCloud liegen, hast du sie selbst in der Hand: Du kannst einzelne Einträge oder alles direkt in der App löschen (Einstellungen › Alle Daten löschen), ein Backup exportieren und die App jederzeit entfernen. Für Fragen zur Website wende dich an die oben genannte Adresse.</p>
+
+    <h2>5. Beschwerderecht</h2>
+    <p>Du kannst dich bei einer Datenschutz-Aufsichtsbehörde beschweren. Zuständig ist die Landesbeauftragte für den Datenschutz Niedersachsen.</p>
+
+    <h2>6. Änderungen</h2>
+    <p>Wir passen diese Erklärung an, wenn sich die App oder die Rechtslage ändert. Es gilt die hier veröffentlichte Fassung.</p>
   </div>
+</main>
 
-  <h2>1. Verantwortlicher</h2>
-  <p>Till Heidrich – Content Creation<br>
-  Till Heidrich<br>
-  Rotdornweg 17, 21255 Tostedt, Deutschland<br>
-  E-Mail: <a href="mailto:website@tillheidrich.de">website@tillheidrich.de</a><br>
-  Telefon: +49 1577 3953819</p>
-
-  <h2>2. Diese Website</h2>
-  <h3>Hosting und Server-Logfiles</h3>
-  <p>Diese Website wird auf einem Server in Deutschland (Hetzner Online GmbH, betrieben über
-  eine selbst gehostete Coolify-Instanz) bereitgestellt. Beim Aufruf der Seite werden
-  technisch notwendige Zugriffsdaten in Server-Logfiles verarbeitet: IP-Adresse, Datum und
-  Uhrzeit, aufgerufene Adresse, übertragene Datenmenge sowie der anfragende Browser. Diese
-  Verarbeitung dient der technischen Auslieferung und Sicherheit der Website und beruht auf
-  unserem berechtigten Interesse (Art. 6 Abs. 1 lit. f DSGVO). Die Logs werden nur kurz
-  vorgehalten und nicht mit anderen Daten zusammengeführt.</p>
-  <h3>Keine Cookies, kein Tracking</h3>
-  <p>Diese Website setzt <strong>keine Cookies</strong>, nutzt <strong>keine Analyse- oder
-  Tracking-Werkzeuge</strong> und bindet <strong>keine externen Schriftarten oder
-  CDN-Dienste</strong> ein. Es findet keine Profilbildung statt.</p>
-  <h3>Kontaktaufnahme</h3>
-  <p>Wenn du uns per E-Mail schreibst (z. B. für die Beta), verarbeiten wir deine Angaben nur,
-  um deine Anfrage zu bearbeiten (Art. 6 Abs. 1 lit. b und f DSGVO). Wir löschen diese Daten,
-  sobald sie nicht mehr benötigt werden.</p>
-
-  <h2>3. Die App Equilo</h2>
-  <h3>Welche Daten verarbeitet werden und wo sie liegen</h3>
-  <p>Du gibst deine Daten selbst in die App ein: Schwindelanfälle, Begleitsymptome, Trigger,
-  Tageseinträge, Medikamente, Notizen und optionale Anhänge (z. B. Audiogramme). Diese Daten
-  werden <strong>lokal auf deinem Gerät</strong> in einer App-Datenbank gespeichert.</p>
-  <h3>iCloud-Synchronisation (optional)</h3>
-  <p>Wenn du es aktivierst, gleicht Equilo deine Daten über Apples <strong>iCloud (CloudKit,
-  private Datenbank)</strong> zwischen deinen eigenen Geräten (iPhone, iPad, Apple Watch) ab.
-  Die Daten liegen dann in deiner persönlichen iCloud, auf die nur du Zugriff hast. Anbieter
-  dieser Synchronisation ist Apple; es gelten die
-  <a href="https://www.apple.com/legal/privacy/de-ww/" rel="nofollow">Datenschutzrichtlinien von Apple</a>.
-  Wir als Anbieter haben <strong>keinen Zugriff</strong> auf diese Daten. Die iCloud-Synchronisation
-  lässt sich in den Einstellungen jederzeit ausschalten.</p>
-  <h3>Apple Health</h3>
-  <p>Nur mit deiner ausdrücklichen Erlaubnis liest Equilo einzelne Werte aus Apple Health
-  (Schlaf, Herzfrequenzvariabilität, Ruhepuls) und zeigt sie als zusätzliche Hinweise in deiner
-  Tagesübersicht. Equilo schreibt keine Daten nach Apple Health.
-  Diese Werte bleiben <strong>ausschließlich auf deinem Gerät</strong> und werden nicht in die
-  iCloud übertragen und nicht weitergegeben. Du kannst die Berechtigung jederzeit in den
-  iOS-Einstellungen widerrufen.</p>
-  <h3>Wetter und Standort</h3>
-  <p>Wenn du die Wetter-Funktion nutzt, ruft die App Luftdruck- und Wetterdaten für deinen Ort
-  vom Dienst <strong>Open-Meteo</strong> (Open-Meteo, EU/Schweiz) ab. Dazu werden Koordinaten
-  bzw. ein eingegebener Ortsname übertragen, ohne Nutzerkonto und ohne dich identifizierende
-  Angaben. Die Funktion ist optional.</p>
-  <h3>In-App-Käufe (Equilo Plus)</h3>
-  <p>Equilo Plus kannst du optional als Abo oder Einmalkauf erwerben. Der Kauf wird vollständig
-  über den App Store von Apple abgewickelt; Zahlungsdaten erhalten wir nicht. Die App prüft den
-  Kaufstatus ausschließlich über Apples StoreKit auf deinem Gerät. Es gelten die
-  Datenschutzrichtlinien von Apple. Abos verwaltest und kündigst du in den Einstellungen deines
-  Apple-Accounts.</p>
-  <h3>Feedback und Fehlerprotokoll</h3>
-  <p>Die App führt ein technisches Fehlerprotokoll nur auf deinem Gerät (Fehlermeldung und
-  Zeitstempel, keine Gesundheitsdaten). Es wird nur übertragen, wenn du es selbst exportierst
-  oder uns per E-Mail Feedback schickst.</p>
-  <h3>Kein Konto, kein Server, kein Tracking</h3>
-  <p>Equilo verlangt kein Nutzerkonto, überträgt deine Gesundheitsdaten nicht an einen eigenen
-  Server, enthält keine Werbung und kein Analyse-/Tracking-SDK von Drittanbietern.</p>
-  <h3>Rechtsgrundlage für Gesundheitsdaten</h3>
-  <p>Gesundheitsdaten sind besondere Kategorien personenbezogener Daten (Art. 9 DSGVO). Du
-  gibst sie freiwillig selbst ein; die Verarbeitung erfolgt auf Grundlage deiner Einwilligung
-  (Art. 9 Abs. 2 lit. a DSGVO) und ausschließlich zu deinem eigenen Zweck der Dokumentation.</p>
-
-  <h2>4. Deine Rechte</h2>
-  <p>Du hast das Recht auf Auskunft, Berichtigung, Löschung, Einschränkung der Verarbeitung,
-  Datenübertragbarkeit und Widerspruch sowie das Recht, eine erteilte Einwilligung jederzeit
-  zu widerrufen.</p>
-  <p>Da deine App-Daten lokal bzw. in deiner privaten iCloud liegen, hast du die volle
-  Kontrolle: Du kannst einzelne Einträge oder alle Daten direkt in der App löschen, ein Backup
-  exportieren und die App jederzeit entfernen. Für die Website-bezogene Verarbeitung wende dich
-  an die oben genannte Kontaktadresse.</p>
-
-  <h2>5. Beschwerderecht</h2>
-  <p>Du hast das Recht, dich bei einer Datenschutz-Aufsichtsbehörde zu beschweren. Zuständig
-  ist die Landesbeauftragte für den Datenschutz Niedersachsen (LfD Niedersachsen).</p>
-
-  <h2>6. Änderungen</h2>
-  <p>Wir passen diese Datenschutzerklärung an, wenn sich die App oder die Rechtslage ändert.
-  Es gilt jeweils die hier veröffentlichte Fassung.</p>
-</div></main>
-
-<footer><div class="wrap">
-  © 2026 Equilo · Till Heidrich · <a href="impressum.html">Impressum</a> · <a href="index.html">Startseite</a>
-</div></footer>
+<footer>
+  <div class="wrap foot">
+    <div><a class="brand" href="./">Equilo</a><p class="disclaimer">Equilo ist ein Tagebuch und kein Medizinprodukt.</p></div>
+    <nav aria-label="Rechtliches"><a href="impressum.html">Impressum</a><a href="datenschutz.html">Datenschutz</a><a href="./">Startseite</a></nav>
+  </div>
+</footer>
 </body>
 </html>

impressum.html

@@ -1,90 +1,56 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="de">
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
 <title>Impressum · Equilo</title>
-<meta name="robots" content="index,follow">
-<style>
-  :root{
-    --font-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
-    --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
-    --cream:#FDFAF4; --cream2:#FAF5EB; --teal:#1F4848; --teal900:#0E2A2A;
-    --coral:#E89B7B; --ink:#23302E; --ink-soft:#4A5654; --ink-muted:#6B7E7E; --border:#E4DCCB;
-  }
-  *{box-sizing:border-box;margin:0;padding:0}
-  body{font-family:var(--font-sans);color:var(--ink);background:var(--cream);line-height:1.65}
-  a{color:var(--teal)}
-  .wrap{max-width:760px;margin:0 auto;padding:0 24px}
-  nav{border-bottom:1px solid var(--border);background:var(--cream)}
-  nav .wrap{display:flex;align-items:center;gap:10px;height:64px}
-  .brand{display:flex;align-items:center;gap:10px;font-family:var(--font-serif);font-weight:600;font-size:1.25rem;color:var(--teal900)}
-  .brand svg{width:28px;height:28px}
-  main{padding:56px 0 72px}
-  h1{font-family:var(--font-serif);font-size:2.2rem;color:var(--teal900);margin-bottom:8px}
-  .lead{color:var(--ink-soft);margin-bottom:32px}
-  h2{font-family:var(--font-serif);font-size:1.25rem;color:var(--teal900);margin:32px 0 10px}
-  p{margin:8px 0}
-  .card{background:var(--cream2);border:1px solid var(--border);border-radius:16px;padding:22px;margin-top:10px}
-  footer{border-top:1px solid var(--border);padding:28px 0;color:var(--ink-muted);font-size:.9rem}
-  footer a{color:var(--ink-soft)}
-</style>
+<meta name="description" content="Impressum der Website und App Equilo.">
+<link rel="icon" href="assets/img/favicon.svg" type="image/svg+xml">
+<link rel="stylesheet" href="assets/site.css">
 </head>
 <body>
-<nav><div class="wrap">
-  <a class="brand" href="index.html">
-    <svg viewBox="0 0 64 64" aria-hidden="true"><circle cx="32" cy="33" r="22" fill="none" stroke="#1F4848" stroke-width="5" stroke-dasharray="105 60" stroke-linecap="round" transform="rotate(40 32 33)"/><circle cx="36" cy="40" r="4.4" fill="#E89B7B"/></svg>
+<header class="nav">
+  <a class="brand" href="./" aria-label="Equilo, zur Startseite">
+    <svg viewBox="0 0 64 64" aria-hidden="true"><circle cx="32" cy="33" r="22" fill="none" stroke="#1F4848" stroke-width="5" stroke-dasharray="105 60" stroke-linecap="round" transform="rotate(40 32 33)"/><circle cx="30" cy="31" r="11" fill="none" stroke="#1F4848" stroke-width="4.5" stroke-dasharray="50 35" stroke-linecap="round" transform="rotate(60 30 31)"/><circle cx="36" cy="40" r="4.4" fill="#E89B7B"/></svg>
     Equilo
   </a>
-</div></nav>
+  <a class="btn btn-ghost btn-sm" href="./">Startseite<span class="ico"><svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg></span></a>
+</header>
 
-<main><div class="wrap">
-  <h1>Impressum</h1>
-  <p class="lead">Angaben gemäß § 5 DDG (Digitale-Dienste-Gesetz).</p>
+<main class="legal">
+  <div class="wrap">
+    <span class="eyebrow"><i></i>Angaben gemäß § 5 DDG</span>
+    <h1>Impressum</h1>
+    <p>Till Heidrich – Content Creation<br>Till Heidrich<br>Rotdornweg 17<br>21255 Tostedt<br>Deutschland</p>
 
-  <div class="card">
-    <p><strong>Till Heidrich – Content Creation</strong><br>
-    Till Heidrich<br>
-    Rotdornweg 17<br>
-    21255 Tostedt<br>
-    Deutschland</p>
+    <h2>Kontakt</h2>
+    <p>Telefon: +49 1577 3953819<br>E-Mail: <a href="mailto:website@tillheidrich.de">website@tillheidrich.de</a><br>Web: <a href="https://tillheidrich.de">tillheidrich.de</a></p>
+
+    <h2>Umsatzsteuer</h2>
+    <p>Kleinunternehmer gemäß § 19 UStG, daher wird keine Umsatzsteuer ausgewiesen.</p>
+
+    <h2>Verantwortlich für den Inhalt nach § 18 Abs. 2 MStV</h2>
+    <p>Till Heidrich, Rotdornweg 17, 21255 Tostedt</p>
+
+    <h2>Zur App Equilo</h2>
+    <p>Equilo ist eine App für iPhone, iPad und Apple Watch (Schwindel- und Menière-Tagebuch) von Till Heidrich – Content Creation. Die App ist ein digitales Tagebuch und kein Medizinprodukt im Sinne der Medizinprodukte-Verordnung (MDR). Sie stellt keine Diagnose, sagt keine Anfälle voraus und ersetzt keine ärztliche Beratung oder Behandlung.</p>
+
+    <h2>Verbraucherstreitbeilegung</h2>
+    <p>Ich bin nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.</p>
+
+    <h2>Haftung für Inhalte</h2>
+    <p>Als Diensteanbieter bin ich nach § 7 Abs. 1 DDG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 DDG bin ich jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen. Wenn mir Rechtsverletzungen bekannt werden, entferne ich die betreffenden Inhalte umgehend.</p>
+
+    <h2>Haftung für Links</h2>
+    <p>Diese Website enthält Links zu externen Webseiten Dritter, auf deren Inhalte ich keinen Einfluss habe. Für diese Inhalte ist der jeweilige Anbieter verantwortlich. Wenn mir Rechtsverletzungen bekannt werden, entferne ich solche Links umgehend.</p>
   </div>
+</main>
 
-  <h2>Kontakt</h2>
-  <p>Telefon: +49 1577 3953819<br>
-  E-Mail: <a href="mailto:website@tillheidrich.de">website@tillheidrich.de</a><br>
-  Web: <a href="https://tillheidrich.de">tillheidrich.de</a></p>
-
-  <h2>Verantwortlich für den Inhalt nach § 18 Abs. 2 MStV</h2>
-  <p>Till Heidrich, Rotdornweg 17, 21255 Tostedt</p>
-
-  <h2>Zur App Equilo</h2>
-  <p>Equilo ist eine private iOS-Anwendung (Schwindel- und Menière-Tagebuch) von
-  Till Heidrich – Content Creation. Die App ist ein digitales Tagebuch und kein
-  Medizinprodukt nach der Medizinprodukte-Verordnung (MDR). Sie ersetzt keine ärztliche
-  Diagnose oder Therapie.</p>
-
-  <h2>EU-Streitschlichtung</h2>
-  <p>Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit:
-  <a href="https://ec.europa.eu/consumers/odr/" rel="nofollow">https://ec.europa.eu/consumers/odr/</a>.
-  Ich bin nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer
-  Verbraucherschlichtungsstelle teilzunehmen.</p>
-
-  <h2>Haftung für Inhalte</h2>
-  <p>Als Diensteanbieter bin ich gemäß § 7 Abs. 1 DDG für eigene Inhalte auf diesen Seiten
-  nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 DDG bin ich als
-  Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde
-  Informationen zu überwachen. Bei Bekanntwerden von Rechtsverletzungen entferne ich die
-  betreffenden Inhalte umgehend.</p>
-
-  <h2>Haftung für Links</h2>
-  <p>Diese Website enthält Links zu externen Webseiten Dritter, auf deren Inhalte ich keinen
-  Einfluss habe. Für diese fremden Inhalte ist stets der jeweilige Anbieter verantwortlich.
-  Bei Bekanntwerden von Rechtsverletzungen entferne ich solche Links umgehend.</p>
-</div></main>
-
-<footer><div class="wrap">
-  © 2026 Equilo · Till Heidrich · <a href="datenschutz.html">Datenschutz</a> · <a href="index.html">Startseite</a>
-</div></footer>
+<footer>
+  <div class="wrap foot">
+    <div><a class="brand" href="./">Equilo</a><p class="disclaimer">Equilo ist ein Tagebuch und kein Medizinprodukt.</p></div>
+    <nav aria-label="Rechtliches"><a href="impressum.html">Impressum</a><a href="datenschutz.html">Datenschutz</a><a href="./">Startseite</a></nav>
+  </div>
+</footer>
 </body>
 </html>

index.html

@@ -1,314 +1,324 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="de">
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Equilo · Schwindel- &amp; Menière-Tagebuch</title>
-<meta name="description" content="Equilo ist ein warmes, privates Tagebuch für Menschen mit Morbus Menière. Anfälle erfassen, Trigger erkennen, Wetter mitdenken, Arztbericht in einem Tipp. iPhone, iPad und Apple Watch. Lokal und in deiner iCloud.">
-<style>
-  :root{
-    --font-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
-    --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
-    --cream:#FDFAF4; --cream2:#FAF5EB; --cream3:#EFE8D7;
-    --teal:#1F4848; --teal900:#0E2A2A; --teal-soft:#2C5A56;
-    --coral:#E89B7B; --coral-soft:#FCEBDC; --sage:#6FA086;
-    --ink:#23302E; --ink-soft:#4A5654; --ink-muted:#6B7E7E; --border:#E4DCCB;
-  }
-  *{box-sizing:border-box;margin:0;padding:0}
-  html{scroll-behavior:smooth}
-  body{font-family:var(--font-sans);color:var(--ink);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased}
-  h1,h2,h3{font-family:var(--font-serif);font-weight:600;line-height:1.12;color:var(--teal900);letter-spacing:-0.01em}
-  .wrap{max-width:1080px;margin:0 auto;padding:0 24px}
-  .eyebrow{font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-soft)}
-  a{color:var(--teal);text-decoration:none}
-
-  /* nav */
-  nav{position:sticky;top:0;z-index:10;background:rgba(253,250,244,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
-  nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
-  .brand{display:flex;align-items:center;gap:10px;font-family:var(--font-serif);font-weight:600;font-size:1.25rem;color:var(--teal900)}
-  .brand svg{width:30px;height:30px}
-  .nav-links{display:flex;gap:26px;font-size:.95rem}
-  .nav-links a{color:var(--ink-soft)}
-  .nav-links a:hover{color:var(--teal)}
-  @media(max-width:720px){.nav-links{display:none}}
-
-  /* hero */
-  .hero{padding:88px 0 72px;text-align:center}
-  .hero h1{font-size:clamp(2.4rem,6vw,4rem);max-width:14ch;margin:18px auto 0}
-  .hero .lede{font-size:1.2rem;color:var(--ink-soft);max-width:60ch;margin:22px auto 0}
-  .hero .accent{color:var(--coral)}
-  .badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:30px}
-  .badge{background:var(--cream2);border:1px solid var(--border);border-radius:100px;padding:8px 16px;font-size:.85rem;color:var(--ink-soft)}
-  .cta{display:inline-flex;align-items:center;gap:8px;background:var(--teal);color:#fff;padding:14px 26px;border-radius:14px;font-weight:600;margin-top:30px}
-  .cta:hover{background:var(--teal900)}
-  .hero-note{font-size:.85rem;color:var(--ink-muted);margin-top:14px}
-
-  /* claim band */
-  .band{background:var(--teal);color:#fff;padding:64px 0;margin-top:24px}
-  .band h2{color:#fff;font-size:clamp(1.6rem,4vw,2.4rem);max-width:24ch}
-  .band p{color:rgba(255,255,255,.82);max-width:60ch;margin-top:14px;font-size:1.08rem}
-
-  /* features */
-  section{padding:72px 0}
-  .section-head{max-width:60ch}
-  .section-head h2{font-size:clamp(1.8rem,4vw,2.6rem);margin-top:10px}
-  .section-head p{color:var(--ink-soft);margin-top:14px;font-size:1.08rem}
-
-  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:40px}
-  .feature{background:var(--cream2);border:1px solid var(--border);border-radius:18px;padding:26px}
-  .feature .ic{width:44px;height:44px;border-radius:12px;background:var(--coral-soft);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
-  .feature .ic svg{width:22px;height:22px;stroke:var(--teal);fill:none;stroke-width:1.7}
-  .feature h3{font-size:1.2rem}
-  .feature p{color:var(--ink-soft);margin-top:8px;font-size:.98rem}
-
-  /* split highlight */
-  .split{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
-  @media(max-width:820px){.split{grid-template-columns:1fr;gap:28px}}
-  .split.alt{background:var(--cream2);border-radius:24px;padding:44px}
-  .split h2{font-size:clamp(1.6rem,3.5vw,2.2rem)}
-  .split p{color:var(--ink-soft);margin-top:14px}
-  .checklist{list-style:none;margin-top:18px;display:grid;gap:10px}
-  .checklist li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-soft)}
-  .checklist li::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;background:var(--sage);margin-top:3px;
-    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/14px no-repeat;
-    mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/14px no-repeat}
-
-  /* compare */
-  .compare{overflow-x:auto;margin-top:36px;border:1px solid var(--border);border-radius:16px}
-  table{width:100%;border-collapse:collapse;min-width:640px;font-size:.95rem}
-  th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--border)}
-  thead th{background:var(--cream2);font-weight:600;color:var(--teal900)}
-  td.ok{color:var(--sage);font-weight:600}
-  td.no{color:var(--ink-muted)}
-  tbody tr:last-child td{border-bottom:none}
-  .col-us{background:rgba(31,72,72,.05)}
-
-  /* privacy */
-  .privacy{background:var(--teal900);color:#fff;border-radius:24px;padding:48px}
-  .privacy h2{color:#fff}
-  .privacy p{color:rgba(255,255,255,.82);margin-top:14px;max-width:60ch}
-  .pill-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
-  .pill{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:100px;padding:8px 16px;font-size:.9rem}
-
-  /* closing */
-  .closing{text-align:center}
-  .closing h2{font-size:clamp(1.8rem,4vw,2.6rem);max-width:20ch;margin:0 auto}
-  .closing p{color:var(--ink-soft);max-width:54ch;margin:16px auto 0}
-
-  footer{border-top:1px solid var(--border);padding:40px 0;color:var(--ink-muted);font-size:.9rem}
-  footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}
-  .disclaimer{max-width:60ch;margin-top:8px}
-</style>
+<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
+<title>Equilo · Schwindel-Tagebuch bei Morbus Menière</title>
+<meta name="description" content="Equilo hält Schwindelanfälle in Sekunden fest, auch auf der Apple Watch, und macht daraus einen Arztbericht für die HNO-Sprechstunde. Kein Konto, kein Tracking, deine Daten bleiben bei dir.">
+<meta name="theme-color" content="#FBF7EF">
+<link rel="canonical" href="https://equilo.heidrich-digital.de/">
+<meta property="og:type" content="website">
+<meta property="og:locale" content="de_DE">
+<meta property="og:title" content="Equilo · Schwindel-Tagebuch bei Morbus Menière">
+<meta property="og:description" content="Anfall in Sekunden festhalten. Arztbericht, Hörverlauf und Akut-Hilfe kostenlos. Ohne Konto, ohne Tracking.">
+<meta property="og:image" content="https://equilo.heidrich-digital.de/assets/img/og.png">
+<meta property="og:url" content="https://equilo.heidrich-digital.de/">
+<meta name="twitter:card" content="summary_large_image">
+<link rel="icon" href="assets/img/favicon.svg" type="image/svg+xml">
+<link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png">
+<link rel="preload" href="assets/fonts/newsreader-latin-opsz-normal.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="preload" href="assets/fonts/hanken-grotesk-latin-wght-normal.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="stylesheet" href="assets/site.css">
+<script type="application/ld+json">
+{"@context":"https://schema.org","@type":"SoftwareApplication","name":"Equilo","operatingSystem":"iOS, iPadOS, watchOS","applicationCategory":"MedicalApplication","inLanguage":"de","description":"Tagebuch bei Schwindel und Morbus Menière: Anfälle erfassen, Arztbericht als PDF, Hörverlauf, Akut-Hilfe.","offers":[{"@type":"Offer","price":"0","priceCurrency":"EUR","name":"Equilo"},{"@type":"Offer","price":"39.99","priceCurrency":"EUR","name":"Equilo Plus (Einmalkauf)"}],"author":{"@type":"Person","name":"Till Heidrich"}}
+</script>
 </head>
 <body>
 
-<nav>
-  <div class="wrap">
-    <div class="brand">
-      <svg viewBox="0 0 64 64" aria-hidden="true"><circle cx="32" cy="33" r="22" fill="none" stroke="#1F4848" stroke-width="5" stroke-dasharray="105 60" stroke-linecap="round" transform="rotate(40 32 33)"/><circle cx="30" cy="31" r="11" fill="none" stroke="#1F4848" stroke-width="4.5" stroke-dasharray="50 35" stroke-linecap="round" transform="rotate(60 30 31)"/><circle cx="36" cy="40" r="4.4" fill="#E89B7B"/></svg>
-      Equilo
-    </div>
-    <div class="nav-links">
-      <a href="#funktionen">Funktionen</a>
-      <a href="#vergleich">Vergleich</a>
-      <a href="#datenschutz">Datenschutz</a>
-      <a href="#beta">Beta</a>
-    </div>
-  </div>
+<header class="nav" id="nav">
+  <a class="brand" href="#top" aria-label="Equilo, zum Seitenanfang">
+    <svg viewBox="0 0 64 64" aria-hidden="true"><circle cx="32" cy="33" r="22" fill="none" stroke="#1F4848" stroke-width="5" stroke-dasharray="105 60" stroke-linecap="round" transform="rotate(40 32 33)"/><circle cx="30" cy="31" r="11" fill="none" stroke="#1F4848" stroke-width="4.5" stroke-dasharray="50 35" stroke-linecap="round" transform="rotate(60 30 31)"/><circle cx="36" cy="40" r="4.4" fill="#E89B7B"/></svg>
+    Equilo
+  </a>
+  <ul class="nav-links">
+    <li><a href="#akut">Im Anfall</a></li>
+    <li><a href="#sprechstunde">Sprechstunde</a></li>
+    <li><a href="#ehrlich">Ehrlich</a></li>
+    <li><a href="#preise">Preise</a></li>
+    <li><a href="#fragen">Fragen</a></li>
+  </ul>
+  <a class="btn btn-primary btn-sm" href="mailto:website@tillheidrich.de?subject=Equilo%20Beta">Beta testen<span class="ico"><svg viewBox="0 0 24 24"><path d="M7 17 17 7M9 7h8v8"/></svg></span></a>
+  <button class="menu-btn" aria-label="Menü öffnen" aria-expanded="false" aria-controls="overlay"><span></span><span></span></button>
+</header>
+<nav class="overlay" id="overlay" aria-label="Hauptmenü">
+  <a href="#akut">Im Anfall</a>
+  <a href="#sprechstunde">Sprechstunde</a>
+  <a href="#ehrlich">Ehrlich</a>
+  <a href="#preise">Preise</a>
+  <a href="#fragen">Fragen</a>
 </nav>
 
-<header class="hero">
-  <div class="wrap">
-    <div class="eyebrow">Schwindel- &amp; Menière-Tagebuch · iPhone, iPad, Apple Watch</div>
-    <h1>Lerne dich und deinen <span class="accent">Schwindel</span> besser kennen.</h1>
-    <p class="lede">Equilo erfasst Anfälle in Sekunden, denkt Wetter und Luftdruck mit und macht aus unvorhersehbaren Schüben lesbare Muster. Für dich und für deine Ärztin.</p>
-    <div class="badges">
-      <span class="badge">Deutsch von Tag eins</span>
-      <span class="badge">Lokal + private iCloud</span>
-      <span class="badge">Kein Konto, keine Werbung</span>
-      <span class="badge">Kein Paywall auf das Wesentliche</span>
-    </div>
-    <a class="cta" href="#beta">Zur TestFlight-Beta &rarr;</a>
-    <p class="hero-note">In Vorbereitung für den App Store. Kein Medizinprodukt, ein Tagebuch mit Auswertung.</p>
-  </div>
-</header>
+<main id="top">
 
-<div class="band">
-  <div class="wrap">
-    <div class="eyebrow" style="color:var(--coral)">Warum Equilo</div>
-    <h2>Selbstbewusster durch den Alltag, mit mehr Wissen über dich und deinen Schwindel.</h2>
-    <p>Aus chaotischen Schüben werden lesbare Muster. Equilo erkennt früh, wann ein Anfall wahrscheinlicher wird, ehrlich, mit Wetter und deinen eigenen Daten. Und wenn es dich erwischt, ist Hilfe einen Tipp entfernt.</p>
-  </div>
-</div>
-
-<section id="funktionen">
-  <div class="wrap">
-    <div class="section-head">
-      <div class="eyebrow">Was die App kann</div>
-      <h2>Alles, was ein Schwindeltagebuch braucht. Und mehr.</h2>
-      <p>Erfassen in Sekunden, verstehen mit der Zeit, vorbereitet sein für den Ernstfall und den Arzttermin.</p>
+<!-- Hero -->
+<section class="hero">
+  <div class="wrap hero-grid">
+    <div>
+      <span class="eyebrow reveal"><i></i>Tagebuch bei Schwindel &amp; Menière</span>
+      <h1 class="reveal d1">Wenn sich alles dreht, reicht <em>ein Tipp.</em></h1>
+      <p class="lede reveal d2">Equilo hält deine Anfälle fest, auch auf der Apple Watch oder vom Sperrbildschirm. Daraus wird ein Bericht, mit dem deine HNO-Ärztin in der Sprechstunde wirklich arbeiten kann.</p>
+      <div class="cta-row reveal d3">
+        <a class="btn btn-primary" href="mailto:website@tillheidrich.de?subject=Equilo%20Beta">Bei der Beta mitmachen<span class="ico"><svg viewBox="0 0 24 24"><path d="M7 17 17 7M9 7h8v8"/></svg></span></a>
+        <a class="btn btn-ghost" href="#akut">Ansehen, wie es geht<span class="ico"><svg viewBox="0 0 24 24"><path d="M12 5v14M6 13l6 6 6-6"/></svg></span></a>
+      </div>
+      <p class="note reveal d3">Für iPhone, iPad und Apple Watch. Bald im App Store. Kostenlos, mit optionalem Plus.</p>
     </div>
-    <div class="grid">
-      <div class="feature">
-        <div class="ic"><svg viewBox="0 0 24 24"><path d="M13 2 4 14h6l-1 8 9-12h-6z"/></svg></div>
-        <h3>Anfall erfassen</h3>
-        <p>Live mit Timer oder nachträglich. Art, Schwere, Seite, Dauer, Symptome, vermutete Auslöser samt eigener Trigger. Wetter wird automatisch mitgespeichert.</p>
-      </div>
-      <div class="feature">
-        <div class="ic"><svg viewBox="0 0 24 24"><path d="M4 14a8 8 0 0 1 16 0"/><path d="M12 14l3-3"/></svg></div>
-        <h3>Ehrliche Prognose</h3>
-        <p>Luftdruck und Wetterumschwung plus deine eigenen Muster ergeben einen Risiko-Hinweis mit Konfidenz. Keine Schein-Sicherheit, nachvollziehbar erklärt.</p>
-      </div>
-      <div class="feature">
-        <div class="ic"><svg viewBox="0 0 24 24"><rect x="6" y="3" width="12" height="18" rx="3"/><path d="M10 7h4"/></svg></div>
-        <h3>Apple Watch</h3>
-        <p>Anfall direkt am Handgelenk starten und beenden, auch wenn du nicht zum iPhone greifen kannst. Synchron über deine iCloud.</p>
-      </div>
-      <div class="feature">
-        <div class="ic"><svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 1 0 9 9"/><path d="M12 7v5l3 2"/></svg></div>
-        <h3>Akut-Modus</h3>
-        <p>Ruhige Vollbild-Hilfe im Anfall: geführte Atmung, Lagerung in drei Schritten, 1-Tap-Anruf an deine Vertrauensperson und klare 112-Hinweise.</p>
-      </div>
-      <div class="feature">
-        <div class="ic"><svg viewBox="0 0 24 24"><path d="M7 10h10M7 14h7"/><rect x="3" y="4" width="18" height="16" rx="3"/></svg></div>
-        <h3>Notfall- &amp; Erklärkarte</h3>
-        <p>Eine verständliche Karte, die Menière in einfachen Worten erklärt, für Ersthelfer, fachfremde Ärzte und für Familie und Freunde. Als Ansicht und als PDF.</p>
-      </div>
-      <div class="feature">
-        <div class="ic"><svg viewBox="0 0 24 24"><path d="M12 3v18M5 8c4 0 4 8 7 8s3-8 7-8"/></svg></div>
-        <h3>Salz im Blick</h3>
-        <p>Einfacher Tagestrend oder genaue Lebensmittel aus einer deutschen Datenbank. Kein Wiegen, nur Sichtbarkeit, weil Natrium bei Menière zählt.</p>
-      </div>
-      <div class="feature">
-        <div class="ic"><svg viewBox="0 0 24 24"><path d="M4 19V5M4 19h16M8 16v-4M12 16V8M16 16v-7"/></svg></div>
-        <h3>Auswertung</h3>
-        <p>Kalender-Heatmap, häufigste Auslöser mit Konfidenz und deine Anfälle als Punkte auf der Luftdruckkurve. Muster, die man sonst nie sieht.</p>
-      </div>
-      <div class="feature">
-        <div class="ic"><svg viewBox="0 0 24 24"><rect x="5" y="3" width="14" height="18" rx="2"/><path d="M9 8h6M9 12h6M9 16h3"/></svg></div>
-        <h3>Medikamente</h3>
-        <p>Einnahme-Erinnerungen, Nachfüll-Alarm und Einnahme-Treue. Alles fließt in den Arztbericht ein.</p>
-      </div>
-      <div class="feature">
-        <div class="ic"><svg viewBox="0 0 24 24"><path d="M6 4h9l3 3v13H6z"/><path d="M9 12h6M9 16h6"/></svg></div>
-        <h3>Arzt-Bericht</h3>
-        <p>Druckfertig im gewohnten klinischen Schwindeltagebuch-Format, als PDF in einem Tipp und als übersichtliche Ansicht auf iPhone und iPad.</p>
-      </div>
-      <div class="feature">
-        <div class="ic"><svg viewBox="0 0 24 24"><path d="M4 5h16v14H4z"/><path d="M4 9h16"/><circle cx="8" cy="7" r="0.6" fill="#1F4848"/></svg></div>
-        <h3>Wissen &amp; Entspannung</h3>
-        <p>Verständliche Texte zur Krankheit mit Quellen, dazu geführte Atemübung, progressive Muskelrelaxation und autogenes Training.</p>
-      </div>
-      <div class="feature">
-        <div class="ic"><svg viewBox="0 0 24 24"><path d="M5 7l7-4 7 4v6c0 5-7 8-7 8s-7-3-7-8z"/></svg></div>
-        <h3>Befunde anhängen</h3>
-        <p>Audiogramme, Arztbriefe oder Hörtest-Fotos direkt an den passenden Anfall hängen, als Bild oder PDF.</p>
-      </div>
-      <div class="feature">
-        <div class="ic"><svg viewBox="0 0 24 24"><path d="M12 3v18"/><circle cx="12" cy="12" r="9"/></svg></div>
-        <h3>Backup &amp; Sync</h3>
-        <p>Vollständiges Backup zum Sichern und Wiedereinspielen beim Gerätewechsel. iCloud-Sync lässt sich bewusst ein- und ausschalten.</p>
-      </div>
+    <div class="stage" aria-hidden="true">
+      <figure class="phone p2 reveal d1"><img src="assets/img/anfall-laeuft-440.webp" width="440" height="956" alt=""></figure>
+      <figure class="phone p1 reveal"><img src="assets/img/heute-720.webp" srcset="assets/img/heute-440.webp 440w, assets/img/heute-720.webp 720w" sizes="(max-width:960px) 58vw, 300px" width="720" height="1564" alt=""></figure>
+      <figure class="watch reveal d2"><img src="assets/img/watch-laeuft.webp" width="422" height="514" alt=""></figure>
+      <div class="chip c1 reveal d3"><span class="dot"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="M12 8v4l2.5 2"/></svg></span><span><b>Timer läuft</b>Dynamic Island &amp; Sperrbildschirm</span></div>
+      <div class="chip c2 reveal d3"><span class="dot"><svg viewBox="0 0 24 24"><path d="M5 12.5 9.5 17 19 7.5"/></svg></span><span><b>Danach nur zwei Fragen</b>Art und Stärke</span></div>
     </div>
   </div>
 </section>
 
-<section style="padding-top:0">
+<!-- Geschichte -->
+<section class="story">
   <div class="wrap">
-    <div class="split alt">
+    <div class="story-card reveal">
+      <span class="mark" aria-hidden="true">„</span>
       <div>
-        <div class="eyebrow">Im Anfall</div>
-        <h2>Hilfe, wenn du sie am wenigsten suchen kannst.</h2>
-        <p>Ein Anfall raubt dir die Orientierung. Equilo nimmt dir in dem Moment die Entscheidungen ab.</p>
-        <ul class="checklist">
-          <li>Geführte Atmung und Lagerung, ohne nachdenken zu müssen.</li>
-          <li>Ein Tipp ruft deine Vertrauensperson an.</li>
-          <li>Die Erklärkarte zeigt anderen, was gerade mit dir los ist.</li>
-          <li>Klare Hinweise, wann es doch ein Fall für die 112 ist.</li>
+        <blockquote>Meine Mutter hat Schwindelanfälle. Sie brauchte ein Tagebuch, das sie auch <em>mitten im Anfall</em> bedienen kann, ohne Brille und ohne nachzudenken. Jede Version von Equilo testet sie zuerst.</blockquote>
+        <p class="by">Till Heidrich, Entwickler von Equilo, Tostedt</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Im Anfall -->
+<section id="akut">
+  <div class="wrap split">
+    <div>
+      <span class="eyebrow reveal"><i></i>Im Anfall</span>
+      <h2 class="reveal d1">Gebaut für die Minuten, in denen <em>nichts geht.</em></h2>
+      <p class="reveal d2">Wer Drehschwindel hat, bedient kein Formular. Equilo startet die Erfassung mit einem Tipp und fragt erst später nach Details, mit drei großen Knöpfen statt Schiebereglern.</p>
+      <ul class="points">
+        <li class="reveal"><span class="pi"><svg viewBox="0 0 24 24"><rect x="7" y="3" width="10" height="18" rx="2.5"/><path d="M10.5 6h3"/></svg></span><div><b>Überall startbar</b><span>App, Apple Watch, Siri, Aktionstaste, Kontrollzentrum oder Sperrbildschirm. Auch wenn die App gesperrt ist.</span></div></li>
+        <li class="reveal d1"><span class="pi"><svg viewBox="0 0 24 24"><path d="M12 21s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 5.6-7 10-7 10Z"/></svg></span><div><b>Akut-Hilfe</b><span>Ruhiger Atemtakt, Anleitung zum Hinlegen, Anruf oder Nachricht mit Standort an deine Vertrauensperson.</span></div></li>
+        <li class="reveal d2"><span class="pi"><svg viewBox="0 0 24 24"><path d="M12 9v4M12 16.5v.01"/><path d="M10.3 4.2 2.8 17.3A2 2 0 0 0 4.5 20.3h15a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0Z"/></svg></span><div><b>Warnzeichen im Blick</b><span>Doppelbilder, undeutliche Sprache oder Lähmung passen nicht zu Menière. Equilo zeigt dann sofort den Notruf.</span></div></li>
+        <li class="reveal d3"><span class="pi"><svg viewBox="0 0 24 24"><path d="M4 7h16M4 12h10M4 17h7"/><circle cx="18" cy="16" r="3"/></svg></span><div><b>Einfach erzählen</b><span>„Heute Morgen zwei Stunden Drehschwindel, rechts Druck.“ Equilo füllt den Eintrag vor, du prüfst ihn. Mit Apple Intelligence direkt auf dem iPhone.</span></div></li>
+      </ul>
+    </div>
+    <div class="media phones-duo">
+      <figure class="phone reveal"><img src="assets/img/details-440.webp" srcset="assets/img/details-440.webp 440w, assets/img/details-720.webp 720w" sizes="260px" width="440" height="956" alt="Equilo nach dem Beenden eines Anfalls: Art des Schwindels und drei große Knöpfe für die Stärke" loading="lazy"></figure>
+      <figure class="phone reveal d2"><img src="assets/img/akut-440.webp" srcset="assets/img/akut-440.webp 440w, assets/img/akut-720.webp 720w" sizes="260px" width="440" height="956" alt="Akut-Modus mit Atemkreis, Anleitung und Notruf-Knopf" loading="lazy"></figure>
+    </div>
+  </div>
+</section>
+
+<!-- Sprechstunde -->
+<section id="sprechstunde" class="band-doc">
+  <div class="wrap">
+    <div class="head">
+      <span class="eyebrow reveal"><i></i>Für die Sprechstunde</span>
+      <h2 class="reveal d1">Sieben Minuten Termin. <em>Eine Seite,</em> die zählt.</h2>
+      <p class="reveal d2">Seite 1 des Arztberichts ist eine Kurzfassung für die ersten Minuten: deine Fragen, Attacken nach Dauer im Raster der Bárány-Kriterien, Hören, Alltag und Therapie. Dahinter folgt das vertraute Schwindeltagebuch. Alles, was deine Ärztin sieht, ist kostenlos.</p>
+    </div>
+    <div class="bento">
+      <article class="shell b-report reveal"><div class="core tile">
+        <span class="tag">Arztbericht als PDF</span>
+        <h3>Die Kurzfassung für die ersten Minuten</h3>
+        <p>Attacken unter 20 Minuten werden getrennt gezählt, Sturzanfälle und Warnzeichen hervorgehoben. Nachgetragene Einträge sind markiert. So weiß die Ärztin, worauf sie sich verlassen kann.</p>
+        <div class="shot"><img src="assets/img/ipad-arztbericht-1100.webp" width="1100" height="858" alt="Arztbericht auf dem iPad mit Kennzahlen, Dauerklassen und Fragen für den Termin" loading="lazy"></div>
+      </div></article>
+      <article class="shell b-hear reveal d1"><div class="core tile">
+        <span class="tag">Neu in 2.0</span>
+        <h3>Dein Hören im Verlauf</h3>
+        <p>Trag Praxis-Audiogramme ein oder übernimm den AirPods-Hörtest aus Apple Health. Equilo zeigt den Tiefton-Bereich als Verlauf, ehrlich als Trend und nicht als Befund.</p>
+        <div class="shot"><figure class="phone"><img src="assets/img/hoerverlauf-440.webp" width="440" height="956" alt="Hörverlauf mit Tiefton-Mittelwerten für linkes und rechtes Ohr" loading="lazy"></figure></div>
+      </div></article>
+      <article class="shell b-small reveal"><div class="core tile">
+        <span class="ti"><svg viewBox="0 0 24 24"><path d="M4 19h16M7 16V9M12 16V5M17 16v-4"/></svg></span>
+        <h3>Therapie vorher, nachher</h3>
+        <p>Attacken in den 90 Tagen vor und nach einer Behandlung. Als zeitlicher Vergleich, mit dem Hinweis, dass Attacken oft auch von selbst seltener werden.</p>
+      </div></article>
+      <article class="shell b-small reveal d1"><div class="core tile">
+        <span class="ti"><svg viewBox="0 0 24 24"><path d="M8 10h8M8 14h5"/><path d="M5 4h14a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-7l-4 3v-3H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Z"/></svg></span>
+        <h3>Fragen für den Termin</h3>
+        <p>Sammle, was du fragen willst. Die offenen Fragen stehen ganz oben im Bericht, damit sie im Termin nicht untergehen.</p>
+      </div></article>
+      <article class="shell b-small reveal d2"><div class="core tile">
+        <span class="ti"><svg viewBox="0 0 24 24"><path d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z"/><circle cx="12" cy="12" r="2.8"/></svg></span>
+        <h3>Augen-Video im Anfall</h3>
+        <p>Das Zucken der Augen verrät der HNO viel. Eine Begleitperson filmt 30 Sekunden, Equilo erklärt vorher, wie es gelingt.</p>
+      </div></article>
+    </div>
+  </div>
+</section>
+
+<!-- Ehrlich -->
+<section id="ehrlich" class="honest">
+  <div class="wrap split rev">
+    <div class="media"><figure class="phone reveal" style="width:min(300px,80%);margin-inline:auto"><img src="assets/img/muster-440.webp" srcset="assets/img/muster-440.webp 440w, assets/img/muster-720.webp 720w" sizes="300px" width="440" height="956" alt="Musteranalyse: Faktoren wie Stress und Stimmung mit ihrer Spannweite" loading="lazy"></figure></div>
+    <div>
+      <span class="eyebrow reveal"><i></i>Ehrlich statt Prognose</span>
+      <h2 class="reveal d1">Equilo sagt dir auch, <em>was es nicht weiß.</em></h2>
+      <p class="reveal d2">Eine verlässliche Vorhersage für Menière-Anfälle gibt es bisher nirgends. Equilo verkauft deshalb keine. Die Musteranalyse prüft stattdessen, ob Schlaf, Stress, Stimmung, Vitalwerte oder Wetter bei dir mit Attacken zusammenfallen, und rechnet in der Rückschau nach, ob sie damit richtig gelegen hätte. Erst dann zeigt sie dir etwas.</p>
+      <div class="facts">
+        <div class="fact reveal"><strong>397</strong><span>Betroffene in einer britischen Studie: an Tiefdruck-Tagen rund 30 % mehr Attacken. Ein Zusammenhang, keine Vorhersage.</span></div>
+        <div class="fact reveal d1"><strong>46</strong><span>Studien ausgewertet: Bei den meisten werden die Attacken über 5 bis 10 Jahre seltener.</span></div>
+        <div class="fact reveal d2"><strong>221</strong><span>Teilnehmende der BEMED-Studie: Betahistin wirkte nicht besser als ein Scheinmedikament.</span></div>
+      </div>
+      <p class="src reveal">Quellen: Schmidt et al. 2017, Otol Neurotol · Huppert et al. 2010, Acta Otolaryngol · Adrion et al. 2016, BMJ. Alle Wissensartikel in der App nennen ihre Quellen.</p>
+    </div>
+  </div>
+</section>
+
+<!-- Familie -->
+<section class="family">
+  <div class="wrap split">
+    <div>
+      <span class="eyebrow reveal"><i></i>Für die Familie</span>
+      <h2 class="reveal d1">„Wie geht's dir?“ <em>Ein Bild sagt es.</em></h2>
+      <p class="reveal d2">Mit „So geht's mir“ teilst du deinen Tag, deine Woche oder deinen Monat als Bild, zum Beispiel per WhatsApp. Ruhige Tage zählen genauso wie schwere. Was darauf steht, entscheidest du mit einem Schalter.</p>
+      <ul class="points">
+        <li class="reveal"><span class="pi"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="M8.5 12.5 11 15l4.5-5"/></svg></span><div><b>Ohne Befund-Sprache</b><span>Keine Prozentwerte, keine Warnfarben. Nur, was war.</span></div></li>
+        <li class="reveal d1"><span class="pi"><svg viewBox="0 0 24 24"><rect x="4" y="10" width="16" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg></span><div><b>Geteilt wird nur, was du schickst</b><span>Das Bild entsteht auf deinem iPhone. Keine Diagnose, keine Medikamente, kein Name, wenn du nicht willst.</span></div></li>
+      </ul>
+    </div>
+    <div class="media"><figure class="phone reveal d1"><img src="assets/img/so-gehts-mir-440.webp" srcset="assets/img/so-gehts-mir-440.webp 440w, assets/img/so-gehts-mir-720.webp 720w" sizes="290px" width="440" height="956" alt="Bildvorschau „Meine Woche“ mit Punkten für ruhige Tage und Anfälle" loading="lazy"></figure></div>
+  </div>
+</section>
+
+<!-- Wissen -->
+<section class="band-doc">
+  <div class="wrap split rev">
+    <div class="media"><figure class="phone reveal" style="width:min(290px,80%);margin-inline:auto"><img src="assets/img/wissen-440.webp" srcset="assets/img/wissen-440.webp 440w, assets/img/wissen-720.webp 720w" sizes="290px" width="440" height="956" alt="Wissensbereich mit Fakt des Tages und Mythen-Check" loading="lazy"></figure></div>
+    <div>
+      <span class="eyebrow reveal"><i></i>Wissen mit Quellen</span>
+      <h2 class="reveal d1">Jeden Tag ein Fakt. <em>Mit Beleg.</em></h2>
+      <p class="reveal d2">Über Menière kursiert viel Halbwissen. In Equilo stehen Leitlinien, Cochrane-Reviews und aktuelle Studien in Alltagssprache, jeweils mit Quelle und dem Hinweis, wie belastbar sie sind.</p>
+      <div class="myths">
+        <div class="myth reveal"><span class="v">Stimmt so nicht</span><p>„Salzarm essen heilt Menière.“<small>Dazu gibt es keine einzige placebokontrollierte Studie (Cochrane 2023). Ein Versuch kann trotzdem vernünftig sein.</small></p></div>
+        <div class="myth reveal d1"><span class="v">Stimmt so nicht</span><p>„Am Ende werden immer beide Ohren taub.“<small>Meist bleibt es bei einem Ohr, das Hören pendelt sich oft im mittleren Bereich ein (Huppert 2010).</small></p></div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Datenschutz -->
+<section id="datenschutz">
+  <div class="wrap">
+    <div class="head">
+      <span class="eyebrow reveal"><i></i>Deine Daten</span>
+      <h2 class="reveal d1">Deine Gesundheitsdaten bleiben <em>bei dir.</em></h2>
+      <p class="reveal d2">Equilo hat keinen eigenen Server, der deine Einträge speichert. Es gibt kein Konto, keine Werbung und kein Analyse-Werkzeug von Drittanbietern.</p>
+    </div>
+    <div class="privacy-grid">
+      <article class="shell reveal"><div class="core pv"><span class="tag">Gerät</span><h3>Lokal zuerst</h3><p>Deine Einträge liegen auf deinem iPhone, auf Wunsch mit Face ID gesperrt.</p></div></article>
+      <article class="shell reveal d1"><div class="core pv"><span class="tag">iCloud</span><h3>Nur deine iCloud</h3><p>Der Abgleich mit iPad und Uhr läuft über deine private iCloud. Wir sehen davon nichts.</p></div></article>
+      <article class="shell reveal d2"><div class="core pv"><span class="tag">Health</span><h3>Bleibt in Health</h3><p>Schlaf, Puls und Gefühlslage liest Equilo nur mit deiner Erlaubnis und speichert sie nicht.</p></div></article>
+      <article class="shell reveal d3"><div class="core pv"><span class="tag">KI</span><h3>Auf dem Gerät</h3><p>Textvorschläge entstehen mit Apple Intelligence direkt auf dem iPhone, ohne Server.</p></div></article>
+    </div>
+  </div>
+</section>
+
+<!-- Preise -->
+<section id="preise" class="band-doc">
+  <div class="wrap">
+    <div class="head">
+      <span class="eyebrow reveal"><i></i>Preise</span>
+      <h2 class="reveal d1">Das Wichtige ist <em>kostenlos.</em> Für immer.</h2>
+      <p class="reveal d2">Plus ist für alle, die mehr Auswertung möchten oder die Entwicklung unterstützen wollen. Ein Abo ist kein Muss: Es gibt auch einen Einmalkauf.</p>
+    </div>
+    <div class="pricing">
+      <article class="shell plan reveal"><div class="core">
+        <span class="tag">Equilo</span>
+        <div class="price">0 € <small>für immer</small></div>
+        <p>Alles, was du im Alltag und beim Arzt brauchst.</p>
+        <ul>
+          <li><svg viewBox="0 0 24 24"><path d="M5 12.5 9.5 17 19 7.5"/></svg>Anfälle per Tipp, Uhr, Siri und Sperrbildschirm</li>
+          <li><svg viewBox="0 0 24 24"><path d="M5 12.5 9.5 17 19 7.5"/></svg>Arztbericht und Schwindeltagebuch als PDF</li>
+          <li><svg viewBox="0 0 24 24"><path d="M5 12.5 9.5 17 19 7.5"/></svg>Hörverlauf, Therapie vorher/nachher, Fragen für den Termin</li>
+          <li><svg viewBox="0 0 24 24"><path d="M5 12.5 9.5 17 19 7.5"/></svg>Akut-Hilfe mit Notfall-Nachricht</li>
+          <li><svg viewBox="0 0 24 24"><path d="M5 12.5 9.5 17 19 7.5"/></svg>Eigene Symptome und Auslöser</li>
+          <li><svg viewBox="0 0 24 24"><path d="M5 12.5 9.5 17 19 7.5"/></svg>Medikamente mit Vorrat: Equilo meldet sich, bevor die Packung leer ist</li>
+          <li><svg viewBox="0 0 24 24"><path d="M5 12.5 9.5 17 19 7.5"/></svg>Wissen, iCloud, Backup</li>
         </ul>
-      </div>
-      <div>
-        <div class="eyebrow">Für den Arzttermin</div>
-        <h2>Endlich etwas Belastbares in der Hand.</h2>
-        <p>Die App ist nur dann gut, wenn der HNO-Termin besser läuft. Deshalb der strukturierte Bericht im klinischen Format, den Ärztinnen sofort wiedererkennen.</p>
-        <ul class="checklist">
-          <li>Kennzahlen, Top-Auslöser und Medikamenten-Treue.</li>
-          <li>Anfälle als Punkte auf der Luftdruckkurve.</li>
-          <li>Rohdaten als CSV, Backup als JSON.</li>
-          <li>Frei, ohne Paywall auf Bericht oder Auswertung.</li>
+      </div></article>
+      <article class="shell plan plus reveal d1"><div class="core">
+        <span class="tag">Equilo Plus</span>
+        <div class="price">ab 1,67 € <small>im Monat</small></div>
+        <p>Mehr Auswertung und Komfort.</p>
+        <ul>
+          <li><svg viewBox="0 0 24 24"><path d="M5 12.5 9.5 17 19 7.5"/></svg>Persönliche Musteranalyse mit Selbstprüfung</li>
+          <li><svg viewBox="0 0 24 24"><path d="M5 12.5 9.5 17 19 7.5"/></svg>Wetterlage, Druckverlauf und Hinweis bei Druckwechsel</li>
+          <li><svg viewBox="0 0 24 24"><path d="M5 12.5 9.5 17 19 7.5"/></svg>Rückblick in Alltagssprache</li>
         </ul>
-      </div>
+        <div class="opts">
+          <div class="opt"><span>Jährlich, 1 Monat gratis</span><b>19,99 €</b></div>
+          <div class="opt"><span>Monatlich</span><b>2,99 €</b></div>
+          <div class="opt"><span>Einmalkauf mit Familienfreigabe</span><b>39,99 €</b></div>
+        </div>
+      </div></article>
     </div>
   </div>
 </section>
 
-<section id="vergleich" style="padding-top:0">
+<!-- Fragen -->
+<section id="fragen">
   <div class="wrap">
-    <div class="section-head">
-      <div class="eyebrow">Im Vergleich</div>
-      <h2>Die Kombination, die sonst niemand bietet.</h2>
-      <p>Andere Apps sind englischsprachig, kontogebunden oder featureüberladen. Equilo verbindet Tiefe mit Ruhe und echtem Datenschutz.</p>
+    <div class="head">
+      <span class="eyebrow reveal"><i></i>Fragen</span>
+      <h2 class="reveal d1">Was Betroffene <em>wissen wollen.</em></h2>
     </div>
-    <div class="compare">
-      <table>
-        <thead>
-          <tr><th>Funktion</th><th>Typische Tracker</th><th class="col-us">Equilo</th></tr>
-        </thead>
-        <tbody>
-          <tr><td>Deutsche Oberfläche</td><td class="no">selten</td><td class="ok col-us">ja, von Tag eins</td></tr>
-          <tr><td>Anfall am Apple-Watch-Handgelenk</td><td class="no">nein</td><td class="ok col-us">ja</td></tr>
-          <tr><td>Wetter &amp; Luftdruck automatisch</td><td class="no">teils</td><td class="ok col-us">ja, mit Vorab-Hinweis</td></tr>
-          <tr><td>Akut-Modus &amp; Erklärkarte</td><td class="no">nein</td><td class="ok col-us">ja</td></tr>
-          <tr><td>Klinischer Arzt-PDF</td><td class="no">generisch</td><td class="ok col-us">Schwindeltagebuch-Format</td></tr>
-          <tr><td>Ohne Konto, lokal + iCloud</td><td class="no">Cloud + Pflichtkonto</td><td class="ok col-us">ja</td></tr>
-          <tr><td>Paywall auf Sync / Bericht</td><td class="no">häufig</td><td class="ok col-us">nein</td></tr>
-        </tbody>
-      </table>
+    <div class="faq reveal d1">
+      <details><summary>Ist Equilo ein Medizinprodukt?</summary><p>Nein. Equilo ist ein Tagebuch. Die App stellt keine Diagnose, sagt keine Anfälle voraus und empfiehlt keine Therapie. Sie hilft dir, deinen Verlauf festzuhalten und mit deiner Ärztin darüber zu sprechen.</p></details>
+      <details><summary>Brauche ich eine Apple Watch?</summary><p>Nein. Die Uhr ist praktisch, weil du einen Anfall dort mit einem Tipp startest und danach Art und Stärke angibst. Alles funktioniert aber auch nur mit dem iPhone.</p></details>
+      <details><summary>Gibt es Equilo für Android?</summary><p>Im Moment nicht. Equilo ist für iPhone, iPad und Apple Watch gebaut, weil es Funktionen wie Live-Aktivitäten, die Uhr und Apple Health nutzt.</p></details>
+      <details><summary>Muss ich mich anmelden?</summary><p>Nein. Es gibt kein Konto. Deine Daten bleiben auf deinem Gerät und, wenn du willst, in deiner privaten iCloud.</p></details>
+      <details><summary>Was kostet Equilo?</summary><p>Die App ist kostenlos, mit Arztbericht, Hörverlauf und Akut-Hilfe. Plus kostet 2,99 € im Monat, 19,99 € im Jahr mit einem Gratismonat oder einmalig 39,99 €.</p></details>
+      <details><summary>Wer steckt dahinter?</summary><p>Till Heidrich aus Tostedt in Niedersachsen. Equilo ist für seine Mutter entstanden und wird mit ihr getestet. Fragen und Rückmeldungen gern an <a href="mailto:website@tillheidrich.de">website@tillheidrich.de</a>.</p></details>
     </div>
   </div>
 </section>
 
-<section id="datenschutz" style="padding-top:0">
+<!-- Abschluss -->
+<section class="closing band-doc">
   <div class="wrap">
-    <div class="privacy">
-      <div class="eyebrow" style="color:var(--coral)">Datenschutz</div>
-      <h2>Deine Gesundheitsdaten bleiben bei dir.</h2>
-      <p>Equilo ist local-first. Deine Einträge liegen auf deinem Gerät und synchronisieren über deine private iCloud zwischen iPhone, iPad und Apple Watch. Kein Konto, kein fremder Server, kein Tracking. Aus Apple Health gelesene Werte bleiben ausschließlich auf dem Gerät.</p>
-      <div class="pill-row">
-        <span class="pill">Kein Account</span>
-        <span class="pill">Private iCloud</span>
-        <span class="pill">Kein Tracking</span>
-        <span class="pill">iCloud-Sync abschaltbar</span>
-        <span class="pill">App-Sperre mit Face ID</span>
-      </div>
+    <span class="eyebrow reveal"><i></i>Equilo 2.0</span>
+    <h2 class="reveal d1">Weniger Zettel. <em>Mehr Überblick.</em></h2>
+    <p class="reveal d2">Equilo ist gerade in der Testphase und kommt bald in den App Store. Wenn du vorher dabei sein willst, schreib eine kurze Mail.</p>
+    <div class="cta-row reveal d3">
+      <a class="btn btn-primary" href="mailto:website@tillheidrich.de?subject=Equilo%20Beta">Bei der Beta mitmachen<span class="ico"><svg viewBox="0 0 24 24"><path d="M7 17 17 7M9 7h8v8"/></svg></span></a>
     </div>
   </div>
 </section>
 
-<section id="beta" class="closing">
-  <div class="wrap">
-    <div class="eyebrow">Beta</div>
-    <h2>Sei in der ersten Runde dabei.</h2>
-    <p>Equilo startet als geschlossene TestFlight-Beta und kommt danach in den App Store. Schreib uns, wenn du als Betroffene oder Angehöriger früh testen möchtest.</p>
-    <a class="cta" href="mailto:website@tillheidrich.de">Für die Beta melden &rarr;</a>
-  </div>
-</section>
+</main>
 
 <footer>
-  <div class="wrap">
+  <div class="wrap foot">
     <div>
-      <div class="brand" style="font-size:1.1rem">
-        <svg viewBox="0 0 64 64" aria-hidden="true" style="width:24px;height:24px"><circle cx="32" cy="33" r="22" fill="none" stroke="#1F4848" stroke-width="5" stroke-dasharray="105 60" stroke-linecap="round" transform="rotate(40 32 33)"/><circle cx="36" cy="40" r="4.4" fill="#E89B7B"/></svg>
-        Equilo
-      </div>
-      <p class="disclaimer">Equilo ist ein digitales Tagebuch und kein Medizinprodukt nach MDR. Es ersetzt keine ärztliche Diagnose oder Therapie. Korrelation ist nicht gleich Ursache.</p>
-    </div>
-    <div>
-      <p>© 2026 Equilo</p>
-      <p><a href="datenschutz.html">Datenschutz</a> · <a href="impressum.html">Impressum</a></p>
+      <a class="brand" href="#top">Equilo</a>
+      <p class="disclaimer">Equilo ist ein Tagebuch und kein Medizinprodukt. Die App ersetzt keine ärztliche Beratung. Bei neuen oder ungewohnten Beschwerden ärztlich abklären lassen, im Notfall 112.</p>
     </div>
+    <nav aria-label="Rechtliches">
+      <a href="impressum.html">Impressum</a>
+      <a href="datenschutz.html">Datenschutz</a>
+      <a href="mailto:website@tillheidrich.de">Kontakt</a>
+    </nav>
   </div>
 </footer>
 
+<script>
+(() => {
+  const io = new IntersectionObserver((es) => {
+    for (const e of es) if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); }
+  }, { rootMargin: '0px 0px -8% 0px', threshold: 0.12 });
+  document.querySelectorAll('.reveal').forEach((el) => io.observe(el));
+
+  const btn = document.querySelector('.menu-btn');
+  const toggle = (open) => {
+    document.body.classList.toggle('menu-open', open);
+    btn.setAttribute('aria-expanded', String(open));
+    btn.setAttribute('aria-label', open ? 'Menü schließen' : 'Menü öffnen');
+  };
+  btn.addEventListener('click', () => toggle(!document.body.classList.contains('menu-open')));
+  document.querySelectorAll('.overlay a').forEach((a) => a.addEventListener('click', () => toggle(false)));
+  addEventListener('keydown', (e) => { if (e.key === 'Escape') toggle(false); });
+})();
+</script>
 </body>
 </html>

nginx.conf

@@ -0,0 +1,26 @@
+server {
+    listen 80;
+    server_name _;
+    root /usr/share/nginx/html;
+    index index.html;
+    charset utf-8;
+
+    gzip on;
+    gzip_types text/css application/javascript image/svg+xml application/json;
+
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header Permissions-Policy "camera=(), microphone=(), geolocation=(), interest-cohort=()" always;
+    add_header Content-Security-Policy "default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'; font-src 'self'; frame-ancestors 'self'; base-uri 'self'" always;
+
+    location /assets/ {
+        expires 30d;
+        add_header Cache-Control "public, max-age=2592000";
+        add_header X-Content-Type-Options "nosniff" always;
+    }
+    location = /impressum { try_files /impressum.html =404; }
+    location = /datenschutz { try_files /datenschutz.html =404; }
+    location / { try_files $uri $uri/ $uri.html =404; }
+    error_page 404 /index.html;
+}