/* pysello.com — Stylesheet der Marken-Landing.
   Verbindliche Vorlage: PySello_Presentacion_Web_Maestra.md
   (Farben §4, Struktur §3/§6, Mobile-Regeln §7, UX §11).

   TECHNIK-RAHMEN (uebernommen vom Schwesterprojekt py.viaviva.team):
   Die Auslieferung setzt eine Content-Security-Policy mit script-src 'self' und
   font-src 'self'. Daraus folgen zwei Dinge, die man hier nicht aus Versehen
   umbauen darf:
     - KEIN Inline-Script und kein onclick-Attribut. Alles Verhalten steht in js/landing.js.
     - KEINE Schrift von einem Fremd-Host. Die Spezifikation §4 wuenscht sich Inter /
       Manrope / Plus Jakarta Sans; eingebunden wird davon nichts. Stattdessen ein
       Systemschrift-Stapel, der auf jedem Geraet die naechstliegende serifenlose
       Grotesk waehlt -- auf Android ist das Roboto, auf iOS/macOS San Francisco, auf
       Windows Segoe UI. Alle drei stehen Inter optisch nahe (gleiche humanistische
       Grundform, aehnliche x-Hoehe), und es faellt keine Ladezeit und keine
       Datenschutzfrage an. Eine selbst gehostete Inter-Datei waere moeglich (SIL Open
       Font License), ist aber eine eigene Entscheidung mit eigener Pruefung -- siehe
       BAUSTAND.md.

   Aufbau der Datei:
     1. Token (Farben, Masse, Schrift)
     2. Grundlagen und Hilfsklassen
     3. Bausteine (Knoepfe, Karten, Icons, Handschrift-Akzent, Einblenden)
     4. Kopfzeile
     5. Die Abschnitte in der Reihenfolge der Seite (§3)
     6. Fusszeile, schwebender Knopf, Rechtsseiten
     7. Breitere Bildschirme -- mobile-first gebaut, Desktop ist die Erweiterung nach oben
*/

/* ------------------------------------------------------------------ 1. Token */

:root {
  /* Markenfarben, Spezifikation §4 */
  --navy: #0b2d5b;
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --blue-soft: #eaf0fe;
  --red: #e11d2e;
  --red-dark: #b81625;
  --white: #ffffff;
  --soft: #f5f7fb;
  --ink: #111827;

  /* Abgeleitete Toene. Bewusst aus den fuenf Markenfarben hergeleitet und nicht frei
     erfunden, damit die Seite eine Familie bleibt und nicht ein Farbkasten wird. */
  --muted: #4b5b74;
  --muted-soft: #6b7a92;
  --border: #dde4f0;
  --border-strong: #c3d0e6;
  --green: #16a34a;       /* nur fuer den WhatsApp-Knopf -- die erwartete Farbe des Dienstes */
  --green-dark: #128c3e;

  /* Masse */
  --wrap: 1140px;
  --wrap-narrow: 760px;
  --radius: 20px;
  --radius-sm: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(11, 45, 91, 0.06), 0 2px 10px rgba(11, 45, 91, 0.05);
  --shadow-md: 0 4px 14px rgba(11, 45, 91, 0.08), 0 14px 36px rgba(11, 45, 91, 0.09);
  --shadow-lg: 0 20px 54px rgba(11, 45, 91, 0.18);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  /* Der handschriftliche Akzent aus §4 ("uso muy puntual") -- ebenfalls nur
     Systemschriften. Faellt ein Geraet auf die generische Familie "cursive" zurueck,
     bleibt der Satz lesbar, nur weniger charmant. */
  --font-hand: "Segoe Script", "Bradley Hand", "Snell Roundhand", "Apple Chancery", cursive;
}

/* ------------------------------------------------------- 2. Grundlagen */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Der Kopf klebt oben; ohne diesen Abstand landet ein Sprungziel darunter. */
  scroll-padding-top: 76px;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  /* Fangnetz gegen waagerechtes Scrollen. Es ersetzt keine saubere Breitenrechnung --
     jeder Baustein muss zwischen 320 und 414 px von sich aus passen -- aber es
     verhindert, dass ein einziger Ausreisser die ganze Seite verschiebt. */
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 14px;
  text-wrap: balance;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.65rem; }
