/* ── Hakeem Plus — öffentliche Website ──────────────────────────────────────
   Farben und Schrift kommen aus der App (src/index.css), damit Website und
   Produkt wie eine Sache wirken. Alles mit logischen Eigenschaften
   (margin-inline, inset-inline …), damit dieselbe Datei für Arabisch (RTL)
   und Englisch (LTR) funktioniert — kein zweites Stylesheet.

   Schriften liegen lokal. Nichts wird von fremden Servern nachgeladen: in
   Syrien und im Libanon kann Google blockiert oder langsam sein, und eine
   fehlende arabische Schrift lässt die Seite kaputt aussehen.
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 700;           /* variable Schrift: eine Datei, alle Stärken */
  font-display: swap;
  src: url('/fonts/cairo-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
    U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/cairo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

:root {
  --teal-50:  #e9f8f5;
  --teal-100: #c9ede7;
  --teal-200: #97ddd1;
  --teal-400: #29b3a2;
  --teal:     #12a594;
  --teal-600: #0c8a7c;
  --teal-700: #0c7669;
  --teal-900: #0a4d46;

  --ink:      #0f172a;
  --ink-soft: #334155;
  --muted:    #64748b;
  --line:     #e2e8f0;
  --bg:       #ffffff;
  --bg-soft:  #f8fafc;
  --card:     #ffffff;
  --shadow:   0 1px 2px rgb(15 23 42 / .04), 0 12px 32px -12px rgb(15 23 42 / .12);
  --radius:   14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:      #f1f5f9;
    --ink-soft: #cbd5e1;
    --muted:    #94a3b8;
    --line:     #24334a;
    --bg:       #0b1220;
    --bg-soft:  #0f1828;
    --card:     #131f33;
    --shadow:   0 1px 2px rgb(0 0 0 / .3), 0 12px 32px -12px rgb(0 0 0 / .6);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Cairo', 'Segoe UI', Tahoma, system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; }

.wrap { max-width: 68rem; margin-inline: auto; padding-inline: 1.25rem; }

/* ── Knöpfe ───────────────────────────────────────────────────────────────
   48px hoch, wie in der App (Apple HIG / Material). Nie kleiner als 44px —
   die Zielgruppe sind auch ältere, weniger technikaffine Nutzer.           */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding-inline: 1.6rem;
  border: 1px solid transparent; border-radius: 10px;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  white-space: nowrap;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn-primary {
  background: var(--teal); color: #fff;
  box-shadow: 0 8px 20px -8px rgb(18 165 148 / .7);
}
.btn-primary:hover { background: var(--teal-600); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--teal-400); color: var(--teal-600); }
.btn-sm { min-height: 44px; padding-inline: 1.1rem; font-size: .95rem; }

/* ── Umzugs-Hinweis für die alte installierte App ─────────────────────────
   Bis August 2026 lief die App auf dieser Adresse. Wer sie damals auf den
   Startbildschirm gelegt hat, landet ab jetzt hier — ohne Adressleiste und
   ohne zu verstehen, wo seine App hin ist. Deshalb dieser Balken, sichtbar
   NUR im installierten Modus.                                              */
#moved {
  display: none;
  background: linear-gradient(180deg, #fef3c7, #fde68a);
  color: #713f12;
  padding: .9rem 1.25rem;
  text-align: center;
  font-size: .95rem;
  font-weight: 600;
}
#moved a { color: #713f12; text-underline-offset: 3px; }
@media (display-mode: standalone) { #moved { display: block; } }

/* ── Kopfzeile ───────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; inset-block-start: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-block-end: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.scrolled { border-block-end-color: var(--line); }
.site-header .wrap {
  display: flex; align-items: center; gap: 1rem;
  min-height: 68px;
}
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.1rem; text-decoration: none; }
.brand img { width: 34px; height: 34px; border-radius: 9px; display: block; }

.nav { display: flex; align-items: center; gap: 1.5rem; margin-inline-start: auto; }
.nav a.navlink {
  text-decoration: none; color: var(--ink-soft); font-size: .98rem; font-weight: 600;
  padding-block: .4rem;
  border-block-end: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav a.navlink:hover { color: var(--teal-600); border-block-end-color: var(--teal-400); }
.lang {
  background: none; border: 1px solid var(--line); border-radius: 8px;
  min-height: 40px; padding-inline: .8rem;
  font: inherit; font-weight: 600; font-size: .9rem; color: var(--ink-soft); cursor: pointer;
}
.lang:hover { border-color: var(--teal-400); color: var(--teal-600); }

.brand span { white-space: nowrap; }

@media (max-width: 760px) {
  .nav a.navlink { display: none; }
}
/* Am Handy wird es im Kopf eng: Logo, Name, Sprache und Knopf müssen in eine
   Zeile passen, ohne dass der Name umbricht. */
@media (max-width: 460px) {
  .site-header .wrap { gap: .6rem; }
  .nav { gap: .5rem; }
  .brand { font-size: 1rem; }
  .btn-sm { padding-inline: .85rem; font-size: .88rem; }
  .lang { padding-inline: .6rem; font-size: .82rem; }
}

/* ── Held ─────────────────────────────────────────────────────────────────
   Zwei Spalten am Rechner, gestapelt am Handy. Die weichen Farbflächen im
   Hintergrund sind rein dekorativ und liegen hinter allem (pointer-events).  */
.hero { position: relative; padding-block: clamp(3rem, 8vw, 6rem) clamp(3rem, 7vw, 5rem); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: .5;
  animation: float 18s ease-in-out infinite;
}
.blob-1 { inline-size: 30rem; block-size: 30rem; background: var(--teal-100); inset-block-start: -12rem; inset-inline-end: -8rem; }
.blob-2 { inline-size: 22rem; block-size: 22rem; background: #d1fae5; inset-block-end: -10rem; inset-inline-start: -6rem; animation-delay: -8s; }
@media (prefers-color-scheme: dark) {
  .blob { opacity: .22; }
  .blob-1 { background: var(--teal-700); }
  .blob-2 { background: #065f46; }
}
@keyframes float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(0, -22px, 0) scale(1.06); }
}

.hero .wrap { position: relative; z-index: 1; display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 940px) {
  .hero .wrap { grid-template-columns: 1.05fr .95fr; align-items: center; }
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--teal-50); color: var(--teal-700);
  border: 1px solid var(--teal-100);
  border-radius: 999px; padding: .35rem .9rem;
  font-size: .88rem; font-weight: 600;
  margin-block-end: 1.25rem;
}
@media (prefers-color-scheme: dark) {
  .eyebrow { background: rgb(18 165 148 / .12); border-color: rgb(18 165 148 / .3); color: var(--teal-200); }
}
.eyebrow .dot {
  inline-size: 8px; block-size: 8px; border-radius: 50%;
  background: var(--teal); flex: none;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(18 165 148 / .6); }
  70%      { box-shadow: 0 0 0 7px rgb(18 165 148 / 0); }
}

