/* Tinte – tinte.cogem.de
   Apple-Produktseiten-Anatomie (Sticky-Blur-Nav, große zentrierte Typo,
   Sektions-Storytelling, Parallax/Reveals) mit der Tinte-Identität:
   Papier, Tinte, Tinte-Blau, Marker-Gelb, Serif-Display.
   Schriften bewusst System-Stacks (New York/SF) – keine externen Fonts. */

:root {
  --papier: #f7f4ee;
  --karton: #ede9e0;
  --flaeche: #ffffff;
  --tinte: #1d2130;
  --tinte-sekundaer: #71727c;
  --blau: #3b4c8f;
  --blau-hell: #8fa0e0;
  --marker: #ffd526;
  --dunkel: #1b1a17;
  --dunkel-text: #ece9e2;
  --dunkel-sekundaer: #a5a29b;
  --linie: rgba(29, 33, 48, 0.12);
  --nav-hoehe: 52px;
  --serif: ui-serif, Georgia, "Times New Roman", serif;
  --sans: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-hoehe); }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--blau); }

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--blau);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Navigation (Apple-Stil: schmal, sticky, Milchglas) ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-hoehe);
  z-index: 50;
  /* Deckend genug, dass durchscrollende Überschriften nicht hinter den
     Menü-Texten „geistern“ – das Glas bleibt nur ein Hauch durchsichtig. */
  background: color-mix(in srgb, var(--papier) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(22px);
  backdrop-filter: saturate(1.6) blur(22px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
  /* Eigene Kompositions-Ebene: verhindert Safari-Repaint-Artefakte
     von Text über backdrop-filter. */
  transform: translateZ(0);
}

.nav.gescrollt { border-bottom-color: var(--linie); }

.nav-innen {
  max-width: 1024px;
  margin: 0 auto;
  height: 100%;
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav .wortmarke {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--tinte);
  text-decoration: none;
  margin-right: auto;
}

.nav .wortmarke svg { display: block; }

.nav a.link {
  color: var(--tinte);
  text-decoration: none;
  font-size: 14px;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.nav a.link:hover { opacity: 1; }

/* Scrollspy: der Abschnitt im Sichtfeld ist im Menü hervorgehoben.
   Nur Farbe + Unterstrich – KEIN font-weight-Wechsel, der würde die
   Linkbreite ändern und die Nachbarlinks beim Scrollen verschieben. */
.nav a.link {
  padding-bottom: 3px;
  background-image: linear-gradient(var(--blau), var(--blau));
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 0% 2px;
  transition: opacity 0.2s ease, background-size 0.25s ease;
}

.nav a.link.aktiv {
  opacity: 1;
  color: var(--blau);
  background-size: 100% 2px;
}

.nav .laden {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--blau);
  border-radius: 999px;
  padding: 6px 14px;
  text-decoration: none;
  white-space: nowrap;
}

/* Auf dem Desktop löst sich das Panel auf – die Links fließen wie
   gewohnt in der Leiste. Mobil wird es zum aufklappbaren Menü. */
.nav-panel { display: contents; }

.menue-knopf {
  display: none;
  border: 0;
  background: none;
  color: var(--tinte);
  padding: 8px 4px;
  cursor: pointer;
}

@media (max-width: 640px) {
  .menue-knopf { display: grid; place-items: center; }

  .nav-panel {
    display: grid;
    gap: 4px;
    position: fixed;
    top: var(--nav-hoehe);
    left: 0;
    right: 0;
    padding: 10px 22px 18px;
    background: color-mix(in srgb, var(--papier) 94%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(22px);
    backdrop-filter: saturate(1.6) blur(22px);
    border-bottom: 1px solid var(--linie);
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.6, 0.2, 1);
  }

  .nav.offen .nav-panel {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .nav-panel a.link {
    display: block;
    font-size: 17px;
    padding: 10px 0;
    opacity: 0.9;
    /* Der Unterstrich des Scrollspy bleibt links ausgerichtet */
    background-position: 0 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-panel { transition: none; }
}

/* ---------- Held ---------- */

.held {
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: calc(var(--nav-hoehe) + 64px) 24px 0;
  overflow: hidden;
}

.held .schnörkel { margin-bottom: 18px; }

.schnörkel path {
  stroke: var(--blau);
  stroke-width: 7;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  animation: zeichnen 1.5s ease-out 0.35s forwards;
}

@keyframes zeichnen { to { stroke-dashoffset: 0; } }

/* Die zwei Dokumentzeilen des Logos gleiten nacheinander herein */
.schnörkel .balken {
  stroke: var(--karton);
  stroke-width: 7;
  stroke-linecap: round;
  opacity: 0;
  transform: translateX(-8px);
  animation: balkenAuftritt 0.7s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
}

.schnörkel .balken-2 { animation-delay: 0.15s; }

@keyframes balkenAuftritt {
  to { opacity: 1; transform: none; }
}

/* Gestaffelter Auftritt der Hero-Elemente */
.auftritt {
  opacity: 0;
  transform: translateY(16px);
  animation: heldAuftritt 0.8s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
}

.a1 { animation-delay: 0.1s; }
.a2 { animation-delay: 0.25s; }
.a3 { animation-delay: 0.4s; }
.a4 { animation-delay: 0.55s; }
.a5 { animation-delay: 0.7s; }

@keyframes heldAuftritt {
  to { opacity: 1; transform: none; }
}

/* Marker-Strich zieht sich nach dem Laden von links über die Wörter */
.markiert {
  background-size: 0% 100%;
  background-repeat: no-repeat;
  animation: markerZug 0.9s cubic-bezier(0.3, 0, 0.2, 1) 1.1s forwards;
}

@keyframes markerZug {
  to { background-size: 100% 100%; }
}

.held h1 {
  font-family: var(--serif);
  font-size: clamp(48px, 9vw, 96px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.02;
  margin: 0 0 14px;
}

.held .claim {
  font-size: clamp(21px, 3vw, 28px);
  font-weight: 600;
  margin: 0 0 10px;
}

.markiert {
  background: linear-gradient(transparent 58%, var(--marker) 58%, var(--marker) 94%, transparent 94%);
  padding: 0 2px;
}

.held .unterzeile {
  font-size: 17px;
  color: var(--tinte-sekundaer);
  margin: 0 0 26px;
}

.badge-bald {
  display: inline-flex;
  align-items: center;
  background: var(--blau);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  padding: 12px 24px;
  border-radius: 999px;
  text-decoration: none;
}

.held .geraet { margin-top: 56px; }

/* Apple-Produkt-Bezel (iPhone 17 Pro, Deep Blue) – Rahmen ist Teil des PNGs */
.geraet {
  width: min(330px, 80vw);
  filter: drop-shadow(0 30px 55px rgba(29, 33, 48, 0.32));
}

/* Video hinter dem transparenten Bezel: das <video> liegt exakt in der
   Bildschirmöffnung (Prozentwerte aus der Fenstergeometrie des Apple-PNGs:
   Fenster 72,70 / 1206x2620 auf 1350x2760 Leinwand). */
.geraet-video {
  position: relative;
  width: min(330px, 80vw);
  aspect-ratio: 1350 / 2760;
  filter: drop-shadow(0 30px 55px rgba(29, 33, 48, 0.32));
}

.geraet-video video {
  position: absolute;
  left: 5.33%;
  top: 2.54%;
  width: 89.33%;
  height: 94.93%;
  object-fit: cover;
  border-radius: 11% / 5.1%;
  background: #000;
}

.geraet-video .rahmen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Video-Sektion: mittig, ruhig */
section.vorfuehrung {
  padding: 40px 24px 120px;
  display: grid;
  justify-items: center;
  gap: 26px;
  text-align: center;
}

section.vorfuehrung h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 3.6vw, 40px);
  margin: 0;
}

section.vorfuehrung p.hinweis {
  margin: 0;
  color: var(--tinte-sekundaer);
  font-size: 16px;
  max-width: 46ch;
}

/* „Mehr von uns“ – Schwester-Apps */
section.mehr {
  padding: 0 24px 110px;
}

.mehr-innen {
  max-width: 1024px;
  margin: 0 auto;
  text-align: center;
}

.mehr-innen h2 {
  font-family: var(--serif);
  font-size: clamp(24px, 3.2vw, 34px);
  margin: 0 0 22px;
}

.mehr-karten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 340px));
  justify-content: center;
  gap: 20px;
}

