{{define "landing_de"}}
<style>

  .landing-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 48px;
    
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
  }

  /* Carousel */
  .carousel {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 32px;
  }
  .carousel-track {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease;
  }
  .carousel-slide {
    min-width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
  }
  .carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 32px;
  }
  .carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s;
  }
  .carousel-dot.active {
    background: var(--accent);
  }

  /* Hero - Block 1 */
  .hero-sources {
    
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.9;
    margin-bottom: 32px;
  }
  .hero-sources span { display: block; }
  .hero-sources .different {
    
    
  }

  .hero-pivot {
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--text);
    line-height: 1.8;
    margin-bottom: 32px;
    
  }
  .hero-pivot span { display: block; }
  .hero-pivot .emphasis {
    font-size: 1.3rem;
    font-weight: 600;
    margin-top: 12px;
  }

  .hero-answer {
    text-align: center;
    font-size: 1.7rem;
    font-weight: 500;
    color: var(--text);
    line-height: 1.5;
    margin-top: 16px;
    margin-bottom: 8px;
  }
  .hero-answer .inou {
    font-weight: 700;
    color: var(--accent);
  }

  .hero-tagline {
    text-align: center;
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
  }

  .carousel-caption {
    text-align: center;
    font-size: 0.95rem;
    color: var(--muted);
    line-height: 1.5;
    min-height: 3em;
    padding: 0 24px;
    margin-bottom: 24px;
  }

  .hero-cta { margin-bottom: 0; text-align: center; }
  .hero-cta .btn {
    padding: 18px 56px;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 4px;
  }

  /* Story - Block 2 */
  .story-prose.warm {
    
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text);
  }
  .story-prose.warm p {
    margin-bottom: 20px;
  }
  .story-prose.warm .emphasis {
    font-weight: 600;
    font-size: 1.15rem;
  }

  .story-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 32px;
  }

  .story-pair {
    margin-bottom: 32px;
  }
  .story-pair .data {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--text);
    margin-bottom: 4px;
  }
  .story-pair .reality {
    font-size: 1rem;
    font-weight: 300;
    font-style: italic;
    
    color: var(--text-muted);
  }

  .story-transition {
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--text);
    line-height: 1.8;
    margin: 32px 0;
    padding: 24px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  .story-gaps {
    font-size: 1rem;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 32px;
  }
  .story-gaps span { display: block; }
  .story-gaps .indent {  font-style: italic; }

  .story-connections {
    font-size: 1rem;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 32px;
  }
  .story-connections span { display: block; }

  .story-ai {
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--text);
    line-height: 1.8;
    margin-bottom: 32px;
  }
  .story-ai span { display: block; }
  .story-ai .last {
    font-style: italic;
  }

  .story-prose {
    font-size: 1rem;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 20px;
  }
  .story-prose:last-of-type { margin-bottom: 32px; }
  .story-prose strong { font-weight: 600; color: var(--text); }
  .story-prose .inou { font-weight: 700; color: var(--accent); }

  .story-closing {
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--text);
    padding-top: 24px;
    border-top: 1px solid var(--border);
  }
  .story-closing .inou {
    font-weight: 700;
    color: var(--accent);
  }

  /* Trust section */
  .trust-card {
    
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 32px 48px;
    margin-bottom: 24px;
  }
  .trust-card .section-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 24px;
  }
  .trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }
  .trust-item {
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.6;
  }
  .trust-item strong {
    display: block;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
  }

  /* Footer */
  .landing-footer {
    padding: 16px 0;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .landing-footer-left {
    font-size: 0.9rem;
    color: var(--text-muted);
    display: flex;
    gap: 16px;
    align-items: center;
  }
  .landing-footer-left a {
    color: var(--text-muted);
    text-decoration: none;
  }
  .landing-footer-left a:hover { color: var(--accent); }
  .landing-footer-right { font-size: 1rem; }
  .landing-footer-right .inou {
    font-weight: 700;
    color: var(--accent);
  }
  .landing-footer-right .health {
    font-weight: 400;
    color: var(--text-muted);
  }

  /* Mobile */
  @media (max-width: 768px) {
    .trust-card {
    
    width: 100%;
    margin-left: auto;
    margin-right: auto; padding: 24px; }
    .hero-sources {
     font-size: 1rem; line-height: 1.8; margin-bottom: 32px; }
    .hero-pivot { font-size: 1.1rem; margin-bottom: 32px;
     }
    .hero-pivot .emphasis { font-size: 1.3rem; }
    .hero-answer {
    text-align: center; font-size: 1.2rem; margin-top: 16px;
    margin-bottom: 8px; }
    .hero-tagline { font-size: 2rem; margin-bottom: 8px; }
    .carousel-caption { font-size: 0.85rem; }
    .hero-cta .btn { padding: 14px 40px; }
    .story-pair .data { font-size: 1rem; }
    .story-pair .reality { font-size: 0.95rem; }
    .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  }

  @media (max-width: 480px) {
    .trust-card {
    
    width: 100%;
    margin-left: auto;
    margin-right: auto; padding: 20px 16px; }
    .hero-sources {
     font-size: 0.95rem; line-height: 1.9; }
    .hero-pivot { font-size: 1rem; }
    .hero-pivot .emphasis { font-size: 1.2rem; }
    .story-pair { margin-bottom: 24px; }
    .trust-grid { grid-template-columns: 1fr; gap: 20px; }
    .landing-footer { flex-direction: column; gap: 12px; text-align: center; }
    .landing-footer-left { flex-direction: column; gap: 8px; }
  }
</style>

<div class="sg-container">

  <div class="landing-card">
    <div class="hero">
      <div class="hero-tagline">Deine Gesundheit, verstanden.</div>
      <div class="hero-answer">Alle deine Gesundheitsdaten — organisiert, privat und bereit für deine KI.</div>
      <div class="carousel">
        <div class="carousel-track">
          <div class="carousel-slide" style="background-image: url('/static/carousel-1.webp')"></div>
          <div class="carousel-slide" style="background-image: url('/static/carousel-2.webp')"></div>
          <div class="carousel-slide" style="background-image: url('/static/carousel-3.webp')"></div>
          <div class="carousel-slide" style="background-image: url('/static/carousel-4.webp')"></div>
          <div class="carousel-slide" style="background-image: url('/static/carousel-5.webp')"></div>
          <div class="carousel-slide" style="background-image: url('/static/carousel-6.webp')"></div>
        </div>
      </div>
      <div class="carousel-caption" id="carousel-caption">Verfolge deine Labortrends im Zeitverlauf — sieh genau, was deine KI sieht, wenn sie eine Änderung meldet.</div>
      <div class="carousel-dots">
        <button class="carousel-dot active" data-index="0"></button>
        <button class="carousel-dot" data-index="1"></button>
        <button class="carousel-dot" data-index="2"></button>
        <button class="carousel-dot" data-index="3"></button>
        <button class="carousel-dot" data-index="4"></button>
        <button class="carousel-dot" data-index="5"></button>
      </div>
      <div class="hero-cta">
        {{if .Dossier}}<a href="/invite" class="btn btn-primary">Einen Freund einladen</a>{{else}}<a href="/start" class="btn btn-primary">Einloggen</a>{{end}}
        {{if .Error}}<div class="error" style="margin-top: 24px;">{{.Error}}</div>{{end}}
      </div>
    </div>
  </div>

  <div class="landing-card">
    <div class="story">
      <h2 class="story-title">Du brauchst KI für deine Gesundheit</h2>
      
      <div class="story-prose warm">
        <p>Deine Gesundheitsdaten leben an einem Dutzend verschiedenen Orten — bei deinem Kardiologen, deinem Neurologen, deinem Labor, deiner Uhr, deinen Apps, deinem 23andMe. Und nur du kennst den Rest: was du isst, was du trinkst, welche Nahrungsergänzungsmittel du einnimmst. Deine Trainingsroutine. Deine Symptome. Deine Ziele — ob du versuchst schwanger zu werden, dich auf einen Marathon vorzubereiten oder einfach nur weniger erschöpft zu fühlen.</p>
        
        <p>Ob du gesund bist und so bleiben willst, eine schwierige Diagnose durchläufst oder dich um ein Familienmitglied kümmerst, das sich nicht selbst vertreten kann — kein einziger Arzt sieht das komplette Bild. Kein System verbindet es.</p>
        
        <p>Aber <strong><em>du</em></strong> hast Zugriff auf alles. Du hast einfach nicht die Expertise, um alles zu verstehen.</p>
        
        <p class="emphasis">Deine KI macht es. inou gibt dir das komplette Bild.</p>
      </div>
    </div>
  </div>
  <div class="landing-card">
    <div class="story">
      <h2 class="story-title">Die Herausforderung</h2>
      <div class="story-pair">
        <div class="data">Deine MRT hat 4.000 Schichten.</div>
        <div class="reality">Es wurde in 10 Minuten gelesen.</div>
      </div>
      
      <div class="story-pair">
        <div class="data">Dein Genom hat Millionen von Varianten.</div>
        <div class="reality">Alles, was du gelernt hast, war deine Augenfarbe und wo deine Vorfahren herkommen.</div>
      </div>
      
      <div class="story-pair">
        <div class="data">Deine Blutuntersuchung hat Dutzende von Markern.</div>
        <div class="reality">Dein Arzt sagte: 'Alles sieht gut aus.'</div>
      </div>
      
      <div class="story-pair">
        <div class="data">Deine Uhr hat 10.000 Stunden Schlaf aufgezeichnet.</div>
        <div class="reality">Dein Trainer weiß nicht, dass es existiert.</div>
      </div>
      
      <div class="story-pair">
        <div class="data">Du hast einhundert verschiedene Nahrungsergänzungsmittel ausprobiert.</div>
        <div class="reality">Niemand hat gefragt, welche.</div>
      </div>
      
      <div class="story-transition">
        Die Verbindungen sind da.<br>
        Sie sind einfach zu komplex, damit eine Person sie erfassen kann.
      </div>
      
      <div class="story-gaps">
        <span>Niemand weiß, wie dein Körper Warfarin verarbeitet — nicht einmal du.</span>
        <span class="indent">Aber die Antwort könnte bereits in deinem 23andMe versteckt sein.</span>
        <span>Das 'unauffällige' auf deiner MRT — hat jemand alle 4.000 Schichten genau betrachtet?</span>
        <span>Deine Schilddrüse ist 'im Bereich' — aber niemand hat es mit deiner Müdigkeit, deinem Gewicht, ständigem Kältegefühl verbunden.</span>
      </div>
      
      <div class="story-connections">
        <span>Niemand verbindet deinen Nachmittagscafé mit deinen Schlafwerten.</span>
        <span>Deine Eisenwerte mit deiner Trainingsmüdigkeit.</span>
        <span>Deine Genetik mit deinem Gehirnnebel.</span>
      </div>
      
      <div class="story-ai">
        <span>Deine KI vergisst nicht.</span>
        <span>Eilt nicht.</span>
        <span>Findet, was verpasst wurde.</span>
        <span class="last">Spezialisiert sich nicht — sieht das komplette du.</span>
      </div>
      
      <div class="story-closing"><span class="inou">inou</span> lässt deine KI alles berücksichtigen — jede Schicht, jeden Marker, jede Variante — verbindet alles und gibt dir endlich Antworten, die sonst niemand geben könnte.</div>
    </div>
  </div>


  <div class="landing-card">
    <div class="story">
      <h2 class="story-title">Warum wir das gebaut haben</h2>
      
      <p class="story-prose">Du hast Jahre an Gesundheitsdaten gesammelt. Scans aus dem Krankenhaus. Blutuntersuchungen aus dem Labor. Ergebnisse aus dem Portal deines Arztes. Daten von deiner Uhr. Vielleicht sogar dein DNA.</p>
      
      <p class="story-prose">Und dann gibt es alles, was nur du kennst — dein Gewicht, dein Blutdruck, dein Trainingsplan, die Nahrungsergänzungsmittel, die du einnimmst, die Symptome, die du erwähnen wolltest.</p>
      
      <p class="story-prose">Alles ist da — aber verteilt über Systeme, die nicht miteinander kommunizieren, von Spezialisten gehalten, die nur ihr Stück sehen, oder in deinem eigenen Kopf verankert.</p>
      
      <p class="story-prose">Dein Kardiologe weiß nicht, was dein Neurologe gefunden hat. Dein Trainer hat deine Blutuntersuchung nicht gesehen. Dein Arzt hat keine Ahnung, welche Nahrungsergänzungsmittel du einnimmst. Und keiner von ihnen hat Zeit, mit dir zu sitzen und die Punkte zu verbinden.</p>
      
      <p class="story-prose"><strong>KI kann endlich.</strong> Sie kann zusammenziehen, was kein einziger Experte sieht — und es dir tatsächlich erklären.</p>
      
      <p class="story-prose">Aber diese Daten passen nicht in ein Chatfenster. Und das Letzte, was du willst, ist deine medizinische Vorgeschichte auf fremden Servern, die ihre Modelle trainieren.</p>
      
      <p class="story-prose"><span class="inou">inou</span> bringt alles zusammen — Labore, Bildgebung, Genetik, Vitalwerte, Medikamente, Nahrungsergänzungsmittel — verschlüsselt, privat und mit absolut niemandem geteilt. Deine KI verbindet sich sicher. Deine Daten bleiben deine.</p>
      
      <div class="story-closing">Deine Gesundheit, verstanden.</div>
    </div>
  </div>

  <div class="trust-card">
    <div class="section-label">{{.T.data_yours}}</div>
    <div class="trust-grid">
      <div class="trust-item">
        <strong>{{.T.never_training}}</strong>
        {{.T.never_training_desc}}
      </div>
      <div class="trust-item">
        <strong>{{.T.never_shared}}</strong>
        {{.T.never_shared_desc}}
      </div>
      <div class="trust-item">
        <strong>{{.T.encrypted}}</strong>
        {{.T.encrypted_desc}}
      </div>
      <div class="trust-item">
        <strong>{{.T.delete}}</strong>
        {{.T.delete_desc}}
      </div>
    </div>
  </div>

  {{template "footer"}}

</div>
<script>
(function() {
  var track = document.querySelector('.carousel-track');
  var dots = document.querySelectorAll('.carousel-dot');
  var caption = document.getElementById('carousel-caption');
  var captions = [
    'Verfolge deine Labortrends im Zeitverlauf \u2014 sieh genau, was deine KI sieht, wenn sie eine Änderung meldet.',
    'Deine Labore, Scans und dein Genom an einem Ort \u2014 durchsuche alles, auf das deine KI Zugriff hat.',
    'Betrachte deine eigene MRT \u2014 zoome in die gleichen Schichten, die deine KI analysiert hat.',
    'Deine Gehirnscans in 3D \u2014 navigiere durch jede Ebene, verifiziere jede Entdeckung, die deine KI gemacht hat.',
    'Deine KI verbindet die Punkte über Labore und Genom \u2014 und erklärt es in einfacher Sprache.',
    'Deine Röntgenaufnahme, volle Auflösung \u2014 zoome in die Befunde, die deine KI markiert hat.'
  ];
  var count = dots.length;
  var current = 0;
  function go(i) {
    current = i;
    track.style.transform = 'translateX(-' + (i * 100) + '%)';
    dots.forEach(function(d, j) { d.classList.toggle('active', j === i); });
    caption.textContent = captions[i];
  }
  dots.forEach(function(d) {
    d.addEventListener('click', function() { go(+d.dataset.index); });
  });
  setInterval(function() { go((current + 1) % count); }, 8000);
})();
</script>
{{end}}