.hero h1 { font-size: clamp(2rem, 5.2vw, 3.35rem); margin-block-end: 1rem; }
/* Jede Hälfte der Überschrift bekommt ihre eigene Zeile. Ohne das fliessen
   beide ineinander und die farbige Hälfte bricht an einer beliebigen Stelle.
   `balance` verteilt die Wörter gleichmässig, damit kein einzelnes Wort
   allein auf der letzten Zeile hängt. */
.hero h1 span { display: block; text-wrap: balance; }
.hero h1 .accent { color: var(--teal); }
.hero-sub { font-size: clamp(1.05rem, 2.2vw, 1.2rem); color: var(--muted); max-inline-size: 34rem; margin-block-end: 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ── Gerätedarstellung ────────────────────────────────────────────────────
   Bewusst NACHGEBAUT, kein Bildschirmfoto: echte Aufnahmen dürfen nur aus
   dem Demo-Konto stammen, niemals aus einer echten Praxis. Die gezeigten
   Namen sind genau die Demo-Patienten.                                      */
.device-wrap { display: flex; justify-content: center; }
.device {
  inline-size: min(300px, 78vw);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 34px;
  padding: 10px;
  box-shadow: 0 30px 60px -25px rgb(15 23 42 / .35), 0 2px 6px rgb(15 23 42 / .06);
  transform: rotate(-1.5deg);
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}
.device:hover { transform: rotate(0deg) translateY(-6px); }
.screen {
  background: var(--bg-soft);
  border-radius: 26px; overflow: hidden;
  border: 1px solid var(--line);
}
.screen-top {
  background: var(--teal); color: #fff;
  padding: 1rem .9rem .85rem;
  display: flex; align-items: center; gap: .55rem;
}
.screen-top img { inline-size: 22px; block-size: 22px; border-radius: 6px; background: #fff; }
.screen-top b { font-size: .95rem; }
.screen-search {
  margin: .8rem .8rem .4rem; padding: .6rem .8rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  color: var(--muted); font-size: .82rem;
}
.row {
  display: flex; align-items: center; gap: .7rem;
  margin: .45rem .8rem; padding: .65rem .7rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
}
.avatar {
  inline-size: 34px; block-size: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--teal-50); color: var(--teal-700);
  font-weight: 700; font-size: .85rem;
}
@media (prefers-color-scheme: dark) { .avatar { background: rgb(18 165 148 / .16); color: var(--teal-200); } }
.row .name { font-size: .87rem; font-weight: 600; line-height: 1.3; }
.row .meta { font-size: .74rem; color: var(--muted); line-height: 1.3; }
.screen-bar {
  display: flex; justify-content: space-around; gap: .5rem;
  padding: .7rem .8rem 1rem; border-block-start: 1px solid var(--line); margin-block-start: .5rem;
}
.screen-bar span { inline-size: 26px; block-size: 5px; border-radius: 3px; background: var(--line); }
.screen-bar span:first-child { background: var(--teal); }

/* ── Abschnitte ─────────────────────────────────────────────────────────── */
section { padding-block: clamp(3.5rem, 8vw, 5.5rem); }

/* Die Kopfzeile klebt oben und ist ~68px hoch. Ohne diesen Abstand landet
   die Überschrift beim Springen genau darunter und ist nicht zu sehen. */
section[id] { scroll-margin-block-start: 88px; }
.section-soft { background: var(--bg-soft); border-block: 1px solid var(--line); }
.section-head { max-inline-size: 42rem; margin-block-end: 3rem; }
.section-head h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); margin-block-end: .8rem; }
.section-head p { color: var(--muted); font-size: 1.05rem; }

.grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.6rem;
  box-shadow: var(--shadow);
  transition: transform .25s ease, border-color .25s ease;
}
.card:hover { transform: translateY(-3px); border-color: var(--teal-200); }
.card .icon {
  inline-size: 44px; block-size: 44px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--teal-50); color: var(--teal-600);
  margin-block-end: 1rem;
}
@media (prefers-color-scheme: dark) { .card .icon { background: rgb(18 165 148 / .14); color: var(--teal-200); } }
.card h3 { font-size: 1.08rem; margin-block-end: .4rem; }
.card p { color: var(--muted); font-size: .97rem; }

/* ── Hervorgehobener Block (Offline) ─────────────────────────────────────── */
.spotlight {
  background: linear-gradient(135deg, var(--teal-900), var(--teal-700));
  color: #fff; border-radius: 22px;
  padding: clamp(2rem, 5vw, 3.2rem);
  display: grid; gap: 2rem; align-items: center;
  position: relative; overflow: hidden;
}
@media (min-width: 900px) { .spotlight { grid-template-columns: 1.1fr .9fr; } }
.spotlight h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin-block-end: .9rem; }
.spotlight p { color: rgb(255 255 255 / .82); }
.spotlight ul { margin: 1.4rem 0 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.spotlight li { display: flex; align-items: flex-start; gap: .6rem; color: rgb(255 255 255 / .92); font-size: .98rem; }
.spotlight li svg { flex: none; margin-block-start: .35rem; }

/* Herzschlag-Linie: greift das Logo auf. Zeichnet sich langsam von selbst. */
.ecg { inline-size: 100%; block-size: auto; opacity: .9; }
.ecg path {
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  animation: draw 5s ease-in-out infinite;
}
@keyframes draw {
  0%       { stroke-dashoffset: 1000; }
  45%, 60% { stroke-dashoffset: 0; }
  100%     { stroke-dashoffset: -1000; }
}

/* ── Fachrichtungen ──────────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: .55rem 1.1rem;
  font-size: .95rem; font-weight: 600; color: var(--ink-soft);
}
.chips-note { margin-block-start: 1.6rem; color: var(--muted); font-size: .97rem; }
.chips-note a {
  color: var(--teal-600); font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px;
}
.chips-note a:hover { color: var(--teal-700); }

/* ── Schritte ────────────────────────────────────────────────────────────── */
.steps { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); counter-reset: step; }
.step { position: relative; padding-block-start: 3.2rem; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--teal); color: #fff; font-weight: 700;
}
.step h3 { font-size: 1.05rem; margin-block-end: .35rem; }
.step p { color: var(--muted); font-size: .97rem; }

