/* ===========================================================================
   landing-2026.css — Feinschliff-Ebene (2026-08-15)
   Founder-Vorgabe: «maksimal kullanilabilir, minimalist ve rafine».
   Laedt NACH landing.css und korrigiert gezielt drei Dinge:
     1. Hero zeigt das Produkt sofort (zweispaltig statt halbleer)
     2. ruhigerer vertikaler Rhythmus, weniger Kartenlaerm
     3. Datenschutz-Block: gleiche Aussage, halbe Dichte
   Bewusst klein gehalten — keine zweite Designsprache, nur Disziplin auf der
   bestehenden.
   ========================================================================= */

/* --- 1. Hero: Text links, Produkt rechts ---------------------------------- */
.ln-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(2rem, 4.5vw, 3.5rem);
  max-width: 1240px;
  margin: 0 auto;
  padding-block: clamp(3rem, 6.5vw, 5rem);
}

.ln-hero-text { max-width: 32rem; }

/* Die Zeile «Ihre Konsultation, fertig dokumentiert.» soll in zwei ruhige
   Zeilen fallen, nicht in vier zerhackte. `balance` verteilt sie gleichmaessig,
   die etwas kleinere Schrift verhindert das Umbrechen mitten im Begriff. */
.ln-hero-text h1 {
  font-size: clamp(2rem, 3.3vw, 2.95rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: 1.1rem;
  text-wrap: balance;
}

.ln-hero-subtitle {
  font-size: 1.02rem;
  line-height: 1.65;
  max-width: 30rem;
  opacity: 0.86;
  margin-bottom: 1.9rem;
}

.ln-hero-note { opacity: 0.6; font-size: 0.8rem; margin-top: 0.9rem; }

/* Produktbild: ruhige Kante, leichte Tiefe, nie beschnitten */
.ln-hero-shot {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.07);
  background: #0f1b30;
}
.ln-hero-shot img { display: block; width: 100%; height: auto; }

@media (max-width: 900px) {
  .ln-hero-inner { grid-template-columns: 1fr; gap: 2.25rem; }
  .ln-hero-text { max-width: none; }
  .ln-hero-shot { order: 2; }
}

/* --- 2. Vertikaler Rhythmus ---------------------------------------------- */
/* Vorher trugen die Sektionen sehr unterschiedliche Innenabstaende; das las
   sich unruhig. Eine Zahl fuer alle. */
.ln-timeline,
.ln-privacy,
.ln-final-cta { padding-block: clamp(3.5rem, 7vw, 5.5rem); }

.ln-section-heading {
  font-size: clamp(1.6rem, 2.9vw, 2.3rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.ln-section-tag {
  letter-spacing: 0.14em;
  font-size: 0.68rem;
  opacity: 0.55;
}

/* Trust-Leiste: leiser, sie ist Beiwerk, keine Aussage */
.ln-trust-bar { padding-block: 0.85rem; }
.ln-trust-item { font-size: 0.78rem; opacity: 0.72; }

/* --- 3. Datenschutz: gleiche Aussage, halbe Dichte ------------------------ */
/* Die vier zusaetzlichen Textkarten wiederholten, was die Icon-Reihe und der
   Einleitungstext schon sagen — auf der Seite standen neun Karten
   uebereinander. Sie bleiben im Markup (Rechtstexte, Anker #aufbewahrung),
   werden aber als schlichte Liste gesetzt statt als Kartenwand. */
.ln-privacy-badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 0.9rem 2rem;
  margin-top: 2rem;
}
.ln-privacy-badge {
  background: none;
  border: 0;
  border-top: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 0;
  box-shadow: none;
  padding: 0.95rem 0 0;
}
.ln-privacy-badge h3,
.ln-privacy-badge strong { font-size: 0.9rem; }
.ln-privacy-badge p { font-size: 0.82rem; line-height: 1.55; opacity: 0.75; }

/* Das juristische Kleingedruckte gehoert auf die Rechtsseiten, nicht in die
   Landing — hier bleibt es lesbar klein und als Block ruhig. */
.ln-privacy-legal {
  font-size: 0.72rem;
  line-height: 1.6;
  opacity: 0.6;
  max-width: 60rem;
  margin-inline: auto;
  text-align: center;
}

/* --- 4. Call-to-Action: eine Entscheidung, klar gesetzt ------------------- */
.ln-final-cta h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}
.ln-hero-cta { letter-spacing: 0.005em; }

/* --- 5. Zugaenglichkeit: sichtbarer Fokus ueberall ------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid #14b8a6;
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- 5b. Mobile: das Menue muss man SEHEN --------------------------------- */
/* Fehler gefunden am 15.08.: die drei Hamburger-Striche stehen auf
   #0f172a — derselben Farbe wie der dunkle Hero darunter. Auf dem Telefon
   war die Leiste beim Seitenaufruf faktisch leer: kein Menue, kein
   «Anmelden». Erst nach dem Scrollen (weisse Leiste) tauchten die Striche
   auf. Solange die Leiste transparent ueber dem dunklen Hero liegt, sind die
   Striche hell — dieselbe Logik, die die Navigationslinks schon nutzen. */