.mehr-karten a {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 26px 24px;
  text-decoration: none;
  color: var(--tinte);
  transition: transform 0.25s cubic-bezier(0.2, 0.6, 0.2, 1), box-shadow 0.25s ease;
}

.mehr-karten a:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(29, 33, 48, 0.12);
}

.mehr-karten .app-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 13px;
  box-shadow: 0 4px 12px rgba(29, 33, 48, 0.14);
}

.mehr-karten .app-text {
  display: block;
  min-width: 0;
  text-align: left;
}

.mehr-karten .app-name {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
}

.mehr-karten .app-satz {
  color: var(--tinte-sekundaer);
  font-size: 15px;
  display: block;
}

.mehr-karten .app-go {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--blau);
}

@media (max-width: 640px) {
  .mehr-karten { grid-template-columns: 1fr; }
}

/* ---------- Sektionen ---------- */

section.block {
  padding: 120px 24px;
  overflow: hidden;
}

.block-innen {
  max-width: 1024px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

.block-innen.getauscht .text { order: 2; }
.block-innen.getauscht .bild { order: 1; }

.block .eyebrow {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--blau);
  margin: 0 0 12px;
}

.block h2 {
  font-family: var(--serif);
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}

.block p.text-lauf {
  font-size: 19px;
  color: var(--tinte-sekundaer);
  margin: 0;
  max-width: 44ch;
}

.block .bild { display: grid; justify-items: center; }

