/* Mango & Dill V2 · Marken-Palette unverändert (siehe website/tailwind.config.js) */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201F, U+20AC;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF;
}

:root {
  --mango: #E8BC4F;
  --petrol: #1CB0A3;
  --petrol-dunkel: #0E7A70;
  --petrol-tief: #094F49;
  --caffee: #494D48;
  --grund: #FAF9F6;
  --tinte: #2F332E;
  --weich: #5C615B;
  --leise: #6E736C;
  --linie: #DFDCD5;
  --flaeche: #EFECE6;
  --geraet: #1A1C19;
  --radius-zelle: 1.75rem;
  --radius-phone: 2.6rem;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--caffee);
  font-family: "Archivo", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--mango); color: var(--tinte); }

a { color: var(--petrol-dunkel); }
a:hover { color: var(--petrol-tief); }
:focus-visible {
  outline: 3px solid var(--petrol-dunkel);
  outline-offset: 3px;
  border-radius: 4px;
}

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

h1, h2, h3 { color: var(--tinte); margin: 0; text-wrap: balance; }

section[id] { scroll-margin-top: 6rem; }

.skip {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  background: var(--tinte); color: #fff;
  padding: 0.6rem 1rem; border-radius: 999px;
  transition: top 0.2s var(--ease-out);
}
.skip:focus { top: 1rem; color: #fff; }

/* ===================== NAV ===================== */

.nav {
  position: fixed;
  top: 1rem; left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 2rem;
  width: max-content;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border-radius: 999px;
  background: rgba(250, 249, 246, 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(47, 51, 46, 0.08);
  box-shadow: 0 10px 30px -18px rgba(47, 51, 46, 0.35);
  max-width: calc(100vw - 2rem);
}
@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--grund); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.nav > * { flex-shrink: 0; }
.nav-brand {
  display: flex; align-items: center; gap: 0.55rem;
  white-space: nowrap;
  font-weight: 600; letter-spacing: -0.015em;
  color: var(--tinte); text-decoration: none;
}
.nav-brand:hover { color: var(--tinte); }
.nav-icon { border-radius: 7px; }
.nav-links { display: flex; gap: 1.1rem; }
.nav-links a {
  color: var(--weich); text-decoration: none;
  font-size: 0.9375rem; font-weight: 500;
  transition: color 0.18s ease;
}
.nav-links a:hover { color: var(--tinte); }
.nav-lang {
  color: var(--weich);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.2rem;
  transition: color 0.18s ease;
}
.nav-lang:hover { color: var(--tinte); }
.nav-cta {
  background: var(--tinte); color: #fff;
  text-decoration: none; font-weight: 600; font-size: 0.9375rem;
  padding: 0.5rem 1.1rem; border-radius: 999px;
  transition: background 0.18s ease, transform 0.12s var(--ease-out);
}
.nav-cta:hover { background: var(--petrol-tief); color: #fff; }
.nav-cta:active { transform: scale(0.97); }

/* ===================== HERO ===================== */

.hero {
  padding: clamp(7rem, 12vh, 9.5rem) 1.5rem 0;
  overflow: hidden;
}
.hero-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 3rem;
  align-items: center;
}
.hero-title {
  font-size: clamp(2.9rem, 6.5vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
}
.hero-title .w {
  display: inline-block;
  animation: wort-auf 0.9s var(--ease-out) both;
}
.hero-title .w:nth-child(2) { animation-delay: 0.08s; }
.hero-title .w:nth-child(3) { animation-delay: 0.16s; }
.hero-title .akzent { color: var(--petrol-dunkel); }
/* Ohne Unschaerfe. Die Ueberschrift ist das groesste Element des ersten
   Bildschirms und bestimmt die gefuehlte Ladezeit. Ein blur darauf verzoegert
   genau den Satz, der die Seite traegt, und muss auf Handy-GPUs pro Bild neu
   gerastert werden. Deckkraft und Versatz reichen. */
@keyframes wort-auf {
  from { opacity: 0; transform: translateY(0.55em); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.hero-lead {
  max-width: 34rem;
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  color: var(--weich);
  margin: 1.6rem 0 2.2rem;
}
.hero-actions { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.store-badge { display: inline-block; border-radius: 12px; transition: transform 0.25s var(--ease-out); }
.store-badge:hover { transform: translateY(-2px); }
.store-badge:active { transform: scale(0.98); }
.hero-note { margin: 0; font-size: 0.9375rem; color: var(--leise); }

.hero-phones {
  position: relative;
  min-height: 560px;
}
/* iPhone-Rahmen: eine Mockup-Komponente fuer alle Telefone der Seite.
   Schlanker Titan-Rand mit Lichtkante oben und dunkler Unterkante statt
   flachem Schwarz; Dynamic Island als ::before (nur auf App-Screens, auf
   Sperrbildschirmen steht dort das Datum). .phone-offen = unten vom
   Kachelrand angeschnitten, .phone-mini = kleine Bento-Variante. */
.phone {
  position: relative;
  display: block;
  background: linear-gradient(165deg, #454943 0%, var(--geraet) 30%, #0e100e 100%);
  border-radius: var(--radius-phone);
  padding: 8px;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.22),
    inset 0 -1px 1px rgba(0, 0, 0, 0.55),
    0 30px 60px -30px rgba(47, 51, 46, 0.5);
}
.phone img { border-radius: calc(var(--radius-phone) - 8px); }
.phone::before {
  content: "";
  position: absolute;
  top: 3.2%;
  left: 50%;
  transform: translateX(-50%);
  width: 25%;
  aspect-ratio: 10 / 3;
  border-radius: 999px;
  background: #060706;
  z-index: 1;
}
.phone-back::before, .phone-modus::before { display: none; }
.phone-offen {
  border-radius: var(--radius-phone) var(--radius-phone) 0 0;
  padding-bottom: 0;
}
.phone-offen img {
  border-radius: calc(var(--radius-phone) - 8px) calc(var(--radius-phone) - 8px) 0 0;
}
.phone-front {
  position: absolute;
  width: min(272px, 58%);
  left: 8%; top: 1.5rem;
  z-index: 3;
  transform: rotate(-3deg);
  animation: schweben 7s ease-in-out infinite;
}
.phone-back {
  position: absolute;
  width: min(240px, 50%);
  right: 4%; top: 6.5rem;
  z-index: 2;
  transform: rotate(4deg);
  animation: schweben 8s ease-in-out 0.8s infinite;
}
@keyframes schweben {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}
.kreis {
  position: absolute; border-radius: 50%; z-index: 1;
}
.kreis-mango {
  width: 340px; height: 340px;
  background: var(--mango);
  right: -70px; top: -40px;
  opacity: 0.9;
}
.kreis-petrol {
  width: 150px; height: 150px;
  background: var(--petrol);
  left: -10px; bottom: 10px;
  opacity: 0.55;
}

/* ===================== MARQUEE ===================== */

.marquee-band {
  padding: clamp(4.5rem, 8vh, 6.5rem) 0 0;
}
.marquee-intro {
  text-align: center;
  color: var(--leise);
  font-size: 0.9375rem;
  margin: 0 1.5rem 1.2rem;
}
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-band { position: relative; }

/* WCAG 2.2.2: Bewegung, die laenger als fuenf Sekunden von allein laeuft,
   braucht eine Moeglichkeit zum Anhalten. Das Band hatte keine. Drei Wege,
   damit Maus, Tastatur und Finger alle eine haben. */
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track,
.marquee-band[data-pause="an"] .marquee-track { animation-play-state: paused; }

.marquee-halt {
  position: absolute;
  right: 1.5rem;
  top: 0.35rem;
  border: 1px solid var(--linie);
  background: #fff;
  color: var(--weich);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.25;
  cursor: pointer;
}
.marquee-halt:hover { color: var(--tinte); border-color: var(--caffee); }
@media (max-width: 640px) { .marquee-halt { right: 1rem; top: 0.15rem; } }

.marquee-track {
  display: flex;
  gap: 0.75rem;
  width: max-content;
  animation: lauf 38s linear infinite;
  padding: 0.25rem 0;
}
.marquee-track span {
  flex: none;
  border: 1px solid var(--linie);
  background: #fff;
  color: var(--caffee);
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  font-size: 0.9375rem;
  font-weight: 500;
}
@keyframes lauf {
  to { transform: translateX(-50%); }
}

/* ===================== BENTO ===================== */

.bento-sektion {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(5.5rem, 10vh, 8.5rem) 1.5rem 0;
}
.sektion-titel {
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 600;
}
.bento-sektion .sektion-titel { margin-bottom: 3rem; }

.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
}
.zelle {
  border-radius: var(--radius-zelle);
  padding: 2rem;
  overflow: hidden;
  position: relative;
  background: #fff;
  border: 1px solid var(--linie);
}
.zelle h3 {
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin-bottom: 0.7rem;
}
.zelle p { margin: 0; color: var(--weich); font-size: 1rem; }

.zelle-laufweg {
  grid-column: span 7;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 1.5rem;
  background: var(--flaeche);
  border: none;
  min-height: 420px;
}
.zelle-laufweg .zelle-text { align-self: center; }
.zelle-laufweg .zelle-phone {
  align-self: end;
  margin-bottom: -34%;
}

.zelle-teilen { grid-column: span 5; display: flex; flex-direction: column; }
.beams { margin-top: auto; padding-top: 1rem; }
.beams svg { width: 100%; height: auto; display: block; }
.beam {
  stroke: var(--linie);
  stroke-width: 2;
  fill: none;
}
.knoten-label {
  font-family: "Archivo", sans-serif;
  font-size: 11px;
  font-weight: 600;
  fill: var(--tinte);
}

/* Sync-Diagramm „Eine Liste für alle": iCloud-Wolke oben, drei Telefone unten.
   Eine 9s-Schleife erzählt die Geschichte: bei „Du" erscheint ein neuer
   Artikel, ein Puls läuft hoch zur Wolke, die Wolke quittiert, zwei Pulse
   laufen runter, der Artikel erscheint bei den anderen. Alle Elemente teilen
   dieselbe Dauer, damit die Phasen zusammenbleiben; pathLength="100" normiert
   die Pfade, Dash-Mathe wie gehabt (Segment 16 auf 200, Offset 216 -> 116).
   Pausiert außerhalb des Bilds (main.js setzt data-sync) und beim Lesen mit
   der Maus; bei reduzierter Bewegung steht das fertige Bild. */
.wolke { fill: var(--petrol-dunkel); }
.wolke-label {
  font-family: "Archivo", sans-serif;
  font-size: 12px;
  font-weight: 600;
  fill: #fff;
}
.telefon-rahmen { fill: var(--geraet); }
.telefon-schirm { fill: #fff; }
.reihe-kreis { stroke: var(--rahmen); stroke-width: 1.5; fill: none; }
.reihe-strich { fill: var(--linie); }
.reihe-kreis-neu { fill: var(--petrol-dunkel); }
.reihe-strich-neu { fill: var(--petrol-dunkel); }

.puls {
  stroke: var(--petrol-dunkel);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 16 200;
  stroke-dashoffset: 216;
  opacity: 0;
}
.puls-hoch { animation: puls-hoch 9s linear infinite; }
.puls-runter { animation: puls-runter 9s linear infinite; }
.wolke {
  animation: wolke-puls 9s var(--ease-out) infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.reihe-a, .reihe-bc { animation: reihe-a 9s var(--ease-out) infinite; }
.reihe-bc { animation-name: reihe-bc; }

.zelle-teilen[data-sync="aus"] .sync-ani { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) {
  .zelle-teilen:hover .sync-ani { animation-play-state: paused; }
}

@keyframes reihe-a {
  0%, 2%    { opacity: 0; transform: translateY(5px); }
  8%        { opacity: 1; transform: translateY(0); }
  88%       { opacity: 1; transform: translateY(0); }
  94%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes puls-hoch {
  0%, 10%    { stroke-dashoffset: 216; opacity: 0; }
  12%        { opacity: 1; }
  22%        { opacity: 1; }
  24%, 100%  { stroke-dashoffset: 116; opacity: 0; }
}
@keyframes wolke-puls {
  0%, 22%    { transform: scale(1); }
  27%        { transform: scale(1.06); }
  32%, 100%  { transform: scale(1); }
}
@keyframes puls-runter {
  0%, 32%    { stroke-dashoffset: 216; opacity: 0; }
  34%        { opacity: 1; }
  44%        { opacity: 1; }
  46%, 100%  { stroke-dashoffset: 116; opacity: 0; }
}
@keyframes reihe-bc {
  0%, 46%   { opacity: 0; transform: translateY(5px); }
  54%       { opacity: 1; transform: translateY(0); }
  88%       { opacity: 1; transform: translateY(0); }
  94%, 100% { opacity: 0; transform: translateY(0); }
}

.zelle-plan, .zelle-gerichte, .zelle-watch { grid-column: span 4; }
/* Bild-Band oben in Plan- und Gericht-Kachel: ein echtes Mini-iPhone,
   mittig auf der Farbflaeche, im natuerlichen Seitenverhaeltnis, unten vom
   Band angeschnitten. Kein object-fit: das zog die Screens vorher breit. */
.zelle-phone-oben {
  margin: -2rem -2rem 1.5rem;
  background: var(--flaeche);
  padding: 2.25rem 0 0;
  height: 250px;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.phone-mini {
  --radius-phone: 2rem;
  width: min(210px, 62%);
  align-self: flex-start;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.22),
    0 20px 40px -24px rgba(47, 51, 46, 0.45);
}
.zelle-phone-oben img { width: 100%; height: auto; }
.zelle-gerichte .zelle-phone-oben { background: var(--mango); }

.zelle-watch {
  background: var(--petrol-dunkel);
  border: none;
  display: flex; flex-direction: column;
}
.zelle-watch h3 { color: #fff; }
.zelle-watch p { color: rgba(255, 255, 255, 0.82); }
.watch-bild {
  margin-top: 1.5rem;
  align-self: center;
}
.watch-bild img {
  width: 176px;
  border-radius: 2.2rem;
  border: 7px solid var(--geraet);
  background: var(--geraet);
}

/* ===================== EINKAUFSMODUS ===================== */

.modus {
  margin-top: clamp(6rem, 11vh, 9rem);
  background: var(--tinte);
  color: rgba(255, 255, 255, 0.85);
}
.modus-inner {
  max-width: 1100px; margin: 0 auto;
  padding: clamp(5rem, 9vh, 7.5rem) 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.modus .sektion-titel { color: #fff; margin-bottom: 1.2rem; }
.modus p { margin: 0 0 1rem; font-size: 1.0625rem; }
.phone-modus {
  width: min(280px, 80%);
  margin: 0 auto;
  rotate: -2deg;
}
.modus-fortschritt strong { color: var(--mango); font-weight: 600; }

/* ===================== PRIVATSPHÄRE ===================== */

.privat { background: var(--mango); }
.privat-inner {
  max-width: 1100px; margin: 0 auto;
  padding: clamp(5rem, 9vh, 7.5rem) 1.5rem;
}
.privat .sektion-titel { margin-bottom: 2.2rem; }
.privat-punkte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}
.privat-punkte p {
  margin: 0;
  color: var(--tinte);
  font-size: 1.0625rem;
  border-top: 2px solid rgba(47, 51, 46, 0.25);
  padding-top: 1.1rem;
}

/* ===================== ABSCHLUSS ===================== */

.abschluss { background: var(--tinte); }
.abschluss-inner {
  max-width: 660px; margin: 0 auto;
  padding: clamp(5.5rem, 10vh, 8.5rem) 1.5rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
}
.abschluss-icon { margin: 0 auto 1.6rem; border-radius: 16px; }
.abschluss .sektion-titel { color: #fff; margin-bottom: 1.1rem; }
.abschluss p { margin: 0 0 2rem; }
.abschluss-note { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.6); margin-top: 2rem !important; margin-bottom: 0 !important; }
.abschluss-note a { color: var(--mango); }
.abschluss-note a:hover { color: var(--mango); text-decoration-thickness: 2px; }

/* ===================== FOOTER ===================== */

.fuss { background: var(--grund); border-top: 1px solid var(--linie); }
.fuss-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 2.5rem 1.5rem 3rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem;
}
.fuss-marke {
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 600; color: var(--tinte); margin: 0;
}
.fuss-marke img { border-radius: 6px; }
.fuss-links { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-left: auto; }
.fuss-links a { font-size: 0.9375rem; }
.fuss-folgen { margin-left: 0; padding-left: 1.4rem; border-left: 1px solid var(--linie); }
.fuss-hinweis {
  width: 100%;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--leise);
}

/* ===================== REVEALS ===================== */

.reveal-armed .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.reveal-armed .reveal.sichtbar {
  opacity: 1;
  transform: none;
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .zelle-laufweg, .zelle-teilen { grid-column: span 2; }
  .zelle-plan, .zelle-gerichte { grid-column: span 1; }
  .zelle-watch { grid-column: span 2; }
}

@media (max-width: 768px) {
  .nav { gap: 0.8rem; }
  .nav-links { display: none; }

  .hero { padding-top: 6.5rem; }
  .hero-inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero-phones { min-height: 480px; }
  .phone-front { left: 2%; width: min(240px, 56%); }
  .phone-back { right: 0; width: min(210px, 48%); }
  .kreis-mango { width: 240px; height: 240px; right: -60px; }

  .zelle { padding: 1.5rem; }
  .zelle-laufweg { grid-template-columns: 1fr; min-height: 0; }
  .zelle-laufweg .zelle-phone { margin: 0 auto -46%; width: 76%; }
  .zelle-phone-oben { margin: -1.5rem -1.5rem 1.25rem; padding: 1.75rem 0 0; height: 230px; }
  .zelle-plan, .zelle-gerichte { grid-column: span 2; }

  .modus-inner { grid-template-columns: 1fr; }
  .phone-modus { width: min(240px, 70%); }

  .privat-punkte { grid-template-columns: 1fr; gap: 1.4rem; }
  .fuss-links { margin-left: 0; }
  .fuss-folgen { padding-left: 0; border-left: none; }
}

/* ===================== REDUCED MOTION ===================== */

@media (prefers-reduced-motion: reduce) {
  .hero-title .w { animation: none; }
  .phone-front, .phone-back { animation: none; }
  .marquee-track { animation: none; }
  /* Band steht ohnehin still, ein Halt-Knopf waere sinnlos. */
  .marquee-halt { display: none; }
  .marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  /* Sync-Diagramm steht als fertiges Bild: Reihen sichtbar, Pulse aus. */
  .sync-ani { animation: none; }
  .puls { opacity: 0; }
  .reveal-armed .reveal { opacity: 1; transform: none; transition: none; }
  .store-badge, .nav-cta { transition: none; }
}