body.landing-page .nav:not(.nav-scrolled):not(.nav-solid) .nav-hamburger span {
  background: rgba(255, 255, 255, 0.92);
}
.nav-hamburger span { transition: background-color 0.2s ease; }

/* Trefferflaeche auf Fingergroesse (WCAG 2.5.8: mindestens 24x24 CSS-Pixel;
   Praxis-Standard sind 44 px). Optisch bleibt der Strich-Block gleich gross. */
.nav-hamburger {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

/* Zweiter Fehler derselben Familie, andere Richtung: das geoeffnete
   Mobilmenue ist eine WEISSE Flaeche, die Links erbten aber die helle Farbe
   fuer «Leiste liegt ueber dem dunklen Hero» — Funktionen/FAQ/Datenschutz
   standen praktisch unsichtbar da, «Anmelden» war weiss auf weiss gar nicht
   auffindbar. Ist das Menue offen, gilt immer die dunkle Schrift. */
/* Die Regel, die hier gewinnen muss, steht in landing.css mit !important
   (Zeile ~1755) — sie faerbt die Links hell, solange die Leiste ueber dem
   dunklen Hero liegt. Fuer das GEOEFFNETE Menue ist diese Annahme falsch,
   deshalb hier ebenfalls !important, eng auf `.open` begrenzt. */
body.landing-page .nav .nav-links.open a:not(.nav-cta),
body.landing-page .nav:not(.nav-scrolled):not(.nav-solid) .nav-links.open a:not(.nav-cta) {
  color: var(--pz-ink, #0f172a) !important;
  opacity: 1;
}
body.landing-page .nav .nav-links.open a.nav-login {
  color: var(--pz-teal, #0f766e) !important;
  border: 1px solid rgba(15, 118, 110, 0.35);
  border-radius: 8px;
  padding: 0.55rem 1.1rem;
}
body.landing-page .nav .nav-links.open a.nav-cta { color: #fff !important; }
/* Menuepunkte auf Fingergroesse, damit niemand danebentippt. */
body.landing-page .nav .nav-links.open a {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- 5c. Fusszeilen-Links auf dem Telefon greifbar ------------------------ */
/* Gemessen 15.08.: die Rechts- und Produktlinks in der Fusszeile sind auf
   390 px zwar volle Breite, aber nur 21 px hoch und stehen dicht
   uebereinander — «Impressum» statt «Datenschutzerklaerung» zu treffen ist
   dort Gluecksache. Auf Zeigern ohne Praezision bekommt jede Zeile 40 px. */
@media (pointer: coarse) {
  /* Korrektur der ersten Fassung: die setzte `display:inline-flex` +
     min-height. Die Hoehe stimmte danach, aber kurze Woerter schrumpften auf
     Textbreite — «FAQ» war plotzlich 24 px breit statt volle Zeile. Also
     nur Innenabstand: der waechst die Trefferflaeche, ohne die
     Breitenberechnung anzufassen. */
  body.landing-page .footer a,
  body.landing-page .ln-privacy-legal a,
  body.landing-page .ln-privacy-badge a {
    padding-block: 12px;
  }
  /* Logo und «Anmelden» ebenfalls auf Fingergroesse. */
  body.landing-page .nav-logo { min-height: 44px; display: inline-flex; align-items: center; }
  body.landing-page .nav-links a.nav-login { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* --- 6. Bewegung: vollstaendig abschaltbar -------------------------------- */
/* Die bestehende Regel in premium.css adressierte `.ln-hero-mock` /
   `.ln-hero-demo` — beides gibt es nach dem Hero-Umbau nicht mehr — und liess
   die Scroll-Einblendungen (`.ln-reveal`) ohnehin laufen. Wer Bewegung
   reduziert, bekommt jetzt eine wirklich ruhige Seite: alles sofort sichtbar,
   nichts wandert. */
@media (prefers-reduced-motion: reduce) {
  body.landing-page *,
  body.landing-page *::before,
  body.landing-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  body.landing-page .ln-reveal,
  body.landing-page .ln-reveal-left,
  body.landing-page .ln-reveal-right,
  body.landing-page .ln-hero-shot,
  body.landing-page .ln-hero-text > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Sicherheitsnetz gegen «unsichtbarer Inhalt»: sollte das Reveal-Skript nicht
   laufen (JS-Fehler, Blocker, alter Browser), bleiben die Abschnitte sichtbar,
   statt dauerhaft auf opacity:0 zu stehen. Ein Arzt darf nie vor einer leeren
   Seite sitzen, weil eine Animation nicht startete. */
.ln-reveal,
.ln-reveal-left,
.ln-reveal-right { opacity: 1; }
.ln-reveal:not(.ln-visible) { transform: translateY(14px); opacity: 0.001; }
.ln-reveal-left:not(.ln-visible),
.ln-reveal-right:not(.ln-visible) { opacity: 0.001; }
@media (scripting: none) {
  .ln-reveal:not(.ln-visible),
  .ln-reveal-left:not(.ln-visible),
  .ln-reveal-right:not(.ln-visible) { opacity: 1; transform: none; }
}