/* ── Aufforderung + Fußzeile ─────────────────────────────────────────────── */

/* ── Wabenwand mit wanderndem Licht ───────────────────────────────────────
   Der Abschnitt ist IMMER dunkel, auch im hellen Modus: leuchtende Linien
   brauchen einen dunklen Grund, auf Weiss verpufft der Effekt. Zusammen mit
   dem Offline-Block rahmt das die Seite oben und unten.

   Vier Ebenen, von hinten nach vorn:
     1. das wandernde Licht   (.cta-light)
     2. unscharfe Kopie der Linien = das Leuchten   (::before)
     3. scharfe Linien        (::after)
     4. der Inhalt            (.wrap)

   Das Muster ist ein eingebettetes SVG — keine zusätzliche Anfrage, und es
   bleibt bei jeder Grösse gestochen scharf. Die Linienstärke steht in
   SVG-Einheiten (0.5 von 34.64), damit sie beim Vergrössern dünn BLEIBT:
   grosse Zellen, feine Striche. */
:root {
  /* Heller Modus: Markentürkis auf hellem Grund. Der dunkle Modus tauscht es
     unten gegen den helleren Ton — dieselbe Wabe, andere Strichfarbe. */
  --hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.64' height='60' viewBox='0 0 34.64 60'%3E%3Cg fill='none' stroke='%2312a594' stroke-width='.5'%3E%3Cpath d='M0 0V10L17.32 20L34.64 10V0'/%3E%3Cpath d='M0 60V50L17.32 40L34.64 50V60'/%3E%3Cpath d='M17.32 20V40'/%3E%3C/g%3E%3C/svg%3E");
  /* Dieselbe Wabe, aber mit dickerem Strich — NUR als Maske für den Schimmer.
     Die sichtbaren Linien sind 0,63 px dünn; als Maske lassen sie kaum etwas
     durch, und der Schimmer bliebe unsichtbar. Mit 2 px Maskenbreite legt er
     sich als weicher Schein über die feinen Linien. */
  --hex-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.64' height='60' viewBox='0 0 34.64 60'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.8'%3E%3Cpath d='M0 0V10L17.32 20L34.64 10V0'/%3E%3Cpath d='M0 60V50L17.32 40L34.64 50V60'/%3E%3Cpath d='M17.32 20V40'/%3E%3C/g%3E%3C/svg%3E");
  --hex-size: 44px 76px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.64' height='60' viewBox='0 0 34.64 60'%3E%3Cg fill='none' stroke='%235fcabb' stroke-width='.5'%3E%3Cpath d='M0 0V10L17.32 20L34.64 10V0'/%3E%3Cpath d='M0 60V50L17.32 40L34.64 50V60'/%3E%3Cpath d='M17.32 20V40'/%3E%3C/g%3E%3C/svg%3E");
  }
}
/* Am Handy dieselbe Zellzahl im Blick wie am Rechner — sonst sieht man dort
   nur wenige riesige Waben. */
@media (max-width: 640px) {
  :root { --hex-size: 34px 59px; }
}

/* Der Kern der Lösung: im hellen Modus ist der Abschnitt HELL, im dunklen
   DUNKEL. Vorher stand hier in beiden Modi eine dunkle Wand — dadurch musste
   im Hellen ein Weg von Weiss nach Tiefdunkel gefunden werden, und der sieht
   immer entweder nach Kante oder nach Nebel aus. Läuft der Verlauf dagegen
   von Weiss über ein zartes Türkis zurück nach Weiss, kann er gar nicht
   auffallen. */
.cta-pattern {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  background: linear-gradient(to bottom,
    var(--bg) 0%,
    #f3fbf9 18%,
    #e4f5f1 42%,
    #e0f3ef 58%,
    #f3fbf9 82%,
    var(--bg) 100%);
  padding-block: clamp(6rem, 12vw, 9rem);
}

/* DUNKLER MODUS: dunkle Fläche, Seite und Feld liegen farblich nah
   beieinander — ein kurzer Weg genügt. */
@media (prefers-color-scheme: dark) {
  .cta-pattern {
    color: #fff;
    background: linear-gradient(to bottom,
      var(--bg) 0%,
      #0d2733 34%,
      #071219 54%,
      #0c242f 72%,
      var(--bg) 100%);
  }
}
.cta-pattern > .wrap { position: relative; z-index: 6; }