h3 { font-size: 1.12rem; letter-spacing: -0.01em; }

p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-dark); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 18px;
}

.wrap--narrow { max-width: var(--wrap-narrow); }

section { padding: 52px 0; }

.lead {
  font-size: 1.06rem;
  color: var(--muted);
  max-width: 62ch;
}
/* Auf dunklem Grund (Hero, Problema, Abschluss) braucht derselbe Absatz einen hellen Ton. */
.lead--claro { color: rgba(255, 255, 255, 0.9); }

.eyebrow {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blue-dark);
  margin: 0 0 10px;
}
.eyebrow--claro { color: #bcd4ff; }

.hand {
  font-family: var(--font-hand);
  font-size: 1.28rem;
  font-weight: 400;
  color: var(--blue);
  letter-spacing: 0;
}

/* Nur fuer Screenreader — der Sprunglink am Seitenanfang und die Beschriftungen,
   die im Bild schon sichtbar sind. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.sr-only:focus {
  position: fixed; top: 10px; left: 10px;
  width: auto; height: auto;
  clip: auto; margin: 0;
  padding: 10px 16px;
  background: var(--navy); color: var(--white);
  border-radius: var(--radius-sm);
  z-index: 200;
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

/* -------------------------------------------------------- 3. Bausteine */

/* --- Knoepfe --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 13px 22px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  /* §11: "transición rápida en CTAs" — kurz und unaufdringlich. */
  transition: background-color .16s ease, border-color .16s ease,
              color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.btn svg { flex: 0 0 auto; }

.btn--wa {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn--primary {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn--red {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn--ghost {
  background: var(--white);
  border-color: var(--border-strong);
  color: var(--navy);
}
.btn--onnavy {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--white);
}

.btn--sm { min-height: 42px; padding: 9px 16px; font-size: 0.92rem; }
.btn--block { display: flex; width: 100%; }

@media (hover: hover) {
  /* §11: "hover sutil en desktop" — nur auf Geraeten mit echtem Zeiger, damit ein
     Fingertipp auf dem Handy nicht in einem haengenden Hover-Zustand endet. */
  .btn--wa:hover { background: var(--green-dark); border-color: var(--green-dark); }
  .btn--primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
  .btn--red:hover { background: var(--red-dark); border-color: var(--red-dark); }
  .btn--ghost:hover { border-color: var(--blue); color: var(--blue-dark); }
  .btn--onnavy:hover { background: rgba(255, 255, 255, 0.14); border-color: var(--white); }
  .btn:hover { transform: translateY(-1px); }
}

.btn:active { transform: translateY(0); }

.cta-row {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 22px 0 0;
}
.cta-row--centro { justify-content: center; }

.cta-note {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
}
.cta-note li { display: flex; align-items: center; gap: 7px; }
.cta-note svg { color: var(--green); flex: 0 0 auto; }

/* --- Karten --- */

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* --- Icons (§9) ---
   Alle Icons stehen als Inline-SVG direkt im HTML, nicht als Bilddatei. Sie erben
   ihre Farbe ueber currentColor, bleiben in jeder Groesse scharf und kosten keinen
   zusaetzlichen Ladevorgang. Einheitlich: 24er-Raster, Strichstaerke 1.9, runde
   Enden und Ecken -- genau die Vorgabe "grosor uniforme, redondeado, sin 3D". */
.ico {
  width: 24px; height: 24px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--lg { width: 28px; height: 28px; }
.ico--sm { width: 18px; height: 18px; stroke-width: 2.2; }

.ico-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px; height: 50px;
  border-radius: 15px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  margin-bottom: 14px;
}

/* --- Sanftes Einblenden beim Scrollen (§11) ---
   WICHTIG, damit das hier niemand "aufraeumt": Der unsichtbare Startzustand wird
   NICHT von dieser Datei gesetzt, sondern haengt an der Klasse .js-anim, die
   js/landing.js dem <html> gibt. Ohne JavaScript, bei einem Skriptfehler oder wenn
   der Beobachter nicht ausloest, ist damit ALLES sichtbar. Das Schwesterprojekt
   py.viaviva.team hat sein Einblenden am 05.09.2026 komplett ausbauen muessen, weil
   dort der Startzustand fest im CSS stand und Inhalt verschwunden ist. Diese
   Fassung hat denselben Effekt ohne dieses Risiko. */
.js-anim .anim {
  opacity: 0;
  transform: translateY(16px);
}
.js-anim .anim.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .js-anim .anim { opacity: 1; transform: none; }
  .js-anim .anim.is-in { transition: none; }
}

/* -------------------------------------------------------- 4. Kopfzeile */

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header .wrap {
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  margin-right: auto;
  /* Die Wortmarke steht als echter Text neben dem Zeichen, nicht als Bild: scharf in
     jeder Aufloesung, markierbar, vorlesbar und in derselben Schrift wie die Seite. */
}
.brand-name {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--navy);
  white-space: nowrap;
}
.brand-name b { font-weight: 800; color: var(--blue); }
.brand-mark { width: 32px; height: 32px; flex: 0 0 auto; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  color: var(--navy);
  cursor: pointer;
}

.site-nav {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 12px; right: 12px;
  flex-direction: column;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.site-nav.is-open { display: flex; }
.site-nav a {
  padding: 12px 14px;
  border-radius: 10px;
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}
@media (hover: hover) {
  .site-nav a:hover { background: var(--soft); color: var(--blue-dark); }
}

.header-cta { display: none; }

/* --------------------------------------------------- 5. Abschnitte */

/* --- 6.2 HERO --- */

.hero {
  position: relative;
  color: var(--white);
  background: var(--navy);
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Der Verlauf ueber dem Foto ist kein Schmuck, sondern die Bedingung dafuer, dass weisse
   Schrift auf einem Sonnenuntergangsfoto lesbar bleibt. Er ist aber bewusst NICHT
   gleichmaessig dicht: Beim ersten Bau lag ein flaechiges Marineblau mit 72-92 %
   darueber, und davon blieb vom "atardecer" aus §6.2 nichts uebrig -- die Seite begann
   mit einer blauen Flaeche. Jetzt ist er dort dicht, wo Text steht, und laesst den Rest
   des Fotos warm durch. Auf schmalen Bildschirmen laeuft der Text ueber die volle
   Breite, deshalb dort senkrecht; ab 860 px steht er links, deshalb dort schraeg. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(11, 45, 91, 0.9) 0%, rgba(11, 45, 91, 0.74) 38%,
      rgba(11, 45, 91, 0.58) 62%, rgba(11, 45, 91, 0.86) 100%);
}
.hero .wrap { position: relative; z-index: 2; padding-top: 44px; padding-bottom: 44px; }

.hero h1 {
  color: var(--white);
  font-size: clamp(1.95rem, 8.4vw, 2.6rem);
  margin-bottom: 16px;
}
.hero h1 .accent { color: #ffd7db; }
.hero p { color: rgba(255, 255, 255, 0.9); font-size: 1.03rem; max-width: 46ch; }

.hero-micro {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.hero-micro li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.86rem;
  font-weight: 700;
}

.hero-phone {
  margin: 30px auto 0;
  max-width: 270px;
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
}

/* --- 6.3 Beneficios --- */

.beneficios { background: var(--soft); }
.beneficio h3 { margin-bottom: 6px; }
.beneficio p { color: var(--muted); font-size: 0.97rem; }
.beneficio { padding: 22px 20px; }

/* --- 6.4 Que es PySello --- */

.quees .lead { margin-bottom: 20px; }
.quees-phone {
  margin: 6px auto 24px;
  max-width: 250px;
  border-radius: 22px;
  box-shadow: var(--shadow-md);
}
.claim-line {
  margin: 20px 0 0;
  padding: 16px 18px;
  border-left: 4px solid var(--red);
  background: var(--soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 1.06rem;
  font-weight: 800;
  color: var(--navy);
}

.checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.checks li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-weight: 600;
  color: var(--navy);
}
.checks svg { color: var(--green); margin-top: 3px; }

/* --- 6.5 Ejemplos de rubros --- */

.rubros { background: var(--soft); }
.rubro-grid { margin-top: 26px; }
.rubro img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.rubro-txt { padding: 16px 18px 20px; }
.rubro-txt h3 { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.rubro-txt h3 svg { color: var(--blue); }
.rubro-txt p { color: var(--muted); font-size: 0.95rem; }

/* Die sechste Karte "¿Y tu rubro?" hat kein Foto (bewusst -- an ihrer Stelle stuende
   sonst eine erfundene Kundenstimme). Sie bekommt deshalb mehr Innenabstand und eine
   gestrichelte Kante, damit sie als Einladung und nicht als fehlendes Bild gelesen wird. */
.rubro--offen {
  border-style: dashed;
  border-color: var(--border-strong);
  background: var(--white);
  display: flex;
  align-items: center;
}
.rubro--offen .rubro-txt { padding: 26px 22px; }
.rubro--offen .cta-row { margin-top: 16px; }

/* --- 6.6 Problema real --- */

.problema {
  position: relative;
  color: var(--white);
  background: var(--navy);
  overflow: hidden;
}
.problema-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.problema::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11, 45, 91, 0.93), rgba(11, 45, 91, 0.88));
}
.problema .wrap { position: relative; z-index: 2; }
/* Diese Zeile stand zuerst NUR im Desktop-Block. Auf dem Handy lief die Ueberschrift
   damit in Marineblau auf marineblauem Grund -- praktisch unlesbar. Gemessen am
   07.09.2026 im Bild bei 390 px. Sie gehoert hierher, in die Grundregel, nicht in eine
   Bildschirmbreite. */