/* Dunkle Sektion (Markieren) – wie Apples Pro-Seiten */
section.block.dunkel {
  background: var(--dunkel);
  color: var(--dunkel-text);
}

section.block.dunkel .eyebrow { color: var(--marker); }

section.block.dunkel p.text-lauf { color: var(--dunkel-sekundaer); }

/* Übertragen: stilisiertes Browserfenster statt Screenshot */
.browser {
  width: min(460px, 100%);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(29, 33, 48, 0.16);
  overflow: hidden;
}

.browser .kopfzeile {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--linie);
}

.browser .punkt { width: 11px; height: 11px; border-radius: 50%; background: var(--karton); }
.browser .punkt:nth-child(1) { background: #e8807a; }
.browser .punkt:nth-child(2) { background: #ecc46a; }
.browser .punkt:nth-child(3) { background: #8fc98b; }

.browser .adresse {
  margin-left: 10px;
  flex: 1;
  background: var(--papier);
  border-radius: 8px;
  font-size: 13px;
  color: var(--tinte-sekundaer);
  padding: 5px 12px;
  text-align: center;
}

.browser .inhalt { padding: 28px 24px 32px; text-align: center; }

.browser .ablage {
  border: 2px dashed color-mix(in srgb, var(--blau) 45%, transparent);
  border-radius: 14px;
  padding: 34px 20px;
  color: var(--tinte-sekundaer);
  font-size: 15px;
}

.browser .ablage strong { color: var(--blau); display: block; font-size: 17px; margin-bottom: 4px; }

.browser .datei {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--papier);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  text-align: left;
}

.browser .datei .balken {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--karton);
  overflow: hidden;
  position: relative;
}

.browser .datei .balken::after {
  content: "";
  position: absolute;
  inset: 0 30% 0 0;
  border-radius: 3px;
  background: var(--blau);
  /* Ruhige Endlos-Schleife: Upload läuft, kurze Pause, von vorn */
  animation: hochladen 3.6s ease-in-out infinite;
}

@keyframes hochladen {
  0% { inset: 0 100% 0 0; }
  55% { inset: 0 8% 0 0; }
  72% { inset: 0 0 0 0; }
  100% { inset: 0 0 0 0; }
}

/* Privatsphäre – großes zentriertes Statement */
section.privat {
  background: var(--blau);
  color: #fff;
  text-align: center;
  padding: 130px 24px;
}

section.privat h2 {
  font-family: var(--serif);
  font-size: clamp(34px, 5.4vw, 60px);
  line-height: 1.08;
  margin: 0 auto 20px;
  max-width: 18ch;
}

section.privat p {
  margin: 0 auto;
  max-width: 54ch;
  font-size: 19px;
  opacity: 0.86;
}

/* ---------- Reveals & Parallax ---------- */

.reveal {
  opacity: 0;
  transform: translateY(34px) scale(0.985);
  transition: opacity 0.9s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.reveal.sichtbar { opacity: 1; transform: none; }

[data-parallax] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .schnörkel path { animation: none; stroke-dashoffset: 0; }
  .schnörkel .balken { animation: none; opacity: 1; transform: none; }
  .auftritt { animation: none; opacity: 1; transform: none; }
  .markiert { animation: none; background-size: 100% 100%; }
  .browser .datei .balken::after { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  [data-parallax] { transform: none !important; }
}

/* ---------- Fließtext-Seiten ---------- */

.textseite {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(var(--nav-hoehe) + 48px) 24px 80px;
}

.textseite h1 { font-family: var(--serif); font-size: 36px; margin: 24px 0 8px; }
.textseite h2 { font-family: var(--serif); font-size: 23px; margin: 36px 0 8px; }
.textseite .stand { color: var(--tinte-sekundaer); font-size: 15px; }

/* ---------- Fuß ---------- */

footer {
  border-top: 1px solid var(--linie);
  padding: 30px 0 48px;
  font-size: 14px;
  color: var(--tinte-sekundaer);
}

footer .fuss-innen {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: space-between;
}

footer a { color: var(--tinte-sekundaer); }

/* ---------- Schmale Bildschirme ---------- */

@media (max-width: 820px) {
  section.block { padding: 84px 24px; }
  .block-innen {
    grid-template-columns: 1fr;
    gap: 44px;
    text-align: center;
  }
  .block-innen.getauscht .text { order: 1; }
  .block-innen.getauscht .bild { order: 2; }
  .block p.text-lauf { margin-inline: auto; }
}

/* ---------- Dark Mode ---------- */

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #1b1a17;
    --karton: #2a2926;
    --flaeche: #232220;
    --tinte: #ece9e2;
    --tinte-sekundaer: #a5a29b;
    --blau: #8fa0e0;
    --linie: rgba(236, 233, 226, 0.14);
    --dunkel: #111013;
  }
  .nav .laden, .badge-bald, section.privat { color: #14172c; }
  .geraet { filter: drop-shadow(0 30px 55px rgba(0, 0, 0, 0.6)); }
}