/* 5 — dunkle Fläche NUR hinter dem Text.
   Ein gleichmässiger Schleier über den ganzen Abschnitt würde auch den
   Schimmer dämpfen. Diese weiche Ellipse verdunkelt die Mitte, wo die Schrift
   steht, und lässt die Ränder in voller Helligkeit leuchten. */
.cta-pattern .cta-scrim {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none;
  /* Klein gehalten: sie darf nur den dunklen Kern verstärken. Reicht sie bis
     in die farbigen Übergangszonen, liegt dort ein grauer Schmier. */
  background: radial-gradient(ellipse 48% 32% at 50% 50%,
    rgb(4 14 19 / .80) 0%,
    rgb(4 14 19 / .55) 55%,
    rgb(4 14 19 / 0) 100%);
}
/* Im HELLEN Modus (Grundzustand) entfällt sie ganz: die Mitte des
   Türkis-Verlaufs ist bereits tiefdunkel, und auf den farbigen Zonen
   zeichnete die Ellipse einen sichtbaren dunklen Bogen über dem Titel.
   Der dunkle Modus schaltet sie unten wieder ein. (Bewusst KEIN
   `prefers-color-scheme: light` — der Test-Umschalter schreibt nur die
   dark-Blöcke um und würde eine light-Regel genau falsch herum schalten.) */
.cta-pattern .cta-scrim { display: none; }
@media (prefers-color-scheme: dark) {
  .cta-pattern .cta-scrim { display: block; }
}

/* 1 — das wandernde Licht.
   Aufgeteilt in Träger + ::before: der Träger füllt den Abschnitt und trägt
   den Ausblend-Verlauf, das eigentliche Licht wandert DARIN. So wird das
   Licht an den Kanten weich auf null gefahren statt von overflow:hidden
   abgeschnitten — genau diese Schnittkante war als harte Linie sichtbar
   (im dunklen Modus deutlich, im hellen kaum). */
.cta-pattern .cta-light {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  -webkit-mask-image: var(--fade-y);
  mask-image: var(--fade-y);
}
.cta-pattern .cta-light::before {
  content: '';
  position: absolute;
  inline-size: 52rem; block-size: 52rem;
  inset-block-start: -18rem; inset-inline-start: -16rem;
  background: radial-gradient(circle, rgb(41 179 162 / .40), rgb(41 179 162 / 0) 62%);
  filter: blur(30px);
  animation: sweep 24s ease-in-out infinite;
}
/* Oben und unten weich auslaufen. Denselben Verlauf bekommt JEDE Ebene der
   Wabenwand — sonst bräche eine davon hart ab und der Übergang wäre dahin. */