.problema h2 { color: var(--white); }
.problema-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: var(--radius);
  padding: 26px 22px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.problema-zahl {
  display: block;
  font-size: clamp(1.5rem, 6.6vw, 2rem);
  font-weight: 800;
  line-height: 1.24;
  color: var(--white);
  margin: 0 0 14px;
}
.problema-zahl em { font-style: normal; color: #ffd7db; }
.problema p { color: rgba(255, 255, 255, 0.9); }
.problema .cifras-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  color: var(--white);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --- 6.7 Precio --- */

.precio-card {
  border: 2px solid var(--blue);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.precio-kopf {
  padding: 26px 22px 22px;
  text-align: center;
  background: linear-gradient(180deg, var(--blue-soft), var(--white));
  border-bottom: 1px solid var(--border);
}
.precio-badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--red);
  color: var(--white);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.precio-zahl {
  display: block;
  font-size: clamp(2.5rem, 12vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--navy);
}
.precio-zahl small { font-size: 0.4em; font-weight: 800; letter-spacing: -0.02em; }
.precio-jahr {
  display: inline-block;
  margin-top: 12px;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  font-size: 0.94rem;
}
.precio-body { padding: 22px; }
.precio-body h3 { font-size: 1rem; margin-bottom: 14px; }
.precio-fuss {
  margin: 18px 0 0;
  font-size: 0.88rem;
  color: var(--muted-soft);
  text-align: center;
}

/* --- 6.8 CTA final --- */

.cierre {
  color: var(--white);
  background: linear-gradient(140deg, var(--navy) 0%, #123a72 55%, var(--blue-dark) 100%);
  text-align: center;
}
.cierre h2 { color: var(--white); font-size: clamp(1.7rem, 7.4vw, 2.3rem); }
.cierre p { color: rgba(255, 255, 255, 0.9); margin-left: auto; margin-right: auto; }
.cierre .cta-row { align-items: stretch; }
.cierre .cta-note { justify-content: center; color: rgba(255, 255, 255, 0.85); }
.cierre .cta-note svg { color: #7ee2a2; }
.cierre .hand { color: #bcd4ff; display: block; margin-top: 22px; }
.cierre-band {
  display: block;
  width: 92px; height: 6px;
  margin: 0 auto 20px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--red) 0 33.3%, var(--white) 33.3% 66.6%,
    var(--blue) 66.6% 100%);
}

/* --------------------------------------------------- 6. Fusszeile u.a. */

.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.78);
  padding: 40px 0 30px;
  font-size: 0.94rem;
}
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.footer-brand .brand-name { color: var(--white); }
.footer-brand .brand-name b { color: #9cc0ff; }
.footer-eslogan { color: rgba(255, 255, 255, 0.72); margin: 0 0 24px; font-weight: 600; }

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
.footer-nav a {
  display: inline-block;
  padding: 8px 0;
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  font-weight: 600;
}
@media (hover: hover) { .footer-nav a:hover { color: var(--white); text-decoration: underline; } }

.footer-schluss {
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.6);
}
.footer-schluss .hand { color: #bcd4ff; display: block; margin-bottom: 12px; }

/* --- Schwebender WhatsApp-Knopf (§11: "sticky CTA inferior opcional para WhatsApp") ---
   Nur auf schmalen Bildschirmen und erst ab einem Viertel Scrolltiefe, damit er den
   Hero nicht zudeckt. Er ist eine Zugabe: derselbe Weg steht mehrfach als normaler
   Knopf auf der Seite, ohne JavaScript fehlt also nichts. */
.float-cta {
  position: fixed;
  left: 14px; right: 14px;
  bottom: 14px;
  z-index: 90;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.float-cta.is-visible { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: reduce) { .float-cta { transition: none; } }

/* --- Rechtsseiten (Geruest) --- */

.legal { padding: 40px 0 60px; }
.legal h1 { font-size: 1.7rem; }
.legal h2 { font-size: 1.15rem; margin-top: 28px; }
.legal p, .legal li { color: var(--muted); }
.legal ul { padding-left: 20px; }
.hinweis {
  margin: 22px 0;
  padding: 18px 20px;
  border-left: 4px solid var(--red);
  background: var(--soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.hinweis strong { color: var(--navy); }
.zurueck {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 30px; font-weight: 700; text-decoration: none;
}
.zurueck:hover { text-decoration: underline; }

/* ------------------------------------------- 7. Breitere Bildschirme */

@media (min-width: 600px) {
  body { font-size: 17.5px; }
  section { padding: 66px 0; }
  h1 { font-size: 2.4rem; }
  h2 { font-size: 2rem; }
  .wrap { padding: 0 24px; }
  .cta-row { flex-direction: row; flex-wrap: wrap; }
  .btn--block { display: inline-flex; width: auto; }
  .grid--2 { grid-template-columns: 1fr 1fr; gap: 16px; }
  .checks { grid-template-columns: 1fr 1fr; gap: 12px 22px; }
  .hero-phone { max-width: 300px; }
}

@media (min-width: 860px) {
  section { padding: 84px 0; }
  h2 { font-size: 2.2rem; }

  /* Kopfzeile: Menue ausgeklappt, Hamburger weg, CTA sichtbar (§6.1 Desktop). */
  .nav-toggle { display: none; }
  .header-cta { display: inline-flex; }
  .site-nav {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 0;
    margin-right: 14px;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .site-nav a { padding: 9px 12px; font-size: 0.96rem; }

  .float-cta { display: none; }

  /* Hero zweispaltig: Text links, Telefon rechts (§6.2). Der Verlauf wird schraeg und
     laesst die rechte Seite deutlich heller -- dort steht kein Text, dort darf das
     Abendlicht von Asuncion zu sehen sein. */
  .hero::after {
    background:
      linear-gradient(100deg, rgba(11, 45, 91, 0.94) 0%, rgba(11, 45, 91, 0.86) 34%,
        rgba(11, 45, 91, 0.55) 62%, rgba(11, 45, 91, 0.34) 100%);
  }
  .hero .wrap { padding-top: 76px; padding-bottom: 76px; }
  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: center;
    gap: 48px;
  }
  .hero h1 { font-size: clamp(2.5rem, 3.7vw, 3.1rem); }
  .hero p { font-size: 1.1rem; }
  .hero-phone { margin: 0 auto; max-width: 330px; }

  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }

  /* "Que es PySello": Text links, Telefon Mitte, Checks rechts (§6.4). */
  .quees-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr) minmax(0, 0.92fr);
    align-items: center;
    gap: 44px;
  }
  .quees-phone { margin: 0; max-width: 100%; }
  .checks { grid-template-columns: 1fr; }

  .problema-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 44px;
  }

  .precio-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 44px;
  }
  .precio-kopf { padding: 34px 26px 28px; }
  .precio-body { padding: 28px; }

  .footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }
  .footer-nav { flex-direction: row; flex-wrap: wrap; gap: 6px 26px; }
}

@media (min-width: 1040px) {
  .rubros .grid--3 { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .grid--4 { gap: 20px; }
}