:root {
  --fade-y: linear-gradient(to bottom, transparent 0%, #000 32%, #000 68%, transparent 100%);
}

.cta-pattern::before {             /* 2 — das Leuchten der Linien */
  content: '';
  position: absolute; inset: -20px; z-index: 2;
  background-image: var(--hex);
  background-size: var(--hex-size);
  filter: blur(5px);
  opacity: .55;
  pointer-events: none;
  -webkit-mask-image: var(--fade-y);
  mask-image: var(--fade-y);
}
.cta-pattern::after {              /* 3 — die scharfen Linien */
  content: '';
  position: absolute; inset: 0; z-index: 3;
  background-image: var(--hex);
  background-size: var(--hex-size);
  opacity: .75;
  pointer-events: none;
  -webkit-mask-image: var(--fade-y);
  mask-image: var(--fade-y);
}

.cta-pattern .cta-shimmer {        /* 4 — der Schimmer IN den Linien */
  position: absolute; inset: 0; z-index: 4;
  pointer-events: none;

  /* Ein heller Streifen, der schräg über die Fläche wandert … */
  /* Heller Modus: der Streifen ist DUNKEL und wird per `multiply`
     eingerechnet — auf hellem Grund kann Licht nichts aufhellen, also
     verdunkelt die Welle die Linien im Vorbeiziehen. Der dunkle Modus dreht
     es unten um (heller Streifen, `screen`). */
  background: linear-gradient(115deg,
    transparent 41%,
    rgb(12 120 108 / .30) 47%,
    rgb(6 78 70 / .85) 50%,
    rgb(12 120 108 / .30) 53%,
    transparent 59%);
  background-size: 220% 220%;

  /* … aber sichtbar NUR dort, wo eine Wabenlinie ist. Das Muster dient hier
     als Maske, deshalb wandert der Schimmer durch die Linien statt als heller
     Balken über den ganzen Abschnitt zu ziehen. */
  /* Zwei Masken übereinander: die Wabe bestimmt WO der Schimmer sichtbar ist,
     der senkrechte Verlauf lässt ihn oben und unten auslaufen. `intersect`
     heisst: nur wo beide durchlassen. */
  -webkit-mask-image: var(--hex-mask), var(--fade-y);
  mask-image: var(--hex-mask), var(--fade-y);
  -webkit-mask-size: var(--hex-size), 100% 100%;
  mask-size: var(--hex-size), 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;

  mix-blend-mode: multiply;
  animation: shimmer 9s linear infinite;
}
@media (prefers-color-scheme: dark) {
  .cta-pattern .cta-shimmer {
    background: linear-gradient(115deg,
      transparent 41%,
      rgb(150 250 235 / .28) 47%,
      rgb(215 255 250 / .75) 50%,
      rgb(150 250 235 / .28) 53%,
      transparent 59%);
    background-size: 220% 220%;
    mix-blend-mode: screen;
  }
}

/* Nur die Position des Farbverlaufs wandert — die Maske bleibt stehen. Würde
   stattdessen das Element selbst verschoben, wanderten die Waben mit. */
@keyframes shimmer {
  from { background-position: 130% 130%; }
  to   { background-position: -30% -30%; }
}

/* Weit gestreute Bahn, damit die Bewegung nie als Schleife auffällt. */
@keyframes sweep {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  35%  { transform: translate3d(38vw, 7rem, 0) scale(1.15); }
  70%  { transform: translate3d(64vw, -4rem, 0) scale(.92); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* Der zweite Knopf steht hier auf getöntem Grund; der übliche blassgraue Rand
   verschwindet darin. Türkis getönt bleibt er sichtbar. */
.cta-pattern .btn-ghost {
  border-color: rgb(18 165 148 / .45);
  background: rgb(255 255 255 / .75);
}
.cta-pattern .btn-ghost:hover { border-color: var(--teal); background: #fff; }

/* Im hellen Modus liest sich der Text wie überall sonst auf der Seite (dunkel
   auf hell) — nur der dunkle Modus dreht ihn auf Weiss. */
@media (prefers-color-scheme: dark) {
  .cta-pattern .cta h2 { color: #fff; }
  .cta-pattern .cta p { color: rgb(255 255 255 / .72); }
  .cta-pattern .btn-ghost { color: #fff; border-color: rgb(255 255 255 / .28); background: transparent; }
  .cta-pattern .btn-ghost:hover { border-color: #fff; color: #fff; background: rgb(255 255 255 / .08); }
}

.cta { text-align: center; }
.cta h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); margin-block-end: .9rem; }
.cta p { color: var(--muted); margin-block-end: 2rem; }
.cta .hero-actions { justify-content: center; }

/* Ohne obere Trennlinie: der Abschnitt darüber läuft weich in die Fusszeile
   aus, eine Linie würde den Übergang wieder zerschneiden. */
.site-footer { padding-block: 2.5rem; color: var(--muted); font-size: .93rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.site-footer a { color: var(--teal-600); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-contact { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.5rem; }
/* Die Nummer bleibt in Leserichtung links-nach-rechts, auch auf der
   arabischen Seite — sonst rutscht das Pluszeichen ans falsche Ende. */
.footer-contact .wa { display: inline-flex; align-items: center; gap: .45rem; }
.footer-contact .wa svg { flex: none; }

/* ── Einblenden beim Scrollen ─────────────────────────────────────────────
   Der versteckte Zustand hängt an `.js` — die Klasse setzt ein Skript im
   <head>. Ohne JavaScript (oder wenn es abstürzt) ist der Inhalt also ganz
   normal sichtbar. Verstecken per CSS und Einblenden per JavaScript ohne
   diese Absicherung heißt: ein Skriptfehler macht die halbe Seite weiß. */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1); }

/* Wer Bewegung reduziert haben will, bekommt eine ruhige Seite — alles ist
   sofort sichtbar, nichts blinkt, nichts schwebt. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .blob, .ecg path, .eyebrow .dot,
  .cta-pattern .cta-light::before, .cta-pattern .cta-shimmer { animation: none; }
  .device { transform: none; }
  * { transition-duration: .01ms !important; }
}